fix responsive admin job

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>
+    </>
+  );
+}