sacg-cronogramas/src/app/pages/ajuste-pd/ajuste-pd.component.html

<div class="p-3 text-white">
  <div
    class="flex align-content-start flex-wrap gap-2 border-round border-blue-400 my-2 lg:px-0 py-3 my-1"
  >
    <div class="col-6 md:col-3 lg:col-2 tablaAzul border-round">
      <div class="border-round font-bold">
        <div class="h-4rem">Filtro Empresa</div>
        <p-select
          [options]="empresas"
          [(ngModel)]="selectedCity"
          optionLabel="name"
          placeholder="Seleccione..."
          class="w-full md:w-56"
        />
      </div>
    </div>
    <div class="col-6 md:col-3 lg:col-2 tablaAzul border-round">
      <div class="border-round font-bold">
        <div class="h-4rem">Filtro C&oacute;digo Cronograma</div>
        <p-select
          [options]="empresas"
          [(ngModel)]="selectedCity"
          optionLabel="name"
          placeholder="Seleccione..."
          class="w-full md:w-56"
        />
      </div>
    </div>
  </div>
  <!-- Tabla1 -->
  <!-- <div class="font-bold text-black-alpha-90 my-2">T&iacute;tulo de la tabla:</div> -->
  <p-table
    #dt
    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 colspan="10" style="background-color: #f8f9fa; border: none"></th>
        <th colspan="3" class="tablaAzul text-white font-bold text-center">Cronograma base vigente</th>
        <th colspan="4" class="bg-blue-700 text-white font-bold text-center">Cronograma base ajustado</th>
      </tr>
      <tr>
        <th class="tablaAzul text-white font-bold">Empresa</th>
        <th class="tablaAzul text-white font-bold">C&oacute;digo de cronograma</th>
        <th class="tablaAzul text-white font-bold">Etapa del Servicio</th>
        <th class="tablaAzul text-white font-bold">Nombre sistema</th>
        <th class="tablaAzul text-white font-bold">Nombre sistema</th>
        <th class="tablaAzul text-white font-bold">Nombre localidad</th>
        <th class="tablaAzul text-white font-bold">Tipo de inversi&oacute;n</th>
        <th class="tablaAzul text-white font-bold">C&oacute;digo de glosa PD</th>
        <th class="tablaAzul text-white font-bold">Descripci&oacute;n glosa</th>
        <th class="tablaAzul text-white font-bold">Monto Inversi&oacute;n Total (UF)</th>
        <th class="tablaAzul text-white font-bold">A&ntilde;o de Inicio</th>
        <th class="tablaAzul text-white font-bold">A&ntilde;o de T&eacute;rmino</th>
        <th class="tablaAzul text-white font-bold">Mes de T&eacute;rmino</th>
        <th class="bg-blue-700 text-white font-bold">Tipo de ajuste</th>
        <th class="bg-blue-700 text-white font-bold">A&ntilde;o de Inicio</th>
        <th class="bg-blue-700 text-white font-bold">A&ntilde;o de T&eacute;rmino</th>
        <th class="bg-blue-700 text-white font-bold">Mes de T&eacute;rmino</th>
        <th class="tablaAzul text-white font-bold">Nota</th>
        <th class="bg-green-400 text-white font-bold">Estado aprobaci&oacute;n</th>
        <th class="bg-green-400 text-white font-bold">Observaci&oacute;n</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.estadoRevision }}</td>
        <td>{{ product.fechaIngreso }}</td>
        <td>{{ product.estadoRevision }}</td>
        <td>{{ product.dato9 }}</td>
        <td>{{ product.dato10 }}</td>
        <td>{{ product.dato13 }}</td>
        <td>{{ product.dato14 }}</td>
        <td>{{ product.dato15 }}</td>
        <td class="bg-azulFuerte">{{ product.dato16 }}</td>
        <td class="bg-azulFuerte">{{ product.dato17 }}</td>
        <td class="bg-azulFuerte">{{ product.dato18 }}</td>
        <td class="bg-azulFuerte">{{ product.dato11 }}</td>
        <td>{{ product.dato12 }}</td>
        <td class="bg-verde">
          <div class="border-round font-bold">
            <p-select
              [options]="estadoAprobacion"
              [(ngModel)]="select1"
              optionLabel="name"
              placeholder="Seleccione..."
              class="selectTabla"
            />
          </div>
        </td>
        <td class="bg-verde">
          <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>
      </tr>
    </ng-template>
  </p-table>
  <div class="flex justify-content-end mt-3">
    <button
      pButton
      type="button"
      (click)="exportExcel(dt)"
      icon="pi pi-file-excel"
      class="p-button-success"
      label="Exportar a Excel"
      pTooltip="Descargar planilla Excel"
      tooltipPosition="top"
      [tooltipOptions]="{showDelay: 100, appendTo: 'body'}"
    ></button>
  </div>
</div>