Saltar al contenido principal

Componentes del Frontend

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
  • Logo y branding de Floutic

Uso:

<Header />

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

Incluye:

  • Enlaces a términos y condiciones
  • Enlaces a política de privacidad
  • Información de contacto
  • Enlace a Preguntas Frecuentes (FAQ)
  • Redes sociales

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
  • EmailVerificationBanner (si el usuario no ha verificado su email)

CookieBanner​

Banner de cookies RGPD con consentimiento.

Características:

  • Cumplimiento RGPD
  • Gestión de preferencias
  • Persistencia de consentimiento
  • Integración con analytics

EmptyState​

Estados vacíos con mensajes informativos y CTAs.

Props:

  • title: Título del estado vacío
  • description: Descripción del estado
  • action: CTA opcional
  • icon: Icono opcional

Ejemplo:

<EmptyState
  title="No hay proyectos"
  description="Crea tu primer proyecto para empezar"
  action={<Button onClick={handleCreate}>Crear Proyecto</Button>}
/>

ErrorBoundary​

Manejo de errores React con fallback UI.

Características:

  • Captura errores de renderizado
  • Muestra UI de error amigable
  • Logging de errores
  • Opción de reintentar

Loading​

Indicadores de carga reutilizables.

Variantes:

  • Spinner simple
  • Skeleton loaders
  • Progress bars
  • Loading states contextuales

ProfileImage​

Componente reutilizable para mostrar imágenes de perfil con normalización automática de URLs.

Versiones:

  • ProfileImage.tsx - Para componentes React
  • ProfileImage.astro - Para páginas Astro

Características:

  • Normalización automática de URLs (evita duplicación de /api)
  • Fallback a placeholder con inicial del nombre
  • Estilo consistente (cuadrado, rounded-xl)
  • Soporte para diferentes tamaños
  • Accesibilidad (alt text, loading lazy, itemprop para SEO)

Props:

  • picturePath - Ruta o URL de la imagen de perfil
  • name - Nombre del usuario para placeholder y alt text
  • size - Tamaño de la imagen en píxeles (default: 128)
  • className - Clases CSS adicionales
  • alt - Alt text personalizado
  • showPlaceholder - Mostrar placeholder si no hay imagen (default: true)

Ejemplo:

<ProfileImage
  picturePath={user.profile_picture}
  name={user.username}
  size={128}
  alt={`Foto de perfil de ${user.username}`}
/>

Uso en Astro:

<ProfileImage
  picturePath={expert.profile_picture}
  name={expertName}
  size={128}
  className="bg-white text-green-600"
/>

Toast​

Sistema de notificaciones toast.

Tipos:

  • success: Notificación de éxito
  • error: Notificación de error
  • warning: Advertencia
  • info: Información

Uso:

import { toast } from '@/lib/utils/toast';

toast.success('Proyecto creado exitosamente');
toast.error('Error al crear proyecto');

Componente de enlace ofuscado para SEO. Crea enlaces que los bots de búsqueda no pueden seguir, útil para páginas con noindex o enlaces que no queremos que Google indexe.

Características:

  • URL codificada en base64 (no visible en el DOM)
  • No usa href real (usa javascript:void(0))
  • Navegación via JavaScript onclick
  • Añade rel="nofollow" como capa adicional
  • Accesible (keyboard navigation, role, tabindex)
  • Compatible con View Transitions de Astro

Versiones:

  • ObfuscatedLink.tsx - Para componentes React
  • ObfuscatedLink.astro - Para páginas Astro

Uso en Astro:

---
import ObfuscatedLink from '../components/shared/ObfuscatedLink.astro';
---

<ObfuscatedLink
  href="/solicitar-presupuesto?expertId=123&expertName=Juan"
  class="btn btn-primary"
>
  Solicitar Presupuesto
</ObfuscatedLink>

Uso en React:

import ObfuscatedLink from '../components/shared/ObfuscatedLink';

<ObfuscatedLink
  href="/solicitar-presupuesto?expertId=123"
  className="btn btn-primary"
  newTab={false}
  onBeforeNavigate={() => {
    // Callback opcional antes de navegar
    return true; // return false para cancelar
  }}
