utn-cli 1.0.0

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

@@ -0,0 +1,166 @@
+<div class="encabezado">
+  <div class="izquierda">
+    @if(mostrarElBotonDeDescargar){
+    <button mat-flat-button class="descargar" (click)="DescargarInformacion.emit()">Descargar información</button>
+    }
+    @if(mostrarElBotonDeGuardado) {
+    <button mat-flat-button class="descargar" (click)="GuardarAccion.emit()">Agregar registro</button>
+    }
+  </div>
+  <div class="centro"></div>
+  <div class="derecha">
+    <input #valorFiltroInput id="valorFiltro" type="text" class="custom-input" placeholder="Filtrar"
+      (keydown.enter)="AplicarFiltro()">
+    @if(mostrarElBotonDeFiltro){
+    <mat-select class="custom-input" [(value)]="columnaSeleccionada" placeholder="Columna para filtrar">
+      <mat-option [value]="'Todas'">Todas</mat-option>
+      @for(columna of columnas; track $index){
+      @if(columna.TipoDeFiltro === 'Tabla' && !paginarResultados) {
+      <mat-option [value]="columna.Llave">{{columna.Alias}}</mat-option>
+      }
+      @if(columna.TipoDeFiltro === 'BaseDeDatos' && paginarResultados) {
+      <mat-option [value]="columna.Llave">{{columna.Alias}}</mat-option>
+      }
+      }
+    </mat-select>
+    <button mat-flat-button class="descargar" (click)="AplicarFiltro()">Filtrar</button>
+    }
+  </div>
+</div>
+<table mat-table [dataSource]="dataSource" matSort multiTemplateDataRows class="mat-elevation-z8">
+  @for(columna of columnas;track $index){
+  @if(columna.Llave!=='Estado'){
+  <ng-container [matColumnDef]="columna.Llave">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{columna.Alias}} </th>
+    <td mat-cell *matCellDef="let element" [attr.data-label]="columna.Alias"> {{element[columna.Llave]}} </td>
+  </ng-container>
+  }
+  }
+  @if(tieneColumnaEstado) {
+  <ng-container matColumnDef="Estado">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Estado</th>
+    <td mat-cell *matCellDef="let element" data-label="Estado">
+      <div [class]="element.Estado">{{ element.Estado }}</div>
+    </td>
+  </ng-container>
+  }
+  @if(acciones.length>0 || accionesSiempreClickeable.length>0 || accionesDinamicas.length>0){
+  <ng-container matColumnDef="acciones">
+    <th mat-header-cell *matHeaderCellDef>Acciones</th>
+    <td mat-cell *matCellDef="let element">
+      <ng-container>
+        @for(accion of accionesDinamicas; track $index){
+        @if(accion.Mostrar(element)){
+        <button mat-icon-button (click)="accion.ejecutar(element)" [matTooltip]="accion.textoAyuda"
+          [matBadge]="accion.badge?.(element)" [matBadgeHidden]="!accion.badge || !accion.badge(element)"
+          matBadgeColor="warn" matBadgeSize="large">
+          <mat-icon [class]="accion.color">{{accion.icono}}</mat-icon>
+        </button>
+        }
+        }
+        @for(accion of acciones; track $index){
+        <button mat-icon-button (click)="accion.ejecutar(element)" [matTooltip]="accion.textoAyuda"
+          [disabled]="!estadosQuePermitenEdicion.includes(element.Estado)" [matBadge]="accion.badge?.(element)"
+          [matBadgeHidden]="!accion.badge || !accion.badge(element)" matBadgeColor="warn" matBadgeSize="large">
+          <mat-icon
+            [class]="!estadosQuePermitenEdicion.includes(element.Estado) ? 'color: gray' : accion.color">{{accion.icono}}</mat-icon>
+        </button>
+        }
+        @for(accionSiempreClickeable of accionesSiempreClickeable; track $index){
+        <button mat-icon-button (click)="accionSiempreClickeable.ejecutar(element)"
+          [matTooltip]="accionSiempreClickeable.textoAyuda" [matBadge]="accionSiempreClickeable.badge?.(element)"
+          [matBadgeHidden]="!accionSiempreClickeable.badge || !accionSiempreClickeable.badge(element)"
+          matBadgeColor="warn" matBadgeSize="large">
+          <mat-icon [class]="accionSiempreClickeable.color">{{accionSiempreClickeable.icono}}</mat-icon>
+        </button>
+        }
+      </ng-container>
+    </td>
+  </ng-container>
+  }
+  @if(desplegable){
+  <ng-container matColumnDef="expand">
+    <th mat-header-cell *matHeaderCellDef aria-label="Fila expandible"></th>
+    <td mat-cell *matCellDef="let element">
+      <button mat-icon-button aria-label="Expander fila"
+        (click)="(elementoExpandible = elementoExpandible === element ? null : element); $event.stopPropagation()">
+        @if (elementoExpandible === element) {
+        <mat-icon>keyboard_arrow_up</mat-icon>
+        } @else {
+        <mat-icon>keyboard_arrow_down</mat-icon>
+        }
+      </button>
+    </td>
+  </ng-container>
+  <ng-container matColumnDef="expandedDetail">
+    <td mat-cell *matCellDef="let element" [attr.colspan]="llavesColumnas.length">
+      <div class="example-element-detail" [@detailExpand]="element == elementoExpandible ? 'expanded' : 'collapsed'">
+        <table mat-table [dataSource]="element[atributoDesplegable]" multiTemplateDataRows
+          class="mat-elevation-z8 separador">
+          @for (column of subColumnas; track $index) {
+          <ng-container matColumnDef="{{column.Llave}}">
+            <th mat-header-cell *matHeaderCellDef> {{column.Alias}} </th>
+            <td mat-cell *matCellDef="let elementTwo" [attr.data-label]="column.Alias"> {{elementTwo[column.Llave]}}
+            </td>
+          </ng-container>
+          }
+          @if(subAcciones.length>0 ||subAccionesSiempreClickeable.length>0){
+          <ng-container matColumnDef="subAcciones">
+            <th mat-header-cell *matHeaderCellDef>Acciones</th>
+            <td mat-cell *matCellDef="let elementTwo">
+              <ng-container>
+                @for(subAccion of subAccionesDinamicas; track $index){
+                @if(subAccion.Mostrar(elementTwo)){
+                <button mat-icon-button (click)="subAccion.ejecutar(elementTwo)" [matTooltip]="subAccion.textoAyuda"
+                  [matBadge]="subAccion.badge?.(element)"
+                  [matBadgeHidden]="!subAccion.badge || !subAccion.badge(element)" matBadgeColor="warn"
+                  matBadgeSize="large">
+                  <mat-icon [class]="subAccion.color">{{subAccion.icono}}</mat-icon>
+                </button>
+                }
+                }
+                @for(subAccion of subAcciones; track $index){
+                <button mat-icon-button (click)="subAccion.ejecutar(elementTwo)" [matTooltip]="subAccion.textoAyuda"
+                  [disabled]="!subEstadosQuePermitenEdicion.includes(elementTwo.Estado)"
+                  [matBadge]="subAccion.badge?.(element)"
+                  [matBadgeHidden]="!subAccion.badge || !subAccion.badge(element)" matBadgeColor="warn"
+                  matBadgeSize="large">
+                  <mat-icon
+                    [class]="!subEstadosQuePermitenEdicion.includes(elementTwo.Estado) ? 'color: gray' : subAccion.color">{{subAccion.icono}}</mat-icon>
+                </button>
+                }
+                @for(accionSiempreClickeable of subAccionesSiempreClickeable; track $index){
+                <button mat-icon-button (click)="accionSiempreClickeable.ejecutar(elementTwo)"
+                  [matTooltip]="accionSiempreClickeable.textoAyuda"
+                  [matBadge]="accionSiempreClickeable.badge?.(element)"
+                  [matBadgeHidden]="!accionSiempreClickeable.badge || !accionSiempreClickeable.badge(element)"
+                  matBadgeColor="warn" matBadgeSize="large">
+                  <mat-icon [class]="accionSiempreClickeable.color">{{accionSiempreClickeable.icono}}</mat-icon>
+                </button>
+                }
+              </ng-container>
+            </td>
+          </ng-container>
+          }
+          <tr mat-header-row *matHeaderRowDef="llavesSubColumnas"></tr>
+          <tr mat-row *matRowDef="let element; columns: llavesSubColumnas;" class="example-element-row"></tr>
+        </table>
+      </div>
+    </td>
+  </ng-container>
+  }
+  <tr mat-header-row *matHeaderRowDef="llavesColumnas"></tr>
+  <tr mat-row *matRowDef="let row; columns: llavesColumnas;" class="example-element-row"
+    [class.example-expanded-row]="elementoExpandible === row"
+    [style.background-color]="row.ColorDeFondo ? row.Color : null">
+  </tr>
+  @if(desplegable){
+  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"
+    [class.detalle-oculto]="row !== elementoExpandible" [style.background-color]="row.ColorDeFondo ? row.Color : null">
+  </tr>
+  }
+</table>
+@if(mostrarPaginador){
+<mat-paginator [length]="TotalDeRegistros" [pageSize]="valorSeleccionadoPorElUsuario"
+  [pageSizeOptions]="[5,10,15,20,50,100]" showFirstLastButtons></mat-paginator>
+}

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

