Design Specification: Smart Intake - Identification State

Screen ID: FIL-003-B State: 2 of 3 (Identify) Context: Occurs immediately after a successful barcode/QR scan. Objective: Validate the identity of the spool before committing it to the inventory.

1. User Experience Goals

Frictionless Validation: If the scan is high-confidence, the user should only need to tap "Confirm".
Error Correction: Provide easy paths to correct misidentified attributes without restarting the entire flow.
Glanceability: Use color-coded confidence bars so the user knows immediately if the system is "sure" or "guessing".

2. Visual Hierarchy & Layout

2.1 Global Header

Top App Bar: md-top-app-bar (Small).
- Leading: Close icon (✕) -> Returns to Inventory with "Discard changes?" prompt.
- Title: "Smart Intake"
Step Indicator: Custom linear stepper.
- Scan (Completed: Green check) \rightarrow Identify (Active: Blue filled) \rightarrow Update (Pending: Grey outline).

2.2 Main Content Area

The content is organized as a vertical stack of cards/inputs to ensure touch-first accessibility.

A. Confidence Card (`md-card` - filled)

Label: "Scanned: [Barcode Value]" (Monospace)
Confidence Metric: "Match: HIGH CONFIDENCE"
Visual Indicator: A linear progress bar.
- High (≥80%): Success Green (#16A34A / #4ADE70)
- Medium (40-79%): Warning Yellow (#CA8A04 / #FACC15)
- Low (<40%): Error Red (#DC2626 / #F87171)
Percentage: Displayed as text (e.g., "92%") at the end of the bar.

B. Attribute Selection (Input Group)

Material Selector: md-dropdown-select (Searchable).
- Pre-fill: Based on scan result.
Brand Selector: md-dropdown-select (Searchable).
- Pre-fill: Based on scan result.
Color Picker: Custom circular swatch grid.
- Interaction: Tap to select. Selected swatch has a high-contrast ring indicator.
- Custom Option: A "Custom" button that opens a text input for unique colors.
Finish & Modifier: md-chip-set (Single select).
- Finish: [Basic, Matte, Silk, Sparkle, Metallic, Translucent]
- Modifier: [None, Carbon Fiber, Wood Fill, Glow-in-Dark, Marble, Gradient]

2.3 Action Bar (Footer)

Rescan Button: md-outlined-button. Transitions user back to State 1 (Scan).
Confirm Button: md-filled-button. Primary CTA. Transitions user to State 3 (Update).
- Constraint: Disabled until Material, Brand, and Color are selected.

3. Technical Specifications

3.1 Dimensions & Touch Targets

Touch Targets: Minimum 44x44px for all buttons, dropdowns, and swatches.
Padding: 16px internal card padding; 24px external margin between major sections.
Typography:
- Title: Display Small (text-3xl font-bold)
- Section Labels: Label Medium (text-sm font-medium)
- Value Text: Body Large (text-base font-normal)

3.2 Theme Mapping

Element	Kiosk (Dark)	Mobile (Light)
Background	`#0F172A`	`#F8FAFC`
Surface	`#1E293B`	`#FFFFFF`
Primary	`#60A5FA`	`#2563EB`
Text Primary	`#F1F5F9`	`#0F172A`
Text Secondary	`#94A3B8`	`#475569`

4. State Transitions

Transition: Scan `\rightarrow` Identify

Trigger: Barcode detected and decoded.
Animation:
1. Scanning frame flashes Green.
2. A "Slide-in" transition from the right (300ms ease-out).
3. Step indicator dot for "Scan" transforms into a checkmark.
4. Step indicator dot for "Identify" fills with Primary color.

Transition: Identify `\rightarrow` Update

Trigger: "Confirm" button tapped.
Animation:
1. Slide-in transition from the right (300ms ease-out).
2. Step indicator dot for "Identify" transforms into a checkmark.
3. Step indicator dot for "Update" fills with Primary color.

5. Edge Cases & Error Handling

No Match Found: Confidence bar is Red (0%). All dropdowns are empty. System displays a hint: "Barcode unknown. Please enter details manually."
Ambiguous Match: Confidence bar is Yellow. Material and Brand are pre-filled, but Color is highlighted with a "Review Required" pulse.
Invalid Input: If a user attempts to confirm without required fields, the missing fields pulse Red.

4.3 KiB Raw Blame History