fix responsive admin collaboration

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

@@ -1,5 +1,4 @@
 import { AdminColab_TablePublish } from "@/app_modules/admin/colab";
-import adminColab_getListAllPublish from "@/app_modules/admin/colab/fun/get/get_list_all_publish";
 
 export default async function Page() {
   return (

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

@@ -1,5 +1,4 @@
 import { AdminColab_TableRejected } from "@/app_modules/admin/colab";
-import adminColab_getListAllRejected from "@/app_modules/admin/colab/fun/get/get_list_all_reject";
 
 export default async function Page() {
     

src/app_modules/admin/_components_v3/comp_detail_data.tsx

@@ -1,16 +1,22 @@
 import { MainColor } from "@/app_modules/_global/color";
 import { Grid, Text } from "@mantine/core";
 
-export function Admin_V3_ComponentDetail({ item }: { item: Record<string, any> }) {
+export function Admin_V3_ComponentDetail({
+  item,
+}: {
+  item: Record<string, any>;
+}) {
   return (
     <>
       <Grid m={0} bg={MainColor.soft_darkblue}>
         <Grid.Col lg={3} md={3} sm={3} xs={3} span={4}>
-          <Text fw={"bold"}>{item.title}</Text>
+          <Text fw={"bold"}>{item.title || item.label}</Text>
         </Grid.Col>
 
         <Grid.Col span={"auto"}>
-          <Text>{item.value}</Text>
+          <Text>
+            {item.value} 
+          </Text>
         </Grid.Col>
       </Grid>
     </>

src/app_modules/admin/_components_v3/comp_simple_grid_breakpoint.tsx

@@ -2,13 +2,15 @@ import { SimpleGrid } from "@mantine/core";
 
 export function Admin_V3_ComponentBreakpoint({
   children,
+  cols
 }: {
   children: React.ReactNode;
+  cols?: number;
 }) {
   return (
     <>
       <SimpleGrid
-        cols={2}
+        cols={cols || 2}
         breakpoints={[
           { maxWidth: "sm", cols: 1 },
           { maxWidth: "md", cols: 1 },

src/app_modules/admin/_components_v3/comp_skeleton_breakpoint.tsx

@@ -1,7 +1,11 @@
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { SimpleGrid } from "@mantine/core";
 
-export function Admin_V3_ComponentSkeletonBreakpoint() {
+export function Admin_V3_ComponentSkeletonBreakpoint({
+  skeletonRequest,
+}: {
+  skeletonRequest?: number;
+}) {
   return (
     <>
       <SimpleGrid
@@ -12,7 +16,9 @@ export function Admin_V3_ComponentSkeletonBreakpoint() {
           { maxWidth: "lg", cols: 1 },
         ]}
       >
-        <CustomSkeleton height={500} width={"100%"} />
+        {Array.from({ length: skeletonRequest || 1 }, (_, index) => (
+          <CustomSkeleton key={index} height={500} width={"100%"} />
+        ))}
       </SimpleGrid>
     </>
   );

src/app_modules/admin/colab/detail/detail_group.tsx

@@ -22,6 +22,9 @@ import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamp
 import { apiGetAdminCollaborationGroupById } from "../lib/api_fetch_admin_collaboration";
 import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
 import { IconCaretRight } from "@tabler/icons-react";
+import { Admin_V3_ComponentSkeletonBreakpoint } from "../../_components_v3/comp_skeleton_breakpoint";
+import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
+import { Admin_V3_ComponentDetail } from "../../_components_v3/comp_detail_data";
 
 function DetailGroup() {
   const params = useParams<{ id: string }>();
@@ -84,11 +87,10 @@ function DetailGroup() {
       <ComponentAdminGlobal_HeaderTamplate name={`Detail group`} />
       <AdminGlobal_ComponentBackButton />
 
-      <Grid>
-        <Grid.Col span={6}>
       {!data ? (
-            <CustomSkeleton height={"50vh"} width={"100%"} />
+        <Admin_V3_ComponentSkeletonBreakpoint skeletonRequest={2} />
       ) : (
+        <Admin_V3_ComponentBreakpoint>
           <Admin_ComponentBoxStyle
             style={{
               height: 500,
@@ -97,17 +99,7 @@ function DetailGroup() {
             <ScrollArea h={450} scrollbarSize={"md"}>
               <Stack spacing={"xs"}>
                 {listData.map((e, i) => (
-                    <Grid c={"white"} key={i}>
+                  <Admin_V3_ComponentDetail key={i} item={e}/>
-                      <Grid.Col span={4}>
-                        <Text c={AdminColor.white} fw={"bold"}>
-                          {e.label}
-                        </Text>
-                      </Grid.Col>
-                      <Grid.Col span={1}>:</Grid.Col>
-                      <Grid.Col span={"auto"}>
-                        <Text c={AdminColor.white}>{e.value}</Text>
-                      </Grid.Col>
-                    </Grid>
                 ))}
 
                 {/* <Group position="center">
@@ -127,13 +119,7 @@ function DetailGroup() {
               </Stack>
             </ScrollArea>
           </Admin_ComponentBoxStyle>
-          )}
-        </Grid.Col>
 
-        <Grid.Col span={6}>
-          {!data ? (
-            <CustomSkeleton height={"50vh"} width={"100%"} />
-          ) : (
           <Admin_ComponentBoxStyle
             style={{
               height: 500,
@@ -151,13 +137,17 @@ function DetailGroup() {
 
                     <Stack spacing={0} w={"70%"}>
                       <Grid>
-                          <Grid.Col span={3} fw={"bold"}>Username</Grid.Col>
+                        <Grid.Col span={3} fw={"bold"}>
+                          Username
+                        </Grid.Col>
                         <Grid.Col span={1}>:</Grid.Col>
                         <Grid.Col span={8}>{e.User.username}</Grid.Col>
                       </Grid>
 
                       <Grid>
-                          <Grid.Col span={3} fw={"bold"}>Name</Grid.Col>
+                        <Grid.Col span={3} fw={"bold"}>
+                          Name
+                        </Grid.Col>
                         <Grid.Col span={1}>:</Grid.Col>
                         <Grid.Col span={8}>{e.User.Profile.name}</Grid.Col>
                       </Grid>
@@ -167,9 +157,8 @@ function DetailGroup() {
               </ScrollArea>
             </Stack>
           </Admin_ComponentBoxStyle>
+        </Admin_V3_ComponentBreakpoint>
       )}
-        </Grid.Col>
-      </Grid>
     </Stack>
   );
 }

src/app_modules/admin/colab/detail/detail_publish.tsx

@@ -1,10 +1,12 @@
 "use client";
 
-import React, { useState } from "react";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
-import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { clientLogger } from "@/util/clientLogger";
 import {
   Button,
-  Flex,
   Grid,
   Group,
   Modal,
@@ -13,20 +15,19 @@ import {
   Stack,
   Text,
   Textarea,
-  Title,
 } from "@mantine/core";
-import { useParams, useRouter } from "next/navigation";
-import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
 import { useShallowEffect } from "@mantine/hooks";
-import { clientLogger } from "@/util/clientLogger";
-import { apiGetAdminCollaborationById } from "../lib/api_fetch_admin_collaboration";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
-import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 import { IconCheck, IconFlag2Off } from "@tabler/icons-react";
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
+import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
+import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
 import adminColab_funReportProjectById from "../fun/edit/fun_report_project_by_id";
-import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
+import { apiGetAdminCollaborationById } from "../lib/api_fetch_admin_collaboration";
+import { Admin_V3_ComponentSkeletonBreakpoint } from "../../_components_v3/comp_skeleton_breakpoint";
+import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
+import { Admin_V3_ComponentDetail } from "../../_components_v3/comp_detail_data";
 
 function DetailPublish() {
   const router = useRouter();
@@ -57,7 +58,7 @@ function DetailPublish() {
 
   async function onReject() {
     try {
-      setLoading(true)
+      setLoading(true);
       const response = await adminColab_funReportProjectById({
         colabId: params.id,
         report: report,
@@ -111,25 +112,14 @@ function DetailPublish() {
         <ComponentAdminGlobal_HeaderTamplate name={`Detail publish`} />
         <AdminGlobal_ComponentBackButton />
 
-
-        <SimpleGrid cols={2}>
         {!data ? (
-            <CustomSkeleton height={"50vh"} width={"100%"} />
+          <Admin_V3_ComponentSkeletonBreakpoint />
         ) : (
+          <Admin_V3_ComponentBreakpoint >
             <Admin_ComponentBoxStyle>
-              <Stack spacing={"xs"}>
+              <Stack >
                 {listData.map((e, i) => (
-                  <Grid c={"white"} key={i}>
+                  <Admin_V3_ComponentDetail key={i} item={e}/>
-                    <Grid.Col span={4}>
-                      <Text c={AdminColor.white} fw={"bold"}>
-                        {e.label}
-                      </Text>
-                    </Grid.Col>
-                    <Grid.Col span={1}>:</Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <Text c={AdminColor.white}>{e.value}</Text>
-                    </Grid.Col>
-                  </Grid>
                 ))}
 
                 <Group position="center">
@@ -148,8 +138,8 @@ function DetailPublish() {
                 </Group>
               </Stack>
             </Admin_ComponentBoxStyle>
+          </Admin_V3_ComponentBreakpoint>
         )}
-        </SimpleGrid>
       </Stack>
 
       {/* Reject Project */}

src/app_modules/admin/colab/detail/detail_reject.tsx

@@ -27,6 +27,9 @@ import { IconCheck, IconFlag2Off } from "@tabler/icons-react";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
 import adminColab_funReportProjectById from "../fun/edit/fun_report_project_by_id";
 import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
+import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
+import { Admin_V3_ComponentSkeletonBreakpoint } from "../../_components_v3/comp_skeleton_breakpoint";
+import { Admin_V3_ComponentDetail } from "../../_components_v3/comp_detail_data";
 
 function DetailReject() {
   const router = useRouter();
@@ -55,24 +58,24 @@ function DetailReject() {
     }
   };
 
-//   async function onReject() {
+  //   async function onReject() {
-//     try {
+  //     try {
-//       setLoading(true);
+  //       setLoading(true);
-//       const response = await adminColab_funReportProjectById({
+  //       const response = await adminColab_funReportProjectById({
-//         colabId: params.id,
+  //         colabId: params.id,
-//         report: report,
+  //         report: report,
-//       });
+  //       });
 
-//       if (response.status == 200) {
+  //       if (response.status == 200) {
-//         setLoading(false);
+  //         setLoading(false);
-//         router.back();
+  //         router.back();
-//       }
+  //       }
-//     } catch (error) {
+  //     } catch (error) {
-//       setLoading(false);
+  //       setLoading(false);
-//       ComponentGlobal_NotifikasiPeringatan("Gagal Load");
+  //       ComponentGlobal_NotifikasiPeringatan("Gagal Load");
-//       clientLogger.error("Invalid report collaboration", error);
+  //       clientLogger.error("Invalid report collaboration", error);
-//     }
+  //     }
-//   }
+  //   }
 
   const listData = [
     {
@@ -115,30 +118,19 @@ function DetailReject() {
         <ComponentAdminGlobal_HeaderTamplate name={`Detail reject`} />
         <AdminGlobal_ComponentBackButton />
 
-        <SimpleGrid cols={2}>
         {!data ? (
-            <CustomSkeleton height={"50vh"} width={"100%"} />
+          <Admin_V3_ComponentSkeletonBreakpoint />
         ) : (
+          <Admin_V3_ComponentBreakpoint cols={1}>
             <Admin_ComponentBoxStyle>
               <Stack spacing={"xs"}>
                 {listData.map((e, i) => (
-                  <Grid c={"white"} key={i}>
+                 <Admin_V3_ComponentDetail key={i} item={e}/>
-                    <Grid.Col span={4}>
-                      <Text c={AdminColor.white} fw={"bold"}>
-                        {e.label}
-                      </Text>
-                    </Grid.Col>
-                    <Grid.Col span={1}>:</Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <Text c={AdminColor.white}>{e.value}</Text>
-                    </Grid.Col>
-                  </Grid>
                 ))}
-
               </Stack>
             </Admin_ComponentBoxStyle>
+          </Admin_V3_ComponentBreakpoint>
         )}
-        </SimpleGrid>
       </Stack>
     </>
   );

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

@@ -1,38 +1,30 @@
 "use client";
 
-import {
-  Stack,
-  Group,
-  Title,
-  Paper,
-  ScrollArea,
-  Table,
-  Center,
-  Text,
-  Badge,
-  Spoiler,
-  Pagination,
-  Button,
-  Modal,
-  SimpleGrid,
-  Box,
-} from "@mantine/core";
-import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
-import {
-  MODEL_COLLABORATION,
-  MODEL_COLLABORATION_ROOM_CHAT,
-} from "@/app_modules/colab/model/interface";
-import { IconBan, IconCircleDot, IconEye } from "@tabler/icons-react";
-import { useState } from "react";
-import adminColab_getOneByColabId from "../fun/get/get_one_by_colab_id";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import ComponentAdminColab_DetailData from "../component/detail_data";
-import adminColab_getOneRoomChatById from "../fun/get/get_one_room_chat_by_id";
-import adminColab_getListAllGroupChat from "../fun/get/get_list_all_group_chat";
-import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import { AccentColor } from "@/app_modules/_global/color";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { MODEL_COLLABORATION_ROOM_CHAT } from "@/app_modules/colab/model/interface";
+import {
+  Box,
+  Center,
+  Modal,
+  Paper,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Table,
+  Text,
+  Title
+} from "@mantine/core";
+import { IconCircleDot } from "@tabler/icons-react";
+import { useState } from "react";
+import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import Admin_DetailButton from "../../_admin_global/_component/button/detail_button";
+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";
 
 export default function AdminColab_TableGroup({
   listGroup,
@@ -84,31 +76,31 @@ function TableMenu({ listGroup }: { listGroup: any }) {
   }
 
   const tableRow = data.map((e, i) => (
-    <tr key={i}>
+    <tr key={i} style={{ color: AdminColor.white }}>
-      <td>
+      {/* <td>
         <Center c={AdminColor.white}>{noAwal++}</Center>
-      </td>
+      </td> */}
       <td>
-        <Center c={AdminColor.white}>
+        <Box w={150}>
           <Text lineClamp={1}>
             {e?.ProjectCollaboration?.Author?.Profile?.name}
           </Text>
-        </Center>
+        </Box>
       </td>
       <td>
-        <Center c={AdminColor.white}>
+        <Box w={150}>
           <Text lineClamp={1}>{e?.name}</Text>
-        </Center>
+        </Box>
       </td>
       <td>
-        <Center c={AdminColor.white}>
+        <Box w={150}>
           <Text>
             {e?.ProjectCollaboration?.ProjectCollaborationMaster_Industri?.name}
           </Text>
-        </Center>
+        </Box>
       </td>
       <td>
-        <Center c={AdminColor.white}>
+        <Center>
           <Text>{e?.ProjectCollaboration_AnggotaRoomChat.length}</Text>
         </Center>
       </td>
@@ -118,36 +110,6 @@ function TableMenu({ listGroup }: { listGroup: any }) {
             <Admin_DetailButton
               path={`/dev/admin/colab/detail/group/${e.id}`}
             />
-
-            {/* <Button
-              loading={
-                idProject === e?.id ? (loadingDetail ? true : false) : false
-              }
-              leftIcon={<IconEye />}
-              loaderPosition="center"
-              radius={"xl"}
-              color="green"
-              onClick={() => {
-                onDetailData(e?.id);
-              }}
-            >
-              Detail 1
-            </Button> */}
-
-            {/* <Button
-              // loading={
-              //   idProject === e?.id ? (loadingReject ? true : false) : false
-              // }
-              leftIcon={<IconBan />}
-              loaderPosition="center"
-              radius={"xl"}
-              color="red"
-              // onClick={() => {
-              //   onRejected(e.id);
-              // }}
-            >
-              Reject
-            </Button> */}
           </Stack>
         </Center>
       </td>
@@ -168,17 +130,17 @@ function TableMenu({ listGroup }: { listGroup: any }) {
               <Table verticalSpacing={"xs"} horizontalSpacing={"md"} p={"md"}>
                 <thead>
                   <tr>
-                    <th>
+                    {/* <th>
                       <Center c={AdminColor.white}>No</Center>
+                    </th> */}
+                    <th>
+                      <Text c={AdminColor.white}>Admin Room</Text>
                     </th>
                     <th>
-                      <Center c={AdminColor.white}>Admin Room</Center>
+                      <Text c={AdminColor.white}>Nama Group</Text>
                     </th>
                     <th>
-                      <Center c={AdminColor.white}>Nama Group</Center>
+                      <Text c={AdminColor.white}>Industri</Text>
-                    </th>
-                    <th>
-                      <Center c={AdminColor.white}>Industri</Center>
                     </th>
                     <th>
                       <Center c={AdminColor.white}>Anggota Group</Center>
@@ -191,8 +153,7 @@ function TableMenu({ listGroup }: { listGroup: any }) {
                 <tbody>{tableRow}</tbody>
               </Table>
             </ScrollArea>
-            <Pagination
+            <Admin_V3_ComponentPaginationBreakpoint
-              position="center"
               total={isNPage}
               value={activePage}
               onChange={(val) => {
@@ -246,7 +207,6 @@ function TableMenu({ listGroup }: { listGroup: any }) {
           </Paper>
         </SimpleGrid>
       </Modal>
-      {/* <pre>{JSON.stringify(detailData, null, 2)}</pre> */}
     </>
   );
 }

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

@@ -1,42 +1,31 @@
 "use client";
 
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
 import {
-  Stack,
+  Box,
+  Button,
+  Center,
   Group,
-  Title,
+  Pagination,
   Paper,
   ScrollArea,
+  Stack,
   Table,
-  Center,
   Text,
-  Badge,
+  Title,
-  Spoiler,
-  Pagination,
-  Button,
-  Modal,
-  TextInput,
-  Textarea,
-  Box,
 } from "@mantine/core";
-import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import { useShallowEffect } from "@mantine/hooks";
-import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
+import { IconEye } from "@tabler/icons-react";
-import { useState } from "react";
-import { useDisclosure, useShallowEffect } from "@mantine/hooks";
-import adminColab_getListAllPublish from "../fun/get/get_list_all_publish";
-import ComponentAdminColab_DetailData from "../component/detail_data";
-import adminColab_getOneByColabId from "../fun/get/get_one_by_colab_id";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import _ from "lodash";
-import { IconBan, IconCheck, IconEye } from "@tabler/icons-react";
-import adminColab_funReportProjectById from "../fun/edit/fun_report_project_by_id";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
+import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
 
-import { clientLogger } from "@/util/clientLogger";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
-import { apiGetAdminCollaborationPublish } from "../lib/api_fetch_admin_collaboration";
 import { RouterAdminColab } from "@/lib/router_admin/router_admin_colab";
+import { clientLogger } from "@/util/clientLogger";
+import { apiGetAdminCollaborationPublish } from "../lib/api_fetch_admin_collaboration";
+import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
 
 export default function AdminColab_TablePublish() {
   return (
@@ -65,24 +54,24 @@ function TableMenu() {
     try {
       const response = await apiGetAdminCollaborationPublish({
         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([])
+        setData([]);
       }
     } catch (error) {
       clientLogger.error("Invalid data table publish", error);
       setData([]);
     }
-  }
+  };
 
   const onPageCLick = (page: number) => {
     setActivePage(page);
-  }
+  };
 
   const renderTableBody = () => {
     if (!Array.isArray(data) || data.length === 0) {
@@ -94,29 +83,32 @@ function TableMenu() {
             </Center>
           </td>
         </tr>
-      )
+      );
     }
 
     return data.map((e, i) => (
-      <tr key={i}>
+      <tr
+        key={i}
+        style={{
+          color: AdminColor.white,
+        }}
+      >
         <td>
-          <Center c={AdminColor.white}>
+          <Box w={150}>
-            <Text lineClamp={1}>{e?.Author?.Profile?.name}</Text>
+            <Text lineClamp={1}>
-          </Center>
+              {e?.Author?.username}
-        </td>
+            </Text>
-        <td>
-          <Center c={AdminColor.white}>
-            <Box>
-              <Center c={AdminColor.white}>
-                <Text lineClamp={1}>{e?.title}</Text>
-              </Center>
           </Box>
-          </Center>
         </td>
         <td>
-          <Center c={AdminColor.white}>
+          <Box w={150}>
+            <Text lineClamp={1}>{e?.title}</Text>
+          </Box>
+        </td>
+        <td>
+          <Box w={150}>
             <Text>{e?.ProjectCollaborationMaster_Industri.name}</Text>
-          </Center>
+          </Box>
         </td>
         <td>
           <Center c={AdminColor.white}>
@@ -143,7 +135,7 @@ function TableMenu() {
         </td>
       </tr>
     ));
-  }
+  };
 
   // async function onReport() {
   //   if (report === "")
@@ -184,25 +176,20 @@ function TableMenu() {
         {!data ? (
           <CustomSkeleton height={"80vh"} width={"100%"} />
         ) : (
-          <Paper p={"md"} bg={AdminColor.softBlue} >
+          <Paper p={"md"} bg={AdminColor.softBlue}>
             <Stack>
               <ScrollArea h={"65vh"}>
-                <Table
+                <Table verticalSpacing={"xs"} horizontalSpacing={"md"} p={"md"}>
-                  verticalSpacing={"xs"}
-                  horizontalSpacing={"md"}
-                  p={"md"}
-
-                >
                   <thead>
                     <tr>
                       <th>
-                        <Center c={AdminColor.white}>Username</Center>
+                        <Text c={AdminColor.white}>Username</Text>
                       </th>
                       <th>
-                        <Center c={AdminColor.white}>Title</Center>
+                        <Text c={AdminColor.white}>Title</Text>
                       </th>
                       <th>
-                        <Center c={AdminColor.white}>Industri</Center>
+                        <Text c={AdminColor.white}>Industri</Text>
                       </th>
                       <th>
                         <Center c={AdminColor.white}>Jumlah Partisipan</Center>
@@ -215,8 +202,7 @@ function TableMenu() {
                   <tbody>{renderTableBody()}</tbody>
                 </Table>
               </ScrollArea>
-              <Pagination
+              <Admin_V3_ComponentPaginationBreakpoint
-                position="center"
                 total={isNPage}
                 value={activePage}
                 onChange={(val) => {

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

@@ -1,31 +1,27 @@
 "use client";
 
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { clientLogger } from "@/util/clientLogger";
 import {
-  Stack,
+  Box,
+  Center,
   Group,
-  Title,
+  Pagination,
   Paper,
   ScrollArea,
+  Stack,
   Table,
-  Center,
   Text,
-  Badge,
+  Title,
-  Spoiler,
-  Box,
-  Pagination,
-  Button,
 } from "@mantine/core";
-import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
-import { useState } from "react";
-import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
-import adminColab_getListAllRejected from "../fun/get/get_list_all_reject";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
-import { clientLogger } from "@/util/clientLogger";
 import { useShallowEffect } from "@mantine/hooks";
-import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { useState } from "react";
-import { IconEye } from "@tabler/icons-react";
-import { apiGetAdminCollaborationReject } from "../lib/api_fetch_admin_collaboration";
 import Admin_DetailButton from "../../_admin_global/_component/button/detail_button";
+import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import { apiGetAdminCollaborationReject } from "../lib/api_fetch_admin_collaboration";
+import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
 
 export default function AdminColab_TableRejected() {
   return (
@@ -41,35 +37,32 @@ function TableMenu() {
   const [data, setData] = useState<MODEL_COLLABORATION[] | null>(null);
   const [isNPage, setNPage] = useState<number>(1);
   const [activePage, setActivePage] = useState(1);
-  const [loading, setLoading] = useState(false);
-  const [idData, setIdData] = useState("");
 
   useShallowEffect(() => {
-    loadInitialData()
+    loadInitialData();
-  }, [activePage])
+  }, [activePage]);
   const loadInitialData = async () => {
     try {
       const response = await apiGetAdminCollaborationReject({
         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([])
+        setData([]);
       }
-
     } catch (error) {
       clientLogger.error("Error get data table reject", error);
       setData([]);
     }
-  }
+  };
 
   const onPageClick = (page: number) => {
     setActivePage(page);
-  }
+  };
 
   const renderTableBody = () => {
     if (!Array.isArray(data) || data.length === 0) {
@@ -81,31 +74,27 @@ function TableMenu() {
             </Center>
           </td>
         </tr>
-      )
+      );
     }
 
     return data.map((e, i) => (
-      <tr key={i}>
+      <tr key={i} style={{ color: AdminColor.white }}>
         <td>
-          <Center c={AdminColor.white}>
+          <Box w={150}>
             <Text lineClamp={1}>{e?.Author.username}</Text>
-          </Center>
-        </td>
-
-        <td>
-          <Center c={AdminColor.white}>
-            <Box>
-              <Center c={AdminColor.white}>
-                <Text lineClamp={1}>{e?.title}</Text>
-              </Center>
           </Box>
-          </Center>
         </td>
 
         <td>
-          <Center c={AdminColor.white}>
+          <Box w={150} c={AdminColor.white}>
+            <Text lineClamp={1}>{e?.title}</Text>
+          </Box>
+        </td>
+
+        <td>
+          <Box w={150} c={AdminColor.white}>
             <Text>{e?.ProjectCollaborationMaster_Industri.name}</Text>
-          </Center>
+          </Box>
         </td>
 
         <td>
@@ -115,25 +104,14 @@ function TableMenu() {
         </td>
         <td>
           <Center>
-            {/* <Button
+            <Admin_DetailButton
-              loading={loading && e?.id == idData ? true : false}
+              path={`/dev/admin/colab/detail/reject/${e.id}`}
-              leftIcon={<IconEye />}
+            />
-              loaderPosition="center"
-              radius={"xl"}
-              color="green"
-              onClick={() => {
-                setLoading(true);
-                setIdData(e.id);
-              }}
-            >
-              Detail
-            </Button> */}
-            <Admin_DetailButton path={`/dev/admin/colab/detail/reject/${e.id}`} />
           </Center>
         </td>
-      </tr >
+      </tr>
     ));
-  }
+  };
   return (
     <>
       <Stack spacing={"xs"}>
@@ -143,7 +121,9 @@ function TableMenu() {
           p={"xs"}
           style={{ borderRadius: "6px" }}
         >
-          <Title c={AdminColor.white} order={4}>Reject</Title>
+          <Title c={AdminColor.white} order={4}>
+            Reject
+          </Title>
         </Group>
         {!data ? (
           <CustomSkeleton height={"80vh"} width={"100%"} />
@@ -151,22 +131,17 @@ function TableMenu() {
           <Paper p={"md"} bg={AdminColor.softBlue}>
             <Stack>
               <ScrollArea h={"65vh"}>
-                <Table
+                <Table verticalSpacing={"lg"} horizontalSpacing={"md"} p={"md"}>
-                  verticalSpacing={"lg"}
-                  horizontalSpacing={"md"}
-                  p={"md"}
-
-                >
                   <thead>
                     <tr>
                       <th>
-                        <Center c={AdminColor.white}>Username</Center>
+                        <Text c={AdminColor.white}>Username</Text>
                       </th>
                       <th>
-                        <Center c={AdminColor.white}>Title</Center>
+                        <Text c={AdminColor.white}>Title</Text>
                       </th>
                       <th>
-                        <Center c={AdminColor.white}>Industri</Center>
+                        <Text c={AdminColor.white}>Industri</Text>
                       </th>
                       <th>
                         <Center c={AdminColor.white}>Jumlah Partisipan</Center>
@@ -179,10 +154,9 @@ function TableMenu() {
                   <tbody>{renderTableBody()}</tbody>
                 </Table>
               </ScrollArea>
-              <Pagination
+              <Admin_V3_ComponentPaginationBreakpoint
-                position="center"
-                total={isNPage}
                 value={activePage}
+                total={isNPage}
                 onChange={(val) => {
                   onPageClick(val);
                 }}