@squadbase/vantage-template 0.0.1

package/ui-templates/kpi-chart-simple/pages/index.tsx

@@ -0,0 +1,200 @@
+import { Activity, DollarSign, ShoppingCart, Users } from "lucide-react"
+import { definePage } from "@squadbase/vantage"
+import {
+  DashboardCard,
+  DashboardCardAction,
+  DashboardCardContent,
+  DashboardCardHeader,
+  DashboardCardPreset,
+  DashboardCardTitle,
+  EChart,
+  PageShell,
+  PageShellContent,
+  PageShellDescription,
+  PageShellHeader,
+  PageShellHeaderEnd,
+  PageShellHeading,
+  PageShellTitle,
+  Placeholder,
+  SegmentedControl,
+  Sparkline,
+} from "@squadbase/vantage/components"
+import type { EChartsOption, SegmentOption } from "@squadbase/vantage/components"
+import { Button, ErrorState, Loading } from "@squadbase/vantage/ui"
+import { useApiQuery } from "@squadbase/vantage/query"
+import { useSearchParam } from "@squadbase/vantage/router"
+
+import { TopItemsTable } from "./components/kpi-chart-simple/top-items-table"
+import type { KpiId, KpiSummary, TrendPoint } from "./lib/kpi-chart-simple/types"
+
+export const page = definePage({
+  title: "KPI + Chart (Simple)",
+  description:
+    "4 KPI cards, a single trend line, and a ranked-items table, served by server/api and filtered through the URL.",
+})
+
+// ── formatting ───────────────────────────────────────────────────────────────
+
+function formatNumber(n: number): string {
+  const sign = n < 0 ? "-" : ""
+  const abs = Math.abs(n)
+  if (abs >= 1_000_000) return `${sign}${(abs / 1_000_000).toFixed(1)}M`
+  if (abs >= 1_000) return `${sign}${(abs / 1_000).toFixed(1)}K`
+  return n.toLocaleString("en-US")
+}
+
+function formatCurrency(n: number): string {
+  const sign = n < 0 ? "-" : ""
+  const abs = Math.abs(n)
+  if (abs >= 1_000_000) return `${sign}$${(abs / 1_000_000).toFixed(2)}M`
+  if (abs >= 1_000) return `${sign}$${(abs / 1_000).toFixed(1)}K`
+  return `${sign}$${abs.toFixed(0)}`
+}
+
+// ── chart options ────────────────────────────────────────────────────────────
+
+function trendOption(data: TrendPoint[]): EChartsOption {
+  return {
+    tooltip: { trigger: "axis" },
+    legend: { bottom: 0 },
+    grid: { left: "3%", right: "4%", bottom: "10%", containLabel: true },
+    xAxis: {
+      type: "category",
+      data: data.map((d) => d.date),
+      boundaryGap: false,
+      axisLabel: { formatter: (value: string) => value.slice(5) },
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: { formatter: (v: number) => formatNumber(v) },
+    },
+    series: [
+      {
+        name: "Series A",
+        type: "line",
+        smooth: true,
+        showSymbol: false,
+        data: data.map((d) => d.revenue),
+        areaStyle: { opacity: 0.18 },
+      },
+    ],
+  }
+}
+
+// ── page ─────────────────────────────────────────────────────────────────────
+
+/** Display labels live here, not in the payload the API returns. */
+const KPI_META: Record<
+  KpiId,
+  { label: string; icon: typeof DollarSign; format: (value: number) => string }
+> = {
+  "total-revenue": { label: "Metric 1", icon: DollarSign, format: formatCurrency },
+  "active-users": {
+    label: "Metric 2",
+    icon: Users,
+    format: (v) => Math.round(v).toLocaleString("en-US"),
+  },
+  "conversion-rate": { label: "Metric 3", icon: Activity, format: (v) => `${v.toFixed(2)}%` },
+  aov: { label: "Metric 4", icon: ShoppingCart, format: (v) => `$${v.toFixed(2)}` },
+}
+
+const RANGE_OPTIONS: SegmentOption[] = [
+  { label: "7 days", value: "7d" },
+  { label: "30 days", value: "30d" },
+  { label: "90 days", value: "90d" },
+]
+
+function DashboardBody({ data }: { data: KpiSummary }) {
+  return (
+    <>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {data.kpis.map((kpi) => {
+          const { label, icon: Icon, format } = KPI_META[kpi.id]
+          return (
+            <DashboardCard key={kpi.id}>
+              <DashboardCardHeader>
+                <DashboardCardTitle className="text-muted-foreground">
+                  {label}
+                </DashboardCardTitle>
+                <DashboardCardAction>
+                  <Icon className="size-4 text-muted-foreground" />
+                </DashboardCardAction>
+              </DashboardCardHeader>
+              <DashboardCardContent>
+                <Placeholder className="text-2xl font-bold">
+                  {format(kpi.value)}
+                </Placeholder>
+                <div className="mt-2">
+                  <Placeholder className="text-sm font-medium">
+                    {kpi.change >= 0 ? `+${kpi.change}%` : `${kpi.change}%`}
+                  </Placeholder>
+                </div>
+                <Sparkline
+                  data={kpi.sparklineData.map((v) => ({ value: v }))}
+                  height={32}
+                  area
+                  className="mt-3"
+                />
+              </DashboardCardContent>
+            </DashboardCard>
+          )
+        })}
+      </div>
+
+      <DashboardCardPreset title="Trend" description="Values over the selected period">
+        <EChart option={trendOption(data.trend)} height="320px" />
+      </DashboardCardPreset>
+
+      <DashboardCardPreset title="Top items" description="Ranked by value">
+        <TopItemsTable data={data.topItems} />
+      </DashboardCardPreset>
+    </>
+  )
+}
+
+export default function HomePage() {
+  // Filter state belongs in the URL rather than `useState`: it survives a
+  // reload, and a pasted link reproduces exactly what you were looking at.
+  const [range, setRange] = useSearchParam("range", "30d")
+
+  // `search` goes into the query string *and* the cache key, so changing the
+  // range refetches instead of serving the previous window.
+  const summary = useApiQuery<KpiSummary>("/api/kpi-summary", { search: { range } })
+
+  return (
+    <PageShell>
+      <PageShellHeader>
+        <PageShellHeading>
+          <PageShellTitle>[Template] Performance overview</PageShellTitle>
+          <PageShellDescription>
+            Key metrics and trends for the selected period.
+          </PageShellDescription>
+        </PageShellHeading>
+        <PageShellHeaderEnd>
+          <SegmentedControl
+            options={RANGE_OPTIONS}
+            value={range}
+            onChange={setRange}
+            ariaLabel="Period"
+          />
+        </PageShellHeaderEnd>
+      </PageShellHeader>
+
+      <PageShellContent className="space-y-6">
+        {summary.isPending ? (
+          <Loading />
+        ) : summary.isError ? (
+          // `summary.error` is an `ApiError`: `message` is the text the handler
+          // passed to `HttpError`, so there is no cast and no generic wording.
+          <ErrorState
+            title="Could not load the dashboard"
+            message={summary.error.message}
+            action={<Button onClick={() => void summary.refetch()}>Retry</Button>}
+          />
+        ) : (
+          <DashboardBody data={summary.data} />
+        )}
+      </PageShellContent>
+    </PageShell>
+  )
+}

