Primeiro commit

2025-06-06 08:46:00 +01:00
commit cf2ac9caca
35 changed files with 4954 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@@ -0,0 +1,12 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,33 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "web-ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.9.0",
+    "bootstrap": "^5.3.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.25.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "vite": "^6.3.5"
+  }
+}
--- a/public/vite.svg
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,26 @@
+// src/App.jsx
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Navbar from './components/Navbar';  // Importa a Navbar
+import Dashboard from './pages/Dashboard';
+import Settings from './pages/Settings';
+import Security from './pages/Security';
+import Connectivity from './pages/Connectivity';
+import OCPPCommunication from './pages/OCPPCommunication';
+
+const App = () => {
+  return (
+    <Router>
+      <Navbar />  {/* Renderiza a Navbar */}
+      <Routes>
+        <Route path="/dashboard" element={<Dashboard />} />
+        <Route path="/settings" element={<Settings />} />
+        <Route path="/security" element={<Security />} />
+        <Route path="/connectivity" element={<Connectivity />} />
+        <Route path="/ocpp" element={<OCPPCommunication />} />
+      </Routes>
+    </Router>
+  );
+};
+
+export default App;
--- a/src/api.js
+++ b/src/api.js
@@ -0,0 +1,50 @@
+const API_BASE = ''; // Ex: http://192.168.4.1 ou leave empty for relative
+
+let credentials = '';
+
+export function setCredentials(user, pass) {
+  credentials = btoa(`${user}:${pass}`);
+}
+
+function getHeaders(isJson = true) {
+  const headers = {
+    Authorization: `Basic ${credentials}`,
+  };
+  if (isJson) headers['Content-Type'] = 'application/json';
+  return headers;
+}
+
+export async function get(path) {
+  const res = await fetch(`${API_BASE}${path}`, {
+    headers: getHeaders(false),
+  });
+  if (!res.ok) throw new Error(`GET ${path} failed`);
+  return await res.json();
+}
+
+export async function post(path, body) {
+  const res = await fetch(`${API_BASE}${path}`, {
+    method: 'POST',
+    headers: getHeaders(),
+    body: JSON.stringify(body),
+  });
+  if (!res.ok) throw new Error(`POST ${path} failed`);
+  return await res.text();
+}
+
+export async function postPlain(path) {
+  const res = await fetch(`${API_BASE}${path}`, {
+    method: 'POST',
+    headers: getHeaders(false),
+  });
+  if (!res.ok) throw new Error(`POST ${path} failed`);
+  return await res.text();
+}
+
+export async function fetchLogs(index = 0) {
+  const res = await fetch(`${API_BASE}/api/v1/log?index=${index}`, {
+    headers: getHeaders(false),
+  });
+  if (!res.ok) throw new Error('Failed to fetch logs');
+  return await res.text();
+}
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/components/AlertNotifications.jsx
+++ b/src/components/AlertNotifications.jsx
--- a/src/components/DashboardStatus.jsx
+++ b/src/components/DashboardStatus.jsx
@@ -0,0 +1,21 @@
+// src/components/DashboardStatus.jsx
+import React from 'react';
+
+const DashboardStatus = ({ status, chargers }) => {
+  return (
+    <div>
+      <h2>Status: {status}</h2>
+      <div>
+        {chargers.map(charger => (
+          <div key={charger.id}>
+            <p>Charger {charger.id}: {charger.status}</p>
+            <p>Current: {charger.current}A</p>
+            <p>Power: {charger.power}W</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default DashboardStatus;
--- a/src/components/LoadBalancing.jsx
+++ b/src/components/LoadBalancing.jsx
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -0,0 +1,33 @@
+// src/components/Navbar.jsx
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+const Navbar = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);  // Estado para controlar a visibilidade do menu
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);  // Alterna o estado do menu (aberto/fechado)
+  };
+
+  return (
+    <nav className="navbar">
+      <div className="navbar-container">
+        <div className="navbar-logo">
+          <h2>Carregamento</h2>
+        </div>
+        <ul className={`navbar-links ${isMenuOpen ? 'active' : ''}`}>
+          <li><Link to="/dashboard">Dashboard</Link></li>
+          <li><Link to="/settings">Settings</Link></li>
+          <li><Link to="/security">Security</Link></li>
+          <li><Link to="/connectivity">Connectivity</Link></li>
+          <li><Link to="/ocpp">OCPP Communication</Link></li>
+        </ul>
+        <button className="menu-icon" onClick={toggleMenu}>
+          &#9776; {/* Ícone do menu hamburguer */}
+        </button>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
--- a/src/components/NetworkConfig.jsx
+++ b/src/components/NetworkConfig.jsx
--- a/src/components/PageLayout.jsx
+++ b/src/components/PageLayout.jsx
@@ -0,0 +1,9 @@
+// src/components/PageLayout.jsx
+export default function PageLayout({ title, children }) {
+  return (
+    <div className="page-container">
+      <h1>{title}</h1>
+      {children}
+    </div>
+  );
+}
--- a/src/components/QuickActions.jsx
+++ b/src/components/QuickActions.jsx
--- a/src/components/SettingsControls.jsx
+++ b/src/components/SettingsControls.jsx
@@ -0,0 +1,38 @@
+// src/pages/Settings.jsx
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const Settings = () => {
+  const [settings, setSettings] = useState(null);
+
+  useEffect(() => {
+    axios.get('http://localhost:8080/api/v1/settings', {
+      headers: { 'Authorization': 'Basic YWRtaW46YWRtaW4=' }
+    })
+    .then(response => {
+      setSettings(response.data);
+    })
+    .catch(error => {
+      console.error("There was an error fetching the settings:", error);
+    });
+  }, []);
+
+  return (
+    <div>
+      <h1>Settings</h1>
+      {settings ? (
+        <div>
+          <p>Current Limit: {settings.current_limit}A</p>
+          <p>Power Limit: {settings.power_limit}W</p>
+          <p>Total Energy Limit: {settings.total_energy_limit}kWh</p>
+          <p>Network Type: {settings.network_type}</p>
+          <p>Voltage: {settings.voltage}V</p>
+        </div>
+      ) : (
+        <p>Loading...</p>
+      )}
+    </div>
+  );
+};
+
+export default Settings;
--- a/src/components/SolarEnergyMonitor.jsx
+++ b/src/components/SolarEnergyMonitor.jsx
--- a/src/components/UserAccessControl.jsx
+++ b/src/components/UserAccessControl.jsx
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,550 @@
+/* index.css */
+
+/* Resetando margens e padding */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Fonte padrão para o projeto */
+body {
+  font-family: 'Arial', sans-serif;
+  background-color: #f4f4f9;
+  color: #333;
+  line-height: 1.6;
+  font-size: 16px;  /* Garantindo um tamanho de fonte confortável */
+}
+
+/* Definindo um fundo geral para o layout */
+.container {
+  width: 90%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Estilos básicos de links */
+a {
+  text-decoration: none;
+  color: inherit; /* Cor do link será herdada do texto */
+}
+
+/* Estilos para os títulos */
+h1, h2, h3 {
+  font-weight: bold;
+  color: #333;
+}
+
+/* Estilo básico de botões */
+button {
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+button:hover {
+  background-color: #45a049;
+}
+
+/* Tabelas */
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th, td {
+  padding: 12px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+
+th {
+  background-color: #f2f2f2;
+}
+
+/* Estilo de caixas de alerta */
+.alert {
+  background-color: #f44336;
+  color: white;
+  padding: 10px;
+  margin-top: 20px;
+  border-radius: 5px;
+}
+
+/* Estilos para o Dashboard */
+.dashboard-container {
+  background-color: #fff;
+  padding: 20px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.dashboard-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+
+
+/* Estilos para Settings */
+.settings-container {
+  background-color: #ffffff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.settings-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.settings-item {
+  margin-bottom: 20px;
+}
+
+.settings-item label {
+  display: block;
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+
+.settings-item input[type="range"] {
+  width: 100%;
+  margin: 5px 0;
+}
+
+.settings-item input[type="number"] {
+  width: 100px;
+  padding: 5px;
+  font-size: 16px;
+  margin-left: 10px;
+  border-radius: 5px;
+  border: 1px solid #ddd;
+}
+
+/* Estilo do container do slider */
+.slider-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.slider-container span {
+  font-size: 16px;
+  color: #333;
+}
+
+/* Botão de salvar */
+button.save-button {
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 5px;
+  width: 100%;
+  margin-top: 20px;
+}
+
+button.save-button:hover {
+  background-color: #45a049;
+}
+
+/* Responsividade para telas pequenas */
+@media (max-width: 768px) {
+  .settings-container {
+    padding: 15px;
+  }
+
+  .settings-title {
+    font-size: 20px;
+  }
+
+  .settings-item input[type="number"] {
+    width: 70px;
+  }
+
+  button.save-button {
+    width: 100%;
+  }
+}
+
+/* Estilo para o Título */
+.settings-title {
+  font-size: 32px;  /* Tamanho maior para maior destaque */
+  font-weight: bold;
+  margin-bottom: 30px;
+  text-align: center;  /* Centralizado */
+  color: #333;
+  text-transform: uppercase;  /* Texto em maiúsculo para chamar atenção */
+}
+
+/* Ajustando os parâmetros do título no mobile */
+@media (max-width: 768px) {
+  .settings-title {
+    font-size: 28px;
+    margin-bottom: 20px;  /* Menor espaçamento em telas pequenas */
+  }
+}
+
+/* Navbar Estilo */
+.navbar {
+  background-color: #333;  /* Fundo escuro para contraste */
+  color: white;
+  padding: 15px 20px; /* Mais espaçamento para uma navegação mais confortável */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.navbar-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.navbar-logo h2 {
+  font-size: 24px;
+  font-weight: bold;
+  color: #fff;
+}
+
+.navbar-links {
+  list-style: none;
+  display: flex;
+  gap: 20px;
+}
+
+.navbar-links li {
+  display: inline-block;
+}
+
+.navbar-links a {
+  color: white;
+  text-decoration: none;
+  font-size: 18px;
+  padding: 8px 15px;
+  border-radius: 5px;
+}
+
+.navbar-links a:hover {
+  background-color: #4CAF50;
+  color: white;
+}
+
+.navbar-links a.active {
+  background-color: #45a049;
+  color: white;
+}
+
+/* Ícone do menu hamburguer para telas pequenas */
+.menu-icon {
+  display: none;
+  font-size: 30px;
+  color: white;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+/* Responsividade para telas pequenas */
+@media (max-width: 768px) {
+  .navbar-links {
+    display: none;  /* Inicialmente oculta os links */
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-top: 20px;
+  }
+
+  .navbar-links.active {
+    display: flex;  /* Exibe os links quando o menu estiver ativo */
+  }
+
+  .navbar-links li {
+    width: 100%;
+    text-align: left;
+  }
+
+  .navbar-links a {
+    padding: 10px 20px;
+    width: 100%;
+  }
+
+  /* Exibe o ícone do menu hamburguer */
+  .menu-icon {
+    display: block;
+  }
+}
+
+/* Estilos para a Página de Segurança */
+.security-container {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.security-title {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 30px;
+  text-align: center;
+  color: #333;
+}
+
+.security-item {
+  margin-bottom: 20px;
+}
+
+.security-item label {
+  display: block;
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+
+.security-item input[type="checkbox"] {
+  margin-right: 10px;
+}
+
+.security-item ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+.security-item ul li {
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+
+.security-item select {
+  margin-left: 10px;
+  padding: 5px;
+  font-size: 16px;
+  border-radius: 5px;
+  border: 1px solid #ddd;
+}
+
+button {
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+button:hover {
+  background-color: #45a049;
+}
+
+
+/* Estilos para a Página de Segurança */
+.security-container {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.security-title {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 30px;
+  text-align: center;
+  color: #333;
+}
+
+.security-item {
+  margin-bottom: 20px;
+}
+
+.security-item label {
+  display: block;
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+
+.security-item input[type="checkbox"] {
+  margin-right: 10px;
+}
+
+.auth-methods label {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.security-item select {
+  margin-left: 10px;
+  padding: 5px;
+  font-size: 16px;
+  border-radius: 5px;
+  border: 1px solid #ddd;
+}
+
+button {
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+button:hover {
+  background-color: #45a049;
+}
+
+.add-user button {
+  background-color: #2196F3; /* Cor azul para adicionar */
+}
+
+.add-user button:hover {
+  background-color: #1e88e5;
+}
+
+/* Estilos para a lista de usuários */
+.security-item ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+.security-item ul li {
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+
+.security-item button {
+  background-color: #f44336; /* Cor vermelha para remover */
+  padding: 5px 10px;
+  font-size: 14px;
+  cursor: pointer;
+  border-radius: 5px;
+  margin-left: 10px;
+}
+
+.security-item button:hover {
+  background-color: #e53935;
+}
+
+
+/* Estilos para o Dashboard */
+.dashboard-container {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  max-width: 1200px;
+  margin: 20px auto;
+}
+
+.dashboard-title {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 30px;
+  text-align: center;
+  color: #333;
+}
+
+.dashboard-summary {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.card {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  width: 30%;
+  text-align: center;
+}
+
+.card h3 {
+  font-size: 20px;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.card p {
+  font-size: 18px;
+  color: #555;
+}
+
+.alerts {
+  margin-bottom: 30px;
+}
+
+.alerts h2 {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.alert-item {
+  font-size: 16px;
+  background-color: #f44336;
+  color: white;
+  padding: 10px;
+  margin: 10px 0;
+  border-radius: 5px;
+}
+
+.chargers-table {
+  margin-top: 30px;
+}
+
+.chargers-table h2 {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th, td {
+  padding: 12px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+
+th {
+  background-color: #f2f2f2;
+}
+
+@media (max-width: 768px) {
+  .dashboard-summary {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .card {
+    width: 100%;
+  }
+
+  table {
+    font-size: 14px;
+  }
+}
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -0,0 +1,11 @@
+// src/index.js ou src/main.jsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';  // Importe o CSS unificado aqui
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
--- a/src/pages/Connectivity.jsx
+++ b/src/pages/Connectivity.jsx
@@ -0,0 +1,41 @@
+// src/pages/Connectivity.jsx
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const Connectivity = () => {
+  const [connectivity, setConnectivity] = useState(null);
+
+  useEffect(() => {
+    axios.get('http://localhost:8080/api/v1/connectivity', {
+      headers: { 'Authorization': 'Basic YWRtaW46YWRtaW4=' }
+    })
+    .then(response => {
+      setConnectivity(response.data);
+    })
+    .catch(error => {
+      console.error("There was an error fetching the connectivity data:", error);
+    });
+  }, []);
+
+  return (
+    <div>
+      <h1>Connectivity</h1>
+      {connectivity ? (
+        <div>
+          <h2>Wi-Fi</h2>
+          <p>Status: {connectivity.wifi.status}</p>
+          <p>SSID: {connectivity.wifi.ssid}</p>
+          <p>Signal Strength: {connectivity.wifi.signal_strength} dBm</p>
+          <h2>MQTT</h2>
+          <p>Status: {connectivity.mqtt.status}</p>
+          <p>Broker: {connectivity.mqtt.broker}</p>
+          <p>Port: {connectivity.mqtt.port}</p>
+        </div>
+      ) : (
+        <p>Loading...</p>
+      )}
+    </div>
+  );
+};
+
+export default Connectivity;
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -0,0 +1,78 @@
+// src/pages/Dashboard.jsx
+import React from 'react';
+
+const Dashboard = () => {
+  // Mock data (substitua pelos dados reais)
+  const mockDashboardData = {
+    status: "Ativo",
+    chargers: [
+      { id: 1, status: "Ativo", current: 12, power: 2200 },
+      { id: 2, status: "Inativo", current: 0, power: 0 },
+      { id: 3, status: "Erro", current: 0, power: 0 },
+    ],
+    energyConsumed: 50.3,
+    chargingTime: 120,
+    alerts: ["Aviso: Carregador 1 está com erro."],
+  };
+
+  return (
+    <div className="dashboard-container">
+      <h1 className="dashboard-title">Visão Geral</h1>
+
+      {/* Cards com informações resumidas */}
+      <div className="dashboard-summary">
+        <div className="card">
+          <h3>Status do Sistema</h3>
+          <p>{mockDashboardData.status}</p>
+        </div>
+        <div className="card">
+          <h3>Consumo de Energia</h3>
+          <p>{mockDashboardData.energyConsumed} kWh</p>
+        </div>
+        <div className="card">
+          <h3>Tempo de Carregamento</h3>
+          <p>{mockDashboardData.chargingTime} minutos</p>
+        </div>
+      </div>
+
+      {/* Indicadores de falhas ou alertas */}
+      <div className="alerts">
+        <h2>Alertas</h2>
+        <ul>
+          {mockDashboardData.alerts.map((alert, index) => (
+            <li key={index} className="alert-item">
+              <span>⚠️ {alert}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {/* Tabela de Carregadores */}
+      <div className="chargers-table">
+        <h2>Carregadores</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Status</th>
+              <th>Corrente (A)</th>
+              <th>Potência (W)</th>
+            </tr>
+          </thead>
+          <tbody>
+            {mockDashboardData.chargers.map((charger) => (
+              <tr key={charger.id}>
+                <td>{charger.id}</td>
+                <td>{charger.status}</td>
+                <td>{charger.current}</td>
+                <td>{charger.power}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;
--- a/src/pages/ElectricalNetwork.jsx
+++ b/src/pages/ElectricalNetwork.jsx
--- a/src/pages/LoadBalancing.jsx
+++ b/src/pages/LoadBalancing.jsx
@@ -0,0 +1,126 @@
+// src/pages/LoadBalancing.js
+
+import { useState, useEffect } from 'react';
+import { get, post } from '../api';
+import PageLayout from '../components/PageLayout';
+
+export default function LoadBalancing() {
+  const [enabled, setEnabled] = useState(false);
+  const [maxChargingCurrent, setMaxChargingCurrent] = useState(32);
+  const [devices, setDevices] = useState([]);
+  const [selectedDevices, setSelectedDevices] = useState([]);
+  const [error, setError] = useState('');
+  const [msg, setMsg] = useState('');
+
+  // Carregar configuração e dispositivos de load balancing
+  useEffect(() => {
+    const loadConfig = async () => {
+      try {
+        const data = await get('/api/v1/config/load-balancing');
+        setEnabled(data.enabled);
+        setMaxChargingCurrent(data.maxChargingCurrent);
+        setDevices(data.devices || []);  // Lista de dispositivos disponíveis para balanceamento
+      } catch {
+        setError('Erro ao carregar configuração de Load Balancing.');
+      }
+    };
+    loadConfig();
+  }, []);
+
+  // Função para salvar a configuração de load balancing
+  const saveConfig = async (e) => {
+    e.preventDefault();
+    try {
+      const config = {
+        enabled,
+        maxChargingCurrent,
+        devices: selectedDevices,
+      };
+      await post('/api/v1/config/load-balancing', config);
+      setMsg('Configuração de Load Balancing salva com sucesso!');
+    } catch {
+      setError('Erro ao salvar configuração de Load Balancing.');
+    }
+  };
+
+  // Função para gerenciar seleção de dispositivos
+  const handleDeviceChange = (e) => {
+    const { value, checked } = e.target;
+    setSelectedDevices((prev) => {
+      if (checked) {
+        return [...prev, value];
+      } else {
+        return prev.filter((device) => device !== value);
+      }
+    });
+  };
+
+  // Função para alternar o estado de Load Balancing (Ativar/Desativar)
+  const toggleLoadBalancing = async () => {
+    try {
+      await post('/api/v1/config/load-balancing/state', { enabled: !enabled });
+      setEnabled(!enabled);
+      setMsg(`Load Balancing ${!enabled ? 'ativado' : 'desativado'}`);
+    } catch {
+      setError('Erro ao alternar Load Balancing.');
+    }
+  };
+
+  return (
+    <PageLayout title="Configuração de Load Balancing">
+      {msg && <div className="message success">{msg}</div>}
+      {error && <div className="message error">{error}</div>}
+
+      <form className="form" onSubmit={saveConfig}>
+        {/* Controle de Ativação/Desativação */}
+        <div className="form-group">
+          <label>
+            <input
+              type="checkbox"
+              checked={enabled}
+              onChange={toggleLoadBalancing}
+            />
+            Ativar Load Balancing
+          </label>
+        </div>
+
+        {/* Configuração de Corrente Máxima */}
+        <div className="form-group">
+          <label htmlFor="maxChargingCurrent">
+            Corrente Máxima para Balanceamento (A):
+          </label>
+          <input
+            id="maxChargingCurrent"
+            type="number"
+            value={maxChargingCurrent}
+            min="1"
+            max="32"
+            onChange={(e) => setMaxChargingCurrent(e.target.value)}
+          />
+        </div>
+
+        {/* Seleção de Dispositivos */}
+        <div className="form-group">
+          <label>Dispositivos a Balancear:</label>
+          {devices.map((device) => (
+            <div key={device.id}>
+              <label>
+                <input
+                  type="checkbox"
+                  value={device.id}
+                  checked={selectedDevices.includes(device.id)}
+                  onChange={handleDeviceChange}
+                />
+                {device.name}
+              </label>
+            </div>
+          ))}
+        </div>
+
+        <div className="button-grid">
+          <button type="submit">Salvar Configuração</button>
+        </div>
+      </form>
+    </PageLayout>
+  );
+}
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import PageLayout from '../components/PageLayout';
+
+export default function Login({ setAuthData }) {
+  const [user, setUser] = useState('');
+  const [pass, setPass] = useState('');
+  const [error, setError] = useState('');
+
+  const submit = (e) => {
+    e.preventDefault();
+    if (!user || !pass) {
+      setError('Preencha ambos os campos.');
+    } else {
+      setError('');
+      setAuthData({ user, pass });
+    }
+  };
+
+  return (
+    <PageLayout title="Início de Sessão">
+      {error && <div className="message error">{error}</div>}
+
+      <form className="form" onSubmit={submit}>
+        <div className="form-group">
+          <label htmlFor="user">Utilizador:</label>
+          <input
+            id="user"
+            type="text"
+            value={user}
+            onChange={e => setUser(e.target.value)}
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="pass">Palavra-passe:</label>
+          <input
+            id="pass"
+            type="password"
+            value={pass}
+            onChange={e => setPass(e.target.value)}
+          />
+        </div>
+
+        <div className="button-grid">
+          <button type="submit">Entrar</button>
+        </div>
+      </form>
+    </PageLayout>
+  );
+}
--- a/src/pages/Logs.jsx
+++ b/src/pages/Logs.jsx
@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import { fetchLogs } from '../api';
+import PageLayout from '../components/PageLayout';
+
+export default function Logs() {
+  const [logs, setLogs] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  const loadLogs = async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const data = await fetchLogs();
+      setLogs(data);
+    } catch {
+      setError('Erro ao carregar logs.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadLogs();
+  }, []);
+
+  return (
+    <PageLayout title="Registos do Sistema">
+      {error && <div className="message error">{error}</div>}
+
+      {loading ? (
+        <p>A carregar...</p>
+      ) : (
+        <pre className="log-box">{logs || 'Sem dados.'}</pre>
+      )}
+    </PageLayout>
+  );
+}
--- a/src/pages/Mqtt.jsx
+++ b/src/pages/Mqtt.jsx
@@ -0,0 +1,114 @@
+import { useEffect, useState } from 'react';
+import { get, post } from '../api';
+import PageLayout from '../components/PageLayout';
+
+export default function Mqtt() {
+  const [config, setConfig] = useState({
+    enabled: false,
+    host: '',
+    port: 1883,
+    username: '',
+    password: '',
+    topic: '',
+  });
+
+  const [msg, setMsg] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    get('/api/v1/config/mqtt')
+      .then(setConfig)
+      .catch(() => setError('Erro ao carregar configuração MQTT.'))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const save = async () => {
+    setMsg('');
+    setError('');
+    try {
+      await post('/api/v1/config/mqtt', config);
+      setMsg('Configuração gravada com sucesso!');
+    } catch {
+      setError('Erro ao gravar configuração.');
+    }
+  };
+
+  return (
+    <PageLayout title="Configuração MQTT">
+      {msg && <div className="message success">{msg}</div>}
+      {error && <div className="message error">{error}</div>}
+
+      {loading ? (
+        <p>A carregar...</p>
+      ) : (
+        <form className="form" onSubmit={e => { e.preventDefault(); save(); }}>
+          <div className="form-group">
+            <label>
+              <input
+                type="checkbox"
+                checked={config.enabled}
+                onChange={e => setConfig({ ...config, enabled: e.target.checked })}
+              />
+              Ativar MQTT
+            </label>
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="host">Host:</label>
+            <input
+              id="host"
+              type="text"
+              value={config.host}
+              onChange={e => setConfig({ ...config, host: e.target.value })}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="port">Porta:</label>
+            <input
+              id="port"
+              type="number"
+              value={config.port}
+              onChange={e => setConfig({ ...config, port: parseInt(e.target.value || 0) })}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="username">Utilizador:</label>
+            <input
+              id="username"
+              type="text"
+              value={config.username}
+              onChange={e => setConfig({ ...config, username: e.target.value })}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="password">Palavra-passe:</label>
+            <input
+              id="password"
+              type="password"
+              value={config.password}
+              onChange={e => setConfig({ ...config, password: e.target.value })}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="topic">Tópico:</label>
+            <input
+              id="topic"
+              type="text"
+              value={config.topic}
+              onChange={e => setConfig({ ...config, topic: e.target.value })}
+            />
+          </div>
+
+          <div className="button-grid">
+            <button type="submit">Guardar</button>
+          </div>
+        </form>
+      )}
+    </PageLayout>
+  );
+}
--- a/src/pages/OCPPCommunication.jsx
+++ b/src/pages/OCPPCommunication.jsx
@@ -0,0 +1,37 @@
+// src/pages/OCPPCommunication.jsx
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const OCPPCommunication = () => {
+  const [ocppData, setOcppData] = useState(null);
+
+  useEffect(() => {
+    axios.get('http://localhost:8080/api/v1/ocpp', {
+      headers: { 'Authorization': 'Basic YWRtaW46YWRtaW4=' }
+    })
+    .then(response => {
+      setOcppData(response.data);
+    })
+    .catch(error => {
+      console.error("There was an error fetching the OCPP data:", error);
+    });
+  }, []);
+
+  return (
+    <div>
+      <h1>OCPP Communication</h1>
+      {ocppData ? (
+        <div>
+          <p>OCPP Version: {ocppData.ocpp_version}</p>
+          <p>OCPP URL: {ocppData.ocpp_url}</p>
+          <p>OCPP ID: {ocppData.ocpp_id}</p>
+          <p>Status: {ocppData.status}</p>
+        </div>
+      ) : (
+        <p>Loading...</p>
+      )}
+    </div>
+  );
+};
+
+export default OCPPCommunication;
--- a/src/pages/Security.jsx
+++ b/src/pages/Security.jsx
@@ -0,0 +1,116 @@
+// src/pages/Security.jsx
+import React, { useState } from 'react';
+
+const Security = () => {
+  // Estado para armazenar se MFA está habilitado e os métodos de autenticação
+  const [isMFAEnabled, setIsMFAEnabled] = useState(false);
+  const [authMethods, setAuthMethods] = useState({
+    RFID: false,
+    App: false,
+    Password: true,
+  });
+  const [users, setUsers] = useState([
+    { username: 'admin', role: 'Administrator' },
+    { username: 'user1', role: 'User' },
+  ]);
+
+  const handleMFAChange = (e) => {
+    setIsMFAEnabled(e.target.checked);
+  };
+
+  const handleAuthMethodChange = (method) => {
+    setAuthMethods({
+      ...authMethods,
+      [method]: !authMethods[method],
+    });
+  };
+
+  const handleUserRoleChange = (username, newRole) => {
+    setUsers(users.map((user) =>
+      user.username === username ? { ...user, role: newRole } : user
+    ));
+  };
+
+  const addUser = (username, role) => {
+    setUsers([...users, { username, role }]);
+  };
+
+  const removeUser = (username) => {
+    setUsers(users.filter((user) => user.username !== username));
+  };
+
+  return (
+    <div className="security-container">
+      <h1 className="security-title">Segurança e Autorização</h1>
+
+      {/* MFA Checkbox */}
+      <div className="security-item">
+        <label>
+          <input
+            type="checkbox"
+            checked={isMFAEnabled}
+            onChange={handleMFAChange}
+          />
+          Ativar Autenticação Multifatorial (MFA)
+        </label>
+      </div>
+
+      {/* Métodos de Autorização */}
+      <div className="security-item">
+        <h2>Métodos de Autorização</h2>
+        <div className="auth-methods">
+          <label>
+            <input
+              type="checkbox"
+              checked={authMethods.RFID}
+              onChange={() => handleAuthMethodChange('RFID')}
+            />
+            RFID
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              checked={authMethods.App}
+              onChange={() => handleAuthMethodChange('App')}
+            />
+            Aplicativo
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              checked={authMethods.Password}
+              onChange={() => handleAuthMethodChange('Password')}
+            />
+            Senha
+          </label>
+        </div>
+      </div>
+
+      {/* Usuários */}
+      <div className="security-item">
+        <h2>Usuários</h2>
+        <ul>
+          {users.map((user, index) => (
+            <li key={index}>
+              <span>{user.username} - {user.role}</span>
+              <select
+                value={user.role}
+                onChange={(e) => handleUserRoleChange(user.username, e.target.value)}
+              >
+                <option value="Administrator">Administrador</option>
+                <option value="User">Usuário</option>
+                <option value="Maintenance">Manutenção</option>
+              </select>
+              <button onClick={() => removeUser(user.username)}>Remover</button>
+            </li>
+          ))}
+        </ul>
+        <div className="add-user">
+          <button onClick={() => addUser('newuser', 'User')}>Adicionar Novo Usuário</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Security;
--- a/src/pages/Settings.jsx
+++ b/src/pages/Settings.jsx
@@ -0,0 +1,90 @@
+// src/pages/Settings.jsx
+import React, { useState } from 'react';
+
+const Settings = () => {
+  // Estados para armazenar os valores dos sliders e caixas de entrada
+  const [currentLimit, setCurrentLimit] = useState(32);
+  const [powerLimit, setPowerLimit] = useState(0);
+  const [energyLimit, setEnergyLimit] = useState(0);
+  const [chargingTimeLimit, setChargingTimeLimit] = useState(0);
+  const [temperatureLimit, setTemperatureLimit] = useState(60);
+
+  const handleCurrentLimitChange = (e) => setCurrentLimit(e.target.value);
+  const handlePowerLimitChange = (e) => setPowerLimit(e.target.value);
+  const handleEnergyLimitChange = (e) => setEnergyLimit(e.target.value);
+  const handleChargingTimeLimitChange = (e) => setChargingTimeLimit(e.target.value);
+  const handleTemperatureLimitChange = (e) => setTemperatureLimit(e.target.value);
+
+  return (
+    <div className="settings-container">
+      <h1 className="settings-title">Configurações Gerais</h1>
+
+      <div className="settings-item">
+        <label>Corrente Máxima de Carregamento (A):</label>
+        <div className="slider-container">
+          <input 
+            type="range" 
+            min="5" 
+            max="32" 
+            value={currentLimit} 
+            onChange={handleCurrentLimitChange} 
+          />
+          <span>{currentLimit} A</span>
+        </div>
+      </div>
+
+      <div className="settings-item">
+        <label>Limite de Potência Máxima (W):</label>
+        <div className="slider-container">
+          <input 
+            type="range" 
+            min="1000" 
+            max="10000" 
+            value={powerLimit} 
+            onChange={handlePowerLimitChange} 
+          />
+          <span>{powerLimit} W</span>
+        </div>
+      </div>
+
+      <div className="settings-item">
+        <label>Limite de Consumo Total de Energia (kWh):</label>
+        <input 
+          type="number" 
+          min="0" 
+          value={energyLimit} 
+          onChange={handleEnergyLimitChange} 
+        />
+      </div>
+
+      <div className="settings-item">
+        <label>Limite de Tempo de Carregamento (h):</label>
+        <input 
+          type="number" 
+          min="1" 
+          max="24"
+          value={chargingTimeLimit} 
+          onChange={handleChargingTimeLimitChange} 
+        />
+      </div>
+
+      <div className="settings-item">
+        <label>Limite de Temperatura Máxima do EVSE (ºC):</label>
+        <div className="slider-container">
+          <input 
+            type="range" 
+            min="60" 
+            max="80" 
+            value={temperatureLimit} 
+            onChange={handleTemperatureLimitChange} 
+          />
+          <span>{temperatureLimit} ºC</span>
+        </div>
+      </div>
+
+      <button className="save-button">Salvar Configurações</button>
+    </div>
+  );
+};
+
+export default Settings;
--- a/src/pages/Wifi.jsx
+++ b/src/pages/Wifi.jsx
@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+import { get, post } from '../api';
+import PageLayout from '../components/PageLayout';
+
+export default function Wifi() {
+  const [config, setConfig] = useState({ ssid: '', password: '' });
+  const [networks, setNetworks] = useState([]);
+  const [msg, setMsg] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadConfig();
+    scanNetworks();
+  }, []);
+
+  const loadConfig = async () => {
+    try {
+      const data = await get('/api/v1/config/wifi');
+      setConfig(data);
+    } catch {
+      setMsg('Erro ao carregar configuração.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const scanNetworks = async () => {
+    try {
+      const result = await get('/api/v1/config/wifi/scan');
+      setNetworks(result.networks || []);
+    } catch {
+      setMsg('Erro ao procurar redes Wi-Fi.');
+    }
+  };
+
+  const save = async () => {
+    try {
+      await post('/api/v1/config/wifi', config);
+      setMsg('Configuração gravada com sucesso!');
+    } catch {
+      setMsg('Erro ao gravar.');
+    }
+  };
+
+  return (
+    <PageLayout title="Configuração Wi-Fi">
+      {msg && <div className="message">{msg}</div>}
+
+      {loading ? (
+        <p>A carregar...</p>
+      ) : (
+        <form className="form" onSubmit={(e) => { e.preventDefault(); save(); }}>
+          <div className="form-group">
+            <label htmlFor="ssid">SSID:</label>
+            <select
+              id="ssid"
+              value={config.ssid}
+              onChange={e => setConfig({ ...config, ssid: e.target.value })}
+            >
+              <option value="">-- Escolher --</option>
+              {networks.map(n => (
+                <option key={n.ssid} value={n.ssid}>{n.ssid}</option>
+              ))}
+            </select>
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="password">Palavra-passe:</label>
+            <input
+              id="password"
+              type="password"
+              value={config.password}
+              onChange={e => setConfig({ ...config, password: e.target.value })}
+            />
+          </div>
+
+          <div className="button-grid">
+            <button type="submit">Guardar</button>
+          </div>
+        </form>
+      )}
+    </PageLayout>
+  );
+}
--- a/testserver.py
+++ b/testserver.py
@@ -0,0 +1,178 @@
+from flask import Flask, request, jsonify
+from flask_cors import CORS  # Adicionando suporte ao CORS
+
+app = Flask(__name__)
+
+# Habilitando CORS para aceitar requisições de origens diferentes
+CORS(app, resources={r"/api/*": {"origins": "http://localhost:5173"}})  # Ajuste para seu frontend
+
+# Dados de exemplo
+MOCK_STATE = {
+    "connected": True,
+    "charging": False,
+    "power": 0,
+    "session_time": 0,
+    "energy": 0.0
+}
+
+MOCK_INFO = {
+    "version": "1.0.0-mock",
+    "board": "esp32-mock",
+    "uptime": 12345,
+    "buildTime": "2025-06-05 23:00",
+    "id": "MOCK-123456"
+}
+
+MOCK_LOGS = [
+    "[1] System start...",
+    "[2] Connected to WiFi",
+    "[3] Ready."
+]
+
+MOCK_DASHBOARD = {
+    "status": "Active",
+    "chargers": [
+        {"id": 1, "status": "Active", "current": 12, "power": 2200},
+        {"id": 2, "status": "Inactive", "current": 0, "power": 0},
+        {"id": 3, "status": "Error", "current": 0, "power": 0}
+    ],
+    "energy_consumed": 50.3,
+    "charging_time": 120,
+    "alerts": ["Warning: Charger 1 in error state."]
+}
+
+MOCK_SETTINGS = {
+    "current_limit": 32,
+    "power_limit": 0,
+    "total_energy_limit": 0,
+    "charging_time_limit": 0,
+    "network_type": "Model A",
+    "voltage": 220,
+    "frequency": 60,
+    "temperature_limit": 60,
+    "current_network": {
+        "status": "Connected",
+        "ip": "192.168.1.100",
+        "mac": "00:14:22:01:23:45"
+    }
+}
+
+MOCK_SECURITY = {
+    "authentication_methods": ["RFID", "App", "Password"],
+    "security_mode": "Enabled",
+    "users": [
+        {"username": "admin", "role": "Administrator"},
+        {"username": "user1", "role": "User"}
+    ],
+    "mfa_enabled": True
+}
+
+MOCK_CONNECTIVITY = {
+    "wifi": {
+        "status": "Connected",
+        "ssid": "EV_Charging_Network",
+        "signal_strength": -45
+    },
+    "mqtt": {
+        "status": "Connected",
+        "broker": "mqtt://broker.example.com",
+        "port": 1883
+    }
+}
+
+MOCK_OCPP = {
+    "ocpp_version": "2.0",
+    "ocpp_url": "http://ocppserver.example.com",
+    "ocpp_id": "MOCK-123456",
+    "status": "Active"
+}
+
+# Autenticação básica (admin:admin)
+def check_auth():
+    auth = request.headers.get("Authorization", "")
+    return auth == "Basic YWRtaW46YWRtaW4="  # base64 of admin:admin
+
+# Função para atualizar os logs
+def add_log(log_message):
+    MOCK_LOGS.append(f"[{len(MOCK_LOGS) + 1}] {log_message}")
+
+# Definindo as rotas da API
+@app.route('/api/v1/info', methods=['GET'])
+def get_info():
+    if not check_auth():
+        return jsonify({"message": "Unauthorized"}), 401
+    return jsonify(MOCK_INFO)
+
+@app.route('/api/v1/state', methods=['GET'])
+def get_state():
+    if not check_auth():
+        return jsonify({"message": "Unauthorized"}), 401
+    return jsonify(MOCK_STATE)
+
+@app.route('/api/v1/dashboard', methods=['GET'])
+def get_dashboard():
+    if not check_auth():
+        return jsonify({"message": "Unauthorized"}), 401
+    return jsonify(MOCK_DASHBOARD)
+
+@app.route('/api/v1/settings', methods=['GET'])
+def get_settings():
+    if not check_auth():
+        return jsonify({"message": "Unauthorized"}), 401
+    return jsonify(MOCK_SETTINGS)
+
+@app.route('/api/v1/security', methods=['GET'])
+def get_security():
+    if not check_auth():
+        return jsonify({"message": "Unauthorized"}), 401
+    return jsonify(MOCK_SECURITY)
+
+@app.route('/api/v1/connectivity', methods=['GET'])
+def get_connectivity():
+    if not check_auth():
+        return jsonify({"message": "Unauthorized"}), 401
+    return jsonify(MOCK_CONNECTIVITY)
+
+@app.route('/api/v1/ocpp', methods=['GET'])
+def get_ocpp():
+    if not check_auth():
+        return jsonify({"message": "Unauthorized"}), 401
+    return jsonify(MOCK_OCPP)
+
+@app.route('/api/v1/log', methods=['GET'])
+def get_logs():
+    if not check_auth():
+        return jsonify({"message": "Unauthorized"}), 401
+    return jsonify(MOCK_LOGS), 200, {"X-Count": str(len(MOCK_LOGS))}
+
+@app.route('/api/v1/state/<cmd>', methods=['POST'])
+def post_command(cmd):
+    if not check_auth():
+        return jsonify({"message": "Unauthorized"}), 401
+    
+    if cmd == "start":
+        if MOCK_STATE["charging"]:
+            return jsonify({"message": "Already charging."}), 400
+        MOCK_STATE["charging"] = True
+        MOCK_STATE["power"] = 1500  # Exemplo de potência de carregamento em watts
+        add_log("Charging started.")
+        return jsonify({"message": "Charging started."}), 200
+    elif cmd == "stop":
+        if not MOCK_STATE["charging"]:
+            return jsonify({"message": "Not charging."}), 400
+        MOCK_STATE["charging"] = False
+        MOCK_STATE["power"] = 0
+        add_log("Charging stopped.")
+        return jsonify({"message": "Charging stopped."}), 200
+    elif cmd == "reset":
+        MOCK_STATE["charging"] = False
+        MOCK_STATE["power"] = 0
+        MOCK_STATE["session_time"] = 0
+        MOCK_STATE["energy"] = 0.0
+        add_log("System reset.")
+        return jsonify({"message": "System reset."}), 200
+    else:
+        return jsonify({"message": "Unknown command."}), 400
+
+if __name__ == '__main__':
+    app.run(port=8080)
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173, // ou outro, se necessário
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:8080',
+        changeOrigin: true,
+        secure: false
+      }
+    }
+  }
+});
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>