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
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user