utn-cli 1.0.0

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

@@ -0,0 +1,92 @@
+.esquina {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.1) 50%);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.pin-icon {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  font-size: 24px;
+  color: #888;
+  cursor: pointer;
+  z-index: 2;
+  transition: color 0.3s;
+}
+
+.pin-icon.pinned {
+  color: #222;
+}
+
+.modulo-card {
+  position: relative;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 16px;
+  width: 300px;
+  height: 150px;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin: 10px;
+}
+
+.modulo-card:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+  transform: scale(1.01);
+}
+
+.modulo-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.modulo-icon {
+  width: 48px;
+  height: 48px;
+}
+
+.modulo-nombre {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: #333;
+}
+
+.modulo-tipo {
+  font-size: 1.3rem;
+  font-weight: 500;
+}
+
+.tipo-área {
+  color: #0077cc;
+}
+
+.tipo-proceso {
+  color: #2e7d32;
+}
+
+.tipo-servicio {
+  color: #6a1b9a;
+}
+
+.modulo-descripcion {
+  font-size: 1.1rem;
+  color: #555;
+  margin-bottom: 10px;
+}
+
+.modulo-info {
+  font-size: 0.85rem;
+  color: #777;
+}

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

@@ -0,0 +1,17 @@
+<div class="modulo-card" (click)="onClick()" [ngStyle]="{ 'background-color': modulo.Color }">
+  <span class="material-icons pin-icon" [ngClass]="{ 'pinned': estaEnFavoritos() }" (click)="alternarFavorito($event)">
+    push_pin
+  </span>
+  <div class="modulo-header">
+    <img src="{{ modulo.Icono }}" class="modulo-icon" />
+    <div>
+      <!-- <h2 class="modulo-nombre">{{ modulo.Nombre }}</h2> -->
+      <span class="modulo-tipo tipo-{{ modulo.Tipo.toLowerCase() }}">{{ modulo.Tipo }}</span>
+    </div>
+  </div>
+  <p class="modulo-descripcion">{{ modulo.Descripcion }}</p>
+  <div class="modulo-info"></div>
+  @if(modulo.Tipo === 'Servicio') {
+  <div class="esquina"></div>
+  }
+</div>

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

@@ -0,0 +1,42 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+@Component({
+  selector: 'app-tarjeta-modulo',
+  templateUrl: './tarjeta-modulo.component.html',
+  styleUrls: ['./tarjeta-modulo.component.css'],
+  imports: [CommonModule]
+})
+export class TarjetaModuloComponent {
+  @Input() modulo!: any;
+  @Output() moduloSeleccionado = new EventEmitter<any>();
+  @Output() favoritoToggled = new EventEmitter<string>();
+
+  onClick() {
+    this.moduloSeleccionado.emit(this.modulo);
+  }
+
+  alternarFavorito(event: MouseEvent) {
+    event.stopPropagation();
+    const favoritos = this.obtenerFavoritos();
+    const index = favoritos.indexOf(this.modulo.Nombre);
+    if (index > -1) {
+      favoritos.splice(index, 1);
+    } else {
+      favoritos.push(this.modulo.Nombre);
+    }
+    localStorage.setItem('ModulosFavoritos', JSON.stringify(favoritos));
+    this.favoritoToggled.emit(this.modulo.Padre);
+  }
+
+  estaEnFavoritos(): boolean {
+    const favoritos = this.obtenerFavoritos();
+    return favoritos.includes(this.modulo.Nombre);
+  }
+
+  obtenerFavoritos(): string[] {
+    const datos = localStorage.getItem('ModulosFavoritos');
+    return datos ? JSON.parse(datos) : [];
+  }
+}

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

