Compare commits

..

No commits in common. "68cd3397d49ff577e1fefbf7bbd011f204c29ed3" and "18b7052259535f73f8cb11e18ea7bb44dc6fe6e9" have entirely different histories.

14 changed files with 90 additions and 189 deletions

Binary file not shown.

Binary file not shown.

26
package-lock.json generated
View File

@ -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"

View File

@ -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",

View File

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

View File

@ -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>
);
};

View File

@ -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>
);
};

View File

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

View File

@ -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>
);
};

View File

@ -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>
);
};

View File

@ -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>
);
};

View File

@ -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>
);
};

View File

@ -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>
);

View File

@ -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>
);