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>
This commit is contained in:
Claude Agent
189
frontend/src/components/ActiveBookings.vue
Normal file
189
frontend/src/components/ActiveBookings.vue
Normal 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
176
frontend/src/components/DashboardCalendar.vue
Normal 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>
|
||||
Reference in New Issue
Block a user