Merge pull request #242 from bipproduction/Nico/15Januari2025

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

src/app/dev/event/detail/detail_sponsor/[id]/layout.tsx

@@ -0,0 +1,12 @@
+import LayoutEvent_DetailSponsor from '@/app_modules/event/detail/detail_sponsor/layout';
+import React from 'react';
+
+function Layout({children} : {children: React.ReactNode}) {
+  return (
+    <>
+      <LayoutEvent_DetailSponsor>{children}</LayoutEvent_DetailSponsor>
+    </>
+  );
+}
+
+export default Layout;

src/app/dev/event/detail/detail_sponsor/[id]/page.tsx

@@ -0,0 +1,12 @@
+import DetailSponsor_Event from '@/app_modules/event/detail/detail_sponsor';
+import React from 'react';
+
+function Page() {
+  return (
+    <>
+      <DetailSponsor_Event/>
+    </>
+  );
+}
+
+export default Page;

src/app/dev/event/detail/peserta/[id]/layout.tsx

@@ -0,0 +1,10 @@
+import { LayoutEvent_Peserta } from '@/app_modules/event';
+import React from 'react';
+
+export default async function Page({ children }: { children: React.ReactNode }) {
+  return (
+    <LayoutEvent_Peserta>
+      {children}
+    </LayoutEvent_Peserta>
+  )
+}

src/app/dev/event/detail/peserta/[id]/page.tsx

@@ -0,0 +1,14 @@
+import Event_DaftarPeserta from '@/app_modules/event/detail/peserta';
+import { Event_countTotalPesertaById } from '@/app_modules/event/fun/count/count_total_peserta_by_id';
+import { event_getOneById } from '@/app_modules/event/fun/get/get_one_by_id';
+import React from 'react';
+
+export default async function Page() { 
+  // const dataEvent = await event_getOneById(eventId);
+  // const totalPeserta = await Event_countTotalPesertaById(eventId);
+
+  return (
+    <Event_DaftarPeserta />
+  )
+
+}

src/app/dev/event/detail/sponsor/[id]/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutEvent_Sponsor } from '@/app_modules/event';
+import React from 'react';
+
+function Layout({ children, }: {children: React.ReactNode}) {
+  return (
+    <>
+      <LayoutEvent_Sponsor >
+        {children}
+      </LayoutEvent_Sponsor>
+    </>
+  );
+}
+
+export default Layout;

src/app/dev/event/detail/sponsor/[id]/page.tsx

@@ -0,0 +1,11 @@
+import Event_DaftarSponsor from '@/app_modules/event/detail/sponsor';
+
+function Page() {
+  return (
+    <>
+      <Event_DaftarSponsor />
+    </>
+  );
+}
+
+export default Page;

src/app/dev/event/detail/tambah_sponsor/layout.tsx

@@ -0,0 +1,12 @@
+import LayoutEvent_TambahSponsor from '@/app_modules/event/detail/tambah_sponsor/layout';
+import React from 'react';
+
+function Layout({children}: {children: React.ReactNode}) {
+  return (
+    <LayoutEvent_TambahSponsor>
+      {children}
+    </LayoutEvent_TambahSponsor>
+  );
+}
+
+export default Layout;

src/app/dev/event/detail/tambah_sponsor/page.tsx

@@ -0,0 +1,12 @@
+import Event_TambahSponsor from '@/app_modules/event/detail/tambah_sponsor';
+import React from 'react';
+
+function Page() {
+  return (
+    <>
+      <Event_TambahSponsor/>
+    </>
+  );
+}
+
+export default Page;

src/app/lib/router_hipmi/router_event.ts

@@ -32,4 +32,19 @@ export const RouterEvent = {
   detail_draft: "/dev/event/detail/draft/",
   detail_reject: "/dev/event/detail/reject/",
   detail_riwayat: "/dev/event/detail/riwayat/",
+
+  //peserta
+  daftar_peserta: ({ id }: { id: string }) =>
+    `/dev/event/detail/peserta/${id}`,
+
+  //sponsor
+  daftar_sponsor: ({ id }: { id: string }) =>
+    `/dev/event/detail/sponsor/${id}`,
+  tambah_sponsor: "/dev/event/detail/tambah_sponsor/",
+  detail_sponsor: ({ id }: { id: string }) =>
+    `/dev/event/detail/detail_sponsor/${id}`,
+
+
+
 };
