descampsv/2024-DEV-BUT3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: descampsv:4cf9069bf22b923719b8730e3fd80c45b451f8b1
Branches Tags
descampsv:main
..
compare: descampsv:68cd3397d49ff577e1fefbf7bbd011f204c29ed3
Branches Tags
descampsv:main

No commits in common. "4cf9069bf22b923719b8730e3fd80c45b451f8b1" and "68cd3397d49ff577e1fefbf7bbd011f204c29ed3" have entirely different histories.
4cf9069bf2 ... 68cd3397d4

13 changed files with 1187 additions and 1363 deletions
Show Stats Expand all files Collapse all files

1618
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

14
src/components/diagram.jsx
View File

@ -1,6 +1,7 @@
import React, { useState, useEffect } from "react";
import { Col, Row } from "antd";
import "../assets/styles/diagram.css";
import '../assets/styles/diagram.css'
const Diagram = ({ data }) => {
const [diagramData, setDiagramData] = useState(data);
@ -9,22 +10,19 @@ const Diagram = ({ data }) => {
setDiagramData(data);
}, [data]);
const maxValue = Math.max(...diagramData.map((item) => item.value));
const maxValue = Math.max(...diagramData.map(item => item.value));
return (
<div className="diagram-container">
<h2>Prix total par an</h2>
{diagramData.map(({ name, value }) => {
// Appliquer l'<EFBFBD>chelle logarithmique <EFBFBD> la valeur
const scaledValue = Math.log(value + 1); // Ajouter 1 pour <EFBFBD>viter le logarithme de z<EFBFBD>ro
// Appliquer l'échelle logarithmique à la valeur
const scaledValue = Math.log(value + 1); // Ajouter 1 pour éviter le logarithme de zéro
const scaledMaxValue = Math.log(maxValue + 1);
return (
<div key={name} className="row-container">
<div className="label">{name}</div>
<div
className="row"
style={{ width: `${(scaledValue / scaledMaxValue) * 100}%` }}
>
<div className="row" style={{ width: `${(scaledValue / scaledMaxValue) * 100}%` }}>
<div className="value">{value}</div>
</div>
</div>

9
src/components/form/formCreateItem.jsx
View File

@ -1,12 +1,11 @@
import React, { useState, useEffect } from "react";
import { Form, Input, InputNumber, Button, Select, DatePicker } from "antd";
import { Form, Input, InputNumber, Button, Select } from "antd";
import axios from "axios";
const { TextArea } = Input;
const { Option } = Select;
const dateFormat = "YYYY-MM-DD";
export const FormCreateItem = ({ onClose }) => {
export const FormCreateItem = () => {
const [form] = Form.useForm();
const [rooms, setRooms] = useState([]);
@ -32,8 +31,6 @@ export const FormCreateItem = ({ onClose }) => {
values,
);
console.log(response.data);
// Fermer la fenêtre modale après soumission réussie
onClose();
} catch (error) {
console.error(error);
}
@ -61,7 +58,7 @@ export const FormCreateItem = ({ onClose }) => {
<InputNumber />
</Form.Item>
<Form.Item label="Purchase Date" name="purchaseDate">
<DatePicker format={dateFormat} />
<Input />
</Form.Item>
<Form.Item label="Description" name="description">
<TextArea rows={4} />

42
src/components/form/formUpdateItem.jsx
View File

@ -3,27 +3,14 @@ import { Form, Input, InputNumber, Button, Select, DatePicker } from "antd";
import axios from "axios";
import { getRooms } from "../../api/room";
import { getItem } from "../../api/item";
import moment from "moment";
import moment from 'moment';
const { Option } = Select;
function formatItem(itemObj) {
const {
_id,
brand,
model,
room,
price,
purchaseDate,
description,
categories,
createdAt,
updatedAt,
__v,
link,
} = itemObj;
const formattedPurchaseDate =
typeof purchaseDate === "string" ? new Date(purchaseDate) : purchaseDate;
const {_id,brand,model,room,price,purchaseDate,description,categories,createdAt,updatedAt,__v,link} = itemObj
const formattedPurchaseDate = typeof purchaseDate === 'string' ? new Date(purchaseDate) : purchaseDate;
return {
_id,
@ -37,14 +24,14 @@ function formatItem(itemObj) {
createdAt,
updatedAt,
__v,
link,
link
};
}
export const FormUpdateItem = ({ itemId, onClose }) => {
export const FormUpdateItem = ({ itemId }) => {
const [form] = Form.useForm();
const [rooms, setRooms] = useState([]);
const [item, setItem] = useState(null);
const [item, setItem] = useState(null)
useEffect(() => {
const fetchData = async () => {
@ -52,7 +39,7 @@ export const FormUpdateItem = ({ itemId, onClose }) => {
setRooms(roomsResponse);
const itemResponse = await getItem(itemId);
console.log(itemResponse);
console.log(itemResponse)
setItem(formatItem(itemResponse));
};
@ -75,19 +62,17 @@ export const FormUpdateItem = ({ itemId, onClose }) => {
values,
);
console.log(response.data);
// Fermer la fenêtre modale après soumission réussie
onClose();
} catch (error) {
console.error(error);
}
};
const dateFormat = "YYYY-MM-DD";
const dateFormat = 'YYYY-MM-DD';
return (
<Form
form={form}
onFinish={onFinish}
initialValues={item} // Initialise le formulaire avec les valeurs de l'élément
initialValues={item} // Initialise le formulaire avec les valeurs de l'élément
>
<h1>Update Item</h1>
<Form.Item label="Brand" name="brand">
@ -99,7 +84,8 @@ export const FormUpdateItem = ({ itemId, onClose }) => {
<Form.Item label="Room" name="room">
<Select placeholder="Select a room">
{console.log(rooms)}
{rooms.map((room) => (
{
rooms.map((room) => (
<Option key={room._id} value={room._id}>
{room.name}
</Option>
@ -110,7 +96,9 @@ export const FormUpdateItem = ({ itemId, onClose }) => {
<InputNumber />
</Form.Item>
<Form.Item label="Purchase Date" name="purchaseDate">
<DatePicker dateFormat={dateFormat} />
<DatePicker
dateFormat={dateFormat}
/>
</Form.Item>
<Form.Item label="Description" name="description">
<Input.TextArea rows={4} />

38
src/components/item/ItemBox.jsx
View File

@ -1,13 +1,22 @@
import React, { useEffect, useState } from "react";
import "../../assets/styles/modal.css";
import "../../assets/styles/itembox.css";
import FormUpdateItem from "../form/formUpdateItem";
import { Image } from "../parts/image";
import { Description } from "../parts/description";
import { Characteristic } from "../parts/characteristic";
import React, { useEffect, useState } from 'react';
import '../../assets/styles/modal.css'
import '../../assets/styles/itembox.css'
import FormUpdateItem from '../form/formUpdateItem';
import {Image } from '../parts/image'
import {Description } from '../parts/description'
import {Characteristic } from '../parts/characteristic'
// Composant Détails du Produit
export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => {
const [isModalOpen, setIsModalOpen] = useState(false);
// Fonction pour ouvrir la fenêtre modale
@ -20,11 +29,14 @@ export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => {
setIsModalOpen(false);
};
let productname = brand + " " + model;
let formatedPrice = price + "€";
let formatedDate = new Date(purchaseDate).toLocaleDateString("fr-FR");
let formatedDate = new Date(purchaseDate).toLocaleDateString('fr-FR');
let request = brand + " " + model;
let request = brand + " " + model
return (
<div className="product-details" >
@ -41,12 +53,8 @@ export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => {
{isModalOpen && (
<div className="modal">
<div className="modal-content">
<span className="close" onClick={closeModal}>
&times;
</span>
<FormUpdateItem itemId={_id}>
{console.log("item ID :" + _id)}
</FormUpdateItem>
<span className="close" onClick={closeModal}>&times;</span>
<FormUpdateItem itemId={_id}>{console.log("item ID :" + _id)}</FormUpdateItem>
</div>
</div>
)}

151
src/components/item/ItemPage.jsx
View File

@ -1,16 +1,18 @@
import React, { useState, useEffect } from "react";
import axios from "axios";
import { ItemBox } from "./ItemBox";
import { DatePicker, Row, Col, Select, Input, InputNumber } from "antd";
import "../../assets/styles/item-page.css";
import FormCreateItem from "../form/formCreateItem";
import axios from 'axios'; // Assurez-vous que le chemin d'importation soit correct
import { ItemBox } from './ItemBox';
import { Space, DatePicker, Row, Col, Select, Input, InputNumber } from 'antd';
import '../../assets/styles/item-page.css'
const { RangePicker } = DatePicker;
const { Option } = Select;
const itemsPerPage = 8;
const itemsPerRow = 4;
const itemsPerPage = 8; // Nombre total d'items par page
const itemsPerRow = 4; // Nombre d'items par rangée
// Fonction pour diviser le tableau d'items en rangées
const chunkArray = (arr, size) => {
const chunkedArr = [];
for (let i = 0; i < arr.length; i += size) {
@ -19,17 +21,18 @@ const chunkArray = (arr, size) => {
return chunkedArr;
};
// Composant d'affichage de la page
export const ItemPage = () => {
const [items, setItems] = useState([]);
const [filteredItems, setFilteredItems] = useState([]);
const [filteredItems, setFilteredItems] = useState([]); // State pour les items filtrés
const [currentPage, setCurrentPage] = useState(1);
const [filterName, setFilterName] = useState("");
const [filterPriceMin, setFilterPriceMin] = useState("");
const [filterPriceMax, setFilterPriceMax] = useState("");
const [filterName, setFilterName] = useState('');
const [filterPriceMin, setFilterPriceMin] = useState('');
const [filterPriceMax, setFilterPriceMax] = useState('');
const [filterDateRange, setFilterDateRange] = useState([]);
const [selectedRoom, setSelectedRoom] = useState("all");
const [rooms, setRooms] = useState([]);
const [isCreateItemModalOpen, setIsCreateItemModalOpen] = useState(false);
const [selectedRoom, setSelectedRoom] = useState('all'); // State pour la chambre sélectionnée
const [rooms, setRooms] = useState([]); // State pour stocker les chambres
useEffect(() => {
const fetchItems = async () => {
@ -37,8 +40,20 @@ export const ItemPage = () => {
const response = await axios.get(
`${import.meta.env.VITE_API_URL}/item`,
);
//await response.data.forEach(async (item) => {
// let cacheUrl = localStorage.getItem(item._id);
// if (cacheUrl == null || cacheUrl == "") {
// let request = item.brand + " " + item.model
// cacheUrl = await searchAndResizeImage(request)
// await localStorage.setItem(item._id, cacheUrl)
// console.log("mise en cache "+ item.imageUrl)
// }
// item.imageUrl = cacheUrl;
//})
setItems(response.data);
} catch (error) {
}
catch (error) {
console.error(error);
}
};
@ -59,82 +74,77 @@ export const ItemPage = () => {
}, []);
useEffect(() => {
const filtered = items.filter((item) => {
const matchesRoom = selectedRoom === "all" || item.room === selectedRoom;
const matchesName =
item.brand.toLowerCase().includes(filterName.toLowerCase()) ||
// Filtrer les éléments chaque fois que les filtres ou la chambre sélectionnée changent
const filtered = items.filter(item => {
// Filtrer par chambre si une chambre est sélectionnée
const matchesRoom = selectedRoom === 'all' || item.room === selectedRoom;
// Filtrer par nom (brand ou model)
const matchesName = item.brand.toLowerCase().includes(filterName.toLowerCase()) ||
item.model.toLowerCase().includes(filterName.toLowerCase());
// Filtrer par prix
const matchesPrice =
(filterPriceMin === "" || item.price >= parseFloat(filterPriceMin)) &&
(filterPriceMax === "" || item.price <= parseFloat(filterPriceMax));
const matchesDate =
filterDateRange.length === 0 ||
(new Date(item.purchaseDate) >= filterDateRange[0] &&
new Date(item.purchaseDate) <= filterDateRange[1]);
(filterPriceMin === '' || item.price >= parseFloat(filterPriceMin)) &&
(filterPriceMax === '' || item.price <= parseFloat(filterPriceMax));
// Filtrer par date
const matchesDate = filterDateRange.length === 0 || (
new Date(item.purchaseDate) >= filterDateRange[0] &&
new Date(item.purchaseDate) <= filterDateRange[1]
);
return matchesRoom && matchesName && matchesPrice && matchesDate;
});
setFilteredItems(filtered);
}, [
items,
selectedRoom,
filterName,
filterPriceMin,
filterPriceMax,
filterDateRange,
]);
}, [items, selectedRoom, filterName, filterPriceMin, filterPriceMax, filterDateRange]);
const handleNextPage = () => {
setCurrentPage((prevPage) => prevPage + 1);
setCurrentPage(prevPage => prevPage + 1);
};
const handlePrevPage = () => {
setCurrentPage((prevPage) => prevPage - 1);
setCurrentPage(prevPage => prevPage - 1);
};
const handleRoomChange = (value) => {
setSelectedRoom(value);
};
const handleCloseModal = () => {
setIsCreateItemModalOpen(false);
};
const chunkedItems = chunkArray(filteredItems, itemsPerRow);
const startIndex = (currentPage - 1) * (itemsPerPage / itemsPerRow);
const endIndex = startIndex + itemsPerPage / itemsPerRow;
const endIndex = startIndex + (itemsPerPage / itemsPerRow);
const rowsToDisplay = chunkedItems.slice(startIndex, endIndex);
return (
<div className="item-container">
<div className="filters">{/* Filters here */}</div>
{/* Button to open create item modal */}
<button onClick={() => setIsCreateItemModalOpen(true)}>
Create Item
</button>
{/* Create item form modal */}
{isCreateItemModalOpen && (
<div className="modal">
<div className="modal-content">
<span className="close" onClick={handleCloseModal}>
&times;
</span>
<FormCreateItem onClose={handleCloseModal} />
<div className="filters">
<div className="filter-group">
<label htmlFor="roomSelect">Chambre :</label>
<Select id="roomSelect" defaultValue="all" style={{ width: 120 }} onChange={handleRoomChange}>
<Option value="all">Toutes</Option>
{rooms.map(room => (
<Option key={room._id} value={room._id}>{room.name}</Option>
))}
</Select>
</div>
<div className="filter-group">
<label htmlFor="nameInput">Recherche par nom :</label>
<Input id="nameInput" placeholder="Recherche par nom" value={filterName} onChange={e => setFilterName(e.target.value)} />
</div>
<div className="filter-group">
<label>Prix :</label>
<InputNumber placeholder="Prix min" value={filterPriceMin} onChange={value => setFilterPriceMin(value)} />
<span> - </span>
<InputNumber placeholder="Prix max" value={filterPriceMax} onChange={value => setFilterPriceMax(value)} />
</div>
<div className="filter-group">
<label>Date d'achat :</label>
<RangePicker format="YYYY-MM-DD" onChange={dates => setFilterDateRange(dates)} value={filterDateRange} />
</div>
</div>
)}
<div className="item-list">
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
{rowsToDisplay.map((row, rowIndex) => (
<React.Fragment key={rowIndex}>
{row.map((item) => (
<Col
className="gutter-row"
span={24 / itemsPerRow}
key={item._id}
>
{row.map(item => (
<Col className="gutter-row" span={24 / itemsPerRow} key={item._id}>
<ItemBox {...item} />
</Col>
))}
@ -142,19 +152,14 @@ export const ItemPage = () => {
))}
</Row>
</div>
<div className="pagination">
<button onClick={handlePrevPage} disabled={currentPage === 1}>
Previous
</button>
<button onClick={handlePrevPage} disabled={currentPage === 1}>Précédente</button>
<span>Page {currentPage}</span>
<button
onClick={handleNextPage}
disabled={endIndex >= chunkedItems.length}
>
Next
</button>
<button onClick={handleNextPage} disabled={endIndex >= chunkedItems.length}>Suivante</button>
</div>
</div>
);
};

22
src/components/nav/Navbar.jsx
View File

@ -1,9 +1,9 @@
import React, { useState, useEffect } from "react";
import { Menu } from "antd";
import { HomeOutlined } from "@ant-design/icons";
import { HomeOutlined } from "@ant-design/icons"
import { Home } from "../../pages";
import { getRooms } from "../../api/room";
import { isLoggedIn } from "../../api/authentication";
import { isLoggedIn } from "../../api/authentication"
import { Items } from "../../pages/items";
import { Link } from "react-router-dom";
@ -15,12 +15,10 @@ function getItem(key, label) {
// label,
// link,
//};
var item = (
<Menu.Item key={key}>
var item = <Menu.Item key={key}>
<Link to="/test">{label}</Link>
</Menu.Item >
);
return item;
return item
}
const { SubMenu } = Menu;
@ -31,16 +29,17 @@ const Navbar = () => {
const [rooms, setRooms] = useState([]);
useEffect(() => {
console.log("NAVBAR EFFECT");
console.log("NAVBAR EFFECT")
isLoggedIn().then((user) => {
if (user !== "Unauthorized") {
getRooms().then((result) => {
setRooms(result);
});
})
}
});
})
}, []);
const items = [
<Menu.Item key="0">
<Link to="/logout">Login / Logout</Link>
@ -54,6 +53,8 @@ const Navbar = () => {
<Menu.Item key="3" >
<Link to="/rooms">Voir les chambres</Link>
</Menu.Item>,
];
// Rendu du composant Navbar
@ -66,10 +67,11 @@ const Navbar = () => {
mode="inline"
>
{items}
</Menu>
);
} catch (error) {
console.log(error.stack);
console.log(error.stack)
}
};
export default Navbar;

5
src/components/parts/characteristic.jsx
View File

@ -1,7 +1,8 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useState } from 'react';
// Composant Caract<EFBFBD>ristique
// Composant Caractéristique
export const Characteristic = ({ label, value }) => {
return (
<div className="characteristic">
<strong>{label}:</strong> {value}

2
src/components/parts/description.jsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useState } from 'react';
// Composant Description
export const Description = ({ title, children }) => {

27
src/components/rooms/room-detail.jsx
View File

@ -1,27 +1,23 @@
import React, { useEffect, useState } from "react";
import { FormCreateRoom } from "../../components/form/formCreateRoom";
import React, { useEffect, useState } from 'react';
import { FormCreateRoom } from '../../components/form/formCreateRoom';
//import { RoomUpdateForm } from './RoomUpdateForm';
export const RoomDetail = ({
selectedRoom,
onCreateFormSubmit,
onUpdateFormSubmit,
onBack,
}) => {
export const RoomDetail = ({ selectedRoom, onCreateFormSubmit, onUpdateFormSubmit, onBack }) => {
const [isUpdateFormVisible, setIsUpdateFormVisible] = useState(false);
useEffect(() => {
if (selectedRoom) {
setIsUpdateFormVisible(true);
setIsUpdateFormVisible(true)
}
}, [selectedRoom]);
// Afficher le formulaire de mise <EFBFBD> jour lorsqu'une chambre est s<EFBFBD>lectionn<EFBFBD>e
// Afficher le formulaire de mise à jour lorsqu'une chambre est sélectionnée
const handleRoomClick = () => {
setIsUpdateFormVisible(true);
};
// Afficher le formulaire de cr<EFBFBD>ation lorsqu'on revient en arri<EFBFBD>re
// Afficher le formulaire de création lorsqu'on revient en arrière
const handleBackClick = () => {
setIsUpdateFormVisible(false);
onBack(null);
@ -29,18 +25,21 @@ export const RoomDetail = ({
return (
<div className="room-detail">
{isUpdateFormVisible ? (
{isUpdateFormVisible
? (
<div>
<h2>Modifier une chambre</h2>
<FormCreateRoom onSubmit={onCreateFormSubmit} />
</div>
) : (
)
: (
<div>
<h2>Ajouter une chambre</h2>
<FormCreateRoom onSubmit={onCreateFormSubmit} />
</div>
)}
)
}
</div>
);
};

20
src/components/rooms/room-list.jsx
View File

@ -1,9 +1,10 @@
import React, { useState, useEffect } from "react";
import "../../assets/styles/room-list.css";
import { RoomBox } from "../../components/rooms/roomBox";
import '../../assets/styles/room-list.css'
import { RoomBox } from '../../components/rooms/roomBox'
import { formatRoomStats } from "../../api/room";
// Fonction pour diviser le tableau d'items en rang<EFBFBD>es
// Fonction pour diviser le tableau d'items en rangées
const chunkArray = (arr, size) => {
const chunkedArr = [];
for (let i = 0; i < arr.length; i += size) {
@ -15,16 +16,17 @@ const chunkArray = (arr, size) => {
// Composant d'affichage de la page
export const RoomList = ({ statsParam, onRoomClick }) => {
const [rooms, setRooms] = useState([]);
const [selectedRoom, setSelectedRoom] = useState("all");
const [selectedRoom, setSelectedRoom] = useState('all');
useEffect(() => {
if (statsParam.rooms) {
console.log(statsParam.rooms);
let formatedStats = formatRoomStats(statsParam);
setRooms(formatedStats.rooms);
console.log(statsParam.rooms)
let formatedStats = formatRoomStats(statsParam)
setRooms(formatedStats.rooms)
}
}, [statsParam]);
const handleRoomClick = (roomId) => {
onRoomClick(roomId);
};
@ -33,11 +35,11 @@ export const RoomList = ({ statsParam, onRoomClick }) => {
<div>
<h2>Liste des chambres</h2>
<div className="list-container">
{rooms &&
rooms.map((room) => (
{rooms && rooms.map((room) => (
<RoomBox room={room} key={room._id} onRoomClick={handleRoomClick} />
))}
</div>
</div>
);
};

14
src/components/rooms/roomBox.jsx
View File

@ -1,9 +1,10 @@
import React from "react";
import "../../assets/styles/room-list.css";
import { Description } from "../parts/description";
import { Characteristic } from "../parts/characteristic";
import React from 'react';
import '../../assets/styles/room-list.css';
import { Description } from '../parts/description';
import { Characteristic } from '../parts/characteristic';
export const RoomBox = ({ room, onRoomClick }) => {
const handleBoxClick = () => {
onRoomClick(room._id);
};
@ -11,10 +12,7 @@ export const RoomBox = ({ room, onRoomClick }) => {
return (
<div className="room-details" onClick={handleBoxClick}>
<Description title={room?.name}>
<Characteristic
label="Nombre d'articles"
value={room?.items_count || "N/A"}
/>
<Characteristic label="Nombre d'articles" value={room?.items_count || "N/A"} />
<Characteristic label="Prix total" value={room?.room_price || "N/A"} />
</Description>
</div>

22
src/pages/rooms.jsx
View File

@ -1,12 +1,12 @@
import React, { useEffect, useState } from "react";
import "../assets/styles/room-page.css";
import React, { useEffect, useState } from 'react';
import '../assets/styles/room-page.css'
import { useAuth } from "../hooks";
import { getRoomStats } from "../api/room";
import { usePageTitle } from "../hooks/page-title-context";
import RoomStats from "../components/rooms/room-stats";
import { RoomList } from "../components/rooms/room-list";
import { RoomDetail } from "../components/rooms/room-detail";
import { usePageTitle } from '../hooks/page-title-context';
import RoomStats from '../components/rooms/room-stats';
import { RoomList } from '../components/rooms/room-list';
import { RoomDetail } from '../components/rooms/room-detail';
export const Rooms = () => {
const { user } = useAuth();
@ -14,10 +14,12 @@ export const Rooms = () => {
const [stats, setStats] = useState({});
const [selectedRoom, setSelectedRoom] = useState();
useEffect(() => {
setPageTitle("Toutes les rooms :");
}, [setPageTitle]);
useEffect(() => {
const fetchData = async () => {
const roomsStatsResponse = await getRoomStats();
@ -28,7 +30,7 @@ export const Rooms = () => {
}, []);
const handleRoomClick = (roomId) => {
console.log("Clicked room ID:", roomId);
console.log('Clicked room ID:', roomId);
setSelectedRoom(roomId);
};
@ -37,16 +39,14 @@ export const Rooms = () => {
<div className="topContainer">
<div className="statsContainer">
<RoomStats statsParam={stats} />
</div>
<div className="listContainer">
<RoomList statsParam={stats} onRoomClick={handleRoomClick}></RoomList>
</div>
</div>
<div className="detailContainer">
<RoomDetail
selectedRoom={selectedRoom}
onBack={handleRoomClick}
></RoomDetail>
<RoomDetail selectedRoom={selectedRoom} onBack={handleRoomClick}></RoomDetail>
</div>
</div>
);