src/components/diagram.jsx

@@ -1,37 +1,35 @@
 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);
+    const [diagramData, setDiagramData] = useState(data);
 
-  useEffect(() => {
-    setDiagramData(data);
-  }, [data]);
+    useEffect(() => {
+        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
-        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="value">{value}</div>
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
+    return (
+        <div className="diagram-container">
+            <h2>Prix total par an</h2>
+            {diagramData.map(({ name, value }) => {
+                // 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="value">{value}</div>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
 };
 
 export default Diagram;

src/components/form/formCreateItem.jsx

@@ -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} />

src/components/form/formUpdateItem.jsx

@@ -3,125 +3,113 @@ 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;
 
-  return {
-    _id,
-    brand,
-    model,
-    room,
-    price,
-    purchaseDate: formattedPurchaseDate,
-    description,
-    categories,
-    createdAt,
-    updatedAt,
-    __v,
-    link,
-  };
+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;
+
+    return {
+        _id,
+        brand,
+        model,
+        room,
+        price,
+        purchaseDate: formattedPurchaseDate,
+        description,
+        categories,
+        createdAt,
+        updatedAt,
+        __v,
+        link
+    };
 }
 
-export const FormUpdateItem = ({ itemId, onClose }) => {
-  const [form] = Form.useForm();
-  const [rooms, setRooms] = useState([]);
-  const [item, setItem] = useState(null);
+export const FormUpdateItem = ({ itemId }) => {
+    const [form] = Form.useForm();
+    const [rooms, setRooms] = useState([]);
+    const [item, setItem] = useState(null)
 
-  useEffect(() => {
-    const fetchData = async () => {
-      const roomsResponse = await getRooms();
-      setRooms(roomsResponse);
+    useEffect(() => {
+        const fetchData = async () => {
+            const roomsResponse = await getRooms();
+            setRooms(roomsResponse);
 
-      const itemResponse = await getItem(itemId);
-      console.log(itemResponse);
-      setItem(formatItem(itemResponse));
+            const itemResponse = await getItem(itemId);
+            console.log(itemResponse)
+            setItem(formatItem(itemResponse));
+        };
+
+        fetchData();
+    }, [itemId]); 
+
+    useEffect(() => {
+        if (item) { 
+            form.setFieldsValue({
+                ...item,
+                purchaseDate: item.purchaseDate ? moment(item.purchaseDate) : null,
+            });
+        }
+    }, [item, form]);
+
+    const onFinish = async (values) => {
+        try {
+            const response = await axios.put(
+                `${import.meta.env.VITE_API_URL}/item/${item._id}`,
+                values,
+            );
+            console.log(response.data);
+        } catch (error) {
+            console.error(error);
+        }
     };
 
-    fetchData();
-  }, [itemId]);
-
-  useEffect(() => {
-    if (item) {
-      form.setFieldsValue({
-        ...item,
-        purchaseDate: item.purchaseDate ? moment(item.purchaseDate) : null,
-      });
-    }
-  }, [item, form]);
-
-  const onFinish = async (values) => {
-    try {
-      const response = await axios.put(
-        `${import.meta.env.VITE_API_URL}/item/${item._id}`,
-        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";
-  return (
-    <Form
-      form={form}
-      onFinish={onFinish}
-      initialValues={item} // Initialise le formulaire avec les valeurs de l'élément
-    >
-      <h1>Update Item</h1>
-      <Form.Item label="Brand" name="brand">
-        <Input />
-      </Form.Item>
-      <Form.Item label="Model" name="model">
-        <Input />
-      </Form.Item>
-      <Form.Item label="Room" name="room">
-        <Select placeholder="Select a room">
-          {console.log(rooms)}
-          {rooms.map((room) => (
-            <Option key={room._id} value={room._id}>
-              {room.name}
-            </Option>
-          ))}
-        </Select>
-      </Form.Item>
-      <Form.Item label="Price" name="price">
-        <InputNumber />
-      </Form.Item>
-      <Form.Item label="Purchase Date" name="purchaseDate">
-        <DatePicker dateFormat={dateFormat} />
-      </Form.Item>
-      <Form.Item label="Description" name="description">
-        <Input.TextArea rows={4} />
-      </Form.Item>
-      <Form.Item>
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
-      </Form.Item>
-    </Form>
-  );
+    const dateFormat = 'YYYY-MM-DD';
+    return (
+        <Form
+            form={form}
+            onFinish={onFinish}
+            initialValues={item} // Initialise le formulaire avec les valeurs de l'élément
+        >
+            <h1>Update Item</h1>
+            <Form.Item label="Brand" name="brand">
+                <Input />
+            </Form.Item>
+            <Form.Item label="Model" name="model">
+                <Input />
+            </Form.Item>
+            <Form.Item label="Room" name="room">
+                <Select placeholder="Select a room">
+                    {console.log(rooms)}
+                    {
+                        rooms.map((room) => (
+                        <Option key={room._id} value={room._id}>
+                            {room.name}
+                        </Option>
+                    ))}
+                </Select>
+            </Form.Item>
+            <Form.Item label="Price" name="price">
+                <InputNumber />
+            </Form.Item>
+            <Form.Item label="Purchase Date" name="purchaseDate">
+                <DatePicker
+                    dateFormat={dateFormat}
+                />
+            </Form.Item>
+            <Form.Item label="Description" name="description">
+                <Input.TextArea rows={4} />
+            </Form.Item>
+            <Form.Item>
+                <Button type="primary" htmlType="submit">
+                    Submit
+                </Button>
+            </Form.Item>
+        </Form>
+    );
 };
 
 export default FormUpdateItem;

src/components/item/ItemBox.jsx

@@ -1,55 +1,63 @@
-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
-  const openModal = () => {
-    setIsModalOpen(true);
-  };
+    const [isModalOpen, setIsModalOpen] = useState(false);
 
-  // Fonction pour fermer la fenêtre modale
-  const closeModal = () => {
-    setIsModalOpen(false);
-  };
+    // Fonction pour ouvrir la fenêtre modale
+    const openModal = () => {
+        setIsModalOpen(true);
+    };
 
-  let productname = brand + " " + model;
-  let formatedPrice = price + "€";
-  let formatedDate = new Date(purchaseDate).toLocaleDateString("fr-FR");
+    // Fonction pour fermer la fenêtre modale
+    const closeModal = () => {
+        setIsModalOpen(false);
+    };
     
-  let request = brand + " " + model;
 
-  return (
-    <div className="product-details">
-      <Description title={productname}>
-        <Image request={request} _id={_id} alt="Product" />
-        <Characteristic label="Model" value={model} />
-        <Characteristic label="Brand" value={brand} />
-        <Characteristic label="Purchase Date" value={formatedDate} />
-        <Characteristic label="Price" value={formatedPrice} />
-        {/* Bouton d'édition pour ouvrir la fenêtre modale */}
-        <button onClick={openModal}>Edit</button>
-      </Description>
-      {/* Fenêtre modale */}
-      {isModalOpen && (
-        <div className="modal">
-          <div className="modal-content">
-            <span className="close" onClick={closeModal}>
-              &times;
-            </span>
-            <FormUpdateItem itemId={_id}>
-              {console.log("item ID :" + _id)}
-            </FormUpdateItem>
-          </div>
+
+
+    let productname = brand + " " + model;
+    let formatedPrice = price + "€";
+    let formatedDate = new Date(purchaseDate).toLocaleDateString('fr-FR');
+
+    let request = brand + " " + model
+
+    return (
+        <div className="product-details" > 
+            <Description title={productname} >
+                <Image request={request} _id={_id} alt="Product" />
+                <Characteristic label="Model" value={model} />
+                <Characteristic label="Brand" value={brand} />
+                <Characteristic label="Purchase Date" value={formatedDate} />
+                <Characteristic label="Price" value={formatedPrice} />
+                {/* Bouton d'édition pour ouvrir la fenêtre modale */}
+                <button onClick={openModal}>Edit</button>
+            </Description>
+            {/* Fenêtre modale */}
+            {isModalOpen && (
+                <div className="modal">
+                    <div className="modal-content">
+                        <span className="close" onClick={closeModal}>&times;</span>
+                        <FormUpdateItem itemId={_id}>{console.log("item ID :" + _id)}</FormUpdateItem>
+                    </div>
+                </div>
+            )}
         </div>
-      )}
-    </div>
-  );
+    );
 };

src/components/item/ItemPage.jsx

@@ -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,26 +21,39 @@ 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 () => {
       try {
         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,102 +74,92 @@ export const ItemPage = () => {
   }, []);
 
   useEffect(() => {
-    const filtered = items.filter((item) => {
-      const matchesRoom = selectedRoom === "all" || item.room === selectedRoom;
-      const matchesName =
-        item.brand.toLowerCase().includes(filterName.toLowerCase()) ||
-        item.model.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="item-container">
+          <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}>
+                                  <ItemBox {...item} />
+                              </Col>
+                          ))}
+                      </React.Fragment>
+                  ))}
+              </Row>
+          </div>
+          <div className="pagination">
+              <button onClick={handlePrevPage} disabled={currentPage === 1}>Précédente</button>
+              <span>Page {currentPage}</span>
+              <button onClick={handleNextPage} disabled={endIndex >= chunkedItems.length}>Suivante</button>
           </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}
-                >
-                  <ItemBox {...item} />
-                </Col>
-              ))}
-            </React.Fragment>
-          ))}
-        </Row>
       </div>
