ialcarazsalazar
1828311b3a
- Fix 7 backend controllers: rename columns to match actual DB schema (name_room→room_number, id_room→id, bed_type→room_type, id_employee→id, status_employee→status) - Fix 10 frontend files with matching property renames - Add ThemeContext with dark/light toggle (localStorage persisted) - Redesign theme.css with [data-theme] attribute selectors - Add Google Fonts (Syne, DM Sans, JetBrains Mono) - Redesign sidebar, topbar, and login page CSS - Migrate ~44 legacy CSS files from hardcoded colors to CSS variables - Remove Dashboards/Tableros section from menu - Clean up commented-out CSS blocks across codebase Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
74 lines
2.2 KiB
JavaScript
74 lines
2.2 KiB
JavaScript
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}
|
|
className={`room-card ${room.status || "available"}`}
|
|
onClick={() => onRoomClick(room)}
|
|
>
|
|
<div className="room-number">{room.room_number}</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>
|
|
);
|
|
}
|