Where vendor spend lives in the app — rendered prototypes

Five placements, each an extension of a component already mounted in production. Rendered with the app's exact tokens (navy ink, card chrome, type scale).

2026-07-30 · companion to Vendor lifecycle & spend · dollar figures marked ● are real mined 2026 Camellia data; unmarked ones are illustrative placement examples

A — Work-order lifecycle rail gains Scheduled and InvoicedEFFORT S

The strip already renders on every work-order page (WorkOrderProgressCard → shared Stepper). Adding two steps is a pure-derivation change in wo-progress.tszero UI code. The date and the dollar amount ride the existing sublabel slot.

Progress
Reported
Jul 21
Dispatched
Jul 22
ScheduledNEW
Aug 4 · morning
Work complete
Aug 4
InvoicedNEW
$487.00
Rating
Closed

B — Invoice block in the work-order fact card + a checkpointEFFORT S

Clones the existing "Access & Details" block pattern (same file already has five of these). The sidebar feed picks up "Invoice received" from a one-entry addition to the story derivation — the WorkOrderCheckpoints component doesn't change at all.

InvoiceNEW
Invoice #
7741
Received
Aug 6
Amount
$487.00
Vendor
Anchor Pest Control
Access & Details (existing)
Estimated Cost
$450
Permission to Enter
Yes
Checkpoints
  • Vendor scheduled
    Aug 4, 9:14 AM
  • Work completed
    Aug 4, 3:40 PM
  • Invoice received — $487.00NEW
    Aug 6, 11:02 AM

C — Money columns on the two list surfacesEFFORT M

"Add one column" — copied from the turnover board's existing charges cell idiom (right-aligned, tabular-nums, faint em-dash when empty). M only because the list's ?view=meta projection and the mobile card renderer move in lockstep.

Turnovers
UnitStageWork ordersEst. charges (existing)InvoicedNEWDays
204Make-ready2/3$1,150$487.0011
108Ready to lease4/4$2,300$2,145.5019
312Inspection0/13

D1 — A fourth tile on the Vendor Costs pageEFFORT S

The page (/maintenance/costs) already shows Total Vendor Spend / Active Vendors / Invoices Captured. One more ClickableStatCard ties spend to work: how much of it is attributed to a work order or turnover. ● figures are the real mined 2026 Camellia numbers.

Total Vendor Spend
$39,584 ●
Jan 1 – Jul 29, 2026
Active Vendors
11 ●
with 2026 invoices
Invoices Captured
44 ●
de-duplicated
Tied to WorkNEW
$6,688 ●
via AppFolio PO numbers

D2 — "Spend (YTD)" tile on the dashboard maintenance widgetEFFORT S

The metric (mtdVendorSpend) already exists in the catalog — this is a surface registration plus one entry in the widget's stat strip (~6 lines). Inherits the S/M/L grammar, ghost state, and inspector for free.

Maintenance
7
open work orders
Urgent
1
In progress
3
Turnovers
2
Avg days open
4.2
Spend (YTD)NEW
$39.6k ●

E — Actual spend on the turnover work trackerEFFORT S

The per-turnover job roll-up (MakeReadyWorkTracker) carries no money today — the cheapest place turnover-level actual spend can live. A total joins the header counter; each row gets its invoiced amount.

Make-ready work66% complete (2/3) · $2,632.50 invoicedNEW
Bathtub refinish — Unit 204 · Miracle Cleaners$487.00  Done
Carpet replacement — Unit 204 · Royal Textile$2,145.50  Done
Paint full unit — Unit 204 · unassigned  Scheduled
Recommendation

A + B first (the work-order page tells the whole story with one derivation change and one markup block), D1 gives the figure a home on a page literally titled Vendor Costs in ~10 lines, and E is the cheapest turnover attribution. C follows once the invoice field exists on the row. Conversations were surveyed and ruled out — a work-order door-card there was deliberately removed on 2026-07-17.

Data dependency: everything above renders from the invoice → work-order link the detection pipeline creates (PR #4935). Until PO sync is on, attribution rides unit references and vendor identity.

PropFlow Docs