Add Daftar Peserta, Daftar Sponsor, Detail Sponsor, Tambah Sponsor

src/app_modules/event/component/detail/comp_box_daftar_peserta.tsx

@@ -0,0 +1,44 @@
+import { RouterEvent } from '@/app/lib/router_hipmi/router_event';
+import { AccentColor, MainColor } from '@/app_modules/_global/color';
+import { ActionIcon, Flex, Paper, Text, Loader } from '@mantine/core';
+import { IconUser } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+
+function Event_ComponentBoxDaftarPeserta({ eventId }: { eventId?: string }) {
+  const params = useParams<{ id: string }>()
+  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+  return (
+    <>
+      <Paper
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.blue,
+          border: `2px solid ${AccentColor.softblue}`,
+          borderRadius: "10px",
+          color: "white",
+        }}
+        onClick={() => {
+          setLoading(true);
+          router.push(RouterEvent.daftar_peserta({ id: params.id }), {
+            scroll: false,
+          });
+          // router.push(RouterInvestasi_OLD.detail_dokumen + investasiId, { scroll: false });
+        }}
+      >
+        <Flex direction={"column"} align={"center"} justify={"center"}>
+          <Text c={MainColor.white} fz={12}>Daftar Peserta</Text>
+          <ActionIcon radius={"xl"} variant="transparent" size={60}>
+            {isLoading ? (
+              <Loader color="yellow" />
+            ) : (
+              <IconUser size={70} color={MainColor.white} />
+            )}
+          </ActionIcon>
+        </Flex>
+      </Paper>
+    </>
+  );
+}
+export default Event_ComponentBoxDaftarPeserta;

src/app_modules/event/component/detail/comp_box_sponsor.tsx

@@ -0,0 +1,44 @@
+import { RouterEvent } from '@/app/lib/router_hipmi/router_event';
+import { AccentColor, MainColor } from '@/app_modules/_global/color';
+import { ActionIcon, Flex, Loader, Paper, Text } from '@mantine/core';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { TfiCup } from "react-icons/tfi";
+
+function Event_ComponentBoxDaftarSponsor() {
+  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+  const params = useParams<{ id: string }>();
+  return (
+    <>
+      <Paper
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.blue,
+          border: `2px solid ${AccentColor.softblue}`,
+          borderRadius: "10px",
+          color: "white",
+        }}
+        onClick={() => {
+          setLoading(true);
+          router.push(RouterEvent.daftar_sponsor({ id: params.id }), {
+            scroll: false,
+          });
+          // router.push(RouterInvestasi_OLD.detail_dokumen + investasiId, { scroll: false });
+        }}
+      >
+        <Flex direction={"column"} align={"center"} justify={"center"}>
+          <Text c={MainColor.white} fz={12}>Daftar Sponsor</Text>
+          <ActionIcon radius={"xl"} variant="transparent" size={60}>
+            {isLoading ? (
+              <Loader color="yellow" />
+            ) : (
+              <TfiCup size={70} color={MainColor.white} />
+            )}
+          </ActionIcon>
+        </Flex>
+      </Paper>
+    </>
+  );
+}
+export default Event_ComponentBoxDaftarSponsor;

src/app_modules/event/component/detail/create_sponsor.tsx