>
  Solicitar Presupuesto
</ObfuscatedLink>

Props (React):

  • href: URL destino (será ofuscada)
  • children: Contenido del enlace
  • className: Clases CSS
  • newTab: Abrir en nueva pestaña (default: false)
  • title: Título/tooltip del enlace
  • onBeforeNavigate: Callback antes de navegar (return false para cancelar)
  • dataAttributes: Data attributes adicionales

Cuándo usar:

  • Enlaces desde páginas indexadas hacia páginas con noindex
  • Enlaces a formularios o páginas internas que no queremos que Google indexe
  • Enlaces que pueden cambiar frecuentemente y no queremos que Google cachee

NotificationCenter​

Centro de notificaciones en tiempo real con:

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

Componentes de UI (shadcn/ui)​

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

Button​

Botones con variantes y tamaños.

Variantes:

  • default: Botón primario
  • secondary: Botón secundario
  • outline: Botón con borde
  • ghost: Botón sin fondo
  • destructive: Botón de acción destructiva

Tamaños:

  • sm: Pequeño
  • default: Normal
  • lg: Grande
  • icon: Solo icono

Input​

Campos de entrada con validación.

Características:

  • Validación en tiempo real
  • Mensajes de error
  • Estados disabled/readonly
  • Tipos: text, email, password, number, etc.

Card​

Tarjetas de contenido con header, body y footer.

Estructura:

<Card>
  <CardHeader>
    <CardTitle>Título</CardTitle>
  </CardHeader>
  <CardContent>
    Contenido
  </CardContent>
</Card>

Badge​

Etiquetas de estado con variantes de color.

Variantes:

  • default: Gris
  • success: Verde
  • warning: Amarillo
  • error: Rojo
  • info: Azul

Select​

Selectores desplegables accesibles.

Características:

  • Búsqueda integrada
  • Agrupación de opciones
  • Selección múltiple opcional
  • Validación

Dialog​

Modales y diálogos accesibles.

Características:

  • Focus trap
  • Cierre con ESC
  • Overlay clickable
  • Animaciones suaves

Tabs​

Sistema de pestañas accesible.

Uso:

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Contenido 1</TabsContent>
  <TabsContent value="tab2">Contenido 2</TabsContent>
</Tabs>

Componentes de Autenticación​

LoginForm​

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

Características:

  • Validación de credenciales
  • Manejo de errores
  • Redirección post-login
  • Recordar sesión opcional

LoginFormSecure​

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

Características:

  • HttpOnly cookies
  • CSRF protection
  • Session ID único
  • Refresh automático de tokens
  • Validación de session_id

RegisterForm​

Formulario de registro con roles (empresa/experto).

Validación:

  • Email único
  • Fortaleza de contraseña (validación en tiempo real)
  • Términos y condiciones obligatorios
  • Sanitización XSS
  • Validación de username
  • Validación onBlur: Todos los campos validan al salir del campo (no solo al enviar)
  • Mensajes de error específicos: Cada campo muestra su error específico
  • Requisitos de contraseña visibles: Se muestran desde el principio, no solo al escribir

Campos:

  • Email (validación onBlur)
  • Username (validación onBlur, no puede ser igual a la contraseña)
  • Password (validación onBlur, requisitos visibles siempre)
  • Confirm Password (validación onBlur, debe coincidir)
  • Roles (checkboxes: empresa y/o experto, validación al cambiar)
  • Términos y condiciones (checkbox, validación al cambiar)

Requisitos de Contraseña (siempre visibles):

  • Mín. 8 caracteres
  • 1 mayúscula
  • 1 minúscula
  • 1 número
  • 1 carácter especial

Flujo post-registro:

  • Login automático
  • Email de verificación enviado
  • Banner de verificación mostrado

EmailVerificationBanner​

Banner recordatorio para verificar email.

