# feat :

## Deskripsi :
- Notifikasi investasi
## Issue : Gerbang pembayaran

src/app_modules/donasi/main/donasi_saya.tsx

@@ -7,6 +7,7 @@ import {
   AspectRatio,
   Badge,
   Box,
+  Center,
   Grid,
   Group,
   Image,
@@ -25,105 +26,56 @@ import toast from "react-simple-toasts";
 import ComponentDonasi_TampilanHitungMundur from "../component/tampilan_hitung_mundur";
 import TampilanRupiahDonasi from "../component/tampilan_rupiah";
 import { MODEL_DONASI_INVOICE } from "../model/interface";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { ScrollOnly } from "next-scroll-loader";
+import ComponentDonasi_CardPublish from "../component/card_view/card_publish";
+import { donasi_funGetAllPublish } from "../fun/get/get_list_beranda";
+import { donasi_funGetAllInvoiceByAuthorId } from "../fun/get/get_all_invoice_by_author_id";
+import { ComponentDonasi_CardInvoice } from "../component/card_view/card_invoice";
 
 export default function DonasiSayaDonasi({
   listInvoice,
 }: {
   listInvoice: MODEL_DONASI_INVOICE[];
 }) {
-  const [invoice, setInvoice] = useState(listInvoice);
   const router = useRouter();
-  const { height, width } = useViewportSize();
-
-  if (_.isEmpty(listInvoice))
-    return <ComponentGlobal_IsEmptyData />;
+  const [data, setData] = useState(listInvoice);
+  const [activePage, setActivePage] = useState(1);
 
   return (
     <>
-      {invoice.map((e, i) => (
-        <Box
-          style={{
-            backgroundColor: AccentColor.blue,
-            border: `2px solid ${AccentColor.darkblue}`,
-            padding: "15px",
-            cursor: "pointer",
-            borderRadius: "10px",
-            color: "white",
-            marginBottom: "15px",
-          }}
-          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>
-                    <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={10}>Donasi Saya</Text>
-                      <Text fz={10} fw={"bold"} c={"orange"} truncate>
-                        <TampilanRupiahDonasi nominal={+e.nominal} />
-                      </Text>
-                    </Stack>
-                  </Group>
-                  <Badge size="xs" variant="filled" color="yellow">
-                    <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>
-      ))}
-    </>
-  );
-}
+      <Box>
+        {_.isEmpty(data) ? (
+          <ComponentGlobal_IsEmptyData />
+        ) : (
+          <ScrollOnly
+            height="82vh"
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader size={25} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await donasi_funGetAllInvoiceByAuthorId({
+                page: activePage + 1,
+              });
 
-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>
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentDonasi_CardInvoice
+                data={item as any}
+              />
+            )}
+          </ScrollOnly>
+        )}
+      </Box>
     </>
   );
 }
@@ -143,7 +95,7 @@ async function onClick(
       if (status === "3") {
         return router.push(RouterDonasi.invoice + `${invoiceId}`);
       } else {
-        toast("gagal");
+        ComponentGlobal_NotifikasiGagal("Gagal Melihat Invoice");
       }
     }
   }