+
+
+
+
+
+
{monthNames[currentMonth]} {currentYear}
+
+
+
+
+
+
+ | Lun |
+ Mar |
+ Mer |
+ Jeu |
+ Ven |
+ Sam |
+ Dim |
+
+
+
+
+ {Array.from({ length: Math.ceil(days.length / 7) }).map((_, 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 (
+ | handleDayClick(day)}
+ >
+ {day || ""}
+ |
+ );
+ })}
+
+ ))}
+
+
+
+ {selectedDay && (
+
+
É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 ? (
+
+ ) : (
+
Aucun événement planifié pour l'instant.
+ )}
+
+
- )
+ );
}
export default HomePage;
\ No newline at end of file
diff --git a/src/pages/Home/HomePage.module.css b/src/pages/Home/HomePage.module.css
index e83a063..7d6a67a 100644
--- a/src/pages/Home/HomePage.module.css
+++ b/src/pages/Home/HomePage.module.css
@@ -1,3 +1,173 @@
-.title {
- color: red;
+.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;
+}
+
+@media (max-width: 768px) {
+ .glassCard {
+ width: 100%;
+ margin: 0px;
+ margin-top: 16px;
+ margin-bottom: 16px;
+ display: flex;
+ }
+
+
+ .allContent{
+ display: flex;
+ flex-direction: column;
+ }
}
\ No newline at end of file
diff --git a/src/pages/Login/LoginPage.jsx b/src/pages/Login/LoginPage.jsx
index 95a194a..79af77a 100644
--- a/src/pages/Login/LoginPage.jsx
+++ b/src/pages/Login/LoginPage.jsx
@@ -1,14 +1,29 @@
import styles from "./LoginPage.module.css";
-import LoginForm from "../../components/form/form.jsx";
+import LoginForm from "../../components/loginform/loginForm.jsx";
+import Background from "../../components/background/background.jsx";
+import { useEffect, useContext } from "react";
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
+import { useNavigate } from "react-router";
function LoginPage() {
- return (
-
-
-
- );
+
+ const { user, loading } = useContext(AuthContext)
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (!loading && user) {
+ navigate("/");
+ }
+ }, [loading, user]);
+
+ return (
+
+
+
Connexion
+
+
+
+ );
}
export default LoginPage;
-
-
diff --git a/src/pages/Login/LoginPage.module.css b/src/pages/Login/LoginPage.module.css
index fc62d28..69e4f8c 100644
--- a/src/pages/Login/LoginPage.module.css
+++ b/src/pages/Login/LoginPage.module.css
@@ -1,15 +1,23 @@
.container {
- position: relative;
+ position: absolute;
z-index: 2;
display: flex;
+ flex-direction: column;
width: 600px;
- overflow: hidden;
max-height: 80%;
justify-content: center;
align-items: center;
padding: 20px;
- border-radius:12px;
+ border-radius: 12px;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
}
-
-
+.title {
+ font-size: 36px;
+ color: white;
+ text-align: center;
+ margin-bottom: 20px;
+ text-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}
diff --git a/src/pages/Profile/ProfilePage.jsx b/src/pages/Profile/ProfilePage.jsx
new file mode 100644
index 0000000..aaa1338
--- /dev/null
+++ b/src/pages/Profile/ProfilePage.jsx
@@ -0,0 +1,55 @@
+import React, { useContext } from "react";
+import styles from "./ProfilePage.module.css";
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
+import formatDate from "../../utils/date/formatDate.js";
+import Task from "../../components/Task/Task";
+import SettingsModal from "../../components/SettingsModal/SettingsModal.jsx";
+
+function ProfilePage() {
+
+ const { user } = useContext(AuthContext);
+
+ return (
+
+
+
+
+
+
+
+
+
{user.name} {user.lastname}
+
+
+
+
Role : {user.role}
+
Membre depuis : {formatDate(user.created_at)}
+
+
+
Mail : {user.email}
+
Téléphone : {user.phone}
+
+
+
+
+
Vos Événements :
+ {user.tasks && user.tasks.length > 0 ? (
+ user.tasks.map((task, index) => (
+
+ ))
+ ) : (
+
Aucune tâche pour le moment.
+ )}
+
+
+
+
+
+ );
+}
+
+export default ProfilePage;
diff --git a/src/pages/Profile/ProfilePage.module.css b/src/pages/Profile/ProfilePage.module.css
new file mode 100644
index 0000000..1e7913f
--- /dev/null
+++ b/src/pages/Profile/ProfilePage.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;
+}
+}
diff --git a/src/pages/Register/RegisterPage.jsx b/src/pages/Register/RegisterPage.jsx
new file mode 100644
index 0000000..2046c9a
--- /dev/null
+++ b/src/pages/Register/RegisterPage.jsx
@@ -0,0 +1,134 @@
+import styles from "./RegisterPage.module.css";
+import Background from "../../components/background/background.jsx";
+import Input from "../../components/ui/input/input.jsx";
+import Button from "../../components/ui/button/button.jsx";
+import {useContext, useEffect, useState} from "react";
+import register from "../../utils/register.js";
+import { useNavigate } from "react-router";
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
+import Modal from "../../components/ui/modal/modal.jsx";
+
+
+function RegisterPage() {
+
+ const navigate = useNavigate();
+
+ const [email, setEmail] = useState("");
+ const [phone, setPhone] = useState("");
+ const [password, setPassword] = useState("");
+ const [confirmPassword, setConfirmPassword] = useState("");
+ const [name, setName] = useState("");
+ const [lastName, setLastName] = useState("");
+ const [open, setOpen] = useState(false);
+ const [title, setTitle] = useState("");
+ const [message, setMessage] = useState("");
+
+ const { user, loading } = useContext(AuthContext)
+
+ useEffect(() => {
+ if (!loading && user) {
+ navigate("/");
+ }
+ }, [loading, user]);
+
+ const handleModal = (t, m) => {
+ setTitle(t)
+ setMessage(m)
+ setOpen(true);
+ }
+
+ async function handleSubmit(e) {
+ e.preventDefault();
+
+ if(!(password === confirmPassword)) handleModal("Mot de passe invalide", "Les mots de passes ne conrrespondent pas");
+ else if(password.length < 8) handleModal("Mot de passe invalide", "Le mot de passe doit faire plus de 8 charactères");
+ else {
+
+ const res = await register(email, password, name, lastName, phone);
+
+ if (res.status === 422) {
+ if (res.errors.email) handleModal("Adresse Email invalide", "Le formet de votre adresse Email n'est pas valide");
+ if (res.errors.phone) handleModal("Numéro de téléphone invalide", "Le formet de votre numéro de téléphone n'est pas valide");
+ } else navigate("/login");
+
+ }
+ }
+
+ const handlePhone = (e) => {
+ const value = e.target.value;
+ if (value === "" || /^[0-9 +]+$/.test(value)) {
+ setPhone(value);
+ }
+ };
+
+
+ return
+
+
+
+
Créer un compte
+
+
+
{message}
+
+
+
+}
+
+export default RegisterPage;
+
+
diff --git a/src/pages/Register/RegisterPage.module.css b/src/pages/Register/RegisterPage.module.css
new file mode 100644
index 0000000..7c221bb
--- /dev/null
+++ b/src/pages/Register/RegisterPage.module.css
@@ -0,0 +1,43 @@
+.container {
+ position: relative;
+ z-index: 2;
+ display: flex;
+ flex-direction: column;
+ width: 30%;
+ justify-content: center;
+ align-items: center;
+ padding: 20px;
+ border-radius:12px;
+}
+
+.title {
+ font-size: 36px;
+ color: white;
+ text-align: center;
+ margin-bottom: 20px;
+ text-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}
+
+
+:global(.glassCard) {
+ --glass-bg: #ffffff9f;
+}
+.logButton{
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 12px;
+}
+.formGroup{
+ margin-top:23px;
+}
+
+h1 {
+ overflow: visible;
+ text-align: center;
+}
+
+.inputContainer {
+ padding: 15px;
+}
\ No newline at end of file
diff --git a/src/pages/Stat/StatPage.jsx b/src/pages/Stat/StatPage.jsx
index c10bf37..6cb0816 100644
--- a/src/pages/Stat/StatPage.jsx
+++ b/src/pages/Stat/StatPage.jsx
@@ -1,6 +1,5 @@
import React, { useState } from "react";
import styles from "./StatPage.module.css";
-// Importez les composants avec une majuscule
import ParticipationChart from "../../components/chart/ParticipationChart.jsx";
import IncompleteEvents from "../../components/IncompleteEvent/IncompleteEvent.jsx";
import PendingMembers from "../../components/PendingMembers/PendingMembers.jsx";
diff --git a/src/pages/Volunteers/VolunteerCard.jsx b/src/pages/Volunteers/VolunteerCard.jsx
new file mode 100644
index 0000000..fb58440
--- /dev/null
+++ b/src/pages/Volunteers/VolunteerCard.jsx
@@ -0,0 +1,74 @@
+import React, {useState} from "react";
+import styles from "./VolunteersPage.module.css";
+import formatDate from "../../utils/date/formatDate.js";
+import { useNavigate } from "react-router";
+import Button from "../../components/ui/button/button.jsx";
+
+export default function VolunteerCard({ user }) {
+
+ const [isExpanded, setIsExpanded] = useState(false);
+
+ const toggleExpand = () => {
+ setIsExpanded(!isExpanded);
+ };
+
+ const navigate = useNavigate();
+
+ return (
+
+
+
+
{user?.name} {user?.lastname}
+
+
+
+
+ {!isExpanded ? (
+
+
Rôle : {user?.role}
+
Membre depuis : {user?.created_at && formatDate(user.created_at)}
+
+ ) : (
+
+
+
![profile]({"/react.svg"})
+
+
+
+
+
Rôle : {user?.role}
+
Membre depuis : {user?.created_at && formatDate(user.created_at)}
+
+
+
+
Email : {user?.email}
+ {user?.phone &&
Téléphone : {user.phone}
}
+
+
+
+ )}
+
+
+ {isExpanded && (
+
+
+
+ )}
+
+
+ );
+
+
+
+}
\ No newline at end of file
diff --git a/src/pages/Volunteers/VolunteersPage.jsx b/src/pages/Volunteers/VolunteersPage.jsx
new file mode 100644
index 0000000..43b4f8a
--- /dev/null
+++ b/src/pages/Volunteers/VolunteersPage.jsx
@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+import styles from "./VolunteersPage.module.css";
+import VolunteerCard from "./VolunteerCard.jsx";
+import getAllUser from "../../utils/users/getAllUsers.js";
+import ToolBar from "../../components/ToolBar/ToolBar.jsx";
+import filter from "../../utils/filter.js";
+import getUserById from "../../utils/users/getUserById.js";
+
+
+function VolunteerPage() {
+ const [filters, setFilters] = useState({
+ alphabetical: "asc",
+ yearOrder: "desc",
+ });
+ const [users, setUsers] = useState([]);
+
+ useEffect(() => {
+ (async () => {
+ const ids = await getAllUser();
+ const usersData = await Promise.all(ids.map(id => getUserById(id)));
+ setUsers(usersData);
+ })()
+ }, [])
+
+ return (
+
+
+
+ {filter(users, filters, "user").map((user, index) => (
+
+ ))}
+
+
+ );
+}
+
+export default VolunteerPage;
diff --git a/src/pages/Volunteers/VolunteersPage.module.css b/src/pages/Volunteers/VolunteersPage.module.css
new file mode 100644
index 0000000..ac276d9
--- /dev/null
+++ b/src/pages/Volunteers/VolunteersPage.module.css
@@ -0,0 +1,119 @@
+.container {
+ width: 100%;
+ position: relative;
+}
+
+.profileboard {
+ width: 80%;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ box-sizing: border-box;
+ margin: 1rem 0;
+ padding: 1rem 0.5rem;
+}
+
+.usersList{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 10px;
+}
+
+.header h2 {
+ margin: 0;
+}
+
+
+.mainContent {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ flex: 1;
+}
+
+.basicInfo {
+ flex: 1;
+}
+
+.expandedContent {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+}
+
+.textInfo {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
+.contactInfo {
+ margin-top: 10px;
+}
+
+.contactInfo p {
+ margin: 5px 0;
+}
+
+.bottomBar {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.profilePictureContainer {
+ width: 120px;
+ height: 120px;
+ margin-right: 20px;
+}
+
+.profilePicture {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ object-fit: cover;
+}
+
+.expandButton {
+ width: 30px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ background: transparent;
+ border: none;
+ font-size: 16px;
+}
+
+.moreButtonClicked {
+ rotate: 90deg;
+}
+
+@media screen and (min-width: 768px) {
+ .profilePictureContainer {
+ width: 150px;
+ height: 150px;
+ }
+}
+
+@media screen and (min-width: 1024px) {
+ .container {
+ padding: 20px;
+ }
+
+ .profileboard {
+ padding: 25px;
+ }
+
+ .profilePictureContainer {
+ width: 200px;
+ height: auto;
+ }
+}
diff --git a/src/router.js b/src/router.js
index 95fc3a4..02af71a 100644
--- a/src/router.js
+++ b/src/router.js
@@ -3,9 +3,21 @@ import Layout from "./layout.jsx";
import HomePage from "./pages/Home/HomePage";
import LoginPage from "./pages/Login/LoginPage";
import StatPage from "./pages/Stat/StatPage";
-import testPage from "./pages/Stat/test.jsx"
+import RegisterPage from "./pages/Register/RegisterPage.jsx";
+import VolunteersPage from "./pages/Volunteers/VolunteersPage";
+import ProfilePage from "./pages/Profile/ProfilePage";
+import EventsPage from "./pages/Events/EventsPage.jsx";
+
const router = createBrowserRouter([
+ {
+ path: "/login",
+ Component: LoginPage,
+ },
+ {
+ path: "/register",
+ Component: RegisterPage,
+ },
{
path: "/",
Component: Layout,
@@ -15,17 +27,25 @@ const router = createBrowserRouter([
Component: HomePage,
},
{
- path: "/login",
- Component: LoginPage,
+ path: "/admin",
+ Component:StatPage,
+ },
+ {
+ path:"/profile",
+ Component:ProfilePage,
+ },
+ {
+ path: "/events",
+ Component: EventsPage,
+ },
+ {
+ path: "/volunteers",
+ Component: VolunteersPage,
},
{
path: "/stat",
Component:StatPage,
},
- {
- path: "/test",
- Component:testPage,
- }
]
}
])
diff --git a/src/stories/Modal.stories.jsx b/src/stories/Modal.stories.jsx
new file mode 100644
index 0000000..1ece2ae
--- /dev/null
+++ b/src/stories/Modal.stories.jsx
@@ -0,0 +1,49 @@
+import Modal from "../components/ui/modal/modal.jsx";
+import Button from "../components/ui/button/button.jsx";
+import { useState } from "react";
+
+export default {
+ title: 'UI/Modal',
+ component: Modal,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+ argTypes: {
+ open: {
+ control: 'boolean',
+ description: 'Variable qui gère si la modal est ouverte ou fermée.',
+ },
+ children: {
+ control: Object,
+ description: 'Contenu de la modal.',
+ },
+ title: {
+ control: 'text',
+ description: 'Titre de la modal',
+ },
+ onClose: {
+ action: 'changed',
+ description: 'Fonction appelée pour fermer la modal.',
+ },
+ },
+};
+
+const Template = (args) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+
+
+ setIsOpen(false)}>
+ {args.children}
+
+
+ );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+ title: "Hello",
+ children:
Lorem Ipsum...
,
+};
diff --git a/src/utils/auth/logout.js b/src/utils/auth/logout.js
new file mode 100644
index 0000000..fa34b2f
--- /dev/null
+++ b/src/utils/auth/logout.js
@@ -0,0 +1,28 @@
+import getXSRFToken from "../getXSRF.js";
+
+export default async function logout() {
+
+ const csrfToken = await getXSRFToken();
+
+ try {
+ const response = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/logout`, {
+ method: 'POST',
+ credentials: 'include',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Accept': 'application/json',
+ 'X-XSRF-TOKEN': csrfToken
+ },
+ });
+
+ console.log('Code HTTP :', response.status);
+
+ if (!response.ok) {
+ throw new Error(`Erreur HTTP ${response.status}`);
+ }
+
+ return { status: response.status };
+ } catch (error) {
+ return error;
+ }
+}
diff --git a/src/utils/date/formatDate.js b/src/utils/date/formatDate.js
new file mode 100644
index 0000000..3fd1371
--- /dev/null
+++ b/src/utils/date/formatDate.js
@@ -0,0 +1,9 @@
+export default function formatDate(d) {
+ const date = new Date(d);
+
+ const jj = String(date.getUTCDate()).padStart(2, '0');
+ const mm = String(date.getUTCMonth() + 1).padStart(2, '0');
+ const aaaa = date.getUTCFullYear();
+
+ return `${jj}/${mm}/${aaaa}`;
+}
\ No newline at end of file
diff --git a/src/utils/date/formatDate.test.js b/src/utils/date/formatDate.test.js
new file mode 100644
index 0000000..97179dc
--- /dev/null
+++ b/src/utils/date/formatDate.test.js
@@ -0,0 +1,9 @@
+import { expect, test } from 'vitest';
+import formatDate from './formatDate';
+
+const date = "2025-11-28T11:26:45.000000Z"
+const res = "28/11/2025"
+
+test("Format Date", () => {
+ expect(formatDate(date)).toBe(res);
+})
\ No newline at end of file
diff --git a/src/utils/event/getAllEvents.js b/src/utils/event/getAllEvents.js
new file mode 100644
index 0000000..f5e37c5
--- /dev/null
+++ b/src/utils/event/getAllEvents.js
@@ -0,0 +1,23 @@
+export default async function getAllEvents() {
+
+ try {
+ const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/events/`, {
+ method: 'GET',
+ credentials: 'include',
+ headers: {
+ 'Accept': 'application/json'
+ }
+ });
+
+ if (!res.ok) {
+ throw new Error(`Erreur serveur : ${res.status}`);
+ }
+
+ const data = await res.json();
+ return data;
+ } catch (err) {
+ console.error('Erreur :', err);
+ return null;
+ }
+
+}
\ No newline at end of file
diff --git a/src/utils/event/getEventById.js b/src/utils/event/getEventById.js
new file mode 100644
index 0000000..8d09b78
--- /dev/null
+++ b/src/utils/event/getEventById.js
@@ -0,0 +1,23 @@
+export default async function GetEventById(id) {
+
+ try {
+ const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/events/${id}`, {
+ method: 'GET',
+ credentials: 'include',
+ headers: {
+ 'Accept': 'application/json'
+ }
+ });
+
+ if (!res.ok) {
+ throw new Error(`Erreur serveur : ${res.status}`);
+ }
+
+ const data = await res.json();
+ return data;
+ } catch (err) {
+ console.error('Erreur :', err);
+ return null;
+ }
+
+}
\ No newline at end of file
diff --git a/src/utils/filter.js b/src/utils/filter.js
new file mode 100644
index 0000000..1495a74
--- /dev/null
+++ b/src/utils/filter.js
@@ -0,0 +1,40 @@
+function filter(elements, filters, type) {
+ const compareDate = (dateA, dateB) => {
+ const dA = new Date(dateA);
+ const dB = new Date(dateB);
+
+ if (filters.yearOrder === "asc") {
+ return dA - dB; // plus ancien -> plus récent
+ } else {
+ return dB - dA; // plus récent -> plus ancien
+ }
+ };
+
+ return [...elements].sort((a, b) => {
+ let timeComparison;
+
+ if (filters.yearOrder !== null) {
+ if (type === "event") {
+ timeComparison = compareDate(a.start, b.start);
+ }
+
+ else if (type === "user") {
+ timeComparison = compareDate(a.created_at, b.created_at);
+ }
+
+ if (timeComparison !== 0 && timeComparison !== undefined) {
+ return timeComparison;
+ }
+ }
+
+ if (filters.alphabetical !== null) {
+ return filters.alphabetical === "asc"
+ ? a.name.localeCompare(b.name)
+ : b.name.localeCompare(a.name);
+ }
+
+ return 0;
+ });
+}
+
+export default filter;
diff --git a/src/utils/getUser.js b/src/utils/getUser.js
index 5345926..24297ca 100644
--- a/src/utils/getUser.js
+++ b/src/utils/getUser.js
@@ -1,12 +1,21 @@
export default async function getUser() {
- await fetch('http://localhost:8000/api/me', {
- method: 'GET',
- credentials: 'include',
- headers: {
- 'Accept': 'application/json'
+ try {
+ const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/me`, {
+ method: 'GET',
+ credentials: 'include',
+ headers: {
+ 'Accept': 'application/json'
+ }
+ });
+
+ if (!res.ok) {
+ throw new Error(`Erreur serveur : ${res.status}`);
}
- })
- .then(res => res.json())
- .then(data => console.log('Utilisateur connecté :', data))
- .catch(err => console.error('Erreur :', err));
-}
\ No newline at end of file
+
+ const data = await res.json();
+ return data;
+ } catch (err) {
+ console.error('Erreur :', err);
+ return null;
+ }
+}
diff --git a/src/utils/getUserNotifications.js b/src/utils/getUserNotifications.js
index 69d2431..1b93395 100644
--- a/src/utils/getUserNotifications.js
+++ b/src/utils/getUserNotifications.js
@@ -1,7 +1,7 @@
export default async function getUserNotifications() {
try {
const response = await fetch(
- 'http://localhost:8000/api/users/1/notifications',
+ 'http://localhost:80/api/users/1/notifications',
{
method: 'GET',
credentials: 'include',
diff --git a/src/utils/getXSRF.js b/src/utils/getXSRF.js
index 1bed25f..0c78e40 100644
--- a/src/utils/getXSRF.js
+++ b/src/utils/getXSRF.js
@@ -1,5 +1,5 @@
export default async function getXSRFToken() {
- const response = await fetch('http://localhost:8000/sanctum/csrf-cookie', {
+ const response = await fetch(`http://${import.meta.env.VITE_API_URL}/sanctum/csrf-cookie`, {
method: 'GET',
credentials: 'include'
});
diff --git a/src/utils/login.js b/src/utils/login.js
index 529d27c..161268c 100644
--- a/src/utils/login.js
+++ b/src/utils/login.js
@@ -3,31 +3,29 @@ import getXSRFToken from "./getXSRF.js";
export default async function login(email, password) {
const csrfToken = await getXSRFToken();
-
- await fetch('http://localhost:8000/api/users/login', {
- method: 'POST',
- credentials: 'include',
- headers: {
- 'Content-Type': 'application/json',
- 'X-XSRF-TOKEN': csrfToken,
- 'Accept': 'application/json'
- },
- body: JSON.stringify({
- email: email,
- password: password
- })
- })
- .then(response => {
- console.log('Code HTTP :', response.status);
- if (!response.ok) {
- throw new Error(`Erreur HTTP ${response.status}`);
- }
- return response.json();
- })
- .then(data => {
- console.log('Connexion réussie ! Données utilisateur :', data);
- })
- .catch(error => {
- console.error('Erreur lors de la connexion :', error.message);
+ try {
+ const response = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/login`, {
+ method: 'POST',
+ credentials: 'include',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-XSRF-TOKEN': csrfToken,
+ 'Accept': 'application/json'
+ },
+ body: JSON.stringify({ email, password })
});
-}
\ No newline at end of file
+
+ console.log('Code HTTP :', response.status);
+
+ if (!response.ok) {
+ throw new Error(`Erreur HTTP ${response.status}`);
+ }
+
+ const data = await response.json();
+ console.log('Connexion réussie ! Données utilisateur :', data);
+
+ return { status: response.status, data };
+ } catch (error) {
+ return error;
+ }
+}
diff --git a/src/utils/register.js b/src/utils/register.js
new file mode 100644
index 0000000..43a8c1d
--- /dev/null
+++ b/src/utils/register.js
@@ -0,0 +1,36 @@
+import getXSRFToken from "./getXSRF.js";
+
+export default async function register(email, password, name, lastname, phone) {
+ const csrfToken = await getXSRFToken();
+
+ try {
+ const response = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/register`, {
+ method: 'POST',
+ credentials: 'include',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-XSRF-TOKEN': csrfToken,
+ 'Accept': 'application/json'
+ },
+ body: JSON.stringify({ email, password, name, lastname, phone }),
+ });
+
+ const data = await response.json();
+
+ if (!response.ok) {
+ if (response.status === 422) {
+ return {
+ status: 422,
+ errors: data.errors
+ };
+ }
+
+ throw new Error(`Erreur HTTP ${response.status}`);
+ }
+
+ return { status: response.status, data };
+
+ } catch (error) {
+ return { status: "error", error };
+ }
+}
diff --git a/src/utils/searchEvents.js b/src/utils/searchEvents.js
new file mode 100644
index 0000000..a9974d0
--- /dev/null
+++ b/src/utils/searchEvents.js
@@ -0,0 +1,22 @@
+export default async function searchEvents(query) {
+ try {
+ const encodedQuery = encodeURIComponent(query);
+ const response = await fetch(
+ `http://${import.meta.env.VITE_API_URL}/api/events/search?query=${encodedQuery}`,
+ {
+ method: 'GET',
+ credentials: 'include',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Accept': 'application/json'
+ }
+ }
+ );
+ const data = await response.json();
+ return data.hits.map(hit => hit.document);
+
+ } catch (err) {
+ console.error("Erreur :", err);
+ return null;
+ }
+}
diff --git a/src/utils/searchUsers.js b/src/utils/searchUsers.js
new file mode 100644
index 0000000..fdf9593
--- /dev/null
+++ b/src/utils/searchUsers.js
@@ -0,0 +1,22 @@
+export default async function searchUsers(query) {
+ try {
+ const encodedQuery = encodeURIComponent(query);
+ const response = await fetch(
+ `http://localhost:80/api/users/search?query=${encodedQuery}`,
+ {
+ method: 'GET',
+ credentials: 'include',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Accept': 'application/json'
+ }
+ }
+ );
+ const data = await response.json();
+ return data.hits.map(hit => hit.document);
+
+ } catch (err) {
+ console.error("Erreur :", err);
+ return null;
+ }
+}
diff --git a/src/utils/users/getAllUsers.js b/src/utils/users/getAllUsers.js
new file mode 100644
index 0000000..c9c383e
--- /dev/null
+++ b/src/utils/users/getAllUsers.js
@@ -0,0 +1,21 @@
+export default async function getAllUser() {
+ try {
+ const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users`, {
+ method: 'GET',
+ credentials: 'include',
+ headers: {
+ 'Accept': 'application/json'
+ }
+ });
+
+ if (!res.ok) {
+ throw new Error(`Erreur serveur : ${res.status}`);
+ }
+
+ const data = await res.json();
+ return data;
+ } catch (err) {
+ console.error('Erreur :', err);
+ return null;
+ }
+}
diff --git a/src/utils/users/getUserById.js b/src/utils/users/getUserById.js
new file mode 100644
index 0000000..59af94a
--- /dev/null
+++ b/src/utils/users/getUserById.js
@@ -0,0 +1,20 @@
+export default async function getUserById (id) {
+ try {
+ const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/${id}`, {
+ method: 'GET',
+ credentials: 'include',
+ headers: {
+ 'Accept': 'application/json'
+ }
+ });
+
+ if (!res.ok) {
+ throw new Error(`Erreur serveur : ${res.status}`);
+ }
+
+ return await res.json();
+ } catch (err) {
+ console.error('Erreur :', err);
+ return null;
+ }
+}
\ No newline at end of file
diff --git a/src/utils/users/updateUser.js b/src/utils/users/updateUser.js
new file mode 100644
index 0000000..dd2042e
--- /dev/null
+++ b/src/utils/users/updateUser.js
@@ -0,0 +1,32 @@
+import getXSRFToken from "../getXSRF.js";
+
+export default async function updateUser(name, lastname, phone) {
+
+ const csrfToken = await getXSRFToken();
+
+ try {
+ const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/update`, {
+ method: 'POST',
+ credentials: 'include',
+ headers: {
+ 'Accept': 'application/json',
+ 'X-XSRF-TOKEN': csrfToken,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ name: name,
+ phone: phone,
+ lastname: lastname,
+ })
+ });
+
+ if (!res.ok) {
+ throw new Error(`Erreur serveur : ${res.status}`);
+ }
+
+ return await res.json();
+ } catch (err) {
+ console.error('Erreur :', err);
+ return null;
+ }
+}
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 5a921d3..3277a15 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,41 +1,48 @@
+// vite.config.js
///
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin'
+import { playwright } from '@vitest/browser-playwright'
-// https://vite.dev/config/
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
-import { playwright } from '@vitest/browser-playwright';
const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
-// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
export default defineConfig({
- plugins: [react()],
- test: {
- projects: [{
- extends: true,
- plugins: [
- // The plugin will run tests for the stories defined in your Storybook config
- // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
- storybookTest({
- configDir: path.join(dirname, '.storybook')
- })],
- test: {
- name: 'storybook',
- browser: {
- enabled: true,
- headless: true,
- provider: playwright({}),
- instances: [{
- browser: 'chromium'
- }]
- },
- setupFiles: ['.storybook/vitest.setup.js']
- }
- }]
- },
- server: {
- host: true,
- }
-});
\ No newline at end of file
+ plugins: [react()],
+ base: '/',
+ test: {
+ projects: [
+ {
+ extends: true,
+ plugins: [
+ storybookTest({
+ configDir: path.join(dirname, '.storybook'),
+ }),
+ ],
+ test: {
+ name: 'storybook',
+ browser: {
+ enabled: true,
+ headless: true,
+ provider: playwright({}),
+ instances: [{ browser: 'chromium' }],
+ },
+ setupFiles: ['.storybook/vitest.setup.js'],
+ },
+ },
+ {
+ test: {
+ name: 'unit',
+ include: [
+ 'src/**/*.test.js',
+ 'src/**/*.test.ts',
+ 'utils/**/*.test.js',
+ ],
+ environment: 'node',
+ },
+ },
+ ],
+ },
+})
+ ) : (
+ 
+ )}
+