Jeremy DUCOURTHIAL 3 years ago
commit 4a2234fedc

@ -55,6 +55,7 @@ function Admin() {
{/* Create a admin page */} {/* Create a admin page */}
<div className="Titre_Formulaire"> <div className="Titre_Formulaire">
<p className="Titre">Admin</p> <p className="Titre">Admin</p>
<p className="Sous-titre">Création d'utilisateur</p>
<div className="Formulaire"> <div className="Formulaire">
<form className="form" onSubmit={checkAdd}> <form className="form" onSubmit={checkAdd}>
<table className="Formulaire_de_connexion"> <table className="Formulaire_de_connexion">

@ -9,6 +9,7 @@ const Admin_modif = () => {
{/* Create a admin page */} {/* Create a admin page */}
<div className="Titre_Formulaire"> <div className="Titre_Formulaire">
<p className="Titre">Admin</p> <p className="Titre">Admin</p>
<p className="Sous-titre">Modification d'utilisateur</p>
<div className="Formulaire"> <div className="Formulaire">
<form className="form"> <form className="form">
<table className="Formulaire_de_connexion"> <table className="Formulaire_de_connexion">

@ -31,6 +31,7 @@ const Admin_supp = () => {
<NavigationAdmin /> <NavigationAdmin />
<div className="Titre_Formulaire_Rech"> <div className="Titre_Formulaire_Rech">
<p className="Titre">Admin</p> <p className="Titre">Admin</p>
<p className="Sous-titre">Supression d'utilisateur</p>
<div className="rechLogo"> <div className="rechLogo">
<div className="input_box"> <div className="input_box">
<input type="search" placeholder="Rechercher..."/> <input type="search" placeholder="Rechercher..."/>

@ -11,30 +11,38 @@ const api = axios.create({
const Analyse = () => { const Analyse = () => {
return ( return (
<div className="page_analyse"> <body>
{/* Create an analysis page */}
<div className="haut_de_page"> <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
<h2 className="titre">Analyse</h2>
<div className="rechLogo"> <div className="page_analyse">
<div className="input_box"> {/* Create an analysis page */}
<input type="search" placeholder="Rechercher..."/> <div className="haut_de_page">
<span className="search"> <h2 className="titre">Analyse</h2>
<i class="uil uil-search search-icon"></i> <div className="rechLogo">
</span> <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>
<img className="logo" srcSet="./LogoApp.svg"/>
</div> </div>
</div>
<div className="bas_de_page"> <div className="bas_de_page">
<NavigationDashboard /> <NavigationDashboard />
<div className="Analyse"> <div className="Analyse">
<div className="statistiques_1"> <div className="Stat_1">
Tendances des ventes
</div> </div>
<div className="Stat_2">
Statistique n°2
</div>
</div>
</div> </div>
</div> </div>
</div> </body>
); );
}; };

@ -1,28 +1,75 @@
import React from 'react'; import React from 'react';
import NavigationDashboard from '../components/NavigationDashboard';
const Dashboard = () => { const Dashboard = () => {
return ( return (
<body className="corps_page_dashboard"> <body>
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link> <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
<div className="page_principale"> <div className="page_dashboard">
{/* Create a principal page */} {/* Create an account page */}
<div className="haut_de_page"> <div className="haut_de_page">
<h2 className="titre">Dashboard</h2> <h2 className="titre">Dashboard</h2>
<div className="rechLogo"> <div className="rechLogo">
<div className="input_box"> <div className="input_box">
<input type="search" placeholder="Rechercher..."/> <input type="search" placeholder="Rechercher..."/>
<span className="search"> <span className="search">
<i class="uil uil-search search-icon"></i> <i class="uil uil-search search-icon"></i>
</span> </span>
</div>
</div> </div>
<img className="logo" srcSet="./LogoApp.svg"/> <img className="logo" srcSet="./LogoApp.svg"/>
</div> </div>
</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>
); );
}; };

@ -95,6 +95,18 @@
font-size: 70px; font-size: 70px;
font-weight: bold; font-weight: bold;
} }
.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{
@ -231,37 +243,51 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-basis: 100%; flex-basis: 100%;
/*background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
border-radius: 15px; border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/ -webkit-backdrop-filter: blur(15px);
margin: 10px; margin: 10px;
padding: 10px;
.Titre { .Titre {
display: flex; display: flex;
background: rgba(255, 255, 255, 0.3); /*background: rgba(255, 255, 255, 0.3);
border-radius: 15px; border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);*/
//margin: 10px; margin: 10px;
font-size: 70px; font-size: 70px;
font-weight: bold; font-weight: bold;
} }
.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;
}
.rechLogo { .rechLogo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-basis: 100%; flex-basis: 100%;
background: rgba(255, 255, 255, 0.3); /*background: rgba(255, 255, 255, 0.3);
border-radius: 15px; border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);*/
//margin: 10px; //margin: 10px;
//padding: 10px; //padding: 10px;
align-items: center; align-items: center;
margin-top: 5%;
.input_box { .input_box {
display: flex; display: flex;

@ -1,16 +1,13 @@
.page_analyse { body {
display: flex; background-image: url("../../../public/fond_page_connexion.png");
flex-direction: column;
//justify-content: space-evenly;
width: auto;
height: 100vh;
background: rgba(255, 255, 255, 0.143);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.page_analyse {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: auto;
height: 100vh;
.haut_de_page { .haut_de_page {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -20,8 +17,8 @@
height: 10%; height: 10%;
align-items: center; align-items: center;
margin: 10px 10px 5px 10px; margin: 10px 10px 5px 10px;
background: rgba(255, 255, 255, 0.143); background: rgba(255, 255, 255, 0.3);
border-radius: 15px; border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
@ -30,7 +27,7 @@
.titre { .titre {
font-size: 40px; font-size: 40px;
} }
.rechLogo { .rechLogo {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -86,11 +83,11 @@
} }
} }
} }
.bas_de_page { .bas_de_page {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
//justify-content: space-between; justify-content: space-between;
width: auto; width: auto;
height: 86%; height: 86%;
@ -102,7 +99,7 @@
width: 5%; width: 5%;
margin: 5px 5px 10px 10px; margin: 5px 5px 10px 10px;
background: rgba(255, 255, 255, 0.143); background: rgba(255, 255, 255, 0.3);
border-radius: 15px; border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
@ -124,20 +121,40 @@
} }
} }
.statistiques_1 { .Analyse {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
padding: 50px; height: auto;
width: 1423px; width: 93%;
height: 627px; margin: 5px 10px 10px 5px;
margin: 5px 5px 10px 10px;
.Stat_1 {
background: rgba(255, 255, 255, 0.143); display: flex;
border-radius: 15px; width: auto;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); height: 50%;
backdrop-filter: blur(3px); margin: 50px 50px 8px 50px;
-webkit-backdrop-filter: blur(15px);
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);
}
} }
} }
} }
}

