Review UI Components

UI components for scan review and card management workflows

Overview

The Review UI system provides components for reviewing ML detection results, managing card ownership, and handling user corrections. These components are specifically designed for the card collection management workflow.

Key Features:

  • Detection Cards: Visual display of ML results with confidence scores
  • Badge System: Confidence percentages and tile position indicators
  • Condition Controls: TCG condition grading interface
  • Ownership Tracking: User-specific card collection management

Detection Card Component

The core component for displaying individual card detection results. Combines image preview, confidence metrics, and enrichment data in a unified card layout.

Basic Detection Card

Standard detection card with confidence badge and tile indicator

Card Image
94.2%
A1

Charizard ex

Scarlet & Violet

Double Rare

$45.00


<div className="detection-card">
  <div className="detection-image">
    <img src="/path/to/card.jpg" alt="Card" className="crop-image" />
    <div className="confidence-badge">94.2%</div>
    <div className="tile-badge">A1</div>
  </div>
  <div className="detection-details">
    <h4 className="card-name">Charizard ex</h4>
    <p className="card-set">Scarlet & Violet</p>
    <p className="card-rarity">Double Rare</p>
    <p className="card-price">$45.00</p>
  </div>
</div>

Badge System

Overlay badges provide quick visual feedback about detection quality and spatial context.

Badge Styling

CSS for confidence and tile position badges

96.7%
B2

/* Confidence Badge - Shows ML detection confidence */
.confidence-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Tile Badge - Shows 3x3 grid position */
.tile-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: rgba(59, 130, 246, 0.9);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

Badge Types:

  • Confidence Badge: Shows ML detection confidence (0-100%)
  • Tile Badge: Shows 3x3 grid position (A1-C3)

Condition Controls

Specialized form controls for TCG card condition grading, following industry standards.

Condition Select

Dropdown for standard TCG condition grades


<div className="ownership-controls">
  <label>
    Condition:
    <select className="condition-select" value="near_mint">
      <option value="mint">Mint</option>
      <option value="near_mint">Near Mint</option>
      <option value="lightly_played">Lightly Played</option>
      <option value="moderately_played">Moderately Played</option>
      <option value="heavily_played">Heavily Played</option>
      <option value="damaged">Damaged</option>
    </select>
  </label>
</div>

Usage Guidelines

Best Practices:

  • Detection Cards: Always include confidence badges for ML results
  • Grid Layout: Use consistent spacing for detection card grids
  • Condition Controls: Provide immediate visual feedback on changes
  • Error States: Show clear indicators for unidentified cards
  • Loading States: Use skeleton loaders during enrichment

Technical Implementation

The review UI components integrate with the normalized card ownership architecture, reading from card_detections and user_cards tables.

Key Data Flow:

  1. ML pipeline creates card_detections records
  2. Enrichment process links to cards catalog
  3. User ownership recorded in user_cards
  4. Review UI displays unified view with correction capabilities