101 lines
4.4 KiB
TypeScript
101 lines
4.4 KiB
TypeScript
'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 type { DashboardFilters } from '@/lib/dashboard-types'
|
|
|
|
// El survey_id se pasa como query param: /dashboard?survey_id=UUID
|
|
// '00000000-0000-0000-0000-000000000000' = flag p_all (vista agregada de todos los surveys)
|
|
const SURVEY_OPTIONS = [
|
|
{ label: 'Todos', id: '00000000-0000-0000-0000-000000000000' },
|
|
{ label: 'InQuality', id: '30000000-0000-0000-0000-000000000002' },
|
|
{ label: 'Fundación Solidaridad', id: '30000000-0000-0000-0000-000000000003' },
|
|
{ label: 'Demo', id: '30000000-0000-0000-0000-000000000001' },
|
|
]
|
|
|
|
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 }))
|
|
}
|
|
|
|
return (
|
|
<div className="db-page">
|
|
<FilterSidebar
|
|
filters={filters}
|
|
onChange={setFilters}
|
|
collapsed={sidebarCollapsed}
|
|
onToggle={() => setSidebarCollapsed(c => !c)}
|
|
/>
|
|
|
|
<div className="db-main">
|
|
<header className="db-page-header">
|
|
<h1 className="db-page-title">Economía del Cuidado — Paraguay</h1>
|
|
<p className="db-page-subtitle">
|
|
Datos agregados · k-anonimato k≥5 · Encuesta Mapeo de Cuidadores 2026
|
|
{filters.depto && <span className="db-active-filter"> · Filtro: {filters.depto}</span>}
|
|
</p>
|
|
<nav className="db-survey-nav" aria-label="Selección de empresa">
|
|
{SURVEY_OPTIONS.map((opt) => (
|
|
<a
|
|
key={opt.id}
|
|
href={`/dashboard?survey_id=${opt.id}`}
|
|
className={
|
|
opt.id === surveyId
|
|
? 'db-survey-link db-survey-link-active'
|
|
: 'db-survey-link'
|
|
}
|
|
aria-current={opt.id === surveyId ? 'page' : undefined}
|
|
>
|
|
{opt.label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
</header>
|
|
|
|
{/* Fila 1: KPIs (span 12) */}
|
|
<section className="db-section" aria-label="Indicadores clave">
|
|
<KpiCards surveyId={surveyId} filters={filters} />
|
|
</section>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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 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 5: Saturación del cuidador (12) */}
|
|
<section className="db-grid db-section" aria-label="Saturación del cuidador">
|
|
<TablaSaturacion surveyId={surveyId} filters={filters} />
|
|
</section>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|