Goal vs Outcome Card React component
Check what a run was meant to do against what it did: each goal with its target line, a clear met or missed, and a note on why.
About the Goal vs Outcome Card component
Goal vs Outcome Card answers the question that matters after a run: did it do what we asked? Each goal shows the target as a line and the result as a bar, so a miss is obvious at a glance.
Pick a goal to read why it went the way it did, or switch period to see whether things are improving.
When to use it
Use it for agent reviews, weekly reports and goal tracking.
Set the targets before the run. Goals chosen afterwards prove nothing.
Installation
Add the Goal vs Outcome Card component to your project with the shadcn CLI. It lands in components/goal-vs-outcome-card.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/goal-vs-outcome-cardProps
<GoalVsOutcomeCard /> accepts 5 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Support bot, March goals" |
| subtitle | string | "What we asked for against what happened." |
| periods | string[] | DEFAULT_PERIODS |
| goals | { id: string; label: string; unit?: string; target: number; lowerIsBetter?: boolean; actual: number[]; notes: string[] }[] | DEFAULT_GOALS |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Support bot, March goals"
- subtitlestringDefault: "What we asked for against what happened."
- periodsstring[]Default: DEFAULT_PERIODS
- goals{ id: string; label: string; unit?: string; target: number; lowerIsBetter?: boolean; actual: number[]; notes: string[] }[]Default: DEFAULT_GOALS
Goal vs Outcome Card FAQ
- What does lowerIsBetter do?
- It flips the check, so a reply time under its target counts as met.
- How is the percentage worked out?
- It's the share of goals met in the chosen period.
- Does each goal need a note?
- Yes, one for each period, so the reason is always there.
- Does the card change height?
- No. Every note shares one grid cell.
