utn-cli 2.1.0 → 2.1.2

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

@@ -28,8 +28,8 @@
   <div [class]="cantidadLugar">
     <p>{{ (cantidadAMostrar !== 0 ? cantidadAMostrar : '') }}</p>
   </div>
-  @if(cantidad > 0) {
-  <hr [id]="'porcentaje'+titulo" class="linea" [matTooltip]="'Cantidad: ' + cantidad" matTooltipPosition="above" />
+  @if(cantidadMaxima && cantidadMaxima > 0) {
+  <hr #lineaRef class="linea" [matTooltip]="cantidad + ' / ' + cantidadMaxima" matTooltipPosition="above" />
   }
   <!-- <div class="pie">
     <p>CONTINUAR</p>

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

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, Input } from "@angular/core";
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from "@angular/core";
 import { MatIconModule } from "@angular/material/icon";
 import { MatCardModule } from "@angular/material/card";
 import { MatTooltipModule } from "@angular/material/tooltip";
@@ -21,8 +21,12 @@ export class TarjetaComponent implements AfterViewInit {
   @Input() cantidadLugar: string = "cantidad";
   @Input() rutaASeguir: string = '';
   @Input() cantidadMaxima: number | undefined;
-  @Input() cantidadAMostrar: number = 0;
   @Input() ColorDeBorde: string = '';
+  @ViewChild('lineaRef') lineaRef?: ElementRef<HTMLHRElement>;
+
+  get cantidadAMostrar(): number {
+    return (this.cantidadMaxima ?? 0) - (this.cantidad ?? 0);
+  }
 
   constructor(private ruta: Router) { }
 
@@ -30,18 +34,10 @@ export class TarjetaComponent implements AfterViewInit {
     this.ruta.navigate([this.rutaASeguir]);
   }
 
-  ngOnInit() {
-    this.cantidadAMostrar = (this.cantidadMaxima ? this.cantidadMaxima : 0) - (this.cantidad ? this.cantidad : 0);
-  }
-
   ngAfterViewInit(): void {
-    if (this.cantidad) {
-      let porcentaje = 100;
-      if (this.cantidadMaxima) {
-        porcentaje = (this.cantidad / this.cantidadMaxima) * 100;
-      }
-      const linea = document.getElementById('porcentaje' + this.titulo) as HTMLHRElement;
-      linea.style.width = `${porcentaje}%`;
+    if (this.cantidadMaxima && this.cantidadMaxima > 0) {
+      const porcentaje = (this.cantidad / this.cantidadMaxima) * 100;
+      if (this.lineaRef?.nativeElement) this.lineaRef.nativeElement.style.width = `${porcentaje}%`;
     }
   }
 }

package/templates/frontend/src/app/Componentes/Nucleo/tarjeta-personalizada/tarjeta-personalizada.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, EventEmitter, Input, Output } from "@angular/core";
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from "@angular/core";
 import { MatIconModule } from "@angular/material/icon";
 import { MatCardModule } from "@angular/material/card";
 import { MatTooltipModule } from "@angular/material/tooltip";
@@ -11,7 +11,7 @@ import { Router } from "@angular/router";
   templateUrl: "./tarjeta-personalizada.component.html",
   styleUrl: "./tarjeta-personalizada.component.css"
 })
