Module Overview
Purpose: AI-powered delivery verification with image recognition and invoice matching
Primary Users: Receiving staff, Kitchen managers
Key Features: Camera capture, AI recognition, Invoice verification, Discrepancy handling
Average Flow Time: 2-3 minutes per delivery
Screen 1: Delivery List Dashboard
UX Note: This is the entry point. Users see all deliveries (pending, in-progress, completed). Quick access to start new delivery.
Today (3)
Pending (5)
Completed (12)
Fresh Produce Co.
Expected: 9:00 AM
In Progress
Premium Meats Ltd
Expected: 10:30 AM
Scheduled
Dairy Supply Inc
Completed: 8:15 AM
Verified
Mobile view collapses to single column with swipe gestures between tabs
Screen 2: New Delivery Setup
UX Note: Simple 2-step setup: Select supplier, then select/upload invoice. Fast dropdown with search.
Screen 3: Camera Capture & AI Recognition
UX Note: Full-screen camera with overlay guides. AI processes image in background. Option to take multiple photos.
📷
Camera Viewfinder
Position items in frame
AI recognition happens automatically. Show processing indicator if > 2 seconds
Screen 4: Item Verification & Review
UX Note: AI-recognized items shown in list. Green checkmarks for matches, yellow warnings for discrepancies. Swipe or tap to edit quantities.
Invoice: INV-2024-1234
Expected Items: 12 | Scanned: 11
Chicken Breast (5kg)
✓ Match
Expected: 10 | Received: 10
Tomatoes (2kg)
⚠ Discrepancy
Expected: 20 | Received: 18
Lettuce (1kg)
✕ Missing
Expected: 15 | Received: 0
Color coding: Green = perfect match, Yellow = minor discrepancy, Red = major issue
Screen 5: Confirmation & Summary
UX Note: Final review before completing. Shows summary stats, discrepancies, and actions taken. Option to add notes.
Mobile & Tablet Considerations
Mobile (320px - 640px)
- Single column layout
- Full-screen camera
- Swipe gestures for item list
- Bottom sheet for quick actions
- Large tap targets (min 44px)
Tablet (641px - 1024px)
- 2-column layout where appropriate
- Side-by-side invoice and camera
- Larger preview thumbnails
- Keyboard shortcuts available
- Drag & drop support
Key Interaction States
Loading State
AI processing images...
Show spinner + progress %
Error State
Camera access denied
Provide fallback options
Success State
Delivery completed!
Show confirmation + next action
Module 1 Design Tokens
Colors
- Primary: #3B82F6 (Blue)
- Success: #10B981 (Green)
- Warning: #F59E0B (Yellow)
- Danger: #EF4444 (Red)
Key Measurements
- Card padding: 1.5rem
- Button height: 44px min
- Grid gap: 1rem
- Border radius: 8px