Skip to main content

CheckinList

Implemented

Door-operations check-in queue — one row per attendee (name, ticket tier, door, optional pre-formatted scan time) with a live state dot and a semantic state pill (En attente / En cours / Admis / Refusé). Rows in the scanning state expose inline Admettre/Refuser buttons (visual only — no callbacks). Fully presentational static list: the caller owns scan wiring; no fetching, no Medusa subscription.

Categoryorganisms
Sourcecomponents/organisms/checkinlist/CheckinList.tsx
AI HintDoor check-in queue for scanner agents — pair with QRScanner for the scan surface. Fully presentational: the Admettre/Refuser buttons have no onClick callbacks yet (onAdmit/onReject would be an ADR follow-up) and there is no aria-live region; the caller owns scan wiring and list updates. locale switches every built-in string (pills, door meta, actions). Dormant organism — zero live consumers today (verified 2026-09-14: no import in storefront, client-portal, cashier or scanner-pwa).

File d'attente à la porte pour les scanners (en attente, en cours, admis, refusé). FR-CA : « En attente · En cours · Admis · Refusé · Admettre · Refuser ».

CheckinList

Organism — Scanner family (Family 6)

Liste verticale utilisée par les agents de porte. Le badge sémantique reflète l'état (gris, bleu, emerald, rose). Des boutons Admettre/Refuser n'apparaissent que pour les scans en cours.

  • Marie Tremblay

    Admission générale · Porte 4 · scanné à 19:42:15

    Admis

  • Jean-Pierre Gauthier

    Première balcon · Porte 2

    En cours

  • Sophie Lavoie

    Admission générale · Porte 4

    En attente

  • Mehdi Boudjellal

    Balcon deuxième · Porte 2

    Refusé

This component supports light and dark mode.

Props

Prop
Type
Default
Description
rows*
CheckinRow[]
—

Lignes : { id, attendeeName, ticketTier, door, state, scannedAt? } — id sert de clé React, scannedAt est pré-formaté (rendu tel quel).

locale
'fr' | 'en'
fr

Bascule tous les libellés intégrés : pills d’état, ligne « Porte » / « Door », préfixe « scanné à » / « scanned at » et boutons.

className
string
—

Classes additionnelles sur le <ul> racine.

Props

Preview

CheckinList

Prop
Type
Required
Default
Description
rows
CheckinRow[]
Required
—

Queue rows: { id; attendeeName; ticketTier; door; state: 'waiting' | 'scanning' | 'admitted' | 'rejected'; scannedAt? } — id is the React key, scannedAt is a pre-formatted string rendered verbatim.

locale
"fr" | "en"
Optional
'fr'

Switches every built-in label: state pills, door meta line, scan-time prefix and admit/reject action labels.

className
string
Optional
—

Appended to the root <ul> class list.

Quick use:<CheckinList />

Accessibility

ARIA rolelist

Type

1 rule

NASA Rule 5

rows required; every row.state must be one of waiting|scanning|admitted|rejected (STATE_CLASS map keys)

ARIA

1 rule

WCAG 4.1.2

Root is <ul role='list'> with a locale-aware aria-label and one <li key={id}> per row; state dot is aria-hidden; admit/reject buttons carry visible text labels with focus-visible rings; no aria-live region (live announcements are the caller's responsibility)

Usage

Import

tsxSnippet
import { CheckinList } from "@epasslive/design-system"

Example 1

tsxSnippet
<CheckinList rows={[{ id: "r1", attendeeName: "Marie Tremblay", ticketTier: "Admission générale", door: "4", state: "admitted", scannedAt: "19:42:15" }, { id: "r2", attendeeName: "Jean-Pierre Gauthier", ticketTier: "Première balcon", door: "2", state: "scanning" }]} />

Example 2

tsxSnippet
<CheckinList rows={queue} locale="en" className="max-w-xl" />

Anti-patterns

— Do not expect onAdmit/onReject callbacks or live Medusa subscriptions — the legacy Ventixe eventId/initialScans API was never implemented here

— Do not wrap in an aria-live region without debouncing — a busy door queue would re-announce the whole list

— scannedAt is a pre-formatted string rendered verbatim — do not pass a raw timestamp expecting the organism to format it

Design System v4.1.0 | ePassLive