feat(dashboard): redesign with active bookings, calendar, and compact stats

Major Dashboard improvements focusing on active reservations and calendar view:

Frontend changes:
- Add ActiveBookings component showing in-progress bookings with progress bars
- Add DashboardCalendar component with read-only calendar view of all user bookings
- Refactor Dashboard layout: active bookings → stats grid → calendar → activity
- Remove redundant Quick Actions and Available Spaces sections
- Make Quick Stats compact (36px icons, 20px font) and clickable (router-link)
- Add datetime utility functions (isBookingActive, getBookingProgress, formatRemainingTime)
- Fix MyBookings to read status query parameter from URL
- Auto-refresh active bookings every 60s with proper cleanup

Backend changes:
- Add GET /api/bookings/my/calendar endpoint with date range filtering
- Fix Google Calendar sync in reschedule_booking and admin_update_booking
- Add Google OAuth environment variables to .env.example

Design:
- Dark mode compatible with CSS variables throughout
- Mobile responsive (768px breakpoint, 2-column stats grid)
- CollapsibleSection pattern for all dashboard sections
- Progress bars with accent colors for active bookings

Performance:
- Optimized API calls (calendar uses date range filtering)
- Remove duplicate calendar data loading on mount
- Computed property caching for stats and filtered bookings
- Memory leak prevention (setInterval cleanup on unmount)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

frontend/src/components/DashboardCalendar.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="dashboard-calendar">
+    <div v-if="error" class="error">{{ error }}</div>
+    <div v-if="loading" class="loading">Loading calendar...</div>
+    <FullCalendar v-show="!loading" :options="calendarOptions" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import FullCalendar from '@fullcalendar/vue3'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import type { CalendarOptions, EventInput, DatesSetArg } from '@fullcalendar/core'
+import { bookingsApi, handleApiError } from '@/services/api'
+import { useAuthStore } from '@/stores/auth'
+import type { Booking } from '@/types'
+
+const authStore = useAuthStore()
+const userTimezone = computed(() => authStore.user?.timezone || 'UTC')
+const bookings = ref<Booking[]>([])
+const loading = ref(true)
+const initialLoad = ref(true)
+const error = ref('')
+
+const STATUS_COLORS: Record<string, string> = {
+  pending: '#FFA500',
+  approved: '#4CAF50',
+  rejected: '#F44336',
+  canceled: '#9E9E9E'
+}
+
+const events = computed<EventInput[]>(() => {
+  return bookings.value.map((booking) => ({
+    id: String(booking.id),
+    title: booking.space?.name ? `${booking.space.name} - ${booking.title}` : booking.title,
+    start: booking.start_datetime,
+    end: booking.end_datetime,
+    backgroundColor: STATUS_COLORS[booking.status] || '#9E9E9E',
+    borderColor: STATUS_COLORS[booking.status] || '#9E9E9E',
+    extendedProps: {
+      status: booking.status,
+      description: booking.description
+    }
+  }))
+})
+
+let currentStart: Date | null = null
+let currentEnd: Date | null = null
+
+const loadBookings = async (start: Date, end: Date) => {
+  currentStart = start
+  currentEnd = end
+  error.value = ''
+
+  try {
+    const startStr = start.toISOString()
+    const endStr = end.toISOString()
+    bookings.value = await bookingsApi.getMyCalendar(startStr, endStr)
+  } catch (err) {
+    error.value = handleApiError(err)
+  } finally {
+    if (initialLoad.value) {
+      loading.value = false
+      initialLoad.value = false
+    }
+  }
+}
+
+const handleDatesSet = (arg: DatesSetArg) => {
+  loadBookings(arg.start, arg.end)
+}
+
+const calendarOptions = computed<CalendarOptions>(() => ({
+  plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
+  initialView: 'dayGridMonth',
+  headerToolbar: {
+    left: 'prev,next today',
+    center: 'title',
+    right: 'dayGridMonth,timeGridWeek'
+  },
+  timeZone: userTimezone.value,
+  firstDay: 1,
+  events: events.value,
+  datesSet: handleDatesSet,
+  editable: false,
+  selectable: false,
+  dayMaxEvents: true,
+  height: 'auto',
+  eventTimeFormat: {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false
+  },
+  slotLabelFormat: {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false
+  }
+}))
+
+const refresh = () => {
+  if (currentStart && currentEnd) {
+    loadBookings(currentStart, currentEnd)
+  } else {
+    const now = new Date()
+    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1)
+    const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0)
+    loadBookings(startOfMonth, endOfMonth)
+  }
+}
+
+defineExpose({ refresh })
+</script>
+
+<style scoped>
+.dashboard-calendar {
+  background: var(--color-surface);
+  border-radius: var(--radius-md);
+  padding: 24px;
+}
+
+.error {
+  padding: 12px;
+  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+  color: var(--color-danger);
+  border-radius: var(--radius-sm);
+  margin-bottom: 16px;
+}
+
+.loading {
+  text-align: center;
+  color: var(--color-text-secondary);
+  padding: 24px;
+}
+
+/* FullCalendar custom styles */
+:deep(.fc) {
+  font-family: inherit;
+}
+
+:deep(.fc-button) {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  text-transform: capitalize;
+}
+
+:deep(.fc-button:hover) {
+  background: var(--color-accent-hover);
+  border-color: var(--color-accent-hover);
+}
+
+:deep(.fc-button-active) {
+  background: var(--color-accent-hover) !important;
+  border-color: var(--color-accent-hover) !important;
+}
+
+:deep(.fc-daygrid-day-number) {
+  color: var(--color-text-primary);
+  font-weight: 500;
+}
+
+:deep(.fc-col-header-cell-cushion) {
+  color: var(--color-text-primary);
+  font-weight: 600;
+}
+
+:deep(.fc-event) {
+  cursor: default;
+}
+
+:deep(.fc-event-title) {
+  font-weight: 500;
+}
+</style>