utn-cli 2.0.70 → 2.0.72

package/package.json

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

package/templates/backend/rutas/ConfiguracionDeTarjetas.js

@@ -0,0 +1,52 @@
+const express = require("express");
+const Router = express.Router();
+
+const ConfiguracionDeTarjetas = require('../servicios/Nucleo/ConfiguracionDeTarjetas.js');
+const Miscelaneo = require('../servicios/Nucleo/Miscelaneas.js');
+const ManejadorDeErrores = require('../servicios/Nucleo/ManejadorDeErrores.js');
+
+Router.get("/obtener", async (solicitud, respuesta, next) => {
+  try {
+    if (await Miscelaneo.validarTokenV2(solicitud.headers.authorization) && await Miscelaneo.validarAccesoDelOrigen(solicitud)) {
+      try {
+        const Usuario = await Miscelaneo.obtenerDatosDelUsuario(solicitud.headers.authorization);
+        const Datos = {
+          Identificador: Usuario.uid
+        };
+        return respuesta.json({ body: await ConfiguracionDeTarjetas.obtener(Datos), error: undefined });
+      } catch (error) {
+        const MensajeDeError = "No fue posible obtener la configuración de las tarjetas";
+        console.error(new ManejadorDeErrores(MensajeDeError, ManejadorDeErrores.obtenerNumeroDeLinea(), true, `Dirección IP: ${solicitud.ip}`));
+        return respuesta.status(500).json({ body: undefined, error: MensajeDeError });
+      }
+    }
+    return respuesta.status(401).json({ body: undefined, error: ManejadorDeErrores.mensajeDeError401() });
+  } catch (error) {
+    next(error);
+  }
+});
+
+Router.post("/actualizar", async (solicitud, respuesta, next) => {
+  try {
+    if (await Miscelaneo.validarTokenV2(solicitud.headers.authorization) && await Miscelaneo.validarAccesoDelOrigen(solicitud)) {
+      try {
+        const Usuario = await Miscelaneo.obtenerDatosDelUsuario(solicitud.headers.authorization);
+        const Datos = {
+          Identificador: Usuario.uid,
+          Configuraciones: solicitud.body.Configuraciones,
+          LastUser: await Miscelaneo.generarLastUser(solicitud)
+        };
+        return respuesta.json({ body: await ConfiguracionDeTarjetas.actualizar(Datos), error: undefined });
+      } catch (error) {
+        const MensajeDeError = "No fue posible actualizar la configuración de las tarjetas";
+        console.error(new ManejadorDeErrores(MensajeDeError, ManejadorDeErrores.obtenerNumeroDeLinea(), true, `Dirección IP: ${solicitud.ip}`));
+        return respuesta.status(500).json({ body: undefined, error: MensajeDeError });
+      }
+    }
+    return respuesta.status(401).json({ body: undefined, error: ManejadorDeErrores.mensajeDeError401() });
+  } catch (error) {
+    next(error);
+  }
+});
+
+module.exports = Router;

package/templates/backend/rutas/rutas.js

@@ -1,12 +1,14 @@
 const rutasMiscelaneas = require('./misc.js');
 const rutasDeAPI = require('./API.js');
 const rutasDeConsentimientoInformado = require('./ConsentimientoInformado.js');
+const rutasDeLaConfiguracionDeTarjetas = require('./ConfiguracionDeTarjetas.js');
 const rutasDelServicio1 = require('./Servicio1.js');
 
 function asignarRutasAExpress(app) {
   app.use('/misc', rutasMiscelaneas);
   app.use('/api', rutasDeAPI);
   app.use('/ConsentimientoInformado', rutasDeConsentimientoInformado);
+  app.use('/ConfiguracionDeTarjetas', rutasDeLaConfiguracionDeTarjetas);
   app.use('/Servicio1', rutasDelServicio1);
 }
 

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

