# Plan: Refactorización UI Bitácoras - Armonía Integral > **Grupo de Trabajo:** dtic-BITACORAS **Código:** P2603.01 **Fecha:** 30 de marzo de 2026 **Autor:** Sistema ADN **Versión:** 1.0 **Estado:** ✅ COMPLETADO ## 📋 Resumen Ejecutivo Alinear el comportamiento del Frontend de Bitácoras Web con el principio de **Armonía Integral** del ecosistema ADN. El objetivo consiste en garantizar que la interfaz gráfica represente con absoluta fidelidad la topología relacional de la base de datos, desvinculando la agrupación visual de eventos de la pertenencia física de su nodo, orientándola en su lugar a nivel de **cada entrada y su respectivo ámbito operativo (`ambito_id`)**. ### Motivación Previo a esta actualización, la interfaz de usuario en la vista de "Día Completo" (`/bitacoras/:fecha/completa`) agrupaba inherentemente las entradas bajo el `ambito_nombre` asociado al *Nodo* que las emitía (ej: `dtic-DIIAA` para el nodo 37 `srv-ns8`). Esto causaba distorsiones visuales severas: eventos declarados explícitamente para `dtic-DASUTEN` o `dtic-ADN` aparecían bajo la pestaña lila de `dtic-DIIAA` simplemente porque fueron ejecutados desde un servidor de infraestructura. El principio de Armonía Integral requiere que la representación sea fiel al dominio lógico de la tarea y no a la contingencia física del hardware subyacente. ### Decisiones Clave - **Desacoplamiento Topológico**: Modificar `App.tsx` para que itere sobre `nodoGroup.entradas` y extraiga el ámbito propio de cada evento, anulando la agrupación genérica por nodo. - **Sincronización Transversal**: Actualizar masivamente las entradas huérfanas o desactualizadas en PostgreSQL para vincularlas a sus ámbitos verdaderos en la tabla `bitacoras.ambitos`. - **Registro del Ámbito Autónomo `dtic-ADN`**: Incorporar oficialmente el ecosistema interno ADN como un ámbito de primer nivel en la base de datos para cobijar sus propios eventos de scripting (P2604). ## 🌐 Arquitectura de Sincronización ``` Base de Datos (PostgreSQL) │ ├── bitacoras.ambitos (1:DIIAA, 2:DASUTEN, 7:ADN) │ └── bitacoras.entradas (FK ambito_id -> ambitos.id) │ API (Node.js/Express) │ Frontend (React/Vite) └── App.tsx (Itera e.ambito_nombre -> Agrupa -> Renderiza Card) ``` ## 🎯 Objetivo Implementar, desplegar y validar la reestructuración del backend y frontend para que los Eventos se muestren categorizados bajo el Scope exacto (Ámbito) para el que fueron planificados, independientemente del nodo físico desde el cual se registró la actividad. ## 📅 Fases de Implementación ### ✅ **FASE 1: Sincronización Estructural (Base de Datos)** - [x] **1.1:** Auditar inconsistencias entre `doc_path` (ej. `ambito/dtic-DASUTEN/P...`) y el campo relacional `ambito_id`. - [x] **1.2:** Crear oficialmente el registro para el ámbito matricial `dtic-ADN` en la tabla `bitacoras.ambitos` (Obtuvo ID: 7). - [x] **1.3:** Ejecutar parche SQL de actualización masiva: - 17 entradas actualizadas a `ambito_id = 2` (dtic-DASUTEN). - 2 entradas actualizadas a `ambito_id = 7` (dtic-ADN). - [x] **1.4:** Verificar consistencia de la respuesta JSON en el endpoint de la API (`/api/entradas/1341` confirmando `"ambito_id":2`). ### ✅ **FASE 2: Refactorización Lógica (Frontend)** - [x] **2.1:** Analizar el método de agrupación en `frontend/src/App.tsx`. - [x] **2.2:** Detectar el fallo de diseño (se utilizaba `nodoGroup.ambito_nombre` ignorando `e.ambito_nombre`). - [x] **2.3:** Reescribir el algoritmo de `porAmbito` para que genere subgrupos (Cards/Badges) iterando a nivel de entrada individualmente. - [x] **2.4:** Resolver conflictos de tipado de TypeScript definiendo propiedades opcionales (`ambito_nombre`, `nodo_nombre`) en la interfaz `Entrada`. *(A ser completado en refactor de tipos global si persiste)*. - [x] **2.5:** Aprovechar HMR (Hot Module Replacement) de Vite para aplicar el cambio en vivo. ### ✅ **FASE 3: Validación End-to-End** - [x] **3.1:** Consultar la URL local (`http://localhost:5174/bitacoras/`) para verificar que el evento 1341 (Instalación DASU-PCV2) aparece correctamente bajo la pestaña de `dtic-DASUTEN`. - [x] **3.2:** Confirmar que otros eventos del core de scripts aparecen bajo `dtic-ADN`. - [x] **3.3:** Documentar la culminación de la reforma en el Master Plan [P2603_bitacoras.md](P2603_bitacoras.md) bajo el Hito **UI02**. ## 📊 Impacto Operativo | Aspecto | Antes (Agrupación por Nodo) | Después (Armonía Integral) | |---------|-------------------------|--------------------------| | **Fidelidad Estructural** | ❌ Engañosa | ✅ Exacta | | **Monitoreo de Nodos** | La cabecera era el nodo dominante | El nodo es un metadato tabular por cada fila | | **Identificación Visual** | Los proyectos de DASUTEN se ocultaban en DIIAA | Cada ámbito destaca independientemente | ## 🔗 Referencias - **Proyecto padre**: [P2603_bitacoras.md](P2603_bitacoras.md) - **Principio Rector**: [IA.md](../../contexto/IA.md) (Sección 3: Armonía Integral) - **Ontología**: [01_ontologia.md](../../../adn/01_ontologia.md)