utn-cli 1.0.0

package/templates/frontend/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve --host=0.0.0.0 --disable-host-check",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "packageManager": "npm@10.8.2",
+  "dependencies": {
+    "@angular/animations": "^21.0.4",
+    "@angular/cdk": "^21.0.3",
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/material": "^21.0.3",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/platform-browser-dynamic": "^21.0.4",
+    "@angular/router": "^21.0.0",
+    "chart.js": "^4.5.1",    
+    "ng2-charts": "^8.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "^0.16.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^21.0.3",
+    "@angular/build": "^21.0.3",
+    "@angular/cli": "^21.0.3",
+    "@angular/compiler-cli": "^21.0.0",
+    "@types/jasmine": "^5.1.13",
+    "jasmine-core": "^5.13.0",
+    "jsdom": "^27.1.0",
+    "karma": "^6.4.4",
+    "karma-chrome-launcher": "^3.2.0",
+    "karma-coverage": "^2.2.1",
+    "karma-jasmine": "^5.1.0",
+    "karma-jasmine-html-reporter": "^2.1.0",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8"
+  }
+}

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

@@ -0,0 +1,15 @@
+.contenedor {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  justify-content: center;
+}
+
+.grafico {
+  width: 400px;
+}
+
+h3 {
+  text-align: center;
+  margin-bottom: 0.5rem;
+}

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

@@ -0,0 +1,25 @@
+<div class="contenedor">
+  @if(Datos && TipoDeGrafico==='Barras') {
+  <!-- Gráfico de Barras -->
+  <div class="grafico" [ngStyle]="{ width: Ancho, height: Alto }">
+    <h3>{{Titulo}}</h3>
+    <canvas baseChart [data]="barChartData" [options]="barChartOptions" [type]="'bar'"></canvas>
+  </div>
+  }
+
+  @if(Datos && TipoDeGrafico==='Pie') {
+  <!-- Gráfico de Pie -->
+  <div class="grafico" [ngStyle]="{ width: Ancho, height: Alto }">
+    <h3>{{Titulo}}</h3>
+    <canvas baseChart [data]="pieChartData" [options]="pieChartOptions" [type]="'pie'"></canvas>
+  </div>
+  }
+
+  @if(Datos && TipoDeGrafico==='Línea') {
+  <!-- Gráfico de Línea -->
+  <div class="grafico" [ngStyle]="{ width: Ancho, height: Alto }">
+    <h3>{{Titulo}}</h3>
+    <canvas baseChart [data]="lineChartData" [options]="lineChartOptions" [type]="'line'"></canvas>
+  </div>
+  }
+</div>

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

