14 changed files with 90 additions and 189 deletions
--- a/.vs/2024-DEV-BUT3/v17/.wsuo
+++ b/.vs/2024-DEV-BUT3/v17/.wsuo
--- a/.vs/slnx.sqlite
+++ b/.vs/slnx.sqlite
--- a/package-lock.json
+++ b/package-lock.json
@ -16,7 +16,7 @@
        "react": "^18.2.0",
        "react-cookie": "^7.0.2",
        "react-dom": "^18.2.0",
-        "react-router-dom": "^6.23.1"
+        "react-router-dom": "^6.21.3"
      },
      "devDependencies": {
        "@playwright/test": "^1.42.1",
@ -990,9 +990,9 @@
      }
    },
    "node_modules/@remix-run/router": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
-      "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz",
+      "integrity": "sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==",
      "engines": {
        "node": ">=14.0.0"
      }
@ -5312,11 +5312,11 @@
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
    "node_modules/react-router": {
-      "version": "6.23.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
-      "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
+      "version": "6.21.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.3.tgz",
+      "integrity": "sha512-a0H638ZXULv1OdkmiK6s6itNhoy33ywxmUFT/xtSoVyf9VnC7n7+VT4LjVzdIHSaF5TIh9ylUgxMXksHTgGrKg==",
      "dependencies": {
-        "@remix-run/router": "1.16.1"
+        "@remix-run/router": "1.14.2"
      },
      "engines": {
        "node": ">=14.0.0"
@ -5326,12 +5326,12 @@
      }
    },
    "node_modules/react-router-dom": {
-      "version": "6.23.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
-      "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
+      "version": "6.21.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.3.tgz",
+      "integrity": "sha512-kNzubk7n4YHSrErzjLK72j0B5i969GsuCGazRl3G6j1zqZBLjuSlYBdVdkDOgzGdPIffUOc9nmgiadTEVoq91g==",
      "dependencies": {
-        "@remix-run/router": "1.16.1",
-        "react-router": "6.23.1"
+        "@remix-run/router": "1.14.2",
+        "react-router": "6.21.3"
      },
      "engines": {
        "node": ">=14.0.0"
--- a/package.json
+++ b/package.json
@ -22,7 +22,7 @@
    "react": "^18.2.0",
    "react-cookie": "^7.0.2",
    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.23.1"
+    "react-router-dom": "^6.21.3"
  },
  "devDependencies": {
    "@playwright/test": "^1.42.1",
--- a/src/assets/styles/room-list.css
+++ b/src/assets/styles/room-list.css
@ -1,38 +0,0 @@
-.list-container {
-    width: 100%;
-    max-height:500px;
-    overflow-y: auto; /* Activer le défilement vertical si nécessaire */
-    padding: 20px; /* Espace intérieur de la liste */
-}
-
-.room-details {
-    width: 100%; /* Largeur de chaque boîte */
-    background-color: #f9f9f9;
-    border-radius: 10px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    padding: 20px;
-    margin-bottom: 20px; /* Espace entre chaque boîte */
-    transition: transform 0.3s ease;
-}
-
-    .room-details:hover {
-        transform: translateY(-5px); /* Effet d'élévation au survol */
-    }
-
-    .room-details .title {
-        font-size: 18px;
-        font-weight: bold;
-        margin-bottom: 10px;
-    }
-
-    .room-details .characteristic {
-        margin-bottom: 10px;
-    }
-
-    .room-details .label {
-        font-weight: bold;
-    }
-
-    .room-details .value {
-        color: #666;
-    }
--- a/src/components/diagram.jsx
+++ b/src/components/diagram.jsx
@ -15,19 +15,14 @@ const Diagram = ({ data }) => {
    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 (
+            {diagramData.map(({ name, value }) => (
                <div key={name} className="row-container">
                    <div className="label">{name}</div>
-                        <div className="row" style={{ width: `${(scaledValue / scaledMaxValue) * 100}%` }}>
+                    <div className="row" style={{ width: `${(value / maxValue) * 100}%` }}>
                        <div className="value">{value}</div>
                    </div>
                </div>
-                );
-            })}
+            ))}
        </div>
    );
 };
--- a/src/components/item/ItemBox.jsx
+++ b/src/components/item/ItemBox.jsx
@ -3,14 +3,28 @@ 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 Description
+const Description = ({ title, children }) => {
+  return (
+    <div className="description">
+          <h2 className="text-ellipsis">{title}</h2>
+      {children}
+    </div>
+  );
+};

+// Composant Caractéristique
+const Characteristic = ({ label, value }) => {

+  return (
+    <div className="characteristic">
+      <strong>{label}:</strong> {value}
+    </div>
+  );
+};



