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
|
View on Platform
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
<Button
|
|
||||||
color="primary"
|
|
||||||
size="sm"
|
|
||||||
href={`/leads`}
|
|
||||||
>
|
|
||||||
View Leads
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import { useMemo, useState } from 'react';
|
import { useMemo, useState } from 'react';
|
||||||
import { useParams } from 'react-router';
|
import { useParams } from 'react-router';
|
||||||
|
|
||||||
import { Tabs, TabList, Tab, TabPanel } from '@/components/application/tabs/tabs';
|
|
||||||
import { CampaignHero } from '@/components/campaigns/campaign-hero';
|
import { CampaignHero } from '@/components/campaigns/campaign-hero';
|
||||||
import { KpiStrip } from '@/components/campaigns/kpi-strip';
|
import { KpiStrip } from '@/components/campaigns/kpi-strip';
|
||||||
import { AdCard } from '@/components/campaigns/ad-card';
|
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 { SourceBreakdown } from '@/components/campaigns/source-breakdown';
|
||||||
import { BudgetBar } from '@/components/campaigns/budget-bar';
|
import { BudgetBar } from '@/components/campaigns/budget-bar';
|
||||||
import { HealthIndicator } from '@/components/campaigns/health-indicator';
|
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 { useCampaigns } from '@/hooks/use-campaigns';
|
||||||
import { useLeads } from '@/hooks/use-leads';
|
import { useLeads } from '@/hooks/use-leads';
|
||||||
|
import { useData } from '@/providers/data-provider';
|
||||||
import { formatCurrency, formatDateOnly } from '@/lib/format';
|
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 = () => {
|
export const CampaignDetailPage = () => {
|
||||||
const { id } = useParams<{ id: string }>();
|
const { id } = useParams<{ id: string }>();
|
||||||
const [activeTab, setActiveTab] = useState<string>('overview');
|
|
||||||
|
|
||||||
const { campaigns, ads } = useCampaigns();
|
const { campaigns, ads } = useCampaigns();
|
||||||
const { leads } = useLeads();
|
const { leads } = useLeads();
|
||||||
|
const { leadActivities } = useData();
|
||||||
|
|
||||||
const campaign = campaigns.find((c) => c.id === id);
|
const campaign = campaigns.find((c) => c.id === id);
|
||||||
|
|
||||||
const campaignAds = useMemo(() => ads.filter((ad) => ad.campaignId === id), [ads, id]);
|
const campaignAds = useMemo(() => ads.filter((ad) => ad.campaignId === id), [ads, id]);
|
||||||
const campaignLeads = useMemo(() => leads.filter((lead) => lead.campaignId === id), [leads, 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) {
|
if (!campaign) {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-1 items-center justify-center p-8">
|
<div className="flex flex-1 items-center justify-center p-8">
|
||||||
@@ -46,126 +69,122 @@ export const CampaignDetailPage = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-1 flex-col overflow-y-auto">
|
<div className="flex flex-1 flex-col overflow-y-auto">
|
||||||
{/* Hero header */}
|
|
||||||
<CampaignHero campaign={campaign} />
|
<CampaignHero campaign={campaign} />
|
||||||
|
|
||||||
{/* KPI strip */}
|
|
||||||
<KpiStrip campaign={campaign} />
|
<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">
|
<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})
|
Ads ({campaignAds.length})
|
||||||
</h3>
|
</h3>
|
||||||
{campaignAds.map((ad) => (
|
<div className="space-y-3">
|
||||||
<AdCard key={ad.id} ad={ad} />
|
{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>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</TabPanel>
|
|
||||||
</Tabs>
|
<ConversionFunnel campaign={campaign} leads={campaignLeads} />
|
||||||
|
|
||||||
|
<SourceBreakdown leads={campaignLeads} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{activityLead && (
|
||||||
|
<LeadActivitySlideout
|
||||||
|
isOpen={!!activityLead}
|
||||||
|
onOpenChange={(open) => !open && setActivityLead(null)}
|
||||||
|
lead={activityLead}
|
||||||
|
activities={leadActivities}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user