mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-05-18 20:08:19 +00:00
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
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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';
|
||||
|
||||
const detailTabs = [
|
||||
{ id: 'overview', label: 'Overview' },
|
||||
{ id: 'leads', label: 'Leads' },
|
||||
];
|
||||
import type { Lead } from '@/types/entities';
|
||||
|
||||
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,126 +69,122 @@ 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 */}
|
||||
<div className="px-7 pt-5">
|
||||
<Tabs selectedKey={activeTab} onSelectionChange={(key) => setActiveTab(String(key))}>
|
||||
<TabList
|
||||
type="underline"
|
||||
size="sm"
|
||||
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">
|
||||
{/* Main body: leads table on the left, campaign details + funnel + source on the right */}
|
||||
<div className="px-7 pt-5 pb-7">
|
||||
<div className="grid grid-cols-1 gap-5 xl:grid-cols-[1fr_340px]">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h3 className="text-md font-bold text-primary">
|
||||
Leads ({campaignLeads.length})
|
||||
</h3>
|
||||
</div>
|
||||
{campaignLeads.length === 0 ? (
|
||||
<div className="rounded-xl border border-secondary bg-primary p-8 text-center text-sm text-tertiary">
|
||||
No leads from this campaign yet.
|
||||
</div>
|
||||
) : (
|
||||
<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>
|
||||
{campaignAds.map((ad) => (
|
||||
<AdCard key={ad.id} ad={ad} />
|
||||
))}
|
||||
{campaignAds.length === 0 && (
|
||||
<p className="py-8 text-center text-sm text-tertiary">
|
||||
No ads for this campaign.
|
||||
</p>
|
||||
)}
|
||||
</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">
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-quaternary">Type</dt>
|
||||
<dd className="font-medium text-secondary">
|
||||
{campaign.campaignType?.replace(/_/g, ' ') ?? '--'}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-quaternary">Platform</dt>
|
||||
<dd className="font-medium text-secondary">
|
||||
{campaign.platform ?? '--'}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-quaternary">Start Date</dt>
|
||||
<dd className="font-medium text-secondary">
|
||||
{formatDateShort(campaign.startDate)}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-quaternary">End Date</dt>
|
||||
<dd className="font-medium text-secondary">
|
||||
{formatDateShort(campaign.endDate)}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-quaternary">Budget</dt>
|
||||
<dd className="font-medium text-secondary">
|
||||
{campaign.budget
|
||||
? formatCurrency(campaign.budget.amountMicros, campaign.budget.currencyCode)
|
||||
: '--'}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-quaternary">Impressions</dt>
|
||||
<dd className="font-medium text-secondary">
|
||||
{campaign.impressionCount?.toLocaleString('en-IN') ?? '--'}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-quaternary">Clicks</dt>
|
||||
<dd className="font-medium text-secondary">
|
||||
{campaign.clickCount?.toLocaleString('en-IN') ?? '--'}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div className="mt-4 space-y-3">
|
||||
<BudgetBar spent={campaign.amountSpent} budget={campaign.budget} />
|
||||
<HealthIndicator campaign={campaign} leads={campaignLeads} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conversion Funnel */}
|
||||
<ConversionFunnel campaign={campaign} leads={campaignLeads} />
|
||||
|
||||
{/* Source Breakdown */}
|
||||
<SourceBreakdown leads={campaignLeads} />
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="leads">
|
||||
<div className="mt-5 pb-7">
|
||||
<div className="flex flex-col items-center justify-center rounded-xl border border-secondary bg-primary p-12 text-center">
|
||||
<p className="text-md font-bold text-primary">
|
||||
{campaignLeads.length} lead{campaignLeads.length !== 1 ? 's' : ''} from this campaign
|
||||
</p>
|
||||
<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 className="space-y-3">
|
||||
{campaignAds.map((ad) => (
|
||||
<AdCard key={ad.id} ad={ad} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<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">
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-quaternary">Type</dt>
|
||||
<dd className="font-medium text-secondary">
|
||||
{campaign.campaignType?.replace(/_/g, ' ') ?? '--'}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-quaternary">Platform</dt>
|
||||
<dd className="font-medium text-secondary">
|
||||
{campaign.platform ?? '--'}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-quaternary">Start Date</dt>
|
||||
<dd className="font-medium text-secondary">
|
||||
{formatDateShort(campaign.startDate)}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-quaternary">End Date</dt>
|
||||
<dd className="font-medium text-secondary">
|
||||
{formatDateShort(campaign.endDate)}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-quaternary">Budget</dt>
|
||||
<dd className="font-medium text-secondary">
|
||||
{campaign.budget
|
||||
? formatCurrency(campaign.budget.amountMicros, campaign.budget.currencyCode)
|
||||
: '--'}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-quaternary">Impressions</dt>
|
||||
<dd className="font-medium text-secondary">
|
||||
{campaign.impressionCount?.toLocaleString('en-IN') ?? '--'}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-quaternary">Clicks</dt>
|
||||
<dd className="font-medium text-secondary">
|
||||
{campaign.clickCount?.toLocaleString('en-IN') ?? '--'}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div className="mt-4 space-y-3">
|
||||
<BudgetBar spent={campaign.amountSpent} budget={campaign.budget} />
|
||||
<HealthIndicator campaign={campaign} leads={campaignLeads} />
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
|
||||
<ConversionFunnel campaign={campaign} leads={campaignLeads} />
|
||||
|
||||
<SourceBreakdown leads={campaignLeads} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{activityLead && (
|
||||
<LeadActivitySlideout
|
||||
isOpen={!!activityLead}
|
||||
onOpenChange={(open) => !open && setActivityLead(null)}
|
||||
lead={activityLead}
|
||||
activities={leadActivities}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user