diff --git a/src/app/dev/admin/developer/page.tsx b/src/app/dev/admin/developer/page.tsx
index c69ae063..609d4b10 100644
--- a/src/app/dev/admin/developer/page.tsx
+++ b/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();
-  const listAdmin = await adminDeveloper_funGetListAllAdmin();
+  const listUser = await adminDeveloper_funGetListAllUser({ page: 1 });
+  const listAdmin = await adminDeveloper_funGetListAllAdmin({ page: 1 });
 
   return (
     <>
-      <AdminDeveloper listUser={listUser as any} listAdmin={listAdmin as any} />
+      <AdminDeveloper listUser={listUser.data as any} pUser={listUser.nPage} listAdmin={listAdmin.data as any} pAdmin={listAdmin.nPage} />
     </>
   );
 }
diff --git a/src/app_modules/admin/developer/fun/get/fun_get_list_all_admin.ts b/src/app_modules/admin/developer/fun/get/fun_get_list_all_admin.ts
index 7cf6d885..94eb2c64 100644
--- a/src/app_modules/admin/developer/fun/get/fun_get_list_all_admin.ts
+++ b/src/app_modules/admin/developer/fun/get/fun_get_list_all_admin.ts
@@ -1,15 +1,38 @@
 "use server"
-
 import prisma from "@/app/lib/prisma"
+import _, { ceil } from "lodash";
 
-export default async function adminDeveloper_funGetListAllAdmin() {
-    const data = await prisma.user.findMany({
-      orderBy: {
-        updatedAt: "asc",
-      },
-      where: {
-        masterUserRoleId: "2",
-      },
-    });
-    return data;
+export default async function adminDeveloper_funGetListAllAdmin({ search, page }: { search?: any, page: any }) {
+  const dataSkip = _.toNumber(page) * 9 - 9
+  const data = await prisma.user.findMany({
+    skip: dataSkip,
+    take: 9,
+    orderBy: {
+      updatedAt: "asc",
+    },
+    where: {
+      masterUserRoleId: "2",
+      username: {
+        contains: search,
+        mode: 'insensitive'
+      }
+    },
+  });
+
+  const nCount = await prisma.user.count({
+    where: {
+      masterUserRoleId: "2",
+      username: {
+        contains: search,
+        mode: 'insensitive'
+      }
+    }
+  })
+
+  const allData = {
+    data: data,
+    nPage: ceil(nCount / 9)
+  }
+
+  return allData;
 }
\ No newline at end of file
diff --git a/src/app_modules/admin/developer/fun/get/fun_get_list_all_user.ts b/src/app_modules/admin/developer/fun/get/fun_get_list_all_user.ts
index 3de50a19..e4de3b79 100644
--- a/src/app_modules/admin/developer/fun/get/fun_get_list_all_user.ts
+++ b/src/app_modules/admin/developer/fun/get/fun_get_list_all_user.ts
@@ -1,15 +1,39 @@
 "use server";
-
 import prisma from "@/app/lib/prisma";
+import _, { ceil } from "lodash";
+
+export default async function adminDeveloper_funGetListAllUser({ search, page }: { search?: any, page: any }) {
+  const dataSkip = _.toNumber(page) * 9 - 9
 
-export default async function adminDeveloper_funGetListAllUser() {
   const data = await prisma.user.findMany({
+    skip: dataSkip,
+    take: 9,
     orderBy: {
       updatedAt: "asc",
     },
     where: {
       masterUserRoleId: "1",
+      username: {
+        contains: search,
+        mode: 'insensitive'
+      }
     },
   });
-  return data;
+
+  const nCount = await prisma.user.count({
+    where: {
+      masterUserRoleId: "1",
+      username: {
+        contains: search,
+        mode: 'insensitive'
+      }
+    }
+  })
+
+  const allData = {
+    data: data,
+    nPage: ceil(nCount / 9)
+  }
+
+  return allData;
 }
diff --git a/src/app_modules/admin/developer/index.tsx b/src/app_modules/admin/developer/index.tsx
index c2d49ac5..2da4a14a 100644
--- a/src/app_modules/admin/developer/index.tsx
+++ b/src/app_modules/admin/developer/index.tsx
@@ -5,6 +5,7 @@ import {
   Button,
   Center,
   Group,
+  Pagination,
   Paper,
   ScrollArea,
   SimpleGrid,
@@ -17,7 +18,7 @@ import ComponentAdminGlobal_HeaderTamplate from "../component/header_tamplate";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
 import _ from "lodash";
 import { IconSearch } from "@tabler/icons-react";
-import { useState } from "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/component_global/notif_global/notifikasi_berhasil";
@@ -27,27 +28,45 @@ import adminDeveloper_funGetListAllUser from "./fun/get/fun_get_list_all_user";
 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);
 
   return (
     <>
       <Stack>
         <ComponentAdminGlobal_HeaderTamplate name="Developer" />
         <SimpleGrid cols={2} spacing={50}>
-          <TableAdmin
+          {/* <TableAdmin
             dataAdmin={dataAdmin}
             setDataAdmin={setDataAdmin}
             setDataUser={setDataUser}
-          />
-          <TableUser
-            dataUser={dataUser}
+          /> */}
+          {/* <TableUser
+            dataUser={listUser}
             setDataUser={setDataUser}
             setDataAdmin={setDataAdmin}
+          /> */}
+          <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)
+            }}
           />
         </SimpleGrid>
       </Stack>
@@ -55,6 +74,247 @@ export default function AdminDeveloper({
   );
 }
 
