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:
36
screens/Admin/Donation/BoxDonationCategory.tsx
Normal file
36
screens/Admin/Donation/BoxDonationCategory.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import { TextCustom, BadgeCustom } from "@/components";
|
||||
import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
|
||||
import GridTwoView from "@/components/_ShareComponent/GridTwoView";
|
||||
import { router } from "expo-router";
|
||||
import { View } from "react-native";
|
||||
|
||||
export default function Admin_BoxDonationCategory({item}: {item: any}) {
|
||||
return (
|
||||
<>
|
||||
<AdminBasicBox
|
||||
onPress={() => {
|
||||
router.push(`/admin/donation/category-update?id=${item.id}`);
|
||||
}}
|
||||
style={{ marginHorizontal: 10, marginVertical: 5 }}
|
||||
>
|
||||
<GridTwoView
|
||||
leftItem={<TextCustom bold>{item?.name || "-"}</TextCustom>}
|
||||
rightItem={
|
||||
<View>
|
||||
{item?.active ? (
|
||||
<BadgeCustom color="green">Aktif</BadgeCustom>
|
||||
) : (
|
||||
<BadgeCustom color="red">Tidak Aktif</BadgeCustom>
|
||||
)}
|
||||
</View>
|
||||
}
|
||||
spanLeft={8}
|
||||
spanRight={4}
|
||||
styleRight={{
|
||||
alignItems: "flex-end",
|
||||
}}
|
||||
/>
|
||||
</AdminBasicBox>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import { Divider, StackCustom, TextCustom } from "@/components";
|
||||
import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
|
||||
import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
|
||||
import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
|
||||
import dayjs from "dayjs";
|
||||
import { router } from "expo-router";
|
||||
import { View } from "react-native";
|
||||
|
||||
interface BoxDonationListDisbursementOfFundsProps {
|
||||
item: any;
|
||||
}
|
||||
|
||||
export default function Admin_BoxDonationListDisbursementOfFunds({
|
||||
item,
|
||||
}: BoxDonationListDisbursementOfFundsProps) {
|
||||
return (
|
||||
<>
|
||||
<AdminBasicBox
|
||||
style={{ marginHorizontal: 10, marginVertical: 5 }}
|
||||
onPress={() => {
|
||||
router.push(
|
||||
`/admin/donation/${item?.id}/detail-disbursement-of-funds`,
|
||||
);
|
||||
}}
|
||||
>
|
||||
<StackCustom gap={0}>
|
||||
<View style={{ paddingBlock: 8 }}>
|
||||
<TextCustom size={"large"} bold truncate>
|
||||
{item?.title || "-"}
|
||||
</TextCustom>
|
||||
</View>
|
||||
<Divider />
|
||||
<GridSpan_4_8
|
||||
label={<TextCustom>Tanggal</TextCustom>}
|
||||
value={
|
||||
<TextCustom>
|
||||
{dayjs(item?.createdAt).format("DD-MM-YYYY") || "-"}
|
||||
</TextCustom>
|
||||
}
|
||||
/>
|
||||
<GridSpan_4_8
|
||||
label={<TextCustom>Nominal</TextCustom>}
|
||||
value={
|
||||
<TextCustom bold>
|
||||
Rp {formatCurrencyDisplay(item?.nominalCair)}
|
||||
</TextCustom>
|
||||
}
|
||||
/>
|
||||
</StackCustom>
|
||||
</AdminBasicBox>
|
||||
</>
|
||||
);
|
||||
}
|
||||
68
screens/Admin/Donation/BoxDonationListOfDonatur.tsx
Normal file
68
screens/Admin/Donation/BoxDonationListOfDonatur.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import {
|
||||
BadgeCustom,
|
||||
Divider,
|
||||
StackCustom,
|
||||
TextCustom
|
||||
} from "@/components";
|
||||
import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
|
||||
import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
|
||||
import { colorBadgeTransaction } from "@/utils/colorBadge";
|
||||
import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
|
||||
import { router } from "expo-router";
|
||||
import _ from "lodash";
|
||||
import { View } from "react-native";
|
||||
|
||||
interface BoxDonationListOfDonaturProps {
|
||||
item: any;
|
||||
}
|
||||
|
||||
export default function Admin_BoxDonationListOfDonatur({
|
||||
item,
|
||||
}: BoxDonationListOfDonaturProps) {
|
||||
const statusName = item?.DonasiMaster_StatusInvoice?.name || "-";
|
||||
return (
|
||||
<>
|
||||
<AdminBasicBox
|
||||
style={{ marginHorizontal: 10, marginVertical: 5 }}
|
||||
onPress={() => {
|
||||
router.push(
|
||||
`/admin/donation/${item?.id}/${_.lowerCase(
|
||||
item?.DonasiMaster_StatusInvoice?.name,
|
||||
)}/transaction-detail`,
|
||||
);
|
||||
}}
|
||||
>
|
||||
<StackCustom gap={0}>
|
||||
<View style={{ paddingBlock: 8 }}>
|
||||
<TextCustom size={"large"} bold truncate>
|
||||
{item?.Author?.username || "-"}
|
||||
</TextCustom>
|
||||
</View>
|
||||
<Divider />
|
||||
<GridSpan_4_8
|
||||
label={<TextCustom>Status</TextCustom>}
|
||||
value={
|
||||
<BadgeCustom
|
||||
color={colorBadgeTransaction({
|
||||
status: statusName,
|
||||
})}
|
||||
>
|
||||
{statusName}
|
||||
</BadgeCustom>
|
||||
}
|
||||
/>
|
||||
<GridSpan_4_8
|
||||
label={<TextCustom>Nominal</TextCustom>}
|
||||
value={
|
||||
<TextCustom>
|
||||
{item?.nominal
|
||||
? `Rp ${formatCurrencyDisplay(item?.nominal)}`
|
||||
: "-"}
|
||||
</TextCustom>
|
||||
}
|
||||
/>
|
||||
</StackCustom>
|
||||
</AdminBasicBox>
|
||||
</>
|
||||
);
|
||||
}
|
||||
54
screens/Admin/Donation/BoxDonationStatus.tsx
Normal file
54
screens/Admin/Donation/BoxDonationStatus.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import { Divider, StackCustom, TextCustom } from "@/components";
|
||||
import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
|
||||
import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
|
||||
import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
|
||||
import { router } from "expo-router";
|
||||
import { View } from "react-native";
|
||||
|
||||
interface BoxDonationStatusProps {
|
||||
item: any;
|
||||
status?: string;
|
||||
}
|
||||
|
||||
export default function Admin_BoxDonationStatus({
|
||||
item,
|
||||
status,
|
||||
}: BoxDonationStatusProps) {
|
||||
return (
|
||||
<>
|
||||
<AdminBasicBox
|
||||
style={{ marginHorizontal: 10, marginVertical: 5 }}
|
||||
onPress={() => {
|
||||
router.push(`/admin/donation/${item.id}/${status}`);
|
||||
}}
|
||||
>
|
||||
<StackCustom gap={0}>
|
||||
<View style={{ paddingBlock: 8 }}>
|
||||
<TextCustom size={"large"} bold truncate={2}>
|
||||
{item?.title || "-"}
|
||||
</TextCustom>
|
||||
</View>
|
||||
<Divider />
|
||||
<GridSpan_4_8
|
||||
label={<TextCustom>Durasi</TextCustom>}
|
||||
value={
|
||||
<TextCustom>
|
||||
{item?.DonasiMaster_Durasi?.name || "-"} hari
|
||||
</TextCustom>
|
||||
}
|
||||
/>
|
||||
<GridSpan_4_8
|
||||
label={<TextCustom>Target</TextCustom>}
|
||||
value={
|
||||
<TextCustom>
|
||||
{item?.target
|
||||
? `Rp ${formatCurrencyDisplay(item?.target)}`
|
||||
: "-"}
|
||||
</TextCustom>
|
||||
}
|
||||
/>
|
||||
</StackCustom>
|
||||
</AdminBasicBox>
|
||||
</>
|
||||
);
|
||||
}
|
||||
107
screens/Admin/Donation/ScreenDonationCategory.tsx
Normal file
107
screens/Admin/Donation/ScreenDonationCategory.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import { BadgeCustom, TextCustom } from "@/components";
|
||||
import AdminActionIconPlus from "@/components/_ShareComponent/Admin/ActionIconPlus";
|
||||
import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
|
||||
import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
|
||||
import GridTwoView from "@/components/_ShareComponent/GridTwoView";
|
||||
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 { apiAdminMasterDonationCategory } from "@/service/api-admin/api-master-admin";
|
||||
import { router, useFocusEffect } from "expo-router";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { RefreshControl, View } from "react-native";
|
||||
import Admin_BoxDonationCategory from "./BoxDonationCategory";
|
||||
|
||||
export function Admin_ScreenDonationCategory() {
|
||||
const [search, setSearch] = useState<string>("");
|
||||
|
||||
// Gunakan hook pagination
|
||||
const pagination = usePagination({
|
||||
fetchFunction: async (page, searchQuery) => {
|
||||
const response = await apiAdminMasterDonationCategory({
|
||||
page: String(page),
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
return { data: response.data };
|
||||
} else {
|
||||
return { data: [] };
|
||||
}
|
||||
},
|
||||
pageSize: PAGINATION_DEFAULT_TAKE,
|
||||
searchQuery: search,
|
||||
dependencies: [],
|
||||
});
|
||||
|
||||
// Komponen action plus untuk header
|
||||
const rightComponent = useMemo(
|
||||
() => (
|
||||
<AdminActionIconPlus
|
||||
onPress={() => {
|
||||
router.push(`/admin/donation/category-create`);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
[],
|
||||
);
|
||||
|
||||
// Header component untuk title
|
||||
const headerComponent = useMemo(
|
||||
() => (
|
||||
<AdminComp_BoxTitle
|
||||
title="Kategori Donasi"
|
||||
rightComponent={rightComponent}
|
||||
/>
|
||||
),
|
||||
[rightComponent],
|
||||
);
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
pagination.onRefresh();
|
||||
}, []),
|
||||
);
|
||||
|
||||
// Render item untuk daftar kategori donasi
|
||||
const renderItem = useCallback(
|
||||
({ item, index }: { item: any; index: number }) => (
|
||||
<Admin_BoxDonationCategory key={index} item={item} />
|
||||
),
|
||||
[],
|
||||
);
|
||||
|
||||
// Buat komponen-komponen pagination
|
||||
const { ListEmptyComponent, ListFooterComponent } =
|
||||
createPaginationComponents({
|
||||
loading: pagination.loading,
|
||||
refreshing: pagination.refreshing,
|
||||
listData: pagination.listData,
|
||||
searchQuery: search,
|
||||
emptyMessage: "Belum ada data",
|
||||
emptySearchMessage: "Tidak ada hasil pencarian",
|
||||
isInitialLoad: pagination.isInitialLoad,
|
||||
skeletonCount: PAGINATION_DEFAULT_TAKE,
|
||||
skeletonHeight: 80,
|
||||
});
|
||||
|
||||
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"]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
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 { apiAdminDonationDisbursementOfFundsListById } from "@/service/api-admin/api-admin-donation";
|
||||
import { useLocalSearchParams } from "expo-router";
|
||||
import { useCallback, useMemo } from "react";
|
||||
import { RefreshControl } from "react-native";
|
||||
import Admin_BoxDonationListDisbursementOfFunds from "./BoxDonationListDisbursementOfFunds";
|
||||
|
||||
export function Admin_ScreenDonationListDisbursementOfFunds() {
|
||||
const { id } = useLocalSearchParams();
|
||||
|
||||
// Gunakan hook pagination
|
||||
const pagination = usePagination({
|
||||
fetchFunction: async (page, searchQuery) => {
|
||||
const response = await apiAdminDonationDisbursementOfFundsListById({
|
||||
id: id as string,
|
||||
category: "get-all",
|
||||
page: String(page),
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
return { data: response.data };
|
||||
} else {
|
||||
return { data: [] };
|
||||
}
|
||||
},
|
||||
pageSize: PAGINATION_DEFAULT_TAKE,
|
||||
searchQuery: "",
|
||||
dependencies: [id],
|
||||
});
|
||||
|
||||
// Header component dengan back button dan title
|
||||
const headerComponent = useMemo(
|
||||
() => <AdminBackButtonAntTitle title="Daftar Pencairan Dana" />,
|
||||
[],
|
||||
);
|
||||
|
||||
// Render item untuk daftar pencairan dana
|
||||
const renderItem = useCallback(
|
||||
({ item, index }: { item: any; index: number }) => (
|
||||
<Admin_BoxDonationListDisbursementOfFunds 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"]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
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"]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
112
screens/Admin/Donation/ScreenDonationStatus.tsx
Normal file
112
screens/Admin/Donation/ScreenDonationStatus.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
import { ActionIcon, SearchInput, TextCustom } from "@/components";
|
||||
import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
|
||||
import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
|
||||
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
|
||||
import {
|
||||
ICON_SIZE_BUTTON,
|
||||
PAGINATION_DEFAULT_TAKE,
|
||||
} from "@/constants/constans-value";
|
||||
import { createPaginationComponents } from "@/helpers/paginationHelpers";
|
||||
import { usePagination } from "@/hooks/use-pagination";
|
||||
import { apiAdminDonation } from "@/service/api-admin/api-admin-donation";
|
||||
import { Octicons } from "@expo/vector-icons";
|
||||
import { router, useLocalSearchParams } from "expo-router";
|
||||
import _ from "lodash";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { RefreshControl } from "react-native";
|
||||
import Admin_BoxDonationStatus from "./BoxDonationStatus";
|
||||
|
||||
export function Admin_ScreenDonationStatus() {
|
||||
const { status } = useLocalSearchParams();
|
||||
const [search, setSearch] = useState<string>("");
|
||||
|
||||
// Gunakan hook pagination
|
||||
const pagination = usePagination({
|
||||
fetchFunction: async (page, searchQuery) => {
|
||||
const response = await apiAdminDonation({
|
||||
category: status as "publish" | "review" | "reject",
|
||||
search: searchQuery,
|
||||
page: String(page),
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
return { data: response.data };
|
||||
} else {
|
||||
return { data: [] };
|
||||
}
|
||||
},
|
||||
pageSize: PAGINATION_DEFAULT_TAKE,
|
||||
searchQuery: search,
|
||||
dependencies: [status],
|
||||
});
|
||||
|
||||
// Komponen search input untuk header
|
||||
const rightComponent = useMemo(
|
||||
() => (
|
||||
<SearchInput
|
||||
containerStyle={{ width: "100%", marginBottom: 0 }}
|
||||
placeholder="Cari judul donasi"
|
||||
value={search}
|
||||
onChangeText={(value) => setSearch(value)}
|
||||
/>
|
||||
),
|
||||
[search],
|
||||
);
|
||||
|
||||
// Render item untuk daftar donasi
|
||||
const renderItem = useCallback(
|
||||
({ item, index }: { item: any; index: number }) => (
|
||||
<Admin_BoxDonationStatus
|
||||
key={index}
|
||||
item={item}
|
||||
status={status as string}
|
||||
/>
|
||||
),
|
||||
[status],
|
||||
);
|
||||
|
||||
// Header component dengan judul status donasi
|
||||
const headerComponent = useMemo(
|
||||
() => (
|
||||
<AdminComp_BoxTitle
|
||||
title={`Donasi ${_.startCase(status as string)}`}
|
||||
rightComponent={rightComponent}
|
||||
/>
|
||||
),
|
||||
[status, rightComponent],
|
||||
);
|
||||
|
||||
// Buat komponen-komponen pagination
|
||||
const { ListEmptyComponent, ListFooterComponent } =
|
||||
createPaginationComponents({
|
||||
loading: pagination.loading,
|
||||
refreshing: pagination.refreshing,
|
||||
listData: pagination.listData,
|
||||
searchQuery: search,
|
||||
emptyMessage: "Belum ada data",
|
||||
emptySearchMessage: "Tidak ada hasil pencarian",
|
||||
isInitialLoad: pagination.isInitialLoad,
|
||||
skeletonCount: PAGINATION_DEFAULT_TAKE,
|
||||
skeletonHeight: 120,
|
||||
});
|
||||
|
||||
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"]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -49,7 +49,7 @@ export function Admin_ScreenEventTypeOfEvent() {
|
||||
// Header component untuk title
|
||||
const headerComponent = useMemo(
|
||||
() => (
|
||||
<AdminComp_BoxTitle title="Tipe Acara" rightComponent={rightComponent} />
|
||||
<AdminComp_BoxTitle title="Tipe Acara Event" rightComponent={rightComponent} />
|
||||
),
|
||||
[rightComponent],
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user