--- a/src/components/nav/Navbar.jsx
+++ b/src/components/nav/Navbar.jsx
@ -42,10 +42,10 @@ const Navbar = () => {

    const items = [
        <Menu.Item key="0">
-            <Link to="/logout">Login / Logout</Link>
+            <Link to="/">Menu Principal</Link>
        </Menu.Item>,
        <Menu.Item key="1" >
-            <Link to="/home">Menu Principal</Link>
+            <Link to="/home">Home</Link>
        </Menu.Item>,
        <Menu.Item key="2" >
            <Link to="/items">Tous les articles</Link>
--- a/src/components/parts/characteristic.jsx
+++ b/src/components/parts/characteristic.jsx
@ -1,11 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-// Composant Caractéristique
-export const Characteristic = ({ label, value }) => {
-
-    return (
-        <div className="characteristic">
-            <strong>{label}:</strong> {value}
-        </div>
-    );
-};
--- a/src/components/parts/description.jsx
+++ b/src/components/parts/description.jsx
@ -1,11 +0,0 @@
-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>
-    );
-};
--- a/src/components/rooms/room-detail.jsx
+++ b/src/components/rooms/room-detail.jsx
@ -1,45 +0,0 @@
-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);
-
-    useEffect(() => {
-        if (selectedRoom) {
-            setIsUpdateFormVisible(true)
-        }
-    }, [selectedRoom]);
-
-
-    // Afficher le formulaire de mise ŕ jour lorsqu'une chambre est sélectionnée
-    const handleRoomClick = () => {
-        setIsUpdateFormVisible(true);
-    };
-
-    // Afficher le formulaire de création lorsqu'on revient en arričre
-    const handleBackClick = () => {
-        setIsUpdateFormVisible(false);
-        onBack(null);
-    };
-
-    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>
-    );
-};
--- a/src/components/rooms/room-list.jsx
+++ b/src/components/rooms/room-list.jsx
@ -1,9 +1,17 @@
 import React, { useState, useEffect } from "react";
-import '../../assets/styles/room-list.css'
-import { RoomBox } from '../../components/rooms/roomBox'
-import { formatRoomStats } from "../../api/room";
+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; // 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 = [];
@ -14,32 +22,25 @@ const chunkArray = (arr, size) => {
 };

 // Composant d'affichage de la page
-export const RoomList = ({ statsParam, onRoomClick }) => {
+export const RoomList = (roomsParam) => {
  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]);
+        setRooms(roomsParam)
+    }, [roomsParam]);

-
-    const handleRoomClick = (roomId) => {
-        onRoomClick(roomId);
+  const handleRoomChange = (value) => {
+    setSelectedRoom(value);
  };

  return (
-        <div>
-            <h2>Liste des chambres</h2>
      <div className="list-container">
-                {rooms && rooms.map((room) => (
-                    <RoomBox room={room} key={room._id} onRoomClick={handleRoomClick} />
-                ))}
+          <div className="room-list">
+              {rooms.forEach((room) => {
+                  <roomB
+              }) }
          </div>
      </div>
-
  );
 };
--- a/src/components/rooms/roomBox.jsx
+++ b/src/components/rooms/roomBox.jsx
@ -1,19 +1,22 @@
-import React from 'react';
-import '../../assets/styles/room-list.css';
-import { Description } from '../parts/description';
-import { Characteristic } from '../parts/characteristic';
+import React, { useEffect, useState } from 'react';
+import '../../assets/styles/itembox.css'
+import { } from '../item/ItemBox'

-export const RoomBox = ({ room, onRoomClick }) => {

-    const handleBoxClick = () => {
-        onRoomClick(room._id);
-    };
+// Composant Détails du Produit
+export const RoomBox = ({ name, itemCount, roomPrice, _id }) => {
+    const [roomData, setRoomData] = useState();
+
+    useEffect(() => {
+        setRoomData({name, itemCount, roomPrice, _id})
+    }, [name, itemCount, roomPrice, _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"} />
+        <div className="product-details" > 
+            <Description title={roomData.name} >
+                <Characteristic label="Nombre d'articles" value={roomData.itemCount} />
+                <Characteristic label="Prix total" value={roomData.roomPrice} />
            </Description>
        </div>
    );
--- a/src/pages/rooms.jsx
+++ b/src/pages/rooms.jsx
@ -2,24 +2,21 @@ import React, { useEffect, useState } from 'react';
 import '../assets/styles/room-page.css'

 import { useAuth } from "../hooks";
-import { getRoomStats } from "../api/room";
+import { formatRoomStats, getRooms, 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';

 export const Rooms = () => {
  const { user } = useAuth();
    const { setPageTitle } = usePageTitle();
    const [stats, setStats] = useState({});
-    const [selectedRoom, setSelectedRoom] = useState();


+    // Mettre à jour le titre de la page dans le contexte
    useEffect(() => {
        setPageTitle("Toutes les rooms :");
    }, [setPageTitle]);

-
    useEffect(() => {
        const fetchData = async () => {
            const roomsStatsResponse = await getRoomStats();
@ -29,10 +26,6 @@ export const Rooms = () => {
        fetchData();
    }, []);

-    const handleRoomClick = (roomId) => {
-        console.log('Clicked room ID:', roomId);
-        setSelectedRoom(roomId);
-    };

  return (
    <div className="manContainer">
@ -42,11 +35,11 @@ export const Rooms = () => {

            </div>
            <div className="listContainer">
-                  <RoomList statsParam={stats} onRoomClick={handleRoomClick}></RoomList>
            </div>
        </div>
        <div className="detailContainer">
-              <RoomDetail selectedRoom={selectedRoom} onBack={handleRoomClick}></RoomDetail>
+            <RoomStats statsParam={stats} />
+
        </div>
    </div>
  );