Aprobación de Gastos de Viaje — Lovable

Caso de Uso

El problema que resuelve

Las solicitudes de gastos de viaje se envían por email con tickets adjuntos. El proceso de aprobación es caótico: algunos managers aprueban por WhatsApp, otros por email, y el departamento financiero no tiene visibilidad del estado de cada solicitud. El tiempo medio de reembolso es de 45 días.

Resultado esperado: Una app donde el empleado sube sus tickets, el manager aprueba con un clic desde el móvil y Finanzas procesa el reembolso. Todo el flujo queda registrado con timestamps. El tiempo medio de reembolso cae a 7 días.

Este tutorial te guía paso a paso para construir y publicar esta aplicación de forma completamente autónoma, sin necesitar al departamento de IT. Tiempo estimado: 3-5 horas.

Paso 1

Generar el PRD con Claude 3.5 Sonnet

Antes de abrir Lovable, usa Claude para definir exactamente qué vas a construir. Un PRD (Product Requirements Document) bien redactado hace que Lovable construya la app correcta al primer intento, ahorrando horas de correcciones.

Copia este prompt en Claude y ajusta los detalles a tu empresa:

Actúa como un Product Manager senior experto en aplicaciones B2B. Escribe un PRD (Product Requirements Document) detallado para construir una app de aprobación de gastos de viaje con flujo de 3 niveles: empleado (sube tickets y solicita), manager (aprueba o rechaza con comentario) y finanzas (procesa el reembolso). Categorías de gasto: transporte, alojamiento, dietas, otros. Límites de aprobación: manager hasta 500€, finanzas para importes superiores.. El PRD debe incluir: 1. Resumen ejecutivo (2-3 frases) 2. Arquitectura de la base de datos (tablas, campos clave y relaciones) 3. Flujo de usuario paso a paso (qué hace cada tipo de usuario) 4. Lógica de roles y permisos (quién puede ver/editar qué) 5. Vistas principales de la interfaz (qué componentes visuales necesita cada pantalla) 6. Reglas de negocio específicas (validaciones, cálculos automáticos, alertas) Escribe el documento de forma clara y técnica, optimizado para ser introducido como prompt inicial en Lovable.dev (generador de código React/TypeScript/Supabase).

Paso 2

Construir la Interfaz Visual en Lovable

Abre lovable.dev, crea un nuevo proyecto y pega el PRD generado por Claude junto con esta instrucción inicial. No conectes Supabase todavía — primero valida que el diseño visual es correcto.

A continuación te proporciono el PRD para nuestra nueva aplicación. [PEGAR AQUÍ EL PRD GENERADO POR CLAUDE] Tu tarea inicial es construir ÚNICAMENTE el esqueleto visual de la aplicación: - No conectes todavía Supabase ni ninguna base de datos. - Usa datos de prueba (mock data) realistas para poblar las tablas y gráficos. - Diseño: una app con formulario de nueva solicitud (fecha, categoría, importe, descripción, foto del ticket), lista de solicitudes propias con estado, panel del manager (solicitudes pendientes de aprobación con botón aprobar/rechazar), panel de finanzas (solicitudes aprobadas pendientes de pago) y dashboard de métricas (tiempo medio aprobación, gasto por categoría). - Estilo visual: profesional, limpio, corporativo (Tailwind CSS, colores azul/gris). - Implementa la navegación completa entre todas las vistas del PRD. Genera la interfaz completa para que pueda validar el flujo visual antes de conectar los datos reales.

Cuando Lovable genere la interfaz, revísala en el preview. Usa el modo de selección visual (haz clic en cualquier elemento) para pedir ajustes específicos: "haz este botón más grande", "cambia esta tabla a vista de tarjetas", etc.

Paso 3

Conectar el Backend y los Datos Reales

Cuando el diseño visual esté validado, es el momento de hacer la aplicación funcional. Pide a Lovable que conecte la base de datos Supabase y active el sistema de login:

El diseño visual es correcto. Ahora vamos a hacer la aplicación funcional. 1. Conecta Supabase y crea las siguientes tablas: tablas para empleados (id, nombre, email, departamento, manager_id), solicitudes (id, empleado_id, fecha_viaje, importe_total, estado, fecha_solicitud), lineas_gasto (id, solicitud_id, categoria, importe, descripcion, ticket_url), aprobaciones (id, solicitud_id, aprobador_id, decision, comentario, fecha). 2. Añade un sistema de autenticación (Login con email y contraseña). 3. Implementa la lógica de roles: una app de aprobación de gastos de viaje con flujo de 3 niveles (empleado, manager, finanzas). Necesito que cada empleado vea solo sus solicitudes y que los managers reciban notificación de las pendientes. Publica la app en el hosting de Lovable. 4. Conecta todos los formularios para que inserten datos reales en Supabase. 5. Conecta todas las tablas y gráficos para que lean de la base de datos en lugar de usar mock data. 6. Configura las políticas de seguridad (Row Level Security) para que cada usuario solo acceda a sus propios datos. Pídeme confirmación antes de ejecutar las migraciones en la base de datos.

Lovable te pedirá que conectes tu cuenta de Supabase. Si no tienes una, créala gratis en supabase.com (el plan gratuito es suficiente para empezar). Lovable creará automáticamente todas las tablas y configurará la autenticación.

Paso 4

Publicar y Compartir con tu Equipo

Una vez la aplicación funciona con datos reales, puedes publicarla y compartirla con toda la empresa (cualquier tamaño) en cuestión de minutos, sin necesitar a IT:

En Lovable, haz clic en el botón "Publish" (esquina superior derecha).
Tu aplicación queda publicada en una URL del tipo tu-app.lovable.app.
Comparte esa URL con tu equipo. Cada persona crea su cuenta con su email corporativo.
Si quieres un dominio propio (ej. incidencias.tuempresa.com), ve a Project Settings → Custom Domain y sigue las instrucciones (requiere acceso al DNS de tu dominio).

Gestión de usuarios: Para añadir o eliminar usuarios, accede al panel de Supabase (app.supabase.com) → Authentication → Users. Puedes invitar usuarios por email directamente desde allí.

Nota sobre escalado: Esta app puede funcionar de forma autónoma para empresas de cualquier tamaño. Si quieres integrarla con el sistema de nóminas para el reembolso automático, IT puede construir esa integración.