import { useState, useEffect } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { PieChart, Pie, Cell, ResponsiveContainer, Legend } from "recharts"; import { Home, Utensils, Car, Heart, GraduationCap, Smartphone, Shirt, Film, MoreHorizontal, } from "lucide-react"; // Definición del tipo de Transacción type Transaccion = { id: number; tipo: "ingreso" | "gasto"; monto: number; categoria: string; }; // Colores para las categorías del gráfico const COLORES = [ "#00C49F", "#0088FE", "#FFBB28", "#FF8042", "#A28DFF", "#FF6B6B", "#4ECDC4", "#45B7D1", "#98D8C8", ]; // Definición de las categorías de gastos const CATEGORIAS = [ { nombre: "Ho | A shadcn/ui and v0 generation - v0