Amélioration bouton page admin + création page devis

src/App.js

@@ -4,6 +4,7 @@ import Compte from './pages/Compte';
 import Connexion from './pages/Connexion';
 import Admin_modif from './pages/Admin_modif';
 import Admin_supp from './pages/Admin_supp';
+import Admin_devis from './pages/Admin_devis';
 import Dashboard from './pages/Dashboard';
 import Analyse from './pages/Analyse';
 import Admin_list from './pages/Admin_list';
@@ -24,6 +25,7 @@ const App = () => {
       <Route path="/Account" element={<Compte />} />
       <Route path="/Admin_list" element={<Admin_list />} />
       <Route path="/Admin_modif" element={<Admin_modif />} />
+      <Route path="/Admin_devis" element={<Admin_devis />} />
       <Route path="/Admin_supp" element={<Admin_supp />} />
       <Route path="/Dashboard" element={<Dashboard />} />
       <Route path="/Analyse" element={<Analyse />} />

src/components/NavigationAdmin.js

@@ -6,16 +6,23 @@ const NavigationAdmin = (props) => {
     return (
 
         <div className="nav_bar_verticale">
-            <img className="logo" srcSet="./LogoApp.svg"></img>
+            <div className="logoCRM">
-            <NavLink className="create_user" to="/Admin_create">
+                <img className="logo" srcSet="./LogoApp.svg"></img>
-                <button id="bouton_créer" className="bouton" type="button" value="Créer un utilisateur">Créer utilisateur</button>
+            </div>
-            </NavLink>
+            <div className="BoutonNav">
-            <NavLink className="modify_user" to="/Admin_modif" state={{ iduser: props.iduser }}>
+                <NavLink className="create_user" to="/Admin_create">
-                <button id="bouton_modif" className="bouton" type="button" value="Modifier un utilisateur">Modifier utilisateur</button>
+                    <button id="bouton_créer" className="bouton" type="button" value="Créer un utilisateur">Créer utilisateur</button>
-            </NavLink>
+                </NavLink>
-            <NavLink className="delete_user" to="/Admin_supp">
+                <NavLink className="modify_user" to="/Admin_modif" state={{ iduser: props.iduser }}>
-                <button id="bouton_sup" className="bouton" type="button" value="Supprimer un utilisateur">Supprimer utilisateur</button>
+                    <button id="bouton_modif" className="bouton" type="button" value="Modifier un utilisateur">Modifier utilisateur</button>
-            </NavLink>
+                </NavLink>
+                <NavLink className="delete_user" to="/Admin_supp">
+                    <button id="bouton_sup" className="bouton" type="button" value="Supprimer un utilisateur">Supprimer utilisateur</button>
+                </NavLink>
+                <NavLink className="list_devis" to="/Admin_devis">
+                    <button id="bouton_devis" className="bouton" type="button" value="Devis">Devis</button>
+                </NavLink>
+            </div>
         </div>
     );
 };

src/pages/Admin_devis.js

@@ -0,0 +1,34 @@
+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'
+  })
+
+const Admin_devis = () => {
+
+    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 />
+            <div className="Titre_Formulaire_Rech">
+                <p className="Titre">Admin</p>
+                <p className="Sous-titre">Supression d'utilisateur</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>
+                </div>
+            </div>
+         </div>
+    );
+};
+
+export default Admin_devis;

src/pages/Admin_supp.js

@@ -39,28 +39,6 @@ const Admin_supp = () => {
                             <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 >

src/styles/components/_admin.scss

@@ -13,63 +13,86 @@ body {
         .nav_bar_verticale {
             display: flex;
             flex-direction: column;
-            width: 200px;
+            justify-content: space-around;
+            margin: 10px;
+            width: 230px;
             background: rgba(255, 255, 255, 0.143);
             box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
             backdrop-filter: blur(3px);
             -webkit-backdrop-filter: blur(1.5px);
             border-radius: 15px;
             border: 1px solid rgba(255, 255, 255, 0.18);
-            margin: 10px;
 
+            .logoCRM {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                align-items: center;
 
-            .create_user {
+                .logo {
-                padding: 5px;
+                    max-width: 150px;
-                text-decoration: none;
+                    max-height: 150px;
-                align-self: center;
+                }
-            }
-
-            .modify_user {
-                padding: 5px;
-                text-decoration: none;
-                align-self: center;
-            }
-
-            .delete_user {
-                padding: 5px;
-                text-decoration: none;
-                align-self: center;
             }
 
-
+            .BoutonNav {
-            .bouton {
                 display: flex;
-                justify-content: center;
+                flex-direction: column;
-                align-items: center;
+                justify-content: space-evenly;
-                position: relative;
+                height: 450px;
-                width: 180px;
+                margin-bottom: 180px;
-                height: 100px;
+
-                border-radius: 10px;
+                .create_user {
-                font-size: 13.5px;
+                    display: flex;
-                font-weight: bold;
+                    padding: 5px;
-                transition: 1s box-shadow;
+                    text-decoration: none;
-                border: none;
+                    align-self: center;
-                box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-                background-color: rgb(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: 17px;
-
-                &:hover{
-                    box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
-                    color: white;
-                    background-color: rgba(114, 114, 114, 0.371); 
                 }
+    
+                .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;
+                    text-decoration: none;
+                    align-self: center;
+                }
+    
+                .bouton {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    width: 150px;
+                    height: 60px;
+                    font-size: 17px;
+                    font-weight: bold;
+                    transition: 1s box-shadow;
+                    border: none;
+                    cursor: pointer;
+                    color: white;
+                    background-color: grey;
+                    border-radius: 15px;
 
-                &:active{
+                    &:hover {
-                    background-color:rgba(68, 68, 68, 0.972);
+                        color: white;
+                        background-color: rgba(114, 114, 114, 0.371);
+                    }
+
+                    &:active {
+                        background-color: rgba(68, 68, 68, 0.972);
+                    }
                 }
             }
         }