-export class TarjetaPersonalizadaComponent implements AfterViewInit {
+export class TarjetaPersonalizadaComponent implements OnInit, AfterViewInit {
   @Input() titulo: string = "";
   @Input() descripcion: string = "";
   @Input() icono: any = null;
@@ -25,15 +25,12 @@ export class TarjetaPersonalizadaComponent implements AfterViewInit {
   @Input() Etiqueta: string = "CONTINUAR";
   @Input() ColorDeBorde: string = "";
   @Output() etiquetaClick = new EventEmitter<void>();
+  @ViewChild('porcentajeRef') porcentajeRef?: ElementRef<HTMLHRElement>;
 
   constructor(private ruta: Router) { }
 
   onClick() {
-    if(this.etiquetaClick!==undefined){
-      this.etiquetaClick.emit();
-      return;
-    }
-    this.ruta.navigate([this.rutaASeguir]);
+    this.etiquetaClick.emit();
   }
 
   ngOnInit() {
@@ -46,8 +43,9 @@ export class TarjetaPersonalizadaComponent implements AfterViewInit {
       if (this.cantidadMaxima) {
         porcentaje = (this.cantidad / this.cantidadMaxima) * 100;
       }
-      const linea = document.getElementById('porcentaje' + this.titulo) as HTMLHRElement;
-      linea.style.width = `${porcentaje}%`;
+      if (this.porcentajeRef?.nativeElement) {
+        this.porcentajeRef.nativeElement.style.width = `${porcentaje}%`;
+      }
     }
   }
 }

package/templates/frontend/src/app/Componentes/Nucleo/tarjeta-reporte/tarjeta-reporte.component.ts

@@ -15,12 +15,7 @@ export class TarjetaReporteComponent {
   @Input() ColorDeBorde: string = '';
   @Output() GenerarReporte: EventEmitter<{ reporte: string }> = new EventEmitter();
 
-  constructor() { }
-
   onClick() {
-    this.GenerarReporte.emit({reporte: this.reporteAGenerar});
-  }
-
-  ngOnInit() {
+    this.GenerarReporte.emit({ reporte: this.reporteAGenerar });
   }
 }

package/templates/frontend/src/app/Paginas/Nucleo/contenedor-componentes/contenedor-componentes.component.html

@@ -132,11 +132,9 @@
         <mat-icon>live_tv</mat-icon>
       </button>
       }
-      @if(EnlaceDelManual !== '-') {
       <button class="botonDeNavegacion" matTooltip="Ayuda" title="Ayuda" (click)="irAAyuda()">
         <mat-icon>help</mat-icon>
       </button>
-      }
       <button class="botonDeNavegacion" matTooltip="Reporte" title="Reporte" (click)="irASoporte()">
         <mat-icon>support_agent</mat-icon>
       </button>

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

@@ -1,4 +1,4 @@
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';
 import { RouterOutlet, Router } from '@angular/router';
 import { DatosGlobalesService } from '../../../datos-globales.service';
@@ -65,73 +65,57 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy {
       }, 60000);
     });
 
-    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/validarToken').subscribe((datos: any) => {
-      this.TienePermiso = datos.body;
+    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/inicializar').subscribe((datos: any) => {
+      const body = datos.body;
+
+      this.TienePermiso = body.TienePermiso;
       if (!this.TienePermiso) {
         this.Entrar();
+        return;
       }
