[V0_FILE]typescriptreact:file="types/movimientoBancario.ts" isMerged="true" export interface MovimientoBancario { id: string; fecha: string; descripcion: string; monto: number; clasificacion: string; certeza: number; // 0 a 1 } [V0_FILE]typescriptreact:file="clasificaciones.ts" isMerged="true" export const CLASIFICACIONES = [ 'venta efectivo', 'electricidad', 'internet', 'venta terminal', 'transferencia', 'alimentación', 'salario', 'servicios', 'compras', 'deudas', 'ingreso', 'seguros', 'transporte', 'entretenimiento' ]; [V0_FILE]typescriptreact:file="item-movimiento-bancario.tsx" isEdit="true" import { MovimientoBancario } from './types/movimientoBancario' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { CLASIFICACIONES } from './clasificaciones' interface ItemMovimientoBancarioProps { movimiento: MovimientoBancario; onCambioClasificacion: (id: string, nuevaClasificacion: string) => void; } export default function ItemMovimientoBancario({ movimiento, onCambioClasificacion }: ItemMovimientoBancarioProps) { const manejarCambioClasificacion = (nuevaClasificacion: string) => { onCambioClasificacion(movimiento.id, nuevaClasificacion) } const obtenerColorCerteza = (certeza: number) => { const tono = certeza * 120 // 0 es rojo, 120 es verde return `hsl(${tono}, 80%, 80%)` } const formatearFecha = (fecha: string) => { const [año, mes, dia] = fecha.split('-') return `${dia}/${mes}` } return (

{formatearFecha(movimiento.fecha)} {movimiento.descripcion} ${Math.abs(movimiento.monto).toFixed(2)}

) } [V0_FILE]typescriptreact:file="lista-movimientos-bancarios.tsx" isEdit="true" 'use client' import { useState } from 'react' import { MovimientoBancario } from './types/movimientoBancario' import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import ItemMovimientoBancario from './item-movimiento-bancario' import { CLASIFICACIONES } from './clasificaciones' // Datos de ejemplo const movimientosIniciales: MovimientoBancario[] = [ { id: '1', fecha: '2023-07-01', descripcion: 'Retiro de efectivo', monto: -100, clasificacion: 'venta efectivo', certeza: 0.9 }, { id: '2', fecha: '2023-07-02', descripcion: 'Factura de electricidad', monto: -50, clasificacion: 'electricidad', certeza: 0.8 }, { id: '3', fecha: '2023-07-03', descripcion: 'Factura de internet', monto: -40, clasificacion: 'internet', certeza: 0.95 }, { id: '4', fecha: '2023-07-04', descripcion: 'Pago con tarjeta', monto: -75, clasificacion: 'venta terminal', certeza: 0.7 }, { id: '5', fecha: '2023-07-05', descripcion: 'Transferencia de Juan', monto: 200, clasificacion: 'transferencia', certeza: 0.85 }, { id: '6', fecha: '2023-07-06', descripcion: 'Compra supermercado', monto: -120, clasificacion: 'alimentación', certeza: 0.2 }, { id: '7', fecha: '2023-07-07', descripcion: 'Pago de nómina', monto: 1500, clasificacion: 'salario', certeza: 0.99 }, { id: '8', fecha: '2023-07-08', descripcion: 'Factura de agua', monto: -30, clasificacion: 'servicios', certeza: 0.3 }, { id: '9', fecha: '2023-07-09', descripcion: 'Compra en línea', monto: -80, clasificacion: 'compras', certeza: 0.6 }, { id: '10', fecha: '2023-07-10', descripcion: 'Pago de préstamo', monto: -200, clasificacion: 'deudas', certeza: 0.9 }, { id: '11', fecha: '2023-07-11', descripcion: 'Depósito de cheque', monto: 300, clasificacion: 'ingreso', certeza: 0.85 }, { id: '12', fecha: '2023-07-12', descripcion: 'Pago de seguro', monto: -90, clasificacion: 'seguros', certeza: 0.75 }, { id: '13', fecha: '2023-07-13', descripcion: 'Compra de gasolina', monto: -45, clasificacion: 'transporte', certeza: 0.7 }, { id: '14', fecha: '2023-07-14', descripcion: 'Retiro cajero', monto: -60, clasificacion: 'venta efectivo', certeza: 0.8 }, { id: '15', fecha: '2023-07-15', descripcion: 'Pago de suscripción', monto: -15, clasificacion: 'entretenimiento', certeza: 0.65 }, ] export default function ListaMovimientosBancarios() { const [movimientos, setMovimientos] = useState(movimientosIniciales) const [filtro, setFiltro] = useState('') const manejarCambioClasificacion = (id: string, nuevaClasificacion: string) => { setMovimientos(movimientos.map(movimiento => movimiento.id === id ? { ...movimiento, clasificacion: nuevaClasificacion } : movimiento )) } const movimientosFiltrados = movimientos.filter(movimiento => movimiento.descripcion.toLowerCase().includes(filtro.toLowerCase()) || movimiento.clasificacion.toLowerCase().includes(filtro.toLowerCase()) ) const ingresos = movimientosFiltrados.filter(movimiento => movimiento.monto > 0) const gastos = movimientosFiltrados.filter(movimiento => movimiento.monto < 0) return (

Movimientos Bancarios

Filtrar movimientos setFiltro(e.target.value)} />

Gastos Ingresos

{gastos.map(movimiento => ( ))}

{ingresos.map(movimiento => ( ))}

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This