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

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,47 +74,50 @@ 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) => (
-          <BaseBox key={index}>
-            <StackCustom>
-              <Grid>
-                <Grid.Col span={8}>
-                  <TextCustom bold>Pencairan ke - {index + 1}</TextCustom>
-                </Grid.Col>
-                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
-                  <TextCustom>{dayjs().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>
-              <ButtonCenteredOnly
-                onPress={() => {
-                  router.navigate(`/(application)/(file)/${id}`);
-                }}
-                icon="file-text"
-              >
-                Bukti Transaksi
-              </ButtonCenteredOnly>
-            </StackCustom>
-          </BaseBox>
-        ))}
+        {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>{item?.title}</TextCustom>
+                  </Grid.Col>
+                  <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                    <TextCustom>{dayjs(item?.createdAt).format("DD MMM YYYY")}</TextCustom>
+                  </Grid.Col>
+                </Grid>
+                <TextCustom>{item?.deskripsi}</TextCustom>
+                <ButtonCenteredOnly
+                  onPress={() => {
+                    router.navigate(`/(application)/(image)/preview-image/${item?.imageId}`);
+                  }}
+                  icon="file-text"
+                >
+                  Bukti Transaksi
+                </ButtonCenteredOnly>
+              </StackCustom>
+            </BaseBox>
+          ))
+        )}
       </ViewWrapper>
     </>
   );

app/(application)/(user)/donation/[id]/list-of-donatur.tsx

