renato97/finanzas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: clean sensitive data and markdown files for CV

Browse Source 
- Remove data/ folder containing user credentials and personal info

- Remove unnecessary markdown files
This commit is contained in:
Renato97
2026-03-31 01:16:13 -03:00
parent b2d681e9aa
commit 9233e3fc3b
3 changed files with 0 additions and 526 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
Deploy-Guideline.md
View File

@@ -1,136 +0,0 @@
# 🚀 Deployment Guideline: Finanzas Personales (Next.js + Telegram Bot)
This document contains step-by-step instructions to deploy the "Finanzas Personales" application to a Linux VPS (Ubuntu/Debian recommended).
## 1. Prerequisites
- **VPS**: A server with Ubuntu 22.04 or later.
- **Domain**: A domain pointing to your VPS IP (e.g., `finanzas.tusitio.com`).
- **Gitea Access**: Ensure the VPS can pull from your private Gitea repository.
## 2. Server Setup (Run as root/sudo)
```bash
# Update system
apt update && apt upgrade -y
# Install Node.js 18+ (using NVM is recommended, but apt works for deployment)
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
apt install -y nodejs nginx git
# Install Process Manager (PM2)
npm install -g pm2
```
## 3. Clone Repository & Install Dependencies
```bash
# Navigate to web directory
cd /var/www
# Clone your repo (Use your Gitea token if private)
git clone https://<YOUR_GITEA_URL>/<USER>/finanzas.git
cd finanzas
# Install dependencies
npm install
# Build the Next.js app
npm run build
```
## 4. Environment Configuration
Since we use a custom `server-settings.json`, you need to configure it manually on the server once.
```bash
# Create the settings file manually (or copy from local if you have sw access)
nano server-settings.json
```
Paste your JSON configuration (get this from your local `server-settings.json`):
```json
{
"telegram": {
"botToken": "YOUR_BOT_TOKEN",
"chatId": "YOUR_CHAT_ID"
},
"aiProviders": [
{
"id": "uuid...",
"name": "Service Name",
"endpoint": "https://api...",
"token": "sk-...",
"model": "gpt-4o"
}
]
}
```
## 5. Startup with PM2 (Keep Apps Alive)
We need to run two processes: The Next.js Web App and the Telegram Bot.
```bash
# 1. Start Next.js (Port 3000)
pm2 start npm --name "finanzas-web" -- start -- -p 3000
# 2. Start Telegram Bot
pm2 start npm --name "finanzas-bot" -- run bot
# Save list so they revive on reboot
pm2 save
pm2 startup
```
## 6. Nginx Reverse Proxy (Expose to Internet)
Configure Nginx to safely expose port 3000 to the web.
```bash
nano /etc/nginx/sites-available/finanzas
```
Add this content:
```nginx
server {
listen 80;
server_name finanzas.tusitio.com; # REPLACE THIS
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
```
Enable site and restart Nginx:
```bash
ln -s /etc/nginx/sites-available/finanzas /etc/nginx/sites-enabled/
nginx -t
systemctl restart nginx
```
## 7. SSL Certificate (HTTPS)
Use Certbot to secure your site for free.
```bash
apt install -y certbot python3-certbot-nginx
certbot --nginx -d finanzas.tusitio.com
```
---
## 8. Updates
When you push new code to Gitea, update the server:
```bash
cd /var/www/finanzas
git pull
npm install
npm run build
pm2 restart finanzas-web
pm2 restart finanzas-bot
```

100
gemini.md
View File

