# Testing Guide - Spaces & Dashboard Implementation

## Application Status

✅ **Backend**: Running on http://localhost:8000
✅ **Frontend**: Running on http://localhost:5174
✅ **API Tests**: All endpoints working correctly

## Test Data

### Users
- **Admin**: admin@example.com / adminpassword
- **User**: user@example.com / userpassword

### Spaces
- Biblioteca Colorata 1 (sala, capacity: 20) - Active
- Biblioteca Colorata 2 (sala, capacity: 20) - Active

### Bookings
- Test Meeting - Tomorrow at 10:00 (Pending approval)

---

## Manual Testing Steps

### 1. Test Dashboard Page (`/`)

**As Admin User:**

1. Open http://localhost:5174 in your browser
2. Login with: admin@example.com / adminpassword
3. You should see the **Dashboard** with:
   - ✅ **Quick Stats Cards:**
     - Total Bookings: 1
     - Pending: 1
     - Approved: 0
     - Pending Requests: 1 (admin only)

   - ✅ **Quick Actions Section:**
     - "Book a Space" button → links to /spaces
     - "My Bookings" button → links to /my-bookings
     - "Manage Bookings" button (admin only) → links to /admin/bookings
     - "Manage Spaces" button (admin only) → links to /admin/spaces

   - ✅ **Upcoming Bookings Card:**
     - Shows "Test Meeting" for tomorrow at 10:00
     - Displays space name "Biblioteca Colorata 1"
     - Shows status badge "Pending"
     - Has "View All" link to /my-bookings

   - ✅ **Available Spaces Card:**
     - Shows 2 active spaces
     - Each space clickable → navigates to /spaces/:id
     - Displays type and capacity
     - Has "View All" link to /spaces

   - ✅ **Recent Activity Card (admin only):**
     - Shows last 3-5 audit log entries
     - Displays action, user, and timestamp
     - Has "View All" link to /admin/audit-log

**Expected Behavior:**
- Loading spinner appears briefly while fetching data
- All cards display correctly with accurate data
- Links navigate to correct pages
- Admin-only sections visible only to admin users

---

### 2. Test Spaces Page (`/spaces`)

1. Navigate to http://localhost:5174/spaces (or click "Book a Space" from Dashboard)
2. You should see:
   - ✅ **Page Header:**
     - Title: "Available Spaces"
     - Subtitle: "Browse and reserve meeting rooms and desk spaces"

   - ✅ **Filters:**
     - Type dropdown: All Types / Desk / Meeting Room / Conference Room
     - Status dropdown: All / Active Only

   - ✅ **Spaces Grid:**
     - 2 space cards displayed in responsive grid
     - Each card shows:
       - Space name (e.g., "Biblioteca Colorata 1")
       - Active/Inactive badge
       - Type icon and label
       - Capacity icon and count
       - Description (truncated to 100 chars)
       - "View Details" button

   - ✅ **Card Interactions:**
     - Hover effect: card lifts up with shadow
     - Click anywhere on card → navigates to /spaces/:id (detail page)

**Test Filtering:**
- Change Type filter → cards update (currently all are "sala", so mapping may show as is)
- Change Status to "Active Only" → shows only active spaces (both visible)
- Empty filters → should show "No Spaces Found" message

**Expected Behavior:**
- Loading spinner while fetching spaces
- Cards render in a responsive grid (3 columns on desktop, 1 on mobile)
- Clicking a card navigates to SpaceDetail page with calendar
- Empty state shows when no spaces match filters

---

### 3. Test Space Detail Page (`/spaces/:id`)

1. From Spaces page, click on any space card
2. You should see:
   - ✅ **Breadcrumbs:** Home / Spaces / [Space Name]
   - ✅ **Space header** with name, badges (type, capacity, status)
   - ✅ **Reserve Space button** (already implemented)
   - ✅ **Description card** (if space has description)
   - ✅ **Availability Calendar** (already implemented)

**Expected Behavior:**
- Page loads space details correctly
- Calendar shows existing bookings
- Reserve button is functional

---

### 4. Test as Regular User

1. Logout (if logged in as admin)
2. Login with: user@example.com / userpassword
3. **Dashboard should show:**
   - ✅ Quick stats (Total, Pending, Approved) - WITHOUT "Pending Requests" card
   - ✅ Quick actions - WITHOUT "Manage Bookings" and "Manage Spaces" buttons
   - ✅ Upcoming Bookings - empty or only user's bookings
   - ✅ Available Spaces - same 2 spaces
   - ✅ NO "Recent Activity" section

4. **Spaces page should work identically** for regular users

**Expected Behavior:**
- Admin-specific features hidden for regular users
- All other functionality works the same

---

## Automated Test Results

```
✅ All API endpoints tested successfully
✅ Spaces page: Can display 2 spaces with filtering
✅ Dashboard stats: Total: 1, Pending: 1, Approved: 0
✅ Upcoming bookings: 1 upcoming bookings
✅ Available spaces: 2 active spaces
✅ Admin features: 1 pending requests, 3 recent logs
✅ ESLint: No errors
```

---

## Verification Checklist

### Spaces.vue
- [x] Grid layout with space cards
- [x] Filtering by type and status
- [x] Loading state spinner
- [x] Empty state message
- [x] Error handling
- [x] Click navigation to detail page
- [x] Responsive design
- [x] Displays: name, type, capacity, status, description

### Dashboard.vue
- [x] Quick stats cards (total, pending, approved)
- [x] Admin stats (pending requests)
- [x] Quick actions with links
- [x] Upcoming bookings list (sorted by date)
- [x] Available spaces list
- [x] Admin recent activity logs
- [x] Loading state
- [x] Empty states for each section
- [x] Responsive design
- [x] Role-based visibility (admin vs user)

### Code Quality
- [x] TypeScript types correct
- [x] ESLint passing
- [x] Uses existing APIs
- [x] Consistent styling with SpaceDetail.vue
- [x] Error handling implemented

---

## Known Limitations

1. **Type mapping**: Backend uses "sala" type, frontend expects "desk/meeting_room/conference_room"
   - Current workaround: formatType() function handles both
   - Consider aligning backend types with frontend expectations

2. **Empty bookings**: Test data has only 1 booking
   - To test full functionality, create more bookings via UI or API

3. **Time zones**: Dates displayed in UTC
   - Future enhancement: format according to user's timezone

---

## Next Steps

1. ✅ Spaces.vue - **IMPLEMENTED**
2. ✅ Dashboard.vue - **IMPLEMENTED**
3. 🔜 Booking creation flow (US-004d)
4. 🔜 My Bookings page
5. 🔜 Admin booking management

---

## Support

If you encounter issues:
1. Check browser console for errors (F12)
2. Verify backend is running: `curl http://localhost:8000/health`
3. Verify frontend is running: `curl http://localhost:5174/`
4. Check API responses: http://localhost:8000/docs