{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "widget-5",
  "dependencies": [
    "lucide-react",
    "react-icons",
    "recharts"
  ],
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/widget-5.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  AreaChart,\n  Area,\n  XAxis,\n  YAxis,\n  Tooltip,\n  ResponsiveContainer,\n} from \"recharts\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  FaArrowTrendUp,\n  FaArrowTrendDown,\n  FaArrowRight,\n  FaChartLine,\n  FaSackDollar,\n} from \"react-icons/fa6\";\n\nexport type TimeRange = \"7d\" | \"14d\" | \"30d\";\n\nexport interface RevenueDataPoint {\n  label: string;\n  value: number;\n}\n\nexport interface RevenueStat {\n  id: string;\n  icon: React.ReactNode;\n  label: string;\n  value: string;\n}\n\nexport interface RevenueOverviewWidgetProps {\n  title?: string;\n  timeRanges?: TimeRange[];\n  defaultRange?: TimeRange;\n  datasets?: Record<TimeRange, RevenueDataPoint[]>;\n  stats?: Record<TimeRange, RevenueStat[]>;\n  metricLabel?: string;\n  metricValues?: Record<TimeRange, string>;\n  metricChanges?: Record<TimeRange, { value: string; positive: boolean }>;\n  ctaLabel?: string;\n  onCtaClick?: () => void;\n}\n\nconst defaultDatasets: Record<TimeRange, RevenueDataPoint[]> = {\n  \"7d\": [\n    { label: \"Mon\", value: 3100 },\n    { label: \"Tue\", value: 7200 },\n    { label: \"Wed\", value: 4400 },\n    { label: \"Thu\", value: 8600 },\n    { label: \"Fri\", value: 5100 },\n    { label: \"Sat\", value: 9300 },\n    { label: \"Sun\", value: 6800 },\n  ],\n  \"14d\": [\n    { label: \"Apr 25\", value: 3200 },\n    { label: \"Apr 26\", value: 7800 },\n    { label: \"Apr 27\", value: 4100 },\n    { label: \"Apr 28\", value: 8500 },\n    { label: \"Apr 29\", value: 5300 },\n    { label: \"Apr 30\", value: 9100 },\n    { label: \"May 1\", value: 4600 },\n    { label: \"May 2\", value: 7400 },\n    { label: \"May 3\", value: 5000 },\n    { label: \"May 4\", value: 9600 },\n    { label: \"May 5\", value: 6200 },\n    { label: \"May 6\", value: 8800 },\n    { label: \"May 7\", value: 5700 },\n    { label: \"May 8\", value: 10200 },\n  ],\n  \"30d\": [\n    { label: \"Apr 9\", value: 2800 },\n    { label: \"Apr 11\", value: 6500 },\n    { label: \"Apr 13\", value: 3400 },\n    { label: \"Apr 15\", value: 7900 },\n    { label: \"Apr 17\", value: 4200 },\n    { label: \"Apr 19\", value: 8700 },\n    { label: \"Apr 21\", value: 3800 },\n    { label: \"Apr 23\", value: 9200 },\n    { label: \"Apr 25\", value: 5100 },\n    { label: \"Apr 27\", value: 10400 },\n    { label: \"Apr 29\", value: 6000 },\n    { label: \"May 1\", value: 8100 },\n    { label: \"May 3\", value: 4700 },\n    { label: \"May 5\", value: 9800 },\n    { label: \"May 7\", value: 6500 },\n    { label: \"May 8\", value: 11200 },\n  ],\n};\n\nconst defaultStats: Record<TimeRange, RevenueStat[]> = {\n  \"7d\": [\n    {\n      id: \"avg\",\n      icon: <FaChartLine className=\"size-3.5\" />,\n      label: \"Avg. daily revenue\",\n      value: \"$6,214\",\n    },\n    {\n      id: \"top\",\n      icon: <FaSackDollar className=\"size-3.5\" />,\n      label: \"Top earning day\",\n      value: \"$8,100\",\n    },\n  ],\n  \"14d\": [\n    {\n      id: \"avg\",\n      icon: <FaChartLine className=\"size-3.5\" />,\n      label: \"Avg. daily revenue\",\n      value: \"$5,943\",\n    },\n    {\n      id: \"top\",\n      icon: <FaSackDollar className=\"size-3.5\" />,\n      label: \"Top earning day\",\n      value: \"$8,400\",\n    },\n  ],\n  \"30d\": [\n    {\n      id: \"avg\",\n      icon: <FaChartLine className=\"size-3.5\" />,\n      label: \"Avg. daily revenue\",\n      value: \"$5,581\",\n    },\n    {\n      id: \"top\",\n      icon: <FaSackDollar className=\"size-3.5\" />,\n      label: \"Top earning day\",\n      value: \"$8,400\",\n    },\n  ],\n};\n\nconst defaultMetricValues: Record<TimeRange, string> = {\n  \"7d\": \"$43,500\",\n  \"14d\": \"$84,200\",\n  \"30d\": \"$172,600\",\n};\n\nconst defaultMetricChanges: Record<\n  TimeRange,\n  { value: string; positive: boolean }\n> = {\n  \"7d\": { value: \"+8.4%\", positive: true },\n  \"14d\": { value: \"+14.2%\", positive: true },\n  \"30d\": { value: \"-3.1%\", positive: false },\n};\n\nfunction RevenueTooltip({\n  active,\n  payload,\n  label,\n}: {\n  // Typed locally: Recharts 3 no longer declares these on TooltipProps.\n  active?: boolean;\n  payload?: Array<{ value?: number }>;\n  label?: string | number;\n}) {\n  if (!active || !payload?.length) return null;\n\n  return (\n    <div className=\"bg-background/50 border-border/50 rounded-lg border px-2 py-2 shadow-sm backdrop-blur-2xl\">\n      <p className=\"text-muted-foreground text-xs\">{label}</p>\n      <p className=\"text-foreground text-sm font-medium tabular-nums\">\n        ${payload[0].value?.toLocaleString()}\n      </p>\n    </div>\n  );\n}\n\nexport function RevenueOverviewWidget({\n  timeRanges = [\"7d\", \"14d\", \"30d\"],\n  defaultRange = \"14d\",\n  datasets = defaultDatasets,\n  stats = defaultStats,\n  metricLabel = \"Total Revenue\",\n  metricValues = defaultMetricValues,\n  metricChanges = defaultMetricChanges,\n  ctaLabel = \"Full Report\",\n  onCtaClick,\n}: RevenueOverviewWidgetProps) {\n  const [activeRange, setActiveRange] = React.useState<TimeRange>(defaultRange);\n\n  const chartData = datasets[activeRange] ?? [];\n  const metricValue = metricValues[activeRange] ?? \"—\";\n  const metricChange = metricChanges[activeRange];\n  const activeStats = stats[activeRange] ?? [];\n\n  return (\n    <div className=\"bg-muted w-full max-w-sm rounded-[30px] p-2\">\n      <Card className=\"w-full rounded-3xl shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_2px_-1px_rgba(0,0,0,0.06),0px_2px_4px_0px_rgba(0,0,0,0.04)] ring-0\">\n        <CardContent className=\"flex flex-col gap-0\">\n          <div className=\"flex items-center justify-between\">\n            <p className=\"text-muted-foreground text-md font-medium\">\n              {metricLabel}\n            </p>\n\n            <div className=\"bg-muted flex items-center gap-0.5 rounded-full p-0.5\">\n              {timeRanges.map((range) => (\n                <button\n                  key={range}\n                  onClick={() => setActiveRange(range)}\n                  className={[\n                    \"rounded-full px-3 py-1 text-xs font-semibold transition-all duration-200\",\n                    activeRange === range\n                      ? \"bg-background text-foreground shadow-sm\"\n                      : \"text-muted-foreground hover:text-foreground\",\n                  ].join(\" \")}\n                >\n                  {range}\n                </button>\n              ))}\n            </div>\n          </div>\n\n          <div className=\"mt-2 flex items-end gap-3\">\n            <span className=\"text-foreground text-4xl leading-none font-bold tracking-tight tabular-nums\">\n              {metricValue}\n            </span>\n            {metricChange && (\n              <span\n                className={[\n                  \"mb-0.5 flex items-center gap-1 text-sm font-semibold\",\n                  metricChange.positive\n                    ? \"text-emerald-500\"\n                    : \"text-destructive\",\n                ].join(\" \")}\n              >\n                {metricChange.positive ? (\n                  <FaArrowTrendUp className=\"size-3.5\" />\n                ) : (\n                  <FaArrowTrendDown className=\"size-3.5\" />\n                )}\n                {metricChange.value}\n              </span>\n            )}\n          </div>\n\n          <div\n            className=\"mx-auto mt-3 h-36 w-full\"\n            style={{ width: \"calc(100% )\" }}\n          >\n            <ResponsiveContainer width=\"100%\" height=\"100%\">\n              <AreaChart\n                data={chartData}\n                margin={{ top: 4, right: 0, left: 0, bottom: 0 }}\n              >\n                <defs>\n                  <linearGradient id=\"revenueGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop\n                      offset=\"0%\"\n                      stopColor=\"var(--primary)\"\n                      stopOpacity={0.25}\n                    />\n                    <stop\n                      offset=\"100%\"\n                      stopColor=\"var(--primary)\"\n                      stopOpacity={0}\n                    />\n                  </linearGradient>\n                </defs>\n\n                <XAxis\n                  dataKey=\"label\"\n                  axisLine={false}\n                  tickLine={false}\n                  tick={{\n                    fill: \"var(--muted-foreground)\",\n                    fontSize: 10,\n                    fontWeight: 400,\n                  }}\n                  interval=\"preserveStartEnd\"\n                  padding={{ left: 4, right: 4 }}\n                />\n                <YAxis hide />\n                <Tooltip\n                  content={<RevenueTooltip />}\n                  cursor={{\n                    stroke: \"var(--border)\",\n                    strokeWidth: 1,\n                    strokeDasharray: \"3 3\",\n                  }}\n                />\n                <Area\n                  type=\"linear\"\n                  dataKey=\"value\"\n                  stroke=\"var(--primary)\"\n                  strokeWidth={2}\n                  fill=\"url(#revenueGrad)\"\n                  dot={false}\n                  activeDot={{\n                    r: 4,\n                    fill: \"var(--primary)\",\n                    strokeWidth: 2,\n                    stroke: \"var(--background)\",\n                  }}\n                />\n              </AreaChart>\n            </ResponsiveContainer>\n          </div>\n\n          <div className=\"mt-1 flex flex-col gap-2\">\n            {activeStats.map((stat) => (\n              <div key={stat.id} className=\"flex items-center justify-between\">\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-muted-foreground\">{stat.icon}</span>\n                  <span className=\"text-muted-foreground text-sm font-medium\">\n                    {stat.label}\n                  </span>\n                </div>\n                <span className=\"text-foreground text-sm font-semibold tabular-nums\">\n                  {stat.value}\n                </span>\n              </div>\n            ))}\n          </div>\n\n          <Button\n            variant=\"default\"\n            className=\"group mt-4 w-full gap-2 rounded-full font-semibold shadow-[inset_0_2px_4px_0_rgba(255,255,255,0.7),inset_0_-2px_4px_0_rgba(0,0,0,0.2),0px_4px_24px_0px_rgba(0,0,0,0.1),0px_2px_12px_0px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_-2px_4px_0_rgba(0,0,0,0.2),inset_0_2px_4px_0_rgba(255,255,255,0.5)]\"\n            onClick={onCtaClick}\n          >\n            {ctaLabel}\n            <FaArrowRight className=\"size-3.5 transition-transform duration-200 group-hover:translate-x-0.5\" />\n          </Button>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n\nexport default RevenueOverviewWidget;\n",
      "type": "registry:ui",
      "target": "components/ui/widget-5.tsx"
    }
  ],
  "type": "registry:ui"
}