# Staff Dashboard - Implementation & Testing Checklist

## 📋 Pre-Deployment Checklist

### Database Requirements
- [ ] MySQL database `hotel_booking_db` is running
- [ ] Tables exist: `users`, `reservations`, `rooms`, `facilities`, `service_reservations`
- [ ] At least one staff account exists (user_type='staff')
- [ ] Sample reservation data in `reservations` table
- [ ] Sample service reservation data in `service_reservations` table

### Server Environment
- [ ] PHP 7.4+ installed
- [ ] MySQLi extension enabled
- [ ] XAMPP running (Apache, MySQL)
- [ ] Session.php configuration in place
- [ ] Database.php configuration updated with correct credentials

### File Structure
```
c:\xampp\htdocs\almaris\
├── staff-login.php                    ✓ Created
├── staff-dashboard.php                ✓ Created with sidebar
├── manage-staff.php                   ✓ Created
├── css/
│   ├── staff-login.css               ✓ Created
│   └── staff-dashboard.css           ✓ Created with sidebar CSS
├── api/
│   └── get-staff-data.php            ✓ Created with new endpoints
├── js/
│   └── staff-utils.js                ✓ Created
└── config/
    ├── database.php                  (Existing)
    └── session.php                   (Existing)
```

---

## 🧪 Testing Procedures

### Phase 1: Login Testing

#### Test Case 1.1: Valid Staff Login
```
Step 1: Open http://localhost/almaris/staff-login.php
Step 2: Enter valid staff email (e.g., Staff Member email from database)
Step 3: Enter correct password
Step 4: Click "LOGIN"
Expected: 
  ✓ Redirects to staff-dashboard.php
  ✓ Session created ($_SESSION['user_id'] = staff_id)
  ✓ No error messages
```

#### Test Case 1.2: Invalid Password
```
Step 1: Open http://localhost/almaris/staff-login.php
Step 2: Enter valid staff email
Step 3: Enter wrong password
Step 4: Click "LOGIN"
Expected:
  ✓ Shows error: "Invalid email or password"
  ✓ Stays on login page
  ✓ Input fields are cleared (except email)
```

#### Test Case 1.3: Non-Staff User Login
```
Step 1: Open http://localhost/almaris/staff-login.php
Step 2: Enter customer email
Step 3: Enter correct customer password
Step 4: Click "LOGIN"
Expected:
  ✓ Shows error: "Invalid email or password" (hidden user type)
  ✓ Stays on login page
```

---

### Phase 2: Dashboard Basic Functionality

#### Test Case 2.1: Dashboard Loads
```
Step 1: Successfully logged in as staff
Step 2: Dashboard page loads
Expected:
  ✓ Welcome message shows: "Welcome, [First Name]"
  ✓ Current date displays correctly
  ✓ 4 statistics cards visible:
    - Total Guests
    - Total Reservations
    - Active Reservations
    - Checked-in Guests
  ✓ Today's Check-ins section shows data
  ✓ Pending Confirmations section shows data
  ✓ Recent Reservations table displays 10 latest bookings
```

#### Test Case 2.2: Statistics Are Accurate
```
Step 1: Check Dashboard Statistics
Step 2: Cross-reference with database:
  - SELECT COUNT(DISTINCT user_id) FROM reservations
  - SELECT COUNT(*) FROM reservations
  - SELECT COUNT(*) FROM reservations WHERE status IN ('confirmed', 'checked_in')
  - SELECT COUNT(*) FROM reservations WHERE status='checked_in'
Expected:
  ✓ All 4 numbers match database counts
```

---

### Phase 3: Sidebar Visibility Testing

#### Test Case 3.1: Desktop View (1025px+)
```
Setup: Set browser window width to 1400px minimum
Step 1: Observe dashboard layout
Expected:
  ✓ Sidebar visible on left side (280px width)
  ✓ Sidebar is sticky (stays visible when scrolling)
  ✓ Main content takes remaining space
  ✓ Menu toggle button is HIDDEN
  ✓ Sidebar shows:
    - Room Reservations (with badge count)
    - Service Reservations (with badge count)
    - Quick Stats (Guests, Active Bookings)
    - Sidebar tip text at bottom
```

