From 28685d82546d265e2a940a7651e4d51e5569bf10 Mon Sep 17 00:00:00 2001
From: Claude Agent <claude-agent@romfast.ro>
Date: Thu, 12 Feb 2026 10:21:32 +0000
Subject: [PATCH] feat(dashboard): redesign with active bookings, calendar, and
 compact stats
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 backend/.env.example                          |   5 +
 backend/app/api/bookings.py                   |  55 ++-
 frontend/src/components/ActiveBookings.vue    | 189 ++++++++++
 frontend/src/components/DashboardCalendar.vue | 176 +++++++++
 frontend/src/services/api.ts                  |   7 +
 frontend/src/utils/datetime.ts                |  36 ++
 frontend/src/views/Dashboard.vue              | 338 +++++-------------
 frontend/src/views/MyBookings.vue             |   5 +
 8 files changed, 560 insertions(+), 251 deletions(-)
 create mode 100644 frontend/src/components/ActiveBookings.vue
 create mode 100644 frontend/src/components/DashboardCalendar.vue

diff --git a/backend/.env.example b/backend/.env.example
index b78d07a..8e2617d 100644
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -17,3 +17,8 @@ SMTP_USER=
 SMTP_PASSWORD=
 SMTP_FROM_ADDRESS=noreply@space-booking.local
 SMTP_ENABLED=false
+
+# Google Calendar Integration
+GOOGLE_CLIENT_ID=your_google_client_id_here
+GOOGLE_CLIENT_SECRET=your_google_client_secret_here
+GOOGLE_REDIRECT_URI=https://your-domain.com/api/integrations/google/callback
diff --git a/backend/app/api/bookings.py b/backend/app/api/bookings.py
index cd7761c..91e1a24 100644
--- a/backend/app/api/bookings.py
+++ b/backend/app/api/bookings.py
@@ -12,7 +12,11 @@ from app.models.space import Space
 from app.models.user import User
 from app.services.audit_service import log_action
 from app.services.email_service import send_booking_notification
