Customer portal / 14 primitives + composition

Customer portal primitives

Customer-facing self-serve family for Oak Flats Mufflermen — what Mick sees on mufflermen.com.au after he logs in. Booking, quotes, invoices, garage, service history, loyalty, documents, referral, NPS feedback, addresses, notification preferences, account summary, appointments and the workshop chat thread. Visual references only — no real customer data wired.

Production answer

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

Primary CTAReview Customer portal primitives states
Generative search brief

Customer portal primitives: Customer-facing self-serve family for Oak Flats Mufflermen — what Mick sees on mufflermen.com.au after he logs in. Booking, quotes, invoices, garage, service history, loyalty, documents, referral, NPS feedback, addresses, notification preferences, account summary, appointments and the workshop chat thread. Visual references only — no real customer data wired.

Visual reference only — customer portal is not wired
Primitive 01

Booking wizard

Four-step wizard — pick service, pick vehicle, pick date, confirm. SMS reminders auto-fire on confirm.

Stateful · stepOpen
Primitive 02

Quote viewer

Itemised quote with parts/labour/fees, GST math, accept or decline buttons, PDF download.

Stateful · decideOpen
Primitive 03

Invoice pay card

Outstanding invoice with Apple Pay, Google Pay, card and bank transfer selector — Stripe-wired copy.

Stateful · payOpen
Primitive 04

Vehicle garage grid

Saved-vehicles grid — rego, body colour, last service, next service due, roadworthy, recall flag.

Stateful · selectOpen
Primitive 05

Service history timeline

Chronological service ledger — each entry with tech, kms, invoice and a PDF download.

StatelessOpen
Primitive 06

Loyalty card

Customer-side stamp card — current/total stamps, tier chip, progress bar, next reward.

StatelessOpen
Primitive 07

Doc download row

Single document row — receipt, pink-slip, dyno chart, warranty, manual — size + page count.

Stateful · clickOpen
Primitive 08

Referral share card

Refer-a-mate program with copyable code + URL, stats and most-recent activity ledger.

Stateful · copyOpen
Primitive 09

Feedback prompt

Post-service NPS prompt — 5-star rating + free-text — submits to a thank-you state.

Stateful · rateOpen
Primitive 10

Address book row

Saved address row — use chip (service / billing / delivery), default flag, edit + remove.

StatelessOpen
Primitive 11

Notification preferences

Topic × channel matrix — SMS, email, push toggles. Quiet hours footer.

Stateful · toggleOpen
Primitive 12

Account summary tile

Header tile — avatar, member-since, loyalty tier, vehicle count, next reward progress.

StatelessOpen
Primitive 13

Appointment card

Upcoming booking card — date stamp, bay, tech, duration, reschedule + cancel buttons.

Stateful · actOpen
Primitive 14

Chat with workshop

Customer-side message thread to the workshop — Hermes branded, Brad replies inline.

Stateful · typeOpen
Composition

Full portal

Live customer dashboard — all 14 portal primitives composed into the mufflermen.com.au surface.

CompositionOpen