diff --git a/src/pages/Admin.js b/src/pages/Admin.js index 04fd571..da4c60b 100644 --- a/src/pages/Admin.js +++ b/src/pages/Admin.js @@ -55,6 +55,7 @@ function Admin() { {/* Create a admin page */}

Admin

+

Création d'utilisateur

diff --git a/src/pages/Admin_modif.js b/src/pages/Admin_modif.js index 86041b9..a636e26 100644 --- a/src/pages/Admin_modif.js +++ b/src/pages/Admin_modif.js @@ -9,6 +9,7 @@ const Admin_modif = () => { {/* Create a admin page */}

Admin

+

Modification d'utilisateur

diff --git a/src/pages/Admin_supp.js b/src/pages/Admin_supp.js index ed53efd..5279a0d 100644 --- a/src/pages/Admin_supp.js +++ b/src/pages/Admin_supp.js @@ -31,6 +31,7 @@ const Admin_supp = () => {

Admin

+

Supression d'utilisateur

diff --git a/src/pages/Analyse.js b/src/pages/Analyse.js index c757bf7..64e4d05 100644 --- a/src/pages/Analyse.js +++ b/src/pages/Analyse.js @@ -11,30 +11,38 @@ const api = axios.create({ const Analyse = () => { return ( -
- {/* Create an analysis page */} -
-

Analyse

-
-
- - - - + + + + +
+ {/* Create an analysis page */} +
+

Analyse

+
+
+ + + + +
+
-
-
-
- -
-
- -
+
+ +
+
+ Tendances des ventes +
+
+ Statistique n°2 +
+
-
+ ); }; diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js index 439e19a..1139e12 100644 --- a/src/pages/Dashboard.js +++ b/src/pages/Dashboard.js @@ -1,28 +1,75 @@ import React from 'react'; +import NavigationDashboard from '../components/NavigationDashboard'; const Dashboard = () => { return ( - + - - -
- {/* Create a principal page */} -
-

Dashboard

-
-
- - - - -
+ + +
+ {/* Create an account page */} +
+

Dashboard

+
+
+ + + +
- +
+ +
+
+
+
+ Mes infos +
+
+ Alertes +
+
+
+
+ Mes prochaines activités +
+
+
+
+ Chiffre_clés +
+
+ Chiffre_clés +
+
+
+
+ Chiffre_clés +
+
+ Chiffre_clés +
+
+
+
+
+
+
+ clients important +
+
+ contacts ajouté récemment +
+
+
+
+
+ ); }; diff --git a/src/styles/components/_admin.scss b/src/styles/components/_admin.scss index 08d6be8..1d4128e 100644 --- a/src/styles/components/_admin.scss +++ b/src/styles/components/_admin.scss @@ -95,6 +95,18 @@ font-size: 70px; 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{ @@ -231,37 +243,51 @@ display: flex; flex-direction: column; flex-basis: 100%; - /*background: rgba(255, 255, 255, 0.3); + 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);*/ + -webkit-backdrop-filter: blur(15px); margin: 10px; + padding: 10px; .Titre { display: flex; - background: rgba(255, 255, 255, 0.3); + /*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; + -webkit-backdrop-filter: blur(15px);*/ + margin: 10px; font-size: 70px; 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 { display: flex; flex-direction: column; flex-basis: 100%; - background: rgba(255, 255, 255, 0.3); + /*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); + -webkit-backdrop-filter: blur(15px);*/ //margin: 10px; //padding: 10px; align-items: center; + margin-top: 5%; .input_box { display: flex; diff --git a/src/styles/components/_analyse.scss b/src/styles/components/_analyse.scss index ca2783c..3114325 100644 --- a/src/styles/components/_analyse.scss +++ b/src/styles/components/_analyse.scss @@ -1,16 +1,13 @@ -.page_analyse { - display: flex; - 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); +body { + background-image: url("../../../public/fond_page_connexion.png"); + .page_analyse { + display: flex; + flex-direction: column; + justify-content: space-evenly; + width: auto; + height: 100vh; + .haut_de_page { display: flex; flex-direction: row; @@ -20,8 +17,8 @@ height: 10%; align-items: center; margin: 10px 10px 5px 10px; - - background: rgba(255, 255, 255, 0.143); + + 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); @@ -30,7 +27,7 @@ .titre { font-size: 40px; } - + .rechLogo { display: flex; flex-direction: row; @@ -86,11 +83,11 @@ } } } - + .bas_de_page { display: flex; flex-direction: row; - //justify-content: space-between; + justify-content: space-between; width: auto; height: 86%; @@ -102,7 +99,7 @@ width: 5%; margin: 5px 5px 10px 10px; - background: rgba(255, 255, 255, 0.143); + 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); @@ -124,20 +121,40 @@ } } - .statistiques_1 { + .Analyse { display: flex; flex-direction: column; justify-content: space-evenly; - padding: 50px; - width: 1423px; - height: 627px; - margin: 5px 5px 10px 10px; - - 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); + height: auto; + width: 93%; + 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); + } } } -} + } +} \ No newline at end of file diff --git a/src/styles/components/_dashboard.scss b/src/styles/components/_dashboard.scss index 50ff578..9684cfc 100644 --- a/src/styles/components/_dashboard.scss +++ b/src/styles/components/_dashboard.scss @@ -1,8 +1,7 @@ -.corps_page_dashboard{ +body { background-image: url("../../../public/fond_page_connexion.png"); - - .page_principale { + .page_dashboard { display: flex; flex-direction: column; 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); + } + } + } + } } -} \ No newline at end of file +}