From 9141b48056bb3a99756936e7d79f676e9789cbf4 Mon Sep 17 00:00:00 2001
From: "[Valentino Heman Budiarto]" <[hemanvalentino@gmail.com]>
Date: Mon, 22 Jun 2026 16:19:20 +0700
Subject: [PATCH] .

---
 frontend/app/admin/page.tsx | 88 +++++++++++++++++++++++++------------
 1 file changed, 60 insertions(+), 28 deletions(-)

diff --git a/frontend/app/admin/page.tsx b/frontend/app/admin/page.tsx
index 94c8d93..97c4921 100644
--- a/frontend/app/admin/page.tsx
+++ b/frontend/app/admin/page.tsx
@@ -8,37 +8,59 @@ export default function AdminDashboard() {
   const [pendingBookings, setPendingBookings] = useState<any[]>([]);
   const [roomStats, setRoomStats] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
+  
+  // STATE BARU: Penampung total daya asli khusus Kelas D101
+  const [d101Power, setD101Power] = useState<number>(0);
 
   useEffect(() => {
     fetchAdminData();
-    // Refresh data konsumsi daya setiap 10 detik agar terlihat real-time
-    const interval = setInterval(fetchAdminData, 10000);
-    return () => clearInterval(interval);
+    fetchD101Power(); // Panggil fungsi daya saat pertama kali render
+    
+    // Refresh data ruangan setiap 10 detik
+    const intervalAdmin = setInterval(fetchAdminData, 10000);
+    // Refresh data konsumsi daya D101 lebih cepat (tiap 5 detik) agar sangat responsif
+    const intervalPower = setInterval(fetchD101Power, 5000); 
+    
+    return () => {
+      clearInterval(intervalAdmin);
+      clearInterval(intervalPower);
+    };
   }, []);
 
+  // FUNGSI BARU: Mengambil data asli dari Smart Meter via Golang API
+  const fetchD101Power = async () => {
+    try {
+      const res = await axios.get("http://172.17.172.17:8080/api/power-status");
+      // Kalkulasi total seluruh alat (Lampu/Proyektor + AC 1 + AC 2)
+      const totalWatt = (res.data.umum || 0) + (res.data.ac1 || 0) + (res.data.ac2 || 0);
+      setD101Power(parseFloat(totalWatt.toFixed(1)));
+    } catch (err) {
+      console.error("Gagal mengambil data daya aktual D101", err);
+    }
+  };
+
   const fetchAdminData = async () => {
     try {
       const token = localStorage.getItem("token");
       
-      // 1. Ambil SEMUA booking pakai endpoint yang sudah ada, lalu filter di Frontend
+      // 1. Ambil SEMUA booking
       const bookRes = await axios.get("http://172.17.172.17:8080/api/bookings", { 
         headers: { Authorization: `Bearer ${token}` } 
       });
       
       const allBookings = bookRes.data.data || [];
-      // Saring hanya yang statusnya "Pending" atau kosong
       const pendingOnly = allBookings.filter((b: any) => b.status === "Pending" || !b.status);
       setPendingBookings(pendingOnly);
 
-      // 2. Ambil daftar ruangan biasa, lalu kita sisipkan "Dummy Power" untuk UI
+      // 2. Ambil daftar ruangan
       const roomRes = await axios.get("http://172.17.172.17:8080/api/rooms", { 
         headers: { Authorization: `Bearer ${token}` } 
       });
       
       const roomsWithDummyPower = (roomRes.data.data || []).map((room: any) => ({
         ...room,
-        // Simulasi daya acak antara 0 sampai 15 Watt untuk keperluan UI
-        power_consumption: Math.floor(Math.random() * 15) 
+        // Berikan simulasi dummy HANYA untuk ruangan SELAIN D101
+        power_consumption: room.name === "Kelas D101" ? 0 : Math.floor(Math.random() * 15) 
       }));
       setRoomStats(roomsWithDummyPower);
 
@@ -49,17 +71,15 @@ export default function AdminDashboard() {
     }
   };
 
-  // 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
       await axios.put(`http://172.17.172.17:8080/api/bookings/${id}/status`, 
         { status: status }, 
         { headers: { Authorization: `Bearer ${token}` } }
       );
       alert(`Permintaan berhasil di-${status}`);
-      fetchAdminData(); // Refresh data setelah aksi
+      fetchAdminData(); 
     } catch (err: any) {
       console.error(err);
       alert("Gagal memproses pendaftaran.");
@@ -76,22 +96,37 @@ export default function AdminDashboard() {
           <Activity className="text-blue-500" /> Real-time Room Energy
         </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          {/* TAMBAHKAN PENGURUTAN ABJAD DI SINI */}
           {[...roomStats]
             .sort((a, b) => a.name.localeCompare(b.name))
-            .map((room) => (
-            <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'}`} />
-              </div>
-              <div className="flex items-end gap-2">
-                <span className="text-3xl font-black text-gray-800">{room.power_consumption || 0}</span>
-                <span className="text-gray-500 font-bold mb-1">Watts</span>
-              </div>
-              <p className="text-[10px] text-gray-400 mt-2 font-medium">Last updated: Just now</p>
-            </div>
-          ))}
+            .map((room) => {
+              // LOGIKA INJEKSI DATA ASLI: Cek apakah kelas ini adalah D101
+              const isD101 = room.name === "Kelas D101";
+              const displayedPower = isD101 ? d101Power : room.power_consumption;
+              const isPowerActive = displayedPower > 0;
+
+              return (
+                <div key={room.room_id} 
+                  className={`bg-white p-5 rounded-xl border shadow-sm transition-all
+                  ${isD101 ? 'border-blue-200 border-l-4 border-l-blue-500 bg-blue-50/10' : 'border-gray-100'}`}>
+                  
+                  <div className="flex justify-between items-start mb-3">
+                    <span className={`text-sm font-bold uppercase tracking-tight ${isD101 ? 'text-blue-700' : 'text-gray-400'}`}>
+                      {room.name} {isD101 && <span className="ml-1 text-[9px] bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">SENSOR ASLI</span>}
+                    </span>
+                    <div className={`h-3 w-3 rounded-full ${isPowerActive ? (isD101 ? 'bg-green-500 animate-pulse' : 'bg-orange-500 animate-pulse') : 'bg-gray-300'}`} />
+                  </div>
+                  
+                  <div className="flex items-end gap-2">
+                    <span className={`text-3xl font-black ${isD101 ? 'text-blue-700' : 'text-gray-800'}`}>
+                      {displayedPower}
+                    </span>
+                    <span className="text-gray-500 font-bold mb-1">Watts</span>
+                  </div>
+                  
+                  <p className="text-[10px] text-gray-400 mt-2 font-medium">Last updated: Just now</p>
+                </div>
+              );
+          })}
         </div>
       </div>
 
@@ -116,12 +151,10 @@ export default function AdminDashboard() {
             </thead>
             <tbody className="divide-y divide-gray-50">
               {pendingBookings.map((b) => (
-                // 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'})}
@@ -134,7 +167,6 @@ export default function AdminDashboard() {
                   <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">
-                      {/* 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"