-
-      <div className="pagination">
-        <button onClick={handlePrevPage} disabled={currentPage === 1}>
-          Previous
-        </button>
-        <span>Page {currentPage}</span>
-        <button
-          onClick={handleNextPage}
-          disabled={endIndex >= chunkedItems.length}
-        >
-          Next
-        </button>
-      </div>
-    </div>
   );
 };
+
+
+

src/components/nav/Navbar.jsx

@@ -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";
 
@@ -14,13 +14,11 @@ function getItem(key, label) {
   //    children,
   //    label,
   //    link,
-  //};
-  var item = (
-    <Menu.Item key={key}>
-      <Link to="/test">{label}</Link>
-    </Menu.Item>
-  );
-  return item;
+    //};
+    var item = <Menu.Item key={key}>
+        <Link to="/test">{label}</Link>
+    </Menu.Item >
+    return item
 }
 
 const { SubMenu } = Menu;
@@ -28,48 +26,52 @@ const { SubMenu } = Menu;
 // Component
 const Navbar = () => {
   //Hook calls
-  const [rooms, setRooms] = useState([]);
+    const [rooms, setRooms] = useState([]);
 
-  useEffect(() => {
-    console.log("NAVBAR EFFECT");
-    isLoggedIn().then((user) => {
-      if (user !== "Unauthorized") {
-        getRooms().then((result) => {
-          setRooms(result);
-        });
-      }
-    });
-  }, []);
+    useEffect(() => {
+        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>
-    </Menu.Item>,
-    <Menu.Item key="1">
-      <Link to="/home">Menu Principal</Link>
-    </Menu.Item>,
-    <Menu.Item key="2">
-      <Link to="/items">Tous les articles</Link>
-    </Menu.Item>,
-    <Menu.Item key="3">
-      <Link to="/rooms">Voir les chambres</Link>
-    </Menu.Item>,
-  ];
 
-  // Rendu du composant Navbar
-  try {
-    return (
-      <Menu
-        defaultSelectedKeys={["1"]}
-        defaultOpenKeys={["sub1"]}
-        theme="dark"
-        mode="inline"
-      >
-        {items}
-      </Menu>
-    );
-  } catch (error) {
-    console.log(error.stack);
-  }
+    const items = [
+        <Menu.Item key="0">
+            <Link to="/logout">Login / Logout</Link>
+        </Menu.Item>,
+        <Menu.Item key="1" >
+            <Link to="/home">Menu Principal</Link>
+        </Menu.Item>,
+        <Menu.Item key="2" >
+            <Link to="/items">Tous les articles</Link>
+        </Menu.Item>,
+        <Menu.Item key="3" >
+            <Link to="/rooms">Voir les chambres</Link>
+        </Menu.Item>,
+
+
+    ];
+
+    // Rendu du composant Navbar
+    try {
+        return (
+            <Menu
+                defaultSelectedKeys={["1"]}
+                defaultOpenKeys={["sub1"]}
+                theme="dark"
+                mode="inline"
+            >
+                {items}
+
+            </Menu>
+        );
+    } catch (error) {
+        console.log(error.stack)
+    }
 };
 export default Navbar;

src/components/parts/characteristic.jsx

@@ -1,10 +1,11 @@
-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}
-    </div>
-  );
+
+    return (
+        <div className="characteristic">
+            <strong>{label}:</strong> {value}
+        </div>
+    );
 };

