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) => (
+        {loadData ? (
-          <BaseBox key={index}>
+          <LoaderCustom />
-            <StackCustom>
+        ) : _.isEmpty(listData) ? (
-              <Grid>
+          <TextCustom align="center" color="gray">
-                <Grid.Col span={8}>
+            Belum ada data
-                  <TextCustom bold>Pencairan ke - {index + 1}</TextCustom>
+          </TextCustom>
-                </Grid.Col>
+        ) : (
-                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+          listData?.map((item, index) => (
-                  <TextCustom>{dayjs().format("DD MMM YYYY")}</TextCustom>
+            <BaseBox key={index}>
-                </Grid.Col>
+              <StackCustom>
-              </Grid>
+                <Grid>
-              <TextCustom>
+                  <Grid.Col span={8}>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    <TextCustom bold>{item?.title}</TextCustom>
-                Nesciunt dolor ad sit? Eaque rem nihil natus, id, esse possimus
+                  </Grid.Col>
-                perferendis provident velit illo consectetur distinctio ab
+                  <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
-                accusantium quis earum omnis!
+                    <TextCustom>{dayjs(item?.createdAt).format("DD MMM YYYY")}</TextCustom>
-              </TextCustom>
+                  </Grid.Col>
-              <ButtonCenteredOnly
+                </Grid>
-                onPress={() => {
+                <TextCustom>{item?.deskripsi}</TextCustom>
-                  router.navigate(`/(application)/(file)/${id}`);
+                <ButtonCenteredOnly
-                }}
+                  onPress={() => {
-                icon="file-text"
+                    router.navigate(`/(application)/(image)/preview-image/${item?.imageId}`);
-              >
+                  }}
-                Bukti Transaksi
+                  icon="file-text"
-              </ButtonCenteredOnly>
+                >
-            </StackCustom>
+                  Bukti Transaksi
-          </BaseBox>
+                </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) => (
+        {loadData ? (
-          <BaseBox key={index}>
+          <LoaderCustom />
-            <Grid>
+        ) : _.isEmpty(listData) ? (
-              <Grid.Col
+          <TextCustom bold align="center">
-                span={3}
+            Belum ada donatur
-                style={{ alignItems: "center", justifyContent: "center" }}
+          </TextCustom>
-              >
+        ) : (
-                <FontAwesome6
+          listData?.map((item: any, index: number) => (
-                  name="face-smile-wink"
+            <BaseBox key={index}>
-                  size={50}
+              <Grid>
-                  style={{ color: MainColor.yellow }}
+                <Grid.Col
-                />
+                  span={3}
-              </Grid.Col>
+                  style={{ alignItems: "center", justifyContent: "center" }}
-              <Grid.Col span={9}>
+                >
-                <StackCustom gap={"xs"}>
+                  <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>
+                  <Spacing/>
-                  <TextCustom bold size="large" color="yellow">
+                  <StackCustom gap={"xs"}>
-                    Rp. 100.000
+                    <TextCustom size={"small"}>Berdonas sebesar </TextCustom>
-                  </TextCustom>
+                    <TextCustom bold size="large" color="yellow">
-                  <TextCustom>{dayjs().format("DD MMM YYYY")}</TextCustom>
+                      Rp. {formatCurrencyDisplay(item?.nominal)}
-                </StackCustom>
+                    </TextCustom>
-              </Grid.Col>
+                    <TextCustom>
-            </Grid>
+                      {dayjs(item?.createdAt).format("DD MMM YYYY, HH:mm")}
-          </BaseBox>
+                    </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 { apiAdminDonationDisbursementOfFundsListById } from "@/service/api-admin/api-admin-donation";
-import { router, useLocalSearchParams } from "expo-router";
+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,
+  ActionIcon,
-    CenterCustom,
+  CenterCustom,
-    Divider,
+  Divider,
-    StackCustom,
+  LoaderCustom,
-    TextCustom,
+  StackCustom,
-    ViewWrapper
+  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) => (
+          {loadData ? (
-            <View key={index}>
+            <LoaderCustom />
-              <GridViewCustomSpan
+          ) : _.isEmpty(listData) ? (
-                span1={3}
+            <TextCustom align="center" color="gray">
-                span2={5}
+              Belum ada data
-                span3={4}
+            </TextCustom>
-                component1={
+          ) : (
-                  <CenterCustom>
+            listData?.map((item, index) => (
-                    <ActionIcon
+              <View key={index}>
-                      icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
+                <GridViewCustomSpan
-                      onPress={() => {
+                  span1={3}
-                        router.push(
+                  span2={5}
-                          `/admin/donation/${id}/detail-disbursement-of-funds`
+                  span3={4}
-                        );
+                  component1={
-                      }}
+                    <CenterCustom>
-                    />
+                      <ActionIcon
-                  </CenterCustom>
+                        icon={
-                }
+                          <IconView size={ICON_SIZE_BUTTON} color="black" />
-                component2={
+                        }
-                  <TextCustom bold align="center" truncate>
+                        onPress={() => {
-                    {dayjs()
+                          router.push(
-                      .add(index + 1, "day")
+                            `/admin/donation/${item?.id}/detail-disbursement-of-funds`
-                      .format("DD-MM-YYYY HH:mm")}
+                          );
-                  </TextCustom>
+                        }}
-                }
+                      />
-                component3={<TextCustom>Rp. 1.000.000</TextCustom>}
+                    </CenterCustom>
-              />
+                  }
-              <Divider />
+                  component2={
-            </View>
+                    <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>
     </>

service/api-admin/api-admin-donation.ts

@@ -103,3 +103,52 @@ export async function apiAdminDonationInvoiceUpdateById({
     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;
+  }
+}
+

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

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