Widget CorreoWidget — resumen compacto en dashboard

Descripción

CorreoWidget es un widget compacto React que muestra un resumen visual del último informe de correo en el dashboard (página de inicio). Despliega contadores Actúa/Entérate, aviso de urgencias y hora de la última pasada. Funciona como entrada rápida a /correo.

Responsabilidades

1. Fetch GET /api/correo/digest al montar
2. Renderizar contadores visuales (actúa/entérate) en tamaños distintos (hero + secundario)
3. Mostrar indicador de urgencias (rojo si hay, naranja si no)
4. Mostrar hora de última pasada + contador de ruido
5. Ser clickeable → navega a /correo (todo el widget es un <a href="/correo">)

Interfaz

Props

Ninguna — datos autogenerados con fetch interno.

Estado

const [digest, setDigest] = useState<Digest | null>(null);
const [loading, setLoading] = useState(true);

interface Digest {
  generated_at: string;
  ruido_count: number;
  items: DigestItem[];
}

interface DigestItem {
  nivel: 'actua' | 'enterate';
  urgente?: boolean;
}

Comportamiento

Ciclo de vida

1. Setup:

   • Si localhost → skip fetch, set loading=false
   • Si no → fetch GET /api/correo/digest

2. Fetch:

   • Response 200 OK → deserializa y setea digest
   • Response no-ok → setDigest(null)
   • Catch silencioso → setDigest(null)
   • Finalmente → setLoading(false)

Render

Estados

Loading (loading=true):

Cargando…

(div con color muted)

Sin informe (!digest):

Sin informe aún — lo publica tu pasada de /correo

(empty-state)

Con informe:

<a href="/correo">  <!-- todo el widget es clickeable -->
  
  [2 contadores KPI]
  - Izquierda: ACTÚA (número hero, 2rem)
  - Derecha: ENTÉRATA (número 1.25rem)
  
  [Línea de urgencias] (si las hay)
  - Color rojo, fontWeight 700, text-sm
  - Texto: "N urgente(s) esperándote"
  
  [Pie]
  - Hora de última pasada (12:34 formato ES)
  - Ruido filtrado: N mensajes
</a>

Diseño

Colores y tipografía

KPI Actúa:

• Font size: 2rem (design-exception: hero counter)
• Font weight: 700
• Font family: ‘Oswald’ (sans-serif)
• Color: --danger si hay urgentes, --color-warning si no

KPI Entérata:

• Font size: 1.25rem
• Font weight: 700
• Font family: ‘Oswald’
• Color: inherit (color-foreground)

Urgencias (si existen):

• Font size: text-sm
• Color: --danger
• Font weight: 700
• Margin-top: 0.25rem
• Texto: “N urgente(s) esperándote”

Pie (hora + ruido):

• Font size: text-xs
• Color: fg-dim
• Margin-top: 0.375rem

Layout

• Contenedor externo: <a> sin decoración (textDecoration: none)
• Sección KPIs: flex, gap 1rem, align-items baseline
  • Cada contador: flex column, gap 0.375rem (número + label)
• Urgencias: nueva div si existen
• Pie: nueva div

Integración en dashboard

En src/components/variants/desktop/DesktopA.tsx:

<div className="bento glow-blue animate-in d-5" style={{ '--bento-grad': 'var(--grad-blue)' }}>
  <div className="card-head">
    <span className="card-title">Correo</span>
    <a href="/correo" className="btn xs action">Ver informe</a>
  </div>
  <CorreoWidget />
</div>

• Clase bento con glow-blue
• Header con título “Correo” + botón “Ver informe”
• CorreoWidget renderizado dentro

Véase también

• [[feature—workspace—correo-menu-f0]]
• [[entity—functions—endpoint—correo-digest]]
• [[entity—src—component—correo-page]]