src/components/parts/description.jsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
 
 // Composant Description
 export const Description = ({ title, children }) => {
-  return (
-    <div className="description">
-      <h2 className="text-ellipsis">{title}</h2>
-      {children}
-    </div>
-  );
+    return (
+        <div className="description">
+            <h2 className="text-ellipsis">{title}</h2>
+            {children}
+        </div>
+    );
 };

src/components/rooms/room-detail.jsx

@@ -1,46 +1,45 @@
-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,
-}) => {
-  const [isUpdateFormVisible, setIsUpdateFormVisible] = useState(false);
+export const RoomDetail = ({ selectedRoom, onCreateFormSubmit, onUpdateFormSubmit, onBack }) => {
+    const [isUpdateFormVisible, setIsUpdateFormVisible] = useState(false);
 
-  useEffect(() => {
-    if (selectedRoom) {
-      setIsUpdateFormVisible(true);
-    }
-  }, [selectedRoom]);
+    useEffect(() => {
+        if (selectedRoom) {
+            setIsUpdateFormVisible(true)
+        }
+    }, [selectedRoom]);
 
-  // Afficher le formulaire de mise <EFBFBD> jour lorsqu'une chambre est s<EFBFBD>lectionn<EFBFBD>e
-  const handleRoomClick = () => {
-    setIsUpdateFormVisible(true);
-  };
 
-  // Afficher le formulaire de cr<EFBFBD>ation lorsqu'on revient en arri<EFBFBD>re
-  const handleBackClick = () => {
-    setIsUpdateFormVisible(false);
-    onBack(null);
-  };
+    // Afficher le formulaire de mise ŕ jour lorsqu'une chambre est sélectionnée
+    const handleRoomClick = () => {
+        setIsUpdateFormVisible(true);
+    };
 
-  return (
-    <div className="room-detail">
-      {isUpdateFormVisible ? (
-        <div>
-          <h2>Modifier une chambre</h2>
+    // Afficher le formulaire de création lorsqu'on revient en arričre
+    const handleBackClick = () => {
+        setIsUpdateFormVisible(false);
+        onBack(null);
+    };
 
-          <FormCreateRoom onSubmit={onCreateFormSubmit} />
+    return (
+        <div className="room-detail">
+            {isUpdateFormVisible
+                ? (
+                    <div>
+                        <h2>Modifier une chambre</h2>
+
+                        <FormCreateRoom onSubmit={onCreateFormSubmit} />
+                    </div>
+                )
+                : (
+                    <div>
+                        <h2>Ajouter une chambre</h2>
+                        <FormCreateRoom onSubmit={onCreateFormSubmit} />
+                    </div>
+                )
+            }
         </div>
-      ) : (
-        <div>
-          <h2>Ajouter une chambre</h2>
-          <FormCreateRoom onSubmit={onCreateFormSubmit} />
-        </div>
-      )}
-    </div>
-  );
+    );
 };

src/components/rooms/room-list.jsx

@@ -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) {
@@ -14,30 +15,31 @@ 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 [rooms, setRooms] = useState([]);
+    const [selectedRoom, setSelectedRoom] = useState('all');
 
-  useEffect(() => {
-    if (statsParam.rooms) {
-      console.log(statsParam.rooms);
-      let formatedStats = formatRoomStats(statsParam);
-      setRooms(formatedStats.rooms);
-    }
-  }, [statsParam]);
+    useEffect(() => {
+        if (statsParam.rooms) {
+            console.log(statsParam.rooms)
+            let formatedStats = formatRoomStats(statsParam)
+            setRooms(formatedStats.rooms)
+        }
+    }, [statsParam]);
 
-  const handleRoomClick = (roomId) => {
-    onRoomClick(roomId);
-  };
 
-  return (
-    <div>
-      <h2>Liste des chambres</h2>
-      <div className="list-container">
-        {rooms &&
-          rooms.map((room) => (
-            <RoomBox room={room} key={room._id} onRoomClick={handleRoomClick} />
-          ))}
-      </div>
-    </div>
-  );
+    const handleRoomClick = (roomId) => {
+        onRoomClick(roomId);
+    };
+
+    return (
+        <div>
+            <h2>Liste des chambres</h2>
+            <div className="list-container">
+                {rooms && rooms.map((room) => (
+                    <RoomBox room={room} key={room._id} onRoomClick={handleRoomClick} />
+                ))}
+            </div>
+        </div>
+
+    );
 };

