From 5f00a0dbf10df3a07e3672e34e5137a0472108a4 Mon Sep 17 00:00:00 2001
From: rahmatrafli1 <rahmatrafli1@gmail.com>
Date: Tue, 17 Mar 2026 22:05:20 +0700
Subject: [PATCH] feat: Add CRUD functionality for books, categories, and loans

- Implemented Create, Edit, and Index pages for Buku (Books) with form handling and validation.
- Added Create, Edit, and Index pages for Kategori (Categories) with form handling and validation.
- Developed Create and Index pages for Peminjaman (Loans) with form handling and validation.
- Integrated status management and action buttons for loan records.
- Enhanced UI with responsive design and user-friendly navigation.
---
 resources/js/Layouts/MainLayout.jsx      |  81 ++++++++++
 resources/js/Pages/Anggota/Create.jsx    | 158 +++++++++++++++++++
 resources/js/Pages/Anggota/Edit.jsx      | 154 +++++++++++++++++++
 resources/js/Pages/Anggota/Index.jsx     | 142 +++++++++++++++++
 resources/js/Pages/Buku/Create.jsx       | 188 +++++++++++++++++++++++
 resources/js/Pages/Buku/Edit.jsx         | 182 ++++++++++++++++++++++
 resources/js/Pages/Buku/Index.jsx        | 142 +++++++++++++++++
 resources/js/Pages/Dashboard.jsx         | 133 ++++++++++++++++
 resources/js/Pages/Kategori/Create.jsx   |  98 ++++++++++++
 resources/js/Pages/Kategori/Edit.jsx     |  96 ++++++++++++
 resources/js/Pages/Kategori/Index.jsx    | 122 +++++++++++++++
 resources/js/Pages/Peminjaman/Create.jsx | 156 +++++++++++++++++++
 resources/js/Pages/Peminjaman/Index.jsx  | 161 +++++++++++++++++++
 13 files changed, 1813 insertions(+)
 create mode 100644 resources/js/Layouts/MainLayout.jsx
 create mode 100644 resources/js/Pages/Anggota/Create.jsx
 create mode 100644 resources/js/Pages/Anggota/Edit.jsx
 create mode 100644 resources/js/Pages/Anggota/Index.jsx
 create mode 100644 resources/js/Pages/Buku/Create.jsx
 create mode 100644 resources/js/Pages/Buku/Edit.jsx
 create mode 100644 resources/js/Pages/Buku/Index.jsx
 create mode 100644 resources/js/Pages/Dashboard.jsx
 create mode 100644 resources/js/Pages/Kategori/Create.jsx
 create mode 100644 resources/js/Pages/Kategori/Edit.jsx
 create mode 100644 resources/js/Pages/Kategori/Index.jsx
 create mode 100644 resources/js/Pages/Peminjaman/Create.jsx
 create mode 100644 resources/js/Pages/Peminjaman/Index.jsx

