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.
This commit is contained in:
81
resources/js/Layouts/MainLayout.jsx
Normal file
81
resources/js/Layouts/MainLayout.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
158
resources/js/Pages/Anggota/Create.jsx
Normal file
158
resources/js/Pages/Anggota/Create.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
154
resources/js/Pages/Anggota/Edit.jsx
Normal file
154
resources/js/Pages/Anggota/Edit.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
142
resources/js/Pages/Anggota/Index.jsx
Normal file
142
resources/js/Pages/Anggota/Index.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
188
resources/js/Pages/Buku/Create.jsx
Normal file
188
resources/js/Pages/Buku/Create.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
182
resources/js/Pages/Buku/Edit.jsx
Normal file
182
resources/js/Pages/Buku/Edit.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
142
resources/js/Pages/Buku/Index.jsx
Normal file
142
resources/js/Pages/Buku/Index.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
133
resources/js/Pages/Dashboard.jsx
Normal file
133
resources/js/Pages/Dashboard.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
98
resources/js/Pages/Kategori/Create.jsx
Normal file
98
resources/js/Pages/Kategori/Create.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
96
resources/js/Pages/Kategori/Edit.jsx
Normal file
96
resources/js/Pages/Kategori/Edit.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
122
resources/js/Pages/Kategori/Index.jsx
Normal file
122
resources/js/Pages/Kategori/Index.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
156
resources/js/Pages/Peminjaman/Create.jsx
Normal file
156
resources/js/Pages/Peminjaman/Create.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
161
resources/js/Pages/Peminjaman/Index.jsx
Normal file
161
resources/js/Pages/Peminjaman/Index.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user