fix: super admin

fix pengambilan data dari use server menjadi API
src/app/api/admin/developer/route.ts
src/app/api/admin/user/route.ts
src/app/dev/admin/developer/page.tsx
src/app_modules/admin/developer/_lib/api_fetch_developer.tsx
src/app_modules/admin/developer/index.tsx

No Issue

src/app/api/admin/developer/route.ts

@@ -0,0 +1,82 @@
+import _ from "lodash";
+import { NextResponse } from "next/server";
+import prisma from "@/lib/prisma";
+
+export async function GET(request: Request) {
+  try {
+    let fixData;
+    const { searchParams } = new URL(request.url);
+    const search = searchParams.get("search");
+    const page = searchParams.get("page");
+    const dataTake = 10;
+    const dataSkip = Number(page) * dataTake - dataTake;
+
+    if (!page) {
+      fixData = await prisma.user.findMany({
+        orderBy: {
+          updatedAt: "desc",
+        },
+        where: {
+          masterUserRoleId: "2",
+          username: {
+            contains: search || "",
+            mode: "insensitive",
+          },
+        },
+      });
+    } else {
+      const data = await prisma.user.findMany({
+        skip: dataSkip,
+        take: dataTake,
+        orderBy: {
+          updatedAt: "desc",
+        },
+        where: {
+          masterUserRoleId: "2",
+          username: {
+            contains: search || "",
+            mode: "insensitive",
+          },
+        },
+      });
+
+      const nCount = await prisma.user.count({
+        where: {
+          masterUserRoleId: "2",
+          username: {
+            contains: search || "",
+            mode: "insensitive",
+          },
+        },
+      });
+
+      fixData = {
+        data: data,
+        nPage: _.ceil(nCount / dataTake),
+      };
+    }
+
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Success get data",
+        data: fixData,
+      },
+      {
+        status: 200,
+      }
+    );
+  } catch (error) {
+    console.error("Error get data admin", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Internal Server Error",
+        reason: (error as Error).message,
+      },
+      {
+        status: 500,
+      }
+    );
+  }
+}

src/app/api/admin/user/route.ts

