fix responsive admin job

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

@@ -1,113 +1,116 @@
 import { prisma } from "@/lib";
-import backendLogger from '@/util/backendLogger';
+import backendLogger from "@/util/backendLogger";
 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.job.findMany({
+        orderBy: {
+          updatedAt: "desc",
         },
-            { status: 405 }
+        where: {
-        )
+          isActive: true,
+          isArsip: false,
+          MasterStatus: {
+            name: fixStatus,
+          },
+          title: {
+            contains: search ? search : "",
+            mode: "insensitive",
+          },
+        },
+        include: {
+          Author: true,
+        },
+      });
+    } else {
+      const data = await prisma.job.findMany({
+        take: takeData,
+        skip: skipData,
+        orderBy: {
+          updatedAt: "desc",
+        },
+        where: {
+          isActive: true,
+          isArsip: false,
+          MasterStatus: {
+            name: fixStatus,
+          },
+          title: {
+            contains: search ? search : "",
+            mode: "insensitive",
+          },
+        },
+        include: {
+          Author: true,
+        },
+      });
+
+      const nCount = await prisma.job.count({
+        where: {
+          isActive: true,
+          isArsip: false,
+          MasterStatus: {
+            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: "Data found",
-    const takeData = 10
+        data: fixData,
-    const skipData = Number(page) * takeData - takeData;
+      },
-
+      { status: 200 }
-
+    );
-    try {
+  } catch (error) {
-        let fixData;
+    backendLogger.error("Eror get data", error);
-        const fixStatus = _.startCase(name);
+    return NextResponse.json(
-
+      {
-        if (!page) {
+        success: false,
-           fixData = await prisma.job.findMany({
+        message: "Data not found",
-                orderBy: {
+        reason: (error as Error).message,
-                    updatedAt: "desc"
+      },
-                },
+      { status: 500 }
-                where: {
+    );
-                    isActive: true,
+  }
-                    isArsip: false,
+}
-                    MasterStatus: {
-                        name: fixStatus
-                    },
-                    title: {
-                        contains: search ? search : "",
-                        mode: "insensitive"
-                    }
-
-                },
-                include: {
-                    Author: true,
-                },
-
-            })
-        } else {
-            const data = await prisma.job.findMany({
-                take: takeData,
-                skip: skipData,
-                orderBy: {
-                    updatedAt: "desc"
-                },
-                where: {
-                    isActive: true,
-                    isArsip: false,
-                    MasterStatus: {
-                        name: fixStatus
-                    },
-                    title: {
-                        contains: search ? search : "",
-                        mode: "insensitive"
-                    }
-                },
-                include: {
-                    Author: true,
-                },
-            })
-
-            const nCount = await prisma.job.count({
-                where: {
-                    isActive: true,
-                    isArsip: false,
-                    MasterStatus: {
-                        name: fixStatus
-                    },
-                    title: {
-                        contains: search ? search : "",
-                        mode: "insensitive"
-                    }
-                }
-            })
-
-            fixData = {
-                data: data,
-                nPage: _.ceil(nCount / takeData)
-            }   
-        }
-        return NextResponse.json({
-            success: true,
-            message: "Data found",
-            data: fixData,
-
-        },
-            { status: 200 }
-        )
-    } catch (error) {
-        backendLogger.error("Eror get data", error)
-        return NextResponse.json({
-            success: false,
-            message: "Data not found",
-            reason: (error as Error).message
-        },
-            { status: 500 }
-        )
-    }
-}

src/app_modules/_global/color/color_pallet.ts

