wibu/hipmi-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed Admin UI

Browse Source 
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:
bagasbanuna
2026-02-18 17:19:46 +08:00
parent 76845b71b4
commit 1d61ad51e5
18 changed files with 690 additions and 573 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 (

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

@@ -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 />;
}

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

@@ -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 />;
}

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

@@ -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 />;
}

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

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

134
app/(application)/admin/donation/category.tsx
View File

@@ -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 />;
}

27
docs/prompt-for-qwen-code.md
View File

@@ -55,10 +55,10 @@ Component yang digunakan: components/_ShareComponent/NewWrapper.tsx
<!-- START Prompt Admin Refactoring -->
<!-- Pindah kode ke Screen Component -->
File source: app/(application)/admin/event/type-of-event.tsx
Folder tujuan: screens/Admin/Voting
Nama file utama: ScreenEventTypeOfEvent.tsx
Nama function utama: Admin_ScreenEventTypeOfEvent
File source: app/(application)/admin/donation/[id]/list-disbursement-of-funds.tsx
Folder tujuan: screens/Admin/Donation
Nama file utama: ScreenDonationListDisbursementOfFunds.tsx
Nama function utama: Admin_ScreenDonationListDisbursementOfFunds
File komponen wrapper: components/_ShareComponent/NewWrapper.tsx
Buat file baru pada "Folder tujuan" dengan nama "Nama file utama" dan ubah nama function menjadi "Nama function utama" kemudian clean code, import dan panggil function tersebut pada file "File source"
@@ -66,8 +66,8 @@ Analisa juga file "Nama file utama" , jika belum menggunakan NewWrapper pada fil
<!-- Penerapan Pagination -->
Function fecth: apiAdminMasterTypeOfEvent
File function fetch: service/api-admin/api-master-admin.ts
Function fecth: apiAdminDonationDisbursementOfFundsListById
File function fetch: service/api-admin/api-admin-donation.ts
Terapkan pagination pada file "Nama file utama"
Komponen pagination yang digunaka berada pada file hooks/use-pagination.tsx dan helpers/paginationHelpers.tsx
@@ -75,13 +75,16 @@ Perbaiki fetch "Function fecth" , pada file "File function fetch"
Jika tidak ada props page maka tambahkan props page dan default page: "1" ( string )
Kemudian rapikan code nya pisah komponen seperti render item dan lainnya agar lebih rapi dan di dalam return panggil komponen tersebut
Gunakan bahasa indonesia pada cli agar saya mudah membacanya.
<!-- END Prompt Admin Refactoring -->
<!-- Additional -->
File refrensi: screens/Admin/Event/ScreenVotingStatus.tsx
File refrensi: screens/Admin/Voting/ScreenEventTypeOfEvent.tsx
Anda bisa menggunakan refrensi dari "File refrensi" jika butuh pemahaman dengan tipe fitur yang hampir sama
Untuk refrensi tampilan Box bisa anda gunakan dari file: screens/Admin/Donation/BoxDonationCategory.tsx dan buatkan komponen yang mirip untuk list of donatur dengan nama file: BoxDonationListOfDonatur.tsx
<!-- Use Prompt Now -->
Terapkan NewWrapper pada file: screens/Admin/App-Information/InformationBankSection.tsx
Component yang digunakan: components/_ShareComponent/NewWrapper.tsx
@@ -95,7 +98,7 @@ Perbaiki fetch "Function fecth" , pada file "File function fetch"
Jika tidak ada props page maka tambahkan props page dan default page: "1" ( string )
<!-- Baru -->
<!-- Create FlatList -->
File Utama: screens/Admin/App-Information/InformationBankSection.tsx
Terapkan FlatList dan pagination pada file "File Utama"
Komponen pagination yang digunaka berada pada file hooks/use-pagination.tsx dan helpers/paginationHelpers.tsx
@@ -103,4 +106,12 @@ Function fecth: apiAdminMasterBank
File function fetch: service/api-admin/api-master-admin.ts
Jika tidak ada props page maka tambahkan props page dan default page: "1" ( string )
Jika butuh refrensi FlatList bisa lihat pada file components/_ShareComponent/NewWrapper.tsx
<!-- Create Box -->
File Utama: screens/Admin/Donation/Admin_ScreenDonationStatus.tsx
Folder tujuan: screens/Admin/Donation
Buat box component baru pada file "File Utama" di bagian renderItem,
<!-- END Create Box -->
<!-- END Use Prompt Now -->

36
screens/Admin/Donation/BoxDonationCategory.tsx Normal file
View 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>
</>
)
}

53
screens/Admin/Donation/BoxDonationListDisbursementOfFunds.tsx Normal file
View File

@@ -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
View 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
View 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
View 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"]}
/>
}
/>
);
}

82
screens/Admin/Donation/ScreenDonationListDisbursementOfFunds.tsx Normal file
View File

@@ -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
View 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
View 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"]}
/>
}
/>
);
}

2
screens/Admin/Voting/ScreenEventTypeOfEvent.tsx
View File

@@ -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],
);

12
service/api-admin/api-admin-donation.ts
View File

@@ -4,13 +4,15 @@ import { apiConfig } from "../api-config";
export async function apiAdminDonation({
category,
search,
page = "1",
}: {
category: "dashboard" | "publish" | "review" | "reject";
search?: string;
page?: string;
}) {
try {
const response = await apiConfig.get(
`/mobile/admin/donation?category=${category}&search=${search}`
`/mobile/admin/donation?category=${category}&search=${search}&page=${page}`
);
return response.data;
} catch (error) {
@@ -131,12 +133,16 @@ export async function apiAdminDonationDisbursementOfFundsCreated({
export async function apiAdminDonationDisbursementOfFundsListById({
id,
category,
page = "1",
}: {
id: string;
category: "get-all" | "get-one"
category: "get-all" | "get-one";
page?: string;
}) {
try {
const response = await apiConfig.get(`/mobile/admin/donation/${id}/disbursement?category=${category}`);
const response = await apiConfig.get(
`/mobile/admin/donation/${id}/disbursement?category=${category}&page=${page}`
);
return response.data;
} catch (error) {
throw error;

4
service/api-admin/api-master-admin.ts
View File

@@ -193,9 +193,9 @@ export async function apiAdminMasterTypeOfEventUpdate({
// ================== START DONATION ================== //
export async function apiAdminMasterDonationCategory() {
export async function apiAdminMasterDonationCategory({ page = "1" }: { page?: string }) {
try {
const response = await apiConfig.get(`/mobile/admin/master/donation`);
const response = await apiConfig.get(`/mobile/admin/master/donation?page=${page}`);
return response.data;
} catch (error) {
throw error;