Alur pembayaran donasi

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

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