erp-pro-ui 0.2.6 → 0.2.7

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

@@ -1,2524 +0,0 @@
-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