Block · sales

Quota Attainment

Per-rep attainment ranked against quota — showing how broad-based the number is and what share of reps are at goal.

State

Size

Mode

Sales Quota Attainment · Q1 2026

94%

4 of 8 reps at goal

At/over goal
Under goal

Bookings is tracking 94% of plan in this quarter, running 6% behind.

Acme Sales CRM · updated daily · bookings ÷ quota per rep

Demo data is illustrative. Replace with your own typed data prop.

How it computes

Per-rep attainment = attainment ÷ quota, ranked against a goal line.

pct = attainment / quota;  team = Σattainment / Σquota

Assumptions

Quotas are comparable across reps.
Attainment and quota are measured in the same unit (count or amount).

Honest about

Attainment is 0 when quota ≤ 0 (no divide-by-zero).
Team attainment is quota-weighted (Σ/Σ), not the mean of per-rep percentages — a few large quotas can't be hidden behind many small ones.
The goal line (default 100%) is a reference, not a pass/fail gate.

Use it with your data

Data contract

Passed via the data prop — an array of objects: validated at runtime, so a bad shape degrades to the error state rather than crashing.

Field	Type	Required
rep	string	yes
attainment	number	yes
quota	number	yes

Static props

import { SalesQuotaAttainment } from "@/components/blocks/sales-quota-attainment/sales-quota-attainment";

<SalesQuotaAttainment data={myData} />

Client fetch (SWR)

const { data, isLoading, error } = useSWR("/api/metric", fetcher);
// route isLoading/error through <ChartStates>, then:
<SalesQuotaAttainment data={data} />

Server component (RSC)

const data = await fetch(url, {
  next: { revalidate: 3600 },
}).then((r) => r.json());

<SalesQuotaAttainment data={data} />

Map arbitrary rows

import { mapRows } from "@/lib/sextant/column-map";

const out = mapRows(rows, { /* contractKey: "yourColumn" */ }, dataSchema);
if (out.ok) <SalesQuotaAttainment data={out.data} />;

Make it yours

Every customization below is an optional prop — omit them all and you get the defaults shown above. Recolor, reformat, restyle, or drop the card chrome without forking the component.

Recolor or rename a series (over, under)

<SalesQuotaAttainment
  series={{ over: { color: "var(--chart-3)", label: "…" } }}
/>

Format numbers (currency / locale)

const eur = new Intl.NumberFormat("de-DE", {
  style: "currency",
  currency: "EUR",
  notation: "compact",
});

<SalesQuotaAttainment valueFormatter={(n) => eur.format(n)} />

Replace or hide the narrative

<SalesQuotaAttainment narrative="Your own one-liner." />

// …or hide it entirely:
<SalesQuotaAttainment narrative={false} />

Restyle any region

<SalesQuotaAttainment
  className="max-w-xl"
  classNames={{ body: "bg-muted/20" }}
/>

Drop the card chrome (headless plot)

import { SalesQuotaAttainmentPlot } from "@/components/blocks/sales-quota-attainment/sales-quota-attainment";

// Just the chart body — bring your own card/layout:
<SalesQuotaAttainmentPlot data={data} config={config} />

Rep	Attainment	Quota
Maya R.	110%	100%
Tomás L.	106%	100%
Devon K.	104%	100%
Priya S.	100%	100%
Hana W.	94%	100%
Eli B.	89%	100%
Noah F.	74%	100%
Grace M.	57%	100%