Merge remote-tracking branch 'origin/dev' into dev

package-lock.json

@@ -18,18 +18,22 @@
         "@fortawesome/fontawesome-free": "^6.7.2",
         "@primeng/themes": "^19.1.0",
         "animate.css": "^4.1.1",
+        "file-saver": "^2.0.5",
         "primeflex": "^4.0.0",
         "primeicons": "^7.0.0",
         "primeng": "^19.1.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
+        "xlsx": "^0.18.5",
         "zone.js": "~0.15.0"
       },
       "devDependencies": {
         "@angular-devkit/build-angular": "^19.2.9",
         "@angular/cli": "^19.2.9",
         "@angular/compiler-cli": "^19.2.0",
+        "@types/file-saver": "^2.0.7",
         "@types/jasmine": "~5.1.0",
+        "@types/xlsx": "^0.0.35",
         "jasmine-core": "~5.6.0",
         "karma": "~6.4.0",
         "karma-chrome-launcher": "~3.2.0",
@@ -5160,6 +5164,13 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
+      "integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/http-errors": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
@@ -5292,6 +5303,13 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/xlsx": {
+      "version": "0.0.35",
+      "resolved": "https://registry.npmjs.org/@types/xlsx/-/xlsx-0.0.35.tgz",
+      "integrity": "sha512-s0x3DYHZzOkxtjqOk/Nv1ezGzpbN7I8WX+lzlV/nFfTDOv7x4d8ZwGHcnaiB8UCx89omPsftQhS5II3jeWePxQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-basic-ssl": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.2.0.tgz",
@@ -5563,6 +5581,15 @@
         "node": ">=8.9.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/agent-base": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz",
@@ -6313,6 +6340,19 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -6555,6 +6595,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -6852,6 +6901,18 @@
         }
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -7847,6 +7908,12 @@
         }
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==",
+      "license": "MIT"
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -8008,6 +8075,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -13030,6 +13106,18 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/ssri": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-12.0.0.tgz",
@@ -14624,6 +14712,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -14797,6 +14903,27 @@
         }
       }
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

package.json

@@ -20,18 +20,22 @@
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@primeng/themes": "^19.1.0",
     "animate.css": "^4.1.1",
+    "file-saver": "^2.0.5",
     "primeflex": "^4.0.0",
     "primeicons": "^7.0.0",
     "primeng": "^19.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
+    "xlsx": "^0.18.5",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^19.2.9",
     "@angular/cli": "^19.2.9",
     "@angular/compiler-cli": "^19.2.0",
+    "@types/file-saver": "^2.0.7",
     "@types/jasmine": "~5.1.0",
+    "@types/xlsx": "^0.0.35",
     "jasmine-core": "~5.6.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

src/app/pages/actualizacion-pd/actualizacion-pd.component.html

@@ -1,84 +1,144 @@
 <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
-    <div class="col-12 md:col-3 lg:col-2 tablaAzul border-round ">
+    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="border-round font-bold ">
+  >
-          <div class="h-4rem">Filtro Empresa</div>
+    <div class="col-12 md:col-3 lg:col-2 tablaAzul border-round">
-          <p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
+      <div class="border-round font-bold">
-        </div>
+        <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-12 md:col-3 lg:col-2 tablaAzul border-round">
-        <div class="border-round font-bold">
+      <div class="border-round font-bold">
-          <div class="h-4rem">Filtro C&oacute;digo Cronograma</div>
+        <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" />
+        <p-select
-          </div>
+          [options]="empresas"
+          [(ngModel)]="selectedCity"
+          optionLabel="name"
+          placeholder="Seleccione..."
+          class="w-full md:w-56"
+        />
+      </div>
     </div>
   </div>
