mocks quitados

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 { 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 mockUsers from '../../../../../mocks/users.json'; // Renombrado para claridad
+
 @Component({
   standalone: true,
   imports: [FormsModule, CommonModule, RouterModule],
@@ -21,16 +21,24 @@ export class MainPageComponent implements OnInit {
   constructor(private userClient: UserClientService) {}
 
   ngOnInit(): void {
-    this.users = users as unknown as User[];
-    this.userClient.getAllUsers().subscribe((data: User[]) => {
+    // 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.filteredUsers = [...this.users];
+
+    // Sobrescribir con datos reales si están disponibles
+    this.userClient.getAllUsers().subscribe({
+      next: (data: User[]) => {
         this.users = data;
-      this.filteredUsers = data; // Inicialmente, muestra todos los usuarios
+        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 +46,7 @@ export class MainPageComponent implements OnInit {
     }
   }
 
-  getState(user: User) {
+  getState(user: User): string {
     switch (user.status) {
       case 'NO_BOOKINGS':
         return 'SIN RESERVAS';
@@ -46,6 +54,8 @@ export class MainPageComponent implements OnInit {
         return 'CON RESERVAS ACTIVAS';
       case 'WITH_INACTIVE_BOOKINGS':
         return 'CON RESERVAS INACTIVAS';
+      default:
+        return 'ESTADO DESCONOCIDO';
     }
   }
 }

angular/RestClient/src/app/core/features/user/user-form/user-form.component.css

 .form-container {
-    width: 100%;
-    max-width: 500px;
-    margin: 0 auto;
+  max-width: 400px;
+  margin: 50px auto;
+  background: #f8f9fa;
   padding: 20px;
-    background: #f9f9f9;
-    border: 1px solid #ddd;
-    border-radius: 8px;
+  border-radius: 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  font-family: Arial, sans-serif;
 }
 
 h2 {
   text-align: center;
   margin-bottom: 20px;
+  color: #333;
 }
 
 .form-group {
@@ -21,48 +22,60 @@
   display: block;
   font-weight: bold;
   margin-bottom: 5px;
+  color: #555;
 }
 
 input {
   width: 100%;
   padding: 10px;
-    font-size: 16px;
+  font-size: 14px;
   border: 1px solid #ccc;
-    border-radius: 4px;
-    box-sizing: border-box;
+  border-radius: 5px;
+  background: #fff;
 }
 
 input[readonly] {
-    background-color: #f5f5f5;
-    cursor: not-allowed;
+  background: #f3f3f3;
 }
 
 .button-group {
   display: flex;
-    gap: 10px;
-    justify-content: center;
+  justify-content: space-between;
+  margin-top: 20px;
 }
 
-  button {
+.btn {
   padding: 10px 20px;
-    font-size: 16px;
-    border-radius: 4px;
+  font-size: 14px;
   border: none;
+  border-radius: 5px;
   cursor: pointer;
+  transition: background-color 0.3s ease;
 }
 
 .btn-primary {
   background-color: #007bff;
-    color: #fff;
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: #0056b3;
 }
 
 .btn-secondary {
   background-color: #6c757d;
-    color: #fff;
+  color: white;
+}
+
+.btn-secondary:hover {
+  background-color: #5a6268;
 }
 
 .btn-success {
   background-color: #28a745;
-    color: #fff;
+  color: white;
 }
 
+.btn-success:hover {
+  background-color: #218838;
+}

angular/RestClient/src/app/core/features/user/user-form/user-form.component.html

 <div class="form-container">
   <h2>Perfil de Usuario</h2>
-    <form [formGroup]="userForm">
+  <form [formGroup]="userForm" (ngSubmit)="saveChanges()">
+    <!-- Campo Nombre -->
     <div class="form-group">
       <label for="name">Nombre:</label>
       <input
@@ -12,6 +13,7 @@
       />
     </div>
 
+    <!-- Campo Email -->
     <div class="form-group">
       <label for="email">Email:</label>
       <input
@@ -23,6 +25,7 @@
       />
     </div>
 
+    <!-- Campo Contraseña Actual (solo en edición) -->
     <div class="form-group" *ngIf="isEditing">
       <label for="currentPassword">Contraseña actual:</label>
       <input
@@ -34,6 +37,7 @@
       />
     </div>
 
+    <!-- Campo Nueva Contraseña (solo en edición) -->
     <div class="form-group" *ngIf="isEditing">
       <label for="newPassword">Nueva contraseña:</label>
       <input
@@ -45,6 +49,7 @@
       />
     </div>
 
+    <!-- Grupo de Botones -->
     <div class="button-group">
       <button
         *ngIf="!isEditing"
@@ -68,7 +73,6 @@
         *ngIf="isEditing"
         type="submit"
         class="btn btn-success"
-          (click)="saveChanges()"
         [disabled]="!userForm.valid"
       >
         Guardar
@@ -76,4 +80,3 @@
     </div>
   </form>
 </div>
-  
\ No newline at end of file

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

 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { UserClientService } from '../../../../shared/user-client.service';
 
 @Component({
+  standalone: true,
   selector: 'app-user-form',
   templateUrl: './user-form.component.html',
   styleUrls: ['./user-form.component.css'],
+  imports: [ReactiveFormsModule, FormsModule],
 })
 export class UserFormComponent implements OnInit {
   userForm!: FormGroup;
@@ -15,7 +17,7 @@ export class UserFormComponent implements OnInit {
 
   ngOnInit(): void {
     this.initializeForm();
-    this.loadUserData();
+    // this.loadUserData();
   }
 
   private initializeForm(): void {

angular/RestClient/src/mocks/users.json

+[
+    {
+      "id": 1,
+      "name": "John Doe",
+      "email": "jon@com", 
+      "status": "NO_BOOKINGS"
+    },
+    {
+      "id": 2,
+      "name": "Jane Smith",
+      "status": "WITH_ACTIVE_BOOKINGS"
+    }
+  ]
+  
\ No newline at end of file