feat(campaigns): inline Leads on detail + remove View Leads button

QA ask: leads should be the default view on campaign detail, not behind tab navigation, with campaign metrics (budget / funnel / source) kept visible alongside.

- drop the Overview/Leads tabs
- render LeadTable filtered to campaignLeads on the left
- Campaign Details card + Conversion Funnel + Source Breakdown
  pinned on the right as a sticky sidebar
- hero: remove 'View Leads' button (was duplicate nav now)
- LeadActivitySlideout wired for row click-through

src/components/campaigns/campaign-hero.tsx

@@ -91,13 +91,6 @@ export const CampaignHero = ({ campaign }: CampaignHeroProps) => {
                             View on Platform
                         </Button>
                     )}
-                    <Button
-                        color="primary"
-                        size="sm"
-                        href={`/leads`}
-                    >
-                        View Leads
-                    </Button>
                 </div>
             </div>
         </div>

src/pages/campaign-detail.tsx

@@ -1,7 +1,6 @@
 import { useMemo, useState } from 'react';
 import { useParams } from 'react-router';
 
-import { Tabs, TabList, Tab, TabPanel } from '@/components/application/tabs/tabs';
 import { CampaignHero } from '@/components/campaigns/campaign-hero';
 import { KpiStrip } from '@/components/campaigns/kpi-strip';
 import { AdCard } from '@/components/campaigns/ad-card';
@@ -9,28 +8,52 @@ import { ConversionFunnel } from '@/components/campaigns/conversion-funnel';
 import { SourceBreakdown } from '@/components/campaigns/source-breakdown';
 import { BudgetBar } from '@/components/campaigns/budget-bar';
 import { HealthIndicator } from '@/components/campaigns/health-indicator';
-import { Button } from '@/components/base/buttons/button';
+import { LeadTable } from '@/components/leads/lead-table';
+import { LeadActivitySlideout } from '@/components/leads/lead-activity-slideout';
 import { useCampaigns } from '@/hooks/use-campaigns';
 import { useLeads } from '@/hooks/use-leads';
+import { useData } from '@/providers/data-provider';
 import { formatCurrency, formatDateOnly } from '@/lib/format';
