diff --git a/.gitignore b/.gitignore
old mode 100644
new mode 100755
index 6c1eb92..53e18cd
--- a/.gitignore
+++ b/.gitignore
@@ -404,3 +404,7 @@ FodyWeavers.xsd
# JetBrains Rider
*.sln.iml
+
+node_modules/
+dist/
+
diff --git a/Chargers copy.jsx b/Chargers copy.jsx
new file mode 100644
index 0000000..4d302c7
--- /dev/null
+++ b/Chargers copy.jsx
@@ -0,0 +1,178 @@
+import React, { useState, useEffect } from 'react';
+import { Plus, Loader2, X, Trash2 } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useNavigate } from 'react-router-dom';
+
+export default function ChargersPage() {
+ const [chargers, setChargers] = useState([]);
+ const [selectedCharger, setSelectedCharger] = useState(null);
+ const [deletingId, setDeletingId] = useState(null);
+ const [showAdd, setShowAdd] = useState(false);
+ const navigate = useNavigate();
+
+ // Carregar os carregadores ao montar o componente
+ useEffect(() => {
+ async function fetchChargers() {
+ try {
+ const res = await fetch('/api/chargers');
+ const json = await res.json();
+ if (res.ok) {
+ setChargers(json.data || []);
+ } else {
+ throw new Error('Falha ao carregar carregadores');
+ }
+ } catch (err) {
+ console.error(err.message);
+ }
+ }
+ fetchChargers();
+ }, []);
+
+ const handleOpenAdd = () => setShowAdd(true);
+ const handleCloseAdd = () => setShowAdd(false);
+
+ const handleSelect = (id) => {
+ setSelectedCharger(id); // Atualiza o carregador selecionado
+ navigate(`/charger/${id}`); // Navega para a página do carregador
+ };
+
+ const handleDelete = async (id) => {
+ if (window.confirm('Excluir este carregador? Esta ação não pode ser desfeita.')) {
+ setDeletingId(id);
+ try {
+ const res = await fetch(`/api/chargers/${id}`, { method: 'DELETE' });
+ if (res.ok) {
+ setChargers((prevChargers) => prevChargers.filter(c => c.id !== id));
+ } else {
+ throw new Error('Erro ao excluir carregador');
+ }
+ } catch (err) {
+ console.error('Erro ao deletar carregador', err);
+ } finally {
+ setDeletingId(null);
+ }
+ }
+ };
+
+ return (
+
+
+
Meus Carregadores
+
+
+
+ {chargers.length > 0 ? (
+ chargers.map((charger) => (
+
handleSelect(charger.id)}
+ >
+
+
+
+ {charger.nome}
+
+ Código: {charger.codigoEmparelhamento}
+ Local: {charger.local}
+ Última atividade: {charger.ultimaAtividade}
+
+ ))
+ ) : (
+
Nenhum carregador encontrado
+ )}
+
+
+ {showAdd && }
+
+
Novo Carregador
+
+
+
+ );
+}
diff --git a/Dashboard copy.jsx b/Dashboard copy.jsx
new file mode 100644
index 0000000..c7d4e0f
--- /dev/null
+++ b/Dashboard copy.jsx
@@ -0,0 +1,281 @@
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import {
+ Play,
+ Square,
+ Zap,
+ BatteryCharging,
+ Clock,
+ Activity,
+ Loader2,
+ ArrowLeft,
+} from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { SectionCard } from '@/components/ui/SectionCard';
+import { getAuthHeader } from '@/utils/apiAuthHeader';
+import { useToast } from '@/components/ToastContext';
+
+export default function ChargerDashboard() {
+ const { chargerId } = useParams(); // Obter o chargerId da URL
+ const [dados, setDados] = useState(null);
+ const [ampLimit, setAmpLimit] = useState(6);
+ const [maxAmps, setMaxAmps] = useState(32);
+ const [error, setError] = useState('');
+ const [loading, setLoading] = useState(true);
+ const [busy, setBusy] = useState(false);
+ const navigate = useNavigate();
+ const showToast = useToast();
+
+ // Buscar status do carregador
+ useEffect(() => {
+ if (!chargerId) {
+ setError("Carregador não encontrado!");
+ setLoading(false);
+ return;
+ }
+
+ let cancelado = false;
+ async function fetchStatus() {
+ setLoading(true);
+ setError('');
+ try {
+ const res = await fetch(`/api/chargers/${chargerId}/status`, {
+ headers: getAuthHeader(),
+ });
+ const json = await res.json();
+ if (!res.ok || !json.success) throw new Error(json.message || 'Erro ao obter status');
+ if (!cancelado) {
+ setDados(json.data);
+ setAmpLimit(json.data.ampLimit ?? 6);
+ setMaxAmps(json.data.maxAmps ?? 32);
+ }
+ } catch (err) {
+ if (!cancelado) setError(err.message || 'Falha ao buscar status');
+ } finally {
+ if (!cancelado) setLoading(false);
+ }
+ }
+ fetchStatus();
+ const interval = setInterval(fetchStatus, 8000);
+ return () => {
+ cancelado = true;
+ clearInterval(interval);
+ };
+ }, [chargerId]); // Atualizar a requisição sempre que o chargerId mudar
+
+ // Enviar comandos (iniciar/parar carregamento)
+ async function handleAction(action) {
+ if (!chargerId) return; // Adicionar verificação extra para chargerId
+
+ setBusy(true);
+ try {
+ const res = await fetch(`/api/chargers/${chargerId}/${action}`, {
+ method: 'POST',
+ headers: {
+ ...getAuthHeader(),
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ ampLimit }),
+ });
+ const json = await res.json();
+ if (!res.ok || !json.success) throw new Error(json.message || 'Erro ao enviar comando');
+ setDados(json.data);
+ showToast(
+ action === 'start' ? 'Carregamento iniciado' : 'Carregamento parado',
+ 'success'
+ );
+ setError('');
+ } catch (err) {
+ setError(err.message);
+ showToast(err.message, 'error');
+ } finally {
+ setBusy(false);
+ }
+ }
+
+ return (
+
+
+
}
+ >
+ {error && (
+
+ {error}
+
+ )}
+
+ {(loading || busy) ? (
+
+
+
+ {busy ? 'Enviando comando...' : 'Carregando status...'}
+
+
+ ) : (
+ dados && (
+ <>
+ {/* Potência em destaque */}
+
+
+ 7
+ ? 'border-yellow-400 opacity-60'
+ : 'border-blue-200 opacity-30'}`}
+ />
+
7
+ ? 'border-yellow-500'
+ : 'border-blue-600'}
+ flex flex-col items-center justify-center text-blue-700`}
+ >
+ 7
+ ? 'text-yellow-500'
+ : 'text-blue-600'
+ }`}
+ >
+
+
+
+ {dados.currentPower} kW
+
+
+ Potência
+
+
+
+
+
+ {/* Informações detalhadas */}
+
+ }
+ label="Estado"
+ value={dados.status}
+ valueClass="text-blue-600"
+ />
+ }
+ label="Tempo de carregamento"
+ value={dados.timeRemaining}
+ />
+ }
+ label="Potência"
+ value={
+
+ {dados.potenciaAtual} kW
+
+ }
+ />
+ }
+ label="Modo"
+ value={dados.modo?.toUpperCase()}
+ valueClass="text-indigo-600 font-bold"
+ />
+
+
+ {/* Slider para Amperagem */}
+
+
+
setAmpLimit(Number(e.target.value))}
+ className="w-full accent-blue-600"
+ aria-valuenow={ampLimit}
+ aria-valuemin={6}
+ aria-valuemax={maxAmps}
+ disabled={busy}
+ />
+
+ 6 A
+ {maxAmps} A
+
+
+
+ {/* Botões */}
+
+
handleAction('start')}
+ className="bg-green-600 hover:bg-green-700 text-white px-5 py-2 rounded-xl shadow font-medium transition flex items-center gap-2 active:scale-95 focus:outline-none focus:ring-2 focus:ring-green-400"
+ disabled={busy}
+ aria-label="Iniciar carregamento"
+ >
+ Iniciar
+
+
handleAction('stop')}
+ className="bg-red-500 hover:bg-red-600 text-white px-5 py-2 rounded-xl shadow font-medium transition flex items-center gap-2 active:scale-95 focus:outline-none focus:ring-2 focus:ring-red-400"
+ disabled={busy}
+ aria-label="Parar carregamento"
+ >
+ Parar
+
+
+
+ )
+ )}
+
+
+
+ {icon}
+ {label}
+
+
+ {value}
+
+
+ Loading...
+
+);
+
+const ChargersPage = lazy(() => import('./pages/ChargersPage'));
+const ChargerDashboardPage = lazy(() => import('./pages/ChargerDashboardPage'));
+const HistoryPage = lazy(() => import('./pages/HistoryPage'));
+const SettingsPage = lazy(() => import('./pages/SettingsPage'));
+const LoginPage = lazy(() => import('./pages/LoginPage'));
+
+const container = document.getElementById('root');
+if (!container) throw new Error('Root element not found');
+
+const root = createRoot(container);
+root.render(
+
+ {/* ✅ Coloque BrowserRouter primeiro */}
+ {/* ✅ Agora dentro de BrowserRouter */}
+
+
+ }>
+
+ } />
+
+
+
+
+ }
+ >
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
+ } />
+
+
+ 404
+ Page not found
+ Go back home
+
+
+
+
+
+ );
+}
+
+export default AppLayout;
+
+// === Fim de: ./src/App.jsx ===
+
+
+// === Início de: ./src/hooks/useChargers.js ===
+// src/hooks/useChargers.js
+import { useEffect, useState } from "react";
+import { getAuthHeader } from "@/utils/apiAuthHeader";
+
+export function useChargers() {
+ const [chargers, setChargers] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState("");
+
+ useEffect(() => {
+ setLoading(true);
+ fetch("/api/chargers", {
+ headers: getAuthHeader(),
+ })
+ .then(res => {
+ if (!res.ok) throw new Error("Erro ao buscar carregadores");
+ return res.json();
+ })
+ .then(json => {
+ setChargers(json.data || []);
+ setError("");
+ })
+ .catch(() => setError("Falha ao carregar carregadores"))
+ .finally(() => setLoading(false));
+ }, []);
+
+ return { chargers, setChargers, loading, error };
+}
+
+// === Fim de: ./src/hooks/useChargers.js ===
+
+
+// === Início de: ./src/hooks/useSchedules.js ===
+// src/hooks/useSchedules.js
+import { useState, useEffect } from 'react';
+import { getAuthHeader } from '@/utils/apiAuthHeader';
+
+// Agora recebe chargerId!
+export function useSchedules(chargerId) {
+ const [schedules, setSchedules] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState('');
+
+ useEffect(() => {
+ if (!chargerId) return; // Só busca se houver carregador selecionado
+ setLoading(true);
+ fetch(`/api/chargers/${chargerId}/schedule`, {
+ headers: getAuthHeader(),
+ })
+ .then(res => {
+ if (res.status === 401 || res.status === 403) {
+ setError('Sessão expirada. Faça login novamente.');
+ return { data: [] };
+ }
+ return res.json();
+ })
+ .then(json => {
+ setSchedules(json.data || []);
+ setError('');
+ })
+ .catch(() => setError('Falha ao carregar agendamentos'))
+ .finally(() => setLoading(false));
+ }, [chargerId]); // <-- Atualiza quando o chargerId mudar
+
+ return { schedules, setSchedules, loading, error };
+}
+
+// === Fim de: ./src/hooks/useSchedules.js ===
+
+
+// === Início de: ./src/hooks/useChargerStatus.js ===
+
+// === Fim de: ./src/hooks/useChargerStatus.js ===
+
+
+// === Início de: ./src/hooks/useApi.js ===
+// src/hooks/useApi.js
+import { useState } from 'react';
+import { getAuthHeader } from '@/utils/apiAuthHeader';
+
+export default function useApi() {
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState('');
+
+ const request = async (url, options = {}) => {
+ setLoading(true);
+ setError('');
+
+ try {
+ const res = await fetch(url, {
+ ...options,
+ headers: {
+ ...getAuthHeader(),
+ ...(options.headers || {})
+ },
+ });
+
+ if (res.status === 401 || res.status === 403) {
+ setError('Sessão expirada. Faça login novamente.');
+ throw new Error('Sessão expirada');
+ }
+
+ const data = await res.json();
+
+ if (!res.ok) throw new Error(data.message || 'Erro na API');
+ return data;
+ } catch (err) {
+ setError(err.message);
+ throw err;
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return { request, loading, error };
+}
+
+// === Fim de: ./src/hooks/useApi.js ===
+
+
+// === Início de: ./src/hooks/useCharger.js ===
+// src/hooks/useCharger.js
+
+import { useState, useEffect } from 'react';
+import { getAuthHeader } from '@/utils/apiAuthHeader';
+
+export function useCharger(chargerId) {
+ const [chargerData, setChargerData] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState('');
+
+ useEffect(() => {
+ if (!chargerId) return;
+
+ const fetchCharger = async () => {
+ setLoading(true);
+ try {
+ const res = await fetch(`/api/chargers/${chargerId}/status`, {
+ headers: getAuthHeader(),
+ });
+
+ if (!res.ok) throw new Error('Failed to fetch charger data');
+
+ const json = await res.json();
+ setChargerData(json.data);
+ setError('');
+ } catch (err) {
+ setError(err.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchCharger();
+ }, [chargerId]);
+
+ return { chargerData, loading, error };
+}
+
+// === Fim de: ./src/hooks/useCharger.js ===
+
+
+// === Início de: ./src/hooks/useHistory.js ===
+// src/hooks/useHistory.js
+import { useState, useEffect } from 'react';
+import { getAuthHeader } from '@/utils/apiAuthHeader';
+
+// Agora recebe chargerId!
+export function useHistory(chargerId) {
+ const [histories, setHistory] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState('');
+
+ useEffect(() => {
+ if (!chargerId) return; // Só busca se houver carregador selecionado
+ setLoading(true);
+ fetch(`/api/chargers/${chargerId}/history`, {
+ headers: getAuthHeader(),
+ })
+ .then(res => {
+ if (res.status === 401 || res.status === 403) {
+ setError('Sessão expirada. Faça login novamente.');
+ return { data: [] };
+ }
+ return res.json();
+ })
+ .then(json => {
+ setHistory(json.data || []);
+ setError('');
+ })
+ .catch(() => setError('Falha ao carregar agendamentos'))
+ .finally(() => setLoading(false));
+ }, [chargerId]); // <-- Atualiza quando o chargerId mudar
+
+ return { histories, setHistory, loading, error };
+}
+
+// === Fim de: ./src/hooks/useHistory.js ===
+
+
+// === Início de: ./src/utils/apiAuthHeader.js ===
+export function getAuthHeader() {
+ if (typeof window === 'undefined') return {};
+ const token = window.localStorage?.getItem('token');
+ return token ? { Authorization: `Bearer ${token}` } : {};
+}
+
+// === Fim de: ./src/utils/apiAuthHeader.js ===
+
+
+// === Início de: ./src/utils/apiFetch.js ===
+// utils/apiFetch.js
+import { getAuthHeader } from './apiAuthHeader';
+
+export async function apiFetch(url, options = {}) {
+ const res = await fetch(url, {
+ ...options,
+ headers: {
+ ...getAuthHeader(),
+ ...(options.headers || {}),
+ },
+ });
+
+ const json = await res.json();
+ if (!res.ok || !json.success) {
+ throw new Error(json.message || 'Erro na requisição');
+ }
+ return json.data;
+}
+
+// === Fim de: ./src/utils/apiFetch.js ===
+
+
+// === Início de: ./src/components/ProtectedRoute.jsx ===
+import { useAuth } from '@/contexts/AuthContext';
+import { Navigate, useLocation } from 'react-router-dom';
+
+// Uso:
+export default function ProtectedRoute({ children }) {
+ const { isAuthenticated } = useAuth();
+ const location = useLocation();
+
+ if (!isAuthenticated) {
+ // redireciona para /login, guardando a rota atual para possível redirect pós-login
+ return ;
+ }
+
+ return children;
+}
+
+// === Fim de: ./src/components/ProtectedRoute.jsx ===
+
+
+// === Início de: ./src/components/BottomNav.jsx ===
+import { Link, useMatch, useResolvedPath } from 'react-router-dom';
+import { Zap, Calendar, Settings, BatteryCharging } from 'lucide-react';
+import { motion } from 'framer-motion';
+
+const tabs = [
+ { label: 'Carregador', to: '/dashboard', icon: Zap },
+ { label: 'Histórico', to: '/history', icon: Calendar },
+ { label: 'Configuração', to: '/settings', icon: Settings },
+ { label: 'Carregadores', to: '/', icon: BatteryCharging },
+];
+
+export default function BottomNav() {
+ return (
+
+ {tabs.map(({ label, to, icon: Icon }) => {
+ const resolved = useResolvedPath(to);
+ const match = useMatch({ path: resolved.pathname, end: true });
+
+ return (
+
+
+
+
+
+ {label}
+
+
+ );
+ })}
+
+ );
+}
+
+// === Fim de: ./src/components/BottomNav.jsx ===
+
+
+// === Início de: ./src/components/ToastContext.jsx ===
+// src/components/ToastContext.jsx
+import { createContext, useContext, useState } from 'react';
+
+const ToastContext = createContext();
+
+export function ToastProvider({ children }) {
+ const [toast, setToast] = useState(null);
+
+ function showToast(message, type = 'success') {
+ setToast({ message, type });
+ setTimeout(() => setToast(null), 2500);
+ }
+
+ return (
+
+ {children}
+ {toast && (
+
+ {toast.message}
+
+ )}
+
+ );
+}
+
+export function useToast() {
+ return useContext(ToastContext);
+}
+
+// === Fim de: ./src/components/ToastContext.jsx ===
+
+
+// === Início de: ./src/components/ui/SectionCard.jsx ===
+// src/components/ui/SectionCard.jsx
+import { motion } from 'framer-motion';
+
+export function SectionCard({ title, icon, children }) {
+ return (
+
+
+ {icon &&
{icon}
}
+
{title}
+
+ {children}
+
+
+ );
+}
+
+// === Fim de: ./src/components/ui/SectionCard.jsx ===
+
+
+// === Início de: ./src/pages/ChargersPage.jsx ===
+// src/pages/ChargersPage.jsx
+import React, { useState } from 'react';
+import { Plus, Loader2, X, Trash2 } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useChargersContext } from '@/contexts/ChargersContext';
+import { useToast } from '@/components/ToastContext';
+
+export default function ChargersPage() {
+ const { chargers, selectedCharger, selectChargerById, fetchChargers, loading, error } = useChargersContext();
+ const [deletingId, setDeletingId] = useState(null);
+ const [showAdd, setShowAdd] = useState(false);
+ const toast = useToast();
+
+ const handleOpenAdd = () => setShowAdd(true);
+ const handleCloseAdd = () => setShowAdd(false);
+
+ const handleSelect = (charger) => {
+ selectChargerById(charger.id);
+ };
+
+ const handleDelete = async (id) => {
+ if (!window.confirm('Are you sure you want to delete this charger? This action cannot be undone.')) return;
+ setDeletingId(id);
+ try {
+ const res = await fetch(`/api/chargers/${id}`, { method: 'DELETE' });
+ if (!res.ok) throw new Error('Failed to delete charger');
+ toast('Charger deleted', 'success');
+ await fetchChargers();
+ } catch (err) {
+ console.error(err);
+ toast(err.message, 'error');
+ } finally {
+ setDeletingId(null);
+ }
+ };
+
+ if (loading) {
+ return (
+
+
+
+ );
+ }
+
+ if (error) {
+ return {error}
;
+ }
+
+ return (
+
+
+
My Chargers
+
+
+
+ {chargers.length > 0 ? (
+ chargers.map((charger) => (
+
handleSelect(charger)}
+ >
+
+
+
+ {charger.name}
+
+
+ Pairing code: {charger.pairingCode}
+
+ Location: {charger.location}
+ Last activity: {charger.lastActivity}
+
+ ))
+ ) : (
+
No chargers found
+ )}
+
+
+ {showAdd && }
+
+
New Charger
+
+
+
+ );
+}
+
+// === Fim de: ./src/pages/ChargersPage.jsx ===
+
+
+// === Início de: ./src/pages/HistoryPage.jsx ===
+// src/pages/HistoryPage.jsx
+import React, { useState, useEffect } from 'react';
+import { History } from 'lucide-react';
+import { SectionCard } from '@/components/ui/SectionCard';
+import { useHistory } from '@/hooks/useHistory';
+import { useChargersContext } from '@/contexts/ChargersContext';
+import {
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ Tooltip,
+ ResponsiveContainer,
+ ReferenceLine,
+} from 'recharts';
+
+export default function HistoryPage() {
+ const { selectedCharger } = useChargersContext();
+ const chargerId = selectedCharger?.id;
+ const { histories, loading, error } = useHistory(chargerId);
+
+ // History/demo state
+ const [viewMode, setViewMode] = useState('Week');
+ const [chartData] = useState([
+ { day: 'Mon', kwh: 12 },
+ { day: 'Tue', kwh: 15 },
+ { day: 'Wed', kwh: 13 },
+ { day: 'Thu', kwh: 0 },
+ { day: 'Fri', kwh: 14 },
+ { day: 'Sat', kwh: 18 },
+ { day: 'Sun', kwh: 12 },
+ ]);
+ const [sessions] = useState([
+ { date: '27 Oct', time: '19:30', kwh: 12, duration: '2h 03m', cost: '€2,40' },
+ { date: '25 Oct', time: '07:15', kwh: 8, duration: '1h 20m', cost: '€1,60' },
+ ]);
+
+ const totalKwh = chartData.reduce((sum, d) => sum + d.kwh, 0).toFixed(2);
+ const totalCost = (totalKwh * 0.2).toFixed(2);
+
+ return (
+
+ {/* === Histórico === */}
+
}>
+
+ {['Week', 'Month', 'Year'].map(mode => (
+
+ ))}
+
+
+
+
Total energy
+
{totalKwh} kWh
+
Spent €{totalCost}
+
+
+
+
+
+
+
+ `${val} kWh`} />
+ s + d.kwh, 0) / chartData.length} stroke="#999" strokeDasharray="3 3" />
+
+
+
+
+
+
+
+ 23 – 29 Oct 2023
+
+
+
+
+ Recent sessions
+
+
+
+ {sessions.map((s, i) => (
+ -
+
+
{s.date} · {s.time}
+
{s.kwh} kWh · {s.duration}
+
{s.cost}
+
+ ))}
+
+
+
+
}
+ >
+ {error && (
+
+ {error}
+
+ )}
+
+ {loading || busy ? (
+
+
+
+ {busy ? 'Sending command...' : 'Loading status...'}
+
+
+ ) : (
+ chargerData && (
+ <>
+
+
+ 7
+ ? 'border-yellow-400 opacity-60'
+ : 'border-blue-200 opacity-30'
+ }`}
+ />
+
7
+ ? 'border-yellow-500'
+ : 'border-blue-600'
+ } flex flex-col items-center justify-center text-blue-700`}
+ >
+ 7 ? 'text-yellow-500' : 'text-blue-600'
+ }`}
+ >
+
+
+
+ {chargerData.currentPower} kW
+
+
+ Power
+
+
+
+
+
+
+ }
+ label="Status"
+ value={chargerData.status}
+ />
+ }
+ label="Time Remaining"
+ value={chargerData.timeRemaining}
+ />
+ }
+ label="Power"
+ value={{chargerData.currentPower} kW}
+ />
+ }
+ label="Mode"
+ value={chargerData.mode?.toUpperCase()}
+ />
+
+
+
+
+
setAmpLimit(Number(e.target.value))}
+ className="w-full accent-blue-600"
+ disabled={busy}
+ />
+
+ 6 A
+ {maxAmps} A
+
+
+
+
+
handleAction('start')}
+ disabled={busy}
+ className="bg-green-600 hover:bg-green-700 text-white px-5 py-2 rounded-xl shadow font-medium flex items-center gap-2"
+ >
+ Start
+
+
handleAction('stop')}
+ disabled={busy}
+ className="bg-red-500 hover:bg-red-600 text-white px-5 py-2 rounded-xl shadow font-medium flex items-center gap-2"
+ >
+ Stop
+
+
+
+ )
+ )}
+
+
+
+ {icon}
+ {label}
+
+
{value}
+
+ {/* Agendamentos */}
+
}>
+
+ {loading ?
Carregando...
: error ?
{error}
: (
+
+ {schedules.length === 0 ? (
+ - Nenhum agendamento
+ ) : (
+ schedules.map((item, i) => (
+ -
+ {item.startTime} — {item.targetPercentage}%
+
+ ))
+ )}
+
+ )}
+
+
+ {/* Settings */}
+
}>
+
+
+
+ setEnergyRate(parseFloat(e.target.value))}
+ className="w-full border px-4 py-2 rounded-lg focus:ring-2 focus:ring-blue-500"
+ />
+
+
+
+ setBatteryCapacity(parseInt(e.target.value))}
+ className="w-full border px-4 py-2 rounded-lg focus:ring-2 focus:ring-blue-500"
+ />
+
+
+
+ setChargeLimit(Math.min(100, Math.max(1, parseInt(e.target.value))))}
+ className="w-full border px-4 py-2 rounded-lg focus:ring-2 focus:ring-blue-500"
+ />
+
+
+
+
+
+
+
+
+ {loadingDiag ? : 'Run Diagnostic'}
+
+
+
Logout
+
+
+
+
+
+
+
+ );
+}
+
+export default AppLayout;
diff --git a/src/assets/react.svg b/src/assets/react.svg
new file mode 100755
index 0000000..6c87de9
--- /dev/null
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/BottomNav.jsx b/src/components/BottomNav.jsx
new file mode 100644
index 0000000..d6ad8a5
--- /dev/null
+++ b/src/components/BottomNav.jsx
@@ -0,0 +1,58 @@
+import { Link, useMatch, useResolvedPath } from 'react-router-dom';
+import { Zap, Calendar, Settings, BatteryCharging } from 'lucide-react';
+import { motion } from 'framer-motion';
+
+const tabs = [
+ { label: 'Carregador', to: '/dashboard', icon: Zap },
+ { label: 'Histórico', to: '/history', icon: Calendar },
+ { label: 'Configuração', to: '/settings', icon: Settings },
+ { label: 'Carregadores', to: '/', icon: BatteryCharging },
+];
+
+export default function BottomNav() {
+ return (
+
+ {tabs.map(({ label, to, icon: Icon }) => {
+ const resolved = useResolvedPath(to);
+ const match = useMatch({ path: resolved.pathname, end: true });
+
+ return (
+
+
+
+
+
+ {label}
+
+
+ );
+ })}
+
+ );
+}
diff --git a/src/components/ProtectedRoute.jsx b/src/components/ProtectedRoute.jsx
new file mode 100644
index 0000000..c543742
--- /dev/null
+++ b/src/components/ProtectedRoute.jsx
@@ -0,0 +1,15 @@
+import { useAuth } from '@/contexts/AuthContext';
+import { Navigate, useLocation } from 'react-router-dom';
+
+// Uso:
+export default function ProtectedRoute({ children }) {
+ const { isAuthenticated } = useAuth();
+ const location = useLocation();
+
+ if (!isAuthenticated) {
+ // redireciona para /login, guardando a rota atual para possível redirect pós-login
+ return ;
+ }
+
+ return children;
+}
diff --git a/src/components/ToastContext.jsx b/src/components/ToastContext.jsx
new file mode 100644
index 0000000..568b380
--- /dev/null
+++ b/src/components/ToastContext.jsx
@@ -0,0 +1,28 @@
+// src/components/ToastContext.jsx
+import { createContext, useContext, useState } from 'react';
+
+const ToastContext = createContext();
+
+export function ToastProvider({ children }) {
+ const [toast, setToast] = useState(null);
+
+ function showToast(message, type = 'success') {
+ setToast({ message, type });
+ setTimeout(() => setToast(null), 2500);
+ }
+
+ return (
+
+ {children}
+ {toast && (
+
+ {toast.message}
+
+ )}
+
+ );
+}
+
+export function useToast() {
+ return useContext(ToastContext);
+}
diff --git a/src/components/ui/SectionCard.jsx b/src/components/ui/SectionCard.jsx
new file mode 100644
index 0000000..6e87272
--- /dev/null
+++ b/src/components/ui/SectionCard.jsx
@@ -0,0 +1,21 @@
+// src/components/ui/SectionCard.jsx
+import { motion } from 'framer-motion';
+
+export function SectionCard({ title, icon, children }) {
+ return (
+
+
+ {icon &&
{icon}
}
+
{title}
+
+ {children}
+
+
+ );
+}
diff --git a/src/contexts/AuthContext.jsx b/src/contexts/AuthContext.jsx
new file mode 100644
index 0000000..e5b7f75
--- /dev/null
+++ b/src/contexts/AuthContext.jsx
@@ -0,0 +1,83 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+// Utilitário para decodificar JWT sem biblioteca externa
+function parseJwt(token) {
+ try {
+ return JSON.parse(atob(token.split('.')[1]));
+ } catch {
+ return null;
+ }
+}
+
+const AuthContext = createContext();
+
+export function AuthProvider({ children }) {
+ const navigate = useNavigate();
+ const [token, setToken] = useState(() => localStorage.getItem('token') || '');
+ const [user, setUser] = useState(() => {
+ const stored = localStorage.getItem('token');
+ return stored ? parseJwt(stored) : null;
+ });
+
+ useEffect(() => {
+ if (!token) return;
+
+ const payload = parseJwt(token);
+ if (!payload) {
+ logout();
+ return;
+ }
+
+ setUser(payload);
+
+ // Expiração do token
+ const expiresAt = payload.exp * 1000;
+ const now = Date.now();
+ const timeout = expiresAt - now;
+
+ if (timeout <= 0) {
+ logout();
+ } else {
+ const timer = setTimeout(() => {
+ logout();
+ }, timeout);
+
+ return () => clearTimeout(timer);
+ }
+ }, [token]);
+
+ const login = (newToken) => {
+ const payload = parseJwt(newToken);
+ if (!payload) {
+ console.error("Token inválido");
+ return;
+ }
+
+ localStorage.setItem('token', newToken);
+ setToken(newToken);
+ setUser(payload);
+ navigate('/');
+ };
+
+ const logout = () => {
+ localStorage.removeItem('token');
+ setToken('');
+ setUser(null);
+ navigate('/login');
+ };
+
+ const isAuthenticated = !!token;
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useAuth() {
+ const ctx = useContext(AuthContext);
+ if (!ctx) throw new Error('useAuth must be used within AuthProvider');
+ return ctx;
+}
diff --git a/src/contexts/ChargersContext.jsx b/src/contexts/ChargersContext.jsx
new file mode 100644
index 0000000..17126c4
--- /dev/null
+++ b/src/contexts/ChargersContext.jsx
@@ -0,0 +1,53 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import useApi from '@/hooks/useApi';
+
+const ChargersContext = createContext();
+
+export function ChargersProvider({ children }) {
+ const { request, loading: apiLoading, error: apiError } = useApi();
+ const [chargers, setChargers] = useState([]);
+ const [selectedCharger, setSelectedCharger] = useState(null);
+
+ // Busca lista de carregadores e seleciona o primeiro se necessário
+ const fetchChargers = async () => {
+ try {
+ const response = await request('/api/chargers');
+ const list = response.data || [];
+ setChargers(list);
+ if (!selectedCharger && list.length > 0) {
+ setSelectedCharger(list[0]);
+ }
+ } catch (err) {
+ console.error('Error fetching chargers:', err);
+ }
+ };
+
+ useEffect(() => {
+ fetchChargers();
+ }, []);
+
+ // Seleciona um carregador por ID
+ const selectChargerById = (id) => {
+ const charger = chargers.find(c => c.id === id) || null;
+ setSelectedCharger(charger);
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useChargersContext() {
+ const context = useContext(ChargersContext);
+ if (!context) throw new Error('useChargersContext must be used within a ChargersProvider');
+ return context;
+}
diff --git a/src/hooks/useApi.js b/src/hooks/useApi.js
new file mode 100644
index 0000000..4ca6b8d
--- /dev/null
+++ b/src/hooks/useApi.js
@@ -0,0 +1,40 @@
+// src/hooks/useApi.js
+import { useState } from 'react';
+import { getAuthHeader } from '@/utils/apiAuthHeader';
+
+export default function useApi() {
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState('');
+
+ const request = async (url, options = {}) => {
+ setLoading(true);
+ setError('');
+
+ try {
+ const res = await fetch(url, {
+ ...options,
+ headers: {
+ ...getAuthHeader(),
+ ...(options.headers || {})
+ },
+ });
+
+ if (res.status === 401 || res.status === 403) {
+ setError('Sessão expirada. Faça login novamente.');
+ throw new Error('Sessão expirada');
+ }
+
+ const data = await res.json();
+
+ if (!res.ok) throw new Error(data.message || 'Erro na API');
+ return data;
+ } catch (err) {
+ setError(err.message);
+ throw err;
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return { request, loading, error };
+}
diff --git a/src/hooks/useCharger.js b/src/hooks/useCharger.js
new file mode 100644
index 0000000..e17e2e6
--- /dev/null
+++ b/src/hooks/useCharger.js
@@ -0,0 +1,37 @@
+// src/hooks/useCharger.js
+
+import { useState, useEffect } from 'react';
+import { getAuthHeader } from '@/utils/apiAuthHeader';
+
+export function useCharger(chargerId) {
+ const [chargerData, setChargerData] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState('');
+
+ useEffect(() => {
+ if (!chargerId) return;
+
+ const fetchCharger = async () => {
+ setLoading(true);
+ try {
+ const res = await fetch(`/api/chargers/${chargerId}/status`, {
+ headers: getAuthHeader(),
+ });
+
+ if (!res.ok) throw new Error('Failed to fetch charger data');
+
+ const json = await res.json();
+ setChargerData(json.data);
+ setError('');
+ } catch (err) {
+ setError(err.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchCharger();
+ }, [chargerId]);
+
+ return { chargerData, loading, error };
+}
diff --git a/src/hooks/useChargerStatus.js b/src/hooks/useChargerStatus.js
new file mode 100644
index 0000000..1a298b1
--- /dev/null
+++ b/src/hooks/useChargerStatus.js
@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+import { getAuthHeader } from '@/utils/apiAuthHeader';
+
+export function useChargerStatus(chargerId) {
+ const [charger, setCharger] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState('');
+
+ const fetchStatus = async () => {
+ setLoading(true);
+ setError('');
+ try {
+ const res = await fetch(`/api/chargers/${chargerId}/status`, {
+ headers: getAuthHeader(),
+ });
+
+ const json = await res.json();
+ if (!res.ok || !json.success) {
+ throw new Error(json.message || 'Erro ao buscar status');
+ }
+
+ setCharger(json.data);
+ } catch (err) {
+ setError(err.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ if (chargerId) fetchStatus();
+ }, [chargerId]);
+
+ return { charger, loading, error, refresh: fetchStatus };
+}
diff --git a/src/hooks/useChargers.js b/src/hooks/useChargers.js
new file mode 100644
index 0000000..c4ffd5e
--- /dev/null
+++ b/src/hooks/useChargers.js
@@ -0,0 +1,28 @@
+// src/hooks/useChargers.js
+import { useEffect, useState } from "react";
+import { getAuthHeader } from "@/utils/apiAuthHeader";
+
+export function useChargers() {
+ const [chargers, setChargers] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState("");
+
+ useEffect(() => {
+ setLoading(true);
+ fetch("/api/chargers", {
+ headers: getAuthHeader(),
+ })
+ .then(res => {
+ if (!res.ok) throw new Error("Erro ao buscar carregadores");
+ return res.json();
+ })
+ .then(json => {
+ setChargers(json.data || []);
+ setError("");
+ })
+ .catch(() => setError("Falha ao carregar carregadores"))
+ .finally(() => setLoading(false));
+ }, []);
+
+ return { chargers, setChargers, loading, error };
+}
diff --git a/src/hooks/useHistory.js b/src/hooks/useHistory.js
new file mode 100644
index 0000000..902aa57
--- /dev/null
+++ b/src/hooks/useHistory.js
@@ -0,0 +1,33 @@
+// src/hooks/useHistory.js
+import { useState, useEffect } from 'react';
+import { getAuthHeader } from '@/utils/apiAuthHeader';
+
+// Agora recebe chargerId!
+export function useHistory(chargerId) {
+ const [histories, setHistory] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState('');
+
+ useEffect(() => {
+ if (!chargerId) return; // Só busca se houver carregador selecionado
+ setLoading(true);
+ fetch(`/api/chargers/${chargerId}/history`, {
+ headers: getAuthHeader(),
+ })
+ .then(res => {
+ if (res.status === 401 || res.status === 403) {
+ setError('Sessão expirada. Faça login novamente.');
+ return { data: [] };
+ }
+ return res.json();
+ })
+ .then(json => {
+ setHistory(json.data || []);
+ setError('');
+ })
+ .catch(() => setError('Falha ao carregar agendamentos'))
+ .finally(() => setLoading(false));
+ }, [chargerId]); // <-- Atualiza quando o chargerId mudar
+
+ return { histories, setHistory, loading, error };
+}
diff --git a/src/hooks/useSchedules.js b/src/hooks/useSchedules.js
new file mode 100644
index 0000000..af0e246
--- /dev/null
+++ b/src/hooks/useSchedules.js
@@ -0,0 +1,33 @@
+// src/hooks/useSchedules.js
+import { useState, useEffect } from 'react';
+import { getAuthHeader } from '@/utils/apiAuthHeader';
+
+// Agora recebe chargerId!
+export function useSchedules(chargerId) {
+ const [schedules, setSchedules] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState('');
+
+ useEffect(() => {
+ if (!chargerId) return; // Só busca se houver carregador selecionado
+ setLoading(true);
+ fetch(`/api/chargers/${chargerId}/schedule`, {
+ headers: getAuthHeader(),
+ })
+ .then(res => {
+ if (res.status === 401 || res.status === 403) {
+ setError('Sessão expirada. Faça login novamente.');
+ return { data: [] };
+ }
+ return res.json();
+ })
+ .then(json => {
+ setSchedules(json.data || []);
+ setError('');
+ })
+ .catch(() => setError('Falha ao carregar agendamentos'))
+ .finally(() => setLoading(false));
+ }, [chargerId]); // <-- Atualiza quando o chargerId mudar
+
+ return { schedules, setSchedules, loading, error };
+}
diff --git a/src/index.css b/src/index.css
new file mode 100755
index 0000000..f1d8c73
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100755
index 0000000..4e3c5df
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,79 @@
+import React, { Suspense, lazy } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import AppLayout from './App';
+import './index.css';
+
+import { AuthProvider } from './contexts/AuthContext';
+import { ToastProvider } from './components/ToastContext';
+import { ChargersProvider } from './contexts/ChargersContext';
+import ProtectedRoute from './components/ProtectedRoute';
+
+const PageLoading = () => (
+
+ Loading...
+
+);
+
+// Lazy-loaded pages
+const ChargersPage = lazy(() => import('./pages/ChargersPage'));
+const ChargerDashboardPage = lazy(() => import('./pages/ChargerDashboardPage'));
+const HistoryPage = lazy(() => import('./pages/HistoryPage'));
+const SettingsPage = lazy(() => import('./pages/SettingsPage'));
+const LoginPage = lazy(() => import('./pages/LoginPage'));
+
+// Root container
+const container = document.getElementById('root');
+if (!container) throw new Error('Root element not found');
+
+const root = createRoot(container);
+
+root.render(
+
+
+
+
+
+ }>
+
+ {/* Rota pública */}
+ } />
+
+ {/* Rotas protegidas */}
+
+
+
+ }
+ >
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
+ {/* Redirecionamento para rota protegida padrão */}
+ } />
+
+ {/* Fallback 404 */}
+
+ 404
+ Página não encontrada
+ Voltar para início
+
+
}
+ >
+ {error && (
+
+ {error}
+
+ )}
+
+ {loading || busy ? (
+
+
+
+ {busy ? 'Sending command...' : 'Loading status...'}
+
+
+ ) : (
+ charger && (
+ <>
+ {/* Status visual */}
+
+ {charger.status.toUpperCase()}
+
+
+
+
+ 7
+ ? 'border-yellow-400 opacity-60'
+ : 'border-blue-200 opacity-30'
+ }`}
+ />
+
7
+ ? 'border-yellow-500'
+ : 'border-blue-600'
+ } flex flex-col items-center justify-center text-blue-700`}
+ >
+ 7 ? 'text-yellow-500' : 'text-blue-600'
+ }`}
+ >
+
+
+
+ {charger.currentPower} kW
+
+
+ Power
+
+
+
+
+
+
+ }
+ label="Status"
+ value={charger.status}
+ />
+ }
+ label="Time Remaining"
+ value={charger.timeRemaining}
+ />
+ }
+ label="Power"
+ value={{charger.currentPower} kW}
+ />
+ }
+ label="Mode"
+ value={charger.mode?.toUpperCase()}
+ />
+ }
+ label="Última atividade"
+ value={new Date(charger.ultimaAtividade).toLocaleTimeString('pt-BR', {
+ hour: '2-digit',
+ minute: '2-digit',
+ })}
+ />
+
+
+
+
+
setAmpLimit(Number(e.target.value))}
+ className="w-full accent-blue-600"
+ disabled={busy}
+ />
+
+ 6 A
+ {maxAmps} A
+
+
+
+
+
handleAction('start')}
+ disabled={busy}
+ className="bg-green-600 hover:bg-green-700 text-white px-5 py-2 rounded-xl shadow font-medium flex items-center gap-2"
+ >
+ Start
+
+
handleAction('stop')}
+ disabled={busy}
+ className="bg-red-500 hover:bg-red-600 text-white px-5 py-2 rounded-xl shadow font-medium flex items-center gap-2"
+ >
+ Stop
+
+
+
+ )
+ )}
+
+
+
+ {icon}
+ {label}
+
+
{value}
+
+
+
+ );
+ }
+
+ if (error) {
+ return {error}
;
+ }
+
+ return (
+
+
+
My Chargers
+
+
+
+ {chargers.length > 0 ? (
+ chargers.map((charger) => (
+
handleSelect(charger)}
+ >
+
+
+
+ {charger.name}
+
+
+ Pairing code: {charger.pairingCode}
+
+ Location: {charger.location}
+ Last activity: {charger.lastActivity}
+
+ ))
+ ) : (
+
No chargers found
+ )}
+
+
+ {showAdd && }
+
+
New Charger
+
+
+
+ );
+}
diff --git a/src/pages/HistoryPage.jsx b/src/pages/HistoryPage.jsx
new file mode 100644
index 0000000..1e569a5
--- /dev/null
+++ b/src/pages/HistoryPage.jsx
@@ -0,0 +1,98 @@
+// src/pages/HistoryPage.jsx
+import React, { useState, useEffect } from 'react';
+import { History } from 'lucide-react';
+import { SectionCard } from '@/components/ui/SectionCard';
+import { useHistory } from '@/hooks/useHistory';
+import { useChargersContext } from '@/contexts/ChargersContext';
+import {
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ Tooltip,
+ ResponsiveContainer,
+ ReferenceLine,
+} from 'recharts';
+
+export default function HistoryPage() {
+ const { selectedCharger } = useChargersContext();
+ const chargerId = selectedCharger?.id;
+ const { histories, loading, error } = useHistory(chargerId);
+
+ // History/demo state
+ const [viewMode, setViewMode] = useState('Week');
+ const [chartData] = useState([
+ { day: 'Mon', kwh: 12 },
+ { day: 'Tue', kwh: 15 },
+ { day: 'Wed', kwh: 13 },
+ { day: 'Thu', kwh: 0 },
+ { day: 'Fri', kwh: 14 },
+ { day: 'Sat', kwh: 18 },
+ { day: 'Sun', kwh: 12 },
+ ]);
+ const [sessions] = useState([
+ { date: '27 Oct', time: '19:30', kwh: 12, duration: '2h 03m', cost: '€2,40' },
+ { date: '25 Oct', time: '07:15', kwh: 8, duration: '1h 20m', cost: '€1,60' },
+ ]);
+
+ const totalKwh = chartData.reduce((sum, d) => sum + d.kwh, 0).toFixed(2);
+ const totalCost = (totalKwh * 0.2).toFixed(2);
+
+ return (
+
+ {/* === Histórico === */}
+
}>
+
+ {['Week', 'Month', 'Year'].map(mode => (
+
+ ))}
+
+
+
+
Total energy
+
{totalKwh} kWh
+
Spent €{totalCost}
+
+
+
+
+
+
+
+ `${val} kWh`} />
+ s + d.kwh, 0) / chartData.length} stroke="#999" strokeDasharray="3 3" />
+
+
+
+
+
+
+
+ 23 – 29 Oct 2023
+
+
+
+
+ Recent sessions
+
+
+
+ {sessions.map((s, i) => (
+ -
+
+
{s.date} · {s.time}
+
{s.kwh} kWh · {s.duration}
+
{s.cost}
+
+ ))}
+
+
+
+
}>
+
+
+ {loading ?
Carregando...
: error ?
{error}
: (
+
+ {schedules.length === 0 ? (
+ - Nenhum agendamento
+ ) : (
+ schedules.map((item, i) => (
+ -
+ {item.start} - {item.end} ({item.repeat})
+
+ ))
+ )}
+
+ )}
+
+
+
}>
+
+
+
+ setEnergyRate(parseFloat(e.target.value))}
+ className="w-full border px-4 py-2 rounded-lg focus:ring-2 focus:ring-blue-500"
+ />
+
+
+
+ setBatteryCapacity(parseInt(e.target.value))}
+ className="w-full border px-4 py-2 rounded-lg focus:ring-2 focus:ring-blue-500"
+ />
+
+
+
+ setChargeLimit(Math.min(100, Math.max(1, parseInt(e.target.value))))}
+ className="w-full border px-4 py-2 rounded-lg focus:ring-2 focus:ring-blue-500"
+ />
+
+
+
+
+
+
+
+
+ {loadingDiag ? : 'Run Diagnostic'}
+
+
+
Logout
+
+
+