erp-pro-ui 0.2.5 → 0.2.6

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

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-cards-DNWJPKRu.cjs","names":[],"sources":["../../src/components/data-display/dashboard-cards/StatCard.tsx","../../src/components/data-display/dashboard-cards/ChartCard.tsx","../../src/components/data-display/dashboard-cards/TopProductsCard.tsx","../../src/components/data-display/dashboard-cards/EarningsCard.tsx","../../src/components/data-display/dashboard-cards/SupportTrackerCard.tsx","../../src/components/data-display/dashboard-cards/SalesOverviewCard.tsx","../../src/components/data-display/dashboard-cards/RevenueGrowthCard.tsx","../../src/components/data-display/dashboard-cards/EarningReportsTabsCard.tsx","../../src/components/data-display/dashboard-cards/TopicsCard.tsx","../../src/components/data-display/dashboard-cards/ShipmentStatisticsCard.tsx","../../src/components/data-display/dashboard-cards/VehicleConditionCard.tsx","../../src/components/data-display/dashboard-cards/VehiclesOverviewCard.tsx","../../src/components/data-display/dashboard-cards/StockAvailabilityCard.tsx","../../src/components/data-display/dashboard-cards/ExpensesCard.tsx","../../src/components/data-display/dashboard-cards/IncomeExpenseCard.tsx","../../src/components/data-display/dashboard-cards/DeviceSalesCard.tsx"],"sourcesContent":["\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\n// ---------------------------------------------------------------------------\n// Internal: TrendBadge\n// ---------------------------------------------------------------------------\n\ninterface TrendBadgeProps {\n  value: string;\n  direction: \"up\" | \"down\";\n}\n\nconst TrendBadge: FC<TrendBadgeProps> = ({ value, direction }) => {\n  const isUp = direction === \"up\";\n  const color = isUp ? \"var(--ds-color-success)\" : \"var(--ds-color-danger)\";\n  const bg = isUp ? \"var(--ds-color-success-subtle)\" : \"var(--ds-color-danger-subtle)\";\n\n  return (\n    <span\n      className=\"inline-flex items-center gap-1 rounded-sm border px-1 py-0.5 text-[11px] font-semibold leading-none\"\n      style={{ color, borderColor: color, backgroundColor: bg }}\n      aria-label={`${value} ${isUp ? \"increase\" : \"decrease\"}`}\n    >\n      {value}\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\">\n        {isUp ? (\n          <path d=\"M5 8V2M5 2L2 5M5 2L8 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        ) : (\n          <path d=\"M5 2V8M5 8L2 5M5 8L8 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        )}\n      </svg>\n   \n    </span>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Internal: MenuButton\n// ---------------------------------------------------------------------------\n\nconst MenuButton: FC<{ onClick?: () => void }> = ({ onClick }) => (\n  <Button\n    variant=\"tertiary\"\n    size=\"small\"\n    className=\"shrink-0 p-0.5! text-ds-3\"\n    aria-label=\"More options\"\n    onClick={onClick}\n  >\n    <EllipsisVerticalIcon width={18} height={18} />\n  </Button>\n);\n\n// ---------------------------------------------------------------------------\n// Internal: LegendDot\n// ---------------------------------------------------------------------------\n\nconst LegendDots: FC<{ items: { label: string; color: string }[] }> = ({ items }) => (\n  <div className=\"flex items-center gap-3\">\n    {items.map((item) => (\n      <span key={item.label} className=\"flex items-center gap-1.5 text-xs text-ds-2\">\n        <span\n          className=\"inline-block h-2.5 w-2.5 shrink-0 rounded-full\"\n          style={{ backgroundColor: item.color }}\n          aria-hidden=\"true\"\n        />\n        {item.label}\n      </span>\n    ))}\n  </div>\n);\n\n// ---------------------------------------------------------------------------\n// Public types\n// ---------------------------------------------------------------------------\n\nexport type StatCardSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface StatCardLegendItem {\n  label: string;\n  color: string;\n}\n\nexport interface StatCardProps {\n  /** Layout size:\n   *  - \"sm\"  → 2-col  — metric only, no chart\n   *  - \"md\"  → 4-col  — metric + compact chart on the right (default)\n   *  - \"lg\"  → 12-col — metric header + full-width chart below\n   */\n  size?: StatCardSize;\n  title: string;\n  badge?: TrendBadgeProps;\n  value: ReactNode;\n  dateRange: string;\n  /** Chart content (any chart component). Ignored when size=\"sm\".\n   *  For \"md\" position is controlled by chartPosition.\n   *  For \"lg\" the chart spans full card width below a divider. */\n  chart?: ReactNode;\n  /** Controls where the chart renders in size=\"md\".\n   *  - \"side\"   (default) — compact chart to the right of the metric.\n   *  - \"bottom\" — full-width chart below the metric (good for bar/line/area charts). */\n  chartPosition?: \"side\" | \"bottom\";\n  /** Override the chart container's size/style.\n   *  \"md\" side:   overrides the side-zone div (default: h-[68px] w-[180px] shrink-0 overflow-hidden).\n   *  \"md\" bottom: overrides the bottom chart div (default: w-full pt-3).\n   *  \"lg\":        overrides the chart wrapper div (default: border-t border-ds-border-2 pt-4 w-full). */\n  chartClassName?: string;\n  /** Legend items shown in the header. Only visible when size=\"lg\". */\n  legend?: StatCardLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ---------------------------------------------------------------------------\n// StatCard\n// ---------------------------------------------------------------------------\n\nexport const StatCard: FC<StatCardProps> = ({\n  size = \"md\",\n  title,\n  badge,\n  value,\n  dateRange,\n  chart,\n  chartPosition = \"side\",\n  chartClassName,\n  legend,\n  className,\n  onMenuClick,\n}) => {\n  const base = mergeClassNames(\n    \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\",\n    className,\n  );\n\n  // ── sm: 2-col, metric only ───────────────────────────────────────────────\n  if (size === \"sm\") {\n    return (\n      <div className={mergeClassNames(base, \"flex flex-col gap-7 p-5\")}>\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <MenuButton onClick={onMenuClick} />\n        </div>\n        <div className=\"flex flex-col gap-1\">\n          <p className=\"text-2xl font-bold tracking-tight text-ds-1 leading-none\">\n            {value}\n          </p>\n          <p className=\"text-[10px] text-ds-3 mt-1\">{dateRange}</p>\n        </div>\n      </div>\n    );\n  }\n\n  // ── md: 4-col, metric + chart ────────────────────────────────────────────\n  if (size === \"md\") {\n    const metricBlock = (\n      <div className=\"flex flex-col gap-1 min-w-0\">\n        <p className=\"text-3xl font-bold tracking-tight text-ds-1 leading-none\">\n          {value}\n        </p>\n        <p className=\"text-[10px] text-ds-3 mt-1\">{dateRange}</p>\n      </div>\n    );\n\n    return (\n      <div className={mergeClassNames(base, \"flex flex-col gap-3 p-5\")}>\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <MenuButton onClick={onMenuClick} />\n        </div>\n\n        {chartPosition === \"bottom\" ? (\n          <>\n            {metricBlock}\n            {chart && (\n              <div className={mergeClassNames(\"w-full pt-3\", chartClassName)}>\n                {chart}\n              </div>\n            )}\n          </>\n        ) : (\n          <div className=\"flex items-end justify-between gap-3\">\n            {metricBlock}\n            {chart && (\n              <div className={mergeClassNames(\"h-[46px] w-[155px] shrink-0 overflow-hidden\", chartClassName)}>\n                {chart}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  // ── lg: 12-col, header + full-width chart ────────────────────────────────\n  return (\n    <div className={mergeClassNames(base, \"flex flex-col p-5\")}>\n      {/* Header row */}\n      <div className=\"flex flex-wrap items-start justify-between gap-x-6 gap-y-2 mb-4\">\n        <div className=\"flex flex-col gap-1.5\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <span className=\"text-sm font-semibold text-ds-1\">{title}</span>\n            {badge && <TrendBadge value={badge.value} direction={badge.direction} />}\n          </div>\n          <p className=\"text-3xl font-bold tracking-tight text-ds-1 leading-none\">\n            {value}\n          </p>\n          <p className=\"text-xs text-ds-3\">{dateRange}</p>\n        </div>\n        <div className=\"flex items-center gap-4 ms-auto\">\n          {legend && legend.length > 0 && <LegendDots items={legend} />}\n          <MenuButton onClick={onMenuClick} />\n        </div>\n      </div>\n\n      {/* Chart area */}\n      {chart && (\n        <div className={mergeClassNames(\"border-t border-ds-border-2 pt-4 w-full\", chartClassName)}>\n          {chart}\n        </div>\n      )}\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface ChartCardLegendItem {\n  label: string;\n  color: string;\n}\n\nexport interface ChartCardProps {\n  title: string;\n  dateRange?: string;\n  legend?: ChartCardLegendItem[];\n  className?: string;\n  onMenuClick?: () => void;\n  children: ReactNode;\n}\n\nexport const ChartCard: FC<ChartCardProps> = ({\n  title,\n  dateRange,\n  legend,\n  className,\n  onMenuClick,\n  children,\n}) => {\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex flex-col gap-4 rounded-2xl border border-ds-border-2 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      <div className=\"flex flex-wrap items-start justify-between gap-x-6 gap-y-2\">\n        <div className=\"flex flex-col gap-0.5\">\n          <span className=\"text-sm font-semibold text-ds-color-fg\">\n            {title}\n          </span>\n          {dateRange && (\n            <span className=\"text-xs text-ds-color-fg-subtle\">{dateRange}</span>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-4 ms-auto\">\n          {legend && legend.length > 0 && (\n            <div className=\"flex items-center gap-3\">\n              {legend.map((item) => (\n                <span\n                  key={item.label}\n                  className=\"flex items-center gap-1.5 text-xs text-ds-color-fg-muted\"\n                >\n                  <span\n                    className=\"inline-block h-2.5 w-2.5 rounded-full shrink-0\"\n                    style={{ backgroundColor: item.color }}\n                    aria-hidden=\"true\"\n                  />\n                  {item.label}\n                </span>\n              ))}\n            </div>\n          )}\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            className=\"shrink-0 p-0.5! text-ds-color-fg-subtle\"\n            aria-label=\"More options\"\n            onClick={onMenuClick}\n          >\n            <EllipsisVerticalIcon width={18} height={18} />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"w-full\">{children}</div>\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface TopProductItem {\n  id: string | number;\n  name: string;\n  category: string;\n  soldCount: number;\n  image?: string;\n  rank: number;\n}\n\nexport interface TopProductsCardProps {\n  title?: string;\n  items: TopProductItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\nconst RankBadge: FC<{ rank: number }> = ({ rank }) => (\n  <span\n    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 \"\n    style={{\n      borderColor: \"var(--ds-color-accent)\",\n      color: \"var(--ds-color-accent)\",\n    }}\n    aria-label={`Rank ${rank}`}\n  >\n    {rank}\n  </span>\n);\n\nconst ProductImage: FC<{ src?: string; alt: string }> = ({ src, alt }) => {\n  if (src) {\n    return (\n      <img\n        src={src}\n        alt={alt}\n        className=\"h-11 w-11 shrink-0 rounded-md object-contain bg-ds-color-bg-utility p-1\"\n      />\n    );\n  }\n  return (\n    <div\n      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\"\n      aria-hidden=\"true\"\n    >\n      □\n    </div>\n  );\n};\n\nexport const TopProductsCard: FC<TopProductsCardProps> = ({\n  title = \"Top Products\",\n  items,\n  className,\n  onMenuClick,\n}) => {\n  return (\n    <div\n      className={mergeClassNames(\n        \"flex flex-col rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      <div className=\"mb-4 flex items-center justify-between\">\n        <span className=\"text-sm font-semibold text-ds-color-fg\">{title}</span>\n        <Button\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"shrink-0 p-0.5! text-ds-color-fg-subtle\"\n          aria-label=\"More options\"\n          onClick={onMenuClick}\n        >\n          <EllipsisVerticalIcon width={18} height={18} />\n        </Button>\n      </div>\n\n      <ul className=\"flex flex-col divide-y divide-ds-border-2\" role=\"list\">\n        {items.map((item) => (\n          <li\n            key={item.id}\n            className=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\"\n          >\n            <ProductImage src={item.image} alt={item.name} />\n\n            <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n              <span className=\"truncate text-sm font-semibold text-ds-color-fg\">\n                {item.name}\n              </span>\n              <span className=\"truncate text-xs text-ds-color-fg-subtle\">\n                {item.category} · {item.soldCount.toLocaleString()} sold\n              </span>\n            </div>\n\n            <RankBadge rank={item.rank} />\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\nimport {\n  BarChart as RechartsBarChart,\n  Bar,\n  XAxis,\n  Cell,\n  Tooltip,\n  ResponsiveContainer,\n} from \"recharts\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\nimport {\n  chartTooltipContentStyle,\n  chartTooltipItemStyle,\n  chartTooltipLabelStyle,\n  chartTooltipWrapperStyle,\n} from \"../charts/chartStyles\";\n\n// ── TrendBadge ────────────────────────────────────────────────────────────────\n\nconst TrendBadge: FC<{ value: string; direction: \"up\" | \"down\" }> = ({\n  value,\n  direction,\n}) => {\n  const isUp = direction === \"up\";\n  const color = isUp ? \"var(--ds-color-success)\" : \"var(--ds-color-danger)\";\n  const bg = isUp ? \"var(--ds-color-success-subtle)\" : \"var(--ds-color-danger-subtle)\";\n  return (\n    <span\n      className=\"inline-flex items-center gap-1 rounded-sm border px-1.5 py-0.5 text-[11px] font-semibold leading-none\"\n      style={{ color, borderColor: color, backgroundColor: bg }}\n      aria-label={`${value} ${isUp ? \"increase\" : \"decrease\"}`}\n    >\n      {value}\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\">\n        {isUp ? (\n          <path\n            d=\"M5 8V2M5 2L2 5M5 2L8 5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        ) : (\n          <path\n            d=\"M5 2V8M5 8L2 5M5 8L8 5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        )}\n      </svg>\n    </span>\n  );\n};\n\n// ── Public types ──────────────────────────────────────────────────────────────\n\nexport interface EarningsMetric {\n  icon: ReactNode;\n  /** CSS color value used for the icon badge background (at 15% opacity) and progress bar. */\n  color: string;\n  label: string;\n  value: string;\n  /** Progress bar fill, 0–100. */\n  progress: number;\n}\n\nexport interface WeeklyBarPoint {\n  day: string;\n  value: number;\n  /** When true the bar renders in accent color; others render in accent-subtle. */\n  highlighted?: boolean;\n}\n\nexport type EarningsCardSize = \"md\" | \"lg\";\n\nexport interface EarningsCardProps {\n  title?: string;\n  subtitle?: string;\n  /** The hero metric value (e.g. \"$468\"). */\n  value: string;\n  badge?: { value: string; direction: \"up\" | \"down\" };\n  /** Small description text below the hero value. */\n  description?: string;\n  /** 7-point weekly bar data (one entry per day). */\n  weeklyData: WeeklyBarPoint[];\n  /** Exactly 3 metric items shown in the footer strip. */\n  metrics: EarningsMetric[];\n  /**\n   * Layout size:\n   * - \"md\" — metric + compact chart side-by-side (default)\n   * - \"lg\" — full-width chart below the hero value, taller bars\n   */\n  size?: EarningsCardSize;\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ── EarningsCard ──────────────────────────────────────────────────────────────\n\n// ── Shared sub-components ─────────────────────────────────────────────────────\n\nconst BarChartSection: FC<{\n  weeklyData: WeeklyBarPoint[];\n  barSize?: number;\n  height?: number;\n}> = ({ weeklyData, barSize = 16, height = 90 }) => (\n  <div style={{ height }}>\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      <RechartsBarChart\n        data={weeklyData}\n        barSize={barSize}\n        barCategoryGap=\"25%\"\n        margin={{ top: 4, right: 0, left: 0, bottom: 0 }}\n      >\n        <XAxis\n          dataKey=\"day\"\n          axisLine={false}\n          tickLine={false}\n          tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 10 }}\n          dy={6}\n        />\n        <Tooltip\n          contentStyle={chartTooltipContentStyle}\n          itemStyle={chartTooltipItemStyle}\n          labelStyle={chartTooltipLabelStyle}\n          wrapperStyle={chartTooltipWrapperStyle}\n          cursor={false}\n        />\n        <Bar dataKey=\"value\" radius={[4, 4, 0, 0]}>\n          {weeklyData.map((entry, i) => (\n            <Cell\n              key={i}\n              fill={\n                entry.highlighted\n                  ? \"var(--ds-color-accent)\"\n                  : \"var(--ds-color-accent-subtle)\"\n              }\n            />\n          ))}\n        </Bar>\n      </RechartsBarChart>\n    </ResponsiveContainer>\n  </div>\n);\n\nconst MetricsStrip: FC<{ metrics: EarningsMetric[]; large?: boolean }> = ({\n  metrics,\n  large = false,\n}) => (\n  <div className=\"mx-5 mb-5 rounded-lg border border-ds-border-3/60 bg-ds-surface-2/50 px-1 py-3\">\n    <div className=\"grid grid-cols-3 divide-x divide-ds-border-3/50\">\n      {metrics.slice(0, 3).map((metric, i) => (\n        <div\n          key={i}\n          className={mergeClassNames(\"flex flex-col gap-2 px-4\", large && \"gap-3 px-5\")}\n        >\n          <div className=\"flex items-center gap-1.5\">\n            <span\n              className={mergeClassNames(\n                \"inline-flex shrink-0 items-center justify-center rounded-full\",\n                large ? \"h-6 w-6 text-xs\" : \"h-5 w-5 text-[10px]\",\n              )}\n              style={{\n                backgroundColor: metric.color + \"28\",\n                color: metric.color,\n              }}\n              aria-hidden=\"true\"\n            >\n              {metric.icon}\n            </span>\n            <span className={mergeClassNames(\"truncate text-ds-2\", large ? \"text-sm\" : \"text-xs\")}>\n              {metric.label}\n            </span>\n          </div>\n          <p className={mergeClassNames(\"font-bold text-ds-1\", large ? \"text-base\" : \"text-sm\")}>\n            {metric.value}\n          </p>\n          <div className=\"h-[3px] w-full overflow-hidden rounded-full bg-ds-border-3/50\">\n            <div\n              className=\"h-full rounded-full transition-all duration-500\"\n              style={{\n                width: `${Math.min(100, Math.max(0, metric.progress))}%`,\n                backgroundColor: metric.color,\n              }}\n            />\n          </div>\n        </div>\n      ))}\n    </div>\n  </div>\n);\n\n// ── EarningsCard ──────────────────────────────────────────────────────────────\n\nexport const EarningsCard: FC<EarningsCardProps> = ({\n  title = \"Earning Reports\",\n  subtitle = \"Weekly Earnings Overview\",\n  value,\n  badge,\n  description,\n  weeklyData,\n  metrics,\n  size = \"md\",\n  className,\n  onMenuClick,\n}) => (\n  <div\n    className={mergeClassNames(\n      \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\",\n      className,\n    )}\n  >\n    {/* ── Header ───────────────────────────────────────────────────────────── */}\n    <div className=\"flex items-start justify-between px-5 pb-3 pt-5\">\n      <div>\n        <p className=\"text-base font-bold text-ds-1\">{title}</p>\n        {subtitle && (\n          <p className=\"mt-0.5 text-xs text-ds-3\">{subtitle}</p>\n        )}\n      </div>\n      <Button\n        variant=\"tertiary\"\n        size=\"small\"\n        className=\"shrink-0 p-0.5! text-ds-3\"\n        aria-label=\"More options\"\n        onClick={onMenuClick}\n      >\n        <EllipsisVerticalIcon width={18} height={18} />\n      </Button>\n    </div>\n\n    {size === \"md\" && (\n      <>\n        {/* ── md: value + chart side-by-side ─────────────────────────────── */}\n        <div className=\"flex items-start gap-4 px-5 pb-5\">\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"text-4xl font-bold tracking-tight text-ds-1\">\n                {value}\n              </span>\n              {badge && (\n                <TrendBadge value={badge.value} direction={badge.direction} />\n              )}\n            </div>\n            {description && (\n              <p className=\"mt-2 max-w-[180px] text-xs leading-relaxed text-ds-3\">\n                {description}\n              </p>\n            )}\n          </div>\n          <div className=\"w-[185px] shrink-0\">\n            <BarChartSection weeklyData={weeklyData} barSize={16} height={90} />\n          </div>\n        </div>\n        <MetricsStrip metrics={metrics} />\n      </>\n    )}\n\n    {size === \"lg\" && (\n      <>\n        {/* ── lg: value + badge stacked, full-width chart below ──────────── */}\n        <div className=\"px-5 pb-4\">\n          <div className=\"flex items-center gap-3\">\n            <span className=\"text-5xl font-bold tracking-tight text-ds-1\">\n              {value}\n            </span>\n            {badge && (\n              <TrendBadge value={badge.value} direction={badge.direction} />\n            )}\n          </div>\n          {description && (\n            <p className=\"mt-2 text-sm leading-relaxed text-ds-3\">\n              {description}\n            </p>\n          )}\n        </div>\n        <div className=\"px-5 pb-5\">\n          <BarChartSection weeklyData={weeklyData} barSize={24} height={160} />\n        </div>\n        <MetricsStrip metrics={metrics} large />\n      </>\n    )}\n  </div>\n);\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { Tooltip } from \"../../overlays/tooltip/Tooltip\";\nimport { TruncatedText } from \"../../typography/truncated-text\";\nimport { mergeClassNames } from \"../../../utils\";\n\n// ── Gauge SVG ─────────────────────────────────────────────────────────────────\n// Renders a 270° segmented arc gauge from 7:30 (lower-left) to 4:30 (lower-right)\n// going clockwise through 12 o'clock. Each dash is a small rounded rect oriented\n// radially. Filled dashes render in accent color; empty ones render in border color.\n\ninterface GaugeChartProps {\n  percentage: number;\n  label?: string;\n  size?: number;\n}\n\nfunction GaugeChart({\n  percentage,\n  label = \"Completed Task\",\n  size = 190,\n}: GaugeChartProps) {\n  const segments = 26;\n  const filledCount = Math.round((percentage / 100) * segments);\n\n  const cx = size / 2;\n  const cy = size * 0.5;\n  const radius = size * 0.4;\n  const segW = size * 0.03;\n  const segH = size * 0.1;\n\n  const startAngle = 135;\n  const totalArc = 270;\n  const step = totalArc / segments;\n\n  // Clip bottom of viewBox — arc bottom sits at cy + radius * sin(135°) ≈ cy + r * 0.707\n  const viewH = Math.ceil(cy + radius * 0.78 + segH);\n\n  return (\n    <svg\n      width=\"100%\"\n      viewBox={`0 0 ${size} ${viewH}`}\n      style={{ aspectRatio: `${size} / ${viewH}` }}\n      aria-label={`${percentage}% ${label}`}\n      role=\"img\"\n    >\n      {Array.from({ length: segments }, (_, i) => {\n        // Center of this segment on the arc\n        const angleDeg = startAngle + (i + 0.5) * step;\n        const angleRad = (angleDeg * Math.PI) / 180;\n        const x = cx + radius * Math.cos(angleRad);\n        const y = cy + radius * Math.sin(angleRad);\n        const filled = i < filledCount;\n\n        return (\n          <rect\n            key={i}\n            // Draw centered at origin then translate + rotate into position\n            x={-segW / 2}\n            y={-segH / 2}\n            width={segW}\n            height={segH}\n            rx={segW / 2}\n            fill={\n              filled\n                ? \"var(--ds-color-accent)\"\n                : \"var(--ds-color-border-3)\"\n            }\n            opacity={filled ? 1 : 0.45}\n            // Rotate(θ - 90°) makes the rect's height align radially outward\n            transform={`translate(${x}, ${y}) rotate(${angleDeg - 90})`}\n          />\n        );\n      })}\n\n      {/* \"Completed Task\" label — above center */}\n      <text\n        x={cx}\n        y={cy - size * 0.04}\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        fontSize={size * 0.085}\n        fill=\"var(--ds-color-fg-muted)\"\n      >\n        {label}\n      </text>\n\n      {/* Percentage — large, below label */}\n      <text\n        x={cx}\n        y={cy + size * 0.12}\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        fontSize={size * 0.22}\n        fontWeight=\"700\"\n        fill=\"var(--ds-color-fg)\"\n      >\n        {percentage}%\n      </text>\n    </svg>\n  );\n}\n\n// ── Public types ──────────────────────────────────────────────────────────────\n\nexport interface SupportItem {\n  icon: ReactNode;\n  /** CSS color for the icon badge background (rendered at ~15% opacity). */\n  iconColor: string;\n  label: string;\n  value: string;\n}\n\nexport interface SupportTrackerCardProps {\n  title?: string;\n  subtitle?: string;\n  /** Large headline number (e.g. total ticket count). */\n  total: number | string;\n  totalLabel?: string;\n  /** Up to 4 stat rows shown on the left. */\n  items: SupportItem[];\n  /** 0–100 — drives the gauge arc fill. */\n  percentage: number;\n  /** Label inside the gauge below the percentage. */\n  completedLabel?: string;\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ── SupportTrackerCard ────────────────────────────────────────────────────────\n\nexport const SupportTrackerCard: FC<SupportTrackerCardProps> = ({\n  title = \"Support Tracker\",\n  subtitle = \"Last 7 Days\",\n  total,\n  totalLabel = \"Total Tickets\",\n  items,\n  percentage,\n  completedLabel = \"Completed Task\",\n  className,\n  onMenuClick,\n}) => (\n  <div\n    className={mergeClassNames(\n      \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\",\n      className,\n    )}\n  >\n    {/* ── Header ───────────────────────────────────────────────────────────── */}\n    <div className=\"flex items-start justify-between px-5 pb-3 pt-5\">\n      <div>\n        <p className=\"text-base font-bold text-ds-1\">{title}</p>\n        {subtitle && (\n          <p className=\"mt-0.5 text-xs text-ds-3\">{subtitle}</p>\n        )}\n      </div>\n      <Button\n        variant=\"tertiary\"\n        size=\"small\"\n        className=\"shrink-0 p-0.5! text-ds-3\"\n        aria-label=\"More options\"\n        onClick={onMenuClick}\n      >\n        <EllipsisVerticalIcon width={18} height={18} />\n      </Button>\n    </div>\n\n    {/* ── Body: left stats + right gauge ───────────────────────────────────── */}\n    <div className=\"flex items-center gap-3 px-5 pb-6\">\n      {/* Left column */}\n      <div className=\"flex flex-[1_1_0] flex-col gap-5 min-w-0\">\n        {/* Total */}\n        <div>\n          <p className=\"text-4xl font-bold tracking-tight text-ds-1\">\n            {total}\n          </p>\n          <p className=\"mt-0.5 text-xs text-ds-3\">{totalLabel}</p>\n        </div>\n\n        {/* Item list */}\n        <div className=\"flex flex-col gap-3\">\n          {items.map((item, i) => (\n            <div key={i} className=\"flex items-center gap-3\">\n              <span\n                className=\"inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-md\"\n                style={{\n                  backgroundColor: item.iconColor + \"22\",\n                  color: item.iconColor,\n                }}\n                aria-hidden=\"true\"\n              >\n                {item.icon}\n              </span>\n              <div className=\"min-w-0\">\n                <Tooltip content={item.label} position=\"top\" delayShow={400}>\n                  <TruncatedText\n                    showTitleOnHover\n                    className=\"text-sm font-semibold text-ds-1\"\n                  >\n                    {item.label}\n                  </TruncatedText>\n                </Tooltip>\n                <p className=\"text-xs text-ds-3\">{item.value}</p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Right: gauge — flex-1 so it grows/shrinks with card width */}\n      <div className=\"flex-[1_1_0] min-w-0\">\n        <GaugeChart\n          percentage={percentage}\n          label={completedLabel}\n          size={190}\n        />\n      </div>\n    </div>\n  </div>\n);\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\n// ── TrendBadge (inline, no menu needed for this card) ────────────────────────\n\nconst TrendBadge: FC<{ value: string; direction: \"up\" | \"down\" }> = ({\n  value,\n  direction,\n}) => {\n  const isUp = direction === \"up\";\n  const color = isUp ? \"var(--ds-color-success)\" : \"var(--ds-color-danger)\";\n  const bg = isUp ? \"var(--ds-color-success-subtle)\" : \"var(--ds-color-danger-subtle)\";\n  return (\n    <span\n      className=\"text-sm font-semibold\"\n      style={{ color, backgroundColor: bg }}\n      aria-label={`${value} ${isUp ? \"increase\" : \"decrease\"}`}\n    >\n      {value}\n    </span>\n  );\n};\n\n// ── Public types ──────────────────────────────────────────────────────────────\n\nexport interface SalesMetric {\n  icon: ReactNode;\n  label: string;\n  /** Main percentage or rate displayed large (e.g. \"62.2%\"). */\n  percentage: string;\n  /** Secondary sub-count displayed small below (e.g. \"6,440\"). */\n  count: string;\n  /** CSS color for the metric's segment of the dual progress bar. */\n  color: string;\n}\n\nexport interface SalesOverviewCardProps {\n  title?: string;\n  badge?: { value: string; direction: \"up\" | \"down\" };\n  /** Hero value displayed below the title (e.g. \"$42.5k\"). */\n  value: string;\n  leftMetric: SalesMetric;\n  rightMetric: SalesMetric;\n  /**\n   * Split point of the dual progress bar (0–100).\n   * Defaults to left/(left+right) ratio derived from the percentage strings.\n   * Pass explicitly if your percentages don't represent shares of a whole.\n   */\n  leftProgress?: number;\n  /** Label of the center \"VS\" divider badge. */\n  vsLabel?: string;\n  className?: string;\n}\n\nfunction parsePercent(s: string): number {\n  return parseFloat(s.replace(\"%\", \"\")) || 0;\n}\n\n// ── SalesOverviewCard ─────────────────────────────────────────────────────────\n\nexport const SalesOverviewCard: FC<SalesOverviewCardProps> = ({\n  title = \"Sales Overview\",\n  badge,\n  value,\n  leftMetric,\n  rightMetric,\n  leftProgress,\n  vsLabel = \"VS\",\n  className,\n}) => {\n  const leftPct = parsePercent(leftMetric.percentage);\n  const rightPct = parsePercent(rightMetric.percentage);\n  const total = leftPct + rightPct;\n  const resolvedLeftProgress =\n    leftProgress ?? (total > 0 ? (leftPct / total) * 100 : 50);\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      {/* ── Header ─────────────────────────────────────────────────────────── */}\n      <div className=\"mb-1 flex items-center justify-between gap-2\">\n        <p className=\"text-sm font-semibold text-ds-1\">{title}</p>\n        {badge && (\n          <TrendBadge value={badge.value} direction={badge.direction} />\n        )}\n      </div>\n\n      {/* ── Hero value ─────────────────────────────────────────────────────── */}\n      <p className=\"mb-5 text-3xl font-bold tracking-tight text-ds-1\">\n        {value}\n      </p>\n\n      {/* ── Metrics row ────────────────────────────────────────────────────── */}\n      <div className=\"relative mb-5 flex items-start\">\n        {/* Left metric */}\n        <div className=\"flex flex-1 flex-col gap-1\">\n          <div className=\"flex items-center gap-1.5 text-xs text-ds-2\">\n            <span\n              className=\"inline-flex h-6 w-6 items-center justify-center rounded-md\"\n              style={{\n                backgroundColor: leftMetric.color + \"20\",\n                color: leftMetric.color,\n              }}\n              aria-hidden=\"true\"\n            >\n              {leftMetric.icon}\n            </span>\n            <span className=\"font-medium\">{leftMetric.label}</span>\n          </div>\n          <p className=\"text-2xl font-bold text-ds-1\">{leftMetric.percentage}</p>\n          <p className=\"text-xs text-ds-3\">{leftMetric.count}</p>\n        </div>\n\n        {/* VS divider */}\n        <div className=\"relative flex flex-col items-center self-stretch\">\n          <div className=\"w-px flex-1 bg-ds-border-3\" />\n          <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\">\n            {vsLabel}\n          </span>\n          <div className=\"w-px flex-1 bg-ds-border-3\" />\n        </div>\n\n        {/* Right metric */}\n        <div className=\"flex flex-1 flex-col items-end gap-1\">\n          <div className=\"flex items-center gap-1.5 text-xs text-ds-2\">\n            <span className=\"font-medium\">{rightMetric.label}</span>\n            <span\n              className=\"inline-flex h-6 w-6 items-center justify-center rounded-md\"\n              style={{\n                backgroundColor: rightMetric.color + \"20\",\n                color: rightMetric.color,\n              }}\n              aria-hidden=\"true\"\n            >\n              {rightMetric.icon}\n            </span>\n          </div>\n          <p className=\"text-2xl font-bold text-ds-1\">{rightMetric.percentage}</p>\n          <p className=\"text-xs text-ds-3\">{rightMetric.count}</p>\n        </div>\n      </div>\n\n      {/* ── Dual progress bar ───────────────────────────────────────────────── */}\n      <div className=\"flex h-2 w-full overflow-hidden rounded-full\">\n        <div\n          className=\"h-full rounded-l-full transition-all duration-500\"\n          style={{\n            width: `${resolvedLeftProgress}%`,\n            backgroundColor: leftMetric.color,\n          }}\n        />\n        <div\n          className=\"h-full flex-1 rounded-r-full transition-all duration-500\"\n          style={{ backgroundColor: rightMetric.color }}\n        />\n      </div>\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC } from \"react\";\nimport {\n  BarChart as RechartsBarChart,\n  Bar,\n  XAxis,\n  Cell,\n  Tooltip,\n  ResponsiveContainer,\n} from \"recharts\";\n\nimport { mergeClassNames } from \"../../../utils\";\nimport {\n  chartTooltipContentStyle,\n  chartTooltipItemStyle,\n  chartTooltipLabelStyle,\n  chartTooltipWrapperStyle,\n} from \"../charts/chartStyles\";\n\n// ── Public types ──────────────────────────────────────────────────────────────\n\nexport interface RevenueGrowthBarPoint {\n  day: string;\n  value: number;\n  /** Renders in highlightColor; others render in barColor. */\n  highlighted?: boolean;\n}\n\nexport interface RevenueGrowthCardProps {\n  title?: string;\n  subtitle?: string;\n  /** Hero metric value (e.g. \"$4,673\"). */\n  value: string;\n  badge?: { value: string; direction: \"up\" | \"down\" };\n  /** 7-point weekly bar data. */\n  weeklyData: RevenueGrowthBarPoint[];\n  /** CSS color for the highlighted bar. Defaults to ds-color-success. */\n  highlightColor?: string;\n  /** CSS color for non-highlighted bars. Defaults to a subtle tint of highlightColor. */\n  barColor?: string;\n  className?: string;\n}\n\nconst TrendBadge: FC<{ value: string; direction: \"up\" | \"down\"; color?: string; bg?: string }> = ({\n  value,\n  direction,\n  color,\n  bg,\n}) => {\n  const isUp = direction === \"up\";\n  const resolvedColor = color ?? (isUp ? \"var(--ds-color-success)\" : \"var(--ds-color-danger)\");\n  const resolvedBg = bg ?? (isUp ? \"var(--ds-color-success-subtle)\" : \"var(--ds-color-danger-subtle)\");\n  return (\n    <span\n      className=\"inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-semibold\"\n      style={{ color: resolvedColor, backgroundColor: resolvedBg }}\n      aria-label={`${value} ${isUp ? \"increase\" : \"decrease\"}`}\n    >\n      {value}\n    </span>\n  );\n};\n\n// ── RevenueGrowthCard ─────────────────────────────────────────────────────────\n\nexport const RevenueGrowthCard: FC<RevenueGrowthCardProps> = ({\n  title = \"Revenue Growth\",\n  subtitle = \"Weekly Report\",\n  value,\n  badge,\n  weeklyData,\n  highlightColor = \"var(--ds-color-success)\",\n  barColor,\n  className,\n}) => {\n  const resolvedBarColor = barColor ?? highlightColor + \"38\";\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      {/* ── Header ─────────────────────────────────────────────────────────── */}\n      <div className=\"mb-4\">\n        <p className=\"text-base font-bold text-ds-1\">{title}</p>\n        {subtitle && <p className=\"mt-0.5 text-xs text-ds-3\">{subtitle}</p>}\n      </div>\n\n      {/* ── Body: value + chart ─────────────────────────────────────────────── */}\n      <div className=\"flex items-end gap-4\">\n        {/* Left: value + badge */}\n        <div className=\"flex flex-col gap-2\">\n          <p className=\"text-4xl font-bold tracking-tight text-ds-1\">{value}</p>\n          {badge && (\n            <TrendBadge\n              value={badge.value}\n              direction={badge.direction}\n              color={highlightColor}\n              bg={highlightColor + \"22\"}\n            />\n          )}\n        </div>\n\n        {/* Right: bar chart */}\n        <div className=\"min-w-0 flex-1 pb-1\" style={{ height: 100 }}>\n          <ResponsiveContainer width=\"100%\" height=\"100%\">\n            <RechartsBarChart\n              data={weeklyData}\n              barSize={14}\n              barCategoryGap=\"25%\"\n              margin={{ top: 4, right: 0, left: 0, bottom: 0 }}\n            >\n              <XAxis\n                dataKey=\"day\"\n                axisLine={false}\n                tickLine={false}\n                tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 10 }}\n                dy={6}\n              />\n              <Tooltip\n                contentStyle={chartTooltipContentStyle}\n                itemStyle={chartTooltipItemStyle}\n                labelStyle={chartTooltipLabelStyle}\n                wrapperStyle={chartTooltipWrapperStyle}\n                cursor={false}\n              />\n              <Bar dataKey=\"value\" radius={[4, 4, 0, 0]}>\n                {weeklyData.map((entry, i) => (\n                  <Cell\n                    key={i}\n                    fill={entry.highlighted ? highlightColor : resolvedBarColor}\n                  />\n                ))}\n              </Bar>\n            </RechartsBarChart>\n          </ResponsiveContainer>\n        </div>\n      </div>\n    </div>\n  );\n};\n","\"use client\";\n\nimport { useState, type FC, type ReactNode } from \"react\";\nimport {\n  BarChart as RechartsBarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Cell,\n  LabelList,\n  Tooltip,\n  ResponsiveContainer,\n} from \"recharts\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\nimport {\n  chartTooltipContentStyle,\n  chartTooltipItemStyle,\n  chartTooltipLabelStyle,\n  chartTooltipWrapperStyle,\n} from \"../charts/chartStyles\";\n\n// ── Public types ──────────────────────────────────────────────────────────────\n\nexport interface EarningTabBarPoint {\n  name: string;\n  value: number;\n  /** Renders in accent color; others in accent-subtle. */\n  highlighted?: boolean;\n}\n\nexport interface EarningTab {\n  id: string;\n  icon: ReactNode;\n  label: string;\n  chartData: EarningTabBarPoint[];\n}\n\nexport interface EarningReportsTabsCardProps {\n  title?: string;\n  subtitle?: string;\n  tabs: EarningTab[];\n  /** Controlled: currently selected tab id. */\n  selectedTabId?: string;\n  onTabChange?: (id: string) => void;\n  /** Default selected tab id for uncontrolled usage. Defaults to first tab. */\n  defaultTabId?: string;\n  /** Format Y-axis tick labels. Defaults to \"28k\" style. */\n  yAxisFormatter?: (value: number) => string;\n  /** Format bar labels above bars. Defaults to same as yAxisFormatter. */\n  barLabelFormatter?: (value: number) => string;\n  /** Show a \"+\" add-tab button at the end of the tabs row. */\n  showAddTab?: boolean;\n  onAddTab?: () => void;\n  className?: string;\n  onMenuClick?: () => void;\n}\n\nfunction defaultKFormatter(value: number): string {\n  if (value >= 1000) return `${Math.round(value / 1000)}k`;\n  return String(value);\n}\n\n// ── EarningReportsTabsCard ────────────────────────────────────────────────────\n\nexport const EarningReportsTabsCard: FC<EarningReportsTabsCardProps> = ({\n  title = \"Earning Reports\",\n  subtitle = \"Yearly Earnings Overview\",\n  tabs,\n  selectedTabId,\n  onTabChange,\n  defaultTabId,\n  yAxisFormatter = defaultKFormatter,\n  barLabelFormatter,\n  showAddTab = true,\n  onAddTab,\n  className,\n  onMenuClick,\n}) => {\n  const [internalId, setInternalId] = useState(\n    defaultTabId ?? tabs[0]?.id ?? \"\",\n  );\n\n  const isControlled = selectedTabId !== undefined;\n  const activeId = isControlled ? selectedTabId : internalId;\n\n  const handleTabChange = (id: string) => {\n    if (!isControlled) setInternalId(id);\n    onTabChange?.(id);\n  };\n\n  const activeTab = tabs.find((t) => t.id === activeId) ?? tabs[0];\n  const labelFormatter = barLabelFormatter ?? yAxisFormatter;\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\",\n        className,\n      )}\n    >\n      {/* ── Header ─────────────────────────────────────────────────────────── */}\n      <div className=\"flex items-start justify-between px-5 pb-4 pt-5\">\n        <div>\n          <p className=\"text-base font-bold text-ds-1\">{title}</p>\n          {subtitle && <p className=\"mt-0.5 text-xs text-ds-3\">{subtitle}</p>}\n        </div>\n        <Button\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"shrink-0 p-0.5! text-ds-3\"\n          aria-label=\"More options\"\n          onClick={onMenuClick}\n        >\n          <EllipsisVerticalIcon width={18} height={18} />\n        </Button>\n      </div>\n\n      {/* ── Tab selector ─────────────────────────────────────────────────────── */}\n      <div className=\"flex items-center gap-3 overflow-x-auto px-5 pb-5\">\n        {tabs.map((tab) => {\n          const isActive = tab.id === activeId;\n          return (\n            <Button\n              key={tab.id}\n              variant=\"tertiary\"\n              onClick={() => handleTabChange(tab.id)}\n              className={mergeClassNames(\n                \"min-w-[72px] flex-col gap-1.5 rounded-lg border p-3 transition-colors hover:opacity-100\",\n                isActive\n                  ? \"border-ds-accent bg-ds-accent-subtle text-ds-accent\"\n                  : \"border-ds-border-3 bg-ds-surface-1 text-ds-2 hover:border-ds-border-accent/30 hover:bg-ds-surface-2\",\n              )}\n              aria-pressed={isActive}\n              aria-label={tab.label}\n            >\n              <span className=\"flex h-6 w-6 items-center justify-center\">\n                {tab.icon}\n              </span>\n              <span className=\"text-xs font-semibold\">{tab.label}</span>\n            </Button>\n          );\n        })}\n\n        {showAddTab && (\n          <Button\n            variant=\"tertiary\"\n            onClick={onAddTab}\n            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\"\n            aria-label=\"Add category\"\n          >\n            <span className=\"flex h-6 w-6 items-center justify-center text-lg font-light\">\n              +\n            </span>\n          </Button>\n        )}\n      </div>\n\n      {/* ── Bar chart ───────────────────────────────────────────────────────── */}\n      <div className=\"px-2 pb-5\" style={{ height: 280 }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <RechartsBarChart\n            data={activeTab?.chartData ?? []}\n            barSize={36}\n            barCategoryGap=\"25%\"\n            margin={{ top: 28, right: 16, left: 0, bottom: 0 }}\n          >\n            <CartesianGrid\n              strokeDasharray=\"3 3\"\n              vertical={false}\n              stroke=\"var(--ds-color-border)\"\n              opacity={0.5}\n            />\n            <XAxis\n              dataKey=\"name\"\n              axisLine={false}\n              tickLine={false}\n              tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n              dy={10}\n            />\n            <YAxis\n              axisLine={false}\n              tickLine={false}\n              tickFormatter={yAxisFormatter}\n              tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 11 }}\n              dx={-4}\n            />\n            <Tooltip\n              contentStyle={chartTooltipContentStyle}\n              itemStyle={chartTooltipItemStyle}\n              labelStyle={chartTooltipLabelStyle}\n              wrapperStyle={chartTooltipWrapperStyle}\n              cursor={{ fill: \"var(--ds-color-accent)\", fillOpacity: 0.06 }}\n              formatter={(v) => [labelFormatter(Number(v)), activeTab?.label]}\n            />\n            <Bar dataKey=\"value\" radius={[4, 4, 0, 0]}>\n              <LabelList\n                dataKey=\"value\"\n                position=\"top\"\n                formatter={(v) => labelFormatter(Number(v))}\n                style={{\n                  fontSize: 11,\n                  fill: \"var(--ds-color-fg-muted)\",\n                  fontWeight: 600,\n                }}\n              />\n              {(activeTab?.chartData ?? []).map((entry, i) => (\n                <Cell\n                  key={i}\n                  fill={\n                    entry.highlighted\n                      ? \"var(--ds-color-accent)\"\n                      : \"var(--ds-color-accent-subtle)\"\n                  }\n                />\n              ))}\n            </Bar>\n          </RechartsBarChart>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC } from \"react\";\nimport {\n  BarChart as RechartsBarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Cell,\n  LabelList,\n  Tooltip,\n  ResponsiveContainer,\n} from \"recharts\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { TruncatedText } from \"../../typography/truncated-text\";\nimport { mergeClassNames } from \"../../../utils\";\nimport {\n  chartTooltipContentStyle,\n  chartTooltipItemStyle,\n  chartTooltipLabelStyle,\n  chartTooltipWrapperStyle,\n} from \"../charts/chartStyles\";\n\n// ── Bar label ─────────────────────────────────────────────────────────────────\n// foreignObject lets us use TruncatedText (HTML) inside the Recharts SVG canvas.\n\ninterface BarLabelProps {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  value?: string;\n}\n\nfunction BarLabel({ x = 0, y = 0, width = 0, height = 0, value = \"\" }: BarLabelProps) {\n  const pad = 10;\n  const availW = width - pad * 2;\n  if (availW < 24) return null;\n\n  return (\n    <foreignObject x={x + pad} y={y} width={availW} height={height}>\n      <div\n        style={{\n          height: \"100%\",\n          display: \"flex\",\n          alignItems: \"center\",\n          overflow: \"hidden\",\n        }}\n      >\n        <TruncatedText\n          showTitleOnHover\n          style={{ color: \"#fff\", fontSize: 12, fontWeight: 600, lineHeight: 1 }}\n        >\n          {value}\n        </TruncatedText>\n      </div>\n    </foreignObject>\n  );\n}\n\n// ── Public types ──────────────────────────────────────────────────────────────\n\nexport interface TopicItem {\n  label: string;\n  /** 0–100 — drives both the bar width and the legend percentage. */\n  percentage: number;\n  /** CSS color for the bar and the legend dot. */\n  color: string;\n}\n\nexport interface TopicsCardProps {\n  title?: string;\n  items: TopicItem[];\n  /** X-axis tick formatter. Defaults to \"N%\" format. */\n  xTickFormatter?: (value: number) => string;\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ── TopicsCard ────────────────────────────────────────────────────────────────\n\nexport const TopicsCard: FC<TopicsCardProps> = ({\n  title = \"Topic you are interested in\",\n  items,\n  xTickFormatter = (v: number) => `${v}%`,\n  className,\n  onMenuClick,\n}) => {\n  // Recharts vertical layout: data renders top→bottom, so reverse to put\n  // the highest-value item at the top.\n  const chartData = [...items]\n    .sort((a, b) => b.percentage - a.percentage)\n    .map((item, i) => ({\n      ...item,\n      rank: items.length - i,\n    }));\n\n  const maxValue = Math.max(...items.map((it) => it.percentage), 1);\n  // Round up to next multiple of 7 for clean percentage gridlines\n  const xMax = Math.ceil(maxValue / 7) * 7;\n  const xTicks = Array.from(\n    { length: Math.floor(xMax / 7) + 1 },\n    (_, i) => i * 7,\n  );\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\",\n        className,\n      )}\n    >\n      {/* ── Header ─────────────────────────────────────────────────────────── */}\n      <div className=\"flex items-start justify-between px-5 pb-4 pt-5\">\n        <p className=\"text-base font-bold text-ds-1\">{title}</p>\n        <Button\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"shrink-0 p-0.5! text-ds-3\"\n          aria-label=\"More options\"\n          onClick={onMenuClick}\n        >\n          <EllipsisVerticalIcon width={18} height={18} />\n        </Button>\n      </div>\n\n      {/* ── Body: chart + legend ─────────────────────────────────────────────── */}\n      <div className=\"flex items-center gap-4 px-5 pb-6\">\n        {/* Horizontal bar chart */}\n        <div className=\"min-w-0 flex-1\" style={{ height: items.length * 42 + 32 }}>\n          <ResponsiveContainer width=\"100%\" height=\"100%\">\n            <RechartsBarChart\n              data={chartData}\n              layout=\"vertical\"\n              barSize={28}\n              barCategoryGap=\"20%\"\n              margin={{ top: 0, right: 16, left: 8, bottom: 24 }}\n            >\n              <CartesianGrid\n                strokeDasharray=\"3 3\"\n                horizontal={false}\n                stroke=\"var(--ds-color-border)\"\n                opacity={0.5}\n              />\n              <XAxis\n                type=\"number\"\n                domain={[0, xMax]}\n                ticks={xTicks}\n                tickFormatter={xTickFormatter}\n                axisLine={false}\n                tickLine={false}\n                tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 11 }}\n                dy={10}\n              />\n              <YAxis\n                type=\"category\"\n                dataKey=\"rank\"\n                axisLine={false}\n                tickLine={false}\n                tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 11 }}\n                dx={-4}\n                width={16}\n              />\n              <Tooltip\n                contentStyle={chartTooltipContentStyle}\n                itemStyle={chartTooltipItemStyle}\n                labelStyle={chartTooltipLabelStyle}\n                wrapperStyle={chartTooltipWrapperStyle}\n                cursor={{ fill: \"rgba(0,0,0,0.04)\" }}\n                formatter={(v, _name, props) => [\n                  `${Number(v)}%`,\n                  (props as { payload?: { label?: string } }).payload?.label ?? \"\",\n                ]}\n                labelFormatter={() => \"\"}\n              />\n              <Bar dataKey=\"percentage\" radius={[0, 4, 4, 0]}>\n                <LabelList\n                  dataKey=\"label\"\n                  content={(props) => <BarLabel {...(props as BarLabelProps)} />}\n                />\n                {chartData.map((entry, i) => (\n                  <Cell key={i} fill={entry.color} />\n                ))}\n              </Bar>\n            </RechartsBarChart>\n          </ResponsiveContainer>\n        </div>\n\n        {/* Legend: 2-column grid */}\n        <div className=\"grid shrink-0 grid-cols-2 gap-x-6 gap-y-4\">\n          {items.map((item) => (\n            <div key={item.label} className=\"flex flex-col gap-0.5\">\n              <div className=\"flex items-center gap-1.5\">\n                <span\n                  className=\"inline-block h-2.5 w-2.5 shrink-0 rounded-full\"\n                  style={{ backgroundColor: item.color }}\n                  aria-hidden=\"true\"\n                />\n                <span className=\"text-xs text-ds-2\">{item.label}</span>\n              </div>\n              <p className=\"ps-4 text-sm font-bold text-ds-1\">\n                {item.percentage}%\n              </p>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n","\"use client\";\n\nimport { useState, useRef, useEffect, type FC } from \"react\";\nimport {\n  ComposedChart,\n  Bar,\n  Line,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n} from \"recharts\";\n\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport {\n  chartTooltipContentStyle,\n  chartTooltipItemStyle,\n  chartTooltipLabelStyle,\n  chartTooltipWrapperStyle,\n} from \"../charts/chartStyles\";\n\n// ── Public types ──────────────────────────────────────────────────────────────\n\nexport interface ShipmentDataPoint {\n  /** X-axis label, e.g. \"1 Jan\". */\n  date: string;\n  /** Shipment bar value. */\n  shipment: number;\n  /** Delivery line value. */\n  delivery: number;\n}\n\nexport interface ShipmentStatisticsCardProps {\n  title?: string;\n  subtitle?: string;\n  data: ShipmentDataPoint[];\n  /** Month names shown in the dropdown. */\n  months?: string[];\n  /** Controlled selected month. */\n  selectedMonth?: string;\n  onMonthChange?: (month: string) => void;\n  /** Default month for uncontrolled usage. Defaults to months[0]. */\n  defaultMonth?: string;\n  /** Y-axis tick formatter. Defaults to \"${v}%\" style. */\n  yAxisFormatter?: (v: number) => string;\n  /** Bar fill color. Defaults to amber. */\n  shipmentColor?: string;\n  /** Line stroke color. Defaults to indigo. */\n  deliveryColor?: string;\n  /** Labels for the legend. */\n  shipmentLabel?: string;\n  deliveryLabel?: string;\n  className?: string;\n}\n\nconst ChevronDownIcon = () => (\n  <svg\n    width=\"13\"\n    height=\"13\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <polyline points=\"6 9 12 15 18 9\" />\n  </svg>\n);\n\n// ── ShipmentStatisticsCard ────────────────────────────────────────────────────\n\nexport const ShipmentStatisticsCard: FC<ShipmentStatisticsCardProps> = ({\n  title = \"Shipment statistics\",\n  subtitle,\n  data,\n  months = [\n    \"January\", \"February\", \"March\", \"April\", \"May\", \"June\",\n    \"July\", \"August\", \"September\", \"October\", \"November\", \"December\",\n  ],\n  selectedMonth: controlledMonth,\n  onMonthChange,\n  defaultMonth,\n  yAxisFormatter = (v: number) => `${v}%`,\n  shipmentColor = \"#FFB400\",\n  deliveryColor = \"#7367F0\",\n  shipmentLabel = \"Shipment\",\n  deliveryLabel = \"Delivery\",\n  className,\n}) => {\n  const isControlled = controlledMonth !== undefined;\n  const [internalMonth, setInternalMonth] = useState(\n    defaultMonth ?? months[0] ?? \"\",\n  );\n  const activeMonth = isControlled ? controlledMonth : internalMonth;\n\n  const [dropdownOpen, setDropdownOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    function handleClickOutside(e: MouseEvent) {\n      if (\n        dropdownRef.current &&\n        !dropdownRef.current.contains(e.target as Node)\n      ) {\n        setDropdownOpen(false);\n      }\n    }\n    if (dropdownOpen) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n    }\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, [dropdownOpen]);\n\n  const handleMonthSelect = (m: string) => {\n    if (!isControlled) setInternalMonth(m);\n    onMonthChange?.(m);\n    setDropdownOpen(false);\n  };\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5\",\n        className,\n      )}\n    >\n      {/* ── Header ─────────────────────────────────────────────────────────── */}\n      <div className=\"mb-5 flex items-start justify-between gap-4\">\n        <div>\n          <p className=\"text-lg font-bold text-ds-1\">{title}</p>\n          {subtitle && (\n            <p className=\"mt-0.5 text-sm text-ds-3\">{subtitle}</p>\n          )}\n        </div>\n\n        {/* Month dropdown */}\n        <div ref={dropdownRef} className=\"relative shrink-0\">\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            onClick={() => setDropdownOpen((o) => !o)}\n            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\"\n            aria-haspopup=\"listbox\"\n            aria-expanded={dropdownOpen}\n          >\n            {activeMonth}\n            <span\n              className={mergeClassNames(\n                \"transition-transform duration-150\",\n                dropdownOpen ? \"rotate-180\" : \"\",\n              )}\n            >\n              <ChevronDownIcon />\n            </span>\n          </Button>\n\n          {dropdownOpen && (\n            <div\n              role=\"listbox\"\n              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\"\n            >\n              {months.map((m) => (\n                <Button\n                  key={m}\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  role=\"option\"\n                  aria-selected={m === activeMonth}\n                  onClick={() => handleMonthSelect(m)}\n                  className={mergeClassNames(\n                    \"w-full justify-start rounded-none px-3 py-1.5 text-start text-sm hover:bg-ds-surface-2 hover:opacity-100\",\n                    m === activeMonth\n                      ? \"font-semibold text-ds-accent\"\n                      : \"text-ds-2\",\n                  )}\n                >\n                  {m}\n                </Button>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* ── Chart ──────────────────────────────────────────────────────────── */}\n      <div style={{ height: 260 }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <ComposedChart\n            data={data}\n            barSize={22}\n            barCategoryGap=\"30%\"\n            margin={{ top: 8, right: 8, left: 0, bottom: 0 }}\n          >\n            <CartesianGrid\n              strokeDasharray=\"3 3\"\n              vertical={false}\n              stroke=\"var(--ds-color-border)\"\n              opacity={0.5}\n            />\n            <XAxis\n              dataKey=\"date\"\n              axisLine={false}\n              tickLine={false}\n              tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n              dy={10}\n            />\n            <YAxis\n              axisLine={false}\n              tickLine={false}\n              tickFormatter={yAxisFormatter}\n              tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 11 }}\n              dx={-4}\n              domain={[0, \"auto\"]}\n            />\n            <Tooltip\n              contentStyle={chartTooltipContentStyle}\n              itemStyle={chartTooltipItemStyle}\n              labelStyle={chartTooltipLabelStyle}\n              wrapperStyle={chartTooltipWrapperStyle}\n              cursor={{ fill: \"rgba(0,0,0,0.04)\" }}\n              formatter={(v, name) => [\n                yAxisFormatter(Number(v)),\n                name === \"shipment\" ? shipmentLabel : deliveryLabel,\n              ]}\n            />\n            <Bar\n              dataKey=\"shipment\"\n              fill={shipmentColor}\n              radius={[4, 4, 0, 0]}\n            />\n            <Line\n              type=\"monotone\"\n              dataKey=\"delivery\"\n              stroke={deliveryColor}\n              strokeWidth={2.5}\n              dot={{ r: 3.5, fill: deliveryColor, strokeWidth: 0 }}\n              activeDot={{ r: 5, fill: deliveryColor, strokeWidth: 0 }}\n            />\n          </ComposedChart>\n        </ResponsiveContainer>\n      </div>\n\n      {/* ── Legend ─────────────────────────────────────────────────────────── */}\n      <div className=\"mt-4 flex items-center justify-center gap-6\">\n        <div className=\"flex items-center gap-2\">\n          <span\n            className=\"inline-block h-2.5 w-2.5 shrink-0 rounded-full\"\n            style={{ backgroundColor: shipmentColor }}\n            aria-hidden=\"true\"\n          />\n          <span className=\"text-sm text-ds-2\">{shipmentLabel}</span>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <span\n            className=\"inline-block h-2.5 w-2.5 shrink-0 rounded-full\"\n            style={{ backgroundColor: deliveryColor }}\n            aria-hidden=\"true\"\n          />\n          <span className=\"text-sm text-ds-2\">{deliveryLabel}</span>\n        </div>\n      </div>\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\n// ── Public types ──────────────────────────────────────────────────────────────\n\nexport interface VehicleConditionItem {\n  label: string;\n  /** Secondary descriptor, e.g. \"24 vehicles\" or \"all exceptions\". */\n  sublabel: string;\n  /** Arc fill percentage (0–100). */\n  percentage: number;\n  /** CSS color for the progress arc and the label text. */\n  color: string;\n  /** Badge content shown on the right, e.g. \"+10%\", \"8.1\", \"-2.5%\". */\n  badge: string;\n}\n\nexport interface VehicleConditionCardProps {\n  title?: string;\n  items: VehicleConditionItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ── Mini circular gauge ───────────────────────────────────────────────────────\n\nconst MiniGauge: FC<{ percentage: number; color: string; size?: number }> = ({\n  percentage,\n  color,\n  size = 62,\n}) => {\n  const strokeWidth = 4;\n  const r = (size - strokeWidth * 2) / 2;\n  const cx = size / 2;\n  const cy = size / 2;\n  const circumference = 2 * Math.PI * r;\n  const clamped = Math.max(0, Math.min(100, percentage));\n  const dashOffset = circumference - (clamped / 100) * circumference;\n\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox={`0 0 ${size} ${size}`}\n      aria-hidden=\"true\"\n    >\n      {/* Background track */}\n      <circle\n        cx={cx}\n        cy={cy}\n        r={r}\n        fill=\"none\"\n        stroke=\"var(--ds-color-border)\"\n        strokeWidth={strokeWidth}\n      />\n      {/* Progress arc */}\n      <circle\n        cx={cx}\n        cy={cy}\n        r={r}\n        fill=\"none\"\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeDasharray={circumference}\n        strokeDashoffset={dashOffset}\n        strokeLinecap=\"round\"\n        transform={`rotate(-90 ${cx} ${cy})`}\n      />\n      {/* Percentage label */}\n      <text\n        x={cx}\n        y={cy}\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        fontSize={size * 0.21}\n        fontWeight=\"700\"\n        fill=\"var(--ds-color-fg)\"\n      >\n        {clamped}%\n      </text>\n    </svg>\n  );\n};\n\n// ── VehicleConditionCard ──────────────────────────────────────────────────────\n\nexport const VehicleConditionCard: FC<VehicleConditionCardProps> = ({\n  title = \"Vehicle Condition\",\n  items,\n  className,\n  onMenuClick,\n}) => (\n  <div\n    className={mergeClassNames(\n      \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\",\n      className,\n    )}\n  >\n    {/* ── Header ─────────────────────────────────────────────────────────── */}\n    <div className=\"flex items-start justify-between px-5 pb-2 pt-5\">\n      <p className=\"text-base font-bold text-ds-1\">{title}</p>\n      <Button\n        variant=\"tertiary\"\n        size=\"small\"\n        className=\"shrink-0 p-0.5! text-ds-3\"\n        aria-label=\"More options\"\n        onClick={onMenuClick}\n      >\n        <EllipsisVerticalIcon width={18} height={18} />\n      </Button>\n    </div>\n\n    {/* ── Item list ──────────────────────────────────────────────────────── */}\n    <div className=\"divide-y divide-ds-border-3/50 px-5 pb-4\">\n      {items.map((item) => (\n        <div key={item.label} className=\"flex items-center gap-4 py-3\">\n          {/* Mini gauge */}\n          <div className=\"shrink-0\">\n            <MiniGauge percentage={item.percentage} color={item.color} />\n          </div>\n\n          {/* Label + sublabel */}\n          <div className=\"min-w-0 flex-1\">\n            <p\n              className=\"text-sm font-semibold leading-tight\"\n              style={{ color: item.color }}\n            >\n              {item.label}\n            </p>\n            <p className=\"mt-0.5 text-xs text-ds-3\">{item.sublabel}</p>\n          </div>\n\n          {/* Badge */}\n          <span className=\"shrink-0 rounded-md bg-ds-surface-2 px-2.5 py-1 text-xs font-semibold text-ds-2\">\n            {item.badge}\n          </span>\n        </div>\n      ))}\n    </div>\n  </div>\n);\n","\"use client\";\n\nimport type { FC, ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\n// ── Public types ──────────────────────────────────────────────────────────────\n\nexport interface VehiclesOverviewItem {\n  /** Column header label, e.g. \"On the way\". */\n  label: string;\n  /** Bold time value shown in the row, e.g. \"2hr 10min\". */\n  duration: string;\n  /** Width percentage for the stacked bar segment (0–100). */\n  percentage: number;\n  /** CSS color used for this segment and its icon badge. */\n  color: string;\n  /** Icon node rendered inside the colored badge circle. */\n  icon: ReactNode;\n}\n\nexport interface VehiclesOverviewCardProps {\n  title?: string;\n  items: VehiclesOverviewItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ── VehiclesOverviewCard ──────────────────────────────────────────────────────\n\nexport const VehiclesOverviewCard: FC<VehiclesOverviewCardProps> = ({\n  title = \"Vehicles Overview\",\n  items,\n  className,\n  onMenuClick,\n}) => {\n  const totalPct = items.reduce((sum, item) => sum + item.percentage, 0);\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\",\n        className,\n      )}\n    >\n      {/* ── Header ─────────────────────────────────────────────────────────── */}\n      <div className=\"flex items-start justify-between px-5 pb-2 pt-5\">\n        <p className=\"text-base font-bold text-ds-1\">{title}</p>\n        <Button\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"shrink-0 p-0.5! text-ds-3\"\n          aria-label=\"More options\"\n          onClick={onMenuClick}\n        >\n          <EllipsisVerticalIcon width={18} height={18} />\n        </Button>\n      </div>\n\n      {/* ── Column headers ─────────────────────────────────────────────────── */}\n      <div className=\"flex items-center px-5 pb-3\">\n        {items.map((item, i) => (\n          <div key={item.label} className=\"flex flex-1 items-center\">\n            {i > 0 && (\n              <div className=\"me-3 h-8 w-px shrink-0 bg-ds-border-3/60\" />\n            )}\n            <span className=\"text-xs font-medium text-ds-3\">{item.label}</span>\n          </div>\n        ))}\n      </div>\n\n      {/* ── Stacked bar ────────────────────────────────────────────────────── */}\n      <div className=\"mx-5 mb-5 flex h-3 overflow-hidden rounded-full\">\n        {items.map((item, i) => {\n          const widthPct =\n            totalPct > 0 ? (item.percentage / totalPct) * 100 : 0;\n          return (\n            <div\n              key={item.label}\n              style={{ width: `${widthPct}%`, backgroundColor: item.color }}\n              className={mergeClassNames(\n                \"h-full transition-all\",\n                i === 0 && \"rounded-s-full\",\n                i === items.length - 1 && \"rounded-e-full\",\n              )}\n              role=\"presentation\"\n              aria-label={`${item.label}: ${item.percentage}%`}\n            />\n          );\n        })}\n      </div>\n\n      {/* ── Item list ──────────────────────────────────────────────────────── */}\n      <div className=\"divide-y divide-ds-border-3/50 px-5 pb-4\">\n        {items.map((item) => (\n          <div key={item.label} className=\"flex items-center gap-3 py-3\">\n            {/* Icon badge */}\n            <div\n              className=\"flex size-9 shrink-0 items-center justify-center rounded-full\"\n              style={{ backgroundColor: `${item.color}1a` }}\n              aria-hidden=\"true\"\n            >\n              <span style={{ color: item.color }} className=\"flex items-center\">\n                {item.icon}\n              </span>\n            </div>\n\n            {/* Label */}\n            <span className=\"min-w-0 flex-1 text-sm font-medium text-ds-2\">\n              {item.label}\n            </span>\n\n            {/* Duration */}\n            <span className=\"text-sm font-bold text-ds-1\">{item.duration}</span>\n\n            {/* Percentage */}\n            <span className=\"w-12 text-end text-xs font-semibold text-ds-3\">\n              {item.percentage}%\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\n\n// ── Public types ──────────────────────────────────────────────────────────────\n\nexport interface StockItem {\n  id: string | number;\n  name: string;\n  qty: number;\n  onOrder?: () => void;\n}\n\nexport interface StockAvailabilityCardProps {\n  title?: string;\n  totalAsset?: string;\n  totalProduct?: number;\n  /** Percentages for each segment — should sum to 100. */\n  availability?: {\n    available: number;\n    lowStock: number;\n    outOfStock: number;\n  };\n  lowStockItems?: StockItem[];\n  onViewAll?: () => void;\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ── Colors ────────────────────────────────────────────────────────────────────\n\nconst AVAILABLE_COLOR = \"#0ABFBC\";\nconst LOW_STOCK_COLOR = \"#FFC107\";\nconst OUT_OF_STOCK_COLOR = \"#FF5B5C\";\n\n// ── StockAvailabilityCard ─────────────────────────────────────────────────────\n\nexport const StockAvailabilityCard: FC<StockAvailabilityCardProps> = ({\n  title = \"Stock Availability\",\n  totalAsset = \"$53,000\",\n  totalProduct = 442,\n  availability = { available: 62, lowStock: 28, outOfStock: 10 },\n  lowStockItems = [],\n  onViewAll,\n  className,\n  onMenuClick,\n}) => {\n  const { available, lowStock, outOfStock } = availability;\n  const total = available + lowStock + outOfStock || 100;\n\n  const segments = [\n    { label: \"Available\",    color: AVAILABLE_COLOR,    pct: available },\n    { label: \"Low Stock\",    color: LOW_STOCK_COLOR,    pct: lowStock },\n    { label: \"Out of stock\", color: OUT_OF_STOCK_COLOR, pct: outOfStock },\n  ];\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\",\n        className,\n      )}\n    >\n      {/* ── Header ─────────────────────────────────────────────────────────── */}\n      <div className=\"flex items-center justify-between px-5 pb-3 pt-5\">\n        <p className=\"text-base font-bold text-ds-1\">{title}</p>\n        <Button\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"shrink-0 p-0.5! text-ds-3\"\n          aria-label=\"More options\"\n          onClick={onMenuClick}\n        >\n          <EllipsisVerticalIcon width={18} height={18} />\n        </Button>\n      </div>\n\n      {/* ── Metrics row ────────────────────────────────────────────────────── */}\n      <div className=\"grid grid-cols-2 divide-x divide-ds-border-3/50 border-b border-ds-border-3/50 px-5 pb-5\">\n        <div className=\"pe-4\">\n          <p className=\"text-[10px] font-medium uppercase tracking-wide text-ds-3\">\n            Total Asset\n          </p>\n          <p className=\"mt-1 text-2xl font-bold text-ds-1\">{totalAsset}</p>\n        </div>\n        <div className=\"ps-4\">\n          <p className=\"text-[10px] font-medium uppercase tracking-wide text-ds-3\">\n            Total Product\n          </p>\n          <p className=\"mt-1 text-2xl font-bold text-ds-1\">\n            {totalProduct.toLocaleString()}\n          </p>\n        </div>\n      </div>\n\n      {/* ── Availability bar ───────────────────────────────────────────────── */}\n      <div className=\"px-5 py-4\">\n        <div className=\"flex h-2 w-full overflow-hidden rounded-full\">\n          {segments.map(({ label, color, pct }) => (\n            <div\n              key={label}\n              style={{ width: `${(pct / total) * 100}%`, backgroundColor: color }}\n              aria-hidden=\"true\"\n            />\n          ))}\n        </div>\n\n        {/* Legend */}\n        <div className=\"mt-3 flex flex-wrap gap-x-4 gap-y-1.5\">\n          {segments.map(({ label, color, pct }) => (\n            <div key={label} className=\"flex items-center gap-1.5\">\n              <span\n                className=\"h-2 w-2 shrink-0 rounded-full\"\n                style={{ backgroundColor: color }}\n                aria-hidden=\"true\"\n              />\n              <span className=\"text-xs text-ds-2\">{label}</span>\n              <span className=\"text-xs font-semibold text-ds-1\">{pct}%</span>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* ── Low stock list ─────────────────────────────────────────────────── */}\n      {lowStockItems.length > 0 && (\n        <div className=\"border-t border-ds-border-3/50\">\n          <div className=\"flex items-center justify-between px-5 py-3\">\n            <p className=\"text-xs font-bold uppercase tracking-wide text-ds-1\">\n              Low Stock\n            </p>\n            {onViewAll && (\n              <Button\n                variant=\"tertiary\"\n                size=\"small\"\n                onClick={onViewAll}\n                className=\"p-0! text-xs text-ds-accent hover:opacity-100\"\n              >\n                View all\n              </Button>\n            )}\n          </div>\n          <div className=\"pb-2\">\n            {lowStockItems.map((item) => (\n              <div\n                key={item.id}\n                className=\"flex items-center justify-between gap-2 px-5 py-2\"\n              >\n                <p className=\"truncate text-sm font-medium text-ds-1\">\n                  {item.name}\n                </p>\n                <div className=\"flex shrink-0 items-center gap-3\">\n                  <span className=\"text-xs text-ds-3\">Qty: {item.qty}</span>\n                  <Button\n                    variant=\"secondary\"\n                    size=\"small\"\n                    onClick={item.onOrder}\n                    className=\"h-7 rounded-md px-3 text-xs\"\n                  >\n                    Order\n                  </Button>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n","\"use client\";\n\nimport { useState, useRef, useEffect, type FC } from \"react\";\nimport { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from \"recharts\";\n\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport {\n  chartTooltipContentStyle,\n  chartTooltipItemStyle,\n  chartTooltipLabelStyle,\n  chartTooltipWrapperStyle,\n} from \"../charts/chartStyles\";\n\n// ── Public types ──────────────────────────────────────────────────────────────\n\nexport interface ExpenseItem {\n  label: string;\n  percentage: number;\n  color: string;\n}\n\nexport interface TopExpenseItem {\n  label: string;\n  value: string;\n  color: string;\n}\n\nexport interface ExpensesCardProps {\n  title?: string;\n  /** Center label of the donut, e.g. \"$132.34\". */\n  totalExpense?: string;\n  expenses?: ExpenseItem[];\n  topExpenses?: TopExpenseItem[];\n  periods?: string[];\n  defaultPeriod?: string;\n  /** Controlled selected period. */\n  selectedPeriod?: string;\n  onPeriodChange?: (p: string) => void;\n  className?: string;\n}\n\n// ── Internal ──────────────────────────────────────────────────────────────────\n\nconst DEFAULT_EXPENSES: ExpenseItem[] = [\n  { label: \"Internet\",     percentage: 45, color: \"#7367F0\" },\n  { label: \"Electricity\",  percentage: 26, color: \"#00CFE8\" },\n  { label: \"Transactions\", percentage: 22, color: \"#28C76F\" },\n  { label: \"Rental Cost\",  percentage:  8, color: \"#FF9F43\" },\n  { label: \"Foods\",        percentage:  3, color: \"#EA5455\" },\n  { label: \"Other\",        percentage:  2, color: \"#82868B\" },\n];\n\nconst DEFAULT_TOP: TopExpenseItem[] = [\n  { label: \"Internet\",     value: \"$59.46\", color: \"#7367F0\" },\n  { label: \"Electricity\",  value: \"$34.41\", color: \"#00CFE8\" },\n  { label: \"Transactions\", value: \"$29.12\", color: \"#28C76F\" },\n  { label: \"Rental Cost\",  value: \"$10.58\", color: \"#FF9F43\" },\n];\n\nconst ChevronDownIcon = () => (\n  <svg\n    width=\"13\"\n    height=\"13\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <polyline points=\"6 9 12 15 18 9\" />\n  </svg>\n);\n\n// ── ExpensesCard ──────────────────────────────────────────────────────────────\n\nexport const ExpensesCard: FC<ExpensesCardProps> = ({\n  title = \"Expenses\",\n  totalExpense = \"$132.34\",\n  expenses = DEFAULT_EXPENSES,\n  topExpenses = DEFAULT_TOP,\n  periods = [\"Last 6 months\", \"Last 3 months\", \"Last year\"],\n  defaultPeriod,\n  selectedPeriod: controlledPeriod,\n  onPeriodChange,\n  className,\n}) => {\n  const isControlled = controlledPeriod !== undefined;\n  const [internalPeriod, setInternalPeriod] = useState(\n    defaultPeriod ?? periods[0] ?? \"\",\n  );\n  const activePeriod = isControlled ? controlledPeriod : internalPeriod;\n\n  const [dropdownOpen, setDropdownOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    function handleClickOutside(e: MouseEvent) {\n      if (\n        dropdownRef.current &&\n        !dropdownRef.current.contains(e.target as Node)\n      ) {\n        setDropdownOpen(false);\n      }\n    }\n    if (dropdownOpen) document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, [dropdownOpen]);\n\n  const handlePeriodSelect = (p: string) => {\n    if (!isControlled) setInternalPeriod(p);\n    onPeriodChange?.(p);\n    setDropdownOpen(false);\n  };\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\",\n        className,\n      )}\n    >\n      {/* ── Header ─────────────────────────────────────────────────────────── */}\n      <div className=\"flex items-center justify-between px-5 pb-3 pt-5\">\n        <p className=\"text-base font-bold text-ds-1\">{title}</p>\n\n        <div ref={dropdownRef} className=\"relative shrink-0\">\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            onClick={() => setDropdownOpen((o) => !o)}\n            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\"\n            aria-haspopup=\"listbox\"\n            aria-expanded={dropdownOpen}\n          >\n            {activePeriod}\n            <span\n              className={mergeClassNames(\n                \"transition-transform duration-150\",\n                dropdownOpen ? \"rotate-180\" : \"\",\n              )}\n            >\n              <ChevronDownIcon />\n            </span>\n          </Button>\n\n          {dropdownOpen && (\n            <div\n              role=\"listbox\"\n              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\"\n            >\n              {periods.map((p) => (\n                <Button\n                  key={p}\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  role=\"option\"\n                  aria-selected={p === activePeriod}\n                  onClick={() => handlePeriodSelect(p)}\n                  className={mergeClassNames(\n                    \"w-full justify-start rounded-none px-3 py-1.5 text-start text-sm hover:bg-ds-surface-2 hover:opacity-100\",\n                    p === activePeriod ? \"font-semibold text-ds-accent\" : \"text-ds-2\",\n                  )}\n                >\n                  {p}\n                </Button>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* ── Donut chart + legend ────────────────────────────────────────────── */}\n      <div className=\"flex items-center gap-4 px-5 pb-5\">\n        {/* Donut */}\n        <div className=\"relative shrink-0\" style={{ width: 160, height: 160 }}>\n          <ResponsiveContainer width=\"100%\" height=\"100%\">\n            <PieChart>\n              <Pie\n                data={expenses}\n                cx=\"50%\"\n                cy=\"50%\"\n                innerRadius={52}\n                outerRadius={72}\n                dataKey=\"percentage\"\n                paddingAngle={2}\n                startAngle={90}\n                endAngle={-270}\n              >\n                {expenses.map((entry, i) => (\n                  <Cell key={i} fill={entry.color} />\n                ))}\n              </Pie>\n              <Tooltip\n                contentStyle={chartTooltipContentStyle}\n                itemStyle={chartTooltipItemStyle}\n                labelStyle={chartTooltipLabelStyle}\n                wrapperStyle={chartTooltipWrapperStyle}\n                formatter={(v, _name, props) => [\n                  `${v}%`,\n                  (props.payload as ExpenseItem).label,\n                ]}\n              />\n            </PieChart>\n          </ResponsiveContainer>\n          {/* Center label */}\n          <div className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center\">\n            <span className=\"text-[10px] leading-none text-ds-3\">\n              Total Expense\n            </span>\n            <span className=\"mt-1 text-base font-bold leading-none text-ds-1\">\n              {totalExpense}\n            </span>\n          </div>\n        </div>\n\n        {/* Legend */}\n        <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n          {expenses.map((e) => (\n            <div key={e.label} className=\"flex items-center gap-2\">\n              <span\n                className=\"h-2.5 w-2.5 shrink-0 rounded-full\"\n                style={{ backgroundColor: e.color }}\n                aria-hidden=\"true\"\n              />\n              <span className=\"flex-1 truncate text-xs text-ds-2\">\n                {e.label}\n              </span>\n              <span className=\"text-xs font-semibold text-ds-1\">\n                {e.percentage}%\n              </span>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* ── Top Expense grid ────────────────────────────────────────────────── */}\n      {topExpenses.length > 0 && (\n        <div className=\"border-t border-ds-border-3/50 px-5 pb-5 pt-4\">\n          <p className=\"mb-3 text-[10px] font-bold uppercase tracking-wide text-ds-3\">\n            Top Expense\n          </p>\n          <div className=\"grid grid-cols-2 gap-3\">\n            {topExpenses.map((item) => (\n              <div key={item.label} className=\"flex items-start gap-2\">\n                <span\n                  className=\"mt-0.5 h-2.5 w-2.5 shrink-0 rounded-full\"\n                  style={{ backgroundColor: item.color }}\n                  aria-hidden=\"true\"\n                />\n                <div className=\"min-w-0\">\n                  <p className=\"truncate text-xs text-ds-3\">{item.label}</p>\n                  <p className=\"text-sm font-bold text-ds-1\">{item.value}</p>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n","\"use client\";\n\nimport { useState, useRef, useEffect, type FC } from \"react\";\nimport {\n  BarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n  Cell,\n} from \"recharts\";\n\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport {\n  chartTooltipContentStyle,\n  chartTooltipItemStyle,\n  chartTooltipLabelStyle,\n  chartTooltipWrapperStyle,\n} from \"../charts/chartStyles\";\n\n// ── Public types ──────────────────────────────────────────────────────────────\n\nexport interface IncomeExpenseDataPoint {\n  month: string;\n  income: number;\n  expense: number;\n  /** When true, bars render at full saturation; others render at 60% opacity. */\n  highlighted?: boolean;\n}\n\nexport interface IncomeExpenseBadge {\n  value: string;\n  direction: \"up\" | \"down\";\n}\n\nexport interface IncomeExpenseCardProps {\n  title?: string;\n  totalIncome?: string;\n  incomeBadge?: IncomeExpenseBadge;\n  totalExpenses?: string;\n  expensesBadge?: IncomeExpenseBadge;\n  data?: IncomeExpenseDataPoint[];\n  incomeColor?: string;\n  expenseColor?: string;\n  periods?: string[];\n  defaultPeriod?: string;\n  /** Controlled selected period. */\n  selectedPeriod?: string;\n  onPeriodChange?: (p: string) => void;\n  className?: string;\n}\n\n// ── Internal ──────────────────────────────────────────────────────────────────\n\nconst DEFAULT_DATA: IncomeExpenseDataPoint[] = [\n  { month: \"JAN\", income: 800,  expense: 400 },\n  { month: \"FEB\", income: 1000, expense: 500 },\n  { month: \"MAR\", income: 1412, expense: 612, highlighted: true },\n  { month: \"APR\", income: 900,  expense: 450 },\n  { month: \"MAY\", income: 1100, expense: 520 },\n  { month: \"JUN\", income: 950,  expense: 480 },\n];\n\nconst ChevronDownIcon = () => (\n  <svg\n    width=\"13\"\n    height=\"13\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <polyline points=\"6 9 12 15 18 9\" />\n  </svg>\n);\n\nconst TrendLabel: FC<IncomeExpenseBadge> = ({ value, direction }) => (\n  <span\n    className=\"text-xs font-semibold\"\n    style={{\n      color:\n        direction === \"up\"\n          ? \"var(--ds-color-success)\"\n          : \"var(--ds-color-danger)\",\n    }}\n  >\n    {direction === \"up\" ? \"▲\" : \"▼\"} {value}\n  </span>\n);\n\n// ── IncomeExpenseCard ─────────────────────────────────────────────────────────\n\nexport const IncomeExpenseCard: FC<IncomeExpenseCardProps> = ({\n  title = \"Income & Expense\",\n  totalIncome = \"$1,412\",\n  incomeBadge = { value: \"4.51%\", direction: \"up\" },\n  totalExpenses = \"$612.34\",\n  expensesBadge = { value: \"2.41%\", direction: \"down\" },\n  data = DEFAULT_DATA,\n  incomeColor = \"#28C76F\",\n  expenseColor = \"#FFC107\",\n  periods = [\"Last 6 months\", \"Last 3 months\", \"Last year\"],\n  defaultPeriod,\n  selectedPeriod: controlledPeriod,\n  onPeriodChange,\n  className,\n}) => {\n  const isControlled = controlledPeriod !== undefined;\n  const [internalPeriod, setInternalPeriod] = useState(\n    defaultPeriod ?? periods[0] ?? \"\",\n  );\n  const activePeriod = isControlled ? controlledPeriod : internalPeriod;\n\n  const [dropdownOpen, setDropdownOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    function handleClickOutside(e: MouseEvent) {\n      if (\n        dropdownRef.current &&\n        !dropdownRef.current.contains(e.target as Node)\n      ) {\n        setDropdownOpen(false);\n      }\n    }\n    if (dropdownOpen) document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, [dropdownOpen]);\n\n  const handlePeriodSelect = (p: string) => {\n    if (!isControlled) setInternalPeriod(p);\n    onPeriodChange?.(p);\n    setDropdownOpen(false);\n  };\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\",\n        className,\n      )}\n    >\n      {/* ── Header ─────────────────────────────────────────────────────────── */}\n      <div className=\"flex items-center justify-between px-5 pb-3 pt-5\">\n        <p className=\"text-base font-bold text-ds-1\">{title}</p>\n\n        <div ref={dropdownRef} className=\"relative shrink-0\">\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            onClick={() => setDropdownOpen((o) => !o)}\n            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\"\n            aria-haspopup=\"listbox\"\n            aria-expanded={dropdownOpen}\n          >\n            {activePeriod}\n            <span\n              className={mergeClassNames(\n                \"transition-transform duration-150\",\n                dropdownOpen ? \"rotate-180\" : \"\",\n              )}\n            >\n              <ChevronDownIcon />\n            </span>\n          </Button>\n\n          {dropdownOpen && (\n            <div\n              role=\"listbox\"\n              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\"\n            >\n              {periods.map((p) => (\n                <Button\n                  key={p}\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  role=\"option\"\n                  aria-selected={p === activePeriod}\n                  onClick={() => handlePeriodSelect(p)}\n                  className={mergeClassNames(\n                    \"w-full justify-start rounded-none px-3 py-1.5 text-start text-sm hover:bg-ds-surface-2 hover:opacity-100\",\n                    p === activePeriod ? \"font-semibold text-ds-accent\" : \"text-ds-2\",\n                  )}\n                >\n                  {p}\n                </Button>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* ── Metric headers ─────────────────────────────────────────────────── */}\n      <div className=\"grid grid-cols-2 gap-4 px-5 pb-4\">\n        <div>\n          <p className=\"text-[10px] font-medium uppercase tracking-wide text-ds-3\">\n            Total Income\n          </p>\n          <div className=\"mt-1 flex items-baseline gap-2\">\n            <span className=\"text-2xl font-bold text-ds-1\">{totalIncome}</span>\n            {incomeBadge && (\n              <TrendLabel\n                value={incomeBadge.value}\n                direction={incomeBadge.direction}\n              />\n            )}\n          </div>\n        </div>\n        <div>\n          <p className=\"text-[10px] font-medium uppercase tracking-wide text-ds-3\">\n            Total Expenses\n          </p>\n          <div className=\"mt-1 flex items-baseline gap-2\">\n            <span className=\"text-2xl font-bold text-ds-1\">{totalExpenses}</span>\n            {expensesBadge && (\n              <TrendLabel\n                value={expensesBadge.value}\n                direction={expensesBadge.direction}\n              />\n            )}\n          </div>\n        </div>\n      </div>\n\n      {/* ── Bar chart ──────────────────────────────────────────────────────── */}\n      <div style={{ height: 200 }} className=\"px-2\">\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <BarChart\n            data={data}\n            barSize={12}\n            barCategoryGap=\"30%\"\n            barGap={4}\n            margin={{ top: 8, right: 8, left: 0, bottom: 0 }}\n          >\n            <CartesianGrid\n              strokeDasharray=\"3 3\"\n              vertical={false}\n              stroke=\"var(--ds-color-border)\"\n              opacity={0.5}\n            />\n            <XAxis\n              dataKey=\"month\"\n              axisLine={false}\n              tickLine={false}\n              tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 11 }}\n              dy={8}\n            />\n            <YAxis\n              axisLine={false}\n              tickLine={false}\n              tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 10 }}\n              dx={-4}\n            />\n            <Tooltip\n              contentStyle={chartTooltipContentStyle}\n              itemStyle={chartTooltipItemStyle}\n              labelStyle={chartTooltipLabelStyle}\n              wrapperStyle={chartTooltipWrapperStyle}\n              cursor={{ fill: \"rgba(0,0,0,0.04)\" }}\n            />\n            <Bar dataKey=\"income\" name=\"Income\" radius={[4, 4, 0, 0]}>\n              {data.map((entry, i) => (\n                <Cell\n                  key={i}\n                  fill={entry.highlighted ? incomeColor : incomeColor + \"80\"}\n                />\n              ))}\n            </Bar>\n            <Bar dataKey=\"expense\" name=\"Expense\" radius={[4, 4, 0, 0]}>\n              {data.map((entry, i) => (\n                <Cell\n                  key={i}\n                  fill={entry.highlighted ? expenseColor : expenseColor + \"80\"}\n                />\n              ))}\n            </Bar>\n          </BarChart>\n        </ResponsiveContainer>\n      </div>\n\n      {/* ── Legend ─────────────────────────────────────────────────────────── */}\n      <div className=\"flex items-center justify-center gap-6 py-4\">\n        <div className=\"flex items-center gap-2\">\n          <span\n            className=\"h-2.5 w-2.5 shrink-0 rounded-full\"\n            style={{ backgroundColor: incomeColor }}\n            aria-hidden=\"true\"\n          />\n          <span className=\"text-sm text-ds-2\">Income</span>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <span\n            className=\"h-2.5 w-2.5 shrink-0 rounded-full\"\n            style={{ backgroundColor: expenseColor }}\n            aria-hidden=\"true\"\n          />\n          <span className=\"text-sm text-ds-2\">Expense</span>\n        </div>\n      </div>\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC } from \"react\";\nimport {\n  BarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  Tooltip,\n  ResponsiveContainer,\n} from \"recharts\";\n\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport {\n  chartTooltipContentStyle,\n  chartTooltipItemStyle,\n  chartTooltipLabelStyle,\n  chartTooltipWrapperStyle,\n} from \"../charts/chartStyles\";\n\n// ── Public types ──────────────────────────────────────────────────────────────\n\nexport interface DeviceSalesChannel {\n  key: string;\n  label: string;\n  /** Number shown as headline metric. */\n  sales: number;\n  color: string;\n}\n\nexport interface DeviceSalesBrandRow {\n  name: string;\n  retail: number;\n  website: number;\n  thirdParty: number;\n}\n\nexport interface DeviceSalesCardProps {\n  title?: string;\n  channels?: DeviceSalesChannel[];\n  brands?: DeviceSalesBrandRow[];\n  className?: string;\n  onExpand?: () => void;\n  onEdit?: () => void;\n  onMoreClick?: () => void;\n}\n\n// ── Default data ──────────────────────────────────────────────────────────────\n\nconst DEFAULT_CHANNELS: DeviceSalesChannel[] = [\n  { key: \"retail\",     label: \"Retail\",       sales: 310,   color: \"#4361EE\" },\n  { key: \"website\",    label: \"Website\",      sales: 1420,  color: \"#00CFE8\" },\n  { key: \"thirdParty\", label: \"Third Party\",  sales: 1920,  color: \"#FF9F43\" },\n];\n\nconst DEFAULT_BRANDS: DeviceSalesBrandRow[] = [\n  { name: \"Apple\",  retail: 35000, website: 40000, thirdParty: 45000 },\n  { name: \"Lenovo\", retail: 20000, website: 35000, thirdParty: 30000 },\n  { name: \"Asus\",   retail: 15000, website: 25000, thirdParty: 20000 },\n];\n\n// ── Icons ─────────────────────────────────────────────────────────────────────\n\nconst InfoIcon = () => (\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <circle cx=\"12\" cy=\"12\" r=\"10\" />\n    <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\" />\n    <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\" />\n  </svg>\n);\n\nconst ExpandIcon = () => (\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <polyline points=\"15 3 21 3 21 9\" />\n    <polyline points=\"9 21 3 21 3 15\" />\n    <line x1=\"21\" y1=\"3\" x2=\"14\" y2=\"10\" />\n    <line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\" />\n  </svg>\n);\n\nconst EditIcon = () => (\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" />\n    <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" />\n  </svg>\n);\n\nconst EllipsisHIcon = () => (\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <circle cx=\"12\" cy=\"12\" r=\"1\" />\n    <circle cx=\"19\" cy=\"12\" r=\"1\" />\n    <circle cx=\"5\" cy=\"12\" r=\"1\" />\n  </svg>\n);\n\n// ── DeviceSalesCard ───────────────────────────────────────────────────────────\n\nconst xTickFormatter = (v: number) =>\n  v === 0 ? \"0\" : `${Math.round(v / 1000)}K`;\n\nexport const DeviceSalesCard: FC<DeviceSalesCardProps> = ({\n  title = \"Device Sales\",\n  channels = DEFAULT_CHANNELS,\n  brands = DEFAULT_BRANDS,\n  className,\n  onExpand,\n  onEdit,\n  onMoreClick,\n}) => {\n  const channelMap = Object.fromEntries(channels.map((c) => [c.key, c]));\n  const maxValue =\n    Math.ceil(\n      brands.reduce(\n        (max, b) =>\n          Math.max(max, b.retail + b.website + b.thirdParty),\n        0,\n      ) / 20000,\n    ) * 20000;\n\n  const xDomain: [number, number] = [0, Math.max(maxValue, 100000)];\n  const xTicks = Array.from(\n    { length: Math.floor(xDomain[1] / 20000) + 1 },\n    (_, i) => i * 20000,\n  );\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\",\n        className,\n      )}\n    >\n      {/* ── Header ─────────────────────────────────────────────────────────── */}\n      <div className=\"flex items-center justify-between px-5 pb-3 pt-5\">\n        <div className=\"flex items-center gap-2\">\n          <p className=\"text-base font-bold text-ds-1\">{title}</p>\n          <span className=\"text-ds-3\" aria-hidden=\"true\">\n            <InfoIcon />\n          </span>\n        </div>\n        <div className=\"flex items-center gap-0.5\">\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            className=\"p-1! text-ds-3\"\n            aria-label=\"Expand\"\n            onClick={onExpand}\n          >\n            <ExpandIcon />\n          </Button>\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            className=\"p-1! text-ds-3\"\n            aria-label=\"Edit\"\n            onClick={onEdit}\n          >\n            <EditIcon />\n          </Button>\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            className=\"p-1! text-ds-3\"\n            aria-label=\"More options\"\n            onClick={onMoreClick}\n          >\n            <EllipsisHIcon />\n          </Button>\n        </div>\n      </div>\n\n      {/* ── Channel metrics ────────────────────────────────────────────────── */}\n      <div className=\"grid grid-cols-3 divide-x divide-ds-border-3/50 border-b border-ds-border-3/50 pb-4\">\n        {channels.map((channel) => (\n          <div\n            key={channel.key}\n            className=\"flex flex-col items-center gap-1 px-3 pt-1\"\n          >\n            <div\n              className=\"mb-1 h-1 w-8 rounded-full\"\n              style={{ backgroundColor: channel.color }}\n              aria-hidden=\"true\"\n            />\n            <p className=\"text-lg font-bold text-ds-1\">\n              {channel.sales.toLocaleString()}\n            </p>\n            <p className=\"text-center text-[11px] leading-tight text-ds-3\">\n              {channel.label} Sales\n            </p>\n          </div>\n        ))}\n      </div>\n\n      {/* ── Horizontal stacked bar chart ───────────────────────────────────── */}\n      <div style={{ height: brands.length * 64 + 56 }} className=\"px-2 pt-4\">\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <BarChart\n            data={brands}\n            layout=\"vertical\"\n            barSize={18}\n            barCategoryGap=\"35%\"\n            margin={{ top: 4, right: 12, left: 0, bottom: 4 }}\n          >\n            <XAxis\n              type=\"number\"\n              domain={xDomain}\n              ticks={xTicks}\n              axisLine={false}\n              tickLine={false}\n              tickFormatter={xTickFormatter}\n              tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 10 }}\n            />\n            <YAxis\n              type=\"category\"\n              dataKey=\"name\"\n              axisLine={false}\n              tickLine={false}\n              tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 12 }}\n              width={52}\n            />\n            <Tooltip\n              contentStyle={chartTooltipContentStyle}\n              itemStyle={chartTooltipItemStyle}\n              labelStyle={chartTooltipLabelStyle}\n              wrapperStyle={chartTooltipWrapperStyle}\n              cursor={{ fill: \"rgba(0,0,0,0.04)\" }}\n              formatter={(v, name) => [\n                Number(v).toLocaleString(),\n                channelMap[name as string]?.label ?? String(name),\n              ]}\n            />\n            <Bar\n              dataKey=\"retail\"\n              stackId=\"stack\"\n              fill={channelMap.retail?.color ?? \"#4361EE\"}\n              radius={[2, 0, 0, 2]}\n            />\n            <Bar\n              dataKey=\"website\"\n              stackId=\"stack\"\n              fill={channelMap.website?.color ?? \"#00CFE8\"}\n            />\n            <Bar\n              dataKey=\"thirdParty\"\n              stackId=\"stack\"\n              fill={channelMap.thirdParty?.color ?? \"#FF9F43\"}\n              radius={[0, 2, 2, 0]}\n            />\n          </BarChart>\n        </ResponsiveContainer>\n      </div>\n\n      {/* ── Legend ─────────────────────────────────────────────────────────── */}\n      <div className=\"flex flex-wrap items-center justify-center gap-4 px-5 pb-4 pt-1\">\n        {channels.map((channel) => (\n          <div key={channel.key} className=\"flex items-center gap-2\">\n            <span\n              className=\"h-2.5 w-2.5 shrink-0 rounded-full\"\n              style={{ backgroundColor: channel.color }}\n              aria-hidden=\"true\"\n            />\n            <span className=\"text-xs text-ds-2\">{channel.label}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/chunks/{data-table-fAEuevPn.cjs → data-table-BZEiSZI2.cjs}

