# Floutic Frontend Frontend de la plataforma Floutic construido con Astro, React, Tailwind CSS y shadcn/ui. ## 🚀 Características Implementadas - ✅ **Framework**: Astro con SSR y React para componentes interactivos - ✅ **Styling**: Tailwind CSS con colores personalizados de Floutic - ✅ **UI Components**: shadcn/ui para componentes accesibles - ✅ **State Management**: Zustand para gestión de estado - ✅ **API Client**: Axios con interceptores para autenticación JWT segura - ✅ **Autenticación Segura**: Sistema con HttpOnly cookies, CSRF protection y session_id único - ✅ **Aislamiento de Ventanas Privadas**: Validación de session_id para prevenir fuga de sesiones - ✅ **Testing**: Playwright para tests E2E + Vitest para tests unitarios (441 tests, 100% pasando) - ✅ **RGPD**: Banner de cookies y páginas legales - ✅ **Consentimiento legal**: Checkbox obligatorio (versionado interno vía `PUBLIC_TERMS_VERSION`) y registro de aceptación - ✅ **Formularios**: Login, registro y validación con feedback - ✅ **Dashboards optimizados**: Paneles rediseñados para empresa, experto y admin con mejor UX/DX - ✅ **Dashboard Admin mejorado**: Estadísticas rápidas, organización mejorada, métricas precisas - ✅ **Gestión de usuarios mejorada**: Vista optimizada con estadísticas por rol, estado y verificación - ✅ **Gestión de proyectos unificada**: Tab de proyectos con Kanban mejorado y estadísticas por estado - ✅ **Gestión unificada de perfiles**: Admin puede gestionar todos los perfiles - ✅ **Sistema de propuestas simplificado**: Sin filtros, enfoque directo - ✅ **Modal de selección de expertos**: Información completa y compacta - ✅ **Perfiles unificados**: Misma estructura para expertos y empresas - ✅ **Optimización UX/DX**: Mejoras significativas en usabilidad con animaciones profesionales - ✅ **Animaciones UX/DX**: Sistema de animaciones con @midudev/tailwind-animations aplicado en páginas públicas (Hero, Features, Testimonials, CTAs, FAQ, contacto, expertos, skills, como-funciona) - ✅ **Sistema de ofuscación de enlaces**: ObfuscatedLink para enlaces a páginas noindex (SEO) - ✅ **Página FAQ optimizada para SEO**: 12 FAQs orientadas a intenciones de búsqueda con Schema.org FAQPage - ✅ **Páginas con noindex**: Login, registro, legales, solicitar-presupuesto, 404 (SEO) - ✅ **Gestión de proyectos**: Crear, editar (incluye borradores), aplicar y gestionar proyectos - ✅ **Sistema de hitos secuenciales**: Gestión completa de milestones con entregas y revisiones - ✅ **Estado vacío guiado para hitos**: Mensaje contextual y creación rápida de hitos sugeridos cuando un proyecto aún no los tiene - ✅ **Gestión de entregas**: Formularios completos para expertos con archivos y descripciones - ✅ **Sistema de revisión**: Las empresas pueden aprobar, rechazar o solicitar revisiones - ✅ **Lógica de rechazos**: Cancelación automática tras 3 rechazos consecutivos - ✅ **Modal de pagos Stripe sincronizado**: Al autorizar un pago marca automáticamente el intento como `held` y muestra los totales actualizados - ✅ **Onboarding Stripe Connect**: El dashboard de experto guía el flujo, genera enlaces Express y valida el estado de la cuenta - ✅ **Enlaces seguros a Stripe**: El botón “Ver en Stripe” solo aparece para empresa/admin y detecta el dashboard test/live - ✅ **Sistema de reseñas**: Crear, ver y responder reseñas - ✅ **Búsqueda de expertos**: Filtros avanzados con herramientas de automatización - ✅ **Búsqueda de proyectos**: Filtros por categoría "Automatización" y skills específicas - ✅ **Sistema de propuestas**: Gestión simplificada sin filtros complejos - ✅ **Modal de selección**: Información completa de expertos en modal compacto - ✅ **Gestión unificada**: Admin puede gestionar todos los perfiles desde un panel - ✅ **Solicitar presupuesto**: Flujo directo desde perfil de experto - ✅ **Chat completo**: Mensajería interna con archivos, edición, eliminación y polling automático - ✅ **Centro de notificaciones**: Panel en tiempo real con WebSocket, reconexión manual y filtros de lectura - ✅ **Configuración de cuenta**: Cambio seguro de contraseña, email y username - ✅ **Notificaciones externas (webhook)**: UI en `/configuracion` para definir URL HTTPS, habilitar/deshabilitar, configurar método de autenticación (JWT o none), obtener/regenerar secreto JWT y probar el envío hacia n8n. Compatible con n8n HTTP Trigger usando JWT Auth. - ✅ **Gestión de propuestas**: Visualización y selección de expertos - ✅ **Tests completos**: 507 tests unitarios (100% pasando) + 31 tests E2E de seguridad (100% pasando) + ~200+ tests E2E funcionales configurados - ✅ **Visualización de lead_score**: Componentes AdminReputationManagement y AdminExpertLevelManagement con visualización completa del lead_score y sugerencias de nivel - ✅ **Validación robusta**: Campos obligatorios mínimos para facilitar registro - ✅ **Perfiles unificados**: Gestión completa de perfiles de expertos y empresas - ✅ **Perfil de administrador**: Flujos específicos (`/perfil/admin`) para crear/editar información del equipo desde el dashboard reutilizando los formularios existentes - ✅ **Página "Quiénes Somos"**: Página pública (`/quienes-somos`) que muestra el equipo de Floutic con perfiles de admin visibles, diseño responsive y SEO optimizado con Schema.org - ✅ **Subida de imágenes de perfil**: Componente `ProfilePictureUpload` para expertos y admin con validación de tipo y tamaño, preview y eliminación - ✅ **Onboarding mejorado de empresa**: Nuevo componente `CompanyProfileOnboarding` con secciones organizadas, indicadores de progreso, validación en tiempo real y mensajes de ayuda contextuales - ✅ **Control de acceso a creación de proyectos**: Validación multi-capa (React component, script del formulario, UI del dashboard) para restringir creación solo a empresas con perfil verificado - ✅ **Mensajes de estado de perfil**: Alertas informativas cuando el perfil está pendiente de verificación o falta - ✅ **Optimización UX/DX**: Interfaces simplificadas y eficientes - ✅ **Dashboards rediseñados**: Mejor organización y usabilidad - ✅ **Sistema de propuestas simplificado**: Sin filtros complejos, enfoque directo - ✅ **Modal de selección optimizado**: Información completa en modal compacto - ✅ **Gestión unificada de perfiles**: Admin puede gestionar todos los perfiles - ✅ **Opciones de industria ampliadas**: 17 sectores disponibles en formularios de empresa - ✅ **Sistema de datos fiscales para facturación legal** - Modal bloqueante (`FiscalDataModal`) que solicita datos fiscales completos cuando empresas crean su primer proyecto o expertos son seleccionados para su primer proyecto. Incluye validación en tiempo real, formularios diferenciados para empresa/experto y hook `useFiscalData` para gestión de estado. 16 tests frontend implementados (100% pasando) ## 🛠️ Instalación (Docker, único modo soportado) ```bash # Desde la raíz del repo ./start-dev.sh # O manualmente docker compose up -d frontend ``` - Frontend disponible en `http://localhost:3000` - Para instalar nuevas dependencias: `docker compose exec frontend npm install` - Para Playwright (E2E): `docker compose exec frontend npx playwright install --with-deps` ## 🏃‍♂️ Desarrollo ```bash # Ver logs docker compose logs -f frontend # Acceder al contenedor docker compose exec frontend sh ``` ## 🧪 Testing ### ⚡ Configuración Optimizada Los tests E2E están configurados para **máximo rendimiento y estabilidad**: - **✅ Chrome Desktop** y **Mobile Chrome** en paralelo (4 specs → 8 ejecuciones por suite) - **🚀 Rendimiento:** Tests unitarios ejecutándose en ~13 segundos en hardware local - **🎯 Cobertura:** Flujos críticos reales (contratación curada, aplicación invitada, gestión de perfil, onboarding Stripe) - **✅ Tests Unitarios:** 507 tests con Vitest (100% en verde, incluyendo 13 tests de AdminGHLMonitoring y 32 tests de visualización de lead_score) - **🧹 Limpieza automática:** `global-setup.ts` y `global-teardown.ts` reinician el escenario demo antes y después de Playwright, evitando residuos en la base de datos ### Tests Unitarios (Vitest) **Última ejecución (Noviembre 2025):** `docker compose exec frontend sh -c "cd /app && npm test -- --watch=false"` → 507 tests pasando en 47 archivos, sin fallos. Incluye 13 tests para `AdminGHLMonitoring` y 32 tests para visualización de lead_score (`AdminReputationManagement` y `AdminExpertLevelManagement`). ```bash # Ejecutar desde el host (orquestado por Docker) ./scripts/test_frontend_unit.sh # Ejecutar toda la suite (Docker Compose recomendado) docker compose exec frontend sh -c "cd /app && npm test -- --watch=false" # Ejecutar modo CI / no interactivo docker compose exec frontend sh -c "cd /app && npm run test:unit" # Ejecutar con cobertura de código docker compose exec frontend sh -c "cd /app && npm run test:coverage" # Ejecutar subconjuntos útiles desde Docker Compose docker compose exec frontend sh -c "cd /app && npm run test:api" docker compose exec frontend sh -c "cd /app && npm run test:components" docker compose exec frontend sh -c "cd /app && npm run test:curated-flow" # Modo watch dentro del contenedor docker compose exec frontend sh -c "cd /app && npm run test" docker compose exec frontend sh -c "cd /app && npm run test:watch" # Ejecutar un archivo o patrón específico docker compose exec frontend sh -c "cd /app && npx vitest run src/components/features/__tests__/DashboardExperto.test.tsx" docker compose exec frontend sh -c "cd /app && npx vitest run src/__tests__/utils/sanitizer.test.ts" ``` ### Tests E2E con Playwright **Última ejecución (12/11/2025):** `docker compose exec -T frontend bash -c "cd /app && npm run test:e2e"` → 8 suites críticas (Chromium + Mobile Chrome) pasando tras aplicar `alembic upgrade head` al backend. #### Tests de Seguridad E2E (31 tests, 100% pasando) Floutic incluye una suite completa de tests E2E de seguridad que valida todas las medidas de seguridad implementadas: - **Security Headers and CORS** (3 tests) - Verificación de headers de seguridad en respuestas de API - Verificación de CORS permite origen confiable - Verificación de que OPTIONS requests funcionan correctamente - **Authentication Secure** (6 tests) - Login seguro con HttpOnly cookies - Verificar que access token no se almacena en localStorage - Renovación automática de tokens - Logout seguro elimina cookies - Protección CSRF en requests autenticados - session_id se almacena en sessionStorage y se envía en headers - **Concurrent Sessions** (3 tests) - Múltiples usuarios de la misma empresa pueden hacer login simultáneamente - Límite de sesiones concurrentes por usuario individual (máximo 10) - Aislamiento de sesiones entre pestañas - **CSRF Protection** (4 tests) - Verificar que requests POST incluyen CSRF token - Verificar que requests sin CSRF token son rechazados - Verificar que CSRF token se renueva después de refresh - Verificar CSRF en diferentes tipos de requests (POST, PUT, DELETE, PATCH) - **Input Validation and XSS Protection** (9 tests) - Sanitizar inputs en formulario de registro - Sanitizar inputs en formulario de creación de proyecto - Sanitizar mensajes de chat - Verificar que DOMPurify está disponible y configurado - Sanitizar URLs peligrosas - Verificar que contenido renderizado no ejecuta scripts - Validación de formato de email - Validación de fortaleza de contraseña - **Rate Limiting Frontend Handling** (5 tests) - Verificar mensaje de error cuando hay rate limiting en login - Verificar que el frontend maneja rate limiting global correctamente - Verificar mensaje apropiado para rate limiting por IP - Verificar que el frontend no permite múltiples requests simultáneas que causen rate limiting - Verificar que el frontend muestra tiempo de espera para rate limiting **Ejecutar tests de seguridad:** ```bash ./scripts/test_frontend_security.sh # O directamente desde Docker: docker compose exec frontend npx playwright test --config=playwright-test.config.ts \ tests/security-headers-cors.spec.ts \ tests/authentication-secure.spec.ts \ tests/concurrent-sessions.spec.ts \ tests/csrf-protection.spec.ts \ tests/input-validation-xss.spec.ts \ tests/rate-limiting-frontend.spec.ts ``` #### Tests Funcionales E2E ```bash # Ejecutar desde el host orquestando servicios con Docker # (desactiva rate limiting, habilita reset y ejecuta Playwright con workers=1) ./scripts/test_e2e.sh # Ajustar paralelismo o filtrar suites PLAYWRIGHT_WORKERS=2 ./scripts/test_e2e.sh --grep "stripe-onboarding" # Asegúrate de tener backend y frontend en ejecución # (en caso de ejecutar manualmente sin el script anterior) docker compose up -d backend frontend # Ejecutar toda la suite (Chromium + Mobile Chrome) en modo headless docker compose exec frontend npx playwright test # Ejecutar con interfaz visual (ideal para depurar) docker compose exec frontend npx playwright test --ui # Ejecutar un archivo o patrón específico docker compose exec frontend npx playwright test tests/e2e/complete-project-flow.spec.ts docker compose exec frontend npx playwright test --grep "Stripe Connect" # Generar reporte HTML sin abrir navegador docker compose exec frontend npx playwright test --reporter=html ``` > Notas: > - Si el endpoint `POST /api/v1/testing/reset-e2e` no está habilitado (`ENABLE_TEST_RESET_ENDPOINT`), Playwright usará el fallback `docker compose exec backend python clean_and_seed.py --scenario full`. El warning 404 es esperado en ese caso. > - Asegúrate de que la migración `d2a1a3c20c81_add_terms_consent_to_users` esté aplicada (`docker compose exec backend alembic upgrade head`) para evitar errores 500 al registrar usuarios de prueba. ## 📁 Estructura del Proyecto ``` frontend/ ├── src/ │ ├── components/ │ │ ├── ui/ # shadcn/ui components │ │ ├── shared/ # Componentes reutilizables │ │ ├── features/ # Componentes por funcionalidad │ │ └── features/__tests__/ # Tests unitarios │ ├── layouts/ │ │ └── Layout.astro # Layout principal │ ├── pages/ # Rutas Astro │ ├── lib/ │ │ ├── api/ # Cliente API y endpoints │ │ ├── stores/ # Zustand stores │ │ ├── utils/ # Utilidades │ │ ├── types/ # TypeScript types │ │ └── hooks/ # Hooks personalizados │ ├── styles/ │ │ └── global.css # Estilos globales │ └── middleware/ # Middleware de autenticación ├── tests/ # Tests E2E ├── playwright.config.ts # Configuración Playwright ├── vitest.config.ts # Configuración Vitest └── test-comprehensive.sh # Script de testing completo ``` ## 🎨 Páginas Implementadas ### Páginas Públicas ✅ - `/quienes-somos` - Página "Quiénes Somos" con información del equipo de Floutic (perfiles de admin visibles) - ✅ `/` - Landing page con hero y características - ✅ `/login` - Iniciar sesión con validación (noindex para SEO) - ✅ `/forgot-password` - Solicitud de recuperación de contraseña - ✅ `/reset-password` - Restablecer contraseña mediante token seguro - ✅ `/registro` - Registro de usuarios con roles (noindex para SEO) - ✅ `/como-funciona` - Cómo funciona la plataforma - ✅ `/marketplace` - Marketplace de proyectos - ✅ `/expertos` - Búsqueda de expertos con filtros - ✅ `/404` - Página personalizada mejorada con diseño Floutic, CTA de retorno y enlaces útiles (noindex) - ✅ `/faq` - Preguntas frecuentes optimizadas para SEO con 12 FAQs orientadas a intenciones de búsqueda (Schema.org FAQPage) - ✅ `/contacto` - Página de contacto con animaciones UX/DX - ✅ `/solicitar-presupuesto` - Solicitar presupuesto desde perfil de experto (noindex para SEO, enlaces ofuscados) - ✅ `/legales/privacidad` - Política de privacidad (noindex para SEO) - ✅ `/legales/terminos` - Términos y condiciones (noindex para SEO) - ✅ `/legales/cookies` - Política de cookies (noindex para SEO) ### Páginas Protegidas ✅ - ✅ `/dashboard/empresa` - Dashboard para empresas (optimizado) con alertas de estado de perfil - ✅ `/dashboard/experto` - Dashboard para expertos (optimizado) - ✅ `/dashboard/admin` - Panel de administración (unificado) - ✅ `/perfil/crear` - Crear perfil de empresa (onboarding mejorado con `CompanyProfileOnboarding`) - ✅ `/perfil/experto` - Crear o editar perfil de experto - ✅ `/configuracion` + `/perfil/{empresa|experto|admin}` - Configurar cuenta y perfil profesional - ✅ `/perfil/empresa` - Editar perfil de empresa - ✅ `/perfil/experto` - Editar perfil de experto - ✅ `/configuracion` - Configuración de cuenta (contraseña, email, username) - ✅ `/publicar-proyecto` - Publicar nuevo proyecto con hitos (requiere perfil verificado) - ✅ `/proyecto/[id]` - Detalle de proyecto con chat y hitos (optimizado UX/DX, permite edición para admin) - ✅ `/expertos/[slug]` - Perfil público SEO friendly de expertos (SSR) ## 🔧 Configuración ### Variables de Entorno Crea un archivo `.env` basado en `.env.example`: ```env VITE_API_URL=http://localhost:8000 VITE_API_BASE_URL=http://localhost:8000/api VITE_STRIPE_PUBLISHABLE_KEY=pk_test_xxx VITE_STRIPE_DASHBOARD_URL_BASE=https://dashboard.stripe.com/test/payments/ VITE_ENVIRONMENT=development VITE_DEBUG=true PUBLIC_TERMS_VERSION=2025-11-12 ``` ### Colores de Floutic Los colores personalizados están configurados en `tailwind.config.mjs`: - **Azul Floutic**: `#1C4E80` - **Verde Floutic**: `#35C1A3` - **Gris Floutic**: `#F3F6FA` ## 🧪 Categorías de Tests Implementadas ### 1. Tests de Autenticación (`auth.spec.ts`) ✅ - ✅ Formularios de login y registro con validación - ✅ Validación de campos y mensajes de error - ✅ Redirecciones de autenticación - ✅ Banner de cookies y RGPD - ✅ Verificación de consentimiento de términos (checkbox obligatorio + versión) - ✅ Manejo de errores y feedback visual ### 2. Tests de Dashboard (`dashboard.spec.ts`) ✅ - ✅ Dashboard de empresa con métricas - ✅ Dashboard de experto con proyectos activos - ✅ Dashboard de admin con gestión de usuarios - ✅ Navegación entre tabs y acciones rápidas ### 3. Tests de Formularios (`forms.spec.ts`) ✅ - ✅ Formularios de perfil con validación - ✅ Formularios de proyecto con hitos - ✅ Validación de campos en tiempo real - ✅ Funcionalidades específicas por rol ### 4. Tests de Accesibilidad (`accessibility.spec.ts`) ✅ - ✅ Estructura de headings semántica - ✅ Labels de formularios accesibles - ✅ Navegación por teclado completa - ✅ Contraste de colores WCAG AA - ✅ Texto alternativo de imágenes ### 5. Tests de Componentes (`components.spec.ts`) ✅ - ✅ Componentes de UI (shadcn/ui) - ✅ Componentes de formularios - ✅ Componentes de chat - ✅ Componentes de hitos y reseñas ## 💰 Flujo de Solicitar Presupuesto ### Descripción Sistema que permite a las empresas solicitar presupuestos directamente desde el perfil de un experto, creando proyectos privados dirigidos a un experto específico. ### Características - **CTA mejorado**: Botón "Solicitar Presupuesto" con icono Euro (€) en lugar de "Contactar" - **Navegación directa**: Desde perfil de experto → formulario de solicitud - **Parámetros de URL**: `expertId` y `expertName` se pasan automáticamente - **Formulario personalizado**: Campos específicos para proyectos privados - **Validación robusta**: Campos obligatorios y validación de datos - **Redirección inteligente**: Si no hay `expertId`, redirige a `/expertos` ### Componentes Involucrados - `ExpertPublicProfileSEO.tsx` - Botón "Solicitar Presupuesto" - `RequestBudgetForm.tsx` - Formulario de solicitud - `solicitar-presupuesto.astro` - Página principal del flujo ### API Endpoints - `POST /api/projects/` - Crear proyecto privado - `GET /api/profiles/{id}` - Obtener datos del experto ### Tests E2E ```typescript test('Flujo completo: Solicitar presupuesto desde perfil de experto', async ({ page }) => { // 1. Navegar a perfil de experto await page.goto('/expertos/carlos_mendez'); // 2. Hacer clic en "Solicitar Presupuesto" await page.click('button:has-text("Solicitar Presupuesto")'); // 3. Verificar navegación await expect(page).toHaveURL(/\/solicitar-presupuesto/); await expect(page).toHaveURL(/expertId=1/); }); ``` ## 🚀 Deployment ### Docker ```bash # Build de la imagen docker build -t floutic-frontend . # Ejecutar contenedor docker run -p 3000:3000 floutic-frontend ``` ### Variables de Entorno de Producción ```env VITE_API_URL=https://api.floutic.com VITE_API_BASE_URL=https://api.floutic.com/api VITE_STRIPE_PUBLISHABLE_KEY=pk_live_... VITE_STRIPE_DASHBOARD_URL_BASE=https://dashboard.stripe.com/payments/ VITE_ENVIRONMENT=production VITE_DEBUG=false ``` ## 📊 Monitoreo y Analytics El proyecto incluye: - **Banner de cookies** con gestión de preferencias - **Páginas legales** (privacidad y términos) - **Configuración RGPD** completa - **Tests de accesibilidad** automatizados ## 🔍 Troubleshooting ### Problemas Comunes 1. **Build falla**: Verifica que todas las dependencias estén instaladas 2. **Tests fallan**: Ejecuta `docker compose exec frontend npm run test:install` para instalar browsers 3. **Estilos no cargan**: Verifica que Tailwind esté configurado correctamente 4. **API no conecta**: Verifica las variables de entorno ### Logs y Debugging ```bash # Ver logs de build docker compose exec frontend sh -c "cd /app && npm run build 2>&1 | tee build.log" # Tests con más detalle docker compose exec frontend sh -c "cd /app && npm run test:headed" # Ver reportes de tests docker compose exec frontend sh -c "cd /app && npm run test:report" ``` ## 📈 Métricas de Calidad El proyecto incluye: - ✅ **100% TypeScript** con tipos estrictos - ✅ **Tests E2E** para funcionalidades críticas - ✅ **Tests de accesibilidad** automatizados - ✅ **RGPD compliance** completo - ✅ **Responsive design** para móvil y desktop - ✅ **SEO optimizado** con meta tags, Schema.org y optimización de intenciones de búsqueda - Páginas no útiles para SEO tienen `noindex` (login, registro, legales, solicitar-presupuesto, 404) - Páginas importantes mantienen `index, follow` para mejor posicionamiento - Página FAQ optimizada para intenciones de búsqueda (12 FAQs con Schema.org FAQPage) - Sistema de ofuscación de enlaces (ObfuscatedLink) para enlaces a páginas noindex - Tests automatizados verifican la configuración SEO correcta ## 🤝 Contribución 1. Fork el proyecto 2. Crea una rama para tu feature (`git checkout -b feature/AmazingFeature`) 3. Commit tus cambios (`git commit -m 'Add some AmazingFeature'`) 4. Push a la rama (`git push origin feature/AmazingFeature`) 5. Abre un Pull Request ## 📄 Licencia Este proyecto está bajo la Licencia MIT - ver el archivo [LICENSE](LICENSE) para detalles.