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/components/RoomGrid.jsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export default function RoomGrid({ rooms, onRoomClick }) {
+  const { t } = useTranslation();
+
+  const roomsByFloor = rooms.reduce((acc, room) => {
+    const floor = room.floor ?? 1;
+    if (!acc[floor]) acc[floor] = [];
+    acc[floor].push(room);
+    return acc;
+  }, {});
+
+  const sortedFloors = Object.keys(roomsByFloor)
+    .map(Number)
+    .sort((a, b) => a - b);
+
+  return (
+    <div>
+      {sortedFloors.map((floor) => (
+        <div key={floor} style={{ marginBottom: "var(--space-xl)" }}>
+          <h3
+            style={{
+              color: "var(--text-secondary)",
+              fontSize: "0.875rem",
+              fontWeight: 600,
+              textTransform: "uppercase",
+              letterSpacing: "0.05em",
+              marginBottom: "var(--space-md)",
+            }}
+          >
+            {t("rooms.floor")} {floor}
+          </h3>
+          <div className="grid-5">
+            {roomsByFloor[floor].map((room) => (
+              <div
+                key={room.id_room}
+                className={`room-card ${room.status || "available"}`}
+                onClick={() => onRoomClick(room)}
+              >
+                <div className="room-number">{room.name_room}</div>
+                {room.guest_name && (
+                  <div className="room-info">{room.guest_name}</div>
+                )}
+                <div
+                  style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginTop: "var(--space-sm)",
+                  }}
+                >
+                  <span className={`badge badge-${room.status || "available"}`}>
+                    {t(`rooms.${room.status || "available"}`)}
+                  </span>
+                  <span
+                    style={{
+                      color: "var(--accent-gold)",
+                      fontSize: "0.8rem",
+                      fontWeight: 600,
+                    }}
+                  >
+                    ${room.cost_per_nigth}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}