@@ -13,6 +13,9 @@ export async function GET(request: Request) {
 
     if (!page) {
       fixData = await prisma.user.findMany({
+        orderBy: {
+          updatedAt: "desc",
+        },
         where: {
           masterUserRoleId: "1",
           username: {
@@ -26,7 +29,7 @@ export async function GET(request: Request) {
         skip: skipData,
         take: takeData,
         orderBy: {
-          active: "asc",
+          updatedAt: "desc",
         },
         where: {
           masterUserRoleId: "1",

src/app/dev/admin/developer/page.tsx

@@ -4,12 +4,12 @@ import adminDeveloper_funGetListAllUser from "@/app_modules/admin/developer/fun/
 import _ from "lodash";
 
 export default async function Page() {
-  const listUser = await adminDeveloper_funGetListAllUser({ page: 1 });
-  const listAdmin = await adminDeveloper_funGetListAllAdmin({ page: 1 });
+  // const listUser = await adminDeveloper_funGetListAllUser({ page: 1 });
+  // const listAdmin = await adminDeveloper_funGetListAllAdmin({ page: 1 });
 
   return (
     <>
-      <AdminDeveloper listUser={listUser.data as any} pUser={listUser.nPage} listAdmin={listAdmin.data as any} pAdmin={listAdmin.nPage} />
+      <AdminDeveloper />
     </>
   );
 }

src/app_modules/admin/developer/_lib/api_fetch_developer.tsx

@@ -0,0 +1,41 @@
+export async function apiAdminGetListAdmin({
+  search,
+  page,
+}: {
+  search?: any;
+  page: any;
+}) {
+  try {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) {
+      console.error("No token found");
+      return null;
+    }
+
+    const isPage = `?page=${page}`;
+    const isSearch = search ? `&search=${search}` : "";
+    const response = await fetch(`/api/admin/developer${isPage}${isSearch}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error(
+        "Error get data admin:",
+        errorData?.message || "Unknown error"
+      );
+      return null;
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error get data admin:", error);
+    throw error;
+  }
+}

src/app_modules/admin/developer/index.tsx

@@ -1,70 +1,119 @@
 "use client";
 
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
 import {
-  Box,
   Button,
   Center,
-  Group,
-  Pagination,
   Paper,
   ScrollArea,
-  SimpleGrid,
   Stack,
   Table,
   TextInput,
-  Title,
 } from "@mantine/core";
-import ComponentAdminGlobal_HeaderTamplate from "../_admin_global/header_tamplate";
-import { MODEL_USER } from "@/app_modules/home/model/interface";
-import _ from "lodash";
+import { useShallowEffect } from "@mantine/hooks";
 import { IconSearch } from "@tabler/icons-react";
-import { useEffect, useState } from "react";
-import adminDeveloper_funEditUserAksesById from "./fun/edit/fun_edit_user_akses_by_id";
-import adminDeveloper_funGetListAllAdmin from "./fun/get/fun_get_list_all_admin";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-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 { useState } from "react";
 import { ComponentAdminGlobal_TitlePage } from "../_admin_global/_component";
+import ComponentAdminGlobal_HeaderTamplate from "../_admin_global/header_tamplate";
 import { Admin_V3_ComponentPaginationBreakpoint } from "../_components_v3/comp_pagination_breakpoint";
+import { Admin_V3_ComponentBreakpoint } from "../_components_v3/comp_simple_grid_breakpoint";
+import { apiGetUserAccess } from "../user-access/_lib/api_fetch_user_access";
+import { apiAdminGetListAdmin } from "./_lib/api_fetch_developer";
+import adminDeveloper_funEditUserAksesById from "./fun/edit/fun_edit_user_akses_by_id";
 
-export default function AdminDeveloper({
-  listUser,
-  listAdmin,
-  pUser,
-  pAdmin,
-}: {
-  listUser: MODEL_USER[];
-  listAdmin: MODEL_USER[];
-  pUser: any;
-  pAdmin: any;
-}) {
-  const [dataUser, setDataUser] = useState(listUser);
-  const [dataAdmin, setDataAdmin] = useState(listAdmin);
-  const [pageUser, setPageUser] = useState(pUser);
-  const [pageAdmin, setPageAdmin] = useState(pAdmin);
+export default function AdminDeveloper() {
+  // USER
+  const [data, setData] = useState<MODEL_USER[] | null>(null);
+  const [nPage, setNPage] = useState(1);
+  const [activePage, setActivePage] = useState(1);
+  const [isSearch, setSearch] = useState("");
+  const [reloadUser, setReloadUser] = useState(false);
+
+  useShallowEffect(() => {
+    handleLoad_DataUser();
+  }, [activePage, isSearch, reloadUser]);
+
+  const handleLoad_DataUser = async () => {
+    try {
+      const response = await apiGetUserAccess({
+        page: `${activePage}`,
+        search: isSearch,
+      });
+
+      if (response.success) {
+        setData(response.data.data);
+        setNPage(response.data.nPage);
+      } else {
+        setData([]);
+      }
+    } catch (error) {
+      console.error("Error get user access", error);
+      setData([]);
+    }
+  };
+
+  // ADMIN
+  const [dataAdmin, setDataAdmin] = useState<MODEL_USER[] | null>(null);
+  const [nPageAdmin, setNPageAdmin] = useState(1);
+  const [activePageAdmin, setActivePageAdmin] = useState(1);
+  const [isSearchAdmin, setSearchAdmin] = useState("");
+  const [reloadAdmin, setReloadAdmin] = useState(false);
+
+  useShallowEffect(() => {
+    handleLoad_DataAdmin();
+  }, [activePageAdmin, isSearchAdmin, reloadAdmin]);
+
+  const handleLoad_DataAdmin = async () => {
+    try {
+      const response = await apiAdminGetListAdmin({
+        page: `${activePageAdmin}`,
+        search: isSearchAdmin,
+      });
+
+      if (response.success) {
+        setDataAdmin(response.data.data);
+        setNPageAdmin(response.data.nPage);
+      } else {
+        setDataAdmin([]);
+      }
+    } catch (error) {
+      console.error("Error get user access", error);
+      setDataAdmin([]);
+    }
+  };
 
   return (
     <>
       <Stack>
         <ComponentAdminGlobal_HeaderTamplate name="Super Admin" />
         <Admin_V3_ComponentBreakpoint>
+          <NewTableUser
+            data={data}
+            nPage={nPage}
+            activePage={activePage}
+            isSearch={isSearch}
+            setData={setData}
+            setNPage={setNPage}
+            setActivePage={setActivePage}
+            setSearch={setSearch}
+            handleLoad_DataUser={handleLoad_DataUser}
+            handleLoad_DataAdmin={handleLoad_DataAdmin}
+          />
           <NewTableAdmin
             data={dataAdmin}
-            nPage={pageAdmin}
-            onUpdated={(val) => {
-              setDataUser(val.data);
-              setPageUser(val.nPage);
-            }}
-          />
-          <NewTableUser
-            data={dataUser}
-            nPage={pageUser}
-            onUpdated={(val) => {
-              setDataAdmin(val.data);
-              setPageAdmin(val.nPage);
-            }}
+            nPage={nPageAdmin}
+            activePage={activePageAdmin}
+            isSearch={isSearchAdmin}
+            setData={setDataAdmin}
+            setNPage={setNPageAdmin}
+            setActivePage={setActivePageAdmin}
+            setSearch={setSearchAdmin}
+            handleLoad_DataAdmin={handleLoad_DataAdmin}
+            handleLoad_DataUser={handleLoad_DataUser}
           />
         </Admin_V3_ComponentBreakpoint>
       </Stack>
@@ -75,63 +124,88 @@ export default function AdminDeveloper({
 function NewTableUser({
   data,
   nPage,
-  onUpdated,
+  activePage,
+  isSearch,
+  setData,
+  setNPage,
+  setActivePage,
+  setSearch,
+  handleLoad_DataUser,
+  handleLoad_DataAdmin,
 }: {
-  data: any;
-  nPage: any;
-  onUpdated: (val: any) => void;
+  data: MODEL_USER[] | null;
+  nPage: number;
+  activePage: number;
+  isSearch: string;
+  setData: (data: MODEL_USER[] | null) => void;
+  setNPage: (nPage: number) => void;
+  setActivePage: (activePage: number) => void;
+  setSearch: (isSearch: string) => void;
+  handleLoad_DataUser: () => void;
+  handleLoad_DataAdmin: () => void;
 }) {
-  const [isChoosePage, setChoosePage] = useState(1);
-  const [dataUser, setDataUser] = useState(data);
-  const [isNPage, setNPage] = useState(nPage);
-  const [isSearch, setSearch] = useState("");
-
-  async function onPageClick(p: any) {
-    setChoosePage(p);
-    const loadData = await adminDeveloper_funGetListAllUser({
-      search: isSearch,
-      page: p,
-    });
-    setDataUser(loadData.data);
-    setNPage(loadData.nPage);
-  }
-
+  const [selectedId, setSelectedId] = useState<string | null>(null);
   async function onSearch(s: any) {
     setSearch(s);
-    setChoosePage(1);
-    const loadData = await adminDeveloper_funGetListAllUser({
-      search: s,
-      page: 1,
-    });
-    setDataUser(loadData.data);
-    setNPage(loadData.nPage);
+  }
+
+  async function onPageClick(p: any) {
+    setActivePage(p);
   }
 
   async function onAccess(id: string) {
-    const upd = await adminDeveloper_funEditUserAksesById(id, "2");
-    if (upd.status == 200) {
-      const loadData = await adminDeveloper_funGetListAllUser({
-        search: isSearch,
-        page: isChoosePage,
-      });
-      setDataUser(loadData.data);
-      setNPage(loadData.nPage);
-      const loadDataAdmin = await adminDeveloper_funGetListAllAdmin({
-        page: 1,
-      });
-      onUpdated(loadDataAdmin);
-      ComponentGlobal_NotifikasiBerhasil(upd.message);
-    } else {
-      ComponentGlobal_NotifikasiGagal(upd.message);
+    try {
+      setSelectedId(id);
+      const upd = await adminDeveloper_funEditUserAksesById(id, "2");
+      if (upd.status == 200) {
+        handleLoad_DataUser();
+        handleLoad_DataAdmin();
+        ComponentGlobal_NotifikasiBerhasil(upd.message);
+        setSelectedId(null);
+      } else {
+        ComponentGlobal_NotifikasiGagal(upd.message);
+        setSelectedId(null);
+      }
+    } catch (error) {
+      console.error("Error get data admin", error);
+      setSelectedId(null);
     }
   }
 
-  useEffect(() => {
-    setDataUser(data);
-    setNPage(nPage);
-    setSearch("");
-    setChoosePage(1);
-  }, [data, nPage]);
+  const tableBody = () => {
+    if (!Array.isArray(data) || data.length === 0) {
+      return (
+        <tr>
+          <td colSpan={3}>
+            <Center c={AdminColor.white}>No data available</Center>
+          </td>
+        </tr>
+      );
+    }
+
+    return data.map((v: any, i: any) => (
+      <tr key={v.id}>
+        <td>
+          <Center c={AdminColor.white}>{v.username}</Center>
+        </td>
+        <td>
+          <Center c={AdminColor.white}>{v.nomor}</Center>
+        </td>
+        <td>
+          <Center>
+            <Button
+              loaderPosition="center"
+              loading={selectedId === v.id}
+              radius={"xl"}
+              onClick={() => onAccess(v.id)}
+            >
+              Admin Access
+            </Button>
+          </Center>
+        </td>
+      </tr>
+    ));
+  };
 
   return (
     <>
@@ -141,6 +215,7 @@ function NewTableUser({
           color={AdminColor.softBlue}
           component={
             <TextInput
+              disabled={!data}
               icon={<IconSearch size={20} />}
               radius={"xl"}
               placeholder="Masukan username"
@@ -151,51 +226,37 @@ function NewTableUser({
           }
         />
 
-        <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>
-                    <Center c={AdminColor.white}>Username</Center>
-                  </th>
-                  <th>
-                    <Center c={AdminColor.white}>Nomor</Center>
-                  </th>
-                  <th>
-                    <Center c={AdminColor.white}>Aksi</Center>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {dataUser.map((v: any, i: any) => (
-                  <tr key={v.id}>
-                    <td>
-                      <Center c={AdminColor.white}>{v.username}</Center>
-                    </td>
-                    <td>
-                      <Center c={AdminColor.white}>{v.nomor}</Center>
-                    </td>
-                    <td>
-                      <Center>
-                        <Button radius={"xl"} onClick={() => onAccess(v.id)}>
-                          Admin Access
-                        </Button>
-                      </Center>
-                    </td>
+        {!data ? (
+          <CustomSkeleton h={"80vh"} />
+        ) : (
+          <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>
+                      <Center c={AdminColor.white}>Username</Center>
+                    </th>
+                    <th>
+                      <Center c={AdminColor.white}>Nomor</Center>
+                    </th>
+                    <th>
+                      <Center c={AdminColor.white}>Aksi</Center>
+                    </th>
                   </tr>
-                ))}
-              </tbody>
-            </Table>
-          </ScrollArea>
-          <Admin_V3_ComponentPaginationBreakpoint
-            value={isChoosePage}
-            onChange={(val) => {
-              onPageClick(val);
-            }}
-            total={isNPage}
-          />
-        </Paper>
+                </thead>
+                <tbody>{tableBody()}</tbody>
+              </Table>
+            </ScrollArea>
+            <Admin_V3_ComponentPaginationBreakpoint
+              value={activePage}
+              total={nPage}
+              onChange={(val) => {
+                onPageClick(val);
+              }}
+            />
+          </Paper>
+        )}
       </Stack>
     </>
   );
@@ -204,62 +265,90 @@ function NewTableUser({
 function NewTableAdmin({
   data,
   nPage,
-  onUpdated,
+  activePage,
+  isSearch,
+  setData,
+  setNPage,
+  setActivePage,
+  setSearch,
+  handleLoad_DataUser,
+  handleLoad_DataAdmin,
 }: {
-  data: any;
-  nPage: any;
-  onUpdated: (val: any) => void;
+  data: MODEL_USER[] | null;
+  nPage: number;
+  activePage: number;
+  isSearch: string;
+  setData: (data: MODEL_USER[] | null) => void;
+  setNPage: (nPage: number) => void;
+  setActivePage: (activePage: number) => void;
+  setSearch: (isSearch: string) => void;
+  handleLoad_DataUser: () => void;
+  handleLoad_DataAdmin: () => void;
 }) {
-  const [isChoosePage, setChoosePage] = useState(1);
-  const [dataAdmin, setDataAdmin] = useState(data);
-  const [isNPage, setNPage] = useState(nPage);
-  const [isSearch, setSearch] = useState("");
-
-  async function onPageClick(p: any) {
-    setChoosePage(p);
-    const loadData = await adminDeveloper_funGetListAllAdmin({
-      search: isSearch,
-      page: p,
-    });
-    setDataAdmin(loadData.data);
-    setNPage(loadData.nPage);
-  }
+  const [selectedId, setSelectedId] = useState<string | null>(null);
 
   async function onSearch(s: any) {
     setSearch(s);
-    setChoosePage(1);
-    const loadData = await adminDeveloper_funGetListAllAdmin({
-      search: s,
-      page: 1,
-    });
-    setDataAdmin(loadData.data);
-    setNPage(loadData.nPage);
+  }
+
+  async function onPageClick(p: any) {
+    setActivePage(p);
   }
 
   async function onAccess(id: string) {
-    const upd = await adminDeveloper_funEditUserAksesById(id, "1");
-    if (upd.status == 200) {
-      const loadData = await adminDeveloper_funGetListAllAdmin({
-        search: isSearch,
-        page: isChoosePage,
-      });
-
-      setDataAdmin(loadData.data);
-      setNPage(loadData.nPage);
-      const loadDataUser = await adminDeveloper_funGetListAllUser({ page: 1 });
-      onUpdated(loadDataUser);
-      ComponentGlobal_NotifikasiBerhasil(upd.message);
-    } else {
-      ComponentGlobal_NotifikasiGagal(upd.message);
+    try {
+      setSelectedId(id);
+      const upd = await adminDeveloper_funEditUserAksesById(id, "1");
+      if (upd.status == 200) {
+        handleLoad_DataUser();
+        handleLoad_DataAdmin();
+        ComponentGlobal_NotifikasiBerhasil(upd.message);
+        setSelectedId(null);
+      } else {
+        ComponentGlobal_NotifikasiGagal(upd.message);
+        setSelectedId(null);
+      }
+    } catch (error) {
+      console.error("Error get data admin", error);
+      setSelectedId(null);
     }
   }
 
-  useEffect(() => {
-    setDataAdmin(data);
-    setNPage(nPage);
-    setSearch("");
-    setChoosePage(1);
-  }, [data, nPage]);
+  const tableBody = () => {
+    if (!Array.isArray(data) || data.length === 0) {
+      return (
+        <tr>
+          <td colSpan={3}>
+            <Center c={AdminColor.white}>No data available</Center>
+          </td>
+        </tr>
+      );
+    }
+
+    return data.map((v: any, i: any) => (
+      <tr key={v.id}>
+        <td>
+          <Center c={AdminColor.white}>{v.username}</Center>
+        </td>
+        <td>
+          <Center c={AdminColor.white}>{v.nomor}</Center>
+        </td>
+        <td>
+          <Center>
+            <Button
+              loaderPosition="center"
+              loading={selectedId === v.id}
+              radius={"xl"}
+              color="red"
+              onClick={() => onAccess(v.id)}
+            >
+              Delete Access
+            </Button>
+          </Center>
+        </td>
+      </tr>
+    ));
+  };
 
   return (
     <>
@@ -269,6 +358,7 @@ function NewTableAdmin({
           color={AdminColor.softBlue}
           component={
             <TextInput
+              disabled={!data}
               icon={<IconSearch size={20} />}
               radius={"xl"}
               placeholder="Masukan username"
@@ -279,223 +369,37 @@ function NewTableAdmin({
           }
         />
 
-        <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>
-                    <Center c={AdminColor.white}>Username</Center>
-                  </th>
-                  <th>
-                    <Center c={AdminColor.white}>Nomor</Center>
-                  </th>
-                  <th>
-                    <Center c={AdminColor.white}>Aksi</Center>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {dataAdmin.map((v: any, i: any) => (
-                  <tr key={v.id}>
-                    <td>
-                      <Center c={AdminColor.white}>{v.username}</Center>
-                    </td>
-                    <td>
-                      <Center c={AdminColor.white}>{v.nomor}</Center>
-                    </td>
-                    <td>
-                      <Center>
-                        <Button
-                          radius={"xl"}
-                          color="red"
-                          onClick={() => onAccess(v.id)}
-                        >
-                          Delete Access
-                        </Button>
-                      </Center>
-                    </td>
+        {!data ? (
+          <CustomSkeleton h={"80vh"} />
+        ) : (
+          <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>
+                      <Center c={AdminColor.white}>Username</Center>
+                    </th>
+                    <th>
+                      <Center c={AdminColor.white}>Nomor</Center>
+                    </th>
+                    <th>
+                      <Center c={AdminColor.white}>Aksi</Center>
+                    </th>
                   </tr>
-                ))}
-              </tbody>
-            </Table>
-          </ScrollArea>
-          <Admin_V3_ComponentPaginationBreakpoint
-            value={isChoosePage}
-            onChange={(val) => {
-              onPageClick(val);
-            }}
-            total={isNPage}
-          />
-        </Paper>
-      </Stack>
-    </>
-  );
-}
-
-function TableAdmin({
-  dataAdmin,
-  setDataAdmin,
-  setDataUser,
-}: {
-  dataAdmin: MODEL_USER[];
-  setDataAdmin: any;
-  setDataUser: any;
-}) {
-  async function onAccess(id: string) {
-    await adminDeveloper_funEditUserAksesById(id, "1").then(async (res) => {
-      if (res.status === 200) {
-        await adminDeveloper_funGetListAllUser({ page: 1 }).then((val) => {
-          setDataUser(val);
-        });
-        await adminDeveloper_funGetListAllAdmin({ page: 1 }).then((val) => {
-          setDataAdmin(val);
-        });
-        ComponentGlobal_NotifikasiBerhasil(res.message);
-      } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
-      }
-    });
-  }
-
-  const tableBody = dataAdmin.map((e) => (
-    <tr key={e.id}>
-      <td>
-        <Center c={AdminColor.white}>{e.username}</Center>
-      </td>
-      <td>
-        <Center c={AdminColor.white}>{e.nomor}</Center>
-      </td>
-      <td>
-        <Center>
-          <Button radius={"xl"} color="red" onClick={() => onAccess(e.id)}>
-            Delete Access
-          </Button>
-        </Center>
-      </td>
-    </tr>
-  ));
-
-  return (
-    <>
-      <Stack spacing={"xs"}>
-        <Group
-          position="apart"
-          bg={AdminColor.softBlue}
-          p={"xs"}
-          style={{ borderRadius: "6px" }}
-        >
-          <Title c={AdminColor.white} order={4}>
-            Table Admin
-          </Title>
-          <TextInput
-            icon={<IconSearch size={20} />}
-            radius={"xl"}
-            placeholder="Masukan username"
-          />
-        </Group>
-        <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
-          <Table verticalSpacing={"xs"} horizontalSpacing={"md"} p={"md"}>
-            <thead>
-              <tr>
-                <th>
-                  <Center c={AdminColor.white}>Username</Center>
-                </th>
-                <th>
-                  <Center c={AdminColor.white}>Nomor</Center>
-                </th>
-                <th>
-                  <Center c={AdminColor.white}>Aksi</Center>
-                </th>
-              </tr>
-            </thead>
-            <tbody>{tableBody}</tbody>
-          </Table>
-        </Paper>
-      </Stack>
-    </>
-  );
-}
-
-function TableUser({
-  dataUser,
-  setDataUser,
-  setDataAdmin,
-}: {
-  dataUser: MODEL_USER[];
-  setDataUser: any;
-  setDataAdmin: any;
-}) {
-  async function onAccess(id: string) {
-    await adminDeveloper_funEditUserAksesById(id, "2").then(async (res) => {
-      if (res.status === 200) {
-        await adminDeveloper_funGetListAllUser({ page: 1 }).then((val) => {
-          setDataUser(val.data);
-        });
-        await adminDeveloper_funGetListAllAdmin({ page: 1 }).then((val) => {
-          setDataAdmin(val);
-        });
-        ComponentGlobal_NotifikasiBerhasil(res.message);
-      } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
-      }
-    });
-  }
-
-  const tableBody = dataUser.map((e) => (
-    <tr key={e.id}>
-      <td>
-        <Center c={AdminColor.white}>{e.username}</Center>
-      </td>
-      <td>
-        <Center c={AdminColor.white}>{e.nomor}</Center>
-      </td>
-      <td>
-        <Center>
-          <Button radius={"xl"} onClick={() => onAccess(e.id)}>
-            Admin Access
-          </Button>
-        </Center>
-      </td>
-    </tr>
-  ));
-
-  return (
-    <>
-      <Stack spacing={"xs"}>
-        <Group
-          position="apart"
-          bg={AdminColor.softBlue}
-          p={"xs"}
-          style={{ borderRadius: "6px" }}
-        >
-          <Title c={AdminColor.white} order={4}>
-            Table User
-          </Title>
-          <TextInput
-            icon={<IconSearch size={20} />}
-            radius={"xl"}
-            placeholder="Masukan username"
-          />
-        </Group>
-        <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
-          <Table verticalSpacing={"xs"} horizontalSpacing={"md"} p={"md"}>
-            <thead>
-              <tr>
-                <th>
-                  <Center c={AdminColor.white}>Username</Center>
-                </th>
-                <th>
-                  <Center c={AdminColor.white}>Nomor</Center>
-                </th>
-                <th>
-                  <Center c={AdminColor.white}>Aksi</Center>
-                </th>
-              </tr>
-            </thead>
-            <tbody>{tableBody}</tbody>
-          </Table>
-        </Paper>
+                </thead>
+                <tbody>{tableBody()}</tbody>
+              </Table>
+            </ScrollArea>
+            <Admin_V3_ComponentPaginationBreakpoint
+              value={activePage}
+              total={nPage}
+              onChange={(val) => {
+                onPageClick(val);
+              }}
+            />
+          </Paper>
+        )}
       </Stack>
     </>
   );