# Staff Dashboard Sidebar - Quick Visual Guide

## 🎯 How to Use the Sidebar

### For Desktop Users (1025px+)

#### 1. **Sidebar is Always Visible**
```
┌────────────────────────────────────────────────────────────────┐
│                      STAFF DASHBOARD                           │
├─────────────┬──────────────────────────────────────────────────┤
│ Sidebar     │ Main Dashboard Content                           │
│ (280px)     │                                                  │
│             │ • Welcome message                                │
│ ≡ Quick     │ • 4 Statistics cards                            │
│   Menu      │ • Today's check-ins                             │
│             │ • Pending confirmations                         │
│ ────────    │ • Recent reservations table                     │
│             │                                                  │
│ 🚪 Room     │                                                  │
│ Reservations│                                                  │
│ [5]         │                                                  │
│             │                                                  │
│ 🛁 Service  │                                                  │
│ Reservations│                                                  │
│ [3]         │                                                  │
│             │                                                  │
│ ────────    │                                                  │
│ 👥 Total    │                                                  │
│    Guests   │                                                  │
│    12       │                                                  │
│             │                                                  │
│ 📅 Active   │                                                  │
│    Bookings │                                                  │
│    8        │                                                  │
│             │                                                  │
│ ────────    │                                                  │
│ Tip: Click  │                                                  │
│ menu...     │                                                  │
└─────────────┴──────────────────────────────────────────────────┘
```

#### 2. **Click Room Reservations Tab**
```
Shows a list of all room bookings:

[ Room Reservations ]  [Service Reservations]
[Badge: 5]

┌─────────────────────────────────┐
│ John Smith      [Confirmed]     │
├─────────────────────────────────┤
│ 🚪 Room: 302                    │
│ 📅 Check-in: Mar 15, 2026       │
│ 📅 Check-out: Mar 20, 2026      │
│ 👥 Guests: 2                    │
│ [View Details]                   │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│ Alice Johnson   [Checked In]    │
├─────────────────────────────────┤
│ 🚪 Room: 405                    │
│ 📅 Check-in: Mar 10, 2026       │
│ 📅 Check-out: Mar 12, 2026      │
│ 👥 Guests: 4                    │
│ [View Details]                   │
└─────────────────────────────────┘

... more reservations
```

#### 3. **Click Service Reservations Tab**
```
Shows all service bookings (spa, dining, etc):

[Room Reservations]  [ Service Reservations ]
                     [Badge: 3]

┌─────────────────────────────────┐
│ Carol Davis     [Pending]       │
├─────────────────────────────────┤
│ 🛁 Service: Spa Package         │
│ 👤 Guest: Carol Davis           │
│ 📅 Date: Mar 12, 2026           │
│ 🕐 Time: 14:00                  │
│ [View Details]                   │
└─────────────────────────────────┘

... more services
```

#### 4. **Auto-Updates**
Every 30 seconds:
- Badge counts refresh
- New reservations appear
- Cancelled items disappear
- Status changes update

---

### For Tablet Users (769-1024px)

#### 1. **Initial View (Sidebar Hidden)**
```
┌──────────────────────────────────┐
│   STAFF DASHBOARD               │
├──────────────────────────────────┤
│                                  │
│ Main Dashboard Content           │
│ • Welcome                        │
│ • Stats Cards                    │
│ • Check-ins                      │
│ • Reservations                   │
│                                  │
│   [≡] Menu Button (bottom-left)  │
│                                  │
└──────────────────────────────────┘
```

#### 2. **Tap Menu Button**
```
┌──────────────────────────────────┐
│   STAFF DASHBOARD               │
├──────────────────────────────────┤
│ ┌──────────────┐                │
│ │ ≡ Quick Menu │ [×]            │
│ │              │                │
│ │ 🚪 Room Res. │                │
│ │ [5]          │                │
│ │              │                │
│ │ 🛁 Service   │ Main Content   │
│ │ [3]          │ (faded)        │
│ │              │                │
│ │ Quick Stats  │                │
│ │ 👥 12        │                │
│ │ 📅 8         │                │
│ └──────────────┘                │
└──────────────────────────────────┘
```

