rahmatrafli1
5f00a0dbf1
- 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.
143 lines
7.2 KiB
JavaScript
143 lines
7.2 KiB
JavaScript
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>
|
|
);
|
|
}
|