@@ -1,17 +1,18 @@
 const require_chunk = require("./chunk-B_GkZjkl.cjs");
 const require_utils = require("./utils-LRbEQHYs.cjs");
-const require_icons = require("./icons-CRanVZB1.cjs");
-const require_button = require("./button-C4MXPxsC.cjs");
-const require_DropdownMenu = require("./DropdownMenu-BDrNYO-D.cjs");
-const require_select = require("./select-bZ9WqLOc.cjs");
-const require_checkbox = require("./checkbox-D8ivRZ1x.cjs");
-const require_chip = require("./chip-B0YzBwkz.cjs");
-const require_combobox = require("./combobox-CtNrGmuR.cjs");
-const require_input = require("./input-DkCPyWXi.cjs");
-const require_Tooltip = require("./Tooltip-DD30yj3A.cjs");
-const require_multi_select_combobox = require("./multi-select-combobox-C0DoDzxQ.cjs");
-const require_switch = require("./switch-X3l8xnle.cjs");
-const require_date_picker = require("./date-picker-qpUZMtZC.cjs");
+const require_icons = require("./icons-ub9iu-JG.cjs");
+const require_EllipsisVerticalIcon = require("./EllipsisVerticalIcon-BJw3MNkg.cjs");
+const require_button = require("./button-uD87K76W.cjs");
+const require_DropdownMenu = require("./DropdownMenu-yh04burS.cjs");
+const require_select = require("./select-zFFyNmlY.cjs");
+const require_Tooltip = require("./Tooltip-nnaiqJTT.cjs");
+const require_checkbox = require("./checkbox-CDknzh89.cjs");
+const require_input = require("./input-DMTwz27q.cjs");
+const require_switch = require("./switch-BbFl5b4t.cjs");
+const require_chip = require("./chip-sfQlzrbo.cjs");
+const require_combobox = require("./combobox-C3a2iogC.cjs");
+const require_multi_select_combobox = require("./multi-select-combobox-CFJGq1hn.cjs");
+const require_date_picker = require("./date-picker-_EVYpGga.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -207,28 +208,32 @@ var FilterButton = ({ icon, label, onClick, hasActive }) => /* @__PURE__ */ (0,
 	children: icon
 });
 var ColumnToggle = ({ columns, onToggle, onShowAll, onHideAll, labels }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-	className: "p-4 space-y-3",
+	className: "flex flex-col",
+	style: { maxHeight: "min(400px, 80dvh)" },
 	children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex items-center justify-between mb-3",
+			className: "flex shrink-0 items-center px-4 pb-2 pt-4",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "text-sm font-semibold text-ds-1",
 				children: labels.columns
 			})
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "space-y-2 max-h-64 overflow-y-auto",
-			children: columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "rounded-md px-2 py-1 hover:bg-ds-surface-2",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox.Checkbox, {
-					checked: col.visible !== false,
-					onChange: () => onToggle(col.id),
-					label: col.label
-				})
-			}, col.id))
+			className: "min-h-0 flex-1 overflow-y-auto px-3 pb-1",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "space-y-0.5",
+				children: columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "rounded-md px-2 py-1 hover:bg-ds-surface-2",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox.Checkbox, {
+						checked: col.visible !== false,
+						onChange: () => onToggle(col.id),
+						label: col.label
+					})
+				}, col.id))
+			})
 		}),
 		(onShowAll || onHideAll) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex gap-2 border-t border-ds-border-2 pt-2",
