@mdxui/tremor 6.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +255 -0
- package/dist/dashboard/components/index.d.ts +355 -0
- package/dist/dashboard/components/index.js +549 -0
- package/dist/dashboard/components/index.js.map +1 -0
- package/dist/dashboard/index.d.ts +275 -0
- package/dist/dashboard/index.js +1062 -0
- package/dist/dashboard/index.js.map +1 -0
- package/dist/database/index.d.ts +334 -0
- package/dist/database/index.js +474 -0
- package/dist/database/index.js.map +1 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.js +1089 -0
- package/dist/index.js.map +1 -0
- package/dist/insights/components/index.d.ts +362 -0
- package/dist/insights/components/index.js +1397 -0
- package/dist/insights/components/index.js.map +1 -0
- package/dist/insights/index.d.ts +360 -0
- package/dist/insights/index.js +1815 -0
- package/dist/insights/index.js.map +1 -0
- package/dist/overview/components/index.d.ts +86 -0
- package/dist/overview/components/index.js +775 -0
- package/dist/overview/components/index.js.map +1 -0
- package/dist/overview/index.d.ts +301 -0
- package/dist/overview/index.js +1077 -0
- package/dist/overview/index.js.map +1 -0
- package/dist/shared/index.d.ts +296 -0
- package/dist/shared/index.js +395 -0
- package/dist/shared/index.js.map +1 -0
- package/dist/solar/components/index.d.ts +341 -0
- package/dist/solar/components/index.js +831 -0
- package/dist/solar/components/index.js.map +1 -0
- package/dist/solar/index.d.ts +301 -0
- package/dist/solar/index.js +1130 -0
- package/dist/solar/index.js.map +1 -0
- package/package.json +135 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/insights/components/charts/area-chart.tsx","../../../src/insights/components/charts/bar-chart.tsx","../../../src/insights/components/charts/bar-chart-variant.tsx","../../../src/insights/components/charts/donut-chart.tsx","../../../src/insights/components/charts/transaction-chart.tsx","../../../src/insights/components/kpi/kpi-card.tsx","../../../src/insights/components/tables/transactions-table.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n\tArea,\n\tCartesianGrid,\n\tAreaChart as RechartsAreaChart,\n\tLegend as RechartsLegend,\n\tResponsiveContainer,\n\tTooltip,\n\tXAxis,\n\tYAxis,\n} from \"recharts\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * AreaChart Props - Compatible with mdxui TremorAreaChartProps\n * All properties with defaults are optional for consumers\n */\nexport interface AreaChartProps {\n\t/** Chart data array */\n\tdata: Record<string, unknown>[];\n\t/** Data key for x-axis (index) */\n\tindex: string;\n\t/** Data keys for y-axis values */\n\tcategories: string[];\n\t/** Color for each category */\n\tcolors?: string[];\n\t/** Function to format numeric values for display */\n\tvalueFormatter?: (value: number) => string;\n\t/** Show only first/last x-axis labels */\n\tstartEndOnly?: boolean;\n\t/** Display chart legend */\n\tshowLegend?: boolean;\n\t/** Display grid lines */\n\tshowGridLines?: boolean;\n\t/** Enable animation */\n\tshowAnimation?: boolean;\n\t/** Stack areas */\n\tstack?: boolean;\n\t/** Curve type for the area line */\n\tcurveType?: \"linear\" | \"monotone\" | \"step\";\n\t/** Connect data points across null values */\n\tconnectNulls?: boolean;\n\t/** Y-axis label width */\n\tyAxisWidth?: number;\n\t/** Y-axis minimum */\n\tminValue?: number;\n\t/** Y-axis maximum */\n\tmaxValue?: number;\n\t/** Custom className */\n\tclassName?: string;\n}\n\n/**\n * Color palette for charts - maps semantic names to Tailwind classes\n */\nconst chartColors: Record<string, string> = {\n\tblue: \"#3b82f6\",\n\tgreen: \"#22c55e\",\n\tred: \"#ef4444\",\n\tyellow: \"#eab308\",\n\tpurple: \"#a855f7\",\n\tcyan: \"#06b6d4\",\n\torange: \"#f97316\",\n\tpink: \"#ec4899\",\n\tindigo: \"#6366f1\",\n\tteal: \"#14b8a6\",\n\temerald: \"#10b981\",\n\tgray: \"#6b7280\",\n};\n\nfunction getColor(color: string, index: number): string {\n\tif (chartColors[color]) return chartColors[color];\n\t// Default color palette for unspecified colors\n\tconst defaultColors = Object.values(chartColors);\n\treturn defaultColors[index % defaultColors.length];\n}\n\n/**\n * AreaChart - Tremor-style area chart adapter implementing mdxui TremorAreaChartProps\n *\n * Wraps Recharts AreaChart with mdxui-compliant props interface.\n *\n * @example\n * ```tsx\n * <AreaChart\n * data={[\n * { date: '2024-01', revenue: 100 },\n * { date: '2024-02', revenue: 150 },\n * ]}\n * index=\"date\"\n * categories={['revenue']}\n * />\n * ```\n */\nexport const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(\n\t(\n\t\t{\n\t\t\tdata,\n\t\t\tindex,\n\t\t\tcategories,\n\t\t\tcolors,\n\t\t\tvalueFormatter,\n\t\t\tstartEndOnly = false,\n\t\t\tshowLegend = true,\n\t\t\tshowGridLines = true,\n\t\t\tshowAnimation = true,\n\t\t\tstack = false,\n\t\t\tcurveType = \"monotone\",\n\t\t\tconnectNulls = false,\n\t\t\tyAxisWidth = 56,\n\t\t\tminValue,\n\t\t\tmaxValue,\n\t\t\tclassName,\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst formatValue = valueFormatter || ((value: number) => value.toString());\n\n\t\treturn (\n\t\t\t<div ref={ref} className={twMerge(\"h-80 w-full\", className)}>\n\t\t\t\t<ResponsiveContainer width=\"100%\" height=\"100%\">\n\t\t\t\t\t<RechartsAreaChart\n\t\t\t\t\t\tdata={data as Record<string, unknown>[]}\n\t\t\t\t\t\tmargin={{ top: 10, right: 30, left: 0, bottom: 0 }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{showGridLines && (\n\t\t\t\t\t\t\t<CartesianGrid\n\t\t\t\t\t\t\t\tstrokeDasharray=\"3 3\"\n\t\t\t\t\t\t\t\tclassName=\"stroke-gray-200 dark:stroke-gray-800\"\n\t\t\t\t\t\t\t\thorizontal={true}\n\t\t\t\t\t\t\t\tvertical={false}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<XAxis\n\t\t\t\t\t\t\tdataKey={index}\n\t\t\t\t\t\t\ttick={{ fontSize: 12 }}\n\t\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\t\taxisLine={false}\n\t\t\t\t\t\t\tclassName=\"fill-gray-500 text-xs\"\n\t\t\t\t\t\t\ttickFormatter={startEndOnly ? undefined : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<YAxis\n\t\t\t\t\t\t\twidth={yAxisWidth}\n\t\t\t\t\t\t\ttick={{ fontSize: 12 }}\n\t\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\t\taxisLine={false}\n\t\t\t\t\t\t\ttickFormatter={formatValue}\n\t\t\t\t\t\t\tclassName=\"fill-gray-500 text-xs\"\n\t\t\t\t\t\t\tdomain={[minValue ?? \"auto\", maxValue ?? \"auto\"]}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\tformatter={(value, name) => {\n\t\t\t\t\t\t\t\tconst numValue = typeof value === \"number\" ? value : 0;\n\t\t\t\t\t\t\t\treturn [formatValue(numValue), String(name)];\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tcontentStyle={{\n\t\t\t\t\t\t\t\tbackgroundColor: \"white\",\n\t\t\t\t\t\t\t\tborder: \"1px solid #e5e7eb\",\n\t\t\t\t\t\t\t\tborderRadius: \"6px\",\n\t\t\t\t\t\t\t\tboxShadow: \"0 4px 6px -1px rgb(0 0 0 / 0.1)\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{showLegend && <RechartsLegend verticalAlign=\"top\" height={36} />}\n\t\t\t\t\t\t{categories.map((category, idx) => {\n\t\t\t\t\t\t\tconst color = colors?.[idx] || category;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Area\n\t\t\t\t\t\t\t\t\tkey={category}\n\t\t\t\t\t\t\t\t\ttype={curveType}\n\t\t\t\t\t\t\t\t\tdataKey={category}\n\t\t\t\t\t\t\t\t\tstroke={getColor(color, idx)}\n\t\t\t\t\t\t\t\t\tfill={getColor(color, idx)}\n\t\t\t\t\t\t\t\t\tfillOpacity={0.3}\n\t\t\t\t\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t\t\t\t\t\tstackId={stack ? \"stack\" : undefined}\n\t\t\t\t\t\t\t\t\tisAnimationActive={showAnimation}\n\t\t\t\t\t\t\t\t\tconnectNulls={connectNulls}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</RechartsAreaChart>\n\t\t\t\t</ResponsiveContainer>\n\t\t\t</div>\n\t\t);\n\t},\n);\n\nAreaChart.displayName = \"AreaChart\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport {\n\tBar,\n\tCartesianGrid,\n\tBarChart as RechartsBarChart,\n\tLegend as RechartsLegend,\n\tResponsiveContainer,\n\tTooltip,\n\tXAxis,\n\tYAxis,\n} from \"recharts\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * BarChart Props - Compatible with mdxui TremorBarChartProps\n * All properties with defaults are optional for consumers\n */\nexport interface BarChartProps {\n\t/** Chart data array */\n\tdata: Record<string, unknown>[];\n\t/** Data key for x-axis (index) */\n\tindex: string;\n\t/** Data keys for bar values */\n\tcategories: string[];\n\t/** Colors for each category */\n\tcolors?: string[];\n\t/** Function to format numeric values for display */\n\tvalueFormatter?: (value: number) => string;\n\t/** Bar chart layout direction */\n\tlayout?: \"vertical\" | \"horizontal\";\n\t/** Stack bars */\n\tstack?: boolean;\n\t/** Show as 100% stacked */\n\trelative?: boolean;\n\t/** Display chart legend */\n\tshowLegend?: boolean;\n\t/** Display grid lines */\n\tshowGridLines?: boolean;\n\t/** Enable animation */\n\tshowAnimation?: boolean;\n\t/** Y-axis label width */\n\tyAxisWidth?: number;\n\t/** Gap between bar groups */\n\tbarCategoryGap?: string | number;\n\t/** Custom className */\n\tclassName?: string;\n}\n\n/**\n * Color palette for charts - maps semantic names to Tailwind classes\n */\nconst chartColors: Record<string, string> = {\n\tblue: \"#3b82f6\",\n\tgreen: \"#22c55e\",\n\tred: \"#ef4444\",\n\tyellow: \"#eab308\",\n\tpurple: \"#a855f7\",\n\tcyan: \"#06b6d4\",\n\torange: \"#f97316\",\n\tpink: \"#ec4899\",\n\tindigo: \"#6366f1\",\n\tteal: \"#14b8a6\",\n\temerald: \"#10b981\",\n\tgray: \"#6b7280\",\n};\n\nfunction getColor(color: string, index: number): string {\n\tif (chartColors[color]) return chartColors[color];\n\t// Default color palette for unspecified colors\n\tconst defaultColors = Object.values(chartColors);\n\treturn defaultColors[index % defaultColors.length];\n}\n\n/**\n * BarChart - Tremor-style bar chart adapter implementing mdxui TremorBarChartProps\n *\n * Wraps Recharts BarChart with mdxui-compliant props interface.\n *\n * @example\n * ```tsx\n * <BarChart\n * data={[\n * { category: 'A', value: 100 },\n * { category: 'B', value: 150 },\n * ]}\n * index=\"category\"\n * categories={['value']}\n * />\n * ```\n */\nexport const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(\n\t(\n\t\t{\n\t\t\tdata,\n\t\t\tindex,\n\t\t\tcategories,\n\t\t\tcolors,\n\t\t\tvalueFormatter,\n\t\t\tlayout = \"vertical\",\n\t\t\tstack = false,\n\t\t\trelative = false,\n\t\t\tshowLegend = true,\n\t\t\tshowGridLines = true,\n\t\t\tshowAnimation = true,\n\t\t\tyAxisWidth = 56,\n\t\t\tbarCategoryGap,\n\t\t\tclassName,\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst formatValue = valueFormatter || ((value: number) => value.toString());\n\n\t\t// Recharts uses 'horizontal' layout for what Tremor calls 'vertical' bars\n\t\t// and 'vertical' layout for horizontal bars\n\t\tconst rechartsLayout = layout === \"horizontal\" ? \"vertical\" : \"horizontal\";\n\n\t\treturn (\n\t\t\t<div ref={ref} className={twMerge(\"h-80 w-full\", className)}>\n\t\t\t\t<ResponsiveContainer width=\"100%\" height=\"100%\">\n\t\t\t\t\t<RechartsBarChart\n\t\t\t\t\t\tdata={data as Record<string, unknown>[]}\n\t\t\t\t\t\tlayout={rechartsLayout}\n\t\t\t\t\t\tmargin={{ top: 10, right: 30, left: 0, bottom: 0 }}\n\t\t\t\t\t\tbarCategoryGap={barCategoryGap}\n\t\t\t\t\t\tstackOffset={relative ? \"expand\" : undefined}\n\t\t\t\t\t>\n\t\t\t\t\t\t{showGridLines && (\n\t\t\t\t\t\t\t<CartesianGrid\n\t\t\t\t\t\t\t\tstrokeDasharray=\"3 3\"\n\t\t\t\t\t\t\t\tclassName=\"stroke-gray-200 dark:stroke-gray-800\"\n\t\t\t\t\t\t\t\thorizontal={rechartsLayout !== \"vertical\"}\n\t\t\t\t\t\t\t\tvertical={rechartsLayout === \"vertical\"}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{rechartsLayout === \"horizontal\" ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<XAxis\n\t\t\t\t\t\t\t\t\tdataKey={index}\n\t\t\t\t\t\t\t\t\ttick={{ fontSize: 12 }}\n\t\t\t\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\t\t\t\taxisLine={false}\n\t\t\t\t\t\t\t\t\tclassName=\"fill-gray-500 text-xs\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<YAxis\n\t\t\t\t\t\t\t\t\twidth={yAxisWidth}\n\t\t\t\t\t\t\t\t\ttick={{ fontSize: 12 }}\n\t\t\t\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\t\t\t\taxisLine={false}\n\t\t\t\t\t\t\t\t\ttickFormatter={\n\t\t\t\t\t\t\t\t\t\trelative\n\t\t\t\t\t\t\t\t\t\t\t? (value) => `${(value * 100).toFixed(0)}%`\n\t\t\t\t\t\t\t\t\t\t\t: formatValue\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tclassName=\"fill-gray-500 text-xs\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<XAxis\n\t\t\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\t\t\ttick={{ fontSize: 12 }}\n\t\t\t\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\t\t\t\taxisLine={false}\n\t\t\t\t\t\t\t\t\ttickFormatter={\n\t\t\t\t\t\t\t\t\t\trelative\n\t\t\t\t\t\t\t\t\t\t\t? (value) => `${(value * 100).toFixed(0)}%`\n\t\t\t\t\t\t\t\t\t\t\t: formatValue\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tclassName=\"fill-gray-500 text-xs\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<YAxis\n\t\t\t\t\t\t\t\t\ttype=\"category\"\n\t\t\t\t\t\t\t\t\tdataKey={index}\n\t\t\t\t\t\t\t\t\twidth={yAxisWidth}\n\t\t\t\t\t\t\t\t\ttick={{ fontSize: 12 }}\n\t\t\t\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\t\t\t\taxisLine={false}\n\t\t\t\t\t\t\t\t\tclassName=\"fill-gray-500 text-xs\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\tformatter={(value, name) => {\n\t\t\t\t\t\t\t\tconst numValue = typeof value === \"number\" ? value : 0;\n\t\t\t\t\t\t\t\treturn [\n\t\t\t\t\t\t\t\t\trelative\n\t\t\t\t\t\t\t\t\t\t? `${(numValue * 100).toFixed(1)}%`\n\t\t\t\t\t\t\t\t\t\t: formatValue(numValue),\n\t\t\t\t\t\t\t\t\tString(name),\n\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tcontentStyle={{\n\t\t\t\t\t\t\t\tbackgroundColor: \"white\",\n\t\t\t\t\t\t\t\tborder: \"1px solid #e5e7eb\",\n\t\t\t\t\t\t\t\tborderRadius: \"6px\",\n\t\t\t\t\t\t\t\tboxShadow: \"0 4px 6px -1px rgb(0 0 0 / 0.1)\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{showLegend && <RechartsLegend verticalAlign=\"top\" height={36} />}\n\t\t\t\t\t\t{categories.map((category, idx) => {\n\t\t\t\t\t\t\tconst color = colors?.[idx] || category;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Bar\n\t\t\t\t\t\t\t\t\tkey={category}\n\t\t\t\t\t\t\t\t\tdataKey={category}\n\t\t\t\t\t\t\t\t\tfill={getColor(color, idx)}\n\t\t\t\t\t\t\t\t\tstackId={stack || relative ? \"stack\" : undefined}\n\t\t\t\t\t\t\t\t\tisAnimationActive={showAnimation}\n\t\t\t\t\t\t\t\t\tradius={[4, 4, 0, 0]}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</RechartsBarChart>\n\t\t\t\t</ResponsiveContainer>\n\t\t\t</div>\n\t\t);\n\t},\n);\n\nBarChart.displayName = \"BarChart\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport {\n\tBar,\n\tCartesianGrid,\n\tLabel,\n\tBarChart as RechartsBarChart,\n\tLegend as RechartsLegend,\n\tResponsiveContainer,\n\tTooltip,\n\tXAxis,\n\tYAxis,\n} from \"recharts\";\nimport { twMerge } from \"tailwind-merge\";\n\n// Define a simpler domain type to avoid recharts type conflicts\ntype SimpleDomain = [number | \"auto\", number | \"auto\"];\n\n/**\n * Color palette for charts\n */\nconst chartColors: Record<string, { fill: string; stroke: string }> = {\n\tblue: { fill: \"#3b82f6\", stroke: \"#2563eb\" },\n\temerald: { fill: \"#10b981\", stroke: \"#059669\" },\n\tviolet: { fill: \"#8b5cf6\", stroke: \"#7c3aed\" },\n\tamber: { fill: \"#f59e0b\", stroke: \"#d97706\" },\n\tgray: { fill: \"#6b7280\", stroke: \"#4b5563\" },\n\tcyan: { fill: \"#06b6d4\", stroke: \"#0891b2\" },\n\tpink: { fill: \"#ec4899\", stroke: \"#db2777\" },\n\tlime: { fill: \"#84cc16\", stroke: \"#65a30d\" },\n\tfuchsia: { fill: \"#d946ef\", stroke: \"#c026d3\" },\n\torange: { fill: \"#f97316\", stroke: \"#ea580c\" },\n};\n\nfunction getColor(\n\tcolor: string,\n\tindex: number,\n): { fill: string; stroke: string } {\n\tif (chartColors[color]) return chartColors[color];\n\tconst defaultColors = Object.values(chartColors);\n\treturn defaultColors[index % defaultColors.length];\n}\n\n/**\n * Custom bar shape with colored top line\n */\nconst renderShape = (\n\tprops: Record<string, unknown>,\n\tactiveBar: Record<string, unknown> | undefined,\n\tactiveLegend: string | undefined,\n\tstrokeColor: string,\n\tlayout: string,\n) => {\n\tconst { name, payload, value } = props as {\n\t\tname: string;\n\t\tpayload: Record<string, unknown>;\n\t\tvalue: number;\n\t};\n\tlet { x, width, y, height } = props as {\n\t\tx: number;\n\t\twidth: number;\n\t\ty: number;\n\t\theight: number;\n\t};\n\tlet lineX1: number, lineY1: number, lineX2: number, lineY2: number;\n\n\tif (layout === \"horizontal\" && height < 0) {\n\t\ty += height;\n\t\theight = Math.abs(height);\n\t} else if (layout === \"vertical\" && width < 0) {\n\t\tx += width;\n\t\twidth = Math.abs(width);\n\t}\n\n\tif (layout === \"horizontal\") {\n\t\tlineX1 = x;\n\t\tlineY1 = y;\n\t\tlineX2 = x + width;\n\t\tlineY2 = y;\n\t} else {\n\t\tlineX1 = x + width;\n\t\tlineY1 = y;\n\t\tlineX2 = x + width;\n\t\tlineY2 = y + height;\n\t}\n\n\tconst isActive =\n\t\tactiveBar &&\n\t\tactiveBar.value === value &&\n\t\tJSON.stringify(activeBar.payload) === JSON.stringify(payload);\n\n\tconst opacity =\n\t\tactiveBar || (activeLegend && activeLegend !== name)\n\t\t\t? isActive\n\t\t\t\t? 0.2\n\t\t\t\t: 0.1\n\t\t\t: 0.2;\n\n\tconst lineOpacity =\n\t\tactiveBar || (activeLegend && activeLegend !== name)\n\t\t\t? isActive\n\t\t\t\t? 1\n\t\t\t\t: 0.5\n\t\t\t: 1;\n\n\treturn (\n\t\t<g>\n\t\t\t<rect\n\t\t\t\tx={x}\n\t\t\t\ty={y}\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\topacity={opacity}\n\t\t\t/>\n\t\t\t<line\n\t\t\t\tx1={lineX1}\n\t\t\t\ty1={lineY1}\n\t\t\t\tx2={lineX2}\n\t\t\t\ty2={lineY2}\n\t\t\t\tstroke={strokeColor}\n\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\topacity={lineOpacity}\n\t\t\t/>\n\t\t</g>\n\t);\n};\n\nexport interface BarChartVariantProps\n\textends React.HTMLAttributes<HTMLDivElement> {\n\t/** Chart data */\n\tdata: Record<string, unknown>[];\n\t/** X-axis data key */\n\tindex: string;\n\t/** Categories (series) */\n\tcategories: string[];\n\t/** Colors for each category */\n\tcolors?: string[];\n\t/** Value formatter */\n\tvalueFormatter?: (value: number) => string;\n\t/** X-axis value formatter */\n\txValueFormatter?: (value: string) => string;\n\t/** Show X axis */\n\tshowXAxis?: boolean;\n\t/** Show Y axis */\n\tshowYAxis?: boolean;\n\t/** Show grid lines */\n\tshowGridLines?: boolean;\n\t/** Y axis width */\n\tyAxisWidth?: number;\n\t/** Show tooltip */\n\tshowTooltip?: boolean;\n\t/** Show legend */\n\tshowLegend?: boolean;\n\t/** Auto min value */\n\tautoMinValue?: boolean;\n\t/** Min value */\n\tminValue?: number;\n\t/** Max value */\n\tmaxValue?: number;\n\t/** Allow decimals */\n\tallowDecimals?: boolean;\n\t/** Bar category gap */\n\tbarCategoryGap?: string | number;\n\t/** X axis label */\n\txAxisLabel?: string;\n\t/** Y axis label */\n\tyAxisLabel?: string;\n\t/** Chart type */\n\ttype?: \"default\" | \"stacked\" | \"percent\";\n\t/** Legend position */\n\tlegendPosition?: \"left\" | \"center\" | \"right\";\n\t/** Layout direction */\n\tlayout?: \"vertical\" | \"horizontal\";\n\t/** Value change handler */\n\tonValueChange?: (value: Record<string, unknown> | null) => void;\n\t/** Sync ID for multiple charts */\n\tsyncId?: string;\n}\n\nexport const BarChartVariant = React.forwardRef<\n\tHTMLDivElement,\n\tBarChartVariantProps\n>((props, forwardedRef) => {\n\tconst {\n\t\tdata = [],\n\t\tcategories = [],\n\t\tindex,\n\t\tcolors = [\"blue\", \"emerald\", \"violet\", \"amber\"],\n\t\tvalueFormatter = (value: number) => value.toString(),\n\t\txValueFormatter = (value: string) => value.toString(),\n\t\tshowXAxis = true,\n\t\tshowYAxis = true,\n\t\tshowGridLines = true,\n\t\tyAxisWidth = 56,\n\t\tshowTooltip = true,\n\t\tshowLegend = true,\n\t\tautoMinValue = false,\n\t\tminValue,\n\t\tmaxValue,\n\t\tallowDecimals = true,\n\t\tbarCategoryGap = \"2%\",\n\t\txAxisLabel,\n\t\tyAxisLabel,\n\t\ttype = \"default\",\n\t\tlegendPosition = \"right\",\n\t\tlayout = \"horizontal\",\n\t\tclassName,\n\t\tonValueChange,\n\t\tsyncId,\n\t\t...other\n\t} = props;\n\n\tconst [legendHeight] = React.useState(60);\n\tconst [activeLegend, setActiveLegend] = React.useState<string | undefined>(\n\t\tundefined,\n\t);\n\tconst [activeBar, setActiveBar] = React.useState<\n\t\tRecord<string, unknown> | undefined\n\t>(undefined);\n\n\tconst stacked = type === \"stacked\" || type === \"percent\";\n\n\tconst getYAxisDomain = (): SimpleDomain => {\n\t\tconst min: number | \"auto\" = autoMinValue ? \"auto\" : (minValue ?? 0);\n\t\tconst max: number | \"auto\" = maxValue ?? \"auto\";\n\t\treturn [min, max];\n\t};\n\n\tconst yAxisDomain = getYAxisDomain();\n\n\tfunction valueToPercent(value: number) {\n\t\treturn `${(value * 100).toFixed(0)}%`;\n\t}\n\n\tfunction onBarClick(barData: Record<string, unknown>) {\n\t\tif (!onValueChange) return;\n\t\tif (activeBar && JSON.stringify(activeBar) === JSON.stringify(barData)) {\n\t\t\tsetActiveLegend(undefined);\n\t\t\tsetActiveBar(undefined);\n\t\t\tonValueChange(null);\n\t\t} else {\n\t\t\tsetActiveBar(barData);\n\t\t\tonValueChange(barData);\n\t\t}\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={forwardedRef}\n\t\t\tclassName={twMerge(\"h-80 w-full\", className)}\n\t\t\t{...other}\n\t\t>\n\t\t\t<ResponsiveContainer>\n\t\t\t\t<RechartsBarChart\n\t\t\t\t\tdata={data}\n\t\t\t\t\tmargin={{\n\t\t\t\t\t\tbottom: xAxisLabel ? 30 : undefined,\n\t\t\t\t\t\tleft: yAxisLabel ? 20 : undefined,\n\t\t\t\t\t\tright: yAxisLabel ? 5 : undefined,\n\t\t\t\t\t\ttop: 10,\n\t\t\t\t\t}}\n\t\t\t\t\tstackOffset={type === \"percent\" ? \"expand\" : undefined}\n\t\t\t\t\tlayout={layout}\n\t\t\t\t\tbarCategoryGap={barCategoryGap}\n\t\t\t\t\tsyncId={syncId}\n\t\t\t\t>\n\t\t\t\t\t{showGridLines && (\n\t\t\t\t\t\t<CartesianGrid\n\t\t\t\t\t\t\tclassName=\"stroke-gray-100 stroke-1 dark:stroke-gray-900\"\n\t\t\t\t\t\t\thorizontal={layout !== \"vertical\"}\n\t\t\t\t\t\t\tvertical={layout === \"vertical\"}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<XAxis\n\t\t\t\t\t\thide={!showXAxis}\n\t\t\t\t\t\ttick={{\n\t\t\t\t\t\t\ttransform: layout !== \"vertical\" ? \"translate(0, 6)\" : undefined,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tfill=\"\"\n\t\t\t\t\t\tstroke=\"\"\n\t\t\t\t\t\tclassName=\"text-xs fill-gray-500 dark:fill-gray-500\"\n\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\taxisLine={false}\n\t\t\t\t\t\tminTickGap={5}\n\t\t\t\t\t\ttickFormatter={xValueFormatter}\n\t\t\t\t\t\t{...(layout !== \"vertical\"\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tdataKey: index,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\ttype: \"number\" as const,\n\t\t\t\t\t\t\t\t\tdomain: yAxisDomain as unknown as [\n\t\t\t\t\t\t\t\t\t\tnumber | string,\n\t\t\t\t\t\t\t\t\t\tnumber | string,\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\ttickFormatter:\n\t\t\t\t\t\t\t\t\t\ttype === \"percent\" ? valueToPercent : valueFormatter,\n\t\t\t\t\t\t\t\t\tallowDecimals: allowDecimals,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t{xAxisLabel && (\n\t\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\t\tposition=\"insideBottom\"\n\t\t\t\t\t\t\t\toffset={-20}\n\t\t\t\t\t\t\t\tclassName=\"fill-gray-800 text-sm font-medium dark:fill-gray-200\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{xAxisLabel}\n\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</XAxis>\n\t\t\t\t\t<YAxis\n\t\t\t\t\t\twidth={yAxisWidth}\n\t\t\t\t\t\thide={!showYAxis}\n\t\t\t\t\t\taxisLine={false}\n\t\t\t\t\t\ttickLine={layout === \"horizontal\"}\n\t\t\t\t\t\ttickSize={6}\n\t\t\t\t\t\tfill=\"\"\n\t\t\t\t\t\tstroke=\"\"\n\t\t\t\t\t\tclassName=\"text-xs fill-gray-500 stroke-gray-800 dark:fill-gray-500 dark:stroke-gray-300\"\n\t\t\t\t\t\ttick={{\n\t\t\t\t\t\t\ttransform:\n\t\t\t\t\t\t\t\tlayout !== \"vertical\" ? \"translate(-3, 0)\" : \"translate(0, 0)\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t{...(layout !== \"vertical\"\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\ttype: \"number\" as const,\n\t\t\t\t\t\t\t\t\tdomain: yAxisDomain as unknown as [\n\t\t\t\t\t\t\t\t\t\tnumber | string,\n\t\t\t\t\t\t\t\t\t\tnumber | string,\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\ttickFormatter:\n\t\t\t\t\t\t\t\t\t\ttype === \"percent\" ? valueToPercent : valueFormatter,\n\t\t\t\t\t\t\t\t\tallowDecimals: allowDecimals,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\tdataKey: index,\n\t\t\t\t\t\t\t\t\ttype: \"category\" as const,\n\t\t\t\t\t\t\t\t\tinterval: \"equidistantPreserveStart\" as const,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t{yAxisLabel && (\n\t\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\t\tposition=\"insideLeft\"\n\t\t\t\t\t\t\t\tstyle={{ textAnchor: \"middle\" }}\n\t\t\t\t\t\t\t\tangle={-90}\n\t\t\t\t\t\t\t\toffset={-15}\n\t\t\t\t\t\t\t\tclassName=\"fill-gray-800 text-sm font-medium dark:fill-gray-200\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{yAxisLabel}\n\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</YAxis>\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\twrapperStyle={{ outline: \"none\" }}\n\t\t\t\t\t\tisAnimationActive={true}\n\t\t\t\t\t\tanimationDuration={100}\n\t\t\t\t\t\tcursor={{ fill: \"#d1d5db\", opacity: \"0.15\" }}\n\t\t\t\t\t\toffset={20}\n\t\t\t\t\t\tposition={{\n\t\t\t\t\t\t\ty: layout === \"horizontal\" ? 0 : undefined,\n\t\t\t\t\t\t\tx: layout === \"horizontal\" ? undefined : yAxisWidth + 20,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tcontent={\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t\t? ({ active, payload, label }) => {\n\t\t\t\t\t\t\t\t\t\tif (active && payload && payload.length) {\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"w-44 rounded-md border border-gray-200 bg-white text-sm shadow-md dark:border-gray-800 dark:bg-gray-950\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"border-b border-inherit p-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"font-medium text-gray-900 dark:text-gray-50\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{xValueFormatter\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? xValueFormatter(label as string)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: label}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"space-y-1 p-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{payload.map(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem: { value: number; dataKey: string },\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tidx: number,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={idx.toString()}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"flex items-center justify-between space-x-4\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center space-x-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"size-2.5 shrink-0 rounded-sm\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: getColor(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolors[idx] || \"gray\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tidx,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t).fill,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"whitespace-nowrap text-right text-gray-700 dark:text-gray-300\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{item.dataKey}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"whitespace-nowrap text-right font-medium tabular-nums text-gray-900 dark:text-gray-50\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{valueFormatter(item.value)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t: () => null\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t{showLegend && (\n\t\t\t\t\t\t<RechartsLegend verticalAlign=\"top\" height={legendHeight} />\n\t\t\t\t\t)}\n\t\t\t\t\t{categories.map((category, idx) => {\n\t\t\t\t\t\tconst colorConfig = getColor(colors[idx] || \"gray\", idx);\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Bar\n\t\t\t\t\t\t\t\tkey={category}\n\t\t\t\t\t\t\t\tname={category}\n\t\t\t\t\t\t\t\tdataKey={category}\n\t\t\t\t\t\t\t\tstackId={stacked ? \"stack\" : undefined}\n\t\t\t\t\t\t\t\tisAnimationActive={false}\n\t\t\t\t\t\t\t\tfill={colorConfig.fill}\n\t\t\t\t\t\t\t\tclassName={onValueChange ? \"cursor-pointer\" : \"\"}\n\t\t\t\t\t\t\t\tshape={(shapeProps: unknown) =>\n\t\t\t\t\t\t\t\t\trenderShape(\n\t\t\t\t\t\t\t\t\t\tshapeProps as Record<string, unknown>,\n\t\t\t\t\t\t\t\t\t\tactiveBar,\n\t\t\t\t\t\t\t\t\t\tactiveLegend,\n\t\t\t\t\t\t\t\t\t\tcolorConfig.stroke,\n\t\t\t\t\t\t\t\t\t\tlayout,\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonClick={(barData) =>\n\t\t\t\t\t\t\t\t\tonBarClick(barData as unknown as Record<string, unknown>)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</RechartsBarChart>\n\t\t\t</ResponsiveContainer>\n\t\t</div>\n\t);\n});\n\nBarChartVariant.displayName = \"BarChartVariant\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport {\n\tCell,\n\tPie,\n\tLegend as RechartsLegend,\n\tPieChart as RechartsPieChart,\n\tResponsiveContainer,\n\tTooltip,\n} from \"recharts\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * DonutChart data segment\n */\nexport interface DonutChartDataItem {\n\t/** Category name */\n\tname: string;\n\t/** Numeric value */\n\tvalue: number;\n\t/** Segment color */\n\tcolor?: string;\n\t/** Index signature for Recharts compatibility */\n\t[key: string]: string | number | undefined;\n}\n\n/**\n * DonutChart Props - Compatible with mdxui DonutChartProps\n * All properties with defaults are optional for consumers\n */\nexport interface DonutChartProps {\n\t/** Donut chart data segments */\n\tdata: DonutChartDataItem[];\n\t/** Data key for category names */\n\tcategory: string;\n\t/** Data key for numeric values */\n\tvalue: string;\n\t/** Color palette for segments */\n\tcolors?: string[];\n\t/** Chart display variant */\n\tvariant?: \"donut\" | \"pie\";\n\t/** Center label text */\n\tlabel?: string;\n\t/** Display chart legend */\n\tshowLegend?: boolean;\n\t/** Enable hover tooltips */\n\tshowTooltip?: boolean;\n\t/** Animation duration in ms */\n\tanimationDuration?: number;\n\t/** Function to format numeric values for display */\n\tvalueFormatter?: (value: number) => string;\n\t/** Custom className */\n\tclassName?: string;\n}\n\n/**\n * Color palette for charts - maps semantic names to Tailwind classes\n */\nconst chartColors: Record<string, string> = {\n\tblue: \"#3b82f6\",\n\tgreen: \"#22c55e\",\n\tred: \"#ef4444\",\n\tyellow: \"#eab308\",\n\tpurple: \"#a855f7\",\n\tcyan: \"#06b6d4\",\n\torange: \"#f97316\",\n\tpink: \"#ec4899\",\n\tindigo: \"#6366f1\",\n\tteal: \"#14b8a6\",\n\temerald: \"#10b981\",\n\tgray: \"#6b7280\",\n};\n\nfunction getColor(color: string | undefined, index: number): string {\n\tif (color && chartColors[color]) return chartColors[color];\n\tif (color && color.startsWith(\"#\")) return color;\n\t// Default color palette for unspecified colors\n\tconst defaultColors = Object.values(chartColors);\n\treturn defaultColors[index % defaultColors.length];\n}\n\n/**\n * DonutChart - Tremor-style donut/pie chart adapter implementing mdxui DonutChartProps\n *\n * Wraps Recharts PieChart with mdxui-compliant props interface.\n *\n * @example\n * ```tsx\n * <DonutChart\n * data={[\n * { name: 'Category A', value: 40 },\n * { name: 'Category B', value: 60 },\n * ]}\n * category=\"name\"\n * value=\"value\"\n * />\n * ```\n */\nexport const DonutChart = React.forwardRef<HTMLDivElement, DonutChartProps>(\n\t(\n\t\t{\n\t\t\tdata,\n\t\t\tcategory,\n\t\t\tvalue,\n\t\t\tcolors,\n\t\t\tvariant = \"donut\",\n\t\t\tlabel,\n\t\t\tshowLegend = true,\n\t\t\tshowTooltip = true,\n\t\t\tanimationDuration = 500,\n\t\t\tvalueFormatter,\n\t\t\tclassName,\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst formatValue = valueFormatter || ((val: number) => val.toString());\n\n\t\t// Inner radius determines if it's a donut (has hole) or pie (no hole)\n\t\tconst innerRadius = variant === \"donut\" ? \"60%\" : 0;\n\n\t\treturn (\n\t\t\t<div ref={ref} className={twMerge(\"h-80 w-full\", className)}>\n\t\t\t\t<ResponsiveContainer width=\"100%\" height=\"100%\">\n\t\t\t\t\t<RechartsPieChart>\n\t\t\t\t\t\t<Pie\n\t\t\t\t\t\t\tdata={data}\n\t\t\t\t\t\t\tdataKey={value}\n\t\t\t\t\t\t\tnameKey={category}\n\t\t\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\t\t\tinnerRadius={innerRadius}\n\t\t\t\t\t\t\touterRadius=\"80%\"\n\t\t\t\t\t\t\tpaddingAngle={2}\n\t\t\t\t\t\t\tisAnimationActive={animationDuration > 0}\n\t\t\t\t\t\t\tanimationDuration={animationDuration}\n\t\t\t\t\t\t\tlabel={label ? false : undefined}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{data.map((entry, index) => {\n\t\t\t\t\t\t\t\tconst entryColor = entry.color || colors?.[index];\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\t\t\t\tkey={`cell-${index.toString()}`}\n\t\t\t\t\t\t\t\t\t\tfill={getColor(entryColor, index)}\n\t\t\t\t\t\t\t\t\t\tstrokeWidth={0}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</Pie>\n\t\t\t\t\t\t{showTooltip && (\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tformatter={(val, name) => {\n\t\t\t\t\t\t\t\t\tconst numValue = typeof val === \"number\" ? val : 0;\n\t\t\t\t\t\t\t\t\treturn [formatValue(numValue), String(name)];\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tcontentStyle={{\n\t\t\t\t\t\t\t\t\tbackgroundColor: \"white\",\n\t\t\t\t\t\t\t\t\tborder: \"1px solid #e5e7eb\",\n\t\t\t\t\t\t\t\t\tborderRadius: \"6px\",\n\t\t\t\t\t\t\t\t\tboxShadow: \"0 4px 6px -1px rgb(0 0 0 / 0.1)\",\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{showLegend && (\n\t\t\t\t\t\t\t<RechartsLegend verticalAlign=\"bottom\" height={36} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{/* Center label for donut variant */}\n\t\t\t\t\t\t{label && variant === \"donut\" && (\n\t\t\t\t\t\t\t<text\n\t\t\t\t\t\t\t\tx=\"50%\"\n\t\t\t\t\t\t\t\ty=\"50%\"\n\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\t\tdominantBaseline=\"middle\"\n\t\t\t\t\t\t\t\tclassName=\"fill-gray-900 text-lg font-semibold dark:fill-gray-50\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</RechartsPieChart>\n\t\t\t\t</ResponsiveContainer>\n\t\t\t</div>\n\t\t);\n\t},\n);\n\nDonutChart.displayName = \"DonutChart\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { BarChartVariant } from \"./bar-chart-variant\";\n\n// Inline Info icon to avoid lucide-react dependency\nconst InfoIcon = ({ className }: { className?: string }) => (\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tfill=\"none\"\n\t\tviewBox=\"0 0 24 24\"\n\t\tstrokeWidth={1.5}\n\t\tstroke=\"currentColor\"\n\t\tclassName={className}\n\t\taria-hidden=\"true\"\n\t>\n\t\t<path\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t\td=\"M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z\"\n\t\t/>\n\t</svg>\n);\n\n/**\n * Chart types supported by the TransactionChart\n */\nexport type ChartType = \"amount\" | \"count\" | \"category\" | \"merchant\";\n\nexport interface ChartDataItem {\n\tkey: string;\n\tvalue: number;\n}\n\nexport interface ChartConfig {\n\ttitle: string;\n\ttooltipContent: string;\n\tvalueFormatter: (value: number) => string;\n\tlayout?: \"horizontal\" | \"vertical\";\n\tcolor: string;\n\txValueFormatter?: (value: string) => string;\n}\n\n/**\n * Currency formatter\n */\nfunction formatCurrency(value: number, maxFractionDigits = 0): string {\n\treturn new Intl.NumberFormat(\"en-US\", {\n\t\tstyle: \"currency\",\n\t\tcurrency: \"USD\",\n\t\tmaximumFractionDigits: maxFractionDigits,\n\t}).format(value);\n}\n\n/**\n * Number formatter\n */\nfunction formatNumber(value: number): string {\n\treturn new Intl.NumberFormat(\"en-US\").format(value);\n}\n\n/**\n * Chart configurations by type\n */\nconst chartConfigs: Record<ChartType, ChartConfig> = {\n\tamount: {\n\t\ttitle: \"Total Transaction Amount\",\n\t\ttooltipContent:\n\t\t\t\"Total amount of transactions for the selected period and amount range.\",\n\t\tcolor: \"blue\",\n\t\tvalueFormatter: (number: number) => formatCurrency(number),\n\t\txValueFormatter: (dateString: string) => {\n\t\t\tconst date = new Date(dateString);\n\t\t\treturn date.toLocaleDateString(\"en-GB\", {\n\t\t\t\tday: \"2-digit\",\n\t\t\t\tmonth: \"2-digit\",\n\t\t\t\tyear: \"2-digit\",\n\t\t\t});\n\t\t},\n\t},\n\tcount: {\n\t\ttitle: \"Transaction Count\",\n\t\ttooltipContent:\n\t\t\t\"Total number of transactions for the selected period and amount range.\",\n\t\tcolor: \"blue\",\n\t\tvalueFormatter: (number: number) => formatNumber(number),\n\t\txValueFormatter: (dateString: string) => {\n\t\t\tconst date = new Date(dateString);\n\t\t\treturn date.toLocaleDateString(\"en-GB\", {\n\t\t\t\tday: \"2-digit\",\n\t\t\t\tmonth: \"2-digit\",\n\t\t\t\tyear: \"2-digit\",\n\t\t\t});\n\t\t},\n\t},\n\tcategory: {\n\t\ttitle: \"Top 5 Categories by Transaction Amount\",\n\t\ttooltipContent:\n\t\t\t\"Total amount of transactions for the top 5 categories in the selected period and amount range.\",\n\t\tvalueFormatter: (number: number) => formatCurrency(number),\n\t\tlayout: \"vertical\",\n\t\tcolor: \"emerald\",\n\t},\n\tmerchant: {\n\t\ttitle: \"Top 5 Merchants by Transaction Amount\",\n\t\ttooltipContent:\n\t\t\t\"Total amount of transactions for the top 5 merchants in the selected period and amount range.\",\n\t\tvalueFormatter: (number: number) => formatCurrency(number),\n\t\tlayout: \"vertical\",\n\t\tcolor: \"orange\",\n\t},\n};\n\nexport interface TransactionChartProps\n\textends React.HTMLAttributes<HTMLDivElement> {\n\t/** Chart type */\n\ttype: ChartType;\n\t/** Chart data */\n\tdata: ChartDataItem[];\n\t/** Y axis width */\n\tyAxisWidth?: number;\n\t/** Show Y axis */\n\tshowYAxis?: boolean;\n\t/** Title override */\n\ttitle?: string;\n\t/** Tooltip content override */\n\ttooltipContent?: string;\n}\n\n/**\n * TransactionChart - Insights template transaction chart component\n *\n * Displays transaction data in various chart formats with consistent styling.\n *\n * @example\n * ```tsx\n * <TransactionChart\n * type=\"amount\"\n * data={[\n * { key: '2024-01-01', value: 1000 },\n * { key: '2024-01-02', value: 1500 },\n * ]}\n * />\n * ```\n */\nexport const TransactionChart = React.forwardRef<\n\tHTMLDivElement,\n\tTransactionChartProps\n>(\n\t(\n\t\t{\n\t\t\ttype,\n\t\t\tdata,\n\t\t\tyAxisWidth,\n\t\t\tshowYAxis = true,\n\t\t\ttitle,\n\t\t\ttooltipContent,\n\t\t\tclassName,\n\t\t\t...other\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst config = chartConfigs[type];\n\t\tconst chartTitle = title || config.title;\n\t\tconst chartTooltip = tooltipContent || config.tooltipContent;\n\n\t\tconst totalValue = React.useMemo(\n\t\t\t() => Math.round(data.reduce((sum, item) => sum + item.value, 0)),\n\t\t\t[data],\n\t\t);\n\n\t\treturn (\n\t\t\t<div ref={ref} className={twMerge(\"w-full\", className)} {...other}>\n\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t<div className=\"flex gap-2\">\n\t\t\t\t\t\t<h2\n\t\t\t\t\t\t\tid={`${type}-chart-title`}\n\t\t\t\t\t\t\tclassName=\"text-sm text-gray-600 dark:text-gray-400\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{chartTitle}\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclassName=\"inline-flex items-center\"\n\t\t\t\t\t\t\ttitle={chartTooltip}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<InfoIcon className=\"size-4 text-gray-600 dark:text-gray-400\" />\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<p\n\t\t\t\t\tclassName=\"mt-2 text-2xl font-semibold text-gray-900 dark:text-gray-50\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t>\n\t\t\t\t\t{config.valueFormatter(totalValue)}\n\t\t\t\t</p>\n\t\t\t\t<BarChartVariant\n\t\t\t\t\tdata={data as unknown as Record<string, unknown>[]}\n\t\t\t\t\tindex=\"key\"\n\t\t\t\t\tcategories={[\"value\"]}\n\t\t\t\t\tshowLegend={false}\n\t\t\t\t\tcolors={[config.color]}\n\t\t\t\t\tyAxisWidth={yAxisWidth}\n\t\t\t\t\tvalueFormatter={config.valueFormatter}\n\t\t\t\t\txValueFormatter={config.xValueFormatter}\n\t\t\t\t\tshowYAxis={showYAxis}\n\t\t\t\t\tclassName=\"mt-6 h-48\"\n\t\t\t\t\tlayout={config.layout}\n\t\t\t\t\tbarCategoryGap=\"6%\"\n\t\t\t\t\taria-labelledby={`${type}-chart-title`}\n\t\t\t\t\trole=\"figure\"\n\t\t\t\t\taria-roledescription=\"chart\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t},\n);\n\nTransactionChart.displayName = \"TransactionChart\";\n","\"use client\";\n\nimport type { Trend, WidgetSize } from \"mdxui\";\nimport type * as React from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * KPICard Props - with proper optional defaults\n *\n * Note: We define this locally because Zod's z.infer makes fields with .default()\n * required in the TypeScript type, but we want them optional with runtime defaults.\n */\nexport interface KPICardProps {\n\t/** Widget title */\n\ttitle?: string;\n\t/** Widget description/subtitle */\n\tdescription?: string;\n\t/** Responsive sizing configuration */\n\tsize?: WidgetSize;\n\t/** Widget theme variant */\n\tvariant?: \"default\" | \"outlined\" | \"elevated\" | \"ghost\";\n\t/** Show loading state */\n\tloading?: boolean;\n\t/** Error message */\n\terror?: string;\n\t/** Metric label */\n\tlabel: string;\n\t/** Current value */\n\tvalue: string | number;\n\t/** Previous value for comparison */\n\tpreviousValue?: string | number;\n\t/** Change percentage */\n\tchange?: number;\n\t/** Trend direction */\n\ttrend?: Trend;\n\t/** Value prefix (e.g., \"$\", \"EUR\") */\n\tprefix?: string;\n\t/** Value suffix (e.g., \"%\", \"ms\") */\n\tsuffix?: string;\n\t/** Target value or goal */\n\ttarget?: number;\n\t/** Format type for value display */\n\tformat?: \"number\" | \"currency\" | \"percent\" | \"duration\" | \"bytes\";\n\t/** Icon name */\n\ticon?: string;\n\t/** Custom className */\n\tclassName?: string;\n}\n\n/**\n * Tremor-based icons for common metrics\n */\nconst icons: Record<string, React.FC<{ className?: string }>> = {\n\tusers: ({ className }) => (\n\t\t<svg\n\t\t\tclassName={className}\n\t\t\tfill=\"none\"\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth={1.5}\n\t\t>\n\t\t\t<path\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\td=\"M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z\"\n\t\t\t/>\n\t\t</svg>\n\t),\n\trevenue: ({ className }) => (\n\t\t<svg\n\t\t\tclassName={className}\n\t\t\tfill=\"none\"\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth={1.5}\n\t\t>\n\t\t\t<path\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\td=\"M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n\t\t\t/>\n\t\t</svg>\n\t),\n\tchart: ({ className }) => (\n\t\t<svg\n\t\t\tclassName={className}\n\t\t\tfill=\"none\"\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth={1.5}\n\t\t>\n\t\t\t<path\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\td=\"M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z\"\n\t\t\t/>\n\t\t</svg>\n\t),\n};\n\n/**\n * Get the trend color class based on direction\n */\nfunction getTrendColorClass(trend: Trend | undefined): string {\n\tswitch (trend) {\n\t\tcase \"up\":\n\t\t\treturn \"text-emerald-500\";\n\t\tcase \"down\":\n\t\t\treturn \"text-red-500\";\n\t\tcase \"neutral\":\n\t\tdefault:\n\t\t\treturn \"text-gray-500\";\n\t}\n}\n\n/**\n * Format the change value for display\n */\nfunction formatChange(change: number | undefined): string {\n\tif (change === undefined) return \"\";\n\tconst sign = change > 0 ? \"+\" : \"\";\n\treturn `${sign}${change}%`;\n}\n\n/**\n * Get variant classes for the card\n */\nfunction getVariantClasses(variant: string | undefined): string {\n\tswitch (variant) {\n\t\tcase \"outlined\":\n\t\t\treturn \"border border-gray-200 dark:border-gray-800\";\n\t\tcase \"elevated\":\n\t\t\treturn \"shadow-lg\";\n\t\tcase \"ghost\":\n\t\t\treturn \"bg-transparent\";\n\t\tdefault:\n\t\t\treturn \"\";\n\t}\n}\n\n/**\n * KPICard - A Tremor-style KPI display card\n *\n * Renders a key performance indicator with label, value, optional trend,\n * prefix/suffix formatting, and loading states.\n */\nexport function KPICard({\n\tlabel,\n\tvalue,\n\tpreviousValue,\n\tchange,\n\ttrend,\n\tprefix = \"\",\n\tsuffix = \"\",\n\ttarget,\n\tformat: _format = \"number\",\n\ticon,\n\ttitle: _title,\n\tdescription: _description,\n\tsize: _size,\n\tvariant = \"default\",\n\tloading = false,\n\terror,\n\tclassName,\n}: KPICardProps) {\n\t// Format the display value\n\tconst displayValue = typeof value === \"number\" ? String(value) : value;\n\tconst formattedValue = `${prefix}${displayValue}${suffix}`;\n\n\t// Get icon component if provided\n\tconst IconComponent = icon ? icons[icon] : null;\n\n\tif (loading) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tdata-testid=\"kpi-skeleton\"\n\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\"relative w-full rounded-lg border p-6 text-left\",\n\t\t\t\t\t\"bg-white dark:bg-gray-950\",\n\t\t\t\t\t\"border-gray-200 dark:border-gray-900\",\n\t\t\t\t\tgetVariantClasses(variant),\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\taria-busy=\"true\"\n\t\t\t\taria-label={`Loading ${label}`}\n\t\t\t>\n\t\t\t\t<div className=\"animate-pulse\">\n\t\t\t\t\t<div className=\"h-4 w-24 bg-gray-200 dark:bg-gray-800 rounded mb-3\"></div>\n\t\t\t\t\t<div className=\"h-8 w-32 bg-gray-200 dark:bg-gray-800 rounded mb-2\"></div>\n\t\t\t\t\t<div className=\"h-4 w-16 bg-gray-200 dark:bg-gray-800 rounded\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"kpi-card\"\n\t\t\tclassName={twMerge(\n\t\t\t\t\"relative w-full rounded-lg border p-6 text-left shadow-sm\",\n\t\t\t\t\"bg-white dark:bg-gray-950\",\n\t\t\t\t\"border-gray-200 dark:border-gray-900\",\n\t\t\t\tgetVariantClasses(variant),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\taria-label={`${label}: ${formattedValue}`}\n\t\t>\n\t\t\t{/* Header with icon and label */}\n\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t{IconComponent && (\n\t\t\t\t\t<div data-testid=\"kpi-icon\" className=\"flex-shrink-0\">\n\t\t\t\t\t\t<IconComponent className=\"h-5 w-5 text-gray-500 dark:text-gray-400\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<h3 className=\"text-sm font-medium text-gray-500 dark:text-gray-400\">\n\t\t\t\t\t{label}\n\t\t\t\t</h3>\n\t\t\t</div>\n\n\t\t\t{/* Value */}\n\t\t\t<p className=\"mt-2 text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50\">\n\t\t\t\t{formattedValue}\n\t\t\t</p>\n\n\t\t\t{/* Trend indicator */}\n\t\t\t{(trend || change !== undefined) && (\n\t\t\t\t<div className=\"mt-2 flex items-center gap-2\">\n\t\t\t\t\t<span\n\t\t\t\t\t\tdata-testid=\"trend-indicator\"\n\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\"inline-flex items-center text-sm font-medium\",\n\t\t\t\t\t\t\tgetTrendColorClass(trend),\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{trend === \"up\" && (\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tclassName=\"h-4 w-4 mr-0.5\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t\td=\"M7 11l5-5m0 0l5 5m-5-5v12\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{trend === \"down\" && (\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tclassName=\"h-4 w-4 mr-0.5\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t\td=\"M17 13l-5 5m0 0l-5-5m5 5V6\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{formatChange(change)}\n\t\t\t\t\t</span>\n\t\t\t\t\t{previousValue !== undefined && (\n\t\t\t\t\t\t<span className=\"text-sm text-gray-500 dark:text-gray-400\">\n\t\t\t\t\t\t\tfrom {previousValue}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{/* Target */}\n\t\t\t{target !== undefined && (\n\t\t\t\t<div className=\"mt-2\">\n\t\t\t\t\t<span className=\"text-sm text-gray-500 dark:text-gray-400\">\n\t\t\t\t\t\ttarget: {target}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{/* Error state */}\n\t\t\t{error && (\n\t\t\t\t<div className=\"mt-2\">\n\t\t\t\t\t<span className=\"text-sm text-red-500\">{error}</span>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport default KPICard;\n","\"use client\";\n\nimport {\n\ttype ColumnDef,\n\tflexRender,\n\tgetCoreRowModel,\n\tgetPaginationRowModel,\n\tgetSortedRowModel,\n\tuseReactTable,\n} from \"@tanstack/react-table\";\nimport type { TransactionItem } from \"mdxui\";\nimport * as React from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * TransactionsTableProps - Input props for TransactionsTable component\n *\n * This is the consumer-facing type where defaulted fields are optional.\n */\nexport interface TransactionsTableProps {\n\t/** Transaction data - required */\n\ttransactions: TransactionItem[];\n\t/** Title */\n\ttitle?: string;\n\t/** Currency */\n\tcurrency?: string;\n\t/** Value formatter */\n\tvalueFormatter?: (value: number) => string;\n\t/** Show category filter */\n\tshowCategoryFilter?: boolean;\n\t/** Show date filter */\n\tshowDateFilter?: boolean;\n\t/** Show export button */\n\tshowExport?: boolean;\n\t/** Page size */\n\tpageSize?: number;\n\t/** Empty state message */\n\temptyMessage?: string;\n\t/** Loading state */\n\tloading?: boolean;\n\t/** Custom className */\n\tclassName?: string;\n}\n\n// Status badge variants\nconst statusVariants: Record<TransactionItem[\"status\"], string> = {\n\tcompleted:\n\t\t\"bg-emerald-50 text-emerald-900 ring-emerald-600/30 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/20\",\n\tpending:\n\t\t\"bg-gray-50 text-gray-900 ring-gray-500/30 dark:bg-gray-400/10 dark:text-gray-400 dark:ring-gray-400/20\",\n\tfailed:\n\t\t\"bg-rose-50 text-rose-900 ring-rose-600/20 dark:bg-rose-400/10 dark:text-rose-500 dark:ring-rose-400/20\",\n\trefunded:\n\t\t\"bg-orange-50 text-orange-900 ring-orange-600/30 dark:bg-orange-400/10 dark:text-orange-500 dark:ring-orange-400/20\",\n};\n\nfunction StatusBadge({ status }: { status: TransactionItem[\"status\"] }) {\n\treturn (\n\t\t<span\n\t\t\tclassName={twMerge(\n\t\t\t\t\"inline-flex items-center gap-x-1 whitespace-nowrap rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset\",\n\t\t\t\tstatusVariants[status],\n\t\t\t)}\n\t\t>\n\t\t\t{status}\n\t\t</span>\n\t);\n}\n\nfunction formatCurrency(amount: number, currency: string = \"USD\"): string {\n\tconst absAmount = Math.abs(amount);\n\tconst formatted = new Intl.NumberFormat(\"en-US\", {\n\t\tstyle: \"currency\",\n\t\tcurrency,\n\t\tminimumFractionDigits: 2,\n\t\tmaximumFractionDigits: 2,\n\t}).format(absAmount);\n\n\treturn amount < 0 ? `-${formatted}` : formatted;\n}\n\nfunction formatDate(dateString: string): string {\n\tconst date = new Date(dateString);\n\treturn date.toLocaleDateString(\"en-US\", {\n\t\tmonth: \"short\",\n\t\tday: \"numeric\",\n\t\tyear: \"numeric\",\n\t});\n}\n\nfunction createColumns(currency: string = \"USD\"): ColumnDef<TransactionItem>[] {\n\treturn [\n\t\t{\n\t\t\taccessorKey: \"date\",\n\t\t\theader: \"Date\",\n\t\t\tcell: ({ getValue }) => {\n\t\t\t\tconst date = getValue() as string;\n\t\t\t\treturn (\n\t\t\t\t\t<span className=\"tabular-nums text-gray-900 dark:text-gray-50\">\n\t\t\t\t\t\t{formatDate(date)}\n\t\t\t\t\t</span>\n\t\t\t\t);\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\taccessorKey: \"description\",\n\t\t\theader: \"Description\",\n\t\t\tcell: ({ getValue }) => (\n\t\t\t\t<span className=\"text-gray-700 dark:text-gray-300\">\n\t\t\t\t\t{getValue() as string}\n\t\t\t\t</span>\n\t\t\t),\n\t\t},\n\t\t{\n\t\t\taccessorKey: \"amount\",\n\t\t\theader: \"Amount\",\n\t\t\tcell: ({ getValue, row }) => {\n\t\t\t\tconst amount = getValue() as number;\n\t\t\t\tconst isNegative = row.original.type === \"debit\" || amount < 0;\n\t\t\t\tconst displayAmount = isNegative && amount > 0 ? -amount : amount;\n\t\t\t\treturn (\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\"tabular-nums font-medium\",\n\t\t\t\t\t\t\tisNegative\n\t\t\t\t\t\t\t\t? \"text-rose-600 dark:text-rose-400\"\n\t\t\t\t\t\t\t\t: \"text-gray-900 dark:text-gray-50\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{formatCurrency(displayAmount, currency)}\n\t\t\t\t\t</span>\n\t\t\t\t);\n\t\t\t},\n\t\t\tmeta: {\n\t\t\t\tclassName: \"text-right\",\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\taccessorKey: \"status\",\n\t\t\theader: \"Status\",\n\t\t\tcell: ({ getValue }) => (\n\t\t\t\t<StatusBadge status={getValue() as TransactionItem[\"status\"]} />\n\t\t\t),\n\t\t},\n\t];\n}\n\nfunction LoadingSkeleton() {\n\treturn (\n\t\t<div data-testid=\"transactions-table-loading\" className=\"space-y-3\">\n\t\t\t{[1, 2, 3].map((i) => (\n\t\t\t\t<div key={i} className=\"animate-pulse flex space-x-4\">\n\t\t\t\t\t<div className=\"h-4 bg-gray-200 dark:bg-gray-700 rounded w-24\" />\n\t\t\t\t\t<div className=\"h-4 bg-gray-200 dark:bg-gray-700 rounded flex-1\" />\n\t\t\t\t\t<div className=\"h-4 bg-gray-200 dark:bg-gray-700 rounded w-20\" />\n\t\t\t\t\t<div className=\"h-4 bg-gray-200 dark:bg-gray-700 rounded w-16\" />\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\n/**\n * TransactionsTable - A paginated table displaying financial transactions\n *\n * Implements the mdxui TransactionsListProps interface with TanStack Table\n * for sorting and pagination.\n */\nexport function TransactionsTable(props: TransactionsTableProps) {\n\tconst {\n\t\ttransactions,\n\t\ttitle,\n\t\tcurrency = \"USD\",\n\t\tpageSize = 10,\n\t\temptyMessage = \"No transactions\",\n\t\tloading = false,\n\t\tclassName,\n\t} = props;\n\n\tconst columns = React.useMemo(() => createColumns(currency), [currency]);\n\n\tconst table = useReactTable({\n\t\tdata: transactions,\n\t\tcolumns,\n\t\tinitialState: {\n\t\t\tpagination: {\n\t\t\t\tpageIndex: 0,\n\t\t\t\tpageSize,\n\t\t\t},\n\t\t},\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t\tgetPaginationRowModel: getPaginationRowModel(),\n\t\tgetSortedRowModel: getSortedRowModel(),\n\t});\n\n\tconst totalRows = transactions.length;\n\tconst currentPage = table.getState().pagination.pageIndex;\n\tconst firstRowIndex = currentPage * pageSize + 1;\n\tconst lastRowIndex = Math.min(totalRows, firstRowIndex + pageSize - 1);\n\n\tif (loading) {\n\t\treturn (\n\t\t\t<div className={twMerge(\"space-y-4\", className)}>\n\t\t\t\t{title && (\n\t\t\t\t\t<h3 className=\"text-lg font-semibold text-gray-900 dark:text-gray-50\">\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h3>\n\t\t\t\t)}\n\t\t\t\t<LoadingSkeleton />\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div className={twMerge(\"space-y-4\", className)}>\n\t\t\t{title && (\n\t\t\t\t<h3 className=\"text-lg font-semibold text-gray-900 dark:text-gray-50\">\n\t\t\t\t\t{title}\n\t\t\t\t</h3>\n\t\t\t)}\n\t\t\t<div className=\"relative overflow-hidden overflow-x-auto\">\n\t\t\t\t<table className=\"w-full caption-bottom border-b border-gray-200 dark:border-gray-800\">\n\t\t\t\t\t<thead>\n\t\t\t\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t\t\t<tr\n\t\t\t\t\t\t\t\tkey={headerGroup.id}\n\t\t\t\t\t\t\t\tclassName=\"border-y border-gray-200 dark:border-gray-800\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\t\t\t\t\"border-b px-4 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-50 border-gray-200 dark:border-gray-800\",\n\t\t\t\t\t\t\t\t\t\t\t(header.column.columnDef.meta as any)?.className,\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</thead>\n\t\t\t\t\t<tbody className=\"divide-y divide-gray-200 dark:divide-gray-800\">\n\t\t\t\t\t\t{table.getRowModel().rows.length > 0 ? (\n\t\t\t\t\t\t\ttable.getRowModel().rows.map((row) => (\n\t\t\t\t\t\t\t\t<tr\n\t\t\t\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\t\t\t\tclassName=\"hover:bg-gray-50 hover:dark:bg-gray-900\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\t\t\t\tkey={cell.id}\n\t\t\t\t\t\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\t\t\t\t\t\"p-4 text-sm text-gray-600 dark:text-gray-400\",\n\t\t\t\t\t\t\t\t\t\t\t\t(cell.column.columnDef.meta as any)?.className,\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\t\t\t\t\t\t\t\tcell.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t))\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\t\tcolSpan={columns.length}\n\t\t\t\t\t\t\t\t\tclassName=\"h-24 text-center text-sm text-gray-500 dark:text-gray-400\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{emptyMessage}\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</tbody>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t\t{totalRows > pageSize && (\n\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t<div className=\"text-sm tabular-nums text-gray-500\">\n\t\t\t\t\t\tShowing {firstRowIndex}-{lastRowIndex} of {totalRows}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"flex items-center gap-x-1.5\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tonClick={() => table.setPageIndex(0)}\n\t\t\t\t\t\t\tdisabled={!table.getCanPreviousPage()}\n\t\t\t\t\t\t\tclassName=\"p-1.5 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 disabled:opacity-50 disabled:cursor-not-allowed\"\n\t\t\t\t\t\t\taria-label=\"First page\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tclassName=\"size-4\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t\td=\"M18.75 19.5l-7.5-7.5 7.5-7.5M11.25 19.5l-7.5-7.5 7.5-7.5\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tonClick={() => table.previousPage()}\n\t\t\t\t\t\t\tdisabled={!table.getCanPreviousPage()}\n\t\t\t\t\t\t\tclassName=\"p-1.5 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 disabled:opacity-50 disabled:cursor-not-allowed\"\n\t\t\t\t\t\t\taria-label=\"Previous page\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tclassName=\"size-4\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t\td=\"M15.75 19.5L8.25 12l7.5-7.5\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tonClick={() => table.nextPage()}\n\t\t\t\t\t\t\tdisabled={!table.getCanNextPage()}\n\t\t\t\t\t\t\tclassName=\"p-1.5 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 disabled:opacity-50 disabled:cursor-not-allowed\"\n\t\t\t\t\t\t\taria-label=\"Next page\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tclassName=\"size-4\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t\td=\"M8.25 4.5l7.5 7.5-7.5 7.5\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tonClick={() => table.setPageIndex(table.getPageCount() - 1)}\n\t\t\t\t\t\t\tdisabled={!table.getCanNextPage()}\n\t\t\t\t\t\t\tclassName=\"p-1.5 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 disabled:opacity-50 disabled:cursor-not-allowed\"\n\t\t\t\t\t\t\taria-label=\"Last page\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tclassName=\"size-4\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t\td=\"M5.25 4.5l7.5 7.5-7.5 7.5M12.75 4.5l7.5 7.5-7.5 7.5\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":"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","names":["React","CartesianGrid","RechartsLegend","ResponsiveContainer","Tooltip","XAxis","YAxis","twMerge","jsx","jsxs","chartColors","getColor","React","Bar","CartesianGrid","RechartsBarChart","RechartsLegend","ResponsiveContainer","Tooltip","XAxis","YAxis","twMerge","jsx","jsxs","chartColors","getColor","React","RechartsLegend","ResponsiveContainer","Tooltip","twMerge","jsx","jsxs","chartColors","getColor","React","twMerge","jsx","jsxs","twMerge","twMerge","jsx","jsxs","React","twMerge","jsx","jsxs","formatCurrency"]}
|
|
@@ -0,0 +1,360 @@
|
|
|
1
|
+
import { KPICard, AreaChart, BarChart, DonutChart, BarChartVariant, TransactionChart, TransactionsTable } from './components/index.js';
|
|
2
|
+
export { AreaChartProps, BarChartProps, BarChartVariantProps, ChartConfig, ChartDataItem, ChartType, DonutChartDataItem, DonutChartProps, KPICardProps, TransactionChartProps, TransactionsTableProps } from './components/index.js';
|
|
3
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
|
+
import { ReactNode } from 'react';
|
|
5
|
+
import 'mdxui';
|
|
6
|
+
|
|
7
|
+
interface InsightsAppProps {
|
|
8
|
+
/** App display name */
|
|
9
|
+
name?: string;
|
|
10
|
+
/** Child content */
|
|
11
|
+
children: ReactNode;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* InsightsApp - Root wrapper component for the Insights template
|
|
15
|
+
*
|
|
16
|
+
* Provides the root application wrapper with providers and theme setup.
|
|
17
|
+
* In the Insights template, this wraps the entire application.
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* ```tsx
|
|
21
|
+
* <InsightsApp name="Analytics Dashboard">
|
|
22
|
+
* <InsightsShell>
|
|
23
|
+
* <Dashboard />
|
|
24
|
+
* </InsightsShell>
|
|
25
|
+
* </InsightsApp>
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
declare function InsightsApp({ name, children }: InsightsAppProps): react_jsx_runtime.JSX.Element;
|
|
29
|
+
|
|
30
|
+
interface InsightsDashboardProps {
|
|
31
|
+
/** Dashboard title */
|
|
32
|
+
title?: string;
|
|
33
|
+
/** Optional description text */
|
|
34
|
+
description?: string;
|
|
35
|
+
/** Metrics to display (optional) */
|
|
36
|
+
metrics?: Array<{
|
|
37
|
+
label: string;
|
|
38
|
+
value: string | number;
|
|
39
|
+
change?: number;
|
|
40
|
+
trend?: "up" | "down" | "neutral";
|
|
41
|
+
}>;
|
|
42
|
+
/** Action buttons or controls to render on the right */
|
|
43
|
+
actions?: ReactNode;
|
|
44
|
+
/** Main content area */
|
|
45
|
+
children: ReactNode;
|
|
46
|
+
/** Additional className for the container */
|
|
47
|
+
className?: string;
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* InsightsDashboard - Dashboard page layout for the Insights template
|
|
51
|
+
*
|
|
52
|
+
* Provides a consistent layout structure for analytics dashboard pages:
|
|
53
|
+
* - Title and description header
|
|
54
|
+
* - Optional metrics summary
|
|
55
|
+
* - Optional action buttons area
|
|
56
|
+
* - Divider
|
|
57
|
+
* - Main content area
|
|
58
|
+
*
|
|
59
|
+
* @example
|
|
60
|
+
* ```tsx
|
|
61
|
+
* <InsightsDashboard
|
|
62
|
+
* title="Analytics Overview"
|
|
63
|
+
* description="Real-time analytics and reporting"
|
|
64
|
+
* metrics={[
|
|
65
|
+
* { label: 'Total Revenue', value: '$45,231', change: 12.5, trend: 'up' },
|
|
66
|
+
* { label: 'Active Users', value: '2,543', change: 8.2, trend: 'up' },
|
|
67
|
+
* ]}
|
|
68
|
+
* actions={<Button>Export</Button>}
|
|
69
|
+
* >
|
|
70
|
+
* <ChartGrid />
|
|
71
|
+
* <TransactionsTable />
|
|
72
|
+
* </InsightsDashboard>
|
|
73
|
+
* ```
|
|
74
|
+
*/
|
|
75
|
+
declare function InsightsDashboard({ title, description, metrics, actions, children, className, }: InsightsDashboardProps): react_jsx_runtime.JSX.Element;
|
|
76
|
+
|
|
77
|
+
interface Breadcrumb {
|
|
78
|
+
label: string;
|
|
79
|
+
href?: string;
|
|
80
|
+
}
|
|
81
|
+
interface InsightsHeaderProps {
|
|
82
|
+
/** Current user */
|
|
83
|
+
user?: {
|
|
84
|
+
name: string;
|
|
85
|
+
email: string;
|
|
86
|
+
avatar?: string;
|
|
87
|
+
};
|
|
88
|
+
/** Show search */
|
|
89
|
+
showSearch?: boolean;
|
|
90
|
+
/** Show notifications */
|
|
91
|
+
showNotifications?: boolean;
|
|
92
|
+
/** Breadcrumbs */
|
|
93
|
+
breadcrumbs?: Breadcrumb[];
|
|
94
|
+
/** Logo component */
|
|
95
|
+
logo?: ReactNode;
|
|
96
|
+
/** Notifications component */
|
|
97
|
+
notifications?: ReactNode;
|
|
98
|
+
/** User profile component */
|
|
99
|
+
userProfile?: ReactNode;
|
|
100
|
+
/** Additional className */
|
|
101
|
+
className?: string;
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* InsightsHeader - Top header bar for the Insights template
|
|
105
|
+
*
|
|
106
|
+
* Provides a header bar with logo, user profile, and notifications.
|
|
107
|
+
* This is typically used inside InsightsShell but can be used standalone.
|
|
108
|
+
*
|
|
109
|
+
* @example
|
|
110
|
+
* ```tsx
|
|
111
|
+
* <InsightsHeader
|
|
112
|
+
* user={{ name: 'John Doe', email: 'john@example.com.ai' }}
|
|
113
|
+
* showSearch={true}
|
|
114
|
+
* showNotifications={true}
|
|
115
|
+
* />
|
|
116
|
+
* ```
|
|
117
|
+
*/
|
|
118
|
+
declare function InsightsHeader({ user, showSearch, showNotifications, breadcrumbs, logo, notifications, userProfile, className, }: InsightsHeaderProps): react_jsx_runtime.JSX.Element;
|
|
119
|
+
|
|
120
|
+
type SettingsSection = "profile" | "security" | "notifications" | "billing" | "team" | "api" | "integrations";
|
|
121
|
+
interface InsightsSettingsProps {
|
|
122
|
+
/** Settings sections to show */
|
|
123
|
+
sections?: SettingsSection[];
|
|
124
|
+
/** Currently active section */
|
|
125
|
+
activeSection?: SettingsSection;
|
|
126
|
+
/** Child content */
|
|
127
|
+
children?: ReactNode;
|
|
128
|
+
/** Additional className */
|
|
129
|
+
className?: string;
|
|
130
|
+
}
|
|
131
|
+
/**
|
|
132
|
+
* InsightsSettings - Settings page layout for the Insights template
|
|
133
|
+
*
|
|
134
|
+
* Provides a settings page structure with sidebar navigation
|
|
135
|
+
* and main content area for settings forms.
|
|
136
|
+
*
|
|
137
|
+
* @example
|
|
138
|
+
* ```tsx
|
|
139
|
+
* <InsightsSettings
|
|
140
|
+
* sections={['profile', 'security', 'notifications']}
|
|
141
|
+
* activeSection="profile"
|
|
142
|
+
* >
|
|
143
|
+
* <ProfileSettingsForm />
|
|
144
|
+
* </InsightsSettings>
|
|
145
|
+
* ```
|
|
146
|
+
*/
|
|
147
|
+
declare function InsightsSettings({ sections, activeSection, children, className, }: InsightsSettingsProps): react_jsx_runtime.JSX.Element;
|
|
148
|
+
|
|
149
|
+
interface InsightsShellProps {
|
|
150
|
+
/** Main content area */
|
|
151
|
+
children: ReactNode;
|
|
152
|
+
/** Sidebar component (optional) */
|
|
153
|
+
sidebar?: ReactNode;
|
|
154
|
+
/** Header component (optional) */
|
|
155
|
+
header?: ReactNode;
|
|
156
|
+
/** Whether the sidebar is collapsed */
|
|
157
|
+
collapsed?: boolean;
|
|
158
|
+
/** Additional className for the shell */
|
|
159
|
+
className?: string;
|
|
160
|
+
}
|
|
161
|
+
/**
|
|
162
|
+
* InsightsShell - Analytics dashboard shell layout
|
|
163
|
+
*
|
|
164
|
+
* A layout component that provides the shell structure for analytics dashboards:
|
|
165
|
+
* - Optional collapsible sidebar on the left
|
|
166
|
+
* - Optional header at the top
|
|
167
|
+
* - Main content area with proper spacing
|
|
168
|
+
*
|
|
169
|
+
* Based on the Tremor insights template layout.
|
|
170
|
+
*
|
|
171
|
+
* @example
|
|
172
|
+
* ```tsx
|
|
173
|
+
* import { InsightsShell, InsightsSidebar } from '@mdxui/tremor/insights'
|
|
174
|
+
*
|
|
175
|
+
* <InsightsShell
|
|
176
|
+
* sidebar={<InsightsSidebar items={navItems} />}
|
|
177
|
+
* header={<header>Analytics Dashboard</header>}
|
|
178
|
+
* >
|
|
179
|
+
* <Dashboard />
|
|
180
|
+
* </InsightsShell>
|
|
181
|
+
* ```
|
|
182
|
+
*/
|
|
183
|
+
declare function InsightsShell({ children, sidebar, header, collapsed, className, }: InsightsShellProps): react_jsx_runtime.JSX.Element;
|
|
184
|
+
|
|
185
|
+
interface InsightsSidebarItem {
|
|
186
|
+
/** Unique identifier */
|
|
187
|
+
id: string;
|
|
188
|
+
/** Display label */
|
|
189
|
+
label: string;
|
|
190
|
+
/** Link href (optional - if not provided, item is non-clickable) */
|
|
191
|
+
href?: string;
|
|
192
|
+
/** Icon component or element (optional) */
|
|
193
|
+
icon?: ReactNode;
|
|
194
|
+
/** Is currently active */
|
|
195
|
+
active?: boolean;
|
|
196
|
+
/** Is disabled */
|
|
197
|
+
disabled?: boolean;
|
|
198
|
+
/** Click handler (if not using href) */
|
|
199
|
+
onClick?: () => void;
|
|
200
|
+
}
|
|
201
|
+
interface InsightsSidebarLogo {
|
|
202
|
+
/** Logo image URL */
|
|
203
|
+
src: string;
|
|
204
|
+
/** Alt text */
|
|
205
|
+
alt: string;
|
|
206
|
+
/** Link href (default: '/') */
|
|
207
|
+
href?: string;
|
|
208
|
+
/** Collapsed/icon version of logo */
|
|
209
|
+
collapsedSrc?: string;
|
|
210
|
+
}
|
|
211
|
+
interface InsightsSidebarProps {
|
|
212
|
+
/** Navigation items */
|
|
213
|
+
items: InsightsSidebarItem[];
|
|
214
|
+
/** Footer navigation items */
|
|
215
|
+
footerItems?: InsightsSidebarItem[];
|
|
216
|
+
/** Logo configuration */
|
|
217
|
+
logo?: InsightsSidebarLogo;
|
|
218
|
+
/** Whether sidebar is collapsed */
|
|
219
|
+
collapsed?: boolean;
|
|
220
|
+
/** Collapse toggle handler */
|
|
221
|
+
onCollapse?: () => void;
|
|
222
|
+
/** Header slot content */
|
|
223
|
+
header?: ReactNode;
|
|
224
|
+
/** Footer slot content */
|
|
225
|
+
footer?: ReactNode;
|
|
226
|
+
/** Additional className */
|
|
227
|
+
className?: string;
|
|
228
|
+
}
|
|
229
|
+
/**
|
|
230
|
+
* InsightsSidebar - Navigation sidebar for analytics dashboards
|
|
231
|
+
*
|
|
232
|
+
* A vertical navigation bar with collapsible sections,
|
|
233
|
+
* branding, and navigation items. Designed for the insights template.
|
|
234
|
+
*
|
|
235
|
+
* @example
|
|
236
|
+
* ```tsx
|
|
237
|
+
* import { InsightsSidebar } from '@mdxui/tremor/insights'
|
|
238
|
+
*
|
|
239
|
+
* const navItems = [
|
|
240
|
+
* { id: 'reports', label: 'Reports', href: '/reports', icon: <ChartIcon /> },
|
|
241
|
+
* { id: 'transactions', label: 'Transactions', href: '/transactions', icon: <TableIcon /> },
|
|
242
|
+
* ]
|
|
243
|
+
*
|
|
244
|
+
* <InsightsSidebar
|
|
245
|
+
* items={navItems}
|
|
246
|
+
* logo={{ src: '/logo.png', alt: 'Company' }}
|
|
247
|
+
* />
|
|
248
|
+
* ```
|
|
249
|
+
*/
|
|
250
|
+
declare function InsightsSidebar({ items, footerItems, logo, collapsed, onCollapse, header, footer, className, }: InsightsSidebarProps): react_jsx_runtime.JSX.Element;
|
|
251
|
+
|
|
252
|
+
/**
|
|
253
|
+
* Insights Template - Analytics Dashboard
|
|
254
|
+
*
|
|
255
|
+
* Implements Dashboard app components for analytics and reporting dashboards.
|
|
256
|
+
*
|
|
257
|
+
* @example
|
|
258
|
+
* ```tsx
|
|
259
|
+
* import { components, InsightsShell, InsightsSidebar } from '@mdxui/tremor/insights'
|
|
260
|
+
*
|
|
261
|
+
* const navItems = [
|
|
262
|
+
* { id: 'reports', label: 'Reports', href: '/reports' },
|
|
263
|
+
* { id: 'transactions', label: 'Transactions', href: '/transactions' },
|
|
264
|
+
* ]
|
|
265
|
+
*
|
|
266
|
+
* <InsightsShell
|
|
267
|
+
* sidebar={<InsightsSidebar items={navItems} />}
|
|
268
|
+
* header={<Header />}
|
|
269
|
+
* >
|
|
270
|
+
* <Dashboard />
|
|
271
|
+
* </InsightsShell>
|
|
272
|
+
* ```
|
|
273
|
+
*/
|
|
274
|
+
|
|
275
|
+
/**
|
|
276
|
+
* InsightsComponents - Type-safe component interface for Insights template
|
|
277
|
+
*
|
|
278
|
+
* This interface defines all the components available in the insights template
|
|
279
|
+
* and can be used for MDX component mapping.
|
|
280
|
+
*/
|
|
281
|
+
interface InsightsComponents {
|
|
282
|
+
Shell: typeof InsightsShell;
|
|
283
|
+
Sidebar: typeof InsightsSidebar;
|
|
284
|
+
KPICard: typeof KPICard;
|
|
285
|
+
AreaChart: typeof AreaChart;
|
|
286
|
+
BarChart: typeof BarChart;
|
|
287
|
+
DonutChart: typeof DonutChart;
|
|
288
|
+
BarChartVariant: typeof BarChartVariant;
|
|
289
|
+
TransactionChart: typeof TransactionChart;
|
|
290
|
+
TransactionsTable: typeof TransactionsTable;
|
|
291
|
+
}
|
|
292
|
+
/**
|
|
293
|
+
* components - Pre-built component mapping for MDX usage
|
|
294
|
+
*
|
|
295
|
+
* Use this object to provide components to MDX content or to
|
|
296
|
+
* access all insights components as a single import.
|
|
297
|
+
*
|
|
298
|
+
* @example
|
|
299
|
+
* ```tsx
|
|
300
|
+
* import { components } from '@mdxui/tremor/insights'
|
|
301
|
+
*
|
|
302
|
+
* // Use in MDX provider
|
|
303
|
+
* <MDXProvider components={components}>
|
|
304
|
+
* <Content />
|
|
305
|
+
* </MDXProvider>
|
|
306
|
+
*
|
|
307
|
+
* // Or destructure
|
|
308
|
+
* const { Shell, Sidebar, KPICard } = components
|
|
309
|
+
* ```
|
|
310
|
+
*/
|
|
311
|
+
declare const components: InsightsComponents;
|
|
312
|
+
|
|
313
|
+
/**
|
|
314
|
+
* AppComponents implementation for the Insights template.
|
|
315
|
+
*
|
|
316
|
+
* This object provides all required components for the mdxui AppComponents interface.
|
|
317
|
+
* Use this when you need a complete set of components for an Insights-style application.
|
|
318
|
+
*
|
|
319
|
+
* The Insights template provides:
|
|
320
|
+
* - Analytics-focused shell layouts with sidebar navigation
|
|
321
|
+
* - Navigation sidebar with clean, minimal design
|
|
322
|
+
* - Header bar with breadcrumbs and user profile
|
|
323
|
+
* - Dashboard page layout with metrics and content areas
|
|
324
|
+
* - Settings page with section navigation
|
|
325
|
+
* - Rich chart components (area, bar, donut, transaction charts)
|
|
326
|
+
* - KPI cards and data tables
|
|
327
|
+
*
|
|
328
|
+
* @example
|
|
329
|
+
* ```tsx
|
|
330
|
+
* import { AppComponents } from '@mdxui/tremor/insights'
|
|
331
|
+
*
|
|
332
|
+
* // Use with mdxui
|
|
333
|
+
* <MDXProvider components={AppComponents}>
|
|
334
|
+
* <App>
|
|
335
|
+
* <Shell>
|
|
336
|
+
* <Dashboard title="Analytics">
|
|
337
|
+
* <KPICard />
|
|
338
|
+
* <AreaChart />
|
|
339
|
+
* </Dashboard>
|
|
340
|
+
* </Shell>
|
|
341
|
+
* </App>
|
|
342
|
+
* </MDXProvider>
|
|
343
|
+
* ```
|
|
344
|
+
*/
|
|
345
|
+
declare const AppComponents: {
|
|
346
|
+
/** Root application wrapper */
|
|
347
|
+
readonly App: typeof InsightsApp;
|
|
348
|
+
/** Flexible shell layout for analytics */
|
|
349
|
+
readonly Shell: typeof InsightsShell;
|
|
350
|
+
/** Navigation sidebar */
|
|
351
|
+
readonly Sidebar: typeof InsightsSidebar;
|
|
352
|
+
/** Header bar component */
|
|
353
|
+
readonly Header: typeof InsightsHeader;
|
|
354
|
+
/** Dashboard page layout */
|
|
355
|
+
readonly Dashboard: typeof InsightsDashboard;
|
|
356
|
+
/** Settings page layout */
|
|
357
|
+
readonly Settings: typeof InsightsSettings;
|
|
358
|
+
};
|
|
359
|
+
|
|
360
|
+
export { AppComponents, AreaChart, BarChart, BarChartVariant, DonutChart, InsightsApp, type InsightsAppProps, type InsightsComponents, InsightsDashboard, type InsightsDashboardProps, InsightsHeader, type InsightsHeaderProps, InsightsSettings, type InsightsSettingsProps, InsightsShell, type InsightsShellProps, InsightsSidebar, type InsightsSidebarItem, type InsightsSidebarLogo, type InsightsSidebarProps, KPICard, InsightsShell as Shell, InsightsSidebar as Sidebar, TransactionChart, TransactionsTable, components };
|