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

133
resources/js/Pages/Dashboard.jsx Normal file
View File

@@ -0,0 +1,133 @@
import MainLayout from "@/Layouts/MainLayout";
import { Head, Link } from "@inertiajs/react";
export default function Dashboard({ stats, peminjaman_terbaru }) {
const statCards = [
{
label: "Total Buku",
value: stats.total_buku,
icon: "📚",
color: "bg-blue-500",
},
{
label: "Anggota Aktif",
value: stats.total_anggota,
icon: "👥",
color: "bg-green-500",
},
{
label: "Sedang Dipinjam",
value: stats.total_peminjaman,
icon: "📋",
color: "bg-yellow-500",
},
{
label: "Terlambat Kembali",
value: stats.total_terlambat,
icon: "⚠️",
color: "bg-red-500",
},
];
return (
<MainLayout>
<Head title="Dashboard" />
<div className="space-y-6">
<h1 className="text-2xl font-bold text-gray-800">Dashboard</h1>
{/* Stat Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{statCards.map((card) => (
<div
key={card.label}
className="bg-white rounded-xl shadow p-6 flex items-center gap-4"
>
<div
className={`${card.color} text-white text-3xl w-14 h-14 rounded-full flex items-center justify-center`}
>
{card.icon}
</div>
<div>
<p className="text-sm text-gray-500">
{card.label}
</p>
<p className="text-2xl font-bold text-gray-800">
{card.value}
</p>
</div>
</div>
))}
</div>
{/* Tabel Peminjaman Terbaru */}
<div className="bg-white rounded-xl shadow p-6">
<div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-semibold text-gray-700">
Peminjaman Terbaru
</h2>
<Link
href="/peminjaman"
className="text-indigo-600 hover:underline text-sm"
>
Lihat Semua →
</Link>
</div>
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead className="bg-gray-50">
<tr>
<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">
Status
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-100">
{peminjaman_terbaru.map((p) => (
<tr key={p.id} className="hover:bg-gray-50">
<td className="px-4 py-3">
{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">
<StatusBadge status={p.status} />
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</MainLayout>
);
}
function StatusBadge({ status }) {
const colors = {
dipinjam: "bg-yellow-100 text-yellow-800",
dikembalikan: "bg-green-100 text-green-800",
terlambat: "bg-red-100 text-red-800",
};
return (
<span
className={`px-2 py-1 rounded-full text-xs font-medium ${colors[status]}`}
>
{status}
</span>
);
}