@@ -0,0 +1,90 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.contenedor {
+  margin-top: 3%;
+  margin-right: 3vw;
+  width: 20vw;
+  padding: 5%;
+  background: #ffffff;
+  box-shadow: 0px 3px 6px #00000029;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+@media (max-width: 480px) {
+  .contenedor {
+    width: 80vw;
+  }
+}
+
+@media (min-width: 481px) and (max-width: 1025px) {
+  .contenedor {
+    width: 50vw;
+  }
+}
+
+.cabecera_contenedor {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cabecera {
+  width: 90%;
+}
+
+.titulo {
+  font-family: "Roboto";
+  font-size: large;
+  font-weight: 600;
+  color: #000000;
+  text-align: left;
+}
+
+.descripcion {
+  font-family: "Roboto";
+  font-size: small;
+  color: #000000;
+  text-align: left;
+}
+
+.icono {
+  background: #eef2ff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #1b3069;
+  padding: 8px;
+  cursor: pointer;
+  position: relative;
+}
+
+.menu-rutas {
+  list-style: none;
+  margin: 5px 0 0;
+  padding: 0;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: white;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  box-shadow: 0px 3px 6px #00000029;
+  z-index: 10;
+  width: max-content;
+}
+
+.menu-rutas li {
+  padding: 8px 15px;
+  cursor: pointer;
+}
+
+.menu-rutas li:hover {
+  background-color: #eef2ff;
+}

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

@@ -0,0 +1,22 @@
+<div class="contenedor" (click)="irAPrimeraRuta()"> 
+  <div class="cabecera_contenedor">
+    <div class="cabecera">
+      <p class="titulo">{{ titulo }}</p>
+      <p class="descripcion">{{ descripcion }}</p>
+    </div>
+
+    <div #iconoRef class="icono" (click)="$event.stopPropagation(); mostrarMenu = !mostrarMenu">
+      <mat-icon [fontIcon]="'keyboard_arrow_down'"></mat-icon>
+
+      @if (mostrarMenu) {
+        <ul class="menu-rutas" (click)="$event.stopPropagation()">
+          @for (item of rutas; track item) {
+            <li (click)="irARuta(item.ruta); $event.stopPropagation()">
+              {{ item.nombre }}
+            </li>
+          }
+        </ul>
+      }
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,46 @@
+import { Component, ElementRef, HostListener, Input, ViewChild } from "@angular/core";
+import { MatIconModule } from "@angular/material/icon";
+import { MatCardModule } from "@angular/material/card";
+import { Router } from "@angular/router";
+
+@Component({
+  selector: "app-tarjeta-multiple",
+  standalone: true,
+  imports: [MatIconModule, MatCardModule],
+  templateUrl: "./tarjeta-multiple.component.html",
+  styleUrl: "./tarjeta-multiple.component.css"
+})
+
+export class TarjetaMultipleComponent {
+  @Input() titulo: string = "";
+  @Input() descripcion: string = "";
+  @Input() rutas: { nombre: string; ruta: string }[] = [];
+
+  mostrarMenu: boolean = false;
+
+  @ViewChild('iconoRef') iconoRef!: ElementRef;
+
+  constructor(private ruta: Router) { }
+
+  irAPrimeraRuta() {
+    if (this.rutas && this.rutas.length > 0) {
+      this.irARuta(this.rutas[0].ruta);
+    }
+  }
+
+  irARuta(ruta: string) {
+    this.ruta.navigate([ruta]);
+    this.mostrarMenu = false;
+  }
+
+  @HostListener('document:click', ['$event'])
+  handleClickFuera(event: MouseEvent) {
+    if (
+      this.mostrarMenu &&
+      this.iconoRef &&
+      !this.iconoRef.nativeElement.contains(event.target)
+    ) {
+      this.mostrarMenu = false;
+    }
+  }
+}

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

@@ -0,0 +1,129 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.contenedor {
+  margin-top: 3%;
+  width: 20vw;
+  background: #ffffff 0% 0% no-repeat padding-box;
+  box-shadow: 0px 3px 6px #00000029;
+  border-radius: 10px;
+  opacity: 1;
+  margin-right: 3vw;
+  padding: 5%;
+  cursor: pointer;
+}
+
+@media (max-width:480px) {
+  .contenedor {
+    width: 80vw;
+  }
+}
+
+@media (min-width:481px) and (max-width:1025px) {
+  .contenedor {
+    width: 50vw;
+  }
+}
+
+.contenedor .cabecera_contenedor {
+  display: flex;
+  flex-direction: row;
+}
+
+.contenedor .cabecera_contenedor .icono {
+  background: #eef2ff 0% 0% no-repeat padding-box;
+  opacity: 1;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  transform: translate(0);
+  height: 75%;
+  color: #1b3069;
+  font-size: x-small;
+  font-weight: bold;
+  margin-left: 5%;
+  padding: 2%;
+}
+
+.contenedor .cabecera_contenedor .icono .numero {
+  font-size: large;
+}
+
+.contenedor .cabecera {
+  width: 90%;
+}
+
+.contenedor .cabecera .titulo {
+  text-align: left;
+  font-family: "Roboto";
+  font-size: large;
+  font-weight: 600;
+  letter-spacing: 0px;
+  color: #000000;
+  opacity: 1;
+}
+
+.contenedor .cabecera .descripcion {
+  text-align: left;
+  font-family: "Roboto";
+  font-size: small;
+  letter-spacing: 0px;
+  color: #000000;
+  opacity: 1;
+}
+
+.contenedor .contenido {
+  text-align: left;
+  font-family: "Roboto";
+  font-size: small;
+  letter-spacing: 0px;
+  color: #000000;
+  opacity: 1;
+  margin-left: 3%;
+  margin-top: 5%;
+}
+
+.contenedor .cantidad {
+  min-height: 20px;
+  width: 100%;
+  justify-content: center;
+  font-family: "Roboto";
+  font-size: large;
+  font-weight: 600;
+  letter-spacing: 0px;
+  color: #000000;
+  opacity: 1;
+}
+
+.contenedor .izquierda {
+  margin-top: 20%;
+  align-items: start;
+  color: #1b3069;
+  font-weight: 700;
+}
+
+.contenedor .pie {
+  border-top: 2px solid #eef2ff;
+  opacity: 1;
+  padding: 5%;
+  position: relative;
+}
+
+.contenedor .linea {
+  width: 0%;
+  border: 1px solid #95d03a;
+  opacity: 1;
+}
+
+.contenedor .pie p {
+  text-align: left;
+  font: normal normal normal 15px/20px Roboto;
+  letter-spacing: 0px;
+  color: #1b3069;
+  opacity: 1;
+  font-size: small;
+  text-decoration: none;
+}

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

@@ -0,0 +1,20 @@
+<div class="contenedor" (click)="onClick()">
+  <div class="cabecera_contenedor">
+    <div class="cabecera">
+      <p class="titulo">
+        {{ titulo }}
+      </p>
+      <p class="descripcion">
+        {{ descripcion }}
+      </p>
+    </div>
+    <div class="icono">
+      @if(icono){
+      <mat-icon [fontIcon]="icono"></mat-icon>
+      }
+    </div>
+  </div>
+  <div class="pie">
+    <p>CONTINUAR</p>
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { MatIconModule } from "@angular/material/icon";
+
+@Component({
+  selector: "app-tarjeta-reporte",
+  imports: [MatIconModule],
+  templateUrl: "./tarjeta-reporte.component.html",
+  styleUrl: "./tarjeta-reporte.component.css"
+})
+export class TarjetaReporteComponent {
+  @Input() titulo: string = "";
+  @Input() descripcion: string = "";
+  @Input() icono: any = null;
+  @Input() reporteAGenerar: string = '';
+  @Output() GenerarReporte: EventEmitter<{ reporte: string }> = new EventEmitter();
+
+  constructor() { }
+
+  onClick() {
+    this.GenerarReporte.emit({reporte: this.reporteAGenerar});
+  }
+
+  ngOnInit() {
+  }
+}

package/templates/frontend/src/app/Componentes/guardar-incapacidad/guardar-incapacidad.component.css

@@ -0,0 +1,20 @@
+.contenedor {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.fila {
+    width: 100%;
+}
+
+.campo_mitad {
+    width: 49%;
+}
+
+.campo {
+    width: 100%;
+}
+
+.campo_mitad:nth-child(odd) {
+    margin-right: 2%;
+}

package/templates/frontend/src/app/Componentes/guardar-incapacidad/guardar-incapacidad.component.html

@@ -0,0 +1,46 @@
+<h2 mat-dialog-title>{{Incapacidad.NumeroBoleta?'Editar':'Agregar'}} incapacidad</h2>
+<mat-dialog-content>
+  <div class="contenedor">
+    <form [formGroup]="grupoFormulario">
+      <div class="fila">
+        <mat-form-field class="campo_mitad">
+          <mat-label>Número de boleta</mat-label>
+          <input matInput formControlName="NumeroBoletaControl" required />
+        </mat-form-field>
+        <mat-form-field class="campo_mitad">
+          <mat-label>Cantidad de días</mat-label>
+          <input matInput type="number" min="1" formControlName="TotalDiasControl" required />
+        </mat-form-field>
+      </div>
+      <mat-form-field class="campo">
+        <mat-label>Tipo de incapacidad</mat-label>
+        <mat-select formControlName="TipoIncapacidadControl" required>
+          @for(tipo of TiposDeLicencias; track $index){
+          <mat-option [value]="tipo.TipoId">{{tipo.Descripcion}}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field class="campo_mitad">
+        <mat-label>Fecha de inicio</mat-label>
+        <input matInput type="date" formControlName="FechaInicioControl" required />
+      </mat-form-field>
+      <mat-form-field class="campo_mitad">
+        <mat-label>Fecha de final</mat-label>
+        <input matInput type="date" formControlName="FechaFinalControl" required />
+      </mat-form-field>
+      <mat-form-field class="campo_mitad">
+        <mat-label>Código y nombre del doctor</mat-label>
+        <input matInput formControlName="CodigoDoctorControl" required />
+      </mat-form-field>
+      <mat-form-field class="campo_mitad">
+        <mat-label>Área de salud</mat-label>
+        <input matInput formControlName="AreaSaludControl" required />
+      </mat-form-field>
+    </form>
+  </div>
+
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button (click)="onNoClick()">Cancelar</button>
+  <button mat-button (click)="Guardar()">{{Incapacidad.NumeroBoleta?'Guardar':'Agregar'}}</button>
+</mat-dialog-actions>

package/templates/frontend/src/app/Componentes/guardar-incapacidad/guardar-incapacidad.component.ts

@@ -0,0 +1,64 @@
+import { Component, EventEmitter, inject, Output, output } from '@angular/core';
+import { FormBuilder, FormsModule, Validators, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+
+@Component({
+  selector: 'app-guardar-incapacidad',
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule,
+    MatButtonModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatSelectModule,
+    ReactiveFormsModule
+  ],
+  templateUrl: './guardar-incapacidad.component.html',
+  styleUrl: './guardar-incapacidad.component.css'
+})
+export class GuardarIncapacidadComponent {
+  private _formBuilder = inject(FormBuilder);
+  readonly dialogRef = inject(MatDialogRef<GuardarIncapacidadComponent>);
+  readonly data = inject(MAT_DIALOG_DATA);
+  TiposDeLicencias = this.data.TiposDeLicencias;
+  readonly Incapacidad = this.data.Incapacidad ?? {};
+  grupoFormulario = this._formBuilder.group({
+    NumeroBoletaControl: [this.Incapacidad.NumeroBoleta, Validators.required],
+    TipoIncapacidadControl: [this.Incapacidad.TipoId, Validators.required],
+    TotalDiasControl: [this.Incapacidad.TotalDeDias, Validators.required],
+    FechaInicioControl: [this.Incapacidad.FechaInicio, Validators.required],
+    FechaFinalControl: [this.Incapacidad.FechaFinal, Validators.required],
+    CodigoDoctorControl: [this.Incapacidad.CodigoDeDoctor, Validators.required],
+    AreaSaludControl: [this.Incapacidad.AreaDeSalud, Validators.required],
+  });
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  Guardar() {
+    if (this.grupoFormulario.invalid) {
+      this.grupoFormulario.markAllAsTouched();
+      return;
+    }
+
+    let incapacidad = this.grupoFormulario.controls;
+    this.dialogRef.close({
+      NumeroBoleta: incapacidad.NumeroBoletaControl.value,
+      TipoId: incapacidad.TipoIncapacidadControl.value,
+      TotalDeDias: incapacidad.TotalDiasControl.value,
+      FechaDeInicio: incapacidad.FechaInicioControl.value,
+      FechaDeFinal: incapacidad.FechaFinalControl.value,
+      CodigoDeDoctor: incapacidad.CodigoDoctorControl.value,
+      AreaDeSalud: incapacidad.AreaSaludControl.value,
+      LicenciaId: this.Incapacidad.LicenciaId
+    });
+  }
+}
+