Saltar al contenido principal

Dashboards

Floutic proporciona dashboards especializados para cada tipo de usuario, optimizados para una experiencia de usuario fluida y eficiente.

Dashboard Empresa​

Ruta: /dashboard/empresa

Identificación Visual:

  • Banner superior azul distintivo con icono de edificio
  • Fondo con gradiente azul sutil
  • Colores azules en botones y elementos interactivos

Características Principales​

Vista de Proyectos (Kanban)​

Gestión visual de proyectos con columnas:

  • 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 y Métricas​

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

Gestión de Pagos​

  • Estado de pagos Escrow
  • Historial de transacciones
  • Facturación
  • Comisiones

Reseñas​

  • Reseñas recibidas de expertos
  • Estadísticas de rating
  • Historial completo

Validaciones​

El dashboard muestra alertas cuando:

  • El perfil está pendiente de verificación
  • Faltan datos fiscales para crear proyectos
  • Hay proyectos pendientes de acción

Dashboard Experto​

Ruta: /dashboard/experto

Identificación Visual:

  • Banner superior esmeralda distintivo con icono de tendencia
  • Fondo con gradiente esmeralda sutil
  • Colores esmeralda en botones y elementos interactivos

Estructura con Pestañas​

Resumen​

  • Métricas de rendimiento
  • Ingresos totales (suma de hitos liberados, incluye proyectos en curso)
  • Proyectos activos
  • Rating y reputación
  • Estadísticas de aplicaciones

Mis Proyectos​

  • Proyectos activos asignados
  • Estado de hitos
  • Entregas pendientes
  • Chat de proyectos

Aplicaciones​

  • Propuestas enviadas
  • Estado de cada aplicación
  • Invitaciones recibidas
  • Historial completo

Invitaciones​

  • Invitaciones a proyectos curados
  • Notificaciones de nuevos proyectos
  • Acciones rápidas

Información Fiscal (DAC7)​

Tab dedicado al cumplimiento normativo DAC7 (declaración de ingresos de plataformas digitales):

  • Datos fiscales (solo lectura): tipo fiscal, NIF/CIF, nombre fiscal, dirección, fecha de nacimiento, retención IRPF
  • Resumen de ingresos anual: total bruto, comisiones, total neto, proyectos completados
  • Desglose por proyecto: tabla con monto, comisión, neto y fecha de cada pago liberado
  • Selector de año: año actual y 3 años anteriores
  • Estado de revisión: badge con colores por estado:
    • 🟡 Amarillo (pending_review) — Pendiente de revisión
    • 🔵 Azul (notified) — Notificado por admin
    • 🟢 Verde (reviewed) — Revisado y confirmado
  • Acción de confirmación: botón para confirmar que los datos son correctos (disponible en pending_review y notified)
  • CTA datos incompletos: si los datos fiscales no están completos, muestra CTA para completar perfil
  • Carga diferida: fetch interno via Dac7Service (sin props del padre)

Características Especiales​

Gestión de Hitos​

  • Timeline visual de hitos
  • Estados: pending, in_progress, completed
  • Entregas y revisiones
  • Progreso en tiempo real

Sistema de Reputación​

  • Rating visible
  • Nivel de experto (Global/Pro/Enterprise)
  • Lead Score dinámico
  • Historial de reseñas

Dashboard Admin​

Ruta: /dashboard/admin

Dashboard Unificado​

El dashboard admin ha sido refactorizado para seguir el patrón de extracción de hooks, separando la lógica de negocio de la UI.

Hooks utilizados:

  • useDashboardState: Estado global del dashboard unificado
  • useAdminUsers: Gestión completa de usuarios (CRUD, filtros, paginación)
  • useAdminEditProject: Edición de proyectos con validación

KPIs y Métricas​

  • Usuarios totales (por rol)
  • Proyectos totales (por estado)
  • Ingresos de la plataforma
  • Comisiones recaudadas
  • Disputas activas
  • Tasa de finalización

Gestión de Proyectos (Kanban)​

Vista consolidada con 6 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

Gestión de Usuarios​

  • Lista completa de usuarios
  • Filtros por rol, estado, verificación
  • Estadísticas por usuario
  • Acciones administrativas:
    • Suspender/activar usuarios
    • Verificar perfiles
    • Gestionar roles
    • Ver reseñas recibidas

Gestión de Disputas​

  • Disputas activas
  • Historial completo
  • Resolución de disputas
  • Mediación entre partes

Configuración del Sistema​

  • Configuración de comisiones
  • Gestión de niveles de experto
  • Configuración de webhooks externos
  • Monitoreo de GoHighLevel

Funcionalidades Avanzadas​

AdminReputationManagement​

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

  • 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:

  • Global / Pro / Enterprise
  • Disponibilidad (tiempo completo/medio tiempo/freelance)
  • Actualización masiva
  • Filtros y búsqueda

AdminProjectValidationAdvanced​

Validación avanzada de proyectos:

  • 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:

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

AdminProfileManager​

Pantalla para que cualquier admin cree/edite su propio perfil interno:

  • Bio y habilidades
  • Enlaces profesionales
  • Información para páginas públicas

Selector de Roles​

Para usuarios con múltiples roles, Floutic proporciona un selector de roles visible en el header:

Características​

  • Ubicación: Header superior, junto al menú de usuario
  • Visibilidad:
    • Solo se muestra si el usuario tiene múltiples roles (empresa y experto)
    • No se muestra si el usuario solo tiene un rol
    • No se muestra para usuarios admin (incluso si tienen múltiples roles)
  • Colores Distintivos:
    • Empresa: Azul (bg-blue-50, text-blue-700)
    • Experto: Esmeralda (bg-emerald-50, text-emerald-700)
    • Admin: Púrpura (bg-purple-50, text-purple-700)
  • Funcionalidad:
    • Muestra el rol activo actual
    • Dropdown con todos los roles disponibles (solo empresa y experto, excluye admin)
    • Cambio instantáneo de rol con redirección automática
    • Persistencia del rol seleccionado en localStorage
    • Sincronización automática entre servicios de autenticación

Uso​

  1. Ver Rol Actual: El botón muestra el rol activo con su color distintivo
  2. Cambiar Rol: Click en el botón → Seleccionar nuevo rol → Redirección automática
  3. Indicador Visual: El rol activo está marcado con "Actual" en el dropdown

Notas Importantes​

  • El selector solo aparece cuando es necesario (múltiples roles disponibles)
  • Los usuarios admin no ven el selector, ya que no necesitan cambiar de rol
  • El cambio de rol actualiza automáticamente el dashboard y las funcionalidades disponibles

Características Comunes​

Notificaciones en Tiempo Real​

Todos los dashboards incluyen:

  • Centro de notificaciones
  • WebSocket para actualizaciones
  • Filtros por tipo
  • Marcar como leídas

Responsive Design​

  • Optimizado para móvil y desktop
  • Menú hamburguesa en móvil
  • Tablas responsivas
  • Gráficos adaptativos

Accesibilidad​

  • Navegación por teclado
  • Screen readers support
  • Contraste adecuado
  • WCAG AA compliance

Performance​

  • Carga diferida de datos
  • Paginación en listas largas
  • Caché de datos frecuentes
  • Optimización de queries
  • Lazy loading de componentes pesados (ej. AdminEditProjectModal)
  • Hooks extraídos para mejor testabilidad y mantenimiento

Más Información​