Fixed Admin UI

Admin – Donation Pages
- app/(application)/admin/donation/[id]/detail-disbursement-of-funds.tsx
- app/(application)/admin/donation/[id]/list-disbursement-of-funds.tsx
- app/(application)/admin/donation/[id]/list-of-donatur.tsx
- app/(application)/admin/donation/[status]/status.tsx
- app/(application)/admin/donation/category-update.tsx
- app/(application)/admin/donation/category.tsx

Admin Services
- service/api-admin/api-admin-donation.ts
- service/api-admin/api-master-admin.ts

Admin Screens (Updated)
- screens/Admin/Voting/ScreenEventTypeOfEvent.tsx

Docs
- docs/prompt-for-qwen-code.md

New Donation Components
- screens/Admin/Donation/BoxDonationCategory.tsx
- screens/Admin/Donation/BoxDonationListDisbursementOfFunds.tsx
- screens/Admin/Donation/BoxDonationListOfDonatur.tsx
- screens/Admin/Donation/BoxDonationStatus.tsx

New Donation Screens
- screens/Admin/Donation/ScreenDonationCategory.tsx
- screens/Admin/Donation/ScreenDonationListDisbursementOfFunds.tsx
- screens/Admin/Donation/ScreenDonationListOfDonatur.tsx
- screens/Admin/Donation/ScreenDonationStatus.tsx

### No Issue"

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

@@ -42,19 +42,19 @@ export default function AdminDonationDetailDisbursementOfFunds() {
   const listData = [
     {
       label: "Nominal",
-      value: `Rp ${(data && formatCurrencyDisplay(data?.nominalCair)) || 0}`,
+      value: `Rp ${data ? formatCurrencyDisplay(data?.nominalCair) : 0}`,
     },
     {
       label: "Tanggal",
-      value: dateTimeView({ date: data?.createdAt }),
+      value: data ? dateTimeView({ date: data?.createdAt }) : "-",
     },
     {
       label: "Judul",
-      value: (data && data?.title) || "-",
+      value: data ? data?.title : "-",
     },
     {
       label: "Deskripsi",
-      value: (data && data?.deskripsi) || "-",
+      value: data ? data?.deskripsi : "-",
     },
   ];
   return (

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

@@ -1,126 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  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, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import React, { useCallback } from "react";
-import { View } from "react-native";
+import { Admin_ScreenDonationListDisbursementOfFunds } from "@/screens/Admin/Donation/ScreenDonationListDisbursementOfFunds";
 
 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
-        headerComponent={
-          <AdminBackButtonAntTitle title="Daftar Pencairan Dana" />
-        }
-      >
-        <GridViewCustomSpan
-          span1={3}
-          span2={5}
-          span3={4}
-          component1={
-            <TextCustom bold align="center">
-              Aksi
-            </TextCustom>
-          }
-          component2={
-            <TextCustom bold align="center">
-              Tanggal
-            </TextCustom>
-          }
-          component3={
-            <TextCustom bold align="center">
-              Nominal
-            </TextCustom>
-          }
-        />
-        <Divider />
-        <StackCustom>
-          {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>
-    </>
-  );
+  return <Admin_ScreenDonationListDisbursementOfFunds />;
 }

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

@@ -1,186 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  ActionIcon,
-  BadgeCustom,
-  CenterCustom,
-  LoaderCustom,
-  SelectCustom,
-  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 { 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";
+import { Admin_ScreenDonationListOfDonatur } from "@/screens/Admin/Donation/ScreenDonationListOfDonatur";
 
 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={
-          _.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>
-  );
-  return (
-    <>
-      <ViewWrapper
-        headerComponent={
-          <AdminBackButtonAntTitle newComponent={searchComponent} />
-        }
-      >
-        <StackCustom>
-          <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>
-    </>
-  );
+  return <Admin_ScreenDonationListOfDonatur />;
 }

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

@@ -1,117 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  ActionIcon,
-  LoaderCustom,
-  SearchInput,
-  StackCustom,
-  TextCustom,
-  ViewWrapper
-} from "@/components";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
-import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
-import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import { apiAdminDonation } from "@/service/api-admin/api-admin-donation";
-import { Octicons } from "@expo/vector-icons";
-import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { Divider } from "react-native-paper";
+import { Admin_ScreenDonationStatus } from "@/screens/Admin/Donation/ScreenDonationStatus";
 
 export default function AdminDonationStatus() {
-  const { status } = useLocalSearchParams();
-  console.log("[STATUS]", status);
-
-  const [data, setData] = useState<any | null>(null);
-  const [search, setSearch] = useState<string>("");
-  const [loadData, setLoadData] = useState<boolean>(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [status, search])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setLoadData(true);
-      const response = await apiAdminDonation({
-        category: status as "publish" | "review" | "reject",
-        search,
-      });
-
-      console.log("[RES]", JSON.stringify(response, null, 2));
-
-      if (response.success) {
-        setData(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-      setData([]);
-    } finally {
-      setLoadData(false);
-    }
-  };
-
-  const rightComponent = (
-    <SearchInput
-      containerStyle={{ width: "100%", marginBottom: 0 }}
-      placeholder="Cari"
-      value={search}
-      onChangeText={(value) => setSearch(value)}
-    />
-  );
-  return (
-    <>
-      <ViewWrapper headerComponent={<AdminTitlePage title="Donasi" />}>
-        <StackCustom gap={"sm"}>
-          <AdminComp_BoxTitle
-            title={`${_.startCase(status as string)}`}
-            rightComponent={rightComponent}
-          />
-          <AdminTitleTable
-            title1="Aksi"
-            title2="Username"
-            title3="Judul Donasi"
-          />
-          <Divider />
-
-          {loadData ? (
-            <LoaderCustom />
-          ) : _.isEmpty(data) ? (
-            <TextCustom align="center" size="small" color="gray">
-              Belum ada data
-            </TextCustom>
-          ) : (
-            data?.map((item: any, index: number) => (
-              <AdminTableValue
-                key={index}
-                value1={
-                  <ActionIcon
-                    icon={
-                      <Octicons
-                        name="eye"
-                        size={ICON_SIZE_BUTTON}
-                        color="black"
-                      />
-                    }
-                    onPress={() => {
-                      router.push(`/admin/donation/${item.id}/${status}`);
-                    }}
-                  />
-                }
-                value2={<TextCustom truncate={1}>{item?.Author?.username || "-"}</TextCustom>}
-                value3={
-                  <TextCustom truncate={2}>
-                    {item?.title || "-"}
-                  </TextCustom>
-                }
-              />
-            ))
-          )}
-        </StackCustom>
-      </ViewWrapper>
-    </>
-  );
+  return <Admin_ScreenDonationStatus />;
 }

