From 8502191e2eebd247320fc569c6eaeed789a9f83f Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Wed, 4 Mar 2026 20:56:35 +0530
Subject: [PATCH] Fix: Prevent phone field conflicts by removing direct
 pre-population and prioritizing dynamic field slugs during agent profile
 updates.

---
 src/app/(agent)/agent/edit/page.tsx              | 11 +++++++----
 src/components/profile/SpecializationCard.tsx    |  2 +-
 src/components/profile/SpecializationSection.tsx |  4 ++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/app/(agent)/agent/edit/page.tsx b/src/app/(agent)/agent/edit/page.tsx
index a2d827d..4c95440 100644
--- a/src/app/(agent)/agent/edit/page.tsx
+++ b/src/app/(agent)/agent/edit/page.tsx
@@ -63,7 +63,9 @@ export default function EditProfilePage() {
         if (profile.firstName) initialData['first-name'] = profile.firstName;
         if (profile.lastName) initialData['last-name'] = profile.lastName;
         if (profile.email) initialData['email'] = profile.email;
-        if (profile.phone) initialData['phone'] = profile.phone;
+        // Note: phone is populated from dynamic field values (slug: phone_number)
+        // Don't pre-populate 'phone' here as it creates a stale shadow entry
+        // that conflicts with the dynamic field during save
         if (profile.bio) initialData['bio'] = profile.bio;
         if (profile.licenseNumber) initialData['license-number'] = profile.licenseNumber;
         if (profile.experience) initialData['experience'] = profile.experience;
@@ -277,9 +279,10 @@ export default function EditProfilePage() {
       // it gets the correct (possibly empty) value
       const profileUpdates: Partial<{ phone: string | null; email: string | null }> = {};
 
-      // Sync phone field - check multiple possible field slugs
-      // The dynamic fields might use different slugs for phone
-      const phoneFieldSlugs = ['phone', 'phone_number', 'cell_number', 'office_number'];
+      // Sync phone field - check dynamic field slugs FIRST, then legacy 'phone'
+      // Dynamic fields (phone_number, etc.) are the source of truth from the form
+      // 'phone' is a legacy pre-populated key and should only be used as fallback
+      const phoneFieldSlugs = ['phone_number', 'cell_number', 'office_number', 'phone'];
       for (const slug of phoneFieldSlugs) {
         const phoneValue = formData[slug];
         if (phoneValue !== undefined) {
diff --git a/src/components/profile/SpecializationCard.tsx b/src/components/profile/SpecializationCard.tsx
index a7d9704..c8209a6 100644
--- a/src/components/profile/SpecializationCard.tsx
+++ b/src/components/profile/SpecializationCard.tsx
@@ -29,7 +29,7 @@ export function SpecializationCard({
   };
 
   return (
-    <div className="bg-white rounded-[20px] p-6 text-center flex flex-col h-full border-[0.7px] border-[#E58625]">
+    <div className="bg-white rounded-[20px] p-6 text-center flex flex-col border-[0.7px] border-[#E58625]">
       <div className="flex justify-center mb-3">{icon}</div>
       <h4 className="font-bold text-[#00293D] text-[14px] leading-[17px] mb-4 font-fractul">{title}</h4>
       <div className="flex-1">
diff --git a/src/components/profile/SpecializationSection.tsx b/src/components/profile/SpecializationSection.tsx
index 88bfceb..6197636 100644
--- a/src/components/profile/SpecializationSection.tsx
+++ b/src/components/profile/SpecializationSection.tsx
@@ -29,7 +29,7 @@ export function SpecializationSection({ fieldsData }: SpecializationSectionProps
 
       {/* Top row - up to 3 cards */}
       {topRowFields.length > 0 && (
-        <div className={`flex flex-col lg:grid gap-6 mb-6 ${
+        <div className={`flex flex-col lg:grid lg:items-start gap-6 mb-6 ${
           topRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' :
           topRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' :
           'lg:grid-cols-3'
@@ -54,7 +54,7 @@ export function SpecializationSection({ fieldsData }: SpecializationSectionProps
 
       {/* Bottom row - remaining cards */}
       {bottomRowFields.length > 0 && (
-        <div className={`flex flex-col lg:grid gap-6 ${
+        <div className={`flex flex-col lg:grid lg:items-start gap-6 ${
           bottomRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' :
           bottomRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' :
           'lg:grid-cols-3'