Flow journey

"use client";
import * as React from "react";
import { FlowJourney } from "@/components/ui/notchset/blocks/flow-journey";

const money = (v: number) => `$${v >= 1000 ? `${(v / 1000).toFixed(v >= 10000 ? 0 : 1)}M` : `${v}k`}`;

/* the deals opened this quarter ($k), from opened to won, with what left on the way; pick a step to name it */
export default function FlowJourneyDemo() {
  const [pick, setPick] = React.useState<string | null>(null);
  const words: Record<string, string> = { opened: "24 deals opened", lost: "5 lost", slipped: "3 slipped past the quarter", inPlay: "16 still this quarter", open: "9 still open", won: "7 won" };
  return (
    <div className="flex w-full max-w-[760px] flex-col gap-3">
      <FlowJourney
        label="Deals opened this quarter, from opened to won"
        format={money}
        selected={pick}
        onSelect={setPick}
        openWords="show its deals"
        stages={[
          { key: "opened", label: "Opened", value: 1840, note: "24 deals" },
          { key: "inPlay", label: "Still this quarter", value: 1220, note: "16 deals" },
          { key: "won", label: "Won", value: 560, note: "7 deals" },
        ]}
        branches={[
          { key: "lost", after: 0, label: "Lost", value: 410, dir: "out", tone: "bad", note: "5 deals" },
          { key: "slipped", after: 0, label: "Slipped", value: 210, dir: "out", note: "3 deals" },
          { key: "open", after: 1, label: "Still open", value: 660, dir: "out", note: "9 deals" },
        ]}
      />
      <p className="m-0 min-h-5 text-[length:var(--ns-text-small)] text-[var(--ns-ink-2)]" aria-live="polite">
        {pick ? `Showing the ${words[pick]}.` : "Pick a step to see the records it counts."}
      </p>
    </div>
  );
}