feat: add room dashboard with KPI bar and floor grid

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/Frontend-Hotel/src/pages/RoomDashboard/RoomDashboard.jsx

@@ -0,0 +1,58 @@
+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>
+  );
+}