fix

## Deskripsi:
- Optimalisasi admin voting
## No issue

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

@@ -0,0 +1,3 @@
+export function AdminInvestasi_ViewDaftarInvestor() {
+  return <>ini daftar investor</>;
+}

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

@@ -0,0 +1,201 @@
+import { RouterAdminDonasi } from "@/app/lib/router_admin/router_admin_donasi";
+import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
+import { MODEL_DONASI_INVOICE } from "@/app_modules/donasi/model/interface";
+import {
+  Stack,
+  Group,
+  Title,
+  ActionIcon,
+  Select,
+  Paper,
+  ScrollArea,
+  Table,
+  Center,
+  Pagination,
+  Badge,
+  Button,
+} from "@mantine/core";
+import { IconReload } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function AdminInvestasi_ViewDaftarTransaksi({
+  dataTransaksi,
+}: {
+  dataTransaksi: any;
+}) {
+  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+  const [idData, setIdData] = useState("");
+  const [data, setData] = useState<MODEL_DONASI_INVOICE[]>(
+    dataTransaksi.data
+  );
+  const [isNPage, setNPage] = useState(dataTransaksi.nPage);
+  const [isActivePage, setActivePage] = useState(1);
+  const [isSelect, setSelect] = useState("");
+
+  const tableRows = data?.map((e, i) => (
+    <tr key={i}>
+      <td>
+        <Center>{e?.Author.username}</Center>
+      </td>
+      <td>
+        <Center>{e?.DonasiMaster_Bank?.name}</Center>
+      </td>
+      <td>
+        <Center>
+          <TampilanRupiahDonasi nominal={+e?.nominal} />
+        </Center>
+      </td>
+      <td>
+        <Center>
+          {new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(
+            e?.createdAt
+          )}
+        </Center>
+      </td>
+      <td>
+        <Center>
+          <Badge w={150} variant="dot">
+            {e?.DonasiMaster_StatusInvoice?.name}
+          </Badge>
+        </Center>
+      </td>
+      <td>
+        <Center>
+          {e?.donasiMaster_StatusInvoiceId === "1" ||
+          e?.donasiMaster_StatusInvoiceId === "2" ? (
+            <Button
+              radius={"xl"}
+              onClick={() =>
+                router.push(
+                  RouterAdminDonasi.transfer_invoice + `${e?.imagesId}`
+                )
+              }
+            >
+              Cek
+            </Button>
+          ) : (
+            "-"
+          )}
+        </Center>
+      </td>
+      <td>
+        test
+        {/* <Center>
+            {e?.donasiMaster_StatusInvoiceId === "1" ? (
+              <Button radius={"xl"} disabled>
+                Selesai
+              </Button>
+            ) : e?.DonasiMaster_StatusInvoice?.id === "2" ? (
+              <ButtonAccept
+                invoiceId={e?.id}
+                donasiId={dataDonasi?.id}
+                nominal={+e?.nominal}
+                danaTerkumpul={+dataDonasi?.terkumpul}
+                target={+dataDonasi?.target}
+                onSuccessDonasi={(val) => {
+                  onSuccessDonasi(val);
+                }}
+                onSuccessDonatur={(val) => {
+                  setListDonatur(val.data);
+                  setNPage(val.nPage);
+                }}
+              />
+            ) : (
+              <Text>-</Text>
+            )}
+          </Center> */}
+      </td>
+    </tr>
+  ));
+  return (
+    <>
+      <Stack spacing={"xs"} h={"100%"}>
+        {/* <pre>{JSON.stringify(dataDonasi, null, 2)}</pre> */}
+        <Group
+          position="apart"
+          bg={"gray.4"}
+          p={"xs"}
+          style={{ borderRadius: "6px" }}
+        >
+          <Title order={4}>Transaksi</Title>
+          <Group>
+            <ActionIcon
+              size={"lg"}
+              radius={"xl"}
+              variant="light"
+              onClick={() => {
+                //   onRelaod();
+              }}
+            >
+              <IconReload />
+            </ActionIcon>
+            <Select
+              placeholder="Pilih status"
+              value={isSelect}
+              data={[]}
+              // data={listMasterStatus.map((e) => ({
+              //   value: e.id,
+              //   label: e.name,
+              // }))}
+              // onChange={(val) => {
+              //   onSelect(val);
+              // }}
+            />
+          </Group>
+        </Group>
+
+        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+          <ScrollArea w={"100%"} h={"90%"}>
+            <Table
+              verticalSpacing={"xl"}
+              horizontalSpacing={"md"}
+              p={"md"}
+              w={1500}
+              striped
+              highlightOnHover
+            >
+              <thead>
+                <tr>
+                  <th>
+                    <Center>Nama Investor</Center>
+                  </th>
+                  <th>
+                    <Center>Nama Bank</Center>
+                  </th>
+                  <th>
+                    <Center>Jumlah Investasi</Center>
+                  </th>
+                  <th>
+                    <Center>Tanggal</Center>
+                  </th>
+                  <th>
+                    <Center>Status</Center>
+                  </th>
+                  <th>
+                    <Center>Bukti Transfer</Center>
+                  </th>
+                  <th>
+                    <Center>Aksi</Center>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>{tableRows}</tbody>
+            </Table>
+          </ScrollArea>
+
+          <Center mt={"xl"}>
+            <Pagination
+              value={isActivePage}
+              total={isNPage}
+              onChange={(val) => {
+                //   onPageClick(val);
+              }}
+            />
+          </Center>
+        </Paper>
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,40 @@
+import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
+import { SimpleGrid } from "@mantine/core";
+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";
+
+export function AdminInvestasi_ViewDetailData({
+  data,
+}: {
+  data: MODEL_INVESTASI;
+}) {
+  return (
+    <>
+      <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} />
+
+        {/* Data Foto */}
+        <ComponentAdminInvestasi_DetailGambar imagesId={data.imagesId} />
+
+        {/* Data Detail */}
+        <ComponentAdminInvestasi_DetailData data={data} />
+      </SimpleGrid>
+      <ComponentAdminInvestasi_UIDetailFile
+        title={data.title}
+        dataProspektus={data.ProspektusInvestasi}
+        listDokumen={data.DokumenInvestasi}
+      />
+    </>
+  );
+}

src/app_modules/admin/investasi/_view/index.ts

@@ -0,0 +1,7 @@
+import { AdminInvestasi_ViewDaftarInvestor } from "./detail/view_daftar_investor";
+import { AdminInvestasi_ViewDaftarTransaksi } from "./detail/view_daftar_transaksi";
+import { AdminInvestasi_ViewDetailData } from "./detail/view_detail_data";
+
+export { AdminInvestasi_ViewDetailData };
+export { AdminInvestasi_ViewDaftarTransaksi };
+export { AdminInvestasi_ViewDaftarInvestor };

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

@@ -1,159 +1,69 @@
 "use client";
 
-import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface"; 
-import {
-  AspectRatio,
-  Box,
-  Center,
-  Grid,
-  Image,
-  List,
-  Paper,
-  SimpleGrid,
-  Stack,
-  Text,
-  ThemeIcon,
-  Title,
-} from "@mantine/core";
+import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
+import { Button, Group, Stack } from "@mantine/core";
+import { IconCircleCheck } from "@tabler/icons-react";
+import { useState } from "react";
 import ComponentAdminGlobal_BackButton from "../../_admin_global/back_button";
-import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
-import { IconCircleCheck, IconHome } from "@tabler/icons-react";
-import investasi from "../../notifikasi/route_setting/investasi";
+import {
+  AdminInvestasi_ViewDaftarInvestor,
+  AdminInvestasi_ViewDaftarTransaksi,
+  AdminInvestasi_ViewDetailData,
+} from "../_view";
 
 export function AdminInvestasi_DetailPublish({
   data,
 }: {
   data: MODEL_INVESTASI;
 }) {
+  const [selectPage, setSelectPage] = useState("1");
+  const listPage = [
+    {
+      id: "1",
+      name: "Detail Data",
+      icon: <IconCircleCheck />,
+    },
+    {
+      id: "2",
+      name: "Daftar Transaksi",
+      icon: <IconCircleCheck />,
+    },
+    // {
+    //   id: "3",
+    //   name: "Daftar Investor",
+    //   icon: <IconCircleCheck />,
+    // },
+  ];
+
   return (
     <>
-      <Stack>
+      <Stack px={"lg"}>
         <ComponentAdminGlobal_BackButton />
-        <SimpleGrid cols={2}>
-          <InformasiAuthor data={data} />
-          <InformasiDataInvestasi data={data} />
-        </SimpleGrid>
+
+        <Group>
+          {listPage.map((e) => (
+            <Button
+              key={e.id}
+              color={selectPage == e.id ? "green" : "gray"}
+              radius={"xl"}
+              onClick={() => setSelectPage(e.id)}
+              style={{
+                transition: "all 0.3s",
+              }}
+            >
+              {e.name}
+            </Button>
+          ))}
+        </Group>
+
+        {selectPage == "1" ? (
+          <AdminInvestasi_ViewDetailData data={data} />
+        ) : null}
+        {selectPage == "2" ? (
+          <AdminInvestasi_ViewDaftarTransaksi dataTransaksi={{}} />
+        ) : null}
+        {selectPage == "3" ? <AdminInvestasi_ViewDaftarInvestor /> : null}
       </Stack>
     </>
   );
 }
-
-function InformasiAuthor({ data }: { data: MODEL_INVESTASI }) {
-  return (
-    <>
-      <Paper withBorder>
-        <Stack p={"lg"} spacing={"xl"}>
-          <Title align="center" order={3}>
-            {data.title}
-          </Title>
-
-          <AspectRatio ratio={1 / 1} mah={300}>
-            <Center>
-              <Image
-                bg={"blue"}
-                style={{ borderRadius: "10px" }}
-                radius={"md"}
-                width={250}
-                alt=""
-                src={RouterInvestasi_OLD.api_gambar + `${data.imagesId}`}
-              />
-            </Center>
-          </AspectRatio>
-
-          <Stack spacing={"sm"}>
-            <Title order={4}>Informasi pemilik</Title>
-
-            <List
-              spacing="xs"
-              size="sm"
-              center
-              icon={
-                <ThemeIcon color="teal" size={24} radius="xl">
-                  <IconCircleCheck size="1rem" />
-                </ThemeIcon>
-              }
-            >
-              <List.Item>{data.author.username}</List.Item>
-              <List.Item>+{data.author.nomor}</List.Item>
-              <List.Item>{data.author.Profile.email}</List.Item>
-            </List>
-          </Stack>
-        </Stack>
-      </Paper>
-    </>
-  );
-}
-
-function InformasiDataInvestasi({ data }: { data: MODEL_INVESTASI }) {
-  return (
-    <>
-      <Paper withBorder p={"lg"}>
-        <Stack>
-          <Title order={3}>Rincian Data Investasi</Title>
-          <Grid justify="center">
-            <Grid.Col>
-              <Grid mt={"md"} justify="center">
-                <Grid.Col span={6}>
-                  <Stack>
-                    <Box>
-                      <Text>Dana Dibutuhkan</Text>
-                      <Text fw={"bold"}>
-                        Rp.{" "}
-                        {new Intl.NumberFormat("id-ID", {
-                          maximumFractionDigits: 10,
-                        }).format(+data.targetDana)}
-                      </Text>
-                    </Box>
-                    <Box>
-                      <Text>Harga Per Lembar</Text>
-                      <Text fw={"bold"}>
-                        Rp.{" "}
-                        {new Intl.NumberFormat("id-ID", {
-                          maximumFractionDigits: 10,
-                        }).format(+data.hargaLembar)}{" "}
-                      </Text>
-                    </Box>
-                    <Box>
-                      <Text>Jadwal Pembagian</Text>
-                      <Text fw={"bold"}>
-                        {data.MasterPembagianDeviden.name} bulan{" "}
-                      </Text>
-                    </Box>
-                    <Box>
-                      <Text>Pencarian Investor</Text>
-                      <Text fw={"bold"}>
-                        {data.MasterPencarianInvestor.name} hari{" "}
-                      </Text>
-                    </Box>
-                  </Stack>
-                </Grid.Col>
-                <Grid.Col span={6}>
-                  <Stack>
-                    <Box>
-                      <Text>ROI</Text>
-                      <Text fw={"bold"}>{data.roi} %</Text>
-                    </Box>
-                    <Box>
-                      <Text>Total Lembar</Text>
-                      <Text fw={"bold"}>
-                        {" "}
-                        {new Intl.NumberFormat("id-ID", {
-                          maximumFractionDigits: 10,
-                        }).format(+data.totalLembar)}{" "}
-                        lembar
-                      </Text>
-                    </Box>
-                    <Box>
-                      <Text>Pembagian Deviden</Text>
-                      <Text fw={"bold"}>{data.MasterPeriodeDeviden.name}</Text>
-                    </Box>
-                  </Stack>
-                </Grid.Col>
-              </Grid>
-            </Grid.Col>
-          </Grid>
-        </Stack>
-      </Paper>
-    </>
-  );
-}

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

@@ -1,38 +1,13 @@
 "use client";
 
-import { RouterAdminInvestasi } from "@/app/lib/router_admin/router_admin_investasi";
-import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
-import { BeritaInvestasi } from "@/app_modules/investasi";
-import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface"; 
+import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
+import getOneInvestasiById from "@/app_modules/investasi/fun/get_one_investasi_by_id";
 import mqtt_client from "@/util/mqtt_client";
-import {
-  AspectRatio,
-  Box,
-  Button,
-  Center,
-  Divider,
-  Grid,
-  Group,
-  Image,
-  Modal,
-  Paper,
-  SimpleGrid,
-  Stack,
-  Text,
-  Textarea,
-  Title,
-} from "@mantine/core";
+import { Button, Group, SimpleGrid, Stack } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import {
-  IconAlertHexagonFilled,
-  IconCheck,
-  IconFileTypePdf,
-} from "@tabler/icons-react";
 import _ from "lodash";
-import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import "react-simple-toasts/dist/theme/dark.css";
 import { ComponentAdminGlobal_NotifikasiBerhasil } from "../../_admin_global/admin_notifikasi/notifikasi_berhasil";
 import { ComponentAdminGlobal_NotifikasiGagal } from "../../_admin_global/admin_notifikasi/notifikasi_gagal";
 import { ComponentAdminGlobal_NotifikasiPeringatan } from "../../_admin_global/admin_notifikasi/notifikasi_peringatan";
@@ -44,7 +19,6 @@ import { ComponentAdminInvestasi_DetailGambar } from "../_component/detail_gamba
 import { ComponentAdminInvestasi_UIDetailFile } from "../_component/ui_detail_file";
 import { adminInvestasi_funEditStatusPublishById } from "../fun/edit/fun_status_publish_by_id";
 import Admin_funRejectInvestasi from "../fun/fun_reject_investasi";
-import getOneInvestasiById from "@/app_modules/investasi/fun/get_one_investasi_by_id";
 
 export default function AdminInvestasi_DetailReview({
   dataInvestasi,
@@ -180,6 +154,7 @@ export default function AdminInvestasi_DetailReview({
             ""
           )}
         </Group>
+
         <SimpleGrid
           cols={3}
           spacing="lg"
@@ -207,245 +182,4 @@ export default function AdminInvestasi_DetailReview({
       </Stack>
     </>
   );
-
-  return (
-    <>
-      <Group position="apart" px={"md"}>
-        <ComponentAdminGlobal_BackButton
-          path={RouterAdminInvestasi.table_review}
-        />
-        <Group>
-          <Center>
-            {!publish || data.MasterStatusInvestasi.id === "4" ? (
-              ""
-            ) : (
-              <Button
-                radius={50}
-                bg={"green"}
-                color="green"
-                leftIcon={<IconCheck />}
-                onClick={() => {
-                  onPublish();
-                }}
-              >
-                Publish
-              </Button>
-            )}
-          </Center>
-          {data.MasterStatusInvestasi.id === "3" ? (
-            ""
-          ) : (
-            <Button
-              radius={50}
-              bg={"red"}
-              color="red"
-              onClick={() => setOpenModal(true)}
-              rightIcon={<IconAlertHexagonFilled />}
-            >
-              Reject
-            </Button>
-          )}
-        </Group>
-      </Group>
-
-      <Divider my={"md"} />
-
-      <Stack spacing={"lg"}>
-        <Grid>
-          <Grid.Col span={6}>
-            {/* Title  */}
-            <Center my={"sm"}>
-              <Title order={4} mb={"xs"}>
-                {data.title}
-              </Title>
-            </Center>
-            <Paper withBorder mb={"md"} mah={300} maw={400} mx={"auto"} p={5}>
-              <AspectRatio ratio={16 / 9}>
-                <Image
-                  alt=""
-                  src={RouterInvestasi_OLD.api_gambar + `${data.imagesId}`}
-                />
-              </AspectRatio>
-            </Paper>
-          </Grid.Col>
-
-          {/* Rincian Data */}
-          <Grid.Col span={6}>
-            <Grid mt={"md"}>
-              <Grid.Col span={6}>
-                <Stack>
-                  <Box>
-                    <Text>Dana Dibutuhkan</Text>
-                    <Text>
-                      Rp.{" "}
-                      {new Intl.NumberFormat("id-ID", {
-                        maximumFractionDigits: 10,
-                      }).format(+data.targetDana)}
-                    </Text>
-                  </Box>
-                  <Box>
-                    <Text>Harga Per Lembar</Text>
-                    <Text>
-                      Rp.{" "}
-                      {new Intl.NumberFormat("id-ID", {
-                        maximumFractionDigits: 10,
-                      }).format(+data.hargaLembar)}{" "}
-                    </Text>
-                  </Box>
-                  <Box>
-                    <Text>Jadwal Pembagian</Text>
-                    <Text>{data.MasterPembagianDeviden.name} bulan </Text>
-                  </Box>
-                  <Box>
-                    <Text>Pencarian Investor</Text>
-                    <Text>{data.MasterPencarianInvestor.name} hari </Text>
-                  </Box>
-                </Stack>
-              </Grid.Col>
-              <Grid.Col span={6}>
-                <Stack>
-                  <Box>
-                    <Text>ROI</Text>
-                    <Text>{data.roi} %</Text>
-                  </Box>
-                  <Box>
-                    <Text>Total Lembar</Text>
-                    <Text>
-                      {" "}
-                      {new Intl.NumberFormat("id-ID", {
-                        maximumFractionDigits: 10,
-                      }).format(+data.totalLembar)}{" "}
-                      lembar
-                    </Text>
-                  </Box>
-                  <Box>
-                    <Text>Pembagian Deviden</Text>
-                    <Text>{data.MasterPeriodeDeviden.name}</Text>
-                  </Box>
-                </Stack>
-              </Grid.Col>
-            </Grid>
-          </Grid.Col>
-        </Grid>
-
-        <Grid>
-          <Grid.Col span={6}>
-            {/* Note */}
-            {!publish || data.MasterStatusInvestasi.id === "4" ? (
-              ""
-            ) : (
-              <Stack spacing={0}>
-                <Text fw={"bold"}>Note :</Text>
-                <Text fw={"lighter"} fs={"italic"}>
-                  Cek kembali kelengkapan file prospektus & semua dokumen
-                  terkait investasi sebelum mem-publish. Jika kelengkapan file
-                  kurang lengkap maka reject dan berikan pesan terkait
-                  kekurangnya.
-                </Text>
-              </Stack>
-            )}
-            {publish &&
-            data.MasterStatusInvestasi.id === "3" &&
-            _.isEmpty(data.BeritaInvestasi) ? (
-              <BeritaInvestasi dataInvestasi={data} />
-            ) : (
-              ""
-            )}
-          </Grid.Col>
-          {/* Note dan dokumen */}
-          <Grid.Col span={6}>
-            <Stack>
-              {/* File file */}
-              <Stack>
-                {/* Prospektus */}
-                <Stack spacing={0}>
-                  <Title order={6}>Prospektus :</Title>
-                  {data.ProspektusInvestasi === null ? (
-                    <Text>Tidak ada file</Text>
-                  ) : (
-                    <Paper p={"xs"}>
-                      <Group>
-                        <IconFileTypePdf />
-                        <Text>Prospektus_{data.title}</Text>
-                        <Link
-                          target="_blank"
-                          href={
-                            RouterInvestasi_OLD.api_file_prospektus +
-                            `${
-                              data.ProspektusInvestasi === null
-                                ? ""
-                                : data.ProspektusInvestasi.id
-                            }`
-                          }
-                        >
-                          <Button compact radius={50}>
-                            Buka
-                          </Button>
-                        </Link>
-                      </Group>
-                    </Paper>
-                  )}
-                </Stack>
-
-                {/* Dokumen */}
-                <Stack spacing={0}>
-                  <Title order={6}>Dokumen :</Title>
-                  {_.isEmpty(data.DokumenInvestasi) ? (
-                    <Text>Tidak ada dokumen</Text>
-                  ) : (
-                    data.DokumenInvestasi.map((e) => (
-                      <Paper p={"xs"} key={e.id}>
-                        <Group>
-                          <IconFileTypePdf />
-                          <Text>{e.title}</Text>
-                          <Link
-                            target="_blank"
-                            href={
-                              RouterInvestasi_OLD.api_file_dokumen + `${e.id}`
-                            }
-                          >
-                            <Button compact radius={50}>
-                              Buka
-                            </Button>
-                          </Link>
-                        </Group>
-                      </Paper>
-                    ))
-                  )}
-                </Stack>
-              </Stack>
-            </Stack>
-          </Grid.Col>
-        </Grid>
-
-        <Modal
-          centered
-          opened={openModal}
-          onClose={() => setOpenModal(false)}
-          // withCloseButton={false}
-          title="Masukan alasan penolakan"
-        >
-          <Textarea
-            mb={"md"}
-            autosize
-            minRows={2}
-            maxRows={4}
-            value={data.catatan === null ? [] : data.catatan}
-            onChange={(val) =>
-              setData({
-                ...data,
-                catatan: val.target.value,
-              })
-            }
-          />
-          <Group position="right">
-            <Button radius={50} compact onClick={() => onReject()}>
-              Simpan
-            </Button>
-          </Group>
-        </Modal>
-      </Stack>
-      {/* <pre>{JSON.stringify(investasi, null, 2)}</pre> */}
-    </>
-  );
 }

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

@@ -1,6 +1,7 @@
 "use client";
-import { RouterAdminInvestasi_OLD } from "@/app/lib/router_hipmi/router_admin";
-import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface"; 
+
+import { RouterAdminInvestasi } from "@/app/lib/router_admin/router_admin_investasi";
+import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
 import {
   Button,
   Center,
@@ -12,7 +13,7 @@ import {
   Table,
   Text,
   TextInput,
-  Title
+  Title,
 } from "@mantine/core";
 import { IconSearch } from "@tabler/icons-react";
 import _ from "lodash";
@@ -21,7 +22,6 @@ import { useState } from "react";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
 import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data";
 import { adminInvestasi_funGetAllPublish } from "../fun/get/get_all_publish";
-import { RouterAdminInvestasi } from "@/app/lib/router_admin/router_admin_investasi";
 
 export default function Admin_TablePublishInvestasi({
   dataInvestsi,
@@ -45,6 +45,8 @@ function TableView({ listData }: { listData: any }) {
   const [nPage, setNPage] = useState(listData.nPage);
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
+  const [isLoading, setLoading] = useState(false);
+  const [idData, setIdData] = useState("");
 
   async function onSearch(s: string) {
     setSearch(s);
@@ -99,12 +101,16 @@ function TableView({ listData }: { listData: any }) {
       <td>
         <Center w={200}>
           <Button
+            loading={isLoading && idData === e.id}
+            loaderPosition="center"
             bg={"green"}
             color="green"
             radius={"xl"}
-            onClick={() =>
-              router.push(RouterAdminInvestasi.detail_publish +`${e.id}`)
-            }
+            onClick={() => {
+              setIdData(e.id);
+              setLoading(true);
+              router.push(RouterAdminInvestasi.detail_publish + `${e.id}`);
+            }}
           >
             Detail
           </Button>

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

@@ -1,6 +1,6 @@
 "use client";
 import { RouterAdminInvestasi_OLD } from "@/app/lib/router_hipmi/router_admin";
-import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface"; 
+import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
 import {
   Badge,
   ActionIcon,
@@ -122,6 +122,8 @@ function TableView({ listData }: { listData: any }) {
   const [nPage, setNPage] = useState(listData.nPage);
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
+  const [isLoading, setLoading] = useState(false);
+  const [idData, setIdData] = useState("");
 
   async function onSearch(s: string) {
     setSearch(s);
@@ -165,11 +167,15 @@ function TableView({ listData }: { listData: any }) {
       <td>
         <Center w={200}>
           <Button
+            loading={isLoading && idData === e.id}
+            loaderPosition="center"
             color="orange"
             radius={"xl"}
-            onClick={() =>
-              router.push(RouterAdminInvestasi.detail_reject + `${e.id}`)
-            }
+            onClick={() => {
+              setIdData(e.id);
+              setLoading(true);
+              router.push(RouterAdminInvestasi.detail_reject + `${e.id}`);
+            }}
           >
             Detail
           </Button>

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

@@ -1,7 +1,7 @@
 "use client";
 import { RouterAdminInvestasi } from "@/app/lib/router_admin/router_admin_investasi";
 import { RouterAdminInvestasi_OLD } from "@/app/lib/router_hipmi/router_admin";
-import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface"; 
+import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
 import {
   Badge,
   ActionIcon,
@@ -50,6 +50,8 @@ function TableView({ listData }: { listData: any }) {
   const [nPage, setNPage] = useState(listData.nPage);
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
+  const [isLoading, setLoading] = useState(false);
+  const [idData, setIdData] = useState("");
 
   async function onSearch(s: string) {
     setSearch(s);
@@ -106,11 +108,15 @@ function TableView({ listData }: { listData: any }) {
       <td>
         <Center w={200}>
           <Button
+            loading={isLoading && idData === e.id}
+            loaderPosition="center"
             color="orange"
             radius={"xl"}
-            onClick={() =>
-              router.push(RouterAdminInvestasi_OLD.konfirmasi + `${e.id}`)
-            }
+            onClick={() => {
+              setIdData(e.id);
+              setLoading(true);
+              router.push(RouterAdminInvestasi_OLD.konfirmasi + `${e.id}`);
+            }}
           >
             Detail
           </Button>