{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dashboard-finance",
  "title": "Finance Dashboard",
  "description": "A two-pane finance card: stacked bar chart on the left, KPI rail with icon tiles and a CTA on the right.",
  "dependencies": [
    "recharts",
    "lucide-react"
  ],
  "registryDependencies": [
    "chart",
    "card",
    "button"
  ],
  "files": [
    {
      "path": "registry/new-york/blocks/dashboard-finance/dashboard-finance.tsx",
      "content": "\"use client\";\n\nimport type { LucideIcon } from \"lucide-react\";\nimport { MoreVertical } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Bar, BarChart, CartesianGrid, XAxis, YAxis } from \"recharts\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/registry/new-york/ui/button\";\nimport { Card } from \"@/registry/new-york/ui/card\";\nimport {\n  type ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\";\n\nconst TINT_CLASSES = {\n  teal: \"bg-teal-50 text-teal-600 dark:bg-teal-950/40 dark:text-teal-300\",\n  orange:\n    \"bg-orange-50 text-orange-600 dark:bg-orange-950/40 dark:text-orange-300\",\n  yellow:\n    \"bg-yellow-50 text-yellow-600 dark:bg-yellow-950/40 dark:text-yellow-300\",\n  rose: \"bg-rose-50 text-rose-600 dark:bg-rose-950/40 dark:text-rose-300\",\n  blue: \"bg-blue-50 text-blue-600 dark:bg-blue-950/40 dark:text-blue-300\",\n  violet:\n    \"bg-violet-50 text-violet-600 dark:bg-violet-950/40 dark:text-violet-300\",\n} as const;\n\nexport type DashboardFinanceSeries = {\n  key: string;\n  label: string;\n  color?: string;\n};\n\nexport type DashboardFinanceKpi = {\n  label: string;\n  value: string;\n  icon: LucideIcon;\n  tint?: keyof typeof TINT_CLASSES;\n};\n\nexport type DashboardFinanceProps = {\n  title?: string;\n  subtitle?: string;\n  reportTitle?: string;\n  reportSubtitle?: string;\n  data: Record<string, string | number>[];\n  labelKey?: string;\n  series: DashboardFinanceSeries[];\n  kpis: DashboardFinanceKpi[];\n  ctaLabel?: string;\n  onCtaClick?: () => void;\n  className?: string;\n};\n\nexport function DashboardFinance({\n  title = \"Finance\",\n  subtitle,\n  reportTitle = \"Report\",\n  reportSubtitle,\n  data,\n  labelKey = \"month\",\n  series,\n  kpis,\n  ctaLabel = \"View Report\",\n  onCtaClick,\n  className,\n}: DashboardFinanceProps) {\n  const config = React.useMemo<ChartConfig>(\n    () =>\n      Object.fromEntries(\n        series.map((s, i) => [\n          s.key,\n          {\n            label: s.label,\n            color: s.color ?? `var(--chart-${(i % 5) + 1})`,\n          },\n        ])\n      ),\n    [series]\n  );\n\n  return (\n    <Card\n      className={cn(\n        \"grid grid-cols-1 gap-0 overflow-hidden p-0 sm:grid-cols-[1fr_240px]\",\n        className\n      )}\n    >\n      <div className=\"flex flex-col gap-4 p-6\">\n        <header className=\"flex items-start justify-between gap-2\">\n          <div className=\"space-y-0.5\">\n            <h3 className=\"font-semibold text-lg tracking-tight\">{title}</h3>\n            {subtitle ? (\n              <p className=\"text-muted-foreground text-sm\">{subtitle}</p>\n            ) : null}\n          </div>\n          <button\n            aria-label=\"More options\"\n            className=\"inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n            type=\"button\"\n          >\n            <MoreVertical className=\"size-4\" />\n          </button>\n        </header>\n        <ChartContainer className=\"aspect-[16/10] w-full\" config={config}>\n          <BarChart\n            accessibilityLayer\n            data={data}\n            margin={{ left: 0, right: 0, top: 8 }}\n          >\n            <CartesianGrid strokeDasharray=\"3 3\" vertical={false} />\n            <XAxis\n              axisLine={false}\n              dataKey={labelKey}\n              tickLine={false}\n              tickMargin={8}\n            />\n            <YAxis\n              axisLine={false}\n              tickLine={false}\n              tickMargin={8}\n              width={30}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent indicator=\"dot\" />}\n              cursor={false}\n            />\n            {series.map((s, i) => {\n              const isTop = i === series.length - 1;\n              return (\n                <Bar\n                  dataKey={s.key}\n                  fill={`var(--color-${s.key})`}\n                  key={s.key}\n                  radius={isTop ? [6, 6, 0, 0] : 0}\n                  stackId=\"a\"\n                />\n              );\n            })}\n          </BarChart>\n        </ChartContainer>\n      </div>\n\n      <div className=\"flex flex-col gap-5 border-t p-6 sm:border-t-0 sm:border-l\">\n        <header className=\"flex items-start justify-between gap-2\">\n          <div className=\"space-y-0.5\">\n            <h3 className=\"font-semibold text-lg tracking-tight\">\n              {reportTitle}\n            </h3>\n            {reportSubtitle ? (\n              <p className=\"text-muted-foreground text-sm\">{reportSubtitle}</p>\n            ) : null}\n          </div>\n          <button\n            aria-label=\"More options\"\n            className=\"inline-flex size-8 items-center justify-center rounded-full border text-muted-foreground transition-colors hover:text-foreground\"\n            type=\"button\"\n          >\n            <MoreVertical className=\"size-4\" />\n          </button>\n        </header>\n        <ul className=\"flex flex-col gap-4\">\n          {kpis.map((kpi) => (\n            <li className=\"flex items-center gap-3\" key={kpi.label}>\n              <div\n                className={cn(\n                  \"flex size-9 shrink-0 items-center justify-center rounded-lg\",\n                  TINT_CLASSES[kpi.tint ?? \"teal\"]\n                )}\n              >\n                <kpi.icon className=\"size-4\" />\n              </div>\n              <div className=\"flex flex-col leading-tight\">\n                <span className=\"text-muted-foreground text-xs\">\n                  {kpi.label}\n                </span>\n                <span className=\"font-medium text-sm tabular-nums\">\n                  {kpi.value}\n                </span>\n              </div>\n            </li>\n          ))}\n        </ul>\n        <Button className=\"mt-auto w-full\" onClick={onCtaClick}>\n          {ctaLabel}\n        </Button>\n      </div>\n    </Card>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "dashboard",
    "chart"
  ],
  "type": "registry:block"
}