utn-cli 2.0.56 → 2.0.58

package/package.json

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

package/templates/backend/rutas/misc.js

@@ -353,6 +353,23 @@ Router.get('/cerrarSesion', async (solicitud, respuesta, next) => {
   }
 });
 
+Router.delete('/cerrarSesionPorToken/:Token', async (solicitud, respuesta, next) => {
+  try {
+    if (await Miscelaneo.validarTokenV2(solicitud.headers.authorization) && await Miscelaneo.validarAccesoDelOrigen(solicitud)) {
+      try {
+        return respuesta.json({ body: await Miscelaneo.cerrarSesionPorToken(solicitud.params.Token), error: undefined });
+      } catch (error) {
+        const MensajeDeError = 'No fue posible cerrar la sesión';
+        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.get('/obtenerEnlaceDePerfil', async (solicitud, respuesta, next) => {
   try {
     if (await Miscelaneo.validarTokenV2(solicitud.headers.authorization) && await Miscelaneo.validarAccesoDelOrigen(solicitud)) {

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

@@ -66,6 +66,7 @@ class Miscelaneo {
           JSON_VALUE(Solicitud, '$.method') AS Metodo,
           JSON_VALUE(Solicitud, '$.originalUrl') AS URL,
           IFNULL(JSON_VALUE(Solicitud, '$.country'), 'Costa Rica') AS Pais,
+          SUBSTRING_INDEX(JSON_VALUE(Solicitud, '$.headers.authorization'), ' ', -1) AS Token,
           CASE 
             WHEN JSON_VALUE(Solicitud, '$.userAgent') LIKE '%Mobile%' THEN 'Móvil'
             WHEN JSON_VALUE(Solicitud, '$.userAgent') LIKE '%Android%' AND JSON_VALUE(Solicitud, '$.userAgent') NOT LIKE '%Mobile%' THEN 'Tablet'
@@ -85,6 +86,11 @@ class Miscelaneo {
     }
   }
 
+  async cerrarSesionPorToken(Token) {
+    await ejecutarConsultaSIGU("DELETE FROM `SIGU`.`SIGU_Sesiones` WHERE `Token` = ?", [Token]);
+    return true;
+  }
+
   async UsuariosActuales() {
     const ConexionSigu = await crearObjetoConexionSIGU();
     const Actuales = await ConexionSigu.query("SELECT COUNT(DISTINCT `Identificador`) AS `Total` FROM `SIGU`.`SIGU_Sesiones` WHERE `LastUpdate` >= NOW() - INTERVAL 2 HOUR");

package/templates/frontend/src/app/Componentes/Nucleo/gestion-actividad/gestion-actividad.component.css

@@ -10,7 +10,7 @@
   border-radius: 12px;
   margin-bottom: 20px;
   border: 1px solid #e0e6ed;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   text-align: left;
 }
 
@@ -80,7 +80,7 @@
   border: 1px solid #e0e6ed;
   border-radius: 12px;
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   text-align: left;
 }
 
@@ -110,17 +110,37 @@
 }
 
 /* Colores por método */
-.metodo-get { color: #0069B4; background-color: #e3f2fd; }
-.metodo-post { color: #518a5f; background-color: #e8f5e9; }
-.metodo-put { color: #FFA757; background-color: #fff3e0; }
-.metodo-delete { color: #F82617; background-color: #ffebee; }
-.metodo-default { color: #7d7d7d; background-color: #f5f5f5; }
+.metodo-get {
+  color: #0069B4;
+  background-color: #e3f2fd;
+}
+
+.metodo-post {
+  color: #518a5f;
+  background-color: #e8f5e9;
+}
+
+.metodo-put {
+  color: #FFA757;
+  background-color: #fff3e0;
+}
+
+.metodo-delete {
+  color: #F82617;
+  background-color: #ffebee;
+}
+
+.metodo-default {
+  color: #7d7d7d;
+  background-color: #f5f5f5;
+}
 
 .item-contenido {
   flex: 1;
   display: flex;
   flex-direction: column;
-  min-width: 0; /* Evita que el flex desborde */
+  min-width: 0;
+  /* Evita que el flex desborde */
 }
 
 .item-titulo {
@@ -129,6 +149,22 @@
   font-weight: 600;
   word-break: break-all;
   margin-bottom: 2px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.badge-sesion-actual {
+  background-color: #e8f5e9;
+  color: #2e7d32;
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 12px;
+  border: 1px solid #c8e6c9;
+  text-transform: uppercase;
+  font-weight: 700;
+  white-space: nowrap;
 }
 
 .item-detalles {
@@ -152,10 +188,21 @@
   height: 14px;
 }
 
-.detalle-dispositivo mat-icon { color: #673ab7; }
-.detalle-browser mat-icon { color: #5f6368; }
-.detalle-ip mat-icon { color: #0069B4; }
-.detalle-pais mat-icon { color: #F87600; }
+.detalle-dispositivo mat-icon {
+  color: #673ab7;
+}
+
+.detalle-browser mat-icon {
+  color: #5f6368;
+}
+
+.detalle-ip mat-icon {
+  color: #0069B4;
+}
+
+.detalle-pais mat-icon {
+  color: #F87600;
+}
 
 .item-fecha {
   font-size: 11px;
@@ -180,14 +227,14 @@ mat-progress-bar {
     flex-direction: column;
     align-items: flex-start;
   }
-  
+
   .item-icono {
     margin-bottom: 12px;
   }
-  
+
   .item-fecha {
     margin-left: 0;
     margin-top: 12px;
     align-items: flex-start;
   }
-}
+}

package/templates/frontend/src/app/Componentes/Nucleo/gestion-actividad/gestion-actividad.component.html

@@ -2,49 +2,59 @@
   <div class="header-actividad">
     <h2><mat-icon>history</mat-icon> Actividad reciente de la cuenta</h2>
     <p>Historial de acciones realizadas en el sistema</p>
-    
+
     <div class="mensaje-informativo">
       <mat-icon>info</mat-icon>
-      <p>Si tiene dudas sobre la información que ve en pantalla, por favor comparta una captura de pantalla al correo <strong>soporte@utn.ac.cr</strong>.</p>
+      <p>Si tiene dudas sobre la información que ve en pantalla, por favor comparta una captura de pantalla al correo
+        <strong>soporte@utn.ac.cr</strong>.</p>
     </div>
   </div>
 
   @if(cargando){
-    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
   }
-  
+
   <div class="lista-actividad">
     @if(actividad.length === 0 && !cargando) {
-      <p class="sin-datos">No hay actividad reciente.</p>
+    <p class="sin-datos">No hay actividad reciente.</p>
     }
 
     @for (item of actividad; track item.Consecutivo) {
-      <div class="actividad-item">
-        <div class="item-icono" [ngClass]="{
+    <div class="actividad-item">
+      <div class="item-icono" [ngClass]="{
           'metodo-get': item.Metodo === 'GET',
           'metodo-post': item.Metodo === 'POST',
           'metodo-put': item.Metodo === 'PUT',
           'metodo-delete': item.Metodo === 'DELETE'
         }">
-          <mat-icon [matTooltip]="item.Metodo">{{ getIcon(item.Metodo) }}</mat-icon>
-        </div>
-        <div class="item-contenido">
-          <div class="item-titulo">{{ item.URL }}</div>
-          <div class="item-detalles">
-            <span class="detalle-dispositivo">
-              <mat-icon>{{ item.Dispositivo === 'Móvil' ? 'smartphone' : (item.Dispositivo === 'Tablet' ? 'tablet' : 'laptop') }}</mat-icon>
-              {{ item.Dispositivo }}
-            </span>
-            <span class="detalle-browser"><mat-icon>public</mat-icon> {{ item.Navegador }}</span>
-            <span class="detalle-ip"><mat-icon>lan</mat-icon> {{ item.IP }}</span>
-            <span class="detalle-pais"><mat-icon>location_on</mat-icon> {{ item.Pais }}</span>
-          </div>
+        <mat-icon [matTooltip]="item.Metodo">{{ getIcon(item.Metodo) }}</mat-icon>
+      </div>
+      <div class="item-contenido">
+        <div class="item-titulo">
+          {{ item.URL }}
+          @if(esSesionActual(item.Token)){
+          <span class="badge-sesion-actual">Sesión actual</span>
+          }
         </div>
-        <div class="item-fecha">
-          <span>{{ item.Fecha | date: 'dd/MM/yyyy' }}</span>
-          <strong>{{ item.Fecha | date: 'HH:mm:ss' }}</strong>
+        <div class="item-detalles">
+          <span class="detalle-dispositivo">
+            <mat-icon>{{ item.Dispositivo === 'Móvil' ? 'smartphone' : (item.Dispositivo === 'Tablet' ? 'tablet' :
+              'laptop') }}</mat-icon>
+            {{ item.Dispositivo }}
+          </span>
+          <span class="detalle-browser"><mat-icon>public</mat-icon> {{ item.Navegador }}</span>
+          <span class="detalle-ip"><mat-icon>lan</mat-icon> {{ item.IP }}</span>
+          <span class="detalle-pais"><mat-icon>location_on</mat-icon> {{ item.Pais }}</span>
         </div>
       </div>
+      <div class="item-fecha">
+        <span>{{ item.Fecha | date: 'dd/MM/yyyy' }}</span>
+        <strong>{{ item.Fecha | date: 'HH:mm:ss' }}</strong>
+        <button mat-icon-button color="warn" matTooltip="Cerrar esta sesión" (click)="cerrarSesion(item.Token)">
+          <mat-icon>logout</mat-icon>
+        </button>
+      </div>
+    </div>
     }
   </div>
-</div>
+</div>

package/templates/frontend/src/app/Componentes/Nucleo/gestion-actividad/gestion-actividad.component.ts

@@ -4,26 +4,30 @@ import { HttpClient } from '@angular/common/http';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatButtonModule } from '@angular/material/button';
 import { DatosGlobalesService } from '../../../datos-globales.service';
 
 @Component({
   selector: 'app-gestion-actividad',
   standalone: true,
-  imports: [CommonModule, MatIconModule, MatTooltipModule, MatProgressBarModule],
+  imports: [CommonModule, MatIconModule, MatTooltipModule, MatProgressBarModule, MatButtonModule],
   templateUrl: './gestion-actividad.component.html',
   styleUrls: ['./gestion-actividad.component.css']
 })
 export class GestionActividadComponent implements OnInit {
   public actividad: any[] = [];
   public cargando = false;
+  private tokenActual = '';
 
   constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService) { }
 
   ngOnInit(): void {
+    this.tokenActual = this.datosGlobalesService.ObtenerToken().split(' ')[1] || '';
     this.obtenerActividad();
   }
 
   obtenerActividad(): void {
+    this.cargando = true;
     this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/ListarActividades`).subscribe({
       next: (datos: any) => {
         this.actividad = datos.body;
@@ -36,17 +40,27 @@ export class GestionActividadComponent implements OnInit {
         this.cargando = false;
       }
     });
-    // this.cargando = true;
-    // this.http.get<any[]>(`${this.datosGlobalesService.ObtenerURL()}Actividad`).subscribe({
-    //   next: (datos) => {
-    //     this.actividad = datos;
-    //     this.cargando = false;
-    //   },
-    //   error: (error) => {
-    //     console.error('Error al obtener actividad:', error);
-    //     this.cargando = false;
-    //   }
-    // });
+  }
+
+  cerrarSesion(token: string): void {
+    if (confirm('¿Está seguro de que desea cerrar esta sesión?')) {
+      this.http.delete(`${this.datosGlobalesService.ObtenerURL()}misc/cerrarSesionPorToken/${token}`).subscribe({
+        next: () => {
+          if (token === this.tokenActual) {
+            this.datosGlobalesService.RedirigirALogin();
+          } else {
+            this.obtenerActividad();
+          }
+        },
+        error: (error) => {
+          console.error('Error al cerrar sesión:', error);
+        }
+      });
+    }
+  }
+
+  esSesionActual(token: string): boolean {
+    return token === this.tokenActual;
   }
 
   getIcon(metodo: string): string {

package/templates/frontend/src/app/Componentes/Nucleo/mensaje-confirmacion/mensaje-confirmacion.component.css

@@ -1,5 +1,240 @@
-.mensaje {
-  margin-top: 1%;
+.contenedor-actividad {
+  background-color: transparent;
+  margin: 0;
+  padding: 10px;
+}
+
+.header-actividad {
+  background-color: white;
+  padding: 20px 24px;
+  border-radius: 12px;
+  margin-bottom: 20px;
+  border: 1px solid #e0e6ed;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  text-align: left;
+}
+
+.header-actividad h2 {
+  margin: 0;
+  color: #002f6b;
+  font-size: 1.5rem;
+  font-weight: 700;
   display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.header-actividad h2 mat-icon {
+  font-size: 28px;
+  width: 28px;
+  height: 28px;
+  color: #0b4fce;
+}
+
+.header-actividad p {
+  margin: 8px 0 0 0;
+  color: #5f6368;
+  font-size: 0.95rem;
+}
+
+.mensaje-informativo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background-color: #e3f2fd;
+  border-left: 4px solid #1976d2;
+  padding: 12px 16px;
+  margin-top: 20px;
+  border-radius: 4px;
+}
+
+.mensaje-informativo mat-icon {
+  color: #1976d2;
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+}
+
+.mensaje-informativo p {
+  margin: 0 !important;
+  font-size: 13.5px !important;
+  color: #0d47a1 !important;
+  line-height: 1.4;
+}
+
+.mensaje-informativo strong {
+  color: #d32f2f;
+}
+
+.lista-actividad {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.actividad-item {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background-color: white;
+  border: 1px solid #e0e6ed;
+  border-radius: 12px;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  text-align: left;
+}
+
+.actividad-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border-color: #0b4fce;
+  background-color: #f0f7ff;
+}
+
+.item-icono {
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
   justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: #f1f3f4;
+  flex-shrink: 0;
+}
+
+.item-icono mat-icon {
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+}
+
+/* Colores por método */
+.metodo-get {
+  color: #0069B4;
+  background-color: #e3f2fd;
+}
+
+.metodo-post {
+  color: #518a5f;
+  background-color: #e8f5e9;
+}
+
+.metodo-put {
+  color: #FFA757;
+  background-color: #fff3e0;
+}
+
+.metodo-delete {
+  color: #F82617;
+  background-color: #ffebee;
+}
+
+.metodo-default {
+  color: #7d7d7d;
+  background-color: #f5f5f5;
+}
+
+.item-contenido {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  /* Evita que el flex desborde */
+}
+
+.item-titulo {
+  font-size: 14px;
+  color: #002f6b;
+  font-weight: 600;
+  word-break: break-all;
+  margin-bottom: 2px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.badge-sesion-actual {
+  background-color: #e8f5e9;
+  color: #2e7d32;
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 12px;
+  border: 1px solid #c8e6c9;
+  text-transform: uppercase;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.item-detalles {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  font-size: 12px;
+  color: #5f6368;
+}
+
+.item-detalles span {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  white-space: nowrap;
+}
+
+.item-detalles mat-icon {
+  font-size: 14px;
+  width: 14px;
+  height: 14px;
+}
+
+.detalle-dispositivo mat-icon {
+  color: #673ab7;
+}
+
+.detalle-browser mat-icon {
+  color: #5f6368;
+}
+
+.detalle-ip mat-icon {
+  color: #0069B4;
+}
+
+.detalle-pais mat-icon {
+  color: #F87600;
+}
+
+.item-fecha {
+  font-size: 11px;
+  color: #9aa0a6;
+  white-space: nowrap;
+  margin-left: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-family: 'Roboto Mono', monospace;
+  flex-shrink: 0;
+}
+
+mat-progress-bar {
+  height: 4px;
+  border-radius: 2px;
+  margin-bottom: 10px;
+}
+
+@media (max-width: 600px) {
+  .actividad-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .item-icono {
+    margin-bottom: 12px;
+  }
+
+  .item-fecha {
+    margin-left: 0;
+    margin-top: 12px;
+    align-items: flex-start;
+  }
 }

package/templates/frontend/src/app/Componentes/Nucleo/mensaje-confirmacion/mensaje-confirmacion.component.html

@@ -1,22 +1,60 @@
-<h3 mat-dialog-title>{{ data.titulo }}</h3>
+<div class="contenedor-actividad">
+  <div class="header-actividad">
+    <h2><mat-icon>history</mat-icon> Actividad reciente de la cuenta</h2>
+    <p>Historial de acciones realizadas en el sistema</p>
 
-<mat-dialog-content>
-  <p>{{ data.mensaje }}</p>
-  @if(SolicitaMensaje){
-  <mat-form-field class="mensaje">
-    <mat-label>Agregar comentario</mat-label>
-    <textarea matInput placeholder="Explicación del motivo de aprobación o rechazo" [(ngModel)]="MensajeBrindado"></textarea>
-  </mat-form-field>
-  }
-
-</mat-dialog-content>
+    <div class="mensaje-informativo">
+      <mat-icon>info</mat-icon>
+      <p>Si tiene dudas sobre la información que ve en pantalla, por favor comparta una captura de pantalla al correo
+        <strong>soporte@utn.ac.cr</strong>.</p>
+    </div>
+  </div>
 
-<mat-dialog-actions>
-  @if(data.textoCerrar){
-  <button mat-button (click)="onClose()">{{ data.textoCerrar }}</button>
+  @if(cargando){
+  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
   }
 
-  @if(data.textoAceptar){
-  <button mat-button (click)="onAccept()" cdkFocusInitial>{{ data.textoAceptar }}</button>
-  }
-</mat-dialog-actions>
+  <div class="lista-actividad">
+    @if(actividad.length === 0 && !cargando) {
+    <p class="sin-datos">No hay actividad reciente.</p>
+    }
+
+    @for (item of actividad; track item.Consecutivo) {
+    <div class="actividad-item">
+      <div class="item-icono" [ngClass]="{
+          'metodo-get': item.Metodo === 'GET',
+          'metodo-post': item.Metodo === 'POST',
+          'metodo-put': item.Metodo === 'PUT',
+          'metodo-delete': item.Metodo === 'DELETE'
+        }">
+        <mat-icon [matTooltip]="item.Metodo">{{ getIcon(item.Metodo) }}</mat-icon>
+      </div>
+      <div class="item-contenido">
+        <div class="item-titulo">
+          {{ item.URL }}
+          @if(esSesionActual(item.Token)){
+          <span class="badge-sesion-actual">Sesión actual</span>
+          }
+        </div>
+        <div class="item-detalles">
+          <span class="detalle-dispositivo">
+            <mat-icon>{{ item.Dispositivo === 'Móvil' ? 'smartphone' : (item.Dispositivo === 'Tablet' ? 'tablet' :
+              'laptop') }}</mat-icon>
+            {{ item.Dispositivo }}
+          </span>
+          <span class="detalle-browser"><mat-icon>public</mat-icon> {{ item.Navegador }}</span>
+          <span class="detalle-ip"><mat-icon>lan</mat-icon> {{ item.IP }}</span>
+          <span class="detalle-pais"><mat-icon>location_on</mat-icon> {{ item.Pais }}</span>
+        </div>
+      </div>
+      <div class="item-fecha">
+        <span>{{ item.Fecha | date: 'dd/MM/yyyy' }}</span>
+        <strong>{{ item.Fecha | date: 'HH:mm:ss' }}</strong>
+        <button mat-icon-button color="warn" matTooltip="Cerrar esta sesión" (click)="cerrarSesion(item.Token)">
+          <mat-icon>logout</mat-icon>
+        </button>
+      </div>
+    </div>
+    }
+  </div>
+</div>

package/templates/frontend/src/app/Componentes/Nucleo/mensaje-confirmacion/mensaje-confirmacion.ts

@@ -1,65 +1,86 @@
-import { Component, Inject } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatButtonModule } from '@angular/material/button';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogActions,
-  MatDialogContent,
-  MatDialogRef,
-  MatDialogTitle
-} from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { FormsModule } from '@angular/forms';
-
-export interface DialogData {
-  titulo: string;
-  mensaje: string;
-  textoCerrar?: string;
-  textoAceptar?: string;
-  SolicitaMensaje?: string;
-  onClose?: () => void;
-  onAccept?: (MensajeBrindado: any) => void;
-}
+import { MatDialog } from '@angular/material/dialog';
+import { MensajeConfirmacionComponent } from '../mensaje-confirmacion/mensaje-confirmacion';
+import { DatosGlobalesService } from '../../../datos-globales.service';
 
 @Component({
-  selector: 'app-dialogo',
-  templateUrl: './mensaje-confirmacion.component.html',
-  styleUrls: ['./mensaje-confirmacion.component.css'],
-  imports: [
-    MatButtonModule,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    MatFormFieldModule,
-    MatInputModule,
-    FormsModule
-  ]
+  selector: 'app-gestion-actividad',
+  standalone: true,
+  imports: [CommonModule, MatIconModule, MatTooltipModule, MatProgressBarModule, MatButtonModule],
+  templateUrl: './gestion-actividad.component.html',
+  styleUrls: ['./gestion-actividad.component.css']
 })
-export class MensajeConfirmacionComponent {
+export class GestionActividadComponent implements OnInit {
+  public actividad: any[] = [];
+  public cargando = false;
+  private tokenActual = '';
+
+  constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService, private dialog: MatDialog) { }
 
-  SolicitaMensaje: string | undefined;
+  ngOnInit(): void {
+    this.tokenActual = this.datosGlobalesService.ObtenerToken().split(' ')[1] || '';
+    this.obtenerActividad();
+  }
 
-  public MensajeBrindado: string = '';
+  obtenerActividad(): void {
+    this.cargando = true;
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/ListarActividades`).subscribe({
+      next: (datos: any) => {
+        this.actividad = datos.body;
+      },
+      error: (error) => {
+        console.error('Error al obtener actividad:', error);
+        this.cargando = false;
+      },
+      complete: () => {
+        this.cargando = false;
+      }
+    });
+  }
 
-  constructor(
-    public dialogRef: MatDialogRef<MensajeConfirmacionComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: DialogData
-  ) {
-    this.dialogRef.disableClose = true;
-    this.SolicitaMensaje = this.data.SolicitaMensaje;
+  cerrarSesion(token: string): void {
+    this.dialog.open(MensajeConfirmacionComponent, {
+      data: {
+        titulo: 'Confirmación',
+        mensaje: '¿Está seguro de que desea cerrar esta sesión?',
+        textoCerrar: 'Cancelar',
+        textoAceptar: 'Cerrar sesión',
+        onClose: () => { },
+        onAccept: () => {
+          this.http.delete(`${this.datosGlobalesService.ObtenerURL()}misc/cerrarSesionPorToken/${token}`).subscribe({
+            next: () => {
+              if (token === this.tokenActual) {
+                this.datosGlobalesService.RedirigirALogin();
+              } else {
+                this.obtenerActividad();
+              }
+            },
+            error: (error) => {
+              console.error('Error al cerrar sesión:', error);
+            }
+          });
+        },
+      },
+    });
   }
 
-  onClose(): void {
-    if (this.data.onClose) {
-      this.data.onClose();
-    }
-    this.dialogRef.close();
+  esSesionActual(token: string): boolean {
+    return token === this.tokenActual;
   }
 
-  onAccept(): void {
-    if (this.data.onAccept) {
-      this.data.onAccept(this.MensajeBrindado);
+  getIcon(metodo: string): string {
+    switch (metodo) {
+      case 'GET': return 'search';
+      case 'POST': return 'add_circle';
+      case 'PUT': return 'edit';
+      case 'DELETE': return 'delete';
+      default: return 'help_outline';
     }
-    this.dialogRef.close(this.MensajeBrindado);
   }
 }

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

@@ -3,6 +3,7 @@ import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
 import { MatPaginatorIntl } from '@angular/material/paginator';
 import { PaginadorPersonalizado } from './Componentes/Nucleo/tabla/paginador-personalizado';
@@ -15,8 +16,10 @@ export const appConfig: ApplicationConfig = {
     { provide: MatPaginatorIntl, useClass: PaginadorPersonalizado },
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
-    provideHttpClient(withFetch()),
     provideClientHydration(withEventReplay()),
+    provideAnimationsAsync(),
+    provideHttpClient(withFetch()),
+    provideClientHydration(),
     provideCharts(withDefaultRegisterables()),
     ...AnalyticsModule.forRoot().providers!,
     provideHttpClient(withInterceptors([AuthInterceptor]))