CRM / 14 primitives + composition

CRM primitives

The customer-relationship stack — profile, deal pipeline, touch-point timeline, lead and health scoring, segment tagging, note capture, next-action prompts, and a quote-to-cash funnel. Realistic Mufflermen data only; no real CRM wired.

Production answer

CRM primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview CRM primitives states
Generative search brief

CRM primitives: The customer-relationship stack — profile, deal pipeline, touch-point timeline, lead and health scoring, segment tagging, note capture, next-action prompts, and a quote-to-cash funnel. Realistic Mufflermen data only; no real CRM wired.

Visual reference only — no real CRM wired
Primitive 01

Customer card

Full customer profile — avatar, contact, suburb, lifetime value, status, last contact, actions.

StatelessOpen
Primitive 02

Contact mini card

Compact contact card with avatar, name, role, primary channel chip.

StatelessOpen
Primitive 03

Deal stage card

Single deal — name, customer, value, expected close, probability, color-coded stage.

StatelessOpen
Primitive 04

Pipeline kanban

Five-column deal pipeline with per-stage counts and totals, selectable columns.

Stateful · selectionOpen
Primitive 05

Activity row

Activity log entry with verb chip, duration, timestamp, inline-expand transcript.

Stateful · expandOpen
Primitive 06

Lead score chip

0-100 score with gradient tone and breakdown popover (engagement / fit / intent / recency).

Stateful · popoverOpen
Primitive 07

Deal value chip

Currency value with period (one-off / monthly / annual) and likelihood multiplier.

StatelessOpen
Primitive 08

Stage probability bar

Horizontal 0-100% bar with tick markers at typical stage probabilities.

StatelessOpen
Primitive 09

Touch-point timeline

Vertical touch log — call, email, SMS, in-person, DM, quote, invoice, payment.

Stateful · expandOpen
Primitive 10

Account health meter

Circular health score with tone shift and four contributing factor tiles.

StatelessOpen
Primitive 11

Segment chip

Customer segment chip — Fleet / Performance / DIY / Trade / Retail.

Stateful · toggleOpen
Primitive 12

Note composer

Note textarea with @mentions, tag input, pin toggle, save with toast.

Stateful · formOpen
Primitive 13

Next action card

Suggested next action with urgency chip and snooze options (1h / 1d / 1w).

Stateful · snoozeOpen
Primitive 14

Quote-to-cash funnel

Lead → Qualified → Quoted → Approved → Invoiced → Paid with count, value, drop-off.

StatelessOpen
Composition

Full CRM workspace

Customer + health meter + touch points + pipeline + composer + next action + score row.

CompositionOpen