#### 3. **Tap Room Reservations**
```
Sidebar Closes, Content Loads:

┌──────────────────────────────────┐
│   STAFF DASHBOARD               │
├──────────────────────────────────┤
│                                  │
│ 🚪 Room Reservations             │
│ [5 reservations total]           │
│                                  │
│ [Loading...]                     │
│ (Brief animation)                │
│                                  │
│ Then shows:                      │
│ • John Smith (Room 302)          │
│ • Alice Johnson (Room 405)       │
│ • ... more items                 │
│                                  │
│   [≡] Menu Button                │
│                                  │
└──────────────────────────────────┘
```

---

### For Mobile Users (< 768px)

#### 1. **Initial Dashboard View**
```
┌────────────────────┐
│  STAFF DASHBOARD   │
├────────────────────┤
│                    │
│ Welcome Message    │
│                    │
│ Stats Cards        │
│ (scrollable)       │
│                    │
│ Check-in Section   │
│ Reservations Table │
│                    │
│                    │
│                    │
│       [≡]          │ ← FAB Menu Button
│                    │
└────────────────────┘
```

#### 2. **Tap Hamburger Menu Button**
```
┌────────────────────┐
│  STAFF DASHBOARD   │
├────────────────────┤
│ ┌────────────────┐ │
│ │ ≡ Quick  [×]  │ │
│ │                │ │
│ │ 🚪 Room   [5] │ │ Main Content
│ │ Reservations   │ │ (visible but
│ │                │ │  scrollable)
│ │ 🛁 Service [3] │ │
│ │ Reservations   │ │
│ │                │ │
│ │ ────────────── │ │
│ │ 👥 Total: 12   │ │
│ ││📅 Active: 8   │ │
│ │                │ │
│ │ Tip: Click menu│ │
│ └────────────────┘ │
│                    │
└────────────────────┘
```

#### 3. **Tap Room Reservations**
```
Sidebar Auto-Closes:

┌────────────────────┐
│ 🚪 ROOM RESERVA... │
├────────────────────┤
│ [5 total]          │
│                    │
│ John Smith         │
│ [Confirmed]        │
│ 🚪 Room: 302       │
│ 📅 Mar 15 - Mar 20 │
│ 👥 Guests: 2       │
│ [View Details]     │
│                    │
│ Alice Johnson      │
│ [Checked In]       │
│ 🚪 Room: 405       │
│ 📅 Mar 10 - Mar 12 │
│ 👥 Guests: 4       │
│ [View Details]     │
│                    │
│ (scroll for more)  │
│                    │
│       [≡]          │ ← Menu Button
└────────────────────┘
```

#### 4. **Tap Service Reservations**
```
┌────────────────────┐
│ 🛁 SERVICE RESERV... │
├────────────────────┤
│ [3 total]          │
│                    │
│ Carol Davis        │
│ [Pending]          │
│ 🛁 Spa Package     │
│ 📅 Mar 12, 2026    │
│ 🕐 Time: 14:00     │
│ [View Details]     │
│                    │
│ ... more services  │
│                    │
│       [≡]          │
└────────────────────┘
```

#### 5. **Auto-Refresh Indicator**
Every 30 seconds:
```
Brief spinner animation (top of list)
✓ New items appear
✓ Counts update
✓ Status changes instantly
✓ Cancelled items disappear
```

---

## 🎨 Status Badge Colors

### Room Reservations Statuses
```
[Pending]       Orange badge - awaiting confirmation
[Confirmed]     Green badge - confirmed booking
[Checked In]    Blue badge - guest is in room
[Checked Out]   Purple badge - guest has left
[Cancelled]     Red badge - booking cancelled
```

