feat: integrate query parameters for initial tab selection in ShiftsPage
This commit is contained in:
Achintha Isuru
@@ -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'],
|
||||
);
|
||||
},
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user