fix responsive admin investasi

deksripsi:
- table per status
- detail per status

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

@@ -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() {
 

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

@@ -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 investasiId = params.id;
-  const dataInvestasi = await getOneInvestasiById(investasiId);
+  // const dataInvestasi = await getOneInvestasiById(investasiId);
 
   return (
     <>
-      <AdminInvestasi_DetailReject data={dataInvestasi as any} />
+      <AdminInvestasi_DetailReject  />
     </>
   );
 }

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

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

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

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

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

@@ -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 (

src/app_modules/_global/component/comp_tampilan_rupiah.tsx

@@ -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,

src/app_modules/admin/investasi/_component/new_detail_data.tsx

@@ -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>
+    </>
+  );
+}

src/app_modules/admin/investasi/_component/ui_detail_file.tsx

@@ -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
+      <Admin_ComponentBoxStyle>
-        cols={1}
+        <Stack c={AdminColor.white}>
-        spacing="lg"
+          <Title order={3}>File & Dokumen</Title>
-        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>
 
-            <Stack spacing={50}>
+          <Stack>
-              {/* File */}
+            {listItem.map((e, i) => (
-              <Grid align="center">
+              <Admin_V3_ComponentDetail key={i} item={e} />
-                <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>
-        </Paper>
+        </Stack>
-      </SimpleGrid>
+      </Admin_ComponentBoxStyle>
     </>
   );
 }

src/app_modules/admin/investasi/_view/detail/view_daftar_transaksi.tsx

@@ -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"}>
+            <Admin_V3_ComponentPaginationBreakpoint
-              <Pagination
+              value={isActivePage}
-                value={isActivePage}
+              total={isNPage}
-                total={isNPage}
+              onChange={(val) => {
-                onChange={(val) => {
+                onPageClick(val);
-                  onPageClick(val);
+              }}
-                }}
+            />
-              />
-            </Center>
           </Paper>
         )}
       </Stack>

src/app_modules/admin/investasi/_view/detail/view_detail_data.tsx

@@ -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({
+export function AdminInvestasi_ViewDetailData() {
-  data,
+  const params = useParams<{ id: string }>();
-}: {
+  const [data, setData] = useState<MODEL_INVESTASI | null>(null);
-  data: MODEL_INVESTASI;
+
-}) {
+  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/>) : ( <>
+      {!data ? (
-      <SimpleGrid
+        <Admin_V3_ComponentSkeletonBreakpoint />
-        cols={3}
+      ) : (
-        spacing="lg"
+        <Admin_V3_ComponentBreakpoint md={2} lg={2}>
-        breakpoints={[
+          <AdminInvestasi_ComponentNewDetailData data={data as any} />
-          { maxWidth: "62rem", cols: 3, spacing: "md" },
+          {/* Data Foto */}
-          { maxWidth: "48rem", cols: 2, spacing: "sm" },
+          <Admin_V3_ComponentBreakpoint cols={1}>
-          { maxWidth: "36rem", cols: 1, spacing: "sm" },
+            <ComponentAdminInvestasi_DetailGambar imagesId={data?.imageId} />
-        ]}
+            <ComponentAdminInvestasi_UIDetailFile
-      >
+              title={data?.title}
-        {/* Data Author */}
+              dataProspektus={data?.ProspektusInvestasi}
-        <ComponentAdminInvestasi_DetailDataAuthor data={data?.author as any} />
+              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_DetailDataAuthor
-        <ComponentAdminInvestasi_DetailData data={data as any} />
+              data={data?.author as any}
-      </SimpleGrid>
+            />
-      <ComponentAdminInvestasi_UIDetailFile
+
-        title={data?.title}
+            <ComponentAdminInvestasi_DetailGambar imagesId={data?.imageId} />
-        dataProspektus={data?.ProspektusInvestasi}
+
-        listDokumen={data?.DokumenInvestasi}
+            <ComponentAdminInvestasi_DetailData data={data as any} />
-        prospektusFileId={data?.prospektusFileId}
+          </SimpleGrid>
-      />
+          <ComponentAdminInvestasi_UIDetailFile
-      </>)}
+            title={data?.title}
+            dataProspektus={data?.ProspektusInvestasi}
+            listDokumen={data?.DokumenInvestasi}
+            prospektusFileId={data?.prospektusFileId}
+          />
+        </>
+      )}
+      */}
     </>
   );
 }

