Flow strip

"use client";
import { FlowMeter, FlowStrip } from "@/components/ui/notchset/blocks/flow-strip";

/* one target, and every figure derived from it: won + left = target, attainment = won / target, coverage = open / left */
const TARGET = 278000, WON = 110000, OPEN = 543000;
const LEFT = TARGET - WON, PCT = Math.round((WON / TARGET) * 100), COVER = OPEN / LEFT;
const k = (v: number) => `$${Math.round(v / 1000)}k`;

export default function FlowStripDemo() {
  return (
    <FlowStrip
      tiles={[
        { key: "open", label: "Open pipeline", figure: k(OPEN), sub: "5 deals" },
        {
          key: "cov",
          label: "Coverage of what’s left",
          figure: `${COVER.toFixed(1)}×`,
          aside: <span className="text-[var(--ns-ok)]">{COVER >= 3 ? "healthy" : "thin"}</span>,
          sub: (
            <>
              <FlowMeter value={Math.min(100, (COVER / 3) * 100)} />
              {k(LEFT)} left to win
            </>
          ),
        },
        {
          key: "won",
          label: "Won this quarter",
          figure: k(WON),
          aside: `${PCT}% of ${k(TARGET)} target`,
          sub: (
            <>
              <FlowMeter value={PCT} tone="ok" />2 deals closed
            </>
          ),
        },
      ]}
    />
  );
}