Sort columnas, logo navbar, responsivo

src/app/components/navbar/navbar.component.html

@@ -4,7 +4,13 @@
       (click)="toggleSidebar()"></button>
     <span class="app-title">Administrador de Cronogramas</span>
   </div>
+  <ul class="navbar-nav ml-auto">
 
+    <div style="flex-grow: 1; text-align: center;">
+      <img src="/img/teclado1.png" alt="Logo" style="width: 90% !important;height: 50px !important; opacity: 0.8; ">
+    </div>
+
+  </ul>
   <div class="navbar-right">
     <span class="user-name">Luis Muñoz</span>
     <button pButton icon="pi pi-sign-out" class="p-button-text p-button-rounded logout-button"

src/app/components/navbar/navbar.component.scss

@@ -117,3 +117,15 @@
       display: none;
     }
   }
+
+  .logo-img {
+    max-height: 50px;
+    width: auto;
+    opacity: 0.8;
+  }
+
+  @media (max-width: 576px) {
+    .logo-img {
+      max-height: 35px;
+    }
+  }

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

@@ -8,13 +8,13 @@
 
 
   <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 ">
+    <div class="col-12 md:col-3 lg:col-2 bg-blue-400 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 bg-blue-400 border-round">
+    <div class="col-12 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</div>
           <p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
@@ -77,8 +77,7 @@
         </ng-template>
 </p-table>
 <div class="col-12 text-right">
-  <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"><i class="pi pi-file-export"></i></button>
+  <i class="fa-solid fa-file-excel" style="color: #007239;font-size: 24px;"></i>
 </div>
 
-
 </div>

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

@@ -94,7 +94,7 @@
         </ng-template>
 </p-table>
 <div class="col-12 text-right">
-  <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"><i class="pi pi-file-export"></i></button>
+  <i class="fa-solid fa-file-excel" style="color: #007239;font-size: 24px;"></i>
 </div>
 
 

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

@@ -47,39 +47,37 @@
         </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="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>
       <p-select [options]="empresas" [(ngModel)]="select1" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
     </div>
   </div>
-  <div class="col-12 md:col-6 lg:col-2">
+  <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-6 lg:col-2">
+  <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-6 lg:col-2">
+  <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-12 lg:col-2">
+  <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="number"
+      type="text"
       pInputText
       placeholder="xxxxx"
       name="numeroOficio"
@@ -95,17 +93,29 @@
 
 <!-- Tabla2 -->
 <div class="font-bold my-2 tituloTabla">Cronogramas solicitados y pendientes de carga:</div>
-<p-table
+<p-table sortField="price" [sortOrder]="-1"
     [value]="products" stripedRows
     showGridlines>
         <ng-template #header>
             <tr>
-                <th class="tablaAzul font-bold">Empresa</th>
+                <th pSortableColumn="empresa" class="tablaAzul font-bold">
-                <th class="tablaAzul font-bold">Código de cronograma SINAR</th>
+                  Empresa <p-sortIcon field="empresa" />
-                <th class="tablaAzul font-bold">Contiene obras del año</th>
+                </th>
-                <th class="tablaAzul font-bold">N° Oficio que aprueba</th>
+                <th pSortableColumn="codigoCronograma" class="tablaAzul font-bold">
-                <th class="tablaAzul font-bold">Tipo de carga</th>
+                  Código de cronograma SINAR <p-sortIcon field="codigoCronograma" />
-                <th class="tablaAzul font-bold">Fecha de solicitud</th>
+                </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>

src/app/pages/concesiones/concesiones.component.scss

@@ -2,3 +2,11 @@
   background-size: 20px 20px;
   padding-right: 35px; /* espacio para que el texto no choque con el ícono */
 }
+
+@media screen and (min-width: 992px) {
+  .lg\:col-2 {
+      flex: 0 0 auto;
+      padding: 0.5rem;
+      width: 19%;
+  }
+}

src/app/pages/concesiones/concesiones.component.ts

@@ -26,38 +26,38 @@ export class ConcesionesComponent {
       codigoCronogramaAjuste: '456',
       tipoCarga: 'Inicial',
       estadoRevision: 'Ingresado',
-      analista: 'No asignado',
+      analista: '',
       fechaIngreso: '2025-04-29',
       semaforo: 'green'
     },
     {
-      empresa: 'Empresa A',
+      empresa: 'Fmpresa A',
       codigoCronograma: '123',
       codigoCronogramaAjuste: '456',
       tipoCarga: 'Inicial',
       estadoRevision: 'En revisión',
       analista: 'Gabriel Torres',
-      fechaIngreso: '2025-04-29',
+      fechaIngreso: '2024-04-29',
       semaforo: 'yellow'
     },
     {
-      empresa: 'Empresa A',
+      empresa: 'Gmpresa A',
       codigoCronograma: '123',
       codigoCronogramaAjuste: '456',
       tipoCarga: 'Inicial',
       estadoRevision: 'Rechazado',
       analista: 'Jorge Muñoz',
-      fechaIngreso: '2025-04-29',
+      fechaIngreso: '2023-04-29',
       semaforo: 'red'
     },
     {
-      empresa: 'Empresa A',
+      empresa: 'Hmpresa A',
       codigoCronograma: '123',
       codigoCronogramaAjuste: '456',
       tipoCarga: 'Inicial',
       estadoRevision: 'Aprobado',
       analista: 'Jarolt Matamoros',
-      fechaIngreso: '2025-04-29',
+      fechaIngreso: '2022-04-29',
       semaforo: 'green'
     },
   ];

src/styles.scss

@@ -15,7 +15,9 @@
     padding: 0;
     height: 100%;
     /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; */
-    font-family: "Museo Sans 300", "Museo Sans 700" !important;
+    /* font-family: "Museo Sans 300", "Museo Sans 700" !important; */
+    font-family: "Museo Sans", sans-serif !important;
+    font-weight: 300; /* o 700 según necesites */
     font-size: 14px;
     color: var(--text-color);
   }