"use client"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Card, CardContent } from "@/components/ui/card"; import { useToast } from "@/components/ui/use-toast"; import { useOnboardingStore } from "@/stores/workflow/onboarding"; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, } from "recharts"; import { Trash2, Plus } from "lucide-react"; import { useRouter } from "next/navigation"; interface ReadingEntry { id: string; month: string; // formato 'YYYY-MM' value: number | string; // kWh (string no form, number na API) } export default function ConsumptionProfilePage() { const [averageKwh, setAverageKwh] = useState<string>(""); const [readings, setReadings] = useState<ReadingEntry[]>([]); const [loading, setLoading] = useState(false); const { toast } = useToast(); const { setConsumptionProfile, kycData, nextStep } = useOnboardingStore(); const router = useRouter(); // Inicializar com o valor do KYC, se disponível useState(() => { if (kycData?.averageConsumptionKwh) { setAverageKwh(kycData.averageConsumptionKwh.toString()); } }); const addReadingEntry = () => { const now = new Date(); const currentMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`; setReadings([ ...readings, { id: `reading-${Date.now()}`, month: currentMonth, value: "" }, ]); }; const removeReading = (id: string) => { setReadings(readings.filter((r) => r.id !== id)); }; const updateReading = ( id: string, field: keyof ReadingEntry, value: string ) => { setReadings( readings.map((r) => (r.id === id ? { ...r, [field]: value } : r)) ); }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); try { setLoading(true); // Validar consumo médio if (!averageKwh || isNaN(Number(averageKwh)) || Number(averageKwh) < 0) { toast({ title: "Erro de validação", description: "Consumo médio deve ser um número positivo", variant: "destructive", }); return; } // Preparar leituras válidas const validReadings = readings .filter((r) => r.month && r.value !== "" && !isNaN(Number(r.value))) .map((r) => ({ month: r.month, value: Number(r.value), })); // Enviar para API const res = await fetch("/api/onboard/consumption-profile", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ monthlyAverage: Number(averageKwh), readings: validReadings, }), }); const data = await res.json(); if (!data.success) { throw new Error(data.error || "Erro ao processar perfil de consumo"); } // Atualizar store com o resultado setConsumptionProfile(data.result); toast({ title: "Perfil de consumo analisado", description: "Sua análise de consumo foi concluída com sucesso", }); // Avançar para próxima etapa nextStep(); router.push("/onboard/resumo"); } catch (error: any) { toast({ title: "Erro", description: error.message || "Ocorreu um erro ao analisar o perfil de consumo", variant: "destructive", }); } finally { setLoading(false); } }; // Dados para gráfico const chartData = readings .filter((r) => r.month && r.value !== "" && !isNaN(Number(r.value))) .map((r) => ({ month: r.month, kWh: Number(r.value), })) .sort((a, b) => a.month.localeCompare(b.month)); return ( <div className="container max-w-3xl mx-auto py-8"> <h1 className="text-2xl font-semibold mb-2">Perfil de Consumo</h1> <p className="text-muted-foreground mb-6"> Forneça informações sobre seu consumo mensal para análise personalizada. </p> <Card> <CardContent className="p-6"> <form onSubmit={handleSubmit} className="space-y-6"> {/* Consumo médio */} <div className="space-y-2"> <Label htmlFor="averageKwh">Consumo médio mensal (kWh)</Label> <Input id="averageKwh" type="number" value={averageKwh} onChange={(e) => setAverageKwh(e.target.value)} placeholder="Ex: 250" min="0" required /> <p className="text-xs text-muted-foreground"> Este valor pode ser encontrado em sua conta de energia </p> </div> {/* Histórico (opcional) */} <div className="space-y-3"> <div className="flex justify-between items-center"> <Label>Histórico de consumo (opcional)</Label> <Button type="button" variant="outline" size="sm" onClick={addReadingEntry} > <Plus size={16} className="mr-1" /> Adicionar </Button> </div> {readings.length > 0 && ( <div className="space-y-3"> {readings.map((reading) => ( <div key={reading.id} className="flex gap-3 items-center"> <div className="flex-1"> <Label htmlFor={`month-${reading.id}`} className="sr-only" > Mês </Label> <Input id={`month-${reading.id}`} type="month" value={reading.month} onChange={(e) => updateReading(reading.id, "month", e.target.value) } required /> </div> <div className="flex-1"> <Label htmlFor={`value-${reading.id}`} className="sr-only" > Consumo (kWh) </Label> <Input id={`value-${reading.id}`} type="number" value={reading.value} onChange={(e) => updateReading(reading.id, "value", e.target.value) } placeholder="kWh" min="0" required /> </div> <Button type="button" variant="ghost" size="icon" onClick={() => removeReading(reading.id)} > <Trash2 size={16} /> <span className="sr-only">Remover</span> </Button> </div> ))} </div> )} {readings.length === 0 && ( <p className="text-sm text-muted-foreground"> Adicione leituras de consumo para uma análise mais precisa </p> )} </div> {/* Gráfico de visualização */} {chartData.length >= 2 && ( <div className="pt-4"> <Label className="mb-2 block">Visualização do consumo</Label> <div className="h-64 w-full"> <ResponsiveContainer width="100%" height="100%"> <LineChart data={chartData}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="month" tickFormatter={(value) => { const [year, month] = value.split("-"); return `${month}/${year.slice(2)}`; }} /> <YAxis unit=" kWh" /> <Tooltip formatter={(value) => [`${value} kWh`, "Consumo"]} labelFormatter={(label) => { const [year, month] = label.split("-"); const monthNames = [ "Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez", ]; return `${monthNames[parseInt(month) - 1]}/${year}`; }} /> <Line type="monotone" dataKey="kWh" stroke="#8884d8" activeDot={{ r: 8 }} /> </LineChart> </ResponsiveContainer> </div> </div> )} {/* Botões */} <div className="flex justify-between pt-4"> <Button type="button" variant="outline" onClick={() => router.back()} > Voltar </Button> <Button type="submit" disabled={loading || !averageKwh}> {loading ? "Processando..." : "Analisar Perfil de Consumo"} </Button> </div> </form> </CardContent> </Card> </div> ); } - Initial Deployment
fab0b39
verified