sacg-cronogramas/src/app/pages/concesiones/concesiones.component.html

<div class="p-3 text-white">
  <!-- Tabla1 -->
  <div class="font-bold my-2 tituloTabla">Cronogramas cargados:</div>
  <p-table id="azul"
    [value]="products" stripedRows
    showGridlines
    [paginator]="true"
    [rows]="5"
    [showCurrentPageReport]="true"
    currentPageReportTemplate="Mostrando del {first} al {last} de un total de {totalRecords} registros"
    [rowsPerPageOptions]="[5, 10, 20]">
        <ng-template #header>
            <tr>
                <th class="tablaAzul font-bold">Empresa</th>
                <th class="tablaAzul font-bold">Código de cronograma</th>
                <th class="tablaAzul font-bold">Código cronograma de ajuste</th>
                <th class="tablaAzul font-bold">Tipo de carga</th>
                <th class="bg-green-400 font-bold text-white font-bold">Estado de revisión</th>
                <th class="bg-green-400 font-bold text-white font-bold">Analista</th>
                <th class="bg-green-400 font-bold text-white font-bold">Fecha ingreso</th>
                <th class="bg-green-400 font-bold text-white font-bold">Semáforo</th>
            </tr>
        </ng-template>
        <ng-template #body let-product>
            <tr>
                <td>{{ product.empresa }}</td>
                <td>{{ product.codigoCronograma }}</td>
                <td>{{ product.codigoCronogramaAjuste }}</td>
                <td>{{ product.tipoCarga }}</td>
                <td class="bg-verde">{{ product.estadoRevision }}</td>
                <td class="bg-verde">
                  <!-- analista -->
                    <input
                    type="analista"
                    pInputText
                    [(ngModel)]="product.analista"
                    placeholder="Analista"
                    name="analista"
                    class="input-with-icon w-full"
                    style="background-color: white; color: black;width: 228px !important;"
                  />
                </td>
                <td class="bg-verde">{{ product.fechaIngreso }}</td>
                <td class="bg-verde">
                  <!-- {{ product.semaforo }} -->
                  <div class="text-center">
                    <i class="pi pi-circle-fill" style="font-size: 24px;"
                    [style.color]="product.semaforo === 'green' ? '#00bb00' : product.semaforo === 'yellow' ? 'yellow' : product.semaforo === 'red' ? 'red' : ''"></i>
                  </div>
                </td>
            </tr>
        </ng-template>
</p-table>

<div class="flex justify-content-between flex-wrap gap-3 border-round border-blue-400 my-6 lg:px-0 py-3 my-1 ">
  <div class="col-12 md:col-5 lg:col-2 tablaAzul border-round ">
    <div class="border-round font-bold">
      <div class="h-4rem">Filtro Empresa</div>
      <p-select [options]="empresas" [(ngModel)]="select1" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
    </div>
  </div>
  <div class="col-12 md:col-5 lg:col-2 tablaAzul border-round">
    <div class="border-round font-bold">
      <div class="h-4rem">Filtro Código Cronograma SINAR</div>
      <p-select [options]="empresas" [(ngModel)]="select2" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
    </div>
  </div>
  <div class="col-12 md:col-5 lg:col-2 tablaAzul border-round">
    <div class="border-round font-bold">
      <div class="h-4rem">Filtro tipo de carga</div>
      <p-select [options]="tipoCarga" [(ngModel)]="select3" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
    </div>
  </div>
  <div class="col-12 md:col-5 lg:col-2 tablaAzul border-round">
    <div class="border-round font-bold">
      <div class="h-4rem">¿Contiene obras del año?</div>
      <p-select [options]="contieneObras" [(ngModel)]="select4" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
    </div>
  </div>
  <div class="col-12 md:col-5 lg:col-2 tablaAzul border-round">
    <div class="border-round font-bold">
      <div class="h-4rem">N° Oficio que aprueba</div>
      <!-- Numero Oficio -->
      <input
      type="text"
      pInputText
      placeholder="xxxxx"
      name="numeroOficio"
      class="input-with-icon w-full mt-1 text-center sm:text-start"
      style="background-color: white; color: black;"
    />
    </div>
  </div>
  <div class="col-12 text-center">
    <button type="button" class="bg-primary border-primary-500 mt-3 px-5 py-3 text-base border-1 border-solid border-round cursor-pointer transition-all transition-duration-200 hover:bg-primary-600 hover:border-primary-600 active:bg-primary-700 active:border-primary-700">Crear solicitud</button>
  </div>
</div>

<!-- Tabla2 -->
<div class="font-bold my-2 tituloTabla">Cronogramas solicitados y pendientes de carga:</div>
<p-table id="azul" sortField="price" [sortOrder]="-1"
    [value]="products" stripedRows
    showGridlines
    [paginator]="true"
    [rows]="5"
    [showCurrentPageReport]="true"
    currentPageReportTemplate="Mostrando del {first} al {last} de un total de {totalRecords} registros"
    [rowsPerPageOptions]="[5, 10, 20]">
        <ng-template #header>
            <tr>
                <th pSortableColumn="empresa" class="tablaAzul font-bold">
                  Empresa <p-sortIcon field="empresa" />
                </th>
                <th pSortableColumn="codigoCronograma" class="tablaAzul font-bold">
                  Código de cronograma SINAR <p-sortIcon field="codigoCronograma" />
                </th>
                <th pSortableColumn="codigoCronogramaAjuste" class="tablaAzul font-bold">
                  Contiene obras del año <p-sortIcon field="codigoCronogramaAjuste" />
                </th>
                <th pSortableColumn="tipoCarga" class="tablaAzul font-bold">
                  N° Oficio que aprueba <p-sortIcon field="tipoCarga" />
                </th>
                <th pSortableColumn="estadoRevision" class="tablaAzul font-bold">
                  Tipo de carga <p-sortIcon field="estadoRevision" />
                </th>
                <th pSortableColumn="fechaIngreso" class="tablaAzul font-bold">
                  Fecha de solicitud <p-sortIcon field="fechaIngreso" />
                </th>
            </tr>
        </ng-template>
        <ng-template #body let-product>
            <tr>
                <td>{{ product.empresa }}</td>
                <td>{{ product.codigoCronograma }}</td>
                <td>{{ product.codigoCronogramaAjuste }}</td>
                <td>{{ product.tipoCarga }}</td>
                <td>{{ product.estadoRevision }}</td>
                <td>{{ product.fechaIngreso }}</td>
            </tr>
        </ng-template>
</p-table>

</div>