From ebc09f8ca55fbf505f7a8134128b6353e5037281 Mon Sep 17 00:00:00 2001
From: jmbardallo <juanmanuel.bardallo@sic.uhu.es>
Date: Mon, 27 Jul 2026 13:55:00 +0200
Subject: [PATCH] Refactor client action menu to use shared matMenuContent

---
 CHANGELOG.md                                  |   10 +-
 .../components/groups/groups.component.html   | 1127 ++++++++---------
 .../client-pending-tasks.component.ts         |    2 +-
 .../client-task-logs.component.ts             |    2 +-
 .../task-logs/task-logs.component.ts          |    2 +-
 5 files changed, 570 insertions(+), 573 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5ebdee3..046d622 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## [1.8.2] - 2026-07-27
+
+### Fixed
+- Menú de opciones de cliente (`groups.component.html`): Unificado el menú de acciones (tres puntos verticales) usando `matMenuContent`. Se elimina la duplicidad de código que causaba divergencias de comportamiento entre la vista tarjeta y la vista lista. Ahora la opción de "Logs en tiempo real" está siempre disponible en ambas vistas, al igual que los bloqueos al sincronizar.
+- Detalles de tareas (`OutputDialogComponent`): Ampliado el ancho de la ventana modal de detalles a `70vw` para facilitar la lectura de trazas largas y comandos de OGAgent/OGLive.
+
 ## [1.8.1] - 2026-07-17
 
 ### Added
@@ -9,8 +15,8 @@
 - Modal de partición de arranque (`boot-so-partition`): Refactorizado para usar el componente compartido `app-disk-partition-selector`, eliminando código duplicado y unificando el diseño y comportamiento de la selección de discos y particiones con el resto de modales.
 
 ### Fixed
-- Detalles de tareas (`OutputDialogComponent`): Corregido el formateo de los detalles mostrados desde los agentes (OGAgent) para renderizar el texto en crudo sin el parseo estricto JSON, lo cual causaba que los saltos de línea (`\n`) se vieran de forma literal (`\r\n\r\n`).
-- Formulario de despliegue (`Deploy Image`): Solucionado el problema que ocultaba las instrucciones (comandos) cuando el despliegue era en modo caché. Refactorizado todo el HTML del componente para utilizar la nueva sintaxis de control de flujo de Angular (`@if`, `@for`).
+- Detalles de tareas (`OutputDialogComponent`): Corregido el formateo de los detalles mostrados desde los agentes (OGAgent) para renderizar el texto en crudo manteniendo los saltos de línea (usando pre-wrap por CSS y <pre> tag), y dándole formato monoespaciado en lugar de intentar forzar un parseo estricto JSON que rompía la salida de comandos.
+- Formulario de despliegue (`Deploy Image`): Solucionado el problema que ocultaba las comandos (instructions) cuando el despliegue era en modo caché. El código ha sido refactorizado y limpiado usando directivas estructurales estándar de Angular (`*ngIf`, `*ngFor`).
 - Roles: Permisos actualizados en vistas para reflejar recientes cambios de backend en la gestión de perfiles de software.
 
 ## [1.8.0] - 2026-06-16
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index b4e1424..7252db4 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -1,5 +1,5 @@
-<app-modal-overlay 
-  [isVisible]="loading" 
+<app-modal-overlay
+  [isVisible]="loading"
   message="Cargando...">
 </app-modal-overlay>
 
@@ -16,19 +16,23 @@
     </div>
     <div class="groups-button-row">
       <div joyrideStep="addStep" text="{{ 'groupsAddStepText' | translate }}" style="display: flex; gap: 8px;">
-        <button class="action-button" (click)="addOU($event)" *ngIf="auth.userCategory !== 'ou-minimal'"
-          matTooltip="{{ 'newOrganizationalUnitTooltip' | translate }}" matTooltipShowDelay="1000">
-          {{ 'newOrganizationalUnitButton' | translate }}
-        </button>
-        <button class="action-button" [matMenuTriggerFor]="menuClients" *ngIf="auth.userCategory !== 'ou-minimal'"
-                [disabled]="!hasOrganizationalUnits()" 
-                matTooltip="{{ hasOrganizationalUnits() ? ('newClientButtonTooltip' | translate) : ('noOrganizationalUnitsTooltip' | translate) }}" 
-                matTooltipShowDelay="1000">{{
+        @if (auth.userCategory !== 'ou-minimal') {
+          <button class="action-button" (click)="addOU($event)"
+            matTooltip="{{ 'newOrganizationalUnitTooltip' | translate }}" matTooltipShowDelay="1000">
+            {{ 'newOrganizationalUnitButton' | translate }}
+          </button>
+        }
+        @if (auth.userCategory !== 'ou-minimal') {
+          <button class="action-button" [matMenuTriggerFor]="menuClients"
+            [disabled]="!hasOrganizationalUnits()"
+            matTooltip="{{ hasOrganizationalUnits() ? ('newClientButtonTooltip' | translate) : ('noOrganizationalUnitsTooltip' | translate) }}"
+            matTooltipShowDelay="1000">{{
           'newClientButton' | translate }}</button>
+        }
         <mat-menu #menuClients="matMenu">
           <button mat-menu-item (click)="addClient($event)" [disabled]="!hasOrganizationalUnits()">{{ 'newSingleClientButton' | translate }}</button>
           <button mat-menu-item (click)="addMultipleClients($event)" [disabled]="!hasOrganizationalUnits()">{{ 'newMultipleClientButton' | translate
-            }}</button>
+          }}</button>
         </mat-menu>
       </div>
       <button class="ordinary-button" (click)="openBottomSheet()" joyrideStep="keyStep"
@@ -38,38 +42,37 @@
     </div>
 
     <!-- Menú desplegable para pantallas pequeñas -->
