Alur pembayaran donasi

# feat
- Tampilan invoce
- Proses acc admin
- Transaksi berhasil
# Issue: Hitungan progres masih salah

src/app_modules/donasi/main/donasi_saya.tsx

@@ -22,12 +22,29 @@ import {
 } from "@mantine/core";
 import { useViewportSize } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
-
+import { MODEL_DONASI_INVOICE } from "../model/interface";
+import { useState } from "react";
+import TampilanRupiahDonasi from "../component/tampilan_rupiah";
+import ComponentDonasi_TampilanHitungMundur from "../component/tampilan_hitung_mundur";
+import moment from "moment";
 import toast from "react-simple-toasts";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import _ from "lodash";
 
-export default function DonasiSayaDonasi() {
+export default function DonasiSayaDonasi({
+  listInvoice,
+}: {
+  listInvoice: MODEL_DONASI_INVOICE[];
+}) {
+  const [invoice, setInvoice] = useState(listInvoice);
   const router = useRouter();
   const { height, width } = useViewportSize();
+  if (_.isEmpty(invoice))
+    return (
+      <>
+        <Center h={"80vh"}>Belum Ada Donasi</Center>
+      </>
+    );
   return (
     <>
       <SimpleGrid
@@ -39,49 +56,103 @@ export default function DonasiSayaDonasi() {
           { maxWidth: "36rem", cols: 1, spacing: "sm" },
         ]}
       >
-        {Array(5)
-          .fill(0)
-          .map((e, i) => (
-            <Box
-              key={i}
-              onClick={() =>
-                router.push(RouterDonasi.detail_donasi_saya)
-              
-              }
-            >
-              <Stack>
-                <Grid>
-                  <Grid.Col span={5}>
-                    <Stack spacing={"xs"}>
-                      <Text fz={"sm"} fw={"bold"} lineClamp={2}>
-                        Judul Donasi Bisa Dilihat Disini Untuk Contoh
+        {invoice.map((e, i) => (
+          <Box
+            key={i}
+            onClick={() =>
+              onClick(router, e.donasiMaster_StatusInvoiceId, e.id, e.Donasi.id)
+            }
+          >
+            <Stack>
+              <Grid>
+                <Grid.Col span={5}>
+                  <Stack spacing={5}>
+                    <Stack spacing={0}>
+                      <Text fz={"xs"} fw={"bold"} truncate>
+                        {e.Donasi.title}
                       </Text>
-                      <Progress value={50} color="orange" />
+                      <ComponentDonasi_TampilanHitungMundur
+                        durasi={e.Donasi.DonasiMaster_Durasi.name}
+                        publishTime={e.Donasi.publishTime}
+                        textSize={10}
+                      />
+                    </Stack>
+                    <Progress value={+e.Donasi.progres} color="orange" />
+                    <Group position="apart">
                       <Stack spacing={0}>
-                        <Text fz={"sm"}>Donasi Saya</Text>
-                        <Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
-                          Rp. 25.000.000
+                        <Text fz={10}>Donasi Saya</Text>
+                        <Text fz={10} fw={"bold"} c={"orange"} truncate>
+                          <TampilanRupiahDonasi nominal={+e.nominal} />
                         </Text>
                       </Stack>
-                    </Stack>
-                  </Grid.Col>
-                  <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>
-                {width > 575 ? "" : <Divider />}
-              </Stack>
-            </Box>
-          ))}
+                    </Group>
+                    <Badge size="xs" variant="dot">
+                      <Text>{e.DonasiMaster_StatusInvoice.name}</Text>
+                    </Badge>
+                  </Stack>
+                </Grid.Col>
+                <Grid.Col span={7}>
+                  <AspectRatio ratio={16 / 9}>
+                    <Paper radius={"md"}>
+                      <Image
+                        alt="Foto"
+                        src={RouterDonasi.api_gambar + `${e.Donasi.imagesId}`}
+                        radius={"md"}
+                      />
+                    </Paper>
+                  </AspectRatio>
+                </Grid.Col>
+              </Grid>
+              {width > 575 ? "" : <Divider />}
+            </Stack>
+          </Box>
+        ))}
       </SimpleGrid>
     </>
   );
 }
+
+function HitungMundur({
+  durasi,
+  publishTime,
+}: {
+  durasi: string;
+  publishTime: Date;
+}) {
+  return (
+    <>
+      <Stack spacing={0} align="center">
+        <Text fz={"xs"}>Sisa hari </Text>
+        <Text span inherit fw={"bold"} fz={"xs"}>
+          {Number(durasi) -
+            moment(new Date()).diff(new Date(publishTime), "days") <=
+          0
+            ? 0
+            : Number(durasi) -
+              moment(new Date()).diff(new Date(publishTime), "days")}
+        </Text>
+      </Stack>
+    </>
+  );
+}
+
+async function onClick(
+  router: AppRouterInstance,
+  status: string,
+  invoiceId: string,
+  donasiId: string
+) {
+  if (status === "1") {
+    return router.push(RouterDonasi.detail_donasi_saya + `${invoiceId}`);
+  } else {
+    if (status === "2") {
+      return router.push(RouterDonasi.proses_transaksi + `${invoiceId}`);
+    } else {
+      if (status === "3") {
+        return router.push(RouterDonasi.invoice + `${invoiceId}`);
+      } else {
+        toast("gagal");
+      }
+    }
+  }
+}