-from app.services.google_calendar_service import create_calendar_event, delete_calendar_event
+from app.services.google_calendar_service import (
+    create_calendar_event,
+    delete_calendar_event,
+    update_calendar_event,
+)
 from app.services.notification_service import create_notification
 from app.schemas.booking import (
     AdminCancelRequest,
@@ -202,6 +206,37 @@ def get_my_bookings(
     return [BookingWithSpace.model_validate(b) for b in bookings]
 
 
+@bookings_router.get("/my/calendar", response_model=list[BookingWithSpace])
+def get_my_bookings_calendar(
+    start: Annotated[datetime, Query(description="Start datetime (ISO format)")],
+    end: Annotated[datetime, Query(description="End datetime (ISO format)")],
+    db: Annotated[Session, Depends(get_db)],
+    current_user: Annotated[User, Depends(get_current_user)],
+) -> list[BookingWithSpace]:
+    """
+    Get user's bookings for calendar view within date range.
+
+    Query parameters:
+    - **start**: Start datetime in ISO format (e.g., 2024-01-01T00:00:00)
+    - **end**: End datetime in ISO format (e.g., 2024-01-31T23:59:59)
+
+    Returns bookings with status approved or pending, sorted by start time.
+    """
+    bookings = (
+        db.query(Booking)
+        .join(Space, Booking.space_id == Space.id)
+        .filter(
+            Booking.user_id == current_user.id,
+            Booking.start_datetime < end,
+            Booking.end_datetime > start,
+            Booking.status.in_(["approved", "pending"]),
+        )
+        .order_by(Booking.start_datetime)
+        .all()
+    )
+    return [BookingWithSpace.model_validate(b) for b in bookings]
+
+
 @bookings_router.post("", response_model=BookingResponse, status_code=status.HTTP_201_CREATED)
 def create_booking(
     booking_data: BookingCreate,
@@ -873,6 +908,15 @@ def admin_update_booking(
             detail=errors[0],
         )
 
+    # Sync with Google Calendar if event exists
+    if booking.google_calendar_event_id:
+        update_calendar_event(
+            db=db,
+            booking=booking,
+            user_id=int(booking.user_id),  # type: ignore[arg-type]
+            event_id=booking.google_calendar_event_id,
+        )
+
     # Log audit
     log_action(
         db=db,
@@ -1025,6 +1069,15 @@ def reschedule_booking(
     booking.start_datetime = data.start_datetime  # type: ignore[assignment]
     booking.end_datetime = data.end_datetime  # type: ignore[assignment]
 
+    # Sync with Google Calendar if event exists
+    if booking.google_calendar_event_id:
+        update_calendar_event(
+            db=db,
+            booking=booking,
+            user_id=int(booking.user_id),  # type: ignore[arg-type]
+            event_id=booking.google_calendar_event_id,
+        )
+
     # Log audit
     log_action(
         db=db,
diff --git a/frontend/src/components/ActiveBookings.vue b/frontend/src/components/ActiveBookings.vue
new file mode 100644
index 0000000..b196232
--- /dev/null
+++ b/frontend/src/components/ActiveBookings.vue
@@ -0,0 +1,189 @@
+<template>
+  <div v-if="activeBookings.length > 0" class="active-bookings">
+    <div class="active-header">
+      <Zap :size="20" class="active-icon" />
+      <h3>Active Now</h3>
+    </div>
+    <div class="active-list">
+      <div
+        v-for="booking in activeBookings"
+        :key="booking.id"
+        class="active-card"
+      >
+        <div class="active-card-top">
+          <div class="active-info">
+            <h4>{{ booking.title }}</h4>
+            <p class="active-space">{{ booking.space?.name || 'Space' }}</p>
+            <p class="active-time">
+              {{ formatTime(booking.start_datetime) }} – {{ formatTime(booking.end_datetime) }}
+            </p>
+          </div>
+          <span class="active-remaining">{{ getRemainingTime(booking.end_datetime) }}</span>
+        </div>
+        <div class="progress-bar">
+          <div
+            class="progress-fill"
+            :style="{ width: getProgress(booking.start_datetime, booking.end_datetime) + '%' }"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { Zap } from 'lucide-vue-next'
+import { isBookingActive, getBookingProgress, formatRemainingTime } from '@/utils/datetime'
+import { formatTime as formatTimeUtil } from '@/utils/datetime'
+import { useAuthStore } from '@/stores/auth'
+import type { Booking } from '@/types'
+
+const props = defineProps<{
+  bookings: Booking[]
+}>()
+
+const authStore = useAuthStore()
+const userTimezone = computed(() => authStore.user?.timezone || 'UTC')
+
+const now = ref(new Date())
+
+const activeBookings = computed(() => {
+  void now.value
+  return props.bookings.filter(
+    (b) => b.status === 'approved' && isBookingActive(b.start_datetime, b.end_datetime)
+  )
+})
+
+const formatTime = (datetime: string): string => {
+  return formatTimeUtil(datetime, userTimezone.value)
+}
+
+const getProgress = (start: string, end: string): number => {
+  void now.value
+  return getBookingProgress(start, end)
+}
+
+const getRemainingTime = (end: string): string => {
+  void now.value
+  return formatRemainingTime(end)
+}
+
+let refreshInterval: ReturnType<typeof setInterval> | null = null
+
+onMounted(() => {
+  refreshInterval = setInterval(() => {
+    now.value = new Date()
+  }, 60000)
+})
+
+onUnmounted(() => {
+  if (refreshInterval) {
+    clearInterval(refreshInterval)
+    refreshInterval = null
+  }
+})
+</script>
+
+<style scoped>
+.active-bookings {
+  background: var(--color-surface);
+  border: 1px solid var(--color-accent);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+
+.active-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem 1.25rem;
+  background: var(--color-accent-light);
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.active-icon {
+  color: var(--color-accent);
+}
+
+.active-header h3 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.active-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  background: var(--color-border-light);
+}
+
+.active-card {
+  padding: 1rem 1.25rem;
+  background: var(--color-surface);
+}
+
+.active-card-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+}
+
+.active-info h4 {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0 0 4px;
+}
+
+.active-space {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  margin: 0 0 2px;
+}
+
+.active-time {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  margin: 0;
+}
+
+.active-remaining {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-accent);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.progress-bar {
+  height: 6px;
+  background: var(--color-bg-tertiary);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
+  border-radius: 3px;
+  transition: width 1s ease;
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .active-card-top {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .active-remaining {
+    align-self: flex-start;
+  }
+}
+</style>
diff --git a/frontend/src/components/DashboardCalendar.vue b/frontend/src/components/DashboardCalendar.vue
new file mode 100644
index 0000000..c068a0d
--- /dev/null
+++ b/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>
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 69872af..61c85d1 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -190,6 +190,13 @@ export const bookingsApi = {
   createRecurring: async (data: RecurringBookingCreate): Promise<RecurringBookingResult> => {
     const response = await api.post<RecurringBookingResult>('/bookings/recurring', data)
     return response.data
+  },
+
+  getMyCalendar: async (start: string, end: string): Promise<Booking[]> => {
+    const response = await api.get<Booking[]>('/bookings/my/calendar', {
+      params: { start, end }
+    })
+    return response.data
   }
 }
 
diff --git a/frontend/src/utils/datetime.ts b/frontend/src/utils/datetime.ts
index ad6195b..0cb3d27 100644
--- a/frontend/src/utils/datetime.ts
+++ b/frontend/src/utils/datetime.ts
@@ -131,3 +131,39 @@ export const isoToLocalDateTime = (isoDateTime: string, timezone: string = 'UTC'
   // Format as YYYY-MM-DDTHH:mm for datetime-local input
   return `${year}-${month}-${day}T${hour.padStart(2, '0')}:${minute.padStart(2, '0')}`
 }
+
+/**
+ * Check if a booking is currently active (in progress).
+ */
+export const isBookingActive = (startDatetime: string, endDatetime: string): boolean => {
+  const now = new Date()
+  const start = new Date(ensureUTC(startDatetime))
+  const end = new Date(ensureUTC(endDatetime))
+  return start <= now && end >= now
+}
+
+/**
+ * Calculate progress percentage for an active booking.
+ */
+export const getBookingProgress = (startDatetime: string, endDatetime: string): number => {
+  const now = new Date()
+  const start = new Date(ensureUTC(startDatetime))
+  const end = new Date(ensureUTC(endDatetime))
+  const total = end.getTime() - start.getTime()
+  const elapsed = now.getTime() - start.getTime()
+  return Math.min(100, Math.max(0, (elapsed / total) * 100))
+}
+
+/**
+ * Format remaining time for an active booking.
+ */
+export const formatRemainingTime = (endDatetime: string): string => {
+  const now = new Date()
+  const end = new Date(ensureUTC(endDatetime))
+  const remaining = end.getTime() - now.getTime()
+  if (remaining <= 0) return 'Ended'
+  const hours = Math.floor(remaining / 3600000)
+  const minutes = Math.floor((remaining % 3600000) / 60000)
+  if (hours > 0) return `${hours}h ${minutes}m remaining`
+  return `${minutes}m remaining`
+}
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index 408ee58..39911df 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -10,77 +10,8 @@
 
     <!-- Dashboard Content -->
     <div v-else class="dashboard-content">
-      <!-- Quick Stats -->
-      <CollapsibleSection title="Quick Stats" :icon="BarChart3">
-        <div class="stats-grid">
-          <div class="stat-card">
-            <div class="stat-icon stat-icon-total">
-              <Calendar :size="28" />
-            </div>
-            <div class="stat-content">
-              <h3>{{ stats.total }}</h3>
-              <p>Total Bookings</p>
-            </div>
-          </div>
-
-          <div class="stat-card">
-            <div class="stat-icon stat-icon-pending">
-              <Clock :size="28" />
-            </div>
-            <div class="stat-content">
-              <h3>{{ stats.pending }}</h3>
-              <p>Pending</p>
-            </div>
-          </div>
-
-          <div class="stat-card">
-            <div class="stat-icon stat-icon-approved">
-              <CheckCircle :size="28" />
-            </div>
-            <div class="stat-content">
-              <h3>{{ stats.approved }}</h3>
-              <p>Approved</p>
-            </div>
-          </div>
-
-          <!-- Admin: Pending Requests -->
-          <div v-if="isAdmin" class="stat-card">
-            <div class="stat-icon stat-icon-admin">
-              <Users :size="28" />
-            </div>
-            <div class="stat-content">
-              <h3>{{ adminStats.pendingRequests }}</h3>
-              <p>Pending Requests</p>
-            </div>
-          </div>
-        </div>
-      </CollapsibleSection>
-
-      <!-- Quick Actions -->
-      <div class="card quick-actions">
-        <h3>Quick Actions</h3>
-        <div class="actions-grid">
-          <router-link to="/spaces" class="action-btn">
-            <Search :size="24" class="action-icon" />
-            <span>Book a Space</span>
-          </router-link>
-
-          <router-link to="/my-bookings" class="action-btn">
-            <ClipboardList :size="24" class="action-icon" />
-            <span>My Bookings</span>
-          </router-link>
-
-          <router-link v-if="isAdmin" to="/admin/bookings" class="action-btn">
-            <ClipboardCheck :size="24" class="action-icon" />
-            <span>Manage Bookings</span>
-          </router-link>
-
-          <router-link v-if="isAdmin" to="/admin/spaces" class="action-btn">
-            <Building2 :size="24" class="action-icon" />
-            <span>Manage Spaces</span>
-          </router-link>
-        </div>
-      </div>
+      <!-- Active Bookings -->
+      <ActiveBookings :bookings="myBookings" />
 
       <div class="content-grid">
         <!-- Upcoming Bookings -->
@@ -117,39 +48,58 @@
           </div>
         </CollapsibleSection>
 
-        <!-- Available Spaces -->
-        <CollapsibleSection title="Available Spaces" :icon="Building2">
-          <template #header-actions>
-            <router-link to="/spaces" class="link">View All</router-link>
-          </template>
-
-          <div v-if="availableSpaces.length === 0" class="empty-state-small">
-            <Building2 :size="48" class="icon-empty" />
-            <p>No available spaces</p>
-          </div>
-
-          <div v-else class="spaces-list">
-            <router-link
-              v-for="space in availableSpaces.slice(0, 5)"
-              :key="space.id"
-              :to="`/spaces/${space.id}`"
-              class="space-item"
-            >
-              <div class="space-icon">
-                <Building2 :size="20" />
+        <!-- Quick Stats (compact) -->
+        <CollapsibleSection title="Quick Stats" :icon="BarChart3">
+          <div class="stats-grid-compact">
+            <router-link to="/my-bookings" class="stat-card-compact">
+              <div class="stat-icon-compact stat-icon-total">
+                <Calendar :size="20" />
               </div>
-              <div class="space-info">
-                <h4>{{ space.name }}</h4>
-                <p class="space-meta">
-                  {{ formatType(space.type) }} · Capacity: {{ space.capacity }}
-                </p>
+              <div class="stat-content-compact">
+                <h3>{{ stats.total }}</h3>
+                <p>Total Bookings</p>
+              </div>
+            </router-link>
+
+            <router-link to="/my-bookings?status=pending" class="stat-card-compact">
+              <div class="stat-icon-compact stat-icon-pending">
+                <Clock :size="20" />
+              </div>
+              <div class="stat-content-compact">
+                <h3>{{ stats.pending }}</h3>
+                <p>Pending</p>
+              </div>
+            </router-link>
+
+            <router-link to="/my-bookings?status=approved" class="stat-card-compact">
+              <div class="stat-icon-compact stat-icon-approved">
+                <CheckCircle :size="20" />
+              </div>
+              <div class="stat-content-compact">
+                <h3>{{ stats.approved }}</h3>
+                <p>Approved</p>
+              </div>
+            </router-link>
+
+            <!-- Admin: Pending Requests -->
+            <router-link v-if="isAdmin" to="/admin/pending" class="stat-card-compact">
+              <div class="stat-icon-compact stat-icon-admin">
+                <Users :size="20" />
+              </div>
+              <div class="stat-content-compact">
+                <h3>{{ adminStats.pendingRequests }}</h3>
+                <p>Pending Requests</p>
               </div>
-              <ChevronRight :size="20" class="icon-chevron" />
             </router-link>
           </div>
         </CollapsibleSection>
       </div>
 
+      <!-- My Calendar -->
+      <CollapsibleSection title="My Calendar" :icon="CalendarDays">
+        <DashboardCalendar ref="calendarRef" />
+      </CollapsibleSection>
+
       <!-- Admin: Recent Audit Logs -->
       <CollapsibleSection v-if="isAdmin" title="Recent Activity" :icon="ScrollText">
         <template #header-actions>
@@ -180,7 +130,6 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import {
-  spacesApi,
   bookingsApi,
   adminBookingsApi,
   auditLogApi,
@@ -190,31 +139,28 @@ import {
 import { useAuthStore } from '@/stores/auth'
 import { formatDateTime as formatDateTimeUtil, ensureUTC } from '@/utils/datetime'
 import CollapsibleSection from '@/components/CollapsibleSection.vue'
+import ActiveBookings from '@/components/ActiveBookings.vue'
+import DashboardCalendar from '@/components/DashboardCalendar.vue'
 import {
   Calendar,
   CalendarDays,
   Clock,
   CheckCircle,
   Users,
-  Search,
-  ClipboardList,
-  ClipboardCheck,
-  Building2,
-  ChevronRight,
   FileText,
   ScrollText,
   BarChart3
 } from 'lucide-vue-next'
-import type { Space, Booking, AuditLog, User } from '@/types'
+import type { Booking, AuditLog, User } from '@/types'
 
 const authStore = useAuthStore()
 const userTimezone = computed(() => authStore.user?.timezone || 'UTC')
 const loading = ref(true)
 const currentUser = ref<User | null>(null)
 const myBookings = ref<Booking[]>([])
-const spaces = ref<Space[]>([])
 const pendingRequests = ref<Booking[]>([])
 const auditLogs = ref<AuditLog[]>([])
+const calendarRef = ref<InstanceType<typeof DashboardCalendar> | null>(null)
 
 // Check if user is admin
 const isAdmin = computed(() => currentUser.value?.role === 'admin')
@@ -248,26 +194,11 @@ const upcomingBookings = computed(() => {
     })
 })
 
-// Get available (active) spaces
-const availableSpaces = computed(() => {
-  return spaces.value.filter((s) => s.is_active)
-})
-
 // Recent audit logs (last 5)
 const recentAuditLogs = computed(() => {
   return auditLogs.value.slice(0, 5)
 })
 
-// Format space type
-const formatType = (type: string): string => {
-  const typeMap: Record<string, string> = {
-    desk: 'Desk',
-    meeting_room: 'Meeting Room',
-    conference_room: 'Conference Room'
-  }
-  return typeMap[type] || type
-}
-
 // Format booking status
 const formatStatus = (status: string): string => {
   const statusMap: Record<string, string> = {
@@ -301,9 +232,6 @@ const loadDashboard = async () => {
     // Load user's bookings
     myBookings.value = await bookingsApi.getMy()
 
-    // Load available spaces
-    spaces.value = await spacesApi.list()
-
     // Load admin data if user is admin
     if (currentUser.value.role === 'admin') {
       // Load pending requests
@@ -365,27 +293,43 @@ onMounted(() => {
   gap: 24px;
 }
 
-/* Stats Grid */
-.stats-grid {
+/* Content Grid */
+.content-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 24px;
 }
 
-.stat-card {
-  background: var(--color-surface);
+/* Compact Stats Grid */
+.stats-grid-compact {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.stat-card-compact {
+  background: var(--color-bg-secondary);
   border-radius: var(--radius-md);
-  padding: 20px;
+  padding: 12px;
   border: 1px solid var(--color-border-light);
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 12px;
+  text-decoration: none;
+  transition: all var(--transition-fast);
+  cursor: pointer;
 }
 
-.stat-icon {
-  width: 56px;
-  height: 56px;
-  border-radius: var(--radius-lg);
+.stat-card-compact:hover {
+  background: var(--color-bg-tertiary);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.stat-icon-compact {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -412,66 +356,18 @@ onMounted(() => {
   color: var(--color-accent);
 }
 
-.stat-content h3 {
-  font-size: 32px;
+.stat-content-compact h3 {
+  font-size: 20px;
   font-weight: 700;
   color: var(--color-text-primary);
-  margin-bottom: 4px;
+  margin: 0 0 2px;
+  line-height: 1;
 }
 
-.stat-content p {
+.stat-content-compact p {
   color: var(--color-text-secondary);
-  font-size: 14px;
-}
-
-/* Quick Actions */
-.quick-actions h3 {
-  margin-bottom: 20px;
-  color: var(--color-text-primary);
-}
-
-.actions-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 16px;
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px 20px;
-  background: var(--color-bg-secondary);
-  border-radius: var(--radius-md);
-  color: var(--color-text-primary);
-  text-decoration: none;
-  font-weight: 600;
-  transition: all var(--transition-fast);
-}
-
-.action-btn:hover {
-  background: var(--color-bg-tertiary);
-  transform: translateY(-2px);
-}
-
-.action-icon {
-  color: var(--color-accent);
-}
-
-/* Content Grid */
-.content-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-  gap: 24px;
-}
-
-/* Cards */
-.card {
-  background: var(--color-surface);
-  border-radius: var(--radius-md);
-  padding: 24px;
-  box-shadow: var(--shadow-sm);
-  border: 1px solid var(--color-border);
+  font-size: 12px;
+  margin: 0;
 }
 
 .link {
@@ -560,60 +456,6 @@ onMounted(() => {
   color: var(--color-text-muted);
 }
 
-/* Spaces List */
-.spaces-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.space-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 14px;
-  background: var(--color-bg-secondary);
-  border-radius: var(--radius-md);
-  text-decoration: none;
-  transition: background var(--transition-fast);
-}
-
-.space-item:hover {
-  background: var(--color-bg-tertiary);
-}
-
-.space-icon {
-  width: 40px;
-  height: 40px;
-  background: var(--color-surface);
-  border-radius: var(--radius-md);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--color-accent);
-}
-
-.space-info {
-  flex: 1;
-}
-
-.space-info h4 {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin-bottom: 2px;
-}
-
-.space-meta {
-  font-size: 13px;
-  color: var(--color-text-secondary);
-}
-
-.icon-chevron {
-  color: var(--color-text-muted);
-}
-
 /* Audit List */
 .audit-list {
   display: flex;
@@ -670,16 +512,12 @@ onMounted(() => {
     margin-bottom: 24px;
   }
 
-  .stats-grid {
-    grid-template-columns: 1fr;
-  }
-
   .content-grid {
     grid-template-columns: 1fr;
   }
 
-  .actions-grid {
-    grid-template-columns: 1fr;
+  .stats-grid-compact {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 </style>
diff --git a/frontend/src/views/MyBookings.vue b/frontend/src/views/MyBookings.vue
index 58e4b2c..11d23ea 100644
--- a/frontend/src/views/MyBookings.vue
+++ b/frontend/src/views/MyBookings.vue
@@ -232,11 +232,13 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
 import { bookingsApi, handleApiError } from '@/services/api'
 import { useAuthStore } from '@/stores/auth'
 import { formatDate as formatDateTZ, formatTime as formatTimeTZ, isoToLocalDateTime, localDateTimeToISO } from '@/utils/datetime'
 import type { Booking } from '@/types'
 
+const route = useRoute()
 const authStore = useAuthStore()
 const userTimezone = computed(() => authStore.user?.timezone || 'UTC')
 
@@ -371,6 +373,9 @@ const handleCancel = async (booking: Booking) => {
 }
 
 onMounted(() => {
+  if (route.query.status) {
+    selectedStatus.value = route.query.status as string
+  }
   loadBookings()
 })
 </script>