add get and post methods

src/pages/Dashboard.jsx

@@ -1,20 +1,38 @@
-// src/pages/Dashboard.jsx
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
 const Dashboard = () => {
-  // Mock data (substitua pelos dados reais)
-  const mockDashboardData = {
+  // Estados para armazenar os dados do dashboard
+  const [dashboardData, setDashboardData] = useState({
     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."],
+    energyConsumed: 0,
+    chargingTime: 0,
+    alerts: [],
+  });
+
+  // Função para obter os dados do dashboard
+  const fetchDashboardData = async () => {
+    try {
+      const response = await fetch('/api/v1/dashboard');
+      if (response.ok) {
+        const data = await response.json();
+        setDashboardData(data); // Atualiza o estado com os dados recebidos
+      } else {
+        alert('Erro ao obter os dados do dashboard');
+      }
+    } catch (error) {
+      console.error('Erro ao buscar dados do dashboard:', error);
+      alert('Erro de conexão');
+    }
   };
 
+  // Chamar a função fetchDashboardData quando o componente for montado
+  useEffect(() => {
+    fetchDashboardData();
+  }, []);
+
   return (
     <div className="max-w-3xl mx-auto p-5">
       <h1 className="text-2xl font-bold mb-5">Visão Geral</h1>
@@ -23,15 +41,15 @@ const Dashboard = () => {
       <div className="flex flex-wrap gap-4 mb-6">
         <div className="bg-white p-4 rounded shadow flex-1 min-w-[150px]">
           <h3>Status do Sistema</h3>
-          <p>{mockDashboardData.status}</p>
+          <p>{dashboardData.status}</p>
         </div>
         <div className="bg-white p-4 rounded shadow flex-1 min-w-[150px]">
           <h3>Consumo de Energia</h3>
-          <p>{mockDashboardData.energyConsumed} kWh</p>
+          <p>{dashboardData.energyConsumed} kWh</p>
         </div>
         <div className="bg-white p-4 rounded shadow flex-1 min-w-[150px]">
           <h3>Tempo de Carregamento</h3>
-          <p>{mockDashboardData.chargingTime} minutos</p>
+          <p>{dashboardData.chargingTime} minutos</p>
         </div>
       </div>
 
@@ -39,7 +57,7 @@ const Dashboard = () => {
       <div className="mb-6">
         <h2 className="text-xl font-semibold mb-2">Alertas</h2>
         <ul>
-          {mockDashboardData.alerts.map((alert, index) => (
+          {dashboardData.alerts.map((alert, index) => (
             <li key={index} className="p-2 bg-red-500 text-white rounded mb-2">
               <span>⚠️ {alert}</span>
             </li>
@@ -60,7 +78,7 @@ const Dashboard = () => {
             </tr>
           </thead>
           <tbody>
-            {mockDashboardData.chargers.map((charger) => (
+            {dashboardData.chargers.map((charger) => (
               <tr key={charger.id}>
                 <td className="border-b p-2">{charger.id}</td>
                 <td className="border-b p-2">{charger.status}</td>