The schedule at a glance on the order card

Segments as wide as their share, green for paid, red for overdue, neutral for upcoming — so the card says four payments AND which one is the big one.

What it is

A compact strip on the order card, paired with the journey line above it. It shows how many instalments are paid, how many are late, and the amount and date of the next one. Each segment's width is its percentage of the total.

Also called: payment progress bar · instalment strip · where is the money

See it
The schedule at a glance on the order card
Apr
May
Jun
Jul
Ronan Petsch — Barndominium
Framing
Ivy Brubaker — Riding Arena
Concrete
Sutter Kline — Riding Arena
Trim
Sutter Kline — Barndominium
Framing
Delia Yoder — 30×40 Garage
Concrete
Framing crewConcrete crewTrim crew
A four-segment strip under an order card, segments sized by share, first two green with ticks, third red with '!'. PaymentScheduleStrip.tsx. Sample data — no customer information appears here.
How it works
  1. 1flexGrow is set from the instalment's percent share
  2. 2Three states with three colours: paid green with a tick, overdue red with an exclamation, upcoming neutral with its number
  3. 3A tooltip per segment gives amount, share and the paid or due date
  4. 4The header wraps as whole phrases so a label never breaks mid-word
Why we built it

'The journey line above it answers "where are the materials"; this answers the other half — "where is the money". Both belong on the card for the same reason: an order you have to open to understand is an order nobody checks.' And on the widths: 'Equal-width blocks would say four payments; these say four payments AND which one is the big one, at no extra cost.'

The problem
  • Payment state invisible without opening the order
  • Equal blocks hide which instalment is the big one
Sound familiar?
What you get
Money and materials both readable on the card
Overdue instalments visible while scanning

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →