.
This commit is contained in:
[Valentino Heman Budiarto]
parent
4d6e825f16
commit
9141b48056
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user