Multi-page dashboard

One page cannot hold it and the sections have different readers. Each page needs its own answer to is-it-okay at the top, because a reader who lands on page three never saw page one.

npx shadcn@latest add tabs button dropdown-menu
npm i lucide-react

Tokens this needs: --card, --card-foreground, --muted, --muted-foreground, --border, --status-nominal, --status-warn, --status-critical
The status, chart, scale, state and direction names are an extension,
not a rename. shadcn has --destructive and five --chart-* and nothing
else in this territory.

────────────────────────────────────────────────────────────────────────
// MultiPageDashboard.tsx
────────────────────────────────────────────────────────────────────────

import type { ReactNode } from "react";
import { ChevronDown } from "lucide-react";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

/** Closed. Every page answers is-it-okay in one of three words, so the
 *  overview can put the answers side by side. */
export type Status = "nominal" | "warn" | "critical";
const STATUS = { nominal: "text-status-nominal", warn: "text-status-warn", critical: "text-status-critical" };

/** What every page receives. A page cannot hold its own range, which is how
 *  two pages end up comparing different windows without anyone noticing. */
export type Shared = { range: string; scope: string };

export type Page = {
  id: string;
  title: string;
  status: Status;
  /** One line on whether it is okay. Printed at the top of the page and on
   *  its overview tile, so a reader landing here never needs page one. */
  headline: string;
  body?: (shared: Shared) => ReactNode;
};

export const RANGES = ["1h", "6h", "24h", "7d"] as const;

export function MultiPageDashboard({ subject, pages, shared, onShared, onScope, page, onNavigate }: {
  subject: string;
  /** Peers at one scope, differing in what they show. Levels of one subject
   *  narrowing are a different pattern. */
  pages: Page[];
  shared: Shared;
  onShared: (next: Shared) => void;
  /** Opens the app's scope picker. */
  onScope: () => void;
  /** "overview" or a page id. Lift it into the URL with the shared state, so
   *  an alert can link to the right page with the scope intact. */
  page: string;
  onNavigate: (id: string) => void;
}) {
  const current = pages.find((p) => p.id === page);

  return (
    <div className="rounded-lg border bg-card">
      {/* One header on every page: same title, same controls, same places. */}
      <div className="flex flex-wrap items-center gap-2 border-b px-4 py-2.5">
        <p className="text-sm text-card-foreground">{subject} · {shared.scope}</p>
        <DropdownMenu modal={false}>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" size="sm" className="ml-auto h-6 px-2 text-[11px]">last {shared.range} <ChevronDown className="size-3" /></Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="min-w-24">
            {RANGES.map((r) => <DropdownMenuItem key={r} className="text-xs" onSelect={() => onShared({ ...shared, range: r })}>last {r}</DropdownMenuItem>)}
          </DropdownMenuContent>
        </DropdownMenu>
        <Button variant="outline" size="sm" className="h-6 px-2 text-[11px]" onClick={onScope}>{shared.scope}</Button>
      </div>

      <Tabs value={page} onValueChange={onNavigate}>
        <TabsList className="h-9 w-full justify-start rounded-none border-b bg-transparent px-2">
          <TabsTrigger value="overview" className="text-xs data-[state=active]:shadow-none">Overview</TabsTrigger>
          {pages.map((p) => (
            <TabsTrigger key={p.id} value={p.id} className="gap-1.5 text-xs data-[state=active]:shadow-none">
              <span className={cn("text-[9px]", STATUS[p.status])} aria-hidden="true">●</span>{p.title}
            </TabsTrigger>
          ))}
        </TabsList>
      </Tabs>

      <div className="p-4">
        {current ? (
          <>
            <p className={cn("text-xs font-medium", STATUS[current.status])}>{current.status} · <span className="font-normal text-card-foreground">{current.headline}</span></p>
            <div className="mt-3">{current.body?.(shared)}</div>
          </>
        ) : (
          // The landing page. Its job is to say which of the others to open.
          <div className="grid gap-2" style={{ gridTemplateColumns: `repeat(${pages.length}, minmax(0, 1fr))` }}>
            {pages.map((p) => (
              <button key={p.id} type="button" onClick={() => onNavigate(p.id)} className="rounded border bg-muted p-3 text-left hover:border-foreground/40">
                <p className={cn("text-[10px] font-medium", STATUS[p.status])}>● {p.status}</p>
                <p className="mt-1 text-sm text-card-foreground">{p.title}</p>
                <p className="mt-1 text-[11px] leading-snug text-muted-foreground">{p.headline}</p>
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

────────────────────────────────────────────────────────────────────────
// demo.tsx
────────────────────────────────────────────────────────────────────────

import { useState } from "react";
import { MultiPageDashboard, type Page, type Shared } from "./MultiPageDashboard";

const figure = (label: string, value: string) => (
  <div className="rounded border bg-muted px-3 py-2">
    <p className="text-[10px] uppercase tracking-wide text-muted-foreground">{label}</p>
    <p className="text-lg tabular-nums text-card-foreground">{value}</p>
  </div>
);

/** Four peer pages about one service. Every body prints the range it was
 *  given, which is the only range there is. */
const PAGES: Page[] = [
  { id: "traffic", title: "Traffic", status: "nominal", headline: "1,080 req/s, up 3% on the window before.", body: (s) => <div className="grid grid-cols-2 gap-2">{figure(`requests, last ${s.range}`, "22.4M")}{figure("peak req/s", "1,112")}</div> },
  { id: "errors", title: "Errors", status: "nominal", headline: "0.04%, within the 0.5% budget.", body: (s) => <div className="grid grid-cols-2 gap-2">{figure(`5xx, last ${s.range}`, "8,960")}{figure("budget used", "8%")}</div> },
  { id: "latency", title: "Latency", status: "warn", headline: "p95 at 312ms after a 24ms rise; the 400ms page threshold is close.", body: (s) => <div className="grid grid-cols-2 gap-2">{figure(`p95, last ${s.range}`, "312ms")}{figure("p50", "88ms")}</div> },
  { id: "cost", title: "Cost", status: "nominal", headline: "£1,420 for the window, on the forecast line.", body: (s) => <div className="grid grid-cols-2 gap-2">{figure(`spend, last ${s.range}`, "£1,420")}{figure("forecast", "£1,400")}</div> },
];

/** Lands on the overview. The range you pick in the header is the range on
 *  every page, because there is only one. */
export default function Demo() {
  const [shared, setShared] = useState<Shared>({ range: "6h", scope: "checkout" });
  const [page, setPage] = useState("overview");
  return (
    <MultiPageDashboard
      subject="Service"
      pages={PAGES}
      shared={shared}
      onShared={setShared}
      onScope={() => {}}
      page={page}
      onNavigate={setPage}
    />
  );
}