From 16a07f5139a52a2fd88a06c7dc99bb3ebbb6860f Mon Sep 17 00:00:00 2001
From: apuente <apuente@qindel.com>
Date: Tue, 24 Sep 2024 15:02:11 +0200
Subject: [PATCH 1/3] Update commands component and add command detail
 component

---
 ogWebconsole/src/app/app.module.ts            |  2 +-
 .../commands/commands.component.css           |  7 +-
 .../commands/commands.component.html          | 34 ++++++++-
 .../components/commands/commands.component.ts | 76 +++++++++++++++----
 .../command-detail.component.css              | 11 ++-
 .../command-detail.component.html             |  0
 .../command-detail.component.spec.ts          |  0
 .../command-detail.component.ts               |  2 +-
 .../acctions-modal.component.ts               |  2 +-
 9 files changed, 112 insertions(+), 22 deletions(-)
 rename ogWebconsole/src/app/components/commands/{command-detail/command-detail => detail-command}/command-detail.component.css (87%)
 rename ogWebconsole/src/app/components/commands/{command-detail/command-detail => detail-command}/command-detail.component.html (100%)
 rename ogWebconsole/src/app/components/commands/{command-detail/command-detail => detail-command}/command-detail.component.spec.ts (100%)
 rename ogWebconsole/src/app/components/commands/{command-detail/command-detail => detail-command}/command-detail.component.ts (96%)

diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts
index 7f82a24..f75b34a 100644
--- a/ogWebconsole/src/app/app.module.ts
+++ b/ogWebconsole/src/app/app.module.ts
@@ -84,7 +84,7 @@ import { OgDhcpSubnetsComponent } from './components/ogdhcp/og-dhcp-subnets/og-d
 import { CreateSubnetComponent } from './components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet.component';
 import { AddClientsToSubnetComponent } from './components/ogdhcp/og-dhcp-subnets/add-clients-to-subnet/add-clients-to-subnet.component';
 import { CommandsComponent } from './components/commands/commands.component';
-import { CommandDetailComponent } from './components/commands/command-detail/command-detail/command-detail.component';
+import { CommandDetailComponent } from './components/commands/detail-command/command-detail.component';
 import { CreateCommandComponent } from './components/commands/create-command/create-command.component';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
diff --git a/ogWebconsole/src/app/components/commands/commands.component.css b/ogWebconsole/src/app/components/commands/commands.component.css
index cb42382..c98fd38 100644
--- a/ogWebconsole/src/app/components/commands/commands.component.css
+++ b/ogWebconsole/src/app/components/commands/commands.component.css
@@ -39,6 +39,9 @@ pre {
   margin-top: 20px;
 }
 tr:hover {
-  background-color: rgba(0, 0, 0, 0.1); 
-  cursor: pointer; 
+  background-color: rgba(219, 219, 219, 0.219); 
+}
+
+.detailBtn{
+  cursor: pointer;
 }
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/commands/commands.component.html b/ogWebconsole/src/app/components/commands/commands.component.html
index 8bc9d38..f46b3d2 100644
--- a/ogWebconsole/src/app/components/commands/commands.component.html
+++ b/ogWebconsole/src/app/components/commands/commands.component.html
@@ -6,20 +6,52 @@
 </div>
 
 <table mat-table [dataSource]="commands" class="mat-elevation-z8">
+  <!-- Nombre columna -->
   <ng-container matColumnDef="name">
     <th mat-header-cell *matHeaderCellDef> Nombre </th>
     <td mat-cell *matCellDef="let command"> {{ command.name }} </td>
   </ng-container>
 
+  <!-- Creado por columna -->
   <ng-container matColumnDef="createdBy">
     <th mat-header-cell *matHeaderCellDef> Creado por </th>
     <td mat-cell *matCellDef="let command"> {{ command.createdBy }} </td>
   </ng-container>
 
+  <!-- Fecha de creación columna -->
   <ng-container matColumnDef="createdAt">
     <th mat-header-cell *matHeaderCellDef> Fecha de creación </th>
     <td mat-cell *matCellDef="let command"> {{ command.createdAt | date:'short' }} </td>
   </ng-container>
