From e964dca60a6cabc67487daf91dd574e691d65101 Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Fri, 28 Feb 2025 17:25:58 +0800
Subject: [PATCH] Integrasi API pencairan dana

---
 .../admin/donasi/pencairan_dana/[id]/page.tsx |  29 +-
 .../admin/_admin_global/tampilan_rupiah.tsx   |   3 +-
 .../admin/donasi/component/tombol_kembali.tsx |   4 +-
 .../detail/publish/detail_list_pencairan.tsx  |   2 +-
 .../donasi/detail/publish/detail_publish.tsx  |   3 +-
 .../detail/publish/detail_publish_backup.tsx  | 889 ------------------
 .../detail/publish/detail_publish_backup2.txt | 871 -----------------
 .../donasi/detail/publish/pencairan_dana.tsx  | 114 ++-
 .../detail/publish/pencairan_dana_backup.txt  | 387 ++++++++
 9 files changed, 494 insertions(+), 1808 deletions(-)
 delete mode 100644 src/app_modules/admin/donasi/detail/publish/detail_publish_backup.tsx
 delete mode 100644 src/app_modules/admin/donasi/detail/publish/detail_publish_backup2.txt
 create mode 100644 src/app_modules/admin/donasi/detail/publish/pencairan_dana_backup.txt

diff --git a/src/app/dev/admin/donasi/pencairan_dana/[id]/page.tsx b/src/app/dev/admin/donasi/pencairan_dana/[id]/page.tsx
index 10c8d4b7..d6229c17 100644
--- a/src/app/dev/admin/donasi/pencairan_dana/[id]/page.tsx
+++ b/src/app/dev/admin/donasi/pencairan_dana/[id]/page.tsx
@@ -1,18 +1,29 @@
 import { AdminDonasi_PencairanDana } from "@/app_modules/admin/donasi";
 import { AdminDonasi_getOneById } from "@/app_modules/admin/donasi/fun/get/get_one_by_id";
 