#### Test Case 3.2: Tablet View (769-1024px)
```
Setup: Set browser window width to 800px
Step 1: Observe dashboard layout
Expected:
  ✓ Sidebar width reduces to 250px
  ✓ Menu toggle button appears (bottom-left FAB)
  ✓ Sidebar remains sticky (or collapsible)
  ✓ Main content adjusts to available space
```

#### Test Case 3.3: Mobile View (<768px)
```
Setup: Set browser window width to 400px
Step 1: Observe dashboard layout
Expected:
  ✓ Sidebar is HIDDEN initially
  ✓ Menu toggle button VISIBLE (bottom-left)
  ✓ Main content takes full width
  ✓ "≡" icon visible in button
```

---

### Phase 4: Room Reservations Sidebar Tab

#### Test Case 4.1: Click Room Tab on Desktop
```
Setup: Desktop view (1025px+), logged in
Step 1: Observe sidebar
Step 2: Click on "🚪 Room Reservations" or "Room Reservations [N]" in sidebar
Expected:
  ✓ Tab becomes ACTIVE (highlighted/underlined)
  ✓ "Room Reservations" tab content appears
  ✓ Shows list of room reservations with:
    - Guest name
    - Status badge (color-coded)
    - Room number
    - Check-in/Check-out dates
    - Number of guests
    - [View Details] button
  ✓ Badge shows count (e.g., "[5]")
  ✓ Data loads from database (uses api/get-staff-data.php?action=get_room_reservations)
```

#### Test Case 4.2: Room Reservation Card Display
```
Setup: Room Reservations tab loaded
Step 1: Inspect one reservation card
Expected each card shows:
  ✓ Guest Full Name (first_name last_name)
  ✓ Status Badge:
    - [Pending] = Orange
    - [Confirmed] = Green
    - [Checked In] = Blue
    - [Checked Out] = Purple
    - [Cancelled] = Red
  ✓ 🚪 Icon with Room Number (e.g., "302")
  ✓ 📅 Icons with dates (Check-in: YYYY-MM-DD format)
  ✓ 👥 Icon with number of guests
  ✓ [View Details] button styled as link
```

#### Test Case 4.3: Room Tab on Mobile
```
Setup: Mobile view (<768px)
Step 1: Tap menu button [≡]
Step 2: Sidebar appears as overlay
Step 3: Tap "Room Reservations"
Step 4: Sidebar closes automatically
Step 5: Main content shows room reservations
Expected:
  ✓ All same data as desktop
  ✓ Cards stack vertically
  ✓ Font sizes readable on mobile
  ✓ [View Details] buttons are tappable (40px+ height)
```

---

### Phase 5: Service Reservations Sidebar Tab

#### Test Case 5.1: Click Service Tab on Desktop
```
Setup: Desktop view (1025px+), logged in
Step 1: Observe sidebar
Step 2: Click on "🛁 Service Reservations" or "Service Reservations [N]"
Expected:
  ✓ Tab becomes ACTIVE
  ✓ Content switches to Service Reservations
  ✓ Shows list of service reservations with:
    - Guest name
    - Status badge (color-coded)
    - Service name
    - Date
    - Time (HH:MM format)
    - [View Details] button
  ✓ Badge shows count (e.g., "[3]")
  ✓ Data from api/get-staff-data.php?action=get_service_reservations
```

#### Test Case 5.2: Switch Between Tabs
```
Setup: Sidebar loaded on desktop
Step 1: Click Room Reservations tab
Step 2: Observe room data loads
Step 3: Click Service Reservations tab
Step 4: Observe service data loads
Expected:
  ✓ Tab switching is instant/smooth
  ✓ Fade-in animation on new content (0.3s)
  ✓ Previous tab data is hidden
  ✓ Active tab is visually highlighted
  ✓ Badge counts are accurate for each tab
```

---

### Phase 6: Real-Time Auto-Refresh Testing

