fix detail donasi

This commit is contained in:
2025-04-21 17:42:21 +08:00
parent c85b4f3b80
commit a2008a5415

View File

@@ -1,50 +1,73 @@
import { AccentColor } from '@/app_modules/_global/color'; import { AccentColor } from "@/app_modules/_global/color";
import { AdminColor } from '@/app_modules/_global/color/color_pallet'; import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_TampilanRupiah } from '@/app_modules/_global/component'; import { ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
import { apiGetMasterStatusTransaksi } from '@/app_modules/_global/lib/api_fetch_master'; import { apiGetMasterStatusTransaksi } from "@/app_modules/_global/lib/api_fetch_master";
import { globalStatusTransaksi } from '@/app_modules/_global/lib/master_list_app'; import { globalStatusTransaksi } from "@/app_modules/_global/lib/master_list_app";
import { ComponentAdminGlobal_TitlePage } from '@/app_modules/admin/_admin_global/_component'; import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
import CustomSkeletonAdmin from '@/app_modules/admin/_admin_global/_component/skeleton/customSkeletonAdmin'; import CustomSkeletonAdmin from "@/app_modules/admin/_admin_global/_component/skeleton/customSkeletonAdmin";
import { MODEL_DONASI } from '@/app_modules/donasi/model/interface'; import { ComponentAdminGlobal_NotifikasiBerhasil } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_berhasil";
import { MODEL_NEW_DEFAULT_MASTER } from '@/app_modules/model_global/interface'; import { ComponentAdminGlobal_NotifikasiGagal } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_gagal";
import { RouterAdminGlobal } from '@/lib'; import { Admin_V3_ComponentPaginationBreakpoint } from "@/app_modules/admin/_components_v3/comp_pagination_breakpoint";
import { clientLogger } from '@/util/clientLogger'; import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
import { Center, Badge, Button, Stack, Group, ActionIcon, Select, Paper, ScrollArea, Table, Pagination, Text, Modal, Title } from '@mantine/core'; import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
import { useDisclosure, useShallowEffect } from '@mantine/hooks'; import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
import { IconReload } from '@tabler/icons-react'; import { RouterAdminGlobal } from "@/lib";
import { useParams, useRouter } from 'next/navigation' import { clientLogger } from "@/util/clientLogger";
import React, { useState } from 'react'; import {
import { apiGetAdminAllDaftarDonatur } from '../../lib/api_fetch_admin_donasi'; ActionIcon,
import { ComponentAdminGlobal_NotifikasiBerhasil } from '@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_berhasil'; Badge,
import { ComponentAdminGlobal_NotifikasiGagal } from '@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_gagal'; Button,
import adminNotifikasi_funCreateToUser from '@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user'; Center,
import adminDonasi_funUpdateStatusDanTotal from '../../fun/update/fun_update_status_dan_total'; Group,
Modal,
Paper,
ScrollArea,
Select,
Stack,
Table,
Text,
Title
} from "@mantine/core";
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
import { IconReload } from "@tabler/icons-react";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import adminDonasi_funUpdateStatusDanTotal from "../../fun/update/fun_update_status_dan_total";
import { apiGetAdminAllDaftarDonatur } from "../../lib/api_fetch_admin_donasi";
function TampilanListDonatur({ setReloadDonasi, donasi, isReload }: { setReloadDonasi: (val: boolean) => void, donasi: MODEL_DONASI, isReload: boolean }) { function TampilanListDonatur({
setReloadDonasi,
donasi,
isReload,
}: {
setReloadDonasi: (val: boolean) => void;
donasi: MODEL_DONASI;
isReload: boolean;
}) {
const router = useRouter(); const router = useRouter();
const params = useParams<{ id: string }>(); const params = useParams<{ id: string }>();
const donasiId = params.id; const donasiId = params.id;
const [isLoadingCek, setLoadingCek] = useState(false); const [isLoadingCek, setLoadingCek] = useState(false);
const [idData, setIdData] = useState(""); const [idData, setIdData] = useState("");
const [lisDonatur, setListDonatur] = useState<any[] | null>(null); const [lisDonatur, setListDonatur] = useState<any[] | null>(null);
const [listStatus, setListStatus] = useState<MODEL_NEW_DEFAULT_MASTER[] | null>(null); const [listStatus, setListStatus] = useState<
MODEL_NEW_DEFAULT_MASTER[] | null
>(null);
const [isNPage, setNPage] = useState<number>(1); const [isNPage, setNPage] = useState<number>(1);
const [isActivePage, setActivePage] = useState(1); const [isActivePage, setActivePage] = useState(1);
const [selectStatus, setSelectStatus] = useState(""); const [selectStatus, setSelectStatus] = useState("");
const [isLoadingReload, setIsLoadingReload] = useState(false); const [isLoadingReload, setIsLoadingReload] = useState(false);
useShallowEffect(() => { useShallowEffect(() => {
handleLoadData(); handleLoadData();
}, [isActivePage, selectStatus, isReload]); }, [isActivePage, selectStatus, isReload]);
useShallowEffect(() => { useShallowEffect(() => {
handleLoadStatus(); handleLoadStatus();
}, []) }, []);
const handleLoadData = async () => { const handleLoadData = async () => {
try { try {
const cek = globalStatusTransaksi.find((e) => e.id === selectStatus); const cek = globalStatusTransaksi.find((e) => e.id === selectStatus);
const response = await apiGetAdminAllDaftarDonatur({ const response = await apiGetAdminAllDaftarDonatur({
id: donasiId, id: donasiId,
@@ -53,30 +76,25 @@ function TampilanListDonatur({ setReloadDonasi, donasi, isReload }: { setReloadD
}); });
if (response?.success && response?.data?.data) { if (response?.success && response?.data?.data) {
setListDonatur(response.data.data); setListDonatur(response.data.data);
setNPage(response.data.nPage || 1); setNPage(response.data.nPage || 1);
setIsLoadingReload(false) setIsLoadingReload(false);
} else { } else {
console.error("Invalid data format received:", response); console.error("Invalid data format received:", response);
setListDonatur([]); setListDonatur([]);
} }
} catch (error) { } catch (error) {
clientLogger.error("Error get data daftar donatur", error); clientLogger.error("Error get data daftar donatur", error);
setListDonatur([]); setListDonatur([]);
} }
} };
const handleLoadStatus = async () => { const handleLoadStatus = async () => {
try { try {
const response = await apiGetMasterStatusTransaksi(); const response = await apiGetMasterStatusTransaksi();
if (response?.success && response?.data) { if (response?.success && response?.data) {
setListStatus(response.data); setListStatus(response.data);
} else { } else {
console.error("Invalid data format received:", response); console.error("Invalid data format received:", response);
setListStatus(null); setListStatus(null);
@@ -85,34 +103,31 @@ function TampilanListDonatur({ setReloadDonasi, donasi, isReload }: { setReloadD
clientLogger.error("Error get status donatur", error); clientLogger.error("Error get status donatur", error);
setListStatus(null); setListStatus(null);
} }
} };
const onPageClick = async (page: number) => { const onPageClick = async (page: number) => {
setActivePage(page); setActivePage(page);
} };
async function onSelect(selectStatus: any) { async function onSelect(selectStatus: any) {
setSelectStatus(selectStatus); setSelectStatus(selectStatus);
setActivePage(1) setActivePage(1);
} }
async function onReload() { async function onReload() {
setSelectStatus(""); setSelectStatus("");
setIsLoadingReload(true) setIsLoadingReload(true);
handleLoadData(); handleLoadData();
} }
const renderTableBody = () => { const renderTableBody = () => {
if (isLoadingReload)
if(isLoadingReload) return ( return (
<tr> <tr>
<td colSpan={12}> <td colSpan={12}>
<Center> <Center>
<Text c={AccentColor.white}>Loading Data... </Text> <Text c={AccentColor.white}>Loading Data... </Text>
</Center> </Center>
</td> </td>
</tr> </tr>
) );
if (!Array.isArray(lisDonatur) || lisDonatur.length === 0) { if (!Array.isArray(lisDonatur) || lisDonatur.length === 0) {
return ( return (
<tr> <tr>
@@ -146,8 +161,8 @@ function TampilanListDonatur({ setReloadDonasi, donasi, isReload }: { setReloadD
</Center> </Center>
</td> </td>
<td> <td>
<Center > <Center>
<Badge c={AccentColor.white} variant="dot"> <Badge c={AccentColor.white} variant="dot">
{e?.DonasiMaster_StatusInvoice?.name} {e?.DonasiMaster_StatusInvoice?.name}
</Badge> </Badge>
</Center> </Center>
@@ -155,14 +170,16 @@ function TampilanListDonatur({ setReloadDonasi, donasi, isReload }: { setReloadD
<td> <td>
<Center> <Center>
{e?.donasiMaster_StatusInvoiceId === "1" || {e?.donasiMaster_StatusInvoiceId === "1" ||
e?.donasiMaster_StatusInvoiceId === "2" ? ( e?.donasiMaster_StatusInvoiceId === "2" ? (
<Button <Button
loaderPosition="center" loaderPosition="center"
loading={isLoadingCek && idData === e?.id} loading={isLoadingCek && idData === e?.id}
radius={"xl"} radius={"xl"}
onClick={() => { onClick={() => {
setLoadingCek(true), setIdData(e?.id); setLoadingCek(true), setIdData(e?.id);
router.push(RouterAdminGlobal.preview_image({ id: e.imageId })); router.push(
RouterAdminGlobal.preview_image({ id: e.imageId })
);
}} }}
> >
Cek Cek
@@ -186,14 +203,13 @@ function TampilanListDonatur({ setReloadDonasi, donasi, isReload }: { setReloadD
danaTerkumpul={+donasi?.terkumpul} danaTerkumpul={+donasi?.terkumpul}
target={+donasi?.target} target={+donasi?.target}
isReload isReload
onSetDonasi={() => { onSetDonasi={() => {
setReloadDonasi(true); setReloadDonasi(true);
}} }}
onSuccessDonatur={(val) => { onSuccessDonatur={(val) => {
setListDonatur(val.data); setListDonatur(val.data);
setNPage(val.nPage); setNPage(val.nPage);
isReload isReload;
}} }}
/> />
) : ( ) : (
@@ -203,9 +219,10 @@ function TampilanListDonatur({ setReloadDonasi, donasi, isReload }: { setReloadD
</td> </td>
</tr> </tr>
)); ));
} };
if (!lisDonatur && !listStatus) return <CustomSkeletonAdmin height={"80vh"} /> if (!lisDonatur && !listStatus)
return <CustomSkeletonAdmin height={"80vh"} />;
return ( return (
<> <>
@@ -221,7 +238,7 @@ function TampilanListDonatur({ setReloadDonasi, donasi, isReload }: { setReloadD
style={{ style={{
transition: "0.5s", transition: "0.5s",
}} }}
disabled={selectStatus ==""} disabled={selectStatus == ""}
radius={"xl"} radius={"xl"}
variant="light" variant="light"
onClick={() => { onClick={() => {
@@ -233,10 +250,12 @@ function TampilanListDonatur({ setReloadDonasi, donasi, isReload }: { setReloadD
<Select <Select
placeholder="Pilih status" placeholder="Pilih status"
value={selectStatus} value={selectStatus}
data={listStatus?.map((e, i) => ({ data={
value: e.id, listStatus?.map((e, i) => ({
label: e.name, value: e.id,
})) || []} label: e.name,
})) || []
}
onChange={(val: any) => { onChange={(val: any) => {
onSelect(val); onSelect(val);
}} }}
@@ -282,15 +301,13 @@ function TampilanListDonatur({ setReloadDonasi, donasi, isReload }: { setReloadD
</Table> </Table>
</ScrollArea> </ScrollArea>
<Center mt={"xl"}> <Admin_V3_ComponentPaginationBreakpoint
<Pagination value={isActivePage}
value={isActivePage} total={isNPage}
total={isNPage} onChange={(val) => {
onChange={(val) => { onPageClick(val);
onPageClick(val); }}
}} />
/>
</Center>
</Paper> </Paper>
</Stack> </Stack>
</> </>
@@ -306,7 +323,7 @@ function ButtonAccept({
target, target,
onSetDonasi: onSuccessDonasi, onSetDonasi: onSuccessDonasi,
onSuccessDonatur, onSuccessDonatur,
isReload isReload,
}: { }: {
invoiceId: string; invoiceId: string;
donasiId: string; donasiId: string;
@@ -315,7 +332,7 @@ function ButtonAccept({
target: number; target: number;
onSetDonasi: (val: boolean) => void; onSetDonasi: (val: boolean) => void;
onSuccessDonatur: (val: any) => void; onSuccessDonatur: (val: any) => void;
isReload: boolean isReload: boolean;
}) { }) {
const [opened, { open, close }] = useDisclosure(false); const [opened, { open, close }] = useDisclosure(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@@ -324,7 +341,7 @@ function ButtonAccept({
let nominalDonasi = nominal; let nominalDonasi = nominal;
let jumlahTerkumpul = danaTerkumpul; let jumlahTerkumpul = danaTerkumpul;
setIsLoading(true); setIsLoading(true);
isReload isReload;
const updateStatus = await adminDonasi_funUpdateStatusDanTotal({ const updateStatus = await adminDonasi_funUpdateStatusDanTotal({
invoiceId: invoiceId, invoiceId: invoiceId,
@@ -335,8 +352,6 @@ function ButtonAccept({
statusInvoiceId: "1", statusInvoiceId: "1",
}); });
if (updateStatus.status == 200) { if (updateStatus.status == 200) {
const dataNotif = { const dataNotif = {
appId: updateStatus.data?.id, appId: updateStatus.data?.id,