From 5b7d3c72e297fa2a4b798ec02dff2791ee571ddf Mon Sep 17 00:00:00 2001
From: Manuel Aranda <maranda@qindel.com>
Date: Thu, 26 Mar 2026 18:21:57 +0100
Subject: [PATCH 01/11] refs #2903. Ux improvements

---
 ogWebconsole/src/app/app.module.ts            |  21 +-
 .../commands-task/commands-task.component.css |  61 +-
 .../commands-task.component.html              |   4 +-
 .../commands-task/commands-task.component.ts  |   3 +-
 .../create-task-schedule.component.html       |  27 +-
 .../create-task-schedule.component.ts         |  28 +
 .../create-task-script.component.css          | 662 ++++++++----------
 .../create-task-script.component.html         | 269 ++++---
 .../create-task-script.component.spec.ts      |   2 +
 .../create-task-script.component.ts           | 324 +++++----
 .../create-task/create-task.component.html    |  32 +-
 .../create-task/create-task.component.ts      |  52 +-
 .../detail-task/detail-task.component.html    |  58 +-
 .../show-task-schedule.component.css          |  23 +-
 .../show-task-schedule.component.html         |  73 +-
 .../show-task-schedule.component.ts           |   8 +
 .../show-task-script.component.css            | 131 +++-
 .../show-task-script.component.html           | 104 +--
 .../show-task-script.component.ts             |  35 +-
 .../create-image/create-image.component.css   |  32 +-
 .../create-image/create-image.component.html  | 296 ++++----
 .../deploy-image/deploy-image.component.css   | 136 ++--
 .../deploy-image/deploy-image.component.html  | 309 ++++----
 .../deploy-image/deploy-image.component.ts    |  95 ++-
 .../deploy-method-config-dialog.component.css |  51 ++
 ...deploy-method-config-dialog.component.html |  67 ++
 .../deploy-method-config-dialog.component.ts  |  93 +++
 .../partition-assistant.component.css         | 307 ++++----
 .../partition-assistant.component.html        | 135 ++--
 .../components/groups/groups.component.css    |  52 +-
 .../components/groups/groups.component.html   |  12 +-
 .../task-logs/task-logs.component.css         |  94 ++-
 .../task-logs/task-logs.component.html        |  15 +-
 .../task-logs/task-logs.component.ts          |  26 +-
 .../app/layout/header/header.component.css    |  18 +-
 .../app/layout/header/header.component.html   |  13 +-
 .../main-layout/main-layout.component.css     |   5 +-
 .../app/layout/sidebar/sidebar.component.html |   7 +
 ogWebconsole/src/locale/en.json               |  93 ++-
 ogWebconsole/src/locale/es.json               |  93 ++-
 40 files changed, 2305 insertions(+), 1561 deletions(-)
 create mode 100644 ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-method-config-dialog/deploy-method-config-dialog.component.css
 create mode 100644 ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-method-config-dialog/deploy-method-config-dialog.component.html
 create mode 100644 ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-method-config-dialog/deploy-method-config-dialog.component.ts

diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts
index 7f5df2f..e2712a2 100644
--- a/ogWebconsole/src/app/app.module.ts
+++ b/ogWebconsole/src/app/app.module.ts
@@ -1,4 +1,20 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA, LOCALE_ID, APP_INITIALIZER } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA, LOCALE_ID, APP_INITIALIZER, Injectable } from '@angular/core';
+import { MatPaginatorIntl } from '@angular/material/paginator';
+
+@Injectable()
+class SpanishPaginatorIntl extends MatPaginatorIntl {
+  override itemsPerPageLabel = 'Elementos por página:';
+  override nextPageLabel = 'Siguiente';
+  override previousPageLabel = 'Anterior';
+  override firstPageLabel = 'Primera página';
+  override lastPageLabel = 'Última página';
+  override getRangeLabel = (page: number, pageSize: number, length: number) => {
+    if (length === 0 || pageSize === 0) return `0 de ${length}`;
+    const startIndex = page * pageSize;
+    const endIndex = Math.min(startIndex + pageSize, length);
+    return `${startIndex + 1} – ${endIndex} de ${length}`;
+  };
+}
 import { ConfigService } from './services/config.service';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
@@ -106,6 +122,7 @@ import { RepositoriesComponent } from './components/repositories/repositories.co
 import { ManageRepositoryComponent } from './components/repositories/manage-repository/manage-repository.component';
 import { ExecuteCommandComponent } from './components/commands/main-commands/execute-command/execute-command.component';
 import { DeployImageComponent } from './components/groups/components/client-main-view/deploy-image/deploy-image.component';
+import { DeployMethodConfigDialogComponent } from './components/groups/components/client-main-view/deploy-image/deploy-method-config-dialog/deploy-method-config-dialog.component';
 import { MainRepositoryViewComponent } from './components/repositories/main-repository-view/main-repository-view.component';
 import { ExecuteCommandOuComponent } from './components/groups/shared/execute-command-ou/execute-command-ou.component';
 import { JoyrideModule } from 'ngx-joyride';
@@ -249,6 +266,7 @@ registerLocaleData(localeEs, 'es-ES');
     ExecuteCommandComponent,
     ExecuteCommandOuComponent,
     DeployImageComponent,
+    DeployMethodConfigDialogComponent,
     MainRepositoryViewComponent,
     EnvVarsComponent,
     MenusComponent,
@@ -360,6 +378,7 @@ registerLocaleData(localeEs, 'es-ES');
       multi: true
     },
     { provide: LOCALE_ID, useValue: 'es-ES' },
+    { provide: MatPaginatorIntl, useClass: SpanishPaginatorIntl },
     provideAnimationsAsync(),
     provideHttpClient(withInterceptorsFromDi()),
     ConfigService,
diff --git a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.css b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.css
index b215f90..25e66c5 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.css
+++ b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.css
@@ -78,7 +78,7 @@ table {
 }
 
 /* Estilos para los botones de gestión */
