Etapa completada (local) — widgets de Mirada Empresa

app/dashboard/page.tsx

@@ -1,16 +1,14 @@
 'use client'
 import { useState } from 'react'
 import { useSearchParams } from 'next/navigation'
-import { KpiCards }              from '@/components/dashboard/kpi-cards'
-import { ParaguayMap }           from '@/components/dashboard/paraguay-map'
-import { DonutCuidados }         from '@/components/dashboard/donut-cuidados'
-import { GaugeOrganizacional }   from '@/components/dashboard/gauge-organizacional'
-import { HeatmapWidget }         from '@/components/dashboard/heatmap-widget'
-import { PiramideDemografica }   from '@/components/dashboard/piramide-demografica'
-import { ApoyosBar }              from '@/components/dashboard/apoyos-bar'
-import { IntensidadProductividad } from '@/components/dashboard/intensidad-productividad'
-import { TablaSaturacion }       from '@/components/dashboard/tabla-saturacion'
-import { FilterSidebar }         from '@/components/dashboard/filter-sidebar'
+import { FilterSidebar } from '@/components/dashboard/filter-sidebar'
+import { TalentoRiesgoCard } from '@/components/dashboard/talento-riesgo-card'
+import { PrevalenciaCuidadoresCard } from '@/components/dashboard/prevalencia-cuidadores-card'
+import { PuntoCiegoCard } from '@/components/dashboard/punto-ciego-card'
+import { SenalesImpactoBar } from '@/components/dashboard/senales-impacto-bar'
+import { ApoyosBarME } from '@/components/dashboard/apoyos-bar-me'
+import { SegmentacionBar } from '@/components/dashboard/segmentacion-bar'
+import { DisposicionRedCard } from '@/components/dashboard/disposicion-red-card'
 import type { DashboardFilters } from '@/lib/dashboard-types'
 
 // El survey_id se pasa como query param: /dashboard?survey_id=UUID
@@ -22,15 +20,30 @@ const SURVEY_OPTIONS = [
   { label: 'Demo', id: '30000000-0000-0000-0000-000000000001' },
 ]
 