src/components/rooms/roomBox.jsx

@@ -1,22 +1,20 @@
-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);
-  };
 
-  return (
-    <div className="room-details" onClick={handleBoxClick}>
-      <Description title={room?.name}>
-        <Characteristic
-          label="Nombre d'articles"
-          value={room?.items_count || "N/A"}
-        />
-        <Characteristic label="Prix total" value={room?.room_price || "N/A"} />
-      </Description>
-    </div>
-  );
+    const handleBoxClick = () => {
+        onRoomClick(room._id);
+    };
+
+    return (
+        <div className="room-details" onClick={handleBoxClick}>
+            <Description title={room?.name}>
+                <Characteristic label="Nombre d'articles" value={room?.items_count || "N/A"} />
+                <Characteristic label="Prix total" value={room?.room_price || "N/A"} />
+            </Description>
+        </div>
+    );
 };

src/pages/rooms.jsx

@@ -1,53 +1,53 @@
-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();
-  const { setPageTitle } = usePageTitle();
-  const [stats, setStats] = useState({});
-  const [selectedRoom, setSelectedRoom] = useState();
+    const { setPageTitle } = usePageTitle();
+    const [stats, setStats] = useState({});
+    const [selectedRoom, setSelectedRoom] = useState();
 
-  useEffect(() => {
-    setPageTitle("Toutes les rooms :");
-  }, [setPageTitle]);
 
