Primeiro commit

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;

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();
+}

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>

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;

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;

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>
+  );
+}

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;

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;
+  }
+}

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>
+);

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;

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;

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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;

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;

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;

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>
+  );
+}