Integrasi API: Donation & Admin Donation

Fix: - app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/invoice.tsx - app/(application)/(user)/donation/[id]/index.tsx - app/(application)/admin/donation/[id]/[status]/index.tsx - app/(application)/admin/donation/[id]/[status]/transaction-detail.tsx - app/(application)/admin/donation/[id]/list-of-donatur.tsx - components/Select/SelectCustom.tsx - context/AuthContext.tsx - screens/Donation/BoxPublish.tsx - screens/Donation/ProgressSection.tsx - service/api-admin/api-admin-donation.ts ### NO Issue
2025-10-28 17:45:13 +08:00
parent 5d4328a139
commit 1e1b18f860
10 changed files with 420 additions and 153 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]/index.tsx
+++ b/app/(application)/(user)/donation/[id]/index.tsx
@@ -102,7 +102,7 @@ export default function DonasiDetailBeranda() {
            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)/admin/donation/[id]/[status]/index.tsx
+++ b/app/(application)/admin/donation/[id]/[status]/index.tsx
@@ -38,6 +38,7 @@ export default function AdminDonationDetail() {
  const [openDrawer, setOpenDrawer] = React.useState(false);

  const [data, setData] = React.useState<any | null>(null);
+  const [countDonatur, setCountDonatur] = React.useState(0);
  const [isLoading, setIsLoading] = React.useState(false);

  useFocusEffect(
@@ -55,7 +56,8 @@ export default function AdminDonationDetail() {
      console.log("[RES GET BY ID]", JSON.stringify(response, null, 2));

      if (response.success) {
-        setData(response.data);
+        setData(response.data.donasi);
+        setCountDonatur(response.data.donatur);
      }
    } catch (error) {
      console.log("[ERROR]", error);
@@ -108,12 +110,16 @@ export default function AdminDonationDetail() {
      value: `Rp ${(data && data?.totalPencairan) || 0}`,
    },
    {
-      label: "Sisa Dana",
-      value: `Rp ${(data && data?.terkumpul - data?.totalPencairan) || 0}`,
+      label: "Sisa Dana Masuk",
+      value: `Rp ${
+        (data &&
+          formatCurrencyDisplay(data?.terkumpul - data?.totalPencairan)) ||
+        0
+      }`,
    },
    {
      label: "Akumulasi Pencairan",
-      value: `${(data && data?.totalPencairan) || 0} kali`,
+      value: `${(data && data?.akumulasiPencairan) || 0} kali`,
    },
    {
      label: "Bank Tujuan",
@@ -196,7 +202,7 @@ export default function AdminDonationDetail() {
                    />
                  ))}
                </StackCustom>
-                
+
                <ButtonCustom
                  iconLeft={
                    <Ionicons name="cash-outline" size={ICON_SIZE_BUTTON} />
@@ -211,16 +217,33 @@ 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>
--- 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 = (
-    <BoxButtonOnFooter>
-      <ButtonCustom onPress={() => router.back()}>Terima</ButtonCustom>
-    </BoxButtonOnFooter>
+  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
+            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: (
-        <ButtonCustom
-          onPress={() =>
-            router.push(`/(application)/(image)/preview-image/${id}`)
-          }
-        >
-          Cek
-        </ButtonCustom>
-      ),
+      value:
+        (data && data?.imageId && (
+          <ButtonCustom
+            onPress={() =>
+              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]/list-of-donatur.tsx
+++ b/app/(application)/admin/donation/[id]/list-of-donatur.tsx
@@ -3,6 +3,7 @@ import {
  ActionIcon,
  BadgeCustom,
  CenterCustom,
+  LoaderCustom,
  SelectCustom,
  StackCustom,
  TextCustom,
@@ -23,30 +24,29 @@ import { Divider } from "react-native-paper";

 export default function AdminDonasiListOfDonatur() {
  const { id } = useLocalSearchParams();
-  console.log("[ID >>]", id);
  const [listData, setListData] = React.useState<any[] | null>(null);
+  const [loadData, setLoadData] = React.useState(false);
  const [master, setMaster] = React.useState<any[]>([]);

-  const [selectStatus, setSelectStatus] = React.useState<
-    "berhasil" | "gagal" | "proses" | "menunggu" | ""
-  >("");
+  const [selectValue, setSelectValue] = React.useState<string | null>(null);
+  const [selectedStatus, setSelectedStatus] = React.useState<string | null>(
+    null
+  );

  useFocusEffect(
    React.useCallback(() => {
      onLoadData();
-    }, [id, selectStatus])
+    }, [id, selectValue])
  );

  const onLoadData = async () => {
    try {
+      setLoadData(true);
      const response = await apiAdminDonationListOfDonatur({
        id: id as string,
-        status: "" as any,
+        status: selectedStatus as any,
      });
-      console.log(
-        "[LIST OF DONATUR]",
-        JSON.stringify(response, null, 2)
-      );
+      // console.log("[LIST OF DONATUR]", JSON.stringify(response, null, 2));

      if (response.success) {
        setListData(response.data);
@@ -54,6 +54,8 @@ export default function AdminDonasiListOfDonatur() {
    } catch (error) {
      console.log("[ERROR]", error);
      setListData([]);
+    } finally {
+      setLoadData(false);
    }
  };

@@ -64,7 +66,7 @@ export default function AdminDonasiListOfDonatur() {
  const onLoadMaster = async () => {
    try {
      const response = await apiMasterTransaction();
-     
+
      if (response.success) {
        setMaster(response.data);
      }
@@ -83,15 +85,18 @@ export default function AdminDonasiListOfDonatur() {
            ? []
            : master?.map((item: any) => ({
                label: item.name,
-                value: item.name
+                value: item.id,
              }))
        }
+        value={selectValue}
        onChange={(value: any) => {
-          console.log("[SELECT STATUS]", value);
-          const statusChooses = _.lowerCase(value);
-          setSelectStatus(statusChooses as 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>
  );
@@ -102,63 +107,78 @@ export default function AdminDonasiListOfDonatur() {
          <AdminBackButtonAntTitle newComponent={searchComponent} />
        }
      >
-        <GridViewCustomSpan
-          span1={3}
-          span2={5}
-          span3={4}
-          component1={
-            <TextCustom bold align="center">
-              Aksi
-            </TextCustom>
-          }
-          component2={
-            <TextCustom bold align="center">
-              Donatur
-            </TextCustom>
-          }
-          component3={
-            <TextCustom bold align="center">
-              Status
-            </TextCustom>
-          }
-        />
-        <Divider />
        <StackCustom>
-          {listData?.map((item: any, index: number) => (
-            <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}/berhasil/transaction-detail`
-                        );
-                      }}
-                    />
-                  </CenterCustom>
-                }
-                component2={
-                  <TextCustom bold align="center" truncate>
-                    {item?.Author?.username || "-"}
-                  </TextCustom>
-                }
-                component3={
-                  <BadgeCustom
-                    style={{ alignSelf: "center" }}
-                    color={colorBadgeTransaction({status: item?.DonasiMaster_StatusInvoice?.name})}
-                  >
-                    {item?.DonasiMaster_StatusInvoice?.name}
-                  </BadgeCustom>
-                }
-              />
-              <Divider />
-            </View>
-          ))}
+          <GridViewCustomSpan
+            span1={3}
+            span2={5}
+            span3={4}
+            component1={
+              <TextCustom bold align="center">
+                Aksi
+              </TextCustom>
+            }
+            component2={
+              <TextCustom bold align="center">
+                Donatur
+              </TextCustom>
+            }
+            component3={
+              <TextCustom bold align="center">
+                Status
+              </TextCustom>
+            }
+          />
+          <Divider />
+          <StackCustom>
+            {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}
+                    span2={5}
+                    span3={4}
+                    component1={
+                      <CenterCustom>
+                        <ActionIcon
+                          icon={
+                            <IconView size={ICON_SIZE_BUTTON} color="black" />
+                          }
+                          onPress={() => {
+                            router.push(
+                              `/admin/donation/${item?.id}/${_.lowerCase(
+                                item?.DonasiMaster_StatusInvoice?.name
+                              )}/transaction-detail`
+                            );
+                          }}
+                        />
+                      </CenterCustom>
+                    }
+                    component2={
+                      <TextCustom bold align="center" truncate>
+                        {item?.Author?.username || "-"}
+                      </TextCustom>
+                    }
+                    component3={
+                      <BadgeCustom
+                        style={{ alignSelf: "center" }}
+                        color={colorBadgeTransaction({
+                          status: item?.DonasiMaster_StatusInvoice?.name,
+                        })}
+                      >
+                        {item?.DonasiMaster_StatusInvoice?.name}
+                      </BadgeCustom>
+                    }
+                  />
+                </View>
+              ))
+            )}
+          </StackCustom>
        </StackCustom>
      </ViewWrapper>
    </>