84 lines
3.6 KiB
TypeScript
84 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Activity, Power, ZapOff, AlertTriangle } from "lucide-react";
|
|
|
|
export default function PowerMonitoringPage() {
|
|
const [rooms, setRooms] = useState<any[]>([]);
|
|
|
|
useEffect(() => {
|
|
// Simulasi Data Ruangan dari IoT
|
|
const dummyRooms = [
|
|
{ id: 1, name: "Kelas D101", power: 1250, isRelayOn: true, lastUpdate: "Baru saja" },
|
|
{ id: 2, name: "Kelas D102", power: 0, isRelayOn: false, lastUpdate: "2 mnt lalu" },
|
|
{ id: 3, name: "Kelas D103", power: 45, isRelayOn: true, lastUpdate: "Baru saja" },
|
|
{ id: 4, name: "Kelas D104", power: 0, isRelayOn: false, lastUpdate: "10 mnt lalu" },
|
|
];
|
|
setRooms(dummyRooms);
|
|
}, []);
|
|
|
|
const handleCutOff = (roomName: string) => {
|
|
if(confirm(`PERINGATAN: Anda yakin ingin mematikan daya secara paksa di ${roomName}?`)) {
|
|
alert(`Sinyal pemutusan daya dikirim ke Relay ${roomName}.`);
|
|
// Nanti di sini kamu pasang axios.post ke Golang -> MQTT -> ESP32
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="bg-blue-100 p-3 rounded-lg text-blue-600">
|
|
<Activity size={28} />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-gray-800">Power Monitoring & Control</h2>
|
|
<p className="text-gray-500 text-sm mt-1">Pantau konsumsi daya kWh meter dan kendalikan *relay* sirkuit ruangan.</p>
|
|
</div>
|
|
</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">
|
|
|
|
{/* 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
|
|
${room.isRelayOn ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}
|
|
>
|
|
{room.isRelayOn ? 'Sirkuit Aktif' : 'Sirkuit Terputus'}
|
|
</div>
|
|
|
|
<h3 className="text-lg font-bold text-gray-800 mb-4">{room.name}</h3>
|
|
|
|
<div className="flex items-end gap-2 mb-6">
|
|
<span className={`text-5xl font-black tracking-tight ${room.power > 1000 ? 'text-orange-500' : 'text-gray-800'}`}>
|
|
{room.power}
|
|
</span>
|
|
<span className="text-gray-500 font-bold mb-1.5">Watts</span>
|
|
</div>
|
|
|
|
{room.power > 1000 && (
|
|
<div className="flex items-center gap-2 text-xs font-bold text-orange-600 bg-orange-50 p-2 rounded-lg mb-4">
|
|
<AlertTriangle size={14} /> Beban Tinggi Terdeteksi!
|
|
</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>
|
|
|
|
<button
|
|
onClick={() => handleCutOff(room.name)}
|
|
disabled={!room.isRelayOn}
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition-all
|
|
${room.isRelayOn
|
|
? 'bg-red-50 text-red-600 hover:bg-red-600 hover:text-white border border-red-200 hover:border-red-600'
|
|
: 'bg-gray-100 text-gray-400 cursor-not-allowed'}`}
|
|
>
|
|
{room.isRelayOn ? <><Power size={14} /> Cut Off Power</> : <><ZapOff size={14} /> Offline</>}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |