Skip to content
Rechaj Design

parked queue

Parked Queue

Section titled “Parked Queue”

A dashboard section that surfaces in-progress work the user has paused — waiting on an external party (ops approval, payment, parts), with live elapsed time and a “has-update” state when the blocker resolves.

When to use

Section titled “When to use”

The user is doing serial work (handling one rider, one ticket, one inspection at a time), an item gets blocked, and they need to:

  1. Stash it without losing context
  2. Move on to the next item
  3. Be alerted when the blocker clears so they can resume

Examples: swap requests awaiting ops approval, riders funding wallets via Opay transfer, retrofit jobs waiting on parts, inspections awaiting QA review.

Not for: persistent saved drafts, history, or queues the user actively chooses items from. Use list patterns for those.

Anatomy

Section titled “Anatomy”
Parked swaps  [1]                              ← section title + count badge


┌─────────────────────────────────────────┐
│ A   Adekunle Musa             ⏱ 02:43   │   ← waiting state
│     Awaiting Ops approval               │
└─────────────────────────────────────────┘


┌─────────────────────────────────────────┐ ← has-update state (green tint)
│ A   Adekunle Musa             ⏱ 04:11   │
│     Ops approved · tap to resume        │
└─────────────────────────────────────────┘
  • Section header: 13px / 600, var(--grey12). Count badge: var(--grey12) background, white text, 10px / 700, padding: 1px 7px, border-radius: 999px.
  • Card: white surface, var(--sh-card) shadow, NO border, 12px radius, 12px 14px padding.
  • Avatar: 36px circle, var(--bg) background, initials in 13px/700 var(--grey12).
  • Has-update card: background var(--g-3), avatar background var(--white) with var(--g-dark) initials, status text var(--g-dark) / 700.

Visual rules

Section titled “Visual rules”
  • Card grows by 1 element when count > 0. Section hidden entirely when count = 0 — no “No parked items” empty state.
  • Timer counts elapsed since the original swap began (not since parking). After the 2-minute goal it shows +0:43 in red — see [[timer-band]] for the goal threshold pattern.
  • Live tick interval: 1000ms. Use a single setInterval for all cards on the screen, not one per card.

State machine

Section titled “State machine”
State Trigger Visual
parked User taps “Park” on a blocked screen White card, muted status text
has-update Backend signals blocker cleared Green-tinted card, bold status
resumed User taps the card Card removed, screen restored to the parked screen ID

When has-update fires, also surface a [[notification-banner]] for off-screen visibility.

Forbidden

Section titled “Forbidden”
  • Centered modal popups for “Your swap is ready” — use the banner + queue card combination instead.
  • Coloured left-border accents to indicate update state — that violates the global “no border accents” rule. Use the tinted background.
  • Auto-resuming the swap when the update arrives — the user must explicitly tap. They may be mid-conversation with another rider.

Reference implementation

Section titled “Reference implementation”

See .parked-section and JS parkActiveSwap() / renderParkedSwaps() / triggerParkedUpdate() / resumeSwap() in products/rechaj-swap-app/prototypes/support-cases-v2.html.