Merge pull request #351 from bipproduction/Nico/28-feb-25
Integrasi API pencairan dana
This commit is contained in:
Bagasbanuna02
@@ -1,18 +1,29 @@
|
|||||||
import { AdminDonasi_PencairanDana } from "@/app_modules/admin/donasi";
|
import { AdminDonasi_PencairanDana } from "@/app_modules/admin/donasi";
|
||||||
import { AdminDonasi_getOneById } from "@/app_modules/admin/donasi/fun/get/get_one_by_id";
|
import { AdminDonasi_getOneById } from "@/app_modules/admin/donasi/fun/get/get_one_by_id";
|
||||||
|
|
||||||
export default async function Page({ params }: { params: { id: string } }) {
|
export default async function Page() {
|
||||||
let donasiId = params.id;
|
|
||||||
const dataDonasi = await AdminDonasi_getOneById(donasiId);
|
|
||||||
const danaTerkumpul = dataDonasi?.terkumpul;
|
|
||||||
const totalPencairan = dataDonasi?.totalPencairan
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AdminDonasi_PencairanDana
|
<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}
|
||||||
|
// />
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
|
||||||
import { Text } from "@mantine/core";
|
import { Text } from "@mantine/core";
|
||||||
|
|
||||||
export default function ComponentAdminGlobal_TampilanRupiahDonasi({
|
export default function ComponentAdminGlobal_TampilanRupiahDonasi({
|
||||||
@@ -9,7 +10,7 @@ export default function ComponentAdminGlobal_TampilanRupiahDonasi({
|
|||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Text fz={fontSize ? fontSize : "md"}>
|
<Text c={AdminColor.white} fz={fontSize ? fontSize : "md"}>
|
||||||
Rp.{" "}
|
Rp.{" "}
|
||||||
{new Intl.NumberFormat("id-ID", { maximumFractionDigits: 10 }).format(
|
{new Intl.NumberFormat("id-ID", { maximumFractionDigits: 10 }).format(
|
||||||
nominal
|
nominal
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
|
||||||
import { Group, Button } from "@mantine/core";
|
import { Group, Button } from "@mantine/core";
|
||||||
import { IconChevronLeft } from "@tabler/icons-react";
|
import { IconChevronLeft } from "@tabler/icons-react";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
@@ -10,7 +11,8 @@ export default function ComponentAdminDonasi_TombolKembali() {
|
|||||||
<>
|
<>
|
||||||
<Group>
|
<Group>
|
||||||
<Button
|
<Button
|
||||||
c={"gray"}
|
bg={AdminColor.softBlue}
|
||||||
|
c={AdminColor.white}
|
||||||
leftIcon={<IconChevronLeft />}
|
leftIcon={<IconChevronLeft />}
|
||||||
variant="white"
|
variant="white"
|
||||||
onClick={() => router.back()}
|
onClick={() => router.back()}
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ function TampilanListPencairan({
|
|||||||
</td>
|
</td>
|
||||||
<td width={500}>
|
<td width={500}>
|
||||||
<Box w={"100%"}>
|
<Box w={"100%"}>
|
||||||
<Spoiler hideLabel="Sembunyikan" maxHeight={70} showLabel="Lihat">
|
<Spoiler c={AdminColor.white} hideLabel="Sembunyikan" maxHeight={70} showLabel="Lihat">
|
||||||
{e.deskripsi}
|
{e.deskripsi}
|
||||||
</Spoiler>
|
</Spoiler>
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
@@ -65,6 +65,7 @@ export default function AdminDonasi_DetailPublish({
|
|||||||
const [isReload, setReload] = useState(false);
|
const [isReload, setReload] = useState(false);
|
||||||
const params = useParams<{ id: string }>();
|
const params = useParams<{ id: string }>();
|
||||||
const [data, setData] = useState<MODEL_DONASI | null>(null);
|
const [data, setData] = useState<MODEL_DONASI | null>(null);
|
||||||
|
console.log("Ini data", data)
|
||||||
//
|
//
|
||||||
|
|
||||||
useShallowEffect(() => {
|
useShallowEffect(() => {
|
||||||
@@ -110,7 +111,7 @@ export default function AdminDonasi_DetailPublish({
|
|||||||
donasi={data}
|
donasi={data}
|
||||||
isReload={isReload}
|
isReload={isReload}
|
||||||
/>)}
|
/>)}
|
||||||
<TampilanListPencairan pencairan={pencairan} />
|
<TampilanListPencairan pencairan={pencairan} />
|
||||||
</>
|
</>
|
||||||
</Stack>
|
</Stack>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -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> */}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
|
|
||||||
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -24,7 +24,7 @@ import {
|
|||||||
import { IconCamera } from "@tabler/icons-react";
|
import { IconCamera } from "@tabler/icons-react";
|
||||||
import _, { toNumber } from "lodash";
|
import _, { toNumber } from "lodash";
|
||||||
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
|
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 { useState } from "react";
|
||||||
import ComponentAdminDonasi_TombolKembali from "../../component/tombol_kembali";
|
import ComponentAdminDonasi_TombolKembali from "../../component/tombol_kembali";
|
||||||
import { AdminDonasi_funCreatePencairanDana } from "../../fun/create/fun_create_pencairan_dana";
|
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 { ComponentGlobal_InputCountDown } from "@/app_modules/_global/component";
|
||||||
import { DIRECTORY_ID } from "@/lib";
|
import { DIRECTORY_ID } from "@/lib";
|
||||||
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
|
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({
|
export default function AdminDonasi_PencairanDana() {
|
||||||
donasiId,
|
const params = useParams<{ id: string }>();
|
||||||
danaTerkumpul,
|
const donasiId = params.id;
|
||||||
totalPencairan,
|
const [data, setData] = useState<MODEL_DONASI | null>(null);
|
||||||
}: {
|
// const [terkumpul, setTerkumpul] = useState(data?.terkumpul);
|
||||||
donasiId: string;
|
// const [total, setTotal] = useState(data?.totalPencairan);
|
||||||
danaTerkumpul: string;
|
|
||||||
totalPencairan: number;
|
useShallowEffect(() => {
|
||||||
}) {
|
loadInitialData();
|
||||||
const [terkumpul, setTerkumpul] = useState(danaTerkumpul);
|
}, [])
|
||||||
const [total, setTotal] = useState(totalPencairan);
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<Stack>
|
<Stack>
|
||||||
<ComponentAdminDonasi_TombolKembali />
|
<ComponentAdminDonasi_TombolKembali />
|
||||||
<TotalDanaView danaTerkumpul={terkumpul} totalPencairan={total} />
|
{!data ?
|
||||||
<FormView
|
(
|
||||||
danaTerkumpul={terkumpul}
|
<CustomSkeletonAdmin height={500} />)
|
||||||
donasiId={donasiId}
|
: (
|
||||||
totalPencairan={total}
|
<>
|
||||||
onSuccess={(val) => {
|
<TotalDanaView danaTerkumpul={data?.terkumpul as string} totalPencairan={data?.totalPencairan as number} />
|
||||||
setTerkumpul(val.terkumpul);
|
<FormView
|
||||||
setTotal(val.totalPencairan);
|
donasiId={donasiId}
|
||||||
}}
|
danaTerkumpul={data?.terkumpul as string}
|
||||||
/>
|
totalPencairan={data?.totalPencairan as number}
|
||||||
</Stack>
|
onSuccess={(val) => {
|
||||||
|
// setTerkumpul(val.terkumpul);
|
||||||
|
// setTotal(val.totalPencairan);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Stack >
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -74,6 +109,8 @@ function TotalDanaView({
|
|||||||
}) {
|
}) {
|
||||||
const terkumpul = toNumber(danaTerkumpul);
|
const terkumpul = toNumber(danaTerkumpul);
|
||||||
const sisaDana = terkumpul - totalPencairan;
|
const sisaDana = terkumpul - totalPencairan;
|
||||||
|
console.log("Sisa dana", sisaDana);
|
||||||
|
console.log("Terkumpul", terkumpul);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -81,11 +118,10 @@ function TotalDanaView({
|
|||||||
<Paper
|
<Paper
|
||||||
p={"md"}
|
p={"md"}
|
||||||
w={{ base: 200, sm: 200, md: 300, lg: 400 }}
|
w={{ base: 200, sm: 200, md: 300, lg: 400 }}
|
||||||
withBorder
|
bg={AdminColor.softBlue}
|
||||||
bg={"gray.2"}
|
|
||||||
>
|
>
|
||||||
<Stack spacing={0} align="center">
|
<Stack spacing={0} align="center">
|
||||||
<Text fw={"bold"}>Dana Tersisa</Text>
|
<Text c={AdminColor.white} fw={"bold"}>Dana Tersisa</Text>
|
||||||
<Title>
|
<Title>
|
||||||
{
|
{
|
||||||
<ComponentAdminGlobal_TampilanRupiahDonasi
|
<ComponentAdminGlobal_TampilanRupiahDonasi
|
||||||
@@ -111,7 +147,9 @@ function FormView({
|
|||||||
danaTerkumpul: string;
|
danaTerkumpul: string;
|
||||||
totalPencairan: number;
|
totalPencairan: number;
|
||||||
onSuccess: (val: any) => void;
|
onSuccess: (val: any) => void;
|
||||||
}) {
|
}) {
|
||||||
|
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [file, setFile] = useState<File | null>(null);
|
const [file, setFile] = useState<File | null>(null);
|
||||||
const [images, setImages] = useState<any | null>();
|
const [images, setImages] = useState<any | null>();
|
||||||
@@ -158,18 +196,21 @@ function FormView({
|
|||||||
body.nominalCair as any
|
body.nominalCair as any
|
||||||
);
|
);
|
||||||
if (res2.status === 200) {
|
if (res2.status === 200) {
|
||||||
const loadData = await AdminDonasi_getOneById(donasiId);
|
const loadData = await apiGetAdminDonasiById({id: donasiId});
|
||||||
onSuccess(loadData);
|
onSuccess(loadData);
|
||||||
|
console.log("load Data", loadData);
|
||||||
|
|
||||||
const dataNotif = {
|
const dataNotif = {
|
||||||
appId: loadData?.id,
|
appId: loadData?.data?.id,
|
||||||
userId: loadData?.authorId,
|
userId: loadData?.data?.authorId,
|
||||||
pesan: loadData?.title as any,
|
pesan: loadData?.data?.title as any,
|
||||||
status: "Pencairan Dana",
|
status: "Pencairan Dana",
|
||||||
kategoriApp: "DONASI",
|
kategoriApp: "DONASI",
|
||||||
title: "Dana donasi berhasil dicairkan",
|
title: "Dana donasi berhasil dicairkan",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
console.log("Data Notif", dataNotif);
|
||||||
|
|
||||||
const notif = await adminNotifikasi_funCreateToUser({
|
const notif = await adminNotifikasi_funCreateToUser({
|
||||||
data: dataNotif as any,
|
data: dataNotif as any,
|
||||||
});
|
});
|
||||||
@@ -197,13 +238,14 @@ function FormView({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Center>
|
<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"}>
|
<Center mb={"lg"}>
|
||||||
<Title order={5}>Form Pencairan Dana</Title>
|
<Title c={AdminColor.white} order={5}>Form Pencairan Dana</Title>
|
||||||
</Center>
|
</Center>
|
||||||
<Stack>
|
<Stack>
|
||||||
<TextInput
|
<TextInput
|
||||||
icon={<Text fw={"bold"}>Rp.</Text>}
|
icon={<Text fw={"bold"}>Rp.</Text>}
|
||||||
|
styles={{ label: { color: AdminColor.white } }}
|
||||||
withAsterisk
|
withAsterisk
|
||||||
placeholder="0"
|
placeholder="0"
|
||||||
label="Nominal"
|
label="Nominal"
|
||||||
@@ -245,6 +287,7 @@ function FormView({
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<TextInput
|
<TextInput
|
||||||
|
styles={{ label: { color: AdminColor.white } }}
|
||||||
withAsterisk
|
withAsterisk
|
||||||
placeholder="Masukan judul"
|
placeholder="Masukan judul"
|
||||||
label="Judul"
|
label="Judul"
|
||||||
@@ -258,6 +301,7 @@ function FormView({
|
|||||||
/>
|
/>
|
||||||
<Stack spacing={5}>
|
<Stack spacing={5}>
|
||||||
<Textarea
|
<Textarea
|
||||||
|
styles={{ label: { color: AdminColor.white } }}
|
||||||
withAsterisk
|
withAsterisk
|
||||||
placeholder="Masukan deskripsi"
|
placeholder="Masukan deskripsi"
|
||||||
label="Deskripsi"
|
label="Deskripsi"
|
||||||
@@ -288,7 +332,7 @@ function FormView({
|
|||||||
const buffer = URL.createObjectURL(
|
const buffer = URL.createObjectURL(
|
||||||
new Blob([new Uint8Array(await files.arrayBuffer())])
|
new Blob([new Uint8Array(await files.arrayBuffer())])
|
||||||
);
|
);
|
||||||
|
|
||||||
setImages(buffer);
|
setImages(buffer);
|
||||||
setFile(files);
|
setFile(files);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -341,4 +385,4 @@ function FormView({
|
|||||||
</Center>
|
</Center>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user