Características:

  • Se muestra automáticamente si user.email_verified === false
  • Botón para reenviar email de verificación
  • Se puede cerrar temporalmente (oculto por 24 horas)
  • Desaparece automáticamente cuando el email se verifica
  • Visible en todas las páginas a través de AppShell

Ubicación: src/components/shared/EmailVerificationBanner.tsx

Uso:

// Se incluye automáticamente en AppShell
<EmailVerificationBanner />

EmailVerification​

Página/componente para verificar email con token.

Características:

  • Procesa token de verificación desde URL
  • Muestra estado de carga, éxito o error
  • Redirige automáticamente al dashboard tras verificación
  • Actualiza estado de autenticación

Ruta: /verificar-email?token=<token>

Ubicación: src/components/features/EmailVerification.tsx

Componentes de Proyectos​

ProjectForm​

Formulario para crear proyectos. También usado en /publicar-proyecto.

Características:

  • Validación en tiempo real con indicadores visuales
  • Presupuesto y fechas
  • Validación de perfil verificado
  • Categoría (desplegable)
  • Habilidades requeridas (opcional, selector visual con botones)
  • Descripción con contador de caracteres

Validaciones:

  • Título requerido (mín. 10, máx. 200 caracteres)
  • Descripción requerida (mín. 50, máx. 2000 caracteres)
  • Presupuesto mínimo (mayor a 0€, máximo 100.000€)
  • Fecha límite válida: Si se especifica, debe ser igual o posterior a la fecha actual
  • Habilidades requeridas: Opcional (puede dejarse en blanco)

Nota: El formulario de "Editar borrador" (ProjectDraftEditDialog) es idéntico en estructura, campos, validaciones y notas aclaratorias.

ProjectDetail​

Vista detallada optimizada con pestañas.

Pestañas:

  • Resumen: Información general del proyecto
  • Propuestas: Propuestas de expertos con comparación
  • Hitos: Timeline de hitos con entregas
  • Pagos: Estado de pagos Escrow
  • Disputa: Gestión de disputas (si aplica)

Características:

  • Header sticky con información persistente
  • CTAs contextuales según estado
  • Chat integrado
  • Notificaciones en tiempo real

ProjectDetailHeader​

Header sticky con información persistente y CTAs contextuales.

Información mostrada:

  • Título del proyecto
  • Estado actual
  • Presupuesto
  • Fecha límite
  • Experto asignado (si aplica)

CTAs según estado:

  • draft: Editar, Enviar para validación
  • pending_publication: Esperando validación
  • published: Ver propuestas
  • assigned: Ver hitos, Chat
  • completed: Ver reseñas

MilestoneManager​

Gestión completa de hitos con:

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

Funcionalidades:

  • Crear hitos sugeridos con un clic
  • Editar hitos existentes
  • Ver entregas y revisiones
  • Aprobar/rechazar entregas
  • Ver progreso visual

MilestoneTimeline​

Timeline visual de hitos con estados y fechas.

Estados visuales:

  • ✅ Completado (verde)
  • 🔄 En progreso (azul)
  • ⏳ Pendiente (gris)
  • ❌ Rechazado (rojo)

MilestoneProgress​

Progreso de hitos con entregas y revisiones.

Características:

  • Barra de progreso visual
  • Contador de hitos completados
  • Estado vacío guiado
  • Creación rápida de hitos sugeridos

Componentes de Administración​

AdminEditProjectModal​

Modal para editar proyectos como administrador con funcionalidades avanzadas.

Características:

  • Edición completa de información del proyecto
  • Gestión de tallaje Floutic (Admin Override)
  • Selección de expertos con Asistente de Curación IA
  • Validaciones de negocio
  • Vista de aplicaciones y propuestas

Funcionalidades principales:

  • Editar información básica: Título, descripción, categoría, presupuesto, fecha límite
  • Configuración: Tipo de proyecto, estado, nivel de servicio, urgencia
  • Tallaje Floutic: Modificar tamaño y rangos de precio con razón de cambio
  • Selección de Expertos (solo proyectos curados):
    • Asistente de Curación IA: Sugerencias automáticas de expertos
    • Filtros avanzados de búsqueda (skills, rating, tarifa, ubicación)
    • Vista de expertos ya seleccionados/invitados
    • Pre-selección de expertos sugeridos por IA con badge visual