package/ui-templates/kpi-chart-simple/server/kpi-summary.ts

@@ -0,0 +1,141 @@
+import type { ApiContext } from "@squadbase/vantage/server"
+import { HttpError } from "@squadbase/vantage/server"
+
+import type {
+  KpiItem,
+  KpiSummary,
+  RangeKey,
+  TopItemRow,
+  TrendPoint,
+} from "../../lib/kpi-chart-simple/types"
+
+/**
+ * `GET /api/kpi-summary?range=7d|30d|90d`
+ *
+ * The one file to rewrite when you connect real data. Everything below the
+ * "sample data" banner is a stand-in for a query — swap it for your warehouse
+ * client (credentials come from `ctx.env`, never from the client bundle) and
+ * the page keeps working as long as the `KpiSummary` shape holds.
+ */
+
+const RANGE_DAYS: Record<RangeKey, number> = { "7d": 7, "30d": 30, "90d": 90 }
+
+function isRangeKey(value: string): value is RangeKey {
+  return Object.hasOwn(RANGE_DAYS, value)
+}
+
+// ── sample data ──────────────────────────────────────────────────────────────
+// Deterministic so the dashboard looks the same on every request.
+
+const HISTORY_DAYS = 180
+const DAY_MS = 86_400_000
+
+const HISTORY: TrendPoint[] = Array.from({ length: HISTORY_DAYS }, (_, i) => {
+  const weekly = Math.sin((i / 7) * Math.PI * 2) * 4_200
+  const monthly = Math.sin((i / 30) * Math.PI * 2) * 2_600
+  const revenue = Math.round(34_000 + i * 95 + weekly + monthly)
+  const orders = Math.round(revenue / (74 + Math.sin(i / 11) * 6))
+  const visitors = Math.round(orders * (28 + Math.sin(i / 9) * 4))
+  return {
+    date: new Date(Date.UTC(2024, 0, 1) + i * DAY_MS).toISOString().slice(0, 10),
+    revenue,
+    orders,
+    visitors,
+  }
+})
+
+const TOP_ITEMS: TopItemRow[] = [
+  { id: "p-01", name: "Item 1", category: "Category A", revenue: 184_320, units: 1_232, share: 0.142 },
+  { id: "p-02", name: "Item 2", category: "Category B", revenue: 162_480, units: 812, share: 0.125 },
+  { id: "p-03", name: "Item 3", category: "Category C", revenue: 138_750, units: 463, share: 0.107 },
+  { id: "p-04", name: "Item 4", category: "Category D", revenue: 121_900, units: 974, share: 0.094 },
+  { id: "p-05", name: "Item 5", category: "Category D", revenue: 98_640, units: 1_644, share: 0.076 },
+  { id: "p-06", name: "Item 6", category: "Category B", revenue: 87_220, units: 821, share: 0.067 },
+  { id: "p-07", name: "Item 7", category: "Category A", revenue: 81_540, units: 679, share: 0.063 },
+  { id: "p-08", name: "Item 8", category: "Category E", revenue: 72_410, units: 905, share: 0.056 },
+  { id: "p-09", name: "Item 9", category: "Category E", revenue: 68_900, units: 138, share: 0.053 },
+  { id: "p-10", name: "Item 10", category: "Category D", revenue: 54_220, units: 1_356, share: 0.042 },
+]
+
+// ── aggregation ──────────────────────────────────────────────────────────────
+
+function total(rows: TrendPoint[], field: "revenue" | "orders" | "visitors"): number {
+  return rows.reduce((acc, row) => acc + row[field], 0)
+}
+
+/** Percent change vs. the preceding window, rounded to one decimal. */
+function delta(current: number, prior: number): number {
+  if (prior === 0) return 0
+  return Math.round(((current - prior) / prior) * 1_000) / 10
+}
+
+function sparkline(rows: TrendPoint[], project: (row: TrendPoint) => number): number[] {
+  const step = Math.max(1, Math.floor(rows.length / 12))
+  return rows.filter((_, i) => i % step === 0).map(project)
+}
+
+function buildKpis(current: TrendPoint[], prior: TrendPoint[]): KpiItem[] {
+  const revenue = total(current, "revenue")
+  const orders = total(current, "orders")
+  const visitors = total(current, "visitors")
+  const priorRevenue = total(prior, "revenue")
+  const priorOrders = total(prior, "orders")
+  const priorVisitors = total(prior, "visitors")
+
+  const conversion = visitors === 0 ? 0 : (orders / visitors) * 100
+  const priorConversion = priorVisitors === 0 ? 0 : (priorOrders / priorVisitors) * 100
+  const aov = orders === 0 ? 0 : revenue / orders
+  const priorAov = priorOrders === 0 ? 0 : priorRevenue / priorOrders
+
+  return [
+    {
+      id: "total-revenue",
+      value: revenue,
+      change: delta(revenue, priorRevenue),
+      sparklineData: sparkline(current, (row) => row.revenue),
+    },
+    {
+      id: "active-users",
+      value: visitors,
+      change: delta(visitors, priorVisitors),
+      sparklineData: sparkline(current, (row) => row.visitors),
+    },
+    {
+      id: "conversion-rate",
+      value: Math.round(conversion * 100) / 100,
+      change: delta(conversion, priorConversion),
+      sparklineData: sparkline(current, (row) => (row.orders / row.visitors) * 100),
+    },
+    {
+      id: "aov",
+      value: Math.round(aov * 100) / 100,
+      change: delta(aov, priorAov),
+      sparklineData: sparkline(current, (row) => row.revenue / row.orders),
+    },
+  ]
+}
+
+// ── handler ──────────────────────────────────────────────────────────────────
+
+export async function GET({ request }: ApiContext) {
+  const range = new URL(request.url).searchParams.get("range") ?? "30d"
+
+  // Errors the client should see must be `HttpError`; anything else is logged
+  // and flattened to a generic 500.
+  if (!isRangeKey(range)) {
+    throw new HttpError(400, `Unknown range "${range}". Expected one of 7d, 30d, 90d.`)
+  }
+
+  const days = RANGE_DAYS[range]
+  const current = HISTORY.slice(-days)
+  const prior = HISTORY.slice(-days * 2, -days)
+
+  const payload: KpiSummary = {
+    range,
+    kpis: buildKpis(current, prior),
+    trend: current,
+    topItems: TOP_ITEMS,
+  }
+
+  return Response.json(payload)
+}