-<!-- Tabla1 -->
+  <!-- Tabla1 -->
-<div class="font-bold my-2 tituloTabla">T&iacute;tulo de la tabla:</div>
+  <div class="flex justify-content-between align-items-center my-2 py-2">
-  <p-table  id="azul"
+    <div class="font-bold tituloTabla">T&iacute;tulo de la tabla:</div>
-    [value]="products" stripedRows
+    <p-button
+      icon="pi pi-file-excel"
+      (onClick)="exportExcel(dt)"
+      styleClass="p-button-success"
+      pTooltip="Descargar planilla Excel"
+      tooltipPosition="top"
+      label="Exportar"
+      [tooltipOptions]="{showDelay: 100, appendTo: 'body'}"
+    >
+    </p-button>
+  </div>
+  <p-table
+    id="azul"
+    #dt
+    [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]">
+    [rowsPerPageOptions]="[5, 10, 20]"
-        <ng-template #header>
+    styleClass="p-datatable-sm"
-            <tr>
+  >
-                <th class="tablaAzul font-bold text-white">Empresa</th>
+    <ng-template pTemplate="header">
-                <th class="tablaAzul font-bold text-white">C&oacute;digo de cronograma</th>
+      <tr>
-                <th class="tablaAzul font-bold text-white">Etapa del Servicio</th>
+        <th class="tablaAzul font-bold text-white">Empresa</th>
-                <th class="tablaAzul font-bold text-white">Nombre sistema</th>
+        <th class="tablaAzul font-bold text-white">C&oacute;digo de cronograma</th>
-                <th class="tablaAzul font-bold text-white">Tipo de inversi&oacute;n</th>
+        <th class="tablaAzul font-bold text-white">Etapa del Servicio</th>
-                <th class="tablaAzul font-bold text-white">C&oacute;digo de glosa PD</th>
+        <th class="tablaAzul font-bold text-white">Nombre sistema</th>
-                <th class="tablaAzul font-bold text-white">Descripci&oacute;n glosa</th>
+        <th class="tablaAzul font-bold text-white">Tipo de inversi&oacute;n</th>
-                <th class="tablaAzul font-bold text-white">Monto Inversi&oacute;n Total (UF)</th>
+        <th class="tablaAzul font-bold text-white">C&oacute;digo de glosa PD</th>
-                <th class="tablaAzul font-bold text-white">A&ntilde;o de Inicio</th>
+        <th class="tablaAzul font-bold text-white">Descripci&oacute;n glosa</th>
-                <th class="tablaAzul font-bold text-white">A&ntilde;o de T&eacute;rmino</th>
+        <th class="tablaAzul font-bold text-white">Monto Inversi&oacute;n Total (UF)</th>
-                <th class="tablaAzul font-bold text-white">Mes de T&eacute;rmino</th>
+        <th class="tablaAzul font-bold text-white">A&ntilde;o de Inicio</th>
-                <th class="tablaAzul font-bold text-white">Nota</th>
+        <th class="tablaAzul font-bold text-white">A&ntilde;o de T&eacute;rmino</th>
-                <th class="bg-green-400 font-bold text-white">Estado aprobaci&oacute;n</th>
+        <th class="tablaAzul font-bold text-white">Mes de T&eacute;rmino</th>
-                <th class="bg-green-400 font-bold text-white">Observaci&oacute;n</th>
+        <th class="tablaAzul font-bold text-white">Nota</th>
-            </tr>
+        <th class="bg-green-400 font-bold text-white">Estado aprobaci&oacute;n</th>
-        </ng-template>
+        <th class="bg-green-400 font-bold text-white">Observaci&oacute;n</th>
-        <ng-template #body let-product>
+      </tr>
-            <tr>
+    </ng-template>
-                <td>{{ product.empresa }}</td>
+    <ng-template pTemplate="body" let-product>
-                <td>{{ product.codigoCronograma }}</td>
+      <tr>
-                <td>{{ product.codigoCronogramaAjuste }}</td>
+        <td>{{ product.empresa }}</td>
-                <td>{{ product.tipoCarga }}</td>
+        <td>{{ product.codigoCronograma }}</td>
-                <td>{{ product.estadoRevision }}</td>
+        <td>{{ product.codigoCronogramaAjuste }}</td>
-                <td>{{ product.estadoRevision }}</td>
+        <td>{{ product.tipoCarga }}</td>
-                <td>{{ product.fechaIngreso }}</td>
+        <td>{{ product.estadoRevision }}</td>
-                <td>
+        <td>{{ product.estadoRevision }}</td>
-                  <div class="border-round font-bold">
+        <td>{{ product.fechaIngreso }}</td>
-                    <p-select [options]="estadoAprobacion" [(ngModel)]="product.dato13" optionLabel="name" placeholder="Seleccione..." class="selectTabla"/>
+        <td>
-                  </div>
+          <div class="border-round font-bold">
-                </td>
+            <p-select
-                <td>{{ product.dato9 }}</td>
+              [options]="estadoAprobacion"
-                <td>{{ product.dato10 }}</td>
+              [(ngModel)]="product.dato13"
-                <td>{{ product.dato11 }}</td>
+              optionLabel="name"
-                <td>{{ product.dato12 }}</td>
+              placeholder="Seleccione..."
-                <td class="bg-verde">
+              class="selectTabla"
-                  <div class="border-round font-bold">
+            />
-                    <p-select [options]="estadoAprobacion" [(ngModel)]="product.dato13" optionLabel="name" placeholder="Seleccione..." class="selectTabla"/>
+          </div>
-                  </div>
+        </td>
-                </td>
+        <td>{{ product.dato9 }}</td>
-                <td class="bg-verde">
+        <td>{{ product.dato10 }}</td>
-                  <input
+        <td>{{ product.dato11 }}</td>
-                  type="analista"
+        <td>{{ product.dato12 }}</td>
-                  pInputText
+        <td class="bg-verde">
-                  [(ngModel)]="product.analista"
+          <div class="border-round font-bold">
-                  placeholder="Analista"
+            <p-select
-                  name="analista"
+              [options]="estadoAprobacion"
-                  class="input-with-icon w-full"
+              [(ngModel)]="product.dato13"
-                  style="background-color: white; color: black;width: 228px !important;"
+              optionLabel="name"
-                /></td>
+              placeholder="Seleccione..."
-            </tr>
+              class="selectTabla"
-        </ng-template>
+            />
-</p-table>
+          </div>
-<div class="col-12 text-right">
+        </td>
-  <i class="fa-solid fa-file-excel" style="color: #007239;font-size: 24px;"></i>
+        <td class="bg-verde">
-</div>
+          <input
+            type="analista"
+            pInputText
+            pTool
+            [(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>
 
+  <!-- Botón de exportar debajo de la tabla -->
+  <div class="flex justify-content-end mt-3">
+    <button
+      pButton
+      type="button"
+      icon="pi pi-file-excel"
+      (click)="exportExcel(dt)"
+      class="p-button-success"
+      label="Exportar a Excel"
+      pTooltip="Descargar planilla Excel"
+      tooltipPosition="top"
+      [tooltipOptions]="{showDelay: 100, appendTo: 'body'}"
+    ></button>
+  </div>
 </div>

src/app/pages/actualizacion-pd/actualizacion-pd.component.ts

@@ -1,14 +1,27 @@
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { TableModule } from 'primeng/table';
+import { Table, TableModule } from 'primeng/table';
 import { InputTextModule } from 'primeng/inputtext';
 import { SelectModule } from 'primeng/select';
+import { ButtonModule } from 'primeng/button';
+import { TooltipModule } from 'primeng/tooltip';
+import * as FileSaver from 'file-saver';
+import * as XLSX from 'xlsx';
 
 @Component({
   selector: 'app-actualizacion-pd',
-  imports: [FormsModule, TableModule, InputTextModule, SelectModule],
+  imports: [
+    FormsModule, 
+    TableModule, 
+    InputTextModule, 
+    SelectModule,
+    ButtonModule,
+    TooltipModule
+    
+  ],
   templateUrl: './actualizacion-pd.component.html',
-  styleUrl: './actualizacion-pd.component.scss'
+  styleUrl: './actualizacion-pd.component.scss',
+  standalone: true
 })
 export class ActualizacionPdComponent {
   pageTitle: string = 'Cronogramas cargados:';
@@ -19,7 +32,6 @@ export class ActualizacionPdComponent {
     { name: 'Aprobado', value: 'Aprobado' },
     { name: 'Rechazado', value: 'Rechazado' },
   ];
-
   products: any[] = [
     {
       empresa: 'Empresa A',
@@ -81,4 +93,83 @@ export class ActualizacionPdComponent {
     },
   ];
 
+  /**
+   * Exporta la tabla a Excel
+   * @param table Referencia a la tabla PrimeNG
+   */
+  exportExcel(table: Table) {
+    // Preparamos los datos para exportar
+    const exportData = this.prepareDataForExport(table);
+    
+    // Creamos el libro de Excel
+    const worksheet = XLSX.utils.json_to_sheet(exportData);
+    const workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
+    
+    // Aplicamos estilos a las celdas (encabezados en negrita con fondo azul)
+    this.applyStyles(worksheet);
+    
+    // Opciones de exportación
+    const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+    
+    // Guardamos el archivo
+    this.saveAsExcelFile(excelBuffer, 'cronogramas_exportados');
+  }
+
+  /**
+   * Prepara los datos para la exportación, filtrando según sea necesario
+   */
+  prepareDataForExport(table: Table): any[] {
+    // Si hay filtros aplicados, usamos los datos filtrados
+    const data = table.filteredValue || table.value;
+    
+    // Mapeamos los datos para tener solo las propiedades que queremos exportar
+    return data.map(item => {
+      return {
+        'Empresa': item.empresa,
+        'Código de cronograma': item.codigoCronograma,
+        'Etapa del Servicio': item.codigoCronogramaAjuste,
+        'Nombre sistema': item.tipoCarga,
+        'Tipo de inversión': item.estadoRevision,
+        'Código de glosa PD': item.analista,
+        'Descripción glosa': item.fechaIngreso,
+        'Monto Inversión Total (UF)': '',
+        'Año de Inicio': item.dato9,
+        'Año de Término': item.dato10,
+        'Mes de Término': item.dato11 || '',
+        'Nota': item.dato12 || '',
+        'Estado aprobación': item.dato13,
+        'Observación': ''
+      };
+    });
+  }
+
+  /**
+   * Aplica estilos al worksheet de Excel
+   */
+  applyStyles(worksheet: XLSX.WorkSheet) {
+    // Establecemos el estilo para los encabezados
+    const headerStyle = {
+      font: { bold: true, color: { rgb: 'FFFFFF' } },
+      fill: { fgColor: { rgb: '0070C0' } },
+      alignment: { horizontal: 'center' }
+    };
+    
+    // Aplicar estilos a los encabezados (primera fila)
+    const range = XLSX.utils.decode_range(worksheet['!ref'] || 'A1');
+    for (let col = range.s.c; col <= range.e.c; col++) {
+      const cellRef = XLSX.utils.encode_cell({ r: 0, c: col });
+      if (!worksheet[cellRef]) worksheet[cellRef] = { t: 's', v: '' };
+      worksheet[cellRef].s = headerStyle;
+    }
+  }
+
+  /**
+   * Guarda el buffer como un archivo Excel
+   */
+  saveAsExcelFile(buffer: any, fileName: string): void {
+    const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+    const EXCEL_EXTENSION = '.xlsx';
+    const data: Blob = new Blob([buffer], { type: EXCEL_TYPE });
+    FileSaver.saveAs(data, fileName + '_' + new Date().getTime() + EXCEL_EXTENSION);
+  }
 }

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

@@ -1,98 +1,135 @@
 <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
-    <div class="col-6 md:col-3 lg:col-2 tablaAzul border-round ">
+    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="border-round font-bold ">
+  >
-          <div class="h-4rem">Filtro Empresa</div>
+    <div class="col-6 md:col-3 lg:col-2 tablaAzul border-round">
-          <p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
+      <div class="border-round font-bold">
-        </div>
+        <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="border-round font-bold">
-          <div class="h-4rem">Filtro C&oacute;digo Cronograma</div>
+        <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" />
+        <p-select
-          </div>
+          [options]="empresas"
+          [(ngModel)]="selectedCity"
+          optionLabel="name"
+          placeholder="Seleccione..."
+          class="w-full md:w-56"
+        />
+      </div>
     </div>
   </div>
-<!-- Tabla1 -->
+  <!-- Tabla1 -->
-<!-- <div class="font-bold text-black-alpha-90 my-2">T&iacute;tulo de la tabla:</div> -->
+  <!-- <div class="font-bold text-black-alpha-90 my-2">T&iacute;tulo de la tabla:</div> -->
-  <p-table  id="azul"
+  <p-table
-    [value]="products" stripedRows
+    #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]">
+    [rowsPerPageOptions]="[5, 10, 20]"
-        <ng-template #header>
+  >
-          <tr>
+    <ng-template #header>
-            <th colspan="10" style="background-color: #F8F9FA;border: none;"></th>
+      <tr>
-            <th colspan="3" class="tablaAzul text-white font-bold text-center">Cronograma base vigente</th>
+        <th colspan="10" style="background-color: #f8f9fa; border: none"></th>
-            <th colspan="4" class="bg-blue-700 text-white font-bold text-center">Cronograma base ajustado</th>
+        <th colspan="3" class="tablaAzul text-white font-bold text-center">Cronograma base vigente</th>
-          </tr>
+        <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>
+      <tr>
-                <th class="tablaAzul text-white font-bold">C&oacute;digo de cronograma</th>
+        <th class="tablaAzul text-white font-bold">Empresa</th>
-                <th class="tablaAzul text-white font-bold">Etapa del Servicio</th>
+        <th class="tablaAzul text-white font-bold">C&oacute;digo de cronograma</th>
-                <th class="tablaAzul text-white font-bold">Nombre sistema</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">Nombre sistema</th>
-                <th class="tablaAzul text-white font-bold">Tipo de inversi&oacute;n</th>
+        <th class="tablaAzul text-white font-bold">Nombre localidad</th>
-                <th class="tablaAzul text-white font-bold">C&oacute;digo de glosa PD</th>
+        <th class="tablaAzul text-white font-bold">Tipo de inversi&oacute;n</th>
-                <th class="tablaAzul text-white font-bold">Descripci&oacute;n glosa</th>
+        <th class="tablaAzul text-white font-bold">C&oacute;digo de glosa PD</th>
-                <th class="tablaAzul text-white font-bold">Monto Inversi&oacute;n Total (UF)</th>
+        <th class="tablaAzul text-white font-bold">Descripci&oacute;n glosa</th>
-                <th class="tablaAzul text-white font-bold">A&ntilde;o de Inicio</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 T&eacute;rmino</th>
+        <th class="tablaAzul text-white font-bold">A&ntilde;o de Inicio</th>
-                <th class="tablaAzul text-white font-bold">Mes de T&eacute;rmino</th>
+        <th class="tablaAzul text-white font-bold">A&ntilde;o de T&eacute;rmino</th>
-                <th class="bg-blue-700 text-white font-bold">Tipo de ajuste</th>
+        <th class="tablaAzul text-white font-bold">Mes de T&eacute;rmino</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">Tipo de ajuste</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">A&ntilde;o de Inicio</th>
-                <th class="bg-blue-700 text-white font-bold">Mes de T&eacute;rmino</th>
+        <th class="bg-blue-700 text-white font-bold">A&ntilde;o de T&eacute;rmino</th>
-                <th class="tablaAzul text-white font-bold">Nota</th>
+        <th class="bg-blue-700 text-white font-bold">Mes de T&eacute;rmino</th>
-                <th class="bg-green-400 text-white font-bold">Estado aprobaci&oacute;n</th>
+        <th class="tablaAzul text-white font-bold">Nota</th>
-                <th class="bg-green-400 text-white font-bold">Observaci&oacute;n</th>
+        <th class="bg-green-400 text-white font-bold">Estado aprobaci&oacute;n</th>
-            </tr>
+        <th class="bg-green-400 text-white font-bold">Observaci&oacute;n</th>
-        </ng-template>
+      </tr>
-        <ng-template #body let-product>
+    </ng-template>
-            <tr>
+    <ng-template #body let-product>
-                <td>{{ product.empresa }}</td>
+      <tr>
-                <td>{{ product.codigoCronograma }}</td>
+        <td>{{ product.empresa }}</td>
-                <td>{{ product.codigoCronogramaAjuste }}</td>
+        <td>{{ product.codigoCronograma }}</td>
-                <td>{{ product.tipoCarga }}</td>
+        <td>{{ product.codigoCronogramaAjuste }}</td>
-                <td>{{ product.estadoRevision }}</td>
+        <td>{{ product.tipoCarga }}</td>
-                <td>{{ product.estadoRevision }}</td>
+        <td>{{ product.estadoRevision }}</td>
-                <td>{{ product.fechaIngreso }}</td>
+        <td>{{ product.estadoRevision }}</td>
-                <td>{{ product.estadoRevision }}</td>
+        <td>{{ product.fechaIngreso }}</td>
-                <td>{{ product.dato9 }}</td>
+        <td>{{ product.estadoRevision }}</td>
-                <td>{{ product.dato10 }}</td>
+        <td>{{ product.dato9 }}</td>
-                <td>{{ product.dato13 }}</td>
+        <td>{{ product.dato10 }}</td>
-                <td>{{ product.dato14 }}</td>
+        <td>{{ product.dato13 }}</td>
-                <td>{{ product.dato15 }}</td>
+        <td>{{ product.dato14 }}</td>
-                <td class="bg-azulFuerte">{{ product.dato16 }}</td>
+        <td>{{ product.dato15 }}</td>
-                <td class="bg-azulFuerte">{{ product.dato17 }}</td>
+        <td class="bg-azulFuerte">{{ product.dato16 }}</td>
-                <td class="bg-azulFuerte">{{ product.dato18 }}</td>
+        <td class="bg-azulFuerte">{{ product.dato17 }}</td>
-                <td class="bg-azulFuerte">{{ product.dato11 }}</td>
+        <td class="bg-azulFuerte">{{ product.dato18 }}</td>
-                <td>{{ product.dato12 }}</td>
+        <td class="bg-azulFuerte">{{ product.dato11 }}</td>
-                <td class="bg-verde">
+        <td>{{ product.dato12 }}</td>
-                  <div class="border-round font-bold">
+        <td class="bg-verde">
-                    <p-select [options]="estadoAprobacion" [(ngModel)]="select1" optionLabel="name" placeholder="Seleccione..." class="selectTabla" />
+          <div class="border-round font-bold">
-                  </div>
+            <p-select
-                </td>
+              [options]="estadoAprobacion"
-                <td class="bg-verde">
+              [(ngModel)]="select1"
-                  <input
+              optionLabel="name"
-                  type="analista"
+              placeholder="Seleccione..."
-                  pInputText
+              class="selectTabla"
-                  [(ngModel)]="product.analista"
+            />
-                  placeholder="Analista"
+          </div>
-                  name="analista"
+        </td>
-                  class="input-with-icon w-full"
+        <td class="bg-verde">
-                  style="background-color: white; color: black;width: 228px !important;"
+          <input
-                /></td>
+            type="analista"
-            </tr>
+            pInputText
-        </ng-template>
+            [(ngModel)]="product.analista"
-</p-table>
+            placeholder="Analista"
-<div class="col-12 text-right">
+            name="analista"
-  <i class="fa-solid fa-file-excel" style="color: #007239;font-size: 24px;"></i>
+            class="input-with-icon w-full"
-</div>
+            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"
+      onclick="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>

src/app/pages/ajuste-pd/ajuste-pd.component.ts

@@ -1,22 +1,31 @@
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { TableModule } from 'primeng/table';
+import { TableModule ,Table} from 'primeng/table';
 import { InputTextModule } from 'primeng/inputtext';
 import { SelectModule } from 'primeng/select';
+import { TooltipModule } from 'primeng/tooltip';
+import { ButtonModule } from 'primeng/button';
+import * as FileSaver from 'file-saver';
+import * as XLSX from 'xlsx';
 
 @Component({
   selector: 'app-ajuste-pd',
-  imports: [FormsModule, TableModule, InputTextModule, SelectModule],
+  imports: [
+    FormsModule,
+    TableModule,
+    InputTextModule,
+    SelectModule,
+    TooltipModule,
+    ButtonModule
+  ],
   templateUrl: './ajuste-pd.component.html',
   styleUrl: './ajuste-pd.component.scss'
 })
 export class AjustePdComponent {
   selectedCity: any = '';
   empresas: any[] = [{name: 'Empresa A'}, {name: 'Empresa B'}, {name: 'Empresa C'}];
-
   select1: any = '';
   estadoAprobacion: any[] = [{name:'Rechazado'}, {name:'Aprobado'}];
-
   products: any[] = [
     {
       empresa: 'Empresa A',
@@ -92,4 +101,114 @@ export class AjustePdComponent {
     },
   ];
 
+  /**
+   * Exporta los datos de la tabla a un archivo Excel
+   * @param table Referencia a la tabla PrimeNG
+   */
+  exportExcel(table: Table) {
+    try {
+      // Obtenemos los datos a exportar (usamos los datos filtrados si existen)
+      const dataToExport = this.prepareDataForExport(table);
+      
+      // Creamos el libro de Excel
+      const worksheet = XLSX.utils.json_to_sheet(dataToExport);
+      const workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
+      
+      // Aplicamos estilos a las celdas
+      this.applyExcelStyles(worksheet);
+      
+      // Opciones de exportación
+      const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+      
+      // Guardamos el archivo
+      this.saveAsExcelFile(excelBuffer, 'ajuste_pd');
+      
+      console.log('Exportación a Excel completada con éxito');
+    } catch (error) {
+      console.error('Error al exportar a Excel:', error);
+    }
+  }
+
+  /**
+   * Prepara los datos para la exportación, traduciendo los nombres de columnas
+   * @param table Referencia a la tabla PrimeNG
+   * @returns Array de objetos con los datos formateados para exportar
+   */
+  private prepareDataForExport(table: Table): any[] {
+    // Si hay filtros aplicados, usamos los datos filtrados, de lo contrario todos los datos
+    const data = table.filteredValue || table.value;
+    
+    // Mapeamos los datos para tener nombres de columnas en español y legibles
+    return data.map(item => {
+      return {
+        'Empresa': item.empresa,
+        'Código de cronograma': item.codigoCronograma,
+        'Etapa del Servicio': item.codigoCronogramaAjuste,
+        'Nombre sistema': item.tipoCarga,
+        'Tipo de inversión': item.estadoRevision,
+        'Código de glosa PD': item.analista,
+        'Descripción glosa': item.fechaIngreso,
+        'Año de Inicio': item.dato9,
+        'Año de Término': item.dato10,
+        'Estado aprobación': item.dato13
+      };
+    });
+  }
+
+  /**
+   * Aplica estilos al worksheet de Excel para mejorar la presentación
+   * @param worksheet Hoja de Excel a la que aplicar estilos
+   */
+  private applyExcelStyles(worksheet: XLSX.WorkSheet) {
+    // Definimos estilos para los encabezados
+    const headerStyle = {
+      font: { bold: true, color: { rgb: 'FFFFFF' } },
+      fill: { fgColor: { rgb: '007ACC' } }, // Color azul para los encabezados
+      alignment: { horizontal: 'center', vertical: 'center' }
+    };
+    
+    // Aplicamos estilos a los encabezados (primera fila)
+    const range = XLSX.utils.decode_range(worksheet['!ref'] || 'A1');
+    for (let col = range.s.c; col <= range.e.c; col++) {
+      const cellRef = XLSX.utils.encode_cell({ r: 0, c: col });
+      if (!worksheet[cellRef]) worksheet[cellRef] = { t: 's', v: '' };
+      
+      // Asignamos el estilo al encabezado
+      worksheet[cellRef].s = headerStyle;
+    }
+    
+    // Ajustamos el ancho de las columnas automáticamente
+    const colWidths = [];
+    for (let col = range.s.c; col <= range.e.c; col++) {
+      colWidths.push({ wch: 15 }); // Ancho predeterminado
+    }
+    worksheet['!cols'] = colWidths;
+  }
+
+  /**
+   * Guarda el buffer como un archivo Excel
+   * @param buffer Datos del archivo Excel
+   * @param fileName Nombre base del archivo
+   */
+  private saveAsExcelFile(buffer: any, fileName: string): void {
+    // Definimos el tipo MIME para archivos Excel
+    const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+    const EXCEL_EXTENSION = '.xlsx';
+    
+    // Creamos un Blob con los datos
+    const data: Blob = new Blob([buffer], { type: EXCEL_TYPE });
+    
+    // Generamos un nombre de archivo con timestamp para evitar duplicados
+    const today = new Date();
+    const formattedDate = 
+      today.getFullYear().toString() +
+      (today.getMonth() + 1).toString().padStart(2, '0') +
+      today.getDate().toString().padStart(2, '0') +
+      '_' +
+      today.getHours().toString().padStart(2, '0') +
+      today.getMinutes().toString().padStart(2, '0');
+    
+    // Guardamos el archivo
+    FileSaver.saveAs(data, `${fileName}_${formattedDate}${EXCEL_EXTENSION}`);
+  }
 }