-export default async function Page({ params }: { params: { id: string } }) {
-  let donasiId = params.id;
-  const dataDonasi = await AdminDonasi_getOneById(donasiId);
-  const danaTerkumpul = dataDonasi?.terkumpul;
-  const totalPencairan = dataDonasi?.totalPencairan
-
+export default async function Page() {
 
   return (
     <AdminDonasi_PencairanDana
-      donasiId={donasiId}
-      danaTerkumpul={danaTerkumpul as any}
-      totalPencairan={totalPencairan as any}
     />
   );
 }
+
+// import { AdminDonasi_PencairanDana } from "@/app_modules/admin/donasi";
+// import { AdminDonasi_getOneById } from "@/app_modules/admin/donasi/fun/get/get_one_by_id";
+
+// export default async function Page({ params }: { params: { id: string } }) {
+//   let donasiId = params.id;
+//   const dataDonasi = await AdminDonasi_getOneById(donasiId);
+//   const danaTerkumpul = dataDonasi?.terkumpul;
+//   const totalPencairan = dataDonasi?.totalPencairan
+
+
+//   return (
+//     <AdminDonasi_PencairanDana
+//       donasiId={donasiId}
+//       danaTerkumpul={danaTerkumpul as any}
+//       totalPencairan={totalPencairan as any}
+//     />
+//   );
+// }
diff --git a/src/app_modules/admin/_admin_global/tampilan_rupiah.tsx b/src/app_modules/admin/_admin_global/tampilan_rupiah.tsx
index 2a9145fd..31fbd524 100644
--- a/src/app_modules/admin/_admin_global/tampilan_rupiah.tsx
+++ b/src/app_modules/admin/_admin_global/tampilan_rupiah.tsx
@@ -1,3 +1,4 @@
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { Text } from "@mantine/core";
 
 export default function ComponentAdminGlobal_TampilanRupiahDonasi({
@@ -9,7 +10,7 @@ export default function ComponentAdminGlobal_TampilanRupiahDonasi({
 }) {
   return (
     <>
-      <Text fz={fontSize ? fontSize : "md"}>
+      <Text c={AdminColor.white} fz={fontSize ? fontSize : "md"}>
         Rp.{" "}
         {new Intl.NumberFormat("id-ID", { maximumFractionDigits: 10 }).format(
           nominal
diff --git a/src/app_modules/admin/donasi/component/tombol_kembali.tsx b/src/app_modules/admin/donasi/component/tombol_kembali.tsx
index 2630f979..8d507b7e 100644
--- a/src/app_modules/admin/donasi/component/tombol_kembali.tsx
+++ b/src/app_modules/admin/donasi/component/tombol_kembali.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { Group, Button } from "@mantine/core";
 import { IconChevronLeft } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
@@ -10,7 +11,8 @@ export default function ComponentAdminDonasi_TombolKembali() {
     <>
       <Group>
         <Button
-          c={"gray"}
+          bg={AdminColor.softBlue}
+          c={AdminColor.white}
           leftIcon={<IconChevronLeft />}
           variant="white"
           onClick={() => router.back()}
diff --git a/src/app_modules/admin/donasi/detail/publish/detail_list_pencairan.tsx b/src/app_modules/admin/donasi/detail/publish/detail_list_pencairan.tsx
index 06d1f4e3..43722946 100644
--- a/src/app_modules/admin/donasi/detail/publish/detail_list_pencairan.tsx
+++ b/src/app_modules/admin/donasi/detail/publish/detail_list_pencairan.tsx
@@ -38,7 +38,7 @@ function TampilanListPencairan({
       </td>
       <td width={500}>
         <Box w={"100%"}>
-          <Spoiler hideLabel="Sembunyikan" maxHeight={70} showLabel="Lihat">
+          <Spoiler c={AdminColor.white} hideLabel="Sembunyikan" maxHeight={70} showLabel="Lihat">
             {e.deskripsi}
           </Spoiler>
         </Box>
diff --git a/src/app_modules/admin/donasi/detail/publish/detail_publish.tsx b/src/app_modules/admin/donasi/detail/publish/detail_publish.tsx
index d977cc8c..12a1e487 100644
--- a/src/app_modules/admin/donasi/detail/publish/detail_publish.tsx
+++ b/src/app_modules/admin/donasi/detail/publish/detail_publish.tsx
@@ -65,6 +65,7 @@ export default function AdminDonasi_DetailPublish({
   const [isReload, setReload] = useState(false);
   const params = useParams<{ id: string }>();
   const [data, setData] = useState<MODEL_DONASI | null>(null);
+  console.log("Ini data", data)
   // 
 
   useShallowEffect(() => {
@@ -110,7 +111,7 @@ export default function AdminDonasi_DetailPublish({
               donasi={data}
               isReload={isReload}
             />)}
-          <TampilanListPencairan pencairan={pencairan} />
+          <TampilanListPencairan  pencairan={pencairan} />
         </>
       </Stack>
     </>
diff --git a/src/app_modules/admin/donasi/detail/publish/detail_publish_backup.tsx b/src/app_modules/admin/donasi/detail/publish/detail_publish_backup.tsx
deleted file mode 100644
index 6a255814..00000000
--- a/src/app_modules/admin/donasi/detail/publish/detail_publish_backup.tsx
+++ /dev/null
@@ -1,889 +0,0 @@
-"use client";
-
-import { RouterAdminGlobal } from "@/lib";
-import { RouterAdminDonasi } from "@/lib/router_admin/router_admin_donasi";
-import { RouterAdminDonasi_OLD } from "@/lib/router_hipmi/router_admin";
-import { ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
-import { Admin_ComponentLoadImageLandscape } from "@/app_modules/admin/_admin_global";
-import { ComponentAdminGlobal_NotifikasiBerhasil } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_berhasil";
-import { ComponentAdminGlobal_NotifikasiGagal } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_gagal";
-import AdminGlobal_ComponentBackButton from "@/app_modules/admin/_admin_global/back_button";
-import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
-import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
-import {
-  MODEL_DONASI,
-  MODEL_DONASI_INVOICE,
-  MODEL_DONASI_PENCAIRAN_DANA,
-} from "@/app_modules/donasi/model/interface";
-import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
-import mqtt_client from "@/util/mqtt_client";
-import {
-  ActionIcon,
-  Badge,
-  Box,
-  Button,
-  Center,
-  Grid,
-  Group,
-  Modal,
-  Pagination,
-  Paper,
-  ScrollArea,
-  Select,
-  SimpleGrid,
-  Spoiler,
-  Stack,
-  Table,
-  Text,
-  TextInput,
-  Title,
-} from "@mantine/core";
-import { useDisclosure, useShallowEffect } from "@mantine/hooks";
-import { IconReload } from "@tabler/icons-react";
-import _, { toNumber } from "lodash";
-import moment from "moment";
-import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
-import { adminDonasi_getListDonatur } from "../../fun/get/get_list_donatur_by_id";
-import { AdminDonasi_getOneById } from "../../fun/get/get_one_by_id";
-import adminDonasi_funUpdateStatusDanTotal from "../../fun/update/fun_update_status_dan_total";
-import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
-import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
-import CustomSkeletonAdmin from "@/app_modules/admin/_admin_global/_component/skeleton/customSkeletonAdmin";
-import { apiGetAdminDonasiById } from "../../lib/api_fetch_admin_donasi";
-import { clientLogger } from "@/util/clientLogger";
-import SkeletonAdminDetailDonasiReject from "../../component/skeleton_detail donasi_reject";
-import SkeletonAdminDetailDonasiPublish from "../../component/skeleton_detail_donasi_publish";
-
-export default function AdminDonasi_DetailPublish({
-
-  listDonatur,
-  countDonatur,
-  listPencairan,
-  listMasterStatus,
-}: {
-
-  listDonatur: any[];
-  countDonatur: number;
-  listPencairan: MODEL_DONASI_PENCAIRAN_DANA[];
-  listMasterStatus: MODEL_NEW_DEFAULT_MASTER[];
-}) {
-  const params = useParams<{ id: string }>();
-  const [data, setData] = useState<MODEL_DONASI | null>(null);
-  const [pencairan, setPencairan] = useState(listPencairan);
-  const selectedData = _.omit(data, [
-    "Author",
-    "imageDonasi",
-    "CeritaDonasi",
-    "DonasiMaster_Ketegori",
-    "DonasiMaster_Durasi",
-    "DonasiMaster_Status",
-  ]);
-
-  useShallowEffect(() => {
-    const loadInitialData = async () => {
-      try {
-        const response = await apiGetAdminDonasiById({
-          id: params.id,
-        })
-
-        if (response?.success && response?.data) {
-          setTimeout(() => {
-            setData(response.data)
-          }, 3000);
-        } else {
-          console.log("Invalid data format recieved:", response);
-          setData(null)
-        }
-      } catch (error) {
-        clientLogger.error("Invalid data format recieved:", error);
-        setData(null);
-      }
-    }
-    loadInitialData();
-  })
-  return (
-    <>
-      {/* <pre>{JSON.stringify(pencairan, null, 2)}</pre> */}
-      <Stack>
-        {!data ?
-          (<SkeletonAdminDetailDonasiPublish />) : (
-            <>
-              <AdminGlobal_ComponentBackButton
-                path={RouterAdminDonasi.table_publish}
-              />
-              <TampilanDetailDonasi donasi={data} countDonatur={countDonatur} />
-              <TampilanListDonatur
-                donatur={listDonatur}
-                listMasterStatus={listMasterStatus}
-                dataDonasi={selectedData as any}
-                onSuccessDonasi={(val) => {
-                  setData(val);
-                }}
-              />
-              <TampilanListPencairan pencairan={pencairan} />
-            </>
-          )}
-      </Stack>
-    </>
-  );
-}
-
-function TampilanDetailDonasi({
-  donasi,
-  countDonatur,
-}: {
-  donasi: MODEL_DONASI;
-  countDonatur: number;
-}) {
-  const [opened, { open, close }] = useDisclosure(false);
-  const router = useRouter();
-  const [isLoadingPencairanDana, setIsLoadingPencairanDana] = useState(false);
-
-  return (
-    <>
-      <Paper bg={AdminColor.softBlue} radius={"md"} p={"md"}>
-        <Stack>
-          <SimpleGrid
-            cols={3}
-            spacing="lg"
-            breakpoints={[
-              { maxWidth: "62rem", cols: 3, spacing: "md" },
-              { maxWidth: "48rem", cols: 2, spacing: "sm" },
-              { maxWidth: "36rem", cols: 1, spacing: "sm" },
-            ]}
-          >
-            <Paper p={"xs"} bg={AdminColor.softBlue}>
-              <Stack>
-                <Title c={AdminColor.white} align="center" order={4}>
-                  Gambar Donasi
-                </Title>
-                <Admin_ComponentLoadImageLandscape fileId={donasi.imageId} />
-              </Stack>
-            </Paper>
-
-            <Paper p={"sm"} bg={AdminColor.softBlue}>
-              <Stack spacing={5}>
-                <Title c={AdminColor.white} order={4}>Detail Donasi</Title>
-                <Grid>
-                  <Grid.Col span={4}>
-                    <Text c={AdminColor.white} fz={"xs"}>Judul</Text>
-                  </Grid.Col>
-                  <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
-                  <Grid.Col span={"auto"}>
-                    <Title order={5} c={AdminColor.white}>
-                      {donasi?.title}
-                    </Title>
-                  </Grid.Col>
-                </Grid>
-
-                <Grid>
-                  <Grid.Col span={4}>
-                    <Text c={AdminColor.white} fz={"xs"}>Penggalang Dana</Text>
-                  </Grid.Col>
-                  <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
-                  <Grid.Col span={"auto"}>
-                    <Title order={5} c={AdminColor.white}>
-                      {donasi?.Author.username}
-                    </Title>
-                  </Grid.Col>
-                </Grid>
-
-                <Grid>
-                  <Grid.Col span={4}>
-                    <Text c={AdminColor.white} fz={"xs"}>Durasi</Text>
-                  </Grid.Col>
-                  <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
-                  <Grid.Col span={"auto"}>
-                    <Title c={AdminColor.white} order={5}>
-                      {donasi?.DonasiMaster_Durasi.name} hari
-                    </Title>
-                  </Grid.Col>
-                </Grid>
-
-                <Grid>
-                  <Grid.Col span={4}>
-                    <Text c={AdminColor.white} fz={"xs"}>Dana dibutuhkan</Text>
-                  </Grid.Col>
-                  <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
-                  <Grid.Col span={"auto"}>
-                    <ComponentGlobal_TampilanRupiah
-                      nominal={+donasi?.target}
-                      color={AdminColor.yellow}
-                    />
-                  </Grid.Col>
-                </Grid>
-
-                <Grid>
-                  <Grid.Col span={4}>
-                    <Text c={AdminColor.white} fz={"xs"}>Kategori</Text>
-                  </Grid.Col>
-                  <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
-                  <Grid.Col span={"auto"}>
-                    <Title c={AdminColor.white} order={5}>
-                      {donasi?.DonasiMaster_Ketegori?.name}
-                    </Title>
-                  </Grid.Col>
-                </Grid>
-
-                <Grid>
-                  <Grid.Col span={4}>
-                    <Text c={AdminColor.white} fz={"xs"}>Total donatur</Text>
-                  </Grid.Col>
-                  <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
-                  <Grid.Col span={"auto"}>
-                    <Title order={5} c={AdminColor.white}>
-                      {countDonatur}
-                    </Title>
-                  </Grid.Col>
-                </Grid>
-
-                <Grid>
-                  <Grid.Col span={4}>
-                    <Text c={AdminColor.white} fz={12}>Progres</Text>
-                  </Grid.Col>
-                  <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
-                  <Grid.Col span={"auto"}>
-                    <Title order={5} c={AdminColor.white}>
-                      {toNumber(donasi.progres).toFixed(2)} %
-                    </Title>
-                  </Grid.Col>
-                </Grid>
-
-                <Grid>
-                  <Grid.Col span={4}>
-                    <Text c={AdminColor.white} fz={12}>Dana terkumpul</Text>
-                  </Grid.Col>
-                  <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
-                  <Grid.Col span={"auto"}>
-                    <ComponentGlobal_TampilanRupiah
-                      nominal={+donasi?.terkumpul}
-                      color={AdminColor.yellow}
-                    />
-                  </Grid.Col>
-                </Grid>
-              </Stack>
-            </Paper>
-
-            {/* Pencairan Dana */}
-            <Paper bg={AdminColor.softBlue} p={"sm"}>
-              <Stack spacing={"xl"}>
-                <Center>
-                  <Title c={AdminColor.white} order={4}>Pencairan Dana</Title>
-                </Center>
-                <Grid>
-                  <Grid.Col span={"auto"}>
-                    <Stack spacing={0}>
-                      <Text c={AdminColor.white} fz={"xs"}>Total Dana Dicairkan</Text>
-                      <ComponentGlobal_TampilanRupiah
-                        nominal={donasi?.totalPencairan}
-                        color={AdminColor.yellow}
-                      />
-                    </Stack>
-                  </Grid.Col>
-                  <Grid.Col span={"auto"}>
-                    <Stack spacing={0}>
-                      <Text c={AdminColor.white} fz={"xs"}>Bank Tujuan</Text>
-                      <Title order={6} c={AdminColor.white}>
-                        {donasi?.namaBank}
-                      </Title>
-                    </Stack>
-                  </Grid.Col>
-                </Grid>
-                <Grid>
-                  <Grid.Col span={"auto"}>
-                    <Stack spacing={0}>
-                      <Text c={AdminColor.white} fz={"xs"}>Akumulasi Pencairan</Text>
-                      <Title order={6} c={AdminColor.white}>
-                        {donasi?.akumulasiPencairan} Kali
-                      </Title>
-                    </Stack>
-                  </Grid.Col>
-                  <Grid.Col span={"auto"}>
-                    <Stack spacing={0}>
-                      <Text fz={"xs"} c={AdminColor.white}>Nomor Rekening</Text>
-                      <Title order={6} c={AdminColor.white}>
-                        {donasi?.rekening}
-                      </Title>
-                    </Stack>
-                  </Grid.Col>
-                </Grid>
-
-                <Stack align="center" spacing={0}>
-                  <Text c={AdminColor.white} fz={"xs"}>Sisa Dana</Text>
-                  <ComponentGlobal_TampilanRupiah
-                    nominal={
-                      toNumber(donasi.terkumpul) -
-                      toNumber(donasi.totalPencairan)
-                    }
-                    color={AdminColor.yellow}
-                  />
-                </Stack>
-
-                <Button
-                  loaderPosition="center"
-                  loading={isLoadingPencairanDana}
-                  radius={"xl"}
-                  onClick={() => {
-                    setIsLoadingPencairanDana(true);
-                    router.push(
-                      RouterAdminDonasi_OLD.pencairan_dana + `${donasi?.id}`
-                    );
-                  }}
-                >
-                  Cairkan Dana
-                </Button>
-              </Stack>
-            </Paper>
-          </SimpleGrid>
-        </Stack>
-      </Paper>
-      <Modal opened={opened} onClose={close} centered>
-        <PencairanDana />
-      </Modal>
-    </>
-  );
-}
-
-function PencairanDana() {
-  return (
-    <>
-      <Stack>
-        <TextInput label="Masukan nominal" />
-      </Stack>
-    </>
-  );
-}
-
-//######################## LIST DONATUR #####################//
-function TampilanListDonatur({
-  donatur,
-  listMasterStatus,
-  dataDonasi,
-  onSuccessDonasi,
-}: {
-  donatur: any;
-  listMasterStatus: MODEL_NEW_DEFAULT_MASTER[];
-  dataDonasi: MODEL_DONASI;
-  onSuccessDonasi: (val: any) => void;
-}) {
-  const router = useRouter();
-  const [isLoadingCek, setLoadingCek] = useState(false);
-  const [idData, setIdData] = useState("");
-  const [lisDonatur, setListDonatur] = useState<MODEL_DONASI_INVOICE[]>(
-    donatur.data
-  );
-  const [isNPage, setNPage] = useState(donatur.nPage);
-  const [isActivePage, setActivePage] = useState(1);
-  const [isSelect, setSelect] = useState("");
-
-  async function onRelaod() {
-    const loadData = await adminDonasi_getListDonatur({
-      donasiId: dataDonasi?.id,
-      page: 1,
-    });
-    setSelect("");
-    setListDonatur(loadData.data as any);
-    setNPage(loadData.nPage);
-  }
-
-  async function onSelect(s: any) {
-    setSelect(s);
-    const loadData = await adminDonasi_getListDonatur({
-      donasiId: dataDonasi?.id,
-      page: 1,
-      selectStatusId: s,
-    });
-    setListDonatur(loadData.data as any);
-    setNPage(loadData.nPage);
-    setActivePage(1);
-  }
-
-  async function onPageClick(p: any) {
-    setActivePage(p);
-    const loadData = await adminDonasi_getListDonatur({
-      donasiId: dataDonasi?.id,
-      page: p,
-      selectStatusId: isSelect,
-    });
-    setListDonatur(loadData.data as any);
-    setNPage(loadData.nPage);
-  }
-
-  const tableRows = lisDonatur.map((e, i) => (
-    <tr key={i}>
-      <td>
-        <Center c={AccentColor.white}>{e?.Author.username}</Center>
-      </td>
-      <td>
-        <Center c={AccentColor.white}>{e?.DonasiMaster_Bank?.name}</Center>
-      </td>
-      <td>
-        <Center c={AccentColor.white}>
-          <ComponentGlobal_TampilanRupiah nominal={+e?.nominal} />
-        </Center>
-      </td>
-      <td>
-        <Center c={AccentColor.white}>
-          {new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(
-            e?.createdAt
-          )}
-        </Center>
-      </td>
-      <td>
-        <Center c={AccentColor.white}>
-          <Badge w={150} variant="dot">
-            {e?.DonasiMaster_StatusInvoice?.name}
-          </Badge>
-        </Center>
-      </td>
-      <td>
-        <Center>
-          {e?.donasiMaster_StatusInvoiceId === "1" ||
-            e?.donasiMaster_StatusInvoiceId === "2" ? (
-            <Button
-              loaderPosition="center"
-              loading={isLoadingCek && idData === e?.id}
-              radius={"xl"}
-              onClick={() => {
-                setLoadingCek(true), setIdData(e?.id);
-                router.push(RouterAdminGlobal.preview_image({ id: e.imageId }));
-              }}
-            >
-              Cek
-            </Button>
-          ) : (
-            "-"
-          )}
-        </Center>
-      </td>
-      <td>
-        <Center>
-          {e?.donasiMaster_StatusInvoiceId === "1" ? (
-            <Button radius={"xl"} disabled>
-              Selesai
-            </Button>
-          ) : e?.DonasiMaster_StatusInvoice?.id === "2" ? (
-            <ButtonAccept
-              invoiceId={e?.id}
-              donasiId={dataDonasi?.id}
-              nominal={+e?.nominal}
-              danaTerkumpul={+dataDonasi?.terkumpul}
-              target={+dataDonasi?.target}
-              onSuccessDonasi={(val) => {
-                onSuccessDonasi(val);
-              }}
-              onSuccessDonatur={(val) => {
-                setListDonatur(val.data);
-                setNPage(val.nPage);
-              }}
-            />
-          ) : (
-            <Text>-</Text>
-          )}
-        </Center>
-      </td>
-    </tr>
-  ));
-
-  return (
-    <>
-      <Stack spacing={"xs"} h={"100%"}>
-        {/* <pre>{JSON.stringify(dataDonasi, null, 2)}</pre> */}
-        <ComponentAdminGlobal_TitlePage
-          name="Daftar Donatur"
-          color={AdminColor.softBlue}
-          component={
-            <Group>
-              <ActionIcon
-                size={"lg"}
-                radius={"xl"}
-                variant="light"
-                onClick={() => {
-                  onRelaod();
-                }}
-              >
-                <IconReload />
-              </ActionIcon>
-              <Select
-                placeholder="Pilih status"
-                value={isSelect}
-                data={listMasterStatus.map((e) => ({
-                  value: e.id,
-                  label: e.name,
-                }))}
-                onChange={(val) => {
-                  onSelect(val);
-                }}
-              />
-            </Group>
-          }
-        />
-
-        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
-          <ScrollArea w={"100%"} h={"90%"}>
-            <Table
-              verticalSpacing={"xl"}
-              horizontalSpacing={"md"}
-              p={"md"}
-              w={1500}
-            >
-              <thead>
-                <tr>
-                  <th>
-                    <Center c={AccentColor.white}>Nama Donatur</Center>
-                  </th>
-                  <th>
-                    <Center c={AccentColor.white}>Nama Bank</Center>
-                  </th>
-                  <th>
-                    <Center c={AccentColor.white}>Jumlah Donasi</Center>
-                  </th>
-                  <th>
-                    <Center c={AccentColor.white}>Tanggal</Center>
-                  </th>
-                  <th>
-                    <Center c={AccentColor.white}>Status</Center>
-                  </th>
-                  <th>
-                    <Center c={AccentColor.white}>Bukti Transfer</Center>
-                  </th>
-                  <th>
-                    <Center c={AccentColor.white}>Aksi</Center>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>{tableRows}</tbody>
-            </Table>
-          </ScrollArea>
-
-          <Center mt={"xl"}>
-            <Pagination
-              value={isActivePage}
-              total={isNPage}
-              onChange={(val) => {
-                onPageClick(val);
-              }}
-            />
-          </Center>
-        </Paper>
-      </Stack>
-    </>
-  );
-}
-
-function ButtonAccept({
-  invoiceId,
-  donasiId,
-  nominal,
-  danaTerkumpul,
-  target,
-  onSuccessDonasi,
-  onSuccessDonatur,
-}: {
-  invoiceId: string;
-  donasiId: string;
-  nominal: number;
-  danaTerkumpul: number;
-  target: number;
-  onSuccessDonasi: (val: any) => void;
-  onSuccessDonatur: (val: any) => void;
-}) {
-  const [opened, { open, close }] = useDisclosure(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  async function onAccept() {
-    let nominalDonasi = nominal;
-    let jumlahTerkumpul = danaTerkumpul;
-
-    const updateStatus = await adminDonasi_funUpdateStatusDanTotal({
-      invoiceId: invoiceId,
-      donasiId: donasiId,
-      jumlahTerkumpul: jumlahTerkumpul,
-      nominal: nominalDonasi,
-      statusInvoiceId: "1",
-      target: target,
-    });
-    if (updateStatus.status == 200) {
-      setIsLoading(true);
-      const dataNotif = {
-        appId: updateStatus.data?.id,
-        userId: updateStatus.data?.authorId,
-        pesan: updateStatus.data?.Donasi?.title,
-        status: updateStatus.data?.DonasiMaster_StatusInvoice?.name,
-        kategoriApp: "DONASI",
-        title: "Terimakasih, Donasi anda telah diterima",
-      };
-
-      const notif = await adminNotifikasi_funCreateToUser({
-        data: dataNotif as any,
-      });
-
-      if (notif.status === 201) {
-        mqtt_client.publish(
-          "USER",
-          JSON.stringify({ userId: updateStatus?.data?.authorId, count: 1 })
-        );
-
-        mqtt_client.publish(
-          "donasi_invoice",
-          JSON.stringify({
-            invoiceId: invoiceId,
-            statusInvoiceId: "1",
-          })
-        );
-      }
-
-      const dataNotifToAuthorDonasi = {
-        appId: updateStatus.data?.Donasi?.id,
-        userId: updateStatus.data?.Donasi?.authorId,
-        pesan: updateStatus.data?.Donasi?.title,
-        status: "Donatur Baru",
-        kategoriApp: "DONASI",
-        title: "Ada donatur baru",
-      };
-
-      const notifToAuthorDonasi = await adminNotifikasi_funCreateToUser({
-        data: dataNotifToAuthorDonasi as any,
-      });
-
-      if (notifToAuthorDonasi.status === 201) {
-        mqtt_client.publish(
-          "USER",
-          JSON.stringify({
-            userId: updateStatus?.data?.Donasi?.authorId,
-            count: 1,
-          })
-        );
-      }
-
-      const updateData = await AdminDonasi_getOneById(donasiId);
-      onSuccessDonasi(updateData as any);
-      const updatelistDonatur = await adminDonasi_getListDonatur({
-        donasiId: donasiId,
-        page: 1,
-      });
-      onSuccessDonatur(updatelistDonatur);
-      ComponentAdminGlobal_NotifikasiBerhasil(updateStatus.message);
-      setIsLoading(false);
-    } else {
-      ComponentAdminGlobal_NotifikasiGagal(updateStatus.message);
-      setIsLoading(false);
-    }
-    close();
-  }
-
-  return (
-    <>
-      <Button
-        color="green"
-        radius={"xl"}
-        onClick={() => {
-          open();
-        }}
-      >
-        Terima
-      </Button>
-
-      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
-        <Paper>
-          <Stack align="center">
-            <Title
-              align="center"
-              order={6}
-            >{`${"Anda sudah melihat bukti transfer dan yakin menerima donasi ini ?"}`}</Title>
-            <Group position="center">
-              <Button radius={"xl"} onClick={() => close()}>
-                Batal
-              </Button>
-              <Button
-                color="green"
-                loading={isLoading}
-                loaderPosition="center"
-                radius={"xl"}
-                onClick={() => {
-                  onAccept();
-                }}
-              >
-                Terima
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Modal>
-    </>
-  );
-}
-
-//######################## LIST PENCAIRAN #####################//
-function TampilanListPencairan({
-  pencairan,
-}: {
-  pencairan: MODEL_DONASI_PENCAIRAN_DANA[];
-}) {
-  const router = useRouter();
-  const [data, setData] = useState(pencairan);
-  const [opened, { open, close }] = useDisclosure(false);
-  const [gambarId, setGambarId] = useState("");
-
-  const rowTable = data.map((e) => (
-    <tr key={e.id}>
-      <td>
-        <Center c={AdminColor.white}>
-          <TampilanRupiahDonasi nominal={e.nominalCair} />
-        </Center>
-      </td>
-      <td>
-        <Center c={AdminColor.white}>{moment(e.createdAt).format("ll")}</Center>
-      </td>
-      <td>
-        <Center c={AdminColor.white}>
-          <Text>{e.title}</Text>
-        </Center>
-      </td>
-      <td width={500}>
-        <Box w={"100%"}>
-          <Spoiler hideLabel="Sembunyikan" maxHeight={70} showLabel="Lihat">
-            {e.deskripsi}
-          </Spoiler>
-        </Box>
-      </td>
-      <td>
-        <Box>
-          <Center>
-            <Button
-              radius={"xl"}
-              bg={"green"}
-              color="green"
-              onClick={() => {
-                // open();
-                // setGambarId(e.imagesId);
-                router.push(
-                  RouterAdminDonasi.transfer_invoice_reimbursement + e?.imagesId
-                );
-              }}
-            >
-              Cek
-            </Button>
-          </Center>
-        </Box>
-      </td>
-    </tr>
-  ));
-
-  return (
-    <>
-      {/* <Modal opened={opened} onClose={close} centered>
-        <AspectRatio ratio={9 / 16}>
-          <Image
-            src={RouterDonasi.api_gambar_pencairan + `${gambarId}`}
-            alt="Foto"
-          />
-        </AspectRatio>
-      </Modal> */}
-
-      {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
-
-      <Stack spacing={"xs"} h={"100%"}>
-        <ComponentAdminGlobal_TitlePage
-          name="Rincian Pencairan Dana"
-          color={AdminColor.softBlue}
-          component={
-            <Group>
-              <ActionIcon
-                size={"lg"}
-                radius={"xl"}
-                variant="light"
-                onClick={() => {
-                  // onRelaod();
-                }}
-              >
-                <IconReload />
-              </ActionIcon>
-              {/* <Select
-              placeholder="Pilih status"
-              value={isSelect}
-              data={listMasterStatus.map((e) => ({
-                value: e.id,
-                label: e.name,
-              }))}
-              onChange={(val) => {
-                onSelect(val);
-              }}
-            /> */}
-            </Group>
-          }
-        />
-
-        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
-          <ScrollArea w={"100%"} h={"90%"}>
-            <Table
-              verticalSpacing={"xl"}
-              horizontalSpacing={"md"}
-              p={"md"}
-              w={1500}
-
-            >
-              <thead>
-                <tr>
-                  <th>
-                    <Center c={AccentColor.white}>Nominal</Center>
-                  </th>
-                  <th>
-                    <Center c={AccentColor.white}>Tanggal</Center>
-                  </th>
-                  <th>
-                    <Center c={AccentColor.white}>Judul</Center>
-                  </th>
-                  <th style={{ color: AccentColor.white }}>Deskripsi</th>
-                  <th>
-                    <Center c={AccentColor.white}>Bukti Transfer</Center>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>{rowTable}</tbody>
-            </Table>
-          </ScrollArea>
-
-          {/* <Center mt={"xl"}>
-            <Pagination
-              value={isActivePage}
-              total={isNPage}
-              onChange={(val) => {
-                onPageClick(val);
-              }}
-            />
-          </Center> */}
-        </Paper>
-      </Stack>
-
-      {/* <Stack p={"md"}>
-        <Title order={3}>Rincian Pencairan Dana</Title>
-        {_.isEmpty(pencairan) ? (
-          <Paper bg={"gray.1"} p={"xs"}>
-            <Center>BELUM ADA PENCAIRAN DANA</Center>
-          </Paper>
-        ) : (
-          <Paper withBorder p={"xs"}>
-            <Table horizontalSpacing={"md"} verticalSpacing={"md"}>
-              <thead>
-                <tr>
-                  <th>Nominal</th>
-                  <th>Tanggal</th>
-                  <th>Judul</th>
-                  <th>
-                    <Center>Deskripsi</Center>
-                  </th>
-                  <th>
-                    <Center>Bukti Transfer</Center>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>{rowTable}</tbody>
-            </Table>
-          </Paper>
-        )}
-      </Stack> */}
-    </>
-  );
-}
diff --git a/src/app_modules/admin/donasi/detail/publish/detail_publish_backup2.txt b/src/app_modules/admin/donasi/detail/publish/detail_publish_backup2.txt
deleted file mode 100644
index 36ac2f11..00000000
--- a/src/app_modules/admin/donasi/detail/publish/detail_publish_backup2.txt
+++ /dev/null
@@ -1,871 +0,0 @@
-"use client";
-
-import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
-import { apiGetMasterStatusTransaksi } from "@/app_modules/_global/lib/api_fetch_master";
-import { globalStatusTransaksi } from "@/app_modules/_global/lib/master_list_app";
-import { Admin_ComponentLoadImageLandscape } from "@/app_modules/admin/_admin_global";
-import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
-import CustomSkeletonAdmin from "@/app_modules/admin/_admin_global/_component/skeleton/customSkeletonAdmin";
-import { ComponentAdminGlobal_NotifikasiBerhasil } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_berhasil";
-import { ComponentAdminGlobal_NotifikasiGagal } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_gagal";
-import AdminGlobal_ComponentBackButton from "@/app_modules/admin/_admin_global/back_button";
-import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
-import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
-import {
-  MODEL_DONASI,
-  MODEL_DONASI_PENCAIRAN_DANA
-} from "@/app_modules/donasi/model/interface";
-import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
-import { RouterAdminGlobal } from "@/lib";
-import { RouterAdminDonasi } from "@/lib/router_admin/router_admin_donasi";
-import { RouterAdminDonasi_OLD } from "@/lib/router_hipmi/router_admin";
-import { clientLogger } from "@/util/clientLogger";
-import mqtt_client from "@/util/mqtt_client";
-import {
-  ActionIcon,
-  Badge,
-  Box,
-  Button,
-  Center,
-  Grid,
-  Group,
-  Modal,
-  Pagination,
-  Paper,
-  ScrollArea,
-  Select,
-  SimpleGrid,
-  Spoiler,
-  Stack,
-  Table,
-  Text,
-  TextInput,
-  Title,
-} from "@mantine/core";
-import { useDisclosure, useShallowEffect } from "@mantine/hooks";
-import { IconReload } from "@tabler/icons-react";
-import _, { toNumber } from "lodash";
-import moment from "moment";
-import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
-import SkeletonAdminDetailDonasiPublish from "../../component/skeleton_detail_donasi_publish";
-import { AdminDonasi_getOneById } from "../../fun/get/get_one_by_id";
-import adminDonasi_funUpdateStatusDanTotal from "../../fun/update/fun_update_status_dan_total";
-import { apiGetAdminAllDaftarDonatur, apiGetAdminDonasiById } from "../../lib/api_fetch_admin_donasi";
-
-export default function AdminDonasi_DetailPublish({
-  countDonatur,
-  listPencairan,
-}: {
-  countDonatur: number;
-  listPencairan: MODEL_DONASI_PENCAIRAN_DANA[];
-}) {
-  const [pencairan, setPencairan] = useState(listPencairan);
-  // const [isReload, setReload] = useState(false);
-
-  return (
-    <>
-      {/* <pre>{JSON.stringify(pencairan, null, 2)}</pre> */}
-      <Stack>
-        <>
-          <AdminGlobal_ComponentBackButton
-            path={RouterAdminDonasi.table_publish}
-          />
-          <TampilanDetailDonasi countDonatur={countDonatur} />
-          <TampilanListDonatur
-            
-          />
-          <TampilanListPencairan pencairan={pencairan} />
-        </>
-      </Stack>
-    </>
-  );
-}
-
-function TampilanDetailDonasi({
-  countDonatur,
-}: {
-  countDonatur: number;
-}) {
-  const params = useParams<{ id: string }>();
-  const [data, setData] = useState<MODEL_DONASI | null>(null);
-  const [isReload, setReload] = useState(false);
-
-
-  useShallowEffect(() => {
-
-    loadInitialData();
-  }, [isReload])
-  const loadInitialData = async () => {
-    try {
-      const response = await apiGetAdminDonasiById({
-        id: params.id,
-      })
-
-      if (response?.success && response?.data) {
-        setTimeout(() => {
-          setData(response.data)
-        }, 3000);
-      } else {
-        console.log("Invalid data format recieved:", response);
-        setData(null)
-      }
-    } catch (error) {
-      clientLogger.error("Invalid data format recieved:", error);
-      setData(null);
-    }
-  }
-  const [opened, { open, close }] = useDisclosure(false);
-  const router = useRouter();
-  const [isLoadingPencairanDana, setIsLoadingPencairanDana] = useState(false);
-
-
-  return (
-    <>
-      {!data ? (<CustomSkeletonAdmin height={"40vh"}/>) : (
-        <Paper bg={AdminColor.softBlue} radius={"md"} p={"md"}>
-          <Stack>
-            <SimpleGrid
-              cols={3}
-              spacing="lg"
-              breakpoints={[
-                { maxWidth: "62rem", cols: 3, spacing: "md" },
-                { maxWidth: "48rem", cols: 2, spacing: "sm" },
-                { maxWidth: "36rem", cols: 1, spacing: "sm" },
-              ]}
-            >
-              <Paper p={"xs"} bg={AdminColor.softBlue}>
-                <Stack>
-                  <Title c={AdminColor.white} align="center" order={4}>
-                    Gambar Donasi
-                  </Title>
-                  <Admin_ComponentLoadImageLandscape fileId={data?.imageId} />
-                </Stack>
-              </Paper>
-
-              <Paper p={"sm"} bg={AdminColor.softBlue}>
-                <Stack spacing={5}>
-                  <Title c={AdminColor.white} order={4}>Detail Donasi</Title>
-                  <Grid>
-                    <Grid.Col span={4}>
-                      <Text c={AdminColor.white} fz={"xs"}>Judul</Text>
-                    </Grid.Col>
-                    <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <Title order={5} c={AdminColor.white}>
-                        {data?.title}
-                      </Title>
-                    </Grid.Col>
-                  </Grid>
-
-                  <Grid>
-                    <Grid.Col span={4}>
-                      <Text c={AdminColor.white} fz={"xs"}>Penggalang Dana</Text>
-                    </Grid.Col>
-                    <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <Title order={5} c={AdminColor.white}>
-                        {data?.Author.username}
-                      </Title>
-                    </Grid.Col>
-                  </Grid>
-
-                  <Grid>
-                    <Grid.Col span={4}>
-                      <Text c={AdminColor.white} fz={"xs"}>Durasi</Text>
-                    </Grid.Col>
-                    <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <Title c={AdminColor.white} order={5}>
-                        {data?.DonasiMaster_Durasi.name} hari
-                      </Title>
-                    </Grid.Col>
-                  </Grid>
-
-                  <Grid>
-                    <Grid.Col span={4}>
-                      <Text c={AdminColor.white} fz={"xs"}>Dana dibutuhkan</Text>
-                    </Grid.Col>
-                    <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <ComponentGlobal_TampilanRupiah
-                        nominal={+data?.target}
-                        color={AdminColor.yellow}
-                      />
-                    </Grid.Col>
-                  </Grid>
-
-                  <Grid>
-                    <Grid.Col span={4}>
-                      <Text c={AdminColor.white} fz={"xs"}>Kategori</Text>
-                    </Grid.Col>
-                    <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <Title c={AdminColor.white} order={5}>
-                        {data?.DonasiMaster_Ketegori?.name}
-                      </Title>
-                    </Grid.Col>
-                  </Grid>
-
-                  <Grid>
-                    <Grid.Col span={4}>
-                      <Text c={AdminColor.white} fz={"xs"}>Total donatur</Text>
-                    </Grid.Col>
-                    <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <Title order={5} c={AdminColor.white}>
-                        {countDonatur}
-                      </Title>
-                    </Grid.Col>
-                  </Grid>
-
-                  <Grid>
-                    <Grid.Col span={4}>
-                      <Text c={AdminColor.white} fz={12}>Progres</Text>
-                    </Grid.Col>
-                    <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <Title order={5} c={AdminColor.white}>
-                        {toNumber(data.progres).toFixed(2)} %
-                      </Title>
-                    </Grid.Col>
-                  </Grid>
-
-                  <Grid>
-                    <Grid.Col span={4}>
-                      <Text c={AdminColor.white} fz={12}>Dana terkumpul</Text>
-                    </Grid.Col>
-                    <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <ComponentGlobal_TampilanRupiah
-                        nominal={+data?.terkumpul}
-                        color={AdminColor.yellow}
-                      />
-                    </Grid.Col>
-                  </Grid>
-                </Stack>
-              </Paper>
-
-              {/* Pencairan Dana */}
-              <Paper bg={AdminColor.softBlue} p={"sm"}>
-                <Stack spacing={"xl"}>
-                  <Center>
-                    <Title c={AdminColor.white} order={4}>Pencairan Dana</Title>
-                  </Center>
-                  <Grid>
-                    <Grid.Col span={"auto"}>
-                      <Stack spacing={0}>
-                        <Text c={AdminColor.white} fz={"xs"}>Total Dana Dicairkan</Text>
-                        <ComponentGlobal_TampilanRupiah
-                          nominal={data?.totalPencairan}
-                          color={AdminColor.yellow}
-                        />
-                      </Stack>
-                    </Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <Stack spacing={0}>
-                        <Text c={AdminColor.white} fz={"xs"}>Bank Tujuan</Text>
-                        <Title order={6} c={AdminColor.white}>
-                          {data?.namaBank}
-                        </Title>
-                      </Stack>
-                    </Grid.Col>
-                  </Grid>
-                  <Grid>
-                    <Grid.Col span={"auto"}>
-                      <Stack spacing={0}>
-                        <Text c={AdminColor.white} fz={"xs"}>Akumulasi Pencairan</Text>
-                        <Title order={6} c={AdminColor.white}>
-                          {data?.akumulasiPencairan} Kali
-                        </Title>
-                      </Stack>
-                    </Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <Stack spacing={0}>
-                        <Text fz={"xs"} c={AdminColor.white}>Nomor Rekening</Text>
-                        <Title order={6} c={AdminColor.white}>
-                          {data?.rekening}
-                        </Title>
-                      </Stack>
-                    </Grid.Col>
-                  </Grid>
-
-                  <Stack align="center" spacing={0}>
-                    <Text c={AdminColor.white} fz={"xs"}>Sisa Dana</Text>
-                    <ComponentGlobal_TampilanRupiah
-                      nominal={
-                        toNumber(data.terkumpul) -
-                        toNumber(data.totalPencairan)
-                      }
-                      color={AdminColor.yellow}
-                    />
-                  </Stack>
-
-                  <Button
-                    loaderPosition="center"
-                    loading={isLoadingPencairanDana}
-                    radius={"xl"}
-                    onClick={() => {
-                      setIsLoadingPencairanDana(true);
-                      router.push(
-                        RouterAdminDonasi_OLD.pencairan_dana + `${data?.id}`
-                      );
-                    }}
-                  >
-                    Cairkan Dana
-                  </Button>
-                </Stack>
-              </Paper>
-            </SimpleGrid>
-          </Stack>
-        </Paper>
-      )}
-      <Modal opened={opened} onClose={close} centered>
-        <PencairanDana />
-      </Modal>
-    </>
-  );
-}
-
-function PencairanDana() {
-  return (
-    <>
-      <Stack>
-        <TextInput label="Masukan nominal" />
-      </Stack>
-    </>
-  );
-}
-
-//######################## LIST DONATUR #####################//
-function TampilanListDonatur() {
-  const router = useRouter();
-  const params = useParams<{ id: string }>();
-  const donasiId = params.id;
-  const [isLoadingCek, setLoadingCek] = useState(false);
-  const [idData, setIdData] = useState("");
-  const [lisDonatur, setListDonatur] = useState<any[] | null>(null);
-  const [listStatus, setListStatus] = useState<MODEL_NEW_DEFAULT_MASTER[] | null>(null);
-  const [isNPage, setNPage] = useState<number>(1);
-  const [isActivePage, setActivePage] = useState(1);
- 
-  const [selectStatus, setSelectStatus] = useState("");
-
-
-  useShallowEffect(() => {
-    handleLoadData();
-  }, [isActivePage, selectStatus]);
-
-  useShallowEffect(() => {
-    handleLoadStatus();
-  }, [])
-
-  const handleLoadData = async () => {
-    try {
-      const cek = globalStatusTransaksi.find((e) => e.id === selectStatus);
-      const response = await apiGetAdminAllDaftarDonatur({
-        id: donasiId,
-        page: `${isActivePage}`,
-        status: cek?.name,
-      });
-
-      if (response?.success && response?.data?.data) {
-        setListDonatur(response.data.data);
-        setNPage(response.data.nPage || 1);
-      } else {
-        console.error("Invalid data format received:", response);
-        setListDonatur([]);
-      }
-    } catch (error) {
-      clientLogger.error("Error get data daftar donatur", error);
-      setListDonatur([]);
-    }
-  }
-
-  const handleLoadStatus = async () => {
-    try {
-      const response = await apiGetMasterStatusTransaksi();
-
-
-      if (response?.success && response?.data) {
-        setListStatus(response.data);
-      } else {
-        console.error("Invalid data format received:", response);
-        setListStatus(null);
-      }
-    } catch (error) {
-      clientLogger.error("Error get status donatur", error);
-      setListStatus(null);
-    }
-  }
-  const onPageClick = async (page: number) => {
-    setActivePage(page);
-  }
-  async function onSelect(selectStatus: any) {
-    setSelectStatus(selectStatus);
-  }
-  async function onReload() {
-    setSelectStatus("");
-    handleLoadData();
-  }
-
-
-
-  const renderTableBody = () => {
-    if (!Array.isArray(lisDonatur) || lisDonatur.length === 0) {
-      return (
-        <tr>
-          <td colSpan={12}>
-            <Center>
-              <Text c={AccentColor.white}>Tidak ada data</Text>
-            </Center>
-          </td>
-        </tr>
-      );
-    }
-    return lisDonatur?.map((e, i) => (
-      <tr key={i}>
-        <td>
-          <Center c={AccentColor.white}>{e?.Author.username}</Center>
-        </td>
-        <td>
-          <Center c={AccentColor.white}>{e?.DonasiMaster_Bank?.name}</Center>
-        </td>
-        <td>
-          <Center c={AccentColor.white}>
-            <ComponentGlobal_TampilanRupiah nominal={+e?.nominal} />
-          </Center>
-        </td>
-        <td>
-          <Center c={AccentColor.white}>
-            {new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(
-              new Date(e?.createdAt)
-            )}
-          </Center>
-        </td>
-        <td>
-          <Center >
-            <Badge c={AccentColor.white} w={150} variant="dot">
-              {e?.DonasiMaster_StatusInvoice?.name}
-            </Badge>
-          </Center>
-        </td>
-        <td>
-          <Center>
-            {e?.donasiMaster_StatusInvoiceId === "1" ||
-              e?.donasiMaster_StatusInvoiceId === "2" ? (
-              <Button
-                loaderPosition="center"
-                loading={isLoadingCek && idData === e?.id}
-                radius={"xl"}
-                onClick={() => {
-                  setLoadingCek(true), setIdData(e?.id);
-                  router.push(RouterAdminGlobal.preview_image({ id: e.imageId }));
-                }}
-              >
-                Cek
-              </Button>
-            ) : (
-              "-"
-            )}
-          </Center>
-        </td>
-        <td>
-          <Center>
-            {e?.donasiMaster_StatusInvoiceId === "1" ? (
-              <Button radius={"xl"} disabled>
-                Selesai
-              </Button>
-            ) : e?.DonasiMaster_StatusInvoice?.id === "2" ? (
-              <ButtonAccept
-                invoiceId={e?.id}
-                donasiId={donasiId}
-                nominal={+e?.nominal}
-                danaTerkumpul={+e?.terkumpul}
-                target={+e?.target}
-                onSetDonasi={() => {
-                  onReload();
-                }}
-                onSuccessDonatur={(val) => {
-                  setListDonatur(val.data);
-                  setNPage(val.nPage);
-                }}
-              />
-            ) : (
-              <Text>-</Text>
-            )}
-          </Center>
-        </td>
-      </tr>
-    ));
-  }
-
-  if (!lisDonatur && !listStatus) return <CustomSkeletonAdmin height={"80vh"} />
-
-  return (
-    <>
-      <Stack spacing={"xs"} h={"100%"}>
-        {/* <pre>{JSON.stringify(dataDonasi, null, 2)}</pre> */}
-        <ComponentAdminGlobal_TitlePage
-          name="Daftar Donatur"
-          color={AdminColor.softBlue}
-          component={
-            <Group>
-              <ActionIcon
-                size={"lg"}
-                radius={"xl"}
-                variant="light"
-                onClick={() => {
-                  onReload();
-                }}
-              >
-                <IconReload />
-              </ActionIcon>
-              <Select
-                placeholder="Pilih status"
-                value={selectStatus}
-                data={listStatus?.map((e, i) => ({
-                  value: e.id,
-                  label: e.name,
-                })) || []}
-                onChange={(val: any) => {
-                  onSelect(val);
-                }}
-              />
-            </Group>
-          }
-        />
-
-        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
-          <ScrollArea w={"100%"} h={"90%"}>
-            <Table
-              verticalSpacing={"xl"}
-              horizontalSpacing={"md"}
-              p={"md"}
-              w={1500}
-            >
-              <thead>
-                <tr>
-                  <th>
-                    <Center c={AccentColor.white}>Nama Donatur</Center>
-                  </th>
-                  <th>
-                    <Center c={AccentColor.white}>Nama Bank</Center>
-                  </th>
-                  <th>
-                    <Center c={AccentColor.white}>Jumlah Donasi</Center>
-                  </th>
-                  <th>
-                    <Center c={AccentColor.white}>Tanggal</Center>
-                  </th>
-                  <th>
-                    <Center c={AccentColor.white}>Status</Center>
-                  </th>
-                  <th>
-                    <Center c={AccentColor.white}>Bukti Transfer</Center>
-                  </th>
-                  <th>
-                    <Center c={AccentColor.white}>Aksi</Center>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>{renderTableBody()}</tbody>
-            </Table>
-          </ScrollArea>
-
-          <Center mt={"xl"}>
-            <Pagination
-              value={isActivePage}
-              total={isNPage}
-              onChange={(val) => {
-                onPageClick(val);
-              }}
-            />
-          </Center>
-        </Paper>
-      </Stack>
-    </>
-  );
-}
-
-function ButtonAccept({
-  invoiceId,
-  donasiId,
-  nominal,
-  danaTerkumpul,
-  target,
-  onSetDonasi: onSuccessDonasi,
-  onSuccessDonatur,
-}: {
-  invoiceId: string;
-  donasiId: string;
-  nominal: number;
-  danaTerkumpul: number;
-  target: number;
-  onSetDonasi: (val: boolean) => void;
-  onSuccessDonatur: (val: any) => void;
-}) {
-  const [opened, { open, close }] = useDisclosure(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  async function onAccept() {
-    let nominalDonasi = nominal;
-    let jumlahTerkumpul = danaTerkumpul;
-
-    const updateStatus = await adminDonasi_funUpdateStatusDanTotal({
-      invoiceId: invoiceId,
-      donasiId: donasiId,
-      jumlahTerkumpul: jumlahTerkumpul,
-      nominal: nominalDonasi,
-      statusInvoiceId: "1",
-      target: target,
-    });
-    if (updateStatus.status == 200) {
-      setIsLoading(true);
-      const dataNotif = {
-        appId: updateStatus.data?.id,
-        userId: updateStatus.data?.authorId,
-        pesan: updateStatus.data?.Donasi?.title,
-        status: updateStatus.data?.DonasiMaster_StatusInvoice?.name,
-        kategoriApp: "DONASI",
-        title: "Terimakasih, Donasi anda telah diterima",
-      };
-
-      const notif = await adminNotifikasi_funCreateToUser({
-        data: dataNotif as any,
-      });
-
-      if (notif.status === 201) {
-        mqtt_client.publish(
-          "USER",
-          JSON.stringify({ userId: updateStatus?.data?.authorId, count: 1 })
-        );
-
-        mqtt_client.publish(
-          "donasi_invoice",
-          JSON.stringify({
-            invoiceId: invoiceId,
-            statusInvoiceId: "1",
-          })
-        );
-      }
-
-      const dataNotifToAuthorDonasi = {
-        appId: updateStatus.data?.Donasi?.id,
-        userId: updateStatus.data?.Donasi?.authorId,
-        pesan: updateStatus.data?.Donasi?.title,
-        status: "Donatur Baru",
-        kategoriApp: "DONASI",
-        title: "Ada donatur baru",
-      };
-
-      const notifToAuthorDonasi = await adminNotifikasi_funCreateToUser({
-        data: dataNotifToAuthorDonasi as any,
-      });
-
-      if (notifToAuthorDonasi.status === 201) {
-        mqtt_client.publish(
-          "USER",
-          JSON.stringify({
-            userId: updateStatus?.data?.Donasi?.authorId,
-            count: 1,
-          })
-        );
-      }
-
-      const updateData = await AdminDonasi_getOneById(donasiId);
-      onSuccessDonasi(updateData as any);
-      // const updatelistDonatur = await adminDonasi_getListDonatur({
-      //   donasiId: donasiId,
-      //   page: 1,
-      // });
-      onSuccessDonatur(true);
-
-      ComponentAdminGlobal_NotifikasiBerhasil(updateStatus.message);
-      setIsLoading(false);
-    } else {
-      ComponentAdminGlobal_NotifikasiGagal(updateStatus.message);
-      setIsLoading(false);
-    }
-    close();
-  }
-
-  return (
-    <>
-      <Button
-        color="green"
-        radius={"xl"}
-        onClick={() => {
-          open();
-        }}
-      >
-        Terima
-      </Button>
-
-      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
-        <Paper>
-          <Stack align="center">
-            <Title
-              align="center"
-              order={6}
-            >{`${"Anda sudah melihat bukti transfer dan yakin menerima donasi ini ?"}`}</Title>
-            <Group position="center">
-              <Button radius={"xl"} onClick={() => close()}>
-                Batal
-              </Button>
-              <Button
-                color="green"
-                loading={isLoading}
-                loaderPosition="center"
-                radius={"xl"}
-                onClick={() => {
-                  onAccept();
-                }}
-              >
-                Terima
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Modal>
-    </>
-  );
-}
-
-//######################## LIST PENCAIRAN #####################//
-function TampilanListPencairan({
-  pencairan,
-}: {
-  pencairan: MODEL_DONASI_PENCAIRAN_DANA[];
-}) {
-  const router = useRouter();
-  const [data, setData] = useState(pencairan);
-  const [opened, { open, close }] = useDisclosure(false);
-  const [gambarId, setGambarId] = useState("");
-
-  const rowTable = data.map((e) => (
-    <tr key={e.id}>
-      <td>
-        <Center c={AdminColor.white}>
-          <TampilanRupiahDonasi nominal={e.nominalCair} />
-        </Center>
-      </td>
-      <td>
-        <Center c={AdminColor.white}>{moment(e.createdAt).format("ll")}</Center>
-      </td>
-      <td>
-        <Center c={AdminColor.white}>
-          <Text>{e.title}</Text>
-        </Center>
-      </td>
-      <td width={500}>
-        <Box w={"100%"}>
-          <Spoiler hideLabel="Sembunyikan" maxHeight={70} showLabel="Lihat">
-            {e.deskripsi}
-          </Spoiler>
-        </Box>
-      </td>
-      <td>
-        <Box>
-          <Center>
-            <Button
-              radius={"xl"}
-              bg={"green"}
-              color="green"
-              onClick={() => {
-                // open();
-                // setGambarId(e.imagesId);
-                router.push(
-                  RouterAdminDonasi.transfer_invoice_reimbursement + e?.imagesId
-                );
-              }}
-            >
-              Cek
-            </Button>
-          </Center>
-        </Box>
-      </td>
-    </tr>
-  ));
-
-  return (
-    <>
-
-      <Stack spacing={"xs"} h={"100%"}>
-        <ComponentAdminGlobal_TitlePage
-          name="Rincian Pencairan Dana"
-          color={AdminColor.softBlue}
-          component={
-            <Group>
-              <ActionIcon
-                size={"lg"}
-                radius={"xl"}
-                variant="light"
-                onClick={() => {
-                  // onRelaod();
-                }}
-              >
-                <IconReload />
-              </ActionIcon>
-              {/* <Select
-              placeholder="Pilih status"
-              value={isSelect}
-              data={listMasterStatus.map((e) => ({
-                value: e.id,
-                label: e.name,
-              }))}
-              onChange={(val) => {
-                onSelect(val);
-              }}
-            /> */}
-            </Group>
-          }
-        />
-
-        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
-          <ScrollArea w={"100%"} h={"90%"}>
-            <Table
-              verticalSpacing={"xl"}
-              horizontalSpacing={"md"}
-              p={"md"}
-              w={1500}
-
-            >
-              <thead>
-                <tr>
-                  <th>
-                    <Center c={AccentColor.white}>Nominal</Center>
-                  </th>
-                  <th>
-                    <Center c={AccentColor.white}>Tanggal</Center>
-                  </th>
-                  <th>
-                    <Center c={AccentColor.white}>Judul</Center>
-                  </th>
-                  <th style={{ color: AccentColor.white }}>Deskripsi</th>
-                  <th>
-                    <Center c={AccentColor.white}>Bukti Transfer</Center>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>{rowTable}</tbody>
-            </Table>
-          </ScrollArea>
-
-          {/* <Center mt={"xl"}>
-            <Pagination
-              value={isActivePage}
-              total={isNPage}
-              onChange={(val) => {
-                onPageClick(val);
-              }}
-            />
-          </Center> */}
-        </Paper>
-      </Stack>
-
-
-    </>
-  );
-}
diff --git a/src/app_modules/admin/donasi/detail/publish/pencairan_dana.tsx b/src/app_modules/admin/donasi/detail/publish/pencairan_dana.tsx
index cb058d01..fbcddaee 100644
--- a/src/app_modules/admin/donasi/detail/publish/pencairan_dana.tsx
+++ b/src/app_modules/admin/donasi/detail/publish/pencairan_dana.tsx
@@ -24,7 +24,7 @@ import {
 import { IconCamera } from "@tabler/icons-react";
 import _, { toNumber } from "lodash";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import ComponentAdminDonasi_TombolKembali from "../../component/tombol_kembali";
 import { AdminDonasi_funCreatePencairanDana } from "../../fun/create/fun_create_pencairan_dana";
@@ -33,34 +33,69 @@ import { AdminDonasi_AkumulasiPencairanById } from "../../fun/update/fun_update_
 import { ComponentGlobal_InputCountDown } from "@/app_modules/_global/component";
 import { DIRECTORY_ID } from "@/lib";
 import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { apiGetAdminDonasiById } from "../../lib/api_fetch_admin_donasi";
+import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
+import { clientLogger } from "@/util/clientLogger";
+import { useShallowEffect } from "@mantine/hooks";
+import CustomSkeletonAdmin from "@/app_modules/admin/_admin_global/_component/skeleton/customSkeletonAdmin";
 
-export default function AdminDonasi_PencairanDana({
-  donasiId,
-  danaTerkumpul,
-  totalPencairan,
-}: {
-  donasiId: string;
-  danaTerkumpul: string;
-  totalPencairan: number;
-}) {
-  const [terkumpul, setTerkumpul] = useState(danaTerkumpul);
-  const [total, setTotal] = useState(totalPencairan);
+export default function AdminDonasi_PencairanDana() {
+  const params = useParams<{ id: string }>();
+  const donasiId = params.id;
+  const [data, setData] = useState<MODEL_DONASI | null>(null);
+  // const [terkumpul, setTerkumpul] = useState(data?.terkumpul);
+  // const [total, setTotal] = useState(data?.totalPencairan);
+
+  useShallowEffect(() => {
+    loadInitialData();
+  }, [])
+  const loadInitialData = async () => {
+    try {
+      const response = await apiGetAdminDonasiById({
+        id: donasiId,
+      })
+
+      if (response?.success && response?.data) {
+        setData(response.data)
+        console.log("ini respone data", response.data)
+        // setTerkumpul(response.data.terkumpul)
+        // setTotal(response.data.totalPencairan)
+      } else {
+        setData(null)
+        // setTerkumpul("")
+        // setTotal(0)
+      }
+    } catch (error) {
+      clientLogger.error("Invalid data format recieved:", error);
+      setData(null);
+      // setTerkumpul("");
+      // setTotal(0);
+    }
+  }
 
   return (
     <>
       <Stack>
         <ComponentAdminDonasi_TombolKembali />
-        <TotalDanaView danaTerkumpul={terkumpul} totalPencairan={total} />
-        <FormView
-          danaTerkumpul={terkumpul}
-          donasiId={donasiId}
-          totalPencairan={total}
-          onSuccess={(val) => {
-            setTerkumpul(val.terkumpul);
-            setTotal(val.totalPencairan);
-          }}
-        />
-      </Stack>
+        {!data ?
+          (  
+            <CustomSkeletonAdmin height={500} />)
+          : (
+          <>
+            <TotalDanaView danaTerkumpul={data?.terkumpul as string} totalPencairan={data?.totalPencairan as number} />
+              <FormView
+              donasiId={donasiId}  
+              danaTerkumpul={data?.terkumpul as string}
+              totalPencairan={data?.totalPencairan as number}
+              onSuccess={(val) => {
+                // setTerkumpul(val.terkumpul);
+                // setTotal(val.totalPencairan);
+              }}
+            />
+          </>
+        )}
+      </Stack >
     </>
   );
 }
@@ -74,6 +109,8 @@ function TotalDanaView({
 }) {
   const terkumpul = toNumber(danaTerkumpul);
   const sisaDana = terkumpul - totalPencairan;
+  console.log("Sisa dana", sisaDana);
+  console.log("Terkumpul", terkumpul);
 
   return (
     <>
@@ -81,11 +118,10 @@ function TotalDanaView({
         <Paper
           p={"md"}
           w={{ base: 200, sm: 200, md: 300, lg: 400 }}
-          withBorder
-          bg={"gray.2"}
+          bg={AdminColor.softBlue}
         >
           <Stack spacing={0} align="center">
-            <Text fw={"bold"}>Dana Tersisa</Text>
+            <Text c={AdminColor.white} fw={"bold"}>Dana Tersisa</Text>
             <Title>
               {
                 <ComponentAdminGlobal_TampilanRupiahDonasi
@@ -111,7 +147,9 @@ function FormView({
   danaTerkumpul: string;
   totalPencairan: number;
   onSuccess: (val: any) => void;
-}) {
+  }) {
+  
+ 
   const router = useRouter();
   const [file, setFile] = useState<File | null>(null);
   const [images, setImages] = useState<any | null>();
@@ -158,18 +196,21 @@ function FormView({
         body.nominalCair as any
       );
       if (res2.status === 200) {
-        const loadData = await AdminDonasi_getOneById(donasiId);
+        const loadData = await apiGetAdminDonasiById({id: donasiId});
         onSuccess(loadData);
+        console.log("load Data", loadData);
 
         const dataNotif = {
-          appId: loadData?.id,
-          userId: loadData?.authorId,
-          pesan: loadData?.title as any,
+          appId: loadData?.data?.id,
+          userId: loadData?.data?.authorId,
+          pesan: loadData?.data?.title as any,
           status: "Pencairan Dana",
           kategoriApp: "DONASI",
           title: "Dana donasi berhasil dicairkan",
         };
 
+        console.log("Data Notif", dataNotif);
+
         const notif = await adminNotifikasi_funCreateToUser({
           data: dataNotif as any,
         });
@@ -197,13 +238,14 @@ function FormView({
   return (
     <>
       <Center>
-        <Paper p={"md"} w={{ base: 300, sm: 350, md: 400, lg: 500 }} withBorder>
+        <Paper p={"md"} w={{ base: 300, sm: 350, md: 400, lg: 500 }} bg={AdminColor.softBlue}>
           <Center mb={"lg"}>
-            <Title order={5}>Form Pencairan Dana</Title>
+            <Title c={AdminColor.white} order={5}>Form Pencairan Dana</Title>
           </Center>
           <Stack>
             <TextInput
               icon={<Text fw={"bold"}>Rp.</Text>}
+              styles={{ label: { color: AdminColor.white } }}
               withAsterisk
               placeholder="0"
               label="Nominal"
@@ -245,6 +287,7 @@ function FormView({
               }}
             />
             <TextInput
+              styles={{ label: { color: AdminColor.white } }}
               withAsterisk
               placeholder="Masukan judul"
               label="Judul"
@@ -258,6 +301,7 @@ function FormView({
             />
             <Stack spacing={5}>
               <Textarea
+                styles={{ label: { color: AdminColor.white } }}
                 withAsterisk
                 placeholder="Masukan deskripsi"
                 label="Deskripsi"
@@ -288,7 +332,7 @@ function FormView({
                       const buffer = URL.createObjectURL(
                         new Blob([new Uint8Array(await files.arrayBuffer())])
                       );
-                   
+
                       setImages(buffer);
                       setFile(files);
                     } catch (error) {
@@ -341,4 +385,4 @@ function FormView({
       </Center>
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app_modules/admin/donasi/detail/publish/pencairan_dana_backup.txt b/src/app_modules/admin/donasi/detail/publish/pencairan_dana_backup.txt
new file mode 100644
index 00000000..0fed564f
--- /dev/null
+++ b/src/app_modules/admin/donasi/detail/publish/pencairan_dana_backup.txt
@@ -0,0 +1,387 @@
+"use client";
+
+import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
+import { ComponentAdminGlobal_NotifikasiBerhasil } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_berhasil";
+import { ComponentAdminGlobal_NotifikasiGagal } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_gagal";
+import { ComponentAdminGlobal_NotifikasiPeringatan } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_peringatan";
+import ComponentAdminGlobal_TampilanRupiahDonasi from "@/app_modules/admin/_admin_global/tampilan_rupiah";
+import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
+import ComponentDonasi_NotedBox from "@/app_modules/donasi/component/noted_box";
+import mqtt_client from "@/util/mqtt_client";
+import {
+  AspectRatio,
+  Button,
+  Center,
+  FileButton,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Textarea,
+  Title,
+} from "@mantine/core";
+import { IconCamera } from "@tabler/icons-react";
+import _, { toNumber } from "lodash";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
+import ComponentAdminDonasi_TombolKembali from "../../component/tombol_kembali";
+import { AdminDonasi_funCreatePencairanDana } from "../../fun/create/fun_create_pencairan_dana";
+import { AdminDonasi_getOneById } from "../../fun/get/get_one_by_id";
+import { AdminDonasi_AkumulasiPencairanById } from "../../fun/update/fun_update_akumulasi_pencairan";
+import { ComponentGlobal_InputCountDown } from "@/app_modules/_global/component";
+import { DIRECTORY_ID } from "@/lib";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { apiGetAdminDonasiById } from "../../lib/api_fetch_admin_donasi";
+import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
+import { clientLogger } from "@/util/clientLogger";
+import { useShallowEffect } from "@mantine/hooks";
+import CustomSkeletonAdmin from "@/app_modules/admin/_admin_global/_component/skeleton/customSkeletonAdmin";
+
+export default function AdminDonasi_PencairanDana() {
+  const params = useParams<{ id: string }>();
+  const donasiId = params.id;
+  const [data, setData] = useState<MODEL_DONASI | null>(null);
+  // const [terkumpul, setTerkumpul] = useState(data?.terkumpul);
+  // const [total, setTotal] = useState(data?.totalPencairan);
+
+  useShallowEffect(() => {
+    loadInitialData();
+  }, [])
+  const loadInitialData = async () => {
+    try {
+      const response = await apiGetAdminDonasiById({
+        id: donasiId,
+      })
+
+      if (response?.success && response?.data) {
+        setData(response.data)
+        console.log("ini respone data", response.data)
+        // setTerkumpul(response.data.terkumpul)
+        // setTotal(response.data.totalPencairan)
+      } else {
+        setData(null)
+        // setTerkumpul("")
+        // setTotal(0)
+      }
+    } catch (error) {
+      clientLogger.error("Invalid data format recieved:", error);
+      setData(null);
+      // setTerkumpul("");
+      // setTotal(0);
+    }
+  }
+
+  return (
+    <>
+      <Stack>
+        <ComponentAdminDonasi_TombolKembali />
+        {!data ?
+          (  
+            <CustomSkeletonAdmin height={500} />)
+          : (
+          <>
+            <TotalDanaView danaTerkumpul={data?.terkumpul as string} totalPencairan={data?.totalPencairan as number} />
+              <FormView
+              donasiId={donasiId}  
+              danaTerkumpul={data?.terkumpul as string}
+              totalPencairan={data?.totalPencairan as number}
+              onSuccess={(val) => {
+                // setTerkumpul(val.terkumpul);
+                // setTotal(val.totalPencairan);
+              }}
+            />
+          </>
+        )}
+      </Stack >
+    </>
+  );
+}
+
+function TotalDanaView({
+  danaTerkumpul,
+  totalPencairan,
+}: {
+  danaTerkumpul: string;
+  totalPencairan: number;
+}) {
+  const terkumpul = toNumber(danaTerkumpul);
+  const sisaDana = terkumpul - totalPencairan;
+  console.log("Sisa dana", sisaDana);
+  console.log("Terkumpul", terkumpul);
+
+  return (
+    <>
+      <Center>
+        <Paper
+          p={"md"}
+          w={{ base: 200, sm: 200, md: 300, lg: 400 }}
+          bg={AdminColor.softBlue}
+        >
+          <Stack spacing={0} align="center">
+            <Text c={AdminColor.white} fw={"bold"}>Dana Tersisa</Text>
+            <Title>
+              {
+                <ComponentAdminGlobal_TampilanRupiahDonasi
+                  nominal={sisaDana}
+                  fontSize={20}
+                />
+              }
+            </Title>
+          </Stack>
+        </Paper>
+      </Center>
+    </>
+  );
+}
+
+function FormView({
+  donasiId,
+  danaTerkumpul,
+  totalPencairan,
+  onSuccess,
+}: {
+  donasiId: string;
+  danaTerkumpul: string;
+  totalPencairan: number;
+  onSuccess: (val: any) => void;
+  }) {
+  
+ 
+  const router = useRouter();
+  const [file, setFile] = useState<File | null>(null);
+  const [images, setImages] = useState<any | null>();
+  const [value, setValue] = useState({
+    title: "",
+    deskripsi: "",
+    nilai: "",
+  });
+  const [nilaiNominal, setNilaiNominal] = useState(0);
+  const [isOver, setIsOver] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const terkumpul = toNumber(danaTerkumpul);
+  const sisaDana = terkumpul - totalPencairan;
+
+  async function onSave() {
+    const body = {
+      donasiId: donasiId,
+      nominalCair: nilaiNominal,
+      title: value.title,
+      deskripsi: value.deskripsi,
+    };
+
+    if (_.values(body).includes(""))
+      return ComponentAdminGlobal_NotifikasiPeringatan("Lengkapi Data");
+
+    const uploadImage = await funGlobal_UploadToStorage({
+      file: file as File,
+      dirId: DIRECTORY_ID.donasi_bukti_trf_pencairan_dana,
+    });
+    if (!uploadImage.success)
+      return ComponentAdminGlobal_NotifikasiPeringatan(
+        "Gagal upload file gambar"
+      );
+
+    const res = await AdminDonasi_funCreatePencairanDana({
+      data: body as any,
+      fileId: uploadImage.data.id,
+    });
+    if (res.status === 200) {
+      setIsLoading(true);
+      const res2 = await AdminDonasi_AkumulasiPencairanById(
+        body.donasiId as any,
+        body.nominalCair as any
+      );
+      if (res2.status === 200) {
+        const loadData = await apiGetAdminDonasiById({id: donasiId});
+        onSuccess(loadData);
+
+        const dataNotif = {
+          appId: loadData?.id,
+          userId: loadData?.authorId,
+          pesan: loadData?.title as any,
+          status: "Pencairan Dana",
+          kategoriApp: "DONASI",
+          title: "Dana donasi berhasil dicairkan",
+        };
+
+        console.log("Data Notif", dataNotif);
+
+        const notif = await adminNotifikasi_funCreateToUser({
+          data: dataNotif as any,
+        });
+
+        if (notif.status === 201) {
+          mqtt_client.publish(
+            "USER",
+            JSON.stringify({ userId: loadData?.authorId, count: 1 })
+          );
+        }
+
+        ComponentAdminGlobal_NotifikasiBerhasil(res2.message);
+        router.back();
+        setIsLoading(false);
+      } else {
+        ComponentAdminGlobal_NotifikasiGagal(res2.message);
+        setIsLoading(false);
+      }
+    } else {
+      ComponentAdminGlobal_NotifikasiGagal(res.message);
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <>
+      <Center>
+        <Paper p={"md"} w={{ base: 300, sm: 350, md: 400, lg: 500 }} bg={AdminColor.softBlue}>
+          <Center mb={"lg"}>
+            <Title c={AdminColor.white} order={5}>Form Pencairan Dana</Title>
+          </Center>
+          <Stack>
+            <TextInput
+              icon={<Text fw={"bold"}>Rp.</Text>}
+              styles={{ label: { color: AdminColor.white } }}
+              withAsterisk
+              placeholder="0"
+              label="Nominal"
+              maxLength={sisaDana.toLocaleString().length}
+              error={
+                isOver ? (
+                  <ComponentGlobal_ErrorInput text="Nominal melebihi sisa dana" />
+                ) : (
+                  ""
+                )
+              }
+              value={value.nilai}
+              onChange={(val) => {
+                const match = val.currentTarget.value
+                  .replace(/\./g, "")
+                  .match(/^[0-9]+$/);
+
+                if (val.currentTarget.value === "")
+                  return setValue({
+                    ...value,
+                    nilai: "",
+                  });
+
+                if (!match?.[0]) return null;
+
+                const nilai = val.currentTarget.value.replace(/\./g, "");
+                const target = Intl.NumberFormat("id-ID").format(+nilai);
+
+                if (+nilai > sisaDana) {
+                  setIsOver(true);
+                } else {
+                  setIsOver(false);
+                }
+                setNilaiNominal(+nilai);
+                setValue({
+                  ...value,
+                  nilai: target,
+                });
+              }}
+            />
+            <TextInput
+              styles={{ label: { color: AdminColor.white } }}
+              withAsterisk
+              placeholder="Masukan judul"
+              label="Judul"
+              maxLength={100}
+              onChange={(val: any) => {
+                setValue({
+                  ...value,
+                  title: val.target.value,
+                });
+              }}
+            />
+            <Stack spacing={5}>
+              <Textarea
+                styles={{ label: { color: AdminColor.white } }}
+                withAsterisk
+                placeholder="Masukan deskripsi"
+                label="Deskripsi"
+                maxLength={300}
+                autosize
+                minRows={3}
+                maxRows={5}
+                onChange={(val: any) => {
+                  setValue({
+                    ...value,
+                    deskripsi: val.target.value,
+                  });
+                }}
+              />
+
+              <ComponentGlobal_InputCountDown
+                lengthInput={value.deskripsi.length}
+                maxInput={300}
+              />
+            </Stack>
+
+            <ComponentDonasi_NotedBox informasi="Wajib menyertakan bukti transfer" />
+            <Stack>
+              <Center>
+                <FileButton
+                  onChange={async (files: any | null) => {
+                    try {
+                      const buffer = URL.createObjectURL(
+                        new Blob([new Uint8Array(await files.arrayBuffer())])
+                      );
+
+                      setImages(buffer);
+                      setFile(files);
+                    } catch (error) {
+                      console.log(error);
+                    }
+                  }}
+                  accept="image/png,image/jpeg"
+                >
+                  {(props) => (
+                    <Button
+                      {...props}
+                      radius={"xl"}
+                      variant="outline"
+                      w={150}
+                      leftIcon={<IconCamera />}
+                      compact
+                    >
+                      Upload
+                    </Button>
+                  )}
+                </FileButton>
+              </Center>
+              {images ? (
+                <AspectRatio ratio={9 / 16}>
+                  <Paper radius={"md"} withBorder>
+                    <Image alt="Foto" src={images} />
+                  </Paper>
+                </AspectRatio>
+              ) : (
+                ""
+              )}
+            </Stack>
+            <Button
+              loaderPosition="center"
+              loading={isLoading}
+              disabled={
+                _.values(value).includes("") || file === null || isOver
+                  ? true
+                  : false
+              }
+              style={{ transition: "0.5s" }}
+              radius={"xl"}
+              mt={"lg"}
+              onClick={() => onSave()}
+            >
+              Simpan
+            </Button>
+          </Stack>
+        </Paper>
+      </Center>
+    </>
+  );
+}
\ No newline at end of file