Clima Dashboard

Dashboard analítico para visualización de encuestas de clima organizacional.

Stack Tecnológico

• Framework: Next.js 14 (App Router)
• UI: shadcn/ui + Tailwind CSS
• Gráficos: Recharts
• Estado: TanStack Query (React Query)
• Tipos: TypeScript estricto
• Deploy: Vercel

Estructura del Proyecto

src/
├── app/                    # App Router
│   ├── (auth)/             # Rutas con layout de dashboard
│   │   ├── dashboard/      # Vista principal
│   │   ├── dimensions/     # Análisis por dimensión
│   │   ├── trends/         # Tendencias longitudinales
│   │   ├── alerts/         # Panel de alertas
│   │   └── export/         # Exportación de datos
│   └── layout.tsx          # Layout raíz
├── components/
│   ├── ui/                 # Componentes shadcn/ui
│   ├── charts/             # Gráficos (radar, línea, gauge)
│   ├── dashboard/          # Componentes del dashboard
│   └── layout/             # Sidebar y header
├── lib/
│   ├── api-client.ts       # Cliente HTTP para clima-api
│   ├── constants.ts        # Configuración y constantes
│   └── utils.ts            # Utilidades
├── hooks/
│   └── use-statistics.ts   # Hooks de React Query
└── types/
    └── api.ts              # Tipos de la API

Vistas

Dashboard (/dashboard)

• KPIs principales: Favorabilidad global, total respondentes, alertas críticas
• Gráfico radar de 8 dimensiones
• Comparación año a año
• Grid de dimensiones con clasificaciones
• Alertas recientes

Dimensiones (/dimensions)

• Selector de dimensión
• Tabla de items con estadísticas
• Resumen por dimensión seleccionada

Tendencias (/trends)

• Gráfico de evolución temporal
• Filtros por dimensión y años mínimos
• Tabla con patrón de tendencia (mejorando/declinando/estable/volátil)

Alertas (/alerts)

• Conteo por severidad (crítica/advertencia/información)
• Filtros por severidad y dimensión
• Lista detallada con recomendaciones

Exportar (/export)

• Formato: Excel o CSV
• Alcance: Items, dimensiones, tendencias, alertas
• Filtros por año y dimensión

API

El dashboard consume la API clima-api desplegada en Vercel:

Base URL: https://clima-api-pied.vercel.app

Endpoints utilizados

Vista	Endpoint
Dashboard	GET /api/v1/statistics/dimensions
Dimensiones	GET /api/v1/statistics/items
Tendencias	GET /api/v1/statistics/trends
Alertas	GET /api/v1/statistics/alerts
Exportar	GET /api/v1/statistics/export

Desarrollo Local

# Instalar dependencias
npm install

# Configurar variables de entorno
cp .env.example .env.local

# Iniciar servidor de desarrollo
npm run dev

Abrir http://localhost:3000.

Build

npm run build
npm start

Deploy

El proyecto está configurado para deploy automático en Vercel.

Variables de Entorno en Vercel

NEXT_PUBLIC_API_URL=https://clima-api-pied.vercel.app

Licencia

MIT © 2025 Ulises González - Rizo.ma