update 15 mei

2026-05-15 18:48:59 +07:00
parent 94daad0c1f
commit 4970220a24
15 changed files with 1228 additions and 717 deletions
@@ -0,0 +1,103 @@
+"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://localhost: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://localhost: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">
+        {rooms.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>
+              <span className="text-[10px] text-gray-400 font-medium italic">ID: {room.room_id}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}