forked from CRM_Production/JTT_CrM
Merge branch 'master' of https://codefirst.iut.uca.fr/git/maxence.lanone/JTT_CrM
commit
fdf90aa4fa
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 38 KiB |
@ -1,37 +1,29 @@
|
||||
import React from 'react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
|
||||
const NavigationAdmin = () => {
|
||||
const NavigationAdmin = (props) => {
|
||||
|
||||
return (
|
||||
|
||||
<div className="nav_bar_verticale">
|
||||
<img className="logo" srcSet="./LogoApp.svg"></img>
|
||||
<NavLink className="create_user" to="/Admin">
|
||||
<NavLink className="create_user" to="/Admin_create">
|
||||
<button id="bouton_créer" className="bouton" type="button" value="Créer un utilisateur" onClick={changeColor}>Créer utilisateur</button>
|
||||
</NavLink>
|
||||
<NavLink className="modify_user" to="/Admin_modif">
|
||||
<button id="bouton_modif" className="bouton" type="button" value="Modifier un utilisateur" onClick={changeColor2}>Modifier utilisateur</button>
|
||||
<NavLink className="modify_user" to="/Admin_modif" state={{ iduser: props.iduser }}>
|
||||
<button id="bouton_modif" className="bouton" type="button" value="Modifier un utilisateur" onClick={changeColor}>Modifier utilisateur</button>
|
||||
</NavLink>
|
||||
<NavLink className="delete_user" to="/Admin_supp">
|
||||
<button id="bouton_sup" className="bouton" type="button" value="Supprimer un utilisateur" onClick={changeColor3}>Supprimer utilisateur</button>
|
||||
<button id="bouton_sup" className="bouton" type="button" value="Supprimer un utilisateur" onClick={changeColor}>Supprimer utilisateur</button>
|
||||
</NavLink>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function changeColor() {
|
||||
let button = document.getElementById("bouton_créer");
|
||||
button.style.backgroundColor = "rgb(170,170,170)";
|
||||
}
|
||||
|
||||
function changeColor2() {
|
||||
let button = document.getElementById("bouton_modif");
|
||||
button.style.backgroundColor = "rgb(170,170,170)";
|
||||
}
|
||||
|
||||
function changeColor3() {
|
||||
let button = document.getElementById("bouton_sup");
|
||||
button.style.backgroundColor = "rgb(170,170,170)";
|
||||
function changeColor() {
|
||||
let b1 = document.querySelector('button');
|
||||
b1.style.backgroundColor = "rgb(170,170,170)";
|
||||
}
|
||||
|
||||
export default NavigationAdmin;
|
||||
@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
|
||||
|
||||
const NavigationDashboard = () => {
|
||||
return (
|
||||
<div className="nav_bar_verticale">
|
||||
<NavLink className="mon_compte" to="/Account">
|
||||
<div className="parti_one">
|
||||
<button className="button" type="submit">
|
||||
<img id='bigImage' className="logo_nav_bar" srcSet="./logo_person.svg"/>
|
||||
</button>
|
||||
</div>
|
||||
</NavLink>
|
||||
<NavLink className="dashboard" to="/Dashboard">
|
||||
<div className="parti_two">
|
||||
<button className="button" type="submit">
|
||||
<img className="logo_nav_bar" srcSet="./logo_speed.svg"/>
|
||||
</button>
|
||||
<NavLink className="analyse" to="/Analyse">
|
||||
<div className="parti_two">
|
||||
<button className="button" type="submit">
|
||||
<img className="logo_nav_bar" srcSet="./logo_graph.svg"/>
|
||||
</button>
|
||||
</div>
|
||||
</NavLink>
|
||||
<NavLink className="calendrier" to="/Calendrier">
|
||||
<div className="parti_two">
|
||||
<button className="button" type="submit">
|
||||
<img className="logo_nav_bar" srcSet="./logo_calendrier.svg"/>
|
||||
</button>
|
||||
</div>
|
||||
</NavLink>
|
||||
</div>
|
||||
</NavLink>
|
||||
<NavLink className="repertoire" to="/Repertoire">
|
||||
<div className="parti_three">
|
||||
<button className="button" type="submit">
|
||||
<img className="logo_nav_bar" srcSet="./logo_group.svg"/>
|
||||
</button>
|
||||
</div>
|
||||
</NavLink>
|
||||
<NavLink className="parametres" to="/Parametres">
|
||||
<div className="parti_four">
|
||||
<button className="button" type="submit">
|
||||
<img className="logo_nav_bar" srcSet="./logo_parametre.svg"/>
|
||||
</button>
|
||||
</div>
|
||||
</NavLink>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default NavigationDashboard;
|
||||
@ -1,64 +0,0 @@
|
||||
import React from 'react';
|
||||
import axios from 'axios'
|
||||
import NavigationAdmin from '../components/NavigationAdmin.js';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: 'http://localhost:8080'
|
||||
})
|
||||
|
||||
function Admin() {
|
||||
|
||||
function checkAdd(event){
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
const formData = new FormData(event.currentTarget);
|
||||
const values = Object.fromEntries(formData.entries());
|
||||
|
||||
console.log(values.firstname);
|
||||
|
||||
|
||||
|
||||
api.post('/User/Add', values).then (function(response) {
|
||||
console.log(response.data);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page_admin">
|
||||
<NavigationAdmin />
|
||||
{/* Create a admin page */}
|
||||
<div className="Titre_Formulaire">
|
||||
<p className="Titre">Admin</p>
|
||||
<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>Rôle :</p>
|
||||
<p>Identifiant :</p>
|
||||
<p>Mot de passe :</p>
|
||||
</div>
|
||||
</tr>
|
||||
<tr>
|
||||
<input id="nom" name='lastname' className="texte_zone" type="text" placeholder="Nom..."/>
|
||||
<input id="prénom" name='firstname' className="texte_zone" type="text" placeholder="Prénom..."/>
|
||||
<input id="rôle" name='idrole' className="texte_zone" type="text" placeholder="Rôle..."/>
|
||||
<input id="identifiant" name='login' className="texte_zone" type="text" placeholder="Identifiant..."/>
|
||||
<input id="password" name='password' className="texte_zone" type="password" placeholder="Mot de passe (par default)..."/>
|
||||
</tr>
|
||||
</table>
|
||||
<div className="bouton_submit">
|
||||
<button className="bouton_val" type="submit">Valider</button>
|
||||
<button className="bouton_ann" type='reset'>Annuler</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Admin;
|
||||
@ -0,0 +1,111 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import axios from 'axios'
|
||||
import NavigationAdmin from '../components/NavigationAdmin.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';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: 'http://localhost:8080'
|
||||
})
|
||||
|
||||
function Admin_create() {
|
||||
|
||||
const [loginError, setLoginError] = useState(false);
|
||||
const [roles, setRoles] = useState([]);
|
||||
const [selectedIdRole, setSelectedIdRole] = useState(1);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() =>{
|
||||
api.get('/Role/All/').then((response) => {
|
||||
setRoles(response.data);
|
||||
});
|
||||
}, []);
|
||||
|
||||
function handleChangeRole(event){
|
||||
setSelectedIdRole(event.target.value);
|
||||
};
|
||||
|
||||
function checkAdd(event){
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
const formData = new FormData(event.currentTarget);
|
||||
const values = Object.fromEntries(formData.entries());
|
||||
{/* Verif value login exist déja */}
|
||||
console.log(values.firstname);
|
||||
api.get('/User/Exist/'+ values.login).then((response) => {
|
||||
const login = response.data;
|
||||
if (login.length > 0){
|
||||
setLoginError(true);
|
||||
}
|
||||
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);
|
||||
});
|
||||
|
||||
navigate("/Admin_list");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page_admin">
|
||||
{/*<NavigationAdmin />*/}
|
||||
{/* Create a admin page */}
|
||||
<div className="Titre_Formulaire">
|
||||
<p className="Titre">Admin</p>
|
||||
<p className="Sous-titre">Création d'utilisateur</p>
|
||||
<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>Rôle :</p>
|
||||
<p>Identifiant :</p>
|
||||
<p>Mot de passe :</p>
|
||||
</div>
|
||||
</tr>
|
||||
<tr>
|
||||
<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"
|
||||
placeholder="Téléphone..." pattern="[0-9]{10}" required/>
|
||||
<input id="email" name='mail' className="texte_zone" type="email" placeholder="Email..." required/>
|
||||
<Select
|
||||
name='idrole'
|
||||
value={selectedIdRole}
|
||||
onChange={handleChangeRole}
|
||||
>
|
||||
{roles.map(role => (
|
||||
<MenuItem value={role.idRole}>{role.name}</MenuItem>
|
||||
))}
|
||||
</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>
|
||||
<div className="bouton_submit">
|
||||
<button className="bouton_val" type="submit">Valider</button>
|
||||
<NavLink className="bouton_ann" to="/Admin_list">Retour</NavLink>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Admin_create;
|
||||
@ -0,0 +1,101 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import axios from 'axios'
|
||||
import NavigationAdmin from '../components/NavigationAdmin.js';
|
||||
import { TableContainer,Table,TableHead,TableBody,TableRow,TableCell } from '@mui/material';
|
||||
import { Paper } from '@mui/material';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: 'http://localhost:8080'
|
||||
})
|
||||
|
||||
function Admin_list() {
|
||||
|
||||
const [users, setUsers] = useState([]);
|
||||
const [selectedIdUser, setSelectedIdUser] = useState();
|
||||
|
||||
useEffect(() =>{
|
||||
api.get('/User/All/').then((response) => {
|
||||
setUsers(response.data);
|
||||
setSelectedIdUser(response.data[0].iduser);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleClick = (event, iduser) => {
|
||||
setSelectedIdUser(iduser);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page_admin">
|
||||
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
|
||||
{/* Create a page to delete an user in the admin page*/}
|
||||
<NavigationAdmin iduser={selectedIdUser}/>
|
||||
<div className="Titre_Formulaire_Rech">
|
||||
<p className="Titre">Admin</p>
|
||||
<p className="Sous-titre">Liste des utilisateurs</p>
|
||||
<div className="rechLogo">
|
||||
<div className="input_box">
|
||||
<input type="search" placeholder="Rechercher..."/>
|
||||
<span className="search">
|
||||
<i class="uil uil-search search-icon"></i>
|
||||
</span>
|
||||
</div>
|
||||
{/*
|
||||
<form className="formulaire">
|
||||
<table className="Formulaire_de_recherche">
|
||||
<tr className="tr_bouton">
|
||||
<div className="bouton_personnes">
|
||||
<p className="bouton_personne1">
|
||||
<strong>Dupont Jacques</strong>
|
||||
</p>
|
||||
<p className="bouton_personne2">
|
||||
<strong>Carreau Alexis</strong>
|
||||
</p>
|
||||
</div>
|
||||
</tr>
|
||||
<tr>
|
||||
<div id="style" className='bouton_submit'>
|
||||
<button className="bouton_sup" type="submit" onClick="document.getElementById('style').style.backgroundColor='green'">Supprimer</button>
|
||||
<button className="bouton_ann" type="submit" onClick="document.getElementById('style').style.backgroundColor='red'">Annuler</button>
|
||||
</div>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
*/}
|
||||
<TableContainer component={Paper} sx={{ maxHeight: 0.8 }}>
|
||||
<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="center">Rôle</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody >
|
||||
{users.map((user) => (
|
||||
<TableRow
|
||||
key={user.iduser}
|
||||
hover
|
||||
onClick={(event) => handleClick(event, user.iduser)}
|
||||
selected={user.iduser === selectedIdUser}
|
||||
>
|
||||
<TableCell align="left">{user.lastname}</TableCell>
|
||||
<TableCell align="center">{user.firstname}</TableCell>
|
||||
<TableCell align="center">{user.login}</TableCell>
|
||||
<TableCell align="center">{user.phone}</TableCell>
|
||||
<TableCell align="center">{user.mail}</TableCell>
|
||||
<TableCell align="center">{user.name}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Admin_list;
|
||||
@ -0,0 +1,52 @@
|
||||
import React from 'react';
|
||||
import axios from 'axios'
|
||||
import Chart from 'chart.js/auto'
|
||||
import NavigationDashboard from '../components/NavigationDashboard';
|
||||
window.Chart = Chart
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: 'http://localhost:8080'
|
||||
})
|
||||
|
||||
|
||||
const Analyse = () => {
|
||||
return (
|
||||
<body>
|
||||
|
||||
<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">
|
||||
<div className="input_box">
|
||||
<input type="search" placeholder="Rechercher..."/>
|
||||
<span className="search">
|
||||
<i class="uil uil-search search-icon"></i>
|
||||
</span>
|
||||
</div>
|
||||
<img className="logo" srcSet="./LogoApp.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bas_de_page">
|
||||
<NavigationDashboard />
|
||||
<div className="Analyse">
|
||||
<div className="Stat_1">
|
||||
Tendances des ventes
|
||||
</div>
|
||||
<div className="Stat_2">
|
||||
Statistique n°2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
export default Analyse;
|
||||
@ -0,0 +1,87 @@
|
||||
import React, { useState } from 'react';
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
import NavigationDashboard from '../components/NavigationDashboard';
|
||||
import format from "date-fns/format";
|
||||
import getDay from "date-fns/getDay";
|
||||
import parse from "date-fns/parse";
|
||||
import startOfWeek from "date-fns/startOfWeek";
|
||||
import { Calendar, dateFnsLocalizer } from "react-big-calendar";
|
||||
import "react-big-calendar/lib/css/react-big-calendar.css";
|
||||
import DatePicker from "react-datepicker";
|
||||
|
||||
|
||||
const locales = {
|
||||
"en-US": require("date-fns/locale/en-US"),
|
||||
};
|
||||
const localizer = dateFnsLocalizer({
|
||||
format,
|
||||
parse,
|
||||
startOfWeek,
|
||||
getDay,
|
||||
locales
|
||||
});
|
||||
|
||||
const events = [
|
||||
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
||||
const Calendrier = () => {
|
||||
|
||||
const [newEvent, setNewEvent] = useState({title: "", start: "", end:""});
|
||||
const [allEvents, setAllEvents] = useState(events);
|
||||
|
||||
function handleAddEvent() {
|
||||
setAllEvents([...allEvents, newEvent]);
|
||||
}
|
||||
|
||||
return (
|
||||
<body>
|
||||
|
||||
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
|
||||
|
||||
<div className="page_calendrier">
|
||||
{/*Create a calendar page*/}
|
||||
<div className="haut_de_page">
|
||||
<h2 className="titre">Calendrier</h2>
|
||||
<link href='fullcalendar/main.css' rel='stylesheet' />
|
||||
<div className="rechLogo">
|
||||
<div className="input_box">
|
||||
<input type="search" placeholder="Rechercher..."/>
|
||||
<span className="search">
|
||||
<i class="uil uil-search search-icon"></i>
|
||||
</span>
|
||||
</div>
|
||||
<img className="logo" srcSet="./LogoApp.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bas_de_page">
|
||||
<NavigationDashboard />
|
||||
<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"}}
|
||||
value={newEvent.Titre} onChange={(e) => setNewEvent({...newEvent, title: e.target.value})}/>
|
||||
<DatePicker className="ajout_input" placeholderText="Date de début" style={{height: "20px", width: "100%", marginRight: "10px"}}
|
||||
selected={newEvent.start} onChange={(start) => setNewEvent({...newEvent, start})} />
|
||||
<DatePicker className="ajout_input" placeholderText="Date de fin" style={{height: "20px", width: "100%"}}
|
||||
selected={newEvent.end} onChange={(end) => setNewEvent({...newEvent, end})} />
|
||||
</div>
|
||||
<button className="bouton_ajout" onClick={handleAddEvent}>
|
||||
<p>Ajouter l'évènement</p>
|
||||
</button>
|
||||
</h2>
|
||||
<Calendar localizer={localizer} events={allEvents}
|
||||
startAccessor="start" endAccessor="end" style={{height: "100%", width:"99%"}}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default Calendrier;
|
||||
@ -1,28 +1,75 @@
|
||||
import React from 'react';
|
||||
import NavigationDashboard from '../components/NavigationDashboard';
|
||||
|
||||
|
||||
const Dashboard = () => {
|
||||
return (
|
||||
<body className="corps_page_dashboard">
|
||||
<body>
|
||||
|
||||
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
|
||||
|
||||
<div className="page_principale">
|
||||
{/* Create a principal page */}
|
||||
<div className="haut_de_page">
|
||||
<h2 className="titre">Dashboard</h2>
|
||||
<div className="rechLogo">
|
||||
<div className="input_box">
|
||||
<input type="search" placeholder="Rechercher..."/>
|
||||
<span className="search">
|
||||
<i class="uil uil-search search-icon"></i>
|
||||
</span>
|
||||
</div>
|
||||
<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">
|
||||
<div className="input_box">
|
||||
<input type="search" placeholder="Rechercher..."/>
|
||||
<span className="search">
|
||||
<i class="uil uil-search search-icon"></i>
|
||||
</span>
|
||||
</div>
|
||||
<img className="logo" srcSet="./LogoApp.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<div className="bas_de_page">
|
||||
<NavigationDashboard />
|
||||
<div className="Dashboard">
|
||||
<div className="_gauche">
|
||||
<div className="_haut">
|
||||
<div className="Mes_infos">
|
||||
Mes infos
|
||||
</div>
|
||||
<div className="Alertes">
|
||||
Alertes
|
||||
</div>
|
||||
</div>
|
||||
<div className="_bas">
|
||||
<div className="Mes_prochaines_activités">
|
||||
Mes prochaines activités
|
||||
</div>
|
||||
<div className="Chiffre_clés">
|
||||
<div className="Ch_Clé_gauche">
|
||||
<div className="Ch_Clé_gauche_haut">
|
||||
Chiffre_clés
|
||||
</div>
|
||||
<div className="Ch_Clé_gauche_bas">
|
||||
Chiffre_clés
|
||||
</div>
|
||||
</div>
|
||||
<div className="Ch_Clé_droite">
|
||||
<div className="Ch_Clé_droite_haut">
|
||||
Chiffre_clés
|
||||
</div>
|
||||
<div className="Ch_Clé_droite_bas">
|
||||
Chiffre_clés
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="_droite">
|
||||
<div className="clients_important">
|
||||
clients important
|
||||
</div>
|
||||
<div className="contacts_ajouté_récemment">
|
||||
contacts ajouté récemment
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -0,0 +1,58 @@
|
||||
import React from 'react';
|
||||
import NavigationDashboard from '../components/NavigationDashboard';
|
||||
|
||||
|
||||
const Parametre = () => {
|
||||
return (
|
||||
<body>
|
||||
|
||||
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
|
||||
|
||||
<div className="page_parametre">
|
||||
{/* Create an account page */}
|
||||
<div className="haut_de_page">
|
||||
<h2 className="titre">Paramètre</h2>
|
||||
<div className="rechLogo">
|
||||
<div className="input_box">
|
||||
<input type="search" placeholder="Rechercher..."/>
|
||||
<span className="search">
|
||||
<i class="uil uil-search search-icon"></i>
|
||||
</span>
|
||||
</div>
|
||||
<img className="logo" srcSet="./LogoApp.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bas_de_page">
|
||||
<NavigationDashboard />
|
||||
<div className="Parametre">
|
||||
<div className="one">
|
||||
<div className="one_haut">
|
||||
sécurité
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div className="one_bas">
|
||||
<p className="text_one_milieu">Mot de passe</p>
|
||||
<div className='bouton_submit'>
|
||||
<button className="bouton_modifierMDP" type="submit">Modifier</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="two">
|
||||
coucou
|
||||
</div>
|
||||
<div className="three">
|
||||
coucou
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
);
|
||||
};
|
||||
|
||||
export default Parametre;
|
||||
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import NavigationDashboard from '../components/NavigationDashboard';
|
||||
|
||||
|
||||
const Repertoire = () => {
|
||||
return (
|
||||
<body>
|
||||
coucou
|
||||
</body>
|
||||
);
|
||||
};
|
||||
|
||||
export default Repertoire;
|
||||
@ -0,0 +1,164 @@
|
||||
body {
|
||||
background-image: url("../../../public/fond_page_connexion.png");
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
.page_analyse {
|
||||
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, 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);
|
||||
|
||||
.titre {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.rechLogo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.input_box {
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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, 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);
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
object-fit: cover;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
.logo_nav_bar{
|
||||
display: flex;
|
||||
margin: 10px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Analyse {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
height: auto;
|
||||
width: 93.4%;
|
||||
margin: 5px 10px 10px 5px;
|
||||
|
||||
.Stat_1 {
|
||||
display: flex;
|
||||
width: auto;
|
||||
height: 50%;
|
||||
margin: 50px 50px 8px 50px;
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
.Stat_2 {
|
||||
display: flex;
|
||||
width: auto;
|
||||
height: 50%;
|
||||
margin: 8px 50px 50px 50px;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,208 @@
|
||||
body {
|
||||
background-image: url("../../../public/fond_page_connexion.png");
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
.page_calendrier {
|
||||
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, 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);
|
||||
|
||||
.titre {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.rechLogo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.input_box {
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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, 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);
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
object-fit: cover;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
.logo_nav_bar{
|
||||
display: flex;
|
||||
margin: 10px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Calendrier {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
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);
|
||||
width: 100%;
|
||||
margin: 5px 10px 10px 5px;
|
||||
text-align: center;
|
||||
|
||||
.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);
|
||||
|
||||
.mini_formulaire_evenement {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
height: 100px;
|
||||
|
||||
}
|
||||
|
||||
.bouton_ajout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 75%;
|
||||
height: 50px;
|
||||
border-radius: 10px;
|
||||
background-color: rgba(163, 163, 163, 0.371);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
backdrop-filter: blur(30px);
|
||||
color: rgb(255, 255, 255);
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
&:hover{
|
||||
background-color: rgba(114, 114, 114, 0.371);
|
||||
}
|
||||
&:active{
|
||||
background-color:rgba(68, 68, 68, 0.972);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rbc-calendar {
|
||||
border-radius: 15px;
|
||||
border: 1px solid black;
|
||||
|
||||
.rbc-day-bg {
|
||||
border-radius: 5px;
|
||||
border-color: black;
|
||||
}
|
||||
.rbc-month-view {
|
||||
border-radius: 10px;
|
||||
border-color: black;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ajout_input {
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,246 @@
|
||||
body {
|
||||
background-image: url("../../../public/fond_page_connexion.png");
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
.page_parametre {
|
||||
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, 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);
|
||||
|
||||
.titre {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.rechLogo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.input_box {
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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, 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);
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
object-fit: cover;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
.logo_nav_bar{
|
||||
display: flex;
|
||||
margin: 10px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.Parametre {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 94.3%;
|
||||
height: auto;
|
||||
margin: 5px 10px 10px 5px;
|
||||
|
||||
.one {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
width: auto;
|
||||
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.37);
|
||||
backdrop-filter: blur(3px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
|
||||
.one_haut {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
height: 50%;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
.one_milieu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 9px;
|
||||
height: 25%;
|
||||
border-bottom: 1px solid black;
|
||||
|
||||
.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.37);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover{
|
||||
background-color: lightgrey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.one_bas {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 9px;
|
||||
height: 25%;
|
||||
|
||||
.bouton_submit {
|
||||
display: flex;
|
||||
margin-left: 30px;
|
||||
align-items: center;
|
||||
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.37);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover{
|
||||
background-color: lightgrey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.two {
|
||||
display: flex;
|
||||
width: auto;
|
||||
height: 28.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);
|
||||
|
||||
}
|
||||
|
||||
.three {
|
||||
display: flex;
|
||||
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.37);
|
||||
backdrop-filter: blur(3px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,8 @@
|
||||
@import "./settings.scss";
|
||||
@import "./components/connexion.scss";
|
||||
@import "./components/admin.scss";
|
||||
@import "./components/compte.scss";
|
||||
@import "./settings";
|
||||
@import "./components/connexion";
|
||||
@import "./components/admin";
|
||||
@import "./components/compte";
|
||||
@import "./components/dashboard";
|
||||
@import "./components/analyse";
|
||||
@import "./components/calendrier";
|
||||
@import "./components/parametre"
|
||||
Loading…
Reference in new issue