Fix UI Admin Menu Pendidikam, Add Menu User & Role

prisma/data/user/role.json

@@ -1,6 +0,0 @@
-[
-    {
-        "id": "cmdpm429r0000vnndkcwslt0h",
-        "name": "warga"
-    }
-]

prisma/data/user/roles.json

@@ -0,0 +1,29 @@
+[
+    {
+      "id": "role_admin_desa",
+      "name": "ADMIN_DESA",
+      "description": "Administrator Desa",
+      "permissions": ["manage_users", "manage_content", "view_reports"],
+      "isActive": true,
+      "createdAt": "2025-09-01T00:00:00.000Z",
+      "updatedAt": "2025-09-01T00:00:00.000Z"
+    },
+    {
+      "id": "role_admin_kesehatan",
+      "name": "ADMIN_KESEHATAN",
+      "description": "Administrator Bidang Kesehatan",
+      "permissions": ["manage_health_data", "view_reports"],
+      "isActive": true,
+      "createdAt": "2025-09-01T00:00:00.000Z",
+      "updatedAt": "2025-09-01T00:00:00.000Z"
+    },
+    {
+      "id": "role_admin_sekolah",
+      "name": "ADMIN_SEKOLAH",
+      "description": "Administrator Sekolah",
+      "permissions": ["manage_school_data", "view_reports"],
+      "isActive": true,
+      "createdAt": "2025-09-01T00:00:00.000Z",
+      "updatedAt": "2025-09-01T00:00:00.000Z"
+    }
+  ]

prisma/data/user/users.json

@@ -0,0 +1,35 @@
+[
+    {
+      "id": "user_admin_desa",
+      "nama": "Admin Desa",
+      "email": "admin.desa@example.com",
+      "password": "$2b$10$XFDWYOJFxQ7ZM5bA0N4Z0O8u0eKYv58wLsaR7h6XK9bqWJ1YQJQ9q",
+      "roleId": "role_admin_desa",
+      "isActive": true,
+      "lastLogin": "2025-08-31T10:00:00.000Z",
+      "createdAt": "2025-09-01T00:00:00.000Z",
+      "updatedAt": "2025-09-01T00:00:00.000Z"
+    },
+    {
+      "id": "user_admin_puskesmas",
+      "nama": "Admin Kesehatan",
+      "email": "admin.kesehatan@example.com",
+      "password": "$2b$10$XFDWYOJFxQ7ZM5bA0N4Z0O8u0eKYv58wLsaR7h6XK9bqWJ1YQJQ9q",
+      "roleId": "role_admin_kesehatan",
+      "isActive": true,
+      "lastLogin": null,
+      "createdAt": "2025-09-01T00:00:00.000Z",
+      "updatedAt": "2025-09-01T00:00:00.000Z"
+    },
+    {
+      "id": "user_admin_sekolah",
+      "nama": "Admin Sekolah",
+      "email": "admin.sekolah@example.com",
+      "password": "$2b$10$XFDWYOJFxQ7ZM5bA0N4Z0O8u0eKYv58wLsaR7h6XK9bqWJ1YQJQ9q",
+      "roleId": "role_admin_sekolah",
+      "isActive": true,
+      "lastLogin": null,
+      "createdAt": "2025-09-01T00:00:00.000Z",
+      "updatedAt": "2025-09-01T00:00:00.000Z"
+    }
+  ]

prisma/schema.prisma

