utn-cli 2.1.45 → 2.1.47

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

@@ -1,23 +1,26 @@
-<h3 mat-dialog-title>{{ data.titulo }}</h3>
+<div class="dialogo-header">
+  <mat-icon class="dialogo-icono">help_outline</mat-icon>
+  <span class="dialogo-titulo">{{ data.titulo }}</span>
+</div>
 
 <mat-dialog-content>
-  <p>{{ data.mensaje }}</p>
+  <p class="dialogo-mensaje">{{ data.mensaje }}</p>
   @if(SolicitaMensaje){
-  <mat-form-field class="mensaje">
+  <mat-form-field class="mensaje" appearance="outline">
     <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>
 
 <mat-dialog-actions>
   @if(data.textoCerrar){
-  <button mat-button (click)="onClose()">{{ data.textoCerrar }}</button>
+  <button mat-stroked-button class="btn-cancelar" (click)="onClose()">{{ data.textoCerrar }}</button>
   }
-
   @if(data.textoAceptar){
-  <button mat-button (click)="onAccept()" cdkFocusInitial>{{ data.textoAceptar }}</button>
+  <button mat-flat-button class="btn-aceptar" (click)="onAccept()" cdkFocusInitial>{{ data.textoAceptar }}</button>
   }
-</mat-dialog-actions>
+</mat-dialog-actions>
+
+<div class="dialogo-pie"></div>

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

@@ -1,11 +1,11 @@
 import { Component, Inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 import {
   MAT_DIALOG_DATA,
   MatDialogActions,
   MatDialogContent,
-  MatDialogRef,
-  MatDialogTitle
+  MatDialogRef
 } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -27,7 +27,7 @@ export interface DialogData {
   styleUrls: ['./mensaje-confirmacion.component.css'],
   imports: [
     MatButtonModule,
-    MatDialogTitle,
+    MatIconModule,
     MatDialogContent,
     MatDialogActions,
     MatFormFieldModule,

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

@@ -1,3 +1,51 @@
+/* Header */
+.dialogo-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: linear-gradient(90deg, rgba(1, 33, 105, 1) 0%, rgba(63, 97, 171, 1) 100%);
+  color: white;
+  padding: 24px 20px 16px;
+  margin: -8px -8px 0;
+}
+
+.dialogo-icono {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.dialogo-titulo {
+  font-size: 1.1rem;
+  font-weight: 600;
+  font-family: 'Roboto', sans-serif;
+  letter-spacing: 0.2px;
+}
+
+/* Sin mensajes */
+.sin-mensajes {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 32px 16px;
+  color: #8fa0b4;
+  gap: 8px;
+}
+
+.sin-mensajes-icono {
+  font-size: 40px;
+  width: 40px;
+  height: 40px;
+}
+
+.sin-mensajes p {
+  font-size: 0.95rem;
+  font-family: 'Roboto', sans-serif;
+  margin: 0;
+}
+
+/* Líneas de mensajes */
 .linea {
   display: flex;
   justify-content: space-between;
@@ -9,3 +57,22 @@
   text-decoration: line-through;
   color: gray;
 }
+
+/* Botones */
+mat-dialog-actions {
+  padding: 8px 20px 16px;
+}
+
+.btn-cerrar {
+  color: #012169;
+  border-color: #012169;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+}
+
+/* Pie */
+.dialogo-pie {
+  height: 20px;
+  background: linear-gradient(90deg, rgba(1, 33, 105, 1) 0%, rgba(63, 97, 171, 1) 100%);
+  margin: 0 -8px;
+}

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

@@ -1,17 +1,29 @@
-<h3 mat-dialog-title>Mensajes</h3>
+<div class="dialogo-header">
+  <mat-icon class="dialogo-icono">mark_email_unread</mat-icon>
+  <span class="dialogo-titulo">Mensajes</span>
+</div>
 
 <mat-dialog-content>
-  @for (item of arregloDeDatos; track item.llave) {
-    <div class="linea" [class.tachado]="item.tachado">
-      <span [innerHTML]="item.valor"></span>
-      <button mat-icon-button color="primary" (click)="enviar(item)">
-        <mat-icon>beenhere</mat-icon>
-      </button>
+  @if (arregloDeDatos.length === 0) {
+    <div class="sin-mensajes">
+      <mat-icon class="sin-mensajes-icono">inbox</mat-icon>
+      <p>No hay notificaciones actualmente</p>
     </div>
-    <mat-divider></mat-divider>
+  } @else {
+    @for (item of arregloDeDatos; track item.llave) {
+      <div class="linea" [class.tachado]="item.tachado">
+        <span [innerHTML]="item.valor"></span>
+        <button mat-icon-button color="primary" (click)="enviar(item)">
+          <mat-icon>beenhere</mat-icon>
+        </button>
+      </div>
+      <mat-divider></mat-divider>
+    }
   }
 </mat-dialog-content>
 
 <mat-dialog-actions align="end">
-  <button mat-button (click)="onClose()">Cerrar</button>
+  <button mat-stroked-button class="btn-cerrar" (click)="onClose()">Cerrar</button>
 </mat-dialog-actions>
+
+<div class="dialogo-pie"></div>

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

@@ -4,7 +4,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
-import { MatDialogContent, MatDialogActions, MatDialogTitle } from '@angular/material/dialog';
+import { MatDialogContent, MatDialogActions } from '@angular/material/dialog';
 import { CommonModule } from '@angular/common';
 import { DatosGlobalesService } from '../../../datos-globales.service';
 
@@ -20,7 +20,6 @@ interface FilaMensaje { llave: string; valor: string; tachado: boolean }
     MatButtonModule,
     MatIconModule,
     MatDividerModule,
-    MatDialogTitle,
     MatDialogContent,
     MatDialogActions
   ]

package/templates/frontend/src/app/Componentes/Nucleo/panel-notificaciones/panel-notificaciones.component.css

@@ -0,0 +1,209 @@
+/* Overlay */
+.panel-overlay {
+  position: fixed;
+  top: 52px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 999;
+  animation: overlayEntrada 0.25s ease;
+}
+
+.panel-overlay-cerrando {
+  animation: overlaySalida 0.26s ease forwards;
+  pointer-events: none;
+}
+
+@keyframes overlayEntrada {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes overlaySalida {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+/* Panel */
+.panel {
+  position: fixed;
+  top: 52px;
+  right: 0;
+  height: calc(100vh - 52px);
+  width: 320px;
+  max-width: 100vw;
+  background: white;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.18);
+  animation: panelEntrada 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.panel-cerrando {
+  animation: panelSalida 0.26s cubic-bezier(0.4, 0, 0.6, 1) forwards;
+  pointer-events: none;
+}
+
+@keyframes panelEntrada {
+  from { transform: translateX(100%); }
+  to   { transform: translateX(0); }
+}
+
+@keyframes panelSalida {
+  from { transform: translateX(0); }
+  to   { transform: translateX(100%); }
+}
+
+/* Header */
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: linear-gradient(90deg, rgba(1, 33, 105, 1) 0%, rgba(63, 97, 171, 1) 100%);
+  color: white;
+  padding: 18px 16px;
+  flex-shrink: 0;
+}
+
+.panel-header-izq {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.panel-icono {
+  font-size: 22px;
+  width: 22px;
+  height: 22px;
+}
+
+.panel-titulo {
+  font-size: 1.05rem;
+  font-weight: 600;
+  font-family: 'Roboto', sans-serif;
+}
+
+.panel-btn-cerrar {
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 50%;
+  transition: background 0.2s;
+}
+
+.panel-btn-cerrar:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+/* Contenido */
+.panel-contenido {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 16px;
+}
+
+/* Sin mensajes */
+.sin-mensajes {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 48px 16px;
+  color: #8fa0b4;
+  gap: 10px;
+}
+
+.sin-mensajes-icono {
+  font-size: 48px;
+  width: 48px;
+  height: 48px;
+}
+
+.sin-mensajes p {
+  font-size: 0.95rem;
+  font-family: 'Roboto', sans-serif;
+  margin: 0;
+}
+
+/* Barra de acciones */
+.barra-acciones {
+  display: flex;
+  justify-content: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #e0e0e0;
+  margin-bottom: 4px;
+}
+
+.link-borrar-todas {
+  font-size: 0.75rem;
+  font-family: 'Roboto', sans-serif;
+  color: #8fa0b4;
+  cursor: pointer;
+  transition: color 0.2s;
+  outline: none;
+  border-radius: 3px;
+}
+
+.link-borrar-todas:hover {
+  color: #d32f2f;
+}
+
+.link-borrar-todas:focus-visible {
+  outline: 2px solid #3F61AB;
+  outline-offset: 3px;
+  color: #3F61AB;
+}
+
+/* Líneas */
+.linea {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.9rem;
+  color: #333;
+}
+
+
+.tachado {
+  text-decoration: line-through;
+  color: #aaa;
+}
+
+.eliminando {
+  animation: deslizarIzquierda 0.35s cubic-bezier(0.4, 0, 0.6, 1) forwards;
+  pointer-events: none;
+}
+
+@keyframes deslizarIzquierda {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+    max-height: 80px;
+  }
+  60% {
+    transform: translateX(-110%);
+    opacity: 0;
+    max-height: 80px;
+  }
+  to {
+    transform: translateX(-110%);
+    opacity: 0;
+    max-height: 0;
+    padding: 0;
+    margin: 0;
+  }
+}
+
+/* Pie */
+.panel-pie {
+  height: 18px;
+  background: linear-gradient(90deg, rgba(1, 33, 105, 1) 0%, rgba(63, 97, 171, 1) 100%);
+  flex-shrink: 0;
+}

package/templates/frontend/src/app/Componentes/Nucleo/panel-notificaciones/panel-notificaciones.component.html

@@ -0,0 +1,45 @@
+<div class="panel-overlay" [class.panel-overlay-cerrando]="cerrando" (click)="onCerrar()"></div>
+
+<div class="panel" [class.panel-cerrando]="cerrando">
+  <div class="panel-header">
+    <div class="panel-header-izq">
+      <mat-icon class="panel-icono">mark_email_unread</mat-icon>
+      <span class="panel-titulo">Notificaciones</span>
+    </div>
+    <button class="panel-btn-cerrar" (click)="onCerrar()" matTooltip="Cerrar">
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+
+  <div class="panel-contenido">
+    @if (datos.length === 0) {
+      <div class="sin-mensajes">
+        <mat-icon class="sin-mensajes-icono">inbox</mat-icon>
+        <p>No hay notificaciones actualmente</p>
+      </div>
+    } @else {
+      <div class="barra-acciones">
+        <span
+          class="link-borrar-todas"
+          (click)="eliminarTodas()"
+          (keydown.enter)="eliminarTodas()"
+          (keydown.space)="eliminarTodas()"
+          tabindex="0"
+          role="button"
+          aria-label="Borrar todas las notificaciones">Borrar todas</span>
+      </div>
+
+      @for (item of datos; track item.llave) {
+        <div class="linea" [class.eliminando]="item.eliminando">
+          <span [innerHTML]="item.valor"></span>
+          <button mat-icon-button (click)="eliminarNotificacion(item)" matTooltip="Eliminar notificación">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </div>
+        <mat-divider></mat-divider>
+      }
+    }
+  </div>
+
+  <div class="panel-pie"></div>
+</div>

package/templates/frontend/src/app/Componentes/Nucleo/panel-notificaciones/panel-notificaciones.component.ts

@@ -0,0 +1,53 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { DatosGlobalesService } from '../../../datos-globales.service';
+
+interface FilaMensaje { llave: string; valor: string; tachado: boolean; eliminando: boolean; }
+
+@Component({
+  selector: 'app-panel-notificaciones',
+  templateUrl: './panel-notificaciones.component.html',
+  styleUrls: ['./panel-notificaciones.component.css'],
+  standalone: true,
+  imports: [MatIconModule, MatButtonModule, MatDividerModule, MatTooltipModule]
+})
+export class PanelNotificacionesComponent {
+  @Input() datos: FilaMensaje[] = [];
+  @Output() cerrar = new EventEmitter<void>();
+  public cerrando = false;
+
+  constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService) {}
+
+  onCerrar(): void {
+    if (this.cerrando) return;
+    this.cerrando = true;
+    setTimeout(() => this.cerrar.emit(), 260);
+  }
+
+  eliminarNotificacion(item: FilaMensaje): void {
+    if (item.eliminando) return;
+    item.eliminando = true;
+    this.http.post(`${this.datosGlobalesService.ObtenerURL()}misc/actualizarNotificacion`, { FechaYHoraDeCreacion: item.llave }).subscribe();
+    setTimeout(() => {
+      const idx = this.datos.indexOf(item);
+      if (idx !== -1) this.datos.splice(idx, 1);
+    }, 380);
+  }
+
+  eliminarTodas(): void {
+    const pendientes = this.datos.filter(item => !item.eliminando);
+    pendientes.forEach((item, i) => {
+      setTimeout(() => {
+        item.eliminando = true;
+        this.http.post(`${this.datosGlobalesService.ObtenerURL()}misc/actualizarNotificacion`, { FechaYHoraDeCreacion: item.llave }).subscribe();
+      }, i * 60);
+    });
+    setTimeout(() => {
+      this.datos.splice(0, this.datos.length);
+    }, pendientes.length * 60 + 380);
+  }
+}

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

@@ -1,36 +1,129 @@
-.contenedor {
+/* Header */
+.dialogo-header {
   display: flex;
-  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  background: linear-gradient(90deg, rgba(1, 33, 105, 1) 0%, rgba(63, 97, 171, 1) 100%);
+  color: white;
+  padding: 24px 20px 16px;
+  margin: -8px -8px 0;
 }
 
-.fila {
-  width: 100%;
+.dialogo-icono {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.dialogo-titulo {
+  font-size: 1.1rem;
+  font-weight: 600;
+  font-family: 'Roboto', sans-serif;
+  letter-spacing: 0.2px;
+}
+
+/* Frase destacada */
+.dialogo-frase {
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: #012169;
+  margin: 20px 0 6px;
+  font-family: 'Roboto', sans-serif;
+  line-height: 1.3;
+}
+
+/* Subtítulo */
+.dialogo-subtitulo {
+  font-size: 0.875rem;
+  color: #5a6a7a;
+  margin: 0 0 20px;
+  font-family: 'Roboto', sans-serif;
+  line-height: 1.5;
 }
 
+/* Campo */
 .campo {
   width: 100%;
 }
 
+/* Zona de archivo */
 .zona-archivo {
-  width: 90%;
-  height: 10vh;
-  margin-left: 4%;
-  border: 2px dashed #3498db;
-  padding: 1%;
-  align-items: center;
+  width: 100%;
+  min-height: 72px;
+  border: 2px dashed #c4d0de;
+  border-radius: 8px;
+  padding: 12px 16px;
   display: flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
-  transition: background 0.3s;
+  transition: background 0.2s, border-color 0.2s;
+  margin-bottom: 4px;
+  box-sizing: border-box;
+}
+
+.zona-archivo:hover,
+.zona-archivo.arrastrar {
+  background: #eaf1fb;
+  border-color: #3f61ab;
 }
 
 .texto {
   width: 100%;
   text-align: center;
+  font-size: 0.875rem;
+  color: #5a6a7a;
+  margin: 0;
+  font-family: 'Roboto', sans-serif;
 }
 
 .texto-clic {
-  color: #007bff;
-  font-weight: bold;
+  color: #012169;
+  font-weight: 600;
   cursor: pointer;
   text-decoration: underline;
 }
+
+/* Botones */
+mat-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 8px 20px 16px;
+}
+
+.btn-cancelar {
+  color: #012169;
+  border-color: #012169;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+}
+
+.btn-enviar {
+  background-color: #012169;
+  color: white;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.btn-enviar mat-icon {
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+}
+
+.btn-enviar:disabled {
+  background-color: #a0b0c4;
+  color: white;
+}
+
+/* Pie */
+.dialogo-pie {
+  height: 20px;
+  background: linear-gradient(90deg, rgba(1, 33, 105, 1) 0%, rgba(63, 97, 171, 1) 100%);
+  margin: 0 -8px;
+}