feat: build Campaigns list and Campaign Detail pages

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-11 18:28:15 +00:00 · 2026-03-16 15:01:00 +05:30
parent 7970a34434
commit 41eadad0b3
11 changed files with 933 additions and 10 deletions
--- a/src/components/campaigns/campaign-hero.tsx
+++ b/src/components/campaigns/campaign-hero.tsx
@@ -0,0 +1,102 @@
+import { useNavigate } from 'react-router';
+import { ArrowLeft, LinkExternal01 } from '@untitledui/icons';
+
+import { Button } from '@/components/base/buttons/button';
+import { CampaignStatusBadge } from '@/components/shared/status-badge';
+import type { Campaign } from '@/types/entities';
+
+interface CampaignHeroProps {
+    campaign: Campaign;
+}
+
+const formatDateRange = (startDate: string | null, endDate: string | null): string => {
+    const fmt = (d: string) =>
+        new Intl.DateTimeFormat('en-IN', { month: 'short', day: 'numeric', year: 'numeric' }).format(new Date(d));
+
+    if (!startDate) return '--';
+    if (!endDate) return `${fmt(startDate)} \u2014 Ongoing`;
+    return `${fmt(startDate)} \u2014 ${fmt(endDate)}`;
+};
+
+const formatDuration = (startDate: string | null, endDate: string | null): string => {
+    if (!startDate) return '--';
+
+    const start = new Date(startDate);
+    const end = endDate ? new Date(endDate) : new Date();
+    const diffDays = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
+
+    return `${diffDays} days`;
+};
+
+export const CampaignHero = ({ campaign }: CampaignHeroProps) => {
+    const navigate = useNavigate();
+
+    return (
+        <div className="border-b border-secondary bg-primary px-7 py-6">
+            {/* Back button */}
+            <button
+                onClick={() => navigate('/campaigns')}
+                className="mb-4 flex items-center gap-1.5 text-sm text-tertiary transition hover:text-secondary cursor-pointer"
+            >
+                <ArrowLeft className="size-4" />
+                <span>Back to Campaigns</span>
+            </button>
+
+            {/* Title row */}
+            <div className="flex flex-wrap items-start justify-between gap-4">
+                <div className="min-w-0 flex-1">
+                    <h1 className="text-display-xs font-bold text-primary">
+                        {campaign.campaignName ?? 'Untitled Campaign'}
+                    </h1>
+
+                    <div className="mt-2 flex flex-wrap items-center gap-2 text-sm text-tertiary">
+                        <span>{campaign.externalCampaignId ?? campaign.id.slice(0, 12)}</span>
+                        <span className="text-quaternary">&middot;</span>
+                        <span>{formatDateRange(campaign.startDate, campaign.endDate)}</span>
+                    </div>
+
+                    {/* Badges */}
+                    <div className="mt-3 flex flex-wrap items-center gap-2">
+                        {campaign.platform && (
+                            <span className="rounded-lg bg-secondary px-2 py-0.5 text-xs font-medium text-secondary">
+                                {campaign.platform}
+                            </span>
+                        )}
+                        {campaign.campaignType && (
+                            <span className="rounded-lg bg-secondary px-2 py-0.5 text-xs font-medium text-secondary">
+                                {campaign.campaignType.replace(/_/g, ' ')}
+                            </span>
+                        )}
+                        {campaign.campaignStatus && <CampaignStatusBadge status={campaign.campaignStatus} />}
+                        <span className="rounded-lg bg-brand-primary_alt px-2 py-0.5 text-xs font-medium text-brand-secondary">
+                            {formatDuration(campaign.startDate, campaign.endDate)}
+                        </span>
+                    </div>
+                </div>
+
+                {/* Actions */}
+                <div className="flex shrink-0 items-center gap-2">
+                    {campaign.platformUrl && (
+                        <Button
+                            color="secondary"
+                            size="sm"
+                            iconTrailing={LinkExternal01}
+                            href={campaign.platformUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            View on Platform
+                        </Button>
+                    )}
+                    <Button
+                        color="primary"
+                        size="sm"
+                        href={`/leads`}
+                    >
+                        View Leads
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+};