@@ -0,0 +1,108 @@
+'use client';
+import { MainColor } from '@/app_modules/_global/color';
+import { ComponentGlobal_BoxInformation, ComponentGlobal_BoxUploadImage } from '@/app_modules/_global/component';
+import { Investasi_ComponentButtonCreateNewInvestasi } from '@/app_modules/investasi/_component';
+import { Box, Stack, Loader, AspectRatio, Image, Button, TextInput, Group, Title } from '@mantine/core';
+import { IconCamera, IconPhoto } from '@tabler/icons-react';
+import React, { useState } from 'react';
+
+function Event_CreateSponsor() {
+  const [img, setImg] = useState<any | null>(null);
+  const [isLoadingImg, setIsLoadingImg] = useState(false);
+  return (
+    <>
+      <Stack px={"xs"} spacing={0}>
+        <Stack spacing={0}>
+          <Box mb={"sm"}>
+            <ComponentGlobal_BoxInformation
+              informasi='Gambar sponsor bisa berupa ilustrasti, 
+              logo atau foto terkait sponsor'/>
+          </Box>
+          <ComponentGlobal_BoxUploadImage>
+            {isLoadingImg ? (
+              <Stack justify='center' align='center' h={"100%"}>
+                <Loader size={150} color="yellow" />
+              </Stack>
+            ) : img ? (
+              <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
+                <Image
+                  style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
+                  alt="Foto"
+                  height={250}
+                  src={URL.createObjectURL(img)}
+                />
+              </AspectRatio>
+
+            ) : (
+              <Stack justify='center' align='center' h={"100%"}>
+                <IconPhoto size={150} color='gray' />
+              </Stack>
+            )}
+          </ComponentGlobal_BoxUploadImage>
+          <Group position="center">
+            <Button radius={"xl"} leftIcon={<IconCamera color='black' />} color='yellow' c={"black"} bg={MainColor.yellow}>Upload Gambar</Button>
+          </Group>
+          <Stack mt={30}>
+            <TextInput
+              styles={{
+                label: {
+                  color: MainColor.white,
+                },
+                required: {
+                  color: MainColor.red,
+                },
+                input: {
+                  backgroundColor: MainColor.white,
+                }
+              }}
+              withAsterisk
+              label="Nama Sponsor"
+              placeholder="Masukan nama sponsor"
+
+            />
+            <Title order={4} color={MainColor.white}>Sosial Media</Title>
+            <TextInput
+              styles={{
+                label: {
+                  color: MainColor.white,
+                },
+                required: {
+                  color: MainColor.red,
+                },
+                input: {
+                  backgroundColor: MainColor.white,
+                }
+              }}
+              withAsterisk
+              label="Facebook"
+              placeholder="Masukan facebook"
+
+            />
+            <TextInput
+              styles={{
+                label: {
+                  color: MainColor.white,
+                },
+                required: {
+                  color: MainColor.red,
+                },
+                input: {
+                  backgroundColor: MainColor.white,
+                }
+              }}
+              withAsterisk
+              label="WhatsApp"
+              placeholder="Masukan whatsapp"
+
+            />         
+              <Button mt={90} mb={20}  radius={"xl"} color='yellow' c={"black"} bg={MainColor.yellow}>
+                Simpan
+              </Button>
+          </Stack>
+        </Stack>
+      </Stack>
+    </>
+  );
+}
+
+export default Event_CreateSponsor;

src/app_modules/event/component/detail/detail_main.tsx

@@ -4,7 +4,7 @@ import {
   ComponentGlobal_AvatarAndUsername,
   ComponentGlobal_CardStyles,
 } from "@/app_modules/_global/component";
