Añadido estado en listado de usuarios y filtrado

angular/RestClient/src/app/features/users/main-page/main-page.component.html

@@ -19,14 +19,13 @@
       </div>
       <div class="mat-elevation-z8 demo-table table">
         <table mat-table [dataSource]="dataSource">
+          <!-- ID Column -->
           <ng-container matColumnDef="id">
             <th mat-header-cell *matHeaderCellDef>
               <span class="text-3xl font-bold">ID</span>
             </th>
             <td mat-cell *matCellDef="let element">
-              <span class="text-2xl">
-                {{ element.id }}
-              </span>
+              <span class="text-2xl">{{ element.id }}</span>
             </td>
           </ng-container>
 
@@ -36,33 +35,37 @@
               <span class="text-3xl font-bold">Name</span>
             </th>
             <td mat-cell *matCellDef="let element">
-              <span class="text-2xl">
-                {{ element.name }}
-              </span>
+              <span class="text-2xl">{{ element.name }}</span>
             </td>
           </ng-container>
 
-          <!-- Weight Column -->
+          <!-- Email Column -->
           <ng-container matColumnDef="email">
             <th mat-header-cell *matHeaderCellDef>
               <span class="text-3xl font-bold">Email</span>
             </th>
             <td mat-cell *matCellDef="let element">
-              <span class="text-2xl">
-                {{ element.email }}
-              </span>
+              <span class="text-2xl">{{ element.email }}</span>
             </td>
           </ng-container>
 
-          <!-- Symbol Column -->
+          <!-- Role Column -->
           <ng-container matColumnDef="rol">
             <th mat-header-cell *matHeaderCellDef>
               <span class="text-3xl font-bold">Rol</span>
             </th>
             <td mat-cell *matCellDef="let element">
-              <span class="text-2xl">
-                {{ element.rol }}
-              </span>
+              <span class="text-2xl">{{ element.rol }}</span>
+            </td>
+          </ng-container>
+
+          <!-- State Column -->
+          <ng-container matColumnDef="status">
+            <th mat-header-cell *matHeaderCellDef>
+              <span class="text-3xl font-bold">Estado</span>
+            </th>
+            <td mat-cell *matCellDef="let element">
+              <span class="text-2xl">{{ getState(element) }}</span>
             </td>
           </ng-container>
 

angular/RestClient/src/app/features/users/main-page/main-page.component.ts

@@ -27,7 +27,7 @@ export class MainPageComponent implements OnInit {
   users: Client[] = [];
   filteredUsers: Client[] = [];
   selectedStatus: UserStateFilter = 'All';
-  displayedColumns: string[] = ['id', 'name', 'email', 'rol'];
+  displayedColumns: string[] = ['id', 'name', 'email', 'rol', 'status'];
   dataSource = new MatTableDataSource<User>();
 
   constructor(private userClient: UserClientService, private router: Router) {}
@@ -36,7 +36,6 @@ export class MainPageComponent implements OnInit {
     this.users = users;
     this.filteredUsers = [...this.users];
 
-    // Sobrescribir con datos reales si están disponibles
     this.userClient.getAllUsers().subscribe({
       next: (data: Client[]) => {
         this.users = data;
@@ -49,28 +48,29 @@ export class MainPageComponent implements OnInit {
   @ViewChild(MatPaginator) paginator?: MatPaginator;
 
   filterUsers(): void {
-    if (this.selectedStatus === 'All') {
-      this.filteredUsers = [...this.users];
-    } else {
-      this.filteredUsers = this.users.filter(
-        (user) => user.status === this.selectedStatus
-      );
-    }
+    this.filteredUsers = 
+      this.selectedStatus === 'All'
+        ? [...this.users]
+        : this.users.filter(user => user?.status === this.selectedStatus);
+    
     this.dataSource = new MatTableDataSource<User>(this.filteredUsers);
     this.dataSource.paginator = this.paginator!;
   }
 
   getState(user: Client): string {
-    switch (user.status) {
-      case 'NO_BOOKINGS':
-        return 'SIN RESERVAS';
-      case 'WITH_ACTIVE_BOOKINGS':
-        return 'CON RESERVAS ACTIVAS';
-      case 'WITH_INACTIVE_BOOKINGS':
-        return 'CON RESERVAS INACTIVAS';
-      default:
-        return 'ESTADO DESCONOCIDO';
+    if (user.rol === 'CLIENT') {
+      switch (user.status) {
+        case 'NO_BOOKINGS':
+          return 'SIN RESERVAS';
+        case 'WITH_ACTIVE_BOOKINGS':
+          return 'CON RESERVAS ACTIVAS';
+        case 'WITH_INACTIVE_BOOKINGS':
+          return 'CON RESERVAS INACTIVAS';
+        default:
+          return 'ESTADO DESCONOCIDO';
+      }
     }
+    return '-';
   }
 
   userDetails(id: number) {