Théo DUPIN 2 years ago
commit b750b1d6c1

3
.gitignore vendored

@ -1,2 +1,3 @@
node_modules
.DS_Store
.DS_Store
.vs

@ -0,0 +1,6 @@
projectKey=jtt_crm
serverUrl=https://codefirst.iut.uca.fr/sonar
serverVersion=9.6.1.59531
dashboardUrl=https://codefirst.iut.uca.fr/sonar/dashboard?id=jtt_crm
ceTaskId=AYSvDEjizKKB0GF_0uUi
ceTaskUrl=https://codefirst.iut.uca.fr/sonar/api/ce/task?id=AYSvDEjizKKB0GF_0uUi

@ -0,0 +1,18 @@
{
"configurations": [
{
"name": "macos-clang-arm64",
"includePath": [
"${workspaceFolder}/**"
],
"compilerPath": "/usr/bin/clang",
"cStandard": "${default}",
"cppStandard": "${default}",
"intelliSenseMode": "macos-clang-arm64",
"compilerArgs": [
""
]
}
],
"version": 4
}

@ -0,0 +1,13 @@
{
"version": "0.2.0",
"configurations": [
{
"name": "C/C++ Runner: Debug Session",
"type": "lldb",
"request": "launch",
"args": [],
"cwd": "/Users/malanone/JTT_Production/JTT_CrM",
"program": "/Users/malanone/JTT_Production/JTT_CrM/build/Debug/outDebug"
}
]
}

@ -0,0 +1,36 @@
{
"C_Cpp_Runner.cCompilerPath": "clang",
"C_Cpp_Runner.cppCompilerPath": "clang++",
"C_Cpp_Runner.debuggerPath": "lldb",
"C_Cpp_Runner.cStandard": "",
"C_Cpp_Runner.cppStandard": "",
"C_Cpp_Runner.msvcBatchPath": "",
"C_Cpp_Runner.useMsvc": false,
"C_Cpp_Runner.warnings": [
"-Wall",
"-Wextra",
"-Wpedantic",
"-Wshadow",
"-Wformat=2",
"-Wconversion",
"-Wnull-dereference",
"-Wsign-conversion"
],
"C_Cpp_Runner.enableWarnings": true,
"C_Cpp_Runner.warningsAsError": false,
"C_Cpp_Runner.compilerArgs": [],
"C_Cpp_Runner.linkerArgs": [],
"C_Cpp_Runner.includePaths": [],
"C_Cpp_Runner.includeSearch": [
"*",
"**/*"
],
"C_Cpp_Runner.excludeSearch": [
"**/build",
"**/build/**",
"**/.*",
"**/.*/**",
"**/.vscode",
"**/.vscode/**"
]
}

@ -6,6 +6,7 @@ npm install --save mysql
npm install --save express
npm install -g nodemon
npm install --save-dev nodemon
npm install crypto-js
npm install --save axios

611
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -15,7 +15,8 @@
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"addeventlistener": "^2.0.0",
"axios": "^1.2.0",
"axios": "^1.2.1",
"bootstrap": "^5.2.3",
"chart": "^0.1.2",
"chart.js": "^4.0.1",
"crypto-js": "^4.1.1",
@ -25,6 +26,7 @@
"pg": "^8.8.0",
"react": "^18.2.0",
"react-big-calendar": "^1.5.0",
"react-bootstrap": "^2.7.0",
"react-chartjs-2": "^5.0.1",
"react-datepicker": "^4.8.0",
"react-dom": "^18.2.0",

@ -3,7 +3,7 @@
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="500.000000pt" height="500.000000pt" viewBox="0 0 500.000000 500.000000"
preserveAspectRatio="xMidYMid meet">
preserveAspectRatio="xMidYMid meet" fill="#ffff">
<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

@ -0,0 +1,72 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="500.000000pt" height="500.000000pt" viewBox="0 0 500.000000 500.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
fill="rgb(159, 166, 188)" stroke="none">
<path d="M1658 3437 l-136 -274 79 -43 c44 -23 82 -40 83 -39 2 2 65 125 141
273 132 257 137 270 119 283 -23 18 -131 73 -141 73 -5 0 -70 -123 -145 -273z
m10 -203 c26 -18 28 -50 5 -76 -20 -22 -41 -23 -65 -1 -25 22 -23 59 4 77 12
9 25 16 28 16 3 0 16 -7 28 -16z"/>
<path d="M1621 3206 c-9 -10 -8 -16 4 -26 21 -17 51 6 34 26 -6 8 -15 14 -19
14 -4 0 -13 -6 -19 -14z"/>
<path d="M3117 3676 c-31 -18 -62 -37 -68 -43 -7 -7 30 -91 126 -283 112 -225
139 -271 153 -265 45 17 142 77 142 88 -1 25 -268 532 -281 533 -8 1 -40 -13
-72 -30z m271 -442 c30 -21 29 -59 -3 -80 -55 -36 -106 26 -60 72 28 28 33 29
63 8z"/>
<path d="M3342 3207 c-15 -17 1 -42 23 -33 18 6 17 37 -1 43 -6 2 -16 -2 -22
-10z"/>
<path d="M2235 3579 c-136 -35 -179 -41 -225 -28 -11 3 -46 -56 -127 -216 -62
-121 -112 -225 -113 -231 0 -5 21 -20 46 -33 l47 -22 30 30 c40 42 96 43 136
3 15 -15 30 -34 33 -42 4 -13 8 -12 25 3 46 40 134 8 151 -56 7 -26 13 -32 33
-29 55 6 116 -61 106 -115 -4 -19 0 -23 22 -23 15 0 35 -6 46 -14 11 -7 28
-15 38 -17 9 -2 43 -38 75 -79 64 -83 98 -98 139 -63 45 39 42 53 -50 180 -17
24 -27 46 -23 50 8 8 11 5 88 -95 39 -51 53 -62 77 -62 33 0 66 25 75 56 6 21
-1 35 -77 141 -61 84 -24 71 40 -14 69 -91 99 -107 141 -76 46 34 41 67 -26
159 -84 114 -182 215 -281 290 -84 62 -87 64 -147 64 -54 0 -74 -6 -161 -50
-140 -72 -207 -78 -232 -24 -10 23 -8 34 14 80 14 30 45 70 68 90 47 39 212
145 240 152 27 7 1 32 -32 31 -14 -1 -93 -19 -176 -40z"/>
<path d="M2451 3564 c-127 -67 -183 -104 -239 -158 -71 -67 -91 -125 -52 -146
26 -14 116 10 169 46 52 34 143 64 194 64 34 0 58 -9 106 -40 80 -52 226 -193
308 -297 36 -46 67 -83 70 -83 15 0 233 124 233 133 0 5 -40 86 -89 181 -49
94 -102 199 -119 232 l-31 61 -38 -10 c-33 -9 -62 -4 -203 32 -91 22 -174 41
-185 41 -11 0 -67 -25 -124 -56z"/>
<path d="M1894 3043 c-50 -55 -61 -86 -39 -119 39 -61 87 -55 144 17 48 60 51
86 15 123 -40 39 -70 34 -120 -21z"/>
<path d="M2112 3033 c-28 -11 -132 -156 -132 -183 0 -36 38 -70 78 -70 27 0
40 10 88 68 31 37 60 78 65 91 23 57 -42 117 -99 94z"/>
<path d="M2243 2924 c-16 -7 -121 -146 -123 -164 -7 -53 27 -93 75 -88 41 4
155 139 155 184 0 52 -57 88 -107 68z"/>
<path d="M2324 2754 c-57 -63 -79 -104 -70 -137 8 -32 58 -61 90 -53 30 7 126
133 126 163 0 31 -46 73 -78 73 -17 0 -39 -15 -68 -46z"/>
<path d="M2490 2722 c0 -16 -13 -47 -30 -70 -16 -23 -30 -46 -30 -52 0 -6 15
-17 33 -26 31 -15 36 -15 65 0 49 25 51 57 8 121 -20 30 -38 55 -41 55 -3 0
-5 -13 -5 -28z"/>
<path d="M1428 2430 c-240 -29 -435 -182 -500 -395 -17 -52 -22 -95 -22 -170
0 -268 143 -451 398 -510 136 -32 371 -15 507 36 47 17 58 26 62 48 10 50 20
181 14 181 -4 0 -19 -25 -33 -55 -15 -31 -49 -76 -76 -101 -68 -63 -125 -87
-227 -92 -152 -8 -254 30 -357 132 -125 125 -185 330 -155 526 23 150 108 274
224 330 197 95 451 35 558 -131 18 -27 36 -49 41 -49 10 0 10 36 1 120 -6 62
-7 63 -47 81 -88 38 -276 62 -388 49z"/>
<path d="M2040 2419 c0 -8 9 -20 19 -26 37 -23 41 -74 41 -508 0 -434 -4 -486
-40 -505 -43 -23 -17 -30 105 -30 69 0 125 2 125 5 0 3 -12 17 -27 30 l-28 23
-3 246 -3 246 82 0 c152 0 185 -32 288 -285 72 -175 96 -221 133 -248 42 -31
178 -36 178 -7 0 6 -11 10 -25 10 -47 0 -83 57 -164 262 -24 59 -56 127 -71
152 -34 53 -99 103 -146 112 -37 7 -47 24 -14 24 31 0 118 36 156 65 61 46 87
100 92 186 4 67 1 82 -19 118 -56 100 -156 130 -466 138 -180 5 -213 4 -213
-8z m391 -35 c114 -32 178 -116 179 -232 0 -75 -15 -116 -61 -160 -45 -43
-112 -62 -226 -62 l-93 0 0 235 0 235 72 0 c39 0 98 -7 129 -16z"/>
<path d="M2945 2421 c-3 -5 8 -18 25 -27 62 -37 64 -57 68 -489 4 -443 1 -484
-33 -517 -14 -13 -25 -26 -25 -30 0 -5 43 -8 95 -8 97 0 116 9 68 32 -15 7
-36 29 -47 48 -20 33 -21 53 -24 440 -2 222 0 401 4 397 4 -4 92 -146 194
-315 103 -169 194 -308 202 -310 10 -2 78 103 209 325 l194 328 3 -409 c2
-423 -1 -472 -39 -504 -10 -9 -19 -20 -19 -24 0 -5 56 -8 125 -8 69 0 125 2
125 4 0 3 -13 17 -29 33 -26 27 -29 38 -36 124 -11 144 0 767 14 811 7 21 27
50 46 65 18 15 31 31 29 35 -3 4 -41 8 -84 8 -75 0 -80 -1 -97 -27 -11 -16
-100 -164 -198 -330 -99 -167 -182 -303 -185 -303 -3 1 -94 149 -204 330
l-198 330 -88 0 c-49 0 -91 -4 -95 -9z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.4 KiB

