Monolito

Última actualización: 06-01-2026 09:01 PM

pAVANTI — Backlog (Monolito) v2

Meta inmediata (lo siguiente): consolidar el flujo de trabajo export/import y pulir navegación:

Mantener export v2 (con ui) como formato estándar.
Mantener import compatible (v1 legacy Proyecto[] y v2 con ui).
Próximo incremento útil: click en un día del calendario → filtrar/centrar retos de esa fecha en la tabla.

Principio rector: datos, datos, datos. El sistema debe priorizar preservar fecha + minutos de los retos y, ante imports “raros”, rescatar y normalizar sin rechazar.

1) Resultado esperado (Definición de Hecho)

1.1 Layout

La app queda con tres columnas:
- Izquierda: proyectos (ya existe).
- Centro: tabla del proyecto seleccionado (ya existe).
- Derecha: calendario anual (nuevo).
El panel derecho tiene el mismo ancho que el izquierdo (misma “sensación de balance”).
En móvil / pantallas angostas: el panel derecho puede ocultarse o colapsarse (no bloquea el plan, pero debe quedar previsto).

1.2 Calendario anual por meses (12 bloques)

Se muestran 12 meses como bloques independientes.
Cada mes es una grilla de 7 columnas (D–S), con padding inicial/final para alinear semanas.
Control de año (selector o flechas). Al cambiar de año, se re-renderiza el calendario.
Cada día muestra un número compacto: horas (con máximo 1 decimal) derivado de minutos acumulados del día.
- Ejemplo: 6.5 (horas). Si es 0, se muestra vacío o 0 (decisión UI, pero debe ser consistente).
Hover/tooltip por celda:
- fecha completa (YYYY-MM-DD o formato local),
- horas totales del día,
- opcional: top 1–3 proyectos (si queremos valor extra sin saturar el cuadrito).

1.3 Colores (degradado verde)

Paleta única en verdes degradados (solo verde).
0 → neutro (gris/oscuro).
> 0 → verde con 4 niveles de intensidad.
La intensidad se calcula relativa al máximo del año seleccionado (si el año no tiene actividad, todo queda neutro).

2) Decisiones técnicas (para no improvisar luego)

2.1 Fuente de datos

Solo cuentan los retos que tengan:
- fecha válida (YYYY-MM-DD), y
- minutos numérico (si falta, se asume 0).
Retos sin fecha:
- no aparecen en el calendario,
- no se borran ni se modifican.

2.2 Normalización de fechas

fecha se trata como día local (string YYYY-MM-DD), no DateTime.
Para agregación: key = fecha tal cual, validada.

2.3 Agregación

Output mínimo para el calendario:
- minutosPorDia: Record<string, number> (key YYYY-MM-DD).
Output recomendado para tooltip:
- minutosPorDiaPorProyecto: Record<string, Record<proyectoId, number>>.

2.4 Persistencia de UI (colapsado)

Colapsado de grupos debe persistir:
- en local (recarga conserva), y
- en JSON (export/import conserva).
Esto viaja como ui en el export (no mezclado dentro del modelo principal).

2.5 Importación (regla máxima)

Nunca rechazar import si hay forma razonable de rescatar datos.
Si el JSON viene en formato distinto:
- interpretar best‑effort,
- preservar campos desconocidos en legacy/unknown,
- normalizar al esquema actual al momento de guardar/re-exportar.

3) Trabajo a realizar (orden recomendado)

Fase A — Base de datos local robusta (COMPLETADO)

Export v2 implementado
- Formato: { schema: "pavanti-proyectos-export", v: 2, exportedAt, proyectos, ui? }.
- ui incluye collapsedByProyecto cuando aplica.
Import compatible implementado
- Soporta:
  - v1 (legacy): Proyecto[].
  - v2: { proyectos, ui }.
- Si viene ui, se restaura el estado UI (colapsado) antes de montar la tabla.
ui en local implementado
- Clave: pweb_proyectos_ui_v1.

