Commit Graph

3 Commits

Author SHA1 Message Date
Claude Agent
d245c72757 feat: complete UI/UX overhaul - dashboard unification, calendar UX, mobile optimization
- Dashboard redesign as command center with filters, quick actions, inline approve/reject
- Reusable components: BookingRow, BookingFilters, ActionMenu, BookingPreviewModal, BookingEditModal
- Calendar: drag & drop reschedule, eventClick preview modal, grid/list toggle
- Mobile: segmented control bookings/calendar toggle, compact pills, responsive layout
- Collapsible filters with active count badge
- Smart menu positioning with Teleport
- Calendar/list bidirectional data sync
- Navigation: unified History page, removed AdminPending
- Google Calendar OAuth integration
- Dark mode contrast improvements, breadcrumb navigation
- useLocalStorage composable for state persistence

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-12 15:34:47 +00:00
Claude Agent
a4d3f862d2 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>
2026-02-12 10:30:43 +00:00
Claude Agent
0bf3e6a7e2 feat: complete UI redesign with dark mode, sidebar navigation, and modern design system
Implemented comprehensive UI overhaul with three-layer architecture:

Layer 1 - Theme System:
- CSS variables for light/dark themes (theme.css)
- Theme composable with light/dark/auto mode (useTheme.ts)
- Sidebar state management composable (useSidebar.ts)
- Refactored main.css to use CSS variables throughout

Layer 2 - Core Components:
- AppSidebar with collapsible navigation (desktop) and overlay (mobile)
- CollapsibleSection reusable component for expandable cards
- Restructured App.vue with new sidebar layout
- Integrated Lucide icons library (lucide-vue-next)

Layer 3 - Views & Components:
- Updated all 14 views with CSS variables and responsive design
- Replaced inline SVG with Lucide icon components
- Added collapsible sections to Dashboard, Admin pages, UserProfile
- Updated 3 shared components (BookingForm, SpaceCalendar, AttachmentsList)

Features:
- Dark/light/auto theme with persistent preference
- Collapsible sidebar (icons-only on desktop, overlay on mobile)
- Consistent color palette using CSS variables
- Full responsive design across all pages
- Modern minimalist aesthetic with Indigo accent color

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-02-11 21:27:05 +00:00