fix detail donasi
This commit is contained in:
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user