Update dependencies and enhance Tailwind CSS configuration for web applications

- Added new dependencies including clsx, lucide-react, recharts, and various Radix UI components to improve UI functionality.
- Upgraded Tailwind CSS to version 4.0.0 and updated configuration to utilize CSS variables for theming and responsive design.
- Introduced global styles and improved accessibility features in the layout and components.
- Removed outdated login page and refactored authentication store for better state management.
- Enhanced API service with additional authentication methods and improved error handling.

These changes aim to modernize the web applications and improve user experience through better design and functionality.

apps/web-client/src/services/api/auth.api.ts

@@ -1,6 +1,7 @@
-import { apiClient } from './client';
 import { LoginDto, RegisterDto, AuthResponse, ApiResponse, UserResponse } from '@goodgo/types';
 
+import { apiClient } from './client';
+
 /**
  * EN: Authentication API service for frontend
  * VI: Service API xác thực cho frontend
@@ -76,6 +77,111 @@ export const authApi = {
    * VI: Thay đổi mật khẩu người dùng
    */
   changePassword: async (currentPassword: string, newPassword: string): Promise<ApiResponse> => {
-    return apiClient.put('/auth/password', { currentPassword, newPassword });
+    return apiClient.post('/auth/change-password', { currentPassword, newPassword });
+  },
+
+  /**
+   * EN: Request password reset link via email
+   * VI: Yêu cầu link đặt lại mật khẩu qua email
+   */
+  forgotPassword: async (email: string): Promise<ApiResponse> => {
+    return apiClient.post('/auth/forgot-password', { email });
+  },
+
+  /**
+   * EN: Reset password using reset token
+   * VI: Đặt lại mật khẩu sử dụng reset token
+   */
+  resetPassword: async (token: string, newPassword: string): Promise<ApiResponse> => {
+    return apiClient.post('/auth/reset-password', { token, newPassword });
+  },
+
+  /**
+   * EN: Authenticate with OAuth token from callback
+   * VI: Xác thực với OAuth token từ callback
+   */
+  oauthLogin: async (accessToken: string): Promise<ApiResponse<AuthResponse>> => {
+    // EN: Set the token in the client
+    // VI: Đặt token trong client
+    apiClient.setAuthToken(accessToken);
+    
+    // EN: Fetch user profile to complete authentication
+    // VI: Lấy thông tin user để hoàn tất xác thực
+    const userResponse = await apiClient.get('/users/me');
+    
+    if (userResponse.success && userResponse.data) {
+      // EN: Store refresh token if available (OAuth might not provide refresh token)
+      // VI: Lưu refresh token nếu có (OAuth có thể không cung cấp refresh token)
+      // Note: For OAuth, we only have access token, refresh token handling depends on backend
+      // Ghi chú: Đối với OAuth, chúng ta chỉ có access token, xử lý refresh token phụ thuộc vào backend
+      
+      return {
+        success: true,
+        data: {
+          accessToken,
+          refreshToken: '', // EN: OAuth may not provide refresh token / VI: OAuth có thể không cung cấp refresh token
+          user: userResponse.data,
+        },
+        timestamp: new Date().toISOString(),
+      };
+    }
+    
+    throw new Error('Failed to fetch user profile / Không thể lấy thông tin người dùng');
+  },
+
+  /**
+   * EN: Enable TOTP and get QR code
+   * VI: Bật TOTP và lấy mã QR
+   */
+  enableTOTP: async (): Promise<ApiResponse<{ secret: string; qrCodeUrl: string }>> => {
+    return apiClient.post('/mfa/totp/enable', {});
+  },
+
+  /**
+   * EN: Verify and enable TOTP with token
+   * VI: Xác thực và bật TOTP với token
+   */
+  verifyAndEnableTOTP: async (secret: string, token: string): Promise<ApiResponse> => {
+    return apiClient.post('/mfa/totp/verify', { secret, token });
+  },
+
+  /**
+   * EN: Disable MFA
+   * VI: Tắt MFA
+   */
+  disableMFA: async (): Promise<ApiResponse> => {
+    return apiClient.post('/mfa/disable', {});
+  },
+
+  /**
+   * EN: Get MFA devices
+   * VI: Lấy thiết bị MFA
+   */
+  getMFADevices: async (): Promise<ApiResponse<Array<{ id: string; type: string; name: string; lastUsedAt: string | null; createdAt: string }>>> => {
+    return apiClient.get('/mfa/devices');
+  },
+
+  /**
+   * EN: Get user sessions
+   * VI: Lấy sessions của người dùng
+   */
+  getSessions: async (): Promise<ApiResponse<Array<{ id: string; deviceName: string | null; ipAddress: string | null; lastActivityAt: string | null; createdAt: string; expiresAt: string | null }>>> => {
+    return apiClient.get('/sessions');
+  },
+
+  /**
+   * EN: Revoke a session
+   * VI: Thu hồi một session
+   */
+  revokeSession: async (sessionId: string): Promise<ApiResponse> => {
+    return apiClient.delete(`/sessions/${sessionId}`);
+  },
+
+  /**
+   * EN: Revoke all sessions
+   * VI: Thu hồi tất cả sessions
+   */
+  revokeAllSessions: async (): Promise<ApiResponse> => {
+    return apiClient.delete('/sessions');
   },
 };

