utn-cli 2.0.96 → 2.0.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "utn-cli",
-  "version": "2.0.96",
+  "version": "2.0.97",
   "description": "Herramienta CLI unificada para la gestión de plantillas en SIGU.",
   "main": "index.js",
   "type": "module",

package/templates/backend/servicios/Nucleo/ReporteHTML.js

@@ -60,6 +60,48 @@ class ReporteHTML {
   }
 
   GenerarReporteHTMLRegistrosVerticales(ElementosParaLaTabla, ParametrosExcluidos = [], ParametrosExtra = [], MostrarEncabezado = true) {
+    //Ejemplo ElementosParaLaTabla:
+    // [
+    //   {
+    //     "Fecha del traslado": "16-03-2026",
+    //     "Justificacion": "Traslado por mantenimiento",
+    //     "Dependencia que entrega": "Juan Pérez",
+    //     "Dependencia que recibe": "María Gómez",
+    //     Placa: "ABC123",
+    //     "Descripción": "Laptop Dell",
+    //     "Código de activo": "ACT-001",
+    //     "N° de serie": "SN123456",
+    //     Marca: "Dell",
+    //     Modelo: "Latitude 5420",
+    //     Estado: "Bueno",
+    //     IdentificadorOrigen: 101,
+    //     IdentificadorDestino: 202
+    //   },
+    //   {
+    //     "Fecha del traslado": "16-03-2026",
+    //     "Justificacion": "Traslado por mantenimiento",
+    //     "Dependencia que entrega": "Juan Pérez",
+    //     "Dependencia que recibe": "María Gómez",
+    //     Placa: "XYZ789",
+    //     "Descripción": "Monitor Samsung",
+    //     "Código de activo": "ACT-002",
+    //     "N° de serie": "SN654321",
+    //     Marca: "Samsung",
+    //     Modelo: "S24F350",
+    //     Estado: "Excelente",
+    //     IdentificadorOrigen: 101,
+    //     IdentificadorDestino: 202
+    //   }
+    // ]
+    // Espera un Array 
+    //Ejemplo ParametrosExcluidos:
+    //const ParametrosExcluidos = ['IdentificadorOrigen', 'Justificacion', 'IdentificadorDestino'];
+    //Valores devueltos por el QUERY que no sean necesarios mostrar en la tabla.
+
+    //Ejemplo ParametrosExtra:
+    //const ParametrosExtra = ['Toma física'];
+    //En caso de necesitar un espacio extra en la tabla que no se encuentra en la lista principal.
+
     if (!ElementosParaLaTabla?.length) return '<p>No hay datos para mostrar.</p>';
 
     const baseColumnas = Object.keys(ElementosParaLaTabla[0]).filter(col => !ParametrosExcluidos.includes(col));
@@ -186,6 +228,48 @@ class ReporteHTML {
   }
 
   GenerarReporteHTMLTablas(ElementosParaLaTabla, ParametrosExcluidos = [], ParametrosExtra = []) {
+    //Ejemplo ElementosParaLaTabla:
+    // [
+    //   {
+    //     "Fecha del traslado": "16-03-2026",
+    //     "Justificacion": "Traslado por mantenimiento",
+    //     "Dependencia que entrega": "Juan Pérez",
+    //     "Dependencia que recibe": "María Gómez",
+    //     Placa: "ABC123",
+    //     "Descripción": "Laptop Dell",
+    //     "Código de activo": "ACT-001",
+    //     "N° de serie": "SN123456",
+    //     Marca: "Dell",
+    //     Modelo: "Latitude 5420",
+    //     Estado: "Bueno",
+    //     IdentificadorOrigen: 101,
+    //     IdentificadorDestino: 202
+    //   },
+    //   {
+    //     "Fecha del traslado": "16-03-2026",
+    //     "Justificacion": "Traslado por mantenimiento",
+    //     "Dependencia que entrega": "Juan Pérez",
+    //     "Dependencia que recibe": "María Gómez",
+    //     Placa: "XYZ789",
+    //     "Descripción": "Monitor Samsung",
+    //     "Código de activo": "ACT-002",
+    //     "N° de serie": "SN654321",
+    //     Marca: "Samsung",
+    //     Modelo: "S24F350",
+    //     Estado: "Excelente",
+    //     IdentificadorOrigen: 101,
+    //     IdentificadorDestino: 202
+    //   }
+    // ]
+    // Espera un Array 
+    //Ejemplo ParametrosExcluidos:
+    //const ParametrosExcluidos = ['IdentificadorOrigen', 'Justificacion', 'IdentificadorDestino'];
+    //Valores devueltos por el QUERY que no sean necesarios mostrar en la tabla.
+
+    //Ejemplo ParametrosExtra:
+    //const ParametrosExtra = ['Toma física'];
+    //En caso de necesitar un espacio extra en la tabla que no se encuentra en la lista principal.
+
     if (!ElementosParaLaTabla?.length) return '';
 
     const baseColumnas = Object.keys(ElementosParaLaTabla[0]).filter(col => !ParametrosExcluidos.includes(col));
@@ -225,6 +309,37 @@ class ReporteHTML {
     </table>`;
   }
 
+  GenerarReporteHTMLDatosEnAgrupacion(titulo, valores) {
+    // Ejemplo titulo:
+    // "Residencia: Atenas 123"
+    // Espera un String. Puede contener texto simple o etiquetas HTML básicas.
+
+    // Ejemplo valores:
+    // {
+    //   "Descripción": "Residencias principales del recinto",
+    //   "Total de habitaciones disponibles": 3,
+    //   "Estado": "Activo"
+    // }
+    // Espera un Objeto (JSON plano) donde cada par llave:valor será una línea en la agrupación.
+    // IMPORTANTE: Se recomienda construir este objeto a mano mapeando solo los datos necesarios
+    // de la base de datos, para evitar imprimir por error arreglos u objetos complejos anidados.
+
+    let htmlTarjeta = `
+      <div style="margin-bottom: 25px; padding: 15px; background-color: #f4f6f9; border-left: 4px solid #002f6b; border-radius: 4px;">
+        <h3 style="margin-top: 0; margin-bottom: 8px; color: #002f6b; font-size: 16px; font-weight: bold;">${titulo}</h3>
+    `;
+
+    const llaves = Object.keys(valores);
+    llaves.forEach((llave, index) => {
+      const margenInferior = (index === llaves.length - 1) ? '0' : '6px';
+      const valor = valores[llave] ?? '-';
+      htmlTarjeta += `<p style="margin: 0 0 ${margenInferior} 0; font-size: 13px; color: #444; line-height: 1.4;"><strong>${llave}:</strong> ${valor}</p>`;
+    });
+
+    htmlTarjeta += `</div>`;
+    return htmlTarjeta;
+  }
+
   GenerarReporteHTMLPie() {
     return `
     </body>
@@ -232,4 +347,4 @@ class ReporteHTML {
   }
 }
 
-module.exports = new ReporteHTML();
+module.exports = new ReporteHTML();

package/templates/backend/servicios/Nucleo/ReportePDF.js

@@ -460,6 +460,86 @@ class ReportePDF {
     }
   }
 
+  generarDatosEnAgrupacion(doc, titulo, valores) {
+    if (!valores || typeof valores !== 'object') return;
+
+    const margin = this.config.margin;
+    const pageWidth = doc.page.width;
+    const availableWidth = pageWidth - 2 * margin;
+
+    // Medidas
+    const padding = 15;
+    const gapTitulo = 8;
+    const gapLinea = 6;
+    const borderLeftWidth = 4;
+
+    // Calcular el alto necesario sin alterar doc.y ni doc.x aún
+    doc.fontSize(11).font(this.config.fuenteNegrita);
+    const tituloHeight = doc.heightOfString(titulo || '', { width: availableWidth - padding * 2 });
+
+    let contentHeight = 0;
+    const llaves = Object.keys(valores);
+
+    // Configurar fuente para medir contenido
+    doc.fontSize(this.config.fontSizeCuerpo);
+
+    llaves.forEach((llave, index) => {
+      const valor = valores[llave] ?? '-';
+      const text = `${llave}: ${valor}`;
+
+      // Se utiliza la misma fuente para calcular la altura (la negrita no suele cambiar el alto de la línea en Helvetica)
+      doc.font(this.config.fuenteNegrita);
+      const height = doc.heightOfString(text, { width: availableWidth - padding * 2 });
+
+      const margenInferior = (index === llaves.length - 1) ? 0 : gapLinea;
+      contentHeight += height + margenInferior;
+    });
+
+    const totalHeight = padding + tituloHeight + gapTitulo + contentHeight + padding;
+
+    // Revisar si cabe en la página actual
+    if (doc.y + totalHeight > doc.page.height - doc.page.margins.bottom - 20) {
+      doc.addPage();
+    }
+
+    const currentY = doc.y;
+
+    // Fondo contenedor (#f4f6f9)
+    doc.save();
+    doc.rect(margin, currentY, availableWidth, totalHeight).fill("#f4f6f9");
+    // Borde izquierdo (#002f6b)
+    doc.rect(margin, currentY, borderLeftWidth, totalHeight).fill("#002f6b");
+    doc.restore();
+
+    let textY = currentY + padding;
+    const textX = margin + padding;
+    const textWidth = availableWidth - padding * 2;
+
+    // Dibujar Título
+    doc.fillColor("#002f6b").fontSize(11).font(this.config.fuenteNegrita);
+    doc.text(titulo || '', textX, textY, { width: textWidth });
+    textY = doc.y + gapTitulo;
+
+    // Dibujar Valores
+    doc.fillColor("#444444").fontSize(this.config.fontSizeCuerpo);
+
+    llaves.forEach((llave, index) => {
+      const valor = valores[llave] ?? '-';
+
+      doc.font(this.config.fuenteNegrita);
+      doc.text(`${llave}: `, textX, textY, { continued: true, width: textWidth });
+
+      doc.font(this.config.fuenteBase);
+      doc.text(`${valor}`, { continued: false });
+
+      const margenInferior = (index === llaves.length - 1) ? 0 : gapLinea;
+      textY = doc.y + margenInferior;
+    });
+
+    // Mover cursor abajo dejando margen inferior
+    doc.y = currentY + totalHeight + 15;
+  }
+
   generarTabla(doc, datos, metadatos) {
     if (!datos || datos.length === 0) return;
 

package/templates/frontend/src/app/Componentes/Nucleo/graficos/graficos.component.css

@@ -1,29 +1,41 @@
-.contenedor { /* This is the outermost div in graficos.component.html */
+.contenedor {
+  /* This is the outermost div in graficos.component.html */
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   justify-content: center;
   width: 100%;
-  /* Remove height: 100% from here */
+  height: 100%;
 }
 
-.grafico { /* This is the div containing the h3 and canvas */
+.grafico {
+  /* This is the div containing the h3 and canvas */
   position: relative;
-  width: 100%; /* Take 100% of parent's width */
-  height: 100%; /* Allow height to stretch based on parent */
-  max-height: 50vh; /* Further reduce max-height to 50% of viewport height for increased vertical responsiveness */
+  width: 100%;
+  /* Take 100% of parent's width */
+  height: 100%;
+  /* Allow height to stretch based on parent */
+  max-height: 50vh;
+  /* Further reduce max-height to 50% of viewport height for increased vertical responsiveness */
   padding: 0.5rem;
   box-sizing: border-box;
-  overflow: hidden; /* Prevent content from spilling outside */
-}
-
-.grafico canvas {
-  width: 100% !important;
-  height: 100% !important;
-  display: block; /* Remove any default inline spacing */
+  display: flex;
+  flex-direction: column;
 }
 
 h3 {
   text-align: center;
   margin-bottom: 0.5rem;
+  flex-shrink: 0;
+}
+
+.canvas-container {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+}
+
+.grafico canvas {
+  display: block;
 }

package/templates/frontend/src/app/Componentes/Nucleo/graficos/graficos.component.html

@@ -1,45 +1,42 @@
 <div class="contenedor">
 
   @if(sinDatosReales) {
-    <div style="text-align:center; padding: 20px;">
-      <p><b>No se encontraron datos</b></p>
-    </div>
+  <div style="text-align:center; padding: 20px;">
+    <p><b>No se encontraron datos</b></p>
+  </div>
   } @else {
 
-    @if(Datos && TipoDeGrafico==='Barras') {
-      <div class="grafico">
-        <h3>{{Titulo}}</h3>
-        <canvas baseChart
-          [data]="barChartData"
-          [options]="barChartOptions"
-          [type]="'bar'"
-          [plugins]="[pluginMostrarValores]">
-        </canvas>
-      </div>
-    }
+  @if(Datos && TipoDeGrafico==='Barras') {
+  <div class="grafico">
+    <h3>{{Titulo}}</h3>
+    <div class="canvas-container">
+      <canvas baseChart [data]="barChartData" [options]="barChartOptions" [type]="'bar'"
+        [plugins]="[pluginMostrarValores]">
+      </canvas>
+    </div>
+  </div>
+  }
 
-    @if(Datos && TipoDeGrafico==='Pie') {
-      <div class="grafico">
-        <h3>{{Titulo}}</h3>
-        <canvas baseChart
-          [data]="pieChartData"
-          [options]="pieChartOptions"
-          [type]="'pie'">
-        </canvas>
-      </div>
-    }
+  @if(Datos && TipoDeGrafico==='Pie') {
+  <div class="grafico">
+    <h3>{{Titulo}}</h3>
+    <div class="canvas-container">
+      <canvas baseChart [data]="pieChartData" [options]="pieChartOptions" [type]="'pie'">
+      </canvas>
+    </div>
+  </div>
+  }
 
-    @if(Datos && TipoDeGrafico==='Línea') {
-      <div class="grafico">
-        <h3>{{Titulo}}</h3>
-        <canvas baseChart
-          [data]="lineChartData"
-          [options]="lineChartOptions"
-          [type]="'line'">
-        </canvas>
-      </div>
-    }
+  @if(Datos && TipoDeGrafico==='Línea') {
+  <div class="grafico">
+    <h3>{{Titulo}}</h3>
+    <div class="canvas-container">
+      <canvas baseChart [data]="lineChartData" [options]="lineChartOptions" [type]="'line'">
+      </canvas>
+    </div>
+  </div>
+  }
 
   }
 
-</div>
+</div>

package/templates/frontend/src/app/Componentes/Nucleo/graficos/graficos.component.ts

@@ -83,7 +83,12 @@ export class GraficosComponent {
   // =========================
   public pieChartOptions: ChartConfiguration<'pie'>['options'] = {
     responsive: true,
-    maintainAspectRatio: false
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        bottom: 20
+      }
+    }
   };
 
   public pieChartData: ChartData<'pie', number[], string | string[]> = {

package/templates/frontend/src/app/Paginas/contenedor-principal/contenedor-principal.component.css

@@ -7,10 +7,10 @@
   width: 100%;
 }
 
-/* Forzamos 4 columnas calculando el espacio disponible */
+/* Pantallas grandes: se adaptan dinámicamente, máximo 300px, caben tantas como sea posible */
 .contenido>div[cdkDrag] {
-  width: calc(25% - 12px);
-  /* 25% menos una parte del gap (16px * 3 / 4) */
+  flex: 1 1 300px;
+  max-width: 300px;
   box-sizing: border-box;
 }
 
@@ -43,12 +43,16 @@
 /* Responsividad: 2 columnas en tablets, 1 en móviles */
 @media (max-width: 1200px) {
   .contenido>div[cdkDrag] {
+    flex: none;
+    max-width: none;
     width: calc(50% - 8px);
   }
 }
 
 @media (max-width: 600px) {
   .contenido>div[cdkDrag] {
+    flex: none;
+    max-width: none;
     width: 100%;
   }
 }

package/templates/frontend/src/app/Paginas/contenedor-principal/contenedor-principal.component.ts

@@ -7,6 +7,8 @@ import { TarjetaPersonalizadaComponent } from "../../Componentes/Nucleo/tarjeta-
 import { HttpClient } from "@angular/common/http";
 import { DatosGlobalesService } from '../../datos-globales.service';
 import { DragDropModule, CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { forkJoin, of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
 
 interface BaseTarjetaConfig {
   type: 'single' | 'multiple' | 'report' | 'custom';
@@ -195,31 +197,63 @@ export class ContenedorPrincipalComponent implements OnInit {
       }
     ];
 
-    // // 2. Check for extra permissions (Personas card)
-    // this.http.get(`${this.datosGlobalesService.ObtenerURL()}Personas/PermisoExtra`).subscribe({
-    //   next: (datos: any) => {
-    //     if (datos.body) {
-    //       const personasCard: TarjetaMultipleConfig = {
-    //         type: 'multiple',
-    //         position: 25,
-    //         titulo: 'Personas',
-    //         descripcion: 'Módulo para el mantenimiento de los datos relacionados con personas',
-    //         rutas: [
-    //           { nombre: 'Personas', ruta: 'tablaPersonas' },
-    //           { nombre: 'Correos', ruta: 'tablaCorreosPersonas' },
-    //           { nombre: 'Cuentas bancarias', ruta: 'tablaCuentasPersonas' },
-    //           { nombre: 'Teléfonos', ruta: 'tablaTelefonosPersonas' },
-    //           { nombre: 'Ubicación', ruta: 'tablaUbicacionPersona' },
-    //         ]
-    //       };
-    //       baseTarjetas.push(personasCard);
-    //     }
-    //   },
-    //   error: (error) => {
-    //     console.error('Problemas al intentar obtener los datos: ', error);
-    //     this.tarjetas = baseTarjetas.sort((a, b) => a.position - b.position);
-    //   },
-    // });
+    forkJoin({
+      permisoExtra: this.http.get(`${this.datosGlobalesService.ObtenerURL()}Personas/PermisoExtra`).pipe(
+        catchError(error => {
+          console.error('Problemas al intentar obtener los datos de PermisoExtra: ', error);
+          return of({ body: null });
+        })
+      ),
+      // configuracion: this.http.get(`${this.datosGlobalesService.ObtenerURL()}ConfiguracionDeTarjetas/obtener`).pipe(
+      //   catchError(error => {
+      //     console.error('Error al obtener configuración de tarjetas:', error);
+      //     return of({ body: [] });
+      //   })
+      // )
+    }).subscribe({
+      next: (results: any) => {
+        // // 2. Handle extra permissions
+        // if (results.permisoExtra && results.permisoExtra.body) {
+        //   const personasCard: TarjetaMultipleConfig = {
+        //     type: 'multiple',
+        //     position: 25,
+        //     titulo: 'Personas',
+        //     descripcion: 'Módulo para el mantenimiento de los datos relacionados con personas',
+        //     rutas: [
+        //       { nombre: 'Personas', ruta: 'tablaPersonas' },
+        //       { nombre: 'Correos', ruta: 'tablaCorreosPersonas' },
+        //       { nombre: 'Cuentas bancarias', ruta: 'tablaCuentasPersonas' },
+        //       { nombre: 'Teléfonos', ruta: 'tablaTelefonosPersonas' },
+        //       { nombre: 'Ubicación', ruta: 'tablaUbicacionPersona' },
+        //     ]
+        //   };
+        //   if (!baseTarjetas.find(t => t.titulo === 'Personas')) {
+        //     baseTarjetas.push(personasCard);
+        //   }
+        // }
+
+        // 3. Apply saved configurations
+        if (results.configuracion && results.configuracion.body && results.configuracion.body.length > 0) {
+          const savedConfigs = results.configuracion.body;
+          baseTarjetas.forEach(tarjeta => {
+            const config = savedConfigs.find((c: any) => c.Titulo === tarjeta.titulo);
+            if (config) {
+              tarjeta.position = config.Posicion;
+              if (config.ColorDeBorde) {
+                tarjeta.ColorDeBorde = config.ColorDeBorde;
+              }
+            }
+          });
+        }
+        this.tarjetas = baseTarjetas.sort((a, b) => a.position - b.position);
+      },
+      error: (error) => {
+        console.error('Error crítico en el proceso de inicialización:', error);
+        this.tarjetas = baseTarjetas.sort((a, b) => a.position - b.position);
+      }
+    });
+  }
+
     // 3. Load user-specific positions from backend
     this.http.get(`${this.datosGlobalesService.ObtenerURL()}ConfiguracionDeTarjetas/obtener`).subscribe({
       next: (res: any) => {

package/templates/frontend/src/app/Paginas/gestion-de-reportes/gestion-de-reportes.component.css

@@ -7,10 +7,10 @@
   width: 100%;
 }
 
-/* Forzamos 4 columnas calculando el espacio disponible */
+/* Pantallas grandes: se adaptan dinámicamente, máximo 300px, caben tantas como sea posible */
 .contenido>* {
-  width: calc(25% - 12px);
-  /* 25% menos una parte del gap (16px * 3 / 4) */
+  flex: 1 1 300px;
+  max-width: 300px;
   box-sizing: border-box;
 }
 
@@ -43,12 +43,16 @@
 /* Responsividad: 2 columnas en tablets, 1 en móviles */
 @media (max-width: 1200px) {
   .contenido>* {
+    flex: none;
+    max-width: none;
     width: calc(50% - 8px);
   }
 }
 
 @media (max-width: 600px) {
   .contenido>* {
+    flex: none;
+    max-width: none;
     width: 100%;
   }
 }

package/templates/frontend/src/app/Paginas/gestion-graficos/gestion-graficos.component.css

@@ -4,10 +4,53 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(255,255,255,0.8);
+  background: rgba(255, 255, 255, 0.8);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   z-index: 2000;
 }
+
+.contenedor {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 64px);
+  overflow: hidden;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.grid-graficos {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 1rem 2rem 2rem 2rem;
+  box-sizing: border-box;
+  width: 100%;
+  gap: 3rem;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.grid-graficos app-graficos {
+  width: 100%;
+  max-width: 800px;
+  height: 400px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 768px) {
+  .contenedor {
+    height: 100vh;
+  }
+
+  .grid-graficos {
+    padding: 1rem;
+    gap: 2rem;
+  }
+}

package/templates/frontend/src/app/Paginas/gestion-graficos/gestion-graficos.component.html

@@ -1,4 +1,4 @@
-<div>
+<div class="contenedor">
   <!-- <h3>Gráficos sobre módulos del SIGU</h3> -->
   @if(cargando) {
   <div class="cargando-overlay">
@@ -6,8 +6,10 @@
     <p>Procesando, por favor espere...</p>
   </div>
   } @else {
-  <app-graficos [TipoDeGrafico]="'Pie'" [Datos]="datosParaElGraficoPie" [Titulo]="'Módulos desarrollados en SIGU'" />
-  <app-graficos [TipoDeGrafico]="'Barras'" [Datos]="datosParaElGraficoBarras"
-    [Titulo]="'Total de nacimientos por mes'" />
+  <div class="grid-graficos">
+    <app-graficos [TipoDeGrafico]="'Pie'" [Datos]="datosParaElGraficoPie" [Titulo]="'Módulos desarrollados en SIGU'" />
+    <app-graficos [TipoDeGrafico]="'Barras'" [Datos]="datosParaElGraficoBarras"
+      [Titulo]="'Total de nacimientos por mes'" />
+  </div>
   }
 </div>