Validaciones:

  • Fecha límite no puede ser anterior a hoy
  • Presupuesto debe ser válido
  • Campos requeridos: título y descripción
  • Validación de expertos seleccionados

Estados del proyecto:

  • Select de estados simplificado: Solo muestra estados principales del workflow (draft, pending_publication, published_curated, published_private, bidding, in_progress, disputed, completed)
  • Estados automáticos (assigned, in_review, payment_pending) se mapean automáticamente a estados principales al cargar
  • Proyectos no publicados (draft/pending_publication): Los expertos se seleccionan pero las invitaciones se envían al aprobar
  • Proyectos publicados: Las invitaciones se envían inmediatamente

ProjectValidationDialog​

Dialog para aprobar/rechazar proyectos con curación de expertos.

Características:

  • Aprobación o rechazo de proyectos
  • Selección de tipo de publicación (privado/curado)
  • Asignación de talla Floutic
  • Selección de expertos con Asistente de Curación IA
  • Validación de requisitos
  • Aclaraciones visuales sobre notas públicas

Funcionalidades:

  • Validación de Floutic Sizing Enforcement
  • Selección de expertos con sugerencias de IA
  • Pre-selección automática de expertos recomendados
  • Badge visual para expertos sugeridos por IA
  • Campo de notas con advertencia visual: Badge "PÚBLICO - Visible para la empresa" y alerta explicativa indicando que las notas de validación son visibles para la empresa propietaria del proyecto

Notas de validación:

  • ⚠️ PÚBLICAS: Las notas/comentarios añadidos son visibles para la empresa
  • Se muestran como "Notas de validación" en el detalle del proyecto
  • El sistema muestra advertencia visual antes de escribir
  • Recomendación: Usar tono profesional y constructivo

Componentes de Expertos​

ExpertCardSEO​

Tarjeta de experto optimizada para SEO con:

  • Schema.org markup
  • Enlaces SEO-friendly (slug)
  • Información completa
  • Rating y reseñas
  • Skills destacadas
  • CTA "Solicitar Presupuesto"

ExpertSearch​

Búsqueda de expertos con filtros avanzados.

Filtros:

  • Por habilidades (skills)
  • Por nivel (Global/Pro/Enterprise)
  • Por disponibilidad
  • Por rating (mínimo)
  • Por tarifa horaria (rango)
  • Por ubicación
  • Por experiencia

Características:

  • Búsqueda en tiempo real
  • Ordenamiento (rating, precio, experiencia)
  • Paginación
  • Resultados con preview

ExpertPublicProfileSEO​

Perfil público optimizado para SEO con:

  • Schema.org markup (ProfilePage)
  • JSON-LD estructurado
  • Soporte para slugs SEO-friendly
  • Información completa
  • Portfolio y enlaces
  • Reseñas y ratings
  • CTA "Solicitar Presupuesto"

URLs:

  • /expertos/[slug] - URL SEO-friendly
  • Fallback a /expertos/[id] si no hay slug

ExpertSelection​

Modal de selección de experto con:

  • Información completa del experto
  • Comparación de propuestas
  • Historial de proyectos
  • CTAs contextuales
  • Datos fiscales (si es primer proyecto)

Componentes de Perfiles​

ProfileFormExperto​

Formulario de perfil de experto con:

  • Datos personales
  • Habilidades y experiencia
  • Portfolio y enlaces
  • Datos fiscales (opcional)
  • Validación completa

Secciones:

  1. Información básica
  2. Habilidades y experiencia
  3. Portfolio y enlaces
  4. Datos fiscales

ProfileFormEmpresa​

Formulario de perfil de empresa con:

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

ProfilePictureUpload​

Componente para subir y gestionar imágenes de perfil.

