update 16 mei urutan dan tampilan user admin
This commit is contained in:
[Valentino Heman Budiarto]
@@ -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>
|
||||
|
||||
+30
-12
@@ -49,7 +49,8 @@ export default function AdminDashboard() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleAction = async (id: number, status: string) => {
|
||||
// PERBAIKAN 1: Ubah tipe id menjadi 'string' karena kita menggunakan UUID
|
||||
const handleAction = async (id: string, status: string) => {
|
||||
try {
|
||||
const token = localStorage.getItem("token");
|
||||
// Mengirim status 'Approved' atau 'Rejected' ke backend
|
||||
@@ -59,7 +60,8 @@ const handleAction = async (id: number, status: string) => {
|
||||
);
|
||||
alert(`Permintaan berhasil di-${status}`);
|
||||
fetchAdminData(); // Refresh data setelah aksi
|
||||
} catch (err) {
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
alert("Gagal memproses pendaftaran.");
|
||||
}
|
||||
};
|
||||
@@ -75,7 +77,7 @@ const handleAction = async (id: number, status: string) => {
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{roomStats.map((room) => (
|
||||
<div key={room.id} className="bg-white p-5 rounded-xl border border-gray-100 shadow-sm">
|
||||
<div key={room.room_id} className="bg-white p-5 rounded-xl border border-gray-100 shadow-sm">
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<span className="text-sm font-bold text-gray-400 uppercase tracking-tight">{room.name}</span>
|
||||
<div className={`h-3 w-3 rounded-full ${room.power_consumption > 5 ? 'bg-orange-500 animate-pulse' : 'bg-gray-300'}`} />
|
||||
@@ -104,26 +106,42 @@ const handleAction = async (id: number, status: string) => {
|
||||
<tr>
|
||||
<th className="p-4">Peminjam</th>
|
||||
<th className="p-4">Ruangan</th>
|
||||
<th className="p-4">Waktu</th>
|
||||
<th className="p-4">Tanggal & Waktu</th>
|
||||
<th className="p-4">Keperluan</th>
|
||||
<th className="p-4 text-center">Tindakan</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-50">
|
||||
{pendingBookings.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-xs text-gray-500 leading-relaxed">
|
||||
{new Date(b.start_time).toLocaleString('id-ID')}
|
||||
// PERBAIKAN 2: Gunakan booking_id sebagai key
|
||||
<tr key={b.booking_id} className="hover:bg-gray-50/50 transition-colors">
|
||||
<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>
|
||||
|
||||
{/* PERBAIKAN 3: Format Waktu Mulai dan Selesai yang Rapi */}
|
||||
<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 truncate max-w-37.5">{b.purpose}</td>
|
||||
|
||||
<td className="p-4 text-sm text-gray-600 truncate max-w-60">{b.purpose}</td>
|
||||
<td className="p-4">
|
||||
<div className="flex justify-center gap-2">
|
||||
<button onClick={() => handleAction(b.id, 'Approved')} className="p-2 bg-green-50 text-green-600 rounded-lg hover:bg-green-100 transition-colors">
|
||||
{/* PERBAIKAN 4: Gunakan b.booking_id di fungsi onClick */}
|
||||
<button
|
||||
onClick={() => handleAction(b.booking_id, 'Approved')}
|
||||
className="p-2 bg-green-50 text-green-600 rounded-lg hover:bg-green-100 transition-colors"
|
||||
>
|
||||
<Check size={18} />
|
||||
</button>
|
||||
<button onClick={() => handleAction(b.id, 'Rejected')} className="p-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors">
|
||||
<button
|
||||
onClick={() => handleAction(b.booking_id, 'Rejected')}
|
||||
className="p-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -66,7 +66,10 @@ export default function ManageRoomsPage() {
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{rooms.map((room) => (
|
||||
{/* TAMBAHKAN [...rooms].sort(...) SEBELUM .map */}
|
||||
{[...rooms]
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((room) => (
|
||||
<div key={room.room_id} className={`bg-white p-6 rounded-2xl border transition-all shadow-sm flex items-center justify-between
|
||||
${room.status === 'Maintenance' ? 'border-orange-200 bg-orange-50/20' : 'border-gray-100'}`}>
|
||||
|
||||
@@ -93,7 +96,6 @@ export default function ManageRoomsPage() {
|
||||
>
|
||||
Set to {room.status === 'Available' ? 'Maintenance' : 'Available'}
|
||||
</button>
|
||||
<span className="text-[10px] text-gray-400 font-medium italic">ID: {room.room_id}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -171,13 +171,17 @@ export default function CalendarViewPage() {
|
||||
|
||||
{/* BODY TABEL: Sumbu Y (Ruangan) */}
|
||||
<tbody>
|
||||
{rooms.map((room) => (
|
||||
<tr key={room.room_id} className="hover:bg-blue-50/30 transition-colors">
|
||||
|
||||
<td className="sticky left-0 z-10 bg-white border-b border-r border-gray-200 p-4 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] group-hover:bg-blue-50/30 transition-colors">
|
||||
<div className="font-bold text-gray-800">{room.name}</div>
|
||||
<div className="text-xs text-gray-500">{room.category}</div>
|
||||
</td>
|
||||
{/* --- DAFTAR RUANGAN YANG SUDAH DIURUTKAN --- */}
|
||||
{[...rooms]
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((room) => (
|
||||
<tr key={room.room_id} className="hover:bg-blue-50/30 transition-colors">
|
||||
<td className="sticky left-0 z-10 bg-white border-b border-r border-gray-200 p-4 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] group-hover:bg-blue-50/30 transition-colors">
|
||||
<div className="font-bold text-gray-800">{room.name}</div>
|
||||
<div className="text-xs text-gray-500">{room.category}</div>
|
||||
</td>
|
||||
|
||||
{/* (Kodingan untuk kolom hari dan jadwal peminjamanmu biarkan tetap berada di bawah sini) */}
|
||||
|
||||
{weekDates.map((date, idx) => {
|
||||
const dailyBookings = getBookingsForCell(room.room_id, date);
|
||||
@@ -186,23 +190,32 @@ export default function CalendarViewPage() {
|
||||
<td key={idx} className="border-b border-gray-100 border-r border-r-gray-50 p-2 align-top">
|
||||
{dailyBookings.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{dailyBookings.map((b, i) => (
|
||||
<div key={i} className={`border rounded-md p-2 shadow-sm border-l-4
|
||||
{dailyBookings
|
||||
// 1. FILTER: Hanya tampilkan yang Pending atau Approved
|
||||
.filter((b) => b.status === "Pending" || b.status === "Approved")
|
||||
// 2. SORT: Urutkan berdasarkan waktu mulai (dari pagi ke malam)
|
||||
.sort((a, b) => new Date(a.start_time).getTime() - new Date(b.start_time).getTime())
|
||||
// 3. MAP: Render ke layar
|
||||
.map((b) => (
|
||||
<div
|
||||
key={b.booking_id}
|
||||
className={`border rounded-md p-2 shadow-sm border-l-4
|
||||
${b.status === 'Approved' ? 'bg-green-50 border-green-200 border-l-green-500' :
|
||||
b.status === 'Pending' ? 'bg-yellow-50 border-yellow-200 border-l-yellow-500' :
|
||||
'bg-blue-50 border-blue-200 border-l-blue-500'}`}>
|
||||
<p className="text-xs font-bold text-gray-800 truncate" title={b.purpose}>
|
||||
{b.purpose}
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-1 text-[10px] text-gray-600 font-semibold mt-1">
|
||||
<Clock size={10} />
|
||||
{formatTime(b.start_time)} - {formatTime(b.end_time)}
|
||||
<span className="ml-auto text-[9px] uppercase bg-white/60 px-1 rounded border border-gray-100">
|
||||
{b.status || 'Pending'}
|
||||
</span>
|
||||
</div>
|
||||
'bg-blue-50 border-blue-200 border-l-blue-500'}`}
|
||||
>
|
||||
<p className="text-xs font-bold text-gray-800 truncate" title={b.purpose}>
|
||||
{b.purpose}
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-1 text-[10px] text-gray-600 font-semibold mt-1">
|
||||
<Clock size={10} />
|
||||
{formatTime(b.start_time)} - {formatTime(b.end_time)}
|
||||
<span className="ml-auto text-[9px] uppercase bg-white/60 px-1 rounded border border-gray-100">
|
||||
{b.status || 'Pending'}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full w-full min-h-10 flex items-center justify-center text-gray-300 text-xs">
|
||||
|
||||
@@ -121,7 +121,10 @@ export default function Dashboard() {
|
||||
|
||||
{/* Grid Daftar Kelas */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{rooms.map((room) => (
|
||||
{/* TAMBAHKAN PENGURUTAN ABJAD DI SINI */}
|
||||
{[...rooms]
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((room) => (
|
||||
<div key={room.room_id} className="bg-white rounded-xl shadow-sm border border-gray-100 p-5 flex flex-col justify-between hover:shadow-md transition-shadow">
|
||||
<div>
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
@@ -130,7 +133,6 @@ export default function Dashboard() {
|
||||
}`}>
|
||||
{room.status}
|
||||
</span>
|
||||
<span className="text-gray-400 text-xs font-medium">{room.category}</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-1">{room.name}</h3>
|
||||
<div className="space-y-2 text-sm text-gray-600 mt-4">
|
||||
|
||||
Reference in New Issue
Block a user