+
+  <!-- Columna para el menú de acciones -->
+  <ng-container matColumnDef="actions">
+    <th mat-header-cell *matHeaderCellDef> Acciones </th>
+    <td mat-cell *matCellDef="let command">
+      <button mat-icon-button [matMenuTriggerFor]="menu">
+        <mat-icon>more_vert</mat-icon>
+      </button>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item (click)="executeCommand(command)">
+          <mat-icon>play_arrow</mat-icon>
+          <span>Ejecutar</span>
+        </button>
+        <button mat-menu-item (click)="viewDetails(command)">
+          <mat-icon>info</mat-icon>
+          <span>Detalles</span>
+        </button>
+        <button mat-menu-item (click)="editCommand(command)">
+          <mat-icon>edit</mat-icon>
+          <span>Editar</span>
+        </button>
+        <button mat-menu-item (click)="deleteCommand(command)">
+          <mat-icon>delete</mat-icon>
+          <span>Eliminar</span>
+        </button>
+      </mat-menu>
+    </td>
+  </ng-container>
+
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="openCommandDetailModal(row)"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>
diff --git a/ogWebconsole/src/app/components/commands/commands.component.ts b/ogWebconsole/src/app/components/commands/commands.component.ts
index cff663e..e7733d2 100644
--- a/ogWebconsole/src/app/components/commands/commands.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands.component.ts
@@ -1,8 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { MatDialog } from '@angular/material/dialog';
-import { CommandDetailComponent } from './command-detail/command-detail/command-detail.component';
+import { CommandDetailComponent } from './detail-command/command-detail.component';
 import { CreateCommandComponent } from './create-command/create-command.component';
+import { DeleteModalComponent } from '../../shared/delete_modal/delete-modal/delete-modal.component';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-commands',
@@ -10,11 +12,12 @@ import { CreateCommandComponent } from './create-command/create-command.componen
   styleUrls: ['./commands.component.css']
 })
 export class CommandsComponent implements OnInit {
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
   commands: any[] = [];
-  displayedColumns: string[] = ['name', 'createdBy', 'createdAt'];
+  displayedColumns: string[] = ['name', 'createdBy', 'createdAt', 'actions']; 
   private apiUrl = 'http://127.0.0.1:8001/commands?page=1&itemsPerPage=30';
 
-  constructor(private http: HttpClient, private dialog: MatDialog) { }
+  constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService) { }
 
   ngOnInit(): void {
     this.loadCommands();
@@ -31,17 +34,6 @@ export class CommandsComponent implements OnInit {
     );
   }
 
-  openCommandDetailModal(command: any): void {
-    const dialogRef = this.dialog.open(CommandDetailComponent, {
-      width: '800px',
-      data: command
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      this.loadCommands();
-    });
-  }
-
   openCreateCommandModal(): void {
     const dialogRef = this.dialog.open(CreateCommandComponent, {
       width: '600px'
@@ -52,5 +44,61 @@ export class CommandsComponent implements OnInit {
     });
   }
 
+  executeCommand(command: any): void {
+    console.log('Ejecutar comando:', command);
+  }
+
+  editCommand(command: any): void {
+    const dialogRef = this.dialog.open(CreateCommandComponent, {
+      width: '600px',
+      data: { command: command } 
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        console.log('Comando editado:', result);
+        this.loadCommands(); 
+      }
+    });
+  }
+
+  viewDetails(command: any): void {
+    const dialogRef = this.dialog.open(CommandDetailComponent, {
+      width: '800px',
+      data: command 
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      this.loadCommands(); 
+    });
+  }
+
+  deleteCommand(command: any): void { 
+    console.log('Eliminar comando:', command);
+    const dialogRef = this.dialog.open(DeleteModalComponent, 
+      {
+        width: '300px', 
+        data: { name: command.name } 
+      });
   
+      dialogRef.afterClosed().subscribe(result => {
+        if (result) {
+          const apiUrl = `${this.baseUrl}/commands/${command.uuid}`;
+    
+          this.http.delete(apiUrl).subscribe({
+            next: () => {
+              console.log('Role deleted successfully');
+              this.loadCommands();
+              this.toastService.success('Role deleted successfully'); 
+            },
+            error: (error) => {
+              console.error('Error deleting role:', error);
+            }
+          });
+        } else {
+          console.log('Role deletion cancelled');
+        }
+      });
+  }
+
 }
diff --git a/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.css b/ogWebconsole/src/app/components/commands/detail-command/command-detail.component.css
similarity index 87%
rename from ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.css
rename to ogWebconsole/src/app/components/commands/detail-command/command-detail.component.css
index 48e4f08..08d7eb3 100644
--- a/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.css
+++ b/ogWebconsole/src/app/components/commands/detail-command/command-detail.component.css
@@ -4,13 +4,16 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   border-radius: 10px;
   width: calc(100% - 40px);
+  max-width: 800px; 
   height: calc(100% - 40px);
-  margin: 20px;
+  max-height: 90vh; 
+  margin: 20px auto; 
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   font-family: 'Roboto', sans-serif;
   box-sizing: border-box;
