From a4d3f862d20e563ae79bc42b6b8fd33bc58fd77a Mon Sep 17 00:00:00 2001
From: Claude Agent <claude-agent@romfast.ro>
Date: Thu, 12 Feb 2026 10:30:43 +0000
Subject: [PATCH] fix(dashboard): sidebar theming, calendar reactivity, and
 booking filters

Fix multiple dashboard and UI issues:

Frontend fixes:
- Fix sidebar remaining dark on light theme (add proper light/dark CSS variables)
- Fix DashboardCalendar blank/not showing events (use watch + calendar API instead of computed options)
- Fix upcoming bookings to include active and recent past (last 7 days) bookings
- Improve sidebar collapsed state UX (stack footer buttons vertically, full width)

Details:
- theme.css: Add light sidebar colors (white bg) for :root, keep dark colors for [data-theme="dark"]
- DashboardCalendar: Add watch on events, use calendarRef to update events via removeAllEvents/addEventSource
- Dashboard: Change upcoming filter from "startDate >= now" to "endDate >= 7 days ago"
- AppSidebar: Stack footer-actions vertically when collapsed for better visibility

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 frontend/src/assets/theme.css                 | 14 +++++++----
 frontend/src/components/AppSidebar.vue        | 10 ++++++++
 frontend/src/components/DashboardCalendar.vue | 24 ++++++++++++++-----
 frontend/src/views/Dashboard.vue              | 11 ++++++---
 4 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/frontend/src/assets/theme.css b/frontend/src/assets/theme.css
index c9b12ff..82f1470 100644
--- a/frontend/src/assets/theme.css
+++ b/frontend/src/assets/theme.css
@@ -35,10 +35,10 @@
   /* Sidebar */
   --sidebar-width: 260px;
   --sidebar-collapsed-width: 68px;
-  --sidebar-bg: #1a1a2e;
-  --sidebar-text: #a1a1b5;
-  --sidebar-text-active: #ffffff;
-  --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
+  --sidebar-bg: #ffffff;
+  --sidebar-text: #6b7280;
+  --sidebar-text-active: #1a1a2e;
+  --sidebar-hover-bg: #f3f4f6;
 
   /* Spacing */
   --radius-sm: 6px;
@@ -66,4 +66,10 @@
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
+
+  /* Sidebar - Dark theme */
+  --sidebar-bg: #1a1a2e;
+  --sidebar-text: #a1a1b5;
+  --sidebar-text-active: #ffffff;
+  --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
 }
diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index 5f72d0e..15cfd7d 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -148,6 +148,16 @@ const handleLogout = () => {
   width: var(--sidebar-collapsed-width);
 }
 
+.sidebar.collapsed .footer-actions {
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.sidebar.collapsed .footer-btn {
+  width: 100%;
+  justify-content: center;
+}
+
 /* Header */
 .sidebar-header {
   display: flex;
diff --git a/frontend/src/components/DashboardCalendar.vue b/frontend/src/components/DashboardCalendar.vue
index c068a0d..a165d23 100644
--- a/frontend/src/components/DashboardCalendar.vue
+++ b/frontend/src/components/DashboardCalendar.vue
@@ -2,17 +2,17 @@
   <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" />
+    <FullCalendar ref="calendarRef" v-show="!loading" :options="calendarOptions" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch, nextTick } 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 type { CalendarOptions, EventInput, DatesSetArg, CalendarApi } from '@fullcalendar/core'
 import { bookingsApi, handleApiError } from '@/services/api'
 import { useAuthStore } from '@/stores/auth'
 import type { Booking } from '@/types'
@@ -23,6 +23,7 @@ const bookings = ref<Booking[]>([])
 const loading = ref(true)
 const initialLoad = ref(true)
 const error = ref('')
+const calendarRef = ref<InstanceType<typeof FullCalendar> | null>(null)
 
 const STATUS_COLORS: Record<string, string> = {
   pending: '#FFA500',
@@ -46,6 +47,17 @@ const events = computed<EventInput[]>(() => {
   }))
 })
 
+// Watch events and update FullCalendar
+watch(events, (newEvents) => {
+  nextTick(() => {
+    const calendarApi = calendarRef.value?.getApi()
+    if (calendarApi) {
+      calendarApi.removeAllEvents()
+      calendarApi.addEventSource(newEvents)
+    }
+  })
+})
+
 let currentStart: Date | null = null
 let currentEnd: Date | null = null
 
@@ -72,7 +84,7 @@ const handleDatesSet = (arg: DatesSetArg) => {
   loadBookings(arg.start, arg.end)
 }
 
-const calendarOptions = computed<CalendarOptions>(() => ({
+const calendarOptions: CalendarOptions = {
   plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
   initialView: 'dayGridMonth',
   headerToolbar: {
@@ -82,7 +94,7 @@ const calendarOptions = computed<CalendarOptions>(() => ({
   },
   timeZone: userTimezone.value,
   firstDay: 1,
-  events: events.value,
+  events: [],
   datesSet: handleDatesSet,
   editable: false,
   selectable: false,
@@ -98,7 +110,7 @@ const calendarOptions = computed<CalendarOptions>(() => ({
     minute: '2-digit',
     hour12: false
   }
-}))
+}
 
 const refresh = () => {
   if (currentStart && currentEnd) {
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index 39911df..bba2808 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -181,13 +181,18 @@ const adminStats = computed(() => {
   }
 })
 
-// Get upcoming bookings (approved or pending, sorted by start time)
+// Get upcoming bookings (active, future, and recent past - last 7 days)
 const upcomingBookings = computed(() => {
   const now = new Date()
+  const sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
+
   return myBookings.value
     .filter((b) => {
-      const startDate = new Date(ensureUTC(b.start_datetime))
-      return startDate >= now && (b.status === 'approved' || b.status === 'pending')
+      if (b.status !== 'approved' && b.status !== 'pending') return false
+
+      const endDate = new Date(ensureUTC(b.end_datetime))
+      // Include if not ended yet OR ended within last 7 days
+      return endDate >= sevenDaysAgo
     })
     .sort((a, b) => {
       return new Date(ensureUTC(a.start_datetime)).getTime() - new Date(ensureUTC(b.start_datetime)).getTime()