fix: admin collaboration

deskripsi:
- fix: pengambilan data use server menjadi API

src/app/api/admin/collaboration/group/route.ts

@@ -4,11 +4,10 @@ import _ from "lodash";
 import { NextResponse } from "next/server";
 
 export async function GET(request: Request) {
-
   const { searchParams } = new URL(request.url);
   const search = searchParams.get("search");
   const page = searchParams.get("page");
-    const takeData = 10
+  const takeData = 1;
   const skipData = Number(page) * takeData - takeData;
 
   try {
@@ -117,23 +116,31 @@ export async function GET(request: Request) {
         where: {
           isActive: true,
         },
-            })
+      });
 
       fixData = {
         data: data,
-                nPage: _.ceil(nCount / takeData)
+        nPage: _.ceil(nCount / takeData),
-            }
+      };
     }
 
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Success get data collaboration group",
+        data: fixData,
+      },
+      { status: 200 }
+    );
   } catch (error) {
-
     backendLogger.error("Error get data collaboration group >>", error);
-        return NextResponse.json({
+    return NextResponse.json(
+      {
         success: false,
         message: "Error get data collaboration group",
-            reason: (error as Error).message
+        reason: (error as Error).message,
       },
       { status: 500 }
-        )
+    );
   }
 }

src/app/dev/admin/colab/sub-menu/group/page.tsx

@@ -6,7 +6,7 @@ export default async function Page() {
 
   return (
     <>
-      <AdminColab_TableGroup listGroup={listGroup as any}  />
+      <AdminColab_TableGroup  />
     </>
   );
 }

src/app_modules/admin/colab/lib/api_fetch_admin_collaboration.ts

@@ -71,7 +71,7 @@ const apiGetAdminCollaborationRoomById = async ({
   search,
 }: {
   page: string;
-  search: string;
+  search?: string;
 }) => {
   const { token } = await fetch("/api/get-cookie").then((res) => res.json());
   if (!token) return await token.json().catch(() => null);

src/app_modules/admin/colab/sub_menu/group.tsx

@@ -14,8 +14,9 @@ import {
   Stack,
   Table,
   Text,
-  Title
+  Title,
 } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { IconCircleDot } from "@tabler/icons-react";
 import { useState } from "react";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
@@ -23,28 +24,25 @@ import Admin_DetailButton from "../../_admin_global/_component/button/detail_but
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
 import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
 import ComponentAdminColab_DetailData from "../component/detail_data";
-import adminColab_getListAllGroupChat from "../fun/get/get_list_all_group_chat";
 import adminColab_getOneRoomChatById from "../fun/get/get_one_room_chat_by_id";
+import { apiGetAdminCollaborationRoomById } from "../lib/api_fetch_admin_collaboration";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export default function AdminColab_TableGroup({
+export default function AdminColab_TableGroup() {
-  listGroup,
-}: {
-  listGroup: any;
-}) {
   return (
     <>
       <Stack>
         <ComponentAdminGlobal_HeaderTamplate name="Project Collaboration" />
-        <TableMenu listGroup={listGroup} />
+        <TableMenu />
       </Stack>
     </>
   );
 }
-function TableMenu({ listGroup }: { listGroup: any }) {
+function TableMenu() {
-  const [data, setData] = useState<MODEL_COLLABORATION_ROOM_CHAT[]>(
+  const [data, setData] = useState<MODEL_COLLABORATION_ROOM_CHAT[] | null>(
-    listGroup.data
+    null
   );
-  const [isNPage, setNPage] = useState(listGroup.nPage);
+  const [isNPage, setNPage] = useState(1);
   const [activePage, setActivePage] = useState(1);
 
   const [idProject, setIdProject] = useState("");
@@ -52,14 +50,37 @@ function TableMenu({ listGroup }: { listGroup: any }) {
   const [loadingDetail, setLoadingDetail] = useState(false);
   const [detailData, setDetailData] = useState<MODEL_COLLABORATION_ROOM_CHAT>();
 
+  useShallowEffect(() => {
+    onLoadData();
+  }, [activePage]);
+
+  async function onLoadData() {
+    try {
+      const response = await apiGetAdminCollaborationRoomById({
+        page: `${activePage}`,
+      });
+
+      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) {
+      console.error("Error get data table reject", error);
+      setData([]);
+    }
+  }
+
   // PAGINATION dan No awal  data di tampilkan
   let noAwal = activePage * 5 - 4;
-  async function onLoad(pindahPage: any) {
+  // async function onLoad(pindahPage: any) {
-    const load = await adminColab_getListAllGroupChat({ page: pindahPage });
+  //   const load = await adminColab_getListAllGroupChat({ page: pindahPage });
-    setActivePage(pindahPage);
+  //   setActivePage(pindahPage);
-    setData(load.data as any);
+  //   setData(load.data as any);
-    setNPage(load.nPage);
+  //   setNPage(load.nPage);
-  }
+  // }
 
   async function onDetailData(roomId: string) {
     setLoadingDetail(true);
@@ -75,7 +96,20 @@ function TableMenu({ listGroup }: { listGroup: any }) {
     });
   }
 
-  const tableRow = data.map((e, i) => (
+  const tableRow = () => {
+    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} style={{ color: AdminColor.white }}>
         {/* <td>
         <Center c={AdminColor.white}>{noAwal++}</Center>
@@ -95,7 +129,10 @@ function TableMenu({ listGroup }: { listGroup: any }) {
         <td>
           <Box w={150}>
             <Text>
-            {e?.ProjectCollaboration?.ProjectCollaborationMaster_Industri?.name}
+              {
+                e?.ProjectCollaboration?.ProjectCollaborationMaster_Industri
+                  ?.name
+              }
             </Text>
           </Box>
         </td>
@@ -115,6 +152,7 @@ function TableMenu({ listGroup }: { listGroup: any }) {
         </td>
       </tr>
     ));
+  };
 
   return (
     <>
@@ -124,6 +162,10 @@ function TableMenu({ listGroup }: { listGroup: any }) {
           color={AdminColor.softBlue}
           component={<></>}
         />
+
+        {!data ? (
+          <CustomSkeleton height={"80vh"} width={"100%"} />
+        ) : (
           <Paper p={"md"} bg={AdminColor.softBlue}>
             <Stack>
               <ScrollArea h={"65vh"}>
@@ -150,18 +192,19 @@ function TableMenu({ listGroup }: { listGroup: any }) {
                       </th>
                     </tr>
                   </thead>
-                <tbody>{tableRow}</tbody>
+                  <tbody>{tableRow()}</tbody>
                 </Table>
               </ScrollArea>
               <Admin_V3_ComponentPaginationBreakpoint
                 total={isNPage}
                 value={activePage}
                 onChange={(val) => {
-                onLoad(val);
+                  setActivePage(val);
                 }}
               />
             </Stack>
           </Paper>
+        )}
       </Stack>
 
       <Modal