Uniformizar layout das páginas

src/pages/Dashboard.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import PageLayout from '../components/PageLayout';
 
 const Dashboard = () => {
   // Estados para armazenar os dados do dashboard
@@ -34,8 +35,7 @@ const Dashboard = () => {
   }, []);
 
   return (
-    <div className="max-w-3xl mx-auto p-5">
-      <h1 className="text-2xl font-bold mb-5">Visão Geral</h1>
+    <PageLayout title="Visão Geral">
 
       {/* Cards com informações resumidas */}
       <div className="flex flex-wrap gap-4 mb-6">
@@ -89,7 +89,7 @@ const Dashboard = () => {
           </tbody>
         </table>
       </div>
-    </div>
+    </PageLayout>
   );
 };
 

src/pages/Security.jsx

@@ -1,5 +1,6 @@
 // src/pages/Security.jsx
 import React, { useState } from 'react';
+import PageLayout from '../components/PageLayout';
 
 const Security = () => {
   // Estado para armazenar se MFA está habilitado e os métodos de autenticação
@@ -31,8 +32,7 @@ const Security = () => {
   };
 
   return (
-    <div className="max-w-xl mx-auto p-5 bg-white rounded shadow">
-      <h1 className="text-2xl font-bold mb-5 text-center">Segurança</h1>
+    <PageLayout title="Segurança">
 
       {/* Métodos de Autorização */}
       <div className="mb-5">
@@ -94,7 +94,7 @@ const Security = () => {
 
 
 
-    </div>
+    </PageLayout>
   );
 };
 

src/pages/Settings.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import PageLayout from '../components/PageLayout';
 
 const Settings = () => {
   // Estados para armazenar os valores dos sliders e caixas de entrada
@@ -7,6 +8,8 @@ const Settings = () => {
   const [energyLimit, setEnergyLimit] = useState(0);
   const [chargingTimeLimit, setChargingTimeLimit] = useState(0);
   const [temperatureLimit, setTemperatureLimit] = useState(60);
+  const [msg, setMsg] = useState('');
+  const [error, setError] = useState('');
 
   // Função para preencher os campos com os dados do servidor
   const fetchSettings = async () => {
@@ -34,7 +37,8 @@ const Settings = () => {
   const handleChargingTimeLimitChange = (e) => setChargingTimeLimit(e.target.value);
   const handleTemperatureLimitChange = (e) => setTemperatureLimit(e.target.value);
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (e) => {
+    e.preventDefault();
     const settingsData = {
       currentLimit,
       powerLimit,
@@ -43,70 +47,91 @@ const Settings = () => {
       temperatureLimit,
     };
 
-    const response = await fetch('/api/v1/config/settings', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(settingsData),
-    });
+    try {
+      const response = await fetch('/api/v1/config/settings', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(settingsData),
+      });
 
-    if (response.ok) {
-      alert('Configurações de energia atualizadas com sucesso!');
-    } else {
-      alert('Erro ao atualizar configurações');
+      if (response.ok) {
+        setMsg('Configurações de energia atualizadas com sucesso!');
+      } else {
+        setError('Erro ao atualizar configurações');
+      }
+    } catch {
+      setError('Erro ao atualizar configurações');
     }
   };
 
   return (
-    <div>
-      <label>
-        Current Limit:
-        <input
-          type="number"
-          value={currentLimit}
-          onChange={handleCurrentLimitChange}
-        />
-      </label>
-      <br />
-      <label>
-        Power Limit:
-        <input
-          type="number"
-          value={powerLimit}
-          onChange={handlePowerLimitChange}
-        />
-      </label>
-      <br />
-      <label>
-        Energy Limit:
-        <input
-          type="number"
-          value={energyLimit}
-          onChange={handleEnergyLimitChange}
-        />
-      </label>
-      <br />
-      <label>
-        Charging Time Limit:
-        <input
-          type="number"
-          value={chargingTimeLimit}
-          onChange={handleChargingTimeLimitChange}
-        />
-      </label>
-      <br />
-      <label>
-        Temperature Limit:
-        <input
-          type="number"
-          value={temperatureLimit}
-          onChange={handleTemperatureLimitChange}
-        />
-      </label>
-      <br />
-      <button onClick={handleSubmit}>Save Settings</button>
-    </div>
+    <PageLayout title="Definições de Energia">
+      {msg && <div className="p-2 mb-2 bg-green-600 text-white rounded">{msg}</div>}
+      {error && <div className="p-2 mb-2 bg-red-600 text-white rounded">{error}</div>}
+
+      <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
+        <div>
+          <label className="block mb-1" htmlFor="currentLimit">Limite de Corrente (A):</label>
+          <input
+            id="currentLimit"
+            type="number"
+            className="border border-gray-300 rounded px-3 py-2 w-full"
+            value={currentLimit}
+            onChange={handleCurrentLimitChange}
+          />
+        </div>
+
+        <div>
+          <label className="block mb-1" htmlFor="powerLimit">Limite de Potência (W):</label>
+          <input
+            id="powerLimit"
+            type="number"
+            className="border border-gray-300 rounded px-3 py-2 w-full"
+            value={powerLimit}
+            onChange={handlePowerLimitChange}
+          />
+        </div>
+
+        <div>
+          <label className="block mb-1" htmlFor="energyLimit">Limite de Energia (kWh):</label>
+          <input
+            id="energyLimit"
+            type="number"
+            className="border border-gray-300 rounded px-3 py-2 w-full"
+            value={energyLimit}
+            onChange={handleEnergyLimitChange}
+          />
+        </div>
+
+        <div>
+          <label className="block mb-1" htmlFor="chargingTimeLimit">Tempo Máximo de Carregamento (min):</label>
+          <input
+            id="chargingTimeLimit"
+            type="number"
+            className="border border-gray-300 rounded px-3 py-2 w-full"
+            value={chargingTimeLimit}
+            onChange={handleChargingTimeLimitChange}
+          />
+        </div>
+
+        <div>
+          <label className="block mb-1" htmlFor="temperatureLimit">Temperatura Máxima (°C):</label>
+          <input
+            id="temperatureLimit"
+            type="number"
+            className="border border-gray-300 rounded px-3 py-2 w-full"
+            value={temperatureLimit}
+            onChange={handleTemperatureLimitChange}
+          />
+        </div>
+
+        <div>
+          <button className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700" type="submit">Guardar</button>
+        </div>
+      </form>
+    </PageLayout>
   );
 };