-    <div *ngIf="isSmallScreen" class="groups-menu">
-      <button mat-icon-button [matMenuTriggerFor]="smallScreenMenu" [matTooltip]="'labelOptions' | translate" matTooltipShowDelay="1000">
-        <mat-icon>menu</mat-icon>
-      </button>
-      <mat-menu #smallScreenMenu="matMenu">
-        <button mat-menu-item (click)="addOU($event)">
-          {{ 'newOrganizationalUnitButton' | translate }}
+    @if (isSmallScreen) {
+      <div class="groups-menu">
+        <button mat-icon-button [matMenuTriggerFor]="smallScreenMenu" [matTooltip]="'labelOptions' | translate" matTooltipShowDelay="1000">
+          <mat-icon>menu</mat-icon>
         </button>
-        <button mat-menu-item (click)="addClient($event)" [disabled]="!hasOrganizationalUnits()">
-          {{ 'newSingleClientButton' | translate }}
-        </button>
-        <button mat-menu-item (click)="addMultipleClients($event)" [disabled]="!hasOrganizationalUnits()">
-          {{ 'newMultipleClientButton' | translate }}
-        </button>
-        <button mat-menu-item (click)="openBottomSheet()">
-          {{ 'Legend' | translate }}
-        </button>
-      </mat-menu>
+        <mat-menu #smallScreenMenu="matMenu">
+          <button mat-menu-item (click)="addOU($event)">
+            {{ 'newOrganizationalUnitButton' | translate }}
+          </button>
+          <button mat-menu-item (click)="addClient($event)" [disabled]="!hasOrganizationalUnits()">
+            {{ 'newSingleClientButton' | translate }}
+          </button>
+          <button mat-menu-item (click)="addMultipleClients($event)" [disabled]="!hasOrganizationalUnits()">
+            {{ 'newMultipleClientButton' | translate }}
+          </button>
+          <button mat-menu-item (click)="openBottomSheet()">
+            {{ 'Legend' | translate }}
+          </button>
+        </mat-menu>
+      </div>
+    }
+  </div>
+
+  @if (initialLoading) {
+    <div>
+      <app-loading [isLoading]="initialLoading"></app-loading>
     </div>
-  </div>
-
-  <div *ngIf="initialLoading; else contentTemplate">
-    <app-loading [isLoading]="initialLoading"></app-loading>
-  </div>
-
-  <!-- MAIN VIEW -->
-  <ng-template #contentTemplate>
+  } @else {
     <div class="main-container">
-
       <!-- FILTERS AND TREE VIEW -->
       <div class="filters-and-tree-container">
-
         <!-- Filters -->
         <div class="filters-panel" joyrideStep="filtersPanelStep" text="{{ 'filtersPanelStepText' | translate }}">
           <div class="filters-container">
@@ -77,33 +80,40 @@
               <mat-label>{{ 'searchTree' | translate }}</mat-label>
               <input matInput #treeSearchInput (input)="onTreeFilterInput($event)"
                 [placeholder]="'placeholderOrgUnitTypes' | translate" />
-              <button *ngIf="treeSearchInput.value" mat-icon-button matSuffix [attr.aria-label]="'clearTreeSearch' | translate"
-                (click)="clearTreeSearch(treeSearchInput)">
-                <mat-icon>close</mat-icon>
-              </button>
+              @if (treeSearchInput.value) {
+                <button mat-icon-button matSuffix [attr.aria-label]="'clearTreeSearch' | translate"
+                  (click)="clearTreeSearch(treeSearchInput)">
+                  <mat-icon>close</mat-icon>
+                </button>
+              }
             </mat-form-field>
             <mat-form-field class="filter-form-field" appearance="outline">
               <mat-label>{{ 'searchClient' | translate }}</mat-label>
               <input matInput #clientSearchInput (input)="onClientFilterInput($event)"
                 [placeholder]="'searchNameIpStatusMac' | translate" />
-              <button *ngIf="clientSearchInput.value" mat-icon-button matSuffix [attr.aria-label]="'clearClientSearch' | translate"
-                (click)="clearClientSearch(clientSearchInput)">
-                <mat-icon>close</mat-icon>
-              </button>
+              @if (clientSearchInput.value) {
+                <button mat-icon-button matSuffix [attr.aria-label]="'clearClientSearch' | translate"
+                  (click)="clearClientSearch(clientSearchInput)">
+                  <mat-icon>close</mat-icon>
+                </button>
+              }
             </mat-form-field>
             <mat-form-field class="form-field search-select" appearance="outline">
               <mat-select placeholder="{{ 'searchState' | translate }}" #clientSearchStatusInput
                 (selectionChange)="onClientFilterStatusInput($event.value)">
-                <mat-option *ngFor="let option of status" [value]="option.value">
-                  {{ option.name }}
-                </mat-option>
+                @for (option of status; track option) {
+                  <mat-option [value]="option.value">
+                    {{ option.name }}
+                  </mat-option>
+                }
               </mat-select>
-              <button *ngIf="clientSearchStatusInput.value" mat-icon-button matSuffix [attr.aria-label]="'clearTreeSearch' | translate"
-                (click)="clearStatusFilter($event, clientSearchStatusInput)">
-                <mat-icon>close</mat-icon>
-              </button>
+              @if (clientSearchStatusInput.value) {
+                <button mat-icon-button matSuffix [attr.aria-label]="'clearTreeSearch' | translate"
+                  (click)="clearStatusFilter($event, clientSearchStatusInput)">
+                  <mat-icon>close</mat-icon>
+                </button>
+              }
             </mat-form-field>
-
             <div class="direct-clients-toggle">
               <mat-slide-toggle
                 [(ngModel)]="showOnlyDirectClients"
@@ -113,7 +123,6 @@
                 {{ 'directClientsToggle' | translate }}
               </mat-slide-toggle>
             </div>
-
             <!-- Funcionalidad actualmente deshabilitada-->
             <!-- <mat-form-field appearance="outline">
             <mat-select (selectionChange)="loadSelectedFilter($event.value)" [placeholder]="'buttonLoadFilter' | translate" disabled>
@@ -131,567 +140,549 @@
               <mat-option value="group">{{ 'computerGroups' | translate }}</mat-option>
             </mat-select>
           </mat-form-field> -->
+        </div>
+      </div>
+      <!-- Tree -->
+      <div class="tree-container" joyrideStep="treePanelStep" text="{{ 'treePanelStepText' | translate }}">
+        <div class="tree-header">
+          <h3 class="tree-title">
+            <mat-icon>account_tree</mat-icon>
+            {{ 'organizationalStructure' | translate }}
+          </h3>
+          <div class="tree-actions">
+            <button mat-icon-button (click)="expandAll()" matTooltip="{{ 'expandAll' | translate }}">
+              <mat-icon>unfold_more</mat-icon>
+            </button>
+            <button mat-icon-button (click)="collapseAll()" matTooltip="{{ 'collapseAll' | translate }}">
+              <mat-icon>unfold_less</mat-icon>
+            </button>
           </div>
         </div>
-
-        <!-- Tree -->
-        <div class="tree-container" joyrideStep="treePanelStep" text="{{ 'treePanelStepText' | translate }}">
-          <div class="tree-header">
-            <h3 class="tree-title">
-              <mat-icon>account_tree</mat-icon>
-              {{ 'organizationalStructure' | translate }}
-            </h3>
-            <div class="tree-actions">
-              <button mat-icon-button (click)="expandAll()" matTooltip="{{ 'expandAll' | translate }}">
-                <mat-icon>unfold_more</mat-icon>
-              </button>
-              <button mat-icon-button (click)="collapseAll()" matTooltip="{{ 'collapseAll' | translate }}">
-                <mat-icon>unfold_less</mat-icon>
+        <mat-tree [dataSource]="treeDataSource" [treeControl]="treeControl" class="modern-tree">
+          <mat-tree-node [ngClass]="{'selected-node': selectedNode?.id === node.id, 'tree-node': true}"
+            *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding (click)="onNodeClick($event, node)">
+            <div class="node-content">
+              <button mat-icon-button matTreeNodeToggle [disabled]="!node.expandable"
+                [ngClass]="{'disabled-toggle': !node.expandable}" class="expand-button">
+                <mat-icon class="expand-icon">{{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}</mat-icon>
               </button>
+              <div class="node-info">
+                <div class="node-main">
+                  <mat-icon class="node-icon {{ node.type }}" [matTooltip]="getNodeTypeTooltip(node.type)">
+                    {{
+                    node.type === 'organizational-unit' ? 'business'
+                    : node.type === 'classrooms-group' ? 'meeting_room'
+                    : node.type === 'classroom' ? 'school'
+                    : node.type === 'clients-group' ? 'dns'
+                    : node.type === 'client' ? 'computer'
+                    : 'folder'
+                    }}
+                  </mat-icon>
+                  <span class="node-name" [matTooltip]="node.name">{{ node.name }}</span>
+                </div>
+                <div class="node-details">
+                  @if (node.type === 'client') {
+                    <span class="node-ip">{{ node.ip }}</span>
+                  }
+                  @if (node.children && node.children.length > 0) {
+                    <span class="node-count">{{ node.children.length }} {{ getNodeCountLabel(node.children.length) }}</span>
+                  }
+                </div>
+              </div>
+              <div class="node-actions">
+                <button mat-icon-button [matMenuTriggerFor]="menuNode" (click)="onMenuClick($event, node)"
+                  class="menu-button" matTooltip="{{ 'moreActions' | translate }}">
+                  <mat-icon>more_vert</mat-icon>
+                </button>
+              </div>
             </div>
-          </div>
-
-          <mat-tree [dataSource]="treeDataSource" [treeControl]="treeControl" class="modern-tree">
-            <mat-tree-node [ngClass]="{'selected-node': selectedNode?.id === node.id, 'tree-node': true}"
-              *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding (click)="onNodeClick($event, node)">
-              
-              <div class="node-content">
-                <button mat-icon-button matTreeNodeToggle [disabled]="!node.expandable"
-                  [ngClass]="{'disabled-toggle': !node.expandable}" class="expand-button">
-                  <mat-icon class="expand-icon">{{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}</mat-icon>
-                </button>
-                
-                <div class="node-info">
-                  <div class="node-main">
-                    <mat-icon class="node-icon {{ node.type }}" [matTooltip]="getNodeTypeTooltip(node.type)">
-                      {{
-                      node.type === 'organizational-unit' ? 'business'
-                      : node.type === 'classrooms-group' ? 'meeting_room'
-                      : node.type === 'classroom' ? 'school'
-                      : node.type === 'clients-group' ? 'dns'
-                      : node.type === 'client' ? 'computer'
-                      : 'folder'
-                      }}
-                    </mat-icon>
-                    <span class="node-name" [matTooltip]="node.name">{{ node.name }}</span>
-                  </div>
-                  
-                  <div class="node-details">
-                    <ng-container *ngIf="node.type === 'client'">
-                      <span class="node-ip">{{ node.ip }}</span>
-                    </ng-container>
-                    <ng-container *ngIf="node.children && node.children.length > 0">
-                      <span class="node-count">{{ node.children.length }} {{ getNodeCountLabel(node.children.length) }}</span>
-                    </ng-container>
-                  </div>
+          </mat-tree-node>
+          <mat-tree-node [ngClass]="{'selected-node': selectedNode?.id === node.id, 'tree-node': true}"
+            *matTreeNodeDef="let node; when: isLeafNode" matTreeNodePadding (click)="onNodeClick($event, node)">
+            <div class="node-content">
+              <button mat-icon-button matTreeNodeToggle [disabled]="true" class="disabled-toggle expand-button">
+                <mat-icon class="expand-icon">chevron_right</mat-icon>
+              </button>
+              <div class="node-info">
+                <div class="node-main">
+                  <mat-icon class="node-icon {{ node.type }}" [ngClass]="{'client-status': node.type === 'client'}"
+                    [matTooltip]="getNodeTypeTooltip(node.type)">
+                    {{
+                    node.type === 'organizational-unit' ? 'business'
+                    : node.type === 'classrooms-group' ? 'meeting_room'
+                    : node.type === 'classroom' ? 'school'
+                    : node.type === 'clients-group' ? 'dns'
+                    : node.type === 'client' ? 'computer'
+                    : 'folder'
+                    }}
+                  </mat-icon>
+                  <span class="node-name" [matTooltip]="node.name">{{ node.name }}</span>
                 </div>
-                
-                <div class="node-actions">
-                  <button mat-icon-button [matMenuTriggerFor]="menuNode" (click)="onMenuClick($event, node)" 
-                          class="menu-button" matTooltip="{{ 'moreActions' | translate }}">
-                    <mat-icon>more_vert</mat-icon>
-                  </button>
+                <div class="node-details">
+                  @if (node.type === 'client') {
+                    <span class="node-ip">{{ node.ip }}</span>
+                    <span class="node-mac">{{ node.mac }}</span>
+                    <span class="node-status" [ngClass]="'status-' + (node.status || 'off')">
+                      {{ getStatusLabel(node.status) }}
+                    </span>
+                  }
                 </div>
               </div>
-            </mat-tree-node>
-            
-            <mat-tree-node [ngClass]="{'selected-node': selectedNode?.id === node.id, 'tree-node': true}"
-              *matTreeNodeDef="let node; when: isLeafNode" matTreeNodePadding (click)="onNodeClick($event, node)">
-              
-              <div class="node-content">
-                <button mat-icon-button matTreeNodeToggle [disabled]="true" class="disabled-toggle expand-button">
-                  <mat-icon class="expand-icon">chevron_right</mat-icon>
+              <div class="node-actions">
+                <button mat-icon-button [matMenuTriggerFor]="menuNode" (click)="onMenuClick($event, node)"
+                  class="menu-button" matTooltip="{{ 'moreActions' | translate }}">
+                  <mat-icon>more_vert</mat-icon>
                 </button>
-                
-                <div class="node-info">
-                  <div class="node-main">
-                    <mat-icon class="node-icon {{ node.type }}" [ngClass]="{'client-status': node.type === 'client'}" 
-                              [matTooltip]="getNodeTypeTooltip(node.type)">
-                      {{
-                      node.type === 'organizational-unit' ? 'business'
-                      : node.type === 'classrooms-group' ? 'meeting_room'
-                      : node.type === 'classroom' ? 'school'
-                      : node.type === 'clients-group' ? 'dns'
-                      : node.type === 'client' ? 'computer'
-                      : 'folder'
-                      }}
-                    </mat-icon>
-                    <span class="node-name" [matTooltip]="node.name">{{ node.name }}</span>
-                  </div>
-                  
-                  <div class="node-details">
-                    <ng-container *ngIf="node.type === 'client'">
-                      <span class="node-ip">{{ node.ip }}</span>
-                      <span class="node-mac">{{ node.mac }}</span>
-                      <span class="node-status" [ngClass]="'status-' + (node.status || 'off')">
-                        {{ getStatusLabel(node.status) }}
-                      </span>
-                    </ng-container>
-                  </div>
-                </div>
-                
-                <div class="node-actions">
-                  <button mat-icon-button [matMenuTriggerFor]="menuNode" (click)="onMenuClick($event, node)" 
-                          class="menu-button" matTooltip="{{ 'moreActions' | translate }}">
-                    <mat-icon>more_vert</mat-icon>
-                  </button>
-                </div>
               </div>
-            </mat-tree-node>
-          </mat-tree>
-        </div>
-
-        <!-- Tree node actions -->
-        <mat-menu restoreFocus=false #commandMenu="matMenu">
-          <button mat-menu-item *ngFor="let command of commands" (click)="executeCommand(command, selectedNode)">
+            </div>
+          </mat-tree-node>
+        </mat-tree>
+      </div>
+      <!-- Tree node actions -->
+      <mat-menu restoreFocus=false #commandMenu="matMenu">
+        @for (command of commands; track command) {
+          <button mat-menu-item (click)="executeCommand(command, selectedNode)">
             <span>{{ command.name }}</span>
           </button>
-        </mat-menu>
-        <mat-menu #menuNode="matMenu">
-          <button mat-menu-item (click)="onShowDetailsClick($event, selectedNode)">
-            <mat-icon matTooltip="{{ 'viewUnitTooltip' | translate }}" matTooltipHideDelay="0">visibility</mat-icon>
-            <span>{{ 'viewUnitMenu' | translate }}</span>
-          </button>
-          <button *ngIf="selectedNode?.type === 'classroom'" mat-menu-item (click)="onRoomMap(selectedNode)">
+        }
+      </mat-menu>
+      <mat-menu #menuNode="matMenu">
+        <button mat-menu-item (click)="onShowDetailsClick($event, selectedNode)">
+          <mat-icon matTooltip="{{ 'viewUnitTooltip' | translate }}" matTooltipHideDelay="0">visibility</mat-icon>
+          <span>{{ 'viewUnitMenu' | translate }}</span>
+        </button>
+        @if (selectedNode?.type === 'classroom') {
+          <button mat-menu-item (click)="onRoomMap(selectedNode)">
             <mat-icon>map</mat-icon>
             <span>{{ 'roomMap' | translate }}</span>
           </button>
-          <button mat-menu-item (click)="addClient($event, selectedNode)" *ngIf="auth.userCategory !== 'ou-minimal'" [disabled]="!hasOrganizationalUnits()">
+        }
+        @if (auth.userCategory !== 'ou-minimal') {
+          <button mat-menu-item (click)="addClient($event, selectedNode)" [disabled]="!hasOrganizationalUnits()">
             <mat-icon>add</mat-icon>
             <span>{{ 'newSingleClientButton' | translate }}</span>
           </button>
-          <button mat-menu-item (click)="addMultipleClients($event, selectedNode)" *ngIf="auth.userCategory !== 'ou-minimal'" [disabled]="!hasOrganizationalUnits()">
+        }
+        @if (auth.userCategory !== 'ou-minimal') {
+          <button mat-menu-item (click)="addMultipleClients($event, selectedNode)" [disabled]="!hasOrganizationalUnits()">
             <mat-icon>playlist_add</mat-icon>
             <span>{{ 'newMultipleClientButton' | translate }}</span>
           </button>
-          <button mat-menu-item (click)="addOU($event, selectedNode)" *ngIf="auth.userCategory !== 'ou-minimal'">
+        }
+        @if (auth.userCategory !== 'ou-minimal') {
+          <button mat-menu-item (click)="addOU($event, selectedNode)">
             <mat-icon>account_tree</mat-icon>
             <span>{{ 'addOrganizationalUnit' | translate }}</span>
           </button>
-          <button mat-menu-item (click)="onEditNode($event, selectedNode)" *ngIf="auth.userCategory !== 'ou-minimal'">
+        }
+        @if (auth.userCategory !== 'ou-minimal') {
+          <button mat-menu-item (click)="onEditNode($event, selectedNode)">
             <mat-icon>edit</mat-icon>
             <span>{{ 'buttonEdit' | translate }}</span>
           </button>
-          <button mat-menu-item (click)="onDeleteClick($event, selectedNode)" *ngIf="auth.userCategory !== 'ou-minimal' && auth.userCategory !== 'ou-operator'">
+        }
+        @if (auth.userCategory !== 'ou-minimal' && auth.userCategory !== 'ou-operator') {
+          <button mat-menu-item (click)="onDeleteClick($event, selectedNode)">
             <mat-icon>delete</mat-icon>
             <span>{{ 'buttonDelete' | translate }}</span>
           </button>
-          <button mat-menu-item (click)="openPartitionTypeModal($event, selectedNode)">
-            <mat-icon>storage</mat-icon>
-            <span>{{ 'partitions' | translate }}</span>
-          </button>
-          <button mat-menu-item (click)="openOUPendingTasks($event, selectedNode)">
-            <mat-icon>pending_actions</mat-icon>
-            <span>{{ 'colaAcciones' | translate }}</span>
-          </button>
-          <app-execute-command [clientData]="selectedNode?.clients || []" [buttonType]="'menu-item'"
-            [buttonText]="'ejecutarComandos' | translate" [icon]="'terminal'"
-            [disabled]="!((selectedNode?.clients ?? []).length > 0)" [runScriptContext]="selectedNode?.name || ''"
-            [runScriptContext]="getRunScriptContext(selectedNode?.clients || [])">
-          </app-execute-command>
-        </mat-menu>
-      </div>
-
-      <mat-divider [vertical]="true"></mat-divider>
-
-      <!-- CLIENTS -->
-      <div class="clients-container">
-        <mat-divider class="clients-mat-divider"></mat-divider>
-        <!-- CLIENTS HEADER -->
-        <div class="clients-view-header">
-          <span [ngStyle]="{ visibility: isLoadingClients ? 'hidden' : 'visible' }" class="clients-title-name">
-            {{ 'labelClients' | translate }}
-            <strong>{{ selectedNode?.name }}</strong>
-          </span>
-          <div class="view-type-container">
-            <mat-checkbox *ngIf="currentView === 'card'" class="cards-select-all-inline" 
+        }
+        <button mat-menu-item (click)="openPartitionTypeModal($event, selectedNode)">
+          <mat-icon>storage</mat-icon>
+          <span>{{ 'partitions' | translate }}</span>
+        </button>
+        <button mat-menu-item (click)="openOUPendingTasks($event, selectedNode)">
+          <mat-icon>pending_actions</mat-icon>
+          <span>{{ 'colaAcciones' | translate }}</span>
+        </button>
+        <app-execute-command [clientData]="selectedNode?.clients || []" [buttonType]="'menu-item'"
+          [buttonText]="'ejecutarComandos' | translate" [icon]="'terminal'"
+          [disabled]="!((selectedNode?.clients ?? []).length > 0)" [runScriptContext]="selectedNode?.name || ''"
+          [runScriptContext]="getRunScriptContext(selectedNode?.clients || [])">
+        </app-execute-command>
+      </mat-menu>
+    </div>
+    <mat-divider [vertical]="true"></mat-divider>
+    <!-- CLIENTS -->
+    <div class="clients-container">
+      <mat-divider class="clients-mat-divider"></mat-divider>
+      <!-- CLIENTS HEADER -->
+      <div class="clients-view-header">
+        <span [ngStyle]="{ visibility: isLoadingClients ? 'hidden' : 'visible' }" class="clients-title-name">
+          {{ 'labelClients' | translate }}
+          <strong>{{ selectedNode?.name }}</strong>
+        </span>
+        <div class="view-type-container">
+          @if (currentView === 'card') {
+            <mat-checkbox class="cards-select-all-inline"
               (change)="toggleAllCards()"
               [checked]="selection.hasValue() && isAllSelected()"
               [indeterminate]="selection.hasValue() && !isAllSelected()"
               [matTooltip]="'buttonSelectAll' | translate">
             </mat-checkbox>
-            <button class="action-button" [disabled]="selection.selected.length === 0" (click)="changeParent($event)"
-                    matTooltip="{{ 'moveClientsTooltip' | translate }}" matTooltipShowDelay="1000">
-              {{ 'changeOU' | translate }}
-            </button>
-       
-            <div joyrideStep="executeCommandStep" text="{{ 'executeCommandStepText' | translate }}">
-              <app-execute-command [clientData]="selection.selected" [buttonType]="'text'"
-                [buttonText]="'ejecutarComandos' | translate" [disabled]="selection.selected.length === 0"
-                [runScriptContext]="getRunScriptContext(selection.selected)"></app-execute-command>
-            </div>
-
-            <button *ngIf="classroomCalendarUuid && !syncingUds" class="action-button sync-uds-button" (click)="syncUds($event)"
+          }
+          <button class="action-button" [disabled]="selection.selected.length === 0" (click)="changeParent($event)"
+            matTooltip="{{ 'moveClientsTooltip' | translate }}" matTooltipShowDelay="1000">
+            {{ 'changeOU' | translate }}
+          </button>
+          <div joyrideStep="executeCommandStep" text="{{ 'executeCommandStepText' | translate }}">
+            <app-execute-command [clientData]="selection.selected" [buttonType]="'text'"
+              [buttonText]="'ejecutarComandos' | translate" [disabled]="selection.selected.length === 0"
+            [runScriptContext]="getRunScriptContext(selection.selected)"></app-execute-command>
+          </div>
+          @if (classroomCalendarUuid && !syncingUds) {
+            <button class="action-button sync-uds-button" (click)="syncUds($event)"
               [disabled]="!classroomHasRemotePc"
               matTooltip="Sincronizar calendarios con UDS" matTooltipShowDelay="500">
               <mat-icon>sync</mat-icon>
             </button>
-            <mat-spinner *ngIf="syncingUds" diameter="24" style="margin: 0 8px;"></mat-spinner>
-
-            <button class="action-button delete-button" [disabled]="selection.selected.length === 0" (click)="deleteMultipleClients($event)"
+          }
+          @if (syncingUds) {
+            <mat-spinner diameter="24" style="margin: 0 8px;"></mat-spinner>
+          }
+          <button class="action-button delete-button" [disabled]="selection.selected.length === 0" (click)="deleteMultipleClients($event)"
             matTooltip="{{ 'deleteMultipleClientsTooltip' | translate }}" matTooltipShowDelay="1000">
-              <mat-icon>delete</mat-icon>
-            </button>
-
-            <mat-button-toggle-group name="viewType" [attr.aria-label]="'viewType' | translate" [hideSingleSelectionIndicator]="true"
-              (change)="toggleView($event.value)" joyrideStep="tabsStep" text="{{ 'tabsStepText' | translate }}">
-              <mat-button-toggle value="list" [disabled]="currentView === 'list'">
-                <mat-icon>list</mat-icon> <span class="type-view-text">{{ 'vistalista' | translate }}</span>
-              </mat-button-toggle>
-              <mat-button-toggle value="card" [disabled]="currentView === 'card'">
-                <mat-icon>grid_view</mat-icon> <span class="type-view-text">{{ 'vistatarjeta' | translate }}</span>
-              </mat-button-toggle>
-            </mat-button-toggle-group>
-          </div>
+            <mat-icon>delete</mat-icon>
+          </button>
+          <mat-button-toggle-group name="viewType" [attr.aria-label]="'viewType' | translate" [hideSingleSelectionIndicator]="true"
+            (change)="toggleView($event.value)" joyrideStep="tabsStep" text="{{ 'tabsStepText' | translate }}">
+            <mat-button-toggle value="list" [disabled]="currentView === 'list'">
+              <mat-icon>list</mat-icon> <span class="type-view-text">{{ 'vistalista' | translate }}</span>
+            </mat-button-toggle>
+            <mat-button-toggle value="card" [disabled]="currentView === 'card'">
+              <mat-icon>grid_view</mat-icon> <span class="type-view-text">{{ 'vistatarjeta' | translate }}</span>
+            </mat-button-toggle>
+          </mat-button-toggle-group>
         </div>
-
-        <app-loading [isLoading]="isLoadingClients"></app-loading>
-
-        <!-- CLIENTS VIEWS-->
-        <div class="clients-view" *ngIf="!isLoadingClients" joyrideStep="clientsViewStep"
+      </div>
+      <app-loading [isLoading]="isLoadingClients"></app-loading>
+      <!-- CLIENTS VIEWS-->
+      @if (!isLoadingClients) {
+        <div class="clients-view" joyrideStep="clientsViewStep"
           text="{{ 'clientsViewStepText' | translate }}">
-          <div *ngIf="hasClients; else noClientsTemplate">
-
-            <div class="stats-container" *ngIf="currentView === 'list'">
-              <div class="stat-card">
-                <div class="stat-icon">
-                  <mat-icon>computer</mat-icon>
-                </div>
-                <div class="stat-content">
-                  <div class="stat-number">{{ totalStats.total }}</div>
-                  <div class="stat-label">{{ 'totalClients' | translate }}</div>
-                </div>
-              </div>
-              <div class="stat-card">
-                <div class="stat-icon offline">
-                  <mat-icon>wifi_off</mat-icon>
-                </div>
-                <div class="stat-content">
-                  <div class="stat-number">{{ getStatusCount('off') }}</div>
-                  <div class="stat-label">{{ 'offline' | translate }}</div>
-                </div>
-              </div>
-              <div class="stat-card">
-                <div class="stat-icon online">
-                  <mat-icon>wifi</mat-icon>
-                </div>
-                <div class="stat-content">
-                  <div class="stat-number">{{ getStatusCount('og-live') + getStatusCount('linux') + getStatusCount('windows') }}</div>
-                  <div class="stat-label">{{ 'online' | translate }}</div>
-                </div>
-              </div>
-              <div class="stat-card">
-                <div class="stat-icon busy">
-                  <mat-icon>hourglass_empty</mat-icon>
-                </div>
-                <div class="stat-content">
-                  <div class="stat-number">{{ getStatusCount('busy') }}</div>
-                  <div class="stat-label">{{ 'busy' | translate }}</div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Cards view -->
-            <div *ngIf="currentView === 'card'">
-              <section class="cards-view">
-                <div class="clients-grid">
-                  <div *ngFor="let client of arrayClients" class="client-item" [ngClass]="'status-' + client.status">
-                    <div class="client-card">
-                      <mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(client)"
-                        [checked]="selection.isSelected(client)">
-                      </mat-checkbox>
-                      <img style="margin-top: 0.5em;" [src]="'assets/images/computer_' + client.status + '.svg'"
-                        alt="Client Icon" class="client-image" />
-
-                      <div class="client-details">
-                        <span class="client-name truncate-cell-wide" [matTooltip]="client.name">{{ client.name }}</span>
-                        <span class="client-ip">{{ client.ip }}</span>
-                        <span class="client-mac">{{ client.mac }}</span>
-                        <span *ngIf="client.isRemotePcActive" class="remote-pc-badge">
-                          <mat-icon class="remote-pc-icon">computer</mat-icon>
-                          RemotePC
-                        </span>
-                        <div class="action-icons">
-
-                          <app-execute-command [clientState]="client.status" [clientData]="[client]"
-                            [buttonType]="'icon'" [icon]="'terminal'"
-                            [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"
-                            [runScriptContext]="getRunScriptContext([client])"></app-execute-command>
-
-                          <button
-                            [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"
-                            mat-icon-button [matMenuTriggerFor]="clientMenu" color="primary">
-                            <mat-icon>more_vert</mat-icon>
-                          </button>
-
-                          <span class="sync-spinner" *ngIf="syncingClientIds.has(client.uuid)">
-                            <mat-spinner diameter="24"></mat-spinner>
-                          </span>
-
-                          <mat-menu #clientMenu="matMenu">
-                            <button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)" *ngIf="auth.userCategory !== 'ou-minimal'">
-                              <mat-icon>edit</mat-icon>
-                              <span>{{ 'buttonEdit' | translate }}</span>
-                            </button>
-                            <button mat-menu-item (click)="onShowClientDetail($event, client)">
-                              <mat-icon>visibility</mat-icon>
-                              <span>{{ 'buttonViewDetails' | translate }}</span>
-                            </button>
-                            <button mat-menu-item *ngIf="!syncingClientIds.has(client.uuid)"
-                              (click)="getStatus(client, selectedNode)">
-                              <mat-icon>sync</mat-icon>
-                              <span>{{ 'buttonSync' | translate }}</span>
-                            </button>
-                            <button mat-menu-item (click)="openClientTaskLogs($event, client)">
-                              <mat-icon>list_alt</mat-icon>
-                              <span>{{ 'procedimientosCliente' | translate }}</span>
-                            </button>
-                            <button mat-menu-item (click)="openClientPendingTasks($event, client)">
-                              <mat-icon>pending_actions</mat-icon>
-                              <span>{{ 'colaAcciones' | translate }}</span>
-                            </button>
-                            <button mat-menu-item (click)="openClientLogsInNewTab($event, client)">
-                              <mat-icon>article</mat-icon>
-                              <span>{{ 'realTimeLogs' | translate }}</span>
-                            </button>
-                            <button mat-menu-item (click)="openClientLogsModal($event, client)">
-                              <mat-icon>analytics</mat-icon>
-                              <span>{{ 'clientLogs' | translate }}</span>
-                            </button>
-                            <button mat-menu-item (click)="openClientDiskLogsModal($event, client)">
-                              <mat-icon>storage</mat-icon>
-                              <span>{{ 'diskLogs' | translate }}</span>
-                            </button>
-                            <button mat-menu-item (click)="onDeleteClick($event, client)" *ngIf="auth.userCategory !== 'ou-minimal'">
-                              <mat-icon>delete</mat-icon>
-                              <span>{{ 'buttonDelete' | translate }}</span>
-                            </button>
-                          </mat-menu>
-                        </div>
-                      </div>
+          @if (hasClients) {
+            <div>
+              @if (currentView === 'list') {
+                <div class="stats-container">
+                  <div class="stat-card">
+                    <div class="stat-icon">
+                      <mat-icon>computer</mat-icon>
+                    </div>
+                    <div class="stat-content">
+                      <div class="stat-number">{{ totalStats.total }}</div>
+                      <div class="stat-label">{{ 'totalClients' | translate }}</div>
+                    </div>
+                  </div>
+                  <div class="stat-card">
+                    <div class="stat-icon offline">
+                      <mat-icon>wifi_off</mat-icon>
+                    </div>
+                    <div class="stat-content">
+                      <div class="stat-number">{{ getStatusCount('off') }}</div>
+                      <div class="stat-label">{{ 'offline' | translate }}</div>
+                    </div>
+                  </div>
+                  <div class="stat-card">
+                    <div class="stat-icon online">
+                      <mat-icon>wifi</mat-icon>
+                    </div>
+                    <div class="stat-content">
+                      <div class="stat-number">{{ getStatusCount('og-live') + getStatusCount('linux') + getStatusCount('windows') }}</div>
+                      <div class="stat-label">{{ 'online' | translate }}</div>
+                    </div>
+                  </div>
+                  <div class="stat-card">
+                    <div class="stat-icon busy">
+                      <mat-icon>hourglass_empty</mat-icon>
+                    </div>
+                    <div class="stat-content">
+                      <div class="stat-number">{{ getStatusCount('busy') }}</div>
+                      <div class="stat-label">{{ 'busy' | translate }}</div>
                     </div>
                   </div>
                 </div>
-              </section>
-              <div class="paginator-container">
-                <mat-paginator class="cards-paginator" [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page"
-                  [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)">
-                </mat-paginator>
-              </div>
-            </div>
-
-            <!-- List view mejorada -->
-            <div *ngIf="currentView === 'list'" class="list-view">
-              <div class="table-header">
-                <div class="table-info">
-                  <span>{{ 'showingResults' | translate: { from: getPaginationFrom(), to: getPaginationTo(), total: getPaginationTotal() } }}</span>
+              }
+              <!-- Cards view -->
+              @if (currentView === 'card') {
+                <div>
+                  <section class="cards-view">
+                    <div class="clients-grid">
+                      @for (client of arrayClients; track client) {
+                        <div class="client-item" [ngClass]="'status-' + client.status">
+                          <div class="client-card">
+                            <mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(client)"
+                              [checked]="selection.isSelected(client)">
+                            </mat-checkbox>
+                            <img style="margin-top: 0.5em;" [src]="'assets/images/computer_' + client.status + '.svg'"
+                              alt="Client Icon" class="client-image" />
+                            <div class="client-details">
+                              <span class="client-name truncate-cell-wide" [matTooltip]="client.name">{{ client.name }}</span>
+                              <span class="client-ip">{{ client.ip }}</span>
+                              <span class="client-mac">{{ client.mac }}</span>
+                              @if (client.isRemotePcActive) {
+                                <span class="remote-pc-badge">
+                                  <mat-icon class="remote-pc-icon">computer</mat-icon>
+                                  RemotePC
+                                </span>
+                              }
+                              <div class="action-icons">
+                                <app-execute-command [clientState]="client.status" [clientData]="[client]"
+                                  [buttonType]="'icon'" [icon]="'terminal'"
+                                  [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"
+                                [runScriptContext]="getRunScriptContext([client])"></app-execute-command>
+                                <button
+                                  [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"
+                                  mat-icon-button [matMenuTriggerFor]="clientMenu" color="primary">
+                                  <mat-icon>more_vert</mat-icon>
+                                </button>
+                                <mat-menu #clientMenu="matMenu">
+                                  <ng-container *ngTemplateOutlet="sharedMenuItems; context: {client: client}"></ng-container>
+                                </mat-menu>
+                                @if (syncingClientIds.has(client.uuid)) {
+                                  <span class="sync-spinner">
+                                    <mat-spinner diameter="24"></mat-spinner>
+                                  </span>
+                                }
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      }
+                    </div>
+                  </section>
+                  <div class="paginator-container">
+                    <mat-paginator class="cards-paginator" [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page"
+                      [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)">
+                    </mat-paginator>
+                  </div>
                 </div>
-                <div class="table-actions">
-                  <button mat-icon-button (click)="refreshClientData()" matTooltip="{{ 'buttonUpdate' | translate }}">
-                    <mat-icon>refresh</mat-icon>
-                  </button>
-                  <button mat-icon-button (click)="exportToCSV()" matTooltip="{{ 'exportCSV' | translate }}">
-                    <mat-icon>download</mat-icon>
-                  </button>
-                </div>
-              </div>
-
-              <section class="clients-table" tabindex="0">
-                <table mat-table [dataSource]="selectedClients" class="mat-elevation-z8">
-                  <ng-container matColumnDef="select">
-                    <th mat-header-cell *matHeaderCellDef>
-                      <mat-checkbox (change)="$event ? toggleAllRows() : null"
-                        [checked]="selection.hasValue() && isAllSelected()"
-                        [indeterminate]="selection.hasValue() && !isAllSelected()">
-                      </mat-checkbox>
-                    </th>
-                    <td mat-cell *matCellDef="let row">
-                      <mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(row)"
-                        [checked]="selection.isSelected(row)">
-                      </mat-checkbox>
-                    </td>
-                  </ng-container>
-                  <ng-container matColumnDef="status">
-                    <th mat-header-cell *matHeaderCellDef> 
-                      <div class="column-header">
-                        <span>{{ 'labelState' | translate }}</span>
-                        <button mat-icon-button (click)="sortColumn('status')" class="sort-button">
-                          <mat-icon>{{ getSortIcon('status') }}</mat-icon>
-                        </button>
-                      </div>
-                    </th>
-                    <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}"
-                      matTooltipPosition="left" matTooltipShowDelay="500">
-                      <div class="client-status-container">
-                        <img [src]="'assets/images/computer_' + client.status + '.svg'" alt="Client Icon"
-                          class="client-image" />
-                        <span *ngIf="syncingClientIds.has(client.uuid)">
-                          <mat-spinner diameter="24"></mat-spinner>
-                        </span>
-                      </div>
-                    </td>
-                  </ng-container>
-
-                  <ng-container matColumnDef="name">
-                    <th mat-header-cell *matHeaderCellDef> 
-                      <div class="column-header">
-                        <span>{{ 'name' | translate }}</span>
-                        <button mat-icon-button (click)="sortColumn('name')" class="sort-button">
-                          <mat-icon>{{ getSortIcon('name') }}</mat-icon>
-                        </button>
-                      </div>
-                    </th>
-                    <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}"
-                      matTooltipPosition="left" matTooltipShowDelay="500">
-                      <div class="client-cell">
-                        <span class="client-name truncate-cell-wide" [matTooltip]="client.name">{{ client.name }}</span>
-                      </div>
-                    </td>
-                  </ng-container>
-                  <ng-container matColumnDef="ip">
-                    <th mat-header-cell *matHeaderCellDef>
-                      <div class="column-header">
-                        <span>{{ 'labelIpCaps' | translate }}</span>
-                        <button mat-icon-button (click)="sortColumn('ip')" class="sort-button">
-                          <mat-icon>{{ getSortIcon('ip') }}</mat-icon>
-                        </button>
-                      </div>
-                    </th>
-                    <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}"
-                      matTooltipPosition="left" matTooltipShowDelay="500">
-                      <div class="client-cell">
-                        <span class="client-ip">{{ client.ip }}</span>
-                        <span class="client-mac">{{ client.mac }}</span>
-                      </div>
-                    </td>
-                  </ng-container>
-
-                  <ng-container matColumnDef="firmwareType">
-                    <th mat-header-cell *matHeaderCellDef> 
-                      <div class="column-header">
-                        <span>{{ 'firmwareType' | translate }}</span>
-                        <button mat-icon-button (click)="sortColumn('firmwareType')" class="sort-button">
-                          <mat-icon>{{ getSortIcon('firmwareType') }}</mat-icon>
-                        </button>
-                      </div>
-                    </th>
-                    <td mat-cell *matCellDef="let client">
-                      <mat-chip *ngIf="client.firmwareType" class="firmware-chip">
-                        {{ client.firmwareType }}
-                      </mat-chip>
-                    </td>
-                  </ng-container>
-
-                  <ng-container matColumnDef="oglive">
-                    <th mat-header-cell *matHeaderCellDef> {{ 'ogLiveTitle' | translate }}</th>
-                    <td mat-cell *matCellDef="let client">
-                      <div class="oglive-cell">
-                        <span class="oglive-kernel">{{ client.ogLive?.kernel }}</span>
-                        <span class="oglive-date">{{ client.ogLive?.date | date }}</span>
-                      </div>
-                    </td>
-                  </ng-container>
-
-                  <ng-container matColumnDef="maintenace">
-                    <th mat-header-cell *matHeaderCellDef> {{ 'maintenance' | translate }} </th>
-                    <td mat-cell *matCellDef="let client"> {{ client.maintenance }} </td>
-                  </ng-container>
-                  <ng-container matColumnDef="subnet">
-                    <th mat-header-cell *matHeaderCellDef> {{ 'subnet' | translate }} </th>
-                    <td mat-cell *matCellDef="let client"> {{ client.subnet }} </td>
-                  </ng-container>
-                  <ng-container matColumnDef="pxeTemplate">
-                    <th mat-header-cell *matHeaderCellDef> {{ 'pxeTemplate' | translate }} </th>
-                    <td mat-cell *matCellDef="let client" class="truncate-cell-medium" [matTooltip]="client.pxeTemplate?.name"> {{ client.pxeTemplate?.name }} </td>
-                  </ng-container>
-
-                  <ng-container matColumnDef="parentName">
-                    <th mat-header-cell *matHeaderCellDef> {{ 'labelEditOrgUnitParent' | translate }} </th>
-                    <td mat-cell *matCellDef="let client" class="truncate-cell-medium" [matTooltip]="client.parentName"> {{ client.parentName }} </td>
-                  </ng-container>
-
-                  <ng-container matColumnDef="actions">
-                    <th mat-header-cell *matHeaderCellDef> {{ 'actions' | translate }} </th>
-                    <td mat-cell *matCellDef="let client">
-                      <div class="action-buttons">
-                        <button
-                          [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"
-                          mat-icon-button [matMenuTriggerFor]="clientMenu" color="primary" matTooltip="{{ 'moreActions' | translate }}">
-                          <mat-icon>more_vert</mat-icon>
-                        </button>
-                        <app-execute-command [clientState]="client.status" [clientData]="[client]" [buttonType]="'icon'"
-                          [icon]="'terminal'"
-                          [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"
-                          [runScriptContext]="getRunScriptContext([client])" matTooltip="{{ 'executeCommand' | translate }}">
-                        </app-execute-command>
-                        <button mat-icon-button color="primary" (click)="onShowClientDetail($event, client)" matTooltip="{{ 'buttonViewDetails' | translate }}">
-                          <mat-icon>visibility</mat-icon>
-                        </button>
-                      </div>
-                      <mat-menu #clientMenu="matMenu">
-                        <button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)" *ngIf="auth.userCategory !== 'ou-minimal'">
-                          <mat-icon>edit</mat-icon>
-                          <span>{{ 'buttonEdit' | translate }}</span>
-                        </button>
-                        <button mat-menu-item (click)="onShowClientDetail($event, client)">
-                          <mat-icon>visibility</mat-icon>
-                          <span>{{ 'buttonViewDetails' | translate }}</span>
-                        </button>
-                        <button mat-menu-item (click)="getStatus(client, selectedNode)">
-                          <mat-icon>sync</mat-icon>
-                          <span>{{ 'buttonSync' | translate }}</span>
-                        </button>
-                        <button mat-menu-item (click)="openClientTaskLogs($event, client)">
-                          <mat-icon>list_alt</mat-icon>
-                          <span>{{ 'procedimientosCliente' | translate }}</span>
-                        </button>
-                        <button mat-menu-item (click)="openClientPendingTasks($event, client)">
-                          <mat-icon>pending_actions</mat-icon>
-                          <span>{{ 'colaAcciones' | translate }}</span>
-                        </button>
-                        <button mat-menu-item *ngIf="client.status === 'og-live'" (click)="openClientLogsInNewTab($event, client)">
-                          <mat-icon>article</mat-icon>
-                          <span>{{ 'realTimeLogs' | translate }}</span>
-                        </button>
-                        <button mat-menu-item (click)="openClientLogsModal($event, client)">
-                          <mat-icon>analytics</mat-icon>
-                          <span>{{ 'clientLogs' | translate }}</span>
-                        </button>
-                        <button mat-menu-item (click)="openClientDiskLogsModal($event, client)">
-                          <mat-icon>storage</mat-icon>
-                          <span>{{ 'diskLogs' | translate }}</span>
-                        </button>
-                        <button mat-menu-item (click)="onDeleteClick($event, client)" *ngIf="auth.userCategory !== 'ou-minimal'">
-                          <mat-icon>delete</mat-icon>
-                          <span>{{ 'buttonDelete' | translate }}</span>
-                        </button>
-                      </mat-menu>
-                    </td>
-                  </ng-container>
-                  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-                  <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="mat-row" 
-                      [ngClass]="'status-' + row.status"
-                      [class.selected-row]="selectedClient?.uuid === row.uuid"
+              }
+              <!-- List view mejorada -->
+              @if (currentView === 'list') {
+                <div class="list-view">
+                  <div class="table-header">
+                    <div class="table-info">
+                      <span>{{ 'showingResults' | translate: { from: getPaginationFrom(), to: getPaginationTo(), total: getPaginationTotal() } }}</span>
+                    </div>
+                    <div class="table-actions">
+                      <button mat-icon-button (click)="refreshClientData()" matTooltip="{{ 'buttonUpdate' | translate }}">
+                        <mat-icon>refresh</mat-icon>
+                      </button>
+                      <button mat-icon-button (click)="exportToCSV()" matTooltip="{{ 'exportCSV' | translate }}">
+                        <mat-icon>download</mat-icon>
+                      </button>
+                    </div>
+                  </div>
+                  <section class="clients-table" tabindex="0">
+                    <table mat-table [dataSource]="selectedClients" class="mat-elevation-z8">
+                      <ng-container matColumnDef="select">
+                        <th mat-header-cell *matHeaderCellDef>
+                          <mat-checkbox (change)="$event ? toggleAllRows() : null"
+                            [checked]="selection.hasValue() && isAllSelected()"
+                            [indeterminate]="selection.hasValue() && !isAllSelected()">
+                          </mat-checkbox>
+                        </th>
+                        <td mat-cell *matCellDef="let row">
+                          <mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(row)"
+                            [checked]="selection.isSelected(row)">
+                          </mat-checkbox>
+                        </td>
+                      </ng-container>
+                      <ng-container matColumnDef="status">
+                        <th mat-header-cell *matHeaderCellDef>
+                          <div class="column-header">
+                            <span>{{ 'labelState' | translate }}</span>
+                            <button mat-icon-button (click)="sortColumn('status')" class="sort-button">
+                              <mat-icon>{{ getSortIcon('status') }}</mat-icon>
+                            </button>
+                          </div>
+                        </th>
+                        <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}"
+                          matTooltipPosition="left" matTooltipShowDelay="500">
+                          <div class="client-status-container">
+                            <img [src]="'assets/images/computer_' + client.status + '.svg'" alt="Client Icon"
+                              class="client-image" />
+                            @if (syncingClientIds.has(client.uuid)) {
+                              <span>
+                                <mat-spinner diameter="24"></mat-spinner>
+                              </span>
+                            }
+                          </div>
+                        </td>
+                      </ng-container>
+                      <ng-container matColumnDef="name">
+                        <th mat-header-cell *matHeaderCellDef>
+                          <div class="column-header">
+                            <span>{{ 'name' | translate }}</span>
+                            <button mat-icon-button (click)="sortColumn('name')" class="sort-button">
+                              <mat-icon>{{ getSortIcon('name') }}</mat-icon>
+                            </button>
+                          </div>
+                        </th>
+                        <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}"
+                          matTooltipPosition="left" matTooltipShowDelay="500">
+                          <div class="client-cell">
+                            <span class="client-name truncate-cell-wide" [matTooltip]="client.name">{{ client.name }}</span>
+                          </div>
+                        </td>
+                      </ng-container>
+                      <ng-container matColumnDef="ip">
+                        <th mat-header-cell *matHeaderCellDef>
+                          <div class="column-header">
+                            <span>{{ 'labelIpCaps' | translate }}</span>
+                            <button mat-icon-button (click)="sortColumn('ip')" class="sort-button">
+                              <mat-icon>{{ getSortIcon('ip') }}</mat-icon>
+                            </button>
+                          </div>
+                        </th>
+                        <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}"
+                          matTooltipPosition="left" matTooltipShowDelay="500">
+                          <div class="client-cell">
+                            <span class="client-ip">{{ client.ip }}</span>
+                            <span class="client-mac">{{ client.mac }}</span>
+                          </div>
+                        </td>
+                      </ng-container>
+                      <ng-container matColumnDef="firmwareType">
+                        <th mat-header-cell *matHeaderCellDef>
+                          <div class="column-header">
+                            <span>{{ 'firmwareType' | translate }}</span>
+                            <button mat-icon-button (click)="sortColumn('firmwareType')" class="sort-button">
+                              <mat-icon>{{ getSortIcon('firmwareType') }}</mat-icon>
+                            </button>
+                          </div>
+                        </th>
+                        <td mat-cell *matCellDef="let client">
+                          @if (client.firmwareType) {
+                            <mat-chip class="firmware-chip">
+                              {{ client.firmwareType }}
+                            </mat-chip>
+                          }
+                        </td>
+                      </ng-container>
+                      <ng-container matColumnDef="oglive">
+                        <th mat-header-cell *matHeaderCellDef> {{ 'ogLiveTitle' | translate }}</th>
+                        <td mat-cell *matCellDef="let client">
+                          <div class="oglive-cell">
+                            <span class="oglive-kernel">{{ client.ogLive?.kernel }}</span>
+                            <span class="oglive-date">{{ client.ogLive?.date | date }}</span>
+                          </div>
+                        </td>
+                      </ng-container>
+                      <ng-container matColumnDef="maintenace">
+                        <th mat-header-cell *matHeaderCellDef> {{ 'maintenance' | translate }} </th>
+                        <td mat-cell *matCellDef="let client"> {{ client.maintenance }} </td>
+                      </ng-container>
+                      <ng-container matColumnDef="subnet">
+                        <th mat-header-cell *matHeaderCellDef> {{ 'subnet' | translate }} </th>
+                        <td mat-cell *matCellDef="let client"> {{ client.subnet }} </td>
+                      </ng-container>
+                      <ng-container matColumnDef="pxeTemplate">
+                        <th mat-header-cell *matHeaderCellDef> {{ 'pxeTemplate' | translate }} </th>
+                        <td mat-cell *matCellDef="let client" class="truncate-cell-medium" [matTooltip]="client.pxeTemplate?.name"> {{ client.pxeTemplate?.name }} </td>
+                      </ng-container>
+                      <ng-container matColumnDef="parentName">
+                        <th mat-header-cell *matHeaderCellDef> {{ 'labelEditOrgUnitParent' | translate }} </th>
+                        <td mat-cell *matCellDef="let client" class="truncate-cell-medium" [matTooltip]="client.parentName"> {{ client.parentName }} </td>
+                      </ng-container>
+                      <ng-container matColumnDef="actions">
+                        <th mat-header-cell *matHeaderCellDef> {{ 'actions' | translate }} </th>
+                        <td mat-cell *matCellDef="let client">
+                          <div class="action-buttons">
+                            <button
+                              [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"
+                              mat-icon-button [matMenuTriggerFor]="clientMenu" color="primary" matTooltip="{{ 'moreActions' | translate }}">
+                              <mat-icon>more_vert</mat-icon>
+                            </button>
+                            <mat-menu #clientMenu="matMenu">
+                              <ng-container *ngTemplateOutlet="sharedMenuItems; context: {client: client}"></ng-container>
+                            </mat-menu>
+                            <app-execute-command [clientState]="client.status" [clientData]="[client]" [buttonType]="'icon'"
+                              [icon]="'terminal'"
+                              [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"
+                              [runScriptContext]="getRunScriptContext([client])" matTooltip="{{ 'executeCommand' | translate }}">
+                            </app-execute-command>
+                            <button mat-icon-button color="primary" (click)="onShowClientDetail($event, client)" matTooltip="{{ 'buttonViewDetails' | translate }}">
+                              <mat-icon>visibility</mat-icon>
+                            </button>
+                          </div>
+                        </td>
+                      </ng-container>
+                      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+                      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="mat-row"
+                        [ngClass]="'status-' + row.status"
+                        [class.selected-row]="selectedClient?.uuid === row.uuid"
                       (click)="selectClient(row)"></tr>
-                </table>
-              </section>
-              <mat-paginator class="list-paginator" [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page"
-                [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)">
-              </mat-paginator>
+                    </table>
+                  </section>
+                  <mat-paginator class="list-paginator" [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page"
+                    [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)">
+                  </mat-paginator>
+                </div>
+              }
             </div>
-
-          </div>
-
+          } @else {
+            @if (!initialLoading) {
+              <div class="no-clients-info">
+                <span>{{ 'noClients' | translate }}</span>
+                <mat-icon>error_outline</mat-icon>
+              </div>
+            }
+          }
           <!-- No clients view -->
-          <ng-template #noClientsTemplate>
-            <div *ngIf="!initialLoading" class="no-clients-info">
-              <span>{{ 'noClients' | translate }}</span>
-              <mat-icon>error_outline</mat-icon>
-            </div>
-          </ng-template>
         </div>
-      </div>
-
+      }
     </div>
-  </ng-template>
+  </div>
+}
+
+<!-- MAIN VIEW -->
 </div>
+
+<!-- Shared Menu Items Template -->
+<ng-template #sharedMenuItems let-client="client">
+  @if (auth.userCategory !== 'ou-minimal') {
+    <button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)">
+      <mat-icon>edit</mat-icon>
+      <span>{{ 'buttonEdit' | translate }}</span>
+    </button>
+  }
+  <button mat-menu-item (click)="onShowClientDetail($event, client)">
+    <mat-icon>visibility</mat-icon>
+    <span>{{ 'buttonViewDetails' | translate }}</span>
+  </button>
+  @if (!syncingClientIds.has(client.uuid)) {
+    <button mat-menu-item (click)="getStatus(client, selectedNode)">
+      <mat-icon>sync</mat-icon>
+      <span>{{ 'buttonSync' | translate }}</span>
+    </button>
+  }
+  <button mat-menu-item (click)="openClientTaskLogs($event, client)">
+    <mat-icon>list_alt</mat-icon>
+    <span>{{ 'procedimientosCliente' | translate }}</span>
+  </button>
+  <button mat-menu-item (click)="openClientPendingTasks($event, client)">
+    <mat-icon>pending_actions</mat-icon>
+    <span>{{ 'colaAcciones' | translate }}</span>
+  </button>
+  <button mat-menu-item (click)="openClientLogsInNewTab($event, client)">
+    <mat-icon>article</mat-icon>
+    <span>{{ 'realTimeLogs' | translate }}</span>
+  </button>
+  <button mat-menu-item (click)="openClientLogsModal($event, client)">
+    <mat-icon>analytics</mat-icon>
+    <span>{{ 'clientLogs' | translate }}</span>
+  </button>
+  <button mat-menu-item (click)="openClientDiskLogsModal($event, client)">
+    <mat-icon>storage</mat-icon>
+    <span>{{ 'diskLogs' | translate }}</span>
+  </button>
+  @if (auth.userCategory !== 'ou-minimal') {
+    <button mat-menu-item (click)="onDeleteClick($event, client)">
+      <mat-icon>delete</mat-icon>
+      <span>{{ 'buttonDelete' | translate }}</span>
+    </button>
+  }
+</ng-template>
+
+
diff --git a/ogWebconsole/src/app/components/task-logs/client-pending-tasks/client-pending-tasks.component.ts b/ogWebconsole/src/app/components/task-logs/client-pending-tasks/client-pending-tasks.component.ts
index 0eba079..b6d5d32 100644
--- a/ogWebconsole/src/app/components/task-logs/client-pending-tasks/client-pending-tasks.component.ts
+++ b/ogWebconsole/src/app/components/task-logs/client-pending-tasks/client-pending-tasks.component.ts
@@ -240,7 +240,7 @@ export class ClientPendingTasksComponent implements OnInit {
 
   openOutputModal(outputData: any): void {
     this.dialog.open(OutputDialogComponent, {
-      width: '500px',
+      width: '70vw',
       data: { input: outputData }
     });
   }
diff --git a/ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.ts b/ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.ts
index ef40cda..ec9390a 100644
--- a/ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.ts
+++ b/ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.ts
@@ -172,7 +172,7 @@ export class ClientTaskLogsComponent implements OnInit {
 
   openOutputModal(outputData: any): void {
     this.dialog.open(OutputDialogComponent, {
-      width: '500px',
+      width: '70vw',
       data: { input: outputData }
     });
   }
diff --git a/ogWebconsole/src/app/components/task-logs/task-logs.component.ts b/ogWebconsole/src/app/components/task-logs/task-logs.component.ts
index 36da5b0..1ad1bcb 100644
--- a/ogWebconsole/src/app/components/task-logs/task-logs.component.ts
+++ b/ogWebconsole/src/app/components/task-logs/task-logs.component.ts
@@ -499,7 +499,7 @@ export class TaskLogsComponent implements OnInit, OnDestroy {
 
   openOutputModal(outputData: any): void {
     this.dialog.open(OutputDialogComponent, {
-      width: '500px',
+      width: '70vw',
       data: { input: outputData }
     });
   }