5103022014/Skripsi_Valentino_5103022014
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 16 mei urutan dan tampilan user admin

Browse Source
This commit is contained in:
[Valentino Heman Budiarto]
2026-05-16 15:30:23 +07:00
parent 4970220a24
commit 8e7f5f539b
9 changed files with 225 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/admin/approvals/page.tsx
+76 -20
View File
@@ -1,22 +1,50 @@
"use client";
import { useState, useEffect } from "react";
import { ShieldCheck, Check, X, Clock } from "lucide-react";
import axios from "axios";
import { ShieldCheck, Check, X } from "lucide-react";
export default function ApprovalsPage() {
const [activeTab, setActiveTab] = useState("Pending");
const [bookings, setBookings] = useState<any[]>([]);
// 1. FUNGSI UNTUK MENGAMBIL DATA ASLI DARI DATABASE
const fetchBookings = async () => {
try {
const token = localStorage.getItem("token");
// Mengambil dari fungsi GetAllBookings di backend
const res = await axios.get("http://localhost:8080/api/bookings", {
headers: { Authorization: `Bearer ${token}` }
});
setBookings(res.data.data);
} catch (err: any) {
console.error("Gagal mengambil data peminjaman:", err);
}
};
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" },
]);
fetchBookings();
}, []);
// 2. FUNGSI UNTUK MENGUBAH STATUS (APPROVE / REJECT)
const updateStatus = async (bookingId: string, newStatus: string) => {
try {
const token = localStorage.getItem("token");
// Mengirim UUID booking_id ke backend Golang
await axios.put(
`http://localhost:8080/api/bookings/${bookingId}/status`,
{ status: newStatus },
{ headers: { Authorization: `Bearer ${token}` } }
);
alert(`Peminjaman berhasil di-${newStatus}!`);
fetchBookings(); // Refresh tabel setelah update
} catch (err: any) {
console.error("Gagal update status:", err.response?.data || err.message);
alert("Error: " + (err.response?.data?.error || "Gagal mengubah status"));
}
};
const filteredBookings = bookings.filter(b => b.status === activeTab);
return (
@@ -56,34 +84,62 @@ export default function ApprovalsPage() {
<tr>
<th className="p-4">Peminjam</th>
<th className="p-4">Ruangan</th>
<th className="p-4">Waktu Mulai</th>
<th className="p-4">Tanggal & Waktu</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>
// Pastikan key menggunakan booking_id (UUID)
<tr key={b.booking_id} className="hover:bg-gray-50/50 transition-colors">
{/* Gunakan huruf KECIL: b.user dan b.room sesuai JSON dari Golang */}
<td className="p-4 font-bold text-gray-800 text-sm">{b.user?.full_name || "Tanpa Nama"}</td>
<td className="p-4 text-sm font-medium text-gray-600">{b.room?.name || "Ruangan Tidak Diketahui"}</td>
{/* Menampilkan Waktu Mulai sampai Waktu Selesai */}
<td className="p-4 text-sm text-gray-600">
<div className="font-bold">
{new Date(b.start_time).toLocaleTimeString('id-ID', {hour: '2-digit', minute:'2-digit'})} - {new Date(b.end_time).toLocaleTimeString('id-ID', {hour: '2-digit', minute:'2-digit'})}
</div>
<div className="text-xs text-gray-400">
{new Date(b.start_time).toLocaleDateString('id-ID')}
</div>
</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">
{/* 3. TOMBOL SETUJUI & TOLAK YANG SUDAH BERFUNGSI */}
<button
// KITA CEK SEMUA KEMUNGKINAN NAMA ID-NYA:
onClick={() => updateStatus(b.booking_id || b.BookingID || b.id, "Approved")}
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">
<button
onClick={() => updateStatus(b.booking_id || b.BookingID || b.id, "Rejected")}
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>
<div className="flex flex-col items-center gap-1">
<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>
{/* Menampilkan Redeem Code jika sudah Approved */}
{b.status === 'Approved' && b.redeem_code && (
<span className="text-[10px] text-gray-500 font-mono bg-gray-100 px-2 py-0.5 rounded">
Code: {b.redeem_code}
</span>
)}
</div>
)}
</td>
</tr>