Definición de hecho (Fase A): export/import no rompen datos, y preferencias UI viajan fuera del modelo.

Fase B — Persistencia de colapsado de grupos

Persistencia por proyecto implementada
- Al colapsar/expandir: se actualiza ui y se persiste.
- Al cargar/cambiar de proyecto: se restaura y se aplica.

Definición de hecho (Fase B): cierras grupos, recargas y siguen cerrados. Exportas/importas y siguen cerrados.

Fase C — Panel derecho + calendario anual por meses (BASE IMPLEMENTADA)

Nuevo componente: SidebarDerechaProyectos.tsx
- Ancho igual al sidebar izquierdo.
- Control de año (selector).

Render por meses (12 bloques) con grilla 7 columnas (D–S).
- Auto-scroll al mes actual (año actual) o primer mes con actividad.

Nuevo módulo de agregación: lib/actividad.ts
- actividadGlobalPorDia(proyectos) -> Record<YYYY-MM-DD, minutos>.
Algoritmo de render mensual
- Para cada mes:
  - padding antes/después según día de semana (domingo inicio),
  - celdas del 1..N,
  - cada celda muestra horas (1 decimal) y color verde por intensidad anual.
Tooltip
- On hover: fecha + horas.
- Opción “proyectos” (top N) si el mapa por proyecto está disponible.
Colores (degradado verde)

Paleta única en verdes degradados (solo verde).
- 0 → neutro (gris/oscuro).
- > 0 → verde con niveles de intensidad.
- Intensidad relativa al máximo del año seleccionado.
- Texto del cuadrito: horas con máx. 1 decimal.

Definición de hecho (Fase C): el panel derecho existe, se ve todo el año, y cada día muestra horas + color + tooltip.

4) Cambios esperados por archivo (para estimar impacto)

components/ProyectosApp.tsx
- ajustar layout a 3 columnas (sidebar izquierdo + main + sidebar derecho).
- pasar proyectos al panel derecho porque la actividad es global (no depende del proyecto seleccionado).
components/SidebarDerechaProyectos.tsx (nuevo o actualizado)
- calendario global por meses (12 bloques), con selector de año.
- grilla por mes de 7 columnas (D–S).
- cada celda muestra horas/día (máx. 1 decimal) derivado de minutos acumulados del día (global).
- colores en degradado verde por intensidad (relativa al máximo del año).
- auto-scroll: enfoca el mes actual si el año es el actual; si no, enfoca el primer mes con actividad.
components/TablaProyectos.tsx
- Implementado: colapsado conectado a persistencia (recarga conserva) y soporte de restauración tras import (v2 con ui).
hooks/useProyectosState.ts
- Implementado/Usado: estado de proyectos con persistencia local.
- El manejo de ui se integra desde el flujo de import/export (v2) para restaurar colapsado.
lib/actividad.ts (nuevo)
- agregación por fecha (minutos/día):
  - actividadPorDia(proyecto)
  - actividadGlobalPorDia(proyectos)
- helpers: normalización de fecha YYYY-MM-DD y detección de años disponibles.

5) Riesgos y mitigaciones

Fechas inconsistentes (vacías o formato raro) → validación tolerante; si no es YYYY-MM-DD, no rompe nada: simplemente no cuenta para el calendario.
Imports con estructura vieja → migración best‑effort + legacy.
Performance con muchos retos → useMemo para agregaciones y render por año.

6) Checklist ejecutable

Crear lib/actividad.ts para sumar minutos por fecha.
Crear SidebarDerechaProyectos.tsx y montarlo a la derecha.
Implementar calendario anual por meses + labels de mes.
Implementar tooltip (fecha + horas; opcional top proyectos).
Implementar escala de color verde (0 neutro + 4 niveles) con intensidad.
Definir export v2 { schema/v, proyectos, ui }.
Implementar import compatible (acepta v1/v2, restaura ui cuando viene).
Persistir ui.collapsedByProyecto en local + JSON.
(Opcional) Endurecer import best‑effort con normalización/migración avanzada (sin rechazar si se puede rescatar).