@actioneer/ads 1.0.8 → 1.0.10

package/examples/campaign-analysis-screen.tsx

@@ -0,0 +1,180 @@
+/**
+ * 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 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.
+ *
+ * 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, 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, trend: [20, 40, 58, 80, 104, 126, 144] },
+];
+
+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"];
+
+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-card border border-border bg-card p-5 shadow-card">
+      {children}
+    </section>
+  );
+}
+
+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-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="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">
+            {/* 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>
+        </main>
+      </div>
+    </div>
+  );
+}

package/examples/campaigns-screen.tsx

@@ -0,0 +1,497 @@
+/**
+ * Campaigns screen — the ADS collection-screen recipe, built only from ADS exports.
+ *
+ * Follows principles `collection-screens`, `record-detail-panels`,
+ * `status-language` and `tabs-search-opposed` (see `get_principles`):
+ *
+ * - The app window (rounded-window, WG4 hairline, shadow-window on the WG3
+ *   backdrop) holds one white page: BodyPageHeader (a 64px bar with the title,
+ *   one primary action and a full-width hairline), then the control row — Tabs with counts leading, SearchDisclosure then Filters as
+ *   icon triggers trailing — then the Table.
+ * - The rows fill the panel: the page size is derived from the height that is
+ *   left, so Pagination always sits on the panel's bottom edge.
+ * - Row checkboxes appear on hover (the header checkbox is always visible).
+ * - Clicking a row opens its detail panel beside the list and marks the row
+ *   with `isActive` — no radio, no modal. The panel is attached to the page:
+ *   flush beside the list, split off by one full-height hairline, no gap.
+ * - The detail panel: a title-only 64px header (title and close centred on
+ *   one row), then Performance (stat cards + chart card) and Details
+ *   (label–value rows that start with the status Chip and the finish date).
+ * - New campaign opens as a fixed-height Modal over the list (never a separate
+ *   screen): one scrolling form — Campaign name, Caller numbers, Audience —
+ *   with Cancel and Create campaign together in the footer (principle
+ *   `create-modals`). Optional guidance lives in a Field `info` icon, the
+ *   source switch sits in the Field `actions` slot, uploads use the inline
+ *   FileDropzone, and picking one saved record is a single-select Table.
+ *
+ * In a full app this screen sits inside the shell, next to the Sidebar
+ * (put the customer's logo in its brand slot with SidebarWorkspace).
+ * Copy it and replace CAMPAIGNS with your own records.
+ */
+import * as React from "react";
+import {
+  BodyPageHeader,
+  Button,
+  Checkbox,
+  Chip,
+  Drawer,
+  Field,
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerSection,
+  DrawerTitle,
+  DetailItem,
+  DetailList,
+  FileDropzone,
+  Filters,
+  InputField,
+  LineChart,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+  Pagination,
+  Progress,
+  SearchDisclosure,
+  SegmentedControl,
+  Sparkline,
+  Tab,
+  TabList,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+  Tabs,
+  type FilterGroup,
+} from "@actioneer/ads";
+
+/** Business-language statuses, one tone per meaning (principle `status-language`). */
+export type CampaignStatus = "Active" | "Scheduled" | "Paused" | "Completed" | "Draft" | "Failed";
+
+export const STATUS_COLOR: Record<CampaignStatus, "info" | "warning" | "success" | "default" | "danger"> = {
+  Active: "info",
+  Scheduled: "info",
+  Paused: "warning",
+  Completed: "success",
+  Draft: "default",
+  Failed: "danger",
+};
+
+export interface CampaignRecord {
+  id: string;
+  name: string;
+  status: CampaignStatus;
+  leads: number;
+  connectRate: string;
+  booked: number;
+  owner: string;
+  started: string;
+  context: string;
+  callingWindows: number;
+  /** Connected calls for the last seven days. */
+  week: number[];
+  cohorts?: CampaignRecord[];
+}
+
+const week = (...values: number[]) => values;
+
+export const CAMPAIGNS: CampaignRecord[] = [
+  {
+    id: "q4", name: "Q4 renewal reminders", status: "Active", leads: 2400, connectRate: "44%", booked: 286, owner: "Divya Shetty", started: "Oct 22", context: "Running since Oct 22", callingWindows: 2, week: week(210, 260, 240, 310, 290, 180, 150),
+    cohorts: [
+      { id: "q4-blr", name: "Bengaluru cohort", status: "Active", leads: 1500, connectRate: "47%", booked: 188, owner: "Divya Shetty", started: "Oct 22", context: "Running since Oct 22", callingWindows: 2, week: week(140, 170, 160, 210, 190, 120, 100) },
+      { id: "q4-bom", name: "Mumbai cohort", status: "Paused", leads: 900, connectRate: "39%", booked: 98, owner: "Kiran Menon", started: "Oct 22", context: "Paused today at 11:40", callingWindows: 2, week: week(70, 90, 80, 100, 100, 60, 0) },
+    ],
+  },
+  { id: "emi", name: "Loan EMI nudges", status: "Completed", leads: 5120, connectRate: "41%", booked: 612, owner: "Vikram Nair", started: "Oct 14", context: "Finished Oct 21", callingWindows: 3, week: week(420, 510, 480, 620, 580, 310, 260) },
+  { id: "kyc", name: "KYC re-verification", status: "Active", leads: 3260, connectRate: "38%", booked: 402, owner: "Rohan Iyer", started: "Oct 20", context: "Running since Oct 20", callingWindows: 2, week: week(260, 300, 320, 340, 330, 280, 310) },
+  { id: "lapse", name: "Policy lapse win-back", status: "Draft", leads: 780, connectRate: "—", booked: 0, owner: "Asha Rao", started: "—", context: "Not launched", callingWindows: 1, week: week(0, 0, 0, 0, 0, 0, 0) },
+  { id: "card", name: "Card activation follow-up", status: "Scheduled", leads: 1840, connectRate: "—", booked: 0, owner: "Meera Pillai", started: "Oct 28", context: "Starts Oct 28 at 10:00", callingWindows: 2, week: week(0, 0, 0, 0, 0, 0, 0) },
+  { id: "payment", name: "Payment failure outreach", status: "Completed", leads: 1120, connectRate: "45%", booked: 151, owner: "Arjun Das", started: "Oct 12", context: "Finished Oct 19", callingWindows: 2, week: week(160, 190, 170, 210, 200, 70, 34) },
+  { id: "festive", name: "Festive offer callbacks", status: "Paused", leads: 640, connectRate: "36%", booked: 52, owner: "Neha Kapoor", started: "Oct 18", context: "Paused yesterday at 18:10", callingWindows: 1, week: week(60, 80, 70, 90, 88, 0, 0) },
+  { id: "abandoned", name: "Abandoned application recovery", status: "Active", leads: 4050, connectRate: "40%", booked: 377, owner: "Sanjay Rao", started: "Oct 18", context: "Running since Oct 18", callingWindows: 3, week: week(340, 380, 400, 420, 410, 330, 310) },
+  { id: "renewal-check", name: "Insurance renewal check-in", status: "Failed", leads: 2210, connectRate: "—", booked: 0, owner: "Kiran Menon", started: "Oct 16", context: "CRM writeback failed on Oct 16", callingWindows: 2, week: week(0, 0, 0, 0, 0, 0, 0) },
+  { id: "credit-limit", name: "Credit limit upgrade offer", status: "Completed", leads: 3480, connectRate: "43%", booked: 298, owner: "Divya Shetty", started: "Oct 08", context: "Finished Oct 15", callingWindows: 3, week: week(300, 320, 310, 360, 340, 120, 80) },
+  { id: "survey", name: "Home loan top-up survey", status: "Active", leads: 2730, connectRate: "35%", booked: 120, owner: "Asha Rao", started: "Oct 24", context: "Running since Oct 24", callingWindows: 1, week: week(0, 0, 120, 180, 210, 190, 160) },
+  { id: "welcome", name: "New account welcome calls", status: "Scheduled", leads: 960, connectRate: "—", booked: 0, owner: "Meera Pillai", started: "Nov 02", context: "Starts Nov 2 at 09:30", callingWindows: 1, week: week(0, 0, 0, 0, 0, 0, 0) },
+];
+
+/** Status tabs use the same words as the status chips. */
+const TABS: Array<{ value: "all" | CampaignStatus; label: string }> = [
+  { value: "all", label: "All" },
+  { value: "Draft", label: "Draft" },
+  { value: "Active", label: "Active" },
+  { value: "Paused", label: "Paused" },
+  { value: "Completed", label: "Completed" },
+];
+
+const INITIAL_FILTERS: FilterGroup[] = [
+  {
+    id: "owner",
+    label: "Owner",
+    value: "all",
+    options: [{ value: "all", label: "All owners" }, ...Array.from(new Set(CAMPAIGNS.map((c) => c.owner))).map((owner) => ({ value: owner, label: owner }))],
+  },
+  {
+    id: "windows",
+    label: "Calling windows",
+    value: "all",
+    options: [
+      { value: "all", label: "Any number" },
+      { value: "1", label: "1 window" },
+      { value: "2", label: "2 windows" },
+      { value: "3", label: "3 windows" },
+    ],
+  },
+];
+
+const ROW_HEIGHT = 64;
+/** Header row + footer (pagination) heights inside the table surface. */
+const TABLE_CHROME = 37 + 53;
+
+/** Derive the page size from the height left in the panel, so rows fill it. */
+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;
+}
+
+function findCampaign(id: string | null): CampaignRecord | undefined {
+  if (!id) return undefined;
+  for (const campaign of CAMPAIGNS) {
+    if (campaign.id === id) return campaign;
+    const cohort = campaign.cohorts?.find((child) => child.id === id);
+    if (cohort) return cohort;
+  }
+  return undefined;
+}
+
+function CampaignCells({ campaign }: { campaign: CampaignRecord }) {
+  // Metric cells (principle `collection-screens`): a rate gets a small meter
+  // before the number; the 7-day trend is a dotless Sparkline.
+  const rate = campaign.connectRate === "—" ? null : Number.parseFloat(campaign.connectRate);
+  const hasCalls = campaign.week.some((value) => value > 0);
+  return (
+    <>
+      <TableCell>{campaign.name}</TableCell>
+      <TableCell>
+        <Chip color={STATUS_COLOR[campaign.status]}>{campaign.status}</Chip>
+      </TableCell>
+      <TableCell align="right" className="tabular-nums">{campaign.leads.toLocaleString("en-IN")}</TableCell>
+      <TableCell align="right">
+        {rate === null ? (
+          <span className="text-on-white-secondary">—</span>
+        ) : (
+          <span className="inline-flex items-center justify-end gap-2.5">
+            <Progress value={rate} size="sm" label={`${campaign.name} connect rate`} className="w-12" />
+            <span className="tabular-nums">{campaign.connectRate}</span>
+          </span>
+        )}
+      </TableCell>
+      <TableCell align="right">
+        {hasCalls ? (
+          <Sparkline
+            data={campaign.week}
+            height={28}
+            dot={false}
+            label={`${campaign.name}: connected calls, last 7 days`}
+            className="ml-auto w-24"
+          />
+        ) : (
+          <span className="text-on-white-secondary">No calls yet</span>
+        )}
+      </TableCell>
+      <TableCell>{campaign.owner}</TableCell>
+    </>
+  );
+}
+
+/** Selection-driven detail panel (principle `record-detail-panels`). */
+export function CampaignDetail({ campaign, onClose }: { campaign: CampaignRecord | undefined; onClose: () => void }) {
+  return (
+    <Drawer
+      open={Boolean(campaign)}
+      onOpenChange={(open) => !open && onClose()}
+      aria-label="Campaign details"
+      // Centre the built-in close button on the 64px title row.
+      className="[&>button[aria-label=Close]]:top-4"
+    >
+      {campaign && (
+        <>
+          {/* Title-only header bar: the title and the close button share one centred row. */}
+          <DrawerHeader className="h-16 justify-center py-0">
+            <DrawerTitle className="truncate">{campaign.name}</DrawerTitle>
+          </DrawerHeader>
+          <DrawerBody className="flex flex-col gap-8">
+            <DrawerSection title="Performance">
+              <dl className="grid grid-cols-3 gap-2">
+                {[
+                  { label: "Leads", value: campaign.leads.toLocaleString("en-IN") },
+                  { label: "Connect rate", value: campaign.connectRate },
+                  { label: "Booked", value: campaign.booked.toLocaleString("en-IN") },
+                ].map((stat) => (
+                  <div key={stat.label} className="min-w-0 rounded-card border border-border bg-wg1 p-3">
+                    <dt className="truncate text-s text-secondary">{stat.label}</dt>
+                    <dd className="mt-0.5 text-xl tabular-nums text-foreground">{stat.value}</dd>
+                  </div>
+                ))}
+              </dl>
+              <div className="rounded-card border border-border p-4">
+                <LineChart
+                  title={<span className="text-s font-normal text-secondary">Connected calls · last 7 days</span>}
+                  data={campaign.week.map((calls, index) => ({ day: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"][index], calls }))}
+                  categoryKey="day"
+                  series={["calls"]}
+                  seriesLabels={{ calls: "Connected" }}
+                  legend={false}
+                  showYAxis={false}
+                  height={160}
+                />
+              </div>
+            </DrawerSection>
+            <DrawerSection title="Details">
+              <DetailList>
+                <DetailItem label="Status">
+                  <Chip color={STATUS_COLOR[campaign.status]}>{campaign.status}</Chip>
+                </DetailItem>
+                <DetailItem label="Owner">{campaign.owner}</DetailItem>
+                <DetailItem label="Started">{campaign.started}</DetailItem>
+                {campaign.status === "Completed" ? (
+                  <DetailItem label="Finished">{campaign.context.replace(/^Finished /, "")}</DetailItem>
+                ) : (
+                  <DetailItem label="Activity">{campaign.context}</DetailItem>
+                )}
+                <DetailItem label="Calling windows">{campaign.callingWindows}</DetailItem>
+              </DetailList>
+            </DrawerSection>
+          </DrawerBody>
+          <DrawerFooter>
+            <Button variant="outline">Duplicate</Button>
+            <Button>Open full view</Button>
+          </DrawerFooter>
+        </>
+      )}
+    </Drawer>
+  );
+}
+
+const SAVED_AUDIENCES = [
+  { id: "0019b431", name: "CSV audience 0019b431", uploaded: "Oct 24", size: 6 },
+  { id: "b190b191", name: "CSV audience b190b191", uploaded: "Oct 21", size: 868 },
+  { id: "5ee46ae6", name: "CSV audience 5ee46ae6", uploaded: "Oct 18", size: 162 },
+  { id: "9dc3d0b1", name: "CSV audience 9dc3d0b1", uploaded: "Oct 12", size: 188 },
+];
+
+/** Create task launched from the collection: a fixed-height Modal over the list (principle `create-modals`). */
+export function NewCampaignModal({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
+  const [name, setName] = React.useState("");
+  const [useNumber, setUseNumber] = React.useState(false);
+  const [audience, setAudience] = React.useState("csv");
+  const [query, setQuery] = React.useState("");
+  const [picked, setPicked] = React.useState<Set<string>>(new Set(["b190b191"]));
+  const audiences = SAVED_AUDIENCES.filter((item) => item.name.toLowerCase().includes(query.trim().toLowerCase()));
+
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <ModalHeader>
+        <ModalTitle>New campaign</ModalTitle>
+      </ModalHeader>
+      <ModalBody className="flex flex-col gap-6">
+        <InputField label="Campaign name" value={name} onChange={(event) => setName(event.target.value)} placeholder="First-EMI onboarding" />
+
+        {/* Optional guidance goes in the label's info icon, not a helper line. */}
+        <Field
+          label="Caller numbers"
+          info="Optional. Tick none to call from any enabled number. You can change this later, even while the campaign is calling."
+        >
+          <div className="flex min-h-12 items-center gap-3 rounded-m border border-input px-3">
+            <Checkbox aria-label="+91 22 6987 0900" checked={useNumber} onChange={(event) => setUseNumber(event.target.checked)} />
+            <span className="flex-1 text-m tabular-nums text-foreground">+91 22 6987 0900</span>
+            <Chip>Plivo</Chip>
+          </div>
+        </Field>
+
+        {/* The source switch sits on the label row; the body changes with it. */}
+        <Field
+          label="Audience"
+          actions={
+            <SegmentedControl
+              size="sm"
+              aria-label="Audience source"
+              options={[{ value: "csv", label: "CSV upload" }, { value: "empty", label: "Empty audience" }]}
+              value={audience}
+              onChange={setAudience}
+            />
+          }
+        >
+          {audience === "csv" ? (
+            <div className="flex flex-col gap-4">
+              <FileDropzone layout="inline" accept=".csv,.xlsx" label="Upload a new list" hint="Drop a CSV or .xlsx with a phone column" />
+              <InputField aria-label="Search saved audiences" type="search" placeholder="Search saved audiences" value={query} onChange={(event) => setQuery(event.target.value)} />
+              <Table aria-label="Saved audiences" selectionMode="single" selectedKeys={picked} onSelectionChange={setPicked}>
+                <TableHeader>
+                  <TableRow>
+                    <TableColumn>Name</TableColumn>
+                    <TableColumn>Uploaded</TableColumn>
+                    <TableColumn align="right">Contacts</TableColumn>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {audiences.map((item) => (
+                    <TableRow key={item.id} rowKey={item.id} aria-label={`Use ${item.name}`}>
+                      <TableCell>{item.name}</TableCell>
+                      <TableCell className="text-secondary">{item.uploaded}</TableCell>
+                      <TableCell align="right" className="tabular-nums">{item.size.toLocaleString("en-IN")}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          ) : null}
+        </Field>
+      </ModalBody>
+      <ModalFooter>
+        <Button variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
+        <Button disabled={!name.trim()} onClick={() => onOpenChange(false)}>Create campaign</Button>
+      </ModalFooter>
+    </Modal>
+  );
+}
+
+export function CampaignsScreen() {
+  const [tab, setTab] = React.useState<"all" | CampaignStatus>("all");
+  const [search, setSearch] = React.useState("");
+  const [searchOpen, setSearchOpen] = React.useState(false);
+  const [filters, setFilters] = React.useState(INITIAL_FILTERS);
+  const [selectedKeys, setSelectedKeys] = React.useState<Set<string>>(new Set());
+  const [openId, setOpenId] = React.useState<string | null>(null);
+  const [page, setPage] = React.useState(1);
+  const [creating, setCreating] = React.useState(false);
+  const rowsRef = React.useRef<HTMLDivElement>(null);
+  const pageSize = useRowsThatFit(rowsRef);
+
+  const owner = filters.find((group) => group.id === "owner")?.value ?? "all";
+  const windows = filters.find((group) => group.id === "windows")?.value ?? "all";
+  const query = search.trim().toLowerCase();
+  const visible = CAMPAIGNS.filter(
+    (c) =>
+      (tab === "all" || c.status === tab) &&
+      (owner === "all" || c.owner === owner) &&
+      (windows === "all" || String(c.callingWindows) === windows) &&
+      (!query || c.name.toLowerCase().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);
+  const countFor = (value: "all" | CampaignStatus) =>
+    value === "all" ? CAMPAIGNS.length : CAMPAIGNS.filter((c) => c.status === value).length;
+
+  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="Voice campaigns" className="flex min-w-0 flex-1 flex-col overflow-hidden">
+          <BodyPageHeader title="Voice campaigns" actions={<Button onClick={() => setCreating(true)}>New campaign</Button>} />
+
+          {/* Tabs lead; search and filters trail as icon triggers. */}
+          <div className="flex items-center justify-between gap-4 px-6">
+            <Tabs className="min-w-0 flex-1" value={tab} onValueChange={(value) => { setTab(value as typeof tab); setPage(1); }}>
+              <TabList aria-label="Filter campaigns by status">
+                {TABS.map((item) => (
+                  <Tab key={item.value} value={item.value} count={countFor(item.value)}>
+                    {item.label}
+                  </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 campaigns"
+                triggerLabel="Search campaigns"
+              />
+              <Filters
+                triggerLabel="Filter campaigns"
+                groups={filters}
+                onChange={(id, value) => { setFilters((groups) => groups.map((group) => (group.id === id ? { ...group, value } : group))); setPage(1); }}
+              />
+            </div>
+          </div>
+
+          {/* The rows fill what is left of the panel; pagination sits at the bottom. */}
+          <div ref={rowsRef} className="min-h-0 flex-1 px-6 pt-4 pb-6">
+            <Table
+              aria-label="Voice campaigns"
+              selectionMode="multiple"
+              selectedKeys={selectedKeys}
+              onSelectionChange={setSelectedKeys}
+              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} campaigns`}
+                />
+              }
+            >
+              <TableHeader>
+                <TableRow>
+                  <TableColumn>Campaign</TableColumn>
+                  <TableColumn>Status</TableColumn>
+                  <TableColumn align="right">Leads</TableColumn>
+                  <TableColumn align="right">Connect rate</TableColumn>
+                  <TableColumn align="right">Last 7 days</TableColumn>
+                  <TableColumn>Owner</TableColumn>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {pageRows.map((campaign) => (
+                  <TableRow
+                    key={campaign.id}
+                    rowKey={campaign.id}
+                    aria-label={`Open ${campaign.name}`}
+                    isActive={openId === campaign.id}
+                    onClick={() => setOpenId((id) => (id === campaign.id ? null : campaign.id))}
+                    childRows={campaign.cohorts?.map((cohort) => (
+                      <TableRow
+                        key={cohort.id}
+                        rowKey={cohort.id}
+                        aria-label={`Open ${cohort.name}`}
+                        isActive={openId === cohort.id}
+                        onClick={() => setOpenId((id) => (id === cohort.id ? null : cohort.id))}
+                      >
+                        <CampaignCells campaign={cohort} />
+                      </TableRow>
+                    ))}
+                    defaultExpanded={Boolean(campaign.cohorts)}
+                  >
+                    <CampaignCells campaign={campaign} />
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </section>
+
+        <CampaignDetail campaign={findCampaign(openId)} onClose={() => setOpenId(null)} />
+        <NewCampaignModal open={creating} onOpenChange={setCreating} />
+      </div>
+    </div>
+  );
+}