+type Lens = 'empresa' | 'pais' | 'humana'
+
+const LENSES: { id: Lens; label: string; sub: string }[] = [
+  { id: 'empresa', label: 'Mirada Empresa', sub: 'rendimiento · rotación · clima' },
+  { id: 'pais', label: 'Mirada País', sub: 'desarrollo · vulnerabilidad · política' },
+  { id: 'humana', label: 'Mirada Humana', sub: 'bienestar · derechos · desarrollo' },
+]
+
+function PlaceholderLens({ title, hint }: { title: string; hint: string }) {
+  return (
+    <div className="db-placeholder" role="status">
+      <span className="db-placeholder-icon" aria-hidden="true">🔒</span>
+      <p className="db-placeholder-title">{title} — Disponible próximamente</p>
+      <p className="db-placeholder-hint">{hint}</p>
+    </div>
+  )
+}
+
 export default function DashboardPage() {
   const searchParams = useSearchParams()
   const surveyId = searchParams.get('survey_id') ?? '30000000-0000-0000-0000-000000000001'
   const [filters, setFilters] = useState<DashboardFilters>({})
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
-
-  function handleDeptoClick(depto: string) {
-    setFilters(f => ({ ...f, depto: depto || undefined }))
-  }
+  const [lens, setLens] = useState<Lens>('empresa')
 
   return (
     <div className="db-page">
@@ -38,7 +51,7 @@ export default function DashboardPage() {
         filters={filters}
         onChange={setFilters}
         collapsed={sidebarCollapsed}
-        onToggle={() => setSidebarCollapsed(c => !c)}
+        onToggle={() => setSidebarCollapsed((c) => !c)}
       />
 
       <div className="db-main">
@@ -66,34 +79,70 @@ export default function DashboardPage() {
           </nav>
         </header>
 
-        {/* Fila 1: KPIs (span 12) */}
-        <section className="db-section" aria-label="Indicadores clave">
-          <KpiCards surveyId={surveyId} filters={filters} />
-        </section>
+        <nav className="db-tabs" aria-label="Mirada del dashboard">
+          {LENSES.map((l) => (
+            <button
+              key={l.id}
+              type="button"
+              className={`db-tab${lens === l.id ? ' db-tab-active' : ''}`}
+              onClick={() => setLens(l.id)}
+              aria-current={lens === l.id ? 'page' : undefined}
+            >
+              <span>{l.label}</span>
+              <span className="db-tab-lens">{l.sub}</span>
+            </button>
+          ))}
+        </nav>
 
-        {/* Fila 2: Mapa (6) + Donut (3) + Gauge (3) */}
-        <section className="db-grid db-section" aria-label="Distribución geográfica y tipos">
-          <ParaguayMap surveyId={surveyId} filters={filters} onDeptoClick={handleDeptoClick} />
-          <DonutCuidados surveyId={surveyId} filters={filters} />
-          <GaugeOrganizacional surveyId={surveyId} filters={filters} />
-        </section>
+        {lens === 'empresa' && (
+          <>
+            <div className="db-lens-intro">
+              <strong>Mirada Empresa.</strong> Traduce el cuidado a lenguaje de negocio: cuánto cuesta el
+              punto ciego y qué talento está en riesgo.
+            </div>
 
-        {/* Fila 3: Heatmap (6) + Pirámide (6) */}
-        <section className="db-grid db-section" aria-label="Intensidad y demografía">
-          <HeatmapWidget surveyId={surveyId} filters={filters} />
-          <PiramideDemografica surveyId={surveyId} filters={filters} />
-        </section>
+            {/* Fila 1: núcleo — estrella + prevalencia + punto ciego */}
+            <section className="db-grid db-section" aria-label="Indicadores núcleo">
+              <TalentoRiesgoCard surveyId={surveyId} filters={filters} />
+              <PrevalenciaCuidadoresCard surveyId={surveyId} filters={filters} />
+              <PuntoCiegoCard surveyId={surveyId} filters={filters} />
+            </section>
 
-        {/* Fila 4: Apoyos demandados (6) + Hexbin intensidad/bienestar (6) */}
-        <section className="db-grid db-section" aria-label="Apoyos e impacto">
-          <ApoyosBar surveyId={surveyId} filters={filters} />
-          <IntensidadProductividad surveyId={surveyId} filters={filters} />
-        </section>
+            {/* Fila 2: señales de impacto (6) + apoyos demandados (6) */}
+            <section className="db-grid db-section" aria-label="Señales de impacto y apoyos">
+              <SenalesImpactoBar surveyId={surveyId} filters={filters} />
+              <ApoyosBarME surveyId={surveyId} filters={filters} />
+            </section>
 
-        {/* Fila 5: Saturación del cuidador (12) */}
-        <section className="db-grid db-section" aria-label="Saturación del cuidador">
-          <TablaSaturacion surveyId={surveyId} filters={filters} />
-        </section>
+            {/* Fila 3: segmentación (12, SEC) */}
+            <section className="db-grid db-section" aria-label="Segmentación de la carga">
+              <SegmentacionBar surveyId={surveyId} filters={filters} />
+            </section>
+
+            {/* Fila 4: disposición a red de apoyo (4, SEC) */}
+            <section className="db-grid db-section" aria-label="Disposición a participar">
+              <DisposicionRedCard surveyId={surveyId} filters={filters} />
+            </section>
+
+            <p className="db-table-note" style={{ textAlign: 'right' }}>
+              k≥5 aplicado · segmentos con n&lt;5 suprimidos
+            </p>
+          </>
+        )}
+
+        {lens === 'pais' && (
+          <PlaceholderLens
+            title="Mirada País"
+            hint="Insumo para el estudio país y el Sistema Nacional de Cuidados (SINACUP) — desarrollo, vulnerabilidad, impacto económico. En construcción."
+          />
+        )}
+
+        {lens === 'humana' && (
+          <PlaceholderLens
+            title="Mirada Humana"
+            hint="Bienestar de quien cuida y de quien es cuidado — agotamiento, soledad del cuidado, disposición solidaria. En construcción."
+          />
+        )}
       </div>
     </div>
   )