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

Merge pull request 'Saya telah melakukan serangkaian perubahan penting dalam pengembangan aplikasi HIPMI Mobile, khususnya dalam modul' (#51) from loaddata/10-feb-26 into staging

Browse Source 
Reviewed-on: http://wibugit.wibudev.com/wibu/hipmi-mobile/pulls/51
This commit is contained in:
bagasbanuna
2026-02-10 17:35:05 +08:00
parent 2f2b5a460f b2be7be533
commit 415243ec6d
25 changed files with 987 additions and 766 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
app/(application)/(user)/donation/(tabs)/index.tsx
View File

@@ -1,56 +1,9 @@
import { import Donation_ScreenBeranda from "@/screens/Donation/ScreenBeranda";
FloatingButton,
LoaderCustom,
TextCustom,
ViewWrapper,
} from "@/components";
import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
import { apiDonationGetAll } from "@/service/api-client/api-donation";
import { router, useFocusEffect } from "expo-router";
import _ from "lodash";
import { useCallback, useState } from "react";
export default function DonationBeranda() { export default function DonationBeranda() {
const [list, setList] = useState<any[] | null>(null);
const [loadList, setLoadList] = useState(false);
useFocusEffect(
useCallback(() => {
onLoadData();
}, [])
);
const onLoadData = async () => {
try {
setLoadList(true);
const response = await apiDonationGetAll({
category: "beranda"
});
setList(response.data);
} catch (error) {
console.log("[ERROR]", error);
} finally {
setLoadList(false);
}
};
return ( return (
<ViewWrapper <>
hideFooter <Donation_ScreenBeranda />
floatingButton={ </>
<FloatingButton onPress={() => router.push("/donation/create")} />
}
>
{loadList ? (
<LoaderCustom />
) : _.isEmpty(list) ? (
<TextCustom align="center" color="gray">Belum ada donasi</TextCustom>
) : (
list?.map((item: any, index: number) => (
<Donation_BoxPublish data={item} key={index} id={item.id} />
))
)}
</ViewWrapper>
); );
} }

147
app/(application)/(user)/donation/(tabs)/my-donation.tsx
View File

@@ -1,148 +1,5 @@
/* eslint-disable react-hooks/exhaustive-deps */ import Donation_ScreenMyDonation from "@/screens/Donation/ScreenMyDonation";
import {
BadgeCustom,
BaseBox,
DummyLandscapeImage,
Grid,
LoaderCustom,
StackCustom,
TextCustom,
ViewWrapper,
} from "@/components";
import { useAuth } from "@/hooks/use-auth";
import { apiDonationGetAll } from "@/service/api-client/api-donation";
import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
import { Href, router, useFocusEffect } from "expo-router";
import _ from "lodash";
import { useCallback, useState } from "react";
import { View } from "react-native";
import Toast from "react-native-toast-message";
export default function DonationMyDonation() { export default function DonationMyDonation() {
const { user } = useAuth(); return <Donation_ScreenMyDonation />;
const [list, setList] = useState<any[] | null>(null);
const [loadList, setLoadList] = useState(false);
useFocusEffect(
useCallback(() => {
onLoadData();
}, [user?.id]),
);
const onLoadData = async () => {
if (!user?.id) {
Toast.show({
type: "error",
text1: "Load data gagal, user tidak ditemukan",
});
return;
}
try {
setLoadList(true);
const response = await apiDonationGetAll({
category: "my-donation",
authorId: user?.id,
});
setList(response.data);
} catch (error) {
console.log("[ERROR]", error);
} finally {
setLoadList(false);
}
};
const handlerColor = (status: string) => {
if (status === "menunggu") {
return "orange";
} else if (status === "proses") {
return "white";
} else if (status === "berhasil") {
return "green";
} else if (status === "gagal") {
return "red";
}
};
const handlePress = ({
invoiceId,
donationId,
status,
}: {
invoiceId: string;
donationId: string;
status: string;
}) => {
const url: Href = `../${donationId}/(transaction-flow)/${invoiceId}`;
if (status === "menunggu") {
router.push(`${url}/invoice`);
} else if (status === "proses") {
router.push(`${url}/process`);
} else if (status === "berhasil") {
router.push(`${url}/success`);
} else if (status === "gagal") {
router.push(`${url}/failed`);
}
};
return (
<ViewWrapper hideFooter>
{loadList ? (
<LoaderCustom />
) : _.isEmpty(list) ? (
<TextCustom align="center" color="gray">
Belum ada transaksi
</TextCustom>
) : (
list?.map((item, index) => (
<BaseBox
key={index}
paddingTop={7}
paddingBottom={7}
onPress={() => {
handlePress({
status: _.lowerCase(item.statusInvoice),
invoiceId: item.id,
donationId: item.donasiId,
});
}}
>
<Grid>
<Grid.Col span={5}>
<DummyLandscapeImage
height={100}
unClickPath
imageId={item.imageId}
/>
</Grid.Col>
<Grid.Col span={1}>
<View />
</Grid.Col>
<Grid.Col span={6}>
<StackCustom>
<TextCustom truncate={2} bold>
{item.title || "-"}
</TextCustom>
<TextCustom bold color="yellow">
Rp. {formatCurrencyDisplay(item.nominal)}
</TextCustom>
<BadgeCustom
variant="light"
color={handlerColor(_.lowerCase(item.statusInvoice))}
fullWidth
>
{item.statusInvoice}
</BadgeCustom>
</StackCustom>
</Grid.Col>
</Grid>
</BaseBox>
))
)}
</ViewWrapper>
);
} }

28
app/(application)/(user)/donation/[id]/(news)/[news]/edit-news.tsx
View File

@@ -1,5 +1,6 @@
/* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable react-hooks/exhaustive-deps */
import { import {
BoxButtonOnFooter,
ButtonCenteredOnly, ButtonCenteredOnly,
ButtonCustom, ButtonCustom,
InformationBox, InformationBox,
@@ -31,7 +32,7 @@ export default function DonationEditNews() {
useFocusEffect( useFocusEffect(
useCallback(() => { useCallback(() => {
onLoadData(); onLoadData();
}, [news]) }, [news]),
); );
const onLoadData = async () => { const onLoadData = async () => {
@@ -104,7 +105,21 @@ export default function DonationEditNews() {
}; };
return ( return (
<ViewWrapper> <ViewWrapper
footerComponent={
<BoxButtonOnFooter>
<ButtonCustom
disabled={!data?.title || !data?.deskripsi}
isLoading={isLoading}
onPress={() => {
handlerSubmitUpdate();
}}
>
Update
</ButtonCustom>
</BoxButtonOnFooter>
}
>
<StackCustom gap={"xs"}> <StackCustom gap={"xs"}>
<InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." /> <InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." />
<LandscapeFrameUploaded <LandscapeFrameUploaded
@@ -148,15 +163,6 @@ export default function DonationEditNews() {
/> />
<Spacing /> <Spacing />
<ButtonCustom
disabled={!data?.title || !data?.deskripsi}
isLoading={isLoading}
onPress={() => {
handlerSubmitUpdate();
}}
>
Update
</ButtonCustom>
</StackCustom> </StackCustom>
<Spacing /> <Spacing />
</ViewWrapper> </ViewWrapper>

32
app/(application)/(user)/donation/[id]/(news)/add-news.tsx
View File

@@ -1,8 +1,10 @@
import { import {
BoxButtonOnFooter,
ButtonCenteredOnly, ButtonCenteredOnly,
ButtonCustom, ButtonCustom,
InformationBox, InformationBox,
LandscapeFrameUploaded, LandscapeFrameUploaded,
NewWrapper,
Spacing, Spacing,
StackCustom, StackCustom,
TextAreaCustom, TextAreaCustom,
@@ -53,7 +55,7 @@ export default function DonationAddNews() {
text1: "Gagal menambah berita", text1: "Gagal menambah berita",
}); });
return return;
} }
Toast.show({ Toast.show({
@@ -70,7 +72,21 @@ export default function DonationAddNews() {
}; };
return ( return (
<ViewWrapper> <NewWrapper
footerComponent={
<BoxButtonOnFooter>
<ButtonCustom
disabled={!data.title || !data.deskripsi}
isLoading={isLoading}
onPress={() => {
handlerSubmit();
}}
>
Simpan
</ButtonCustom>
</BoxButtonOnFooter>
}
>
<StackCustom gap={"xs"}> <StackCustom gap={"xs"}>
<InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." /> <InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." />
<LandscapeFrameUploaded image={image?.uri} /> <LandscapeFrameUploaded image={image?.uri} />
@@ -116,17 +132,7 @@ export default function DonationAddNews() {
/> />
<Spacing /> <Spacing />
<ButtonCustom
disabled={!data.title || !data.deskripsi}
isLoading={isLoading}
onPress={() => {
handlerSubmit();
}}
>
Simpan
</ButtonCustom>
</StackCustom> </StackCustom>
<Spacing /> </NewWrapper>
</ViewWrapper>
); );
} }

110
app/(application)/(user)/donation/[id]/(news)/list-of-news.tsx
View File

@@ -1,110 +1,8 @@
/* eslint-disable react-hooks/exhaustive-deps */ import { useLocalSearchParams } from "expo-router";
import { import Donation_ScreenListOfNews from "@/screens/Donation/ScreenListOfNews";
BackButton,
BaseBox,
DrawerCustom,
Grid,
LoaderCustom,
MenuDrawerDynamicGrid,
TextCustom,
ViewWrapper,
} from "@/components";
import { IconPlus } from "@/components/_Icon";
import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
import { formatChatTime } from "@/utils/formatChatTime";
import {
router,
Stack,
useFocusEffect,
useLocalSearchParams,
} from "expo-router";
import _ from "lodash";
import { useCallback, useState } from "react";
export default function DonationRecapOfNews() { export default function DonationRecapOfNews() {
const { id } = useLocalSearchParams(); const { id } = useLocalSearchParams();
const [openDrawer, setOpenDrawer] = useState(false);
const [list, setList] = useState<any[] | null>(null); return <Donation_ScreenListOfNews donationId={id as string} />;
const [loadList, setLoadList] = useState<boolean>(false);
useFocusEffect(
useCallback(() => {
onLoadList();
}, [id])
);
const onLoadList = async () => {
try {
setLoadList(true);
const response = await apiDonationGetNewsById({
id: id as string,
category: "get-all",
});
setList(response.data);
} catch (error) {
console.log("[ERROR]", error);
setList([]);
} finally {
setLoadList(false);
}
};
return (
<>
<Stack.Screen
options={{
title: "Daftar Kabar",
headerLeft: () => <BackButton />,
}}
/>
<ViewWrapper>
{loadList ? (
<LoaderCustom />
) : _.isEmpty(list) ? (
<TextCustom align="center" color="gray">
Tidak ada kabar
</TextCustom>
) : (
list?.map((item: any, index: number) => (
<BaseBox key={index} href={`/donation/[id]/(news)/${item.id}`}>
<Grid>
<Grid.Col span={8}>
<TextCustom truncate bold>
{item?.title || "-"}
</TextCustom>
</Grid.Col>
<Grid.Col span={4} style={{ alignItems: "flex-end" }}>
<TextCustom size="small">
{formatChatTime(item?.createdAt)}
</TextCustom>
</Grid.Col>
</Grid>
</BaseBox>
))
)}
</ViewWrapper>
<DrawerCustom
isVisible={openDrawer}
closeDrawer={() => setOpenDrawer(false)}
height={"auto"}
>
<MenuDrawerDynamicGrid
data={[
{
icon: <IconPlus />,
label: "Tambah Berita",
path: `/donation/${id}/(news)/add-news`,
},
]}
onPressItem={(item) => {
console.log("PATH ", item.path);
router.navigate(item.path as any);
setOpenDrawer(false);
}}
/>
</DrawerCustom>
</>
);
} }

112
app/(application)/(user)/donation/[id]/(news)/recap-of-news.tsx
View File

@@ -1,112 +1,8 @@
/* eslint-disable react-hooks/exhaustive-deps */ import { useLocalSearchParams } from "expo-router";
import { import Donation_ScreenRecapOfNews from "@/screens/Donation/ScreenRecapOfNews";
BackButton,
BaseBox,
DotButton,
DrawerCustom,
Grid,
LoaderCustom,
MenuDrawerDynamicGrid,
TextCustom,
ViewWrapper,
} from "@/components";
import { IconPlus } from "@/components/_Icon";
import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
import { formatChatTime } from "@/utils/formatChatTime";
import {
router,
Stack,
useFocusEffect,
useLocalSearchParams,
} from "expo-router";
import _ from "lodash";
import { useCallback, useState } from "react";
export default function DonationRecapOfNews() { export default function DonationRecapOfNews() {
const { id } = useLocalSearchParams(); const { id } = useLocalSearchParams();
const [openDrawer, setOpenDrawer] = useState(false);
const [list, setList] = useState<any[] | null>(null); return <Donation_ScreenRecapOfNews donationId={id as string} />;
const [loadList, setLoadList] = useState<boolean>(false);
useFocusEffect(
useCallback(() => {
onLoadList();
}, [id])
);
const onLoadList = async () => {
try {
setLoadList(true);
const response = await apiDonationGetNewsById({
id: id as string,
category: "get-all",
});
setList(response.data);
} catch (error) {
console.log("[ERROR]", error);
setList([]);
} finally {
setLoadList(false);
}
};
return (
<>
<Stack.Screen
options={{
title: "Rekap Kabar",
headerLeft: () => <BackButton />,
headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
}}
/>
<ViewWrapper>
{loadList ? (
<LoaderCustom />
) : _.isEmpty(list) ? (
<TextCustom align="center" color="gray">
Tidak ada kabar
</TextCustom>
) : (
list?.map((item: any, index: number) => (
<BaseBox key={index} href={`/donation/[id]/(news)/${item.id}`}>
<Grid>
<Grid.Col span={8}>
<TextCustom truncate bold>
{item?.title || "-"}
</TextCustom>
</Grid.Col>
<Grid.Col span={4} style={{ alignItems: "flex-end" }}>
<TextCustom size="small">
{formatChatTime(item?.createdAt)}
</TextCustom>
</Grid.Col>
</Grid>
</BaseBox>
))
)}
</ViewWrapper>
<DrawerCustom
isVisible={openDrawer}
closeDrawer={() => setOpenDrawer(false)}
height={"auto"}
>
<MenuDrawerDynamicGrid
data={[
{
icon: <IconPlus />,
label: "Tambah Berita",
path: `/donation/${id}/(news)/add-news`,
},
]}
onPressItem={(item) => {
console.log("PATH ", item.path);
router.navigate(item.path as any);
setOpenDrawer(false);
}}
/>
</DrawerCustom>
</>
);
} }

30
app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/invoice.tsx
View File

@@ -1,6 +1,7 @@
/* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable react-hooks/exhaustive-deps */
import { import {
BaseBox, BaseBox,
BoxButtonOnFooter,
ButtonCenteredOnly, ButtonCenteredOnly,
ButtonCustom, ButtonCustom,
Grid, Grid,
@@ -35,7 +36,7 @@ export default function DonationInvoice() {
useFocusEffect( useFocusEffect(
useCallback(() => { useCallback(() => {
onLoadData(); onLoadData();
}, [invoiceId]) }, [invoiceId]),
); );
const onLoadData = async () => { const onLoadData = async () => {
@@ -100,7 +101,22 @@ export default function DonationInvoice() {
return ( return (
<> <>
<ViewWrapper> <ViewWrapper
hideFooter
footerComponent={
<BoxButtonOnFooter>
<ButtonCustom
disabled={!image}
isLoading={isLoading}
onPress={() => {
handlerUpdateInvoice();
}}
>
Simpan
</ButtonCustom>
</BoxButtonOnFooter>
}
>
<StackCustom> <StackCustom>
<InformationBox <InformationBox
text={`Mohon transfer donasi anda ke rekening dibawah`} text={`Mohon transfer donasi anda ke rekening dibawah`}
@@ -204,16 +220,6 @@ export default function DonationInvoice() {
</ButtonCenteredOnly> </ButtonCenteredOnly>
</StackCustom> </StackCustom>
</BaseBox> </BaseBox>
<ButtonCustom
disabled={!image}
isLoading={isLoading}
onPress={() => {
handlerUpdateInvoice();
}}
>
Simpan
</ButtonCustom>
</StackCustom> </StackCustom>
<Spacing /> <Spacing />
</ViewWrapper> </ViewWrapper>

85
app/(application)/(user)/donation/[id]/[status]/detail.tsx
View File

@@ -4,11 +4,12 @@ import {
DotButton, DotButton,
DrawerCustom, DrawerCustom,
MenuDrawerDynamicGrid, MenuDrawerDynamicGrid,
NewWrapper,
Spacing, Spacing,
ViewWrapper,
} from "@/components"; } from "@/components";
import { IconEdit, IconNews } from "@/components/_Icon"; import { IconEdit, IconNews } from "@/components/_Icon";
import { IMenuDrawerItem } from "@/components/_Interface/types"; import { IMenuDrawerItem } from "@/components/_Interface/types";
import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
import { MainColor } from "@/constants/color-palet"; import { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_SMALL } from "@/constants/constans-value"; import { ICON_SIZE_SMALL } from "@/constants/constans-value";
import Donation_ButtonStatusSection from "@/screens/Donation/ButtonStatusSection"; import Donation_ButtonStatusSection from "@/screens/Donation/ButtonStatusSection";
@@ -26,13 +27,14 @@ import {
} from "expo-router"; } from "expo-router";
import _ from "lodash"; import _ from "lodash";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { RefreshControl } from "react-native";
export default function DonasiDetailStatus() { export default function DonasiDetailStatus() {
const { id, status } = useLocalSearchParams(); const { id, status } = useLocalSearchParams();
const [openDrawer, setOpenDrawer] = useState(false); const [openDrawer, setOpenDrawer] = useState(false);
const [openDrawerPublish, setOpenDrawerPublish] = useState(false); const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
const [refreshing, setRefreshing] = useState(false);
const [data, setData] = useState<any>(); const [data, setData] = useState<any | null>(null);
useFocusEffect( useFocusEffect(
useCallback(() => { useCallback(() => {
@@ -80,6 +82,17 @@ export default function DonasiDetailStatus() {
}); });
}; };
const onRefresh = useCallback(() => {
try {
setRefreshing(true);
onLoadData();
} catch (error) {
console.log("Error refresh");
} finally {
setRefreshing(false);
}
}, []);
return ( return (
<> <>
<Stack.Screen <Stack.Screen
@@ -94,32 +107,50 @@ export default function DonasiDetailStatus() {
) : null, ) : null,
}} }}
/> />
<ViewWrapper> <NewWrapper
<Donation_ComponentBoxDetailData refreshControl={
sisaHari={value.sisa} <RefreshControl
reminder={value.reminder} refreshing={refreshing}
data={data} onRefresh={onRefresh}
showSisaHari={status === "publish" ? true : false} tintColor={MainColor.yellow}
bottomSection={ colors={[MainColor.yellow]}
status === "publish" && ( />
<Donation_ProgressSection }
>
{!data ? (
<CustomSkeleton height={400} />
) : (
<>
<Donation_ComponentBoxDetailData
sisaHari={value.sisa}
reminder={value.reminder}
data={data}
showSisaHari={status === "publish" ? true : false}
bottomSection={
status === "publish" && (
<Donation_ProgressSection
id={id as string}
progres={Number(data?.progres) || 0}
/>
)
}
/>
<Donation_ComponentStoryFunrising
id={id as string}
dataStory={data?.CeritaDonasi}
/>
<Spacing />
{data && (
<Donation_ButtonStatusSection
id={id as string} id={id as string}
progres={Number(data?.progres) || 0} status={status as string}
/> />
) )}
}
/> <Spacing />
<Donation_ComponentStoryFunrising </>
id={id as string} )}
dataStory={data?.CeritaDonasi} </NewWrapper>
/>
<Spacing />
<Donation_ButtonStatusSection
id={id as string}
status={status as string}
/>
<Spacing />
</ViewWrapper>
<DrawerCustom <DrawerCustom
isVisible={openDrawer} isVisible={openDrawer}

3
app/(application)/(user)/donation/[id]/edit.tsx
View File

@@ -13,6 +13,7 @@ import {
TextInputCustom, TextInputCustom,
ViewWrapper, ViewWrapper,
} from "@/components"; } from "@/components";
import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
import API_IMAGE from "@/constants/api-storage"; import API_IMAGE from "@/constants/api-storage";
import DIRECTORY_ID from "@/constants/directory-id"; import DIRECTORY_ID from "@/constants/directory-id";
import { import {
@@ -200,7 +201,7 @@ export default function DonationEdit() {
> >
<InformationBox text="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." /> <InformationBox text="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." />
{!data || loadList ? ( {!data || loadList ? (
<LoaderCustom /> <ListSkeletonComponent />
) : ( ) : (
<StackCustom gap={"xs"}> <StackCustom gap={"xs"}>
<TextInputCustom <TextInputCustom

124
app/(application)/(user)/donation/[id]/fund-disbursement.tsx
View File

@@ -1,124 +1,8 @@
/* eslint-disable react-hooks/exhaustive-deps */ import { useLocalSearchParams } from "expo-router";
import { import Donation_ScreenFundDisbursement from "@/screens/Donation/ScreenFundDisbursement";
BaseBox,
ButtonCenteredOnly,
Grid,
InformationBox,
LoaderCustom,
StackCustom,
TextCustom,
ViewWrapper,
} from "@/components";
import {
apiDonationDisbursementOfFundsListById,
apiDonationGetOne,
} from "@/service/api-client/api-donation";
import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
import dayjs from "dayjs";
import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
import _ from "lodash";
import React, { useState } from "react";
export default function DonationFundDisbursement() { export default function DonationFundDisbursement() {
const { id } = useLocalSearchParams(); const { id } = useLocalSearchParams();
const [data, setData] = useState({ return <Donation_ScreenFundDisbursement donationId={id as string} />;
totalPencairan: 0,
akumulasiPencairan: 0,
});
const [listData, setListData] = React.useState<any[] | null>(null);
const [loadData, setLoadData] = React.useState(false);
useFocusEffect(
React.useCallback(() => {
onLoadData();
}, [id])
);
const onLoadData = async () => {
try {
setLoadData(true);
const responseData = await apiDonationGetOne({
id: id as string,
category: "permanent",
});
if (responseData.success) {
setData({
totalPencairan: responseData.data.totalPencairan,
akumulasiPencairan: responseData.data.akumulasiPencairan,
});
}
const responseList = await apiDonationDisbursementOfFundsListById({
id: id as string,
});
if (responseList.success) {
setListData(responseList.data);
}
} catch (error) {
console.log("[ERROR]", error);
} finally {
setLoadData(false);
}
};
return (
<>
<ViewWrapper>
<InformationBox text="Pencairan dana akan dilakukan oleh Admin HIPMI tanpa campur tangan pihak manapun, jika berita pencairan dana dibawah tidak sesuai dengan kabar yang diberikan oleh PENGGALANG DANA. Maka pegguna lain dapat melaporkannya pada Admin HIPMI !" />
<BaseBox>
<Grid>
<Grid.Col span={6}>
<TextCustom bold color="yellow">
Rp. {formatCurrencyDisplay(data?.totalPencairan)}
</TextCustom>
<TextCustom size="small">Total Pencairan Dana</TextCustom>
</Grid.Col>
<Grid.Col span={6}>
<TextCustom bold color="yellow">
{data?.akumulasiPencairan} kali
</TextCustom>
<TextCustom size="small">Akumulasi Pencairan</TextCustom>
</Grid.Col>
</Grid>
</BaseBox>
{loadData ? (
<LoaderCustom />
) : _.isEmpty(listData) ? (
<TextCustom align="center" color="gray">
Belum ada data
</TextCustom>
) : (
listData?.map((item, index) => (
<BaseBox key={index}>
<StackCustom>
<Grid>
<Grid.Col span={8}>
<TextCustom bold>{item?.title}</TextCustom>
</Grid.Col>
<Grid.Col span={4} style={{ alignItems: "flex-end" }}>
<TextCustom>{dayjs(item?.createdAt).format("DD MMM YYYY")}</TextCustom>
</Grid.Col>
</Grid>
<TextCustom>{item?.deskripsi}</TextCustom>
<ButtonCenteredOnly
onPress={() => {
router.navigate(`/(application)/(image)/preview-image/${item?.imageId}`);
}}
icon="file-text"
>
Bukti Transaksi
</ButtonCenteredOnly>
</StackCustom>
</BaseBox>
))
)}
</ViewWrapper>
</>
);
} }

47
app/(application)/(user)/donation/[id]/index.tsx
View File

@@ -6,10 +6,12 @@ import {
DotButton, DotButton,
DrawerCustom, DrawerCustom,
MenuDrawerDynamicGrid, MenuDrawerDynamicGrid,
NewWrapper,
StackCustom, StackCustom,
ViewWrapper, ViewWrapper,
} from "@/components"; } from "@/components";
import { IconNews } from "@/components/_Icon"; import { IconNews } from "@/components/_Icon";
import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
import { useAuth } from "@/hooks/use-auth"; import { useAuth } from "@/hooks/use-auth";
import Donation_ComponentBoxDetailData from "@/screens/Donation/ComponentBoxDetailData"; import Donation_ComponentBoxDetailData from "@/screens/Donation/ComponentBoxDetailData";
import Donation_ComponentInfoFundrising from "@/screens/Donation/ComponentInfoFundrising"; import Donation_ComponentInfoFundrising from "@/screens/Donation/ComponentInfoFundrising";
@@ -34,7 +36,7 @@ export default function DonasiDetailBeranda() {
useFocusEffect( useFocusEffect(
useCallback(() => { useCallback(() => {
onLoadData(); onLoadData();
}, [id]) }, [id]),
); );
const onLoadData = async () => { const onLoadData = async () => {
@@ -75,10 +77,10 @@ export default function DonasiDetailBeranda() {
<> <>
<BoxButtonOnFooter> <BoxButtonOnFooter>
<ButtonCustom <ButtonCustom
disabled={value?.reminder} disabled={value?.reminder || !data}
onPress={() => router.navigate(`/donation/${id}/(transaction-flow)`)} onPress={() => router.navigate(`/donation/${id}/(transaction-flow)`)}
> >
{value?.reminder ? "Waktu berakhir" : "Donasi"} {!data ? "Loading..." : value?.reminder ? "Waktu berakhir" : "Donasi"}
</ButtonCustom> </ButtonCustom>
</BoxButtonOnFooter> </BoxButtonOnFooter>
</> </>
@@ -96,21 +98,30 @@ export default function DonasiDetailBeranda() {
) : null, ) : null,
}} }}
/> />
<ViewWrapper footerComponent={buttonSection}> <NewWrapper footerComponent={buttonSection}>
<StackCustom> {!data ? (
<Donation_ComponentBoxDetailData <CustomSkeleton height={400} />
sisaHari={value.sisa} ) : (
reminder={value.reminder} <StackCustom>
data={data} <Donation_ComponentBoxDetailData
bottomSection={<Donation_ProgressSection id={id as string} progres={Number(data?.progres) || 0} />} sisaHari={value.sisa}
/> reminder={value.reminder}
<Donation_ComponentInfoFundrising dataAuthor={data?.Author} /> data={data}
<Donation_ComponentStoryFunrising bottomSection={
id={id as string} <Donation_ProgressSection
dataStory={data?.CeritaDonasi} id={id as string}
/> progres={Number(data?.progres) || 0}
</StackCustom> />
</ViewWrapper> }
/>
<Donation_ComponentInfoFundrising dataAuthor={data?.Author} />
<Donation_ComponentStoryFunrising
id={id as string}
dataStory={data?.CeritaDonasi}
/>
</StackCustom>
)}
</NewWrapper>
<DrawerCustom <DrawerCustom
isVisible={openDrawer} isVisible={openDrawer}

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

@@ -1,94 +1,8 @@
/* eslint-disable react-hooks/exhaustive-deps */ import { useLocalSearchParams } from "expo-router";
import { import Donation_ScreenListOfDonatur from "@/screens/Donation/ScreenListOfDonatur";
BaseBox,
Grid,
LoaderCustom,
Spacing,
StackCustom,
TextCustom,
ViewWrapper,
} from "@/components";
import { MainColor } from "@/constants/color-palet";
import { apiAdminDonationListOfDonaturById } from "@/service/api-admin/api-admin-donation";
import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
import { FontAwesome6 } from "@expo/vector-icons";
import dayjs from "dayjs";
import { useFocusEffect, useLocalSearchParams } from "expo-router";
import _ from "lodash";
import { useCallback, useState } from "react";
export default function Donation_ListOfDonatur() { export default function DonationListOfDonatur() {
const { id } = useLocalSearchParams(); const { id } = useLocalSearchParams();
const [listData, setListData] = useState<any[] | null>(null);
const [loadData, setLoadData] = useState(false); return <Donation_ScreenListOfDonatur donationId={id as string} />;
useFocusEffect(
useCallback(() => {
onLoadData();
}, [id])
);
const onLoadData = async () => {
try {
setLoadData(true);
const response = await apiAdminDonationListOfDonaturById({
id: id as string,
});
if (response.success) {
setListData(response.data);
}
} catch (error) {
console.log("[ERROR]", error);
} finally {
setLoadData(false);
}
};
return (
<>
<ViewWrapper>
{loadData ? (
<LoaderCustom />
) : _.isEmpty(listData) ? (
<TextCustom bold align="center">
Belum ada donatur
</TextCustom>
) : (
listData?.map((item: any, index: number) => (
<BaseBox key={index}>
<Grid>
<Grid.Col
span={3}
style={{ alignItems: "center", justifyContent: "center" }}
>
<FontAwesome6
name="face-smile-wink"
size={50}
style={{ color: MainColor.yellow }}
/>
</Grid.Col>
<Grid.Col span={9}>
<TextCustom bold size="large">
{item?.Author?.username || "-"}
</TextCustom>
<Spacing/>
<StackCustom gap={"xs"}>
<TextCustom size={"small"}>Berdonas sebesar </TextCustom>
<TextCustom bold size="large" color="yellow">
Rp. {formatCurrencyDisplay(item?.nominal)}
</TextCustom>
<TextCustom>
{dayjs(item?.createdAt).format("DD MMM YYYY, HH:mm")}
</TextCustom>
</StackCustom>
</Grid.Col>
</Grid>
</BaseBox>
))
)}
</ViewWrapper>
</>
);
} }

11
app/(application)/(user)/home.tsx
View File

@@ -29,14 +29,14 @@ export default function Application() {
checkVersion(); checkVersion();
userData(token as string); userData(token as string);
syncUnreadCount(); syncUnreadCount();
}, [user?.id, token]) }, [user?.id, token]),
); );
async function onLoadData() { async function onLoadData() {
const response = await apiUser(user?.id as string); const response = await apiUser(user?.id as string);
console.log( console.log(
"[Profile ID]>>", "[Profile ID]>>",
JSON.stringify(response?.data?.Profile?.id, null, 2) JSON.stringify(response?.data?.Profile?.id, null, 2),
); );
setData(response.data); setData(response.data);
@@ -89,7 +89,12 @@ export default function Application() {
/> />
<ViewWrapper <ViewWrapper
refreshControl={ refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> <RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
tintColor={MainColor.yellow}
colors={[MainColor.yellow]}
/>
} }
footerComponent={ footerComponent={
<TabSection <TabSection

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

@@ -1,13 +1,13 @@
<!-- ===================== Start Penerapan Pagination ===================== --> <!-- ===================== Start Penerapan Pagination Dari Source ===================== -->
File source: app/(application)/(user)/donation/(tabs)/status.tsx File source: app/(application)/(user)/donation/[id]/fund-disbursement.tsx
Folder tujuan: screens/Donation Folder tujuan: screens/Donation
Nama file utama: ScreenStatus.tsx Nama file utama: ScreenFundDisbursement.tsx
Buat file baru pada "Folder tujuan" dengan nama "Nama file utama" dan ubah nama function menjadi "Donation_ScreenStatus" kemudian clean code, import dan panggil function tersebut pada file "File source" Buat file baru pada "Folder tujuan" dengan nama "Nama file utama" dan ubah nama function menjadi "Donation_ScreenFundDisbursement" kemudian clean code, import dan panggil function tersebut pada file "File source"
Selanjutnya terapkan pagination pada file "Nama file utama" Selanjutnya terapkan pagination pada file "Nama file utama"
Function fecth: apiDonationGetByStatus Function fecth: apiDonationDisbursementOfFundsListById
File function fetch: service/api-client/api-donation.ts File function fetch: service/api-client/api-donation.ts
File komponen wrapper: components/_ShareComponent/NewWrapper.tsx File komponen wrapper: components/_ShareComponent/NewWrapper.tsx
@@ -22,15 +22,15 @@ Jika tidak ada props page maka tambahkan props page dan default page: "1"
Gunakan bahasa indonesia pada cli agar saya mudah membacanya. Gunakan bahasa indonesia pada cli agar saya mudah membacanya.
<!-- Additional Prompt --> <!-- Additional Prompt -->
File refrensi: screens/Event/ScreenStatus.tsx File refrensi: screens/Donation/ScreenListOfNews.tsx
Anda bisa menggunakan refrensi dari "File refrensi" jika butuh pemahaman dengan tipe fitur yang sama Anda bisa menggunakan refrensi dari "File refrensi" jika butuh pemahaman dengan tipe fitur yang sama
<!-- ===================== End Penerapan Pagination ===================== --> <!-- ===================== End Penerapan Pagination ` ===================== -->
<!-- ===================== Start Penerapan NewWrapper ===================== --> <!-- ===================== Start Penerapan NewWrapper & Pagination ===================== -->
File utama: screens/Invesment/ScreenTransaction.tsx File utama: screens/Donation/ScreenFundDisbursement.tsx
Function fecth: apiInvestmentGetInvoice Function fecth: apiDonationDisbursementOfFundsListById
File function fetch: service/api-client/api-investment.ts File function fetch: service/api-client/api-donation.ts
File komponen wrapper: components/_ShareComponent/NewWrapper.tsx File komponen wrapper: components/_ShareComponent/NewWrapper.tsx
Terapkan pagination pada file "File utama" Terapkan pagination pada file "File utama"
@@ -43,7 +43,28 @@ Jika tidak ada props page maka tambahkan props page dan default page: "1"
Gunakan bahasa indonesia pada cli agar saya mudah membacanya. Gunakan bahasa indonesia pada cli agar saya mudah membacanya.
<!-- ===================== End Penerapan NewWrapper ===================== -->
<!-- Additinal prompt -->
Masukan kode berikut di prop ListHeaderComponent:
<InformationBox text="Pencairan dana akan dilakukan oleh Admin HIPMI tanpa campur tangan pihak manapun, jika berita pencairan dana dibawah tidak sesuai dengan kabar yang diberikan oleh PENGGALANG DANA. Maka pegguna lain dapat melaporkannya pada Admin HIPMI !" />
<BaseBox>
<Grid>
<Grid.Col span={6}>
<TextCustom bold color="yellow">
Rp. {formatCurrencyDisplay(data?.totalPencairan)}
</TextCustom>
<TextCustom size="small">Total Pencairan Dana</TextCustom>
</Grid.Col>
<Grid.Col span={6}>
<TextCustom bold color="yellow">
{data?.akumulasiPencairan} kali
</TextCustom>
<TextCustom size="small">Akumulasi Pencairan</TextCustom>
</Grid.Col>
</Grid>
</BaseBox>
<!-- ===================== End Penerapan NewWrapper & Pagination ===================== -->
<!-- Start Penerapan NewWrapper --> <!-- Start Penerapan NewWrapper -->
Terapkan NewWrapper pada file: app/(application)/(user)/donation/create.tsx Terapkan NewWrapper pada file: app/(application)/(user)/donation/create.tsx
@@ -57,3 +78,12 @@ jika tidak maka terapkan sesuai dengan logika yang sudah ada
Bagaimana menangani bug berikut pada file berikut: screens/Invesment/Document/ScreenRecap.tsx Bagaimana menangani bug berikut pada file berikut: screens/Invesment/Document/ScreenRecap.tsx
Ini adalah halaman yang memiliki fungsi pagination , saya membuat data dummy dimana menghasilkan data urut 1-9, saya mencoba memuat halaman setiap page nya 4 saja untuk percobaan. Ini adalah halaman yang memiliki fungsi pagination , saya membuat data dummy dimana menghasilkan data urut 1-9, saya mencoba memuat halaman setiap page nya 4 saja untuk percobaan.
Saat awal muncul komponent box dengan data 9 - 6, kemudian saya hapus data ke 8 . lalu saya coba scroll ke bawah seharusnya angka akan tetap urut 9, 7, 6, 5, 4 ... 1. Tapi dalam case ini setelah 8 di hapus kemudian saya scroll box ke 5 tidak muncul saat di scroll. Apakah anda mengerti maksud saya ? Saat awal muncul komponent box dengan data 9 - 6, kemudian saya hapus data ke 8 . lalu saya coba scroll ke bawah seharusnya angka akan tetap urut 9, 7, 6, 5, 4 ... 1. Tapi dalam case ini setelah 8 di hapus kemudian saya scroll box ke 5 tidak muncul saat di scroll. Apakah anda mengerti maksud saya ?
<!-- COMMIT & PUSH-->
Branch: loaddata/10-feb-26
Jalankan perintah ini: git checkout -b "Branch"
Setelah itu jalankan perintah ini: git add .
Setelah itu jalankan perintah ini: git commit -m "
<Berikan semua catatan perubahan pada branch ini, tampilan pada saya dan pastikan dalam bahasa indonesia. Saya akan cek baru saya akan berikan perintah push>
"
Setelah itu jalankan perintah ini: git push origin "Branch"

21
screens/Donation/BoxNews.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { BaseBox, Grid, Spacing, TextCustom } from "@/components";
import { formatChatTime } from "@/utils/formatChatTime";
export default function Donation_BoxNews({item}: {item: any}){
return <>
<BaseBox href={`/donation/[id]/(news)/${item?.id}`}>
<Grid>
<Grid.Col span={8}>
<TextCustom truncate bold>
{item?.title || "-"}
</TextCustom>
</Grid.Col>
<Grid.Col span={4} style={{ alignItems: "flex-end" }}>
<TextCustom size="small">
{formatChatTime(item?.createdAt)}
</TextCustom>
</Grid.Col>
</Grid>
</BaseBox>
</>
}

62
screens/Donation/ScreenBeranda.tsx Normal file
View File

@@ -0,0 +1,62 @@
import FloatingButton from "@/components/Button/FloatingButton";
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
import { MainColor } from "@/constants/color-palet";
import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
import { createPaginationComponents } from "@/helpers/paginationHelpers";
import { usePagination } from "@/hooks/use-pagination";
import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
import { apiDonationGetAll } from "@/service/api-client/api-donation";
import { router } from "expo-router";
import { RefreshControl } from "react-native";
export default function Donation_ScreenBeranda() {
const pagination = usePagination({
fetchFunction: async (page, search) => {
return await apiDonationGetAll({
category: "beranda",
page: String(page),
}).then((res) => {
console.log("RES", JSON.stringify(res, null, 2));
return res;
});
},
pageSize: PAGINATION_DEFAULT_TAKE, // Sesuaikan dengan jumlah item per halaman yang diinginkan
onError: (error) => console.error("[ERROR] Fetch event beranda:", error),
dependencies: [],
});
const { ListEmptyComponent, ListFooterComponent } =
createPaginationComponents({
loading: pagination.loading,
refreshing: pagination.refreshing,
listData: pagination.listData,
isInitialLoad: pagination.isInitialLoad,
emptyMessage: "Belum ada donasi",
skeletonCount: PAGINATION_DEFAULT_TAKE,
skeletonHeight: 150,
});
return (
<NewWrapper
listData={pagination.listData}
renderItem={({ item }) => (
<Donation_BoxPublish data={item} id={item.id} />
)}
onEndReached={pagination.loadMore}
ListEmptyComponent={ListEmptyComponent}
ListFooterComponent={ListFooterComponent}
refreshControl={
<RefreshControl
refreshing={pagination.refreshing}
onRefresh={pagination.onRefresh}
tintColor={MainColor.yellow}
colors={[MainColor.yellow]}
/>
}
hideFooter
floatingButton={
<FloatingButton onPress={() => router.push("/donation/create")} />
}
/>
);
}

174
screens/Donation/ScreenFundDisbursement.tsx Normal file
View File

@@ -0,0 +1,174 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
ActionIcon,
BaseBox,
Grid,
InformationBox,
Spacing,
StackCustom,
TextCustom,
} from "@/components";
import { MainColor } from "@/constants/color-palet";
import { usePagination } from "@/hooks/use-pagination";
import {
apiDonationDisbursementOfFundsListById,
apiDonationGetOne,
} from "@/service/api-client/api-donation";
import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
import { Feather } from "@expo/vector-icons";
import dayjs from "dayjs";
import { router, useLocalSearchParams } from "expo-router";
import _ from "lodash";
import React, { useState } from "react";
import { RefreshControl, View } from "react-native";
import { createPaginationComponents } from "@/helpers/paginationHelpers";
import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
import { Divider } from "react-native-paper";
interface Donation_ScreenFundDisbursementProps {
donationId: string;
}
export default function Donation_ScreenFundDisbursement({
donationId,
}: Donation_ScreenFundDisbursementProps) {
const [data, setData] = useState({
totalPencairan: 0,
akumulasiPencairan: 0,
});
// Ambil data utama (total pencairan, dll) terpisah dari pagination
React.useEffect(() => {
const onLoadData = async () => {
try {
const responseData = await apiDonationGetOne({
id: donationId,
category: "permanent",
});
if (responseData.success) {
setData({
totalPencairan: responseData.data.totalPencairan,
akumulasiPencairan: responseData.data.akumulasiPencairan,
});
}
} catch (error) {
console.log("[ERROR]", error);
}
};
onLoadData();
}, [donationId]);
const pagination = usePagination({
fetchFunction: async (page) => {
return await apiDonationDisbursementOfFundsListById({
id: donationId,
page: String(page),
});
},
pageSize: PAGINATION_DEFAULT_TAKE, // Sesuaikan dengan jumlah item per halaman dari API
dependencies: [donationId],
});
const renderItem = ({ item, index }: { item: any; index: number }) => (
<BaseBox key={index}>
<StackCustom>
<Grid>
<Grid.Col span={8}>
<TextCustom bold>{item?.title}</TextCustom>
</Grid.Col>
<Grid.Col span={4} style={{ alignItems: "flex-end" }}>
<TextCustom size="small">
{dayjs(item?.createdAt).format("DD MMM YYYY")}
</TextCustom>
</Grid.Col>
</Grid>
<TextCustom>{item?.deskripsi}</TextCustom>
{/* <Spacing /> */}
<Divider />
<Grid>
<Grid.Col span={8} style={{ alignSelf: "center" }}>
<TextCustom bold size={"large"}>
Rp. {formatCurrencyDisplay(item?.nominalCair)}
</TextCustom>
</Grid.Col>
<Grid.Col span={4} style={{ alignItems: "flex-end" }}>
<ActionIcon
icon={<Feather name="file-text" color={MainColor.black} />}
onPress={() => {
router.navigate(
`/(application)/(image)/preview-image/${item?.imageId}`,
);
}}
/>
</Grid.Col>
</Grid>
{/*
<ButtonCenteredOnly
onPress={() => {
router.navigate(
`/(application)/(image)/preview-image/${item?.imageId}`,
);
}}
icon="file-text"
>
Bukti Transaksi
</ButtonCenteredOnly> */}
</StackCustom>
</BaseBox>
);
const { ListEmptyComponent, ListFooterComponent } =
createPaginationComponents({
loading: pagination.loading,
refreshing: pagination.refreshing,
listData: pagination.listData,
isInitialLoad: pagination.isInitialLoad,
emptyMessage: "Belum ada data",
skeletonCount: PAGINATION_DEFAULT_TAKE,
skeletonHeight: 150,
});
// Komponen header yang akan ditampilkan di atas daftar
const ListHeaderComponent = (
<View>
<InformationBox text="Pencairan dana akan dilakukan oleh Admin HIPMI tanpa campur tangan pihak manapun, jika berita pencairan dana dibawah tidak sesuai dengan kabar yang diberikan oleh PENGGALANG DANA. Maka pegguna lain dapat melaporkannya pada Admin HIPMI !" />
<BaseBox>
<Grid>
<Grid.Col span={6}>
<TextCustom bold color="yellow">
Rp. {formatCurrencyDisplay(data?.totalPencairan)}
</TextCustom>
<TextCustom size="small">Total Pencairan Dana</TextCustom>
</Grid.Col>
<Grid.Col span={6}>
<TextCustom bold color="yellow">
{data?.akumulasiPencairan} kali
</TextCustom>
<TextCustom size="small">Akumulasi Pencairan</TextCustom>
</Grid.Col>
</Grid>
</BaseBox>
</View>
);
return (
<NewWrapper
listData={pagination.listData}
renderItem={renderItem}
onEndReached={pagination.loadMore}
ListEmptyComponent={ListEmptyComponent}
ListFooterComponent={ListFooterComponent}
ListHeaderComponent={ListHeaderComponent}
refreshControl={
<RefreshControl
refreshing={pagination.refreshing}
onRefresh={pagination.onRefresh}
/>
}
hideFooter
/>
);
}

98
screens/Donation/ScreenListOfDonatur.tsx Normal file
View File

@@ -0,0 +1,98 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
BaseBox,
Grid,
LoaderCustom,
Spacing,
StackCustom,
TextCustom,
} from "@/components";
import { MainColor } from "@/constants/color-palet";
import { usePagination } from "@/hooks/use-pagination";
import { apiDonationListOfDonaturById } from "@/service/api-client/api-donation";
import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
import { FontAwesome6 } from "@expo/vector-icons";
import dayjs from "dayjs";
import { RefreshControl } from "react-native";
import { createPaginationComponents } from "@/helpers/paginationHelpers";
import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
interface Donation_ScreenListOfDonaturProps {
donationId: string;
}
export default function Donation_ScreenListOfDonatur({
donationId,
}: Donation_ScreenListOfDonaturProps) {
const pagination = usePagination({
fetchFunction: async (page) => {
return await apiDonationListOfDonaturById({
id: donationId,
page: String(page),
});
},
pageSize: PAGINATION_DEFAULT_TAKE, // Sesuaikan dengan jumlah item per halaman dari API
dependencies: [donationId],
});
const renderItem = ({ item, index }: { item: any; index: number }) => (
<BaseBox key={index}>
<Grid>
<Grid.Col
span={3}
style={{ alignItems: "center", justifyContent: "center" }}
>
<FontAwesome6
name="face-smile-wink"
size={50}
style={{ color: MainColor.yellow }}
/>
</Grid.Col>
<Grid.Col span={9}>
<TextCustom bold size="large">
{item?.Author?.username || "-"}
</TextCustom>
<Spacing />
<StackCustom gap={"xs"}>
<TextCustom size={"small"}>Berdonas sebesar </TextCustom>
<TextCustom bold size="large" color="yellow">
Rp. {formatCurrencyDisplay(item?.nominal)}
</TextCustom>
<TextCustom>
{dayjs(item?.createdAt).format("DD MMM YYYY, HH:mm")}
</TextCustom>
</StackCustom>
</Grid.Col>
</Grid>
</BaseBox>
);
const { ListEmptyComponent, ListFooterComponent } =
createPaginationComponents({
loading: pagination.loading,
refreshing: pagination.refreshing,
listData: pagination.listData,
isInitialLoad: pagination.isInitialLoad,
emptyMessage: "Belum ada donatur",
skeletonCount: PAGINATION_DEFAULT_TAKE,
skeletonHeight: 120,
});
return (
<NewWrapper
hideFooter
listData={pagination.listData}
renderItem={renderItem}
onEndReached={pagination.loadMore}
ListEmptyComponent={ListEmptyComponent}
ListFooterComponent={ListFooterComponent}
refreshControl={
<RefreshControl
refreshing={pagination.refreshing}
onRefresh={pagination.onRefresh}
/>
}
/>
);
}

97
screens/Donation/ScreenListOfNews.tsx Normal file
View File

@@ -0,0 +1,97 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { BackButton, DrawerCustom, MenuDrawerDynamicGrid } from "@/components";
import { IconPlus } from "@/components/_Icon";
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
import { MainColor } from "@/constants/color-palet";
import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
import { createPaginationComponents } from "@/helpers/paginationHelpers";
import { usePagination } from "@/hooks/use-pagination";
import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
import { router, Stack } from "expo-router";
import { useState } from "react";
import { RefreshControl } from "react-native";
import Donation_BoxNews from "./BoxNews";
interface Donation_ScreenListOfNewsProps {
donationId: string;
}
export default function Donation_ScreenListOfNews({
donationId,
}: Donation_ScreenListOfNewsProps) {
const [openDrawer, setOpenDrawer] = useState(false);
const pagination = usePagination({
fetchFunction: async (page) => {
return await apiDonationGetNewsById({
id: donationId,
category: "get-all",
page: String(page),
});
},
pageSize: PAGINATION_DEFAULT_TAKE, // Sesuaikan dengan jumlah item per halaman dari API
dependencies: [donationId],
});
const renderItem = ({ item, index }: { item: any; index: number }) => (
<Donation_BoxNews key={index} item={item} />
);
const { ListEmptyComponent, ListFooterComponent } =
createPaginationComponents({
loading: pagination.loading,
refreshing: pagination.refreshing,
listData: pagination.listData,
isInitialLoad: pagination.isInitialLoad,
emptyMessage: "Tidak ada kabar",
skeletonCount: PAGINATION_DEFAULT_TAKE,
skeletonHeight: 80,
});
return (
<>
<Stack.Screen
options={{
title: "Daftar Kabar",
headerLeft: () => <BackButton />,
}}
/>
<NewWrapper
listData={pagination.listData}
renderItem={renderItem}
onEndReached={pagination.loadMore}
ListEmptyComponent={ListEmptyComponent}
ListFooterComponent={ListFooterComponent}
refreshControl={
<RefreshControl
refreshing={pagination.refreshing}
onRefresh={pagination.onRefresh}
tintColor={MainColor.yellow}
colors={[MainColor.yellow]}
/>
}
/>
<DrawerCustom
isVisible={openDrawer}
closeDrawer={() => setOpenDrawer(false)}
height={"auto"}
>
<MenuDrawerDynamicGrid
data={[
{
icon: <IconPlus />,
label: "Tambah Berita",
path: `/donation/${donationId}/(news)/add-news`,
},
]}
onPressItem={(item) => {
console.log("PATH ", item.path);
router.navigate(item.path as any);
setOpenDrawer(false);
}}
/>
</DrawerCustom>
</>
);
}

152
screens/Donation/ScreenMyDonation.tsx Normal file
View File

@@ -0,0 +1,152 @@
import {
BadgeCustom,
BaseBox,
DummyLandscapeImage,
Grid,
StackCustom,
TextCustom,
} from "@/components";
import FloatingButton from "@/components/Button/FloatingButton";
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
import { MainColor } from "@/constants/color-palet";
import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
import { createPaginationComponents } from "@/helpers/paginationHelpers";
import { useAuth } from "@/hooks/use-auth";
import { usePagination } from "@/hooks/use-pagination";
import { apiDonationGetAll } from "@/service/api-client/api-donation";
import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
import { Href, router } from "expo-router";
import _ from "lodash";
import { RefreshControl, View } from "react-native";
export default function Donation_ScreenMyDonation() {
const { user } = useAuth();
const pagination = usePagination({
fetchFunction: async (page, search) => {
if (!user?.id) {
throw new Error("User tidak ditemukan");
}
return await apiDonationGetAll({
category: "my-donation",
authorId: user?.id,
page: String(page),
});
},
pageSize: PAGINATION_DEFAULT_TAKE, // Sesuaikan dengan jumlah item per halaman yang diinginkan
dependencies: [user?.id], // Reload ketika user.id berubah
});
const { ListEmptyComponent, ListFooterComponent } =
createPaginationComponents({
loading: pagination.loading,
refreshing: pagination.refreshing,
listData: pagination.listData,
isInitialLoad: pagination.isInitialLoad,
emptyMessage: "Belum ada transaksi",
skeletonCount: PAGINATION_DEFAULT_TAKE,
skeletonHeight: 150,
});
const handlerColor = (status: string) => {
if (status === "menunggu") {
return "orange";
} else if (status === "proses") {
return "white";
} else if (status === "berhasil") {
return "green";
} else if (status === "gagal") {
return "red";
}
};
const handlePress = ({
invoiceId,
donationId,
status,
}: {
invoiceId: string;
donationId: string;
status: string;
}) => {
const url: Href = `../${donationId}/(transaction-flow)/${invoiceId}`;
if (status === "menunggu") {
router.push(`${url}/invoice`);
} else if (status === "proses") {
router.push(`${url}/process`);
} else if (status === "berhasil") {
router.push(`${url}/success`);
} else if (status === "gagal") {
router.push(`${url}/failed`);
}
};
const renderItem = ({ item }: { item: any }) => (
<BaseBox
paddingTop={7}
paddingBottom={7}
onPress={() => {
handlePress({
status: _.lowerCase(item.statusInvoice),
invoiceId: item.id,
donationId: item.donasiId,
});
}}
>
<Grid>
<Grid.Col span={5}>
<DummyLandscapeImage
height={100}
unClickPath
imageId={item.imageId}
/>
</Grid.Col>
<Grid.Col span={1}>
<View />
</Grid.Col>
<Grid.Col span={6}>
<StackCustom>
<TextCustom truncate={2} bold>
{item.title || "-"}
</TextCustom>
<TextCustom bold color="yellow">
Rp. {formatCurrencyDisplay(item.nominal)}
</TextCustom>
<BadgeCustom
variant="light"
color={handlerColor(_.lowerCase(item.statusInvoice))}
fullWidth
>
{item.statusInvoice}
</BadgeCustom>
</StackCustom>
</Grid.Col>
</Grid>
</BaseBox>
);
return (
<NewWrapper
listData={pagination.listData}
renderItem={renderItem}
onEndReached={pagination.loadMore}
ListEmptyComponent={ListEmptyComponent}
ListFooterComponent={ListFooterComponent}
refreshControl={
<RefreshControl
refreshing={pagination.refreshing}
onRefresh={pagination.onRefresh}
tintColor={MainColor.yellow}
colors={[MainColor.yellow]}
/>
}
hideFooter
floatingButton={
<FloatingButton onPress={() => router.push("/donation/create")} />
}
/>
);
}

105
screens/Donation/ScreenRecapOfNews.tsx Normal file
View File

@@ -0,0 +1,105 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
BackButton,
DotButton,
DrawerCustom,
MenuDrawerDynamicGrid,
} from "@/components";
import { IconPlus } from "@/components/_Icon";
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 { apiDonationGetNewsById } from "@/service/api-client/api-donation";
import { router, Stack, useFocusEffect } from "expo-router";
import { useCallback, useState } from "react";
import { RefreshControl } from "react-native";
import Donation_BoxNews from "./BoxNews";
interface Donation_ScreenRecapOfNewsProps {
donationId: string;
}
export default function Donation_ScreenRecapOfNews({
donationId,
}: Donation_ScreenRecapOfNewsProps) {
const [openDrawer, setOpenDrawer] = useState(false);
const pagination = usePagination({
fetchFunction: async (page) => {
return await apiDonationGetNewsById({
id: donationId,
category: "get-all",
page: String(page),
});
},
pageSize: PAGINATION_DEFAULT_TAKE, // Sesuaikan dengan jumlah item per halaman dari API
dependencies: [donationId],
});
useFocusEffect(
useCallback(() => {
pagination.onRefresh();
}, [donationId]),
);
const renderItem = ({ item, index }: { item: any; index: number }) => (
<Donation_BoxNews key={index} item={item} />
);
const { ListEmptyComponent, ListFooterComponent } =
createPaginationComponents({
loading: pagination.loading,
refreshing: pagination.refreshing,
listData: pagination.listData,
isInitialLoad: pagination.isInitialLoad,
emptyMessage: "Tidak ada kabar",
skeletonCount: PAGINATION_DEFAULT_TAKE,
skeletonHeight: 80,
});
return (
<>
<Stack.Screen
options={{
title: "Rekap Kabar",
headerLeft: () => <BackButton />,
headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
}}
/>
<NewWrapper
listData={pagination.listData}
renderItem={renderItem}
onEndReached={pagination.loadMore}
ListEmptyComponent={ListEmptyComponent}
ListFooterComponent={ListFooterComponent}
refreshControl={
<RefreshControl
refreshing={pagination.refreshing}
onRefresh={pagination.onRefresh}
/>
}
/>
<DrawerCustom
isVisible={openDrawer}
closeDrawer={() => setOpenDrawer(false)}
height={"auto"}
>
<MenuDrawerDynamicGrid
data={[
{
icon: <IconPlus />,
label: "Tambah Berita",
path: `/donation/${donationId}/(news)/add-news`,
},
]}
onPressItem={(item) => {
console.log("PATH ", item.path);
router.navigate(item.path as any);
setOpenDrawer(false);
}}
/>
</DrawerCustom>
</>
);
}

60
screens/Donation/ScreenStatus.tsx
View File

@@ -1,28 +1,29 @@
/* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable react-hooks/exhaustive-deps */
import { import { ScrollableCustom } from "@/components";
LoaderCustom,
ScrollableCustom,
TextCustom,
} from "@/components";
import NewWrapper from "@/components/_ShareComponent/NewWrapper"; import NewWrapper from "@/components/_ShareComponent/NewWrapper";
import { MainColor } from "@/constants/color-palet";
import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
import { createPaginationComponents } from "@/helpers/paginationHelpers";
import { useAuth } from "@/hooks/use-auth"; import { useAuth } from "@/hooks/use-auth";
import { usePagination } from "@/hooks/use-pagination";
import { dummyMasterStatus } from "@/lib/dummy-data/_master/status"; import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
import Donasi_BoxStatus from "@/screens/Donation/BoxStatus"; import Donasi_BoxStatus from "@/screens/Donation/BoxStatus";
import { usePagination } from "@/hooks/use-pagination";
import { apiDonationGetByStatus } from "@/service/api-client/api-donation"; import { apiDonationGetByStatus } from "@/service/api-client/api-donation";
import { useFocusEffect } from "expo-router"; import { useFocusEffect } from "expo-router";
import _ from "lodash";
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
import { RefreshControl } from "react-native"; import { RefreshControl } from "react-native";
import { createPaginationComponents } from "@/helpers/paginationHelpers";
interface DonationStatusProps { interface DonationStatusProps {
initialStatus?: string; initialStatus?: string;
} }
export default function Donation_ScreenStatus({ initialStatus = "publish" }: DonationStatusProps) { export default function Donation_ScreenStatus({
initialStatus = "publish",
}: DonationStatusProps) {
const { user } = useAuth(); const { user } = useAuth();
const [activeCategory, setActiveCategory] = useState<string | null>(initialStatus); const [activeCategory, setActiveCategory] = useState<string | null>(
initialStatus,
);
const pagination = usePagination({ const pagination = usePagination({
fetchFunction: async (page) => { fetchFunction: async (page) => {
@@ -32,18 +33,19 @@ export default function Donation_ScreenStatus({ initialStatus = "publish" }: Don
page: String(page), page: String(page),
}); });
}, },
pageSize: 5, // Sesuaikan dengan jumlah item per halaman dari API pageSize: PAGINATION_DEFAULT_TAKE, // Sesuaikan dengan jumlah item per halaman dari API
dependencies: [user?.id, activeCategory], dependencies: [user?.id, activeCategory],
}); });
useFocusEffect( useFocusEffect(
useCallback(() => { useCallback(() => {
pagination.onRefresh(); pagination.onRefresh();
}, [user?.id, activeCategory]) }, [user?.id, activeCategory]),
); );
const handlePress = (item: any) => { const handlePress = (item: any) => {
setActiveCategory(item.value); setActiveCategory(item.value);
pagination.reset();
}; };
const scrollComponent = ( const scrollComponent = (
@@ -59,21 +61,19 @@ export default function Donation_ScreenStatus({ initialStatus = "publish" }: Don
); );
const renderItem = ({ item, index }: { item: any; index: number }) => ( const renderItem = ({ item, index }: { item: any; index: number }) => (
<Donasi_BoxStatus <Donasi_BoxStatus data={item} status={activeCategory as string} />
data={item}
status={activeCategory as string}
/>
); );
const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({ const { ListEmptyComponent, ListFooterComponent } =
loading: pagination.loading, createPaginationComponents({
refreshing: pagination.refreshing, loading: pagination.loading,
listData: pagination.listData, refreshing: pagination.refreshing,
isInitialLoad: pagination.isInitialLoad, listData: pagination.listData,
emptyMessage: `Tidak ada data ${activeCategory}`, isInitialLoad: pagination.isInitialLoad,
skeletonCount: 5, emptyMessage: `Tidak ada data ${activeCategory}`,
skeletonHeight: 200, skeletonCount: 5,
}); skeletonHeight: 120,
});
return ( return (
<NewWrapper <NewWrapper
@@ -83,13 +83,15 @@ export default function Donation_ScreenStatus({ initialStatus = "publish" }: Don
ListEmptyComponent={ListEmptyComponent} ListEmptyComponent={ListEmptyComponent}
ListFooterComponent={ListFooterComponent} ListFooterComponent={ListFooterComponent}
refreshControl={ refreshControl={
<RefreshControl <RefreshControl
refreshing={pagination.refreshing} refreshing={pagination.refreshing}
onRefresh={pagination.onRefresh} onRefresh={pagination.onRefresh}
tintColor={MainColor.yellow}
colors={[MainColor.yellow]}
/> />
} }
hideFooter hideFooter
headerComponent={scrollComponent} headerComponent={scrollComponent}
/> />
); );
} }

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

@@ -52,15 +52,18 @@ export async function apiAdminDonationUpdateStatus({
export async function apiAdminDonationListOfDonatur({ export async function apiAdminDonationListOfDonatur({
id, id,
status, status,
page = "1"
}: { }: {
id: string; id: string;
status: "berhasil" | "gagal" | "proses" | "menunggu" | null; status: "berhasil" | "gagal" | "proses" | "menunggu" | null;
page?: string;
}) { }) {
const query = status && status !== null ? `?status=${status}` : ""; const statusQuery = status && status !== null ? `&status=${status}` : "";
const pageQuery = `&page=${page}`;
try { try {
const response = await apiConfig.get( const response = await apiConfig.get(
`/mobile/admin/donation/${id}/donatur${query}` `/mobile/admin/donation/${id}/donatur?${statusQuery}${pageQuery}`
); );
return response.data; return response.data;
} catch (error) { } catch (error) {
@@ -105,19 +108,6 @@ export async function apiAdminDonationInvoiceUpdateById({
} }
} }
export async function apiAdminDonationListOfDonaturById({
id,
}: {
id: string;
}) {
try {
const response = await apiConfig.get(`/mobile/donation/${id}/donatur`);
return response.data;
} catch (error) {
throw error;
}
}
export async function apiAdminDonationDisbursementOfFundsCreated({ export async function apiAdminDonationDisbursementOfFundsCreated({
id, id,
data, data,

28
service/api-client/api-donation.ts
View File

@@ -109,14 +109,17 @@ export async function apiDonationUpdateData({
export async function apiDonationGetAll({ export async function apiDonationGetAll({
category, category,
authorId, authorId,
page = "1"
}: { }: {
category: "beranda" | "my-donation"; category: "beranda" | "my-donation";
authorId?: string; authorId?: string;
page?: string;
}) { }) {
const authorQuery = authorId ? `&authorId=${authorId}` : ""; const authorQuery = authorId ? `&authorId=${authorId}` : "";
const pageQuery = `&page=${page}`;
try { try {
const response = await apiConfig.get( const response = await apiConfig.get(
`/mobile/donation?category=${category}${authorQuery}` `/mobile/donation?category=${category}${authorQuery}${pageQuery}`
); );
return response.data; return response.data;
} catch (error) { } catch (error) {
@@ -219,13 +222,15 @@ export async function apiDonationCreateNews({
export async function apiDonationGetNewsById({ export async function apiDonationGetNewsById({
id, id,
category, category,
page = "1"
}: { }: {
id: string; id: string;
category: "get-all" | "get-one"; category: "get-all" | "get-one";
page?: string;
}) { }) {
try { try {
const response = await apiConfig.get( const response = await apiConfig.get(
`/mobile/donation/${id}/news?category=${category}` `/mobile/donation/${id}/news?category=${category}&page=${page}`
); );
return response.data; return response.data;
} catch (error) { } catch (error) {
@@ -261,11 +266,28 @@ export async function apiDonationDeleteNews({ id }: { id: string }) {
export async function apiDonationDisbursementOfFundsListById({ export async function apiDonationDisbursementOfFundsListById({
id, id,
page = "1"
}: { }: {
id: string; id: string;
page?: string;
}) { }) {
try { try {
const response = await apiConfig.get(`/mobile/donation/${id}/disbursement`); const response = await apiConfig.get(`/mobile/donation/${id}/disbursement?page=${page}`);
return response.data;
} catch (error) {
throw error;
}
}
export async function apiDonationListOfDonaturById({
id,
page = "1"
}: {
id: string;
page?: string;
}) {
try {
const response = await apiConfig.get(`/mobile/donation/${id}/donatur?page=${page}`);
return response.data; return response.data;
} catch (error) { } catch (error) {
throw error; throw error;

2
utils/formatChatTime.ts
View File

@@ -31,5 +31,5 @@ export const formatChatTime = (date: string | Date): string => {
} }
// Lebih dari 7 hari lalu // Lebih dari 7 hari lalu
return messageDate.format('DD - MM - YYYY, HH.mm'); // "05 - 11 - 2025, 14.00" return messageDate.format('DD/MM/YYYY, HH.mm'); // "05/11/2025, 14.00"
}; };