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"
This commit is contained in:
134
screens/Admin/Donation/ScreenDonationListOfDonatur.tsx
Normal file
134
screens/Admin/Donation/ScreenDonationListOfDonatur.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import { SelectCustom } from "@/components";
|
||||
import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
|
||||
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
|
||||
import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
|
||||
import { createPaginationComponents } from "@/helpers/paginationHelpers";
|
||||
import { usePagination } from "@/hooks/use-pagination";
|
||||
import { apiAdminDonationListOfDonatur } from "@/service/api-admin/api-admin-donation";
|
||||
import { apiMasterTransaction } from "@/service/api-client/api-master";
|
||||
import { useLocalSearchParams } from "expo-router";
|
||||
import _ from "lodash";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { RefreshControl, View } from "react-native";
|
||||
import Admin_BoxDonationListOfDonatur from "./BoxDonationListOfDonatur";
|
||||
|
||||
export function Admin_ScreenDonationListOfDonatur() {
|
||||
const { id } = useLocalSearchParams();
|
||||
const [selectValue, setSelectValue] = useState<string | null>(null);
|
||||
const [selectedStatus, setSelectedStatus] = useState<string | null>(null);
|
||||
const [master, setMaster] = useState<any[]>([]);
|
||||
|
||||
// Gunakan hook pagination
|
||||
const pagination = usePagination({
|
||||
fetchFunction: async (page, searchQuery) => {
|
||||
const response = await apiAdminDonationListOfDonatur({
|
||||
id: id as string,
|
||||
status: selectedStatus as any,
|
||||
page: String(page),
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
return { data: response.data };
|
||||
} else {
|
||||
return { data: [] };
|
||||
}
|
||||
},
|
||||
pageSize: PAGINATION_DEFAULT_TAKE,
|
||||
searchQuery: "",
|
||||
dependencies: [id, selectedStatus],
|
||||
});
|
||||
|
||||
// Load master data untuk select option
|
||||
useEffect(() => {
|
||||
onLoadMaster();
|
||||
}, []);
|
||||
|
||||
const onLoadMaster = async () => {
|
||||
try {
|
||||
const response = await apiMasterTransaction();
|
||||
if (response.success) {
|
||||
setMaster(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("[ERROR]", error);
|
||||
setMaster([]);
|
||||
}
|
||||
};
|
||||
|
||||
// Komponen select untuk filter status
|
||||
const searchComponent = useMemo(
|
||||
() => (
|
||||
<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>
|
||||
),
|
||||
[master, selectValue],
|
||||
);
|
||||
|
||||
// Header component dengan back button dan select filter
|
||||
const headerComponent = useMemo(
|
||||
() => <AdminBackButtonAntTitle newComponent={searchComponent} />,
|
||||
[searchComponent],
|
||||
);
|
||||
|
||||
// Render item untuk daftar donatur
|
||||
const renderItem = useCallback(
|
||||
({ item, index }: { item: any; index: number }) => (
|
||||
<Admin_BoxDonationListOfDonatur key={index} item={item} />
|
||||
),
|
||||
[],
|
||||
);
|
||||
|
||||
// Buat komponen-komponen pagination
|
||||
const { ListEmptyComponent, ListFooterComponent } =
|
||||
createPaginationComponents({
|
||||
loading: pagination.loading,
|
||||
refreshing: pagination.refreshing,
|
||||
listData: pagination.listData,
|
||||
searchQuery: "",
|
||||
emptyMessage: "Belum ada data",
|
||||
emptySearchMessage: "Tidak ada hasil pencarian",
|
||||
isInitialLoad: pagination.isInitialLoad,
|
||||
skeletonCount: PAGINATION_DEFAULT_TAKE,
|
||||
skeletonHeight: 100,
|
||||
});
|
||||
|
||||
return (
|
||||
<NewWrapper
|
||||
listData={pagination.listData}
|
||||
renderItem={renderItem}
|
||||
keyExtractor={(item: any) => item.id?.toString() || `fallback-${item.id}`}
|
||||
headerComponent={headerComponent}
|
||||
ListEmptyComponent={ListEmptyComponent}
|
||||
ListFooterComponent={ListFooterComponent}
|
||||
onEndReached={pagination.loadMore}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={pagination.refreshing}
|
||||
onRefresh={pagination.onRefresh}
|
||||
tintColor="#E1B525"
|
||||
colors={["#E1B525"]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user