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

Integrasi API pencairan dana

Browse Source
This commit is contained in:
nico
2025-02-28 17:25:58 +08:00
parent 88a8bff917
commit e964dca60a
9 changed files with 494 additions and 1808 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/app/dev/admin/donasi/pencairan_dana/[id]/page.tsx
View File

@@ -1,18 +1,29 @@
import { AdminDonasi_PencairanDana } from "@/app_modules/admin/donasi";
import { AdminDonasi_getOneById } from "@/app_modules/admin/donasi/fun/get/get_one_by_id";
export default async function Page({ params }: { params: { id: string } }) {
let donasiId = params.id;
const dataDonasi = await AdminDonasi_getOneById(donasiId);
const danaTerkumpul = dataDonasi?.terkumpul;
const totalPencairan = dataDonasi?.totalPencairan
export default async function Page() {
return (
<AdminDonasi_PencairanDana
donasiId={donasiId}
danaTerkumpul={danaTerkumpul as any}
totalPencairan={totalPencairan as any}
/>
);
}
// import { AdminDonasi_PencairanDana } from "@/app_modules/admin/donasi";
// import { AdminDonasi_getOneById } from "@/app_modules/admin/donasi/fun/get/get_one_by_id";
// export default async function Page({ params }: { params: { id: string } }) {
// let donasiId = params.id;
// const dataDonasi = await AdminDonasi_getOneById(donasiId);
// const danaTerkumpul = dataDonasi?.terkumpul;
// const totalPencairan = dataDonasi?.totalPencairan
// return (
// <AdminDonasi_PencairanDana
// donasiId={donasiId}
// danaTerkumpul={danaTerkumpul as any}
// totalPencairan={totalPencairan as any}
// />
// );
// }

3
src/app_modules/admin/_admin_global/tampilan_rupiah.tsx
View File

@@ -1,3 +1,4 @@
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { Text } from "@mantine/core";
export default function ComponentAdminGlobal_TampilanRupiahDonasi({
@@ -9,7 +10,7 @@ export default function ComponentAdminGlobal_TampilanRupiahDonasi({
}) {
return (
<>
<Text fz={fontSize ? fontSize : "md"}>
<Text c={AdminColor.white} fz={fontSize ? fontSize : "md"}>
Rp.{" "}
{new Intl.NumberFormat("id-ID", { maximumFractionDigits: 10 }).format(
nominal

4
src/app_modules/admin/donasi/component/tombol_kembali.tsx
View File

@@ -1,5 +1,6 @@
"use client";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { Group, Button } from "@mantine/core";
import { IconChevronLeft } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
@@ -10,7 +11,8 @@ export default function ComponentAdminDonasi_TombolKembali() {
<>
<Group>
<Button
c={"gray"}
bg={AdminColor.softBlue}
c={AdminColor.white}
leftIcon={<IconChevronLeft />}
variant="white"
onClick={() => router.back()}

2
src/app_modules/admin/donasi/detail/publish/detail_list_pencairan.tsx
View File

@@ -38,7 +38,7 @@ function TampilanListPencairan({
</td>
<td width={500}>
<Box w={"100%"}>
<Spoiler hideLabel="Sembunyikan" maxHeight={70} showLabel="Lihat">
<Spoiler c={AdminColor.white} hideLabel="Sembunyikan" maxHeight={70} showLabel="Lihat">
{e.deskripsi}
</Spoiler>
</Box>

3
src/app_modules/admin/donasi/detail/publish/detail_publish.tsx
View File

@@ -65,6 +65,7 @@ export default function AdminDonasi_DetailPublish({
const [isReload, setReload] = useState(false);
const params = useParams<{ id: string }>();
const [data, setData] = useState<MODEL_DONASI | null>(null);
console.log("Ini data", data)
//
useShallowEffect(() => {
@@ -110,7 +111,7 @@ export default function AdminDonasi_DetailPublish({
donasi={data}
isReload={isReload}
/>)}
<TampilanListPencairan pencairan={pencairan} />
<TampilanListPencairan pencairan={pencairan} />
</>
</Stack>
</>

889
src/app_modules/admin/donasi/detail/publish/detail_publish_backup.tsx
View File

@@ -1,889 +0,0 @@
"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> */}
</>
);
}

871
src/app_modules/admin/donasi/detail/publish/detail_publish_backup2.txt
View File

@@ -1,871 +0,0 @@
"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>
</>
);
}

114
src/app_modules/admin/donasi/detail/publish/pencairan_dana.tsx
View File

@@ -24,7 +24,7 @@ import {
import { IconCamera } from "@tabler/icons-react";
import _, { toNumber } from "lodash";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { useRouter } from "next/navigation";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import ComponentAdminDonasi_TombolKembali from "../../component/tombol_kembali";
import { AdminDonasi_funCreatePencairanDana } from "../../fun/create/fun_create_pencairan_dana";
@@ -33,34 +33,69 @@ import { AdminDonasi_AkumulasiPencairanById } from "../../fun/update/fun_update_
import { ComponentGlobal_InputCountDown } from "@/app_modules/_global/component";
import { DIRECTORY_ID } from "@/lib";
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { apiGetAdminDonasiById } from "../../lib/api_fetch_admin_donasi";
import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
import { clientLogger } from "@/util/clientLogger";
import { useShallowEffect } from "@mantine/hooks";
import CustomSkeletonAdmin from "@/app_modules/admin/_admin_global/_component/skeleton/customSkeletonAdmin";
export default function AdminDonasi_PencairanDana({
donasiId,
danaTerkumpul,
totalPencairan,
}: {
donasiId: string;
danaTerkumpul: string;
totalPencairan: number;
}) {
const [terkumpul, setTerkumpul] = useState(danaTerkumpul);
const [total, setTotal] = useState(totalPencairan);
export default function AdminDonasi_PencairanDana() {
const params = useParams<{ id: string }>();
const donasiId = params.id;
const [data, setData] = useState<MODEL_DONASI | null>(null);
// const [terkumpul, setTerkumpul] = useState(data?.terkumpul);
// const [total, setTotal] = useState(data?.totalPencairan);
useShallowEffect(() => {
loadInitialData();
}, [])
const loadInitialData = async () => {
try {
const response = await apiGetAdminDonasiById({
id: donasiId,
})
if (response?.success && response?.data) {
setData(response.data)
console.log("ini respone data", response.data)
// setTerkumpul(response.data.terkumpul)
// setTotal(response.data.totalPencairan)
} else {
setData(null)
// setTerkumpul("")
// setTotal(0)
}
} catch (error) {
clientLogger.error("Invalid data format recieved:", error);
setData(null);
// setTerkumpul("");
// setTotal(0);
}
}
return (
<>
<Stack>
<ComponentAdminDonasi_TombolKembali />
<TotalDanaView danaTerkumpul={terkumpul} totalPencairan={total} />
<FormView
danaTerkumpul={terkumpul}
donasiId={donasiId}
totalPencairan={total}
onSuccess={(val) => {
setTerkumpul(val.terkumpul);
setTotal(val.totalPencairan);
}}
/>
</Stack>
{!data ?
(
<CustomSkeletonAdmin height={500} />)
: (
<>
<TotalDanaView danaTerkumpul={data?.terkumpul as string} totalPencairan={data?.totalPencairan as number} />
<FormView
donasiId={donasiId}
danaTerkumpul={data?.terkumpul as string}
totalPencairan={data?.totalPencairan as number}
onSuccess={(val) => {
// setTerkumpul(val.terkumpul);
// setTotal(val.totalPencairan);
}}
/>
</>
)}
</Stack >
</>
);
}
@@ -74,6 +109,8 @@ function TotalDanaView({
}) {
const terkumpul = toNumber(danaTerkumpul);
const sisaDana = terkumpul - totalPencairan;
console.log("Sisa dana", sisaDana);
console.log("Terkumpul", terkumpul);
return (
<>
@@ -81,11 +118,10 @@ function TotalDanaView({
<Paper
p={"md"}
w={{ base: 200, sm: 200, md: 300, lg: 400 }}
withBorder
bg={"gray.2"}
bg={AdminColor.softBlue}
>
<Stack spacing={0} align="center">
<Text fw={"bold"}>Dana Tersisa</Text>
<Text c={AdminColor.white} fw={"bold"}>Dana Tersisa</Text>
<Title>
{
<ComponentAdminGlobal_TampilanRupiahDonasi
@@ -111,7 +147,9 @@ function FormView({
danaTerkumpul: string;
totalPencairan: number;
onSuccess: (val: any) => void;
}) {
}) {
const router = useRouter();
const [file, setFile] = useState<File | null>(null);
const [images, setImages] = useState<any | null>();
@@ -158,18 +196,21 @@ function FormView({
body.nominalCair as any
);
if (res2.status === 200) {
const loadData = await AdminDonasi_getOneById(donasiId);
const loadData = await apiGetAdminDonasiById({id: donasiId});
onSuccess(loadData);
console.log("load Data", loadData);
const dataNotif = {
appId: loadData?.id,
userId: loadData?.authorId,
pesan: loadData?.title as any,
appId: loadData?.data?.id,
userId: loadData?.data?.authorId,
pesan: loadData?.data?.title as any,
status: "Pencairan Dana",
kategoriApp: "DONASI",
title: "Dana donasi berhasil dicairkan",
};
console.log("Data Notif", dataNotif);
const notif = await adminNotifikasi_funCreateToUser({
data: dataNotif as any,
});
@@ -197,13 +238,14 @@ function FormView({
return (
<>
<Center>
<Paper p={"md"} w={{ base: 300, sm: 350, md: 400, lg: 500 }} withBorder>
<Paper p={"md"} w={{ base: 300, sm: 350, md: 400, lg: 500 }} bg={AdminColor.softBlue}>
<Center mb={"lg"}>
<Title order={5}>Form Pencairan Dana</Title>
<Title c={AdminColor.white} order={5}>Form Pencairan Dana</Title>
</Center>
<Stack>
<TextInput
icon={<Text fw={"bold"}>Rp.</Text>}
styles={{ label: { color: AdminColor.white } }}
withAsterisk
placeholder="0"
label="Nominal"
@@ -245,6 +287,7 @@ function FormView({
}}
/>
<TextInput
styles={{ label: { color: AdminColor.white } }}
withAsterisk
placeholder="Masukan judul"
label="Judul"
@@ -258,6 +301,7 @@ function FormView({
/>
<Stack spacing={5}>
<Textarea
styles={{ label: { color: AdminColor.white } }}
withAsterisk
placeholder="Masukan deskripsi"
label="Deskripsi"
@@ -288,7 +332,7 @@ function FormView({
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
setImages(buffer);
setFile(files);
} catch (error) {
@@ -341,4 +385,4 @@ function FormView({
</Center>
</>
);
}
}

387
src/app_modules/admin/donasi/detail/publish/pencairan_dana_backup.txt Normal file
View File

@@ -0,0 +1,387 @@
"use client";
import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
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 { ComponentAdminGlobal_NotifikasiPeringatan } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_peringatan";
import ComponentAdminGlobal_TampilanRupiahDonasi from "@/app_modules/admin/_admin_global/tampilan_rupiah";
import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
import ComponentDonasi_NotedBox from "@/app_modules/donasi/component/noted_box";
import mqtt_client from "@/util/mqtt_client";
import {
AspectRatio,
Button,
Center,
FileButton,
Image,
Paper,
Stack,
Text,
TextInput,
Textarea,
Title,
} from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import _, { toNumber } from "lodash";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import ComponentAdminDonasi_TombolKembali from "../../component/tombol_kembali";
import { AdminDonasi_funCreatePencairanDana } from "../../fun/create/fun_create_pencairan_dana";
import { AdminDonasi_getOneById } from "../../fun/get/get_one_by_id";
import { AdminDonasi_AkumulasiPencairanById } from "../../fun/update/fun_update_akumulasi_pencairan";
import { ComponentGlobal_InputCountDown } from "@/app_modules/_global/component";
import { DIRECTORY_ID } from "@/lib";
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { apiGetAdminDonasiById } from "../../lib/api_fetch_admin_donasi";
import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
import { clientLogger } from "@/util/clientLogger";
import { useShallowEffect } from "@mantine/hooks";
import CustomSkeletonAdmin from "@/app_modules/admin/_admin_global/_component/skeleton/customSkeletonAdmin";
export default function AdminDonasi_PencairanDana() {
const params = useParams<{ id: string }>();
const donasiId = params.id;
const [data, setData] = useState<MODEL_DONASI | null>(null);
// const [terkumpul, setTerkumpul] = useState(data?.terkumpul);
// const [total, setTotal] = useState(data?.totalPencairan);
useShallowEffect(() => {
loadInitialData();
}, [])
const loadInitialData = async () => {
try {
const response = await apiGetAdminDonasiById({
id: donasiId,
})
if (response?.success && response?.data) {
setData(response.data)
console.log("ini respone data", response.data)
// setTerkumpul(response.data.terkumpul)
// setTotal(response.data.totalPencairan)
} else {
setData(null)
// setTerkumpul("")
// setTotal(0)
}
} catch (error) {
clientLogger.error("Invalid data format recieved:", error);
setData(null);
// setTerkumpul("");
// setTotal(0);
}
}
return (
<>
<Stack>
<ComponentAdminDonasi_TombolKembali />
{!data ?
(
<CustomSkeletonAdmin height={500} />)
: (
<>
<TotalDanaView danaTerkumpul={data?.terkumpul as string} totalPencairan={data?.totalPencairan as number} />
<FormView
donasiId={donasiId}
danaTerkumpul={data?.terkumpul as string}
totalPencairan={data?.totalPencairan as number}
onSuccess={(val) => {
// setTerkumpul(val.terkumpul);
// setTotal(val.totalPencairan);
}}
/>
</>
)}
</Stack >
</>
);
}
function TotalDanaView({
danaTerkumpul,
totalPencairan,
}: {
danaTerkumpul: string;
totalPencairan: number;
}) {
const terkumpul = toNumber(danaTerkumpul);
const sisaDana = terkumpul - totalPencairan;
console.log("Sisa dana", sisaDana);
console.log("Terkumpul", terkumpul);
return (
<>
<Center>
<Paper
p={"md"}
w={{ base: 200, sm: 200, md: 300, lg: 400 }}
bg={AdminColor.softBlue}
>
<Stack spacing={0} align="center">
<Text c={AdminColor.white} fw={"bold"}>Dana Tersisa</Text>
<Title>
{
<ComponentAdminGlobal_TampilanRupiahDonasi
nominal={sisaDana}
fontSize={20}
/>
}
</Title>
</Stack>
</Paper>
</Center>
</>
);
}
function FormView({
donasiId,
danaTerkumpul,
totalPencairan,
onSuccess,
}: {
donasiId: string;
danaTerkumpul: string;
totalPencairan: number;
onSuccess: (val: any) => void;
}) {
const router = useRouter();
const [file, setFile] = useState<File | null>(null);
const [images, setImages] = useState<any | null>();
const [value, setValue] = useState({
title: "",
deskripsi: "",
nilai: "",
});
const [nilaiNominal, setNilaiNominal] = useState(0);
const [isOver, setIsOver] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const terkumpul = toNumber(danaTerkumpul);
const sisaDana = terkumpul - totalPencairan;
async function onSave() {
const body = {
donasiId: donasiId,
nominalCair: nilaiNominal,
title: value.title,
deskripsi: value.deskripsi,
};
if (_.values(body).includes(""))
return ComponentAdminGlobal_NotifikasiPeringatan("Lengkapi Data");
const uploadImage = await funGlobal_UploadToStorage({
file: file as File,
dirId: DIRECTORY_ID.donasi_bukti_trf_pencairan_dana,
});
if (!uploadImage.success)
return ComponentAdminGlobal_NotifikasiPeringatan(
"Gagal upload file gambar"
);
const res = await AdminDonasi_funCreatePencairanDana({
data: body as any,
fileId: uploadImage.data.id,
});
if (res.status === 200) {
setIsLoading(true);
const res2 = await AdminDonasi_AkumulasiPencairanById(
body.donasiId as any,
body.nominalCair as any
);
if (res2.status === 200) {
const loadData = await apiGetAdminDonasiById({id: donasiId});
onSuccess(loadData);
const dataNotif = {
appId: loadData?.id,
userId: loadData?.authorId,
pesan: loadData?.title as any,
status: "Pencairan Dana",
kategoriApp: "DONASI",
title: "Dana donasi berhasil dicairkan",
};
console.log("Data Notif", dataNotif);
const notif = await adminNotifikasi_funCreateToUser({
data: dataNotif as any,
});
if (notif.status === 201) {
mqtt_client.publish(
"USER",
JSON.stringify({ userId: loadData?.authorId, count: 1 })
);
}
ComponentAdminGlobal_NotifikasiBerhasil(res2.message);
router.back();
setIsLoading(false);
} else {
ComponentAdminGlobal_NotifikasiGagal(res2.message);
setIsLoading(false);
}
} else {
ComponentAdminGlobal_NotifikasiGagal(res.message);
setIsLoading(false);
}
}
return (
<>
<Center>
<Paper p={"md"} w={{ base: 300, sm: 350, md: 400, lg: 500 }} bg={AdminColor.softBlue}>
<Center mb={"lg"}>
<Title c={AdminColor.white} order={5}>Form Pencairan Dana</Title>
</Center>
<Stack>
<TextInput
icon={<Text fw={"bold"}>Rp.</Text>}
styles={{ label: { color: AdminColor.white } }}
withAsterisk
placeholder="0"
label="Nominal"
maxLength={sisaDana.toLocaleString().length}
error={
isOver ? (
<ComponentGlobal_ErrorInput text="Nominal melebihi sisa dana" />
) : (
""
)
}
value={value.nilai}
onChange={(val) => {
const match = val.currentTarget.value
.replace(/\./g, "")
.match(/^[0-9]+$/);
if (val.currentTarget.value === "")
return setValue({
...value,
nilai: "",
});
if (!match?.[0]) return null;
const nilai = val.currentTarget.value.replace(/\./g, "");
const target = Intl.NumberFormat("id-ID").format(+nilai);
if (+nilai > sisaDana) {
setIsOver(true);
} else {
setIsOver(false);
}
setNilaiNominal(+nilai);
setValue({
...value,
nilai: target,
});
}}
/>
<TextInput
styles={{ label: { color: AdminColor.white } }}
withAsterisk
placeholder="Masukan judul"
label="Judul"
maxLength={100}
onChange={(val: any) => {
setValue({
...value,
title: val.target.value,
});
}}
/>
<Stack spacing={5}>
<Textarea
styles={{ label: { color: AdminColor.white } }}
withAsterisk
placeholder="Masukan deskripsi"
label="Deskripsi"
maxLength={300}
autosize
minRows={3}
maxRows={5}
onChange={(val: any) => {
setValue({
...value,
deskripsi: val.target.value,
});
}}
/>
<ComponentGlobal_InputCountDown
lengthInput={value.deskripsi.length}
maxInput={300}
/>
</Stack>
<ComponentDonasi_NotedBox informasi="Wajib menyertakan bukti transfer" />
<Stack>
<Center>
<FileButton
onChange={async (files: any | null) => {
try {
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
setImages(buffer);
setFile(files);
} catch (error) {
console.log(error);
}
}}
accept="image/png,image/jpeg"
>
{(props) => (
<Button
{...props}
radius={"xl"}
variant="outline"
w={150}
leftIcon={<IconCamera />}
compact
>
Upload
</Button>
)}
</FileButton>
</Center>
{images ? (
<AspectRatio ratio={9 / 16}>
<Paper radius={"md"} withBorder>
<Image alt="Foto" src={images} />
</Paper>
</AspectRatio>
) : (
""
)}
</Stack>
<Button
loaderPosition="center"
loading={isLoading}
disabled={
_.values(value).includes("") || file === null || isOver
? true
: false
}
style={{ transition: "0.5s" }}
radius={"xl"}
mt={"lg"}
onClick={() => onSave()}
>
Simpan
</Button>
</Stack>
</Paper>
</Center>
</>
);
}