fix

src/utils/profileDataMapper.ts

@@ -132,6 +132,19 @@ export interface ProfileCardData {
   serviceAreas: string[];
 }
 
+// Dynamic field data structure for SpecializationSection component
+// Each field within the "Specialization" section becomes a card
+export interface SpecializationFieldItem {
+  fieldSlug: string;
+  fieldName: string;
+  icon?: string;
+  values: string[];
+}
+
+export interface SpecializationFieldsData {
+  fields: SpecializationFieldItem[];
+}
+
 // Availability data structure
 export interface AvailabilityData {
   type: string;
@@ -219,3 +232,102 @@ export function mapFieldValuesToProfileCard(fieldValues: FieldValueResponse[]):
     serviceAreas: serviceAreas || licensedAreas || coverageAreas || [],
   };
 }
+
+// Field slug to icon mapping for specialization fields
+const fieldIconMapping: Record<string, string> = {
+  'client_specialization': '/assets/icons/home-icon.svg',
+  'property_type': '/assets/icons/chart-icon.svg',
+  'loan_type': '/assets/icons/wallet-icon.svg',
+  'areas_expertise_years': '/assets/icons/certification-icon.svg',
+  'licensing_areas': '/assets/icons/location-icon.svg',
+  'hobbies': '/assets/icons/heart-icon.svg',
+  'hobbies_interests': '/assets/icons/heart-icon.svg',
+  'price_points': '/assets/icons/wallet-icon.svg',
+  'price_point': '/assets/icons/wallet-icon.svg',
+  'default': '/assets/icons/home-icon.svg',
+};
+
+/**
+ * Get icon for a field based on its slug
+ */
+function getFieldIcon(fieldSlug: string): string {
+  const normalizedSlug = fieldSlug.toLowerCase();
+
+  // Check for exact match first
+  if (fieldIconMapping[normalizedSlug]) {
+    return fieldIconMapping[normalizedSlug];
+  }
+
+  // Check for partial matches
+  if (normalizedSlug.includes('loan')) return fieldIconMapping['loan_type'];
+  if (normalizedSlug.includes('property')) return fieldIconMapping['property_type'];
+  if (normalizedSlug.includes('hobby') || normalizedSlug.includes('interest')) return fieldIconMapping['hobbies'];
+  if (normalizedSlug.includes('price')) return fieldIconMapping['price_points'];
+  if (normalizedSlug.includes('client') || normalizedSlug.includes('special')) return fieldIconMapping['client_specialization'];
+  if (normalizedSlug.includes('license') || normalizedSlug.includes('area')) return fieldIconMapping['licensing_areas'];
+  if (normalizedSlug.includes('expertise') || normalizedSlug.includes('certification')) return fieldIconMapping['areas_expertise_years'];
+
+  return fieldIconMapping['default'];
+}
+
+/**
+ * Convert field value to string array for display
+ */
+function valueToStringArray(value: unknown): string[] {
+  if (!value) return [];
+
+  if (Array.isArray(value)) {
+    return value.map(v => String(v)).filter(v => v.trim() !== '');
+  }
+
+  if (typeof value === 'string' && value.trim()) {
+    return [value];
+  }
+
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return [String(value)];
+  }
+
+  return [];
+}
+
+/**
+ * Maps field values from the "Specialization" section to individual field cards
+ * Each field within the Specialization section becomes its own card
+ */
+export function mapFieldValuesToSpecializationFields(fieldValues: FieldValueResponse[]): SpecializationFieldsData {
+  // Filter only fields from the "Specialization" section
+  const specializationFields = fieldValues.filter(field => {
+    const sectionSlug = field.sectionSlug?.toLowerCase() || '';
+    return sectionSlug === 'specialization' || sectionSlug.includes('specialization');
+  });
+
+  // Create a card for each field
+  const fields: SpecializationFieldItem[] = [];
+
+  for (const field of specializationFields) {
+    const { fieldSlug, fieldName, value } = field;
+
+    // Skip if no field info or no value
+    if (!fieldSlug || !fieldName) continue;
+
+    const values = valueToStringArray(value);
+    if (values.length === 0) continue;
+
+    fields.push({
+      fieldSlug,
+      fieldName,
+      icon: getFieldIcon(fieldSlug),
+      values,
+    });
+  }
+
+  return { fields };
+}
+
+/**
+ * Check if specialization fields data has any meaningful content
+ */
+export function hasSpecializationFieldsData(data: SpecializationFieldsData): boolean {
+  return data.fields.length > 0 && data.fields.some(f => f.values.length > 0);
+}