feat: add per-space timezone settings and improve booking management

- Add timezone configuration per space with fallback to system default - Implement timezone-aware datetime display and editing across frontend - Add migration for per_space_settings table - Update booking service to handle timezone conversions properly - Improve .gitignore to exclude build artifacts - Add comprehensive testing documentation Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-02-11 15:54:51 +00:00
parent 6edf87c899
commit 9c2846cf00
17 changed files with 1322 additions and 40 deletions
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -46,6 +46,10 @@ export interface Space {
  capacity: number
  description?: string
  is_active: boolean
+  working_hours_start?: number | null
+  working_hours_end?: number | null
+  min_duration_minutes?: number | null
+  max_duration_minutes?: number | null
 }

 export interface Booking {
--- a/frontend/src/utils/datetime.ts
+++ b/frontend/src/utils/datetime.ts
@@ -2,6 +2,22 @@
 * Utility functions for timezone-aware datetime formatting.
 */

+/**
+ * Ensure datetime string has UTC marker (Z suffix).
+ * Backend returns naive datetimes without Z, which JS interprets as local time.
+ * This function adds Z to treat them as UTC.
+ */
+export const ensureUTC = (datetime: string): string => {
+  if (!datetime) return datetime
+  if (datetime.endsWith('Z')) return datetime
+  const tIndex = datetime.indexOf('T')
+  if (tIndex !== -1) {
+    const timePart = datetime.substring(tIndex + 1)
+    if (timePart.includes('+') || timePart.lastIndexOf('-') > 0) return datetime
+  }
+  return datetime + 'Z'
+}
+
 /**
 * Format a datetime string in the user's timezone.
 *
@@ -15,7 +31,7 @@ export const formatDateTime = (
  timezone: string = 'UTC',
  options?: Intl.DateTimeFormatOptions
 ): string => {
-  const date = new Date(datetime)
+  const date = new Date(ensureUTC(datetime))

  const defaultOptions: Intl.DateTimeFormatOptions = {
    timeZone: timezone,
@@ -47,7 +63,7 @@ export const formatDate = (datetime: string, timezone: string = 'UTC'): string =
 * Format time only in user's timezone.
 */
 export const formatTime = (datetime: string, timezone: string = 'UTC'): string => {
-  const date = new Date(datetime)
+  const date = new Date(ensureUTC(datetime))
  return new Intl.DateTimeFormat('ro-RO', {
    timeZone: timezone,
    hour: '2-digit',
@@ -59,7 +75,7 @@ export const formatTime = (datetime: string, timezone: string = 'UTC'): string =
 * Format datetime with timezone abbreviation.
 */
 export const formatDateTimeWithTZ = (datetime: string, timezone: string = 'UTC'): string => {
-  const date = new Date(datetime)
+  const date = new Date(ensureUTC(datetime))

  const formatted = new Intl.DateTimeFormat('ro-RO', {
    timeZone: timezone,
@@ -103,7 +119,7 @@ export const localDateTimeToISO = (localDateTime: string): string => {
 * Convert ISO datetime to datetime-local format for input field.
 */
 export const isoToLocalDateTime = (isoDateTime: string, timezone: string = 'UTC'): string => {
-  const date = new Date(isoDateTime)
+  const date = new Date(ensureUTC(isoDateTime))

  // Get the date components in the user's timezone
  const year = date.toLocaleString('en-US', { timeZone: timezone, year: 'numeric' })
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -287,7 +287,7 @@ import {
  handleApiError
 } from '@/services/api'
 import { useAuthStore } from '@/stores/auth'
-import { formatDateTime as formatDateTimeUtil } from '@/utils/datetime'
+import { formatDateTime as formatDateTimeUtil, ensureUTC } from '@/utils/datetime'
 import type { Space, Booking, AuditLog, User } from '@/types'

 const authStore = useAuthStore()
@@ -323,11 +323,11 @@ const upcomingBookings = computed(() => {
  const now = new Date()
  return myBookings.value
    .filter((b) => {
-      const startDate = new Date(b.start_datetime)
+      const startDate = new Date(ensureUTC(b.start_datetime))
      return startDate >= now && (b.status === 'approved' || b.status === 'pending')
    })
    .sort((a, b) => {
-      return new Date(a.start_datetime).getTime() - new Date(b.start_datetime).getTime()
+      return new Date(ensureUTC(a.start_datetime)).getTime() - new Date(ensureUTC(b.start_datetime)).getTime()
    })
 })

--- a/frontend/src/views/Spaces.vue
+++ b/frontend/src/views/Spaces.vue
@@ -1,11 +1,502 @@
 <template>
  <div class="spaces">
-    <h2>Spaces</h2>
-    <div class="card">
-      <p>Spaces list coming soon...</p>
+    <div class="spaces-header">
+      <div>
+        <h2>Available Spaces</h2>
+        <p class="subtitle">Browse and reserve meeting rooms and desk spaces</p>
+      </div>
+    </div>
+
+    <!-- Filters -->
+    <div class="filters">
+      <div class="filter-group">
+        <label for="type-filter">Type:</label>
+        <select id="type-filter" v-model="selectedType" class="filter-select">
+          <option value="">All Types</option>
+          <option value="desk">Desk</option>
+          <option value="meeting_room">Meeting Room</option>
+          <option value="conference_room">Conference Room</option>
+        </select>
+      </div>
+      <div class="filter-group">
+        <label for="status-filter">Status:</label>
+        <select id="status-filter" v-model="selectedStatus" class="filter-select">
+          <option value="">All</option>
+          <option value="active">Active Only</option>
+        </select>
+      </div>
+    </div>
+
+    <!-- Loading State -->
+    <div v-if="loading" class="loading">
+      <div class="spinner"></div>
+      <p>Loading spaces...</p>
+    </div>
+
+    <!-- Error State -->
+    <div v-else-if="error" class="error-card">
+      <h3>Error Loading Spaces</h3>
+      <p>{{ error }}</p>
+      <button @click="loadSpaces" class="btn btn-primary">Retry</button>
+    </div>
+
+    <!-- Empty State -->
+    <div v-else-if="filteredSpaces.length === 0" class="empty-state">
+      <svg class="empty-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+        />
+      </svg>
+      <h3>No Spaces Found</h3>
+      <p>{{ selectedType || selectedStatus ? 'Try adjusting your filters' : 'No spaces are currently available' }}</p>
+    </div>
+
+    <!-- Spaces Grid -->
+    <div v-else class="spaces-grid">
+      <div
+        v-for="space in filteredSpaces"
+        :key="space.id"
+        class="space-card"
+        @click="goToSpace(space.id)"
+      >
+        <div class="space-card-header">
+          <h3>{{ space.name }}</h3>
+          <span :class="['badge', space.is_active ? 'badge-active' : 'badge-inactive']">
+            {{ space.is_active ? 'Active' : 'Inactive' }}
+          </span>
+        </div>
+
+        <div class="space-card-body">
+          <div class="space-info">
+            <div class="info-item">
+              <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
+                />
+              </svg>
+              <span class="label">Type:</span>
+              <span class="value">{{ formatType(space.type) }}</span>
+            </div>
+
+            <div class="info-item">
+              <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+                />
+              </svg>
+              <span class="label">Capacity:</span>
+              <span class="value">{{ space.capacity }} {{ space.capacity === 1 ? 'person' : 'people' }}</span>
+            </div>
+          </div>
+
+          <p v-if="space.description" class="space-description">
+            {{ truncateDescription(space.description) }}
+          </p>
+        </div>
+
+        <div class="space-card-footer">
+          <button class="btn btn-secondary">
+            View Details
+            <svg class="icon-small" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
    </div>
  </div>
 </template>

 <script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { spacesApi, handleApiError } from '@/services/api'
+import type { Space } from '@/types'
+
+const router = useRouter()
+
+const spaces = ref<Space[]>([])
+const loading = ref(true)
+const error = ref('')
+const selectedType = ref('')
+const selectedStatus = ref('')
+
+// Format space type for display
+const formatType = (type: string): string => {
+  const typeMap: Record<string, string> = {
+    desk: 'Desk',
+    meeting_room: 'Meeting Room',
+    conference_room: 'Conference Room'
+  }
+  return typeMap[type] || type
+}
+
+// Truncate description
+const truncateDescription = (text: string, maxLength = 100): string => {
+  if (text.length <= maxLength) return text
+  return text.substring(0, maxLength) + '...'
+}
+
+// Filter spaces based on selected filters
+const filteredSpaces = computed(() => {
+  return spaces.value.filter((space) => {
+    // Filter by type
+    if (selectedType.value && space.type !== selectedType.value) {
+      return false
+    }
+
+    // Filter by status
+    if (selectedStatus.value === 'active' && !space.is_active) {
+      return false
+    }
+
+    return true
+  })
+})
+
+// Load spaces from API
+const loadSpaces = async () => {
+  loading.value = true
+  error.value = ''
+
+  try {
+    const data = await spacesApi.list()
+    spaces.value = data
+  } catch (err) {
+    error.value = handleApiError(err)
+  } finally {
+    loading.value = false
+  }
+}
+
+// Navigate to space detail page
+const goToSpace = (spaceId: number) => {
+  router.push(`/spaces/${spaceId}`)
+}
+
+onMounted(() => {
+  loadSpaces()
+})
 </script>
+
+<style scoped>
+.spaces {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+/* Header */
+.spaces-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 24px;
+}
+
+.spaces-header h2 {
+  font-size: 32px;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 8px;
+}
+
+.subtitle {
+  color: #6b7280;
+  font-size: 16px;
+}
+
+/* Filters */
+.filters {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 32px;
+  flex-wrap: wrap;
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filter-group label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #374151;
+}
+
+.filter-select {
+  padding: 8px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background: white;
+  font-size: 14px;
+  color: #374151;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.filter-select:hover {
+  border-color: #9ca3af;
+}
+
+.filter-select:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* Loading State */
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 20px;
+  color: #6b7280;
+}
+
+.spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid #e5e7eb;
+  border-top-color: #3b82f6;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin-bottom: 16px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Error State */
+.error-card {
+  background: white;
+  border-radius: 8px;
+  padding: 40px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  max-width: 500px;
+  margin: 40px auto;
+}
+
+.error-card h3 {
+  color: #991b1b;
+  margin-bottom: 12px;
+}
+
+.error-card p {
+  color: #6b7280;
+  margin-bottom: 24px;
+}
+
+/* Empty State */
+.empty-state {
+  text-align: center;
+  padding: 80px 20px;
+}
+
+.empty-icon {
+  width: 80px;
+  height: 80px;
+  color: #d1d5db;
+  margin: 0 auto 24px;
+}
+
+.empty-state h3 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 8px;
+}
+
+.empty-state p {
+  color: #6b7280;
+  font-size: 16px;
+}
+
+/* Spaces Grid */
+.spaces-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 24px;
+}
+
+/* Space Card */
+.space-card {
+  background: white;
+  border-radius: 8px;
+  padding: 24px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  flex-direction: column;
+}
+
+.space-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+}
+
+.space-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 16px;
+  gap: 12px;
+}
+
+.space-card-header h3 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #111827;
+  flex: 1;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.badge-active {
+  background: #d1fae5;
+  color: #065f46;
+}
+
+.badge-inactive {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.space-card-body {
+  flex: 1;
+  margin-bottom: 20px;
+}
+
+.space-info {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #4b5563;
+}
+
+.icon {
+  width: 18px;
+  height: 18px;
+  color: #9ca3af;
+  flex-shrink: 0;
+}
+
+.label {
+  font-weight: 500;
+  color: #6b7280;
+}
+
+.value {
+  color: #374151;
+}
+
+.space-description {
+  color: #6b7280;
+  font-size: 14px;
+  line-height: 1.5;
+  margin-top: 12px;
+}
+
+.space-card-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #2563eb;
+}
+
+.btn-secondary {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.btn-secondary:hover {
+  background: #e5e7eb;
+}
+
+.icon-small {
+  width: 16px;
+  height: 16px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .spaces-header h2 {
+    font-size: 24px;
+  }
+
+  .spaces-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .filters {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .filter-group {
+    width: 100%;
+  }
+
+  .filter-select {
+    flex: 1;
+  }
+}
+</style>