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:

Endpoint	Tipo devuelto	Uso
`/api/tasks?assignee=...&status=pending&limit=10`	`ApiTask[]`	Mis tareas pendientes
`/api/alerts?active=1&limit=5`	`ApiAlert[]`	Alertas activas
`/api/team/presence`	`ApiMember[]`	Presencia del equipo
`/api/biblioteca/stats`	`{ total_wiki_pages: number }`	Contador wiki
`/api/servers`	`{ servers: { status: string }[] }`	Conteo servidores
`/api/news?limit=3`	`ApiNews[]`	Nuevo en s60 — últimas 3 noticias
`/api/health`	`ApiHealthRow[]`	Nuevo en s60 — sensores del sistema

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)

Header sticky con blur — avatar, nombre de usuario, contador de alertas
Saludo / headline — dinámico vía /api/dashboard-message o fallback greeting()
Mis tareas — lista de tareas pendientes del usuario actual
El equipo ahora — chips de presencia con PersonChip
Noticias (nuevo en s60) — hasta 3 cards horizontales de /api/news
Accesos rápidos — grid 2 columnas con QUICK links estáticos
Salud del sistema (nuevo en s60) — card de estado global + máx. 4 sensores
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:

Rango	Salida
< 1 h	`hace N min`
< 24 h	`hace N h`
< 48 h	`ayer`
< 7 días	`hace N días`
≥ 7 días	fecha corta (`dd mmm`)

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

Icono	Label	Ruta
✓	Nueva tarea	`/tasks?new=1`
✎	Nota rápida	`/notes?new=1`
📓	Nota Cuaderno	`/tools/notebook?new=1` (nuevo s60)
⚠	Publicar alerta	`/alerts?new=1`

Historial de cambios relevantes

Sprint	Cambio
≤ s49	HOME mobile básico (tareas, equipo, accesos)
s50–s56	Refresh visual workspace en desktop — sin propagación al HOME mobile
s60	Paridad con DesktopA: dashboard-message dinámico, sección Noticias, sección Salud del sistema, FAB con Cuaderno

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]]