Add Proses Transaksi, Metode Pembayaran, Invoice

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/detail/sponsor/tambah_sponsor/page.tsx

@@ -1,4 +1,5 @@
-import Event_TambahSponsor from '@/app_modules/event/detail/tambah_sponsor';
+
+import Event_TambahSponsor from '@/app_modules/event/detail/sponsor/tambah_sponsor';
 import React from 'react';
 
 function 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_hipmi/router_event.ts

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

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,4 +1,5 @@
 '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, IconEdit, IconTrash } from '@tabler/icons-react';
@@ -23,15 +24,17 @@ function LayoutEvent_DetailSponsor({ children }: { children: React.ReactNode })
             id: 1,
             name: 'Edit Sponsor',
             icon: <IconEdit />,
-            // path: RouterEvent.tambah_sponsor,
+            path: RouterEvent.tambah_sponsor,
           },
           {
             id: 2,
             name: 'Hapus Sponsor',
-            icon: <IconTrash/>
+            icon: <IconTrash />,
+            
           }
         ]}
       />
+      
     </>
   );
 }

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/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/sponsor/tambah_sponsor/index.tsx

@@ -0,0 +1,14 @@
+
+import Event_CreateSponsor from '@/app_modules/event/component/detail/create_sponsor';
+import React from 'react';
+
+
+function Event_TambahSponsor() {
+  return (
+    <>
+      <Event_CreateSponsor/>
+    </>
+  );
+}
+
+export default Event_TambahSponsor;

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/>
     </>
   );
 }