@@ -0,0 +1,46 @@
+const { ejecutarConsulta } = require('./db.js');
+const Miscelaneas = require('./Miscelaneas.js');
+
+class ConfiguracionDeTarjetas {
+  constructor() {
+  }
+
+  async obtener(Datos) {
+    return await ejecutarConsulta(
+      "SELECT Titulo, Posicion, ColorDeBorde FROM `framework-mantenimientosv2`.`ConfiguracionDeTarjetas` WHERE Identificador = ? ORDER BY Posicion",
+      [Datos.Identificador]
+    );
+  }
+
+  async actualizar(Datos) {
+    const { Identificador, Configuraciones, LastUser } = Datos;
+    
+    // Configuraciones is expected to be an array of { Titulo, Posicion, ColorDeBorde }
+    if (!Array.isArray(Configuraciones) || Configuraciones.length === 0) {
+      return;
+    }
+
+    const values = [];
+    const placeholders = [];
+    
+    Configuraciones.forEach(config => {
+      placeholders.push('(?, ?, ?, ?, CURRENT_TIMESTAMP(4), ?)');
+      values.push(Identificador, config.Titulo, config.Posicion, config.ColorDeBorde || null, LastUser);
+    });
+
+    const sql = "\
+      INSERT INTO `framework-mantenimientosv2`.`ConfiguracionDeTarjetas` \
+      (Identificador, Titulo, Posicion, ColorDeBorde, LastUpdate, LastUser) \
+      VALUES " + placeholders.join(', ') +
+      " ON DUPLICATE KEY UPDATE  \
+      Posicion = VALUES(Posicion), \
+      ColorDeBorde = VALUES(ColorDeBorde), \
+      LastUpdate = VALUES(LastUpdate), \
+      LastUser = VALUES(LastUser) \
+    ";
+
+    return await ejecutarConsulta(sql, values);
+  }
+}
+
+module.exports = new ConfiguracionDeTarjetas();

package/templates/bd/docker-scripts/1-crear estructura.sql

