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

fix responsive admin investasi

Browse Source 
deksripsi:
- table per status
- detail per status
This commit is contained in:
Bagasbanuna02
2025-04-21 17:32:24 +08:00
parent 8416f8c06d
commit c85b4f3b80
17 changed files with 672 additions and 530 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/dev/admin/investasi/detail/publish/[id]/page.tsx
View File

@@ -1,10 +1,4 @@
import { AdminInvestasi_DetailPublish } from "@/app_modules/admin/investasi";
import { apiGetAdminInvestasiById } from "@/app_modules/admin/investasi/_lib/api_fetch_admin_investasi";
import {
adminInvestasi_funGetAllTransaksiById,
adminInvestasi_getStatusInvestasi,
} from "@/app_modules/admin/investasi/fun";
import getOneInvestasiById from "@/app_modules/investasi/fun/get_one_investasi_by_id";
export default async function Page() {

6
src/app/dev/admin/investasi/detail/reject/[id]/page.tsx
View File

@@ -2,12 +2,12 @@ import { AdminInvestasi_DetailReject } from "@/app_modules/admin/investasi";
import getOneInvestasiById from "@/app_modules/investasi/fun/get_one_investasi_by_id";
export default async function Page({ params }: { params: { id: string } }) {
const investasiId = params.id;
const dataInvestasi = await getOneInvestasiById(investasiId);
// const investasiId = params.id;
// const dataInvestasi = await getOneInvestasiById(investasiId);
return (
<>
<AdminInvestasi_DetailReject data={dataInvestasi as any} />
<AdminInvestasi_DetailReject />
</>
);
}

7
src/app/dev/admin/investasi/detail/transaksi/[id]/page.tsx
View File

@@ -1,12 +1,9 @@
import DetailTransaksi from '@/app_modules/admin/investasi/_view/detail/view_detail_transaksi';
import React from 'react';
import DetailTransaksi from "@/app_modules/admin/investasi/_view/detail/view_detail_transaksi";
function Page() {
return (
<>
<DetailTransaksi />
<DetailTransaksi />
</>
);
}

1
src/app/dev/admin/investasi/sub-menu/publish/page.tsx
View File

@@ -1,7 +1,6 @@
import { Admin_TablePublishInvestasi } from "@/app_modules/admin/investasi";
export default async function Page() {
return (
<>
<Admin_TablePublishInvestasi />

1
src/app/dev/admin/investasi/sub-menu/review/page.tsx
View File

@@ -1,5 +1,4 @@
import { Admin_TableReviewInvestasi } from "@/app_modules/admin/investasi";
import { adminInvestasi_funGetAllReview } from "@/app_modules/admin/investasi/fun/get/get_all_review";
export default async function Page() {
return (

4
src/app_modules/_global/component/comp_tampilan_rupiah.tsx
View File

@@ -1,4 +1,4 @@
import { Text } from "@mantine/core";
import { MantineStyleSystemProps, SystemProp, Text } from "@mantine/core";
import { MainColor } from "../color";
export default function ComponentGlobal_TampilanRupiah({
@@ -15,7 +15,7 @@ export default function ComponentGlobal_TampilanRupiah({
return (
<>
<Text
fw={fontWeight ? fontWeight : "bold"}
fw={fontWeight ?? "bold"}
fz={fontSize ? fontSize : "md"}
style={{
color: color ? color : MainColor.white,

77
src/app_modules/admin/investasi/_component/new_detail_data.tsx Normal file
View File

@@ -0,0 +1,77 @@
import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
import { Stack } from "@mantine/core";
import { Admin_V3_ComponentDetail } from "../../_components_v3/comp_detail_data";
import { ComponentGlobal_TampilanAngkaRatusan, ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
export function AdminInvestasi_ComponentNewDetailData({
data,
}: {
data: MODEL_INVESTASI;
}) {
const listItem = [
{
label: "Nama",
value: data?.author.username,
},
{
label: "Nomor",
value: `+${data?.author.nomor}`,
},
{
label: "Judul",
value: data?.title,
},
{
label: "Dana Dibutuhkan",
value: (
<ComponentGlobal_TampilanRupiah
nominal={+data?.targetDana}
fontWeight={"normal"}
/>
),
},
{
label: "Harga Perlembar",
value: (
<ComponentGlobal_TampilanRupiah
nominal={+data?.hargaLembar}
fontWeight={"normal"}
/>
),
},
{
label: "Total Lembar",
value: (
<ComponentGlobal_TampilanAngkaRatusan nominal={+data?.totalLembar} fontWeight={"normal"} />
),
},
{
label: "ROI",
value: `${data?.roi} %`,
},
{
label: "Pembagian Deviden",
value: data?.MasterPembagianDeviden.name,
},
{
label: "Jadwal Pembagian",
value: data?.MasterPeriodeDeviden.name,
},
{
label: "Pencarian Investor",
value: data?.MasterPencarianInvestor.name,
},
];
return (
<>
<Admin_ComponentBoxStyle>
<Stack>
{listItem.map((e, i) => (
<Admin_V3_ComponentDetail item={e} key={i} />
))}
</Stack>
</Admin_ComponentBoxStyle>
</>
);
}

112
src/app_modules/admin/investasi/_component/ui_detail_file.tsx
View File

@@ -16,6 +16,8 @@ import {
import { IconFileTypePdf } from "@tabler/icons-react";
import _ from "lodash";
import Link from "next/link";
import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
import { Admin_V3_ComponentDetail } from "../../_components_v3/comp_detail_data";
export function ComponentAdminInvestasi_UIDetailFile({
title,
@@ -28,73 +30,57 @@ export function ComponentAdminInvestasi_UIDetailFile({
listDokumen: any[];
prospektusFileId: string;
}) {
const listItem = [
{
label: "File ",
value: (
<Stack align="center">
<Text lineClamp={1}>Prospek {title}</Text>
<Link target="_blank" href={APIs.GET({ fileId: prospektusFileId })}>
<Button leftIcon={<IconFileTypePdf color="white" />} radius={50}>
Lihat
</Button>
</Link>
</Stack>
),
},
{
label: "Dokumen",
value: _.isEmpty(listDokumen) ? (
<Text>-</Text>
) : (
listDokumen.map((e: MODEL_INVESTASI_DOKUMEN) => (
<Box key={e.id}>
<Group>
<Text>{e.title}</Text>
<Link target="_blank" href={APIs.GET({ fileId: e.fileId })}>
<Button
leftIcon={<IconFileTypePdf color="white" />}
radius={50}
>
Lihat
</Button>
</Link>
</Group>
</Box>
))
),
},
];
return (
<>
<SimpleGrid
cols={1}
spacing="lg"
breakpoints={[
{ maxWidth: "62rem", cols: 1, spacing: "md" },
{ maxWidth: "48rem", cols: 1, spacing: "sm" },
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
<Paper bg={AdminColor.softBlue} p={"lg"}>
<Stack c={AdminColor.white}>
<Title order={3}>File & Dokumen</Title>
<Admin_ComponentBoxStyle>
<Stack c={AdminColor.white}>
<Title order={3}>File & Dokumen</Title>
<Stack spacing={50}>
{/* File */}
<Grid align="center">
<Grid.Col span={4}>
<Text fw={"bold"}>File:</Text>
</Grid.Col>
<Grid.Col span={8}>
<Group>
<IconFileTypePdf />
<Text>Prospek {title}</Text>
<Link
target="_blank"
href={APIs.GET({ fileId: prospektusFileId })}
>
<Button radius={50}>Lihat</Button>
</Link>
</Group>
</Grid.Col>
</Grid>
{/* Dokumen */}
<Grid>
<Grid.Col span={4}>
<Text fw={"bold"}>Dokumen:</Text>
</Grid.Col>
<Grid.Col span={8}>
<Stack>
{_.isEmpty(listDokumen) ? (
<Text>-</Text>
) : (
listDokumen.map((e: MODEL_INVESTASI_DOKUMEN) => (
<Box key={e.id}>
<Group>
<IconFileTypePdf />
<Text>{e.title}</Text>
<Link
target="_blank"
href={APIs.GET({ fileId: e.fileId })}
>
<Button radius={50}>Lihat</Button>
</Link>
</Group>
</Box>
))
)}
</Stack>
</Grid.Col>
</Grid>
</Stack>
<Stack>
{listItem.map((e, i) => (
<Admin_V3_ComponentDetail key={i} item={e} />
))}
</Stack>
</Paper>
</SimpleGrid>
</Stack>
</Admin_ComponentBoxStyle>
</>
);
}

29
src/app_modules/admin/investasi/_view/detail/view_daftar_transaksi.tsx
View File

@@ -77,7 +77,6 @@
// }
// }
// const loadStatus = async () => {
// try {
// const response = await apiGetMasterStatusTransaksi()
@@ -103,7 +102,7 @@
// setActivePage(page);
// setData(loadData.data as any);
// setNPage(loadData.nPage);
// }
// async function onSelected(selectStatus: any) {
@@ -241,7 +240,7 @@
// data={listStatus?.map(status => ({
// value: status.id,
// label: status.name,
// })) || []}
// onChange={(val: any) => {
// console.log(val)
@@ -350,11 +349,13 @@ import {
ComponentAdminGlobal_TampilanRupiah,
ComponentAdminGlobal_TitlePage,
} from "@/app_modules/admin/_admin_global/_component";
import { Admin_V3_ComponentPaginationBreakpoint } from "@/app_modules/admin/_components_v3/comp_pagination_breakpoint";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import {
MODEL_INVOICE_INVESTASI,
MODEL_STATUS_INVOICE_INVESTASI,
} from "@/app_modules/investasi/_lib/interface";
import { RouterAdminInvestasi } from "@/lib/router_admin/router_admin_investasi";
import { clientLogger } from "@/util/clientLogger";
import {
ActionIcon,
@@ -362,21 +363,19 @@ import {
Button,
Center,
Group,
Pagination,
Paper,
ScrollArea,
Select,
Stack,
Table,
Text,
Text
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { IconEyeCheck, IconReload } from "@tabler/icons-react";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import { apiGetAdminAllTransaksiById } from "../../_lib/api_fetch_admin_investasi";
import { RouterAdminInvestasi } from "@/lib/router_admin/router_admin_investasi";
import { AdminInvestasi_ComponentCekBuktiTransfer } from "../../_component/new_button/button_cek_bukti_transfer";
import { apiGetAdminAllTransaksiById } from "../../_lib/api_fetch_admin_investasi";
export function AdminInvestasi_ViewDaftarTransaksi() {
const params = useParams<{ id: string }>();
@@ -627,15 +626,13 @@ export function AdminInvestasi_ViewDaftarTransaksi() {
</Table>
</ScrollArea>
<Center mt={"xl"}>
<Pagination
value={isActivePage}
total={isNPage}
onChange={(val) => {
onPageClick(val);
}}
/>
</Center>
<Admin_V3_ComponentPaginationBreakpoint
value={isActivePage}
total={isNPage}
onChange={(val) => {
onPageClick(val);
}}
/>
</Paper>
)}
</Stack>

108
src/app_modules/admin/investasi/_view/detail/view_detail_data.tsx
View File

@@ -1,44 +1,92 @@
import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
import { clientLogger } from "@/util/clientLogger";
import { SimpleGrid } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
import { useState } from "react";
import { ComponentAdminInvestasi_DetailDataAuthor } from "../../_component/detail_data_author";
import { ComponentAdminInvestasi_DetailData } from "../../_component/detail_data_investasi";
import { ComponentAdminInvestasi_DetailGambar } from "../../_component/detail_gambar_investasi";
import { ComponentAdminInvestasi_UIDetailFile } from "../../_component/ui_detail_file";
import SkeletonAdminInvestasi from "../../_component/skeleton_admin_investasi";
import { ComponentAdminInvestasi_UIDetailFile } from "../../_component/ui_detail_file";
import { apiGetAdminInvestasiById } from "../../_lib/api_fetch_admin_investasi";
import { Admin_V3_ComponentBreakpoint } from "@/app_modules/admin/_components_v3/comp_simple_grid_breakpoint";
import { AdminInvestasi_ComponentNewDetailData } from "../../_component/new_detail_data";
import { Admin_V3_ComponentSkeletonBreakpoint } from "@/app_modules/admin/_components_v3/comp_skeleton_breakpoint";
export function AdminInvestasi_ViewDetailData({
data,
}: {
data: MODEL_INVESTASI;
}) {
export function AdminInvestasi_ViewDetailData() {
const params = useParams<{ id: string }>();
const [data, setData] = useState<MODEL_INVESTASI | null>(null);
useShallowEffect(() => {
loadInitialData();
}, []);
const loadInitialData = async () => {
try {
const response = await apiGetAdminInvestasiById({
id: params.id,
});
if (response?.success && response?.data) {
setData(response.data);
}
} catch (error) {
clientLogger.error("Invalid data format recieved:", error);
setData(null);
}
};
return (
<>
{!data ? (<SkeletonAdminInvestasi/>) : ( <>
<SimpleGrid
cols={3}
spacing="lg"
breakpoints={[
{ maxWidth: "62rem", cols: 3, spacing: "md" },
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
{/* Data Author */}
<ComponentAdminInvestasi_DetailDataAuthor data={data?.author as any} />
{!data ? (
<Admin_V3_ComponentSkeletonBreakpoint />
) : (
<Admin_V3_ComponentBreakpoint md={2} lg={2}>
<AdminInvestasi_ComponentNewDetailData data={data as any} />
{/* Data Foto */}
<Admin_V3_ComponentBreakpoint cols={1}>
<ComponentAdminInvestasi_DetailGambar imagesId={data?.imageId} />
<ComponentAdminInvestasi_UIDetailFile
title={data?.title}
dataProspektus={data?.ProspektusInvestasi}
listDokumen={data?.DokumenInvestasi}
prospektusFileId={data?.prospektusFileId}
/>
</Admin_V3_ComponentBreakpoint>
</Admin_V3_ComponentBreakpoint>
)}
{/* Data Foto */}
<ComponentAdminInvestasi_DetailGambar imagesId={data?.imageId } />
{/*
{!data ? (
<SkeletonAdminInvestasi />
) : (
<>
<SimpleGrid
cols={3}
spacing="lg"
breakpoints={[
{ maxWidth: "62rem", cols: 3, spacing: "md" },
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
{/* Data Detail */}
<ComponentAdminInvestasi_DetailData data={data as any} />
</SimpleGrid>
<ComponentAdminInvestasi_UIDetailFile
title={data?.title}
dataProspektus={data?.ProspektusInvestasi}
listDokumen={data?.DokumenInvestasi}
prospektusFileId={data?.prospektusFileId}
/>
</>)}
<ComponentAdminInvestasi_DetailDataAuthor
data={data?.author as any}
/>
<ComponentAdminInvestasi_DetailGambar imagesId={data?.imageId} />
<ComponentAdminInvestasi_DetailData data={data as any} />
</SimpleGrid>
<ComponentAdminInvestasi_UIDetailFile
title={data?.title}
dataProspektus={data?.ProspektusInvestasi}
listDokumen={data?.DokumenInvestasi}
prospektusFileId={data?.prospektusFileId}
/>
</>
)}
*/}
</>
);
}

352
src/app_modules/admin/investasi/_view/detail/view_detail_transaksi.tsx
View File

@@ -1,21 +1,23 @@
'use client'
import { AdminColor } from '@/app_modules/_global/color/color_pallet';
import AdminGlobal_ComponentBackButton from '@/app_modules/admin/_admin_global/back_button';
import CustomSkeleton from '@/app_modules/components/CustomSkeleton';
import { MODEL_INVOICE_INVESTASI } from '@/app_modules/investasi/_lib/interface';
import { clientLogger } from '@/util/clientLogger';
import { Badge, Box, Grid, Group, Paper, Stack, Text, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useParams } from 'next/navigation';
import { useState } from 'react';
import { apiGetAdminDetailTransaksi } from '../../_lib/api_fetch_admin_investasi';
import { AdminInvestasi_ComponentButtonKonfirmasiTransaksi } from '../../_component/new_button/button_konfirmasi_transaksi';
import { AdminInvestasi_ComponentCekBuktiTransfer } from '../../_component/new_button/button_cek_bukti_transfer';
import { AdminInvestasi_ComponentButtonBandingTransaksi } from '../../_component/new_button/button_banding_transaksi';
"use client";
import AdminGlobal_ComponentBackButton from "@/app_modules/admin/_admin_global/back_button";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { MODEL_INVOICE_INVESTASI } from "@/app_modules/investasi/_lib/interface";
import { clientLogger } from "@/util/clientLogger";
import {
Badge,
Box,
Stack
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
import { useState } from "react";
import { apiGetAdminDetailTransaksi } from "../../_lib/api_fetch_admin_investasi";
import { Admin_ComponentBoxStyle } from "@/app_modules/admin/_admin_global/_component/comp_admin_boxstyle";
import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
import { Admin_V3_ComponentDetail } from "@/app_modules/admin/_components_v3/comp_detail_data";
import { AdminInvestasi_ComponentCekBuktiTransfer } from "../../_component/new_button/button_cek_bukti_transfer";
function DetailTransaksi() {
const params = useParams<{ id: string }>();
@@ -24,144 +26,214 @@ function DetailTransaksi() {
useShallowEffect(() => {
loadInitialData();
}, [])
}, []);
const loadInitialData = async () => {
try {
const response = await apiGetAdminDetailTransaksi({
id: investasiId
})
id: investasiId,
});
if (response?.success && response?.data?.data) {
setData(response.data.data)
setData(response.data.data);
} else {
console.error("Invalid data format recieved:", response)
setData(null)
console.error("Invalid data format recieved:", response);
setData(null);
}
} catch (error) {
clientLogger.error("Invalid data format recieved:", error)
setData(null)
clientLogger.error("Invalid data format recieved:", error);
setData(null);
}
}
};
const listData = [
{
label: "Nama Investor",
value: data?.Author?.username,
},
{
label: "Nama Bank",
value: data?.Author?.username,
},
{
label: "Nomor",
value: data?.Author?.nomor,
},
{
label: "Jumlah Investasi",
value: data?.nominal,
},
{
label: "Lembar Terbeli",
value: data?.lembarTerbeli,
},
{
label: "Tanggal Transaksi",
value: data?.createdAt
? new Date(data.createdAt).toLocaleDateString()
: "",
},
{
label: "Status",
value: (
<Badge
w={150}
variant="light"
color={
data?.StatusInvoice?.id === "1"
? "green"
: data?.StatusInvoice?.id === "4"
? "red"
: "blue"
}
>
{data?.StatusInvoice?.name}
</Badge>
),
},
{
label: "Bukti Transfer",
value: (
<Box>
{data?.statusInvoiceId !== "3" ? (
<AdminInvestasi_ComponentCekBuktiTransfer
imageId={data?.imageId as any}
/>
) : (
"-"
)}
</Box>
),
},
];
return (
<Stack px={"lg"}>
<Group position="apart">
<AdminGlobal_ComponentBackButton />
</Group>
<Stack>
<ComponentAdminGlobal_HeaderTamplate name={"Detail Transaksi"} />
<AdminGlobal_ComponentBackButton />
<>
{!data ? (<CustomSkeleton height={"50vh"} width={"100%"} />) : (
<Paper w={"50%"} bg={AdminColor.softBlue} p={"lg"}>
<Stack c={AdminColor.white}>
<Title order={3}>Detail Transaksi</Title>
<Stack spacing={"xs"}>
<Grid>
<Grid.Col span={6}>
<Text fw={"bold"}>Nama Investor:</Text>
</Grid.Col>
<Grid.Col span={6}>
<Text>{data?.Author?.username}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={6}>
<Text fw={"bold"}>Nama Bank:</Text>
</Grid.Col>
<Grid.Col span={6}>
<Text>@{data?.Author?.username}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={6}>
<Text fw={"bold"}>Nomor:</Text>
</Grid.Col>
<Grid.Col span={6}>
<Text>+ {data?.Author?.nomor}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={6}>
<Text fw={"bold"}>Jumlah Investasi:</Text>
</Grid.Col>
<Grid.Col span={6}>
<Text>{data?.nominal}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={6}>
<Text fw={"bold"}>Lembar Terbeli:</Text>
</Grid.Col>
<Grid.Col span={6}>
<Text>{data?.lembarTerbeli}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={6}>
<Text fw={"bold"}>Tanggal:</Text>
</Grid.Col>
<Grid.Col span={6}>
{data?.createdAt ? new Date(data.createdAt).toLocaleDateString() : ""}
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={6}>
<Text fw={"bold"}>Status:</Text>
</Grid.Col>
<Grid.Col span={6}>
<Badge
w={150}
variant='light'
color={
data?.StatusInvoice?.id === "1"
? "green"
: data?.StatusInvoice?.id === "4"
? "red"
: "blue"
}
>{data?.StatusInvoice?.name}</Badge>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={6}>
<Text fw={"bold"}>Bukti Transfer:</Text>
</Grid.Col>
<Grid.Col span={6}>
<Box>
{data?.statusInvoiceId !== "3" ? (
<AdminInvestasi_ComponentCekBuktiTransfer imageId={data?.imageId} />
) : (
"-"
)}
</Box>
</Grid.Col>
</Grid>
<Grid pt={"md"}>
<Grid.Col span={6}>
<Group>
{data?.statusInvoiceId === "1" && "-"}
{data?.statusInvoiceId === "2" && (
<AdminInvestasi_ComponentButtonKonfirmasiTransaksi
investasiId={data?.investasiId}
invoiceId={data?.id}
lembarTerbeli={data?.lembarTerbeli}
/>
)}
{data?.statusInvoiceId === "3" && "-"}
{data?.statusInvoiceId === "4" && (
<AdminInvestasi_ComponentButtonBandingTransaksi
invoiceId={data?.id}
investasiId={data?.investasiId}
lembarTerbeli={data?.lembarTerbeli}
/>
)}
</Group>
</Grid.Col>
</Grid>
</Stack>
{!data ? (
<CustomSkeleton height={"50vh"} width={"100%"} />
) : (
<Admin_ComponentBoxStyle>
<Stack>
{listData.map((e, i) => (
<Admin_V3_ComponentDetail key={i} item={e} />
))}
</Stack>
</Paper>
</Admin_ComponentBoxStyle>
// <Paper w={"50%"} bg={AdminColor.softBlue} p={"lg"}>
// <Stack c={AdminColor.white}>
// <Title order={3}>Detail Transaksi</Title>
// <Stack spacing={"xs"}>
// <Grid>
// <Grid.Col span={6}>
// <Text fw={"bold"}>Nama Investor:</Text>
// </Grid.Col>
// <Grid.Col span={6}>
// <Text>{data?.Author?.username}</Text>
// </Grid.Col>
// </Grid>
// <Grid>
// <Grid.Col span={6}>
// <Text fw={"bold"}>Nama Bank:</Text>
// </Grid.Col>
// <Grid.Col span={6}>
// <Text>@{data?.Author?.username}</Text>
// </Grid.Col>
// </Grid>
// <Grid>
// <Grid.Col span={6}>
// <Text fw={"bold"}>Nomor:</Text>
// </Grid.Col>
// <Grid.Col span={6}>
// <Text>+ {data?.Author?.nomor}</Text>
// </Grid.Col>
// </Grid>
// <Grid>
// <Grid.Col span={6}>
// <Text fw={"bold"}>Jumlah Investasi:</Text>
// </Grid.Col>
// <Grid.Col span={6}>
// <Text>{data?.nominal}</Text>
// </Grid.Col>
// </Grid>
// <Grid>
// <Grid.Col span={6}>
// <Text fw={"bold"}>Lembar Terbeli:</Text>
// </Grid.Col>
// <Grid.Col span={6}>
// <Text>{data?.lembarTerbeli}</Text>
// </Grid.Col>
// </Grid>
// <Grid>
// <Grid.Col span={6}>
// <Text fw={"bold"}>Tanggal:</Text>
// </Grid.Col>
// <Grid.Col span={6}>
// {data?.createdAt ? new Date(data.createdAt).toLocaleDateString() : ""}
// </Grid.Col>
// </Grid>
// <Grid>
// <Grid.Col span={6}>
// <Text fw={"bold"}>Status:</Text>
// </Grid.Col>
// <Grid.Col span={6}>
// <Badge
// w={150}
// variant='light'
// color={
// data?.StatusInvoice?.id === "1"
// ? "green"
// : data?.StatusInvoice?.id === "4"
// ? "red"
// : "blue"
// }
// >{data?.StatusInvoice?.name}</Badge>
// </Grid.Col>
// </Grid>
// <Grid>
// <Grid.Col span={6}>
// <Text fw={"bold"}>Bukti Transfer:</Text>
// </Grid.Col>
// <Grid.Col span={6}>
// <Box>
// {data?.statusInvoiceId !== "3" ? (
// <AdminInvestasi_ComponentCekBuktiTransfer imageId={data?.imageId} />
// ) : (
// "-"
// )}
// </Box>
// </Grid.Col>
// </Grid>
// <Grid pt={"md"}>
// <Grid.Col span={6}>
// <Group>
// {data?.statusInvoiceId === "1" && "-"}
// {data?.statusInvoiceId === "2" && (
// <AdminInvestasi_ComponentButtonKonfirmasiTransaksi
// investasiId={data?.investasiId}
// invoiceId={data?.id}
// lembarTerbeli={data?.lembarTerbeli}
// />
// )}
// {data?.statusInvoiceId === "3" && "-"}
// {data?.statusInvoiceId === "4" && (
// <AdminInvestasi_ComponentButtonBandingTransaksi
// invoiceId={data?.id}
// investasiId={data?.investasiId}
// lembarTerbeli={data?.lembarTerbeli}
// />
// )}
// </Group>
// </Grid.Col>
// </Grid>
// </Stack>
// </Stack>
// </Paper>
)}
</>
</Stack>

48
src/app_modules/admin/investasi/detail/detail_publish.tsx
View File

@@ -1,25 +1,17 @@
"use client";
import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
import { Button, Group, Stack, Tabs } from "@mantine/core";
import { Button, Group, Stack } from "@mantine/core";
import { IconCircleCheck } from "@tabler/icons-react";
import { useState } from "react";
import { useAtom } from "jotai";
import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
import { gs_admin_invetasi_menu_publish } from "../_lib/global_state";
import {
AdminInvestasi_ViewDaftarInvestor,
AdminInvestasi_ViewDaftarTransaksi,
AdminInvestasi_ViewDetailData,
} from "../_view";
import { useAtom } from "jotai";
import { gs_admin_invetasi_menu_publish } from "../_lib/global_state";
import { useParams } from "next/navigation";
import { apiGetAdminInvestasiById } from "../_lib/api_fetch_admin_investasi";
import { clientLogger } from "@/util/clientLogger";
import { useShallowEffect } from "@mantine/hooks";
export function AdminInvestasi_DetailPublish() {
const params = useParams<{ id: string }>();
const [data, setData] = useState<MODEL_INVESTASI | null>(null);
const [selectPage, setSelectPage] = useAtom(gs_admin_invetasi_menu_publish);
const listPage = [
{
@@ -39,31 +31,16 @@ export function AdminInvestasi_DetailPublish() {
// },
];
useShallowEffect(() => {
loadInitialData()
}, []);
const loadInitialData = async () => {
try {
const response = await apiGetAdminInvestasiById({
id: params.id
})
if (response?.success && response?.data) {
setData(response.data)
}
} catch (error) {
clientLogger.error("Invalid data format recieved:", error)
setData(null);
}
}
return (
<>
<Stack >
<Stack>
<ComponentAdminGlobal_HeaderTamplate name={"Investasi: Publish"} />
<AdminGlobal_ComponentBackButton />
<Group>
{listPage.map((e) => (
<Button variant="outline"
<Button
variant="outline"
key={e.id}
color={selectPage == e.id ? "green" : "gray"}
radius={"xl"}
@@ -77,13 +54,8 @@ export function AdminInvestasi_DetailPublish() {
))}
</Group>
{selectPage == "1" ? (
<AdminInvestasi_ViewDetailData data={data as any} />
) : null}
{selectPage == "2" ? (
<AdminInvestasi_ViewDaftarTransaksi
/>
) : null}
{selectPage == "1" ? <AdminInvestasi_ViewDetailData /> : null}
{selectPage == "2" ? <AdminInvestasi_ViewDaftarTransaksi /> : null}
</Stack>
</>
);

111
src/app_modules/admin/investasi/detail/detail_reject.tsx
View File

@@ -1,35 +1,59 @@
"use client";
import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
import {
Paper,
SimpleGrid,
Stack,
Text,
Title
} from "@mantine/core";
import { Paper, SimpleGrid, Stack, Text, Title } from "@mantine/core";
import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
import { ComponentAdminInvestasi_DetailDataAuthor } from "../_component/detail_data_author";
import { ComponentAdminInvestasi_DetailData } from "../_component/detail_data_investasi";
import { ComponentAdminInvestasi_DetailGambar } from "../_component/detail_gambar_investasi";
import { ComponentAdminInvestasi_UIDetailFile } from "../_component/ui_detail_file";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
import { useParams } from "next/navigation";
import { clientLogger } from "@/util/clientLogger";
import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react";
import { apiGetAdminInvestasiById } from "../_lib/api_fetch_admin_investasi";
import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
import { Admin_V3_ComponentSkeletonBreakpoint } from "../../_components_v3/comp_skeleton_breakpoint";
import { AdminInvestasi_ComponentNewDetailData } from "../_component/new_detail_data";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
export function AdminInvestasi_DetailReject() {
const params = useParams<{ id: string }>();
const [data, setData] = useState<MODEL_INVESTASI | null>(null);
useShallowEffect(() => {
loadInitialData();
}, []);
const loadInitialData = async () => {
try {
const response = await apiGetAdminInvestasiById({
id: params.id,
});
if (response?.success && response?.data) {
setData(response.data);
}
} catch (error) {
clientLogger.error("Invalid data format recieved:", error);
setData(null);
}
};
export function AdminInvestasi_DetailReject({ data }: { data: MODEL_INVESTASI }) {
return (
<>
<Stack px={"lg"}>
<Stack>
<ComponentAdminGlobal_HeaderTamplate name={"Investasi: Reject"} />
<AdminGlobal_ComponentBackButton />
<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 bg={AdminColor.softBlue} p={"lg"}>
{!data ? (
<CustomSkeleton h={200} w={"50%"} />
) : (
<Admin_V3_ComponentBreakpoint>
<Admin_ComponentBoxStyle>
<Stack>
<Title order={3} c={"red"}>
#{" "}
@@ -37,36 +61,31 @@ export function AdminInvestasi_DetailReject({ data }: { data: MODEL_INVESTASI })
Alasan penolakan
</Text>
</Title>
<Text c={AdminColor.white}>{data.catatan}</Text>
<Text c={AdminColor.white}>{data?.catatan}</Text>
</Stack>
</Paper>
</SimpleGrid>
</Admin_ComponentBoxStyle>
</Admin_V3_ComponentBreakpoint>
)}
<SimpleGrid
cols={3}
spacing="lg"
breakpoints={[
{ maxWidth: "62rem", cols: 3, spacing: "md" },
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
{/* Data Author */}
<ComponentAdminInvestasi_DetailDataAuthor data={data.author as any} />
{!data ? (
<Admin_V3_ComponentSkeletonBreakpoint />
) : (
<Admin_V3_ComponentBreakpoint md={2} lg={2}>
<AdminInvestasi_ComponentNewDetailData data={data as any} />
{/* Data Foto */}
<Admin_V3_ComponentBreakpoint cols={1}>
<ComponentAdminInvestasi_DetailGambar imagesId={data?.imageId} />
<ComponentAdminInvestasi_UIDetailFile
title={data?.title}
dataProspektus={data?.ProspektusInvestasi}
listDokumen={data?.DokumenInvestasi}
prospektusFileId={data?.prospektusFileId}
/>
</Admin_V3_ComponentBreakpoint>
</Admin_V3_ComponentBreakpoint>
)}
{/* Data Foto */}
<ComponentAdminInvestasi_DetailGambar imagesId={data.imageId} />
{/* Data Detail */}
<ComponentAdminInvestasi_DetailData data={data} />
</SimpleGrid>
<ComponentAdminInvestasi_UIDetailFile
title={data.title}
dataProspektus={data.ProspektusInvestasi}
listDokumen={data.DokumenInvestasi}
prospektusFileId={data.prospektusFileId}
/>
{/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
</Stack>
</>

42
src/app_modules/admin/investasi/detail/detail_review.tsx
View File

@@ -25,6 +25,11 @@ import { ComponentAdminInvestasi_UIDetailFile } from "../_component/ui_detail_fi
import { apiGetAdminInvestasiById } from "../_lib/api_fetch_admin_investasi";
import { adminInvestasi_funEditStatusPublishById } from "../fun/edit/fun_status_publish_by_id";
import Admin_funRejectInvestasi from "../fun/fun_reject_investasi";
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
import { AdminInvestasi_ViewDetailData } from "../_view";
import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
import { Admin_V3_ComponentSkeletonBreakpoint } from "../../_components_v3/comp_skeleton_breakpoint";
import { AdminInvestasi_ComponentNewDetailData } from "../_component/new_detail_data";
export default function AdminInvestasi_DetailReview() {
const params = useParams<{ id: string }>();
@@ -167,13 +172,10 @@ export default function AdminInvestasi_DetailReview() {
}
}
if (!data) {
return <SkeletonAdminInvestasi />;
}
return (
<>
<Stack px={"lg"}>
<Stack>
<ComponentAdminGlobal_HeaderTamplate name="Investasi: Review" />
<Group position="apart">
<AdminGlobal_ComponentBackButton />
@@ -199,7 +201,7 @@ export default function AdminInvestasi_DetailReview() {
)}
</Group>
<SimpleGrid
{/* <SimpleGrid
cols={3}
spacing="lg"
breakpoints={[
@@ -208,24 +210,32 @@ export default function AdminInvestasi_DetailReview() {
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
{/* Data Author */}
<ComponentAdminInvestasi_DetailDataAuthor
data={data?.author as any}
/>
{/* Data Foto */}
<ComponentAdminInvestasi_DetailGambar imagesId={data?.imageId} />
{/* Data Detail */}
<ComponentAdminInvestasi_DetailData data={data} />
</SimpleGrid>
</SimpleGrid> */}
<ComponentAdminInvestasi_UIDetailFile
title={data?.title}
dataProspektus={data?.ProspektusInvestasi}
listDokumen={data?.DokumenInvestasi}
prospektusFileId={data?.prospektusFileId}
/>
{!data ? (
<Admin_V3_ComponentSkeletonBreakpoint />
) : (
<Admin_V3_ComponentBreakpoint md={2} lg={2}>
<AdminInvestasi_ComponentNewDetailData data={data as any} />
{/* Data Foto */}
<Admin_V3_ComponentBreakpoint cols={1}>
<ComponentAdminInvestasi_DetailGambar imagesId={data?.imageId} />
<ComponentAdminInvestasi_UIDetailFile
title={data?.title}
dataProspektus={data?.ProspektusInvestasi}
listDokumen={data?.DokumenInvestasi}
prospektusFileId={data?.prospektusFileId}
/>
</Admin_V3_ComponentBreakpoint>
</Admin_V3_ComponentBreakpoint>
)}
</Stack>
<Admin_ComponentModalReport

64
src/app_modules/admin/investasi/main/table_publish.tsx
View File

@@ -3,6 +3,7 @@
import { RouterAdminInvestasi } from "@/lib/router_admin/router_admin_investasi";
import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
import {
Box,
Button,
Center,
Group,
@@ -38,6 +39,7 @@ import { apiGetAdminInvestasiByStatus } from "../_lib/api_fetch_admin_investasi"
import { useShallowEffect } from "@mantine/hooks";
import { clientLogger } from "@/util/clientLogger";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
export default function Admin_TablePublishInvestasi() {
return (
@@ -114,47 +116,47 @@ function TableView() {
return data.map((e, i) => (
<tr key={i}>
<td>
<Center >
<Box w={100}>
<Text c={AccentColor.white} lineClamp={1}>
{e.author.username}
</Text>
</Center>
</Box>
</td>
<td>
<Center >
<Box w={150}>
<Text c={AccentColor.white} lineClamp={1}>
{e.title}
</Text>
</Center>
</Box>
</td>
<td>
<Center c={AccentColor.white} >
<Center c={AccentColor.white}>
{_.toNumber(e.progress).toFixed(2)} %
</Center>
</td>
<td>
<Center c={AccentColor.white} >
<Center c={AccentColor.white}>
{new Intl.NumberFormat("id-ID", {
maximumFractionDigits: 10,
}).format(+e.sisaLembar)}
</Center>
</td>
<td>
<Center c={AccentColor.white} >
<Center c={AccentColor.white}>
{new Intl.NumberFormat("id-ID", {
maximumFractionDigits: 10,
}).format(+e.totalLembar)}
</Center>
</td>
<td>
<Center >
<Center>
<Text c={AccentColor.white} lineClamp={1}>
{e.Investasi_Invoice.length}
</Text>
</Center>
</td>
<td>
<Center >
<Center>
<Button
loading={isLoading && idData === e.id}
loaderPosition="center"
@@ -227,54 +229,38 @@ function TableView() {
<thead>
<tr>
<th>
<Center c={AccentColor.white} >
Username
</Center>
<Text c={AccentColor.white}>Username</Text>
</th>
<th>
<Center c={AccentColor.white} >
Nama Proyek
</Center>
<Text c={AccentColor.white}>Nama Proyek</Text>
</th>
<th>
<Center c={AccentColor.white} >
Progres
</Center>
<Center c={AccentColor.white}>Progres</Center>
</th>
<th>
<Center c={AccentColor.white} >
Sisa Saham
</Center>
<Center c={AccentColor.white}>Sisa Saham</Center>
</th>
<th>
<Center c={AccentColor.white} >
Total Saham
</Center>
<Center c={AccentColor.white}>Total Saham</Center>
</th>
<th>
<Center c={AccentColor.white} >
Validasi
</Center>
<Center c={AccentColor.white}>Validasi</Center>
</th>
<th>
<Center c={AccentColor.white} >
Aksi
</Center>
<Center c={AccentColor.white}>Aksi</Center>
</th>
</tr>
</thead>
<tbody>{renderTableBody()}</tbody>
</Table>
</ScrollArea>
<Center mt={"xl"}>
<Pagination
value={activePage}
total={nPage}
onChange={(val) => {
onPageClick(val);
}}
/>
</Center>
<Admin_V3_ComponentPaginationBreakpoint
value={activePage}
total={nPage}
onChange={(val) => {
onPageClick(val);
}}
/>
</Paper>
)}
</Stack>

157
src/app_modules/admin/investasi/main/table_reject.tsx
View File

@@ -1,47 +1,38 @@
"use client";
import { RouterAdminInvestasi_OLD } from "@/lib/router_hipmi/router_admin";
import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
import {
Badge,
ActionIcon,
Box,
ScrollArea,
Table,
Tooltip,
Stack,
Center,
Avatar,
Group,
Text,
AccentColor,
AdminColor,
} from "@/app_modules/_global/color/color_pallet";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
import { RouterAdminInvestasi } from "@/lib/router_admin/router_admin_investasi";
import { clientLogger } from "@/util/clientLogger";
import {
Button,
Center,
Pagination,
Paper,
ScrollArea,
Stack,
Table,
Text,
TextInput,
Title,
} from "@mantine/core";
import { IconChevronLeft, IconDetails, IconEdit, IconEyeCheck, IconSearch } from "@tabler/icons-react";
import _ from "lodash";
import { useShallowEffect } from "@mantine/hooks";
import { IconEyeCheck, IconSearch } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data";
import { adminInvestasi_funGetAllReview } from "../fun/get/get_all_review";
import { adminInvestasi_funGetAllReject } from "../fun/get/get_all_reject";
import { RouterAdminInvestasi } from "@/lib/router_admin/router_admin_investasi";
import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
import { MainColor } from "@/app_modules/_global/color";
import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
import { useShallowEffect } from "@mantine/hooks";
import { clientLogger } from "@/util/clientLogger";
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
import { apiGetAdminInvestasiByStatus } from "../_lib/api_fetch_admin_investasi";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
export default function Admin_TableRejectInvestasi() {
return (
<>
<Stack>
<ComponentAdminGlobal_HeaderTamplate name="Investasi" />
<TableView/>
<TableView />
</Stack>
</>
);
@@ -118,41 +109,40 @@ export default function Admin_TableRejectInvestasi() {
function TableView() {
const router = useRouter();
const [data, setData] = useState<MODEL_INVESTASI[] | null > (null);
const [data, setData] = useState<MODEL_INVESTASI[] | null>(null);
const [nPage, setNPage] = useState(1);
const [activePage, setActivePage] = useState(1);
const [isSearch, setSearch] = useState("");
const [isLoading, setLoading] = useState(false);
const [idData, setIdData] = useState("");
useShallowEffect(() => {
const loadInitialData = async () => {
try {
const response = await apiGetAdminInvestasiByStatus({
name: "Reject",
page: `${activePage}`,
search: isSearch,
});
const loadInitialData = async () => {
try {
const response = await apiGetAdminInvestasiByStatus({
name: "Reject",
page: `${activePage}`,
search: isSearch,
});
if (response?.success && response?.data.data) {
setData(response.data.data);
setNPage(response.data.nPage || 1);
} else {
console.error("Invalid data format recieved:", response);
setData([]);
}
} catch (error) {
clientLogger.error("Error get data reject", error);
setData([]);
}
}
if (response?.success && response?.data.data) {
setData(response.data.data);
setNPage(response.data.nPage || 1);
} else {
console.error("Invalid data format recieved:", response);
setData([]);
}
} catch (error) {
clientLogger.error("Error get data reject", error);
setData([]);
}
};
loadInitialData();
}, [activePage, isSearch]);
const onSearch = async (searchTerm: string) => {
setSearch(searchTerm);
setActivePage(1);
}
};
async function onPageClick(page: number) {
setActivePage(page);
@@ -168,33 +158,39 @@ function TableView() {
</Center>
</td>
</tr>
)
);
}
return data.map((e, i) => (
<tr key={i}>
<td>
<Center >
<Text c={AccentColor.white} lineClamp={1}>{e.author.username}</Text>
<Center>
<Text c={AccentColor.white} lineClamp={1}>
{e.author.username}
</Text>
</Center>
</td>
<td>
<Center >
<Text c={AccentColor.white} lineClamp={1}>{e.title}</Text>
<Center>
<Text c={AccentColor.white} lineClamp={1}>
{e.title}
</Text>
</Center>
</td>
<td>
<Center >
<Text c={AccentColor.white} lineClamp={1}>{e.catatan}</Text>
<Center>
<Text c={AccentColor.white} lineClamp={1}>
{e.catatan}
</Text>
</Center>
</td>
<td>
<Center >
<Center>
<Button
loading={isLoading && idData === e.id}
loaderPosition="center"
color="green"
leftIcon={<IconEyeCheck size={20}/>}
leftIcon={<IconEyeCheck size={20} />}
radius={"xl"}
onClick={() => {
setIdData(e.id);
@@ -208,9 +204,7 @@ function TableView() {
</td>
</tr>
));
}
};
return (
<>
@@ -220,13 +214,13 @@ function TableView() {
color={AdminColor.softBlue}
component={
<TextInput
icon={<IconSearch size={20} />}
radius={"xl"}
placeholder="Cari nama proyek"
onChange={(val) => {
onSearch(val.currentTarget.value);
}}
/>
icon={<IconSearch size={20} />}
radius={"xl"}
placeholder="Cari nama proyek"
onChange={(val) => {
onSearch(val.currentTarget.value);
}}
/>
}
/>
{/* <Group
@@ -259,36 +253,33 @@ function TableView() {
p={"md"}
w={"100%"}
h={"100%"}
>
<thead>
<tr>
<th>
<Center c={AccentColor.white} >Username</Center>
<Center c={AccentColor.white}>Username</Center>
</th>
<th>
<Center c={AccentColor.white} >Nama Proyek</Center>
<Center c={AccentColor.white}>Nama Proyek</Center>
</th>
<th>
<Center c={AccentColor.white} >Catatan Penolakan</Center>
<Center c={AccentColor.white}>Catatan Penolakan</Center>
</th>
<th>
<Center c={AccentColor.white} >Aksi</Center>
<Center c={AccentColor.white}>Aksi</Center>
</th>
</tr>
</thead>
<tbody>{renderTableBody()}</tbody>
</Table>
</ScrollArea>
<Center mt={"xl"}>
<Pagination
value={activePage}
total={nPage}
onChange={(val) => {
onPageClick(val);
}}
/>
</Center>
<Admin_V3_ComponentPaginationBreakpoint
value={activePage}
total={nPage}
onChange={(val) => {
onPageClick(val);
}}
/>
</Paper>
)}
</Stack>

77
src/app_modules/admin/investasi/main/table_review.tsx
View File

@@ -1,14 +1,15 @@
"use client";
import { AccentColor } from "@/app_modules/_global/color";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
import { gs_adminInvestasi_triggerReview } from "@/lib/global_state";
import { RouterAdminInvestasi_OLD } from "@/lib/router_hipmi/router_admin";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
import { clientLogger } from "@/util/clientLogger";
import {
Affix,
Button,
Center,
Group,
Pagination,
Paper,
rem,
ScrollArea,
@@ -16,23 +17,18 @@ import {
Table,
Text,
TextInput,
Title,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { IconDetails, IconEyeCheck, IconRefresh, IconSearch } from "@tabler/icons-react";
import { IconEyeCheck, IconRefresh, IconSearch } from "@tabler/icons-react";
import { useAtom } from "jotai";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data";
import ComponentAdminGlobal_TampilanRupiahDonasi from "../../_admin_global/tampilan_rupiah";
import { adminInvestasi_funGetAllReview } from "../fun/get/get_all_review";
import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
import ComponentAdminGlobal_TampilanRupiahDonasi from "../../_admin_global/tampilan_rupiah";
import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
import { apiGetAdminInvestasiByStatus } from "../_lib/api_fetch_admin_investasi";
import { clientLogger } from "@/util/clientLogger";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
export default function Admin_TableReviewInvestasi() {
return (
@@ -72,8 +68,8 @@ function TableView() {
});
if (response?.success && response?.data?.data) {
setData(response.data.data)
setNPage(response.data.nPage || 1)
setData(response.data.data);
setNPage(response.data.nPage || 1);
} else {
console.error("Invalid data format received:", response);
setData([]);
@@ -82,15 +78,15 @@ function TableView() {
clientLogger.error("Error get data table review", error);
setData([]);
}
}
};
const onSearch = async (searchTerm: string) => {
setSearch(searchTerm);
setActivePage(1);
}
};
const onPageClick = (page: number) => {
setActivePage(page);
}
};
async function onLoadData() {
loadInitialData();
setLoading(false);
@@ -108,41 +104,41 @@ function TableView() {
</Center>
</td>
</tr>
)
);
}
return data.map((e, i) => (
<tr key={i}>
<td>
<Center c={AccentColor.white} >
<Center c={AccentColor.white}>
<Text lineClamp={1}>{e.author.username}</Text>
</Center>
</td>
<td>
<Center c={AccentColor.white} >
<Center c={AccentColor.white}>
<Text lineClamp={1}>{e.title}</Text>
</Center>
</td>
<td>
<Center c={AccentColor.white} >
<Center c={AccentColor.white}>
<Text lineClamp={1}>{e.roi} %</Text>
</Center>
</td>
<td>
<Center c={AccentColor.white} >
<Center c={AccentColor.white}>
<ComponentAdminGlobal_TampilanRupiahDonasi
nominal={_.toNumber(e.targetDana)}
/>
</Center>
</td>
<td>
<Center c={AccentColor.white} >
<Center c={AccentColor.white}>
<ComponentAdminGlobal_TampilanRupiahDonasi
nominal={_.toNumber(e.hargaLembar)}
/>
</Center>
</td>
<td>
<Center >
<Center>
<Button
loading={isLoading && idData === e.id}
loaderPosition="center"
@@ -161,7 +157,7 @@ function TableView() {
</td>
</tr>
));
}
};
return (
<>
@@ -238,38 +234,37 @@ function TableView() {
<thead>
<tr>
<th>
<Center c={AccentColor.white} >Username</Center>
<Center c={AccentColor.white}>Username</Center>
</th>
<th>
<Center c={AccentColor.white} >Nama Proyek</Center>
<Center c={AccentColor.white}>Nama Proyek</Center>
</th>
<th>
<Center c={AccentColor.white} >ROI</Center>
<Center c={AccentColor.white}>ROI</Center>
</th>
<th>
<Center c={AccentColor.white} >Target Dana</Center>
<Center c={AccentColor.white}>Target Dana</Center>
</th>
<th>
<Center c={AccentColor.white} >Harga Perlembar</Center>
<Center c={AccentColor.white}>Harga Perlembar</Center>
</th>
<th>
<Center c={AccentColor.white} >Aksi</Center>
<Center c={AccentColor.white}>Aksi</Center>
</th>
</tr>
</thead>
<tbody>{renderTableBody()}</tbody>
</Table>
</ScrollArea>
<Center mt={"xl"}>
<Pagination
value={activePage}
total={nPage}
onChange={(val) => {
onPageClick(val);
}}
/>
</Center>
<Admin_V3_ComponentPaginationBreakpoint
value={activePage}
total={nPage}
onChange={(val) => {
onPageClick(val);
}}
/>
</Paper>
)}
</Stack>