Merge branch 'dev' into 'eventDetail'

Dev

See merge request sae-but2/2025-26/gestion-benevoles-association/Frontend!54
This commit is contained in:
ORDONNEAU ANTOINE p2405376
2026-01-05 15:06:55 +00:00
15 changed files with 557 additions and 352 deletions
-1
View File
@@ -1 +0,0 @@
VITE_API_URL=localhost:80
+44 -8
View File
@@ -83,6 +83,7 @@
"integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==", "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@babel/code-frame": "^7.27.1", "@babel/code-frame": "^7.27.1",
"@babel/generator": "^7.28.3", "@babel/generator": "^7.28.3",
@@ -1640,8 +1641,7 @@
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
"integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT"
"peer": true
}, },
"node_modules/@types/babel__core": { "node_modules/@types/babel__core": {
"version": "7.20.5", "version": "7.20.5",
@@ -1751,6 +1751,7 @@
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
"integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==", "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"csstype": "^3.0.2" "csstype": "^3.0.2"
} }
@@ -1995,6 +1996,7 @@
"integrity": "sha512-lruSgrYPVAJzKmX6EJYCg9nY+0A4VkeTLpTzf1jRD/XMjNbzD9yy7D499xmVKglwJczANYJXBvZSPGcRlon+0w==", "integrity": "sha512-lruSgrYPVAJzKmX6EJYCg9nY+0A4VkeTLpTzf1jRD/XMjNbzD9yy7D499xmVKglwJczANYJXBvZSPGcRlon+0w==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@vitest/mocker": "4.0.13", "@vitest/mocker": "4.0.13",
"@vitest/utils": "4.0.13", "@vitest/utils": "4.0.13",
@@ -2018,6 +2020,7 @@
"integrity": "sha512-oaRY+/pvwS4/sN2rE2aZh9jdli8EkXm5AidmXEbWRu2wW0omG9PmgChWCX2jsD9qRLQxXTSLl5oKezANNF6LnQ==", "integrity": "sha512-oaRY+/pvwS4/sN2rE2aZh9jdli8EkXm5AidmXEbWRu2wW0omG9PmgChWCX2jsD9qRLQxXTSLl5oKezANNF6LnQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@vitest/browser": "4.0.13", "@vitest/browser": "4.0.13",
"@vitest/mocker": "4.0.13", "@vitest/mocker": "4.0.13",
@@ -2192,6 +2195,7 @@
"integrity": "sha512-9IKlAru58wcVaWy7hz6qWPb2QzJTKt+IOVKjAx5vb5rzEFPTL6H4/R9BMvjZ2ppkxKgTrFONEJFtzvnyEpiT+A==", "integrity": "sha512-9IKlAru58wcVaWy7hz6qWPb2QzJTKt+IOVKjAx5vb5rzEFPTL6H4/R9BMvjZ2ppkxKgTrFONEJFtzvnyEpiT+A==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@vitest/utils": "4.0.13", "@vitest/utils": "4.0.13",
"pathe": "^2.0.3" "pathe": "^2.0.3"
@@ -2245,6 +2249,7 @@
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"bin": { "bin": {
"acorn": "bin/acorn" "acorn": "bin/acorn"
}, },
@@ -2479,6 +2484,7 @@
} }
], ],
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"baseline-browser-mapping": "^2.8.9", "baseline-browser-mapping": "^2.8.9",
"caniuse-lite": "^1.0.30001746", "caniuse-lite": "^1.0.30001746",
@@ -2562,6 +2568,7 @@
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz", "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
"integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==", "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@kurkle/color": "^0.3.0" "@kurkle/color": "^0.3.0"
}, },
@@ -2775,8 +2782,17 @@
"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
"integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
"dev": true, "dev": true,
"license": "MIT"
},
"node_modules/dom-helpers": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
"license": "MIT", "license": "MIT",
"peer": true "dependencies": {
"@babel/runtime": "^7.8.7",
"csstype": "^3.0.2"
}
}, },
"node_modules/dom-helpers": { "node_modules/dom-helpers": {
"version": "5.2.1", "version": "5.2.1",
@@ -2842,6 +2858,7 @@
"dev": true, "dev": true,
"hasInstallScript": true, "hasInstallScript": true,
"license": "MIT", "license": "MIT",
"peer": true,
"bin": { "bin": {
"esbuild": "bin/esbuild" "esbuild": "bin/esbuild"
}, },
@@ -2905,6 +2922,7 @@
"integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==", "integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/eslint-utils": "^4.8.0",
"@eslint-community/regexpp": "^4.12.1", "@eslint-community/regexpp": "^4.12.1",
@@ -3814,7 +3832,6 @@
"integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"bin": { "bin": {
"lz-string": "bin/bin.js" "lz-string": "bin/bin.js"
} }
@@ -4209,6 +4226,7 @@
"integrity": "sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==", "integrity": "sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==",
"dev": true, "dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"peer": true,
"dependencies": { "dependencies": {
"playwright-core": "1.56.1" "playwright-core": "1.56.1"
}, },
@@ -4290,7 +4308,6 @@
"integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"ansi-regex": "^5.0.1", "ansi-regex": "^5.0.1",
"ansi-styles": "^5.0.0", "ansi-styles": "^5.0.0",
@@ -4306,7 +4323,6 @@
"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"engines": { "engines": {
"node": ">=10" "node": ">=10"
}, },
@@ -4319,8 +4335,7 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT"
"peer": true
}, },
"node_modules/prompts": { "node_modules/prompts": {
"version": "2.4.2", "version": "2.4.2",
@@ -4396,6 +4411,7 @@
"resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
"integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
"license": "MIT", "license": "MIT",
"peer": true,
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
} }
@@ -4478,6 +4494,7 @@
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
"integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"scheduler": "^0.27.0" "scheduler": "^0.27.0"
}, },
@@ -4651,6 +4668,7 @@
"integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==", "integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@types/estree": "1.0.8" "@types/estree": "1.0.8"
}, },
@@ -4838,6 +4856,7 @@
"integrity": "sha512-vQMufKKA9TxgoEDHJv3esrqUkjszuuRiDkThiHxENFPdQawHhm2Dei+iwNRwH5W671zTDy9iRT9P1KDjcU5Iyw==", "integrity": "sha512-vQMufKKA9TxgoEDHJv3esrqUkjszuuRiDkThiHxENFPdQawHhm2Dei+iwNRwH5W671zTDy9iRT9P1KDjcU5Iyw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@storybook/global": "^5.0.0", "@storybook/global": "^5.0.0",
"@storybook/icons": "^1.6.0", "@storybook/icons": "^1.6.0",
@@ -5341,6 +5360,7 @@
"integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==", "integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"esbuild": "^0.25.0", "esbuild": "^0.25.0",
"fdir": "^6.5.0", "fdir": "^6.5.0",
@@ -5410,12 +5430,28 @@
} }
} }
}, },
"node_modules/vite/node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
"dev": true,
"hasInstallScript": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
"node_modules/vitest": { "node_modules/vitest": {
"version": "4.0.13", "version": "4.0.13",
"resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.13.tgz", "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.13.tgz",
"integrity": "sha512-QSD4I0fN6uZQfftryIXuqvqgBxTvJ3ZNkF6RWECd82YGAYAfhcppBLFXzXJHQAAhVFyYEuFTrq6h0hQqjB7jIQ==", "integrity": "sha512-QSD4I0fN6uZQfftryIXuqvqgBxTvJ3ZNkF6RWECd82YGAYAfhcppBLFXzXJHQAAhVFyYEuFTrq6h0hQqjB7jIQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@vitest/expect": "4.0.13", "@vitest/expect": "4.0.13",
"@vitest/mocker": "4.0.13", "@vitest/mocker": "4.0.13",
+34
View File
@@ -23,6 +23,9 @@ importers:
react-router: react-router:
specifier: ^7.9.4 specifier: ^7.9.4
version: 7.9.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0) version: 7.9.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
react-router-dom:
specifier: ^7.10.1
version: 7.10.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
devDependencies: devDependencies:
'@chromatic-com/storybook': '@chromatic-com/storybook':
specifier: ^4.1.2 specifier: ^4.1.2
@@ -1553,6 +1556,23 @@ packages:
resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==} resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
react-router-dom@7.10.1:
resolution: {integrity: sha512-JNBANI6ChGVjA5bwsUIwJk7LHKmqB4JYnYfzFwyp2t12Izva11elds2jx7Yfoup2zssedntwU0oZ5DEmk5Sdaw==}
engines: {node: '>=20.0.0'}
peerDependencies:
react: '>=18'
react-dom: '>=18'
react-router@7.10.1:
resolution: {integrity: sha512-gHL89dRa3kwlUYtRQ+m8NmxGI6CgqN+k4XyGjwcFoQwwCWF6xXpOCUlDovkXClS0d0XJN/5q7kc5W3kiFEd0Yw==}
engines: {node: '>=20.0.0'}
peerDependencies:
react: '>=18'
react-dom: '>=18'
peerDependenciesMeta:
react-dom:
optional: true
react-router@7.9.4: react-router@7.9.4:
resolution: {integrity: sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==} resolution: {integrity: sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==}
engines: {node: '>=20.0.0'} engines: {node: '>=20.0.0'}
@@ -3315,6 +3335,20 @@ snapshots:
react-refresh@0.17.0: {} react-refresh@0.17.0: {}
react-router-dom@7.10.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
dependencies:
react: 19.2.0
react-dom: 19.2.0(react@19.2.0)
react-router: 7.10.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
react-router@7.10.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
dependencies:
cookie: 1.0.2
react: 19.2.0
set-cookie-parser: 2.7.1
optionalDependencies:
react-dom: 19.2.0(react@19.2.0)
react-router@7.9.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0): react-router@7.9.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
dependencies: dependencies:
cookie: 1.0.2 cookie: 1.0.2
+8 -4
View File
@@ -55,9 +55,11 @@ function Header() {
<NavLink to="/volunteers" className={({ isActive }) => isActive ? styles.activeLink : styles.link}> <NavLink to="/volunteers" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
Bénévoles Bénévoles
</NavLink> </NavLink>
{user.isAdmin && <NavLink to="/admin" className={({ isActive }) => isActive ? styles.activeLink : styles.link}> {/*{user?.isAdmin && (
<NavLink to="/admin" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
Administration Administration
</NavLink>} </NavLink>
)}*/}
</div> </div>
</div> </div>
@@ -89,9 +91,11 @@ function Header() {
<NavLink to="/volunteers" className={({ isActive }) => isActive ? styles.activeLink : styles.link}> <NavLink to="/volunteers" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
Bénévoles Bénévoles
</NavLink> </NavLink>
{user.isAdmin && <NavLink to="/admin" className={({ isActive }) => isActive ? styles.activeLink : styles.link}> {/*{user?.isAdmin && (
<NavLink to="/admin" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
Administration Administration
</NavLink>} </NavLink>
)}*/}
</nav> </nav>
+146
View File
@@ -0,0 +1,146 @@
import {useState} from "react";
import styles from "./calendar.module.css";
import formatDateLetter from "../../utils/date/formatDateLetter.js";
function Calendar() {
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"],
"2025-11-15": ["Sortie cinéma"],
"2025-11-17": ["Sortie cinéma"],
};
const monthNames = [
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
];
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] || []});
};
return (
<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 {formatDateLetter(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-.</p>
)}
</div>
)}
</div>
</div>
);
}
export default Calendar;
+175
View File
@@ -0,0 +1,175 @@
.calendarContainer {
padding: 20px;
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 {
width: 100%;
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: none;
}
.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%;
max-height: 450px;
margin: 16px 0px 16px 0px;
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: scroll;
}
.glassCard::-webkit-scrollbar{
display: none;
}
@media (max-width: 768px) {
.glassCard {
width: 100%;
margin-top: 16px;
margin-bottom: 16px;
max-height: 450px;
}
.calendarContainer {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
}
+45
View File
@@ -0,0 +1,45 @@
import {useMemo} from "react";
import styles from "./eventList.module.css";
import formatDateLetter from "../../utils/date/formatDateLetter.js";
function eventList() {
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"],
"2025-11-15": ["Sortie cinéma"],
"2025-11-17": ["Sortie cinéma"],
};
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]);
return (
<div className={styles.glassCard}>
<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>{formatDateLetter(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>
);
}
export default eventList;
@@ -0,0 +1,75 @@
.glassCard {
width: 45%;
max-height: 450px;
margin: 16px 0px 16px 0px;
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: scroll;
}
.glassCard::-webkit-scrollbar{
display: none;
}
.allContent{
display: flex;
flex-direction: row;
justify-content: center;
gap: 76px;
}
.eventList {
list-style: none;
padding: 0;
margin: 0;
}
.eventDetails {
list-style: none;
padding: 0;
margin: 0;
}
.dateSelected{
font-size: 100px;
}
h2{
font-size: 30px;
display: flex;
justify-content: center;
}
.eventGroup{
margin: 16px 0px 16px 0px;
padding: 10px 20px 10px 20px;
border-radius: 20px;
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);
}
@media (max-width: 768px) {
.glassCard {
width: 100%;
margin-top: 16px;
margin-bottom: 16px;
max-height: 450px;
display: flex;
flex-direction: column;
}
}
+2 -2
View File
@@ -9,11 +9,11 @@ import { AuthContext } from "./contexts/auth/AuthContext.js";
function Layout(){ function Layout(){
const { user, loading } = useContext(AuthContext); /*const { user, loading } = useContext(AuthContext);
if (loading) return <p>Loading</p>; if (loading) return <p>Loading</p>;
if (!user) return <Navigate to="/login" />; if (!user) return <Navigate to="/login" />;
if(user && user.validate === 0) return <Navigate to="/error/validation" />; if(user && user.validate === 0) return <Navigate to="/error/validation" />;*/
return ( return (
<div> <div>
+1 -1
View File
@@ -15,7 +15,7 @@ function AdminPage() {
const [selected, setSelected] = useState("3"); const [selected, setSelected] = useState("3");
const [participationRate, setParticipationRate] = useState(89); const [participationRate, setParticipationRate] = useState(89);
if(!user.isAdmin) navigate("/"); /*if(!user.isAdmin) navigate("/");*/
return ( return (
<div className={styles.container}> <div className={styles.container}>
+4 -170
View File
@@ -1,179 +1,13 @@
import { useState } from "react";
import { useMemo } from "react";
import styles from "./HomePage.module.css"; import styles from "./HomePage.module.css";
import Calendar from "../../components/homePage/calendar.jsx";
import EventList from "../../components/homePage/eventList.jsx";
function HomePage() { 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 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}`;
};
return ( return (
<div className={styles.allContent}> <div className={styles.allContent}>
<div className={styles.glassCard}> <Calendar />
<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}> <EventList />
<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-.</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>
</div> </div>
); );
} }
+3 -162
View File
@@ -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{ .allContent{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center;
gap: 80px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.glassCard {
width: 100%;
margin: 0px;
margin-top: 16px;
margin-bottom: 16px;
display: flex;
}
.allContent{ .allContent{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0px;
} }
} }
-1
View File
@@ -8,7 +8,6 @@ import SettingsModal from "../../components/SettingsModal/SettingsModal.jsx";
function ProfilePage() { function ProfilePage() {
const { user } = useContext(AuthContext); const { user } = useContext(AuthContext);
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={`${styles.profileboard} glassCard`}> <div className={`${styles.profileboard} glassCard`}>
+8
View File
@@ -0,0 +1,8 @@
export default function formatDateLetter(d) {
const monthNames = [
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
];
const [year, month, day] = d.split('-');
return `${day} ${monthNames[parseInt(month) - 1]} ${year}`;
};
+9
View File
@@ -0,0 +1,9 @@
import { expect, test } from 'vitest';
import formatDateLetter from './formatDateLetter';
const date = "2025-11-07"
const res = "07 Novembre 2025"
test("Format Date Letter", () => {
expect(formatDateLetter(date)).toBe(res);
})