feat: Implement agent verification management, including document display and status updates, on the user detail page.

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

@@ -9,6 +9,8 @@ import {
   uploadService,
   agentTypesService,
   AgentType,
+  VerificationStatus,
+  VerificationDocument,
 } from '@/services';
 
 export default function UserDetailPage() {
@@ -27,6 +29,12 @@ export default function UserDetailPage() {
   const [isUpdatingAgentType, setIsUpdatingAgentType] = useState(false);
   const [updateSuccess, setUpdateSuccess] = useState('');
 
+  // Verification
+  const [verificationDocuments, setVerificationDocuments] = useState<VerificationDocument[]>([]);
+  const [isLoadingDocuments, setIsLoadingDocuments] = useState(false);
+  const [verificationNote, setVerificationNote] = useState('');
+  const [isUpdatingVerification, setIsUpdatingVerification] = useState(false);
+
   // Helper function to check if avatar is an S3 key
   const isS3Key = (avatar: string | null | undefined): boolean => {
     if (!avatar) return false;
@@ -38,6 +46,13 @@ export default function UserDetailPage() {
     fetchAgentTypes();
   }, [userId]);
 
+  // Fetch verification documents when user is loaded and is an agent
+  useEffect(() => {
+    if (user && user.role === 'AGENT') {
+      fetchVerificationDocuments();
+    }
+  }, [user?.id, user?.role]);
+
   const fetchUser = async () => {
     setIsLoading(true);
     setError('');
@@ -84,6 +99,97 @@ export default function UserDetailPage() {
     }
   };
 
+  const fetchVerificationDocuments = async () => {
+    if (!user || user.role !== 'AGENT') return;
+
+    setIsLoadingDocuments(true);
+    try {
+      const docs = await usersService.getVerificationDocuments(userId);
+      // Fetch presigned URLs for each document
+      const docsWithUrls = await Promise.all(
+        docs.map(async (doc) => {
+          try {
+            const url = await uploadService.getPresignedDownloadUrl(doc.key);
+            return { ...doc, url };
+          } catch {
+            return doc;
+          }
+        })
+      );
+      setVerificationDocuments(docsWithUrls);
+    } catch (err) {
+      console.error('Failed to fetch verification documents:', err);
+    } finally {
+      setIsLoadingDocuments(false);
+    }
+  };
+
+  const handleVerification = async (status: VerificationStatus) => {
+    if (!user) return;
+
+    setIsUpdatingVerification(true);
+    setError('');
+    setUpdateSuccess('');
+
+    try {
+      await usersService.updateVerification(user.id, {
+        status,
+        note: verificationNote || undefined,
+      });
+      setUpdateSuccess(
+        status === 'APPROVED'
+          ? 'Agent verification approved successfully'
+          : 'Agent verification rejected'
+      );
+      setVerificationNote('');
+      // Refresh user data
+      await fetchUser();
+      // Clear success message after 3 seconds
+      setTimeout(() => setUpdateSuccess(''), 3000);
+    } catch (err) {
+      setError(getErrorMessage(err));
+    } finally {
+      setIsUpdatingVerification(false);
+    }
+  };
+
+  const getVerificationStatusBadge = (status: VerificationStatus | undefined) => {
+    switch (status) {
+      case 'APPROVED':
+        return (
+          <span className="px-3 py-1 text-sm font-semibold rounded-full bg-green-100 text-green-800">
+            Approved
+          </span>
+        );
+      case 'REJECTED':
+        return (
+          <span className="px-3 py-1 text-sm font-semibold rounded-full bg-red-100 text-red-800">
+            Rejected
+          </span>
+        );
+      case 'PENDING_REVIEW':
+        return (
+          <span className="px-3 py-1 text-sm font-semibold rounded-full bg-yellow-100 text-yellow-800">
+            Pending Review
+          </span>
+        );
+      default:
+        return (
+          <span className="px-3 py-1 text-sm font-semibold rounded-full bg-gray-100 text-gray-800">
+            Not Submitted
+          </span>
+        );
+    }
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
   const handleUpdateAgentType = async () => {
     if (!selectedAgentTypeId || !user) return;
 
@@ -426,6 +532,233 @@ export default function UserDetailPage() {
           </div>
         </div>
       )}
+
+      {/* Verification Section (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">
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-semibold text-gray-900">Verification Status</h2>
+              {getVerificationStatusBadge(user.agentProfile.verificationStatus as VerificationStatus)}
+            </div>
+          </div>
+          <div className="p-6">
+            {/* Verification Info */}
+            {user.agentProfile.isVerified && user.agentProfile.verifiedAt && (
+              <div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg">
+                <p className="text-green-700 text-sm">
+                  Verified on {formatDate(user.agentProfile.verifiedAt)}
+                </p>
+              </div>
+            )}
+
+            {user.agentProfile.verificationStatus === 'REJECTED' && user.agentProfile.verificationNote && (
+              <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
+                <p className="text-red-700 text-sm font-medium">Rejection Note:</p>
+                <p className="text-red-600 text-sm mt-1">{user.agentProfile.verificationNote}</p>
+              </div>
+            )}
+
+            {/* Uploaded Documents */}
+            <div className="mb-6">
+              <h3 className="text-sm font-medium text-gray-900 mb-3">Uploaded Documents</h3>
+              {isLoadingDocuments ? (
+                <div className="flex items-center justify-center py-4">
+                  <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
+                </div>
+              ) : verificationDocuments.length > 0 ? (
+                <div className="space-y-2">
+                  {verificationDocuments.map((doc, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center justify-between p-3 bg-gray-50 border border-gray-200 rounded-lg"
+                    >
+                      <div className="flex items-center">
+                        <svg
+                          className="w-8 h-8 text-gray-400 mr-3"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                          />
+                        </svg>
+                        <div>
+                          <p className="text-sm font-medium text-gray-900">{doc.name}</p>
+                          <p className="text-xs text-gray-500">{formatFileSize(doc.size)}</p>
+                        </div>
+                      </div>
+                      {doc.url && (
+                        <a
+                          href={doc.url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="px-3 py-1 text-sm text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded transition-colors"
+                        >
+                          Download
+                        </a>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-sm text-gray-500 py-4 text-center">
+                  No documents uploaded yet
+                </p>
+              )}
+            </div>
+
+            {/* Admin Actions */}
+            {user.agentProfile.verificationStatus !== 'APPROVED' && (
+              <div className="border-t border-gray-200 pt-6">
+                <h3 className="text-sm font-medium text-gray-900 mb-3">Admin Actions</h3>
+
+                {/* Note Input */}
+                <div className="mb-4">
+                  <label className="block text-sm text-gray-500 mb-1">
+                    Note (optional, required for rejection)
+                  </label>
+                  <textarea
+                    value={verificationNote}
+                    onChange={(e) => setVerificationNote(e.target.value)}
+                    rows={2}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white placeholder:text-gray-500"
+                    placeholder="Enter a note for the agent (e.g., rejection reason)"
+                  />
+                </div>
+
+                {/* Action Buttons */}
+                <div className="flex space-x-3">
+                  <button
+                    onClick={() => handleVerification('APPROVED')}
+                    disabled={isUpdatingVerification || verificationDocuments.length === 0}
+                    className="flex-1 px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    {isUpdatingVerification ? (
+                      <span className="flex items-center justify-center">
+                        <svg
+                          className="animate-spin -ml-1 mr-2 h-4 w-4"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                        >
+                          <circle
+                            className="opacity-25"
+                            cx="12"
+                            cy="12"
+                            r="10"
+                            stroke="currentColor"
+                            strokeWidth="4"
+                          />
+                          <path
+                            className="opacity-75"
+                            fill="currentColor"
+                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                          />
+                        </svg>
+                        Processing...
+                      </span>
+                    ) : (
+                      <>
+                        <svg
+                          className="w-4 h-4 inline mr-1"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M5 13l4 4L19 7"
+                          />
+                        </svg>
+                        Approve Verification
+                      </>
+                    )}
+                  </button>
+                  <button
+                    onClick={() => handleVerification('REJECTED')}
+                    disabled={isUpdatingVerification || !verificationNote.trim()}
+                    className="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    {isUpdatingVerification ? (
+                      <span className="flex items-center justify-center">
+                        <svg
+                          className="animate-spin -ml-1 mr-2 h-4 w-4"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                        >
+                          <circle
+                            className="opacity-25"
+                            cx="12"
+                            cy="12"
+                            r="10"
+                            stroke="currentColor"
+                            strokeWidth="4"
+                          />
+                          <path
+                            className="opacity-75"
+                            fill="currentColor"
+                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                          />
+                        </svg>
+                        Processing...
+                      </span>
+                    ) : (
+                      <>
+                        <svg
+                          className="w-4 h-4 inline mr-1"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M6 18L18 6M6 6l12 12"
+                          />
+                        </svg>
+                        Reject Verification
+                      </>
+                    )}
+                  </button>
+                </div>
+                {!verificationNote.trim() && (
+                  <p className="mt-2 text-xs text-gray-500">
+                    * A note is required to reject verification
+                  </p>
+                )}
+                {verificationDocuments.length === 0 && (
+                  <p className="mt-2 text-xs text-amber-600">
+                    * Cannot approve without uploaded documents
+                  </p>
+                )}
+              </div>
+            )}
+
+            {/* Already Approved Message */}
+            {user.agentProfile.verificationStatus === 'APPROVED' && (
+              <div className="border-t border-gray-200 pt-6">
+                <div className="flex items-center text-green-600">
+                  <svg className="w-5 h-5 mr-2" 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="font-medium">This agent is verified</span>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
     </div>
   );
 }

src/services/index.ts

@@ -18,6 +18,9 @@ export type {
   User,
   UsersListResponse,
   UserFilters,
+  VerificationStatus,
+  VerificationDocument,
+  AgentProfileDetails,
 } from './users.service';
 
 // Agent Types Service

src/services/users.service.ts

@@ -1,6 +1,8 @@
 import api, { ApiResponse } from './api';
 
 // Types
+export type VerificationStatus = 'NONE' | 'PENDING_REVIEW' | 'APPROVED' | 'REJECTED';
+
 export interface AgentType {
   id: string;
   name: string;
@@ -8,6 +10,14 @@ export interface AgentType {
   description?: string;
 }
 
+export interface VerificationDocument {
+  key: string;
+  name: string;
+  size: number;
+  type: string;
+  url?: string;
+}
+
 export interface AgentProfileDetails {
   id: string;
   slug: string;
@@ -20,6 +30,12 @@ export interface AgentProfileDetails {
   profileCompleteness: number;
   agentTypeId?: string | null;
   agentType?: AgentType | null;
+  // Verification fields
+  isVerified?: boolean;
+  verificationStatus?: VerificationStatus;
+  verificationNote?: string | null;
+  verifiedAt?: string | null;
+  verifiedBy?: string | null;
 }
 
 export interface User {
@@ -102,6 +118,37 @@ class UsersService {
     const response = await api.patch<ApiResponse<{ id: string; agentTypeId: string; agentType: AgentType; message: string }>>(`${this.basePath}/${userId}/agent-type`, { agentTypeId });
     return response.data.data;
   }
+
+  async getVerificationDocuments(userId: string): Promise<VerificationDocument[]> {
+    const response = await api.get<ApiResponse<VerificationDocument[]>>(`${this.basePath}/${userId}/verification-documents`);
+    return response.data.data;
+  }
+
+  async updateVerification(
+    userId: string,
+    data: { status: VerificationStatus; note?: string }
+  ): Promise<{
+    id: string;
+    agentProfileId: string;
+    isVerified: boolean;
+    verificationStatus: VerificationStatus;
+    verificationNote: string | null;
+    verifiedAt: string | null;
+    verifiedBy: string | null;
+    message: string;
+  }> {
+    const response = await api.patch<ApiResponse<{
+      id: string;
+      agentProfileId: string;
+      isVerified: boolean;
+      verificationStatus: VerificationStatus;
+      verificationNote: string | null;
+      verifiedAt: string | null;
+      verifiedBy: string | null;
+      message: string;
+    }>>(`${this.basePath}/${userId}/verification`, data);
+    return response.data.data;
+  }
 }
 
 export const usersService = new UsersService();