@@ -202,7 +202,7 @@ model PrestasiDesa {
   deskripsi  String               @db.Text
   kategori   KategoriPrestasiDesa @relation(fields: [kategoriId], references: [id])
   kategoriId String
-  image      FileStorage?          @relation(fields: [imageId], references: [id])
+  image      FileStorage?         @relation(fields: [imageId], references: [id])
   imageId    String?
   createdAt  DateTime             @default(now())
   updatedAt  DateTime             @updatedAt
@@ -293,9 +293,9 @@ model PosisiOrganisasiPPID {
   pegawai            PegawaiPPID[]
   strukturOrganisasi StrukturPPID[] // Relasi balik
   parentId           String?
-  isActive           Boolean              @default(true)
-  createdAt          DateTime             @default(now())
-  updatedAt          DateTime             @updatedAt
+  isActive           Boolean                @default(true)
+  createdAt          DateTime               @default(now())
+  updatedAt          DateTime               @updatedAt
   parent             PosisiOrganisasiPPID?  @relation("Parent", fields: [parentId], references: [id])
   children           PosisiOrganisasiPPID[] @relation("Parent")
 }
@@ -1639,28 +1639,29 @@ model ProgramKreatif {
 
 // ========================================= KOLABORASI INOVASI ========================================= //
 model KolaborasiInovasi {
-  id          String      @id @default(cuid())
+  id          String   @id @default(cuid())
   name        String
   tahun       Int
-  slug        String      @db.Text //deskripsi singkat
-  deskripsi   String      @db.Text //deskripsi panjang
+  slug        String   @db.Text //deskripsi singkat
+  deskripsi   String   @db.Text //deskripsi panjang
   kolaborator String
-  createdAt   DateTime    @default(now())
-  updatedAt   DateTime    @updatedAt
-  deletedAt   DateTime    @default(now())
-  isActive    Boolean     @default(true)
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+  deletedAt   DateTime @default(now())
+  isActive    Boolean  @default(true)
 }
 
 model MitraKolaborasi {
-  id        String   @id @default(cuid())
+  id        String       @id @default(cuid())
   name      String
   image     FileStorage? @relation(fields: [imageId], references: [id])
   imageId   String?
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
-  isActive  Boolean  @default(true)
+  createdAt DateTime     @default(now())
+  updatedAt DateTime     @updatedAt
+  deletedAt DateTime     @default(now())
+  isActive  Boolean      @default(true)
 }
+
 // ========================================= INFO TEKHNOLOGI TEPAT GUNA ========================================= //
 model InfoTekno {
   id        String      @id @default(cuid())
@@ -2103,25 +2104,43 @@ model KategoriBuku {
 }
 
 model User {
-  id        String   @id @default(cuid())
+  id        String    @id @default(cuid())
   nama      String
-  email     String   @unique
-  password  String
-  role      Role     @relation(fields: [roleId], references: [id])
+  email     String    @unique
+  password  String?
+  role      Role      @relation(fields: [roleId], references: [id])
   roleId    String
-  isActive  Boolean  @default(true)
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
+  instansi  String? // Nama instansi (Puskesmas, Sekolah, dll)
+  isActive  Boolean   @default(true)
+  lastLogin DateTime?
+  createdAt DateTime  @default(now())
+  updatedAt DateTime  @updatedAt
+  deletedAt DateTime?
 }
 
 model Role {
-  id        String   @id @default(cuid())
-  name      String
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
-  isActive  Boolean  @default(true)
-  User      User[]
+  id          String    @id @default(cuid())
+  name        String    @unique // ADMIN_DESA, ADMIN_KESEHATAN, ADMIN_SEKOLAH
+  description String?
+  permissions Json // Menyimpan permission dalam format JSON
+  isActive    Boolean   @default(true)
+  createdAt   DateTime  @default(now())
+  updatedAt   DateTime  @updatedAt
+  deletedAt   DateTime?
+  users       User[]
+
+  @@map("roles")
+}
+
+// Tabel untuk menyimpan permission
+model Permission {
+  id          String   @id @default(cuid())
+  name        String   @unique
+  description String?
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+
+  @@map("permissions")
 }
 
 // ========================================= DATA PENDIDIKAN ========================================= //

prisma/seed.ts

@@ -52,8 +52,52 @@ import tempatKegiatan from "./data/pendidikan/pendidikan-non-formal/tempat-kegia
 import tujuanProgram2 from "./data/pendidikan/pendidikan-non-formal/tujuan-program2.json";
 import programUnggulan from "./data/pendidikan/program-pendidikan-anak/program-unggulan.json";
 import tujuanProgram from "./data/pendidikan/program-pendidikan-anak/tujuan-program.json";
+import roles from "./data/user/roles.json";
+import users from "./data/user/users.json";
 
 (async () => {
+  // =========== USER & ROLE ===========
+  for (const r of roles) {
+    await prisma.role.upsert({
+      where: { id: r.id },
+      update: {
+        name: r.name,
+        description: r.description,
+        permissions: r.permissions,
+        isActive: true,
+      },
+      create: {
+        id: r.id,
+        name: r.name,
+        description: r.description,
+        permissions: r.permissions,
+        isActive: true,
+      },
+    });
+  }
+  console.log("✅ Roles seeded");
+  //users
+  for (const u of users) {
+    await prisma.user.upsert({
+      where: { id: u.id },
+      update: {
+        nama: u.nama,
+        email: u.email,
+        password: u.password,
+        roleId: u.roleId,
+        isActive: true,
+      },
+      create: {
+        id: u.id,
+        nama: u.nama,
+        email: u.email,
+        password: u.password,
+        roleId: u.roleId,
+        isActive: true,
+      },
+    });
+  }
+  console.log("✅ Users seeded");
   // =========== LANDING PAGE ===========
   // =========== SUBMENU PROFILE ===========
   // =========== PROFILE PEJABAT DESA ===========

src/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital.ts

@@ -317,14 +317,34 @@ const kategoriBuku = proxy({
         isActive: true;
       };
     }>[],
+    page: 1,
+    totalPages: 1,
     loading: false,
-    async load() {
-      const res =
-        await ApiFetch.api.pendidikan.perpustakaandigital.kategoribuku[
-          "findMany"
-        ].get();
-      if (res.status === 200) {
-        kategoriBuku.findMany.data = res.data?.data ?? [];
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      kategoriBuku.findMany.loading = true; // ✅ Akses langsung via nama path
+      kategoriBuku.findMany.page = page;
+      kategoriBuku.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.pendidikan.perpustakaandigital.kategoribuku["findMany"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          kategoriBuku.findMany.data = res.data.data ?? [];
+          kategoriBuku.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          kategoriBuku.findMany.data = [];
+          kategoriBuku.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch data kategori buku paginated:", err);
+        kategoriBuku.findMany.data = [];
+        kategoriBuku.findMany.totalPages = 1;
+      } finally {
+        kategoriBuku.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/user/user-state.ts

@@ -1,124 +1,43 @@
-import { proxy } from 'valtio'
-import { toast } from 'react-toastify'
-import ApiFetch from '@/lib/api-fetch'
-import { Prisma } from '@prisma/client'
-import { z } from 'zod'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { proxy } from "valtio";
+import { toast } from "react-toastify";
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { z } from "zod";
 
-// 1. Validasi Zod
-const userSchema = z.object({
-  nama: z.string().min(1, 'Nama harus diisi'),
-  email: z.string().email('Email tidak valid'),
-  password: z.string().min(6, 'Password minimal 6 karakter'),
-  roleId: z.string().optional(),
-})
-
-const defaultForm = { nama: '', email: '', password: '', roleId: '' }
-
-// 2. State Valtio
+// State Valtio
 const userState = proxy({
-  // Register
-  register: {
-    form: { ...defaultForm },
-    loading: false,
-    async submit() {
-      const valid = userSchema.omit({ roleId: true }).safeParse(userState.register.form)
-      if (!valid.success) {
-        const err = valid.error.issues.map(i => i.message).join(', ')
-        return toast.error(err)
-      }
-      try {
-        userState.register.loading = true
-        const res = await ApiFetch.api.user.register.post(userState.register.form)
-        if (res.status === 200) {
-          toast.success('Registrasi berhasil, silakan login')
-          userState.register.form = { ...defaultForm } // reset
-        } else {
-          toast.error(res.data?.message || 'Gagal registrasi')
-        }
-      } catch (e) {
-        console.error(e)
-        toast.error('Terjadi kesalahan saat registrasi')
-      } finally {
-        userState.register.loading = false
-      }
-    },
-  },
-
-  // Login
-  login: {
-    form: { email: '', password: '' },
-    loading: false,
-    async submit() {
-      try {
-        userState.login.loading = true
-        const res = await ApiFetch.api.user.login.post(userState.login.form)
-        if (res.status === 200) {
-          toast.success('Login berhasil')
-          const token = res.data?.data?.token
-          if (typeof token === 'string') {
-            localStorage.setItem('token', token)
-            // Optional: simpan user role untuk otorisasi
-            const user = res.data?.data?.user
-            localStorage.setItem('user', JSON.stringify(user))
-          }
-        } else {
-          toast.error(res.data?.message || 'Login gagal')
-        }
-      } catch (e) {
-        console.error(e)
-        toast.error('Terjadi kesalahan saat login')
-      } finally {
-        userState.login.loading = false
-      }
-    },
-  },
-
-  // CRUD User (untuk admin)
-  create: {
-    form: { ...defaultForm },
-    loading: false,
-    async create(isAdmin = false) {
-      const valid = userSchema.safeParse(userState.create.form)
-      if (!valid.success) {
-        const err = valid.error.issues.map(i => i.message).join(', ')
-        return toast.error(err)
-      }
-      try {
-        userState.create.loading = true
-        const endpoint = isAdmin ? 'create' : 'register'
-        const res = await ApiFetch.api.user[endpoint].post(userState.create.form)
-        if (res.status === 200) {
-          toast.success('User berhasil dibuat')
-          userState.findMany.load() // refresh list
-          userState.create.form = { ...defaultForm } // reset form
-        } else {
-          toast.error(res.data?.message || 'Gagal membuat user')
-        }
-      } catch (e) {
-        console.error(e)
-        toast.error('Gagal membuat user')
-      } finally {
-        userState.create.loading = false
-      }
-    },
-  },
-
   // Find Many
   findMany: {
     data: [] as Prisma.UserGetPayload<{ include: { role: true } }>[],
+    page: 1,
+    totalPages: 1,
     loading: false,
-    async load() {
-      this.loading = true
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      userState.findMany.loading = true; // ✅ Akses langsung via nama path
+      userState.findMany.page = page;
+      userState.findMany.search = search;
+
       try {
-        const res = await ApiFetch.api.user.findMany.get()
-        if (res.status === 200) {
-          this.data = res.data?.data || []
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.user["findMany"].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          userState.findMany.data = res.data.data ?? [];
+          userState.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          userState.findMany.data = [];
+          userState.findMany.totalPages = 1;
         }
-      } catch (e) {
-        console.error(e)
-        toast.error('Gagal muat data user')
+      } catch (err) {
+        console.error("Gagal fetch user paginated:", err);
+        userState.findMany.data = [];
+        userState.findMany.totalPages = 1;
       } finally {
-        this.loading = false
+        userState.findMany.loading = false;
       }
     },
   },
@@ -128,71 +47,20 @@ const userState = proxy({
     data: null as Prisma.UserGetPayload<{ include: { role: true } }> | null,
     loading: false,
     async load(id: string) {
-      this.loading = true
+      this.loading = true;
       try {
-        const res = await fetch(`/api/user/findUnique/${id}`)
-        const data = await res.json()
+        const res = await fetch(`/api/user/findUnique/${id}`);
+        const data = await res.json();
         if (res.status === 200) {
-          this.data = data.data
+          this.data = data.data;
         } else {
-          toast.error(data.message)
+          toast.error(data.message);
         }
       } catch (e) {
-        console.error(e)
-        toast.error('Gagal ambil data user')
+        console.error(e);
+        toast.error("Gagal ambil data user");
       } finally {
-        this.loading = false
-      }
-    },
-  },
-
-  // Update
-  update: {
-    id: '',
-    form: { ...defaultForm },
-    loading: false,
-    async load(id: string) {
-      this.loading = true
-      try {
-        const res = await fetch(`/api/user/findUnique/${id}`)
-        const data = await res.json()
-        if (res.status === 200) {
-          const user = data.data
-          this.id = user.id
-          this.form = {
-            nama: user.nama,
-            email: user.email,
-            password: '', // jangan kirim password lama
-            roleId: user.roleId,
-          }
-        }
-      } catch (e) {
-        console.error(e)
-        toast.error('Gagal muat data')
-      } finally {
-        this.loading = false
-      }
-    },
-    async submit() {
-      this.loading = true
-      try {
-        const res = await fetch(`/api/user/update/${this.id}`, {
-          method: 'PUT',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(this.form),
-        })
-        const data = await res.json()
-        if (res.status === 200) {
-          toast.success('Update berhasil')
-          userState.findMany.load()
-        } else {
-          toast.error(data.message || 'Gagal update')
-        }
-      } catch (e) {
-        console.error(e)
-        toast.error('Gagal update user')
-      } finally {
-        this.loading = false
+        this.loading = false;
       }
     },
   },
@@ -201,35 +69,37 @@ const userState = proxy({
   delete: {
     loading: false,
     async submit(id: string) {
-      this.loading = true
+      this.loading = true;
       try {
         const res = await fetch(`/api/user/del/${id}`, {
-          method: 'PUT',
-          headers: { 'Content-Type': 'application/json' },
-        })
-        const data = await res.json()
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+        });
+        const data = await res.json();
         if (res.status === 200) {
-          toast.success('User dinonaktifkan')
-          userState.findMany.load()
+          toast.success("User dinonaktifkan");
+          userState.findMany.load();
         } else {
-          toast.error(data.message || 'Gagal hapus')
+          toast.error(data.message || "Gagal hapus");
         }
       } catch (e) {
-        console.error(e)
-        toast.error('Gagal hapus user')
+        console.error(e);
+        toast.error("Gagal hapus user");
       } finally {
-        this.loading = false
+        this.loading = false;
       }
     },
   },
-})
+});
 
 const templateRole = z.object({
   name: z.string().min(1, "Nama harus diisi"),
+  permissions: z.array(z.string()).min(1, "Permission harus diisi"),
 });
 
 const defaultRole = {
   name: "",
+  permissions: [] as string[],
 };
 
 const roleState = proxy({
@@ -247,10 +117,9 @@ const roleState = proxy({
 
       try {
         roleState.create.loading = true;
-        const res =
-          await ApiFetch.api.role[
-            "create"
-          ].post(roleState.create.form);
+        const res = await ApiFetch.api.role["create"].post(
+          roleState.create.form
+        );
         if (res.status === 200) {
           roleState.findMany.load();
           return toast.success("Data role Berhasil Dibuat");
@@ -273,10 +142,7 @@ const roleState = proxy({
     }>[],
     loading: false,
     async load() {
-      const res =
-        await ApiFetch.api.role[
-          "findMany"
-        ].get();
+      const res = await ApiFetch.api.role["findMany"].get();
       if (res.status === 200) {
         roleState.findMany.data = res.data?.data ?? [];
       }
@@ -291,9 +157,7 @@ const roleState = proxy({
     loading: false,
     async load(id: string) {
       try {
-        const res = await fetch(
-          `/api/role/${id}`
-        );
+        const res = await fetch(`/api/role/${id}`);
         if (res.ok) {
           const data = await res.json();
           roleState.findUnique.data = data.data ?? null;
@@ -315,22 +179,17 @@ const roleState = proxy({
       try {
         roleState.delete.loading = true;
 
-        const response = await fetch(
-          `/api/role/del/${id}`,
-          {
-            method: "DELETE",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
+        const response = await fetch(`/api/role/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
 
         const result = await response.json();
 
         if (response.ok && result?.success) {
-          toast.success(
-            result.message || "Data role berhasil dihapus"
-          );
+          toast.success(result.message || "Data role berhasil dihapus");
           await roleState.findMany.load(); // refresh list
         } else {
           toast.error(result?.message || "Gagal menghapus Data role");
@@ -354,15 +213,12 @@ const roleState = proxy({
       }
 
       try {
-        const response = await fetch(
-          `/api/role/${id}`,
-          {
-            method: "GET",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
+        const response = await fetch(`/api/role/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
         }
@@ -374,6 +230,7 @@ const roleState = proxy({
           this.id = data.id;
           this.form = {
             name: data.name,
+            permissions: data.permissions,
           };
           return data; // Return the loaded data
         } else {
@@ -400,18 +257,16 @@ const roleState = proxy({
       try {
         roleState.update.loading = true;
 
-        const response = await fetch(
-          `/api/role/${this.id}`,
-          {
-            method: "PUT",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              name: this.form.name,
-            }),
-          }
-        );
+        const response = await fetch(`/api/role/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: this.form.name,
+            permissions: this.form.permissions,
+          }),
+        });
 
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));
@@ -451,6 +306,6 @@ const roleState = proxy({
 const user = proxy({
   userState,
   roleState,
-})
+});
 
-export default user
+export default user;

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/_lib/layouTabs.tsx

@@ -4,6 +4,7 @@ import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { IconList, IconCategory } from '@tabler/icons-react';
+import colors from '@/con/colors';
 
 function LayoutTabs({ children }: { children: React.ReactNode }) {
     const router = useRouter();
@@ -50,6 +51,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
                 Desa Anti Korupsi
             </Title>
             <Tabs
+                color={colors['blue-button']}
                 variant="pills"
                 value={activeTab}
                 onChange={handleTabChange}

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/_lib/layoutTab.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+import colors from '@/con/colors';
 import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { IconChartBar, IconUsers } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
@@ -46,7 +47,7 @@ function LayoutTabsKepuasan({ children }: { children: React.ReactNode }) {
       </Title>
       <Tabs
         radius="xl"
-        color="blue"
+        color={colors['blue-button']}
         variant="pills"
         value={activeTab}
         onChange={handleTabChange}

src/app/admin/(dashboard)/landing-page/prestasi-desa/_lib/layoutTabs.tsx

@@ -4,6 +4,7 @@ import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { IconCategory, IconListDetails } from '@tabler/icons-react';
+import colors from '@/con/colors';
 
 function LayoutTabs({ children }: { children: React.ReactNode }) {
   const router = useRouter();
@@ -50,6 +51,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         Prestasi Desa
       </Title>
       <Tabs
+        color={colors['blue-button']}
         variant="pills"
         value={activeTab}
         onChange={handleTabChange}

src/app/admin/(dashboard)/landing-page/profile/_lib/layoutTabs.tsx

@@ -4,6 +4,7 @@ import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { IconBulb, IconUsers, IconBrandFacebook } from '@tabler/icons-react';
+import colors from '@/con/colors';
 
 function LayoutTabs({ children }: { children: React.ReactNode }) {
   const router = useRouter();
@@ -57,7 +58,8 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         Profil Desa
       </Title>
       <Tabs
-        variant="pills"
+        color={colors['blue-button']}
+        variant='pills'
         value={activeTab}
         onChange={handleTabChange}
         radius="lg"

src/app/admin/(dashboard)/pendidikan/beasiswa-desa/_lib/layoutTabs.tsx

@@ -1,63 +1,111 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
+import { IconSchool, IconStar } from '@tabler/icons-react';
 
 function LayoutTabs({ children }: { children: React.ReactNode }) {
-  const router = useRouter()
-  const pathname = usePathname()
+  const router = useRouter();
+  const pathname = usePathname();
+
   const tabs = [
     {
       label: "Beasiswa Pendaftar",
       value: "beasiswa-pendaftar",
-      href: "/admin/pendidikan/beasiswa-desa/beasiswa-pendaftar"
+      href: "/admin/pendidikan/beasiswa-desa/beasiswa-pendaftar",
+      icon: <IconSchool size={18} stroke={1.8} />,
+      tooltip: "Kelola data pendaftar beasiswa desa",
     },
     {
       label: "Keunggulan Program",
       value: "keunggulan-program",
-      href: "/admin/pendidikan/beasiswa-desa/keunggulan-program"
+      href: "/admin/pendidikan/beasiswa-desa/keunggulan-program",
+      icon: <IconStar size={18} stroke={1.8} />,
+      tooltip: "Lihat keunggulan dan detail program beasiswa",
     },
-    
   ];
-  const curentTab = tabs.find(tab => tab.href === pathname)
-  const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+  const currentTab = tabs.find(tab => tab.href === pathname);
+  const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
 
   const handleTabChange = (value: string | null) => {
-    const tab = tabs.find(t => t.value === value)
+    const tab = tabs.find(t => t.value === value);
     if (tab) {
-      router.push(tab.href)
+      router.push(tab.href);
     }
-    setActiveTab(value)
-  }
+    setActiveTab(value);
+  };
 
   useEffect(() => {
-    const match = tabs.find(tab => tab.href === pathname)
+    const match = tabs.find(tab => tab.href === pathname);
     if (match) {
-      setActiveTab(match.value)
+      setActiveTab(match.value);
     }
-  }, [pathname])
+  }, [pathname]);
 
   return (
-    <Stack>
-      <Title order={3}>Beasiswa Desa</Title>
-      <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
-        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-          {tabs.map((e, i) => (
-            <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+    <Stack gap="lg">
+      <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
+        Beasiswa Desa
+      </Title>
+      <Tabs
+        color={colors['blue-button']}
+        variant="pills"
+        value={activeTab}
+        onChange={handleTabChange}
+        radius="lg"
+        keepMounted={false}
+      >
+        <TabsList
+          p="sm"
+          style={{
+            background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+            borderRadius: "1rem",
+            boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+          }}
+        >
+          {tabs.map((tab, i) => (
+            <Tooltip 
+              key={i} 
+              label={tab.tooltip} 
+              position="bottom" 
+              withArrow 
+              transitionProps={{ transition: 'pop', duration: 200 }}
+            >
+              <TabsTab
+                value={tab.value}
+                leftSection={tab.icon}
+                style={{
+                  fontWeight: 600,
+                  fontSize: "0.9rem",
+                  transition: "all 0.2s ease",
+                }}
+              >
+                {tab.label}
+              </TabsTab>
+            </Tooltip>
           ))}
         </TabsList>
-        {tabs.map((e, i) => (
-          <TabsPanel key={i} value={e.value}>
-            {/* Konten dummy, bisa diganti tergantung routing */}
-            <></>
+
+        {tabs.map((tab, i) => (
+          <TabsPanel
+            key={i}
+            value={tab.value}
+            style={{
+              padding: "1.5rem",
+              background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+              borderRadius: "1rem",
+              boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+            }}
+          >
+            {children}
           </TabsPanel>
         ))}
       </Tabs>
-      {children}
     </Stack>
   );
 }
 
-export default LayoutTabs;
+export default LayoutTabs;

src/app/admin/(dashboard)/pendidikan/beasiswa-desa/beasiswa-pendaftar/[id]/page.tsx

@@ -2,133 +2,150 @@
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import beasiswaDesaState from '@/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa';
 import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
-
 function DetailBeasiswaPendaftar() {
-  const state = useProxy(beasiswaDesaState.beasiswaPendaftar)
+  const state = useProxy(beasiswaDesaState.beasiswaPendaftar);
   const [modalHapus, setModalHapus] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
-  const router = useRouter()
-  const params = useParams()
+  const params = useParams();
+  const router = useRouter();
 
   useShallowEffect(() => {
-    state.findUnique.load(params?.id as string)
-  }, [])
+    state.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      state.delete.delete(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/pendidikan/beasiswa-desa/beasiswa-pendaftar")
+      state.delete.delete(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/pendidikan/beasiswa-desa/beasiswa-pendaftar");
     }
-  }
+  };
 
   if (!state.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = state.findUnique.data;
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Flex justify="space-between" gap={"xs"}>
-            <Text fz={"xl"} fw={"bold"}>Detail Beasiswa Pendaftar</Text>
-            <Button
-              onClick={() => {
-                if (state.findUnique.data) {
-                  setSelectedId(state.findUnique.data.id);
-                  setModalHapus(true);
-                }
-              }}
-              disabled={state.delete.loading || !state.findUnique.data}
-              color={"red"}
-            >
-              <IconX size={20} />
-            </Button>
-          </Flex>
-          {state.findUnique.data ? (
-            <Paper key={state.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Nama Lengkap</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.namaLengkap}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>NIK</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.nik}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Tempat Lahir</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.tempatLahir}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Tanggal Lahir</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.tanggalLahir ? new Date(state.findUnique.data.tanggalLahir).toLocaleDateString() : '-'}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Jenis Kelamin</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.jenisKelamin}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Kewarganegaraan</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.kewarganegaraan}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Agama</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.agama}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Alamat KTP</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.alamatKTP}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Alamat Domisili</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.alamatDomisili}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>No HP</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.noHp}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Email</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.email}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Status Pernikahan</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.statusPernikahan}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Ukuran Baju</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.ukuranBaju}</Text>
-                </Box>
-              </Stack>
-            </Paper>
-          ) : null}
+    <Box py={10}>
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      <Paper
+        withBorder
+        w={{ base: "100%", md: "70%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Beasiswa Pendaftar
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">Nama Lengkap</Text>
+                <Text fz="md" c="dimmed">{data.namaLengkap || '-'}</Text>
+              </Box>
+              <Box>
+                <Text fz="lg" fw="bold">NIK</Text>
+                <Text fz="md" c="dimmed">{data.nik || '-'}</Text>
+              </Box>
+              <Box>
+                <Text fz="lg" fw="bold">Tempat Lahir</Text>
+                <Text fz="md" c="dimmed">{data.tempatLahir || '-'}</Text>
+              </Box>
+              <Box>
+                <Text fz="lg" fw="bold">Tanggal Lahir</Text>
+                <Text fz="md" c="dimmed">
+                  {data.tanggalLahir ? new Date(data.tanggalLahir).toLocaleDateString() : '-'}
+                </Text>
+              </Box>
+              <Box>
+                <Text fz="lg" fw="bold">Jenis Kelamin</Text>
+                <Text fz="md" c="dimmed">{data.jenisKelamin || '-'}</Text>
+              </Box>
+              <Box>
+                <Text fz="lg" fw="bold">Kewarganegaraan</Text>
+                <Text fz="md" c="dimmed">{data.kewarganegaraan || '-'}</Text>
+              </Box>
+              <Box>
+                <Text fz="lg" fw="bold">Agama</Text>
+                <Text fz="md" c="dimmed">{data.agama || '-'}</Text>
+              </Box>
+              <Box>
+                <Text fz="lg" fw="bold">Alamat KTP</Text>
+                <Text fz="md" c="dimmed">{data.alamatKTP || '-'}</Text>
+              </Box>
+              <Box>
+                <Text fz="lg" fw="bold">Alamat Domisili</Text>
+                <Text fz="md" c="dimmed">{data.alamatDomisili || '-'}</Text>
+              </Box>
+              <Box>
+                <Text fz="lg" fw="bold">No HP</Text>
+                <Text fz="md" c="dimmed">{data.noHp || '-'}</Text>
+              </Box>
+              <Box>
+                <Text fz="lg" fw="bold">Email</Text>
+                <Text fz="md" c="dimmed">{data.email || '-'}</Text>
+              </Box>
+              <Box>
+                <Text fz="lg" fw="bold">Status Pernikahan</Text>
+                <Text fz="md" c="dimmed">{data.statusPernikahan || '-'}</Text>
+              </Box>
+              <Box>
+                <Text fz="lg" fw="bold">Ukuran Baju</Text>
+                <Text fz="md" c="dimmed">{data.ukuranBaju || '-'}</Text>
+              </Box>
+
+              <Group gap="sm" mt="md">
+                <Tooltip label="Hapus Pendaftar" withArrow position="top">
+                  <Button
+                    color="red"
+                    onClick={() => {
+                      setSelectedId(data.id);
+                      setModalHapus(true);
+                    }}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconTrash size={20} />
+                  </Button>
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
-      {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus beasiswa desa ini?'
+        text="Apakah Anda yakin ingin menghapus data pendaftar ini?"
       />
     </Box>
   );

src/app/admin/(dashboard)/pendidikan/beasiswa-desa/beasiswa-pendaftar/page.tsx

@@ -1,107 +1,149 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import {
+    Box,
+    Button,
+    Center,
+    Group,
+    Pagination,
+    Paper,
+    Skeleton,
+    Stack,
+    Table,
+    TableTbody,
+    TableTd,
+    TableTh,
+    TableThead,
+    TableTr,
+    Text,
+    Title
+} from '@mantine/core';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import HeaderSearch from '../../../_com/header';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
 import beasiswaDesaState from '../../../_state/pendidikan/beasiswa-desa';
 
-
 function BeasiswaPendaftar() {
-    const [search, setSearch] = useState('');
-    return (
-        <Box>
-            <HeaderSearch
-                title='Beasiswa Pendaftar'
-                placeholder='pencarian'
-                searchIcon={<IconSearch size={20} />}
-                value={search}
-                onChange={(e) => setSearch(e.currentTarget.value)}
-            />
-            <ListBeasiswaPendaftar search={search} />
-        </Box>
-    );
+  const [search, setSearch] = useState('');
+  return (
+    <Box>
+      <HeaderSearch
+        title='Beasiswa Pendaftar'
+        placeholder='Cari nama, alamat, atau data lain...'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListBeasiswaPendaftar search={search} />
+    </Box>
+  );
 }
 
 function ListBeasiswaPendaftar({ search }: { search: string }) {
-    const listDataState = useProxy(beasiswaDesaState.beasiswaPendaftar)
-    const router = useRouter();
+  const state = useProxy(beasiswaDesaState.beasiswaPendaftar);
+  const router = useRouter();
 
-    useEffect(() => {
-        listDataState.findMany.load()
-    }, [])
+  const { data, page, totalPages, loading, load } = state.findMany;
 
-    const filteredData = (listDataState.findMany.data || []).filter(item => {
-        const keyword = search.toLowerCase();
-        return (
-            item.namaLengkap.toLowerCase().includes(keyword) ||
-            item.alamatKTP.toLowerCase().includes(keyword) ||
-            (item.tanggalLahir ? new Date(item.tanggalLahir).toLocaleDateString() : '').toLowerCase().includes(keyword) ||
-            item.jenisKelamin.toLowerCase().includes(keyword)
-        );
-    });
+  useEffect(() => {
+    load(page, 10, search);
+  }, [page, search]);
 
-    if (!listDataState.findMany.data) {
-        return (
-            <Stack py={10}>
-                <Skeleton h={500} />
-            </Stack>
-        )
-    }
+  const filteredData = data || [];
+
+  if (loading || !data) {
     return (
-        <Box py={10}>
-            <Paper bg={colors['white-1']} p="md">
-                <Stack>
-                    <Title order={4}>List Beasiswa Pendaftar</Title>
-                    <Box style={{ overflowX: 'auto' }}>
-                        <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-                            <TableThead>
-                                <TableTr>
-                                    <TableTh>No</TableTh>
-                                    <TableTh>Nama Lengkap</TableTh>
-                                    <TableTh>Alamat</TableTh>
-                                    <TableTh>Tanggal Lahir</TableTh>
-                                    <TableTh>Jenis Kelamin</TableTh>
-                                    <TableTh>Detail</TableTh>
-                                </TableTr>
-                            </TableThead>
-                            <TableTbody>
-                                {filteredData.map((item, index) => (
-                                    <TableTr key={item.id}>
-                                        <TableTd>
-                                            <Box w={100}>
-                                                <Text truncate="end" fz={"sm"}>{index + 1}</Text>
-                                            </Box>
-                                        </TableTd>
-                                    <TableTd>
-                                        <Text truncate="end" fz={"sm"}>{item.namaLengkap}</Text>
-                                    </TableTd>
-                                    <TableTd>
-                                        <Text truncate="end" fz={"sm"}>{item.alamatKTP}</Text>
-                                    </TableTd>
-                                    <TableTd>
-                                        <Text truncate="end" fz={"sm"}>{item.tanggalLahir ? new Date(item.tanggalLahir).toLocaleDateString() : '-'}</Text>
-                                    </TableTd>
-                                    <TableTd>
-                                        <Text truncate="end" fz={"sm"}>{item.jenisKelamin}</Text>
-                                    </TableTd>
-                                    <TableTd>
-                                        <Button onClick={() => router.push(`/admin/pendidikan/beasiswa-desa/beasiswa-pendaftar/${item.id}`)}>
-                                            <IconDeviceImacCog size={25} />
-                                        </Button>
-                                    </TableTd>
-                                </TableTr>
-                            ))}
-                            </TableTbody>   
-                        </Table>
-                    </Box>
-                </Stack>
-            </Paper>
+      <Stack py={10}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
+    );
+  }
+
+  return (
+    <Box py={10}>
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Beasiswa Pendaftar</Title>
+        </Group>
+
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh>No</TableTh>
+                <TableTh>Nama Lengkap</TableTh>
+                <TableTh>Alamat</TableTh>
+                <TableTh>Tanggal Lahir</TableTh>
+                <TableTh>Jenis Kelamin</TableTh>
+                <TableTh>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item, index) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{index + 1}</TableTd>
+                    <TableTd>
+                      <Text truncate fz="sm">{item.namaLengkap}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text truncate fz="sm">{item.alamatKTP}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text truncate fz="sm">
+                        {item.tanggalLahir ? new Date(item.tanggalLahir).toLocaleDateString() : '-'}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text truncate fz="sm">{item.jenisKelamin}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() =>
+                          router.push(`/admin/pendidikan/beasiswa-desa/beasiswa-pendaftar/${item.id}`)
+                        }
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={6}>
+                    <Center py={20}>
+                      <Text c="dimmed">Tidak ada data pendaftar yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
         </Box>
-    )
+      </Paper>
+
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10, search);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+          color="blue"
+          radius="md"
+        />
+      </Center>
+    </Box>
+  );
 }
 
 export default BeasiswaPendaftar;

src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/create/page.tsx

@@ -34,7 +34,7 @@ function CreateKeunggulanProgram() {
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" color="blue" position="bottom">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
           <Button
             variant="subtle"
             onClick={() => router.back()}

src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/page.tsx

@@ -1,6 +1,24 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrashFilled } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -10,14 +28,13 @@ import HeaderSearch from '../../../_com/header';
 import beasiswaDesaState from '../../../_state/pendidikan/beasiswa-desa';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 
-
 function KeunggulanProgram() {
   const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
-        title='List Keunggulan Program'
-        placeholder='Cari keunggulan program...'
+        title="List Keunggulan Program"
+        placeholder="Cari keunggulan program..."
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -28,45 +45,38 @@ function KeunggulanProgram() {
 }
 
 function ListKeunggulanProgram({ search }: { search: string }) {
-  const stateList = useProxy(beasiswaDesaState.keunggulanProgram)
-  const router = useRouter()
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const stateList = useProxy(beasiswaDesaState.keunggulanProgram);
+  const router = useRouter();
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
 
-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-    load,
-  } = stateList.findMany
+  const { data, page, totalPages, loading, load } = stateList.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search)
-  }, [page, search])
+    load(page, 10, search);
+  }, [page, search]);
 
   const handleHapus = () => {
     if (selectedId) {
-      stateList.delete.delete(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
+      stateList.delete.delete(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
     }
-  }
+  };
 
-
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={600} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p="lg" shadow="md" radius="md">
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Group justify="space-between" mb="md">
           <Title order={4}>Daftar Keunggulan Program</Title>
           <Tooltip label="Tambah Keunggulan Program" withArrow>
@@ -74,7 +84,11 @@ function ListKeunggulanProgram({ search }: { search: string }) {
               leftSection={<IconPlus size={18} />}
               color="blue"
               variant="light"
-              onClick={() => router.push('/admin/pendidikan/beasiswa-desa/keunggulan-program/create')}
+              onClick={() =>
+                router.push(
+                  '/admin/pendidikan/beasiswa-desa/keunggulan-program/create'
+                )
+              }
             >
               Tambah Baru
             </Button>
@@ -85,10 +99,10 @@ function ListKeunggulanProgram({ search }: { search: string }) {
           <Table highlightOnHover>
             <TableThead>
               <TableTr>
-                <TableTh>Nama Keunggulan Program</TableTh>
-                <TableTh>Deskripsi</TableTh>
-                <TableTh>Edit</TableTh>
-                <TableTh>Delete</TableTh>
+                <TableTh style={{ width: '30%' }}>Nama Keunggulan Program</TableTh>
+                <TableTh style={{ width: '35%' }}>Deskripsi</TableTh>
+                <TableTh style={{ width: '15%' }}>Edit</TableTh>
+                <TableTh style={{ width: '15%' }}>Delete</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -96,10 +110,17 @@ function ListKeunggulanProgram({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text lineClamp={1} truncate="end" fw={500}>{item.judul}</Text>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.judul}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Text lineClamp={1} truncate="end" fw={500} dangerouslySetInnerHTML={{ __html: item.deskripsi }}></Text>
+                      <Text
+                        fw={500}
+                        truncate="end"
+                        lineClamp={1}
+                        dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                      />
                     </TableTd>
                     <TableTd>
                       <Tooltip label="Edit" withArrow>
@@ -107,7 +128,11 @@ function ListKeunggulanProgram({ search }: { search: string }) {
                           variant="light"
                           color="green"
                           size="sm"
-                          onClick={() => router.push(`/admin/pendidikan/beasiswa-desa/keunggulan-program/${item.id}`)}
+                          onClick={() =>
+                            router.push(
+                              `/admin/pendidikan/beasiswa-desa/keunggulan-program/${item.id}`
+                            )
+                          }
                         >
                           <IconEdit size={18} />
                         </Button>
@@ -132,34 +157,43 @@ function ListKeunggulanProgram({ search }: { search: string }) {
                 ))
               ) : (
                 <TableTr>
-                  <TableTd colSpan={3} align="center" py="xl">
-                    <Text c="dimmed">Tidak ada data pengelolaan sampah</Text>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text c="dimmed">
+                        Tidak ada data keunggulan program yang cocok
+                      </Text>
+                    </Center>
                   </TableTd>
                 </TableTr>
               )}
             </TableTbody>
           </Table>
         </Box>
-
-        {totalPages > 1 && (
-          <Center mt="xl">
-            <Pagination
-              value={page}
-              onChange={(newPage) => load(newPage)}
-              total={totalPages}
-              siblings={1}
-              boundaries={1}
-              withEdges
-            />
-          </Center>
-        )}
       </Paper>
+
+      {totalPages > 1 && (
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            }}
+            total={totalPages}
+            mt="md"
+            mb="md"
+            color="blue"
+            radius="md"
+          />
+        </Center>
+      )}
+
       {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus pengelolaan sampah bank sampah ini?'
+        text="Apakah anda yakin ingin menghapus keunggulan program ini?"
       />
     </Box>
   );

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/_lib/layoutTabs.tsx

@@ -1,68 +1,118 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
+import { IconSchool, IconCalendar, IconBuildingCommunity } from '@tabler/icons-react';
 
 function LayoutTabs({ children }: { children: React.ReactNode }) {
-  const router = useRouter()
-  const pathname = usePathname()
+  const router = useRouter();
+  const pathname = usePathname();
+
   const tabs = [
     {
       label: "Tujuan Program",
       value: "tujuan-program",
-      href: "/admin/pendidikan/bimbingan-belajar-desa/tujuan-program"
+      href: "/admin/pendidikan/bimbingan-belajar-desa/tujuan-program",
+      icon: <IconSchool size={18} stroke={1.8} />,
+      tooltip: "Lihat tujuan utama program bimbingan belajar",
     },
     {
       label: "Lokasi dan Jadwal",
       value: "lokasi-dan-jadwal",
-      href: "/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal"
+      href: "/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal",
+      icon: <IconCalendar size={18} stroke={1.8} />,
+      tooltip: "Atur lokasi pelaksanaan dan jadwal bimbingan",
     },
     {
-      label: "Fasilitas yang disediakan",
+      label: "Fasilitas yang Disediakan",
       value: "fasilitas-yang-disediakan",
-      href: "/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan"
+      href: "/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan",
+      icon: <IconBuildingCommunity size={18} stroke={1.8} />,
+      tooltip: "Kelola fasilitas yang tersedia untuk peserta",
     },
-    
   ];
-  const curentTab = tabs.find(tab => tab.href === pathname)
-  const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+  const currentTab = tabs.find(tab => tab.href === pathname);
+  const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
 
   const handleTabChange = (value: string | null) => {
-    const tab = tabs.find(t => t.value === value)
+    const tab = tabs.find(t => t.value === value);
     if (tab) {
-      router.push(tab.href)
+      router.push(tab.href);
     }
-    setActiveTab(value)
-  }
+    setActiveTab(value);
+  };
 
   useEffect(() => {
-    const match = tabs.find(tab => tab.href === pathname)
+    const match = tabs.find(tab => tab.href === pathname);
     if (match) {
-      setActiveTab(match.value)
+      setActiveTab(match.value);
     }
-  }, [pathname])
+  }, [pathname]);
 
   return (
-    <Stack>
-      <Title order={3}>Bimbingan Belajar Desa</Title>
-      <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
-        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-          {tabs.map((e, i) => (
-            <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+    <Stack gap="lg">
+      <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
+        Bimbingan Belajar Desa
+      </Title>
+      <Tabs
+        color={colors['blue-button']}
+        variant="pills"
+        value={activeTab}
+        onChange={handleTabChange}
+        radius="lg"
+        keepMounted={false}
+      >
+        <TabsList
+          p="sm"
+          style={{
+            background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+            borderRadius: "1rem",
+            boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+          }}
+        >
+          {tabs.map((tab, i) => (
+            <Tooltip
+              key={i}
+              label={tab.tooltip}
+              position="bottom"
+              withArrow
+              transitionProps={{ transition: 'pop', duration: 200 }}
+            >
+              <TabsTab
+                value={tab.value}
+                leftSection={tab.icon}
+                style={{
+                  fontWeight: 600,
+                  fontSize: "0.9rem",
+                  transition: "all 0.2s ease",
+                }}
+              >
+                {tab.label}
+              </TabsTab>
+            </Tooltip>
           ))}
         </TabsList>
-        {tabs.map((e, i) => (
-          <TabsPanel key={i} value={e.value}>
-            {/* Konten dummy, bisa diganti tergantung routing */}
-            <></>
+
+        {tabs.map((tab, i) => (
+          <TabsPanel
+            key={i}
+            value={tab.value}
+            style={{
+              padding: "1.5rem",
+              background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+              borderRadius: "1rem",
+              boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+            }}
+          >
+            {children}
           </TabsPanel>
         ))}
       </Tabs>
-      {children}
     </Stack>
   );
 }
 
-export default LayoutTabs;
+export default LayoutTabs;

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit/page.tsx

@@ -1,86 +1,167 @@
 'use client'
 import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import { toast } from 'react-toastify';
 
-const BimbinganBelajarDesaTextEditor = dynamic(() => import('../../_lib/bimbinganBelajarDesaTextEditor').then(mod => mod.BimbinganBelajarDesaTextEditor), {
-  ssr: false,
-});
+const BimbinganBelajarDesaTextEditor = dynamic(
+  () =>
+    import('../../_lib/bimbinganBelajarDesaTextEditor').then(
+      (mod) => mod.BimbinganBelajarDesaTextEditor
+    ),
+  { ssr: false }
+);
+
+function EditFasilitasYangDisediakan() {
+  const router = useRouter();
+  const editState = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState);
 
-function EditTujuanProgram() {
-  const router = useRouter()
-  const editState = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState)
   const [judul, setJudul] = useState('');
   const [content, setContent] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Load data pertama kali
   useShallowEffect(() => {
     if (!editState.findById.data) {
-      editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+      editState.findById.initialize();
     }
   }, []);
 
+  // Sinkronkan state dengan data yang sudah di-load
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '')
-      setContent(editState.findById.data.deskripsi ?? '')
+      setJudul(editState.findById.data.judul ?? '');
+      setContent(editState.findById.data.deskripsi ?? '');
     }
-  }, [editState.findById.data])
+  }, [editState.findById.data]);
 
-  const submit = () => {
-    if (editState.findById.data) {
-      editState.findById.data.judul = judul;
-      editState.findById.data.deskripsi = content;
-      editState.update.save(editState.findById.data)
+  const handleSubmit = async () => {
+    if (!judul.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
     }
-    router.push('/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan')
+
+    setIsSubmitting(true);
+    try {
+      if (editState.findById.data) {
+        editState.findById.data.judul = judul;
+        editState.findById.data.deskripsi = content;
+        await editState.update.save(editState.findById.data);
+
+        toast.success('Berhasil menyimpan perubahan');
+        router.push('/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan');
+      }
+    } catch (err) {
+      console.error('Error saving:', err);
+      toast.error('Gagal menyimpan data');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleBack = () => router.back();
+
+  // Loading state
+  if (editState.findById.loading) {
+    return (
+      <Box>
+        <Center h={400}>
+          <Text>Memuat data fasilitas yang disediakan...</Text>
+        </Center>
+      </Box>
+    );
   }
+
   return (
     <Box>
-      <Stack gap={'xs'}>
-        <Box>
-          <Button
-            variant={'subtle'}
-            onClick={() => router.back()}
-          >
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
-            <Stack gap={'xs'}>
-              <Title order={3}>Edit Fasilitas Yang Disediakan</Title>
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
-                value={judul}
-                onChange={(e) => setJudul(e.target.value)}
-              />
-              <Text fw={"bold"}>Deskripsi</Text>
+      <Stack gap="xs">
+        <Group mb="md">
+          <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+            <Button
+              variant="subtle"
+              onClick={handleBack}
+              p="xs"
+              radius="md"
+            >
+              <IconArrowBack color={colors['blue-button']} size={24} />
+            </Button>
+          </Tooltip>
+          <Title order={4} ml="sm" c="dark">
+            Edit Fasilitas Yang Disediakan
+          </Title>
+        </Group>
+
+        <Paper
+          w={{ base: '100%', md: '50%' }}
+          bg={colors['white-1']}
+          p="md"
+          radius="md"
+          shadow="sm"
+          style={{ border: '1px solid #e0e0e0' }}
+        >
+          <Stack gap="xs">
+            <Title order={3}>Formulir Edit</Title>
+
+            {/* Judul */}
+            <TextInput
+              label={<Text fw="bold">Judul</Text>}
+              placeholder="Masukkan judul fasilitas"
+              value={judul}
+              onChange={(e) => setJudul(e.currentTarget.value)}
+              error={!judul && 'Judul wajib diisi'}
+            />
+
+            {/* Deskripsi */}
+            <Box>
+              <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
               <BimbinganBelajarDesaTextEditor
                 showSubmit={false}
                 onChange={setContent}
                 initialContent={content}
               />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={submit}
-                  loading={editState.update.loading}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
+            </Box>
+
+            {/* Tombol Aksi */}
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                onClick={handleSubmit}
+                loading={isSubmitting || editState.update.loading}
+                disabled={!judul}
+              >
+                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
+              </Button>
+
+              <Button
+                variant="outline"
+                onClick={handleBack}
+                disabled={isSubmitting || editState.update.loading}
+              >
+                Batal
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
       </Stack>
     </Box>
   );
 }
 
-export default EditTujuanProgram;
+export default EditFasilitasYangDisediakan;

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -8,47 +8,86 @@ import { useProxy } from 'valtio/utils';
 import stateBimbinganBelajarDesa from '../../../_state/pendidikan/bimbingan-belajar-desa';
 
 function Page() {
-  const router = useRouter()
-  const listPreview = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState)
+  const router = useRouter();
+  const listPreview = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState);
+
   useShallowEffect(() => {
-    listPreview.findById.load('edit')
-  }, [])
+    listPreview.findById.load('edit');
+  }, []);
 
   if (!listPreview.findById.data) {
     return (
-      <Stack>
-        <Skeleton radius={10} h={800} />
+      <Stack align="center" justify="center" py="xl">
+        <Skeleton radius="md" height={400} w="90%" />
       </Stack>
-    )
+    );
   }
+
+  const data = listPreview.findById.data;
+
   return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"22"}>
-        <Grid>
+    <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
+      <Stack gap="md">
+        {/* Header */}
+        <Grid align="center">
           <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={2}>Preview Fasilitas Yang Disediakan</Title>
+            <Title order={3} c={colors['blue-button']}>
+              Pratinjau Fasilitas Yang Disediakan
+            </Title>
           </GridCol>
           <GridCol span={{ base: 12, md: 1 }}>
-            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit')}>
-              <IconEdit size={16} />
-            </Button>
+            <Tooltip label="Edit Fasilitas" withArrow>
+              <Button
+                c="green"
+                variant="light"
+                leftSection={<IconEdit size={18} stroke={2} />}
+                radius="md"
+                onClick={() =>
+                  router.push(
+                    '/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit'
+                  )
+                }
+              >
+                Edit
+              </Button>
+            </Tooltip>
           </GridCol>
         </Grid>
-        <Box>
-          <Stack gap={'lg'}>
-            <Paper p={"xl"} bg={colors['BG-trans']}>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
-              </Box>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
-              </Box>
-            </Paper>
-          </Stack>
-        </Box>
+
+        {/* Konten Preview */}
+        <Paper
+          p="xl"
+          bg={colors['white-1']}
+          withBorder
+          radius="md"
+          shadow="xs"
+        >
+          <Box px={{ base: 'sm', md: 50 }}>
+            <Stack gap="lg">
+              {/* Judul */}
+              <Text
+                ta="center"
+                fz={{ base: '1.3rem', md: '1.8rem' }}
+                fw="bold"
+                c={colors['blue-button']}
+                dangerouslySetInnerHTML={{ __html: data.judul }}
+              />
+              <Divider my="md" color={colors['blue-button']} />
+
+              {/* Deskripsi */}
+              <Text
+                fz={{ base: '1rem', md: '1.2rem' }}
+                lh={1.7}
+                ta="justify"
+                c="dimmed"
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+              />
+            </Stack>
+          </Box>
+        </Paper>
       </Stack>
     </Paper>
-  )
+  );
 }
 
 export default Page;

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit/page.tsx

@@ -1,86 +1,169 @@
 'use client'
 import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import { toast } from 'react-toastify';
 
-const BimbinganBelajarDesaTextEditor = dynamic(() => import('../../_lib/bimbinganBelajarDesaTextEditor').then(mod => mod.BimbinganBelajarDesaTextEditor), {
-  ssr: false,
-});
+const BimbinganBelajarDesaTextEditor = dynamic(
+  () =>
+    import('../../_lib/bimbinganBelajarDesaTextEditor').then(
+      (mod) => mod.BimbinganBelajarDesaTextEditor
+    ),
+  { ssr: false }
+);
+
+function EditLokasiDanJadwal() {
+  const router = useRouter();
+  const editState = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState);
 
-function EditTujuanProgram() {
-  const router = useRouter()
-  const editState = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState)
   const [judul, setJudul] = useState('');
   const [content, setContent] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // load data sekali
   useShallowEffect(() => {
     if (!editState.findById.data) {
-      editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+      editState.findById.initialize();
     }
   }, []);
 
+  // isi state ketika data loaded
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '')
-      setContent(editState.findById.data.deskripsi ?? '')
+      setJudul(editState.findById.data.judul ?? '');
+      setContent(editState.findById.data.deskripsi ?? '');
     }
-  }, [editState.findById.data])
+  }, [editState.findById.data]);
 
-  const submit = () => {
-    if (editState.findById.data) {
-      editState.findById.data.judul = judul;
-      editState.findById.data.deskripsi = content;
-      editState.update.save(editState.findById.data)
+  const handleSubmit = async () => {
+    if (!judul.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
     }
-    router.push('/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal')
+
+    setIsSubmitting(true);
+    try {
+      if (editState.findById.data) {
+        editState.findById.data.judul = judul;
+        editState.findById.data.deskripsi = content;
+        await editState.update.save(editState.findById.data);
+
+        toast.success('Berhasil menyimpan perubahan');
+        router.push('/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal');
+      }
+    } catch (err) {
+      console.error('Error saving:', err);
+      toast.error('Gagal menyimpan data');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleBack = () => router.back();
+
+  // loading state
+  if (editState.findById.loading) {
+    return (
+      <Box>
+        <Center h={400}>
+          <Text>Memuat data lokasi & jadwal...</Text>
+        </Center>
+      </Box>
+    );
   }
+
   return (
     <Box>
-      <Stack gap={'xs'}>
-        <Box>
-          <Button
-            variant={'subtle'}
-            onClick={() => router.back()}
-          >
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
-            <Stack gap={'xs'}>
-              <Title order={3}>Edit Lokasi Dan Jadwal</Title>
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
-                value={judul}
-                onChange={(e) => setJudul(e.target.value)}
-              />
-              <Text fw={"bold"}>Deskripsi</Text>
+      <Stack gap="xs">
+        {/* Header dengan tombol kembali */}
+        <Group mb="md">
+          <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+            <Button
+              variant="subtle"
+              onClick={handleBack}
+              p="xs"
+              radius="md"
+            >
+              <IconArrowBack color={colors['blue-button']} size={24} />
+            </Button>
+          </Tooltip>
+          <Title order={4} ml="sm" c="dark">
+            Edit Lokasi & Jadwal
+          </Title>
+        </Group>
+
+        {/* Form Card */}
+        <Paper
+          w={{ base: '100%', md: '50%' }}
+          bg={colors['white-1']}
+          p="md"
+          radius="md"
+          shadow="sm"
+          style={{ border: '1px solid #e0e0e0' }}
+        >
+          <Stack gap="xs">
+            <Title order={3}>Form Lokasi & Jadwal</Title>
+
+            {/* Judul Field */}
+            <TextInput
+              label={<Text fw="bold">Judul</Text>}
+              placeholder="Masukkan judul lokasi/jadwal"
+              value={judul}
+              onChange={(e) => setJudul(e.currentTarget.value)}
+              error={!judul && 'Judul wajib diisi'}
+            />
+
+            {/* Deskripsi Field */}
+            <Box>
+              <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
               <BimbinganBelajarDesaTextEditor
                 showSubmit={false}
                 onChange={setContent}
                 initialContent={content}
               />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={submit}
-                  loading={editState.update.loading}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
+            </Box>
+
+            {/* Action Button */}
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                onClick={handleSubmit}
+                loading={isSubmitting || editState.update.loading}
+                disabled={!judul}
+              >
+                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
+              </Button>
+
+              <Button
+                variant="outline"
+                onClick={handleBack}
+                disabled={isSubmitting || editState.update.loading}
+              >
+                Batal
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
       </Stack>
     </Box>
   );
 }
 
-export default EditTujuanProgram;
+export default EditLokasiDanJadwal;

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -8,47 +8,86 @@ import { useProxy } from 'valtio/utils';
 import stateBimbinganBelajarDesa from '../../../_state/pendidikan/bimbingan-belajar-desa';
 
 function Page() {
-  const router = useRouter()
-  const listPreview = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState)
+  const router = useRouter();
+  const listPreview = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState);
+
   useShallowEffect(() => {
-    listPreview.findById.load('edit')
-  }, [])
+    listPreview.findById.load('edit');
+  }, []);
 
   if (!listPreview.findById.data) {
     return (
-      <Stack>
-        <Skeleton radius={10} h={800} />
+      <Stack align="center" justify="center" py="xl">
+        <Skeleton radius="md" height={400} w="90%" />
       </Stack>
-    )
+    );
   }
+
+  const data = listPreview.findById.data;
+
   return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"22"}>
-        <Grid>
+    <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
+      <Stack gap="md">
+        {/* Header */}
+        <Grid align="center">
           <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={2}>Preview Lokasi Dan Jadwal</Title>
+            <Title order={3} c={colors['blue-button']}>
+              Pratinjau Lokasi & Jadwal
+            </Title>
           </GridCol>
           <GridCol span={{ base: 12, md: 1 }}>
-            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit')}>
-              <IconEdit size={16} />
-            </Button>
+            <Tooltip label="Edit Lokasi & Jadwal" withArrow>
+              <Button
+                c="green"
+                variant="light"
+                leftSection={<IconEdit size={18} stroke={2} />}
+                radius="md"
+                onClick={() =>
+                  router.push(
+                    '/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit'
+                  )
+                }
+              >
+                Edit
+              </Button>
+            </Tooltip>
           </GridCol>
         </Grid>
-        <Box>
-          <Stack gap={'lg'}>
-            <Paper p={"xl"} bg={colors['BG-trans']}>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
-              </Box>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
-              </Box>
-            </Paper>
-          </Stack>
-        </Box>
+
+        {/* Konten Preview */}
+        <Paper
+          p="xl"
+          bg={colors['white-1']}
+          withBorder
+          radius="md"
+          shadow="xs"
+        >
+          <Box px={{ base: 'sm', md: 50 }}>
+            <Stack gap="lg">
+              {/* Judul */}
+              <Text
+                ta="center"
+                fz={{ base: '1.3rem', md: '1.8rem' }}
+                fw="bold"
+                c={colors['blue-button']}
+                dangerouslySetInnerHTML={{ __html: data.judul }}
+              />
+              <Divider my="md" color={colors['blue-button']} />
+
+              {/* Deskripsi */}
+              <Text
+                fz={{ base: '1rem', md: '1.2rem' }}
+                lh={1.7}
+                ta="justify"
+                c="dimmed"
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+              />
+            </Stack>
+          </Box>
+        </Paper>
       </Stack>
     </Paper>
-  )
+  );
 }
 
 export default Page;

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/edit/page.tsx

@@ -1,83 +1,158 @@
 'use client'
 import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import { toast } from 'react-toastify';
 
-const BimbinganBelajarDesaTextEditor = dynamic(() => import('../../_lib/bimbinganBelajarDesaTextEditor').then(mod => mod.BimbinganBelajarDesaTextEditor), {
-  ssr: false,
-});
+const BimbinganBelajarDesaTextEditor = dynamic(
+  () =>
+    import('../../_lib/bimbinganBelajarDesaTextEditor').then(
+      (mod) => mod.BimbinganBelajarDesaTextEditor
+    ),
+  { ssr: false }
+);
 
 function EditTujuanProgram() {
-  const router = useRouter()
-  const editState = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram)
+  const router = useRouter();
+  const editState = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram);
+
   const [judul, setJudul] = useState('');
   const [content, setContent] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // load data once
   useShallowEffect(() => {
     if (!editState.findById.data) {
-      editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+      editState.findById.initialize();
     }
   }, []);
 
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '')
-      setContent(editState.findById.data.deskripsi ?? '')
+      setJudul(editState.findById.data.judul ?? '');
+      setContent(editState.findById.data.deskripsi ?? '');
     }
-  }, [editState.findById.data])
+  }, [editState.findById.data]);
 
-  const submit = () => {
-    if (editState.findById.data) {
-      editState.findById.data.judul = judul;
-      editState.findById.data.deskripsi = content;
-      editState.update.save(editState.findById.data)
+  const handleSubmit = async () => {
+    if (!judul.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
     }
-    router.push('/admin/pendidikan/bimbingan-belajar-desa/tujuan-program')
+
+    setIsSubmitting(true);
+    try {
+      if (editState.findById.data) {
+        editState.findById.data.judul = judul;
+        editState.findById.data.deskripsi = content;
+        await editState.update.save(editState.findById.data);
+
+        toast.success('Berhasil menyimpan perubahan');
+        router.push('/admin/pendidikan/bimbingan-belajar-desa/tujuan-program');
+      }
+    } catch (err) {
+      console.error('Error saving:', err);
+      toast.error('Gagal menyimpan data');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleBack = () => router.back();
+
+  // loading state
+  if (editState.findById.loading) {
+    return (
+      <Box>
+        <Center h={400}>
+          <Text>Memuat data tujuan program...</Text>
+        </Center>
+      </Box>
+    );
   }
+
   return (
     <Box>
-      <Stack gap={'xs'}>
-        <Box>
-          <Button
-            variant={'subtle'}
-            onClick={() => router.back()}
-          >
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
-            <Stack gap={'xs'}>
-              <Title order={3}>Edit Tujuan Program</Title>
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
-                value={judul}
-                onChange={(e) => setJudul(e.target.value)}
-              />
-              <Text fw={"bold"}>Deskripsi</Text>
+      <Stack gap="xs">
+        <Group mb="md">
+          <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+            <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
+              <IconArrowBack color={colors['blue-button']} size={24} />
+            </Button>
+          </Tooltip>
+          <Title order={4} ml="sm" c="dark">
+            Edit Tujuan Program
+          </Title>
+        </Group>
+
+        <Paper
+          w={{ base: '100%', md: '50%' }}
+          bg={colors['white-1']}
+          p="md"
+          radius="md"
+          shadow="sm"
+          style={{ border: '1px solid #e0e0e0' }}
+        >
+          <Stack gap="xs">
+            <Title order={3}>Form Edit Tujuan Program</Title>
+
+            {/* Judul Field */}
+            <TextInput
+              label={<Text fw="bold">Judul</Text>}
+              placeholder="Masukkan judul program"
+              value={judul}
+              onChange={(e) => setJudul(e.currentTarget.value)}
+              error={!judul && 'Judul wajib diisi'}
+            />
+
+            {/* Deskripsi Field */}
+            <Box>
+              <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
               <BimbinganBelajarDesaTextEditor
                 showSubmit={false}
                 onChange={setContent}
                 initialContent={content}
               />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={submit}
-                  loading={editState.update.loading}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
+            </Box>
+
+            {/* Submit & Cancel */}
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                onClick={handleSubmit}
+                loading={isSubmitting || editState.update.loading}
+                disabled={!judul}
+              >
+                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
+              </Button>
+
+              <Button
+                variant="outline"
+                onClick={handleBack}
+                disabled={isSubmitting || editState.update.loading}
+              >
+                Batal
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
       </Stack>
     </Box>
   );

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/page.tsx

@@ -1,6 +1,18 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Divider,
+  Grid,
+  GridCol,
+  Paper,
+  Skeleton,
+  Stack,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -8,47 +20,86 @@ import { useProxy } from 'valtio/utils';
 import stateBimbinganBelajarDesa from '../../../_state/pendidikan/bimbingan-belajar-desa';
 
 function Page() {
-  const router = useRouter()
-  const listPreview = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram)
+  const router = useRouter();
+  const listPreview = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram);
+
   useShallowEffect(() => {
-    listPreview.findById.load('edit')
-  }, [])
+    listPreview.findById.load('edit');
+  }, []);
 
   if (!listPreview.findById.data) {
     return (
-      <Stack>
-        <Skeleton radius={10} h={800} />
+      <Stack align="center" justify="center" py="xl">
+        <Skeleton radius="md" height={400} w="90%" />
       </Stack>
-    )
+    );
   }
+
+  const data = listPreview.findById.data;
+
   return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"22"}>
-        <Grid>
+    <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
+      <Stack gap="md">
+        {/* Header */}
+        <Grid align="center">
           <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={2}>Preview Tujuan Program</Title>
+            <Title order={3} c={colors['blue-button']}>
+              Pratinjau Tujuan Program
+            </Title>
           </GridCol>
           <GridCol span={{ base: 12, md: 1 }}>
-            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/bimbingan-belajar-desa/tujuan-program/edit')}>
-              <IconEdit size={16} />
-            </Button>
+            <Tooltip label="Edit Tujuan Program" withArrow>
+              <Button
+                c="green"
+                variant="light"
+                leftSection={<IconEdit size={18} stroke={2} />}
+                radius="md"
+                onClick={() =>
+                  router.push(
+                    '/admin/pendidikan/bimbingan-belajar-desa/tujuan-program/edit'
+                  )
+                }
+              >
+                Edit
+              </Button>
+            </Tooltip>
           </GridCol>
         </Grid>
-        <Box>
-          <Stack gap={'lg'}>
-            <Paper p={"xl"} bg={colors['BG-trans']}>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
-              </Box>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
-              </Box>
-            </Paper>
-          </Stack>
-        </Box>
+
+        {/* Konten Preview */}
+        <Paper
+          p="xl"
+          bg={colors['white-1']}
+          withBorder
+          radius="md"
+          shadow="xs"
+        >
+          <Box px={{ base: 'sm', md: 50 }}>
+            <Stack gap="lg">
+              {/* Judul */}
+              <Text
+                ta="center"
+                fz={{ base: '1.3rem', md: '1.8rem' }}
+                fw="bold"
+                c={colors['blue-button']}
+                dangerouslySetInnerHTML={{ __html: data.judul }}
+              />
+              <Divider my="md" color={colors['blue-button']} />
+
+              {/* Deskripsi */}
+              <Text
+                fz={{ base: '1rem', md: '1.2rem' }}
+                lh={1.7}
+                ta="justify"
+                c="dimmed"
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+              />
+            </Stack>
+          </Box>
+        </Paper>
       </Stack>
     </Paper>
-  )
+  );
 }
 
 export default Page;

src/app/admin/(dashboard)/pendidikan/data-pendidikan/[id]/page.tsx

@@ -2,79 +2,94 @@
 'use client'
 
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
 import dataPendidikan from '../../../_state/pendidikan/data-pendidikan';
 
-function EditDataPendidikan() {
-  const router = useRouter()
-  const params = useParams() as { id: string }
-  const stateDPM = useProxy(dataPendidikan)
+export default function EditDataPendidikan() {
+  const router = useRouter();
+  const params = useParams() as { id: string };
+  const stateDPM = useProxy(dataPendidikan);
+  const id = params.id;
 
-  const id = params.id
-
-  // Load data saat komponen mount
+  // Load data saat mount
   useEffect(() => {
     if (id) {
       stateDPM.findUnique.load(id).then(() => {
-        const data = stateDPM.findUnique.data
+        const data = stateDPM.findUnique.data;
         if (data) {
           stateDPM.update.form = {
-            name: data.name || "",
-            jumlah: data.jumlah || "",
-          }
+            name: data.name || '',
+            jumlah: data.jumlah || '',
+          };
         }
-      })
+      });
     }
-  }, [id])
+  }, [id]);
 
   const handleSubmit = async () => {
-    // Set the ID before submitting
     stateDPM.update.id = id;
     await stateDPM.update.submit();
-    router.push('/admin/pendidikan/data-pendidikan')
-  }
-return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack size={20} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
-        <Stack>
-          <Title order={3}>Edit Data Pendidikan</Title>
-          <TextInput
-            label="Nama"
-            placeholder="masukkan nama"
-            value={stateDPM.update.form.name}
-            onChange={(val) => {
-              stateDPM.update.form.name = val.currentTarget.value;
-            }}
-          />
-          <TextInput
-            label="Jumlah"
-            type="number"
-            placeholder="masukkan jumlah"
-            value={stateDPM.update.form.jumlah}
-            onChange={(val) => {
-              stateDPM.update.form.jumlah = val.currentTarget.value;
-            }}
-          />
-          <Button
-            mt={10}
-            bg={colors['blue-button']}
-            onClick={handleSubmit}
-          >
-            Simpan
+    router.push('/admin/pendidikan/data-pendidikan');
+  };
+
+  return (
+    <Box px={{ base: 'sm', md: 'xl' }} py="md">
+      <Group mb="md" gap="sm">
+        <Tooltip label="Kembali ke halaman sebelumnya" position="bottom" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} radius="md">
+            <IconArrowBack size={20} stroke={2} />
           </Button>
+        </Tooltip>
+        <Title order={3} c="black">Edit Data Pendidikan</Title>
+      </Group>
+
+      <Paper
+        withBorder
+        w={{ base: '100%', md: '60%' }}
+        p="lg"
+        radius="md"
+        shadow="xl"
+        bg="white"
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Nama Pendidikan"
+            placeholder="Contoh: SD, SMP, SMA"
+            value={stateDPM.update.form.name}
+            onChange={(e) => (stateDPM.update.form.name = e.currentTarget.value)}
+            radius="md"
+            required
+          />
+          <TextInput
+            label="Jumlah Peserta"
+            type="number"
+            placeholder="Masukkan jumlah peserta"
+            value={stateDPM.update.form.jumlah}
+            onChange={(e) => (stateDPM.update.form.jumlah = e.currentTarget.value)}
+            radius="md"
+            required
+          />
+          <Group justify="right" mt="sm">
+            <Button
+              onClick={handleSubmit}
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, ${colors['blue-button-trans']})`,
+                color: 'white',
+                boxShadow: '0 0 10px rgba(0,123,255,0.5)',
+                '&:hover': { opacity: 0.9 },
+              }}
+              radius="md"
+              size="md"
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>
-  )
+  );
 }
-
-export default EditDataPendidikan;

src/app/admin/(dashboard)/pendidikan/data-pendidikan/create/page.tsx

@@ -1,81 +1,93 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import dataPendidikan from '../../../_state/pendidikan/data-pendidikan';
 
-function CreateDataPendidikan() {
+export default function CreateDataPendidikan() {
   const stateDPM = useProxy(dataPendidikan);
   const [chartData, setChartData] = useState<any[]>([]);
-  const router = useRouter()
+  const router = useRouter();
 
   const resetForm = () => {
-    stateDPM.create.form = {
-      name: "",
-      jumlah: "",
-    }
-  }
+    stateDPM.create.form = { name: '', jumlah: '' };
+  };
 
   const handleSubmit = async () => {
     const id = await stateDPM.create.create();
     if (id) {
       const idStr = String(id);
       await stateDPM.findUnique.load(idStr);
-      if (stateDPM.findUnique.data) {
-        setChartData([stateDPM.findUnique.data]);
-      }
+      if (stateDPM.findUnique.data) setChartData([stateDPM.findUnique.data]);
     }
     resetForm();
-    router.push("/admin/pendidikan/data-pendidikan");
-  }
+    router.push('/admin/pendidikan/data-pendidikan');
+  };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack size={20} />
-        </Button>
-      </Box>
-      <Box>
-        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-          <Title order={4}>Tambah Data Pendidikan</Title>
-          <Stack gap={"xs"}>
-            <TextInput
-              label="Nama"
-              type="text"
-              value={stateDPM.create.form.name}
-              placeholder="Masukkan nama"
-              onChange={(val) => {
-                stateDPM.create.form.name = val.currentTarget.value;
+    <Box px={{ base: 'sm', md: 'xl' }} py="md">
+      <Group mb="md" gap="sm">
+        <Tooltip label="Kembali ke halaman sebelumnya" position="bottom" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} radius="md">
+            <IconArrowBack size={20} stroke={2} />
+          </Button>
+        </Tooltip>
+        <Title order={3} c='black'>Tambah Data Pendidikan</Title>
+      </Group>
+
+      <Paper
+        withBorder
+        w={{ base: '100%', md: '60%' }}
+        p="lg"
+        radius="md"
+        shadow="xl"
+        bg="white"
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Nama Pendidikan"
+            placeholder="Contoh: SD, SMP, SMA"
+            value={stateDPM.create.form.name}
+            onChange={(e) => (stateDPM.create.form.name = e.currentTarget.value)}
+            radius="md"
+            required
+          />
+          <TextInput
+            label="Jumlah Peserta"
+            placeholder="Masukkan jumlah peserta"
+            value={stateDPM.create.form.jumlah}
+            onChange={(e) => (stateDPM.create.form.jumlah = e.currentTarget.value)}
+            radius="md"
+            type="number"
+            required
+          />
+          <Group justify="right" mt="sm">
+            <Button
+              onClick={handleSubmit}
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, ${colors['blue-button-trans']})`,
+                color: 'white',
+                boxShadow: '0 0 10px rgba(0,123,255,0.5)',
+                '&:hover': { opacity: 0.9 },
               }}
-            />
-            <TextInput
-              label="Jumlah"
-              type="number"
-              value={stateDPM.create.form.jumlah}
-              placeholder="Masukkan jumlah"
-              onChange={(val) => {
-                stateDPM.create.form.jumlah = val.currentTarget.value;
-              }}
-            />
-            <Group>
-              <Button
-                bg={colors['blue-button']}
-                mt={10}
-                onClick={handleSubmit}
-              >
-                Submit
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Box>
+              radius="md"
+              size="md"
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+
+      {chartData.length === 0 && (
+        <Text mt="md" c={colors['white-1']} ta="center">
+          Data belum tersedia. Silakan tambahkan data pendidikan baru.
+        </Text>
+      )}
     </Box>
   );
 }
-
-export default CreateDataPendidikan;

src/app/admin/(dashboard)/pendidikan/data-pendidikan/page.tsx

@@ -1,24 +1,23 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
-import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
-import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { Box, Button, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconDatabase, IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
+import { Bar, BarChart, Legend, Tooltip as RechartTooltip, ResponsiveContainer, XAxis, YAxis } from 'recharts';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
-import JudulList from '../../_com/judulList';
 import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
 import dataPendidikan from '../../_state/pendidikan/data-pendidikan';
 
 function DataPendidikan() {
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState('');
   return (
-    <Box>
+    <Box py="md">
       <HeaderSearch
-        title='Data Pendidikan'
-        placeholder='pencarian'
+        title="Data Pendidikan"
+        placeholder="Cari data pendidikan..."
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -29,138 +28,153 @@ function DataPendidikan() {
 }
 
 function ListDataPendidikan({ search }: { search: string }) {
-  type DPMrafik = {
-    id: string;
-    name: string;
-    jumlah: number;
-  }
+  type DPMrafik = { id: string; name: string; jumlah: number };
   const stateDPM = useProxy(dataPendidikan);
   const [chartData, setChartData] = useState<DPMrafik[]>([]);
-  const [mounted, setMounted] = useState(false); // untuk memastikan DOM sudah ready
-  const isTablet = useMediaQuery('(max-width: 1024px)')
-  const isMobile = useMediaQuery('(max-width: 768px)')
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [mounted, setMounted] = useState(false);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
   const router = useRouter();
 
   const handleDelete = () => {
     if (selectedId) {
-      stateDPM.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-
-      stateDPM.findMany.load()
+      stateDPM.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      stateDPM.findMany.load();
     }
-  }
+  };
 
   useShallowEffect(() => {
-    setMounted(true)
-    stateDPM.findMany.load()
-  }, [])
+    setMounted(true);
+    stateDPM.findMany.load();
+  }, []);
 
   useEffect(() => {
     setMounted(true);
     if (stateDPM.findMany.data) {
-      setChartData(stateDPM.findMany.data.map((item) => ({
-        id: item.id,
-        name: item.name,
-        jumlah: Number(item.jumlah)
-      })));
+      setChartData(
+        stateDPM.findMany.data.map((item) => ({
+          id: item.id,
+          name: item.name,
+          jumlah: Number(item.jumlah),
+        }))
+      );
     }
   }, [stateDPM.findMany.data]);
 
-  const filteredData = (stateDPM.findMany.data || []).filter(item => {
+  const filteredData = (stateDPM.findMany.data || []).filter((item) => {
     const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.jumlah.toLowerCase().includes(keyword)
-    );
+    return item.name.toLowerCase().includes(keyword) || item.jumlah.toString().includes(keyword);
   });
 
   if (!stateDPM.findMany.data) {
     return (
-      <Stack>
-        <Skeleton h={500} />
+      <Stack gap="sm">
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
-    <Box py={10}>
-      <Stack gap={'xs'}>
-        <Paper bg={colors['white-1']} p={'md'}>
-          <JudulList
-            title='List Data Pendidikan'
-            href='/admin/pendidikan/data-pendidikan/create'
-          />
-          <Table striped withTableBorder withRowBorders>
-            <TableThead>
-              <TableTr>
-                <TableTh>Nama</TableTh>
-                <TableTh>Jumlah</TableTh>
-                <TableTh>Edit</TableTh>
-                <TableTh>Delete</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>{item.name}</TableTd>
-                  <TableTd>{item.jumlah}</TableTd>
-                  <TableTd>
-                    <Button color='green' onClick={() => router.push(`/admin/pendidikan/data-pendidikan/${item.id}`)}>
-                      <IconEdit size={20} />
-                    </Button>
-                  </TableTd>
-                  <TableTd>
-                    <Button
-                      color='red'
-                      disabled={stateDPM.delete.loading}
-                      onClick={() => {
-                        setSelectedId(item.id)
-                        setModalHapus(true)
-                      }}>
-                      <IconTrash size={20} />
-                    </Button>
-                  </TableTd>
+    <Box py="sm">
+      <Stack gap="sm">
+        <Paper p="md" withBorder bg={colors['white-1']} shadow="sm" radius="md">
+        <Group justify="space-between" mb="md">
+            <Title order={4}>Daftar Data Pendidikan</Title>
+            <Tooltip label="Tambah Data Pendidikan" withArrow>
+              <Button leftSection={<IconPlus size={18} />} color="blue" variant="light" onClick={() => router.push('/admin/pendidikan/data-pendidikan/create')}>
+                Tambah Baru
+              </Button>
+            </Tooltip>
+          </Group>
+          {filteredData.length === 0 ? (
+            <Box py="lg" px="md" style={{ textAlign: 'center' }}>
+              <IconDatabase size={48} stroke={1.5} color={colors['white-1']} />
+              <Text mt="sm" c="dimmed">
+                Tidak ada data pendidikan yang sesuai pencarian
+              </Text>
+            </Box>
+          ) : (
+            <Table striped highlightOnHover>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama</TableTh>
+                  <TableTh>Jumlah</TableTh>
+                  <TableTh>Edit</TableTh>
+                  <TableTh>Hapus</TableTh>
                 </TableTr>
-              ))}
-            </TableTbody>
-          </Table>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{item.name}</TableTd>
+                    <TableTd>{item.jumlah}</TableTd>
+                    <TableTd>
+                      <Tooltip label="Edit data pendidikan" position="top" withArrow>
+                        <Button
+                          color="green"
+                          variant="light"
+                          radius="md"
+                          onClick={() => router.push(`/admin/pendidikan/data-pendidikan/${item.id}`)}
+                        >
+                          <IconEdit size={20} />
+                        </Button>
+                      </Tooltip>
+                    </TableTd>
+                    <TableTd>
+                      <Tooltip label="Hapus data pendidikan" position="top" withArrow>
+                        <Button
+                          color="red"
+                          variant="light"
+                          radius="md"
+                          disabled={stateDPM.delete.loading}
+                          onClick={() => {
+                            setSelectedId(item.id);
+                            setModalHapus(true);
+                          }}
+                        >
+                          <IconTrash size={20} />
+                        </Button>
+                      </Tooltip>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          )}
         </Paper>
 
-        {/* Chart */}
-        {!mounted && !chartData ? (
-          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Title pb={10} order={3}>Grafik Data Pendidikan</Title>
-              <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
-            </Paper>
-          </Box>
-        ) : (
-          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Title pb={10} order={4}>Grafik Data Pendidikan</Title>
-              {mounted && chartData.length > 0 && (
-                <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={chartData} >
-                  <XAxis dataKey="name" />
-                  <YAxis />
-                  <Tooltip />
-                  <Legend />
-                  <Bar dataKey="jumlah" fill={colors['blue-button']} name="Data Pendidikan" />
-                </BarChart>
-              )}
-            </Paper>
-          </Box>
-        )}
+        <Paper withBorder p="md" bg={colors['white-1']} shadow="sm" radius="md">
+          <Title order={4} mb="sm">
+            Grafik Data Pendidikan
+          </Title>
+          {mounted && chartData.length > 0 ? (
+            <ResponsiveContainer width="100%" height={350}>
+              <BarChart data={chartData} margin={{ top: 20, right: 30, left: 0, bottom: 5 }}>
+                <XAxis dataKey="name" />
+                <YAxis />
+                <RechartTooltip />
+                <Legend />
+                <Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah Pendidikan" radius={[4, 4, 0, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          ) : (
+            <Box py="lg" style={{ textAlign: 'center' }}>
+              <IconDatabase size={48} stroke={1.5} color={colors['white-1']} />
+              <Text mt="sm" c="dimmed">
+                Belum ada data untuk ditampilkan
+              </Text>
+            </Box>
+          )}
+        </Paper>
       </Stack>
 
-      {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleDelete}
-        text='Apakah anda yakin ingin menghapus grafik data pendidikan ini?'
+        text="Apakah Anda yakin ingin menghapus data pendidikan ini?"
       />
     </Box>
   );

src/app/admin/(dashboard)/pendidikan/info-sekolah/_lib/layoutTabs.tsx

@@ -1,72 +1,124 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { IconBuilding, IconChalkboard, IconMicroscope, IconSchool } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
 function LayoutTabs({ children }: { children: React.ReactNode }) {
-  const router = useRouter()
-  const pathname = usePathname()
+  const router = useRouter();
+  const pathname = usePathname();
+
   const tabs = [
     {
       label: "Jenjang Pendidikan",
       value: "jenjangPendidikan",
-      href: "/admin/pendidikan/info-sekolah/jenjang-pendidikan"
+      href: "/admin/pendidikan/info-sekolah/jenjang-pendidikan",
+      icon: <IconBuilding size={18} stroke={1.8} />,
+      tooltip: "Lihat dan kelola jenjang pendidikan",
     },
     {
       label: "Lembaga",
       value: "lembaga",
-      href: "/admin/pendidikan/info-sekolah/lembaga"
+      href: "/admin/pendidikan/info-sekolah/lembaga",
+      icon: <IconChalkboard size={18} stroke={1.8} />,
+      tooltip: "Lihat dan kelola lembaga",
     },
     {
       label: "Siswa",
       value: "siswa",
-      href: "/admin/pendidikan/info-sekolah/siswa"
+      href: "/admin/pendidikan/info-sekolah/siswa",
+      icon: <IconSchool size={18} stroke={1.8} />,
+      tooltip: "Lihat dan kelola siswa",
     },
     {
       label: "Pengajar",
       value: "pengajar",
-      href: "/admin/pendidikan/info-sekolah/pengajar"
-    },
+      href: "/admin/pendidikan/info-sekolah/pengajar",
+      icon: <IconMicroscope size={18} stroke={1.8} />,
+      tooltip: "Lihat dan kelola pengajar",
+    }
   ];
-  const curentTab = tabs.find(tab => tab.href === pathname)
-  const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+  const currentTab = tabs.find(tab => tab.href === pathname);
+  const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
 
   const handleTabChange = (value: string | null) => {
-    const tab = tabs.find(t => t.value === value)
+    const tab = tabs.find(t => t.value === value);
     if (tab) {
-      router.push(tab.href)
+      router.push(tab.href);
     }
-    setActiveTab(value)
-  }
+    setActiveTab(value);
+  };
 
   useEffect(() => {
-    const match = tabs.find(tab => tab.href === pathname)
+    const match = tabs.find(tab => tab.href === pathname);
     if (match) {
-      setActiveTab(match.value)
+      setActiveTab(match.value);
     }
-  }, [pathname])
+  }, [pathname]);
 
   return (
-    <Stack>
-      <Title order={3}>Info Sekolah & PAUD</Title>
-      <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
-        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-          {tabs.map((e, i) => (
-            <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+    <Stack gap="lg">
+      <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
+        Info Sekolah
+      </Title>
+      <Tabs
+        color={colors['blue-button']}
+        variant='pills'
+        value={activeTab}
+        onChange={handleTabChange}
+        radius="lg"
+        keepMounted={false}
+      >
+        <TabsList
+          p="sm"
+          style={{
+            background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+            borderRadius: "1rem",
+            boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+          }}
+        >
+          {tabs.map((tab, i) => (
+            <Tooltip key={i} label={tab.tooltip} position="bottom" withArrow transitionProps={{ transition: 'pop', duration: 200 }}>
+              <TabsTab
+                value={tab.value}
+                leftSection={tab.icon}
+                style={{
+                  fontWeight: 600,
+                  fontSize: "0.9rem",
+                  transition: "all 0.2s ease",
+                }}
+              >
+                {tab.label}
+              </TabsTab>
+            </Tooltip>
           ))}
         </TabsList>
-        {tabs.map((e, i) => (
-          <TabsPanel key={i} value={e.value}>
-            {/* Konten dummy, bisa diganti tergantung routing */}
-            <></>
+
+        {tabs.map((tab, i) => (
+          <TabsPanel
+            key={i}
+            value={tab.value}
+            style={{
+              padding: "1.5rem",
+              background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+              borderRadius: "1rem",
+              boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+            }}
+          >
+            {children}
           </TabsPanel>
         ))}
       </Tabs>
-      {children}
     </Stack>
   );
 }
 
-export default LayoutTabs;
+export default LayoutTabs;
+
+
+
+
+  

src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/[id]/page.tsx

@@ -2,7 +2,16 @@
 'use client'
 import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  TextInput,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -27,7 +36,6 @@ function EditJenjangPendidikan() {
         const data = await stateJenjang.edit.load(id);
 
         if (data) {
-          // pastikan id-nya masuk ke state edit
           stateJenjang.edit.id = id;
           setFormData({
             nama: data.nama || '',
@@ -53,41 +61,67 @@ function EditJenjangPendidikan() {
         nama: formData.nama.trim(),
       };
 
-      // Safety check tambahan: pastikan ID tidak kosong
       if (!stateJenjang.edit.id) {
-        stateJenjang.edit.id = id; // fallback
+        stateJenjang.edit.id = id;
       }
 
       const success = await stateJenjang.edit.update();
 
       if (success) {
+        toast.success("Jenjang pendidikan berhasil diperbarui!");
         router.push("/admin/pendidikan/info-sekolah/jenjang-pendidikan");
       }
     } catch (error) {
       console.error("Error updating jenjang pendidikan:", error);
-      // toast akan ditampilkan dari fungsi update
+      toast.error("Terjadi kesalahan saat memperbarui jenjang pendidikan");
     }
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header Back + Title */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Jenjang Pendidikan
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Jenjang Pendidikan</Title>
+      {/* Form Container */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
+            label="Nama Jenjang Pendidikan"
+            placeholder="Masukkan nama jenjang pendidikan"
             value={formData.nama}
             onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
-            label={<Text fw={"bold"} fz={"sm"}>Nama Jenjang Pendidikan</Text>}
-            placeholder='Masukkan nama jenjang pendidikan'
+            required
           />
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/create/page.tsx

@@ -1,16 +1,26 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  TextInput,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
+import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import infoSekolahPaud from '../../../../_state/pendidikan/info-sekolah-paud';
 
 function CreateJenjangPendidikan() {
   const router = useRouter();
-  const stateJenjang = useProxy(infoSekolahPaud.jenjangPendidikan)
+  const stateJenjang = useProxy(infoSekolahPaud.jenjangPendidikan);
 
   useEffect(() => {
     stateJenjang.findMany.load();
@@ -18,42 +28,73 @@ function CreateJenjangPendidikan() {
 
   const resetForm = () => {
     stateJenjang.create.form = {
-      nama: "",
+      nama: '',
     };
-  }
+  };
 
   const handleSubmit = async () => {
+    if (!stateJenjang.create.form.nama) {
+      return toast.warn('Nama jenjang pendidikan tidak boleh kosong');
+    }
+
     await stateJenjang.create.create();
     resetForm();
-    router.push("/admin/pendidikan/info-sekolah/jenjang-pendidikan")
-  }
+    router.push('/admin/pendidikan/info-sekolah/jenjang-pendidikan');
+  };
 
   return (
-    <Box>
-      <Box>
-        <Box mb={10}>
-          <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-            <IconArrowBack color={colors['blue-button']} size={25} />
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Back button + Title */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
           </Button>
-        </Box>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Jenjang Pendidikan
+        </Title>
+      </Group>
 
-        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-          <Stack gap={"xs"}>
-            <Title order={4}>Create Jenjang Pendidikan</Title>
-            <TextInput
-              value={stateJenjang.create.form.nama}
-              onChange={(val) => {
-                stateJenjang.create.form.nama = val.target.value;
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Nama Jenjang Pendidikan"
+            placeholder="Masukkan nama jenjang pendidikan"
+            value={stateJenjang.create.form.nama || ''}
+            onChange={(e) => (stateJenjang.create.form.nama = e.target.value)}
+            required
+          />
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}
-              label={<Text fw={"bold"} fz={"sm"}>Nama Jenjang Pendidikan</Text>}
-              placeholder='Masukkan nama jenjang pendidikan'
-            />
-            <Group>
-              <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Box>
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/page.tsx

@@ -1,13 +1,12 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Center, Group, Paper, Pagination, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconEdit, IconSearch, IconX } from '@tabler/icons-react';
+import { IconEdit, IconPlus, IconSearch, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
 
@@ -18,7 +17,7 @@ function JenjangPendidikan() {
     <Box>
       <HeaderSearch
         title='Jenjang Pendidikan'
-        placeholder='pencarian'
+        placeholder='Cari jenjang pendidikan...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -34,6 +33,14 @@ function ListJenjangPendidikan({ search }: { search: string }) {
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const router = useRouter()
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateList.findMany
+
   const handleHapus = () => {
     if (selectedId) {
       stateList.delete.byId(selectedId)
@@ -43,61 +50,104 @@ function ListJenjangPendidikan({ search }: { search: string }) {
   }
 
   useShallowEffect(() => {
-    stateList.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (stateList.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.nama.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!stateList.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton h={500} radius="md" />
       </Stack>
     )
   }
 
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Jenjang Pendidikan'
-          href='/admin/pendidikan/info-sekolah/jenjang-pendidikan/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama Jenjang Pendidikan</TableTh>
-              <TableTh>Edit</TableTh>
-              <TableTh>Delete</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>{item.nama}</TableTd>
-                <TableTd>
-                  <Button color="green" onClick={() => router.push(`/admin/pendidikan/info-sekolah/jenjang-pendidikan/${item.id}`)}>
-                    <IconEdit size={20} />
-                  </Button>
-                </TableTd>
-                <TableTd>
-                  <Button color="red" onClick={() => {
-                    setSelectedId(item.id)
-                    setModalHapus(true)
-                  }}>
-                    <IconX size={20} />
-                  </Button>
-                </TableTd>
+      <Paper bg={colors['white-1']} p="lg" withBorder shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Jenjang Pendidikan</Title>
+          <Tooltip label="Tambah Jenjang Pendidikan" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/pendidikan/info-sekolah/jenjang-pendidikan/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama Jenjang Pendidikan</TableTh>
+                <TableTh style={{ width: '15%' }}>Edit</TableTh>
+                <TableTh style={{ width: '15%' }}>Delete</TableTh>
               </TableTr>
-            ))}
-          </TableTbody>
-        </Table>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fw={500} truncate="end">{item.nama}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        color="green"
+                        variant="light"
+                        onClick={() => router.push(`/admin/pendidikan/info-sekolah/jenjang-pendidikan/${item.id}`)}
+                      >
+                        <IconEdit size={20} />
+                      </Button>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        color="red"
+                        variant="light"
+                        onClick={() => {
+                          setSelectedId(item.id)
+                          setModalHapus(true)
+                        }}
+                      >
+                        <IconX size={20} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={3}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada data jenjang pendidikan</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+          color="blue"
+          radius="md"
+        />
+      </Center>
+
       {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}

src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/edit/page.tsx

@@ -3,14 +3,23 @@
 
 import { useEffect, useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
-import { Box, Button, Paper, Select, Stack, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Select,
+  Stack,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
 import colors from '@/con/colors';
 import { IconArrowBack } from '@tabler/icons-react';
 
-
 export default function EditLembaga() {
   const router = useRouter();
   const { id } = useParams<{ id: string }>();
@@ -26,7 +35,7 @@ export default function EditLembaga() {
     infoSekolahPaud.jenjangPendidikan.findMany.load();
 
     if (id) {
-      state.edit.load(id).then(data => {
+      state.edit.load(id).then((data) => {
         if (data) {
           setForm({
             nama: data.nama,
@@ -39,7 +48,7 @@ export default function EditLembaga() {
 
   const handleSubmit = async () => {
     if (!form.nama || !form.jenjangId) {
-      toast.warn("Nama dan jenjang pendidikan harus diisi");
+      toast.warn('Nama dan jenjang pendidikan harus diisi');
       return;
     }
 
@@ -49,39 +58,77 @@ export default function EditLembaga() {
     const result = await state.edit.update();
 
     if (result) {
-      toast.success("Data berhasil diperbarui");
+      toast.success('Data berhasil diperbarui');
       router.push('/admin/pendidikan/info-sekolah/lembaga');
     }
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack>
-          <Title order={3}>Edit Lembaga</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header dengan back button */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Lembaga Pendidikan
+        </Title>
+      </Group>
+
+      {/* Card Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
             label="Nama Lembaga"
             placeholder="Masukkan nama lembaga"
             value={form.nama}
             onChange={(e) => setForm({ ...form, nama: e.currentTarget.value })}
+            required
           />
+
           <Select
             label="Jenjang Pendidikan"
             placeholder="Pilih jenjang pendidikan"
             searchable
-            data={jenjangPendidikanList?.map(p => ({
-              value: p.id,
-              label: p.nama,
-            })) || []}
+            data={
+              jenjangPendidikanList?.map((p) => ({
+                value: p.id,
+                label: p.nama,
+              })) || []
+            }
             value={form.jenjangId}
             onChange={(val) => setForm({ ...form, jenjangId: val || '' })}
+            required
           />
-          <Button onClick={handleSubmit} color="blue">Simpan</Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/page.tsx

@@ -1,115 +1,134 @@
 'use client'
 import { useProxy } from 'valtio/utils';
-
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 
 import colors from '@/con/colors';
-
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
 
 function DetailLembaga() {
-  const detailState = useProxy(infoSekolahPaud.lembagaPendidikan)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
+  const detailState = useProxy(infoSekolahPaud.lembagaPendidikan);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const params = useParams();
+  const router = useRouter();
 
   useShallowEffect(() => {
-    detailState.findUnique.load(params?.id as string)
-  }, [])
-
+    detailState.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      detailState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/pendidikan/info-sekolah/lembaga")
+      detailState.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/pendidikan/info-sekolah/lembaga");
     }
-  }
+  };
 
   if (!detailState.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={40} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = detailState.findUnique.data;
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Lembaga</Text>
-          {detailState.findUnique.data ? (
-            <Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Nama</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.nama}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Jenjang Pendidikan</Text>
-                  <Text fz={"lg"} >{detailState.findUnique.data?.jenjangPendidikan?.nama}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Jumlah Siswa</Text>
-                  <Text fz={"lg"} >{detailState.findUnique.data?.siswa?.length}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Jumlah Pengajar</Text>
-                  <Text fz={"lg"} >{detailState.findUnique.data?.pengajar?.length}</Text>
-                </Box>
-                <Flex gap={"xs"} mt={10}>
+    <Box py={10}>
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      <Paper
+        withBorder
+        w={{ base: "100%", md: "60%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Lembaga
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">Nama</Text>
+                <Text fz="md" c="dimmed">{data?.nama || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Jenjang Pendidikan</Text>
+                <Text fz="md" c="dimmed">{data?.jenjangPendidikan?.nama || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Jumlah Siswa</Text>
+                <Text fz="md" c="dimmed">{data?.siswa?.length ?? 0}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Jumlah Pengajar</Text>
+                <Text fz="md" c="dimmed">{data?.pengajar?.length ?? 0}</Text>
+              </Box>
+
+              <Group gap="sm">
+                <Tooltip label="Hapus Lembaga" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (detailState.findUnique.data) {
-                        setSelectedId(detailState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={detailState.delete.loading || !detailState.findUnique.data}
-                    color={"red"}
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
-                    <IconX size={20} />
+                    <IconTrash size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Lembaga" withArrow position="top">
                   <Button
-                    onClick={() => {
-                      if (detailState.findUnique.data) {
-                        router.push(`/admin/pendidikan/info-sekolah/lembaga/${detailState.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!detailState.findUnique.data}
-                    color={"green"}
+                    color="green"
+                    onClick={() =>
+                      router.push(`/admin/pendidikan/info-sekolah/lembaga/${data.id}/edit`)
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Stack>
-            </Paper>
-          ) : null}
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
-      {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus lembaga ini?'
+        text="Apakah anda yakin ingin menghapus lembaga ini?"
       />
     </Box>
   );
 }
 
-export default DetailLembaga;
+export default DetailLembaga;

src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/create/page.tsx

@@ -1,7 +1,18 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
@@ -10,7 +21,7 @@ import infoSekolahPaud from '../../../../_state/pendidikan/info-sekolah-paud';
 
 function CreateLembaga() {
   const router = useRouter();
-  const stateLembaga = useProxy(infoSekolahPaud.lembagaPendidikan)
+  const stateLembaga = useProxy(infoSekolahPaud.lembagaPendidikan);
 
   useEffect(() => {
     stateLembaga.findMany.load();
@@ -19,56 +30,84 @@ function CreateLembaga() {
 
   const resetForm = () => {
     stateLembaga.create.form = {
-      nama: "",
-      jenjangId: "",
+      nama: '',
+      jenjangId: '',
     };
-  }
+  };
 
   const handleSubmit = async () => {
     await stateLembaga.create.create();
     resetForm();
-    router.push("/admin/pendidikan/info-sekolah/lembaga")
-  }
+    router.push('/admin/pendidikan/info-sekolah/lembaga');
+  };
 
   return (
-    <Box>
-      <Box>
-        <Box mb={10}>
-          <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-            <IconArrowBack color={colors['blue-button']} size={25} />
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
           </Button>
-        </Box>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Lembaga Pendidikan
+        </Title>
+      </Group>
 
-        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-          <Stack gap={"xs"}>
-            <Title order={4}>Create Lembaga</Title>
-            <TextInput
-              value={stateLembaga.create.form.nama}
-              onChange={(val) => {
-                stateLembaga.create.form.nama = val.target.value;
-              }}
-              label={<Text fw={"bold"} fz={"sm"}>Nama Lembaga</Text>}
-              placeholder='Masukkan nama lembaga'
-            />
-            <Select
-              label="Jenjang Pendidikan"
-              placeholder="Pilih jenjang pendidikan"
-              searchable
-              data={infoSekolahPaud.jenjangPendidikan.findMany.data?.map(j => ({
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            value={stateLembaga.create.form.nama}
+            onChange={(val) => {
+              stateLembaga.create.form.nama = val.target.value;
+            }}
+            label={<Text fw="bold" fz="sm">Nama Lembaga</Text>}
+            placeholder="Masukkan nama lembaga"
+            required
+          />
+
+          <Select
+            label={<Text fw="bold" fz="sm">Jenjang Pendidikan</Text>}
+            placeholder="Pilih jenjang pendidikan"
+            searchable
+            data={
+              infoSekolahPaud.jenjangPendidikan.findMany.data?.map((j) => ({
                 value: j.id,
                 label: j.nama,
-              })) || []}
-              value={stateLembaga.create.form.jenjangId}
-              onChange={(val) => {
-                stateLembaga.create.form.jenjangId = val || '';
+              })) || []
+            }
+            value={stateLembaga.create.form.jenjangId}
+            onChange={(val) => {
+              stateLembaga.create.form.jenjangId = val || '';
+            }}
+            required
+          />
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}
-            />
-            <Group>
-              <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Box>
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/page.tsx

@@ -1,23 +1,39 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
 
-
 function Lembaga() {
   const [search, setSearch] = useState("")
   return (
     <Box>
       <HeaderSearch
         title='Lembaga'
-        placeholder='pencarian'
+        placeholder='Cari nama lembaga atau jenjang pendidikan...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -31,57 +47,103 @@ function ListLembaga({ search }: { search: string }) {
   const stateList = useProxy(infoSekolahPaud.lembagaPendidikan)
   const router = useRouter()
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateList.findMany;
 
   useShallowEffect(() => {
-    stateList.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (stateList.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.nama.toLowerCase().includes(keyword) ||
-      item.jenjangPendidikan?.nama.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!stateList.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={600} radius="md" />
       </Stack>
     )
   }
 
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Lembaga'
-          href='/admin/pendidikan/info-sekolah/lembaga/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama Lembaga</TableTh>
-              <TableTh>Jenjang Pendidikan</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>{item.nama}</TableTd>
-                <TableTd>{item.jenjangPendidikan?.nama}</TableTd>
-                <TableTd>
-                  <Button color="blue" onClick={() => router.push(`/admin/pendidikan/info-sekolah/lembaga/${item.id}`)}>
-                    <IconDeviceImac size={20} />
-                  </Button>
-                </TableTd>
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Lembaga</Title>
+          <Tooltip label="Tambah Lembaga Baru" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/pendidikan/info-sekolah/lembaga/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '40%' }}>Nama Lembaga</TableTh>
+                <TableTh style={{ width: '30%' }}>Jenjang Pendidikan</TableTh>
+                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
               </TableTr>
-            ))}
-          </TableTbody>
-        </Table>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="sm" c="dimmed">{item.jenjangPendidikan?.nama || '-'}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/pendidikan/info-sekolah/lembaga/${item.id}`)}
+                      >
+                        <IconDeviceImac size={20} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={3}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada data lembaga yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10, search);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+          color="blue"
+          radius="md"
+        />
+      </Center>
     </Box>
   );
 }

src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/edit/page.tsx

@@ -2,14 +2,23 @@
 'use client'
 import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Select,
+  Stack,
+  TextInput,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-
 interface FormPengajar {
   nama: string;
   lembagaId: string;
@@ -55,6 +64,7 @@ function EditPengajar() {
         lembagaId: formData.lembagaId.trim(),
       }
       await pengajarState.edit.update()
+      toast.success("Data pengajar berhasil diperbarui!")
       router.push("/admin/pendidikan/info-sekolah/pengajar");
     } catch (error) {
       console.error("Error updating pengajar:", error);
@@ -63,34 +73,63 @@ function EditPengajar() {
   }
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header Back + Title */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Pengajar
+        </Title>
+      </Group>
 
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Edit Pengajar</Title>
+      {/* Form Card */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
+            label="Nama Pengajar"
+            placeholder="Masukkan nama pengajar"
             value={formData.nama}
-            label={<Text fz="sm" fw="bold">Nama Pengajar</Text>}
-            placeholder="masukkan nama siswa"
             onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            required
           />
+
           <Select
             label="Lembaga Pendidikan"
+            placeholder="Pilih lembaga"
             data={infoSekolahPaud.lembagaPendidikan.findMany.data?.map(k => ({
               value: k.id,
               label: k.nama
             })) ?? []}
             value={formData.lembagaId}
             onChange={(val) => setFormData({ ...formData, lembagaId: val ?? '' })}
+            required
           />
-          <Button bg={colors['blue-button']} onClick={handleSubmit} >
-            Simpan
-          </Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/page.tsx

@@ -1,107 +1,124 @@
 'use client'
-import { useProxy } from 'valtio/utils';
-
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
-
-import colors from '@/con/colors';
+import { useProxy } from 'valtio/utils';
 
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import colors from '@/con/colors';
 
 function DetailPengajar() {
-  const detailState = useProxy(infoSekolahPaud.pengajar)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
+  const detailState = useProxy(infoSekolahPaud.pengajar);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const params = useParams();
+  const router = useRouter();
 
   useShallowEffect(() => {
-    detailState.findUnique.load(params?.id as string)
-  }, [])
-
+    detailState.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      detailState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/pendidikan/info-sekolah/pengajar")
+      detailState.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/pendidikan/info-sekolah/pengajar");
     }
-  }
+  };
 
   if (!detailState.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={40} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = detailState.findUnique.data;
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Pengajar</Text>
-          {detailState.findUnique.data ? (
-            <Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Nama</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.nama}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Lembaga</Text>
-                  <Text fz={"lg"} >{detailState.findUnique.data?.lembaga?.nama}</Text>
-                </Box>
-                <Flex gap={"xs"} mt={10}>
+    <Box py={10}>
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      <Paper
+        withBorder
+        w={{ base: "100%", md: "60%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Pengajar
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">Nama</Text>
+                <Text fz="md" c="dimmed">{data.nama || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Lembaga</Text>
+                <Text fz="md" c="dimmed">{data.lembaga?.nama || '-'}</Text>
+              </Box>
+
+              <Group gap="sm" mt="sm">
+                <Tooltip label="Hapus Pengajar" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (detailState.findUnique.data) {
-                        setSelectedId(detailState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={detailState.delete.loading || !detailState.findUnique.data}
-                    color={"red"}
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
-                    <IconX size={20} />
+                    <IconTrash size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Pengajar" withArrow position="top">
                   <Button
-                    onClick={() => {
-                      if (detailState.findUnique.data) {
-                        router.push(`/admin/pendidikan/info-sekolah/pengajar/${detailState.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!detailState.findUnique.data}
-                    color={"green"}
+                    color="green"
+                    onClick={() =>
+                      router.push(`/admin/pendidikan/info-sekolah/pengajar/${data.id}/edit`)
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Stack>
-            </Paper>
-          ) : null}
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
-      {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus pengajar ini?'
+        text="Apakah Anda yakin ingin menghapus pengajar ini?"
       />
     </Box>
   );
 }
 
-export default DetailPengajar;
+export default DetailPengajar;

src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/create/page.tsx

@@ -1,17 +1,28 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
 import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
-
+import { toast } from 'react-toastify';
 
 function CreatePengajar() {
   const router = useRouter();
-  const stateCreate = useProxy(infoSekolahPaud.pengajar)
+  const stateCreate = useProxy(infoSekolahPaud.pengajar);
 
   useEffect(() => {
     stateCreate.findMany.load();
@@ -20,51 +31,81 @@ function CreatePengajar() {
 
   const resetForm = () => {
     stateCreate.create.form = {
-      nama: "",
-      lembagaId: "",
+      nama: '',
+      lembagaId: '',
     };
   };
+
   const handleSubmit = async () => {
+    if (!stateCreate.create.form.nama || !stateCreate.create.form.lembagaId) {
+      return toast.warn('Nama dan Lembaga wajib diisi!');
+    }
+
     await stateCreate.create.create();
 
     resetForm();
-    router.push("/admin/pendidikan/info-sekolah/pengajar")
-  }
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    router.push('/admin/pendidikan/info-sekolah/pengajar');
+  };
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Pengajar</Title>
+  return (
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header Back + Title */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Pengajar
+        </Title>
+      </Group>
+
+      {/* Card Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
+            label={<Text fw="bold" fz="sm">Nama</Text>}
+            placeholder="Masukkan nama pengajar"
             value={stateCreate.create.form.nama}
-            onChange={(val) => {
-              stateCreate.create.form.nama = val.target.value;
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Nama</Text>}
-            placeholder='Masukkan nama'
+            onChange={(e) => (stateCreate.create.form.nama = e.target.value)}
+            required
           />
+
           <Select
-            value={stateCreate.create.form.lembagaId}
-            onChange={(val) => {
-              stateCreate.create.form.lembagaId = val ?? "";
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Lembaga</Text>}
+            label={<Text fw="bold" fz="sm">Lembaga</Text>}
             placeholder="Pilih lembaga"
+            value={stateCreate.create.form.lembagaId}
+            onChange={(val) => (stateCreate.create.form.lembagaId = val ?? '')}
             data={
               infoSekolahPaud.lembagaPendidikan.findMany.data?.map((v) => ({
                 value: v.id,
                 label: v.nama,
               })) || []
             }
+            required
           />
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/page.tsx

@@ -1,13 +1,15 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { 
+  Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, 
+  Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip 
+} from '@mantine/core';
+import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
 
 function Pengajar() {
@@ -16,7 +18,7 @@ function Pengajar() {
     <Box>
       <HeaderSearch
         title='Pengajar'
-        placeholder='pencarian'
+        placeholder='Cari nama pengajar atau lembaga...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -29,60 +31,105 @@ function Pengajar() {
 function ListPengajar({ search }: { search: string }) {
   const listState = useProxy(infoSekolahPaud.pengajar)
   const router = useRouter();
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load
+  } = listState.findMany;
+
   useEffect(() => {
-    listState.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (listState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.nama.toLowerCase().includes(keyword) ||
-      item.lembaga.nama.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!listState.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton h={500} radius="md" />
       </Stack>
     )
   }
 
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-            title='List Pengajar'
-            href='/admin/pendidikan/info-sekolah/pengajar/create'
-          />
-          <Box style={{ overflowX: 'auto' }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nama Pengajar</TableTh>
-                  <TableTh>Lembaga</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item) => (
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Pengajar</Title>
+          <Tooltip label="Tambah Pengajar" withArrow>
+            <Button 
+              leftSection={<IconPlus size={18} />} 
+              color="blue" 
+              variant="light" 
+              onClick={() => router.push('/admin/pendidikan/info-sekolah/pengajar/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover striped withRowBorders style={{ minWidth: '700px' }}>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '35%' }}>Nama Pengajar</TableTh>
+                <TableTh style={{ width: '35%' }}>Lembaga</TableTh>
+                <TableTh style={{ width: '20%' }}>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd>{item.nama}</TableTd>
-                    <TableTd>{item.lembaga.nama}</TableTd>
                     <TableTd>
-                      <Button onClick={() => router.push(`/admin/pendidikan/info-sekolah/pengajar/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
+                      <Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text truncate="end" fz="sm" c="dimmed">{item.lembaga.nama}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/pendidikan/info-sekolah/pengajar/${item.id}`)}
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={3}>
+                    <Center py={20}>
+                      <Text c="dimmed">Tidak ada data pengajar yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10, search)
+            window.scrollTo({ top: 0, behavior: 'smooth' })
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+          color="blue"
+          radius="md"
+        />
+      </Center>
     </Box>
   )
 }

src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/edit/page.tsx

@@ -2,28 +2,38 @@
 'use client'
 import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-
 interface FormSiswa {
   nama: string;
   lembagaId: string;
 }
 
 function EditSiswa() {
-  const siswaState = useProxy(infoSekolahPaud.siswa)
-  const params = useParams()
-  const router = useRouter()
+  const siswaState = useProxy(infoSekolahPaud.siswa);
+  const params = useParams();
+  const router = useRouter();
 
   const [formData, setFormData] = useState<FormSiswa>({
     nama: '',
-    lembagaId: ''
-  })
+    lembagaId: '',
+  });
 
   useEffect(() => {
     const loadSiswa = async () => {
@@ -39,11 +49,11 @@ function EditSiswa() {
           });
         }
       } catch (error) {
-        console.error("Error loading siswa:", error);
-        toast.error("Gagal memuat data siswa");
+        console.error('Error loading siswa:', error);
+        toast.error('Gagal memuat data siswa');
       }
-    }
-    infoSekolahPaud.lembagaPendidikan.findMany.load()
+    };
+    infoSekolahPaud.lembagaPendidikan.findMany.load();
     loadSiswa();
   }, [params?.id]);
 
@@ -53,44 +63,76 @@ function EditSiswa() {
         ...siswaState.edit.form,
         nama: formData.nama.trim(),
         lembagaId: formData.lembagaId.trim(),
-      }
-      await siswaState.edit.update()
-      router.push("/admin/pendidikan/info-sekolah/siswa");
+      };
+      await siswaState.edit.update();
+      toast.success('Data siswa berhasil diperbarui!');
+      router.push('/admin/pendidikan/info-sekolah/siswa');
     } catch (error) {
-      console.error("Error updating siswa:", error);
-      toast.error("Terjadi kesalahan saat memperbarui siswa");
+      console.error('Error updating siswa:', error);
+      toast.error('Terjadi kesalahan saat memperbarui siswa');
     }
-  }
+  };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header dengan tombol kembali */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Siswa
+        </Title>
+      </Group>
 
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Edit Siswa</Title>
+      {/* Card Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
-            value={formData.nama}
             label={<Text fz="sm" fw="bold">Nama Siswa</Text>}
-            placeholder="masukkan nama siswa"
+            placeholder="Masukkan nama siswa"
+            value={formData.nama}
             onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            required
           />
+
           <Select
-            label="Lembaga Pendidikan"
-            data={infoSekolahPaud.lembagaPendidikan.findMany.data?.map(k => ({
-              value: k.id,
-              label: k.nama
-            })) ?? []}
+            label={<Text fz="sm" fw="bold">Lembaga Pendidikan</Text>}
+            placeholder="Pilih lembaga pendidikan"
+            data={
+              infoSekolahPaud.lembagaPendidikan.findMany.data?.map((k) => ({
+                value: k.id,
+                label: k.nama,
+              })) ?? []
+            }
             value={formData.lembagaId}
             onChange={(val) => setFormData({ ...formData, lembagaId: val ?? '' })}
+            required
           />
-          <Button bg={colors['blue-button']} onClick={handleSubmit} >
-            Simpan
-          </Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/page.tsx

@@ -1,16 +1,14 @@
 'use client'
-import { useProxy } from 'valtio/utils';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core'
+import { useShallowEffect } from '@mantine/hooks'
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react'
+import { useParams, useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { useProxy } from 'valtio/utils'
 
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useState } from 'react';
-
-import colors from '@/con/colors';
-
-import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
-import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus'
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud'
+import colors from '@/con/colors'
 
 function DetailSiswa() {
   const detailState = useProxy(infoSekolahPaud.siswa)
@@ -23,7 +21,6 @@ function DetailSiswa() {
     detailState.findUnique.load(params?.id as string)
   }, [])
 
-
   const handleHapus = () => {
     if (selectedId) {
       detailState.delete.byId(selectedId)
@@ -36,60 +33,83 @@ function DetailSiswa() {
   if (!detailState.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={40} />
+        <Skeleton height={500} radius="md" />
       </Stack>
     )
   }
 
+  const data = detailState.findUnique.data
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Siswa</Text>
-          {detailState.findUnique.data ? (
-            <Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Nama</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.nama}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Lembaga</Text>
-                  <Text fz={"lg"} >{detailState.findUnique.data?.lembaga?.nama}</Text>
-                </Box>
-                <Flex gap={"xs"} mt={10}>
+    <Box py={10}>
+      {/* Tombol Kembali */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Card Utama */}
+      <Paper
+        withBorder
+        w={{ base: "100%", md: "60%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Siswa
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">Nama</Text>
+                <Text fz="md" c="dimmed">{data?.nama || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Lembaga</Text>
+                <Text fz="md" c="dimmed">{data?.lembaga?.nama || '-'}</Text>
+              </Box>
+
+              <Group gap="sm">
+                <Tooltip label="Hapus Siswa" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (detailState.findUnique.data) {
-                        setSelectedId(detailState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                      setSelectedId(data.id)
+                      setModalHapus(true)
                     }}
-                    disabled={detailState.delete.loading || !detailState.findUnique.data}
-                    color={"red"}
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
-                    <IconX size={20} />
+                    <IconTrash size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Siswa" withArrow position="top">
                   <Button
-                    onClick={() => {
-                      if (detailState.findUnique.data) {
-                        router.push(`/admin/pendidikan/info-sekolah/siswa/${detailState.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!detailState.findUnique.data}
-                    color={"green"}
+                    color="green"
+                    onClick={() =>
+                      router.push(`/admin/pendidikan/info-sekolah/siswa/${data.id}/edit`)
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Stack>
-            </Paper>
-          ) : null}
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
@@ -98,10 +118,10 @@ function DetailSiswa() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus siswa ini?'
+        text="Apakah Anda yakin ingin menghapus siswa ini?"
       />
     </Box>
-  );
+  )
 }
 
-export default DetailSiswa;
+export default DetailSiswa

src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/create/page.tsx

@@ -2,16 +2,26 @@
 'use client'
 import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
 
-
 function CreateSiswa() {
   const router = useRouter();
-  const stateCreate = useProxy(infoSekolahPaud.siswa)
+  const stateCreate = useProxy(infoSekolahPaud.siswa);
 
   useEffect(() => {
     stateCreate.findMany.load();
@@ -20,41 +30,58 @@ function CreateSiswa() {
 
   const resetForm = () => {
     stateCreate.create.form = {
-      nama: "",
-      lembagaId: "",
+      nama: '',
+      lembagaId: '',
     };
   };
+
   const handleSubmit = async () => {
     await stateCreate.create.create();
 
     resetForm();
-    router.push("/admin/pendidikan/info-sekolah/siswa")
-  }
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    router.push('/admin/pendidikan/info-sekolah/siswa');
+  };
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Siswa</Title>
+  return (
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header + Back Button */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Siswa
+        </Title>
+      </Group>
+
+      {/* Form Card */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
             value={stateCreate.create.form.nama}
             onChange={(val) => {
               stateCreate.create.form.nama = val.target.value;
             }}
-            label={<Text fw={"bold"} fz={"sm"}>Nama</Text>}
-            placeholder='Masukkan nama'
+            label={<Text fw="bold" fz="sm">Nama</Text>}
+            placeholder="Masukkan nama siswa"
+            required
           />
+
           <Select
             value={stateCreate.create.form.lembagaId}
             onChange={(val) => {
-              stateCreate.create.form.lembagaId = val ?? "";
+              stateCreate.create.form.lembagaId = val ?? '';
             }}
-            label={<Text fw={"bold"} fz={"sm"}>Lembaga</Text>}
+            label={<Text fw="bold" fz="sm">Lembaga</Text>}
             placeholder="Pilih lembaga"
             data={
               infoSekolahPaud.lembagaPendidikan.findMany.data?.map((v) => ({
@@ -62,9 +89,22 @@ function CreateSiswa() {
                 label: v.nama,
               })) || []
             }
+            required
           />
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/page.tsx

@@ -1,13 +1,30 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Paper,
+  Pagination,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip
+} from '@mantine/core';
+import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
 
 function Siswa() {
@@ -16,7 +33,7 @@ function Siswa() {
     <Box>
       <HeaderSearch
         title='Siswa'
-        placeholder='pencarian'
+        placeholder='Cari nama siswa atau lembaga...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -27,62 +44,101 @@ function Siswa() {
 }
 
 function ListSiswa({ search }: { search: string }) {
-  const listState = useProxy(infoSekolahPaud.siswa)
+  const stateSiswa = useProxy(infoSekolahPaud.siswa)
   const router = useRouter();
+
+  const { data, page, totalPages, loading, load } = stateSiswa.findMany;
+
   useEffect(() => {
-    listState.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (listState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.nama.toLowerCase().includes(keyword) ||
-      item.lembaga.nama.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!listState.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={500} radius="md" />
       </Stack>
     )
   }
 
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-            title='List Siswa'
-            href='/admin/pendidikan/info-sekolah/siswa/create'
-          />
-          <Box style={{ overflowX: 'auto' }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nama Siswa</TableTh>
-                  <TableTh>Lembaga</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item) => (
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Siswa</Title>
+          <Tooltip label="Tambah Siswa" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/pendidikan/info-sekolah/siswa/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover striped withRowBorders style={{ minWidth: '700px' }}>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '35%' }}>Nama Siswa</TableTh>
+                <TableTh style={{ width: '35%' }}>Lembaga</TableTh>
+                <TableTh style={{ width: '20%' }}>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd>{item.nama}</TableTd>
-                    <TableTd>{item.lembaga.nama}</TableTd>
                     <TableTd>
-                      <Button onClick={() => router.push(`/admin/pendidikan/info-sekolah/siswa/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
+                      <Text fw={500} truncate="end">{item.nama}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text truncate="end" c="dimmed">{item.lembaga.nama}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/pendidikan/info-sekolah/siswa/${item.id}`)}
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={3}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada data siswa yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+          color="blue"
+          radius="md"
+        />
+      </Center>
     </Box>
   )
 }

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/_lib/layoutTabs.tsx

@@ -1,68 +1,119 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
+import { IconSchool, IconMapPin, IconBook2 } from '@tabler/icons-react';
 
 function LayoutTabs({ children }: { children: React.ReactNode }) {
-  const router = useRouter()
-  const pathname = usePathname()
+  const router = useRouter();
+  const pathname = usePathname();
+
   const tabs = [
     {
       label: "Tujuan Program",
       value: "tujuan-program",
-      href: "/admin/pendidikan/pendidikan-non-formal/tujuan-program"
+      href: "/admin/pendidikan/pendidikan-non-formal/tujuan-program",
+      icon: <IconSchool size={18} stroke={1.8} />,
+      tooltip: "Atur tujuan program pendidikan non formal",
     },
     {
       label: "Tempat Kegiatan",
       value: "tempat-kegiatan",
-      href: "/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan"
+      href: "/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan",
+      icon: <IconMapPin size={18} stroke={1.8} />,
+      tooltip: "Kelola daftar tempat kegiatan",
     },
     {
       label: "Jenis Program yang Diselenggarakan",
       value: "jenis-program-yang-diselenggarakan",
-      href: "/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan"
+      href: "/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan",
+      icon: <IconBook2 size={18} stroke={1.8} />,
+      tooltip: "Lihat & atur jenis program yang tersedia",
     },
-    
   ];
-  const curentTab = tabs.find(tab => tab.href === pathname)
-  const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+  const currentTab = tabs.find(tab => tab.href === pathname);
+  const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
 
   const handleTabChange = (value: string | null) => {
-    const tab = tabs.find(t => t.value === value)
+    const tab = tabs.find(t => t.value === value);
     if (tab) {
-      router.push(tab.href)
+      router.push(tab.href);
     }
-    setActiveTab(value)
-  }
+    setActiveTab(value);
+  };
 
   useEffect(() => {
-    const match = tabs.find(tab => tab.href === pathname)
+    const match = tabs.find(tab => tab.href === pathname);
     if (match) {
-      setActiveTab(match.value)
+      setActiveTab(match.value);
     }
-  }, [pathname])
+  }, [pathname]);
 
   return (
-    <Stack>
-      <Title order={3}>Pendidikan Non Formal</Title>
-      <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
-        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-          {tabs.map((e, i) => (
-            <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+    <Stack gap="lg">
+      <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
+        Pendidikan Non Formal
+      </Title>
+
+      <Tabs
+        color={colors['blue-button']}
+        variant="pills"
+        value={activeTab}
+        onChange={handleTabChange}
+        radius="lg"
+        keepMounted={false}
+      >
+        <TabsList
+          p="sm"
+          style={{
+            background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+            borderRadius: "1rem",
+            boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+          }}
+        >
+          {tabs.map((tab, i) => (
+            <Tooltip
+              key={i}
+              label={tab.tooltip}
+              position="bottom"
+              withArrow
+              transitionProps={{ transition: 'pop', duration: 200 }}
+            >
+              <TabsTab
+                value={tab.value}
+                leftSection={tab.icon}
+                style={{
+                  fontWeight: 600,
+                  fontSize: "0.9rem",
+                  transition: "all 0.2s ease",
+                }}
+              >
+                {tab.label}
+              </TabsTab>
+            </Tooltip>
           ))}
         </TabsList>
-        {tabs.map((e, i) => (
-          <TabsPanel key={i} value={e.value}>
-            {/* Konten dummy, bisa diganti tergantung routing */}
-            <></>
+
+        {tabs.map((tab, i) => (
+          <TabsPanel
+            key={i}
+            value={tab.value}
+            style={{
+              padding: "1.5rem",
+              background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+              borderRadius: "1rem",
+              boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+            }}
+          >
+            {children}
           </TabsPanel>
         ))}
       </Tabs>
-      {children}
     </Stack>
   );
 }
 
-export default LayoutTabs;
+export default LayoutTabs;

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit/page.tsx

@@ -1,83 +1,156 @@
 'use client'
 import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import { toast } from 'react-toastify';
 
-const JenisProgramYangDiselenggarakanTextEditor = dynamic(() => import('../../_lib/pendidikanNonFormalTextEditor').then(mod => mod.PendidikanNonFormalTextEditor), {
-  ssr: false,
-});
+const JenisProgramYangDiselenggarakanTextEditor = dynamic(
+  () =>
+    import('../../_lib/pendidikanNonFormalTextEditor').then(
+      (mod) => mod.PendidikanNonFormalTextEditor
+    ),
+  { ssr: false }
+);
 
 function EditJenisProgramYangDiselenggarakan() {
-  const router = useRouter()
-  const editState = useProxy(pendidikanNonFormalState.stateJenisProgram)
+  const router = useRouter();
+  const editState = useProxy(pendidikanNonFormalState.stateJenisProgram);
+
   const [judul, setJudul] = useState('');
   const [content, setContent] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Load data pertama kali
   useShallowEffect(() => {
     if (!editState.findById.data) {
-      editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+      editState.findById.initialize();
     }
   }, []);
 
+  // Sync state dengan data hasil fetch
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '')
-      setContent(editState.findById.data.deskripsi ?? '')
+      setJudul(editState.findById.data.judul ?? '');
+      setContent(editState.findById.data.deskripsi ?? '');
     }
-  }, [editState.findById.data])
+  }, [editState.findById.data]);
 
-  const submit = () => {
-    if (editState.findById.data) {
-      editState.findById.data.judul = judul;
-      editState.findById.data.deskripsi = content;
-      editState.update.save(editState.findById.data)
+  const handleSubmit = async () => {
+    if (!judul.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
     }
-    router.push('/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan')
+
+    setIsSubmitting(true);
+    try {
+      if (editState.findById.data) {
+        editState.findById.data.judul = judul;
+        editState.findById.data.deskripsi = content;
+        await editState.update.save(editState.findById.data);
+
+        toast.success('Berhasil menyimpan perubahan');
+        router.push(
+          '/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan'
+        );
+      }
+    } catch (err) {
+      console.error('Error saving:', err);
+      toast.error('Gagal menyimpan data');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleBack = () => router.back();
+
+  if (editState.findById.loading) {
+    return (
+      <Box>
+        <Center h={400}>
+          <Text>Memuat data jenis program...</Text>
+        </Center>
+      </Box>
+    );
   }
+
   return (
     <Box>
-      <Stack gap={'xs'}>
-        <Box>
-          <Button
-            variant={'subtle'}
-            onClick={() => router.back()}
-          >
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
-            <Stack gap={'xs'}>
-              <Title order={3}>Edit Jenis Program Yang Diselenggarakan</Title>
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
-                value={judul}
-                onChange={(e) => setJudul(e.target.value)}
-              />
-              <Text fw={"bold"}>Deskripsi</Text>
+      <Stack gap="xs">
+        {/* Back Button + Title */}
+        <Group mb="md">
+          <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+            <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
+              <IconArrowBack color={colors['blue-button']} size={22} />
+            </Button>
+          </Tooltip>
+          <Title order={4} ml="sm" c="dark">
+            Edit Jenis Program Yang Diselenggarakan
+          </Title>
+        </Group>
+
+        <Paper
+          w={{ base: '100%', md: '50%' }}
+          bg={colors['white-1']}
+          p="md"
+          radius="md"
+          shadow="sm"
+          style={{ border: '1px solid #e0e0e0' }}
+        >
+          <Stack gap="xs">
+            <TextInput
+              label={<Text fz="sm" fw="bold">Judul</Text>}
+              placeholder="Masukkan judul program"
+              value={judul}
+              onChange={(e) => setJudul(e.currentTarget.value)}
+              error={!judul && 'Judul wajib diisi'}
+            />
+
+            <Box>
+              <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
               <JenisProgramYangDiselenggarakanTextEditor
                 showSubmit={false}
                 onChange={setContent}
                 initialContent={content}
               />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={submit}
-                  loading={editState.update.loading}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
+            </Box>
+
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                onClick={handleSubmit}
+                loading={isSubmitting || editState.update.loading}
+                disabled={!judul}
+              >
+                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
+              </Button>
+
+              <Button
+                variant="outline"
+                onClick={handleBack}
+                disabled={isSubmitting || editState.update.loading}
+              >
+                Batal
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
       </Stack>
     </Box>
   );

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/page.tsx

@@ -1,6 +1,18 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Divider,
+  Grid,
+  GridCol,
+  Paper,
+  Skeleton,
+  Stack,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -8,47 +20,86 @@ import { useProxy } from 'valtio/utils';
 import pendidikanNonFormalState from '../../../_state/pendidikan/pendidikan-non-formal';
 
 function Page() {
-  const router = useRouter()
-  const listPreview = useProxy(pendidikanNonFormalState.stateJenisProgram)
+  const router = useRouter();
+  const listPreview = useProxy(pendidikanNonFormalState.stateJenisProgram);
+
   useShallowEffect(() => {
-    listPreview.findById.load('edit')
-  }, [])
+    listPreview.findById.load('edit');
+  }, []);
 
   if (!listPreview.findById.data) {
     return (
-      <Stack>
-        <Skeleton radius={10} h={800} />
+      <Stack align="center" justify="center" py="xl">
+        <Skeleton radius="md" height={400} w="90%" />
       </Stack>
-    )
+    );
   }
+
+  const data = listPreview.findById.data;
+
   return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"22"}>
-        <Grid>
+    <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
+      <Stack gap="md">
+        {/* Header */}
+        <Grid align="center">
           <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={2}>Preview Jenis Program Yang Diselenggarakan</Title>
+            <Title order={3} c={colors['blue-button']}>
+              Preview Jenis Program Yang Diselenggarakan
+            </Title>
           </GridCol>
           <GridCol span={{ base: 12, md: 1 }}>
-            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit')}>
-              <IconEdit size={16} />
-            </Button>
+            <Tooltip label="Edit Jenis Program" withArrow>
+              <Button
+                c="green"
+                variant="light"
+                leftSection={<IconEdit size={18} stroke={2} />}
+                radius="md"
+                onClick={() =>
+                  router.push(
+                    '/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit'
+                  )
+                }
+              >
+                Edit
+              </Button>
+            </Tooltip>
           </GridCol>
         </Grid>
-        <Box>
-          <Stack gap={'lg'}>
-            <Paper p={"xl"} bg={colors['BG-trans']}>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
-              </Box>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
-              </Box>
-            </Paper>
-          </Stack>
-        </Box>
+
+        {/* Konten Preview */}
+        <Paper
+          p="xl"
+          bg={colors['white-1']}
+          withBorder
+          radius="md"
+          shadow="xs"
+        >
+          <Box px={{ base: 'sm', md: 50 }}>
+            <Stack gap="lg">
+              {/* Judul */}
+              <Text
+                ta="center"
+                fz={{ base: '1.3rem', md: '1.8rem' }}
+                fw="bold"
+                c={colors['blue-button']}
+                dangerouslySetInnerHTML={{ __html: data.judul }}
+              />
+              <Divider my="md" color={colors['blue-button']} />
+
+              {/* Deskripsi */}
+              <Text
+                fz={{ base: '1rem', md: '1.2rem' }}
+                lh={1.7}
+                ta="justify"
+                c="dimmed"
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+              />
+            </Stack>
+          </Box>
+        </Paper>
       </Stack>
     </Paper>
-  )
+  );
 }
 
 export default Page;

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit/page.tsx

@@ -1,83 +1,158 @@
 'use client'
 import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import { toast } from 'react-toastify';
 
-const TempatKegiatanTextEditor = dynamic(() => import('../../_lib/pendidikanNonFormalTextEditor').then(mod => mod.PendidikanNonFormalTextEditor), {
-  ssr: false,
-});
+const TempatKegiatanTextEditor = dynamic(
+  () =>
+    import('../../_lib/pendidikanNonFormalTextEditor').then(
+      (mod) => mod.PendidikanNonFormalTextEditor
+    ),
+  { ssr: false }
+);
 
 function EditTempatKegiatan() {
-  const router = useRouter()
-  const editState = useProxy(pendidikanNonFormalState.stateTempatKegiatan)
+  const router = useRouter();
+  const editState = useProxy(pendidikanNonFormalState.stateTempatKegiatan);
+
   const [judul, setJudul] = useState('');
   const [content, setContent] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // load data pertama kali
   useShallowEffect(() => {
     if (!editState.findById.data) {
-      editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+      editState.findById.initialize();
     }
   }, []);
 
+  // sync state dengan data hasil fetch
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '')
-      setContent(editState.findById.data.deskripsi ?? '')
+      setJudul(editState.findById.data.judul ?? '');
+      setContent(editState.findById.data.deskripsi ?? '');
     }
-  }, [editState.findById.data])
+  }, [editState.findById.data]);
 
-  const submit = () => {
-    if (editState.findById.data) {
-      editState.findById.data.judul = judul;
-      editState.findById.data.deskripsi = content;
-      editState.update.save(editState.findById.data)
+  const handleSubmit = async () => {
+    if (!judul.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
     }
-    router.push('/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan')
+
+    setIsSubmitting(true);
+    try {
+      if (editState.findById.data) {
+        editState.findById.data.judul = judul;
+        editState.findById.data.deskripsi = content;
+        await editState.update.save(editState.findById.data);
+
+        toast.success('Berhasil menyimpan perubahan');
+        router.push(
+          '/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan'
+        );
+      }
+    } catch (err) {
+      console.error('Error saving:', err);
+      toast.error('Gagal menyimpan data');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleBack = () => router.back();
+
+  if (editState.findById.loading) {
+    return (
+      <Box>
+        <Center h={400}>
+          <Text>Memuat data tempat kegiatan...</Text>
+        </Center>
+      </Box>
+    );
   }
+
   return (
     <Box>
-      <Stack gap={'xs'}>
-        <Box>
-          <Button
-            variant={'subtle'}
-            onClick={() => router.back()}
-          >
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
-            <Stack gap={'xs'}>
-              <Title order={3}>Edit Tempat Kegiatan</Title>
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
-                value={judul}
-                onChange={(e) => setJudul(e.target.value)}
-              />
-              <Text fw={"bold"}>Deskripsi</Text>
+      <Stack gap="xs">
+        {/* Back Button + Title */}
+        <Group mb="md">
+          <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+            <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
+              <IconArrowBack color={colors['blue-button']} size={22} />
+            </Button>
+          </Tooltip>
+          <Title order={4} ml="sm" c="dark">
+            Edit Tempat Kegiatan
+          </Title>
+        </Group>
+
+        <Paper
+          w={{ base: '100%', md: '50%' }}
+          bg={colors['white-1']}
+          p="md"
+          radius="md"
+          shadow="sm"
+          style={{ border: '1px solid #e0e0e0' }}
+        >
+          <Stack gap="xs">
+            <TextInput
+              label={<Text fz="sm" fw="bold">Judul</Text>}
+              placeholder="Masukkan judul tempat kegiatan"
+              value={judul}
+              onChange={(e) => setJudul(e.currentTarget.value)}
+              error={!judul && 'Judul wajib diisi'}
+            />
+
+            <Box>
+              <Text fz="sm" fw="bold" mb="xs">
+                Deskripsi
+              </Text>
               <TempatKegiatanTextEditor
                 showSubmit={false}
                 onChange={setContent}
                 initialContent={content}
               />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={submit}
-                  loading={editState.update.loading}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
+            </Box>
+
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                onClick={handleSubmit}
+                loading={isSubmitting || editState.update.loading}
+                disabled={!judul}
+              >
+                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
+              </Button>
+
+              <Button
+                variant="outline"
+                onClick={handleBack}
+                disabled={isSubmitting || editState.update.loading}
+              >
+                Batal
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
       </Stack>
     </Box>
   );

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -8,47 +8,86 @@ import { useProxy } from 'valtio/utils';
 import statePendidikanNonFormal from '../../../_state/pendidikan/pendidikan-non-formal';
 
 function Page() {
-  const router = useRouter()
-  const listPreview = useProxy(statePendidikanNonFormal.stateTempatKegiatan)
+  const router = useRouter();
+  const listPreview = useProxy(statePendidikanNonFormal.stateTempatKegiatan);
+
   useShallowEffect(() => {
-    listPreview.findById.load('edit')
-  }, [])
+    listPreview.findById.load('edit');
+  }, []);
 
   if (!listPreview.findById.data) {
     return (
-      <Stack>
-        <Skeleton radius={10} h={800} />
+      <Stack align="center" justify="center" py="xl">
+        <Skeleton radius="md" height={400} w="90%" />
       </Stack>
-    )
+    );
   }
+
+  const data = listPreview.findById.data;
+
   return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"22"}>
-        <Grid>
+    <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
+      <Stack gap="md">
+        {/* Header */}
+        <Grid align="center">
           <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={2}>Preview Tempat Kegiatan</Title>
+            <Title order={3} c={colors['blue-button']}>
+              Preview Tempat Kegiatan
+            </Title>
           </GridCol>
           <GridCol span={{ base: 12, md: 1 }}>
-            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit')}>
-              <IconEdit size={16} />
-            </Button>
+            <Tooltip label="Edit Tempat Kegiatan" withArrow>
+              <Button
+                c="green"
+                variant="light"
+                leftSection={<IconEdit size={18} stroke={2} />}
+                radius="md"
+                onClick={() =>
+                  router.push(
+                    '/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit'
+                  )
+                }
+              >
+                Edit
+              </Button>
+            </Tooltip>
           </GridCol>
         </Grid>
-        <Box>
-          <Stack gap={'lg'}>
-            <Paper p={"xl"} bg={colors['BG-trans']}>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
-              </Box>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
-              </Box>
-            </Paper>
-          </Stack>
-        </Box>
+
+        {/* Konten Preview */}
+        <Paper
+          p="xl"
+          bg={colors['white-1']}
+          withBorder
+          radius="md"
+          shadow="xs"
+        >
+          <Box px={{ base: 'sm', md: 50 }}>
+            <Stack gap="lg">
+              {/* Judul */}
+              <Text
+                ta="center"
+                fz={{ base: '1.3rem', md: '1.8rem' }}
+                fw="bold"
+                c={colors['blue-button']}
+                dangerouslySetInnerHTML={{ __html: data.judul }}
+              />
+              <Divider my="md" color={colors['blue-button']} />
+
+              {/* Deskripsi */}
+              <Text
+                fz={{ base: '1rem', md: '1.2rem' }}
+                lh={1.7}
+                ta="justify"
+                c="dimmed"
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+              />
+            </Stack>
+          </Box>
+        </Paper>
       </Stack>
     </Paper>
-  )
+  );
 }
 
 export default Page;

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/edit/page.tsx

@@ -1,83 +1,151 @@
 'use client'
 import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import { toast } from 'react-toastify';
 
-const PendidikanNonFormalTextEditor = dynamic(() => import('../../_lib/pendidikanNonFormalTextEditor').then(mod => mod.PendidikanNonFormalTextEditor), {
-  ssr: false,
-});
+const PendidikanNonFormalTextEditor = dynamic(
+  () => import('../../_lib/pendidikanNonFormalTextEditor').then(mod => mod.PendidikanNonFormalTextEditor),
+  { ssr: false }
+);
 
 function EditTujuanProgram() {
-  const router = useRouter()
-  const editState = useProxy(pendidikanNonFormalState.stateTujuanPendidikanNonFormal)
+  const router = useRouter();
+  const editState = useProxy(pendidikanNonFormalState.stateTujuanPendidikanNonFormal);
+
   const [judul, setJudul] = useState('');
   const [content, setContent] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // load data pertama kali
   useShallowEffect(() => {
     if (!editState.findById.data) {
-      editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+      editState.findById.initialize();
     }
   }, []);
 
+  // sync data hasil fetch ke local state
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '')
-      setContent(editState.findById.data.deskripsi ?? '')
+      setJudul(editState.findById.data.judul ?? '');
+      setContent(editState.findById.data.deskripsi ?? '');
     }
-  }, [editState.findById.data])
+  }, [editState.findById.data]);
 
-  const submit = () => {
-    if (editState.findById.data) {
-      editState.findById.data.judul = judul;
-      editState.findById.data.deskripsi = content;
-      editState.update.save(editState.findById.data)
+  const handleSubmit = async () => {
+    if (!judul.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
     }
-    router.push('/admin/pendidikan/pendidikan-non-formal/tujuan-program')
+
+    setIsSubmitting(true);
+    try {
+      if (editState.findById.data) {
+        editState.findById.data.judul = judul;
+        editState.findById.data.deskripsi = content;
+        await editState.update.save(editState.findById.data);
+
+        toast.success('Berhasil menyimpan perubahan');
+        router.push('/admin/pendidikan/pendidikan-non-formal/tujuan-program');
+      }
+    } catch (err) {
+      console.error('Error saving:', err);
+      toast.error('Gagal menyimpan data');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleBack = () => router.back();
+
+  if (editState.findById.loading) {
+    return (
+      <Box>
+        <Center h={400}>
+          <Text>Memuat data tujuan program...</Text>
+        </Center>
+      </Box>
+    );
   }
+
   return (
     <Box>
-      <Stack gap={'xs'}>
-        <Box>
-          <Button
-            variant={'subtle'}
-            onClick={() => router.back()}
-          >
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
-            <Stack gap={'xs'}>
-              <Title order={3}>Edit Tujuan Program</Title>
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
-                value={judul}
-                onChange={(e) => setJudul(e.target.value)}
-              />
-              <Text fw={"bold"}>Deskripsi</Text>
+      <Stack gap="xs">
+        {/* Back Button + Title */}
+        <Group mb="md">
+          <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+            <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
+              <IconArrowBack color={colors['blue-button']} size={22} />
+            </Button>
+          </Tooltip>
+          <Title order={4} ml="sm" c="dark">
+            Edit Tujuan Program
+          </Title>
+        </Group>
+
+        <Paper
+          w={{ base: '100%', md: '50%' }}
+          bg={colors['white-1']}
+          p="md"
+          radius="md"
+          shadow="sm"
+          style={{ border: '1px solid #e0e0e0' }}
+        >
+          <Stack gap="xs">
+            <TextInput
+              label={<Text fz="sm" fw="bold">Judul</Text>}
+              placeholder="Masukkan judul program"
+              value={judul}
+              onChange={(e) => setJudul(e.currentTarget.value)}
+              error={!judul && 'Judul wajib diisi'}
+            />
+
+            <Box>
+              <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
               <PendidikanNonFormalTextEditor
                 showSubmit={false}
                 onChange={setContent}
                 initialContent={content}
               />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={submit}
-                  loading={editState.update.loading}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
+            </Box>
+
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                onClick={handleSubmit}
+                loading={isSubmitting || editState.update.loading}
+                disabled={!judul}
+              >
+                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
+              </Button>
+
+              <Button
+                variant="outline"
+                onClick={handleBack}
+                disabled={isSubmitting || editState.update.loading}
+              >
+                Batal
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
       </Stack>
     </Box>
   );

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/page.tsx

@@ -1,6 +1,18 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Divider,
+  Grid,
+  GridCol,
+  Paper,
+  Skeleton,
+  Stack,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -8,47 +20,88 @@ import { useProxy } from 'valtio/utils';
 import statePendidikanNonFormal from '../../../_state/pendidikan/pendidikan-non-formal';
 
 function Page() {
-  const router = useRouter()
-  const listPreview = useProxy(statePendidikanNonFormal.stateTujuanPendidikanNonFormal)
+  const router = useRouter();
+  const listPreview = useProxy(
+    statePendidikanNonFormal.stateTujuanPendidikanNonFormal
+  );
+
   useShallowEffect(() => {
-    listPreview.findById.load('edit')
-  }, [])
+    listPreview.findById.load('edit');
+  }, []);
 
   if (!listPreview.findById.data) {
     return (
-      <Stack>
-        <Skeleton radius={10} h={800} />
+      <Stack align="center" justify="center" py="xl">
+        <Skeleton radius="md" height={400} w="90%" />
       </Stack>
-    )
+    );
   }
+
+  const data = listPreview.findById.data;
+
   return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"22"}>
-        <Grid>
+    <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
+      <Stack gap="md">
+        {/* Header */}
+        <Grid align="center">
           <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={2}>Preview Pendidikan Non Formal</Title>
+            <Title order={3} c={colors['blue-button']}>
+              Pratinjau Pendidikan Non Formal
+            </Title>
           </GridCol>
           <GridCol span={{ base: 12, md: 1 }}>
-            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/pendidikan-non-formal/tujuan-program/edit')}>
-              <IconEdit size={16} />
-            </Button>
+            <Tooltip label="Edit Tujuan Pendidikan Non Formal" withArrow>
+              <Button
+                c="green"
+                variant="light"
+                leftSection={<IconEdit size={18} stroke={2} />}
+                radius="md"
+                onClick={() =>
+                  router.push(
+                    '/admin/pendidikan/pendidikan-non-formal/tujuan-program/edit'
+                  )
+                }
+              >
+                Edit
+              </Button>
+            </Tooltip>
           </GridCol>
         </Grid>
-        <Box>
-          <Stack gap={'lg'}>
-            <Paper p={"xl"} bg={colors['BG-trans']}>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
-              </Box>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
-              </Box>
-            </Paper>
-          </Stack>
-        </Box>
+
+        {/* Konten Preview */}
+        <Paper
+          p="xl"
+          bg={colors['white-1']}
+          withBorder
+          radius="md"
+          shadow="xs"
+        >
+          <Box px={{ base: 'sm', md: 50 }}>
+            <Stack gap="lg">
+              {/* Judul */}
+              <Text
+                ta="center"
+                fz={{ base: '1.3rem', md: '1.8rem' }}
+                fw="bold"
+                c={colors['blue-button']}
+                dangerouslySetInnerHTML={{ __html: data.judul }}
+              />
+              <Divider my="md" color={colors['blue-button']} />
+
+              {/* Deskripsi */}
+              <Text
+                fz={{ base: '1rem', md: '1.2rem' }}
+                lh={1.7}
+                ta="justify"
+                c="dimmed"
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+              />
+            </Stack>
+          </Box>
+        </Paper>
       </Stack>
     </Paper>
-  )
+  );
 }
 
 export default Page;

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/_lib/layoutTabs.tsx

@@ -1,63 +1,111 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
+import { IconBook2, IconCategory } from '@tabler/icons-react';
 
 function LayoutTabs({ children }: { children: React.ReactNode }) {
-  const router = useRouter()
-  const pathname = usePathname()
+  const router = useRouter();
+  const pathname = usePathname();
+
   const tabs = [
     {
       label: "Data Perpustakaan",
       value: "data-perpustakaan",
-      href: "/admin/pendidikan/perpustakaan-digital/data-perpustakaan"
+      href: "/admin/pendidikan/perpustakaan-digital/data-perpustakaan",
+      icon: <IconBook2 size={18} stroke={1.8} />,
+      tooltip: "Kelola data koleksi perpustakaan digital",
     },
     {
       label: "Kategori Buku",
       value: "kategori-buku",
-      href: "/admin/pendidikan/perpustakaan-digital/kategori-buku"
+      href: "/admin/pendidikan/perpustakaan-digital/kategori-buku",
+      icon: <IconCategory size={18} stroke={1.8} />,
+      tooltip: "Atur kategori untuk buku digital",
     },
-    
   ];
-  const curentTab = tabs.find(tab => tab.href === pathname)
-  const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+  const currentTab = tabs.find(tab => tab.href === pathname);
+  const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
 
   const handleTabChange = (value: string | null) => {
-    const tab = tabs.find(t => t.value === value)
+    const tab = tabs.find(t => t.value === value);
     if (tab) {
-      router.push(tab.href)
+      router.push(tab.href);
     }
-    setActiveTab(value)
-  }
+    setActiveTab(value);
+  };
 
   useEffect(() => {
-    const match = tabs.find(tab => tab.href === pathname)
+    const match = tabs.find(tab => tab.href === pathname);
     if (match) {
-      setActiveTab(match.value)
+      setActiveTab(match.value);
     }
-  }, [pathname])
+  }, [pathname]);
 
   return (
-    <Stack>
-      <Title order={3}>Perpustakaan Digital</Title>
-      <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
-        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-          {tabs.map((e, i) => (
-            <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+    <Stack gap="lg">
+      <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
+        Perpustakaan Digital
+      </Title>
+      <Tabs
+        color={colors['blue-button']}
+        variant='pills'
+        value={activeTab}
+        onChange={handleTabChange}
+        radius="lg"
+        keepMounted={false}
+      >
+        <TabsList
+          p="sm"
+          style={{
+            background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+            borderRadius: "1rem",
+            boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+          }}
+        >
+          {tabs.map((tab, i) => (
+            <Tooltip 
+              key={i} 
+              label={tab.tooltip} 
+              position="bottom" 
+              withArrow 
+              transitionProps={{ transition: 'pop', duration: 200 }}
+            >
+              <TabsTab
+                value={tab.value}
+                leftSection={tab.icon}
+                style={{
+                  fontWeight: 600,
+                  fontSize: "0.9rem",
+                  transition: "all 0.2s ease",
+                }}
+              >
+                {tab.label}
+              </TabsTab>
+            </Tooltip>
           ))}
         </TabsList>
-        {tabs.map((e, i) => (
-          <TabsPanel key={i} value={e.value}>
-            {/* Konten dummy, bisa diganti tergantung routing */}
-            <></>
+
+        {tabs.map((tab, i) => (
+          <TabsPanel
+            key={i}
+            value={tab.value}
+            style={{
+              padding: "1.5rem",
+              background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+              borderRadius: "1rem",
+              boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+            }}
+          >
+            {children}
           </TabsPanel>
         ))}
       </Tabs>
-      {children}
     </Stack>
   );
 }
 
-export default LayoutTabs;
+export default LayoutTabs;

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/edit/page.tsx

@@ -4,7 +4,7 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -12,7 +12,7 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-function EditPasarDesa() {
+function EditPerpustakaanDigital() {
   const editState = useProxy(perpustakaanDigitalState.dataPerpustakaan)
   const router = useRouter();
   const params = useParams();
@@ -41,16 +41,11 @@ function EditPasarDesa() {
             imageId: data.imageId || "",
             kategoriId: data.kategoriId || "",
           });
-          // Tampilkan preview gambar
-          if (data.image?.link) {
-            setPreviewImage(data.image.link);
-          }
+          if (data.image?.link) setPreviewImage(data.image.link);
         }
       } catch (error) {
         console.error("Error loading data perpustakaan:", error);
-        toast.error(
-          error instanceof Error ? error.message : "Gagal mengambil data perpustakaan"
-        );
+        toast.error(error instanceof Error ? error.message : "Gagal mengambil data perpustakaan");
       }
     }
 
@@ -59,22 +54,12 @@ function EditPasarDesa() {
 
   const handleSubmit = async () => {
     try {
-      editState.update.form = {
-        ...editState.update.form,
-        judul: formData.judul,
-        deskripsi: formData.deskripsi,
-        kategoriId: formData.kategoriId,
-        imageId: formData.imageId,
-      }
+      editState.update.form = { ...editState.update.form, ...formData }
+
       if (file) {
         const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
         const uploaded = res.data?.data;
-
-        if (!uploaded?.id) {
-          return toast.error("Gagal upload gambar");
-        }
-
-        // Update imageId in global state
+        if (!uploaded?.id) return toast.error("Gagal upload gambar");
         editState.update.form.imageId = uploaded.id;
       }
 
@@ -88,106 +73,110 @@ function EditPasarDesa() {
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Data Perpustakaan Digital
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Data Perpustakaan</Title>
+      {/* Form Paper */}
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p="lg" radius="md" shadow="sm" style={{ border: '1px solid #e0e0e0' }}>
+        <Stack gap="md">
+          {/* Dropzone Image */}
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Text fw="bold" fz="sm" mb={6}>Gambar</Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="red" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={48} color="#868e96" stroke={1.5} />
+                </Dropzone.Idle>
+                <Stack gap="xs" align="center">
+                  <Text size="md" fw={500}>Seret gambar atau klik untuk memilih file</Text>
+                  <Text size="sm" c="dimmed">Maksimal 5MB, format gambar wajib</Text>
+                </Stack>
+              </Group>
+            </Dropzone>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag gambar ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format gambar
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
-
-            </Box>
+            {previewImage && (
+              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
+                <Image
+                  src={previewImage}
+                  alt="Preview"
+                  radius="md"
+                  style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
+                />
+              </Box>
+            )}
           </Box>
+
+          {/* Judul */}
           <TextInput
+            label="Judul"
+            placeholder="Masukkan judul"
             value={formData.judul}
             onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
-            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
-            placeholder='Masukkan judul'
+            required
           />
+
+          {/* Deskripsi */}
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
-            <EditEditor
-              value={formData.deskripsi}
-              onChange={(val) => {
-                setFormData({ ...formData, deskripsi: val });
-              }}
-            />
+            <Text fw="bold" fz="sm" mb={6}>Deskripsi</Text>
+            <EditEditor value={formData.deskripsi} onChange={(val) => setFormData({ ...formData, deskripsi: val })} />
           </Box>
+
+          {/* Kategori */}
           <Select
             value={formData.kategoriId}
             onChange={(val) => setFormData({ ...formData, kategoriId: val || "" })}
-            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+            label="Kategori"
             placeholder='Pilih kategori'
-            data={
-              perpustakaanDigitalState.kategoriBuku.findMany.data?.map((v) => ({
-                value: v.id,
-                label: v.name
-              })) || []
-            }
+            data={perpustakaanDigitalState.kategoriBuku.findMany.data?.map(v => ({ value: v.id, label: v.name })) || []}
             clearable
             searchable
             required
             error={!formData.kategoriId ? "Pilih kategori" : undefined}
           />
 
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          {/* Submit Button */}
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>
@@ -195,4 +184,4 @@ function EditPasarDesa() {
   );
 }
 
-export default EditPasarDesa;
+export default EditPerpustakaanDigital;

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/page.tsx

@@ -2,7 +2,7 @@
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
 import colors from '@/con/colors';
-import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -10,97 +10,130 @@ import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
 function DetailDataPerpustakaan() {
-  const stateDetail = useProxy(perpustakaanDigitalState.dataPerpustakaan)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
+  const stateDetail = useProxy(perpustakaanDigitalState.dataPerpustakaan);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const params = useParams();
   const router = useRouter();
 
   useShallowEffect(() => {
-    stateDetail.findUnique.load(params?.id as string)
-  }, [])
+    stateDetail.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      stateDetail.delete.delete(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/pendidikan/perpustakaan-digital/data-perpustakaan")
+      stateDetail.delete.delete(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/pendidikan/perpustakaan-digital/data-perpustakaan");
     }
-  }
+  };
 
   if (!stateDetail.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = stateDetail.findUnique.data;
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Data Perpustakaan</Text>
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
+    <Box py={10}>
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      <Paper
+        withBorder
+        w={{ base: "100%", md: "60%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Data Perpustakaan
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Judul</Text>
-                <Text fz={"lg"}>{stateDetail.findUnique.data?.judul}</Text>
+                <Text fz="lg" fw="bold">Judul</Text>
+                <Text fz="md" c="dimmed">{data.judul || '-'}</Text>
               </Box>
+
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: stateDetail.findUnique.data?.deskripsi }} />
+                <Text fz="lg" fw="bold">Deskripsi</Text>
+                <Text fz="md" dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }} />
               </Box>
+
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Kategori</Text>
-                <Text fz={"lg"}>{stateDetail.findUnique.data?.kategori.name}</Text>
+                <Text fz="lg" fw="bold">Kategori</Text>
+                <Text fz="md" c="dimmed">{data.kategori?.name || '-'}</Text>
               </Box>
+
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                <Image src={stateDetail.findUnique.data?.image.link} alt="gambar" />
+                <Text fz="lg" fw="bold">Gambar</Text>
+                {data.image?.link ? (
+                  <Image
+                    src={data.image.link}
+                    alt={data.judul || 'Gambar Perpustakaan'}
+                    w={120}
+                    h={120}
+                    radius="md"
+                    fit="cover"
+                  />
+                ) : (
+                  <Text fz="sm" c="dimmed">Tidak ada gambar</Text>
+                )}
               </Box>
-              <Box>
-                <Flex gap={"xs"}>
+
+              <Group gap="sm">
+                <Tooltip label="Hapus Data Perpustakaan" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (stateDetail.findUnique.data) {
-                        setSelectedId(stateDetail.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={!stateDetail.findUnique.data}
-                    color="red">
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
                     <IconX size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Data Perpustakaan" withArrow position="top">
                   <Button
-                    onClick={() => {
-                      if (stateDetail.findUnique.data) {
-                        router.push(`/admin/pendidikan/perpustakaan-digital/data-perpustakaan/${stateDetail.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!stateDetail.findUnique.data}
-                    color="green">
+                    color="green"
+                    onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/data-perpustakaan/${data.id}/edit`)}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Box>
+                </Tooltip>
+              </Group>
             </Stack>
           </Paper>
         </Stack>
       </Paper>
 
-      {/* Modal Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus data ini?"
+        text="Apakah Anda yakin ingin menghapus data ini?"
       />
     </Box>
   );

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/create/page.tsx

@@ -3,7 +3,7 @@ import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -11,7 +11,6 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-
 function CreateDataPerpustakaan() {
   const createState = useProxy(perpustakaanDigitalState.dataPerpustakaan)
   const router = useRouter();
@@ -29,7 +28,6 @@ function CreateDataPerpustakaan() {
       imageId: "",
       kategoriId: "",
     };
-
     setPreviewImage(null)
     setFile(null)
   };
@@ -56,103 +54,119 @@ function CreateDataPerpustakaan() {
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Tombol Kembali */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Data Perpustakaan
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Data Perpustakaan</Title>
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          {/* Judul */}
           <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+            label={<Text fw="bold" fz="sm">Judul</Text>}
             placeholder='Masukkan judul'
             value={createState.create.form.judul}
             onChange={(val) => {
               createState.create.form.judul = val.target.value;
             }}
+            required
           />
+
+          {/* Deskripsi */}
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+            <Text fw="bold" fz="sm" mb={6}>Deskripsi</Text>
             <CreateEditor
               value={createState.create.form.deskripsi}
-              onChange={(val) => {
-                createState.create.form.deskripsi = val;
-              }}
+              onChange={(val) => { createState.create.form.deskripsi = val; }}
             />
           </Box>
+
+          {/* Kategori */}
           <Select
-            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+            label={<Text fw="bold" fz="sm">Kategori</Text>}
             placeholder='Pilih kategori'
             value={createState.create.form.kategoriId || ""}
-            onChange={(val) => {
-              createState.create.form.kategoriId = val ?? "";
-            }}
+            onChange={(val) => { createState.create.form.kategoriId = val ?? ""; }}
             data={perpustakaanDigitalState.kategoriBuku.findMany.data?.map((item) => ({
               value: item.id,
               label: item.name,
             }))}
           />
+
+          {/* Gambar */}
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Text fw="bold" fz="sm" mb={6}>Gambar</Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+              </Group>
+              <Text ta="center" mt="sm" size="sm" color="dimmed">
+                Drag gambar ke sini atau klik untuk pilih file (maks 5MB)
+              </Text>
+            </Dropzone>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag gambar ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format gambar
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
-
-            </Box>
+            {previewImage && (
+              <Box mt="sm" style={{ textAlign: 'center' }}>
+                <Image
+                  src={previewImage}
+                  alt="Preview"
+                  radius="md"
+                  style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
+                />
+              </Box>
+            )}
           </Box>
-          <Group>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+
+          {/* Submit Button */}
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/page.tsx

@@ -1,24 +1,21 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { Box, Button, Center, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip, Pagination } from '@mantine/core';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import perpustakaanDigitalState from '../../../_state/pendidikan/perpustakaan-digital';
 
-
-
 function DataPerpustakaan() {
   const [search, setSearch] = useState('');
   return (
     <Box>
       <HeaderSearch
         title='Data Perpustakaan'
-        placeholder='pencarian'
+        placeholder='Cari judul, deskripsi, atau kategori...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -32,70 +29,99 @@ function ListDataPerpustakaan({ search }: { search: string }) {
   const listDataState = useProxy(perpustakaanDigitalState.dataPerpustakaan)
   const router = useRouter();
 
+  const { data, page, totalPages, loading, load } = listDataState.findMany;
+
   useEffect(() => {
-    perpustakaanDigitalState.dataPerpustakaan.findMany.load()
-    listDataState.findMany.load()
-  }, [])
+    load(page, 10, search);
+  }, [page, search]);
 
-  const filteredData = (listDataState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.judul.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword) ||
-      item.kategori.name.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || [];
 
-  if (!listDataState.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={500} radius="md" />
       </Stack>
     )
   }
+
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p="md">
-        <Stack>
-        <JudulList
-          title='List Data Perpustakaan'
-          href='/admin/pendidikan/perpustakaan-digital/data-perpustakaan/create'
-        />
-          <Box style={{ overflowX: 'auto' }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>No</TableTh>
-                  <TableTh>Judul</TableTh>
-                  <TableTh>Kategori</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item, index) => (
+      <Paper withBorder bg={colors['white-1']} p="md" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>List Data Perpustakaan</Title>
+          <Tooltip label="Tambah Data Perpustakaan" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/pendidikan/perpustakaan-digital/data-perpustakaan/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+        <Box style={{ overflowX: 'auto' }}>
+          <Table striped highlightOnHover withRowBorders style={{ minWidth: '700px' }}>
+            <TableThead>
+              <TableTr>
+                <TableTh>No</TableTh>
+                <TableTh>Judul</TableTh>
+                <TableTh>Kategori</TableTh>
+                <TableTh>Detail</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item, index) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{index + 1}</Text>
-                      </Box>
+                      <Text truncate fz="sm">{index + 1}</Text>
                     </TableTd>
                     <TableTd>
-                      <Text truncate="end" fz={"sm"}>{item.judul}</Text>
+                      <Text truncate fz="sm">{item.judul}</Text>
                     </TableTd>
                     <TableTd>
-                      <Text truncate="end" fz={"sm"}>{item.kategori.name}</Text>
+                      <Text truncate fz="sm">{item.kategori.name}</Text>
                     </TableTd>
                     <TableTd>
-                      <Button onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/data-perpustakaan/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/data-perpustakaan/${item.id}`)}
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada data perpustakaan yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            }}
+            total={totalPages}
+            mt="md"
+            mb="md"
+            color="blue"
+            radius="md"
+          />
+        </Center>
       </Paper>
     </Box>
   )

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/[id]/page.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
 import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -10,67 +10,91 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function EditKategoriBuku() {
-  const editState = useProxy(perpustakaanDigitalState.kategoriBuku)
+  const editState = useProxy(perpustakaanDigitalState.kategoriBuku);
   const router = useRouter();
   const params = useParams();
+
   const [formData, setFormData] = useState({
-      name: editState.update.form.name || '',
-    });
+    name: editState.update.form.name || '',
+  });
 
   useEffect(() => {
-      const loadKategori = async () => {
-        const id = params?.id as string;
-        if (!id) return;
-  
-        try {
-          const data = await editState.update.load(id); // akses langsung, bukan dari proxy
-          if (data) {
-            setFormData({
-              name: data.name || '',
-            });
-          }
-        } catch (error) {
-          console.error("Error loading kategori buku:", error);
-          toast.error("Gagal memuat data kategori buku");
-        }
-      };
-  
-      loadKategori();
-    }, [params?.id]);
+    const loadKategori = async () => {
+      const id = params?.id as string;
+      if (!id) return;
 
-    const handleSubmit = async () => {
       try {
-        editState.update.form = {
-          ...editState.update.form,
-          name: formData.name,
-        };
-        await editState.update.update();
-        toast.success('Kategori Buku berhasil diperbarui!');
-        router.push('/admin/pendidikan/perpustakaan-digital/kategori-buku');
+        const data = await editState.update.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || '',
+          });
+        }
       } catch (error) {
-        console.error('Error updating kategori buku:', error);
-        toast.error('Terjadi kesalahan saat memperbarui kategori buku');
+        console.error('Error loading kategori buku:', error);
+        toast.error('Gagal memuat data kategori buku');
       }
     };
 
+    loadKategori();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      editState.update.form = { ...editState.update.form, name: formData.name };
+      await editState.update.update();
+      toast.success('Kategori Buku berhasil diperbarui!');
+      router.push('/admin/pendidikan/perpustakaan-digital/kategori-buku');
+    } catch (error) {
+      console.error('Error updating kategori buku:', error);
+      toast.error('Terjadi kesalahan saat memperbarui kategori buku');
+    }
+  };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors["blue-button"]} size={30} />
-        </Button>
-      </Box>
-      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Edit Kategori Buku</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Kategori Buku
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
+            label="Nama Kategori Buku"
+            placeholder="Masukkan nama kategori buku"
             value={formData.name}
             onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Nama Kategori Buku</Text>}
-            placeholder="masukkan nama kategori buku"
+            required
           />
 
-          <Button onClick={handleSubmit}>Simpan</Button>
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/create/page.tsx

@@ -1,13 +1,11 @@
 'use client'
 import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 
-
-
 function CreateKategoriBuku() {
   const createState = useProxy(perpustakaanDigitalState.kategoriBuku)
   const router = useRouter();
@@ -21,30 +19,56 @@ function CreateKategoriBuku() {
   const handleSubmit = async () => {
     await createState.create.create();
     resetForm();
-    router.push("/admin/pendidikan/perpustakaan-digital/kategori-buku")
+    router.push("/admin/pendidikan/perpustakaan-digital/kategori-buku");
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Kategori Buku
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Kategori Buku</Title>
+      {/* Form Paper */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Buku</Text>}
+            label={<Text fw="bold" fz="sm">Nama Kategori Buku</Text>}
             placeholder='Masukkan nama kategori buku'
             value={createState.create.form.name}
             onChange={(val) => {
               createState.create.form.name = val.target.value;
             }}
+            required
           />
-          <Group>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/page.tsx

@@ -1,25 +1,22 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit, IconPlus, IconTrash, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import perpustakaanDigitalState from '../../../_state/pendidikan/perpustakaan-digital';
 
-
-
 function KategoriBuku() {
   const [search, setSearch] = useState('');
   return (
     <Box>
       <HeaderSearch
         title='Kategori Buku'
-        placeholder='pencarian'
+        placeholder='Cari kategori...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -30,89 +27,123 @@ function KategoriBuku() {
 }
 
 function ListKategoriBuku({ search }: { search: string }) {
-  const listDataState = useProxy(perpustakaanDigitalState.kategoriBuku)
+  const stateKategori = useProxy(perpustakaanDigitalState.kategoriBuku)
   const router = useRouter();
   const [modalHapus, setModalHapus] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
 
-  useEffect(() => {
-    listDataState.findMany.load()
-  }, [])
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateKategori.findMany;
+
+  useShallowEffect(() => {
+    load(page, 10, search)
+  }, [page, search]);
 
   const handleDelete = () => {
     if (selectedId) {
       perpustakaanDigitalState.kategoriBuku.delete.delete(selectedId)
       setModalHapus(false)
       setSelectedId(null)
-
       perpustakaanDigitalState.kategoriBuku.findMany.load()
     }
   }
 
-  const filteredData = (listDataState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || [];
 
-  if (!listDataState.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={500} radius="md" />
       </Stack>
     )
   }
+
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p="md">
-        <Stack>
-        <JudulList
-          title='List Kategori Buku'
-          href='/admin/pendidikan/perpustakaan-digital/kategori-buku/create'
-        />
-          <Box style={{ overflowX: 'auto' }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>No</TableTh>
-                  <TableTh>Nama</TableTh>
-                  <TableTh>Edit</TableTh>
-                  <TableTh>Hapus</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item, index) => (
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Kategori Buku</Title>
+          <Tooltip label="Tambah Kategori Buku" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/pendidikan/perpustakaan-digital/kategori-buku/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '10%' }}>No</TableTh>
+                <TableTh style={{ width: '60%' }}>Nama Kategori</TableTh>
+                <TableTh style={{ width: '15%' }}>Edit</TableTh>
+                <TableTh style={{ width: '15%' }}>Hapus</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item, index) => (
                   <TableTr key={item.id}>
+                    <TableTd>{index + 1}</TableTd>
                     <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{index + 1}</Text>
-                      </Box>
+                      <Text truncate fz="sm">{item.name}</Text>
                     </TableTd>
-                    <TableTd>{item.name}</TableTd>
                     <TableTd>
-                      <Button color='green' onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/kategori-buku/${item.id}`)}>
+                      <Button variant="light" color="green" onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/kategori-buku/${item.id}`)}>
                         <IconEdit size={20} />
                       </Button>
                     </TableTd>
                     <TableTd>
                       <Button
-                        color='red'
+                        variant="light"
+                        color="red"
                         disabled={perpustakaanDigitalState.kategoriBuku.delete.loading}
                         onClick={() => {
                           setSelectedId(item.id)
                           setModalHapus(true)
-                        }}>
+                        }}
+                      >
                         <IconTrash size={20} />
                       </Button>
                     </TableTd>
                   </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text c="dimmed">Tidak ada data kategori buku yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+          color="blue"
+          radius="md"
+        />
+      </Center>
 
       {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/_lib/layoutTabs.tsx

@@ -1,62 +1,112 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
+import { IconSchool, IconTarget } from '@tabler/icons-react';
 
 function LayoutTabs({ children }: { children: React.ReactNode }) {
-  const router = useRouter()
-  const pathname = usePathname()
+  const router = useRouter();
+  const pathname = usePathname();
+
   const tabs = [
     {
       label: "Program Unggulan",
       value: "program-unggulan",
-      href: "/admin/pendidikan/program-pendidikan-anak/program-unggulan"
+      href: "/admin/pendidikan/program-pendidikan-anak/program-unggulan",
+      icon: <IconSchool size={18} stroke={1.8} />,
+      tooltip: "Lihat dan kelola program unggulan pendidikan anak",
     },
     {
       label: "Tujuan Program",
       value: "tujuan-program",
-      href: "/admin/pendidikan/program-pendidikan-anak/tujuan-program"
+      href: "/admin/pendidikan/program-pendidikan-anak/tujuan-program",
+      icon: <IconTarget size={18} stroke={1.8} />,
+      tooltip: "Atur tujuan program pendidikan anak",
     },
   ];
-  const curentTab = tabs.find(tab => tab.href === pathname)
-  const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+  const currentTab = tabs.find(tab => tab.href === pathname);
+  const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
 
   const handleTabChange = (value: string | null) => {
-    const tab = tabs.find(t => t.value === value)
+    const tab = tabs.find(t => t.value === value);
     if (tab) {
-      router.push(tab.href)
+      router.push(tab.href);
     }
-    setActiveTab(value)
-  }
+    setActiveTab(value);
+  };
 
   useEffect(() => {
-    const match = tabs.find(tab => tab.href === pathname)
+    const match = tabs.find(tab => tab.href === pathname);
     if (match) {
-      setActiveTab(match.value)
+      setActiveTab(match.value);
     }
-  }, [pathname])
+  }, [pathname]);
 
   return (
-    <Stack>
-      <Title order={3}>Program Pendidikan Anak</Title>
-      <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
-        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-          {tabs.map((e, i) => (
-            <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+    <Stack gap="lg">
+      <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
+        Program Pendidikan Anak
+      </Title>
+
+      <Tabs
+        color={colors['blue-button']}
+        variant='pills'
+        value={activeTab}
+        onChange={handleTabChange}
+        radius="lg"
+        keepMounted={false}
+      >
+        <TabsList
+          p="sm"
+          style={{
+            background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+            borderRadius: "1rem",
+            boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+          }}
+        >
+          {tabs.map((tab, i) => (
+            <Tooltip
+              key={i}
+              label={tab.tooltip}
+              position="bottom"
+              withArrow
+              transitionProps={{ transition: 'pop', duration: 200 }}
+            >
+              <TabsTab
+                value={tab.value}
+                leftSection={tab.icon}
+                style={{
+                  fontWeight: 600,
+                  fontSize: "0.9rem",
+                  transition: "all 0.2s ease",
+                }}
+              >
+                {tab.label}
+              </TabsTab>
+            </Tooltip>
           ))}
         </TabsList>
-        {tabs.map((e, i) => (
-          <TabsPanel key={i} value={e.value}>
-            {/* Konten dummy, bisa diganti tergantung routing */}
-            <></>
+
+        {tabs.map((tab, i) => (
+          <TabsPanel
+            key={i}
+            value={tab.value}
+            style={{
+              padding: "1.5rem",
+              background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+              borderRadius: "1rem",
+              boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+            }}
+          >
+            {children}
           </TabsPanel>
         ))}
       </Tabs>
-      {children}
     </Stack>
   );
 }
 
-export default LayoutTabs;
+export default LayoutTabs;

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/edit/page.tsx

@@ -1,83 +1,163 @@
 'use client'
 import stateProgramPendidikanAnak from '@/app/admin/(dashboard)/_state/pendidikan/program-pendidikan-anak';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-const ProgramPendidikanAnakTextEditor = dynamic(() => import('../../_lib/programPendidikanAnakTextEditor').then(mod => mod.ProgramPendidikanAnakTextEditor), {
-  ssr: false,
-});
+const ProgramPendidikanAnakTextEditor = dynamic(
+  () =>
+    import('../../_lib/programPendidikanAnakTextEditor').then(
+      (mod) => mod.ProgramPendidikanAnakTextEditor
+    ),
+  { ssr: false }
+);
 
 function EditTujuanProgram() {
-  const router = useRouter()
-  const editState = useProxy(stateProgramPendidikanAnak.programUnggulanState)
+  const router = useRouter();
+  const editState = useProxy(stateProgramPendidikanAnak.programUnggulanState);
+
   const [judul, setJudul] = useState('');
   const [content, setContent] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // load data once
   useShallowEffect(() => {
     if (!editState.findById.data) {
-      editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+      editState.findById.initialize();
     }
   }, []);
 
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '')
-      setContent(editState.findById.data.deskripsi ?? '')
+      setJudul(editState.findById.data.judul ?? '');
+      setContent(editState.findById.data.deskripsi ?? '');
     }
-  }, [editState.findById.data])
+  }, [editState.findById.data]);
 
-  const submit = () => {
-    if (editState.findById.data) {
-      editState.findById.data.judul = judul;
-      editState.findById.data.deskripsi = content;
-      editState.update.save(editState.findById.data)
+  const handleSubmit = async () => {
+    if (!judul.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
     }
-    router.push('/admin/pendidikan/program-pendidikan-anak/program-unggulan')
+
+    setIsSubmitting(true);
+    try {
+      if (editState.findById.data) {
+        editState.findById.data.judul = judul;
+        editState.findById.data.deskripsi = content;
+        await editState.update.save(editState.findById.data);
+
+        toast.success('Berhasil menyimpan perubahan');
+        router.push('/admin/pendidikan/program-pendidikan-anak/program-unggulan');
+      }
+    } catch (err) {
+      console.error('Error saving:', err);
+      toast.error('Gagal menyimpan data');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleBack = () => router.back();
+
+  // loading state
+  if (editState.findById.loading) {
+    return (
+      <Box>
+        <Center h={400}>
+          <Text>Memuat data program unggulan...</Text>
+        </Center>
+      </Box>
+    );
   }
+
   return (
     <Box>
-      <Stack gap={'xs'}>
-        <Box>
-          <Button
-            variant={'subtle'}
-            onClick={() => router.back()}
-          >
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
-            <Stack gap={'xs'}>
-              <Title order={3}>Edit Program Unggulan</Title>
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
-                value={judul}
-                onChange={(e) => setJudul(e.target.value)}
-              />
-              <Text fw={"bold"}>Deskripsi</Text>
+      <Stack gap="xs">
+        <Group mb="md">
+          <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+            <Button
+              variant="subtle"
+              onClick={handleBack}
+              p="xs"
+              radius="md"
+            >
+              <IconArrowBack color={colors['blue-button']} size={24} />
+            </Button>
+          </Tooltip>
+          <Title order={4} ml="sm" c="dark">
+            Edit Program Unggulan
+          </Title>
+        </Group>
+
+        <Paper
+          w={{ base: '100%', md: '50%' }}
+          bg={colors['white-1']}
+          p="md"
+          radius="md"
+          shadow="sm"
+          style={{ border: '1px solid #e0e0e0' }}
+        >
+          <Stack gap="xs">
+            <Title order={3}>Edit Tujuan Program</Title>
+
+            {/* Judul Field */}
+            <TextInput
+              label={<Text fw="bold">Judul</Text>}
+              placeholder="Masukkan judul program"
+              value={judul}
+              onChange={(e) => setJudul(e.currentTarget.value)}
+              error={!judul && 'Judul wajib diisi'}
+            />
+
+            {/* Deskripsi Field */}
+            <Box>
+              <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
               <ProgramPendidikanAnakTextEditor
                 showSubmit={false}
                 onChange={setContent}
                 initialContent={content}
               />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={submit}
-                  loading={editState.update.loading}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
+            </Box>
+
+            {/* Submit & Cancel */}
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                onClick={handleSubmit}
+                loading={isSubmitting || editState.update.loading}
+                disabled={!judul}
+              >
+                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
+              </Button>
+
+              <Button
+                variant="outline"
+                onClick={handleBack}
+                disabled={isSubmitting || editState.update.loading}
+              >
+                Batal
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
       </Stack>
     </Box>
   );

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -8,47 +8,86 @@ import { useProxy } from 'valtio/utils';
 import stateProgramPendidikanAnak from '../../../_state/pendidikan/program-pendidikan-anak';
 
 function Page() {
-  const router = useRouter()
-  const listPreview = useProxy(stateProgramPendidikanAnak.programUnggulanState)
+  const router = useRouter();
+  const listPreview = useProxy(stateProgramPendidikanAnak.programUnggulanState);
+
   useShallowEffect(() => {
-    listPreview.findById.load('edit')
-  }, [])
+    listPreview.findById.load('edit');
+  }, []);
 
   if (!listPreview.findById.data) {
     return (
-      <Stack>
-        <Skeleton radius={10} h={800} />
+      <Stack align="center" justify="center" py="xl">
+        <Skeleton radius="md" height={400} w="90%" />
       </Stack>
-    )
+    );
   }
+
+  const data = listPreview.findById.data;
+
   return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"22"}>
-        <Grid>
+    <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
+      <Stack gap="md">
+        {/* Header */}
+        <Grid align="center">
           <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={2}>Preview Program Unggulan</Title>
+            <Title order={3} c={colors['blue-button']}>
+              Pratinjau Program Unggulan
+            </Title>
           </GridCol>
           <GridCol span={{ base: 12, md: 1 }}>
-            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/program-pendidikan-anak/program-unggulan/edit')}>
-              <IconEdit size={16} />
-            </Button>
+            <Tooltip label="Edit Program" withArrow>
+              <Button
+                c="green"
+                variant="light"
+                leftSection={<IconEdit size={18} stroke={2} />}
+                radius="md"
+                onClick={() =>
+                  router.push(
+                    '/admin/pendidikan/program-pendidikan-anak/program-unggulan/edit'
+                  )
+                }
+              >
+                Edit
+              </Button>
+            </Tooltip>
           </GridCol>
         </Grid>
-        <Box>
-          <Stack gap={'lg'}>
-            <Paper p={"xl"} bg={colors['BG-trans']}>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
-              </Box>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
-              </Box>
-            </Paper>
-          </Stack>
-        </Box>
+
+        {/* Konten Preview */}
+        <Paper
+          p="xl"
+          bg={colors['white-1']}
+          withBorder
+          radius="md"
+          shadow="xs"
+        >
+          <Box px={{ base: 'sm', md: 50 }}>
+            <Stack gap="lg">
+              {/* Judul */}
+              <Text
+                ta="center"
+                fz={{ base: '1.3rem', md: '1.8rem' }}
+                fw="bold"
+                c={colors['blue-button']}
+                dangerouslySetInnerHTML={{ __html: data.judul }}
+              />
+              <Divider my="md" color={colors['blue-button']} />
+
+              {/* Deskripsi */}
+              <Text
+                fz={{ base: '1rem', md: '1.2rem' }}
+                lh={1.7}
+                ta="justify"
+                c="dimmed"
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+              />
+            </Stack>
+          </Box>
+        </Paper>
       </Stack>
     </Paper>
-  )
+  );
 }
 
 export default Page;

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/edit/page.tsx

@@ -1,83 +1,151 @@
 'use client'
 import stateProgramPendidikanAnak from '@/app/admin/(dashboard)/_state/pendidikan/program-pendidikan-anak';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import { toast } from 'react-toastify';
 
-const ProgramPendidikanAnakTextEditor = dynamic(() => import('../../_lib/programPendidikanAnakTextEditor').then(mod => mod.ProgramPendidikanAnakTextEditor), {
-  ssr: false,
-});
+const ProgramPendidikanAnakTextEditor = dynamic(
+  () => import('../../_lib/programPendidikanAnakTextEditor').then(mod => mod.ProgramPendidikanAnakTextEditor),
+  { ssr: false }
+);
 
 function EditTujuanProgram() {
-  const router = useRouter()
-  const editState = useProxy(stateProgramPendidikanAnak.stateTujuanProgram)
+  const router = useRouter();
+  const editState = useProxy(stateProgramPendidikanAnak.stateTujuanProgram);
+
   const [judul, setJudul] = useState('');
   const [content, setContent] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Load data pertama kali
   useShallowEffect(() => {
     if (!editState.findById.data) {
-      editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+      editState.findById.initialize();
     }
   }, []);
 
+  // Sync state dengan data hasil fetch
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '')
-      setContent(editState.findById.data.deskripsi ?? '')
+      setJudul(editState.findById.data.judul ?? '');
+      setContent(editState.findById.data.deskripsi ?? '');
     }
-  }, [editState.findById.data])
+  }, [editState.findById.data]);
 
-  const submit = () => {
-    if (editState.findById.data) {
-      editState.findById.data.judul = judul;
-      editState.findById.data.deskripsi = content;
-      editState.update.save(editState.findById.data)
+  const handleSubmit = async () => {
+    if (!judul.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
     }
-    router.push('/admin/pendidikan/program-pendidikan-anak/tujuan-program')
+
+    setIsSubmitting(true);
+    try {
+      if (editState.findById.data) {
+        editState.findById.data.judul = judul;
+        editState.findById.data.deskripsi = content;
+        await editState.update.save(editState.findById.data);
+
+        toast.success('Berhasil menyimpan perubahan');
+        router.push('/admin/pendidikan/program-pendidikan-anak/tujuan-program');
+      }
+    } catch (err) {
+      console.error('Error saving:', err);
+      toast.error('Gagal menyimpan data');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleBack = () => router.back();
+
+  if (editState.findById.loading) {
+    return (
+      <Box>
+        <Center h={400}>
+          <Text>Memuat data tujuan program...</Text>
+        </Center>
+      </Box>
+    );
   }
+
   return (
     <Box>
-      <Stack gap={'xs'}>
-        <Box>
-          <Button
-            variant={'subtle'}
-            onClick={() => router.back()}
-          >
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
-            <Stack gap={'xs'}>
-              <Title order={3}>Edit Tujuan Program</Title>
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
-                value={judul}
-                onChange={(e) => setJudul(e.target.value)}
-              />
-              <Text fw={"bold"}>Deskripsi</Text>
+      <Stack gap="xs">
+        {/* Back Button + Title */}
+        <Group mb="md">
+          <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+            <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
+              <IconArrowBack color={colors['blue-button']} size={22} />
+            </Button>
+          </Tooltip>
+          <Title order={4} ml="sm" c="dark">
+            Edit Tujuan Program
+          </Title>
+        </Group>
+
+        <Paper
+          w={{ base: '100%', md: '50%' }}
+          bg={colors['white-1']}
+          p="md"
+          radius="md"
+          shadow="sm"
+          style={{ border: '1px solid #e0e0e0' }}
+        >
+          <Stack gap="xs">
+            <TextInput
+              label={<Text fz="sm" fw="bold">Judul</Text>}
+              placeholder="Masukkan judul program"
+              value={judul}
+              onChange={(e) => setJudul(e.currentTarget.value)}
+              error={!judul && 'Judul wajib diisi'}
+            />
+
+            <Box>
+              <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
               <ProgramPendidikanAnakTextEditor
                 showSubmit={false}
                 onChange={setContent}
                 initialContent={content}
               />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={submit}
-                  loading={editState.update.loading}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
+            </Box>
+
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                onClick={handleSubmit}
+                loading={isSubmitting || editState.update.loading}
+                disabled={!judul}
+              >
+                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
+              </Button>
+
+              <Button
+                variant="outline"
+                onClick={handleBack}
+                disabled={isSubmitting || editState.update.loading}
+              >
+                Batal
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
       </Stack>
     </Box>
   );

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -8,47 +8,86 @@ import { useProxy } from 'valtio/utils';
 import stateProgramPendidikanAnak from '../../../_state/pendidikan/program-pendidikan-anak';
 
 function Page() {
-  const router = useRouter()
-  const listPreview = useProxy(stateProgramPendidikanAnak.stateTujuanProgram)
+  const router = useRouter();
+  const listPreview = useProxy(stateProgramPendidikanAnak.stateTujuanProgram);
+
   useShallowEffect(() => {
-    listPreview.findById.load('edit')
-  }, [])
+    listPreview.findById.load('edit');
+  }, []);
 
   if (!listPreview.findById.data) {
     return (
-      <Stack>
-        <Skeleton radius={10} h={800} />
+      <Stack align="center" justify="center" py="xl">
+        <Skeleton radius="md" height={400} w="90%" />
       </Stack>
-    )
+    );
   }
+
+  const data = listPreview.findById.data;
+
   return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"22"}>
-        <Grid>
+    <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
+      <Stack gap="md">
+        {/* Header */}
+        <Grid align="center">
           <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={2}>Preview Tujuan Program</Title>
+            <Title order={3} c={colors['blue-button']}>
+              Pratinjau Tujuan Program
+            </Title>
           </GridCol>
           <GridCol span={{ base: 12, md: 1 }}>
-            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/program-pendidikan-anak/tujuan-program/edit')}>
-              <IconEdit size={16} />
-            </Button>
+            <Tooltip label="Edit Tujuan Program" withArrow>
+              <Button
+                c="green"
+                variant="light"
+                leftSection={<IconEdit size={18} stroke={2} />}
+                radius="md"
+                onClick={() =>
+                  router.push(
+                    '/admin/pendidikan/program-pendidikan-anak/tujuan-program/edit'
+                  )
+                }
+              >
+                Edit
+              </Button>
+            </Tooltip>
           </GridCol>
         </Grid>
-        <Box>
-          <Stack gap={'lg'}>
-            <Paper p={"xl"} bg={colors['BG-trans']}>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
-              </Box>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
-              </Box>
-            </Paper>
-          </Stack>
-        </Box>
+
+        {/* Konten Preview */}
+        <Paper
+          p="xl"
+          bg={colors['white-1']}
+          withBorder
+          radius="md"
+          shadow="xs"
+        >
+          <Box px={{ base: 'sm', md: 50 }}>
+            <Stack gap="lg">
+              {/* Judul */}
+              <Text
+                ta="center"
+                fz={{ base: '1.3rem', md: '1.8rem' }}
+                fw="bold"
+                c={colors['blue-button']}
+                dangerouslySetInnerHTML={{ __html: data.judul }}
+              />
+              <Divider my="md" color={colors['blue-button']} />
+
+              {/* Deskripsi */}
+              <Text
+                fz={{ base: '1rem', md: '1.2rem' }}
+                lh={1.7}
+                ta="justify"
+                c="dimmed"
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+              />
+            </Stack>
+          </Box>
+        </Paper>
       </Stack>
     </Paper>
-  )
+  );
 }
 
 export default Page;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/_lib/layoutTabs.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client';
+import colors from '@/con/colors';
 import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { IconChartBar, IconUsers } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
@@ -49,7 +50,7 @@ function LayoutTabsIKM({ children }: { children: React.ReactNode }) {
             </Title>
             <Tabs
                 radius="xl"
-                color="blue"
+                color={colors['blue-button']}
                 variant="pills"
                 value={activeTab}
                 onChange={handleTabChange}

src/app/admin/(dashboard)/ppid/struktur-ppid/_lib/layoutTabs.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+import colors from '@/con/colors';
 import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { IconBuildingCommunity, IconHierarchy2, IconUsers } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
@@ -57,7 +58,8 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         Struktur PPID
       </Title>
       <Tabs
-        variant="pills"
+        color={colors['blue-button']}
+        variant='pills'
         value={activeTab}
         onChange={handleTabChange}
         radius="lg"

src/app/admin/(dashboard)/user&role/layout.tsx

@@ -0,0 +1,103 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { IconForms, IconUser } from '@tabler/icons-react';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabs({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const tabs = [
+    {
+      label: "User",
+      value: "user",
+      href: "/admin/user&role/user",
+      icon: <IconUser size={18} stroke={1.8} />,
+      tooltip: "Lihat dan kelola user",
+    },
+    {
+      label: "Role",
+      value: "role",
+      href: "/admin/user&role/role",
+      icon: <IconForms size={18} stroke={1.8} />,
+      tooltip: "Kelola data role",
+    },
+  ];
+
+  const currentTab = tabs.find(tab => tab.href === pathname);
+  const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
+
+  const handleTabChange = (value: string | null) => {
+    const tab = tabs.find(t => t.value === value);
+    if (tab) {
+      router.push(tab.href);
+    }
+    setActiveTab(value);
+  };
+
+  useEffect(() => {
+    const match = tabs.find(tab => tab.href === pathname);
+    if (match) {
+      setActiveTab(match.value);
+    }
+  }, [pathname]);
+
+  return (
+    <Stack gap="lg">
+      <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
+        User & Role
+      </Title>
+      <Tabs
+        variant="pills"
+        value={activeTab}
+        onChange={handleTabChange}
+        radius="lg"
+        keepMounted={false}
+      >
+        <TabsList
+          p="sm"
+          style={{
+            background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+            borderRadius: "1rem",
+            boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+          }}
+        >
+          {tabs.map((tab, i) => (
+            <Tooltip key={i} label={tab.tooltip} position="bottom" withArrow transitionProps={{ transition: 'pop', duration: 200 }}>
+              <TabsTab
+                value={tab.value}
+                leftSection={tab.icon}
+                style={{
+                  fontWeight: 600,
+                  fontSize: "0.9rem",
+                  transition: "all 0.2s ease",
+                }}
+              >
+                {tab.label}
+              </TabsTab>
+            </Tooltip>
+          ))}
+        </TabsList>
+
+        {tabs.map((tab, i) => (
+          <TabsPanel
+            key={i}
+            value={tab.value}
+            style={{
+              padding: "1.5rem",
+              background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+              borderRadius: "1rem",
+              boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+            }}
+          >
+            {children}
+          </TabsPanel>
+        ))}
+      </Tabs>
+    </Stack>
+  );
+}
+
+export default LayoutTabs;

src/app/admin/(dashboard)/user&role/role/[id]/page.tsx

@@ -0,0 +1,127 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, MultiSelect, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import user from '../../../_state/user/user-state';
+
+function EditRole() {
+  const stateRole = useProxy(user.roleState)
+  const router = useRouter();
+  const params = useParams();
+
+  const [formData, setFormData] = useState({
+    name: stateRole.update.form.name || "",
+    permissions: stateRole.update.form.permissions || [],
+  })
+
+  useEffect(() => {
+    stateRole.findMany.load();
+    const loadRole = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await stateRole.update.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || "",
+            permissions: data.permissions || [],
+          });
+        }
+      } catch (error) {
+        console.error("Error loading role:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal mengambil data role"
+        );
+      }
+    }
+
+    loadRole();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      stateRole.update.form = {
+        ...stateRole.update.form,
+        name: formData.name,
+        permissions: formData.permissions,
+      }
+      await stateRole.update.update();
+      toast.success("Role berhasil diperbarui!");
+      router.push("/admin/user&role/role");
+    } catch (error) {
+      console.error("Error updating role:", error);
+      toast.error("Terjadi kesalahan saat memperbarui role");
+    }
+  };
+
+  return (
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Role
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p={'md'}
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Role</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Role</Text>}
+            placeholder='Masukkan nama role'
+          />
+          <MultiSelect
+            value={formData.permissions}
+            onChange={(val) => setFormData({ ...formData, permissions: val })}
+            label={<Text fw={"bold"} fz={"sm"}>Permission</Text>}
+            placeholder='Pilih permission'
+            data={
+              stateRole.findMany.data?.map((v) => ({
+                value: v.id,  // Make sure this is using the ID
+                label: v.name
+              })) || []
+            }
+            clearable
+            searchable
+            required
+            error={!formData.permissions.length ? "Pilih minimal satu permission" : undefined}
+          />
+
+          <Group justify="right">
+            <Button 
+            radius="md"
+            size="md"
+            onClick={handleSubmit}
+            style={{
+              background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+              color: '#fff',
+              boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+            }}
+            >Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditRole;

src/app/admin/(dashboard)/user&role/role/create/page.tsx

@@ -0,0 +1,115 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client';
+import colors from '@/con/colors';
+import {
+  Box,
+  Button,
+  Group,
+  MultiSelect,
+  Paper,
+  Stack,
+  TextInput,
+  Title,
+  Tooltip
+} from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+import user from '../../../_state/user/user-state';
+
+
+export default function CreateRole() {
+  const router = useRouter();
+  const stateRole = useProxy(user.roleState);
+  useEffect(() => {
+    stateRole.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateRole.create.form = {
+      name: '',
+      permissions: [] ,
+    };
+  };
+
+  const handleSubmit = async () => {
+    await stateRole.create.create();
+
+    resetForm();
+    router.push('/admin/user&role/role');
+  };
+
+  return (
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Role
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <Box>
+            <TextInput
+              label="Nama Role"
+              placeholder="Masukkan nama role"
+              value={stateRole.create.form.name || ''}
+              onChange={(e) => (stateRole.create.form.name = e.target.value)}
+              required
+            />
+          </Box>
+          <Box>
+            <MultiSelect
+              label="Permission"
+              placeholder="Pilih permission"
+              data={
+                Array.from(
+                  new Set(
+                    stateRole.findMany.data
+                      ?.map((item) => item.permissions)
+                      .flat()
+                  )
+                )
+                .filter((p): p is string => typeof p === 'string')
+                .map((p) => ({ label: p, value: p }))
+              }
+              value={stateRole.create.form.permissions}
+              onChange={(value) => (stateRole.create.form.permissions = value)}
+              required
+            />
+
+
+          </Box>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}

src/app/admin/(dashboard)/user&role/role/page.tsx

@@ -0,0 +1,124 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title, Tooltip } from '@mantine/core';
+import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../_com/header';
+import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
+import user from '../../_state/user/user-state';
+
+
+
+
+function Role() {
+  const [search, setSearch] = useState('');
+  return (
+    <Box>
+      <HeaderSearch
+        title='Role'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListRole search={search} />
+    </Box>
+  );
+}
+
+function ListRole({ search }: { search: string }) {
+  const listDataState = useProxy(user.roleState)
+  const router = useRouter();
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  useEffect(() => {
+    listDataState.findMany.load()
+  }, [])
+
+  const handleDelete = () => {
+    if (selectedId) {
+      listDataState.delete.delete(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+
+      listDataState.findMany.load()
+    }
+  }
+
+  const filteredData = (listDataState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!listDataState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+  return (
+    <Box py={10}>
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Role</Title>
+          <Tooltip label="Tambah Role" withArrow>
+            <Button leftSection={<IconPlus size={18} />} color="blue" variant="light" onClick={() => router.push('/admin/user&role/role/create')}>
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+          <Box style={{ overflowX: 'auto' }}>
+            <Table striped withRowBorders style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Role</TableTh>
+                  <TableTh>Edit</TableTh>
+                  <TableTh>Hapus</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{item.name}</TableTd>
+                    <TableTd>
+                      <Button color='green' onClick={() => router.push(`/admin/user&role/role/${item.id}`)}>
+                        <IconEdit size={20} />
+                      </Button>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        color='red'
+                        disabled={listDataState.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id)
+                          setModalHapus(true)
+                        }}>
+                        <IconTrash size={20} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus kategori Berita ini?'
+      />
+    </Box>
+  )
+}
+
+export default Role;

src/app/admin/(dashboard)/user&role/user/page.tsx

@@ -0,0 +1,154 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconSearch, IconTrash } from '@tabler/icons-react';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../_com/header';
+import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
+import user from '../../_state/user/user-state';
+
+
+function User() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='User'
+        placeholder='Cari nama user...'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListUser search={search} />
+    </Box>
+  );
+}
+
+function ListUser({ search }: { search: string }) {
+  const stateUser = useProxy(user.userState)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateUser.findMany;
+
+  const handleDelete = () => {
+    if (selectedId) {
+      stateUser.delete.submit(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+
+      stateUser.findMany.load()
+    }
+  }
+
+
+  useShallowEffect(() => {
+    load(page, 10, search)
+  }, [page, search])
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
+    );
+  }
+
+  return (
+    <Box py={10}>
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar User</Title>
+        </Group>
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '25%' }}>Nama User</TableTh>
+                <TableTh style={{ width: '20%' }}>Email</TableTh>
+                <TableTh style={{ width: '20%' }}>Role</TableTh>
+                <TableTh style={{ width: '15%' }}>Hapus</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd style={{ width: '25%', }}>
+                      <Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
+                    </TableTd>
+                    <TableTd style={{ width: '20%', }}>
+                      <Text truncate fz="sm" c="dimmed">
+                        {item.email}
+                      </Text>
+                    </TableTd>
+                    <TableTd style={{ width: '20%', }}>
+                      <Text truncate fz="sm" c="dimmed">
+                        {item.role.name}
+                      </Text>
+                    </TableTd>
+                    <TableTd style={{ width: '15%' }}>
+                      <Tooltip label="Hapus user" withArrow>
+                        <Button
+                          variant="light"
+                          color="red"
+                          onClick={() => {
+                            setSelectedId(item.id)
+                            setModalHapus(true)
+                          }}
+                        >
+                          <IconTrash size={20} />
+                        </Button>
+                      </Tooltip>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada data user yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
+      </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+          color="blue"
+          radius="md"
+        />
+      </Center>
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus user ini?'
+      />
+    </Box>
+  );
+}
+
+export default User;

src/app/admin/_com/list_PageAdmin.tsx

@@ -377,5 +377,22 @@ export const navBar = [
         path: "/admin/pendidikan/data-pendidikan"
       }
     ]
-  }
+  },
+  {
+    id: "User & Role",
+    name: "User & Role",
+    path: "",
+    children: [
+      {
+        id: "User",
+        name: "User",
+        path: "/admin/user&role/user"
+      },
+      {
+        id: "Role",
+        name: "Role",
+        path: "/admin/user&role/role"
+      },
+    ]
+  },
 ]

src/app/api/[[...slugs]]/_lib/pendidikan/info-sekolah-paud/lembaga/findMany.ts

@@ -10,9 +10,6 @@ async function lembagaPendidikanFindMany(context: Context) {
     const search = (context.query.search as string) || "";
     const skip = (page - 1) * limit;
     const jenjangPendidikanName = (context.query.jenjangPendidikanId as string) || "";
-
-    console.log('Lembaga API Query Params:', { page, limit, search, jenjangPendidikanName });
-
     // Buat where clause
     const where: any = { isActive: true };
 

src/app/api/[[...slugs]]/_lib/pendidikan/info-sekolah-paud/pengajar/findMany.ts

@@ -10,8 +10,6 @@ async function pengajarFindMany(context: Context) {
     const search = (context.query.search as string) || "";
     const jenjangPendidikanName = (context.query.jenjangPendidikanId as string) || "";
 
-    console.log('Pengajar API Query Params:', { page, limit, search, jenjangPendidikanId: jenjangPendidikanName });
-
     const where: any = { isActive: true };
 
     // Filter berdasarkan jenjang pendidikan (jika ada)

src/app/api/[[...slugs]]/_lib/pendidikan/info-sekolah-paud/siswa/findMany.ts

@@ -10,8 +10,6 @@ async function siswaFindMany(context: Context) {
     const search = (context.query.search as string) || "";
     const jenjangPendidikanName = (context.query.jenjangPendidikanName as string) || "";
 
-    console.log('Siswa API Query Params:', { page, limit, search, jenjangPendidikanId: jenjangPendidikanName });
-
     // Buat where clause
     const where: any = { isActive: true };
 

src/app/api/[[...slugs]]/_lib/pendidikan/perpustakaan-digital/kategori-buku/findMany.ts

@@ -1,11 +1,53 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function kategoriBukuFindMany() {
-  const data = await prisma.kategoriBuku.findMany();
+async function kategoriBukuFindMany(context: Context) {
+  // Ambil parameter dari query
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const skip = (page - 1) * limit;
 
-  return {
-    success: true,
-    message: "Success get all kategori buku",
-    data,
-  };
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { name: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.kategoriBuku.findMany({
+        where,
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.kategoriBuku.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil kategori buku dengan pagination",
+      data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
+    };
+  } catch (e) {
+    console.error("Error di findMany paginated:", e);
+    return {
+      success: false,
+      message: "Gagal mengambil data kategori buku",
+    };
+  }
 }
+
+export default kategoriBukuFindMany;

src/app/api/[[...slugs]]/_lib/user/create.ts

@@ -1,51 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-import bcrypt from "bcryptjs";
-
-type FormCreateUser = {
-  nama: string;
-  email: string;
-  password: string;
-  roleId: string;
-  isActive?: boolean;
-};
-
-export default async function userCreate(context: Context) {
-  const body = (await context.body) as FormCreateUser;
-
-  if (!body.nama || !body.email || !body.password || !body.roleId) {
-    throw new Error("Semua field wajib diisi");
-  }
-
-  try {
-    // Cek apakah email sudah terdaftar
-    const existing = await prisma.user.findUnique({
-      where: { email: body.email },
-    });
-    if (existing) {
-      throw new Error("Email sudah terdaftar");
-    }
-
-    // Hash password sebelum simpan
-    const hashedPassword = await bcrypt.hash(body.password, 10);
-
-    const result = await prisma.user.create({
-      data: {
-        nama: body.nama,
-        email: body.email,
-        password: hashedPassword,
-        roleId: body.roleId,
-        isActive: body.isActive ?? true,
-      },
-    });
-
-    return {
-      success: true,
-      message: "User berhasil dibuat",
-      data: result,
-    };
-  } catch (error) {
-    console.error("Error creating user:", error);
-    throw new Error("Gagal membuat user: " + (error as Error).message);
-  }
-}

src/app/api/[[...slugs]]/_lib/user/findMany.ts

@@ -1,28 +1,52 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function userFindMany(context: Context) {
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const skip = (page - 1) * limit;
+
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { nama: { contains: search, mode: 'insensitive' } },
+    ];
+  }
 
-export default async function userFindMany() {
   try {
-    const data = await prisma.user.findMany({
+    const [data, total] = await Promise.all([
+      prisma.user.findMany({
       include: {
         role: true,
       },
       orderBy: {
         createdAt: "desc",
       },
-    });
+      skip,
+      take: limit,
+    }),
+      prisma.user.count({ where }),
+    ]);
 
     return {
       success: true,
-      message: "Success get all user",
+      message: "Berhasil ambil user dengan pagination",
       data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
     };
-  } catch (error) {
-    console.error("Find many error:", error);
+  } catch (e) {
+    console.error("Error di findMany paginated:", e);
     return {
       success: false,
-      message:
-        "Gagal mengambil data: " +
-        (error instanceof Error ? error.message : "Unknown error"),
+      message: "Gagal mengambil data user",
     };
   }
 }

src/app/api/[[...slugs]]/_lib/user/index.ts

@@ -1,53 +1,13 @@
 import { Elysia, t } from "elysia";
 
 // Import semua handler
-import userCreate from "./create";
 import userFindMany from "./findMany";
 import userFindUnique from "./findUnique";
-import userUpdate from "./updt";
 import userDelete from "./del"; // `delete` nggak boleh jadi nama file JS langsung, jadi biasanya `del.ts`
-import userLogin from "./login";
-import userRegister from "./register";
 
 const User = new Elysia({ prefix: "/api/user" })
-  .post("/register", userRegister, {
-    body: t.Object({
-      nama: t.String(),
-      email: t.String(),
-      password: t.String(),
-    }),
-  })
-  .post("/login", userLogin, {
-    body: t.Object({
-      email: t.String(),
-      password: t.String(),
-    }),
-  })
-  .post("/create", userCreate, {
-    body: t.Object({
-      nama: t.String(),
-      email: t.String(),
-      password: t.String(),
-      roleId: t.String(),
-    }),
-  })
   .get("/findMany", userFindMany)
   .get("/findUnique/:id", userFindUnique)
-  .put(
-    "/update/:id",
-    async (context) => {
-      const response = await userUpdate(context);
-      return response;
-    },
-    {
-      body: t.Object({
-        nama: t.String(),
-        email: t.String(),
-        password: t.String(),
-        roleId: t.String(),
-      }),
-    }
-  )
   .put("/del/:id", userDelete, {
     params: t.Object({
       id: t.String(),

src/app/api/[[...slugs]]/_lib/user/role/create.ts

@@ -3,6 +3,7 @@ import { Context } from "elysia";
 
 type FormCreate = {
     name: string;
+    permissions: string[];  
 }
 
 export default async function roleCreate(context: Context) {
@@ -12,6 +13,7 @@ export default async function roleCreate(context: Context) {
         const result = await prisma.role.create({
             data: {
                 name: body.name,
+                permissions: body.permissions,
             },
         });
         return {

src/app/api/[[...slugs]]/_lib/user/role/index.ts

@@ -13,6 +13,7 @@ const Role = new Elysia({
  .post("/create", roleCreate, {
     body: t.Object({
       name: t.String(),
+      permissions: t.Array(t.String()),
     }),
   })
 
@@ -26,6 +27,7 @@ const Role = new Elysia({
   .put("/:id", roleUpdate, {
     body: t.Object({
       name: t.String(),
+      permissions: t.Array(t.String()),
     }),
   })
   .delete("/del/:id", roleDelete);

src/app/api/[[...slugs]]/_lib/user/role/updt.ts

@@ -3,6 +3,7 @@ import { Context } from "elysia";
 
 type FormUpdate = {
     name: string;
+    permissions: string[];
 }
 
 export default async function roleUpdate(context: Context) {
@@ -14,6 +15,7 @@ export default async function roleUpdate(context: Context) {
             where: { id },
             data: {
                 name: body.name,
+                permissions: body.permissions,
             },
         });
         return {

src/app/api/[[...slugs]]/_lib/user/updt.ts

@@ -1,35 +0,0 @@
-// /api/user/update.ts
-import prisma from '@/lib/prisma';
-import { Context } from 'elysia';
-
-export default async function userUpdate(context: Context) {
-  const { id } = context.params as { id: string };
-  const body = await context.body as {
-    nama?: string;
-    email?: string;
-    password?: string;
-    roleId?: string;
-    isActive?: boolean;
-  };
-
-  try {
-    const updated = await prisma.user.update({
-      where: { id },
-      data: {
-        ...body,
-      },
-    });
-
-    return {
-      success: true,
-      message: 'User berhasil diupdate',
-      data: updated,
-    };
-  } catch (error) {
-    console.error(error);
-    return {
-      success: false,
-      message: 'Gagal mengupdate user',
-    };
-  }
-}

src/app/login/page.tsx

@@ -4,17 +4,14 @@ import { Box, Button, Center, Flex, Group, Image, Paper, Stack, Text, TextInput,
 import { IconUserFilled } from '@tabler/icons-react';
 import Link from 'next/link';
 import BackButton from '../darmasaba/(pages)/desa/layanan/_com/BackButto';
-import { useSnapshot } from 'valtio';
-import userState from '../admin/(dashboard)/_state/user/user-state';
-import { useRouter } from 'next/navigation';
 
 function Page() {
-  const router = useRouter()
-  const snap = useSnapshot(userState.userState)
-  const handleSubmit = async () => {
-    router.push("/darmasaba/pendidikan/perpustakaan-digital")
-    await snap.login.submit()
-  }
+  // const router = useRouter()
+  // const snap = useSnapshot(userState.userState)
+  // const handleSubmit = async () => {
+  //   router.push("/darmasaba/pendidikan/perpustakaan-digital")
+  //   await snap.login.submit()
+  // }
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
@@ -47,23 +44,23 @@ function Page() {
                   type='email'
                   label='Email'
                   placeholder='Email'
-                  value={snap.login.form.email}
-                  onChange={(e) => {
-                    userState.userState.login.form.email = e.target.value
-                  }}
+                  // value={snap.login.form.email}
+                  // onChange={(e) => {
+                  //   userState.userState.login.form.email = e.target.value
+                  // }}
                   required
                 />
                 <TextInput py={20}
                   type='password'
                   label='Password'
                   placeholder='Password'
-                  value={snap.login.form.password}
-                  onChange={(e) => {
-                    userState.userState.login.form.password = e.target.value
-                  }}
+                  // value={snap.login.form.password}
+                  // onChange={(e) => {
+                  //   userState.userState.login.form.password = e.target.value
+                  // }}
                 />
                 <Box pb={20} >
-                  <Button onClick={handleSubmit} fullWidth bg={colors['blue-button']} radius={'xl'}>Masuk</Button>
+                  <Button fullWidth bg={colors['blue-button']} radius={'xl'}>Masuk</Button>
                 </Box>
                 <Flex justify={'center'} align={'center'}>
                   <Text>Belum punya akun? </Text>

src/app/registrasi/page.tsx

@@ -2,19 +2,16 @@
 import colors from '@/con/colors';
 import { Box, Button, Center, Checkbox, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import BackButton from '../darmasaba/(pages)/desa/layanan/_com/BackButto';
-import { useRouter } from 'next/navigation';
-import { useSnapshot } from 'valtio';
-import userState from '../admin/(dashboard)/_state/user/user-state';
 
 
 
 function Page() {
-  const router = useRouter()
-  const registrerState = useSnapshot(userState.userState)
-  const handleSubmit = async () => {
-    router.push("/login")
-    await registrerState.register.submit()
-  }
+  // const router = useRouter()
+  // const registrerState = useSnapshot(userState.userState)
+  // const handleSubmit = async () => {
+  //   router.push("/login")
+  //   await registrerState.register.submit()
+  // }
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
@@ -43,28 +40,28 @@ function Page() {
               <Box>
                 <TextInput placeholder='Nama Lengkap'
                   label='Nama Lengkap'
-                  value={registrerState.register.form.nama}
-                  onChange={(e) => {
-                    userState.userState.register.form.nama = e.target.value
-                  }}
+                  // value={registrerState.register.form.nama}
+                  // onChange={(e) => {
+                  //   userState.userState.register.form.nama = e.target.value
+                  // }}
                   required
 
                 />
                 <TextInput py={10} placeholder='Email'
                   label='Email'
-                  value={registrerState.register.form.email}
-                  onChange={(e) => {
-                    userState.userState.register.form.email = e.target.value
-                  }}
+                  // value={registrerState.register.form.email}
+                  // onChange={(e) => {
+                  //   userState.userState.register.form.email = e.target.value
+                  // }}
                   required
                 />
                 <TextInput pb={10} placeholder='Password'
                 type='password'
                   label='Password'
-                  value={registrerState.register.form.password}
-                  onChange={(e) => {
-                    userState.userState.register.form.password = e.target.value
-                  }}
+                  // value={registrerState.register.form.password}
+                  // onChange={(e) => {
+                  //   userState.userState.register.form.password = e.target.value
+                  // }}
                   required
                 />
                 <Box pb={10}>
@@ -73,7 +70,7 @@ function Page() {
                   />
                 </Box>
                 <Box pb={20} >
-                  <Button onClick={handleSubmit} fullWidth bg={colors['blue-button']} radius={'xl'}>Daftar</Button>
+                  <Button fullWidth bg={colors['blue-button']} radius={'xl'}>Daftar</Button>
                 </Box>
               </Box>
             </Stack>