@@ -0,0 +1,80 @@
+import { Component, Input } from '@angular/core';
+import { BaseChartDirective } from 'ng2-charts';
+import { ChartConfiguration, ChartData } from 'chart.js';
+import { NgStyle } from '@angular/common';
+
+@Component({
+  selector: 'app-graficos',
+  standalone: true,
+  imports: [BaseChartDirective, NgStyle],
+  templateUrl: './graficos.component.html',
+  styleUrl: './graficos.component.css'
+})
+export class GraficosComponent {
+
+  @Input() public TipoDeGrafico: string = '';
+  @Input() public Datos: [{}] = [{}];
+  @Input() public Titulo: string = '';
+  @Input() public Ancho: string = '400px';
+  @Input() public Alto: string = '300px';
+
+  // === Gráfico de Barras ===
+  public barChartOptions: ChartConfiguration<'bar'>['options'] = { responsive: true, };
+  public barChartData: ChartData<'bar'> = { labels: [], datasets: [] };
+
+  // === Gráfico de Pie ===
+  public pieChartOptions: ChartConfiguration<'pie'>['options'] = { responsive: true, };
+  public pieChartData: ChartData<'pie', number[], string | string[]> = { labels: [], datasets: [] };
+
+  // === Gráfico de Línea ===
+  public lineChartOptions: ChartConfiguration<'line'>['options'] = { responsive: true, };
+  public lineChartData: ChartData<'line'> = {
+    labels: [],
+    datasets: [
+      {
+        data: [65, 59, 80, 81, 56],
+        label: 'Tendencia de Ventas',
+        fill: true,
+        tension: 0.4, // suaviza la línea
+        borderColor: 'blue',
+        backgroundColor: 'rgba(30,144,255,0.2)'
+      },
+      {
+        data: [28, 48, 40, 19, 86],
+        label: 'Tendencia de Compras',
+        fill: true,
+        tension: 0.4,
+        borderColor: 'green',
+        backgroundColor: 'rgba(34,139,34,0.2)'
+      }
+    ]
+  };
+
+  constructor() { }
+
+  ngOnChanges() {
+    if (this.TipoDeGrafico === 'Pie') {
+      const Etiquetas: string[] = [];
+      const Datos: number[] = [];
+      this.Datos.forEach((elemento: any) => {
+        Etiquetas.push(elemento.Etiqueta);
+        Datos.push(elemento.Total);
+      });
+      this.pieChartData.datasets = [{ data: Datos }];
+      this.pieChartData.labels = Etiquetas;
+    }
+    if (this.TipoDeGrafico === 'Barras') {
+      const ejesHorizontales = [...new Set(this.Datos.map((item: any) => item.EjeHorizontal))];
+      const etiquetas = [...new Set(this.Datos.map((item: any) => item.Etiqueta))];
+      const datasets = etiquetas.map(etiqueta => ({
+        label: etiqueta,
+        data: ejesHorizontales.map(mes => {
+          const registro: any = this.Datos.find((item: any) => item.EjeHorizontal === mes && item.Etiqueta === etiqueta);
+          return registro ? registro.Total : 0;
+        })
+      }));
+      this.barChartData.labels = ejesHorizontales;
+      this.barChartData.datasets = datasets;
+    }
+  }
+}

package/templates/frontend/src/app/Componentes/Nucleo/iframe/iframe.ts

