API Table Investasi Admin

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

@@ -31,162 +31,186 @@ import { RouterAdminInvestasi } from "@/app/lib/router_admin/router_admin_invest
 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 { useShallowEffect } from "@mantine/hooks";
+import { clientLogger } from "@/util/clientLogger";
+import { apiGetAdminInvestasiByStatus } from "../_lib/api_fetch_admin_investasi";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export default function Admin_TableRejectInvestasi({
-  dataInvestsi,
-}: {
-  dataInvestsi: any[];
-}) {
-  const [investasi, setInvestasi] = useState(dataInvestsi);
-  const router = useRouter();
-
+export default function Admin_TableRejectInvestasi() {
   return (
     <>
       <Stack>
         <ComponentAdminGlobal_HeaderTamplate name="Investasi" />
-        <TableView listData={dataInvestsi} />
+        <TableView/>
       </Stack>
     </>
   );
 
-  const tableBody = investasi.map((e) =>
-    e.MasterStatusInvestasi.id === "4" ? (
-      <tr key={e.id}>
-        <td>
-          <Group position="left">
-            <Avatar variant="outline" radius={"xl"} />
-            <Text>{e.author.username}</Text>
-          </Group>
-        </td>
-        <td>{_.capitalize(e.title)}</td>
-        <td>{e.catatan}</td>
-        <td>
-          <Center>
-            <Tooltip label="Konfirmasi" withArrow position="bottom">
-              <ActionIcon
-                variant="transparent"
-                onClick={() =>
-                  router.push(RouterAdminInvestasi_OLD.konfirmasi + `${e.id}`)
-                }
-              >
-                <IconEdit color="green" />
-              </ActionIcon>
-            </Tooltip>
-          </Center>
-        </td>
-      </tr>
-    ) : (
-      ""
-    )
-  );
+  // const tableBody = investasi.map((e) =>
+  //   e.MasterStatusInvestasi.id === "4" ? (
+  //     <tr key={e.id}>
+  //       <td>
+  //         <Group position="left">
+  //           <Avatar variant="outline" radius={"xl"} />
+  //           <Text>{e.author.username}</Text>
+  //         </Group>
+  //       </td>
+  //       <td>{_.capitalize(e.title)}</td>
+  //       <td>{e.catatan}</td>
+  //       <td>
+  //         <Center>
+  //           <Tooltip label="Konfirmasi" withArrow position="bottom">
+  //             <ActionIcon
+  //               variant="transparent"
+  //               onClick={() =>
+  //                 router.push(RouterAdminInvestasi_OLD.konfirmasi + `${e.id}`)
+  //               }
+  //             >
+  //               <IconEdit color="green" />
+  //             </ActionIcon>
+  //           </Tooltip>
+  //         </Center>
+  //       </td>
+  //     </tr>
+  //   ) : (
+  //     ""
+  //   )
+  // );
 
-  return (
-    <>
-      <Stack>
-        <ActionIcon
-          variant="outline"
-          onClick={() => router.push(RouterAdminInvestasi_OLD.main_investasi)}
-        >
-          <IconChevronLeft />
-        </ActionIcon>
-        <Box>
-          <ScrollArea w={"100%"}>
-            <Badge color="red" variant="light" radius={0} size={"xl"}>
-              Reject
-            </Badge>
-            <Table
-              withBorder
-              highlightOnHover
-              verticalSpacing={"md"}
-              horizontalSpacing={"md"}
-            >
-              <thead>
-                <tr>
-                  <th>Username</th>
-                  <th>Nama Proyek Investasi</th>
-                  <th>Catatan</th>
-                  <th>
-                    <Center>Aksi</Center>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>{tableBody}</tbody>
-            </Table>
-          </ScrollArea>
-        </Box>
-      </Stack>
-    </>
-  );
+  // return (
+  //   <>
+  //     <Stack>
+  //       <ActionIcon
+  //         variant="outline"
+  //         onClick={() => router.push(RouterAdminInvestasi_OLD.main_investasi)}
+  //       >
+  //         <IconChevronLeft />
+  //       </ActionIcon>
+  //       <Box>
+  //         <ScrollArea w={"100%"}>
+  //           <Badge color="red" variant="light" radius={0} size={"xl"}>
+  //             Reject
+  //           </Badge>
+  //           <Table
+  //             withBorder
+  //             highlightOnHover
+  //             verticalSpacing={"md"}
+  //             horizontalSpacing={"md"}
+  //           >
+  //             <thead>
+  //               <tr>
+  //                 <th>Username</th>
+  //                 <th>Nama Proyek Investasi</th>
+  //                 <th>Catatan</th>
+  //                 <th>
+  //                   <Center>Aksi</Center>
+  //                 </th>
+  //               </tr>
+  //             </thead>
+  //             <tbody>{tableBody}</tbody>
+  //           </Table>
+  //         </ScrollArea>
+  //       </Box>
+  //     </Stack>
+  //   </>
+  // );
 }
 
-function TableView({ listData }: { listData: any }) {
+function TableView() {
   const router = useRouter();
-  const [data, setData] = useState<MODEL_INVESTASI[]>(listData.data);
-  const [nPage, setNPage] = useState(listData.nPage);
+  const [data, setData] = useState<MODEL_INVESTASI[] | null > (null);
+  const [nPage, setNPage] = useState(1);
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
   const [isLoading, setLoading] = useState(false);
   const [idData, setIdData] = useState("");
 
-  async function onSearch(s: string) {
-    setSearch(s);
+ 
+  useShallowEffect(() => {
+  const loadInitialData = async () => {
+   try {
+     const response = await apiGetAdminInvestasiByStatus({
+       status: "Reject",
+       page: `${activePage}`,
+       search: isSearch,
+     });
+
+     if (response?.success && response?.data.data) {
+       setData(response.data.data);
+       setNPage(response.data.nPage || 1);
+     } else {
+       console.error("Invalid data format recieved:", response);
+       setData([]);
+     }
+   } catch (error) {
+     clientLogger.error("Error get data reject", error);
+     setData([]);
+   }
+    }
+    loadInitialData();
+  }, [activePage, isSearch]);
+  const onSearch = async (searchTerm: string) => {
+    setSearch(searchTerm);
     setActivePage(1);
-    const loadData = await adminInvestasi_funGetAllReject({
-      page: 1,
-      search: s,
-    });
-    setData(loadData.data as any);
-    setNPage(loadData.nPage);
   }
 
-  async function onPageClick(p: any) {
-    setActivePage(p);
-    const loadData = await adminInvestasi_funGetAllReject({
-      search: isSearch,
-      page: p,
-    });
-    setData(loadData.data as any);
-    setNPage(loadData.nPage);
+  async function onPageClick(page: number) {
+    setActivePage(page);
   }
 
-  const tableBody = data.map((e) => (
-    <tr key={e.id}>
-      <td>
-        <Center w={200}>
-          <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>
-        </Center>
-      </td>
-      <td>
-        <Center w={400}>
-          <Text c={AccentColor.white} lineClamp={1}>{e.catatan}</Text>
-        </Center>
-      </td>
+  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 w={200}>
+            <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>
+          </Center>
+        </td>
+        <td>
+          <Center w={400}>
+            <Text c={AccentColor.white} lineClamp={1}>{e.catatan}</Text>
+          </Center>
+        </td>
+  
+        <td>
+          <Center w={200}>
+            <Button
+              loading={isLoading && idData === e.id}
+              loaderPosition="center"
+              color="green"
+              leftIcon={<IconEyeCheck size={20}/>}
+              radius={"xl"}
+              onClick={() => {
+                setIdData(e.id);
+                setLoading(true);
+                router.push(RouterAdminInvestasi.detail_reject + `${e.id}`);
+              }}
+            >
+              Detail
+            </Button>
+          </Center>
+        </td>
+      </tr>
+    ));
+  }
 
-      <td>
-        <Center w={200}>
-          <Button
-            loading={isLoading && idData === e.id}
-            loaderPosition="center"
-            color="green"
-            leftIcon={<IconEyeCheck size={20}/>}
-            radius={"xl"}
-            onClick={() => {
-              setIdData(e.id);
-              setLoading(true);
-              router.push(RouterAdminInvestasi.detail_reject + `${e.id}`);
-            }}
-          >
-            Detail
-          </Button>
-        </Center>
-      </td>
-    </tr>
-  ));
+  
 
   return (
     <>
@@ -224,8 +248,8 @@ function TableView({ listData }: { listData: any }) {
           />
         </Group> */}
 
-        {_.isEmpty(data) ? (
-          <ComponentAdminGlobal_IsEmptyData />
+        {!data ? (
+          <CustomSkeleton height={"80vh"} width="100%" />
         ) : (
           <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
             <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
@@ -253,7 +277,7 @@ function TableView({ listData }: { listData: any }) {
                     </th>
                   </tr>
                 </thead>
-                <tbody>{tableBody}</tbody>
+                <tbody>{renderTableBody()}</tbody>
               </Table>
             </ScrollArea>
             <Center mt={"xl"}>