src/app_modules/admin/investasi/_view/detail/view_detail_transaksi.tsx

@@ -1,21 +1,23 @@
-'use client'
+"use client";
-import { AdminColor } from '@/app_modules/_global/color/color_pallet';
+import AdminGlobal_ComponentBackButton from "@/app_modules/admin/_admin_global/back_button";
-import AdminGlobal_ComponentBackButton from '@/app_modules/admin/_admin_global/back_button';
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
-import CustomSkeleton from '@/app_modules/components/CustomSkeleton';
+import { MODEL_INVOICE_INVESTASI } from "@/app_modules/investasi/_lib/interface";
-import { MODEL_INVOICE_INVESTASI } from '@/app_modules/investasi/_lib/interface';
+import { clientLogger } from "@/util/clientLogger";
-import { clientLogger } from '@/util/clientLogger';
+import {
-import { Badge, Box, Grid, Group, Paper, Stack, Text, Title } from '@mantine/core';
+  Badge,
-import { useShallowEffect } from '@mantine/hooks';
+  Box,
-import { useParams } from 'next/navigation';
+  Stack
-import { useState } from 'react';
+} from "@mantine/core";
-
+import { useShallowEffect } from "@mantine/hooks";
-import { apiGetAdminDetailTransaksi } from '../../_lib/api_fetch_admin_investasi';
+import { useParams } from "next/navigation";
-import { AdminInvestasi_ComponentButtonKonfirmasiTransaksi } from '../../_component/new_button/button_konfirmasi_transaksi';
+import { useState } from "react";
-
-import { AdminInvestasi_ComponentCekBuktiTransfer } from '../../_component/new_button/button_cek_bukti_transfer';
-import { AdminInvestasi_ComponentButtonBandingTransaksi } from '../../_component/new_button/button_banding_transaksi';
 
+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)
+        console.error("Invalid data format recieved:", response);
-        setData(null)
+        setData(null);
       }
