V1HomeVivo — Pantalla HOME mobile (variante V1)

Descripción

V1HomeVivo es el componente React que implementa la pantalla de inicio (home) para la vista mobile de CreaRack Pro. Es la variante V1 del HOME mobile y constituye el equivalente mobile de DesktopA. Tras el sprint s60, alcanza paridad funcional con DesktopA en las secciones principales.

Ruta: src/components/variants/mobile/V1HomeVivo.tsx

Arquitectura del componente

Hook principal: useMobileData

Centraliza todos los fetches de datos con Promise.all. Tras s60 consume 7 endpoints en paralelo:

Dashboard-message dinámico

Un useEffect independiente llama a /api/dashboard-message solo en pantallas ≤ 768 px de ancho. Si la API devuelve { title }, el saludo estático (greeting(), <br/> {user}) se reemplaza por el headline recibido. Esto iguala el comportamiento de DesktopA.

Secciones del HOME (orden de renderizado)

1. Header sticky con blur — avatar, nombre de usuario, contador de alertas
2. Saludo / headline — dinámico vía /api/dashboard-message o fallback greeting()
3. Mis tareas — lista de tareas pendientes del usuario actual
4. El equipo ahora — chips de presencia con PersonChip
5. Noticias (nuevo en s60) — hasta 3 cards horizontales de /api/news
6. Accesos rápidos — grid 2 columnas con QUICK links estáticos
7. Salud del sistema (nuevo en s60) — card de estado global + máx. 4 sensores
8. FAB — botón flotante con rotación 45°, abre submenú de acciones rápidas

Sección Noticias (s60)

• Consume ApiNews[] del hook useMobileData.
• Renderiza hasta 3 cards navegables a /news.
• Cada card muestra: ★ si pinned, chip de category, fecha relativa (newsRelativeDate), título en 1.036rem / 600.
• Estados: loading (borde dashed + “Cargando noticias…”), empty (borde dashed + “Sin noticias recientes”).
• CTA “Ver todas” → /news visible cuando hay al menos 1 noticia.

Helper newsRelativeDate(iso: string): string

Convierte un timestamp ISO/SQL a texto relativo en español:

Sección Salud del sistema (s60)

• Consume ApiHealthRow[] del hook useMobileData.
• Muestra un card único con:
  • Indicador global calculado por healthOverall() — punto coloreado + label.
  • Hasta 4 sensores individuales con dot de color, label, valor monospace.
  • CTAs: “Ayuda” → /wiki/crearack-tech--guides--biblioteca-staff-guide y “Pulse” → /biblioteca/pulse.

Helper healthOverall(health: ApiHealthRow[])

// Prioridad: rojo > ámbar > verde
if (hasRed)   → { status: 'fail',  color: c.danger, label: 'Atención' }
if (hasAmber) → { status: 'warn',  color: c.warn,   label: 'Avisos'   }
else          → { status: 'ok',    color: c.ok,     label: 'Todo OK'  }

Detecta #ef4444 como rojo y #f59e0b como ámbar (comparación lowercase).

FAB — acciones rápidas

Tras s60 el FAB tiene 4 opciones (antes 3):

Historial de cambios relevantes

Tipos de datos principales

interface ApiNews {
  id: number;
  title: string;
  category: string | null;
  author: string | null;
  created_at: string;
  pinned: number;      // 1 = pinned
}

interface ApiHealthRow {
  label: string;
  value: string;
  detail: string;
  color: string;       // hex, ej: '#ef4444'
  insight: string;
}

Véase también

• [[entity—mobile—component—bottomnav]]
• [[feature—mobile—s60-paridad-desktop]]
• [[entity—monitoring—endpoint—health]]
• [[entity—news—endpoint—news]]
• [[entity—dashboard—endpoint—dashboard-message]]