fix admin responsive

deskrispi:
- fix super admin table

src/app_modules/admin/developer/index.tsx

@@ -25,6 +25,9 @@ import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import adminDeveloper_funGetListAllUser from "./fun/get/fun_get_list_all_user";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { Admin_V3_ComponentBreakpoint } from "../_components_v3/comp_simple_grid_breakpoint";
+import { ComponentAdminGlobal_TitlePage } from "../_admin_global/_component";
+import { Admin_V3_ComponentPaginationBreakpoint } from "../_components_v3/comp_pagination_breakpoint";
 
 export default function AdminDeveloper({
   listUser,
@@ -46,17 +49,7 @@ export default function AdminDeveloper({
     <>
       <Stack>
         <ComponentAdminGlobal_HeaderTamplate name="Super Admin" />
-        <SimpleGrid cols={2} spacing={50}>
-          {/* <TableAdmin
-            dataAdmin={dataAdmin}
-            setDataAdmin={setDataAdmin}
-            setDataUser={setDataUser}
-          /> */}
-          {/* <TableUser
-            dataUser={listUser}
-            setDataUser={setDataUser}
-            setDataAdmin={setDataAdmin}
-          /> */}
+        <Admin_V3_ComponentBreakpoint>
           <NewTableAdmin
             data={dataAdmin}
             nPage={pageAdmin}
@@ -73,7 +66,7 @@ export default function AdminDeveloper({
               setPageAdmin(val.nPage);
             }}
           />
-        </SimpleGrid>
+        </Admin_V3_ComponentBreakpoint>
       </Stack>
     </>
   );
@@ -143,14 +136,10 @@ function NewTableUser({
   return (
     <>
       <Stack spacing={"xs"}>
-        <Group
-          position="apart"
-          c={AdminColor.white}
-          bg={AdminColor.softBlue}
-          p={"xs"}
-          style={{ borderRadius: "6px" }}
-        >
-          <Title order={4}>Table User</Title>
+        <ComponentAdminGlobal_TitlePage
+          name="Table User"
+          color={AdminColor.softBlue}
+          component={
             <TextInput
               icon={<IconSearch size={20} />}
               radius={"xl"}
@@ -159,14 +148,12 @@ function NewTableUser({
                 onSearch(val.currentTarget.value);
               }}
             />
-        </Group>
-        <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
-          <Table
-            verticalSpacing={"xs"}
-            horizontalSpacing={"md"}
-            p={"md"}
+          }
+        />
 
-          >
+        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
+          <ScrollArea w={"100%"} h={"90%"}>
+            <Table verticalSpacing={"xs"} horizontalSpacing={"md"} p={"md"}>
               <thead>
                 <tr>
                   <th>
@@ -200,15 +187,14 @@ function NewTableUser({
                 ))}
               </tbody>
             </Table>
-          <Group sx={{ justifyContent: "flex-end" }} pt={10}>
-            <Pagination
+          </ScrollArea>
+          <Admin_V3_ComponentPaginationBreakpoint
             value={isChoosePage}
             onChange={(val) => {
               onPageClick(val);
             }}
             total={isNPage}
           />
-          </Group>
         </Paper>
       </Stack>
     </>
@@ -258,9 +244,6 @@ function NewTableAdmin({
         page: isChoosePage,
       });
 
-      
-
-
       setDataAdmin(loadData.data);
       setNPage(loadData.nPage);
       const loadDataUser = await adminDeveloper_funGetListAllUser({ page: 1 });
@@ -281,14 +264,10 @@ function NewTableAdmin({
   return (
     <>
       <Stack spacing={"xs"}>
-        <Group
-          c={AdminColor.white}
-          position="apart"
-          bg={AdminColor.softBlue}
-          p={"xs"}
-          style={{ borderRadius: "6px" }}
-        >
-          <Title order={4}>Table Admin</Title>
+        <ComponentAdminGlobal_TitlePage
+          name="Table Admin"
+          color={AdminColor.softBlue}
+          component={
             <TextInput
               icon={<IconSearch size={20} />}
               radius={"xl"}
@@ -297,14 +276,12 @@ function NewTableAdmin({
                 onSearch(val.currentTarget.value);
               }}
             />
-        </Group>
-        <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
-          <Table
-            verticalSpacing={"xs"}
-            horizontalSpacing={"md"}
-            p={"md"}
+          }
+        />
 
-          >
+        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
+          <ScrollArea w={"100%"} h={"90%"}>
+            <Table verticalSpacing={"xs"} horizontalSpacing={"md"} p={"md"}>
               <thead>
                 <tr>
                   <th>
@@ -342,15 +319,14 @@ function NewTableAdmin({
                 ))}
               </tbody>
             </Table>
-          <Group sx={{ justifyContent: "flex-end" }} pt={10}>
-            <Pagination
+          </ScrollArea>
+          <Admin_V3_ComponentPaginationBreakpoint
             value={isChoosePage}
             onChange={(val) => {
               onPageClick(val);
             }}
             total={isNPage}
           />
-          </Group>
         </Paper>
       </Stack>
     </>
@@ -409,7 +385,9 @@ function TableAdmin({
           p={"xs"}
           style={{ borderRadius: "6px" }}
         >
-          <Title c={AdminColor.white} order={4}>Table Admin</Title>
+          <Title c={AdminColor.white} order={4}>
+            Table Admin
+          </Title>
           <TextInput
             icon={<IconSearch size={20} />}
             radius={"xl"}
@@ -417,12 +395,7 @@ function TableAdmin({
           />
         </Group>
         <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
-          <Table
-            verticalSpacing={"xs"}
-            horizontalSpacing={"md"}
-            p={"md"}
-            
-          >
+          <Table verticalSpacing={"xs"} horizontalSpacing={"md"} p={"md"}>
             <thead>
               <tr>
                 <th>
@@ -496,7 +469,9 @@ function TableUser({
           p={"xs"}
           style={{ borderRadius: "6px" }}
         >
-          <Title c={AdminColor.white} order={4}>Table User</Title>
+          <Title c={AdminColor.white} order={4}>
+            Table User
+          </Title>
           <TextInput
             icon={<IconSearch size={20} />}
             radius={"xl"}
@@ -504,12 +479,7 @@ function TableUser({
           />
         </Group>
         <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
-          <Table
-            verticalSpacing={"xs"}
-            horizontalSpacing={"md"}
-            p={"md"}
-            
-          >
+          <Table verticalSpacing={"xs"} horizontalSpacing={"md"} p={"md"}>
             <thead>
               <tr>
                 <th>