59 lines
1.7 KiB
JavaScript
59 lines
1.7 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import KPIBar from "./components/KPIBar";
|
|
import RoomGrid from "./components/RoomGrid";
|
|
import RoomDetailModal from "./components/RoomDetailModal";
|
|
import { getRoomsWithStatus, getDashboardKPIs, updateRoomStatus } from "../../services/roomService";
|
|
|
|
export default function RoomDashboard() {
|
|
const { t } = useTranslation();
|
|
const [rooms, setRooms] = useState([]);
|
|
const [kpis, setKpis] = useState({});
|
|
const [selectedRoom, setSelectedRoom] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
const [roomsRes, kpisRes] = await Promise.all([
|
|
getRoomsWithStatus(),
|
|
getDashboardKPIs(),
|
|
]);
|
|
setRooms(roomsRes.data.rooms);
|
|
setKpis(kpisRes.data);
|
|
} catch (error) {
|
|
console.error(error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => { fetchData(); }, []);
|
|
|
|
const handleStatusChange = async (roomId, newStatus) => {
|
|
await updateRoomStatus(roomId, newStatus);
|
|
fetchData();
|
|
setSelectedRoom(null);
|
|
};
|
|
|
|
if (loading) return <div className="empty-state"><p>{t('common.loading')}</p></div>;
|
|
|
|
return (
|
|
<div>
|
|
<div className="page-header">
|
|
<h2>{t('rooms.title')}</h2>
|
|
</div>
|
|
<KPIBar kpis={kpis} />
|
|
<div style={{ marginTop: 'var(--space-xl)' }}>
|
|
<RoomGrid rooms={rooms} onRoomClick={setSelectedRoom} />
|
|
</div>
|
|
{selectedRoom && (
|
|
<RoomDetailModal
|
|
room={selectedRoom}
|
|
onClose={() => setSelectedRoom(null)}
|
|
onStatusChange={handleStatusChange}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|