+
+ );
+}
+
+export default AdminPage;
diff --git a/src/pages/Admin/AdminPage.module.css b/src/pages/Admin/AdminPage.module.css
new file mode 100644
index 0000000..ced6cdf
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/pages/Home/HomePage.jsx b/src/pages/Home/HomePage.jsx
index ae603b2..e1c9849 100644
--- a/src/pages/Home/HomePage.jsx
+++ b/src/pages/Home/HomePage.jsx
@@ -1,181 +1,26 @@
-import { useState } from "react";
-import { useMemo } from "react";
import styles from "./HomePage.module.css";
+import Calendar from "../../components/homePage/calendar.jsx";
+import EventList from "../../components/homePage/eventList.jsx";
+import { useState, useEffect } from "react";
+import getAllEvents from "../../utils/events/getAllEvents.js";
function HomePage() {
- const events = {
- "2025-11-07": ["Réunion de projet", "Anniversaire de Marie"],
- "2025-11-10": ["Cours de React", "Rendez-vous médecin"],
- "2025-11-14": ["Sortie cinéma"],
- };
- const monthNames = [
- "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
- "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
- ];
+ const [events, setEvents] = useState([]);
- const today = new Date();
- const [currentMonth, setCurrentMonth] = useState(today.getMonth());
- const [currentYear, setCurrentYear] = useState(today.getFullYear());
- const [selectedDay, setSelectedDay] = useState(() => {
- const year = today.getFullYear();
- const month = String(today.getMonth() + 1).padStart(2, "0");
- const day = String(today.getDate()).padStart(2, "0");
- const key = `${year}-${month}-${day}`;
- return { date: key, events: events[key] || [] };
- });
-
- const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
- const firstDay = new Date(currentYear, currentMonth, 1).getDay();
- const startDay = (firstDay + 6) % 7;
-
- const days = [];
- for (let i = 0; i < startDay; i++) days.push(null);
- for (let i = 1; i <= daysInMonth; i++) days.push(i);
-
- const handlePrevMonth = () => {
- let newMonth = currentMonth - 1;
- let newYear = currentYear;
-
- if (newMonth < 0) {
- newMonth = 11;
- newYear--;
- }
-
- setCurrentMonth(newMonth);
- setCurrentYear(newYear);
-
- const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
- setSelectedDay({ date: key, events: events[key] || [] });
- };
-
- const handleNextMonth = () => {
- let newMonth = currentMonth + 1;
- let newYear = currentYear;
-
- if (newMonth > 11) {
- newMonth = 0;
- newYear++;
- }
-
- setCurrentMonth(newMonth);
- setCurrentYear(newYear);
-
- const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
- setSelectedDay({ date: key, events: events[key] || [] });
- };
-
- const handleDayClick = (day) => {
- if (!day) return;
- const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
- setSelectedDay({ date: key, events: events[key] || [] });
- };
-
- const sortedEvents = useMemo(() => {
- return Object.entries(events)
- .map(([dateKey, eventList]) => ({ date: dateKey, events: eventList }))
- .sort((a, b) => new Date(a.date) - new Date(b.date));
- }, [events]);
-
- const formatDate = (dateString) => {
- const [year, month, day] = dateString.split('-');
- return `${day} ${monthNames[parseInt(month) - 1]} ${year}`;
- };
+ useEffect(() => {
+ (async () => {
+ const data = await getAllEvents();
+ setEvents(data.data);
+ }) ()
+ }, [])
return (
+
+
-
);
}
-export default HomePage;
\ No newline at end of file
+export default HomePage;
diff --git a/src/pages/Home/HomePage.module.css b/src/pages/Home/HomePage.module.css
index 7d6a67a..abf6145 100644
--- a/src/pages/Home/HomePage.module.css
+++ b/src/pages/Home/HomePage.module.css
@@ -1,173 +1,14 @@
-.calendarContainer {
- padding: 20px;
- font-family: Arial, sans-serif;
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-.calendarHeader {
- display: flex;
- width: 100%;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- gap: 10px;
-}
-
-.calendarHeader p {
- width: auto;
- text-align: center;
- font-weight: bold;
- font-size: 40px;
-}
-
-.calendarHeader button {
- top: 50%;
- left: 50%;
- width: 40px;
- height: 40px;
- border-radius: 50%;
- border: none;
- background: transparent;
- box-shadow:
- inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
- inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
- inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
- inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
- font-size: 15px;
- color: #019AFF;
- cursor: pointer;
-}
-
-.calendar {
- border-collapse: collapse;
- width: 80%;
- max-width: 500px;
-}
-
-.calendar th, .calendar td {
- border: none;
- padding: 10px;
- width: 14.2%;
- line-height: 130%;
- text-align: center;
- cursor: pointer;
-}
-
-.today {
- color: #007bff;
-}
-
-.hasEvent {
- position: relative;
-}
-
-.hasEvent::before {
- content: "";
- position: absolute;
- left: 50%;
- bottom: 10px;
- width: 20px;
- height: 2px;
- background-color: #007bff;
- transform: translateX(-50%);
- border-radius: 10px;
-}
-
-.hasEvent.selected::before {
- width: 25px;
- height: 2px;
- bottom: 10px;
-}
-
-.selected {
- position: relative;
- font-size: 18px;
- font-weight: 600;
-}
-
-.selected::after {
- content: "";
- position: absolute;
- top: 50%;
- left: 50%;
- width: 40px;
- height: 40px;
- transform: translate(-50%, -50%);
- border-radius: 38%;
- pointer-events: none;
- background: transparent;
- box-shadow:
- inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
- inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
- inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
- inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
-}
-
-.eventBox {
- border-radius: 20px;
- padding: 15px;
- margin-top: 16px;
- border: none;
- background: rgb(255, 255, 255, 0.25);
- box-shadow:
- inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
- inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
- inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
- inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
-}
-
-.eventBox ul {
- list-style-type: disc;
-}
-
-.eventGroup{
- border-radius: 20px;
- padding: 15px;
- margin-top: 16px;
- border: none;
- background: rgb(255, 255, 255, 0.25);
- box-shadow:
- inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
- inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
- inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
- inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
-}
-
-.glassCard {
- width: 45%;
- margin: 16px;
- padding: 10px 20px 10px 20px;
- height: fit-content;
- background: rgba(255, 255, 255, 0.65);
- backdrop-filter: blur(3px);
- -webkit-backdrop-filter: blur(3px);
- border-radius: 20px;
- border: 1px solid rgba(255, 255, 255, 0.3);
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
- inset 0 1px 0 rgba(255, 255, 255, 0.5),
- inset 0 -1px 0 rgba(255, 255, 255, 0.1),
- inset 0 0 8px 4px rgba(255, 255, 255, 0.4);
- overflow: hidden;
-}
.allContent{
display: flex;
flex-direction: row;
+ justify-content: center;
+ gap: 80px;
}
@media (max-width: 768px) {
- .glassCard {
- width: 100%;
- margin: 0px;
- margin-top: 16px;
- margin-bottom: 16px;
- display: flex;
- }
-
-
.allContent{
display: flex;
flex-direction: column;
+ gap: 0;
}
}
\ No newline at end of file
diff --git a/src/pages/Login/LoginPage.jsx b/src/pages/Login/LoginPage.jsx
index 79af77a..65d1d12 100644
--- a/src/pages/Login/LoginPage.jsx
+++ b/src/pages/Login/LoginPage.jsx
@@ -10,11 +10,16 @@ function LoginPage() {
const { user, loading } = useContext(AuthContext)
const navigate = useNavigate();
+
+
useEffect(() => {
+ console.log("loading" + loading);
+ console.log("user" + user);
+
if (!loading && user) {
navigate("/");
}
- }, [loading, user]);
+ }, [loading, navigate, user]);
return (
-
-
-
-
-
-
- {selectedDay && (
-
-
-
-
-
- {monthNames[currentMonth]} {currentYear}
- -| Lun | -Mar | -Mer | -Jeu | -Ven | -Sam | -Dim | -
|---|---|---|---|---|---|---|
| handleDayClick(day)} - > - {day || ""} - | - ); - })} -
-
- )}
- Événements du {formatDate(selectedDay.date)}
- - {selectedDay.events.length > 0 ? ( --
- {selectedDay.events.map((ev, i) => (
-
- {ev} - ))} -
Aucun événement ce jour-là.
- )} -
-
+
-
- Liste des Événements à Venir
- {sortedEvents.length > 0 ? ( --
- {sortedEvents.map((eventGroup) => (
-
-
- - {formatDate(eventGroup.date)} --
-
- {eventGroup.events.map((event, i) => (
-
- - {event} - ))} -
- ))}
-
Aucun événement planifié pour l'instant.
- )} -
+
+ Page non trouvée
+
+
+
+ Désolé, la page que vous recherchez n’existe pas ou n’est plus disponible.
+ Vous pouvez :
+ - Vérifier l’URL pour une éventuelle erreur de saisie.
+ - Revenir à l’accueil navigate("/")} className={styles.redirectSpan}>ici.
+
+
Contact : contact@example.com
+
@@ -31,12 +30,12 @@ function ProfilePage() {
Mail : {user.email}
-Téléphone : {user.phone}
+Téléphone : {user.phone === null ? "Pas de numéro enregistré" : user.phone}
Vos Événements :
+Tâches :
{user.tasks && user.tasks.length > 0 ? ( user.tasks.map((task, index) => (
-
- );
-}
-
-export default StatPage;
diff --git a/src/pages/Stat/StatPage.module.css b/src/pages/Stat/StatPage.module.css
deleted file mode 100644
index 666a610..0000000
--- a/src/pages/Stat/StatPage.module.css
+++ /dev/null
@@ -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;
- }
-}
-
-
diff --git a/src/pages/VolunteerProfile/VolunteerProfilePage.jsx b/src/pages/VolunteerProfile/VolunteerProfilePage.jsx
new file mode 100644
index 0000000..1f18805
--- /dev/null
+++ b/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
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {participationRate}%
-
-
-
-
-
- Événements incomplets
-
- {incompleteEvents.map((event, index) => (
-
-
-
- ))}
- {event.title}
-{event.tasks}
-
-
- Membres en attente de validation
-
- {pendingMembers.map((member, index) => (
-
-
-
- ))}
- {member.name}
-
-
-
-
-
+
+}
\ No newline at end of file
diff --git a/src/pages/VolunteerProfile/VolunteerProfilePage.module.css b/src/pages/VolunteerProfile/VolunteerProfilePage.module.css
new file mode 100644
index 0000000..834af59
--- /dev/null
+++ b/src/pages/VolunteerProfile/VolunteerProfilePage.module.css
@@ -0,0 +1,163 @@
+.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;
+}
+
+@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;
+ }
+}
diff --git a/src/pages/waitValidationPage/ValidationErrorPage.jsx b/src/pages/waitValidationPage/ValidationErrorPage.jsx
new file mode 100644
index 0000000..15995e9
--- /dev/null
+++ b/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
+
+
+
+
+ 
+
+
+
+
+
+
+ {user.name} {user.lastname}
+
+
+
+
+
+ Role : {user.role}
+Membre depuis : {formatDate(user.created_at)}
+
+
+ Mail : {user.email}
+Téléphone : {user.phone === null ? "Pas de numéro enregistré" : user.phone}
+Tâches :
+ {user.tasks && user.tasks.length > 0 ? ( + user.tasks.map((task, index) => ( +Aucune tâche pour le moment.
+ )} + +
+
+ Votre compte n'a pas été validé
+
+
+ Votre compte n'a pas encore été validé, veuillez attendre la vérification de votre compte par un membre autorisé.
+Contact : contact@example.com
+ +