#### Test Case 6.1: 30-Second Auto-Refresh
```
Setup: Dashboard loaded with sidebar visible
Step 1: Note the time and reservation list
Step 2: Wait 30 seconds
Step 3: Observe sidebar data
Expected:
  ✓ API calls made every 30 seconds (check Network tab in DevTools)
  ✓ New reservations appear if added to database
  ✓ Badge counts update
  ✓ Cancelled reservations disappear
  ✓ Status changes reflect immediately (e.g., Pending → Confirmed)
  ✓ No page refresh needed
```

#### Test Case 6.2: Add New Reservation During Refresh
```
Setup: Dashboard open with sidebar visible
Step 1: Keep DevTools Network tab open
Step 2: Manually add a new reservation to database
Step 3: Wait for next 30-second refresh cycle
Expected:
  ✓ New reservation appears in sidebar list
  ✓ Badge count increments (e.g., [5] becomes [6])
  ✓ API call shows in Network tab
  ✓ Response includes new data
```

#### Test Case 6.3: Refresh Continues on Inactive Tabs
```
Setup: Dashboard open
Step 1: View Room Reservations tab
Step 2: Switch to Service Reservations
Step 3: Wait 30 seconds
Expected:
  ✓ Both tabs continue to refresh in background
  ✓ When you switch back to Room tab, data is fresh
  ✓ Badge counts are always current
```

---

### Phase 7: Responsive Design Testing

#### Test All Breakpoints:
```
┌─────────────────────────────────────────────────┐
│ Breakpoint  │ Width      │ Key Behavior         │
├─────────────────────────────────────────────────┤
│ XS (Mobile) │ ≤360px     │ Hamburger menu       │
│ SM (Mobile) │ 361-575px  │ Hamburger menu       │
│ MD (Tablet) │ 576-768px  │ Hamburger menu       │
│ LG (Tablet) │ 769-1024px │ Collapsible/toggle   │
│ XL (Desktop)│ ≥1025px    │ Sticky visible       │
└─────────────────────────────────────────────────┘
```

#### Test Case 7.1: 360px (Mobile)
```
Step 1: Set DevTools width to 360px
Step 2: Refresh dashboard
Expected:
  ✓ Sidebar hidden
  ✓ Menu button visible at bottom-left
  ✓ Main content full width
  ✓ All text readable (no overflow)
  ✓ Buttons are tappable (40px+ height)
  ✓ Card stack vertically
```

#### Test Case 7.2: 576px (Mobile/Tablet)
```
Step 1: Set DevTools width to 576px
Step 2: Refresh dashboard
Expected:
  ✓ Sidebar still hidden initially
  ✓ Menu button visible
  ✓ Sidebar opens as overlay when tapped
  ✓ Sidebar width appropriate for screen
  ✓ All content visible without horizontal scroll
```

#### Test Case 7.3: 768px (Tablet)
```
Step 1: Set DevTools width to 768px
Step 2: Refresh dashboard
Expected:
  ✓ Transition from mobile to tablet view
  ✓ Sidebar still hamburger menu
  ✓ Menu button clearly visible
  ✓ Sidebar overlay appears smoothly when opened
```

#### Test Case 7.4: 1024px (Large Tablet)
```
Step 1: Set DevTools width to 1024px
Step 2: Refresh dashboard
Expected:
  ✓ Menu button still visible
  ✓ Sidebar may show or toggle (design choice)
  ✓ Content adjusts to available space
  ✓ No horizontal scrolling
```

#### Test Case 7.5: 1400px+ (Desktop)
```
Step 1: Set DevTools width to 1400px
Step 2: Refresh dashboard
Expected:
  ✓ Sidebar always visible (280px)
  ✓ Main content takes remaining space
  ✓ Menu button HIDDEN
  ✓ Sidebar is sticky (scrolls with page)
  ✓ Professional layout
```

---

### Phase 8: Dark Mode Testing

#### Test Case 8.1: Enable Dark Mode
```
Setup: Any operating system with dark mode support
Step 1: Enable system dark mode (Windows: Settings → Colors)
Step 2: Refresh staff dashboard
Expected:
  ✓ Background colors darken
  ✓ Text colors lighten (white/light gray)
  ✓ Sidebar darkens
  ✓ Cards have dark background
  ✓ Text contrast is good (readable)
  ✓ Status badges colors still visible
  ✓ Icons visible in dark theme
  ✓ No white backgrounds on dark theme (if intended)
```

