Merge pull request #245 from bipproduction/Nico/16Januari2025

Nico/16 januari2025

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <>
+      Page
+    </>
+  );
+}
+
+export default Page;

src/app/dev/event/detail/sponsor/edit_sponsor/layout.tsx

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

src/app/dev/event/detail/sponsor/edit_sponsor/page.tsx

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

src/app/dev/event/detail/sponsor/metode_pembayaran/layout.tsx

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

src/app/dev/event/detail/sponsor/metode_pembayaran/page.tsx

@@ -0,0 +1,14 @@
+
+import Event_MetodePembayaran from '@/app_modules/event/detail/sponsor/metode_pembayaran';
+import { MODEL_MASTER_BANK } from '@/app_modules/investasi/_lib/interface';
+import React from 'react';
+
+function Page() {
+  return (
+    <>
+      <Event_MetodePembayaran  />
+    </>
+  );
+}
+
+export default Page;

src/app/dev/event/detail/sponsor/nominal_sponsor/layout.tsx

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

src/app/dev/event/detail/sponsor/nominal_sponsor/page.tsx

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

src/app/dev/event/invoice/layout.tsx

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

src/app/dev/event/invoice/page.tsx

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

src/app/lib/router_admin/router_admin_event.ts

@@ -3,6 +3,7 @@ export const RouterAdminEvent = {
 
   // detail
   detail_peserta: "/dev/admin/event/detail/peserta/",
+  detail_publish: "/dev/admin/event/detail/publish/",
 
   // child
   detail_tipe_acara: "/dev/admin/event/child/tipe_acara",
@@ -12,4 +13,5 @@ export const RouterAdminEvent = {
   table_review: "/dev/admin/event/table/review",
   table_publish: "/dev/admin/event/table/publish",
   table_reject: "/dev/admin/event/table/reject",
+  
 };

src/app/lib/router_hipmi/router_event.ts

@@ -40,7 +40,8 @@ export const RouterEvent = {
   //sponsor
   daftar_sponsor: ({ id }: { id: string }) =>
     `/dev/event/detail/sponsor/${id}`,
-  tambah_sponsor: "/dev/event/detail/tambah_sponsor/",
+  edit_sponsor: "/dev/event/detail/sponsor/edit_sponsor/",
+  tambah_sponsor: "/dev/event/detail/sponsor/tambah_sponsor/",
   detail_sponsor: ({ id }: { id: string }) =>
     `/dev/event/detail/detail_sponsor/${id}`,
 

src/app_modules/_global/ui/ui_drawer.tsx

@@ -77,7 +77,7 @@ export default function UIGlobal_Drawer({
           </Group>
           <SimpleGrid cols={component.length < 4 ? component.length : 4}>
             {component.map((e, i) => (
-              <Stack key={i} align="center" spacing={"xs"}
+              <Stack key={i} align="center" spacing={"xs"} 
                 onClick={() => {
                   setPageId(e?.id);
                   setIsLoading(true);

src/app_modules/_global/ui/ui_drawer_custom.tsx

@@ -25,7 +25,7 @@ export default function UIGlobal_DrawerCustom({
 }: {
   opened: boolean;
   close: () => void;
-  component: React.ReactNode;
+   component: React.ReactNode;
 }) {
   return (
     <>

src/app_modules/admin/event/_lib/global_state.ts

@@ -0,0 +1,5 @@
+import { atomWithStorage } from "jotai/utils";
+
+const gs_admin_event_menu_publish = atomWithStorage("gs_admin_event_menu_publish", "1") 
+
+export { gs_admin_event_menu_publish }

src/app_modules/admin/event/table_status/detail_publish.tsx

@@ -0,0 +1,51 @@
+import { useAtom } from 'jotai';
+import React from 'react';
+import { gs_admin_event_menu_publish } from '../_lib/global_state';
+import { IconCircleCheck } from '@tabler/icons-react';
+import { Button, Group, Stack } from '@mantine/core';
+import AdminGlobal_ComponentBackButton from '../../_admin_global/back_button';
+
+function AdminEvent_DetailPublish() {
+  const [selectPage, setSelectPage] = useAtom(gs_admin_event_menu_publish);
+  const listPage = [
+    {
+      id: "1",
+      name: "Detail Event",
+      icon: <IconCircleCheck />,
+    },
+    {
+      id: "2",
+      name: "Daftar Peserta",
+      icon: <IconCircleCheck />,
+    },
+    {
+      id: "3",
+      name: "Daftar Sponsor"
+    }
+  ]
+  return (
+    <>
+      <Stack>
+        <AdminGlobal_ComponentBackButton />
+
+        <Group>
+          {listPage.map((e) => (
+            <Button
+              key={e.id}
+              color={selectPage == e.id ? "green" : "gray"}
+              onClick={() => setSelectPage(e.id)}
+              style={{
+                transition: "all 0.5s",
+              }}
+            >
+              {e.name}
+            </Button>
+
+          ))}
+        </Group>
+      </Stack>
+    </>
+  );
+}
+
+export default AdminEvent_DetailPublish;

src/app_modules/admin/event/table_status/table_publish.tsx

@@ -202,7 +202,6 @@ function TableStatus({ listPublish }: { listPublish: any }) {
               e.id === eventId ? (loading === true ? true : false) : false
             }
             color={"green"}
-            leftIcon={<IconCircleCheck />}
             radius={"xl"}
             onClick={async () => {
               setEventId(e.id);
@@ -210,7 +209,7 @@ function TableStatus({ listPublish }: { listPublish: any }) {
               router.push(RouterAdminEvent.detail_peserta + e.id);
             }}
           >
-            Lihat Peserta
+            Detail
           </Button>
         </td>
       </tr>

src/app_modules/donasi/component/button/comp_button_delete_donasi_by_id.tsx

@@ -85,12 +85,12 @@ export function Donasi_ComponentButtonDeleteDonasiById({
         close={() => setOpenModal(false)}
         buttonKiri={
           <Button style={{ backgroundColor: AccentColor.blue }}
-          c={AccentColor.white} radius={"xl"} onClick={() => setOpenModal(false)}>
+            c={AccentColor.white} radius={"xl"} onClick={() => setOpenModal(false)}>
             Batal
           </Button>
         }
         buttonKanan={
-          <Button c={AccentColor.white} loading={isLoading} loaderPosition="center" radius={"xl"} style={{ backgroundColor: MainColor.red}} onClick={() => onDelete()}>
+          <Button c={AccentColor.white} loading={isLoading} loaderPosition="center" radius={"xl"} style={{ backgroundColor: MainColor.red }} onClick={() => onDelete()}>
             Hapus
           </Button>
         }

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

@@ -4,9 +4,11 @@ import { ComponentGlobal_BoxInformation, ComponentGlobal_BoxUploadImage } from '
 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 { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 
 function Event_CreateSponsor() {
+  const router = useRouter();
   const [img, setImg] = useState<any | null>(null);
   const [isLoadingImg, setIsLoadingImg] = useState(false);
   return (
@@ -95,7 +97,7 @@ function Event_CreateSponsor() {
               placeholder="Masukan whatsapp"
 
             />         
-              <Button mt={90} mb={20}  radius={"xl"} color='yellow' c={"black"} bg={MainColor.yellow}>
+              <Button mt={90} mb={20}  radius={"xl"} color='yellow' c={"black"} bg={MainColor.yellow} onClick={() => router.push("/dev/event/detail/sponsor/nominal_sponsor")}>
                 Simpan
               </Button>
           </Stack>

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

@@ -1,11 +1,14 @@
 'use client';
-import { UIGlobal_Drawer, UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from '@/app_modules/_global/ui';
+import { AccentColor, MainColor } from '@/app_modules/_global/color';
-import { ActionIcon } from '@mantine/core';
+import { UIGlobal_DrawerCustom, UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate, UIGlobal_Modal } from '@/app_modules/_global/ui';
+import { ActionIcon, Box, Button, Center, Flex, Stack, Text } 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);
+  const [openModal, setOpenModal] = useState(false);
+  const [isLoading, setLoading] = useState(false);
   return (
     <>
       <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Detail Sponsor"
@@ -13,24 +16,66 @@ function LayoutEvent_DetailSponsor({ children }: { children: React.ReactNode })
           <ActionIcon variant='transparent' onClick={() => setOpenDrawer(true)}>
             <IconDotsVertical color='white' />
           </ActionIcon>} />}>
-      {children}
+        {children}
       </UIGlobal_LayoutTamplate>
-      <UIGlobal_Drawer
+      <UIGlobal_DrawerCustom
         opened={openDrawer}
         close={() => setOpenDrawer(false)}
-        component={[
+        component={
-          {
+          <Stack align="center" spacing={"xs"}>
-            id: 1,
+            <Flex gap={200} justify={"space-between"}>
-            name: 'Edit Sponsor',
+              <Box>
-            icon: <IconEdit />,
+                <ActionIcon
-            // path: RouterEvent.tambah_sponsor,
+                  variant="transparent"
-          },
+                  c={MainColor.white}
-          {
+                >
-            id: 2,
+                  <IconEdit />
-            name: 'Hapus Sponsor',
+
-            icon: <IconTrash/>
+                </ActionIcon>
-          }
+                <Text fz={"sm"} align="center" color={MainColor.white}>
-        ]}
+                  Edit
+                </Text>
+              </Box>
+              <Box>
+                <Center>
+                  <ActionIcon
+                    variant="transparent"
+                    c={MainColor.white}
+                    onClick={() => setOpenModal(true)}
+                  >
+                    <IconTrash />
+
+                  </ActionIcon>
+                </Center>
+                <Text fz={"sm"} ta={"center"} color={MainColor.white}>
+                  Hapus
+                </Text>
+              </Box>
+            </Flex>
+          </Stack>
+        }
+      />
+      <UIGlobal_Modal
+        title={"Anda yakin akan menghapus sponsor?"}
+        opened={openModal}
+        close={() => setOpenModal(false)}
+        buttonKiri={
+          <Button style={{ backgroundColor: AccentColor.blue }} c={AccentColor.white} radius={"xl"} onClick={() => setOpenModal(false)}>
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            loaderPosition="center"
+            style={{ backgroundColor: MainColor.red }}
+            loading={isLoading ? true : false}
+            radius={"xl"}
+            c={AccentColor.white}
+
+          >
+            Hapus
+          </Button>
+        }
       />
     </>
   );

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

@@ -0,0 +1,150 @@
+'use client';
+import { AccentColor, MainColor } from '@/app_modules/_global/color';
+import { ActionIcon, Button, Grid, Group, Paper, Stack, Text, Title } from '@mantine/core';
+import { IconCamera } from '@tabler/icons-react';
+import React from 'react';
+
+function Event_Invoice() {
+  return (
+    <>
+      <Stack spacing={"lg"} py={"md"}>
+        <Stack
+          spacing={0}
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+          }}
+        >
+          <Title order={5}>Mohon transfer ke rekening dibawah</Title>
+          <Group spacing={"xs"}>
+            <Text>untuk diteruskan ke</Text>
+            <Text fw={"bold"}>NicoArya</Text>
+          </Group>
+        </Stack>
+
+        <Paper
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+            marginBottom: "15px",
+          }}
+        >
+          <Stack spacing={"md"}>
+            <Stack spacing={0}>
+              <Text>Bank BRI</Text>
+              <Text>PT. Himpunan Pengusaha Badung</Text>
+            </Stack>
+            <Paper
+              style={{
+                backgroundColor: AccentColor.darkblue,
+                border: `2px solid ${AccentColor.darkblue}`,
+                padding: "15px",
+                cursor: "pointer",
+                borderRadius: "10px",
+                color: "white",
+              }}
+            >
+              <Grid>
+                <Grid.Col span={8}>
+                  <Group position='left' align='center' h={"100%"}>
+                    <Title order={4} color={MainColor.yellow}>
+                      9065456754325643
+                    </Title>
+                  </Group>
+                </Grid.Col>
+                <Grid.Col span={4}>
+                  <Group position='right'>
+                    <Button radius={"xl"}
+                      style={{ backgroundColor: MainColor.yellow }}
+                      c={MainColor.darkblue}>
+                      Salin
+                    </Button>
+                  </Group>
+                </Grid.Col>
+              </Grid>
+            </Paper>
+          </Stack>
+        </Paper>
+
+        <Paper
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+            marginBottom: "15px",
+          }}
+        >
+          <Stack spacing={"md"}>
+            <Stack spacing={0}>
+              <Text>Jumlah Transfer</Text>
+            </Stack>
+            <Paper
+              style={{
+                backgroundColor: AccentColor.darkblue,
+                border: `2px solid ${AccentColor.darkblue}`,
+                padding: "15px",
+                cursor: "pointer",
+                borderRadius: "10px",
+                color: "white",
+              }}
+            >
+              <Grid>
+                <Grid.Col span={8}>
+                  <Group position='left' align='center' h={"100%"}>
+                    <Title order={4} color={MainColor.yellow}>
+                      Rp. 100.000
+                    </Title>
+                  </Group>
+                </Grid.Col>
+                <Grid.Col span={4}>
+                  <Group position='right'>
+                    <Button radius={"xl"} style={{ backgroundColor: MainColor.yellow }} c={MainColor.darkblue}>
+                      Salin
+                    </Button>
+                  </Group>
+                </Grid.Col>
+              </Grid>
+            </Paper>
+          </Stack>
+        </Paper>
+
+        <Paper
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+            marginBottom: "15px",
+          }}
+        >
+          <Stack spacing={"sm"}>
+            <Group position='center'>
+              <Button leftIcon={<IconCamera />} radius={"xl"} style={{ backgroundColor: MainColor.yellow }} c={MainColor.darkblue}>
+                Upload
+              </Button>
+            </Group>
+            <Text ta={"center"} fz={"xs"} fs={"italic"}>Upload bukti transfer anda</Text>
+          </Stack>
+        </Paper>
+        <Button radius={"xl"} bg={MainColor.yellow} color='yellow' c="black">
+          Saya Sudah Transfer
+        </Button>
+      </Stack>
+    </>
+  );
+}
+
+export default Event_Invoice;

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

@@ -0,0 +1,24 @@
+'use client';
+import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from '@/app_modules/_global/ui';
+import { ActionIcon } from '@mantine/core';
+import { IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import React from 'react';
+
+function Event_LayoutInvoice({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Invoice"
+        customButtonLeft={
+          <ActionIcon variant='transparent'>
+          <IconX color='white'/>
+          </ActionIcon>
+        }
+      />}>
+        {children}
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}
+
+export default Event_LayoutInvoice;

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

@@ -0,0 +1,109 @@
+'use client'
+import { MainColor } from '@/app_modules/_global/color';
+import { ComponentGlobal_BoxInformation, ComponentGlobal_BoxUploadImage } from '@/app_modules/_global/component';
+import { Box, Stack, Loader, AspectRatio, Image, Group, Button, TextInput, Title } from '@mantine/core';
+import { IconCamera, IconPhoto } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+
+function Event_EditSponsor() {
+  const router = useRouter();
+    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} onClick={() => router.push("/dev/event/detail/sponsor/nominal_sponsor")}>
+              Simpan
+            </Button>
+          </Stack>
+        </Stack>
+      </Stack>
+    </>
+  );
+}
+
+export default Event_EditSponsor;

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

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

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

@@ -0,0 +1,83 @@
+'use client';
+import { AccentColor, MainColor } from '@/app_modules/_global/color';
+import { MODEL_MASTER_BANK } from '@/app_modules/investasi/_lib/interface';
+import { Button, Paper, Radio, Stack, Title } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+
+const bank = [
+  {
+    id: 1,
+    namaBank: "BRI",
+  },
+  {
+    id: 2,
+    namaBank: "BCA",
+  },
+  {
+    id: 3,
+    namaBank: "BNI",
+  },
+  {
+    id: 1,
+    namaBank: "BSI",
+  }
+]
+
+function Event_MetodePembayaran() {
+  const [pilihBank, setPilihBank] = useState("");
+  const router = useRouter();
+  return (
+    <>
+      <Stack>
+        <Radio.Group
+          value={pilihBank}
+          onChange={setPilihBank}
+          withAsterisk
+          color='yellow'
+        >
+          {bank.map((e) => (
+            <Paper 
+            key={e.id}
+            style={{
+              backgroundColor: AccentColor.blue,
+              border: `2px solid ${AccentColor.darkblue}`,
+              padding: "15px",
+              cursor: "pointer",
+              borderRadius: "10px",
+              color: "white",
+              marginBottom: "15px",
+            }}
+          >
+            <Radio
+              styles={{
+                radio: {
+                  color: "yellow"
+                },
+              }}
+              value={e.id}
+              label={
+                <Title order={6} color='white'>
+                  {e.namaBank}
+                </Title>
+              }
+            />
+          </Paper>
+          ))}
+        </Radio.Group>
+        <Button
+          style={{ transition: "0.5s" }}
+          radius={"xl"}
+          bg={MainColor.yellow}
+          color='yellow'
+          c={"black"}
+          onClick={() => router.push("/dev/event/invoice")}
+        >
+          Pilih
+        </Button>
+      </Stack>
+    </>
+  );
+}
+
+export default Event_MetodePembayaran;

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

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

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

@@ -0,0 +1,99 @@
+'use client';
+import { AccentColor, MainColor } from '@/app_modules/_global/color';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconChevronRight, IconMoodSmile, IconMoodSmileBeam, IconMoodSmileDizzy, IconMoodXd } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+const listNominal = [
+  {
+    id: 1,
+    jumlah: " 25.000",
+    icon: <IconMoodSmile />,
+  },
+  {
+    id: 2,
+    jumlah: " 50.000",
+    icon: <IconMoodSmileBeam />,
+  },
+  {
+    id: 3,
+    jumlah: " 75.000",
+    icon: <IconMoodSmileDizzy />,
+  },
+  {
+    id: 4,
+    jumlah: " 100.000",
+    icon: <IconMoodXd />,
+  },
+];
+function Event_PilihNominalSponsor() {
+  const router = useRouter();
+  return (
+    <>
+      <Stack>
+        <Box>
+          {listNominal.map((e) => (
+            <Paper
+              key={e.id}
+              style={{
+                backgroundColor: AccentColor.blue,
+                border: `2px solid ${AccentColor.darkblue}`,
+                padding: "15px",
+                cursor: "pointer",
+                borderRadius: "10px",
+                color: "white",
+                marginBottom: "15px",
+              }}
+            >
+              <Group position="apart">
+                <Group>
+                  {e.icon}
+                  <Title order={4}>
+                    Rp.{e.jumlah}
+                  </Title>
+                </Group>
+                <IconChevronRight />
+              </Group>
+            </Paper>
+          ))}
+        </Box>
+        <Paper
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+          }}
+        >
+          <Stack>
+            <Text>Nominal Lainnya</Text>
+            <TextInput
+              icon={<Text fw={"bold"}>Rp.</Text>}
+              placeholder="0"
+              min={0}
+            />
+            <Text c={"gray"} fz={"xs"}>
+              Minimal Donasi Rp. 10.000
+            </Text>
+          </Stack>
+        </Paper >
+        <Button
+          style={{ transition: "0.5s" }}
+          radius={"xl"}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
+          onClick={() => router.push("/dev/event/detail/sponsor/metode_pembayaran")}
+
+        >
+          Lanjutan Pembayaran
+        </Button>
+      </Stack>
+    </>
+  );
+}
+
+export default Event_PilihNominalSponsor;

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

@@ -0,0 +1,17 @@
+import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from '@/app_modules/_global/ui';
+import { ActionIcon } from '@mantine/core';
+import React from 'react';
+
+function Event_LayoutNominalSponsor({ children }: { children: React.ReactNode }) {
+    return (
+        <>
+            <UIGlobal_LayoutTamplate
+                header={<UIGlobal_LayoutHeaderTamplate title="Masukkan Nominal Sponsor"
+                />}>
+                {children}
+            </UIGlobal_LayoutTamplate>
+        </>
+    );
+}
+
+export default Event_LayoutNominalSponsor;

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

@@ -1,10 +1,11 @@
+import Event_CreateSponsor from '@/app_modules/event/component/detail/create_sponsor';
 import React from 'react';
-import CreateSponsor from '../../component/detail/create_sponsor';
+
 
 function Event_TambahSponsor() {
   return (
     <>
-      <CreateSponsor/>
+      <Event_CreateSponsor/>
     </>
   );
 }