-
     } catch (error) {
-      clientLogger.error("Invalid data format recieved:", error)
+      clientLogger.error("Invalid data format recieved:", error);
-      setData(null)
+      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"}>
+    <Stack>
-      <Group position="apart">
+      <ComponentAdminGlobal_HeaderTamplate name={"Detail Transaksi"} />
-        <AdminGlobal_ComponentBackButton />
+      <AdminGlobal_ComponentBackButton />
-      </Group>
 
       <>
-        {!data ? (<CustomSkeleton height={"50vh"} width={"100%"} />) : (
+        {!data ? (
-          <Paper w={"50%"} bg={AdminColor.softBlue} p={"lg"}>
+          <CustomSkeleton height={"50vh"} width={"100%"} />
-            <Stack c={AdminColor.white}>
+        ) : (
-              <Title order={3}>Detail Transaksi</Title>
+          <Admin_ComponentBoxStyle>
-              <Stack spacing={"xs"}>
+            <Stack>
-                <Grid>
+              {listData.map((e, i) => (
-                  <Grid.Col span={6}>
+                <Admin_V3_ComponentDetail key={i} item={e} />
-                    <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>
+          </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>

src/app_modules/admin/investasi/detail/detail_publish.tsx

@@ -1,25 +1,17 @@
 "use client";
 
-import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
+import { Button, Group, Stack } from "@mantine/core";
-import { Button, Group, Stack, Tabs } 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" ? (
+        {selectPage == "1" ? <AdminInvestasi_ViewDetailData /> : null}
-          <AdminInvestasi_ViewDetailData data={data as any} />
+        {selectPage == "2" ? <AdminInvestasi_ViewDaftarTransaksi /> : null}
-        ) : null}
-        {selectPage == "2" ? (
-          <AdminInvestasi_ViewDaftarTransaksi
-          />
-        ) : null}
       </Stack>
     </>
   );

src/app_modules/admin/investasi/detail/detail_reject.tsx

@@ -1,35 +1,59 @@
 "use client";
 
 import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
-import {
+import { Paper, SimpleGrid, Stack, Text, Title } from "@mantine/core";
-  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}
+        {!data ? (
-          spacing="lg"
+          <CustomSkeleton h={200} w={"50%"} />
-          breakpoints={[
+        ) : (
-            { maxWidth: "62rem", cols: 3, spacing: "md" },
+          <Admin_V3_ComponentBreakpoint>
-            { maxWidth: "48rem", cols: 2, spacing: "sm" },
+
-            { maxWidth: "36rem", cols: 1, spacing: "sm" },
+          <Admin_ComponentBoxStyle>
-          ]}
-        >
-          <Paper bg={AdminColor.softBlue} p={"lg"}>
             <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>
+          </Admin_ComponentBoxStyle>
-        </SimpleGrid>
+          </Admin_V3_ComponentBreakpoint>
+        )}
 
-        <SimpleGrid
+        {!data ? (
-          cols={3}
+          <Admin_V3_ComponentSkeletonBreakpoint />
-          spacing="lg"
+        ) : (
-          breakpoints={[
+          <Admin_V3_ComponentBreakpoint md={2} lg={2}>
-            { maxWidth: "62rem", cols: 3, spacing: "md" },
+            <AdminInvestasi_ComponentNewDetailData data={data as any} />
-            { maxWidth: "48rem", cols: 2, spacing: "sm" },
+            {/* Data Foto */}
-            { maxWidth: "36rem", cols: 1, spacing: "sm" },
+            <Admin_V3_ComponentBreakpoint cols={1}>
-          ]}
+              <ComponentAdminInvestasi_DetailGambar imagesId={data?.imageId} />
-        >
+              <ComponentAdminInvestasi_UIDetailFile
-          {/* Data Author */}
+                title={data?.title}
-          <ComponentAdminInvestasi_DetailDataAuthor data={data.author as any} />
+                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>
     </>

src/app_modules/admin/investasi/detail/detail_review.tsx

@@ -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
+        {!data ? (
-          title={data?.title}
+          <Admin_V3_ComponentSkeletonBreakpoint />
-          dataProspektus={data?.ProspektusInvestasi}
+        ) : (
-          listDokumen={data?.DokumenInvestasi}
+          <Admin_V3_ComponentBreakpoint md={2} lg={2}>
-          prospektusFileId={data?.prospektusFileId}
+            <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

src/app_modules/admin/investasi/main/table_publish.tsx

@@ -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} >
+                      <Text c={AccentColor.white}>Username</Text>
-                        Username
-                      </Center>
                     </th>
                     <th>
-                      <Center c={AccentColor.white} >
+                      <Text c={AccentColor.white}>Nama Proyek</Text>
-                        Nama Proyek
-                      </Center>
                     </th>
                     <th>
-                      <Center c={AccentColor.white} >
+                      <Center c={AccentColor.white}>Progres</Center>
-                        Progres
-                      </Center>
                     </th>
                     <th>
-                      <Center c={AccentColor.white} >
+                      <Center c={AccentColor.white}>Sisa Saham</Center>
-                        Sisa Saham
-                      </Center>
                     </th>
                     <th>
-                      <Center c={AccentColor.white} >
+                      <Center c={AccentColor.white}>Total Saham</Center>
-                        Total Saham
-                      </Center>
                     </th>
                     <th>
-                      <Center c={AccentColor.white} >
+                      <Center c={AccentColor.white}>Validasi</Center>
-                        Validasi
-                      </Center>
                     </th>
                     <th>
-                      <Center c={AccentColor.white} >
+                      <Center c={AccentColor.white}>Aksi</Center>
-                        Aksi
-                      </Center>
                     </th>
                   </tr>
                 </thead>
                 <tbody>{renderTableBody()}</tbody>
               </Table>
             </ScrollArea>
-            <Center mt={"xl"}>
+            <Admin_V3_ComponentPaginationBreakpoint
-              <Pagination
+              value={activePage}
-                value={activePage}
+              total={nPage}
-                total={nPage}
+              onChange={(val) => {
-                onChange={(val) => {
+                onPageClick(val);
-                  onPageClick(val);
+              }}
-                }}
+            />
-              />
-            </Center>
           </Paper>
         )}
       </Stack>

src/app_modules/admin/investasi/main/table_reject.tsx

@@ -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,
+  AccentColor,
-  ActionIcon,
+  AdminColor,
-  Box,
+} from "@/app_modules/_global/color/color_pallet";
-  ScrollArea,
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
-  Table,
+import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
-  Tooltip,
+import { RouterAdminInvestasi } from "@/lib/router_admin/router_admin_investasi";
-  Stack,
+import { clientLogger } from "@/util/clientLogger";
-  Center,
+import {
-  Avatar,
-  Group,
-  Text,
   Button,
+  Center,
   Pagination,
   Paper,
+  ScrollArea,
+  Stack,
+  Table,
+  Text,
   TextInput,
-  Title,
 } from "@mantine/core";
-import { IconChevronLeft, IconDetails, IconEdit, IconEyeCheck, IconSearch } from "@tabler/icons-react";
+import { useShallowEffect } from "@mantine/hooks";
-import _ from "lodash";
+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 ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
-import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
-import { useShallowEffect } from "@mantine/hooks";
-import { clientLogger } from "@/util/clientLogger";
 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 () => {
+    const loadInitialData = async () => {
-   try {
+      try {
-     const response = await apiGetAdminInvestasiByStatus({
+        const response = await apiGetAdminInvestasiByStatus({
-       name: "Reject",
+          name: "Reject",
-       page: `${activePage}`,
+          page: `${activePage}`,
-       search: isSearch,
+          search: isSearch,
-     });
+        });
 
-     if (response?.success && response?.data.data) {
+        if (response?.success && response?.data.data) {
-       setData(response.data.data);
+          setData(response.data.data);
-       setNPage(response.data.nPage || 1);
+          setNPage(response.data.nPage || 1);
-     } else {
+        } else {
-       console.error("Invalid data format recieved:", response);
+          console.error("Invalid data format recieved:", response);
-       setData([]);
+          setData([]);
-     }
+        }
-   } catch (error) {
+      } catch (error) {
-     clientLogger.error("Error get data reject", error);
+        clientLogger.error("Error get data reject", error);
-     setData([]);
+        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 >
+          <Center>
-            <Text c={AccentColor.white} lineClamp={1}>{e.author.username}</Text>
+            <Text c={AccentColor.white} lineClamp={1}>
+              {e.author.username}
+            </Text>
           </Center>
         </td>
         <td>
-          <Center >
+          <Center>
-            <Text c={AccentColor.white} lineClamp={1}>{e.title}</Text>
+            <Text c={AccentColor.white} lineClamp={1}>
+              {e.title}
+            </Text>
           </Center>
         </td>
         <td>
-          <Center >
+          <Center>
-            <Text c={AccentColor.white} lineClamp={1}>{e.catatan}</Text>
+            <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} />}
+              icon={<IconSearch size={20} />}
-            radius={"xl"}
+              radius={"xl"}
-            placeholder="Cari nama proyek"
+              placeholder="Cari nama proyek"
-            onChange={(val) => {
+              onChange={(val) => {
-              onSearch(val.currentTarget.value);
+                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"}>
+            <Admin_V3_ComponentPaginationBreakpoint
-              <Pagination
+              value={activePage}
-                value={activePage}
+              total={nPage}
-                total={nPage}
+              onChange={(val) => {
-                onChange={(val) => {
+                onPageClick(val);
-                  onPageClick(val);
+              }}
-                }}
+            />
-              />
-            </Center>
           </Paper>
         )}
       </Stack>

src/app_modules/admin/investasi/main/table_review.tsx

@@ -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 { clientLogger } from "@/util/clientLogger";
-import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
 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)
+        setData(response.data.data);
-        setNPage(response.data.nPage || 1)
+        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
+            <Admin_V3_ComponentPaginationBreakpoint
-                value={activePage}
+              value={activePage}
-                total={nPage}
+              total={nPage}
-                onChange={(val) => {
+              onChange={(val) => {
-                  onPageClick(val);
+                onPageClick(val);
-                }}
+              }}
-              />
+            />
-            </Center>
           </Paper>
         )}
       </Stack>