Integrasi API: Donation & Admin Donation

Fix: - app/(application)/(user)/donation/[id]/fund-disbursement.tsx - app/(application)/(user)/donation/[id]/list-of-donatur.tsx - app/(application)/admin/donation/[id]/[status]/index.tsx - app/(application)/admin/donation/[id]/detail-disbursement-of-funds.tsx - app/(application)/admin/donation/[id]/disbursement-of-funds.tsx - app/(application)/admin/donation/[id]/list-disbursement-of-funds.tsx - service/api-admin/api-admin-donation.ts - service/api-client/api-donation.ts - utils/pickFile.ts: Sudah bisa memilih ukuran crop tapi hanya di android ### No issue
2025-10-29 17:35:18 +08:00 · 2025-10-28 17:45:13 +08:00 · 2025-10-28 10:19:47 +08:00
27 changed files with 1422 additions and 374 deletions
--- a/app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/invoice.tsx
+++ b/app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/invoice.tsx
@@ -122,7 +122,7 @@ export default function DonationInvoice() {
                    }}
                  >
                    <TextCustom size="xlarge" bold color="yellow">
-                      {data?.DonasiMaster_Bank?.norek}
+                      {data?.MasterBank?.norek}
                    </TextCustom>
                  </Grid.Col>
                  <Grid.Col
@@ -131,7 +131,7 @@ export default function DonationInvoice() {
                      alignItems: "flex-end",
                    }}
                  >
-                    <CopyButton textToCopy={data?.DonasiMaster_Bank?.norek} />
+                    <CopyButton textToCopy={data?.MasterBank?.norek} />
                  </Grid.Col>
                </Grid>
              </BaseBox>
--- a/app/(application)/(user)/donation/[id]/fund-disbursement.tsx
+++ b/app/(application)/(user)/donation/[id]/fund-disbursement.tsx
@@ -1,17 +1,71 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
  BaseBox,
  ButtonCenteredOnly,
  Grid,
  InformationBox,
+  LoaderCustom,
  StackCustom,
  TextCustom,
  ViewWrapper,
 } from "@/components";
