resolve conflicts

src/pages/Admin/AdminPage.jsx

@@ -0,0 +1,35 @@
+import { useState, useContext } from "react";
+import styles from "./AdminPage.module.css";
+import ParticipationChart from "../../components/chart/ParticipationChart.jsx";
+import IncompleteEvents from "../../components/IncompleteEvent/IncompleteEvent.jsx";
+import PendingMembers from "../../components/PendingMembers/PendingMembers.jsx";
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
+import { useNavigate } from "react-router";
+
+
+function AdminPage() {
+
+    const { user } = useContext(AuthContext);
+    const navigate = useNavigate();
+
+  const [selected, setSelected] = useState("3");
+  const [participationRate, setParticipationRate] = useState(89);
+
+  /*if(!user.isAdmin) navigate("/");*/
+
+  return (
+    <div className={styles.container}>
+      <ParticipationChart
+        selected={selected}
+        setSelected={setSelected}
+        participationRate={participationRate}
+      />
+      <div className={styles.rightSection}>
+        <IncompleteEvents />
+        <PendingMembers />
+      </div>
+    </div>
+  );
+}
+
+export default AdminPage;

src/pages/Admin/AdminPage.module.css

@@ -0,0 +1,29 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  gap: 20px;
+}
+
+.rightSection {
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+@media screen and (max-width: 760px) {
+  .container {
+    flex-direction: column;
+    width: 100%;
+    padding: 0;
+  }
+
+  .rightSection {
+    width: 100%;
+    margin: 0;
+    margin-bottom: 15px;
+  }
+}

src/pages/PageNotFound/PageNotFound.jsx

@@ -0,0 +1,24 @@
+import Background from "../../components/background/background.jsx";
+import styles from "./PageNotFound.module.css"
+import { useNavigate } from "react-router";
+
+export default function PageNotFound() {
+
+    const navigate = useNavigate();
+
+    return <Background>
+        <div className={styles.content}>
+            <h1 className={styles.title}> Page non trouvée </h1>
+            <div className={`${styles.container} glassCard`}>
+                <p>
+                    Désolé, la page que vous recherchez n’existe pas ou n’est plus disponible. <br/>
+                    Vous pouvez : <br/>
+                    - Vérifier l’URL pour une éventuelle erreur de saisie. <br/>
+                    - Revenir à l’accueil <span onClick={() => navigate("/")} className={styles.redirectSpan}>ici.</span> <br/>
+
+                </p>
+                <p> Contact : contact@example.com </p>
+            </div>
+        </div>
+    </Background>
+}

src/pages/PageNotFound/PageNotFound.module.css

@@ -0,0 +1,33 @@
+.title {
+    color: white;
+    font-size: xx-large;
+    margin-bottom: 20px;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    padding: 10px;
+}
+
+.container {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+
+    p {
+        font-size: large;
+    }
+}
+.redirectSpan {
+    color: blue;
+    text-decoration: underline;
+}
+
+.redirectSpan:hover {
+    cursor: pointer;
+}

src/pages/Profile/ProfilePage.jsx

@@ -8,7 +8,6 @@ import SettingsModal from "../../components/SettingsModal/SettingsModal.jsx";
 function ProfilePage() {
 
     const { user } = useContext(AuthContext);
-
   return (
     <div className={styles.container}>
       <div className={`${styles.profileboard} glassCard`}>
@@ -31,12 +30,12 @@ function ProfilePage() {
               </div>
               <div className={styles.infoBlock}>
                 <p><strong>Mail :</strong> {user.email} </p>
-                <p><strong>Téléphone :</strong> {user.phone}</p>
+                <p><strong>Téléphone :</strong> {user.phone === null ? "Pas de numéro enregistré" : user.phone}</p>
               </div>
                 <SettingsModal />
             </div>
 
-            <h2>Vos Événements :</h2>
+            <h2>Tâches :</h2>
               {user.tasks && user.tasks.length > 0 ? (
                   user.tasks.map((task, index) => (
                       <Task key={index} task={task} />

src/pages/Stat/StatPage.jsx

@@ -1,148 +0,0 @@
-import React, { useState } from "react";
-import { Doughnut } from "react-chartjs-2";
-import { Chart, ArcElement } from "chart.js";
-import styles from "./StatPage.module.css";
-import Button from "./../../components/ui/button/button";
-
-// Enregistrer les éléments nécessaires
-Chart.register(ArcElement);
-
-function StatPage() {
-  const [months, setMonths] = useState(3);
-   
-  const [participationRate, setParticipationRate] = useState(89);
-
-  const incompleteEvents = [
-    { title: "Événement A", tasks: "Préparation des flyers" },
-    { title: "Événement B", tasks: "Réservation de la salle" },
-    { title: "Événement C", tasks: "Communication sur les réseaux" },
-  ];
-
-  const pendingMembers = [
-    { name: "Antoine Ordonneau" },
-    { name: "Giovanni Josserand" },
-    { name: "Quentin T'Jampens" },
-  ];
-
-  const handleValidate = (name) => {
-    console.log(`Valider ${name}`);
-  };
-
-  const handleReject = (name) => {
-    console.log(`Refuser ${name}`);
-  };
-
-  const chartData = {
-    labels: ["Progress", "Background"],
-    datasets: [
-      {
-        data: [participationRate, 100 - participationRate],
-        backgroundColor: ["#1e60f9ff", "#ffffffff"],
-        borderWidth: 0,
-        weight:10,
-        cutout: "90%",
-        circumference: 360,
-        rotation: -90,
-      },
-    ],
-  };
-
-  const chartOptions = {
-    responsive: true,
-    plugins: {
-      legend: {
-        display: false,
-      },
-      tooltip: {
-        enabled: false,
-      },
-    },
-    animation: {
-      animateScale: true,
-      animateRotate: true,
-    },
-  };
-
-  return (
-    <div className={styles.container}>
-      <div className={`${styles.leftBlock} glassCard`}>
-        <div className={styles.participationHeader}>
-          <div className={styles.partiText}>
-          <label htmlFor="months">Taux de participation </label>
-          <label htmlFor="months2">depuis : </label>
-
-          <select
-            id="months"
-            value={months}
-            onChange={(e) => setMonths(e.target.value)}
-            className={styles.monthsDropdown}
-          >
-            <option value="1">1 mois</option>
-            <option value="3">3 mois</option>
-            <option value="6">6 mois</option>
-            <option value="12">12 mois</option>
-          </select>
-          </div>
-          
-        </div>
-        <div className={styles.chartContainer}>
-          <div style={{ position: "relative", width: "100%", height: "100%" }}>
-            <Doughnut data={chartData} options={chartOptions} />
-            <div style={{
-                position: "absolute",
-                top: "50%",
-                left: "50%",
-                textAlign:"center",
-                transform: "translate(-50%, -50%)",
-                fontSize: "60px",
-                fontWeight: "bold",
-                color: "#333",
-              }}
-            >
-              {participationRate}%
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className={styles.rightSection}>
-        <div className={`${styles.rightBlock} glassCard`}>
-          <h2>Événements incomplets</h2>
-          <div className={styles.eventsContainer}>
-            {incompleteEvents.map((event, index) => (
-              <div key={index} className={`glassCard ${styles.eventCard}`}>
-                <h3>{event.title}</h3>
-                <p>{event.tasks}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-        <div className={`${styles.rightBlock} glassCard`}>
-          <h2>Membres en attente de validation</h2>
-          <div className={styles.membersContainer}>
-            {pendingMembers.map((member, index) => (
-              <div key={index} className={`glassCard ${styles.memberCard}`}>
-                <p>{member.name}</p>
-                <div className={styles.buttonGroup}>
-                  <Button
-                    onClick={() => handleValidate(member.name)}
-                    variant="primary"
-                  >
-                    Valider
-                  </Button>
-                  <Button
-                    onClick={() => handleReject(member.name)}
-                    variant="danger"
-                  >
-                    Refuser
-                  </Button>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default StatPage;

src/pages/Stat/StatPage.module.css

@@ -1,194 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  padding: 20px;
-  box-sizing: border-box;
-  gap: 20px;
-}
-/* style a montrer a giovanni prcq il est + bo */
-/*.glassCard {
-  background: rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(10px);
-  border-radius: 10px;
-  padding: 15px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-}*/ 
-
-.block {
-  border-radius: 10px;
-  padding: 15px;
-  box-sizing: border-box;
-}
-
-.leftBlock {
-  width: 40%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height:fit-content;
-}
-
-.participationHeader {
-  display: flex;
-  align-items: center;
-  margin-bottom: 20px;
-  width: 100%;
-}
-.partiText{
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-.participationHeader label{
-  font-size:20px;
-  text-align: center;
-}
-
-.monthsDropdown {
-  width:25%;
-  border-radius: 5px;
-  opacity: 1;
-  background-color: transparent;
-  border:none;
-}
-
-
-.chartContainer {
-  
-  max-width: 80%;
-  margin: 0 auto;
-  position: relative;
-}
-
-
-.circularProgress {
-  width: 100%;
-  height: 100%;
-}
-
-.progressBackground {
-  opacity: 0.3;
-}
-
-.progressBar {
-  transition: stroke-dasharray 0.5s ease; 
-  stroke-linecap: round;
-}
-
-.progressText {
-  font-weight: bold;
-  font-family: Arial, sans-serif;
-}
-
-
-.rightSection {
-  width: 60%;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.rightBlock {
-  width: 100%;
-}
-.rightBlock>h2{
-  font-size:29px;
-}
-
-.eventsContainer {
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  margin-top: 15px;
-}
-
-
-.eventCard {
-  flex: 1;
-  padding: 10px;
-  text-align: center;
-  padding-bottom:200px;
-}
-.eventCard>h3{
-  font-size: 24px;
-}
-.membersContainer {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-top: 15px;
-}
-
-.memberCard {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px;
-}
-.memberCard p{
-  font-weight: bold;
-  font-size: 20px;
-}
-
-
-.buttonGroup {
-  display: flex;
-  gap: 10px;
-  justify-content: right;
-}
-
-
-
-
-@media screen and (max-width: 760px) {
-  .container {
-    flex-direction: column;
-    padding: 10px;
-  }
-
-  .leftBlock {
-    width: 100%;
-    margin-bottom: 20px;
-    height:fit-content;
-  }
-
-  .rightSection {
-    width: 100%;
-  }
-
-  .eventsContainer {
-    flex-direction: column;
-  }
-
-  .eventCard {
-    width: 100%;
-  }
-
-  .donutChart {
-    width: 120px;
-    height: 120px;
-  }
-
-  .memberCard {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 10px;
-    
-  }
-
-  .buttonGroup {
-    width: 100%;
-    justify-content: space-between;
-  }
-
-  .validateButton,
-  .rejectButton {
-    flex: 1;
-    text-align: center;
-    padding: 8px;
-  }
-}
-
-    

src/pages/VolunteerProfile/VolunteerProfilePage.jsx

@@ -0,0 +1,69 @@
+import styles from "./VolunteerProfilePage.module.css"
+import { useParams } from "react-router";
+import { useEffect, useState } from "react";
+import getUserById from "../../utils/users/getUserById.js";
+import formatDate from "../../utils/date/formatDate.js";
+import Task from "../../components/Task/Task.jsx";
+import { useNavigate } from "react-router";
+
+export default function VolunteerProfilePage() {
+
+    const params = useParams();
+    const id = params.id;
+
+    const navigate = useNavigate();
+
+    const [user, setUser] = useState({});
+
+    useEffect(() => {
+        (async () => {
+            const result = await getUserById(id);
+            if (result?.error === 'not_found') {
+                navigate("/404");
+            } else {
+                setUser(result);
+            }
+        })();
+    }, [id]);
+
+
+
+    return <div className={styles.container}>
+        <div className={`${styles.profileboard} glassCard`}>
+            <div className={styles.contentWrapper}>
+                <div className={styles.profilePictureContainer}>
+                    <img
+                        src="/react.svg"
+                        alt="Photo de profil"
+                        className={styles.profilePicture}
+                    />
+                </div>
+                <div className={styles.description}>
+                    <div className={styles.headerProfile}>
+                        <h2> {user.name} {user.lastname} </h2>
+                    </div>
+                    <div className={styles.topDescription}>
+                        <div className={styles.infoBlock}>
+                            <p><strong>Role :</strong> {user.role}</p>
+                            <p><strong>Membre depuis :</strong> {formatDate(user.created_at)}</p>
+                        </div>
+                        <div className={styles.infoBlock}>
+                            <p><strong>Mail :</strong> {user.email} </p>
+                            <p><strong>Téléphone :</strong> {user.phone === null ? "Pas de numéro enregistré" : user.phone}</p>
+                        </div>
+                    </div>
+
+                    <h2>Tâches :</h2>
+                    {user.tasks && user.tasks.length > 0 ? (
+                        user.tasks.map((task, index) => (
+                            <Task key={index} task={task} />
+                        ))
+                    ) : (
+                        <p>Aucune tâche pour le moment.</p>
+                    )}
+
+                </div>
+            </div>
+        </div>
+    </div>
+}

src/pages/VolunteerProfile/VolunteerProfilePage.module.css

@@ -0,0 +1,164 @@
+.container {
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.profileboard {
+    width: 100%;
+    padding: 15px;
+    border-radius: 20px;
+    box-sizing: border-box;
+}
+
+.contentWrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+.profilePictureContainer {
+    width: 120px;
+    height: 120px;
+    margin-bottom: 15px;
+}
+
+.profilePicture {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.description {
+    width: 100%;
+    text-align: left;
+    margin-left:4%;
+}
+
+.topDescription {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 15px;
+}
+
+.infoBlock {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.1);
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.eventTasks {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease-out, opacity 0.2s ease;
+    opacity: 0;
+    padding-left: 20px;
+}
+
+.eventTasks.expanded {
+    max-height: 500px;
+    opacity: 1;
+    margin-top: 10px;
+}
+.description h2{
+    font-size:30px;
+
+}
+.profilePicture{
+    width:90%;
+}
+
+.settingsBtns {
+    display: flex;
+    gap: 5px;
+    justify-content: right;
+}
+
+@media screen and (min-width: 768px) {
+    .contentWrapper {
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: flex-start;
+    }
+
+    .profilePictureContainer {
+        width: 150px;
+        height: 150px;
+        margin-right: 20px;
+        margin-bottom: 0;
+    }
+
+    .description {
+        width: calc(100% - 170px);
+        margin-left:4%;
+    }
+
+    .topDescription {
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .infoBlock {
+        width: 48%;
+    }
+
+    .event {
+        padding: 15px;
+    }
+    .description h2{
+        font-size:30px;
+    }
+    .profilePicture{
+        width:90%;
+    }
+}
+.description button{
+    width:50px;
+    height:50px;
+
+}
+
+.headerProfile {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+/* Desktop (1024px et plus) */
+@media screen and (min-width: 1024px) {
+    .container {
+        max-width: 100%;
+        margin: 0 auto;
+        padding: 20px;
+    }
+
+    .profileboard {
+        padding: 25px;
+    }
+
+    .profilePictureContainer {
+        width: 30%;
+        height:auto;
+    }
+    .profilePicture{
+        width:90%;
+    }
+    .description {
+        width: calc(100% - 200px);
+        margin-left:4%;
+    }
+
+    .event {
+        padding: 18px;
+    }
+    .description h2{
+        font-size:30px;
+    }
+}

src/pages/Volunteers/VolunteerCard.jsx

@@ -58,7 +58,7 @@ export default function VolunteerCard({ user }) {
             {isExpanded && (
                 <div className={styles.bottomBar}>
                     <Button
-                        onClick={() => navigate(`/profile/${id}`)}
+                        onClick={() => navigate(`/profile/${user.id}`)}
                         variant="primary"
                     >
                         Voir plus

src/pages/Volunteers/VolunteersPage.jsx

@@ -24,7 +24,7 @@ function VolunteerPage() {
 
   return (
     <div className={styles.container}>
-        <ToolBar setFilters={setFilters} filters={filters}/>
+        <ToolBar setFilters={setFilters} filters={filters} showCreate={false}/>
         <div className={styles.usersList}>
             {filter(users, filters, "user").map((user, index) => (
                 <VolunteerCard key={index} user={user} />

src/pages/waitValidationPage/ValidationErrorPage.jsx

@@ -0,0 +1,30 @@
+import styles from "./validationErrorPage.module.css"
+import Background from "../../components/background/background.jsx";
+import Button from "../../components/ui/button/button.jsx";
+import { useContext } from "react";
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
+import { Navigate, useNavigate } from "react-router";
+
+export default function ValidationErrorPage() {
+
+    const { logout, user } = useContext(AuthContext);
+    const navigate = useNavigate();
+
+    const handleLogout = async () => {
+        await logout();
+        navigate("/login");
+    }
+
+    if(user && user.validate === 1) return <Navigate to="/" />;
+
+    return <Background>
+        <div className={styles.content}>
+            <h1 className={styles.title}> Votre compte n'a pas été validé </h1>
+            <div className={`${styles.container} glassCard`}>
+                <p> Votre compte n'a pas encore été validé, veuillez attendre la vérification de votre compte par un membre autorisé. </p>
+                <p> Contact : contact@example.com </p>
+                <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
+            </div>
+        </div>
+    </Background>
+}

src/pages/waitValidationPage/validationErrorPage.module.css

@@ -0,0 +1,25 @@
+.title {
+    color: white;
+    font-size: xx-large;
+    margin-bottom: 20px;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    padding: 10px;
+}
+
+.container {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+
+    p {
+        font-size: large;
+    }
+}