erp-pro-ui 0.2.6 → 0.2.7

package/dist/chunks/dashboard-cards-lnifLEyj.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-cards-lnifLEyj.mjs","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/_TabTooltip.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","../../src/components/data-display/dashboard-cards/PaymentSummaryCard.tsx","../../src/components/data-display/dashboard-cards/BarBreakdownCard.tsx","../../src/components/data-display/dashboard-cards/TopSellingItemsCard.tsx","../../src/components/data-display/dashboard-cards/SalesHeatmapCard.tsx","../../src/components/data-display/dashboard-cards/_PLCharts.tsx","../../src/components/data-display/dashboard-cards/_PLCardHeader.tsx","../../src/components/data-display/dashboard-cards/_PLKpiStrip.tsx","../../src/components/data-display/dashboard-cards/_PLOverview.tsx","../../src/components/data-display/dashboard-cards/FinancialPLCard.tsx","../../src/components/data-display/dashboard-cards/InventoryCards.tsx","../../src/components/data-display/dashboard-cards/SubscriptionHealthCard.tsx","../../src/components/data-display/dashboard-cards/ToolUsageOverviewCard.tsx","../../src/components/data-display/dashboard-cards/AcquisitionChannelCard.tsx","../../src/components/data-display/dashboard-cards/CustomerLifecycleCard.tsx","../../src/components/data-display/dashboard-cards/SeatUtilizationCard.tsx","../../src/components/data-display/dashboard-cards/TopToolsCard.tsx","../../src/components/data-display/dashboard-cards/TopPlansCard.tsx","../../src/components/data-display/dashboard-cards/AIInsightsCard.tsx","../../src/components/data-display/dashboard-cards/AIFeatureAdoptionCard.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 gap-3\">\n            {metricBlock}\n            {chart && (\n              <div className={mergeClassNames(\"relative flex-1 min-w-0 h-[46px]\", 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","import { useRef, useState, type FC, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ninterface TabTooltipProps {\n  content: string;\n  children: ReactNode;\n}\n\nexport const TabTooltip: FC<TabTooltipProps> = ({ content, children }) => {\n  const [anchor, setAnchor] = useState<{ top: number; left: number } | null>(\n    null,\n  );\n  const ref = useRef<HTMLDivElement>(null);\n\n  const show = () => {\n    const r = ref.current?.getBoundingClientRect();\n    if (r) setAnchor({ top: r.top - 8, left: r.left + r.width / 2 });\n  };\n  const hide = () => setAnchor(null);\n\n  return (\n    <div\n      ref={ref}\n      onMouseEnter={show}\n      onMouseLeave={hide}\n      onFocus={show}\n      onBlur={hide}\n    >\n      {children}\n      {anchor !== null && typeof document !== \"undefined\"\n        ? createPortal(\n            <span\n              role=\"tooltip\"\n              className=\"pointer-events-none fixed z-[9999] -translate-x-1/2 -translate-y-full whitespace-nowrap rounded-md border border-ds-border-2 bg-ds-surface-2 px-2.5 py-1.5 text-[11px] leading-tight text-ds-1 shadow-md\"\n              style={{ top: anchor.top, left: anchor.left }}\n            >\n              {content}\n            </span>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n};\n","\"use client\";\n\nimport { useMemo, 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 { DatePicker } from \"../../forms/date-picker\";\nimport { Button } from \"../../forms/button\";\nimport { Select } from \"../../forms/select\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\nimport { mergeClassNames } from \"../../../utils\";\nimport {\n  chartTooltipContentStyle,\n  chartTooltipItemStyle,\n  chartTooltipLabelStyle,\n  chartTooltipWrapperStyle,\n} from \"../charts/chartStyles\";\nimport { TabTooltip } from \"./_TabTooltip\";\n\nimport type { DateRangeValue } from \"../../forms/date-picker/types\";\n\n// ── Public types ──────────────────────────────────────────────────────────────\n\nexport type PeriodFilterValue =\n  | \"today\"\n  | \"yesterday\"\n  | \"this-week\"\n  | \"this-month\"\n  | \"this-year\"\n  | \"custom\";\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 EarningTabSummary {\n  /** Pre-formatted headline value, e.g. \"$2.47M\", \"29.1k units\", \"33.5%\". */\n  value: string;\n  /**\n   * Manual % change shown when comparison is off.\n   * Auto-overridden by sum/avg ratio when comparison is active.\n   */\n  change?: number;\n  /** Small label after the change badge, e.g. \"vs last year\". */\n  changeLabel?: string;\n}\n\nexport interface EarningTab {\n  id: string;\n  icon: ReactNode;\n  label: string;\n  /** Shown in a tooltip when hovering the tab button. */\n  description?: string;\n  /** Fallback data (also used for \"custom\" period and when no period filter). */\n  chartData: EarningTabBarPoint[];\n  /**\n   * Period-specific data. When a non-custom period is active and data is\n   * provided here, it overrides chartData in the chart.\n   */\n  chartDataByPeriod?: Partial<\n    Record<Exclude<PeriodFilterValue, \"custom\">, EarningTabBarPoint[]>\n  >;\n  /** Comparison fallback data — used when no matching comparisonChartDataByPeriod entry. */\n  comparisonChartData?: EarningTabBarPoint[];\n  /** Period-specific comparison data. Mirrors chartDataByPeriod for the comparison series. */\n  comparisonChartDataByPeriod?: Partial<\n    Record<Exclude<PeriodFilterValue, \"custom\">, EarningTabBarPoint[]>\n  >;\n  /** Headline metric shown in the card header when this tab is active. */\n  summary?: EarningTabSummary;\n  /** Period-specific headline metric — overrides summary when period matches. */\n  summaryByPeriod?: Partial<\n    Record<Exclude<PeriodFilterValue, \"custom\">, EarningTabSummary>\n  >;\n  /**\n   * How the summary % change is auto-computed when comparison mode is on.\n   * - \"sum\" (default): Σprimary / Σcomparison − 1 — correct for Qty, Revenue, Expenses\n   * - \"avg\": avgPrimary / avgComparison − 1 — correct for rates, margins, %\n   * - \"none\": always use EarningTabSummary.change, never auto-compute\n   */\n  summaryAggregation?: \"sum\" | \"avg\" | \"none\";\n  /**\n   * Whether this tab appears in the Overview grouped bar chart.\n   * @default true — set to false to exclude (e.g. Margin % alongside $ values)\n   */\n  includeInOverview?: boolean;\n  /** Custom CSS color for this tab's bar in overview chart. Falls back to palette. */\n  overviewColor?: string;\n  /** Per-tab Y-axis tick formatter. Falls back to card-level yAxisFormatter. */\n  yAxisFormatter?: (value: number) => string;\n  /** Per-tab bar label formatter. Falls back to tab yAxisFormatter then card-level. */\n  barLabelFormatter?: (value: number) => string;\n}\n\n/**\n * All hardcoded strings in the card. Pass this prop to override for i18n or\n * custom terminology — every label, aria-label, and placeholder is covered.\n */\nexport interface EarningReportsTabsCardLabels {\n  /** @default \"More options\" */\n  moreOptionsAriaLabel?: string;\n  /** @default \"Add category\" */\n  addTabAriaLabel?: string;\n  /** @default \"Filter by period\" */\n  periodFilterAriaLabel?: string;\n  /** @default \"Pick a date range\" */\n  dateRangePlaceholder?: string;\n  /** Override individual period option labels in the select dropdown. */\n  periodOptions?: Partial<Record<PeriodFilterValue, string>>;\n  /** @default \"Compare to\" */\n  compareToLabel?: string;\n  /** @default \"Comparison period\" */\n  comparisonFilterAriaLabel?: string;\n  /** @default \"Pick comparison range\" */\n  comparisonDateRangePlaceholder?: string;\n  /** Tooltip series name suffix for comparison bar. @default \"prev.\" */\n  comparisonSeriesLabel?: string;\n  /** @default \"Compare\" */\n  compareButtonLabel?: string;\n  /** @default \"Overview\" */\n  overviewButtonLabel?: string;\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  /** Card-level Y-axis tick formatter. Defaults to \"28k\" style. */\n  yAxisFormatter?: (value: number) => string;\n  /** Card-level bar label formatter. 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  /** Show period filter select aligned to the right of the tab row. */\n  showPeriodFilter?: boolean;\n  /** Controlled: currently selected period filter value. */\n  periodFilter?: PeriodFilterValue;\n  /** Default period for uncontrolled usage. Defaults to \"this-month\". */\n  defaultPeriodFilter?: PeriodFilterValue;\n  onPeriodFilterChange?: (value: PeriodFilterValue) => void;\n  /** Controlled custom date range — active when period is \"custom\". */\n  customDateRange?: DateRangeValue;\n  onCustomDateRangeChange?: (range: DateRangeValue) => void;\n  /** Show comparison period selector and render dual grouped bars. */\n  showComparison?: boolean;\n  /** Controlled: currently selected comparison period. */\n  comparisonPeriod?: PeriodFilterValue;\n  /** Default comparison period for uncontrolled usage. Defaults to \"this-year\". */\n  defaultComparisonPeriod?: PeriodFilterValue;\n  onComparisonPeriodChange?: (value: PeriodFilterValue) => void;\n  /** Controlled comparison custom date range — active when comparisonPeriod is \"custom\". */\n  comparisonDateRange?: DateRangeValue;\n  onComparisonDateRangeChange?: (range: DateRangeValue) => void;\n  /** Controlled: whether comparison mode is toggled on. */\n  comparisonActive?: boolean;\n  /** Default comparison active state for uncontrolled usage. Defaults to false. */\n  defaultComparisonActive?: boolean;\n  onComparisonActiveChange?: (active: boolean) => void;\n  /** Show \"Overview\" button — renders all tabs (includeInOverview !== false) as grouped bars. */\n  showOverview?: boolean;\n  /** Controlled: whether overview mode is toggled on. */\n  overviewActive?: boolean;\n  /** Default overview active state for uncontrolled usage. Defaults to false. */\n  defaultOverviewActive?: boolean;\n  onOverviewActiveChange?: (active: boolean) => void;\n  /** Override any hardcoded string for i18n or custom terminology. */\n  labels?: EarningReportsTabsCardLabels;\n}\n\n// ── Internal types ────────────────────────────────────────────────────────────\n\ntype ChartPoint = EarningTabBarPoint & { primary?: number; comparison?: number };\n\n// ── Constants ─────────────────────────────────────────────────────────────────\n\nconst PERIOD_KEYS: PeriodFilterValue[] = [\n  \"today\",\n  \"yesterday\",\n  \"this-week\",\n  \"this-month\",\n  \"this-year\",\n  \"custom\",\n];\n\nconst DEFAULT_PERIOD_LABELS: Record<PeriodFilterValue, string> = {\n  today: \"Today\",\n  yesterday: \"Yesterday\",\n  \"this-week\": \"This Week\",\n  \"this-month\": \"This Month\",\n  \"this-year\": \"This Year\",\n  custom: \"Custom\",\n};\n\nconst OVERVIEW_COLORS = [\n  \"var(--ds-color-accent)\",\n  \"#3b82f6\",\n  \"#22c55e\",\n  \"#ef4444\",\n  \"#f59e0b\",\n  \"#8b5cf6\",\n  \"#ec4899\",\n];\n\nfunction defaultKFormatter(value: number): string {\n  if (value >= 1000) return `${Math.round(value / 1000)}k`;\n  return String(value);\n}\n\n// ── Comparison tooltip ────────────────────────────────────────────────────────\n\ninterface ComparisonTooltipProps {\n  active?: boolean;\n  payload?: Array<{ value?: number | string }>;\n  label?: string | number;\n  formatter: (v: number) => string;\n  primaryLabel: string;\n  comparisonLabel: string;\n  vsLabel: string;\n}\n\nconst ComparisonTooltipContent: FC<ComparisonTooltipProps> = ({\n  active,\n  payload,\n  label,\n  formatter,\n  primaryLabel,\n  comparisonLabel,\n  vsLabel,\n}) => {\n  if (!active || !payload?.length) return null;\n  const primary = Number(payload[0]?.value ?? 0);\n  const comparison = Number(payload[1]?.value ?? 0);\n  const pct = comparison !== 0 ? ((primary - comparison) / comparison) * 100 : null;\n\n  return (\n    <div style={chartTooltipContentStyle}>\n      <p style={chartTooltipLabelStyle}>{label}</p>\n      <p style={chartTooltipItemStyle}>\n        {primaryLabel}:{\" \"}\n        <span style={{ fontWeight: 600 }}>{formatter(primary)}</span>\n      </p>\n      <p style={chartTooltipItemStyle}>\n        {comparisonLabel}:{\" \"}\n        <span style={{ fontWeight: 600 }}>{formatter(comparison)}</span>\n      </p>\n      {pct !== null && (\n        <p\n          style={{\n            ...chartTooltipItemStyle,\n            marginTop: 6,\n            fontWeight: 700,\n            color: pct >= 0 ? \"#22c55e\" : \"#ef4444\",\n          }}\n        >\n          {pct >= 0 ? \"▲\" : \"▼\"}&nbsp;\n          {pct >= 0 ? \"+\" : \"\"}\n          {pct.toFixed(1)}%&nbsp;\n          <span style={{ fontWeight: 400, opacity: 0.7 }}>vs {vsLabel}</span>\n        </p>\n      )}\n    </div>\n  );\n};\n\n// ── Overview tooltip ──────────────────────────────────────────────────────────\n\ninterface OverviewTooltipProps {\n  active?: boolean;\n  payload?: Array<{ name: string; value: number; color?: string; dataKey: string }>;\n  label?: string | number;\n  tabs: EarningTab[];\n  fallbackFormatter: (v: number) => string;\n}\n\nconst OverviewTooltipContent: FC<OverviewTooltipProps> = ({\n  active,\n  payload,\n  label,\n  tabs,\n  fallbackFormatter,\n}) => {\n  if (!active || !payload?.length) return null;\n  return (\n    <div style={chartTooltipContentStyle}>\n      <p style={chartTooltipLabelStyle}>{label}</p>\n      {payload.map((item) => {\n        const tab = tabs.find((t) => t.id === String(item.dataKey));\n        const fmt = tab?.yAxisFormatter ?? fallbackFormatter;\n        return (\n          <p key={String(item.dataKey)} style={chartTooltipItemStyle}>\n            <span style={{ color: item.color, marginRight: 4 }}>●</span>\n            {item.name}:{\" \"}\n            <span style={{ fontWeight: 600 }}>{fmt(Number(item.value))}</span>\n          </p>\n        );\n      })}\n    </div>\n  );\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  showPeriodFilter = false,\n  periodFilter,\n  defaultPeriodFilter = \"this-month\",\n  onPeriodFilterChange,\n  customDateRange,\n  onCustomDateRangeChange,\n  showComparison = false,\n  comparisonPeriod,\n  defaultComparisonPeriod = \"this-year\",\n  onComparisonPeriodChange,\n  comparisonDateRange,\n  onComparisonDateRangeChange,\n  comparisonActive,\n  defaultComparisonActive = false,\n  onComparisonActiveChange,\n  showOverview = false,\n  overviewActive,\n  defaultOverviewActive = false,\n  onOverviewActiveChange,\n  labels,\n}) => {\n  const [internalId, setInternalId] = useState(\n    defaultTabId ?? tabs[0]?.id ?? \"\",\n  );\n  const [internalPeriod, setInternalPeriod] = useState<PeriodFilterValue>(\n    defaultPeriodFilter,\n  );\n  const [internalRange, setInternalRange] = useState<DateRangeValue>({\n    start: null,\n    end: null,\n  });\n  const [internalComparisonPeriod, setInternalComparisonPeriod] =\n    useState<PeriodFilterValue>(defaultComparisonPeriod);\n  const [internalComparisonRange, setInternalComparisonRange] =\n    useState<DateRangeValue>({ start: null, end: null });\n  const [internalComparisonActive, setInternalComparisonActive] = useState(\n    defaultComparisonActive,\n  );\n  const [internalOverviewActive, setInternalOverviewActive] = useState(\n    defaultOverviewActive,\n  );\n\n  const isTabControlled = selectedTabId !== undefined;\n  const activeId = isTabControlled ? selectedTabId : internalId;\n\n  const isPeriodControlled = periodFilter !== undefined;\n  const activePeriod = isPeriodControlled ? periodFilter : internalPeriod;\n\n  const isRangeControlled = customDateRange !== undefined;\n  const activeRange = isRangeControlled ? customDateRange : internalRange;\n\n  const isComparisonPeriodControlled = comparisonPeriod !== undefined;\n  const activeComparisonPeriod = isComparisonPeriodControlled\n    ? comparisonPeriod\n    : internalComparisonPeriod;\n\n  const isComparisonRangeControlled = comparisonDateRange !== undefined;\n  const activeComparisonRange = isComparisonRangeControlled\n    ? comparisonDateRange\n    : internalComparisonRange;\n\n  const isComparisonActiveControlled = comparisonActive !== undefined;\n  const isComparisonOn = isComparisonActiveControlled\n    ? comparisonActive\n    : internalComparisonActive;\n\n  const isOverviewActiveControlled = overviewActive !== undefined;\n  const isOverviewOn = isOverviewActiveControlled ? overviewActive : internalOverviewActive;\n\n  // ── Resolved labels ─────────────────────────────────────────────────────────\n  const moreOptionsLabel = labels?.moreOptionsAriaLabel ?? \"More options\";\n  const addTabLabel = labels?.addTabAriaLabel ?? \"Add category\";\n  const periodFilterLabel = labels?.periodFilterAriaLabel ?? \"Filter by period\";\n  const dateRangePlaceholder = labels?.dateRangePlaceholder ?? \"Pick a date range\";\n  const compareToLabel = labels?.compareToLabel ?? \"Compare to\";\n  const comparisonFilterLabel = labels?.comparisonFilterAriaLabel ?? \"Comparison period\";\n  const comparisonDateRangePlaceholder =\n    labels?.comparisonDateRangePlaceholder ?? \"Pick comparison range\";\n  const comparisonSeriesLabel = labels?.comparisonSeriesLabel ?? \"prev.\";\n  const compareButtonLabel = labels?.compareButtonLabel ?? \"Compare\";\n  const overviewButtonLabel = labels?.overviewButtonLabel ?? \"Overview\";\n  const periodSelectOptions = PERIOD_KEYS.map((k) => ({\n    value: k,\n    label: labels?.periodOptions?.[k] ?? DEFAULT_PERIOD_LABELS[k],\n  }));\n\n  // ── Handlers ────────────────────────────────────────────────────────────────\n  const handleTabChange = (id: string) => {\n    if (!isTabControlled) setInternalId(id);\n    onTabChange?.(id);\n    // Clicking a specific tab exits overview mode\n    if (isOverviewOn) {\n      if (!isOverviewActiveControlled) setInternalOverviewActive(false);\n      onOverviewActiveChange?.(false);\n    }\n  };\n\n  const handlePeriodChange = (raw: string) => {\n    const next = raw as PeriodFilterValue;\n    if (!isPeriodControlled) setInternalPeriod(next);\n    onPeriodFilterChange?.(next);\n  };\n\n  const handleRangeChange = (range: DateRangeValue) => {\n    if (!isRangeControlled) setInternalRange(range);\n    onCustomDateRangeChange?.(range);\n  };\n\n  const handleComparisonActiveToggle = () => {\n    const next = !isComparisonOn;\n    if (!isComparisonActiveControlled) setInternalComparisonActive(next);\n    onComparisonActiveChange?.(next);\n  };\n\n  const handleComparisonPeriodChange = (raw: string) => {\n    const next = raw as PeriodFilterValue;\n    if (!isComparisonPeriodControlled) setInternalComparisonPeriod(next);\n    onComparisonPeriodChange?.(next);\n  };\n\n  const handleComparisonRangeChange = (range: DateRangeValue) => {\n    if (!isComparisonRangeControlled) setInternalComparisonRange(range);\n    onComparisonDateRangeChange?.(range);\n  };\n\n  const handleOverviewToggle = () => {\n    const next = !isOverviewOn;\n    if (!isOverviewActiveControlled) setInternalOverviewActive(next);\n    onOverviewActiveChange?.(next);\n  };\n\n  // ── Active data + formatters ────────────────────────────────────────────────\n  const activeTab = tabs.find((t) => t.id === activeId) ?? tabs[0];\n\n  const activeChartData = useMemo(() => {\n    if (showPeriodFilter && activePeriod !== \"custom\") {\n      const periodData =\n        activeTab?.chartDataByPeriod?.[\n          activePeriod as Exclude<PeriodFilterValue, \"custom\">\n        ];\n      if (periodData) return periodData;\n    }\n    return activeTab?.chartData ?? [];\n  }, [activeTab, activePeriod, showPeriodFilter]);\n\n  const activeComparisonData = useMemo(() => {\n    if (!showComparison) return [];\n    if (activeComparisonPeriod !== \"custom\") {\n      const periodData =\n        activeTab?.comparisonChartDataByPeriod?.[\n          activeComparisonPeriod as Exclude<PeriodFilterValue, \"custom\">\n        ];\n      if (periodData) return periodData;\n    }\n    return activeTab?.comparisonChartData ?? [];\n  }, [activeTab, activeComparisonPeriod, showComparison]);\n\n  // Overview is mutually exclusive with comparison (overview takes precedence)\n  const isComparing =\n    !isOverviewOn &&\n    showComparison &&\n    isComparisonOn &&\n    activeComparisonData.length > 0;\n\n  // ── Overview chart data (all tabs merged into one dataset) ──────────────────\n  const overviewChartData = useMemo((): Record<string, number | string>[] | null => {\n    if (!showOverview || !isOverviewOn) return null;\n    const included = tabs.filter((t) => t.includeInOverview !== false);\n    if (included.length === 0) return null;\n\n    const tabsData = included.map((tab) => {\n      if (showPeriodFilter && activePeriod !== \"custom\") {\n        return (\n          tab.chartDataByPeriod?.[activePeriod as Exclude<PeriodFilterValue, \"custom\">] ??\n          tab.chartData\n        );\n      }\n      return tab.chartData;\n    });\n\n    const refLen = tabsData[0]?.length ?? 0;\n    return Array.from({ length: refLen }, (_, i) => {\n      const entry: Record<string, number | string> = {\n        name: tabsData[0]?.[i]?.name ?? String(i),\n      };\n      included.forEach((tab, ti) => {\n        entry[tab.id] = tabsData[ti]?.[i]?.value ?? 0;\n      });\n      return entry;\n    });\n  }, [showOverview, isOverviewOn, tabs, activePeriod, showPeriodFilter]);\n\n  const isOverview = showOverview && isOverviewOn && overviewChartData !== null;\n\n  // ── Summary ─────────────────────────────────────────────────────────────────\n  const activeSummary = useMemo((): EarningTabSummary | undefined => {\n    if (isOverview) return undefined; // header summary hidden in overview mode\n    let base: EarningTabSummary | undefined;\n    if (showPeriodFilter && activePeriod !== \"custom\") {\n      base = activeTab?.summaryByPeriod?.[activePeriod as Exclude<PeriodFilterValue, \"custom\">];\n    }\n    if (!base) base = activeTab?.summary;\n    if (!base) return undefined;\n    if (isComparing) {\n      const agg = activeTab?.summaryAggregation ?? \"sum\";\n      if (agg !== \"none\") {\n        const n = activeChartData.length || 1;\n        const primaryStat =\n          agg === \"avg\"\n            ? activeChartData.reduce((s, p) => s + p.value, 0) / n\n            : activeChartData.reduce((s, p) => s + p.value, 0);\n        const compStat =\n          agg === \"avg\"\n            ? activeComparisonData.reduce((s, p) => s + p.value, 0) / n\n            : activeComparisonData.reduce((s, p) => s + p.value, 0);\n        if (compStat !== 0) {\n          return { ...base, change: ((primaryStat - compStat) / compStat) * 100 };\n        }\n      }\n    }\n    return base;\n  }, [\n    isOverview,\n    activeTab,\n    activePeriod,\n    showPeriodFilter,\n    isComparing,\n    activeChartData,\n    activeComparisonData,\n  ]);\n\n  const chartPoints = useMemo((): ChartPoint[] => {\n    if (!isComparing) return activeChartData as ChartPoint[];\n    return activeChartData.map((point, i) => ({\n      ...point,\n      primary: point.value,\n      comparison: activeComparisonData[i]?.value ?? 0,\n    }));\n  }, [isComparing, activeChartData, activeComparisonData]);\n\n  const axisFormatter = activeTab?.yAxisFormatter ?? yAxisFormatter;\n  const labelFormatter =\n    activeTab?.barLabelFormatter ??\n    activeTab?.yAxisFormatter ??\n    barLabelFormatter ??\n    yAxisFormatter;\n\n  // ── Adaptive bar sizing ──────────────────────────────────────────────────────\n  const dataLen = isOverview\n    ? (overviewChartData?.length ?? 0)\n    : activeChartData.length;\n  const overviewTabCount = tabs.filter((t) => t.includeInOverview !== false).length;\n  const basBarSize = dataLen > 20 ? 10 : dataLen > 14 ? 16 : dataLen > 8 ? 22 : 36;\n  const barSize = isOverview\n    ? Math.max(4, Math.floor(basBarSize / Math.max(overviewTabCount, 1)))\n    : basBarSize;\n  const xAxisInterval = dataLen > 20 ? 3 : dataLen > 14 ? 1 : 0;\n  const showBarLabels = dataLen <= 14 && !isComparing && !isOverview;\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        <div className=\"flex items-start gap-3\">\n          {activeSummary && (\n            <div className=\"text-right\">\n              <p className=\"text-xl font-bold leading-tight text-ds-1\">\n                {activeSummary.value}\n              </p>\n              {activeSummary.change !== undefined && (\n                <p\n                  style={{\n                    fontSize: 11,\n                    fontWeight: 600,\n                    marginTop: 2,\n                    color: activeSummary.change >= 0 ? \"#22c55e\" : \"#ef4444\",\n                  }}\n                >\n                  {activeSummary.change >= 0 ? \"▲\" : \"▼\"}&nbsp;\n                  {activeSummary.change >= 0 ? \"+\" : \"\"}\n                  {Math.abs(activeSummary.change).toFixed(1)}%\n                  {activeSummary.changeLabel && (\n                    <span\n                      style={{ fontWeight: 400, color: \"var(--ds-color-fg-muted)\" }}\n                    >\n                      {\" \"}\n                      {activeSummary.changeLabel}\n                    </span>\n                  )}\n                </p>\n              )}\n            </div>\n          )}\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            className=\"shrink-0 p-0.5! text-ds-3\"\n            aria-label={moreOptionsLabel}\n            onClick={onMenuClick}\n          >\n            <EllipsisVerticalIcon width={18} height={18} />\n          </Button>\n        </div>\n      </div>\n\n      {/* ── Tab selector row ─────────────────────────────────────────────────── */}\n      <div className=\"flex items-center gap-3 px-5 pb-5\">\n        <div className=\"flex min-w-0 flex-1 items-center gap-3 overflow-x-auto\">\n          {tabs.map((tab) => {\n            const isActive = !isOverview && tab.id === activeId;\n            const btn = (\n              <Button\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            return tab.description ? (\n              <TabTooltip key={tab.id} content={tab.description}>\n                {btn}\n              </TabTooltip>\n            ) : (\n              <div key={tab.id}>{btn}</div>\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={addTabLabel}\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        {showPeriodFilter && (\n          <div className=\"shrink-0\">\n            <Select\n              options={periodSelectOptions}\n              value={activePeriod}\n              onChange={(e) => handlePeriodChange(e.target.value)}\n              size=\"compact\"\n              selectionIndicator=\"none\"\n              containerClassName=\"w-[130px]\"\n              aria-label={periodFilterLabel}\n            />\n          </div>\n        )}\n\n        {showOverview && (\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            onClick={handleOverviewToggle}\n            aria-pressed={isOverviewOn}\n            className={mergeClassNames(\n              \"shrink-0 rounded-lg border px-3 py-1.5 text-xs font-semibold transition-colors hover:opacity-100\",\n              isOverviewOn\n                ? \"border-ds-accent bg-ds-accent-subtle text-ds-accent\"\n                : \"border-ds-border-3 text-ds-3 hover:border-ds-border-2 hover:bg-ds-surface-2 hover:text-ds-2\",\n            )}\n          >\n            {overviewButtonLabel}\n          </Button>\n        )}\n\n        {showComparison && (\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            onClick={handleComparisonActiveToggle}\n            aria-pressed={isComparisonOn}\n            className={mergeClassNames(\n              \"shrink-0 rounded-lg border px-3 py-1.5 text-xs font-semibold transition-colors hover:opacity-100\",\n              isComparisonOn && !isOverview\n                ? \"border-ds-accent bg-ds-accent-subtle text-ds-accent\"\n                : \"border-ds-border-3 text-ds-3 hover:border-ds-border-2 hover:bg-ds-surface-2 hover:text-ds-2\",\n            )}\n          >\n            {compareButtonLabel}\n          </Button>\n        )}\n      </div>\n\n      {/*\n        ── Filter row — primary picker + comparison (same line) ───────────────\n        Reserved when showPeriodFilter is true. Primary picker hidden unless\n        period=\"custom\". Comparison section hidden unless isComparisonOn.\n      */}\n      {showPeriodFilter && (\n        <div className=\"flex items-center gap-3 px-5 pb-3\" style={{ height: 52 }}>\n          <div\n            className={mergeClassNames(\n              \"flex-1 transition-opacity duration-150\",\n              activePeriod !== \"custom\" && \"invisible pointer-events-none\",\n            )}\n            aria-hidden={activePeriod !== \"custom\"}\n          >\n            <DatePicker\n              mode=\"range\"\n              value={activeRange}\n              onChange={(v) => {\n                if (v && typeof v === \"object\" && \"start\" in v) {\n                  handleRangeChange(v as DateRangeValue);\n                }\n              }}\n              placeholder={dateRangePlaceholder}\n            />\n          </div>\n\n          {showComparison && (\n            <div\n              className={mergeClassNames(\n                \"flex flex-1 items-center gap-2 transition-opacity duration-150\",\n                (!isComparisonOn || isOverview) && \"invisible pointer-events-none\",\n              )}\n              aria-hidden={!isComparisonOn || isOverview}\n            >\n              <span className=\"shrink-0 text-xs font-medium text-ds-3\">\n                {compareToLabel}\n              </span>\n              {activeComparisonPeriod === \"custom\" ? (\n                <DatePicker\n                  mode=\"range\"\n                  value={activeComparisonRange}\n                  onChange={(v) => {\n                    if (v && typeof v === \"object\" && \"start\" in v) {\n                      handleComparisonRangeChange(v as DateRangeValue);\n                    }\n                  }}\n                  placeholder={comparisonDateRangePlaceholder}\n                />\n              ) : (\n                <Select\n                  options={periodSelectOptions}\n                  value={activeComparisonPeriod}\n                  onChange={(e) => handleComparisonPeriodChange(e.target.value)}\n                  size=\"compact\"\n                  selectionIndicator=\"none\"\n                  containerClassName=\"w-full\"\n                  aria-label={comparisonFilterLabel}\n                />\n              )}\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* ── Bar chart ───────────────────────────────────────────────────────── */}\n      <div className=\"px-2 pb-5\" style={{ height: 280 }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <RechartsBarChart\n            data={isOverview ? overviewChartData! : (chartPoints as unknown as Record<string, string | number>[])}\n            barSize={barSize}\n            barCategoryGap=\"25%\"\n            margin={{ top: showBarLabels ? 28 : 12, 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: 11 }}\n              dy={10}\n              interval={xAxisInterval}\n            />\n            <YAxis\n              axisLine={false}\n              tickLine={false}\n              tickFormatter={axisFormatter}\n              tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 11 }}\n              dx={-4}\n            />\n            <Tooltip\n              wrapperStyle={chartTooltipWrapperStyle}\n              cursor={{ fill: \"var(--ds-color-accent)\", fillOpacity: 0.06 }}\n              content={\n                isOverview\n                  ? (props) => (\n                      <OverviewTooltipContent\n                        {...(props as unknown as OverviewTooltipProps)}\n                        tabs={tabs}\n                        fallbackFormatter={labelFormatter}\n                      />\n                    )\n                  : isComparing\n                    ? (props) => (\n                        <ComparisonTooltipContent\n                          {...(props as unknown as ComparisonTooltipProps)}\n                          formatter={labelFormatter}\n                          primaryLabel={activeTab?.label ?? \"\"}\n                          comparisonLabel={`${activeTab?.label ?? \"\"} (${comparisonSeriesLabel})`}\n                          vsLabel={comparisonSeriesLabel}\n                        />\n                      )\n                    : undefined\n              }\n              contentStyle={isOverview || isComparing ? undefined : chartTooltipContentStyle}\n              itemStyle={isOverview || isComparing ? undefined : chartTooltipItemStyle}\n              labelStyle={isOverview || isComparing ? undefined : chartTooltipLabelStyle}\n              formatter={\n                isOverview || isComparing\n                  ? undefined\n                  : (v) => [labelFormatter(Number(v)), activeTab?.label ?? \"\"]\n              }\n            />\n            {isOverview ? (\n              tabs\n                .filter((t) => t.includeInOverview !== false)\n                .map((tab, i) => (\n                  <Bar\n                    key={tab.id}\n                    dataKey={tab.id}\n                    name={tab.label}\n                    radius={[4, 4, 0, 0]}\n                    fill={tab.overviewColor ?? OVERVIEW_COLORS[i % OVERVIEW_COLORS.length]}\n                  />\n                ))\n            ) : isComparing ? (\n              <>\n                <Bar dataKey=\"primary\" radius={[4, 4, 0, 0]}>\n                  {chartPoints.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                <Bar\n                  dataKey=\"comparison\"\n                  radius={[4, 4, 0, 0]}\n                  fill=\"var(--ds-color-fg-muted)\"\n                  opacity={0.35}\n                />\n              </>\n            ) : (\n              <Bar dataKey=\"value\" radius={[4, 4, 0, 0]}>\n                {showBarLabels && (\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                )}\n                {activeChartData.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            )}\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","\"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 { SettingsIcon } from \"../../icons/SettingsIcon\";\nimport { mergeClassNames } from \"../../../utils\";\nimport {\n  chartTooltipContentStyle,\n  chartTooltipItemStyle,\n  chartTooltipLabelStyle,\n  chartTooltipWrapperStyle,\n} from \"../charts/chartStyles\";\n\n// ── Public types ──────────────────────────────────────────────────────────────\n\nexport interface PaymentSummarySlice {\n  name: string;\n  value: number;\n  color: string;\n}\n\nexport interface PaymentSummaryMetric {\n  label: string;\n  badge?: { value: string; direction: \"up\" | \"down\" };\n  /** Primary display value, e.g. \"€ 237,20\". */\n  primary: string;\n  /** Optional secondary/comparison value, e.g. \"/ € 135,00\". */\n  secondary?: string;\n}\n\nexport interface PaymentSummaryCardProps {\n  /** Section label rendered in uppercase above the card (e.g. \"SICUREZZA\"). */\n  title?: string;\n  /** Compact mode omits the value headline and metrics column. */\n  variant?: \"full\" | \"compact\";\n  /** Label above the main value, e.g. \"Entrate nel periodo\". */\n  valueLabel?: string;\n  valueBadge?: { value: string; direction: \"up\" | \"down\" };\n  /** Large headline number, e.g. \"€ 925.470,20\". */\n  value?: string;\n  /** Label above the period selector, e.g. \"Date\". */\n  periodLabel?: string;\n  periods?: string[];\n  defaultPeriod?: string;\n  selectedPeriod?: string;\n  onPeriodChange?: (period: string) => void;\n  /** Donut chart slices. */\n  data: PaymentSummarySlice[];\n  /** Metric rows rendered in the right column (full variant only). */\n  metrics?: PaymentSummaryMetric[];\n  onSettingsClick?: () => void;\n  className?: string;\n}\n\n// ── Sub-components ────────────────────────────────────────────────────────────\n\nconst ChevronIcon = () => (\n  <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <polyline points=\"6 9 12 15 18 9\" />\n  </svg>\n);\n\nconst TrendBadge: FC<{ value: string; direction: \"up\" | \"down\" }> = ({ value, direction }) => {\n  const isUp = direction === \"up\";\n  return (\n    <span\n      className=\"inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-bold leading-none\"\n      style={{\n        backgroundColor: isUp ? \"var(--ds-color-success)\" : \"var(--ds-color-danger)\",\n        color: \"#fff\",\n      }}\n    >\n      {isUp ? \"+\" : \"\"}{value}\n    </span>\n  );\n};\n\ninterface PeriodDropdownProps {\n  label?: string;\n  periods: string[];\n  activePeriod: string;\n  onSelect: (p: string) => void;\n}\n\nconst PeriodDropdown: FC<PeriodDropdownProps> = ({ label, periods, activePeriod, onSelect }) => {\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!open) return;\n    const handle = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);\n    };\n    document.addEventListener(\"mousedown\", handle);\n    return () => document.removeEventListener(\"mousedown\", handle);\n  }, [open]);\n\n  return (\n    <div className=\"flex flex-col gap-1\">\n      {label && (\n        <p className=\"text-[10px] font-semibold uppercase tracking-wider text-ds-3\">{label}</p>\n      )}\n      <div ref={ref} className=\"relative\">\n        <Button\n          variant=\"tertiary\"\n          size=\"small\"\n          onClick={() => setOpen((o) => !o)}\n          className=\"w-full justify-between gap-2 rounded-md border border-ds-border-2 bg-ds-surface-1 px-3 py-1.5 text-xs font-medium text-ds-2 hover:bg-ds-surface-2 hover:opacity-100\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n        >\n          <span className=\"truncate\">{activePeriod}</span>\n          <span className={mergeClassNames(\"shrink-0 transition-transform duration-150\", open ? \"rotate-180\" : \"\")}>\n            <ChevronIcon />\n          </span>\n        </Button>\n        {open && (\n          <div\n            role=\"listbox\"\n            className=\"absolute end-0 top-full z-20 mt-1 min-w-full overflow-hidden 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={() => { onSelect(p); setOpen(false); }}\n                className={mergeClassNames(\n                  \"w-full justify-start rounded-none px-3 py-1.5 text-start text-xs 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};\n\n// ── Donut + legend ────────────────────────────────────────────────────────────\n\ninterface DonutWithLegendProps {\n  data: PaymentSummarySlice[];\n  size?: number;\n}\n\nconst DonutWithLegend: FC<DonutWithLegendProps> = ({ data, size = 120 }) => {\n  const innerR = Math.round(size * 0.3);\n  const outerR = Math.round(size * 0.48);\n\n  return (\n    <div className=\"flex items-center gap-4\">\n      {/* Legend */}\n      <div className=\"flex flex-col gap-1.5\">\n        {data.map((slice) => (\n          <div key={slice.name} className=\"flex items-center gap-2\">\n            <span\n              className=\"h-2.5 w-2.5 shrink-0 rounded-sm\"\n              style={{ backgroundColor: slice.color }}\n              aria-hidden=\"true\"\n            />\n            <span className=\"whitespace-nowrap text-xs text-ds-2\">{slice.name}</span>\n          </div>\n        ))}\n      </div>\n      {/* Donut */}\n      <div style={{ width: size, height: size, flexShrink: 0 }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <PieChart>\n            <Pie\n              data={data}\n              cx=\"50%\"\n              cy=\"50%\"\n              innerRadius={innerR}\n              outerRadius={outerR}\n              dataKey=\"value\"\n              paddingAngle={2}\n              startAngle={90}\n              endAngle={-270}\n            >\n              {data.map((slice, i) => (\n                <Cell key={i} fill={slice.color} />\n              ))}\n            </Pie>\n            <Tooltip\n              contentStyle={chartTooltipContentStyle}\n              itemStyle={chartTooltipItemStyle}\n              labelStyle={chartTooltipLabelStyle}\n              wrapperStyle={chartTooltipWrapperStyle}\n              formatter={(v, _n, props) => [\n                `${String(v)}%`,\n                (props.payload as PaymentSummarySlice).name,\n              ]}\n            />\n          </PieChart>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  );\n};\n\n// ── PaymentSummaryCard ────────────────────────────────────────────────────────\n\nconst DEFAULT_PERIODS = [\"Ultimi 30 giorni\", \"Ultimi 7 giorni\", \"Ultimi 90 giorni\", \"Quest'anno\"];\n\nexport const PaymentSummaryCard: FC<PaymentSummaryCardProps> = ({\n  title,\n  variant = \"full\",\n  valueLabel,\n  valueBadge,\n  value,\n  periodLabel,\n  periods = DEFAULT_PERIODS,\n  defaultPeriod,\n  selectedPeriod: controlledPeriod,\n  onPeriodChange,\n  data,\n  metrics = [],\n  onSettingsClick,\n  className,\n}) => {\n  const isControlled = controlledPeriod !== undefined;\n  const [internalPeriod, setInternalPeriod] = useState(defaultPeriod ?? periods[0] ?? \"\");\n  const activePeriod = isControlled ? controlledPeriod : internalPeriod;\n\n  const handlePeriodSelect = (p: string) => {\n    if (!isControlled) setInternalPeriod(p);\n    onPeriodChange?.(p);\n  };\n\n  return (\n    <div className={mergeClassNames(\"rounded-xl border border-ds-border-3/80 bg-ds-surface-1\", className)}>\n      {/* ── Header ─────────────────────────────────────────────────────────── */}\n      <div className=\"flex items-center justify-between px-5 pb-3 pt-4\">\n        {title ? (\n          <p className=\"text-[11px] font-bold uppercase tracking-widest text-ds-3\">{title}</p>\n        ) : (\n          <span />\n        )}\n        <Button\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"shrink-0 p-1! text-ds-3 hover:text-ds-1\"\n          aria-label=\"Settings\"\n          onClick={onSettingsClick}\n        >\n          <SettingsIcon width={16} height={16} />\n        </Button>\n      </div>\n\n      {/* ── Body ───────────────────────────────────────────────────────────── */}\n      {variant === \"full\" ? (\n        /* Full variant: left col (value + donut) | right col (period + metrics) */\n        <div className=\"flex gap-4 px-5 pb-5\">\n          {/* Left */}\n          <div className=\"flex min-w-0 flex-1 flex-col gap-4\">\n            {(valueLabel ?? value) && (\n              <div>\n                {valueLabel && (\n                  <div className=\"flex items-center gap-2\">\n                    <p className=\"text-xs text-ds-3\">{valueLabel}</p>\n                    {valueBadge && <TrendBadge {...valueBadge} />}\n                  </div>\n                )}\n                {value && (\n                  <p className=\"mt-1 text-xl font-bold tracking-tight text-ds-1\">{value}</p>\n                )}\n              </div>\n            )}\n            <DonutWithLegend data={data} size={130} />\n          </div>\n\n          {/* Divider */}\n          <div className=\"w-px self-stretch bg-ds-border-3/50\" />\n\n          {/* Right */}\n          <div className=\"flex w-[180px] shrink-0 flex-col gap-4\">\n            <PeriodDropdown\n              label={periodLabel}\n              periods={periods}\n              activePeriod={activePeriod}\n              onSelect={handlePeriodSelect}\n            />\n            {metrics.map((m, i) => (\n              <div key={i} className=\"flex flex-col gap-0.5\">\n                <div className=\"flex items-center gap-1.5 flex-wrap\">\n                  <p className=\"text-xs text-ds-3\">{m.label}</p>\n                  {m.badge && <TrendBadge {...m.badge} />}\n                </div>\n                <p className=\"text-base font-bold text-ds-1\">\n                  {m.primary}\n                  {m.secondary && (\n                    <span className=\"ms-1 text-sm font-normal text-ds-3\">{m.secondary}</span>\n                  )}\n                </p>\n              </div>\n            ))}\n          </div>\n        </div>\n      ) : (\n        /* Compact variant: period selector + legend + donut */\n        <div className=\"flex flex-col gap-4 px-5 pb-5\">\n          <PeriodDropdown\n            label={periodLabel}\n            periods={periods}\n            activePeriod={activePeriod}\n            onSelect={handlePeriodSelect}\n          />\n          <DonutWithLegend data={data} size={130} />\n        </div>\n      )}\n    </div>\n  );\n};\n","\"use client\";\n\nimport { useState, type FC } from \"react\";\nimport {\n  BarChart as RechartsBarChart,\n  Bar,\n  XAxis,\n  Tooltip,\n  ResponsiveContainer,\n} from \"recharts\";\n\nimport { Button } from \"../../forms/button\";\nimport { Select } from \"../../forms/select\";\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 BarBreakdownCategory {\n  /** dataKey that matches a field in BarBreakdownDataPoint */\n  key: string;\n  label: string;\n  color: string;\n}\n\nexport interface BarBreakdownDataPoint {\n  /** X-axis label. Pass an empty string for tick marks without a label. */\n  name: string;\n  [key: string]: string | number;\n}\n\nexport interface BarBreakdownHeadline {\n  flag?: string;\n  label: string;\n  value: string;\n}\n\nexport interface BarBreakdownMetric {\n  label: string;\n  badge?: { value: string; direction: \"up\" | \"down\" };\n  primary: string;\n  secondary?: string;\n}\n\nexport interface BarBreakdownCardProps {\n  title?: string;\n  /** full = headlines + chart + right metrics. compact = period + chart only. */\n  variant?: \"full\" | \"compact\";\n  headlines?: BarBreakdownHeadline[];\n  categories: BarBreakdownCategory[];\n  /** Fallback data when the active period has no entry in dataByPeriod. */\n  data: BarBreakdownDataPoint[];\n  /** Per-period data — key must match a value in `periods`. When provided,\n   *  the chart swaps to the matching dataset on period change. */\n  dataByPeriod?: Record<string, BarBreakdownDataPoint[]>;\n  periodLabel?: string;\n  periods?: string[];\n  defaultPeriod?: string;\n  selectedPeriod?: string;\n  onPeriodChange?: (period: string) => void;\n  /** Only rendered in variant=\"full\". */\n  metrics?: BarBreakdownMetric[];\n  onMenuClick?: () => void;\n  className?: string;\n}\n\n// ── Sub-components ────────────────────────────────────────────────────────────\n\nconst TrendBadge: FC<{ value: string; direction: \"up\" | \"down\" }> = ({ value, direction }) => {\n  const isUp = direction === \"up\";\n  return (\n    <span\n      className=\"inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-bold leading-none\"\n      style={{\n        backgroundColor: isUp ? \"var(--ds-color-success)\" : \"var(--ds-color-danger)\",\n        color: \"#fff\",\n      }}\n    >\n      {isUp ? \"+\" : \"\"}{value}\n    </span>\n  );\n};\n\n\nconst BarChartArea: FC<{ categories: BarBreakdownCategory[]; data: BarBreakdownDataPoint[]; height?: number }> = ({\n  categories,\n  data,\n  height = 180,\n}) => (\n  <div className=\"flex items-start gap-4\">\n    <div className=\"flex flex-col gap-1.5 pt-2 shrink-0\">\n      {categories.map((cat) => (\n        <div key={cat.key} className=\"flex items-center gap-2\">\n          <span className=\"h-2.5 w-2.5 shrink-0 rounded-sm\" style={{ backgroundColor: cat.color }} aria-hidden=\"true\" />\n          <span className=\"whitespace-nowrap text-xs text-ds-2\">{cat.label}</span>\n        </div>\n      ))}\n    </div>\n    <div className=\"flex-1 min-w-0\" style={{ height }}>\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <RechartsBarChart data={data} barSize={8} barCategoryGap=\"30%\" margin={{ top: 4, right: 4, bottom: 0, left: 0 }}>\n          <XAxis\n            dataKey=\"name\"\n            axisLine={false}\n            tickLine={{ stroke: \"var(--ds-border-2)\", strokeWidth: 1 }}\n            tick={{ fontSize: 10, fill: \"var(--ds-text-3)\" }}\n            interval=\"preserveStartEnd\"\n          />\n          <Tooltip\n            contentStyle={chartTooltipContentStyle}\n            itemStyle={chartTooltipItemStyle}\n            labelStyle={chartTooltipLabelStyle}\n            wrapperStyle={chartTooltipWrapperStyle}\n          />\n          {categories.map((cat, i) => (\n            <Bar\n              key={cat.key}\n              dataKey={cat.key}\n              stackId=\"a\"\n              fill={cat.color}\n              radius={i === categories.length - 1 ? [2, 2, 0, 0] : undefined}\n            />\n          ))}\n        </RechartsBarChart>\n      </ResponsiveContainer>\n    </div>\n  </div>\n);\n\n// ── BarBreakdownCard ──────────────────────────────────────────────────────────\n\nconst DEFAULT_PERIODS = [\"Last 30 days\", \"Last 7 days\", \"Last 90 days\", \"This year\"];\n\nexport const BarBreakdownCard: FC<BarBreakdownCardProps> = ({\n  title,\n  variant = \"full\",\n  headlines = [],\n  categories,\n  data,\n  dataByPeriod,\n  periodLabel,\n  periods = DEFAULT_PERIODS,\n  defaultPeriod,\n  selectedPeriod: controlledPeriod,\n  onPeriodChange,\n  metrics = [],\n  onMenuClick,\n  className,\n}) => {\n  const isControlled = controlledPeriod !== undefined;\n  const [internalPeriod, setInternalPeriod] = useState(defaultPeriod ?? periods[0] ?? \"\");\n  const activePeriod = isControlled ? controlledPeriod : internalPeriod;\n\n  const handleSelect = (p: string) => {\n    if (!isControlled) setInternalPeriod(p);\n    onPeriodChange?.(p);\n  };\n\n  const activeData = dataByPeriod?.[activePeriod] ?? data;\n\n  const hasHeadlines = headlines.length > 0;\n  const hasMetrics = metrics.length > 0 && variant === \"full\";\n\n  return (\n    <div className={mergeClassNames(\"rounded-xl border border-ds-border-3/80 bg-ds-surface-1\", className)}>\n      {/* Header */}\n      <div className=\"flex items-center justify-between px-5 pb-3 pt-4\">\n        {title ? (\n          <p className=\"text-[11px] font-bold uppercase tracking-widest text-ds-3\">{title}</p>\n        ) : <span />}\n        <Button\n          variant=\"tertiary\"\n          size=\"small\"\n          className=\"shrink-0 p-0.5! text-ds-3 hover:text-ds-1\"\n          aria-label=\"More options\"\n          onClick={onMenuClick}\n        >\n          <EllipsisVerticalIcon width={18} height={18} />\n        </Button>\n      </div>\n\n      <div className=\"px-5 pb-5 flex flex-col gap-4\">\n        {/* Headlines + period row */}\n        <div className=\"flex items-end justify-between gap-4 flex-wrap\">\n          {hasHeadlines && (\n            <div className=\"flex flex-wrap gap-6\">\n              {headlines.map((h) => (\n                <div key={h.label} className=\"flex flex-col gap-0.5\">\n                  <p className=\"text-[10px] text-ds-3\">{h.label}</p>\n                  <p className=\"text-lg font-bold text-ds-1\">\n                    {h.flag && <span className=\"mr-1.5\">{h.flag}</span>}\n                    {h.value}\n                  </p>\n                </div>\n              ))}\n            </div>\n          )}\n          <div className={mergeClassNames(hasHeadlines ? \"shrink-0\" : \"w-full max-w-[160px]\")}>\n            {periodLabel && (\n              <p className=\"mb-1 text-[10px] font-semibold uppercase tracking-wider text-ds-3\">{periodLabel}</p>\n            )}\n            <Select\n              options={periods.map((p) => ({ value: p, label: p }))}\n              value={activePeriod}\n              onChange={(e) => handleSelect(e.target.value)}\n              size=\"compact\"\n              selectionIndicator=\"none\"\n              containerClassName=\"w-full\"\n              aria-label=\"Filter by period\"\n            />\n          </div>\n        </div>\n\n        {/* Chart + optional right metrics */}\n        <div className=\"flex gap-4\">\n          <div className=\"flex-1 min-w-0\">\n            <BarChartArea categories={categories} data={activeData} />\n          </div>\n          {hasMetrics && (\n            <>\n              <div className=\"w-px self-stretch bg-ds-border-3/50\" />\n              <div className=\"flex w-[160px] shrink-0 flex-col gap-4 justify-center\">\n                {metrics.map((m, i) => (\n                  <div key={i} className=\"flex flex-col gap-0.5\">\n                    <div className=\"flex items-center gap-1.5 flex-wrap\">\n                      <p className=\"text-xs text-ds-3\">{m.label}</p>\n                      {m.badge && <TrendBadge {...m.badge} />}\n                    </div>\n                    <p className=\"text-base font-bold text-ds-1\">\n                      {m.primary}\n                      {m.secondary && <span className=\"ms-1 text-sm font-normal text-ds-3\">{m.secondary}</span>}\n                    </p>\n                  </div>\n                ))}\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n","\"use client\";\n\nimport { useMemo, useState, 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 TopSellingItem {\n  id: string | number;\n  name: string;\n  category?: string;\n  image?: string;\n  /** Units sold. */\n  qty: number;\n  /** Gross revenue ($). */\n  revenue: number;\n  /** % change vs previous period for qty. */\n  qtyTrend?: number;\n  /** % change vs previous period for revenue. */\n  revenueTrend?: number;\n}\n\nexport type TopSellingMetric = \"qty\" | \"revenue\";\n\nexport interface TopSellingItemsCardLabels {\n  byQtyLabel?: string;\n  byRevenueLabel?: string;\n  viewAllLabel?: string;\n  /** Appended after qty value, e.g. \"sold\" → \"1,240 sold\". */\n  soldSuffix?: string;\n  moreOptionsAriaLabel?: string;\n}\n\nexport interface TopSellingItemsCardProps {\n  title?: string;\n  subtitle?: string;\n  items: TopSellingItem[];\n  /** Controlled active metric. */\n  metric?: TopSellingMetric;\n  defaultMetric?: TopSellingMetric;\n  onMetricChange?: (metric: TopSellingMetric) => void;\n  showTrend?: boolean;\n  /** Max rows shown (default 5). */\n  maxItems?: number;\n  labels?: TopSellingItemsCardLabels;\n  onViewAll?: () => void;\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ── Private sub-components ────────────────────────────────────────────────────\n\nconst ProductThumb: FC<{ src?: string; alt: string }> = ({ src, alt }) =>\n  src ? (\n    <img\n      src={src}\n      alt={alt}\n      className=\"h-10 w-10 shrink-0 rounded-md object-contain bg-ds-surface-2 p-1\"\n    />\n  ) : (\n    <div\n      className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-ds-surface-2 text-ds-3 text-base\"\n      aria-hidden=\"true\"\n    >\n      □\n    </div>\n  );\n\nconst TrendBadge: FC<{ value: number }> = ({ value }) => {\n  const up = value >= 0;\n  return (\n    <span\n      className={mergeClassNames(\n        \"shrink-0 rounded px-1.5 py-0.5 text-[11px] font-semibold tabular-nums\",\n        up\n          ? \"bg-green-500/10 text-green-600 dark:text-green-400\"\n          : \"bg-red-500/10 text-red-600 dark:text-red-400\",\n      )}\n      aria-label={`${up ? \"Up\" : \"Down\"} ${Math.abs(value)} percent`}\n    >\n      {up ? \"+\" : \"\"}{value}%\n    </span>\n  );\n};\n\ninterface ItemRowProps {\n  item: TopSellingItem;\n  rank: number;\n  metric: TopSellingMetric;\n  maxValue: number;\n  showTrend: boolean;\n  soldSuffix: string;\n}\n\nconst ItemRow: FC<ItemRowProps> = ({ item, rank, metric, maxValue, showTrend, soldSuffix }) => {\n  const value = metric === \"qty\" ? item.qty : item.revenue;\n  const trend = metric === \"qty\" ? item.qtyTrend : item.revenueTrend;\n  const sharePct = maxValue > 0 ? (value / maxValue) * 100 : 0;\n\n  const displayValue =\n    metric === \"revenue\"\n      ? value >= 1_000_000\n        ? `$${(value / 1_000_000).toFixed(1)}M`\n        : value >= 1_000\n        ? `$${Math.round(value / 1_000)}k`\n        : `$${value}`\n      : value >= 1_000\n      ? `${(value / 1_000).toFixed(1)}k ${soldSuffix}`\n      : `${value} ${soldSuffix}`;\n\n  return (\n    <li className=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\">\n      <span\n        className=\"w-4 shrink-0 text-center text-xs font-bold tabular-nums text-ds-3\"\n        aria-label={`Rank ${rank}`}\n      >\n        {rank}\n      </span>\n\n      <ProductThumb src={item.image} alt={item.name} />\n\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1.5\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <span className=\"truncate text-sm font-semibold text-ds-1\">{item.name}</span>\n          <div className=\"flex shrink-0 items-center gap-2\">\n            {showTrend && trend !== undefined && <TrendBadge value={trend} />}\n            <span className=\"text-sm font-bold tabular-nums text-ds-1\">{displayValue}</span>\n          </div>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {item.category && (\n            <span className=\"shrink-0 text-xs text-ds-3\">{item.category}</span>\n          )}\n          <div className=\"h-1 flex-1 overflow-hidden rounded-full bg-ds-border-2\">\n            <div\n              className=\"h-full rounded-full transition-all duration-300\"\n              style={{\n                width: `${sharePct}%`,\n                backgroundColor: \"var(--ds-color-accent)\",\n                opacity: rank === 1 ? 1 : 0.45 + (sharePct / 100) * 0.55,\n              }}\n              aria-hidden=\"true\"\n            />\n          </div>\n        </div>\n      </div>\n    </li>\n  );\n};\n\n// ── TopSellingItemsCard ───────────────────────────────────────────────────────\n\nexport const TopSellingItemsCard: FC<TopSellingItemsCardProps> = ({\n  title = \"Top Selling Items\",\n  subtitle,\n  items,\n  metric: metricProp,\n  defaultMetric = \"qty\",\n  onMetricChange,\n  showTrend = true,\n  maxItems = 5,\n  labels,\n  onViewAll,\n  className,\n  onMenuClick,\n}) => {\n  const isControlled = metricProp !== undefined;\n  const [internalMetric, setInternalMetric] = useState<TopSellingMetric>(defaultMetric);\n  const metric = isControlled ? metricProp! : internalMetric;\n\n  const handleMetricChange = (m: TopSellingMetric) => {\n    if (!isControlled) setInternalMetric(m);\n    onMetricChange?.(m);\n  };\n\n  const byQtyLabel     = labels?.byQtyLabel     ?? \"By Qty\";\n  const byRevenueLabel = labels?.byRevenueLabel  ?? \"By Revenue\";\n  const soldSuffix     = labels?.soldSuffix      ?? \"sold\";\n\n  const sorted = useMemo(\n    () =>\n      [...items]\n        .sort((a, b) => (metric === \"qty\" ? b.qty - a.qty : b.revenue - a.revenue))\n        .slice(0, maxItems),\n    [items, metric, maxItems],\n  );\n\n  const maxValue = sorted[0] ? (metric === \"qty\" ? sorted[0].qty : sorted[0].revenue) : 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-3 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        <div className=\"flex items-center gap-2\">\n          <div\n            className=\"flex rounded-md border border-ds-border-2 bg-ds-surface-2 p-0.5\"\n            role=\"group\"\n            aria-label=\"Metric toggle\"\n          >\n            {([\"qty\", \"revenue\"] as TopSellingMetric[]).map((m) => (\n              <Button\n                key={m}\n                variant=\"tertiary\"\n                onClick={() => handleMetricChange(m)}\n                className={mergeClassNames(\n                  \"rounded px-2.5! py-1! text-xs font-medium transition-colors\",\n                  metric === m\n                    ? \"bg-ds-surface-1 text-ds-1 shadow-sm\"\n                    : \"text-ds-3 hover:text-ds-2\",\n                )}\n                aria-pressed={metric === m}\n              >\n                {m === \"qty\" ? byQtyLabel : byRevenueLabel}\n              </Button>\n            ))}\n          </div>\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            className=\"shrink-0 p-0.5! text-ds-3\"\n            aria-label={labels?.moreOptionsAriaLabel ?? \"More options\"}\n            onClick={onMenuClick}\n          >\n            <EllipsisVerticalIcon width={18} height={18} />\n          </Button>\n        </div>\n      </div>\n\n      {/* List */}\n      <ul\n        className=\"flex flex-col divide-y divide-ds-border-2 px-5\"\n        role=\"list\"\n        aria-label={metric === \"qty\" ? byQtyLabel : byRevenueLabel}\n      >\n        {sorted.map((item, i) => (\n          <ItemRow\n            key={item.id}\n            item={item}\n            rank={i + 1}\n            metric={metric}\n            maxValue={maxValue}\n            showTrend={showTrend}\n            soldSuffix={soldSuffix}\n          />\n        ))}\n      </ul>\n\n      {/* Footer */}\n      {onViewAll && (\n        <div className=\"border-t border-ds-border-2 px-5 py-3\">\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            {labels?.viewAllLabel ?? \"View all items\"}\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n};\n","\"use client\";\n\nimport { useMemo, useState, type FC } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\n// ── Types ──────────────────────────────────────────────────────────────────────\n\nexport interface HeatmapPoint {\n  /** Day label, e.g. \"Mon\" */\n  day: string;\n  /** Time slot label, e.g. \"09h\" */\n  slot: string;\n  /** Numeric value (revenue, order count, units, etc.) */\n  value: number;\n  /** Number of unique customers in this slot. */\n  clients?: number;\n  /** Best-selling product name in this slot. */\n  topProduct?: string;\n}\n\nexport interface SalesHeatmapCardLabels {\n  low?: string;\n  high?: string;\n  peak?: string;\n  slowest?: string;\n  clients?: string;\n}\n\nexport interface SalesHeatmapCardProps {\n  title?: string;\n  subtitle?: string;\n  data: HeatmapPoint[];\n  /** Ordered list of day row labels. Defaults to Mon–Sun. */\n  days?: string[];\n  /** Ordered list of time-slot column labels. Defaults to 08h–19h. */\n  slots?: string[];\n  valueFormatter?: (v: number) => string;\n  /** Label shown in the tooltip before the value, e.g. \"Revenue\". */\n  metricLabel?: string;\n  labels?: SalesHeatmapCardLabels;\n  className?: string;\n}\n\n// ── Constants ──────────────────────────────────────────────────────────────────\n\nconst DEFAULT_DAYS  = [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"];\nconst DEFAULT_SLOTS = [\"08h\",\"09h\",\"10h\",\"11h\",\"12h\",\"13h\",\"14h\",\"15h\",\"16h\",\"17h\",\"18h\",\"19h\"];\n\nfunction defaultFmt(v: number): string {\n  return v >= 1_000 ? `€${(v / 1_000).toFixed(1)}k` : `€${v}`;\n}\n\n// ── SalesHeatmapCard ───────────────────────────────────────────────────────────\n\nexport const SalesHeatmapCard: FC<SalesHeatmapCardProps> = ({\n  title = \"Sales Heatmap\",\n  subtitle = \"Revenue by day & hour\",\n  data,\n  days = DEFAULT_DAYS,\n  slots = DEFAULT_SLOTS,\n  valueFormatter = defaultFmt,\n  metricLabel = \"Revenue\",\n  labels,\n  className,\n}) => {\n  const [hovered, setHovered] = useState<HeatmapPoint | null>(null);\n\n  const { grid, maxValue, bestDay, bestSlot, bestValue, worstDay, worstSlot } = useMemo(() => {\n    const lookup = new Map<string, Map<string, number>>();\n    for (const pt of data) {\n      if (!lookup.has(pt.day)) lookup.set(pt.day, new Map());\n      lookup.get(pt.day)!.set(pt.slot, pt.value);\n    }\n\n    let maxValue = 0;\n    let bestDay = \"\"; let bestSlot = \"\"; let bestValue = 0;\n    let worstDay = \"\"; let worstSlot = \"\"; let worstValue = Infinity;\n\n    const grid = days.map((day) => {\n      const dayMap = lookup.get(day) ?? new Map<string, number>();\n      return slots.map((slot) => {\n        const value = dayMap.get(slot) ?? 0;\n        if (value > maxValue) maxValue = value;\n        if (value > bestValue) { bestValue = value; bestDay = day; bestSlot = slot; }\n        if (value > 0 && value < worstValue) { worstValue = value; worstDay = day; worstSlot = slot; }\n        return { day, slot, value };\n      });\n    });\n\n    return { grid, maxValue, bestDay, bestSlot, bestValue, worstDay, worstSlot };\n  }, [data, days, slots]);\n\n  return (\n    <div className={mergeClassNames(\"rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5\", className)}>\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      {/* Heatmap grid */}\n      <div className=\"overflow-x-auto\">\n        <div style={{ minWidth: 320 }}>\n          {/* Column headers */}\n          <div\n            className=\"mb-1\"\n            style={{ display: \"grid\", gridTemplateColumns: `2.5rem repeat(${slots.length}, 1fr)` }}\n          >\n            <div />\n            {slots.map((slot) => (\n              <div key={slot} className=\"text-center text-[9px] leading-none text-ds-3\">\n                {slot}\n              </div>\n            ))}\n          </div>\n\n          {/* Rows */}\n          {grid.map((row, di) => (\n            <div\n              key={days[di]}\n              style={{ display: \"grid\", gridTemplateColumns: `2.5rem repeat(${slots.length}, 1fr)` }}\n            >\n              <div className=\"flex items-center text-[11px] font-medium text-ds-3 pr-1.5\">\n                {days[di]}\n              </div>\n              {row.map((cell) => {\n                const intensity = maxValue > 0 ? cell.value / maxValue : 0;\n                const pct = Math.max(3, Math.round(Math.pow(intensity, 0.65) * 88));\n                const isBest = cell.day === bestDay && cell.slot === bestSlot;\n                const isHovered = hovered?.day === cell.day && hovered?.slot === cell.slot;\n                return (\n                  <div\n                    key={cell.slot}\n                    role=\"gridcell\"\n                    aria-label={`${cell.day} ${cell.slot}: ${metricLabel} ${valueFormatter(cell.value)}`}\n                    className=\"m-[1.5px] h-6 cursor-default rounded-[3px] transition-transform hover:scale-110\"\n                    style={{\n                      backgroundColor: cell.value === 0\n                        ? \"color-mix(in srgb, var(--ds-color-fg) 5%, transparent)\"\n                        : `color-mix(in srgb, var(--ds-color-accent) ${pct}%, transparent)`,\n                      outline: isBest ? \"2px solid var(--ds-color-accent)\" : \"none\",\n                      outlineOffset: 1,\n                      boxShadow: isHovered ? \"0 0 0 1.5px var(--ds-color-accent)\" : undefined,\n                    }}\n                    onMouseEnter={() => setHovered(cell)}\n                    onMouseLeave={() => setHovered(null)}\n                  />\n                );\n              })}\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Legend bar */}\n      <div className=\"mt-3 flex items-center gap-2\">\n        <span className=\"text-[10px] text-ds-3\">{labels?.low ?? \"Low\"}</span>\n        <div\n          className=\"h-1.5 flex-1 rounded-full\"\n          style={{\n            background: \"linear-gradient(to right, color-mix(in srgb, var(--ds-color-accent) 5%, transparent), var(--ds-color-accent))\",\n          }}\n        />\n        <span className=\"text-[10px] text-ds-3\">{labels?.high ?? \"High\"}</span>\n      </div>\n\n      {/* Footer insight */}\n      <div className=\"mt-3 border-t border-ds-border-3/50 pt-3\">\n        {hovered ? (\n          <div className=\"space-y-0.5\">\n            <p className=\"text-xs font-semibold text-ds-1\">\n              {hovered.day} {hovered.slot}\n            </p>\n            <div className=\"flex flex-wrap items-center gap-x-3 gap-y-0.5\">\n              <span className=\"text-xs font-bold\" style={{ color: \"var(--ds-color-accent)\" }}>\n                {valueFormatter(hovered.value)}\n              </span>\n              {hovered.clients !== undefined && (\n                <span className=\"text-xs text-ds-3\">\n                  👥 <span className=\"font-semibold text-ds-2\">{hovered.clients}</span> {labels?.clients ?? \"clients\"}\n                </span>\n              )}\n              {hovered.topProduct && (\n                <span className=\"text-xs text-ds-3\">\n                  🏷️ <span className=\"font-semibold text-ds-2\">{hovered.topProduct}</span>\n                </span>\n              )}\n            </div>\n          </div>\n        ) : bestValue > 0 ? (\n          <div className=\"flex flex-wrap items-center gap-x-4 gap-y-1\">\n            <p className=\"text-xs text-ds-1\">\n              <span className=\"mr-1\">🔥</span>\n              <span className=\"font-medium text-ds-3\">{labels?.peak ?? \"Peak\"}: </span>\n              <span className=\"font-bold\" style={{ color: \"var(--ds-color-accent)\" }}>\n                {bestDay} {bestSlot}\n              </span>\n              <span className=\"text-ds-3\"> — {valueFormatter(bestValue)}</span>\n            </p>\n            {worstDay && (\n              <p className=\"text-xs text-ds-3\">\n                <span className=\"mr-1\">💤</span>\n                <span>{labels?.slowest ?? \"Slowest\"}: {worstDay} {worstSlot}</span>\n              </p>\n            )}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FC } from \"react\";\nimport {\n  AreaChart,\n  BarChart,\n  ComposedChart,\n  LineChart,\n  Area,\n  Bar,\n  CartesianGrid,\n  Cell,\n  Line,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n  ReferenceLine,\n} from \"recharts\";\n\nimport {\n  chartTooltipContentStyle,\n  chartTooltipItemStyle,\n  chartTooltipLabelStyle,\n  chartTooltipWrapperStyle,\n} from \"../charts/chartStyles\";\n\nimport type { PLDataPoint, PLMetricTab, PLWaterfallRole, PLWaterfallStep } from \"./FinancialPLCard\";\n\n// ── Waterfall builder ──────────────────────────────────────────────────────────\n\nexport interface WFPoint { name: string; base: number; delta: number; role: PLWaterfallRole; }\n\nexport function buildWaterfallData(steps: PLWaterfallStep[], metrics: PLMetricTab[]): WFPoint[] {\n  let running = 0;\n  return steps.map((step) => {\n    const raw = step.rawValue ?? metrics.find((m) => m.id === step.metricId)?.rawValue ?? 0;\n    if (step.role === \"add\") {\n      const base = running;\n      running += raw;\n      return { name: step.label, base, delta: raw, role: \"add\" as const };\n    }\n    if (step.role === \"subtract\") {\n      running -= raw;\n      return { name: step.label, base: running, delta: raw, role: \"subtract\" as const };\n    }\n    return { name: step.label, base: 0, delta: running, role: \"total\" as const };\n  });\n}\n\nconst WF_COLOR: Record<PLWaterfallRole, string> = {\n  add:      \"#22c55e\",\n  subtract: \"#ef4444\",\n  total:    \"var(--ds-color-accent)\",\n};\n\n// ── Shared axis config ─────────────────────────────────────────────────────────\n\nfunction ax(formatter: (v: number) => string) {\n  return {\n    xProps: { axisLine: false as const, tickLine: false as const, tick: { fill: \"var(--ds-color-fg-muted)\", fontSize: 11 }, dy: 10 },\n    yProps: { axisLine: false as const, tickLine: false as const, tickFormatter: formatter, tick: { fill: \"var(--ds-color-fg-muted)\", fontSize: 11 }, dx: -4 },\n    gridProps: { strokeDasharray: \"3 3\", vertical: false as const, stroke: \"var(--ds-color-border)\", opacity: 0.5 },\n  };\n}\n\n// ── Waterfall tooltip ──────────────────────────────────────────────────────────\n\ninterface WFTipProps {\n  active?: boolean;\n  payload?: Array<{ payload: WFPoint }>;\n  formatter: (v: number) => string;\n}\n\nconst WFTooltip: FC<WFTipProps> = ({ active, payload, formatter }) => {\n  if (!active || !payload?.length) return null;\n  const { name, delta, role } = payload[0]!.payload;\n  const sign = role === \"subtract\" ? \"−\" : role === \"add\" ? \"+\" : \"\";\n  return (\n    <div style={chartTooltipContentStyle}>\n      <p style={chartTooltipLabelStyle}>{name}</p>\n      <p style={{ ...chartTooltipItemStyle, color: WF_COLOR[role], fontWeight: 700 }}>\n        {sign}{formatter(delta)}\n      </p>\n    </div>\n  );\n};\n\n// ── Comparison tooltip ─────────────────────────────────────────────────────────\n\ninterface CmpTipProps {\n  active?: boolean;\n  payload?: Array<{ name: string; value: number; color: string }>;\n  label?: string;\n  formatter: (v: number) => string;\n}\n\nconst CmpTooltip: FC<CmpTipProps> = ({ active, payload, label, formatter }) => {\n  if (!active || !payload?.length) return null;\n  const curr = payload.find((p) => p.name === \"current\") ?? payload[0]!;\n  const prev = payload.find((p) => p.name === \"prev\")    ?? payload[1];\n  const delta = prev ? curr.value - prev.value : null;\n  const pct   = prev && prev.value !== 0\n    ? ((curr.value - prev.value) / Math.abs(prev.value)) * 100\n    : null;\n  const isUp = delta !== null && delta >= 0;\n  const trendColor = delta !== null ? (isUp ? \"#22c55e\" : \"#ef4444\") : undefined;\n  return (\n    <div style={chartTooltipContentStyle}>\n      <p style={{ ...chartTooltipLabelStyle, marginBottom: 6 }}>{label}</p>\n      {payload.map((p) => (\n        <p key={p.name} style={{ ...chartTooltipItemStyle, color: p.color }}>\n          {p.name === \"current\" ? \"Current\" : \"Previous\"}:{\" \"}\n          <span style={{ fontWeight: 700 }}>{formatter(p.value)}</span>\n        </p>\n      ))}\n      {delta !== null && pct !== null && (\n        <div style={{ marginTop: 8, paddingTop: 6, borderTop: \"1px solid rgba(128,128,128,0.2)\" }}>\n          <p style={{ ...chartTooltipItemStyle, fontWeight: 700, color: trendColor }}>\n            {isUp ? \"▲\" : \"▼\"} {isUp ? \"+\" : \"\"}{formatter(Math.abs(delta))}\n          </p>\n          <p style={{ ...chartTooltipItemStyle, fontWeight: 600, color: trendColor, fontSize: 11 }}>\n            {isUp ? \"+\" : \"\"}{pct.toFixed(1)}% vs prev\n          </p>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ── WaterfallChart ─────────────────────────────────────────────────────────────\n\ninterface WFChartProps { data: WFPoint[]; formatter: (v: number) => string; }\n\nexport const WaterfallChart: FC<WFChartProps> = ({ data, formatter }) => {\n  const { xProps, yProps, gridProps } = ax(formatter);\n  return (\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      <ComposedChart data={data} barSize={46} barCategoryGap=\"20%\" margin={{ top: 16, right: 16, left: 0, bottom: 0 }}>\n        <CartesianGrid {...gridProps} />\n        <XAxis dataKey=\"name\" {...xProps} />\n        <YAxis {...yProps} />\n        <Tooltip\n          wrapperStyle={chartTooltipWrapperStyle}\n          cursor={{ fill: \"var(--ds-color-accent)\", fillOpacity: 0.06 }}\n          content={(p) => <WFTooltip {...(p as unknown as WFTipProps)} formatter={formatter} />}\n        />\n        <Bar dataKey=\"base\" stackId=\"wf\" fill=\"transparent\" legendType=\"none\" />\n        <Bar dataKey=\"delta\" stackId=\"wf\" radius={[4, 4, 0, 0]}>\n          {data.map((e, i) => <Cell key={i} fill={WF_COLOR[e.role]} fillOpacity={0.9} />)}\n        </Bar>\n      </ComposedChart>\n    </ResponsiveContainer>\n  );\n};\n\n// ── SingleTabChart ─────────────────────────────────────────────────────────────\n\ninterface SingleProps {\n  data: PLDataPoint[];\n  chartType: \"area\" | \"bar\" | \"line\";\n  color: string;\n  formatter: (v: number) => string;\n  label: string;\n}\n\nexport const SingleTabChart: FC<SingleProps> = ({ data, chartType, color, formatter, label }) => {\n  const { xProps, yProps, gridProps } = ax(formatter);\n  const tip = (\n    <Tooltip\n      wrapperStyle={chartTooltipWrapperStyle}\n      cursor={{ fill: \"var(--ds-color-accent)\", fillOpacity: 0.06 }}\n      contentStyle={chartTooltipContentStyle}\n      itemStyle={chartTooltipItemStyle}\n      labelStyle={chartTooltipLabelStyle}\n      formatter={(v) => [formatter(Number(v)), label]}\n    />\n  );\n\n  if (chartType === \"area\") return (\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      <AreaChart data={data} margin={{ top: 16, right: 16, left: 0, bottom: 0 }}>\n        <CartesianGrid {...gridProps} />\n        <XAxis dataKey=\"name\" {...xProps} />\n        <YAxis {...yProps} />\n        {tip}\n        <Area\n          type=\"monotone\"\n          dataKey=\"value\"\n          stroke={color}\n          fill={color}\n          fillOpacity={0.12}\n          strokeWidth={2.5}\n          dot={false}\n          activeDot={{ r: 5, fill: color, stroke: \"var(--ds-color-bg-surface)\", strokeWidth: 2 }}\n        />\n      </AreaChart>\n    </ResponsiveContainer>\n  );\n\n  if (chartType === \"line\") return (\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      <LineChart data={data} margin={{ top: 16, right: 16, left: 0, bottom: 0 }}>\n        <CartesianGrid {...gridProps} />\n        <XAxis dataKey=\"name\" {...xProps} />\n        <YAxis {...yProps} />\n        {tip}\n        <Line\n          type=\"monotone\"\n          dataKey=\"value\"\n          stroke={color}\n          strokeWidth={2.5}\n          dot={false}\n          activeDot={{ r: 5, fill: color }}\n        />\n      </LineChart>\n    </ResponsiveContainer>\n  );\n\n  const barSize = data.length > 20 ? 10 : data.length > 14 ? 16 : data.length > 8 ? 22 : 36;\n  return (\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      <BarChart data={data} barSize={barSize} barCategoryGap=\"25%\" margin={{ top: 16, right: 16, left: 0, bottom: 0 }}>\n        <CartesianGrid {...gridProps} />\n        <XAxis dataKey=\"name\" {...xProps} />\n        <YAxis {...yProps} />\n        {tip}\n        <Bar dataKey=\"value\" radius={[4, 4, 0, 0]} fill={color} fillOpacity={0.85} />\n      </BarChart>\n    </ResponsiveContainer>\n  );\n};\n\n// ── ComparisonChart ────────────────────────────────────────────────────────────\n\ninterface CmpProps {\n  currentData: PLDataPoint[];\n  prevData: PLDataPoint[];\n  color: string;\n  formatter: (v: number) => string;\n  currentLabel: string;\n  prevLabel: string;\n}\n\nexport const ComparisonChart: FC<CmpProps> = ({ currentData, prevData, color, formatter }) => {\n  const merged = currentData.map((pt, i) => ({\n    name:    pt.name,\n    current: pt.value,\n    prev:    prevData[i]?.value ?? 0,\n  }));\n  const { xProps, yProps, gridProps } = ax(formatter);\n  const muted = \"var(--ds-color-fg-muted)\";\n  return (\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      <ComposedChart data={merged} margin={{ top: 16, right: 16, left: 0, bottom: 0 }}>\n        <defs>\n          <linearGradient id=\"cmp-curr\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"5%\"  stopColor={color} stopOpacity={0.18} />\n            <stop offset=\"95%\" stopColor={color} stopOpacity={0.02} />\n          </linearGradient>\n          <linearGradient id=\"cmp-prev\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"5%\"  stopColor={muted} stopOpacity={0.12} />\n            <stop offset=\"95%\" stopColor={muted} stopOpacity={0.01} />\n          </linearGradient>\n        </defs>\n        <CartesianGrid {...gridProps} />\n        <XAxis dataKey=\"name\" {...xProps} />\n        <YAxis {...yProps} />\n        <ReferenceLine y={0} stroke=\"var(--ds-color-border)\" strokeOpacity={0.4} />\n        <Tooltip\n          wrapperStyle={chartTooltipWrapperStyle}\n          cursor={{ stroke: \"var(--ds-color-border)\", strokeWidth: 1, strokeDasharray: \"4 2\" }}\n          content={(p) => <CmpTooltip {...(p as unknown as CmpTipProps)} formatter={formatter} />}\n        />\n        {/* prev area behind current */}\n        <Area\n          type=\"monotone\"\n          dataKey=\"prev\"\n          name=\"prev\"\n          stroke={muted}\n          strokeWidth={1.5}\n          strokeDasharray=\"5 4\"\n          fill=\"url(#cmp-prev)\"\n          dot={false}\n          activeDot={{ r: 4, fill: muted, stroke: \"var(--ds-color-bg-surface)\", strokeWidth: 2 }}\n        />\n        {/* current area in front */}\n        <Area\n          type=\"monotone\"\n          dataKey=\"current\"\n          name=\"current\"\n          stroke={color}\n          strokeWidth={2.5}\n          fill=\"url(#cmp-curr)\"\n          dot={false}\n          activeDot={{ r: 5, fill: color, stroke: \"var(--ds-color-bg-surface)\", strokeWidth: 2 }}\n        />\n      </ComposedChart>\n    </ResponsiveContainer>\n  );\n};\n","\"use client\";\n\nimport { type FC } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { DatePicker } from \"../../forms/date-picker\";\nimport { Select } from \"../../forms/select\";\nimport { EllipsisVerticalIcon } from \"../../icons/EllipsisVerticalIcon\";\n\nimport type { DateRangeValue } from \"../../forms/date-picker/types\";\nimport type { PLPeriod } from \"./FinancialPLCard\";\n\n// ── i18n ───────────────────────────────────────────────────────────────────────\n\nexport interface PLCardLabels {\n  overview?: string;\n  compare?: string;\n  /** The \"vs\" separator between period selects. */\n  compareTo?: string;\n  /** aria-label for the ⋮ menu button. */\n  moreOptions?: string;\n  dateRangePlaceholder?: string;\n  comparisonDateRangePlaceholder?: string;\n  periods?: {\n    today?: string;\n    yesterday?: string;\n    thisWeek?: string;\n    thisMonth?: string;\n    thisYear?: string;\n    custom?: string;\n  };\n}\n\n// ── Constants ──────────────────────────────────────────────────────────────────\n\nexport const PERIOD_OPTS = [\n  { value: \"today\",      label: \"Today\"      },\n  { value: \"yesterday\",  label: \"Yesterday\"  },\n  { value: \"this-week\",  label: \"This Week\"  },\n  { value: \"this-month\", label: \"This Month\" },\n  { value: \"this-year\",  label: \"This Year\"  },\n  { value: \"custom\",     label: \"Custom\"     },\n] satisfies { value: PLPeriod; label: string }[];\n\nconst PERIOD_KEY_MAP: Record<PLPeriod, keyof NonNullable<PLCardLabels[\"periods\"]>> = {\n  \"today\":       \"today\",\n  \"yesterday\":   \"yesterday\",\n  \"this-week\":   \"thisWeek\",\n  \"this-month\":  \"thisMonth\",\n  \"this-year\":   \"thisYear\",\n  \"custom\":      \"custom\",\n};\n\n// ── Types ──────────────────────────────────────────────────────────────────────\n\nexport interface PLCardHeaderProps {\n  title: string;\n  subtitle?: string;\n  showPeriodFilter: boolean;\n  activePeriod: PLPeriod;\n  onPeriodChange: (v: PLPeriod) => void;\n  activeRange: DateRangeValue;\n  onRangeChange: (r: DateRangeValue) => void;\n  canOverview: boolean;\n  isOverviewOn: boolean;\n  onToggleOverview: () => void;\n  showComparison: boolean;\n  isCompOn: boolean;\n  onToggleComparison: () => void;\n  activeCmpPeriod: PLPeriod;\n  onCmpPeriodChange: (v: PLPeriod) => void;\n  activeCmpRange: DateRangeValue;\n  onCmpRangeChange: (r: DateRangeValue) => void;\n  onMenuClick?: () => void;\n  labels?: PLCardLabels;\n}\n\n// ── Helpers ────────────────────────────────────────────────────────────────────\n\nfunction ctrlBtn(active: boolean) {\n  return [\n    \"rounded-lg border px-2.5 py-1 text-xs font-semibold transition-colors\",\n    active\n      ? \"border-ds-accent bg-ds-accent-subtle text-ds-accent\"\n      : \"border-ds-border-2 bg-ds-surface-2 text-ds-2 hover:border-ds-border-1 hover:bg-ds-surface-3 hover:text-ds-1\",\n  ].join(\" \");\n}\n\n// ── PLCardHeader ───────────────────────────────────────────────────────────────\n\nexport const PLCardHeader: FC<PLCardHeaderProps> = ({\n  title,\n  subtitle,\n  showPeriodFilter,\n  activePeriod,\n  onPeriodChange,\n  activeRange,\n  onRangeChange,\n  canOverview,\n  isOverviewOn,\n  onToggleOverview,\n  showComparison,\n  isCompOn,\n  onToggleComparison,\n  activeCmpPeriod,\n  onCmpPeriodChange,\n  activeCmpRange,\n  onCmpRangeChange,\n  onMenuClick,\n  labels,\n}) => {\n  const showCmpSelect     = showComparison && isCompOn && !isOverviewOn;\n  const showDatePicker    = showPeriodFilter && activePeriod === \"custom\";\n  const showCmpDatePicker = showCmpSelect && activeCmpPeriod === \"custom\";\n\n  const periodOpts = PERIOD_OPTS.map((opt) => ({\n    ...opt,\n    label: labels?.periods?.[PERIOD_KEY_MAP[opt.value]] ?? opt.label,\n  }));\n\n  return (\n    <>\n      {/* Row 1: title + menu */}\n      <div className=\"flex items-start justify-between px-5 pb-1 pt-4\">\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={labels?.moreOptions ?? \"More options\"}\n          onClick={onMenuClick}\n        >\n          <EllipsisVerticalIcon width={18} height={18} />\n        </Button>\n      </div>\n\n      {/* Row 2: selects left · buttons right */}\n      <div className=\"flex items-center justify-between gap-2 px-5 pb-3 pt-1\">\n        {/* Left — period selects */}\n        <div className=\"flex flex-wrap items-center gap-1.5\">\n          {showPeriodFilter && (\n            <Select\n              options={periodOpts}\n              value={activePeriod}\n              onChange={(e) => onPeriodChange(e.target.value as PLPeriod)}\n              size=\"compact\"\n              selectionIndicator=\"none\"\n              containerClassName=\"w-[118px]\"\n              aria-label=\"Filter by period\"\n            />\n          )}\n          {showCmpSelect && (\n            <div className=\"flex items-center gap-1.5\">\n              <span className=\"text-xs text-ds-3\">{labels?.compareTo ?? \"vs\"}</span>\n              <Select\n                options={periodOpts}\n                value={activeCmpPeriod}\n                onChange={(e) => onCmpPeriodChange(e.target.value as PLPeriod)}\n                size=\"compact\"\n                selectionIndicator=\"none\"\n                containerClassName=\"w-[118px]\"\n                aria-label=\"Comparison period\"\n              />\n            </div>\n          )}\n        </div>\n\n        {/* Right — action buttons */}\n        <div className=\"flex items-center gap-1.5\">\n          {canOverview && (\n            <Button\n              variant=\"tertiary\"\n              size=\"small\"\n              onClick={onToggleOverview}\n              aria-pressed={isOverviewOn}\n              className={ctrlBtn(isOverviewOn)}\n            >\n              {labels?.overview ?? \"Overview\"}\n            </Button>\n          )}\n          {showComparison && (\n            <Button\n              variant=\"tertiary\"\n              size=\"small\"\n              onClick={onToggleComparison}\n              aria-pressed={isCompOn && !isOverviewOn}\n              className={ctrlBtn(isCompOn && !isOverviewOn)}\n            >\n              {labels?.compare ?? \"Compare\"}\n            </Button>\n          )}\n        </div>\n      </div>\n\n      {/* Row 3: date range pickers — shown when period or comparison period = custom */}\n      {(showDatePicker || showCmpDatePicker) && (\n        <div className=\"flex items-center gap-2 px-5 pb-2\">\n          {showDatePicker && (\n            <div className=\"flex-1 min-w-0\">\n              <DatePicker\n                mode=\"range\"\n                value={activeRange}\n                onChange={(v) => {\n                  if (v && typeof v === \"object\" && \"start\" in v) {\n                    onRangeChange(v as DateRangeValue);\n                  }\n                }}\n                placeholder={labels?.dateRangePlaceholder ?? \"Pick a date range\"}\n              />\n            </div>\n          )}\n          {showCmpDatePicker && (\n            <div className=\"flex-1 min-w-0\">\n              <DatePicker\n                mode=\"range\"\n                value={activeCmpRange}\n                onChange={(v) => {\n                  if (v && typeof v === \"object\" && \"start\" in v) {\n                    onCmpRangeChange(v as DateRangeValue);\n                  }\n                }}\n                placeholder={labels?.comparisonDateRangePlaceholder ?? \"Compare date range\"}\n              />\n            </div>\n          )}\n        </div>\n      )}\n    </>\n  );\n};\n","\"use client\";\n\nimport { type FC } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\n\nimport type { PLMetricTab, PLPeriod } from \"./FinancialPLCard\";\n\n// ── Types ──────────────────────────────────────────────────────────────────────\n\nexport interface PLKpiStripProps {\n  metrics: PLMetricTab[];\n  activeId: string;\n  isOverviewOn: boolean;\n  activePeriod: PLPeriod;\n  onMetricChange: (id: string) => void;\n}\n\n// ── PLKpiStrip ─────────────────────────────────────────────────────────────────\n\nexport const PLKpiStrip: FC<PLKpiStripProps> = ({\n  metrics,\n  activeId,\n  isOverviewOn,\n  activePeriod,\n  onMetricChange,\n}) => (\n  <div className=\"flex border-b border-ds-border-3/60 px-5 pb-0\">\n    {metrics.map((m, idx) => {\n      const isActive = !isOverviewOn && m.id === activeId;\n      const key = activePeriod !== \"custom\"\n        ? (activePeriod as Exclude<PLPeriod, \"custom\">)\n        : undefined;\n      const val    = (key && m.valueByPeriod?.[key])    ?? m.value;\n      const change = (key && m.changeByPeriod?.[key])   ?? m.change;\n      const color  = m.color ?? \"var(--ds-color-accent)\";\n\n      return (\n        <div key={m.id} className=\"group relative flex-1\">\n          <Button\n            variant=\"tertiary\"\n            onClick={() => onMetricChange(m.id)}\n            aria-pressed={isActive}\n            className={mergeClassNames(\n              \"flex! w-full flex-col! gap-0.5 border-b-2 px-1! pb-3! pt-2! text-left transition-colors\",\n              \"first:pl-0 hover:bg-ds-surface-2/60\",\n              \"focus-visible:outline focus-visible:outline-2 focus-visible:outline-ds-accent focus-visible:outline-offset-[-2px]\",\n              isActive ? \"border-b-current\" : \"border-transparent\",\n            )}\n            style={isActive ? { color } : { color: \"transparent\" }}\n          >\n            <span className=\"flex items-center gap-1 text-[11px] font-medium text-ds-3\">\n              {m.label}\n              {m.tooltip && (\n                <span\n                  className=\"inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full bg-ds-border-2 text-[9px] leading-none text-ds-3\"\n                  aria-hidden=\"true\"\n                >\n                  ?\n                </span>\n              )}\n            </span>\n            <span className=\"text-base font-bold leading-tight text-ds-1\">{val}</span>\n            {change !== undefined && (\n              <span\n                className=\"text-[11px] font-semibold\"\n                style={{ color: change >= 0 ? \"#22c55e\" : \"#ef4444\" }}\n              >\n                {change >= 0 ? \"▲\" : \"▼\"} {change >= 0 ? \"+\" : \"\"}{change.toFixed(1)}%\n                {m.changeLabel && (\n                  <span className=\"ml-1 font-normal text-ds-3\">{m.changeLabel}</span>\n                )}\n              </span>\n            )}\n          </Button>\n\n          {/* Hover tooltip */}\n          {m.tooltip && (\n            <div\n              role=\"tooltip\"\n              className={mergeClassNames(\n                \"pointer-events-none absolute bottom-full z-30 mb-2 hidden w-48\",\n                \"rounded-lg border border-ds-border-2 bg-ds-surface-1 p-3 shadow-lg group-hover:block\",\n                // edge alignment: first tab flush left, last flush right, rest centered\n                idx === 0\n                  ? \"left-0\"\n                  : idx === metrics.length - 1\n                  ? \"right-0\"\n                  : \"left-1/2 -translate-x-1/2\",\n              )}\n            >\n              <p className=\"mb-1 text-xs font-semibold text-ds-1\">{m.label}</p>\n              <p className=\"text-[11px] leading-relaxed text-ds-2\">{m.tooltip}</p>\n            </div>\n          )}\n        </div>\n      );\n    })}\n  </div>\n);\n","\"use client\";\n\nimport type { FC } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nimport type { WFPoint } from \"./_PLCharts\";\n\n// ── Colors ────────────────────────────────────────────────────────────────────\n\nconst ROLE_COLOR = {\n  add:      \"#22c55e\",\n  subtract: \"#ef4444\",\n  total:    \"var(--ds-color-accent)\",\n} as const;\n\nconst ROLE_BG = {\n  add:      \"rgba(34,197,94,0.10)\",\n  subtract: \"rgba(239,68,68,0.08)\",\n  total:    \"color-mix(in srgb, var(--ds-color-accent) 10%, transparent)\",\n} as const;\n\nconst ROLE_SIGN = { add: \"+\", subtract: \"−\", total: \"=\" } as const;\n\n// ── PLOverview ────────────────────────────────────────────────────────────────\n\ninterface PLOverviewProps {\n  data: WFPoint[];\n  formatter: (v: number) => string;\n}\n\nexport const PLOverview: FC<PLOverviewProps> = ({ data, formatter }) => {\n  const denom = data.find((d) => d.role === \"add\")?.delta ?? 1;\n\n  return (\n    <div className=\"flex flex-col px-4 py-2\">\n      {data.map((step, i) => {\n        const isTotal = step.role === \"total\";\n        const pct = Math.round((step.delta / denom) * 100);\n        const prevWasSubtract = i > 0 && data[i - 1]?.role === \"subtract\";\n\n        return (\n          <div key={`${step.name}-${i}`}>\n            {isTotal && prevWasSubtract && (\n              <div className=\"my-2 border-t border-ds-border-2/70\" />\n            )}\n            <div\n              className={mergeClassNames(\n                \"flex items-center gap-3 rounded-lg px-3 py-2.5\",\n                isTotal ? \"\" : \"opacity-90\",\n              )}\n              style={{ backgroundColor: isTotal ? ROLE_BG[step.role] : undefined }}\n            >\n              {/* Role sign */}\n              <span\n                className=\"w-4 shrink-0 text-center text-sm font-bold tabular-nums\"\n                style={{ color: ROLE_COLOR[step.role] }}\n                aria-hidden=\"true\"\n              >\n                {ROLE_SIGN[step.role]}\n              </span>\n\n              {/* Label */}\n              <span\n                className={mergeClassNames(\n                  \"w-28 shrink-0 text-sm\",\n                  isTotal ? \"font-semibold text-ds-1\" : \"font-medium text-ds-2\",\n                )}\n              >\n                {step.name}\n              </span>\n\n              {/* Proportion bar */}\n              <div className=\"h-1.5 flex-1 overflow-hidden rounded-full bg-ds-border-3/25\">\n                <div\n                  className=\"h-full rounded-full transition-[width] duration-700 ease-out\"\n                  style={{\n                    width:           `${Math.min(100, pct)}%`,\n                    backgroundColor: ROLE_COLOR[step.role],\n                    opacity:         isTotal ? 1 : 0.65,\n                  }}\n                  aria-hidden=\"true\"\n                />\n              </div>\n\n              {/* Value */}\n              <span\n                className={mergeClassNames(\n                  \"w-20 shrink-0 text-right text-sm tabular-nums\",\n                  isTotal ? \"font-bold\" : \"font-medium text-ds-2\",\n                )}\n                style={isTotal ? { color: ROLE_COLOR[step.role] } : undefined}\n              >\n                {step.role === \"subtract\" ? \"−\" : \"\"}{formatter(step.delta)}\n              </span>\n\n              {/* Margin badge — total rows only */}\n              {isTotal ? (\n                <span\n                  className=\"w-14 shrink-0 rounded-full px-2 py-0.5 text-center text-[10px] font-bold\"\n                  style={{\n                    color:           ROLE_COLOR[step.role],\n                    backgroundColor: ROLE_BG[step.role],\n                    border:          `1px solid color-mix(in srgb, ${ROLE_COLOR[step.role]} 35%, transparent)`,\n                  }}\n                >\n                  {pct}%\n                </span>\n              ) : (\n                <span className=\"w-14 shrink-0\" aria-hidden=\"true\" />\n              )}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n","\"use client\";\n\nimport { useMemo, useState, type FC } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\nimport { buildWaterfallData, ComparisonChart, SingleTabChart } from \"./_PLCharts\";\nimport { PLCardHeader } from \"./_PLCardHeader\";\nimport { PLKpiStrip } from \"./_PLKpiStrip\";\nimport { PLOverview } from \"./_PLOverview\";\n\nimport type { DateRangeValue } from \"../../forms/date-picker/types\";\nimport type { PLCardLabels } from \"./_PLCardHeader\";\n\n// ── Types ──────────────────────────────────────────────────────────────────────\n\nexport type PLPeriod =\n  | \"today\" | \"yesterday\" | \"this-week\" | \"this-month\" | \"this-year\" | \"custom\";\n\nexport type PLWaterfallRole = \"add\" | \"subtract\" | \"total\";\n\nexport interface PLDataPoint { name: string; value: number; }\n\ntype ByPeriod<T> = Partial<Record<Exclude<PLPeriod, \"custom\">, T>>;\n\nexport interface PLMetricTab {\n  id: string;\n  label: string;\n  /** Pre-formatted headline, e.g. \"$2.47M\". */\n  value: string;\n  valueByPeriod?: ByPeriod<string>;\n  /** Raw number used by waterfall builder. */\n  rawValue: number;\n  change?: number;\n  changeByPeriod?: ByPeriod<number>;\n  changeLabel?: string;\n  /** Accent color for KPI pill + chart. Falls back to ds-color-accent. */\n  color?: string;\n  chartType?: \"area\" | \"bar\" | \"line\";\n  chartData: PLDataPoint[];\n  chartDataByPeriod?: ByPeriod<PLDataPoint[]>;\n  comparisonChartData?: PLDataPoint[];\n  comparisonChartDataByPeriod?: ByPeriod<PLDataPoint[]>;\n  yAxisFormatter?: (v: number) => string;\n  /** Label shown for the comparison series in the tooltip. */\n  comparisonLabel?: string;\n  /** Short description shown in a hover tooltip on the KPI tab. */\n  tooltip?: string;\n}\n\nexport interface PLWaterfallStep {\n  /** Reference a PLMetricTab by id to read its rawValue. */\n  metricId?: string;\n  /** Or provide the value directly (e.g. for OpEx not in the metric list). */\n  rawValue?: number;\n  label: string;\n  role: PLWaterfallRole;\n}\n\nexport interface FinancialPLCardProps {\n  title?: string;\n  subtitle?: string;\n  metrics: PLMetricTab[];\n  selectedMetricId?: string;\n  defaultMetricId?: string;\n  onMetricChange?: (id: string) => void;\n  /** Card-level formatter — used when a tab has no yAxisFormatter. */\n  yAxisFormatter?: (v: number) => string;\n  /** Defines the overview-mode waterfall. Required to show the Overview button. */\n  waterfallSteps?: PLWaterfallStep[];\n  showPeriodFilter?: boolean;\n  periodFilter?: PLPeriod;\n  defaultPeriodFilter?: PLPeriod;\n  onPeriodFilterChange?: (v: PLPeriod) => void;\n  customDateRange?: DateRangeValue;\n  onCustomDateRangeChange?: (r: DateRangeValue) => void;\n  showComparison?: boolean;\n  comparisonPeriod?: PLPeriod;\n  defaultComparisonPeriod?: PLPeriod;\n  onComparisonPeriodChange?: (v: PLPeriod) => void;\n  comparisonCustomDateRange?: DateRangeValue;\n  onComparisonCustomDateRangeChange?: (r: DateRangeValue) => void;\n  comparisonActive?: boolean;\n  defaultComparisonActive?: boolean;\n  onComparisonActiveChange?: (v: boolean) => void;\n  overviewActive?: boolean;\n  defaultOverviewActive?: boolean;\n  onOverviewActiveChange?: (v: boolean) => void;\n  labels?: PLCardLabels;\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ── Helpers ────────────────────────────────────────────────────────────────────\n\nfunction defaultFmt(v: number): string {\n  return v >= 1_000_000 ? `$${(v / 1_000_000).toFixed(1)}M`\n    : v >= 1_000 ? `$${Math.round(v / 1_000)}k`\n    : `$${v}`;\n}\n\n// ── FinancialPLCard ────────────────────────────────────────────────────────────\n\nexport const FinancialPLCard: FC<FinancialPLCardProps> = ({\n  title = \"P&L Report\",\n  subtitle = \"Full Financial Overview\",\n  metrics,\n  selectedMetricId,\n  defaultMetricId,\n  onMetricChange,\n  yAxisFormatter = defaultFmt,\n  waterfallSteps,\n  showPeriodFilter = false,\n  periodFilter,\n  defaultPeriodFilter = \"this-month\",\n  onPeriodFilterChange,\n  customDateRange,\n  onCustomDateRangeChange,\n  showComparison = false,\n  comparisonPeriod,\n  defaultComparisonPeriod = \"this-year\",\n  onComparisonPeriodChange,\n  comparisonCustomDateRange,\n  onComparisonCustomDateRangeChange,\n  comparisonActive,\n  defaultComparisonActive = false,\n  onComparisonActiveChange,\n  overviewActive,\n  defaultOverviewActive = false,\n  onOverviewActiveChange,\n  labels,\n  className,\n  onMenuClick,\n}) => {\n  const [intMetricId,  setIntMetricId]  = useState(defaultMetricId ?? metrics[0]?.id ?? \"\");\n  const [intPeriod,    setIntPeriod]    = useState<PLPeriod>(defaultPeriodFilter);\n  const [intRange,     setIntRange]     = useState<DateRangeValue>({ start: null, end: null });\n  const [intCmpPeriod, setIntCmpPeriod] = useState<PLPeriod>(defaultComparisonPeriod);\n  const [intCmpRange,  setIntCmpRange]  = useState<DateRangeValue>({ start: null, end: null });\n  const [intCmpActive, setIntCmpActive] = useState(defaultComparisonActive);\n  const [intOverview,  setIntOverview]  = useState(defaultOverviewActive);\n\n  const activeId        = selectedMetricId        ?? intMetricId;\n  const activePeriod    = periodFilter            ?? intPeriod;\n  const activeRange     = customDateRange         ?? intRange;\n  const activeCmpPeriod = comparisonPeriod        ?? intCmpPeriod;\n  const activeCmpRange  = comparisonCustomDateRange ?? intCmpRange;\n  const isCompOn        = comparisonActive        ?? intCmpActive;\n  const isOverviewOn    = overviewActive          ?? intOverview;\n\n  const activeMetric = metrics.find((m) => m.id === activeId) ?? metrics[0]!;\n  const fmt          = activeMetric.yAxisFormatter ?? yAxisFormatter;\n\n  function handleMetricChange(id: string) {\n    if (selectedMetricId === undefined) setIntMetricId(id);\n    onMetricChange?.(id);\n    if (isOverviewOn) toggleOverview();\n  }\n  function toggleOverview() {\n    const next = !isOverviewOn;\n    if (overviewActive === undefined) setIntOverview(next);\n    onOverviewActiveChange?.(next);\n  }\n  function toggleComparison() {\n    const next = !isCompOn;\n    if (comparisonActive === undefined) setIntCmpActive(next);\n    onComparisonActiveChange?.(next);\n    // Enabling compare exits overview mode\n    if (next && isOverviewOn) {\n      if (overviewActive === undefined) setIntOverview(false);\n      onOverviewActiveChange?.(false);\n    }\n  }\n\n  const chartData = useMemo((): PLDataPoint[] => {\n    if (showPeriodFilter && activePeriod !== \"custom\") {\n      const p = activeMetric.chartDataByPeriod?.[activePeriod as Exclude<PLPeriod, \"custom\">];\n      if (p) return p;\n    }\n    return activeMetric.chartData;\n  }, [activeMetric, activePeriod, showPeriodFilter]);\n\n  const cmpData = useMemo((): PLDataPoint[] => {\n    if (!showComparison) return [];\n    if (activeCmpPeriod !== \"custom\") {\n      const p = activeMetric.comparisonChartDataByPeriod?.[activeCmpPeriod as Exclude<PLPeriod, \"custom\">];\n      if (p) return p;\n    }\n    return activeMetric.comparisonChartData ?? [];\n  }, [activeMetric, activeCmpPeriod, showComparison]);\n\n  const isComparing  = !isOverviewOn && showComparison && isCompOn && cmpData.length > 0;\n  const waterfallData = useMemo(\n    () => (waterfallSteps ? buildWaterfallData(waterfallSteps, metrics) : null),\n    [waterfallSteps, metrics],\n  );\n  const canOverview = Boolean(waterfallSteps && waterfallData);\n\n  return (\n    <div className={mergeClassNames(\"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\", className)}>\n\n      <PLCardHeader\n        title={title}\n        subtitle={subtitle}\n        showPeriodFilter={showPeriodFilter}\n        activePeriod={activePeriod}\n        onPeriodChange={(v) => { if (periodFilter === undefined) setIntPeriod(v); onPeriodFilterChange?.(v); }}\n        activeRange={activeRange}\n        onRangeChange={(r) => { if (customDateRange === undefined) setIntRange(r); onCustomDateRangeChange?.(r); }}\n        canOverview={canOverview}\n        isOverviewOn={isOverviewOn}\n        onToggleOverview={toggleOverview}\n        showComparison={showComparison}\n        isCompOn={isCompOn}\n        onToggleComparison={toggleComparison}\n        activeCmpPeriod={activeCmpPeriod}\n        onCmpPeriodChange={(v) => { if (comparisonPeriod === undefined) setIntCmpPeriod(v); onComparisonPeriodChange?.(v); }}\n        activeCmpRange={activeCmpRange}\n        onCmpRangeChange={(r) => { if (comparisonCustomDateRange === undefined) setIntCmpRange(r); onComparisonCustomDateRangeChange?.(r); }}\n        onMenuClick={onMenuClick}\n        labels={labels}\n      />\n\n      <PLKpiStrip\n        metrics={metrics}\n        activeId={activeId}\n        isOverviewOn={isOverviewOn}\n        activePeriod={activePeriod}\n        onMetricChange={handleMetricChange}\n      />\n\n      {isOverviewOn && waterfallData ? (\n        <PLOverview data={waterfallData} formatter={yAxisFormatter} />\n      ) : (\n        <div className=\"px-2 pb-5 pt-3\" style={{ height: 296 }}>\n          {isComparing ? (\n            <ComparisonChart\n              currentData={chartData}\n              prevData={cmpData}\n              color={activeMetric.color ?? \"var(--ds-color-accent)\"}\n              formatter={fmt}\n              currentLabel={activeMetric.label}\n              prevLabel={activeMetric.comparisonLabel ?? \"prev.\"}\n            />\n          ) : (\n            <SingleTabChart\n              data={chartData}\n              chartType={activeMetric.chartType ?? \"area\"}\n              color={activeMetric.color ?? \"var(--ds-color-accent)\"}\n              formatter={fmt}\n              label={activeMetric.label}\n            />\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n","\"use client\";\n\nimport { useMemo, type FC } from \"react\";\n\nimport { BarBreakdownCard } from \"./BarBreakdownCard\";\nimport { IncomeExpenseCard } from \"./IncomeExpenseCard\";\nimport { StockAvailabilityCard } from \"./StockAvailabilityCard\";\nimport { TopSellingItemsCard } from \"./TopSellingItemsCard\";\nimport type { TopSellingItem } from \"./TopSellingItemsCard\";\n\n// ── i18n ──────────────────────────────────────────────────────────────────────\n\nexport interface InventoryCardsLabels {\n  costVsRevenueTitle?: string;       // \"Cost vs Revenue by Category\"\n  totalCostLabel?: string;           // \"Total Cost\"\n  potentialRevLabel?: string;        // \"Potential Rev\"\n  grossMarginLabel?: string;         // \"Gross Margin\"\n  needsReorderLabel?: string;        // \"Needs Reorder\"\n  buyCostLabel?: string;             // \"Buy Cost\"\n  sellRevenueLabel?: string;         // \"Sell Revenue\"\n  currentStockPeriod?: string;       // \"Current Stock\"\n  stockValueTitle?: string;          // \"Stock Value by Category\"\n  topProfitTitle?: string;           // \"Top Profit Potential\"\n  topProfitSubtitle?: string;        // \"Ranked by profit if all units sold\"\n  byProfitLabel?: string;            // \"By Profit\"\n  byUnitsLabel?: string;             // \"By Units\"\n}\n\n// ── Public types ──────────────────────────────────────────────────────────────\n\nexport interface InventoryCardRow {\n  id: string;\n  name: string;\n  category: string;\n  qty: number;\n  totalCost: number;\n  potentialRevenue: number;\n  potentialProfit: number;\n  status: \"ok\" | \"low\" | \"out\";\n  /** % change vs previous period, e.g. 12 = +12%, -8 = -8% */\n  qtyTrend?: number;\n  profitTrend?: number;\n}\n\nexport interface InventoryCardsProps {\n  rows: InventoryCardRow[];\n  /** Map of full category name → short axis label. */\n  categoryLabels?: Record<string, string>;\n  /** Overall revenue % change vs previous period — drives green/red badge. */\n  revenueChangePct?: number;\n  /** Overall cost % change vs previous period. */\n  costChangePct?: number;\n  /** Gross margin % change vs previous period. */\n  marginChangePct?: number;\n  labels?: InventoryCardsLabels;\n  className?: string;\n}\n\n// ── Helpers ───────────────────────────────────────────────────────────────────\n\nfunction pctBadge(pct: number) {\n  return {\n    value:     `${pct >= 0 ? \"+\" : \"\"}${pct.toFixed(1)}%`,\n    direction: (pct >= 0 ? \"up\" : \"down\") as \"up\" | \"down\",\n  };\n}\n\n// ── InventoryCards ────────────────────────────────────────────────────────────\n\nexport const InventoryCards: FC<InventoryCardsProps> = ({\n  rows,\n  categoryLabels = {},\n  revenueChangePct,\n  costChangePct,\n  marginChangePct,\n  labels,\n  className,\n}) => {\n  const barCategories = [\n    { key: \"cost\",    label: labels?.buyCostLabel    ?? \"Buy Cost\",     color: \"#6366f1\" },\n    { key: \"revenue\", label: labels?.sellRevenueLabel ?? \"Sell Revenue\", color: \"#22c55e\" },\n  ];\n  const d = useMemo(() => {\n    const okCount  = rows.filter((r) => r.status === \"ok\").length;\n    const lowCount = rows.filter((r) => r.status === \"low\").length;\n    const outCount = rows.filter((r) => r.status === \"out\").length;\n    const n = rows.length || 1;\n\n    const lowStockItems = rows\n      .filter((r) => r.status !== \"ok\")\n      .map((r) => ({ id: r.id, name: r.name, qty: r.qty }));\n\n    const catMap = new Map<string, { cost: number; revenue: number }>();\n    for (const r of rows) {\n      const prev = catMap.get(r.category) ?? { cost: 0, revenue: 0 };\n      catMap.set(r.category, {\n        cost:    prev.cost    + r.totalCost,\n        revenue: prev.revenue + r.potentialRevenue,\n      });\n    }\n    const cats = [...catMap.entries()];\n\n    const shortLabel = (cat: string) =>\n      categoryLabels[cat] ?? (cat.length > 8 ? `${cat.slice(0, 7)}.` : cat);\n\n    const barData = cats.map(([cat, v]) => ({\n      name:    shortLabel(cat),\n      cost:    Math.round(v.cost),\n      revenue: Math.round(v.revenue),\n    }));\n\n    let maxRevCat = \"\";\n    let maxRev = 0;\n    for (const [cat, v] of cats) {\n      if (v.revenue > maxRev) { maxRev = v.revenue; maxRevCat = shortLabel(cat); }\n    }\n\n    const incomeData = cats.map(([cat, v]) => ({\n      month:       shortLabel(cat),\n      income:      Math.round(v.revenue),\n      expense:     Math.round(v.cost),\n      highlighted: shortLabel(cat) === maxRevCat,\n    }));\n\n    const topItems: TopSellingItem[] = [...rows]\n      .sort((a, b) => b.potentialProfit - a.potentialProfit)\n      .slice(0, 5)\n      .map((r) => ({\n        id:           r.id,\n        name:         r.name,\n        category:     r.category,\n        qty:          r.qty,\n        revenue:      r.potentialProfit,\n        qtyTrend:     r.qtyTrend,\n        revenueTrend: r.profitTrend,\n      }));\n\n    const totalCost    = rows.reduce((s, r) => s + r.totalCost, 0);\n    const totalRevenue = rows.reduce((s, r) => s + r.potentialRevenue, 0);\n    const totalUnits   = rows.reduce((s, r) => s + r.qty, 0);\n    const grossMarginPct = totalRevenue > 0\n      ? Math.round(((totalRevenue - totalCost) / totalRevenue) * 100)\n      : 0;\n\n    return {\n      stock: {\n        totalAsset:   `€${Math.round(totalCost    / 1_000)}K`,\n        totalProduct: totalUnits,\n        availability: {\n          available:  Math.round((okCount  / n) * 100),\n          lowStock:   Math.round((lowCount / n) * 100),\n          outOfStock: Math.round((outCount / n) * 100),\n        },\n        lowStockItems,\n      },\n      barData,\n      incomeData,\n      topItems,\n      grossMarginPct,\n      lowStockCount: lowCount + outCount,\n      totalRevStr:  `€${Math.round(totalRevenue / 1_000)}K`,\n      totalCostStr: `€${Math.round(totalCost    / 1_000)}K`,\n    };\n  }, [rows, categoryLabels]);\n\n  return (\n    <div className={className}>\n      <div className=\"grid grid-cols-1 gap-4 md:grid-cols-3\">\n        <StockAvailabilityCard {...d.stock} />\n        <div className=\"md:col-span-2\">\n          <BarBreakdownCard\n            title={labels?.costVsRevenueTitle ?? \"Cost vs Revenue by Category\"}\n            variant=\"full\"\n            headlines={[\n              { label: labels?.totalCostLabel   ?? \"Total Cost\",    value: d.totalCostStr },\n              { label: labels?.potentialRevLabel ?? \"Potential Rev\", value: d.totalRevStr  },\n            ]}\n            metrics={[\n              {\n                label:   labels?.grossMarginLabel ?? \"Gross Margin\",\n                primary: `${d.grossMarginPct}%`,\n                badge:   marginChangePct !== undefined ? pctBadge(marginChangePct) : undefined,\n              },\n              {\n                label:   labels?.needsReorderLabel ?? \"Needs Reorder\",\n                primary: String(d.lowStockCount),\n              },\n            ]}\n            categories={barCategories}\n            data={d.barData}\n            periods={[labels?.currentStockPeriod ?? \"Current Stock\"]}\n            defaultPeriod={labels?.currentStockPeriod ?? \"Current Stock\"}\n          />\n        </div>\n      </div>\n\n      <div className=\"mt-4 grid grid-cols-1 gap-4 md:grid-cols-2\">\n        <IncomeExpenseCard\n          title={labels?.stockValueTitle ?? \"Stock Value by Category\"}\n          totalIncome={d.totalRevStr}\n          totalExpenses={d.totalCostStr}\n          incomeBadge={revenueChangePct  !== undefined ? pctBadge(revenueChangePct)  : undefined}\n          expensesBadge={costChangePct   !== undefined ? pctBadge(costChangePct)     : undefined}\n          data={d.incomeData}\n          periods={[labels?.currentStockPeriod ?? \"Current Stock\"]}\n          defaultPeriod={labels?.currentStockPeriod ?? \"Current Stock\"}\n        />\n        <TopSellingItemsCard\n          title={labels?.topProfitTitle ?? \"Top Profit Potential\"}\n          subtitle={labels?.topProfitSubtitle ?? \"Ranked by profit if all units sold\"}\n          items={d.topItems}\n          showTrend\n          defaultMetric=\"revenue\"\n          labels={{\n            byRevenueLabel: labels?.byProfitLabel ?? \"By Profit\",\n            byQtyLabel:     labels?.byUnitsLabel  ?? \"By Units\",\n          }}\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 SubscriptionTierHealth {\n  tier: string;\n  /** Number of active accounts on this tier. */\n  accounts: number;\n  /** Health score 0–100 (engagement + payment + retention composite). */\n  healthScore: number;\n  /** Churn rate % for this tier in the current period. */\n  churnRate: number;\n  /** Trend direction for health score. */\n  trend: \"up\" | \"down\" | \"flat\";\n  /** CSS color for gauge and label. */\n  color: string;\n}\n\nexport interface SubscriptionHealthCardProps {\n  title?: string;\n  subtitle?: string;\n  tiers?: SubscriptionTierHealth[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ── Default data ──────────────────────────────────────────────────────────────\n\nconst DEFAULT_TIERS: SubscriptionTierHealth[] = [\n  {\n    tier: \"Enterprise\",\n    accounts: 168,\n    healthScore: 94,\n    churnRate: 0.4,\n    trend: \"up\",\n    color: \"#7C3AED\",\n  },\n  {\n    tier: \"Pro\",\n    accounts: 431,\n    healthScore: 81,\n    churnRate: 1.2,\n    trend: \"up\",\n    color: \"#2563EB\",\n  },\n  {\n    tier: \"Starter\",\n    accounts: 720,\n    healthScore: 67,\n    churnRate: 2.8,\n    trend: \"flat\",\n    color: \"#0891B2\",\n  },\n  {\n    tier: \"Free\",\n    accounts: 1081,\n    healthScore: 44,\n    churnRate: 8.1,\n    trend: \"down\",\n    color: \"#64748B\",\n  },\n];\n\n// ── Mini circular gauge ───────────────────────────────────────────────────────\n\nconst MiniGauge: FC<{ score: number; color: string; size?: number }> = ({\n  score,\n  color,\n  size = 58,\n}) => {\n  const sw = 4;\n  const r = (size - sw * 2) / 2;\n  const cx = size / 2;\n  const cy = size / 2;\n  const circ = 2 * Math.PI * r;\n  const offset = circ - (Math.max(0, Math.min(100, score)) / 100) * circ;\n\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox={`0 0 ${size} ${size}`}\n      aria-hidden=\"true\"\n    >\n      <circle\n        cx={cx}\n        cy={cy}\n        r={r}\n        fill=\"none\"\n        stroke=\"var(--ds-color-border)\"\n        strokeWidth={sw}\n      />\n      <circle\n        cx={cx}\n        cy={cy}\n        r={r}\n        fill=\"none\"\n        stroke={color}\n        strokeWidth={sw}\n        strokeDasharray={circ}\n        strokeDashoffset={offset}\n        strokeLinecap=\"round\"\n        transform={`rotate(-90 ${cx} ${cy})`}\n      />\n      <text\n        x={cx}\n        y={cy}\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        fontSize={size * 0.22}\n        fontWeight=\"700\"\n        fill=\"var(--ds-color-fg)\"\n      >\n        {score}\n      </text>\n    </svg>\n  );\n};\n\n// ── Trend icon ────────────────────────────────────────────────────────────────\n\nconst TrendIcon: FC<{ trend: \"up\" | \"down\" | \"flat\" }> = ({ trend }) => {\n  if (trend === \"up\")\n    return <span className=\"text-[10px] font-bold text-emerald-500\">↑</span>;\n  if (trend === \"down\")\n    return <span className=\"text-[10px] font-bold text-red-500\">↓</span>;\n  return <span className=\"text-[10px] font-bold text-ds-3\">→</span>;\n};\n\n// ── SubscriptionHealthCard ────────────────────────────────────────────────────\n\nexport const SubscriptionHealthCard: FC<SubscriptionHealthCardProps> = ({\n  title = \"Subscription Health\",\n  subtitle = \"Health score by tier · lower churn = higher score\",\n  tiers = DEFAULT_TIERS,\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-1 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    {/* Tier list */}\n    <div className=\"divide-y divide-ds-border-3/50 px-5 pb-4\">\n      {tiers.map((t) => (\n        <div key={t.tier} className=\"flex items-center gap-4 py-3\">\n          <div className=\"shrink-0\">\n            <MiniGauge score={t.healthScore} color={t.color} />\n          </div>\n\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"flex items-center gap-1.5\">\n              <p className=\"text-sm font-semibold\" style={{ color: t.color }}>\n                {t.tier}\n              </p>\n              <TrendIcon trend={t.trend} />\n            </div>\n            <p className=\"mt-0.5 text-xs text-ds-3\">\n              {t.accounts.toLocaleString()} accounts · {t.churnRate}% churn\n            </p>\n          </div>\n\n          <span className=\"shrink-0 rounded-md bg-ds-surface-2 px-2 py-1 text-xs font-semibold text-ds-2\">\n            {t.healthScore}/100\n          </span>\n        </div>\n      ))}\n    </div>\n  </div>\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 ToolUsageSegment {\n  label: string;\n  /** Value shown in the row (e.g. \"48.2M calls\"). */\n  value: string;\n  /** Share of total usage (0–100). */\n  percentage: number;\n  color: string;\n  /** Icon node or emoji. */\n  icon: string;\n}\n\nexport interface ToolUsageOverviewCardProps {\n  title?: string;\n  subtitle?: string;\n  totalLabel?: string;\n  totalValue?: string;\n  segments?: ToolUsageSegment[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ── Default data ──────────────────────────────────────────────────────────────\n\nconst DEFAULT_SEGMENTS: ToolUsageSegment[] = [\n  {\n    label: \"API Calls\",\n    value: \"48.2M\",\n    percentage: 42,\n    color: \"#4F46E5\",\n    icon: \"⚡\",\n  },\n  {\n    label: \"Feature Activations\",\n    value: \"21.7M\",\n    percentage: 19,\n    color: \"#0891B2\",\n    icon: \"🔧\",\n  },\n  {\n    label: \"File Storage\",\n    value: \"18.3M\",\n    percentage: 16,\n    color: \"#059669\",\n    icon: \"📁\",\n  },\n  {\n    label: \"AI Completions\",\n    value: \"14.9M\",\n    percentage: 13,\n    color: \"#D97706\",\n    icon: \"🤖\",\n  },\n  {\n    label: \"Webhook Events\",\n    value: \"11.5M\",\n    percentage: 10,\n    color: \"#DC2626\",\n    icon: \"🔔\",\n  },\n];\n\n// ── ToolUsageOverviewCard ─────────────────────────────────────────────────────\n\nexport const ToolUsageOverviewCard: FC<ToolUsageOverviewCardProps> = ({\n  title = \"Platform Usage Overview\",\n  subtitle = \"All workspaces · current billing cycle\",\n  totalLabel = \"Total Events\",\n  totalValue = \"114.6M\",\n  segments = DEFAULT_SEGMENTS,\n  className,\n  onMenuClick,\n}) => {\n  const totalPct = segments.reduce((s, seg) => s + seg.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        <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      {/* Total pill */}\n      <div className=\"mx-5 mb-3 flex items-baseline gap-2\">\n        <span className=\"text-2xl font-extrabold text-ds-1\">{totalValue}</span>\n        <span className=\"text-xs text-ds-3\">{totalLabel}</span>\n      </div>\n\n      {/* Stacked bar */}\n      <div className=\"mx-5 mb-4 flex h-3 overflow-hidden rounded-full\">\n        {segments.map((seg, i) => {\n          const w = totalPct > 0 ? (seg.percentage / totalPct) * 100 : 0;\n          return (\n            <div\n              key={seg.label}\n              style={{ width: `${w}%`, backgroundColor: seg.color }}\n              className={mergeClassNames(\n                \"h-full transition-all\",\n                i === 0 && \"rounded-s-full\",\n                i === segments.length - 1 && \"rounded-e-full\",\n              )}\n              aria-label={`${seg.label}: ${seg.percentage}%`}\n            />\n          );\n        })}\n      </div>\n\n      {/* Segment list */}\n      <div className=\"divide-y divide-ds-border-3/50 px-5 pb-4\">\n        {segments.map((seg) => (\n          <div key={seg.label} className=\"flex items-center gap-3 py-2.5\">\n            <div\n              className=\"flex size-8 shrink-0 items-center justify-center rounded-full text-base\"\n              style={{ backgroundColor: `${seg.color}20` }}\n            >\n              {seg.icon}\n            </div>\n            <span className=\"min-w-0 flex-1 text-sm font-medium text-ds-2\">\n              {seg.label}\n            </span>\n            <span className=\"text-sm font-bold text-ds-1\">{seg.value}</span>\n            <span className=\"w-10 text-end text-xs font-semibold text-ds-3\">\n              {seg.percentage}%\n            </span>\n          </div>\n        ))}\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 AcquisitionChannel {\n  key: string;\n  label: string;\n  /** New subscriptions this period. */\n  newSubs: number;\n  color: string;\n}\n\nexport interface AcquisitionPlanRow {\n  name: string;\n  direct: number;\n  marketplace: number;\n  affiliate: number;\n  partner: number;\n}\n\nexport interface AcquisitionChannelCardProps {\n  title?: string;\n  channels?: AcquisitionChannel[];\n  plans?: AcquisitionPlanRow[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ── Default data ──────────────────────────────────────────────────────────────\n\nconst DEFAULT_CHANNELS: AcquisitionChannel[] = [\n  { key: \"direct\", label: \"Direct\", newSubs: 312, color: \"#4F46E5\" },\n  { key: \"marketplace\", label: \"Marketplace\", newSubs: 198, color: \"#0891B2\" },\n  { key: \"affiliate\", label: \"Affiliate\", newSubs: 147, color: \"#D97706\" },\n  { key: \"partner\", label: \"Partner\", newSubs: 89, color: \"#059669\" },\n];\n\nconst DEFAULT_PLANS: AcquisitionPlanRow[] = [\n  {\n    name: \"Enterprise\",\n    direct: 42,\n    marketplace: 18,\n    affiliate: 8,\n    partner: 31,\n  },\n  { name: \"Pro\", direct: 124, marketplace: 76, affiliate: 54, partner: 38 },\n  {\n    name: \"Starter\",\n    direct: 146,\n    marketplace: 104,\n    affiliate: 85,\n    partner: 20,\n  },\n];\n\nconst fmtK = (v: number) =>\n  v === 0 ? \"0\" : v >= 1000 ? `${(v / 1000).toFixed(1)}k` : String(v);\n\n// ── Icons ─────────────────────────────────────────────────────────────────────\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\n// ── AcquisitionChannelCard ────────────────────────────────────────────────────\n\nexport const AcquisitionChannelCard: FC<AcquisitionChannelCardProps> = ({\n  title = \"Acquisition by Channel\",\n  channels = DEFAULT_CHANNELS,\n  plans = DEFAULT_PLANS,\n  className,\n  onMenuClick,\n}) => {\n  const channelMap = Object.fromEntries(channels.map((c) => [c.key, c]));\n  const maxSubs = plans.reduce(\n    (m, p) => Math.max(m, p.direct + p.marketplace + p.affiliate + p.partner),\n    0,\n  );\n  const xMax = Math.ceil(maxSubs / 50) * 50;\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        <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={onMenuClick}\n          >\n            <ExpandIcon />\n          </Button>\n        </div>\n      </div>\n\n      {/* Channel metrics */}\n      <div className=\"grid grid-cols-4 divide-x divide-ds-border-3/50 border-b border-ds-border-3/50 pb-3\">\n        {channels.map((ch) => (\n          <div\n            key={ch.key}\n            className=\"flex flex-col items-center gap-0.5 px-2 pt-1\"\n          >\n            <div\n              className=\"mb-1 h-1 w-6 rounded-full\"\n              style={{ backgroundColor: ch.color }}\n              aria-hidden=\"true\"\n            />\n            <p className=\"text-base font-bold text-ds-1\">{ch.newSubs}</p>\n            <p className=\"text-center text-[10px] leading-tight text-ds-3\">\n              {ch.label}\n            </p>\n          </div>\n        ))}\n      </div>\n\n      {/* Horizontal stacked bar by plan */}\n      <div style={{ height: plans.length * 58 + 44 }} className=\"px-2 pt-3\">\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <BarChart\n            data={plans}\n            layout=\"vertical\"\n            barSize={16}\n            barCategoryGap=\"35%\"\n            margin={{ top: 4, right: 12, left: 0, bottom: 4 }}\n          >\n            <XAxis\n              type=\"number\"\n              domain={[0, xMax]}\n              axisLine={false}\n              tickLine={false}\n              tickFormatter={fmtK}\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: 11 }}\n              width={60}\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() + \" new subs\",\n                channelMap[name as string]?.label ?? String(name),\n              ]}\n            />\n            <Bar\n              dataKey=\"direct\"\n              stackId=\"s\"\n              fill={channelMap.direct?.color ?? \"#4F46E5\"}\n              radius={[2, 0, 0, 2]}\n            />\n            <Bar\n              dataKey=\"marketplace\"\n              stackId=\"s\"\n              fill={channelMap.marketplace?.color ?? \"#0891B2\"}\n            />\n            <Bar\n              dataKey=\"affiliate\"\n              stackId=\"s\"\n              fill={channelMap.affiliate?.color ?? \"#D97706\"}\n            />\n            <Bar\n              dataKey=\"partner\"\n              stackId=\"s\"\n              fill={channelMap.partner?.color ?? \"#059669\"}\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-3 px-5 pb-4 pt-1\">\n        {channels.map((ch) => (\n          <div key={ch.key} className=\"flex items-center gap-1.5\">\n            <span\n              className=\"h-2 w-2 shrink-0 rounded-full\"\n              style={{ backgroundColor: ch.color }}\n              aria-hidden=\"true\"\n            />\n            <span className=\"text-xs text-ds-2\">{ch.label}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n","\"use client\";\n\nimport { useState, type FC } from \"react\";\nimport {\n  BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid,\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 type CustomerLifecyclePeriod = \"this-week\" | \"this-month\" | \"this-year\";\n\nexport interface CustomerLifecycleDataPoint {\n  label: string;\n  trials: number;\n  converted: number;\n  churned: number;\n}\n\nexport interface CustomerLifecycleMetric {\n  label: string;\n  value: number;\n  change: number;\n  color: string;\n}\n\nexport interface CustomerLifecycleCardProps {\n  title?: string;\n  metrics?: CustomerLifecycleMetric[];\n  data?: Partial<Record<CustomerLifecyclePeriod, CustomerLifecycleDataPoint[]>>;\n  defaultPeriod?: CustomerLifecyclePeriod;\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ── Default data ──────────────────────────────────────────────────────────────\n\nconst DEFAULT_METRICS: CustomerLifecycleMetric[] = [\n  { label: \"New Trials\",   value: 284,  change: +12.4, color: \"#4F46E5\" },\n  { label: \"Converted\",    value: 143,  change: +8.7,  color: \"#059669\" },\n  { label: \"Churned\",      value: 31,   change: -3.2,  color: \"#DC2626\" },\n];\n\nconst MONTHLY_DATA: CustomerLifecycleDataPoint[] = [\n  { label: \"Nov\", trials: 210, converted: 98,  churned: 28 },\n  { label: \"Dec\", trials: 185, converted: 112, churned: 19 },\n  { label: \"Jan\", trials: 248, converted: 121, churned: 34 },\n  { label: \"Feb\", trials: 263, converted: 130, churned: 27 },\n  { label: \"Mar\", trials: 271, converted: 138, churned: 25 },\n  { label: \"Apr\", trials: 284, converted: 143, churned: 31 },\n];\n\nconst PERIOD_OPTS: { value: CustomerLifecyclePeriod; label: string }[] = [\n  { value: \"this-week\",  label: \"Week\"  },\n  { value: \"this-month\", label: \"Month\" },\n  { value: \"this-year\",  label: \"Year\"  },\n];\n\n// ── CustomerLifecycleCard ─────────────────────────────────────────────────────\n\nexport const CustomerLifecycleCard: FC<CustomerLifecycleCardProps> = ({\n  title         = \"Customer Lifecycle\",\n  metrics       = DEFAULT_METRICS,\n  data          = { \"this-month\": MONTHLY_DATA },\n  defaultPeriod = \"this-month\",\n  className,\n  onMenuClick,\n}) => {\n  const [period, setPeriod] = useState<CustomerLifecyclePeriod>(defaultPeriod);\n  const chartData = data[period] ?? MONTHLY_DATA;\n\n  return (\n    <div className={mergeClassNames(\"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\", className)}>\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        <div className=\"flex items-center gap-1.5\">\n          {/* Period selector */}\n          <div className=\"flex rounded-md border border-ds-border-2 bg-ds-surface-2 p-0.5\">\n            {PERIOD_OPTS.map((opt) => (\n              <Button\n                key={opt.value}\n                variant=\"tertiary\"\n                onClick={() => setPeriod(opt.value)}\n                className={mergeClassNames(\n                  \"rounded px-2! py-0.5! text-xs font-medium transition-colors\",\n                  period === opt.value ? \"bg-ds-surface-1 text-ds-1 shadow-sm\" : \"text-ds-3\",\n                )}\n              >\n                {opt.label}\n              </Button>\n            ))}\n          </div>\n          <Button variant=\"tertiary\" size=\"small\" className=\"p-0.5! text-ds-3\" aria-label=\"More options\" onClick={onMenuClick}>\n            <EllipsisVerticalIcon width={18} height={18} />\n          </Button>\n        </div>\n      </div>\n\n      {/* Metric strip */}\n      <div className=\"grid grid-cols-3 divide-x divide-ds-border-3/50 border-b border-ds-border-3/50 px-2 pb-3 pt-1\">\n        {metrics.map((m) => (\n          <div key={m.label} className=\"flex flex-col items-center gap-0.5 px-3\">\n            <div className=\"h-0.5 w-8 rounded-full mb-1\" style={{ backgroundColor: m.color }} />\n            <p className=\"text-lg font-bold text-ds-1\">{m.value.toLocaleString()}</p>\n            <div className=\"flex items-center gap-1\">\n              <span\n                className=\"text-[10px] font-semibold\"\n                style={{ color: m.change >= 0 ? \"#22c55e\" : \"#ef4444\" }}\n              >\n                {m.change >= 0 ? \"+\" : \"\"}{m.change}%\n              </span>\n            </div>\n            <p className=\"text-center text-[10px] leading-tight text-ds-3\">{m.label}</p>\n          </div>\n        ))}\n      </div>\n\n      {/* Bar chart */}\n      <div style={{ height: 200 }} className=\"px-1 pb-4 pt-3\">\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <BarChart data={chartData} barSize={8} barGap={2} margin={{ top: 4, right: 8, left: -20, bottom: 0 }}>\n            <CartesianGrid vertical={false} stroke=\"var(--ds-color-border)\" strokeDasharray=\"3 3\" strokeOpacity={0.5} />\n            <XAxis dataKey=\"label\" axisLine={false} tickLine={false}\n              tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 10 }} />\n            <YAxis axisLine={false} tickLine={false}\n              tick={{ fill: \"var(--ds-color-fg-muted)\", fontSize: 10 }} />\n            <Tooltip\n              contentStyle={chartTooltipContentStyle} itemStyle={chartTooltipItemStyle}\n              labelStyle={chartTooltipLabelStyle} wrapperStyle={chartTooltipWrapperStyle}\n              cursor={{ fill: \"rgba(0,0,0,0.04)\" }}\n            />\n            <Bar dataKey=\"trials\"    name=\"New Trials\" fill={metrics[0]?.color ?? \"#4F46E5\"} radius={[2, 2, 0, 0]} />\n            <Bar dataKey=\"converted\" name=\"Converted\"  fill={metrics[1]?.color ?? \"#059669\"} radius={[2, 2, 0, 0]} />\n            <Bar dataKey=\"churned\"   name=\"Churned\"    fill={metrics[2]?.color ?? \"#DC2626\"} radius={[2, 2, 0, 0]} />\n          </BarChart>\n        </ResponsiveContainer>\n      </div>\n\n      {/* Legend */}\n      <div className=\"flex flex-wrap justify-center gap-4 px-5 pb-3\">\n        {metrics.map((m) => (\n          <div key={m.label} className=\"flex items-center gap-1.5\">\n            <span className=\"h-2 w-2 shrink-0 rounded-full\" style={{ backgroundColor: m.color }} aria-hidden=\"true\" />\n            <span className=\"text-xs text-ds-2\">{m.label}</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 SeatTierRow {\n  tier: string;\n  totalSeats: number;\n  usedSeats: number;\n  color: string;\n}\n\nexport interface SeatSummaryItem {\n  label: string;\n  count: number;\n  color: string;\n}\n\nexport interface SeatUtilizationCardProps {\n  title?: string;\n  subtitle?: string;\n  tiers?: SeatTierRow[];\n  summary?: SeatSummaryItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ── Default data ──────────────────────────────────────────────────────────────\n\nconst DEFAULT_TIERS: SeatTierRow[] = [\n  { tier: \"Enterprise\", totalSeats: 8400,  usedSeats: 7980,  color: \"#7C3AED\" },\n  { tier: \"Pro\",        totalSeats: 4310,  usedSeats: 3748,  color: \"#2563EB\" },\n  { tier: \"Starter\",    totalSeats: 2160,  usedSeats: 1584,  color: \"#0891B2\" },\n  { tier: \"Free\",       totalSeats: 1081,  usedSeats: 621,   color: \"#64748B\" },\n];\n\nconst DEFAULT_SUMMARY: SeatSummaryItem[] = [\n  { label: \"Total Seats\",      count: 15951, color: \"var(--ds-color-fg)\"       },\n  { label: \"Active Seats\",     count: 13933, color: \"#22c55e\"                  },\n  { label: \"Available Seats\",  count: 2018,  color: \"var(--ds-color-fg-muted)\" },\n];\n\n// ── SeatUtilizationCard ───────────────────────────────────────────────────────\n\nexport const SeatUtilizationCard: FC<SeatUtilizationCardProps> = ({\n  title   = \"Seat Utilization\",\n  subtitle = \"Allocated vs. active seats across all accounts\",\n  tiers   = DEFAULT_TIERS,\n  summary = DEFAULT_SUMMARY,\n  className,\n  onMenuClick,\n}) => (\n  <div className={mergeClassNames(\"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\", className)}>\n    {/* Header */}\n    <div className=\"flex items-start justify-between px-5 pb-1 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 variant=\"tertiary\" size=\"small\" className=\"shrink-0 p-0.5! text-ds-3\" aria-label=\"More options\" onClick={onMenuClick}>\n        <EllipsisVerticalIcon width={18} height={18} />\n      </Button>\n    </div>\n\n    {/* Summary pills */}\n    <div className=\"grid grid-cols-3 divide-x divide-ds-border-3/50 border-b border-ds-border-3/50 px-2 py-3\">\n      {summary.map((s) => (\n        <div key={s.label} className=\"flex flex-col items-center gap-0.5 px-3\">\n          <p className=\"text-base font-bold text-ds-1\" style={{ color: s.color }}>\n            {s.count.toLocaleString()}\n          </p>\n          <p className=\"text-center text-[10px] leading-tight text-ds-3\">{s.label}</p>\n        </div>\n      ))}\n    </div>\n\n    {/* Tier progress rows */}\n    <div className=\"divide-y divide-ds-border-3/50 px-5 pb-4\">\n      {tiers.map((t) => {\n        const pct = Math.round((t.usedSeats / t.totalSeats) * 100);\n        return (\n          <div key={t.tier} className=\"py-3\">\n            <div className=\"mb-1.5 flex items-center justify-between\">\n              <span className=\"text-sm font-medium text-ds-2\">{t.tier}</span>\n              <span className=\"text-xs font-semibold text-ds-3\">\n                {t.usedSeats.toLocaleString()} / {t.totalSeats.toLocaleString()} · {pct}%\n              </span>\n            </div>\n            <div className=\"h-2 overflow-hidden rounded-full bg-ds-surface-3\">\n              <div\n                className=\"h-full rounded-full transition-all\"\n                style={{ width: `${pct}%`, backgroundColor: t.color }}\n              />\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  </div>\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 TopToolItem {\n  id: string | number;\n  name: string;\n  category: string;\n  /** Monthly Active Users. */\n  mau: number;\n  /** MoM growth percentage. */\n  growth: number;\n  /** Emoji or short icon string. */\n  icon: string;\n  rank: number;\n}\n\nexport interface TopToolsCardProps {\n  title?: string;\n  subtitle?: string;\n  items?: TopToolItem[];\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ── Default data ──────────────────────────────────────────────────────────────\n\nconst DEFAULT_ITEMS: TopToolItem[] = [\n  { id: 1, name: \"AI Copywriter\",     category: \"Content\",    mau: 18420, growth: +24.3, icon: \"✍️\",  rank: 1 },\n  { id: 2, name: \"Analytics Pro\",     category: \"Analytics\",  mau: 14890, growth: +11.7, icon: \"📊\",  rank: 2 },\n  { id: 3, name: \"Invoice Manager\",   category: \"Finance\",    mau: 12340, growth: +8.2,  icon: \"🧾\",  rank: 3 },\n  { id: 4, name: \"Team Scheduler\",    category: \"HR\",         mau: 9870,  growth: +5.6,  icon: \"📅\",  rank: 4 },\n  { id: 5, name: \"Support Desk\",      category: \"Support\",    mau: 8210,  growth: -2.1,  icon: \"🎫\",  rank: 5 },\n];\n\n// ── RankBadge ─────────────────────────────────────────────────────────────────\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\"\n    style={{ borderColor: \"var(--ds-color-accent)\", color: \"var(--ds-color-accent)\" }}\n    aria-label={`Rank ${rank}`}\n  >\n    {rank}\n  </span>\n);\n\n// ── TopToolsCard ──────────────────────────────────────────────────────────────\n\nexport const TopToolsCard: FC<TopToolsCardProps> = ({\n  title    = \"Top Tools by Usage\",\n  subtitle = \"Monthly Active Users · last 30 days\",\n  items    = DEFAULT_ITEMS,\n  className,\n  onMenuClick,\n}) => (\n  <div className={mergeClassNames(\"flex flex-col rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5\", className)}>\n    <div className=\"mb-4 flex items-start justify-between\">\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 variant=\"tertiary\" size=\"small\" className=\"shrink-0 p-0.5! text-ds-3\" aria-label=\"More options\" onClick={onMenuClick}>\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 key={item.id} className=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\">\n          {/* Tool icon */}\n          <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-ds-surface-2 text-lg\">\n            {item.icon}\n          </div>\n\n          {/* Name + category */}\n          <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n            <span className=\"truncate text-sm font-semibold text-ds-1\">{item.name}</span>\n            <span className=\"flex items-center gap-1.5 text-xs text-ds-3\">\n              {item.category}\n              <span className=\"text-ds-border-3\">·</span>\n              <span className=\"font-medium text-ds-2\">{item.mau.toLocaleString()} MAU</span>\n              <span\n                className=\"font-semibold\"\n                style={{ color: item.growth >= 0 ? \"#22c55e\" : \"#ef4444\" }}\n              >\n                {item.growth >= 0 ? \"+\" : \"\"}{item.growth}%\n              </span>\n            </span>\n          </div>\n\n          <RankBadge rank={item.rank} />\n        </li>\n      ))}\n    </ul>\n  </div>\n);\n","\"use client\";\n\nimport { useState, 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 type TopPlansMetric = \"accounts\" | \"mrr\";\n\nexport interface PlanItem {\n  id: string | number;\n  name: string;\n  tier: \"free\" | \"starter\" | \"pro\" | \"enterprise\";\n  accounts: number;\n  mrr: number;\n  /** MoM growth % for active metric. */\n  growth: number;\n}\n\nexport interface TopPlansCardProps {\n  title?: string;\n  subtitle?: string;\n  items?: PlanItem[];\n  defaultMetric?: TopPlansMetric;\n  byAccountsLabel?: string;\n  byMrrLabel?: string;\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ── Default data ──────────────────────────────────────────────────────────────\n\nconst DEFAULT_ITEMS: PlanItem[] = [\n  { id: 1, name: \"Enterprise Annual\",   tier: \"enterprise\", accounts: 168,  mrr: 84000, growth: +18.4 },\n  { id: 2, name: \"Pro Monthly\",         tier: \"pro\",        accounts: 431,  mrr: 43100, growth: +12.1 },\n  { id: 3, name: \"Starter Annual\",      tier: \"starter\",    accounts: 720,  mrr: 21600, growth: +6.8  },\n  { id: 4, name: \"Pro Annual\",          tier: \"pro\",        accounts: 214,  mrr: 18190, growth: +9.3  },\n  { id: 5, name: \"Starter Monthly\",     tier: \"starter\",    accounts: 506,  mrr: 10120, growth: +3.2  },\n];\n\nconst TIER_COLORS: Record<PlanItem[\"tier\"], string> = {\n  enterprise: \"#7C3AED\",\n  pro:        \"#2563EB\",\n  starter:    \"#0891B2\",\n  free:       \"#64748B\",\n};\n\n// ── TopPlansCard ──────────────────────────────────────────────────────────────\n\nexport const TopPlansCard: FC<TopPlansCardProps> = ({\n  title           = \"Top Subscription Plans\",\n  subtitle        = \"Ranked by performance · this month\",\n  items           = DEFAULT_ITEMS,\n  defaultMetric   = \"mrr\",\n  byAccountsLabel = \"By Accounts\",\n  byMrrLabel      = \"By MRR\",\n  className,\n  onMenuClick,\n}) => {\n  const [metric, setMetric] = useState<TopPlansMetric>(defaultMetric);\n\n  const sorted = [...items].sort((a, b) =>\n    metric === \"mrr\" ? b.mrr - a.mrr : b.accounts - a.accounts,\n  );\n\n  return (\n    <div className={mergeClassNames(\"flex flex-col rounded-lg border border-ds-border-3/80 bg-ds-surface-1 p-5\", className)}>\n      {/* Header */}\n      <div className=\"mb-4 flex items-start justify-between gap-2\">\n        <div className=\"min-w-0\">\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        <div className=\"flex shrink-0 items-center gap-1.5\">\n          {/* Toggle */}\n          <div className=\"flex rounded-md border border-ds-border-2 bg-ds-surface-2 p-0.5\">\n            {([\"accounts\", \"mrr\"] as TopPlansMetric[]).map((m) => (\n              <Button\n                key={m}\n                variant=\"tertiary\"\n                onClick={() => setMetric(m)}\n                className={mergeClassNames(\n                  \"rounded px-2! py-0.5! text-xs font-medium transition-colors\",\n                  metric === m ? \"bg-ds-surface-1 text-ds-1 shadow-sm\" : \"text-ds-3 hover:text-ds-2\",\n                )}\n                aria-pressed={metric === m}\n              >\n                {m === \"accounts\" ? byAccountsLabel : byMrrLabel}\n              </Button>\n            ))}\n          </div>\n          <Button variant=\"tertiary\" size=\"small\" className=\"p-0.5! text-ds-3\" aria-label=\"More options\" onClick={onMenuClick}>\n            <EllipsisVerticalIcon width={18} height={18} />\n          </Button>\n        </div>\n      </div>\n\n      {/* Plan list */}\n      <ul className=\"flex flex-col divide-y divide-ds-border-2\" role=\"list\">\n        {sorted.map((plan, idx) => (\n          <li key={plan.id} className=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\">\n            {/* Rank */}\n            <span\n              className=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border text-xs font-semibold\"\n              style={{ borderColor: TIER_COLORS[plan.tier], color: TIER_COLORS[plan.tier] }}\n            >\n              {idx + 1}\n            </span>\n\n            {/* Name + tier badge */}\n            <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n              <span className=\"truncate text-sm font-semibold text-ds-1\">{plan.name}</span>\n              <div className=\"flex items-center gap-1.5\">\n                <span\n                  className=\"rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase\"\n                  style={{ backgroundColor: `${TIER_COLORS[plan.tier]}18`, color: TIER_COLORS[plan.tier] }}\n                >\n                  {plan.tier}\n                </span>\n                <span\n                  className=\"text-[10px] font-semibold\"\n                  style={{ color: plan.growth >= 0 ? \"#22c55e\" : \"#ef4444\" }}\n                >\n                  {plan.growth >= 0 ? \"+\" : \"\"}{plan.growth}%\n                </span>\n              </div>\n            </div>\n\n            {/* Primary metric */}\n            <div className=\"text-end\">\n              <p className=\"text-sm font-bold text-ds-1\">\n                {metric === \"mrr\"\n                  ? `$${(plan.mrr / 1000).toFixed(1)}k`\n                  : plan.accounts.toLocaleString()}\n              </p>\n              <p className=\"text-[10px] text-ds-3\">\n                {metric === \"mrr\" ? \"MRR\" : \"accounts\"}\n              </p>\n            </div>\n          </li>\n        ))}\n      </ul>\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 type AIInsightType =\n  | \"churn_risk\"\n  | \"upsell_opportunity\"\n  | \"usage_anomaly\"\n  | \"revenue_forecast\"\n  | \"recommendation\";\n\nexport type AIInsightImpact = \"critical\" | \"high\" | \"medium\" | \"low\";\n\nexport interface AIInsight {\n  id: string | number;\n  type: AIInsightType;\n  title: string;\n  description: string;\n  /** Number of accounts/users affected. */\n  affectedCount: number;\n  affectedLabel?: string;\n  /** AI confidence 0–100. */\n  confidence: number;\n  impact: AIInsightImpact;\n  /** Suggested action label. */\n  actionLabel?: string;\n  onAction?: () => void;\n}\n\nexport interface AIInsightsCardProps {\n  title?: string;\n  subtitle?: string;\n  insights?: AIInsight[];\n  /** Total insights generated (may be more than shown). */\n  totalInsights?: number;\n  onViewAll?: () => void;\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ── Default data ──────────────────────────────────────────────────────────────\n\nconst DEFAULT_INSIGHTS: AIInsight[] = [\n  {\n    id: 1,\n    type: \"churn_risk\",\n    title: \"23 Pro accounts showing churn signals\",\n    description: \"Login frequency dropped >60% in last 14 days. Typical churn precursor observed 3–5 weeks before cancellation.\",\n    affectedCount: 23,\n    affectedLabel: \"accounts\",\n    confidence: 87,\n    impact: \"critical\",\n    actionLabel: \"Send re-engagement\",\n  },\n  {\n    id: 2,\n    type: \"upsell_opportunity\",\n    title: \"148 Starter accounts near API limit\",\n    description: \"Hitting 90%+ of monthly API quota. Historically, 34% of these accounts upgrade to Pro within 2 billing cycles.\",\n    affectedCount: 148,\n    affectedLabel: \"accounts\",\n    confidence: 79,\n    impact: \"high\",\n    actionLabel: \"Show upgrade prompt\",\n  },\n  {\n    id: 3,\n    type: \"revenue_forecast\",\n    title: \"MRR projected to reach $198k next month\",\n    description: \"Based on current trial-to-paid velocity (+12.4%) and low churn (2.3%). 95% confidence interval: $192k–$204k.\",\n    affectedCount: 0,\n    affectedLabel: \"forecast\",\n    confidence: 91,\n    impact: \"medium\",\n    actionLabel: \"View forecast\",\n  },\n  {\n    id: 4,\n    type: \"usage_anomaly\",\n    title: \"API spike detected in 3 Enterprise workspaces\",\n    description: \"3× normal call volume for 6 consecutive hours. May indicate a runaway script or integration misconfiguration.\",\n    affectedCount: 3,\n    affectedLabel: \"workspaces\",\n    confidence: 96,\n    impact: \"high\",\n    actionLabel: \"Investigate\",\n  },\n  {\n    id: 5,\n    type: \"recommendation\",\n    title: \"Enable AI Copywriter for 340 inactive accounts\",\n    description: \"Accounts that activate AI Copywriter show 2.4× higher 6-month retention. These accounts have never triggered it.\",\n    affectedCount: 340,\n    affectedLabel: \"accounts\",\n    confidence: 74,\n    impact: \"medium\",\n    actionLabel: \"Create campaign\",\n  },\n];\n\n// ── Config maps ───────────────────────────────────────────────────────────────\n\nconst TYPE_CONFIG: Record<AIInsightType, { icon: string; label: string }> = {\n  churn_risk:          { icon: \"⚠️\",  label: \"Churn Risk\"     },\n  upsell_opportunity:  { icon: \"⬆️\",  label: \"Upsell\"         },\n  usage_anomaly:       { icon: \"📡\",  label: \"Anomaly\"        },\n  revenue_forecast:    { icon: \"📈\",  label: \"Forecast\"       },\n  recommendation:      { icon: \"💡\",  label: \"Tip\"            },\n};\n\nconst IMPACT_CONFIG: Record<AIInsightImpact, { label: string; bg: string; text: string }> = {\n  critical: { label: \"Critical\", bg: \"#FEF2F2\", text: \"#DC2626\" },\n  high:     { label: \"High\",     bg: \"#FFF7ED\", text: \"#D97706\" },\n  medium:   { label: \"Medium\",   bg: \"#EFF6FF\", text: \"#2563EB\" },\n  low:      { label: \"Low\",      bg: \"#F0FDF4\", text: \"#16A34A\" },\n};\n\n// ── InsightRow ────────────────────────────────────────────────────────────────\n\nconst InsightRow: FC<{ insight: AIInsight }> = ({ insight }) => {\n  const type   = TYPE_CONFIG[insight.type];\n  const impact = IMPACT_CONFIG[insight.impact];\n\n  return (\n    <li className=\"py-4 first:pt-3\">\n      <div className=\"flex items-start gap-3\">\n        {/* Icon */}\n        <span className=\"mt-0.5 text-xl leading-none\" aria-hidden=\"true\">{type.icon}</span>\n\n        <div className=\"min-w-0 flex-1\">\n          {/* Title row */}\n          <div className=\"flex flex-wrap items-center gap-2 mb-0.5\">\n            <p className=\"text-sm font-semibold text-ds-1\">{insight.title}</p>\n            <span\n              className=\"rounded px-1.5 py-0.5 text-[10px] font-bold uppercase\"\n              style={{ backgroundColor: impact.bg, color: impact.text }}\n            >\n              {impact.label}\n            </span>\n          </div>\n\n          {/* Description */}\n          <p className=\"text-xs leading-relaxed text-ds-3 mb-2\">{insight.description}</p>\n\n          {/* Meta row */}\n          <div className=\"flex flex-wrap items-center gap-3\">\n            {/* Confidence */}\n            <div className=\"flex items-center gap-1.5\">\n              <div className=\"h-1.5 w-16 overflow-hidden rounded-full bg-ds-surface-3\">\n                <div\n                  className=\"h-full rounded-full bg-ds-accent\"\n                  style={{ width: `${insight.confidence}%` }}\n                />\n              </div>\n              <span className=\"text-[10px] text-ds-3\">{insight.confidence}% confidence</span>\n            </div>\n\n            {/* Affected count */}\n            {insight.affectedCount > 0 && (\n              <span className=\"text-[10px] text-ds-3\">\n                {insight.affectedCount.toLocaleString()} {insight.affectedLabel ?? \"affected\"}\n              </span>\n            )}\n\n            {/* Type badge */}\n            <span className=\"rounded-full border border-ds-border-2 px-2 py-0.5 text-[10px] font-medium text-ds-3\">\n              {type.label}\n            </span>\n          </div>\n        </div>\n\n        {/* Action button */}\n        {insight.actionLabel && (\n          <Button\n            variant=\"tertiary\"\n            size=\"small\"\n            onClick={insight.onAction}\n            className=\"shrink-0 whitespace-nowrap rounded-md border border-ds-border-2 bg-ds-surface-2 px-2.5! py-1! text-xs font-medium text-ds-2 hover:bg-ds-accent-subtle hover:text-ds-accent hover:border-ds-border-accent\"\n          >\n            {insight.actionLabel}\n          </Button>\n        )}\n      </div>\n    </li>\n  );\n};\n\n// ── AIInsightsCard ────────────────────────────────────────────────────────────\n\nexport const AIInsightsCard: FC<AIInsightsCardProps> = ({\n  title         = \"AI Business Insights\",\n  subtitle      = \"Powered by usage patterns · updated hourly\",\n  insights      = DEFAULT_INSIGHTS,\n  totalInsights = 18,\n  onViewAll,\n  className,\n  onMenuClick,\n}) => (\n  <div className={mergeClassNames(\"rounded-lg border border-ds-border-3/80 bg-ds-surface-1\", className)}>\n    {/* Header */}\n    <div className=\"flex items-start justify-between px-5 pb-1 pt-5\">\n      <div>\n        <div className=\"flex items-center gap-2\">\n          <p className=\"text-base font-bold text-ds-1\">{title}</p>\n          {/* AI badge */}\n          <span className=\"rounded-full bg-ds-accent px-2 py-0.5 text-[10px] font-bold text-ds-on-accent\">\n            AI\n          </span>\n        </div>\n        {subtitle && <p className=\"mt-0.5 text-xs text-ds-3\">{subtitle}</p>}\n      </div>\n      <Button variant=\"tertiary\" size=\"small\" className=\"shrink-0 p-0.5! text-ds-3\" aria-label=\"More options\" onClick={onMenuClick}>\n        <EllipsisVerticalIcon width={18} height={18} />\n      </Button>\n    </div>\n\n    {/* Summary strip */}\n    <div className=\"mx-5 my-3 flex items-center justify-between rounded-lg bg-ds-surface-2 px-3 py-2\">\n      <span className=\"text-xs text-ds-3\">\n        <strong className=\"text-ds-1\">{totalInsights}</strong> insights generated\n      </span>\n      <div className=\"flex items-center gap-3 text-[10px] text-ds-3\">\n        {([\"critical\", \"high\", \"medium\"] as AIInsightImpact[]).map((impact) => {\n          const count = insights.filter((i) => i.impact === impact).length;\n          const cfg   = IMPACT_CONFIG[impact];\n          return count > 0 ? (\n            <span key={impact} className=\"flex items-center gap-1\">\n              <span className=\"h-1.5 w-1.5 rounded-full\" style={{ backgroundColor: cfg.text }} />\n              {count} {cfg.label}\n            </span>\n          ) : null;\n        })}\n      </div>\n    </div>\n\n    {/* Insight list */}\n    <ul className=\"divide-y divide-ds-border-3/50 px-5 pb-2\" role=\"list\">\n      {insights.map((insight) => (\n        <InsightRow key={insight.id} insight={insight} />\n      ))}\n    </ul>\n\n    {/* Footer */}\n    {onViewAll && (\n      <div className=\"border-t border-ds-border-3/50 px-5 py-3\">\n        <Button\n          variant=\"tertiary\"\n          onClick={onViewAll}\n          className=\"w-full justify-center text-xs font-medium text-ds-3 hover:text-ds-1\"\n        >\n          View all {totalInsights} insights →\n        </Button>\n      </div>\n    )}\n  </div>\n);\n","\"use client\";\n\nimport { useState, useCallback, 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 AIFeature {\n  id: string | number;\n  name: string;\n  shortName: string;\n  /** Adoption % 0–100 */\n  adoption: number;\n  /** MoM change in percentage points */\n  trend: number;\n  activeAccounts: number;\n  color: string;\n  icon: string;\n}\n\nexport interface AIFeatureAdoptionCardProps {\n  title?: string;\n  subtitle?: string;\n  features?: AIFeature[];\n  overallAdoption?: number;\n  totalSessions?: number;\n  sessionsGrowth?: number;\n  satisfactionScore?: number;\n  className?: string;\n  onMenuClick?: () => void;\n}\n\n// ── Default data — SaaS management AI modules ─────────────────────────────────\n\nconst DEFAULT_FEATURES: AIFeature[] = [\n  { id: 1, name: \"Churn Predictor\",    shortName: \"Churn\",   adoption: 71, trend: +8.2,  activeAccounts: 2840, color: \"#8B5CF6\", icon: \"⚠️\" },\n  { id: 2, name: \"Revenue Forecast\",   shortName: \"Revenue\", adoption: 58, trend: +12.4, activeAccounts: 2318, color: \"#3B82F6\", icon: \"📈\" },\n  { id: 3, name: \"Smart Onboarding\",   shortName: \"Onboard\", adoption: 43, trend: +5.1,  activeAccounts: 1718, color: \"#06B6D4\", icon: \"🚀\" },\n  { id: 4, name: \"Seat Optimizer\",     shortName: \"Seats\",   adoption: 34, trend: +18.6, activeAccounts: 1358, color: \"#10B981\", icon: \"💺\" },\n  { id: 5, name: \"Price Intelligence\", shortName: \"Pricing\", adoption: 29, trend: +3.8,  activeAccounts: 1158, color: \"#F59E0B\", icon: \"💡\" },\n  { id: 6, name: \"API Anomaly Detect\", shortName: \"API\",     adoption: 22, trend: +24.1, activeAccounts:  879, color: \"#EF4444\", icon: \"📡\" },\n];\n\n// ── Hover tooltip ─────────────────────────────────────────────────────────────\n\ninterface TooltipProps {\n  feature: AIFeature;\n  x: number;\n  y: number;\n  cardWidth: number;\n}\n\nconst HoverTooltip: FC<TooltipProps> = ({ feature: f, x, y, cardWidth }) => {\n  const flipX = x > cardWidth / 2;\n  return (\n    <div\n      className=\"pointer-events-none absolute z-50 w-52 rounded-xl border border-ds-border-2 bg-ds-surface-1 p-3.5 shadow-xl\"\n      style={{\n        left:      flipX ? x - 12 : x + 12,\n        top:       y - 10,\n        transform: flipX ? \"translateX(-100%)\" : \"none\",\n      }}\n    >\n      {/* Header */}\n      <div className=\"mb-2.5 flex items-center gap-2\">\n        <span className=\"text-xl\">{f.icon}</span>\n        <div>\n          <p className=\"text-xs font-bold text-ds-1\">{f.name}</p>\n          <p className=\"text-[10px] text-ds-3\">AI module</p>\n        </div>\n      </div>\n\n      {/* Adoption bar */}\n      <div className=\"mb-2\">\n        <div className=\"mb-1 flex items-center justify-between\">\n          <span className=\"text-[10px] text-ds-3\">Adoption rate</span>\n          <span className=\"text-sm font-extrabold\" style={{ color: f.color }}>{f.adoption}%</span>\n        </div>\n        <div className=\"h-2 overflow-hidden rounded-full bg-ds-surface-3\">\n          <div className=\"h-full rounded-full transition-all\" style={{ width: `${f.adoption}%`, backgroundColor: f.color }} />\n        </div>\n      </div>\n\n      {/* Stats grid */}\n      <div className=\"grid grid-cols-2 gap-1.5 border-t border-ds-border-3/50 pt-2.5\">\n        <div>\n          <p className=\"text-[10px] text-ds-3\">Active accounts</p>\n          <p className=\"text-xs font-bold text-ds-1\">{f.activeAccounts.toLocaleString()}</p>\n        </div>\n        <div>\n          <p className=\"text-[10px] text-ds-3\">MoM trend</p>\n          <p\n            className=\"text-xs font-bold\"\n            style={{ color: f.trend >= 0 ? \"#22c55e\" : \"#ef4444\" }}\n          >\n            {f.trend >= 0 ? \"+\" : \"\"}{f.trend}pp\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n};\n\n// ── Concentric ring SVG ───────────────────────────────────────────────────────\n\nconst CHART_SIZE = 340;\nconst CX         = CHART_SIZE / 2;\nconst CY         = CHART_SIZE / 2;\nconst STROKE_W   = 12;\nconst RING_STEP  = 24;\nconst OUTER_R    = CX - STROKE_W / 2 - 2;\n\ninterface RingChartProps {\n  features:       AIFeature[];\n  overall:        number;\n  hovered:        AIFeature | null;\n  onHover:        (f: AIFeature | null) => void;\n}\n\nconst RingChart: FC<RingChartProps> = ({ features, overall, hovered, onHover }) => {\n  const sorted = [...features].sort((a, b) => b.adoption - a.adoption);\n\n  return (\n    <svg\n      width={CHART_SIZE}\n      height={CHART_SIZE}\n      viewBox={`0 0 ${CHART_SIZE} ${CHART_SIZE}`}\n      aria-hidden=\"true\"\n      style={{ overflow: \"visible\" }}\n    >\n      {sorted.map((f, i) => {\n        const r      = OUTER_R - i * RING_STEP;\n        const startA = -Math.PI / 2;\n        const frac   = f.adoption / 100;\n        const endA   = startA + frac * 2 * Math.PI;\n\n        const sx = CX + r * Math.cos(startA);\n        const sy = CY + r * Math.sin(startA);\n        const ex = CX + r * Math.cos(endA);\n        const ey = CY + r * Math.sin(endA);\n        const largeArc = frac > 0.5 ? 1 : 0;\n\n        const lx = CX;\n        const ly = CY - r + STROKE_W / 2 + 6;\n\n        const isHovered = hovered?.id === f.id;\n\n        return (\n          <g key={f.id}>\n            {/* Track */}\n            <circle\n              cx={CX} cy={CY} r={r}\n              fill=\"none\"\n              stroke=\"color-mix(in srgb, var(--ds-color-border-strong) 28%, transparent)\"\n              strokeWidth={STROKE_W}\n            />\n\n            {/* Filled arc */}\n            <path\n              d={\n                frac >= 0.9999\n                  ? `M ${sx} ${sy} A ${r} ${r} 0 1 1 ${sx - 0.001} ${sy}`\n                  : `M ${sx} ${sy} A ${r} ${r} 0 ${largeArc} 1 ${ex} ${ey}`\n              }\n              fill=\"none\"\n              stroke={f.color}\n              strokeWidth={isHovered ? STROKE_W + 3 : STROKE_W}\n              strokeLinecap=\"round\"\n              opacity={hovered && !isHovered ? 0.35 : 1}\n              style={{ transition: \"stroke-width 150ms, opacity 150ms\" }}\n            />\n\n            {/* % label */}\n            <text\n              x={lx} y={ly}\n              textAnchor=\"middle\"\n              dominantBaseline=\"middle\"\n              fontSize={9}\n              fontWeight=\"700\"\n              fill={f.color}\n              opacity={hovered && !isHovered ? 0.35 : 1}\n              style={{\n                paintOrder: \"stroke\",\n                stroke: \"var(--ds-color-bg-surface, #fff)\",\n                strokeWidth: 2,\n                transition: \"opacity 150ms\",\n              }}\n            >\n              {f.adoption}%\n            </text>\n\n            {/* Invisible wide hit area */}\n            <circle\n              cx={CX} cy={CY} r={r}\n              fill=\"none\"\n              stroke=\"transparent\"\n              strokeWidth={STROKE_W + 14}\n              style={{ cursor: \"pointer\" }}\n              onMouseEnter={() => onHover(f)}\n              onMouseLeave={() => onHover(null)}\n            />\n          </g>\n        );\n      })}\n\n      {/* Centre */}\n      <text x={CX} y={CY - 10} textAnchor=\"middle\" dominantBaseline=\"middle\"\n        fontSize={24} fontWeight=\"800\" fill=\"var(--ds-color-fg)\">\n        {hovered ? `${hovered.adoption}%` : `${overall}%`}\n      </text>\n      <text x={CX} y={CY + 12} textAnchor=\"middle\" dominantBaseline=\"middle\"\n        fontSize={10} fill=\"var(--ds-color-fg-muted)\">\n        {hovered ? hovered.shortName : \"overall AI\"}\n      </text>\n    </svg>\n  );\n};\n\n// ── FeatureRow ────────────────────────────────────────────────────────────────\n\ninterface FeatureRowProps {\n  feature:  AIFeature;\n  hovered:  AIFeature | null;\n  onHover:  (f: AIFeature | null) => void;\n}\n\nconst FeatureRow: FC<FeatureRowProps> = ({ feature: f, hovered, onHover }) => {\n  const isHovered = hovered?.id === f.id;\n  const isDimmed  = hovered && !isHovered;\n\n  return (\n    <li\n      className=\"flex cursor-pointer items-center gap-3 rounded-md px-1.5 py-[5px] first:pt-0 last:pb-0 transition-colors\"\n      style={{\n        opacity:         isDimmed ? 0.35 : 1,\n        backgroundColor: isHovered ? `${f.color}14` : \"transparent\",\n        transition:      \"opacity 150ms, background-color 150ms\",\n      }}\n      onMouseEnter={() => onHover(f)}\n      onMouseLeave={() => onHover(null)}\n    >\n      <span className=\"h-2 w-2 shrink-0 rounded-full\" style={{ backgroundColor: f.color }} aria-hidden=\"true\" />\n      <span className=\"flex-1 min-w-0 text-xs font-medium text-ds-2 truncate\">\n        <span className=\"mr-1\">{f.icon}</span>{f.name}\n      </span>\n      <div className=\"w-14 shrink-0\">\n        <div className=\"h-1.5 overflow-hidden rounded-full bg-ds-surface-3\">\n          <div className=\"h-full rounded-full\" style={{ width: `${f.adoption}%`, backgroundColor: f.color }} />\n        </div>\n      </div>\n      <span className=\"w-9 shrink-0 text-right text-sm font-extrabold\" style={{ color: f.color }}>\n        {f.adoption}%\n      </span>\n      <span\n        className=\"w-12 shrink-0 text-right text-[10px] font-semibold\"\n        style={{ color: f.trend >= 0 ? \"#22c55e\" : \"#ef4444\" }}\n      >\n        {f.trend >= 0 ? \"+\" : \"\"}{f.trend}pp\n      </span>\n    </li>\n  );\n};\n\n// ── AIFeatureAdoptionCard ─────────────────────────────────────────────────────\n\nexport const AIFeatureAdoptionCard: FC<AIFeatureAdoptionCardProps> = ({\n  title             = \"AI Feature Adoption\",\n  subtitle          = \"AI module activation across managed accounts · last 30 days\",\n  features          = DEFAULT_FEATURES,\n  overallAdoption,\n  totalSessions     = 124800,\n  sessionsGrowth    = 18.2,\n  satisfactionScore = 87,\n  className,\n  onMenuClick,\n}) => {\n  const [hovered,    setHovered]    = useState<AIFeature | null>(null);\n  const [mousePos,   setMousePos]   = useState({ x: 0, y: 0 });\n  const [cardWidth,  setCardWidth]  = useState(0);\n\n  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    const rect = e.currentTarget.getBoundingClientRect();\n    setMousePos({ x: e.clientX - rect.left, y: e.clientY - rect.top });\n    setCardWidth(rect.width);\n  }, []);\n\n  const overall = overallAdoption ??\n    Math.round(features.reduce((s, f) => s + f.adoption, 0) / features.length);\n\n  const fastestGrowing = features.reduce(\n    (best, f) => (f.trend > best.trend ? f : best),\n    features[0]!,\n  );\n\n  const fmtSessions = totalSessions >= 1_000\n    ? `${(totalSessions / 1_000).toFixed(1)}K`\n    : String(totalSessions);\n\n  return (\n    <div\n      className={mergeClassNames(\"relative rounded-lg border border-ds-border-3/80 bg-ds-surface-1\", className)}\n      onMouseMove={handleMouseMove}\n    >\n      {/* Hover tooltip */}\n      {hovered && (\n        <HoverTooltip\n          feature={hovered}\n          x={mousePos.x}\n          y={mousePos.y}\n          cardWidth={cardWidth}\n        />\n      )}\n\n      {/* Header */}\n      <div className=\"flex items-start justify-between px-5 pb-1 pt-5\">\n        <div>\n          <div className=\"flex items-center gap-2\">\n            <p className=\"text-base font-bold text-ds-1\">{title}</p>\n            <span className=\"rounded-full bg-ds-accent px-2 py-0.5 text-[10px] font-bold text-ds-on-accent\">AI</span>\n          </div>\n          {subtitle && <p className=\"mt-0.5 text-xs text-ds-3\">{subtitle}</p>}\n        </div>\n        <Button variant=\"tertiary\" size=\"small\" className=\"shrink-0 p-0.5! text-ds-3\" aria-label=\"More options\" onClick={onMenuClick}>\n          <EllipsisVerticalIcon width={18} height={18} />\n        </Button>\n      </div>\n\n      {/* Body */}\n      <div className=\"flex items-center gap-5 px-5 py-4\">\n        <div className=\"shrink-0\">\n          <RingChart\n            features={features}\n            overall={overall}\n            hovered={hovered}\n            onHover={setHovered}\n          />\n        </div>\n        <ul className=\"flex-1 min-w-0 divide-y divide-ds-border-3/40\" role=\"list\">\n          {features.map((f) => (\n            <FeatureRow\n              key={f.id}\n              feature={f}\n              hovered={hovered}\n              onHover={setHovered}\n            />\n          ))}\n        </ul>\n      </div>\n\n      {/* Stats strip */}\n      <div className=\"flex items-center divide-x divide-ds-border-3/50 border-t border-ds-border-3/50\">\n        {[\n          { label: \"AI sessions\",     value: fmtSessions,              sub: `+${sessionsGrowth}% MoM`,    subColor: \"#22c55e\" as string | undefined },\n          { label: \"Fastest growing\", value: fastestGrowing.shortName, sub: `+${fastestGrowing.trend}pp`, subColor: \"#22c55e\" as string | undefined },\n          { label: \"Satisfaction\",    value: `${satisfactionScore}%`,  sub: \"avg AI rating\",              subColor: undefined },\n        ].map(({ label, value, sub, subColor }) => (\n          <div key={label} className=\"flex flex-1 flex-col items-center px-3 py-2.5\">\n            <span className=\"text-[10px] text-ds-3\">{label}</span>\n            <span className=\"mt-0.5 text-sm font-bold text-ds-1\">{value}</span>\n            <span className=\"text-[10px]\" style={{ color: subColor ?? \"var(--ds-color-fg-muted)\" }}>{sub}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}