+import {
+  apiDonationDisbursementOfFundsListById,
+  apiDonationGetOne,
+} from "@/service/api-client/api-donation";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import dayjs from "dayjs";
-import { router, useLocalSearchParams } from "expo-router";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import React, { useState } from "react";

 export default function DonationFundDisbursement() {
  const { id } = useLocalSearchParams();
+
+  const [data, setData] = useState({
+    totalPencairan: 0,
+    akumulasiPencairan: 0,
+  });
+
+  const [listData, setListData] = React.useState<any[] | null>(null);
+  const [loadData, setLoadData] = React.useState(false);
+
+  useFocusEffect(
+    React.useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadData(true);
+
+      const responseData = await apiDonationGetOne({
+        id: id as string,
+        category: "permanent",
+      });
+
+      if (responseData.success) {
+        setData({
+          totalPencairan: responseData.data.totalPencairan,
+          akumulasiPencairan: responseData.data.akumulasiPencairan,
+        });
+      }
+
+      const responseList = await apiDonationDisbursementOfFundsListById({
+        id: id as string,
+      });
+
+      if (responseList.success) {
+        setListData(responseList.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadData(false);
+    }
+  };
+
  return (
    <>
      <ViewWrapper>
@@ -20,39 +74,41 @@ export default function DonationFundDisbursement() {
          <Grid>
            <Grid.Col span={6}>
              <TextCustom bold color="yellow">
-                Rp. 0
+                Rp. {formatCurrencyDisplay(data?.totalPencairan)}
              </TextCustom>
              <TextCustom size="small">Total Pencairan Dana</TextCustom>
            </Grid.Col>
            <Grid.Col span={6}>
              <TextCustom bold color="yellow">
-                0 kali
+                {data?.akumulasiPencairan} kali
              </TextCustom>
              <TextCustom size="small">Akumulasi Pencairan</TextCustom>
            </Grid.Col>
          </Grid>
        </BaseBox>

-        {Array.from({ length: 10 }).map((_, index) => (
+        {loadData ? (
+          <LoaderCustom />
+        ) : _.isEmpty(listData) ? (
+          <TextCustom align="center" color="gray">
+            Belum ada data
+          </TextCustom>
+        ) : (
+          listData?.map((item, index) => (
            <BaseBox key={index}>
              <StackCustom>
                <Grid>
                  <Grid.Col span={8}>
-                  <TextCustom bold>Pencairan ke - {index + 1}</TextCustom>
+                    <TextCustom bold>{item?.title}</TextCustom>
                  </Grid.Col>
                  <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
-                  <TextCustom>{dayjs().format("DD MMM YYYY")}</TextCustom>
+                    <TextCustom>{dayjs(item?.createdAt).format("DD MMM YYYY")}</TextCustom>
                  </Grid.Col>
                </Grid>
-              <TextCustom>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                Nesciunt dolor ad sit? Eaque rem nihil natus, id, esse possimus
-                perferendis provident velit illo consectetur distinctio ab
-                accusantium quis earum omnis!
-              </TextCustom>
+                <TextCustom>{item?.deskripsi}</TextCustom>
                <ButtonCenteredOnly
                  onPress={() => {
-                  router.navigate(`/(application)/(file)/${id}`);
+                    router.navigate(`/(application)/(image)/preview-image/${item?.imageId}`);
                  }}
                  icon="file-text"
                >
@@ -60,7 +116,8 @@ export default function DonationFundDisbursement() {
                </ButtonCenteredOnly>
              </StackCustom>
            </BaseBox>
-        ))}
+          ))
+        )}
      </ViewWrapper>
    </>
  );
--- a/app/(application)/(user)/donation/[id]/index.tsx
+++ b/app/(application)/(user)/donation/[id]/index.tsx
@@ -16,20 +16,19 @@ import Donation_ComponentInfoFundrising from "@/screens/Donation/ComponentInfoFu
 import Donation_ComponentStoryFunrising from "@/screens/Donation/ComponentStoryFunrising";
 import Donation_ProgressSection from "@/screens/Donation/ProgressSection";
 import { apiDonationGetOne } from "@/service/api-client/api-donation";
+import { countDownAndCondition } from "@/utils/countDownAndCondition";
 import {
  router,
  Stack,
  useFocusEffect,
  useLocalSearchParams,
 } from "expo-router";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";

 export default function DonasiDetailBeranda() {
  const { user } = useAuth();
  const { id } = useLocalSearchParams();
-  console.log("ID ", id);
  const [openDrawer, setOpenDrawer] = useState(false);
-
  const [data, setData] = useState<any>();

  useFocusEffect(
@@ -45,21 +44,41 @@ export default function DonasiDetailBeranda() {
        category: "permanent",
      });

-      console.log("[RES GET ONE]", JSON.stringify(response.data, null, 2));
-
      setData(response.data);
    } catch (error) {
      console.log("[ERROR]", error);
    }
  };

+  const [value, setValue] = useState({
+    sisa: 0,
+    reminder: false,
+  });
+
+  useEffect(() => {
+    updateCountDown();
+  }, [data]);
+
+  const updateCountDown = () => {
+    const countDown = countDownAndCondition({
+      duration: data?.DonasiMaster_Durasi?.name,
+      publishTime: data?.publishTime,
+    });
+
+    setValue({
+      sisa: countDown.durationDay,
+      reminder: countDown.reminder,
+    });
+  };
+
  const buttonSection = (
    <>
      <BoxButtonOnFooter>
        <ButtonCustom
+          disabled={value?.reminder}
          onPress={() => router.navigate(`/donation/${id}/(transaction-flow)`)}
        >
-          Donasi
+          {value?.reminder ? "Waktu berakhir" : "Donasi"}
        </ButtonCustom>
      </BoxButtonOnFooter>
    </>
@@ -80,8 +99,10 @@ export default function DonasiDetailBeranda() {
      <ViewWrapper footerComponent={buttonSection}>
        <StackCustom>
          <Donation_ComponentBoxDetailData
+            sisaHari={value.sisa}
+            reminder={value.reminder}
            data={data}
-            bottomSection={<Donation_ProgressSection id={id as string} />}
+            bottomSection={<Donation_ProgressSection id={id as string} progres={Number(data?.progres) || 0} />}
          />
          <Donation_ComponentInfoFundrising dataAuthor={data?.Author} />
          <Donation_ComponentStoryFunrising
--- a/app/(application)/(user)/donation/[id]/list-of-donatur.tsx
+++ b/app/(application)/(user)/donation/[id]/list-of-donatur.tsx
@@ -1,19 +1,62 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
  BaseBox,
  Grid,
+  LoaderCustom,
+  Spacing,
  StackCustom,
  TextCustom,
  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
+import { apiAdminDonationListOfDonaturById } from "@/service/api-admin/api-admin-donation";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import { FontAwesome6 } from "@expo/vector-icons";
 import dayjs from "dayjs";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";

 export default function Donation_ListOfDonatur() {
+  const { id } = useLocalSearchParams();
+  const [listData, setListData] = useState<any[] | null>(null);
+  const [loadData, setLoadData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadData(true);
+      const response = await apiAdminDonationListOfDonaturById({
+        id: id as string,
+      });
+
+
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadData(false);
+    }
+  };
+
  return (
    <>
      <ViewWrapper>
-        {Array.from({ length: 10 }).map((_, index) => (
+        {loadData ? (
+          <LoaderCustom />
+        ) : _.isEmpty(listData) ? (
+          <TextCustom bold align="center">
+            Belum ada donatur
+          </TextCustom>
+        ) : (
+          listData?.map((item: any, index: number) => (
            <BaseBox key={index}>
              <Grid>
                <Grid.Col
@@ -27,20 +70,24 @@ export default function Donation_ListOfDonatur() {
                  />
                </Grid.Col>
                <Grid.Col span={9}>
-                <StackCustom gap={"xs"}>
                  <TextCustom bold size="large">
-                    Username
+                    {item?.Author?.username || "-"}
                  </TextCustom>
-                  <TextCustom>Berdonas sebesar </TextCustom>
+                  <Spacing/>
+                  <StackCustom gap={"xs"}>
+                    <TextCustom size={"small"}>Berdonas sebesar </TextCustom>
                    <TextCustom bold size="large" color="yellow">
-                    Rp. 100.000
+                      Rp. {formatCurrencyDisplay(item?.nominal)}
+                    </TextCustom>
+                    <TextCustom>
+                      {dayjs(item?.createdAt).format("DD MMM YYYY, HH:mm")}
                    </TextCustom>
-                  <TextCustom>{dayjs().format("DD MMM YYYY")}</TextCustom>
                  </StackCustom>
                </Grid.Col>
              </Grid>
            </BaseBox>
-        ))}
+          ))
+        )}
      </ViewWrapper>
    </>
  );
--- a/app/(application)/admin/donation/[id]/[status]/index.tsx
+++ b/app/(application)/admin/donation/[id]/[status]/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
  ActionIcon,
  AlertDefaultSystem,
@@ -18,97 +19,153 @@ import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButt
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
 import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
 import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
-import { MainColor } from "@/constants/color-palet";
+import ReportBox from "@/components/Box/ReportBox";
 import { ICON_SIZE_BUTTON, TEXT_SIZE_LARGE } from "@/constants/constans-value";
 import AdminDonation_BoxOfDonationStory from "@/screens/Admin/Donation/BoxOfDonationStory";
+import { funUpdateStatusDonation } from "@/screens/Admin/Donation/funDonationUpdateStatus";
+import { apiAdminDonationDetailById } from "@/service/api-admin/api-admin-donation";
+import { colorBadgeStatus } from "@/utils/colorBadge";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import { Ionicons } from "@expo/vector-icons";
-import { router, useLocalSearchParams } from "expo-router";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
 import React from "react";
 import { View } from "react-native";
+import Toast from "react-native-toast-message";

 export default function AdminDonationDetail() {
  const { id, status } = useLocalSearchParams();
  const [openDrawer, setOpenDrawer] = React.useState(false);

-  const colorBadge = () => {
-    if (status === "publish") {
-      return MainColor.green;
-    } else if (status === "review") {
-      return MainColor.orange;
-    } else if (status === "reject") {
-      return MainColor.red;
-    } else {
-      return MainColor.placeholder;
+  const [data, setData] = React.useState<any | null>(null);
+  const [countDonatur, setCountDonatur] = React.useState(0);
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  useFocusEffect(
+    React.useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiAdminDonationDetailById({
+        id: id as string,
+      });
+
+      if (response.success) {
+        setData(response.data.donasi);
+        setCountDonatur(response.data.donatur);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setData(null);
    }
  };

  const listData = [
    {
      label: "Penggalang Dana",
-      value: `Bagas Banuna ${id}`,
+      value: (data && data?.Author?.username) || "-",
    },
    {
      label: "Judul",
-      value: `Donasi Lorem ipsum dolor sit amet, consectetur adipisicing elit.`,
+      value: (data && data?.title) || "-",
    },
    {
      label: "Status",
-      value: (
-        <BadgeCustom color={colorBadge()}>
-          {_.startCase(status as string)}
+      value:
+        data && data?.DonasiMaster_Status?.name ? (
+          <BadgeCustom
+            color={colorBadgeStatus({
+              status: data?.DonasiMaster_Status?.name,
+            })}
+          >
+            {_.startCase(data?.DonasiMaster_Status?.name)}
          </BadgeCustom>
+        ) : (
+          "-"
        ),
    },
    {
      label: "Durasi",
-      value: "30 Hari",
+      value: (data && data?.DonasiMaster_Durasi?.name) + " hari" || "-",
    },
    {
      label: "Target Dana",
-      value: "Rp 10.000.000",
+      value:
+        data && data?.target
+          ? `Rp. ${formatCurrencyDisplay(data?.target)}`
+          : "-",
    },
    {
      label: "Kategori",
-      value: "Kategori Donasi",
+      value: (data && data?.DonasiMaster_Ketegori?.name) || "-",
    },
-    // {
-    //   label: "Total Donatur",
-    //   value: "-",
-    // },
-    // {
-    //   label: "Progress",
-    //   value: "0 %",
-    // },
-    // {
-    //   label: "Dana Terkumpul",
-    //   value: "Rp 0",
-    // },
  ];

  const listPencarianDana = [
    {
      label: "Total Dana Dicairkan",
-      value: "Rp 0",
+      value: `Rp ${(data && formatCurrencyDisplay(data?.totalPencairan)) || 0}`,
    },
    {
-      label: "Sisa Dana",
-      value: "Rp 0",
+      label: "Sisa Dana Masuk",
+      value: `Rp ${
+        (data &&
+          formatCurrencyDisplay(data?.terkumpul - data?.totalPencairan)) ||
+        0
+      }`,
    },
    {
      label: "Akumulasi Pencairan",
-      value: "0 kali",
+      value: `${(data && data?.akumulasiPencairan) || 0} kali`,
    },
    {
      label: "Bank Tujuan",
-      value: "BNI",
+      value: (data && data?.namaBank) || "-",
    },
    {
      label: "Nomor Rekening",
-      value: "123456789",
+      value: (data && data?.rekening) || "-",
    },
  ];

+  const handleReport = async ({
+    changeStatus,
+  }: {
+    changeStatus: "publish" | "review" | "reject";
+  }) => {
+    try {
+      setIsLoading(true);
+      const response = await funUpdateStatusDonation({
+        id: id as string,
+        changeStatus,
+        data: data,
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Update status gagal",
+        });
+
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Update status berhasil",
+      });
+
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
  const rightComponent = (
    <ActionIcon
      icon={<IconDot size={ICON_SIZE_BUTTON} />}
@@ -118,8 +175,6 @@ export default function AdminDonationDetail() {
    />
  );

-
-
  return (
    <>
      <ViewWrapper
@@ -147,11 +202,20 @@ export default function AdminDonationDetail() {
                    />
                  ))}
                </StackCustom>
+
                <ButtonCustom
                  iconLeft={
                    <Ionicons name="cash-outline" size={ICON_SIZE_BUTTON} />
                  }
+                  disabled={data?.terkumpul - data?.totalPencairan <= 0}
                  onPress={() => {
+                    if (data?.terkumpul - data?.totalPencairan <= 0) {
+                      Toast.show({
+                        type: "error",
+                        text1: "Tidak ada dana yang tersisa",
+                      });
+                      return;
+                    }
                    router.push(`/admin/donation/${id}/disbursement-of-funds`);
                  }}
                >
@@ -161,16 +225,32 @@ export default function AdminDonationDetail() {
            </BaseBox>

            <BaseBox>
-              <ProgressCustom size="lg" />
+              <ProgressCustom
+                size="lg"
+                value={Number(data?.progres) || 0}
+                showLabel={true}
+                label={data?.progres + "%"}
+                animated
+                color="primary"
+              />
              <Spacing />
+
              <StackCustom gap={"xs"}>
                <GridDetail_4_8
                  label={<TextCustom bold>Jumlah Donatur</TextCustom>}
-                  value={<TextCustom>0 orang</TextCustom>}
+                  value={
+                    <TextCustom>
+                      {countDonatur ? countDonatur : 0} orang
+                    </TextCustom>
+                  }
                />
                <GridDetail_4_8
                  label={<TextCustom bold>Dana Terkumpul</TextCustom>}
-                  value={<TextCustom>Rp 0</TextCustom>}
+                  value={
+                    <TextCustom>
+                      Rp {formatCurrencyDisplay(data?.terkumpul || 0)}
+                    </TextCustom>
+                  }
                />
              </StackCustom>
            </BaseBox>
@@ -179,7 +259,7 @@ export default function AdminDonationDetail() {

        <BaseBox>
          <StackCustom>
-            <DummyLandscapeImage />
+            <DummyLandscapeImage imageId={data?.imageId || ""} />
            {listData.map((item, i) => (
              <GridDetail_4_8
                key={i}
@@ -190,27 +270,33 @@ export default function AdminDonationDetail() {
          </StackCustom>
        </BaseBox>

+        <AdminDonation_BoxOfDonationStory data={data?.CeritaDonasi as any} />
+
+        {data &&
+          data?.catatan &&
+          (status === "review" || status === "reject") && (
+            <ReportBox text={data?.catatan} />
+          )}
+
        {status === "review" && (
          <StackCustom>
-            <AdminDonation_BoxOfDonationStory />
-
            <AdminButtonReview
+              isLoading={isLoading}
              onPublish={() => {
                AlertDefaultSystem({
                  title: "Publish",
                  message: "Apakah anda yakin ingin mempublikasikan data ini?",
                  textLeft: "Batal",
                  textRight: "Ya",
-                  onPressLeft: () => {
-                    router.back();
-                  },
                  onPressRight: () => {
-                    router.back();
+                    handleReport({ changeStatus: "publish" });
                  },
                });
              }}
              onReject={() => {
-                router.push(`/admin/donation/${id}/reject-input`);
+                router.push(
+                  `/admin/donation/${id}/reject-input?status=${status}`
+                );
              }}
            />
          </StackCustom>
@@ -218,12 +304,12 @@ export default function AdminDonationDetail() {

        {status === "reject" && (
          <StackCustom>
-            <AdminDonation_BoxOfDonationStory />
-
            <AdminButtonReject
              title="Tambah Catatan"
              onReject={() => {
-                router.push(`/admin/donation/${id}/reject-input`);
+                router.push(
+                  `/admin/donation/${id}/reject-input?status=${status}`
+                );
              }}
            />
          </StackCustom>
--- a/app/(application)/admin/donation/[id]/[status]/transaction-detail.tsx
+++ b/app/(application)/admin/donation/[id]/[status]/transaction-detail.tsx
@@ -9,51 +9,162 @@ import {
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
-import { MainColor } from "@/constants/color-palet";
-import dayjs from "dayjs";
-import { router, useLocalSearchParams } from "expo-router";
+import {
+  apiAdminDonationInvoiceDetailById,
+  apiAdminDonationInvoiceUpdateById,
+} from "@/service/api-admin/api-admin-donation";
+import { colorBadgeTransaction } from "@/utils/colorBadge";
+import { dateTimeView } from "@/utils/dateTimeView";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";

 export default function AdminDonasiTransactionDetail() {
-  const { id } = useLocalSearchParams();
+  const { id, status } = useLocalSearchParams();
+  console.log("[STATUS]", id, status);

-  const buttonAction = (
+  const [data, setData] = useState<any | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiAdminDonationInvoiceDetailById({
+        id: id as string,
+      });
+
+      console.log("[GET INVOICE BY ID]", JSON.stringify(response, null, 2));
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerSubmit = async () => {
+    try {
+      setLoading(true);
+      const newData = {
+        donationId: data?.donasiId,
+        nominal: data?.nominal,
+      };
+
+      const response = await apiAdminDonationInvoiceUpdateById({
+        id: id as string,
+        data: newData,
+        status: "berhasil",
+      });
+
+      console.log("[UPDATE INVOICE]", JSON.stringify(response, null, 2));
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: response.message,
+        });
+        return;
+      }
+      Toast.show({
+        type: "success",
+        text1: response.message,
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const buttonAction = () => {
+    if (data && data?.DonasiMaster_StatusInvoice?.name === "Menunggu") {
+      return null;
+    }
+
+    if (data && data?.DonasiMaster_StatusInvoice?.name === "Proses") {
+      return (
        <BoxButtonOnFooter>
-      <ButtonCustom onPress={() => router.back()}>Terima</ButtonCustom>
+          <ButtonCustom
+            isLoading={isLoading}
+            onPress={() => {
+              handlerSubmit();
+            }}
+          >
+            Terima donasi
+          </ButtonCustom>
        </BoxButtonOnFooter>
      );
+    }
+
+    return (
+      <BoxButtonOnFooter>
+        <ButtonCustom disabled>
+           {data?.DonasiMaster_StatusInvoice?.name}
+        </ButtonCustom>
+      </BoxButtonOnFooter>
+    );
+  };

  const listData = [
    {
      label: "Donatur",
-      value: "Bagas Banuna",
+      value: (data && data?.Author?.username) || "-",
    },
    {
      label: "Bank",
-      value: "BCA",
+      value: (data && data?.MasterBank?.namaBank) || "-",
    },
    {
      label: "Jumlah Donasi",
-      value: "Rp. 1.000.000",
+      value: `Rp. ${
+        (data && data?.nominal && formatCurrencyDisplay(data?.nominal)) || "-"
+      }`,
    },
    {
      label: "Status",
-      value: <BadgeCustom color={MainColor.green}>Berhasil</BadgeCustom>,
+      value:
+        (data && data?.DonasiMaster_StatusInvoice?.name && (
+          <BadgeCustom
+            color={colorBadgeTransaction({
+              status: data?.DonasiMaster_StatusInvoice?.name as any,
+            })}
+          >
+            {_.startCase(
+              (data?.DonasiMaster_StatusInvoice?.name as any) || "-"
+            )}
+          </BadgeCustom>
+        )) ||
+        "-",
    },
    {
      label: "Tanggal",
-      value: dayjs().format("DD-MM-YYYY HH:mm:ss"),
+      value: (data && dateTimeView({ date: data?.createdAt })) || "-",
    },
    {
      label: "Bukti Transfer",
-      value: (
+      value:
+        (data && data?.imageId && (
          <ButtonCustom
            onPress={() =>
-            router.push(`/(application)/(image)/preview-image/${id}`)
+              router.push(
+                `/(application)/(image)/preview-image/${data?.imageId}`
+              )
            }
          >
            Cek
          </ButtonCustom>
-      ),
+        )) ||
+        "-",
    },
  ];

@@ -61,7 +172,7 @@ export default function AdminDonasiTransactionDetail() {
    <>
      <ViewWrapper
        headerComponent={<AdminBackButtonAntTitle title="Detail Transaksi" />}
-        footerComponent={buttonAction}
+        footerComponent={buttonAction()}
      >
        <BaseBox>
          <StackCustom>
--- a/app/(application)/admin/donation/[id]/detail-disbursement-of-funds.tsx
+++ b/app/(application)/admin/donation/[id]/detail-disbursement-of-funds.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
  BaseBox,
  ButtonCustom,
@@ -7,27 +8,53 @@ import {
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
-import dayjs from "dayjs";
-import { router, useLocalSearchParams } from "expo-router";
+import { apiAdminDonationDisbursementOfFundsListById } from "@/service/api-admin/api-admin-donation";
+import { dateTimeView } from "@/utils/dateTimeView";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import React, { useCallback } from "react";

 export default function AdminDonationDetailDisbursementOfFunds() {
  const { id } = useLocalSearchParams();
+  const [data, setData] = React.useState<any | null>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiAdminDonationDisbursementOfFundsListById({
+        id: id as string,
+        category: "get-one",
+      });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
  const listData = [
    {
      label: "Nominal",
-      value: "Rp 1.000.000",
+      value: `Rp ${(data && formatCurrencyDisplay(data?.nominalCair)) || 0}`,
    },
    {
      label: "Tanggal",
-      value: dayjs().format("DD-MM-YYYY HH:mm"),
+      value: dateTimeView({ date: data?.createdAt }),
    },
    {
      label: "Judul",
-      value: `Judul Pencairan Dana ${id}`,
+      value: (data && data?.title) || "-",
    },
    {
      label: "Deskripsi",
-      value: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque velit eos facere a dicta nemo repellendus harum laboriosam quos, earum reprehenderit. Nisi sapiente, quo earum quis alias ullam temporibus quidem.`,
+      value: (data && data?.deskripsi) || "-",
    },
  ];
  return (
@@ -39,7 +66,7 @@ export default function AdminDonationDetailDisbursementOfFunds() {
      >
        <BaseBox>
          <StackCustom>
-            {listData.map((item, index) => (
+            {listData?.map((item, index) => (
              <GridDetail_4_8
                key={index}
                label={<TextCustom bold>{item.label}</TextCustom>}
@@ -51,7 +78,7 @@ export default function AdminDonationDetailDisbursementOfFunds() {

        <ButtonCustom
          onPress={() =>
-            router.push(`/(application)/(image)/preview-image/${id}`)
+            router.push(`/(application)/(image)/preview-image/${data?.imageId}`)
          }
        >
          Cek Bukti Transaksi
--- a/app/(application)/admin/donation/[id]/disbursement-of-funds.tsx
+++ b/app/(application)/admin/donation/[id]/disbursement-of-funds.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
  BaseBox,
  BoxButtonOnFooter,
@@ -12,15 +13,122 @@ import {
  ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
-import { router, useLocalSearchParams } from "expo-router";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { apiAdminDonationDetailById, apiAdminDonationDisbursementOfFundsCreated } from "@/service/api-admin/api-admin-donation";
+import { uploadFileService } from "@/service/upload-service";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import pickFile from "@/utils/pickFile";
+import { Image } from "expo-image";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import React from "react";
+import Toast from "react-native-toast-message";

 export default function AdminDonationDisbursementOfFunds() {
  const { id } = useLocalSearchParams();
-  const handleSubmit = (
+
+  const [data, setData] = React.useState<any | null>(null);
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const [value, setValue] = React.useState({
+    nominalCair: "",
+    title: "",
+    deskripsi: "",
+  });
+
+  const [image, setImage] = React.useState<any | null>(null);
+
+  useFocusEffect(
+    React.useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiAdminDonationDetailById({
+        id: id as string,
+      });
+
+      if (response.success) {
+        setData(response.data.donasi);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setData(null);
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!image) {
+      Toast.show({
+        type: "error",
+        text1: "Harap upload bukti transfer",
+      });
+      return;
+    }
+
+    if (!value.nominalCair || !value.title || !value.deskripsi) {
+      Toast.show({
+        type: "error",
+        text1: "Harap isi semua data",
+      });
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      const uploadImage = await uploadFileService({
+        dirId: DIRECTORY_ID.donasi_bukti_trf_pencairan_dana,
+        imageUri: image.uri,
+      });
+
+      if (!uploadFileService) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengunggah gambar",
+        });
+        return;
+      }
+
+      const imageId = uploadImage.data.id;
+
+      const newData = {
+        ...value,
+        imageId: imageId,
+      };
+
+      const response = await apiAdminDonationDisbursementOfFundsCreated({
+        id: id as string,
+        data: newData,
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: response.message,
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Pencairan dana berhasil disimpan",
+      });
+
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const buttonSubmit = (
    <BoxButtonOnFooter>
      <ButtonCustom
+        isLoading={isLoading}
        onPress={() => {
-          router.back();
+          handleSubmit();
        }}
      >
        Simpan
@@ -31,7 +139,7 @@ export default function AdminDonationDisbursementOfFunds() {
  return (
    <ViewWrapper
      headerComponent={<AdminBackButtonAntTitle title="Pencairan Dana" />}
-      footerComponent={handleSubmit}
+      footerComponent={buttonSubmit}
    >
      <BaseBox>
        <StackCustom gap="md">
@@ -39,7 +147,7 @@ export default function AdminDonationDisbursementOfFunds() {
            Dana Tersisa
          </TextCustom>
          <TextCustom align="center" bold size="large">
-            Rp 1.000.000
+            Rp {formatCurrencyDisplay(data?.terkumpul - data?.totalPencairan)}
          </TextCustom>
        </StackCustom>
      </BaseBox>
@@ -56,9 +164,27 @@ export default function AdminDonationDisbursementOfFunds() {
            label="Nominal"
            placeholder="0"
            iconLeft={"Rp"}
+            value={value.nominalCair}
+            onChangeText={(text) => {
+              setValue({
+                ...value,
+                nominalCair: text,
+              });
+            }}
          />

-          <TextInputCustom required label="Judul" placeholder="Masukan judul" />
+          <TextInputCustom
+            required
+            label="Judul"
+            placeholder="Masukan judul"
+            value={value.title}
+            onChangeText={(text) => {
+              setValue({
+                ...value,
+                title: text,
+              });
+            }}
+          />

          <TextAreaCustom
            required
@@ -66,20 +192,37 @@ export default function AdminDonationDisbursementOfFunds() {
            placeholder="Masukan deskripsi"
            showCount
            maxLength={500}
+            value={value.deskripsi}
+            onChangeText={(text) => {
+              setValue({
+                ...value,
+                deskripsi: text,
+              });
+            }}
          />
        </StackCustom>
      </BaseBox>
-      <InformationBox text="Wajib menyertakan bukti transfer" />

+      <Spacing />
+
+      <InformationBox text="Wajib menyertakan bukti transfer" />
      <ButtonCenteredOnly
        onPress={() => {
-          router.push(`/(application)/(image)/take-picture/${id}`);
+          pickFile({
+            allowedType: "image",
+            aspectRatio: [9, 16],
+            setImageUri: (file) => {
+              setImage(file);
+            },
+          });
        }}
        icon="upload"
      >
        Upload
      </ButtonCenteredOnly>
      <Spacing />
+      <Image source={image?.uri} style={{ width: "100%", height: 300 }} />
+      <Spacing />
    </ViewWrapper>
  );
 }
--- a/app/(application)/admin/donation/[id]/list-disbursement-of-funds.tsx
+++ b/app/(application)/admin/donation/[id]/list-disbursement-of-funds.tsx
@@ -1,21 +1,54 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
  ActionIcon,
  CenterCustom,
  Divider,
+  LoaderCustom,
  StackCustom,
  TextCustom,
-    ViewWrapper
+  ViewWrapper,
 } from "@/components";
 import { IconView } from "@/components/_Icon/IconComponent";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import { GridViewCustomSpan } from "@/components/_ShareComponent/GridViewCustomSpan";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { apiAdminDonationDisbursementOfFundsListById } from "@/service/api-admin/api-admin-donation";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import dayjs from "dayjs";
-import { router, useLocalSearchParams } from "expo-router";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import React, { useCallback } from "react";
 import { View } from "react-native";

 export default function AdminDonasiListOfDisbursementOfFunds() {
  const { id } = useLocalSearchParams();
+  const [listData, setListData] = React.useState<any[] | null>(null);
+  const [loadData, setLoadData] = React.useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadData(true);
+      const response = await apiAdminDonationDisbursementOfFundsListById({
+        id: id as string,
+        category: "get-all",
+      });
+
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadData(false);
+    }
+  };
+
  return (
    <>
      <ViewWrapper
@@ -45,7 +78,14 @@ export default function AdminDonasiListOfDisbursementOfFunds() {
        />
        <Divider />
        <StackCustom>
-          {Array.from({ length: 10 }).map((_, index) => (
+          {loadData ? (
+            <LoaderCustom />
+          ) : _.isEmpty(listData) ? (
+            <TextCustom align="center" color="gray">
+              Belum ada data
+            </TextCustom>
+          ) : (
+            listData?.map((item, index) => (
              <View key={index}>
                <GridViewCustomSpan
                  span1={3}
@@ -54,27 +94,31 @@ export default function AdminDonasiListOfDisbursementOfFunds() {
                  component1={
                    <CenterCustom>
                      <ActionIcon
-                      icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
+                        icon={
+                          <IconView size={ICON_SIZE_BUTTON} color="black" />
+                        }
                        onPress={() => {
                          router.push(
-                          `/admin/donation/${id}/detail-disbursement-of-funds`
+                            `/admin/donation/${item?.id}/detail-disbursement-of-funds`
                          );
                        }}
                      />
                    </CenterCustom>
                  }
                  component2={
-                  <TextCustom bold align="center" truncate>
-                    {dayjs()
-                      .add(index + 1, "day")
-                      .format("DD-MM-YYYY HH:mm")}
+                    <TextCustom align="center" truncate>
+                      {dayjs(item?.createdAt).format("DD-MM-YYYY")}
+                    </TextCustom>
+                  }
+                  component3={
+                    <TextCustom align="center" truncate>
+                      Rp. {formatCurrencyDisplay(item?.nominalCair)}
                    </TextCustom>
                  }
-                component3={<TextCustom>Rp. 1.000.000</TextCustom>}
                />
-              <Divider />
              </View>
-          ))}
+            ))
+          )}
        </StackCustom>
      </ViewWrapper>
    </>
--- a/app/(application)/admin/donation/[id]/list-of-donatur.tsx
+++ b/app/(application)/admin/donation/[id]/list-of-donatur.tsx
@@ -1,7 +1,9 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
  ActionIcon,
  BadgeCustom,
  CenterCustom,
+  LoaderCustom,
  SelectCustom,
  StackCustom,
  TextCustom,
@@ -10,23 +12,91 @@ import {
 import { IconView } from "@/components/_Icon/IconComponent";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import { GridViewCustomSpan } from "@/components/_ShareComponent/GridViewCustomSpan";
-import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import { dummyMasterStatusTransaction } from "@/lib/dummy-data/_master/status-transaction";
-import { router, useLocalSearchParams } from "expo-router";
-import React from "react";
+import { apiAdminDonationListOfDonatur } from "@/service/api-admin/api-admin-donation";
+import { apiMasterTransaction } from "@/service/api-client/api-master";
+import { colorBadgeTransaction } from "@/utils/colorBadge";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import React, { useEffect } from "react";
 import { View } from "react-native";
 import { Divider } from "react-native-paper";

 export default function AdminDonasiListOfDonatur() {
  const { id } = useLocalSearchParams();
+  const [listData, setListData] = React.useState<any[] | null>(null);
+  const [loadData, setLoadData] = React.useState(false);
+  const [master, setMaster] = React.useState<any[]>([]);
+
+  const [selectValue, setSelectValue] = React.useState<string | null>(null);
+  const [selectedStatus, setSelectedStatus] = React.useState<string | null>(
+    null
+  );
+
+  useFocusEffect(
+    React.useCallback(() => {
+      onLoadData();
+    }, [id, selectValue])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadData(true);
+      const response = await apiAdminDonationListOfDonatur({
+        id: id as string,
+        status: selectedStatus as any,
+      });
+      // console.log("[LIST OF DONATUR]", JSON.stringify(response, null, 2));
+
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setListData([]);
+    } finally {
+      setLoadData(false);
+    }
+  };
+
+  useEffect(() => {
+    onLoadMaster();
+  }, []);
+
+  const onLoadMaster = async () => {
+    try {
+      const response = await apiMasterTransaction();
+
+      if (response.success) {
+        setMaster(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setMaster([]);
+    }
+  };
+
  const searchComponent = (
    <View style={{ flexDirection: "row", gap: 5 }}>
      <SelectCustom
        placeholder="Pilih status transaksi"
-        data={dummyMasterStatusTransaction}
-        onChange={(value) => console.log(value)}
+        data={
+          _.isEmpty(master)
+            ? []
+            : master?.map((item: any) => ({
+                label: item.name,
+                value: item.id,
+              }))
+        }
+        value={selectValue}
+        onChange={(value: any) => {
+          setSelectValue(value);
+          const nameSelected = master.find((item: any) => item.id === value);
+          const statusChooses = _.lowerCase(nameSelected?.name);
+          setSelectedStatus(statusChooses);
+        }}
        styleContainer={{ width: "100%", marginBottom: 0 }}
+        allowClear
      />
    </View>
  );
@@ -37,6 +107,7 @@ export default function AdminDonasiListOfDonatur() {
          <AdminBackButtonAntTitle newComponent={searchComponent} />
        }
      >
+        <StackCustom>
          <GridViewCustomSpan
            span1={3}
            span2={5}
@@ -59,7 +130,14 @@ export default function AdminDonasiListOfDonatur() {
          />
          <Divider />
          <StackCustom>
-          {Array.from({ length: 10 }).map((_, index) => (
+            {loadData ? (
+              <LoaderCustom />
+            ) : _.isEmpty(listData) ? (
+              <TextCustom align="center" color="gray">
+                Belum ada data
+              </TextCustom>
+            ) : (
+              listData?.map((item: any, index: number) => (
                <View key={index}>
                  <GridViewCustomSpan
                    span1={3}
@@ -68,10 +146,14 @@ export default function AdminDonasiListOfDonatur() {
                    component1={
                      <CenterCustom>
                        <ActionIcon
-                      icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
+                          icon={
+                            <IconView size={ICON_SIZE_BUTTON} color="black" />
+                          }
                          onPress={() => {
                            router.push(
-                          `/admin/donation/${id}/berhasil/transaction-detail`
+                              `/admin/donation/${item?.id}/${_.lowerCase(
+                                item?.DonasiMaster_StatusInvoice?.name
+                              )}/transaction-detail`
                            );
                          }}
                        />
@@ -79,21 +161,24 @@ export default function AdminDonasiListOfDonatur() {
                    }
                    component2={
                      <TextCustom bold align="center" truncate>
-                    Bagas Banuna
+                        {item?.Author?.username || "-"}
                      </TextCustom>
                    }
                    component3={
                      <BadgeCustom
                        style={{ alignSelf: "center" }}
-                    color={MainColor.green}
+                        color={colorBadgeTransaction({
+                          status: item?.DonasiMaster_StatusInvoice?.name,
+                        })}
                      >
-                    Berhasil
+                        {item?.DonasiMaster_StatusInvoice?.name}
                      </BadgeCustom>
                    }
                  />
-              <Divider />
                </View>
-          ))}
+              ))
+            )}
+          </StackCustom>
        </StackCustom>
      </ViewWrapper>
    </>
--- a/app/(application)/admin/donation/[id]/reject-input.tsx
+++ b/app/(application)/admin/donation/[id]/reject-input.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
  AlertDefaultSystem,
  BoxButtonOnFooter,
@@ -6,15 +7,84 @@ import {
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
-import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { funUpdateStatusDonation } from "@/screens/Admin/Donation/funDonationUpdateStatus";
+import {
+  apiAdminDonationDetailById
+} from "@/service/api-admin/api-admin-donation";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import React from "react";
+import Toast from "react-native-toast-message";

 export default function AdminDonationRejectInput() {
-  const { id } = useLocalSearchParams();
-  const [value, setValue] = useState(id as string);
+  const { id, status } = useLocalSearchParams();
+
+  const [data, setData] = React.useState<any | null>(null);
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  useFocusEffect(
+    React.useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiAdminDonationDetailById({
+        id: id as string,
+      });
+
+      if (response.success) {
+        setData(response.data.catatan);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setData(null);
+    }
+  };
+
+  const handleReport = async ({
+    changeStatus,
+  }: {
+    changeStatus: "publish" | "review" | "reject";
+  }) => {
+    try {
+      setIsLoading(true);
+      const response = await funUpdateStatusDonation({
+        id: id as string,
+        changeStatus,
+        data: data,
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Report gagal",
+        });
+
+        return
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Report berhasil",
+      });
+
+      if (status === "review") {
+        router.replace(`/admin/donation/reject/status`);
+      } else if (status === "reject") {
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
  const buttonSubmit = (
    <BoxButtonOnFooter>
      <AdminButtonReject
+        isLoading={isLoading}
        title="Reject"
        onReject={() =>
          AlertDefaultSystem({
@@ -22,12 +92,9 @@ export default function AdminDonationRejectInput() {
            message: "Apakah anda yakin ingin menolak data ini?",
            textLeft: "Batal",
            textRight: "Ya",
-            onPressLeft: () => {
-              router.back();
-            },
+
            onPressRight: () => {
-              console.log("value:", value);
-              router.replace(`/admin/donation/reject/status`);
+              handleReport({ changeStatus: "reject" });
            },
          })
        }
@@ -42,8 +109,8 @@ export default function AdminDonationRejectInput() {
        headerComponent={<AdminBackButtonAntTitle title="Penolakan Donasi" />}
      >
        <TextAreaCustom
-          value={value}
-          onChangeText={setValue}
+          value={data}
+          onChangeText={setData}
          placeholder="Masukan alasan"
          required
          showCount
--- a/app/(application)/admin/donation/index.tsx
+++ b/app/(application)/admin/donation/index.tsx
@@ -14,7 +14,6 @@ import { useState, useCallback } from "react";

 export default function AdminDonation() {
  const [data, setData] = useState<any | null>(null);
-  const [loadData, setLoadData] = useState<boolean>(false);

  useFocusEffect(
    useCallback(() => {
@@ -24,7 +23,7 @@ export default function AdminDonation() {

  const onLoadData = async () => {
    try {
-      setLoadData(true);
+
      const response = await apiAdminDonation({
        category: "dashboard",
      });
@@ -37,8 +36,6 @@ export default function AdminDonation() {
    } catch (error) {
      console.log("[ERROR]", error);
      setData([]);
-    } finally {
-      setLoadData(false);
    } 
  };

--- a/app/(application)/admin/event/[id]/[status]/index.tsx
+++ b/app/(application)/admin/event/[id]/[status]/index.tsx
@@ -23,7 +23,7 @@ import { useAuth } from "@/hooks/use-auth";
 import { funUpdateStatusEvent } from "@/screens/Admin/Event/funUpdateStatus";
 import { apiAdminEventById } from "@/service/api-admin/api-admin-event";
 import { DEEP_LINK_URL } from "@/service/api-config";
-import { colorBadge } from "@/utils/colorBadge";
+import { colorBadgeStatus } from "@/utils/colorBadge";
 import { dateTimeView } from "@/utils/dateTimeView";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
@@ -74,7 +74,7 @@ export default function AdminEventDetail() {
      label: "Status",
      value:
        (data && (
-          <BadgeCustom color={colorBadge({ status: status as string })}>
+          <BadgeCustom color={colorBadgeStatus({ status: status as string })}>
            {_.startCase(status as string)}
          </BadgeCustom>
        )) ||
--- a/app/(application)/admin/voting/[id]/[status]/index.tsx
+++ b/app/(application)/admin/voting/[id]/[status]/index.tsx
@@ -18,7 +18,7 @@ import ReportBox from "@/components/Box/ReportBox";
 import { MainColor } from "@/constants/color-palet";
 import funUpdateStatusVoting from "@/screens/Admin/Voting/funUpdateStatus";
 import { apiAdminVotingById } from "@/service/api-admin/api-admin-voting";
-import { colorBadge } from "@/utils/colorBadge";
+import { colorBadgeStatus } from "@/utils/colorBadge";
 import { dateTimeView } from "@/utils/dateTimeView";
 import { Entypo } from "@expo/vector-icons";
 import dayjs from "dayjs";
@@ -68,7 +68,7 @@ export default function AdminVotingDetail() {
      label: "Status",
      value:
        data && data?.Voting_Status?.name ? (
-          <BadgeCustom color={colorBadge({ status: status as string })}>
+          <BadgeCustom color={colorBadgeStatus({ status: status as string })}>
            {status === "history" ? "Riwayat" : _.startCase(status as string)}
          </BadgeCustom>
        ) : (
--- a/components/Select/SelectCustom.tsx
+++ b/components/Select/SelectCustom.tsx
@@ -27,6 +27,8 @@ type SelectProps = {
  onChange: (value: string | number) => void;
  borderRadius?: number;
  styleContainer?: StyleProp<ViewStyle>;
+  allowClear?: boolean; // <-- new prop
+  clearLabel?: string; // default: "Kosongkan"
 };

 const SelectCustom: React.FC<SelectProps> = ({
@@ -39,13 +41,21 @@ const SelectCustom: React.FC<SelectProps> = ({
  onChange,
  borderRadius = 8,
  styleContainer,
+  allowClear = true, // bisa dimatikan jika tidak perlu
+  clearLabel = "Hapus Pilihan",
 }) => {
  const [modalVisible, setModalVisible] = useState(false);

  const selectedItem = data.find((item) => item.value === value);
-
  const hasError = required && value === null; // <-- check if empty and required

+  // Gabungkan opsi clear di atas daftar
+  const renderData = allowClear
+    ? [...data,
+      //  { label: clearLabel, value: "__clear__" }
+      ]
+    : data;
+
  return (
    <View style={[GStyles.inputContainerArea, styleContainer]}>
      {label && (
@@ -54,13 +64,37 @@ const SelectCustom: React.FC<SelectProps> = ({
          {required && <Text style={GStyles.inputRequired}> *</Text>}
        </Text>
      )}
+
+      {/* Input Container */}
+      <View
+        style={[
+          {
+            flexDirection: "row",
+            alignItems: "center",
+            // backgroundColor: "red",
+            // flex: 1,
+            borderRadius,
+          },
+          GStyles.inputContainerInput,
+          hasError ? GStyles.inputErrorBorder : null,
+          disabled && GStyles.disabledBox,
+        ]}
+      >
        <Pressable
          style={[
-          { borderRadius, },
-          hasError ? GStyles.inputErrorBorder : null,
-          GStyles.inputContainerInput,
-          disabled && GStyles.disabledBox,
-        ]} // <-- add error style
+            {
+              flex: 1,
+              borderRadius,
+              flexDirection: "row",
+              alignItems: "center",
+              paddingHorizontal: 10,
+              height: 50,
+            },
+
+            // GStyles.inputContainerInput,
+            // hasError ? GStyles.inputErrorBorder : null,
+            // disabled && GStyles.disabledBox,
+          ]}
          onPress={() => !disabled && setModalVisible(true)}
        >
          <Text
@@ -78,6 +112,17 @@ const SelectCustom: React.FC<SelectProps> = ({
          </Text>
        </Pressable>

+        {/* Tombol Clear (Hanya muncul jika ada nilai terpilih & allowClear aktif) */}
+        {!disabled && allowClear && value !== null && value !== undefined && (
+          <TouchableOpacity
+            style={{ paddingHorizontal: 10 }}
+            onPress={() => onChange(null as any)} // null dikirim sebagai value
+          >
+            <Text style={{ fontSize: 18, color: "#999" }}>×</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+
      <Modal visible={modalVisible} transparent animationType="fade">
        <TouchableOpacity
          style={GStyles.selectModalOverlay}
@@ -86,9 +131,27 @@ const SelectCustom: React.FC<SelectProps> = ({
        >
          <View style={GStyles.selectModalContent}>
            <FlatList
-              data={data}
+              data={renderData}
              keyExtractor={(item) => String(item.value)}
-              renderItem={({ item }) => (
+              renderItem={({ item }) => {
+                if (item.value === "__clear__") {
+                  return (
+                    <TouchableOpacity
+                      style={[
+                        GStyles.selectOption,
+                        { backgroundColor: "#fdd" },
+                      ]}
+                      onPress={() => {
+                        onChange(null as any); // kosongkan nilai
+                        setModalVisible(false);
+                      }}
+                    >
+                      <Text>{item.label}</Text>
+                    </TouchableOpacity>
+                  );
+                }
+
+                return (
                  <TouchableOpacity
                    style={GStyles.selectOption}
                    onPress={() => {
@@ -98,7 +161,8 @@ const SelectCustom: React.FC<SelectProps> = ({
                  >
                    <Text>{item.label}</Text>
                  </TouchableOpacity>
-              )}
+                );
+              }}
            />
          </View>
        </TouchableOpacity>
--- a/context/AuthContext.tsx
+++ b/context/AuthContext.tsx
@@ -91,14 +91,11 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
        setToken(token);
        await AsyncStorage.setItem("authToken", token);

-        const responseUser = await apiConfig.get(
-          `/mobile?token=${token}`,
-          {
+        const responseUser = await apiConfig.get(`/mobile?token=${token}`, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
-          }
-        );
+        });
        const dataUser = responseUser.data.data;

        setUser(dataUser);
@@ -147,9 +144,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
      await AsyncStorage.setItem("userData", JSON.stringify(dataUser));
      return dataUser;
    } catch (error: any) {
-      throw new Error(
-        error.response?.data?.message || "Gagal mengambil data user"
-      );
+      console.log(error.response?.data?.message + "user" || "Gagal mengambil data user");
    } finally {
      setIsLoading(false);
    }
--- a/screens/Admin/Donation/BoxOfDonationStory.tsx
+++ b/screens/Admin/Donation/BoxOfDonationStory.tsx
@@ -6,7 +6,11 @@ import {
  DummyLandscapeImage,
 } from "@/components";

-export default function AdminDonation_BoxOfDonationStory() {
+export default function AdminDonation_BoxOfDonationStory({
+  data,
+}: {
+  data: any;
+}) {
  return (
    <>
      <BaseBox>
@@ -14,19 +18,9 @@ export default function AdminDonation_BoxOfDonationStory() {
        <Spacing />

        <StackCustom>
-          <TextCustom>
-            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem magni
-            perspiciatis eius ipsam provident, impedit, fugiat aliquid nobis
-            pariatur asperiores fuga quidem temporibus labore, molestias
-            perferendis optio ipsum. Praesentium, tempore?
-          </TextCustom>
-          <DummyLandscapeImage />
-          <TextCustom>
-            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem magni
-            perspiciatis eius ipsam provident, impedit, fugiat aliquid nobis
-            pariatur asperiores fuga quidem temporibus labore, molestias
-            perferendis optio ipsum. Praesentium, tempore?
-          </TextCustom>
+          <TextCustom>{(data && data?.pembukaan) || "-"}</TextCustom>
+          <DummyLandscapeImage imageId={data?.imageId || "-"} />
+          <TextCustom>{(data && data?.cerita) || "-"}</TextCustom>
        </StackCustom>
      </BaseBox>
    </>
--- a/screens/Admin/Donation/funDonationUpdateStatus.ts
+++ b/screens/Admin/Donation/funDonationUpdateStatus.ts
@@ -0,0 +1,23 @@
+import { apiAdminDonationUpdateStatus } from "@/service/api-admin/api-admin-donation";
+
+export const funUpdateStatusDonation = async ({
+  id,
+  changeStatus,
+  data,
+}: {
+  id: string;
+  changeStatus: "publish" | "review" | "reject";
+  data?: string;
+}) => {
+  try {
+    const response = await apiAdminDonationUpdateStatus({
+      id: id,
+      changeStatus: changeStatus as any,
+      data: data,
+    });
+    return response;
+  } catch (error) {
+    console.log("[ERROR]", error);
+    throw error;
+  }
+};
--- a/screens/Donation/BoxPublish.tsx
+++ b/screens/Donation/BoxPublish.tsx
@@ -1,11 +1,14 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
  BaseBox,
-  Grid,
  DummyLandscapeImage,
+  Grid,
+  ProgressCustom,
  StackCustom,
  TextCustom,
-  ProgressCustom,
 } from "@/components";
+import { countDownAndCondition } from "@/utils/countDownAndCondition";
+import { useEffect, useState } from "react";
 import { View } from "react-native";

 export default function Donation_BoxPublish({
@@ -15,6 +18,27 @@ export default function Donation_BoxPublish({
  id: string;
  data: any;
 }) {
+  const [value, setValue] = useState({
+    sisa: 0,
+    reminder: false,
+  });
+
+  useEffect(() => {
+    updateCountDown();
+  }, [data]);
+
+  const updateCountDown = () => {
+    const countDown = countDownAndCondition({
+      duration: data?.durasiDonasi,
+      publishTime: data?.publishTime,
+    });
+
+    setValue({
+      sisa: countDown.durationDay,
+      reminder: countDown.reminder,
+    });
+  };
+
  return (
    <>
      <BaseBox paddingTop={7} paddingBottom={7} href={`/donation/${id}`}>
@@ -36,13 +60,22 @@ export default function Donation_BoxPublish({
                  {data?.title || "-"}
                </TextCustom>
                <TextCustom size="small">
-                  Sisa hari: {data?.durasiDonasi || 0}
+                  {value.reminder ? (
+                    <TextCustom bold color="red">
+                      Waktu berakhir
+                    </TextCustom>
+                  ) : (
+                    <TextCustom>Sisa hari: {value.sisa}</TextCustom>
+                  )}
                </TextCustom>
              </View>
              <ProgressCustom
-                label={data?.progres + "%" || "0%"}
-                value={data?.progres || 0}
                size="lg"
+                value={Number(data?.progres) || 0}
+                showLabel={true}
+                label={data?.progres + "%"}
+                animated
+                color="primary"
              />
              {/* <TextCustom>
                 Terkumpul : Rp 300.000
--- a/screens/Donation/ComponentBoxDetailData.tsx
+++ b/screens/Donation/ComponentBoxDetailData.tsx
@@ -1,9 +1,9 @@
 import {
  BaseBox,
-  StackCustom,
  DummyLandscapeImage,
-  TextCustom,
  Grid,
+  StackCustom,
+  TextCustom,
 } from "@/components";
 import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import React from "react";
@@ -12,10 +12,15 @@ import { View } from "react-native";
 export default function Donation_ComponentBoxDetailData({
  bottomSection,
  data,
+  sisaHari,
+  reminder,
 }: {
  bottomSection?: React.ReactNode;
  data: any;
+  sisaHari: number;
+  reminder: boolean;
 }) {
+
  return (
    <>
      <BaseBox>
@@ -25,9 +30,13 @@ export default function Donation_ComponentBoxDetailData({
            <TextCustom bold size="large">
              {data?.title || "-"}
            </TextCustom>
-            <TextCustom size="small">
-              Durasi: {data?.DonasiMaster_Durasi?.name || "-"}
+            {reminder ? (
+              <TextCustom bold color="red">
+                Waktu berakhir
              </TextCustom>
+            ) : (
+              <TextCustom>Sisa hari: {sisaHari}</TextCustom>
+            )}
          </View>

          <Grid>
--- a/screens/Donation/ProgressSection.tsx
+++ b/screens/Donation/ProgressSection.tsx
@@ -11,11 +11,23 @@ import { Ionicons, MaterialIcons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import { View } from "react-native";

-export default function Donation_ProgressSection({ id }: { id: string }) {
+export default function Donation_ProgressSection({
+  id,
+  progres,
+}: {
+  id: string;
+  progres: number;
+}) {
  return (
    <>
      <View>
-        <ProgressCustom size="lg" />
+        <ProgressCustom
+          size="lg"
+          value={progres}
+          label={progres + "%"}
+          animated
+          color="primary"
+        />
        <Spacing />
        <Grid>
          <Grid.Col span={4}>
--- a/service/api-admin/api-admin-donation.ts
+++ b/service/api-admin/api-admin-donation.ts
@@ -4,7 +4,7 @@ export async function apiAdminDonation({
  category,
  search,
 }: {
-  category: "dashboard" | "publish" | "review" | "reject" ;
+  category: "dashboard" | "publish" | "review" | "reject";
  search?: string;
 }) {
  try {
@@ -16,3 +16,139 @@ export async function apiAdminDonation({
    throw error;
  }
 }
+
+export async function apiAdminDonationDetailById({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.get(`/mobile/admin/donation/${id}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiAdminDonationUpdateStatus({
+  id,
+  changeStatus,
+  data,
+}: {
+  id: string;
+  changeStatus: "publish" | "review" | "reject";
+  data?: string;
+}) {
+  try {
+    const response = await apiConfig.put(
+      `/mobile/admin/donation/${id}?status=${changeStatus}`,
+      {
+        data: data,
+      }
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiAdminDonationListOfDonatur({
+  id,
+  status,
+}: {
+  id: string;
+  status: "berhasil" | "gagal" | "proses" | "menunggu" | null;
+}) {
+  const query = status && status !== null ? `?status=${status}` : "";
+
+  try {
+    const response = await apiConfig.get(
+      `/mobile/admin/donation/${id}/donatur${query}`
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiAdminDonationInvoiceDetailById({
+  id,
+}: {
+  id: string;
+}) {
+  try {
+    const response = await apiConfig.get(
+      `/mobile/admin/donation/${id}/invoice`
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiAdminDonationInvoiceUpdateById({
+  id,
+  data,
+  status,
+}: {
+  id: string;
+  data: any;
+  status: "berhasil" | "gagal" | "proses" | "menunggu";
+}) {
+  try {
+    const response = await apiConfig.put(
+      `/mobile/admin/donation/${id}/invoice?status=${status}`,
+      {
+        data: data,
+      }
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiAdminDonationListOfDonaturById({
+  id,
+}: {
+  id: string;
+}) {
+  try {
+    const response = await apiConfig.get(`/mobile/donation/${id}/donatur`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiAdminDonationDisbursementOfFundsCreated({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
+  try {
+    const response = await apiConfig.post(
+      `/mobile/admin/donation/${id}/disbursement`,
+      {
+        data: data,
+      }
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiAdminDonationDisbursementOfFundsListById({
+  id,
+  category,
+}: {
+  id: string;
+  category: "get-all" | "get-one"
+}) {
+  try {
+    const response = await apiConfig.get(`/mobile/admin/donation/${id}/disbursement?category=${category}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
--- a/service/api-client/api-donation.ts
+++ b/service/api-client/api-donation.ts
@@ -255,3 +255,16 @@ export async function apiDonationDeleteNews({ id }: { id: string }) {
    throw error;
  }
 }
+
+export async function apiDonationDisbursementOfFundsListById({
+  id,
+}: {
+  id: string;
+}) {
+  try {
+    const response = await apiConfig.get(`/mobile/donation/${id}/disbursement`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
--- a/service/api-client/api-master.ts
+++ b/service/api-client/api-master.ts
@@ -157,3 +157,14 @@ export async function apiMasterDonation({
    throw error;
  }
 }
+
+// ================== END MASTER DONATION ================== //
+
+export async function apiMasterTransaction() {
+  try {
+    const response = await apiConfig.get(`/mobile/master/transaction-status`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
--- a/utils/colorBadge.ts
+++ b/utils/colorBadge.ts
@@ -1,6 +1,6 @@
-import { MainColor } from "@/constants/color-palet";
+import { AccentColor, MainColor } from "@/constants/color-palet";

-export const colorBadge = ({ status }: { status: string }) => {
+export const colorBadgeStatus = ({ status }: { status: string }) => {
  const statusLowerCase = status.toLowerCase();
  if (statusLowerCase === "publish") {
    return MainColor.green;
@@ -12,3 +12,16 @@ export const colorBadge = ({ status }: { status: string }) => {
    return MainColor.placeholder;
  }
 };
+
+export const colorBadgeTransaction = ({ status }: { status: string }) => {
+  const statusLowerCase = status.toLowerCase();
+  if (statusLowerCase === "berhasil") {
+    return MainColor.green;
+  } else if (statusLowerCase === "menunggu") {
+    return MainColor.orange;
+  } else if (statusLowerCase === "gagal") {
+    return MainColor.red;
+  } else {
+    return AccentColor.blue;
+  }
+};
--- a/utils/countDownAndCondition.ts
+++ b/utils/countDownAndCondition.ts
@@ -0,0 +1,21 @@
+import dayjs from "dayjs";
+
+export function countDownAndCondition({
+  publishTime,
+  duration,
+}: {
+  publishTime: Date;
+  duration: number | string;
+}) {
+  const now = dayjs();
+  const publish = dayjs(publishTime);
+  const diffTime = publish.diff(now, "day");
+
+  const durasi = Number(duration);
+  const sisaHari = durasi + diffTime;
+
+  return {
+    durationDay: sisaHari,
+    reminder: sisaHari <= 0,
+  };
+}
--- a/utils/pickFile.ts
+++ b/utils/pickFile.ts
@@ -13,19 +13,28 @@ export interface IFileData {

 export type AllowedFileType = "image" | "pdf" | undefined;

+export type AspectRatio = [number, number];
+
 export interface PickFileOptions {
  setImageUri?: (file: IFileData) => void;
  setPdfUri?: (file: IFileData) => void;
  allowedType?: AllowedFileType; // <-- Tambahkan prop ini
+  aspectRatio?: AspectRatio;
 }

 export default async function pickFile({
  setImageUri,
  setPdfUri,
  allowedType,
+  aspectRatio,
 }: PickFileOptions): Promise<void> {
  if (allowedType === "image") {
-    await pickImage(setImageUri);
+    if (aspectRatio) {
+      await pickImage(setImageUri, aspectRatio);
+    } else {
+      // Jika tidak, tawarkan pilihan rasio (default [4,3])
+      showAspectRatioChoice(setImageUri);
+    }
  } else if (allowedType === "pdf") {
    await pickPdf(setPdfUri);
  } else {
@@ -36,15 +45,45 @@ export default async function pickFile({
      [
        { text: "Batal", style: "cancel" },
        { text: "Dokumen (PDF)", onPress: () => pickPdf(setPdfUri) },
-        { text: "Gambar", onPress: () => pickImage(setImageUri) },
+        { text: "Gambar", onPress: () => pickImage(setImageUri, aspectRatio) },
      ],
      { cancelable: true }
    );
  }
 }

+function showAspectRatioChoice(setImageUri?: (file: IFileData) => void) {
+  Alert.alert(
+    "Pilih Rasio Gambar",
+    "Pilih rasio crop yang diinginkan:",
+    [
+      { text: "Batal", style: "cancel" },
+      {
+        text: "1:1 (Kotak)",
+        onPress: () => pickImage(setImageUri, [1, 1]),
+      },
+      // {
+      //   text: "4:3 (Default)",
+      //   onPress: () => pickImage(setImageUri, [4, 3]),
+      // },
+      // {
+      //   text: "9:16 (Landscape)",
+      //   onPress: () => pickImage(setImageUri, [9, 16]),
+      // },
+      {
+        text: "3:4 (Potret)",
+        onPress: () => pickImage(setImageUri, [3, 4]),
+      },
+    ],
+    { cancelable: true }
+  );
+}
+
 // --- Fungsi internal: pickImage ---
-async function pickImage(setImageUri?: (file: IFileData) => void) {
+async function pickImage(
+  setImageUri?: (file: IFileData) => void,
+  aspectRatio: AspectRatio = [4, 3] // Default [4, 3]
+) {
  const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
  if (status !== "granted") {
    Alert.alert(
@@ -57,7 +96,7 @@ async function pickImage(setImageUri?: (file: IFileData) => void) {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
-    aspect: [4, 3],
+    aspect: aspectRatio, // 🎯 Gunakan rasio dinamis
    quality: 1,
  });