+			className: "flex shrink-0 gap-2 border-t border-ds-border-2 px-4 py-3",
 			children: [onShowAll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 				onClick: onShowAll,
 				size: "small",
@@ -901,7 +906,7 @@ function RowActionsCell({ rowIndex, row, isOpen, openDirection, tableContainerRe
 					},
 					"aria-label": "Open row actions",
 					className: require_utils.mergeClassNames("h-full w-12 rounded-none border-none px-0 py-0 shadow-none hover:opacity-100 ", isOpen ? "bg-ds-surface-2 text-ds-1" : "bg-ds-surface-2 text-ds-2 hover:bg-ds-surface-3 hover:text-ds-1"),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.EllipsisVerticalIcon, {
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EllipsisVerticalIcon.EllipsisVerticalIcon, {
 						className: TABLE_CONTROL_ICON_CLASS_NAME,
 						"aria-hidden": "true"
 					})
@@ -1017,25 +1022,32 @@ function DataTablePagination({ table, totalCount, filteredCount, direction }) {
 function FilterSelectorMenu({ direction, filterOptions, visibleFilters, onToggleFilter, onShowAll, onHideAll, labels, footerActions }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		dir: direction,
-		className: require_utils.mergeClassNames("p-4 min-h-58 min-w-48 space-y-3", direction === "rtl" ? "text-right" : "text-left"),
+		className: require_utils.mergeClassNames("flex min-w-48 flex-col", direction === "rtl" ? "text-right" : "text-left"),
+		style: { maxHeight: "min(400px, 80dvh)" },
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mb-3 flex items-center justify-between",
+				className: "flex shrink-0 items-center px-4 pb-2 pt-4",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "text-sm font-semibold text-ds-1",
 					children: labels.showFilters
 				})
 			}),