@@ -0,0 +1,228 @@
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatPaginator, MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatInputModule } from '@angular/material/input';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { MatSelectModule } from '@angular/material/select';
+import { MensajeConfirmacionComponent } from '../mensaje-confirmacion/mensaje-confirmacion';
+import { MatDialog } from '@angular/material/dialog';
+import { MatBadgeModule } from '@angular/material/badge';
+
+@Component({
+  selector: 'app-tabla',
+  animations: [
+    trigger('detailExpand', [
+      state('collapsed,void', style({ height: '0px', minHeight: '0' })),
+      state('expanded', style({ height: '*' })),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+    ]),
+  ],
+
+  imports: [
+    MatTableModule,
+    MatIconModule,
+    MatButtonModule,
+    MatTooltip,
+    MatPaginatorModule,
+    MatSortModule,
+    MatInputModule,
+    MatSelectModule,
+    MatBadgeModule],
+  templateUrl: './tabla.component.html',
+  styleUrl: './tabla.component.css'
+})
+export class TablaComponent implements OnInit, OnChanges {
+  @Input() columnas: { Llave: string, Alias: string, TipoDeFiltro: string }[] = [];
+  @Input() subColumnas: { Llave: string, Alias: string }[] = [];
+  @Input() datos: any[] = [];
+  @Input() acciones:                     { icono: string; color: string; textoAyuda: string; ejecutar: (row: any) => void; badge?: (row: any) => string | number | undefined | null; }[] = [];
+  @Input() accionesDinamicas:            { icono: string; color: string; textoAyuda: string; ejecutar: (row: any) => void; badge?: (row: any) => string | number | undefined | null; Mostrar: (row: any) => boolean }[] = [];
+  @Input() accionesSiempreClickeable:    { icono: string; color: string; textoAyuda: string; ejecutar: (row: any) => void; badge?: (row: any) => string | number | undefined | null; }[] = [];
+  @Input() subAcciones:                  { icono: string; color: string; textoAyuda: string; ejecutar: (row: any) => void; badge?: (row: any) => string | number | undefined | null; }[] = [];
+  @Input() subAccionesSiempreClickeable: { icono: string; color: string; textoAyuda: string; ejecutar: (row: any) => void; badge?: (row: any) => string | number | undefined | null; }[] = [];
+  @Input() subAccionesDinamicas:         { icono: string; color: string; textoAyuda: string; ejecutar: (row: any) => void; badge?: (row: any) => string | number | undefined | null; Mostrar: (row: any) => boolean }[] = [];
+  @Input() desplegable: boolean = false
+  @Input() atributoDesplegable: string = ''
+  public llavesColumnas: string[] = [];
+  public llavesSubColumnas: string[] = [];
+  public elementoExpandible: any;
+  public columnaSeleccionada: string = '';
+
+  public dataSource: any;
+  public tieneColumnaEstado: boolean = false;
+  public valorSeleccionadoPorElUsuario: number = 5;
+  @Input() public mostrarElBotonDeGuardado: boolean = true;
+  @Input() public mostrarElBotonDeDescargar: boolean = true;
+  @Input() public mostrarElBotonDeFiltro: boolean = true;
+  @Input() public mostrarPaginador: boolean = true;
+  @Input() public estadosQuePermitenEdicion: string[] = [];
+  @Input() public subEstadosQuePermitenEdicion: string[] = [];
+
+  @ViewChild(MatSort) sort!: MatSort;
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @Output() GuardarAccion: EventEmitter<any> = new EventEmitter<any>();
+  @Output() DescargarInformacion: EventEmitter<any> = new EventEmitter<any>();
+  @ViewChild('valorFiltroInput') filtroInput!: ElementRef<HTMLInputElement>;
+  private ultimaPagina = 0;
+  private ultimoPageSize = this.valorSeleccionadoPorElUsuario;
+  @Input() public paginarResultados: boolean = true;
+  @Input() TotalDeRegistros: number = 0;
+  @Output() CambioDePagina: EventEmitter<{ accion: string, pageIndex: number, pageSize: number, valorParaFiltrar: string, columnaParaFiltrar: string, columnasParaFiltrar: string, ordenColumna: string, ordenDireccion: string }> = new EventEmitter();
+
+  constructor(private dialog: MatDialog) {
+    const pageSize = localStorage.getItem('pageSize');
+    if (pageSize) {
+      this.valorSeleccionadoPorElUsuario = parseInt(pageSize);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['datos']) {
+      this.actualizarDataSource();
+    }
+  }
+
+  ngOnInit(): void {
+    this.inicializarColumnas();
+    this.actualizarDataSource();
+  }
+
+  AplicarFiltro() {
+    const filtro = this.filtroInput.nativeElement.value.trim().toLowerCase();
+
+    if (!this.columnaSeleccionada || this.columnaSeleccionada.trim() === '') {
+      this.dialog.open(MensajeConfirmacionComponent, {
+        data: {
+          titulo: 'Selección de columna',
+          mensaje: `Debe seleccionar una columna`,
+          textoCerrar: 'Aceptar',
+          onClose: () => { },
+          onAccept: () => { },
+        },
+      });
+      return;
+    }
+
+    if (this.paginarResultados) {
+      this.ultimaPagina = 0;
+      this.paginator.firstPage();
+
+      this.CambioDePagina.emit({
+        accion: 'Filtrado de base de datos',
+        pageIndex: 0,
+        pageSize: this.ultimoPageSize,
+        valorParaFiltrar: filtro,
+        columnaParaFiltrar: this.columnaSeleccionada,
+        columnasParaFiltrar: this.columnas
+          .filter(c => c.TipoDeFiltro !== 'Ninguno')
+          .map(c => c.Llave)
+          .join(','),
+        ordenColumna: this.sort.active,
+        ordenDireccion: this.sort.direction
+      });
+    } else {
+      //  Caso: paginación local
+      if (this.columnaSeleccionada && this.columnaSeleccionada !== 'Todas') {
+        this.dataSource.filterPredicate = (dato: any, f: string) => {
+          const valorColumna = dato[this.columnaSeleccionada];
+          return valorColumna?.toString().toLowerCase().includes(f);
+        };
+      } else {
+        this.dataSource.filterPredicate = (dato: any, f: string) => {
+          const textoPlano = Object.values(dato).join(' ').toLowerCase();
+          return textoPlano.includes(f);
+        };
+      }
+
+      this.dataSource.filter = filtro;
+
+      if (this.dataSource.paginator) {
+        this.dataSource.paginator.firstPage();
+      }
+    }
+  }
+
+  private inicializarColumnas(): void {
+    this.llavesColumnas = this.columnas.map(c => c.Llave);
+    this.tieneColumnaEstado = this.columnas.some(c => c.Llave === 'Estado');
+
+    if (this.acciones.length || this.accionesSiempreClickeable.length || this.accionesDinamicas.length) {
+      this.llavesColumnas.push('acciones');
+    }
+
+    if (this.desplegable) {
+      this.llavesColumnas.unshift('expand');
+      this.llavesSubColumnas = this.subColumnas.map(c => c.Llave);
+      if (this.subAcciones.length || this.subAccionesSiempreClickeable.length) {
+        this.llavesSubColumnas.push('subAcciones');
+      }
+    }
+  }
+
+  private actualizarDataSource(): void {
+    const paginaActual = this.paginator ? this.paginator.pageIndex : 0;
+    const tamanioPagina = this.paginator ? this.paginator.pageSize : this.valorSeleccionadoPorElUsuario;
+
+    this.dataSource = new MatTableDataSource(this.datos);
+
+    if (!this.paginarResultados && this.paginator) {
+      this.dataSource.paginator = this.paginator;
+    }
+    if (this.sort) {
+      this.dataSource.sort = this.sort;
+    }
+    if (this.paginarResultados && this.paginator) {
+      this.paginator.pageIndex = paginaActual;
+      this.paginator.pageSize = tamanioPagina;
+    }
+  }
+
+  ngAfterViewInit() {
+    this.dataSource.sort = this.sort;
+    this.paginator.page.subscribe((event: PageEvent) => {
+      localStorage.setItem('pageSize', event.pageSize.toString());
+
+      let accion = '';
+      if (event.pageSize !== this.ultimoPageSize) {
+        accion = 'Cambio de tamaño';
+      } else if (event.pageIndex > this.ultimaPagina) {
+        accion = event.pageIndex === this.paginator.getNumberOfPages() - 1 ? 'Última página' : 'Siguiente página';
+      } else if (event.pageIndex < this.ultimaPagina) {
+        accion = event.pageIndex === 0 ? 'Primera página' : 'Página anterior';
+      }
+
+      this.CambioDePagina.emit({
+        accion: 'Cambio de orden',
+        pageIndex: event.pageIndex,
+        pageSize: event.pageSize,
+        valorParaFiltrar: this.filtroInput.nativeElement.value.trim().toLowerCase(),
+        columnaParaFiltrar: this.columnaSeleccionada,
+        columnasParaFiltrar: this.columnas.map(c => c.Llave).join(','),
+        ordenColumna: this.sort.active,
+        ordenDireccion: this.sort.direction
+      });
+
+      this.ultimaPagina = event.pageIndex;
+      this.ultimoPageSize = event.pageSize;
+    });
+    this.sort.sortChange.subscribe(sort => {
+      if (this.paginarResultados) {
+        this.CambioDePagina.emit({
+          accion: 'Cambio de orden',
+          pageIndex: this.paginator.pageIndex,
+          pageSize: this.paginator.pageSize,
+          valorParaFiltrar: this.filtroInput.nativeElement.value.trim().toLowerCase(),
+          columnaParaFiltrar: this.columnaSeleccionada,
+          columnasParaFiltrar: this.columnas.map(c => c.Llave).join(','),
+          ordenColumna: sort.active,
+          ordenDireccion: sort.direction
+        });
+      }
+    });
+    this.actualizarDataSource();
+  }
+}

