ubah tampilan monitorin admin

frontend/app/admin/monitoring/page.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Activity, Power, ZapOff, AlertTriangle } from "lucide-react";
+// 1. IMPORT IKON BARU DI SINI
+import { Activity, Power, ZapOff, AlertTriangle, Lightbulb, Wind, Projector } from "lucide-react";
 
 export default function PowerMonitoringPage() {
   const [rooms, setRooms] = useState<any[]>([]);
@@ -19,11 +20,17 @@ export default function PowerMonitoringPage() {
 
   const handleCutOff = (roomName: string) => {
     if(confirm(`PERINGATAN: Anda yakin ingin mematikan daya secara paksa di ${roomName}?`)) {
-      alert(`Sinyal pemutusan daya dikirim ke Relay ${roomName}.`);
+      alert(`Sinyal pemutusan daya dikirim ke Relay Master ${roomName}.`);
       // Nanti di sini kamu pasang axios.post ke Golang -> MQTT -> ESP32
     }
   };
 
+  // 2. FUNGSI BARU UNTUK KONTROL PERANGKAT SPESIFIK
+  const handleDeviceToggle = (roomName: string, deviceName: string) => {
+    alert(`Mengirim sinyal IoT untuk menyalakan/mematikan [${deviceName}] di [${roomName}]...`);
+    // Nanti ganti dengan axios.put(`http://localhost:8080/api/rooms/.../device`, { device: deviceName })
+  };
+
   return (
     <div className="space-y-6">
       <div className="flex items-center gap-3 mb-6">
@@ -37,8 +44,11 @@ export default function PowerMonitoringPage() {
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
-        {rooms.map((room) => (
+        {/* SUDAH DITAMBAHKAN PENGURUTAN ABJAD AGAR RAPI */}
-          <div key={room.id} className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm relative overflow-hidden">
+        {[...rooms]
+          .sort((a, b) => a.name.localeCompare(b.name))
+          .map((room) => (
+          <div key={room.id} className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm relative overflow-hidden flex flex-col">
             
             {/* Indikator Status di Pojok Kanan Atas */}
             <div className={`absolute top-0 right-0 px-4 py-1.5 text-[10px] font-black uppercase tracking-wider rounded-bl-xl
@@ -62,6 +72,48 @@ export default function PowerMonitoringPage() {
               </div>
             )}
 
+            {/* 3. PANEL KONTROL IoT BARU */}
+            <div className="mt-2 mb-6 pt-4 border-t border-gray-100">
+              <p className="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-3">IoT Device Control</p>
+              <div className="grid grid-cols-2 gap-2">
+                <button 
+                  onClick={() => handleDeviceToggle(room.name, 'Lampu 1')} 
+                  disabled={!room.isRelayOn}
+                  className="flex justify-center items-center gap-2 p-2 bg-blue-50 text-blue-600 rounded-lg text-xs font-bold hover:bg-blue-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <Lightbulb size={14} /> Lampu 1
+                </button>
+                <button 
+                  onClick={() => handleDeviceToggle(room.name, 'Lampu 2')} 
+                  disabled={!room.isRelayOn}
+                  className="flex justify-center items-center gap-2 p-2 bg-gray-50 text-gray-600 rounded-lg text-xs font-bold hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <Lightbulb size={14} /> Lampu 2
+                </button>
+                <button 
+                  onClick={() => handleDeviceToggle(room.name, 'AC 1')} 
+                  disabled={!room.isRelayOn}
+                  className="flex justify-center items-center gap-2 p-2 bg-gray-50 text-gray-600 rounded-lg text-xs font-bold hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <Wind size={14} /> AC 1
+                </button>
+                <button 
+                  onClick={() => handleDeviceToggle(room.name, 'AC 2')} 
+                  disabled={!room.isRelayOn}
+                  className="flex justify-center items-center gap-2 p-2 bg-gray-50 text-gray-600 rounded-lg text-xs font-bold hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <Wind size={14} /> AC 2
+                </button>
+                <button 
+                  onClick={() => handleDeviceToggle(room.name, 'Proyektor')} 
+                  disabled={!room.isRelayOn}
+                  className="col-span-2 flex justify-center items-center gap-2 p-2 bg-purple-50 text-purple-600 rounded-lg text-xs font-bold hover:bg-purple-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <Projector size={14} /> Proyektor
+                </button>
+              </div>
+            </div>
+
             <div className="flex items-center justify-between mt-auto pt-4 border-t border-gray-100">
               <span className="text-xs text-gray-400 font-medium">Update: {room.lastUpdate}</span>
               

frontend/app/admin/page.tsx

@@ -76,7 +76,10 @@ 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">
-          {roomStats.map((room) => (
+          {/* 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>