@@ -1,12 +1,13 @@
 export const MainColor = {
   black: "#202020",
   darkblue: "#001D3D",
+  soft_darkblue: "#17406E",
   yellow: "#E1B525",
   white: "#D4D0D0",
   red: "#FF4B4C",
   orange: "#FF7043",
   green: "#4CAF4F",
-  login: "#EDEBEBFF"
+  login: "#EDEBEBFF",
 };
 
 export const AccentColor = {

src/app_modules/admin/_components_v3/comp_button_user_circle.tsx

@@ -149,7 +149,13 @@ export function Admin_V3_ComponentButtonUserCircle({
       <>
         <Popover opened={openPop} onChange={setOpenPop} position="bottom-end">
           <Popover.Target>
-            <div>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                flexWrap: "wrap",
+              }}
+            >
               <MediaQuery largerThan={"md"} styles={{ display: "none" }}>
                 <ActionIcon
                   disabled={!dataUser}
@@ -159,14 +165,20 @@ export function Admin_V3_ComponentButtonUserCircle({
                     setNavbarOpen(false);
                   }}
                 >
-                  <IconUserCircle color={dataUser ? "white" : "gray"} />
+                  <IconUserCircle
+                    color={dataUser ? "white" : "gray"}
+                    size={25}
+                  />
                 </ActionIcon>
               </MediaQuery>
 
               <MediaQuery smallerThan={"md"} styles={{ display: "none" }}>
                 <Group spacing={"xl"}>
                   <Group>
-                    <IconUser color={dataUser ? "white" : "gray"} size={25} />
+                    <IconUserCircle
+                      color={dataUser ? "white" : "gray"}
+                      size={25}
+                    />
                     <Text c="white" fz={"lg"} fw={500}>
                       {!dataUser?.username ? (
                         <CustomSkeleton height={16} width={100} radius={"xl"} />

src/app_modules/admin/_components_v3/comp_detail_data.tsx

@@ -0,0 +1,18 @@
+import { MainColor } from "@/app_modules/_global/color";
+import { Grid, Text } from "@mantine/core";
+
+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>
+        </Grid.Col>
+
+        <Grid.Col span={"auto"}>
+          <Text>{item.value}</Text>
+        </Grid.Col>
+      </Grid>
+    </>
+  );
+}

src/app_modules/admin/_components_v3/comp_pagination_breakpoint.tsx

@@ -0,0 +1,35 @@
+import { Pagination } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+
+export function Admin_V3_ComponentPaginationBreakpoint({
+  value,
+  total,
+  onChange,
+}: {
+  value: number;
+  total: number;
+  onChange: (val: number) => void;
+}) {
+  // Dalam komponen Anda
+  const isMobile = useMediaQuery("(max-width: 480px)");
+  const isTablet = useMediaQuery("(max-width: 768px)");
+
+  return (
+    <>
+      <Pagination
+      mt={"xs"}
+        value={value}
+        total={total}
+        onChange={(val) => {
+          onChange(val);
+        }}
+        position="center"
+        size={isMobile ? "xs" : isTablet ? "sm" : "md"}
+        radius={isMobile ? "xl" : "md"}
+        siblings={isMobile ? 0 : 1}
+        boundaries={isMobile ? 1 : 2}
+        withEdges
+      />
+    </>
+  );
+}

src/app_modules/admin/_components_v3/comp_simple_grid_breakpoint.tsx

@@ -0,0 +1,24 @@
+import { SimpleGrid } from "@mantine/core";
+
+export function Admin_V3_ComponentBreakpoint({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <SimpleGrid
+        cols={2}
+        breakpoints={[
+          { maxWidth: "sm", cols: 1 },
+          { maxWidth: "md", cols: 1 },
+          { maxWidth: "lg", cols: 1 },
+        ]}
+        spacing={"lg"}
+        verticalSpacing={"lg"}
+      >
+        {children}
+      </SimpleGrid>
+    </>
+  );
+}

src/app_modules/admin/_components_v3/comp_skeleton_breakpoint.tsx

@@ -0,0 +1,19 @@
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { SimpleGrid } from "@mantine/core";
+
+export function Admin_V3_ComponentSkeletonBreakpoint() {
+  return (
+    <>
+      <SimpleGrid
+        cols={2}
+        breakpoints={[
+          { maxWidth: "sm", cols: 1 },
+          { maxWidth: "md", cols: 1 },
+          { maxWidth: "lg", cols: 1 },
+        ]}
+      >
+        <CustomSkeleton height={500} width={"100%"} />
+      </SimpleGrid>
+    </>
+  );
+}

src/app_modules/admin/job/_components/detail/publish.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 import { Admin_ComponentBoxStyle } from "@/app_modules/admin/_admin_global/_component/comp_admin_boxstyle";
+import { Admin_V3_ComponentBreakpoint } from "@/app_modules/admin/_components_v3/comp_simple_grid_breakpoint";
 import { MODEL_JOB } from "@/app_modules/job/model/interface";
-import { APIs } from "@/lib";
+import { Badge, Grid, Stack, Text } from "@mantine/core";
-import { Badge, Center, Grid, Image, SimpleGrid, Text } from "@mantine/core";
-import { IconImageInPicture } from "@tabler/icons-react";
 import { useState } from "react";
 import { AdminJob_ComponentImageView } from "./image_view";
+import { MainColor } from "@/app_modules/_global/color";
+import { Admin_V3_ComponentDetail } from "@/app_modules/admin/_components_v3/comp_detail_data";
 
 export function AdminJob_DetailPublish({ data }: { data: MODEL_JOB }) {
   const [isLoading, setLoading] = useState(false);
@@ -32,37 +32,29 @@ export function AdminJob_DetailPublish({ data }: { data: MODEL_JOB }) {
 
     {
       title: "Konten",
-      value: <div dangerouslySetInnerHTML={{ __html: data.content }} />,
+      value: <div  dangerouslySetInnerHTML={{ __html: data.content }} />,
     },
     {
-      title: "Deskripsi",
+      title: "Deskripsi ",
       value: <div dangerouslySetInnerHTML={{ __html: data.deskripsi }} />,
     },
   ];
 
   return (
     <>
-      <SimpleGrid cols={2}>
+      <Admin_V3_ComponentBreakpoint>
         <Admin_ComponentBoxStyle>
-          {listData.map((item, index) => (
+          <Stack>
-            <Grid key={index}>
+            {listData.map((item, index) => (
-              <Grid.Col span={2}>
+              <Admin_V3_ComponentDetail key={index} item={item}/>
-                <Text>{item.title}</Text>
+            ))}
-              </Grid.Col>
+          </Stack>
-              <Grid.Col span={1}>
-                <Text>:</Text>
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Text>{item.value}</Text>
-              </Grid.Col>
-            </Grid>
-          ))}
         </Admin_ComponentBoxStyle>
 
-        {data.imageId && (
+        {data.imageId && <AdminJob_ComponentImageView imageId={data.imageId} />}
-         <AdminJob_ComponentImageView imageId={data.imageId}/>
+      </Admin_V3_ComponentBreakpoint>
-        )}
-      </SimpleGrid>
     </>
   );
 }
+
+

src/app_modules/admin/job/_components/detail/reject.tsx

@@ -25,6 +25,8 @@ import { useState } from "react";
 import { WibuRealtime } from "wibu-pkg";
 import { AdminJob_funEditCatatanById } from "../../fun/edit/fun_edit_catatan_by_id";
 import { AdminJob_ComponentImageView } from "./image_view";
+import { Admin_V3_ComponentBreakpoint } from "@/app_modules/admin/_components_v3/comp_simple_grid_breakpoint";
+import { Admin_V3_ComponentDetail } from "@/app_modules/admin/_components_v3/comp_detail_data";
 
 export function AdminJob_DetailReject({ data }: { data: MODEL_JOB }) {
   const [isLoading, setLoading] = useState(false);
@@ -95,21 +97,13 @@ export function AdminJob_DetailReject({ data }: { data: MODEL_JOB }) {
 
   return (
     <>
-      <SimpleGrid cols={2}>
+      <Admin_V3_ComponentBreakpoint>
         <Admin_ComponentBoxStyle>
-          {listData.map((item, index) => (
+          <Stack>
-            <Grid key={index}>
+            {listData.map((item, index) => (
-              <Grid.Col span={2}>
+              <Admin_V3_ComponentDetail key={index} item={item} />
-                <Text>{item.title}</Text>
+            ))}
-              </Grid.Col>
+          </Stack>
-              <Grid.Col span={1}>
-                <Text>:</Text>
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Text>{item.value}</Text>
-              </Grid.Col>
-            </Grid>
-          ))}
 
           <Group position="center" mt={"xl"}>
             <Button
@@ -129,7 +123,7 @@ export function AdminJob_DetailReject({ data }: { data: MODEL_JOB }) {
         {newData.imageId && (
           <AdminJob_ComponentImageView imageId={newData.imageId} />
         )}
-      </SimpleGrid>
+      </Admin_V3_ComponentBreakpoint>
 
       <Modal
         styles={{

src/app_modules/admin/job/_components/detail/review.tsx

@@ -28,6 +28,8 @@ import { AdminJob_funEditCatatanById } from "../../fun/edit/fun_edit_catatan_by_
 import { AdminJob_funEditStatusPublishById } from "../../fun/edit/fun_edit_status_publish_by_id";
 import { AdminJob_ComponentImageView } from "./image_view";
 import { useRouter } from "next/navigation";
+import { Admin_V3_ComponentBreakpoint } from "@/app_modules/admin/_components_v3/comp_simple_grid_breakpoint";
+import { Admin_V3_ComponentDetail } from "@/app_modules/admin/_components_v3/comp_detail_data";
 
 export function AdminJob_DetailReview({ data }: { data: MODEL_JOB }) {
   const router = useRouter();
@@ -142,21 +144,13 @@ export function AdminJob_DetailReview({ data }: { data: MODEL_JOB }) {
 
   return (
     <>
-      <SimpleGrid cols={2}>
+      <Admin_V3_ComponentBreakpoint>
         <Admin_ComponentBoxStyle>
-          {listData.map((item, index) => (
+          <Stack>
-            <Grid key={index}>
+            {listData.map((item, index) => (
-              <Grid.Col span={2}>
+               <Admin_V3_ComponentDetail key={index} item={item}/>
-                <Text>{item.title}</Text>
+            ))}
-              </Grid.Col>
+          </Stack>
-              <Grid.Col span={1}>
-                <Text>:</Text>
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Text>{item.value}</Text>
-              </Grid.Col>
-            </Grid>
-          ))}
 
           <Grid mt={"xl"}>
             <Grid.Col span={2}></Grid.Col>
@@ -190,7 +184,7 @@ export function AdminJob_DetailReview({ data }: { data: MODEL_JOB }) {
         </Admin_ComponentBoxStyle>
 
         {data.imageId && <AdminJob_ComponentImageView imageId={data.imageId} />}
-      </SimpleGrid>
+      </Admin_V3_ComponentBreakpoint>
 
       {/* PUBLISH MODAL */}
       <Modal

src/app_modules/admin/job/_view/detail.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { MODEL_JOB } from "@/app_modules/job/model/interface";
 import { clientLogger } from "@/util/clientLogger";
-import { SimpleGrid, Stack } from "@mantine/core";
+import { Stack } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useParams } from "next/navigation";
 import { useState } from "react";
 import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import { Admin_V3_ComponentSkeletonBreakpoint } from "../../_components_v3/comp_skeleton_breakpoint";
 import { AdminJob_DetailPublish } from "../_components/detail/publish";
 import { AdminJob_DetailReject } from "../_components/detail/reject";
 import { AdminJob_DetailReview } from "../_components/detail/review";
@@ -43,9 +43,7 @@ export function AdminJob_ViewDetailPublish() {
         <AdminGlobal_ComponentBackButton />
 
         {!data ? (
-          <SimpleGrid cols={2}>
+          <Admin_V3_ComponentSkeletonBreakpoint />
-            <CustomSkeleton height={500} width={"100%"} />
-          </SimpleGrid>
         ) : data.MasterStatus.name === "Publish" ? (
           <AdminJob_DetailPublish data={data} />
         ) : data.MasterStatus.name === "Review" ? (
@@ -53,7 +51,7 @@ export function AdminJob_ViewDetailPublish() {
         ) : data.MasterStatus.name === "Reject" ? (
           <AdminJob_DetailReject data={data} />
         ) : (
-          ""
+          null
         )}
       </Stack>
     </>

src/app_modules/admin/job/_view/view_table_review.tsx

@@ -52,6 +52,7 @@ import { apiGetAdminJobByStatus } from "../lib/api_fetch_admin_job";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import Admin_DetailButton from "../../_admin_global/_component/button/detail_button";
 import { RouterAdminJob } from "@/lib/router_admin/router_admin_job";
+import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
 
 export default function AdminJob_ViewTavleReview() {
   const router = useRouter();
@@ -178,104 +179,7 @@ export default function AdminJob_ViewTavleReview() {
       </tr>
     ));
 
-    // return data.map((e, i) => (
-    //   <tr key={i}>
-    //     <td>
-    //       <Center w={150}>
-    //         <Text c={AdminColor.white}>{e?.Author?.username}</Text>
-    //       </Center>
-    //     </td>
-    //     <td>
-    //       <Spoiler
-    //         c={AdminColor.white}
-    //         w={150}
-    //         maxHeight={50}
-    //         hideLabel="sembunyikan"
-    //         showLabel="tampilkan"
-    //       >
-    //         {e.title}
-    //       </Spoiler>
-    //     </td>
-    //     <td>
-    //       <Center w={150}>
-    //         {e.imageId ? (
-    //           <Button
-    //             loaderPosition="center"
-    //             loading={isLoading && jobId == e?.id}
-    //             color="green"
-    //             radius={"xl"}
-    //             leftIcon={<IconPhotoCheck />}
-    //             onClick={() => {
-    //               setJobId(e?.id);
-    //               setIsLoading(true);
-    //               router.push(RouterAdminGlobal.preview_image({ id: e.imageId }));
-    //             }}
-    //           >
-    //             Lihat
-    //           </Button>
-    //         ) : (
-    //           <Center w={150}>
-    //             <Text c={AdminColor.white} fw={"bold"} fz={"xs"} fs={"italic"}>
-    //               Tidak ada poster
-    //             </Text>
-    //           </Center>
-    //         )}
-    //       </Center>
-    //     </td>
-    //     <td>
-    //       <Spoiler
-    //         style={{ color: AdminColor.white }}
-    //         hideLabel="sembunyikan"
-    //         w={250}
-    //         maxHeight={50}
-    //         showLabel="tampilkan"
-    //       >
-    //         <div dangerouslySetInnerHTML={{ __html: e.content }} />
-    //       </Spoiler>
-    //     </td>
-    //     <td>
-    //       <Spoiler
-    //         style={{ color: AdminColor.white }}
-    //         hideLabel="sembunyikan"
-    //         w={400}
-    //         maxHeight={50}
-    //         showLabel="tampilkan"
-    //       >
-    //         <div dangerouslySetInnerHTML={{ __html: e.deskripsi }} />
-    //       </Spoiler>
-    //     </td>
-    //     <td>
-    //       <Stack>
-    //         <Stack align="center">
-    //           <Button
-    //             color={"green"}
-    //             leftIcon={<IconCircleCheck />}
-    //             radius={"xl"}
-    //             onClick={() => {
-    //               setJobId(e?.id);
-    //               setPublish(true);
-    //             }
 
-    //             }
-    //           >
-    //             Publish
-    //           </Button>
-    //           <Button
-    //             color={"red"}
-    //             leftIcon={<IconBan />}
-    //             radius={"xl"}
-    //             onClick={() => {
-    //               setReject(true);
-    //               setJobId(e.id);
-    //             }}
-    //           >
-    //             Reject
-    //           </Button>
-    //         </Stack>
-    //       </Stack>
-    //     </td>
-    //   </tr>
-    // ));
   };
 
   return (
@@ -452,7 +356,7 @@ export default function AdminJob_ViewTavleReview() {
               </Table>
             </ScrollArea>
             <Center mt={"xl"}>
-              <Pagination
+              <Admin_V3_ComponentPaginationBreakpoint
                 value={activePage}
                 total={nPage}
                 onChange={(val) => {

src/app_modules/admin/job/child/publish/index.tsx

@@ -2,13 +2,14 @@
 
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
+import Admin_DetailButton from "@/app_modules/admin/_admin_global/_component/button/detail_button";
 import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { MODEL_JOB } from "@/app_modules/job/model/interface";
 import { RouterAdminGlobal } from "@/lib";
+import { RouterAdminJob } from "@/lib/router_admin/router_admin_job";
 import { clientLogger } from "@/util/clientLogger";
 import {
-  ActionIcon,
   Badge,
   Box,
   Button,
@@ -22,18 +23,11 @@ import {
   TextInput,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import {
+import { IconPhotoCheck, IconSearch } from "@tabler/icons-react";
-  IconEye,
-  IconEyeSearch,
-  IconPencilSearch,
-  IconPhotoCheck,
-  IconSearch,
-} from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { apiGetAdminJobByStatus } from "../../lib/api_fetch_admin_job";
-import Admin_DetailButton from "@/app_modules/admin/_admin_global/_component/button/detail_button";
+import { Admin_V3_ComponentPaginationBreakpoint } from "@/app_modules/admin/_components_v3/comp_pagination_breakpoint";
-import { RouterAdminJob } from "@/lib/router_admin/router_admin_job";
 
 export default function AdminJob_TablePublish() {
   return (
@@ -161,28 +155,6 @@ function TableStatus() {
             />
           </Center>
         </td>
-        {/* <td>
-          <Spoiler
-            c={AdminColor.white}
-            hideLabel="sembunyikan"
-            w={400}
-            maxHeight={50}
-            showLabel="tampilkan"
-          >
-            <div dangerouslySetInnerHTML={{ __html: e.content }} />
-          </Spoiler>
-        </td>
-        <td>
-          <Spoiler
-            c={AdminColor.white}
-            hideLabel="sembunyikan"
-            w={400}
-            maxHeight={50}
-            showLabel="tampilkan"
-          >
-            <div dangerouslySetInnerHTML={{ __html: e.deskripsi }} />
-          </Spoiler>
-        </td> */}
       </tr>
     ));
   };
@@ -190,7 +162,6 @@ function TableStatus() {
   return (
     <>
       <Stack spacing={"xs"} h={"100%"}>
-        {/* <pre>{JSON.stringify(listUser, null, 2)}</pre> */}
         <ComponentAdminGlobal_TitlePage
           name="Publish"
           color={AdminColor.softBlue}
@@ -234,7 +205,7 @@ function TableStatus() {
               </Table>
             </ScrollArea>
             <Center mt={"xl"}>
-              <Pagination
+              <Admin_V3_ComponentPaginationBreakpoint
                 value={activePage}
                 total={nPage}
                 onChange={(val) => {

src/app_modules/admin/job/child/reject/index.tsx

@@ -5,10 +5,12 @@ import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/inpu
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
+import Admin_DetailButton from "@/app_modules/admin/_admin_global/_component/button/detail_button";
 import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
 import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { MODEL_JOB } from "@/app_modules/job/model/interface";
+import { RouterAdminGlobal } from "@/lib";
 import { IRealtimeData } from "@/lib/global_state";
 import { RouterAdminJob } from "@/lib/router_admin/router_admin_job";
 import { clientLogger } from "@/util/clientLogger";
@@ -21,23 +23,21 @@ import {
   Pagination,
   Paper,
   ScrollArea,
-  Spoiler,
   Stack,
   Table,
   Text,
   TextInput,
   Textarea,
 } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
-import { IconBan, IconPhotoCheck, IconSearch } from "@tabler/icons-react";
+import { IconPhotoCheck, IconSearch } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { WibuRealtime } from "wibu-pkg";
 import { AdminJob_funEditCatatanById } from "../../fun/edit/fun_edit_catatan_by_id";
 import adminJob_getListReject from "../../fun/get/get_list_reject";
 import { apiGetAdminJobByStatus } from "../../lib/api_fetch_admin_job";
-import Admin_DetailButton from "@/app_modules/admin/_admin_global/_component/button/detail_button";
+import { Admin_V3_ComponentPaginationBreakpoint } from "@/app_modules/admin/_components_v3/comp_pagination_breakpoint";
-import { RouterAdminGlobal } from "@/lib";
 
 export default function AdminJob_TableReject() {
   return (
@@ -93,7 +93,7 @@ function TableStatus() {
     setActivePage(1);
   };
 
-  const onPageClick = (page: number) => {
+  const onNextPage = (page: number) => {
     setActivePage(page);
   };
 
@@ -162,103 +162,6 @@ function TableStatus() {
         </td>
       </tr>
     ));
-
-    // return data?.map((e, i) => (
-    //   <tr key={i}>
-    //     <td>
-    //       <Center w={150}>
-    //         <Text c={AdminColor.white}>{e?.Author?.username}</Text>
-    //       </Center>
-    //     </td>
-    //     <td>
-    //       <Spoiler
-    //         w={200}
-    //         maxHeight={50}
-    //         hideLabel="sembunyikan"
-    //         showLabel="tampilkan"
-    //         c={AdminColor.white}
-    //       >
-    //         {e.title}
-    //       </Spoiler>
-    //     </td>
-    //     <td>
-    //       <Center w={150}>
-    //         {e.imageId ? (
-    //           <Button
-    //             loading={isLoading && e?.imageId === jobId}
-    //             loaderPosition="center"
-    //             color="green"
-    //             radius={"xl"}
-    //             leftIcon={<IconPhotoCheck />}
-    //             onClick={() => {
-    //               setJobId(e?.imageId);
-    //               setIsLoading(true);
-    //               router.push(RouterAdminJob.detail_poster + e?.imageId);
-    //             }}
-    //           >
-    //             Lihat
-    //           </Button>
-    //         ) : (
-    //           <Center w={150}>
-    //             <Text c={AdminColor.white} fw={"bold"} fz={"xs"} fs={"italic"}>
-    //               Tidak ada poster
-    //             </Text>
-    //           </Center>
-    //         )}
-    //       </Center>
-    //     </td>
-    //     <td>
-    //       <Spoiler
-    //         c={AdminColor.white}
-    //         w={400}
-    //         maxHeight={50}
-    //         hideLabel="sembunyikan"
-    //         showLabel="tampilkan"
-    //       >
-    //         <div dangerouslySetInnerHTML={{ __html: e.content }} />
-    //       </Spoiler>
-    //     </td>
-    //     <td>
-    //       <Spoiler
-    //         c={AdminColor.white}
-    //         hideLabel="sembunyikan"
-    //         w={400}
-    //         maxHeight={50}
-    //         showLabel="tampilkan"
-    //       >
-    //         <div dangerouslySetInnerHTML={{ __html: e.deskripsi }} />
-    //       </Spoiler>
-    //     </td>
-    //     <td>
-    //       <Spoiler
-    //         c={AdminColor.white}
-    //         hideLabel="sembunyikan"
-    //         w={400}
-    //         maxHeight={50}
-    //         showLabel="tampilkan"
-    //       >
-    //         {e.catatan}
-    //       </Spoiler>
-    //     </td>
-    //     <td>
-    //       <Button
-    //         color={"red"}
-    //         leftIcon={<IconBan />}
-    //         radius={"xl"}
-    //         onClick={() => {
-    //           setReject(true);
-    //           setJobId(e.id);
-    //           setCatatan(e.catatan);
-    //         }}
-    //       >
-    //         <Stack spacing={0} c={AdminColor.white}>
-    //           <Text fz={10}>Tambah</Text>
-    //           <Text fz={10}>Catatan</Text>
-    //         </Stack>
-    //       </Button>
-    //     </td>
-    //   </tr>
-    // ));
   };
 
   return (
@@ -364,15 +267,13 @@ function TableStatus() {
                 <tbody>{renderTableBody()}</tbody>
               </Table>
             </ScrollArea>
-            <Center mt={"xl"}>
+            <Admin_V3_ComponentPaginationBreakpoint
-              <Pagination
+              value={activePage}
-                value={activePage}
+              total={nPage}
-                total={nPage}
+              onChange={(val) => {
-                onChange={(val) => {
+                onNextPage(val);
-                  onPageClick(val);
+              }}
-                }}
+            />
-              />
-            </Center>
           </Paper>
         )}
       </Stack>
@@ -380,6 +281,8 @@ function TableStatus() {
   );
 }
 
+
+
 async function onReject({
   jobId,
   catatan,