-
+import type { Lead } from '@/types/entities';
-const detailTabs = [
-    { id: 'overview', label: 'Overview' },
-    { id: 'leads', label: 'Leads' },
-];
 
 export const CampaignDetailPage = () => {
     const { id } = useParams<{ id: string }>();
-    const [activeTab, setActiveTab] = useState<string>('overview');
 
     const { campaigns, ads } = useCampaigns();
     const { leads } = useLeads();
+    const { leadActivities } = useData();
 
     const campaign = campaigns.find((c) => c.id === id);
 
     const campaignAds = useMemo(() => ads.filter((ad) => ad.campaignId === id), [ads, id]);
     const campaignLeads = useMemo(() => leads.filter((lead) => lead.campaignId === id), [leads, id]);
 
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    const [sortField, setSortField] = useState('createdAt');
+    const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
+    const [activityLead, setActivityLead] = useState<Lead | null>(null);
+
+    const handleSort = (field: string) => {
+        if (field === sortField) {
+            setSortDirection((d) => (d === 'asc' ? 'desc' : 'asc'));
+        } else {
+            setSortField(field);
+            setSortDirection('desc');
+        }
+    };
+
+    const sortedLeads = useMemo(() => {
+        const copy = [...campaignLeads];
+        const dir = sortDirection === 'asc' ? 1 : -1;
+        copy.sort((a, b) => {
+            const av = (a as any)[sortField] ?? '';
+            const bv = (b as any)[sortField] ?? '';
+            if (av === bv) return 0;
+            return av > bv ? dir : -dir;
+        });
+        return copy;
+    }, [campaignLeads, sortField, sortDirection]);
+
     if (!campaign) {
         return (
             <div className="flex flex-1 items-center justify-center p-8">
@@ -46,43 +69,52 @@ export const CampaignDetailPage = () => {
 
     return (
         <div className="flex flex-1 flex-col overflow-y-auto">
-            {/* Hero header */}
             <CampaignHero campaign={campaign} />
 
-            {/* KPI strip */}
             <KpiStrip campaign={campaign} />
 
-            {/* Tabs */}
+            {/* Main body: leads table on the left, campaign details + funnel + source on the right */}
-            <div className="px-7 pt-5">
+            <div className="px-7 pt-5 pb-7">
-                <Tabs selectedKey={activeTab} onSelectionChange={(key) => setActiveTab(String(key))}>
+                <div className="grid grid-cols-1 gap-5 xl:grid-cols-[1fr_340px]">
-                    <TabList
+                    <div className="space-y-6">
-                        type="underline"
+                        <div>
-                        size="sm"
+                            <div className="mb-3 flex items-center justify-between">
-                        items={detailTabs}
-                    >
-                        {(item) => <Tab key={item.id} id={item.id} label={item.label} />}
-                    </TabList>
-
-                    <TabPanel id="overview">
-                        <div className="mt-5 grid grid-cols-1 gap-5 pb-7 xl:grid-cols-[1fr_340px]">
-                            {/* Left: Ads list */}
-                            <div className="space-y-3">
                                 <h3 className="text-md font-bold text-primary">
-                                    Ads ({campaignAds.length})
+                                    Leads ({campaignLeads.length})
                                 </h3>
-                                {campaignAds.map((ad) => (
+                            </div>
-                                    <AdCard key={ad.id} ad={ad} />
+                            {campaignLeads.length === 0 ? (
-                                ))}
+                                <div className="rounded-xl border border-secondary bg-primary p-8 text-center text-sm text-tertiary">
-                                {campaignAds.length === 0 && (
+                                    No leads from this campaign yet.
-                                    <p className="py-8 text-center text-sm text-tertiary">
+                                </div>
-                                        No ads for this campaign.
+                            ) : (
-                                    </p>
+                                <LeadTable
+                                    leads={sortedLeads}
+                                    selectedIds={selectedIds}
+                                    onSelectionChange={setSelectedIds}
+                                    sortField={sortField}
+                                    sortDirection={sortDirection}
+                                    onSort={handleSort}
+                                    onViewActivity={(lead) => setActivityLead(lead)}
+                                />
+                            )}
+                        </div>
+
+                        {campaignAds.length > 0 && (
+                            <div>
+                                <h3 className="mb-3 text-md font-bold text-primary">
+                                    Ads ({campaignAds.length})
+                                </h3>
+                                <div className="space-y-3">
+                                    {campaignAds.map((ad) => (
+                                        <AdCard key={ad.id} ad={ad} />
+                                    ))}
+                                </div>
+                            </div>
                         )}
                     </div>
 
-                            {/* Right: Details + Funnel + Source */}
                     <div className="space-y-4">
-                                {/* Campaign Details card */}
                         <div className="rounded-xl border border-secondary bg-primary p-4">
                             <h4 className="mb-3 text-sm font-bold text-primary">Campaign Details</h4>
                             <dl className="space-y-2 text-xs">
@@ -138,34 +170,21 @@ export const CampaignDetailPage = () => {
                             </div>
                         </div>
 
-                                {/* Conversion Funnel */}
                         <ConversionFunnel campaign={campaign} leads={campaignLeads} />
 
-                                {/* Source Breakdown */}
                         <SourceBreakdown leads={campaignLeads} />
                     </div>
                 </div>
-                    </TabPanel>
+            </div>
 
-                    <TabPanel id="leads">
+            {activityLead && (
-                        <div className="mt-5 pb-7">
+                <LeadActivitySlideout
-                            <div className="flex flex-col items-center justify-center rounded-xl border border-secondary bg-primary p-12 text-center">
+                    isOpen={!!activityLead}
-                                <p className="text-md font-bold text-primary">
+                    onOpenChange={(open) => !open && setActivityLead(null)}
-                                    {campaignLeads.length} lead{campaignLeads.length !== 1 ? 's' : ''} from this campaign
+                    lead={activityLead}
-                                </p>
+                    activities={leadActivities}
-                                <p className="mt-1 text-sm text-tertiary">
+                />
-                                    View the full leads table filtered by this campaign on the All Leads page.
+            )}
-                                </p>
-                                <div className="mt-4">
-                                    <Button color="primary" size="sm" href="/leads">
-                                        Go to All Leads
-                                    </Button>
-                                </div>
-                            </div>
-                        </div>
-                    </TabPanel>
-                </Tabs>
-            </div>
         </div>
     );
 };