{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "revenue-updates-chart",
  "type": "registry:component",
  "description": "A Chart component with optional code display for UI blocks.",
  "dependencies": [
    "@iconify/react"
  ],
  "registryDependencies": [
    "card",
    "button",
    "select"
  ],
  "files": [
    {
      "path": "src/app/components/ui-blocks/charts/code/RevenueUpdatesCode.tsx",
      "content": "\"use client\"\r\nimport { useState } from \"react\"\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\"\r\nimport dynamic from \"next/dynamic\";\r\nimport { Icon } from \"@iconify/react/dist/iconify.js\";\r\nimport { Card } from \"@/components/ui/card\";\r\nconst Chart = dynamic(() => import(\"react-apexcharts\"), { ssr: false });\r\n\r\nconst RevenueUpdate = () => {\r\n  const [selectedMonth, setSelectedMonth] = useState(\"Year 2025\");\r\n\r\n  // Chart data for each month\r\n  const chartDataByMonth: Record<string, any> = {\r\n    'Year 2025': {\r\n      series: [\r\n        { name: 'Earnings ', data: [1500, 2700, 2200, 3000, 1500, 1000, 1400] },\r\n        { name: 'Expense ', data: [-1800, -1100, -2500, -1500, -600, -1800, -1200] },\r\n      ],\r\n      xaxis: {\r\n        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],\r\n      },\r\n    },\r\n    'Year 2024': {\r\n      series: [\r\n        { name: 'Earnings ', data: [2000, 2500, 2800, 3000, 2000, 1500, 2700] },\r\n        { name: 'Expense ', data: [-1200, -1500, -2000, -1000, -800, -1300, -1500] },\r\n      ],\r\n      xaxis: {\r\n        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],\r\n      },\r\n    },\r\n    'Year 2023': {\r\n      series: [\r\n        { name: 'Earnings ', data: [1800, 2200, 2600, 3000, 1700, 1200, 2000] },\r\n        { name: 'Expense ', data: [-1500, -1300, -2200, -1200, -700, -1600, -1200] },\r\n      ],\r\n      xaxis: {\r\n        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],\r\n      },\r\n    },\r\n  };\r\n\r\n  // Base chart options (shared)\r\n  const baseChartOptions = {\r\n    chart: {\r\n      toolbar: { show: false },\r\n      type: 'bar' as const,\r\n      fontFamily: 'inherit',\r\n      foreColor: '#adb0bb',\r\n      height: 310,\r\n      stacked: true,\r\n      width: '100%',\r\n      offsetX: -20,\r\n      animations: {\r\n        enabled: true,\r\n        easing: 'easeinout' as const,\r\n        speed: 800,\r\n        animateGradually: {\r\n          enabled: true,\r\n          delay: 150,\r\n        },\r\n        dynamicAnimation: {\r\n          enabled: true,\r\n          speed: 800,\r\n        },\r\n      },\r\n    },\r\n    colors: ['var(--color-primary)', 'var(--color-secondary)'],\r\n    plotOptions: {\r\n      bar: {\r\n        horizontal: false,\r\n        barHeight: '60%',\r\n        columnWidth: '20%',\r\n        borderRadius: 6,\r\n        borderRadiusApplication: 'end',\r\n        borderRadiusWhenStacked: 'all',\r\n      } satisfies {\r\n        borderRadiusApplication?: 'end' | 'around';\r\n        borderRadiusWhenStacked?: 'all';\r\n        horizontal?: boolean;\r\n        barHeight?: string;\r\n        columnWidth?: string;\r\n        borderRadius?: number;\r\n      },\r\n    },\r\n    dataLabels: { enabled: false },\r\n    legend: { show: false },\r\n    grid: {\r\n      borderColor: 'rgba(0,0,0,0.1)',\r\n      strokeDashArray: 3,\r\n    },\r\n\r\n    yaxis: {\r\n      min: -3000,\r\n      max: 3000,\r\n      labels: {\r\n        formatter: (val: number) => {\r\n          return `${val / 1000}k`;\r\n        },\r\n      },\r\n    },\r\n    tooltip: {\r\n      theme: 'dark',\r\n      y: {\r\n        formatter: (val: number) => {\r\n          return `${(val / 1000).toFixed(1)}k`;\r\n        },\r\n      },\r\n    },\r\n  };\r\n\r\n  const ChartData = {\r\n    ...baseChartOptions,\r\n    xaxis: {\r\n      ...chartDataByMonth[selectedMonth].xaxis,\r\n      axisBorder: {\r\n        show: false,\r\n      },\r\n      axisTicks: {\r\n        show: false,\r\n      },\r\n    },\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Card>\r\n        <div className=\"h-full\">\r\n          <div className=\"sm:flex items-center justify-between mb-6\">\r\n            <div>\r\n              <h5 className=\"text-lg font-semibold text-dark dark:text-white\">Revenue Updates</h5>\r\n              <p className=\"text-sm\">Overview of profit</p>\r\n            </div>\r\n            <div className=\"sm:mt-0 mt-4\">\r\n              <Select value={selectedMonth} onValueChange={setSelectedMonth}>\r\n                <SelectTrigger>\r\n                  <SelectValue placeholder=\"Select a Year\" />\r\n                </SelectTrigger>\r\n                <SelectContent>\r\n                  <SelectGroup>\r\n                    <SelectItem value=\"Year 2025\">Year 2025</SelectItem>\r\n                    <SelectItem value=\"Year 2024\">Year 2024</SelectItem>\r\n                    <SelectItem value=\"Year 2023\">Year 2023</SelectItem>\r\n                  </SelectGroup>\r\n                </SelectContent>\r\n              </Select>\r\n            </div>\r\n          </div>\r\n          <div className=\"grid grid-cols-12 items-center gap-6\">\r\n            <div className=\"lg:col-span-8 md:col-span-8 sm:col-span-12 col-span-12\">\r\n              <div>\r\n                <Chart\r\n                  options={ChartData}\r\n                  series={chartDataByMonth[selectedMonth].series}\r\n                  type=\"bar\"\r\n                  height=\"330px\"\r\n                  width={\"100%\"}\r\n                />\r\n              </div>\r\n            </div>\r\n            <div className=\"lg:col-span-4 md:col-span-4 sm:col-span-12 col-span-12\">\r\n              <div className=\"flex items-center gap-4\">\r\n                <div className=\"bg-lightprimary dark:bg-darkprimary shrink-0 h-10 w-10 flex justify-center items-center rounded-md\">\r\n                  <Icon icon=\"tabler:grid-dots\" className=\"text-xl text-primary\" />\r\n                </div>\r\n                <div>\r\n                  <h4 className=\"text-2xl text-dark dark:text-white font-semibold\">\r\n                    $63,489.50\r\n                  </h4>\r\n                  <p className=\"text-sm\">Total Earnings</p>\r\n                </div>\r\n              </div>\r\n              <div className=\"flex items-baseline gap-3 pt-9\">\r\n                <i className=\"h-2 w-2 rounded-full bg-primary\" />\r\n                <div>\r\n                  <p className=\"text-sm\">Earnings this month</p>\r\n                  <h6 className=\"text-lg\">$48,820</h6>\r\n                </div>\r\n              </div>\r\n              <div className=\"flex items-baseline gap-3 pt-5\">\r\n                <i className=\"h-2 w-2  rounded-full bg-secondary\" />\r\n                <div>\r\n                  <p className=\"text-sm\">Expense this month</p>\r\n                  <h6 className=\"text-lg\">$26,498</h6>\r\n                </div>\r\n              </div>\r\n              <a href=\"/assets/revenue_expense_report.csv\" download >\r\n                <Button color=\"primary\" className=\"mt-7 rounded-md capitalize w-full\" >\r\n                  view full report\r\n                </Button>\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Card>\r\n    </>\r\n  )\r\n}\r\nexport default RevenueUpdate",
      "type": "registry:component",
      "target": "components/tailwind-admin/charts/revenue-updates-chart/RevenueUpdatesCode.tsx"
    }
  ]
}