app/(application)/admin/donation/category-update.tsx

@@ -30,7 +30,6 @@ export default function AdminDonationCategoryUpdate() {
       const response = await apiAdminMasterDonationCategoryById({
         id: id as any,
       });
-      console.log(JSON.stringify(response.data, null, 2));
 
       setData(response.data);
     };
@@ -44,10 +43,9 @@ export default function AdminDonationCategoryUpdate() {
         id: id as any,
         data: data,
       });
-      console.log(JSON.stringify(response.data, null, 2));
       router.back();
     } catch (error) {
-      console.log(error);
+      console.log("Error update category:", error);
     } finally {
       setIsLoading(false);
     }

app/(application)/admin/donation/category.tsx

@@ -1,135 +1,5 @@
-import {
-  BadgeCustom,
-  CenterCustom,
-  ClickableCustom,
-  Spacing,
-  StackCustom,
-  TextCustom,
-  ViewWrapper
-} from "@/components";
-import AdminActionIconPlus from "@/components/_ShareComponent/Admin/ActionIconPlus";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
-import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
-import { apiAdminMasterDonationCategory } from "@/service/api-admin/api-master-admin";
-import { colorActivationForBadge } from "@/utils/colorActivationForBadge";
-import { router, useFocusEffect } from "expo-router";
-import { useCallback, useState } from "react";
-import { RefreshControl, View } from "react-native";
-import { Divider } from "react-native-paper";
+import { Admin_ScreenDonationCategory } from "@/screens/Admin/Donation/ScreenDonationCategory";
 
 export default function AdminDonationCategory() {
-  const [listData, setListData] = useState<any[]>([]);
-  const [refreshing, setRefreshing] = useState(false);
-  const [loading, setLoading] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      fetchMaster();
-    }, [])
-  );
-
-  const fetchMaster = async () => {
-    try {
-      setLoading(true);
-      const response = await apiAdminMasterDonationCategory();
-      if (response.success) {
-        console.log(JSON.stringify(response.data, null, 2));
-        setListData(response.data);
-      } else {
-        setListData([]);
-      }
-    } catch (error) {
-      console.log("[Error]", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const onRefresh = async () => {
-    setRefreshing(true);
-    await fetchMaster();
-    setRefreshing(false);
-  };
-
-  return (
-    <>
-      <ViewWrapper
-        refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-        }
-        headerComponent={<AdminTitlePage title="Donasi" />}
-      >
-        <AdminComp_BoxTitle
-          title="Kategori"
-          rightComponent={
-            <AdminActionIconPlus
-              onPress={() => {
-                router.push(`/admin/donation/category-create`);
-              }}
-            />
-          }
-        />
-
-        <View>
-          <GridSpan_4_8
-            label={<TextCustom bold>Status</TextCustom>}
-            value={<TextCustom bold>Kategori</TextCustom>}
-          />
-          {/* <Grid>
-            <Grid.Col style={{ paddingLeft: 10 }} span={4}>
-              <TextCustom bold>Status</TextCustom>
-            </Grid.Col>
-            <Grid.Col span={8}>
-              <TextCustom bold>Kategori</TextCustom>
-            </Grid.Col>
-          </Grid> */}
-
-          <Divider />
-          <Spacing />
-
-          <StackCustom>
-            {listData.map((item, index) => (
-              <ClickableCustom
-                onPress={() => {
-                  router.push(`/admin/donation/category-update?id=${item.id}`);
-                }}
-                key={index}
-              >
-                <GridSpan_4_8
-                  label={
-                    <CenterCustom>
-                      <BadgeCustom
-                        color={colorActivationForBadge({
-                          status: item.active,
-                        })}
-                      >
-                        {item.active ? "Aktif" : "Tidak Aktif"}
-                      </BadgeCustom>
-                    </CenterCustom>
-                  }
-                  value={<TextCustom>{item.name}</TextCustom>}
-                />
-                {/* <Grid containerStyle={{ paddingBottom: 10 }}>
-                  <Grid.Col span={4} style={{ paddingLeft: 10 }}>
-                    <CenterCustom>
-                      <BadgeCustom
-                        color={item.active ? MainColor.green : MainColor.red}
-                      >
-                        {item.active ? "Aktif" : "Tidak Aktif"}
-                      </BadgeCustom>
-                    </CenterCustom>
-                  </Grid.Col>
-                  <Grid.Col span={8}>
-                    <TextCustom bold>{item.name}</TextCustom>
-                  </Grid.Col>
-                </Grid> */}
-                <Divider />
-              </ClickableCustom>
-            ))}
-          </StackCustom>
-        </View>
-      </ViewWrapper>
-    </>
-  );
+  return <Admin_ScreenDonationCategory />;
 }