Revisi Tampilan Admin

# fix :
- Tampilan Donasi
# feat :
- Penambahan App Information
## No Issuee

src/app_modules/admin/donasi/detail/detail_reject.tsx

@@ -25,22 +25,26 @@ import { NotifBerhasil } from "@/app_modules/donasi/component/notifikasi/notif_b
 import { NotifGagal } from "@/app_modules/donasi/component/notifikasi/notif_gagal";
 import { AdminDonasi_getOneById } from "../fun/get/get_one_by_id";
 import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
+import ComponentGlobalAdmin_BackButton from "../../component_global/back_button";
+import ComponentAdminDonasi_TampilanDetailDonasi from "../component/tampilan_detail_donasi";
+import ComponentAdminDonasi_CeritaPenggalangDana from "../component/tampilan_detail_cerita";
 
 export default function AdminDonasi_DetailReject({
   dataReject,
 }: {
   dataReject: MODEL_DONASI;
 }) {
-  const [donasi, setDonasi] = useState(dataReject);
+  const [data, setData] = useState(dataReject);
 
   return (
     <>
       <Stack>
         <ButtonOnHeader
-          catatan={donasi.catatan}
-          donasiId={donasi.id}
-          setDonasi={setDonasi}
+          catatan={data.catatan}
+          donasiId={data.id}
+          setDonasi={setData}
         />
+          <CatatanReject catatan={data.catatan} />
         <SimpleGrid
           cols={2}
           spacing="lg"
@@ -50,8 +54,10 @@ export default function AdminDonasi_DetailReject({
             { maxWidth: "xs", cols: 1, spacing: "xs" },
           ]}
         >
-          <TampilanDetailDonasi donasi={donasi} />
-          <CatatanReject catatan={donasi.catatan} />
+          <ComponentAdminDonasi_TampilanDetailDonasi donasi={data} />
+          <ComponentAdminDonasi_CeritaPenggalangDana
+            cerita={data.CeritaDonasi}
+          />
         </SimpleGrid>
       </Stack>
     </>
@@ -88,12 +94,12 @@ function ButtonOnHeader({
     <>
       <Stack>
         <Group position="apart">
-          <ComponentAdminDonasi_TombolKembali />
+          <ComponentGlobalAdmin_BackButton />
           <Button radius={"xl"} bg={"orange"} color="orange" onClick={open}>
             Tambah catatan
           </Button>
         </Group>
-        <Divider />
+
       </Stack>
 
       <Modal
@@ -188,10 +194,12 @@ function TampilanDetailDonasi({ donasi }: { donasi: MODEL_DONASI }) {
 function CatatanReject({ catatan }: { catatan: string }) {
   return (
     <>
-      <Stack>
-        <Title order={6}>Alasan Penolakan</Title>
-        <Text>{catatan}</Text>
-      </Stack>
+      <Paper p={"md"} bg={"gray.1"}>
+        <Stack>
+          <Title order={5} >Alasan Penolakan :</Title>
+          <Text>{catatan}</Text>
+        </Stack>
+      </Paper>
     </>
   );
 }

src/app_modules/admin/donasi/detail/detail_review.tsx

@@ -1,44 +1,40 @@
 "use client";
 
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
+import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
+import {
+  MODEL_CERITA_DONASI,
+  MODEL_DONASI,
+} from "@/app_modules/donasi/model/interface";
 import {
   AspectRatio,
+  Box,
   Button,
   Divider,
   Group,
   Image,
   Modal,
   Paper,
-  Progress,
   SimpleGrid,
   Stack,
   Text,
-  TextInput,
   Textarea,
   Title,
 } from "@mantine/core";
-import ComponentAdminDonasi_TombolKembali from "../component/tombol_kembali";
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
-import {
-  MODEL_CERITA_DONASI,
-  MODEL_DONASI,
-} from "@/app_modules/donasi/model/interface";
-import { useState } from "react";
-import { useRouter } from "next/navigation";
 import { useDisclosure } from "@mantine/hooks";
-import { AdminDonasi_funUpdateStatusPublish } from "../fun/update/fun_status_publish";
-import { NotifBerhasil } from "@/app_modules/donasi/component/notifikasi/notif_berhasil";
-import { NotifPeringatan } from "@/app_modules/donasi/component/notifikasi/notif_peringatan";
-import toast from "react-simple-toasts";
-import { AdminDonasi_funUpdateStatusReject } from "../fun/update/fun_status_reject";
-import _ from "lodash";
-import { NotifGagal } from "@/app_modules/donasi/component/notifikasi/notif_gagal";
-import { ComponentGlobalAdmin_NotifikasiPeringatan } from "../../component/admin_notifikasi/notifikasi_peringatan";
-import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
-import { ComponentGlobalAdmin_NotifikasiBerhasil } from "../../component/admin_notifikasi/notifikasi_berhasil";
-import { ComponentGlobalAdmin_NotifikasiGagal } from "../../component/admin_notifikasi/notifikasi_gagal";
-import adminDonasi_getListReview from "../fun/get/get_list_review";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { ComponentGlobalAdmin_NotifikasiBerhasil } from "../../component_global/admin_notifikasi/notifikasi_berhasil";
+import { ComponentGlobalAdmin_NotifikasiGagal } from "../../component_global/admin_notifikasi/notifikasi_gagal";
+import { ComponentGlobalAdmin_NotifikasiPeringatan } from "../../component_global/admin_notifikasi/notifikasi_peringatan";
+import ComponentAdminDonasi_TombolKembali from "../component/tombol_kembali";
 import { AdminDonasi_getOneById } from "../fun/get/get_one_by_id";
+import { AdminDonasi_funUpdateStatusPublish } from "../fun/update/fun_status_publish";
+import { AdminDonasi_funUpdateStatusReject } from "../fun/update/fun_status_reject";
+import ComponentGlobalAdmin_BackButton from "../../component_global/back_button";
+import ComponentAdminDonasi_TampilanDetailDonasi from "../component/tampilan_detail_donasi";
+import ComponentAdminDonasi_CeritaPenggalangDana from "../component/tampilan_detail_cerita";
 
 export default function AdminDonasi_DetailReview({
   dataReview,
@@ -60,8 +56,10 @@ export default function AdminDonasi_DetailReview({
             { maxWidth: "xs", cols: 1, spacing: "xs" },
           ]}
         >
-          <TampilanDetailDonasi donasi={data} />
-          <CeritaPenggalangDana cerita={data.CeritaDonasi} />
+          <ComponentAdminDonasi_TampilanDetailDonasi donasi={data} />
+          <ComponentAdminDonasi_CeritaPenggalangDana
+            cerita={data.CeritaDonasi}
+          />
         </SimpleGrid>
       </Stack>
     </>
@@ -124,7 +122,7 @@ function ButtonOnHeader({
   return (
     <>
       <Group position="apart">
-        <ComponentAdminDonasi_TombolKembali />
+        <ComponentGlobalAdmin_BackButton />
         {donasi.donasiMaster_StatusDonasiId === "2" ? (
           <Group>
             <Button
@@ -143,7 +141,7 @@ function ButtonOnHeader({
           ""
         )}
       </Group>
-      <Divider />
+      {/* <Divider /> */}
 
       <Modal
         opened={opened}
@@ -193,64 +191,4 @@ function ButtonOnHeader({
   );
 }
 
-function TampilanDetailDonasi({ donasi }: { donasi: MODEL_DONASI }) {
-  return (
-    <>
-      <Paper radius={"md"} p={"md"}>
-        <Stack>
-          <Stack>
-            <AspectRatio ratio={16 / 9}>
-              <Paper radius={"md"}>
-                <Image
-                  alt="Foto"
-                  src={RouterDonasi.api_gambar + `${donasi.imagesId}`}
-                />
-              </Paper>
-            </AspectRatio>
-            <Stack spacing={0}>
-              <Title order={4}>{donasi.title}</Title>
-              <Text fz={"xs"}>
-                Durasi: {donasi.DonasiMaster_Durasi.name} hari
-              </Text>
-            </Stack>
 
-            <Stack spacing={0}>
-              <Group>
-                <Text fz={12}>Dana dibutuhkan</Text>
-                <Title order={4} c="blue">
-                  <TampilanRupiahDonasi nominal={+donasi.target} />
-                </Title>
-              </Group>
-              <Group>
-                <Text fz={12}>Kategori</Text>
-                <Title order={4} c="blue">
-                  {donasi.DonasiMaster_Ketegori.name}
-                </Title>
-              </Group>
-            </Stack>
-          </Stack>
-        </Stack>
-      </Paper>
-    </>
-  );
-}
-
-function CeritaPenggalangDana({ cerita }: { cerita: MODEL_CERITA_DONASI }) {
-  return (
-    <>
-      <Stack>
-        <Title order={5}>Cerita Penggalang Dana</Title>
-        <Text>{cerita.pembukaan}</Text>
-        <AspectRatio ratio={16 / 9}>
-          <Paper radius={"md"}>
-            <Image
-              alt="Foto"
-              src={RouterDonasi.api_gambar_cerita + `${cerita.imagesId}`}
-            />
-          </Paper>
-        </AspectRatio>
-        <Text>{cerita.cerita}</Text>
-      </Stack>
-    </>
-  );
-}

src/app_modules/admin/donasi/detail/publish/detail_publish.tsx

@@ -43,18 +43,18 @@ import {
 import { useState } from "react";
 import { RouterAdminDonasi_OLD } from "@/app/lib/router_hipmi/router_admin";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
-import _ from "lodash";
+import _, { toNumber } from "lodash";
 import { useRouter } from "next/navigation";
 import { useDisclosure, useInterval, useShallowEffect } from "@mantine/hooks";
 import { Donasi_getOneById } from "@/app_modules/donasi/fun/get/get_one_donasi_by_id";
 import { AdminDonasi_getOneById } from "../../fun/get/get_one_by_id";
-import ComponentGlobalAdmin_BackButton from "@/app_modules/admin/component/back_button";
+import ComponentGlobalAdmin_BackButton from "@/app_modules/admin/component_global/back_button";
 import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
 import { adminDonasi_getListDonatur } from "../../fun/get/get_list_donatur_by_id";
 import { RouterAdminDonasi } from "@/app/lib/router_admin/router_admin_donasi";
 import adminDonasi_funUpdateStatusDanTotal from "../../fun/update/fun_update_status_dan_total";
-import { ComponentGlobalAdmin_NotifikasiBerhasil } from "@/app_modules/admin/component/admin_notifikasi/notifikasi_berhasil";
-import { ComponentGlobalAdmin_NotifikasiGagal } from "@/app_modules/admin/component/admin_notifikasi/notifikasi_gagal";
+import { ComponentGlobalAdmin_NotifikasiBerhasil } from "@/app_modules/admin/component_global/admin_notifikasi/notifikasi_berhasil";
+import { ComponentGlobalAdmin_NotifikasiGagal } from "@/app_modules/admin/component_global/admin_notifikasi/notifikasi_gagal";
 
 export default function AdminDonasi_DetailPublish({
   dataPublish,
@@ -130,37 +130,37 @@ function TampilanDetailDonasi({
                   // mah={500}
                   // mx={"auto"}
                   alt="Foto"
-                  src={RouterDonasi.api_gambar + `${donasi.imagesId}`}
+                  src={RouterDonasi.api_gambar + `${donasi?.imagesId}`}
                 />
               </AspectRatio>
             </Paper>
 
             <Paper withBorder p={"sm"}>
               <Stack spacing={5}>
-                <Title order={4}>{donasi.title}</Title>
+                <Title order={4}>{donasi?.title}</Title>
                 <Group>
                   <Text fz={"xs"}>Penggalang Dana</Text>
                   <Title order={5} c="blue">
-                    {donasi.Author.username}
+                    {donasi?.Author.username}
                   </Title>
                 </Group>
                 <Group>
                   <Text fz={12}>Durasi</Text>
                   <Title order={5} c="blue">
-                    {donasi.DonasiMaster_Durasi.name} hari
+                    {donasi?.DonasiMaster_Durasi.name} hari
                   </Title>
                 </Group>
 
                 <Group>
                   <Text fz={12}>Dana dibutuhkan</Text>
                   <Title order={5} c="blue">
-                    <TampilanRupiahDonasi nominal={+donasi.target} />
+                    <TampilanRupiahDonasi nominal={+donasi?.target} />
                   </Title>
                 </Group>
                 <Group>
                   <Text fz={12}>Kategori</Text>
                   <Title order={5} c="blue">
-                    {donasi.DonasiMaster_Ketegori.name}
+                    {donasi?.DonasiMaster_Ketegori?.name}
                   </Title>
                 </Group>
                 <Group>
@@ -172,13 +172,13 @@ function TampilanDetailDonasi({
                 <Group>
                   <Text fz={12}>Progres</Text>
                   <Title order={5} c="blue">
-                    {donasi.progres} %
+                    {toNumber(donasi.progres).toFixed(2)} %
                   </Title>
                 </Group>
                 <Group>
                   <Text fz={12}>Dana terkumpul</Text>
                   <Title order={5} c="blue">
-                    <TampilanRupiahDonasi nominal={+donasi.terkumpul} />
+                    <TampilanRupiahDonasi nominal={+donasi?.terkumpul} />
                   </Title>
                 </Group>
                 {/* <Button w={200} bg={"green.5"} color="green">Pencairan Dana</Button> */}
@@ -196,7 +196,7 @@ function TampilanDetailDonasi({
                       <Text fz={"xs"}>Total Dana Dicairkan</Text>
                       <Title>
                         <TampilanRupiahDonasi
-                          nominal={donasi.totalPencairan}
+                          nominal={donasi?.totalPencairan}
                           fontSize={14}
                         />
                       </Title>
@@ -205,7 +205,7 @@ function TampilanDetailDonasi({
                   <Grid.Col span={"auto"}>
                     <Stack spacing={0}>
                       <Text fz={"xs"}>Bank Tujuan</Text>
-                      <Title order={6}>{donasi.namaBank}</Title>
+                      <Title order={6}>{donasi?.namaBank}</Title>
                     </Stack>
                   </Grid.Col>
                 </Grid>
@@ -213,13 +213,13 @@ function TampilanDetailDonasi({
                   <Grid.Col span={"auto"}>
                     <Stack spacing={0}>
                       <Text fz={"xs"}>Akumulasi Pencairan</Text>
-                      <Title order={6}>{donasi.akumulasiPencairan} Kali</Title>
+                      <Title order={6}>{donasi?.akumulasiPencairan} Kali</Title>
                     </Stack>
                   </Grid.Col>
                   <Grid.Col span={"auto"}>
                     <Stack spacing={0}>
                       <Text fz={"xs"}>Nomor Rekening</Text>
-                      <Title order={6}>{donasi.rekening}</Title>
+                      <Title order={6}>{donasi?.rekening}</Title>
                     </Stack>
                   </Grid.Col>
                 </Grid>
@@ -228,7 +228,7 @@ function TampilanDetailDonasi({
                   radius={"xl"}
                   onClick={() =>
                     router.push(
-                      RouterAdminDonasi_OLD.pencairan_dana + `${donasi.id}`
+                      RouterAdminDonasi_OLD.pencairan_dana + `${donasi?.id}`
                     )
                   }
                 >
@@ -569,17 +569,25 @@ function TampilanListPencairan({
 }: {
   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 = pencairan.map((e) => (
+  const rowTable = data.map((e) => (
     <tr key={e.id}>
       <td>
-        <TampilanRupiahDonasi nominal={e.nominalCair} />
+        <Center>
+          <TampilanRupiahDonasi nominal={e.nominalCair} />
+        </Center>
       </td>
-      <td>{moment(e.createdAt).format("ll")}</td>
       <td>
-        <Text>{e.title}</Text>
+        <Center>{moment(e.createdAt).format("ll")}</Center>
+      </td>
+      <td>
+        <Center>
+          <Text>{e.title}</Text>
+        </Center>
       </td>
       <td width={500}>
         <Box w={"100%"}>
@@ -589,42 +597,119 @@ function TampilanListPencairan({
         </Box>
       </td>
       <td>
-        {
-          <Box>
-            <Center>
-              <Button
-                radius={"xl"}
-                compact
-                bg={"green"}
-                color="green"
-                onClick={() => {
-                  open();
-                  setGambarId(e.imagesId);
-                }}
-              >
-                Detail
-              </Button>
-            </Center>
-          </Box>
-        }
+        <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>
+      {/* <Modal opened={opened} onClose={close} centered>
         <AspectRatio ratio={9 / 16}>
           <Image
             src={RouterDonasi.api_gambar_pencairan + `${gambarId}`}
             alt="Foto"
           />
         </AspectRatio>
-      </Modal>
+      </Modal> */}
 
-      <Stack p={"md"}>
+      {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
+
+      <Stack spacing={"xs"} h={"100%"}>
+        <Group
+          position="apart"
+          bg={"gray.4"}
+          p={"xs"}
+          style={{ borderRadius: "6px" }}
+        >
+          <Title order={4}>Rincian Pencairan Dana</Title>
+          <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>
+        </Group>
+
+        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+          <ScrollArea w={"100%"} h={"90%"}>
+            <Table
+              verticalSpacing={"xl"}
+              horizontalSpacing={"md"}
+              p={"md"}
+              w={1500}
+              striped
+              highlightOnHover
+            >
+              <thead>
+                <tr>
+                  <th>
+                    <Center>Nominal</Center>
+                  </th>
+                  <th>
+                    <Center>Tanggal</Center>
+                  </th>
+                  <th>
+                    <Center>Judul</Center>
+                  </th>
+                  <th>Deskripsi</th>
+                  <th>
+                    <Center>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>
-        {/* <pre>{JSON.stringify(pencairan, null, 2)}</pre> */}
         {_.isEmpty(pencairan) ? (
           <Paper bg={"gray.1"} p={"xs"}>
             <Center>BELUM ADA PENCAIRAN DANA</Center>
@@ -649,7 +734,7 @@ function TampilanListPencairan({
             </Table>
           </Paper>
         )}
-      </Stack>
+      </Stack> */}
     </>
   );
 }

src/app_modules/admin/donasi/detail/publish/pencairan_dana.tsx

@@ -1,36 +1,115 @@
 "use client";
 
+import ComponentAdminGlobal_TampilanRupiahDonasi from "@/app_modules/admin/component_global/tampilan_rupiah";
+import ComponentDonasi_NotedBox from "@/app_modules/donasi/component/noted_box";
+import { NotifBerhasil } from "@/app_modules/donasi/component/notifikasi/notif_berhasil";
+import { NotifGagal } from "@/app_modules/donasi/component/notifikasi/notif_gagal";
+import { NotifPeringatan } from "@/app_modules/donasi/component/notifikasi/notif_peringatan";
 import {
   AspectRatio,
   Button,
   Center,
   FileButton,
   Image,
-  NumberInput,
   Paper,
   Stack,
+  Text,
   TextInput,
   Textarea,
   Title,
 } from "@mantine/core";
-import ComponentAdminDonasi_TombolKembali from "../../component/tombol_kembali";
-import { useState } from "react";
 import { IconCamera } from "@tabler/icons-react";
-import ComponentDonasi_NotedBox from "@/app_modules/donasi/component/noted_box";
-import { useRouter } from "next/navigation";
+import _, { toNumber } from "lodash";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { MODEL_DONASI_PENCAIRAN_DANA } from "@/app_modules/donasi/model/interface";
-import _ from "lodash";
-import { NotifPeringatan } from "@/app_modules/donasi/component/notifikasi/notif_peringatan";
+import { 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 { NotifBerhasil } from "@/app_modules/donasi/component/notifikasi/notif_berhasil";
-import { NotifGagal } from "@/app_modules/donasi/component/notifikasi/notif_gagal";
 import { AdminDonasi_AkumulasiPencairanById } from "../../fun/update/fun_update_akumulasi_pencairan";
+import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
+import { ComponentGlobalAdmin_NotifikasiPeringatan } from "@/app_modules/admin/component_global/admin_notifikasi/notifikasi_peringatan";
+import { ComponentGlobalAdmin_NotifikasiBerhasil } from "@/app_modules/admin/component_global/admin_notifikasi/notifikasi_berhasil";
+import { ComponentGlobalAdmin_NotifikasiGagal } from "@/app_modules/admin/component_global/admin_notifikasi/notifikasi_gagal";
+import { AdminDonasi_getOneById } from "../../fun/get/get_one_by_id";
 
 export default function AdminDonasi_PencairanDana({
   donasiId,
+  danaTerkumpul,
+  totalPencairan,
 }: {
   donasiId: string;
+  danaTerkumpul: string;
+  totalPencairan: number;
+}) {
+  const [terkumpul, setTerkumpul] = useState(danaTerkumpul);
+  const [total, setTotal] = useState(totalPencairan);
+
+  return (
+    <>
+      <Stack>
+        <ComponentAdminDonasi_TombolKembali />
+        <TotalDanaView danaTerkumpul={terkumpul} totalPencairan={total} />
+        <FormView
+          danaTerkumpul={terkumpul}
+          donasiId={donasiId}
+          totalPencairan={total}
+          onSuccess={(val) => {
+            setTerkumpul(val.terkumpul);
+            setTotal(val.totalPencairan);
+            console.log(val)
+          }}
+        />
+      </Stack>
+    </>
+  );
+}
+
+function TotalDanaView({
+  danaTerkumpul,
+  totalPencairan,
+}: {
+  danaTerkumpul: string;
+  totalPencairan: number;
+}) {
+  const terkumpul = toNumber(danaTerkumpul);
+  const sisaDana = terkumpul - totalPencairan;
+
+  return (
+    <>
+      <Center>
+        <Paper
+          p={"md"}
+          w={{ base: 200, sm: 200, md: 300, lg: 400 }}
+          withBorder
+          bg={"gray.2"}
+        >
+          <Stack spacing={0} align="center">
+            <Text 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);
@@ -40,136 +119,197 @@ export default function AdminDonasi_PencairanDana({
     deskripsi: "",
     nilai: "",
   });
+  const [nilaiNominal, setNilaiNominal] = useState(0);
+  const [isOver, setIsOver] = useState(false);
+
+  const terkumpul = toNumber(danaTerkumpul);
+  const sisaDana = terkumpul - totalPencairan;
+
   return (
     <>
-      <Stack>
-        <ComponentAdminDonasi_TombolKembali />
-        <Center>
-          <Paper
-            p={"md"}
-            w={{ base: 200, sm: 200, md: 300, lg: 400 }}
-            withBorder
-          >
-            <Center mb={"lg"}>
-              <Title order={5}>Form Pencairan Dana</Title>
-            </Center>
-            <Stack>
-              <TextInput
-                withAsterisk
-                type="number"
-                placeholder="Masukan jumlah nominal"
-                label="Nominal"
-                onChange={(val) => {
-                  setValue({
-                    ...value,
-                    nilai: val.target.value,
-                  });
-                }}
-              />
-              <TextInput
-                withAsterisk
-                placeholder="Masukan judul"
-                label="Judul"
-                onChange={(val: any) => {
-                  setValue({
-                    ...value,
-                    title: val.target.value,
-                  });
-                }}
-              />
-              <Textarea
-                withAsterisk
-                placeholder="Masukan deskripsi"
-                label="Deskripsi"
-                onChange={(val: any) => {
-                  setValue({
-                    ...value,
-                    deskripsi: val.target.value,
-                  });
-                }}
-              />
-
-              <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())])
-                        );
-                        // console.log(buffer, "ini buffer");
-                        // console.log(files, " ini file");
-                        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>
+      <Center>
+        <Paper p={"md"} w={{ base: 200, sm: 200, md: 300, lg: 400 }} withBorder>
+          <Center mb={"lg"}>
+            <Title order={5}>Form Pencairan Dana</Title>
+          </Center>
+          <Stack>
+            <TextInput
+              icon={<Text fw={"bold"}>Rp.</Text>}
+              withAsterisk
+              placeholder="0"
+              label="Nominal"
+              maxLength={sisaDana.toLocaleString().length}
+              error={
+                isOver ? (
+                  <ComponentGlobal_ErrorInput text="Nominal melebihi sisa dana" />
                 ) : (
                   ""
-                )}
-              </Stack>
-              <Button
-                radius={"xl"}
-                mt={"lg"}
-                onClick={
-                  () => onSave(router, value, donasiId, file as any)
-                  // console.log(value)
+                )
+              }
+              value={value.nilai}
+              onChange={(val) => {
+                // const nilai = val.currentTarget.value;
+                // const nilaiTypeNumber = toNumber(val.currentTarget.value);
+
+                // if (nilaiTypeNumber > sisaDana) {
+                //   console.log("lebih");
+                // } else {
+                //   console.log("kurang");
+                // }
+
+                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);
                 }
-              >
-                Simpan
-              </Button>
+                setNilaiNominal(+nilai);
+                setValue({
+                  ...value,
+                  nilai: target,
+                });
+              }}
+            />
+            <TextInput
+              withAsterisk
+              placeholder="Masukan judul"
+              label="Judul"
+              maxLength={100}
+              onChange={(val: any) => {
+                setValue({
+                  ...value,
+                  title: val.target.value,
+                });
+              }}
+            />
+            <Textarea
+              withAsterisk
+              placeholder="Masukan deskripsi"
+              label="Deskripsi"
+              maxLength={300}
+              onChange={(val: any) => {
+                setValue({
+                  ...value,
+                  deskripsi: val.target.value,
+                });
+              }}
+            />
+
+            <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())])
+                      );
+                      // console.log(buffer, "ini buffer");
+                      // console.log(files, " ini file");
+                      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>
-          </Paper>
-        </Center>
-      </Stack>
+            <Button
+              disabled={
+                _.values(value).includes("") || file === null || isOver
+                  ? true
+                  : false
+              }
+              style={{ transition: "0.5s" }}
+              radius={"xl"}
+              mt={"lg"}
+              onClick={() =>
+                onSave({
+                  router: router,
+                  value: value,
+                  donasiId: donasiId,
+                  file: file as any,
+                  nilaiNominal: nilaiNominal,
+                  onSuccess1: (val: any) => onSuccess(val),
+                })
+              }
+            >
+              Simpan
+            </Button>
+          </Stack>
+        </Paper>
+      </Center>
     </>
   );
 }
 
-async function onSave(
-  router: AppRouterInstance,
-  value: any,
-  donasiId: string,
-  file: FormData
-) {
+async function onSave({
+  router,
+  value,
+  donasiId,
+  file,
+  nilaiNominal,
+
+  onSuccess1,
+}: {
+  router: AppRouterInstance;
+  value: any;
+  donasiId: string;
+  file: FormData;
+  nilaiNominal: number;
+  onSuccess1: (val: any) => void;
+}) {
   const body = {
     donasiId: donasiId,
-    nominalCair: value.nilai,
+    nominalCair: nilaiNominal,
     title: value.title,
     deskripsi: value.deskripsi,
   };
 
-  //   console.log(body);
-
-  if (_.values(body).includes("")) return NotifPeringatan("Lengkapi Data");
-  if (!file) return NotifPeringatan("Lampirkan Bukti Transfer");
+  if (_.values(body).includes(""))
+    return ComponentGlobalAdmin_NotifikasiPeringatan("Lengkapi Data");
+  if (!file)
+    return ComponentGlobalAdmin_NotifikasiPeringatan(
+      "Lampirkan Bukti Transfer"
+    );
 
   const gambar = new FormData();
   gambar.append("file", file as any);
@@ -180,12 +320,13 @@ async function onSave(
         await AdminDonasi_AkumulasiPencairanById(
           body.donasiId as any,
           body.nominalCair as any
-        ).then((res) => {
+        ).then(async (res) => {
           if (res.status === 200) {
-            NotifBerhasil(res.message);
-            router.back();
+            const loadData = await AdminDonasi_getOneById(donasiId);
+            onSuccess1(loadData);
+            ComponentGlobalAdmin_NotifikasiBerhasil(res.message);
           } else {
-            NotifGagal(res.message);
+            ComponentGlobalAdmin_NotifikasiGagal(res.message);
           }
         });
       } else {