ajout de composants pour li'nterface admin

code/interface_admin/pages/avis/[id].js

@@ -0,0 +1,10 @@
+import { useRouter } from 'next/router';
+import React from 'react'
+import Avis from '../../components/Avis';
+export default function AvisPage() {
+  const router = useRouter();
+  const {id} = router.query;
+  return (
+    <Avis age={20} sex={"f"} text={"dfjlkmksgflkgsjmdf"} grade={9} date={"2023-10-12 12:34"} gradeOther={[{title: "Propreté", grade: 8},{title: "Lorem ipsum", grade: 8}]}/>
+  )
+}

code/interface_admin/pages/avis/index.js

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react'
+import { Card, Container, Form, Row, Table } from 'react-bootstrap'
+import AvisList from '../../components/AvisList';
+import styles from '../../styles/AvisListPage.module.css'
+
+export default function AvisListPage() {
+    const [minGrade, setMinGrade] = useState(0);
+    const [maxGrade, setMaxGrade] = useState(10);
+
+    useEffect(() => {
+      if(minGrade > maxGrade) {
+        setMinGrade(maxGrade);
+      }
+    }, [maxGrade]);
+    useEffect(() => {
+        if(minGrade > maxGrade) {
+            setMaxGrade(minGrade);
+        }
+    }, [minGrade])
+    
+    const [avis, setAvis] = useState([
+        { id: 0, date: "2023-02-11", grade: 10, comment: "lorem ipsum lorem ipsum" },
+        { id: 1, date: "2023-02-11", grade: 10, comment: "Lorem ipsum lorem ipsum" },
+        { id: 2, date: "2023-02-11", grade: 10, comment: "Lorem ipsum lorem ipsum" },
+        { id: 3, date: "2023-02-11", grade: 10, comment: "Lorem ipsum lorem ipsum" }
+    ])
+
+    return (
+        <Container fluid>
+            <Card>
+                <Card.Header>Tous les avis</Card.Header>
+                <Card.Body>
+                    <Row>
+                        <Form>
+                            <Form.Group>
+                                <Form.Label>Types d'avis</Form.Label>
+                                <Form.Check
+                                    type="switch"
+                                    label="Automatique"
+                                />
+                                <Form.Check
+                                    type="switch"
+                                    label="Manuel"
+                                />
+                            </Form.Group>
+                            <Form.Group>
+                                <Form.Label>Note</Form.Label>
+                                <div  className='d-flex flex-row justify-content-around col-md-6'>
+                                    <div>Min : {minGrade}/10</div>
+                                    <div className={styles.sliderContainer}>
+                                        <input type="range" value={minGrade} onChange={(e) => setMinGrade(e.target.value)} min="0" max="10" step="1" className={styles.slider}></input>
+                                        <input type="range" value={maxGrade} onChange={(e) => setMaxGrade(e.target.value)} min="0" max="10" step="1" className={styles.slider}></input>
+                                    </div>
+                                    <div>Max : {maxGrade}/10</div>
+                                </div>
+                            </Form.Group>
+                        </Form>
+                    </Row>
+                    <Row>
+                        <AvisList avis={avis} />
+                    </Row>
+                </Card.Body>
+            </Card>
+        </Container >
+    )
+}

code/interface_admin/pages/index.js

@@ -1,14 +1,58 @@
 import Head from 'next/head'
-import { Inter } from '@next/font/google'
 import { Card, Container } from 'react-bootstrap'
 import ComparativeBarChart from '../components/ComparativeBarChart'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import styles from "../styles/Home.module.css"
 
-const inter = Inter({ subsets: ['latin'] })
 
 export default function Home() {
-	const [datasets, setDatasets] = useState([[1, 2, 3, 4, 5, 6, 7], [7, 6, 5, 4, 3, 2, 1]]);
+	const [datasets, setDatasets] = useState([
+	]);
+	const [averages, setAverages] = useState([]);
+	const [differences, setDifferences] = useState([]);
+	useEffect(() => {
+		let newAverages = []
+		let newDifferences = []
+		for (let i = 0; i < datasets.length; i++) {
+			newAverages[i] = datasets[i].current.reduce((a, b) => a + b) / datasets[i].current.length
+			newDifferences[i] = newAverages[i] - datasets[i].previous.reduce((a, b) => a + b) / datasets[i].previous.length
+		}
+		setAverages(newAverages);
+		setDifferences(newDifferences);
+	}, [datasets]);
 
+	useEffect(() => setDatasets([
+		{ title: "Nombre d'avis", current: [3, 2, 3, 4, 5, 6, 7], previous: [7, 6, 5, 4, 3, 2, 1] },
+		{ title: "Notes moyennes", current: [1, 2, 3, 4, 5, 6, 7], previous: [7, 6, 5, 4, 3, 2, 1] }
+	]), []);
+	function dataVisualizer(title, current, previous, average, difference) {
+		return <>
+			<h3>{title}</h3>
+			<Card className={styles.averageCard}>
+				<Card.Title>Moyenne</Card.Title>
+				<Card.Body className={styles.averageCardBody}>
+					<div
+						className={styles.averageMainValue}
+					>
+						{Math.round(average*1e2)/1e2}
+					</div>
+					<div
+						className={[styles.averageCardSecondaryValue, difference >= 0 ? styles.averagePositive : styles.averageNegative].join(' ')}
+					>
+						{(difference >= 0 ? "+" : "-") + Math.round(difference*1e2)/1e2}
+					</div>
+				</Card.Body>
+			</Card>
+			<ComparativeBarChart
+				xlabels={["lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi", "dimanche"]}
+				label0="Cette semaine"
+				label1="La semaine dernière"
+				data0={current}
+				data1={previous}
+			/>
+			<hr />
+		</>
+	}
 
 	return (
 		<>
@@ -18,26 +62,11 @@ export default function Home() {
 			</Head>
 			<Container fluid>
 				<Card>
-					<Card.Header as="h2">Vos performances de cette semaine</Card.Header>
+					<Card.Header as="h2">Vos performances cette semaine</Card.Header>
+					<Card.Body>
+						{datasets.map((set, i) => dataVisualizer(set.title, set.current, set.previous, averages[i], differences[i]))}
+					</Card.Body>
 					<div className='col col-12 col-lg-8 mx-auto'>
-						<Card.Body className='w-100'>
-							<ComparativeBarChart
-								xlabels={["lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi", "dimanche"]}
-								label0="Cette semaine"
-								label1="La semaine dernière"
-								title="Note moyenne"
-								data0={datasets[0]}
-								data1={datasets[1]}
-							/>
-							<ComparativeBarChart
-								xlabels={["lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi", "dimanche"]}
-								label0="Cette semaine"
-								label1="La semaine dernière"
-								title="Nombre d'avis"
-								data0={datasets[0]}
-								data1={datasets[1]}
-							/>
-						</Card.Body>
 					</div>
 				</Card>
 			</Container>