feat: integrate query parameters for initial tab selection in ShiftsPage

apps/mobile/packages/features/staff/shifts/lib/src/staff_shifts_module.dart

@@ -43,8 +43,9 @@ class StaffShiftsModule extends Module {
       '/',
       child: (_) {
         final args = r.args.data as Map?;
+        final queryParams = r.args.queryParams;
         return ShiftsPage(
-          initialTab: args?['initialTab'],
+          initialTab: queryParams['tab'] ?? args?['initialTab'],
           selectedDate: args?['selectedDate'],
         );
       },

docs/DEMO_PLAN.md

@@ -90,21 +90,12 @@ Tracked in :
 **Purpose:** Show the sign-in experience for returning users  
 **Screen:** Get Started → Sign In  
 **Steps:**
-1. Open Client App (or restart if already open)
+1. Restart Client App
 2. Tap "Sign In" button
 3. Enter credentials:
    - Email: `google_payment@gmail.com`
    - Password: `Demo2026!`
 4. Tap "Sign In"
-5. Observe loading state and successful authentication
-
-**What to Notice:**
-- Clean, professional interface with business branding
-- Password field security (masked characters)
-- Error handling for invalid credentials
-- Smooth transition to home screen
-
-**Why It Matters:** Single sign-on for all team members, secure authentication without complexity
 
 ---
 
@@ -123,11 +114,30 @@ Tracked in :
 - Late workers alerts
 - Today's estimated labor cost
 
-**Why It Matters:** At-a-glance visibility of operations without manual tracking
+---
+
+> **EXPLAIN**: The main demo flow which is the order creation and acceptance flow.
+> ```
+>Client Posts Shift [O1]
+>    ↓
+>*Vendor Accepts the Shift (This Part is missing for now)* [O2]
+>    ↓
+>Worker Searches for a Shift [O3]
+>    ↓
+>Worker Applies [O4]
+>    ↓
+>Confirmation [O5]
+>    ↓
+>Worker Checks In [O6]
+>    ↓
+>Shift Completed [O7]
+>    ↓
+>Payment [O8]
+>```
 
 ---
 
-### Demo 5: Client Creates New Order
+### Demo 5: Client Creates New Order - [O1]
 **Purpose:** Walk through the shift creation process  
 **Screen:** Orders Tab → "Post" button  
 **Action:** Create a new shift for upcoming event
@@ -137,15 +147,6 @@ Tracked in :
 - Date: [Select upcoming date]
 - Location: [Select existing hub]
 - Add position: Server, Count: 3, Hours: 5PM-11PM
-- Add position: Bartender, Count: 1, Hours: 4PM-11PM
-
-**What to Notice:**
-- Simple form with smart defaults
-- Real-time cost calculation
-- Option to add multiple roles
-- Review summary before posting
-
-**Why It Matters:** Post shifts in under 2 minutes vs. hours of phone calls
 
 ---
 
@@ -156,66 +157,59 @@ Tracked in :
 
 **What to Notice:**
 - Event name and location
-- Roles needed (e.g., "2 Servers, 1 Bartender")
+- Roles needed (e.g., "2 Servers")
 - Clock in/out times
 - Estimated cost
 - Coverage percentage bar
-- List of confirmed workers with profile photos
-
 **Why It Matters:** Complete transparency on staffing status before the event
 
 ---
 
-### Demo 7: Client Monitors Coverage Dashboard
+### Demo 7: Staff Logs In with Existing Account
-**Purpose:** Show real-time worker tracking capabilities  
+**Purpose:** Show the worker sign-in experience  
-**Screen:** Coverage Tab  
+**Screen:** Get Started → Sign In with Phone  
-**Action:** Navigate to Coverage, select today's date
+**Steps:**
-
+1. Restart the staff app.
-**What to Notice:**
+2. Enter phone number: `5551234567`
-- Live worker status (Checked In, En Route, Late, Not Arrived)
+3. Tap "Send Code"
-- Color-coded status badges (green, yellow, red)
+4. Enter OTP: `123456`
-- Real-time check-in notifications
-- Worker contact information
-
-**Why It Matters:** Know exactly who's on-site and who's missing before event starts
 
 ---
 
-### Demo 8: Staff Browses Available Shifts
+### Demo 8: Staff Views Home Dashboard
+**Purpose:** Show worker's personalized dashboard  
+
+**What to Notice:**
+- Today's Shifts section (confirmed shifts for today)
+- Tomorrow's Shifts section
+
+---
+
+### Demo 9: Staff Browses Available Shifts - [O3]
 **Purpose:** Show how workers discover and view available work  
-**Screen:** Shifts Tab → "Find Work"  
+**Screen:** Shifts → "Find Work"  
 **Action:** Browse the list of available shifts
 
 **What to Notice:**
 - List of shifts matching worker skills
-- Distance from worker's location
 - Hourly rate prominently displayed
 - Role requirements (e.g., "Bartender - Spring Gala")
 - Date, time, and duration
 
-**Why It Matters:** Workers can find work that fits their schedule and skills
-
 ---
 
-### Demo 9: Staff Applies for Shift
+### Demo 10: Staff Applies for Shift - [O4]
 **Purpose:** Show the application process from worker side  
 **Screen:** Shift Details → "Apply Now" button  
 **Steps:**
 1. Tap on an available shift to view details
 2. Review business name, location, pay, requirements
-3. Tap "Apply Now"
+3. Tap "Book Shift"
 4. See instant confirmation
 
-**What to Notice:**
-- Simple one-tap application
-- Instant confirmation message
-- Shift appears in "My Shifts" tab immediately
-
-**Why It Matters:** One-tap application vs. lengthy forms or phone calls
-
 ---
 
-### Demo 10: Staff Views Confirmed Shifts
+### Demo 11: Staff Views Confirmed Shifts - [O5]
 **Purpose:** Show worker's shift management interface  
 **Screen:** Shifts Tab → "My Shifts"  
 **Action:** Review calendar view of confirmed shifts
@@ -224,76 +218,47 @@ Tracked in :
 - Week-by-week calendar navigation
 - Color-coded status (Confirmed, Pending, Completed)
 - Quick access to shift details and directions
-- Upcoming shift reminders
-
-**Why It Matters:** Workers manage all shifts in one centralized place
 
 ---
 
-### Demo 11: Staff Checks In to Shift (Day of Event)
+### Demo 12: Client Monitors Coverage Dashboard
+**Purpose:** Show real-time worker tracking capabilities  
+**Screen:** Client App → Coverage Tab  
+**Action:** Navigate to Coverage, select today's date
+
+**What to Notice:**
+- Live worker status (Checked In, En Route, Late, Not Arrived)
+- Color-coded status badges (green, yellow, red)
+- Worker contact information
+- Real-time updates as workers check in
+
+**Why It Matters:** Know exactly who's on-site and who's missing before event starts
+
+---
+
+### Demo 13: Staff Checks In to Shift (Day of Event) - [O6]
 **Purpose:** Demonstrate the check-in process  
 **Screen:** Home or My Shifts → Shift Card → "Check In" button  
 **Action:** Simulate checking in to an active shift
 
 **What to Notice:**
-- GPS verification of location
 - Timestamp automatically recorded
 - Status changes to "Checked In" with green indicator
-- Notification sent to business
-
-**Why It Matters:** Eliminates manual time tracking and buddy punching
 
 ---
 
-### Demo 12: Client Sees Real-Time Check-In Update
+### Demo 14: Client Sees Check-In Update - [O6]
 **Purpose:** Show cross-app interaction and real-time updates  
 **Screen:** Client App → Coverage Tab  
 **Action:** Show the worker's status updating from "Not Arrived" to "Checked In"
 
 **What to Notice:**
-- Instant status update (no refresh needed)
+- Status update
 - Green "Checked In" badge appears
 - Check-in time displayed
 - Coverage percentage updates automatically
 
-**Why It Matters:** Real-time visibility prevents no-shows and improves coordination
+> Go to the home page and come back to the coverage page to update the data.
-
----
-
-## Complete Order Creation Flow
-```
-Client Posts Shift
-    ↓
-*Vendor Accepts the Shift (This Part is missing for now)*
-    ↓
-Worker Applies
-    ↓
-Confirmation
-    ↓
-Worker Checks In
-    ↓
-Shift Completed
-    ↓
-Payment
-```
-
-### Act 1: Business Need (Client App)
-- Google payments division needs staff for an upcoming event and posts shift requirements.
-
-> NOTE:
-> *Vendor needs to accepts the Shift (This Part is missing for now)*
-> Note this to the customer.
-
-### Act 2: Worker Discovery (Staff App)
-- A worker finds the shift, reviews details, and applies.
-- The worker can see the confirmation quickly.
-
-### Act 3: Day of Event (Staff App + Client App)
-Worker checks in using the app, business tracks attendance in real-time.
-
-### Act 4: Completion & Payment (Both Apps)
-Shift completes, payment is processed.
-
 ---
 
 ## 8️⃣ Common Questions & Talking Points