creativetimofficial · phgnguyndo · Jul 4, 2025 · Jul 5, 2025 · Jul 11, 2025 · Jul 27, 2025
diff --git a/.env b/.env
@@ -1 +1,2 @@
-GENERATE_SOURCEMAP=false
+GENERATE_SOURCEMAP=false
+REACT_APP_API_BASE_URL=http://192.168.11.132:5000
diff --git a/package.json b/package.json
@@ -45,25 +45,30 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "6.5.1",
     "ajv": "^8.16.0",
+    "axios": "^1.10.0",
     "bootstrap": "4.6.2",
     "chart.js": "2.9.4",
     "classnames": "2.3.2",
+    "js-cookie": "^3.0.5",
     "moment": "2.29.4",
     "nouislider": "15.4.0",
     "react": "18.2.0",
     "react-chartjs-2": "2.11.2",
     "react-copy-to-clipboard": "5.1.0",
     "react-datetime": "3.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^5.5.0",
     "react-router-dom": "6.21.1",
     "react-scripts": "5.0.1",
+    "react-toastify": "^11.0.5",
     "reactstrap": "8.10.0",
-    "sass": "1.69.5"
+    "sass": "1.69.5",
+    "socket.io-client": "^4.8.1"
   },
   "devDependencies": {
+    "cross-env": "^7.0.3",
     "gulp": "4.0.2",
-    "gulp-append-prepend": "1.0.9",
-    "cross-env": "^7.0.3"
+    "gulp-append-prepend": "1.0.9"
   },
   "optionalDependencies": {
     "eslint-plugin-flowtype": "8.0.3",

diff --git a/public/index.html b/public/index.html
@@ -1,23 +1,3 @@
-<!--
-/*!
-
-=========================================================
-* Argon Dashboard React - v1.2.4
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/argon-dashboard-react
-* Copyright 2024 Creative Tim (https://www.creative-tim.com)
-* Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
-
-* Coded by Creative Tim
-
-=========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-*/
--->
-
 <!DOCTYPE html>
 <html lang="en" class="perfect-scrollbar-off nav-open">
   <head>
@@ -43,7 +23,7 @@
       href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
       rel="stylesheet"
     />
-    <title>Argon Dashboard React by Creative Tim</title>
+    <title>System monitor</title>
     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE"></script>
   </head>
   <body>

diff --git a/src/api/authApi.js b/src/api/authApi.js
@@ -0,0 +1,53 @@
+import axiosInstance from './axios';
+
+// API đăng nhập
+export const login = async (username, password) => {
+  return await axiosInstance.post('/api/auth/login', {
+    username,
+    password,
+  });
+};
+
+// API lấy thông tin người dùng hiện tại
+export const getCurrentUser = async () => {
+  return await axiosInstance.get('/api/auth/me');
+};
+
+// API đăng xuất
+export const logout = async () => {
+  return await axiosInstance.post('/api/auth/logout');
+};
+
+// // API upload file pcap
+// export const uploadPcap = async (file) => {
+//   const formData = new FormData();
+//   formData.append('file', file);
+//   return await axiosInstance.post('/api/upload/pcap', formData, {
+//     headers: {
+//       'Content-Type': 'multipart/form-data',
+//     },
+//   });
+// };
+
+// API upload file pcap
+export const uploadPcap = async (file) => {
+  const formData = new FormData();
+  formData.append('file', file);
+  try {
+    const response = await axiosInstance.post('/api/upload/pcap', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      timeout: 0, // Loại bỏ giới hạn timeout, để server tự xử lý
+    });
+    return response;
+  } catch (error) {
+    console.error('Upload error:', {
+      message: error.message,
+      code: error.code,
+      response: error.response ? error.response.data : 'No response',
+      request: error.request ? 'Request sent but no response' : 'Request failed',
+    });
+    throw error; // Ném lỗi để client xử lý
+  }
+};
diff --git a/src/api/axios.js b/src/api/axios.js
@@ -0,0 +1,37 @@
+import axios from 'axios';
+import Cookies from 'js-cookie';
+
+const axiosInstance = axios.create({
+  baseURL: process.env.REACT_APP_API_BASE_URL,
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Interceptor cho request
+axiosInstance.interceptors.request.use(
+  (config) => {
+    const token = Cookies.get('access_token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+// Interceptor cho response
+axiosInstance.interceptors.response.use(
+  (response) => response.data,
+  (error) => {
+    if (error.response?.status === 401) {
+      Cookies.remove('access_token');
+      localStorage.removeItem('user');
+      window.location.href = '/auth/login';
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default axiosInstance;
diff --git a/src/assets/css/argon-dashboard-react.css b/src/assets/css/argon-dashboard-react.css
diff --git a/src/assets/css/argon-dashboard-react.min.css b/src/assets/css/argon-dashboard-react.min.css
@@ -3734,7 +3734,7 @@ input[type="button"].btn-block {
   ~ .custom-control-label::before {
   border-color: #5e72e4;
   background-color: #5e72e4;
-  box-shadow: ;
+  /* box-shadow: ; */
 }
 .custom-checkbox
   .custom-control-input:indeterminate
@@ -15963,7 +15963,7 @@ textarea[resize="horizontal"] {
 .navbar-vertical .navbar-brand-img,
 .navbar-vertical .navbar-brand > img {
   max-width: 100%;
-  max-height: 2rem;
+  max-height: 5rem;
 }
 @media (min-width: 768px) {
   .navbar-vertical .navbar-collapse {
@@ -16211,7 +16211,7 @@ textarea[resize="horizontal"] {
     padding-bottom: 1rem;
   }
   .navbar-vertical.navbar-expand-sm .navbar-brand-img {
-    max-height: 2.5rem;
+    max-height: 5rem;
   }
   .navbar-vertical.navbar-expand-sm .navbar-user {
     margin-left: -1.5rem;
@@ -16305,7 +16305,7 @@ textarea[resize="horizontal"] {
     padding-bottom: 1rem;
   }
   .navbar-vertical.navbar-expand-md .navbar-brand-img {
-    max-height: 2.5rem;
+    max-height: 5rem;
   }
   .navbar-vertical.navbar-expand-md .navbar-user {
     margin-left: -1.5rem;
@@ -16399,7 +16399,7 @@ textarea[resize="horizontal"] {
     padding-bottom: 1rem;
   }
   .navbar-vertical.navbar-expand-lg .navbar-brand-img {
-    max-height: 2.5rem;
+    max-height: 5rem;
   }
   .navbar-vertical.navbar-expand-lg .navbar-user {
     margin-left: -1.5rem;
@@ -16493,7 +16493,7 @@ textarea[resize="horizontal"] {
     padding-bottom: 1rem;
   }
   .navbar-vertical.navbar-expand-xl .navbar-brand-img {
-    max-height: 2.5rem;
+    max-height: 5rem;
   }
   .navbar-vertical.navbar-expand-xl .navbar-user {
     margin-left: -1.5rem;

diff --git a/src/assets/img/brand/download.png b/src/assets/img/brand/download.png
diff --git a/src/assets/img/brand/logo1.png b/src/assets/img/brand/logo1.png
diff --git a/src/assets/scss/argon-dashboard/custom/_content.scss b/src/assets/scss/argon-dashboard/custom/_content.scss
@@ -45,3 +45,10 @@
         }
     }
 }
+
+.main-content.sidebar-collapsed {
+  @media (min-width: 768px) {
+    margin-left: 60px !important;
+    transition: margin-left 0.2s;
+  }
+}
diff --git a/src/assets/scss/argon-dashboard/custom/navbars/_navbar-vertical.scss b/src/assets/scss/argon-dashboard/custom/navbars/_navbar-vertical.scss
@@ -32,7 +32,7 @@
     .navbar-brand-img,
     .navbar-brand > img {
         max-width: 100%;
-        max-height: 2rem;
+        max-height: 5rem;
     }
 
 
@@ -260,7 +260,7 @@
                     }
 
                     .navbar-brand-img {
-                        max-height: 2.5rem;
+                        max-height: 5rem;
                     }
 
                     // Navbar user
@@ -284,3 +284,70 @@
         }
     }
 }
+
+.navbar-vertical {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  z-index: 1030;
+  background: $navbar-light-bg;
+  box-shadow: $navbar-vertical-box-shadow;
+  border-radius: 0;
+  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: width, transform;
+}
+
+.navbar-vertical.sidebar-collapsed {
+  max-width: 60px !important;
+  min-width: 60px !important;
+  width: 60px !important;
+  border-radius: 0;
+  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  .navbar-brand-img,
+  .navbar-brand > img {
+    width: 32px !important;
+    max-height: 500px !important;
+    margin: 0 auto;
+    display: block;
+    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .nav-link span,
+  .navbar-brand span {
+    display: none !important;
+  }
+  .nav-link {
+    text-align: center;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    min-width: 60px;
+    justify-content: center;
+    transition: background 0.2s, color 0.2s, width 0.35s;
+  }
+}
+
+.navbar-vertical.hide-sidebar {
+  transform: translateX(-100%);
+}
+
+.navbar-vertical.show-sidebar {
+  transform: translateX(0);
+}
+
+.navbar-vertical .nav-link {
+  color: inherit;
+  border-radius: 0;
+  margin: 0;
+  background: none;
+  box-shadow: none;
+  transition: background 0.2s, color 0.2s;
+  &:hover {
+    background: $navbar-light-hover-bg;
+    color: $navbar-light-hover-color;
+  }
+  &.active, &.active:focus {
+    background: $navbar-light-active-bg;
+    color: $navbar-light-active-color;
+    box-shadow: none;
+  }
+}