F1 component kit/Utilities/QR displayPhone

QR display

Missing · new36 · qr-display

An accessory code's durable QR link: the code rendered client-side from the short URL (this specimen's code is real and scans), the target, scan count, copy, download and re-point (printed tags keep working).

Covers: M13. Exports: QrDisplay.

Whole page:CompactComfortableLaravel · navyDTC · midnight green
AnatomyStatesDensityEN · 中文Edge casesContract

Anatomy

The component as it sits in the product: English, compact, real data shapes.

k3x9Q2https://qr.supplycha.com/k3x9Q2Targethttps://app.rjmtm.com/accessory/AC-0412Scans 1,284 · last

States

5 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.

default
k3x9Q2https://qr.supplycha.com/k3x9Q2Targethttps://app.rjmtm.com/accessory/AC-0412Scans 1,284 · last
re-pointing
k3x9Q2https://qr.supplycha.com/k3x9Q2Targethttps://app.rjmtm.com/accessory/AC-0412Scans 1,284 · last
https://app.rjmtm.com/accessory/AC-0418
Printed tags keep working; they open the new target.
no link yet
No QR link yetMinted on first print of this accessory code.
loading
k3x9Q2https://qr.supplycha.com/k3x9Q2Targethttps://app.rjmtm.com/accessory/AC-0412Scans 1,284 · last
error

QR link didn’t load

admin.accessory-qr.show answered 500.

Density

Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.

compact · default · data-density=compact
k3x9Q2https://qr.supplycha.com/k3x9Q2Targethttps://app.rjmtm.com/accessory/AC-0412Scans 1,284 · last
comfortable · data-density=comfortable
k3x9Q2https://qr.supplycha.com/k3x9Q2Targethttps://app.rjmtm.com/accessory/AC-0412Scans 1,284 · last

English · 中文

Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.

en
k3x9Q2https://qr.supplycha.com/k3x9Q2Targethttps://app.rjmtm.com/accessory/AC-0412Scans 1,284 · last
中文 · lang=zh-Hans
k3x9Q2https://qr.supplycha.com/k3x9Q2目标https://app.rjmtm.com/accessory/AC-0412扫描 1,284 · 最近

Long string · permission denied

The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).

long string
k3x9Q2https://qr.supplycha.com/k3x9Q2Targethttps://app.rjmtm.com/accessory/AC-0412?utm_source=hang-tag&utm_medium=print&utm_campaign=autumn-winter-2026-capsule-the-cambridge-gentlemans-outfittersScans 1,284 · last
permission denied
k3x9Q2https://qr.supplycha.com/k3x9Q2Targethttps://app.rjmtm.com/accessory/AC-0412Scans 1,284 · last Re-point needs edit accessory codes

Both apps

One @rj/admin-kit component, two themes: the Laravel admin (navy pinned) and the DTC admin (kit v4 Midnight green), by token swap only.

Laravel admin · :root
k3x9Q2https://qr.supplycha.com/k3x9Q2Targethttps://app.rjmtm.com/accessory/AC-0412Scans 1,284 · last
DTC admin · data-theme=dtc
k3x9Q2https://qr.supplycha.com/k3x9Q2Targethttps://app.rjmtm.com/accessory/AC-0412Scans 1,284 · last

Contract

The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.

Export
QrDisplay · @rj/admin-kit
Props
shortUrl · shortCode · target · scans · onRepoint
States
default · repointing · none · loading · error · read-only
shadcn / Radix
Card + Button
Package underneath
qrcode.react
Accessibility
the image has the URL as its accessible name
API operations
admin.accessory-qr.show · admin.accessory-qr.repoint
Phone variant
same, stacked