helix-admin/helix-engage
1
0
Fork 0
mirror of https://dev.azure.com/globalhealthx/EMR/_git/helix-engage synced 2026-05-18 20:08:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: campaign detail — cards above table layout (stacked, not side-by-side)
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source 
Campaign Details, Conversion Funnel, Source Breakdown now render as
3-column horizontal cards above the leads table. Table gets full width.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
saridsa2
2026-04-17 16:58:17 +05:30
parent 911ea4cd6c
commit 4ddad7c060
1 changed files with 62 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/pages/campaign-detail.tsx
View File

@@ -73,9 +73,40 @@ export const CampaignDetailPage = () => {
<KpiStrip campaign={campaign} /> <KpiStrip campaign={campaign} />
{/* Main body: leads table on the left, campaign details + funnel + source on the right */} {/* Campaign details + funnel + source — horizontal cards above table */}
<div className="px-7 pt-5 pb-7"> <div className="px-7 pt-5">
<div className="grid grid-cols-1 gap-5 xl:grid-cols-[1fr_340px]"> <div className="grid grid-cols-1 gap-4 md:grid-cols-3 mb-6">
<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-1.5 text-xs">
{[
['Type', campaign.campaignType?.replace(/_/g, ' ') ?? '--'],
['Platform', campaign.platform ?? '--'],
['Start', formatDateShort(campaign.startDate)],
['End', formatDateShort(campaign.endDate)],
['Budget', campaign.budget ? formatCurrency(campaign.budget.amountMicros, campaign.budget.currencyCode) : '--'],
['Impressions', campaign.impressionCount?.toLocaleString('en-IN') ?? '--'],
['Clicks', campaign.clickCount?.toLocaleString('en-IN') ?? '--'],
].map(([label, value]) => (
<div key={label} className="flex justify-between">
<dt className="text-quaternary">{label}</dt>
<dd className="font-medium text-secondary">{value}</dd>
</div>
))}
</dl>
<div className="mt-3 space-y-2">
<BudgetBar spent={campaign.amountSpent} budget={campaign.budget} />
<HealthIndicator campaign={campaign} leads={campaignLeads} />
</div>
</div>
<ConversionFunnel campaign={campaign} leads={campaignLeads} />
<SourceBreakdown leads={campaignLeads} />
</div>
</div>
{/* Leads table — full width */}
<div className="px-7 pb-7">
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<div className="mb-3 flex items-center justify-between"> <div className="mb-3 flex items-center justify-between">
@@ -114,68 +145,6 @@ export const CampaignDetailPage = () => {
</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>
<ConversionFunnel campaign={campaign} leads={campaignLeads} />
<SourceBreakdown leads={campaignLeads} />
</div>
</div>
</div> </div>
{activityLead && ( {activityLead && (