From ee49eb931a37ecd7c0b610b44b48d1a091a8a385 Mon Sep 17 00:00:00 2001 From: Achintha Isuru Date: Mon, 2 Feb 2026 14:23:11 -0500 Subject: [PATCH] feat: integrate query parameters for initial tab selection in ShiftsPage --- .../shifts/lib/src/staff_shifts_module.dart | 3 +- docs/DEMO_PLAN.md | 163 +++++++----------- 2 files changed, 66 insertions(+), 100 deletions(-) diff --git a/apps/mobile/packages/features/staff/shifts/lib/src/staff_shifts_module.dart b/apps/mobile/packages/features/staff/shifts/lib/src/staff_shifts_module.dart index 562a849a..47fc79f0 100644 --- a/apps/mobile/packages/features/staff/shifts/lib/src/staff_shifts_module.dart +++ b/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'], ); }, diff --git a/docs/DEMO_PLAN.md b/docs/DEMO_PLAN.md index c8f99f69..809cddf4 100644 --- a/docs/DEMO_PLAN.md +++ b/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 -**Purpose:** Show real-time worker tracking capabilities -**Screen:** 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) -- 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 7: Staff Logs In with Existing Account +**Purpose:** Show the worker sign-in experience +**Screen:** Get Started → Sign In with Phone +**Steps:** +1. Restart the staff app. +2. Enter phone number: `5551234567` +3. Tap "Send Code" +4. Enter OTP: `123456` --- -### 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 - ---- - -## 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. - +> Go to the home page and come back to the coverage page to update the data. --- ## 8️⃣ Common Questions & Talking Points