rahmatrafli1/perpustakaanku
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add CRUD functionality for books, categories, and loans

Browse Source 
- 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:
Rahmat Rafli
2026-03-17 22:05:20 +07:00
parent 48a731703a
commit 5f00a0dbf1
13 changed files with 1813 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
resources/js/Pages/Buku/Index.jsx Normal file
View 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>
);
}