fix list investor

src/app_modules/investasi/_component/detail/comp_box_investor.tsx

@@ -22,7 +22,9 @@ export function Investasi_ComponentBoxInvestor({ id }: { id: string }) {
         }}
         onClick={() => {
           setLoading(true);
-          router.push(NEW_RouterInvestasi.list_investor({id:id}))
+          router.push(NEW_RouterInvestasi.list_investor({ id: id }), {
+            scroll: false,
+          });
         }}
       >
         <Flex direction={"column"} align={"center"} justify={"center"}>

src/app_modules/investasi/_lib/api_fetch_new_investasi.ts

@@ -1,4 +1,8 @@
-export { apiFetchGetAllInvestasi, apiNewGetOneInvestasiById };
+export {
+  apiFetchGetAllInvestasi,
+  apiNewGetOneInvestasiById,
+  apiGetInvestorById,
+};
 
 const apiFetchGetAllInvestasi = async ({ page }: { page: string }) => {
   try {
@@ -43,7 +47,6 @@ const apiNewGetOneInvestasiById = async ({ id }: { id: string }) => {
       return null;
     }
 
-
     const response = await fetch(`/api/investasi/${id}`, {
       method: "GET",
       headers: {
@@ -67,3 +70,47 @@ const apiNewGetOneInvestasiById = async ({ id }: { id: string }) => {
     throw error; // Re-throw the error to handle it in the calling function
   }
 };
+
+const apiGetInvestorById = async ({
+  id,
+  page,
+}: {
+  id: string;
+  page: string;
+}) => {
+  try {
+    // Fetch token from cookie
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) {
+      console.error("No token found");
+      return null;
+    }
+
+    const nextPage = `?page=${page}`;
+    const response = await fetch(`/api/investasi/${id}/investor${nextPage}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    // Check if the response is OK
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error(
+        "Failed to get list investor",
+        response.statusText,
+        errorData
+      );
+      throw new Error(errorData?.message || "Failed to get list investor");
+    }
+
+    // Return the JSON response
+    return await response.json();
+  } catch (error) {
+    console.error("Error get list investor", error);
+    throw error; // Re-throw the error to handle it in the calling function
+  }
+};

src/app_modules/investasi/_ui/detail/ui_detail_main.tsx

@@ -55,7 +55,6 @@ export function Investasi_UiDetailMain({
       const response = await apiNewGetOneInvestasiById({ id: param.id });
 
       if (response.success) {
-        console.log(response.data);
         setData(response.data);
       } else {
         setData(null);

src/app_modules/investasi/_ui/detail/ui_list_investor.tsx

@@ -4,7 +4,6 @@ import {
   UIGlobal_LayoutHeaderTamplate,
   UIGlobal_LayoutTamplate,
 } from "@/app_modules/_global/ui";
-import { Stack } from "@mantine/core";
 import { Investasi_ViewListInvestor } from "../../_view/detail/view_list_investor";
 
 export function Investasi_UiListInvestor() {

src/app_modules/investasi/_view/detail/portofolio/view_detail_publish.tsx

@@ -40,8 +40,6 @@ export default function Investasi_ViewDetailPublish({
   userLoginId: string;
 }) {
   const router = useRouter();
-  const [boxId, setBoxId] = useState(0);
-  const [isLoadingBox, setLoadingBox] = useState(false);
   const [isLoadingButton, setLoadingButton] = useState(false);
   const [total, setTotal] = useLocalStorage({
     key: "total_investasi",

src/app_modules/investasi/_view/detail/view_list_investor.tsx

@@ -1,9 +1,91 @@
-"use client"
+"use client";
 
-import { Text } from "@mantine/core"
+import {
+  ComponentGlobal_AvatarAndUsername,
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_TampilanRupiah,
+} from "@/app_modules/_global/component";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Box, Center, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { apiGetInvestorById } from "../../_lib/api_fetch_new_investasi";
 
-export function Investasi_ViewListInvestor(){
-    return<>
-    <Text>ini list</Text>
+export function Investasi_ViewListInvestor() {
+  const param = useParams<{ id: string }>();
+  const investasiId = param.id;
+
+  const [data, setData] = useState<any | null>(null);
+  const [activePage, setActivePage] = useState(1);
+
+  useShallowEffect(() => {
+    handleGetListInvestor();
+  }, []);
+
+  const handleGetListInvestor = async () => {
+    try {
+      const response = await apiGetInvestorById({
+        id: investasiId,
+        page: String(activePage),
+      });
+
+      if (response) {
+        setData(response.data);
+      } else {
+        setData(null);
+      }
+    } catch (error) {
+      console.error("Error get list investor", error);
+      setData(null);
+    }
+  };
+
+  if (!data) return <CustomSkeleton height={100} width={"100%"} />;
+
+  return (
+    <>
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        <Box>
+          <ScrollOnly
+            height="85vh"
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader size={25} />
+              </Center>
+            )}
+            data={data}
+            setData={setData as any}
+            moreData={async () => {
+              const nextPage = activePage + 1;
+              const loadData = await apiGetInvestorById({
+                id: investasiId,
+                page: String(nextPage),
+              });
+              setActivePage(nextPage);
+              return loadData.data;
+            }}
+          >
+            {(item) => (
+              <ComponentGlobal_CardStyles key={item}>
+                <Stack>
+                  <ComponentGlobal_AvatarAndUsername profile={item.Profile} />
+                  <ComponentGlobal_TampilanRupiah
+                    nominal={item.nominal}
+                    fontSize={"lg"}
+                  />
+                </Stack>
+              </ComponentGlobal_CardStyles>
+            )}
+          </ScrollOnly>
+        </Box>
+      )}
     </>
-}
+  );
+}