Merge pull request #7 from PlxEV/codex/melhorar-e-uniformizar-estilo-das-páginas

Improve consistent layout

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">
+    <PageLayout title="Visão Geral">
-      <h1 className="text-2xl font-bold mb-5">Visão Geral</h1>
 
       {/* 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">
+    <PageLayout title="Segurança">
-      <h1 className="text-2xl font-bold mb-5 text-center">Segurança</h1>
 
       {/* 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,6 +47,7 @@ const Settings = () => {
       temperatureLimit,
     };
 
+    try {
       const response = await fetch('/api/v1/config/settings', {
         method: 'POST',
         headers: {
@@ -52,61 +57,81 @@ const Settings = () => {
       });
 
       if (response.ok) {
-      alert('Configurações de energia atualizadas com sucesso!');
+        setMsg('Configurações de energia atualizadas com sucesso!');
       } else {
-      alert('Erro ao atualizar configurações');
+        setError('Erro ao atualizar configurações');
+      }
+    } catch {
+      setError('Erro ao atualizar configurações');
     }
   };
 
   return (
+    <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>
+          <label className="block mb-1" htmlFor="currentLimit">Limite de Corrente (A):</label>
-        Current Limit:
           <input
+            id="currentLimit"
             type="number"
+            className="border border-gray-300 rounded px-3 py-2 w-full"
             value={currentLimit}
             onChange={handleCurrentLimitChange}
           />
-      </label>
+        </div>
-      <br />
+
-      <label>
+        <div>
-        Power Limit:
+          <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}
           />
-      </label>
+        </div>
-      <br />
+
-      <label>
+        <div>
-        Energy Limit:
+          <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}
           />
-      </label>
+        </div>
-      <br />
+
-      <label>
+        <div>
-        Charging Time Limit:
+          <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}
           />
-      </label>
+        </div>
-      <br />
+
-      <label>
+        <div>
-        Temperature Limit:
+          <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}
           />
-      </label>
-      <br />
-      <button onClick={handleSubmit}>Save Settings</button>
         </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>
   );
 };