Patterns

PriceMatrix

Tier-pricing display. Highlights the active tier based on current quantity. Used on product detail and PO drafts.

Minimum order quantity (pcs)Tier 1
100 - 499
Tier 2
500 - 999
Tier 3
1,000 - 2,999
Tier 4
3,000 +
Price per unit$2.75$2.45$2.15$1.95

ApprovalWorkflow

Vertical step-list with role, name, status, timestamp. Pending stages auto-highlight the active step.

  1. Submitted

    Olivia Rhye

    May 10, 2024, 10:15 AM

  2. Line Manager

    James Smith

    May 10, 2024, 11:02 AM

  3. Procurement Head

    Andrew Parker

    Pending

  4. Finance

    Pending

  5. Completed

    Pending

ShipmentTimeline

Chronological event list for a shipment. Latest event highlighted.

  1. Delivered

    May 21, 03:00 PM

  2. At warehouse

    May 20, 10:00 AM

  3. In transit

    May 16, 02:00 PM · Picked up by DHL

  4. Created

    May 15, 09:00 AM

StatCard

Single-metric tile with optional progress bar and action link. Used on dashboards.

Payment matching

$245,000.00

/ $500,000

Pending approvals

View all

12

POs 8 · Invoices 4

Orders — this month

18

Total value $320,500

ShipmentsDonut

Pure-SVG segmented donut with legend. Lightweight, no chart library.

20Total
  • In transit8 (40%)
  • At warehouse5 (25%)
  • Delivered5 (25%)
  • Delayed2 (10%)

ProductThumb

Lightweight glyph-based product image stand-in. Deterministic gradient per image key. 4 sizes.

All sizes

⚡
▦
⚙

All glyphs

⚡
▦
⚙
═
◉
∿

Other domain components

The platform also ships these full-featured forms and views — all built from primitives:

RfqForm / RfqComposer

Single-product RFQ from catalog, or multi-line RFQ composer

components/domain/RfqForm.tsx, RfqComposer.tsx

QuoteResponseForm

Vendor responds to RFQ with editable per-line pricing

components/domain/QuoteResponseForm.tsx

ApprovalActions

Approve / Reject / Submit buttons on draft & in-approval POs

components/domain/ApprovalActions.tsx

ShipmentCreator

Vendor creates a shipment with carrier + tracking + ETA

components/domain/ShipmentCreator.tsx

ProductForm + TierPricingEditor

Vendor catalog create/edit with dynamic tier rows

components/domain/ProductForm.tsx, TierPricingEditor.tsx

CsvImport

CSV paste → live preview with row errors → commit

components/domain/CsvImport.tsx