- QC User & Admin Menu Pendidikan V

- Fix SubMenu :
- Beasiswa Desa ( Baca Selengkapnya terdapatkan konten ) V
- Info Sekolah ( Kategori Menyesuaikan Dengan Datanya ) V
- Perpustakaan Digital (  V
- Kategori Menyesuaikan Dengan Datanya V
- Saat Mau minjam muncul modal data diri peminjam buku V
- Ada Status Peminjamannya V
)

prisma/schema.prisma

@@ -324,8 +324,8 @@ model PegawaiPPID {
 model StrukturOrganisasiPPID {
   id                   String               @id @default(uuid())
   posisiOrganisasiId   String               @db.VarChar(50)
-  pegawaiId            String               
+  pegawaiId            String
-  hubunganOrganisasiId String               
+  hubunganOrganisasiId String
   posisiOrganisasi     PosisiOrganisasiPPID @relation(fields: [posisiOrganisasiId], references: [id])
   pegawai              PegawaiPPID          @relation(fields: [pegawaiId], references: [id])
   createdAt            DateTime             @default(now())
@@ -1450,8 +1450,8 @@ model PegawaiBumDes {
 model StrukturOrganisasiBumDes {
   id                   String                 @id @default(uuid())
   posisiOrganisasiId   String                 @db.VarChar(50)
-  pegawaiId            String                 
+  pegawaiId            String
-  hubunganOrganisasiId String                 
+  hubunganOrganisasiId String
   posisiOrganisasi     PosisiOrganisasiBumDes @relation(fields: [posisiOrganisasiId], references: [id])
   pegawai              PegawaiBumDes          @relation(fields: [pegawaiId], references: [id])
   createdAt            DateTime               @default(now())
@@ -1820,7 +1820,7 @@ model KategoriKegiatan {
   isActive     Boolean        @default(true)
   KegiatanDesa KegiatanDesa[]
 }
-  
+
 // ========================================= EDUKASI LINGKUNGAN ========================================= //
 model TujuanEdukasiLingkungan {
   id        String   @id @default(cuid())
@@ -2087,6 +2087,9 @@ model DataPerpustakaan {
   updatedAt  DateTime     @updatedAt
   deletedAt  DateTime     @default(now())
   isActive   Boolean      @default(true)
+
+  // relasi baru ke peminjaman
+  peminjamanBuku PeminjamanBuku[]
 }
 
 model KategoriBuku {
@@ -2099,6 +2102,31 @@ model KategoriBuku {
   DataPerpustakaan DataPerpustakaan[]
 }
 
+model PeminjamanBuku {
+  id             String           @id @default(cuid())
+  nama           String
+  noTelp         String
+  alamat         String
+  bukuId         String
+  tanggalPinjam  DateTime         @default(now())
+  batasKembali   DateTime // tenggat waktu pengembalian
+  tanggalKembali DateTime? // diisi saat dikembalikan
+  status         StatusPeminjaman @default(Dipinjam)
+  catatan        String? // opsional, misal: kondisi buku
+  buku           DataPerpustakaan @relation(fields: [bukuId], references: [id])
+  createdAt      DateTime         @default(now())
+  updatedAt      DateTime         @updatedAt
+  deletedAt      DateTime         @default(now())
+  isActive       Boolean          @default(true)
+}
+
+enum StatusPeminjaman {
+  Dipinjam
+  Dikembalikan
+  Terlambat
+  Dibatalkan
+}
+
 // ========================================= USER ========================================= //
 
 model User {

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

@@ -514,9 +514,312 @@ const kategoriBuku = proxy({
   },
 });
 
+const templatePeminjamanBuku = z.object({
+  nama: z.string().min(1, "Nama harus diisi"),
+  noTelp: z.string().min(1, "No Telp harus diisi"),
+  alamat: z.string().min(1, "Alamat harus diisi"),
+  bukuId: z.string().min(1, "Buku ID harus diisi"),
+  tanggalPinjam: z.string().min(1, "Tanggal Pinjam harus diisi"),
+  batasKembali: z.string().min(1, "Batas Kembali harus diisi"),
+  tanggalKembali: z.string().min(1, "Tanggal Kembali harus diisi"),
+  catatan: z.string().min(1, "Catatan harus diisi")
+});
+
+const defaultPeminjamanBuku = {
+  nama: "",
+  noTelp: "",
+  alamat: "",
+  bukuId: "",
+  tanggalPinjam: "",
+  batasKembali: "",
+  tanggalKembali: "",
+  catatan: ""
+};
+
+interface FormEditData {
+  nama: string;
+  noTelp: string;
+  alamat: string;
+  bukuId: string;
+  buku?: {
+    id: string;
+    judul: string;
+  };
+  tanggalPinjam: string;
+  batasKembali: string;
+  tanggalKembali: string;
+  catatan: string;
+  status: 'Dipinjam' | 'Dikembalikan' | 'Terlambat' | 'Dibatalkan';
+}
+
+const editForm: FormEditData = {
+  nama: "",
+  noTelp: "",
+  alamat: "",
+  bukuId: "",
+  tanggalPinjam: "",
+  batasKembali: "",
+  tanggalKembali: "",
+  catatan: "",
+  status: "Dipinjam"
+}
+
+const peminjamanBuku = proxy({
+  create: {
+    form: { ...defaultPeminjamanBuku },
+    loading: false,
+    async create() {
+      const cek = templatePeminjamanBuku.safeParse(peminjamanBuku.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        peminjamanBuku.create.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.perpustakaandigital.peminjamanbuku[
+            "create"
+          ].post(peminjamanBuku.create.form);
+        if (res.status === 200) {
+          peminjamanBuku.findMany.load();
+          return toast.success("Data Peminjaman Buku Berhasil Dibuat");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log(error);
+        return toast.error("failed create");
+      } finally {
+        peminjamanBuku.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: [] as Prisma.PeminjamanBukuGetPayload<{
+      include: {
+        buku: true;
+      };
+    }>[],
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      peminjamanBuku.findMany.loading = true; // ✅ Akses langsung via nama path
+      peminjamanBuku.findMany.page = page;
+      peminjamanBuku.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.pendidikan.perpustakaandigital.peminjamanbuku["findMany"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          peminjamanBuku.findMany.data = res.data.data ?? [];
+          peminjamanBuku.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          peminjamanBuku.findMany.data = [];
+          peminjamanBuku.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch data peminjaman buku paginated:", err);
+        peminjamanBuku.findMany.data = [];
+        peminjamanBuku.findMany.totalPages = 1;
+      } finally {
+        peminjamanBuku.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.PeminjamanBukuGetPayload<{
+      include: {
+        buku: true;
+      };
+    }> | null,
+    loading: false,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/pendidikan/perpustakaandigital/peminjamanbuku/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          peminjamanBuku.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          peminjamanBuku.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        peminjamanBuku.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async delete(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        peminjamanBuku.delete.loading = true;
+
+        const response = await fetch(
+          `/api/pendidikan/perpustakaandigital/peminjamanbuku/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Data Peminjaman Buku berhasil dihapus"
+          );
+          await peminjamanBuku.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus Data Peminjaman Buku");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus Data Peminjaman Buku");
+      } finally {
+        peminjamanBuku.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...editForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/pendidikan/perpustakaandigital/peminjamanbuku/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            nama: data.nama,
+            noTelp: data.noTelp,
+            alamat: data.alamat,
+            bukuId: data.bukuId,
+            tanggalPinjam: data.tanggalPinjam,
+            batasKembali: data.batasKembali,
+            tanggalKembali: data.tanggalKembali,
+            catatan: data.catatan,
+            status: data.status
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading peminjaman buku:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templatePeminjamanBuku.safeParse(peminjamanBuku.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        peminjamanBuku.update.loading = true;
+
+        const response = await fetch(
+          `/api/pendidikan/perpustakaandigital/peminjamanbuku/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              nama: this.form.nama,
+              noTelp: this.form.noTelp,
+              alamat: this.form.alamat,
+              bukuId: this.form.bukuId,
+              tanggalPinjam: this.form.tanggalPinjam,
+              batasKembali: this.form.batasKembali,
+              tanggalKembali: this.form.tanggalKembali,
+              catatan: this.form.catatan,
+              status: this.form.status
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update data peminjaman buku");
+          await peminjamanBuku.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update data peminjaman buku");
+        }
+      } catch (error) {
+        console.error("Error updating data peminjaman buku:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update data peminjaman buku"
+        );
+        return false;
+      } finally {
+        peminjamanBuku.update.loading = false;
+      }
+    },
+    reset() {
+      peminjamanBuku.update.id = "";
+      peminjamanBuku.update.form = { ...editForm };
+    },
+  },
+})
+
 const perpustakaanDigitalState = proxy({
   dataPerpustakaan,
   kategoriBuku,
+  peminjamanBuku,
 });
 
 export default perpustakaanDigitalState;

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

@@ -4,7 +4,7 @@ import colors from '@/con/colors';
 import { ScrollArea, 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';
+import { IconBook2, IconCategory, IconUser } from '@tabler/icons-react';
 
 function LayoutTabs({ children }: { children: React.ReactNode }) {
   const router = useRouter();
@@ -25,6 +25,13 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
       icon: <IconCategory size={18} stroke={1.8} />,
       tooltip: "Atur kategori untuk buku digital",
     },
+    {
+      label: "Peminjam",
+      value: "peminjam",
+      href: "/admin/pendidikan/perpustakaan-digital/peminjam",
+      icon: <IconUser size={18} stroke={1.8} />,
+      tooltip: "Data Peminjam Buku",
+    },
   ];
 
   const currentTab = tabs.find(tab => tab.href === pathname);

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

@@ -0,0 +1,245 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
+
+import colors from '@/con/colors';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
+import { DateInput } from '@mantine/dates';
+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';
+
+export type Status = "Dipinjam" | "Dikembalikan" | "Terlambat" | "Dibatalkan";
+
+function EditPeminjam() {
+  const stateEdit = useProxy(perpustakaanDigitalState.peminjamanBuku);
+  const router = useRouter();
+  const params = useParams();
+
+  const [formData, setFormData] = useState<{
+    nama: string;
+    noTelp: string;
+    alamat: string;
+    bukuId: string;
+    buku?: {
+      id: string;
+      judul: string;
+    };
+    tanggalPinjam: string;
+    batasKembali: string;
+    tanggalKembali: string;
+    status: Status;
+    catatan: string;
+  }>({
+    nama: '',
+    noTelp: '',
+    alamat: '',
+    bukuId: '',
+    tanggalPinjam: '',
+    batasKembali: '',
+    tanggalKembali: '',
+    status: 'Dipinjam', // Default status
+    catatan: '',
+  });
+
+  useEffect(() => {
+    const loadPeminjam = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await stateEdit.update.load(id);
+        if (data) {
+          setFormData((prev) => ({
+            ...prev,
+            nama: data.nama ?? prev.nama,
+            noTelp: data.noTelp ?? prev.noTelp,
+            alamat: data.alamat ?? prev.alamat,
+            bukuId: data.bukuId ?? prev.bukuId,
+            buku: data.buku ? {
+              id: data.buku.id,
+              judul: data.buku.judul
+            } : undefined,
+            tanggalPinjam: data.tanggalPinjam ?? prev.tanggalPinjam,
+            batasKembali: data.batasKembali ?? prev.batasKembali,
+            tanggalKembali: data.tanggalKembali ?? prev.tanggalKembali,
+            status: (data.status as Status) ?? prev.status,
+            catatan: data.catatan ?? prev.catatan,
+          }));
+        }
+      } catch (error) {
+        console.error("Error loading peminjam:", error);
+        toast.error("Gagal mengambil data peminjam");
+      }
+    };
+
+    loadPeminjam();
+  }, [params?.id]);
+
+
+  const handleChange = (field: string, value: string | Status) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleSubmit = async () => {
+    try {
+      stateEdit.update.form = {
+        ...stateEdit.update.form,
+        ...formData,
+      };
+
+      await stateEdit.update.update();
+      toast.success("Peminjam berhasil diperbarui!");
+      router.push("/admin/pendidikan/perpustakaan-digital/peminjam");
+    } catch (error) {
+      console.error("Error updating peminjam:", error);
+      toast.error("Terjadi kesalahan saat memperbarui peminjam");
+    }
+  };
+
+  return (
+    <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 Peminjam Buku
+        </Title>
+      </Group>
+
+      {/* Card */}
+      <Paper
+        w={{ base: '100%', md: '60%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            value={formData.nama}
+            onChange={(e) => handleChange('nama', e.target.value)}
+            label={<Text fw="bold" fz="sm">Nama Peminjam</Text>}
+            placeholder="Masukkan nama peminjam"
+            required
+          />
+
+          <TextInput
+            value={formData.noTelp}
+            onChange={(e) => handleChange('noTelp', e.target.value)}
+            label={<Text fw="bold" fz="sm">No Telp Peminjam</Text>}
+            placeholder="Masukkan no telp peminjam"
+            required
+          />
+
+          <TextInput
+            value={formData.alamat}
+            onChange={(e) => handleChange('alamat', e.target.value)}
+            label={<Text fw="bold" fz="sm">Alamat Peminjam</Text>}
+            placeholder="Masukkan alamat peminjam"
+            required
+          />
+
+          <TextInput
+            value={formData.buku?.judul || ''}
+            label={<Text fw="bold" fz="sm">Buku</Text>}
+            placeholder="Buku"
+            required
+            readOnly
+          />
+
+          <DateInput
+            value={formData.tanggalPinjam}
+            onChange={(date) => {
+              perpustakaanDigitalState.peminjamanBuku.update.form.tanggalPinjam =
+                date ? new Date(date).toISOString() : '';
+            }}
+            label={<Text fw="bold" fz="sm">Tanggal Pinjam</Text>}
+            placeholder="Masukkan tanggal pinjam"
+            required
+          />
+
+          <DateInput
+            value={formData.tanggalKembali}
+            onChange={(date) => {
+              perpustakaanDigitalState.peminjamanBuku.update.form.tanggalKembali =
+                date ? new Date(date).toISOString() : '';
+            }}
+            label={<Text fw="bold" fz="sm">Tanggal Kembali</Text>}
+            placeholder="Masukkan tanggal kembali"
+            required
+          />
+
+          <DateInput
+            value={formData.batasKembali}
+            onChange={(date) => {
+              perpustakaanDigitalState.peminjamanBuku.update.form.batasKembali =
+                date ? new Date(date).toISOString() : '';
+            }}
+            label={<Text fw="bold" fz="sm">Batas Kembali</Text>}
+            placeholder="Masukkan batas kembali"
+            required
+          />
+
+          <Select
+            value={formData.status}
+            onChange={(val) => handleChange('status', val as Status)}
+            label={<Text fw="bold" fz="sm">Status</Text>}
+            placeholder="Pilih status"
+            data={[
+              { value: "Dipinjam", label: "Dipinjam" },
+              { value: "Dikembalikan", label: "Dikembalikan" },
+              { value: "Terlambat", label: "Terlambat" },
+              { value: "Dibatalkan", label: "Dibatalkan" },
+            ]}
+            required
+          />
+
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>Catatan</Text>
+            <EditEditor
+              value={formData.catatan}
+              onChange={(htmlContent) => handleChange('catatan', htmlContent)}
+            />
+          </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>
+  );
+}
+
+export default EditPeminjam;

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

@@ -0,0 +1,237 @@
+'use client';
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
+import colors from '@/con/colors';
+import {
+  Badge,
+  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';
+
+
+function DetailDataPeminjaman() {
+  const stateDetail = useProxy(perpustakaanDigitalState.peminjamanBuku);
+  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);
+  }, []);
+
+  const data = stateDetail.findUnique.data;
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateDetail.delete.delete(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push('/admin/pendidikan/perpustakaan-digital/peminjam');
+    }
+  };
+
+  const renderStatusBadge = (status: string) => {
+      const normalized = status?.toUpperCase();
+  
+      switch (normalized) {
+        case 'DIPINJAM':
+          return <Badge color="blue" variant="light">Dipinjam</Badge>;
+        case 'DIKEMBALIKAN':
+          return <Badge color="green" variant="light">Dikembalikan</Badge>;
+        case 'TERLAMBAT':
+          return <Badge color="orange" variant="light">Terlambat</Badge>;
+        case 'DIBATALKAN':
+          return <Badge color="red" variant="light">Dibatalkan</Badge>;
+        default:
+          return <Badge color="gray" variant="light">Tidak diketahui</Badge>;
+      }
+    };
+
+  if (!data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={500} radius="md" />
+      </Stack>
+    );
+  }
+
+  return (
+    <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 Peminjam Buku
+          </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">
+                  No Telp
+                </Text>
+                <Text
+                  fz="md"
+                  style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+                >
+                  {data.noTelp || '-'}
+                </Text>
+              </Box>
+
+              {/* 🔹 Editable Status */}
+              <Box>
+                <Group justify="space-between" align="end">
+                  <Box>
+                    <Text fz="lg" fw="bold">
+                      Status
+                    </Text>
+                    {renderStatusBadge(data.status || '')}
+                  </Box>
+                </Group>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Alamat
+                </Text>
+                <Text fz="md" c="dimmed">
+                  {data.alamat || '-'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Buku
+                </Text>
+                <Text fz="md" c="dimmed">
+                  {data.buku?.judul || '-'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Tanggal Pinjam
+                </Text>
+                <Text fz="md" c="dimmed">
+                  {data.tanggalPinjam
+                    ? new Date(data.tanggalPinjam).toLocaleDateString('id-ID')
+                    : '-'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Tanggal Kembali
+                </Text>
+                <Text fz="md" c="dimmed">
+                  {data.tanggalKembali
+                    ? new Date(data.tanggalKembali).toLocaleDateString('id-ID')
+                    : '-'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Batas Kembali
+                </Text>
+                <Text fz="md" c="dimmed">
+                  {data.batasKembali
+                    ? new Date(data.batasKembali).toLocaleDateString('id-ID')
+                    : '-'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Catatan
+                </Text>
+                <Text
+                  fz="md"
+                  c="dimmed"
+                  dangerouslySetInnerHTML={{ __html: data.catatan || '-' }}
+                />
+              </Box>
+
+              <Group gap="sm" mt="sm">
+                <Tooltip label="Hapus Peminjam Buku" withArrow position="top">
+                  <Button
+                    color="red"
+                    onClick={() => {
+                      setSelectedId(data.id);
+                      setModalHapus(true);
+                    }}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                    disabled={stateDetail.delete.loading}
+                  >
+                    <IconTrash size={20} />
+                  </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Peminjam Buku" withArrow position="top">
+                  <Button
+                    color="green"
+                    onClick={() =>
+                      router.push(`/admin/pendidikan/perpustakaan-digital/peminjam/${data.id}/edit`)
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah Anda yakin ingin menghapus data ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailDataPeminjaman;

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

@@ -0,0 +1,157 @@
+'use client';
+import colors from '@/con/colors';
+import {
+  Badge,
+  Box,
+  Button,
+  Center,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+} from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconDeviceImacCog, 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 perpustakaanDigitalState from '../../../_state/pendidikan/perpustakaan-digital';
+
+function PeminjamBuku() {
+  const [search, setSearch] = useState('');
+  return (
+    <Box>
+      <HeaderSearch
+        title="Peminjam Buku"
+        placeholder="Cari peminjam..."
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListPeminjamBuku search={search} />
+    </Box>
+  );
+}
+
+function ListPeminjamBuku({ search }: { search: string }) {
+  const statePeminjam = useProxy(perpustakaanDigitalState.peminjamanBuku);
+  const router = useRouter();
+
+  const { data, page, totalPages, loading, load } = statePeminjam.findMany;
+
+  useShallowEffect(() => {
+    load(page, 10, search);
+  }, [page, search]);
+
+  const filteredData = data || [];
+
+  // 🔹 Fungsi helper untuk badge status
+  const renderStatusBadge = (status: string) => {
+    const normalized = status?.toUpperCase();
+
+    switch (normalized) {
+      case 'DIPINJAM':
+        return <Badge color="blue" variant="light">Dipinjam</Badge>;
+      case 'DIKEMBALIKAN':
+        return <Badge color="green" variant="light">Dikembalikan</Badge>;
+      case 'TERLAMBAT':
+        return <Badge color="orange" variant="light">Terlambat</Badge>;
+      case 'DIBATALKAN':
+        return <Badge color="red" variant="light">Dibatalkan</Badge>;
+      default:
+        return <Badge color="gray" variant="light">Tidak diketahui</Badge>;
+    }
+  };
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={500} radius="md" />
+      </Stack>
+    );
+  }
+
+  return (
+    <Box py={10}>
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Title order={4} mb="md">Daftar Peminjam Buku</Title>
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '10%' }}>No</TableTh>
+                <TableTh style={{ width: '60%' }}>Nama Peminjam</TableTh>
+                <TableTh style={{ width: '15%' }}>Status</TableTh>
+                <TableTh style={{ width: '15%' }}>Detail</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.nama}</Text>
+                    </TableTd>
+                    <TableTd>
+                      {renderStatusBadge(item.status)}
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="green"
+                        onClick={() =>
+                          router.push(`/admin/pendidikan/perpustakaan-digital/peminjam/${item.id}`)
+                        }
+                      >
+                        <IconDeviceImacCog size={20} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text c="dimmed">
+                        Tidak ada data Peminjam buku yang cocok
+                      </Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
+      </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>
+      )}
+    </Box>
+  );
+}
+
+export default PeminjamBuku;

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

@@ -66,9 +66,6 @@ async function lembagaPendidikanFindMany(context: Context) {
       })
     ]);
 
-    console.log('Fetched data count:', data.length);
-    console.log('Total count:', total);
-
     return {
       success: true,
       message: "Success fetch lembaga pendidikan with pagination",

src/app/api/[[...slugs]]/_lib/pendidikan/perpustakaan-digital/index.ts

@@ -1,12 +1,14 @@
 import Elysia from "elysia";
 import DataPerpustakaan from "./data-perpustakaan";
 import KategoriBuku from "./kategori-buku";
+import PeminjamanBuku from "./peminjaman";
 
 const PerpustakaanDigital = new Elysia({
   prefix: "/perpustakaandigital",
   tags: ["Pendidikan / Perpustakaan Digital"],
 })
   .use(DataPerpustakaan)
-  .use(KategoriBuku);
+  .use(KategoriBuku)
+  .use(PeminjamanBuku);
 
 export default PerpustakaanDigital;

src/app/api/[[...slugs]]/_lib/pendidikan/perpustakaan-digital/peminjaman/create.ts

@@ -0,0 +1,40 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreate = {
+  nama: string;
+  noTelp: string;
+  alamat: string;
+  bukuId: string;
+  tanggalPinjam: string;
+  batasKembali: string;
+  tanggalKembali?: string;
+  catatan?: string;
+}
+
+export default async function peminjamanBukuCreate(context: Context) {
+  const body = (await context.body) as FormCreate;
+
+  try {
+    const result = await prisma.peminjamanBuku.create({
+      data: {
+        nama: body.nama,
+        noTelp: body.noTelp,
+        alamat: body.alamat,
+        bukuId: body.bukuId,
+        tanggalPinjam: body.tanggalPinjam,
+        batasKembali: body.batasKembali,
+        tanggalKembali: body.tanggalKembali,
+        catatan: body.catatan,
+      },
+    });
+    return {
+      success: true,
+      message: "Berhasil membuat peminjaman buku",
+      data: result,
+    };
+  } catch (error) {
+    console.error("Error creating peminjaman buku:", error);
+    throw new Error("Gagal membuat peminjaman buku: " + (error as Error).message);
+  }
+}

src/app/api/[[...slugs]]/_lib/pendidikan/perpustakaan-digital/peminjaman/del.ts

@@ -0,0 +1,16 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function peminjamanBukuDelete(context: Context) {
+  const id = context.params.id as string;
+
+  await prisma.peminjamanBuku.delete({
+    where: { id },
+  });
+
+  return {
+    status: 200,
+    success: true,
+    message: "Success delete peminjaman buku",
+  };
+}

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

@@ -0,0 +1,71 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+async function peminjamanBukuFindMany(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;
+
+  // Buat where clause
+  const where: any = {};
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { catatan: { contains: search, mode: 'insensitive' } },
+      { nama: { contains: search, mode: 'insensitive' } },
+      { buku: { judul: { contains: search, mode: 'insensitive' } } },
+      { noTelp: { contains: search, mode: 'insensitive' } },
+      { alamat: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.peminjamanBuku.findMany({
+        where,
+        include: {
+          buku: {
+            select: {
+              id: true,
+              judul: true,
+              kategoriId: true,
+              createdAt: true,
+              updatedAt: true,
+              deletedAt: true,
+              isActive: true,
+              imageId: true,
+              deskripsi: true
+            }
+          },
+        },
+        skip,
+        take: limit,
+        orderBy: { tanggalPinjam: 'desc' },
+      }),
+      prisma.peminjamanBuku.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil data peminjaman buku dengan pagination",
+      data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
+    };
+  } catch (e) {
+    console.error("Error di peminjamanBukuFindMany:", e);
+    return {
+      success: false,
+      message: "Gagal mengambil data peminjaman buku",
+    };
+  }
+}
+
+export default peminjamanBukuFindMany;

src/app/api/[[...slugs]]/_lib/pendidikan/perpustakaan-digital/peminjaman/findUnique.ts

@@ -0,0 +1,49 @@
+import prisma from "@/lib/prisma";
+
+export default async function peminjamanBukuFindUnique(request: Request) {
+    const url = new URL(request.url);
+    const pathSegments = url.pathname.split('/');
+    const id = pathSegments[pathSegments.length - 1];
+    
+    if (!id) {
+        return {
+            success: false,
+            message: "ID is required",
+        }
+    }
+
+    try {
+        if (typeof id !== 'string') {
+            return {
+                success: false,
+                message: "ID is required",
+            }
+        }
+
+        const data = await prisma.peminjamanBuku.findUnique({
+            where: { id },
+            include: {
+                buku: true,
+            },
+        });
+
+        if (!data) {
+            return {
+                success: false,
+                message: "Data not found",
+            }
+        }
+
+        return {
+            success: true,
+            message: "Success get data peminjaman buku",
+            data,
+        }
+    } catch (error) {
+        console.error("Find by ID error:", error);
+        return {
+            success: false,
+            message: "Gagal mengambil data: " + (error instanceof Error ? error.message : 'Unknown error'),
+        }
+    }
+}

src/app/api/[[...slugs]]/_lib/pendidikan/perpustakaan-digital/peminjaman/index.ts

@@ -0,0 +1,48 @@
+import Elysia, { t } from "elysia";
+import peminjamanBukuCreate from "./create";
+import peminjamanBukuDelete from "./del";
+import peminjamanBukuFindMany from "./findMany";
+import peminjamanBukuFindUnique from "./findUnique";
+import peminjamanBukuUpdate from "./updt";
+
+const PeminjamanBuku = new Elysia({
+  prefix: "/peminjamanbuku",
+  tags: ["Pendidikan / Perpustakaan Digital / Peminjaman Buku"],
+})
+
+  .post("/create", peminjamanBukuCreate, {
+    body: t.Object({
+      nama: t.String(),
+      noTelp: t.String(),
+      alamat: t.String(),
+      bukuId: t.String(),
+      tanggalPinjam: t.String(),
+      batasKembali: t.String(),
+      tanggalKembali: t.String(),
+      catatan: t.String()
+    }),
+  })
+
+  .get("/findMany", peminjamanBukuFindMany)
+  .get("/:id", async (context) => {
+    const response = await peminjamanBukuFindUnique(
+      new Request(context.request)
+    );
+    return response;
+  })
+  .put("/:id", peminjamanBukuUpdate, {
+    body: t.Object({
+      nama: t.String(),
+      noTelp: t.String(),
+      alamat: t.String(),
+      bukuId: t.String(),
+      tanggalPinjam: t.String(),
+      batasKembali: t.String(),
+      tanggalKembali: t.String(),
+      catatan: t.String(),
+      status: t.String()
+    }),
+  })
+  .delete("/del/:id", peminjamanBukuDelete);
+
+export default PeminjamanBuku;

src/app/api/[[...slugs]]/_lib/pendidikan/perpustakaan-digital/peminjaman/updt.ts

@@ -0,0 +1,49 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormUpdate = {
+  nama: string;
+  noTelp: string;
+  alamat: string;
+  bukuId: string;
+  tanggalPinjam: string;
+  batasKembali: string;
+  tanggalKembali?: string;
+  catatan?: string;
+  status?: 'Dipinjam' | 'Dikembalikan' | 'Terlambat' | 'Dibatalkan';
+};
+
+export default async function dataPerpustakaanUpdate(context: Context) {
+  const body = (await context.body) as FormUpdate;
+  const id = context.params.id as string;
+
+  try {
+    const result = await prisma.peminjamanBuku.update({
+      where: { id },
+      data: {
+        nama: body.nama,
+        noTelp: body.noTelp,
+        alamat: body.alamat,
+        bukuId: body.bukuId,
+        tanggalPinjam: body.tanggalPinjam,
+        batasKembali: body.batasKembali,
+        tanggalKembali: body.tanggalKembali,
+        catatan: body.catatan,
+        status: body.status,
+      },
+      include: {
+        buku: true,
+      }
+    });
+    return {
+      success: true,
+      message: "Berhasil mengupdate data peminjaman buku",
+      data: result,
+    };
+  } catch (error) {
+    console.error("Error updating data peminjaman buku:", error);
+    throw new Error(
+      "Gagal mengupdate data peminjaman buku: " + (error as Error).message
+    );
+  }
+}

src/app/darmasaba/(pages)/pendidikan/info-sekolah/_lib/layoutTabs.tsx

@@ -1,5 +1,101 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+// 'use client'
+// import colors from '@/con/colors';
+// import {
+//   ActionIcon,
+//   Box,
+//   Button,
+//   Container,
+//   Group,
+//   Paper,
+//   Stack,
+//   Text,
+//   VisuallyHidden
+// } from '@mantine/core';
+// import { IconArrowLeft } from '@tabler/icons-react';
+// import { useRouter, useSearchParams } from 'next/navigation';
+// import React, { useState } from 'react';
+
+// type LayoutSekolahProps = {
+//   title?: string;
+//   jenjangPendidikanList?: string[];
+//   children: React.ReactNode;
+// };
+
+// export default function LayoutSekolah({
+//   title = 'Cari Informasi Sekolah',
+//   jenjangPendidikanList = ['Semua', 'TK', 'SD', 'SMP', 'SMA'],
+//   children,
+// }: LayoutSekolahProps) {
+//   const router = useRouter();
+//   const searchParams = useSearchParams();
+//   const initialJenjangPendidikan = searchParams.get('jenjangPendidikan') || 'Semua';
+
+//   const [jenjangPendidikanAktif, setJenjangPendidikanAktif] = useState(initialJenjangPendidikan);
+
+//   // Cleanup timeout
+
+
+//   // Handle jenjang pendidikan click
+//   const handleJenjangPendidikanChange = (k: string) => {
+//     // arahkan langsung ke route jenjang pendidikan
+//     if (k.toLowerCase() === 'semua') {
+//       setJenjangPendidikanAktif(k);
+//       router.push(`/darmasaba/pendidikan/info-sekolah/semua`);
+//     } else {
+//       setJenjangPendidikanAktif(k);
+//       router.push(`/darmasaba/pendidikan/info-sekolah/${encodeURIComponent(k.toLowerCase())}`);
+//     }
+//   };
+  
+
+//   return (
+//     <Box style={{ minHeight: '100vh', background: colors.Bg, paddingBottom: 48 }}>
+//       <Container size="xl" py={{ base: 'md', md: 'xl' }}>
+//         <Stack gap="lg">
+//           {/* Back Button */}
+//           <ActionIcon onClick={() => window.history.back()} variant="light" radius="md" size="lg">
+//             <IconArrowLeft size={20} />
+//             <VisuallyHidden>Kembali</VisuallyHidden>
+//           </ActionIcon>
+
+//           {/* Search & Filter */}
+//           <Paper radius="lg" p="xl" withBorder>
+//             <Stack gap="md">
+//               <Text ta="center" fw={800} fz={28}>{title}</Text>
+
+//               <Text ta="center" fz={"md"} c="black">
+//               Temukan data lengkap mengenai lembaga pendidikan, jumlah siswa terdaftar, dan tenaga pengajar berdasarkan jenjang pendidikan yang tersedia (TK, SD, SMP, SMA). Gunakan tombol di bawah untuk melihat detail sesuai kebutuhanmu.
+//               </Text>
+//               <Group justify="center" gap="xs" wrap="wrap">
+//                 {jenjangPendidikanList.map((k) => {
+//                   const aktif = k === jenjangPendidikanAktif;
+//                   return (
+//                     <Button
+//                       key={k}
+//                       onClick={() => handleJenjangPendidikanChange(k)}
+//                       radius="xl"
+//                       size="sm"
+//                       variant={aktif ? 'filled' : 'light'}
+//                     >
+//                       {k}
+//                     </Button>
+//                   );
+//                 })}
+//               </Group>
+//             </Stack>
+//           </Paper>
+
+//           {/* Slot konten */}
+//           {children}
+//         </Stack>
+//       </Container>
+//     </Box>
+//   );
+// }
 'use client'
 import colors from '@/con/colors';
+ // pastikan path benar
 import {
   ActionIcon,
   Box,
@@ -9,44 +105,48 @@ import {
   Paper,
   Stack,
   Text,
-  VisuallyHidden
+  VisuallyHidden,
+  Loader,
 } from '@mantine/core';
 import { IconArrowLeft } from '@tabler/icons-react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import React, { useState } from 'react';
+import { useSnapshot } from 'valtio';
+import React, { useEffect, useState } from 'react';
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
 
 type LayoutSekolahProps = {
   title?: string;
-  jenjangPendidikanList?: string[];
   children: React.ReactNode;
 };
 
 export default function LayoutSekolah({
   title = 'Cari Informasi Sekolah',
-  jenjangPendidikanList = ['Semua', 'TK', 'SD', 'SMP', 'SMA'],
   children,
 }: LayoutSekolahProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const initialJenjangPendidikan = searchParams.get('jenjangPendidikan') || 'Semua';
+  const snap = useSnapshot(infoSekolahPaud.jenjangPendidikan);
 
-  const [jenjangPendidikanAktif, setJenjangPendidikanAktif] = useState(initialJenjangPendidikan);
+  const [jenjangPendidikanAktif, setJenjangPendidikanAktif] = useState<string>(
+    searchParams.get('jenjangPendidikan') || 'Semua'
+  );
 
-  // Cleanup timeout
+  // Load jenjang pendidikan dari backend
+  useEffect(() => {
+    if (!snap.findMany.data) infoSekolahPaud.jenjangPendidikan.findMany.load(1, 100);
+  }, []);
 
-
+  const handleJenjangPendidikanChange = (nama: string) => {
-  // Handle jenjang pendidikan click
+    setJenjangPendidikanAktif(nama);
-  const handleJenjangPendidikanChange = (k: string) => {
+    const path =
-    // arahkan langsung ke route jenjang pendidikan
+      nama.toLowerCase() === 'semua'
-    if (k.toLowerCase() === 'semua') {
+        ? `/darmasaba/pendidikan/info-sekolah/semua`
-      setJenjangPendidikanAktif(k);
+        : `/darmasaba/pendidikan/info-sekolah/${encodeURIComponent(nama.toLowerCase())}`;
-      router.push(`/darmasaba/pendidikan/info-sekolah/semua`);
+    router.push(path);
-    } else {
-      setJenjangPendidikanAktif(k);
-      router.push(`/darmasaba/pendidikan/info-sekolah/${encodeURIComponent(k.toLowerCase())}`);
-    }
   };
-  
+
+  // List tab dari data state
+  const jenjangList = ['Semua', ...(snap.findMany.data?.map((v) => v.nama) || [])];
 
   return (
     <Box style={{ minHeight: '100vh', background: colors.Bg, paddingBottom: 48 }}>
@@ -61,31 +161,41 @@ export default function LayoutSekolah({
           {/* Search & Filter */}
           <Paper radius="lg" p="xl" withBorder>
             <Stack gap="md">
-              <Text ta="center" fw={800} fz={28}>{title}</Text>
+              <Text ta="center" fw={800} fz={28}>
-
+                {title}
-              <Text ta="center" fz={"md"} c="black">
-              Temukan data lengkap mengenai lembaga pendidikan, jumlah siswa terdaftar, dan tenaga pengajar berdasarkan jenjang pendidikan yang tersedia (TK, SD, SMP, SMA). Gunakan tombol di bawah untuk melihat detail sesuai kebutuhanmu.
               </Text>
-              <Group justify="center" gap="xs" wrap="wrap">
+
-                {jenjangPendidikanList.map((k) => {
+              <Text ta="center" fz="md" c="black">
-                  const aktif = k === jenjangPendidikanAktif;
+                Temukan data lengkap mengenai lembaga pendidikan, jumlah siswa terdaftar, dan tenaga
-                  return (
+                pengajar berdasarkan jenjang pendidikan (TK, SD, SMP, SMA).
-                    <Button
+              </Text>
-                      key={k}
+
-                      onClick={() => handleJenjangPendidikanChange(k)}
+              {snap.findMany.loading ? (
-                      radius="xl"
+                <Group justify="center" py="sm">
-                      size="sm"
+                  <Loader size="sm" />
-                      variant={aktif ? 'filled' : 'light'}
+                </Group>
-                    >
+              ) : (
-                      {k}
+                <Group justify="center" gap="xs" wrap="wrap">
-                    </Button>
+                  {jenjangList.map((k) => {
-                  );
+                    const aktif = k === jenjangPendidikanAktif;
-                })}
+                    return (
-              </Group>
+                      <Button
+                        key={k}
+                        onClick={() => handleJenjangPendidikanChange(k)}
+                        radius="xl"
+                        size="sm"
+                        variant={aktif ? 'filled' : 'light'}
+                      >
+                        {k}
+                      </Button>
+                    );
+                  })}
+                </Group>
+              )}
             </Stack>
           </Paper>
 
-          {/* Slot konten */}
+          {/* Konten anak */}
           {children}
         </Stack>
       </Container>

src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/[kategoriBuku]/[id]/page.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
+import colors from '@/con/colors';
+import {
+  Badge,
+  Box,
+  Button,
+  Center,
+  Image,
+  Loader,
+  Paper,
+  Stack,
+  Text,
+  Title,
+} from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowLeft, IconBook2 } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import ModalPeminjaman from '../../_lib/modalPeminjaman';
+
+export default function DetailBukuUser() {
+  const router = useRouter();
+  const params = useParams();
+  const stateDetail = useProxy(perpustakaanDigitalState.dataPerpustakaan);
+  const [opened, setOpened] = useState(false);
+
+  useShallowEffect(() => {
+    if (params?.id) stateDetail.findUnique.load(params.id as string);
+  }, [params?.id]);
+
+  const data = stateDetail.findUnique.data;
+
+  if (!data) {
+    return (
+      <Center h="70vh">
+        <Loader color={colors['blue-button']} size="lg" />
+      </Center>
+    );
+  }
+
+  return (
+    <Box bg={colors.Bg} py="xl" px={{ base: 'md', md: 100 }}>
+      {/* Tombol Kembali */}
+      <Button
+        variant="subtle"
+        leftSection={<IconArrowLeft size={20} color={colors['blue-button']} />}
+        onClick={() => router.back()}
+        mb="lg"
+      >
+        Kembali
+      </Button>
+
+      <Paper
+        withBorder
+        shadow="md"
+        radius="xl"
+        bg="white"
+        p={{ base: 'md', md: 'xl' }}
+        maw={800}
+        mx="auto"
+      >
+        <Stack gap="lg" align="center">
+          {/* Cover Buku */}
+          <Image
+            src={data.image?.link || '/placeholder-book.jpg'}
+            alt={data.judul}
+            w={220}
+            h={300}
+            fit="contain"
+            radius="md"
+            loading="lazy"
+          />
+
+          {/* Judul & Kategori */}
+          <Stack gap={4} align="center">
+            <Title order={2} ta="center" c={colors['blue-button']}>
+              {data.judul}
+            </Title>
+            {data.kategori?.name && (
+              <Badge color="cyan" variant="light" size="md">
+                {data.kategori.name}
+              </Badge>
+            )}
+          </Stack>
+
+          {/* Deskripsi Buku */}
+          <Paper bg="#F9FAFF" p="md" radius="md" shadow="xs" w="100%">
+            <Text fw={600} mb={6} c={colors['blue-button']}>
+              Deskripsi Buku
+            </Text>
+            <Text
+              fz="sm"
+              lh={1.6}
+              ta="justify"
+              c="dimmed"
+              dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
+              style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+            />
+          </Paper>
+
+          {/* Tombol Pinjam */}
+          <Button
+            size="md"
+            radius="xl"
+            color="blue"
+            mt="sm"
+            leftSection={<IconBook2 size={20} />}
+            onClick={() => setOpened(true)}
+          >
+            Pinjam Buku Ini
+          </Button>
+        </Stack>
+      </Paper>
+
+      {/* Modal Peminjaman */}
+      <ModalPeminjaman
+        opened={opened}
+        onClose={() => setOpened(false)}
+        buku={data}
+      />
+    </Box>
+  );
+}

src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/[kategoriBuku]/content.tsx

@@ -1,42 +1,52 @@
 'use client'
 import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
 import colors from '@/con/colors';
-import { ActionIcon, Box, Center, Group, Image, Paper, SimpleGrid, Skeleton, Spoiler, Stack, Text, Tooltip, Badge } from '@mantine/core';
+import { ActionIcon, Badge, Box, Button, Center, Group, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconBook2, IconRefresh } from '@tabler/icons-react';
 import { motion } from 'framer-motion';
+import { useTransitionRouter } from 'next-view-transitions';
 import { useSearchParams } from 'next/navigation';
 import { useCallback, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
 function Content({ kategoriBuku }: { kategoriBuku: string }) {
   const state = useProxy(perpustakaanDigitalState);
-  const [expandedId, setExpandedId] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(true);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
   const searchParams = useSearchParams();
   const searchQuery = searchParams.get('search') || '';
+  const router = useTransitionRouter()
 
   const decodedKategoriBuku = decodeURIComponent(kategoriBuku);
-  const kategoriFilter = decodedKategoriBuku.toLowerCase() === 'semua' ? '' : decodedKategoriBuku;
 
-  const loadData = useCallback(async (searchQuery: string = '') => {
+  const loadData = useCallback(async (searchQuery: string = '', page: number = 1) => {
     try {
       setIsLoading(true);
-      await state.dataPerpustakaan.findMany.load(1, 100, searchQuery, kategoriFilter);
+      const currentKategoriFilter = decodedKategoriBuku.toLowerCase() === 'semua' ? '' : decodedKategoriBuku;
+      await state.dataPerpustakaan.findMany.load(page, 3, searchQuery, currentKategoriFilter);
+      setCurrentPage(page);
+      setTotalPages(state.dataPerpustakaan.findMany.totalPages);
     } finally {
       setIsLoading(false);
     }
-  }, [kategoriFilter, state.dataPerpustakaan.findMany]);
+  }, [state.dataPerpustakaan.findMany, decodedKategoriBuku]);
 
   useShallowEffect(() => {
     loadData(searchQuery);
-  }, [searchQuery, loadData]);
+  }, [searchQuery, loadData, kategoriBuku]);
 
   const handleRefresh = () => {
     loadData();
   };
 
-  if (isLoading || !state.dataPerpustakaan.findMany.load || !state.dataPerpustakaan.findMany.data) {
+  const handlePageChange = (newPage: number) => {
+    loadData(searchQuery, newPage);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  if ((isLoading && !state.dataPerpustakaan.findMany.data) || !state.dataPerpustakaan.findMany.load) {
     return (
       <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
         <Box px={{ base: 'md', md: 100 }} pb={50}>
@@ -57,18 +67,23 @@ function Content({ kategoriBuku }: { kategoriBuku: string }) {
               Koleksi Buku
             </Text>
           </Group>
-          <Tooltip label="Muat ulang koleksi" withArrow>
+          <Group>
-            <ActionIcon
+            <Text size="sm" c="dimmed">
-              variant="gradient"
+              Halaman {currentPage} dari {totalPages}
-              gradient={{ from: 'blue', to: 'cyan' }}
+            </Text>
-              onClick={handleRefresh}
+            <Tooltip label="Muat ulang koleksi" withArrow>
-              loading={isLoading}
+              <ActionIcon
-              radius="xl"
+                variant="gradient"
-              size="lg"
+                gradient={{ from: 'blue', to: 'cyan' }}
-            >
+                onClick={handleRefresh}
-              <IconRefresh size={20} />
+                loading={isLoading}
-            </ActionIcon>
+                radius="xl"
-          </Tooltip>
+                size="lg"
+              >
+                <IconRefresh size={20} />
+              </ActionIcon>
+            </Tooltip>
+          </Group>
         </Group>
 
         {!state.dataPerpustakaan.findMany.data || state.dataPerpustakaan.findMany.data.length === 0 ? (
@@ -132,30 +147,23 @@ function Content({ kategoriBuku }: { kategoriBuku: string }) {
                         </Badge>
                       )}
                     </Stack>
-                    <Spoiler
+                    <Text
-                      maxHeight={80}
+                     ta="justify"
-                      showLabel={
+                     fz="sm"
-                        <Text fw={600} fz="sm" c={colors['blue-button']} ta="center" mt="xs">
+                     lh={1.5}
-                          Lihat deskripsi
+                     lineClamp={5}
-                        </Text>
+                     truncate="end"
-                      }
+                     c="dimmed"
-                      hideLabel={
+                     dangerouslySetInnerHTML={{ __html: v.deskripsi }}
-                        <Text fw={600} fz="sm" c={colors['blue-button']} ta="center" mt="xs">
+                     style={{
-                          Sembunyikan deskripsi
+                       wordBreak: 'break-word',
-                        </Text>
+                       whiteSpace: 'normal',
-                      }
+                     }}
-                      expanded={expandedId === v.id}
+                    />
-                      onExpandedChange={(isExpanded) => setExpandedId(isExpanded ? v.id : null)}
+                    {/* 📗 Tombol Detail */}
-                    >
+                    <Button variant='light' color='blue' onClick={() => router.push(`/darmasaba/pendidikan/perpustakaan-digital/${v.kategori?.name}/${v.id}`)}>
-                      <Text
+                      Lihat Detail
-                        ta="justify"
+                    </Button>
-                        fz="sm"
-                        lh={1.5}
-                        c="dimmed"
-                        dangerouslySetInnerHTML={{ __html: v.deskripsi }}
-                        style={{wordBreak: "break-word", whiteSpace: "normal"}}
-                      />
-                    </Spoiler>
                   </Stack>
                 </Paper>
               </motion.div>
@@ -163,6 +171,15 @@ function Content({ kategoriBuku }: { kategoriBuku: string }) {
           </SimpleGrid>
         )}
       </Box>
+      <Center mt="lg">
+        <Pagination
+          value={currentPage}
+          onChange={handlePageChange}
+          total={totalPages}
+          color="blue"
+          radius="md"
+        />
+      </Center>
     </Stack>
   );
 }

src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/_lib/layoutTabs.tsx

@@ -1,11 +1,24 @@
-'use client'
+'use client';
-import { useEffect, useState } from 'react';
+
-import { ActionIcon, Box, Flex, Grid, GridCol, Stack, Tabs, TabsList, TabsTab, Text, TextInput } from '@mantine/core';
+import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
-import { IconSearch, IconUser } from '@tabler/icons-react';
-import Link from 'next/link';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import BackButton from '../../../desa/layanan/_com/BackButto';
 import colors from '@/con/colors';
+import {
+  Box,
+  Grid,
+  GridCol,
+  Stack,
+  Tabs,
+  TabsList,
+  TabsTab,
+  Text,
+  TextInput
+} from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useSnapshot } from 'valtio';
+import BackButton from '../../../desa/layanan/_com/BackButto';
+
 
 type LayoutBukuProps = {
   placeholder?: string;
@@ -15,7 +28,7 @@ type LayoutBukuProps = {
   children?: React.ReactNode;
 };
 
-function LayoutTabs({
+export default function LayoutTabs({
   placeholder = 'Cari buku digital...',
   searchIcon = <IconSearch size={20} />,
   children,
@@ -23,6 +36,7 @@ function LayoutTabs({
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const snap = useSnapshot(perpustakaanDigitalState);
 
   const activeTab = pathname.split('/').pop() || 'semua';
   const initialSearch = searchParams.get('search') || '';
@@ -30,6 +44,11 @@ function LayoutTabs({
   const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
   const [activeTabState, setActiveTabState] = useState(activeTab);
 
+  // 🟦 Ambil kategori buku saat mount
+  useEffect(() => {
+    perpustakaanDigitalState.kategoriBuku.findMany.load();
+  }, []);
+
   useEffect(() => {
     setActiveTabState(activeTab);
   }, [activeTab]);
@@ -51,7 +70,9 @@ function LayoutTabs({
       if (value) params.set('search', value);
 
       router.push(
-        `/darmasaba/pendidikan/perpustakaan-digital/${activeTab}${params.toString() ? `?${params.toString()}` : ''}`
+        `/darmasaba/pendidikan/perpustakaan-digital/${activeTab}${
+          params.toString() ? `?${params.toString()}` : ''
+        }`
       );
     };
 
@@ -63,41 +84,40 @@ function LayoutTabs({
     }
   };
 
+  // 🟩 Tabs dinamis berdasarkan kategori dari state
+  const kategoriTabs =
+    snap.kategoriBuku.findMany.data?.map((item) => ({
+      label: item.name,
+      value: item.name.toLowerCase().replace(/\s+/g, '-'),
+      href: `/darmasaba/pendidikan/perpustakaan-digital/${encodeURIComponent(item.name.toLowerCase().replace(/\s+/g, '-'))}`,
+    })) ?? [];
+
   const tabs = [
     { label: 'Semua', value: 'semua', href: '/darmasaba/pendidikan/perpustakaan-digital/semua' },
-    { label: 'Dokumenter', value: 'dokumenter', href: '/darmasaba/pendidikan/perpustakaan-digital/dokumenter' },
+    ...kategoriTabs,
-    { label: 'Sayuran', value: 'sayuran', href: '/darmasaba/pendidikan/perpustakaan-digital/sayuran' },
-    { label: 'Dongeng', value: 'dongeng', href: '/darmasaba/pendidikan/perpustakaan-digital/dongeng' },
   ];
 
   const handleTabChange = (value: string | null) => {
     if (!value) return;
     const params = new URLSearchParams(searchParams.toString());
-    router.push(`/darmasaba/pendidikan/perpustakaan-digital/${value}${params.toString() ? `?${params.toString()}` : ''}`);
+    router.push(
+      `/darmasaba/pendidikan/perpustakaan-digital/${value}${
+        params.toString() ? `?${params.toString()}` : ''
+      }`
+    );
   };
 
   return (
     <Stack pos="relative" bg="var(--mantine-color-gray-0)" py="xl" gap="22">
       <Box px={{ base: 'md', md: 100 }}>
-        <Flex justify="space-between" align="center">
           <BackButton />
-          <ActionIcon
-            variant="light"
-            component={Link}
-            href="/login"
-            radius="xl"
-            size="lg"
-            aria-label="Masuk ke akun"
-          >
-            <IconUser size={26} stroke={1.5} />
-          </ActionIcon>
-        </Flex>
       </Box>
 
       <Box pb={20}>
         <Text ta="center" fz={{ base: '1.6rem', md: '2.4rem' }} fw={700} c={colors['blue-button']}>
           Perpustakaan Digital Darmasaba
         </Text>
+
         <Tabs color="blue" variant="pills" value={activeTabState} onChange={handleTabChange}>
           <Box px={{ base: 'md', md: 100 }} py="md" bg="var(--mantine-color-gray-1)" style={{ borderRadius: 16 }}>
             <Grid align="center" gutter="md">
@@ -116,6 +136,7 @@ function LayoutTabs({
                   ))}
                 </TabsList>
               </GridCol>
+
               <GridCol span={{ base: 12, md: 3 }}>
                 <TextInput
                   radius="xl"
@@ -130,11 +151,10 @@ function LayoutTabs({
               </GridCol>
             </Grid>
           </Box>
+
           {children}
         </Tabs>
       </Box>
     </Stack>
   );
 }
-
-export default LayoutTabs;

src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/_lib/modalPeminjaman.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
+import colors from '@/con/colors';
+import {
+  Badge,
+  Box,
+  Button,
+  Divider,
+  Group,
+  Image,
+  Modal,
+  Stack,
+  Text,
+  TextInput,
+} from '@mantine/core';
+import { DateInput } from '@mantine/dates';
+import {
+  IconArrowRight,
+  IconBook2,
+  IconUser
+} from '@tabler/icons-react';
+import { useEffect } from 'react';
+import { toast } from 'react-toastify';
+import { useSnapshot } from 'valtio';
+
+
+export interface ModalPeminjamanProps {
+  opened: boolean;
+  onClose: () => void;
+  buku: {
+    id: string;
+    judul: string;
+    deskripsi?: string;
+    image?: { link?: string };
+    kategori?: { name?: string };
+  } | null;
+}
+
+export default function ModalPeminjaman({
+  opened,
+  onClose,
+  buku,
+}: ModalPeminjamanProps) {
+  const snap = useSnapshot(perpustakaanDigitalState.peminjamanBuku);
+
+  // reset form setiap modal dibuka
+  useEffect(() => {
+    if (opened && buku) {
+      perpustakaanDigitalState.peminjamanBuku.create.form = {
+        ...perpustakaanDigitalState.peminjamanBuku.create.form,
+        bukuId: buku.id,
+        nama: '',
+        noTelp: '',
+        alamat: '',
+        tanggalPinjam: '',
+        batasKembali: '',
+        tanggalKembali: '',
+        catatan: '',
+      };
+    }
+  }, [opened, buku]);
+
+  const handleSubmit = async () => {
+    if (!buku) return toast.error('Data buku tidak ditemukan');
+    await perpustakaanDigitalState.peminjamanBuku.create.create();
+    onClose();
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      centered
+      size="lg"
+      radius="xl"
+      title={<Text fw={700}>Formulir Peminjaman Buku</Text>}
+    >
+      {buku ? (
+        <Stack>
+          {/* --- Info Buku --- */}
+          <Group align="flex-start">
+            <Image
+              src={buku.image?.link || '/placeholder-book.jpg'}
+              alt={buku.judul}
+              w={100}
+              radius="md"
+            />
+            <Stack gap={4}>
+              <Group>
+                <IconBook2 size={18} color={colors['blue-button']} />
+                <Text fw={700}>{buku.judul}</Text>
+              </Group>
+
+              {buku.kategori?.name && (
+                <Badge color="cyan" variant="light">
+                  {buku.kategori.name}
+                </Badge>
+              )}
+
+              <Text fz="sm" c="dimmed" lineClamp={3} dangerouslySetInnerHTML={{ __html: buku.deskripsi || 'Tidak ada deskripsi' }} />
+            </Stack>
+          </Group>
+
+          <Divider my="sm" />
+
+          {/* --- Form Input --- */}
+          <TextInput
+            label="Nama Peminjam"
+            placeholder="Masukkan nama lengkap"
+            leftSection={<IconUser size={16} />}
+            value={snap.create.form.nama}
+            onChange={(e) =>
+              (perpustakaanDigitalState.peminjamanBuku.create.form.nama = e.currentTarget.value)
+            }
+            required
+          />
+
+          <TextInput
+            label="No Telp"
+            placeholder="Masukkan no telp"
+            leftSection={<IconUser size={16} />}
+            value={snap.create.form.noTelp}
+            onChange={(e) =>
+              (perpustakaanDigitalState.peminjamanBuku.create.form.noTelp = e.currentTarget.value)
+            }
+            required
+          />
+
+          <TextInput
+            label="Alamat"
+            placeholder="Masukkan alamat"
+            leftSection={<IconUser size={16} />}
+            value={snap.create.form.alamat}
+            onChange={(e) =>
+              (perpustakaanDigitalState.peminjamanBuku.create.form.alamat = e.currentTarget.value)
+            }
+            required
+          />
+
+          <DateInput
+            label="Tanggal Pinjam"
+            placeholder="Pilih tanggal pinjam"
+            value={
+              snap.create.form.tanggalPinjam
+                ? new Date(snap.create.form.tanggalPinjam)
+                : null
+            }
+            onChange={(date) => {
+              perpustakaanDigitalState.peminjamanBuku.create.form.tanggalPinjam = 
+                date ? new Date(date).toISOString() : '';
+            }}
+            required
+          />
+
+          <Box>
+            <Text>Catatan</Text>
+            <CreateEditor
+              value={snap.create.form.catatan}
+              onChange={(e) =>
+                (perpustakaanDigitalState.peminjamanBuku.create.form.catatan = e)
+              }
+            />
+          </Box>
+
+          <DateInput
+            label="Tanggal Kembali"
+            placeholder="Pilih tanggal kembali"
+            value={
+              snap.create.form.tanggalKembali
+                ? new Date(snap.create.form.tanggalKembali)
+                : null
+            }
+            onChange={(date) => {
+              perpustakaanDigitalState.peminjamanBuku.create.form.tanggalKembali = 
+                date ? new Date(date).toISOString() : '';
+            }}
+            required
+          />
+          
+          <DateInput
+            label="Batas Pengembalian"
+            placeholder="Pilih tanggal kembali"
+            value={
+              snap.create.form.batasKembali
+                ? new Date(snap.create.form.batasKembali)
+                : null
+            }
+            onChange={(date) => {
+              perpustakaanDigitalState.peminjamanBuku.create.form.batasKembali = 
+                date ? new Date(date).toISOString() : '';
+            }}
+            required
+          />
+
+
+          <Button
+            onClick={handleSubmit}
+            loading={snap.create.loading}
+            disabled={
+              !snap.create.form.nama || 
+              !snap.create.form.tanggalPinjam || 
+              !snap.create.form.batasKembali ||
+              !snap.create.form.tanggalKembali
+            }
+            rightSection={<IconArrowRight size={16} />}
+            radius="xl"
+          >
+            Pinjam Buku
+          </Button>
+        </Stack>
+      ) : (
+        <Text c="dimmed" ta="center">
+          Tidak ada data buku yang dipilih
+        </Text>
+      )}
+    </Modal>
+  );
+}

src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/semua/content.tsx

@@ -1,45 +1,89 @@
-'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client';
+
 import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
 import colors from '@/con/colors';
-import { Badge, Box, Center, Group, Image, Paper, SimpleGrid, Skeleton, Spoiler, Stack, Text, Tooltip } from '@mantine/core';
+import {
-import { useShallowEffect } from '@mantine/hooks';
+  Badge,
-import { motion } from 'framer-motion';
+  Box,
-import { useCallback, useState } from 'react';
+  Button,
-import { useProxy } from 'valtio/utils';
+  Center,
+  Group,
+  Image,
+  Paper,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  Tooltip
+} from '@mantine/core';
 import { IconBook2, IconInfoCircle } from '@tabler/icons-react';
+import { Pagination } from '@mantine/core';
+import { motion } from 'framer-motion';
 
-type ContentProps = {
+import { useEffect, useState } from 'react';
-  searchQuery: string;
+import { useSearchParams } from 'next/navigation';
-};
+import { useProxy } from 'valtio/utils';
+import ModalPeminjaman from '../_lib/modalPeminjaman';
+import { useTransitionRouter } from 'next-view-transitions';
 
-function Content({ searchQuery }: ContentProps) {
+export default function Content() {
   const state = useProxy(perpustakaanDigitalState);
-  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const router = useTransitionRouter()
-  const [isLoading, setIsLoading] = useState(true);
+  const [opened, setOpened] = useState(false);
+  const searchParams = useSearchParams();
+  const searchQuery = searchParams.get('search') || '';
+  const [currentPage, setCurrentPage] = useState(1);
+  
+  const { data: books = [], loading, totalPages } = state.dataPerpustakaan.findMany;
 
-  const loadData = useCallback(
+  const [selectedBook, setSelectedBook] = useState<{
-    async (query: string = '') => {
+    id: string;
+    judul: string;
+    deskripsi?: string;
+    image?: { link?: string };
+    kategori?: { name?: string };
+  } | null>(null);
+
+  // Handle data loading and search
+  useEffect(() => {
+    let isMounted = true;
+    const controller = new AbortController();
+
+    const loadData = async () => {
+      if (!isMounted) return;
+      
       try {
-        setIsLoading(true);
+        await state.dataPerpustakaan.findMany.load(
-        await state.dataPerpustakaan.findMany.load(1, 100, query, '');
+          currentPage, 
+          10, 
+          searchQuery, 
+          ''
+        );
       } catch (error) {
-        console.error('Gagal memuat data:', error);
+        if (!controller.signal.aborted) {
-      } finally {
+          console.error('Gagal memuat data:', error);
-        setIsLoading(false);
+        }
       }
-    },
+    };
-    [state.dataPerpustakaan.findMany]
-  );
 
-  useShallowEffect(() => {
+    const timer = setTimeout(loadData, 300);
-    loadData(searchQuery);
+    
-  }, [searchQuery, loadData]);
+    return () => {
+      isMounted = false;
+      controller.abort();
+      clearTimeout(timer);
+    };
+  }, [searchQuery, currentPage]);
 
-  if (
+  // Handle page change
-    isLoading ||
+  const handlePageChange = (newPage: number) => {
-    !state.dataPerpustakaan.findMany.load ||
+    setCurrentPage(newPage);
-    !state.dataPerpustakaan.findMany.data
+    window.scrollTo({ top: 0, behavior: 'smooth' });
-  ) {
+  };
+
+  // Loading state
+  if (loading || !books) {
     return (
       <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
         <Box px={{ base: 'md', md: 100 }} pb={50}>
@@ -53,6 +97,7 @@ function Content({ searchQuery }: ContentProps) {
   return (
     <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
       <Box px={{ base: 'md', md: 100 }} pb={20}>
+        {/* 🔹 Header */}
         <Group justify="space-between" mb="lg">
           <Group gap="xs">
             <IconBook2 size={28} color={colors['blue-button']} />
@@ -65,101 +110,152 @@ function Content({ searchQuery }: ContentProps) {
           </Tooltip>
         </Group>
 
-        {!state.dataPerpustakaan.findMany.data ||
+        {/* 📚 Empty State */}
-        state.dataPerpustakaan.findMany.data.length === 0 ? (
+        {books.length === 0 ? (
           <Center py="xl">
             <Stack gap="xs" align="center">
-              <Image loading="lazy" src="/empty-books.svg" alt="Kosong" w={140} h="auto" />
+              <Image
-              <Text c="dimmed" fz="sm">Belum ada buku yang tersedia</Text>
+                loading="lazy"
+                src="/empty-books.svg"
+                alt="Kosong"
+                w={140}
+                h="auto"
+              />
+              <Text c="dimmed" fz="sm">
+                Belum ada buku yang tersedia
+              </Text>
             </Stack>
           </Center>
         ) : (
+          // 📘 Daftar Buku
           <SimpleGrid
             cols={{ base: 1, sm: 2, md: 3 }}
             spacing="lg"
             verticalSpacing="lg"
+            style={{ alignItems: 'stretch' }}
           >
-            {state.dataPerpustakaan.findMany.data?.map((v, k) => (
+            {books.map((v) => (
               <motion.div
-                key={k}
+                key={v.id}
                 whileHover={{ scale: 1.03 }}
                 transition={{ duration: 0.2 }}
-                style={{ width: '100%', height: '100%' }}
+                style={{ height: '100%' }}
               >
-                <Paper 
+                <Paper
-                  p="lg" 
+                  p="lg"
                   radius="2xl"
                   shadow="md"
                   bg="white"
                   style={{
-                    height: '100%',
                     display: 'flex',
                     flexDirection: 'column',
-                    justifyContent: 'space-between'
+                    justifyContent: 'space-between',
+                    height: '100%',
+                    minHeight: 440,
                   }}
                 >
-                  <Stack gap="md" style={{ flex: 1 }}>
+                  <Stack gap="md" style={{ flexGrow: 1 }}>
+                    {/* 🖼 Gambar Buku */}
                     <Center>
-                      <Image 
+                      <Image
-                        src={v.image?.link} 
+                        src={v.image?.link}
-                        alt={v.judul} 
+                        alt={v.judul}
                         h={180}
                         w="auto"
                         fit="contain"
-                        fallbackSrc="/placeholder-book.jpg"
                         radius="md"
+                        fallbackSrc="/placeholder-book.jpg"
                         loading="lazy"
                       />
                     </Center>
-                    <Stack gap={4} align="center">
+
-                      <Text 
+                    {/* 📖 Judul & Kategori */}
-                        c={colors["blue-button"]} 
+                    <Stack gap={4} align="center" px="sm">
-                        ta="center" 
+                      <Text
-                        fw={700} 
+                        c={colors['blue-button']}
-                        fz={{ base: "md", md: "lg" }}
+                        ta="center"
+                        fw={700}
+                        fz={{ base: 'md', md: 'lg' }}
                         lineClamp={2}
                       >
                         {v.judul}
                       </Text>
                       {v.kategori && (
-                        <Badge color="cyan" radius="sm" variant="light" size="sm">
+                        <Badge
+                          color="cyan"
+                          radius="sm"
+                          variant="light"
+                          size="sm"
+                        >
                           {v.kategori.name}
                         </Badge>
                       )}
                     </Stack>
-                    <Spoiler
+
-                      maxHeight={80}
+                    {/* 📝 Deskripsi */}
-                      showLabel={
+                    <Text
-                        <Text fw={600} fz="sm" c={colors['blue-button']} ta="center" mt="xs">
+                      ta="justify"
-                          Lihat deskripsi
+                      fz="sm"
-                        </Text>
+                      lh={1.5}
-                      }
+                      lineClamp={5}
-                      hideLabel={
+                      truncate="end"
-                        <Text fw={600} fz="sm" c={colors['blue-button']} ta="center" mt="xs">
+                      c="dimmed"
-                          Sembunyikan deskripsi
+                      dangerouslySetInnerHTML={{ __html: v.deskripsi }}
-                        </Text>
+                      style={{
-                      }
+                        wordBreak: 'break-word',
-                      expanded={expandedId === v.id}
+                        whiteSpace: 'normal',
-                      onExpandedChange={(isExpanded) => setExpandedId(isExpanded ? v.id : null)}
+                      }}
-                    >
+                    />
-                      <Text
-                        ta="justify"
-                        fz="sm"
-                        lh={1.5}
-                        c="dimmed"
-                        dangerouslySetInnerHTML={{ __html: v.deskripsi }}
-                        style={{wordBreak: "break-word", whiteSpace: "normal"}}
-                      />
-                    </Spoiler>
                   </Stack>
+                  
+                  {/* 📗 Tombol Detail */}
+                  <Button variant='light' color='blue' onClick={() => router.push(`/darmasaba/pendidikan/perpustakaan-digital/${v.kategori?.name}/${v.id}`)}>
+                    Lihat Detail
+                  </Button>
+
+                  {/* 📗 Tombol Peminjaman */}
+                  <Button
+                    mt="md"
+                    variant="outline"
+                    color="blue"
+                    radius="xl"
+                    size="md"
+                    fullWidth
+                    leftSection={<IconBook2 size={20} />}
+                    onClick={() => {
+                      setSelectedBook(v);
+                      setOpened(true);
+                    }}
+                  >
+                    Peminjaman
+                  </Button>
                 </Paper>
               </motion.div>
             ))}
           </SimpleGrid>
         )}
+        
+        
+          <Center mt="lg">
+            <Pagination
+              value={currentPage}
+              onChange={handlePageChange}
+              total={totalPages}
+              color="blue"
+              radius="md"
+            />
+          </Center>
       </Box>
+
+      {/* 🔸 Modal Peminjaman */}
+      <ModalPeminjaman
+        opened={opened}
+        onClose={() => {
+          setOpened(false);
+          setSelectedBook(null);
+        }}
+        buku={selectedBook}
+      />
     </Stack>
   );
 }
-
-export default Content;

src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/semua/page.tsx

@@ -1,13 +1,13 @@
 // src/app/darmasaba/(pages)/desa/berita/[kategori]/page.tsx
 import { Suspense } from "react";
-import Content from "./content";
+import Content from "../[kategoriBuku]/content";
 
 
 export default async function Page() {
 
   return (
     <Suspense fallback={<div>Loading...</div>}>
-      <Content searchQuery="" />
+      <Content kategoriBuku="semua" />
     </Suspense>
   );
 }