{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dashboard-page",
  "type": "registry:block",
  "title": "Dashboard page",
  "description": "Date range, meaningful linked metrics, chart panels and evidence composition.",
  "dependencies": [],
  "registryDependencies": [
    "https://shine-blond.vercel.app/r/chart-panel.json",
    "https://shine-blond.vercel.app/r/date-range.json"
  ],
  "files": [
    {
      "path": "blocks/dashboard-page.tsx",
      "type": "registry:component",
      "target": "components/shine/dashboard-page.tsx",
      "content": "\"use client\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { ChartPanel } from \"@/components/shine/chart-panel\";\nimport { DateRange } from \"@/components/shine/date-range\";\n\nexport type DashboardMetric = {\n  label: string;\n  value: string;\n  context: string;\n  href: string;\n  /** Required for measure KPI floor — e.g. `USD`, `%`, `days`. */\n  unit: string;\n  /** Required comparison baseline — e.g. `vs last 30d`, `target 110%`, `no prior period`. */\n  baseline: string;\n  goodDirection?: \"up\" | \"down\" | \"neutral\";\n};\n\nexport function DashboardPage({\n  title,\n  description,\n  metrics,\n  charts,\n  dateRange,\n  evidence,\n}: {\n  title: string;\n  description: string;\n  metrics: DashboardMetric[];\n  charts: ComponentProps<typeof ChartPanel>[];\n  dateRange: ComponentProps<typeof DateRange>;\n  evidence: ReactNode;\n}) {\n  return (\n    <article data-product-pattern=\"dashboard-page\" className=\"min-w-0 space-y-6\">\n      <header className=\"space-y-2\">\n        <h1 className=\"text-2xl font-semibold\">{title}</h1>\n        <p className=\"text-muted-foreground\">{description}</p>\n      </header>\n      <DateRange {...dateRange} />\n      <dl className=\"grid grid-cols-[repeat(auto-fit,minmax(min(100%,14rem),1fr))] gap-4\">\n        {metrics.map((metric) => (\n          <div\n            key={metric.label}\n            data-shine-kpi\n            data-unit={metric.unit}\n            data-baseline={metric.baseline}\n            data-good-direction={metric.goodDirection || undefined}\n            className=\"space-y-2 rounded-lg border border-border p-5\"\n          >\n            <dt className=\"text-sm text-muted-foreground\">{metric.label}</dt>\n            <dd className=\"text-2xl font-semibold\">\n              <a href={metric.href} className=\"underline decoration-border underline-offset-4\">\n                {metric.value}\n              </a>\n            </dd>\n            <dd className=\"text-sm text-muted-foreground\">{metric.context}</dd>\n          </div>\n        ))}\n      </dl>\n      <div\n        data-region=\"focal\"\n        className=\"grid min-w-0 grid-cols-[repeat(auto-fit,minmax(min(100%,24rem),1fr))] gap-5\"\n      >\n        {charts.map((chart) => (\n          <ChartPanel key={chart.title} {...chart} />\n        ))}\n      </div>\n      {evidence}\n    </article>\n  );\n}\n"
    }
  ]
}