@@ -0,0 +1,37 @@
+import { Component, Input, OnChanges } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-iframe',
+  standalone: true,
+  template: `
+    <div class="iframe-container">
+     @if(safeUrl) {
+       <iframe [src]="safeUrl" frameborder="0"></iframe>
+     }
+    </div>
+  `,
+  styles: [`
+    .iframe-container {
+      width: 100%;
+      height: 600px;
+      display: flex;
+    }
+    iframe {
+      flex: 1;
+      border: none;
+    }
+  `]
+})
+export class IframeComponent implements OnChanges {
+  @Input() url: string = '';
+  safeUrl!: SafeResourceUrl;
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  ngOnChanges() {
+    if (this.url) {
+      this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+.mensaje {
+  margin-top: 1%;
+  display: flex;
+  justify-content: center;
+}

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

@@ -0,0 +1,22 @@
+<h3 mat-dialog-title>{{ data.titulo }}</h3>
+
+<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>
+
+<mat-dialog-actions>
+  @if(data.textoCerrar){
+  <button mat-button (click)="onClose()">{{ data.textoCerrar }}</button>
+  }
+
+  @if(data.textoAceptar){
+  <button mat-button (click)="onAccept()" cdkFocusInitial>{{ data.textoAceptar }}</button>
+  }
+</mat-dialog-actions>

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

@@ -0,0 +1,64 @@
+import { Component, Inject } from '@angular/core';
+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;
+}
+
+@Component({
+  selector: 'app-dialogo',
+  templateUrl: './mensaje-confirmacion.component.html',
+  styleUrls: ['./mensaje-confirmacion.component.css'],
+  imports: [
+    MatButtonModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule
+  ]
+})
+export class MensajeConfirmacionComponent {
+
+  SolicitaMensaje: string | undefined;
+
+  public MensajeBrindado: string = '';
+
+  constructor(
+    public dialogRef: MatDialogRef<MensajeConfirmacionComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DialogData
+  ) {
+    this.SolicitaMensaje = this.data.SolicitaMensaje;
+  }
+
+  onClose(): void {
+    if (this.data.onClose) {
+      this.data.onClose();
+    }
+    this.dialogRef.close();
+  }
+
+  onAccept(): void {
+    if (this.data.onAccept) {
+      this.data.onAccept(this.MensajeBrindado);
+    }
+    this.dialogRef.close(this.MensajeBrindado);
+  }
+}

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

@@ -0,0 +1,5 @@
+.mensaje {
+  margin-top: 1%;
+  display: flex;
+  justify-content: center;
+}

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

@@ -0,0 +1,22 @@
+<h3 mat-dialog-title>{{ data.titulo }}</h3>
+
+<mat-dialog-content>
+  <p><span [innerHTML]="data.mensaje"></span></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>
+
+<mat-dialog-actions>
+  @if(data.textoCerrar){
+  <button mat-button (click)="onClose()">{{ data.textoCerrar }}</button>
+  }
+
+  @if(data.textoAceptar){
+  <button mat-button (click)="onAccept()" cdkFocusInitial>{{ data.textoAceptar }}</button>
+  }
+</mat-dialog-actions>

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

@@ -0,0 +1,64 @@
+import { Component, Inject } from '@angular/core';
+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;
+}
+
+@Component({
+  selector: 'mensaje-confirmacion-html',
+  templateUrl: './mensaje-confirmacion-html.component.html',
+  styleUrls: ['./mensaje-confirmacion-html.component.css'],
+  imports: [
+    MatButtonModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule
+  ]
+})
+export class MensajeConfirmacionHTMLComponent {
+
+  SolicitaMensaje: string | undefined;
+
+  public MensajeBrindado: string = '';
+
+  constructor(
+    public dialogRef: MatDialogRef<MensajeConfirmacionHTMLComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DialogData
+  ) {
+    this.SolicitaMensaje = this.data.SolicitaMensaje;
+  }
+
+  onClose(): void {
+    if (this.data.onClose) {
+      this.data.onClose();
+    }
+    this.dialogRef.close();
+  }
+
+  onAccept(): void {
+    if (this.data.onAccept) {
+      this.data.onAccept(this.MensajeBrindado);
+    }
+    this.dialogRef.close(this.MensajeBrindado);
+  }
+}

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

@@ -0,0 +1,5 @@
+.mensaje {
+  margin-top: 1%;
+  display: flex;
+  justify-content: center;
+}

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

@@ -0,0 +1,11 @@
+<h3 mat-dialog-title>Información detallada del registro</h3>
+
+<mat-dialog-content>
+  @for (propiedad of arregloDeDatos; track propiedad.llave) {
+  <p><strong>{{ propiedad.llave }}:</strong><span [innerHTML]="propiedad.valor"></span></p>
+  <mat-divider></mat-divider>
+  }
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button (click)="onClose()">Cerrar</button>
+</mat-dialog-actions>

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

@@ -0,0 +1,46 @@
+import { Component, Inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle
+} from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+export interface DialogData {
+  Informacion: any;
+  onClose?: () => void;
+}
+
+@Component({
+  selector: 'app-mensaje-informacion',
+  templateUrl: './mensaje-informacion.component.html',
+  styleUrls: ['./mensaje-informacion.component.css'],
+  imports: [
+    MatButtonModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatDividerModule
+  ]
+})
+export class MensajeInformacionComponent {
+  public arregloDeDatos: { llave: string; valor: SafeHtml }[];
+
+  constructor(public dialogRef: MatDialogRef<MensajeInformacionComponent>
+    , @Inject(MAT_DIALOG_DATA) public data: DialogData
+    , private sanitizer: DomSanitizer
+  ) {
+    this.arregloDeDatos = Object.entries(this.data).map(([llave, valor]) => ({
+      llave,
+      valor: this.sanitizer.bypassSecurityTrustHtml(valor?.toString() ?? '')
+    }));
+  }
+
+  onClose(): void {
+    this.dialogRef.close();
+  }
+}

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

@@ -0,0 +1,11 @@
+.linea {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 4px 0;
+}
+
+.tachado {
+  text-decoration: line-through;
+  color: gray;
+}

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

@@ -0,0 +1,17 @@
+<h3 mat-dialog-title>Mensajes</h3>
+
+<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>
+    </div>
+    <mat-divider></mat-divider>
+  }
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-button (click)="onClose()">Cerrar</button>
+</mat-dialog-actions>

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

