feat: build Campaigns list and Campaign Detail pages

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/shared/status-badge.tsx

@@ -1,5 +1,5 @@
 import { BadgeWithDot } from '@/components/base/badges/badges';
-import type { CampaignStatus, LeadStatus } from '@/types/entities';
+import type { AdStatus, CampaignStatus, LeadStatus } from '@/types/entities';
 
 const toTitleCase = (str: string): string =>
     str
@@ -52,3 +52,25 @@ export const CampaignStatusBadge = ({ status }: CampaignStatusBadgeProps) => {
         </BadgeWithDot>
     );
 };
+
+type AdStatusColor = 'gray' | 'success' | 'warning' | 'blue';
+
+const adStatusColorMap: Record<AdStatus, AdStatusColor> = {
+    DRAFT: 'gray',
+    ACTIVE: 'success',
+    PAUSED: 'warning',
+    ENDED: 'blue',
+};
+
+interface AdStatusBadgeProps {
+    status: AdStatus;
+}
+
+export const AdStatusBadge = ({ status }: AdStatusBadgeProps) => {
+    const color = adStatusColorMap[status];
+    return (
+        <BadgeWithDot size="sm" type="pill-color" color={color}>
+            {toTitleCase(status)}
+        </BadgeWithDot>
+    );
+};