mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-11 18:28:15 +00:00
feat: build Campaigns list and Campaign Detail pages
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,11 +1,172 @@
|
||||
import { TopBar } from "@/components/layout/top-bar";
|
||||
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';
|
||||
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 { useCampaigns } from '@/hooks/use-campaigns';
|
||||
import { useLeads } from '@/hooks/use-leads';
|
||||
import { formatCurrency } from '@/lib/format';
|
||||
|
||||
const detailTabs = [
|
||||
{ id: 'overview', label: 'Overview' },
|
||||
{ id: 'leads', label: 'Leads' },
|
||||
];
|
||||
|
||||
export const CampaignDetailPage = () => {
|
||||
return (
|
||||
<div className="flex flex-1 flex-col">
|
||||
<TopBar title="Campaign Detail" />
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const [activeTab, setActiveTab] = useState<string>('overview');
|
||||
|
||||
const { campaigns, ads } = useCampaigns();
|
||||
const { leads } = useLeads();
|
||||
|
||||
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]);
|
||||
|
||||
if (!campaign) {
|
||||
return (
|
||||
<div className="flex flex-1 items-center justify-center p-8">
|
||||
<p className="text-tertiary">Campaign Detail — coming soon</p>
|
||||
<p className="text-tertiary">Campaign not found.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const formatDateShort = (dateStr: string | null) => {
|
||||
if (!dateStr) return '--';
|
||||
return new Intl.DateTimeFormat('en-IN', { month: 'short', day: 'numeric', year: 'numeric' }).format(
|
||||
new Date(dateStr),
|
||||
);
|
||||
};
|
||||
|
||||
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">
|
||||
<h3 className="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>
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,11 +1,122 @@
|
||||
import { TopBar } from "@/components/layout/top-bar";
|
||||
import { useMemo, useState } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
|
||||
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 { useCampaigns } from '@/hooks/use-campaigns';
|
||||
import { useLeads } from '@/hooks/use-leads';
|
||||
import { formatCurrency } from '@/lib/format';
|
||||
import type { CampaignStatus } from '@/types/entities';
|
||||
|
||||
type TabConfig = {
|
||||
id: string;
|
||||
label: string;
|
||||
status: CampaignStatus | undefined;
|
||||
};
|
||||
|
||||
const tabs: TabConfig[] = [
|
||||
{ id: 'all', label: 'All', status: undefined },
|
||||
{ id: 'active', label: 'Active', status: 'ACTIVE' },
|
||||
{ id: 'paused', label: 'Paused', status: 'PAUSED' },
|
||||
{ id: 'completed', label: 'Completed', status: 'COMPLETED' },
|
||||
{ id: 'draft', label: 'Drafts', status: 'DRAFT' },
|
||||
];
|
||||
|
||||
export const CampaignsPage = () => {
|
||||
const [activeTab, setActiveTab] = useState<string>('all');
|
||||
|
||||
const selectedTab = tabs.find((t) => t.id === activeTab) ?? tabs[0];
|
||||
const { campaigns, ads } = useCampaigns({ status: selectedTab.status });
|
||||
const { campaigns: allCampaigns } = useCampaigns();
|
||||
const { leads } = useLeads();
|
||||
|
||||
const activeCount = allCampaigns.filter((c) => c.campaignStatus === 'ACTIVE').length;
|
||||
const totalSpent = allCampaigns.reduce((sum, c) => sum + (c.amountSpent?.amountMicros ?? 0), 0);
|
||||
|
||||
const subtitle = `${allCampaigns.length} campaigns \u00b7 ${activeCount} active \u00b7 ${formatCurrency(totalSpent)} total spend`;
|
||||
|
||||
// Index leads by campaignId for fast per-campaign lookups
|
||||
const leadsByCampaign = useMemo(() => {
|
||||
const map = new Map<string, typeof leads>();
|
||||
for (const lead of leads) {
|
||||
if (lead.campaignId) {
|
||||
const existing = map.get(lead.campaignId);
|
||||
if (existing) {
|
||||
existing.push(lead);
|
||||
} else {
|
||||
map.set(lead.campaignId, [lead]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return map;
|
||||
}, [leads]);
|
||||
|
||||
// Index ads by campaignId
|
||||
const adsByCampaign = useMemo(() => {
|
||||
const map = new Map<string, typeof ads>();
|
||||
for (const ad of ads) {
|
||||
if (ad.campaignId) {
|
||||
const existing = map.get(ad.campaignId);
|
||||
if (existing) {
|
||||
existing.push(ad);
|
||||
} else {
|
||||
map.set(ad.campaignId, [ad]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return map;
|
||||
}, [ads]);
|
||||
|
||||
// Tab badges
|
||||
const tabBadges: Record<string, number> = useMemo(() => ({
|
||||
all: allCampaigns.length,
|
||||
active: allCampaigns.filter((c) => c.campaignStatus === 'ACTIVE').length,
|
||||
paused: allCampaigns.filter((c) => c.campaignStatus === 'PAUSED').length,
|
||||
completed: allCampaigns.filter((c) => c.campaignStatus === 'COMPLETED').length,
|
||||
draft: allCampaigns.filter((c) => c.campaignStatus === 'DRAFT').length,
|
||||
}), [allCampaigns]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col">
|
||||
<TopBar title="Campaigns" />
|
||||
<div className="flex flex-1 items-center justify-center p-8">
|
||||
<p className="text-tertiary">Campaigns — coming soon</p>
|
||||
<TopBar title="Campaigns" subtitle={subtitle} />
|
||||
<div className="flex-1 overflow-y-auto p-7 space-y-5">
|
||||
<Tabs selectedKey={activeTab} onSelectionChange={(key) => setActiveTab(String(key))}>
|
||||
<TabList
|
||||
type="underline"
|
||||
size="sm"
|
||||
items={tabs.map((tab) => ({
|
||||
id: tab.id,
|
||||
label: tab.label,
|
||||
badge: tabBadges[tab.id] > 0 ? tabBadges[tab.id] : undefined,
|
||||
}))}
|
||||
>
|
||||
{(item) => (
|
||||
<Tab key={item.id} id={item.id} label={item.label} badge={item.badge} />
|
||||
)}
|
||||
</TabList>
|
||||
|
||||
{tabs.map((tab) => (
|
||||
<TabPanel key={tab.id} id={tab.id}>
|
||||
<div className="mt-5 grid grid-cols-1 gap-4 xl:grid-cols-2">
|
||||
{campaigns.map((campaign) => (
|
||||
<Link key={campaign.id} to={`/campaigns/${campaign.id}`} className="no-underline">
|
||||
<CampaignCard
|
||||
campaign={campaign}
|
||||
ads={adsByCampaign.get(campaign.id) ?? []}
|
||||
leads={leadsByCampaign.get(campaign.id) ?? []}
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
{campaigns.length === 0 && (
|
||||
<p className="col-span-full py-12 text-center text-sm text-tertiary">
|
||||
No campaigns match this filter.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</TabPanel>
|
||||
))}
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user