@ -3,6 +3,22 @@ const express = require('express');
const cors=require("cors");
const bodyparser = require('body-parser');
const nodemailer = require('nodemailer');
const CryptoJS = require('crypto-js');
// Créer un transporteur de mail
let transporter = nodemailer.createTransport({
host: 'smtp.gmail.com',
port: 587,
// secure: true, // utiliser SSL
auth: {
user: 'stageodinnonoffi@gmail.com',
pass: 'pjjlofjkpnfpwkiz'
}
});
const db = mysql.createConnection({
host: 'lfbn-cle-1-608-214.w92-157.abo.wanadoo.fr',
user: 'crmuser',
@ -130,7 +146,52 @@ app.get('/Sale/Pie/:iduser/:month/:year', (req, res) => {
const iduser = req.params.iduser;
const month = req.params.month;
const year = req.params.year;
let sql = 'SELECT DISTINCT SUM(s.amount) as total,cu.name FROM sales s,customers cu,contacts co WHERE co.iduser = ? AND co.idcustomer = cu.idcustomer AND cu.idcustomer = s.idcustomer AND ((s.month >= ? AND s.year = ?) OR s.year > ?) GROUP BY cu.name ORDER BY total DESC';
let sql = 'SELECT DISTINCT SUM(s.amount) as total,cu.name FROM sales s,customers cu,contacts co WHERE co.iduser = ? AND co.idcustomer = cu.idcustomer AND cu.idcustomer = s.idcustomer AND ((s.month >= ? AND s.year = ?) OR s.year > ?) GROUP BY cu.name ORDER BY total DESC LIMIT 10';
db.query(sql, [iduser,month,year,year], (err, result) => {
if (err) throw err;
console.log(result);
res.send(result);
});
});
app.get('/Sale/KeyNumber/:iduser/:month/:year', (req, res) => {
const iduser = req.params.iduser;
const month = req.params.month;
const year = req.params.year;
let sql = 'SELECT SUM(s.amount) as total,COUNT(co.firstname) as totalcontact FROM sales s,customers cu,contacts co WHERE co.iduser = ? AND co.idcustomer = cu.idcustomer AND cu.idcustomer = s.idcustomer AND ((s.month >= ? AND s.year = ?))';
db.query(sql, [iduser,month,year], (err, result) => {
if (err) throw err;
console.log(result);
res.send(result);
});
});
app.get('/Sale/BestCustomer/:iduser', (req, res) => {
const iduser = req.params.iduser;
const month = req.params.month;
const year = req.params.year;
let sql = 'SELECT SUM(s.amount) as total, cu.name FROM sales s,customers cu,contacts co WHERE co.iduser = ? AND co.idcustomer = cu.idcustomer AND cu.idcustomer = s.idcustomer GROUP BY cu.name ORDER BY cu.name LIMIT 1';
db.query(sql, [iduser], (err, result) => {
if (err) throw err;
console.log(result);
res.send(result);
});
});
app.get('/Sale/Line/:iduser/:month/:year', (req, res) => {
const iduser = req.params.iduser;
const month = req.params.month;
const year = req.params.year;
let sql = 'SELECT DISTINCT SUM(s.amount) as total,s.year,s.month FROM sales s,customers cu,contacts co WHERE co.iduser = 41 AND co.idcustomer = cu.idcustomer AND cu.idcustomer = s.idcustomer AND ((s.month >= 12 AND s.year = 2021) OR s.year > 2021) GROUP BY s.year,s.month ORDER BY s.year,s.month';
db.query(sql, [iduser,month,year,year], (err, result) => {
if (err) throw err;
@ -212,13 +273,37 @@ app.post('/User/Add', (req, res) => {
let form = req.body;
console.log(form);
let rand_pass = "";
const carac="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789&*#-+@!$%?/()[]{}0123456789&*#-+@!$%?/()[]{}";
for(var i=0;i<10;i++)
{
rand_pass += carac[Math.floor(Math.random()*carac.length)];
}
const sql = `INSERT INTO users(lastname, firstname, idrole, login, password, phone, mail) VALUES ('${form.lastname}', '${form.firstname}', '${form.idrole}', '${form.login}', '${form.password}', '${form.phone}', '${form.mail}')`;
const sql = `INSERT INTO users(lastname, firstname, idrole, login, password, phone, mail) VALUES ('${form.lastname}', '${form.firstname}', '${form.idrole}', '${form.login}', '${CryptoJS.SHA256(rand_pass).toString(CryptoJS.enc.Hex)}', '${form.phone}', '${form.mail}')`;
db.query(sql , (err, result) => {
if (err) throw err;
console.log(result);
res.send('Post added...' + result.insertId);
});
let mailOptions = {
from: '"JTT CRM" <JTT@CRM.fr>',
to: form.mail,
subject: "Connexion a JTTCRM",
text: "Voici ton mot de passe : " + rand_pass,
};
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
console.log(error);
} else {
console.log('Email sent with mdp: ' + info.response);
}
});
});
app.put('/User/Update/:id', (req, res) => {
@ -263,6 +348,18 @@ app.delete('/User/Delete/:id', (req, res) => {
//Api pour les contacts de la page repertoire
app.get('/Contact/LastAdd3/:iduser', (req, res) => {
const iduser = req.params.iduser;
let sql = 'SELECT c.firstname,c.lastname FROM contacts c WHERE c.iduser = ? ORDER BY c.idcontact DESC LIMIT 3';
db.query(sql,[iduser], (err, result) => {
if (err) throw err;
console.log(result);
res.send(result);
});
});
app.get('/Contact/AllWithCustomerName', (req, res) => {
let sql = 'SELECT c.*, cu.name FROM contacts c, customers cu WHERE cu.idCustomer = c.idCustomer ORDER BY idcontact';
db.query(sql, (err, result) => {
@ -270,4 +367,102 @@ app.get('/Contact/AllWithCustomerName', (req, res) => {
console.log(result);
res.send(result);
});
});
app.get('/Entreprise/All', (req, res) => {
let sql = 'SELECT idcustomer,name FROM customers ORDER BY name';
db.query(sql, (err, result) => {
if (err) throw err;
console.log(result);
res.send(result);
});
});
app.get('/Contact/Exist/:phone', (req, res) => {
const phone = req.params.phone
let sql = 'SELECT idcontact FROM contacts WHERE phone = ?';
db.query(sql, [phone], (err, result) => {
if (err) throw err;
console.log(result);
res.send(result);
});
});
app.post('/Contact/Add', (req, res) => {
let form = req.body;
console.log("on est dans le form",form);
const sql = `INSERT INTO contacts(firstname,lastname, mail, phone, iduser, idcustomer) VALUES ('${form.firstname}', '${form.lastname}', '${form.mail}', '${form.phone}', '${form.iduser}', '${form.idcustomer}' )`;
db.query(sql , (err, result) => {
if (err) throw err;
console.log(result);
res.send('Post added...' + result.insertId);
});
});
app.get('/Contact/:iduser', (req, res) => {
const iduser = req.params.iduser;
let sql = 'SELECT c.idcontact,c.firstname,c.lastname,cu.name FROM contacts c,customers cu WHERE cu.idcustomer = c.idcustomer AND c.iduser = ?';
db.query(sql,[iduser], (err, result) => {
if (err) throw err;
console.log(result);
res.send(result);
});
});
app.post('/Event/Add', (req, res) => {
let form = req.body;
console.log("on est dans le form d'un event ",form);
const sql = `INSERT INTO events(date,starttime,endtime,comment,idusersend,iduserreceive,idcontact) VALUES ('${form.date}', '${form.starttime}', '${form.endtime}', '${form.comment}', '${form.idusersend}', '${form.iduserreceive}', '${form.idcontact}')`;
db.query(sql , (err, result) => {
if (err) throw err;
console.log(result);
res.send('Post added...');
});
});
app.get('/Event/:iduser', (req, res) => {
const iduser = req.params.iduser;
let sql = 'SELECT e.date,e.starttime,e.endtime,e.comment FROM events e where e.iduserreceive = ?';
db.query(sql,[iduser], (err, result) => {
if (err) throw err;
console.log(result);
res.send(result);
});
});
app.post('/Mail/Avertir', (req, res) => {
// Définir les options du mail
let form = req.body;
console.log(form)
let mailOptions = {
from: '"JTT CRM" <JTT@CRM.fr>',
to: 'Jeremy.DUCOURTHIALE@etu.uca.fr',
subject: form.objet,
text: form.raison
};
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
console.log(error);
res.send(false)
} else {
console.log('Email sent: ' + info.response);
res.send(true)
}
});
});

@ -15,6 +15,7 @@
"@mui/material": "^5.10.13",
"body": "^5.1.0",
"body-parser": "^1.20.1",
"bootstrap": "^5.2.3",
"corps": "^0.1.0",
"cors": "^2.8.5",
"crypto-js": "^4.1.1",
@ -22,7 +23,6 @@
"fullcalendar": "^5.11.3",
"googleapis": "^105.0.0",
"mysql": "^2.18.1",
"nodemailer": "^6.8.0",
"parser": "^0.1.4"
},
"devDependencies": {
@ -866,6 +866,48 @@
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@react-aria/ssr": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.4.0.tgz",
"integrity": "sha512-qzuGk14/fUyUAoW/EBwgFcuMkVNXJVGlezTgZ1HovpCZ+p9844E7MUFHE7CuzFzPEIkVeqhBNIoIu+VJJ8YCOA==",
"dependencies": {
"@babel/runtime": "^7.6.2"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
}
},
"node_modules/@restart/hooks": {
"version": "0.4.7",
"resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
"integrity": "sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==",
"dependencies": {
"dequal": "^2.0.2"
},
"peerDependencies": {
"react": ">=16.8.0"
}
},
"node_modules/@restart/ui": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.4.1.tgz",
"integrity": "sha512-J7wFOx2DcmkBqCqiZgDsggLO7faiNh4Nv1/v80FmbRgP+MYpwaVDKKXLC69DA4+ejgNIsBP5ORtC74EZqO1j8A==",
"dependencies": {
"@babel/runtime": "^7.18.3",
"@popperjs/core": "^2.11.5",
"@react-aria/ssr": "^3.2.0",
"@restart/hooks": "^0.4.7",
"@types/warning": "^3.0.0",
"dequal": "^2.0.2",
"dom-helpers": "^5.2.0",
"uncontrollable": "^7.2.1",
"warning": "^4.0.3"
},
"peerDependencies": {
"react": ">=16.14.0",
"react-dom": ">=16.14.0"
}
},
"node_modules/@types/parse-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@ -907,6 +949,11 @@
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"node_modules/@types/warning": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
"integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
},
"node_modules/abbrev": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@ -1119,6 +1166,24 @@
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
"integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ=="
},
"node_modules/bootstrap": {
"version": "5.2.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
"integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"peerDependencies": {
"@popperjs/core": "^2.11.6"
}
},
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -1266,6 +1331,11 @@
"fsevents": "~2.3.2"
}
},
"node_modules/classnames": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
},
"node_modules/clsx": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
@ -1430,6 +1500,14 @@
"node": ">= 0.8"
}
},
"node_modules/dequal": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
"engines": {
"node": ">=6"
}
},
"node_modules/destroy": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@ -1975,6 +2053,14 @@
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
},
"node_modules/invariant": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
"dependencies": {
"loose-envify": "^1.0.0"
}
},
"node_modules/ipaddr.js": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@ -2493,6 +2579,23 @@
"react-is": "^16.13.1"
}
},
"node_modules/prop-types-extra": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
"integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
"dependencies": {
"react-is": "^16.3.2",
"warning": "^4.0.0"
},
"peerDependencies": {
"react": ">=0.14.0"
}
},
"node_modules/prop-types-extra/node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/prop-types/node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -2564,6 +2667,35 @@
"node": ">=0.10.0"
}
},
"node_modules/react-bootstrap": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.0.tgz",
"integrity": "sha512-Jcrn6aUuRVBeSB6dzKODKZU1TONOdhAxu0IDm4Sv74SJUm98dMdhSotF2SNvFEADANoR+stV+7TK6SNX1wWu5w==",
"dependencies": {
"@babel/runtime": "^7.17.2",
"@restart/hooks": "^0.4.6",
"@restart/ui": "^1.4.1",
"@types/react-transition-group": "^4.4.4",
"classnames": "^2.3.1",
"dom-helpers": "^5.2.1",
"invariant": "^2.2.4",
"prop-types": "^15.8.1",
"prop-types-extra": "^1.1.0",
"react-transition-group": "^4.4.2",
"uncontrollable": "^7.2.1",
"warning": "^4.0.3"
},
"peerDependencies": {
"@types/react": ">=16.14.8",
"react": ">=16.14.0",
"react-dom": ">=16.14.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@ -2582,6 +2714,11 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
},
"node_modules/react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"node_modules/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@ -2911,6 +3048,20 @@
"node": ">= 0.6"
}
},
"node_modules/uncontrollable": {
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
"integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
"dependencies": {
"@babel/runtime": "^7.6.3",
"@types/react": ">=16.9.11",
"invariant": "^2.2.4",
"react-lifecycles-compat": "^3.0.4"
},
"peerDependencies": {
"react": ">=15.0.0"
}
},
"node_modules/undefsafe": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
@ -2985,6 +3136,14 @@
"node": ">= 0.8"
}
},
"node_modules/warning": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"dependencies": {
"loose-envify": "^1.0.0"
}
},
"node_modules/webidl-conversions": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@ -3577,6 +3736,38 @@
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
},
"@react-aria/ssr": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.4.0.tgz",
"integrity": "sha512-qzuGk14/fUyUAoW/EBwgFcuMkVNXJVGlezTgZ1HovpCZ+p9844E7MUFHE7CuzFzPEIkVeqhBNIoIu+VJJ8YCOA==",
"requires": {
"@babel/runtime": "^7.6.2"
}
},
"@restart/hooks": {
"version": "0.4.7",
"resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
"integrity": "sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==",
"requires": {
"dequal": "^2.0.2"
}
},
"@restart/ui": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.4.1.tgz",
"integrity": "sha512-J7wFOx2DcmkBqCqiZgDsggLO7faiNh4Nv1/v80FmbRgP+MYpwaVDKKXLC69DA4+ejgNIsBP5ORtC74EZqO1j8A==",
"requires": {
"@babel/runtime": "^7.18.3",
"@popperjs/core": "^2.11.5",
"@react-aria/ssr": "^3.2.0",
"@restart/hooks": "^0.4.7",
"@types/warning": "^3.0.0",
"dequal": "^2.0.2",
"dom-helpers": "^5.2.0",
"uncontrollable": "^7.2.1",
"warning": "^4.0.3"
}
},
"@types/parse-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@ -3618,6 +3809,11 @@
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"@types/warning": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
"integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
},
"abbrev": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@ -3782,6 +3978,12 @@
}
}
},
"bootstrap": {
"version": "5.2.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
"integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
"requires": {}
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -3876,6 +4078,11 @@
"readdirp": "~3.6.0"
}
},
"classnames": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
},
"clsx": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
@ -4006,6 +4213,11 @@
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
},
"dequal": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
},
"destroy": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@ -4433,6 +4645,14 @@
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
},
"invariant": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
"requires": {
"loose-envify": "^1.0.0"
}
},
"ipaddr.js": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@ -4802,6 +5022,22 @@
}
}
},
"prop-types-extra": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
"integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
"requires": {
"react-is": "^16.3.2",
"warning": "^4.0.0"
},
"dependencies": {
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
}
}
},
"proxy-addr": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@ -4850,6 +5086,25 @@
"loose-envify": "^1.1.0"
}
},
"react-bootstrap": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.0.tgz",
"integrity": "sha512-Jcrn6aUuRVBeSB6dzKODKZU1TONOdhAxu0IDm4Sv74SJUm98dMdhSotF2SNvFEADANoR+stV+7TK6SNX1wWu5w==",
"requires": {
"@babel/runtime": "^7.17.2",
"@restart/hooks": "^0.4.6",
"@restart/ui": "^1.4.1",
"@types/react-transition-group": "^4.4.4",
"classnames": "^2.3.1",
"dom-helpers": "^5.2.1",
"invariant": "^2.2.4",
"prop-types": "^15.8.1",
"prop-types-extra": "^1.1.0",
"react-transition-group": "^4.4.2",
"uncontrollable": "^7.2.1",
"warning": "^4.0.3"
}
},
"react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@ -4865,6 +5120,11 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
},
"react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@ -5130,6 +5390,17 @@
"mime-types": "~2.1.24"
}
},
"uncontrollable": {
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
"integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
"requires": {
"@babel/runtime": "^7.6.3",
"@types/react": ">=16.9.11",
"invariant": "^2.2.4",
"react-lifecycles-compat": "^3.0.4"
}
},
"undefsafe": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
@ -5176,6 +5447,14 @@
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
},
"warning": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"requires": {
"loose-envify": "^1.0.0"
}
},
"webidl-conversions": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",

