{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "revenue-trends",
  "title": "Revenue Trends Chart",
  "description": "Displays monthly revenue trends by comparing profit and loss over time.",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/ui/revenue-trends.tsx",
      "content": "\"use client\";\r\nimport {\r\n  Bar,\r\n  BarChart,\r\n  ResponsiveContainer,\r\n  Tooltip,\r\n  TooltipContentProps,\r\n  XAxis,\r\n  YAxis,\r\n} from \"recharts\";\r\nimport { useTheme } from \"next-themes\";\r\n\r\nconst apiData = [\r\n  { month: \"Jan\", profit: 14000, loss: 22000 },\r\n  { month: \"Feb\", profit: 23000, loss: 17000 },\r\n  { month: \"Mar\", profit: 19000, loss: 14000 },\r\n  { month: \"Apr\", profit: 18000, loss: 20000 },\r\n  { month: \"May\", profit: 26000, loss: 17000 },\r\n  { month: \"Jun\", profit: 20000, loss: 27000 },\r\n  { month: \"Jul\", profit: 19000, loss: 21000 },\r\n  { month: \"Aug\", profit: 17000, loss: 14000 },\r\n];\r\n\r\nconst GAP = Math.max(\r\n  Math.max(...apiData.map((d) => d.profit + d.loss)) * 0.05,\r\n  5,\r\n);\r\n\r\nconst data = apiData.map((item) => ({\r\n  ...item,\r\n  gap: GAP,\r\n}));\r\n\r\nconst formatCurrency = (num: number) => {\r\n  return new Intl.NumberFormat(\"en-US\", {\r\n    notation: \"compact\",\r\n    maximumFractionDigits: 1,\r\n    style: \"currency\",\r\n    currency: \"USD\",\r\n  }).format(num);\r\n};\r\n\r\nexport const RevenueTrends = () => {\r\n  const { resolvedTheme } = useTheme();\r\n  const isDark = resolvedTheme === \"dark\";\r\n  return (\r\n    <div className=\"h-80 w-[340px] md:w-96 border border-neutral-200/70 dark:border-neutral-800 rounded-xl shadow-xs flex flex-col gap-4 p-4 bg-white dark:bg-neutral-950\">\r\n      <div className=\"flex flex-col gap-1\">\r\n        <span className=\"text-lg font-semibold text-primary\">Total Income</span>\r\n        <p className=\"text-xs text-muted-foreground\">\r\n          View your income in a certain period of time\r\n        </p>\r\n      </div>\r\n      <div className=\"p-4 bg-[#F6F6F6] dark:bg-neutral-900 flex-1 rounded-xl flex flex-col gap-3\">\r\n        <div className=\"flex justify-between\">\r\n          <span className=\"text-xs font-medium\">Profit and Loss</span>\r\n          <div className=\"flex gap-3 text-xs font-medium\">\r\n            <span className=\"flex gap-2 items-center\">\r\n              <span className=\"w-2.5 h-2.5 rounded-[2.8px] bg-[#FF5A5A] block\" />\r\n              Profit\r\n            </span>\r\n            <span className=\"flex gap-2 items-center\">\r\n              <span className=\"w-2.5 h-2.5 rounded-[2.8px] bg-[#262626] dark:bg-[#E5E5E5] block\" />\r\n              Loss\r\n            </span>\r\n          </div>\r\n        </div>\r\n        <div className=\"flex-1\">\r\n          <ResponsiveContainer width=\"100%\" height=\"100%\">\r\n            <BarChart data={data}>\r\n              <XAxis\r\n                dataKey=\"month\"\r\n                tick={{\r\n                  fontSize: 11,\r\n                  letterSpacing: \"0.07em\",\r\n                  fill: isDark ? \"#E5E7EB\" : \"#6B7280\",\r\n                }}\r\n                axisLine={false}\r\n                tickMargin={8}\r\n                tickLine={false}\r\n              />\r\n\r\n              <Bar\r\n                dataKey=\"loss\"\r\n                stackId=\"a\"\r\n                fill={isDark ? \"#E5E5E5\" : \"#262626\"}\r\n                radius={[6, 6, 6, 6]}\r\n              />\r\n              <Bar dataKey=\"gap\" stackId=\"a\" fill=\"transparent\" />\r\n              <Bar\r\n                dataKey=\"profit\"\r\n                stackId=\"a\"\r\n                fill=\"url(#profitStripes)\"\r\n                radius={[6, 6, 6, 6]}\r\n              />\r\n              <Tooltip content={CustomTooltip} cursor={false} />\r\n              <defs>\r\n                <pattern\r\n                  id=\"profitStripes\"\r\n                  patternUnits=\"userSpaceOnUse\"\r\n                  width=\"5\"\r\n                  height=\"5\"\r\n                  patternTransform=\"rotate(45)\"\r\n                >\r\n                  <rect width=\"5\" height=\"5\" fill=\"#FF5A5A\" />\r\n                  <line\r\n                    x1=\"0\"\r\n                    y=\"0\"\r\n                    x2=\"0\"\r\n                    y2=\"5\"\r\n                    stroke=\"rgba(255, 255, 255, 0.678)\"\r\n                    strokeWidth=\"1\"\r\n                  />\r\n                </pattern>\r\n              </defs>\r\n            </BarChart>\r\n          </ResponsiveContainer>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nconst CustomTooltip = ({ active, payload, label }: TooltipContentProps) => {\r\n  if (!active || !payload) return null;\r\n\r\n  const profit = Number(payload.find((p) => p.dataKey === \"profit\")?.value);\r\n  const loss = Number(payload.find((p) => p.dataKey === \"loss\")?.value);\r\n\r\n  return (\r\n    <div className=\"px-2 py-1.5 rounded-md bg-[#F6F6F6] dark:bg-neutral-900 text-black dark:text-white text-xs flex flex-col gap-1 shadow-md border border-white dark:border-neutral-800\">\r\n      {/* Month */}\r\n      <span className=\"text-neutral-800 dark:text-neutral-300 font-semibold\">\r\n        {label}\r\n      </span>\r\n\r\n      {/* Profit */}\r\n      <div className=\"flex justify-between items-center gap-6\">\r\n        <span className=\"flex gap-2 items-center\">\r\n          <span className=\"w-2.5 h-2.5 rounded-[2.8px] bg-[#FF5A5A]\" />\r\n          Profit\r\n        </span>\r\n        <span className=\"font-semibold\">{formatCurrency(profit)}</span>\r\n      </div>\r\n\r\n      {/* Loss */}\r\n      <div className=\"flex justify-between items-center gap-6\">\r\n        <span className=\"flex gap-2 items-center\">\r\n          <span className=\"w-2.5 h-2.5 rounded-[2.8px] bg-[#262626] dark:bg-[#E5E5E5]\" />\r\n          Loss\r\n        </span>\r\n        <span className=\"font-semibold\">{formatCurrency(loss)}</span>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}