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

Alur pembayaran donasi

Browse Source 
# feat
- Tampilan invoce
- Proses acc admin
- Transaksi berhasil
# Issue: Hitungan progres masih salah
This commit is contained in:
Bagasbanuna02
2024-01-08 13:56:14 +08:00
parent 4fc158bdc5
commit b4fe35e7d8
113 changed files with 2840 additions and 1274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app_modules/donasi/detail/detail_main/cerita_penggalang/layout.tsx
View File

@@ -9,9 +9,11 @@ import React from "react";
export default function LayoutCeritaPenggalangDonasi({
children,
statusDonasiId,
donasiId
}: {
children: React.ReactNode;
statusDonasiId: string;
donasiId: string
}) {
if (statusDonasiId !== "1") {
return (
@@ -27,7 +29,7 @@ export default function LayoutCeritaPenggalangDonasi({
return (
<AppShell
header={<HeaderTamplateDonasi title="Cerita Penggalang Dana" />}
footer={<ButtonDonasi />}
footer={<ButtonDonasi donasiId={donasiId}/>}
>
{children}
</AppShell>

149
src/app_modules/donasi/detail/detail_main/index.tsx
View File

@@ -27,144 +27,25 @@ import {
IconMoneybag,
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import BoxInformasiDonasi from "../../component/box_informasi";
import ComponentDonasi_NotedBox from "../../component/noted_box";
import { ComponentDonasi_DetailDataMain } from "../../component/detail_main/detail_data_donasi";
import { MODEL_DONASI } from "../../model/interface";
import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
import ComponentDonasi_InformasiPenggalangMain from "../../component/detail_main/informasi_penggalang";
export default function DetailMainDonasi() {
export default function DetailMainDonasi({
dataDonasi,
countDonatur
}: {
dataDonasi: MODEL_DONASI;
countDonatur: number
}) {
return (
<>
<Stack spacing={40}>
<DetailDonasi />
<InformasiPenggalangDana />
<CeritaPenggalangDana />
</Stack>
</>
);
}
function DetailDonasi() {
const router = useRouter();
return (
<>
<Stack>
<Stack>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image alt="Foto" src={"/aset/no-img.png"} />
</Paper>
</AspectRatio>
<Title order={4}>Judul Donasi</Title>
<Stack spacing={0}>
<Group position="apart">
<Stack spacing={0}>
<Text fz={12}>Dana dibutuhkan</Text>
<Title order={4} c="blue">
Rp. 50.000.000
</Title>
</Stack>
<Text fz={"xs"}>Sisa hari <Text span inherit fw={"bold"}>100</Text> </Text>
</Group>
</Stack>
<Progress value={50} />
<Grid>
<Grid.Col
span={"auto"}
onClick={() => router.push(RouterDonasi.donatur)}
>
<Stack align="center" spacing={"xs"}>
<Group>
<IconClover color="skyblue" />
<Text>50</Text>
</Group>
<Text>Donatur</Text>
</Stack>
</Grid.Col>
<Divider orientation="vertical" />
<Grid.Col
span={"auto"}
onClick={() => router.push(RouterDonasi.kabar)}
>
<Stack spacing={"sm"} align="center">
<IconMessageChatbot color="skyblue" />
<Text>Kabar Terbaru</Text>
</Stack>
</Grid.Col>
<Divider orientation="vertical" />
<Grid.Col
span={"auto"}
onClick={() => router.push(RouterDonasi.pencairan_dana)}
>
<Stack spacing={"sm"} align="center">
<IconMoneybag color="skyblue" />
<Text>Pencairan Dana</Text>
</Stack>
</Grid.Col>
</Grid>
</Stack>
</Stack>
</>
);
}
function InformasiPenggalangDana() {
const router = useRouter();
return (
<>
<Stack spacing={"xs"}>
<Title order={4}>Informasi Penggalang Dana</Title>
<Paper p={"sm"} withBorder>
<Stack>
<Group position="apart">
<Title order={5}>Penggalang Dana</Title>
<ActionIcon
variant="transparent"
onClick={() => router.push(RouterDonasi.penggalang_dana)}
>
<IconCircleChevronRight />
</ActionIcon>
</Group>
<Group>
<Avatar radius={"xl"} variant="filled" bg={"blue"}>
U
</Avatar>
<Text>Username</Text>
</Group>
<BoxInformasiDonasi
informasi="Semua dana yang terkumpul akan disalurkan ke penggalang dana,
kabar penyaluran dapat dilihat di halaman kabar terbaru."
/>
</Stack>
</Paper>
</Stack>
</>
);
}
function CeritaPenggalangDana() {
const router = useRouter();
return (
<>
<Stack spacing={"xs"}>
<Title order={4}>Cerita Penggalang Dana</Title>
<Paper p={"sm"} withBorder>
<Stack>
<Group position="apart">
<Text>1 Des 2023</Text>
<ActionIcon
variant="transparent"
onClick={() => router.push(RouterDonasi.cerita_penggalang)}
>
<IconCircleChevronRight />
</ActionIcon>
</Group>
<Text lineClamp={4}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat
doloremque perferendis laborum? Cupiditate sed consequatur quasi
doloremque, consequuntur libero? Vel nam esse fuga, sed et
repellat commodi nemo quia dignissimos?
</Text>
{/* <Text c={"blue"}>Baca selengkapnya</Text> */}
</Stack>
</Paper>
<ComponentDonasi_DetailDataMain donasi={dataDonasi} countDonatur={countDonatur} />
<ComponentDonasi_InformasiPenggalangMain author={dataDonasi.Author} />
<ComponentDonasi_CeritaPenggalangMain donasi={dataDonasi} />
</Stack>
</>
);

4
src/app_modules/donasi/detail/detail_main/layout.tsx
View File

@@ -7,14 +7,16 @@ import ButtonDonasi from "../../component/footer_button_donasi";
export default function LayoutDetailMainDonasi({
children,
donasiId
}: {
children: React.ReactNode;
donasiId: string
}) {
return (
<>
<AppShell
header={<HeaderTamplateDonasi title="Detail Donasi" />}
footer={<ButtonDonasi />}
footer={<ButtonDonasi donasiId={donasiId}/>}
>
{children}
</AppShell>

93
src/app_modules/donasi/detail/detail_main/masukan_donasi/index.tsx
View File

@@ -1,93 +0,0 @@
"use client";
import {
Box,
Button,
Grid,
Group,
Paper,
Stack,
Text,
TextInput,
Title,
} from "@mantine/core";
import {
IconChevronRight,
IconMoodSmile,
IconMoodSmileBeam,
IconMoodSmileDizzy,
IconMoodXd,
} from "@tabler/icons-react";
export default function MasukanDonasi() {
const listNominal = [
{
id: 1,
nominal: 25000,
icon: <IconMoodSmile />,
},
{
id: 2,
nominal: 50000,
icon: <IconMoodSmileBeam />,
},
{
id: 3,
nominal: 75000,
icon: <IconMoodSmileDizzy />,
},
{
id: 4,
nominal: 10000,
icon: <IconMoodXd />,
},
];
return (
<>
<Stack>
<Box>
{listNominal.map((e) => (
<Paper
key={e.id}
withBorder
radius={"md"}
p={"sm"}
shadow="lg"
mb={"md"}
>
<Group position="apart">
<Group>
{e.icon}
<Title order={4}>
Rp.{" "}
{new Intl.NumberFormat("id-ID", {
maximumFractionDigits: 10,
}).format(e.nominal)}
</Title>
</Group>
<IconChevronRight />
</Group>
</Paper>
))}
</Box>
<Paper p={"sm"} withBorder shadow="lg">
<Stack>
<Text>Nominal Lainnya</Text>
<Grid>
<Grid.Col span={1}>
<Title order={4}>Rp.</Title>
</Grid.Col>
<Grid.Col span={11}>
<TextInput type="number" />
</Grid.Col>
</Grid>
<Text c={"gray"} fz={"xs"}>
Minimal Donasi Rp. 10.000
</Text>
</Stack>
</Paper>
<Button radius={"xl"}>Lanjutan Pembayaran</Button>
</Stack>
</>
);
}

21
src/app_modules/donasi/detail/detail_main/masukan_donasi/layout.tsx
View File

@@ -1,21 +0,0 @@
"use client";
import { AppShell } from "@mantine/core";
import React from "react";
import HeaderTamplateDonasi from "../../../component/header_tamplate";
export default function LayoutMasukanDonasi({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<AppShell
header={<HeaderTamplateDonasi title="Masukan Nominal Donasi" />}
>
{children}
</AppShell>
</>
);
}

4
src/app_modules/donasi/detail/detail_main/pencairan_dana/index.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import BoxInformasiDonasi from "@/app_modules/donasi/component/box_informasi";
import ComponentDonasi_NotedBox from "@/app_modules/donasi/component/noted_box";
import {
Avatar,
Button,
@@ -45,7 +45,7 @@ function BoxDanaDicarikan() {
<Text fz={"xs"}>Pencairan dana</Text>
</Grid.Col>
</Grid>
<BoxInformasiDonasi informasi=" Pencairan dana akan dilakukan oleh Admin HIPMI tanpa campur tangan
<ComponentDonasi_NotedBox informasi=" Pencairan dana akan dilakukan oleh Admin HIPMI tanpa campur tangan
pihak manapun, jika berita pencairan dana dibawah tidak sesuai
dengan kabar yang diberikan oleh PENGGALANG DANA. Maka pegguna lain
dapat melaporkannya pada Admin HIPMI !"/>

108
src/app_modules/donasi/detail/detail_main/penggalang_dana/index.tsx
View File

@@ -1,6 +1,13 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import ComponentDonasi_BoxPublish from "@/app_modules/donasi/component/box_publish";
import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
import {
MODEL_DONASI,
MODEL_DONASI_INFO_PENGGALANG,
} from "@/app_modules/donasi/model/interface";
import { MODEL_AUTHOR } from "@/app_modules/home/models/interface";
import {
AspectRatio,
Avatar,
@@ -27,23 +34,38 @@ import {
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import router from "next/router";
import { useState } from "react";
export default function PenggalangDanaDonasi({
dataPenggalang,
}: {
dataPenggalang: MODEL_DONASI_INFO_PENGGALANG;
}) {
const [value, setValue] = useState(dataPenggalang);
export default function PenggalangDanaDonasi() {
return (
<>
<Stack>
<InformasiPenggalang />
<DataPengganganDana />
<InformasiPenggalang value={value as any} />
<ComponentDonasi_BoxPublish
dataDonasi={value.Donasi}
path={RouterDonasi.detail_publish}
/>
</Stack>
</>
);
}
function InformasiPenggalang() {
function InformasiPenggalang({ value }: { value: MODEL_AUTHOR }) {
return (
<>
<Paper radius={"md"}>
<Stack bg={"gray.1"} p={"md"} spacing={"xl"} sx={{borderRadius: "10px"}}>
<Stack
bg={"gray.1"}
p={"md"}
spacing={"xl"}
sx={{ borderRadius: "10px" }}
>
<Stack align="center" spacing={0}>
<Paper
radius={"100%"}
@@ -60,7 +82,7 @@ function InformasiPenggalang() {
/>
</Center>
</Paper>
<Title order={3}>@Username</Title>
<Title order={3}>@{value.username}</Title>
</Stack>
<Stack>
<Group>
@@ -69,7 +91,7 @@ function InformasiPenggalang() {
</Group>
<Group>
<IconPhone />
<Text>+62 81x xxx xxx</Text>
<Text>+{value.nomor}</Text>
</Group>
<Group>
<IconBrandGmail />
@@ -82,13 +104,12 @@ function InformasiPenggalang() {
);
}
function DataPengganganDana() {
function DataPengganganDana({ donasi }: { donasi: MODEL_DONASI[] }) {
const router = useRouter();
const { height, width } = useViewportSize();
return (
<>
<Title order={5}>Peggalangan Dana Yang Dilakukan</Title>
<SimpleGrid
cols={4}
spacing="lg"
@@ -98,42 +119,43 @@ function DataPengganganDana() {
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
{Array(5)
.fill(0)
.map((e, i) => (
<Box key={i} onClick={() => router.push(RouterDonasi.detail_main)}>
<Stack>
<Grid>
<Grid.Col span={7}>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image
alt="Foto"
src={"/aset/no-img.png"}
radius={"md"}
/>
</Paper>
</AspectRatio>
</Grid.Col>
<Grid.Col span={5}>
<Stack spacing={"xs"}>
<Text fz={"sm"} fw={"bold"} lineClamp={2}>
Judul Donasi Bisa Dilihat Disini Untuk Contoh
{donasi.map((e, i) => (
<Box
key={i}
onClick={() => router.push(RouterDonasi.detail_main + `${e.id}`)}
>
<Stack>
<Grid>
<Grid.Col span={7}>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image
alt="Foto"
src={RouterDonasi.api_gambar + `${e.imagesId}`}
radius={"md"}
/>
</Paper>
</AspectRatio>
</Grid.Col>
<Grid.Col span={5}>
<Stack spacing={"xs"}>
<Text fz={"sm"} fw={"bold"} lineClamp={2}>
{e.title}
</Text>
<Progress value={50} color="orange" />
<Stack spacing={0}>
<Text fz={"sm"}>Terkumpul</Text>
<Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
<TampilanRupiahDonasi nominal={+e.target} />
</Text>
<Progress value={50} color="orange" />
<Stack spacing={0}>
<Text fz={"sm"}>Terkumpul</Text>
<Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
Rp. 100.000.000
</Text>
</Stack>
</Stack>
</Grid.Col>
</Grid>
{width > 575 ? "" : <Divider />}
</Stack>
</Box>
))}
</Stack>
</Grid.Col>
</Grid>
{width > 575 ? "" : <Divider />}
</Stack>
</Box>
))}
</SimpleGrid>
</>
);

2
src/app_modules/donasi/detail/detail_main/penggalang_dana/layout.tsx
View File

@@ -12,7 +12,7 @@ export default function LayoutPenggalangDanaDonasi({
return (
<>
<AppShell
header={<HeaderTamplateDonasi title="Informasu Penggalangan Dana" />}
header={<HeaderTamplateDonasi title="Informasi Penggalangan Dana" />}
// footer={<FooterDonasi />}
>
{children}