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/Anggota/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 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>
);
}