update

frontend/src/components/campaigns/CampaignsDashboardTab.jsx

@@ -5,9 +5,9 @@ import {
     Play,
     Pause,
     Pencil,
-    Trash2,
-    TrendingUp,
-    FolderOpen,
+    Search,
+    SlidersHorizontal,
+    ExternalLink,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import CreateCampaignWizard from '@/components/campaigns/CreateCampaignWizard';
@@ -34,6 +34,12 @@ const DEMO_CAMPAIGNS = [
         lastEditedLabel: null,
         generationComplete: true,
         generationProgressPercent: 100,
+        createdAt: new Date(Date.now() - 86400000 * 12).toISOString(),
+        sequence: [
+            { type: 'action', channel: 'gmail', id: '1' },
+            { type: 'action', channel: 'gmail', id: '2' },
+            { type: 'action', channel: 'linkedin', id: '3' },
+        ],
     },
     {
         id: 'demo_2',
@@ -46,6 +52,8 @@ const DEMO_CAMPAIGNS = [
         lastEditedLabel: null,
         generationComplete: true,
         generationProgressPercent: 100,
+        createdAt: new Date(Date.now() - 86400000 * 5).toISOString(),
+        sequence: [{ type: 'action', channel: 'gmail', id: '1' }],
     },
     {
         id: 'demo_3',
@@ -58,6 +66,8 @@ const DEMO_CAMPAIGNS = [
         lastEditedLabel: 'Last edited 2 hours ago',
         generationComplete: true,
         generationProgressPercent: 100,
+        createdAt: new Date(Date.now() - 86400000 * 2).toISOString(),
+        sequence: [],
     },
 ];
 
@@ -71,9 +81,26 @@ function normalizeCampaign(c) {
             100,
             Math.round(c.generationProgressPercent ?? (genDone ? 100 : hasFile ? 0 : 100))
         ),
+        sequence: Array.isArray(c.sequence) ? c.sequence : [],
     };
 }
 