package/ui-templates/kpi-chart-simple-ja/components/top-items-table.tsx

@@ -0,0 +1,73 @@
+import { useMemo } from "react"
+import { DataTablePreset, Placeholder } from "@squadbase/vantage/components"
+import type { ColumnDef } from "@squadbase/vantage/components"
+
+import type { TopItemRow } from "../../lib/kpi-chart-simple/types"
+
+function formatCurrency(n: number, opts: { short?: boolean } = {}): string {
+  const sign = n < 0 ? "-" : ""
+  const abs = Math.abs(n)
+  if (opts.short) {
+    if (abs >= 100_000_000) return `${sign}${(abs / 100_000_000).toFixed(2)}億円`
+    if (abs >= 10_000) return `${sign}${(abs / 10_000).toFixed(0)}万円`
+    return `${sign}¥${abs.toLocaleString("ja-JP")}`
+  }
+  return `${sign}¥${Math.round(abs).toLocaleString("ja-JP")}`
+}
+
+function formatPercent(value: number, digits = 1): string {
+  return `${value.toFixed(digits)}%`
+}
+
+interface TopItemsTableProps {
+  data: TopItemRow[]
+}
+
+export function TopItemsTable({ data }: TopItemsTableProps) {
+  const columns = useMemo<ColumnDef<TopItemRow>[]>(
+    () => [
+      {
+        accessorKey: "name",
+        header: "列1",
+      },
+      {
+        accessorKey: "category",
+        header: "列2",
+      },
+      {
+        accessorKey: "revenue",
+        header: "列3",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>
+              {formatCurrency(row.original.revenue, { short: true })}
+            </Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "units",
+        header: "列4",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>
+              {row.original.units.toLocaleString("ja-JP")}
+            </Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "share",
+        header: "列5",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>{formatPercent(row.original.share * 100)}</Placeholder>
+          </div>
+        ),
+      },
+    ],
+    [],
+  )
+
+  return <DataTablePreset columns={columns} data={data} enableSorting />
+}

