QC Investasi
# fix Tampilan admin investasi Tampilan admin donasi ## No issuee
This commit is contained in:
655
src/app_modules/admin/donasi/detail/publish/detail_publish.tsx
Normal file
655
src/app_modules/admin/donasi/detail/publish/detail_publish.tsx
Normal file
@@ -0,0 +1,655 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
ActionIcon,
|
||||
AspectRatio,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Divider,
|
||||
Grid,
|
||||
Group,
|
||||
Image,
|
||||
Modal,
|
||||
Pagination,
|
||||
Paper,
|
||||
Progress,
|
||||
ScrollArea,
|
||||
Select,
|
||||
SimpleGrid,
|
||||
Spoiler,
|
||||
Stack,
|
||||
Table,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import ComponentAdminDonasi_TombolKembali from "../../component/tombol_kembali";
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import {
|
||||
IconClover,
|
||||
IconMessageChatbot,
|
||||
IconMoneybag,
|
||||
IconReload,
|
||||
} from "@tabler/icons-react";
|
||||
import router from "next/router";
|
||||
import moment from "moment";
|
||||
import {
|
||||
MODEL_DONASI,
|
||||
MODEL_DONASI_INVOICE,
|
||||
MODEL_DONASI_PENCAIRAN_DANA,
|
||||
} from "@/app_modules/donasi/model/interface";
|
||||
import { useState } from "react";
|
||||
import { RouterAdminDonasi_OLD } from "@/app/lib/router_hipmi/router_admin";
|
||||
import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
|
||||
import _ from "lodash";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useDisclosure, useInterval, useShallowEffect } from "@mantine/hooks";
|
||||
import { Donasi_getOneById } from "@/app_modules/donasi/fun/get/get_one_donasi_by_id";
|
||||
import { AdminDonasi_getOneById } from "../../fun/get/get_one_by_id";
|
||||
import ComponentGlobalAdmin_BackButton from "@/app_modules/admin/component/back_button";
|
||||
import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
|
||||
import { adminDonasi_getListDonatur } from "../../fun/get/get_list_donatur_by_id";
|
||||
import { RouterAdminDonasi } from "@/app/lib/router_admin/router_admin_donasi";
|
||||
import adminDonasi_funUpdateStatusDanTotal from "../../fun/update/fun_update_status_dan_total";
|
||||
import { ComponentGlobalAdmin_NotifikasiBerhasil } from "@/app_modules/admin/component/admin_notifikasi/notifikasi_berhasil";
|
||||
import { ComponentGlobalAdmin_NotifikasiGagal } from "@/app_modules/admin/component/admin_notifikasi/notifikasi_gagal";
|
||||
|
||||
export default function AdminDonasi_DetailPublish({
|
||||
dataPublish,
|
||||
listDonatur,
|
||||
countDonatur,
|
||||
listPencairan,
|
||||
listMasterStatus,
|
||||
}: {
|
||||
dataPublish: MODEL_DONASI;
|
||||
listDonatur: any[];
|
||||
countDonatur: number;
|
||||
listPencairan: MODEL_DONASI_PENCAIRAN_DANA[];
|
||||
listMasterStatus: MODEL_NEW_DEFAULT_MASTER[];
|
||||
}) {
|
||||
const [dataDonasi, setDataDonasi] = useState(dataPublish);
|
||||
const [pencairan, setPencairan] = useState(listPencairan);
|
||||
const selectedData = _.omit(dataDonasi, [
|
||||
"Author",
|
||||
"imageDonasi",
|
||||
"CeritaDonasi",
|
||||
"DonasiMaster_Ketegori",
|
||||
"DonasiMaster_Durasi",
|
||||
"DonasiMaster_Status",
|
||||
]);
|
||||
|
||||
// fungsi manggil serveraction
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <pre>{JSON.stringify(pencairan, null, 2)}</pre> */}
|
||||
<Stack>
|
||||
<ComponentGlobalAdmin_BackButton />
|
||||
<TampilanDetailDonasi donasi={dataDonasi} countDonatur={countDonatur} />
|
||||
<TampilanListDonatur
|
||||
donatur={listDonatur}
|
||||
listMasterStatus={listMasterStatus}
|
||||
dataDonasi={selectedData as any}
|
||||
onSuccessDonasi={(val) => {
|
||||
setDataDonasi(val);
|
||||
}}
|
||||
/>
|
||||
<TampilanListPencairan pencairan={pencairan} />
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function TampilanDetailDonasi({
|
||||
donasi,
|
||||
countDonatur,
|
||||
}: {
|
||||
donasi: MODEL_DONASI;
|
||||
countDonatur: number;
|
||||
}) {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<Paper 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 withBorder>
|
||||
<AspectRatio ratio={1 / 1}>
|
||||
<Image
|
||||
// mah={500}
|
||||
// mx={"auto"}
|
||||
alt="Foto"
|
||||
src={RouterDonasi.api_gambar + `${donasi.imagesId}`}
|
||||
/>
|
||||
</AspectRatio>
|
||||
</Paper>
|
||||
|
||||
<Paper withBorder p={"sm"}>
|
||||
<Stack spacing={5}>
|
||||
<Title order={4}>{donasi.title}</Title>
|
||||
<Group>
|
||||
<Text fz={"xs"}>Penggalang Dana</Text>
|
||||
<Title order={5} c="blue">
|
||||
{donasi.Author.username}
|
||||
</Title>
|
||||
</Group>
|
||||
<Group>
|
||||
<Text fz={12}>Durasi</Text>
|
||||
<Title order={5} c="blue">
|
||||
{donasi.DonasiMaster_Durasi.name} hari
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Group>
|
||||
<Text fz={12}>Dana dibutuhkan</Text>
|
||||
<Title order={5} c="blue">
|
||||
<TampilanRupiahDonasi nominal={+donasi.target} />
|
||||
</Title>
|
||||
</Group>
|
||||
<Group>
|
||||
<Text fz={12}>Kategori</Text>
|
||||
<Title order={5} c="blue">
|
||||
{donasi.DonasiMaster_Ketegori.name}
|
||||
</Title>
|
||||
</Group>
|
||||
<Group>
|
||||
<Text fz={12}>Total donatur</Text>
|
||||
<Title order={5} c="blue">
|
||||
{countDonatur}
|
||||
</Title>
|
||||
</Group>
|
||||
<Group>
|
||||
<Text fz={12}>Progres</Text>
|
||||
<Title order={5} c="blue">
|
||||
{donasi.progres} %
|
||||
</Title>
|
||||
</Group>
|
||||
<Group>
|
||||
<Text fz={12}>Dana terkumpul</Text>
|
||||
<Title order={5} c="blue">
|
||||
<TampilanRupiahDonasi nominal={+donasi.terkumpul} />
|
||||
</Title>
|
||||
</Group>
|
||||
{/* <Button w={200} bg={"green.5"} color="green">Pencairan Dana</Button> */}
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<Paper withBorder p={"sm"}>
|
||||
<Stack spacing={"xl"}>
|
||||
<Center>
|
||||
<Title order={4}>Pencairan Dana</Title>
|
||||
</Center>
|
||||
<Grid>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Stack spacing={0}>
|
||||
<Text fz={"xs"}>Total Dana Dicairkan</Text>
|
||||
<Title>
|
||||
<TampilanRupiahDonasi
|
||||
nominal={donasi.totalPencairan}
|
||||
fontSize={14}
|
||||
/>
|
||||
</Title>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Stack spacing={0}>
|
||||
<Text fz={"xs"}>Bank Tujuan</Text>
|
||||
<Title order={6}>{donasi.namaBank}</Title>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Stack spacing={0}>
|
||||
<Text fz={"xs"}>Akumulasi Pencairan</Text>
|
||||
<Title order={6}>{donasi.akumulasiPencairan} Kali</Title>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Stack spacing={0}>
|
||||
<Text fz={"xs"}>Nomor Rekening</Text>
|
||||
<Title order={6}>{donasi.rekening}</Title>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Button
|
||||
radius={"xl"}
|
||||
onClick={() =>
|
||||
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 [isLoading, setLoading] = 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>{e?.Author.username}</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center>{e?.DonasiMaster_Bank?.name}</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center>
|
||||
<TampilanRupiahDonasi nominal={+e?.nominal} />
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center>
|
||||
{new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(
|
||||
e?.createdAt
|
||||
)}
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center>
|
||||
<Badge w={150} variant="dot">
|
||||
{e?.DonasiMaster_StatusInvoice?.name}
|
||||
</Badge>
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center>
|
||||
{e?.donasiMaster_StatusInvoiceId === "1" ||
|
||||
e?.donasiMaster_StatusInvoiceId === "2" ? (
|
||||
<Button
|
||||
radius={"xl"}
|
||||
onClick={() =>
|
||||
router.push(
|
||||
RouterAdminDonasi.transfer_invoice + `${e?.imagesId}`
|
||||
)
|
||||
}
|
||||
>
|
||||
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> */}
|
||||
<Group
|
||||
position="apart"
|
||||
bg={"gray.4"}
|
||||
p={"xs"}
|
||||
style={{ borderRadius: "6px" }}
|
||||
>
|
||||
<Title order={4}>Daftar Donatur</Title>
|
||||
<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>
|
||||
</Group>
|
||||
|
||||
<Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
|
||||
<ScrollArea w={"100%"} h={"90%"}>
|
||||
<Table
|
||||
verticalSpacing={"xl"}
|
||||
horizontalSpacing={"md"}
|
||||
p={"md"}
|
||||
w={1500}
|
||||
striped
|
||||
highlightOnHover
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<Center>Nama Donatur</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Nama Bank</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Jumlah Donasi</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Tanggal</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Status</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Bukti Transfer</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>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);
|
||||
|
||||
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) {
|
||||
const updateData = await AdminDonasi_getOneById(donasiId);
|
||||
onSuccessDonasi(updateData as any);
|
||||
const updatelistDonatur = await adminDonasi_getListDonatur({
|
||||
donasiId: donasiId,
|
||||
page: 1,
|
||||
});
|
||||
onSuccessDonatur(updatelistDonatur);
|
||||
|
||||
ComponentGlobalAdmin_NotifikasiBerhasil(updateStatus.message);
|
||||
} else {
|
||||
ComponentGlobalAdmin_NotifikasiGagal(updateStatus.message);
|
||||
}
|
||||
|
||||
close();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
color="green"
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
open();
|
||||
}}
|
||||
>
|
||||
Terima
|
||||
</Button>
|
||||
|
||||
<Modal opened={opened} onClose={close} centered withCloseButton={false}>
|
||||
<Paper>
|
||||
<Stack align="center">
|
||||
<Title
|
||||
order={6}
|
||||
>{`${"Anda yakin sudah melihat bukti transfer ?"}`}</Title>
|
||||
<Group position="center">
|
||||
<Button radius={"xl"} onClick={() => close()}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
onAccept();
|
||||
}}
|
||||
>
|
||||
Terima
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
//######################## LIST PENCAIRAN #####################//
|
||||
function TampilanListPencairan({
|
||||
pencairan,
|
||||
}: {
|
||||
pencairan: MODEL_DONASI_PENCAIRAN_DANA[];
|
||||
}) {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [gambarId, setGambarId] = useState("");
|
||||
|
||||
const rowTable = pencairan.map((e) => (
|
||||
<tr key={e.id}>
|
||||
<td>
|
||||
<TampilanRupiahDonasi nominal={e.nominalCair} />
|
||||
</td>
|
||||
<td>{moment(e.createdAt).format("ll")}</td>
|
||||
<td>
|
||||
<Text>{e.title}</Text>
|
||||
</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"}
|
||||
compact
|
||||
bg={"green"}
|
||||
color="green"
|
||||
onClick={() => {
|
||||
open();
|
||||
setGambarId(e.imagesId);
|
||||
}}
|
||||
>
|
||||
Detail
|
||||
</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>
|
||||
|
||||
<Stack p={"md"}>
|
||||
<Title order={3}>Rincian Pencairan Dana</Title>
|
||||
{/* <pre>{JSON.stringify(pencairan, null, 2)}</pre> */}
|
||||
{_.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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user