Merge pull request #121 from bipproduction/admin/donasi/image

Fix: admin donasi

src/app/dev/donasi/proses_donasi/invoice/[id]/page.tsx

@@ -5,6 +5,5 @@ export default async function Page({ params }: { params: { id: string } }) {
   let invoiceId = params.id;
   const dataInvoice = await Donasi_getOneInvoiceById(invoiceId);
 
-
   return <Donasi_InvoiceProses dataInvoice={dataInvoice as any} />;
 }

src/app/lib/id-derectory.ts

@@ -17,6 +17,7 @@ const DIRECTORY_ID = {
   donasi_cerita_image: "cm2dvy9bi007v10dpmatb5yiy",
   donasi_kabar: "cm2dvxo48007t10dpmmustxa2",
   donasi_bukti_transfer: "cm0yk1pmh000h10njhi6m8b8t",
+  donasi_bukti_trf_pencairan_dana: "cm32s7h1q005yb5kuf5uiv5de",
 
   // Job
   job_image: "cm0ypp6zl0003kp7jf59zuvjy",

src/app_modules/_global/component/comp_tampilan_rupiah.tsx

@@ -1,4 +1,3 @@
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import { Text } from "@mantine/core";
 
 export default function ComponentGlobal_TampilanRupiah({

src/app_modules/admin/_admin_global/_component/comp_admin_modal_report.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Modal, Stack, Textarea, Group, Button } from "@mantine/core";
+import { Group, Modal, Stack, Textarea } from "@mantine/core";
 import React from "react";
 
 export function Admin_ComponentModalReport({
@@ -10,13 +10,17 @@ export function Admin_ComponentModalReport({
   onHandlerChange,
   buttonKanan,
   buttonKiri,
+  cekInputKarakter,
+  value,
 }: {
   opened: any;
   onClose: () => void;
   title: string;
-  onHandlerChange: (val: any) => void;
+  onHandlerChange: (val: React.ChangeEvent<HTMLTextAreaElement>) => void;
   buttonKanan: React.ReactNode;
   buttonKiri: React.ReactNode;
+  cekInputKarakter?: React.ReactNode;
+  value?: string;
 }) {
   return (
     <>
@@ -29,13 +33,18 @@ export function Admin_ComponentModalReport({
         withCloseButton={false}
       >
         <Stack>
-          <Textarea
+          <Stack spacing={"xs"}>
-            autosize
+            <Textarea
-            minRows={3}
+              autosize
-            maxRows={5}
+              value={value}
-            placeholder="Masukan alasan penolakan"
+              minRows={3}
-            onChange={onHandlerChange}
+              maxRows={5}
-          />
+              placeholder="Masukan alasan penolakan"
+              onChange={onHandlerChange}
+            />
+            {cekInputKarakter && cekInputKarakter}
+          </Stack>
+
           <Group position="right">
             {buttonKiri}
             {buttonKanan}

src/app_modules/admin/donasi/component/tampilan_detail_cerita.tsx

@@ -3,6 +3,7 @@
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { MODEL_CERITA_DONASI } from "@/app_modules/donasi/model/interface";
 import { Paper, Stack, Title, Box, AspectRatio, Image, Text } from "@mantine/core";
+import { Admin_ComponentLoadImageLandscape } from "../../_admin_global";
 
 export default function ComponentAdminDonasi_CeritaPenggalangDana({
   cerita,
@@ -18,12 +19,7 @@ export default function ComponentAdminDonasi_CeritaPenggalangDana({
           <Text>{cerita.pembukaan}</Text>
 
           <Box>
-            <AspectRatio ratio={16 / 9} mah={300} mx={"auto"}>
+            <Admin_ComponentLoadImageLandscape fileId={cerita.imageId} />
-              <Image
-                alt="Gambar_cerita"
-                src={RouterDonasi.api_gambar_cerita + `${cerita.imagesId}`}
-              />
-            </AspectRatio>
           </Box>
 
           <Text>{cerita.cerita}</Text>

src/app_modules/admin/donasi/component/tampilan_detail_donasi.tsx

@@ -1,11 +1,27 @@
-"use client"
+"use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
-import { Paper, Stack, Title, Box, AspectRatio, Group, Image, Text } from "@mantine/core";
+import {
+  Paper,
+  Stack,
+  Title,
+  Box,
+  AspectRatio,
+  Group,
+  Image,
+  Text,
+} from "@mantine/core";
+import { Admin_ComponentLoadImageLandscape } from "../../_admin_global";
+import ComponentAdminGlobal_TampilanRupiahDonasi from "../../_admin_global/tampilan_rupiah";
+import { ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
 
-export default function ComponentAdminDonasi_TampilanDetailDonasi({ donasi }: { donasi: MODEL_DONASI }) {
+export default function ComponentAdminDonasi_TampilanDetailDonasi({
+  donasi,
+}: {
+  donasi: MODEL_DONASI;
+}) {
   return (
     <>
       <Paper radius={"md"} p={"md"} withBorder>
@@ -13,12 +29,7 @@ export default function ComponentAdminDonasi_TampilanDetailDonasi({ donasi }: {
           <Title order={5}>Detail Data Donasi</Title>
           <Stack>
             <Box>
-              <AspectRatio ratio={1 / 1} mah={300} mx={"auto"}>
+              <Admin_ComponentLoadImageLandscape fileId={donasi.imageId} />
-                <Image
-                  alt="Foto"
-                  src={RouterDonasi.api_gambar + `${donasi.imagesId}`}
-                />
-              </AspectRatio>
             </Box>
 
             <Stack spacing={0}>
@@ -32,7 +43,10 @@ export default function ComponentAdminDonasi_TampilanDetailDonasi({ donasi }: {
               <Group>
                 <Text fz={12}>Dana dibutuhkan</Text>
                 <Title order={4} c="blue">
-                  <TampilanRupiahDonasi nominal={+donasi.target} />
+                  <ComponentGlobal_TampilanRupiah
+                    color="black"
+                    nominal={+donasi.target}
+                  />
                 </Title>
               </Group>
               <Group>

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

@@ -18,7 +18,7 @@ import {
   Title,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { useState } from "react";
+import React, { useState } from "react";
 import { ComponentAdminGlobal_NotifikasiBerhasil } from "../../_admin_global/admin_notifikasi/notifikasi_berhasil";
 import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
 import ComponentAdminDonasi_CeritaPenggalangDana from "../component/tampilan_detail_cerita";
@@ -26,6 +26,7 @@ import ComponentAdminDonasi_TampilanDetailDonasi from "../component/tampilan_det
 import { AdminDonasi_getOneById } from "../fun/get/get_one_by_id";
 import { AdminDonasi_funUpdateCatatanReject } from "../fun/update/fun_update_catatan_reject";
 import { ComponentAdminGlobal_NotifikasiGagal } from "../../_admin_global/admin_notifikasi/notifikasi_gagal";
+import { Admin_ComponentModalReport } from "../../_admin_global/_component";
 
 export default function AdminDonasi_DetailReject({
   dataReject,
@@ -72,20 +73,19 @@ function ButtonOnHeader({
   setDonasi: any;
 }) {
   const [report, setReport] = useState(catatan);
-  const [opened, { open, close }] = useDisclosure(false);
+  const [opened, setOpened] = useState(false);
+  const [isLoading, setLoading] = useState(false);
 
   async function onUpdate() {
-    await AdminDonasi_funUpdateCatatanReject(donasiId, report).then(
+    const res = await AdminDonasi_funUpdateCatatanReject(donasiId, report);
-      async (res) => {
+    if (res.status === 200) {
-        if (res.status === 200) {
+      setLoading(true);
-          ComponentAdminGlobal_NotifikasiBerhasil(res.message);
+      ComponentAdminGlobal_NotifikasiBerhasil(res.message);
-          close();
+      setOpened(false);
-          await AdminDonasi_getOneById(donasiId).then((res) => setDonasi(res));
+      await AdminDonasi_getOneById(donasiId).then((res) => setDonasi(res));
-        } else {
+    } else {
-          ComponentAdminGlobal_NotifikasiGagal(res.message);
+      ComponentAdminGlobal_NotifikasiGagal(res.message);
-        }
+    }
-      }
-    );
   }
 
   return (
@@ -93,13 +93,62 @@ function ButtonOnHeader({
       <Stack>
         <Group position="apart">
           <AdminGlobal_ComponentBackButton />
-          <Button radius={"xl"} bg={"orange"} color="orange" onClick={open}>
+          <Button
+            radius={"xl"}
+            bg={"orange"}
+            color="orange"
+            onClick={() => setOpened(true)}
+          >
             Tambah catatan
           </Button>
         </Group>
       </Stack>
 
-      <Modal
+      <Admin_ComponentModalReport
+        opened={opened}
+        onClose={() => setOpened(false)}
+        title="Tambah catatan"
+        value={report}
+        onHandlerChange={(val: React.ChangeEvent<HTMLTextAreaElement>) =>
+          setReport(val.target.value)
+        }
+        buttonKanan={
+          <>
+            <Button
+              loaderPosition="center"
+              loading={isLoading}
+              radius={"xl"}
+              onClick={() => {
+                onUpdate();
+              }}
+            >
+              Simpan
+            </Button>
+          </>
+        }
+        buttonKiri={
+          <>
+            <Button
+              radius={"xl"}
+              onClick={() => {
+                close();
+              }}
+            >
+              Batal
+            </Button>
+          </>
+        }
+        cekInputKarakter={
+          <>
+            <ComponentGlobal_InputCountDown
+              maxInput={300}
+              lengthInput={report.length}
+            />
+          </>
+        }
+      />
+
+      {/* <Modal
         opened={opened}
         onClose={close}
         centered
@@ -117,73 +166,10 @@ function ButtonOnHeader({
             value={report}
             onChange={(val) => setReport(val.target.value)}
           />
-          <ComponentGlobal_InputCountDown
-            maxInput={300}
-            lengthInput={report.length}
-          />
 
-          <Group position="right">
+          <Group position="right"></Group>
-            <Button
-              radius={"xl"}
-              onClick={() => {
-                close();
-              }}
-            >
-              Batal
-            </Button>
-            <Button
-              radius={"xl"}
-              onClick={() => {
-                onUpdate();
-              }}
-            >
-              Simpan
-            </Button>
-          </Group>
         </Stack>
-      </Modal>
+      </Modal> */}
-    </>
-  );
-}
-
-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>
     </>
   );
 }

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

@@ -1,26 +1,15 @@
 "use client";
 
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
-import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
+import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
+import mqtt_client from "@/util/mqtt_client";
 import {
-  MODEL_CERITA_DONASI,
-  MODEL_DONASI,
-} from "@/app_modules/donasi/model/interface";
-import {
-  AspectRatio,
-  Box,
   Button,
-  Divider,
   Group,
-  Image,
   Modal,
-  Paper,
   SimpleGrid,
   Stack,
-  Text,
   Textarea,
-  Title,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
@@ -28,15 +17,14 @@ import { useState } from "react";
 import { ComponentAdminGlobal_NotifikasiBerhasil } from "../../_admin_global/admin_notifikasi/notifikasi_berhasil";
 import { ComponentAdminGlobal_NotifikasiGagal } from "../../_admin_global/admin_notifikasi/notifikasi_gagal";
 import { ComponentAdminGlobal_NotifikasiPeringatan } from "../../_admin_global/admin_notifikasi/notifikasi_peringatan";
-import ComponentAdminDonasi_TombolKembali from "../component/tombol_kembali";
+import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
+import adminNotifikasi_funCreateToUser from "../../notifikasi/fun/create/fun_create_notif_user";
+import ComponentAdminDonasi_CeritaPenggalangDana from "../component/tampilan_detail_cerita";
+import ComponentAdminDonasi_TampilanDetailDonasi from "../component/tampilan_detail_donasi";
 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 AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
+import { Admin_ComponentModalReport } from "../../_admin_global/_component";
-import ComponentAdminDonasi_TampilanDetailDonasi from "../component/tampilan_detail_donasi";
-import ComponentAdminDonasi_CeritaPenggalangDana from "../component/tampilan_detail_cerita";
-import mqtt_client from "@/util/mqtt_client";
-import adminNotifikasi_funCreateToUser from "../../notifikasi/fun/create/fun_create_notif_user";
 
 export default function AdminDonasi_DetailReview({
   dataReview,
@@ -180,7 +168,48 @@ function ButtonOnHeader({
       </Group>
       {/* <Divider /> */}
 
-      <Modal
+      <Admin_ComponentModalReport
+        opened={opened}
+        onClose={close}
+        title={"Alasan penolakan"}
+        onHandlerChange={(val: any) => setCatatan(val.target.value)}
+        buttonKiri={
+          <>
+            <Button
+              radius={"xl"}
+              onClick={() => {
+                close();
+              }}
+            >
+              Batal
+            </Button>
+          </>
+        }
+        buttonKanan={
+          <>
+            <Button
+              loaderPosition="center"
+              loading={isLoadingReject ? true : false}
+              radius={"xl"}
+              onClick={() => {
+                onReject();
+              }}
+            >
+              Simpan
+            </Button>
+          </>
+        }
+        cekInputKarakter={
+          <>
+            <ComponentGlobal_InputCountDown
+              maxInput={300}
+              lengthInput={catatan.length}
+            />
+          </>
+        }
+      />
+
+      {/* <Modal
         opened={opened}
         onClose={close}
         centered
@@ -202,28 +231,9 @@ function ButtonOnHeader({
             lengthInput={catatan.length}
           />
 
-          <Group position="right">
+          <Group position="right"></Group>
-            <Button
-              radius={"xl"}
-              onClick={() => {
-                close();
-              }}
-            >
-              Batal
-            </Button>
-            <Button
-              loaderPosition="center"
-              loading={isLoadingReject ? true : false}
-              radius={"xl"}
-              onClick={() => {
-                onReject();
-              }}
-            >
-              Simpan
-            </Button>
-          </Group>
         </Stack>
-      </Modal>
+      </Modal> */}
     </>
   );
 }

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

@@ -1,20 +1,33 @@
 "use client";
 
+import { RouterAdminGlobal } from "@/app/lib";
+import { RouterAdminDonasi } from "@/app/lib/router_admin/router_admin_donasi";
+import { RouterAdminDonasi_OLD } from "@/app/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,
-  AspectRatio,
   Badge,
   Box,
   Button,
   Center,
-  Divider,
   Grid,
   Group,
-  Image,
   Modal,
   Pagination,
   Paper,
-  Progress,
   ScrollArea,
   Select,
   SimpleGrid,
@@ -25,38 +38,15 @@ import {
   TextInput,
   Title,
 } from "@mantine/core";
-import ComponentAdminDonasi_TombolKembali from "../../component/tombol_kembali";
+import { useDisclosure } from "@mantine/hooks";
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { IconReload } from "@tabler/icons-react";
-import {
-  IconClover,
-  IconMessageChatbot,
-  IconMoneybag,
-  IconReload,
-} from "@tabler/icons-react";
-import router from "next/router";
-import moment from "moment";
-import {
-  MODEL_DONASI,
-  MODEL_DONASI_INVOICE,
-  MODEL_DONASI_PENCAIRAN_DANA,
-} from "@/app_modules/donasi/model/interface";
-import { useState } from "react";
-import { RouterAdminDonasi_OLD } from "@/app/lib/router_hipmi/router_admin";
-import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import _, { toNumber } from "lodash";
+import moment from "moment";
 import { useRouter } from "next/navigation";
-import { useDisclosure, useInterval, useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
-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 AdminGlobal_ComponentBackButton from "@/app_modules/admin/_admin_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_getOneById } from "../../fun/get/get_one_by_id";
 import adminDonasi_funUpdateStatusDanTotal from "../../fun/update/fun_update_status_dan_total";
-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 mqtt_client from "@/util/mqtt_client";
-import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
 
 export default function AdminDonasi_DetailPublish({
   dataPublish,
@@ -82,13 +72,13 @@ export default function AdminDonasi_DetailPublish({
     "DonasiMaster_Status",
   ]);
 
-  // fungsi manggil serveraction
-
   return (
     <>
       {/* <pre>{JSON.stringify(pencairan, null, 2)}</pre> */}
       <Stack>
-        <AdminGlobal_ComponentBackButton path={RouterAdminDonasi.table_publish} />
+        <AdminGlobal_ComponentBackButton
+          path={RouterAdminDonasi.table_publish}
+        />
         <TampilanDetailDonasi donasi={dataDonasi} countDonatur={countDonatur} />
         <TampilanListDonatur
           donatur={listDonatur}
@@ -113,6 +103,8 @@ function TampilanDetailDonasi({
 }) {
   const [opened, { open, close }] = useDisclosure(false);
   const router = useRouter();
+  const [isLoadingPencairanDana, setIsLoadingPencairanDana] = useState(false);
+
   return (
     <>
       <Paper radius={"md"} p={"md"}>
@@ -126,67 +118,119 @@ function TampilanDetailDonasi({
               { maxWidth: "36rem", cols: 1, spacing: "sm" },
             ]}
           >
-            <Paper withBorder>
+            <Paper withBorder p={"xs"}>
-              <AspectRatio ratio={1 / 1}>
+              <Stack>
-                <Image
+                <Title align="center" order={4}>
-                  // mah={500}
+                  Gambar Donasi
-                  // mx={"auto"}
+                </Title>
-                  alt="Foto"
+                <Admin_ComponentLoadImageLandscape fileId={donasi.imageId} />
-                  src={RouterDonasi.api_gambar + `${donasi?.imagesId}`}
+              </Stack>
-                />
-              </AspectRatio>
             </Paper>
 
             <Paper withBorder p={"sm"}>
               <Stack spacing={5}>
-                <Title order={4}>{donasi?.title}</Title>
+                <Title order={4}>Detail Donasi</Title>
-                <Group>
+                <Grid>
-                  <Text fz={"xs"}>Penggalang Dana</Text>
+                  <Grid.Col span={4}>
-                  <Title order={5} c="blue">
+                    <Text fz={"xs"}>Judul</Text>
-                    {donasi?.Author.username}
+                  </Grid.Col>
-                  </Title>
+                  <Grid.Col span={"content"}>:</Grid.Col>
-                </Group>
+                  <Grid.Col span={"auto"}>
-                <Group>
+                    <Title order={5} c="blue">
-                  <Text fz={12}>Durasi</Text>
+                      {donasi?.title}
-                  <Title order={5} c="blue">
+                    </Title>
-                    {donasi?.DonasiMaster_Durasi.name} hari
+                  </Grid.Col>
-                  </Title>
+                </Grid>
-                </Group>
 
-                <Group>
+                <Grid>
-                  <Text fz={12}>Dana dibutuhkan</Text>
+                  <Grid.Col span={4}>
-                  <Title order={5} c="blue">
+                    <Text fz={"xs"}>Penggalang Dana</Text>
-                    <TampilanRupiahDonasi nominal={+donasi?.target} />
+                  </Grid.Col>
-                  </Title>
+                  <Grid.Col span={"content"}>:</Grid.Col>
-                </Group>
+                  <Grid.Col span={"auto"}>
-                <Group>
+                    <Title order={5} c="blue">
-                  <Text fz={12}>Kategori</Text>
+                      {donasi?.Author.username}
-                  <Title order={5} c="blue">
+                    </Title>
-                    {donasi?.DonasiMaster_Ketegori?.name}
+                  </Grid.Col>
-                  </Title>
+                </Grid>
-                </Group>
+
-                <Group>
+                <Grid>
-                  <Text fz={12}>Total donatur</Text>
+                  <Grid.Col span={4}>
-                  <Title order={5} c="blue">
+                    <Text fz={"xs"}>Durasi</Text>
-                    {countDonatur}
+                  </Grid.Col>
-                  </Title>
+                  <Grid.Col span={"content"}>:</Grid.Col>
-                </Group>
+                  <Grid.Col span={"auto"}>
-                <Group>
+                    <Title order={5} c="blue">
-                  <Text fz={12}>Progres</Text>
+                      {donasi?.DonasiMaster_Durasi.name} hari
-                  <Title order={5} c="blue">
+                    </Title>
-                    {toNumber(donasi.progres).toFixed(2)} %
+                  </Grid.Col>
-                  </Title>
+                </Grid>
-                </Group>
+
-                <Group>
+                <Grid>
-                  <Text fz={12}>Dana terkumpul</Text>
+                  <Grid.Col span={4}>
-                  <Title order={5} c="blue">
+                    <Text fz={"xs"}>Dana dibutuhkan</Text>
-                    <TampilanRupiahDonasi nominal={+donasi?.terkumpul} />
+                  </Grid.Col>
-                  </Title>
+                  <Grid.Col span={"content"}>:</Grid.Col>
-                </Group>
+                  <Grid.Col span={"auto"}>
-                {/* <Button w={200} bg={"green.5"} color="green">Pencairan Dana</Button> */}
+                    <ComponentGlobal_TampilanRupiah
+                      nominal={+donasi?.target}
+                      color="darkblue"
+                    />
+                  </Grid.Col>
+                </Grid>
+
+                <Grid>
+                  <Grid.Col span={4}>
+                    <Text fz={"xs"}>Kategori</Text>
+                  </Grid.Col>
+                  <Grid.Col span={"content"}>:</Grid.Col>
+                  <Grid.Col span={"auto"}>
+                    <Title order={5} c="blue">
+                      {donasi?.DonasiMaster_Ketegori?.name}
+                    </Title>
+                  </Grid.Col>
+                </Grid>
+
+                <Grid>
+                  <Grid.Col span={4}>
+                    <Text fz={"xs"}>Total donatur</Text>
+                  </Grid.Col>
+                  <Grid.Col span={"content"}>:</Grid.Col>
+                  <Grid.Col span={"auto"}>
+                    <Title order={5} c="blue">
+                      {countDonatur}
+                    </Title>
+                  </Grid.Col>
+                </Grid>
+
+                <Grid>
+                  <Grid.Col span={4}>
+                    <Text fz={12}>Progres</Text>
+                  </Grid.Col>
+                  <Grid.Col span={"content"}>:</Grid.Col>
+                  <Grid.Col span={"auto"}>
+                    <Title order={5} c="blue">
+                      {toNumber(donasi.progres).toFixed(2)} %
+                    </Title>
+                  </Grid.Col>
+                </Grid>
+
+                <Grid>
+                  <Grid.Col span={4}>
+                    <Text fz={12}>Dana terkumpul</Text>
+                  </Grid.Col>
+                  <Grid.Col span={"content"}>:</Grid.Col>
+                  <Grid.Col span={"auto"}>
+                    <ComponentGlobal_TampilanRupiah
+                      nominal={+donasi?.terkumpul}
+                      color="darkblue"
+                    />
+                  </Grid.Col>
+                </Grid>
               </Stack>
             </Paper>
 
+            {/* Pencairan Dana */}
             <Paper withBorder p={"sm"}>
               <Stack spacing={"xl"}>
                 <Center>
@@ -196,12 +240,10 @@ function TampilanDetailDonasi({
                   <Grid.Col span={"auto"}>
                     <Stack spacing={0}>
                       <Text fz={"xs"}>Total Dana Dicairkan</Text>
-                      <Title>
+                      <ComponentGlobal_TampilanRupiah
-                        <TampilanRupiahDonasi
+                        nominal={donasi?.totalPencairan}
-                          nominal={donasi?.totalPencairan}
+                        color="darkblue"
-                          fontSize={14}
+                      />
-                        />
-                      </Title>
                     </Stack>
                   </Grid.Col>
                   <Grid.Col span={"auto"}>
@@ -227,12 +269,15 @@ function TampilanDetailDonasi({
                 </Grid>
 
                 <Button
+                  loaderPosition="center"
+                  loading={isLoadingPencairanDana}
                   radius={"xl"}
-                  onClick={() =>
+                  onClick={() => {
+                    setIsLoadingPencairanDana(true);
                     router.push(
                       RouterAdminDonasi_OLD.pencairan_dana + `${donasi?.id}`
-                    )
+                    );
-                  }
+                  }}
                 >
                   Cairkan Dana
                 </Button>
@@ -271,7 +316,7 @@ function TampilanListDonatur({
   onSuccessDonasi: (val: any) => void;
 }) {
   const router = useRouter();
-  const [isLoading, setLoading] = useState(false);
+  const [isLoadingCek, setLoadingCek] = useState(false);
   const [idData, setIdData] = useState("");
   const [lisDonatur, setListDonatur] = useState<MODEL_DONASI_INVOICE[]>(
     donatur.data
@@ -323,7 +368,7 @@ function TampilanListDonatur({
       </td>
       <td>
         <Center>
-          <TampilanRupiahDonasi nominal={+e?.nominal} />
+          <ComponentGlobal_TampilanRupiah color="black" nominal={+e?.nominal} />
         </Center>
       </td>
       <td>
@@ -345,12 +390,13 @@ function TampilanListDonatur({
           {e?.donasiMaster_StatusInvoiceId === "1" ||
           e?.donasiMaster_StatusInvoiceId === "2" ? (
             <Button
+              loaderPosition="center"
+              loading={isLoadingCek && idData === e?.id}
               radius={"xl"}
-              onClick={() =>
+              onClick={() => {
-                router.push(
+                setLoadingCek(true), setIdData(e?.id);
-                  RouterAdminDonasi.transfer_invoice + `${e?.imagesId}`
+                router.push(RouterAdminGlobal.preview_image({ id: e.imageId }));
-                )
+              }}
-              }
             >
               Cek
             </Button>
@@ -496,6 +542,7 @@ function ButtonAccept({
   onSuccessDonatur: (val: any) => void;
 }) {
   const [opened, { open, close }] = useDisclosure(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   async function onAccept() {
     let nominalDonasi = nominal;
@@ -510,6 +557,7 @@ function ButtonAccept({
       target: target,
     });
     if (updateStatus.status == 200) {
+      setIsLoading(true);
       const dataNotif = {
         appId: updateStatus.data?.id,
         userId: updateStatus.data?.authorId,
@@ -569,10 +617,11 @@ function ButtonAccept({
       });
       onSuccessDonatur(updatelistDonatur);
       ComponentAdminGlobal_NotifikasiBerhasil(updateStatus.message);
+      setIsLoading(false);
     } else {
       ComponentAdminGlobal_NotifikasiGagal(updateStatus.message);
+      setIsLoading(false);
     }
-
     close();
   }
 
@@ -592,13 +641,17 @@ function ButtonAccept({
         <Paper>
           <Stack align="center">
             <Title
+              align="center"
               order={6}
-            >{`${"Anda yakin sudah melihat bukti transfer ?"}`}</Title>
+            >{`${"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();

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

@@ -30,6 +30,9 @@ 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 "@/app/lib";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
 
 export default function AdminDonasi_PencairanDana({
   donasiId,
@@ -55,7 +58,6 @@ export default function AdminDonasi_PencairanDana({
           onSuccess={(val) => {
             setTerkumpul(val.terkumpul);
             setTotal(val.totalPencairan);
-            console.log(val);
           }}
         />
       </Stack>
@@ -120,14 +122,82 @@ function FormView({
   });
   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 AdminDonasi_getOneById(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",
+        };
+
+        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: 200, sm: 200, md: 300, lg: 400 }} withBorder>
+        <Paper p={"md"} w={{ base: 300, sm: 350, md: 400, lg: 500 }} withBorder>
           <Center mb={"lg"}>
             <Title order={5}>Form Pencairan Dana</Title>
           </Center>
@@ -186,18 +256,28 @@ function FormView({
                 });
               }}
             />
-            <Textarea
+            <Stack spacing={5}>
-              withAsterisk
+              <Textarea
-              placeholder="Masukan deskripsi"
+                withAsterisk
-              label="Deskripsi"
+                placeholder="Masukan deskripsi"
-              maxLength={300}
+                label="Deskripsi"
-              onChange={(val: any) => {
+                maxLength={300}
-                setValue({
+                autosize
-                  ...value,
+                minRows={3}
-                  deskripsi: val.target.value,
+                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>
@@ -208,8 +288,7 @@ function FormView({
                       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) {
@@ -243,6 +322,8 @@ function FormView({
               )}
             </Stack>
             <Button
+              loaderPosition="center"
+              loading={isLoading}
               disabled={
                 _.values(value).includes("") || file === null || isOver
                   ? true
@@ -251,16 +332,7 @@ function FormView({
               style={{ transition: "0.5s" }}
               radius={"xl"}
               mt={"lg"}
-              onClick={() =>
+              onClick={() => onSave()}
-                onSave({
-                  router: router,
-                  value: value,
-                  donasiId: donasiId,
-                  file: file as any,
-                  nilaiNominal: nilaiNominal,
-                  onSuccess1: (val: any) => onSuccess(val),
-                })
-              }
             >
               Simpan
             </Button>
@@ -270,75 +342,3 @@ function FormView({
     </>
   );
 }
-
-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: nilaiNominal,
-    title: value.title,
-    deskripsi: value.deskripsi,
-  };
-
-  if (_.values(body).includes(""))
-    return ComponentAdminGlobal_NotifikasiPeringatan("Lengkapi Data");
-  if (!file)
-    return ComponentAdminGlobal_NotifikasiPeringatan(
-      "Lampirkan Bukti Transfer"
-    );
-
-  const gambar = new FormData();
-  gambar.append("file", file as any);
-
-  const res = await AdminDonasi_funCreatePencairanDana(body as any, gambar);
-  if (res.status === 200) {
-    const res2 = await AdminDonasi_AkumulasiPencairanById(
-      body.donasiId as any,
-      body.nominalCair as any
-    );
-    if (res2.status === 200) {
-      const loadData = await AdminDonasi_getOneById(donasiId);
-      onSuccess1(loadData);
-
-      const dataNotif = {
-        appId: loadData?.id,
-        userId: loadData?.authorId,
-        pesan: loadData?.title as any,
-        status: "Pencairan Dana",
-        kategoriApp: "DONASI",
-        title: "Dana donasi berhasil dicairkan",
-      };
-
-      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);
-    } else {
-      ComponentAdminGlobal_NotifikasiGagal(res2.message);
-    }
-  } else {
-    ComponentAdminGlobal_NotifikasiGagal(res.message);
-  }
-}

src/app_modules/admin/donasi/fun/create/fun_create_pencairan_dana.tsx

@@ -7,39 +7,42 @@ import { v4 } from "uuid";
 import fs from "fs";
 import { revalidatePath } from "next/cache";
 
-export async function AdminDonasi_funCreatePencairanDana(
+export async function AdminDonasi_funCreatePencairanDana({
-  req: MODEL_DONASI_PENCAIRAN_DANA,
+  data,
-  gambar: FormData
+  fileId,
-) {
+}: {
-  const dataImage: any = gambar.get("file");
+  data: MODEL_DONASI_PENCAIRAN_DANA;
-  const fileName = dataImage.name;
+  fileId: string;
-  const fileExtension = _.lowerCase(dataImage.name.split(".").pop());
+}) {
-  const fRandomName = v4(fileName) + "." + fileExtension;
+  // const dataImage: any = gambar.get("file");
+  // const fileName = dataImage.name;
+  // const fileExtension = _.lowerCase(dataImage.name.split(".").pop());
+  // const fRandomName = v4(fileName) + "." + fileExtension;
 
-  const uploadBukti = await prisma.images.create({
+  // const uploadBukti = await prisma.images.create({
-    data: {
+  //   data: {
-      url: fRandomName,
+  //     url: fRandomName,
-    },
+  //   },
-    select: {
+  //   select: {
-      id: true,
+  //     id: true,
-      url: true,
+  //     url: true,
-    },
+  //   },
-  });
+  // });
 
-  if (!uploadBukti) return { status: 400, message: "Gagal upload gambar" };
+  // if (!uploadBukti) return { status: 400, message: "Gagal upload gambar" };
-  const uploadFolder = Buffer.from(await dataImage.arrayBuffer());
+  // const uploadFolder = Buffer.from(await dataImage.arrayBuffer());
-  fs.writeFileSync(
+  // fs.writeFileSync(
-    `./public/donasi/pencairan/${uploadBukti.url}`,
+  //   `./public/donasi/pencairan/${uploadBukti.url}`,
-    uploadFolder
+  //   uploadFolder
-  );
+  // );
 
   const createPencairan = await prisma.donasi_PencairanDana.create({
     data: {
-      nominalCair: +req.nominalCair,
+      nominalCair: +data.nominalCair,
-      deskripsi: req.deskripsi,
+      deskripsi: data.deskripsi,
-      title: req.title,
+      title: data.title,
-      donasiId: req.donasiId,
+      donasiId: data.donasiId,
-      imagesId: uploadBukti.id
+      imageId: fileId,
     },
   });
 

src/app_modules/admin/donasi/fun/get/get_list_donatur_by_id.ts

@@ -37,6 +37,7 @@ export async function adminDonasi_getListDonatur({
       DonasiMaster_StatusInvoice: true,
       donasiMaster_StatusInvoiceId: true,
       imagesId: true,
+      imageId: true,
     },
   });
 

src/app_modules/admin/donasi/fun/get/get_list_publish.ts

@@ -37,6 +37,7 @@ export default async function adminDonasi_getListPublish({
       imageDonasi: true,
       DonasiMaster_Ketegori: true,
       DonasiMaster_Durasi: true,
+      imageId: true,
     },
   });
 

src/app_modules/admin/donasi/fun/get/get_one_by_id.ts

@@ -33,6 +33,7 @@ export async function AdminDonasi_getOneById(id: string) {
       DonasiMaster_Ketegori: true,
       DonasiMaster_Durasi: true,
       DonasiMaster_Status: true,
+      imageId: true,
     },
   });
   return res;

src/app_modules/admin/donasi/sub-detail/bukti_transfer.tsx

@@ -3,6 +3,7 @@
 import { AspectRatio, Box, Image, Paper, Stack } from "@mantine/core";
 import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
 import { RouterAdminDonasi_OLD } from "@/app/lib/router_hipmi/router_admin";
+import { Admin_ComponentLoadImageLandscape } from "../../_admin_global";
 
 export default function AdminDonasi_BuktiTransfer({
   imageId,
@@ -23,12 +24,13 @@ function BuktiTransfer({ imageId }: { imageId: string }) {
   return (
     <>
       <Paper withBorder  p={"lg"} bg={"gray.3"}>
-        <AspectRatio ratio={2 / 1}  mx="auto">
+        <Admin_ComponentLoadImageLandscape fileId={imageId}/>
+        {/* <AspectRatio ratio={2 / 1}  mx="auto">
           <Image
             alt="Foto"
             src={RouterAdminDonasi_OLD.api_gambar_bukti_transfer + `${imageId}`}
           />
-        </AspectRatio>
+        </AspectRatio> */}
         {/* <AspectRatio ratio={1 / 1} mah={500} p={"lg"} bg={"cyan"}>
           <Paper bg={"grape"} h={"100%"}>
             <Image

src/app_modules/admin/donasi/sub_menu/table_publish.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { RouterAdminDonasi_OLD } from "@/app/lib/router_hipmi/router_admin";
+import { ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
+import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
 import {
-  ActionIcon,
-  Box,
   Button,
   Center,
   Group,
@@ -12,16 +12,12 @@ import {
   ScrollArea,
   Stack,
   Table,
-  Text,
   TextInput,
-  Title,
+  Title
 } from "@mantine/core";
-import { IconChevronLeft, IconEyeCheck, IconSearch } from "@tabler/icons-react";
+import { IconEyeCheck, IconSearch } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
-import ComponentAdminDonasi_TombolKembali from "../component/tombol_kembali";
-import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
 import { useState } from "react";
-import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
 import adminDonasi_getListPublish from "../fun/get/get_list_publish";
 
@@ -77,12 +73,12 @@ function TableStatus({ listPublish }: { listPublish: any }) {
       </td>
       <td>
         <Center>
-          <TampilanRupiahDonasi nominal={+e.target} />
+          <ComponentGlobal_TampilanRupiah color="black" nominal={+e.target} />
         </Center>
       </td>
       <td>
         <Center>
-          <TampilanRupiahDonasi nominal={+e.terkumpul} />
+          <ComponentGlobal_TampilanRupiah color="black" nominal={+e.terkumpul} />
         </Center>
       </td>
       <td>

src/app_modules/admin/donasi/sub_menu/table_reject.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { RouterAdminDonasi_OLD } from "@/app/lib/router_hipmi/router_admin";
+import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
+import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
 import {
-  ActionIcon,
-  Box,
   Button,
   Center,
   Group,
@@ -17,22 +17,13 @@ import {
   TextInput,
   Title,
 } from "@mantine/core";
-import {
-  IconChevronLeft,
-  IconEyeCheck,
-  IconEyeClosed,
-  IconEyeEdit,
-  IconSearch,
-} from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import ComponentAdminDonasi_TombolKembali from "../component/tombol_kembali";
 import { useDisclosure } from "@mantine/hooks";
-import AdminDonasi_DetailReview from "../detail/detail_review";
+import { IconEyeEdit, IconSearch } from "@tabler/icons-react";
-import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
-import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
 import adminDonasi_getListReject from "../fun/get/get_list_reject";
+import { ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
 
 export default function AdminDonasi_TableReject({
   dataReject,
@@ -89,7 +80,7 @@ function TableStatus({ dataReject }: { dataReject: any }) {
       </td>
       <td>
         <Center>
-          <TampilanRupiahDonasi nominal={+e?.target} />
+          <ComponentGlobal_TampilanRupiah color="black" nominal={+e.target} />
         </Center>
       </td>
       <td>

src/app_modules/admin/donasi/sub_menu/table_review.tsx

@@ -1,33 +1,26 @@
 "use client";
 
 import { RouterAdminDonasi_OLD } from "@/app/lib/router_hipmi/router_admin";
+import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
+import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
 import {
-  ActionIcon,
-  Box,
   Button,
   Center,
   Group,
-  Modal,
   Pagination,
   Paper,
   ScrollArea,
   Stack,
   Table,
-  Text,
   TextInput,
   Title,
 } from "@mantine/core";
-import { IconChevronLeft, IconEyeCheck, IconSearch } from "@tabler/icons-react";
+import { IconEyeCheck, IconSearch } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
-import ComponentAdminDonasi_TombolKembali from "../component/tombol_kembali";
-import { useDisclosure } from "@mantine/hooks";
-import AdminDonasi_DetailReview from "../detail/detail_review";
-import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
 import { useState } from "react";
-import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
-import _ from "lodash";
 import adminDonasi_getListReview from "../fun/get/get_list_review";
+import { ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
 
 export default function AdminDonasi_TableReview({
   listReview,
@@ -83,7 +76,7 @@ function TableStatus({ listReview }: { listReview: any }) {
       </td>
       <td>
         <Center>
-          <TampilanRupiahDonasi nominal={+e?.target} />
+          <ComponentGlobal_TampilanRupiah color="black" nominal={+e.target} />
         </Center>
       </td>
       <td>

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

@@ -6,15 +6,14 @@ import mqtt_client from "@/util/mqtt_client";
 import {
   Button,
   Group,
-  Modal,
   SimpleGrid,
-  Stack,
+  Stack
-  Textarea,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import { Admin_ComponentModalReport } from "../../_admin_global/_component";
 import { ComponentAdminGlobal_NotifikasiBerhasil } from "../../_admin_global/admin_notifikasi/notifikasi_berhasil";
 import { ComponentAdminGlobal_NotifikasiGagal } from "../../_admin_global/admin_notifikasi/notifikasi_gagal";
 import { ComponentAdminGlobal_NotifikasiPeringatan } from "../../_admin_global/admin_notifikasi/notifikasi_peringatan";
@@ -26,7 +25,6 @@ import { ComponentAdminInvestasi_DetailGambar } from "../_component/detail_gamba
 import { ComponentAdminInvestasi_UIDetailFile } from "../_component/ui_detail_file";
 import { adminInvestasi_funEditStatusPublishById } from "../fun/edit/fun_status_publish_by_id";
 import Admin_funRejectInvestasi from "../fun/fun_reject_investasi";
-import { Admin_ComponentModalReport } from "../../_admin_global/_component";
 
 export default function AdminInvestasi_DetailReview({
   dataInvestasi,

src/app_modules/donasi/component/card_view/card_pencairan_dana.tsx

@@ -1,22 +1,23 @@
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
 import {
-  Paper,
-  Stack,
-  Title,
-  Spoiler,
-  Center,
   Button,
+  Center,
+  Paper,
+  Spoiler,
+  Stack,
   Text,
+  Title,
 } from "@mantine/core";
 import { IconImageInPicture } from "@tabler/icons-react";
 import moment from "moment";
 
-import { MODEL_DONASI_PENCAIRAN_DANA } from "../../model/interface";
+import { RouterImagePreview } from "@/app/lib";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { MODEL_DONASI_PENCAIRAN_DANA } from "../../model/interface";
 
 export function ComponentDonasi_CardPencairanDana({
   data,
@@ -24,6 +25,7 @@ export function ComponentDonasi_CardPencairanDana({
   data: MODEL_DONASI_PENCAIRAN_DANA;
 }) {
   const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
 
   return (
     <>
@@ -48,12 +50,13 @@ export function ComponentDonasi_CardPencairanDana({
           </Spoiler>
           <Center>
             <Button
+              loaderPosition="center"
+              loading={isLoading}
               radius={"xl"}
               leftIcon={<IconImageInPicture />}
               onClick={() => {
-                // open();
+                setLoading(true);
-                // setIdGambar(e.imagesId);
+                router.push(RouterImagePreview.main({ id: data.imageId }), {
-                router.push(RouterDonasi.bukti_transfer + data.imagesId, {
                   scroll: false,
                 });
               }}

src/app_modules/donasi/component/detail_main/detail_data_donasi.tsx

@@ -1,17 +1,17 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import {
-  AccentColor,
+  ComponentGlobal_CardStyles,
-  MainColor,
+  ComponentGlobal_LoadImageLandscape,
-} from "@/app_modules/_global/color/color_pallet";
+} from "@/app_modules/_global/component";
 import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 import {
-  AspectRatio,
   Divider,
   Grid,
   Group,
-  Image,
   Progress,
   Stack,
   Text,
@@ -29,11 +29,6 @@ import { Donasi_findDonaturByTokenId } from "../../fun/get/get_donatur_by_token_
 import { MODEL_DONASI } from "../../model/interface";
 import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
 import TampilanRupiahDonasi from "../tampilan_rupiah";
-import {
-  ComponentGlobal_CardStyles,
-  ComponentGlobal_LoadImageLandscape,
-} from "@/app_modules/_global/component";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 
 export function ComponentDonasi_DetailDataMain({
   donasi,
@@ -70,7 +65,7 @@ export function ComponentDonasi_DetailDataMain({
                   <TampilanRupiahDonasi nominal={+donasi?.terkumpul} />
                 </Title>
                 <Group>
-                  <Text fz={10}>Dari total</Text>{" "}
+                  <Text fz={10}>Dari target</Text>{" "}
                   <TampilanRupiahDonasi
                     nominal={+donasi?.target}
                     fontSize={10}

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

@@ -1,37 +1,14 @@
 "use client";
 
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
-import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import { ComponentDonasi_InformasiPencairanDana } from "@/app_modules/donasi/component/card_view/box_informasi_pencarian_dana";
 import { ComponentDonasi_BoxPencariranDana } from "@/app_modules/donasi/component/card_view/box_pencairan_dana";
-import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import {
   MODEL_DONASI,
   MODEL_DONASI_PENCAIRAN_DANA,
 } from "@/app_modules/donasi/model/interface";
 import {
-  AspectRatio,
+  Stack
-  Button,
-  Center,
-  Grid,
-  Image,
-  Modal,
-  Paper,
-  Spoiler,
-  Stack,
-  Text,
-  Title,
 } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
-import { IconImageInPicture } from "@tabler/icons-react";
-import _ from "lodash";
-import moment from "moment";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 export default function PencairanDanaDonasi({
@@ -49,7 +26,10 @@ export default function PencairanDanaDonasi({
     <>
       <Stack>
         <ComponentDonasi_BoxPencariranDana akumulasi={akumulasi} />
-        <ComponentDonasi_InformasiPencairanDana donasiId={donasiId} listPD={listPD} />
+        <ComponentDonasi_InformasiPencairanDana
+          donasiId={donasiId}
+          listPD={listPD}
+        />
       </Stack>
     </>
   );

src/app_modules/donasi/model/interface.ts

@@ -144,4 +144,5 @@ export interface MODEL_DONASI_PENCAIRAN_DANA {
   donasiId: string;
   imagesId: string
   Donasi: MODEL_DONASI;
+  imageId: string
 }

src/app_modules/donasi/proses_donasi/invoice/index.tsx

@@ -300,6 +300,8 @@ export default function Donasi_InvoiceProses({
 
         {file !== null ? (
           <Button
+            loaderPosition="center"
+            loading={isLoading}
             radius={"xl"}
             bg={MainColor.yellow}
             color="yellow"

src/app_modules/donasi/proses_donasi/proses_transaksi/layout.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ActionIcon, AppShell, Group, Header, Title } from "@mantine/core";
-import React from "react";
+import React, { useState } from "react";
 import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 import { IconX } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
@@ -11,6 +11,7 @@ import { gs_donasi_hot_menu } from "../../global_state";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 
 export default function LayoutDonasi_ProsesTransaksi({
   children,
@@ -18,8 +19,10 @@ export default function LayoutDonasi_ProsesTransaksi({
   children: React.ReactNode;
 }) {
   const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
   const [donasiHotMenu, setDonasiHotMenu] = useAtom(gs_donasi_hot_menu);
   async function onClick() {
+    setIsLoading(true);
     setDonasiHotMenu(2);
     router.push(RouterDonasi.main_donasi_saya);
   }
@@ -31,20 +34,10 @@ export default function LayoutDonasi_ProsesTransaksi({
             title="Proses Transaksi"
             customButtonLeft={
               <ActionIcon variant="transparent" onClick={() => onClick()}>
-                <IconX />
+                {isLoading ? <ComponentGlobal_Loader /> : <IconX />}
               </ActionIcon>
             }
           />
-
-          // <Header height={50} sx={{ borderStyle: "none" }}>
-          //   <Group h={50} position="apart" px={"md"}>
-          //     <ActionIcon variant="transparent" onClick={() => onClick()}>
-          //       <IconX />
-          //     </ActionIcon>
-          //     <Title order={5}>Proses Transaksi</Title>
-          //     <ActionIcon disabled variant="transparent"></ActionIcon>
-          //   </Group>
-          // </Header>
         }
       >
         {children}