helix-admin/helix-engage
1
0
Fork 0
mirror of https://dev.azure.com/globalhealthx/EMR/_git/helix-engage synced 2026-04-11 18:28:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: split mapping dropdowns into separate row above preview table

Browse Source 
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>
This commit is contained in:
saridsa2
2026-03-31 13:57:04 +05:30
parent b8ae561d0f
commit fdbce42213
1 changed files with 32 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/campaigns/lead-import-wizard.tsx
View File

@@ -283,27 +283,42 @@ export const LeadImportWizard = ({ isOpen, onOpenChange }: LeadImportWizardProps
{noPhoneCount > 0 && <span className="text-error-primary">{noPhoneCount} no phone</span>} {noPhoneCount > 0 && <span className="text-error-primary">{noPhoneCount} no phone</span>}
</div> </div>
<div className="overflow-hidden rounded-lg ring-1 ring-secondary"> {/* Mapping row — separate from table */}
<DynamicTable<DynamicRow> <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">
columns={[ {mapping.map(m => (
...mapping.map(m => ({ <div key={m.csvHeader} className="flex-1 min-w-[120px] px-1">
id: m.csvHeader, <span className="text-[10px] text-quaternary uppercase block mb-1 px-1">{m.csvHeader}</span>
label: m.csvHeader,
headerRenderer: () => (
<div className="space-y-1">
<span className="text-[10px] text-quaternary uppercase block">{m.csvHeader}</span>
<select <select
value={m.leadField ?? ''} value={m.leadField ?? ''}
onChange={e => handleMappingChange(m.csvHeader, e.target.value || null)} 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" 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> <option value="">— Skip —</option>
{LEAD_FIELDS.map(f => ( {LEAD_FIELDS.map(f => (
<option key={f.field} value={f.field}>{f.label}</option> <option key={f.field} value={f.field}>{f.label}</option>
))} ))}
</select> </select>
</div> </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.leadField ? LEAD_FIELDS.find(f => f.field === m.leadField)?.label ?? m.csvHeader : m.csvHeader,
}) as DynamicColumn), }) as DynamicColumn),
{ id: '__match__', label: 'Patient Match' }, { id: '__match__', label: 'Patient Match' },
]} ]}