+  overflow: hidden; 
 }
 
 .modal-title {
@@ -25,6 +28,7 @@
   flex-grow: 1;
   overflow-y: auto;
   padding: 10px;
+  max-height: calc(100vh - 200px); 
 }
 
 .modal-content p {
@@ -39,8 +43,11 @@
   color: #ffffff;
   padding: 15px;
   border-radius: 8px;
-  font-size: 0.9em;
+  font-size: 1.2em;
   overflow: auto;
+  max-height: 300px; 
+  white-space: pre-wrap; 
+  word-wrap: break-word;
 }
 
 .button-row {
diff --git a/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.html b/ogWebconsole/src/app/components/commands/detail-command/command-detail.component.html
similarity index 100%
rename from ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.html
rename to ogWebconsole/src/app/components/commands/detail-command/command-detail.component.html
diff --git a/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.spec.ts b/ogWebconsole/src/app/components/commands/detail-command/command-detail.component.spec.ts
similarity index 100%
rename from ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.spec.ts
rename to ogWebconsole/src/app/components/commands/detail-command/command-detail.component.spec.ts
diff --git a/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.ts b/ogWebconsole/src/app/components/commands/detail-command/command-detail.component.ts
similarity index 96%
rename from ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.ts
rename to ogWebconsole/src/app/components/commands/detail-command/command-detail.component.ts
index 93de974..f55ee4c 100644
--- a/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.ts
+++ b/ogWebconsole/src/app/components/commands/detail-command/command-detail.component.ts
@@ -1,7 +1,7 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { CreateCommandComponent } from '../../create-command/create-command.component';
+import { CreateCommandComponent } from '../create-command/create-command.component';
 import { HttpClient } from '@angular/common/http';
 
 @Component({
diff --git a/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts b/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts
index 5b5e30f..fb1b7cf 100644
--- a/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts
+++ b/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts
@@ -4,7 +4,7 @@ import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dial
 import { ToastrService } from 'ngx-toastr';
 import { CreatePxeBootFileComponent } from '../../ogboot/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component';
 import { HttpClient } from '@angular/common/http';
-import { CommandDetailComponent } from '../../commands/command-detail/command-detail/command-detail.component';
+import { CommandDetailComponent } from '../../commands/detail-command/command-detail.component';
 @Component({
   selector: 'app-acctions-modal',
   templateUrl: './acctions-modal.component.html',

From e5d1b30386f3c0e712f5419ac8a354bd5deaa68e Mon Sep 17 00:00:00 2001
From: apuente <apuente@qindel.com>
Date: Tue, 24 Sep 2024 20:22:39 +0200
Subject: [PATCH 2/3] Remove executeCommand function and console logs

---
 .../commands/commands.component.html          |  4 ---
 .../components/commands/commands.component.ts |  5 ----
 .../command-detail.component.ts               |  1 +
 .../acctions-modal.component.ts               | 28 +++++++++++--------
 .../app/components/groups/groups.component.ts |  5 ++--
 5 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/ogWebconsole/src/app/components/commands/commands.component.html b/ogWebconsole/src/app/components/commands/commands.component.html
index f46b3d2..f974425 100644
--- a/ogWebconsole/src/app/components/commands/commands.component.html
+++ b/ogWebconsole/src/app/components/commands/commands.component.html
@@ -32,10 +32,6 @@
         <mat-icon>more_vert</mat-icon>
       </button>
       <mat-menu #menu="matMenu">
-        <button mat-menu-item (click)="executeCommand(command)">
-          <mat-icon>play_arrow</mat-icon>
-          <span>Ejecutar</span>
-        </button>
         <button mat-menu-item (click)="viewDetails(command)">
           <mat-icon>info</mat-icon>
           <span>Detalles</span>
diff --git a/ogWebconsole/src/app/components/commands/commands.component.ts b/ogWebconsole/src/app/components/commands/commands.component.ts
index e7733d2..b2422d6 100644
--- a/ogWebconsole/src/app/components/commands/commands.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands.component.ts
@@ -44,10 +44,6 @@ export class CommandsComponent implements OnInit {
     });
   }
 
-  executeCommand(command: any): void {
-    console.log('Ejecutar comando:', command);
-  }
-
   editCommand(command: any): void {
     const dialogRef = this.dialog.open(CreateCommandComponent, {
       width: '600px',
@@ -74,7 +70,6 @@ export class CommandsComponent implements OnInit {
   }
 
   deleteCommand(command: any): void { 
-    console.log('Eliminar comando:', command);
     const dialogRef = this.dialog.open(DeleteModalComponent, 
       {
         width: '300px', 
diff --git a/ogWebconsole/src/app/components/commands/detail-command/command-detail.component.ts b/ogWebconsole/src/app/components/commands/detail-command/command-detail.component.ts
index f55ee4c..c1a3710 100644
--- a/ogWebconsole/src/app/components/commands/detail-command/command-detail.component.ts
+++ b/ogWebconsole/src/app/components/commands/detail-command/command-detail.component.ts
@@ -43,6 +43,7 @@ export class CommandDetailComponent implements OnInit {
     } else {
       if (this.form.get('selectedClients')?.value.length > 0) {
         console.log('Ejecutar comando con los siguientes clientes:', this.form.value.selectedClients);
+        console.log('Comando ejecutado', this.data.command);
         this.dialogRef.close();
       } else {
         this.form.get('selectedClients')?.markAsTouched();
diff --git a/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts b/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts
index fb1b7cf..c0d4d2b 100644
--- a/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts
+++ b/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts
@@ -11,6 +11,7 @@ import { CommandDetailComponent } from '../../commands/detail-command/command-de
   styleUrls: ['./acctions-modal.component.css']
 })
 export class AcctionsModalComponent {
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
   selectedElements: any;
   commands: any[] = [];
   displayedColumns: string[] = ['name', 'createdBy', 'createdAt'];
@@ -52,19 +53,22 @@ export class AcctionsModalComponent {
   }
 
 onCommandClick(command: any): void {
-  const dialogRef = this.dialog.open(CommandDetailComponent, {
-    width: '600px', 
-    data: {
-      command: command, 
-      importedClients: this.selectedElements 
-    }
-  });
+const payload = {
+  clients: this.selectedElements.map((uuid: any) => `/clients/${uuid}`)
+};
 
-  dialogRef.afterClosed().subscribe(result => {
-    if (result) {
-      console.log('Modal cerrado. Resultado:', result);
-    }
-  });
+const apiUrl = `${this.baseUrl}/commands/${command.uuid}/execute`;
+
+this.http.post(apiUrl, payload).subscribe({
+  next: () => {
+    console.log('Command executed successfully');
+    this.loadCommands();
+    this.toastService.success('Command executed successfully');
+  },
+  error: (error) => {
+    console.error('Error executing command:', error);
+  }
+});
 }
 
   chunkArray(arr: any[], chunkSize: number): any[] {
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index d5c01c3..b8be0e8 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -378,7 +378,7 @@ export class GroupsComponent implements OnInit {
 
   onCheckboxChange(event: any, name: string, uuid: string) {
     if (event.checked) {
-      this.selectedElements.push({ name, uuid });
+      this.selectedElements.push(uuid);
     } else {
       const index = this.selectedElements.indexOf(name);
       if (index > -1) {
@@ -387,14 +387,13 @@ export class GroupsComponent implements OnInit {
     }
 
     this.isAllSelected = this.selectedElements.length === this.filteredResults.length;
-    console.log(this.selectedElements);
   }
 
   toggleSelectAll() {
     this.isAllSelected = !this.isAllSelected;
 
     if (this.isAllSelected) {
-      this.selectedElements = this.filteredResults.map(result => result.name);
+      this.selectedElements = this.filteredResults.map(result => result.uuid);
     } else {
       this.selectedElements = [];
     }

From 30cd43ff0fcccafbf6d2b7534dd31ba0b3c2c257 Mon Sep 17 00:00:00 2001
From: apuente <apuente@qindel.com>
Date: Wed, 25 Sep 2024 11:07:09 +0200
Subject: [PATCH 3/3] Update main layout and sidebar styles

---
 ogWebconsole/src/app/app-routing.module.ts    |  6 +++-
 ogWebconsole/src/app/app.module.ts            | 12 +++++---
 .../commands-groups.component.css             |  0
 .../commands-groups.component.html            |  1 +
 .../commands-groups.component.spec.ts         | 23 ++++++++++++++
 .../commands-groups.component.ts              | 10 +++++++
 .../commands-task/commands-task.component.css |  0
 .../commands-task.component.html              |  1 +
 .../commands-task.component.spec.ts           | 23 ++++++++++++++
 .../commands-task/commands-task.component.ts  | 10 +++++++
 .../commands.component.css                    |  0
 .../commands.component.html                   |  0
 .../commands.component.spec.ts                |  0
 .../{ => main-commands}/commands.component.ts |  2 +-
 .../create-command.component.css              |  0
 .../create-command.component.html             |  0
 .../create-command.component.spec.ts          |  0
 .../create-command.component.ts               |  0
 .../command-detail.component.css              |  0
 .../command-detail.component.html             |  0
 .../command-detail.component.spec.ts          |  0
 .../command-detail.component.ts               | 25 ++++++++++++++--
 .../acctions-modal.component.ts               |  2 +-
 .../main-layout/main-layout.component.css     | 12 +++++---
 .../main-layout/main-layout.component.html    |  4 +--
 .../app/layout/sidebar/sidebar.component.css  | 14 +++++----
 .../app/layout/sidebar/sidebar.component.html | 30 +++++++++++++++++--
 .../app/layout/sidebar/sidebar.component.ts   |  4 +++
 28 files changed, 154 insertions(+), 25 deletions(-)
 create mode 100644 ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.css
 create mode 100644 ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.html
 create mode 100644 ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.spec.ts
 create mode 100644 ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.ts
 create mode 100644 ogWebconsole/src/app/components/commands/commands-task/commands-task.component.css
 create mode 100644 ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html
 create mode 100644 ogWebconsole/src/app/components/commands/commands-task/commands-task.component.spec.ts
 create mode 100644 ogWebconsole/src/app/components/commands/commands-task/commands-task.component.ts
 rename ogWebconsole/src/app/components/commands/{ => main-commands}/commands.component.css (100%)
 rename ogWebconsole/src/app/components/commands/{ => main-commands}/commands.component.html (100%)
 rename ogWebconsole/src/app/components/commands/{ => main-commands}/commands.component.spec.ts (100%)
 rename ogWebconsole/src/app/components/commands/{ => main-commands}/commands.component.ts (96%)
 rename ogWebconsole/src/app/components/commands/{ => main-commands}/create-command/create-command.component.css (100%)
 rename ogWebconsole/src/app/components/commands/{ => main-commands}/create-command/create-command.component.html (100%)
 rename ogWebconsole/src/app/components/commands/{ => main-commands}/create-command/create-command.component.spec.ts (100%)
 rename ogWebconsole/src/app/components/commands/{ => main-commands}/create-command/create-command.component.ts (100%)
 rename ogWebconsole/src/app/components/commands/{ => main-commands}/detail-command/command-detail.component.css (100%)
 rename ogWebconsole/src/app/components/commands/{ => main-commands}/detail-command/command-detail.component.html (100%)
 rename ogWebconsole/src/app/components/commands/{ => main-commands}/detail-command/command-detail.component.spec.ts (100%)
 rename ogWebconsole/src/app/components/commands/{ => main-commands}/detail-command/command-detail.component.ts (78%)

diff --git a/ogWebconsole/src/app/app-routing.module.ts b/ogWebconsole/src/app/app-routing.module.ts
index c2e2ca4..dbb8779 100644
--- a/ogWebconsole/src/app/app-routing.module.ts
+++ b/ogWebconsole/src/app/app-routing.module.ts
@@ -15,7 +15,9 @@ import { PxeBootFilesComponent } from './components/ogboot/pxe-boot-files/pxe-bo
 import {OgbootStatusComponent} from "./components/ogboot/ogboot-status/ogboot-status.component";
 import { OgdhcpComponent } from './components/ogdhcp/ogdhcp.component';
 import { OgDhcpSubnetsComponent } from './components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component';
-import { CommandsComponent } from './components/commands/commands.component';
+import { CommandsComponent } from './components/commands/main-commands/commands.component';
+import { CommandsGroupsComponent } from './components/commands/commands-groups/commands-groups.component';
+import { CommandsTaskComponent } from './components/commands/commands-task/commands-task.component';
 const routes: Routes = [
   { path: '', redirectTo: 'auth/login', pathMatch: 'full' },
 {
@@ -34,6 +36,8 @@ const routes: Routes = [
     { path: 'dhcp', component: OgdhcpComponent },
     { path: 'dhcp-subnets', component: OgDhcpSubnetsComponent },
     { path: 'commands', component: CommandsComponent },
+    { path: 'commands-groups', component: CommandsGroupsComponent },
+    { path: 'commands-task', component: CommandsTaskComponent },
   ],
 },
 {
diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts
index f75b34a..6165226 100644
--- a/ogWebconsole/src/app/app.module.ts
+++ b/ogWebconsole/src/app/app.module.ts
@@ -83,11 +83,13 @@ import { OgdhcpComponent } from './components/ogdhcp/ogdhcp.component';
 import { OgDhcpSubnetsComponent } from './components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component';
 import { CreateSubnetComponent } from './components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet.component';
 import { AddClientsToSubnetComponent } from './components/ogdhcp/og-dhcp-subnets/add-clients-to-subnet/add-clients-to-subnet.component';
-import { CommandsComponent } from './components/commands/commands.component';
-import { CommandDetailComponent } from './components/commands/detail-command/command-detail.component';
-import { CreateCommandComponent } from './components/commands/create-command/create-command.component';
+import { CommandsComponent } from './components/commands/main-commands/commands.component';
+import { CommandDetailComponent } from './components/commands/main-commands/detail-command/command-detail.component';
+import { CreateCommandComponent } from './components/commands/main-commands/create-command/create-command.component';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
+import { CommandsGroupsComponent } from './components/commands/commands-groups/commands-groups.component';
+import { CommandsTaskComponent } from './components/commands/commands-task/commands-task.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -132,7 +134,9 @@ import { MatNativeDateModule } from '@angular/material/core';
     AddClientsToSubnetComponent,
     CommandsComponent,
     CommandDetailComponent,
-    CreateCommandComponent
+    CreateCommandComponent,
+    CommandsGroupsComponent,
+    CommandsTaskComponent
   ],
   bootstrap: [AppComponent],
   imports: [BrowserModule,
diff --git a/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.css b/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.html b/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.html
new file mode 100644
index 0000000..aba3a48
--- /dev/null
+++ b/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.html
@@ -0,0 +1 @@
+<p>commands-groups works!</p>
diff --git a/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.spec.ts b/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.spec.ts
new file mode 100644
index 0000000..f9a69a0
--- /dev/null
+++ b/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommandsGroupsComponent } from './commands-groups.component';
+
+describe('CommandsGroupsComponent', () => {
+  let component: CommandsGroupsComponent;
+  let fixture: ComponentFixture<CommandsGroupsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CommandsGroupsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CommandsGroupsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.ts b/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.ts
new file mode 100644
index 0000000..8729d11
--- /dev/null
+++ b/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-commands-groups',
+  templateUrl: './commands-groups.component.html',
+  styleUrl: './commands-groups.component.css'
+})
+export class CommandsGroupsComponent {
+
+}
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
new file mode 100644
index 0000000..e69de29
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
new file mode 100644
index 0000000..385462e
--- /dev/null
+++ b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html
@@ -0,0 +1 @@
+<p>commands-task works!</p>
diff --git a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.spec.ts b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.spec.ts
new file mode 100644
index 0000000..d176107
--- /dev/null
+++ b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommandsTaskComponent } from './commands-task.component';
+
+describe('CommandsTaskComponent', () => {
+  let component: CommandsTaskComponent;
+  let fixture: ComponentFixture<CommandsTaskComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CommandsTaskComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CommandsTaskComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 0000000..15cf5ff
--- /dev/null
+++ b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-commands-task',
+  templateUrl: './commands-task.component.html',
+  styleUrl: './commands-task.component.css'
+})
+export class CommandsTaskComponent {
+
+}
diff --git a/ogWebconsole/src/app/components/commands/commands.component.css b/ogWebconsole/src/app/components/commands/main-commands/commands.component.css
similarity index 100%
rename from ogWebconsole/src/app/components/commands/commands.component.css
rename to ogWebconsole/src/app/components/commands/main-commands/commands.component.css
diff --git a/ogWebconsole/src/app/components/commands/commands.component.html b/ogWebconsole/src/app/components/commands/main-commands/commands.component.html
similarity index 100%
rename from ogWebconsole/src/app/components/commands/commands.component.html
rename to ogWebconsole/src/app/components/commands/main-commands/commands.component.html
diff --git a/ogWebconsole/src/app/components/commands/commands.component.spec.ts b/ogWebconsole/src/app/components/commands/main-commands/commands.component.spec.ts
similarity index 100%
rename from ogWebconsole/src/app/components/commands/commands.component.spec.ts
rename to ogWebconsole/src/app/components/commands/main-commands/commands.component.spec.ts
diff --git a/ogWebconsole/src/app/components/commands/commands.component.ts b/ogWebconsole/src/app/components/commands/main-commands/commands.component.ts
similarity index 96%
rename from ogWebconsole/src/app/components/commands/commands.component.ts
rename to ogWebconsole/src/app/components/commands/main-commands/commands.component.ts
index b2422d6..81460c5 100644
--- a/ogWebconsole/src/app/components/commands/commands.component.ts
+++ b/ogWebconsole/src/app/components/commands/main-commands/commands.component.ts
@@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http';
 import { MatDialog } from '@angular/material/dialog';
 import { CommandDetailComponent } from './detail-command/command-detail.component';
 import { CreateCommandComponent } from './create-command/create-command.component';
-import { DeleteModalComponent } from '../../shared/delete_modal/delete-modal/delete-modal.component';
+import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
 import { ToastrService } from 'ngx-toastr';
 
 @Component({
diff --git a/ogWebconsole/src/app/components/commands/create-command/create-command.component.css b/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.css
similarity index 100%
rename from ogWebconsole/src/app/components/commands/create-command/create-command.component.css
rename to ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.css
diff --git a/ogWebconsole/src/app/components/commands/create-command/create-command.component.html b/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.html
similarity index 100%
rename from ogWebconsole/src/app/components/commands/create-command/create-command.component.html
rename to ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.html
diff --git a/ogWebconsole/src/app/components/commands/create-command/create-command.component.spec.ts b/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.spec.ts
similarity index 100%
rename from ogWebconsole/src/app/components/commands/create-command/create-command.component.spec.ts
rename to ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.spec.ts
diff --git a/ogWebconsole/src/app/components/commands/create-command/create-command.component.ts b/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.ts
similarity index 100%
rename from ogWebconsole/src/app/components/commands/create-command/create-command.component.ts
rename to ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.ts
diff --git a/ogWebconsole/src/app/components/commands/detail-command/command-detail.component.css b/ogWebconsole/src/app/components/commands/main-commands/detail-command/command-detail.component.css
similarity index 100%
rename from ogWebconsole/src/app/components/commands/detail-command/command-detail.component.css
rename to ogWebconsole/src/app/components/commands/main-commands/detail-command/command-detail.component.css
diff --git a/ogWebconsole/src/app/components/commands/detail-command/command-detail.component.html b/ogWebconsole/src/app/components/commands/main-commands/detail-command/command-detail.component.html
similarity index 100%
rename from ogWebconsole/src/app/components/commands/detail-command/command-detail.component.html
rename to ogWebconsole/src/app/components/commands/main-commands/detail-command/command-detail.component.html
diff --git a/ogWebconsole/src/app/components/commands/detail-command/command-detail.component.spec.ts b/ogWebconsole/src/app/components/commands/main-commands/detail-command/command-detail.component.spec.ts
similarity index 100%
rename from ogWebconsole/src/app/components/commands/detail-command/command-detail.component.spec.ts
rename to ogWebconsole/src/app/components/commands/main-commands/detail-command/command-detail.component.spec.ts
diff --git a/ogWebconsole/src/app/components/commands/detail-command/command-detail.component.ts b/ogWebconsole/src/app/components/commands/main-commands/detail-command/command-detail.component.ts
similarity index 78%
rename from ogWebconsole/src/app/components/commands/detail-command/command-detail.component.ts
rename to ogWebconsole/src/app/components/commands/main-commands/detail-command/command-detail.component.ts
index c1a3710..d2cc7d9 100644
--- a/ogWebconsole/src/app/components/commands/detail-command/command-detail.component.ts
+++ b/ogWebconsole/src/app/components/commands/main-commands/detail-command/command-detail.component.ts
@@ -3,6 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { CreateCommandComponent } from '../create-command/create-command.component';
 import { HttpClient } from '@angular/common/http';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-command-detail',
@@ -10,6 +11,7 @@ import { HttpClient } from '@angular/common/http';
   styleUrls: ['./command-detail.component.css']
 })
 export class CommandDetailComponent implements OnInit {
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
   form!: FormGroup;
   clients: any[] = [];
   showClientSelect = false;
@@ -21,8 +23,9 @@ export class CommandDetailComponent implements OnInit {
     private http: HttpClient,
     public dialogRef: MatDialogRef<CommandDetailComponent>,
     private dialog: MatDialog,
+    private toastService: ToastrService,
     @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
+  ) { }
 
   ngOnInit(): void {
     this.form = this.fb.group({
@@ -42,8 +45,24 @@ export class CommandDetailComponent implements OnInit {
       this.showClientSelect = true;
     } else {
       if (this.form.get('selectedClients')?.value.length > 0) {
-        console.log('Ejecutar comando con los siguientes clientes:', this.form.value.selectedClients);
-        console.log('Comando ejecutado', this.data.command);
+
+        const payload = {
+          clients: this.form.value.selectedClients.map((uuid: any) => `/clients/${uuid}`)
+        };
+
+        const apiUrl = `${this.baseUrl}/commands/${this.data.command.uuid}/execute`;
+
+        this.http.post(apiUrl, payload).subscribe({
+          next: () => {
+            console.log('Command executed successfully');
+            this.dialogRef.close();
+            this.toastService.success('Command executed successfully');
+          },
+          error: (error) => {
+            console.error('Error executing command:', error);
+          }
+        });
+
         this.dialogRef.close();
       } else {
         this.form.get('selectedClients')?.markAsTouched();
diff --git a/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts b/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts
index c0d4d2b..8474ff9 100644
--- a/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts
+++ b/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts
@@ -4,7 +4,7 @@ import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dial
 import { ToastrService } from 'ngx-toastr';
 import { CreatePxeBootFileComponent } from '../../ogboot/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component';
 import { HttpClient } from '@angular/common/http';
-import { CommandDetailComponent } from '../../commands/detail-command/command-detail.component';
+import { CommandDetailComponent } from '../../commands/main-commands/detail-command/command-detail.component';
 @Component({
   selector: 'app-acctions-modal',
   templateUrl: './acctions-modal.component.html',
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 60e093c..79922ec 100644
--- a/ogWebconsole/src/app/layout/main-layout/main-layout.component.css
+++ b/ogWebconsole/src/app/layout/main-layout/main-layout.component.css
@@ -3,12 +3,16 @@
 }
 
 .container {
-  width: auto;
-  height: calc(100vh - 60px);
+  width: 100vw;
+  height: calc(100vh - 10vh); 
+}
+
+.sidebar {
+  width: 250px; 
 }
 
 .content {
   margin: 10px;
   padding: 10px;
-}
-
+  box-sizing: border-box; 
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/layout/main-layout/main-layout.component.html b/ogWebconsole/src/app/layout/main-layout/main-layout.component.html
index d9d7a08..7a97670 100644
--- a/ogWebconsole/src/app/layout/main-layout/main-layout.component.html
+++ b/ogWebconsole/src/app/layout/main-layout/main-layout.component.html
@@ -1,11 +1,11 @@
 <app-header class="header" (toggleSidebar)="toggleSidebar()"></app-header>
 
-<mat-drawer-container class="container" >
+<mat-drawer-container class="container" autosize>
   <mat-drawer class="sidebar" mode="side" opened>
     <app-sidebar [isVisible]="isSidebarVisible"></app-sidebar>
   </mat-drawer>
 
   <mat-drawer-content class="content">
-    <router-outlet />
+    <router-outlet></router-outlet>
   </mat-drawer-content>
 </mat-drawer-container>
diff --git a/ogWebconsole/src/app/layout/sidebar/sidebar.component.css b/ogWebconsole/src/app/layout/sidebar/sidebar.component.css
index 23b5659..8267199 100644
--- a/ogWebconsole/src/app/layout/sidebar/sidebar.component.css
+++ b/ogWebconsole/src/app/layout/sidebar/sidebar.component.css
@@ -1,5 +1,7 @@
 mat-nav-list {
-  width: 250px;
+  width: auto; 
+  margin-right: 3px; 
+  overflow-x: hidden; 
 }
 
 mat-list-item {
@@ -8,22 +10,22 @@ mat-list-item {
   align-items: center;
 }
 
-.entry{
+.entry {
   display: flex;
   align-items: center;
   gap: 1rem;
-  padding:0.75rem;
+  padding: 0.75rem;
 }
 
 mat-icon {
   margin-right: 8px;
 }
 
-.user-logged{
+.user-logged {
   align-items: center;
   height: 70px;
   gap: 2rem;
-  padding:1rem;
+  padding: 1rem;
   font-size: medium;
 }
 
@@ -39,7 +41,7 @@ mat-icon {
 
 @media (max-width: 680px) {
   mat-nav-list {
-    width: 0px;
+    width: auto;
   }
 }
 
diff --git a/ogWebconsole/src/app/layout/sidebar/sidebar.component.html b/ogWebconsole/src/app/layout/sidebar/sidebar.component.html
index 8b5eebc..ee7546b 100644
--- a/ogWebconsole/src/app/layout/sidebar/sidebar.component.html
+++ b/ogWebconsole/src/app/layout/sidebar/sidebar.component.html
@@ -15,12 +15,36 @@
   </mat-list-item>
 
   <mat-list-item>
-    <span class="entry" routerLink="/commands">
-      <mat-icon class="icon">chevron_right</mat-icon>
-      <span i18n="@@actions">Comandos</span>
+    <span class="entry" (click)="toggleCommandSub()">
+      <mat-icon class="icon">playlist_play </mat-icon>
+      <span i18n="@@actions">Acciones</span>
     </span>
   </mat-list-item>
 
+  <!-- Submenu items for commands -->
+  <mat-nav-list *ngIf="showCommandSub" style="padding-left: 20px;">
+    <mat-list-item routerLink="/commands">
+      <span class="entry">
+        <mat-icon class="icon">chevron_right</mat-icon>
+        <span i18n="@@gallery">Comandos</span>
+      </span>
+    </mat-list-item>
+    <mat-list-item routerLink="/commands-groups">
+      <span class="entry">
+        <mat-icon class="icon">splitscreen_add </mat-icon>
+        <span i18n="@@gallery">Grupo de comandos</span>
+      </span>
+    </mat-list-item>
+    <mat-list-item routerLink="/commands-task">
+      <span class="entry">
+        <mat-icon class="icon">task</mat-icon>
+        <span i18n="@@gallery">Tareas</span>
+      </span>
+    </mat-list-item>
+  </mat-nav-list>
+  <!-- End commands sub -->
+
+
   <mat-list-item (click)="toggleOgBootSub()">
     <span class="entry">
       <mat-icon class="icon">desktop_windows</mat-icon>
diff --git a/ogWebconsole/src/app/layout/sidebar/sidebar.component.ts b/ogWebconsole/src/app/layout/sidebar/sidebar.component.ts
index 51dc05a..963703f 100644
--- a/ogWebconsole/src/app/layout/sidebar/sidebar.component.ts
+++ b/ogWebconsole/src/app/layout/sidebar/sidebar.component.ts
@@ -13,6 +13,7 @@ export class SidebarComponent {
   decodedToken: any = "";
   showOgBootSub: boolean = false;
   showOgDhcpSub: boolean = false;
+  showCommandSub: boolean = false;
 
   toggleOgBootSub() {
     this.showOgBootSub = !this.showOgBootSub;
@@ -20,6 +21,9 @@ export class SidebarComponent {
   toggleOgDhcpSub() {
     this.showOgDhcpSub = !this.showOgDhcpSub;
   }
+  toggleCommandSub() {
+    this.showCommandSub = !this.showCommandSub;
+  }
 
 
   constructor(public dialog: MatDialog) {}