first wokring prototype

src/features/campaigns/CampaignReportPage.tsx

@@ -0,0 +1,38 @@
+import type { ApiSettings } from "../../types";
+import Card from "../../components/Card";
+import Button from "../../components/Button";
+import PageTitle from "../../components/PageTitle";
+import { useCampaignWorkspaceData } from "./hooks/useCampaignWorkspaceData";
+import { formatDateTime } from "./utils/campaignView";
+
+export default function CampaignReportPage({ settings, campaignId }: { settings: ApiSettings; campaignId: string }) {
+  const { data, loading, error, reload } = useCampaignWorkspaceData(settings, campaignId);
+  const cards = data.summary?.cards;
+
+  return (
+    <div className="content-pad workspace-data-page">
+      <div className="page-heading split workspace-heading">
+        <div>
+          <PageTitle loading={loading}>Report</PageTitle>
+        </div>
+        <div className="button-row compact-actions">
+          <Button onClick={reload} disabled={loading}>Reload</Button>
+        </div>
+      </div>
+      {error && <div className="alert danger">{error}</div>}
+      <div className="dashboard-grid">
+        <Card title="Report summary">
+          <dl className="detail-list">
+            <div><dt>Generated</dt><dd>{formatDateTime(data.summary?.generated_at)}</dd></div>
+            <div><dt>Jobs total</dt><dd>{cards?.jobs_total ?? "—"}</dd></div>
+            <div><dt>Sent</dt><dd>{cards?.sent ?? "—"}</dd></div>
+            <div><dt>Failed</dt><dd>{cards?.failed ?? "—"}</dd></div>
+          </dl>
+        </Card>
+        <Card title="Exports">
+          <p className="muted">CSV export and report-emailing buttons will be added once the report section is reviewed.</p>
+        </Card>
+      </div>
+    </div>
+  );
+}