feat: add agency information section and dynamic field labels to profile experience data

src/app/(agent)/agent/dashboard/page.tsx

@@ -31,10 +31,19 @@ const mockData = {
 // Default experience data when no field values are available
 const defaultExperience: ExperienceData = {
   years: '-',
+  yearsLabel: 'Years in Experience',
   contracts: '-',
+  contractsLabel: 'Number of contracts closed',
   licensingAreas: [],
+  licensingAreasLabel: 'Licensing & Areas',
   expertiseYears: [],
+  expertiseYearsLabel: 'Areas in expertise & Years',
   certifications: [],
+  certificationsLabel: 'Certifications',
+  agencyName: '',
+  agencyDesignation: '',
+  agencyShowDesignation: false,
+  agencySectionLabel: 'Real Estate Agency & Designation',
 };
 
 // Default profile card data when no field values are available

src/app/(user)/user/profile/[id]/page.tsx

@@ -31,10 +31,19 @@ const mockData = {
 // Default experience data when no field values are available
 const defaultExperience: ExperienceData = {
   years: '-',
+  yearsLabel: 'Years in Experience',
   contracts: '-',
+  contractsLabel: 'Number of contracts closed',
   licensingAreas: [],
+  licensingAreasLabel: 'Licensing & Areas',
   expertiseYears: [],
+  expertiseYearsLabel: 'Areas in expertise & Years',
   certifications: [],
+  certificationsLabel: 'Certifications',
+  agencyName: '',
+  agencyDesignation: '',
+  agencyShowDesignation: false,
+  agencySectionLabel: 'Real Estate Agency & Designation',
 };
 
 // Default specialization fields data when no field values are available

src/components/profile/ExperienceSection.tsx

@@ -2,14 +2,7 @@
 
 import { useState } from 'react';
 import { Tag } from './Tag';
-
+import type { ExperienceData } from '@/utils/profileDataMapper';
-interface ExperienceData {
-  years: string;
-  contracts: string;
-  licensingAreas: string[];
-  expertiseYears: { area: string; years: string }[];
-  certifications: { name: string; org: string }[];
-}
 
 interface ExperienceSectionProps {
   experience: ExperienceData;
@@ -24,6 +17,13 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
   const [showAllExpertise, setShowAllExpertise] = useState(false);
   const [showAllCertifications, setShowAllCertifications] = useState(false);
 
+  // Build agency display — append designation if flag is set
+  const agencyDisplay = experience.agencyName
+    ? (experience.agencyShowDesignation && experience.agencyDesignation
+        ? `${experience.agencyName} - ${experience.agencyDesignation}`
+        : experience.agencyName)
+    : '';
+
   // Calculate how many more items are hidden
   const licensingRemaining = experience.licensingAreas.length - INITIAL_DISPLAY_COUNT;
   const expertiseRemaining = experience.expertiseYears.length - EXPERTISE_INITIAL_COUNT;
@@ -46,8 +46,22 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
       <div className="flex flex-col lg:flex-row gap-4 lg:gap-8">
         {/* Left Column */}
         <div className="flex-1 space-y-4">
+          {agencyDisplay && (
+            <>
+              <div>
+                <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">{experience.agencySectionLabel}</p>
+                <ul className="list-disc list-inside">
+                  <li className="font-serif font-medium text-[15px] leading-[21px] text-[#00293D]">
+                    {agencyDisplay}
+                  </li>
+                </ul>
+              </div>
+              {/* Horizontal divider */}
+              <div className="w-full h-0 border-t-[0.5px] border-solid border-[#00293D]/20" />
+            </>
+          )}
           <div>
-            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">Years in Experience</p>
+            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">{experience.yearsLabel}</p>
             <ul className="list-disc list-inside">
               <li className="font-serif font-medium text-[15px] leading-[21px] text-[#00293D]">
                 {experience.years !== '-' ? experience.years : <span className="text-[#00293D]/40">Not specified</span>}
@@ -57,7 +71,7 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
           {/* Horizontal divider */}
           <div className="w-full h-0 border-t-[0.5px] border-solid border-[#00293D]/20" />
           <div>
-            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">Number of contracts closed</p>
+            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">{experience.contractsLabel}</p>
             <ul className="list-disc list-inside">
               <li className="font-serif font-medium text-[15px] leading-[21px] text-[#00293D]">
                 {experience.contracts !== '-' ? experience.contracts : <span className="text-[#00293D]/40">Not specified</span>}
@@ -65,7 +79,7 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
             </ul>
           </div>
           <div>
-            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">Licensing &amp; Areas</p>
+            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">{experience.licensingAreasLabel}</p>
             <div className="flex flex-wrap gap-2">
               {experience.licensingAreas.length > 0 ? (
                 <>
@@ -105,7 +119,7 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
         {/* Right Column */}
         <div className="flex-1 space-y-4">
           <div>
-            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">Areas in expertise &amp; Years</p>
+            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">{experience.expertiseYearsLabel}</p>
             <div className="flex flex-wrap gap-2">
               {experience.expertiseYears.length > 0 ? (
                 <>
@@ -137,7 +151,7 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
             </div>
           </div>
           <div>
-            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">Certifications</p>
+            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">{experience.certificationsLabel}</p>
             {experience.certifications.length > 0 ? (
               <div>
                 <ul className="space-y-3">

src/utils/profileDataMapper.ts

@@ -3,10 +3,19 @@ import { FieldValueResponse } from '@/services/agents.service';
 // Experience data structure expected by ExperienceSection component
 export interface ExperienceData {
   years: string;
+  yearsLabel: string;
   contracts: string;
+  contractsLabel: string;
   licensingAreas: string[];
+  licensingAreasLabel: string;
   expertiseYears: { area: string; years: string }[];
+  expertiseYearsLabel: string;
   certifications: { name: string; org: string }[];
+  certificationsLabel: string;
+  agencyName: string;
+  agencyDesignation: string;
+  agencyShowDesignation: boolean;
+  agencySectionLabel: string;
 }
 
 // Certification entry from repeater field
@@ -23,6 +32,12 @@ function getFieldValue(fieldValues: FieldValueResponse[], slug: string): unknown
   return field?.value;
 }
 
+// Helper to get field label by slug
+function getFieldLabel(fieldValues: FieldValueResponse[], slug: string): string | undefined {
+  const field = fieldValues.find(f => f.fieldSlug === slug);
+  return field?.fieldName;
+}
+
 // Helper to get label from value for select/radio fields
 function mapYearsValueToLabel(value: string | undefined): string {
   if (!value) return '-';
@@ -115,12 +130,26 @@ export function mapFieldValuesToExperience(fieldValues: FieldValueResponse[]): E
   // Get certification entries from repeater
   const certificationEntries = getFieldValue(fieldValues, 'certification_entries');
 
+  // Agency & Designation fields
+  const agencyName = getFieldValue(fieldValues, 'agency_name') as string | undefined;
+  const agencyDesignation = getFieldValue(fieldValues, 'agency_designation') as string | undefined;
+  const agencyShowDesignation = getFieldValue(fieldValues, 'agency_show_designation');
+
   return {
     years: mapYearsValueToLabel(yearsInBusiness),
+    yearsLabel: getFieldLabel(fieldValues, 'years_in_business') || 'Years in Experience',
     contracts: formatContractsCount(contractsCompleted),
+    contractsLabel: getFieldLabel(fieldValues, 'contracts_completed') || 'Number of contracts closed',
     licensingAreas: licensedAreas || [],
+    licensingAreasLabel: getFieldLabel(fieldValues, 'licensed_areas') || 'Licensing & Areas',
     expertiseYears: parseExpertiseAreas(expertiseAreas),
+    expertiseYearsLabel: getFieldLabel(fieldValues, 'expertise_areas') || 'Areas in expertise & Years',
     certifications: parseCertifications(certificationEntries),
+    certificationsLabel: getFieldLabel(fieldValues, 'certification_entries') || 'Certifications',
+    agencyName: agencyName?.trim() || '',
+    agencyDesignation: agencyDesignation?.trim() || '',
+    agencyShowDesignation: agencyShowDesignation === true || agencyShowDesignation === 'true',
+    agencySectionLabel: getFieldLabel(fieldValues, 'agency_name') || 'Real Estate Agency & Designation',
   };
 }
 
@@ -133,7 +162,8 @@ export function hasExperienceData(experience: ExperienceData): boolean {
     experience.contracts !== '-' ||
     experience.licensingAreas.length > 0 ||
     experience.expertiseYears.length > 0 ||
-    experience.certifications.length > 0
+    experience.certifications.length > 0 ||
+    experience.agencyName.length > 0
   );
 }