#### Test Case 8.2: Dark Mode on Mobile
```
Setup: Mobile device or emulator with dark mode
Step 1: Enable dark mode
Step 2: Open staff dashboard
Expected:
  ✓ All elements styled for dark theme
  ✓ Sidebar overlay has dark background
  ✓ Menu button visible in dark mode
  ✓ Text readable
```

---

### Phase 9: Browser Compatibility Testing

Test on these browsers:
```
☐ Chrome 90+
☐ Firefox 88+
☐ Safari 14+
☐ Edge 90+
```

#### Test Case 9.1: Cross-Browser Functionality
```
For each browser:
Step 1: Open staff dashboard
Step 2: Test login/logout
Step 3: Click sidebar tabs
Step 4: Wait for auto-refresh
Step 5: Test responsive resize
Expected:
  ✓ Login works
  ✓ Dashboard displays correctly
  ✓ Sidebar tabs function
  ✓ Auto-refresh works
  ✓ Responsive behavior correct
  ✓ No console errors
```

---

### Phase 10: API Endpoint Testing

Use browser DevTools Network tab or a tool like Postman.

#### Test Case 10.1: get_room_reservations Endpoint
```
URL: http://localhost/almaris/api/get-staff-data.php?action=get_room_reservations
Method: GET
Expected Response:
{
  "success": true,
  "data": [
    {
      "id": 1,
      "guest_name": "John Smith",
      "email": "john@example.com",
      "phone": "123-456-7890",
      "room_number": "302",
      "room_type": "Deluxe",
      "check_in": "2026-03-15",
      "check_out": "2026-03-20",
      "guests": 2,
      "status": "confirmed"
    },
    ...more items
  ],
  "message": "Room reservations retrieved successfully"
}
```

#### Test Case 10.2: get_service_reservations Endpoint
```
URL: http://localhost/almaris/api/get-staff-data.php?action=get_service_reservations
Method: GET
Expected Response:
{
  "success": true,
  "data": [
    {
      "id": 1,
      "guest_name": "Carol Davis",
      "email": "carol@example.com",
      "phone": "555-123-4567",
      "service_name": "Spa Package",
      "date": "2026-03-12",
      "time": "14:00",
      "status": "pending"
    },
    ...more items
  ],
  "message": "Service reservations retrieved successfully"
}
```

#### Test Case 10.3: API Authentication
```
Step 1: Try accessing API without logging in
  URL: ?action=get_room_reservations
Step 2: No session set
Expected:
  ✓ Returns error: {"success": false, "message": "Unauthorized"}
  ✓ HTTP 401 status code
```

---

### Phase 11: Performance Testing

#### Test Case 11.1: Page Load Time
```
Setup: Fully logged in
Step 1: Open staff-dashboard.php
Step 2: Check Network tab in DevTools
Expected:
  ✓ Page loads in < 2 seconds
  ✓ Sidebar data loads in < 1 second
  ✓ Total resources downloaded < 2MB
```

#### Test Case 11.2: Auto-Refresh Performance
```
Setup: Dashboard open for 5+ minutes
Step 1: Keep DevTools open
Step 2: Monitor Network tab
Step 3: Observe API calls every 30 seconds
Expected:
  ✓ Each API call completes in < 500ms
  ✓ Response size < 100KB
  ✓ CPU usage remains low (< 20% on refresh)
  ✓ No memory leaks (RAM doesn't grow)
```

---

## 📝 Test Results Template

