SOS-25131
En Route High Priority
Created 2:15 PM CT · Shift 2
Payment
Pending
Sent
Opened
Paid
$1,066.00
[ ticket workspace content below ... ]

↑ STATE A — Badge in the workspace header, top-right. 4-step progress bar: Pending → Sent → Opened → Paid. Green = done, amber pulsing = current step, gray = future. Amount ($1,066.00) shown on the right. Hover to see border turn red, click to open popover (State B).

— CLICK THE BADGE —
SOS-25131
En Route High Priority
Created 2:15 PM CT · Shift 2
Payment
Pending
Sent
Opened
Paid
$1,066.00
Payment Status $1,066.00
Pending
Sent
Opened
Paid
Invoice created in RoadSync — $1,066.00 · SOS-25131
2:45 PM
Link sent via SMS to (512) 555-0142 by Omar K.
2:47 PM
Awaiting customer open…
now
Auto-syncing with RoadSync · last sync 12s ago
🔒 Mark Paid requires Manager role. Every override is logged.

↑ STATE B — Popover open (with arrow pointing up to the badge it came from). Header: "Payment Status" + amount. Larger progress bar inside. Timeline of events (Invoice created → Link sent → Awaiting open). Invoice link with Copy/Open icons. Two actions: Resend Link (outline) + Mark Paid (green, manager-only). Small purple "Mark Paid requires Manager role" footer explains the restriction.

— ALL BADGE VARIANTS —
◆ Badge State Variants
Not Started
no invoice yet
Payment
Pending
Sent
Opened
Paid
Pending
invoice created, not sent
Payment
Pending
Sent
Opened
Paid
$1,066.00
Invoice Ready
in RoadSync · manager can charge
Ready
Pending
Ready
Opened
Paid
$1,066.00
Link Sent
SMS delivered, waiting
Payment
Pending
Sent
Opened
Paid
$1,066.00
Opened
customer clicked link
Payment
Pending
Sent
Opened
Paid
$1,066.00
Paid ✓
paid via customer link
Paid
Pending
Sent
Opened
Paid
$1,066.00
Paid by Manager ✓
manual charge in RoadSync
Paid
Pending
Ready
Charged
Paid
$1,066.00
Failed
card declined
Failed
Pending
Sent
Opened
Failed
$1,066.00

↑ ALL VARIANTS — Every state the badge can be in. Not Started (all gray, amount —) · Pending (invoice being created) · Invoice Ready (purple — invoice live in RoadSync, manager can manually charge) · Sent (link delivered, this is State A) · Opened (customer clicked the link) · Paid ✓ (via customer link) · Paid by Manager ✓ (manual charge in RoadSync app — progress labels adapt: Ready → Charged → Paid) · Failed (card declined).