@actioneer/ads 1.0.7 → 1.0.9

package/demo/components/add-to-artifact.js

@@ -35,6 +35,7 @@ import "react-aria-components";
 import "../../components/autocomplete.js";
 import "../../components/slider.js";
 import "../../components/segmented.js";
+import "../../components/filters.js";
 import { Modal as q, ModalHeader as J, ModalTitle as Q, ModalBody as x, ModalFooter as g } from "../../components/modal.js";
 import "../../components/drawer.js";
 import "../../components/popover.js";
@@ -106,7 +107,7 @@ import "../../components/assistant-ui/quote.js";
 import "../../components/assistant-ui/sources.js";
 import "../../components/assistant-ui/tool-fallback.js";
 import "../../components/assistant-ui/tool-group.js";
-function ei({
+function ii({
   block: i,
   trigger: v = "button",
   className: A,
@@ -358,5 +359,5 @@ function ei({
   ] });
 }
 export {
-  ei as AddToArtifact
+  ii as AddToArtifact
 };

package/examples/README.md

@@ -0,0 +1,31 @@
+# ADS sample screens
+
+Full screens built only from `@actioneer/ads` exports. Open them to see how the
+components are meant to be composed, or copy one into your app as a starting
+point and swap the sample data for your own.
+
+Before rendering any of them, finish the package setup in the main README:
+import `@actioneer/ads/styles.css` right after `tailwindcss`, and wrap your app
+root in `MotionConfig`, `ToastProvider` and `TooltipProvider`.
+
+| File | Export | What it shows |
+|---|---|---|
+| `agents-screen.tsx` | `AgentsScreen` | A full list page: `PageHeader` with a primary action, a summary strip, `Tabs` with counts leading a `SearchDisclosure`, a filter `Dropdown`, a sortable `Table` with clickable rows and a pinned action column, per-row actions with `Tooltip`s, and filtered `EmptyState`s. |
+| `settings-screen.tsx` | `SettingsScreen` | A settings card: `Card` header with a status `Badge`, an `InputField`, a `SettingList` of `SettingRow`s with `Switch` and `Button` controls, and one primary action. |
+| `workspace-header.tsx` | `WorkspaceHeaderScreen` | A page header with a status `Badge` and trailing actions, then `Tabs` with counts whose panels hold `Card`s. |
+| `campaigns-screen.tsx` | `CampaignsScreen` | The collection-screen recipe: `BodyPageHeader` with one primary action, counted `Tabs` leading `SearchDisclosure` + `Filters`, a multi-select `Table` (hover-revealed checkboxes, cohort child rows, `isActive` open row) whose page size fills the panel with `Pagination` at the bottom, a shell-level `Drawer` with status under the title and Performance / Details sections, and the fixed-height New campaign `Modal`. |
+| `campaign-analysis-screen.tsx` | `CampaignAnalysisScreen` | The record-analytics recipe: a 16px `Breadcrumbs` title with the primary action on the same row, record `Tabs`, outlined stat cards with `Progress`, and outlined `BarChart` / `LineChart` cards with header legends and printed values. |
+
+```tsx
+// app/agents/page.tsx
+"use client";
+
+import { AgentsScreen } from "./agents-screen"; // copied from node_modules/@actioneer/ads/examples
+
+export default function Page() {
+  return <AgentsScreen />;
+}
+```
+
+Icons come from
+`@actioneer/ads/lib/icons`; never install a second icon package.

package/examples/agents-screen.tsx

@@ -0,0 +1,477 @@
+/**
+ * Agents screen — a full list page built only from ADS exports.
+ *
+ * What it shows: a PageHeader with a primary action, a summary strip, Tabs
+ * with counts leading a trailing SearchDisclosure, a filter Dropdown, a
+ * sortable Table whose rows open a record and keep a pinned action column,
+ * per-row Dropdown actions with Tooltips, and filtered EmptyStates.
+ *
+ * Copy it into your app and replace the sample AGENTS data with your own.
+ */
+import * as React from "react";
+import {
+  Avatar,
+  Button,
+  Dropdown,
+  DropdownContent,
+  DropdownItem,
+  DropdownTrigger,
+  EmptyState,
+  PageHeader,
+  SearchDisclosure,
+  Tab,
+  TabList,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+  Tabs,
+  Tooltip,
+  type SortDescriptor,
+} from "@actioneer/ads";
+import {
+  Close,
+  Copy,
+  Eye,
+  Filter,
+  MoreHorizontal,
+  PhoneIncoming,
+  Search,
+  Trash,
+} from "@actioneer/ads/lib/icons";
+
+export type AgentStatus = "deployed" | "not-deployed";
+export type AgentUsage = "all" | "deployed" | "not-deployed" | "hotlines" | "campaigns";
+export type ManualFilter = "original" | "duplicated" | "has-calls" | "no-calls";
+
+export interface AgentRecord {
+  id: string;
+  name: string;
+  type: string;
+  updated: string;
+  updatedSort: number;
+  status: AgentStatus;
+  lineage?: string;
+  hotlines: number;
+  campaigns: number;
+  steps: number;
+  calls: number;
+}
+
+export const AGENTS: AgentRecord[] = [
+  { id: "simran", name: "Simran", type: "Voice Agent", updated: "Aug 25, 2026", updatedSort: 20260825, status: "deployed", hotlines: 0, campaigns: 1, steps: 0, calls: 0 },
+  { id: "vivaan", name: "Vivaan", type: "Voice Agent", updated: "Aug 26, 2026", updatedSort: 20260826, status: "not-deployed", lineage: "Simran", hotlines: 0, campaigns: 0, steps: 0, calls: 0 },
+  { id: "manish", name: "Manish", type: "Voice Agent", updated: "Aug 26, 2026", updatedSort: 20260826, status: "not-deployed", lineage: "Esha", hotlines: 0, campaigns: 0, steps: 0, calls: 0 },
+  { id: "esha", name: "Esha", type: "Voice Agent", updated: "Aug 26, 2026", updatedSort: 20260826, status: "not-deployed", lineage: "Simran", hotlines: 0, campaigns: 0, steps: 0, calls: 0 },
+  { id: "ananya", name: "Ananya", type: "KYC completion support", updated: "Aug 6, 2026", updatedSort: 20260806, status: "deployed", hotlines: 0, campaigns: 5, steps: 28, calls: 96 },
+  { id: "aarohi", name: "Aarohi", type: "EMI due-date reminder", updated: "Aug 6, 2026", updatedSort: 20260806, status: "deployed", hotlines: 0, campaigns: 4, steps: 28, calls: 96 },
+];
+
+export const USAGE_TABS = [
+  { value: "all", label: "All", count: 6 },
+  { value: "deployed", label: "Deployed", count: 3 },
+  { value: "not-deployed", label: "Not yet deployed", count: 3 },
+  { value: "hotlines", label: "On hotlines", count: 0 },
+  { value: "campaigns", label: "In campaigns", count: 3 },
+] as const;
+
+export const MANUAL_FILTERS = [
+  { value: "original", label: "Original agents" },
+  { value: "duplicated", label: "Duplicated agents" },
+  { value: "has-calls", label: "Has calls" },
+  { value: "no-calls", label: "No calls" },
+] as const;
+
+export function ScreenFrame({ children }: { children: React.ReactNode }) {
+  return <div className="min-h-screen bg-card p-5 text-foreground">{children}</div>;
+}
+
+export function AgentStatusAvatar({ name, status }: { name: string; status: AgentStatus }) {
+  const label = status === "deployed" ? "Deployed" : "Not yet deployed";
+  return (
+    <span className="relative inline-flex shrink-0">
+      <Avatar name={name} size="sm" />
+      <span
+        aria-hidden="true"
+        className={status === "deployed"
+          ? "absolute bottom-0 right-0 size-2 rounded-full bg-success ring-1 ring-card"
+          : "absolute bottom-0 right-0 size-2 rounded-full bg-wg6 ring-1 ring-card"}
+      />
+      <span className="sr-only">{label}</span>
+    </span>
+  );
+}
+
+export function AgentIdentity({ agent }: { agent: AgentRecord }) {
+  return (
+    <div className="flex min-w-0 items-center gap-3">
+      <AgentStatusAvatar name={agent.name} status={agent.status} />
+      <div className="min-w-0">
+        <div className="truncate text-m font-medium text-foreground">{agent.name}</div>
+        {agent.lineage && (
+          <div className="truncate text-s text-secondary">
+            Copy of {agent.lineage}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function AgentSummaryStripContent() {
+  const items = [
+    { label: "Deployed", value: "3", detail: "of 6 agents" },
+    { label: "In campaigns", value: "3", detail: "ready to engage" },
+    { label: "Call activity", value: "192", detail: "all-time calls" },
+  ];
+  return (
+    <section
+      aria-label="Agent summary"
+      className="grid min-h-20 grid-cols-1 gap-4 rounded-m border border-table-stroke px-4 py-5 sm:grid-cols-3 sm:gap-0"
+    >
+      {items.map((item, index) => (
+        <div
+          key={item.label}
+          className={index === 0 ? "min-w-0 sm:pr-6" : "min-w-0 border-table-stroke sm:border-l sm:px-6"}
+        >
+          <p className="text-s font-medium uppercase tracking-wide text-table-header-foreground">
+            {item.label}
+          </p>
+          <p className="mt-2 flex items-baseline gap-2">
+            <span className="text-xl font-medium leading-none tabular-nums text-foreground">{item.value}</span>
+            <span className="text-m text-muted-foreground">{item.detail}</span>
+          </p>
+        </div>
+      ))}
+    </section>
+  );
+}
+
+export function AgentRowActions({
+  name,
+  defaultOpen = false,
+  focusTrigger = false,
+}: {
+  name: string;
+  defaultOpen?: boolean;
+  focusTrigger?: boolean;
+}) {
+  return (
+    <Dropdown defaultOpen={defaultOpen}>
+      <Tooltip content={`Actions for ${name}`}>
+        <span className="inline-flex">
+          <DropdownTrigger>
+            <Button
+              autoFocus={focusTrigger}
+              variant="ghost"
+              size="icon-sm"
+              aria-label={`Actions for ${name}`}
+              className="enabled:hover:bg-card enabled:hover:text-foreground enabled:active:bg-card enabled:active:text-foreground"
+            >
+              <MoreHorizontal aria-hidden="true" />
+            </Button>
+          </DropdownTrigger>
+        </span>
+      </Tooltip>
+      <DropdownContent align="end" autoFocusFirstItem={defaultOpen}>
+        <DropdownItem startContent={<Eye aria-hidden="true" />}>See details</DropdownItem>
+        <DropdownItem startContent={<Copy aria-hidden="true" />}>Duplicate</DropdownItem>
+        <DropdownItem danger startContent={<Trash aria-hidden="true" />}>Delete</DropdownItem>
+      </DropdownContent>
+    </Dropdown>
+  );
+}
+
+export function matchesUsage(agent: AgentRecord, usage: AgentUsage) {
+  if (usage === "deployed") return agent.status === "deployed";
+  if (usage === "not-deployed") return agent.status === "not-deployed";
+  if (usage === "hotlines") return agent.hotlines > 0;
+  if (usage === "campaigns") return agent.campaigns > 0;
+  return true;
+}
+
+export function matchesManualFilter(agent: AgentRecord, filter: ManualFilter) {
+  if (filter === "original") return !agent.lineage;
+  if (filter === "duplicated") return Boolean(agent.lineage);
+  if (filter === "has-calls") return agent.calls > 0;
+  return agent.calls === 0;
+}
+
+export function sortAgents(agents: AgentRecord[], descriptor?: SortDescriptor) {
+  if (!descriptor) return agents;
+  const direction = descriptor.direction === "ascending" ? 1 : -1;
+  const value = (agent: AgentRecord): string | number => {
+    if (descriptor.column === "type") return agent.type;
+    if (descriptor.column === "updated") return agent.updatedSort;
+    if (descriptor.column === "hotlines") return agent.hotlines;
+    if (descriptor.column === "campaigns") return agent.campaigns;
+    if (descriptor.column === "steps") return agent.steps;
+    if (descriptor.column === "calls") return agent.calls;
+    return agent.name;
+  };
+  return [...agents].sort((left, right) => {
+    const a = value(left);
+    const b = value(right);
+    const result = typeof a === "number" && typeof b === "number"
+      ? a - b
+      : String(a).localeCompare(String(b));
+    return result * direction;
+  });
+}
+
+export function AgentsFilterMenu({
+  filters,
+  onAdd,
+}: {
+  filters: ManualFilter[];
+  onAdd: (filter: ManualFilter) => void;
+}) {
+  return (
+    <Dropdown>
+      <Tooltip content="Add filter">
+        <span className="inline-flex">
+          <DropdownTrigger>
+            <Button
+              variant="outline"
+              size="icon-sm"
+              aria-label="Add filter"
+              data-active={filters.length > 0 || undefined}
+              className="aria-expanded:text-action-primary-text data-[active=true]:text-action-primary-text"
+            >
+              <Filter aria-hidden="true" />
+              {filters.length > 0 && (
+                <span aria-hidden="true" className="absolute -right-1 -top-1 size-2 rounded-full bg-danger" />
+              )}
+            </Button>
+          </DropdownTrigger>
+        </span>
+      </Tooltip>
+      <DropdownContent align="end" autoFocusFirstItem>
+        {MANUAL_FILTERS.map((filter) => (
+          <DropdownItem
+            key={filter.value}
+            disabled={filters.includes(filter.value)}
+            onSelect={() => onAdd(filter.value)}
+          >
+            {filter.label}
+          </DropdownItem>
+        ))}
+      </DropdownContent>
+    </Dropdown>
+  );
+}
+
+export function AgentsEmptyState({
+  title,
+  description,
+  hotline = false,
+  action,
+}: {
+  title: string;
+  description?: string;
+  hotline?: boolean;
+  action?: "view-all" | "clear";
+}) {
+  return (
+    <div className="rounded-m border border-table-stroke bg-card">
+      <EmptyState
+        icon={hotline ? <PhoneIncoming aria-hidden="true" /> : <Search aria-hidden="true" />}
+        title={title}
+        description={description}
+        action={action === "view-all"
+          ? <Button size="sm" variant="outline">View all agents</Button>
+          : action === "clear"
+            ? <Button size="sm" variant="outline">Clear filters</Button>
+            : undefined}
+      />
+    </div>
+  );
+}
+
+export function AgentsComposition() {
+  const toolbarRef = React.useRef<HTMLDivElement>(null);
+  const [usage, setUsage] = React.useState<AgentUsage>("all");
+  const [search, setSearch] = React.useState("");
+  const [searchOpen, setSearchOpen] = React.useState(false);
+  const [manualFilters, setManualFilters] = React.useState<ManualFilter[]>([]);
+  const [sortDescriptor, setSortDescriptor] = React.useState<SortDescriptor>();
+  const [toolbarIsConstrained, setToolbarIsConstrained] = React.useState(false);
+
+  React.useEffect(() => {
+    const toolbar = toolbarRef.current;
+    if (!toolbar) return;
+
+    const update = () => setToolbarIsConstrained(toolbar.clientWidth < 820);
+    update();
+
+    const observer = new ResizeObserver(update);
+    observer.observe(toolbar);
+    return () => observer.disconnect();
+  }, []);
+
+  const filtered = AGENTS.filter((agent) => {
+    const query = search.trim().toLowerCase();
+    const matchesQuery = !query || `${agent.name} ${agent.type} ${agent.lineage ?? ""}`.toLowerCase().includes(query);
+    return matchesQuery && matchesUsage(agent, usage) && manualFilters.every((filter) => matchesManualFilter(agent, filter));
+  });
+  const rows = sortAgents(filtered, sortDescriptor);
+  const hasManualQuery = Boolean(search.trim() || manualFilters.length > 0);
+  const compactTabs = searchOpen || toolbarIsConstrained;
+
+  const clearQuery = () => {
+    setSearch("");
+    setManualFilters([]);
+  };
+
+  let emptyTitle = "No agents match";
+  let emptyDescription: string | undefined = hasManualQuery ? "No agents match the applied search or manual filters." : undefined;
+  let emptyHotline = false;
+  if (!hasManualQuery && usage === "hotlines") {
+    emptyTitle = "No agents on hotlines";
+    emptyDescription = undefined;
+    emptyHotline = true;
+  } else if (!hasManualQuery && usage === "deployed") {
+    emptyTitle = "No deployed agents";
+  } else if (!hasManualQuery && usage === "not-deployed") {
+    emptyTitle = "All agents are deployed";
+  } else if (!hasManualQuery && usage === "campaigns") {
+    emptyTitle = "No agents in campaigns";
+  }
+
+  return (
+    <ScreenFrame>
+      <PageHeader
+        title="Agents"
+        actions={<Button size="sm">New agent</Button>}
+      />
+
+      <div className="mt-10">
+        <AgentSummaryStripContent />
+      </div>
+
+      <div className="mt-10">
+        <div ref={toolbarRef} className="flex w-full items-center gap-2">
+          <Tabs
+            className="min-w-0 flex-1 gap-0"
+            value={usage}
+            onValueChange={(value) => setUsage(value as AgentUsage)}
+          >
+            <TabList aria-label="Filter agents by usage" className="min-w-max">
+              {USAGE_TABS.map((tab, index) =>
+                compactTabs && index > 2 ? null : (
+                  <Tab key={tab.value} value={tab.value} count={tab.count}>
+                    {tab.label}
+                  </Tab>
+                ),
+              )}
+              {compactTabs && (
+                <button
+                  type="button"
+                  aria-label="Show 2 more usage filters"
+                  onClick={() => setSearchOpen(false)}
+                  className="relative -mb-px inline-flex h-8 items-center justify-center whitespace-nowrap text-l font-normal text-secondary outline-none transition-colors hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring"
+                >
+                  +2 more
+                </button>
+              )}
+            </TabList>
+          </Tabs>
+          <div className="flex shrink-0 items-center gap-2">
+            <SearchDisclosure
+              value={search}
+              onValueChange={setSearch}
+              open={searchOpen}
+              onOpenChange={setSearchOpen}
+              placeholder="Search agents"
+              inputLabel="Search agents by name or type"
+              triggerLabel="Search agents"
+            />
+            <AgentsFilterMenu
+              filters={manualFilters}
+              onAdd={(filter) => setManualFilters((current) => current.includes(filter) ? current : [...current, filter])}
+            />
+          </div>
+        </div>
+
+        {manualFilters.length > 0 && (
+          <div className="mt-2 flex flex-wrap items-center gap-2">
+            {manualFilters.map((filter) => {
+              const label = MANUAL_FILTERS.find((item) => item.value === filter)?.label ?? filter;
+              return (
+                <Button
+                  key={filter}
+                  variant="ghost"
+                  size="xs"
+                  aria-label={`Remove filter ${label}`}
+                  onClick={() => setManualFilters((current) => current.filter((item) => item !== filter))}
+                  endContent={<Close aria-hidden="true" />}
+                  className="bg-action-primary-soft text-s text-action-primary-text [&>span]:gap-2"
+                >
+                  {label}
+                </Button>
+              );
+            })}
+            <Button
+              variant="ghost"
+              size="xs"
+              onClick={() => setManualFilters([])}
+              className="text-s enabled:hover:bg-muted enabled:hover:text-foreground enabled:active:bg-muted enabled:active:text-foreground"
+            >
+              Clear
+            </Button>
+          </div>
+        )}
+
+        <section aria-label="Agents" className="mt-6">
+          {rows.length === 0 ? (
+            <EmptyState
+              icon={emptyHotline ? <PhoneIncoming aria-hidden="true" /> : <Search aria-hidden="true" />}
+              title={emptyTitle}
+              description={emptyDescription}
+              action={hasManualQuery
+                ? <Button size="sm" variant="outline" onClick={clearQuery}>Clear filters</Button>
+                : <Button size="sm" variant="outline" onClick={() => setUsage("all")}>View all agents</Button>}
+            />
+          ) : (
+            <Table
+              aria-label="Your agents"
+              sortDescriptor={sortDescriptor}
+              onSortChange={setSortDescriptor}
+            >
+              <TableHeader>
+                <TableRow>
+                  <TableColumn sortKey="agent">Agent</TableColumn>
+                  <TableColumn sortKey="type">Type</TableColumn>
+                  <TableColumn sortKey="updated" align="right">Updated</TableColumn>
+                  <TableColumn sortKey="hotlines" align="right">Hotlines</TableColumn>
+                  <TableColumn sortKey="campaigns" align="right">Campaigns</TableColumn>
+                  <TableColumn sortKey="steps" align="right">Steps</TableColumn>
+                  <TableColumn sortKey="calls" align="right">Calls</TableColumn>
+                  <TableColumn allowsSorting={false} align="right" aria-label="Actions" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {rows.map((agent) => (
+                  <TableRow key={agent.id}>
+                    <TableCell><AgentIdentity agent={agent} /></TableCell>
+                    <TableCell className="text-secondary">{agent.type}</TableCell>
+                    <TableCell align="right" className="tabular-nums text-secondary" sortValue={agent.updatedSort}>{agent.updated}</TableCell>
+                    <TableCell align="right" className="tabular-nums">{agent.hotlines}</TableCell>
+                    <TableCell align="right" className="tabular-nums">{agent.campaigns}</TableCell>
+                    <TableCell align="right" className="tabular-nums">{agent.steps}</TableCell>
+                    <TableCell align="right" className="tabular-nums">{agent.calls}</TableCell>
+                    <TableCell align="right"><AgentRowActions name={agent.name} /></TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </section>
+      </div>
+    </ScreenFrame>
+  );
+}
+
+export { AgentsComposition as AgentsScreen };

package/examples/campaign-analysis-screen.tsx

@@ -0,0 +1,138 @@
+/**
+ * Campaign analysis screen — the ADS record/analytics-page recipe, built only
+ * from ADS exports.
+ *
+ * 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.
+ * - 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.
+ *
+ * Copy it and replace the sample STATS / SEGMENT / REACH data with your own.
+ */
+import * as React from "react";
+import {
+  BarChart,
+  BreadcrumbItem,
+  Breadcrumbs,
+  Button,
+  LineChart,
+  Progress,
+  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 },
+  // 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 },
+];
+
+export const SEGMENT = [
+  { day: "Oct 19", netNew: 3200, already: 1900 },
+  { day: "Oct 20", netNew: 420, already: 3080 },
+  { day: "Oct 21", netNew: 360, already: 3240 },
+  { day: "Oct 22", netNew: 440, already: 3460 },
+  { day: "Oct 23", netNew: 380, already: 3520 },
+];
+
+export const REACH = [
+  { day: "Oct 19", reached: 12, booked: 2 },
+  { day: "Oct 20", reached: 14, booked: 3 },
+  { day: "Oct 21", reached: 15, booked: 4 },
+  { day: "Oct 22", reached: 17, booked: 4 },
+  { day: "Oct 23", reached: 18, booked: 5 },
+];
+
+const TABS = ["Script", "Workflow", "Analysis", "Call logs", "Guardrails"];
+
+/** Outlined container 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">
+      {children}
+    </section>
+  );
+}
+
+export function CampaignAnalysisScreen() {
+  const [tab, setTab] = React.useState("Analysis");
+
+  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 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>
+
+          <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>
+      </main>
+    </div>
+  );
+}