# Ordio Mobile App – Screen-by-Screen Documentation

**Last Updated:** 2026-02-02

Screen-by-screen reference for the Ordio Mitarbeiter-App (90 screens). Data is derived from screenshot analysis; run `v2/scripts/mobile-app/analyze-screenshots-ai.py` without `--mock` for full AI-extracted descriptions.

## Data Sources

- **Analysis:** `docs/data/mobile-app-screenshot-analysis.json`
- **Per-screen JSON:** `docs/data/mobile-app-screens/[screenshot_id].json`
- **Name mapping:** `docs/data/mobile-app-screenshot-name-mapping.json`
- **WebP (by feature):** `/v2/img/mobile-app/screens/webp/[feature_area]/[name].webp`
- **Thumbnails:** `/v2/img/mobile-app/screens/thumbs/[screenshot_id].webp`

## Naming Convention

- **Format:** `[feature-slug]-[sequence]-[screenshot-id].webp`
- **Example:** `other-000-IMG_2655.webp` (feature area `other`, sequence 0, id IMG_2655)

## Screen List Summary

**Total Screens:** 90 (all analyzed with Gemini Vision API)

**By Feature Area:**
- **Zeiterfassung:** 19 screens (time tracking, clock in/out, breaks)
- **Schichtplanung:** 17 screens (shift calendar, details, applications)
- **Other:** 27 screens (onboarding, settings, broadcasts, events)
- **Dashboard:** 7 screens (main dashboard with cards)
- **Checklists:** 7 screens (HACCP, cleaning tasks, archive)
- **Login:** 6 screens (login, workspace selection)
- **Abwesenheiten:** 3 screens (absence requests, balance)
- **Documents:** 3 screens (document list, upload)
- **Profile:** 1 screen (profile onboarding)

## Sample Screens (by feature area)

### Login (6 screens)
- IMG_2655-2659: Login screens
- IMG_2660: Workspace Selection

### Dashboard (7 screens)
- IMG_2664-2665: Dashboard with greeting, calendar, open shifts, salary, weather
- IMG_2666-2670: Dashboard variations with different cards

### Schichtplanung (17 screens)
- IMG_2670: Shift calendar
- IMG_2671-2672: Shift details
- IMG_2675-2679: Shift applications and availability
- Additional shift management screens

### Zeiterfassung (19 screens)
- IMG_2680-2682: Time tracking interface
- IMG_2683-2689: Clock in/out, break management
- IMG_2690-2695: Time entries and history
- Additional time tracking screens

### Checklists (7 screens)
- IMG_2691: HACCP Checklist
- IMG_2696-2697: Cleaning Checklist
- IMG_2699: Checklist items
- IMG_2733-2735: Checklists list and archive

### Abwesenheiten (3 screens)
- IMG_2673-2674: Absence Request forms
- IMG_2737: Absences list and balance

### Documents (3 screens)
- Document list, upload, and status screens

**Full detailed list:** See `docs/data/mobile-app-screenshot-analysis.json` for all 90 screens with complete analysis data.

## UI Components and Actions (from analysis schema)

For each screen, the analysis JSON can include:

- **screen_name:** Short label (e.g. Login, Shift calendar, Time clock).
- **feature_area:** One of login, dashboard, schichtplanung, zeiterfassung, abwesenheiten, profile, settings, checklists, documents, shift_applications, other.
- **ui_elements:** Main UI elements (e.g. Calendar grid, Starten button, Bottom tab bar).
- **functionality_visible:** What the user can do (e.g. Clock in, View week schedule).
- **navigation_paths:** Where the user can go (e.g. Tap shift for details, Menu opens drawer).
- **data_displayed:** Information shown (e.g. Current week dates, Shift times).
- **user_actions:** Possible actions (Tap, Swipe, Enter text, Select date).
- **visible_text_labels:** Important German UI labels (e.g. Schichten, Starten, Heute).
- **one_line_description:** One-sentence purpose in English.

## Refreshing Screen Data

1. **Full AI analysis (when API available):**
   ```bash
   python3 v2/scripts/mobile-app/analyze-screenshots-ai.py
   ```
2. **Re-validate and group:**
   ```bash
   python3 v2/scripts/mobile-app/validate-and-group-analysis.py
   python3 v2/scripts/mobile-app/extract-features.py
   python3 v2/scripts/mobile-app/organize-screenshots.py
   ```
3. Update this document and [mobile-app-documentation.md](mobile-app-documentation.md) with any new screen names and feature areas.

## Related Documentation

- [mobile-app-documentation.md](mobile-app-documentation.md) – Main mobile app documentation
- [mobile-app-navigation.md](mobile-app-navigation.md) – Navigation flows
- [mobile-app-diagrams.md](mobile-app-diagrams.md) – Architecture and flow diagrams