F1 component kit/Media/Photo-review lightbox and verdict buttonsDesktop

Photo-review lightbox and verdict buttons

Missing · new33 · photo-review

Vision checks and QC photos: the photo on a dark stage with prev / next and zoom, the AI verdict and rule, the Pass / Fail buttons with P / F (the fixed version), a failure-reason picker, and a throttled re-run (Q3). Phone: one photo per screen, big buttons, swipe.

Covers: M10. Exports: PhotoReview, VerdictButton.

Whole page:Phone is fixed at comfortable (POWERUPS #15).Laravel · navyDTC · midnight green

Anatomy

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

12 / 48

4521-1 · JA · Design p1.1AI verdict: Fail · 0.71

Swipe ← → for the next photo; no keyboard hints on phone.

States

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

default

12 / 48

4521-1 · JA · Design p1.1AI verdict: Fail · 0.71

Swipe ← → for the next photo; no keyboard hints on phone.

keyboard focus on Pass

12 / 48

4521-1 · JA · Design p1.1AI verdict: Fail · 0.71

Swipe ← → for the next photo; no keyboard hints on phone.

Pass chosen

12 / 48

4521-1 · JA · Design p1.1AI verdict: Fail · 0.71

Swipe ← → for the next photo; no keyboard hints on phone.

Fail chosen

12 / 48

4521-1 · JA · Design p1.1AI verdict: Fail · 0.71

Swipe ← → for the next photo; no keyboard hints on phone.

Fail · reason picker

12 / 48

4521-1 · JA · Design p1.1AI verdict: Fail · 0.71

Lapel roll unevenPick stitch missingWrong lining colour

Swipe ← → for the next photo; no keyboard hints on phone.

re-run throttled (429)

12 / 48

4521-1 · JA · Design p1.1AI verdict: Fail · 0.71

Swipe ← → for the next photo; no keyboard hints on phone.

photo loading

12 / 48

4521-1 · JA · Design p1.1AI verdict: Fail · 0.71

Swipe ← → for the next photo; no keyboard hints on phone.

photo failed

12 / 48

4521-1 · JA · Design p1.1AI verdict: Fail · 0.71

Swipe ← → for the next photo; no keyboard hints on phone.

Density

The phone shell is always comfortable (POWERUPS #15): 44px tap targets, 16px inputs. Compact exists on desktop only; see the desktop page.

comfortable · phone default

12 / 48

4521-1 · JA · Design p1.1AI verdict: Fail · 0.71

Swipe ← → for the next photo; no keyboard hints on phone.

English · 中文

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

12 / 48

4521-1 · JA · Design p1.1AI verdict: Fail · 0.71

Swipe ← → for the next photo; no keyboard hints on phone.

中文 · lang=zh-Hans

12 / 48

4521-1 · JA · 款式 p1.1AI 判定：不通过 · 0.71

左右滑动切换；手机不显示快捷键。

Long string · permission denied

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

long string

12 / 48

4525-1 · JA · HF Design p3.5.4 · The Cambridge Gentleman’s OutfittersAI verdict: Fail · 0.71

Swipe ← → for the next photo; no keyboard hints on phone.

permission denied

12 / 48

4521-1 · JA · Design p1.1AI verdict: Fail · 0.71

Swipe ← → for the next photo; no keyboard hints on phone.

Contract

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

Export: PhotoReview · @rj/admin-kit
Props: items · index · onVerdict (pass|fail, reason) · onRerun · reasons
States: loading · ready · pass · fail · reason · throttled · resolved · image-error · denied
shadcn / Radix: Dialog (full) + ToggleGroup (verdict) + Command (reasons)
Package underneath: react-hotkeys-hook (P / F / ← → / Z) · react-zoom-pan-pinch · react-swipeable (phone)
Accessibility: verdict is a toggle group; keys are listed, not required
API operations: admin.vision-checks.results.index / .resolve / .rerun (throttled, Q3) · admin.orders.qc-photos · admin.orders.photos.index · admin.fabric-photos.batches.show
Phone variant: one photo per screen, big Pass / Fail, swipe

Export: VerdictButton · @rj/admin-kit
Props: kind pass|fail · pressed · size md|big · hotkey
States: default · focus · pressed · disabled
Accessibility: aria-pressed; the key hint is aria-hidden (the shortcut is in aria-keyshortcuts)