package/templates/frontend/src/app/Componentes/Nucleo/tarjeta/tarjeta.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/tarjeta.component.html

@@ -0,0 +1,35 @@
+<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>
+      } @if(numero){
+      <p class="numero">{{ numero }}</p>
+      }
+    </div>
+  </div>
+  <div class="contenido">
+    @if(contenido.length>0){ @for(item of contenido[0];track item){
+    <p>{{ item }}</p>
+    }
+    <hr />
+    @for(item of contenido[1];track item){
+    <p>{{ item }}</p>
+    } }
+  </div>
+  <div [class]="cantidadLugar">
+    <p>{{ (cantidadAMostrar !== 0 ? cantidadAMostrar : '') }}</p>
+  </div>
+  <hr [id]="'porcentaje'+titulo" class="linea" [matTooltip]="'Cantidad: ' + cantidad" matTooltipPosition="above"/>
+  <div class="pie">
+    <p>CONTINUAR</p>
+  </div>
+</div>

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

@@ -0,0 +1,46 @@
+import { AfterViewInit, Component, Input } from "@angular/core";
+import { MatIconModule } from "@angular/material/icon";
+import { MatCardModule } from "@angular/material/card";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { Router } from "@angular/router";
+
+@Component({
+  selector: "app-tarjeta",
+  standalone: true,
+  imports: [MatIconModule, MatCardModule, MatTooltipModule],
+  templateUrl: "./tarjeta.component.html",
+  styleUrl: "./tarjeta.component.css"
+})
+export class TarjetaComponent implements AfterViewInit {
+  @Input() titulo: string = "";
+  @Input() descripcion: string = "";
+  @Input() icono: any = null;
+  @Input() numero: any = null;
+  @Input() contenido: any = [];
+  @Input() cantidad: number | undefined;
+  @Input() cantidadLugar: string = "cantidad";
+  @Input() rutaASeguir: string = '';
+  @Input() cantidadMaxima: number | undefined;
+  @Input() cantidadAMostrar: number = 0;
+
+  constructor(private ruta: Router) { }
+
+  onClick() {
+    this.ruta.navigate([this.rutaASeguir]);
+  }
+
+  ngOnInit() {
+    this.cantidadAMostrar = (this.cantidadMaxima ? this.cantidadMaxima : 0) - (this.cantidad ? this.cantidad : 0);
+  }
+
+  ngAfterViewInit(): void {
+    if (this.cantidad) {
+      let porcentaje = 100;
+      if (this.cantidadMaxima) {
+        porcentaje = (this.cantidad / this.cantidadMaxima) * 100;
+      }
+      const linea = document.getElementById('porcentaje' + this.titulo) as HTMLHRElement;
+      linea.style.width = `${porcentaje}%`;
+    }
+  }
+}