+function countSequenceActions(sequence) {
+    if (!Array.isArray(sequence)) return 0;
+    return sequence.filter((s) => s && s.type === 'action').length;
+}
+
+function formatCreatedAt(iso) {
+    if (!iso || typeof iso !== 'string') return '—';
+    try {
+        const d = new Date(iso);
+        if (Number.isNaN(d.getTime())) return '—';
+        return d.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
+    } catch {
+        return '—';
+    }
+}
+
 function loadCampaigns() {
     try {
         const raw = localStorage.getItem(STORAGE_KEY);
@@ -109,45 +136,48 @@ function progressFromGenerationStatus(status) {
     return exp ? Math.min(100, Math.round((done / exp) * 100)) : 0;
 }
 
-function StatusDot({ status }) {
-    const map = {
-        running: 'bg-emerald-500',
-        paused: 'bg-amber-500',
-        draft: 'bg-slate-400',
-    };
-    return <span className={cn('inline-block h-2 w-2 rounded-full', map[status] || map.draft)} />;
+function statusBadgeClass(status) {
+    if (status === 'running') return 'bg-emerald-50 text-emerald-800 ring-1 ring-emerald-200';
+    if (status === 'paused') return 'bg-amber-50 text-amber-900 ring-1 ring-amber-200';
+    return 'bg-slate-100 text-slate-700 ring-1 ring-slate-200';
 }
 
-function MetricBar({ value, colorClass }) {
-    const v = Math.min(100, Math.max(0, value));
-    return (
-        <div className="mt-2 h-2 w-full overflow-hidden rounded-full bg-slate-100">
-            <div className={cn('h-full rounded-full transition-all', colorClass)} style={{ width: `${v}%` }} />
-        </div>
-    );
+function statusLabel(status) {
+    if (status === 'running') return 'Active';
+    if (status === 'paused') return 'Paused';
+    return 'Draft';
 }
 
 /** Circular ring; hover shows native tooltip with percent (title). */
-function CampaignGenerationRing({ percent, complete, fileId }) {
+function CampaignGenerationRing({ percent, complete, fileId, compact = false }) {
     if (!fileId || complete) return null;
     const p = Math.min(100, Math.max(0, percent));
-    const r = 17;
+    const r = compact ? 14 : 17;
+    const stroke = compact ? 3 : 3.5;
+    const size = compact ? 36 : 44;
+    const cx = size / 2;
     const c = 2 * Math.PI * r;
     const offset = c * (1 - p / 100);
     return (
         <div
-            className="relative h-11 w-11 shrink-0 cursor-default"
+            className={cn('relative shrink-0 cursor-default', compact ? 'h-9 w-9' : 'h-11 w-11')}
             title={`Content generation: ${Math.round(p)}%`}
         >
-            <svg width="44" height="44" className="-rotate-90" viewBox="0 0 44 44" aria-hidden>
-                <circle cx="22" cy="22" r={r} fill="none" stroke="#e2e8f0" strokeWidth="3.5" />
+            <svg
+                width={size}
+                height={size}
+                className="-rotate-90"
+                viewBox={`0 0 ${size} ${size}`}
+                aria-hidden
+            >
+                <circle cx={cx} cy={cx} r={r} fill="none" stroke="#e2e8f0" strokeWidth={stroke} />
                 <circle
-                    cx="22"
-                    cy="22"
+                    cx={cx}
+                    cy={cx}
                     r={r}
                     fill="none"
                     stroke="#7c3aed"
-                    strokeWidth="3.5"
+                    strokeWidth={stroke}
                     strokeLinecap="round"
                     strokeDasharray={c}
                     strokeDashoffset={offset}
@@ -155,11 +185,14 @@ function CampaignGenerationRing({ percent, complete, fileId }) {
                 />
             </svg>
             <span
-                className="pointer-events-none absolute inset-0 flex items-center justify-center gap-0 px-0.5 text-center text-[10px] font-bold tabular-nums leading-none text-violet-800"
+                className={cn(
+                    'pointer-events-none absolute inset-0 flex items-center justify-center gap-0 px-0.5 text-center font-bold tabular-nums leading-none text-violet-800',
+                    compact ? 'text-[9px]' : 'text-[10px]'
+                )}
                 aria-hidden
             >
                 {Math.round(p)}
-                <span className="text-[8px] font-semibold">%</span>
+                <span className={cn('font-semibold', compact ? 'text-[7px]' : 'text-[8px]')}>%</span>
             </span>
         </div>
     );
@@ -170,6 +203,8 @@ export default function CampaignsDashboardTab() {
     const [wizardOpen, setWizardOpen] = useState(false);
     const [wizardCampaign, setWizardCampaign] = useState(null);
     const [menuOpenId, setMenuOpenId] = useState(null);
+    const [listTab, setListTab] = useState('all');
+    const [searchQuery, setSearchQuery] = useState('');
     const campaignsRef = useRef(campaigns);
 
     useEffect(() => {
@@ -233,24 +268,35 @@ export default function CampaignsDashboardTab() {
         return () => clearInterval(iv);
     }, []);
 
-    const metrics = useMemo(() => {
-        const withOpen = campaigns.filter((c) => c.openRate != null);
-        const avgOpen =
-            withOpen.length > 0
-                ? withOpen.reduce((s, c) => s + (c.openRate || 0), 0) / withOpen.length
-                : 0;
-        const withReply = campaigns.filter((c) => c.replyRate != null);
-        const avgReply =
-            withReply.length > 0
-                ? withReply.reduce((s, c) => s + (c.replyRate || 0), 0) / withReply.length
-                : 0;
-        const totalReach = campaigns.reduce((s, c) => s + (c.contacts || 0), 0);
-        return {
-            totalReach,
-            avgOpen,
-            avgReply,
-        };
-    }, [campaigns]);
+    const tabCounts = useMemo(
+        () => ({
+            all: campaigns.length,
+            running: campaigns.filter((c) => c.status === 'running').length,
+            paused: campaigns.filter((c) => c.status === 'paused').length,
+            draft: campaigns.filter((c) => c.status === 'draft').length,
+        }),
+        [campaigns]
+    );
+
+    const filteredCampaigns = useMemo(() => {
+        let list = campaigns;
+        if (listTab === 'running') list = list.filter((c) => c.status === 'running');
+        else if (listTab === 'paused') list = list.filter((c) => c.status === 'paused');
+        else if (listTab === 'draft') list = list.filter((c) => c.status === 'draft');
+        const q = searchQuery.trim().toLowerCase();
+        if (q) {
+            list = list.filter(
+                (c) =>
+                    String(c.name || '')
+                        .toLowerCase()
+                        .includes(q) ||
+                    String(c.prospectFileName || '')
+                        .toLowerCase()
+                        .includes(q)
+            );
+        }
+        return list;
+    }, [campaigns, listTab, searchQuery]);
 
     const toggleStatus = useCallback((id) => {
         setCampaigns((prev) =>
@@ -301,6 +347,7 @@ export default function CampaignsDashboardTab() {
                 replyRate: prevRow.replyRate ?? null,
                 teamExtra: prevRow.teamExtra ?? 0,
                 lastEditedLabel: 'Just now',
+                createdAt: prevRow.createdAt || new Date().toISOString(),
             });
             const idx = prev.findIndex((c) => c.id === id);
             if (idx >= 0) {
@@ -355,6 +402,7 @@ export default function CampaignsDashboardTab() {
                 replyRate: base.replyRate ?? null,
                 teamExtra: base.teamExtra ?? 0,
                 lastEditedLabel: 'Just now',
+                createdAt: base.createdAt || new Date().toISOString(),
             });
             if (idx >= 0) {
                 return prev.map((c, i) => (i === idx ? row : c));
@@ -380,53 +428,27 @@ export default function CampaignsDashboardTab() {
     }, []);
 
     return (
-        <div className="space-y-8">
-            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-                <p className="text-sm text-slate-600 sm:max-w-xl">
-                    Create campaigns from your wizard, then track delivery and content generation here. Open a
-                    campaign to review or adjust its setup.
-                </p>
+        <div className="space-y-6">
+            <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+                <div>
+                    <h1 className="text-2xl font-semibold tracking-tight text-slate-900">Email campaigns</h1>
+                    <p className="mt-1 max-w-2xl text-sm text-slate-600">
+                        Manage and analyze your outreach campaigns. Open a row to continue setup, edit sequence and
+                        prompts, or track content generation progress.
+                    </p>
+                </div>
                 <Button
                     type="button"
-                    className="shrink-0 bg-violet-600 text-white hover:bg-violet-700"
+                    className="shrink-0 bg-violet-600 px-5 text-white hover:bg-violet-700"
                     onClick={openWizardForCreate}
                 >
                     <Plus className="mr-2 h-4 w-4" />
-                    Create New Campaign
+                    Create campaign
                 </Button>
             </div>
 
-            <div className="grid gap-4 md:grid-cols-3">
-                <div className="relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
-                    <div className="pointer-events-none absolute -right-4 -top-4 opacity-[0.07]">
-                        <TrendingUp className="h-24 w-24 text-violet-600" />
-                    </div>
-                    <p className="text-xs font-medium uppercase tracking-wide text-slate-500">Active reach</p>
-                    <p className="mt-2 text-3xl font-bold tabular-nums text-violet-600">
-                        {metrics.totalReach.toLocaleString()}
-                    </p>
-                    <span className="mt-2 inline-flex rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-semibold text-emerald-700">
-                        ↑ 14% vs last month
-                    </span>
-                </div>
-                <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
-                    <p className="text-xs font-medium uppercase tracking-wide text-slate-500">Avg. open rate</p>
-                    <p className="mt-2 text-3xl font-bold tabular-nums text-slate-900">
-                        {metrics.avgOpen > 0 ? `${metrics.avgOpen.toFixed(1)}%` : '—'}
-                    </p>
-                    <MetricBar value={metrics.avgOpen} colorClass="bg-violet-500" />
-                </div>
-                <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
-                    <p className="text-xs font-medium uppercase tracking-wide text-slate-500">Response goal</p>
-                    <p className="mt-2 text-3xl font-bold tabular-nums text-slate-900">
-                        {metrics.avgReply > 0 ? `${metrics.avgReply.toFixed(1)}%` : '—'}
-                    </p>
-                    <MetricBar value={metrics.avgReply} colorClass="bg-amber-700/80" />
-                </div>
-            </div>
-
             {campaigns.length === 0 ? (
-                <div className="rounded-2xl border border-dashed border-slate-200 bg-white/60 py-16 text-center">
+                <div className="rounded-xl border border-dashed border-slate-200 bg-white py-16 text-center shadow-sm">
                     <p className="text-slate-600">No campaigns yet. Create your first campaign to get started.</p>
                     <Button
                         type="button"
@@ -434,153 +456,269 @@ export default function CampaignsDashboardTab() {
                         onClick={openWizardForCreate}
                     >
                         <Plus className="mr-2 h-4 w-4" />
-                        Create New Campaign
+                        Create campaign
                     </Button>
                 </div>
             ) : (
-                <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
-                    {campaigns.map((c) => (
-                        <article
-                            key={c.id}
-                            className="relative flex flex-col rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition hover:border-violet-200 hover:shadow-md"
-                        >
-                            <div className="absolute right-4 top-4">
-                                <CampaignGenerationRing
-                                    percent={c.generationProgressPercent ?? 0}
-                                    complete={!!c.generationComplete}
-                                    fileId={c.fileId}
-                                />
-                            </div>
-
-                            <div className="flex items-start justify-between gap-2 pr-12">
-                                <div className="flex items-center gap-2">
-                                    <StatusDot status={c.status} />
-                                    <span className="text-[11px] font-semibold uppercase tracking-wide text-slate-600">
-                                        {c.status === 'running'
-                                            ? 'Running'
-                                            : c.status === 'paused'
-                                              ? 'Paused'
-                                              : 'Draft'}
-                                    </span>
-                                </div>
-                                <div className="relative">
-                                    <button
-                                        type="button"
-                                        className="rounded-md p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-700"
-                                        aria-label="Campaign menu"
-                                        onClick={() => setMenuOpenId((id) => (id === c.id ? null : c.id))}
-                                    >
-                                        <MoreVertical className="h-4 w-4" />
-                                    </button>
-                                    {menuOpenId === c.id ? (
-                                        <>
-                                            <button
-                                                type="button"
-                                                className="fixed inset-0 z-10 cursor-default"
-                                                aria-label="Close menu"
-                                                onClick={() => setMenuOpenId(null)}
-                                            />
-                                            <div className="absolute right-0 z-20 mt-1 w-44 rounded-lg border border-slate-200 bg-white py-1 text-sm shadow-lg">
-                                                <button
-                                                    type="button"
-                                                    className="block w-full px-3 py-2 text-left hover:bg-slate-50"
-                                                    onClick={() => openWizardForEdit(c)}
-                                                >
-                                                    Edit in wizard
-                                                </button>
-                                                <button
-                                                    type="button"
-                                                    className="block w-full px-3 py-2 text-left text-red-600 hover:bg-red-50"
-                                                    onClick={() => deleteCampaign(c.id)}
-                                                >
-                                                    Delete
-                                                </button>
-                                            </div>
-                                        </>
-                                    ) : null}
-                                </div>
-                            </div>
-
-                            <h3 className="mt-2 pr-10 text-lg font-semibold leading-snug text-slate-900">{c.name}</h3>
-                            {c.prospectFileName ? (
-                                <p className="mt-1 truncate text-xs text-slate-500" title={c.prospectFileName}>
-                                    {c.prospectFileName}
-                                </p>
-                            ) : null}
-
-                            <div className="mt-4 grid grid-cols-3 gap-2 text-center">
-                                <div>
-                                    <p className="text-[11px] font-medium uppercase text-slate-500">Contacts</p>
-                                    <p className="mt-0.5 font-semibold tabular-nums text-slate-900">
-                                        {(c.contacts || 0).toLocaleString()}
-                                    </p>
-                                </div>
-                                <div title="Personalized rows written for this upload">
-                                    <p className="text-[11px] font-medium uppercase text-slate-500">Content</p>
-                                    <p className="mt-0.5 font-semibold tabular-nums text-slate-900">
-                                        {c.generationComplete ? '100%' : `${Math.round(c.generationProgressPercent ?? 0)}%`}
-                                    </p>
-                                </div>
-                                <div>
-                                    <p className="text-[11px] font-medium uppercase text-slate-500">Open</p>
-                                    <p className="mt-0.5 font-semibold tabular-nums text-slate-900">
-                                        {c.openRate != null ? `${c.openRate}%` : '—'}
-                                    </p>
-                                </div>
-                            </div>
-
-                            <div className="mt-4 flex flex-wrap items-center gap-2 border-t border-slate-100 pt-4">
-                                <Button
-                                    type="button"
-                                    size="sm"
-                                    variant="outline"
-                                    className="border-violet-200 text-violet-800 hover:bg-violet-50"
-                                    onClick={() => openWizardForEdit(c)}
-                                >
-                                    <FolderOpen className="mr-1.5 h-4 w-4" />
-                                    Open
-                                </Button>
-                                {c.status === 'running' ? (
-                                    <button
-                                        type="button"
-                                        onClick={() => toggleStatus(c.id)}
-                                        className="rounded-lg p-2 text-slate-500 hover:bg-slate-100 hover:text-slate-800"
-                                        title="Pause"
-                                    >
-                                        <Pause className="h-4 w-4" />
-                                    </button>
-                                ) : c.status === 'paused' ? (
-                                    <button
-                                        type="button"
-                                        onClick={() => toggleStatus(c.id)}
-                                        className="rounded-lg p-2 text-slate-500 hover:bg-slate-100 hover:text-slate-800"
-                                        title="Resume"
-                                    >
-                                        <Play className="h-4 w-4" />
-                                    </button>
-                                ) : null}
-                                <button
-                                    type="button"
-                                    className="rounded-lg p-2 text-slate-500 hover:bg-slate-100 hover:text-slate-800"
-                                    title="Edit in wizard"
-                                    onClick={() => openWizardForEdit(c)}
-                                >
-                                    <Pencil className="h-4 w-4" />
-                                </button>
+                <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+                    <div className="flex flex-col gap-4 border-b border-slate-100 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-5">
+                        <div className="flex flex-wrap items-center gap-x-5 gap-y-2">
+                            {[
+                                { id: 'all', label: 'All', count: tabCounts.all },
+                                { id: 'running', label: 'Active', count: tabCounts.running },
+                                { id: 'paused', label: 'Paused', count: tabCounts.paused },
+                                { id: 'draft', label: 'Draft', count: tabCounts.draft },
+                            ].map((t) => (
                                 <button
+                                    key={t.id}
                                     type="button"
-                                    onClick={() => deleteCampaign(c.id)}
-                                    className="rounded-lg p-2 text-slate-500 hover:bg-red-50 hover:text-red-600"
-                                    title="Delete"
+                                    onClick={() => setListTab(t.id)}
+                                    className={cn(
+                                        'border-b-2 pb-2 text-xs font-semibold uppercase tracking-wide transition',
+                                        listTab === t.id
+                                            ? 'border-violet-600 text-violet-700'
+                                            : 'border-transparent text-slate-500 hover:text-slate-800'
+                                    )}
                                 >
-                                    <Trash2 className="h-4 w-4" />
+                                    {t.label} ({t.count})
                                 </button>
-                                {c.lastEditedLabel ? (
-                                    <span className="ml-auto text-xs text-slate-500">{c.lastEditedLabel}</span>
-                                ) : null}
+                            ))}
+                        </div>
+                        <div className="flex flex-wrap items-center gap-2">
+                            <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                className="text-slate-600"
+                                disabled
+                                title="Coming soon"
+                            >
+                                <SlidersHorizontal className="mr-1.5 h-3.5 w-3.5" />
+                                Filter
+                            </Button>
+                            <div className="relative min-w-[200px] flex-1 sm:max-w-xs">
+                                <Search className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+                                <input
+                                    type="search"
+                                    placeholder="Search campaigns…"
+                                    value={searchQuery}
+                                    onChange={(e) => setSearchQuery(e.target.value)}
+                                    className="h-9 w-full rounded-lg border border-slate-200 bg-slate-50/80 py-1.5 pl-9 pr-3 text-sm text-slate-900 outline-none ring-violet-200 transition placeholder:text-slate-400 focus:border-violet-300 focus:bg-white focus:ring-2"
+                                />
                             </div>
-                        </article>
-                    ))}
+                        </div>
+                    </div>
+
+                    <div className="overflow-x-auto">
+                        <table className="w-full min-w-[900px] border-collapse text-left text-sm">
+                            <thead>
+                                <tr className="border-b border-slate-100 bg-slate-50/90 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                                    <th className="w-10 px-3 py-3">
+                                        <span className="sr-only">Select</span>
+                                        <input
+                                            type="checkbox"
+                                            disabled
+                                            className="rounded border-slate-300 text-violet-600"
+                                            aria-label="Select all (coming soon)"
+                                        />
+                                    </th>
+                                    <th className="min-w-[280px] px-3 py-3">Campaign</th>
+                                    <th className="px-3 py-3 text-right tabular-nums">Leads</th>
+                                    <th className="px-3 py-3 text-right tabular-nums">Content</th>
+                                    <th className="px-3 py-3 text-right tabular-nums">Sent</th>
+                                    <th className="px-3 py-3 text-right tabular-nums">Opened</th>
+                                    <th className="px-3 py-3 text-right tabular-nums">Clicked</th>
+                                    <th className="px-3 py-3 text-right tabular-nums">Replied</th>
+                                    <th className="w-28 px-3 py-3 text-right">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {filteredCampaigns.length === 0 ? (
+                                    <tr>
+                                        <td
+                                            colSpan={9}
+                                            className="px-4 py-12 text-center text-sm text-slate-500"
+                                        >
+                                            No campaigns match this filter or search.
+                                        </td>
+                                    </tr>
+                                ) : (
+                                    filteredCampaigns.map((c) => {
+                                        const seqN = countSequenceActions(c.sequence);
+                                        const metaSeq =
+                                            seqN > 0
+                                                ? `${seqN} sequence${seqN === 1 ? '' : 's'}`
+                                                : 'Sequence not saved';
+                                        const created = formatCreatedAt(c.createdAt);
+                                        const contentPct = c.generationComplete
+                                            ? '100%'
+                                            : `${Math.round(c.generationProgressPercent ?? 0)}%`;
+                                        return (
+                                            <tr
+                                                key={c.id}
+                                                className="border-b border-slate-100 transition hover:bg-slate-50/80"
+                                            >
+                                                <td className="px-3 py-3 align-middle">
+                                                    <input
+                                                        type="checkbox"
+                                                        disabled
+                                                        className="rounded border-slate-300 text-violet-600"
+                                                        aria-label={`Select ${c.name}`}
+                                                    />
+                                                </td>
+                                                <td className="max-w-[360px] px-3 py-3 align-middle">
+                                                    <div className="flex items-start gap-3">
+                                                        <div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center">
+                                                            {c.fileId && !c.generationComplete ? (
+                                                                <CampaignGenerationRing
+                                                                    percent={c.generationProgressPercent ?? 0}
+                                                                    complete={false}
+                                                                    fileId={c.fileId}
+                                                                    compact
+                                                                />
+                                                            ) : c.fileId && c.generationComplete ? (
+                                                                <span
+                                                                    className="flex h-9 w-9 items-center justify-center rounded-full bg-emerald-50 text-[10px] font-bold text-emerald-700 ring-1 ring-emerald-200"
+                                                                    title="Content generation complete"
+                                                                >
+                                                                    100%
+                                                                </span>
+                                                            ) : (
+                                                                <span
+                                                                    className="flex h-9 w-9 items-center justify-center rounded-full bg-slate-100 text-[10px] font-medium text-slate-400"
+                                                                    title="No upload"
+                                                                >
+                                                                    —
+                                                                </span>
+                                                            )}
+                                                        </div>
+                                                        <div className="min-w-0 flex-1">
+                                                            <button
+                                                                type="button"
+                                                                onClick={() => openWizardForEdit(c)}
+                                                                className="group flex items-center gap-1.5 text-left font-semibold text-slate-900 hover:text-violet-700"
+                                                            >
+                                                                <span className="truncate">{c.name}</span>
+                                                                <ExternalLink className="h-3.5 w-3.5 shrink-0 text-slate-400 opacity-0 transition group-hover:opacity-100 group-hover:text-violet-600" />
+                                                            </button>
+                                                            <div className="mt-1 flex flex-wrap items-center gap-2">
+                                                                <span
+                                                                    className={cn(
+                                                                        'inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold',
+                                                                        statusBadgeClass(c.status)
+                                                                    )}
+                                                                >
+                                                                    {statusLabel(c.status)}
+                                                                </span>
+                                                                <span className="text-xs text-slate-500">
+                                                                    {metaSeq} · Created {created}
+                                                                </span>
+                                                            </div>
+                                                            {c.prospectFileName ? (
+                                                                <p
+                                                                    className="mt-0.5 truncate text-xs text-slate-400"
+                                                                    title={c.prospectFileName}
+                                                                >
+                                                                    {c.prospectFileName}
+                                                                </p>
+                                                            ) : null}
+                                                        </div>
+                                                    </div>
+                                                </td>
+                                                <td className="px-3 py-3 text-right tabular-nums text-slate-800">
+                                                    {(c.contacts || 0).toLocaleString()}
+                                                </td>
+                                                <td className="px-3 py-3 text-right tabular-nums font-medium text-violet-700">
+                                                    {contentPct}
+                                                </td>
+                                                <td className="px-3 py-3 text-right tabular-nums text-slate-500">
+                                                    —
+                                                </td>
+                                                <td className="px-3 py-3 text-right tabular-nums text-fuchsia-700">
+                                                    {c.openRate != null ? `— / ${c.openRate}%` : '—'}
+                                                </td>
+                                                <td className="px-3 py-3 text-right tabular-nums text-amber-700">
+                                                    —
+                                                </td>
+                                                <td className="px-3 py-3 text-right tabular-nums text-teal-700">
+                                                    {c.replyRate != null ? `— / ${c.replyRate}%` : '—'}
+                                                </td>
+                                                <td className="px-3 py-3 text-right align-middle">
+                                                    <div className="flex items-center justify-end gap-0.5">
+                                                        {c.status === 'running' ? (
+                                                            <button
+                                                                type="button"
+                                                                onClick={() => toggleStatus(c.id)}
+                                                                className="rounded-md p-2 text-slate-500 hover:bg-slate-100 hover:text-slate-800"
+                                                                title="Pause"
+                                                            >
+                                                                <Pause className="h-4 w-4" />
+                                                            </button>
+                                                        ) : c.status === 'paused' ? (
+                                                            <button
+                                                                type="button"
+                                                                onClick={() => toggleStatus(c.id)}
+                                                                className="rounded-md p-2 text-slate-500 hover:bg-slate-100 hover:text-slate-800"
+                                                                title="Resume"
+                                                            >
+                                                                <Play className="h-4 w-4" />
+                                                            </button>
+                                                        ) : null}
+                                                        <button
+                                                            type="button"
+                                                            className="rounded-md p-2 text-slate-500 hover:bg-slate-100 hover:text-slate-800"
+                                                            title="Edit"
+                                                            onClick={() => openWizardForEdit(c)}
+                                                        >
+                                                            <Pencil className="h-4 w-4" />
+                                                        </button>
+                                                        <div className="relative">
+                                                            <button
+                                                                type="button"
+                                                                className="rounded-md p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-700"
+                                                                aria-label="More"
+                                                                onClick={() =>
+                                                                    setMenuOpenId((id) => (id === c.id ? null : c.id))
+                                                                }
+                                                            >
+                                                                <MoreVertical className="h-4 w-4" />
+                                                            </button>
+                                                            {menuOpenId === c.id ? (
+                                                                <>
+                                                                    <button
+                                                                        type="button"
+                                                                        className="fixed inset-0 z-10 cursor-default"
+                                                                        aria-label="Close menu"
+                                                                        onClick={() => setMenuOpenId(null)}
+                                                                    />
+                                                                    <div className="absolute right-0 z-20 mt-1 w-44 rounded-lg border border-slate-200 bg-white py-1 text-sm shadow-lg">
+                                                                        <button
+                                                                            type="button"
+                                                                            className="block w-full px-3 py-2 text-left hover:bg-slate-50"
+                                                                            onClick={() => openWizardForEdit(c)}
+                                                                        >
+                                                                            Open in wizard
+                                                                        </button>
+                                                                        <button
+                                                                            type="button"
+                                                                            className="block w-full px-3 py-2 text-left text-red-600 hover:bg-red-50"
+                                                                            onClick={() => deleteCampaign(c.id)}
+                                                                        >
+                                                                            Delete
+                                                                        </button>
+                                                                    </div>
+                                                                </>
+                                                            ) : null}
+                                                        </div>
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        );
+                                    })
+                                )}
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
             )}
 

frontend/src/components/campaigns/CreateCampaignWizard.jsx

@@ -1052,50 +1052,41 @@ export default function CreateCampaignWizard({
                                     </span>
                                 ) : null}
                             </div>
-                            <div className="flex justify-end">
-                                <Button
-                                    type="button"
-                                    className="bg-violet-600 text-white hover:bg-violet-700"
-                                    onClick={handleLaunch}
-                                >
-                                    Launch campaign
-                                </Button>
-                            </div>
                         </div>
                     )}
                 </div>
 
-                <div className="flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 bg-white px-5 py-4 sm:px-8">
-                    <button
-                        type="button"
-                        onClick={() => requestClose()}
-                        className="text-sm font-medium text-slate-600 hover:text-slate-900"
-                    >
-                        Cancel
-                    </button>
-                    <div className="flex flex-wrap items-center gap-2">
-                        {step > 1 ? (
-                            <Button type="button" variant="outline" onClick={handleBack}>
-                                <ArrowLeft className="mr-2 h-4 w-4" />
-                                Back
-                            </Button>
-                        ) : null}
-                        {step < 4 ? (
-                            <Button
-                                type="button"
-                                disabled={step === 1 && !canContinueStep1}
-                                className="bg-violet-600 text-white hover:bg-violet-700 disabled:opacity-40"
-                                onClick={handleContinue}
-                            >
-                                {step === 1
-                                    ? 'Continue to Sequence'
-                                    : step === 3
-                                      ? 'Continue to Review & Launch'
-                                      : `Continue to ${STEPS[step]?.label ?? 'next'}`}
-                                <ArrowRight className="ml-2 h-4 w-4" />
-                            </Button>
-                        ) : null}
-                    </div>
+                <div className="flex flex-wrap items-center justify-end gap-2 border-t border-slate-100 bg-white px-5 py-4 sm:px-8">
+                    {step === 4 ? (
+                        <Button
+                            type="button"
+                            className="bg-violet-600 text-white hover:bg-violet-700"
+                            onClick={handleLaunch}
+                        >
+                            Launch campaign
+                        </Button>
+                    ) : null}
+                    {step > 1 ? (
+                        <Button type="button" variant="outline" onClick={handleBack}>
+                            <ArrowLeft className="mr-2 h-4 w-4" />
+                            Back
+                        </Button>
+                    ) : null}
+                    {step < 4 ? (
+                        <Button
+                            type="button"
+                            disabled={step === 1 && !canContinueStep1}
+                            className="bg-violet-600 text-white hover:bg-violet-700 disabled:opacity-40"
+                            onClick={handleContinue}
+                        >
+                            {step === 1
+                                ? 'Continue to Sequence'
+                                : step === 3
+                                  ? 'Continue to Review & Launch'
+                                  : `Continue to ${STEPS[step]?.label ?? 'next'}`}
+                            <ArrowRight className="ml-2 h-4 w-4" />
+                        </Button>
+                    ) : null}
                 </div>
             </div>
         </div>