cyclone/src/components/charts/AgingBars.tsx

// ---------------------------------------------------------------------------
// AgingBars — AR aging stacked horizontal bar.
//
// One bar split into up to 4 segments by aging bucket (0–30 / 31–60 /
// 61–90 / 90+ days). Each segment is coloured along a cool-to-warm ramp
// so the eye reads left-to-right as "freshest to most stale". Below
// the bar, four legend rows show the bucket label, dollar amount, and
// share of total. The component is data-driven — pass any four-bucket
// distribution.
// ---------------------------------------------------------------------------

import { fmt } from "@/lib/format";

export interface AgingBucket {
  /** Bucket id for keying. */
  id: string;
  /** Display label (e.g. "0–30", "31–60", "61–90", "90+"). */
  label: string;
  /** Dollar amount outstanding in this bucket. */
  amount: number;
  /** Tailwind/HSL colour for the segment. */
  color: string;
}

export interface AgingBarsProps {
  buckets: AgingBucket[];
  /** Total AR amount for share calc. Defaults to sum of buckets. */
  total?: number;
  /** Optional caption shown right-aligned above the bar. */
  caption?: string;
}

export function AgingBars({ buckets, total, caption }: AgingBarsProps) {
  const sum = total ?? buckets.reduce((s, b) => s + b.amount, 0);
  if (sum <= 0) {
    return (
      <div
        className="mono text-[11px] py-6 text-center"
        style={{ color: "hsl(var(--surface-ink-3))" }}
      >
        Nothing outstanding.
      </div>
    );
  }

  return (
    <div className="w-full">
      {caption ? (
        <div
          className="mono text-[10.5px] uppercase tracking-[0.16em] mb-2 flex items-center justify-between"
          style={{ color: "hsl(var(--surface-ink-3))" }}
        >
          <span>Aging buckets</span>
          <span>{caption}</span>
        </div>
      ) : null}

      {/* The stacked bar */}
      <div
        className="flex w-full h-3 overflow-hidden rounded-[3px]"
        style={{ boxShadow: "inset 0 0 0 1px hsl(30 14% 14% / 0.08)" }}
      >
        {buckets.map((b, i) => {
          const pct = (b.amount / sum) * 100;
          if (pct <= 0) return null;
          return (
            <div
              key={b.id}
              className="h-full"
              style={{
                width: `${pct}%`,
                backgroundColor: b.color,
                animation: `bar-grow-h 800ms cubic-bezier(0.2,0.8,0.2,1) ${
                  i * 70
                }ms both`,
                transformOrigin: "left center",
              }}
              title={`${b.label}: ${fmt.usd(b.amount)}`}
              aria-label={`${b.label} days: ${fmt.usd(b.amount)}`}
            />
          );
        })}
      </div>

      {/* Legend rows */}
      <ul className="mt-4 space-y-2">
        {buckets.map((b) => {
          const share = sum > 0 ? (b.amount / sum) * 100 : 0;
          return (
            <li
              key={b.id}
              className="flex items-center justify-between gap-3 text-[12px]"
            >
              <div className="flex items-center gap-2 min-w-0">
                <span
                  aria-hidden
                  className="inline-block h-2 w-2 rounded-sm shrink-0"
                  style={{ backgroundColor: b.color }}
                />
                <span
                  className="mono tabular-nums"
                  style={{ color: "hsl(var(--surface-ink-2))" }}
                >
                  {b.label}d
                </span>
              </div>
              <div className="flex items-center gap-3 shrink-0">
                <div
                  className="relative h-1 w-16 rounded-full overflow-hidden"
                  style={{ backgroundColor: "hsl(30 14% 14% / 0.06)" }}
                  aria-hidden
                >
                  <div
                    className="absolute inset-y-0 left-0 rounded-full"
                    style={{
                      width: `${share}%`,
                      backgroundColor: b.color,
                      opacity: 0.7,
                    }}
                  />
                </div>
                <span
                  className="mono tabular-nums"
                  style={{
                    color: "hsl(var(--surface-ink))",
                    minWidth: 70,
                    textAlign: "right",
                  }}
                >
                  {fmt.usd(b.amount)}
                </span>
                <span
                  className="mono tabular-nums"
                  style={{
                    color: "hsl(var(--surface-ink-3))",
                    minWidth: 40,
                    textAlign: "right",
                    fontSize: 10.5,
                  }}
                >
                  {share.toFixed(0)}%
                </span>
              </div>
            </li>
          );
        })}
      </ul>
    </div>
  );
}