```
=============================================
STAFF DASHBOARD TESTING REPORT
Date: _______________
Tester: _______________
Environment: PHP _____ | MySQL _____ | Browser: _____
=============================================

LOGIN TESTING:
☐ Valid staff login works
☐ Invalid password rejected
☐ Non-staff users rejected
Status: PASS / FAIL

DASHBOARD FUNCTIONALITY:
☐ Dashboard loads correctly
☐ Welcome message displays
☐ Statistics are accurate
☐ Today's check-ins load
☐ Pending confirmations load
☐ Recent reservations table loads
Status: PASS / FAIL

SIDEBAR DESKTOP:
☐ Sidebar visible (1025px+)
☐ Sidebar is sticky
☐ Menu button hidden
☐ Room Reservations tab works
☐ Service Reservations tab works
Status: PASS / FAIL

SIDEBAR MOBILE:
☐ Sidebar hidden initially
☐ Menu button visible
☐ Menu button opens sidebar
☐ Tab switching works
☐ Data displays correctly
Status: PASS / FAIL

AUTO-REFRESH:
☐ Refresh happens every 30 seconds
☐ New data appears automatically
☐ Badge counts update
☐ Status changes reflect immediately
Status: PASS / FAIL

RESPONSIVE DESIGN:
☐ 360px mobile view correct
☐ 576px tablet view correct
☐ 768px tablet view correct
☐ 1024px desktop view correct
☐ 1400px desktop view correct
Status: PASS / FAIL

DARK MODE:
☐ Dark mode colors correct
☐ Text readable in dark mode
☐ Sidebar styled for dark mode
Status: PASS / FAIL

OVERALL STATUS: ☐ PASS  ☐ FAIL  ☐ PASS WITH ISSUES

Issues Found:
1. ___________________________
2. ___________________________
3. ___________________________

Sign-off: _____________________  Date: _____
```

---

## 🚀 Deployment Steps

### Step 1: Pre-Deployment Validation
```
☐ All test cases passed
☐ No database errors
☐ All files in correct locations
☐ Permissions set correctly (644 for PHP files)
☐ Database backups taken
```

### Step 2: File Uploads
```
☐ Upload staff-login.php to root
☐ Upload staff-dashboard.php to root
☐ Upload manage-staff.php to root
☐ Upload css/staff-dashboard.css
☐ Upload css/staff-login.css
☐ Upload api/get-staff-data.php
☐ Upload js/staff-utils.js
☐ Verify all files uploaded
```

### Step 3: Database Verification
```
☐ Test database connection
☐ Verify tables exist
☐ Check sample staff account exists
☐ Verify permissions correct (SELECT, INSERT, UPDATE)
```

### Step 4: Post-Deployment Testing
```
☐ Access staff-login.php in production
☐ Login with staff account
☐ Dashboard loads correctly
☐ Sidebar functions on all devices
☐ Auto-refresh works
```

### Step 5: Documentation
```
☐ Brief staff on new sidebar features
☐ Share SIDEBAR_USER_GUIDE.md with team
☐ Provide support contact information
☐ Document any customizations made
```

---

## 🆘 Troubleshooting

### Issue: "Session required to access dashboard"
**Solution**: 
- Check session.php is in config/ folder
- Verify session_start() on first line of staff-dashboard.php
- Clear browser cookies and try again

### Issue: Sidebar doesn't load data
**Solution**:
- Check browser DevTools Network tab
- Verify api/get-staff-data.php is accessible
- Check database connection in config/database.php
- Verify get_room_reservations and get_service_reservations functions exist

### Issue: Sidebar hidden on desktop
**Solution**:
- Check CSS media queries
- Verify css/staff-dashboard.css is loaded (check Network tab)
- Clear browser cache (Ctrl+Shift+Del)
- Check window width is really 1025px+

### Issue: Auto-refresh not working
**Solution**:
- Open DevTools Console, check for JavaScript errors
- Verify setInterval is running (should see API calls every 30 seconds)
- Check API endpoint returns valid JSON
- Verify database has reservation data

### Issue: Dark mode not applying
**Solution**:
- Enable system dark mode on OS
- Refresh page (Ctrl+F5 for hard refresh)
- Check browser supports prefers-color-scheme media query
- Verify css/staff-dashboard.css includes dark mode styles

---

**Testing Complete!** All systems ready for production deployment.

For technical implementation details, see `SIDEBAR_IMPLEMENTATION.md`.
For user-facing guide, see `SIDEBAR_USER_GUIDE.md`.