@@ -1,100 +0,0 @@
# Análisis del Proyecto Finanzas (`gemini.md`)
> [!NOTE]
> **Estado de la Revisión (28/01/2026):**
> Se han aplicado las correcciones de arquitectura:
> - [x] **Store Refactorizado**: Dividido en slices (`debts`, `cards`, `budget`, `alerts`) y unificado en `lib/store.ts`.
> - [x] **UUID**: Implementado `uuidv4` para generación de IDs.
> - [x] **Modales**: Implementados funcionalmente en `components/modals/*` con formularios completos.
>
> El código ahora cumple con las buenas prácticas establecidas.
Este documento sirve como guía técnica, revisión de código y hoja de ruta para el desarrollo continuo del proyecto "Finanzas". Está diseñado para ser interpretado tanto por desarrolladores humanos como por agentes de IA (Minimax, GLM, Claude, etc.) para mantener la coherencia y calidad del código.
## 1. Visión General del Stack
- **Framework**: Next.js 14+ (App Router)
- **Lenguaje**: TypeScript
- **Estilos**: Tailwind CSS
- **Estado Global**: Zustand (con persistencia en localStorage)
- **Utilidades UI**: `clsx`, `tailwind-merge`, `lucide-react`
- **Fechas**: `date-fns`, `Intl.DateTimeFormat`
## 2. Puntos Fuertes Detectados
- **Estructura Limpia**: Separación clara entre lógica de negocio (`lib`), UI (`components`) y rutas (`app`).
- **Tipado Fuerte**: Uso consistente de interfaces en `lib/types.ts`.
- **Estado Persistente**: Buena implementación de `zustand` con middleware de persistencia para mantener los datos entre recargas.
- **Utilidades Reutilizables**: Funciones auxiliares bien definidas en `lib/utils.ts` para formateo de moneda y fechas.
## 3. Correcciones y Mejoras Inmediatas
### A. Gestión de IDs
**Estado Actual**: Se usa `crypto.randomUUID()` con un fallback a `Date.now()`.
**Mejora**: `uuid` ya está en `package.json`. Es preferible usar la librería `uuid` (v4) para garantizar colisiones nulas, especialmente si se planea sincronizar datos en el futuro.
```typescript
import { v4 as uuidv4 } from 'uuid';
// Reemplazar generateId() por uuidv4()
```
### B. Separación de Responsabilidades en el Store
**Estado Actual**: `useFinanzasStore` es un store monolítico.
**Mejora**: A medida que la aplicación crezca, dividir el store en "slices" (ej: `createBudgetSlice`, `createDebtsSlice`) mantendrá el código más mantenible.
### C. Optimización de Renderizado (`use client`)
**Estado Actual**: `app/page.tsx` es un componente de cliente (`'use client'`) gigante.
**Mejora**:
1. Mover la lógica de modales y efectos a componentes más pequeños.
2. Mantener la página principal lo más ligera posible.
3. Extraer los modales (`AddDebtModal`, etc.) a sus propios archivos en `components/modals`.
## 4. Buenas Prácticas (Standard Guidelines)
Cualquier IA que trabaje en este proyecto debe seguir estas reglas:
1. **Strict Typing**: No usar `any`. Definir interfaces para todas las props y estructuras de datos.
2. **Modular CSS**: Usar siempre `cn()` (`clsx` + `tailwind-merge`) para clases condicionales.
3. **Componentes Funcionales**: Preferir componentes pequeños y composables.
4. **Nombrado**:
- Componentes: PascalCase (ej: `BudgetCard.tsx`)
- Funciones/Variables: camelCase (ej: `calculateTotal`)
- Archivos de utilidad: kebab-case o camelCase (ej: `date-utils.ts`)
## 5. Nice to Have (Futuras Implementaciones)
### Funcionalidades
- [ ] **Validación de Formularios**: Implementar `zod` + `react-hook-form` para validar entradas de usuario (montos negativos, fechas inválidas).
- [ ] **Exportación de Datos**: Permitir exportar el estado a JSON/CSV para backup.
- [ ] **Temas**: Soporte real para modo claro/oscuro (actualmente parece hardcodeado a oscuro/slate).
- [ ] **Gráficos Avanzados**: Expandir el uso de `recharts` para mostrar tendencias de gastos vs ingresos.
### Calidad de Código
- [ ] **Tests Unitarios**: Agregar Vitest para probar lógica crítica en `lib/utils.ts` y reducers del store.
- [ ] **Barrel Files**: Mantener actualizados los `index.ts` en las carpetas de componentes para importaciones más limpias.
### Accesibilidad (a11y)
- [ ] Asegurar que todos los botones tengan `aria-label` si son solo íconos.
- [ ] Verificar contraste de colores en las tarjetas de deuda.
## 6. Instrucciones para Agentes de IA
Al generar código para este proyecto:
1. **Contexto**: Lee siempre `lib/types.ts` antes de modificar el estado.
2. **Estilo**: Replica el diseño visual existente (bg-slate-950, bordes sutiles, texto slate-400 para secundario).
3. **Estado**: Si agregas una nueva funcionalidad que requiere persistencia, agrégala a `AppState` en `lib/types.ts` y actualiza `lib/store.ts`.
4. **UI**: Usa componentes de `lucide-react` para íconos.
## 7. Snippets Comunes
**Formateo de Moneda:**
```typescript
import { formatCurrency } from '@/lib/utils';
// Uso: formatCurrency(1500) -> "$ 1.500,00"
```
**Clases Condicionales:**
```typescript
import { cn } from '@/lib/utils';
<div className={cn("p-4 bg-white", isError && "bg-red-50")} />
```

