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:
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user