Implementacion de formulario con datos de usuario

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

-// main-page.component.ts
 import { Component, OnInit } from '@angular/core';
-import { User, UserStateFilter } from '../../../../../types';
+import { Client, User, UserStateFilter } from '../../../../../types';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import users from '../../../../../mocks/users.json';
 import { RouterModule } from '@angular/router';
 import { UserClientService } from '../../../../shared/user-client.service';
+import { users } from '../../../../../mocks/users'; // Renombrado para claridad
+
 @Component({
   standalone: true,
   imports: [FormsModule, CommonModule, RouterModule],
@@ -14,23 +14,32 @@ import { UserClientService } from '../../../../shared/user-client.service';
   styleUrls: ['./main-page.component.css'],
 })
 export class MainPageComponent implements OnInit {
-  users: User[] = [];
-  filteredUsers: User[] = [];
+  users: Client[] = [];
+  filteredUsers: Client[] = [];
   selectedStatus: UserStateFilter = 'All';
 
   constructor(private userClient: UserClientService) {}
 
   ngOnInit(): void {
-    this.users = users as unknown as User[];
-    this.userClient.getAllUsers().subscribe((data: User[]) => {
-      this.users = data;
-      this.filteredUsers = data; // Inicialmente, muestra todos los usuarios
+    // Validar que el mock sea del tipo correcto
+    // const isValidMock = Array.isArray(mockUsers) && mockUsers.every(user => 'id' in user && 'name' in user && 'status' in user);
+    // this.users = isValidMock ? (mockUsers as User[]) : [];
+    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;
+        this.filteredUsers = [...data];
+      },
+      error: (err) => console.error('Error al cargar usuarios:', err),
     });
   }
 
   filterUsers(): void {
     if (this.selectedStatus === 'All') {
-      this.filteredUsers = this.users;
+      this.filteredUsers = [...this.users];
     } else {
       this.filteredUsers = this.users.filter(
         (user) => user.status === this.selectedStatus
@@ -38,7 +47,7 @@ export class MainPageComponent implements OnInit {
     }
   }
 
-  getState(user: User) {
+  getState(user: Client): string {
     switch (user.status) {
       case 'NO_BOOKINGS':
         return 'SIN RESERVAS';
@@ -46,6 +55,8 @@ export class MainPageComponent implements OnInit {
         return 'CON RESERVAS ACTIVAS';
       case 'WITH_INACTIVE_BOOKINGS':
         return 'CON RESERVAS INACTIVAS';
+      default:
+        return 'ESTADO DESCONOCIDO';
     }
   }
 }