diff --git a/resources/js/Layouts/MainLayout.jsx b/resources/js/Layouts/MainLayout.jsx
new file mode 100644
index 0000000..88db98d
--- /dev/null
+++ b/resources/js/Layouts/MainLayout.jsx
@@ -0,0 +1,81 @@
+import { Link, usePage } from '@inertiajs/react';
+import { useState } from 'react';
+
+export default function MainLayout({ children }) {
+    const [sidebarOpen, setSidebarOpen] = useState(true);
+    const { url } = usePage();
+
+    const menus = [
+        { name: 'Dashboard',   href: '/',            icon: '🏠' },
+        { name: 'Buku',        href: '/buku',        icon: '📚' },
+        { name: 'Kategori',    href: '/kategori',    icon: '🏷️' },
+        { name: 'Anggota',     href: '/anggota',     icon: '👥' },
+        { name: 'Peminjaman',  href: '/peminjaman',  icon: '📋' },
+    ];
+
+    return (
+        <div className="flex h-screen bg-gray-100">
+            {/* Sidebar */}
+            <aside className={`${sidebarOpen ? 'w-64' : 'w-16'} bg-indigo-800 text-white transition-all duration-300 flex flex-col`}>
+                <div className="flex items-center justify-between p-4 border-b border-indigo-700">
+                    {sidebarOpen && (
+                        <h1 className="text-xl font-bold">📖 Perpustakaanku</h1>
+                    )}
+                    <button
+                        onClick={() => setSidebarOpen(!sidebarOpen)}
+                        className="p-1 rounded hover:bg-indigo-700"
+                    >
+                        {sidebarOpen ? '◀' : '▶'}
+                    </button>
+                </div>
+                <nav className="flex-1 p-2 space-y-1">
+                    {menus.map((menu) => (
+                        <Link
+                            key={menu.href}
+                            href={menu.href}
+                            className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+                                url === menu.href
+                                    ? 'bg-indigo-600 text-white'
+                                    : 'hover:bg-indigo-700 text-indigo-200'
+                            }`}
+                        >
+                            <span className="text-xl">{menu.icon}</span>
+                            {sidebarOpen && <span className="font-medium">{menu.name}</span>}
+                        </Link>
+                    ))}
+                </nav>
+            </aside>
+
+            {/* Main Content */}
+            <div className="flex-1 flex flex-col overflow-hidden">
+                {/* Header */}
+                <header className="bg-white shadow-sm px-6 py-4 flex items-center justify-between">
+                    <h2 className="text-lg font-semibold text-gray-700">Sistem Perpustakaanku</h2>
+                    <span className="text-sm text-gray-500">📅 {new Date().toLocaleDateString('id-ID', {
+                        weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
+                    })}</span>
+                </header>
+
+                {/* Flash Message */}
+                <FlashMessage />
+
+                {/* Content */}
+                <main className="flex-1 overflow-y-auto p-6">
+                    {children}
+                </main>
+            </div>
+        </div>
+    );
+}
+
+function FlashMessage() {
+    const { flash } = usePage().props;
+    if (!flash?.success) return null;
+
+    return (
+        <div className="mx-6 mt-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
+            <span>✅</span>
+            <span>{flash.success}</span>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/resources/js/Pages/Anggota/Create.jsx b/resources/js/Pages/Anggota/Create.jsx
new file mode 100644
index 0000000..315dcc1
--- /dev/null
+++ b/resources/js/Pages/Anggota/Create.jsx
@@ -0,0 +1,158 @@
+import MainLayout from "@/Layouts/MainLayout";
+import { Head, useForm, Link } from "@inertiajs/react";
+
+export default function AnggotaCreate() {
+    const { data, setData, post, processing, errors } = useForm({
+        nama: "",
+        email: "",
+        no_telepon: "",
+        alamat: "",
+        tanggal_bergabung: "",
+        status: "aktif",
+    });
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        post("/anggota");
+    };
+
+    return (
+        <MainLayout>
+            <Head title="Tambah Anggota" />
+
+            <div className="max-w-2xl mx-auto">
+                <div className="flex items-center gap-2 mb-6">
+                    <Link
+                        href="/anggota"
+                        className="text-indigo-600 hover:underline"
+                    >
+                        ← Kembali
+                    </Link>
+                    <span className="text-gray-400">/</span>
+                    <span className="text-gray-600">Tambah Anggota</span>
+                </div>
+
+                <div className="bg-white rounded-xl shadow p-6">
+                    <h1 className="text-xl font-bold text-gray-800 mb-6">
+                        👥 Tambah Anggota Baru
+                    </h1>
+
+                    <form onSubmit={handleSubmit} className="space-y-4">
+                        <FormField label="Nama Lengkap" error={errors.nama}>
+                            <input
+                                type="text"
+                                value={data.nama}
+                                onChange={(e) =>
+                                    setData("nama", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                placeholder="Masukkan nama lengkap"
+                            />
+                        </FormField>
+
+                        <FormField label="Email" error={errors.email}>
+                            <input
+                                type="email"
+                                value={data.email}
+                                onChange={(e) =>
+                                    setData("email", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                placeholder="contoh@email.com"
+                            />
+                        </FormField>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                label="No Telepon"
+                                error={errors.no_telepon}
+                            >
+                                <input
+                                    type="text"
+                                    value={data.no_telepon}
+                                    onChange={(e) =>
+                                        setData("no_telepon", e.target.value)
+                                    }
+                                    className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                    placeholder="08xxxxxxxxxx"
+                                />
+                            </FormField>
+
+                            <FormField
+                                label="Tanggal Bergabung"
+                                error={errors.tanggal_bergabung}
+                            >
+                                <input
+                                    type="date"
+                                    value={data.tanggal_bergabung}
+                                    onChange={(e) =>
+                                        setData(
+                                            "tanggal_bergabung",
+                                            e.target.value,
+                                        )
+                                    }
+                                    className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                />
+                            </FormField>
+                        </div>
+
+                        <FormField label="Alamat" error={errors.alamat}>
+                            <textarea
+                                value={data.alamat}
+                                onChange={(e) =>
+                                    setData("alamat", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                rows={3}
+                                placeholder="Masukkan alamat lengkap"
+                            />
+                        </FormField>
+
+                        <FormField label="Status" error={errors.status}>
+                            <select
+                                value={data.status}
+                                onChange={(e) =>
+                                    setData("status", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                            >
+                                <option value="aktif">Aktif</option>
+                                <option value="nonaktif">Non Aktif</option>
+                            </select>
+                        </FormField>
+
+                        <div className="flex gap-3 pt-4">
+                            <button
+                                type="submit"
+                                disabled={processing}
+                                className="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
+                            >
+                                {processing
+                                    ? "Menyimpan..."
+                                    : "💾 Simpan Anggota"}
+                            </button>
+                            <Link
+                                href="/anggota"
+                                className="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition-colors"
+                            >
+                                Batal
+                            </Link>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </MainLayout>
+    );
+}
+
+function FormField({ label, error, children }) {
+    return (
+        <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+                {label}
+            </label>
+            {children}
+            {error && <p className="text-red-500 text-xs mt-1">{error}</p>}
+        </div>
+    );
+}
diff --git a/resources/js/Pages/Anggota/Edit.jsx b/resources/js/Pages/Anggota/Edit.jsx
new file mode 100644
index 0000000..ab5d731
--- /dev/null
+++ b/resources/js/Pages/Anggota/Edit.jsx
@@ -0,0 +1,154 @@
+import MainLayout from "@/Layouts/MainLayout";
+import { Head, useForm, Link } from "@inertiajs/react";
+
+export default function AnggotaEdit({ anggota }) {
+    const { data, setData, put, processing, errors } = useForm({
+        nama: anggota.nama,
+        email: anggota.email,
+        no_telepon: anggota.no_telepon ?? "",
+        alamat: anggota.alamat ?? "",
+        tanggal_bergabung: anggota.tanggal_bergabung,
+        status: anggota.status,
+    });
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        put(`/anggota/${anggota.id}`);
+    };
+
+    return (
+        <MainLayout>
+            <Head title="Edit Anggota" />
+
+            <div className="max-w-2xl mx-auto">
+                <div className="flex items-center gap-2 mb-6">
+                    <Link
+                        href="/anggota"
+                        className="text-indigo-600 hover:underline"
+                    >
+                        ← Kembali
+                    </Link>
+                    <span className="text-gray-400">/</span>
+                    <span className="text-gray-600">Edit Anggota</span>
+                </div>
+
+                <div className="bg-white rounded-xl shadow p-6">
+                    <h1 className="text-xl font-bold text-gray-800 mb-6">
+                        ✏️ Edit Anggota
+                    </h1>
+
+                    <form onSubmit={handleSubmit} className="space-y-4">
+                        <FormField label="Nama Lengkap" error={errors.nama}>
+                            <input
+                                type="text"
+                                value={data.nama}
+                                onChange={(e) =>
+                                    setData("nama", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                            />
+                        </FormField>
+
+                        <FormField label="Email" error={errors.email}>
+                            <input
+                                type="email"
+                                value={data.email}
+                                onChange={(e) =>
+                                    setData("email", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                            />
+                        </FormField>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                label="No Telepon"
+                                error={errors.no_telepon}
+                            >
+                                <input
+                                    type="text"
+                                    value={data.no_telepon}
+                                    onChange={(e) =>
+                                        setData("no_telepon", e.target.value)
+                                    }
+                                    className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                />
+                            </FormField>
+
+                            <FormField
+                                label="Tanggal Bergabung"
+                                error={errors.tanggal_bergabung}
+                            >
+                                <input
+                                    type="date"
+                                    value={data.tanggal_bergabung}
+                                    onChange={(e) =>
+                                        setData(
+                                            "tanggal_bergabung",
+                                            e.target.value,
+                                        )
+                                    }
+                                    className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                />
+                            </FormField>
+                        </div>
+
+                        <FormField label="Alamat" error={errors.alamat}>
+                            <textarea
+                                value={data.alamat}
+                                onChange={(e) =>
+                                    setData("alamat", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                rows={3}
+                            />
+                        </FormField>
+
+                        <FormField label="Status" error={errors.status}>
+                            <select
+                                value={data.status}
+                                onChange={(e) =>
+                                    setData("status", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                            >
+                                <option value="aktif">Aktif</option>
+                                <option value="nonaktif">Non Aktif</option>
+                            </select>
+                        </FormField>
+
+                        <div className="flex gap-3 pt-4">
+                            <button
+                                type="submit"
+                                disabled={processing}
+                                className="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
+                            >
+                                {processing
+                                    ? "Menyimpan..."
+                                    : "💾 Update Anggota"}
+                            </button>
+                            <Link
+                                href="/anggota"
+                                className="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition-colors"
+                            >
+                                Batal
+                            </Link>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </MainLayout>
+    );
+}
+
+function FormField({ label, error, children }) {
+    return (
+        <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+                {label}
+            </label>
+            {children}
+            {error && <p className="text-red-500 text-xs mt-1">{error}</p>}
+        </div>
+    );
+}
diff --git a/resources/js/Pages/Anggota/Index.jsx b/resources/js/Pages/Anggota/Index.jsx
new file mode 100644
index 0000000..c7c009e
--- /dev/null
+++ b/resources/js/Pages/Anggota/Index.jsx
@@ -0,0 +1,142 @@
+import MainLayout from "@/Layouts/MainLayout";
+import { Head, Link, router } from "@inertiajs/react";
+
+export default function AnggotaIndex({ anggotas }) {
+    const handleDelete = (id) => {
+        if (confirm("Yakin ingin menghapus anggota ini?")) {
+            router.delete(`/anggota/${id}`);
+        }
+    };
+
+    return (
+        <MainLayout>
+            <Head title="Data Anggota" />
+
+            <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                    <h1 className="text-2xl font-bold text-gray-800">
+                        👥 Data Anggota
+                    </h1>
+                    <Link
+                        href="/anggota/create"
+                        className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors"
+                    >
+                        + Tambah Anggota
+                    </Link>
+                </div>
+
+                <div className="bg-white rounded-xl shadow overflow-hidden">
+                    <div className="overflow-x-auto">
+                        <table className="w-full text-sm">
+                            <thead className="bg-gray-50 border-b">
+                                <tr>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        No
+                                    </th>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        Nama
+                                    </th>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        Email
+                                    </th>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        No Telepon
+                                    </th>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        Tgl Bergabung
+                                    </th>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        Status
+                                    </th>
+                                    <th className="px-4 py-3 text-center text-gray-600">
+                                        Aksi
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody className="divide-y divide-gray-100">
+                                {anggotas.data.map((anggota, index) => (
+                                    <tr
+                                        key={anggota.id}
+                                        className="hover:bg-gray-50"
+                                    >
+                                        <td className="px-4 py-3 text-gray-500">
+                                            {(anggotas.current_page - 1) *
+                                                anggotas.per_page +
+                                                index +
+                                                1}
+                                        </td>
+                                        <td className="px-4 py-3 font-medium">
+                                            {anggota.nama}
+                                        </td>
+                                        <td className="px-4 py-3">
+                                            {anggota.email}
+                                        </td>
+                                        <td className="px-4 py-3">
+                                            {anggota.no_telepon ?? "-"}
+                                        </td>
+                                        <td className="px-4 py-3">
+                                            {anggota.tanggal_bergabung}
+                                        </td>
+                                        <td className="px-4 py-3">
+                                            <span
+                                                className={`px-2 py-1 rounded-full text-xs font-medium ${
+                                                    anggota.status === "aktif"
+                                                        ? "bg-green-100 text-green-700"
+                                                        : "bg-red-100 text-red-700"
+                                                }`}
+                                            >
+                                                {anggota.status}
+                                            </span>
+                                        </td>
+                                        <td className="px-4 py-3">
+                                            <div className="flex items-center justify-center gap-2">
+                                                <Link
+                                                    href={`/anggota/${anggota.id}/edit`}
+                                                    className="text-blue-600 hover:text-blue-800 text-xs bg-blue-50 px-2 py-1 rounded"
+                                                >
+                                                    Edit
+                                                </Link>
+                                                <button
+                                                    onClick={() =>
+                                                        handleDelete(anggota.id)
+                                                    }
+                                                    className="text-red-600 hover:text-red-800 text-xs bg-red-50 px-2 py-1 rounded"
+                                                >
+                                                    Hapus
+                                                </button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+
+                    {/* Pagination */}
+                    <div className="px-4 py-3 border-t flex items-center justify-between">
+                        <p className="text-sm text-gray-500">
+                            Menampilkan {anggotas.from} - {anggotas.to} dari{" "}
+                            {anggotas.total} data
+                        </p>
+                        <div className="flex gap-1">
+                            {anggotas.links.map((link, i) => (
+                                <Link
+                                    key={i}
+                                    href={link.url || "#"}
+                                    className={`px-3 py-1 text-sm rounded ${
+                                        link.active
+                                            ? "bg-indigo-600 text-white"
+                                            : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+                                    }`}
+                                    dangerouslySetInnerHTML={{
+                                        __html: link.label,
+                                    }}
+                                />
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </MainLayout>
+    );
+}
diff --git a/resources/js/Pages/Buku/Create.jsx b/resources/js/Pages/Buku/Create.jsx
new file mode 100644
index 0000000..fa588d2
--- /dev/null
+++ b/resources/js/Pages/Buku/Create.jsx
@@ -0,0 +1,188 @@
+import MainLayout from "@/Layouts/MainLayout";
+import { Head, useForm, Link } from "@inertiajs/react";
+
+export default function BukuCreate({ kategoris }) {
+    const { data, setData, post, processing, errors } = useForm({
+        kategori_id: "",
+        judul: "",
+        pengarang: "",
+        penerbit: "",
+        tahun_terbit: "",
+        isbn: "",
+        stok: 0,
+        sinopsis: "",
+    });
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        post("/buku");
+    };
+
+    return (
+        <MainLayout>
+            <Head title="Tambah Buku" />
+
+            <div className="max-w-2xl mx-auto">
+                <div className="flex items-center gap-2 mb-6">
+                    <Link
+                        href="/buku"
+                        className="text-indigo-600 hover:underline"
+                    >
+                        ← Kembali
+                    </Link>
+                    <span className="text-gray-400">/</span>
+                    <span className="text-gray-600">Tambah Buku</span>
+                </div>
+
+                <div className="bg-white rounded-xl shadow p-6">
+                    <h1 className="text-xl font-bold text-gray-800 mb-6">
+                        📚 Tambah Buku Baru
+                    </h1>
+
+                    <form onSubmit={handleSubmit} className="space-y-4">
+                        <FormField label="Kategori" error={errors.kategori_id}>
+                            <select
+                                value={data.kategori_id}
+                                onChange={(e) =>
+                                    setData("kategori_id", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                            >
+                                <option value="">-- Pilih Kategori --</option>
+                                {kategoris.map((k) => (
+                                    <option key={k.id} value={k.id}>
+                                        {k.nama_kategori}
+                                    </option>
+                                ))}
+                            </select>
+                        </FormField>
+
+                        <FormField label="Judul Buku" error={errors.judul}>
+                            <input
+                                type="text"
+                                value={data.judul}
+                                onChange={(e) =>
+                                    setData("judul", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                placeholder="Masukkan judul buku"
+                            />
+                        </FormField>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                label="Pengarang"
+                                error={errors.pengarang}
+                            >
+                                <input
+                                    type="text"
+                                    value={data.pengarang}
+                                    onChange={(e) =>
+                                        setData("pengarang", e.target.value)
+                                    }
+                                    className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                    placeholder="Nama pengarang"
+                                />
+                            </FormField>
+
+                            <FormField label="Penerbit" error={errors.penerbit}>
+                                <input
+                                    type="text"
+                                    value={data.penerbit}
+                                    onChange={(e) =>
+                                        setData("penerbit", e.target.value)
+                                    }
+                                    className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                    placeholder="Nama penerbit"
+                                />
+                            </FormField>
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                label="Tahun Terbit"
+                                error={errors.tahun_terbit}
+                            >
+                                <input
+                                    type="number"
+                                    value={data.tahun_terbit}
+                                    onChange={(e) =>
+                                        setData("tahun_terbit", e.target.value)
+                                    }
+                                    className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                    placeholder="2024"
+                                    min="1900"
+                                    max="2099"
+                                />
+                            </FormField>
+
+                            <FormField label="ISBN" error={errors.isbn}>
+                                <input
+                                    type="text"
+                                    value={data.isbn}
+                                    onChange={(e) =>
+                                        setData("isbn", e.target.value)
+                                    }
+                                    className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                    placeholder="978-xxx-xxx-xxx"
+                                />
+                            </FormField>
+                        </div>
+
+                        <FormField label="Stok Buku" error={errors.stok}>
+                            <input
+                                type="number"
+                                value={data.stok}
+                                onChange={(e) =>
+                                    setData("stok", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                min="0"
+                            />
+                        </FormField>
+
+                        <FormField label="Sinopsis" error={errors.sinopsis}>
+                            <textarea
+                                value={data.sinopsis}
+                                onChange={(e) =>
+                                    setData("sinopsis", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                rows={4}
+                                placeholder="Tulis sinopsis buku..."
+                            />
+                        </FormField>
+
+                        <div className="flex gap-3 pt-4">
+                            <button
+                                type="submit"
+                                disabled={processing}
+                                className="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
+                            >
+                                {processing ? "Menyimpan..." : "💾 Simpan Buku"}
+                            </button>
+                            <Link
+                                href="/buku"
+                                className="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition-colors"
+                            >
+                                Batal
+                            </Link>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </MainLayout>
+    );
+}
+
+function FormField({ label, error, children }) {
+    return (
+        <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+                {label}
+            </label>
+            {children}
+            {error && <p className="text-red-500 text-xs mt-1">{error}</p>}
+        </div>
+    );
+}
diff --git a/resources/js/Pages/Buku/Edit.jsx b/resources/js/Pages/Buku/Edit.jsx
new file mode 100644
index 0000000..9451316
--- /dev/null
+++ b/resources/js/Pages/Buku/Edit.jsx
@@ -0,0 +1,182 @@
+import MainLayout from "@/Layouts/MainLayout";
+import { Head, useForm, Link } from "@inertiajs/react";
+
+export default function BukuEdit({ buku, kategoris }) {
+    const { data, setData, put, processing, errors } = useForm({
+        kategori_id: buku.kategori_id,
+        judul: buku.judul,
+        pengarang: buku.pengarang,
+        penerbit: buku.penerbit,
+        tahun_terbit: buku.tahun_terbit,
+        isbn: buku.isbn,
+        stok: buku.stok,
+        sinopsis: buku.sinopsis ?? "",
+    });
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        put(`/buku/${buku.id}`);
+    };
+
+    return (
+        <MainLayout>
+            <Head title="Edit Buku" />
+
+            <div className="max-w-2xl mx-auto">
+                <div className="flex items-center gap-2 mb-6">
+                    <Link
+                        href="/buku"
+                        className="text-indigo-600 hover:underline"
+                    >
+                        ← Kembali
+                    </Link>
+                    <span className="text-gray-400">/</span>
+                    <span className="text-gray-600">Edit Buku</span>
+                </div>
+
+                <div className="bg-white rounded-xl shadow p-6">
+                    <h1 className="text-xl font-bold text-gray-800 mb-6">
+                        ✏️ Edit Buku
+                    </h1>
+
+                    <form onSubmit={handleSubmit} className="space-y-4">
+                        <FormField label="Kategori" error={errors.kategori_id}>
+                            <select
+                                value={data.kategori_id}
+                                onChange={(e) =>
+                                    setData("kategori_id", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                            >
+                                <option value="">-- Pilih Kategori --</option>
+                                {kategoris.map((k) => (
+                                    <option key={k.id} value={k.id}>
+                                        {k.nama_kategori}
+                                    </option>
+                                ))}
+                            </select>
+                        </FormField>
+
+                        <FormField label="Judul Buku" error={errors.judul}>
+                            <input
+                                type="text"
+                                value={data.judul}
+                                onChange={(e) =>
+                                    setData("judul", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                            />
+                        </FormField>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                label="Pengarang"
+                                error={errors.pengarang}
+                            >
+                                <input
+                                    type="text"
+                                    value={data.pengarang}
+                                    onChange={(e) =>
+                                        setData("pengarang", e.target.value)
+                                    }
+                                    className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                />
+                            </FormField>
+
+                            <FormField label="Penerbit" error={errors.penerbit}>
+                                <input
+                                    type="text"
+                                    value={data.penerbit}
+                                    onChange={(e) =>
+                                        setData("penerbit", e.target.value)
+                                    }
+                                    className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                />
+                            </FormField>
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                label="Tahun Terbit"
+                                error={errors.tahun_terbit}
+                            >
+                                <input
+                                    type="number"
+                                    value={data.tahun_terbit}
+                                    onChange={(e) =>
+                                        setData("tahun_terbit", e.target.value)
+                                    }
+                                    className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                    min="1900"
+                                    max="2099"
+                                />
+                            </FormField>
+
+                            <FormField label="ISBN" error={errors.isbn}>
+                                <input
+                                    type="text"
+                                    value={data.isbn}
+                                    onChange={(e) =>
+                                        setData("isbn", e.target.value)
+                                    }
+                                    className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                />
+                            </FormField>
+                        </div>
+
+                        <FormField label="Stok Buku" error={errors.stok}>
+                            <input
+                                type="number"
+                                value={data.stok}
+                                onChange={(e) =>
+                                    setData("stok", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                min="0"
+                            />
+                        </FormField>
+
+                        <FormField label="Sinopsis" error={errors.sinopsis}>
+                            <textarea
+                                value={data.sinopsis}
+                                onChange={(e) =>
+                                    setData("sinopsis", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                rows={4}
+                            />
+                        </FormField>
+
+                        <div className="flex gap-3 pt-4">
+                            <button
+                                type="submit"
+                                disabled={processing}
+                                className="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
+                            >
+                                {processing ? "Menyimpan..." : "💾 Update Buku"}
+                            </button>
+                            <Link
+                                href="/buku"
+                                className="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition-colors"
+                            >
+                                Batal
+                            </Link>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </MainLayout>
+    );
+}
+
+function FormField({ label, error, children }) {
+    return (
+        <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+                {label}
+            </label>
+            {children}
+            {error && <p className="text-red-500 text-xs mt-1">{error}</p>}
+        </div>
+    );
+}
diff --git a/resources/js/Pages/Buku/Index.jsx b/resources/js/Pages/Buku/Index.jsx
new file mode 100644
index 0000000..07b688c
--- /dev/null
+++ b/resources/js/Pages/Buku/Index.jsx
@@ -0,0 +1,142 @@
+import MainLayout from "@/Layouts/MainLayout";
+import { Head, Link, router } from "@inertiajs/react";
+
+export default function BukuIndex({ bukus }) {
+    const handleDelete = (id) => {
+        if (confirm("Yakin ingin menghapus buku ini?")) {
+            router.delete(`/buku/${id}`);
+        }
+    };
+
+    return (
+        <MainLayout>
+            <Head title="Data Buku" />
+
+            <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                    <h1 className="text-2xl font-bold text-gray-800">
+                        📚 Data Buku
+                    </h1>
+                    <Link
+                        href="/buku/create"
+                        className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors"
+                    >
+                        + Tambah Buku
+                    </Link>
+                </div>
+
+                <div className="bg-white rounded-xl shadow overflow-hidden">
+                    <div className="overflow-x-auto">
+                        <table className="w-full text-sm">
+                            <thead className="bg-gray-50 border-b">
+                                <tr>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        No
+                                    </th>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        Judul
+                                    </th>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        Pengarang
+                                    </th>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        Kategori
+                                    </th>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        Stok
+                                    </th>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        Tersedia
+                                    </th>
+                                    <th className="px-4 py-3 text-center text-gray-600">
+                                        Aksi
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody className="divide-y divide-gray-100">
+                                {bukus.data.map((buku, index) => (
+                                    <tr
+                                        key={buku.id}
+                                        className="hover:bg-gray-50"
+                                    >
+                                        <td className="px-4 py-3 text-gray-500">
+                                            {(bukus.current_page - 1) *
+                                                bukus.per_page +
+                                                index +
+                                                1}
+                                        </td>
+                                        <td className="px-4 py-3 font-medium">
+                                            {buku.judul}
+                                        </td>
+                                        <td className="px-4 py-3">
+                                            {buku.pengarang}
+                                        </td>
+                                        <td className="px-4 py-3">
+                                            {buku.kategori?.nama_kategori}
+                                        </td>
+                                        <td className="px-4 py-3">
+                                            {buku.stok}
+                                        </td>
+                                        <td className="px-4 py-3">
+                                            <span
+                                                className={`px-2 py-1 rounded-full text-xs font-medium ${
+                                                    buku.stok_tersedia > 0
+                                                        ? "bg-green-100 text-green-700"
+                                                        : "bg-red-100 text-red-700"
+                                                }`}
+                                            >
+                                                {buku.stok_tersedia}
+                                            </span>
+                                        </td>
+                                        <td className="px-4 py-3">
+                                            <div className="flex items-center justify-center gap-2">
+                                                <Link
+                                                    href={`/buku/${buku.id}/edit`}
+                                                    className="text-blue-600 hover:text-blue-800 text-xs bg-blue-50 px-2 py-1 rounded"
+                                                >
+                                                    Edit
+                                                </Link>
+                                                <button
+                                                    onClick={() =>
+                                                        handleDelete(buku.id)
+                                                    }
+                                                    className="text-red-600 hover:text-red-800 text-xs bg-red-50 px-2 py-1 rounded"
+                                                >
+                                                    Hapus
+                                                </button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+
+                    {/* Pagination */}
+                    <div className="px-4 py-3 border-t flex items-center justify-between">
+                        <p className="text-sm text-gray-500">
+                            Menampilkan {bukus.from} - {bukus.to} dari{" "}
+                            {bukus.total} data
+                        </p>
+                        <div className="flex gap-1">
+                            {bukus.links.map((link, i) => (
+                                <Link
+                                    key={i}
+                                    href={link.url || "#"}
+                                    className={`px-3 py-1 text-sm rounded ${
+                                        link.active
+                                            ? "bg-indigo-600 text-white"
+                                            : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+                                    }`}
+                                    dangerouslySetInnerHTML={{
+                                        __html: link.label,
+                                    }}
+                                />
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </MainLayout>
+    );
+}
diff --git a/resources/js/Pages/Dashboard.jsx b/resources/js/Pages/Dashboard.jsx
new file mode 100644
index 0000000..4799f0b
--- /dev/null
+++ b/resources/js/Pages/Dashboard.jsx
@@ -0,0 +1,133 @@
+import MainLayout from "@/Layouts/MainLayout";
+import { Head, Link } from "@inertiajs/react";
+
+export default function Dashboard({ stats, peminjaman_terbaru }) {
+    const statCards = [
+        {
+            label: "Total Buku",
+            value: stats.total_buku,
+            icon: "📚",
+            color: "bg-blue-500",
+        },
+        {
+            label: "Anggota Aktif",
+            value: stats.total_anggota,
+            icon: "👥",
+            color: "bg-green-500",
+        },
+        {
+            label: "Sedang Dipinjam",
+            value: stats.total_peminjaman,
+            icon: "📋",
+            color: "bg-yellow-500",
+        },
+        {
+            label: "Terlambat Kembali",
+            value: stats.total_terlambat,
+            icon: "⚠️",
+            color: "bg-red-500",
+        },
+    ];
+
+    return (
+        <MainLayout>
+            <Head title="Dashboard" />
+
+            <div className="space-y-6">
+                <h1 className="text-2xl font-bold text-gray-800">Dashboard</h1>
+
+                {/* Stat Cards */}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                    {statCards.map((card) => (
+                        <div
+                            key={card.label}
+                            className="bg-white rounded-xl shadow p-6 flex items-center gap-4"
+                        >
+                            <div
+                                className={`${card.color} text-white text-3xl w-14 h-14 rounded-full flex items-center justify-center`}
+                            >
+                                {card.icon}
+                            </div>
+                            <div>
+                                <p className="text-sm text-gray-500">
+                                    {card.label}
+                                </p>
+                                <p className="text-2xl font-bold text-gray-800">
+                                    {card.value}
+                                </p>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Tabel Peminjaman Terbaru */}
+                <div className="bg-white rounded-xl shadow p-6">
+                    <div className="flex items-center justify-between mb-4">
+                        <h2 className="text-lg font-semibold text-gray-700">
+                            Peminjaman Terbaru
+                        </h2>
+                        <Link
+                            href="/peminjaman"
+                            className="text-indigo-600 hover:underline text-sm"
+                        >
+                            Lihat Semua →
+                        </Link>
+                    </div>
+                    <div className="overflow-x-auto">
+                        <table className="w-full text-sm">
+                            <thead className="bg-gray-50">
+                                <tr>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        Anggota
+                                    </th>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        Buku
+                                    </th>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        Tgl Pinjam
+                                    </th>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        Status
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody className="divide-y divide-gray-100">
+                                {peminjaman_terbaru.map((p) => (
+                                    <tr key={p.id} className="hover:bg-gray-50">
+                                        <td className="px-4 py-3">
+                                            {p.anggota?.nama}
+                                        </td>
+                                        <td className="px-4 py-3">
+                                            {p.buku?.judul}
+                                        </td>
+                                        <td className="px-4 py-3">
+                                            {p.tanggal_pinjam}
+                                        </td>
+                                        <td className="px-4 py-3">
+                                            <StatusBadge status={p.status} />
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </MainLayout>
+    );
+}
+
+function StatusBadge({ status }) {
+    const colors = {
+        dipinjam: "bg-yellow-100 text-yellow-800",
+        dikembalikan: "bg-green-100 text-green-800",
+        terlambat: "bg-red-100 text-red-800",
+    };
+    return (
+        <span
+            className={`px-2 py-1 rounded-full text-xs font-medium ${colors[status]}`}
+        >
+            {status}
+        </span>
+    );
+}
diff --git a/resources/js/Pages/Kategori/Create.jsx b/resources/js/Pages/Kategori/Create.jsx
new file mode 100644
index 0000000..eda007c
--- /dev/null
+++ b/resources/js/Pages/Kategori/Create.jsx
@@ -0,0 +1,98 @@
+import MainLayout from "@/Layouts/MainLayout";
+import { Head, useForm, Link } from "@inertiajs/react";
+
+export default function KategoriCreate() {
+    const { data, setData, post, processing, errors } = useForm({
+        nama_kategori: "",
+        deskripsi: "",
+    });
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        post("/kategori");
+    };
+
+    return (
+        <MainLayout>
+            <Head title="Tambah Kategori" />
+
+            <div className="max-w-2xl mx-auto">
+                <div className="flex items-center gap-2 mb-6">
+                    <Link
+                        href="/kategori"
+                        className="text-indigo-600 hover:underline"
+                    >
+                        ← Kembali
+                    </Link>
+                    <span className="text-gray-400">/</span>
+                    <span className="text-gray-600">Tambah Kategori</span>
+                </div>
+
+                <div className="bg-white rounded-xl shadow p-6">
+                    <h1 className="text-xl font-bold text-gray-800 mb-6">
+                        🏷️ Tambah Kategori Baru
+                    </h1>
+
+                    <form onSubmit={handleSubmit} className="space-y-4">
+                        <FormField
+                            label="Nama Kategori"
+                            error={errors.nama_kategori}
+                        >
+                            <input
+                                type="text"
+                                value={data.nama_kategori}
+                                onChange={(e) =>
+                                    setData("nama_kategori", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                placeholder="Masukkan nama kategori"
+                            />
+                        </FormField>
+
+                        <FormField label="Deskripsi" error={errors.deskripsi}>
+                            <textarea
+                                value={data.deskripsi}
+                                onChange={(e) =>
+                                    setData("deskripsi", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                rows={4}
+                                placeholder="Masukkan deskripsi kategori (opsional)"
+                            />
+                        </FormField>
+
+                        <div className="flex gap-3 pt-4">
+                            <button
+                                type="submit"
+                                disabled={processing}
+                                className="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
+                            >
+                                {processing
+                                    ? "Menyimpan..."
+                                    : "💾 Simpan Kategori"}
+                            </button>
+                            <Link
+                                href="/kategori"
+                                className="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition-colors"
+                            >
+                                Batal
+                            </Link>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </MainLayout>
+    );
+}
+
+function FormField({ label, error, children }) {
+    return (
+        <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+                {label}
+            </label>
+            {children}
+            {error && <p className="text-red-500 text-xs mt-1">{error}</p>}
+        </div>
+    );
+}
diff --git a/resources/js/Pages/Kategori/Edit.jsx b/resources/js/Pages/Kategori/Edit.jsx
new file mode 100644
index 0000000..7b5fd89
--- /dev/null
+++ b/resources/js/Pages/Kategori/Edit.jsx
@@ -0,0 +1,96 @@
+import MainLayout from "@/Layouts/MainLayout";
+import { Head, useForm, Link } from "@inertiajs/react";
+
+export default function KategoriEdit({ kategori }) {
+    const { data, setData, put, processing, errors } = useForm({
+        nama_kategori: kategori.nama_kategori,
+        deskripsi: kategori.deskripsi ?? "",
+    });
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        put(`/kategori/${kategori.id}`);
+    };
+
+    return (
+        <MainLayout>
+            <Head title="Edit Kategori" />
+
+            <div className="max-w-2xl mx-auto">
+                <div className="flex items-center gap-2 mb-6">
+                    <Link
+                        href="/kategori"
+                        className="text-indigo-600 hover:underline"
+                    >
+                        ← Kembali
+                    </Link>
+                    <span className="text-gray-400">/</span>
+                    <span className="text-gray-600">Edit Kategori</span>
+                </div>
+
+                <div className="bg-white rounded-xl shadow p-6">
+                    <h1 className="text-xl font-bold text-gray-800 mb-6">
+                        ✏️ Edit Kategori
+                    </h1>
+
+                    <form onSubmit={handleSubmit} className="space-y-4">
+                        <FormField
+                            label="Nama Kategori"
+                            error={errors.nama_kategori}
+                        >
+                            <input
+                                type="text"
+                                value={data.nama_kategori}
+                                onChange={(e) =>
+                                    setData("nama_kategori", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                            />
+                        </FormField>
+
+                        <FormField label="Deskripsi" error={errors.deskripsi}>
+                            <textarea
+                                value={data.deskripsi}
+                                onChange={(e) =>
+                                    setData("deskripsi", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                rows={4}
+                            />
+                        </FormField>
+
+                        <div className="flex gap-3 pt-4">
+                            <button
+                                type="submit"
+                                disabled={processing}
+                                className="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
+                            >
+                                {processing
+                                    ? "Menyimpan..."
+                                    : "💾 Update Kategori"}
+                            </button>
+                            <Link
+                                href="/kategori"
+                                className="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition-colors"
+                            >
+                                Batal
+                            </Link>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </MainLayout>
+    );
+}
+
+function FormField({ label, error, children }) {
+    return (
+        <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+                {label}
+            </label>
+            {children}
+            {error && <p className="text-red-500 text-xs mt-1">{error}</p>}
+        </div>
+    );
+}
diff --git a/resources/js/Pages/Kategori/Index.jsx b/resources/js/Pages/Kategori/Index.jsx
new file mode 100644
index 0000000..6818907
--- /dev/null
+++ b/resources/js/Pages/Kategori/Index.jsx
@@ -0,0 +1,122 @@
+import MainLayout from "@/Layouts/MainLayout";
+import { Head, Link, router } from "@inertiajs/react";
+
+export default function KategoriIndex({ kategoris }) {
+    const handleDelete = (id) => {
+        if (confirm("Yakin ingin menghapus kategori ini?")) {
+            router.delete(`/kategori/${id}`);
+        }
+    };
+
+    return (
+        <MainLayout>
+            <Head title="Data Kategori" />
+
+            <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                    <h1 className="text-2xl font-bold text-gray-800">
+                        🏷️ Data Kategori
+                    </h1>
+                    <Link
+                        href="/kategori/create"
+                        className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors"
+                    >
+                        + Tambah Kategori
+                    </Link>
+                </div>
+
+                <div className="bg-white rounded-xl shadow overflow-hidden">
+                    <table className="w-full text-sm">
+                        <thead className="bg-gray-50 border-b">
+                            <tr>
+                                <th className="px-4 py-3 text-left text-gray-600">
+                                    No
+                                </th>
+                                <th className="px-4 py-3 text-left text-gray-600">
+                                    Nama Kategori
+                                </th>
+                                <th className="px-4 py-3 text-left text-gray-600">
+                                    Deskripsi
+                                </th>
+                                <th className="px-4 py-3 text-left text-gray-600">
+                                    Jumlah Buku
+                                </th>
+                                <th className="px-4 py-3 text-center text-gray-600">
+                                    Aksi
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody className="divide-y divide-gray-100">
+                            {kategoris.data.map((kategori, index) => (
+                                <tr
+                                    key={kategori.id}
+                                    className="hover:bg-gray-50"
+                                >
+                                    <td className="px-4 py-3 text-gray-500">
+                                        {(kategoris.current_page - 1) *
+                                            kategoris.per_page +
+                                            index +
+                                            1}
+                                    </td>
+                                    <td className="px-4 py-3 font-medium">
+                                        {kategori.nama_kategori}
+                                    </td>
+                                    <td className="px-4 py-3 text-gray-500">
+                                        {kategori.deskripsi ?? "-"}
+                                    </td>
+                                    <td className="px-4 py-3">
+                                        <span className="bg-indigo-100 text-indigo-700 px-2 py-1 rounded-full text-xs font-medium">
+                                            {kategori.bukus_count ?? 0} Buku
+                                        </span>
+                                    </td>
+                                    <td className="px-4 py-3">
+                                        <div className="flex items-center justify-center gap-2">
+                                            <Link
+                                                href={`/kategori/${kategori.id}/edit`}
+                                                className="text-blue-600 hover:text-blue-800 text-xs bg-blue-50 px-2 py-1 rounded"
+                                            >
+                                                Edit
+                                            </Link>
+                                            <button
+                                                onClick={() =>
+                                                    handleDelete(kategori.id)
+                                                }
+                                                className="text-red-600 hover:text-red-800 text-xs bg-red-50 px-2 py-1 rounded"
+                                            >
+                                                Hapus
+                                            </button>
+                                        </div>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+
+                    {/* Pagination */}
+                    <div className="px-4 py-3 border-t flex items-center justify-between">
+                        <p className="text-sm text-gray-500">
+                            Menampilkan {kategoris.from} - {kategoris.to} dari{" "}
+                            {kategoris.total} data
+                        </p>
+                        <div className="flex gap-1">
+                            {kategoris.links.map((link, i) => (
+                                <Link
+                                    key={i}
+                                    href={link.url || "#"}
+                                    className={`px-3 py-1 text-sm rounded ${
+                                        link.active
+                                            ? "bg-indigo-600 text-white"
+                                            : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+                                    }`}
+                                    dangerouslySetInnerHTML={{
+                                        __html: link.label,
+                                    }}
+                                />
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </MainLayout>
+    );
+}
diff --git a/resources/js/Pages/Peminjaman/Create.jsx b/resources/js/Pages/Peminjaman/Create.jsx
new file mode 100644
index 0000000..08df3a7
--- /dev/null
+++ b/resources/js/Pages/Peminjaman/Create.jsx
@@ -0,0 +1,156 @@
+import MainLayout from "@/Layouts/MainLayout";
+import { Head, useForm, Link } from "@inertiajs/react";
+
+export default function PeminjamanCreate({ anggotas, bukus }) {
+    const { data, setData, post, processing, errors } = useForm({
+        anggota_id: "",
+        buku_id: "",
+        tanggal_pinjam: "",
+        tanggal_kembali_rencana: "",
+        catatan: "",
+    });
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        post("/peminjaman");
+    };
+
+    return (
+        <MainLayout>
+            <Head title="Tambah Peminjaman" />
+
+            <div className="max-w-2xl mx-auto">
+                <div className="flex items-center gap-2 mb-6">
+                    <Link
+                        href="/peminjaman"
+                        className="text-indigo-600 hover:underline"
+                    >
+                        ← Kembali
+                    </Link>
+                    <span className="text-gray-400">/</span>
+                    <span className="text-gray-600">Tambah Peminjaman</span>
+                </div>
+
+                <div className="bg-white rounded-xl shadow p-6">
+                    <h1 className="text-xl font-bold text-gray-800 mb-6">
+                        📋 Tambah Peminjaman Baru
+                    </h1>
+
+                    <form onSubmit={handleSubmit} className="space-y-4">
+                        <FormField label="Anggota" error={errors.anggota_id}>
+                            <select
+                                value={data.anggota_id}
+                                onChange={(e) =>
+                                    setData("anggota_id", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                            >
+                                <option value="">-- Pilih Anggota --</option>
+                                {anggotas.map((a) => (
+                                    <option key={a.id} value={a.id}>
+                                        {a.nama}
+                                    </option>
+                                ))}
+                            </select>
+                        </FormField>
+
+                        <FormField label="Buku" error={errors.buku_id}>
+                            <select
+                                value={data.buku_id}
+                                onChange={(e) =>
+                                    setData("buku_id", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                            >
+                                <option value="">-- Pilih Buku --</option>
+                                {bukus.map((b) => (
+                                    <option key={b.id} value={b.id}>
+                                        {b.judul} (Stok: {b.stok_tersedia})
+                                    </option>
+                                ))}
+                            </select>
+                        </FormField>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                label="Tanggal Pinjam"
+                                error={errors.tanggal_pinjam}
+                            >
+                                <input
+                                    type="date"
+                                    value={data.tanggal_pinjam}
+                                    onChange={(e) =>
+                                        setData(
+                                            "tanggal_pinjam",
+                                            e.target.value,
+                                        )
+                                    }
+                                    className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                />
+                            </FormField>
+
+                            <FormField
+                                label="Rencana Kembali"
+                                error={errors.tanggal_kembali_rencana}
+                            >
+                                <input
+                                    type="date"
+                                    value={data.tanggal_kembali_rencana}
+                                    onChange={(e) =>
+                                        setData(
+                                            "tanggal_kembali_rencana",
+                                            e.target.value,
+                                        )
+                                    }
+                                    className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                />
+                            </FormField>
+                        </div>
+
+                        <FormField label="Catatan" error={errors.catatan}>
+                            <textarea
+                                value={data.catatan}
+                                onChange={(e) =>
+                                    setData("catatan", e.target.value)
+                                }
+                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
+                                rows={3}
+                                placeholder="Catatan tambahan (opsional)"
+                            />
+                        </FormField>
+
+                        <div className="flex gap-3 pt-4">
+                            <button
+                                type="submit"
+                                disabled={processing}
+                                className="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
+                            >
+                                {processing
+                                    ? "Menyimpan..."
+                                    : "💾 Simpan Peminjaman"}
+                            </button>
+                            <Link
+                                href="/peminjaman"
+                                className="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition-colors"
+                            >
+                                Batal
+                            </Link>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </MainLayout>
+    );
+}
+
+function FormField({ label, error, children }) {
+    return (
+        <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+                {label}
+            </label>
+            {children}
+            {error && <p className="text-red-500 text-xs mt-1">{error}</p>}
+        </div>
+    );
+}
diff --git a/resources/js/Pages/Peminjaman/Index.jsx b/resources/js/Pages/Peminjaman/Index.jsx
new file mode 100644
index 0000000..a878b8b
--- /dev/null
+++ b/resources/js/Pages/Peminjaman/Index.jsx
@@ -0,0 +1,161 @@
+import MainLayout from "@/Layouts/MainLayout";
+import { Head, Link, router } from "@inertiajs/react";
+
+export default function PeminjamanIndex({ peminjamans }) {
+    const handleKembalikan = (id) => {
+        if (confirm("Konfirmasi pengembalian buku ini?")) {
+            router.post(`/peminjaman/${id}/kembalikan`);
+        }
+    };
+
+    const handleDelete = (id) => {
+        if (confirm("Yakin ingin menghapus data ini?")) {
+            router.delete(`/peminjaman/${id}`);
+        }
+    };
+
+    const statusColor = {
+        dipinjam: "bg-yellow-100 text-yellow-800",
+        dikembalikan: "bg-green-100 text-green-800",
+        terlambat: "bg-red-100 text-red-800",
+    };
+
+    return (
+        <MainLayout>
+            <Head title="Data Peminjaman" />
+
+            <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                    <h1 className="text-2xl font-bold text-gray-800">
+                        📋 Data Peminjaman
+                    </h1>
+                    <Link
+                        href="/peminjaman/create"
+                        className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors"
+                    >
+                        + Tambah Peminjaman
+                    </Link>
+                </div>
+
+                <div className="bg-white rounded-xl shadow overflow-hidden">
+                    <div className="overflow-x-auto">
+                        <table className="w-full text-sm">
+                            <thead className="bg-gray-50 border-b">
+                                <tr>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        No
+                                    </th>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        Anggota
+                                    </th>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        Buku
+                                    </th>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        Tgl Pinjam
+                                    </th>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        Tgl Kembali
+                                    </th>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        Status
+                                    </th>
+                                    <th className="px-4 py-3 text-left text-gray-600">
+                                        Denda
+                                    </th>
+                                    <th className="px-4 py-3 text-center text-gray-600">
+                                        Aksi
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody className="divide-y divide-gray-100">
+                                {peminjamans.data.map((p, index) => (
+                                    <tr key={p.id} className="hover:bg-gray-50">
+                                        <td className="px-4 py-3 text-gray-500">
+                                            {(peminjamans.current_page - 1) *
+                                                peminjamans.per_page +
+                                                index +
+                                                1}
+                                        </td>
+                                        <td className="px-4 py-3 font-medium">
+                                            {p.anggota?.nama}
+                                        </td>
+                                        <td className="px-4 py-3">
+                                            {p.buku?.judul}
+                                        </td>
+                                        <td className="px-4 py-3">
+                                            {p.tanggal_pinjam}
+                                        </td>
+                                        <td className="px-4 py-3">
+                                            {p.tanggal_kembali_rencana}
+                                        </td>
+                                        <td className="px-4 py-3">
+                                            <span
+                                                className={`px-2 py-1 rounded-full text-xs font-medium ${statusColor[p.status]}`}
+                                            >
+                                                {p.status}
+                                            </span>
+                                        </td>
+                                        <td className="px-4 py-3">
+                                            {p.denda > 0
+                                                ? `Rp ${p.denda.toLocaleString("id-ID")}`
+                                                : "-"}
+                                        </td>
+                                        <td className="px-4 py-3">
+                                            <div className="flex items-center justify-center gap-2">
+                                                {p.status === "dipinjam" && (
+                                                    <button
+                                                        onClick={() =>
+                                                            handleKembalikan(
+                                                                p.id,
+                                                            )
+                                                        }
+                                                        className="text-green-600 hover:text-green-800 text-xs bg-green-50 px-2 py-1 rounded"
+                                                    >
+                                                        Kembalikan
+                                                    </button>
+                                                )}
+                                                <button
+                                                    onClick={() =>
+                                                        handleDelete(p.id)
+                                                    }
+                                                    className="text-red-600 hover:text-red-800 text-xs bg-red-50 px-2 py-1 rounded"
+                                                >
+                                                    Hapus
+                                                </button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+
+                    {/* Pagination */}
+                    <div className="px-4 py-3 border-t flex items-center justify-between">
+                        <p className="text-sm text-gray-500">
+                            Menampilkan {peminjamans.from} - {peminjamans.to}{" "}
+                            dari {peminjamans.total} data
+                        </p>
+                        <div className="flex gap-1">
+                            {peminjamans.links.map((link, i) => (
+                                <Link
+                                    key={i}
+                                    href={link.url || "#"}
+                                    className={`px-3 py-1 text-sm rounded ${
+                                        link.active
+                                            ? "bg-indigo-600 text-white"
+                                            : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+                                    }`}
+                                    dangerouslySetInnerHTML={{
+                                        __html: link.label,
+                                    }}
+                                />
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </MainLayout>
+    );
+}