@ -1,8 +1,7 @@
.corps_page_dashboard{ body {
background-image: url("../../../public/fond_page_connexion.png"); background-image: url("../../../public/fond_page_connexion.png");
.page_dashboard {
.page_principale {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
@ -84,5 +83,214 @@
} }
} }
} }
.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;
}
}
}
.Dashboard {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 93%;
height: auto;
margin: 5px 10px 10px 5px;
._gauche {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 76%;
._haut {
display: flex;
flex-direction: row;
justify-content: space-between;
width: auto;
height: 40%;
.Mes_infos {
display: flex;
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);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
}
.Alertes {
display: flex;
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);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
}
}
._bas {
display: flex;
flex-direction: row;
justify-content: space-between;
width: auto;
height: 58%;
.Mes_prochaines_activités {
display: flex;
width: 45%;
height: auto;
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);
}
.Chiffre_clés {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 53%;
height: auto;
.Ch_Clé_gauche {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 45%;
height: auto;
.Ch_Clé_gauche_haut {
display: flex;
width: auto;
height: 53%;
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);
}
.Ch_Clé_gauche_bas {
display: flex;
width: auto;
height: 42%;
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);
}
}
.Ch_Clé_droite {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 51%;
height: auto;
.Ch_Clé_droite_haut {
display: flex;
width: auto;
height: 46%;
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);
}
.Ch_Clé_droite_bas {
display: flex;
width: auto;
height: 49%;
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);
}
}
}
}
}
._droite {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 23%;
.clients_important {
display: flex;
width: auto;
height: 64%;
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);
}
.contacts_ajouté_récemment {
display: flex;
width: auto;
height: 34%;
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);
}
}
}
}
} }
} }

Loading…
Cancel
Save