wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Proses Transaksi, Metode Pembayaran, Invoice

Browse Source
This commit is contained in:
nico
2025-01-16 14:35:00 +08:00
parent a649fad7cb
commit 4374def1e9
20 changed files with 495 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/dev/event/detail/sponsor/metode_pembayaran/layout.tsx Normal file
View File

@@ -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;

14
src/app/dev/event/detail/sponsor/metode_pembayaran/page.tsx Normal file
View File

@@ -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;

12
src/app/dev/event/detail/sponsor/nominal_sponsor/layout.tsx Normal file
View File

@@ -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;

12
src/app/dev/event/detail/sponsor/nominal_sponsor/page.tsx Normal file
View File

@@ -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;

0
src/app/dev/event/detail/tambah_sponsor/layout.tsx → src/app/dev/event/detail/sponsor/tambah_sponsor/layout.tsx
View File

3
src/app/dev/event/detail/tambah_sponsor/page.tsx → src/app/dev/event/detail/sponsor/tambah_sponsor/page.tsx
View File

@@ -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() {

14
src/app/dev/event/invoice/layout.tsx Normal file
View File

@@ -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;

12
src/app/dev/event/invoice/page.tsx Normal file
View File

@@ -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;

2
src/app/lib/router_hipmi/router_event.ts
View File

@@ -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}`,

4
src/app_modules/donasi/component/button/comp_button_delete_donasi_by_id.tsx
View File

@@ -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>
}

4
src/app_modules/event/component/detail/create_sponsor.tsx
View File

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

7
src/app_modules/event/detail/detail_sponsor/layout.tsx
View File

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

150
src/app_modules/event/detail/invoice/index.tsx Normal file
View File

@@ -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;

24
src/app_modules/event/detail/invoice/layout.tsx Normal file
View File

@@ -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;

83
src/app_modules/event/detail/sponsor/metode_pembayaran/index.tsx Normal file
View File

@@ -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;

14
src/app_modules/event/detail/sponsor/metode_pembayaran/layout.tsx Normal file
View File

@@ -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;

99
src/app_modules/event/detail/sponsor/nominal_sponsor/index.tsx Normal file
View File

@@ -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;

17
src/app_modules/event/detail/sponsor/nominal_sponsor/layout.tsx Normal file
View File

@@ -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;

14
src/app_modules/event/detail/sponsor/tambah_sponsor/index.tsx Normal file
View File

@@ -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;

5
src/app_modules/event/detail/tambah_sponsor/index.tsx
View File

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