fix

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

@@ -12,6 +12,7 @@ import {
   VerificationStatus,
   VerificationDocument,
   VerificationHistoryEntry,
+  AgentFieldValue,
 } from '@/services';
 
 export default function UserDetailPage() {
@@ -36,6 +37,7 @@ export default function UserDetailPage() {
   const [verificationNote, setVerificationNote] = useState('');
   const [isUpdatingVerification, setIsUpdatingVerification] = useState(false);
   const [verificationHistory, setVerificationHistory] = useState<VerificationHistoryEntry[]>([]);
+  const [agentFieldValues, setAgentFieldValues] = useState<AgentFieldValue[]>([]);
 
   // Helper function to check if avatar is an S3 key
   const isS3Key = (avatar: string | null | undefined): boolean => {
@@ -53,6 +55,9 @@ export default function UserDetailPage() {
     if (user && user.role === 'AGENT') {
       fetchVerificationDocuments();
       fetchVerificationHistory();
+      if (user.agentProfile?.id) {
+        fetchAgentFieldValues(user.agentProfile.id);
+      }
     }
   }, [user?.id, user?.role]);
 
@@ -143,6 +148,15 @@ export default function UserDetailPage() {
     }
   };
 
+  const fetchAgentFieldValues = async (agentProfileId: string) => {
+    try {
+      const values = await usersService.getAgentFieldValues(agentProfileId);
+      setAgentFieldValues(values);
+    } catch {
+      // Field values may not exist
+    }
+  };
+
   const handleVerification = async (status: VerificationStatus) => {
     if (!user) return;
 
@@ -578,6 +592,41 @@ export default function UserDetailPage() {
               </div>
             )}
 
+            {/* Agent Profile Data */}
+            {agentFieldValues.length > 0 && (
+              <div className="mb-6">
+                <h3 className="text-sm font-medium text-[#00293d] mb-3">Profile Data</h3>
+                <div className="space-y-4">
+                  {Object.entries(
+                    agentFieldValues
+                      .filter((fv) => fv.sectionSlug !== 'upload-documents')
+                      .reduce((acc, fv) => {
+                        if (!acc[fv.sectionName]) acc[fv.sectionName] = [];
+                        acc[fv.sectionName].push(fv);
+                        return acc;
+                      }, {} as Record<string, AgentFieldValue[]>)
+                  ).map(([sectionName, fields]) => (
+                    <div key={sectionName} className="p-3 bg-gray-50 rounded-lg">
+                      <h4 className="text-xs font-semibold text-[#00293d] uppercase tracking-wide mb-2">{sectionName}</h4>
+                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                        {fields.map((fv) => (
+                          <div key={fv.fieldSlug} className="text-sm">
+                            <span className="text-gray-500">{fv.fieldName}: </span>
+                            <span className="text-gray-900 font-medium">
+                              {fv.value === null || fv.value === undefined ? '-' :
+                                Array.isArray(fv.value) ? fv.value.map((v: any) => typeof v === 'object' ? (v.label || v.name || JSON.stringify(v)) : String(v)).join(', ') :
+                                typeof fv.value === 'object' ? JSON.stringify(fv.value) :
+                                String(fv.value)}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
             {/* Uploaded Documents */}
             <div className="mb-6">
               <h3 className="text-sm font-medium text-[#00293d] mb-3">Uploaded Documents</h3>
@@ -807,6 +856,37 @@ export default function UserDetailPage() {
                         {entry.admin && (
                           <p className="text-xs text-gray-500 mt-1">By: {entry.admin.email}</p>
                         )}
+                        {entry.submittedData && (
+                          <details className="mt-2">
+                            <summary className="text-xs text-blue-600 cursor-pointer hover:text-blue-800">View Submitted Data</summary>
+                            <div className="mt-2 p-3 bg-white rounded border border-gray-200 text-xs space-y-1">
+                              {entry.submittedData.firstName && (
+                                <p><span className="font-medium text-gray-600">Name:</span> {entry.submittedData.firstName} {entry.submittedData.lastName}</p>
+                              )}
+                              {entry.submittedData.email && (
+                                <p><span className="font-medium text-gray-600">Email:</span> {entry.submittedData.email}</p>
+                              )}
+                              {entry.submittedData.phone && (
+                                <p><span className="font-medium text-gray-600">Phone:</span> {entry.submittedData.phone}</p>
+                              )}
+                              {entry.submittedData.agentType && (
+                                <p><span className="font-medium text-gray-600">Type:</span> {entry.submittedData.agentType}</p>
+                              )}
+                              {entry.submittedData.sections && Object.entries(entry.submittedData.sections).map(([sectionSlug, sectionData]: [string, any]) => (
+                                <div key={sectionSlug} className="mt-2">
+                                  <p className="font-medium text-gray-700">{sectionData._name || sectionSlug}</p>
+                                  {Object.entries(sectionData).filter(([k]) => k !== '_name').map(([fieldSlug, fieldData]: [string, any]) => (
+                                    <p key={fieldSlug} className="ml-2 text-gray-600">
+                                      <span className="font-medium">{fieldData.name || fieldSlug}:</span>{' '}
+                                      {typeof fieldData.value === 'object' ? JSON.stringify(fieldData.value) : String(fieldData.value ?? '-')}
+                                    </p>
+                                  ))}
+                                </div>
+                              ))}
+                              <p className="text-gray-400 mt-1">Captured: {new Date(entry.submittedData.capturedAt).toLocaleString()}</p>
+                            </div>
+                          </details>
+                        )}
                       </div>
                     </div>
                   ))}

src/services/index.ts

@@ -22,6 +22,7 @@ export type {
   VerificationDocument,
   VerificationHistoryEntry,
   AgentProfileDetails,
+  AgentFieldValue,
 } from './users.service';
 
 // Agent Types Service

src/services/users.service.ts

@@ -156,6 +156,20 @@ class UsersService {
     const response = await api.get<ApiResponse<VerificationHistoryEntry[]>>(`${this.basePath}/${userId}/verification-history`);
     return response.data.data;
   }
+
+  async getAgentFieldValues(agentProfileId: string): Promise<AgentFieldValue[]> {
+    const response = await api.get<ApiResponse<{ agentProfileId: string; fieldValues: AgentFieldValue[] }>>(`/agents/${agentProfileId}/field-values`);
+    return response.data.data.fieldValues;
+  }
+}
+
+export interface AgentFieldValue {
+  fieldSlug: string;
+  fieldName: string;
+  fieldType: string;
+  sectionSlug: string;
+  sectionName: string;
+  value: unknown;
 }
 
 export interface VerificationHistoryEntry {
@@ -166,6 +180,7 @@ export interface VerificationHistoryEntry {
   adminId: string | null;
   createdAt: string;
   admin: { id: string; email: string } | null;
+  submittedData: Record<string, any> | null;
 }
 
 export const usersService = new UsersService();