# feat :

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

src/app_modules/donasi/detail/detail_draft/index.tsx

@@ -15,6 +15,7 @@ import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import mqtt_client from "@/util/mqtt_client";
 import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import { useState } from "react";
 
 export default function DetailDraftDonasi({
   dataDonasi,
@@ -52,6 +53,8 @@ function ButtonAjukanPenggalangan({
   const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
     gs_donasi_tabs_posting
   );
+  const [isLoading, setLoading] = useState(false);
+
   async function onCLick() {
     const res = await Donasi_funGantiStatus(dataDonasi.id, "2");
     if (res.status === 200) {
@@ -71,6 +74,7 @@ function ButtonAjukanPenggalangan({
       if (notif.status === 201) {
         mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
 
+        setLoading(true);
         setTabsPostingDonasi("Review");
         ComponentGlobal_NotifikasiBerhasil("Berhasil Diajukan");
         router.push(RouterDonasi.main_galang_dana);
@@ -82,6 +86,8 @@ function ButtonAjukanPenggalangan({
   return (
     <>
       <Button
+        loaderPosition="center"
+        loading={isLoading ? true : false}
         radius={"xl"}
         bg={"orange"}
         color="orange"

src/app_modules/donasi/detail/detail_main/donatur/index.tsx

@@ -1,64 +1,55 @@
 "use client";
-"use dev";
 
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-import ComponentDonasi_IsEmptyData from "@/app_modules/donasi/component/is_empty_data";
-import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { ComponentDonasi_CardDonatur } from "@/app_modules/donasi/component/card_view/ui_card_donatur";
+import { donasi_funGetListDonaturById } from "@/app_modules/donasi/fun/get/get_list_donatur";
 import { MODEL_DONASI_INVOICE } from "@/app_modules/donasi/model/interface";
-import { Center, Grid, Group, Paper, Stack, Text, Title } from "@mantine/core";
-import { IconMoodSmileBeam } from "@tabler/icons-react";
+import { Box, Center } from "@mantine/core";
 import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
 
 export default function DonaturDonasi({
   listDonatur,
+  donasiId,
 }: {
   listDonatur: MODEL_DONASI_INVOICE[];
+  donasiId: string;
 }) {
-  const [donatur, setDonatur] = useState(listDonatur);
-  if (_.isEmpty(donatur)) return <ComponentDonasi_IsEmptyData />;
+  const [data, setData] = useState(listDonatur);
+  const [activePage, setActivePage] = useState(1);
 
   return (
     <>
-      {donatur.map((e, i) => (
-        <Paper
-          key={i}
-          style={{
-            backgroundColor: AccentColor.blue,
-            border: `2px solid ${AccentColor.darkblue}`,
-            padding: "15px",
-            cursor: "pointer",
-            borderRadius: "10px",
-            color: "white",
-            marginBottom: "10px",
-          }}
-        >
-          <Grid>
-            <Grid.Col span={3}>
-              <Center h={"100%"}>
-                {/* <Avatar variant="filled" radius={"xl"} size={"md"} /> */}
-                <IconMoodSmileBeam size={50} />
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        <Box>
+          <ScrollOnly
+            height="92vh"
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader size={25} />
               </Center>
-            </Grid.Col>
-            <Grid.Col span={9}>
-              <Stack spacing={0}>
-                <Title order={5}>{e.Author.username}</Title>
-                <Group spacing={"xs"}>
-                  <Text fz={"xs"}>Berdonasi sebesar</Text>
-                  <Text truncate fw={"bold"}>
-                    <TampilanRupiahDonasi nominal={+e.nominal} />
-                  </Text>
-                </Group>
-                <Text fz={"xs"}>
-                  {new Intl.DateTimeFormat("id-ID", {
-                    dateStyle: "full",
-                  }).format(e?.createdAt)}
-                </Text>
-              </Stack>
-            </Grid.Col>
-          </Grid>
-        </Paper>
-      ))}
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await donasi_funGetListDonaturById({
+                page: activePage + 1,
+                donasiId: donasiId,
+              });
+
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => <ComponentDonasi_CardDonatur data={item} />}
+          </ScrollOnly>
+        </Box>
+      )}
     </>
   );
 }

src/app_modules/donasi/detail/detail_main/kabar/index.tsx

@@ -2,32 +2,62 @@
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import ComponentDonasi_ListKabar from "@/app_modules/donasi/component/detail_main/list_kabar";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { ComponentDonasi_CardDonatur } from "@/app_modules/donasi/component/card_view/ui_card_donatur";
+import ComponentDonasi_ListKabar from "@/app_modules/donasi/component/card_view/ui_card_kabar";
+import { donasi_funGetListDonaturById } from "@/app_modules/donasi/fun/get/get_list_donatur";
+import { donasi_funGetListKabarById } from "@/app_modules/donasi/fun/get/get_list_kabar";
 import { MODEL_DONASI_KABAR } from "@/app_modules/donasi/model/interface";
-import { Box } from "@mantine/core";
+import { Box, Center } from "@mantine/core";
 import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
 
 export default function KabarDonasi({
   listKabar,
+  donasiId,
 }: {
   listKabar: MODEL_DONASI_KABAR[];
+  donasiId: string;
 }) {
-
-  const [kabar, setKabar] = useState(listKabar);
-
-  if (_.isEmpty(kabar)) return <ComponentGlobal_IsEmptyData />;
+  const [data, setData] = useState(listKabar);
+  const [activePage, setActivePage] = useState(1);
 
   return (
     <>
-      {kabar.map((e, i) => (
-        <Box key={i}>
-          <ComponentDonasi_ListKabar
-            kabar={e}
-            route={RouterDonasi.detail_kabar}
-          />
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        <Box>
+          <ScrollOnly
+            height="92vh"
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader size={25} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await donasi_funGetListKabarById({
+                page: activePage + 1,
+                donasiId: donasiId,
+              });
+
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentDonasi_ListKabar
+                kabar={item}
+                route={RouterDonasi.detail_kabar}
+              />
+            )}
+          </ScrollOnly>
         </Box>
-      ))}
+      )}
     </>
   );
 }

src/app_modules/donasi/detail/detail_main/pencairan_dana/index.tsx

@@ -7,7 +7,8 @@ import {
 } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import ComponentDonasi_NotedBox from "@/app_modules/donasi/component/noted_box";
+import { ComponentDonasi_InformasiPencairanDana } from "@/app_modules/donasi/component/card_view/box_informasi_pencarian_dana";
+import { ComponentDonasi_BoxPencariranDana } from "@/app_modules/donasi/component/card_view/box_pencairan_dana";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import {
   MODEL_DONASI,
@@ -15,11 +16,9 @@ import {
 } from "@/app_modules/donasi/model/interface";
 import {
   AspectRatio,
-  Avatar,
   Button,
   Center,
   Grid,
-  Group,
   Image,
   Modal,
   Paper,
@@ -29,16 +28,18 @@ import {
   Title,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { IconImageInPicture, IconTransferIn } from "@tabler/icons-react";
+import { IconImageInPicture } from "@tabler/icons-react";
 import _ from "lodash";
 import moment from "moment";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 export default function PencairanDanaDonasi({
+  donasiId,
   totalAkumulasi,
   listPencairan,
 }: {
+  donasiId: string;
   totalAkumulasi: MODEL_DONASI;
   listPencairan: MODEL_DONASI_PENCAIRAN_DANA[];
 }) {
@@ -47,119 +48,9 @@ export default function PencairanDanaDonasi({
   return (
     <>
       <Stack>
-        <BoxDanaDicarikan akumulasi={akumulasi} />
-        <InformasiPencairanDana listPD={listPD} />
+        <ComponentDonasi_BoxPencariranDana akumulasi={akumulasi} />
+        <ComponentDonasi_InformasiPencairanDana donasiId={donasiId} listPD={listPD} />
       </Stack>
     </>
   );
 }
-
-function BoxDanaDicarikan({ akumulasi }: { akumulasi: MODEL_DONASI }) {
-  return (
-    <>
-      <Paper
-        style={{
-          backgroundColor: MainColor.darkblue,
-          border: `2px solid ${AccentColor.blue}`,
-          padding: "15px",
-          cursor: "pointer",
-          borderRadius: "10px",
-          color: "white",
-          marginBottom: "10px",
-        }}
-      >
-        <Stack>
-          <Grid>
-            <Grid.Col span={6}>
-              <Title order={5}>
-                <TampilanRupiahDonasi nominal={akumulasi.totalPencairan} />
-              </Title>
-              <Text fz={"xs"}>Dana sudah dicairkan</Text>
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <Title order={5}>{akumulasi.akumulasiPencairan} kali</Title>
-              <Text fz={"xs"}>Pencairan dana</Text>
-            </Grid.Col>
-          </Grid>
-          <ComponentGlobal_BoxInformation
-            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 !"
-          />
-        </Stack>
-      </Paper>
-    </>
-  );
-}
-
-function InformasiPencairanDana({
-  listPD,
-}: {
-  listPD: MODEL_DONASI_PENCAIRAN_DANA[];
-}) {
-  const router = useRouter();
-  const [opened, { open, close }] = useDisclosure(false);
-  const [idGambar, setIdGambar] = useState("");
-  return (
-    <>
-      <Modal opened={opened} onClose={close} size={"xl"}>
-        <AspectRatio ratio={9 / 16}>
-          <Paper>
-            <Image
-              alt="Foto"
-              src={RouterDonasi.api_gambar_pencairan + `${idGambar}`}
-            />
-          </Paper>
-        </AspectRatio>
-      </Modal>
-
-      {_.isEmpty(listPD) ? (
-        <ComponentGlobal_IsEmptyData height={20} />
-      ) : (
-        listPD.map((e, i) => (
-          <Paper
-            key={i}
-            style={{
-              padding: "15px",
-              border: `2px solid ${AccentColor.blue}`,
-              backgroundColor: AccentColor.darkblue,
-              borderRadius: "10px",
-              color: "white",
-            }}
-          >
-            <Text fz={"xs"}>{moment(e.createdAt).format("ll")}</Text>
-            <Stack spacing={"lg"}>
-              <Title order={5}>{e.title}</Title>
-              <Spoiler
-                maxHeight={50}
-                hideLabel="Sembunyikan"
-                showLabel="Baca Selengkapnya"
-              >
-                {e.deskripsi}
-              </Spoiler>
-              <Center>
-                <Button
-                  radius={"xl"}
-                  leftIcon={<IconImageInPicture />}
-                  onClick={() => {
-                    // open();
-                    // setIdGambar(e.imagesId);
-                    router.push(`/dev/donasi/bukti-transfer/${e.imagesId}`, {
-                      scroll: false,
-                    });
-                  }}
-                  bg={MainColor.yellow}
-                  color="yellow"
-                  c={"black"}
-                >
-                  Bukti Transfer
-                </Button>
-              </Center>
-            </Stack>
-          </Paper>
-        ))
-      )}
-    </>
-  );
-}

src/app_modules/donasi/detail/detail_main/penggalang_dana/index.tsx

@@ -3,7 +3,7 @@
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
-import ComponentDonasi_CardPublish from "@/app_modules/donasi/component/card_view/box_publish";
+import ComponentDonasi_CardPublish from "@/app_modules/donasi/component/card_view/card_publish";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import {
   MODEL_DONASI,