@actioneer/ads 1.0.9 → 1.0.10

package/examples/call-logs-screen.tsx

@@ -0,0 +1,381 @@
+/**
+ * Call logs screen — the ADS record-call-logs recipe, built only from ADS
+ * exports.
+ *
+ * Follows principles `record-detail-panels`, `collection-screens`,
+ * `leading-back-navigation` and `status-language` (see `get_principles`):
+ *
+ * - Call logs is a TAB of its campaign, not a page of its own: the 16px
+ *   Breadcrumbs trail (Voice campaigns / campaign) is the title, the campaign
+ *   status Chip sits beside it, and the campaign actions (Test call, Launch)
+ *   sit on the right of the same row — a 64px header bar closed by a
+ *   full-width hairline.
+ * - The list is a Table — Number · Status · Outcome · Duration — whose rows
+ *   fill the panel with Pagination at the bottom. Status is a plain Chip
+ *   (square dot + 14px text: Completed green, No answer amber, Failed red);
+ *   the outcome exists only once a call connected, otherwise an em dash.
+ * - Opening a call marks its row `isActive` and mounts the call panel beside
+ *   the list, attached to the page by one full-height hairline.
+ * - The call panel: DrawerHeader (kicker, number, status + time · length),
+ *   then DrawerSections 32px apart — Summary, Recording, Transcript · N turns,
+ *   Follow-ups, CRM write-back, Captured fields · X of N — and Call metadata
+ *   collapsed last. Each fact appears once. No footer: there is no dedicated
+ *   call page, so there is nothing to "open".
+ *
+ * Copy it and replace CALLS with your own records.
+ */
+import * as React from "react";
+import {
+  AudioWaveform,
+  BreadcrumbItem,
+  Breadcrumbs,
+  Button,
+  Chip,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  DetailItem,
+  DetailList,
+  Drawer,
+  DrawerBody,
+  DrawerHeader,
+  DrawerKicker,
+  DrawerMeta,
+  DrawerSection,
+  DrawerTitle,
+  Filters,
+  Pagination,
+  SearchDisclosure,
+  Tab,
+  TabList,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+  Tabs,
+  Transcript,
+  type FilterGroup,
+  type TranscriptTurn,
+} from "@actioneer/ads";
+import { ChevronDown } from "@actioneer/ads/lib/icons";
+
+/** Call statuses, one tone per meaning (principle `status-language`). */
+export type CallStatus = "Completed" | "No answer" | "Busy" | "Failed";
+
+export const CALL_STATUS_COLOR: Record<CallStatus, "success" | "warning" | "danger"> = {
+  Completed: "success",
+  "No answer": "warning",
+  Busy: "warning",
+  Failed: "danger",
+};
+
+export interface CallRecord {
+  id: string;
+  number: string;
+  status: CallStatus;
+  /** Disposition — only for calls that connected. */
+  outcome?: string;
+  seconds: number;
+  startedAt: string;
+  summary?: string;
+  cost: string;
+  pickedUp: boolean;
+  transcript: TranscriptTurn[];
+  followUps: string[];
+  crm: { nextAction?: string; reason?: string };
+  /** Field key → captured value (undefined = not stated). */
+  captured: Record<string, string | undefined>;
+  metadata: { callId: string; agent: string; callerId: string; provider: string };
+}
+
+/** Sentence-case labels for captured field keys — never show the raw key. */
+export const CAPTURED_FIELD_LABELS: Record<string, string> = {
+  customer_name: "Customer name",
+  type_of_loan: "Type of loan",
+  loan_amount: "Loan amount",
+  city: "City",
+  pincode: "Pincode",
+  type_of_employment: "Type of employment",
+  approximate_monthly_income: "Monthly income",
+  property_status: "Property status",
+  property_amount: "Property amount",
+  callback_slot: "Callback slot",
+};
+
+const EMPTY_CAPTURE = Object.fromEntries(Object.keys(CAPTURED_FIELD_LABELS).map((key) => [key, undefined]));
+
+const call = (number: string, status: CallStatus, seconds: number, extra: Partial<CallRecord> = {}): CallRecord => ({
+  id: number.replace(/\D/g, ""),
+  number,
+  status,
+  seconds,
+  startedAt: "12 Sep, 3:41 PM",
+  cost: "₹0.00",
+  pickedUp: status === "Completed",
+  transcript: [],
+  followUps: [],
+  crm: {},
+  captured: EMPTY_CAPTURE,
+  metadata: { callId: "d8138618-0042", agent: "Asha · Hindi", callerId: "+91 22 6987 0900", provider: "Plivo" },
+  ...extra,
+});
+
+export const CALLS: CallRecord[] = [
+  call("+91 98393 81298", "No answer", 0),
+  call("+91 87222 96094", "No answer", 0),
+  call("+91 98857 55120", "No answer", 0),
+  call("+91 90053 11157", "No answer", 0),
+  call("+91 86686 86494", "Completed", 4, {
+    outcome: "Customer did not speak",
+    summary: "An unknown customer answered but did not respond. No next step was established.",
+    transcript: [{ id: "t1", role: "agent", timeLabel: "0:01", text: "Hi, this is Asha calling from Liquide about your loan enquiry. Is this a good time to talk?" }],
+    crm: { reason: "The customer did not provide any voice response." },
+  }),
+  call("+91 73853 99695", "No answer", 0),
+  call("+91 94880 36418", "Completed", 10, { outcome: "Customer did not speak", summary: "The customer picked up and hung up after the greeting." }),
+  call("+91 74477 96759", "No answer", 0),
+  call("+91 75682 95332", "Completed", 7, { outcome: "Customer did not speak", summary: "The customer picked up and stayed silent." }),
+  call("+91 78876 09135", "Busy", 0),
+];
+
+const TABS = ["Script", "Workflow", "Analysis", "Call logs", "Reports", "Guardrails"];
+
+const INITIAL_FILTERS: FilterGroup[] = [
+  {
+    id: "status",
+    label: "Status",
+    value: "all",
+    options: [
+      { value: "all", label: "All statuses" },
+      { value: "Completed", label: "Completed" },
+      { value: "No answer", label: "No answer" },
+      { value: "Busy", label: "Busy" },
+      { value: "Failed", label: "Failed" },
+    ],
+  },
+];
+
+const ROW_HEIGHT = 64;
+const TABLE_CHROME = 90;
+
+function useRowsThatFit(ref: React.RefObject<HTMLDivElement | null>) {
+  const [rows, setRows] = React.useState(8);
+  React.useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const update = () => setRows(Math.max(3, Math.floor((node.clientHeight - TABLE_CHROME) / ROW_HEIGHT)));
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [ref]);
+  return rows;
+}
+
+const seconds = (value: number) => `${value}s`;
+
+/** The call panel: header owns status, time and length; the body never repeats them. */
+export function CallPanel({ call, onClose }: { call: CallRecord | undefined; onClose: () => void }) {
+  const capturedKeys = Object.keys(CAPTURED_FIELD_LABELS);
+  const filled = call ? capturedKeys.filter((key) => call.captured[key]).length : 0;
+
+  return (
+    <Drawer open={Boolean(call)} onOpenChange={(open) => !open && onClose()} aria-label="Call details">
+      {call && (
+        <>
+          <DrawerHeader>
+            <DrawerKicker>Call</DrawerKicker>
+            <DrawerTitle className="tabular-nums">{call.number}</DrawerTitle>
+            <DrawerMeta>
+              <Chip color={CALL_STATUS_COLOR[call.status]}>{call.status}</Chip>
+              <span>
+                {call.startedAt} · {seconds(call.seconds)}
+              </span>
+            </DrawerMeta>
+          </DrawerHeader>
+          <DrawerBody className="flex flex-col gap-8">
+            <DrawerSection title="Summary">
+              {call.outcome && (
+                <div className="flex">
+                  <Chip variant="outline">{call.outcome}</Chip>
+                </div>
+              )}
+              <p className="m-0 text-m text-on-white-primary">{call.summary ?? "The call did not connect."}</p>
+              <dl className="m-0 mt-1 grid grid-cols-2 gap-2">
+                {[
+                  { label: "Cost", value: call.cost },
+                  { label: "Picked up", value: call.pickedUp ? "Yes" : "No" },
+                ].map((stat) => (
+                  <div key={stat.label} className="min-w-0 rounded-card border border-border bg-wg1 p-3">
+                    <dt className="text-s text-on-white-secondary">{stat.label}</dt>
+                    <dd className="m-0 mt-0.5 text-xl tabular-nums text-on-white-primary">{stat.value}</dd>
+                  </div>
+                ))}
+              </dl>
+            </DrawerSection>
+
+            {call.pickedUp && (
+              <DrawerSection title="Recording">
+                <AudioWaveform src="/samples/conversation-24s.wav" durationSeconds={call.seconds} channels={2} downloadName={`call-${call.id}.wav`} />
+              </DrawerSection>
+            )}
+
+            <DrawerSection title="Transcript" count={`${call.transcript.length} ${call.transcript.length === 1 ? "turn" : "turns"}`}>
+              <Transcript turns={call.transcript} emptyMessage="No one spoke on this call." />
+            </DrawerSection>
+
+            <DrawerSection title="Follow-ups">
+              {call.followUps.length ? (
+                <ul className="m-0 list-none p-0 text-m text-on-white-primary">
+                  {call.followUps.map((item) => <li key={item}>{item}</li>)}
+                </ul>
+              ) : (
+                <p className="m-0 text-m text-on-white-secondary">No follow-up recorded</p>
+              )}
+            </DrawerSection>
+
+            <DrawerSection title="CRM write-back">
+              <DetailList>
+                <DetailItem label="Next action" emptyLabel="None">{call.crm.nextAction}</DetailItem>
+                <DetailItem label="Reason">{call.crm.reason}</DetailItem>
+              </DetailList>
+            </DrawerSection>
+
+            <DrawerSection title="Captured fields" count={`${filled} of ${capturedKeys.length}`}>
+              <DetailList>
+                {capturedKeys.map((key) => (
+                  <DetailItem key={key} label={CAPTURED_FIELD_LABELS[key]}>{call.captured[key]}</DetailItem>
+                ))}
+              </DetailList>
+            </DrawerSection>
+
+            {/* Rarely needed, so it starts collapsed and closes the panel. */}
+            <Collapsible>
+              <CollapsibleTrigger className="group flex min-h-10 w-full items-center justify-between border-t border-tertiary font-medium text-on-white-primary">
+                Call metadata
+                <ChevronDown aria-hidden className="size-4 text-on-white-secondary transition-transform duration-150 group-data-[state=open]:rotate-180 motion-reduce:transition-none" />
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <DetailList>
+                  <DetailItem label="Call ID">{call.metadata.callId}</DetailItem>
+                  <DetailItem label="Agent">{call.metadata.agent}</DetailItem>
+                  <DetailItem label="Caller ID">{call.metadata.callerId}</DetailItem>
+                  <DetailItem label="Provider">{call.metadata.provider}</DetailItem>
+                </DetailList>
+              </CollapsibleContent>
+            </Collapsible>
+          </DrawerBody>
+        </>
+      )}
+    </Drawer>
+  );
+}
+
+export function CallLogsScreen() {
+  const [tab, setTab] = React.useState("Call logs");
+  const [search, setSearch] = React.useState("");
+  const [searchOpen, setSearchOpen] = React.useState(false);
+  const [filters, setFilters] = React.useState(INITIAL_FILTERS);
+  const [openId, setOpenId] = React.useState<string | null>(null);
+  const [page, setPage] = React.useState(1);
+  const rowsRef = React.useRef<HTMLDivElement>(null);
+  const pageSize = useRowsThatFit(rowsRef);
+
+  const status = filters.find((group) => group.id === "status")?.value ?? "all";
+  const query = search.replace(/\s/g, "");
+  const visible = CALLS.filter((c) => (status === "all" || c.status === status) && (!query || c.number.replace(/\s/g, "").includes(query)));
+  const pages = Math.max(1, Math.ceil(visible.length / pageSize));
+  const current = Math.min(page, pages);
+  const pageRows = visible.slice((current - 1) * pageSize, current * pageSize);
+
+  return (
+    <div className="flex h-screen bg-surface p-3 text-foreground">
+      {/* The app window: one rounded surface on the WG3 backdrop. */}
+      <div className="flex min-w-0 flex-1 overflow-hidden rounded-window border border-border bg-card shadow-window">
+        <section aria-label="12-09-2026" className="flex min-w-0 flex-1 flex-col overflow-hidden">
+          {/* The breadcrumb is the title; status sits beside it, campaign actions on the right. */}
+          <div className="flex h-16 shrink-0 items-center border-b border-border px-6">
+            <Breadcrumbs className="flex-1"
+              meta={<Chip color="success">Completed</Chip>}
+              actions={
+                <>
+                  <Button variant="outline">Test call</Button>
+                  <Button>Launch</Button>
+                </>
+              }
+            >
+              <BreadcrumbItem href="#campaigns">Voice campaigns</BreadcrumbItem>
+              <BreadcrumbItem isCurrent>12-09-2026</BreadcrumbItem>
+            </Breadcrumbs>
+          </div>
+
+          <div className="flex items-center justify-between gap-4 px-6 pt-5">
+            <Tabs className="min-w-0 flex-1" value={tab} onValueChange={setTab}>
+              <TabList aria-label="Campaign sections">
+                {TABS.map((item) => (
+                  <Tab key={item} value={item} count={item === "Call logs" ? CALLS.length : undefined}>
+                    {item}
+                  </Tab>
+                ))}
+              </TabList>
+            </Tabs>
+            <div className="flex shrink-0 items-center gap-2">
+              <SearchDisclosure value={search} onValueChange={(value) => { setSearch(value); setPage(1); }} open={searchOpen} onOpenChange={setSearchOpen} placeholder="Search numbers" triggerLabel="Search calls" />
+              <Filters
+                triggerLabel="Filter calls"
+                groups={filters}
+                onChange={(id, value) => { setFilters((groups) => groups.map((group) => (group.id === id ? { ...group, value } : group))); setPage(1); }}
+              />
+            </div>
+          </div>
+
+          <div ref={rowsRef} className="min-h-0 flex-1 px-6 pt-4 pb-6">
+            <Table
+              aria-label="Call logs"
+              footer={
+                <Pagination
+                  className="w-full"
+                  total={pages}
+                  page={current}
+                  onChange={setPage}
+                  summary={`${visible.length === 0 ? 0 : (current - 1) * pageSize + 1}–${Math.min(current * pageSize, visible.length)} of ${visible.length} calls`}
+                />
+              }
+            >
+              <TableHeader>
+                <TableRow>
+                  <TableColumn>Number</TableColumn>
+                  <TableColumn>Status</TableColumn>
+                  <TableColumn>Outcome</TableColumn>
+                  <TableColumn align="right">Duration</TableColumn>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {pageRows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    rowKey={row.id}
+                    aria-label={`Open call with ${row.number}`}
+                    isActive={openId === row.id}
+                    onClick={() => setOpenId((id) => (id === row.id ? null : row.id))}
+                  >
+                    <TableCell className="tabular-nums">{row.number}</TableCell>
+                    <TableCell>
+                      <Chip variant="plain" color={CALL_STATUS_COLOR[row.status]}>{row.status}</Chip>
+                    </TableCell>
+                    <TableCell className={row.outcome ? undefined : "text-on-white-secondary"}>{row.outcome ?? "—"}</TableCell>
+                    <TableCell align="right" className="tabular-nums">{seconds(row.seconds)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </section>
+
+        <CallPanel call={CALLS.find((c) => c.id === openId)} onClose={() => setOpenId(null)} />
+      </div>
+    </div>
+  );
+}

package/examples/campaign-analysis-screen.tsx

@@ -5,13 +5,17 @@
  * Follows principles `leading-back-navigation`, `analytics-surfaces` and
  * `status-language` (see `get_principles`):
  *
- * - The 16px Breadcrumbs trail (parent / record) IS the page title; the one
- *   primary action sits at the right end of the same row. No back arrow and
- *   no repeated H1.
- * - Every stat and every chart sits in its own outlined card (1px WG3 border,
- *   radius-l, 20px padding, flat), 16px apart.
- * - A stat card stacks label → number + scope 4px apart, then a Progress bar
- *   12px below that fills the card.
+ * - The 18px Breadcrumbs trail (parent / record) IS the page title, set in a
+ *   64px header bar closed by a full-width WG4 hairline; the one primary
+ *   action sits at the right end of the same bar. No back arrow and no
+ *   repeated H1.
+ * - A FilterBar spells out the scope under the tabs: the period preset and the
+ *   dates it resolves to on the left, the cohort on the right.
+ * - Every stat and every chart sits in its own resting card (1px WG4 border,
+ *   radius-card 14px, shadow-card, 20px padding), 16px apart.
+ * - A stat card stacks label → number + scope 4px apart with a Sparkline of
+ *   its 7-day trend beside the number (right ~40% of the card), then a
+ *   Progress bar 12px below that fills the card.
  * - A chart card puts its title + scope subtitle on the left and the legend at
  *   the right of the same row (`legendPlacement="header"`), and prints its
  *   values on the chart — never hover-only.
@@ -19,23 +23,28 @@
  * Copy it and replace the sample STATS / SEGMENT / REACH data with your own.
  */
 import * as React from "react";
+import { Calendar } from "@actioneer/ads/lib/icons";
 import {
   BarChart,
   BreadcrumbItem,
   Breadcrumbs,
   Button,
   LineChart,
+  FilterBar,
+  FilterBarSelect,
+  FilterBarValue,
   Progress,
+  Sparkline,
   Tab,
   TabList,
   Tabs,
 } from "@actioneer/ads";
 
 export const STATS = [
-  { label: "Calls analysed", value: 3930, of: "of 4,800 calls", percent: 82, color: "primary" as const },
-  { label: "Recipients reached", value: 864, of: "of 4,800 people", percent: 18, color: "primary" as const },
+  { label: "Calls analysed", value: 3930, of: "of 4,800 calls", percent: 82, color: "primary" as const, trend: [400, 1100, 1700, 2500, 3100, 3600, 3930] },
+  { label: "Recipients reached", value: 864, of: "of 4,800 people", percent: 18, color: "primary" as const, trend: [120, 260, 410, 560, 690, 790, 864] },
   // The one number that needs attention is the only amber one.
-  { label: "Asked for a callback", value: 144, of: "of 864 calls", percent: 17, color: "warning" as const },
+  { label: "Asked for a callback", value: 144, of: "of 864 calls", percent: 17, color: "warning" as const, trend: [20, 40, 58, 80, 104, 126, 144] },
 ];
 
 export const SEGMENT = [
@@ -56,10 +65,22 @@ export const REACH = [
 
 const TABS = ["Script", "Workflow", "Analysis", "Call logs", "Guardrails"];
 
-/** Outlined container for one stat or one chart (principle `analytics-surfaces`). */
+const PERIODS = [
+  { value: "campaign", label: "This campaign" },
+  { value: "7d", label: "Last 7 days" },
+  { value: "30d", label: "Last 30 days" },
+];
+const PERIOD_DATES: Record<string, string> = { campaign: "Oct 19 – Oct 23", "7d": "Oct 17 – Oct 23", "30d": "Sep 24 – Oct 23" };
+const COHORTS = [
+  { value: "all", label: "All cohorts" },
+  { value: "blr", label: "Bengaluru" },
+  { value: "mum", label: "Mumbai" },
+];
+
+/** Resting card for one stat or one chart (principle `analytics-surfaces`). */
 function DataCard({ children, label }: { children: React.ReactNode; label: string }) {
   return (
-    <section aria-label={label} className="flex min-w-0 flex-col rounded-l border border-tertiary bg-card p-5">
+    <section aria-label={label} className="flex min-w-0 flex-col rounded-card border border-border bg-card p-5 shadow-card">
       {children}
     </section>
   );
@@ -67,72 +88,93 @@ function DataCard({ children, label }: { children: React.ReactNode; label: strin
 
 export function CampaignAnalysisScreen() {
   const [tab, setTab] = React.useState("Analysis");
+  const [period, setPeriod] = React.useState("campaign");
+  const [cohort, setCohort] = React.useState("all");
 
   return (
-    <div className="flex h-screen bg-background p-3 text-foreground">
-      <main aria-label="Q4 renewal reminders" className="flex min-w-0 flex-1 flex-col overflow-hidden rounded-l bg-card">
-        <div className="px-6 pt-6">
-          <Breadcrumbs actions={<Button>Pause campaign</Button>}>
-            <BreadcrumbItem href="#campaigns">Voice campaigns</BreadcrumbItem>
-            <BreadcrumbItem isCurrent>Q4 renewal reminders</BreadcrumbItem>
-          </Breadcrumbs>
-        </div>
-
-        <div className="px-6 pt-5">
-          <Tabs value={tab} onValueChange={setTab}>
-            <TabList aria-label="Campaign sections">
-              {TABS.map((item) => (
-                <Tab key={item} value={item}>{item}</Tab>
-              ))}
-            </TabList>
-          </Tabs>
-        </div>
+    <div className="flex h-screen bg-surface p-3 text-foreground">
+      {/* The app window: one rounded surface on the WG3 backdrop. */}
+      <div className="flex min-w-0 flex-1 overflow-hidden rounded-window border border-border bg-card shadow-window">
+        <main aria-label="Q4 renewal reminders" className="flex min-w-0 flex-1 flex-col overflow-hidden">
+          <div className="flex h-16 shrink-0 items-center border-b border-border px-6">
+            <Breadcrumbs className="flex-1" actions={<Button>Pause campaign</Button>}>
+              <BreadcrumbItem href="#campaigns">Voice campaigns</BreadcrumbItem>
+              <BreadcrumbItem isCurrent>Q4 renewal reminders</BreadcrumbItem>
+            </Breadcrumbs>
+          </div>
 
-        <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-6 pt-6 pb-6">
-          <div role="list" aria-label="Campaign progress" className="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-4">
-            {STATS.map((stat) => (
-              <div role="listitem" key={stat.label} className="contents">
-                <DataCard label={stat.label}>
-                  <p className="text-m text-secondary">{stat.label}</p>
-                  <p className="mt-1 flex items-baseline gap-2">
-                    <span className="text-3xl tabular-nums text-foreground">{stat.value.toLocaleString("en-IN")}</span>
-                    <span className="text-m text-secondary">{stat.of}</span>
-                  </p>
-                  <Progress className="mt-3" value={stat.percent} color={stat.color} label={stat.label} />
-                </DataCard>
-              </div>
-            ))}
+          <div className="px-6 pt-5">
+            <Tabs value={tab} onValueChange={setTab}>
+              <TabList aria-label="Campaign sections">
+                {TABS.map((item) => (
+                  <Tab key={item} value={item}>{item}</Tab>
+                ))}
+              </TabList>
+            </Tabs>
           </div>
 
-          <div className="grid grid-cols-[repeat(auto-fill,minmax(24rem,1fr))] gap-4">
-            <DataCard label="Who was in the segment">
-              <BarChart
-                title="Who was in the segment"
-                subtitle="4,800 net new numbers · Oct 19 – 23"
-                legendPlacement="header"
-                data={SEGMENT}
-                categoryKey="day"
-                series={["netNew", "already"]}
-                seriesLabels={{ netNew: "Net new", already: "Already in campaign" }}
-                stacked
-                height={360}
-              />
-            </DataCard>
-            <DataCard label="Did we reach them?">
-              <LineChart
-                title="Did we reach them?"
-                subtitle="Share of 4,800 people · by day"
-                legendPlacement="header"
-                data={REACH}
-                categoryKey="day"
-                series={["reached", "booked"]}
-                seriesLabels={{ reached: "Reached", booked: "Booked" }}
-                height={360}
-              />
-            </DataCard>
+          <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-6 pt-6 pb-6">
+            {/* The scope the numbers cover, spelled out: preset + resolved dates leading, cohort trailing. */}
+            <div className="flex items-center justify-between gap-4">
+              <FilterBar aria-label="Report period">
+                <FilterBarSelect label="Period" value={period} options={PERIODS} onValueChange={setPeriod} />
+                <FilterBarValue icon={<Calendar />}>{PERIOD_DATES[period]}</FilterBarValue>
+              </FilterBar>
+              <FilterBar aria-label="Cohort">
+                <FilterBarSelect label="Cohort" value={cohort} options={COHORTS} onValueChange={setCohort} />
+              </FilterBar>
+            </div>
+            <div role="list" aria-label="Campaign progress" className="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-4">
+              {STATS.map((stat) => (
+                <div role="listitem" key={stat.label} className="contents">
+                  <DataCard label={stat.label}>
+                    {/* Number on the left, its 7-day trend on the right. */}
+                    <div className="flex items-end gap-4">
+                      <div className="min-w-0 flex-1">
+                        <p className="text-m text-secondary">{stat.label}</p>
+                        <p className="mt-1 flex items-baseline gap-2">
+                          <span className="text-4xl tabular-nums text-foreground">{stat.value.toLocaleString("en-IN")}</span>
+                          <span className="whitespace-nowrap text-s text-secondary">{stat.of}</span>
+                        </p>
+                      </div>
+                      <Sparkline className="w-1/3 shrink-0" data={stat.trend} label={`${stat.label}, past 7 days`} />
+                    </div>
+                    <Progress className="mt-3" value={stat.percent} color={stat.color} label={stat.label} />
+                  </DataCard>
+                </div>
+              ))}
+            </div>
+
+            <div className="grid grid-cols-[repeat(auto-fill,minmax(24rem,1fr))] gap-4">
+              <DataCard label="Who was in the segment">
+                <BarChart
+                  title="Who was in the segment"
+                  subtitle="4,800 net new numbers · Oct 19 – 23"
+                  legendPlacement="header"
+                  data={SEGMENT}
+                  categoryKey="day"
+                  series={["netNew", "already"]}
+                  seriesLabels={{ netNew: "Net new", already: "Already in campaign" }}
+                  stacked
+                  height={360}
+                />
+              </DataCard>
+              <DataCard label="Did we reach them?">
+                <LineChart
+                  title="Did we reach them?"
+                  subtitle="Share of 4,800 people · by day"
+                  legendPlacement="header"
+                  data={REACH}
+                  categoryKey="day"
+                  series={["reached", "booked"]}
+                  seriesLabels={{ reached: "Reached", booked: "Booked" }}
+                  height={360}
+                />
+              </DataCard>
+            </div>
           </div>
-        </div>
-      </main>
+        </main>
+      </div>
     </div>
   );
 }