100 lines
3.2 KiB
JavaScript
Executable File
100 lines
3.2 KiB
JavaScript
Executable File
import React, { useState, useEffect } from 'react';
|
||
import PageLayout from '../components/PageLayout';
|
||
import Alert from '../components/Alert';
|
||
|
||
const Dashboard = () => {
|
||
// Estados para armazenar os dados do dashboard
|
||
const [dashboardData, setDashboardData] = useState({
|
||
status: "Ativo",
|
||
chargers: [
|
||
{ id: 3, status: "Erro", current: 0, power: 0 },
|
||
],
|
||
energyConsumed: 0,
|
||
chargingTime: 0,
|
||
alerts: [],
|
||
});
|
||
const [error, setError] = useState('');
|
||
|
||
// 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 {
|
||
setError('Erro ao obter os dados do dashboard');
|
||
}
|
||
} catch (error) {
|
||
console.error('Erro ao buscar dados do dashboard:', error);
|
||
setError('Erro de conexão');
|
||
}
|
||
};
|
||
|
||
// Chamar a função fetchDashboardData quando o componente for montado
|
||
useEffect(() => {
|
||
fetchDashboardData();
|
||
}, []);
|
||
|
||
return (
|
||
<PageLayout title="Visão Geral">
|
||
{error && <Alert type="error">{error}</Alert>}
|
||
|
||
{/* Cards com informações resumidas */}
|
||
<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>{dashboardData.status}</p>
|
||
</div>
|
||
<div className="bg-white p-4 rounded shadow flex-1 min-w-[150px]">
|
||
<h3>Consumo de Energia</h3>
|
||
<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>{dashboardData.chargingTime} minutos</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Indicadores de falhas ou alertas */}
|
||
<div className="mb-6">
|
||
<h2 className="text-xl font-semibold mb-2">Alertas</h2>
|
||
<ul>
|
||
{dashboardData.alerts.map((alert, index) => (
|
||
<li key={index} className="p-2 bg-red-500 text-white rounded mb-2">
|
||
<span>⚠️ {alert}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Tabela de Carregadores */}
|
||
<div>
|
||
<h2 className="text-xl font-semibold mb-2">Carregadores</h2>
|
||
<table className="min-w-full border border-gray-300 text-left">
|
||
<thead>
|
||
<tr>
|
||
<th className="border-b p-2">ID</th>
|
||
<th className="border-b p-2">Status</th>
|
||
<th className="border-b p-2">Corrente (A)</th>
|
||
<th className="border-b p-2">Potência (W)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{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>
|
||
<td className="border-b p-2">{charger.current}</td>
|
||
<td className="border-b p-2">{charger.power}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</PageLayout>
|
||
);
|
||
};
|
||
|
||
export default Dashboard;
|