Una aplicación moderna y completa para la gestión de finanzas personales, construida con Next.js y TypeScript. Controla tus deudas, tarjetas de crédito, presupuestos y mantente al día con alertas inteligentes.

✨ Características Principales

🏠 Dashboard Central

Resumen financiero con métricas clave
Actividad reciente y tendencias
Acciones rápidas para agregar gastos y pagos
Alertas inteligentes personalizadas

💳 Gestión de Tarjetas de Crédito

Múltiples tarjetas con límites y saldos
Registro de pagos y compras
Seguimiento de cuotas e instalaciones
Alertas de cierre y vencimiento

📊 Control de Deudas

Deudas fijas: Alquiler, servicios, suscripciones
Deudas variables: Compras, entretenimiento, salud
Categorización automática
Marcado de pagos realizados
Notas y recordatorios

💰 Presupuesto Mensual

Ingresos y gastos planificados
Metas de ahorro
Seguimiento en tiempo real
Visualización con gráficos

🚨 Sistema de Alertas

Alertas de vencimiento de pagos
Advertencias de presupuesto
Recordatorios de cierre de tarjetas
Detección de gastos inusuales
Notificaciones de metas de ahorro

📱 Diseño Responsivo

Sidebar colapsible en desktop
Navegación móvil intuitiva
Interfaz moderna con Tailwind CSS
Soporte completo para dispositivos móviles

🛠️ Stack Tecnológico

Next.js 14 - Framework React con SSR/SSG
TypeScript - Tipado estático
Tailwind CSS - Estilos utilitarios
Zustand - Gestión de estado
Recharts - Gráficos y visualizaciones
Lucide React - Iconos modernos

🚀 Instalación y Uso

Prerrequisitos

Node.js 18+
npm o yarn

1. Clonar el repositorio

git clone https://gitea.cbcren.online/renato97/finanzas.git
cd finanzas

2. Instalar dependencias

npm install

3. Ejecutar en desarrollo

npm run dev

La aplicación estará disponible en http://localhost:3000

4. Construir para producción

npm run build

Los archivos estáticos se generarán en el directorio dist/

📁 Estructura del Proyecto

finanzas/
├── app/                    # Rutas y páginas de Next.js
│   ├── alerts/            # Página de alertas
│   ├── budget/            # Página de presupuesto
│   ├── cards/             # Página de tarjetas
│   ├── debts/             # Página de deudas
│   └── page.tsx           # Dashboard principal
├── components/            # Componentes reutilizables
│   ├── alerts/            # Sistema de alertas
│   ├── budget/            # Componentes de presupuesto
│   ├── cards/             # Componentes de tarjetas
│   ├── dashboard/         # Componentes del dashboard
│   ├── debts/             # Componentes de deudas
│   ├── layout/            # Layout y navegación
│   └── modals/            # Modales de creación/edición
├── lib/                   # Utilidades y store
│   ├── store/             # Estado global con Zustand
│   ├── alerts.ts          # Lógica de alertas
│   ├── types.ts           # Tipos TypeScript
│   └── utils.ts           # Utilidades generales
└── public/                # Archivos estáticos

🎯 Funcionalidades Destacadas

Estado Global con Zustand

Gestión reactiva del estado
Persistencia automática
Selectores optimizados
Actualizaciones en tiempo real

Alertas Inteligentes

// Tipos de alertas disponibles
- PAYMENT_DUE: Pago próximo a vencer
- BUDGET_WARNING: Límite de presupuesto alcanzado
- CARD_CLOSING: Fecha de cierre de tarjeta
- CARD_DUE: Vencimiento de tarjeta
- SAVINGS_GOAL: Meta de ahorro alcanzada
- UNUSUAL_SPENDING: Gasto inusual detectado

Categorización Automática

Deudas Fijas: vivienda, servicios, suscripciones
Deudas Variables: compras, comida, entretenimiento, salud
Pagos con Cuotas: seguimiento de instalaciones

📊 Métricas y Visualizaciones

Gráficos de gastos por categoría
Tendencias de mes a mes
Progreso de metas de ahorro
Distribución de deuda total

🔐 Seguridad

Validación de datos con TypeScript
Sanitización de inputs
Sin almacenamiento de datos sensibles
Ejecución completamente en el cliente

📄 Licencia

ISC

👨‍💻 Autor

Desarrollado por renato97

⭐ ¿Te gusta el proyecto? ¡No olvides darle una estrella en Gitea!