romfast/space-booking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Claude Agent
2026-02-12 10:21:32 +00:00
parent 72f46b1062
commit 28685d8254
8 changed files with 560 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
backend/.env.example
View File

@@ -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

55
backend/app/api/bookings.py
View File

@@ -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,

189
frontend/src/components/ActiveBookings.vue Normal file
View File

@@ -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>

176
frontend/src/components/DashboardCalendar.vue Normal file
View File

@@ -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>

7
frontend/src/services/api.ts
View File

@@ -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
}
}

36
frontend/src/utils/datetime.ts
View File

@@ -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`
}

338
frontend/src/views/Dashboard.vue
View File

@@ -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>

5
frontend/src/views/MyBookings.vue
View File

@@ -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>