package/ui-templates/kpi-chart-simple-ja/lib/types.ts

@@ -0,0 +1,44 @@
+/**
+ * Shared between the page and `server/api/kpi-summary.ts`.
+ *
+ * These live in `lib/` rather than `components/` because the client may never
+ * import from `server/` (`vantage check` reports `CLIENT_IMPORTS_SERVER`), so
+ * anything both sides need has to sit in neutral ground.
+ */
+
+export type RangeKey = "7d" | "30d" | "90d"
+
+export type KpiId = "total-revenue" | "active-users" | "conversion-rate" | "aov"
+
+/** Raw numbers only — labels and formatting belong to the page. */
+export interface KpiItem {
+  id: KpiId
+  value: number
+  /** Percent change against the preceding window of the same length. */
+  change: number
+  sparklineData: number[]
+}
+
+export interface TrendPoint {
+  date: string
+  revenue: number
+  orders: number
+  visitors: number
+}
+
+export interface TopItemRow {
+  id: string
+  name: string
+  category: string
+  revenue: number
+  units: number
+  share: number
+}
+
+/** The payload `GET /api/kpi-summary` returns. */
+export interface KpiSummary {
+  range: RangeKey
+  kpis: KpiItem[]
+  trend: TrendPoint[]
+  topItems: TopItemRow[]
+}