-import { Center, Grid, Skeleton, Stack, Text, Title } from "@mantine/core";
+import { Center, Grid, SimpleGrid, Skeleton, Stack, Text, Title } from "@mantine/core";
 import { MODEL_EVENT } from "../../model/interface";
 import { useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
@@ -13,6 +13,8 @@ import { Event_ComponentSkeletonDetail } from "../skeleton/comp_skeleton_detail"
 import moment from "moment";
 import "moment/locale/id";
 import { MainColor } from "@/app_modules/_global/color";
+import Event_ComponentBoxDaftarPeserta from "./comp_box_daftar_peserta";
+import Event_ComponentBoxDaftarSponsor from "./comp_box_sponsor";
 
 export default function ComponentEvent_DetailMainData({
   eventId,
@@ -105,6 +107,16 @@ export default function ComponentEvent_DetailMainData({
                 <Text c={MainColor.white} fw={"bold"}>Deskripsi</Text>
                 <Text c={MainColor.white}>{data ? data?.deskripsi : null}</Text>
               </Stack>
+              <SimpleGrid
+                cols={2}
+                breakpoints={[
+                  { maxWidth: "48rem", cols: 2, spacing: "sm" },
+                  { maxWidth: "36rem", cols: 1, spacing: "sm" },
+                ]}
+              >
+                  <Event_ComponentBoxDaftarPeserta/>
+                  <Event_ComponentBoxDaftarSponsor />
+              </SimpleGrid>
             </Stack>
           </Stack>
         </ComponentGlobal_CardStyles>

src/app_modules/event/component/detail/list_peserta_new.tsx

@@ -0,0 +1,43 @@
+import { AccentColor, MainColor } from '@/app_modules/_global/color';
+import { Avatar, Badge, Box, Card, Flex, Group, Stack, Text } from '@mantine/core';
+
+function ComponentEvent_ListPesertaNew({ backgroundColor, border, marginBottom, height, color }: {
+  backgroundColor?: string;
+  border?: string;
+  marginBottom?: string | number;
+  height?: string | number;
+  color?: string;
+}) {
+  return (
+    <>
+      <Box>
+        <Card
+          style={{
+            backgroundColor: backgroundColor
+              ? backgroundColor
+              : AccentColor.darkblue,
+            border: `2px solid ${border ? border : AccentColor.blue}`,
+            paddingInline: "16px",
+            paddingBlock: "16px",
+            borderRadius: "10px",
+            color: color ? color : MainColor.white,
+            height: height ? height : "auto",
+            marginBottom: marginBottom ? marginBottom : "15px",
+          }}
+
+        >
+          <Flex gap={"md"} align={"center"} justify={"space-between"}>
+            <Group>
+            <Avatar radius={"xl"} size={40}>
+            </Avatar>
+              <Text fz={"md"}>Nico Arya Putra Laksana</Text>
+            </Group>
+            <Badge style={{ color: "white" }} bg={"blue"}>HADIR</Badge>
+          </Flex>
+        </Card>
+      </Box>
+    </>
+  );
+}
+
+export default ComponentEvent_ListPesertaNew;

src/app_modules/event/component/detail/list_sponsor.tsx

@@ -0,0 +1,51 @@
+'use client'
+import { RouterEvent } from '@/app/lib/router_hipmi/router_event';
+import { AccentColor, MainColor } from '@/app_modules/_global/color';
+import { Avatar, Box, Card, Flex, Group, Image, Text } from '@mantine/core';
+import { useParams, useRouter } from 'next/navigation';
+
+function ComponentEvent_ListSponsor({ backgroundColor, border, marginBottom, height, color,  }:
+    {
+        backgroundColor?: string;
+        border?: string;
+        marginBottom?: string | number;
+        height?: string | number;
+        color?: string;
+    })
+    {
+    const router = useRouter();
+    const params = useParams<{ id: string }>();
+    return (
+        <>
+            <Box>
+                <Card
+                    style={{
+                        backgroundColor: backgroundColor
+                            ? backgroundColor
+                            : AccentColor.darkblue,
+                        border: `2px solid ${border ? border : AccentColor.blue}`,
+                        paddingInline: "16px",
+                        paddingBlock: "16px",
+                        borderRadius: "10px",
+                        color: color ? color : MainColor.white,
+                        height: height ? height : "auto",
+                        marginBottom: marginBottom ? marginBottom : "15px",                       
+                    }}
+                    onClick={() => router.push(RouterEvent.detail_sponsor({id: params.id}))}
+                >
+                    <Flex gap={"md"} align={"center"} justify={"space-between"}>
+                        <Group>
+                            <Avatar radius={"xl"} size={40}>
+                                <Image src={"https://images.app.goo.gl/C7WDoF9X52HC5SJX9"} alt='' />
+                            </Avatar>
+                            <Text fz={"md"}>INACO</Text>
+                        </Group>
+                        <Text style={{color: 'white'}}>Rp. 100.000</Text>
+                    </Flex>
+                </Card>
+            </Box>
+        </>
+    );
+}
+
+export default ComponentEvent_ListSponsor;

src/app_modules/event/component/skeleton/comp_skeleton_detail.tsx

@@ -1,6 +1,6 @@
 import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
-import { Center, Grid, Stack } from "@mantine/core";
+import { Center, Grid, SimpleGrid, Stack } from "@mantine/core";
 
 export function Event_ComponentSkeletonDetail() {
   return (
@@ -30,6 +30,16 @@ export function Event_ComponentSkeletonDetail() {
             <CustomSkeleton h={20} w={"100%"} />
             <CustomSkeleton h={20} w={"100%"} />
           </Stack>
+          <SimpleGrid
+            cols={2}
+            breakpoints={[
+              { maxWidth: "48rem", cols: 2, spacing: "sm" },
+              { maxWidth: "36rem", cols: 1, spacing: "sm" },
+            ]}
+          >
+            <CustomSkeleton h={100} w={"100%"} />
+            <CustomSkeleton h={100} w={"100%"} />
+          </SimpleGrid>
         </Stack>
       </ComponentGlobal_CardStyles>
     </>