Saltar al contenido principal

Componentes

Floutic utiliza una arquitectura de componentes modular basada en React y shadcn/ui, organizados por funcionalidad y reutilización.

Componentes Base​

Componentes Compartidos (src/components/shared/)​

Navegación principal con autenticación y menú responsive.

Características:

  • Menú hamburguesa en móvil
  • Detección automática de autenticación
  • UserMenu con dropdown
  • Enlaces contextuales según rol

Footer con enlaces legales e información de la plataforma.

Layout (src/layouts/Layout.astro)​

Layout base de todas las páginas con:

  • Header y Footer
  • Metadata SEO
  • Estilos globales
  • Scripts de inicialización

CookieBanner​

Banner de cookies RGPD con consentimiento.

EmptyState​

Estados vacíos con mensajes informativos y CTAs.

ErrorBoundary​

Manejo de errores React con fallback UI.

Loading​

Indicadores de carga reutilizables.

Toast​

Sistema de notificaciones toast.

NotificationCenter​

Centro de notificaciones en tiempo real con:

  • WebSocket para actualizaciones
  • Filtros por tipo
  • Marcar como leídas
  • Notificaciones push

Componentes de UI (shadcn/ui)​

Componentes accesibles y personalizables en src/components/ui/:

  • Button: Botones con variantes (primary, secondary, outline, ghost)
  • Input: Campos de entrada con validación
  • Card: Tarjetas de contenido
  • Badge: Etiquetas de estado
  • Select: Selectores desplegables
  • Textarea: Áreas de texto
  • Label: Etiquetas de formularios
  • Avatar: Avatares de usuario
  • Dialog: Modales y diálogos
  • DropdownMenu: Menús desplegables
  • Tabs: Sistema de pestañas
  • Table: Tablas de datos
  • Form: Formularios con validación

Componentes de Autenticación​

LoginForm​

Formulario de login estándar con validación Zod.

LoginFormSecure​

Login con autenticación segura (HttpOnly cookies, CSRF protection).

Características:

  • Validación de credenciales
  • Manejo de errores
  • Redirección post-login
  • Refresh automático de tokens

RegisterForm​

Formulario de registro con roles (empresa/experto).

Validación:

  • Email único
  • Fortaleza de contraseña
  • Términos y condiciones obligatorios
  • Sanitización XSS

Componentes de Proyectos​

ProjectForm​

Formulario para crear/editar proyectos con hitos.

Características:

  • Validación en tiempo real
  • Gestión de hitos secuenciales
  • Presupuesto y fechas
  • Validación de perfil verificado

ProjectDetail​

Vista detallada optimizada con pestañas:

  • Resumen: Información general
  • Propuestas: Propuestas de expertos
  • Hitos: Timeline de hitos
  • Pagos: Estado de pagos
  • Disputa: Gestión de disputas

ProjectDetailHeader​

Header sticky con información persistente y CTAs contextuales.

MilestoneManager​

Gestión completa de hitos con:

  • Creación y edición
  • Estados (pending, in_progress, completed)
  • Entregas y revisiones
  • Progreso visual

MilestoneTimeline​

Timeline visual de hitos con estados y fechas.

MilestoneProgress​

Progreso de hitos con entregas y revisiones.

Componentes de Expertos​

ExpertCardSEO​

Tarjeta de experto optimizada para SEO con:

  • Schema.org markup
  • Enlaces SEO-friendly
  • Información completa
  • Rating y reseñas

ExpertSearch​

Búsqueda de expertos con filtros avanzados:

  • Por habilidades
  • Por nivel (Global/Pro/Enterprise)
  • Por disponibilidad
  • Por rating

ExpertPublicProfileSEO​

Perfil público optimizado para SEO con:

  • Schema.org markup
  • JSON-LD
  • Soporte para slugs
  • Información completa

ExpertSelection​

