utn-cli 2.0.52 → 2.0.54

package/commands/backend.js

@@ -229,6 +229,7 @@ export async function addServiceBackend(nombreServicio = null, opciones = { cerr
   // Si tenemos información de la tabla, generamos el CRUD
   if (tableInfo) {
     generarCRUDBackend(newServicioPath, newRutaPath, Servicio, tableInfo);
+    actualizarArchivoRest(Servicio, tableInfo);
   }
 
   // Reemplazar el título amigable si se proporciona
@@ -392,6 +393,68 @@ Router.get('/reporte', async (solicitud, respuesta, next) => {
   fs.writeFileSync(rutaPath, contenidoRutas);
 }
 
+function actualizarArchivoRest(nombreServicio, tableInfo) {
+  const archivos = fs.readdirSync(process.cwd());
+  const archivoRest = archivos.find(f => f.endsWith('.rest'));
+  
+  if (!archivoRest) return;
+
+  const { columns, primaryKey } = tableInfo;
+  const nombreServicioLower = nombreServicio.toLowerCase();
+  
+  // Crear objeto de ejemplo para agregar/actualizar
+  const ejemploCuerpo = {};
+  columns.forEach(col => {
+    ejemploCuerpo[col.name] = col.type.includes('INT') ? 1 : 'Ejemplo';
+  });
+
+  const nuevoContenido = `
+# 
+# Rutas del servicio ${nombreServicio}
+# 
+
+### Listar registros
+GET {{ BASE_URL }}/${nombreServicio}/listar HTTP/1.1
+Authorization: Bearer {{ AUTH_TOKEN }}
+Content-Type: application/json
+Origin: {{ BASE_URL }}
+
+### Agregar registro
+POST {{ BASE_URL }}/${nombreServicio}/agregar HTTP/1.1
+Authorization: Bearer {{ AUTH_TOKEN }}
+Content-Type: application/json
+Origin: {{ BASE_URL }}
+
+${JSON.stringify(ejemploCuerpo, null, 2)}
+
+### Actualizar registro
+POST {{ BASE_URL }}/${nombreServicio}/actualizar HTTP/1.1
+Authorization: Bearer {{ AUTH_TOKEN }}
+Content-Type: application/json
+Origin: {{ BASE_URL }}
+
+${JSON.stringify(ejemploCuerpo, null, 2)}
+
+### Borrar registro
+POST {{ BASE_URL }}/${nombreServicio}/borrar HTTP/1.1
+Authorization: Bearer {{ AUTH_TOKEN }}
+Content-Type: application/json
+Origin: {{ BASE_URL }}
+
+{
+  "${primaryKey}": ${ejemploCuerpo[primaryKey] ? (typeof ejemploCuerpo[primaryKey] === 'number' ? ejemploCuerpo[primaryKey] : '"' + ejemploCuerpo[primaryKey] + '"') : 1}
+}
+
+### Generar reporte CSV
+GET {{ BASE_URL }}/${nombreServicio}/reporte HTTP/1.1
+Authorization: Bearer {{ AUTH_TOKEN }}
+Content-Type: application/json
+Origin: {{ BASE_URL }}
+`;
+
+  fs.appendFileSync(archivoRest, nuevoContenido);
+}
+
 export function showBackendVersion() {
   mostrarVersion(path.join(__dirname, '../package.json'));
   closeReadLine();

package/commands/createComponent.js

@@ -79,49 +79,71 @@ export async function createComponent() {
 function findTableByComment(sqlPath, serviceTitle) {
   const content = fs.readFileSync(sqlPath, 'utf-8');
   
-  // Regex para encontrar tablas y sus comentarios
-  // Buscamos CREATE OR REPLACE TABLE `db`.`table` ... COMMENT = '...serviceTitle...'
-  const tableRegex = /CREATE OR REPLACE TABLE `(.+?)`\.`(.+?)` \(([\s\S]+?)\) ENGINE = InnoDB.+?COMMENT = '.*?(?:servicio de |almacena los datos del servicio de |almacena los datos del servicio de: )?([\s\S]+?)';/gi;
+  // Dividir el archivo por cada definición de tabla
+  const tableBlocks = content.split(/CREATE OR REPLACE TABLE/i).slice(1);
   
-  let match;
-  while ((match = tableRegex.exec(content)) !== null) {
-    const dbName = match[1];
-    const tableName = match[2];
-    const tableBody = match[3];
-    const tableComment = match[4].trim();
+  for (const block of tableBlocks) {
+    // Reconstruir el inicio para facilitar el regex
+    const fullBlock = 'CREATE OR REPLACE TABLE' + block;
+    
+    // Regex para extraer DB, Tabla, Cuerpo y Comentario de este bloque específico
+    const tableRegex = /CREATE OR REPLACE TABLE `(.+?)`\.`(.+?)` \(([\s\S]+?)\) ENGINE = InnoDB.+?COMMENT = '([\s\S]+?)';/gi;
+    const match = tableRegex.exec(fullBlock);
+    
+    if (match) {
+      const dbName = match[1];
+      const tableName = match[2];
+      const tableBody = match[3];
+      const tableComment = match[4].trim();
 
-    // Si el comentario coincide con el título del servicio
-    if (tableComment.toLowerCase().includes(serviceTitle.toLowerCase()) || serviceTitle.toLowerCase().includes(tableComment.toLowerCase())) {
-      const columns = [];
-      let primaryKey = '';
+      // Verificar si el comentario coincide con el título del servicio
+      if (tableComment.toLowerCase().includes(serviceTitle.toLowerCase()) || serviceTitle.toLowerCase().includes(tableComment.toLowerCase())) {
+        const columns = [];
+        let primaryKey = '';
 
-      // Extraer columnas
-      const colRegex = /`(.+?)` (.+?)(?: COMMENT '(.+?)')?,/g;
-      let colMatch;
-      while ((colMatch = colRegex.exec(tableBody)) !== null) {
-        const colName = colMatch[1];
-        if (colName !== 'LastUpdate' && colName !== 'LastUser') {
-          columns.push({
-            name: colName,
-            type: colMatch[2],
-            alias: colMatch[3] || colName
-          });
+        // Limpiar el cuerpo para procesar líneas individualmente
+        const lines = tableBody.split('\n').map(l => l.trim()).filter(l => l.length > 0);
+        
+        for (const line of lines) {
+          // Ignorar líneas que no definen columnas reales (PRIMARY KEY, KEY, CONSTRAINT)
+          if (line.toUpperCase().startsWith('PRIMARY KEY')) {
+            const pkMatch = line.match(/PRIMARY KEY \(`(.+?)`\)/i);
+            if (pkMatch) primaryKey = pkMatch[1];
+            continue;
+          }
+          if (line.toUpperCase().startsWith('KEY') || line.toUpperCase().startsWith('CONSTRAINT') || line.toUpperCase().startsWith('UNIQUE')) {
+            continue;
+          }
+
+          // Regex para extraer nombre de columna, tipo y comentario
+          const colMatch = line.match(/^`(.+?)` (.+?)(?: COMMENT '(.+?)')?,?$/i);
+          if (colMatch) {
+            const colName = colMatch[1];
+            // Excluir metadatos automáticos
+            if (colName !== 'LastUpdate' && colName !== 'LastUser') {
+              columns.push({
+                name: colName,
+                type: colMatch[2].replace(/,$/, ''), // Limpiar coma final si existe
+                alias: colMatch[3] || colName
+              });
+            }
+          }
         }
-      }
 
-      // Extraer Primary Key
-      const pkMatch = tableBody.match(/PRIMARY KEY \(`(.+?)`\)/);
-      if (pkMatch) {
-        primaryKey = pkMatch[1];
-      }
+        // Si no se encontró PK en las líneas, buscarla de nuevo con un regex más flexible en todo el cuerpo
+        if (!primaryKey) {
+          const pkMatch = tableBody.match(/PRIMARY KEY \(`(.+?)`\)/i);
+          if (pkMatch) primaryKey = pkMatch[1];
+        }
 
-      return {
-        dbName,
-        tableName,
-        columns,
-        primaryKey,
-        serviceTitle
-      };
+        return {
+          dbName,
+          tableName,
+          columns,
+          primaryKey,
+          serviceTitle
+        };
+      }
     }
   }
   return null;

package/package.json

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

package/templates/backend/rutas/misc.js

@@ -4,6 +4,23 @@ const Router = express.Router();
 const Miscelaneo = require('./../servicios/Nucleo/Miscelaneas.js');
 const ManejadorDeErrores = require('../servicios/Nucleo/ManejadorDeErrores.js');
 
+Router.get('/ListarActividades', async (solicitud, respuesta, next) => {
+  try {
+    if (await Miscelaneo.validarTokenV2(solicitud.headers.authorization) && await Miscelaneo.validarAccesoDelOrigen(solicitud)) {
+      try {
+        return respuesta.json({ body: await Miscelaneo.ListarActividades(solicitud.headers.authorization), error: undefined });
+      } catch (error) {
+        const MensajeDeError = 'No fue posible listar las actividades';
+        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('/UsuariosActuales', async (solicitud, respuesta, next) => {
   try {
     if (await Miscelaneo.validarTokenV2(solicitud.headers.authorization) && await Miscelaneo.validarAccesoDelOrigen(solicitud)) {

package/templates/backend/server.js

@@ -30,7 +30,7 @@ app.use(async (solicitud, respuesta, next) => {
     cookies: solicitud.cookies,
     signedCookies: solicitud.signedCookies,
     userAgent: solicitud.get('User-Agent'),
-    authUser: solicitud.user ?? null,
+    authUser: await Miscelaneo.obtenerDatosDelUsuario(solicitud.headers.authorization) ?? null,
   };
   try {
     const { ejecutarConsultaSIGU } = require('./servicios/Nucleo/db.js');
@@ -61,7 +61,9 @@ asignarRutasAExpress(app);
 
 app.use((error, solicitud, respuesta, next) => {
   const { envioDeCorreo } = require('./servicios/Nucleo/EnvioDeCorreos.js');
-  envioDeCorreo(process.env.DESTINATARIODEINFORMESDEERROR, 'Informe de error desde: ' + process.env.NOMBRECANONICODELMODULO, error.stack);
+  const route = solicitud.originalUrl;
+  const message = `<b>Ruta consultada:</b> ${route}<BR /><BR />` + error.stack;
+  envioDeCorreo(process.env.DESTINATARIODEINFORMESDEERROR, 'Informe de error desde: ' + process.env.NOMBRECANONICODELMODULO, message);
   console.error(error.stack);
   respuesta.status(500).send('Error interno del servidor, el detalle del mismo fue enviado a ' + process.env.DESTINATARIODEINFORMESDEERROR);
 });

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

@@ -40,6 +40,51 @@ class Miscelaneo {
     this.EnlaceDeAcceso = undefined;
   };
 
+  async ListarActividades(Datos) {
+    try {
+      const decoded = await this.obtenerDatosDelUsuario(Datos);
+      const RUTAS_EXCLUIDAS = [
+        '/misc',
+        '/Actividad',
+        '/misc/ListarActividades',
+        '/misc/obtenerNotificaciones',
+        '/misc/configurarFrontend',
+        '/ConsentimientoInformado/ConsentimientoInformado',
+        '/misc/obtenerMensajesModulares',
+        '/misc/obtenerDetalleDelModulo',
+        '/misc/validarToken',
+        '/misc/UsuariosActuales',
+        '/misc/obtenerEnlaceDePortal',
+        '/Personas/PermisoExtra'
+      ];
+      const datos = await ejecutarConsultaSIGU(`
+        SELECT
+          Consecutivo,
+          LastUpdate AS Fecha,
+          JSON_VALUE(Solicitud, '$.ip') AS IP,
+          JSON_VALUE(Solicitud, '$.userAgent') AS Navegador,
+          JSON_VALUE(Solicitud, '$.method') AS Metodo,
+          JSON_VALUE(Solicitud, '$.originalUrl') AS URL,
+          IFNULL(JSON_VALUE(Solicitud, '$.country'), 'Costa Rica') AS Pais,
+          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'
+            WHEN JSON_VALUE(Solicitud, '$.userAgent') LIKE '%iPad%' THEN 'Tablet'
+            ELSE 'PC'
+          END AS Dispositivo
+        FROM SIGU.SIGU_BitacoraDeSolicitudes
+        WHERE JSON_VALUE(Solicitud, '$.authUser.uid') = ?
+        AND JSON_VALUE(Solicitud, '$.originalUrl') NOT IN (?)
+        ORDER BY Consecutivo DESC
+        LIMIT 100
+      `, [decoded.uid, RUTAS_EXCLUIDAS]);
+      return datos;
+    } catch (error) {
+      console.error('Error al listar actividad:', error);
+      return [];
+    }
+  }
+
   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");
@@ -494,15 +539,15 @@ class Miscelaneo {
   }
 
   async generarLastUser(Solicitud) {
-    let Resultado = undefined;
-    try {
-      Resultado = await this.obtenerDatosDelUsuario(Solicitud.headers.authorization);
-      if (!Resultado) {
-        throw new ManejadorDeErrores(ManejadorDeErrores.mensajeDeErrorVerificacionDeToken(), ManejadorDeErrores.obtenerNumeroDeLinea());
-      }
-    } catch (error) {
-      console.log(error);
-    }
+    const Resultado = await this.obtenerDatosDelUsuario(Solicitud.headers.authorization);
+    // try {
+    //   Resultado = await this.obtenerDatosDelUsuario(Solicitud.headers.authorization);
+    //   if (!Resultado) {
+    //     throw new ManejadorDeErrores(ManejadorDeErrores.mensajeDeErrorVerificacionDeToken(), ManejadorDeErrores.obtenerNumeroDeLinea());
+    //   }
+    // } catch (error) {
+    //   console.log(error);
+    // }
     let LastUser = '';
     if (Resultado) {
       LastUser = Resultado.uid;

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

@@ -0,0 +1,193 @@
+.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;
+}
+
+.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/gestion-actividad/gestion-actividad.component.html

@@ -0,0 +1,50 @@
+<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>
+    
+    <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>
+
+  @if(cargando){
+    <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>
+    }
+
+    @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 }}</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>
+        </div>
+      </div>
+    }
+  </div>
+</div>

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

@@ -0,0 +1,61 @@
+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 { DatosGlobalesService } from '../../../datos-globales.service';
+
+@Component({
+  selector: 'app-gestion-actividad',
+  standalone: true,
+  imports: [CommonModule, MatIconModule, MatTooltipModule, MatProgressBarModule],
+  templateUrl: './gestion-actividad.component.html',
+  styleUrls: ['./gestion-actividad.component.css']
+})
+export class GestionActividadComponent implements OnInit {
+  public actividad: any[] = [];
+  public cargando = false;
+
+  constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService) { }
+
+  ngOnInit(): void {
+    this.obtenerActividad();
+  }
+
+  obtenerActividad(): void {
+    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;
+      }
+    });
+    // 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;
+    //   }
+    // });
+  }
+
+  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';
+    }
+  }
+}

package/templates/frontend/src/app/Componentes/Nucleo/tabla/paginador-personalizado.ts

@@ -1,4 +1,7 @@
+import { Injectable } from '@angular/core';
 import { MatPaginatorIntl } from '@angular/material/paginator';
+
+@Injectable()
 export class PaginadorPersonalizado extends MatPaginatorIntl  {
     override itemsPerPageLabel = 'Elementos por página:';
     override nextPageLabel = 'Siguiente página';

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

@@ -38,6 +38,15 @@
   border: none;
   background: none;
   cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 4px;
+  border-radius: 50%;
+}
+
+.botonDeNavegacion:hover {
+  background-color: rgba(25, 118, 210, 0.1);
+  transform: scale(1.1);
+  color: #0b4fce;
 }
 
 /* Contenedor */
@@ -107,27 +116,24 @@
 
 .pie-col {
   display: flex;
-  gap: 10px;
+  gap: 5px;
   align-items: center;
   flex: 1;
-  /* Cada columna ocupará el mismo espacio */
   overflow: hidden;
-  /* Evita que el contenido desborde el tercio asignado */
 }
 
 .pie-col.izquierda {
   justify-content: flex-start;
-  direction: ltr;
 }
 
 .pie-col.centro {
   justify-content: center;
+  flex: 0 1 auto;
+  min-width: 0;
 }
 
 .pie-col.derecha {
   justify-content: flex-end;
-  flex-direction: row-reverse;
-  direction: rtl;
 }
 
 /* Página */
@@ -225,3 +231,43 @@
     opacity: 1;
   }
 }
+
+/* Estilos para el mat-menu de aplicaciones */
+::ng-deep .mat-mdc-menu-panel {
+  border-radius: 12px !important;
+  border: 1px solid rgba(0, 47, 107, 0.1) !important;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
+  margin-top: 8px !important;
+  background-color: white !important;
+  min-width: 200px !important;
+}
+
+::ng-deep .mat-mdc-menu-item {
+  height: 48px !important;
+  padding: 0 20px !important;
+  transition: background-color 0.2s ease !important;
+}
+
+::ng-deep .mat-mdc-menu-item:hover {
+  background-color: #f0f7ff !important;
+}
+
+::ng-deep .mat-mdc-menu-item .mat-icon {
+  color: #002f6b !important;
+  margin-right: 12px !important;
+  font-size: 22px !important;
+  width: 22px !important;
+  height: 22px !important;
+}
+
+::ng-deep .mat-mdc-menu-item span {
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  color: #444 !important;
+  margin-left: 0 !important;
+  /* Material sometimes adds weird margins */
+}
+
+::ng-deep .mat-mdc-menu-item:hover span {
+  color: #0b4fce !important;
+}

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

@@ -7,14 +7,14 @@
     </div>
     <div class="pie-col derecha">
       @if(TienePermiso) {
-      <button class="botonDeNavegacion" matTooltip="Salir" mat-button (click)="Salir()">
+      <button class="botonDeNavegacion" matTooltip="Salir" (click)="Salir()">
         <mat-icon>logout</mat-icon>
       </button>
-      <button class="botonDeNavegacion" matTooltip="Perfil" mat-button (click)="irAPerfil()">
+      <button class="botonDeNavegacion" matTooltip="Perfil" (click)="irAPerfil()">
         <mat-icon>person</mat-icon>
       </button>
       } @else {
-      <button class="botonDeNavegacion" matTooltip="Entrar" mat-button (click)="Entrar()">
+      <button class="botonDeNavegacion" matTooltip="Entrar" (click)="Entrar()">
         <mat-icon>login</mat-icon>
       </button>
       }
@@ -28,16 +28,16 @@
     <div [ngClass]="claseDelContenedor">
       @if(TienePermiso) {
       <div class="botonesDeNavegacion">
-        <button class="botonDeNavegacion" matTooltip="Ir atrás" mat-button (click)="irAtras()">
+        <button class="botonDeNavegacion" matTooltip="Ir atrás" (click)="irAtras()">
           <mat-icon>arrow_back</mat-icon>
         </button>
-        <button class="botonDeNavegacion" matTooltip="Ir al menú del módulo" mat-button (click)="irAlMenuDeModulo()">
+        <button class="botonDeNavegacion" matTooltip="Ir al menú del módulo" (click)="irAlMenuDeModulo()">
           <mat-icon>menu</mat-icon>
         </button>
-        <!-- <button class="botonDeNavegacion" matTooltip="Ir al móudulo padre" mat-button (click)="irAlModuloPadre()">
+        <!-- <button class="botonDeNavegacion" matTooltip="Ir al móudulo padre" (click)="irAlModuloPadre()">
           <mat-icon>apps</mat-icon>
         </button> -->
-        <button class="botonDeNavegacion" matTooltip="Ir al inicio" mat-button (click)="irAlInicio()">
+        <button class="botonDeNavegacion" matTooltip="Ir al inicio" (click)="irAlInicio()">
           <mat-icon>home</mat-icon>
         </button>
       </div>
@@ -79,8 +79,25 @@
       </div>
     </div>
     <div class="pie-col derecha">
+      <button class="botonDeNavegacion" matTooltip="Aplicaciones" [matMenuTriggerFor]="menuAplicaciones">
+        <mat-icon>keyboard_arrow_up</mat-icon>
+      </button>
+
+      <mat-menu #menuAplicaciones="matMenu">
+        <button mat-menu-item (click)="irASugerencias()">
+          <mat-icon>lightbulb</mat-icon>
+          <span>Sugerencias</span>
+        </button>
+        @if(TienePermiso) {
+        <button mat-menu-item (click)="irAActividad()">
+          <mat-icon>history</mat-icon>
+          <span>Actividad de la cuenta</span>
+        </button>
+        }
+      </mat-menu>
+
       @if(TienePermiso) {
-      <button class="botonDeNavegacion" matTooltip="Mensajes" mat-button (click)="irAMensajes()">
+      <button class="botonDeNavegacion" matTooltip="Mensajes" (click)="irAMensajes()">
         @if (Mensajes.length > 0) {
         <mat-icon>mark_email_unread</mat-icon>
         } @else {
@@ -89,21 +106,18 @@
       </button>
       }
       @if(EnlaceDelVideo !== '-') {
-      <button class="botonDeNavegacion" matTooltip="Vídeo" mat-button (click)="irAVideo()">
+      <button class="botonDeNavegacion" matTooltip="Vídeo" (click)="irAVideo()">
         <mat-icon>live_tv</mat-icon>
       </button>
       }
       @if(EnlaceDelManual !== '-') {
-      <button class="botonDeNavegacion" matTooltip="Ayuda" mat-button (click)="irAAyuda()">
+      <button class="botonDeNavegacion" matTooltip="Ayuda" (click)="irAAyuda()">
         <mat-icon>help</mat-icon>
       </button>
       }
-      <button class="botonDeNavegacion" matTooltip="Reporte" mat-button (click)="irASoporte()">
+      <button class="botonDeNavegacion" matTooltip="Reporte" (click)="irASoporte()">
         <mat-icon>support_agent</mat-icon>
       </button>
-      <button class="botonDeNavegacion" matTooltip="Sugerencias" mat-button (click)="irASugerencias()">
-        <mat-icon>lightbulb</mat-icon>
-      </button>
     </div>
   </div>
 </div>

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

@@ -11,9 +11,11 @@ import { MensajesComponent } from '../../../Componentes/Nucleo/mensajes/mensajes
 import { MensajeConfirmacionHTMLComponent } from '../../../Componentes/Nucleo/mensaje-confirmacion-html/mensaje-confirmacion-html';
 import { ReporteDeSugerenciasComponent } from '../../../Componentes/Nucleo/reporte-de-sugerencias/reporte-de-sugerencias.component';
 
+import { MatMenuModule } from '@angular/material/menu';
+
 @Component({
   selector: 'app-contenedor-componentes',
-  imports: [RouterOutlet, MatIconModule, MatTooltipModule, CommonModule],
+  imports: [RouterOutlet, MatIconModule, MatTooltipModule, CommonModule, MatMenuModule],
   templateUrl: './contenedor-componentes.component.html',
   styleUrl: './contenedor-componentes.component.css'
 })
@@ -210,6 +212,11 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy {
     this.dialog.open(ReporteDeSugerenciasComponent);
   }
 
+  irAActividad(): void {
+    const url = new URL(window.location.href);
+    window.location.href = `${url.origin}/Actividad`;
+  }
+
   ngOnDestroy() {
     if (this.intervaloUsuarios) {
       clearInterval(this.intervaloUsuarios);

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

@@ -3,7 +3,6 @@ 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';
@@ -16,10 +15,8 @@ export const appConfig: ApplicationConfig = {
     { provide: MatPaginatorIntl, useClass: PaginadorPersonalizado },
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
-    provideClientHydration(withEventReplay()),
-    provideAnimationsAsync(),
     provideHttpClient(withFetch()),
-    provideClientHydration(),
+    provideClientHydration(withEventReplay()),
     provideCharts(withDefaultRegisterables()),
     ...AnalyticsModule.forRoot().providers!,
     provideHttpClient(withInterceptors([AuthInterceptor]))

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

@@ -1,4 +1,5 @@
 import { Routes } from '@angular/router';
+import { GestionActividadComponent } from './Componentes/Nucleo/gestion-actividad/gestion-actividad.component';
 import { GestionTablaComponent } from './Paginas/gestion-tabla/gestion-tabla.component';
 import { ContenedorPrincipalComponent } from './Paginas/contenedor-principal/contenedor-principal.component';
 import { GestionTablaJefeComponent } from './Paginas/gestion-tabla-jefe/gestion-tabla-jefe.component';
@@ -7,6 +8,7 @@ import { GestionDeReportesComponent } from './Paginas/gestion-de-reportes/gestio
 import { GestionIframe1Component } from './Paginas/gestion-iframe1/gestion-iframe1.component';
 
 export const routes: Routes = [
+  { path: 'Actividad', component: GestionActividadComponent },
   { path: '', component: ContenedorPrincipalComponent },
   { path: 'tabla', component: GestionTablaComponent },
   { path: 'aprobaciones', component: GestionTablaJefeComponent},