-  useEffect(() => {
-    const fetchData = async () => {
-      const roomsStatsResponse = await getRoomStats();
-      setStats(roomsStatsResponse);
+    useEffect(() => {
+        setPageTitle("Toutes les rooms :");
+    }, [setPageTitle]);
+
+
+    useEffect(() => {
+        const fetchData = async () => {
+            const roomsStatsResponse = await getRoomStats();
+            setStats(roomsStatsResponse);
+        };
+
+        fetchData();
+    }, []);
+
+    const handleRoomClick = (roomId) => {
+        console.log('Clicked room ID:', roomId);
+        setSelectedRoom(roomId);
     };
 
-    fetchData();
-  }, []);
-
-  const handleRoomClick = (roomId) => {
-    console.log("Clicked room ID:", roomId);
-    setSelectedRoom(roomId);
-  };
-
   return (
     <div className="manContainer">
-      <div className="topContainer">
-        <div className="statsContainer">
-          <RoomStats statsParam={stats} />
+        <div className="topContainer">
+            <div className="statsContainer">
+                  <RoomStats statsParam={stats} />
+
+            </div>
+              <div className="listContainer">
+                  <RoomList statsParam={stats} onRoomClick={handleRoomClick}></RoomList>
+            </div>
         </div>
-        <div className="listContainer">
-          <RoomList statsParam={stats} onRoomClick={handleRoomClick}></RoomList>
+        <div className="detailContainer">
+              <RoomDetail selectedRoom={selectedRoom} onBack={handleRoomClick}></RoomDetail>
         </div>
-      </div>
-      <div className="detailContainer">
-        <RoomDetail
-          selectedRoom={selectedRoom}
-          onBack={handleRoomClick}
-        ></RoomDetail>
-      </div>
     </div>
   );
 };