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