@@ -0,0 +1,43 @@
+import { Component, Inject } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+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 { CommonModule } from '@angular/common';
+import { DatosGlobalesService } from '../../../datos-globales.service';
+
+@Component({
+  selector: 'app-mensajes',
+  templateUrl: './mensajes.component.html',
+  styleUrls: ['./mensajes.component.css'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatDividerModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions
+  ]
+})
+export class MensajesComponent {
+  public arregloDeDatos: { llave: any; valor: any; tachado: any }[] = [];
+
+  constructor(private http: HttpClient, public dialogRef: MatDialogRef<MensajesComponent>
+    , @Inject(MAT_DIALOG_DATA) public data: any, private datosGlobalesService: DatosGlobalesService) {
+    this.arregloDeDatos = data;
+  }
+
+  onClose(): void {
+    this.dialogRef.close();
+  }
+
+  enviar(item: { llave: any; valor: any; tachado: any }) {
+    item.tachado = true;
+    this.http
+      .post(`${this.datosGlobalesService.ObtenerURL()}misc/actualizarNotificacion`, { FechaYHoraDeCreacion: item.llave }).subscribe();
+  }
+}

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

@@ -0,0 +1,37 @@
+.contenedor {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fila {
+  width: 100%;
+  min-width: 500px;
+}
+
+.campo {
+  width: 100%;
+}
+
+.zona-archivo {
+  width: 90%;
+  height: 10vh;
+  margin-left: 4%;
+  border: 2px dashed #3498db;
+  padding: 1%;
+  align-items: center;
+  display: flex;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.texto {
+  width: 100%;
+  text-align: center;
+}
+
+.texto-clic {
+  color: #007bff;
+  font-weight: bold;
+  cursor: pointer;
+  text-decoration: underline;
+}

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

@@ -0,0 +1,35 @@
+<h2 mat-dialog-title>Reporte de incidencias</h2>
+<mat-dialog-content>
+  <div class="contenedor">
+    <form [formGroup]="formulario">
+      <div class="fila">
+        <mat-form-field class="campo">
+          <mat-label>Detalle del problema</mat-label>
+          <textarea matInput formControlName="detalle" required></textarea>
+        </mat-form-field>
+        <mat-form-field class="campo">
+          <mat-label>Resultado esperado</mat-label>
+          <textarea matInput formControlName="resultado" required></textarea>
+        </mat-form-field>
+        <mat-form-field class="campo">
+          <mat-label>Información de contacto</mat-label>
+          <textarea matInput formControlName="contacto" required></textarea>
+        </mat-form-field>
+      </div>
+      <div class="zona-archivo" (click)="AbrirGestorDeArchivos()" (dragover)="ArrastrarAdentro($event)"
+        (dragleave)="ArrastrarAfuera($event)" (drop)="Soltar($event)">
+        @if(!Archivo){
+        <p class="texto">Arrastra y suelta un archivo aquí o <span class="texto-clic">haz clic para subirlo</span></p>
+        }
+        @else{
+        <p>Archivo seleccionado: {{ Archivo.name }}</p>
+        }
+        <input type="file" #EntradDeArchivo hidden (change)="ArchivoSeleccionado($event)">
+      </div>
+    </form>
+  </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button (click)="Cerrar()">Cerrar</button>
+  <button mat-button (click)="Enviar()">Enviar</button>
+</mat-dialog-actions>