100 lines
4.5 KiB
TypeScript
100 lines
4.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { ShieldCheck, Check, X, Clock } from "lucide-react";
|
|
|
|
export default function ApprovalsPage() {
|
|
const [activeTab, setActiveTab] = useState("Pending");
|
|
const [bookings, setBookings] = useState<any[]>([]);
|
|
|
|
useEffect(() => {
|
|
// Data Dummy Sementara
|
|
setBookings([
|
|
{ id: 1, user: { full_name: "Andreas Budi" }, room: { name: "Kelas D101" }, start_time: new Date().toISOString(), purpose: "Rapat Evaluasi BEM", status: "Pending" },
|
|
{ id: 2, user: { full_name: "Siska Saraswati" }, room: { name: "Kelas D105" }, start_time: new Date().toISOString(), purpose: "Sidang Skripsi", status: "Pending" },
|
|
{ id: 3, user: { full_name: "Bima Arya" }, room: { name: "Kelas D102" }, start_time: new Date().toISOString(), purpose: "Kelas Pengganti", status: "Approved" },
|
|
{ id: 4, user: { full_name: "Citra Kirana" }, room: { name: "Kelas D104" }, start_time: new Date().toISOString(), purpose: "Latihan Band", status: "Rejected" },
|
|
]);
|
|
}, []);
|
|
|
|
const filteredBookings = bookings.filter(b => b.status === activeTab);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="bg-blue-100 p-3 rounded-lg text-blue-600">
|
|
<ShieldCheck size={28} />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-gray-800">Manajemen Persetujuan</h2>
|
|
<p className="text-gray-500 text-sm mt-1">Kelola permohonan peminjaman ruangan S-CLASS.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* TABS */}
|
|
<div className="flex gap-4 border-b border-gray-200">
|
|
{["Pending", "Approved", "Rejected"].map((tab) => (
|
|
<button
|
|
key={tab}
|
|
onClick={() => setActiveTab(tab)}
|
|
className={`pb-3 px-4 font-bold text-sm transition-all ${
|
|
activeTab === tab
|
|
? "border-b-2 border-blue-600 text-blue-600"
|
|
: "text-gray-400 hover:text-gray-600"
|
|
}`}
|
|
>
|
|
{tab}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* TABEL */}
|
|
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left">
|
|
<thead className="bg-gray-50 text-gray-500 text-xs font-bold uppercase">
|
|
<tr>
|
|
<th className="p-4">Peminjam</th>
|
|
<th className="p-4">Ruangan</th>
|
|
<th className="p-4">Waktu Mulai</th>
|
|
<th className="p-4">Keperluan</th>
|
|
<th className="p-4 text-center">Status / Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-50">
|
|
{filteredBookings.map((b) => (
|
|
<tr key={b.id} className="hover:bg-gray-50/50 transition-colors">
|
|
<td className="p-4 font-bold text-gray-800 text-sm">{b.user?.full_name}</td>
|
|
<td className="p-4 text-sm font-medium text-gray-600">{b.room?.name}</td>
|
|
<td className="p-4 text-sm text-gray-600">{new Date(b.start_time).toLocaleString('id-ID')}</td>
|
|
<td className="p-4 text-sm text-gray-600">{b.purpose}</td>
|
|
<td className="p-4 text-center">
|
|
{b.status === "Pending" ? (
|
|
<div className="flex justify-center gap-2">
|
|
<button className="flex items-center gap-1 px-3 py-1.5 bg-green-50 text-green-600 font-bold text-xs rounded-lg hover:bg-green-100 transition-colors">
|
|
<Check size={14} /> Setujui
|
|
</button>
|
|
<button className="flex items-center gap-1 px-3 py-1.5 bg-red-50 text-red-600 font-bold text-xs rounded-lg hover:bg-red-100 transition-colors">
|
|
<X size={14} /> Tolak
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<span className={`px-3 py-1 rounded-full text-xs font-bold ${
|
|
b.status === 'Approved' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'
|
|
}`}>
|
|
{b.status}
|
|
</span>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
{filteredBookings.length === 0 && (
|
|
<tr><td colSpan={5} className="p-8 text-center text-gray-400 font-medium">Tidak ada data di kategori ini.</td></tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |