**Prepared by:** Oditha

**Date:** 23 January 2026

**Version:** 1.0

**Reference:** [FRD - HoReCa Field Operations & Workflow Management](https://www.notion.so/FRD-HoReCa-Field-Operations-Workflow-Management-2f7cd2773bc548c9a2595d856f15ac15?pvs=21)

---

## Overview

This document provides detailed wireframe specifications for the **Mobile App** component of the Lion HoReCa Excellence system. The mobile app is built using **Flutter** and integrates into the existing **Commercial Excellence Flutter Mobile App**.

---

## Design Principles

### Mobile-First Approach

-   Touch-friendly targets (minimum 44x44 dp)
-   Thumb-zone optimization for primary actions
-   Offline-first architecture with local data storage
-   Progressive disclosure (show essentials first)

### Visual Design

-   Material Design 3.0 (Android)
-   iOS Human Interface Guidelines (iOS)
-   Consistent color scheme with brand colors
-   Large, readable typography (minimum 14sp for body text)
-   High contrast for outdoor visibility

### Navigation Patterns

-   Bottom navigation for main sections
-   Top app bar for page context
-   Swipe gestures where appropriate
-   Back button follows platform conventions

### Performance

-   Fast loading (<2 seconds per screen)
-   Optimistic UI updates
-   Background sync for offline data
-   Image optimization and lazy loading

---

## Global Navigation Structure

### Bottom Navigation Bar

**Fixed at bottom, always visible (except during workflow execution)**

**Tabs:**

1. **Home** (Icon: 🏠)
2. **Outlets** (Icon: 🏪)
3. **Audits** (Icon: 📋)
4. **Service Requests** (Icon: 🛠️)
5. **Profile** (Icon: 👤)

**Active State:**

-   Icon and label: Primary color
-   Indicator line above icon

**Inactive State:**

-   Icon and label: Gray

**Badge Support:**

-   Red badge with count on Audits (overdue count)
-   Red badge with count on Service Requests (pending count)

### Top App Bar

**Structure:**

-   Left: Back button or menu icon
-   Center: Page title
-   Right: Action buttons (search, filter, notifications)

**Variants:**

-   Standard: Solid color background
-   Transparent: Over hero images
-   Elevated: With shadow on scroll

### Status Bar

**Top of screen, system-controlled**

**Network Status:**

-   Green dot: Online
-   Red dot: Offline
-   Yellow dot: Syncing

**Offline Banner:**

-   Persistent banner below app bar when offline
-   Text: "Offline Mode - Data will sync when connected"
-   Background: Orange
-   Tap to view sync status

---

## Screen Wireframes

### 1. Home Screen (Dashboard)

**Route:** `/home`

**Access:** All users (LSR, TM, SM)

#### Layout

**Top App Bar:**

-   Left: Menu icon (hamburger)
-   Center: "HoReCa Excellence"
-   Right: Notification bell icon (with badge)

**Greeting Section:**

-   Avatar (large, circular)
-   Text: "Good morning, [User Name]"
-   Subtext: Role badge (LSR/TM/SM)

**Quick Stats Cards** (Horizontal scrollable row)

**Card 1: Today's Visits**

-   Icon: 🏪
-   Number: 5/12
-   Label: "Outlets Visited"
-   Progress bar
-   Color: Blue

**Card 2: Workflows Completed**

-   Icon: ✅
-   Number: 18
-   Label: "Completed Today"
-   Color: Green

**Card 3: Pending SRs**

-   Icon: 🛠️
-   Number: 3
-   Label: "Service Requests"
-   Color: Orange
-   Badge: "1 Overdue"

**Card 4: Overdue Audits** (TM only)

-   Icon: ⚠️
-   Number: 2
-   Label: "Audits Overdue"
-   Color: Red

**Quick Actions Section:**

**Section Title:** "Quick Actions"

**Grid: 2x2**

**Button 1: Nearby Outlets**

-   Icon: 📍
-   Label: "Nearby Outlets"
-   Subtext: "3 within 5km"
-   Action: Navigate to Outlets tab with geolocation filter

**Button 2: My Audits** (TM only)

-   Icon: 📋
-   Label: "My Audits"
-   Subtext: "2 due this week"
-   Action: Navigate to Audits tab

**Button 3: Pending SRs**

-   Icon: 🛠️
-   Label: "Service Requests"
-   Badge: Count
-   Action: Navigate to SR tab

**Button 4: Team Performance** (TM/SM only)

-   Icon: 📊
-   Label: "Team Dashboard"
-   Action: Navigate to team dashboard

**Recent Activity Section:**

**Section Title:** "Recent Activity"

**Link:** "View All"

**List: Last 5 activities**

Each item shows:

-   Icon (based on activity type)
-   Primary text: "Cooler Workflow completed at ABC Restaurant"
-   Timestamp: "2 hours ago"
-   Right chevron icon

**Activity Types:**

-   Visit completed
-   Workflow executed
-   Service request created
-   Audit completed

**Empty State:**

-   Illustration
-   Text: "No recent activity"
-   Subtext: "Your activities will appear here"

**Floating Action Button:**

-   Icon: + (plus)
-   Position: Bottom right
-   Action: Quick Check-In (if near outlet) or Show Quick Actions menu
-   Color: Primary

---

### 2. Outlets List Screen

**Route:** `/outlets`

**Access:** All users

#### Layout

**Top App Bar:**

-   Left: Menu icon
-   Center: "My Outlets"
-   Right: Search icon, Filter icon

**Location Permission Banner** (if not granted):

-   Background: Light blue
-   Icon: 📍
-   Text: "Enable location to see nearby outlets"
-   Button: "Enable"
-   Dismissible

**Search Bar** (When search icon tapped):

-   Placeholder: "Search outlets..."
-   Fuzzy search (name, address)
-   Clear button
-   Results update in real-time

**Filter Chip Row** (Horizontal scrollable)

-   Chip: "Nearby" (default, requires location)
-   Chip: "All" (shows all assigned outlets)
-   Chip: "Unvisited"
-   Chip: "With Overdue Audit"
-   Chip: "With Pending SR"
-   Chip: "By Type" (opens type selector)

**Sort Dropdown:**

-   Options:
    -   Distance (nearest first) - default
    -   Name (A-Z)
    -   Last Visit (oldest first)
    -   Never Visited

**Outlets List:**

**List Item Structure:**

**Card layout per outlet:**

**Top Row:**

-   Left: Outlet Type icon (🏨/🍽️/☕/🍺)
-   Right: Distance from current location (e.g., "1.2 km") or Last visited (if far)

**Outlet Name** (bold, large text)

**Address** (gray, truncated to 1 line)

**Status Indicators Row:**

-   If overdue audit: ⚠️ "Audit Overdue" (red badge)
-   If pending SR: 🛠️ "SR Pending" (orange badge)
-   Last visit: "Visited 3 days ago" (gray text)

**Bottom Row:**

-   Button: "View Details" (ghost button)
-   Button: "Check In" (primary button, prominent)

**Swipe Actions:**

-   Swipe right: Quick Check-In
-   Swipe left: View Details

**Pull to Refresh:**

-   Pull down to refresh outlet list and distances

**Empty State:**

-   Illustration
-   Text: "No outlets assigned"
-   Subtext: "Contact your manager to assign outlets"

**Loading State:**

-   Skeleton screens while loading
-   Shimmer effect

---

### 3. Outlet Detail Screen

**Route:** `/outlets/{id}`

**Access:** All users

#### Layout

**Top App Bar:**

-   Left: Back button
-   Center: Outlet name (scrolls with content)
-   Right: Share icon, More menu (3 dots)

**Hero Section:**

-   Background: Gradient or image
-   Outlet name (large, white text)
-   Outlet type badge
-   Address with location icon
-   Distance from current location

**Action Buttons Row:**

-   Button: "📍 Directions" (opens maps app)
-   Button: "📞 Call" (if phone number available)
-   Button: "Check In" (primary, full width if not checked in)

**Check-In Status Banner** (if checked in):

-   Background: Green
-   Text: "Checked in at 10:30 AM"
-   Timer: "00:45:32" (elapsed time)
-   Button: "Check Out" (prominent)

**Tabs Section:**

**Tab 1: Workflows**

**Section Title:** "Available Workflows"

List of workflows from outlet's assigned template:

**Workflow Card:**

-   Icon (colored, from workflow config)
-   Workflow name
-   Category badge
-   Steps count: "8 steps"
-   Status:
    -   Not Started: Gray
    -   In Progress: Yellow badge ("3/8 steps")
    -   Completed: Green checkmark with timestamp
-   Button: "Start" or "Continue" or "View"

**Tap card:** Navigate to workflow execution

**Empty State:**

-   Text: "No workflows configured"
-   Subtext: "Contact admin to assign workflows"

**Tab 2: Audit**

**POSM Audit Section:**

**If audit scheduled:**

-   Card:
    -   Title: "POSM Audit"
    -   Status badge: "Scheduled" / "Due Today" / "Overdue"
    -   Scheduled Date
    -   Due Date
    -   Countdown: "2 days remaining"
    -   Button: "Execute Audit" (primary)

**If no audit:**

-   Text: "No audit scheduled"

**Audit History:**

-   Link: "View Past Audits"
-   List: Last 3 audits
    -   Date
    -   Status: Completed
    -   Variance summary: "±5% from norm"

**Tab 3: Service Requests**

**Section Title:** "Service Requests"

**Link:** "+ Create New"

List of service requests related to this outlet:

**SR Card:**

-   SR ID (e.g., SR-00123)
-   Title
-   Category badge
-   Status badge
-   Priority indicator (color bar on left)
-   SLA countdown or "Overdue" badge
-   Assigned to: Avatar + name
-   Tap to view details

**Filter:**

-   Chip: "All"
-   Chip: "Open"
-   Chip: "My Requests"

**Empty State:**

-   Text: "No service requests"
-   Button: "+ Create Request"

**Tab 4: Info**

**Outlet Information:**

-   Outlet Type
-   Territory
-   Region
-   Assigned LSR
-   Assigned TM
-   Assigned SM

**Contact Details:**

-   Phone (tap to call)
-   Email (tap to email)

**Equipment Inventory:**

-   List: Coolers, branding materials, pouring materials
-   Expandable sections

**Configured Brands:**

-   Must-Have Brands (list)
-   Optional Brands (list)

**Visit History:**

-   Link: "View All Visits"
-   Last 5 visits with:
    -   Date
    -   Time spent
    -   Workflows completed
    -   Visited by (if TM/SM viewing)

---

### 4. Check-In Screen

**Route:** `/outlets/{id}/check-in`

**Access:** All users

**Trigger:** Tap "Check In" button on outlet detail

#### Layout

**Top App Bar:**

-   Left: Back button
-   Center: "Check In"

**Outlet Info Card:**

-   Outlet name
-   Address
-   Distance from current location

**Geolocation Status:**

**If within geofence (≤100m):**

-   Icon: ✅ (green checkmark)
-   Text: "You are at the outlet location"
-   Background: Light green

**If outside geofence (>100m):**

-   Icon: ⚠️ (warning)
-   Text: "You are 250m away from outlet"
-   Subtext: "Are you sure you're at the correct location?"
-   Background: Light orange
-   Checkbox: "Confirm location" (required to proceed)
-   Field: "Reason for remote check-in" (text area, required if outside)

**Map View:**

-   Shows outlet marker (red pin)
-   Shows user location marker (blue dot)
-   Zoom level: Fits both markers

**Check-In Details:**

-   Field: Check-in Time (auto-populated, read-only)
-   Field: Purpose of Visit (optional, dropdown):
    -   Routine Visit
    -   Service Request Follow-Up
    -   POSM Audit
    -   Other

**Action Buttons:**

-   Button: "Cancel" (secondary)
-   Button: "Check In" (primary, full width, disabled until validation passes)

**After Check-In:**

-   Success animation
-   Toast: "Checked in successfully"
-   Auto-navigate to Outlet Detail screen

---

### 5. Workflow Execution Screen

**Route:** `/outlets/{id}/workflows/{workflow_id}/execute`

**Access:** All users (must be checked in)

**Trigger:** Tap "Start" on workflow card

#### Layout

**Top App Bar:**

-   Left: Close button (with confirmation dialog)
-   Center: Workflow name
-   Right: Save Draft button (icon)

**Progress Indicator:**

-   Linear progress bar showing completion %
-   Text: "Step 3 of 8"

**Step Content Area:**

**Step Header:**

-   Step number badge (circular, colored)
-   Step name (large, bold)

**Step Description:**

-   Gray text, multiple lines if needed

**Instructions Section** (if configured):

-   Expandable card
-   Title: "Instructions" with dropdown icon
-   Content: Rich text (tap to expand)

**Sample Photo** (if configured):

-   Title: "Reference Photo"
-   Thumbnail (tap to view full-screen)
-   Caption below

**Question Section:**

**If Question Type = Selection:**

**For Yes/No:**

-   Two large buttons:
    -   Button: "Yes" (green when selected)
    -   Button: "No" (red when selected)
-   Single selection

**For Single Choice:**

-   Radio buttons (large touch targets)
-   Options listed vertically
-   One option selected at a time

**For Multiple Choice:**

-   Checkboxes (large touch targets)
-   Options listed vertically
-   Multiple options can be selected

**If Question Type = Text Area:**

-   Multi-line text input
-   Placeholder: "Enter your response..."
-   Character counter (if limit defined)
-   Soft keyboard auto-opens

**Photo Capture Section** (if configured):

-   Title: "Capture Photos"
-   Button: "📷 Take Photo" (opens camera)
-   Button: "🖼️ Choose from Gallery"
-   Photo count: "2 of 5 photos" (if multiple required)
-   Thumbnail grid of captured photos
-   Tap photo to view full-screen or delete

**Remarks Field** (if enabled):

-   Label: "Additional Remarks (optional)"
-   Text area
-   Placeholder: "Add any notes..."

**Skip Option** (if enabled and step not mandatory):

-   Link: "Skip this step" (gray, bottom of screen)
-   Tap opens modal:
    -   Title: "Skip Step"
    -   Dropdown: "Reason for skipping" (required)
        -   Options configured in workflow
    -   Text area: "Additional details" (optional)
    -   Button: "Confirm Skip"

**Navigation Buttons:**

-   Button: "Previous" (secondary, left)
-   Button: "Next" (primary, right, disabled until required fields filled)

**Last Step:**

-   Button: "Submit Workflow" (instead of "Next")

**Conditional Logic:**

-   If step is hidden by condition: Skip automatically, show toast "Step skipped based on previous response"
-   Progress bar updates to reflect only visible steps

**Save Draft:**

-   Auto-saves every 30 seconds (if online)
-   Manual save via top bar icon
-   Toast: "Draft saved"

**Exit Confirmation:**

-   If user taps Close button:
    -   Dialog: "Save as draft or discard?"
    -   Button: "Save Draft"
    -   Button: "Discard" (destructive)
    -   Button: "Cancel"

**Submission Success:**

-   Success animation
-   Toast: "Workflow submitted successfully"
-   If service request triggered:
    -   Alert: "Service request SR-00123 created"
    -   Button: "View Request"
-   Auto-navigate back to Outlet Detail

---

### 6. POSM Audit Execution Screen

**Route:** `/outlets/{id}/audit/{audit_id}/execute`

**Access:** TMs only (must be checked in)

**Trigger:** Tap "Execute Audit" on outlet detail

#### Layout

**Top App Bar:**

-   Left: Back button (with confirmation)
-   Center: "POSM Audit"
-   Right: Save Draft button

**Audit Info Card:**

-   Outlet name
-   Scheduled Date
-   Due Date
-   Status badge

**Norms Sheet Section:**

-   Title: "Reference Norms"
-   Button: "View Norms Sheet" (opens modal)

**Norms Modal:**

-   Title: "POSM Norms for [Outlet Type]"
-   Table view (scrollable):
    -   Column 1: Material Name
    -   Column 2: Category
    -   Column 3: Standard Qty
-   Close button

**Audit Form:**

**List of Materials:**

Each material displayed as expandable card:

**Card Header (Collapsed):**

-   Material name
-   Category badge
-   Norm quantity (gray): "Norm: 2"
-   Actual quantity (bold, colored based on variance)
-   Variance badge: "+1" (green) or "-1" (red) or "0" (gray)
-   Expand icon

**Card Body (Expanded):**

**Norm Quantity:**

-   Label: "Standard Norm"
-   Value: 2 (read-only)

**Actual Quantity:**

-   Label: "Actual Quantity"
-   Number input (stepper: - and + buttons)
-   Large touch targets

**Variance:**

-   Auto-calculated: Actual - Norm
-   Displayed with color:
    -   Positive: Green "+ 1"
    -   Negative: Red "- 1"
    -   Zero: Gray "0"

**Remarks:**

-   Text area
-   Placeholder: "Add remarks if variance exists..."
-   Required if |variance| > threshold (e.g., >20%)

**Restocking Needed:**

-   Checkbox: "Mark for restocking"
-   If checked: Auto-fills quantity needed

**Bottom Actions:**

-   Button: "Save Draft" (secondary)
-   Button: "Submit Audit" (primary, full width)

**Validation:**

-   All materials must have actual quantity entered
-   Remarks required for significant variances

**Submission:**

-   Confirmation dialog:
    -   Title: "Submit POSM Audit?"
    -   Text: "You won't be able to edit after submission"
    -   Checkbox: "Schedule next audit (20 days from today)"
    -   Button: "Cancel"
    -   Button: "Submit"
-   Success toast: "Audit submitted successfully"
-   Navigate back to Outlet Detail

---

### 7. Service Requests List Screen

**Route:** `/service-requests`

**Access:** All users

#### Layout

**Top App Bar:**

-   Left: Menu icon
-   Center: "Service Requests"
-   Right: Filter icon, Search icon

**Filter Chip Row:**

-   Chip: "All" (default)
-   Chip: "My Requests" (created by me)
-   Chip: "Assigned to Me"
-   Chip: "Open"
-   Chip: "Overdue"

**Sort Dropdown:**

-   SLA Due (urgent first)
-   Created Date (newest first)
-   Priority (high first)

**Service Request List:**

**List Item Structure:**

**Card per SR:**

**Top Row:**

-   SR ID (small, gray): "SR-00123"
-   Status badge (right-aligned)

**Title** (bold, 2 lines max, truncated)

**Metadata Row:**

-   Category badge
-   Priority indicator (colored dot + text)
-   Outlet name (with icon)

**SLA Section:**

-   If within SLA:
    -   Text: "Due in 4 hours" (gray)
    -   Progress bar (yellow if <6 hours, green if >6 hours)
-   If overdue:
    -   Text: "Overdue by 2 hours" (red, bold)
    -   No progress bar

**Assignment:**

-   Avatar (small) + "Assigned to [Name]"

**Bottom Row:**

-   Created date (gray, small)
-   Right: Chevron icon

**Swipe Actions:**

-   Swipe right: Update Status (quick actions)
-   Swipe left: View Details

**Pull to Refresh**

**Empty State:**

-   Illustration
-   Text: "No service requests"
-   Subtext: "Requests you create or are assigned will appear here"

**Floating Action Button:**

-   Icon: + (plus)
-   Label: "Create Request"
-   Position: Bottom right
-   Color: Primary

---

### 8. Service Request Detail Screen

**Route:** `/service-requests/{id}`

**Access:** Creator, assigned user, admins

#### Layout

**Top App Bar:**

-   Left: Back button
-   Center: SR ID (e.g., "SR-00123")
-   Right: More menu (3 dots):
    -   Share
    -   Print
    -   Delete (if allowed)

**Status Section:**

-   Large status badge (centered)
-   Priority indicator below

**Action Buttons** (Based on current status and user role):

**If status = Open and user = assigned:**

-   Button: "Start Work" (changes status to In Progress)

**If status = In Progress and user = assigned:**

-   Button: "Mark Resolved" (changes status to Resolved)

**If status = Resolved and user = TM/SM:**

-   Button: "Close" (changes status to Closed)
-   Button: "Reopen" (changes status to In Progress)

**Any status:**

-   Button: "Reassign" (opens reassignment modal)

**Details Card:**

**Title** (bold, large)

**Description** (multi-line, expandable if long)

**Context Info:**

-   Category badge
-   Priority badge
-   Outlet name (clickable link to outlet)
-   Related workflow (if applicable, link)
-   Related step (if applicable)

**Timeline Card:**

**SLA Section:**

-   Label: "SLA Due"
-   DateTime with countdown
-   Progress bar (colored based on urgency)
-   If overdue: Red text "Overdue by X hours"

**Timestamps:**

-   Created: Date/Time
-   In Progress Since: Date/Time (if applicable)
-   Resolved: Date/Time (if applicable)
-   Closed: Date/Time (if applicable)

**Assignment Card:**

-   Avatar (large)
-   Assigned To: Name
-   Role badge
-   Button: "Reassign" (if user has permission)

**Created By Card:**

-   Avatar
-   Name
-   Role badge
-   Created Date/Time

**Activity Log Section:**

**Section Title:** "Activity"

**Timeline View:**

Each activity item:

-   Vertical line connecting items
-   Dot (colored by activity type)
-   Activity description:
    -   Text: "Status changed from Open to In Progress"
    -   User: "by [Name]"
    -   Timestamp: "2 hours ago"
-   Comments (if any): Indented, card style

**Activity Types:**

-   Status change
-   Reassignment
-   Comment added
-   Attachment added

**Add Comment Section:**

-   Text area: "Add a comment..."
-   Button: "📎 Attach" (opens file picker)
-   Button: "Send" (primary)

**Attachments Section:**

-   Title: "Attachments"
-   Grid of thumbnails (photos)
-   Other files shown as list with icons
-   Tap to view full-screen

---

### 9. Audits Screen

**Route:** `/audits`

**Access:** TMs only

#### Layout

**Top App Bar:**

-   Left: Menu icon
-   Center: "My Audits"
-   Right: Calendar icon (view calendar), Filter icon

**Filter Chip Row:**

-   Chip: "All"
-   Chip: "Scheduled"
-   Chip: "Due This Week"
-   Chip: "Overdue"
-   Chip: "Completed"

**Audits List:**

**List Item Structure:**

**Card per audit:**

**Top Row:**

-   Outlet type icon
-   Status badge (right-aligned):
    -   Scheduled: Blue
    -   Due Today: Yellow
    -   Overdue: Red
    -   Completed: Green

**Outlet Name** (bold)

**Address** (gray, truncated)

**Dates Section:**

-   Scheduled Date
-   Due Date
-   If overdue: "Overdue by X days" (red, bold)
-   If upcoming: "Due in X days" (gray)

**Progress Indicator:**

-   If in progress: Progress bar (% complete)
-   If completed: Green checkmark + date

**Bottom Row:**

-   Last updated (gray, small)
-   Button: "Execute Audit" or "View Details"

**Sort:**

-   Due Date (urgent first) - default
-   Scheduled Date
-   Outlet Name

**Pull to Refresh**

**Empty State:**

-   Illustration
-   Text: "No audits assigned"
-   Subtext: "Audits will appear here when scheduled"

**Calendar View** (Alternate view):

-   Monthly calendar
-   Dots on dates with audits:
    -   Blue: Scheduled
    -   Red: Overdue
    -   Green: Completed
-   Tap date to see audits for that day

---

### 10. Profile Screen

**Route:** `/profile`

**Access:** All users

#### Layout

**Top App Bar:**

-   Left: Menu icon
-   Center: "Profile"
-   Right: Settings icon

**User Info Card:**

-   Avatar (large, centered, tap to change)
-   Name (large, bold)
-   Role badge
-   Email
-   Phone

**Stats Section** (If LSR/TM):

**Cards in Row:**

**Card 1:**

-   Number: 42
-   Label: "Outlets Assigned"

**Card 2:**

-   Number: 156
-   Label: "Visits This Month"

**Card 3:**

-   Number: 89%
-   Label: "Coverage Rate"

**Menu Options:**

**Section: Account**

-   Item: Edit Profile (chevron right)
-   Item: Change Password (chevron right)
-   Item: Notification Settings (chevron right)

**Section: App Settings**

-   Item: Language (English, Sinhala, Tamil) - Phase 02
-   Item: Offline Mode
    -   Toggle: Auto-sync when online
    -   Button: "Sync Now"
    -   Text: "Last synced: 5 minutes ago"
-   Item: Location Services
    -   Toggle: Always use location
    -   Text: "Required for outlet sorting"

**Section: About**

-   Item: App Version (text: v1.0.0)
-   Item: Terms of Service (link)
-   Item: Privacy Policy (link)
-   Item: Help & Support (link)

**Bottom:**

-   Button: "Logout" (destructive, with confirmation)

---

### 11. Check-Out Screen

**Route:** `/outlets/{id}/check-out`

**Access:** All users (must be checked in)

**Trigger:** Tap "Check Out" button on outlet detail

#### Layout

**Top App Bar:**

-   Left: Back button
-   Center: "Check Out"

**Outlet Info Card:**

-   Outlet name
-   Check-in time
-   Time spent: "01:23:45" (large, bold)

**Visit Summary:**

**Workflows Completed:**

-   List of workflows with status:
    -   ✅ Impulse Workflow
    -   ✅ Cooler Workflow
    -   ⚠️ Branding Workflow (partial)
    -   ❌ POSM Audit (not started)

**Service Requests Created:**

-   Count: 2
-   List:
    -   SR-00123: Cooler Repair
    -   SR-00124: Brand Stockout

**Photos Captured:**

-   Count: 12 photos
-   Thumbnail strip (horizontal scroll)

**Visit Outcome:**

**Required Field:**

-   Radio buttons:
    -   "All workflows completed"
    -   "Partial completion" (requires reason)
    -   "No action taken" (requires reason)

**If Partial or No Action:**

-   Dropdown: "Reason" (required)
    -   Options:
        -   Outlet closed
        -   Owner unavailable
        -   Technical issues
        -   Time constraint
        -   Other
-   Text area: "Additional details" (optional)

**Check-Out Details:**

-   Field: Check-out Time (auto-populated, read-only)

**Action Buttons:**

-   Button: "Cancel" (secondary)
-   Button: "Check Out" (primary, full width)

**After Check-Out:**

-   Success animation
-   Toast: "Checked out successfully"
-   Navigate to Home or Outlets list

---

## Common UI Patterns

### Loading States

**Initial Page Load:**

-   Skeleton screens with shimmer effect
-   Preserve layout structure

**Inline Loading:**

-   Spinner (small, inline)
-   Text: "Loading..."

**Pull to Refresh:**

-   Standard platform gesture
-   Spinner at top

### Empty States

**Pattern:**

-   Illustration (simple, on-brand)
-   Heading text (bold)
-   Subtext (gray, explanation)
-   Action button (if applicable)

### Error States

**Network Error:**

-   Icon: ⚠️
-   Text: "Connection error"
-   Subtext: "Check your internet connection"
-   Button: "Retry"

**Validation Error:**

-   Inline below field
-   Red text
-   Icon: ❌
-   Clear message

**General Error:**

-   Toast notification (red)
-   Text describes error
-   Auto-dismiss or manual close

### Success States

**Toast Notification:**

-   Green background
-   Checkmark icon
-   Text: "Action completed successfully"
-   Auto-dismiss after 3 seconds

**Full-Screen Success:**

-   Animation (checkmark or celebration)
-   Heading: "Success!"
-   Subtext: Description
-   Button: "Continue" or auto-navigate

### Confirmation Dialogs

**Pattern:**

-   Semi-transparent overlay
-   White dialog box, centered
-   Icon (warning for destructive actions)
-   Title (bold)
-   Message (explain consequence)
-   Buttons:
    -   Cancel (secondary, left)
    -   Confirm (primary or destructive, right)

### Bottom Sheets

**Use Cases:**

-   Action menus
-   Filters
-   Quick forms

**Structure:**

-   Slides up from bottom
-   Drag handle at top
-   Swipe down to dismiss
-   Tap outside to dismiss

### Image Viewer

**Full-Screen Modal:**

-   Black background
-   Image centered, pinch to zoom
-   Top bar:
    -   Close button (X)
    -   Share button
    -   Download button
-   Swipe left/right for gallery navigation
-   Image counter: "3 of 12"

---

## Offline Mode

### Offline Indicator

-   Persistent banner at top: "Offline Mode"
-   Background: Orange
-   Tap to view sync status

### Sync Status Screen

**Route:** `/sync-status`

**Layout:**

**Connection Status:**

-   Icon: Red/Green/Yellow
-   Text: "Offline" / "Online" / "Syncing"

**Pending Data:**

-   List:
    -   Workflow executions: 3
    -   Visit logs: 2
    -   Photos: 12
    -   Service requests: 1

**Action:**

-   Button: "Sync Now" (disabled if offline)
-   Button: "Clear Offline Data" (with confirmation)

**Sync Progress:**

-   Progress bar
-   Text: "Syncing 5 of 18 items..."

**Last Sync:**

-   Timestamp: "Last synced: 10 minutes ago"

---

## Accessibility

-   Minimum touch target: 44x44 dp
-   Text contrast ratio: 4.5:1 (WCAG AA)
-   Screen reader support (TalkBack, VoiceOver)
-   Semantic labels for all interactive elements
-   Alternative text for images
-   Focus indicators visible
-   Scalable text (respects system font size)

---

## Platform-Specific Considerations

### Android

-   Material Design 3.0 components
-   System back button support
-   Bottom sheet behavior follows Material guidelines
-   Floating Action Button positioning

### iOS

-   Human Interface Guidelines compliance
-   Swipe-back gesture from left edge
-   Action sheets instead of bottom sheets
-   Tab bar instead of bottom navigation
-   SF Symbols for icons

---

**Document Status:** Final

**Next Steps:** Share with mobile development team and UI/UX designers for implementation