Success Metrics Onboarding Block for React

Edit KPIS. Each has an id, a name, a hint line for its card, a unit (the words after the number), now (where it stands today), start (what its target box begins at), higher (whether a bigger number is better) and max (the most a target can be). LIMIT is how many can be picked.

It is refused in words, not switched off: "Pick up to three. Remove one to add another." appears under the cards, the card stays where it was and keeps focus, and the cards that cannot be added say "Pick up to 3" in place of their line. Taking one off makes room again.

From the metric's typed now and the number in the box, by a small pure function: "Now 96. The target is 25% higher." A target on the wrong side of today's figure is not an error: for a metric where a bigger number is better it says "Higher is better." and leaves the choice to the person.

A metric with an empty, zero or too-large target. It names the metric ("Enter a target for Monthly recurring revenue.") under the scorecard and puts focus in that box; with no metric picked it says so and puts focus on the first card. Both lines are reserved, so nothing moves.

Counted from the typed AS_OF date to the next Monday with plain date arithmetic in UTC, so it reads the same on the server and in every time zone. Replace it with your own schedule.

Everything: Set my targets says it was saved in this demo and nothing is stored or measured. In your app send the picked ids and their targets to your server where submit says so, and read now from your own data instead of the typed figure.