# 💰 Finanzas - Gestor Personal de Finanzas

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.

![Dashboard Preview](./preview.png)

## ✨ 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](https://nextjs.org/)** - Framework React con SSR/SSG
- **[TypeScript](https://www.typescriptlang.org/)** - Tipado estático
- **[Tailwind CSS](https://tailwindcss.com/)** - Estilos utilitarios
- **[Zustand](https://github.com/pmndrs/zustand)** - Gestión de estado
- **[Recharts](https://recharts.org/)** - Gráficos y visualizaciones
- **[Lucide React](https://lucide.dev/)** - Iconos modernos

## 🚀 Instalación y Uso

### Prerrequisitos
- Node.js 18+
- npm o yarn

### 1. Clonar el repositorio
```bash
git clone https://gitea.cbcren.online/renato97/finanzas.git
cd finanzas
```

### 2. Instalar dependencias
```bash
npm install
```

### 3. Ejecutar en desarrollo
```bash
npm run dev
```

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

### 4. Construir para producción
```bash
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
```typescript
// 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!