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:
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