From 256b3ba7889569ff3bdde785fd6623ef99fd0e6a Mon Sep 17 00:00:00 2001
From: Lucas Lara <llara@localhost>
Date: Wed, 23 Apr 2025 14:56:17 +0200
Subject: [PATCH] refs #1931 Enhance ClientDetailsComponent layout and styling:
 increase dialog width, adjust chart dimensions, and improve disk layout for
 better data presentation

---
 .../app/components/groups/groups.component.ts |  2 +-
 .../client-details.component.css              | 25 +++++---
 .../client-details.component.html             | 61 ++++++++++---------
 .../client-details.component.ts               |  5 +-
 4 files changed, 52 insertions(+), 41 deletions(-)

diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index 875c02f..2fba48b 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -611,7 +611,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
   onShowClientDetail(event: MouseEvent, client: Client): void {
     event.stopPropagation();
     this.dialog.open(ClientDetailsComponent, {
-      width: '900px',
+      width: '1200px',
       data: { clientData: client },
     })
   }
diff --git a/ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.css b/ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.css
index 3e0ba22..8f3de76 100644
--- a/ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.css
+++ b/ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.css
@@ -54,22 +54,32 @@
   gap: 32px;
 }
 
+.disk-layout {
+  display: flex;
+  flex-direction: row;
+  gap: 32px;
+  flex-wrap: wrap;
+}
+
 .table-container {
+  flex: 1 1 500px;
   overflow-x: auto;
   border-radius: 8px;
   background: #fff;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
 }
 
-.mat-elevation-z8 {
-  width: 100%;
-  border-radius: 8px;
-}
-
 .charts-container {
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
+  flex: 1 1 300px;
+  justify-content: flex-start;
+}
+
+.mat-elevation-z8 {
+  width: 100%;
+  border-radius: 8px;
 }
 
 .charts-container.single-disk {
@@ -82,7 +92,8 @@
 }
 
 .disk-usage {
-  flex: 1 1 300px;
+  flex: 1 1 260px;
+  min-width: 240px;
   padding: 16px;
   background: #f9f9f9;
   border-radius: 12px;
@@ -91,6 +102,6 @@
 
 .chart {
   width: 100%;
-  height: 200px;
+  height: 160px;
   margin-bottom: 12px;
 }
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.html b/ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.html
index 4e1e5e0..9e8edc0 100644
--- a/ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.html
+++ b/ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.html
@@ -28,38 +28,39 @@
     </div>
 
     <div class="disk-container">
-      <div class="table-container">
-        <table 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 image">
-              <ng-container *ngIf="column.columnDef !== 'size'">
-                {{ column.cell(image) }}
-              </ng-container>
-              <ng-container *ngIf="column.columnDef === 'size'">
-                <mat-chip color="primary">
-                  {{ (image.size / 1024).toFixed(2) }} GB
-                </mat-chip>
-              </ng-container>
-            </td>
+      <div class="disk-layout">
+        <div class="table-container">
+          <table 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 image">
+                <ng-container *ngIf="column.columnDef !== 'size'">
+                  {{ column.cell(image) }}
+                </ng-container>
+                <ng-container *ngIf="column.columnDef === 'size'">
+                  <mat-chip color="primary">
+                    {{ (image.size / 1024).toFixed(2) }} GB
+                  </mat-chip>
+                </ng-container>
+              </td>
+            </ng-container>
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+          </table>
+        </div>
+
+        <div class="charts-container" [ngClass]="{'single-disk': chartDisk.length === 1}">
+          <ng-container *ngIf="diskUsageData && diskUsageData.length > 0">
+            <div *ngFor="let disk of chartDisk" class="disk-usage">
+              <ngx-charts-pie-chart class="chart" [view]="view" [results]="disk.chartData" [doughnut]="true">
+              </ngx-charts-pie-chart>
+              <h3>Disco {{ disk.diskNumber }}</h3>
+              <p>Usado: {{ (disk.used).toFixed(2) }} GB ({{ disk.percentage }}%)</p>
+              <p>Total: {{ disk.total }} GB</p>
+            </div>
           </ng-container>
-          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
+        </div>
       </div>
-
-      <div class="charts-container" [ngClass]="{'single-disk': chartDisk.length === 1}">
-        <ng-container *ngIf="diskUsageData && diskUsageData.length > 0">
-          <div *ngFor="let disk of chartDisk" class="disk-usage">
-            <ngx-charts-pie-chart class="chart" [view]="view" [results]="disk.chartData" [doughnut]="true">
-            </ngx-charts-pie-chart>
-            <h3>Disco {{ disk.diskNumber }}</h3>
-            <p>Usado: {{ (disk.used).toFixed(2) }} GB ({{ disk.percentage }}%)</p>
-            <p>Total: {{ disk.total }} GB</p>
-          </div>
-        </ng-container>
-      </div>
-
     </div>
   </div>
 </mat-dialog-content>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.ts b/ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.ts
index f1961ed..919e84e 100644
--- a/ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.ts
+++ b/ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.ts
@@ -35,7 +35,7 @@ export class ClientDetailsComponent {
   partitions: any[] = [];
   commands: any[] = [];
   chartDisk: any[] = [];
-  view: [number, number] = [300, 200];
+  view: [number, number] = [260, 160];
   showLegend: boolean = true;
 
   arrayCommands: any[] = [
@@ -115,8 +115,7 @@ export class ClientDetailsComponent {
       console.error('No se recibieron datos del cliente.');
     }
   }
-
-
+  
   loadClient = (uuid: string) => {
     this.http.get<any>(`${this.baseUrl}${uuid}`).subscribe({
       next: data => {