Características:

  • Subida de imágenes con validación (JPEG, PNG, WebP, max 2MB)
  • Preview de imagen antes de subir
  • Eliminación de imagen existente
  • Validación de tipo y tamaño en cliente
  • Uso de postFormData() para subida confiable
  • Imagen cuadrada (rounded-xl) para consistencia visual
  • Tamaño uniforme (128px x 128px)

Props:

  • currentPicture - URL de la imagen actual
  • onPictureUpdated - Callback cuando se actualiza la imagen
  • className - Clases CSS adicionales

Uso:

<ProfilePictureUpload
  currentPicture={user.profile_picture}
  onPictureUpdated={(url) => setProfilePicture(url)}
/>
  • Descripción de necesidades

CompanyProfileOnboarding​

Onboarding mejorado de empresa con:

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

Secciones:

  1. Información básica
  2. Detalles de la empresa
  3. Datos fiscales
  4. Descripción y necesidades

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
  • Mensajes de error claros

Cuándo se muestra:

  • Empresa crea su primer proyecto
  • Experto es seleccionado para su primer proyecto

Componentes de Dashboards​

DashboardEmpresa​

Dashboard completo para empresas.

Vista de Proyectos (Kanban):

  • Borradores: Proyectos en edición
  • Pendientes Validación: Esperando aprobación admin
  • Publicados: Proyectos activos recibiendo propuestas
  • En Progreso: Proyectos con experto asignado
  • En Disputa: Proyectos con disputas activas
  • Completados: Proyectos finalizados

Estadísticas:

  • Total de proyectos
  • Proyectos activos
  • Presupuesto total
  • Reseñas recibidas
  • Tasa de finalización

Alertas:

  • Perfil pendiente de verificación
  • Faltan datos fiscales
  • Proyectos pendientes de acción

DashboardExperto​

Dashboard optimizado con pestañas.

Pestañas:

  1. Resumen: Métricas y estadísticas

    • Ingresos totales
    • Proyectos activos
    • Rating y reputación
    • Estadísticas de aplicaciones
    • Lead Score

  2. Mis Proyectos: Proyectos activos asignados

    • Estado de hitos
    • Entregas pendientes
    • Chat de proyectos
    • Proyectos completados

  3. Aplicaciones: Propuestas enviadas

    • Estado de cada aplicación
    • Proyectos disponibles
    • Historial completo

  4. Invitaciones: Invitaciones recibidas

    • Proyectos curados
    • Notificaciones
    • Acciones rápidas

DashboardAdmin​

Dashboard unificado de admin con múltiples secciones.

Secciones principales:

  1. Dashboard: KPIs y métricas generales
  2. Flujo de Trabajo: Validación, curación y propuestas
  3. Usuarios: Gestión completa de usuarios
  4. Proyectos: Gestión de proyectos (Kanban)
  5. Configuración: SEO y páginas
  6. Finanzas: Pagos y disputas
  7. Reputación: Gestión de reputación y niveles
  8. Validación Avanzada: Validación detallada
  9. GoHighLevel: Monitoreo de etiquetas GHL
  10. Sistema: Notificaciones y configuración

Vista Kanban de Proyectos:

  • 6 columnas consolidadas según flujo real
  • Drag & drop entre estados
  • Acciones contextuales
  • Estadísticas por columna

UnifiedProjectDashboard​

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

Columnas:

  1. 📝 Borradores - draft
  2. ⏳ Pendientes Validación - pending_publication
  3. 👥 Publicados / En Licitación - published_curated, published_private, bidding
  4. 🔄 En Progreso - assigned, in_progress, in_review
  5. ⚖️ En Disputa - disputed
  6. ✅ Completados - completed

Características:

  • Drag & drop inteligente
  • Estadísticas por columna
  • Filtros y búsqueda
  • Acciones rápidas

Componentes de Chat​

ChatBox​

Componente de mensajería interna.

Características:

  • Mensajes en tiempo real (polling automático)
  • Historial de conversación
  • Envío de archivos
  • Edición y eliminación de mensajes
  • Notificaciones
  • Indicador de escritura
  • Timestamps

ProjectChat​

Wrapper integrado del chat en proyectos.