290
kimi.md
View File

@@ -1,290 +0,0 @@
# Especificaciones del Proyecto - Finanzas Personales
## Descripción General
Aplicación web moderna para gestión de finanzas personales. Diseño sobrio y elegante con tema oscuro.
## Stack Tecnológico
- **Framework**: Next.js 14+ (App Router)
- **Lenguaje**: TypeScript
- **Estilos**: Tailwind CSS
- **Estado**: Zustand con persistencia localStorage
- **Fechas**: date-fns
- **Gráficos**: Recharts
- **Iconos**: lucide-react
## Estructura de Directorios
```
/mnt/c/Users/Administrator/Documents/cuentas/finanzas/
├── app/ # Páginas de Next.js
├── components/ # Componentes React
│ ├── debts/ # Componentes de deudas
│ ├── cards/ # Componentes de tarjetas
│ ├── budget/ # Componentes de presupuesto
│ ├── alerts/ # Componentes de alertas
│ ├── dashboard/ # Componentes del dashboard
│ └── layout/ # Componentes de layout
├── lib/ # Utilidades y estado
│ ├── types.ts # Tipos TypeScript
│ ├── store.ts # Zustand store
│ ├── utils.ts # Helpers
│ └── alerts.ts # Lógica de alertas
├── public/ # Archivos estáticos
└── [config files]
```
## Tipos Principales
### FixedDebt
```typescript
interface FixedDebt {
id: string
name: string
amount: number
dueDay: number // 1-31
category: 'housing' | 'services' | 'subscription' | 'other'
isAutoDebit: boolean
isPaid: boolean
notes?: string
}
```
### VariableDebt
```typescript
interface VariableDebt {
id: string
name: string
amount: number
date: string // ISO date
category: 'shopping' | 'food' | 'entertainment' | 'health' | 'transport' | 'other'
isPaid: boolean
notes?: string
}
```
### CreditCard
```typescript
interface CreditCard {
id: string
name: string
lastFourDigits: string
closingDay: number // 1-31
dueDay: number // 1-31
currentBalance: number
creditLimit: number
color: string // hex color
}
```
### CardPayment
```typescript
interface CardPayment {
id: string
cardId: string
amount: number
date: string
description: string
installments?: { current: number; total: number }
}
```
### MonthlyBudget
```typescript
interface MonthlyBudget {
month: number // 1-12
year: number
totalIncome: number
fixedExpenses: number
variableExpenses: number
savingsGoal: number
}
```
### Alert
```typescript
interface Alert {
id: string
type: 'PAYMENT_DUE' | 'BUDGET_WARNING' | 'CARD_CLOSING' | 'CARD_DUE' | 'SAVINGS_GOAL' | 'UNUSUAL_SPENDING'
title: string
message: string
severity: 'info' | 'warning' | 'danger'
date: string
isRead: boolean
relatedId?: string
}
```
## Store (Zustand)
Hook: `useFinanzasStore()`
### Estado
- `fixedDebts: FixedDebt[]`
- `variableDebts: VariableDebt[]`
- `creditCards: CreditCard[]`
- `cardPayments: CardPayment[]`
- `monthlyBudgets: MonthlyBudget[]`
- `alerts: Alert[]`
- `currentMonth: number`
- `currentYear: number`
### Acciones Principales
- `addFixedDebt(debt)` / `updateFixedDebt(id, debt)` / `deleteFixedDebt(id)` / `toggleFixedDebtPaid(id)`
- `addVariableDebt(debt)` / `updateVariableDebt(id, debt)` / `deleteVariableDebt(id)` / `toggleVariableDebtPaid(id)`
- `addCreditCard(card)` / `updateCreditCard(id, card)` / `deleteCreditCard(id)`
- `addCardPayment(payment)` / `deleteCardPayment(id)`
- `setMonthlyBudget(budget)` / `updateMonthlyBudget(month, year, updates)`
- `addAlert(alert)` / `markAlertAsRead(id)` / `deleteAlert(id)` / `clearAllAlerts()`
## Paleta de Colores (Tema Oscuro)
```
Fondo principal: #0F172A (slate-900)
Cards/Superficies: #1E293B (slate-800)
Bordes: #334155 (slate-700)
Texto principal: #F8FAFC (slate-50)
Texto secundario: #94A3B8 (slate-400)
Acento positivo: #10B981 (emerald-500) // Dinero, éxito
Acento advertencia: #F59E0B (amber-500) // Alertas
Acento peligro: #EF4444 (red-500) // Urgente
Acento info: #3B82F6 (blue-500) // Información
```
## Utilidades Disponibles
### formatCurrency(amount: number): string
Formatea número como moneda argentina: `$ 1.500,50`
### formatDate(date: string | Date): string
Formato legible: "28 de enero de 2026"
### formatShortDate(date: string | Date): string
Formato corto: "28/01/2026"
### getDaysUntil(date: string | Date): number
Días hasta una fecha (negativo si ya pasó)
### getNextDateByDay(dayOfMonth: number): Date
Próxima fecha para un día específico del mes
### calculateNextClosingDate(closingDay: number): Date
Próxima fecha de cierre de tarjeta
### calculateNextDueDate(dueDay: number): Date
Próxima fecha de vencimiento
### getCardUtilization(balance: number, limit: number): number
Porcentaje de utilización de tarjeta
## Alertas Inteligentes
La función `generateAlerts()` en `/lib/alerts.ts` genera automáticamente:
1. **PAYMENT_DUE**: Deudas fijas que vencen en los próximos 3 días
2. **BUDGET_WARNING**: Gastos superan 80% del presupuesto
3. **CARD_CLOSING**: Tarjetas con cierre en próximos 3 días
4. **CARD_DUE**: Tarjetas con vencimiento en próximos 3 días
5. **SAVINGS_GOAL**: Ahorro proyectado por debajo de la meta
## Componentes Existentes
### /components/debts/
- `DebtCard.tsx` - Card individual de deuda
- `FixedDebtForm.tsx` - Formulario deuda fija
- `VariableDebtForm.tsx` - Formulario deuda variable
- `DebtSection.tsx` - Sección completa de deudas
### /components/cards/
- `CreditCardWidget.tsx` - Visualización tarjeta tipo tarjeta real
- `CreditCardForm.tsx` - Formulario tarjeta de crédito
- `CardPaymentForm.tsx` - Formulario registrar pago
- `MiniCard.tsx` - Versión compacta para selects
- `CardSection.tsx` - Sección completa de tarjetas
## Funcionalidades Requeridas
### Dashboard
- Cards de métricas (total deudas, presupuesto, ahorro)
- Lista de alertas activas
- Gráfico de distribución de gastos
- Resumen de tarjetas
### Deudas
- CRUD deudas fijas y variables
- Marcar como pagadas
- Filtros por categoría
- Indicadores visuales de vencimiento
### Tarjetas
- CRUD tarjetas de crédito
- Visualización tipo tarjeta real
- Registrar pagos
- Indicadores de cierre/vencimiento
### Presupuesto
- Configurar ingresos y metas
- Tracking de gastos vs presupuesto
- Proyecciones
### Alertas
- Generación automática basada en fechas
- Panel de alertas con severidad
- Marcar como leídas
## Patrones de Código
### Inmutabilidad (OBLIGATORIO)
```typescript
// CORRECTO
const newDebts = [...debts, newDebt]
setDebts(newDebts)
// INCORRECTO
debts.push(newDebt) // MUTACIÓN!
```
### Manejo de Estado
```typescript
const store = useFinanzasStore()
const fixedDebts = store.fixedDebts
const addDebt = store.addFixedDebt
```
### Formularios
- Validar antes de enviar
- Mostrar errores de validación
- Usar estados locales con useState
- Llamar onSubmit con datos validados
### Estilos
- Usar clases de Tailwind
- Tema oscuro por defecto
- Colores de la paleta definida
- Hover states para interactividad
## Archivos Críticos
1. `/lib/types.ts` - Todos los tipos TypeScript
2. `/lib/store.ts` - Estado global con Zustand
3. `/lib/utils.ts` - Funciones utilitarias
4. `/lib/alerts.ts` - Lógica de alertas inteligentes
## Comandos
```bash
# Desarrollo
npm run dev
# Build
npm run build
# La app se sirve estáticamente desde /dist
```
## Notas Importantes
- **Persistencia**: Todo se guarda en localStorage automáticamente
- **Sin backend**: La app funciona completamente en el cliente
- **Responsive**: Debe funcionar en móvil y desktop
- **Dark mode**: Único tema, no hay toggle de tema claro
- **Accesibilidad**: Usar labels, aria-labels, roles apropiados