@ -15,6 +15,7 @@
"@mui/material": "^5.10.13",
"body": "^5.1.0",
"body-parser": "^1.20.1",
"bootstrap": "^5.2.3",
"corps": "^0.1.0",
"cors": "^2.8.5",
"crypto-js": "^4.1.1",
@ -23,7 +24,8 @@
"googleapis": "^105.0.0",
"mysql": "^2.18.1",
"nodemailer": "^6.8.0",
"parser": "^0.1.4"
"parser": "^0.1.4",
"react-bootstrap": "^2.7.0"
},
"description": "",
"devDependencies": {

@ -13,6 +13,8 @@ import Calendrier from './pages/Calendrier';
import Repertoire from './pages/Repertoire';
import Parametres from './pages/Parametres';
import Chargement from './pages/Chargement';
import MailPourAdmin from './pages/MailPourAdmin';
import AddContact from './components/Contact/AddContact'
import { Component } from 'fullcalendar';
import RestartPassword from './pages/RestartPassword';
@ -40,6 +42,8 @@ const App = () => {
<Route path="/Repertoire" element={<Repertoire />} />
<Route path="/Parametres" element={<Parametres />} />
<Route path="/Chargement" element={<Chargement />} />
<Route path="/MailPourAdmin" element={<MailPourAdmin />} />
<Route path="/Repertoire/add" element={<AddContact />} />
</Routes>
</BrowserRouter>
);

@ -1,42 +1,97 @@
import React, {useState} from 'react'
import {useNavigate} from 'react-router-dom';
import React, { useState, useEffect } from 'react';
import axios from 'axios'
import NavigationDashboard from '../NavigationDashboard.js';
import CryptoJS from 'crypto-js';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import { NavLink } from 'react-router-dom';
import { useNavigate } from "react-router-dom";
import { Button } from '@mui/material';
import Session from 'react-session-api';
// HERE ABOVE useHistory IS REPLACED WITH useNavigate
function AddContact(props) {
const navigate=useNavigate();
const [User, setUser] = useState({name:"", email:""});
let add = (e) => {
e.preventDefault();
if(User.name === "" || User.email === ""){
alert("All fields are mandatory!!!");
return
}
// THIS IS USED TO SHOW THE LIST DATA ON THE APP.JS FILE
props.addContactHandler(User);
// THIS IS USED FOR WHEN THE ADD BUTTON IS PRESSED THE INPUT FILED AGAIN GETS EMPTY
setUser({name:"", email:""});
//console.log(props);
navigate('/');
}
const api = axios.create({
baseURL: 'http://localhost:8080'
})
function AddContact() {
const [loginError, setLoginError] = useState(false);
const [entreprises, setEntreprises] = useState([]);
const [selectedIdEntreprise, setSelectedIdEntreprise] = useState(1);
const navigate = useNavigate();
useEffect(() => {
api.get('/Entreprise/All').then((response) => {
setEntreprises(response.data);
});
}, []);
function handleChangeEntreprise(event) {
setSelectedIdEntreprise(event.target.value);
console.log("je suis dans handleChangeEntreprise");
};
function checkAdd(event) {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const values = Object.fromEntries(formData.entries());
api.get('/Contact/Exist/' + values.phone).then((response) => {
const login = response.data;
if (login.length > 0) {
setLoginError(true);
}
else {
setLoginError(false);
const newContact = { firstname: values.firstname, lastname: values.lastname, phone: values.phone, mail: values.mail, iduser: Session.get('idUser'), idcustomer: selectedIdEntreprise };
api.post('/Contact/Add', newContact).then(function (response) {
console.log(response.data);
});
navigate("/Repertoire");
}
});
};
return (
<div className='ui main'>
<h2>Add Contact</h2>
<form className='ui form' onSubmit={add}>
<div className='field'>
<label>Name</label>
<input type="text" name="Name" placeholder='Name' value={User.name} onChange={e => setUser({...User, name: e.target.value})}/>
</div>
<div className='field'>
<label>Email</label>
<input type="text" name="Email" placeholder='Email' value={User.email} onChange={e => setUser({...User, email: e.target.value})}/>
</div>
<button className='ui secondary button'>Add</button>
</form>
<div className='addContactPage'>
<h2>Ajouter un nouveau contact</h2>
<div className="Formulaire">
<form className="form" onSubmit={checkAdd}>
<table className="Formulaire_de_connexion">
<tr>
<div className="texte_côté">
<p>Nom :</p>
<p>Prénom :</p>
<p>Téléphone :</p>
<p>Email :</p>
<p>Entreprise :</p>
</div>
</tr>
<tr>
<input id="nom" name='firstname' className="texte_zone" type="text" placeholder="Nom..." required />
<input id="prenom" name='lastname' className="texte_zone" type="text" placeholder="Prénom..." required />
<input id="phone" name='phone' className="texte_zone" type="tel"
placeholder="Téléphone..." pattern="[0-9]{10}" required />
<input id="email" name='mail' className="texte_zone" type="email" placeholder="Email..." required />
<Select name='idcustomer' value={selectedIdEntreprise} onChange={handleChangeEntreprise}>
{entreprises.map(entreprise => (<MenuItem value={entreprise.idcustomer}>{entreprise.name}</MenuItem>))}
</Select>
</tr>
</table>
<p>{loginError === true ? "Le contact existe déja" : ''}</p>
<div className="bouton_submit">
<button className="bouton_val" type="submit">Valider</button>
<NavLink className="bouton_ann" to="/Repertoire">Retour</NavLink>
</div>
</form>
</div>
</div>
)
}
export default AddContact
export default AddContact;

@ -1,11 +0,0 @@
import React from 'react';
const Menu = () => {
return (
<div>
</div>
);
};
export default Menu;

@ -43,43 +43,116 @@ const NavigationDashboard = () => {
)
}
function HandleMouseOverCompte() {
const svgPath = document.querySelector('.svgPathCompte');
svgPath.setAttribute('d', 'M24 23.8q-3.45 0-5.625-2.175T16.2 16q0-3.45 2.175-5.625T24 8.2q3.45 0 5.625 2.175T31.8 16q0 3.45-2.175 5.625T24 23.8Zm12.9 16.65H11.1q-1.4 0-2.4-1t-1-2.4v-1.6q0-2 1-3.425 1-1.425 2.55-2.175 3.4-1.5 6.5-2.25t6.25-.75q3.15 0 6.225.775Q33.3 28.4 36.7 29.9q1.6.7 2.6 2.125t1 3.425v1.6q0 1.4-1 2.4t-2.4 1Zm-25.8-3.4h25.8V35.5q0-.8-.475-1.525-.475-.725-1.175-1.075-3.15-1.5-5.775-2.075Q26.85 30.25 24 30.25q-2.85 0-5.525.575Q15.8 31.4 12.7 32.9q-.7.35-1.15 1.075-.45.725-.45 1.525ZM24 20.4q1.9 0 3.15-1.25T28.4 16q0-1.9-1.25-3.15T24 11.6q-1.9 0-3.15 1.25T19.6 16q0 1.9 1.25 3.15T24 20.4Zm0-4.4Zm0 21.05Z');
}
function HandleMouseOutCompte() {
const svgPath = document.querySelector('.svgPathCompte');
svgPath.setAttribute('d', 'M24 23.8q-3.4 0-5.525-2.125-2.125-2.125-2.125-5.525 0-3.4 2.125-5.55T24 8.45q3.4 0 5.55 2.15t2.15 5.55q0 3.4-2.15 5.525Q27.4 23.8 24 23.8ZM11.2 40.15q-1.35 0-2.3-.975-.95-.975-.95-2.325v-1.6q0-1.95.975-3.35.975-1.4 2.525-2.1 3.35-1.5 6.4-2.25 3.05-.75 6.15-.75 3.1 0 6.125.775T36.5 29.8q1.6.7 2.6 2.1 1 1.4 1 3.35v1.6q0 1.35-.95 2.325-.95.975-2.35.975Z');
}
function HandleMouseOverDashboard() {
const svgPath = document.querySelector('.svgPathDashboard');
svgPath.setAttribute('d', 'M20.45 31.75q1.15 1.15 3.325 1.075 2.175-.075 3.175-1.625l9-13.95q.4-.65-.075-1.1-.475-.45-1.075-.05L21 25.2q-1.5 1-1.6 3.2-.1 2.2 1.05 3.35ZM9.7 40.3q-.95 0-1.85-.475-.9-.475-1.3-1.325-1.35-2.4-2.05-4.925-.7-2.525-.7-5.375 0-4.2 1.6-7.925 1.6-3.725 4.325-6.5t6.425-4.4Q19.85 7.75 24 7.75q2.25 0 4.7.575t4.85 1.875q1.1.6 1.225 1.475.125.875-.525 1.475-.45.35-1.025.425-.575.075-1.125-.175-2.05-1.15-4.25-1.7T24 11.15q-6.95 0-11.875 4.975T7.2 28.2q0 2.25.625 4.5t1.725 4.2H38.4q1.1-1.8 1.725-4.15.625-2.35.625-4.65 0-1.8-.45-3.85t-1.55-3.95q-.35-.55-.225-1.15.125-.6.575-1 .65-.5 1.4-.35.75.15 1.15.9 1.2 2.3 1.825 4.55t.675 4.55q.05 3-.625 5.7t-2.075 5q-.65 1.25-1.375 1.525-.725.275-1.825.275ZM24 24Z');
}
function HandleMouseOutDashboard() {
const svgPath = document.querySelector('.svgPathDashboard');
svgPath.setAttribute('d', 'M21.05 31q1.2 1.2 3.1 1.175 1.9-.025 2.8-1.375L36 17.3q.4-.65-.075-1.1-.475-.45-1.075-.05l-13.5 9.05q-1.35.9-1.425 2.75Q19.85 29.8 21.05 31Zm-11.3 9.3q-.95 0-1.85-.475Q7 39.35 6.6 38.5q-1.35-2.4-2.05-4.925-.7-2.525-.7-5.375 0-4.2 1.6-7.925 1.6-3.725 4.325-6.5t6.425-4.4q3.7-1.625 7.85-1.625 4.15 0 7.825 1.625t6.4 4.4Q41 16.55 42.6 20.275t1.6 7.925q0 2.85-.65 5.425Q42.9 36.2 41.5 38.5q-.65 1.25-1.375 1.525-.725.275-1.825.275Z');
}
function HandleMouseOverAnalyse() {
const svgPath = document.querySelector('.svgPathAnalyse');
svgPath.setAttribute('d', 'M15.75 34.15q.65 0 1.075-.425.425-.425.425-1.075V21.9q0-.65-.425-1.075-.425-.425-1.075-.425-.65 0-1.075.425-.425.425-.425 1.075v10.75q0 .65.45 1.075.45.425 1.05.425Zm8.25 0q.65 0 1.075-.425.425-.425.425-1.075v-17.3q0-.65-.425-1.075-.425-.425-1.075-.425-.65 0-1.075.425-.425.425-.425 1.075v17.3q0 .65.425 1.075.425.425 1.075.425Zm8.25 0q.65 0 1.075-.425.425-.425.425-1.075v-4.4q0-.65-.45-1.075-.45-.425-1.05-.425-.65 0-1.075.425-.425.425-.425 1.075v4.4q0 .65.425 1.075.425.425 1.075.425ZM9.1 42.3q-1.35 0-2.375-1.025T5.7 38.9V9.1q0-1.4 1.025-2.4t2.375-1h29.8q1.4 0 2.4 1t1 2.4v29.8q0 1.35-1 2.375T38.9 42.3Zm0-3.4h29.8V9.1H9.1v29.8Zm0 0V9.1v29.8Z');
}
function HandleMouseOutAnalyse() {
const svgPath = document.querySelector('.svgPathAnalyse');
svgPath.setAttribute('d', 'M15.75 34.15q.65 0 1.075-.425.425-.425.425-1.075V21.9q0-.65-.425-1.075-.425-.425-1.075-.425-.65 0-1.075.425-.425.425-.425 1.075v10.75q0 .65.45 1.075.45.425 1.05.425Zm8.25 0q.65 0 1.075-.425.425-.425.425-1.075v-17.3q0-.65-.425-1.075-.425-.425-1.075-.425-.65 0-1.075.425-.425.425-.425 1.075v17.3q0 .65.425 1.075.425.425 1.075.425Zm8.25 0q.65 0 1.075-.425.425-.425.425-1.075v-4.4q0-.65-.45-1.075-.45-.425-1.05-.425-.65 0-1.075.425-.425.425-.425 1.075v4.4q0 .65.425 1.075.425.425 1.075.425ZM9.1 42.3q-1.35 0-2.375-1.025T5.7 38.9V9.1q0-1.4 1.025-2.4t2.375-1h29.8q1.4 0 2.4 1t1 2.4v29.8q0 1.35-1 2.375T38.9 42.3Z');
}
function HandleMouseOverRepertoire() {
const svgPath = document.querySelector('.svgPathRepertoire');
svgPath.setAttribute('d', 'M1.55 36.15q-.7 0-1.2-.5t-.5-1.2v-1.1q0-2.05 2.1-3.275T7.5 28.85q.5 0 1.025.025.525.025.975.075-.4.9-.6 1.85-.2.95-.2 2v3.35Zm12 0q-.7 0-1.2-.5t-.5-1.2V32.8q0-3.3 3.35-5.375T24 25.35q5.45 0 8.8 2.075 3.35 2.075 3.35 5.375v1.65q0 .7-.5 1.2t-1.2.5Zm25.75 0V32.8q0-1.05-.2-2t-.6-1.85q.45-.05.975-.075.525-.025 1.025-.025 3.4 0 5.525 1.225Q48.15 31.3 48.15 33.35v1.1q0 .7-.5 1.2t-1.2.5ZM24 28.6q-3.85 0-6.25 1.15t-2.5 2.95v.2h17.5v-.25q-.1-1.75-2.5-2.9T24 28.6ZM7.5 27.4q-1.5 0-2.55-1.05Q3.9 25.3 3.9 23.8q0-1.5 1.05-2.55Q6 20.2 7.5 20.2q1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55Q9 27.4 7.5 27.4Zm33 0q-1.5 0-2.55-1.05-1.05-1.05-1.05-2.55 0-1.5 1.05-2.55Q39 20.2 40.5 20.2q1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55Q42 27.4 40.5 27.4ZM24 23.85q-2.55 0-4.35-1.775-1.8-1.775-1.8-4.375 0-2.55 1.8-4.325Q21.45 11.6 24 11.6t4.35 1.775q1.8 1.775 1.8 4.325 0 2.6-1.8 4.375T24 23.85Zm0-9.05q-1.25 0-2.075.85-.825.85-.825 2.05 0 1.25.825 2.1.825.85 2.075.85 1.25 0 2.075-.85.825-.85.825-2.1 0-1.2-.825-2.05-.825-.85-2.075-.85Zm0 18.1Zm0-15.2Z');
}
function HandleMouseOutRepertoire() {
const svgPath = document.querySelector('.svgPathRepertoire');
svgPath.setAttribute('d', 'M1.55 36.15q-.7 0-1.2-.5t-.5-1.2v-1.1q0-2.05 2.1-3.275T7.5 28.85q.5 0 1.025.025.525.025.975.075-.4.9-.6 1.85-.2.95-.2 2v3.35Zm12 0q-.7 0-1.2-.5t-.5-1.2V32.8q0-3.3 3.35-5.375T24 25.35q5.45 0 8.8 2.075 3.35 2.075 3.35 5.375v1.65q0 .7-.5 1.2t-1.2.5Zm25.75 0V32.8q0-1.05-.2-2t-.6-1.85q.45-.05.975-.075.525-.025 1.025-.025 3.4 0 5.525 1.225Q48.15 31.3 48.15 33.35v1.1q0 .7-.5 1.2t-1.2.5ZM7.5 27.4q-1.5 0-2.55-1.05Q3.9 25.3 3.9 23.8q0-1.5 1.05-2.55Q6 20.2 7.5 20.2q1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55Q9 27.4 7.5 27.4Zm33 0q-1.5 0-2.55-1.05-1.05-1.05-1.05-2.55 0-1.5 1.05-2.55Q39 20.2 40.5 20.2q1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55Q42 27.4 40.5 27.4ZM24 23.85q-2.55 0-4.35-1.775-1.8-1.775-1.8-4.375 0-2.55 1.8-4.325Q21.45 11.6 24 11.6t4.35 1.775q1.8 1.775 1.8 4.325 0 2.6-1.8 4.375T24 23.85Z');
}
function HandleMouseOverParametres() {
const svgPath = document.querySelector('.svgPathParametres');
svgPath.setAttribute('d', 'M27.35 44.3h-6.7q-.65 0-1.15-.4-.5-.4-.6-1.05l-.8-4.95q-.85-.3-1.85-.875T14.5 35.85l-4.55 2.1q-.6.3-1.25.1-.65-.2-.95-.8l-3.4-6.05q-.35-.55-.175-1.175T4.85 29l4.25-3.1q-.1-.4-.125-.95-.025-.55-.025-.95 0-.4.025-.95.025-.55.125-.95L4.85 19q-.5-.4-.675-1.025Q4 17.35 4.35 16.8l3.4-6.05q.35-.6.975-.8.625-.2 1.225.1l4.6 2.1q.7-.6 1.7-1.15 1-.55 1.85-.85l.8-5.05q.1-.6.6-1t1.15-.4h6.7q.65 0 1.15.4.5.4.6 1l.8 5q.85.35 1.875.875T33.5 12.15l4.55-2.1q.6-.3 1.25-.1.65.2.95.8l3.4 6q.35.55.2 1.2-.15.65-.7 1.05l-4.25 3q.1.45.125 1 .025.55.025 1 0 .45-.025.975-.025.525-.125.975L43.15 29q.5.4.675 1.025.175.625-.175 1.175l-3.4 6.05q-.35.6-.975.8-.625.2-1.225-.1l-4.6-2.1q-.7.6-1.675 1.2-.975.6-1.875.85l-.8 4.95q-.1.65-.6 1.05t-1.15.4ZM24 30.5q2.7 0 4.6-1.9 1.9-1.9 1.9-4.6 0-2.7-1.9-4.6-1.9-1.9-4.6-1.9-2.7 0-4.6 1.9-1.9 1.9-1.9 4.6 0 2.7 1.9 4.6 1.9 1.9 4.6 1.9Zm0-3q-1.5 0-2.5-1.025T20.5 24q0-1.45 1-2.475 1-1.025 2.5-1.025 1.45 0 2.475 1.025Q27.5 22.55 27.5 24q0 1.45-1.025 2.475Q25.45 27.5 24 27.5Zm0-3.5Zm-2.1 16.9h4.2l.7-5.6q1.65-.4 3.15-1.25t2.7-2.1l5.3 2.3 1.9-3.45-4.7-3.4q.2-.85.35-1.7.15-.85.15-1.7t-.125-1.7q-.125-.85-.375-1.7l4.7-3.4-1.9-3.45-5.3 2.3q-1.15-1.35-2.625-2.25-1.475-.9-3.225-1.1l-.7-5.6h-4.2l-.7 5.6q-1.7.3-3.2 1.175-1.5.875-2.7 2.175l-5.25-2.3-1.9 3.45 4.65 3.4q-.2.85-.325 1.7T12.35 24q0 .85.125 1.7t.325 1.7l-4.65 3.4 1.9 3.45 5.25-2.3q1.25 1.25 2.75 2.1 1.5.85 3.15 1.25Z');
}
function HandleMouseOutParametres() {
const svgPath = document.querySelector('.svgPathParametres');
svgPath.setAttribute('d', 'M27.35 44.3h-6.7q-.65 0-1.15-.4-.5-.4-.6-1.05l-.8-4.95q-.85-.3-1.85-.875T14.5 35.85l-4.55 2.1q-.6.3-1.25.1-.65-.2-.95-.8l-3.4-6.05q-.35-.55-.175-1.175T4.85 29l4.25-3.1q-.1-.4-.125-.95-.025-.55-.025-.95 0-.4.025-.95.025-.55.125-.95L4.85 19q-.5-.4-.675-1.025Q4 17.35 4.35 16.8l3.4-6.05q.35-.6.975-.8.625-.2 1.225.1l4.6 2.1q.7-.6 1.7-1.15 1-.55 1.85-.85l.8-5.05q.1-.6.6-1t1.15-.4h6.7q.65 0 1.15.4.5.4.6 1l.8 5q.85.35 1.875.875T33.5 12.15l4.55-2.1q.6-.3 1.25-.1.65.2.95.8l3.4 6q.35.55.2 1.2-.15.65-.7 1.05l-4.25 3q.1.45.125 1 .025.55.025 1 0 .45-.025.975-.025.525-.125.975L43.15 29q.5.4.675 1.025.175.625-.175 1.175l-3.4 6.05q-.35.6-.975.8-.625.2-1.225-.1l-4.6-2.1q-.7.6-1.675 1.2-.975.6-1.875.85l-.8 4.95q-.1.65-.6 1.05t-1.15.4ZM24 30.5q2.7 0 4.6-1.9 1.9-1.9 1.9-4.6 0-2.7-1.9-4.6-1.9-1.9-4.6-1.9-2.7 0-4.6 1.9-1.9 1.9-1.9 4.6 0 2.7 1.9 4.6 1.9 1.9 4.6 1.9Z');
}
function HandleMouseOverCalendrier(){
const svgPath = document.querySelector('.svgPathCalendrier');
svgPath.setAttribute('d', 'M24 28.05q-.9 0-1.475-.575Q21.95 26.9 21.95 26q0-.9.575-1.475.575-.575 1.475-.575.9 0 1.475.575.575.575.575 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm-8 0q-.9 0-1.475-.575Q13.95 26.9 13.95 26q0-.9.575-1.475.575-.575 1.475-.575.9 0 1.475.575.575.575.575 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm16 0q-.85 0-1.45-.575T29.95 26q0-.9.6-1.475.6-.575 1.45-.575t1.45.575q.6.575.6 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm-8 8q-.9 0-1.475-.6-.575-.6-.575-1.45t.575-1.45q.575-.6 1.475-.6.9 0 1.475.575.575.575.575 1.475 0 .85-.575 1.45t-1.475.6Zm-8 0q-.9 0-1.475-.6-.575-.6-.575-1.45t.575-1.45q.575-.6 1.475-.6.9 0 1.475.575.575.575.575 1.475 0 .85-.575 1.45t-1.475.6Zm16 0q-.85 0-1.45-.6t-.6-1.45q0-.85.6-1.45t1.45-.6q.85 0 1.45.575t.6 1.475q0 .85-.575 1.45t-1.475.6ZM9.1 44.3q-1.35 0-2.375-1.025T5.7 40.9V10.1q0-1.4 1.025-2.4t2.375-1h3.15V5.4q0-.7.5-1.2t1.2-.5q.75 0 1.25.5t.5 1.2v1.3h16.6V5.4q0-.7.5-1.2t1.2-.5q.75 0 1.25.5t.5 1.2v1.3h3.15q1.4 0 2.4 1t1 2.4v30.8q0 1.35-1 2.375T38.9 44.3Zm0-3.4h29.8V19.5H9.1v21.4Zm0-24.4h29.8v-6.4H9.1Zm0 0v-6.4 6.4Z');
}
function HandleMouseOutCalendrier(){
const svgPath = document.querySelector('.svgPathCalendrier');
svgPath.setAttribute('d','M24 28.05q-.9 0-1.475-.575Q21.95 26.9 21.95 26q0-.9.575-1.475.575-.575 1.475-.575.9 0 1.475.575.575.575.575 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm-8 0q-.9 0-1.475-.575Q13.95 26.9 13.95 26q0-.9.575-1.475.575-.575 1.475-.575.9 0 1.475.575.575.575.575 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm16 0q-.85 0-1.45-.575T29.95 26q0-.9.6-1.475.6-.575 1.45-.575t1.45.575q.6.575.6 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm-8 8q-.9 0-1.475-.6-.575-.6-.575-1.45t.575-1.45q.575-.6 1.475-.6.9 0 1.475.575.575.575.575 1.475 0 .85-.575 1.45t-1.475.6Zm-8 0q-.9 0-1.475-.6-.575-.6-.575-1.45t.575-1.45q.575-.6 1.475-.6.9 0 1.475.575.575.575.575 1.475 0 .85-.575 1.45t-1.475.6Zm16 0q-.85 0-1.45-.6t-.6-1.45q0-.85.6-1.45t1.45-.6q.85 0 1.45.575t.6 1.475q0 .85-.575 1.45t-1.475.6ZM9.1 44.3q-1.35 0-2.375-1.025T5.7 40.9V10.1q0-1.4 1.025-2.4t2.375-1h3.15V5.4q0-.7.5-1.2t1.2-.5q.75 0 1.25.5t.5 1.2v1.3h16.6V5.4q0-.7.5-1.2t1.2-.5q.75 0 1.25.5t.5 1.2v1.3h3.15q1.4 0 2.4 1t1 2.4v30.8q0 1.35-1 2.375T38.9 44.3Zm0-3.4h29.8V19.5H9.1v21.4Z');
}
return (
<div className="nav_bar_verticale">
<div className="parti_one">
<NavLink className="mon_compte" to="/Account">
<button className="button" type="submit">
<ImageToggleOnMouseOver primaryImg={img1} secondaryImg={img11} alt="" />
<svg onMouseOver={HandleMouseOverCompte} onMouseOut={HandleMouseOutCompte} className="svgImage" xmlns="http://www.w3.org/2000/svg" height="48" width="48">
<path onMouseOut={HandleMouseOutCompte} onMouseOver={HandleMouseOverCompte} className="svgPathCompte" d="M24 23.8q-3.4 0-5.525-2.125-2.125-2.125-2.125-5.525 0-3.4 2.125-5.55T24 8.45q3.4 0 5.55 2.15t2.15 5.55q0 3.4-2.15 5.525Q27.4 23.8 24 23.8ZM11.2 40.15q-1.35 0-2.3-.975-.95-.975-.95-2.325v-1.6q0-1.95.975-3.35.975-1.4 2.525-2.1 3.35-1.5 6.4-2.25 3.05-.75 6.15-.75 3.1 0 6.125.775T36.5 29.8q1.6.7 2.6 2.1 1 1.4 1 3.35v1.6q0 1.35-.95 2.325-.95.975-2.35.975Z">
</path>
</svg>
</button>
</NavLink>
</div>
<div className="parti_two">
<NavLink className="dashboard" to="/Dashboard">
<button className="button" type="submit">
<ImageToggleOnMouseOver primaryImg={img2} secondaryImg={img21} alt="" />
<svg onMouseOver={HandleMouseOverDashboard} onMouseOut={HandleMouseOutDashboard} className="svgImage" xmlns="http://www.w3.org/2000/svg" height="48" width="48">
<path onMouseOut={HandleMouseOutDashboard} onMouseOver={HandleMouseOverDashboard} className="svgPathDashboard" d="M21.05 31q1.2 1.2 3.1 1.175 1.9-.025 2.8-1.375L36 17.3q.4-.65-.075-1.1-.475-.45-1.075-.05l-13.5 9.05q-1.35.9-1.425 2.75Q19.85 29.8 21.05 31Zm-11.3 9.3q-.95 0-1.85-.475Q7 39.35 6.6 38.5q-1.35-2.4-2.05-4.925-.7-2.525-.7-5.375 0-4.2 1.6-7.925 1.6-3.725 4.325-6.5t6.425-4.4q3.7-1.625 7.85-1.625 4.15 0 7.825 1.625t6.4 4.4Q41 16.55 42.6 20.275t1.6 7.925q0 2.85-.65 5.425Q42.9 36.2 41.5 38.5q-.65 1.25-1.375 1.525-.725.275-1.825.275Z">
</path>
</svg>
</button>
</NavLink>
<NavLink className="analyse" to="/Analyse">
<button className="button" type="submit">
<ImageToggleOnMouseOver primaryImg={img3} secondaryImg={img31} alt="" />
</button>
<button className="button" type="submit">
<svg onMouseOver={HandleMouseOverAnalyse} onMouseOut={HandleMouseOutAnalyse} className="svgImage" xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path className="svgPathAnalyse" d="M15.75 34.15q.65 0 1.075-.425.425-.425.425-1.075V21.9q0-.65-.425-1.075-.425-.425-1.075-.425-.65 0-1.075.425-.425.425-.425 1.075v10.75q0 .65.45 1.075.45.425 1.05.425Zm8.25 0q.65 0 1.075-.425.425-.425.425-1.075v-17.3q0-.65-.425-1.075-.425-.425-1.075-.425-.65 0-1.075.425-.425.425-.425 1.075v17.3q0 .65.425 1.075.425.425 1.075.425Zm8.25 0q.65 0 1.075-.425.425-.425.425-1.075v-4.4q0-.65-.45-1.075-.45-.425-1.05-.425-.65 0-1.075.425-.425.425-.425 1.075v4.4q0 .65.425 1.075.425.425 1.075.425ZM9.1 42.3q-1.35 0-2.375-1.025T5.7 38.9V9.1q0-1.4 1.025-2.4t2.375-1h29.8q1.4 0 2.4 1t1 2.4v29.8q0 1.35-1 2.375T38.9 42.3Z"></path></svg>
</button>
</NavLink>
<NavLink className="calendrier" to="/Calendrier">
<button className="button" type="submit">
<ImageToggleOnMouseOver primaryImg={img4} secondaryImg={img41} alt="" />
</button>
<button className="button" type="submit">
<svg onMouseOver={HandleMouseOverCalendrier} onMouseOut={HandleMouseOutCalendrier} className="svgImage" xmlns="http://www.w3.org/2000/svg" height="48" width="48">
<path onMouseOut={HandleMouseOutCalendrier} onMouseOver={HandleMouseOverCalendrier} className="svgPathCalendrier" d="M24 28.05q-.9 0-1.475-.575Q21.95 26.9 21.95 26q0-.9.575-1.475.575-.575 1.475-.575.9 0 1.475.575.575.575.575 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm-8 0q-.9 0-1.475-.575Q13.95 26.9 13.95 26q0-.9.575-1.475.575-.575 1.475-.575.9 0 1.475.575.575.575.575 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm16 0q-.85 0-1.45-.575T29.95 26q0-.9.6-1.475.6-.575 1.45-.575t1.45.575q.6.575.6 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm-8 8q-.9 0-1.475-.6-.575-.6-.575-1.45t.575-1.45q.575-.6 1.475-.6.9 0 1.475.575.575.575.575 1.475 0 .85-.575 1.45t-1.475.6Zm-8 0q-.9 0-1.475-.6-.575-.6-.575-1.45t.575-1.45q.575-.6 1.475-.6.9 0 1.475.575.575.575.575 1.475 0 .85-.575 1.45t-1.475.6Zm16 0q-.85 0-1.45-.6t-.6-1.45q0-.85.6-1.45t1.45-.6q.85 0 1.45.575t.6 1.475q0 .85-.575 1.45t-1.475.6ZM9.1 44.3q-1.35 0-2.375-1.025T5.7 40.9V10.1q0-1.4 1.025-2.4t2.375-1h3.15V5.4q0-.7.5-1.2t1.2-.5q.75 0 1.25.5t.5 1.2v1.3h16.6V5.4q0-.7.5-1.2t1.2-.5q.75 0 1.25.5t.5 1.2v1.3h3.15q1.4 0 2.4 1t1 2.4v30.8q0 1.35-1 2.375T38.9 44.3Zm0-3.4h29.8V19.5H9.1v21.4Z">
</path>
</svg>
</button>
</NavLink>
</div>
<div className="parti_three">
<NavLink className="repertoire" to="/Repertoire">
<button className="button" type="submit">
<ImageToggleOnMouseOver primaryImg={img5} secondaryImg={img51} alt="" />
<svg onMouseOver={HandleMouseOverRepertoire} onMouseOut={HandleMouseOutRepertoire} className="svgImage" xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path className="svgPathRepertoire" d="M1.55 36.15q-.7 0-1.2-.5t-.5-1.2v-1.1q0-2.05 2.1-3.275T7.5 28.85q.5 0 1.025.025.525.025.975.075-.4.9-.6 1.85-.2.95-.2 2v3.35Zm12 0q-.7 0-1.2-.5t-.5-1.2V32.8q0-3.3 3.35-5.375T24 25.35q5.45 0 8.8 2.075 3.35 2.075 3.35 5.375v1.65q0 .7-.5 1.2t-1.2.5Zm25.75 0V32.8q0-1.05-.2-2t-.6-1.85q.45-.05.975-.075.525-.025 1.025-.025 3.4 0 5.525 1.225Q48.15 31.3 48.15 33.35v1.1q0 .7-.5 1.2t-1.2.5ZM7.5 27.4q-1.5 0-2.55-1.05Q3.9 25.3 3.9 23.8q0-1.5 1.05-2.55Q6 20.2 7.5 20.2q1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55Q9 27.4 7.5 27.4Zm33 0q-1.5 0-2.55-1.05-1.05-1.05-1.05-2.55 0-1.5 1.05-2.55Q39 20.2 40.5 20.2q1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55Q42 27.4 40.5 27.4ZM24 23.85q-2.55 0-4.35-1.775-1.8-1.775-1.8-4.375 0-2.55 1.8-4.325Q21.45 11.6 24 11.6t4.35 1.775q1.8 1.775 1.8 4.325 0 2.6-1.8 4.375T24 23.85Z"></path></svg>
</button>
</NavLink>
</div>
<div className="parti_four">
<NavLink className="parametres" to="/Parametres">
<button className="button" type="submit">
<ImageToggleOnMouseOver primaryImg={img6} secondaryImg={img61} alt="" />
<svg onMouseOver={HandleMouseOverParametres} onMouseOut={HandleMouseOutParametres} className="svgImage" xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path className="svgPathParametres" d="M27.35 44.3h-6.7q-.65 0-1.15-.4-.5-.4-.6-1.05l-.8-4.95q-.85-.3-1.85-.875T14.5 35.85l-4.55 2.1q-.6.3-1.25.1-.65-.2-.95-.8l-3.4-6.05q-.35-.55-.175-1.175T4.85 29l4.25-3.1q-.1-.4-.125-.95-.025-.55-.025-.95 0-.4.025-.95.025-.55.125-.95L4.85 19q-.5-.4-.675-1.025Q4 17.35 4.35 16.8l3.4-6.05q.35-.6.975-.8.625-.2 1.225.1l4.6 2.1q.7-.6 1.7-1.15 1-.55 1.85-.85l.8-5.05q.1-.6.6-1t1.15-.4h6.7q.65 0 1.15.4.5.4.6 1l.8 5q.85.35 1.875.875T33.5 12.15l4.55-2.1q.6-.3 1.25-.1.65.2.95.8l3.4 6q.35.55.2 1.2-.15.65-.7 1.05l-4.25 3q.1.45.125 1 .025.55.025 1 0 .45-.025.975-.025.525-.125.975L43.15 29q.5.4.675 1.025.175.625-.175 1.175l-3.4 6.05q-.35.6-.975.8-.625.2-1.225-.1l-4.6-2.1q-.7.6-1.675 1.2-.975.6-1.875.85l-.8 4.95q-.1.65-.6 1.05t-1.15.4ZM24 30.5q2.7 0 4.6-1.9 1.9-1.9 1.9-4.6 0-2.7-1.9-4.6-1.9-1.9-4.6-1.9-2.7 0-4.6 1.9-1.9 1.9-1.9 4.6 0 2.7 1.9 4.6 1.9 1.9 4.6 1.9Z"></path></svg>
</button>
</NavLink>
</div>

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios'
import axios from 'axios';
import NavigationAdmin from '../components/NavigationAdmin.js';
import CryptoJS from 'crypto-js';
import Select, { SelectChangeEvent } from '@mui/material/Select';
@ -28,6 +28,7 @@ function Admin_create() {
function handleChangeRole(event){
setSelectedIdRole(event.target.value);
console.log(event.target.value);
};
function checkAdd(event){
@ -36,7 +37,6 @@ function Admin_create() {
const formData = new FormData(event.currentTarget);
const values = Object.fromEntries(formData.entries());
console.log(values.firstname);
api.get('/User/Exist/'+ values.login).then((response) => {
const login = response.data;
if (login.length > 0){
@ -44,7 +44,6 @@ function Admin_create() {
}
else {
setLoginError(false);
values.password = CryptoJS.SHA256(values.password).toString(CryptoJS.enc.Hex);
api.post('/User/Add', values).then (function(response) {
console.log(response.data);
@ -63,7 +62,7 @@ function Admin_create() {
<div className="Formulaire">
<form className="form" onSubmit={checkAdd}>
<table className="Formulaire_de_connexion">
<tr>
<tr className="one-2">
<div className="texte_côté">
<p>Nom :</p>
<p>Prénom :</p>
@ -71,10 +70,9 @@ function Admin_create() {
<p>Email :</p>
<p>Rôle :</p>
<p>Identifiant :</p>
<p>Mot de passe :</p>
</div>
</tr>
<tr>
<tr className="two-2">
<input id="nom" name='lastname' className="texte_zone" type="text" placeholder="Nom..." required/>
<input id="prenom" name='firstname' className="texte_zone" type="text" placeholder="Prénom..." required/>
<input id="phone" name='phone' className="texte_zone" type="tel"
@ -90,7 +88,6 @@ function Admin_create() {
))}
</Select>
<input id="identifiant" name='login' className="texte_zone" type="text" placeholder="Identifiant..." required/>
<input id="password" name='password' className="texte_zone" type="password" placeholder="Mot de passe..." required/>
</tr>
</table>
<p>{loginError === true?"L'identifiant existe déja":''}</p>

@ -96,9 +96,9 @@ function Admin_modif() {
<div className="Formulaire">
<form className="form" onSubmit={checkModif}>
<table className="Formulaire_de_connexion">
<tr>
<tr className="one">
<div className="texte_côté">
<p>Nom :</p>
<div>Nom :</div>
<p>Prénom :</p>
<p>Login :</p>
<p>Rôle :</p>
@ -106,7 +106,7 @@ function Admin_modif() {
<p>Mail :</p>
</div>
</tr>
<tr>
<tr className="two">
<input id="nom" value={lastName} onChange={handleChangeLastName} name="lastname" className="texte_zone" type="text" placeholder="Nom..." required/>
<input id="prenom" value={firstName} onChange={handleChangeFirstName} name="firstname" className="texte_zone" type="text" placeholder="Prénom..." required/>
<input id="identifiant" value={login} onChange={handleChangeLogin} name="login" className="texte_zone" type="text" placeholder="Identifiant..." required/>
@ -124,8 +124,8 @@ function Admin_modif() {
<input id="email" value={mail} onChange={handleChangeMail} name="mail" className="texte_zone" type="email" placeholder="Email..." required/>
<input id="identifiant" value={login} onChange={handleChangeLogin} name="login" className="texte_zone" type="text" placeholder="Identifiant..." required/>
</tr>
<tr>
<NavLink className="button_submit" to="/RestartPassword" state={{ iduser:iduser }}>Réinitialiser le mot de passe</NavLink>
<tr className="three">
<NavLink className="button_submit" to="/RestartPassword" state={{ iduser:iduser }}>Réinitialiser mot de passe</NavLink>
</tr>
</table>
<div className="bouton_submit">

@ -2,15 +2,15 @@ import React, { useState, useEffect } from 'react';
import axios from 'axios'
import NavigationAdmin from '../components/NavigationAdmin.js';
import { NavLink, useLocation } from "react-router-dom";
import { TableContainer,Table,TableHead,TableBody,TableRow,TableCell } from '@mui/material';
import { TableContainer, Table, TableHead, TableBody, TableRow, TableCell } from '@mui/material';
import { Paper } from '@mui/material';
import { useNavigate } from "react-router-dom";
const api = axios.create({
baseURL: 'http://localhost:8080'
})
})
function Admin_supp(){
function Admin_supp() {
const location = useLocation();
const { iduser } = location.state;
@ -19,7 +19,7 @@ function Admin_supp(){
const navigate = useNavigate();
useEffect(() =>{
useEffect(() => {
const apiString = '/User/Id/' + iduser;
api.get(apiString).then((response) => {
console.log(response.data[0]);
@ -27,8 +27,8 @@ function Admin_supp(){
});
}, []);
function checkDelete(event){
function checkDelete(event) {
event.preventDefault();
const apiString = '/User/Delete/' + iduser;
@ -50,11 +50,11 @@ function Admin_supp(){
<Table aria-label="simple table" size="small" stickyHeader>
<TableHead >
<TableRow>
<TableCell sx={{ bgcolor: 'info.main'}} align="left">Nom</TableCell>
<TableCell sx={{ bgcolor: 'info.main'}} align="center">Prénom</TableCell>
<TableCell sx={{ bgcolor: 'info.main'}} align="center">Identifiant</TableCell>
<TableCell sx={{ bgcolor: 'info.main'}} align="center">Téléphone</TableCell>
<TableCell sx={{ bgcolor: 'info.main'}} align="center">Email</TableCell>
<TableCell sx={{ bgcolor: 'info.main' }} align="left">Nom</TableCell>
<TableCell sx={{ bgcolor: 'info.main' }} align="center">Prénom</TableCell>
<TableCell sx={{ bgcolor: 'info.main' }} align="center">Identifiant</TableCell>
<TableCell sx={{ bgcolor: 'info.main' }} align="center">Téléphone</TableCell>
<TableCell sx={{ bgcolor: 'info.main' }} align="center">Email</TableCell>
</TableRow>
</TableHead>
<TableBody >
@ -68,13 +68,13 @@ function Admin_supp(){
</TableBody>
</Table>
</TableContainer>
</div>
<div className="bouton_submit">
<button onClick={checkDelete}>Valider</button>
<NavLink className="bouton_ann" to="/Admin_list">Retour</NavLink>
<div className="bouton_submit">
<button className="bouton_val" onClick={checkDelete}>Valider</button>
<NavLink className="bouton_ann" to="/Admin_list">Retour</NavLink>
</div>
</div>
</div>
</div>
</div>
);
};

@ -2,7 +2,7 @@ import React, {useState,useEffect} from 'react';
import axios from 'axios'
import Chart from 'chart.js/auto'
import NavigationDashboard from '../components/NavigationDashboard';
import { Pie } from "react-chartjs-2";
import { Pie,Line } from "react-chartjs-2";
import { Chart as ChartJS, ArcElement, Tooltip, Legend, DoughnutController } from 'chart.js';
import { setDefaultLocale } from 'react-datepicker';
import { private_excludeVariablesFromRoot } from '@mui/material';
@ -22,6 +22,7 @@ const Analyse = () => {
}
const [pieDatas, setPieDatas] = useState([]);
const [lineDatas, setLineDatas] = useState([]);
useEffect(() => {
const date = new Date();
@ -67,6 +68,11 @@ const Analyse = () => {
setPieDatas(response.data);
});
const apiStringLine = '/Sale/Line/' + Session.get("idUser") + '/' + month + '/' + year;
api.get(apiStringLine).then((response) => {
setLineDatas(response.data);
});
}, []);
const data = {
@ -110,17 +116,36 @@ const Analyse = () => {
data.datasets[0].data[i] = pieDatas[i].total;
}
const dataH = {
labels: [],
datasets: [
{
label: 'Sales',
fill: true,
data: [],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor:'rgba(255, 99, 132, 1)',
borderWidth: 1,
},
],
};
for(let i = 0; i < lineDatas.length; i++)
{
dataH.labels[i] = lineDatas[i].month +"/" +lineDatas[i].year;
dataH.datasets[0].data[i] = lineDatas[i].total;
}
return (
<body className={theme}>
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
<div className="page_analyse">
{/* Create an analysis page */}
<div className="haut_de_page">
<h2 className="titre">Analyse</h2>
<div className="rechLogo">
<img className="logo" srcSet="./LogoApp.svg"/>
<img className="logo" srcSet={theme === "light" ? './LogoApp.svg' : './LogoApp_light.svg'}/>
</div>
</div>
@ -137,10 +162,10 @@ const Analyse = () => {
</div>
<div className="Stat-2">
<div className="Stat-2_titre">
<p>coucou2</p>
<p>Courbe des ventes</p>
</div>
<div className="histogramme">
coucou21
<Line data={dataH}/>
</div>
</div>
</div>

@ -1,6 +1,10 @@
import React, { useState } from 'react';
import React, { useState,useEffect } from 'react';
import "react-datepicker/dist/react-datepicker.css";
import NavigationDashboard from '../components/NavigationDashboard';
import axios from 'axios';
import Session from 'react-session-api';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import format from "date-fns/format";
import getDay from "date-fns/getDay";
@ -9,42 +13,69 @@ import startOfWeek from "date-fns/startOfWeek";
import { Calendar, dateFnsLocalizer } from "react-big-calendar";
import "react-big-calendar/lib/css/react-big-calendar.css";
const api = axios.create({
baseURL: 'http://localhost:8080'
})
const locales = {
'fr': require('date-fns/locale/fr')
};
const localizer = dateFnsLocalizer({
};
const localizer = dateFnsLocalizer({
format,
parse,
startOfWeek,
getDay,
locales,
});
const events = [
];
locales,
});
function Calendrier(){
const [contacts, setContacts] = useState([]);
const [selectedContact, setSelectedContact] = useState(1);
const [allEvents, setAllEvents] = useState([]);
const Calendrier = () => {
useEffect(() =>{
const apiString = '/Contact/' + Session.get("idUser");
api.get(apiString).then((response) => {
setContacts(response.data);
setSelectedContact(response.data[0].idcontact)
});
const apiStringEvent = '/Event/' + Session.get("idUser");
api.get(apiStringEvent).then((response) => {
setAllEvents([]);
response.data.forEach(event => {
const newEvent = { title: event.comment, start: new Date(event.date+" "+event.starttime), end: new Date(event.date+" "+event.endtime) };
setAllEvents(allEvents => [...allEvents, newEvent]);
});
});
}, []);
const [theme, setTheme] = useState("light");
if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) {
setTheme(localStorage.getItem("theme"))
}
const [titre, setTitre] = useState("");
const [jour , setJour] = useState(new Date());
const [heureDebut, setHeureDebut] = useState(new Date());
const [heureFin, setHeureFin] = useState(new Date());
const [allEvents, setAllEvents] = useState(events);
function handleAddEvent() {
const newEvent = { title: titre, start: new Date(jour+" "+heureDebut), end: new Date(jour+" "+heureFin) };
const newEventBD = { date: jour,starttime: heureDebut,endtime: heureFin,comment: titre, idusersend: Session.get("idUser"),iduserreceive: Session.get("idUser"), idcontact: selectedContact};
api.post('/Event/Add', newEventBD).then (function(response) {
console.log(response.data);
});
setAllEvents([...allEvents, newEvent]);
}
function handleChangeContact(event){
setSelectedContact(event.target.value);
};
return (
<body className={theme}>
@ -56,7 +87,7 @@ const Calendrier = () => {
<h2 className="titre">Calendrier</h2>
<link href='fullcalendar/main.css' rel='stylesheet' />
<div className="rechLogo">
<img className="logo" srcSet="./LogoApp.svg"/>
<img className="logo" srcSet={theme === "light" ? './LogoApp.svg' : './LogoApp_light.svg'}/>
</div>
</div>
@ -65,21 +96,27 @@ const Calendrier = () => {
<div className="Calendrier">
<h2 className="Titre">Ajouter un évènement
<div className="mini_formulaire_evenement">
<input className="ajout_input" type="text" placeholder="Ajoutez un titre" style={{height: "20px", width: "100%", marginRight: "10px"}}
<input className="ajout_input" type="text" placeholder="Ajoutez un titre" style={{height: "20px", marginRight: "10px", marginLeft: "10px",marginBottom: "10px"}}
onChange={(e) => setTitre(e.target.value)} />
<input className='date' type="date" placeholder="Ajoutez un jour" style={{height: "20px", width: "100%", marginRight: "10px"}}
<input className='date' type="date" placeholder="Ajoutez un jour" style={{height: "70%", width: "90%", marginRight: "10px", marginLeft: "10px", marginBottom: "10px", borderRadius: "10px"}}
onChange={(e) => setJour(e.target.value)} />
<input className='date' type="time" placeholder="Ajoutez une heure de début" style={{height: "20px", width: "100%", marginRight: "10px"}}
<input className='date' type="time" placeholder="Ajoutez une heure de début" style={{height: "70%", width: "90%", marginRight: "10px" , marginLeft: "10px",marginBottom: "10px", borderRadius: "10px"}}
onChange={(e) => setHeureDebut(e.target.value)} />
<input className='date' type="time" placeholder="Ajoutez une heure de fin" style={{height: "20px", width: "100%", marginRight: "10px"}}
<input className='date' type="time" placeholder="Ajoutez une heure de fin" style={{height: "70%", width: "90%", marginRight: "10px", marginLeft: "10px", marginBottom: "10px", borderRadius: "10px"}}
onChange={(e) => setHeureFin(e.target.value)} />
<Select
className="select"
name='idcontact'
value={selectedContact}
onChange={handleChangeContact}
>
{contacts.map(contact => (
<MenuItem value={contact.idcontact}>{contact.firstname + contact.lastname + '\n(' + contact.name + ')'}</MenuItem>
))}
</Select>
</div>
<button className="bouton_ajout" onClick={handleAddEvent}>
<p>Ajouter l'évènement</p>
Ajouter l'évènement
</button>
</h2>
<Calendar localizer={localizer} events={allEvents} defaultView="week"

@ -103,7 +103,7 @@ function Compte() {
<div className="haut_de_page">
<h2 className="titre">Mon Compte</h2>
<div className="rechLogo">
<img className="logo" srcSet="./LogoApp.svg" />
<img className="logo" srcSet={theme === "light" ? './LogoApp.svg' : './LogoApp_light.svg'}/>
</div>
</div>
<div className="bas_de_page">

@ -1,23 +1,63 @@
import React, {useState} from 'react';
import React, { useState, useEffect } from 'react';
import NavigationDashboard from '../components/NavigationDashboard';
import Session from 'react-session-api';
import axios from 'axios';
const Dashboard = () => {
const [theme, setTheme] = useState("light");
const api = axios.create({
baseURL: 'http://localhost:8080'
})
function Dashboard() {
const [infoContactRecent, setInfoContactRecent] = useState([]);
const [dataKey, setDataKey] = useState([]);
const [infoBestCustomer, setinfoBestCustomer] = useState([]);
const [theme, setTheme] = useState("light");
if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) {
setTheme(localStorage.getItem("theme"))
}
useEffect(() => {
const date = new Date();
date.setMonth(date.getMonth() - 1);
const year = date.getFullYear();
const month = (date.getMonth() + 1);
const apiString = '/Contact/LastAdd3/' + Session.get("idUser");
api.get(apiString).then((response) => {
if (response.data.length > 0)
setInfoContactRecent(response.data);
});
const apiStringKey = '/Sale/KeyNumber/' + Session.get("idUser") + "/" + month + "/" + year;
api.get(apiStringKey).then((response) => {
if (response.data.length > 0)
setDataKey(response.data[0]);
});
const apiStringBestCustomer = '/Sale/BestCustomer/' + Session.get("idUser");
api.get(apiStringBestCustomer).then((response) => {
if (response.data.length > 0)
setinfoBestCustomer(response.data[0]);
else
setinfoBestCustomer({name :"Aucun client",total: "0"});
});
}, []);
return (
<body className={theme}>
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
<div className="page_dashboard">
{/* Create an account page */}
<div className="haut_de_page">
<h2 className="titre">Dashboard</h2>
<div className="rechLogo">
<img className="logo" srcSet="./LogoApp.svg"/>
<img className="logo" srcSet={theme === "light" ? './LogoApp.svg' : './LogoApp_light.svg'} />
</div>
</div>
<div className="bas_de_page">
@ -40,17 +80,21 @@ const Dashboard = () => {
<div className="Ch_Clé_gauche">
<div className="Ch_Clé_gauche_haut">
Chiffre_clés
<div>{dataKey.total}</div>
</div>
<div className="Ch_Clé_gauche_bas">
Chiffre_clés
<div>{dataKey.totalcontact}</div>
</div>
</div>
<div className="Ch_Clé_droite">
<div className="Ch_Clé_droite_haut">
Chiffre_clés
<div>{infoBestCustomer.name + " : " + infoBestCustomer.total}</div>
</div>
<div className="Ch_Clé_droite_bas">
Chiffre_clés
<div>{new Date().getFullYear() + " : " + (new Date().getMonth() + 1)}</div>
</div>
</div>
</div>
@ -62,9 +106,12 @@ const Dashboard = () => {
</div>
<div className="contacts_ajouté_récemment">
contacts ajouté récemment
{infoContactRecent.map(info => (
<div>{info.firstname + " " + info.lastname}</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
</body>

@ -0,0 +1,97 @@
import React, {useState} from 'react';
import NavigationDashboard from '../components/NavigationDashboard';
import axios from 'axios';
import Session from 'react-session-api';
import { useNavigate } from 'react-router-dom';
const api = axios.create({
baseURL: 'http://localhost:8080'
})
const MailPourAdmin = () => {
const [mailError, setMailError] = useState(false);
const [objetError, setObjetError] = useState(false);
const [descriptionError, setDescriptionError] = useState(false);
const [theme, setTheme] = useState("light");
const navigate = useNavigate();
if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) {
setTheme(localStorage.getItem("theme"))
}
function sendMail(e) {
e.preventDefault();
const formData = new FormData(e.currentTarget);
const values = Object.fromEntries(formData.entries());
console.log(values);
if (values.objet === '') {
setObjetError(true)
} else {
setObjetError(false)
}
if (values.raison === '') {
setDescriptionError(true)
} else {
setDescriptionError(false)
}
if (values.objet === '' || values.raison === '') {
return
}
values.objet = values.objet + "[user id : " + Session.get("idUser") + "]"
api.post('/Mail/Avertir',values).then (function(response) {
if (response.data) {
navigate('/dashboard')
}
else {
setMailError(true)
// e.reset();
}
});
}
return (
<body className={theme}>
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
<div className="page_mailAdmin">
<div className="haut_de_page">
<h2 className="titre">Signaler un problème</h2>
<div className="rechLogo">
<img className="logo" srcSet="./LogoApp.svg" />
</div>
</div>
<div className="bas_de_page">
<NavigationDashboard />
<form className="form" onSubmit={sendMail}>
<div className="Mail">
<div className="object">
<h3 className="name">Objet</h3>
<input name="objet" type="text" placeholder="Objet de l'alerte" className="inputObjet"/>
</div>
<div className="value">
<h3 className="name">Raison</h3>
<textarea name="raison" placeholder="Raison de l'alerte" rows="10" cols="180" className="inputArea"/>
</div>
<p>{mailError === true?"Le mail n'a pas pu être envoyé":''}</p>
<p>{objetError === true?"L'objet est obligatoire":''}</p>
<p>{descriptionError === true?"La description est obligatoire":''}</p>
<div className="submit">
<button className="button" type="submit">Envoyer</button>
</div>
</div>
</form>
</div>
</div>
</body>
);
};
export default MailPourAdmin;

@ -24,7 +24,7 @@ const Parametre = () => {
<div className="haut_de_page">
<h2 className="titre">Paramètres</h2>
<div className="rechLogo">
<img className="logo" srcSet="./LogoApp.svg"/>
<img className="logo" srcSet={theme === "light" ? './LogoApp.svg' : './LogoApp_light.svg'}/>
</div>
</div>
<div className="bas_de_page">
@ -32,24 +32,26 @@ const Parametre = () => {
<div className="Parametre">
<div className="one">
<div className="one_haut">
sécurité
<p className="text_one_haut">Sécurité</p>
</div>
<div className="one_milieu">
<p className="text_one_milieu">Signaler un problème</p>
<div className='bouton_submit'>
<button className="bouton_signalerPB" type="submit">Signaler</button>
<NavLink to="/MailPourAdmin">
<button className="bouton_signalerPB" >Signaler</button>
</NavLink>
</div>
</div>
<div className="one_bas">
<p className="text_one_milieu">Mot de passe</p>
<div className='bouton_submit'>
<NavLink className="bouton_modifierMDP" to="/RestartPassword">Modifier</NavLink>
</div>
<NavLink className="bouton_submit" to="/RestartPassword">
<button className="bouton_modifierMDP" type="submit">Modifier</button>
</NavLink>
</div>
</div>
<div className="two">
<div className="two_haut">
coucou
<p className="text_two_haut">Général</p>
</div>
<div className="two_bas">
<p className="text_two_bas">Mode sombre</p>
@ -59,13 +61,18 @@ const Parametre = () => {
</div>
</div>
<div className="three">
coucou
<p className="text_three_haut">Autre</p>
<div className="déconnexion">
<p className="text_three">Déconnexion</p>
<NavLink to="/">
<button id="bouton_deco" className="bouton" type="button" value="Déco">Se déconnecter</button>
</NavLink>
</div>
</div>
</div>
</div>
</div>
</body>
// </ThemeContext.Provider>
);
};

@ -4,7 +4,9 @@ import axios from 'axios';
import user from '../images/user.jpg';
import { TableContainer, Table, TableHead, TableBody, TableRow, TableCell } from '@mui/material';
import { Paper } from '@mui/material';
import { NavLink } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import Session from 'react-session-api';
const api = axios.create({
baseURL: 'http://localhost:8080'
@ -12,7 +14,7 @@ const api = axios.create({
function Repertoire() {
const [theme, setTheme] = useState("light");
const [theme, setTheme] = useState("light");
if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) {
setTheme(localStorage.getItem("theme"))
}
@ -21,11 +23,13 @@ function Repertoire() {
const [SearchTerm, setSearchTerm] = useState("");
const [SearchResults, setSearchResults] = useState([]);
const [customers, setCustomers] = useState([]);
useEffect(() => {
api.get('/Contact/AllWithCustomerName').then((response) => {
const apiString = '/Contact/' + Session.get("idUser");
api.get(apiString).then((response) => {
setContacts(response.data);
console.log("response.data", response.data);
setSearchTerm(response.data[0].idcontact);
});
}, []);
@ -37,51 +41,54 @@ function Repertoire() {
}, []);
return (
<div className={theme} id="page_repertoire">
{/* Create an account page */}
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
<div className="haut_de_page">
<h2 className="titre">Repertoire</h2>
<div className="rechLogo">
<img className="logo" srcSet="./LogoApp.svg" />
<body className={theme}>
<div className="page_repertoire">
{/* Create an account page */}
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
<div className="haut_de_page">
<h2 className="titre">Repertoire</h2>
<div className="rechLogo">
<img className="logo" srcSet={theme === "light" ? './LogoApp.svg' : './LogoApp_light.svg'}/>
</div>
</div>
</div>
<div className="bas_de_page">
<NavigationDashboard />
<div className="contenu">
<span className="searchAndAddButton">
<div className="input_box">
<input type="search" placeholder="Rechercher..." />
<span className="search">
<i class="uil uil-search search-icon"></i>
</span>
</div>
<button className="boutonAddContact">Ajouter</button>
</span>
<TableContainer component={Paper} className="tabListContact">
<Table>
<TableHead>
<TableRow>
<TableCell>Photo</TableCell>
<TableCell>Nom</TableCell>
<TableCell>Prénom</TableCell>
<TableCell>Entreprise</TableCell>
</TableRow>
</TableHead>
<TableBody>
{contacts.map((contact) => (
<TableRow key={contact.idcontact}>
<TableCell><img className="photoContact" src={user} /></TableCell>
<TableCell>{contact.lastname}</TableCell>
<TableCell>{contact.firstname}</TableCell>
<TableCell>{contact.name}</TableCell>
<div className="bas_de_page">
<NavigationDashboard />
<div className="contenu">
<span className="searchAndAddButton">
<div className="input_box">
<input type="search" placeholder="Rechercher..." />
<span className="search">
<i class="uil uil-search search-icon"></i>
</span>
</div>
<NavLink to="/Repertoire/add">
<button className="boutonAddContact">Ajouter</button>
</NavLink>
</span>
<TableContainer component={Paper} className="tabListContact" style={{color: '#fff'}}>
<Table>
<TableHead>
<TableRow className="headerListe">
<TableCell>Photo</TableCell>
<TableCell>Nom</TableCell>
<TableCell>Prénom</TableCell>
<TableCell>Entreprise</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
{/* <TableContainer component={Paper} sx={{ maxHeight: 0.8 }} className="tabListContact">
</TableHead>
<TableBody>
{contacts.map((contact) => (
<TableRow key={contact.idcontact}>
<TableCell><img className="photoContact" src={user} /></TableCell>
<TableCell>{contact.lastname}</TableCell>
<TableCell>{contact.firstname}</TableCell>
<TableCell>{contact.name}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
{/* <TableContainer component={Paper} sx={{ maxHeight: 0.8 }} className="tabListContact">
<Table aria-label="simple table" size="small" stickyHeader>
<TableHead >
<TableRow>
@ -108,11 +115,50 @@ function Repertoire() {
</TableBody>
</Table>
</TableContainer> */}
</div>
</div>
</body>
);
};
function AddContact(props) {
const navigate = useNavigate();
const [User, setUser] = useState({ name: "", email: "" });
let add = (e) => {
e.preventDefault();
if (User.name === "" || User.email === "") {
alert("All fields are mandatory!!!");
return
}
// THIS IS USED TO SHOW THE LIST DATA ON THE APP.JS FILE
props.addContactHandler(User);
// THIS IS USED FOR WHEN THE ADD BUTTON IS PRESSED THE INPUT FILED AGAIN GETS EMPTY
setUser({ name: "", email: "" });
//console.log(props);
navigate('/');
}
return (
<div className='ui main'>
<h2>Add Contact</h2>
<form className='ui form' onSubmit={add}>
<div className='field'>
<label>Name</label>
<input type="text" name="Name" placeholder='Name' value={User.name} onChange={e => setUser({ ...User, name: e.target.value })} />
</div>
<div className='field'>
<label>Email</label>
<input type="text" name="Email" placeholder='Email' value={User.email} onChange={e => setUser({ ...User, email: e.target.value })} />
</div>
<button className='ui secondary button'>Add</button>
</form>
</div>
);
};
// function Repertoire() {
// // NOW WITH THE USE OF HOOKS WE WILL GET THE CONTACTS

@ -19,8 +19,9 @@ function RestartPassword() {
const location = useLocation();
const [password, setPassword] = useState("");
const [confPassword, setConfPassword] = useState("");
const [newPassword, setNewPassword] = useState("");
const [confNewPassword, setConfNewPassword] = useState("");
const [resetPasswordError, setResetPasswordError] = useState(false);
const navigate = useNavigate();
@ -28,14 +29,14 @@ function RestartPassword() {
setPassword(event.target.value);
};
function handleChangeConfPassword(event){
setConfPassword(event.target.value);
};
function handleChangeNewPassword(event){
setNewPassword(event.target.value);
};
function handleChangeConfNewPassword(event){
setConfNewPassword(event.target.value)
};
function checkRestartPassword(event){
const formData = new FormData(event.currentTarget);
@ -43,9 +44,9 @@ function RestartPassword() {
event.preventDefault();
if(password === confPassword)
if(newPassword === confNewPassword)
{
const apiString = '/User/Auth/Password/' + Session.get("idUser") + "/" + CryptoJS.SHA256(confPassword).toString(CryptoJS.enc.Hex);
const apiString = '/User/Auth/Password/' + Session.get("idUser") + "/" + CryptoJS.SHA256(password).toString(CryptoJS.enc.Hex);
api.get(apiString).then((response) => {
const login = response.data;
if (login.length > 0){
@ -61,7 +62,7 @@ function RestartPassword() {
navigate("/Parametres");
}
else{
console.log("trt");
setResetPasswordError(true);
}
});
}
@ -70,24 +71,23 @@ function RestartPassword() {
return (
<div className="page_admin">
<div className="Titre_Formulaire">
<p className="Titre">Admin</p>
<p className="Sous-titre">Modification d'utilisateur</p>
<div className="Formulaire">
<form className="form" onSubmit={checkRestartPassword}>
<table className="Formulaire_de_connexion">
<tr>
<div className="texte_côté">
<p>Mot de passe :</p>
<p>Confirmation mot de passe :</p>
<p>Nouveau mot de passe :</p>
<p>Confirmation nouveau mot de passe : </p>
</div>
</tr>
<tr>
<input id="MotDePasse" value={password} onChange={handleChangePassword} name='password' className="texte_zone" type="text" placeholder="Mot de passe..." required/>
<input id="ConfirmeMotDePasse" value={confPassword} onChange={handleChangeConfPassword} name='confimPassword' className="texte_zone" type="text" placeholder="Confirmation mot de passe..." required/>
<input id="NouvMotDePasse" value={newPassword} onChange={handleChangeNewPassword} name='newPassword' className="texte_zone" type="text" placeholder="Nouveau mot de passe..." required/>
<input id="ConfNouvMotDePasse" value={confNewPassword} onChange={handleChangeConfNewPassword} name='ConfNewPassword' className="texte_zone" type="text" placeholder="Confirmation nouveau mot de passe..." required/>
</tr>
</table>
<p>{resetPasswordError === true?"Le mot de passe est incorrect":''}</p>
<div className="bouton_submit">
<button className="bouton_val" type="submit">Valider</button>
<NavLink className="bouton_ann" to="/Parametres">Retour</NavLink>

@ -1,10 +1,10 @@
.dark{
.dark {
background-color: $xiketic;
color: white;
}
body {
.page_admin {
display: flex;
flex-direction: row;
@ -48,21 +48,21 @@ body {
text-decoration: none;
align-self: center;
}
.modify_user {
display: flex;
padding: 5px;
text-decoration: none;
align-self: center;
}
.delete_user {
display: flex;
padding: 5px;
text-decoration: none;
align-self: center;
}
.list_devis {
display: flex;
padding: 5px;
@ -109,12 +109,12 @@ body {
}
}
.Titre_Formulaire{
.Titre_Formulaire {
display: flex;
flex-direction: column;
margin: 10px 10px 10px 0px;
margin: 10px;
padding: 10px;
flex-basis: 100%;
width: 100%;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
@ -123,11 +123,6 @@ body {
.Titre {
display: flex;
/*background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
margin: 10px;
font-size: 70px;
font-weight: bold;
@ -135,78 +130,131 @@ body {
.Sous-titre {
display: flex;
/*background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
margin: 10px;
font-size: 40px;
font-weight: bold;
}
.Formulaire{
.Formulaire {
display: flex;
flex-direction: column;
align-items: center;
/*background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
flex-direction: row;
justify-content: center;
margin-left: 10px;
margin-right: 10px;
.form{
.form {
display: flex;
flex-direction: column;
align-self: center;
margin-top: 60px;
font-size: 30px;
width: 80%;
.Formulaire_de_connexion {
display: flex;
flex-direction: row;
margin-top: 5%;
/*background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
.texte_côté {
display:flex;
justify-content: space-between;
.one {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100%;
width: 24%;
.texte_côté {
display: flex;
flex-direction: column;
justify-content: space-around;
margin-left: 80px;
height: 85%;
}
}
.one-2 {
display: flex;
flex-direction: column;
width: 60%;
.texte_côté {
display: flex;
flex-direction: column;
justify-content: space-around;
margin-left: 150px;
height: 100%;
}
}
.two {
display: flex;
flex-direction: column;
width: 46%;
}
.two-2 {
display: flex;
flex-direction: column;
width: 46%;
}
.three {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 316px;
width: 29%;
font-size: 23px;
bottom: auto;
.button_submit {
display: flex;
background-color: grey;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(30px);
color: rgb(255, 255, 255);
cursor: pointer;
font-size: 25px;
border-radius: 15px;
width: 308px;
text-decoration: none;
&:hover {
box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
color: white;
background-color: rgba(114, 114, 114, 0.371);
}
&:active {
background-color: rgba(68, 68, 68, 0.972);
}
}
}
input {
display: flex;
flex-direction: column;
margin: 10px;
}
.button_submit {
display: flex;
margin-top: 150%;
margin-bottom: 2%;
padding-left: 10px;
.bouton_réini{
background-color: rgb(190, 189, 189);
border-radius: 5px;
border: 1px solid black;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
cursor: pointer;
.bouton_réini {
background-color: rgb(190, 189, 189);
border-radius: 5px;
border: 1px solid black;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
cursor: pointer;
}
}
}
}
}
.texte {
align-self: center;
@ -215,7 +263,7 @@ body {
}
.texte_zone {
width: 600px;
width: 550px;
height: 50px;
background-color: transparent;
border-radius: 5px;
@ -235,7 +283,7 @@ body {
height: 30px;
margin-top: 5%;
.bouton_val{
.bouton_val {
display: flex;
flex-direction: column;
justify-content: center;
@ -259,7 +307,7 @@ body {
}
}
.bouton_ann{
.bouton_ann {
display: flex;
flex-direction: column;
justify-content: center;
@ -276,7 +324,7 @@ body {
color: white;
background-color: rgba(114, 114, 114, 0.371);
}
&:active {
background-color: rgba(68, 68, 68, 0.972);
}
@ -284,7 +332,7 @@ body {
}
}
.Titre_Formulaire_Rech{
.Titre_Formulaire_Rech {
display: flex;
flex-direction: column;
margin: 10px 10px 10px 0px;
@ -298,11 +346,6 @@ body {
.Titre {
display: flex;
/*background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
margin: 10px;
font-size: 70px;
font-weight: bold;
@ -310,11 +353,6 @@ body {
.Sous-titre {
display: flex;
/*background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
margin: 10px;
font-size: 40px;
font-weight: bold;
@ -323,14 +361,7 @@ body {
.rechLogo {
display: flex;
flex-direction: column;
flex-basis: 100%;
/*background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
//margin: 10px;
//padding: 10px;
height: 50%;
align-items: center;
margin-top: 5%;
@ -342,7 +373,6 @@ body {
height: 40px;
max-width: 350px;
width: 100%;
//margin: 30px 30px;
border-radius: 25px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
@ -376,17 +406,69 @@ body {
}
}
}
.bouton_submit {
display: flex;
flex-direction: row;
justify-content: space-around;
align-self: center;
width: 600px;
height: 30px;
margin-top: 5%;
.bouton_val {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 150px;
height: 40px;
font-size: 20px;
text-decoration: none;
color: white;
background-color: grey;
border-radius: 15px;
border: 0;
&:hover {
color: white;
background-color: rgba(114, 114, 114, 0.371);
}
&:active {
background-color: rgba(68, 68, 68, 0.972);
}
}
.bouton_ann {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 150px;
height: 40px;
font-size: 20px;
text-decoration: none;
color: white;
background-color: grey;
border-radius: 15px;
&:hover {
color: white;
background-color: rgba(114, 114, 114, 0.371);
}
&:active {
background-color: rgba(68, 68, 68, 0.972);
}
}
}
}
.formulaire {
display: flex;
flex-direction: column;
flex-basis: 100%;
/*background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
.bouton_personnes {
display: flex;
@ -394,10 +476,7 @@ body {
justify-content: space-between;
width: 350px;
margin: 20px 0 0 0;
/*background: rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
}
.bouton_submit {
@ -406,7 +485,7 @@ body {
justify-content: space-between;
padding: 30px 0 0 0;
.bouton_sup{
.bouton_sup {
display: flex;
background-color: grey;
border: 1px solid rgba(255, 255, 255, 0.1);
@ -418,36 +497,13 @@ body {
width: 30%;
align-items: center;
justify-content: center;
&:hover {
box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
color: white;
background-color: rgba(114, 114, 114, 0.371);
}
&:active {
background-color: rgba(68, 68, 68, 0.972);
}
}
.bouton_ann{
display: flex;
background-color: grey;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(30px);
color: rgb(255, 255, 255);
cursor: pointer;
font-size: 15px;
border-radius: 15px;
width: 30%;
align-items: center;
&:hover {
box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
color: white;
background-color: rgba(114, 114, 114, 0.371);
}
&:active {
background-color: rgba(68, 68, 68, 0.972);
}
@ -477,7 +533,7 @@ body {
color: white;
background-color: rgba(114, 114, 114, 0.371);
}
&:active {
background-color: rgba(68, 68, 68, 0.972);
}
@ -500,7 +556,7 @@ body {
color: white;
background-color: rgba(114, 114, 114, 0.371);
}
&:active {
background-color: rgba(68, 68, 68, 0.972);
}

@ -1,5 +1,3 @@
body {
.page_analyse {
@ -19,9 +17,9 @@ body {
align-items: center;
margin: 10px 10px 5px 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
@ -58,9 +56,10 @@ body {
width: 5%;
margin: 5px 5px 10px 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
@ -131,10 +130,9 @@ body {
justify-content: space-between;
width: 49.75%;
height: auto;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
border: 1px solid #cbd0dd;
background: rgba(255, 255, 255, 1);
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
@ -152,10 +150,9 @@ body {
margin: auto;
padding: 25px;
font-size: 40px;
background: rgba(255, 255, 255, 0.3);
border: 1px solid #cbd0dd;
background: rgba(255, 255, 255, 1);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
}
@ -176,10 +173,9 @@ body {
justify-content: space-between;
width: 49.75%;
height: auto;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
border: 1px solid #cbd0dd;
background: rgba(255, 255, 255, 1);
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
@ -196,10 +192,9 @@ body {
margin: auto;
padding: 30px;
font-size: 40px;
background: rgba(255, 255, 255, 0.3);
border: 1px solid #cbd0dd;
background: rgba(255, 255, 255, 1);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
}

@ -1,7 +1,5 @@
body {
.page_calendrier {
display: flex;
flex-direction: column;
@ -18,17 +16,18 @@ body {
height: 10%;
align-items: center;
margin: 10px 10px 5px 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.titre {
font-size: 40px;
}
.rechLogo {
display: flex;
flex-direction: row;
@ -40,7 +39,7 @@ body {
width: 100px;
height: 100px;
}
}
}
}
.bas_de_page {
@ -48,7 +47,7 @@ body {
flex-direction: row;
justify-content: space-between;
width: auto;
height: 86%;
height: 84%;
.nav_bar_verticale {
display: flex;
@ -58,9 +57,10 @@ body {
width: 5%;
margin: 5px 5px 10px 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
@ -108,7 +108,7 @@ body {
border: none;
cursor: pointer;
.logo_nav_bar{
.logo_nav_bar {
display: flex;
margin: 10px;
height: 50px;
@ -120,9 +120,10 @@ body {
.Calendrier {
display: flex;
flex-direction: row;
background: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
width: 94.3%;
@ -132,21 +133,46 @@ body {
.Titre {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 175px;
margin: 30px;
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
justify-content: space-between;
width: 200px;
height: 100%;
-webkit-backdrop-filter: blur(15px);
padding-top: 10px;
padding-bottom: 10px;
border-right: 1px solid #cbd0dd;
.mini_formulaire_evenement {
display: flex;
flex-direction: column;
margin-top: 10px;
height: 100px;
height: 100%;
justify-content: space-around;
.ajout_input {
position: relative;
height: 100%;
outline: none;
border: none;
border-radius: .375rem;
font-size: 16px;
font-weight: 400;
color: rgb(90, 90, 90);
border: 1px solid #cbd0dd;
padding: 1rem 1rem;
font-size: 13px;
margin: 10px;
}
.date {
border: 1px solid #cbd0dd;
}
.select {
all: none;
border: 1px solid #cbd0dd;
border-radius: 10px;
margin-left: 10px;
margin-right: 8px;
}
}
.bouton_ajout {
@ -159,17 +185,23 @@ body {
width: 75%;
height: 50px;
border-radius: 10px;
background-color: rgba(163, 163, 163, 0.371);
border: 1px solid rgba(255,255,255,0.1);
background: rgba(37, 176, 3, 0.14);
border: 1px solid;
backdrop-filter: blur(30px);
color: rgb(255, 255, 255);
color: #90d67f;
margin-top: 10px;
border-color: rgba(37, 176, 3, 0.14);
cursor: pointer;
font-size: 15px;
&:hover{
background-color: rgba(114, 114, 114, 0.371);
}
&:active{
background-color:rgba(68, 68, 68, 0.972);
&:hover {
color: #90d67f;
background: rgba(37, 176, 3, 0.2);
border-color: rgba(167, 223, 153, 0.226); }
&:active {
background-color: rgba(68, 68, 68, 0.972);
}
}
}
@ -177,12 +209,16 @@ body {
.rbc-calendar {
border-radius: 5px;
border: 1px solid black;
margin-top: 20px;
margin-right: 20px;
margin-left: 20px;
.rbc-day-bg {
border-radius: 5px;
border-color: black;
}
.rbc-month-view {
border-radius: 10px;
border-color: black;
@ -208,4 +244,4 @@ body {
}
}
}
}
}

@ -7,6 +7,7 @@ body {
width: auto;
height: 100vh;
.haut_de_page {
display: flex;
flex-direction: row;
@ -27,6 +28,7 @@ body {
font-size: 40px;
}
.rechLogo {
display: flex;
flex-direction: row;
@ -39,8 +41,10 @@ body {
height: 100px;
}
}
}
}
.bas_de_page {
display: flex;
flex-direction: row;
@ -48,6 +52,7 @@ body {
width: auto;
height: 86%;
.nav_bar_verticale {
display: flex;
flex-direction: column;
@ -56,9 +61,10 @@ body {
width: 5%;
margin: 5px 5px 10px 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
@ -106,7 +112,7 @@ body {
border: none;
cursor: pointer;
.logo_nav_bar {
.logo_nav_bar {
display: flex;
margin: 10px;
height: 50px;
@ -116,6 +122,8 @@ body {
}
.Compte {
display: flex;
flex-direction: column;
@ -124,9 +132,10 @@ body {
height: auto;
margin: 5px 10px 10px 5px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
@ -139,8 +148,7 @@ body {
height: 30%;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
@ -158,8 +166,9 @@ body {
height: 135px;
width: 135px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid #cbd0dd;
border-radius: 100px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
@ -169,35 +178,65 @@ body {
}
}
.figure {
.figure {
width: 45%;
}
.img {
.img {
width: 100%;
}
/*.bouton_submit {
display: flex;
margin-left: 30px;
align-items: center;
cursor: pointer;
/*.bouton_ajoutPhoto {
height: 40px;
width: 150px;
background-color: rgb(190, 189, 189);
border-radius: 5px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
cursor: pointer;
&:hover{
background-color: lightgrey;
.fileUpload {
color: #3874ff;
border-color: #3874ff;
background-color: transparent;
border: 1px solid #004dff;
border-radius: .375rem;
gap: 1rem;
font-size: 1rem;
line-height: 1.5;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
&:hover {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
}
}*/
&:focus {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
box-shadow: 0 0 0 0.2rem rgba(56, 116, 255, 0.5);
}
&:active {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
}
&:disabled {
color: #3874ff;
background-color: transparent;
border-color: #3874ff;
}
}
}
}
@ -424,4 +463,5 @@ body {
border-radius: 10px;
background-color: $xiketic;
cursor: pointer;
}
}

@ -18,9 +18,9 @@ body {
align-items: center;
margin: 10px 10px 5px 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
@ -57,10 +57,10 @@ body {
width: 5%;
margin: 5px 5px 10px 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
-webkit-backdrop-filter: blur(15px);
.parti_one {
@ -142,9 +142,10 @@ body {
width: 40%;
height: auto;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
}
@ -154,9 +155,10 @@ body {
width: 58.5%;
height: auto;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
}
@ -173,10 +175,10 @@ body {
display: flex;
width: 45%;
height: auto;
border: 1px solid #cbd0dd;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
background: rgba(255, 255, 255, 1);
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
}
@ -199,10 +201,10 @@ body {
display: flex;
width: auto;
height: 53%;
border: 1px solid #cbd0dd;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
background: rgba(255, 255, 255, 1);
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
}
@ -211,10 +213,10 @@ body {
display: flex;
width: auto;
height: 43%;
border: 1px solid #cbd0dd;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
background: rgba(255, 255, 255, 1);
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
}
@ -231,10 +233,10 @@ body {
display: flex;
width: auto;
height: 46%;
border: 1px solid #cbd0dd;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
background: rgba(255, 255, 255, 1);
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
}
@ -243,10 +245,10 @@ body {
display: flex;
width: auto;
height: 50%;
border: 1px solid #cbd0dd;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
background: rgba(255, 255, 255, 1);
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
}
@ -265,10 +267,10 @@ body {
display: flex;
width: auto;
height: 64%;
border: 1px solid #cbd0dd;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
background: rgba(255, 255, 255, 1);
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
}
@ -277,10 +279,10 @@ body {
display: flex;
width: auto;
height: 34%;
border: 1px solid #cbd0dd;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
background: rgba(255, 255, 255, 1);
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
}

@ -0,0 +1,256 @@
body {
.page_mailAdmin {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: auto;
height: 100vh;
.haut_de_page {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 50px;
width: auto;
height: 10%;
align-items: center;
margin: 10px 10px 5px 10px;
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.titre {
font-size: 40px;
}
.rechLogo {
display: flex;
flex-direction: row;
justify-content: space-between;
.logo {
display: flex;
width: 100px;
height: 100px;
}
}
}
.bas_de_page {
display: flex;
flex-direction: row;
justify-content: space-between;
width: auto;
height: 86%;
.nav_bar_verticale {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 5%;
margin: 5px 5px 10px 10px;
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.parti_one {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 100%;
height: 18%;
}
.parti_two {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 100%;
height: 35%;
}
.parti_three {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin-top: 15px;
width: 100%;
height: 18%;
}
.parti_four {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 100%;
height: 18%;
}
.button {
display: flex;
object-fit: cover;
background-color: transparent;
border: none;
cursor: pointer;
.logo_nav_bar{
display: flex;
margin: 10px;
height: 50px;
width: 50px;
}
}
}
.form {
display: flex;
flex-direction: column;
width: 94.3%;
height: auto;
margin: 5px 10px 10px 5px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
}
/*.Mail {
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: auto;
margin: 5px 10px 10px 5px;
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.object {
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin: 13px;
width: auto;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.inputObjet{
width: 100%;
height: 100%;
padding: 10px;
outline: none;
border: none;
border-radius: .375rem;
font-size: 16px;
font-weight: 400;
color: #333;
border: 1px solid #cbd0dd;
height: 30px;
margin-top: 13px;
}
}
.value {
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin-left: 13px;
margin-right: 13px;
width: auto;
height: 40%;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.inputArea {
resize: none;
width: 100%;
height: 100%;
padding: 10px;
outline: none;
border: none;
border-radius: .375rem;
font-size: 16px;
font-weight: 400;
color: #333;
border: 1px solid #cbd0dd;
margin-top: 13px;
}
}
.submit {
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin: 13px;
width: auto;
height: 15%;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.button {
cursor: pointer;
color: #141824;
background: #f5f7fa;
border-radius: 0.375rem;
padding: 0.5rem 1rem;
border: 1px solid #cbd0dd;
&:hover {
color: #141824;
background: #e3e6ed;
border-color: #cbd0dd;
}
&:focus {
box-shadow: 0 0 0 0.2rem rgba(211, 214, 218, 0.5);
}
&:active {
color: #000000;
background: #f7f9fb;
border-color: #f6f8fb;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
}
&:disabled {
color: #000000;
background: #f5f7fa;
border-color: #f5f7fa;
}
}
}
}*/
}
}
}

@ -8,7 +8,7 @@ body {
justify-content: space-evenly;
width: auto;
height: 100vh;
.haut_de_page {
display: flex;
flex-direction: row;
@ -18,17 +18,17 @@ body {
height: 10%;
align-items: center;
margin: 10px 10px 5px 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.titre {
font-size: 40px;
}
.rechLogo {
display: flex;
flex-direction: row;
@ -40,16 +40,16 @@ body {
width: 100px;
height: 100px;
}
}
}
}
.bas_de_page {
display: flex;
flex-direction: row;
justify-content: space-between;
width: auto;
height: 86%;
.nav_bar_verticale {
display: flex;
flex-direction: column;
@ -58,9 +58,10 @@ body {
width: 5%;
margin: 5px 5px 10px 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
@ -108,7 +109,7 @@ body {
border: none;
cursor: pointer;
.logo_nav_bar{
.logo_nav_bar {
display: flex;
margin: 10px;
height: 50px;
@ -116,7 +117,7 @@ body {
}
}
}
.Parametre {
display: flex;
flex-direction: column;
@ -133,9 +134,10 @@ body {
height: 28.5%;
padding: 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
@ -144,7 +146,12 @@ body {
flex-direction: row;
justify-content: space-between;
height: 50%;
border-bottom: 1px solid black;
border-bottom: 1px solid #cbd0dd;
.text_one_haut {
font-size: 20px;
font-weight: 700;
}
}
.one_milieu {
@ -153,7 +160,7 @@ body {
justify-content: space-between;
padding: 9px;
height: 25%;
border-bottom: 1px solid black;
border-bottom: 1px solid #cbd0dd;
.text_one_milieu {
margin-top: 8px;
@ -161,21 +168,39 @@ body {
.bouton_submit {
display: flex;
margin-left: 30px;
align-items: center;
cursor: pointer;
.bouton_signalerPB {
width: 75px;
height: 20px;
background-color: rgb(190, 189, 189);
border-radius: 5px;
border-radius: 5px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
cursor: pointer;
&:hover{
background-color: lightgrey;
color: #141824;
background: #f5f7fa;
border-color: #f5f7fa;
border-radius: 0.375rem;
padding: 0.5rem 1rem;
border-width: 1px;
&:hover {
color: #141824;
background: #e3e6ed;
border-color: #f6f8fb;
}
&:focus {
box-shadow: 0 0 0 0.2rem rgba(211, 214, 218, 0.5);
}
&:active {
color: #000000;
background: #f7f9fb;
border-color: #f6f8fb;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
}
&:disabled {
color: #000000;
background: #f5f7fa;
border-color: #f5f7fa;
}
}
}
@ -194,21 +219,40 @@ body {
.bouton_submit {
display: flex;
margin-left: 30px;
align-items: center;
text-decoration: none;
cursor: pointer;
.bouton_modifierMDP {
width: 75px;
height: 20px;
background-color: rgb(190, 189, 189);
border-radius: 5px;
border-radius: 5px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
cursor: pointer;
&:hover{
background-color: lightgrey;
color: #141824;
background: #f5f7fa;
border-color: #f5f7fa;
border-radius: 0.375rem;
padding: 0.5rem 1rem;
border-width: 1px;
&:hover {
color: #141824;
background: #e3e6ed;
border-color: #f6f8fb;
}
&:focus {
box-shadow: 0 0 0 0.2rem rgba(211, 214, 218, 0.5);
}
&:active {
color: #000000;
background: #f7f9fb;
border-color: #f6f8fb;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
}
&:disabled {
color: #000000;
background: #f5f7fa;
border-color: #f5f7fa;
}
}
}
@ -223,17 +267,22 @@ body {
height: 28.5%;
padding: 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.two_haut {
display: flex;
height: 75%;
border-bottom: 1px solid black;
border-bottom: 1px solid #cbd0dd;
.text_two_haut {
font-size: 20px;
font-weight: 700;
}
}
.two_bas {
@ -245,8 +294,8 @@ body {
.center {
position: absolute;
top: 84%;
right: 0.5%;
transform: translate(-50%,-50%);
right: 1.75%;
transform: translate(-50%, -50%);
input[type="checkbox"] {
position: relative;
@ -256,7 +305,7 @@ body {
background-color: #e2e2e2;
outline: none;
border-radius: 20px;
box-shadow: inset 0 0 5px rgba(0,0,0,.5);
box-shadow: inset 0 0 5px rgba(0, 0, 0, .5);
transition: .5s;
cursor: pointer;
}
@ -275,7 +324,7 @@ body {
left: 10%;
background-color: white;
transform: scale(1.1);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
@ -289,16 +338,72 @@ body {
.three {
display: flex;
flex-direction: column;
width: auto;
height: 40%;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
background: rgba(255, 255, 255, 1);
border-radius: 5px;
border: 1px solid #cbd0dd;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.text_three_haut {
display: flex;
font-size: 20px;
font-weight: 700;
margin: 10px;
}
.déconnexion {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: 10px;
margin-right: 10px;
padding: 10px;
border-top: 1px solid #cbd0dd;
.text_three {
display: flex;
}
.bouton {
cursor: pointer;
color: #141824;
background: #f5f7fa;
border-color: #f5f7fa;
border-radius: 0.375rem;
padding: 0.5rem 1rem;
border-width: 1px;
&:hover {
color: #141824;
background: #e3e6ed;
border-color: #f6f8fb;
}
&:focus {
box-shadow: 0 0 0 0.2rem rgba(211, 214, 218, 0.5);
}
&:active {
color: #000000;
background: #f7f9fb;
border-color: #f6f8fb;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
}
&:disabled {
color: #000000;
background: #f5f7fa;
border-color: #f5f7fa;
}
}
}
}
}
}
}
}
}

@ -1,6 +1,6 @@
body {
#page_repertoire {
.page_repertoire {
display: flex;
flex-direction: column;
justify-content: space-evenly;
@ -17,9 +17,10 @@ body {
align-items: center;
margin: 10px 10px 5px 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
@ -42,7 +43,6 @@ body {
width: 100%;
margin: 30px 30px;
border-radius: 25px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
input {
position: relative;
@ -88,20 +88,19 @@ body {
flex-direction: row;
justify-content: space-between;
width: auto;
height: 86%;
height: 84%;
.nav_bar_verticale {
display: flex;
flex-direction: column;
justify-content: space-evenly;
justify-content: space-around;
align-items: center;
width: 5%;
margin: 5px 5px 10px 10px;
border: 1px solid #cbd0dd;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
background: rgba(255, 255, 255, 1);
border-radius: 5px;
-webkit-backdrop-filter: blur(15px);
.parti_one {
@ -156,106 +155,120 @@ body {
}
}
}
}
.contenu {
width: 94.3%;
height: auto;
margin: 5px 10px 10px 5px;
.contenu {
.searchAndAddButton {
height: 100px;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
justify-content: space-between;
.searchAndAddButton {
height: 100px;
.boutonAddContact {
color: #3874ff;
border-color: #3874ff;
background-color: transparent;
border: 1px solid #004dff;
border-radius: .375rem;
padding: .375rem .75rem;
gap: 1rem;
font-size: 1rem;
line-height: 1.5;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
&:hover {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
}
&:focus {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
box-shadow: 0 0 0 0.2rem rgba(56, 116, 255, 0.5);
}
&:active {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
}
&:disabled {
color: #3874ff;
background-color: transparent;
border-color: #3874ff;
}
}
.input_box {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: relative;
height: 40px;
max-width: 350px;
width: 100%;
justify-content: space-between;
margin: 30px 30px;
border-radius: 25px;
input {
position: relative;
width: 100%;
height: 100%;
padding: 0 15px 0 65px;
outline: none;
border: none;
border-radius: .375rem;
font-size: 16px;
font-weight: 400;
color: rgb(90, 90, 90);
border: 1px solid #cbd0dd;
.boutonAddContact {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
min-width: 150px;
margin: 30px 30px;
border-radius: 25px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.input_box {
.search {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 40px;
max-width: 350px;
width: 100%;
margin: 30px 30px;
border-radius: 25px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
input {
position: relative;
width: 100%;
height: 100%;
padding: 0 15px 0 65px;
outline: none;
border: none;
border-radius: 25px;
font-size: 16px;
font-weight: 400;
color: #333;
}
justify-content: center;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 60px;
border-radius: 25px 0 0 25px;
.search {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 60px;
border-radius: 25px 0 0 25px;
.search-icon {
font-size: 30px;
color: black;
}
.search-icon {
font-size: 20px;
color: black;
}
}
}
.tabListContact {
margin-bottom: 20px;
padding-right: 10px;
height: 82%;
scroll-behavior: smooth;
overflow-y: scroll;
&::-webkit-scrollbar {
width: 15px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
}
&::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
}
&::-webkit-scrollbar-thumb:hover {
background: #555;
}
.photoContact{
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 1px solid black;
}
.tabListContact {
margin-bottom: 20px;
padding-right: 10px;
height: 82%;
scroll-behavior: smooth;
overflow-y: scroll;
.photoContact {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 1px solid black;
}
}
}
}
}
}

@ -0,0 +1,8 @@
.addContactPage{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}

@ -7,4 +7,6 @@
@import "./components/calendrier";
@import "./components/parametre";
@import "./components/repertoire";
@import "./components/chargement"
@import "./components/chargement";
@import "./components/contact/addContact";;
@import "./components/mailPourAdmin";

@ -1,4 +1,3 @@
$font-1: sans-serif;
$color-1: #61dafb;
@ -11,7 +10,7 @@ $alice-blue: #e8eef2ff;
$blue-munsell: #0088a3ff;
$malachite: #32e875ff;
$rufous: #9b2915ff;
$xiketic: #020114ff;
$xiketic: #0f111a;
$beau-blue: #b1c5d2;
@ -49,7 +48,501 @@ li {
list-style-type: none;
}
.dark{
.dark {
background-color: $xiketic;
color: white;
color: rgb(159, 166, 188);
.page_analyse {
.haut_de_page {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
.titre {
color: rgb(159, 166, 188);
}
}
.bas_de_page {
.nav_bar_verticale {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
.svgImage {
fill: rgb(159, 166, 188);
}
}
.Analyse {
.Stat-1 {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
.Stat-1_titre p {
background-color: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
color: rgb(159, 166, 188);
}
canvas {
color: rgb(159, 166, 188);
}
}
.Stat-2 {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
.Stat-2_titre p {
background-color: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
color: rgb(159, 166, 188);
}
}
}
}
}
.page_parametre {
.haut_de_page {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
.titre{
color: rgb(159, 166, 188);
}
}
.bas_de_page {
.nav_bar_verticale {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
.svgImage {
fill: rgb(159, 166, 188);
}
}
.Parametre {
.one {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
color: rgb(159, 166, 188);
.one_haut {
border-color: rgba(50, 55, 72, 1);
}
.one_milieu{
border-color: rgba(50, 55, 72, 1);
.bouton_submit{
.bouton_signalerPB{
color: #cbd0dd;
background: rgba(49, 55, 74, 0.5);
border-color: rgba(49, 55, 74, 0.5);
&:hover {
color: #cbd0dd;
background: rgba(49, 55, 74, 0.8);
border-color: rgba(101, 105, 119, 0.55);
}
&:focus {
box-shadow: 0 0 0 0.2rem rgba(102, 108, 125, 0.5);
}
&:active {
color: #fff;
background: rgba(137, 141, 152, 0.6);
border-color: rgba(101, 105, 119, 0.55);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
}
&:disabled {
color: #fff;
background: rgba(49, 55, 74, 0.5);
}
}
}
}
.one_bas {
.bouton_submit {
.bouton_modifierMDP {
color: #cbd0dd;
background: rgba(49, 55, 74, 0.5);
border-color: rgba(49, 55, 74, 0.5);
&:hover {
color: #cbd0dd;
background: rgba(49, 55, 74, 0.8);
border-color: rgba(101, 105, 119, 0.55);
}
&:focus {
box-shadow: 0 0 0 0.2rem rgba(102, 108, 125, 0.5);
}
&:active {
color: #fff;
background: rgba(137, 141, 152, 0.6);
border-color: rgba(101, 105, 119, 0.55);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
}
&:disabled {
color: #fff;
background: rgba(49, 55, 74, 0.5);
}
}
}
}
}
.two {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
color: rgb(159, 166, 188);
.two_haut {
border-color: rgba(50, 55, 72, 1);
}
}
.three {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
color: rgb(159, 166, 188);
.déconnexion{
border-color: rgba(50, 55, 72, 1);
.bouton{
color: #cbd0dd;
background: rgba(49, 55, 74, 0.5);
border-color: rgba(49, 55, 74, 0.5);
&:hover {
color: #cbd0dd;
background: rgba(49, 55, 74, 0.8);
border-color: rgba(101, 105, 119, 0.55);
}
&:focus {
box-shadow: 0 0 0 0.2rem rgba(102, 108, 125, 0.5);
}
&:active {
color: #fff;
background: rgba(137, 141, 152, 0.6);
border-color: rgba(101, 105, 119, 0.55);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
}
&:disabled {
color: #fff;
background: rgba(49, 55, 74, 0.5);
}
}
}
}
}
}
}
.page_compte {
.haut_de_page {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
.titre{
color: rgb(159, 166, 188);
}
}
.bas_de_page {
.nav_bar_verticale {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
.svgImage {
fill: rgb(159, 166, 188);
}
}
.Compte {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
.name_picture {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
color: rgb(159, 166, 188);
.picture {
border-color: rgba(50, 55, 72, 1);
#display_image {
border: 1px solid rgba(50, 55, 72, 1);
}
}
.name{
.bouton_submit{
.bouton_modifierNom{
color: #cbd0dd;
background: rgba(49, 55, 74, 0.5);
border-color: rgba(49, 55, 74, 0.5);
&:hover {
color: #cbd0dd;
background: rgba(49, 55, 74, 0.8);
border-color: rgba(101, 105, 119, 0.55);
}
&:focus {
box-shadow: 0 0 0 0.2rem rgba(102, 108, 125, 0.5);
}
&:active {
color: #fff;
background: rgba(137, 141, 152, 0.6);
border-color: rgba(101, 105, 119, 0.55);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
}
&:disabled {
color: #fff;
background: rgba(49, 55, 74, 0.5);
}
}
}
}
}
.infoPerso {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
color: rgb(159, 166, 188);
.description, .parti_pays,.parti_mail {
border-color: rgba(50, 55, 72, 1);
}
}
.infoEntreprise {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
color: rgb(159, 166, 188);
.description, .parti_name,.parti_secteurAct {
border-color: rgba(50, 55, 72, 1);
}
}
}
}
}
.page_repertoire {
.haut_de_page {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
.titre{
color: rgb(159, 166, 188);
}
}
.bas_de_page {
.nav_bar_verticale {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
.svgImage {
fill: rgb(159, 166, 188);
}
}
}
.contenu {
.searchAndAddButton {
.boutonAddContact {
color: #3874ff;
border-color: #3874ff;
background-color: transparent;
border-radius: .375rem;
padding: .375rem .75rem;
gap: 1rem;
font-size: 1rem;
line-height: 1.5;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
&:hover {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
}
&:focus {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
box-shadow: 0 0 0 0.2rem rgba(56, 116, 255, 0.5);
}
&:active {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
}
&:disabled {
color: #3874ff;
background-color: transparent;
border-color: #3874ff;
}
}
.input_box {
input {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
&::-webkit-input-placeholder {
color: rgb(160, 166, 186);
}
}
}
}
.tabListContact {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
color: rgb(159, 166, 188);
th {
color: rgb(159, 166, 188);
}
td {
color: rgb(159, 166, 188);
}
tr {
border-color: rgba(50, 55, 72, 1);
&:hover {
background-color: rgba(49, 55, 74, 0.5);
}
}
}
}
}
.page_calendrier {
.haut_de_page {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
.titre{
color: rgb(159, 166, 188);
}
}
.bas_de_page {
.nav_bar_verticale {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
.svgImage {
fill: rgb(159, 166, 188);
}
}
.Calendrier {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
.Titre {
background: rgba(21, 24, 35, 1);
border-right: 1px solid rgba(50, 55, 72, 1);
color: rgb(159, 166, 188);
.mini_formulaire_evenement {
.ajout_input {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
color: #fff;
}
.date {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
color: #fff;
}
}
}
}
}
}
.page_dashboard {
.haut_de_page {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
}
.bas_de_page {
.nav_bar_verticale {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
.svgImage {
fill: rgb(159, 166, 188);
}
}
.Dashboard {
._gauche {
._haut {
.Mes_infos {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
}
.Alertes {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
}
}
._bas {
.Mes_prochaines_activités {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
}
.Chiffre_clés {
.Ch_Clé_gauche {
.Ch_Clé_gauche_haut {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
}
.Ch_Clé_gauche_bas {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
}
}
.Ch_Clé_droite {
.Ch_Clé_droite_haut {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
}
.Ch_Clé_droite_bas {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
}
}
}
}
}
._droite {
.clients_important {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
}
.contacts_ajouté_récemment {
background: rgba(21, 24, 35, 1);
border: 1px solid rgba(50, 55, 72, 1);
}
}
}
}
}
}
Loading…
Cancel
Save