ubah tampilan monitorin admin
This commit is contained in:
[Valentino Heman Budiarto]
parent
8e7f5f539b
commit
e6f5c4df06
@ -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) => (
|
||||
<div key={room.id} className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm relative overflow-hidden">
|
||||
{/* SUDAH DITAMBAHKAN PENGURUTAN ABJAD AGAR RAPI */}
|
||||
{[...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>
|
||||
|
||||
|
||||
@ -75,8 +75,11 @@ export default function AdminDashboard() {
|
||||
<h2 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
|
||||
<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) => (
|
||||
<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>
|
||||
|
||||
@ -167,7 +167,7 @@ export default function CalendarViewPage() {
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
</thead>
|
||||
|
||||
{/* BODY TABEL: Sumbu Y (Ruangan) */}
|
||||
<tbody>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user