### Service Reservations Statuses
```
[Pending]       Orange badge - awaiting confirmation
[Confirmed]     Green badge - confirmed service
[Completed]     Blue badge - service completed
[Cancelled]     Red badge - service cancelled
[No Show]       Gray badge - guest didn't show
```

---

## ⚡ Quick Actions

### Desktop
- **Click sidebar tab** → Content loads
- **Auto-refresh** → Every 30 seconds
- **View Details** → Opens full reservation

### Tablet
- **Tap [≡] button** → Sidebar opens
- **Tap menu item** → Sidebar closes, content loads
- **Auto-refresh** → Every 30 seconds

### Mobile
- **Tap [≡] button** → Sidebar overlay appears
- **Tap menu item** → Sidebar closes, content loads
- **Auto-refresh** → Every 30 seconds
- **Swipe left** → Can close sidebar

---

## 📊 What You'll See

### Room Reservation Card Shows:
```
Guest Name
├─ Status (color-coded badge)
├─ Room Number
├─ Check-in Date
├─ Check-out Date
├─ Number of Guests
└─ [View Details] Button
```

### Service Reservation Card Shows:
```
Guest Name
├─ Status (color-coded badge)
├─ Service Type
├─ Date
├─ Time
└─ [View Details] Button
```

---

## 🔄 Real-Time Updates

### What Auto-Refreshes Every 30 Seconds:
✓ Room reservation list
✓ Service reservation list
✓ Badge counts update
✓ Status changes reflect immediately
✓ New bookings appear
✓ Cancelled bookings disappear

### What Stays the Same:
- Main dashboard stats (updates every 5 min)
- Welcome message
- Navigation menu
- Current page view

---

## 💡 Pro Tips

### For Managers
1. **Monitor both tabs regularly** - Check room and service reservations
2. **Watch for Pending items** - These need quick review
3. **Use View Details** - Get full information about any reservation
4. **Track real-time updates** - See live changes every 30 seconds

### For Front Desk
1. **Use mobile view** - Easy access on the go
2. **Quick tab switching** - Check any reservation type fast
3. **Auto-refresh helps** - Never miss new bookings
4. **Status colors** - Quickly identify guest status

### For Housekeeping
1. **Room Reservations tab** - See all upcoming check-ins
2. **Check-in dates** - Plan room preparation timing
3. **Guest count** - Know how many people per room
4. **Status tracking** - Know which guests are checked in

---

## ❓ Frequently Asked Questions

### Q: Why does the sidebar hide on mobile?
**A:** To save screen space on small devices. Just tap the menu button to see it.

### Q: How often does data refresh?
**A:** Every 30 seconds automatically. No manual refresh needed.

### Q: Can I change the refresh interval?
**A:** Yes, a developer can adjust this in the JavaScript code.

### Q: What if data doesn't load?
**A:** Check your internet connection. If it persists, contact support.

### Q: Are updates real-time?
**A:** Yes! Updates show every 30 seconds without refreshing the page.

### Q: Can I filter by status?
**A:** Current version shows all. Status filtering can be added later.

### Q: Where's the Service section on my view?
**A:** Click the "Service Reservations" tab instead of "Room Reservations".

---

## ✅ Checklist for First Use

- [ ] Open staff dashboard
- [ ] Check sidebar is visible (desktop) or tap menu (mobile)
- [ ] Click on Room Reservations tab
- [ ] Verify reservation list loads
- [ ] Click View Details on a reservation
- [ ] Go back to dashboard
- [ ] Click Service Reservations tab
- [ ] Verify service list loads
- [ ] Wait 30 seconds to see auto-update
- [ ] Test on different devices (mobile, tablet, desktop)

---

**You're all set!** The sidebar is ready to use. Just open the staff dashboard to get started.

For technical details, see `SIDEBAR_IMPLEMENTATION.md`.
