Unidad de información

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

@@ -7,8 +7,8 @@
 
 
 
-  <div class="flex align-content-start flex-wrap border-round border-blue-400 my-2 lg:px-0 py-3">
+  <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 bg-blue-400 border-round mr-1  my-1">
+    <div class="col-6 md:col-3 lg:col-2 bg-blue-400 border-round ">
         <div class="border-round font-bold ">
           <div class="h-4rem">Filtro Empresa</div>
           <select id="selectFiltroTipoCarga" class="w-full text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary mt-1" style="appearance: auto">
@@ -19,9 +19,9 @@
           </select>
         </div>
     </div>
-    <div class="col-6 md:col-3 lg:col-2 bg-blue-400 border-round  my-1">
+    <div class="col-6 md:col-3 lg:col-2 bg-blue-400 border-round">
         <div class="border-round font-bold">
-          <div class="h-4rem">Filtro Código Cronograma SINAR</div>
+          <div class="h-4rem">Filtro Código Cronograma</div>
             <select id="selectFiltroTipoCarga" class="w-full text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary mt-1" style="appearance: auto">
               <option selected>Seleccione...</option>
               <option value="1">Opcion 1</option>

src/app/pages/concesiones/concesiones.component.html

@@ -49,7 +49,7 @@
 
 
 
-<div class="flex justify-content-between flex-wrap border-round border-blue-400 bg-blue-200 my-5 lg:px-0 md:px-8 py-3">
+<div class="flex justify-content-between flex-wrap border-round border-blue-400 bg-blue-300 my-5 lg:px-0 md:px-8 py-3">
   <div class="col-12 md:col-6 lg:col-2">
       <div class="border-round font-bold">
         <div class="h-4rem">Filtro Empresa</div>

src/app/pages/resumen/resumen.component.html

@@ -23,7 +23,7 @@
                 <td>{{ product.codigoCronograma }}</td>
                 <td>{{ product.codigoCronogramaAjuste }}</td>
                 <td>{{ product.tipoCarga }}</td>
-                <td style="background-color: #F8F9FA;border: none;">
+                <td style="background-color: #F8F9FA;border: none;width: 50px;">
                   <button style="background: transparent; border: none; cursor: pointer;">
                     <i class="pi pi-pen-to-square" style="font-size: 24px;"></i>
                   </button>
@@ -50,7 +50,7 @@
                 <td>{{ product.codigoCronograma }}</td>
                 <td>{{ product.codigoCronogramaAjuste }}</td>
                 <td>{{ product.tipoCarga }}</td>
-                <td style="background-color: #F8F9FA;border: none;">
+                <td style="background-color: #F8F9FA;border: none;width: 50px;">
                   <button style="background: transparent; border: none; cursor: pointer;">
                     <i class="pi pi-arrow-circle-right" style="font-size: 24px;"></i>
                   </button>

src/app/pages/unidad-informacion/unidad-informacion.component.html

@@ -1 +1,76 @@
-<p>unidad-informacion works!</p>
+<div class="p-3 text-white">
+<!-- Tabla1 -->
+<div class="font-bold text-black-alpha-90 my-2">Cronogramas solicitados y pendientes de carga:</div>
+  <p-table class="mi-tabla-redondeada"
+    [value]="products"
+    showGridlines>
+        <ng-template #header>
+            <tr>
+                <th class="bg-blue-400 text-white font-bold">Empresa</th>
+                <th class="bg-blue-400 text-white font-bold">Código de cronograma SINAR</th>
+                <th class="bg-blue-400 text-white font-bold">Contiene obras del año</th>
+                <th class="bg-blue-400 text-white font-bold">N° Oficio que aprueba</th>
+                <th class="bg-blue-400 text-white font-bold">Tipo de carga</th>
+                <th class="bg-blue-400 text-white font-bold">Fecha de solicitud</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.dato5 }}</td>
+                <td>{{ product.dato6 }}</td>
+            </tr>
+        </ng-template>
+  </p-table>
+<!-- Tabla2 -->
+<div class="font-bold text-black-alpha-90 my-2">Cronogramas aprobados:</div>
+  <p-table class="mi-tabla-redondeada"
+    [value]="products"
+    showGridlines>
+        <ng-template #header>
+            <tr>
+                <th class="bg-green-400 text-white font-bold">Empresa</th>
+                <th class="bg-green-400 text-white font-bold">Código cronograma</th>
+                <th class="bg-green-400 text-white font-bold">Nombre sistema</th>
+                <th class="bg-green-400 text-white font-bold">Tipo</th>
+                <th class="bg-green-400 text-white font-bold">Fecha aprobació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.dato5 }}</td>
+            </tr>
+        </ng-template>
+</p-table>
+<!-- Tabla3 -->
+<div class="font-bold text-black-alpha-90 my-2">Cronogramas rechazados:</div>
+  <p-table class="mi-tabla-redondeada"
+    [value]="products"
+    showGridlines>
+        <ng-template #header>
+            <tr>
+                <th class="surface-400 text-white font-bold">Empresa</th>
+                <th class="surface-400 text-white font-bold">Código de cronograma</th>
+                <th class="surface-400 text-white font-bold">Nombre sistema</th>
+                <th class="surface-400 text-white font-bold">Tipo</th>
+                <th class="surface-400 text-white font-bold">Fecha rechazo</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.dato5 }}</td>
+            </tr>
+        </ng-template>
+</p-table>
+</div>

src/app/pages/unidad-informacion/unidad-informacion.component.ts

@@ -1,11 +1,48 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TableModule } from 'primeng/table';
+import { InputTextModule } from 'primeng/inputtext';
 
 @Component({
   selector: 'app-unidad-informacion',
-  imports: [],
+  imports: [FormsModule, TableModule, InputTextModule],
   templateUrl: './unidad-informacion.component.html',
   styleUrl: './unidad-informacion.component.scss'
 })
 export class UnidadInformacionComponent {
+  products: any[] = [
+    {
+      empresa: 'Empresa A',
+      codigoCronograma: '123',
+      codigoCronogramaAjuste: '456',
+      tipoCarga: 'Inicial',
+      dato5: 'Inicial',
+      dato6: 'Inicial',
+    },
+    {
+      empresa: 'Empresa A',
+      codigoCronograma: '123',
+      codigoCronogramaAjuste: '456',
+      tipoCarga: 'Inicial',
+      dato5: 'Inicial',
+      dato6: 'Inicial',
+    },
+    {
+      empresa: 'Empresa A',
+      codigoCronograma: '123',
+      codigoCronogramaAjuste: '456',
+      tipoCarga: 'Inicial',
+      dato5: 'Inicial',
+      dato6: 'Inicial',
+    },
+    {
+      empresa: 'Empresa A',
+      codigoCronograma: '123',
+      codigoCronogramaAjuste: '456',
+      tipoCarga: 'Inicial',
+      dato5: 'Inicial',
+      dato6: 'Inicial',
+    },
+  ];
 
 }