From fdbce422138f1b1801db5b2d8116a61acb9fe82a Mon Sep 17 00:00:00 2001
From: saridsa2 <s.satya.suman@globaluniversityfoundation.com>
Date: Tue, 31 Mar 2026 13:57:04 +0530
Subject: [PATCH] feat: split mapping dropdowns into separate row above preview
 table

Mapping bar with styled dropdowns sits above the DynamicTable.
Mapped columns show brand highlight, unmapped show gray.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../campaigns/lead-import-wizard.tsx          | 49 ++++++++++++-------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/components/campaigns/lead-import-wizard.tsx b/src/components/campaigns/lead-import-wizard.tsx
index d53c2fa..08efaf1 100644
--- a/src/components/campaigns/lead-import-wizard.tsx
+++ b/src/components/campaigns/lead-import-wizard.tsx
@@ -283,27 +283,42 @@ export const LeadImportWizard = ({ isOpen, onOpenChange }: LeadImportWizardProps
                                                     {noPhoneCount > 0 && <span className="text-error-primary">{noPhoneCount} no phone</span>}
                                                 </div>
 
-                                                <div className="overflow-hidden rounded-lg ring-1 ring-secondary">
+                                                {/* Mapping row — separate from table */}
+                                                <div className="flex items-end gap-0 rounded-t-lg border border-b-0 border-secondary bg-secondary px-1 py-2 overflow-x-auto">
+                                                    {mapping.map(m => (
+                                                        <div key={m.csvHeader} className="flex-1 min-w-[120px] px-1">
+                                                            <span className="text-[10px] text-quaternary uppercase block mb-1 px-1">{m.csvHeader}</span>
+                                                            <select
+                                                                value={m.leadField ?? ''}
+                                                                onChange={e => handleMappingChange(m.csvHeader, e.target.value || null)}
+                                                                className={cx(
+                                                                    'w-full rounded-lg border px-2.5 py-1.5 text-xs font-medium transition duration-100 ease-linear appearance-none bg-no-repeat bg-[right_8px_center] bg-[length:12px] cursor-pointer',
+                                                                    m.leadField
+                                                                        ? 'border-brand bg-brand-primary text-brand-secondary'
+                                                                        : 'border-secondary bg-primary text-quaternary',
+                                                                )}
+                                                                style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")` }}
+                                                            >
+                                                                <option value="">— Skip —</option>
+                                                                {LEAD_FIELDS.map(f => (
+                                                                    <option key={f.field} value={f.field}>{f.label}</option>
+                                                                ))}
+                                                            </select>
+                                                        </div>
+                                                    ))}
+                                                    <div className="flex-1 min-w-[100px] px-1">
+                                                        <span className="text-[10px] text-quaternary uppercase block mb-1 px-1">Match</span>
+                                                        <div className="px-2.5 py-1.5 text-xs font-medium text-quaternary">Auto</div>
+                                                    </div>
+                                                </div>
+
+                                                {/* Data table */}
+                                                <div className="overflow-hidden rounded-b-lg ring-1 ring-secondary">
                                                     <DynamicTable<DynamicRow>
                                                         columns={[
                                                             ...mapping.map(m => ({
                                                                 id: m.csvHeader,
-                                                                label: m.csvHeader,
-                                                                headerRenderer: () => (
-                                                                    <div className="space-y-1">
-                                                                        <span className="text-[10px] text-quaternary uppercase block">{m.csvHeader}</span>
-                                                                        <select
-                                                                            value={m.leadField ?? ''}
-                                                                            onChange={e => handleMappingChange(m.csvHeader, e.target.value || null)}
-                                                                            className="w-full rounded border border-secondary bg-primary px-2 py-1 text-xs text-primary"
-                                                                        >
-                                                                            <option value="">Skip</option>
-                                                                            {LEAD_FIELDS.map(f => (
-                                                                                <option key={f.field} value={f.field}>{f.label}</option>
-                                                                            ))}
-                                                                        </select>
-                                                                    </div>
-                                                                ),
+                                                                label: m.leadField ? LEAD_FIELDS.find(f => f.field === m.leadField)?.label ?? m.csvHeader : m.csvHeader,
                                                             }) as DynamicColumn),
                                                             { id: '__match__', label: 'Patient Match' },
                                                         ]}