105 lines
4.3 KiB
TypeScript
105 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import axios from "axios";
|
|
import { Settings2, RefreshCcw, AlertCircle, CheckCircle2 } from "lucide-react";
|
|
|
|
export default function ManageRoomsPage() {
|
|
const [rooms, setRooms] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const fetchRooms = async () => {
|
|
try {
|
|
const token = localStorage.getItem("token");
|
|
const res = await axios.get("http://172.17.110.6:8080/api/rooms", {
|
|
headers: { Authorization: `Bearer ${token}` }
|
|
});
|
|
setRooms(res.data.data);
|
|
} catch (err: any) {
|
|
console.error("Error Detail:", err.response?.data || err.message);
|
|
alert("Error dari Server saat ambil ruangan: " + (err.response?.data?.error || err.message));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchRooms();
|
|
}, []);
|
|
|
|
// FUNGSI UTAMA: Mengubah status ruangan (Available <-> Maintenance)
|
|
const toggleRoomStatus = async (roomId: number, currentStatus: string) => {
|
|
const newStatus = currentStatus === "Available" ? "Maintenance" : "Available";
|
|
|
|
try {
|
|
const token = localStorage.getItem("token");
|
|
await axios.put(`http://172.17.110.6:8080/api/admin/rooms/${roomId}/status`,
|
|
{ status: newStatus },
|
|
{ headers: { Authorization: `Bearer ${token}` } }
|
|
);
|
|
|
|
alert(`Status Ruangan berhasil diubah menjadi ${newStatus}`);
|
|
fetchRooms(); // Refresh data agar UI terupdate
|
|
} catch (err: any) {
|
|
console.error("Gagal update:", err.response?.data || err.message);
|
|
alert("Gagal memperbarui status ruangan: " + (err.response?.data?.error || err.message));
|
|
}
|
|
};
|
|
|
|
if (loading) return <div className="p-8 text-gray-500 font-medium text-center">Menghubungkan ke Database S-CLASS...</div>;
|
|
|
|
return (
|
|
<div className="max-w-5xl mx-auto space-y-6">
|
|
<div className="flex items-center justify-between mb-8">
|
|
<div className="flex items-center gap-3">
|
|
<div className="bg-blue-100 p-3 rounded-lg text-blue-600">
|
|
<Settings2 size={28} />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-gray-800">Manajemen Ruangan</h2>
|
|
<p className="text-gray-500 text-sm mt-1">Atur ketersediaan operasional setiap ruangan di Gedung D.</p>
|
|
</div>
|
|
</div>
|
|
<button onClick={fetchRooms} className="p-2 text-gray-400 hover:text-blue-600 transition-colors">
|
|
<RefreshCcw size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{/* 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'}`}>
|
|
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-2 text-gray-400 text-xs font-bold uppercase tracking-wider">
|
|
{room.category} • {room.floor}
|
|
</div>
|
|
<h3 className="text-xl font-bold text-gray-800">{room.name}</h3>
|
|
|
|
<div className={`flex items-center gap-1.5 text-sm font-bold mt-2
|
|
${room.status === 'Available' ? 'text-green-600' : 'text-orange-600'}`}>
|
|
{room.status === 'Available' ? <CheckCircle2 size={16} /> : <AlertCircle size={16} />}
|
|
{room.status}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-end gap-3">
|
|
<button
|
|
onClick={() => toggleRoomStatus(room.room_id, room.status)}
|
|
className={`px-4 py-2 rounded-xl text-xs font-bold transition-all shadow-sm
|
|
${room.status === 'Available'
|
|
? 'bg-orange-100 text-orange-700 hover:bg-orange-600 hover:text-white'
|
|
: 'bg-green-100 text-green-700 hover:bg-green-600 hover:text-white'}`}
|
|
>
|
|
Set to {room.status === 'Available' ? 'Maintenance' : 'Available'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |