Fix Tampilan Table Scrool ke kanan, dan ada beberapa file txt backup

src/app_modules/admin/investasi/_lib/api_fetch_admin_investasi.ts

@@ -6,6 +6,9 @@ export {
   apiGetAdminInvestasiById,
   apiGetAdminAllTransaksiById,
   apiGetAdminStatusTransaksi,
+  apiGetAdminDetailTransaksi
+  
+
 };
 const apiGetAdminInvestasiCountDashboard = async ({
   name,
@@ -58,6 +61,24 @@ const apiGetAdminInvestasiByStatus = async ({
   return await response.json().catch(() => null);
 };
 
+const apiGetAdminDetailTransaksi = async ({ id }: { id: string }) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
+
+  const response = await fetch(`/api/admin/investasi/${id}/detail_transaksi`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  console.log("Ini response",response.json())
+
+  return await response.json().catch(() => null);
+}
+  
 const apiGetAdminInvestasiById = async ({ id }: { id: string }) => {
   const { token } = await fetch("/api/get-cookie").then((res) => res.json());
   if (!token) return await token.json().catch(() => null);
@@ -94,7 +115,7 @@ const apiGetAdminAllTransaksiById = async ({
 
     // Fetch data
     const isStatus = status ? `&status=${status}` : "";
-    console.log("Ini status",isStatus);
+    console.log("Ini status", isStatus);
     const isPage = page ? `?page=${page}` : "";
     const response = await fetch(
       `/api/admin/investasi/${id}/transaksi${isPage}${isStatus}`,
@@ -126,6 +147,7 @@ const apiGetAdminAllTransaksiById = async ({
   }
 };
 
+
 const apiGetAdminStatusTransaksi = async () => {
   const { token } = await fetch("/api/get-cookie").then((res) => res.json());
   if (!token) return await token.json().catch(() => null);
@@ -142,3 +164,5 @@ const apiGetAdminStatusTransaksi = async () => {
 
   return await response.json().catch(() => null);
 };
+
+

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

@@ -27,7 +27,7 @@ import {
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { IconEyeCheck, IconReload } from "@tabler/icons-react";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import {
   AdminInvestasi_ComponentButtonBandingTransaksi,
@@ -35,6 +35,7 @@ import {
   AdminInvestasi_ComponentCekBuktiTransfer,
 } from "../../_component";
 import { apiGetAdminAllTransaksiById } from "../../_lib/api_fetch_admin_investasi";
+import { RouterAdminInvestasi } from "@/lib/router_admin/router_admin_investasi";
 
 export function AdminInvestasi_ViewDaftarTransaksi() {
   const params = useParams<{ id: string }>();
@@ -49,6 +50,7 @@ export function AdminInvestasi_ViewDaftarTransaksi() {
   const [selectedStatus, setSelectedStatus] = useState("");
   const [isLoading, setLoading] = useState(false);
   const [idData, setIdData] = useState("");
+  const router = useRouter();
 
   useShallowEffect(() => {
     handleLoadData();
@@ -166,7 +168,7 @@ export function AdminInvestasi_ViewDaftarTransaksi() {
         </td>
         <td>
           <Center>
-            {e.statusInvoiceId === "1" && "-"}
+            {/* {e.statusInvoiceId === "1" && "-"}
             {e.statusInvoiceId === "2" && (
               <AdminInvestasi_ComponentButtonKonfirmasiTransaksi
                 invoiceId={e.id}
@@ -189,17 +191,17 @@ export function AdminInvestasi_ViewDaftarTransaksi() {
                   setNPage(val.nPage);
                 }}
               />
-            )}
+            )} */}
             <Button
               loading={isLoading && idData == e.id}
               loaderPosition="center"
-              color="blue"
+              color="green"
               leftIcon={<IconEyeCheck size={20} />}
               radius={"xl"}
               onClick={() => {
                 setIdData(e.id);
                 setLoading(true);
-
+                router.push(RouterAdminInvestasi.detail_transaksi + e.id);
               }}
             >
               Detail

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

@@ -0,0 +1,301 @@
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { apiGetMasterStatusTransaksi } from "@/app_modules/_global/lib/api_fetch_master";
+import { globalStatusTransaksi } from "@/app_modules/_global/lib/master_list_app";
+import {
+  ComponentAdminGlobal_TampilanRupiah,
+  ComponentAdminGlobal_TitlePage,
+} from "@/app_modules/admin/_admin_global/_component";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import {
+  MODEL_INVOICE_INVESTASI,
+  MODEL_STATUS_INVOICE_INVESTASI,
+} from "@/app_modules/investasi/_lib/interface";
+import { clientLogger } from "@/util/clientLogger";
+import {
+  ActionIcon,
+  Badge,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  ScrollArea,
+  Select,
+  Stack,
+  Table,
+  Text,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconEyeCheck, IconReload } from "@tabler/icons-react";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import {
+  AdminInvestasi_ComponentButtonBandingTransaksi,
+  AdminInvestasi_ComponentButtonKonfirmasiTransaksi,
+  AdminInvestasi_ComponentCekBuktiTransfer,
+} from "../../_component";
+import { apiGetAdminAllTransaksiById } from "../../_lib/api_fetch_admin_investasi";
+
+export function AdminInvestasi_ViewDaftarTransaksi() {
+  const params = useParams<{ id: string }>();
+  const investasiId = params.id;
+  const [listStatus, setListStatus] = useState<
+    MODEL_STATUS_INVOICE_INVESTASI[] | null
+  >(null);
+
+  const [data, setData] = useState<MODEL_INVOICE_INVESTASI[] | null>(null);
+  const [isNPage, setNPage] = useState<number>(1);
+  const [isActivePage, setActivePage] = useState(1);
+  const [selectedStatus, setSelectedStatus] = useState("");
+  const [isLoading, setLoading] = useState(false);
+  const [idData, setIdData] = useState("");
+
+  useShallowEffect(() => {
+    handleLoadData();
+  }, [isActivePage, selectedStatus]);
+
+  useShallowEffect(() => {
+    handleLoadStatus();
+  }, []);
+
+  const handleLoadData = async () => {
+    try {
+      const cek = globalStatusTransaksi.find((e) => e.id === selectedStatus);
+      const response = await apiGetAdminAllTransaksiById({
+        id: investasiId,
+        page: `${isActivePage}`,
+        status: cek?.name,
+      });
+
+      if (response?.success && response?.data?.data) {
+        setData(response.data.data);
+        setNPage(response.data.nPage || 1);
+      } else {
+        console.error("Invalid data format received:", response);
+        setData([]);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data daftar tramnsaksi", error);
+      setData([]);
+    }
+  };
+
+  const handleLoadStatus = async () => {
+    try {
+      const response = await apiGetMasterStatusTransaksi();
+
+      if (response?.success && response?.data) {
+        setListStatus(response.data);
+      } else {
+        console.error("Invalid data format received:", response);
+        setListStatus(null);
+      }
+    } catch (error) {
+      clientLogger.error("Error get status transaksi", error);
+      setListStatus(null);
+    }
+  };
+
+  const onPageClick = async (page: number) => {
+    setActivePage(page);
+  };
+
+  async function onSelected(selectStatus: any) {
+    setSelectedStatus(selectStatus);
+  }
+
+  async function onReload() {
+    setSelectedStatus("");
+    handleLoadData();
+  }
+
+  const renderTableBody = () => {
+    if (!Array.isArray(data) || data.length === 0) {
+      return (
+        <tr>
+          <td colSpan={12}>
+            <Center>
+              <Text color="gray">Tidak ada data</Text>
+            </Center>
+          </td>
+        </tr>
+      );
+    }
+    return data?.map((e, i) => (
+      <tr key={i}>
+        <td>
+          <Center c={AdminColor.white}>{e?.Author?.username}</Center>
+        </td>
+        <td>
+          <Center c={AdminColor.white}>
+            <ComponentAdminGlobal_TampilanRupiah nominal={+e?.nominal} />
+          </Center>
+        </td>
+        <td>
+          <Center c={AdminColor.white}>
+            {new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(
+              new Date(e?.createdAt)
+            )}
+          </Center>
+        </td>
+        <td>
+          <Center>
+            <Badge
+              w={150}
+              variant="light"
+              color={
+                e.statusInvoiceId === "1"
+                  ? "green"
+                  : e.statusInvoiceId === "4"
+                    ? "red"
+                    : "blue"
+              }
+            >
+              {e?.StatusInvoice?.name}
+            </Badge>
+          </Center>
+        </td>
+        <td>
+          <Center>
+            {e?.statusInvoiceId !== "3" ? (
+              <AdminInvestasi_ComponentCekBuktiTransfer imageId={e?.imageId} />
+            ) : (
+              "-"
+            )}
+          </Center>
+        </td>
+        <td>
+          <Center>
+            {/* {e.statusInvoiceId === "1" && "-"}
+            {e.statusInvoiceId === "2" && (
+              <AdminInvestasi_ComponentButtonKonfirmasiTransaksi
+                invoiceId={e.id}
+                investasiId={investasiId}
+                lembarTerbeli={e.lembarTerbeli}
+                onLoadData={(val) => {
+                  setData(val.data);
+                  setNPage(val.nPage);
+                }}
+              />
+            )}
+            {e.statusInvoiceId === "3" && "-"}
+            {e.statusInvoiceId === "4" && (
+              <AdminInvestasi_ComponentButtonBandingTransaksi
+                invoiceId={e.id}
+                investasiId={investasiId}
+                lembarTerbeli={e.lembarTerbeli}
+                onLoadData={(val) => {
+                  setData(val.data);
+                  setNPage(val.nPage);
+                }}
+              />
+            )} */}
+            <Button
+              loading={isLoading && idData == e.id}
+              loaderPosition="center"
+              color="green"
+              leftIcon={<IconEyeCheck size={20} />}
+              radius={"xl"}
+              onClick={() => {
+                setIdData(e.id);
+                setLoading(true);
+
+              }}
+            >
+              Detail
+            </Button>
+          </Center>
+        </td>
+      </tr>
+    ));
+  };
+
+  if (!data && !listStatus) return <CustomSkeleton height={"80vh"} />;
+
+  return (
+    <>
+      <Stack spacing={"xs"} h={"100%"}>
+        <ComponentAdminGlobal_TitlePage
+          name="Transkasi"
+          color={AdminColor.softBlue}
+          component={
+            <Group>
+              <ActionIcon
+                size={"lg"}
+                radius={"xl"}
+                variant="light"
+                onClick={() => {
+                  onReload();
+                }}
+              >
+                <IconReload />
+              </ActionIcon>
+              <Select
+                placeholder="Pilih status"
+                value={selectedStatus}
+                data={
+                  listStatus?.map((e, i) => ({
+                    value: e.id,
+                    label: e.name,
+                  })) || []
+                }
+                onChange={(val: any) => {
+                  onSelected(val);
+                }}
+              />
+            </Group>
+          }
+        />
+
+        {!data ? (
+          <CustomSkeleton height={"80vh"} width={"100%"} />
+        ) : (
+          <Paper bg={AdminColor.softBlue} p={"md"} shadow="lg" h={"80vh"}>
+            <ScrollArea w={"100%"} h={"90%"}>
+              <Table
+                verticalSpacing={"xl"}
+                horizontalSpacing={"md"}
+                p={"md"}
+                w={1100}
+              >
+                <thead>
+                  <tr>
+                    <th>
+                      <Center c={AdminColor.white}>Nama Investor</Center>
+                    </th>
+                    <th>
+                      <Center c={AdminColor.white}>Jumlah Investasi</Center>
+                    </th>
+                    <th>
+                      <Center c={AdminColor.white}>Tanggal</Center>
+                    </th>
+                    <th>
+                      <Center c={AdminColor.white}>Status</Center>
+                    </th>
+                    <th>
+                      <Center c={AdminColor.white}>Bukti Transfer</Center>
+                    </th>
+                    <th>
+                      <Center c={AdminColor.white}>Aksi</Center>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>{renderTableBody()}</tbody>
+              </Table>
+            </ScrollArea>
+
+            <Center mt={"xl"}>
+              <Pagination
+                value={isActivePage}
+                total={isNPage}
+                onChange={(val) => {
+                  onPageClick(val);
+                }}
+              />
+            </Center>
+          </Paper>
+        )}
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,147 @@
+'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 { Button, Grid, Group, Paper, Stack, Text, Title } from '@mantine/core';
+import { useState } from 'react';
+import { apiGetAdminDetailTransaksi } from '../../_lib/api_fetch_admin_investasi';
+import { useParams } from 'next/navigation';
+import { clientLogger } from '@/util/clientLogger';
+import { useShallowEffect } from '@mantine/hooks';
+
+
+function DetailTransaksi() {
+  const params = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_INVOICE_INVESTASI | null>(null);
+
+  useShallowEffect(() => {
+    loadInitialData();
+  }, [])
+
+  const loadInitialData = async () => {
+    try {
+      
+      const response = await apiGetAdminDetailTransaksi({
+        id: params.id
+      })
+
+      if (response?.success && response?.data.data) {
+        setData(response.data.data)
+      } else {
+        console.error("Invalid data format recieved:", response)
+        setData(null)
+      }
+      
+    } catch (error) {
+      clientLogger.error("Invalid data format recieved:", error)
+      setData(null)
+    }
+  }
+  return (
+    <Stack px={"lg"}>
+      <Group position="apart">
+        <AdminGlobal_ComponentBackButton />
+
+        {/* {data?.masterStatusInvestasiId === "2" ? ( */}
+        <Group>
+          <Button
+            radius={"xl"}
+            color="green"
+          // onClick={() => setOpenModalPublish(true)}
+          >
+            Publish
+          </Button>
+          <Button
+            radius={"xl"}
+            color="red"
+          // onClick={() => setOpenModalReject(true)}
+          >
+            Reject
+          </Button>
+        </Group>
+        {/* // ) : (
+        //   ""
+        // )} */}
+      </Group>
+
+      <>
+        {!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}>
+                    <Text>{data?.statusInvoiceId}</Text>
+                  </Grid.Col>
+                </Grid>
+                <Grid>
+                  <Grid.Col span={6}>
+                    <Text fw={"bold"}>Bukti Transfer:</Text>
+                  </Grid.Col>
+                  <Grid.Col span={6}>
+                    <Text>{data?.Profile?.alamat}</Text>
+                  </Grid.Col>
+                </Grid>
+              </Stack>
+            </Stack>
+          </Paper>
+        )}
+      </>
+    </Stack>
+  );
+}
+
+export default DetailTransaksi;