package/ui-templates/kpi-chart-simple-ja/manifest.json

@@ -0,0 +1,11 @@
+{
+  "name": "kpi-chart-simple-ja",
+  "description": "[日本語] KPI + チャート (シンプル) — KPIカード4個・トレンドライン1本・上位アイテムテーブル。server/api から取得し、期間は URL で切り替える最小ダッシュボード構成",
+  "version": "0.2.0",
+  "files": [
+    { "src": "pages/index.tsx", "dest": "index.tsx", "action": "replace" },
+    { "src": "components/top-items-table.tsx", "dest": "components/kpi-chart-simple/top-items-table.tsx", "action": "add" },
+    { "src": "lib/types.ts", "dest": "lib/kpi-chart-simple/types.ts", "action": "add", "relabel": false },
+    { "src": "server/kpi-summary.ts", "dest": "server/api/kpi-summary.ts", "action": "add", "relabel": false }
+  ]
+}

package/ui-templates/kpi-chart-simple-ja/pages/index.tsx

@@ -0,0 +1,200 @@
+import { Activity, DollarSign, ShoppingCart, Users } from "lucide-react"
+import { definePage } from "@squadbase/vantage"
+import {
+  DashboardCard,
+  DashboardCardAction,
+  DashboardCardContent,
+  DashboardCardHeader,
+  DashboardCardPreset,
+  DashboardCardTitle,
+  EChart,
+  PageShell,
+  PageShellContent,
+  PageShellDescription,
+  PageShellHeader,
+  PageShellHeaderEnd,
+  PageShellHeading,
+  PageShellTitle,
+  Placeholder,
+  SegmentedControl,
+  Sparkline,
+} from "@squadbase/vantage/components"
+import type { EChartsOption, SegmentOption } from "@squadbase/vantage/components"
+import { Button, ErrorState, Loading } from "@squadbase/vantage/ui"
+import { useApiQuery } from "@squadbase/vantage/query"
+import { useSearchParam } from "@squadbase/vantage/router"
+
+import { TopItemsTable } from "./components/kpi-chart-simple/top-items-table"
+import type { KpiId, KpiSummary, TrendPoint } from "./lib/kpi-chart-simple/types"
+
+export const page = definePage({
+  title: "KPI + チャート (シンプル)",
+  description:
+    "KPIカード4個・トレンドライン1本・上位アイテムテーブル。server/api から取得し、期間は URL で切り替える最小構成",
+})
+
+// ── 表示フォーマット ─────────────────────────────────────────────────────────
+
+function formatNumber(n: number): string {
+  const sign = n < 0 ? "-" : ""
+  const abs = Math.abs(n)
+  if (abs >= 1_000_000) return `${sign}${(abs / 1_000_000).toFixed(1)}M`
+  if (abs >= 1_000) return `${sign}${(abs / 1_000).toFixed(1)}K`
+  return n.toLocaleString("ja-JP")
+}
+
+function formatCurrency(n: number): string {
+  const sign = n < 0 ? "-" : ""
+  const abs = Math.abs(n)
+  if (abs >= 1_000_000) return `${sign}¥${(abs / 1_000_000).toFixed(2)}M`
+  if (abs >= 1_000) return `${sign}¥${(abs / 1_000).toFixed(1)}K`
+  return `${sign}¥${abs.toFixed(0)}`
+}
+
+// ── チャートオプション ───────────────────────────────────────────────────────
+
+function trendOption(data: TrendPoint[]): EChartsOption {
+  return {
+    tooltip: { trigger: "axis" },
+    legend: { bottom: 0 },
+    grid: { left: "3%", right: "4%", bottom: "10%", containLabel: true },
+    xAxis: {
+      type: "category",
+      data: data.map((d) => d.date),
+      boundaryGap: false,
+      axisLabel: { formatter: (value: string) => value.slice(5) },
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: { formatter: (v: number) => formatNumber(v) },
+    },
+    series: [
+      {
+        name: "系列A",
+        type: "line",
+        smooth: true,
+        showSymbol: false,
+        data: data.map((d) => d.revenue),
+        areaStyle: { opacity: 0.18 },
+      },
+    ],
+  }
+}
+
+// ── ページ ───────────────────────────────────────────────────────────────────
+
+/** 表示ラベルは API のレスポンスではなく描画側に置く。 */
+const KPI_META: Record<
+  KpiId,
+  { label: string; icon: typeof DollarSign; format: (value: number) => string }
+> = {
+  "total-revenue": { label: "指標1", icon: DollarSign, format: formatCurrency },
+  "active-users": {
+    label: "指標2",
+    icon: Users,
+    format: (v) => Math.round(v).toLocaleString("ja-JP"),
+  },
+  "conversion-rate": { label: "指標3", icon: Activity, format: (v) => `${v.toFixed(2)}%` },
+  aov: { label: "指標4", icon: ShoppingCart, format: (v) => `¥${v.toFixed(2)}` },
+}
+
+const RANGE_OPTIONS: SegmentOption[] = [
+  { label: "7日", value: "7d" },
+  { label: "30日", value: "30d" },
+  { label: "90日", value: "90d" },
+]
+
+function DashboardBody({ data }: { data: KpiSummary }) {
+  return (
+    <>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {data.kpis.map((kpi) => {
+          const { label, icon: Icon, format } = KPI_META[kpi.id]
+          return (
+            <DashboardCard key={kpi.id}>
+              <DashboardCardHeader>
+                <DashboardCardTitle className="text-muted-foreground">
+                  {label}
+                </DashboardCardTitle>
+                <DashboardCardAction>
+                  <Icon className="size-4 text-muted-foreground" />
+                </DashboardCardAction>
+              </DashboardCardHeader>
+              <DashboardCardContent>
+                <Placeholder className="text-2xl font-bold">
+                  {format(kpi.value)}
+                </Placeholder>
+                <div className="mt-2">
+                  <Placeholder className="text-sm font-medium">
+                    {kpi.change >= 0 ? `+${kpi.change}%` : `${kpi.change}%`}
+                  </Placeholder>
+                </div>
+                <Sparkline
+                  data={kpi.sparklineData.map((v) => ({ value: v }))}
+                  height={32}
+                  area
+                  className="mt-3"
+                />
+              </DashboardCardContent>
+            </DashboardCard>
+          )
+        })}
+      </div>
+
+      <DashboardCardPreset title="トレンド" description="選択期間の値">
+        <EChart option={trendOption(data.trend)} height="320px" />
+      </DashboardCardPreset>
+
+      <DashboardCardPreset title="上位項目" description="値で並べ替え">
+        <TopItemsTable data={data.topItems} />
+      </DashboardCardPreset>
+    </>
+  )
+}
+
+export default function HomePage() {
+  // 絞り込み状態は useState ではなく URL に置く。リロードで消えず、URL を
+  // そのまま共有すれば相手も同じ画面を見られる。
+  const [range, setRange] = useSearchParam("range", "30d")
+
+  // search はクエリ文字列とキャッシュキーの両方に入るので、期間を変えると
+  // 前の期間のデータを返さずに再取得される。
+  const summary = useApiQuery<KpiSummary>("/api/kpi-summary", { search: { range } })
+
+  return (
+    <PageShell>
+      <PageShellHeader>
+        <PageShellHeading>
+          <PageShellTitle>[テンプレート] パフォーマンス概要</PageShellTitle>
+          <PageShellDescription>
+            選択期間の主要指標とトレンド。
+          </PageShellDescription>
+        </PageShellHeading>
+        <PageShellHeaderEnd>
+          <SegmentedControl
+            options={RANGE_OPTIONS}
+            value={range}
+            onChange={setRange}
+            ariaLabel="期間"
+          />
+        </PageShellHeaderEnd>
+      </PageShellHeader>
+
+      <PageShellContent className="space-y-6">
+        {summary.isPending ? (
+          <Loading />
+        ) : summary.isError ? (
+          // summary.error は ApiError。message にはハンドラが HttpError に
+          // 渡した文言がそのまま入るので、キャストも汎用文言も要らない。
+          <ErrorState
+            title="ダッシュボードを読み込めませんでした"
+            message={summary.error.message}
+            action={<Button onClick={() => void summary.refetch()}>再試行</Button>}
+          />
+        ) : (
+          <DashboardBody data={summary.data} />
+        )}
+      </PageShellContent>
+    </PageShell>
+  )
+}