erp-pro-ui 0.2.4 → 0.2.6

package/dist/chunks/dashboard-cards-DNWJPKRu.cjs

@@ -0,0 +1,2524 @@
+require("./chunk-B_GkZjkl.cjs");
+const require_utils = require("./utils-LRbEQHYs.cjs");
+const require_chartStyles = require("./chartStyles-BADmRKZo.cjs");
+const require_truncated_text = require("./truncated-text-CswjmrHZ.cjs");
+const require_EllipsisVerticalIcon = require("./EllipsisVerticalIcon-BJw3MNkg.cjs");
+const require_button = require("./button-uD87K76W.cjs");
+const require_Tooltip = require("./Tooltip-nnaiqJTT.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let recharts = require("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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("svg", {
+			width: "10",
+			height: "10",
+			viewBox: "0 0 10 10",
+			fill: "none",
+			"aria-hidden": "true",
+			children: isUp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M5 8V2M5 2L2 5M5 2L8 5",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M5 2V8M5 8L2 5M5 8L8 5",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})]
+	});
+};
+var MenuButton = ({ onClick }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+	variant: "tertiary",
+	size: "small",
+	className: "shrink-0 p-0.5! text-ds-3",
+	"aria-label": "More options",
+	onClick,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EllipsisVerticalIcon.EllipsisVerticalIcon, {
+		width: 18,
+		height: 18
+	})
+});
+var LegendDots = ({ items }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: "flex items-center gap-3",
+	children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "flex items-center gap-1.5 text-xs text-ds-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.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 = require_utils.mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className);
+	if (size === "sm") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.mergeClassNames(base, "flex flex-col gap-7 p-5"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-start justify-between gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-sm font-semibold text-ds-1",
+					children: title
+				}), badge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendBadge$3, {
+					value: badge.value,
+					direction: badge.direction
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuButton, { onClick: onMenuClick })]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-2xl font-bold tracking-tight text-ds-1 leading-none",
+				children: value
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-[10px] text-ds-3 mt-1",
+				children: dateRange
+			})]
+		})]
+	});
+	if (size === "md") {
+		const metricBlock = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-1 min-w-0",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-3xl font-bold tracking-tight text-ds-1 leading-none",
+				children: value
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-[10px] text-ds-3 mt-1",
+				children: dateRange
+			})]
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_utils.mergeClassNames(base, "flex flex-col gap-3 p-5"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-start justify-between gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-sm font-semibold text-ds-1",
+						children: title
+					}), badge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendBadge$3, {
+						value: badge.value,
+						direction: badge.direction
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuButton, { onClick: onMenuClick })]
+			}), chartPosition === "bottom" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [metricBlock, chart && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_utils.mergeClassNames("w-full pt-3", chartClassName),
+				children: chart
+			})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-end justify-between gap-3",
+				children: [metricBlock, chart && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: require_utils.mergeClassNames("h-[46px] w-[155px] shrink-0 overflow-hidden", chartClassName),
+					children: chart
+				})]
+			})]
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.mergeClassNames(base, "flex flex-col p-5"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-wrap items-start justify-between gap-x-6 gap-y-2 mb-4",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-1.5",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-sm font-semibold text-ds-1",
+							children: title
+						}), badge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendBadge$3, {
+							value: badge.value,
+							direction: badge.direction
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-3xl font-bold tracking-tight text-ds-1 leading-none",
+						children: value
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-xs text-ds-3",
+						children: dateRange
+					})
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-4 ms-auto",
+				children: [legend && legend.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LegendDots, { items: legend }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuButton, { onClick: onMenuClick })]
+			})]
+		}), chart && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_utils.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.mergeClassNames("flex flex-col gap-4 rounded-2xl border border-ds-border-2 bg-ds-surface-1 p-5", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-wrap items-start justify-between gap-x-6 gap-y-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-0.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-sm font-semibold text-ds-color-fg",
+					children: title
+				}), dateRange && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-xs text-ds-color-fg-subtle",
+					children: dateRange
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-4 ms-auto",
+				children: [legend && legend.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex items-center gap-3",
+					children: legend.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "flex items-center gap-1.5 text-xs text-ds-color-fg-muted",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+					variant: "tertiary",
+					size: "small",
+					className: "shrink-0 p-0.5! text-ds-color-fg-subtle",
+					"aria-label": "More options",
+					onClick: onMenuClick,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EllipsisVerticalIcon.EllipsisVerticalIcon, {
+						width: 18,
+						height: 18
+					})
+				})]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "w-full",
+			children
+		})]
+	});
+};
+//#endregion
+//#region src/components/data-display/dashboard-cards/TopProductsCard.tsx
+var RankBadge = ({ rank }) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("img", {
+		src,
+		alt,
+		className: "h-11 w-11 shrink-0 rounded-md object-contain bg-ds-color-bg-utility p-1"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.mergeClassNames("flex flex-col rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "mb-4 flex items-center justify-between",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-sm font-semibold text-ds-color-fg",
+				children: title
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+				variant: "tertiary",
+				size: "small",
+				className: "shrink-0 p-0.5! text-ds-color-fg-subtle",
+				"aria-label": "More options",
+				onClick: onMenuClick,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EllipsisVerticalIcon.EllipsisVerticalIcon, {
+					width: 18,
+					height: 18
+				})
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			className: "flex flex-col divide-y divide-ds-border-2",
+			role: "list",
+			children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+				className: "flex items-center gap-3 py-3 first:pt-0 last:pb-0",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProductImage, {
+						src: item.image,
+						alt: item.name
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex min-w-0 flex-1 flex-col gap-0.5",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "truncate text-sm font-semibold text-ds-color-fg",
+							children: item.name
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "truncate text-xs text-ds-color-fg-subtle",
+							children: [
+								item.category,
+								" · ",
+								item.soldCount.toLocaleString(),
+								" sold"
+							]
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("svg", {
+			width: "10",
+			height: "10",
+			viewBox: "0 0 10 10",
+			fill: "none",
+			"aria-hidden": "true",
+			children: isUp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M5 8V2M5 2L2 5M5 2L8 5",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+	style: { height },
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, {
+		width: "100%",
+		height: "100%",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.BarChart, {
+			data: weeklyData,
+			barSize,
+			barCategoryGap: "25%",
+			margin: {
+				top: 4,
+				right: 0,
+				left: 0,
+				bottom: 0
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.XAxis, {
+					dataKey: "day",
+					axisLine: false,
+					tickLine: false,
+					tick: {
+						fill: "var(--ds-color-fg-muted)",
+						fontSize: 10
+					},
+					dy: 6
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
+					contentStyle: require_chartStyles.chartTooltipContentStyle,
+					itemStyle: require_chartStyles.chartTooltipItemStyle,
+					labelStyle: require_chartStyles.chartTooltipLabelStyle,
+					wrapperStyle: require_chartStyles.chartTooltipWrapperStyle,
+					cursor: false
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Bar, {
+					dataKey: "value",
+					radius: [
+						4,
+						4,
+						0,
+						0
+					],
+					children: weeklyData.map((entry, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Cell, { fill: entry.highlighted ? "var(--ds-color-accent)" : "var(--ds-color-accent-subtle)" }, i))
+				})
+			]
+		})
+	})
+});
+var MetricsStrip = ({ metrics, large = false }) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "grid grid-cols-3 divide-x divide-ds-border-3/50",
+		children: metrics.slice(0, 3).map((metric, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_utils.mergeClassNames("flex flex-col gap-2 px-4", large && "gap-3 px-5"),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-1.5",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: require_utils.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__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: require_utils.mergeClassNames("truncate text-ds-2", large ? "text-sm" : "text-xs"),
+						children: metric.label
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_utils.mergeClassNames("font-bold text-ds-1", large ? "text-base" : "text-sm"),
+					children: metric.value
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "h-[3px] w-full overflow-hidden rounded-full bg-ds-border-3/50",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+	className: require_utils.mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-start justify-between px-5 pb-3 pt-5",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-base font-bold text-ds-1",
+				children: title
+			}), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mt-0.5 text-xs text-ds-3",
+				children: subtitle
+			})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+				variant: "tertiary",
+				size: "small",
+				className: "shrink-0 p-0.5! text-ds-3",
+				"aria-label": "More options",
+				onClick: onMenuClick,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EllipsisVerticalIcon.EllipsisVerticalIcon, {
+					width: 18,
+					height: 18
+				})
+			})]
+		}),
+		size === "md" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-start gap-4 px-5 pb-5",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-4xl font-bold tracking-tight text-ds-1",
+						children: value
+					}), badge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendBadge$2, {
+						value: badge.value,
+						direction: badge.direction
+					})]
+				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mt-2 max-w-[180px] text-xs leading-relaxed text-ds-3",
+					children: description
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "w-[185px] shrink-0",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarChartSection, {
+					weeklyData,
+					barSize: 16,
+					height: 90
+				})
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MetricsStrip, { metrics })] }),
+		size === "lg" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "px-5 pb-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-5xl font-bold tracking-tight text-ds-1",
+						children: value
+					}), badge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendBadge$2, {
+						value: badge.value,
+						direction: badge.direction
+					})]
+				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mt-2 text-sm leading-relaxed text-ds-3",
+					children: description
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "px-5 pb-5",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarChartSection, {
+					weeklyData,
+					barSize: 24,
+					height: 160
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("text", {
+				x: cx,
+				y: cy - size * .04,
+				textAnchor: "middle",
+				dominantBaseline: "middle",
+				fontSize: size * .085,
+				fill: "var(--ds-color-fg-muted)",
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+	className: require_utils.mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-start justify-between px-5 pb-3 pt-5",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "text-base font-bold text-ds-1",
+			children: title
+		}), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "mt-0.5 text-xs text-ds-3",
+			children: subtitle
+		})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+			variant: "tertiary",
+			size: "small",
+			className: "shrink-0 p-0.5! text-ds-3",
+			"aria-label": "More options",
+			onClick: onMenuClick,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EllipsisVerticalIcon.EllipsisVerticalIcon, {
+				width: 18,
+				height: 18
+			})
+		})]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-3 px-5 pb-6",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-[1_1_0] flex-col gap-5 min-w-0",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-4xl font-bold tracking-tight text-ds-1",
+				children: total
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mt-0.5 text-xs text-ds-3",
+				children: totalLabel
+			})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex flex-col gap-3",
+				children: items.map((item, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+							content: item.label,
+							position: "top",
+							delayShow: 400,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_truncated_text.TruncatedText, {
+								showTitleOnHover: true,
+								className: "text-sm font-semibold text-ds-1",
+								children: item.label
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "text-xs text-ds-3",
+							children: item.value
+						})]
+					})]
+				}, i))
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex-[1_1_0] min-w-0",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mb-1 flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-sm font-semibold text-ds-1",
+					children: title
+				}), badge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendBadge$1, {
+					value: badge.value,
+					direction: badge.direction
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mb-5 text-3xl font-bold tracking-tight text-ds-1",
+				children: value
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative mb-5 flex items-start",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-1 flex-col gap-1",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-center gap-1.5 text-xs text-ds-2",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "font-medium",
+									children: leftMetric.label
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-2xl font-bold text-ds-1",
+								children: leftMetric.percentage
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-xs text-ds-3",
+								children: leftMetric.count
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "relative flex flex-col items-center self-stretch",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "w-px flex-1 bg-ds-border-3" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", { className: "w-px flex-1 bg-ds-border-3" })
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-1 flex-col items-end gap-1",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-center gap-1.5 text-xs text-ds-2",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "font-medium",
+									children: rightMetric.label
+								}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-2xl font-bold text-ds-1",
+								children: rightMetric.percentage
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-xs text-ds-3",
+								children: rightMetric.count
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex h-2 w-full overflow-hidden rounded-full",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "h-full rounded-l-full transition-all duration-500",
+					style: {
+						width: `${resolvedLeftProgress}%`,
+						backgroundColor: leftMetric.color
+					}
+				}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "mb-4",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-base font-bold text-ds-1",
+				children: title
+			}), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mt-0.5 text-xs text-ds-3",
+				children: subtitle
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-end gap-4",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-4xl font-bold tracking-tight text-ds-1",
+					children: value
+				}), badge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendBadge, {
+					value: badge.value,
+					direction: badge.direction,
+					color: highlightColor,
+					bg: highlightColor + "22"
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "min-w-0 flex-1 pb-1",
+				style: { height: 100 },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.BarChart, {
+						data: weeklyData,
+						barSize: 14,
+						barCategoryGap: "25%",
+						margin: {
+							top: 4,
+							right: 0,
+							left: 0,
+							bottom: 0
+						},
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.XAxis, {
+								dataKey: "day",
+								axisLine: false,
+								tickLine: false,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 10
+								},
+								dy: 6
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
+								contentStyle: require_chartStyles.chartTooltipContentStyle,
+								itemStyle: require_chartStyles.chartTooltipItemStyle,
+								labelStyle: require_chartStyles.chartTooltipLabelStyle,
+								wrapperStyle: require_chartStyles.chartTooltipWrapperStyle,
+								cursor: false
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Bar, {
+								dataKey: "value",
+								radius: [
+									4,
+									4,
+									0,
+									0
+								],
+								children: weeklyData.map((entry, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.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] = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-start justify-between px-5 pb-4 pt-5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-base font-bold text-ds-1",
+					children: title
+				}), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mt-0.5 text-xs text-ds-3",
+					children: subtitle
+				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+					variant: "tertiary",
+					size: "small",
+					className: "shrink-0 p-0.5! text-ds-3",
+					"aria-label": "More options",
+					onClick: onMenuClick,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EllipsisVerticalIcon.EllipsisVerticalIcon, {
+						width: 18,
+						height: 18
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(require_button.Button, {
+						variant: "tertiary",
+						onClick: () => handleTabChange(tab.id),
+						className: require_utils.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__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "flex h-6 w-6 items-center justify-center",
+							children: tab.icon
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-xs font-semibold",
+							children: tab.label
+						})]
+					}, tab.id);
+				}), showAddTab && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.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__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "flex h-6 w-6 items-center justify-center text-lg font-light",
+						children: "+"
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "px-2 pb-5",
+				style: { height: 280 },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.BarChart, {
+						data: activeTab?.chartData ?? [],
+						barSize: 36,
+						barCategoryGap: "25%",
+						margin: {
+							top: 28,
+							right: 16,
+							left: 0,
+							bottom: 0
+						},
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.CartesianGrid, {
+								strokeDasharray: "3 3",
+								vertical: false,
+								stroke: "var(--ds-color-border)",
+								opacity: .5
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.XAxis, {
+								dataKey: "name",
+								axisLine: false,
+								tickLine: false,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 12
+								},
+								dy: 10
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.YAxis, {
+								axisLine: false,
+								tickLine: false,
+								tickFormatter: yAxisFormatter,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 11
+								},
+								dx: -4
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
+								contentStyle: require_chartStyles.chartTooltipContentStyle,
+								itemStyle: require_chartStyles.chartTooltipItemStyle,
+								labelStyle: require_chartStyles.chartTooltipLabelStyle,
+								wrapperStyle: require_chartStyles.chartTooltipWrapperStyle,
+								cursor: {
+									fill: "var(--ds-color-accent)",
+									fillOpacity: .06
+								},
+								formatter: (v) => [labelFormatter(Number(v)), activeTab?.label]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.Bar, {
+								dataKey: "value",
+								radius: [
+									4,
+									4,
+									0,
+									0
+								],
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.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__ */ (0, react_jsx_runtime.jsx)(recharts.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__ */ (0, react_jsx_runtime.jsx)("foreignObject", {
+		x: x + pad,
+		y,
+		width: availW,
+		height,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				height: "100%",
+				display: "flex",
+				alignItems: "center",
+				overflow: "hidden"
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_truncated_text.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-start justify-between px-5 pb-4 pt-5",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-base font-bold text-ds-1",
+				children: title
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+				variant: "tertiary",
+				size: "small",
+				className: "shrink-0 p-0.5! text-ds-3",
+				"aria-label": "More options",
+				onClick: onMenuClick,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EllipsisVerticalIcon.EllipsisVerticalIcon, {
+					width: 18,
+					height: 18
+				})
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-4 px-5 pb-6",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "min-w-0 flex-1",
+				style: { height: items.length * 42 + 32 },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.BarChart, {
+						data: chartData,
+						layout: "vertical",
+						barSize: 28,
+						barCategoryGap: "20%",
+						margin: {
+							top: 0,
+							right: 16,
+							left: 8,
+							bottom: 24
+						},
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.CartesianGrid, {
+								strokeDasharray: "3 3",
+								horizontal: false,
+								stroke: "var(--ds-color-border)",
+								opacity: .5
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.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__ */ (0, react_jsx_runtime.jsx)(recharts.YAxis, {
+								type: "category",
+								dataKey: "rank",
+								axisLine: false,
+								tickLine: false,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 11
+								},
+								dx: -4,
+								width: 16
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
+								contentStyle: require_chartStyles.chartTooltipContentStyle,
+								itemStyle: require_chartStyles.chartTooltipItemStyle,
+								labelStyle: require_chartStyles.chartTooltipLabelStyle,
+								wrapperStyle: require_chartStyles.chartTooltipWrapperStyle,
+								cursor: { fill: "rgba(0,0,0,0.04)" },
+								formatter: (v, _name, props) => [`${Number(v)}%`, props.payload?.label ?? ""],
+								labelFormatter: () => ""
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.Bar, {
+								dataKey: "percentage",
+								radius: [
+									0,
+									4,
+									4,
+									0
+								],
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.LabelList, {
+									dataKey: "label",
+									content: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarLabel, { ...props })
+								}), chartData.map((entry, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Cell, { fill: entry.color }, i))]
+							})
+						]
+					})
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "grid shrink-0 grid-cols-2 gap-x-6 gap-y-4",
+				children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col gap-0.5",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full",
+							style: { backgroundColor: item.color },
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-xs text-ds-2",
+							children: item.label
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("svg", {
+	width: "13",
+	height: "13",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.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] = (0, react.useState)(defaultMonth ?? months[0] ?? "");
+	const activeMonth = isControlled ? controlledMonth : internalMonth;
+	const [dropdownOpen, setDropdownOpen] = (0, react.useState)(false);
+	const dropdownRef = (0, react.useRef)(null);
+	(0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mb-5 flex items-start justify-between gap-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-lg font-bold text-ds-1",
+					children: title
+				}), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mt-0.5 text-sm text-ds-3",
+					children: subtitle
+				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					ref: dropdownRef,
+					className: "relative shrink-0",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_button.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__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: require_utils.mergeClassNames("transition-transform duration-150", dropdownOpen ? "rotate-180" : ""),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDownIcon$2, {})
+						})]
+					}), dropdownOpen && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+							variant: "tertiary",
+							size: "small",
+							role: "option",
+							"aria-selected": m === activeMonth,
+							onClick: () => handleMonthSelect(m),
+							className: require_utils.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__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: { height: 260 },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.ComposedChart, {
+						data,
+						barSize: 22,
+						barCategoryGap: "30%",
+						margin: {
+							top: 8,
+							right: 8,
+							left: 0,
+							bottom: 0
+						},
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.CartesianGrid, {
+								strokeDasharray: "3 3",
+								vertical: false,
+								stroke: "var(--ds-color-border)",
+								opacity: .5
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.XAxis, {
+								dataKey: "date",
+								axisLine: false,
+								tickLine: false,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 12
+								},
+								dy: 10
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.YAxis, {
+								axisLine: false,
+								tickLine: false,
+								tickFormatter: yAxisFormatter,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 11
+								},
+								dx: -4,
+								domain: [0, "auto"]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
+								contentStyle: require_chartStyles.chartTooltipContentStyle,
+								itemStyle: require_chartStyles.chartTooltipItemStyle,
+								labelStyle: require_chartStyles.chartTooltipLabelStyle,
+								wrapperStyle: require_chartStyles.chartTooltipWrapperStyle,
+								cursor: { fill: "rgba(0,0,0,0.04)" },
+								formatter: (v, name) => [yAxisFormatter(Number(v)), name === "shipment" ? shipmentLabel : deliveryLabel]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Bar, {
+								dataKey: "shipment",
+								fill: shipmentColor,
+								radius: [
+									4,
+									4,
+									0,
+									0
+								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mt-4 flex items-center justify-center gap-6",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full",
+						style: { backgroundColor: shipmentColor },
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-sm text-ds-2",
+						children: shipmentLabel
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full",
+						style: { backgroundColor: deliveryColor },
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		width: size,
+		height: size,
+		viewBox: `0 0 ${size} ${size}`,
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx,
+				cy,
+				r,
+				fill: "none",
+				stroke: "var(--ds-color-border)",
+				strokeWidth
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx,
+				cy,
+				r,
+				fill: "none",
+				stroke: color,
+				strokeWidth,
+				strokeDasharray: circumference,
+				strokeDashoffset: dashOffset,
+				strokeLinecap: "round",
+				transform: `rotate(-90 ${cx} ${cy})`
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+	className: require_utils.mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-start justify-between px-5 pb-2 pt-5",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "text-base font-bold text-ds-1",
+			children: title
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+			variant: "tertiary",
+			size: "small",
+			className: "shrink-0 p-0.5! text-ds-3",
+			"aria-label": "More options",
+			onClick: onMenuClick,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EllipsisVerticalIcon.EllipsisVerticalIcon, {
+				width: 18,
+				height: 18
+			})
+		})]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "divide-y divide-ds-border-3/50 px-5 pb-4",
+		children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-4 py-3",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "shrink-0",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MiniGauge, {
+						percentage: item.percentage,
+						color: item.color
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-sm font-semibold leading-tight",
+						style: { color: item.color },
+						children: item.label
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "mt-0.5 text-xs text-ds-3",
+						children: item.sublabel
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-start justify-between px-5 pb-2 pt-5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-base font-bold text-ds-1",
+					children: title
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+					variant: "tertiary",
+					size: "small",
+					className: "shrink-0 p-0.5! text-ds-3",
+					"aria-label": "More options",
+					onClick: onMenuClick,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EllipsisVerticalIcon.EllipsisVerticalIcon, {
+						width: 18,
+						height: 18
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex items-center px-5 pb-3",
+				children: items.map((item, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-1 items-center",
+					children: [i > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "me-3 h-8 w-px shrink-0 bg-ds-border-3/60" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-xs font-medium text-ds-3",
+						children: item.label
+					})]
+				}, item.label))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mx-5 mb-5 flex h-3 overflow-hidden rounded-full",
+				children: items.map((item, i) => {
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: {
+							width: `${totalPct > 0 ? item.percentage / totalPct * 100 : 0}%`,
+							backgroundColor: item.color
+						},
+						className: require_utils.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__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "divide-y divide-ds-border-3/50 px-5 pb-4",
+				children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-3 py-3",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "flex size-9 shrink-0 items-center justify-center rounded-full",
+							style: { backgroundColor: `${item.color}1a` },
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: { color: item.color },
+								className: "flex items-center",
+								children: item.icon
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "min-w-0 flex-1 text-sm font-medium text-ds-2",
+							children: item.label
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-sm font-bold text-ds-1",
+							children: item.duration
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-between px-5 pb-3 pt-5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-base font-bold text-ds-1",
+					children: title
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+					variant: "tertiary",
+					size: "small",
+					className: "shrink-0 p-0.5! text-ds-3",
+					"aria-label": "More options",
+					onClick: onMenuClick,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EllipsisVerticalIcon.EllipsisVerticalIcon, {
+						width: 18,
+						height: 18
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "pe-4",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-[10px] font-medium uppercase tracking-wide text-ds-3",
+						children: "Total Asset"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "mt-1 text-2xl font-bold text-ds-1",
+						children: totalAsset
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ps-4",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-[10px] font-medium uppercase tracking-wide text-ds-3",
+						children: "Total Product"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "mt-1 text-2xl font-bold text-ds-1",
+						children: totalProduct.toLocaleString()
+					})]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "px-5 py-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex h-2 w-full overflow-hidden rounded-full",
+					children: segments.map(({ label, color, pct }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: {
+							width: `${pct / total * 100}%`,
+							backgroundColor: color
+						},
+						"aria-hidden": "true"
+					}, label))
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mt-3 flex flex-wrap gap-x-4 gap-y-1.5",
+					children: segments.map(({ label, color, pct }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-1.5",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "h-2 w-2 shrink-0 rounded-full",
+								style: { backgroundColor: color },
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-xs text-ds-2",
+								children: label
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "text-xs font-semibold text-ds-1",
+								children: [pct, "%"]
+							})
+						]
+					}, label))
+				})]
+			}),
+			lowStockItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "border-t border-ds-border-3/50",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center justify-between px-5 py-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-xs font-bold uppercase tracking-wide text-ds-1",
+						children: "Low Stock"
+					}), onViewAll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+						variant: "tertiary",
+						size: "small",
+						onClick: onViewAll,
+						className: "p-0! text-xs text-ds-accent hover:opacity-100",
+						children: "View all"
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "pb-2",
+					children: lowStockItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center justify-between gap-2 px-5 py-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "truncate text-sm font-medium text-ds-1",
+							children: item.name
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex shrink-0 items-center gap-3",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "text-xs text-ds-3",
+								children: ["Qty: ", item.qty]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.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__ */ (0, react_jsx_runtime.jsx)("svg", {
+	width: "13",
+	height: "13",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.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] = (0, react.useState)(defaultPeriod ?? periods[0] ?? "");
+	const activePeriod = isControlled ? controlledPeriod : internalPeriod;
+	const [dropdownOpen, setDropdownOpen] = (0, react.useState)(false);
+	const dropdownRef = (0, react.useRef)(null);
+	(0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-between px-5 pb-3 pt-5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-base font-bold text-ds-1",
+					children: title
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					ref: dropdownRef,
+					className: "relative shrink-0",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_button.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__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: require_utils.mergeClassNames("transition-transform duration-150", dropdownOpen ? "rotate-180" : ""),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDownIcon$1, {})
+						})]
+					}), dropdownOpen && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+							variant: "tertiary",
+							size: "small",
+							role: "option",
+							"aria-selected": p === activePeriod,
+							onClick: () => handlePeriodSelect(p),
+							className: require_utils.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-4 px-5 pb-5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "relative shrink-0",
+					style: {
+						width: 160,
+						height: 160
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, {
+						width: "100%",
+						height: "100%",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.PieChart, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.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__ */ (0, react_jsx_runtime.jsx)(recharts.Cell, { fill: entry.color }, i))
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
+							contentStyle: require_chartStyles.chartTooltipContentStyle,
+							itemStyle: require_chartStyles.chartTooltipItemStyle,
+							labelStyle: require_chartStyles.chartTooltipLabelStyle,
+							wrapperStyle: require_chartStyles.chartTooltipWrapperStyle,
+							formatter: (v, _name, props) => [`${v}%`, props.payload.label]
+						})] })
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-[10px] leading-none text-ds-3",
+							children: "Total Expense"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "mt-1 text-base font-bold leading-none text-ds-1",
+							children: totalExpense
+						})]
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-2",
+					children: expenses.map((e) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "h-2.5 w-2.5 shrink-0 rounded-full",
+								style: { backgroundColor: e.color },
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "flex-1 truncate text-xs text-ds-2",
+								children: e.label
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "text-xs font-semibold text-ds-1",
+								children: [e.percentage, "%"]
+							})
+						]
+					}, e.label))
+				})]
+			}),
+			topExpenses.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "border-t border-ds-border-3/50 px-5 pb-5 pt-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mb-3 text-[10px] font-bold uppercase tracking-wide text-ds-3",
+					children: "Top Expense"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "grid grid-cols-2 gap-3",
+					children: topExpenses.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-start gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "mt-0.5 h-2.5 w-2.5 shrink-0 rounded-full",
+							style: { backgroundColor: item.color },
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "truncate text-xs text-ds-3",
+								children: item.label
+							}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("svg", {
+	width: "13",
+	height: "13",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "6 9 12 15 18 9" })
+});
+var TrendLabel = ({ value, direction }) => /* @__PURE__ */ (0, react_jsx_runtime.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] = (0, react.useState)(defaultPeriod ?? periods[0] ?? "");
+	const activePeriod = isControlled ? controlledPeriod : internalPeriod;
+	const [dropdownOpen, setDropdownOpen] = (0, react.useState)(false);
+	const dropdownRef = (0, react.useRef)(null);
+	(0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-between px-5 pb-3 pt-5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-base font-bold text-ds-1",
+					children: title
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					ref: dropdownRef,
+					className: "relative shrink-0",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_button.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__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: require_utils.mergeClassNames("transition-transform duration-150", dropdownOpen ? "rotate-180" : ""),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDownIcon, {})
+						})]
+					}), dropdownOpen && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+							variant: "tertiary",
+							size: "small",
+							role: "option",
+							"aria-selected": p === activePeriod,
+							onClick: () => handlePeriodSelect(p),
+							className: require_utils.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "grid grid-cols-2 gap-4 px-5 pb-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-[10px] font-medium uppercase tracking-wide text-ds-3",
+					children: "Total Income"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mt-1 flex items-baseline gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-2xl font-bold text-ds-1",
+						children: totalIncome
+					}), incomeBadge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendLabel, {
+						value: incomeBadge.value,
+						direction: incomeBadge.direction
+					})]
+				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-[10px] font-medium uppercase tracking-wide text-ds-3",
+					children: "Total Expenses"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mt-1 flex items-baseline gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-2xl font-bold text-ds-1",
+						children: totalExpenses
+					}), expensesBadge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendLabel, {
+						value: expensesBadge.value,
+						direction: expensesBadge.direction
+					})]
+				})] })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: { height: 200 },
+				className: "px-2",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.BarChart, {
+						data,
+						barSize: 12,
+						barCategoryGap: "30%",
+						barGap: 4,
+						margin: {
+							top: 8,
+							right: 8,
+							left: 0,
+							bottom: 0
+						},
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.CartesianGrid, {
+								strokeDasharray: "3 3",
+								vertical: false,
+								stroke: "var(--ds-color-border)",
+								opacity: .5
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.XAxis, {
+								dataKey: "month",
+								axisLine: false,
+								tickLine: false,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 11
+								},
+								dy: 8
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.YAxis, {
+								axisLine: false,
+								tickLine: false,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 10
+								},
+								dx: -4
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
+								contentStyle: require_chartStyles.chartTooltipContentStyle,
+								itemStyle: require_chartStyles.chartTooltipItemStyle,
+								labelStyle: require_chartStyles.chartTooltipLabelStyle,
+								wrapperStyle: require_chartStyles.chartTooltipWrapperStyle,
+								cursor: { fill: "rgba(0,0,0,0.04)" }
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Bar, {
+								dataKey: "income",
+								name: "Income",
+								radius: [
+									4,
+									4,
+									0,
+									0
+								],
+								children: data.map((entry, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Cell, { fill: entry.highlighted ? incomeColor : incomeColor + "80" }, i))
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Bar, {
+								dataKey: "expense",
+								name: "Expense",
+								radius: [
+									4,
+									4,
+									0,
+									0
+								],
+								children: data.map((entry, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Cell, { fill: entry.highlighted ? expenseColor : expenseColor + "80" }, i))
+							})
+						]
+					})
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-center gap-6 py-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "h-2.5 w-2.5 shrink-0 rounded-full",
+						style: { backgroundColor: incomeColor },
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-sm text-ds-2",
+						children: "Income"
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "h-2.5 w-2.5 shrink-0 rounded-full",
+						style: { backgroundColor: expenseColor },
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	width: "14",
+	height: "14",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "12",
+			cy: "12",
+			r: "10"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "12",
+			y1: "16",
+			x2: "12",
+			y2: "12"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "12",
+			y1: "8",
+			x2: "12.01",
+			y2: "8"
+		})
+	]
+});
+var ExpandIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	width: "14",
+	height: "14",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "9 21 3 21 3 15" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "21",
+			y1: "3",
+			x2: "14",
+			y2: "10"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "3",
+			y1: "21",
+			x2: "10",
+			y2: "14"
+		})
+	]
+});
+var EditIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	width: "14",
+	height: "14",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	width: "14",
+	height: "14",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "12",
+			cy: "12",
+			r: "1"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "19",
+			cy: "12",
+			r: "1"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.mergeClassNames("rounded-lg border border-ds-border-3/80 bg-ds-surface-1", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-between px-5 pb-3 pt-5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-base font-bold text-ds-1",
+						children: title
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-ds-3",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InfoIcon, {})
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-0.5",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+							variant: "tertiary",
+							size: "small",
+							className: "p-1! text-ds-3",
+							"aria-label": "Expand",
+							onClick: onExpand,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandIcon, {})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+							variant: "tertiary",
+							size: "small",
+							className: "p-1! text-ds-3",
+							"aria-label": "Edit",
+							onClick: onEdit,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditIcon, {})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+							variant: "tertiary",
+							size: "small",
+							className: "p-1! text-ds-3",
+							"aria-label": "More options",
+							onClick: onMoreClick,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EllipsisHIcon, {})
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col items-center gap-1 px-3 pt-1",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "mb-1 h-1 w-8 rounded-full",
+							style: { backgroundColor: channel.color },
+							"aria-hidden": "true"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "text-lg font-bold text-ds-1",
+							children: channel.sales.toLocaleString()
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							className: "text-center text-[11px] leading-tight text-ds-3",
+							children: [channel.label, " Sales"]
+						})
+					]
+				}, channel.key))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: { height: brands.length * 64 + 56 },
+				className: "px-2 pt-4",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.BarChart, {
+						data: brands,
+						layout: "vertical",
+						barSize: 18,
+						barCategoryGap: "35%",
+						margin: {
+							top: 4,
+							right: 12,
+							left: 0,
+							bottom: 4
+						},
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.XAxis, {
+								type: "number",
+								domain: xDomain,
+								ticks: xTicks,
+								axisLine: false,
+								tickLine: false,
+								tickFormatter: xTickFormatter,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 10
+								}
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.YAxis, {
+								type: "category",
+								dataKey: "name",
+								axisLine: false,
+								tickLine: false,
+								tick: {
+									fill: "var(--ds-color-fg-muted)",
+									fontSize: 12
+								},
+								width: 52
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
+								contentStyle: require_chartStyles.chartTooltipContentStyle,
+								itemStyle: require_chartStyles.chartTooltipItemStyle,
+								labelStyle: require_chartStyles.chartTooltipLabelStyle,
+								wrapperStyle: require_chartStyles.chartTooltipWrapperStyle,
+								cursor: { fill: "rgba(0,0,0,0.04)" },
+								formatter: (v, name) => [Number(v).toLocaleString(), channelMap[name]?.label ?? String(name)]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Bar, {
+								dataKey: "retail",
+								stackId: "stack",
+								fill: channelMap.retail?.color ?? "#4361EE",
+								radius: [
+									2,
+									0,
+									0,
+									2
+								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Bar, {
+								dataKey: "website",
+								stackId: "stack",
+								fill: channelMap.website?.color ?? "#00CFE8"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Bar, {
+								dataKey: "thirdParty",
+								stackId: "stack",
+								fill: channelMap.thirdParty?.color ?? "#FF9F43",
+								radius: [
+									0,
+									2,
+									2,
+									0
+								]
+							})
+						]
+					})
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex flex-wrap items-center justify-center gap-4 px-5 pb-4 pt-1",
+				children: channels.map((channel) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "h-2.5 w-2.5 shrink-0 rounded-full",
+						style: { backgroundColor: channel.color },
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-xs text-ds-2",
+						children: channel.label
+					})]
+				}, channel.key))
+			})
+		]
+	});
+};
+//#endregion
+Object.defineProperty(exports, "ChartCard", {
+	enumerable: true,
+	get: function() {
+		return ChartCard;
+	}
+});
+Object.defineProperty(exports, "DeviceSalesCard", {
+	enumerable: true,
+	get: function() {
+		return DeviceSalesCard;
+	}
+});
+Object.defineProperty(exports, "EarningReportsTabsCard", {
+	enumerable: true,
+	get: function() {
+		return EarningReportsTabsCard;
+	}
+});
+Object.defineProperty(exports, "EarningsCard", {
+	enumerable: true,
+	get: function() {
+		return EarningsCard;
+	}
+});
+Object.defineProperty(exports, "ExpensesCard", {
+	enumerable: true,
+	get: function() {
+		return ExpensesCard;
+	}
+});
+Object.defineProperty(exports, "IncomeExpenseCard", {
+	enumerable: true,
+	get: function() {
+		return IncomeExpenseCard;
+	}
+});
+Object.defineProperty(exports, "RevenueGrowthCard", {
+	enumerable: true,
+	get: function() {
+		return RevenueGrowthCard;
+	}
+});
+Object.defineProperty(exports, "SalesOverviewCard", {
+	enumerable: true,
+	get: function() {
+		return SalesOverviewCard;
+	}
+});
+Object.defineProperty(exports, "ShipmentStatisticsCard", {
+	enumerable: true,
+	get: function() {
+		return ShipmentStatisticsCard;
+	}
+});
+Object.defineProperty(exports, "StatCard", {
+	enumerable: true,
+	get: function() {
+		return StatCard;
+	}
+});
+Object.defineProperty(exports, "StockAvailabilityCard", {
+	enumerable: true,
+	get: function() {
+		return StockAvailabilityCard;
+	}
+});
+Object.defineProperty(exports, "SupportTrackerCard", {
+	enumerable: true,
+	get: function() {
+		return SupportTrackerCard;
+	}
+});
+Object.defineProperty(exports, "TopProductsCard", {
+	enumerable: true,
+	get: function() {
+		return TopProductsCard;
+	}
+});
+Object.defineProperty(exports, "TopicsCard", {
+	enumerable: true,
+	get: function() {
+		return TopicsCard;
+	}
+});
+Object.defineProperty(exports, "VehicleConditionCard", {
+	enumerable: true,
+	get: function() {
+		return VehicleConditionCard;
+	}
+});
+Object.defineProperty(exports, "VehiclesOverviewCard", {
+	enumerable: true,
+	get: function() {
+		return VehiclesOverviewCard;
+	}
+});
+
+//# sourceMappingURL=dashboard-cards-DNWJPKRu.cjs.map