feat: CSV lead import — complete wizard with campaign selection, mapping, and patient matching

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/pages/campaigns.tsx

@@ -1,12 +1,12 @@
 import { useMemo, useState } from 'react';
 import { Link } from 'react-router';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPenToSquare } from '@fortawesome/pro-duotone-svg-icons';
+import { faPenToSquare, faFileImport } from '@fortawesome/pro-duotone-svg-icons';
 
-import { TopBar } from '@/components/layout/top-bar';
 import { Tabs, TabList, Tab, TabPanel } from '@/components/application/tabs/tabs';
 import { CampaignCard } from '@/components/campaigns/campaign-card';
 import { CampaignEditSlideout } from '@/components/campaigns/campaign-edit-slideout';
+import { LeadImportWizard } from '@/components/campaigns/lead-import-wizard';
 import { Button } from '@/components/base/buttons/button';
 import { useCampaigns } from '@/hooks/use-campaigns';
 import { useLeads } from '@/hooks/use-leads';
@@ -31,6 +31,7 @@ const tabs: TabConfig[] = [
 export const CampaignsPage = () => {
     const [activeTab, setActiveTab] = useState<string>('all');
     const [editCampaign, setEditCampaign] = useState<Campaign | null>(null);
+    const [importOpen, setImportOpen] = useState(false);
 
     const { refresh } = useData();
     const selectedTab = tabs.find((t) => t.id === activeTab) ?? tabs[0];
@@ -86,7 +87,22 @@ export const CampaignsPage = () => {
 
     return (
         <div className="flex flex-1 flex-col overflow-hidden">
-            <TopBar title="Campaigns" subtitle={subtitle} />
+            <header className="flex h-14 items-center justify-between border-b border-secondary bg-primary px-6">
+                <div className="flex flex-col justify-center">
+                    <h1 className="text-lg font-bold text-primary">Campaigns</h1>
+                    <p className="text-xs text-tertiary">{subtitle}</p>
+                </div>
+                <Button
+                    size="sm"
+                    color="primary"
+                    iconLeading={({ className }: { className?: string }) => (
+                        <FontAwesomeIcon icon={faFileImport} className={className} />
+                    )}
+                    onClick={() => setImportOpen(true)}
+                >
+                    Import Leads
+                </Button>
+            </header>
             <div className="flex-1 overflow-y-auto p-7 space-y-5">
                 <Tabs selectedKey={activeTab} onSelectionChange={(key) => setActiveTab(String(key))}>
                     <TabList
@@ -151,6 +167,8 @@ export const CampaignsPage = () => {
                     onSaved={refresh}
                 />
             )}
+
+            <LeadImportWizard isOpen={importOpen} onOpenChange={setImportOpen} />
         </div>
     );
 };