+function NewTableUser({ data, nPage, onUpdated }: { data: any, nPage: any, onUpdated: (val: any) => 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)
+  }
+
+  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 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)
+    }
+  }
+
+  useEffect(() => {
+    setDataUser(data)
+    setNPage(nPage)
+    setSearch('')
+    setChoosePage(1)
+  }, [data, nPage])
+
+
+  return (
+    <>
+      <Stack spacing={"xs"}>
+        <Group
+          position="apart"
+          bg={"cyan.4"}
+          p={"xs"}
+          style={{ borderRadius: "6px" }}
+        >
+          <Title order={4}>Table User NEW</Title>
+          <TextInput
+            icon={<IconSearch size={20} />}
+            radius={"xl"}
+            placeholder="Masukan username"
+            onChange={(val) => {
+              onSearch(val.currentTarget.value)
+            }}
+          />
+        </Group>
+        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+          <Table
+            verticalSpacing={"xs"}
+            horizontalSpacing={"md"}
+            p={"md"}
+            striped
+            highlightOnHover
+          >
+            <thead>
+              <tr>
+                <th>
+                  <Center>Username</Center>
+                </th>
+                <th>
+                  <Center>Nomor</Center>
+                </th>
+                <th>
+                  <Center>Aksi</Center>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {dataUser.map((v: any, i: any) => (
+                <tr key={v.id}>
+                  <td>
+                    <Center>{v.username}</Center>
+                  </td>
+                  <td>
+                    <Center>{v.nomor}</Center>
+                  </td>
+                  <td>
+                    <Center>
+                      <Button radius={"xl"}
+                        onClick={() => onAccess(v.id)}
+                      >
+                        Admin Access
+                      </Button>
+                    </Center>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+          <Group sx={{ justifyContent: "flex-end" }} pt={10}>
+            <Pagination
+              value={isChoosePage}
+              onChange={(val) => {
+                onPageClick(val)
+              }}
+              total={isNPage}
+            />
+          </Group>
+        </Paper>
+      </Stack>
+    </>
+  )
+}
+
+function NewTableAdmin({ data, nPage, onUpdated }: { data: any, nPage: any, onUpdated: (val: any) => 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)
+  }
+
+  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 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)
+    }
+  }
+
+  useEffect(() => {
+    setDataAdmin(data)
+    setNPage(nPage)
+    setSearch('')
+    setChoosePage(1)
+  }, [data, nPage])
+
+  return (
+    <>
+      <Stack spacing={"xs"}>
+        <Group
+          position="apart"
+          bg={"blue.4"}
+          p={"xs"}
+          style={{ borderRadius: "6px" }}
+        >
+          <Title order={4}>Table Admin</Title>
+          <TextInput
+            icon={<IconSearch size={20} />}
+            radius={"xl"}
+            placeholder="Masukan username"
+            onChange={(val) => {
+              onSearch(val.currentTarget.value)
+            }}
+          />
+        </Group>
+        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+          <Table
+            verticalSpacing={"xs"}
+            horizontalSpacing={"md"}
+            p={"md"}
+            striped
+            highlightOnHover
+          >
+            <thead>
+              <tr>
+                <th>
+                  <Center>Username</Center>
+                </th>
+                <th>
+                  <Center>Nomor</Center>
+                </th>
+                <th>
+                  <Center>Aksi</Center>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {dataAdmin.map((v: any, i: any) => (
+                <tr key={v.id}>
+                  <td>
+                    <Center>{v.username}</Center>
+                  </td>
+                  <td>
+                    <Center>{v.nomor}</Center>
+                  </td>
+                  <td>
+                    <Center>
+                      <Button radius={"xl"} color="red"
+                        onClick={() => onAccess(v.id)}
+                      >
+                        Delete Access
+                      </Button>
+                    </Center>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+          <Group sx={{ justifyContent: "flex-end" }} pt={10}>
+            <Pagination
+              value={isChoosePage}
+              onChange={(val) => {
+                onPageClick(val)
+              }}
+              total={isNPage}
+            />
+          </Group>
+        </Paper>
+      </Stack>
+    </>
+  )
+}
+
+
+
 function TableAdmin({
   dataAdmin,
   setDataAdmin,
@@ -67,10 +327,10 @@ function TableAdmin({
   async function onAccess(id: string) {
     await adminDeveloper_funEditUserAksesById(id, "1").then(async (res) => {
       if (res.status === 200) {
-        await adminDeveloper_funGetListAllUser().then((val) => {
+        await adminDeveloper_funGetListAllUser({ page: 1 }).then((val) => {
           setDataUser(val);
         });
-        await adminDeveloper_funGetListAllAdmin().then((val) => {
+        await adminDeveloper_funGetListAllAdmin({ page: 1 }).then((val) => {
           setDataAdmin(val);
         });
         ComponentGlobal_NotifikasiBerhasil(res.message);
@@ -155,10 +415,10 @@ function TableUser({
   async function onAccess(id: string) {
     await adminDeveloper_funEditUserAksesById(id, "2").then(async (res) => {
       if (res.status === 200) {
-        await adminDeveloper_funGetListAllUser().then((val) => {
-          setDataUser(val);
+        await adminDeveloper_funGetListAllUser({ page: 1 }).then((val) => {
+          setDataUser(val.data);
         });
-        await adminDeveloper_funGetListAllAdmin().then((val) => {
+        await adminDeveloper_funGetListAllAdmin({ page: 1 }).then((val) => {
           setDataAdmin(val);
         });
         ComponentGlobal_NotifikasiBerhasil(res.message);