-      this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/configurarFrontend').subscribe((datos: any) => {
-        this.Titulo = datos.body.Titulo;
-        this.Modulo = datos.body.Modulo;
-        this.Version = datos.body.Version;
-        this.Descripcion = datos.body.Descripcion;
-        this.Detalle = datos.body.Detalle;
-        this.NombreUsuario = datos.body.NombreUsuario || 'Perfil';
-      })
-      this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/obtenerNotificaciones', {
-        headers: new HttpHeaders({
-          Authorization: this.datosGlobalesService.ObtenerToken(),
-          'Content-Type': 'application/json'
-        })
-      }).subscribe((datos: any) => {
-        this.Mensajes = datos.body;
-      })
-    });
-    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/obtenerDetalleDelModulo').subscribe((datos: any) => {
-      this.EnlaceDelManual = datos.body[0].EnlaceDelManual;
-      this.EnlaceDelVideo = datos.body[0].EnlaceDelVideo;
-    });
-    this.http.get(this.datosGlobalesService.ObtenerURL() + 'ConsentimientoInformado/ConsentimientoInformado').subscribe((datos: any) => {
-      if (datos.body.Aceptaciones === 0) {
-        const ConsentimientoInformadoId = datos.body.Consentimiento[0].ConsentimientoInformadoId;
+
+      this.Titulo = body.Titulo;
+      this.Modulo = body.Modulo;
+      this.Version = body.Version;
+      this.Descripcion = body.Descripcion;
+      this.Detalle = body.Detalle;
+      this.NombreUsuario = body.NombreUsuario || 'Perfil';
+      this.EnlaceDelManual = body.EnlaceDelManual;
+      this.EnlaceDelVideo = body.EnlaceDelVideo;
+      this.Mensajes = body.Notificaciones;
+
+      if (body.Consentimiento?.Aceptaciones === 0) {
+        const ConsentimientoInformadoId = body.Consentimiento.Consentimiento[0].ConsentimientoInformadoId;
         this.dialog.open(MensajeConfirmacionHTMLComponent, {
           data: {
-            titulo: datos.body.Consentimiento[0].Titulo,
-            mensaje: datos.body.Consentimiento[0].Texto,
+            titulo: body.Consentimiento.Consentimiento[0].Titulo,
+            mensaje: body.Consentimiento.Consentimiento[0].Texto,
             textoCerrar: 'Cancelar',
             textoAceptar: 'Aceptar',
             onClose: () => { this.datosGlobalesService.RedirigirAPortal() },
             onAccept: () => {
-              this.http.post(`${this.datosGlobalesService.ObtenerURL()}ConsentimientoInformado/AceptarConsentimientoInformado`
-                , { ConsentimientoInformadoId })
-                .subscribe({
-                  next: (datos: any) => {
-                    // this.obtenerDatosParaPoblarLaTabla();
-                  },
-                  error: (error) => {
-                    this.datosGlobalesService.RedirigirAPortal();
-                  },
+              this.http.post(`${this.datosGlobalesService.ObtenerURL()}ConsentimientoInformado/AceptarConsentimientoInformado`,
+                { ConsentimientoInformadoId }).subscribe({
+                  error: () => { this.datosGlobalesService.RedirigirAPortal(); }
                 });
             },
           },
         });
       }
-    });
-    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/obtenerMensajesModulares').subscribe((datos: any) => {
-      let mensajesVisualizados = this.obtenerMensajesModularesVisualizados();
-      for (let contador = 0; contador < datos.body.length; contador++) {
-        const index = mensajesVisualizados.indexOf(datos.body[contador]['MensajeModularId']);
-        if (index === -1) {
+
+      const mensajesVisualizados = this.obtenerMensajesModularesVisualizados();
+      for (let i = 0; i < body.MensajesModulares.length; i++) {
+        if (!mensajesVisualizados.includes(body.MensajesModulares[i]['MensajeModularId'])) {
           this.dialog.open(MensajeConfirmacionHTMLComponent, {
             data: {
-              titulo: datos.body[contador]['Titulo'],
-              mensaje: datos.body[contador]['Texto'],
+              titulo: body.MensajesModulares[i]['Titulo'],
+              mensaje: body.MensajesModulares[i]['Texto'],
               textoAceptar: 'Cerrar',
               onClose: () => { },
               onAccept: () => {
-                let mensajesVisualizados = this.obtenerMensajesModularesVisualizados();
-                mensajesVisualizados.push(datos.body[contador]['MensajeModularId']);
-                localStorage.setItem('MensajesModularesVisualizados', JSON.stringify(mensajesVisualizados));
+                const vistos = this.obtenerMensajesModularesVisualizados();
+                vistos.push(body.MensajesModulares[i]['MensajeModularId']);
+                localStorage.setItem('MensajesModularesVisualizados', JSON.stringify(vistos));
               },
             },
           });
@@ -171,14 +155,7 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy {
   }
 
   irAAyuda(): void {
-    window.open(this.EnlaceDelManual, '_blank', 'noopener,noreferrer');
-    // const link = document.createElement('a');
-    // link.href = 'assets/Ayuda.pdf';
-    // link.setAttribute('download', 'Ayuda.pdf');
-    // link.setAttribute('target', '_blank');
-    // document.body.appendChild(link);
-    // link.click();
-    // document.body.removeChild(link);
+    this.router.navigate(['/manual']);
   }
 
   irAVideo(): void {

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

@@ -3,9 +3,9 @@
   <div cdkDrag>
     @switch (tarjeta.type) {
     @case ('single') {
-    <app-tarjeta [rutaASeguir]="tarjeta.rutaASeguir" [titulo]="tarjeta.titulo" [descripcion]="tarjeta.descripcion"
-      [icono]="tarjeta.icono" [ColorDeBorde]="tarjeta.ColorDeBorde ? tarjeta.ColorDeBorde : ''"
-      [cantidad]="tarjeta.cantidad ?? 0" [cantidadMaxima]="tarjeta.cantidadMaxima ?? 0">>
+    <app-tarjeta [rutaASeguir]="$any(tarjeta).rutaASeguir" [titulo]="tarjeta.titulo" [descripcion]="tarjeta.descripcion"
+      [icono]="$any(tarjeta).icono" [ColorDeBorde]="tarjeta.ColorDeBorde ? tarjeta.ColorDeBorde : ''"
+      [cantidad]="$any(tarjeta).cantidad ?? 0" [cantidadMaxima]="$any(tarjeta).cantidadMaxima ?? 0">
     </app-tarjeta>
     }
     @case ('multiple') {

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

@@ -7,8 +7,6 @@ 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';
@@ -70,217 +68,53 @@ export class ContenedorPrincipalComponent implements OnInit {
     this.cantidadMaxima = 0;
   }
 
-  async ngOnInit() {
-    // 1. Define base cards
-    let baseTarjetas: AnyTarjetaConfig[] = [
-      {
-        type: 'single',
-        position: 10,
-        rutaASeguir: 'FRM-ModulosV2',
-        titulo: 'Módulos',
-        descripcion: 'Módulo para el mantenimiento de los módulosV2',
-        icono: 'dashboard_2',
-        ColorDeBorde: '#0B4FCE'
-      },
-      {
-        type: 'single',
-        position: 20,
-        rutaASeguir: 'tablaTareasProgramadas',
-        titulo: 'Tareas programadas',
-        descripcion: 'Módulo para el mantenimiento de las tareas programadas',
-        icono: 'grading'
-      },
-      {
-        type: 'multiple',
-        position: 30,
-        titulo: 'Permisos',
-        descripcion: 'Módulo para el mantenimiento de los permisos',
-        rutas: [
-          { nombre: 'Permisos', ruta: 'tablaPermisos' },
-          { nombre: 'Permisos de personas', ruta: 'tablaPermisosDePersonas' },
-          { nombre: 'Permisos padres de personas', ruta: 'tablaPermisosDePersonasPadres' }
-        ]
-      },
-      {
-        type: 'multiple',
-        position: 40,
-        titulo: 'Permisos extra',
-        descripcion: 'Módulo para el mantenimiento de los permisos extra',
-        rutas: [
-          { nombre: 'Permisos extra', ruta: 'tablaPermisosExtra' },
-          { nombre: 'Permisos extra de personas', ruta: 'tablaPermisosExtraDePersonas' },
-        ]
-      },
-      {
-        type: 'single',
-        position: 50,
-        rutaASeguir: 'tablaMensajesInstitucionales',
-        titulo: 'Mensajes institucionales',
-        descripcion: 'Módulo para el mantenimiento de mensajes institucionales',
-        icono: 'mark_unread_chat_alt'
-      },
-      {
-        type: 'single',
-        position: 60,
-        rutaASeguir: 'tablaMensajesModulares',
-        titulo: 'Mensajes modulares',
-        descripcion: 'Módulo para el mantenimiento de mensajes modulares',
-        icono: 'mark_unread_chat_alt'
-      },
-      {
-        type: 'single',
-        position: 70,
-        rutaASeguir: 'tablaPeriodos',
-        titulo: 'Periodos',
-        descripcion: 'Módulo para el mantenimiento de periodos',
-        icono: 'edit_calendar'
-      },
-      {
-        type: 'single',
-        position: 80,
-        rutaASeguir: 'tablaSedes',
-        titulo: 'Sedes y recintos',
-        descripcion: 'Módulo para el mantenimiento de sedes y recintos',
-        icono: 'home_work'
-      },
-      {
-        type: 'single',
-        position: 90,
-        rutaASeguir: 'tablaFlujosAprobacion',
-        titulo: 'Flujos de aprobación',
-        descripcion: 'Módulo para el mantenimiento de flujos de aprobación, pasos y movimientos',
-        icono: 'library_add_check'
-      },
-      {
-        type: 'single',
-        position: 100,
-        rutaASeguir: 'tablaLocalidades',
-        titulo: 'Localidades',
-        descripcion: 'Módulo para la revisión de las diferentes localidades',
-        icono: 'location_on'
-      },
-      {
-        type: 'multiple',
-        position: 110,
-        titulo: 'Repositorios',
-        descripcion: 'Módulo para el mantenimiento de repositorios, variables del sistema y tareas programadas',
-        rutas: [
-          { nombre: 'Consentimientos informados', ruta: 'tablaConsentimientosInformados' },
-          { nombre: 'Repositorios', ruta: 'tablaRepositorios' },
-          { nombre: 'Accesos a repositorios', ruta: 'tablaRepositoriosAccesos' },
-          { nombre: 'Variables del sistema', ruta: 'tablaVariablesDeSistema' },
-        ]
-      },
-      {
-        type: 'single',
-        position: 120,
-        rutaASeguir: 'gestionGrafico',
-        titulo: 'Gráfico de solicitudes mensuales',
-        descripcion: 'Módulo para la visualización del gráfico de solicitudes por el mes actual',
-        icono: 'leaderboard'
-      },
-      {
-        type: 'single',
-        position: 130,
-        rutaASeguir: 'gestionGraficoSesiones',
-        titulo: 'Gráfico de las sesiones',
-        descripcion: 'Módulo para la visualización del gráfico de sesiones',
-        icono: 'pie_chart'
-      },
-      {
-        type: 'single',
-        position: 140,
-        rutaASeguir: 'tablaAdministradores',
-        titulo: 'Administradores',
-        descripcion: 'Módulo para el mantenimiento de administradores',
-        icono: 'supervisor_account'
-      }
-    ];
-
-    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);
+  ngOnInit() {
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/obtenerTarjetasDelContenedor`).subscribe({
+      next: (datos: any) => {
+        this.tarjetas = (datos.body ?? []).map((d: any) => this.mapearTarjeta(d));
       },
       error: (error) => {
-        console.error('Error crítico en el proceso de inicialización:', error);
-        this.tarjetas = baseTarjetas.sort((a, b) => a.position - b.position);
+        console.error('Error al obtener las tarjetas del contenedor:', error);
+        this.tarjetas = [];
       }
     });
   }
 
-    // 3. Load user-specific positions from backend
-    this.http.get(`${this.datosGlobalesService.ObtenerURL()}ConfiguracionDeTarjetas/obtener`).subscribe({
-      next: (res: any) => {
-        if (res.body && res.body.length > 0) {
-          const savedConfigs = res.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 al obtener configuración de tarjetas:', error);
-        this.tarjetas = baseTarjetas.sort((a, b) => a.position - b.position);
-      }
-    });
+  private mapearTarjeta(d: any): AnyTarjetaConfig {
+    const tipoMap: Record<string, AnyTarjetaConfig['type']> = {
+      'Única': 'single',
+      'Múltiple': 'multiple',
+      'Reporte': 'report',
+      'Personalizada': 'custom'
+    };
+
+    const base = {
+      type: tipoMap[d.Tipo] ?? 'single',
+      position: d['Posición'],
+      titulo: d['Título'],
+      descripcion: d['Descripción'],
+      ColorDeBorde: d.ColorDeBorde
+    };
+
+    switch (d.Tipo) {
+      case 'Única':
+        return { ...base, type: 'single', rutaASeguir: d.RutaASeguir ?? '', icono: d['Ícono'] ?? '', cantidad: d.Cantidad, cantidadMaxima: d.CantidadMaxima } as TarjetaConfig;
+      case 'Múltiple':
+        return {
+          ...base, type: 'multiple',
+          rutas: (d.Rutas ?? []).map((r: any) => ({ nombre: r.Nombre, ruta: r.Ruta }))
+        } as TarjetaMultipleConfig;
+      case 'Reporte':
+        return { ...base, type: 'report', reporteAGenerar: d.ReporteAGenerar ?? '', icono: d['Ícono'] ?? '' } as TarjetaReporteConfig;
+      case 'Personalizada':
+        return { ...base, type: 'custom', icono: d['Ícono'] ?? '', etiqueta: d.Etiqueta ?? '', accion: d['Acción'] ?? '' } as TarjetaPersonalizadaConfig;
+      default:
+        return base as any;
+    }
   }
 
   drop(event: CdkDragDrop<AnyTarjetaConfig[]>) {
     moveItemInArray(this.tarjetas, event.previousIndex, event.currentIndex);
-    // Update positions based on new order
     this.tarjetas.forEach((tarjeta, index) => {
       tarjeta.position = (index + 1) * 10;
     });

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

@@ -1,6 +1,17 @@
 <h1>Reportería del módulo</h1>
 <div class="contenido">
   <app-tarjeta-reporte [reporteAGenerar]="'ElReporte1'" titulo="Reporte número uno"
-    descripcion="Acá la descripción de lo que hace el reporte número uno"
-    icono="pie_chart" (GenerarReporte)="GenerarReporte($event)"></app-tarjeta-reporte>
-</div>
+    descripcion="Descarga un CSV con los datos de prueba del módulo." icono="pie_chart" ColorDeBorde="#3498db"
+    (GenerarReporte)="GenerarReporte($event)">
+  </app-tarjeta-reporte>
+
+  <app-tarjeta-reporte [reporteAGenerar]="'ReportePersonasHTML'" titulo="Reporte de personas"
+    descripcion="Abre un reporte HTML con el listado completo de personas registradas en el sistema." icono="people"
+    ColorDeBorde="#2ecc71" (GenerarReporte)="GenerarReporte($event)">
+  </app-tarjeta-reporte>
+
+  <app-tarjeta-reporte [reporteAGenerar]="'ReportePDF'" titulo="Reporte PDF de ejemplo"
+    descripcion="Abre un reporte PDF con el listado completo de personas registradas en el sistema."
+    icono="picture_as_pdf" ColorDeBorde="#e74c3c" (GenerarReporte)="GenerarReporte($event)">
+  </app-tarjeta-reporte>
+</div>

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

@@ -17,20 +17,58 @@ export class GestionDeReportesComponent {
 
   GenerarReporte(event: { reporte: string }) {
     if (event.reporte === 'ElReporte1') {
-      this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/DatosParaReporteCSV`, {
-        responseType: 'text'
-      }).subscribe({
-        next: (datos: any) => {
-          const blob = new Blob([decodeURIComponent(datos)], { type: 'text/csv;charset=utf-8;' });
-          const enlace = document.createElement('a');
-          enlace.href = URL.createObjectURL(blob);
-          enlace.download = 'datos.csv';
-          enlace.click();
-        },
-        error: (error) => {
-          console.error('Problemas al intentar descargar el reporte: ', error);
-        },
-      });
+      this.descargarCSV(`${this.datosGlobalesService.ObtenerURL()}misc/DatosParaReporteCSV`, 'datos.csv');
     }
+    if (event.reporte === 'ReportePersonasHTML') {
+      this.abrirReporteHTML(`${this.datosGlobalesService.ObtenerURL()}Personas/reporteHTML`);
+    }
+    if (event.reporte === 'ReportePDF') {
+      this.abrirReportePDF(`${this.datosGlobalesService.ObtenerURL()}Personas/reportePDF`);
+    }
+  }
+
+  private descargarCSV(url: string, nombreArchivo: string): void {
+    this.http.get(url, { responseType: 'text' }).subscribe({
+      next: (datos: any) => {
+        const blob = new Blob([decodeURIComponent(datos)], { type: 'text/csv;charset=utf-8;' });
+        const enlace = document.createElement('a');
+        enlace.href = URL.createObjectURL(blob);
+        enlace.download = nombreArchivo;
+        enlace.click();
+        URL.revokeObjectURL(enlace.href);
+      },
+      error: (error) => {
+        console.error('Problemas al intentar descargar el reporte: ', error);
+      },
+    });
+  }
+
+  private abrirReporteHTML(url: string): void {
+    this.http.get(url, { responseType: 'text' }).subscribe({
+      next: (html: string) => {
+        const nuevaPestana = window.open('', '_blank');
+        if (nuevaPestana) {
+          nuevaPestana.document.write(decodeURI(html));
+          nuevaPestana.document.close();
+        } else {
+          console.error('No se pudo abrir la nueva pestaña. Verifica que no esté bloqueada.');
+        }
+      },
+      error: (error) => {
+        console.error('Problemas al obtener el reporte HTML: ', error);
+      }
+    });
+  }
+
+  private abrirReportePDF(url: string): void {
+    this.http.get(url, { responseType: 'blob' }).subscribe({
+      next: (pdfBlob: Blob) => {
+        const urlBlob = window.URL.createObjectURL(pdfBlob);
+        window.open(urlBlob, '_blank');
+      },
+      error: (error) => {
+        console.error('Problemas al obtener el reporte PDF: ', error);
+      }
+    });
   }
 }

package/templates/frontend/src/app/app.routes.ts

@@ -9,6 +9,10 @@ export const routes: Routes = [
     path: 'Actividad',
     loadComponent: () => import('./Componentes/Nucleo/gestion-actividad/gestion-actividad.component').then(m => m.GestionActividadComponent)
   },
+  {
+    path: 'manual',
+    loadComponent: () => import('./Componentes/Nucleo/manual/manual.component').then(m => m.ManualComponent)
+  },
   {
     path: 'tabla',
     loadComponent: () => import('./Paginas/gestion-tabla/gestion-tabla.component').then(m => m.GestionTablaComponent)