Création page Analyse

package-lock.json

@@ -12,6 +12,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.1.3",
+        "chart.js": "^3.9.1",
         "crypto-js": "^4.1.1",
         "pg": "^8.8.0",
         "react": "^18.2.0",
@@ -5596,6 +5597,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/chart.js": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
+      "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
+    },
     "node_modules/check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@@ -20976,6 +20982,11 @@
       "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
       "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw=="
     },
+    "chart.js": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
+      "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
+    },
     "check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.1.3",
+    "chart.js": "^3.9.1",
     "crypto-js": "^4.1.1",
     "pg": "^8.8.0",
     "react": "^18.2.0",

src/App.js

@@ -2,10 +2,11 @@ import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Compte from './pages/Compte';
 import Connexion from './pages/Connexion';
-import Admin from './pages/Admin.js';
+import Admin from './pages/Admin';
-import Admin_modif from './pages/Admin_modif.js';
+import Admin_modif from './pages/Admin_modif';
-import Admin_supp from './pages/Admin_supp.js';
+import Admin_supp from './pages/Admin_supp';
 import Dashboard from './pages/Dashboard';
+import Analyse from './pages/Analyse';
 
 const App = () => {
   return (
@@ -17,6 +18,7 @@ const App = () => {
       <Route path="/Admin_modif" element={<Admin_modif />} />
       <Route path="/Admin_supp" element={<Admin_supp />} />
       <Route path="/Dashboard" element={<Dashboard />} />
+      <Route path="/Analyse" element={<Analyse />} />
      </Routes>
     </BrowserRouter>
   );

src/components/NavigationDashboard.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+
+const NavigationDashboard = () => {
+    return (
+        <div className="nav_barre_verticale">
+            
+        </div>
+    );
+};
+
+export default NavigationDashboard;

src/pages/Analyse.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import axios from 'axios'
+import Chart from 'chart.js/auto'
+window.Chart = Chart
+
+const api = axios.create({
+    baseURL: 'http://localhost:8080'
+  })
+
+
+const Analyse = () => {
+    return (
+        <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">
+                <div className="nav_bar_verticale">
+                    <div className="parti_one">
+                        <button className="button" type="submit">
+                            <img className="logo_nav_bar" srcSet="./logo_person.svg"/>                        
+                        </button>
+                    </div>  
+                    <div className="parti_two">
+                        <button className="button" type="submit">
+                            <img className="logo_nav_bar" srcSet="./logo_speed.svg"/> 
+                        </button>
+                        <button className="button" type="submit">
+                            <img className="logo_nav_bar" srcSet="./logo_graph.svg"/>
+                        </button>
+                        <button className="button" type="submit">
+                            <img className="logo_nav_bar" srcSet="./logo_calendrier.svg"/>
+                        </button>
+                    </div>
+                    <div className="parti_three">
+                        <button className="button" type="submit">
+                            <img className="logo_nav_bar" srcSet="./logo_group.svg"/>
+                        </button>
+                    </div>   
+                    <div className="parti_four">
+                        <button className="button" type="submit">
+                            <img className="logo_nav_bar" srcSet="./logo_parametre.svg"/>
+                        </button>
+                    </div>                                    
+                </div>
+                <div className="Analyse">
+                    <div className="statistiques_1">
+                        
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+
+  
+
+export default Analyse;

src/styles/components/_analyse.scss

@@ -0,0 +1,143 @@
+.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);
+
+        .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.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);
+
+            .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.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);
+
+                .button {
+                    display: flex;
+                    object-fit: cover;
+                    background-color: transparent;
+                    border: none;
+                    cursor: pointer;
+
+                    .logo_nav_bar{
+                        display: flex;
+                        margin: 10px;
+                        height: 50px;
+                        width: 50px;
+                    }
+                }
+            }
+
+            .statistiques_1 {
+                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);
+            }
+        }
+}

src/styles/index.scss

@@ -1,4 +1,6 @@
-@import "./settings.scss";
+@import "./settings";
-@import "./components/connexion.scss";
+@import "./components/connexion";
-@import "./components/admin.scss";
+@import "./components/admin";
-@import "./components/compte.scss";
+@import "./components/compte";
+@import "./components/dashboard";
+@import "./components/analyse";