Características:

  • Integrado en ProjectDetail
  • Permisos basados en roles
  • Admin puede ver todos los chats
  • Descarga de archivos
  • Moderación de mensajes

useChat​

Hook personalizado para gestión de estado del chat.

Funcionalidades:

  • Cargar mensajes
  • Enviar mensajes
  • Editar mensajes
  • Eliminar mensajes
  • Subir archivos
  • Marcar como leídos

Componentes de Reseñas​

ReviewForm​

Formulario de reseñas bidireccional.

Tipos:

  • Empresa → Experto
  • Experto → Empresa

Características:

  • Editable indefinidamente
  • Rating (1-5 estrellas)
  • Comentario opcional
  • Validación completa
  • Solo visible cuando proyecto está completado

ReviewCard​

Tarjeta de reseña con información completa.

Información mostrada:

  • Rating visual (estrellas)
  • Comentario
  • Fecha
  • Revisor
  • Respuesta (si existe)

ReviewsList​

Lista de reseñas con estadísticas.

Características:

  • Paginación
  • Estadísticas agregadas
  • Filtros
  • Ordenamiento

Componentes de Flujo de Contratación​

RequestBudgetForm​

Formulario completo para solicitar presupuesto desde perfil de experto.

Características:

  • Pre-llenado con datos del experto
  • Validación completa
  • Creación de proyecto privado
  • Redirección inteligente

ProposalComparison​

Vista comparativa completa de propuestas de expertos.

Información comparada:

  • Presupuesto propuesto
  • Tiempo estimado
  • Hitos propuestos
  • Rating del experto
  • Experiencia relevante

ProjectTimeline​

Timeline visual completo del progreso del proyecto.

Elementos:

  • Hitos con estados
  • Entregas y revisiones
  • Pagos realizados
  • Fechas importantes

DeliveryApproval​

Sistema completo para aprobar/rechazar entregas.

Acciones:

  • Aprobar entrega
  • Rechazar entrega (con motivo)
  • Solicitar revisión
  • Ver historial de entregas

DisputeForm​

Formulario completo para crear disputas entre empresa y experto.

Características:

  • Descripción del problema
  • Evidencia (archivos)
  • Tipo de disputa
  • Notificación automática

AdminProjectValidation​

Validación administrativa de proyectos.

Acciones:

  • Aprobar proyecto
  • Rechazar proyecto (con motivo)
  • Solicitar cambios
  • Cambiar tipo (privado/curado)

AdminExpertCuration​

Curación de expertos para proyectos.

Características:

  • Sugerencias automáticas
  • Invitación manual
  • Comparación de expertos
  • Historial de proyectos

Componentes de UX/UI​

MetricsChart​

Gráficos interactivos con recharts.

Tipos:

  • Line Chart
  • Area Chart
  • Bar Chart
  • Pie Chart

Características:

  • Responsive
  • Interactivo
  • Tooltips
  • Leyendas

UserTour​

Tours guiados para nuevos usuarios.

Características:

  • Pasos guiados
  • Highlight de elementos
  • Navegación entre pasos
  • Skip opcional

Features​

Características de la plataforma.

Uso en landing:

  • Hero section
  • Características principales
  • Testimonios
  • CTAs

Testimonials​

Testimonios de usuarios.

Características:

  • Carrusel automático
  • Navegación manual
  • Avatares
  • Ratings

Hooks Personalizados​

useSecureAuth​

Hook principal para autenticación segura.

Retorna:

  • user: Usuario actual
  • isAuthenticated: Estado de autenticación
  • isLoading: Estado de carga
  • login: Función de login
  • logout: Función de logout
  • refresh: Función de refresh

useIdleTimeout​

Hook de timeout por inactividad.

Características:

  • Configurable por rol
  • Modal de advertencia
  • Logout automático
  • Reset al detectar actividad

useSanitizedHTML​

Hook para sanitización de HTML con DOMPurify.

Uso:

const sanitized = useSanitizedHTML(userInput);

useFiscalData​

Hook para gestionar datos fiscales.

Funciones:

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

Uso:

