Toshl Expense Manager

Aplicación web para gestionar gastos de Toshl con edición inline y filtros avanzados.

Características

• ✅ Tabla editable con autosave
• ✅ Autocomplete para categorías y tags
• ✅ Filtros por fecha, categoría y tags (múltiples tags soportadas)
• ✅ Tags como pills dentro del input (click para remover)
• ✅ Gráficos de pastel para gastos por categoría y tags
• ✅ Edición masiva (batch editing) de categoría y tags
• ✅ Selección múltiple con checkboxes
• ✅ Total de gastos visible
• ✅ Configuración de API Token mediante modal
• ✅ Fecha por defecto: mes actual
• ✅ Botón de refrescar datos
• ✅ Notificaciones toast (sin alerts)
• ✅ Logs del servidor para debugging

Uso

1. Accede a la aplicación en: https://4000--019ad455-1dab-760d-bd91-f80a267c3b9d.us-east-1-01.gitpod.dev

2. Haz clic en el icono de engranaje ⚙️ para configurar tu API Token

3. Obtén tu API Token en: https://toshl.com/developer/apps/

4. Guarda y conecta

5. Edita cualquier campo haciendo clic en él

6. Los cambios se guardan automáticamente

Filtros

• Fecha: Selecciona rango de fechas (por defecto: mes actual)
• Categoría: Escribe para buscar con autocomplete
• Tags: Escribe para buscar, presiona Enter o selecciona del autocomplete
  • Las tags seleccionadas aparecen como pills dentro del input
  • Click en una pill para removerla
  • Soporta múltiples tags (filtro OR)

Gráficos

• Gasto por Categoría: Muestra las top 10 categorías con mayor gasto
• Gasto por Tags: Muestra las top 10 tags con mayor gasto
• Los gráficos se actualizan automáticamente al filtrar

Edición Masiva

1. Selecciona múltiples gastos usando los checkboxes
2. Aparecerá una barra azul mostrando cuántos gastos has seleccionado
3. Click en "Editar selección"
4. Cambia la categoría y/o agrega tags
5. Click en "Aplicar cambios"
6. Todos los gastos seleccionados se actualizarán simultáneamente

Iniciar servidor localmente

npm install
npm start

El servidor se ejecutará en el puerto 4000.

Ver logs del servidor

tail -f server.log

Los logs muestran todas las peticiones a la API de Toshl y ayudan a debuggear errores.

Notas técnicas

Actualización de entries recurrentes

La aplicación maneja automáticamente entries que son parte de series recurrentes:

• Agrega el parámetro ?update=one para actualizar solo el entry específico
• Envía todos los campos requeridos por la API de Toshl (amount, currency, date, desc, account, category, modified)
• Preserva el campo modified original para evitar errores de validación

Manejo de errores

El servidor devuelve información detallada de errores de la API de Toshl:

• Código de estado HTTP
• Mensaje de error completo
• Campos con errores específicos
• URL y método de la petición que falló