Modal de selección de experto con:

  • Información completa
  • Comparación de propuestas
  • Historial de proyectos
  • CTAs contextuales

Componentes de Perfiles​

ProfileFormExperto​

Formulario de perfil de experto con:

  • Datos personales
  • Habilidades y experiencia
  • Portfolio
  • Datos fiscales (opcional)

ProfileFormEmpresa​

Formulario de perfil de empresa con:

  • Información de la empresa
  • Industria y sector
  • Datos fiscales
  • Validación de CIF

CompanyProfileOnboarding​

Onboarding mejorado de empresa con:

  • Secciones organizadas
  • Indicadores de progreso
  • Validación en tiempo real
  • Mensajes de ayuda contextuales

FiscalDataModal​

Modal bloqueante para solicitar datos fiscales cuando son requeridos.

Características:

  • No se puede cerrar sin completar
  • Formulario específico por tipo de perfil
  • Validación Zod en tiempo real
  • Integración con useFiscalData hook

Componentes de Dashboards​

DashboardEmpresa​

Dashboard completo para empresas con:

  • Mis proyectos (Kanban)
  • Estadísticas y métricas
  • Pagos y facturación
  • Reseñas recibidas

DashboardExperto​

Dashboard optimizado con pestañas:

  • Resumen: Métricas y estadísticas
  • Mis Proyectos: Proyectos activos
  • Aplicaciones: Aplicaciones enviadas
  • Invitaciones: Invitaciones recibidas

DashboardAdmin​

Dashboard unificado de admin con:

  • KPIs y métricas
  • Gestión de proyectos (Kanban)
  • Gestión de usuarios
  • Disputas y mediación
  • Configuración del sistema

UnifiedProjectDashboard​

Gestión de proyectos con vista Kanban (6 columnas consolidadas):

  • Borradores
  • Pendientes Validación
  • Publicados / En Licitación
  • En Progreso
  • En Disputa
  • Completados

Componentes de Chat​

ChatBox​

Componente de mensajería interna implementado.

Características:

  • Mensajes en tiempo real
  • Historial de conversación
  • Envío de archivos
  • Notificaciones

ProjectChat​

Wrapper integrado del chat en proyectos.

useChat​

Hook personalizado para gestión de estado del chat.

Componentes de Reseñas​

ReviewForm​

Formulario de reseñas bidireccional:

  • Empresa → Experto
  • Experto → Empresa
  • Editable indefinidamente

ReviewCard​

Tarjeta de reseña con información completa.

ReviewsList​

Lista de reseñas con estadísticas.

Componentes de Flujo de Contratación​

RequestBudgetForm​

Formulario completo para solicitar presupuesto desde perfil de experto.

ProposalComparison​

Vista comparativa completa de propuestas de expertos.

ProjectTimeline​

Timeline visual completo del progreso del proyecto.

DeliveryApproval​

Sistema completo para aprobar/rechazar entregas.

DisputeForm​

Formulario completo para crear disputas entre empresa y experto.

AdminProjectValidation​

Validación administrativa de proyectos.

AdminExpertCuration​

Curación de expertos para proyectos.

Componentes de UX/UI​

MetricsChart​

Gráficos interactivos (Line, Area, Bar, Pie) con recharts.

UserTour​

Tours guiados para nuevos usuarios.

Features​

Características de la plataforma.

Testimonials​

Testimonios de usuarios.

Hooks Personalizados​

useSecureAuth​

Hook principal para autenticación segura.

useIdleTimeout​

Hook de timeout por inactividad.

useSanitizedHTML​

Hook para sanitización de HTML con DOMPurify.

useFiscalData​

Hook para gestionar datos fiscales:

  • checkFiscalStatus() - Verificar estado fiscal
  • checkAndRequestFiscalData() - Verificar y retornar si está completo
  • updateFiscalData() - Actualizar datos fiscales

useKeyboardShortcuts​

Hook para shortcuts de teclado.

Más Información​