@@ -27,3 +27,13 @@ CREATE OR REPLACE TABLE `NOMBRE_DEL_REPOSITORIO_DE_BASE_DE_DATOS`.`AceptacionesD
   PRIMARY KEY(`AceptacionDeConsentimientoInformadoId`),
   KEY (`Identificador`)
 ) ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_spanish_ci COMMENT = 'Almacena las aceptaciones de los consentimientos informados';
+
+CREATE OR REPLACE TABLE `NOMBRE_DEL_REPOSITORIO_DE_BASE_DE_DATOS`.`framework-mantenimientosv2`.`ConfiguracionDeTarjetas` (
+  `Identificador` INT UNSIGNED NOT NULL COMMENT 'Llave foránea virtual correspondiente a `Identificador` en la tabla `SIGU`.`SIGU_Personas`',
+  `Titulo` VARCHAR(200) NOT NULL COMMENT 'Título de la tarjeta que sirve como identificador único por usuario',
+  `Posicion` SMALLINT UNSIGNED NOT NULL COMMENT 'Posición de la tarjeta',
+  `ColorDeBorde` VARCHAR(10) DEFAULT NULL COMMENT 'Color de borde de la tarjeta',
+  `LastUpdate` DATETIME(4) NOT NULL DEFAULT CURRENT_TIMESTAMP(4) ON UPDATE CURRENT_TIMESTAMP(4) COMMENT 'Fecha de la última actualización de la fila',
+  `LastUser` VARCHAR(1000) NOT NULL DEFAULT '-' COMMENT 'Último usuario que modificó la fila',
+  PRIMARY KEY (`Identificador`, `Titulo`)
+) ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_spanish_ci COMMENT = 'Almacena la configuración de las tarjetas del contenedor principal por usuario';

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, OnDestroy, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
@@ -14,6 +14,7 @@ import { MatBadgeModule } from '@angular/material/badge';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { FormsModule } from '@angular/forms';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-tabla',
@@ -42,7 +43,7 @@ import { FormsModule } from '@angular/forms';
   templateUrl: './tabla.component.html',
   styleUrl: './tabla.component.css'
 })
-export class TablaComponent implements OnInit, OnChanges {
+export class TablaComponent implements OnInit, OnChanges, OnDestroy {
   @Input() columnas: { Llave: string, Alias: string, TipoDeFiltro: string, Visible?: boolean }[] = [];
   @Input() subColumnas: { Llave: string, Alias: string }[] = [];
   @Input() datos: any[] = [];
@@ -80,6 +81,8 @@ export class TablaComponent implements OnInit, OnChanges {
   @Input() TotalDeRegistros: number = 0;
   @Output() CambioDePagina: EventEmitter<{ accion: string, pageIndex: number, pageSize: number, valorParaFiltrar: string, columnaParaFiltrar: string, columnasParaFiltrar: string, ordenColumna: string, ordenDireccion: string }> = new EventEmitter();
 
+  private subscriptions: Subscription = new Subscription();
+
   constructor(private dialog: MatDialog) {
     const pageSize = localStorage.getItem('pageSize');
     if (pageSize) {
@@ -204,7 +207,7 @@ export class TablaComponent implements OnInit, OnChanges {
 
   ngAfterViewInit() {
     this.dataSource.sort = this.sort;
-    this.paginator.page.subscribe((event: PageEvent) => {
+    this.subscriptions.add(this.paginator.page.subscribe((event: PageEvent) => {
       localStorage.setItem('pageSize', event.pageSize.toString());
 
       let accion = '';
@@ -229,8 +232,8 @@ export class TablaComponent implements OnInit, OnChanges {
 
       this.ultimaPagina = event.pageIndex;
       this.ultimoPageSize = event.pageSize;
-    });
-    this.sort.sortChange.subscribe(sort => {
+    }));
+    this.subscriptions.add(this.sort.sortChange.subscribe(sort => {
       if (this.paginarResultados) {
         this.CambioDePagina.emit({
           accion: 'Cambio de orden',
@@ -243,7 +246,11 @@ export class TablaComponent implements OnInit, OnChanges {
           ordenDireccion: sort.direction
         });
       }
-    });
+    }));
     this.actualizarDataSource();
   }
+
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
+  }
 }

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

@@ -5,32 +5,32 @@
 }
 
 .contenedor {
-  margin-top: 3%;
-  width: 20vw;
+  width: 100%;
+  /* Ocupa todo el espacio que le dé el padre (cdkDrag) */
   background: #ffffff 0% 0% no-repeat padding-box;
   box-shadow: 0px 3px 6px #00000029;
   border-radius: 10px;
   opacity: 1;
-  margin-right: 3vw;
-  padding: 5%;
+  padding: 16px;
   cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  /* Asegura que todas las tarjetas tengan la misma altura si se desea */
+  box-sizing: border-box;
 }
 
-@media (max-width:480px) {
-  .contenedor {
-    width: 80vw;
-  }
-}
-
-@media (min-width:481px) and (max-width:1025px) {
-  .contenedor {
-    width: 50vw;
-  }
-}
+/* Eliminamos los media queries antiguos que forzaban anchos en vw */
 
 .contenedor .cabecera_contenedor {
   display: flex;
   flex-direction: row;
+  align-items: flex-start;
+  /* Alinea los elementos al inicio (arriba) */
+  justify-content: space-between;
+  /* Separa el texto del icono */
+  gap: 8px;
+  /* Espacio mínimo entre texto e icono */
 }
 
 .contenedor .cabecera_contenedor .icono {
@@ -39,13 +39,14 @@
   border-radius: 50%;
   display: flex;
   align-items: center;
-  transform: translate(0);
-  height: 75%;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+  /* Evita que flexbox lo encoja */
   color: #1b3069;
   font-size: x-small;
   font-weight: bold;
-  margin-left: 5%;
-  padding: 2%;
 }
 
 .contenedor .cabecera_contenedor .icono .numero {
@@ -53,7 +54,10 @@
 }
 
 .contenedor .cabecera {
-  width: 90%;
+  flex: 1;
+  /* Permite que el texto ocupe todo el espacio sobrante */
+  min-width: 0;
+  /* Permite truncar texto si es muy largo en móviles */
 }
 
 .contenedor .cabecera .titulo {

package/templates/frontend/src/app/Componentes/Nucleo/tarjeta-multiple/tarjeta-multiple.component.css

@@ -5,27 +5,19 @@
 }
 
 .contenedor {
-  margin-top: 3%;
-  margin-right: 3vw;
-  width: 20vw;
-  padding: 5%;
+  width: 100%;
+  padding: 16px;
   background: #ffffff;
   box-shadow: 0px 3px 6px #00000029;
   border-radius: 10px;
   cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  box-sizing: border-box;
 }
 
-@media (max-width: 480px) {
-  .contenedor {
-    width: 80vw;
-  }
-}
-
-@media (min-width: 481px) and (max-width: 1025px) {
-  .contenedor {
-    width: 50vw;
-  }
-}
+/* Eliminamos los media queries antiguos que forzaban anchos en vw */
 
 .cabecera_contenedor {
   display: flex;
@@ -59,10 +51,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 48px;
+  height: 48px;
+  min-width: 48px; /* Evita que flexbox lo encoja */
   color: #1b3069;
-  padding: 8px;
   cursor: pointer;
   position: relative;
+  margin-left: auto; /* Empuja el icono a la derecha si es necesario */
 }
 
 .menu-rutas {

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

@@ -1,4 +1,4 @@
-<div class="contenedor" (click)="irAPrimeraRuta()"> 
+<div class="contenedor" (click)="irAPrimeraRuta()" [style.border]="ColorDeBorde ? '1px solid ' + ColorDeBorde : ''"> 
   <div class="cabecera_contenedor">
     <div class="cabecera">
       <p class="titulo">{{ titulo }}</p>

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

@@ -15,6 +15,7 @@ export class TarjetaMultipleComponent {
   @Input() titulo: string = "";
   @Input() descripcion: string = "";
   @Input() rutas: { nombre: string; ruta: string }[] = [];
+  @Input() ColorDeBorde: string = '';
 
   mostrarMenu: boolean = false;
 

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

@@ -5,32 +5,27 @@
 }
 
 .contenedor {
-  margin-top: 3%;
-  width: 20vw;
+  width: 100%;
   background: #ffffff 0% 0% no-repeat padding-box;
   box-shadow: 0px 3px 6px #00000029;
   border-radius: 10px;
   opacity: 1;
-  margin-right: 3vw;
-  padding: 5%;
+  padding: 16px;
   cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  box-sizing: border-box;
 }
 
-@media (max-width:480px) {
-  .contenedor {
-    width: 80vw;
-  }
-}
-
-@media (min-width:481px) and (max-width:1025px) {
-  .contenedor {
-    width: 50vw;
-  }
-}
+/* Eliminamos los media queries antiguos que forzaban anchos en vw */
 
 .contenedor .cabecera_contenedor {
   display: flex;
   flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
 }
 
 .contenedor .cabecera_contenedor .icono {
@@ -39,13 +34,13 @@
   border-radius: 50%;
   display: flex;
   align-items: center;
-  transform: translate(0);
-  height: 75%;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  min-width: 48px; /* Evita que flexbox lo encoja */
   color: #1b3069;
   font-size: x-small;
   font-weight: bold;
-  margin-left: 5%;
-  padding: 2%;
 }
 
 .contenedor .cabecera_contenedor .icono .numero {
@@ -53,7 +48,8 @@
 }
 
 .contenedor .cabecera {
-  width: 90%;
+  flex: 1;
+  min-width: 0;
 }
 
 .contenedor .cabecera .titulo {

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

@@ -1,4 +1,4 @@
-<div class="contenedor" (click)="onClick()">
+<div class="contenedor" (click)="onClick()" [style.border]="ColorDeBorde ? '1px solid ' + ColorDeBorde : ''">
   <div class="cabecera_contenedor">
     <div class="cabecera">
       <p class="titulo">

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

@@ -12,6 +12,7 @@ export class TarjetaReporteComponent {
   @Input() descripcion: string = "";
   @Input() icono: any = null;
   @Input() reporteAGenerar: string = '';
+  @Input() ColorDeBorde: string = '';
   @Output() GenerarReporte: EventEmitter<{ reporte: string }> = new EventEmitter();
 
   constructor() { }

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

@@ -1,5 +1,5 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';
 import { RouterOutlet, Router } from '@angular/router';
 import { DatosGlobalesService } from '../../../datos-globales.service';
 import { Location, CommonModule } from '@angular/common';
@@ -36,7 +36,7 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy {
   public AnimarUsuariosActivos: boolean = true;
   private intervaloUsuarios: any;
 
-  constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService, private location: Location, private dialog: MatDialog, private router: Router) {
+  constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService, private location: Location, private dialog: MatDialog, private router: Router, private ngZone: NgZone) {
     if (datosGlobalesService.ObtenerToken() === '') {
       datosGlobalesService.RedirigirALogin();
     }
@@ -57,10 +57,12 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy {
       this.claseDelContenedor = 'contenedor';
     }
 
-    this.obtenerUsuariosActuales();
-    this.intervaloUsuarios = setInterval(() => {
+    this.ngZone.runOutsideAngular(() => {
       this.obtenerUsuariosActuales();
-    }, 60000);
+      this.intervaloUsuarios = setInterval(() => {
+        this.obtenerUsuariosActuales();
+      }, 60000);
+    });
 
     this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/validarToken').subscribe((datos: any) => {
       this.TienePermiso = datos.body;
@@ -224,31 +226,33 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy {
 
   obtenerUsuariosActuales(): void {
     this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/UsuariosActuales').subscribe((datos: any) => {
-      const data = datos.body;
+      this.ngZone.run(() => {
+        const data = datos.body;
 
-      let actuales = data.UsuariosActuales;
-      let activos = data.UsuariosActivos;
+        let actuales = data.UsuariosActuales;
+        let activos = data.UsuariosActivos;
 
-      // Si activos es mayor a actuales, igualamos activos a actuales
-      if (activos > actuales) {
-        activos = actuales;
-      }
+        // Si activos es mayor a actuales, igualamos activos a actuales
+        if (activos > actuales) {
+          activos = actuales;
+        }
 
-      if (this.UsuariosActuales !== actuales) {
-        this.UsuariosActuales = actuales;
-        this.AnimarUsuarios = false;
-        setTimeout(() => {
-          this.AnimarUsuarios = true;
-        }, 50);
-      }
+        if (this.UsuariosActuales !== actuales) {
+          this.UsuariosActuales = actuales;
+          this.AnimarUsuarios = false;
+          setTimeout(() => {
+            this.AnimarUsuarios = true;
+          }, 50);
+        }
 
-      if (this.UsuariosActivos !== activos) {
-        this.UsuariosActivos = activos;
-        this.AnimarUsuariosActivos = false;
-        setTimeout(() => {
-          this.AnimarUsuariosActivos = true;
-        }, 50);
-      }
+        if (this.UsuariosActivos !== activos) {
+          this.UsuariosActivos = activos;
+          this.AnimarUsuariosActivos = false;
+          setTimeout(() => {
+            this.AnimarUsuariosActivos = true;
+          }, 50);
+        }
+      });
     });
   }
 }

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

@@ -1,4 +1,52 @@
 .contenido {
   display: flex;
   flex-wrap: wrap;
-}
+  gap: 16px;
+  padding: 16px;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+/* Forzamos 4 columnas calculando el espacio disponible */
+.contenido > div[cdkDrag] {
+  width: calc(25% - 12px); /* 25% menos una parte del gap (16px * 3 / 4) */
+  box-sizing: border-box;
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+  pointer-events: none;
+}
+
+.cdk-drag-placeholder {
+  opacity: 0.3;
+  background: #ccc;
+  border: 2px dashed #999;
+  border-radius: 8px;
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  /* El placeholder debe mantener el tamaño de la tarjeta */
+  min-height: 150px; /* Ajustar según la altura promedio de tus tarjetas */
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.contenido.cdk-drop-list-dragging div:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+/* Responsividad: 2 columnas en tablets, 1 en móviles */
+@media (max-width: 1200px) {
+  .contenido > div[cdkDrag] {
+    width: calc(50% - 8px);
+  }
+}
+
+@media (max-width: 600px) {
+  .contenido > div[cdkDrag] {
+    width: 100%;
+  }
+}

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

@@ -1,17 +1,35 @@
-<div class="contenido">
-  <app-tarjeta [rutaASeguir]="'tabla'" titulo="Registro"
-    descripcion="Módulo para el registro de las ausencias por concepto de incapacidades, licencias o permisos"
-    icono="inventory"></app-tarjeta>
-  <app-tarjeta [rutaASeguir]="'graficoDeModulos'" titulo="Gráficos"
-    descripcion="Módulo para la visualización de gráficos sobre módulosV2" icono="analytics"></app-tarjeta>
-  <app-tarjeta [rutaASeguir]="'parametros-reportes'" titulo="Reportes sobre el módulo"
-    descripcion="Módulo para la gestión de los reportes del módulo" icono="analytics"></app-tarjeta>
-  <app-tarjeta [rutaASeguir]="'gestionIframe1'" titulo="Matrícula por sedes" descripcion="Matrícula por sedes"
-    icono="mail"></app-tarjeta>
-  @if(cantidadMaxima > 0) {
-  <app-tarjeta [rutaASeguir]="'aprobaciones'" titulo="Aprobaciones" [cantidad]="cantidad"
-    [cantidadMaxima]="cantidadMaxima"
-    descripcion="Módulo para las aprobaciones de las ausencias por concepto de incapacidades, licencias o permisos por parte de las personas jefes"
-    icono="check"></app-tarjeta>
+<div class="contenido" cdkDropList cdkDropListOrientation="mixed" (cdkDropListDropped)="drop($event)">
+  @for (tarjeta of tarjetas; track tarjeta.titulo) {
+    <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 : ''">
+          </app-tarjeta>
+        }
+        @case ('multiple') {
+          <app-tarjeta-multiple
+            [titulo]="tarjeta.titulo"
+            [descripcion]="tarjeta.descripcion"
+            [rutas]="tarjeta.rutas"
+            [ColorDeBorde]="tarjeta.ColorDeBorde ? tarjeta.ColorDeBorde : ''">
+          </app-tarjeta-multiple>
+        }
+        @case ('report') {
+          <app-tarjeta-reporte
+            [reporteAGenerar]="tarjeta.reporteAGenerar"
+            [titulo]="tarjeta.titulo"
+            [descripcion]="tarjeta.descripcion"
+            [icono]="tarjeta.icono"
+            [ColorDeBorde]="tarjeta.ColorDeBorde ? tarjeta.ColorDeBorde : ''"
+            (GenerarReporte)="GenerarReporte($event)">
+          </app-tarjeta-reporte>
+        }
+      }
+    </div>
   }
 </div>

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

@@ -1,36 +1,283 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
+import { CommonModule } from "@angular/common"; 
 import { TarjetaComponent } from "../../Componentes/Nucleo/tarjeta/tarjeta.component";
-// import { HttpClient } from "@angular/common/http";
-// import { DatosGlobalesService } from '../../datos-globales.service'
+import { TarjetaMultipleComponent } from "../../Componentes/Nucleo/tarjeta-multiple/tarjeta-multiple.component";
+import { TarjetaReporteComponent } from "../../Componentes/Nucleo/tarjeta-reporte/tarjeta-reporte.component";
+import { HttpClient } from "@angular/common/http";
+import { DatosGlobalesService } from '../../datos-globales.service';
+import { DragDropModule, CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+
+interface BaseTarjetaConfig {
+  type: 'single' | 'multiple' | 'report';
+  position: number;
+  titulo: string;
+  descripcion: string;
+  acceso?: boolean; 
+  ColorDeBorde?: string;
+}
+
+interface TarjetaConfig extends BaseTarjetaConfig {
+  type: 'single';
+  rutaASeguir: string;
+  icono: string;
+}
+
+interface RutaMenuItem {
+  nombre: string;
+  ruta: string;
+}
+
+interface TarjetaMultipleConfig extends BaseTarjetaConfig {
+  type: 'multiple';
+  rutas: RutaMenuItem[];
+}
+
+interface TarjetaReporteConfig extends BaseTarjetaConfig {
+  type: 'report';
+  reporteAGenerar: string;
+  icono: string;
+}
+
+type AnyTarjetaConfig = TarjetaConfig | TarjetaMultipleConfig | TarjetaReporteConfig;
 
 @Component({
   selector: "app-contenedor-principal",
-  imports: [TarjetaComponent],
+  standalone: true,
+  imports: [TarjetaComponent, TarjetaMultipleComponent, TarjetaReporteComponent, CommonModule, DragDropModule],
   templateUrl: "./contenedor-principal.component.html",
   styleUrl: "./contenedor-principal.component.css"
 })
-export class ContenedorPrincipalComponent {
+
+export class ContenedorPrincipalComponent implements OnInit {
   public cantidad: number = 0;
   public cantidadMaxima: number = 0;
+  public tarjetas: AnyTarjetaConfig[] = [];
 
-  constructor(/*private http: HttpClient, private datosGlobalesService: DatosGlobalesService */) {
+  constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService) {
     this.cantidad = 0;
     this.cantidadMaxima = 0;
   }
 
-  ngOnInit() {
-    // this.http.get(`${this.datosGlobalesService.ObtenerURL()}licencias/consolidadoDeLaJefatura`).subscribe({
-    //   next: (datos: any) => {
-    //     if (datos.error) {
-    //       console.error('Problemas al obtener los datos:', datos.error);
-    //       return;
-    //     }
-    //     this.cantidad = datos.body['cantidad'];
-    //     this.cantidadMaxima = datos.body['cantidadMaxima'];
-    //   },
-    //   error: (error) => {
-    //     console.error('Problemas al intentar obtener los datos: ', error);
-    //   },
-    // });
+  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'
+      }
+    ];
+
+    // 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);
+        }
+        
+        // 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);
+          }
+        });
+      },
+      error: (error) => {
+        console.error('Problemas al intentar obtener los datos: ', error);
+        this.tarjetas = baseTarjetas.sort((a, b) => a.position - b.position);
+      },
+    });
+  }
+
+  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;
+    });
+    this.persistirConfiguracion();
+  }
+
+  persistirConfiguracion() {
+    const Configuraciones = this.tarjetas.map(t => ({
+      Titulo: t.titulo,
+      Posicion: t.position,
+      ColorDeBorde: t.ColorDeBorde
+    }));
+
+    this.http.post(`${this.datosGlobalesService.ObtenerURL()}ConfiguracionDeTarjetas/actualizar`, {
+      Configuraciones
+    }).subscribe({
+      error: (error) => {
+        console.error('Error al persistir la configuración de tarjetas:', error);
+      }
+    });
+  }
+
+  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([datos], { type: 'text/csv' });
+          const url = window.URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = 'ReporteDePrueba.csv';
+          a.click();
+          window.URL.revokeObjectURL(url);
+        },
+        error: (error) => {
+          console.error('Problemas al intentar obtener los datos para el reporte: ', error);
+        }
+      });
+    }
   }
 }

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

@@ -18,10 +18,8 @@ export const appConfig: ApplicationConfig = {
     provideRouter(routes),
     provideClientHydration(withEventReplay()),
     provideAnimationsAsync(),
-    provideHttpClient(withFetch()),
-    provideClientHydration(),
+    provideHttpClient(withFetch(), withInterceptors([AuthInterceptor])),
     provideCharts(withDefaultRegisterables()),
-    ...AnalyticsModule.forRoot().providers!,
-    provideHttpClient(withInterceptors([AuthInterceptor]))
+    ...AnalyticsModule.forRoot().providers!
   ]
 };