Merge branch 'dev' into features/notifications
# Conflicts: # package-lock.json # package.json # src/components/Header/Header.jsx
This commit is contained in:
Giovanni committed
commit
6da4880f0d
42 files changed
+2469
-1656
No files matched your search
@@ -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] = 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;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
+14
-169
@@ -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 (
|
||||
<div className={styles.allContent}>
|
||||
<div className={styles.glassCard}>
|
||||
<div className={styles.calendarContainer}>
|
||||
<div className={styles.calendarHeader}>
|
||||
<button onClick={handlePrevMonth}>◀</button>
|
||||
<p>{monthNames[currentMonth]} {currentYear}</p>
|
||||
<button onClick={handleNextMonth}>▶</button>
|
||||
</div>
|
||||
|
||||
<table className={styles.calendar}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Lun</th>
|
||||
<th>Mar</th>
|
||||
<th>Mer</th>
|
||||
<th>Jeu</th>
|
||||
<th>Ven</th>
|
||||
<th>Sam</th>
|
||||
<th>Dim</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{Array.from({ length: Math.ceil(days.length / 7) }).map((_, weekIndex) => (
|
||||
<tr key={weekIndex}>
|
||||
{days.slice(weekIndex * 7, weekIndex * 7 + 7).map((day, index) => {
|
||||
const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
|
||||
const hasEvent = events[key];
|
||||
|
||||
return (
|
||||
<td
|
||||
key={index}
|
||||
className={[
|
||||
day === today.getDate() &&
|
||||
currentMonth === today.getMonth() &&
|
||||
currentYear === today.getFullYear()
|
||||
? styles.today : "",
|
||||
hasEvent ? styles.hasEvent : "",
|
||||
selectedDay?.date === key ? styles.selected : ""
|
||||
].join(" ")}
|
||||
onClick={() => handleDayClick(day)}
|
||||
>
|
||||
{day || ""}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{selectedDay && (
|
||||
<div className={styles.eventBox}>
|
||||
<h3>Événements du {formatDate(selectedDay.date)}</h3>
|
||||
|
||||
{selectedDay.events.length > 0 ? (
|
||||
<ul>
|
||||
{selectedDay.events.map((ev, i) => (
|
||||
<li key={i}>{ev}</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p>Aucun événement ce jour-là.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.glassCard}>
|
||||
<div className={styles.eventListContainer}>
|
||||
<h2>Liste des Événements à Venir</h2>
|
||||
{sortedEvents.length > 0 ? (
|
||||
<ul className={styles.eventList}>
|
||||
{sortedEvents.map((eventGroup) => (
|
||||
<li key={eventGroup.date} className={styles.eventGroup}>
|
||||
<div className={styles.eventDate}>
|
||||
<strong>{formatDate(eventGroup.date)}</strong>
|
||||
</div>
|
||||
<ul className={styles.eventDetails}>
|
||||
{eventGroup.events.map((event, i) => (
|
||||
<li key={i}>- {event}</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p>Aucun événement planifié pour l'instant.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Calendar events={events} />
|
||||
<EventList events={events} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HomePage;
|
||||
export default HomePage;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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 (
|
||||
<Background>
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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} />
|
||||
|
||||
@@ -131,7 +131,6 @@
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Desktop (1024px et plus) */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 100%;
|
||||
|
||||
@@ -1,157 +0,0 @@
|
||||
import React, { useState, useEffect, useContext } 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";
|
||||
import { AuthContext } from "../../contexts/auth/AuthContext.js";
|
||||
import { useNavigate } from "react-router";
|
||||
|
||||
// Enregistrer les éléments nécessaires
|
||||
Chart.register(ArcElement);
|
||||
|
||||
function StatPage() {
|
||||
|
||||
const { user } = useContext(AuthContext);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [months, setMonths] = useState(3);
|
||||
const [participationRate, setParticipationRate] = useState(89);
|
||||
|
||||
useEffect(() => {
|
||||
if(!user.isAdmin) navigate("/")
|
||||
}, [])
|
||||
|
||||
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;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user