-.schedule-btn, .script-btn {
+.schedule-btn, .script-btn, .traces-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -114,7 +114,17 @@ table {
   box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
 }
 
-.schedule-btn mat-icon, .script-btn mat-icon {
+.traces-btn {
+  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
+  color: white;
+}
+
+.traces-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
+}
+
+.schedule-btn mat-icon, .script-btn mat-icon, .traces-btn mat-icon {
   font-size: 18px;
   width: 18px;
   height: 18px;
@@ -123,15 +133,58 @@ table {
   justify-content: center;
 }
 
-.schedule-btn span, .script-btn span {
+.schedule-btn span, .script-btn span, .traces-btn span {
   display: inline-block;
   vertical-align: middle;
   line-height: 1.2;
 }
 
+/* Indicadores de estado de trazas */
+.trace-stats {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.trace-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: white;
+  padding: 0 6px;
+  cursor: default;
+}
+
+.trace-success {
+  background-color: #4caf50;
+}
+
+.trace-in-progress {
+  background-color: #2196f3;
+}
+
+.trace-pending {
+  background-color: #ff9800;
+}
+
+.trace-failed {
+  background-color: #f44336;
+}
+
+.trace-no-data {
+  color: #999;
+  font-style: italic;
+  font-size: 13px;
+}
+
 /* Responsive para los botones */
 @media (max-width: 768px) {
-  .schedule-btn, .script-btn {
+  .schedule-btn, .script-btn, .traces-btn {
     width: 100%;
     justify-content: center;
     margin: 4px 0;
diff --git a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html
index 993c225..54f469d 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html
@@ -46,11 +46,11 @@
         <ng-container *ngIf="column.columnDef === 'management'">
           <button class="action-button schedule-btn" (click)="openShowScheduleDialog(task)">
             <mat-icon>schedule</mat-icon>
-            <span>Programaciones</span>
+            <span>{{ 'schedules' | translate }}</span>
           </button>
           <button class="action-button script-btn" (click)="openShowScriptDialog(task)">
             <mat-icon>code</mat-icon>
-            <span>Acciones</span>
+            <span>{{ 'taskActions' | translate }}</span>
           </button>
         </ng-container>
       </td>
diff --git a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.ts b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.ts
index 2d9f531..e445c50 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.ts
@@ -71,6 +71,7 @@ export class CommandsTaskComponent implements OnInit {
     );
   }
 
+
   updateDisplayedColumns(): void {
     const hasNonClientTasks = this.tasks.some(task => task.scope !== 'clients');
     
@@ -127,7 +128,7 @@ export class CommandsTaskComponent implements OnInit {
   deleteTask(task: any): void {
     this.dialog.open(DeleteModalComponent, {
       width: '300px',
-      data: { name: task.createdBy },
+      data: { name: task.name },
     }).afterClosed().subscribe((result) => {
       if (result) {
         this.http.delete(`${this.apiUrl}/${task.uuid}`).subscribe({
diff --git a/ogWebconsole/src/app/components/commands/commands-task/create-task-schedule/create-task-schedule.component.html b/ogWebconsole/src/app/components/commands/commands-task/create-task-schedule/create-task-schedule.component.html
index ac8f63f..fb61d6d 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/create-task-schedule/create-task-schedule.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/create-task-schedule/create-task-schedule.component.html
@@ -1,32 +1,32 @@
 <h2 mat-dialog-title class="dialog-title">
-  {{ data.schedule ? 'Editar' : 'Crear' }} Programación de Tarea
+  {{ (data.schedule ? 'editSchedule' : 'createSchedule') | translate }} {{ 'taskSchedule' | translate }}
 </h2>
 
 <mat-dialog-content class="dialog-content">
   <form [formGroup]="form" (ngSubmit)="onSubmit()" class="task-form">
 
     <mat-form-field appearance="fill" class="w-full">
-      <mat-label>Repetición</mat-label>
+      <mat-label>{{ 'repetition' | translate }}</mat-label>
       <mat-select formControlName="recurrenceType">
         <mat-option *ngFor="let opt of recurrenceTypes" [value]="opt.value">{{ opt.label }}</mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field appearance="fill" class="w-full" *ngIf="form.get('recurrenceType')?.value === 'none'">
-      <mat-label>Fecha de ejecución</mat-label>
+      <mat-label>{{ 'executionDate' | translate }}</mat-label>
       <input matInput [matDatepicker]="oneTimePicker" formControlName="executionDate">
       <mat-datepicker-toggle matSuffix [for]="oneTimePicker"></mat-datepicker-toggle>
       <mat-datepicker #oneTimePicker></mat-datepicker>
     </mat-form-field>
 
     <mat-form-field appearance="fill" class="w-full">
-      <mat-label>Hora de ejecución</mat-label>
+      <mat-label>{{ 'executionTime' | translate }}</mat-label>
       <input matInput formControlName="executionTime" placeholder="08:00" type="time">
-      <mat-hint>Hora en formato 24h (ej: 14:30)</mat-hint>
+      <mat-hint>{{ 'timeFormatHint' | translate }}</mat-hint>
     </mat-form-field>
 
     <div *ngIf="form.get('recurrenceType')?.value !== 'none'" class="mb-4">
-      <label class="section-label">Días de la semana:</label>
+      <label class="section-label">{{ 'weekDaysLabel' | translate }}:</label>
       <div class="weekday-toggle-group">
         <button
           *ngFor="let day of weekDays"
@@ -40,7 +40,7 @@
     </div>
 
     <div *ngIf="form.get('recurrenceType')?.value !== 'none'" >
-      <label class="section-label">Meses:</label>
+      <label class="section-label">{{ 'monthsLabel' | translate }}:</label>
       <div class="month-toggle-row" *ngFor="let row of monthRows">
         <button
           *ngFor="let month of row"
@@ -55,14 +55,14 @@
 
     <div *ngIf="form.get('recurrenceType')?.value !== 'none'" class="custom-time" formGroupName="recurrenceDetails">
       <mat-form-field appearance="fill" class="w-half">
-        <mat-label>Fecha de inicio</mat-label>
+        <mat-label>{{ 'startDate' | translate }}</mat-label>
         <input matInput [matDatepicker]="fromPicker" formControlName="initDate">
         <mat-datepicker-toggle matSuffix [for]="fromPicker"></mat-datepicker-toggle>
         <mat-datepicker #fromPicker></mat-datepicker>
       </mat-form-field>
 
       <mat-form-field appearance="fill" class="w-half">
-        <mat-label>Fecha de fin</mat-label>
+        <mat-label>{{ 'endDate' | translate }}</mat-label>
         <input matInput [matDatepicker]="toPicker" formControlName="endDate">
         <mat-datepicker-toggle matSuffix [for]="toPicker"></mat-datepicker-toggle>
         <mat-datepicker #toPicker></mat-datepicker>
@@ -71,15 +71,14 @@
 
     <mat-checkbox formControlName="enabled" class="enabled-checkbox">
       <mat-icon class="checkbox-icon">power_settings_new</mat-icon>
-      Activar programación
+      {{ 'enableSchedule' | translate }}
     </mat-checkbox>
 
-    <!-- Resumen mejorado de la programación -->
     <mat-card *ngIf="summaryText" class="summary-card">
       <mat-card-header>
         <mat-card-title class="summary-title">
           <mat-icon color="primary">info</mat-icon>
-          Resumen de la Programación
+          {{ 'scheduleSummaryTitle' | translate }}
         </mat-card-title>
       </mat-card-header>
       <mat-card-content>
@@ -90,11 +89,11 @@
           </div>
           <div class="summary-item" *ngIf="nextExecutionDate">
             <mat-icon class="summary-icon">next_plan</mat-icon>
-            <span class="summary-text">Próxima ejecución: {{ nextExecutionDate | date:'full' }}</span>
+            <span class="summary-text">{{ 'nextExecution' | translate }}: {{ nextExecutionDate | date:'full' }}</span>
           </div>
           <div class="summary-item" *ngIf="executionCount">
             <mat-icon class="summary-icon">repeat</mat-icon>
-            <span class="summary-text">Se ejecutará {{ executionCount }} veces</span>
+            <span class="summary-text">{{ 'willExecuteTimes' | translate:{ count: executionCount } }}</span>
           </div>
         </div>
       </mat-card-content>
diff --git a/ogWebconsole/src/app/components/commands/commands-task/create-task-schedule/create-task-schedule.component.ts b/ogWebconsole/src/app/components/commands/commands-task/create-task-schedule/create-task-schedule.component.ts
index 69e238b..0104241 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/create-task-schedule/create-task-schedule.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-task/create-task-schedule/create-task-schedule.component.ts
@@ -168,6 +168,34 @@ export class CreateTaskScheduleComponent implements OnInit{
   onSubmit() {
     const formData = this.form.value;
 
+    if (formData.recurrenceType === 'custom') {
+      const selectedDayNames = Object.keys(this.selectedDays).filter(day => this.selectedDays[day]);
+      const selectedMonthNames = Object.keys(this.selectedMonths).filter(month => this.selectedMonths[month]);
+
+      if (selectedDayNames.length === 0) {
+        this.toastr.error('Debe seleccionar al menos un día de la semana');
+        return;
+      }
+
+      if (selectedMonthNames.length === 0) {
+        this.toastr.error('Debe seleccionar al menos un mes');
+        return;
+      }
+
+      const initDate = formData.recurrenceDetails?.initDate;
+      const endDate = formData.recurrenceDetails?.endDate;
+
+      if (!initDate || !endDate) {
+        this.toastr.error('Debe especificar fecha de inicio y fecha de fin');
+        return;
+      }
+
+      if (new Date(endDate) <= new Date(initDate)) {
+        this.toastr.error('La fecha de fin debe ser posterior a la fecha de inicio');
+        return;
+      }
+    }
+
     const payload: any = {
       commandTask: this.data.task['@id'],
       executionDate: formData.recurrenceType === 'none' ? this.convertDateToLocalISO(formData.executionDate) : null,
diff --git a/ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.css b/ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.css
index 3fc5f7d..8ab6216 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.css
+++ b/ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.css
@@ -1,31 +1,312 @@
-
-.divider {
-  margin: 20px 0;
+.dialog-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  padding: 16px 24px;
 }
 
-table {
+.back-icon {
+  cursor: pointer;
+  color: #666;
+  transition: color 0.2s;
+}
+
+.back-icon:hover {
+  color: #1976d2;
+}
+
+.title-with-action {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* ===== Category cards ===== */
+.categories-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 8px 0;
+}
+
+.category-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 18px 20px;
+  border-radius: 10px;
+  border: 1px solid #e0e0e0;
+  border-left: 5px solid;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: #fff;
+}
+
+.category-card:hover {
+  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
+  transform: translateX(4px);
+}
+
+.category-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  flex-shrink: 0;
+}
+
+.category-icon mat-icon {
+  color: #fff;
+  font-size: 26px;
+  width: 26px;
+  height: 26px;
+}
+
+.category-info {
+  flex: 1;
+}
+
+.category-info h3 {
+  margin: 0 0 4px 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: #333;
+}
+
+.category-info p {
+  margin: 0;
+  font-size: 13px;
+  color: #777;
+}
+
+.category-arrow {
+  color: #bbb;
+  transition: transform 0.2s;
+}
+
+.category-card:hover .category-arrow {
+  transform: translateX(4px);
+  color: #666;
+}
+
+.info-icon {
+  color: #90a4ae;
+}
+
+/* ===== Info panel (for assistant-required categories) ===== */
+.info-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px 16px;
+  text-align: center;
+}
+
+.info-panel-icon .big-info-icon {
+  font-size: 56px;
+  width: 56px;
+  height: 56px;
+  margin-bottom: 16px;
+  opacity: 0.8;
+}
+
+.info-panel-content {
+  max-width: 520px;
+}
+
+.info-panel-content h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 12px 0;
+}
+
+.info-panel-content > p {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.6;
+  margin: 0 0 24px 0;
+}
+
+.info-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  text-align: left;
+  margin-bottom: 28px;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 10px;
+}
+
+.info-step {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  font-size: 14px;
+  color: #444;
+}
+
+.step-number-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: #1976d2;
+  color: #fff;
+  font-weight: 600;
+  font-size: 13px;
+  flex-shrink: 0;
+}
+
+.info-supported-ops {
+  text-align: left;
+}
+
+.info-supported-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #555;
+  margin: 0 0 10px 0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.info-op-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  margin: 4px 6px 4px 0;
+  background: #f0f4f8;
+  border-radius: 20px;
+  font-size: 13px;
+  color: #444;
+}
+
+.info-op-chip mat-icon {
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+}
+
+/* ===== Action selector within category ===== */
+.actions-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 8px 0;
+}
+
+.actions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.action-card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 16px 20px;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+  border-left: 4px solid;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: #fff;
+  font-size: 15px;
+  font-weight: 500;
+  color: #333;
+}
+
+.action-card:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transform: translateX(4px);
+}
+
+.action-card mat-icon:first-child {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+}
+
+.action-card span {
+  flex: 1;
+}
+
+/* ===== Form sections ===== */
+.action-form {
+  padding: 8px 0;
+}
+
+.order-field {
+  width: 200px;
+  margin-bottom: 16px;
+}
+
+.form-section {
+  margin-top: 8px;
+}
+
+.full-width {
   width: 100%;
-  margin-top: 50px;
 }
 
-.task-form {
-  padding: 20px;
-}
-
-.search-container  {
+.radio-row {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px;
-  box-sizing: border-box;
+  gap: 24px;
+  margin-bottom: 20px;
+  padding: 12px 16px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
 }
 
-.deploy-container {
+/* ===== System action info ===== */
+.system-action-info {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   align-items: center;
-  padding: 20px;
+  padding: 32px 16px;
+  text-align: center;
+}
+
+.system-action-info .big-icon {
+  font-size: 48px;
+  width: 48px;
+  height: 48px;
+  margin-bottom: 16px;
+}
+
+.system-action-info p {
+  color: #666;
+  font-size: 14px;
+  max-width: 400px;
+}
+
+/* ===== Script section ===== */
+.script-type-selector {
+  margin-bottom: 16px;
+}
+
+.new-command-container {
+  display: flex;
+  flex-direction: column;
   gap: 10px;
+  padding: 15px;
+  background-color: #eaeff6;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+}
+
+.new-command-container textarea {
+  font-family: monospace;
+  resize: vertical;
 }
 
 .script-container {
@@ -33,7 +314,7 @@ table {
   padding: 20px;
   background-color: #eaeff6;
   border-radius: 12px;
-  margin-top: 20px;
+  margin-top: 12px;
 }
 
 .script-content {
@@ -46,35 +327,6 @@ table {
   min-width: 35%;
 }
 
-@media (max-width: 768px) {
-  .script-container {
-    flex-direction: column;
-  }
-
-  .script-content, .script-params {
-    min-width: 100%;
-  }
-}
-
-.select-container {
-  margin-top: 20px;
-  align-items: center;
-  padding: 20px;
-  box-sizing: border-box;
-}
-
-.input-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  margin-top: 20px;
-}
-
-.input-field {
-  flex: 1 1 calc(33.33% - 16px);
-  min-width: 250px;
-}
-
 .script-preview {
   background-color: #f4f4f4;
   border: 1px solid #ccc;
@@ -85,145 +337,7 @@ table {
   min-height: 50px;
 }
 
-.custom-width {
-  width: 50%;
-  margin-bottom: 16px;
-}
-
-.search-string {
-  flex: 2;
-  padding: 5px;
-}
-
-.search-boolean {
-  flex: 1;
-  padding: 5px;
-}
-
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 10px;
-  border-bottom: 1px solid #ddd;
-}
-
-.mat-elevation-z8 {
-  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
-}
-
-.paginator-container {
-  display: flex;
-  justify-content: end;
-  margin-bottom: 30px;
-}
-
-.clients-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 8px;
-}
-
-.client-item {
-  position: relative;
-}
-
-.client-card {
-  background: #ffffff;
-  border-radius: 6px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  position: relative;
-  padding: 8px;
-  text-align: center;
-  cursor: pointer;
-  transition: background-color 0.3s, transform 0.2s;
-
-  &:hover {
-    background-color: #f0f0f0;
-    transform: scale(1.02);
-  }
-}
-
-.client-details {
-  margin-top: 4px;
-}
-
-.client-name {
-  font-size: 0.9em;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 5px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 150px;
-  display: inline-block;
-}
-
-.client-ip {
-  display: block;
-  font-size: 0.9em;
-  color: #666;
-}
-
-.header-container-title {
-  flex-grow: 1;
-  text-align: left;
-  padding-left: 1em;
-}
-
-.button-row {
-  display: flex;
-  padding-right: 1em;
-}
-
-.client-card {
-  background: #ffffff;
-  border-radius: 6px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  position: relative;
-  padding: 8px;
-  text-align: center;
-  cursor: pointer;
-  transition: background-color 0.3s, transform 0.2s;
-
-  &:hover {
-    background-color: #f0f0f0;
-    transform: scale(1.02);
-  }
-}
-
-::ng-deep .custom-tooltip {
-  white-space: pre-line !important;
-  max-width: 200px;
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
-  padding: 8px;
-  border-radius: 4px;
-}
-
-.selected-client {
-  background-color: #a0c2e5 !important;
-  color: white !important;
-}
-
-.button-row {
-  display: flex;
-  padding-right: 1em;
-}
-
-.disabled-client {
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-.action-button {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
+/* ===== Action buttons ===== */
 .action-container {
   display: flex;
   justify-content: flex-end;
@@ -231,178 +345,14 @@ table {
   padding: 1.5em;
 }
 
-.mat-expansion-panel-header-description {
-  justify-content: space-between;
-  align-items: center;
-}
-
-.new-command-container {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 15px;
-  background-color: #eaeff6;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
-  margin-top: 15px;
-}
-
-.new-command-container mat-form-field {
-  width: 100%;
-}
-
-.new-command-container textarea {
-  font-family: monospace;
-  resize: vertical;
-}
-
-.new-command-container .action-button {
-  align-self: flex-end;
-  color: white;
-  padding: 8px 16px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.full-width {
-  width: 100%;
-}
-
-.script-selector-card {
-  margin: 20px 20px;
-  padding: 16px;
-}
-
-/* Estilos para las pestañas principales */
-.action-tabs {
-  margin-top: 20px;
-}
-
-.action-tabs ::ng-deep .mat-tab-header {
-  border-bottom: 2px solid #e0e0e0;
-  margin-bottom: 20px;
-}
-
-.action-tabs ::ng-deep .mat-tab-label {
-  min-width: 160px;
-  padding: 12px 24px;
-  font-weight: 500;
-  color: #666;
-  transition: all 0.3s ease;
-}
-
-.action-tabs ::ng-deep .mat-tab-label:hover {
-  color: #1976d2;
-  background-color: rgba(25, 118, 210, 0.04);
-}
-
-.action-tabs ::ng-deep .mat-tab-label.mat-tab-label-active {
-  color: #1976d2;
-  font-weight: 600;
-}
-
-.action-tabs ::ng-deep .mat-ink-bar {
-  background-color: #1976d2;
-  height: 3px;
-}
-
-/* Contenido de las pestañas */
-.tab-content {
-  padding: 20px 0;
-}
-
-.action-description {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 24px;
-  padding: 16px;
-  background-color: #f8f9fa;
-  border-radius: 8px;
-  border-left: 4px solid #1976d2;
-}
-
-.action-description mat-icon {
-  color: #1976d2;
-  font-size: 24px;
-  width: 24px;
-  height: 24px;
-}
-
-.action-description span {
-  color: #495057;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-/* Selector de tipo de script */
-.script-type-selector {
-  margin-bottom: 24px;
-  padding: 20px;
-  background-color: #f8f9fa;
-  border-radius: 8px;
-  border: 1px solid #e9ecef;
-}
-
-.radio-group {
-  display: flex;
-  gap: 24px;
-}
-
-.radio-button {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  border-radius: 6px;
-  transition: all 0.2s ease;
-}
-
-.radio-button:hover {
-  background-color: rgba(25, 118, 210, 0.04);
-}
-
-.radio-button mat-icon {
-  color: #1976d2;
-  font-size: 20px;
-  width: 20px;
-  height: 20px;
-}
-
-/* Contenedor de acciones básicas */
-.basic-action-container {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-/* Contenedor de scripts */
-.script-options {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-/* Responsive design */
+/* ===== Responsive ===== */
 @media (max-width: 768px) {
-  .action-tabs ::ng-deep .mat-tab-label {
-    min-width: 120px;
-    padding: 8px 16px;
-    font-size: 14px;
-  }
-  
-  .radio-group {
+  .radio-row {
     flex-direction: column;
-    gap: 16px;
+    gap: 12px;
   }
-  
-  .action-description {
-    flex-direction: column;
-    text-align: center;
-    gap: 8px;
+
+  .info-steps {
+    padding: 14px;
   }
 }
-
-
diff --git a/ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.html b/ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.html
index 1715658..5b4a1c7 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.html
@@ -1,118 +1,169 @@
-<h2 mat-dialog-title class="dialog-title">Añadir acción a: {{ data.task?.name }}</h2>
+<h2 mat-dialog-title class="dialog-title">
+  <mat-icon *ngIf="selectedCategory" class="back-icon" (click)="goBackToCategories()">arrow_back</mat-icon>
+  <span *ngIf="!selectedCategory">{{ 'addActionTo' | translate }}: {{ data.commandTask?.name }}</span>
+  <span *ngIf="selectedCategory && !selectedAction && isInfoOnlyCategory()" class="title-with-action">
+    <mat-icon [style.color]="getSelectedCategoryColor()">{{ categories | keyvalue : undefined }}</mat-icon>
+    <ng-container *ngFor="let cat of categories">
+      <ng-container *ngIf="cat.id === selectedCategory">
+        <mat-icon [style.color]="cat.color">{{ cat.icon }}</mat-icon>
+        {{ cat.labelKey | translate }}
+      </ng-container>
+    </ng-container>
+  </span>
+  <span *ngIf="selectedAction" class="title-with-action">
+    <mat-icon [style.color]="getSelectedCategoryColor()">{{ getSelectedActionIcon() }}</mat-icon>
+    {{ getSelectedActionLabel() }}
+  </span>
+</h2>
 
 <mat-dialog-content class="dialog-content">
-  <div class="task-form">
-    
-    <!-- Pestañas principales -->
-    <mat-tab-group [(selectedIndex)]="selectedTabIndex" (selectedIndexChange)="onTabChange($event)" class="action-tabs">
-      
-      <!-- Pestaña de Acciones Básicas -->
-      <mat-tab label="Acciones Básicas" class="basic-tab">
-        <div class="tab-content">
-          <div class="action-description">
-            <mat-icon>power_settings_new</mat-icon>
-            <span>Selecciona una acción básica del sistema</span>
-          </div>
-          
-          <mat-form-field appearance="fill" class="full-width">
-            <mat-label>Tipo de Acción</mat-label>
-            <mat-select [(ngModel)]="selectedBasicAction" (selectionChange)="onBasicActionChange()">
-              <mat-option value="poweron">
-                <mat-icon>power</mat-icon> Encender Equipo
-              </mat-option>
-              <mat-option value="shutdown">
-                <mat-icon>power_off</mat-icon> Apagar Equipo
-              </mat-option>
-              <mat-option value="reboot">
-                <mat-icon>restart_alt</mat-icon> Reiniciar Equipo
-              </mat-option>
-              <mat-option value="login">
-                <mat-icon>login</mat-icon> Iniciar Sesión
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
 
-          <mat-form-field appearance="fill" class="custom-width">
-            <mat-label>Orden de ejecución</mat-label>
-            <input matInput type="number" [(ngModel)]="executionOrder" placeholder="Orden de ejecución">
-          </mat-form-field>
-        </div>
-      </mat-tab>
-
-      <!-- Pestaña de Scripts -->
-      <mat-tab label="Ejecutar Script" class="script-tab">
-        <div class="tab-content">
-          <div class="action-description">
-            <mat-icon>code</mat-icon>
-            <span>Ejecuta un script personalizado o crea uno nuevo</span>
-          </div>
-          
-          <!-- Opciones de script -->
-          <div class="script-options">
-            <div class="script-type-selector">
-              <mat-radio-group [(ngModel)]="commandType" class="radio-group">
-                <mat-radio-button value="new" class="radio-button">
-                  <mat-icon>edit</mat-icon> Nuevo Script
-                </mat-radio-button>
-                <mat-radio-button value="existing" class="radio-button">
-                  <mat-icon>storage</mat-icon> Script Guardado
-                </mat-radio-button>
-              </mat-radio-group>
-            </div>
-
-            <!-- Nuevo Script -->
-            <div *ngIf="commandType === 'new'" class="new-command-container">
-              <mat-form-field appearance="fill" class="custom-width">
-                <mat-label>Orden de ejecución</mat-label>
-                <input matInput type="number" [(ngModel)]="executionOrder" placeholder="Orden de ejecución">
-              </mat-form-field>
-              <mat-form-field appearance="fill" class="full-width">
-                <mat-label>Ingrese el script</mat-label>
-                <textarea matInput [(ngModel)]="newScript" rows="6" placeholder="Escriba su script aquí"></textarea>
-              </mat-form-field>
-              <button mat-flat-button color="primary" (click)="saveNewScript()">Guardar Script</button>
-            </div>
-
-            <!-- Script Existente -->
-            <div *ngIf="commandType === 'existing'">
-              <mat-form-field appearance="fill" class="custom-width">
-                <mat-label>Seleccione script a ejecutar</mat-label>
-                <mat-select [(ngModel)]="selectedScript" (selectionChange)="onScriptChange()">
-                  <mat-option *ngFor="let script of scripts" [value]="script">{{ script.name }}</mat-option>
-                </mat-select>
-              </mat-form-field>
-            </div>
-
-            <!-- Detalles del Script -->
-            <div *ngIf="selectedScript && commandType === 'existing'" class="script-container">
-              <mat-form-field appearance="fill" class="custom-width">
-                <mat-label>Orden de ejecución</mat-label>
-                <input matInput type="number" [(ngModel)]="executionOrder" placeholder="Orden de ejecución">
-              </mat-form-field>
-
-              <div class="script-content">
-                <h3>Script:</h3>
-                <div class="script-preview" [innerHTML]="scriptContent"></div>
-              </div>
-
-              <div class="script-params" *ngIf="parameterNames.length > 0">
-                <h3>Ingrese los parámetros:</h3>
-                <div *ngFor="let paramName of parameterNames">
-                  <mat-form-field appearance="fill" class="full-width">
-                    <mat-label>{{ paramName }}</mat-label>
-                    <input matInput [ngModel]="parameters[paramName]" (ngModelChange)="onParamChange(paramName, $event)" placeholder="Valor para {{ paramName }}">
-                  </mat-form-field>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </mat-tab>
-    </mat-tab-group>
+  <!-- PASO 1: Selector de categorías -->
+  <div *ngIf="!selectedCategory" class="categories-grid">
+    <div *ngFor="let category of categories"
+         class="category-card"
+         [style.border-left-color]="category.color"
+         (click)="selectCategory(category.id)">
+      <div class="category-icon" [style.background-color]="category.color">
+        <mat-icon>{{ category.icon }}</mat-icon>
+      </div>
+      <div class="category-info">
+        <h3>{{ category.labelKey | translate }}</h3>
+        <p>{{ category.descriptionKey | translate }}</p>
+      </div>
+      <mat-icon class="category-arrow" *ngIf="!category.infoOnly">chevron_right</mat-icon>
+      <mat-icon class="category-arrow info-icon" *ngIf="category.infoOnly">info_outline</mat-icon>
+    </div>
   </div>
+
+  <!-- PANEL INFORMATIVO: categorías que requieren contexto de equipo -->
+  <div *ngIf="selectedCategory && isInfoOnlyCategory()" class="info-panel">
+    <div class="info-panel-icon">
+      <ng-container *ngFor="let cat of categories">
+        <mat-icon *ngIf="cat.id === selectedCategory" [style.color]="cat.color" class="big-info-icon">{{ cat.icon }}</mat-icon>
+      </ng-container>
+    </div>
+
+    <div class="info-panel-content">
+      <h3>{{ 'assistantRequiredTitle' | translate }}</h3>
+      <p>{{ 'assistantRequiredDesc' | translate }}</p>
+
+      <div class="info-steps">
+        <div class="info-step">
+          <div class="step-number-badge">1</div>
+          <span>{{ 'assistantStep1' | translate }}</span>
+        </div>
+        <div class="info-step">
+          <div class="step-number-badge">2</div>
+          <span>{{ 'assistantStep2' | translate }}</span>
+        </div>
+        <div class="info-step">
+          <div class="step-number-badge">3</div>
+          <span>{{ 'assistantStep3' | translate }}</span>
+        </div>
+      </div>
+
+      <div class="info-supported-ops">
+        <p class="info-supported-label">{{ 'supportedOpsLabel' | translate }}:</p>
+        <ng-container *ngFor="let cat of categories">
+          <ng-container *ngIf="cat.id === selectedCategory">
+            <div *ngFor="let action of cat.actions" class="info-op-chip">
+              <mat-icon [style.color]="cat.color">{{ action.icon }}</mat-icon>
+              <span>{{ action.labelKey | translate }}</span>
+            </div>
+          </ng-container>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+
+  <!-- PASO 2: Selector de acción dentro de categoría (solo si tiene >1 acción y no es infoOnly) -->
+  <div *ngIf="selectedCategory && !selectedAction && !isInfoOnlyCategory()" class="actions-grid">
+    <div class="actions-list">
+      <ng-container *ngFor="let category of categories">
+        <ng-container *ngIf="category.id === selectedCategory">
+          <div *ngFor="let action of category.actions"
+               class="action-card"
+               [style.border-left-color]="category.color"
+               (click)="selectAction(action.type)">
+            <mat-icon [style.color]="category.color">{{ action.icon }}</mat-icon>
+            <span>{{ action.labelKey | translate }}</span>
+            <mat-icon class="category-arrow">chevron_right</mat-icon>
+          </div>
+        </ng-container>
+      </ng-container>
+    </div>
+  </div>
+
+  <!-- PASO 3: Formulario según acción seleccionada -->
+  <div *ngIf="selectedAction" class="action-form">
+
+    <!-- Orden de ejecución (común a todas) -->
+    <mat-form-field appearance="fill" class="order-field">
+      <mat-label>{{ 'executionOrder' | translate }}</mat-label>
+      <input matInput type="number" [(ngModel)]="executionOrder" min="0">
+    </mat-form-field>
+
+    <!-- ========== SYSTEM CONTROL (power-on, shutdown, reboot, login) ========== -->
+    <div *ngIf="selectedAction === 'power-on' || selectedAction === 'shutdown' || selectedAction === 'reboot' || selectedAction === 'login'"
+         class="form-section system-info">
+      <div class="system-action-info">
+        <mat-icon [style.color]="getSelectedCategoryColor()" class="big-icon">{{ getSelectedActionIcon() }}</mat-icon>
+        <p>{{ 'systemActionHint' | translate }}</p>
+      </div>
+    </div>
+
+    <!-- ========== RUN SCRIPT ========== -->
+    <div *ngIf="selectedAction === 'run-script'" class="form-section">
+      <div class="script-type-selector">
+        <mat-radio-group [(ngModel)]="commandType" class="radio-row">
+          <mat-radio-button value="new">
+            <mat-icon>edit</mat-icon> {{ 'newScript' | translate }}
+          </mat-radio-button>
+          <mat-radio-button value="existing">
+            <mat-icon>storage</mat-icon> {{ 'savedScript' | translate }}
+          </mat-radio-button>
+        </mat-radio-group>
+      </div>
+
+      <div *ngIf="commandType === 'new'" class="new-command-container">
+        <mat-form-field appearance="fill" class="full-width">
+          <mat-label>{{ 'enterScript' | translate }}</mat-label>
+          <textarea matInput [(ngModel)]="newScript" rows="6" [placeholder]="'writeScriptHere' | translate"></textarea>
+        </mat-form-field>
+        <button mat-flat-button color="primary" (click)="saveNewScript()">{{ 'saveScript' | translate }}</button>
+      </div>
+
+      <div *ngIf="commandType === 'existing'">
+        <mat-form-field appearance="fill" class="full-width">
+          <mat-label>{{ 'selectScriptToRun' | translate }}</mat-label>
+          <mat-select [(ngModel)]="selectedScript" (selectionChange)="onScriptChange()">
+            <mat-option *ngFor="let script of scripts" [value]="script">{{ script.name }}</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+
+      <div *ngIf="selectedScript && commandType === 'existing'" class="script-container">
+        <div class="script-content">
+          <h3>{{ 'scriptLabel' | translate }}:</h3>
+          <div class="script-preview" [innerHTML]="scriptContent"></div>
+        </div>
+        <div class="script-params" *ngIf="parameterNames.length > 0">
+          <h3>{{ 'enterParameters' | translate }}:</h3>
+          <div *ngFor="let paramName of parameterNames">
+            <mat-form-field appearance="fill" class="full-width">
+              <mat-label>{{ paramName }}</mat-label>
+              <input matInput [ngModel]="parameters[paramName]" (ngModelChange)="onParamChange(paramName, $event)" [placeholder]="('valueFor' | translate) + ' ' + paramName">
+            </mat-form-field>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
 </mat-dialog-content>
 
 <mat-dialog-actions class="action-container">
   <button class="ordinary-button" (click)="onCancel()">{{ 'buttonCancel' | translate }}</button>
-  <button class="submit-button" (click)="onSubmit()" >{{ 'buttonSave' | translate }}</button>
+  <button class="submit-button" (click)="onSubmit()" *ngIf="selectedAction">{{ 'buttonSave' | translate }}</button>
 </mat-dialog-actions>
diff --git a/ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.spec.ts b/ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.spec.ts
index 7c6c1de..a35af98 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.spec.ts
+++ b/ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.spec.ts
@@ -31,6 +31,7 @@ import {ConfigService} from "@services/config.service";
 import {ActivatedRoute} from "@angular/router";
 import {MatButtonToggleModule} from "@angular/material/button-toggle";
 import {MatRadioModule} from "@angular/material/radio";
+import {MatCheckboxModule} from "@angular/material/checkbox";
 
 describe('CreateTaskScriptComponent', () => {
   let component: CreateTaskScriptComponent;
@@ -68,6 +69,7 @@ describe('CreateTaskScriptComponent', () => {
         MatMenuModule,
         MatButtonToggleModule,
         MatRadioModule,
+        MatCheckboxModule,
         MatTreeModule,
         TranslateModule.forRoot(),
         JoyrideModule.forRoot(),
diff --git a/ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.ts b/ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.ts
index d96ec4c..3f99b43 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.ts
@@ -9,6 +9,23 @@ import {
   SaveScriptComponent
 } from "../../../groups/components/client-main-view/run-script-assistant/save-script/save-script.component";
 import {FormBuilder, FormGroup} from "@angular/forms";
+import {TranslateService} from "@ngx-translate/core";
+
+interface ActionCategory {
+  id: string;
+  icon: string;
+  labelKey: string;
+  descriptionKey: string;
+  color: string;
+  infoOnly: boolean;
+  actions: ActionOption[];
+}
+
+interface ActionOption {
+  type: string;
+  icon: string;
+  labelKey: string;
+}
 
 @Component({
   selector: 'app-create-task-script',
@@ -19,20 +36,72 @@ export class CreateTaskScriptComponent implements OnInit {
   form: FormGroup;
   baseUrl: string;
   @Output() dataChange = new EventEmitter<any>();
-  errorMessage = '';
   loading: boolean = false;
   scripts: any[] = [];
   scriptContent: string = "";
   parameters: any = {};
-  selectedTabIndex: number = 0;
-  selectedBasicAction: string = '';
   commandType: string = 'existing';
   selectedScript: any = null;
   newScript: string = '';
-  executionOrder: Number = 0;
+  executionOrder: number = 0;
   selection = new SelectionModel(true, []);
   parameterNames: string[] = Object.keys(this.parameters);
   commandTask: any;
+
+  selectedCategory: string = '';
+  selectedAction: string = '';
+
+  categories: ActionCategory[] = [
+    {
+      id: 'image-ops',
+      icon: 'perm_media',
+      labelKey: 'catImageOps',
+      descriptionKey: 'catImageOpsDesc',
+      color: '#1565c0',
+      infoOnly: true,
+      actions: [
+        { type: 'deploy-image', icon: 'cloud_download', labelKey: 'deployImage' },
+        { type: 'create-image', icon: 'add_photo_alternate', labelKey: 'createImage' },
+      ]
+    },
+    {
+      id: 'partition',
+      icon: 'storage',
+      labelKey: 'catPartition',
+      descriptionKey: 'catPartitionDesc',
+      color: '#2e7d32',
+      infoOnly: true,
+      actions: [
+        { type: 'partition-assistant', icon: 'view_column', labelKey: 'partitionAndFormat' },
+      ]
+    },
+    {
+      id: 'system',
+      icon: 'settings_power',
+      labelKey: 'catSystemControl',
+      descriptionKey: 'catSystemControlDesc',
+      color: '#e65100',
+      infoOnly: false,
+      actions: [
+        { type: 'power-on', icon: 'power', labelKey: 'powerOnDevice' },
+        { type: 'shutdown', icon: 'power_off', labelKey: 'shutdownDevice' },
+        { type: 'reboot', icon: 'restart_alt', labelKey: 'rebootDevice' },
+        { type: 'login', icon: 'login', labelKey: 'loginSession' },
+      ]
+    },
+    {
+      id: 'script',
+      icon: 'code',
+      labelKey: 'catCustomScript',
+      descriptionKey: 'catCustomScriptDesc',
+      color: '#6a1b9a',
+      infoOnly: false,
+      actions: [
+        { type: 'run-script', icon: 'terminal', labelKey: 'runScript' },
+      ]
+    }
+  ];
+
   constructor(
     private fb: FormBuilder,
     private http: HttpClient,
@@ -42,25 +111,56 @@ export class CreateTaskScriptComponent implements OnInit {
     private router: Router,
     private dialog: MatDialog,
     private route: ActivatedRoute,
+    private translate: TranslateService,
     @Inject(MAT_DIALOG_DATA) public data: any
   ) {
     this.baseUrl = this.configService.apiUrl;
     this.commandTask = this.data.commandTask;
-    
-    this.loadScripts()
+
+    this.loadScripts();
     this.form = this.fb.group({
       content: [''],
       order: [''],
-    })
+    });
   }
 
-  ngOnInit(): void {
+  ngOnInit(): void {}
 
+  selectCategory(categoryId: string): void {
+    const cat = this.categories.find(c => c.id === categoryId);
+    if (cat?.infoOnly) {
+      this.selectedCategory = categoryId;
+      this.selectedAction = '';
+      return;
+    }
+    this.selectedCategory = categoryId;
+    if (cat && cat.actions.length === 1) {
+      this.selectAction(cat.actions[0].type);
+    } else {
+      this.selectedAction = '';
+    }
+  }
+
+  selectAction(actionType: string): void {
+    this.selectedAction = actionType;
+  }
+
+  goBackToCategories(): void {
+    this.selectedCategory = '';
+    this.selectedAction = '';
+  }
+
+  goBackToActions(): void {
+    this.selectedAction = '';
+  }
+
+  isInfoOnlyCategory(): boolean {
+    const cat = this.categories.find(c => c.id === this.selectedCategory);
+    return cat?.infoOnly || false;
   }
 
   loadScripts(): void {
     this.loading = true;
-
     this.http.get(`${this.baseUrl}/commands?readOnly=false&enabled=true`).subscribe((data: any) => {
       this.scripts = data['hydra:member'];
       this.loading = false;
@@ -70,75 +170,16 @@ export class CreateTaskScriptComponent implements OnInit {
     });
   }
 
-  onTabChange(index: number): void {
-    this.selectedTabIndex = index;
-    if (index === 0) {
-      this.selectedBasicAction = '';
-    } else {
-      this.selectedScript = null;
-      this.newScript = '';
-    }
-  }
-
-  onBasicActionChange(): void {
-    this.parameters = {};
-    this.parameterNames = Object.keys(this.parameters);
-  }
-
-  getBasicActionType(): string {
-    const actionMap: { [key: string]: string } = {
-      'poweron': 'POWER-ON',
-      'shutdown': 'SHUTDOWN',
-      'reboot': 'REBOOT',
-      'login': 'LOGIN',
-    };
-
-    return actionMap[this.selectedBasicAction] || '';
-  }
-
-  validateBasicAction(): boolean {
-    if (!this.selectedBasicAction) {
-      this.toastService.error('Debe seleccionar un tipo de acción');
-      return false;
-    }
-
-    if (this.executionOrder === null || this.executionOrder === undefined) {
-      this.toastService.error('Debe especificar el orden de ejecución');
-      return false;
-    }
-
-    return true;
-  }
-
-  saveNewScript() {
-    if (!this.newScript.trim()) {
-      this.toastService.error('Debe ingresar un script antes de guardar.');
-      return;
-    }
-    const dialogRef = this.dialog.open(SaveScriptComponent, {
-      width: '400px',
-      data: this.newScript
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.toastService.success('Script guardado correctamente');
-      }
-    });
-  }
-
-  onScriptChange() {
+  onScriptChange(): void {
     if (this.selectedScript) {
       this.scriptContent = this.selectedScript.script;
 
       const matches = this.scriptContent.match(/@(\w+)/g) || [];
-      const uniqueParams = Array.from(new Set(matches.map(m => m.slice(1))));
+      const uniqueParams = Array.from(new Set(matches.map((m: string) => m.slice(1))));
 
       this.parameters = {};
       uniqueParams.forEach(param => this.parameters[param] = '');
-
       this.parameterNames = uniqueParams;
-
       this.updateScript();
     }
   }
@@ -150,16 +191,82 @@ export class CreateTaskScriptComponent implements OnInit {
 
   updateScript(): void {
     let updatedScript = this.selectedScript.script;
-
     for (const [key, value] of Object.entries(this.parameters)) {
       const regex = new RegExp(`@${key}\\b`, 'g');
       updatedScript = updatedScript.replace(regex, value || `@${key}`);
     }
-
     this.scriptContent = updatedScript;
   }
 
-  validateScript(): boolean {
+  saveNewScript(): void {
+    if (!this.newScript.trim()) {
+      this.toastService.error('Debe ingresar un script antes de guardar.');
+      return;
+    }
+    const dialogRef = this.dialog.open(SaveScriptComponent, {
+      width: '400px',
+      data: this.newScript
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.toastService.success('Script guardado correctamente');
+      }
+    });
+  }
+
+  onSubmit(): void {
+    if (!this.selectedAction) {
+      this.toastService.error(this.translate.instant('selectActionTypeError'));
+      return;
+    }
+
+    if (this.executionOrder === null || this.executionOrder === undefined) {
+      this.toastService.error(this.translate.instant('executionOrderRequired'));
+      return;
+    }
+
+    let type = '';
+    let content = '';
+
+    switch (this.selectedAction) {
+      case 'run-script':
+        if (!this.validateScript()) return;
+        type = 'run-script';
+        content = this.commandType === 'existing' ? this.scriptContent : this.newScript;
+        break;
+
+      case 'power-on':
+      case 'shutdown':
+      case 'reboot':
+      case 'login':
+        type = this.selectedAction;
+        content = this.selectedAction;
+        break;
+
+      default:
+        this.toastService.error('Tipo de acción no reconocido');
+        return;
+    }
+
+    const payload: any = {
+      commandTask: this.commandTask['@id'],
+      content: content,
+      order: this.executionOrder,
+      type: type,
+    };
+
+    this.http.post(`${this.baseUrl}/command-task-scripts`, payload).subscribe({
+      next: () => {
+        this.toastService.success(this.translate.instant('actionAddedSuccess'));
+        this.dialogRef.close(true);
+      },
+      error: (error) => {
+        this.toastService.error(error.error['hydra:description']);
+      }
+    });
+  }
+
+  private validateScript(): boolean {
     if (this.commandType === 'new') {
       if (!this.newScript.trim()) {
         this.toastService.error('Debe ingresar un script');
@@ -171,60 +278,31 @@ export class CreateTaskScriptComponent implements OnInit {
         return false;
       }
     }
-
-    if (this.executionOrder === null || this.executionOrder === undefined) {
-      this.toastService.error('Debe especificar el orden de ejecución');
-      return false;
-    }
-
     return true;
   }
 
-  onSubmit() {
-    let isValid = false;
-    let content = '';
-    let type = '';
-
-    if (this.selectedTabIndex === 0) { 
-      isValid = this.validateBasicAction();
-      if (isValid) {
-        content = this.getBasicActionType();
-        type = 'basic-action';
-      }
-    } else { // Pestaña de scripts
-      isValid = this.validateScript();
-      if (isValid) {
-        content = this.commandType === 'existing' ? this.scriptContent : this.newScript;
-        type = 'run-script';
-      }
-    }
-
-    if (!isValid) {
-      return;
-    }
-
-    if (!this.data) {
-      this.toastService.error('Error: No se recibieron datos del diálogo');
-      return;
-    }
-
-    this.http.post(`${this.baseUrl}/command-task-scripts`, {
-      commandTask: this.commandTask['@id'],
-      content: content,
-      order: this.executionOrder,
-      type: this.selectedBasicAction,
-    }).subscribe({
-      next: () => {
-        this.toastService.success('Tarea creada con éxito');
-        this.dialogRef.close(true);
-      },
-      error: (error) => {
-        this.toastService.error(error.error['hydra:description']);
-      }
-    })
-  }
-
   onCancel(): void {
     this.dialogRef.close(false);
   }
+
+  getSelectedCategoryColor(): string {
+    const cat = this.categories.find(c => c.id === this.selectedCategory);
+    return cat?.color || '#1976d2';
+  }
+
+  getSelectedActionLabel(): string {
+    for (const cat of this.categories) {
+      const action = cat.actions.find(a => a.type === this.selectedAction);
+      if (action) return this.translate.instant(action.labelKey);
+    }
+    return '';
+  }
+
+  getSelectedActionIcon(): string {
+    for (const cat of this.categories) {
+      const action = cat.actions.find(a => a.type === this.selectedAction);
+      if (action) return action.icon;
+    }
+    return '';
+  }
 }
diff --git a/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.html b/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.html
index 1c50316..0e0600a 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.html
@@ -9,32 +9,32 @@
     <mat-button-toggle-group *ngIf="data?.source === 'assistant'" [(ngModel)]="taskMode" class="task-mode-selection" name="taskMode" appearance="standard">
       <mat-button-toggle value="create">
         <mat-icon>add_task</mat-icon>
-        Crear tarea
+        {{ 'createTaskLabel' | translate }}
       </mat-button-toggle>
       <mat-button-toggle value="add">
         <mat-icon>playlist_add</mat-icon>
-        Introducir en tarea existente
+        {{ 'addToExistingTask' | translate }}
       </mat-button-toggle>
     </mat-button-toggle-group>
   </div>
 
   <div *ngIf="taskMode === 'add'" class="select-task">
     <mat-form-field appearance="fill" class="full-width">
-      <mat-label>Seleccione una tarea</mat-label>
+      <mat-label>{{ 'selectTask' | translate }}</mat-label>
       <mat-select [(ngModel)]="selectedExistingTask" name="existingTask">
         <mat-option *ngFor="let task of existingTasks" [value]="task">{{ task.name }}</mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field appearance="fill" class="full-width">
-      <mat-label>Orden de ejecución</mat-label>
+      <mat-label>{{ 'executionOrder' | translate }}</mat-label>
       <input
         matInput
         type="number"
         [(ngModel)]="executionOrder"
         name="executionOrder"
         min="1"
-        placeholder="Introduce el orden"
+        [placeholder]="'enterOrder' | translate"
       >
     </mat-form-field>
   </div>
@@ -42,30 +42,30 @@
   <form *ngIf="taskMode === 'create' && taskForm && !loading" [formGroup]="taskForm" class="task-form">
     <mat-form-field appearance="fill" class="full-width">
       <mat-label>{{ 'nameLabel' | translate }}</mat-label>
-      <input matInput formControlName="name" placeholder="{{ 'nameLabel' | translate }}">
+      <input matInput formControlName="name" [placeholder]="'nameLabel' | translate">
       <mat-error *ngIf="taskForm.get('name')?.invalid">{{ 'requiredFieldError' | translate }}</mat-error>
     </mat-form-field>
 
     <mat-form-field appearance="fill" class="full-width">
       <mat-label>{{ 'notesLabel' | translate }}</mat-label>
-      <textarea matInput formControlName="notes" placeholder="{{ 'notesPlaceholder' | translate }}"></textarea>
+      <textarea matInput formControlName="notes" [placeholder]="'notesPlaceholder' | translate"></textarea>
     </mat-form-field>
 
     <mat-checkbox *ngIf="!editing" formControlName="scheduleAfterCreate" class="schedule-checkbox">
-      ¿Quieres programar la tarea al finalizar su creación?
+      {{ 'scheduleAfterCreate' | translate }}
     </mat-checkbox>
 
     <mat-divider style="margin: 15px 0;"></mat-divider>
 
     <mat-form-field appearance="fill" class="full-width">
-      <mat-label>Ámbito</mat-label>
+      <mat-label>{{ 'scopeLabel' | translate }}</mat-label>
       <mat-select formControlName="scope" (selectionChange)="onScopeChange($event.value)" 
                   [disabled]="data?.clients && data.clients.length >= 1">
-        <mat-option value="organizational-unit">Unidad Organizativa</mat-option>
-        <mat-option value="classrooms-group">Grupo de aulas</mat-option>
-        <mat-option value="classroom">Aulas</mat-option>
-        <mat-option value="clients-group">Grupos de clientes</mat-option>
-        <mat-option value="clients">Clientes</mat-option>
+        <mat-option value="organizational-unit">{{ 'scopeOrganizationalUnit' | translate }}</mat-option>
+        <mat-option value="classrooms-group">{{ 'scopeClassroomsGroup' | translate }}</mat-option>
+        <mat-option value="classroom">{{ 'scopeClassroom' | translate }}</mat-option>
+        <mat-option value="clients-group">{{ 'scopeClientsGroup' | translate }}</mat-option>
+        <mat-option value="clients">{{ 'scopeClients' | translate }}</mat-option>
       </mat-select>
     </mat-form-field>
 
@@ -80,11 +80,11 @@
     </mat-form-field>
 
     <div *ngIf="taskForm.get('scope')?.value === 'clients'" class="clients-selection">
-      <h4>Clientes seleccionados</h4>
+      <h4>{{ 'selectedClients' | translate }}</h4>
       
       <div *ngIf="data?.selectedClients && data.selectedClients.length > 0" class="pre-selected-info">
         <mat-icon>info</mat-icon>
-        <span>Los clientes han sido pre-seleccionados desde el componente de despliegue de imágenes.</span>
+        <span>{{ 'preSelectedInfo' | translate }}</span>
       </div>
       
       <div class="clients-list">
diff --git a/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.ts b/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.ts
index 9a12fb0..d697a52 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.ts
@@ -7,6 +7,7 @@ import { ConfigService } from '@services/config.service';
 import {of} from "rxjs";
 import {startWith, switchMap} from "rxjs/operators";
 import {CreateTaskScheduleComponent} from "../create-task-schedule/create-task-schedule.component";
+import {ShowTaskScriptComponent} from "../show-task-script/show-task-script.component";
 
 @Component({
   selector: 'app-create-task',
@@ -291,17 +292,12 @@ export class CreateTaskComponent implements OnInit {
         next: response => {
           this.toastr.success('Tarea creada con éxito');
           this.dialogRef.close(response);
-          if (formData.scheduleAfterCreate) {
-            const dialogRef = this.dialog.open(CreateTaskScheduleComponent, {
-              width: '800px',
-              data: { task: response }
-            });
-
-            dialogRef.afterClosed().subscribe(result => {
-              if (result) {
-                this.toastr.success('Tarea programada correctamente');
-              }
-            });
+          if (this.data?.source === 'assistant') {
+            if (formData.scheduleAfterCreate) {
+              this.openScheduleDialog(response);
+            }
+          } else {
+            this.openPostCreationFlow(response, formData.scheduleAfterCreate);
           }
         },
         error: () => {
@@ -311,6 +307,40 @@ export class CreateTaskComponent implements OnInit {
     }
   }
 
+  private openScheduleDialog(task: any): void {
+    this.dialog.open(CreateTaskScheduleComponent, {
+      width: '800px',
+      data: { task: task }
+    }).afterClosed().subscribe(result => {
+      if (result) {
+        this.toastr.success('Tarea programada correctamente');
+      }
+    });
+  }
+
+  private openPostCreationFlow(task: any, scheduleAfterCreate: boolean): void {
+    const actionsDialog = this.dialog.open(ShowTaskScriptComponent, {
+      width: '85vw',
+      height: '85vh',
+      maxWidth: '85vw',
+      maxHeight: '85vh',
+      data: { commandTask: task }
+    });
+
+    actionsDialog.afterClosed().subscribe(() => {
+      if (scheduleAfterCreate) {
+        this.dialog.open(CreateTaskScheduleComponent, {
+          width: '800px',
+          data: { task: task }
+        }).afterClosed().subscribe(result => {
+          if (result) {
+            this.toastr.success('Tarea programada correctamente');
+          }
+        });
+      }
+    });
+  }
+
   close(): void {
     this.dialogRef.close(false);
   }
diff --git a/ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.html b/ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.html
index 4217141..3a1cb86 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.html
@@ -8,48 +8,40 @@
 
     <mat-card-content>
       <p><strong>{{ 'taskId' | translate }}:</strong> {{ task.uuid }}</p>
-      <p><strong>{{ 'status' | translate }}:</strong> {{ task.status }}</p>
       <p><strong>{{ 'creationDate' | translate }}:</strong> {{ task.createdAt | date: 'short' }}</p>
       <p><strong>{{ 'notes' | translate }}:</strong> {{ task.notes }}</p>
-      
-      <h3>{{ 'includedCommandGroups' | translate }}</h3>
-      <table mat-table [dataSource]="task.commandGroups" class="mat-elevation-z8">
-        <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef> {{ 'commandGroupColumn' | translate }} </th>
-          <td mat-cell *matCellDef="let group"> {{ group.name }} </td>
-        </ng-container>
-
-        <ng-container matColumnDef="uuid">
-          <th mat-header-cell *matHeaderCellDef> UUID </th>
-          <td mat-cell *matCellDef="let group"> {{ group.uuid }} </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="['name', 'uuid']"></tr>
-        <tr mat-row *matRowDef="let row; columns: ['name', 'uuid'];"></tr>
-      </table>
 
       <h3>{{ 'commandsToExecute' | translate }}</h3>
-      <div *ngFor="let group of task.commandGroups">
-        <p><strong>{{ 'group' | translate }}: </strong>{{ group.name }}</p>
-        <table mat-table [dataSource]="group.commands" class="mat-elevation-z8">
-          <ng-container matColumnDef="commandName">
-            <th mat-header-cell *matHeaderCellDef> {{ 'commandColumn' | translate }} </th>
-            <td mat-cell *matCellDef="let command"> {{ command.name }} </td>
-          </ng-container>
+      <table mat-table [dataSource]="task.commandTaskScripts || []" class="mat-elevation-z8" *ngIf="task.commandTaskScripts?.length > 0">
+        <ng-container matColumnDef="order">
+          <th mat-header-cell *matHeaderCellDef>Orden</th>
+          <td mat-cell *matCellDef="let script">{{ script.order }}</td>
+        </ng-container>
 
-          <ng-container matColumnDef="commandUuid">
-            <th mat-header-cell *matHeaderCellDef> UUID </th>
-            <td mat-cell *matCellDef="let command"> {{ command.uuid }} </td>
-          </ng-container>
+        <ng-container matColumnDef="type">
+          <th mat-header-cell *matHeaderCellDef>Tipo</th>
+          <td mat-cell *matCellDef="let script">{{ script.type }}</td>
+        </ng-container>
 
-          <tr mat-header-row *matHeaderRowDef="['commandName', 'commandUuid']"></tr>
-          <tr mat-row *matRowDef="let row; columns: ['commandName', 'commandUuid'];"></tr>
-        </table>
-      </div>
+        <ng-container matColumnDef="content">
+          <th mat-header-cell *matHeaderCellDef>Contenido</th>
+          <td mat-cell *matCellDef="let script">
+            <span *ngIf="script.content">{{ script.content }}</span>
+            <span *ngIf="!script.content && script.parameters">
+              (parámetros configurados)
+            </span>
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="['order', 'type', 'content']"></tr>
+        <tr mat-row *matRowDef="let row; columns: ['order', 'type', 'content'];"></tr>
+      </table>
+
+      <p *ngIf="!task.commandTaskScripts?.length">No hay acciones configuradas.</p>
     </mat-card-content>
   </mat-card>
 
   <div class="task-actions">
-    <button class="ordinary-button" (click)="closeDialog()">Cancel</button>
+    <button class="ordinary-button" (click)="closeDialog()">{{ 'buttonCancel' | translate }}</button>
   </div>
 </div>
diff --git a/ogWebconsole/src/app/components/commands/commands-task/show-task-schedule/show-task-schedule.component.css b/ogWebconsole/src/app/components/commands/commands-task/show-task-schedule/show-task-schedule.component.css
index 70bff3e..6a1437a 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/show-task-schedule/show-task-schedule.component.css
+++ b/ogWebconsole/src/app/components/commands/commands-task/show-task-schedule/show-task-schedule.component.css
@@ -89,7 +89,6 @@ table {
 
 .recurrence-type-container {
   display: flex;
-  justify-content: center;
 }
 
 .recurrence-chip {
@@ -158,14 +157,12 @@ table {
 
 /* Estilos para el campo executionTime */
 .time-display {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
   padding: 8px 12px;
   background-color: #667eea;
   color: white;
   border-radius: 16px;
-  min-width: 100px;
 }
 
 .time-icon {
@@ -182,14 +179,12 @@ table {
 
 /* Estilos para el campo nextExecution */
 .next-execution {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
   padding: 8px 12px;
   background-color: #4facfe;
   color: white;
   border-radius: 16px;
-  min-width: 120px;
 }
 
 .execution-icon {
@@ -201,7 +196,6 @@ table {
 
 /* Estilos para el campo daysOfWeek */
 .days-display {
-  text-align: center;
 }
 
 .days-header {
@@ -229,7 +223,6 @@ table {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
-  justify-content: center;
 }
 
 .day-chip {
@@ -245,7 +238,6 @@ table {
 
 /* Estilos para el campo months */
 .months-display {
-  text-align: center;
 }
 
 .months-header {
@@ -273,7 +265,6 @@ table {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
-  justify-content: center;
 }
 
 .month-chip {
@@ -290,18 +281,15 @@ table {
 /* Estilos para el campo enabled */
 .status-container {
   display: flex;
-  justify-content: center;
 }
 
 .status-indicator {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   padding: 8px 16px;
   border-radius: 20px;
   font-weight: 600;
   font-size: 14px;
-  min-width: 100px;
-  justify-content: center;
 }
 
 .status-active {
@@ -323,8 +311,7 @@ table {
 
 /* Estilos para datos no definidos */
 .no-data {
-  text-align: center;
-  padding: 8px;
+  padding: 8px 0;
 }
 
 .no-data-text {
@@ -375,7 +362,7 @@ table {
 .paginator-container {
   margin-top: 20px;
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
 }
 
 /* Estilos para los botones de acción en la tabla */
diff --git a/ogWebconsole/src/app/components/commands/commands-task/show-task-schedule/show-task-schedule.component.html b/ogWebconsole/src/app/components/commands/commands-task/show-task-schedule/show-task-schedule.component.html
index 7243b80..c079b2d 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/show-task-schedule/show-task-schedule.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/show-task-schedule/show-task-schedule.component.html
@@ -1,44 +1,30 @@
 <app-loading [isLoading]="loading"></app-loading>
 
-<h2 mat-dialog-title>Gestionar programaciones de tareas en {{ data.commandTask?.name }}</h2>
+<h2 mat-dialog-title>{{ 'manageTaskSchedules' | translate }} {{ data.commandTask?.name }}</h2>
 
 <mat-dialog-content>
   <div class="header-actions">
     <button (click)="createNewSchedule()" class="action-button">
       <mat-icon>add</mat-icon>
-      Nueva Programación
+      {{ 'newSchedule' | translate }}
     </button>
   </div>
 
   <div class="search-container">
-    <mat-form-field appearance="fill" class="search-string" joyrideStep="searchNameStep"
-                    text="Busca programaciones por nombre para localizar una programación específica rápidamente.">
-      <mat-label i18n="@@searchLabel">Buscar programación</mat-label>
-      <input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" i18n-placeholder="@@searchPlaceholder"
-             (keyup.enter)="loadData()" i18n-placeholder="@@searchPlaceholder">
+    <mat-form-field appearance="fill" class="search-string">
+      <mat-label>{{ 'searchScheduleLabel' | translate }}</mat-label>
+      <input matInput [placeholder]="'searchPlaceholder' | translate" [(ngModel)]="filters['name']"
+             (keyup.enter)="loadData()">
       <mat-icon matSuffix>search</mat-icon>
-      <button *ngIf="filters['name']" mat-icon-button matSuffix aria-label="Clear search"
-              (click)="filters['name'] = ''; loadData()">
+      <button *ngIf="filters['name']" mat-icon-button matSuffix (click)="filters['name'] = ''; loadData()">
         <mat-icon>close</mat-icon>
       </button>
-      <mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
-    </mat-form-field>
-    <mat-form-field appearance="fill" class="search-string" joyrideStep="searchTypeStep" text="Busca programaciones por tipo de recurrencia.">
-      <mat-label i18n="@@searchLabel">Buscar por tipo</mat-label>
-      <input matInput placeholder="Búsqueda" [(ngModel)]="filters['recurrence']" i18n-placeholder="@@searchPlaceholder"
-             (keyup.enter)="loadData()" i18n-placeholder="@@searchPlaceholder">
-      <mat-icon matSuffix>search</mat-icon>
-      <button *ngIf="filters['recurrence']" mat-icon-button matSuffix aria-label="Clear type search"
-              (click)="filters['recurrence'] = ''; loadData()">
-        <mat-icon>close</mat-icon>
-      </button>
-      <mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
+      <mat-hint>{{ 'searchHint' | translate }}</mat-hint>
     </mat-form-field>
   </div>
 
   <app-loading [isLoading]="loading"></app-loading>
-  <table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
-         text="Visualiza y administra las programaciones de tareas según los filtros aplicados.">
+  <table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8">
     <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
       <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
       <td mat-cell *matCellDef="let schedule">
@@ -54,7 +40,7 @@
             </div>
           </div>
         </ng-container>
-        
+
         <ng-container *ngIf="column.columnDef === 'executionTime'">
           <div class="time-display">
             <mat-icon class="time-icon">schedule</mat-icon>
@@ -65,45 +51,45 @@
         <ng-container *ngIf="column.columnDef === 'nextExecution'">
           <div class="next-execution">
             <mat-icon class="execution-icon">schedule</mat-icon>
-            <span>{{ column.cell(schedule) || 'No calculada' }}</span>
+            <span>{{ column.cell(schedule) || ('notCalculated' | translate) }}</span>
           </div>
         </ng-container>
-        
+
         <ng-container *ngIf="column.columnDef === 'daysOfWeek'">
           <div class="days-display" *ngIf="column.cell(schedule)">
             <div class="days-chips">
-              <span *ngFor="let day of column.cell(schedule).days" 
+              <span *ngFor="let day of column.cell(schedule).days"
                     class="day-chip">{{ day }}</span>
             </div>
           </div>
           <div class="no-data" *ngIf="!column.cell(schedule)">
-            <span class="no-data-text">No definido</span>
+            <span class="no-data-text">{{ 'notDefined' | translate }}</span>
           </div>
         </ng-container>
-        
+
         <ng-container *ngIf="column.columnDef === 'months'">
           <div class="months-display" *ngIf="column.cell(schedule)">
             <div class="months-chips">
-              <span *ngFor="let month of column.cell(schedule).months" 
+              <span *ngFor="let month of column.cell(schedule).months"
                     class="month-chip">{{ month }}</span>
             </div>
           </div>
           <div class="no-data" *ngIf="!column.cell(schedule)">
-            <span class="no-data-text">No definido</span>
+            <span class="no-data-text">{{ 'notDefined' | translate }}</span>
           </div>
         </ng-container>
-        
-        <ng-container *ngIf="column.columnDef !== 'recurrenceType' && column.columnDef !== 'executionTime' && 
-                           column.columnDef !== 'daysOfWeek' && column.columnDef !== 'months' && 
+
+        <ng-container *ngIf="column.columnDef !== 'recurrenceType' && column.columnDef !== 'executionTime' &&
+                           column.columnDef !== 'daysOfWeek' && column.columnDef !== 'months' &&
                            column.columnDef !== 'nextExecution' && column.columnDef !== 'enabled'">
           {{ column.cell(schedule) }}
         </ng-container>
-        
+
         <ng-container *ngIf="column.columnDef === 'enabled'">
           <div class="status-container">
             <div class="status-indicator" [ngClass]="schedule.enabled ? 'status-active' : 'status-inactive'">
               <mat-icon class="status-icon">{{ schedule.enabled ? 'check_circle' : 'cancel' }}</mat-icon>
-              <span class="status-text">{{ schedule.enabled ? 'Activo' : 'Inactivo' }}</span>
+              <span class="status-text">{{ (schedule.enabled ? 'active' : 'inactive') | translate }}</span>
             </div>
           </div>
         </ng-container>
@@ -111,13 +97,13 @@
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
+      <th mat-header-cell *matHeaderCellDef style="text-align: center;">{{ 'columnActions' | translate }}</th>
       <td mat-cell *matCellDef="let schedule" style="text-align: center;">
-        <button mat-icon-button color="primary" (click)="editSchedule(schedule)" matTooltip="Editar programación">
-          <mat-icon i18n="@@editElementTooltip">edit</mat-icon>
+        <button mat-icon-button color="primary" (click)="editSchedule(schedule)" [matTooltip]="'editScheduleTooltip' | translate">
+          <mat-icon>edit</mat-icon>
         </button>
-        <button mat-icon-button color="warn" (click)="deleteSchedule(schedule)" matTooltip="Eliminar programación">
-          <mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
+        <button mat-icon-button color="warn" (click)="deleteSchedule(schedule)" [matTooltip]="'deleteScheduleTooltip' | translate">
+          <mat-icon>delete</mat-icon>
         </button>
       </td>
     </ng-container>
@@ -126,8 +112,7 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 
-  <div class="paginator-container" joyrideStep="paginationStep"
-       text="Navega entre las páginas de programaciones usando el paginador.">
+  <div class="paginator-container">
     <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
                    (page)="onPageChange($event)">
     </mat-paginator>
@@ -135,5 +120,5 @@
 </mat-dialog-content>
 
 <mat-dialog-actions class="action-container">
-  <button class="ordinary-button" (click)="onNoClick()">Cerrar</button>
+  <button class="ordinary-button" (click)="onNoClick()">{{ 'close' | translate }}</button>
 </mat-dialog-actions>
diff --git a/ogWebconsole/src/app/components/commands/commands-task/show-task-schedule/show-task-schedule.component.ts b/ogWebconsole/src/app/components/commands/commands-task/show-task-schedule/show-task-schedule.component.ts
index 2c0583e..8cfe8af 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/show-task-schedule/show-task-schedule.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-task/show-task-schedule/show-task-schedule.component.ts
@@ -36,6 +36,8 @@ export class ShowTaskScheduleComponent implements OnInit{
   ];
 
   displayedColumns: string[] = ['id', 'recurrenceType', 'executionTime', 'nextExecution', 'daysOfWeek', 'months', 'enabled', 'actions'];
+  allColumns: string[] = ['id', 'recurrenceType', 'executionTime', 'nextExecution', 'daysOfWeek', 'months', 'enabled', 'actions'];
+  compactColumns: string[] = ['id', 'recurrenceType', 'executionTime', 'nextExecution', 'enabled', 'actions'];
 
   constructor(
     private toastService: ToastrService,
@@ -60,6 +62,7 @@ export class ShowTaskScheduleComponent implements OnInit{
       (data) => {
         this.dataSource.data = data['hydra:member'];
         this.length = data['hydra:totalItems'];
+        this.updateDisplayedColumns();
         this.loading = false;
       },
       (error) => {
@@ -295,6 +298,11 @@ export class ShowTaskScheduleComponent implements OnInit{
     return mapping[monthName?.toLowerCase?.()] ?? -1;
   }
 
+  updateDisplayedColumns(): void {
+    const hasRecurrent = this.dataSource.data.some((s: any) => s.recurrenceType !== 'none');
+    this.displayedColumns = hasRecurrent ? this.allColumns : this.compactColumns;
+  }
+
   onPageChange(event: any): void {
     this.page = event.pageIndex;
     this.itemsPerPage = event.pageSize;
diff --git a/ogWebconsole/src/app/components/commands/commands-task/show-task-script/show-task-script.component.css b/ogWebconsole/src/app/components/commands/commands-task/show-task-script/show-task-script.component.css
index bd8e860..abebd3a 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/show-task-script/show-task-script.component.css
+++ b/ogWebconsole/src/app/components/commands/commands-task/show-task-script/show-task-script.component.css
@@ -283,26 +283,129 @@ mat-spinner {
   border: 1px solid #e0e0e0;
 }
 
-/* Estilos para el indicador de orden */
-.order-indicator {
+/* Badge de paso */
+.step-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.step-number {
+  background-color: #3f51b5;
+  color: white;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 15px;
+  box-shadow: 0 2px 4px rgba(63, 81, 181, 0.3);
+}
+
+/* Display de tipo de acción */
+.type-display {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 6px 12px;
-  background: #f8f9fa;
+  font-size: 13px;
+  font-weight: 500;
+  color: #333;
+}
+
+.type-icon {
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+  color: #666;
+}
+
+/* Contenido del script en celda */
+.script-content-cell {
+  background-color: #f5f5f5;
+  padding: 8px 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  font-family: 'Monaco', 'Menlo', monospace;
+  white-space: pre-wrap;
+  font-size: 12px;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.no-content-hint {
+  color: #999;
+  font-size: 13px;
+  font-style: italic;
+}
+
+/* Hint secuencial */
+.sequential-hint {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 24px;
+  color: #1565c0;
+  background: #e3f2fd;
+  border-radius: 4px;
+  margin: 0 24px;
+  font-size: 13px;
+}
+
+.sequential-hint mat-icon {
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+}
+
+/* Timeline resumen */
+.timeline-summary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px 24px;
+  background: #fafafa;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.timeline-step {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  background: white;
+  border: 1px solid #d0d0d0;
   border-radius: 20px;
-  border: 1px solid #e9ecef;
+  font-size: 13px;
 }
 
-.order-icon {
-  font-size: 16px;
-  width: 16px;
-  height: 16px;
-  color: #6c757d;
+.timeline-number {
+  background: #3f51b5;
+  color: white;
+  border-radius: 50%;
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 12px;
 }
 
-.order-number {
-  font-weight: 600;
-  color: #495057;
-  font-size: 14px;
+.timeline-label {
+  color: #444;
+  font-weight: 500;
+}
+
+.timeline-arrow {
+  color: #9e9e9e;
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
 }
diff --git a/ogWebconsole/src/app/components/commands/commands-task/show-task-script/show-task-script.component.html b/ogWebconsole/src/app/components/commands/commands-task/show-task-script/show-task-script.component.html
index 4f767f7..f23a2b2 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/show-task-script/show-task-script.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/show-task-script/show-task-script.component.html
@@ -1,62 +1,81 @@
 <app-loading [isLoading]="loading"></app-loading>
 
-<h2 mat-dialog-title>Gestionar scripts de tareas en {{ data.commandTask?.name }}</h2>
+<h2 mat-dialog-title>{{ 'taskActionsTitle' | translate }}: {{ data.commandTask?.name }}</h2>
+
+<div *ngIf="dataSource.data.length > 1" class="sequential-hint">
+  <mat-icon>info</mat-icon>
+  <span>{{ 'taskActionsSequentialHint' | translate }}</span>
+</div>
 
 <mat-dialog-content>
   <div class="header-actions">
     <button (click)="createNewScript()" class="action-button">
       <mat-icon>add</mat-icon>
-      Nueva Acción
+      {{ 'newAction' | translate }}
     </button>
   </div>
 
-  <div class="search-container">
-    <mat-form-field appearance="fill" class="search-string" joyrideStep="searchNameStep"
-                    text="Busca subredes por nombre para localizar una subred específica rápidamente.">
-      <mat-label i18n="@@searchLabel">Buscar contenido de script</mat-label>
-      <input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" i18n-placeholder="@@searchPlaceholder"
-             (keyup.enter)="loadData()" i18n-placeholder="@@searchPlaceholder">
-      <mat-icon matSuffix>search</mat-icon>
-      <button *ngIf="filters['name']" mat-icon-button matSuffix aria-label="Clear tree search"
-              (click)="filters['name'] = ''; loadData()">
-        <mat-icon>close</mat-icon>
-      </button>
-      <mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
-    </mat-form-field>
+  <div *ngIf="dataSource.data.length > 0 && !loading" class="timeline-summary">
+    <ng-container *ngFor="let item of dataSource.data; let last = last">
+      <div class="timeline-step">
+        <span class="timeline-number">{{ item.order }}</span>
+        <span class="timeline-label">{{ getTypeDisplay(item.type).label }}</span>
+      </div>
+      <mat-icon *ngIf="!last" class="timeline-arrow">arrow_forward</mat-icon>
+    </ng-container>
   </div>
 
   <app-loading [isLoading]="loading"></app-loading>
-  <table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
-         text="Visualiza y administra las subredes listadas según los filtros aplicados.">
-    <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
-      <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
-      <td mat-cell *matCellDef="let schedule">
-        <ng-container *ngIf="column.columnDef === 'content'; else checkOtherColumn">
-          <div style="background-color: #f5f5f5; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace; white-space: pre-wrap; font-size: 13px;">
-            {{ column.cell(schedule) }}
-          </div>
-        </ng-container>
+  <table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8">
 
-        <ng-template #checkOtherColumn>
-          <ng-container *ngIf="column.columnDef === 'parameters'; else normalCell">
-            <button class="parameters-button" (click)="openParametersModal(schedule.parameters)">
-              <mat-icon>settings</mat-icon>
-              <span>Ver parámetros</span>
-            </button>
-          </ng-container>
-        </ng-template>
+    <ng-container matColumnDef="order">
+      <th mat-header-cell *matHeaderCellDef>{{ 'executionOrder' | translate }}</th>
+      <td mat-cell *matCellDef="let item">
+        <div class="step-badge">
+          <span class="step-number">{{ item.order }}</span>
+        </div>
+      </td>
+    </ng-container>
 
-        <ng-template #normalCell>
-          {{ column.cell(schedule) }}
-        </ng-template>
+    <ng-container matColumnDef="type">
+      <th mat-header-cell *matHeaderCellDef>{{ 'actionType' | translate }}</th>
+      <td mat-cell *matCellDef="let item">
+        <div class="type-display">
+          <mat-icon class="type-icon">{{ getTypeDisplay(item.type).icon }}</mat-icon>
+          <span>{{ getTypeDisplay(item.type).label }}</span>
+        </div>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="content">
+      <th mat-header-cell *matHeaderCellDef>{{ 'scriptLabel' | translate }}</th>
+      <td mat-cell *matCellDef="let item">
+        <div *ngIf="item.content" class="script-content-cell">
+          <code>{{ item.content }}</code>
+        </div>
+        <span *ngIf="!item.content" class="no-content-hint">
+          ({{ 'viewParameters' | translate }})
+        </span>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="parameters">
+      <th mat-header-cell *matHeaderCellDef>{{ 'viewParameters' | translate }}</th>
+      <td mat-cell *matCellDef="let item">
+        <button class="parameters-button" (click)="openParametersModal(item.parameters)"
+                *ngIf="item.parameters && (item.parameters | json) !== '{}'">
+          <mat-icon>settings</mat-icon>
+          <span>{{ 'viewParameters' | translate }}</span>
+        </button>
+        <span *ngIf="!item.parameters || (item.parameters | json) === '{}'" class="no-content-hint">—</span>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
-      <td mat-cell *matCellDef="let schedule" style="text-align: center;">
-        <button mat-icon-button color="warn" (click)="deleteTaskScript(schedule)">
-          <mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
+      <th mat-header-cell *matHeaderCellDef style="text-align: center;">{{ 'columnActions' | translate }}</th>
+      <td mat-cell *matCellDef="let item" style="text-align: center;">
+        <button mat-icon-button color="warn" (click)="deleteTaskScript(item)">
+          <mat-icon>delete</mat-icon>
         </button>
       </td>
     </ng-container>
@@ -65,8 +84,7 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 
-  <div class="paginator-container" joyrideStep="paginationStep"
-       text="Navega entre las páginas de subredes usando el paginador.">
+  <div class="paginator-container">
     <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
                    (page)="onPageChange($event)">
     </mat-paginator>
@@ -74,5 +92,5 @@
 </mat-dialog-content>
 
 <mat-dialog-actions class="action-container">
-  <button class="ordinary-button" (click)="onNoClick()">Cerrar</button>
+  <button class="ordinary-button" (click)="onNoClick()">{{ 'close' | translate }}</button>
 </mat-dialog-actions>
diff --git a/ogWebconsole/src/app/components/commands/commands-task/show-task-script/show-task-script.component.ts b/ogWebconsole/src/app/components/commands/commands-task/show-task-script/show-task-script.component.ts
index 9be4dc7..7622307 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/show-task-script/show-task-script.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-task/show-task-script/show-task-script.component.ts
@@ -25,14 +25,31 @@ export class ShowTaskScriptComponent implements OnInit{
   filters: { [key: string]: string } = {};
 
   columns = [
-    { columnDef: 'id', header: 'ID', cell: (client: any) => client.id },
-    { columnDef: 'order', header: 'Orden', cell: (client: any) => client.order },
-    { columnDef: 'content', header: 'Script', cell: (client: any) => client.content },
-    { columnDef: 'type', header: 'Tipo', cell: (client: any) => client.type },
-    { columnDef: 'parameters', header: 'Parámetros', cell: (client: any) => client.parameters },
+    { columnDef: 'id', header: 'ID', cell: (item: any) => item.id },
+    { columnDef: 'order', header: 'Orden', cell: (item: any) => item.order },
+    { columnDef: 'type', header: 'Tipo', cell: (item: any) => item.type },
+    { columnDef: 'parameters', header: 'Parámetros', cell: (item: any) => item.parameters },
+    { columnDef: 'content', header: 'Contenido', cell: (item: any) => item.content },
   ];
 
-  displayedColumns: string[] = ['id', 'order', 'type', 'parameters', 'content', 'actions'];
+  displayedColumns: string[] = ['order', 'type', 'content', 'parameters', 'actions'];
+
+  typeLabels: { [key: string]: { label: string, icon: string } } = {
+    'partition-and-format': { label: 'Particionar y formatear', icon: 'storage' },
+    'partition-assistant': { label: 'Asistente de particionado', icon: 'storage' },
+    'deploy-image': { label: 'Desplegar imagen', icon: 'cloud_download' },
+    'create-image': { label: 'Crear imagen', icon: 'cloud_upload' },
+    'run-script': { label: 'Ejecutar script', icon: 'code' },
+    'reboot': { label: 'Reiniciar', icon: 'restart_alt' },
+    'shutdown': { label: 'Apagar', icon: 'power_off' },
+    'poweron': { label: 'Encender', icon: 'power' },
+    'power-on': { label: 'Encender', icon: 'power' },
+    'login': { label: 'Iniciar sesión', icon: 'login' },
+  };
+
+  getTypeDisplay(type: string): { label: string, icon: string } {
+    return this.typeLabels[type] || { label: type, icon: 'play_arrow' };
+  }
 
   constructor(
     private toastService: ToastrService,
@@ -53,9 +70,11 @@ export class ShowTaskScriptComponent implements OnInit{
 
   loadData() {
     this.loading = true;
-    this.http.get<any>(`${this.baseUrl}/command-task-scripts?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}&commandTask.id=${this.data.commandTask?.id}`, { params: this.filters }).subscribe(
+    this.http.get<any>(`${this.baseUrl}/command-task-scripts?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}&commandTask.id=${this.data.commandTask?.id}&order[order]=ASC`, { params: this.filters }).subscribe(
       (data) => {
-        this.dataSource.data = data['hydra:member'];
+        const items = data['hydra:member'];
+        items.sort((a: any, b: any) => (a.order ?? 0) - (b.order ?? 0));
+        this.dataSource.data = items;
         this.length = data['hydra:totalItems'];
         this.loading = false;
       },
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.css b/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.css
index cf41b39..2154a9a 100644
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.css
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.css
@@ -10,6 +10,26 @@
   align-items: center;
 }
 
+/* Layout compacto: tipo + configuración en una fila */
+.compact-config-row {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.compact-section {
+  padding: 20px !important;
+  margin-bottom: 0 !important;
+}
+
+.type-section {
+  flex: 0 0 280px;
+}
+
+.config-section {
+  flex: 1;
+}
+
 /* Secciones del formulario */
 .form-section {
   background: white !important;
@@ -249,6 +269,14 @@ mat-form-field {
 
 /* Responsive design */
 @media (max-width: 768px) {
+  .compact-config-row {
+    flex-direction: column;
+  }
+
+  .type-section {
+    flex: none;
+  }
+
   .select-container {
     padding: 16px;
   }
@@ -879,8 +907,8 @@ mat-form-field {
 
 .git-info-grid {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 16px;
+  grid-template-columns: 1fr;
+  gap: 12px;
 }
 
 .git-info-item {
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html
index e2e79a6..e118657 100644
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html
@@ -33,14 +33,13 @@
 </div>
 
 <div class="select-container">
-  <div class="form-section">
-    <div class="form-section-title">
-      <mat-icon>settings</mat-icon>
-      Configuración de tipo de imagen
-    </div>
-    
-    <div class="selector">
-      <mat-form-field appearance="fill" class="half-width">
+  <div class="compact-config-row">
+    <div class="form-section compact-section type-section">
+      <div class="form-section-title">
+        <mat-icon>settings</mat-icon>
+        Tipo de imagen
+      </div>
+      <mat-form-field appearance="fill" class="full-width">
         <mat-label>Tipo de imagen</mat-label>
         <mat-select [(ngModel)]="imageType" class="full-width" (selectionChange)="onImageTypeSelected($event.value)">
           <mat-option [value]="'monolithic'">Monolítica</mat-option>
@@ -48,89 +47,128 @@
         </mat-select>
       </mat-form-field>
     </div>
-  </div>
 
-  <div class="form-section" *ngIf="imageType === 'git'">
-    <div class="form-section-title">
-      <mat-icon>code</mat-icon>
-      Configuración Git
+    <div class="form-section compact-section config-section" *ngIf="imageType === 'monolithic'">
+      <div class="form-section-title">
+        <mat-icon>image</mat-icon>
+        Configuración
+      </div>
+
+      <div class="action-chips-container">
+        <mat-chip-listbox [(ngModel)]="monolithicAction" required class="action-chip-listbox">
+          <mat-chip-option value="create" class="action-chip create-chip firmware-chip" (click)="onMonolithicActionSelected({value: 'create'})">
+            <span>Crear imagen</span>
+          </mat-chip-option>
+          <mat-chip-option value="update" class="action-chip update-chip firmware-chip" (click)="onMonolithicActionSelected({value: 'update'})">
+            <span>Actualizar imagen</span>
+          </mat-chip-option>
+        </mat-chip-listbox>
+      </div>
+
+      <div *ngIf="monolithicAction === 'create'">
+        <mat-form-field appearance="fill" class="full-width">
+          <mat-label>Nombre canónico</mat-label>
+          <input matInput [(ngModel)]="name" placeholder="Nombre canónico. En minúscula y sin espacios" required>
+          <mat-hint>Nombre para la nueva imagen</mat-hint>
+        </mat-form-field>
+      </div>
+
+      <div *ngIf="monolithicAction === 'update'">
+        <mat-form-field appearance="fill" class="full-width">
+          <mat-label>Seleccione imagen</mat-label>
+          <mat-select [(ngModel)]="selectedImage" name="selectedImage" (selectionChange)="resetCanonicalName()" required>
+            <mat-option [value]="null">Seleccionar imagen para actualizar</mat-option>
+            <mat-option *ngFor="let image of images" [value]="image">{{ image?.name }}</mat-option>
+          </mat-select>
+          <button *ngIf="selectedImage" mat-icon-button matSuffix aria-label="Clear client search"
+                  (click)="selectedImage = null; resetCanonicalName()">
+            <mat-icon>close</mat-icon>
+          </button>
+          <mat-hint>Selecciona la imagen existente que quieres actualizar.</mat-hint>
+        </mat-form-field>
+      </div>
     </div>
-    
-    <div class="git-info-container" *ngIf="selectedPartition && imageType === 'git' && (hasValidGitData || loadingGitData)">
-      <div class="git-info-card">
-        <div class="git-info-header">
-          <mat-icon class="git-info-icon">info</mat-icon>
-          <span class="git-info-title">La imagen en caché a actualizar es:</span>
-          <mat-spinner *ngIf="loadingGitData" diameter="20" class="git-loading-spinner"></mat-spinner>
-        </div>
-        <div class="" *ngIf="!loadingGitData && hasValidGitData">
-          <div class="git-info-grid">
-            <div class="git-info-item">
-              <mat-form-field appearance="outline" class="git-form-field">
-                <mat-label>
-                  <mat-icon class="git-item-icon">folder</mat-icon>
-                  Repositorio
-                </mat-label>
-                <input matInput [value]="gitData.repo" readonly>
-              </mat-form-field>
-            </div>
-            <div class="git-info-item">
-              <mat-form-field appearance="outline" class="git-form-field">
-                <mat-label>
-                  <mat-icon class="git-item-icon">account_tree</mat-icon>
-                  Rama origen
-                </mat-label>
-                <input matInput [value]="gitData.branch" readonly>
-              </mat-form-field>
-            </div>
-            <div class="git-info-item">
-              <mat-form-field appearance="outline" class="git-form-field">
-                <mat-label>
-                  <mat-icon class="git-item-icon">call_split</mat-icon>
-                  Rama destino
-                </mat-label>
-                <input matInput 
-                       [(ngModel)]="destinationBranch"
-                       [readonly]="!isDestinationBranchEditable"
-                       placeholder="Nombre de la rama destino"
-                       [matTooltip]="isDestinationBranchEditable ? 'Guardar cambios' : 'Editar nombre de la rama destino'">
-                <button mat-icon-button 
-                        matSuffix
-                        [matTooltip]="isDestinationBranchEditable ? 'Guardar' : 'Editar rama destino'"
-                        (click)="toggleDestinationBranchEdit()">
-                  <mat-icon>{{ isDestinationBranchEditable ? 'save' : 'edit' }}</mat-icon>
-                </button>
-              </mat-form-field>
-            </div>
+
+    <div class="form-section compact-section config-section" *ngIf="imageType === 'git'">
+      <div class="form-section-title">
+        <mat-icon>code</mat-icon>
+        Configuración Git
+      </div>
+
+      <div class="git-info-container" *ngIf="selectedPartition && imageType === 'git' && (hasValidGitData || loadingGitData)">
+        <div class="git-info-card">
+          <div class="git-info-header">
+            <mat-icon class="git-info-icon">info</mat-icon>
+            <span class="git-info-title">La imagen en caché a actualizar es:</span>
+            <mat-spinner *ngIf="loadingGitData" diameter="20" class="git-loading-spinner"></mat-spinner>
           </div>
-          
-          <div class="repository-warning" *ngIf="repositoryNotFound">
-            <mat-icon class="warning-icon">warning</mat-icon>
-            <div class="warning-content">
-              <div class="warning-title">Repositorio no encontrado</div>
-              <div class="warning-message">
-                El repositorio "{{ gitData.repo }}" no existe en el listado de repositorios disponibles.
-                Es posible que necesites crearlo primero.
+          <div *ngIf="!loadingGitData && hasValidGitData">
+            <div class="git-info-grid">
+              <div class="git-info-item">
+                <mat-form-field appearance="outline" class="git-form-field">
+                  <mat-label>
+                    <mat-icon class="git-item-icon">folder</mat-icon>
+                    Repositorio
+                  </mat-label>
+                  <input matInput [value]="gitData.repo" readonly>
+                </mat-form-field>
+              </div>
+              <div class="git-info-item">
+                <mat-form-field appearance="outline" class="git-form-field">
+                  <mat-label>
+                    <mat-icon class="git-item-icon">account_tree</mat-icon>
+                    Rama origen
+                  </mat-label>
+                  <input matInput [value]="gitData.branch" readonly>
+                </mat-form-field>
+              </div>
+              <div class="git-info-item">
+                <mat-form-field appearance="outline" class="git-form-field">
+                  <mat-label>
+                    <mat-icon class="git-item-icon">call_split</mat-icon>
+                    Rama destino
+                  </mat-label>
+                  <input matInput 
+                         [(ngModel)]="destinationBranch"
+                         [readonly]="!isDestinationBranchEditable"
+                         placeholder="Nombre de la rama destino"
+                         [matTooltip]="isDestinationBranchEditable ? 'Guardar cambios' : 'Editar nombre de la rama destino'">
+                  <button mat-icon-button 
+                          matSuffix
+                          [matTooltip]="isDestinationBranchEditable ? 'Guardar' : 'Editar rama destino'"
+                          (click)="toggleDestinationBranchEdit()">
+                    <mat-icon>{{ isDestinationBranchEditable ? 'save' : 'edit' }}</mat-icon>
+                  </button>
+                </mat-form-field>
+              </div>
+            </div>
+            
+            <div class="repository-warning" *ngIf="repositoryNotFound">
+              <mat-icon class="warning-icon">warning</mat-icon>
+              <div class="warning-content">
+                <div class="warning-title">Repositorio no encontrado</div>
+                <div class="warning-message">
+                  El repositorio "{{ gitData.repo }}" no existe en el listado de repositorios disponibles.
+                  Es posible que necesites crearlo primero.
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div class="git-info-loading" *ngIf="loadingGitData">
-          <span>Cargando información de Git...</span>
-        </div>
-        <div class="git-info-empty" *ngIf="!loadingGitData && !hasValidGitData">
-          <span>No se encontró información de Git para esta partición</span>
+          <div class="git-info-loading" *ngIf="loadingGitData">
+            <span>Cargando información de Git...</span>
+          </div>
+          <div class="git-info-empty" *ngIf="!loadingGitData && !hasValidGitData">
+            <span>No se encontró información de Git para esta partición</span>
+          </div>
         </div>
       </div>
-    </div>
-    
-    <!-- Checkbox para forzar push cuando estamos en modo modificar imagen git -->
-    <div class="force-push-container" *ngIf="imageType === 'git' && hasValidGitData">
-      <mat-checkbox [(ngModel)]="forcePush" class="force-push-checkbox">
-        Opción 'Forzar push'
-      </mat-checkbox>
-    </div>
-    
+      
+      <div class="force-push-container" *ngIf="imageType === 'git' && hasValidGitData">
+        <mat-checkbox [(ngModel)]="forcePush" class="force-push-checkbox">
+          Opción 'Forzar push'
+        </mat-checkbox>
+      </div>
+      
       <div class="repository-header" *ngIf="!hasValidGitData">
         <button *ngIf="imageType === 'git'" 
                 class="create-repository-button" 
@@ -140,80 +178,24 @@
           <span>Crear nuevo repositorio / SO</span>
         </button>
       </div>
-      
-    <div class="selector" *ngIf="!hasValidGitData">
-      <mat-form-field appearance="fill" class="half-width">
-        <mat-label>Seleccionar repositorio Git</mat-label>
-        <mat-select [(ngModel)]="selectedGitRepository" (selectionChange)="onGitRepositorySelected($event.value)" required>
-          <mat-option [value]="null">Seleccionar repositorio git / SO</mat-option>
-          <mat-option *ngFor="let repo of gitRepositories" [value]="repo">{{ repo.name }}</mat-option>
-        </mat-select>
-        <mat-spinner *ngIf="loadingGitRepositories" matSuffix diameter="20"></mat-spinner>
-        <mat-hint>
-          <mat-icon>info</mat-icon>
-          Selecciona el repositorio git para obtener las imágenes disponibles.
-          <span *ngIf="gitRepositories.length === 0" class="no-repositories-hint">
-            No hay repositorios disponibles. Crea uno nuevo para continuar.
-          </span>
-        </mat-hint>
-      </mat-form-field>
-
-      <button class="create-branch-button" 
-              *ngIf="selectedGitRepository"
-              (click)="openCreateBranchModal()"
-              [disabled]="loadingBranches"
-              matTooltip="Crear nueva rama"
-              style="display: none;">
-        <mat-icon>add</mat-icon>
-        <span>Crear rama</span>
-      </button>
-    </div>
-    
-  </div>
-
-  <div class="form-section" *ngIf="imageType === 'monolithic'">
-    <div class="form-section-title">
-      <mat-icon>image</mat-icon>
-      Configuración de imagen monolítica
-    </div>
-    
-    <div class="action-chips-container">
-      <mat-chip-listbox [(ngModel)]="monolithicAction" required class="action-chip-listbox">
-        <mat-chip-option value="create" class="action-chip create-chip firmware-chip" (click)="onMonolithicActionSelected({value: 'create'})">
-          <span>Crear imagen</span>
-        </mat-chip-option>
-        <mat-chip-option value="update" class="action-chip update-chip firmware-chip" (click)="onMonolithicActionSelected({value: 'update'})">
-          <span>Actualizar imagen</span>
-        </mat-chip-option>
-      </mat-chip-listbox>
-    </div>
-    <div class="action-hint">
-      <mat-icon>info</mat-icon>
-      <span *ngIf="monolithicAction === 'create'">Crea una nueva imagen con el nombre especificado</span>
-      <span *ngIf="monolithicAction === 'update'">Actualiza una imagen existente seleccionada</span>
-    </div>
-
-    <div class="selector" *ngIf="monolithicAction === 'create'">
-      <mat-form-field appearance="fill" class="half-width">
-        <mat-label>Nombre canónico</mat-label>
-        <input matInput [(ngModel)]="name" placeholder="Nombre canónico. En minúscula y sin espacios" required>
-        <mat-hint>Introduce el nombre para la nueva imagen que se creará.</mat-hint>
-      </mat-form-field>
-    </div>
-
-    <div class="selector" *ngIf="monolithicAction === 'update'">
-      <mat-form-field appearance="fill" class="half-width">
-        <mat-label>Seleccione imagen</mat-label>
-        <mat-select [(ngModel)]="selectedImage" name="selectedImage" (selectionChange)="resetCanonicalName()" required>
-          <mat-option [value]="null">Seleccionar imagen para actualizar</mat-option>
-          <mat-option *ngFor="let image of images" [value]="image">{{ image?.name }}</mat-option>
-        </mat-select>
-        <button *ngIf="selectedImage" mat-icon-button matSuffix aria-label="Clear client search"
-                (click)="selectedImage = null; resetCanonicalName()">
-          <mat-icon>close</mat-icon>
-        </button>
-        <mat-hint>Selecciona la imagen existente que quieres actualizar.</mat-hint>
-      </mat-form-field>
+        
+      <div class="selector" *ngIf="!hasValidGitData">
+        <mat-form-field appearance="fill" class="full-width">
+          <mat-label>Seleccionar repositorio Git</mat-label>
+          <mat-select [(ngModel)]="selectedGitRepository" (selectionChange)="onGitRepositorySelected($event.value)" required>
+            <mat-option [value]="null">Seleccionar repositorio git / SO</mat-option>
+            <mat-option *ngFor="let repo of gitRepositories" [value]="repo">{{ repo.name }}</mat-option>
+          </mat-select>
+          <mat-spinner *ngIf="loadingGitRepositories" matSuffix diameter="20"></mat-spinner>
+          <mat-hint>
+            <mat-icon>info</mat-icon>
+            Selecciona el repositorio git para obtener las imágenes disponibles.
+            <span *ngIf="gitRepositories.length === 0" class="no-repositories-hint">
+              No hay repositorios disponibles. Crea uno nuevo para continuar.
+            </span>
+          </mat-hint>
+        </mat-form-field>
+      </div>
     </div>
   </div>
 
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.css b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.css
index 1d6cb4e..d2e10dd 100644
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.css
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.css
@@ -2,10 +2,10 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 24px 32px;
+  padding: 16px 24px;
   background: white;
   border-radius: 12px;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
 
 .header-container-title {
@@ -55,37 +55,71 @@
   cursor: not-allowed;
 }
 
+.secondary-button {
+  background: #e3f2fd !important;
+  color: #1976d2 !important;
+}
+
+.secondary-button:hover:not(:disabled) {
+  background: #bbdefb !important;
+}
+
 /* Contenedor principal */
 .select-container {
   background: white !important;
-  margin-top: 20px;
+  margin-top: 12px;
   align-items: center;
-  padding: 20px;
+  padding: 0 20px 12px;
   box-sizing: border-box;
 }
 
+.config-container {
+  background: transparent !important;
+}
+
 /* Secciones del formulario */
 .form-section {
   background: white !important;
   border-radius: 16px;
-  padding: 32px;
-  margin-bottom: 24px;
+  padding: 24px;
+  margin-bottom: 16px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
   border: 1px solid #bbdefb;
 }
 
+.compact-section {
+  padding: 20px !important;
+  margin-bottom: 12px !important;
+}
+
 .form-section-title {
   display: flex;
   align-items: center;
-  gap: 12px;
-  margin-bottom: 24px;
-  font-size: 20px;
+  gap: 10px;
+  margin-bottom: 16px;
+  font-size: 17px;
   font-weight: 600;
   color: #2c3e50;
-  padding-bottom: 16px;
+  padding-bottom: 12px;
   border-bottom: 2px solid #f8f9fa;
 }
 
+/* Layout horizontal: imagen + partición */
+.deploy-config-row {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 4px;
+}
+
+.image-config-section {
+  flex: 0 0 320px;
+}
+
+.partition-select-section {
+  flex: 1;
+  min-width: 0;
+}
+
 .form-section-title mat-icon {
   color: #667eea;
   font-size: 24px;
@@ -93,14 +127,6 @@
   height: 24px;
 }
 
-/* Selectores */
-.selector {
-  display: flex;
-  gap: 20px;
-  margin-bottom: 20px;
-  flex-wrap: wrap;
-}
-
 .half-width {
   flex: 1;
   min-width: 250px;
@@ -276,9 +302,9 @@ mat-form-field {
 /* Tabla de particiones */
 .partition-table-container {
   background: white !important;
-  border-radius: 12px;
-  padding: 24px;
-  margin-top: 20px;
+  border-radius: 8px;
+  padding: 0;
+  margin-top: 0;
 }
 
 table {
@@ -296,24 +322,48 @@ table {
   background: white !important;
   color: #2c3e50;
   font-weight: 600;
-  padding: 16px;
+  padding: 10px 12px;
 }
 
 ::ng-deep .mat-cell {
-  padding: 16px;
+  padding: 8px 12px;
   color: #495057;
 }
 
-/* Opciones avanzadas */
-.input-group {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 20px;
-  margin-top: 20px;
+/* Resumen de configuración avanzada */
+.method-config-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: #f0f4ff;
+  border: 1px solid #d0d9ff;
+  border-radius: 8px;
+  margin-top: 8px;
 }
 
-.input-field {
-  width: 100%;
+.summary-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.summary-icon {
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+  color: #667eea;
+  flex-shrink: 0;
+}
+
+.summary-text {
+  font-size: 12px;
+  font-weight: 500;
+  color: #495057;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /* Mensajes de error */
@@ -568,25 +618,13 @@ table {
   gap: 40px;
 }
 
-.monolithic-row {
-  display: flex;
-  gap: 24px;
-  align-items: flex-end;
-  margin-bottom: 20px;
-}
+@media (max-width: 900px) {
+  .deploy-config-row {
+    flex-direction: column;
+  }
 
-.monolithic-row .half-width {
-  flex: 1 1 200px;
-  min-width: 200px;
-}
-
-.monolithic-row .full-width {
-  flex: 2;
-}
-
-@media (max-width: 768px) {
-  .monolithic-row .full-width {
-    flex: 2;
+  .image-config-section {
+    flex: none;
   }
 }
 
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html
index 4dbb9f9..bd1c343 100644
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html
@@ -19,15 +19,9 @@
     <button class="action-button" id="execute-button"
       [disabled]="!isFormValid()"
       (click)="save()">Ejecutar</button>
-  </div>
-
-  <div class="button-row">
-    <button class="action-button" (click)="generateOgInstructions()">
+    <button class="action-button secondary-button" (click)="generateOgInstructions()">
       Generar instrucciones
     </button>
-  </div>
-
-  <div class="button-row">
     <button class="action-button" color="accent"
             [disabled]="!isFormValid()"
             (click)="openScheduleModal()">
@@ -95,58 +89,143 @@
   </mat-expansion-panel>
 </div>
 
-<mat-divider style="margin-top: 20px;"></mat-divider>
-
-<div class="select-container">
-  <!-- Sección: Configuración de imagen -->
-  <div class="form-section">
-    <div class="form-section-title">
-      <mat-icon>image</mat-icon>
-      Configuración de imagen
-    </div>
-    
-    <div class="selector">
-      <mat-form-field appearance="fill" class="half-width">
+<div class="select-container config-container">
+  <div class="deploy-config-row">
+    <!-- Sección: Configuración de imagen -->
+    <div class="form-section compact-section image-config-section">
+      <div class="form-section-title">
+        <mat-icon>image</mat-icon>
+        Configuración de imagen
+      </div>
+      
+      <mat-form-field appearance="fill" class="full-width">
         <mat-label>Tipo de imagen</mat-label>
         <mat-select [(ngModel)]="imageType" (selectionChange)="onImageTypeSelected($event.value)">
           <mat-option [value]="'monolithic'">Monolítica</mat-option>
           <mat-option [value]="'git'">Git</mat-option>
         </mat-select>
       </mat-form-field>
+
+      <!-- Campos monolítica -->
+      <div *ngIf="imageType === 'monolithic'">
+        <mat-form-field appearance="fill" class="full-width">
+          <mat-label>Método de deploy</mat-label>
+          <mat-select [(ngModel)]="selectedMethod" name="selectedMethod" (selectionChange)="validateImageSize()">
+            <mat-option *ngFor="let method of allMethods" [value]="method.value">{{ method.name }}</mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field appearance="fill" class="full-width">
+          <mat-label>Seleccione imagen</mat-label>
+          <mat-select [(ngModel)]="selectedImage" name="selectedImage" [disabled]="!imageType">
+            <mat-option *ngFor="let image of images" [value]="image">
+              <div class="unit-name">{{ image.name }}</div>
+              <div style="font-size: smaller; color: gray;">{{ image.description }}</div>
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+
+      <!-- Campos Git -->
+      <div *ngIf="imageType === 'git'">
+        <mat-form-field appearance="fill" class="full-width">
+          <mat-label>Repositorio</mat-label>
+          <mat-select [(ngModel)]="selectedGitRepository" (selectionChange)="onGitRepositoryChange($event.value)" [disabled]="loadingRepositories">
+            <mat-option *ngFor="let repo of repositories" [value]="repo">
+              {{ repo }}
+            </mat-option>
+          </mat-select>
+          <mat-icon matSuffix *ngIf="loadingRepositories">hourglass_empty</mat-icon>
+        </mat-form-field>
+
+        <mat-form-field appearance="fill" class="full-width">
+          <mat-label>Rama</mat-label>
+          <mat-select [(ngModel)]="selectedBranch" (selectionChange)="onGitBranchChange()" [disabled]="loadingBranches || !selectedRepository">
+            <mat-option *ngFor="let branch of branches" [value]="branch">
+              {{ branch }}
+            </mat-option>
+          </mat-select>
+          <mat-icon matSuffix *ngIf="loadingBranches">hourglass_empty</mat-icon>
+        </mat-form-field>
+
+        <mat-form-field appearance="fill" class="full-width">
+          <mat-label>Filtrar por tag</mat-label>
+          <mat-select [(ngModel)]="showOnlyTagged" (selectionChange)="onTagFilterChange()" [disabled]="!commits.length">
+            <mat-option [value]="false">No</mat-option>
+            <mat-option [value]="true">Sí</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+
+      <div *ngIf="errorMessage" class="error-message">
+        {{ errorMessage }}
+      </div>
+
+      <div *ngIf="methodConfigured && selectedMethod && needsAdvancedConfig(selectedMethod)" class="method-config-summary">
+        <div class="summary-content">
+          <mat-icon class="summary-icon">tune</mat-icon>
+          <span class="summary-text">{{ getMethodConfigSummary() }}</span>
+        </div>
+        <button mat-icon-button matTooltip="Editar configuración" (click)="openMethodConfigDialog()">
+          <mat-icon>edit</mat-icon>
+        </button>
+      </div>
     </div>
 
-    <!-- Selectores Git (solo si imageType === 'git') -->
-    <div *ngIf="imageType === 'git'" class="filters-row git-gap">
-      <mat-form-field appearance="fill" style="width: 300px;">
-        <mat-label>Seleccionar Repositorio</mat-label>
-        <mat-select [(ngModel)]="selectedGitRepository" (selectionChange)="onGitRepositoryChange($event.value)" [disabled]="loadingRepositories">
-          <mat-option *ngFor="let repo of repositories" [value]="repo">
-            {{ repo }}
-          </mat-option>
-        </mat-select>
-        <mat-icon matSuffix *ngIf="loadingRepositories">hourglass_empty</mat-icon>
-      </mat-form-field>
+    <!-- Sección: Selección de partición -->
+    <div class="form-section compact-section partition-select-section" id="partition-selection">
+      <div class="form-section-title">
+        <mat-icon>storage</mat-icon>
+        Selección de partición
+      </div>
+      
+      <div class="partition-table-container">
+        <div *ngIf="showInstructions" class="instructions-box">
+          <mat-card class="instructions-card">
+            <mat-card-title>
+              Instrucciones generadas
+              <button mat-icon-button (click)="showInstructions = false" style="float: right;">
+                <mat-icon>close</mat-icon>
+              </button>
+            </mat-card-title>
+            <mat-card-content>
+              <pre>{{ ogInstructions }}</pre>
+            </mat-card-content>
+          </mat-card>
+        </div>
 
-      <mat-form-field appearance="fill" style="width: 300px;">
-        <mat-label>Seleccionar Rama</mat-label>
-        <mat-select [(ngModel)]="selectedBranch" (selectionChange)="onGitBranchChange()" [disabled]="loadingBranches || !selectedRepository">
-          <mat-option *ngFor="let branch of branches" [value]="branch">
-            {{ branch }}
-          </mat-option>
-        </mat-select>
-        <mat-icon matSuffix *ngIf="loadingBranches">hourglass_empty</mat-icon>
-      </mat-form-field>
+        <table mat-table [dataSource]="filteredPartitions">
+          <ng-container matColumnDef="select">
+            <th mat-header-cell *matHeaderCellDef style="text-align: start">Seleccionar</th>
+            <td mat-cell *matCellDef="let row">
+              <mat-radio-group [(ngModel)]="selectedPartition" name="selectedPartition">
+                <mat-radio-button [value]="row">
+                </mat-radio-button>
+              </mat-radio-group>
+            </td>
+          </ng-container>
 
-      <mat-form-field appearance="fill" style="width: 200px;">
-        <mat-label>Tag</mat-label>
-        <mat-select [(ngModel)]="showOnlyTagged" (selectionChange)="onTagFilterChange()" [disabled]="!commits.length">
-          <mat-option [value]="false">No</mat-option>
-          <mat-option [value]="true">Sí</mat-option>
-        </mat-select>
-      </mat-form-field>
+          <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
+            <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
+            <td mat-cell *matCellDef="let image">
+              {{ column.cell(image) }}
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <!-- Tabla de commits Git (solo cuando hay commits cargados) -->
+  <div *ngIf="imageType === 'git' && filteredCommits.length > 0" class="form-section compact-section">
+    <div class="form-section-title">
+      <mat-icon>history</mat-icon>
+      Selección de commit
     </div>
 
-    <div *ngIf="imageType === 'git' && filteredCommits.length > 0" class="commits-table-container">
+    <div class="commits-table-container">
       <table mat-table [dataSource]="filteredCommits" class="mat-elevation-z8">
         <ng-container matColumnDef="select">
           <th mat-header-cell *matHeaderCellDef>Seleccionar</th>
@@ -188,144 +267,8 @@
         <tr mat-row *matRowDef="let row; columns: ['select','hexsha','message','committed_date','tags'];"></tr>
       </table>
     </div>
-
-    <div class="monolithic-row" *ngIf="imageType === 'monolithic'">
-      <mat-form-field appearance="fill" class="half-width">
-        <mat-label>Seleccione método de deploy</mat-label>
-        <mat-select [(ngModel)]="selectedMethod" name="selectedMethod" (selectionChange)="validateImageSize()">
-          <mat-option *ngFor="let method of allMethods" [value]="method.value">{{ method.name }}</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field appearance="fill" class="full-width">
-        <mat-label>Seleccione imagen</mat-label>
-        <mat-select [(ngModel)]="selectedImage" name="selectedImage" [disabled] = "!imageType" >
-          <mat-option *ngFor="let image of images" [value]="image">
-            <div class="unit-name"> {{ image.name }}</div>
-            <div style="font-size: smaller; color: gray;">{{ image.description }}</div>
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-    </div>
-
-    <div *ngIf="errorMessage" class="error-message">
-      {{ errorMessage }}
-    </div>
   </div>
 
-  <!-- Sección: Selección de partición -->
-  <div class="form-section" id="partition-selection">
-    <div class="form-section-title">
-      <mat-icon>storage</mat-icon>
-      Selección de partición
-    </div>
-    
-    <div class="partition-table-container">
-      <div *ngIf="showInstructions" class="instructions-box">
-        <mat-card class="instructions-card">
-          <mat-card-title>
-            Instrucciones generadas
-            <button mat-icon-button (click)="showInstructions = false" style="float: right;">
-              <mat-icon>close</mat-icon>
-            </button>
-          </mat-card-title>
-          <mat-card-content>
-            <pre>{{ ogInstructions }}</pre>
-          </mat-card-content>
-        </mat-card>
-      </div>
-
-      <table mat-table [dataSource]="filteredPartitions">
-        <ng-container matColumnDef="select">
-          <th mat-header-cell *matHeaderCellDef style="text-align: start">Seleccionar partición</th>
-          <td mat-cell *matCellDef="let row">
-            <mat-radio-group [(ngModel)]="selectedPartition" name="selectedPartition">
-              <mat-radio-button [value]="row">
-              </mat-radio-button>
-            </mat-radio-group>
-          </td>
-        </ng-container>
-
-        <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
-          <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
-          <td mat-cell *matCellDef="let image">
-            {{ column.cell(image) }}
-          </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-      </table>
-    </div>
-  </div>
-
-  <!-- Sección: Opciones avanzadas -->
-  <div class="form-section" id="advanced-options" *ngIf="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct') || isMethod('p2p')">
-    <div class="form-section-title">
-      <mat-icon>settings</mat-icon>
-      <span *ngIf="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')">Opciones multicast</span>
-      <span *ngIf="isMethod('p2p')">Opciones torrent</span>
-    </div>
-    
-    <div class="input-group" *ngIf="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')">
-      <mat-form-field appearance="fill" class="input-field">
-        <mat-label>Puerto</mat-label>
-        <input matInput [(ngModel)]="mcastPort" name="mcastPort" type="number"
-               [required]="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')">
-      </mat-form-field>
-
-      <mat-form-field appearance="fill" class="input-field">
-        <mat-label>Dirección</mat-label>
-        <input matInput [(ngModel)]="mcastIp" name="mcastIp"
-               [required]="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')">
-      </mat-form-field>
-
-      <mat-form-field appearance="fill" class="input-field">
-        <mat-label i18n="@@mcastModeLabel">Modo Multicast</mat-label>
-        <mat-select [(ngModel)]="mcastMode" name="mcastMode"
-                    [required]="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')">
-        <mat-option *ngFor="let option of multicastModeOptions" [value]="option.value">
-            {{ option.name }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <mat-form-field appearance="fill" class="input-field">
-        <mat-label>Velocidad</mat-label>
-        <input matInput [(ngModel)]="mcastSpeed" name="mcastSpeed" type="number"
-               [required]="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')">
-      </mat-form-field>
-
-      <mat-form-field appearance="fill" class="input-field">
-        <mat-label>Máximo Clientes</mat-label>
-        <input matInput [(ngModel)]="mcastMaxClients" name="mcastMaxClients" type="number"
-               [required]="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')">
-      </mat-form-field>
-
-      <mat-form-field appearance="fill" class="input-field">
-        <mat-label>Tiempo Máximo de Espera</mat-label>
-        <input matInput [(ngModel)]="mcastMaxTime" name="mcastMaxTime" type="number"
-               [required]="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')">
-      </mat-form-field>
-    </div>
-
-    <div class="input-group" *ngIf="isMethod('p2p')">
-      <mat-form-field appearance="fill" class="input-field">
-        <mat-label i18n="@@p2pModeLabel">Modo P2P</mat-label>
-        <mat-select [(ngModel)]="p2pMode" name="p2pMode"
-                    [required]="isMethod('p2p')">
-        <mat-option *ngFor="let option of p2pModeOptions" [value]="option.value">
-            {{ option.name }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <mat-form-field appearance="fill" class="input-field" *ngIf="p2pMode === 'seeder'">
-        <mat-label>Semilla (minutos)</mat-label>
-        <input matInput [(ngModel)]="p2pTime" name="p2pTime" type="number"
-               [required]="isMethod('p2p') && p2pMode === 'seeder'">
-      </mat-form-field>
-    </div>
-  </div>
 </div>
 
 <app-scroll-to-top 
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts
index 0396eae..57f00bf 100644
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts
@@ -8,6 +8,7 @@ import { ConfigService } from '@services/config.service';
 import {CreateTaskComponent} from "../../../../commands/commands-task/create-task/create-task.component";
 import {MatDialog} from "@angular/material/dialog";
 import {QueueConfirmationModalComponent} from "../../../../../shared/queue-confirmation-modal/queue-confirmation-modal.component";
+import {DeployMethodConfigDialogComponent} from "./deploy-method-config-dialog/deploy-method-config-dialog.component";
 
 @Component({
   selector: 'app-deploy-image',
@@ -111,6 +112,7 @@ export class DeployImageComponent implements OnInit{
 
   showOnlyTagged: boolean = false;
   filteredCommits: any[] = [];
+  methodConfigured: boolean = false;
 
   constructor(
     private http: HttpClient,
@@ -152,9 +154,6 @@ export class DeployImageComponent implements OnInit{
       this.loadGitRepositories();
     }
     this.loadImages();
-    setTimeout(() => {
-      this.scrollToPartitionSection();
-    }, 200);
   }
 
   get runScriptTitle(): string {
@@ -178,9 +177,6 @@ export class DeployImageComponent implements OnInit{
 
   onModelSelected(client: any) {
     this.loadPartitions(client);
-    setTimeout(() => {
-      this.scrollToPartitionSection();
-    }, 200);
   }
 
   toggleClientSelection(client: any) {
@@ -270,22 +266,74 @@ export class DeployImageComponent implements OnInit{
   validateImageSize() {
     if (this.selectedImage && this.selectedPartition) {
       if ((this.selectedImage.datasize / 1024) / 1024 > this.selectedPartition.size) {
-
         this.errorMessage = "El tamaño de la imagen seleccionada excede el tamaño de la partición.";
         return false;
       }
     }
     this.errorMessage = "";
-    
-    if (this.selectedMethod) {
-      setTimeout(() => {
-        this.scrollToPartitionSection();
-      }, 300);
+
+    if (this.selectedMethod && this.needsAdvancedConfig(this.selectedMethod)) {
+      this.openMethodConfigDialog();
+    } else {
+      this.methodConfigured = false;
     }
-    
+
     return true;
   }
 
+  needsAdvancedConfig(method: string): boolean {
+    return ['udpcast', 'uftp', 'udpcast-direct', 'p2p'].includes(method);
+  }
+
+  openMethodConfigDialog(): void {
+    const dialogRef = this.dialog.open(DeployMethodConfigDialogComponent, {
+      width: '540px',
+      disableClose: false,
+      data: {
+        method: this.selectedMethod,
+        mcastIp: this.mcastIp,
+        mcastPort: this.mcastPort,
+        mcastMode: this.mcastMode,
+        mcastSpeed: this.mcastSpeed,
+        mcastMaxClients: this.mcastMaxClients,
+        mcastMaxTime: this.mcastMaxTime,
+        p2pMode: this.p2pMode,
+        p2pTime: this.p2pTime,
+        multicastModeOptions: this.multicastModeOptions,
+        p2pModeOptions: this.p2pModeOptions,
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.mcastIp = result.mcastIp;
+        this.mcastPort = result.mcastPort;
+        this.mcastMode = result.mcastMode;
+        this.mcastSpeed = result.mcastSpeed;
+        this.mcastMaxClients = result.mcastMaxClients;
+        this.mcastMaxTime = result.mcastMaxTime;
+        this.p2pMode = result.p2pMode;
+        this.p2pTime = result.p2pTime;
+        this.methodConfigured = true;
+      }
+    });
+  }
+
+  getMethodConfigSummary(): string {
+    if (!this.selectedMethod) return '';
+    if (['udpcast', 'uftp', 'udpcast-direct'].includes(this.selectedMethod)) {
+      return `${this.mcastIp}:${this.mcastPort} · ${this.mcastMode} · ${this.mcastSpeed} Mbps`;
+    }
+    if (this.selectedMethod === 'p2p') {
+      let summary = this.p2pMode || '';
+      if (this.p2pMode === 'seeder' && this.p2pTime) {
+        summary += ` · ${this.p2pTime} min`;
+      }
+      return summary;
+    }
+    return '';
+  }
+
   save(): void {
 
     if (!this.selectedClients.length) {
@@ -519,28 +567,7 @@ export class DeployImageComponent implements OnInit{
     this.ogInstructions = `og-deploy-image --image ${this.selectedImage.name} --partition ${this.selectedPartition.partitionNumber} --method ${this.selectedMethod}`;
   }
 
-  scrollToPartitionSection() {    
-    const partitionSection = document.getElementById('partition-selection');    
-    if (partitionSection) {
-      partitionSection.scrollIntoView({ 
-        behavior: 'smooth', 
-        block: 'start' 
-      });
-      console.log('Scroll ejecutado');
-    }
-  }
 
-  scrollToAdvancedOptions() {    
-    const advancedOptions = document.getElementById('advanced-options');
-    
-    if (advancedOptions) {
-      advancedOptions.scrollIntoView({ 
-        behavior: 'smooth', 
-        block: 'start' 
-      });
-      console.log('Scroll hacia opciones avanzadas ejecutado');
-    }
-  }
 
   get selectedPartition(): any {
     return this._selectedPartition;
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-method-config-dialog/deploy-method-config-dialog.component.css b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-method-config-dialog/deploy-method-config-dialog.component.css
new file mode 100644
index 0000000..64abc47
--- /dev/null
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-method-config-dialog/deploy-method-config-dialog.component.css
@@ -0,0 +1,51 @@
+h2[mat-dialog-title] {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0 0 8px 0;
+  padding: 20px 24px 12px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #2c3e50;
+  border-bottom: 2px solid #f0f0f0;
+}
+
+.dialog-title-icon {
+  color: #667eea;
+  font-size: 22px;
+  width: 22px;
+  height: 22px;
+}
+
+.config-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px 20px;
+  padding: 16px 0 8px;
+}
+
+mat-dialog-content {
+  min-width: 460px;
+  padding: 8px 24px !important;
+}
+
+mat-dialog-actions {
+  padding: 16px 24px 20px !important;
+  margin: 0 !important;
+  border-top: 1px solid #f0f0f0;
+  gap: 12px;
+}
+
+::ng-deep .mat-dialog-actions button {
+  min-width: 100px;
+}
+
+@media (max-width: 600px) {
+  .config-grid {
+    grid-template-columns: 1fr;
+  }
+
+  mat-dialog-content {
+    min-width: auto;
+  }
+}
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-method-config-dialog/deploy-method-config-dialog.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-method-config-dialog/deploy-method-config-dialog.component.html
new file mode 100644
index 0000000..d2ba893
--- /dev/null
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-method-config-dialog/deploy-method-config-dialog.component.html
@@ -0,0 +1,67 @@
+<h2 mat-dialog-title>
+  <mat-icon class="dialog-title-icon">settings</mat-icon>
+  Configuración de {{ getMethodLabel() }}
+</h2>
+
+<mat-dialog-content>
+  <!-- Multicast options -->
+  <div *ngIf="isMulticast()" class="config-grid">
+    <mat-form-field appearance="fill">
+      <mat-label>Dirección</mat-label>
+      <input matInput [(ngModel)]="mcastIp" required>
+    </mat-form-field>
+
+    <mat-form-field appearance="fill">
+      <mat-label>Puerto</mat-label>
+      <input matInput [(ngModel)]="mcastPort" type="number" required>
+    </mat-form-field>
+
+    <mat-form-field appearance="fill">
+      <mat-label>Modo Multicast</mat-label>
+      <mat-select [(ngModel)]="mcastMode" required>
+        <mat-option *ngFor="let option of data.multicastModeOptions" [value]="option.value">
+          {{ option.name }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field appearance="fill">
+      <mat-label>Velocidad</mat-label>
+      <input matInput [(ngModel)]="mcastSpeed" type="number" required>
+    </mat-form-field>
+
+    <mat-form-field appearance="fill">
+      <mat-label>Máx. Clientes</mat-label>
+      <input matInput [(ngModel)]="mcastMaxClients" type="number" required>
+    </mat-form-field>
+
+    <mat-form-field appearance="fill">
+      <mat-label>Tiempo máx. espera</mat-label>
+      <input matInput [(ngModel)]="mcastMaxTime" type="number" required>
+    </mat-form-field>
+  </div>
+
+  <!-- P2P options -->
+  <div *ngIf="isP2P()" class="config-grid">
+    <mat-form-field appearance="fill">
+      <mat-label>Modo P2P</mat-label>
+      <mat-select [(ngModel)]="p2pMode" required>
+        <mat-option *ngFor="let option of data.p2pModeOptions" [value]="option.value">
+          {{ option.name }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field appearance="fill" *ngIf="p2pMode === 'seeder'">
+      <mat-label>Semilla (minutos)</mat-label>
+      <input matInput [(ngModel)]="p2pTime" type="number" required>
+    </mat-form-field>
+  </div>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-button (click)="onCancel()">Cancelar</button>
+  <button mat-flat-button color="primary" [disabled]="!isValid()" (click)="onSave()">
+    Guardar configuración
+  </button>
+</mat-dialog-actions>
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-method-config-dialog/deploy-method-config-dialog.component.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-method-config-dialog/deploy-method-config-dialog.component.ts
new file mode 100644
index 0000000..8d491b2
--- /dev/null
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-method-config-dialog/deploy-method-config-dialog.component.ts
@@ -0,0 +1,93 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+export interface DeployMethodConfigData {
+  method: string;
+  mcastIp: string;
+  mcastPort: number;
+  mcastMode: string;
+  mcastSpeed: number;
+  mcastMaxClients: number;
+  mcastMaxTime: number;
+  p2pMode: string;
+  p2pTime: number;
+  multicastModeOptions: { name: string; value: string }[];
+  p2pModeOptions: { name: string; value: string }[];
+}
+
+@Component({
+  selector: 'app-deploy-method-config-dialog',
+  templateUrl: './deploy-method-config-dialog.component.html',
+  styleUrls: ['./deploy-method-config-dialog.component.css']
+})
+export class DeployMethodConfigDialogComponent {
+  mcastIp: string;
+  mcastPort: number;
+  mcastMode: string;
+  mcastSpeed: number;
+  mcastMaxClients: number;
+  mcastMaxTime: number;
+  p2pMode: string;
+  p2pTime: number;
+
+  constructor(
+    public dialogRef: MatDialogRef<DeployMethodConfigDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DeployMethodConfigData
+  ) {
+    this.mcastIp = data.mcastIp;
+    this.mcastPort = data.mcastPort;
+    this.mcastMode = data.mcastMode;
+    this.mcastSpeed = data.mcastSpeed;
+    this.mcastMaxClients = data.mcastMaxClients;
+    this.mcastMaxTime = data.mcastMaxTime;
+    this.p2pMode = data.p2pMode;
+    this.p2pTime = data.p2pTime;
+  }
+
+  isMulticast(): boolean {
+    return ['udpcast', 'uftp', 'udpcast-direct'].includes(this.data.method);
+  }
+
+  isP2P(): boolean {
+    return this.data.method === 'p2p';
+  }
+
+  getMethodLabel(): string {
+    const labels: Record<string, string> = {
+      'udpcast': 'Multicast',
+      'uftp': 'UFTP',
+      'udpcast-direct': 'Multicast (directo)',
+      'p2p': 'Torrent (P2P)',
+    };
+    return labels[this.data.method] || this.data.method;
+  }
+
+  isValid(): boolean {
+    if (this.isMulticast()) {
+      return !!(this.mcastPort && this.mcastIp && this.mcastMode && this.mcastSpeed && this.mcastMaxClients && this.mcastMaxTime);
+    }
+    if (this.isP2P()) {
+      if (!this.p2pMode) return false;
+      if (this.p2pMode === 'seeder' && !this.p2pTime) return false;
+      return true;
+    }
+    return true;
+  }
+
+  onSave(): void {
+    this.dialogRef.close({
+      mcastIp: this.mcastIp,
+      mcastPort: this.mcastPort,
+      mcastMode: this.mcastMode,
+      mcastSpeed: this.mcastSpeed,
+      mcastMaxClients: this.mcastMaxClients,
+      mcastMaxTime: this.mcastMaxTime,
+      p2pMode: this.p2pMode,
+      p2pTime: this.p2pTime,
+    });
+  }
+
+  onCancel(): void {
+    this.dialogRef.close(null);
+  }
+}
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css
index 4739a62..a069c39 100644
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css
@@ -1,20 +1,21 @@
 .partition-assistant {
-  padding: 32px;
-  margin: 20px;
+  padding: 16px 20px;
+  margin: 0 20px 20px;
   background: white !important;
-  border-radius: 16px;
+  border-radius: 0 0 16px 16px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
   border: 1px solid #bbdefb;
+  border-top: none;
 }
 
 .header-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 24px 32px;
+  padding: 16px 24px;
   background: white;
   border-radius: 12px;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
 
 .header-container-title {
@@ -114,76 +115,138 @@
   cursor: not-allowed;
 }
 
+.secondary-button {
+  background: #e3f2fd !important;
+  color: #1976d2 !important;
+}
+
+.secondary-button:hover:not(:disabled) {
+  background: #bbdefb !important;
+}
+
 .row-button {
   display: flex;
   align-items: center;
-  gap: 30px;
+  gap: 16px;
 }
 
-.disk-selector-card {
-  padding: 32px;
-  margin: 20px;
-  background: white !important;
-  border-radius: 16px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-  border: 1px solid #bbdefb;
-  overflow: hidden;
+.disk-and-partitions-container {
+  margin: 0 20px;
 }
 
-.card-header {
+.disk-toolbar {
   display: flex;
   align-items: center;
-  padding: 24px 32px;
-  background: transparent;
-  color: #1976d2;
-  border-bottom: 1.5px solid #1976d2;
+  gap: 16px;
+  padding: 12px 20px;
+  background: white;
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  border: 1px solid #bbdefb;
+  flex-wrap: wrap;
 }
 
-.card-icon {
-  font-size: 28px;
-  width: 28px;
-  height: 28px;
-  margin-right: 16px;
-  color: #1976d2;
+.disk-toolbar-select {
+  flex: 0 0 280px;
+  margin-bottom: -1.25em;
 }
 
-.card-title h3 {
-  margin: 0 0 4px 0;
-  font-size: 20px;
+.disk-toolbar-info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+  min-width: 0;
+}
+
+.disk-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.disk-stat-label {
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #6c757d;
+}
+
+.disk-stat-value {
+  font-size: 13px;
   font-weight: 600;
-  color: #1976d2;
+  color: #333;
 }
 
-.card-title p {
-  margin: 0;
-  font-size: 14px;
-  opacity: 0.9;
-  color: #1976d2;
+.disk-stat-value.used {
+  color: #dc3545;
 }
 
-.card-content {
-  padding: 24px 32px;
+.disk-stat-value.free {
+  color: #28a745;
 }
 
-.disk-select-field {
-  width: 100%;
-  margin-bottom: 20px;
-}
-
-.selected-disk-hint {
+.disk-usage-bar-inline {
   display: flex;
   align-items: center;
   gap: 8px;
-  color: #2e7d32;
-  font-weight: 500;
-  font-size: 14px;
+  flex: 1;
+  min-width: 80px;
+  max-width: 200px;
 }
 
-.hint-icon {
-  font-size: 16px;
-  width: 16px;
-  height: 16px;
-  color: #4caf50;
+.disk-usage-bar-inline .usage-bar-container {
+  flex: 1;
+}
+
+.usage-percent-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #666;
+  white-space: nowrap;
+}
+
+.disk-toolbar-meta {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.meta-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 16px;
+  background: #f0f4ff;
+  color: #495057;
+  font-size: 12px;
+  font-weight: 500;
+  border: 1px solid #d0d9ff;
+}
+
+.meta-chip mat-icon {
+  font-size: 14px;
+  width: 14px;
+  height: 14px;
+  color: #667eea;
+}
+
+.add-partition-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+  margin: 0 !important;
+  padding: 8px 16px !important;
+}
+
+.add-partition-btn mat-icon {
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
 }
 
 /* Opciones del select */
@@ -386,11 +449,11 @@
 }
 
 .select-container {
-  margin-top: 20px;
+  margin-top: 12px;
   align-items: center;
   width: 100%;
   box-sizing: border-box;
-  padding: 20px;
+  padding: 0 20px 12px;
 }
 
 /* Expansion panel */
@@ -503,8 +566,8 @@
 }
 
 .form-container {
-  flex: 0 0 65%;
-  max-width: 65%;
+  flex: 1;
+  min-width: 0;
   padding-right: 20px;
   box-sizing: border-box;
   background: white;
@@ -512,73 +575,6 @@
   border: none;
 }
 
-.disk-space-info-container {
-  margin: 24px 0;
-  background: none;
-  border-radius: 0;
-  border: none;
-  padding: 0;
-}
-
-.disk-space-card {
-  display: flex;
-  gap: 24px;
-  margin-bottom: 20px;
-  flex-wrap: wrap;
-}
-
-.space-info-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px 20px;
-  background: #f8f9fa;
-  border-radius: 12px;
-  border: 1px solid #e9ecef;
-  min-width: 180px;
-}
-
-.space-icon {
-  font-size: 24px;
-  width: 24px;
-  height: 24px;
-}
-
-.used-icon {
-  color: #dc3545;
-}
-
-.free-icon {
-  color: #28a745;
-}
-
-.total-icon {
-  color: #007bff;
-}
-
-.space-details {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.space-label {
-  font-size: 12px;
-  font-weight: 500;
-  color: #6c757d;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.space-value {
-  font-size: 16px;
-  font-weight: 600;
-  color: #212529;
-}
-
-.disk-usage-bar {
-  margin-top: 16px;
-}
 
 .usage-bar-container {
   width: 100%;
@@ -596,13 +592,6 @@
   transition: width 0.3s ease;
 }
 
-.usage-percentage {
-  font-size: 14px;
-  font-weight: 600;
-  color: #666;
-  margin-top: 8px;
-  text-align: center;
-}
 
 .partition-table {
   width: 100%;
@@ -656,10 +645,9 @@
 }
 
 .chart-container {
-  flex: 0 0 35%;
-  max-width: 35%;
-  align-self: center;
-  justify-self: center;
+  flex: 0 0 280px;
+  max-width: 280px;
+  align-self: flex-start;
 }
 
 .chart-header {
@@ -1263,13 +1251,17 @@
     padding: 20px;
   }
   
-  .disk-space-card {
+  .disk-toolbar {
     flex-direction: column;
-    gap: 12px;
+    align-items: stretch;
   }
-  
-  .space-info-item {
-    min-width: auto;
+
+  .disk-toolbar-select {
+    flex: none;
+  }
+
+  .disk-toolbar-info {
+    flex-wrap: wrap;
   }
   
   .row {
@@ -1293,7 +1285,7 @@
 }
 
 .partition-validation-indicator {
-  margin: 16px 0;
+  margin: 8px 0;
   border-radius: 12px;
   transition: all 0.3s ease;
 }
@@ -1432,45 +1424,6 @@
 ::ng-deep .model-selector .mat-radio-outer-circle { border-color: #667eea !important; }
 ::ng-deep .model-selector .mat-radio-inner-circle { background-color: #667eea !important; }
 
-/* Overrides: info badges sin fondo ni borde, estilo neutro */
-.info-badge {
-  background: transparent;
-  border: none;
-  box-shadow: none;
-}
-
-.info-badge:hover {
-  transform: none;
-  box-shadow: none;
-}
-
-.info-badge:first-of-type,
-.info-badge:last-of-type {
-  background: transparent;
-  border-color: transparent;
-}
-
-.info-badge:first-of-type .info-icon,
-.info-badge:last-of-type .info-icon,
-.info-badge:first-of-type .info-label,
-.info-badge:last-of-type .info-label,
-.info-badge:first-of-type .info-value,
-.info-badge:last-of-type .info-value {
-  color: inherit;
-}
-
-/* Colores neutros en badges */
-.info-badge .info-label {
-  color: #333;
-}
-
-.info-badge .info-value {
-  color: #333;
-}
-
-.info-badge .info-icon {
-  color: #6c757d;
-}
 
 
 
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html
index 21f0df9..7eb5410 100644
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html
@@ -17,15 +17,9 @@
   </div>
   <div class="button-row">
     <button class="action-button" [disabled]="!selectedModelClient || !allSelected || !selectedDisk || (selectedDisk.totalDiskSize - selectedDisk.used) <= 0 || partitionValidationStatus === 'error'" (click)="save()">Ejecutar</button>
-  </div>
-
-  <div class="button-row">
-    <button class="action-button" (click)="generateInstructions()">
+    <button class="action-button secondary-button" (click)="generateInstructions()">
       Generar instrucciones
     </button>
-  </div>
-
-  <div class="button-row">
     <button class="action-button" color="accent" [disabled]="!selectedModelClient || !allSelected || !selectedDisk || (selectedDisk.totalDiskSize - selectedDisk.used) <= 0"  (click)="openScheduleModal()">
       Opciones de programación
     </button>
@@ -108,18 +102,10 @@
 
 
 <mat-dialog-content>
-  <div class="disk-selector-card" id="disk-selector">
-    <div class="card-header">
-      <mat-icon class="card-icon">storage</mat-icon>
-      <div class="card-title">
-        <h3>Selección de Disco</h3>
-        <p>Elige el disco donde se realizarán las operaciones de particionado</p>
-      </div>
-    </div>
-    
-    <div class="card-content">
-      <mat-form-field appearance="fill" class="disk-select-field">
-        <mat-label>Seleccionar disco</mat-label>
+  <div class="disk-and-partitions-container" id="disk-selector">
+    <div class="disk-toolbar">
+      <mat-form-field appearance="fill" class="disk-toolbar-select">
+        <mat-label>Disco</mat-label>
         <mat-select [(ngModel)]="selectedDiskNumber" (selectionChange)="onDiskSelectionChange()">
           <mat-option *ngFor="let disk of disks" [value]="disk.diskNumber">
             <div class="disk-option">
@@ -133,84 +119,57 @@
             </div>
           </mat-option>
         </mat-select>
-        <mat-hint *ngIf="!selectedDisk">Selecciona el disco que deseas particionar</mat-hint>
-        <mat-hint *ngIf="selectedDisk" class="selected-disk-hint">
-          <mat-icon class="hint-icon">check_circle</mat-icon>
-          Disco {{ selectedDisk.diskNumber }} seleccionado - {{ (selectedDisk.totalDiskSize / 1024).toFixed(2) }} GB
-        </mat-hint>
       </mat-form-field>
-      
-      <div class="no-disks-message" *ngIf="!disks || disks.length === 0">
-        <mat-icon class="warning-icon">warning</mat-icon>
-        <div class="message-text">
-          <span class="message-title">No hay discos disponibles</span>
-          <span class="message-subtitle">Asegúrate de que el cliente modelo tenga discos configurados</span>
+
+      <div class="disk-toolbar-info" *ngIf="selectedDisk">
+        <div class="disk-stat">
+          <span class="disk-stat-label">Usado</span>
+          <span class="disk-stat-value used">{{ selectedDisk.used | number:'1.0-0' }} MB</span>
         </div>
+        <div class="disk-stat">
+          <span class="disk-stat-label">Libre</span>
+          <span class="disk-stat-value free" [ngClass]="{'warning': (selectedDisk.used / selectedDisk.totalDiskSize) >= 0.9 && (selectedDisk.used / selectedDisk.totalDiskSize) < 1, 'danger': (selectedDisk.used / selectedDisk.totalDiskSize) >= 1}">{{ (selectedDisk.totalDiskSize - selectedDisk.used) | number:'1.0-0' }} MB</span>
+        </div>
+        <div class="disk-stat">
+          <span class="disk-stat-label">Total</span>
+          <span class="disk-stat-value">{{ selectedDisk.totalDiskSize | number:'1.0-0' }} MB</span>
+        </div>
+        <div class="disk-usage-bar-inline">
+          <div class="usage-bar-container">
+            <div class="usage-bar-fill"
+                 [style.width.%]="(selectedDisk.used / selectedDisk.totalDiskSize) * 100"
+                 [ngClass]="{'warning': (selectedDisk.used / selectedDisk.totalDiskSize) >= 0.9 && (selectedDisk.used / selectedDisk.totalDiskSize) < 1, 'danger': (selectedDisk.used / selectedDisk.totalDiskSize) >= 1}"></div>
+          </div>
+          <span class="usage-percent-label" [ngClass]="{'warning': (selectedDisk.used / selectedDisk.totalDiskSize) >= 0.9 && (selectedDisk.used / selectedDisk.totalDiskSize) < 1, 'danger': (selectedDisk.used / selectedDisk.totalDiskSize) >= 1}">{{ ((selectedDisk.used / selectedDisk.totalDiskSize) * 100) | number:'1.0-0' }}%</span>
+        </div>
+      </div>
+
+      <div class="disk-toolbar-meta" *ngIf="selectedDisk">
+        <span class="meta-chip" *ngIf="selectedModelClient?.firmwareType">
+          <mat-icon>memory</mat-icon> {{ selectedModelClient.firmwareType }}
+        </span>
+        <span class="meta-chip" *ngIf="partitionCode">
+          <mat-icon>storage</mat-icon> {{ partitionCode }}
+        </span>
+      </div>
+
+      <button class="action-button add-partition-btn" *ngIf="selectedDisk" (click)="addPartition(selectedDisk.diskNumber)">
+        <mat-icon>add</mat-icon> Añadir partición
+      </button>
+    </div>
+    
+    <div class="no-disks-message" *ngIf="!disks || disks.length === 0">
+      <mat-icon class="warning-icon">warning</mat-icon>
+      <div class="message-text">
+        <span class="message-title">No hay discos disponibles</span>
+        <span class="message-subtitle">Asegúrate de que el cliente modelo tenga discos configurados</span>
       </div>
     </div>
   </div>
 
   <div class="partition-assistant" *ngIf="selectedDisk">
-    <div class="row-button">
-      <button class="action-button" (click)="addPartition(selectedDisk.diskNumber)">Añadir partición</button>
-      
-      <div class="info-badge" *ngIf="selectedModelClient.firmwareType">
-        <mat-icon class="info-icon">memory</mat-icon>
-        <div class="info-content">
-          <span class="info-label">Firmware</span>
-          <span class="info-value">{{ selectedModelClient.firmwareType }}</span>
-        </div>
-      </div>
-      
-      <div class="info-badge" *ngIf="partitionCode">
-        <mat-icon class="info-icon">storage</mat-icon>
-        <div class="info-content">
-          <span class="info-label">Tabla de particiones</span>
-          <span class="info-value">{{ partitionCode }}</span>
-        </div>
-      </div>
-    </div>
-
-    <mat-divider style="padding: 10px;"></mat-divider>
-
     <div class="row">
       <div class="form-container">
-        <div class="disk-space-info-container" id="disk-info">
-          <div class="disk-space-card">
-            <div class="space-info-item">
-              <mat-icon class="space-icon used-icon">storage</mat-icon>
-              <div class="space-details">
-                <span class="space-label">Espacio usado</span>
-                <span class="space-value">{{ selectedDisk.used | number:'1.2-2' }} MB</span>
-              </div>
-            </div>
-            
-            <div class="space-info-item">
-              <mat-icon class="space-icon free-icon" [ngClass]="{'warning': (selectedDisk.used / selectedDisk.totalDiskSize) >= 0.9 && (selectedDisk.used / selectedDisk.totalDiskSize) < 1, 'danger': (selectedDisk.used / selectedDisk.totalDiskSize) >= 1}">cloud_done</mat-icon>
-              <div class="space-details">
-                <span class="space-label">Espacio libre</span>
-                <span class="space-value" [ngClass]="{'warning': (selectedDisk.used / selectedDisk.totalDiskSize) >= 0.9 && (selectedDisk.used / selectedDisk.totalDiskSize) < 1, 'danger': (selectedDisk.used / selectedDisk.totalDiskSize) >= 1}">{{ (selectedDisk.totalDiskSize - selectedDisk.used) | number:'1.2-2' }} MB</span>
-              </div>
-            </div>
-            
-            <div class="space-info-item">
-              <mat-icon class="space-icon total-icon">dns</mat-icon>
-              <div class="space-details">
-                <span class="space-label">Espacio total</span>
-                <span class="space-value">{{ selectedDisk.totalDiskSize | number:'1.2-2' }} MB</span>
-              </div>
-            </div>
-          </div>
-          
-          <div class="disk-usage-bar">
-            <div class="usage-bar-container">
-              <div class="usage-bar-fill" 
-                   [style.width.%]="(selectedDisk.used / selectedDisk.totalDiskSize) * 100"
-                   [ngClass]="{'warning': (selectedDisk.used / selectedDisk.totalDiskSize) >= 0.9 && (selectedDisk.used / selectedDisk.totalDiskSize) < 1, 'danger': (selectedDisk.used / selectedDisk.totalDiskSize) >= 1}"></div>
-            </div>
-            <span class="usage-percentage" [ngClass]="{'warning': (selectedDisk.used / selectedDisk.totalDiskSize) >= 0.9 && (selectedDisk.used / selectedDisk.totalDiskSize) < 1, 'danger': (selectedDisk.used / selectedDisk.totalDiskSize) >= 1}">{{ ((selectedDisk.used / selectedDisk.totalDiskSize) * 100) | number:'1.1-1' }}% usado</span>
-          </div>
-        </div>
 
         <!-- Indicador de validación de particiones -->
         <div class="partition-validation-indicator" *ngIf="selectedDisk && selectedDisk.partitions.length > 0">
diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css
index 6075acd..5d5aa1c 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@@ -10,7 +10,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 10px;
+  padding: 6px 10px;
   border-bottom: 1px solid #ddd;
 }
 
@@ -125,18 +125,19 @@
 
 .groups-button-row {
   display: flex;
-  gap: 15px;
+  gap: 8px;
   padding-right: 0.5rem;
+  align-items: center;
 }
 
 .clients-view-header {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
+  margin-bottom: 0.25rem;
+  margin-top: 0.25rem;
   align-items: center;
-  padding-right: 1rem;
+  padding-right: 0.75rem;
 }
 
 @media (max-width: 768px) {
@@ -147,10 +148,10 @@
 }
 
 .clients-title-name {
-  font-size: x-large;
+  font-size: 1.15rem;
   display: block;
-  padding: 1rem 1rem 1rem 13px;
-  margin-left: 0.6rem;
+  padding: 0.5rem 0.5rem 0.5rem 12px;
+  margin-left: 0.4rem;
   flex: 1 1 auto;
   white-space: nowrap;
   overflow: hidden;
@@ -189,6 +190,10 @@
   padding-left: 1rem;
 }
 
+.cards-select-all-inline {
+  margin-right: 4px;
+}
+
 .list-view {
   overflow-x: auto;
   display: flex;
@@ -229,13 +234,11 @@
 
 .paginator-container {
   display: flex;
-  justify-content: end;
+  justify-content: flex-end;
   margin-top: auto;
 }
 
 .cards-paginator {
-  width: 100%;
-  margin-left: 1rem;
   background-color: #fafafa;
   margin-bottom: 1rem;
 }
@@ -422,7 +425,8 @@ mat-tree mat-tree-node.disabled:hover {
 .filters-container {
   display: flex;
   flex-direction: column;
-  padding: 1em;
+  padding: 8px 12px;
+  gap: 2px;
   flex-grow: 1;
 }
 
@@ -433,6 +437,24 @@ mat-tree mat-tree-node.disabled:hover {
   box-sizing: border-box;
 }
 
+::ng-deep .filters-container .mat-form-field-wrapper {
+  padding-bottom: 4px !important;
+  margin: 0 !important;
+}
+
+::ng-deep .filters-container .mat-form-field-infix {
+  padding: 6px 0 !important;
+  font-size: 13px;
+}
+
+::ng-deep .filters-container .mat-form-field-appearance-outline .mat-form-field-outline {
+  top: 0 !important;
+}
+
+::ng-deep .filters-container .mat-form-field-label {
+  font-size: 13px !important;
+}
+
 .filters-panel {
   flex-shrink: 0;
 }
@@ -962,9 +984,9 @@ mat-button-toggle-group {
 
 .clients-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 10px;
-  padding: 0.5rem 1rem 1rem 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
+  gap: 8px;
+  padding: 0.25rem 0.75rem 0.75rem 0.75rem;
   width: 100%;
   box-sizing: border-box;
 }
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index 64451eb..efa0798 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -15,7 +15,7 @@
       </h2>
     </div>
     <div class="groups-button-row">
-      <div joyrideStep="addStep" text="{{ 'groupsAddStepText' | translate }}" style="display: flex; gap: 15px;">
+      <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 }}
@@ -294,6 +294,12 @@
             <strong>{{ selectedNode?.name }}</strong>
           </span>
           <div class="view-type-container">
+            <mat-checkbox *ngIf="currentView === 'card'" class="cards-select-all-inline" 
+              (change)="toggleAllCards()"
+              [checked]="selection.hasValue() && isAllSelected()"
+              [indeterminate]="selection.hasValue() && !isAllSelected()"
+              matTooltip="Seleccionar todos">
+            </mat-checkbox>
             <button class="action-button" [disabled]="selection.selected.length === 0" (click)="changeParent($event)"
                     matTooltip="{{ 'moveClientsTooltip' | translate }}" matTooltipShowDelay="1000">
               {{ 'changeOU' | translate }}
@@ -370,10 +376,6 @@
             <!-- Cards view -->
             <div *ngIf="currentView === 'card'">
               <section class="cards-view">
-                <mat-checkbox class="cards-select-all" (change)="toggleAllCards()"
-                  [checked]="selection.hasValue() && isAllSelected()"
-                  [indeterminate]="selection.hasValue() && !isAllSelected()">
-                </mat-checkbox>
                 <div class="clients-grid">
                   <div *ngFor="let client of arrayClients" class="client-item" [ngClass]="'status-' + client.status">
                     <div class="client-card">
diff --git a/ogWebconsole/src/app/components/task-logs/task-logs.component.css b/ogWebconsole/src/app/components/task-logs/task-logs.component.css
index f2077a2..81763a6 100644
--- a/ogWebconsole/src/app/components/task-logs/task-logs.component.css
+++ b/ogWebconsole/src/app/components/task-logs/task-logs.component.css
@@ -2,7 +2,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 10px;
+  padding: 6px 10px;
   border-bottom: 1px solid #ddd;
   background: white;
   color: #333;
@@ -56,10 +56,10 @@
 }
 
 .stats-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 15px;
-  margin: 20px 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 10px 0;
   padding: 0 10px;
   position: relative;
 }
@@ -119,12 +119,16 @@
 
 .stat-card {
   background: white;
-  border-radius: 12px;
-  padding: 20px;
+  border-radius: 20px;
+  padding: 8px 16px;
   text-align: center;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-  border-left: 4px solid #667eea;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  border-left: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
 }
 
 .stat-card.clickable {
@@ -149,8 +153,8 @@
 }
 
 .stat-card.clickable:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 .stat-card.clickable:active {
@@ -238,6 +242,28 @@
   color: #212529;
 }
 
+.stat-pending {
+  border-left-color: #ff9800;
+  background: #ff9800;
+  color: white;
+}
+
+.stat-pending .stat-number,
+.stat-pending .stat-label {
+  color: white;
+}
+
+.stat-cancelled {
+  border-left-color: #9e9e9e;
+  background: #9e9e9e;
+  color: white;
+}
+
+.stat-cancelled .stat-number,
+.stat-cancelled .stat-label {
+  color: white;
+}
+
 .stat-sent {
   border-left-color: #b19cd9;
   background: #b19cd9;
@@ -250,23 +276,25 @@
 }
 
 .stat-number {
-  font-size: 2rem;
-  font-weight: bold;
+  font-size: 1.25rem;
+  font-weight: 700;
   color: #667eea;
-  margin-bottom: 5px;
+  margin-bottom: 0;
+  line-height: 1;
 }
 
 .stat-label {
-  font-size: 0.9rem;
+  font-size: 0.75rem;
   color: #666;
   font-weight: 500;
+  white-space: nowrap;
 }
 
 .filters-section {
   background: #f8f9fa;
   border-radius: 8px;
-  margin: 20px 0;
-  padding: 20px;
+  margin: 8px 0;
+  padding: 10px 16px;
   border: 1px solid #e9ecef;
 }
 
@@ -274,7 +302,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 15px;
+  margin-bottom: 6px;
 }
 
 .filters-header-actions {
@@ -315,25 +343,25 @@
 .search-container {
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 4px;
   transition: all 0.3s ease;
 }
 
 .search-container.expanded {
-  gap: 20px;
+  gap: 8px;
 }
 
 .filter-row {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 15px;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 8px;
   align-items: end;
 }
 
 .advanced-filters {
   border-top: 1px solid #dee2e6;
-  padding-top: 15px;
-  margin-top: 10px;
+  padding-top: 8px;
+  margin-top: 4px;
 }
 
 .calendar-button-row {
@@ -360,22 +388,22 @@ table {
 
 .search-string {
   flex: 1;
-  padding: 5px;
+  padding: 0;
 }
 
 .search-boolean {
   flex: 1;
-  padding: 5px;
+  padding: 0;
 }
 
 .search-select {
   flex: 2;
-  padding: 5px;
+  padding: 0;
 }
 
 .search-date {
   flex: 1;
-  padding: 5px;
+  padding: 0;
 }
 
 .mat-elevation-z8 {
@@ -395,7 +423,7 @@ table {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 15px 20px;
+  padding: 6px 16px;
   background: #f8f9fa;
   border-bottom: 1px solid #dee2e6;
 }
@@ -505,8 +533,8 @@ table {
 
 .paginator-container {
   display: flex;
-  justify-content: end;
-  margin: 20px 0;
+  justify-content: flex-end;
+  margin: 8px 0;
   padding: 0 10px;
 }
 
@@ -667,7 +695,7 @@ button.cancel-button {
   }
   
   .stats-container {
-    grid-template-columns: repeat(2, 1fr);
+    gap: 6px;
   }
   
   .filter-row {
diff --git a/ogWebconsole/src/app/components/task-logs/task-logs.component.html b/ogWebconsole/src/app/components/task-logs/task-logs.component.html
index b2df6d8..798a273 100644
--- a/ogWebconsole/src/app/components/task-logs/task-logs.component.html
+++ b/ogWebconsole/src/app/components/task-logs/task-logs.component.html
@@ -57,6 +57,20 @@
     <div class="stat-number">{{ getStatusCount('in-progress') }}</div>
     <div class="stat-label">{{ 'inProgress' | translate }}</div>
   </div>
+  <div class="stat-card stat-pending clickable" 
+       [class.active-filter]="isFilterActive('pending')"
+       (click)="filterByPending()" 
+       matTooltip="Ver trazas pendientes">
+    <div class="stat-number">{{ getStatusCount('pending') }}</div>
+    <div class="stat-label">{{ 'pending' | translate }}</div>
+  </div>
+  <div class="stat-card stat-cancelled clickable" 
+       [class.active-filter]="isFilterActive('cancelled')"
+       (click)="filterByCancelled()" 
+       matTooltip="Ver trazas canceladas">
+    <div class="stat-number">{{ getStatusCount('cancelled') }}</div>
+    <div class="stat-label">{{ 'cancelled' | translate }}</div>
+  </div>
   <div class="stat-card stat-sent clickable" 
        [class.active-filter]="isFilterActive('sent')"
        (click)="filterBySent()" 
@@ -103,7 +117,6 @@
           (click)="clearClientFilter($event, commandClientInput)">
           <mat-icon>close</mat-icon>
         </button>
-        <mat-hint>{{ 'enterClientName' | translate }}</mat-hint>
       </mat-form-field>
 
       <mat-form-field appearance="fill" class="search-select">
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 1326dec..a8012e2 100644
--- a/ogWebconsole/src/app/components/task-logs/task-logs.component.ts
+++ b/ogWebconsole/src/app/components/task-logs/task-logs.component.ts
@@ -116,6 +116,7 @@ export class TaskLogsComponent implements OnInit, OnDestroy {
   filteredCommands!: Observable<any[]>;
   commandControl = new FormControl();
   activeFilter: string = '';
+  private eventSource: EventSource | null = null;
 
   constructor(private http: HttpClient,
     private joyrideService: JoyrideService,
@@ -145,10 +146,10 @@ export class TaskLogsComponent implements OnInit, OnDestroy {
       map(name => (name ? this._filterClients(name) : this.clients.slice()))
     );
 
-    const eventSource = new EventSource(`${this.mercureUrl}?topic=`
+    this.eventSource = new EventSource(`${this.mercureUrl}?topic=`
       + encodeURIComponent(`traces`));
 
-    eventSource.onmessage = (event) => {
+    this.eventSource.onmessage = (event) => {
       const data = JSON.parse(event.data);
       if (data && data['@id']) {
         this.updateTracesStatus(data['@id'], data.status, data.progress);
@@ -157,6 +158,9 @@ export class TaskLogsComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
+    if (this.eventSource) {
+      this.eventSource.close();
+    }
   }
 
   toggleFilters(): void {
@@ -693,6 +697,20 @@ export class TaskLogsComponent implements OnInit, OnDestroy {
     this.loadTraces();
   }
 
+  filterByPending(): void {
+    this.resetAllFilters();
+    this.filters['status'] = 'pending';
+    this.activeFilter = 'pending';
+    this.loadTraces();
+  }
+
+  filterByCancelled(): void {
+    this.resetAllFilters();
+    this.filters['status'] = 'cancelled';
+    this.activeFilter = 'cancelled';
+    this.loadTraces();
+  }
+
   filterBySent(): void {
     this.resetAllFilters();
     this.filters['status'] = 'sent';
@@ -716,6 +734,10 @@ export class TaskLogsComponent implements OnInit, OnDestroy {
         return 'Trazas fallidas';
       case 'in-progress':
         return 'Trazas en progreso';
+      case 'pending':
+        return 'Trazas pendientes';
+      case 'cancelled':
+        return 'Trazas canceladas';
       case 'sent':
         return 'Trazas enviadas';
       default:
diff --git a/ogWebconsole/src/app/layout/header/header.component.css b/ogWebconsole/src/app/layout/header/header.component.css
index 7e7c1dd..c7927d9 100644
--- a/ogWebconsole/src/app/layout/header/header.component.css
+++ b/ogWebconsole/src/app/layout/header/header.component.css
@@ -1,15 +1,16 @@
+:host {
+  display: block;
+}
+
 mat-toolbar {
-  /*height: 7vh;*/
   min-height: 65px;
   min-width: 375px;
   background: rgba(226, 232, 240, 0.8);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   color: black;
-  position: fixed;
+  position: sticky;
   top: 0;
-  left: 0;
-  right: 0;
   z-index: 1000;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
@@ -20,6 +21,15 @@ mat-toolbar {
   padding: 0 16px;
 }
 
+.sidebar-toggle-button {
+  flex-shrink: 0;
+  color: #3f51b5 !important;
+}
+
+.sidebar-toggle-button .navbar-icon {
+  color: #3f51b5 !important;
+}
+
 /* Estilos específicos para el botón del sidebar */
 .navbar-icon {
   color: #3f51b5;
diff --git a/ogWebconsole/src/app/layout/header/header.component.html b/ogWebconsole/src/app/layout/header/header.component.html
index 353e3da..df21d8c 100644
--- a/ogWebconsole/src/app/layout/header/header.component.html
+++ b/ogWebconsole/src/app/layout/header/header.component.html
@@ -1,13 +1,14 @@
 <mat-toolbar>
+  <button mat-icon-button (click)="onToggleSidebar()" matTooltip="Abrir o cerrar la barra lateral"
+    matTooltipShowDelay="1000" class="sidebar-toggle-button">
+    <mat-icon class="navbar-icon">menu</mat-icon>
+  </button>
+
   <span class="navbar-title hide-on-small" matTooltip="Consola web de administración de Opengnsys"
     matTooltipShowDelay="1000">
   </span>
 
   <div class="navbar-actions-row" *ngIf="!isSmallScreen">
-    <button mat-icon-button (click)="onToggleSidebar()" matTooltip="Abrir o cerrar la barra lateral"
-      matTooltipShowDelay="1000">
-      <mat-icon class="navbar-icon">menu</mat-icon>
-    </button>
     <button routerLink="/commands-logs" mat-button>
       <mat-icon class="trace-button" >notifications</mat-icon>
     </button>
@@ -36,10 +37,6 @@
 
   <!-- Menú desplegable para pantallas pequeñas -->
   <div *ngIf="isSmallScreen" class="isSmallScreenButtons">
-    <button mat-icon-button (click)="onToggleSidebar()" matTooltip="Abrir o cerrar la barra lateral"
-      matTooltipShowDelay="1000">
-      <mat-icon class="navbar-icon">menu</mat-icon>
-    </button>
     <button class="trace-button" routerLink="/commands-logs" mat-button>
       <mat-icon>notifications</mat-icon>
     </button>
diff --git a/ogWebconsole/src/app/layout/main-layout/main-layout.component.css b/ogWebconsole/src/app/layout/main-layout/main-layout.component.css
index 76054e4..152ecc7 100644
--- a/ogWebconsole/src/app/layout/main-layout/main-layout.component.css
+++ b/ogWebconsole/src/app/layout/main-layout/main-layout.component.css
@@ -6,7 +6,6 @@ html, body {
 
 .container {
   height: 100%;
-  padding-top: 65px; /* Asegurar que el contenido no se superponga con el header fijo */
   box-sizing: border-box;
 }
 
@@ -31,9 +30,7 @@ html, body {
   background-color: #2a2a40;
 }
 
-/* Asegurar que el contenido principal tenga el espacio correcto */
 .content {
-  padding-top: 0; /* El padding ya está en el container */
-  height: calc(100vh - 65px); /* Altura total menos el header */
+  height: 100%;
   overflow: auto;
 }
diff --git a/ogWebconsole/src/app/layout/sidebar/sidebar.component.html b/ogWebconsole/src/app/layout/sidebar/sidebar.component.html
index 0d6fc28..259838e 100644
--- a/ogWebconsole/src/app/layout/sidebar/sidebar.component.html
+++ b/ogWebconsole/src/app/layout/sidebar/sidebar.component.html
@@ -50,6 +50,13 @@
         <span>{{ 'tasks' | translate }}</span>
       </span>
     </mat-list-item>
+    <mat-list-item routerLink="/commands-logs" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_TRACE_LOGS' | translate }}"
+      matTooltipShowDelay="1000" *ngIf="auth.userCategory !== 'ou-operator' && auth.userCategory !== 'ou-minimal'">
+      <span class="entry">
+        <mat-icon class="icon">chevron_right</mat-icon>
+        <span>{{ 'traceLogs' | translate }}</span>
+      </span>
+    </mat-list-item>
   </mat-nav-list>
 
   <mat-list-item routerLink="/subnets" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_SUBNETS' | translate }}"
diff --git a/ogWebconsole/src/locale/en.json b/ogWebconsole/src/locale/en.json
index 98298f3..4611e77 100644
--- a/ogWebconsole/src/locale/en.json
+++ b/ogWebconsole/src/locale/en.json
@@ -426,6 +426,75 @@
   "TOOLTIP_COMMAND_GROUPS": "Manage command groups",
   "tasks": "Tasks",
   "TOOLTIP_TASKS": "View and manage scheduled tasks",
+  "traceLogs": "Trace logs",
+  "TOOLTIP_TRACE_LOGS": "View trace execution history",
+  "schedules": "Schedules",
+  "taskActions": "Actions",
+  "taskActionsTitle": "Task actions",
+  "taskActionsSequentialHint": "Actions are executed sequentially. If one action fails, subsequent actions are automatically cancelled.",
+  "newAction": "New Action",
+  "searchScriptContent": "Search script content",
+  "stepLabel": "Step",
+  "viewParameters": "View parameters",
+  "close": "Close",
+  "addActionTo": "Add action to",
+  "basicActions": "Basic Actions",
+  "selectBasicAction": "Select a basic system action",
+  "actionType": "Action Type",
+  "powerOnDevice": "Power On",
+  "shutdownDevice": "Shutdown",
+  "rebootDevice": "Reboot",
+  "loginSession": "Login",
+  "executionOrder": "Execution order",
+  "runScript": "Run Script",
+  "runCustomScript": "Run a custom script or create a new one",
+  "newScript": "New Script",
+  "savedScript": "Saved Script",
+  "enterScript": "Enter script",
+  "writeScriptHere": "Write your script here",
+  "saveScript": "Save Script",
+  "selectScriptToRun": "Select script to run",
+  "scriptLabel": "Script",
+  "enterParameters": "Enter parameters",
+  "valueFor": "Value for",
+  "manageTaskSchedules": "Manage task schedules for",
+  "newSchedule": "New Schedule",
+  "editSchedule": "Edit",
+  "createSchedule": "Create",
+  "taskSchedule": "Task Schedule",
+  "repetition": "Repetition",
+  "executionDate": "Execution date",
+  "executionTime": "Execution time",
+  "timeFormatHint": "Time in 24h format (e.g. 14:30)",
+  "weekDaysLabel": "Days of the week",
+  "monthsLabel": "Months",
+  "startDate": "Start date",
+  "endDate": "End date",
+  "enableSchedule": "Enable schedule",
+  "scheduleSummaryTitle": "Schedule Summary",
+  "nextExecution": "Next execution",
+  "willExecuteTimes": "Will execute {{count}} times",
+  "notCalculated": "Not calculated",
+  "notDefined": "Not defined",
+  "active": "Active",
+  "inactive": "Inactive",
+  "editScheduleTooltip": "Edit schedule",
+  "deleteScheduleTooltip": "Delete schedule",
+  "noActionsConfigured": "No actions configured.",
+  "searchScheduleLabel": "Search schedule",
+  "createTaskLabel": "Create task",
+  "addToExistingTask": "Add to existing task",
+  "selectTask": "Select a task",
+  "enterOrder": "Enter order",
+  "scopeLabel": "Scope",
+  "scopeOrganizationalUnit": "Organizational Unit",
+  "scopeClassroomsGroup": "Classrooms group",
+  "scopeClassroom": "Classrooms",
+  "scopeClientsGroup": "Client groups",
+  "scopeClients": "Clients",
+  "selectedClients": "Selected clients",
+  "preSelectedInfo": "Clients have been pre-selected from the image deployment component.",
+  "scheduleAfterCreate": "Do you want to schedule the task after creation?",
   "dhcp": "DHCP",
   "TOOLTIP_DHCP": "Configure and manage DHCP",
   "TOOLTIP_DHCP_STATUS": "Current status of the DHCP service",
@@ -600,5 +669,27 @@
   "manageHardwareTypes": "Manage hardware types",
   "resolution": "Resolution",
   "resolutionError": "Resolution is required",
-  "resolutionLabel": "Select resolution"
+  "resolutionLabel": "Select resolution",
+  "catImageOps": "Image operations",
+  "catImageOpsDesc": "Deploy or create images on devices",
+  "catPartition": "Partitioning",
+  "catPartitionDesc": "Partition and format disks",
+  "catSystemControl": "System control",
+  "catSystemControlDesc": "Power on, shut down, reboot or log in",
+  "catCustomScript": "Custom script",
+  "catCustomScriptDesc": "Run a new or saved script",
+  "deployImage": "Deploy image",
+  "createImage": "Create image",
+  "partitionAndFormat": "Partition and format",
+  "backToCategories": "Back to categories",
+  "systemActionHint": "This action will be executed directly on the devices assigned to the task. No additional configuration is needed.",
+  "assistantRequiredTitle": "Use the assistant from the device view",
+  "assistantRequiredDesc": "These operations need the device context to be configured correctly (disk size, existing partitions, available images). Use the dedicated assistants from the device or classroom view.",
+  "assistantStep1": "Go to a device or classroom in the navigation tree",
+  "assistantStep2": "Open the corresponding assistant (partitioning, deploy or create image)",
+  "assistantStep3": "In the assistant, select \"Queue\" to add the action to a scheduled task",
+  "supportedOpsLabel": "Operations available from the assistants",
+  "selectActionTypeError": "You must select an action type",
+  "executionOrderRequired": "You must specify the execution order",
+  "actionAddedSuccess": "Action added successfully"
 }
diff --git a/ogWebconsole/src/locale/es.json b/ogWebconsole/src/locale/es.json
index 0ed3206..95e1c49 100644
--- a/ogWebconsole/src/locale/es.json
+++ b/ogWebconsole/src/locale/es.json
@@ -427,6 +427,75 @@
   "TOOLTIP_COMMAND_GROUPS": "Gestionar grupos de comandos",
   "tasks": "Tareas",
   "TOOLTIP_TASKS": "Ver y gestionar tareas programadas",
+  "traceLogs": "Logs de trazas",
+  "TOOLTIP_TRACE_LOGS": "Ver el historial de ejecución de trazas",
+  "schedules": "Programaciones",
+  "taskActions": "Acciones",
+  "taskActionsTitle": "Acciones de la tarea",
+  "taskActionsSequentialHint": "Las acciones se ejecutan en orden secuencial. Si una acción falla, las siguientes se cancelan automáticamente.",
+  "newAction": "Nueva Acción",
+  "searchScriptContent": "Buscar contenido de script",
+  "stepLabel": "Paso",
+  "viewParameters": "Ver parámetros",
+  "close": "Cerrar",
+  "addActionTo": "Añadir acción a",
+  "basicActions": "Acciones Básicas",
+  "selectBasicAction": "Selecciona una acción básica del sistema",
+  "actionType": "Tipo de Acción",
+  "powerOnDevice": "Encender Equipo",
+  "shutdownDevice": "Apagar Equipo",
+  "rebootDevice": "Reiniciar Equipo",
+  "loginSession": "Iniciar Sesión",
+  "executionOrder": "Orden de ejecución",
+  "runScript": "Ejecutar Script",
+  "runCustomScript": "Ejecuta un script personalizado o crea uno nuevo",
+  "newScript": "Nuevo Script",
+  "savedScript": "Script Guardado",
+  "enterScript": "Ingrese el script",
+  "writeScriptHere": "Escriba su script aquí",
+  "saveScript": "Guardar Script",
+  "selectScriptToRun": "Seleccione script a ejecutar",
+  "scriptLabel": "Script",
+  "enterParameters": "Ingrese los parámetros",
+  "valueFor": "Valor para",
+  "manageTaskSchedules": "Gestionar programaciones de tareas en",
+  "newSchedule": "Nueva Programación",
+  "editSchedule": "Editar",
+  "createSchedule": "Crear",
+  "taskSchedule": "Programación de Tarea",
+  "repetition": "Repetición",
+  "executionDate": "Fecha de ejecución",
+  "executionTime": "Hora de ejecución",
+  "timeFormatHint": "Hora en formato 24h (ej: 14:30)",
+  "weekDaysLabel": "Días de la semana",
+  "monthsLabel": "Meses",
+  "startDate": "Fecha de inicio",
+  "endDate": "Fecha de fin",
+  "enableSchedule": "Activar programación",
+  "scheduleSummaryTitle": "Resumen de la Programación",
+  "nextExecution": "Próxima ejecución",
+  "willExecuteTimes": "Se ejecutará {{count}} veces",
+  "notCalculated": "No calculada",
+  "notDefined": "No definido",
+  "active": "Activo",
+  "inactive": "Inactivo",
+  "editScheduleTooltip": "Editar programación",
+  "deleteScheduleTooltip": "Eliminar programación",
+  "noActionsConfigured": "No hay acciones configuradas.",
+  "searchScheduleLabel": "Buscar programación",
+  "createTaskLabel": "Crear tarea",
+  "addToExistingTask": "Introducir en tarea existente",
+  "selectTask": "Seleccione una tarea",
+  "enterOrder": "Introduce el orden",
+  "scopeLabel": "Ámbito",
+  "scopeOrganizationalUnit": "Unidad Organizativa",
+  "scopeClassroomsGroup": "Grupo de aulas",
+  "scopeClassroom": "Aulas",
+  "scopeClientsGroup": "Grupos de clientes",
+  "scopeClients": "Clientes",
+  "selectedClients": "Clientes seleccionados",
+  "preSelectedInfo": "Los clientes han sido pre-seleccionados desde el componente de despliegue de imágenes.",
+  "scheduleAfterCreate": "¿Quieres programar la tarea al finalizar su creación?",
   "dhcp": "DHCP",
   "TOOLTIP_DHCP": "Configurar y administrar DHCP",
   "TOOLTIP_DHCP_STATUS": "Estado actual del servicio DHCP",
@@ -605,6 +674,28 @@
   "manageHardwareTypes": "Administrar tipos de hardware",
   "resolution": "Resolución",
   "resolutionError": "La resolución es requerida",
-  "resolutionLabel": "Seleccionar resolución"
+  "resolutionLabel": "Seleccionar resolución",
+  "catImageOps": "Operaciones de imagen",
+  "catImageOpsDesc": "Desplegar o crear imágenes en los equipos",
+  "catPartition": "Particionado",
+  "catPartitionDesc": "Particionar y formatear discos",
+  "catSystemControl": "Control del equipo",
+  "catSystemControlDesc": "Encender, apagar, reiniciar o iniciar sesión",
+  "catCustomScript": "Script personalizado",
+  "catCustomScriptDesc": "Ejecutar un script nuevo o guardado",
+  "deployImage": "Desplegar imagen",
+  "createImage": "Crear imagen",
+  "partitionAndFormat": "Particionar y formatear",
+  "backToCategories": "Volver a categorías",
+  "systemActionHint": "Esta acción se ejecutará directamente sobre los equipos asignados a la tarea. No requiere configuración adicional.",
+  "assistantRequiredTitle": "Usa el asistente desde la vista del equipo",
+  "assistantRequiredDesc": "Estas operaciones necesitan el contexto del equipo para configurarse correctamente (tamaño de disco, particiones existentes, imágenes disponibles). Usa los asistentes dedicados desde la vista del equipo o aula.",
+  "assistantStep1": "Ve a la vista de un equipo o aula en el árbol de navegación",
+  "assistantStep2": "Abre el asistente correspondiente (particionado, deploy o crear imagen)",
+  "assistantStep3": "En el asistente, selecciona \"Encolar\" para añadir la acción a una tarea programada",
+  "supportedOpsLabel": "Operaciones disponibles desde los asistentes",
+  "selectActionTypeError": "Debe seleccionar un tipo de acción",
+  "executionOrderRequired": "Debe especificar el orden de ejecución",
+  "actionAddedSuccess": "Acción añadida con éxito"
 }
   
\ No newline at end of file

From b1896f8f84bebae893733db14c3fa05c84b82b4e Mon Sep 17 00:00:00 2001
From: Manuel Aranda <maranda@qindel.com>
Date: Fri, 27 Mar 2026 09:18:26 +0100
Subject: [PATCH 02/11] refs #2883. Run as admin. Added checkbox

---
 .../run-script-assistant.component.css        | 48 ++++---------------
 .../run-script-assistant.component.html       | 13 +++--
 .../run-script-assistant.component.ts         |  4 +-
 3 files changed, 20 insertions(+), 45 deletions(-)

diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.css b/ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.css
index 9227a68..10c99de 100644
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.css
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.css
@@ -104,6 +104,7 @@ table {
   padding: 24px 32px;
   background: white;
   border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   margin-bottom: 20px;
 }
 
@@ -389,13 +390,13 @@ table {
 .new-command-container {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  padding: 15px;
-  background-color: #eaeff6;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
-  margin-top: 15px;
+  gap: 12px;
+  padding: 20px;
+  background: white;
+  border: 1px solid #e9ecef;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  margin-top: 16px;
 }
 
 .new-command-container mat-form-field {
@@ -407,43 +408,10 @@ table {
   resize: vertical;
 }
 
-.new-command-container .action-button {
-  align-self: flex-end;
-  color: white;
-  padding: 8px 16px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
 .full-width {
   width: 100%;
 }
 
-/* Secciones del formulario */
-.form-section {
-  background: white !important;
-  border-radius: 8px;
-  padding: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  margin-bottom: 20px;
-  border: 1px solid #bbdefb;
-  padding: 20px;
-}
-
-.form-section-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 20px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.form-section-title mat-icon {
-  color: #2196f3;
-}
 .toggle-options {
   display: flex;
   gap: 10px;
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.html
index 7e772c9..36f19de 100644
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.html
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.html
@@ -7,7 +7,7 @@
     </h2>
     <div class="destination-info">
       <div class="destination-badge">
-        <mat-icon class="destination-icon">cloud_download</mat-icon>
+        <mat-icon class="destination-icon">terminal</mat-icon>
         <div class="destination-content">
           <span class="destination-label">Destino</span>
           <span class="destination-value">{{ runScriptTitle }}</span>
@@ -25,7 +25,6 @@
     </button>
   </div>
 </div>
-<mat-divider></mat-divider>
 
 <div class="select-container">
   <mat-expansion-panel>
@@ -65,7 +64,7 @@
             class="client-image" />
 
           <div class="client-details">
-            <span class="client-name">{{ client.name }}</span>
+            <span class="client-name">{{ client.name | slice:0:20 }}</span>
             <span class="client-ip">{{ client.ip }}</span>
             <span class="client-ip">{{ client.mac }}</span>
           </div>
@@ -83,6 +82,12 @@
       Configuración de script
     </div>
 
+    <div class="run-as-admin-container">
+      <mat-checkbox [(ngModel)]="runAsAdmin" color="primary">
+        Ejecutar como administrador
+      </mat-checkbox>
+    </div>
+
     <div class="action-chips-container">
       <mat-chip-listbox [(ngModel)]="commandType" required class="action-chip-listbox">
         <mat-chip-option value="new" class="action-chip create-chip firmware-chip" (click)="commandType = 'new'">
@@ -190,7 +195,7 @@
           
           <mat-card-content>
             <div class="script-content-wrapper">
-              <div class="script-preview" [innerHTML]="scriptContent"></div>
+              <pre class="script-preview">{{ scriptContent }}</pre>
             </div>
           </mat-card-content>
         </mat-card>
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.ts
index b844010..2366286 100644
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.ts
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.ts
@@ -36,6 +36,7 @@ export class RunScriptAssistantComponent implements OnInit{
   parameterNames: string[] = Object.keys(this.parameters);
   runScriptContext: any = null;
   newScriptParameters: string[] = [];
+  runAsAdmin: boolean = false;
 
   constructor(
     private http: HttpClient,
@@ -200,7 +201,8 @@ export class RunScriptAssistantComponent implements OnInit{
         this.http.post(`${this.baseUrl}/commands/run-script`, {
           clients: this.selectedClients.map((client: any) => client.uuid),
           script: this.commandType === 'existing' ? this.scriptContent : this.newScript,
-          queue: result
+          queue: result,
+          runAsAdmin: this.runAsAdmin
         }).subscribe(
           response => {
             this.toastService.success('Script ejecutado correctamente');

From bcce583269ab2acab4bba0563305dfffcb1c71b4 Mon Sep 17 00:00:00 2001
From: Manuel Aranda <maranda@qindel.com>
Date: Mon, 6 Apr 2026 10:55:02 +0200
Subject: [PATCH 03/11] refs #2912. Bug when delete image permanent

---
 .../show-monolitic-images.component.html                  | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.html b/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.html
index cf7485c..c024d87 100644
--- a/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.html
+++ b/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.html
@@ -92,15 +92,17 @@
         <button mat-icon-button color="primary" (click)="toggleAction(image, 'edit')">
           <mat-icon i18n="@@deleteElementTooltip">edit</mat-icon>
         </button>
-        <button mat-icon-button color="warn" (click)="toggleAction(image, 'delete-trash')">
-          <mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
+        <button mat-icon-button color="warn"
+          [matTooltip]="image.status === 'trash' ? 'Eliminar permanentemente' : 'Mover a papelera'"
+          (click)="toggleAction(image, image.status === 'trash' ? 'delete-permanent' : 'delete-trash')">
+          <mat-icon>{{ image.status === 'trash' ? 'delete_forever' : 'delete' }}</mat-icon>
         </button>
         <button mat-icon-button [matMenuTriggerFor]="menu">
           <mat-icon>menu</mat-icon>
         </button>
         <mat-menu #menu="matMenu">
           <button mat-menu-item (click)="toggleAction(image, 'get-aux')">Obtener ficheros auxiliares</button>
-          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
+          <button mat-menu-item [disabled]="!image.imageFullsum || (image.status !== 'success' && image.status !== 'trash')"
             (click)="toggleAction(image, 'delete-permanent')">Eliminar permanentemente</button>
           <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'trash'"
             (click)="toggleAction(image, 'recover')">Recuperar imagen de la papelera</button>

From af8f793dec47f0758cb1ce9f198895705c4f8e2f Mon Sep 17 00:00:00 2001
From: Manuel Aranda <maranda@qindel.com>
Date: Tue, 7 Apr 2026 17:55:15 +0200
Subject: [PATCH 04/11] refs #2938. Added ogAgent download link

---
 .../app/layout/header/header.component.css    | 20 +++++++++++++++++++
 .../app/layout/header/header.component.html   | 10 ++++++++++
 ogWebconsole/src/assets/config.json           |  2 +-
 ogWebconsole/src/locale/en.json               |  1 +
 ogWebconsole/src/locale/es.json               |  1 +
 5 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/ogWebconsole/src/app/layout/header/header.component.css b/ogWebconsole/src/app/layout/header/header.component.css
index c7927d9..e186ef8 100644
--- a/ogWebconsole/src/app/layout/header/header.component.css
+++ b/ogWebconsole/src/app/layout/header/header.component.css
@@ -77,6 +77,26 @@ mat-toolbar button[mat-icon-button]:hover {
   cursor: pointer;
 }
 
+.download-agent-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  text-decoration: none;
+  color: inherit;
+  padding: 4px 10px !important;
+  font-size: 13px !important;
+  line-height: 1;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-weight: 400;
+}
+
+.download-icon {
+  font-size: 14px !important;
+  width: 14px !important;
+  height: 14px !important;
+  line-height: 14px !important;
+}
+
 .logout-button {
   background-color: #f00e0e;
   color: white;
diff --git a/ogWebconsole/src/app/layout/header/header.component.html b/ogWebconsole/src/app/layout/header/header.component.html
index df21d8c..b520422 100644
--- a/ogWebconsole/src/app/layout/header/header.component.html
+++ b/ogWebconsole/src/app/layout/header/header.component.html
@@ -14,6 +14,12 @@
     </button>
 
     <div class="navbar-buttons-row">
+      <a class="ordinary-button download-agent-button" href="https://ognproject.evlt.uma.es/ogagent/" target="_blank" rel="noopener noreferrer"
+        matTooltip="Descargar el agente OGAgent" matTooltipShowDelay="1000">
+        <mat-icon class="download-icon">download</mat-icon>
+        {{ 'downloadAgent' | translate }}
+      </a>
+
       <button class="ordinary-button" (click)="showGlobalStatus()">
         {{ 'GlobalStatus' | translate }}
       </button>
@@ -44,6 +50,10 @@
       <mat-icon>menu</mat-icon>
     </button>
     <mat-menu #smallScreenMenu="matMenu">
+      <a mat-menu-item href="https://ognproject.evlt.uma.es/ogagent/" target="_blank" rel="noopener noreferrer">
+        <mat-icon>download</mat-icon>
+        {{ 'downloadAgent' | translate }}
+      </a>
       <button mat-menu-item (click)="showGlobalStatus()">
         {{ 'GlobalStatus' | translate }}
       </button>
diff --git a/ogWebconsole/src/assets/config.json b/ogWebconsole/src/assets/config.json
index 1bc8585..c7f30ac 100644
--- a/ogWebconsole/src/assets/config.json
+++ b/ogWebconsole/src/assets/config.json
@@ -1,5 +1,5 @@
 {
-    "apiUrl": "https://192.168.68.62:8443",
+    "apiUrl": "https://127.0.0.1:8443",
     "mercureUrl": "http://localhost:3000/.well-known/mercure",
     "logUrl": "https://localhost:3030"
 }
diff --git a/ogWebconsole/src/locale/en.json b/ogWebconsole/src/locale/en.json
index 4611e77..045a408 100644
--- a/ogWebconsole/src/locale/en.json
+++ b/ogWebconsole/src/locale/en.json
@@ -1,4 +1,5 @@
 {
+  "downloadAgent": "Download agent",
   "Administration": "Administration",
   "changePassword": "Change password",
   "logout": "Logout",
diff --git a/ogWebconsole/src/locale/es.json b/ogWebconsole/src/locale/es.json
index 95e1c49..47cc190 100644
--- a/ogWebconsole/src/locale/es.json
+++ b/ogWebconsole/src/locale/es.json
@@ -1,4 +1,5 @@
 {
+  "downloadAgent": "Descargar OgAgent",
   "Administration": "Administración",
   "changePassword": "Cambiar contraseña",
   "logout": "Cerrar sesión",

From b2b3dc47afd794c1240d41e567b82ccb43f63620 Mon Sep 17 00:00:00 2001
From: Manuel Aranda <maranda@qindel.com>
Date: Wed, 8 Apr 2026 17:23:56 +0200
Subject: [PATCH 05/11] refs #2940. Status - classromm

---
 .../components/groups/groups.component.html   |  6 +--
 .../app/components/groups/groups.component.ts | 38 ++++++++++++++-----
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index efa0798..9968afe 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -402,7 +402,7 @@
                             <mat-icon>more_vert</mat-icon>
                           </button>
 
-                          <span class="sync-spinner" *ngIf="syncStatus && syncingClientId === client.uuid">
+                          <span class="sync-spinner" *ngIf="syncingClientIds.has(client.uuid)">
                             <mat-spinner diameter="24"></mat-spinner>
                           </span>
 
@@ -415,7 +415,7 @@
                               <mat-icon>visibility</mat-icon>
                               <span>{{ 'viewDetails' | translate }}</span>
                             </button>
-                            <button mat-menu-item *ngIf="(!syncStatus || syncingClientId !== client.uuid)"
+                            <button mat-menu-item *ngIf="!syncingClientIds.has(client.uuid)"
                               (click)="getStatus(client, selectedNode)">
                               <mat-icon>sync</mat-icon>
                               <span>{{ 'sync' | translate }}</span>
@@ -499,7 +499,7 @@
                       <div class="client-status-container">
                         <img [src]="'assets/images/computer_' + client.status + '.svg'" alt="Client Icon"
                           class="client-image" />
-                        <span *ngIf="syncStatus && syncingClientId === client.uuid">
+                        <span *ngIf="syncingClientIds.has(client.uuid)">
                           <mat-spinner diameter="24"></mat-spinner>
                         </span>
                       </div>
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index 93d99ea..99eb145 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -75,8 +75,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
   currentView: string = 'list';
   savedFilterNames: [string, string][] = [];
   selectedTreeFilter = '';
-  syncStatus = false;
-  syncingClientId: string | null = null;
+  syncingClientIds = new Set<string>();
   private originalTreeData: TreeNode[] = [];
   arrayClients: any[] = [];
   filters: { [key: string]: string } = {};
@@ -406,6 +405,10 @@ export class GroupsComponent implements OnInit, OnDestroy {
     this.selectedNode = node;
     const selectedClientsBeforeEdit = this.selection.selected.map(client => client.uuid);
     this.fetchClientsForNode(node, selectedClientsBeforeEdit);
+
+    if (node.type === NodeType.Classroom || node.type === NodeType.ClassroomsGroup) {
+      this.getStatusForAllClientsInNode(node);
+    }
   }
 
   onMenuClick(event: Event, node: any): void {
@@ -796,24 +799,20 @@ export class GroupsComponent implements OnInit, OnDestroy {
   getStatus(client: Client, node: any): void {
     if (!client.uuid || !client['@id']) return;
 
-    this.syncingClientId = client.uuid;
-    this.syncStatus = true;
+    this.syncingClientIds.add(client.uuid);
 
     const parentNodeId = client.organizationalUnit?.id || node.id;
-    console.log('Parent node id:', parentNodeId);
 
     this.subscriptions.add(
       this.http.post(`${this.baseUrl}${client['@id']}/agent/status`, {}).subscribe(
         () => {
           this.toastr.success('Cliente actualizado correctamente');
-          this.syncStatus = false;
-          this.syncingClientId = null;
+          this.syncingClientIds.delete(client.uuid);
           this.refreshData(parentNodeId)
         },
         (error) => {
           this.toastr.error(error.error['hydra:description'] || 'Error al actualizar el cliente');
-          this.syncStatus = false;
-          this.syncingClientId = null;
+          this.syncingClientIds.delete(client.uuid);
           this.refreshData(parentNodeId)
         }
       )
@@ -821,6 +820,27 @@ export class GroupsComponent implements OnInit, OnDestroy {
   }
 
 
+  getStatusForAllClientsInNode(node: any): void {
+    this.http.get<any>(`${this.baseUrl}/clients?organizationalUnit.id=${node.id}&itemsPerPage=1000`).subscribe({
+      next: (response: any) => {
+        const clients: Client[] = response['hydra:member'];
+        const validClients = clients.filter(client => client.uuid && client['@id']);
+        if (validClients.length === 0) return;
+
+        validClients.forEach(client => {
+          this.syncingClientIds.add(client.uuid);
+          this.subscriptions.add(
+            this.http.post(`${this.baseUrl}${client['@id']}/agent/status`, {}).subscribe({
+              next: () => this.syncingClientIds.delete(client.uuid),
+              error: () => this.syncingClientIds.delete(client.uuid),
+            })
+          );
+        });
+      }
+    });
+  }
+
+
   isAllSelected() {
     const numSelected = this.selection.selected.length;
     const numRows = this.selectedClients.data.length;

From 2012e87fb9753fe88cbdd22e677f76bba5c7c2b2 Mon Sep 17 00:00:00 2001
From: Manuel Aranda <maranda@qindel.com>
Date: Mon, 13 Apr 2026 12:01:03 +0200
Subject: [PATCH 06/11] refs #2939. Propagate network settings

---
 .../app/components/groups/groups.component.ts |   2 +-
 .../manage-organizational-unit.component.ts   | 156 +++++++++++-------
 2 files changed, 101 insertions(+), 57 deletions(-)

diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index 99eb145..f42b914 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -406,7 +406,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
     const selectedClientsBeforeEdit = this.selection.selected.map(client => client.uuid);
     this.fetchClientsForNode(node, selectedClientsBeforeEdit);
 
-    if (node.type === NodeType.Classroom || node.type === NodeType.ClassroomsGroup) {
+    if (node.type === NodeType.Classroom || node.type === NodeType.ClientsGroup) {
       this.getStatusForAllClientsInNode(node);
     }
   }
diff --git a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.ts b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.ts
index 7d573b9..8576dda 100644
--- a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.ts
+++ b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.ts
@@ -1,10 +1,11 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Component, EventEmitter, Inject, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { DataService } from "../../../services/data.service";
 import { ToastrService } from "ngx-toastr";
 import { ConfigService } from '@services/config.service';
+import { DeleteModalComponent } from '../../../../../shared/delete_modal/delete-modal/delete-modal.component';
 
 @Component({
   selector: 'app-manage-organizational-unit',
@@ -59,6 +60,7 @@ export class ManageOrganizationalUnitComponent implements OnInit {
     private dataService: DataService,
     private configService: ConfigService,
     private toastService: ToastrService,
+    private dialog: MatDialog,
     @Inject(MAT_DIALOG_DATA) public data: any
   ) {
     this.isEditMode = !!data?.uuid;
@@ -270,71 +272,113 @@ export class ManageOrganizationalUnitComponent implements OnInit {
 
   onSubmit() {
     if (this.generalFormGroup.valid && this.additionalInfoFormGroup.valid && this.networkSettingsFormGroup.valid) {
-      const parentValue = this.generalFormGroup.value.parent;
-      
-      // Preparar networkSettings con lógica condicional para p2pTime
-      const networkSettings = { ...this.networkSettingsFormGroup.value };
-      if (networkSettings.p2pMode !== 'seeder') {
-        networkSettings.p2pTime = null;
-      }
-      
-      const formData = {
-        name: this.generalFormGroup.value.name,
-        excludeParentChanges: this.generalFormGroup.value.excludeParentChanges,
-        parent: parentValue || null,
-        description: this.generalFormGroup.value.description,
-        comments: this.additionalInfoFormGroup.value.comments,
-        remoteCalendar: this.generalFormGroup.value.remoteCalendar,
-        type: this.generalFormGroup.value.type,
-        networkSettings: networkSettings,
-        location: this.classroomInfoFormGroup.value.location,
-        projector: this.classroomInfoFormGroup.value.projector,
-        board: this.classroomInfoFormGroup.value.board,
-        capacity: this.classroomInfoFormGroup.value.capacity,
-      };
-
       if (this.isEditMode) {
-        const putUrl = `${this.baseUrl}/organizational-units/${this.data.uuid}`;
-        const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
+        const confirmRef = this.dialog.open(DeleteModalComponent, {
+          width: '400px',
+          data: {
+            title: 'Propagar parámetros',
+            message: '¿Desea propagar los parámetros de red (ogLive, repositorio, menú, plantilla PXE, perfil hardware) a todos los clientes de esta unidad organizativa?',
+            confirmText: 'Sí, propagar',
+            cancelText: 'No, solo guardar',
+          }
+        });
 
-        this.http.put<any>(putUrl, formData, { headers }).subscribe(
-          response => {
+        confirmRef.afterClosed().subscribe((propagate: boolean) => {
+          this.submitForm(propagate === true);
+        });
+      } else {
+        this.submitForm(false);
+      }
+    }
+  }
+
+  private submitForm(propagate: boolean) {
+    const parentValue = this.generalFormGroup.value.parent;
+
+    const networkSettings = { ...this.networkSettingsFormGroup.value };
+    if (networkSettings.p2pMode !== 'seeder') {
+      networkSettings.p2pTime = null;
+    }
+
+    const formData = {
+      name: this.generalFormGroup.value.name,
+      excludeParentChanges: this.generalFormGroup.value.excludeParentChanges,
+      parent: parentValue || null,
+      description: this.generalFormGroup.value.description,
+      comments: this.additionalInfoFormGroup.value.comments,
+      remoteCalendar: this.generalFormGroup.value.remoteCalendar,
+      type: this.generalFormGroup.value.type,
+      networkSettings: networkSettings,
+      location: this.classroomInfoFormGroup.value.location,
+      projector: this.classroomInfoFormGroup.value.projector,
+      board: this.classroomInfoFormGroup.value.board,
+      capacity: this.classroomInfoFormGroup.value.capacity,
+    };
+
+    if (this.isEditMode) {
+      const putUrl = `${this.baseUrl}/organizational-units/${this.data.uuid}`;
+      const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
+
+      this.http.put<any>(putUrl, formData, { headers }).subscribe(
+        response => {
+          if (propagate) {
+            this.propagateNetworkSettings();
+          } else {
             this.unitAdded.emit();
             this.dialogRef.close({ success: true });
             this.toastService.success('Editado exitosamente', 'Éxito');
-          },
-          error => {
-            console.error('Error al realizar PUT:', error);
-            const errorMessages = error.error['hydra:description'].split('\n');
-            errorMessages.forEach((message: string) => {
-              const cleanedMessage = message.replace(/networkSettings\.(\w+):/, 'Error $1:');
-              this.toastService.error(cleanedMessage);
-            });
           }
-        );
-      } else {
-        const postUrl = `${this.baseUrl}/organizational-units`;
-        const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
+        },
+        error => {
+          console.error('Error al realizar PUT:', error);
+          const errorMessages = error.error['hydra:description'].split('\n');
+          errorMessages.forEach((message: string) => {
+            const cleanedMessage = message.replace(/networkSettings\.(\w+):/, 'Error $1:');
+            this.toastService.error(cleanedMessage);
+          });
+        }
+      );
+    } else {
+      const postUrl = `${this.baseUrl}/organizational-units`;
+      const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
 
-        this.http.post<any>(postUrl, formData, { headers }).subscribe(
-          response => {
-            this.unitAdded.emit(response);
-            this.dialogRef.close({ success: true });
-            this.toastService.success('Creado exitosamente', 'Éxito');
-          },
-          error => {
-            console.error('Error al realizar POST:', error);
-            const errorMessages = error.error['hydra:description'].split('\n');
-            errorMessages.forEach((message: string) => {
-              const cleanedMessage = message.replace(/networkSettings\.(\w+):/, 'Error $1:');
-              this.toastService.error(cleanedMessage);
-            });
-          }
-        );
-      }
+      this.http.post<any>(postUrl, formData, { headers }).subscribe(
+        response => {
+          this.unitAdded.emit(response);
+          this.dialogRef.close({ success: true });
+          this.toastService.success('Creado exitosamente', 'Éxito');
+        },
+        error => {
+          console.error('Error al realizar POST:', error);
+          const errorMessages = error.error['hydra:description'].split('\n');
+          errorMessages.forEach((message: string) => {
+            const cleanedMessage = message.replace(/networkSettings\.(\w+):/, 'Error $1:');
+            this.toastService.error(cleanedMessage);
+          });
+        }
+      );
     }
   }
 
+  private propagateNetworkSettings() {
+    const propagateUrl = `${this.baseUrl}/organizational-units/${this.data.uuid}/propagate-network-settings`;
+    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
+
+    this.http.post<any>(propagateUrl, {}, { headers }).subscribe(
+      () => {
+        this.unitAdded.emit();
+        this.dialogRef.close({ success: true });
+        this.toastService.success('Editado y parámetros propagados exitosamente', 'Éxito');
+      },
+      error => {
+        console.error('Error al propagar parámetros:', error);
+        this.unitAdded.emit();
+        this.dialogRef.close({ success: true });
+        this.toastService.warning('Guardado, pero hubo un error al propagar los parámetros', 'Aviso');
+      }
+    );
+  }
+
   getSelectedParentName(): string | undefined {
     const parentId = this.generalFormGroup.get('parent')?.value;
     return this.parentUnitsWithPaths.find(unit => unit.id === parentId)?.name;

From dc9bfa46c302f8998121c7f959973c9d75b9f4f4 Mon Sep 17 00:00:00 2001
From: Manuel Aranda <maranda@qindel.com>
Date: Mon, 13 Apr 2026 12:15:18 +0200
Subject: [PATCH 07/11] refs #2942. OU - Clientes by node toggle

---
 .../components/groups/groups.component.css    |  7 +++++
 .../components/groups/groups.component.html   | 10 +++++++
 .../app/components/groups/groups.component.ts | 26 ++++++++++++++++---
 ogWebconsole/src/locale/en.json               |  2 ++
 ogWebconsole/src/locale/es.json               |  2 ++
 5 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css
index 5d5aa1c..2763305 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@@ -437,6 +437,13 @@ mat-tree mat-tree-node.disabled:hover {
   box-sizing: border-box;
 }
 
+.direct-clients-toggle {
+  display: flex;
+  align-items: center;
+  padding: 4px 2px;
+  font-size: 13px;
+}
+
 ::ng-deep .filters-container .mat-form-field-wrapper {
   padding-bottom: 4px !important;
   margin: 0 !important;
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index 9968afe..0becf16 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -104,6 +104,16 @@
               </button>
             </mat-form-field>
 
+            <div class="direct-clients-toggle">
+              <mat-slide-toggle
+                [(ngModel)]="showOnlyDirectClients"
+                (change)="onDirectClientsToggleChange()"
+                matTooltip="{{ 'directClientsToggleTooltip' | translate }}"
+                matTooltipShowDelay="1000">
+                {{ 'directClientsToggle' | translate }}
+              </mat-slide-toggle>
+            </div>
+
             <!-- Funcionalidad actualmente deshabilitada-->
             <!-- <mat-form-field appearance="outline">
             <mat-select (selectionChange)="loadSelectedFilter($event.value)" placeholder="Cargar filtro" disabled>
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index f42b914..266cbf3 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -81,6 +81,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
   filters: { [key: string]: string } = {};
   private clientFilterSubject = new Subject<string>();
   loading = false;
+  showOnlyDirectClients: boolean = false;
 
   // Nuevas propiedades para funcionalidades mejoradas
   selectedClient: any = null;
@@ -431,11 +432,21 @@ export class GroupsComponent implements OnInit, OnDestroy {
     this.isLoadingClients = true;
     this.http.get<any>(`${this.baseUrl}/clients?organizationalUnit.id=${node.id}&page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params: backendParams }).subscribe({
       next: (response: any) => {
-        this.selectedClients.data = response['hydra:member'];
-        if (this.selectedNode) {
-          this.selectedNode.clients = response['hydra:member'];
+        let members = response['hydra:member'];
+        let total = response['hydra:totalItems'];
+
+        if (this.showOnlyDirectClients && node['@id']) {
+          members = members.filter((client: any) =>
+            client.organizationalUnit?.['@id'] === node['@id']
+          );
+          total = members.length;
         }
-        this.length = response['hydra:totalItems'];
+
+        this.selectedClients.data = members;
+        if (this.selectedNode) {
+          this.selectedNode.clients = members;
+        }
+        this.length = total;
         this.arrayClients = this.selectedClients.data;
         this.hasClients = this.selectedClients.data.length > 0;
         this.isLoadingClients = false;
@@ -458,6 +469,13 @@ export class GroupsComponent implements OnInit, OnDestroy {
     });
   }
 
+  onDirectClientsToggleChange(): void {
+    this.page = 0;
+    if (this.selectedNode) {
+      this.fetchClientsForNode(this.selectedNode);
+    }
+  }
+
   onPageChange(event: PageEvent): void {
     this.page = event.pageIndex;
     this.itemsPerPage = event.pageSize;
diff --git a/ogWebconsole/src/locale/en.json b/ogWebconsole/src/locale/en.json
index 045a408..6761d0f 100644
--- a/ogWebconsole/src/locale/en.json
+++ b/ogWebconsole/src/locale/en.json
@@ -576,6 +576,8 @@
   "vistatarjeta": "Card View",
   "ejecutarComandos": "Execute Commands",
   "searchState": "Search state",
+  "directClientsToggle": "Current node only",
+  "directClientsToggleTooltip": "Show only equipment directly assigned to the selected node (no descendants)",
   "executeCommands": {
     "powerOn": "Power On",
     "powerOff": "Shut Down",
diff --git a/ogWebconsole/src/locale/es.json b/ogWebconsole/src/locale/es.json
index 47cc190..dab2251 100644
--- a/ogWebconsole/src/locale/es.json
+++ b/ogWebconsole/src/locale/es.json
@@ -577,6 +577,8 @@
   "vistatarjeta": "Vista Tarjeta",
   "ejecutarComandos": "Ejecutar Comandos",
   "searchState": "Buscar por estado",
+  "directClientsToggle": "Solo nodo actual",
+  "directClientsToggleTooltip": "Mostrar solo los equipos directamente asignados al nodo seleccionado (sin descendientes)",
   "executeCommands": {
     "powerOn": "Encender",
     "powerOff": "Apagar",

From 382eb3e6db3cee30d40ac06a90995727b1ba5288 Mon Sep 17 00:00:00 2001
From: Manuel Aranda <maranda@qindel.com>
Date: Tue, 14 Apr 2026 18:19:03 +0200
Subject: [PATCH 08/11] refs #2956. Added new param clientsPerPage

---
 .../users/add-user-modal/add-user-modal.component.html     | 6 ++++++
 .../users/users/add-user-modal/add-user-modal.component.ts | 7 +++++--
 .../app/components/admin/users/users/users.component.ts    | 5 +++++
 ogWebconsole/src/app/components/groups/groups.component.ts | 1 +
 ogWebconsole/src/app/services/auth.service.ts              | 6 ++++++
 5 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html b/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html
index 6139635..f441c10 100644
--- a/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html
+++ b/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html
@@ -38,6 +38,12 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
+
+    <mat-form-field appearance="fill" class="full-width">
+      <mat-label>Clientes por página</mat-label>
+      <input matInput formControlName="clientsPerPage" type="number" min="1" placeholder="Por defecto (20)">
+      <mat-hint>Número de clientes mostrados por página en el listado</mat-hint>
+    </mat-form-field>
   </form>
 </mat-dialog-content>
 <mat-dialog-actions class="action-container">
diff --git a/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.ts b/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.ts
index add5556..5642ee8 100644
--- a/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.ts
+++ b/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.ts
@@ -48,6 +48,7 @@ export class AddUserModalComponent implements OnInit {
       password: ['', Validators.required],
       role: ['', Validators.required],
       groupsView: ['card', Validators.required],
+      clientsPerPage: [null, [Validators.min(1)]],
       organizationalUnits: [[]]
     });
 
@@ -82,7 +83,8 @@ export class AddUserModalComponent implements OnInit {
           username: response.username,
           role: response.userGroups.length > 0 ? response.userGroups[0]['@id'] : null,
           organizationalUnits: organizationalUnitIds,
-          groupsView: response.groupsView
+          groupsView: response.groupsView,
+          clientsPerPage: response.clientsPerPage ?? null
         });
 
         this.userId = response['@id'];
@@ -108,7 +110,8 @@ export class AddUserModalComponent implements OnInit {
         allowedOrganizationalUnits: this.userForm.value.organizationalUnits,
         enabled: true,
         userGroups: [this.userForm.value.role],
-        groupsView: this.userForm.value.groupsView
+        groupsView: this.userForm.value.groupsView,
+        clientsPerPage: this.userForm.value.clientsPerPage || null
       };
 
       if (!this.userId && this.userForm.value.password) {
diff --git a/ogWebconsole/src/app/components/admin/users/users/users.component.ts b/ogWebconsole/src/app/components/admin/users/users/users.component.ts
index 73abe86..a7d3ce5 100644
--- a/ogWebconsole/src/app/components/admin/users/users/users.component.ts
+++ b/ogWebconsole/src/app/components/admin/users/users/users.component.ts
@@ -38,6 +38,11 @@ export class UsersComponent implements OnInit {
       header: 'Vista de Grupos',
       cell: (user: any) => `${user.groupsView}`
     },
+    {
+      columnDef: 'clientsPerPage',
+      header: 'Clientes por página',
+      cell: (user: any) => user.clientsPerPage != null ? `${user.clientsPerPage}` : '-'
+    },
     {
       columnDef: 'allowedOrganizationalUnits',
       header: 'Unidades Organizacionales Permitidas',
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index 266cbf3..f761051 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -151,6 +151,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
 
     this.treeDataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
     this.currentView = this.auth.groupsView || 'list';
+    this.itemsPerPage = this.auth.clientsPerPage || 20;
   }
 
 
diff --git a/ogWebconsole/src/app/services/auth.service.ts b/ogWebconsole/src/app/services/auth.service.ts
index 84fdabb..80d820c 100644
--- a/ogWebconsole/src/app/services/auth.service.ts
+++ b/ogWebconsole/src/app/services/auth.service.ts
@@ -15,6 +15,7 @@ interface JwtPayload {
   id: number;
   uuid: string;
   groupsView: string;
+  clientsPerPage: number | null;
 }
 
 @Injectable({ providedIn: 'root' })
@@ -94,6 +95,11 @@ export class AuthService {
     return this.tokenPayload?.groupsView || null;
   }
 
+  /** clientsPerPage del usuario */
+  get clientsPerPage(): number | null {
+    return this.tokenPayload?.clientsPerPage ?? null;
+  }
+
   /**
  * Devuelve el rol principal del usuario según prioridad.
  */

From d2cf87510bd0160f8c94249772d32babd7e33d84 Mon Sep 17 00:00:00 2001
From: Manuel Aranda <maranda@qindel.com>
Date: Wed, 15 Apr 2026 12:14:03 +0200
Subject: [PATCH 09/11] refs #2944. New datasize column in Imange entity

---
 .../show-monolitic-images.component.html      |  8 ++++++-
 .../show-monolitic-images.component.ts        | 23 ++++++++++++++++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.html b/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.html
index c024d87..08e72e7 100644
--- a/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.html
+++ b/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.html
@@ -60,6 +60,12 @@
             {{ image.partitionInfo?.osName }}
           </div>
         </ng-container>
+        <ng-container *ngIf="column.columnDef === 'datasize'">
+          <div>{{ formatSize(image.datasize) }}</div>
+          <div style="font-size: 0.75rem; color: gray;">
+            Comprimido: {{ formatSize(image.size) }}
+          </div>
+        </ng-container>
         <ng-container *ngIf="column.columnDef === 'isGlobal'">
           <mat-chip>
             {{ image.image?.isGlobal  ? 'Sí' : 'No' }}
@@ -78,7 +84,7 @@
           </mat-chip>
         </ng-container>
         <ng-container
-          *ngIf="column.columnDef !== 'remotePc' && column.columnDef !== 'status' && column.columnDef !== 'isGlobal' && column.columnDef !== 'name'">
+          *ngIf="column.columnDef !== 'remotePc' && column.columnDef !== 'status' && column.columnDef !== 'isGlobal' && column.columnDef !== 'name' && column.columnDef !== 'datasize'">
           {{ column.cell(image) }}
         </ng-container>
       </td>
diff --git a/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.ts b/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.ts
index 8a6e185..a37a071 100644
--- a/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.ts
+++ b/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.ts
@@ -61,6 +61,11 @@ export class ShowMonoliticImagesComponent implements OnInit {
       header: 'Estado',
       cell: (image: any) => image.status
     },
+    {
+      columnDef: 'datasize',
+      header: 'Tamaño',
+      cell: (image: any) => this.formatSize(image.datasize)
+    },
     {
       columnDef: 'description',
       header: 'Descripción',
@@ -144,17 +149,19 @@ export class ShowMonoliticImagesComponent implements OnInit {
 
   showImageInfo(event: MouseEvent, image:any) {
     event.stopPropagation();
+    this.loading = true;
     this.loadImageAlert(image).subscribe(
       response => {
         this.alertMessage = response;
+        this.loading = false;
 
+        this.loadData();
         this.dialog.open(ServerInfoDialogComponent, {
           width: '800px',
           data: {
             message: this.alertMessage
           }
         });
-        this.loading = false;
       },
       error => {
         this.toastService.error(error.error['hydra:description']);
@@ -427,5 +434,19 @@ export class ShowMonoliticImagesComponent implements OnInit {
     this.dialogRef.close();
   }
 
+  formatSize(bytes: string | number | null | undefined): string {
+    if (bytes === null || bytes === undefined || bytes === '') return '-';
+    const n = Number(bytes);
+    if (isNaN(n) || n === 0) return '-';
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let i = 0;
+    let value = n;
+    while (value >= 1024 && i < units.length - 1) {
+      value /= 1024;
+      i++;
+    }
+    return `${value.toFixed(2)} ${units[i]}`;
+  }
+
   protected readonly isDevMode = isDevMode;
 }

From 0dcaff990c0c454a661d1f7c99ff63f0062449e9 Mon Sep 17 00:00:00 2001
From: Manuel Aranda <maranda@qindel.com>
Date: Wed, 15 Apr 2026 12:40:30 +0200
Subject: [PATCH 10/11] refs #2957. Sync repo - ogcore

---
 .../server-info-dialog.component.css               | 14 ++++++++++++++
 .../server-info-dialog.component.html              |  2 +-
 .../show-monolitic-images.component.html           |  2 +-
 .../show-monolitic-images.component.ts             |  2 +-
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/ogWebconsole/src/app/components/ogdhcp/server-info-dialog/server-info-dialog.component.css b/ogWebconsole/src/app/components/ogdhcp/server-info-dialog/server-info-dialog.component.css
index e69de29..2f1d175 100644
--- a/ogWebconsole/src/app/components/ogdhcp/server-info-dialog/server-info-dialog.component.css
+++ b/ogWebconsole/src/app/components/ogdhcp/server-info-dialog/server-info-dialog.component.css
@@ -0,0 +1,14 @@
+::ng-deep .mat-mdc-dialog-container {
+  max-height: 80vh;
+}
+
+::ng-deep .mat-mdc-dialog-content {
+  max-height: 65vh !important;
+  overflow-y: auto !important;
+}
+
+.info-content {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
diff --git a/ogWebconsole/src/app/components/ogdhcp/server-info-dialog/server-info-dialog.component.html b/ogWebconsole/src/app/components/ogdhcp/server-info-dialog/server-info-dialog.component.html
index 2a71554..f176224 100644
--- a/ogWebconsole/src/app/components/ogdhcp/server-info-dialog/server-info-dialog.component.html
+++ b/ogWebconsole/src/app/components/ogdhcp/server-info-dialog/server-info-dialog.component.html
@@ -1,6 +1,6 @@
 <h2 mat-dialog-title>Información</h2>
 <mat-dialog-content>
-  <pre>{{ data | json }}</pre>
+  <pre class="info-content">{{ data | json }}</pre>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
   <button class="ordinary-button" mat-dialog-close>Cerrar</button>
diff --git a/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.html b/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.html
index 08e72e7..ab803b9 100644
--- a/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.html
+++ b/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.html
@@ -8,7 +8,7 @@
     </div>
     <div class="images-button-row">
       <button class="action-button" (click)="openImageInfoDialog()">Ver Información</button>
-      <button disabled class="action-button" (click)="syncRepository()">Sincronizar base de datos</button>
+      <button class="action-button" (click)="syncRepository()">Sincronizar base de datos</button>
       <button class="action-button" (click)="importImage()">
         {{ 'importImageButton' | translate }}
       </button>
diff --git a/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.ts b/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.ts
index a37a071..4ca9eab 100644
--- a/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.ts
+++ b/ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.ts
@@ -414,7 +414,7 @@ export class ShowMonoliticImagesComponent implements OnInit {
     this.loading = true;
     this.loadAlert().subscribe(
       response => {
-        this.alertMessage = response.output;
+        this.alertMessage = response.details;
 
         this.dialog.open(ServerInfoDialogComponent, {
           width: '800px',

From c25bd73bf1d8f28cec94778bc8224f321516c17c Mon Sep 17 00:00:00 2001
From: Manuel Aranda <maranda@qindel.com>
Date: Thu, 16 Apr 2026 08:03:56 +0200
Subject: [PATCH 11/11] refs #2956. Added new param clientsPerPage

---
 ogWebconsole/src/app/components/groups/groups.component.html | 2 +-
 ogWebconsole/src/app/components/groups/groups.component.ts   | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index 0becf16..f5b47d9 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -459,7 +459,7 @@
               </section>
               <div class="paginator-container">
                 <mat-paginator class="cards-paginator" [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page"
-                  [pageSizeOptions]="[5, 10, 20, 50, 100]" (page)="onPageChange($event)">
+                  [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)">
                 </mat-paginator>
               </div>
             </div>
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index f761051..5334c38 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -152,6 +152,9 @@ export class GroupsComponent implements OnInit, OnDestroy {
     this.treeDataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
     this.currentView = this.auth.groupsView || 'list';
     this.itemsPerPage = this.auth.clientsPerPage || 20;
+    if (!this.pageSizeOptions.includes(this.itemsPerPage)) {
+      this.pageSizeOptions = [...this.pageSizeOptions, this.itemsPerPage].sort((a, b) => a - b);
+    }
   }