+

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>
     </>

src/app_modules/event/detail/detail_sponsor/index.tsx

@@ -0,0 +1,55 @@
+'use client';
+import { AccentColor, MainColor } from '@/app_modules/_global/color';
+import { ComponentGlobal_CardStyles } from '@/app_modules/_global/component';
+import { Box, Flex, Image, Stack, Text, Title } from '@mantine/core';
+import { IconBrandWhatsapp } from '@tabler/icons-react';
+import React from 'react';
+import { TfiFacebook } from 'react-icons/tfi';
+
+function DetailSponsor_Event() {
+  return (
+    <>
+      <Stack pb={"lg"}>
+        <Stack
+          spacing={0}
+          style={{
+            padding: "15px",
+            border: `2px solid ${AccentColor.blue}`,
+            backgroundColor: AccentColor.darkblue,
+            borderRadius: "10px",
+            color: "white",
+          }}
+          align='center'
+        >
+          <Text>Nominal Sponsor:</Text>
+          <Title order={4} c={MainColor.yellow}>
+            Rp. 100.000
+          </Title>
+        </Stack>
+        <ComponentGlobal_CardStyles>
+          <Stack>
+            <Image src={"https://job-portal.niramasutama.com/images/Banner-INACO.png"} alt='' />
+            <Flex justify={"space-between"} >
+              <Box>
+                <Title order={4}>INACO</Title>
+              </Box>
+              <Box>
+                <Title order={4}>Sosial Media:</Title>
+                <Flex align={"center"} gap={"sm"}>
+                  <TfiFacebook size={10}/>
+                  <Text fz={"sm"}>InacoJellyku</Text>
+                </Flex>
+                <Flex align={"center"} gap={"sm"}>
+                  <IconBrandWhatsapp size={10}/>
+                  <Text fz={"sm"}>+6289647038426</Text>
+                </Flex>
+              </Box>
+            </Flex>
+          </Stack>
+        </ComponentGlobal_CardStyles>
+      </Stack>
+    </>
+  );
+}
+
+export default DetailSponsor_Event;

src/app_modules/event/detail/detail_sponsor/layout.tsx

@@ -0,0 +1,39 @@
+'use client';
+import { UIGlobal_Drawer, UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from '@/app_modules/_global/ui';
+import { ActionIcon } from '@mantine/core';
+import { IconDotsVertical, IconEdit, IconTrash } from '@tabler/icons-react';
+import React, { useState } from 'react';
+
+function LayoutEvent_DetailSponsor({ children }: { children: React.ReactNode }) {
+  const [openDrawer, setOpenDrawer] = useState(false);
+  return (
+    <>
+      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Detail Sponsor"
+        customButtonRight={
+          <ActionIcon variant='transparent' onClick={() => setOpenDrawer(true)}>
+            <IconDotsVertical color='white' />
+          </ActionIcon>} />}>
+      {children}
+      </UIGlobal_LayoutTamplate>
+      <UIGlobal_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={[
+          {
+            id: 1,
+            name: 'Edit Sponsor',
+            icon: <IconEdit />,
+            // path: RouterEvent.tambah_sponsor,
+          },
+          {
+            id: 2,
+            name: 'Hapus Sponsor',
+            icon: <IconTrash/>
+          }
+        ]}
+      />
+    </>
+  );
+}
+
+export default LayoutEvent_DetailSponsor;

src/app_modules/event/detail/main_detail/index.tsx

@@ -79,11 +79,11 @@ export default function Event_DetailMain({
           </Button>
         )}
 
-        <ComponentEvent_ListPeserta
+        {/* <ComponentEvent_ListPeserta
           total={total}
           eventId={eventId}
           isNewPeserta={isNewPeserta}
-        />
+        /> */}
       </Stack>
     </>
   );