apps/web-client/src/services/api/user.api.ts

@@ -0,0 +1,92 @@
+import { ApiResponse } from '@goodgo/types';
+
+import { apiClient } from './client';
+
+/**
+ * EN: User profile interface
+ * VI: Interface profile người dùng
+ */
+export interface UserProfile {
+  id: string;
+  userId: string;
+  firstName?: string;
+  lastName?: string;
+  phone?: string;
+  phoneVerified?: boolean;
+  avatarUrl?: string;
+  customFields?: Record<string, unknown>;
+  preferences?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+  createdAt: string;
+  updatedAt: string;
+}
+
+/**
+ * EN: Update user profile DTO
+ * VI: DTO cập nhật profile người dùng
+ */
+export interface UpdateUserProfileDto {
+  firstName?: string;
+  lastName?: string;
+  phone?: string;
+  avatarUrl?: string;
+  customFields?: Record<string, unknown>;
+  preferences?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+}
+
+/**
+ * EN: User API service for profile management
+ * VI: Service API người dùng để quản lý profile
+ */
+export const userApi = {
+  /**
+   * EN: Get user profile by user ID
+   * VI: Lấy profile người dùng theo user ID
+   *
+   * @param userId - User ID / ID người dùng
+   */
+  getProfile: async (userId: string): Promise<ApiResponse<UserProfile>> => {
+    return apiClient.get(`/identity/users/${userId}/profile`);
+  },
+
+  /**
+   * EN: Update user profile
+   * VI: Cập nhật profile người dùng
+   *
+   * @param userId - User ID / ID người dùng
+   * @param data - Profile data to update / Dữ liệu profile cần cập nhật
+   */
+  updateProfile: async (
+    userId: string,
+    data: UpdateUserProfileDto
+  ): Promise<ApiResponse<UserProfile>> => {
+    return apiClient.put(`/identity/users/${userId}/profile`, data);
+  },
+
+  /**
+   * EN: Upload avatar image
+   * VI: Upload ảnh avatar
+   *
+   * @param userId - User ID / ID người dùng
+   * @param avatarUrl - Avatar URL / URL avatar
+   */
+  uploadAvatar: async (
+    userId: string,
+    avatarUrl: string
+  ): Promise<ApiResponse<UserProfile>> => {
+    return apiClient.post(`/identity/users/${userId}/profile/avatar`, {
+      avatarUrl,
+    });
+  },
+
+  /**
+   * EN: Delete avatar
+   * VI: Xóa avatar
+   *
+   * @param userId - User ID / ID người dùng
+   */
+  deleteAvatar: async (userId: string): Promise<ApiResponse> => {
+    return apiClient.delete(`/identity/users/${userId}/profile/avatar`);
+  },
+};