-			filterOptions.map((filter) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "min-w-36 rounded-md px-2 py-1 hover:bg-ds-surface-2",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox.Checkbox, {
-					checked: visibleFilters.includes(filter.id),
-					onChange: (event) => onToggleFilter(filter.id, event.target.checked),
-					label: filter.label
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "min-h-0 flex-1 overflow-y-auto px-3 pb-1",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "space-y-0.5",
+					children: filterOptions.map((filter) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "min-w-36 rounded-md px-2 py-1 hover:bg-ds-surface-2",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox.Checkbox, {
+							checked: visibleFilters.includes(filter.id),
+							onChange: (event) => onToggleFilter(filter.id, event.target.checked),
+							label: filter.label
+						})
+					}, filter.id))
 				})
-			}, filter.id)),
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_utils.mergeClassNames("flex gap-2 border-t border-ds-border-2 pt-2", direction === "rtl" && "flex-row-reverse"),
+				className: require_utils.mergeClassNames("flex shrink-0 gap-2 border-t border-ds-border-2 px-4 py-3", direction === "rtl" && "flex-row-reverse"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 						onClick: onShowAll,
@@ -1615,4 +1627,4 @@ Object.defineProperty(exports, "ToolbarIconButton", {
 	}
 });
 
-//# sourceMappingURL=data-table-fAEuevPn.cjs.map
+//# sourceMappingURL=data-table-BZEiSZI2.cjs.map