feat: Implement user detail page with agent type management and navigation from the user list.

src/app/dashboard/users/[id]/page.tsx

@@ -0,0 +1,431 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import {
+  usersService,
+  User,
+  getErrorMessage,
+  uploadService,
+  agentTypesService,
+  AgentType,
+} from '@/services';
+
+export default function UserDetailPage() {
+  const router = useRouter();
+  const params = useParams();
+  const userId = params.id as string;
+
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
+
+  // Agent type editing
+  const [agentTypes, setAgentTypes] = useState<AgentType[]>([]);
+  const [selectedAgentTypeId, setSelectedAgentTypeId] = useState<string>('');
+  const [isUpdatingAgentType, setIsUpdatingAgentType] = useState(false);
+  const [updateSuccess, setUpdateSuccess] = useState('');
+
+  // Helper function to check if avatar is an S3 key
+  const isS3Key = (avatar: string | null | undefined): boolean => {
+    if (!avatar) return false;
+    return !avatar.startsWith('http') && !avatar.startsWith('/');
+  };
+
+  useEffect(() => {
+    fetchUser();
+    fetchAgentTypes();
+  }, [userId]);
+
+  const fetchUser = async () => {
+    setIsLoading(true);
+    setError('');
+    try {
+      const userData = await usersService.getUserById(userId);
+      setUser(userData);
+
+      // Set initial agent type
+      if (userData.agentProfile?.agentTypeId) {
+        setSelectedAgentTypeId(userData.agentProfile.agentTypeId);
+      }
+
+      // Fetch avatar URL if needed
+      const avatar = userData.profile?.avatar;
+      if (avatar) {
+        if (isS3Key(avatar)) {
+          try {
+            const presignedUrl = await uploadService.getPresignedDownloadUrl(avatar);
+            setAvatarUrl(presignedUrl);
+          } catch (err) {
+            console.error('Failed to get avatar URL:', err);
+          }
+        } else {
+          setAvatarUrl(avatar);
+        }
+      }
+    } catch (err) {
+      const errorMessage = getErrorMessage(err);
+      setError(errorMessage);
+      if (errorMessage.includes('Unauthorized')) {
+        router.push('/login');
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const fetchAgentTypes = async () => {
+    try {
+      const types = await agentTypesService.getAll();
+      setAgentTypes(types);
+    } catch (err) {
+      console.error('Failed to fetch agent types:', err);
+    }
+  };
+
+  const handleUpdateAgentType = async () => {
+    if (!selectedAgentTypeId || !user) return;
+
+    setIsUpdatingAgentType(true);
+    setError('');
+    setUpdateSuccess('');
+
+    try {
+      await usersService.updateAgentType(user.id, selectedAgentTypeId);
+      setUpdateSuccess('Agent type updated successfully');
+
+      // Refresh user data
+      await fetchUser();
+
+      // Clear success message after 3 seconds
+      setTimeout(() => setUpdateSuccess(''), 3000);
+    } catch (err) {
+      setError(getErrorMessage(err));
+    } finally {
+      setIsUpdatingAgentType(false);
+    }
+  };
+
+  const formatDate = (dateString: string | null | undefined) => {
+    if (!dateString) return 'N/A';
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+      </div>
+    );
+  }
+
+  if (error && !user) {
+    return (
+      <div className="p-6">
+        <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
+          <p className="text-red-700">{error}</p>
+        </div>
+        <button
+          onClick={() => router.push('/dashboard/users')}
+          className="mt-4 px-4 py-2 text-blue-600 hover:text-blue-800"
+        >
+          ← Back to Users
+        </button>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return (
+      <div className="p-6">
+        <p className="text-gray-500">User not found</p>
+        <button
+          onClick={() => router.push('/dashboard/users')}
+          className="mt-4 px-4 py-2 text-blue-600 hover:text-blue-800"
+        >
+          ← Back to Users
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Back Button */}
+      <button
+        onClick={() => router.push('/dashboard/users')}
+        className="mb-6 flex items-center text-gray-600 hover:text-gray-900"
+      >
+        <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+        </svg>
+        Back to Users
+      </button>
+
+      {/* Error/Success Messages */}
+      {error && (
+        <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
+          <p className="text-red-700 text-sm">{error}</p>
+        </div>
+      )}
+      {updateSuccess && (
+        <div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg">
+          <p className="text-green-700 text-sm">{updateSuccess}</p>
+        </div>
+      )}
+
+      {/* User Header */}
+      <div className="bg-white rounded-lg shadow mb-6">
+        <div className="p-6">
+          <div className="flex items-center">
+            {/* Avatar */}
+            <div className="flex-shrink-0 h-20 w-20">
+              {avatarUrl ? (
+                <img className="h-20 w-20 rounded-full object-cover" src={avatarUrl} alt="" />
+              ) : (
+                <div className="h-20 w-20 rounded-full bg-gray-200 flex items-center justify-center">
+                  <span className="text-gray-500 font-medium text-2xl">
+                    {user.profile?.firstName?.[0] || user.email[0].toUpperCase()}
+                  </span>
+                </div>
+              )}
+            </div>
+
+            {/* Name & Email */}
+            <div className="ml-6 flex-1">
+              <h1 className="text-2xl font-bold text-gray-900">
+                {user.profile?.firstName} {user.profile?.lastName}
+              </h1>
+              <p className="text-gray-500">{user.email}</p>
+            </div>
+
+            {/* Role & Status Badges */}
+            <div className="flex items-center space-x-3">
+              <span
+                className={`px-3 py-1 text-sm font-semibold rounded-full ${
+                  user.role === 'ADMIN'
+                    ? 'bg-red-100 text-red-800'
+                    : user.role === 'AGENT'
+                    ? 'bg-purple-100 text-purple-800'
+                    : 'bg-blue-100 text-blue-800'
+                }`}
+              >
+                {user.role}
+              </span>
+              <span
+                className={`px-3 py-1 text-sm font-semibold rounded-full ${
+                  user.status === 'ACTIVE'
+                    ? 'bg-green-100 text-green-800'
+                    : user.status === 'SUSPENDED'
+                    ? 'bg-red-100 text-red-800'
+                    : 'bg-yellow-100 text-yellow-800'
+                }`}
+              >
+                {user.status}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Basic Information */}
+      <div className="bg-white rounded-lg shadow mb-6">
+        <div className="px-6 py-4 border-b border-gray-200">
+          <h2 className="text-lg font-semibold text-gray-900">Basic Information</h2>
+        </div>
+        <div className="p-6">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <div>
+              <p className="text-sm text-gray-500">Provider</p>
+              <p className="text-sm font-medium text-gray-900">
+                {user.authProvider === 'LOCAL' ? 'Email' : user.authProvider}
+              </p>
+            </div>
+            <div>
+              <p className="text-sm text-gray-500">Email Verified</p>
+              <div className="flex items-center">
+                {user.emailVerified ? (
+                  <>
+                    <svg className="w-5 h-5 text-green-500 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                      <path
+                        fillRule="evenodd"
+                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span className="text-sm font-medium text-green-600">Verified</span>
+                  </>
+                ) : (
+                  <>
+                    <svg className="w-5 h-5 text-gray-400 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                      <path
+                        fillRule="evenodd"
+                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span className="text-sm font-medium text-gray-500">Not Verified</span>
+                  </>
+                )}
+              </div>
+            </div>
+            <div>
+              <p className="text-sm text-gray-500">Joined</p>
+              <p className="text-sm font-medium text-gray-900">{formatDate(user.createdAt)}</p>
+            </div>
+            <div>
+              <p className="text-sm text-gray-500">Last Login</p>
+              <p className="text-sm font-medium text-gray-900">
+                {user.lastLoginAt ? formatDate(user.lastLoginAt) : 'Never'}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Contact Information */}
+      <div className="bg-white rounded-lg shadow mb-6">
+        <div className="px-6 py-4 border-b border-gray-200">
+          <h2 className="text-lg font-semibold text-gray-900">Contact Information</h2>
+        </div>
+        <div className="p-6">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <div>
+              <p className="text-sm text-gray-500">Phone</p>
+              <p className="text-sm font-medium text-gray-900">
+                {user.profile?.phone || 'Not provided'}
+              </p>
+            </div>
+            <div>
+              <p className="text-sm text-gray-500">City</p>
+              <p className="text-sm font-medium text-gray-900">
+                {user.profile?.city || 'Not provided'}
+              </p>
+            </div>
+            <div>
+              <p className="text-sm text-gray-500">State</p>
+              <p className="text-sm font-medium text-gray-900">
+                {user.profile?.state || 'Not provided'}
+              </p>
+            </div>
+            <div>
+              <p className="text-sm text-gray-500">Country</p>
+              <p className="text-sm font-medium text-gray-900">
+                {user.profile?.country || 'Not provided'}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Agent Details (only for AGENT role) */}
+      {user.role === 'AGENT' && user.agentProfile && (
+        <div className="bg-white rounded-lg shadow mb-6">
+          <div className="px-6 py-4 border-b border-gray-200">
+            <h2 className="text-lg font-semibold text-gray-900">Agent Details</h2>
+          </div>
+          <div className="p-6">
+            {/* Agent Details Grid */}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+              {/* Agent Type - Editable */}
+              <div>
+                <p className="text-sm text-gray-500 mb-1">Agent Type</p>
+                <div className="flex items-center space-x-2">
+                  <select
+                    value={selectedAgentTypeId}
+                    onChange={(e) => setSelectedAgentTypeId(e.target.value)}
+                    className="w-full max-w-[160px] px-2 py-1 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
+                  >
+                    <option value="">Select...</option>
+                    {agentTypes.map((type) => (
+                      <option key={type.id} value={type.id}>
+                        {type.name}
+                      </option>
+                    ))}
+                  </select>
+                  {selectedAgentTypeId && selectedAgentTypeId !== user.agentProfile?.agentTypeId && (
+                    <button
+                      onClick={handleUpdateAgentType}
+                      disabled={isUpdatingAgentType}
+                      className="px-2 py-1 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded transition-colors disabled:opacity-50"
+                    >
+                      {isUpdatingAgentType ? '...' : 'Save'}
+                    </button>
+                  )}
+                </div>
+              </div>
+              <div>
+                <p className="text-sm text-gray-500">Slug</p>
+                <p className="text-sm font-medium text-gray-900">
+                  {user.agentProfile.slug || 'Not set'}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-500">Company</p>
+                <p className="text-sm font-medium text-gray-900">
+                  {user.agentProfile.companyName || 'Not provided'}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-500">License Number</p>
+                <p className="text-sm font-medium text-gray-900">
+                  {user.agentProfile.licenseNumber || 'Not provided'}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-500">Years of Experience</p>
+                <p className="text-sm font-medium text-gray-900">
+                  {user.agentProfile.yearsOfExperience ?? 'Not provided'}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-500">Profile Status</p>
+                <p className="text-sm font-medium text-gray-900">
+                  {user.agentProfile.profileCompleteness}%{' '}
+                  <span
+                    className={`ml-1 inline-flex px-2 py-0.5 text-xs font-semibold rounded-full ${
+                      user.agentProfile.isProfileComplete
+                        ? 'bg-green-100 text-green-800'
+                        : 'bg-yellow-100 text-yellow-800'
+                    }`}
+                  >
+                    {user.agentProfile.isProfileComplete ? 'Complete' : 'Incomplete'}
+                  </span>
+                </p>
+              </div>
+            </div>
+
+            {/* Headline & Bio */}
+            {(user.agentProfile.headline || user.agentProfile.bio) && (
+              <div className="mt-6 pt-6 border-t border-gray-200">
+                {user.agentProfile.headline && (
+                  <div className="mb-4">
+                    <p className="text-sm text-gray-500 mb-1">Headline</p>
+                    <p className="text-sm font-medium text-gray-900">
+                      {user.agentProfile.headline}
+                    </p>
+                  </div>
+                )}
+                {user.agentProfile.bio && (
+                  <div>
+                    <p className="text-sm text-gray-500 mb-1">Bio</p>
+                    <p className="text-sm text-gray-700 whitespace-pre-wrap">
+                      {user.agentProfile.bio}
+                    </p>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/app/dashboard/users/page.tsx

@@ -199,7 +199,11 @@ export default function UsersPage() {
               </thead>
               <tbody className="bg-white divide-y divide-gray-200">
                 {users.map((user) => (
-                  <tr key={user.id} className="hover:bg-gray-50">
+                  <tr
+                    key={user.id}
+                    className="hover:bg-gray-50 cursor-pointer"
+                    onClick={() => router.push(`/dashboard/users/${user.id}`)}
+                  >
                     <td className="px-6 py-4 whitespace-nowrap">
                       <div className="flex items-center">
                         <div className="flex-shrink-0 h-10 w-10">

src/services/users.service.ts

@@ -1,12 +1,34 @@
 import api, { ApiResponse } from './api';
 
 // Types
+export interface AgentType {
+  id: string;
+  name: string;
+  slug: string;
+  description?: string;
+}
+
+export interface AgentProfileDetails {
+  id: string;
+  slug: string;
+  bio?: string | null;
+  headline?: string | null;
+  companyName?: string | null;
+  licenseNumber?: string | null;
+  yearsOfExperience?: number | null;
+  isProfileComplete: boolean;
+  profileCompleteness: number;
+  agentTypeId?: string | null;
+  agentType?: AgentType | null;
+}
+
 export interface User {
   id: string;
   email: string;
   role: string;
   status: string;
   emailVerified: boolean;
+  emailVerifiedAt?: string | null;
   authProvider: string;
   createdAt: string;
   lastLoginAt: string | null;
@@ -19,6 +41,7 @@ export interface User {
     state: string | null;
     country: string | null;
   } | null;
+  agentProfile?: AgentProfileDetails | null;
 }
 
 export interface UsersListResponse {
@@ -74,6 +97,11 @@ class UsersService {
     const response = await api.patch<ApiResponse<User>>(`${this.basePath}/${id}/status`, { status });
     return response.data.data;
   }
+
+  async updateAgentType(userId: string, agentTypeId: string): Promise<{ id: string; agentTypeId: string; agentType: AgentType; message: string }> {
+    const response = await api.patch<ApiResponse<{ id: string; agentTypeId: string; agentType: AgentType; message: string }>>(`${this.basePath}/${userId}/agent-type`, { agentTypeId });
+    return response.data.data;
+  }
 }
 
 export const usersService = new UsersService();