const { checkFiscalStatus, updateFiscalData } = useFiscalData();

const status = await checkFiscalStatus();
if (!status.isComplete) {
  // Mostrar modal de datos fiscales
}

useKeyboardShortcuts​

Hook para shortcuts de teclado.

Shortcuts disponibles:

  • Ctrl/Cmd + K: Búsqueda global
  • Ctrl/Cmd + /: Ayuda
  • Esc: Cerrar modales

Componentes de Administración​

AdminUserManagement​

Gestión completa de usuarios.

Funcionalidades:

  • Lista de usuarios con filtros
  • Estadísticas por rol
  • Acciones administrativas
  • Verificación de perfiles

AdminEditUserProfileModal / AdminCreateUserProfileModal​

Modales para editar o crear perfiles de usuario (experto/empresa) como administrador.

Características:

  • Edición completa de información del perfil
  • Gestión de datos fiscales
  • Verificación de perfil
  • Aclaraciones visuales sobre notas internas

Funcionalidades:

  • Campos de perfil completos según tipo de usuario
  • Edición de skills, experiencia, tarifas (experto)
  • Edición de datos de empresa (empresa)
  • Campo de Notas de Admin:
    • 🔒 INTERNO: Solo visible para otros administradores
    • Badge púrpura con icono de candado
    • Alerta explicativa sobre privacidad
    • Útil para información sensible, contexto administrativo o comentarios internos
    • No se muestra al usuario

AdminDisputeResolution​

Componente para gestionar y resolver disputas de proyectos.

Características:

  • Vista de disputas activas y resueltas
  • Filtros por estado y prioridad
  • Aclaraciones visuales sobre notas públicas

Funcionalidades:

  • Visualización de detalles de disputa
  • Evidencia y archivos adjuntos
  • Opciones de resolución (continuar, cancelar, penalización)
  • Campo de Notas de Resolución:
    • ⚠️ PÚBLICO: Visible tanto para empresa como para experto
    • Badge ámbar con icono de ojo
    • Alerta explicativa sobre visibilidad a ambas partes
    • Recomendación: Usar tono profesional, claro y objetivo

MilestoneReviewModal​

Modal para revisar entregas de milestones (hitos) del proyecto.

Características:

  • Revisión de entregas de hitos
  • Aprobación, rechazo o solicitud de revisión
  • Descarga de archivos adjuntos
  • Aclaraciones visuales sobre feedback público

Funcionalidades:

  • Visualización de entregables y archivos
  • Feedback opcional para aprobación
  • Feedback requerido para solicitud de revisión
  • Campo de Comentarios/Feedback:
    • ⚠️ PÚBLICO: Visible para el experto que realizó la entrega
    • Badge ámbar con icono de ojo
    • Alerta explicativa indicando que el feedback es visible para el experto
    • Recomendación: Usar tono profesional y constructivo

AdminReputationManagement​

Gestión completa de reputación y métricas.

Características:

  • Visualización de lead_score
  • Actualización de rating interno
  • Gestión de niveles de experto
  • Estadísticas detalladas

AdminExpertLevelManagement​

Gestión de niveles de experto.

Niveles:

  • Global (0-50 puntos)
  • Pro (51-75 puntos)
  • Enterprise (76-100 puntos)

Características:

  • Actualización masiva
  • Sugerencias basadas en lead_score
  • Filtros y búsqueda

AdminProjectValidationAdvanced​

Validación avanzada de proyectos.

Funcionalidades:

  • Cambio de estados
  • Cambio de tipos (privado/curado)
  • Invitación de expertos
  • Curación de proyectos

AdminGHLMonitoring​

Monitoreo del sistema automático de etiquetas GoHighLevel.

Información mostrada:

  • Estado de sincronización
  • Etiquetas aplicadas
  • Errores y warnings
  • Historial de cambios

AdminSkillPageManagement​

Gestión de páginas SEO de habilidades.

Funcionalidades:

  • Crear/editar páginas de skills
  • Configurar SEO (title, description, content)
  • Gestionar FAQs
  • Activar/desactivar páginas

Más Información​