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.
134 lines
5.2 KiB
JavaScript
134 lines
5.2 KiB
JavaScript
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>
|
|
);
|
|
}
|