src/app_modules/event/detail/peserta/index.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { Stack } from '@mantine/core';
+import ComponentEvent_ListPeserta from '../../component/detail/list_peserta';
+import { MODEL_EVENT_PESERTA } from '../../model/interface';
+import { useParams } from 'next/navigation';
+import ComponentEvent_ListPesertaNew from '../../component/detail/list_peserta_new';
+
+// function Event_DaftarPeserta({ totalPeserta, eventId, isNewPeserta }: {
+//   totalPeserta?: number;
+//   eventId?: string;
+//   isNewPeserta?: boolean | null;
+// }) {
+  function Event_DaftarPeserta() {
+  return (
+    <>
+      <Stack>
+        <ComponentEvent_ListPesertaNew/>
+        {/* <ComponentEvent_ListPeserta eventId={params.id} total={totalPeserta as any} isNewPeserta={isNewPeserta} /> */}
+      </Stack>
+    </>
+  );
+}
+
+export default Event_DaftarPeserta;

src/app_modules/event/detail/peserta/layout.tsx

@@ -0,0 +1,14 @@
+import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from '@/app_modules/_global/ui';
+import React from 'react';
+
+function LayoutEvent_Peserta({children}: {children: React.ReactNode}) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="DaftarPeserta" />}>
+      {children}
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}
+
+export default LayoutEvent_Peserta;

src/app_modules/event/detail/sponsor/index.tsx

@@ -0,0 +1,12 @@
+'use client';
+import ComponentEvent_ListSponsor from '../../component/detail/list_sponsor';
+
+function Event_DaftarSponsor() {
+  return (
+    <>
+      <ComponentEvent_ListSponsor/>
+    </>
+  );
+}
+
+export default Event_DaftarSponsor;

src/app_modules/event/detail/sponsor/layout.tsx

@@ -0,0 +1,44 @@
+'use client';
+import { RouterEvent } from '@/app/lib/router_hipmi/router_event';
+import { UIGlobal_Drawer, UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from '@/app_modules/_global/ui';
+import { ActionIcon } from '@mantine/core';
+import { IconDotsVertical } from '@tabler/icons-react';
+import React, { useState } from 'react';
+import { TfiCup } from "react-icons/tfi";
+
+function LayoutEvent_Sponsor({ children}: { children: React.ReactNode;}) {
+  const [openDrawer, setOpenDrawer] = useState(false);
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate
+          title="Daftar Sponsor"
+          customButtonRight={
+            <ActionIcon
+              variant='transparent'
+              onClick={() => setOpenDrawer(true)}
+            >
+              <IconDotsVertical color="white" />
+            </ActionIcon>
+          }
+        />}>
+        {children}
+      </UIGlobal_LayoutTamplate>
+      <UIGlobal_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={[
+          {
+            id: 1,
+            name: 'Tambah Sponsor',
+            icon: <TfiCup/>,
+            path: RouterEvent.tambah_sponsor,
+          },
+        ]}
+
+      />
+    </>
+  );
+}
+
+export default LayoutEvent_Sponsor;

src/app_modules/event/detail/tambah_sponsor/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import CreateSponsor from '../../component/detail/create_sponsor';
+
+function Event_TambahSponsor() {
+  return (
+    <>
+      <CreateSponsor/>
+    </>
+  );
+}
+
+export default Event_TambahSponsor;

src/app_modules/event/detail/tambah_sponsor/layout.tsx

@@ -0,0 +1,17 @@
+'use client';
+import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from '@/app_modules/_global/ui';
+import React from 'react';
+
+function LayoutEvent_TambahSponsor({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Tambah Sponsor"/>}
+      >
+        {children}
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}
+
+export default LayoutEvent_TambahSponsor;

src/app_modules/event/index.ts

@@ -22,6 +22,8 @@ import LayoutEvent_DetailKontribusi from "./detail/kontribusi/layout";
 import Event_Riwayat from "./main/riwayat";
 import Event_DetailRiwayat from "./detail/riwayat";
 import LayoutEvent_DetailRiwayat from "./detail/riwayat/layout";
+import LayoutEvent_Peserta from "./detail/peserta/layout";
+import LayoutEvent_Sponsor from "./detail/sponsor/layout";
 
 export {
   Event_SplashScreen,
@@ -47,5 +49,7 @@ export {
   LayoutEvent_DetailKontribusi,
   Event_Riwayat ,
   Event_DetailRiwayat ,
-  LayoutEvent_DetailRiwayat ,
+  LayoutEvent_DetailRiwayat,
+  LayoutEvent_Peserta,
+  LayoutEvent_Sponsor
 };