erp-pro-ui 0.2.5 → 0.2.6

package/dist/chunks/dashboard-cards-BnPt0gDW.mjs

@@ -0,0 +1,2428 @@
+import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
+import { a as chartTooltipContentStyle, c as chartTooltipWrapperStyle, o as chartTooltipItemStyle, s as chartTooltipLabelStyle } from "./chartStyles-DPXgYmGn.mjs";
+import { t as TruncatedText } from "./truncated-text-DUYTW1KP.mjs";
+import { t as EllipsisVerticalIcon } from "./EllipsisVerticalIcon-C2b2KMfE.mjs";
+import { t as Button } from "./button-IDShmQqA.mjs";
+import { t as Tooltip$1 } from "./Tooltip-LbOKP__2.mjs";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Bar, BarChart, CartesianGrid, Cell, ComposedChart, LabelList, Line, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+//#region src/components/data-display/dashboard-cards/StatCard.tsx
+var TrendBadge$3 = ({ value, direction }) => {
+	const isUp = direction === "up";
+	const color = isUp ? "var(--ds-color-success)" : "var(--ds-color-danger)";
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-center gap-1 rounded-sm border px-1 py-0.5 text-[11px] font-semibold leading-none",
+		style: {
+			color,
+			borderColor: color,
+			backgroundColor: isUp ? "var(--ds-color-success-subtle)" : "var(--ds-color-danger-subtle)"
+		},
+		"aria-label": `${value} ${isUp ? "increase" : "decrease"}`,
+		children: [value, /* @__PURE__ */ jsx("svg", {
+			width: "10",
+			height: "10",
+			viewBox: "0 0 10 10",
+			fill: "none",
+			"aria-hidden": "true",
+			children: isUp ? /* @__PURE__ */ jsx("path", {
+				d: "M5 8V2M5 2L2 5M5 2L8 5",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}) : /* @__PURE__ */ jsx("path", {
+				d: "M5 2V8M5 8L2 5M5 8L8 5",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})]
+	});
+};
+var MenuButton = ({ onClick }) => /* @__PURE__ */ jsx(Button, {
+	variant: "tertiary",
+	size: "small",
+	className: "shrink-0 p-0.5! text-ds-3",
+	"aria-label": "More options",
+	onClick,
+	children: /* @__PURE__ */ jsx(EllipsisVerticalIcon, {
+		width: 18,
+		height: 18
+	})
+});
+var LegendDots = ({ items }) => /* @__PURE__ */ jsx("div", {
+	className: "flex items-center gap-3",
+	children: items.map((item) => /* @__PURE__ */ jsxs("span", {
+		className: "flex items-center gap-1.5 text-xs text-ds-2",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full",
+			style: { backgroundColor: item.color },
+			"aria-hidden": "true"
+		}), item.label]
+	}, item.label))
+});
+var StatCard = ({ size = "md", title, badge, value, dateRange, chart, chartPosition = "side", chartClassName, legend, className, onMenuClick }) => {
+	const base = mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className);
+	if (size === "sm") return /* @__PURE__ */ jsxs("div", {
+		className: mergeClassNames(base, "flex flex-col gap-7 p-5"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start justify-between gap-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-semibold text-ds-1",
+					children: title
+				}), badge && /* @__PURE__ */ jsx(TrendBadge$3, {
+					value: badge.value,
+					direction: badge.direction
+				})]
+			}), /* @__PURE__ */ jsx(MenuButton, { onClick: onMenuClick })]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-2xl font-bold tracking-tight text-ds-1 leading-none",
+				children: value
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-[10px] text-ds-3 mt-1",
+				children: dateRange
+			})]
+		})]
+	});
+	if (size === "md") {
+		const metricBlock = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1 min-w-0",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-3xl font-bold tracking-tight text-ds-1 leading-none",
+				children: value
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-[10px] text-ds-3 mt-1",
+				children: dateRange
+			})]
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			className: mergeClassNames(base, "flex flex-col gap-3 p-5"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-sm font-semibold text-ds-1",
+						children: title
+					}), badge && /* @__PURE__ */ jsx(TrendBadge$3, {
+						value: badge.value,
+						direction: badge.direction
+					})]
+				}), /* @__PURE__ */ jsx(MenuButton, { onClick: onMenuClick })]
+			}), chartPosition === "bottom" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [metricBlock, chart && /* @__PURE__ */ jsx("div", {
+				className: mergeClassNames("w-full pt-3", chartClassName),
+				children: chart
+			})] }) : /* @__PURE__ */ jsxs("div", {
+				className: "flex items-end justify-between gap-3",
+				children: [metricBlock, chart && /* @__PURE__ */ jsx("div", {
+					className: mergeClassNames("h-[46px] w-[155px] shrink-0 overflow-hidden", chartClassName),
+					children: chart
+				})]
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergeClassNames(base, "flex flex-col p-5"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-start justify-between gap-x-6 gap-y-2 mb-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-sm font-semibold text-ds-1",
+							children: title
+						}), badge && /* @__PURE__ */ jsx(TrendBadge$3, {
+							value: badge.value,
+							direction: badge.direction
+						})]
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-3xl font-bold tracking-tight text-ds-1 leading-none",
+						children: value
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-xs text-ds-3",
+						children: dateRange
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-4 ms-auto",
+				children: [legend && legend.length > 0 && /* @__PURE__ */ jsx(LegendDots, { items: legend }), /* @__PURE__ */ jsx(MenuButton, { onClick: onMenuClick })]
+			})]
+		}), chart && /* @__PURE__ */ jsx("div", {
+			className: mergeClassNames("border-t border-ds-border-2 pt-4 w-full", chartClassName),
+			children: chart
+		})]
+	});
+};
+//#endregion
+//#region src/components/data-display/dashboard-cards/ChartCard.tsx
+var ChartCard = ({ title, dateRange, legend, className, onMenuClick, children }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergeClassNames("flex flex-col gap-4 rounded-2xl border border-ds-border-2 bg-ds-surface-1 p-5", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-start justify-between gap-x-6 gap-y-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-0.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-semibold text-ds-color-fg",
+					children: title
+				}), dateRange && /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-ds-color-fg-subtle",
+					children: dateRange
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-4 ms-auto",
+				children: [legend && legend.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-3",
+					children: legend.map((item) => /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-1.5 text-xs text-ds-color-fg-muted",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "inline-block h-2.5 w-2.5 rounded-full shrink-0",
+							style: { backgroundColor: item.color },
+							"aria-hidden": "true"
+						}), item.label]
+					}, item.label))
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "tertiary",
+					size: "small",
+					className: "shrink-0 p-0.5! text-ds-color-fg-subtle",
+					"aria-label": "More options",
+					onClick: onMenuClick,
+					children: /* @__PURE__ */ jsx(EllipsisVerticalIcon, {
+						width: 18,
+						height: 18
+					})
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "w-full",
+			children
+		})]
+	});
+};
+//#endregion
+//#region src/components/data-display/dashboard-cards/TopProductsCard.tsx
+var RankBadge = ({ rank }) => /* @__PURE__ */ jsx("span", {
+	className: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border text-xs font-semibold  border-ds-border-3/80 ",
+	style: {
+		borderColor: "var(--ds-color-accent)",
+		color: "var(--ds-color-accent)"
+	},
+	"aria-label": `Rank ${rank}`,
+	children: rank
+});
+var ProductImage = ({ src, alt }) => {
+	if (src) return /* @__PURE__ */ jsx("img", {
+		src,
+		alt,
+		className: "h-11 w-11 shrink-0 rounded-md object-contain bg-ds-color-bg-utility p-1"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-md bg-ds-color-bg-utility text-ds-color-fg-subtle text-lg",
+		"aria-hidden": "true",
+		children: "□"
+	});
+};
+var TopProductsCard = ({ title = "Top Products", items, className, onMenuClick }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergeClassNames("flex flex-col rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mb-4 flex items-center justify-between",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm font-semibold text-ds-color-fg",
+				children: title
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "tertiary",
+				size: "small",
+				className: "shrink-0 p-0.5! text-ds-color-fg-subtle",
+				"aria-label": "More options",
+				onClick: onMenuClick,
+				children: /* @__PURE__ */ jsx(EllipsisVerticalIcon, {
+					width: 18,
+					height: 18
+				})
+			})]
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col divide-y divide-ds-border-2",
+			role: "list",
+			children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+				className: "flex items-center gap-3 py-3 first:pt-0 last:pb-0",
+				children: [
+					/* @__PURE__ */ jsx(ProductImage, {
+						src: item.image,
+						alt: item.name
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-1 flex-col gap-0.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate text-sm font-semibold text-ds-color-fg",
+							children: item.name
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "truncate text-xs text-ds-color-fg-subtle",
+							children: [
+								item.category,
+								" · ",
+								item.soldCount.toLocaleString(),
+								" sold"
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsx(RankBadge, { rank: item.rank })
+				]
+			}, item.id))
+		})]
+	});
+};
+//#endregion
+//#region src/components/data-display/dashboard-cards/EarningsCard.tsx
+var TrendBadge$2 = ({ value, direction }) => {
+	const isUp = direction === "up";
+	const color = isUp ? "var(--ds-color-success)" : "var(--ds-color-danger)";
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-center gap-1 rounded-sm border px-1.5 py-0.5 text-[11px] font-semibold leading-none",
+		style: {
+			color,
+			borderColor: color,
+			backgroundColor: isUp ? "var(--ds-color-success-subtle)" : "var(--ds-color-danger-subtle)"
+		},
+		"aria-label": `${value} ${isUp ? "increase" : "decrease"}`,
+		children: [value, /* @__PURE__ */ jsx("svg", {
+			width: "10",
+			height: "10",
+			viewBox: "0 0 10 10",
+			fill: "none",
+			"aria-hidden": "true",
+			children: isUp ? /* @__PURE__ */ jsx("path", {
+				d: "M5 8V2M5 2L2 5M5 2L8 5",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}) : /* @__PURE__ */ jsx("path", {
+				d: "M5 2V8M5 8L2 5M5 8L8 5",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})]
+	});
+};
+var BarChartSection = ({ weeklyData, barSize = 16, height = 90 }) => /* @__PURE__ */ jsx("div", {
+	style: { height },
+	children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+		width: "100%",
+		height: "100%",
+		children: /* @__PURE__ */ jsxs(BarChart, {
+			data: weeklyData,
+			barSize,
+			barCategoryGap: "25%",
+			margin: {
+				top: 4,
+				right: 0,
+				left: 0,
+				bottom: 0
+			},
+			children: [
+				/* @__PURE__ */ jsx(XAxis, {
+					dataKey: "day",
+					axisLine: false,
+					tickLine: false,
+					tick: {
+						fill: "var(--ds-color-fg-muted)",
+						fontSize: 10
+					},
+					dy: 6
+				}),
+				/* @__PURE__ */ jsx(Tooltip, {
+					contentStyle: chartTooltipContentStyle,
+					itemStyle: chartTooltipItemStyle,
+					labelStyle: chartTooltipLabelStyle,
+					wrapperStyle: chartTooltipWrapperStyle,
+					cursor: false
+				}),
+				/* @__PURE__ */ jsx(Bar, {
+					dataKey: "value",
+					radius: [
+						4,
+						4,
+						0,
+						0
+					],
+					children: weeklyData.map((entry, i) => /* @__PURE__ */ jsx(Cell, { fill: entry.highlighted ? "var(--ds-color-accent)" : "var(--ds-color-accent-subtle)" }, i))
+				})
+			]
+		})
+	})
+});
+var MetricsStrip = ({ metrics, large = false }) => /* @__PURE__ */ jsx("div", {
+	className: "mx-5 mb-5 rounded-lg border border-ds-border-3/60 bg-ds-surface-2/50 px-1 py-3",
+	children: /* @__PURE__ */ jsx("div", {
+		className: "grid grid-cols-3 divide-x divide-ds-border-3/50",
+		children: metrics.slice(0, 3).map((metric, i) => /* @__PURE__ */ jsxs("div", {
+			className: mergeClassNames("flex flex-col gap-2 px-4", large && "gap-3 px-5"),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1.5",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: mergeClassNames("inline-flex shrink-0 items-center justify-center rounded-full", large ? "h-6 w-6 text-xs" : "h-5 w-5 text-[10px]"),
+						style: {
+							backgroundColor: metric.color + "28",
+							color: metric.color
+						},
+						"aria-hidden": "true",
+						children: metric.icon
+					}), /* @__PURE__ */ jsx("span", {
+						className: mergeClassNames("truncate text-ds-2", large ? "text-sm" : "text-xs"),
+						children: metric.label
+					})]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: mergeClassNames("font-bold text-ds-1", large ? "text-base" : "text-sm"),
+					children: metric.value
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "h-[3px] w-full overflow-hidden rounded-full bg-ds-border-3/50",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "h-full rounded-full transition-all duration-500",
+						style: {
+							width: `${Math.min(100, Math.max(0, metric.progress))}%`,
+							backgroundColor: metric.color
+						}
+					})
+				})
+			]
+		}, i))
+	})
+});
+var EarningsCard = ({ title = "Earning Reports", subtitle = "Weekly Earnings Overview", value, badge, description, weeklyData, metrics, size = "md", className, onMenuClick }) => /* @__PURE__ */ jsxs("div", {
+	className: mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+	children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start justify-between px-5 pb-3 pt-5",
+			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+				className: "text-base font-bold text-ds-1",
+				children: title
+			}), subtitle && /* @__PURE__ */ jsx("p", {
+				className: "mt-0.5 text-xs text-ds-3",
+				children: subtitle
+			})] }), /* @__PURE__ */ jsx(Button, {
+				variant: "tertiary",
+				size: "small",
+				className: "shrink-0 p-0.5! text-ds-3",
+				"aria-label": "More options",
+				onClick: onMenuClick,
+				children: /* @__PURE__ */ jsx(EllipsisVerticalIcon, {
+					width: 18,
+					height: 18
+				})
+			})]
+		}),
+		size === "md" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-4 px-5 pb-5",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-4xl font-bold tracking-tight text-ds-1",
+						children: value
+					}), badge && /* @__PURE__ */ jsx(TrendBadge$2, {
+						value: badge.value,
+						direction: badge.direction
+					})]
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: "mt-2 max-w-[180px] text-xs leading-relaxed text-ds-3",
+					children: description
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "w-[185px] shrink-0",
+				children: /* @__PURE__ */ jsx(BarChartSection, {
+					weeklyData,
+					barSize: 16,
+					height: 90
+				})
+			})]
+		}), /* @__PURE__ */ jsx(MetricsStrip, { metrics })] }),
+		size === "lg" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "px-5 pb-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-5xl font-bold tracking-tight text-ds-1",
+						children: value
+					}), badge && /* @__PURE__ */ jsx(TrendBadge$2, {
+						value: badge.value,
+						direction: badge.direction
+					})]
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: "mt-2 text-sm leading-relaxed text-ds-3",
+					children: description
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "px-5 pb-5",
+				children: /* @__PURE__ */ jsx(BarChartSection, {
+					weeklyData,
+					barSize: 24,
+					height: 160
+				})
+			}),
+			/* @__PURE__ */ jsx(MetricsStrip, {
+				metrics,
+				large: true
+			})
+		] })
+	]
+});
+//#endregion
+//#region src/components/data-display/dashboard-cards/SupportTrackerCard.tsx
+function GaugeChart({ percentage, label = "Completed Task", size = 190 }) {
+	const segments = 26;
+	const filledCount = Math.round(percentage / 100 * segments);
+	const cx = size / 2;
+	const cy = size * .5;
+	const radius = size * .4;
+	const segW = size * .03;
+	const segH = size * .1;
+	const startAngle = 135;
+	const step = 270 / segments;
+	const viewH = Math.ceil(cy + radius * .78 + segH);
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "100%",
+		viewBox: `0 0 ${size} ${viewH}`,
+		style: { aspectRatio: `${size} / ${viewH}` },
+		"aria-label": `${percentage}% ${label}`,
+		role: "img",
+		children: [
+			Array.from({ length: segments }, (_, i) => {
+				const angleDeg = startAngle + (i + .5) * step;
+				const angleRad = angleDeg * Math.PI / 180;
+				const x = cx + radius * Math.cos(angleRad);
+				const y = cy + radius * Math.sin(angleRad);
+				const filled = i < filledCount;
+				return /* @__PURE__ */ jsx("rect", {
+					x: -segW / 2,
+					y: -segH / 2,
+					width: segW,
+					height: segH,
+					rx: segW / 2,
+					fill: filled ? "var(--ds-color-accent)" : "var(--ds-color-border-3)",
+					opacity: filled ? 1 : .45,
+					transform: `translate(${x}, ${y}) rotate(${angleDeg - 90})`
+				}, i);
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: cx,
+				y: cy - size * .04,
+				textAnchor: "middle",
+				dominantBaseline: "middle",
+				fontSize: size * .085,
+				fill: "var(--ds-color-fg-muted)",
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("text", {
+				x: cx,
+				y: cy + size * .12,
+				textAnchor: "middle",
+				dominantBaseline: "middle",
+				fontSize: size * .22,
+				fontWeight: "700",
+				fill: "var(--ds-color-fg)",
+				children: [percentage, "%"]
+			})
+		]
+	});
+}
+var SupportTrackerCard = ({ title = "Support Tracker", subtitle = "Last 7 Days", total, totalLabel = "Total Tickets", items, percentage, completedLabel = "Completed Task", className, onMenuClick }) => /* @__PURE__ */ jsxs("div", {
+	className: mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex items-start justify-between px-5 pb-3 pt-5",
+		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+			className: "text-base font-bold text-ds-1",
+			children: title
+		}), subtitle && /* @__PURE__ */ jsx("p", {
+			className: "mt-0.5 text-xs text-ds-3",
+			children: subtitle
+		})] }), /* @__PURE__ */ jsx(Button, {
+			variant: "tertiary",
+			size: "small",
+			className: "shrink-0 p-0.5! text-ds-3",
+			"aria-label": "More options",
+			onClick: onMenuClick,
+			children: /* @__PURE__ */ jsx(EllipsisVerticalIcon, {
+				width: 18,
+				height: 18
+			})
+		})]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-3 px-5 pb-6",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-[1_1_0] flex-col gap-5 min-w-0",
+			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+				className: "text-4xl font-bold tracking-tight text-ds-1",
+				children: total
+			}), /* @__PURE__ */ jsx("p", {
+				className: "mt-0.5 text-xs text-ds-3",
+				children: totalLabel
+			})] }), /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-3",
+				children: items.map((item, i) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-md",
+						style: {
+							backgroundColor: item.iconColor + "22",
+							color: item.iconColor
+						},
+						"aria-hidden": "true",
+						children: item.icon
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ jsx(Tooltip$1, {
+							content: item.label,
+							position: "top",
+							delayShow: 400,
+							children: /* @__PURE__ */ jsx(TruncatedText, {
+								showTitleOnHover: true,
+								className: "text-sm font-semibold text-ds-1",
+								children: item.label
+							})
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-xs text-ds-3",
+							children: item.value
+						})]
+					})]
+				}, i))
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex-[1_1_0] min-w-0",
+			children: /* @__PURE__ */ jsx(GaugeChart, {
+				percentage,
+				label: completedLabel,
+				size: 190
+			})
+		})]
+	})]
+});
+//#endregion
+//#region src/components/data-display/dashboard-cards/SalesOverviewCard.tsx
+var TrendBadge$1 = ({ value, direction }) => {
+	const isUp = direction === "up";
+	return /* @__PURE__ */ jsx("span", {
+		className: "text-sm font-semibold",
+		style: {
+			color: isUp ? "var(--ds-color-success)" : "var(--ds-color-danger)",
+			backgroundColor: isUp ? "var(--ds-color-success-subtle)" : "var(--ds-color-danger-subtle)"
+		},
+		"aria-label": `${value} ${isUp ? "increase" : "decrease"}`,
+		children: value
+	});
+};
+function parsePercent(s) {
+	return parseFloat(s.replace("%", "")) || 0;
+}
+var SalesOverviewCard = ({ title = "Sales Overview", badge, value, leftMetric, rightMetric, leftProgress, vsLabel = "VS", className }) => {
+	const leftPct = parsePercent(leftMetric.percentage);
+	const total = leftPct + parsePercent(rightMetric.percentage);
+	const resolvedLeftProgress = leftProgress ?? (total > 0 ? leftPct / total * 100 : 50);
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-1 flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-sm font-semibold text-ds-1",
+					children: title
+				}), badge && /* @__PURE__ */ jsx(TrendBadge$1, {
+					value: badge.value,
+					direction: badge.direction
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mb-5 text-3xl font-bold tracking-tight text-ds-1",
+				children: value
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative mb-5 flex items-start",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-1 flex-col gap-1",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1.5 text-xs text-ds-2",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "inline-flex h-6 w-6 items-center justify-center rounded-md",
+									style: {
+										backgroundColor: leftMetric.color + "20",
+										color: leftMetric.color
+									},
+									"aria-hidden": "true",
+									children: leftMetric.icon
+								}), /* @__PURE__ */ jsx("span", {
+									className: "font-medium",
+									children: leftMetric.label
+								})]
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "text-2xl font-bold text-ds-1",
+								children: leftMetric.percentage
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "text-xs text-ds-3",
+								children: leftMetric.count
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "relative flex flex-col items-center self-stretch",
+						children: [
+							/* @__PURE__ */ jsx("div", { className: "w-px flex-1 bg-ds-border-3" }),
+							/* @__PURE__ */ jsx("span", {
+								className: "my-2 flex h-7 w-7 items-center justify-center rounded-full border border-ds-border-3 bg-ds-surface-1 text-[9px] font-bold text-ds-3",
+								children: vsLabel
+							}),
+							/* @__PURE__ */ jsx("div", { className: "w-px flex-1 bg-ds-border-3" })
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-1 flex-col items-end gap-1",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1.5 text-xs text-ds-2",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "font-medium",
+									children: rightMetric.label
+								}), /* @__PURE__ */ jsx("span", {
+									className: "inline-flex h-6 w-6 items-center justify-center rounded-md",
+									style: {
+										backgroundColor: rightMetric.color + "20",
+										color: rightMetric.color
+									},
+									"aria-hidden": "true",
+									children: rightMetric.icon
+								})]
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "text-2xl font-bold text-ds-1",
+								children: rightMetric.percentage
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "text-xs text-ds-3",
+								children: rightMetric.count
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex h-2 w-full overflow-hidden rounded-full",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "h-full rounded-l-full transition-all duration-500",
+					style: {
+						width: `${resolvedLeftProgress}%`,
+						backgroundColor: leftMetric.color
+					}
+				}), /* @__PURE__ */ jsx("div", {
+					className: "h-full flex-1 rounded-r-full transition-all duration-500",
+					style: { backgroundColor: rightMetric.color }
+				})]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/data-display/dashboard-cards/RevenueGrowthCard.tsx
+var TrendBadge = ({ value, direction, color, bg }) => {
+	const isUp = direction === "up";
+	return /* @__PURE__ */ jsx("span", {
+		className: "inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-semibold",
+		style: {
+			color: color ?? (isUp ? "var(--ds-color-success)" : "var(--ds-color-danger)"),
+			backgroundColor: bg ?? (isUp ? "var(--ds-color-success-subtle)" : "var(--ds-color-danger-subtle)")
+		},
+		"aria-label": `${value} ${isUp ? "increase" : "decrease"}`,
+		children: value
+	});
+};
+var RevenueGrowthCard = ({ title = "Revenue Growth", subtitle = "Weekly Report", value, badge, weeklyData, highlightColor = "var(--ds-color-success)", barColor, className }) => {
+	const resolvedBarColor = barColor ?? highlightColor + "38";
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mb-4",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-base font-bold text-ds-1",
+				children: title
+			}), subtitle && /* @__PURE__ */ jsx("p", {
+				className: "mt-0.5 text-xs text-ds-3",
+				children: subtitle
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-end gap-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-4xl font-bold tracking-tight text-ds-1",
+					children: value
+				}), badge && /* @__PURE__ */ jsx(TrendBadge, {
+					value: badge.value,
+					direction: badge.direction,
+					color: highlightColor,
+					bg: highlightColor + "22"
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1 pb-1",
+				style: { height: 100 },
+				children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ jsxs(BarChart, {
+						data: weeklyData,
+						barSize: 14,
+						barCategoryGap: "25%",
+						margin: {
+							top: 4,
+							right: 0,
+							left: 0,
+							bottom: 0
+						},
+						children: [
+							/* @__PURE__ */ jsx(XAxis, {
+								dataKey: "day",
+								axisLine: false,
+								tickLine: false,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 10
+								},
+								dy: 6
+							}),
+							/* @__PURE__ */ jsx(Tooltip, {
+								contentStyle: chartTooltipContentStyle,
+								itemStyle: chartTooltipItemStyle,
+								labelStyle: chartTooltipLabelStyle,
+								wrapperStyle: chartTooltipWrapperStyle,
+								cursor: false
+							}),
+							/* @__PURE__ */ jsx(Bar, {
+								dataKey: "value",
+								radius: [
+									4,
+									4,
+									0,
+									0
+								],
+								children: weeklyData.map((entry, i) => /* @__PURE__ */ jsx(Cell, { fill: entry.highlighted ? highlightColor : resolvedBarColor }, i))
+							})
+						]
+					})
+				})
+			})]
+		})]
+	});
+};
+//#endregion
+//#region src/components/data-display/dashboard-cards/EarningReportsTabsCard.tsx
+function defaultKFormatter(value) {
+	if (value >= 1e3) return `${Math.round(value / 1e3)}k`;
+	return String(value);
+}
+var EarningReportsTabsCard = ({ title = "Earning Reports", subtitle = "Yearly Earnings Overview", tabs, selectedTabId, onTabChange, defaultTabId, yAxisFormatter = defaultKFormatter, barLabelFormatter, showAddTab = true, onAddTab, className, onMenuClick }) => {
+	const [internalId, setInternalId] = useState(defaultTabId ?? tabs[0]?.id ?? "");
+	const isControlled = selectedTabId !== void 0;
+	const activeId = isControlled ? selectedTabId : internalId;
+	const handleTabChange = (id) => {
+		if (!isControlled) setInternalId(id);
+		onTabChange?.(id);
+	};
+	const activeTab = tabs.find((t) => t.id === activeId) ?? tabs[0];
+	const labelFormatter = barLabelFormatter ?? yAxisFormatter;
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between px-5 pb-4 pt-5",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "text-base font-bold text-ds-1",
+					children: title
+				}), subtitle && /* @__PURE__ */ jsx("p", {
+					className: "mt-0.5 text-xs text-ds-3",
+					children: subtitle
+				})] }), /* @__PURE__ */ jsx(Button, {
+					variant: "tertiary",
+					size: "small",
+					className: "shrink-0 p-0.5! text-ds-3",
+					"aria-label": "More options",
+					onClick: onMenuClick,
+					children: /* @__PURE__ */ jsx(EllipsisVerticalIcon, {
+						width: 18,
+						height: 18
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3 overflow-x-auto px-5 pb-5",
+				children: [tabs.map((tab) => {
+					const isActive = tab.id === activeId;
+					return /* @__PURE__ */ jsxs(Button, {
+						variant: "tertiary",
+						onClick: () => handleTabChange(tab.id),
+						className: mergeClassNames("min-w-[72px] flex-col gap-1.5 rounded-lg border p-3 transition-colors hover:opacity-100", isActive ? "border-ds-accent bg-ds-accent-subtle text-ds-accent" : "border-ds-border-3 bg-ds-surface-1 text-ds-2 hover:border-ds-border-accent/30 hover:bg-ds-surface-2"),
+						"aria-pressed": isActive,
+						"aria-label": tab.label,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "flex h-6 w-6 items-center justify-center",
+							children: tab.icon
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-xs font-semibold",
+							children: tab.label
+						})]
+					}, tab.id);
+				}), showAddTab && /* @__PURE__ */ jsx(Button, {
+					variant: "tertiary",
+					onClick: onAddTab,
+					className: "min-w-[72px] flex-col gap-1.5 rounded-lg border border-dashed border-ds-border-3 p-3 text-ds-3 transition-colors hover:border-ds-border-2 hover:bg-ds-surface-2 hover:text-ds-2 hover:opacity-100",
+					"aria-label": "Add category",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "flex h-6 w-6 items-center justify-center text-lg font-light",
+						children: "+"
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "px-2 pb-5",
+				style: { height: 280 },
+				children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ jsxs(BarChart, {
+						data: activeTab?.chartData ?? [],
+						barSize: 36,
+						barCategoryGap: "25%",
+						margin: {
+							top: 28,
+							right: 16,
+							left: 0,
+							bottom: 0
+						},
+						children: [
+							/* @__PURE__ */ jsx(CartesianGrid, {
+								strokeDasharray: "3 3",
+								vertical: false,
+								stroke: "var(--ds-color-border)",
+								opacity: .5
+							}),
+							/* @__PURE__ */ jsx(XAxis, {
+								dataKey: "name",
+								axisLine: false,
+								tickLine: false,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 12
+								},
+								dy: 10
+							}),
+							/* @__PURE__ */ jsx(YAxis, {
+								axisLine: false,
+								tickLine: false,
+								tickFormatter: yAxisFormatter,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 11
+								},
+								dx: -4
+							}),
+							/* @__PURE__ */ jsx(Tooltip, {
+								contentStyle: chartTooltipContentStyle,
+								itemStyle: chartTooltipItemStyle,
+								labelStyle: chartTooltipLabelStyle,
+								wrapperStyle: chartTooltipWrapperStyle,
+								cursor: {
+									fill: "var(--ds-color-accent)",
+									fillOpacity: .06
+								},
+								formatter: (v) => [labelFormatter(Number(v)), activeTab?.label]
+							}),
+							/* @__PURE__ */ jsxs(Bar, {
+								dataKey: "value",
+								radius: [
+									4,
+									4,
+									0,
+									0
+								],
+								children: [/* @__PURE__ */ jsx(LabelList, {
+									dataKey: "value",
+									position: "top",
+									formatter: (v) => labelFormatter(Number(v)),
+									style: {
+										fontSize: 11,
+										fill: "var(--ds-color-fg-muted)",
+										fontWeight: 600
+									}
+								}), (activeTab?.chartData ?? []).map((entry, i) => /* @__PURE__ */ jsx(Cell, { fill: entry.highlighted ? "var(--ds-color-accent)" : "var(--ds-color-accent-subtle)" }, i))]
+							})
+						]
+					})
+				})
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/data-display/dashboard-cards/TopicsCard.tsx
+function BarLabel({ x = 0, y = 0, width = 0, height = 0, value = "" }) {
+	const pad = 10;
+	const availW = width - pad * 2;
+	if (availW < 24) return null;
+	return /* @__PURE__ */ jsx("foreignObject", {
+		x: x + pad,
+		y,
+		width: availW,
+		height,
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				height: "100%",
+				display: "flex",
+				alignItems: "center",
+				overflow: "hidden"
+			},
+			children: /* @__PURE__ */ jsx(TruncatedText, {
+				showTitleOnHover: true,
+				style: {
+					color: "#fff",
+					fontSize: 12,
+					fontWeight: 600,
+					lineHeight: 1
+				},
+				children: value
+			})
+		})
+	});
+}
+var TopicsCard = ({ title = "Topic you are interested in", items, xTickFormatter = (v) => `${v}%`, className, onMenuClick }) => {
+	const chartData = [...items].sort((a, b) => b.percentage - a.percentage).map((item, i) => ({
+		...item,
+		rank: items.length - i
+	}));
+	const maxValue = Math.max(...items.map((it) => it.percentage), 1);
+	const xMax = Math.ceil(maxValue / 7) * 7;
+	const xTicks = Array.from({ length: Math.floor(xMax / 7) + 1 }, (_, i) => i * 7);
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start justify-between px-5 pb-4 pt-5",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-base font-bold text-ds-1",
+				children: title
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "tertiary",
+				size: "small",
+				className: "shrink-0 p-0.5! text-ds-3",
+				"aria-label": "More options",
+				onClick: onMenuClick,
+				children: /* @__PURE__ */ jsx(EllipsisVerticalIcon, {
+					width: 18,
+					height: 18
+				})
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-4 px-5 pb-6",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1",
+				style: { height: items.length * 42 + 32 },
+				children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ jsxs(BarChart, {
+						data: chartData,
+						layout: "vertical",
+						barSize: 28,
+						barCategoryGap: "20%",
+						margin: {
+							top: 0,
+							right: 16,
+							left: 8,
+							bottom: 24
+						},
+						children: [
+							/* @__PURE__ */ jsx(CartesianGrid, {
+								strokeDasharray: "3 3",
+								horizontal: false,
+								stroke: "var(--ds-color-border)",
+								opacity: .5
+							}),
+							/* @__PURE__ */ jsx(XAxis, {
+								type: "number",
+								domain: [0, xMax],
+								ticks: xTicks,
+								tickFormatter: xTickFormatter,
+								axisLine: false,
+								tickLine: false,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 11
+								},
+								dy: 10
+							}),
+							/* @__PURE__ */ jsx(YAxis, {
+								type: "category",
+								dataKey: "rank",
+								axisLine: false,
+								tickLine: false,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 11
+								},
+								dx: -4,
+								width: 16
+							}),
+							/* @__PURE__ */ jsx(Tooltip, {
+								contentStyle: chartTooltipContentStyle,
+								itemStyle: chartTooltipItemStyle,
+								labelStyle: chartTooltipLabelStyle,
+								wrapperStyle: chartTooltipWrapperStyle,
+								cursor: { fill: "rgba(0,0,0,0.04)" },
+								formatter: (v, _name, props) => [`${Number(v)}%`, props.payload?.label ?? ""],
+								labelFormatter: () => ""
+							}),
+							/* @__PURE__ */ jsxs(Bar, {
+								dataKey: "percentage",
+								radius: [
+									0,
+									4,
+									4,
+									0
+								],
+								children: [/* @__PURE__ */ jsx(LabelList, {
+									dataKey: "label",
+									content: (props) => /* @__PURE__ */ jsx(BarLabel, { ...props })
+								}), chartData.map((entry, i) => /* @__PURE__ */ jsx(Cell, { fill: entry.color }, i))]
+							})
+						]
+					})
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "grid shrink-0 grid-cols-2 gap-x-6 gap-y-4",
+				children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-0.5",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full",
+							style: { backgroundColor: item.color },
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-xs text-ds-2",
+							children: item.label
+						})]
+					}), /* @__PURE__ */ jsxs("p", {
+						className: "ps-4 text-sm font-bold text-ds-1",
+						children: [item.percentage, "%"]
+					})]
+				}, item.label))
+			})]
+		})]
+	});
+};
+//#endregion
+//#region src/components/data-display/dashboard-cards/ShipmentStatisticsCard.tsx
+var ChevronDownIcon$2 = () => /* @__PURE__ */ jsx("svg", {
+	width: "13",
+	height: "13",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+});
+var ShipmentStatisticsCard = ({ title = "Shipment statistics", subtitle, data, months = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+], selectedMonth: controlledMonth, onMonthChange, defaultMonth, yAxisFormatter = (v) => `${v}%`, shipmentColor = "#FFB400", deliveryColor = "#7367F0", shipmentLabel = "Shipment", deliveryLabel = "Delivery", className }) => {
+	const isControlled = controlledMonth !== void 0;
+	const [internalMonth, setInternalMonth] = useState(defaultMonth ?? months[0] ?? "");
+	const activeMonth = isControlled ? controlledMonth : internalMonth;
+	const [dropdownOpen, setDropdownOpen] = useState(false);
+	const dropdownRef = useRef(null);
+	useEffect(() => {
+		function handleClickOutside(e) {
+			if (dropdownRef.current && !dropdownRef.current.contains(e.target)) setDropdownOpen(false);
+		}
+		if (dropdownOpen) document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, [dropdownOpen]);
+	const handleMonthSelect = (m) => {
+		if (!isControlled) setInternalMonth(m);
+		onMonthChange?.(m);
+		setDropdownOpen(false);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-5 flex items-start justify-between gap-4",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "text-lg font-bold text-ds-1",
+					children: title
+				}), subtitle && /* @__PURE__ */ jsx("p", {
+					className: "mt-0.5 text-sm text-ds-3",
+					children: subtitle
+				})] }), /* @__PURE__ */ jsxs("div", {
+					ref: dropdownRef,
+					className: "relative shrink-0",
+					children: [/* @__PURE__ */ jsxs(Button, {
+						variant: "tertiary",
+						size: "small",
+						onClick: () => setDropdownOpen((o) => !o),
+						className: "gap-1.5 rounded-md border border-ds-border-accent/30 bg-ds-accent-subtle px-3 py-1.5 text-sm font-semibold text-ds-accent hover:bg-ds-accent-subtle/80 hover:opacity-100",
+						"aria-haspopup": "listbox",
+						"aria-expanded": dropdownOpen,
+						children: [activeMonth, /* @__PURE__ */ jsx("span", {
+							className: mergeClassNames("transition-transform duration-150", dropdownOpen ? "rotate-180" : ""),
+							children: /* @__PURE__ */ jsx(ChevronDownIcon$2, {})
+						})]
+					}), dropdownOpen && /* @__PURE__ */ jsx("div", {
+						role: "listbox",
+						className: "absolute end-0 top-full z-20 mt-1 max-h-48 min-w-[130px] overflow-y-auto rounded-md border border-ds-border-2 bg-ds-surface-1 py-1 shadow-lg",
+						children: months.map((m) => /* @__PURE__ */ jsx(Button, {
+							variant: "tertiary",
+							size: "small",
+							role: "option",
+							"aria-selected": m === activeMonth,
+							onClick: () => handleMonthSelect(m),
+							className: mergeClassNames("w-full justify-start rounded-none px-3 py-1.5 text-start text-sm hover:bg-ds-surface-2 hover:opacity-100", m === activeMonth ? "font-semibold text-ds-accent" : "text-ds-2"),
+							children: m
+						}, m))
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: { height: 260 },
+				children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ jsxs(ComposedChart, {
+						data,
+						barSize: 22,
+						barCategoryGap: "30%",
+						margin: {
+							top: 8,
+							right: 8,
+							left: 0,
+							bottom: 0
+						},
+						children: [
+							/* @__PURE__ */ jsx(CartesianGrid, {
+								strokeDasharray: "3 3",
+								vertical: false,
+								stroke: "var(--ds-color-border)",
+								opacity: .5
+							}),
+							/* @__PURE__ */ jsx(XAxis, {
+								dataKey: "date",
+								axisLine: false,
+								tickLine: false,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 12
+								},
+								dy: 10
+							}),
+							/* @__PURE__ */ jsx(YAxis, {
+								axisLine: false,
+								tickLine: false,
+								tickFormatter: yAxisFormatter,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 11
+								},
+								dx: -4,
+								domain: [0, "auto"]
+							}),
+							/* @__PURE__ */ jsx(Tooltip, {
+								contentStyle: chartTooltipContentStyle,
+								itemStyle: chartTooltipItemStyle,
+								labelStyle: chartTooltipLabelStyle,
+								wrapperStyle: chartTooltipWrapperStyle,
+								cursor: { fill: "rgba(0,0,0,0.04)" },
+								formatter: (v, name) => [yAxisFormatter(Number(v)), name === "shipment" ? shipmentLabel : deliveryLabel]
+							}),
+							/* @__PURE__ */ jsx(Bar, {
+								dataKey: "shipment",
+								fill: shipmentColor,
+								radius: [
+									4,
+									4,
+									0,
+									0
+								]
+							}),
+							/* @__PURE__ */ jsx(Line, {
+								type: "monotone",
+								dataKey: "delivery",
+								stroke: deliveryColor,
+								strokeWidth: 2.5,
+								dot: {
+									r: 3.5,
+									fill: deliveryColor,
+									strokeWidth: 0
+								},
+								activeDot: {
+									r: 5,
+									fill: deliveryColor,
+									strokeWidth: 0
+								}
+							})
+						]
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-4 flex items-center justify-center gap-6",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full",
+						style: { backgroundColor: shipmentColor },
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-sm text-ds-2",
+						children: shipmentLabel
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full",
+						style: { backgroundColor: deliveryColor },
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-sm text-ds-2",
+						children: deliveryLabel
+					})]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/data-display/dashboard-cards/VehicleConditionCard.tsx
+var MiniGauge = ({ percentage, color, size = 62 }) => {
+	const strokeWidth = 4;
+	const r = (size - strokeWidth * 2) / 2;
+	const cx = size / 2;
+	const cy = size / 2;
+	const circumference = 2 * Math.PI * r;
+	const clamped = Math.max(0, Math.min(100, percentage));
+	const dashOffset = circumference - clamped / 100 * circumference;
+	return /* @__PURE__ */ jsxs("svg", {
+		width: size,
+		height: size,
+		viewBox: `0 0 ${size} ${size}`,
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx,
+				cy,
+				r,
+				fill: "none",
+				stroke: "var(--ds-color-border)",
+				strokeWidth
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx,
+				cy,
+				r,
+				fill: "none",
+				stroke: color,
+				strokeWidth,
+				strokeDasharray: circumference,
+				strokeDashoffset: dashOffset,
+				strokeLinecap: "round",
+				transform: `rotate(-90 ${cx} ${cy})`
+			}),
+			/* @__PURE__ */ jsxs("text", {
+				x: cx,
+				y: cy,
+				textAnchor: "middle",
+				dominantBaseline: "middle",
+				fontSize: size * .21,
+				fontWeight: "700",
+				fill: "var(--ds-color-fg)",
+				children: [clamped, "%"]
+			})
+		]
+	});
+};
+var VehicleConditionCard = ({ title = "Vehicle Condition", items, className, onMenuClick }) => /* @__PURE__ */ jsxs("div", {
+	className: mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex items-start justify-between px-5 pb-2 pt-5",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-base font-bold text-ds-1",
+			children: title
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "tertiary",
+			size: "small",
+			className: "shrink-0 p-0.5! text-ds-3",
+			"aria-label": "More options",
+			onClick: onMenuClick,
+			children: /* @__PURE__ */ jsx(EllipsisVerticalIcon, {
+				width: 18,
+				height: 18
+			})
+		})]
+	}), /* @__PURE__ */ jsx("div", {
+		className: "divide-y divide-ds-border-3/50 px-5 pb-4",
+		children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-4 py-3",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "shrink-0",
+					children: /* @__PURE__ */ jsx(MiniGauge, {
+						percentage: item.percentage,
+						color: item.color
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm font-semibold leading-tight",
+						style: { color: item.color },
+						children: item.label
+					}), /* @__PURE__ */ jsx("p", {
+						className: "mt-0.5 text-xs text-ds-3",
+						children: item.sublabel
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "shrink-0 rounded-md bg-ds-surface-2 px-2.5 py-1 text-xs font-semibold text-ds-2",
+					children: item.badge
+				})
+			]
+		}, item.label))
+	})]
+});
+//#endregion
+//#region src/components/data-display/dashboard-cards/VehiclesOverviewCard.tsx
+var VehiclesOverviewCard = ({ title = "Vehicles Overview", items, className, onMenuClick }) => {
+	const totalPct = items.reduce((sum, item) => sum + item.percentage, 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between px-5 pb-2 pt-5",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-base font-bold text-ds-1",
+					children: title
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "tertiary",
+					size: "small",
+					className: "shrink-0 p-0.5! text-ds-3",
+					"aria-label": "More options",
+					onClick: onMenuClick,
+					children: /* @__PURE__ */ jsx(EllipsisVerticalIcon, {
+						width: 18,
+						height: 18
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center px-5 pb-3",
+				children: items.map((item, i) => /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-1 items-center",
+					children: [i > 0 && /* @__PURE__ */ jsx("div", { className: "me-3 h-8 w-px shrink-0 bg-ds-border-3/60" }), /* @__PURE__ */ jsx("span", {
+						className: "text-xs font-medium text-ds-3",
+						children: item.label
+					})]
+				}, item.label))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "mx-5 mb-5 flex h-3 overflow-hidden rounded-full",
+				children: items.map((item, i) => {
+					return /* @__PURE__ */ jsx("div", {
+						style: {
+							width: `${totalPct > 0 ? item.percentage / totalPct * 100 : 0}%`,
+							backgroundColor: item.color
+						},
+						className: mergeClassNames("h-full transition-all", i === 0 && "rounded-s-full", i === items.length - 1 && "rounded-e-full"),
+						role: "presentation",
+						"aria-label": `${item.label}: ${item.percentage}%`
+					}, item.label);
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "divide-y divide-ds-border-3/50 px-5 pb-4",
+				children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3 py-3",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "flex size-9 shrink-0 items-center justify-center rounded-full",
+							style: { backgroundColor: `${item.color}1a` },
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx("span", {
+								style: { color: item.color },
+								className: "flex items-center",
+								children: item.icon
+							})
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 text-sm font-medium text-ds-2",
+							children: item.label
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-sm font-bold text-ds-1",
+							children: item.duration
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "w-12 text-end text-xs font-semibold text-ds-3",
+							children: [item.percentage, "%"]
+						})
+					]
+				}, item.label))
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/data-display/dashboard-cards/StockAvailabilityCard.tsx
+var AVAILABLE_COLOR = "#0ABFBC";
+var LOW_STOCK_COLOR = "#FFC107";
+var OUT_OF_STOCK_COLOR = "#FF5B5C";
+var StockAvailabilityCard = ({ title = "Stock Availability", totalAsset = "$53,000", totalProduct = 442, availability = {
+	available: 62,
+	lowStock: 28,
+	outOfStock: 10
+}, lowStockItems = [], onViewAll, className, onMenuClick }) => {
+	const { available, lowStock, outOfStock } = availability;
+	const total = available + lowStock + outOfStock || 100;
+	const segments = [
+		{
+			label: "Available",
+			color: AVAILABLE_COLOR,
+			pct: available
+		},
+		{
+			label: "Low Stock",
+			color: LOW_STOCK_COLOR,
+			pct: lowStock
+		},
+		{
+			label: "Out of stock",
+			color: OUT_OF_STOCK_COLOR,
+			pct: outOfStock
+		}
+	];
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between px-5 pb-3 pt-5",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-base font-bold text-ds-1",
+					children: title
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "tertiary",
+					size: "small",
+					className: "shrink-0 p-0.5! text-ds-3",
+					"aria-label": "More options",
+					onClick: onMenuClick,
+					children: /* @__PURE__ */ jsx(EllipsisVerticalIcon, {
+						width: 18,
+						height: 18
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-2 divide-x divide-ds-border-3/50 border-b border-ds-border-3/50 px-5 pb-5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "pe-4",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-[10px] font-medium uppercase tracking-wide text-ds-3",
+						children: "Total Asset"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "mt-1 text-2xl font-bold text-ds-1",
+						children: totalAsset
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "ps-4",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-[10px] font-medium uppercase tracking-wide text-ds-3",
+						children: "Total Product"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "mt-1 text-2xl font-bold text-ds-1",
+						children: totalProduct.toLocaleString()
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "px-5 py-4",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex h-2 w-full overflow-hidden rounded-full",
+					children: segments.map(({ label, color, pct }) => /* @__PURE__ */ jsx("div", {
+						style: {
+							width: `${pct / total * 100}%`,
+							backgroundColor: color
+						},
+						"aria-hidden": "true"
+					}, label))
+				}), /* @__PURE__ */ jsx("div", {
+					className: "mt-3 flex flex-wrap gap-x-4 gap-y-1.5",
+					children: segments.map(({ label, color, pct }) => /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1.5",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "h-2 w-2 shrink-0 rounded-full",
+								style: { backgroundColor: color },
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-xs text-ds-2",
+								children: label
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "text-xs font-semibold text-ds-1",
+								children: [pct, "%"]
+							})
+						]
+					}, label))
+				})]
+			}),
+			lowStockItems.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "border-t border-ds-border-3/50",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between px-5 py-3",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-xs font-bold uppercase tracking-wide text-ds-1",
+						children: "Low Stock"
+					}), onViewAll && /* @__PURE__ */ jsx(Button, {
+						variant: "tertiary",
+						size: "small",
+						onClick: onViewAll,
+						className: "p-0! text-xs text-ds-accent hover:opacity-100",
+						children: "View all"
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "pb-2",
+					children: lowStockItems.map((item) => /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between gap-2 px-5 py-2",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "truncate text-sm font-medium text-ds-1",
+							children: item.name
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex shrink-0 items-center gap-3",
+							children: [/* @__PURE__ */ jsxs("span", {
+								className: "text-xs text-ds-3",
+								children: ["Qty: ", item.qty]
+							}), /* @__PURE__ */ jsx(Button, {
+								variant: "secondary",
+								size: "small",
+								onClick: item.onOrder,
+								className: "h-7 rounded-md px-3 text-xs",
+								children: "Order"
+							})]
+						})]
+					}, item.id))
+				})]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/data-display/dashboard-cards/ExpensesCard.tsx
+var DEFAULT_EXPENSES = [
+	{
+		label: "Internet",
+		percentage: 45,
+		color: "#7367F0"
+	},
+	{
+		label: "Electricity",
+		percentage: 26,
+		color: "#00CFE8"
+	},
+	{
+		label: "Transactions",
+		percentage: 22,
+		color: "#28C76F"
+	},
+	{
+		label: "Rental Cost",
+		percentage: 8,
+		color: "#FF9F43"
+	},
+	{
+		label: "Foods",
+		percentage: 3,
+		color: "#EA5455"
+	},
+	{
+		label: "Other",
+		percentage: 2,
+		color: "#82868B"
+	}
+];
+var DEFAULT_TOP = [
+	{
+		label: "Internet",
+		value: "$59.46",
+		color: "#7367F0"
+	},
+	{
+		label: "Electricity",
+		value: "$34.41",
+		color: "#00CFE8"
+	},
+	{
+		label: "Transactions",
+		value: "$29.12",
+		color: "#28C76F"
+	},
+	{
+		label: "Rental Cost",
+		value: "$10.58",
+		color: "#FF9F43"
+	}
+];
+var ChevronDownIcon$1 = () => /* @__PURE__ */ jsx("svg", {
+	width: "13",
+	height: "13",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+});
+var ExpensesCard = ({ title = "Expenses", totalExpense = "$132.34", expenses = DEFAULT_EXPENSES, topExpenses = DEFAULT_TOP, periods = [
+	"Last 6 months",
+	"Last 3 months",
+	"Last year"
+], defaultPeriod, selectedPeriod: controlledPeriod, onPeriodChange, className }) => {
+	const isControlled = controlledPeriod !== void 0;
+	const [internalPeriod, setInternalPeriod] = useState(defaultPeriod ?? periods[0] ?? "");
+	const activePeriod = isControlled ? controlledPeriod : internalPeriod;
+	const [dropdownOpen, setDropdownOpen] = useState(false);
+	const dropdownRef = useRef(null);
+	useEffect(() => {
+		function handleClickOutside(e) {
+			if (dropdownRef.current && !dropdownRef.current.contains(e.target)) setDropdownOpen(false);
+		}
+		if (dropdownOpen) document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, [dropdownOpen]);
+	const handlePeriodSelect = (p) => {
+		if (!isControlled) setInternalPeriod(p);
+		onPeriodChange?.(p);
+		setDropdownOpen(false);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between px-5 pb-3 pt-5",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-base font-bold text-ds-1",
+					children: title
+				}), /* @__PURE__ */ jsxs("div", {
+					ref: dropdownRef,
+					className: "relative shrink-0",
+					children: [/* @__PURE__ */ jsxs(Button, {
+						variant: "tertiary",
+						size: "small",
+						onClick: () => setDropdownOpen((o) => !o),
+						className: "gap-1.5 rounded-md border border-ds-border-accent/30 bg-ds-accent-subtle px-3 py-1.5 text-sm font-semibold text-ds-accent hover:bg-ds-accent-subtle/80 hover:opacity-100",
+						"aria-haspopup": "listbox",
+						"aria-expanded": dropdownOpen,
+						children: [activePeriod, /* @__PURE__ */ jsx("span", {
+							className: mergeClassNames("transition-transform duration-150", dropdownOpen ? "rotate-180" : ""),
+							children: /* @__PURE__ */ jsx(ChevronDownIcon$1, {})
+						})]
+					}), dropdownOpen && /* @__PURE__ */ jsx("div", {
+						role: "listbox",
+						className: "absolute end-0 top-full z-20 mt-1 min-w-[160px] overflow-y-auto rounded-md border border-ds-border-2 bg-ds-surface-1 py-1 shadow-lg",
+						children: periods.map((p) => /* @__PURE__ */ jsx(Button, {
+							variant: "tertiary",
+							size: "small",
+							role: "option",
+							"aria-selected": p === activePeriod,
+							onClick: () => handlePeriodSelect(p),
+							className: mergeClassNames("w-full justify-start rounded-none px-3 py-1.5 text-start text-sm hover:bg-ds-surface-2 hover:opacity-100", p === activePeriod ? "font-semibold text-ds-accent" : "text-ds-2"),
+							children: p
+						}, p))
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-4 px-5 pb-5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "relative shrink-0",
+					style: {
+						width: 160,
+						height: 160
+					},
+					children: [/* @__PURE__ */ jsx(ResponsiveContainer, {
+						width: "100%",
+						height: "100%",
+						children: /* @__PURE__ */ jsxs(PieChart, { children: [/* @__PURE__ */ jsx(Pie, {
+							data: expenses,
+							cx: "50%",
+							cy: "50%",
+							innerRadius: 52,
+							outerRadius: 72,
+							dataKey: "percentage",
+							paddingAngle: 2,
+							startAngle: 90,
+							endAngle: -270,
+							children: expenses.map((entry, i) => /* @__PURE__ */ jsx(Cell, { fill: entry.color }, i))
+						}), /* @__PURE__ */ jsx(Tooltip, {
+							contentStyle: chartTooltipContentStyle,
+							itemStyle: chartTooltipItemStyle,
+							labelStyle: chartTooltipLabelStyle,
+							wrapperStyle: chartTooltipWrapperStyle,
+							formatter: (v, _name, props) => [`${v}%`, props.payload.label]
+						})] })
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-[10px] leading-none text-ds-3",
+							children: "Total Expense"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "mt-1 text-base font-bold leading-none text-ds-1",
+							children: totalExpense
+						})]
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-2",
+					children: expenses.map((e) => /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "h-2.5 w-2.5 shrink-0 rounded-full",
+								style: { backgroundColor: e.color },
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "flex-1 truncate text-xs text-ds-2",
+								children: e.label
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "text-xs font-semibold text-ds-1",
+								children: [e.percentage, "%"]
+							})
+						]
+					}, e.label))
+				})]
+			}),
+			topExpenses.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "border-t border-ds-border-3/50 px-5 pb-5 pt-4",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "mb-3 text-[10px] font-bold uppercase tracking-wide text-ds-3",
+					children: "Top Expense"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "grid grid-cols-2 gap-3",
+					children: topExpenses.map((item) => /* @__PURE__ */ jsxs("div", {
+						className: "flex items-start gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "mt-0.5 h-2.5 w-2.5 shrink-0 rounded-full",
+							style: { backgroundColor: item.color },
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "truncate text-xs text-ds-3",
+								children: item.label
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-sm font-bold text-ds-1",
+								children: item.value
+							})]
+						})]
+					}, item.label))
+				})]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/data-display/dashboard-cards/IncomeExpenseCard.tsx
+var DEFAULT_DATA = [
+	{
+		month: "JAN",
+		income: 800,
+		expense: 400
+	},
+	{
+		month: "FEB",
+		income: 1e3,
+		expense: 500
+	},
+	{
+		month: "MAR",
+		income: 1412,
+		expense: 612,
+		highlighted: true
+	},
+	{
+		month: "APR",
+		income: 900,
+		expense: 450
+	},
+	{
+		month: "MAY",
+		income: 1100,
+		expense: 520
+	},
+	{
+		month: "JUN",
+		income: 950,
+		expense: 480
+	}
+];
+var ChevronDownIcon = () => /* @__PURE__ */ jsx("svg", {
+	width: "13",
+	height: "13",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+});
+var TrendLabel = ({ value, direction }) => /* @__PURE__ */ jsxs("span", {
+	className: "text-xs font-semibold",
+	style: { color: direction === "up" ? "var(--ds-color-success)" : "var(--ds-color-danger)" },
+	children: [
+		direction === "up" ? "▲" : "▼",
+		" ",
+		value
+	]
+});
+var IncomeExpenseCard = ({ title = "Income & Expense", totalIncome = "$1,412", incomeBadge = {
+	value: "4.51%",
+	direction: "up"
+}, totalExpenses = "$612.34", expensesBadge = {
+	value: "2.41%",
+	direction: "down"
+}, data = DEFAULT_DATA, incomeColor = "#28C76F", expenseColor = "#FFC107", periods = [
+	"Last 6 months",
+	"Last 3 months",
+	"Last year"
+], defaultPeriod, selectedPeriod: controlledPeriod, onPeriodChange, className }) => {
+	const isControlled = controlledPeriod !== void 0;
+	const [internalPeriod, setInternalPeriod] = useState(defaultPeriod ?? periods[0] ?? "");
+	const activePeriod = isControlled ? controlledPeriod : internalPeriod;
+	const [dropdownOpen, setDropdownOpen] = useState(false);
+	const dropdownRef = useRef(null);
+	useEffect(() => {
+		function handleClickOutside(e) {
+			if (dropdownRef.current && !dropdownRef.current.contains(e.target)) setDropdownOpen(false);
+		}
+		if (dropdownOpen) document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, [dropdownOpen]);
+	const handlePeriodSelect = (p) => {
+		if (!isControlled) setInternalPeriod(p);
+		onPeriodChange?.(p);
+		setDropdownOpen(false);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between px-5 pb-3 pt-5",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-base font-bold text-ds-1",
+					children: title
+				}), /* @__PURE__ */ jsxs("div", {
+					ref: dropdownRef,
+					className: "relative shrink-0",
+					children: [/* @__PURE__ */ jsxs(Button, {
+						variant: "tertiary",
+						size: "small",
+						onClick: () => setDropdownOpen((o) => !o),
+						className: "gap-1.5 rounded-md border border-ds-border-accent/30 bg-ds-accent-subtle px-3 py-1.5 text-sm font-semibold text-ds-accent hover:bg-ds-accent-subtle/80 hover:opacity-100",
+						"aria-haspopup": "listbox",
+						"aria-expanded": dropdownOpen,
+						children: [activePeriod, /* @__PURE__ */ jsx("span", {
+							className: mergeClassNames("transition-transform duration-150", dropdownOpen ? "rotate-180" : ""),
+							children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+						})]
+					}), dropdownOpen && /* @__PURE__ */ jsx("div", {
+						role: "listbox",
+						className: "absolute end-0 top-full z-20 mt-1 min-w-[160px] overflow-y-auto rounded-md border border-ds-border-2 bg-ds-surface-1 py-1 shadow-lg",
+						children: periods.map((p) => /* @__PURE__ */ jsx(Button, {
+							variant: "tertiary",
+							size: "small",
+							role: "option",
+							"aria-selected": p === activePeriod,
+							onClick: () => handlePeriodSelect(p),
+							className: mergeClassNames("w-full justify-start rounded-none px-3 py-1.5 text-start text-sm hover:bg-ds-surface-2 hover:opacity-100", p === activePeriod ? "font-semibold text-ds-accent" : "text-ds-2"),
+							children: p
+						}, p))
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-2 gap-4 px-5 pb-4",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "text-[10px] font-medium uppercase tracking-wide text-ds-3",
+					children: "Total Income"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "mt-1 flex items-baseline gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-2xl font-bold text-ds-1",
+						children: totalIncome
+					}), incomeBadge && /* @__PURE__ */ jsx(TrendLabel, {
+						value: incomeBadge.value,
+						direction: incomeBadge.direction
+					})]
+				})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "text-[10px] font-medium uppercase tracking-wide text-ds-3",
+					children: "Total Expenses"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "mt-1 flex items-baseline gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-2xl font-bold text-ds-1",
+						children: totalExpenses
+					}), expensesBadge && /* @__PURE__ */ jsx(TrendLabel, {
+						value: expensesBadge.value,
+						direction: expensesBadge.direction
+					})]
+				})] })]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: { height: 200 },
+				className: "px-2",
+				children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ jsxs(BarChart, {
+						data,
+						barSize: 12,
+						barCategoryGap: "30%",
+						barGap: 4,
+						margin: {
+							top: 8,
+							right: 8,
+							left: 0,
+							bottom: 0
+						},
+						children: [
+							/* @__PURE__ */ jsx(CartesianGrid, {
+								strokeDasharray: "3 3",
+								vertical: false,
+								stroke: "var(--ds-color-border)",
+								opacity: .5
+							}),
+							/* @__PURE__ */ jsx(XAxis, {
+								dataKey: "month",
+								axisLine: false,
+								tickLine: false,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 11
+								},
+								dy: 8
+							}),
+							/* @__PURE__ */ jsx(YAxis, {
+								axisLine: false,
+								tickLine: false,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 10
+								},
+								dx: -4
+							}),
+							/* @__PURE__ */ jsx(Tooltip, {
+								contentStyle: chartTooltipContentStyle,
+								itemStyle: chartTooltipItemStyle,
+								labelStyle: chartTooltipLabelStyle,
+								wrapperStyle: chartTooltipWrapperStyle,
+								cursor: { fill: "rgba(0,0,0,0.04)" }
+							}),
+							/* @__PURE__ */ jsx(Bar, {
+								dataKey: "income",
+								name: "Income",
+								radius: [
+									4,
+									4,
+									0,
+									0
+								],
+								children: data.map((entry, i) => /* @__PURE__ */ jsx(Cell, { fill: entry.highlighted ? incomeColor : incomeColor + "80" }, i))
+							}),
+							/* @__PURE__ */ jsx(Bar, {
+								dataKey: "expense",
+								name: "Expense",
+								radius: [
+									4,
+									4,
+									0,
+									0
+								],
+								children: data.map((entry, i) => /* @__PURE__ */ jsx(Cell, { fill: entry.highlighted ? expenseColor : expenseColor + "80" }, i))
+							})
+						]
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-center gap-6 py-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "h-2.5 w-2.5 shrink-0 rounded-full",
+						style: { backgroundColor: incomeColor },
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-sm text-ds-2",
+						children: "Income"
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "h-2.5 w-2.5 shrink-0 rounded-full",
+						style: { backgroundColor: expenseColor },
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-sm text-ds-2",
+						children: "Expense"
+					})]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/data-display/dashboard-cards/DeviceSalesCard.tsx
+var DEFAULT_CHANNELS = [
+	{
+		key: "retail",
+		label: "Retail",
+		sales: 310,
+		color: "#4361EE"
+	},
+	{
+		key: "website",
+		label: "Website",
+		sales: 1420,
+		color: "#00CFE8"
+	},
+	{
+		key: "thirdParty",
+		label: "Third Party",
+		sales: 1920,
+		color: "#FF9F43"
+	}
+];
+var DEFAULT_BRANDS = [
+	{
+		name: "Apple",
+		retail: 35e3,
+		website: 4e4,
+		thirdParty: 45e3
+	},
+	{
+		name: "Lenovo",
+		retail: 2e4,
+		website: 35e3,
+		thirdParty: 3e4
+	},
+	{
+		name: "Asus",
+		retail: 15e3,
+		website: 25e3,
+		thirdParty: 2e4
+	}
+];
+var InfoIcon = () => /* @__PURE__ */ jsxs("svg", {
+	width: "14",
+	height: "14",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "10"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "12",
+			y1: "16",
+			x2: "12",
+			y2: "12"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "12",
+			y1: "8",
+			x2: "12.01",
+			y2: "8"
+		})
+	]
+});
+var ExpandIcon = () => /* @__PURE__ */ jsxs("svg", {
+	width: "14",
+	height: "14",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: [
+		/* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+		/* @__PURE__ */ jsx("polyline", { points: "9 21 3 21 3 15" }),
+		/* @__PURE__ */ jsx("line", {
+			x1: "21",
+			y1: "3",
+			x2: "14",
+			y2: "10"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "3",
+			y1: "21",
+			x2: "10",
+			y2: "14"
+		})
+	]
+});
+var EditIcon = () => /* @__PURE__ */ jsxs("svg", {
+	width: "14",
+	height: "14",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: [/* @__PURE__ */ jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }), /* @__PURE__ */ jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })]
+});
+var EllipsisHIcon = () => /* @__PURE__ */ jsxs("svg", {
+	width: "14",
+	height: "14",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "1"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "19",
+			cy: "12",
+			r: "1"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "5",
+			cy: "12",
+			r: "1"
+		})
+	]
+});
+var xTickFormatter = (v) => v === 0 ? "0" : `${Math.round(v / 1e3)}K`;
+var DeviceSalesCard = ({ title = "Device Sales", channels = DEFAULT_CHANNELS, brands = DEFAULT_BRANDS, className, onExpand, onEdit, onMoreClick }) => {
+	const channelMap = Object.fromEntries(channels.map((c) => [c.key, c]));
+	const maxValue = Math.ceil(brands.reduce((max, b) => Math.max(max, b.retail + b.website + b.thirdParty), 0) / 2e4) * 2e4;
+	const xDomain = [0, Math.max(maxValue, 1e5)];
+	const xTicks = Array.from({ length: Math.floor(xDomain[1] / 2e4) + 1 }, (_, i) => i * 2e4);
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between px-5 pb-3 pt-5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-base font-bold text-ds-1",
+						children: title
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-ds-3",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx(InfoIcon, {})
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-0.5",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							variant: "tertiary",
+							size: "small",
+							className: "p-1! text-ds-3",
+							"aria-label": "Expand",
+							onClick: onExpand,
+							children: /* @__PURE__ */ jsx(ExpandIcon, {})
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "tertiary",
+							size: "small",
+							className: "p-1! text-ds-3",
+							"aria-label": "Edit",
+							onClick: onEdit,
+							children: /* @__PURE__ */ jsx(EditIcon, {})
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "tertiary",
+							size: "small",
+							className: "p-1! text-ds-3",
+							"aria-label": "More options",
+							onClick: onMoreClick,
+							children: /* @__PURE__ */ jsx(EllipsisHIcon, {})
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-3 divide-x divide-ds-border-3/50 border-b border-ds-border-3/50 pb-4",
+				children: channels.map((channel) => /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center gap-1 px-3 pt-1",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "mb-1 h-1 w-8 rounded-full",
+							style: { backgroundColor: channel.color },
+							"aria-hidden": "true"
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-lg font-bold text-ds-1",
+							children: channel.sales.toLocaleString()
+						}),
+						/* @__PURE__ */ jsxs("p", {
+							className: "text-center text-[11px] leading-tight text-ds-3",
+							children: [channel.label, " Sales"]
+						})
+					]
+				}, channel.key))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: { height: brands.length * 64 + 56 },
+				className: "px-2 pt-4",
+				children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ jsxs(BarChart, {
+						data: brands,
+						layout: "vertical",
+						barSize: 18,
+						barCategoryGap: "35%",
+						margin: {
+							top: 4,
+							right: 12,
+							left: 0,
+							bottom: 4
+						},
+						children: [
+							/* @__PURE__ */ jsx(XAxis, {
+								type: "number",
+								domain: xDomain,
+								ticks: xTicks,
+								axisLine: false,
+								tickLine: false,
+								tickFormatter: xTickFormatter,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 10
+								}
+							}),
+							/* @__PURE__ */ jsx(YAxis, {
+								type: "category",
+								dataKey: "name",
+								axisLine: false,
+								tickLine: false,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 12
+								},
+								width: 52
+							}),
+							/* @__PURE__ */ jsx(Tooltip, {
+								contentStyle: chartTooltipContentStyle,
+								itemStyle: chartTooltipItemStyle,
+								labelStyle: chartTooltipLabelStyle,
+								wrapperStyle: chartTooltipWrapperStyle,
+								cursor: { fill: "rgba(0,0,0,0.04)" },
+								formatter: (v, name) => [Number(v).toLocaleString(), channelMap[name]?.label ?? String(name)]
+							}),
+							/* @__PURE__ */ jsx(Bar, {
+								dataKey: "retail",
+								stackId: "stack",
+								fill: channelMap.retail?.color ?? "#4361EE",
+								radius: [
+									2,
+									0,
+									0,
+									2
+								]
+							}),
+							/* @__PURE__ */ jsx(Bar, {
+								dataKey: "website",
+								stackId: "stack",
+								fill: channelMap.website?.color ?? "#00CFE8"
+							}),
+							/* @__PURE__ */ jsx(Bar, {
+								dataKey: "thirdParty",
+								stackId: "stack",
+								fill: channelMap.thirdParty?.color ?? "#FF9F43",
+								radius: [
+									0,
+									2,
+									2,
+									0
+								]
+							})
+						]
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap items-center justify-center gap-4 px-5 pb-4 pt-1",
+				children: channels.map((channel) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "h-2.5 w-2.5 shrink-0 rounded-full",
+						style: { backgroundColor: channel.color },
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-xs text-ds-2",
+						children: channel.label
+					})]
+				}, channel.key))
+			})
+		]
+	});
+};
+//#endregion
+export { VehiclesOverviewCard as a, TopicsCard as c, SalesOverviewCard as d, SupportTrackerCard as f, StatCard as g, ChartCard as h, StockAvailabilityCard as i, EarningReportsTabsCard as l, TopProductsCard as m, IncomeExpenseCard as n, VehicleConditionCard as o, EarningsCard as p, ExpensesCard as r, ShipmentStatisticsCard as s, DeviceSalesCard as t, RevenueGrowthCard as u };
+
+//# sourceMappingURL=dashboard-cards-BnPt0gDW.mjs.map