Fix Detail Publish Daftar Donatur
This commit is contained in:
@@ -0,0 +1,457 @@
|
||||
import { AccentColor } from '@/app_modules/_global/color';
|
||||
import { AdminColor } from '@/app_modules/_global/color/color_pallet';
|
||||
import { ComponentGlobal_TampilanRupiah } from '@/app_modules/_global/component';
|
||||
import { apiGetMasterStatusTransaksi } from '@/app_modules/_global/lib/api_fetch_master';
|
||||
import { globalStatusTransaksi } from '@/app_modules/_global/lib/master_list_app';
|
||||
import { ComponentAdminGlobal_TitlePage } from '@/app_modules/admin/_admin_global/_component';
|
||||
import CustomSkeletonAdmin from '@/app_modules/admin/_admin_global/_component/skeleton/customSkeletonAdmin';
|
||||
import { MODEL_DONASI } from '@/app_modules/donasi/model/interface';
|
||||
import { MODEL_NEW_DEFAULT_MASTER } from '@/app_modules/model_global/interface';
|
||||
import { RouterAdminGlobal } from '@/lib';
|
||||
import { clientLogger } from '@/util/clientLogger';
|
||||
import { Center, Badge, Button, Stack, Group, ActionIcon, Select, Paper, ScrollArea, Table, Pagination, Text, Modal, Title } from '@mantine/core';
|
||||
import { useDisclosure, useShallowEffect } from '@mantine/hooks';
|
||||
import { IconReload } from '@tabler/icons-react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { useRouter } from 'next/router';
|
||||
import React, { useState } from 'react';
|
||||
import { apiGetAdminAllDaftarDonatur } from '../../lib/api_fetch_admin_donasi';
|
||||
import { ComponentAdminGlobal_NotifikasiBerhasil } from '@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_berhasil';
|
||||
import { ComponentAdminGlobal_NotifikasiGagal } from '@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_gagal';
|
||||
import adminNotifikasi_funCreateToUser from '@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user';
|
||||
import adminDonasi_funUpdateStatusDanTotal from '../../fun/update/fun_update_status_dan_total';
|
||||
|
||||
function TampilanListDonatur({ setReloadDonasi, donasi, isReload }: { setReloadDonasi: (val: boolean) => void, donasi: MODEL_DONASI, isReload: boolean }) {
|
||||
const router = useRouter();
|
||||
const params = useParams<{ id: string }>();
|
||||
const donasiId = params.id;
|
||||
const [isLoadingCek, setLoadingCek] = useState(false);
|
||||
const [idData, setIdData] = useState("");
|
||||
const [lisDonatur, setListDonatur] = useState<any[] | null>(null);
|
||||
const [listStatus, setListStatus] = useState<MODEL_NEW_DEFAULT_MASTER[] | null>(null);
|
||||
const [isNPage, setNPage] = useState<number>(1);
|
||||
const [isActivePage, setActivePage] = useState(1);
|
||||
const [selectStatus, setSelectStatus] = useState("");
|
||||
const [isLoadingReload, setIsLoadingReload] = useState(false);
|
||||
|
||||
|
||||
useShallowEffect(() => {
|
||||
handleLoadData();
|
||||
}, [isActivePage, selectStatus, isReload]);
|
||||
|
||||
useShallowEffect(() => {
|
||||
handleLoadStatus();
|
||||
}, [])
|
||||
|
||||
const handleLoadData = async () => {
|
||||
try {
|
||||
console.log("Ini active page", isActivePage);
|
||||
const cek = globalStatusTransaksi.find((e) => e.id === selectStatus);
|
||||
const response = await apiGetAdminAllDaftarDonatur({
|
||||
id: donasiId,
|
||||
page: `${isActivePage}`,
|
||||
status: cek?.name,
|
||||
});
|
||||
|
||||
if (response?.success && response?.data?.data) {
|
||||
console.log("data lis", response.data);
|
||||
setListDonatur(response.data.data);
|
||||
setNPage(response.data.nPage || 1);
|
||||
setIsLoadingReload(false)
|
||||
} else {
|
||||
console.error("Invalid data format received:", response);
|
||||
setListDonatur([]);
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
clientLogger.error("Error get data daftar donatur", error);
|
||||
setListDonatur([]);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const handleLoadStatus = async () => {
|
||||
try {
|
||||
const response = await apiGetMasterStatusTransaksi();
|
||||
|
||||
|
||||
if (response?.success && response?.data) {
|
||||
setListStatus(response.data);
|
||||
|
||||
} else {
|
||||
console.error("Invalid data format received:", response);
|
||||
setListStatus(null);
|
||||
}
|
||||
} catch (error) {
|
||||
clientLogger.error("Error get status donatur", error);
|
||||
setListStatus(null);
|
||||
}
|
||||
}
|
||||
const onPageClick = async (page: number) => {
|
||||
console.log("page", page);
|
||||
setActivePage(page);
|
||||
}
|
||||
async function onSelect(selectStatus: any) {
|
||||
setSelectStatus(selectStatus);
|
||||
setActivePage(1)
|
||||
}
|
||||
async function onReload() {
|
||||
setSelectStatus("");
|
||||
setIsLoadingReload(true)
|
||||
handleLoadData();
|
||||
}
|
||||
|
||||
|
||||
|
||||
const renderTableBody = () => {
|
||||
|
||||
if(isLoadingReload) return (
|
||||
<tr>
|
||||
<td colSpan={12}>
|
||||
<Center>
|
||||
<Text c={AccentColor.white}>Loading Data... </Text>
|
||||
</Center>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
if (!Array.isArray(lisDonatur) || lisDonatur.length === 0) {
|
||||
return (
|
||||
<tr>
|
||||
<td colSpan={12}>
|
||||
<Center>
|
||||
<Text c={AccentColor.white}>Tidak ada data</Text>
|
||||
</Center>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
return lisDonatur?.map((e, i) => (
|
||||
<tr key={i}>
|
||||
<td>
|
||||
<Center c={AccentColor.white}>{e?.Author.username}</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center c={AccentColor.white}>{e?.DonasiMaster_Bank?.name}</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center c={AccentColor.white}>
|
||||
<ComponentGlobal_TampilanRupiah nominal={+e?.nominal} />
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center c={AccentColor.white}>
|
||||
{new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(
|
||||
new Date(e?.createdAt)
|
||||
)}
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center >
|
||||
<Badge c={AccentColor.white} w={150} variant="dot">
|
||||
{e?.DonasiMaster_StatusInvoice?.name}
|
||||
</Badge>
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center>
|
||||
{e?.donasiMaster_StatusInvoiceId === "1" ||
|
||||
e?.donasiMaster_StatusInvoiceId === "2" ? (
|
||||
<Button
|
||||
loaderPosition="center"
|
||||
loading={isLoadingCek && idData === e?.id}
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
setLoadingCek(true), setIdData(e?.id);
|
||||
router.push(RouterAdminGlobal.preview_image({ id: e.imageId }));
|
||||
}}
|
||||
>
|
||||
Cek
|
||||
</Button>
|
||||
) : (
|
||||
"-"
|
||||
)}
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center>
|
||||
{e?.donasiMaster_StatusInvoiceId === "1" ? (
|
||||
<Button radius={"xl"} disabled>
|
||||
Selesai
|
||||
</Button>
|
||||
) : e?.DonasiMaster_StatusInvoice?.id === "2" ? (
|
||||
<ButtonAccept
|
||||
invoiceId={e?.id}
|
||||
donasiId={donasi.id}
|
||||
nominal={+e?.nominal}
|
||||
danaTerkumpul={+donasi?.terkumpul}
|
||||
target={+donasi?.target}
|
||||
isReload
|
||||
|
||||
onSetDonasi={() => {
|
||||
setReloadDonasi(true);
|
||||
}}
|
||||
onSuccessDonatur={(val) => {
|
||||
setListDonatur(val.data);
|
||||
setNPage(val.nPage);
|
||||
isReload
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Text>-</Text>
|
||||
)}
|
||||
</Center>
|
||||
</td>
|
||||
</tr>
|
||||
));
|
||||
}
|
||||
|
||||
if (!lisDonatur && !listStatus) return <CustomSkeletonAdmin height={"80vh"} />
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack spacing={"xs"} h={"100%"}>
|
||||
{/* <pre>{JSON.stringify(dataDonasi, null, 2)}</pre> */}
|
||||
<ComponentAdminGlobal_TitlePage
|
||||
name="Daftar Donatur"
|
||||
color={AdminColor.softBlue}
|
||||
component={
|
||||
<Group>
|
||||
<ActionIcon
|
||||
size={"lg"}
|
||||
style={{
|
||||
transition: "0.5s",
|
||||
}}
|
||||
disabled={selectStatus ==""}
|
||||
radius={"xl"}
|
||||
variant="light"
|
||||
onClick={() => {
|
||||
onReload();
|
||||
}}
|
||||
>
|
||||
<IconReload />
|
||||
</ActionIcon>
|
||||
<Select
|
||||
placeholder="Pilih status"
|
||||
value={selectStatus}
|
||||
data={listStatus?.map((e, i) => ({
|
||||
value: e.id,
|
||||
label: e.name,
|
||||
})) || []}
|
||||
onChange={(val: any) => {
|
||||
onSelect(val);
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
}
|
||||
/>
|
||||
|
||||
<Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
|
||||
<ScrollArea w={"100%"} h={"90%"}>
|
||||
<Table
|
||||
verticalSpacing={"xl"}
|
||||
horizontalSpacing={"md"}
|
||||
p={"md"}
|
||||
w={1500}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Nama Donatur</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Nama Bank</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Jumlah Donasi</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Tanggal</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Status</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Bukti Transfer</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Aksi</Center>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{renderTableBody()}</tbody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
|
||||
<Center mt={"xl"}>
|
||||
<Pagination
|
||||
value={isActivePage}
|
||||
total={isNPage}
|
||||
onChange={(val) => {
|
||||
onPageClick(val);
|
||||
}}
|
||||
/>
|
||||
</Center>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default TampilanListDonatur;
|
||||
function ButtonAccept({
|
||||
invoiceId,
|
||||
donasiId,
|
||||
nominal,
|
||||
danaTerkumpul,
|
||||
target,
|
||||
onSetDonasi: onSuccessDonasi,
|
||||
onSuccessDonatur,
|
||||
isReload
|
||||
}: {
|
||||
invoiceId: string;
|
||||
donasiId: string;
|
||||
nominal: number;
|
||||
danaTerkumpul: number;
|
||||
target: number;
|
||||
onSetDonasi: (val: boolean) => void;
|
||||
onSuccessDonatur: (val: any) => void;
|
||||
isReload: boolean
|
||||
}) {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
async function onAccept() {
|
||||
let nominalDonasi = nominal;
|
||||
let jumlahTerkumpul = danaTerkumpul;
|
||||
setIsLoading(true);
|
||||
isReload
|
||||
|
||||
console.log({
|
||||
|
||||
jumlahTerkumpul: jumlahTerkumpul,
|
||||
nominal: nominalDonasi,
|
||||
statusInvoiceId: "1",
|
||||
target: target,
|
||||
});
|
||||
|
||||
const updateStatus = await adminDonasi_funUpdateStatusDanTotal({
|
||||
invoiceId: invoiceId,
|
||||
donasiId: donasiId,
|
||||
jumlahTerkumpul: jumlahTerkumpul,
|
||||
nominal: nominalDonasi,
|
||||
target: target,
|
||||
statusInvoiceId: "1",
|
||||
});
|
||||
|
||||
|
||||
|
||||
if (updateStatus.status == 200) {
|
||||
const dataNotif = {
|
||||
appId: updateStatus.data?.id,
|
||||
userId: updateStatus.data?.authorId,
|
||||
pesan: updateStatus.data?.Donasi?.title,
|
||||
status: updateStatus.data?.DonasiMaster_StatusInvoice?.name,
|
||||
kategoriApp: "DONASI",
|
||||
title: "Terimakasih, Donasi anda telah diterima",
|
||||
};
|
||||
|
||||
const notif = await adminNotifikasi_funCreateToUser({
|
||||
data: dataNotif as any,
|
||||
});
|
||||
|
||||
if (notif.status === 201) {
|
||||
mqtt_client.publish(
|
||||
"USER",
|
||||
JSON.stringify({ userId: updateStatus?.data?.authorId, count: 1 })
|
||||
);
|
||||
|
||||
mqtt_client.publish(
|
||||
"donasi_invoice",
|
||||
JSON.stringify({
|
||||
invoiceId: invoiceId,
|
||||
statusInvoiceId: "1",
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
const dataNotifToAuthorDonasi = {
|
||||
appId: updateStatus.data?.Donasi?.id,
|
||||
userId: updateStatus.data?.Donasi?.authorId,
|
||||
pesan: updateStatus.data?.Donasi?.title,
|
||||
status: "Donatur Baru",
|
||||
kategoriApp: "DONASI",
|
||||
title: "Ada donatur baru",
|
||||
};
|
||||
|
||||
const notifToAuthorDonasi = await adminNotifikasi_funCreateToUser({
|
||||
data: dataNotifToAuthorDonasi as any,
|
||||
});
|
||||
|
||||
if (notifToAuthorDonasi.status === 201) {
|
||||
mqtt_client.publish(
|
||||
"USER",
|
||||
JSON.stringify({
|
||||
userId: updateStatus?.data?.Donasi?.authorId,
|
||||
count: 1,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
// const updateData = await AdminDonasi_getOneById(donasiId);
|
||||
// onSuccessDonasi(updateData as any);
|
||||
// const updatelistDonatur = await adminDonasi_getListDonatur({
|
||||
// donasiId: donasiId,
|
||||
// page: 1,
|
||||
// });
|
||||
onSuccessDonasi(true);
|
||||
ComponentAdminGlobal_NotifikasiBerhasil(updateStatus.message);
|
||||
setIsLoading(false);
|
||||
close();
|
||||
} else {
|
||||
ComponentAdminGlobal_NotifikasiGagal(updateStatus.message);
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
color="green"
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
open();
|
||||
}}
|
||||
>
|
||||
Terima
|
||||
</Button>
|
||||
|
||||
<Modal opened={opened} onClose={close} centered withCloseButton={false}>
|
||||
<Paper>
|
||||
<Stack align="center">
|
||||
<Title
|
||||
align="center"
|
||||
order={6}
|
||||
>{`${"Anda sudah melihat bukti transfer dan yakin menerima donasi ini ?"}`}</Title>
|
||||
<Group position="center">
|
||||
<Button radius={"xl"} onClick={() => close()}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
color="green"
|
||||
loading={isLoading}
|
||||
loaderPosition="center"
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
onAccept();
|
||||
}}
|
||||
>
|
||||
Terima
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { RouterAdminGlobal } from "@/lib";
|
||||
import { RouterAdminDonasi } from "@/lib/router_admin/router_admin_donasi";
|
||||
import { RouterAdminDonasi_OLD } from "@/lib/router_hipmi/router_admin";
|
||||
import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
|
||||
import { ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
|
||||
import { apiGetMasterStatusTransaksi } from "@/app_modules/_global/lib/api_fetch_master";
|
||||
import { globalStatusTransaksi } from "@/app_modules/_global/lib/master_list_app";
|
||||
import { Admin_ComponentLoadImageLandscape } from "@/app_modules/admin/_admin_global";
|
||||
import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
|
||||
import CustomSkeletonAdmin from "@/app_modules/admin/_admin_global/_component/skeleton/customSkeletonAdmin";
|
||||
import { ComponentAdminGlobal_NotifikasiBerhasil } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_berhasil";
|
||||
import { ComponentAdminGlobal_NotifikasiGagal } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_gagal";
|
||||
import AdminGlobal_ComponentBackButton from "@/app_modules/admin/_admin_global/back_button";
|
||||
@@ -12,10 +14,13 @@ import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/
|
||||
import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
|
||||
import {
|
||||
MODEL_DONASI,
|
||||
MODEL_DONASI_INVOICE,
|
||||
MODEL_DONASI_PENCAIRAN_DANA,
|
||||
MODEL_DONASI_PENCAIRAN_DANA
|
||||
} from "@/app_modules/donasi/model/interface";
|
||||
import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
|
||||
import { RouterAdminGlobal } from "@/lib";
|
||||
import { RouterAdminDonasi } from "@/lib/router_admin/router_admin_donasi";
|
||||
import { RouterAdminDonasi_OLD } from "@/lib/router_hipmi/router_admin";
|
||||
import { clientLogger } from "@/util/clientLogger";
|
||||
import mqtt_client from "@/util/mqtt_client";
|
||||
import {
|
||||
ActionIcon,
|
||||
@@ -40,106 +45,95 @@ import {
|
||||
} from "@mantine/core";
|
||||
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
|
||||
import { IconReload } from "@tabler/icons-react";
|
||||
import _, { toNumber } from "lodash";
|
||||
import { toNumber } from "lodash";
|
||||
import moment from "moment";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { adminDonasi_getListDonatur } from "../../fun/get/get_list_donatur_by_id";
|
||||
import { AdminDonasi_getOneById } from "../../fun/get/get_one_by_id";
|
||||
import adminDonasi_funUpdateStatusDanTotal from "../../fun/update/fun_update_status_dan_total";
|
||||
import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
|
||||
import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
|
||||
import CustomSkeletonAdmin from "@/app_modules/admin/_admin_global/_component/skeleton/customSkeletonAdmin";
|
||||
import { apiGetAdminDonasiById } from "../../lib/api_fetch_admin_donasi";
|
||||
import { clientLogger } from "@/util/clientLogger";
|
||||
import SkeletonAdminDetailDonasiReject from "../../component/skeleton_detail donasi_reject";
|
||||
import SkeletonAdminDetailDonasiPublish from "../../component/skeleton_detail_donasi_publish";
|
||||
import { apiGetAdminAllDaftarDonatur, apiGetAdminDonasiById } from "../../lib/api_fetch_admin_donasi";
|
||||
import TampilanListDonatur from "./detail_list_donatur";
|
||||
|
||||
export default function AdminDonasi_DetailPublish({
|
||||
|
||||
listDonatur,
|
||||
countDonatur,
|
||||
listPencairan,
|
||||
listMasterStatus,
|
||||
}: {
|
||||
|
||||
listDonatur: any[];
|
||||
countDonatur: number;
|
||||
listPencairan: MODEL_DONASI_PENCAIRAN_DANA[];
|
||||
listMasterStatus: MODEL_NEW_DEFAULT_MASTER[];
|
||||
}) {
|
||||
const [pencairan, setPencairan] = useState(listPencairan);
|
||||
const [isReload, setReload] = useState(false);
|
||||
const params = useParams<{ id: string }>();
|
||||
const [data, setData] = useState<MODEL_DONASI | null>(null);
|
||||
const [pencairan, setPencairan] = useState(listPencairan);
|
||||
const selectedData = _.omit(data, [
|
||||
"Author",
|
||||
"imageDonasi",
|
||||
"CeritaDonasi",
|
||||
"DonasiMaster_Ketegori",
|
||||
"DonasiMaster_Durasi",
|
||||
"DonasiMaster_Status",
|
||||
]);
|
||||
//
|
||||
|
||||
useShallowEffect(() => {
|
||||
const loadInitialData = async () => {
|
||||
try {
|
||||
const response = await apiGetAdminDonasiById({
|
||||
id: params.id,
|
||||
})
|
||||
|
||||
if (response?.success && response?.data) {
|
||||
setTimeout(() => {
|
||||
setData(response.data)
|
||||
}, 3000);
|
||||
} else {
|
||||
console.log("Invalid data format recieved:", response);
|
||||
setData(null)
|
||||
}
|
||||
} catch (error) {
|
||||
clientLogger.error("Invalid data format recieved:", error);
|
||||
setData(null);
|
||||
}
|
||||
}
|
||||
loadInitialData();
|
||||
})
|
||||
}, [isReload])
|
||||
|
||||
const loadInitialData = async () => {
|
||||
try {
|
||||
const response = await apiGetAdminDonasiById({
|
||||
id: params.id,
|
||||
})
|
||||
|
||||
if (response?.success && response?.data) {
|
||||
console.log("data", response.data);
|
||||
setData(response.data)
|
||||
setReload(false)
|
||||
|
||||
} else {
|
||||
console.log("Invalid data format recieved:", response);
|
||||
setData(null)
|
||||
}
|
||||
} catch (error) {
|
||||
clientLogger.error("Invalid data format recieved:", error);
|
||||
setData(null);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <pre>{JSON.stringify(pencairan, null, 2)}</pre> */}
|
||||
<Stack>
|
||||
{!data ?
|
||||
(<SkeletonAdminDetailDonasiPublish />) : (
|
||||
<>
|
||||
<AdminGlobal_ComponentBackButton
|
||||
path={RouterAdminDonasi.table_publish}
|
||||
/>
|
||||
<TampilanDetailDonasi donasi={data} countDonatur={countDonatur} />
|
||||
<TampilanListDonatur
|
||||
donatur={listDonatur}
|
||||
listMasterStatus={listMasterStatus}
|
||||
dataDonasi={selectedData as any}
|
||||
onSuccessDonasi={(val) => {
|
||||
setData(val);
|
||||
}}
|
||||
/>
|
||||
<TampilanListPencairan pencairan={pencairan} />
|
||||
</>
|
||||
<>
|
||||
<AdminGlobal_ComponentBackButton
|
||||
path={RouterAdminDonasi.table_publish}
|
||||
/>
|
||||
{!data ? (<CustomSkeletonAdmin height={"40vh"} />) : (
|
||||
<TampilanDetailDonasi
|
||||
countDonatur={countDonatur} donasi={data} />
|
||||
)}
|
||||
{!data ? (<CustomSkeletonAdmin height={"80vh"} />) : (
|
||||
<TampilanListDonatur
|
||||
setReloadDonasi={(val) => {
|
||||
setReload(val)
|
||||
}}
|
||||
donasi={data}
|
||||
isReload={isReload}
|
||||
/>)}
|
||||
<TampilanListPencairan pencairan={pencairan} />
|
||||
</>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function TampilanDetailDonasi({
|
||||
donasi,
|
||||
countDonatur,
|
||||
donasi
|
||||
|
||||
}: {
|
||||
donasi: MODEL_DONASI;
|
||||
countDonatur: number;
|
||||
donasi: MODEL_DONASI;
|
||||
|
||||
}) {
|
||||
|
||||
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const router = useRouter();
|
||||
const [isLoadingPencairanDana, setIsLoadingPencairanDana] = useState(false);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Paper bg={AdminColor.softBlue} radius={"md"} p={"md"}>
|
||||
@@ -158,7 +152,7 @@ function TampilanDetailDonasi({
|
||||
<Title c={AdminColor.white} align="center" order={4}>
|
||||
Gambar Donasi
|
||||
</Title>
|
||||
<Admin_ComponentLoadImageLandscape fileId={donasi.imageId} />
|
||||
<Admin_ComponentLoadImageLandscape fileId={donasi?.imageId} />
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
@@ -338,6 +332,7 @@ function TampilanDetailDonasi({
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<Modal opened={opened} onClose={close} centered>
|
||||
<PencairanDana />
|
||||
</Modal>
|
||||
@@ -355,366 +350,6 @@ function PencairanDana() {
|
||||
);
|
||||
}
|
||||
|
||||
//######################## LIST DONATUR #####################//
|
||||
function TampilanListDonatur({
|
||||
donatur,
|
||||
listMasterStatus,
|
||||
dataDonasi,
|
||||
onSuccessDonasi,
|
||||
}: {
|
||||
donatur: any;
|
||||
listMasterStatus: MODEL_NEW_DEFAULT_MASTER[];
|
||||
dataDonasi: MODEL_DONASI;
|
||||
onSuccessDonasi: (val: any) => void;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isLoadingCek, setLoadingCek] = useState(false);
|
||||
const [idData, setIdData] = useState("");
|
||||
const [lisDonatur, setListDonatur] = useState<MODEL_DONASI_INVOICE[]>(
|
||||
donatur.data
|
||||
);
|
||||
const [isNPage, setNPage] = useState(donatur.nPage);
|
||||
const [isActivePage, setActivePage] = useState(1);
|
||||
const [isSelect, setSelect] = useState("");
|
||||
|
||||
async function onRelaod() {
|
||||
const loadData = await adminDonasi_getListDonatur({
|
||||
donasiId: dataDonasi?.id,
|
||||
page: 1,
|
||||
});
|
||||
setSelect("");
|
||||
setListDonatur(loadData.data as any);
|
||||
setNPage(loadData.nPage);
|
||||
}
|
||||
|
||||
async function onSelect(s: any) {
|
||||
setSelect(s);
|
||||
const loadData = await adminDonasi_getListDonatur({
|
||||
donasiId: dataDonasi?.id,
|
||||
page: 1,
|
||||
selectStatusId: s,
|
||||
});
|
||||
setListDonatur(loadData.data as any);
|
||||
setNPage(loadData.nPage);
|
||||
setActivePage(1);
|
||||
}
|
||||
|
||||
async function onPageClick(p: any) {
|
||||
setActivePage(p);
|
||||
const loadData = await adminDonasi_getListDonatur({
|
||||
donasiId: dataDonasi?.id,
|
||||
page: p,
|
||||
selectStatusId: isSelect,
|
||||
});
|
||||
setListDonatur(loadData.data as any);
|
||||
setNPage(loadData.nPage);
|
||||
}
|
||||
|
||||
const tableRows = lisDonatur.map((e, i) => (
|
||||
<tr key={i}>
|
||||
<td>
|
||||
<Center c={AccentColor.white}>{e?.Author.username}</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center c={AccentColor.white}>{e?.DonasiMaster_Bank?.name}</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center c={AccentColor.white}>
|
||||
<ComponentGlobal_TampilanRupiah nominal={+e?.nominal} />
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center c={AccentColor.white}>
|
||||
{new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(
|
||||
e?.createdAt
|
||||
)}
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center c={AccentColor.white}>
|
||||
<Badge w={150} variant="dot">
|
||||
{e?.DonasiMaster_StatusInvoice?.name}
|
||||
</Badge>
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center>
|
||||
{e?.donasiMaster_StatusInvoiceId === "1" ||
|
||||
e?.donasiMaster_StatusInvoiceId === "2" ? (
|
||||
<Button
|
||||
loaderPosition="center"
|
||||
loading={isLoadingCek && idData === e?.id}
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
setLoadingCek(true), setIdData(e?.id);
|
||||
router.push(RouterAdminGlobal.preview_image({ id: e.imageId }));
|
||||
}}
|
||||
>
|
||||
Cek
|
||||
</Button>
|
||||
) : (
|
||||
"-"
|
||||
)}
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center>
|
||||
{e?.donasiMaster_StatusInvoiceId === "1" ? (
|
||||
<Button radius={"xl"} disabled>
|
||||
Selesai
|
||||
</Button>
|
||||
) : e?.DonasiMaster_StatusInvoice?.id === "2" ? (
|
||||
<ButtonAccept
|
||||
invoiceId={e?.id}
|
||||
donasiId={dataDonasi?.id}
|
||||
nominal={+e?.nominal}
|
||||
danaTerkumpul={+dataDonasi?.terkumpul}
|
||||
target={+dataDonasi?.target}
|
||||
onSuccessDonasi={(val) => {
|
||||
onSuccessDonasi(val);
|
||||
}}
|
||||
onSuccessDonatur={(val) => {
|
||||
setListDonatur(val.data);
|
||||
setNPage(val.nPage);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Text>-</Text>
|
||||
)}
|
||||
</Center>
|
||||
</td>
|
||||
</tr>
|
||||
));
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack spacing={"xs"} h={"100%"}>
|
||||
{/* <pre>{JSON.stringify(dataDonasi, null, 2)}</pre> */}
|
||||
<ComponentAdminGlobal_TitlePage
|
||||
name="Daftar Donatur"
|
||||
color={AdminColor.softBlue}
|
||||
component={
|
||||
<Group>
|
||||
<ActionIcon
|
||||
size={"lg"}
|
||||
radius={"xl"}
|
||||
variant="light"
|
||||
onClick={() => {
|
||||
onRelaod();
|
||||
}}
|
||||
>
|
||||
<IconReload />
|
||||
</ActionIcon>
|
||||
<Select
|
||||
placeholder="Pilih status"
|
||||
value={isSelect}
|
||||
data={listMasterStatus.map((e) => ({
|
||||
value: e.id,
|
||||
label: e.name,
|
||||
}))}
|
||||
onChange={(val) => {
|
||||
onSelect(val);
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
}
|
||||
/>
|
||||
|
||||
<Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
|
||||
<ScrollArea w={"100%"} h={"90%"}>
|
||||
<Table
|
||||
verticalSpacing={"xl"}
|
||||
horizontalSpacing={"md"}
|
||||
p={"md"}
|
||||
w={1500}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Nama Donatur</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Nama Bank</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Jumlah Donasi</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Tanggal</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Status</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Bukti Transfer</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Aksi</Center>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{tableRows}</tbody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
|
||||
<Center mt={"xl"}>
|
||||
<Pagination
|
||||
value={isActivePage}
|
||||
total={isNPage}
|
||||
onChange={(val) => {
|
||||
onPageClick(val);
|
||||
}}
|
||||
/>
|
||||
</Center>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ButtonAccept({
|
||||
invoiceId,
|
||||
donasiId,
|
||||
nominal,
|
||||
danaTerkumpul,
|
||||
target,
|
||||
onSuccessDonasi,
|
||||
onSuccessDonatur,
|
||||
}: {
|
||||
invoiceId: string;
|
||||
donasiId: string;
|
||||
nominal: number;
|
||||
danaTerkumpul: number;
|
||||
target: number;
|
||||
onSuccessDonasi: (val: any) => void;
|
||||
onSuccessDonatur: (val: any) => void;
|
||||
}) {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
async function onAccept() {
|
||||
let nominalDonasi = nominal;
|
||||
let jumlahTerkumpul = danaTerkumpul;
|
||||
|
||||
const updateStatus = await adminDonasi_funUpdateStatusDanTotal({
|
||||
invoiceId: invoiceId,
|
||||
donasiId: donasiId,
|
||||
jumlahTerkumpul: jumlahTerkumpul,
|
||||
nominal: nominalDonasi,
|
||||
statusInvoiceId: "1",
|
||||
target: target,
|
||||
});
|
||||
if (updateStatus.status == 200) {
|
||||
setIsLoading(true);
|
||||
const dataNotif = {
|
||||
appId: updateStatus.data?.id,
|
||||
userId: updateStatus.data?.authorId,
|
||||
pesan: updateStatus.data?.Donasi?.title,
|
||||
status: updateStatus.data?.DonasiMaster_StatusInvoice?.name,
|
||||
kategoriApp: "DONASI",
|
||||
title: "Terimakasih, Donasi anda telah diterima",
|
||||
};
|
||||
|
||||
const notif = await adminNotifikasi_funCreateToUser({
|
||||
data: dataNotif as any,
|
||||
});
|
||||
|
||||
if (notif.status === 201) {
|
||||
mqtt_client.publish(
|
||||
"USER",
|
||||
JSON.stringify({ userId: updateStatus?.data?.authorId, count: 1 })
|
||||
);
|
||||
|
||||
mqtt_client.publish(
|
||||
"donasi_invoice",
|
||||
JSON.stringify({
|
||||
invoiceId: invoiceId,
|
||||
statusInvoiceId: "1",
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
const dataNotifToAuthorDonasi = {
|
||||
appId: updateStatus.data?.Donasi?.id,
|
||||
userId: updateStatus.data?.Donasi?.authorId,
|
||||
pesan: updateStatus.data?.Donasi?.title,
|
||||
status: "Donatur Baru",
|
||||
kategoriApp: "DONASI",
|
||||
title: "Ada donatur baru",
|
||||
};
|
||||
|
||||
const notifToAuthorDonasi = await adminNotifikasi_funCreateToUser({
|
||||
data: dataNotifToAuthorDonasi as any,
|
||||
});
|
||||
|
||||
if (notifToAuthorDonasi.status === 201) {
|
||||
mqtt_client.publish(
|
||||
"USER",
|
||||
JSON.stringify({
|
||||
userId: updateStatus?.data?.Donasi?.authorId,
|
||||
count: 1,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
const updateData = await AdminDonasi_getOneById(donasiId);
|
||||
onSuccessDonasi(updateData as any);
|
||||
const updatelistDonatur = await adminDonasi_getListDonatur({
|
||||
donasiId: donasiId,
|
||||
page: 1,
|
||||
});
|
||||
onSuccessDonatur(updatelistDonatur);
|
||||
ComponentAdminGlobal_NotifikasiBerhasil(updateStatus.message);
|
||||
setIsLoading(false);
|
||||
} else {
|
||||
ComponentAdminGlobal_NotifikasiGagal(updateStatus.message);
|
||||
setIsLoading(false);
|
||||
}
|
||||
close();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
color="green"
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
open();
|
||||
}}
|
||||
>
|
||||
Terima
|
||||
</Button>
|
||||
|
||||
<Modal opened={opened} onClose={close} centered withCloseButton={false}>
|
||||
<Paper>
|
||||
<Stack align="center">
|
||||
<Title
|
||||
align="center"
|
||||
order={6}
|
||||
>{`${"Anda sudah melihat bukti transfer dan yakin menerima donasi ini ?"}`}</Title>
|
||||
<Group position="center">
|
||||
<Button radius={"xl"} onClick={() => close()}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
color="green"
|
||||
loading={isLoading}
|
||||
loaderPosition="center"
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
onAccept();
|
||||
}}
|
||||
>
|
||||
Terima
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
//######################## LIST PENCAIRAN #####################//
|
||||
function TampilanListPencairan({
|
||||
pencairan,
|
||||
@@ -773,16 +408,6 @@ function TampilanListPencairan({
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <Modal opened={opened} onClose={close} centered>
|
||||
<AspectRatio ratio={9 / 16}>
|
||||
<Image
|
||||
src={RouterDonasi.api_gambar_pencairan + `${gambarId}`}
|
||||
alt="Foto"
|
||||
/>
|
||||
</AspectRatio>
|
||||
</Modal> */}
|
||||
|
||||
{/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
|
||||
|
||||
<Stack spacing={"xs"} h={"100%"}>
|
||||
<ComponentAdminGlobal_TitlePage
|
||||
@@ -857,33 +482,7 @@ function TampilanListPencairan({
|
||||
</Paper>
|
||||
</Stack>
|
||||
|
||||
{/* <Stack p={"md"}>
|
||||
<Title order={3}>Rincian Pencairan Dana</Title>
|
||||
{_.isEmpty(pencairan) ? (
|
||||
<Paper bg={"gray.1"} p={"xs"}>
|
||||
<Center>BELUM ADA PENCAIRAN DANA</Center>
|
||||
</Paper>
|
||||
) : (
|
||||
<Paper withBorder p={"xs"}>
|
||||
<Table horizontalSpacing={"md"} verticalSpacing={"md"}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nominal</th>
|
||||
<th>Tanggal</th>
|
||||
<th>Judul</th>
|
||||
<th>
|
||||
<Center>Deskripsi</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Bukti Transfer</Center>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rowTable}</tbody>
|
||||
</Table>
|
||||
</Paper>
|
||||
)}
|
||||
</Stack> */}
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,889 @@
|
||||
"use client";
|
||||
|
||||
import { RouterAdminGlobal } from "@/lib";
|
||||
import { RouterAdminDonasi } from "@/lib/router_admin/router_admin_donasi";
|
||||
import { RouterAdminDonasi_OLD } from "@/lib/router_hipmi/router_admin";
|
||||
import { ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
|
||||
import { Admin_ComponentLoadImageLandscape } from "@/app_modules/admin/_admin_global";
|
||||
import { ComponentAdminGlobal_NotifikasiBerhasil } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_berhasil";
|
||||
import { ComponentAdminGlobal_NotifikasiGagal } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_gagal";
|
||||
import AdminGlobal_ComponentBackButton from "@/app_modules/admin/_admin_global/back_button";
|
||||
import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
|
||||
import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
|
||||
import {
|
||||
MODEL_DONASI,
|
||||
MODEL_DONASI_INVOICE,
|
||||
MODEL_DONASI_PENCAIRAN_DANA,
|
||||
} from "@/app_modules/donasi/model/interface";
|
||||
import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
|
||||
import mqtt_client from "@/util/mqtt_client";
|
||||
import {
|
||||
ActionIcon,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Grid,
|
||||
Group,
|
||||
Modal,
|
||||
Pagination,
|
||||
Paper,
|
||||
ScrollArea,
|
||||
Select,
|
||||
SimpleGrid,
|
||||
Spoiler,
|
||||
Stack,
|
||||
Table,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
|
||||
import { IconReload } from "@tabler/icons-react";
|
||||
import _, { toNumber } from "lodash";
|
||||
import moment from "moment";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { adminDonasi_getListDonatur } from "../../fun/get/get_list_donatur_by_id";
|
||||
import { AdminDonasi_getOneById } from "../../fun/get/get_one_by_id";
|
||||
import adminDonasi_funUpdateStatusDanTotal from "../../fun/update/fun_update_status_dan_total";
|
||||
import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
|
||||
import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
|
||||
import CustomSkeletonAdmin from "@/app_modules/admin/_admin_global/_component/skeleton/customSkeletonAdmin";
|
||||
import { apiGetAdminDonasiById } from "../../lib/api_fetch_admin_donasi";
|
||||
import { clientLogger } from "@/util/clientLogger";
|
||||
import SkeletonAdminDetailDonasiReject from "../../component/skeleton_detail donasi_reject";
|
||||
import SkeletonAdminDetailDonasiPublish from "../../component/skeleton_detail_donasi_publish";
|
||||
|
||||
export default function AdminDonasi_DetailPublish({
|
||||
|
||||
listDonatur,
|
||||
countDonatur,
|
||||
listPencairan,
|
||||
listMasterStatus,
|
||||
}: {
|
||||
|
||||
listDonatur: any[];
|
||||
countDonatur: number;
|
||||
listPencairan: MODEL_DONASI_PENCAIRAN_DANA[];
|
||||
listMasterStatus: MODEL_NEW_DEFAULT_MASTER[];
|
||||
}) {
|
||||
const params = useParams<{ id: string }>();
|
||||
const [data, setData] = useState<MODEL_DONASI | null>(null);
|
||||
const [pencairan, setPencairan] = useState(listPencairan);
|
||||
const selectedData = _.omit(data, [
|
||||
"Author",
|
||||
"imageDonasi",
|
||||
"CeritaDonasi",
|
||||
"DonasiMaster_Ketegori",
|
||||
"DonasiMaster_Durasi",
|
||||
"DonasiMaster_Status",
|
||||
]);
|
||||
|
||||
useShallowEffect(() => {
|
||||
const loadInitialData = async () => {
|
||||
try {
|
||||
const response = await apiGetAdminDonasiById({
|
||||
id: params.id,
|
||||
})
|
||||
|
||||
if (response?.success && response?.data) {
|
||||
setTimeout(() => {
|
||||
setData(response.data)
|
||||
}, 3000);
|
||||
} else {
|
||||
console.log("Invalid data format recieved:", response);
|
||||
setData(null)
|
||||
}
|
||||
} catch (error) {
|
||||
clientLogger.error("Invalid data format recieved:", error);
|
||||
setData(null);
|
||||
}
|
||||
}
|
||||
loadInitialData();
|
||||
})
|
||||
return (
|
||||
<>
|
||||
{/* <pre>{JSON.stringify(pencairan, null, 2)}</pre> */}
|
||||
<Stack>
|
||||
{!data ?
|
||||
(<SkeletonAdminDetailDonasiPublish />) : (
|
||||
<>
|
||||
<AdminGlobal_ComponentBackButton
|
||||
path={RouterAdminDonasi.table_publish}
|
||||
/>
|
||||
<TampilanDetailDonasi donasi={data} countDonatur={countDonatur} />
|
||||
<TampilanListDonatur
|
||||
donatur={listDonatur}
|
||||
listMasterStatus={listMasterStatus}
|
||||
dataDonasi={selectedData as any}
|
||||
onSuccessDonasi={(val) => {
|
||||
setData(val);
|
||||
}}
|
||||
/>
|
||||
<TampilanListPencairan pencairan={pencairan} />
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function TampilanDetailDonasi({
|
||||
donasi,
|
||||
countDonatur,
|
||||
}: {
|
||||
donasi: MODEL_DONASI;
|
||||
countDonatur: number;
|
||||
}) {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const router = useRouter();
|
||||
const [isLoadingPencairanDana, setIsLoadingPencairanDana] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Paper bg={AdminColor.softBlue} radius={"md"} p={"md"}>
|
||||
<Stack>
|
||||
<SimpleGrid
|
||||
cols={3}
|
||||
spacing="lg"
|
||||
breakpoints={[
|
||||
{ maxWidth: "62rem", cols: 3, spacing: "md" },
|
||||
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
|
||||
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
|
||||
]}
|
||||
>
|
||||
<Paper p={"xs"} bg={AdminColor.softBlue}>
|
||||
<Stack>
|
||||
<Title c={AdminColor.white} align="center" order={4}>
|
||||
Gambar Donasi
|
||||
</Title>
|
||||
<Admin_ComponentLoadImageLandscape fileId={donasi.imageId} />
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<Paper p={"sm"} bg={AdminColor.softBlue}>
|
||||
<Stack spacing={5}>
|
||||
<Title c={AdminColor.white} order={4}>Detail Donasi</Title>
|
||||
<Grid>
|
||||
<Grid.Col span={4}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Judul</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Title order={5} c={AdminColor.white}>
|
||||
{donasi?.title}
|
||||
</Title>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={4}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Penggalang Dana</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Title order={5} c={AdminColor.white}>
|
||||
{donasi?.Author.username}
|
||||
</Title>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={4}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Durasi</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Title c={AdminColor.white} order={5}>
|
||||
{donasi?.DonasiMaster_Durasi.name} hari
|
||||
</Title>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={4}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Dana dibutuhkan</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<ComponentGlobal_TampilanRupiah
|
||||
nominal={+donasi?.target}
|
||||
color={AdminColor.yellow}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={4}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Kategori</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Title c={AdminColor.white} order={5}>
|
||||
{donasi?.DonasiMaster_Ketegori?.name}
|
||||
</Title>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={4}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Total donatur</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Title order={5} c={AdminColor.white}>
|
||||
{countDonatur}
|
||||
</Title>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={4}>
|
||||
<Text c={AdminColor.white} fz={12}>Progres</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Title order={5} c={AdminColor.white}>
|
||||
{toNumber(donasi.progres).toFixed(2)} %
|
||||
</Title>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={4}>
|
||||
<Text c={AdminColor.white} fz={12}>Dana terkumpul</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<ComponentGlobal_TampilanRupiah
|
||||
nominal={+donasi?.terkumpul}
|
||||
color={AdminColor.yellow}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Pencairan Dana */}
|
||||
<Paper bg={AdminColor.softBlue} p={"sm"}>
|
||||
<Stack spacing={"xl"}>
|
||||
<Center>
|
||||
<Title c={AdminColor.white} order={4}>Pencairan Dana</Title>
|
||||
</Center>
|
||||
<Grid>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Stack spacing={0}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Total Dana Dicairkan</Text>
|
||||
<ComponentGlobal_TampilanRupiah
|
||||
nominal={donasi?.totalPencairan}
|
||||
color={AdminColor.yellow}
|
||||
/>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Stack spacing={0}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Bank Tujuan</Text>
|
||||
<Title order={6} c={AdminColor.white}>
|
||||
{donasi?.namaBank}
|
||||
</Title>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Stack spacing={0}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Akumulasi Pencairan</Text>
|
||||
<Title order={6} c={AdminColor.white}>
|
||||
{donasi?.akumulasiPencairan} Kali
|
||||
</Title>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Stack spacing={0}>
|
||||
<Text fz={"xs"} c={AdminColor.white}>Nomor Rekening</Text>
|
||||
<Title order={6} c={AdminColor.white}>
|
||||
{donasi?.rekening}
|
||||
</Title>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Stack align="center" spacing={0}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Sisa Dana</Text>
|
||||
<ComponentGlobal_TampilanRupiah
|
||||
nominal={
|
||||
toNumber(donasi.terkumpul) -
|
||||
toNumber(donasi.totalPencairan)
|
||||
}
|
||||
color={AdminColor.yellow}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Button
|
||||
loaderPosition="center"
|
||||
loading={isLoadingPencairanDana}
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
setIsLoadingPencairanDana(true);
|
||||
router.push(
|
||||
RouterAdminDonasi_OLD.pencairan_dana + `${donasi?.id}`
|
||||
);
|
||||
}}
|
||||
>
|
||||
Cairkan Dana
|
||||
</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Paper>
|
||||
<Modal opened={opened} onClose={close} centered>
|
||||
<PencairanDana />
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function PencairanDana() {
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<TextInput label="Masukan nominal" />
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
//######################## LIST DONATUR #####################//
|
||||
function TampilanListDonatur({
|
||||
donatur,
|
||||
listMasterStatus,
|
||||
dataDonasi,
|
||||
onSuccessDonasi,
|
||||
}: {
|
||||
donatur: any;
|
||||
listMasterStatus: MODEL_NEW_DEFAULT_MASTER[];
|
||||
dataDonasi: MODEL_DONASI;
|
||||
onSuccessDonasi: (val: any) => void;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isLoadingCek, setLoadingCek] = useState(false);
|
||||
const [idData, setIdData] = useState("");
|
||||
const [lisDonatur, setListDonatur] = useState<MODEL_DONASI_INVOICE[]>(
|
||||
donatur.data
|
||||
);
|
||||
const [isNPage, setNPage] = useState(donatur.nPage);
|
||||
const [isActivePage, setActivePage] = useState(1);
|
||||
const [isSelect, setSelect] = useState("");
|
||||
|
||||
async function onRelaod() {
|
||||
const loadData = await adminDonasi_getListDonatur({
|
||||
donasiId: dataDonasi?.id,
|
||||
page: 1,
|
||||
});
|
||||
setSelect("");
|
||||
setListDonatur(loadData.data as any);
|
||||
setNPage(loadData.nPage);
|
||||
}
|
||||
|
||||
async function onSelect(s: any) {
|
||||
setSelect(s);
|
||||
const loadData = await adminDonasi_getListDonatur({
|
||||
donasiId: dataDonasi?.id,
|
||||
page: 1,
|
||||
selectStatusId: s,
|
||||
});
|
||||
setListDonatur(loadData.data as any);
|
||||
setNPage(loadData.nPage);
|
||||
setActivePage(1);
|
||||
}
|
||||
|
||||
async function onPageClick(p: any) {
|
||||
setActivePage(p);
|
||||
const loadData = await adminDonasi_getListDonatur({
|
||||
donasiId: dataDonasi?.id,
|
||||
page: p,
|
||||
selectStatusId: isSelect,
|
||||
});
|
||||
setListDonatur(loadData.data as any);
|
||||
setNPage(loadData.nPage);
|
||||
}
|
||||
|
||||
const tableRows = lisDonatur.map((e, i) => (
|
||||
<tr key={i}>
|
||||
<td>
|
||||
<Center c={AccentColor.white}>{e?.Author.username}</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center c={AccentColor.white}>{e?.DonasiMaster_Bank?.name}</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center c={AccentColor.white}>
|
||||
<ComponentGlobal_TampilanRupiah nominal={+e?.nominal} />
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center c={AccentColor.white}>
|
||||
{new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(
|
||||
e?.createdAt
|
||||
)}
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center c={AccentColor.white}>
|
||||
<Badge w={150} variant="dot">
|
||||
{e?.DonasiMaster_StatusInvoice?.name}
|
||||
</Badge>
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center>
|
||||
{e?.donasiMaster_StatusInvoiceId === "1" ||
|
||||
e?.donasiMaster_StatusInvoiceId === "2" ? (
|
||||
<Button
|
||||
loaderPosition="center"
|
||||
loading={isLoadingCek && idData === e?.id}
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
setLoadingCek(true), setIdData(e?.id);
|
||||
router.push(RouterAdminGlobal.preview_image({ id: e.imageId }));
|
||||
}}
|
||||
>
|
||||
Cek
|
||||
</Button>
|
||||
) : (
|
||||
"-"
|
||||
)}
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center>
|
||||
{e?.donasiMaster_StatusInvoiceId === "1" ? (
|
||||
<Button radius={"xl"} disabled>
|
||||
Selesai
|
||||
</Button>
|
||||
) : e?.DonasiMaster_StatusInvoice?.id === "2" ? (
|
||||
<ButtonAccept
|
||||
invoiceId={e?.id}
|
||||
donasiId={dataDonasi?.id}
|
||||
nominal={+e?.nominal}
|
||||
danaTerkumpul={+dataDonasi?.terkumpul}
|
||||
target={+dataDonasi?.target}
|
||||
onSuccessDonasi={(val) => {
|
||||
onSuccessDonasi(val);
|
||||
}}
|
||||
onSuccessDonatur={(val) => {
|
||||
setListDonatur(val.data);
|
||||
setNPage(val.nPage);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Text>-</Text>
|
||||
)}
|
||||
</Center>
|
||||
</td>
|
||||
</tr>
|
||||
));
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack spacing={"xs"} h={"100%"}>
|
||||
{/* <pre>{JSON.stringify(dataDonasi, null, 2)}</pre> */}
|
||||
<ComponentAdminGlobal_TitlePage
|
||||
name="Daftar Donatur"
|
||||
color={AdminColor.softBlue}
|
||||
component={
|
||||
<Group>
|
||||
<ActionIcon
|
||||
size={"lg"}
|
||||
radius={"xl"}
|
||||
variant="light"
|
||||
onClick={() => {
|
||||
onRelaod();
|
||||
}}
|
||||
>
|
||||
<IconReload />
|
||||
</ActionIcon>
|
||||
<Select
|
||||
placeholder="Pilih status"
|
||||
value={isSelect}
|
||||
data={listMasterStatus.map((e) => ({
|
||||
value: e.id,
|
||||
label: e.name,
|
||||
}))}
|
||||
onChange={(val) => {
|
||||
onSelect(val);
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
}
|
||||
/>
|
||||
|
||||
<Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
|
||||
<ScrollArea w={"100%"} h={"90%"}>
|
||||
<Table
|
||||
verticalSpacing={"xl"}
|
||||
horizontalSpacing={"md"}
|
||||
p={"md"}
|
||||
w={1500}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Nama Donatur</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Nama Bank</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Jumlah Donasi</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Tanggal</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Status</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Bukti Transfer</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Aksi</Center>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{tableRows}</tbody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
|
||||
<Center mt={"xl"}>
|
||||
<Pagination
|
||||
value={isActivePage}
|
||||
total={isNPage}
|
||||
onChange={(val) => {
|
||||
onPageClick(val);
|
||||
}}
|
||||
/>
|
||||
</Center>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ButtonAccept({
|
||||
invoiceId,
|
||||
donasiId,
|
||||
nominal,
|
||||
danaTerkumpul,
|
||||
target,
|
||||
onSuccessDonasi,
|
||||
onSuccessDonatur,
|
||||
}: {
|
||||
invoiceId: string;
|
||||
donasiId: string;
|
||||
nominal: number;
|
||||
danaTerkumpul: number;
|
||||
target: number;
|
||||
onSuccessDonasi: (val: any) => void;
|
||||
onSuccessDonatur: (val: any) => void;
|
||||
}) {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
async function onAccept() {
|
||||
let nominalDonasi = nominal;
|
||||
let jumlahTerkumpul = danaTerkumpul;
|
||||
|
||||
const updateStatus = await adminDonasi_funUpdateStatusDanTotal({
|
||||
invoiceId: invoiceId,
|
||||
donasiId: donasiId,
|
||||
jumlahTerkumpul: jumlahTerkumpul,
|
||||
nominal: nominalDonasi,
|
||||
statusInvoiceId: "1",
|
||||
target: target,
|
||||
});
|
||||
if (updateStatus.status == 200) {
|
||||
setIsLoading(true);
|
||||
const dataNotif = {
|
||||
appId: updateStatus.data?.id,
|
||||
userId: updateStatus.data?.authorId,
|
||||
pesan: updateStatus.data?.Donasi?.title,
|
||||
status: updateStatus.data?.DonasiMaster_StatusInvoice?.name,
|
||||
kategoriApp: "DONASI",
|
||||
title: "Terimakasih, Donasi anda telah diterima",
|
||||
};
|
||||
|
||||
const notif = await adminNotifikasi_funCreateToUser({
|
||||
data: dataNotif as any,
|
||||
});
|
||||
|
||||
if (notif.status === 201) {
|
||||
mqtt_client.publish(
|
||||
"USER",
|
||||
JSON.stringify({ userId: updateStatus?.data?.authorId, count: 1 })
|
||||
);
|
||||
|
||||
mqtt_client.publish(
|
||||
"donasi_invoice",
|
||||
JSON.stringify({
|
||||
invoiceId: invoiceId,
|
||||
statusInvoiceId: "1",
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
const dataNotifToAuthorDonasi = {
|
||||
appId: updateStatus.data?.Donasi?.id,
|
||||
userId: updateStatus.data?.Donasi?.authorId,
|
||||
pesan: updateStatus.data?.Donasi?.title,
|
||||
status: "Donatur Baru",
|
||||
kategoriApp: "DONASI",
|
||||
title: "Ada donatur baru",
|
||||
};
|
||||
|
||||
const notifToAuthorDonasi = await adminNotifikasi_funCreateToUser({
|
||||
data: dataNotifToAuthorDonasi as any,
|
||||
});
|
||||
|
||||
if (notifToAuthorDonasi.status === 201) {
|
||||
mqtt_client.publish(
|
||||
"USER",
|
||||
JSON.stringify({
|
||||
userId: updateStatus?.data?.Donasi?.authorId,
|
||||
count: 1,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
const updateData = await AdminDonasi_getOneById(donasiId);
|
||||
onSuccessDonasi(updateData as any);
|
||||
const updatelistDonatur = await adminDonasi_getListDonatur({
|
||||
donasiId: donasiId,
|
||||
page: 1,
|
||||
});
|
||||
onSuccessDonatur(updatelistDonatur);
|
||||
ComponentAdminGlobal_NotifikasiBerhasil(updateStatus.message);
|
||||
setIsLoading(false);
|
||||
} else {
|
||||
ComponentAdminGlobal_NotifikasiGagal(updateStatus.message);
|
||||
setIsLoading(false);
|
||||
}
|
||||
close();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
color="green"
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
open();
|
||||
}}
|
||||
>
|
||||
Terima
|
||||
</Button>
|
||||
|
||||
<Modal opened={opened} onClose={close} centered withCloseButton={false}>
|
||||
<Paper>
|
||||
<Stack align="center">
|
||||
<Title
|
||||
align="center"
|
||||
order={6}
|
||||
>{`${"Anda sudah melihat bukti transfer dan yakin menerima donasi ini ?"}`}</Title>
|
||||
<Group position="center">
|
||||
<Button radius={"xl"} onClick={() => close()}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
color="green"
|
||||
loading={isLoading}
|
||||
loaderPosition="center"
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
onAccept();
|
||||
}}
|
||||
>
|
||||
Terima
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
//######################## LIST PENCAIRAN #####################//
|
||||
function TampilanListPencairan({
|
||||
pencairan,
|
||||
}: {
|
||||
pencairan: MODEL_DONASI_PENCAIRAN_DANA[];
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [data, setData] = useState(pencairan);
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [gambarId, setGambarId] = useState("");
|
||||
|
||||
const rowTable = data.map((e) => (
|
||||
<tr key={e.id}>
|
||||
<td>
|
||||
<Center c={AdminColor.white}>
|
||||
<TampilanRupiahDonasi nominal={e.nominalCair} />
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center c={AdminColor.white}>{moment(e.createdAt).format("ll")}</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center c={AdminColor.white}>
|
||||
<Text>{e.title}</Text>
|
||||
</Center>
|
||||
</td>
|
||||
<td width={500}>
|
||||
<Box w={"100%"}>
|
||||
<Spoiler hideLabel="Sembunyikan" maxHeight={70} showLabel="Lihat">
|
||||
{e.deskripsi}
|
||||
</Spoiler>
|
||||
</Box>
|
||||
</td>
|
||||
<td>
|
||||
<Box>
|
||||
<Center>
|
||||
<Button
|
||||
radius={"xl"}
|
||||
bg={"green"}
|
||||
color="green"
|
||||
onClick={() => {
|
||||
// open();
|
||||
// setGambarId(e.imagesId);
|
||||
router.push(
|
||||
RouterAdminDonasi.transfer_invoice_reimbursement + e?.imagesId
|
||||
);
|
||||
}}
|
||||
>
|
||||
Cek
|
||||
</Button>
|
||||
</Center>
|
||||
</Box>
|
||||
</td>
|
||||
</tr>
|
||||
));
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <Modal opened={opened} onClose={close} centered>
|
||||
<AspectRatio ratio={9 / 16}>
|
||||
<Image
|
||||
src={RouterDonasi.api_gambar_pencairan + `${gambarId}`}
|
||||
alt="Foto"
|
||||
/>
|
||||
</AspectRatio>
|
||||
</Modal> */}
|
||||
|
||||
{/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
|
||||
|
||||
<Stack spacing={"xs"} h={"100%"}>
|
||||
<ComponentAdminGlobal_TitlePage
|
||||
name="Rincian Pencairan Dana"
|
||||
color={AdminColor.softBlue}
|
||||
component={
|
||||
<Group>
|
||||
<ActionIcon
|
||||
size={"lg"}
|
||||
radius={"xl"}
|
||||
variant="light"
|
||||
onClick={() => {
|
||||
// onRelaod();
|
||||
}}
|
||||
>
|
||||
<IconReload />
|
||||
</ActionIcon>
|
||||
{/* <Select
|
||||
placeholder="Pilih status"
|
||||
value={isSelect}
|
||||
data={listMasterStatus.map((e) => ({
|
||||
value: e.id,
|
||||
label: e.name,
|
||||
}))}
|
||||
onChange={(val) => {
|
||||
onSelect(val);
|
||||
}}
|
||||
/> */}
|
||||
</Group>
|
||||
}
|
||||
/>
|
||||
|
||||
<Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
|
||||
<ScrollArea w={"100%"} h={"90%"}>
|
||||
<Table
|
||||
verticalSpacing={"xl"}
|
||||
horizontalSpacing={"md"}
|
||||
p={"md"}
|
||||
w={1500}
|
||||
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Nominal</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Tanggal</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Judul</Center>
|
||||
</th>
|
||||
<th style={{ color: AccentColor.white }}>Deskripsi</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Bukti Transfer</Center>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rowTable}</tbody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
|
||||
{/* <Center mt={"xl"}>
|
||||
<Pagination
|
||||
value={isActivePage}
|
||||
total={isNPage}
|
||||
onChange={(val) => {
|
||||
onPageClick(val);
|
||||
}}
|
||||
/>
|
||||
</Center> */}
|
||||
</Paper>
|
||||
</Stack>
|
||||
|
||||
{/* <Stack p={"md"}>
|
||||
<Title order={3}>Rincian Pencairan Dana</Title>
|
||||
{_.isEmpty(pencairan) ? (
|
||||
<Paper bg={"gray.1"} p={"xs"}>
|
||||
<Center>BELUM ADA PENCAIRAN DANA</Center>
|
||||
</Paper>
|
||||
) : (
|
||||
<Paper withBorder p={"xs"}>
|
||||
<Table horizontalSpacing={"md"} verticalSpacing={"md"}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nominal</th>
|
||||
<th>Tanggal</th>
|
||||
<th>Judul</th>
|
||||
<th>
|
||||
<Center>Deskripsi</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Bukti Transfer</Center>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rowTable}</tbody>
|
||||
</Table>
|
||||
</Paper>
|
||||
)}
|
||||
</Stack> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,871 @@
|
||||
"use client";
|
||||
|
||||
import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
|
||||
import { ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
|
||||
import { apiGetMasterStatusTransaksi } from "@/app_modules/_global/lib/api_fetch_master";
|
||||
import { globalStatusTransaksi } from "@/app_modules/_global/lib/master_list_app";
|
||||
import { Admin_ComponentLoadImageLandscape } from "@/app_modules/admin/_admin_global";
|
||||
import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
|
||||
import CustomSkeletonAdmin from "@/app_modules/admin/_admin_global/_component/skeleton/customSkeletonAdmin";
|
||||
import { ComponentAdminGlobal_NotifikasiBerhasil } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_berhasil";
|
||||
import { ComponentAdminGlobal_NotifikasiGagal } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_gagal";
|
||||
import AdminGlobal_ComponentBackButton from "@/app_modules/admin/_admin_global/back_button";
|
||||
import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
|
||||
import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
|
||||
import {
|
||||
MODEL_DONASI,
|
||||
MODEL_DONASI_PENCAIRAN_DANA
|
||||
} from "@/app_modules/donasi/model/interface";
|
||||
import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
|
||||
import { RouterAdminGlobal } from "@/lib";
|
||||
import { RouterAdminDonasi } from "@/lib/router_admin/router_admin_donasi";
|
||||
import { RouterAdminDonasi_OLD } from "@/lib/router_hipmi/router_admin";
|
||||
import { clientLogger } from "@/util/clientLogger";
|
||||
import mqtt_client from "@/util/mqtt_client";
|
||||
import {
|
||||
ActionIcon,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Grid,
|
||||
Group,
|
||||
Modal,
|
||||
Pagination,
|
||||
Paper,
|
||||
ScrollArea,
|
||||
Select,
|
||||
SimpleGrid,
|
||||
Spoiler,
|
||||
Stack,
|
||||
Table,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
|
||||
import { IconReload } from "@tabler/icons-react";
|
||||
import _, { toNumber } from "lodash";
|
||||
import moment from "moment";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import SkeletonAdminDetailDonasiPublish from "../../component/skeleton_detail_donasi_publish";
|
||||
import { AdminDonasi_getOneById } from "../../fun/get/get_one_by_id";
|
||||
import adminDonasi_funUpdateStatusDanTotal from "../../fun/update/fun_update_status_dan_total";
|
||||
import { apiGetAdminAllDaftarDonatur, apiGetAdminDonasiById } from "../../lib/api_fetch_admin_donasi";
|
||||
|
||||
export default function AdminDonasi_DetailPublish({
|
||||
countDonatur,
|
||||
listPencairan,
|
||||
}: {
|
||||
countDonatur: number;
|
||||
listPencairan: MODEL_DONASI_PENCAIRAN_DANA[];
|
||||
}) {
|
||||
const [pencairan, setPencairan] = useState(listPencairan);
|
||||
// const [isReload, setReload] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <pre>{JSON.stringify(pencairan, null, 2)}</pre> */}
|
||||
<Stack>
|
||||
<>
|
||||
<AdminGlobal_ComponentBackButton
|
||||
path={RouterAdminDonasi.table_publish}
|
||||
/>
|
||||
<TampilanDetailDonasi countDonatur={countDonatur} />
|
||||
<TampilanListDonatur
|
||||
|
||||
/>
|
||||
<TampilanListPencairan pencairan={pencairan} />
|
||||
</>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function TampilanDetailDonasi({
|
||||
countDonatur,
|
||||
}: {
|
||||
countDonatur: number;
|
||||
}) {
|
||||
const params = useParams<{ id: string }>();
|
||||
const [data, setData] = useState<MODEL_DONASI | null>(null);
|
||||
const [isReload, setReload] = useState(false);
|
||||
|
||||
|
||||
useShallowEffect(() => {
|
||||
|
||||
loadInitialData();
|
||||
}, [isReload])
|
||||
const loadInitialData = async () => {
|
||||
try {
|
||||
const response = await apiGetAdminDonasiById({
|
||||
id: params.id,
|
||||
})
|
||||
|
||||
if (response?.success && response?.data) {
|
||||
setTimeout(() => {
|
||||
setData(response.data)
|
||||
}, 3000);
|
||||
} else {
|
||||
console.log("Invalid data format recieved:", response);
|
||||
setData(null)
|
||||
}
|
||||
} catch (error) {
|
||||
clientLogger.error("Invalid data format recieved:", error);
|
||||
setData(null);
|
||||
}
|
||||
}
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const router = useRouter();
|
||||
const [isLoadingPencairanDana, setIsLoadingPencairanDana] = useState(false);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{!data ? (<CustomSkeletonAdmin height={"40vh"}/>) : (
|
||||
<Paper bg={AdminColor.softBlue} radius={"md"} p={"md"}>
|
||||
<Stack>
|
||||
<SimpleGrid
|
||||
cols={3}
|
||||
spacing="lg"
|
||||
breakpoints={[
|
||||
{ maxWidth: "62rem", cols: 3, spacing: "md" },
|
||||
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
|
||||
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
|
||||
]}
|
||||
>
|
||||
<Paper p={"xs"} bg={AdminColor.softBlue}>
|
||||
<Stack>
|
||||
<Title c={AdminColor.white} align="center" order={4}>
|
||||
Gambar Donasi
|
||||
</Title>
|
||||
<Admin_ComponentLoadImageLandscape fileId={data?.imageId} />
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<Paper p={"sm"} bg={AdminColor.softBlue}>
|
||||
<Stack spacing={5}>
|
||||
<Title c={AdminColor.white} order={4}>Detail Donasi</Title>
|
||||
<Grid>
|
||||
<Grid.Col span={4}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Judul</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Title order={5} c={AdminColor.white}>
|
||||
{data?.title}
|
||||
</Title>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={4}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Penggalang Dana</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Title order={5} c={AdminColor.white}>
|
||||
{data?.Author.username}
|
||||
</Title>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={4}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Durasi</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Title c={AdminColor.white} order={5}>
|
||||
{data?.DonasiMaster_Durasi.name} hari
|
||||
</Title>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={4}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Dana dibutuhkan</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<ComponentGlobal_TampilanRupiah
|
||||
nominal={+data?.target}
|
||||
color={AdminColor.yellow}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={4}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Kategori</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Title c={AdminColor.white} order={5}>
|
||||
{data?.DonasiMaster_Ketegori?.name}
|
||||
</Title>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={4}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Total donatur</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Title order={5} c={AdminColor.white}>
|
||||
{countDonatur}
|
||||
</Title>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={4}>
|
||||
<Text c={AdminColor.white} fz={12}>Progres</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Title order={5} c={AdminColor.white}>
|
||||
{toNumber(data.progres).toFixed(2)} %
|
||||
</Title>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={4}>
|
||||
<Text c={AdminColor.white} fz={12}>Dana terkumpul</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<ComponentGlobal_TampilanRupiah
|
||||
nominal={+data?.terkumpul}
|
||||
color={AdminColor.yellow}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Pencairan Dana */}
|
||||
<Paper bg={AdminColor.softBlue} p={"sm"}>
|
||||
<Stack spacing={"xl"}>
|
||||
<Center>
|
||||
<Title c={AdminColor.white} order={4}>Pencairan Dana</Title>
|
||||
</Center>
|
||||
<Grid>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Stack spacing={0}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Total Dana Dicairkan</Text>
|
||||
<ComponentGlobal_TampilanRupiah
|
||||
nominal={data?.totalPencairan}
|
||||
color={AdminColor.yellow}
|
||||
/>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Stack spacing={0}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Bank Tujuan</Text>
|
||||
<Title order={6} c={AdminColor.white}>
|
||||
{data?.namaBank}
|
||||
</Title>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Stack spacing={0}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Akumulasi Pencairan</Text>
|
||||
<Title order={6} c={AdminColor.white}>
|
||||
{data?.akumulasiPencairan} Kali
|
||||
</Title>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Stack spacing={0}>
|
||||
<Text fz={"xs"} c={AdminColor.white}>Nomor Rekening</Text>
|
||||
<Title order={6} c={AdminColor.white}>
|
||||
{data?.rekening}
|
||||
</Title>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Stack align="center" spacing={0}>
|
||||
<Text c={AdminColor.white} fz={"xs"}>Sisa Dana</Text>
|
||||
<ComponentGlobal_TampilanRupiah
|
||||
nominal={
|
||||
toNumber(data.terkumpul) -
|
||||
toNumber(data.totalPencairan)
|
||||
}
|
||||
color={AdminColor.yellow}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Button
|
||||
loaderPosition="center"
|
||||
loading={isLoadingPencairanDana}
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
setIsLoadingPencairanDana(true);
|
||||
router.push(
|
||||
RouterAdminDonasi_OLD.pencairan_dana + `${data?.id}`
|
||||
);
|
||||
}}
|
||||
>
|
||||
Cairkan Dana
|
||||
</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)}
|
||||
<Modal opened={opened} onClose={close} centered>
|
||||
<PencairanDana />
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function PencairanDana() {
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<TextInput label="Masukan nominal" />
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
//######################## LIST DONATUR #####################//
|
||||
function TampilanListDonatur() {
|
||||
const router = useRouter();
|
||||
const params = useParams<{ id: string }>();
|
||||
const donasiId = params.id;
|
||||
const [isLoadingCek, setLoadingCek] = useState(false);
|
||||
const [idData, setIdData] = useState("");
|
||||
const [lisDonatur, setListDonatur] = useState<any[] | null>(null);
|
||||
const [listStatus, setListStatus] = useState<MODEL_NEW_DEFAULT_MASTER[] | null>(null);
|
||||
const [isNPage, setNPage] = useState<number>(1);
|
||||
const [isActivePage, setActivePage] = useState(1);
|
||||
|
||||
const [selectStatus, setSelectStatus] = useState("");
|
||||
|
||||
|
||||
useShallowEffect(() => {
|
||||
handleLoadData();
|
||||
}, [isActivePage, selectStatus]);
|
||||
|
||||
useShallowEffect(() => {
|
||||
handleLoadStatus();
|
||||
}, [])
|
||||
|
||||
const handleLoadData = async () => {
|
||||
try {
|
||||
const cek = globalStatusTransaksi.find((e) => e.id === selectStatus);
|
||||
const response = await apiGetAdminAllDaftarDonatur({
|
||||
id: donasiId,
|
||||
page: `${isActivePage}`,
|
||||
status: cek?.name,
|
||||
});
|
||||
|
||||
if (response?.success && response?.data?.data) {
|
||||
setListDonatur(response.data.data);
|
||||
setNPage(response.data.nPage || 1);
|
||||
} else {
|
||||
console.error("Invalid data format received:", response);
|
||||
setListDonatur([]);
|
||||
}
|
||||
} catch (error) {
|
||||
clientLogger.error("Error get data daftar donatur", error);
|
||||
setListDonatur([]);
|
||||
}
|
||||
}
|
||||
|
||||
const handleLoadStatus = async () => {
|
||||
try {
|
||||
const response = await apiGetMasterStatusTransaksi();
|
||||
|
||||
|
||||
if (response?.success && response?.data) {
|
||||
setListStatus(response.data);
|
||||
} else {
|
||||
console.error("Invalid data format received:", response);
|
||||
setListStatus(null);
|
||||
}
|
||||
} catch (error) {
|
||||
clientLogger.error("Error get status donatur", error);
|
||||
setListStatus(null);
|
||||
}
|
||||
}
|
||||
const onPageClick = async (page: number) => {
|
||||
setActivePage(page);
|
||||
}
|
||||
async function onSelect(selectStatus: any) {
|
||||
setSelectStatus(selectStatus);
|
||||
}
|
||||
async function onReload() {
|
||||
setSelectStatus("");
|
||||
handleLoadData();
|
||||
}
|
||||
|
||||
|
||||
|
||||
const renderTableBody = () => {
|
||||
if (!Array.isArray(lisDonatur) || lisDonatur.length === 0) {
|
||||
return (
|
||||
<tr>
|
||||
<td colSpan={12}>
|
||||
<Center>
|
||||
<Text c={AccentColor.white}>Tidak ada data</Text>
|
||||
</Center>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
return lisDonatur?.map((e, i) => (
|
||||
<tr key={i}>
|
||||
<td>
|
||||
<Center c={AccentColor.white}>{e?.Author.username}</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center c={AccentColor.white}>{e?.DonasiMaster_Bank?.name}</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center c={AccentColor.white}>
|
||||
<ComponentGlobal_TampilanRupiah nominal={+e?.nominal} />
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center c={AccentColor.white}>
|
||||
{new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(
|
||||
new Date(e?.createdAt)
|
||||
)}
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center >
|
||||
<Badge c={AccentColor.white} w={150} variant="dot">
|
||||
{e?.DonasiMaster_StatusInvoice?.name}
|
||||
</Badge>
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center>
|
||||
{e?.donasiMaster_StatusInvoiceId === "1" ||
|
||||
e?.donasiMaster_StatusInvoiceId === "2" ? (
|
||||
<Button
|
||||
loaderPosition="center"
|
||||
loading={isLoadingCek && idData === e?.id}
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
setLoadingCek(true), setIdData(e?.id);
|
||||
router.push(RouterAdminGlobal.preview_image({ id: e.imageId }));
|
||||
}}
|
||||
>
|
||||
Cek
|
||||
</Button>
|
||||
) : (
|
||||
"-"
|
||||
)}
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center>
|
||||
{e?.donasiMaster_StatusInvoiceId === "1" ? (
|
||||
<Button radius={"xl"} disabled>
|
||||
Selesai
|
||||
</Button>
|
||||
) : e?.DonasiMaster_StatusInvoice?.id === "2" ? (
|
||||
<ButtonAccept
|
||||
invoiceId={e?.id}
|
||||
donasiId={donasiId}
|
||||
nominal={+e?.nominal}
|
||||
danaTerkumpul={+e?.terkumpul}
|
||||
target={+e?.target}
|
||||
onSetDonasi={() => {
|
||||
onReload();
|
||||
}}
|
||||
onSuccessDonatur={(val) => {
|
||||
setListDonatur(val.data);
|
||||
setNPage(val.nPage);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Text>-</Text>
|
||||
)}
|
||||
</Center>
|
||||
</td>
|
||||
</tr>
|
||||
));
|
||||
}
|
||||
|
||||
if (!lisDonatur && !listStatus) return <CustomSkeletonAdmin height={"80vh"} />
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack spacing={"xs"} h={"100%"}>
|
||||
{/* <pre>{JSON.stringify(dataDonasi, null, 2)}</pre> */}
|
||||
<ComponentAdminGlobal_TitlePage
|
||||
name="Daftar Donatur"
|
||||
color={AdminColor.softBlue}
|
||||
component={
|
||||
<Group>
|
||||
<ActionIcon
|
||||
size={"lg"}
|
||||
radius={"xl"}
|
||||
variant="light"
|
||||
onClick={() => {
|
||||
onReload();
|
||||
}}
|
||||
>
|
||||
<IconReload />
|
||||
</ActionIcon>
|
||||
<Select
|
||||
placeholder="Pilih status"
|
||||
value={selectStatus}
|
||||
data={listStatus?.map((e, i) => ({
|
||||
value: e.id,
|
||||
label: e.name,
|
||||
})) || []}
|
||||
onChange={(val: any) => {
|
||||
onSelect(val);
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
}
|
||||
/>
|
||||
|
||||
<Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
|
||||
<ScrollArea w={"100%"} h={"90%"}>
|
||||
<Table
|
||||
verticalSpacing={"xl"}
|
||||
horizontalSpacing={"md"}
|
||||
p={"md"}
|
||||
w={1500}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Nama Donatur</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Nama Bank</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Jumlah Donasi</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Tanggal</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Status</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Bukti Transfer</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Aksi</Center>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{renderTableBody()}</tbody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
|
||||
<Center mt={"xl"}>
|
||||
<Pagination
|
||||
value={isActivePage}
|
||||
total={isNPage}
|
||||
onChange={(val) => {
|
||||
onPageClick(val);
|
||||
}}
|
||||
/>
|
||||
</Center>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ButtonAccept({
|
||||
invoiceId,
|
||||
donasiId,
|
||||
nominal,
|
||||
danaTerkumpul,
|
||||
target,
|
||||
onSetDonasi: onSuccessDonasi,
|
||||
onSuccessDonatur,
|
||||
}: {
|
||||
invoiceId: string;
|
||||
donasiId: string;
|
||||
nominal: number;
|
||||
danaTerkumpul: number;
|
||||
target: number;
|
||||
onSetDonasi: (val: boolean) => void;
|
||||
onSuccessDonatur: (val: any) => void;
|
||||
}) {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
async function onAccept() {
|
||||
let nominalDonasi = nominal;
|
||||
let jumlahTerkumpul = danaTerkumpul;
|
||||
|
||||
const updateStatus = await adminDonasi_funUpdateStatusDanTotal({
|
||||
invoiceId: invoiceId,
|
||||
donasiId: donasiId,
|
||||
jumlahTerkumpul: jumlahTerkumpul,
|
||||
nominal: nominalDonasi,
|
||||
statusInvoiceId: "1",
|
||||
target: target,
|
||||
});
|
||||
if (updateStatus.status == 200) {
|
||||
setIsLoading(true);
|
||||
const dataNotif = {
|
||||
appId: updateStatus.data?.id,
|
||||
userId: updateStatus.data?.authorId,
|
||||
pesan: updateStatus.data?.Donasi?.title,
|
||||
status: updateStatus.data?.DonasiMaster_StatusInvoice?.name,
|
||||
kategoriApp: "DONASI",
|
||||
title: "Terimakasih, Donasi anda telah diterima",
|
||||
};
|
||||
|
||||
const notif = await adminNotifikasi_funCreateToUser({
|
||||
data: dataNotif as any,
|
||||
});
|
||||
|
||||
if (notif.status === 201) {
|
||||
mqtt_client.publish(
|
||||
"USER",
|
||||
JSON.stringify({ userId: updateStatus?.data?.authorId, count: 1 })
|
||||
);
|
||||
|
||||
mqtt_client.publish(
|
||||
"donasi_invoice",
|
||||
JSON.stringify({
|
||||
invoiceId: invoiceId,
|
||||
statusInvoiceId: "1",
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
const dataNotifToAuthorDonasi = {
|
||||
appId: updateStatus.data?.Donasi?.id,
|
||||
userId: updateStatus.data?.Donasi?.authorId,
|
||||
pesan: updateStatus.data?.Donasi?.title,
|
||||
status: "Donatur Baru",
|
||||
kategoriApp: "DONASI",
|
||||
title: "Ada donatur baru",
|
||||
};
|
||||
|
||||
const notifToAuthorDonasi = await adminNotifikasi_funCreateToUser({
|
||||
data: dataNotifToAuthorDonasi as any,
|
||||
});
|
||||
|
||||
if (notifToAuthorDonasi.status === 201) {
|
||||
mqtt_client.publish(
|
||||
"USER",
|
||||
JSON.stringify({
|
||||
userId: updateStatus?.data?.Donasi?.authorId,
|
||||
count: 1,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
const updateData = await AdminDonasi_getOneById(donasiId);
|
||||
onSuccessDonasi(updateData as any);
|
||||
// const updatelistDonatur = await adminDonasi_getListDonatur({
|
||||
// donasiId: donasiId,
|
||||
// page: 1,
|
||||
// });
|
||||
onSuccessDonatur(true);
|
||||
|
||||
ComponentAdminGlobal_NotifikasiBerhasil(updateStatus.message);
|
||||
setIsLoading(false);
|
||||
} else {
|
||||
ComponentAdminGlobal_NotifikasiGagal(updateStatus.message);
|
||||
setIsLoading(false);
|
||||
}
|
||||
close();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
color="green"
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
open();
|
||||
}}
|
||||
>
|
||||
Terima
|
||||
</Button>
|
||||
|
||||
<Modal opened={opened} onClose={close} centered withCloseButton={false}>
|
||||
<Paper>
|
||||
<Stack align="center">
|
||||
<Title
|
||||
align="center"
|
||||
order={6}
|
||||
>{`${"Anda sudah melihat bukti transfer dan yakin menerima donasi ini ?"}`}</Title>
|
||||
<Group position="center">
|
||||
<Button radius={"xl"} onClick={() => close()}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
color="green"
|
||||
loading={isLoading}
|
||||
loaderPosition="center"
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
onAccept();
|
||||
}}
|
||||
>
|
||||
Terima
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
//######################## LIST PENCAIRAN #####################//
|
||||
function TampilanListPencairan({
|
||||
pencairan,
|
||||
}: {
|
||||
pencairan: MODEL_DONASI_PENCAIRAN_DANA[];
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [data, setData] = useState(pencairan);
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [gambarId, setGambarId] = useState("");
|
||||
|
||||
const rowTable = data.map((e) => (
|
||||
<tr key={e.id}>
|
||||
<td>
|
||||
<Center c={AdminColor.white}>
|
||||
<TampilanRupiahDonasi nominal={e.nominalCair} />
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center c={AdminColor.white}>{moment(e.createdAt).format("ll")}</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center c={AdminColor.white}>
|
||||
<Text>{e.title}</Text>
|
||||
</Center>
|
||||
</td>
|
||||
<td width={500}>
|
||||
<Box w={"100%"}>
|
||||
<Spoiler hideLabel="Sembunyikan" maxHeight={70} showLabel="Lihat">
|
||||
{e.deskripsi}
|
||||
</Spoiler>
|
||||
</Box>
|
||||
</td>
|
||||
<td>
|
||||
<Box>
|
||||
<Center>
|
||||
<Button
|
||||
radius={"xl"}
|
||||
bg={"green"}
|
||||
color="green"
|
||||
onClick={() => {
|
||||
// open();
|
||||
// setGambarId(e.imagesId);
|
||||
router.push(
|
||||
RouterAdminDonasi.transfer_invoice_reimbursement + e?.imagesId
|
||||
);
|
||||
}}
|
||||
>
|
||||
Cek
|
||||
</Button>
|
||||
</Center>
|
||||
</Box>
|
||||
</td>
|
||||
</tr>
|
||||
));
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<Stack spacing={"xs"} h={"100%"}>
|
||||
<ComponentAdminGlobal_TitlePage
|
||||
name="Rincian Pencairan Dana"
|
||||
color={AdminColor.softBlue}
|
||||
component={
|
||||
<Group>
|
||||
<ActionIcon
|
||||
size={"lg"}
|
||||
radius={"xl"}
|
||||
variant="light"
|
||||
onClick={() => {
|
||||
// onRelaod();
|
||||
}}
|
||||
>
|
||||
<IconReload />
|
||||
</ActionIcon>
|
||||
{/* <Select
|
||||
placeholder="Pilih status"
|
||||
value={isSelect}
|
||||
data={listMasterStatus.map((e) => ({
|
||||
value: e.id,
|
||||
label: e.name,
|
||||
}))}
|
||||
onChange={(val) => {
|
||||
onSelect(val);
|
||||
}}
|
||||
/> */}
|
||||
</Group>
|
||||
}
|
||||
/>
|
||||
|
||||
<Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
|
||||
<ScrollArea w={"100%"} h={"90%"}>
|
||||
<Table
|
||||
verticalSpacing={"xl"}
|
||||
horizontalSpacing={"md"}
|
||||
p={"md"}
|
||||
w={1500}
|
||||
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Nominal</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Tanggal</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Judul</Center>
|
||||
</th>
|
||||
<th style={{ color: AccentColor.white }}>Deskripsi</th>
|
||||
<th>
|
||||
<Center c={AccentColor.white}>Bukti Transfer</Center>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rowTable}</tbody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
|
||||
{/* <Center mt={"xl"}>
|
||||
<Pagination
|
||||
value={isActivePage}
|
||||
total={isNPage}
|
||||
onChange={(val) => {
|
||||
onPageClick(val);
|
||||
}}
|
||||
/>
|
||||
</Center> */}
|
||||
</Paper>
|
||||
</Stack>
|
||||
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -22,6 +22,11 @@ export default async function adminDonasi_funUpdateStatusDanTotal({
|
||||
}) {
|
||||
let totalNominal = nominal + jumlahTerkumpul;
|
||||
const progres = (totalNominal / target) * 100;
|
||||
console.log("Progres", progres)
|
||||
console.log("Jumlah total nominal", typeof totalNominal)
|
||||
console.log("Ini nominal", nominal)
|
||||
console.log("Ini jumlah terkumpul", jumlahTerkumpul)
|
||||
console.log("Ini target", target)
|
||||
|
||||
const updateInvoice = await prisma.donasi_Invoice.update({
|
||||
where: {
|
||||
@@ -48,6 +53,8 @@ export default async function adminDonasi_funUpdateStatusDanTotal({
|
||||
},
|
||||
},
|
||||
});
|
||||
console.log("Jumlah update invoice", updateInvoice)
|
||||
|
||||
if (!updateInvoice) return { status: 400, message: "Update invoice gagal" };
|
||||
|
||||
const updateDonasi = await prisma.donasi.update({
|
||||
@@ -59,6 +66,7 @@ export default async function adminDonasi_funUpdateStatusDanTotal({
|
||||
progres: "" + progres,
|
||||
},
|
||||
});
|
||||
console.log("Jumlah update donasi", updateDonasi)
|
||||
|
||||
if (!updateDonasi) return { status: 400, message: "Update donasi gagal" };
|
||||
revalidatePath(RouterAdminDonasi_OLD.detail_publish + donasiId);
|
||||
|
||||
@@ -4,6 +4,8 @@ export {
|
||||
apiGetAdminDonasiByStatus,
|
||||
apiGetAdminDonasiKategori,
|
||||
apiGetAdminDonasiById,
|
||||
apiGetAdminAllDaftarDonatur,
|
||||
apiGetAdminStatusDaftarDonatur
|
||||
};
|
||||
const apiGetAdminDonasiStatusCountDashboard = async ({ name }:
|
||||
{ name: "Publish" | "Review" | "Reject" }) => {
|
||||
@@ -49,7 +51,7 @@ const apiGetAdminDonasiByStatus = async ({
|
||||
const { token } = await fetch("/api/get-cookie").then((res) => res.json());
|
||||
if (!token) return await token.json().catch(() => null);
|
||||
|
||||
|
||||
|
||||
const isPage = page ? `?page=${page}` : "";
|
||||
const isSearch = search ? `&search=${search}` : "";
|
||||
const response = await fetch(
|
||||
@@ -63,14 +65,14 @@ const apiGetAdminDonasiByStatus = async ({
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
return await response.json().catch(() => null);
|
||||
}
|
||||
const apiGetAdminDonasiKategori = async () => {
|
||||
const { token } = await fetch("/api/get-cookie").then((res) => res.json());
|
||||
if (!token) return await token.json().catch(() => null);
|
||||
|
||||
|
||||
|
||||
const response = await fetch(`/api/admin/donasi/kategori`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
@@ -78,12 +80,12 @@ const apiGetAdminDonasiKategori = async () => {
|
||||
Accept: "application/json",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
return await response.json().catch(() => null);
|
||||
}
|
||||
const apiGetAdminDonasiById = async ({id} : {id: string}) => {
|
||||
const apiGetAdminDonasiById = async ({ id }: { id: string }) => {
|
||||
const { token } = await fetch("/api/get-cookie").then((res) => res.json());
|
||||
if (!token) return await token.json().catch(() => null);
|
||||
|
||||
@@ -96,5 +98,67 @@ const apiGetAdminDonasiById = async ({id} : {id: string}) => {
|
||||
Authorization: `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
return await response.json().catch(() => null);
|
||||
return await response.json().catch(() => null);
|
||||
}
|
||||
const apiGetAdminAllDaftarDonatur = async ({
|
||||
id,
|
||||
page,
|
||||
status
|
||||
}: {
|
||||
id: string,
|
||||
page: string,
|
||||
status?: string | undefined
|
||||
}) => {
|
||||
try {
|
||||
const { token } = await fetch("/api/get-cookie").then((res) => res.json());
|
||||
if (!token) {
|
||||
console.error("No token found");
|
||||
return null;
|
||||
}
|
||||
|
||||
const isStatus = status ? `&status=${status}` : "";
|
||||
console.log("Ini status",isStatus);
|
||||
const isPage = page ? `?page=${page}` : "";
|
||||
const response = await fetch(
|
||||
`/api/admin/donasi/${id}/donatur${isPage}${isStatus}`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => null);
|
||||
console.error("Error get daftar donatur:",
|
||||
errorData?.message || "Unknown error");
|
||||
return null;
|
||||
}
|
||||
|
||||
return response.json();
|
||||
} catch (error) {
|
||||
console.error("Error get daftar donatur:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
const apiGetAdminStatusDaftarDonatur = async () => {
|
||||
const { token } = await fetch("/api/get-cookie").then((res) => res.json());
|
||||
if (!token) return await token.json().catch(() => null);
|
||||
|
||||
const response = await fetch(`/api/master/status_transaksi`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
|
||||
return await response.json().catch(() => null);
|
||||
}
|
||||
@@ -94,6 +94,7 @@ const apiGetAdminAllTransaksiById = async ({
|
||||
|
||||
// Fetch data
|
||||
const isStatus = status ? `&status=${status}` : "";
|
||||
console.log("Ini status",isStatus);
|
||||
const isPage = page ? `?page=${page}` : "";
|
||||
const response = await fetch(
|
||||
`/api/admin/investasi/${id}/transaksi${isPage}${isStatus}`,
|
||||
|
||||
Reference in New Issue
Block a user