Merge pull request #335 from bipproduction/bagas/25-feb-25

fix admin investasi

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.2.63](https://github.com/bipproduction/hipmi/compare/v1.2.62...v1.2.63) (2025-02-26)
+
 ## [1.2.62](https://github.com/bipproduction/hipmi/compare/v1.2.61...v1.2.62) (2025-02-25)
 
 ## [1.2.61](https://github.com/bipproduction/hipmi/compare/v1.2.60...v1.2.61) (2025-02-25)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hipmi",
-  "version": "1.2.62",
+  "version": "1.2.63",
   "private": true,
   "type": "module",
   "prisma": {

src/app/api/admin/investasi/[id]/alltransaksi/route.ts

@@ -1,101 +0,0 @@
-import backendLogger from "@/util/backendLogger";
-import _ from "lodash";
-import { NextResponse } from "next/server";
-import prisma from "@/lib/prisma";
-
-export async function GET( request: Request,
-    { params }: { params: { id: string,} }) {
-
-        let fixData;
-        const { searchParams } = new URL(request.url);
-        const page = searchParams.get("page");
-        const selectStatus = searchParams.get("status");
-        const { id } = params;
-        const investasiId = id;
-        const takeData = 10;
-        const skipData = Number(page) * takeData - takeData;
-    try {
-
-        if (!page) {
-            fixData = await prisma.investasi_Invoice.findMany({
-                orderBy: [
-                    {
-                        createdAt: "desc",
-                    },
-                ],
-                where: {
-                    investasiId: investasiId,
-                    isActive: true,
-                    statusInvoiceId: {
-                        contains: selectStatus ? selectStatus : "",
-                        mode: "insensitive",
-                    },
-                },
-                include: {
-                    Author: true,
-                    Images: true,
-                    StatusInvoice: true,
-                    MasterBank: true,
-                },
-            });
-
-        } else {
-            const data = await prisma.investasi_Invoice.findMany({
-                take: takeData,
-                skip: skipData,
-                orderBy: [
-                    {
-                        createdAt: "desc",
-                    },
-                ],
-                where: {
-                    investasiId: investasiId,
-                    isActive: true,
-                    statusInvoiceId: {
-                        contains: selectStatus ? selectStatus : "",
-                        mode: "insensitive",
-                    },
-                },
-                include: {
-                    Author: true,
-                    Images: true,
-                    StatusInvoice: true,
-                    MasterBank: true,
-                },
-            });
-
-            const nCount = await prisma.investasi_Invoice.count({
-                where: {
-                    investasiId: investasiId,
-                    isActive: true,
-                    statusInvoiceId: {
-                        contains: selectStatus ? selectStatus : "",
-                        mode: "insensitive",
-                    },
-                },
-            });
-
-            fixData = {
-                data: data,
-                nPage: _.ceil(nCount / takeData),
-            }
-        }
-        
-        return NextResponse.json({
-            success: true,
-            message: "Success get data all transaksi investasi dashboard",
-            data: fixData,
-        },
-            { status: 200 }
-        );
-    } catch (error) {
-        backendLogger.error("Error get data all transaksi investasi dashboard >>", error);
-        return NextResponse.json({
-            success: false,
-            message: "Error get data all transaksi investasi dashboard",
-            reason: (error as Error).message
-        },
-            { status: 500 }
-        )
-    }
-}

src/app/api/admin/investasi/[id]/transaksi/route.ts

@@ -3,103 +3,98 @@ import _ from "lodash";
 import { NextResponse } from "next/server";
 import prisma from "@/lib/prisma";
 
+export async function GET(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    let fixData;
+    const { id } = params;
+    const { searchParams } = new URL(request.url);
+    const page = searchParams.get("page");
+    const status = searchParams.get("status");
+    const takeData = 10
+    const skipData = Number(page) * takeData - takeData;
 
-export async function GET(request: Request, { params }: { params: { id: string } }) {
+    if (!page) {
-    try {
+      fixData = await prisma.investasi_Invoice.findMany({
-        let fixData
+        orderBy: {
-        const { id } = params;
+          createdAt: "desc",
-        const { searchParams } = new URL(request.url);
-        const page = searchParams.get("page");
-        const status = searchParams.get("status");
-        const takeData = 10;
-        const skipData = Number(page) * takeData - takeData;
-
-        if (!page) {
-
-            fixData = await prisma.investasi_Invoice.findMany({
-                orderBy: [
-                    {
-                        createdAt: "desc",
-                    },
-                ],
-                where: {
-                    investasiId: id,
-                    isActive: true,
-                },
-                include: {
-                    Author: true,
-                    Images: true,
-                    StatusInvoice: true,
-                    MasterBank: true,
-                },
-            });
-
-        } else {
-            const data = await prisma.investasi_Invoice.findMany({
-                take: takeData,
-                skip: skipData,
-                orderBy: [
-                    {
-                        createdAt: "desc",
-                    },
-                ],
-                where: {
-                    investasiId: id,
-                    isActive: true,
-                    StatusInvoice: {
-                        name: {
-                            contains: status ? status : "",
-                            mode: "insensitive",
-
-                        }
-                    }
-
-                },
-                include: {
-                    Author: true,
-                    Images: true,
-                    StatusInvoice: true,
-                    MasterBank: true,
-                },
-            });
-
-            const nCount = await prisma.investasi_Invoice.count({
-                where: {
-                    investasiId: id,
-                    isActive: true,
-                    StatusInvoice: {
-                        name: {
-                            contains: status ? status : "",
-                            mode: "insensitive",
-
-                        }
-                    }
-
-                },
-            });
-
-            fixData = {
-                data: data,
-                nPage: _.ceil(nCount / takeData),
-            };
-
-        }
-
-        return NextResponse.json({
-            success: true,
-            message: "Success get status transaksi",
-            data: fixData
         },
-            { status: 200 }
+        where: {
-        )
+          investasiId: id,
-    } catch (error) {
+          isActive: true,
-        backendLogger.error("Eror get status transaksi", error);
-        return NextResponse.json({
-            success: false,
-            message: "Error get status transaksi",
-            reason: (error as Error).message
         },
-            { status: 500 }
+        include: {
-        )
+          Author: true,
+          Images: true,
+          StatusInvoice: true,
+          MasterBank: true,
+        },
+      });
+    } else {
+      const fixStatus = _.startCase(status ? status : "");
+
+      const data = await prisma.investasi_Invoice.findMany({
+        take: takeData,
+        skip: skipData,
+        orderBy: {
+          createdAt: "desc",
+        },
+        where: {
+          investasiId: id,
+          isActive: true,
+          StatusInvoice: {
+            name: {
+              contains: fixStatus,
+              mode: "insensitive",
+            },
+          },
+        },
+        include: {
+          Author: true,
+          Images: true,
+          StatusInvoice: true,
+          MasterBank: true,
+        },
+      });
+
+      const nCount = await prisma.investasi_Invoice.count({
+        where: {
+          investasiId: id,
+          isActive: true,
+          StatusInvoice: {
+            name: {
+              contains: fixStatus,
+              mode: "insensitive",
+            },
+          },
+        },
+      });
+
+      fixData = {
+        data: data,
+        nPage: _.ceil(nCount / takeData),
+      };
     }
-}
+
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Success get status transaksi",
+        data: fixData,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    backendLogger.error("Eror get status transaksi", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Error get status transaksi",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}

src/app/api/admin/investasi/status/[name]/route.ts

@@ -2,133 +2,137 @@ import { prisma } from "@/lib";
 import _ from "lodash";
 import { NextResponse } from "next/server";
 
-export async function GET(request: Request, { params }: {
+export async function GET(
-    params: { name: string }
+  request: Request,
-}
+  {
+    params,
+  }: {
+    params: { name: string };
+  }
 ) {
-    const method = request.method;
+  const method = request.method;
-    if (method !== "GET") {
+  if (method !== "GET") {
-        return NextResponse.json({
+    return NextResponse.json(
-            success: false,
+      {
-            message: "Method not allowed",
+        success: false,
+        message: "Method not allowed",
+      },
+      { status: 405 }
+    );
+  }
+
+  const { name } = params;
+  const { searchParams } = new URL(request.url);
+  const search = searchParams.get("search");
+  const page = searchParams.get("page");
+  const takeData = 10;
+  const skipData = Number(page) * takeData - takeData;
+
+  try {
+    let fixData;
+    const fixStatus = _.startCase(name);
+
+    if (!page) {
+      fixData = await prisma.investasi.findMany({
+        orderBy: {
+          updatedAt: "desc",
         },
-            { status: 405 }
+        where: {
-        )
+          active: true,
+          MasterStatusInvestasi: {
+            name: fixStatus,
+          },
+          title: {
+            contains: search ? search : "",
+            mode: "insensitive",
+          },
+        },
+        include: {
+          MasterStatusInvestasi: true,
+          BeritaInvestasi: true,
+          DokumenInvestasi: true,
+          ProspektusInvestasi: true,
+          MasterPembagianDeviden: true,
+          MasterPencarianInvestor: true,
+          MasterPeriodeDeviden: true,
+          author: true,
+          Investasi_Invoice: {
+            where: {
+              statusInvoiceId: "2",
+            },
+          },
+        },
+      });
+    } else {
+      const data = await prisma.investasi.findMany({
+        take: takeData,
+        skip: skipData,
+        orderBy: {
+          updatedAt: "desc",
+        },
+        where: {
+          active: true,
+          MasterStatusInvestasi: {
+            name: fixStatus,
+          },
+          title: {
+            contains: search ? search : "",
+            mode: "insensitive",
+          },
+        },
+        include: {
+          MasterStatusInvestasi: true,
+          BeritaInvestasi: true,
+          DokumenInvestasi: true,
+          ProspektusInvestasi: true,
+          MasterPembagianDeviden: true,
+          MasterPencarianInvestor: true,
+          MasterPeriodeDeviden: true,
+          author: true,
+          Investasi_Invoice: {
+            where: {
+              statusInvoiceId: "2",
+            },
+          },
+        },
+      });
+
+      const nCount = await prisma.investasi.count({
+        where: {
+          active: true,
+          MasterStatusInvestasi: {
+            name: fixStatus,
+          },
+          title: {
+            contains: search ? search : "",
+            mode: "insensitive",
+          },
+        },
+      });
+
+      fixData = {
+        data: data,
+        nPage: _.ceil(nCount / takeData),
+      };
     }
 
-    const { name } = params;
+    return NextResponse.json(
-    const { searchParams } = new URL(request.url);
+      {
-    const search = searchParams.get("search");
+        success: true,
-    const page = searchParams.get("page");
+        message: "Success",
-    const takeData = 10
+        data: fixData,
-    const skipData = Number(page) * takeData - takeData;
+      },
-
+      { status: 200 }
-    try {
+    );
-        let fixData;
+  } catch (error) {
-        const fixStatus = _.startCase(name);
+    console.log(error);
-
+    return NextResponse.json(
-
+      {
-        if (!page) {
+        success: false,
-            fixData = await prisma.investasi.findMany({
+        message: "Failed",
-                orderBy: {
+        reason: (error as Error).message,
-                    updatedAt: "desc",
+      },
-                },
+      { status: 500 }
-                where: {
+    );
-                    active: true,
+  }
-                    MasterStatusInvestasi: {
+}
-                        name: fixStatus
-                    },
-                    title: {
-                        contains: search ? search : "",
-                        mode: "insensitive"
-                    }
-                },
-                include: {
-                    MasterStatusInvestasi: true,
-                    BeritaInvestasi: true,
-                    DokumenInvestasi: true,
-                    ProspektusInvestasi: true,
-                    MasterPembagianDeviden: true,
-                    MasterPencarianInvestor: true,
-                    MasterPeriodeDeviden: true,
-                    author: true,
-                    Investasi_Invoice: {
-                        where: {
-                            statusInvoiceId: "2",
-                        },
-                    },
-                },
-            });
-        } else {
-            const data = await prisma.investasi.findMany({
-                take: takeData,
-                skip: skipData,
-                orderBy: {
-                    updatedAt: "desc",
-                },
-                where: {
-                    active: true,
-                    MasterStatusInvestasi: {
-                        name: fixStatus
-                    },
-                    title: {
-                        contains: search ? search : "",
-                        mode: "insensitive"
-                    }
-                },
-                include: {
-                    MasterStatusInvestasi: true,
-                    BeritaInvestasi: true,
-                    DokumenInvestasi: true,
-                    ProspektusInvestasi: true,
-                    MasterPembagianDeviden: true,
-                    MasterPencarianInvestor: true,
-                    MasterPeriodeDeviden: true,
-                    author: true,
-                    Investasi_Invoice: {
-                        where: {
-                            statusInvoiceId: "2",
-                        },
-                    },
-                },
-            });
-
-            const nCount = await prisma.investasi.count({
-                where: {
-                    active: true,
-                    MasterStatusInvestasi: {
-                        name: fixStatus
-                    }
-
-                },
-            });
-
-            fixData = {
-                data: data,
-                nPage: _.ceil(nCount / takeData),
-            };
-
-        }
-
-        return NextResponse.json({
-            success: true,
-            message: "Success",
-            data: fixData,
-        },
-            { status: 200 }
-        )
-
-    } catch (error) {
-        console.log(error)
-        return NextResponse.json({
-            success: false,
-            message: "Failed",
-            reason: (error as Error).message,
-        },
-            { status: 500 }
-        )
-
-    }
-
-
-}

src/app/api/admin/vote/status/riwayat/route.ts

@@ -9,7 +9,7 @@ export async function GET(request: Request) {
     const { searchParams } = new URL(request.url);
     const search = searchParams.get("search");
     const page = searchParams.get("page");
-    const takeData = 2;
+    const takeData = 10;
     const skipData = Number(page) * takeData - takeData;
 
     if (!page) {

src/app_modules/_global/lib/index.ts

@@ -1,4 +1,4 @@
-import { globalStatusApp } from "./list_status_app";
+import { globalStatusApp } from "./master_list_app";
 import { MAX_SIZE } from "./max_size";
 
 export { MAX_SIZE };

src/app_modules/_global/lib/master_list_app.ts

@@ -1,3 +1,5 @@
+import statusTransaksi from "../../../../src/bin/seeder/master/master_status_transaksi.json"
+
 export const globalStatusApp = [
   {
     id: "1",
@@ -16,3 +18,5 @@ export const globalStatusApp = [
     name: "Reject",
   },
 ];
+
+export const globalStatusTransaksi = statusTransaksi;

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

@@ -1,110 +1,143 @@
+import { globalStatusTransaksi } from "@/app_modules/_global/lib/master_list_app";
+
 export {
-    apiGetAdminInvestasiCountDashboard,
+  apiGetAdminInvestasiCountDashboard,
-    apiGetAdminInvestasiByStatus,
+  apiGetAdminInvestasiByStatus,
-    apiGetAdminInvestasiById,
+  apiGetAdminInvestasiById,
-    apiGetAdminAllTransaksiById,
+  apiGetAdminAllTransaksiById,
-    apiGetAdminStatusTransaksi
+  apiGetAdminStatusTransaksi,
-    
+};
-}
+const apiGetAdminInvestasiCountDashboard = async ({
-const apiGetAdminInvestasiCountDashboard = async ({ name }:
+  name,
-    { name: "Publish" | "Review" | "Reject" }) => {
+}: {
-    
+  name: "Publish" | "Review" | "Reject";
+}) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
 
-    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  const response = await fetch(`/api/admin/investasi/dashboard/${name}`, {
-    if (!token) return await token.json().catch(() => null);
+    method: "GET",
-   
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
 
-    const response = await fetch(`/api/admin/investasi/dashboard/${name}`, {
+  return await response.json().catch(() => null);
-        method: "GET",
-        headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            "Access-Control-Allow-Origin": "*",
-            Authorization: `Bearer ${token}`,
-        },
-    })
-
-    return await response.json().catch(() => null);
 };
 
-const apiGetAdminInvestasiByStatus = async ({ name, page, search }: {
+const apiGetAdminInvestasiByStatus = async ({
-    name: "Publish" | "Review" | "Reject",
+  name,
-    page: string,
+  page,
-    search: string
+  search,
+}: {
+  name: "Publish" | "Review" | "Reject";
+  page: string;
+  search: string;
 }) => {
-    
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
+
+  const isPage = page ? `?page=${page}` : "";
+  const isSearch = search ? `&search=${search}` : "";
+  const response = await fetch(
+    `/api/admin/investasi/status/${name}${isPage}${isSearch}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        "Access-Control-Allow-Origin": "*",
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
+
+  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);
+
+  const response = await fetch(`/api/admin/investasi/${id}/detail`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return await response.json().catch(() => null);
+};
+
+const apiGetAdminAllTransaksiById = async ({
+  id,
+  page,
+  status,
+}: {
+  id: string;
+  page: string;
+  status?: string | undefined;
+}) => {
+  try {
+    // Fetch token from cookie
     const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-    if (!token) return await token.json().catch(() => null);
+    if (!token) {
-    
+      console.error("No token found");
-    
+      return null;
-
+    }
-    const isPage = page ? `?page=${page}` : "";
-    const isSearch = search ? `&search=${search}` : "";
-    const response = await fetch(`/api/admin/investasi/status/${name}${isPage}${isSearch}`, {
-        method: "GET",
-        headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            "Access-Control-Allow-Origin": "*",
-            Authorization: `Bearer ${token}`,
-        },
-    })
-    
-    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);
-
-    
-    const response = await fetch(`/api/admin/investasi/${id}/detail`, {
-        method: "GET",
-        headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            "Access-Control-Allow-Origin": "*",
-            Authorization: `Bearer ${token}`,
-        }
-    })
-
-    return await response.json().catch(() => null);
-}
-
-const apiGetAdminAllTransaksiById = async ({id, page, status} : {id: string, page: string, status?: string}) => {
-    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-    if (!token) return await token.json().catch(() => null);
 
+    // Fetch data
     const isStatus = status ? `&status=${status}` : "";
-
-    
     const isPage = page ? `?page=${page}` : "";
-    const response = await fetch(`/api/admin/investasi/${id}/transaksi${isPage}${isStatus}`, {
+    const response = await fetch(
+      `/api/admin/investasi/${id}/transaksi${isPage}${isStatus}`,
+      {
         method: "GET",
         headers: {
-            "Content-Type": "application/json",
+          "Content-Type": "application/json",
-            Accept: "application/json",
+          Accept: "application/json",
-            "Access-Control-Allow-Origin": "*",
+          "Access-Control-Allow-Origin": "*",
-            Authorization: `Bearer ${token}`,
+          Authorization: `Bearer ${token}`,
-        }
+        },
-    })
+      }
+    );
 
-    return await response.json().catch(() => null);
+    // Check if the response is OK
-}
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error(
+        "Error get data transaksi invetsasi",
+        errorData?.message || "Unknown error"
+      );
+      return null;
+    }
+
+    return response.json();
+  } catch (error) {
+    console.error("Error get data transaksi invetsasi", error);
+    throw error;
+  }
+};
 
 const apiGetAdminStatusTransaksi = async () => {
-    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-    if (!token) return await token.json().catch(() => null);
+  if (!token) return await token.json().catch(() => null);
 
-    const response = await fetch(`/api/master/status_transaksi`, {
+  const response = await fetch(`/api/master/status_transaksi`, {
-        method: "GET",
+    method: "GET",
-        headers: {
+    headers: {
-            "Content-Type": "application/json",
+      "Content-Type": "application/json",
-            Accept: "application/json",
+      Accept: "application/json",
-            "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Origin": "*",
-            Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${token}`,
-        }
+    },
-    })
+  });
-    
+
-    return await response.json().catch(() => null);
+  return await response.json().catch(() => null);
-}
+};

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

@@ -1,8 +1,16 @@
-import { ComponentAdminGlobal_TampilanRupiah, ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
+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,
@@ -15,32 +23,24 @@ import {
   Stack,
   Table,
   Text,
-  Title,
 } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { IconReload } from "@tabler/icons-react";
-import { isEmpty } from "lodash";
+import { useParams } from "next/navigation";
-import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import {
   AdminInvestasi_ComponentButtonBandingTransaksi,
   AdminInvestasi_ComponentButtonKonfirmasiTransaksi,
   AdminInvestasi_ComponentCekBuktiTransfer,
 } from "../../_component";
-import { adminInvestasi_funGetAllTransaksiById } from "../../fun";
+import { apiGetAdminAllTransaksiById } from "../../_lib/api_fetch_admin_investasi";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
-import { useShallowEffect } from "@mantine/hooks";
-import { apiGetAdminAllTransaksiById, apiGetAdminStatusTransaksi } from "../../_lib/api_fetch_admin_investasi";
-import { clientLogger } from "@/util/clientLogger";
-import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
-import { apiGetMasterStatusTransaksi } from "@/app_modules/_global/lib/api_fetch_master";
 
 export function AdminInvestasi_ViewDaftarTransaksi() {
   const params = useParams<{ id: string }>();
   const investasiId = params.id;
-  const router = useRouter();
+  const [listStatus, setListStatus] = useState<
-  const [isLoading, setLoading] = useState(false);
+    MODEL_STATUS_INVOICE_INVESTASI[] | null
-  const [idData, setIdData] = useState("");
+  >(null);
-  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);
@@ -48,25 +48,25 @@ export function AdminInvestasi_ViewDaftarTransaksi() {
   const [selectedStatus, setSelectedStatus] = useState("");
 
   useShallowEffect(() => {
-    loadInitialData();
+    handleLoadData();
-  }, [isActivePage, selectedStatus])
+  }, [isActivePage, selectedStatus]);
 
   useShallowEffect(() => {
-    loadStatus();
+    handleLoadStatus();
-  }, [])
+  }, []);
 
-  const loadInitialData = async () => {
+  const handleLoadData = async () => {
     try {
+      const cek = globalStatusTransaksi.find((e) => e.id === selectedStatus);
       const response = await apiGetAdminAllTransaksiById({
         id: investasiId,
-        page: `${isNPage}`,
+        page: `${isActivePage}`,
-        status: selectedStatus,
+        status: cek?.name,
-      })
+      });
 
       if (response?.success && response?.data?.data) {
         setData(response.data.data);
-        setNPage(response.nPage || 1);
+        setNPage(response.data.nPage || 1);
-        setListStatus(response.data.data);
       } else {
         console.error("Invalid data format received:", response);
         setData([]);
@@ -75,16 +75,14 @@ export function AdminInvestasi_ViewDaftarTransaksi() {
       clientLogger.error("Error get data daftar tramnsaksi", error);
       setData([]);
     }
-  }
+  };
 
-
+  const handleLoadStatus = async () => {
-  const loadStatus = async () => {
     try {
-      const response = await apiGetMasterStatusTransaksi()
+      const response = await apiGetMasterStatusTransaksi();
 
       if (response?.success && response?.data) {
         setListStatus(response.data);
-        console.log("status", response.data)
       } else {
         console.error("Invalid data format received:", response);
         setListStatus(null);
@@ -93,33 +91,19 @@ export function AdminInvestasi_ViewDaftarTransaksi() {
       clientLogger.error("Error get status transaksi", error);
       setListStatus(null);
     }
-  }
+  };
 
   const onPageClick = async (page: number) => {
-   const loadData = await apiGetAdminAllTransaksiById({
-     id: investasiId,
-     page: `${isNPage}`
-    })
     setActivePage(page);
-    setData(loadData.data as any);
+  };
-    setNPage(loadData.nPage);
-    
-  }
 
   async function onSelected(selectStatus: any) {
     setSelectedStatus(selectStatus);
-    // const loadData = await apiGetAdminStatusTransaksi();
-    // setData(loadData.data as any);
-    // setNPage(loadData.nPage);
   }
 
   async function onReload() {
-    const loadData = await apiGetAdminAllTransaksiById({
+    setSelectedStatus("");
-      id: investasiId,
+    handleLoadData();
-      page: '1'
-    });
-    setData(loadData.data as any);
-    setNPage(loadData.nPage);
   }
 
   const renderTableBody = () => {
@@ -149,14 +133,16 @@ export function AdminInvestasi_ViewDaftarTransaksi() {
         </td>
         <td>
           <Center c={AdminColor.white}>
-            {new Intl.NumberFormat("id-ID", { maximumFractionDigits: 10 }).format(
+            {new Intl.NumberFormat("id-ID", {
-              +e?.lembarTerbeli
+              maximumFractionDigits: 10,
-            )}
+            }).format(+e?.lembarTerbeli)}
           </Center>
         </td>
         <td>
           <Center c={AdminColor.white}>
-            {new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(new Date(e?.createdAt))}
+            {new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(
+              new Date(e?.createdAt)
+            )}
           </Center>
         </td>
         <td>
@@ -202,7 +188,6 @@ export function AdminInvestasi_ViewDaftarTransaksi() {
             {e.statusInvoiceId === "3" && "-"}
             {e.statusInvoiceId === "4" && (
               <AdminInvestasi_ComponentButtonBandingTransaksi
-
                 invoiceId={e.id}
                 investasiId={investasiId}
                 lembarTerbeli={e.lembarTerbeli}
@@ -216,7 +201,9 @@ export function AdminInvestasi_ViewDaftarTransaksi() {
         </td>
       </tr>
     ));
-  }
+  };
+
+  if (!data && !listStatus) return <CustomSkeleton height={"80vh"} />;
 
   return (
     <>
@@ -224,69 +211,38 @@ export function AdminInvestasi_ViewDaftarTransaksi() {
         <ComponentAdminGlobal_TitlePage
           name="Transkasi"
           color={AdminColor.softBlue}
-          component={<Group>
+          component={
-            <ActionIcon
+            <Group>
-              size={"lg"}
+              <ActionIcon
-              radius={"xl"}
+                size={"lg"}
-              variant="light"
+                radius={"xl"}
-              onClick={() => {
+                variant="light"
-                onReload();
+                onClick={() => {
-              }}
+                  onReload();
-            >
+                }}
-              <IconReload />
+              >
-            </ActionIcon>
+                <IconReload />
-            <Select
+              </ActionIcon>
-              placeholder="Pilih status"
+              <Select
-              value={selectedStatus}
+                placeholder="Pilih status"
-              data={listStatus?.map(status => ({
+                value={selectedStatus}
-                value: status.id,
+                data={
-                label: status.name,
+                  listStatus?.map((e, i) => ({
-                
+                    value: e.id,
-              })) || []}
+                    label: e.name,
-              onChange={(val: any) => {
+                  })) || []
-                console.log(val)
+                }
-                onSelected(val);
+                onChange={(val: any) => {
-              }}
+                  onSelected(val);
-            />
+                }}
-          </Group>}
+              />
+            </Group>
+          }
         />
-        {/* <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={() => {
-                onReload();
-              }}
-            >
-              <IconReload />
-            </ActionIcon>
-            <Select
-              placeholder="Pilih status"
-              value={selectedStatus}
-              data={
-                isEmpty(listStatsus)
-                  ? []
-                  : listStatsus.map((e) => ({
-                      value: e.id,
-                      label: e.name,
-                    }))
-              }
-              onChange={(val: any) => {
-                onSelected(val);
-              }}
-            />
-          </Group>
-        </Group> */}
 
-        {!data ? (<CustomSkeleton height={"80vh"} width={"100%"} />) : (
+        {!data ? (
+          <CustomSkeleton height={"80vh"} width={"100%"} />
+        ) : (
           <Paper bg={AdminColor.softBlue} p={"md"} shadow="lg" h={"80vh"}>
             <ScrollArea w={"100%"} h={"90%"}>
               <Table
@@ -342,4 +298,3 @@ export function AdminInvestasi_ViewDaftarTransaksi() {
     </>
   );
 }
-

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

@@ -15,7 +15,13 @@ import {
   TextInput,
   Title,
 } from "@mantine/core";
-import { IconDetails, IconEye, IconEyeCheck, IconInfoCircle, IconSearch } from "@tabler/icons-react";
+import {
+  IconDetails,
+  IconEye,
+  IconEyeCheck,
+  IconInfoCircle,
+  IconSearch,
+} from "@tabler/icons-react";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -24,7 +30,10 @@ import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data"
 import { adminInvestasi_funGetAllPublish } from "../fun/get/get_all_publish";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import { MainColor } from "@/app_modules/_global/color";
-import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  AccentColor,
+  AdminColor,
+} from "@/app_modules/_global/color/color_pallet";
 import { apiGetAdminInvestasiByStatus } from "../_lib/api_fetch_admin_investasi";
 import { useShallowEffect } from "@mantine/hooks";
 import { clientLogger } from "@/util/clientLogger";
@@ -35,7 +44,7 @@ export default function Admin_TablePublishInvestasi() {
     <>
       <Stack>
         <ComponentAdminGlobal_HeaderTamplate name="Investasi" />
-        <TableView  />
+        <TableView />
         {/* <pre>{JSON.stringify(listPublish, null, 2)}</pre> */}
       </Stack>
     </>
@@ -56,7 +65,7 @@ function TableView() {
     if (typeof window !== "undefined") {
       setOrigin(window.location.origin);
     }
-  }, [])
+  }, []);
 
   useShallowEffect(() => {
     const loadInitialData = async () => {
@@ -84,15 +93,14 @@ function TableView() {
   }, [activePage, isSearch]);
   const onSearch = async (searchTerm: string) => {
     setSearch(searchTerm);
-    setActivePage(1);
+  };
-  }
 
   const onPageClick = (page: number) => {
-    setActivePage(page)
+    setActivePage(page);
-  }
+  };
 
   const renderTableBody = () => {
-    if(!Array.isArray(data) || data.length === 0) {
+    if (!Array.isArray(data) || data.length === 0) {
       return (
         <tr>
           <td colSpan={12}>
@@ -107,16 +115,22 @@ function TableView() {
       <tr key={i}>
         <td>
           <Center w={200}>
-            <Text c={AccentColor.white} lineClamp={1}>{e.author.username}</Text>
+            <Text c={AccentColor.white} lineClamp={1}>
+              {e.author.username}
+            </Text>
           </Center>
         </td>
         <td>
           <Center w={400}>
-            <Text c={AccentColor.white} lineClamp={1}>{e.title}</Text>
+            <Text c={AccentColor.white} lineClamp={1}>
+              {e.title}
+            </Text>
           </Center>
         </td>
         <td>
-          <Center c={AccentColor.white} w={200}>{_.toNumber(e.progress).toFixed(2)} %</Center>
+          <Center c={AccentColor.white} w={200}>
+            {_.toNumber(e.progress).toFixed(2)} %
+          </Center>
         </td>
         <td>
           <Center c={AccentColor.white} w={200}>
@@ -134,7 +148,9 @@ function TableView() {
         </td>
         <td>
           <Center w={200}>
-            <Text c={AccentColor.white} lineClamp={1}>{e.Investasi_Invoice.length}</Text>
+            <Text c={AccentColor.white} lineClamp={1}>
+              {e.Investasi_Invoice.length}
+            </Text>
           </Center>
         </td>
         <td>
@@ -158,8 +174,7 @@ function TableView() {
         </td>
       </tr>
     ));
-  }
+  };
-  
 
   return (
     <>
@@ -208,31 +223,43 @@ function TableView() {
                 p={"md"}
                 w={"100%"}
                 h={"100%"}
-
-
               >
                 <thead>
                   <tr>
                     <th>
-                      <Center c={AccentColor.white} w={200}>Username</Center>
+                      <Center c={AccentColor.white} w={200}>
+                        Username
+                      </Center>
                     </th>
                     <th>
-                      <Center c={AccentColor.white} w={400}>Nama Proyek</Center>
+                      <Center c={AccentColor.white} w={400}>
+                        Nama Proyek
+                      </Center>
                     </th>
                     <th>
-                      <Center c={AccentColor.white} w={200}>Progres</Center>
+                      <Center c={AccentColor.white} w={200}>
+                        Progres
+                      </Center>
                     </th>
                     <th>
-                      <Center c={AccentColor.white} w={200}>Sisa Saham</Center>
+                      <Center c={AccentColor.white} w={200}>
+                        Sisa Saham
+                      </Center>
                     </th>
                     <th>
-                      <Center c={AccentColor.white} w={200}>Total Saham</Center>
+                      <Center c={AccentColor.white} w={200}>
+                        Total Saham
+                      </Center>
                     </th>
                     <th>
-                      <Center c={AccentColor.white} w={200}>Validasi</Center>
+                      <Center c={AccentColor.white} w={200}>
+                        Validasi
+                      </Center>
                     </th>
                     <th>
-                      <Center c={AccentColor.white} w={200}>Aksi</Center>
+                      <Center c={AccentColor.white} w={200}>
+                        Aksi
+                      </Center>
                     </th>
                   </tr>
                 </thead>