@@ -1,46 +1,93 @@
+/* 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) => (
-          <BaseBox key={index}>
-            <Grid>
-              <Grid.Col
-                span={3}
-                style={{ alignItems: "center", justifyContent: "center" }}
-              >
-                <FontAwesome6
-                  name="face-smile-wink"
-                  size={50}
-                  style={{ color: MainColor.yellow }}
-                />
-              </Grid.Col>
-              <Grid.Col span={9}>
-                <StackCustom gap={"xs"}>
+        {loadData ? (
+          <LoaderCustom />
+        ) : _.isEmpty(listData) ? (
+          <TextCustom bold align="center">
+            Belum ada donatur
+          </TextCustom>
+        ) : (
+          listData?.map((item: any, index: number) => (
+            <BaseBox key={index}>
+              <Grid>
+                <Grid.Col
+                  span={3}
+                  style={{ alignItems: "center", justifyContent: "center" }}
+                >
+                  <FontAwesome6
+                    name="face-smile-wink"
+                    size={50}
+                    style={{ color: MainColor.yellow }}
+                  />
+                </Grid.Col>
+                <Grid.Col span={9}>
                   <TextCustom bold size="large">
-                    Username
+                    {item?.Author?.username || "-"}
                   </TextCustom>
-                  <TextCustom>Berdonas sebesar </TextCustom>
-                  <TextCustom bold size="large" color="yellow">
-                    Rp. 100.000
-                  </TextCustom>
-                  <TextCustom>{dayjs().format("DD MMM YYYY")}</TextCustom>
-                </StackCustom>
-              </Grid.Col>
-            </Grid>
-          </BaseBox>
-        ))}
+                  <Spacing/>
+                  <StackCustom gap={"xs"}>
+                    <TextCustom size={"small"}>Berdonas sebesar </TextCustom>
+                    <TextCustom bold size="large" color="yellow">
+                      Rp. {formatCurrencyDisplay(item?.nominal)}
+                    </TextCustom>
+                    <TextCustom>
+                      {dayjs(item?.createdAt).format("DD MMM YYYY, HH:mm")}
+                    </TextCustom>
+                  </StackCustom>
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))
+        )}
       </ViewWrapper>
     </>
   );

app/(application)/admin/donation/[id]/[status]/index.tsx

@@ -53,8 +53,6 @@ export default function AdminDonationDetail() {
         id: id as string,
       });
 
-      console.log("[RES GET BY ID]", JSON.stringify(response, null, 2));
-
       if (response.success) {
         setData(response.data.donasi);
         setCountDonatur(response.data.donatur);
@@ -79,7 +77,9 @@ export default function AdminDonationDetail() {
       value:
         data && data?.DonasiMaster_Status?.name ? (
           <BadgeCustom
-            color={colorBadgeStatus({ status: data?.DonasiMaster_Status?.name })}
+            color={colorBadgeStatus({
+              status: data?.DonasiMaster_Status?.name,
+            })}
           >
             {_.startCase(data?.DonasiMaster_Status?.name)}
           </BadgeCustom>
@@ -107,7 +107,7 @@ export default function AdminDonationDetail() {
   const listPencarianDana = [
     {
       label: "Total Dana Dicairkan",
-      value: `Rp ${(data && data?.totalPencairan) || 0}`,
+      value: `Rp ${(data && formatCurrencyDisplay(data?.totalPencairan)) || 0}`,
     },
     {
       label: "Sisa Dana Masuk",
@@ -207,7 +207,15 @@ export default function AdminDonationDetail() {
                   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`);
                   }}
                 >
@@ -227,7 +235,6 @@ export default function AdminDonationDetail() {
               />
               <Spacing />
 
-            
               <StackCustom gap={"xs"}>
                 <GridDetail_4_8
                   label={<TextCustom bold>Jumlah Donatur</TextCustom>}

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

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>
   );
 }

app/(application)/admin/donation/[id]/list-disbursement-of-funds.tsx

@@ -1,21 +1,54 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    ActionIcon,
-    CenterCustom,
-    Divider,
-    StackCustom,
-    TextCustom,
-    ViewWrapper
+  ActionIcon,
+  CenterCustom,
+  Divider,
+  LoaderCustom,
+  StackCustom,
+  TextCustom,
+  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,36 +78,47 @@ export default function AdminDonasiListOfDisbursementOfFunds() {
         />
         <Divider />
         <StackCustom>
-          {Array.from({ length: 10 }).map((_, index) => (
-            <View key={index}>
-              <GridViewCustomSpan
-                span1={3}
-                span2={5}
-                span3={4}
-                component1={
-                  <CenterCustom>
-                    <ActionIcon
-                      icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
-                      onPress={() => {
-                        router.push(
-                          `/admin/donation/${id}/detail-disbursement-of-funds`
-                        );
-                      }}
-                    />
-                  </CenterCustom>
-                }
-                component2={
-                  <TextCustom bold align="center" truncate>
-                    {dayjs()
-                      .add(index + 1, "day")
-                      .format("DD-MM-YYYY HH:mm")}
-                  </TextCustom>
-                }
-                component3={<TextCustom>Rp. 1.000.000</TextCustom>}
-              />
-              <Divider />
-            </View>
-          ))}
+          {loadData ? (
+            <LoaderCustom />
+          ) : _.isEmpty(listData) ? (
+            <TextCustom align="center" color="gray">
+              Belum ada data
+            </TextCustom>
+          ) : (
+            listData?.map((item, index) => (
+              <View key={index}>
+                <GridViewCustomSpan
+                  span1={3}
+                  span2={5}
+                  span3={4}
+                  component1={
+                    <CenterCustom>
+                      <ActionIcon
+                        icon={
+                          <IconView size={ICON_SIZE_BUTTON} color="black" />
+                        }
+                        onPress={() => {
+                          router.push(
+                            `/admin/donation/${item?.id}/detail-disbursement-of-funds`
+                          );
+                        }}
+                      />
+                    </CenterCustom>
+                  }
+                  component2={
+                    <TextCustom align="center" truncate>
+                      {dayjs(item?.createdAt).format("DD-MM-YYYY")}
+                    </TextCustom>
+                  }
+                  component3={
+                    <TextCustom align="center" truncate>
+                      Rp. {formatCurrencyDisplay(item?.nominalCair)}
+                    </TextCustom>
+                  }
+                />
+              </View>
+            ))
+          )}
         </StackCustom>
       </ViewWrapper>
     </>