feat: add multi-tenant system with properties, organizations, and public booking

Implement complete multi-property architecture: - Properties (groups of spaces) with public/private visibility - Property managers (many-to-many) with role-based permissions - Organizations with member management - Anonymous/guest booking support via public API (/api/public/*) - Property-scoped spaces, bookings, and settings - Frontend: property selector, organization management, public booking views - Migration script and updated seed data Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-15 00:17:21 +00:00
parent d637513d92
commit e21cf03a16
51 changed files with 6324 additions and 273 deletions
--- a/frontend/src/views/Admin.vue
+++ b/frontend/src/views/Admin.vue
@@ -2,7 +2,12 @@
  <div class="admin">
    <Breadcrumb :items="breadcrumbItems" />
    <div class="page-header">
-      <h2>Space Management</h2>
+      <div>
+        <h2>Space Management</h2>
+        <p v-if="authStore.isManager && propertyStore.currentProperty" class="property-context">
+          Property: <strong>{{ propertyStore.currentProperty.name }}</strong>
+        </p>
+      </div>
      <button class="btn btn-primary" @click="openCreateModal">
        <Plus :size="16" />
        New Space
@@ -73,6 +78,10 @@
            <UsersIcon :size="14" />
            {{ space.capacity }}
          </span>
+          <span v-if="space.property_name" class="meta-badge meta-property" :title="'Property: ' + space.property_name">
+            <Landmark :size="11" />
+            {{ space.property_name }}
+          </span>
        </div>
        <p v-if="space.description" class="space-card-desc">{{ space.description }}</p>
      </div>
@@ -94,6 +103,15 @@
            />
          </div>

+          <div class="form-group">
+            <label for="property">Property *</label>
+            <select id="property" v-model.number="formData.property_id" required>
+              <option v-for="prop in availableProperties" :key="prop.id" :value="prop.id">
+                {{ prop.name }}
+              </option>
+            </select>
+          </div>
+
          <div class="form-group">
            <label for="type">Type *</label>
            <select id="type" v-model="formData.type" required>
@@ -201,10 +219,15 @@

 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { spacesApi, handleApiError } from '@/services/api'
+import { spacesApi, propertiesApi, handleApiError } from '@/services/api'
+import { useAuthStore } from '@/stores/auth'
+import { usePropertyStore } from '@/stores/property'
 import Breadcrumb from '@/components/Breadcrumb.vue'
-import { Building2, Plus, Pencil, Power, Users as UsersIcon } from 'lucide-vue-next'
-import type { Space } from '@/types'
+import { Building2, Plus, Pencil, Power, Users as UsersIcon, Landmark } from 'lucide-vue-next'
+import type { Space, Property } from '@/types'
+
+const authStore = useAuthStore()
+const propertyStore = usePropertyStore()

 const breadcrumbItems = [
  { label: 'Dashboard', to: '/dashboard' },
@@ -212,6 +235,7 @@ const breadcrumbItems = [
 ]

 const spaces = ref<Space[]>([])
+const availableProperties = ref<Property[]>([])
 const loadingSpaces = ref(false)
 const activeCount = computed(() => spaces.value.filter(s => s.is_active).length)
 const inactiveCount = computed(() => spaces.value.filter(s => !s.is_active).length)
@@ -226,12 +250,23 @@ const formData = ref({
  type: 'sala',
  capacity: 1,
  description: '',
+  property_id: null as number | null,
  working_hours_start: null as number | null,
  working_hours_end: null as number | null,
  min_duration_minutes: null as number | null,
  max_duration_minutes: null as number | null
 })

+const loadProperties = async () => {
+  try {
+    if (authStore.isSuperadmin) {
+      availableProperties.value = await propertiesApi.listAll()
+    } else {
+      availableProperties.value = await propertiesApi.list()
+    }
+  } catch {}
+}
+
 const loadSpaces = async () => {
  loadingSpaces.value = true
  error.value = ''
@@ -274,6 +309,12 @@ const handleSubmit = async () => {

 const openCreateModal = () => {
  resetForm()
+  // Auto-select current property context or first available
+  if (propertyStore.currentPropertyId) {
+    formData.value.property_id = propertyStore.currentPropertyId
+  } else if (availableProperties.value.length > 0) {
+    formData.value.property_id = availableProperties.value[0].id
+  }
  showModal.value = true
 }

@@ -284,6 +325,7 @@ const startEdit = (space: Space) => {
    type: space.type,
    capacity: space.capacity,
    description: space.description || '',
+    property_id: space.property_id ?? null,
    working_hours_start: space.working_hours_start ?? null,
    working_hours_end: space.working_hours_end ?? null,
    min_duration_minutes: space.min_duration_minutes ?? null,
@@ -307,7 +349,8 @@ const resetForm = () => {
    working_hours_start: null,
    working_hours_end: null,
    min_duration_minutes: null,
-    max_duration_minutes: null
+    max_duration_minutes: null,
+    property_id: null
  }
 }

@@ -333,6 +376,7 @@ const toggleStatus = async (space: Space) => {

 onMounted(() => {
  loadSpaces()
+  loadProperties()
 })
 </script>

@@ -353,6 +397,16 @@ onMounted(() => {
  color: var(--color-text-primary);
 }

+.property-context {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  margin: 4px 0 0;
+}
+
+.property-context strong {
+  color: var(--color-accent);
+}
+
 /* Stats Pills */
 .stats-pills {
  display: flex;
@@ -544,6 +598,14 @@ onMounted(() => {
  color: var(--color-accent);
 }

+.meta-property {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
+  color: var(--color-warning);
+}
+
 .meta-item {
  display: inline-flex;
  align-items: center;
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -312,7 +312,7 @@ const filters = ref<FilterValues>({
  user_search: null
 })

-const isAdmin = computed(() => currentUser.value?.role === 'admin')
+const isAdmin = computed(() => currentUser.value?.role === 'admin' || currentUser.value?.role === 'superadmin' || currentUser.value?.role === 'manager')

 const hasActiveFilters = computed(() =>
  filters.value.space_id !== null ||
@@ -454,7 +454,7 @@ const loadDashboard = async () => {
    // Load spaces for filter dropdown
    spaces.value = await spacesApi.list()

-    if (currentUser.value.role === 'admin') {
+    if (currentUser.value.role === 'admin' || currentUser.value.role === 'superadmin' || currentUser.value.role === 'manager') {
      const results = await Promise.allSettled([
        adminBookingsApi.getPending(),
        adminBookingsApi.getAll({
@@ -535,7 +535,11 @@ const handleCancel = async (booking: Booking) => {

  processing.value = booking.id
  try {
-    await bookingsApi.update(booking.id, { status: 'canceled' } as any)
+    if (isAdmin.value) {
+      await adminBookingsApi.cancel(booking.id)
+    } else {
+      await bookingsApi.update(booking.id, { status: 'canceled' } as any)
+    }
    showToast(`Booking "${booking.title}" canceled.`, 'success')
    await loadDashboard()
    calendarRef.value?.refresh()
--- a/frontend/src/views/MyBookings.vue
+++ b/frontend/src/views/MyBookings.vue
@@ -234,6 +234,43 @@
      </div>
    </div>

+    <!-- Confirm Modal -->
+    <div v-if="showConfirmModal" class="modal" @click.self="showConfirmModal = false">
+      <div class="modal-content">
+        <h3>{{ confirmTitle }}</h3>
+        <p class="confirm-message">{{ confirmMessage }}</p>
+        <div class="form-actions">
+          <button type="button" class="btn btn-secondary" @click="showConfirmModal = false" :disabled="confirmLoading">Cancel</button>
+          <button
+            type="button"
+            :class="['btn', confirmDanger ? 'btn-danger' : 'btn-primary']"
+            @click="executeConfirm"
+            :disabled="confirmLoading"
+          >
+            {{ confirmLoading ? 'Processing...' : confirmLabel }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Reject Modal -->
+    <div v-if="showRejectModal" class="modal" @click.self="showRejectModal = false">
+      <div class="modal-content">
+        <h3>Reject Booking</h3>
+        <p class="confirm-message">Rejecting "{{ rejectBooking?.title }}"</p>
+        <div class="form-group">
+          <label for="reject-reason">Reason (optional)</label>
+          <textarea id="reject-reason" v-model="rejectReason" rows="3" placeholder="Enter rejection reason..."></textarea>
+        </div>
+        <div class="form-actions">
+          <button type="button" class="btn btn-secondary" @click="showRejectModal = false">Cancel</button>
+          <button type="button" class="btn btn-danger" @click="doReject" :disabled="processing !== null">
+            {{ processing !== null ? 'Rejecting...' : 'Reject' }}
+          </button>
+        </div>
+      </div>
+    </div>
+
    <!-- Toast -->
    <div v-if="toastMsg" :class="['toast', `toast-${toastType}`]">{{ toastMsg }}</div>
  </div>
@@ -266,7 +303,7 @@ import type { Booking, Space } from '@/types'
 const route = useRoute()
 const authStore = useAuthStore()

-const isAdmin = computed(() => authStore.user?.role === 'admin')
+const isAdmin = computed(() => ['admin', 'superadmin', 'manager'].includes(authStore.user?.role || ''))
 const userTimezone = computed(() => authStore.user?.timezone || 'UTC')

 const breadcrumbItems = computed(() => [
@@ -325,6 +362,62 @@ const showToast = (msg: string, type: 'success' | 'error') => {
  setTimeout(() => { toastMsg.value = '' }, type === 'success' ? 3000 : 5000)
 }

+// Confirm modal (for cancel / approve)
+const showConfirmModal = ref(false)
+const confirmTitle = ref('')
+const confirmMessage = ref('')
+const confirmDanger = ref(false)
+const confirmLabel = ref('Yes')
+const confirmLoading = ref(false)
+const onConfirm = ref<(() => Promise<void>) | null>(null)
+
+const openConfirm = (opts: { title: string; message: string; danger?: boolean; label?: string; action: () => Promise<void> }) => {
+  confirmTitle.value = opts.title
+  confirmMessage.value = opts.message
+  confirmDanger.value = opts.danger ?? false
+  confirmLabel.value = opts.label ?? 'Yes'
+  onConfirm.value = opts.action
+  confirmLoading.value = false
+  showConfirmModal.value = true
+}
+
+const executeConfirm = async () => {
+  if (!onConfirm.value) return
+  confirmLoading.value = true
+  try {
+    await onConfirm.value()
+  } finally {
+    confirmLoading.value = false
+    showConfirmModal.value = false
+  }
+}
+
+// Reject modal
+const showRejectModal = ref(false)
+const rejectBooking = ref<Booking | null>(null)
+const rejectReason = ref('')
+
+const openRejectModal = (booking: Booking) => {
+  rejectBooking.value = booking
+  rejectReason.value = ''
+  showRejectModal.value = true
+}
+
+const doReject = async () => {
+  if (!rejectBooking.value) return
+  processing.value = rejectBooking.value.id
+  try {
+    await adminBookingsApi.reject(rejectBooking.value.id, rejectReason.value || undefined)
+    showToast(`Booking "${rejectBooking.value.title}" rejected.`, 'success')
+    showRejectModal.value = false
+    await loadBookings()
+  } catch (err) {
+    showToast(handleApiError(err), 'error')
+  } finally {
+    processing.value = null
+  }
+}
+
 const hasActiveFilters = computed(() =>
  filters.value.space_id !== null ||
  filters.value.status !== null ||
@@ -413,50 +506,53 @@ const clearAllFilters = () => {
 }

 // Actions
-const handleCancel = async (booking: Booking) => {
-  if (!confirm(`Cancel booking "${booking.title}"?`)) return
-
-  processing.value = booking.id
-  try {
-    await bookingsApi.update(booking.id, { status: 'canceled' } as any)
-    showToast(`Booking "${booking.title}" canceled.`, 'success')
-    await loadBookings()
-  } catch (err) {
-    showToast(handleApiError(err), 'error')
-  } finally {
-    processing.value = null
-  }
+const handleCancel = (booking: Booking) => {
+  openConfirm({
+    title: 'Cancel Booking',
+    message: `Cancel booking "${booking.title}"?`,
+    danger: true,
+    label: 'Cancel Booking',
+    action: async () => {
+      processing.value = booking.id
+      try {
+        if (isAdmin.value) {
+          await adminBookingsApi.cancel(booking.id)
+        } else {
+          await bookingsApi.cancel(booking.id)
+        }
+        showToast(`Booking "${booking.title}" canceled.`, 'success')
+        await loadBookings()
+      } catch (err) {
+        showToast(handleApiError(err), 'error')
+      } finally {
+        processing.value = null
+      }
+    }
+  })
 }

-const handleApprove = async (booking: Booking) => {
-  if (!confirm(`Approve booking "${booking.title}"?`)) return
-
-  processing.value = booking.id
-  try {
-    await adminBookingsApi.approve(booking.id)
-    showToast(`Booking "${booking.title}" approved!`, 'success')
-    await loadBookings()
-  } catch (err) {
-    showToast(handleApiError(err), 'error')
-  } finally {
-    processing.value = null
-  }
+const handleApprove = (booking: Booking) => {
+  openConfirm({
+    title: 'Approve Booking',
+    message: `Approve booking "${booking.title}"?`,
+    label: 'Approve',
+    action: async () => {
+      processing.value = booking.id
+      try {
+        await adminBookingsApi.approve(booking.id)
+        showToast(`Booking "${booking.title}" approved!`, 'success')
+        await loadBookings()
+      } catch (err) {
+        showToast(handleApiError(err), 'error')
+      } finally {
+        processing.value = null
+      }
+    }
+  })
 }

-const handleReject = async (booking: Booking) => {
-  const reason = prompt('Rejection reason (optional):')
-  if (reason === null) return // User clicked cancel
-
-  processing.value = booking.id
-  try {
-    await adminBookingsApi.reject(booking.id, reason || undefined)
-    showToast(`Booking "${booking.title}" rejected.`, 'success')
-    await loadBookings()
-  } catch (err) {
-    showToast(handleApiError(err), 'error')
-  } finally {
-    processing.value = null
-  }
+const handleReject = (booking: Booking) => {
+  openRejectModal(booking)
 }

 // Edit modal
@@ -1009,6 +1105,21 @@ onMounted(() => {
  background: var(--color-border);
 }

+.btn-danger {
+  background: var(--color-danger);
+  color: white;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--color-danger) 85%, black);
+}
+
+.confirm-message {
+  color: var(--color-text-secondary);
+  margin-bottom: 20px;
+  line-height: 1.5;
+}
+
 /* Toast */
 .toast {
  position: fixed;
--- a/frontend/src/views/Organization.vue
+++ b/frontend/src/views/Organization.vue
@@ -0,0 +1,469 @@
+<template>
+  <div class="organization">
+    <Breadcrumb :items="breadcrumbItems" />
+    <div class="page-header">
+      <h2>Organizations</h2>
+      <button v-if="authStore.isSuperadmin" class="btn btn-primary" @click="openCreateModal">
+        <Plus :size="16" />
+        New Organization
+      </button>
+    </div>
+
+    <div v-if="loading" class="loading-state">
+      <div class="spinner"></div>
+      <p>Loading organizations...</p>
+    </div>
+
+    <div v-else-if="organizations.length === 0" class="empty-state">
+      <Building2 :size="48" class="empty-icon" />
+      <p>No organizations found</p>
+    </div>
+
+    <div v-else class="org-list">
+      <div v-for="org in organizations" :key="org.id" class="org-card">
+        <div class="org-header">
+          <div>
+            <h3>{{ org.name }}</h3>
+            <p v-if="org.description" class="org-desc">{{ org.description }}</p>
+          </div>
+          <div class="org-actions">
+            <span class="member-count">{{ org.member_count || 0 }} members</span>
+            <button
+              class="btn btn-sm btn-secondary"
+              @click="toggleExpanded(org.id)"
+            >
+              {{ expandedOrg === org.id ? 'Hide' : 'Members' }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Expanded Members -->
+        <div v-if="expandedOrg === org.id" class="org-members">
+          <div v-if="loadingMembers" class="loading-inline">Loading members...</div>
+          <div v-else>
+            <div class="members-header">
+              <h4>Members</h4>
+            </div>
+            <div v-if="members.length === 0" class="empty-inline">No members yet</div>
+            <table v-else class="data-table">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Email</th>
+                  <th>Role</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="member in members" :key="member.id">
+                  <td>{{ member.user_name }}</td>
+                  <td>{{ member.user_email }}</td>
+                  <td>
+                    <span :class="['badge', member.role === 'admin' ? 'badge-admin' : 'badge-user']">
+                      {{ member.role }}
+                    </span>
+                  </td>
+                  <td class="actions">
+                    <button
+                      v-if="authStore.isSuperadmin"
+                      class="btn btn-sm btn-danger"
+                      @click="removeMember(org.id, member.user_id)"
+                    >
+                      Remove
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Create Org Modal -->
+    <div v-if="showCreateModal" class="modal" @click.self="showCreateModal = false">
+      <div class="modal-content">
+        <h3>Create Organization</h3>
+        <form @submit.prevent="handleCreate" class="org-form">
+          <div class="form-group">
+            <label>Name *</label>
+            <input v-model="createForm.name" type="text" required placeholder="Organization name" />
+          </div>
+          <div class="form-group">
+            <label>Description</label>
+            <textarea v-model="createForm.description" rows="3" placeholder="Optional"></textarea>
+          </div>
+          <div v-if="formError" class="error">{{ formError }}</div>
+          <div class="form-actions">
+            <button type="submit" class="btn btn-primary" :disabled="submitting">Create</button>
+            <button type="button" class="btn btn-secondary" @click="showCreateModal = false">Cancel</button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <div v-if="toast" class="toast toast-success">{{ toast }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { organizationsApi, handleApiError } from '@/services/api'
+import { useAuthStore } from '@/stores/auth'
+import Breadcrumb from '@/components/Breadcrumb.vue'
+import { Building2, Plus } from 'lucide-vue-next'
+import type { Organization, OrganizationMember } from '@/types'
+
+const authStore = useAuthStore()
+
+const breadcrumbItems = [
+  { label: 'Dashboard', to: '/dashboard' },
+  { label: 'Organizations' }
+]
+
+const organizations = ref<Organization[]>([])
+const loading = ref(true)
+const expandedOrg = ref<number | null>(null)
+const members = ref<OrganizationMember[]>([])
+const loadingMembers = ref(false)
+const showCreateModal = ref(false)
+const submitting = ref(false)
+const formError = ref('')
+const toast = ref('')
+
+const createForm = ref({ name: '', description: '' })
+
+const loadOrganizations = async () => {
+  loading.value = true
+  try {
+    organizations.value = await organizationsApi.list()
+  } catch (err) {
+    formError.value = handleApiError(err)
+  } finally {
+    loading.value = false
+  }
+}
+
+const toggleExpanded = async (orgId: number) => {
+  if (expandedOrg.value === orgId) {
+    expandedOrg.value = null
+    return
+  }
+  expandedOrg.value = orgId
+  loadingMembers.value = true
+  try {
+    members.value = await organizationsApi.getMembers(orgId)
+  } catch {}
+  finally {
+    loadingMembers.value = false
+  }
+}
+
+const openCreateModal = () => {
+  createForm.value = { name: '', description: '' }
+  formError.value = ''
+  showCreateModal.value = true
+}
+
+const handleCreate = async () => {
+  submitting.value = true
+  formError.value = ''
+  try {
+    await organizationsApi.create(createForm.value)
+    showCreateModal.value = false
+    toast.value = 'Organization created!'
+    setTimeout(() => { toast.value = '' }, 3000)
+    await loadOrganizations()
+  } catch (err) {
+    formError.value = handleApiError(err)
+  } finally {
+    submitting.value = false
+  }
+}
+
+const removeMember = async (orgId: number, userId: number) => {
+  if (!confirm('Remove this member?')) return
+  try {
+    await organizationsApi.removeMember(orgId, userId)
+    members.value = members.value.filter(m => m.user_id !== userId)
+    toast.value = 'Member removed'
+    setTimeout(() => { toast.value = '' }, 3000)
+  } catch (err) {
+    formError.value = handleApiError(err)
+  }
+}
+
+onMounted(() => loadOrganizations())
+</script>
+
+<style scoped>
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.page-header h2 {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 60px 20px;
+  color: var(--color-text-secondary);
+}
+
+.spinner {
+  width: 40px; height: 40px;
+  border: 3px solid var(--color-border);
+  border-top-color: var(--color-accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin-bottom: 12px;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 60px 20px;
+  color: var(--color-text-muted);
+  gap: 16px;
+}
+
+.empty-icon { color: var(--color-border); }
+
+.org-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.org-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+}
+
+.org-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.org-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.org-desc {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  margin: 4px 0 0;
+}
+
+.org-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.member-count {
+  font-size: 13px;
+  color: var(--color-text-muted);
+}
+
+.org-members {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--color-border);
+}
+
+.members-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.members-header h4 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.loading-inline, .empty-inline {
+  text-align: center;
+  padding: 16px;
+  color: var(--color-text-muted);
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.data-table th {
+  text-align: left;
+  padding: 8px 12px;
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.data-table td {
+  padding: 8px 12px;
+  font-size: 14px;
+  color: var(--color-text-primary);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.badge {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.badge-admin {
+  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
+  color: var(--color-accent);
+}
+
+.badge-user {
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-primary);
+}
+
+.actions {
+  display: flex;
+  gap: 6px;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 20px;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn-primary { background: var(--color-accent); color: white; }
+.btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); }
+.btn-secondary { background: var(--color-bg-tertiary); color: var(--color-text-primary); }
+.btn-secondary:hover:not(:disabled) { background: var(--color-border); }
+.btn-danger { background: var(--color-danger); color: white; }
+.btn-sm { padding: 6px 12px; font-size: 12px; }
+
+/* Modal */
+.modal {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  padding: 28px;
+  max-width: 500px;
+  width: 90%;
+  box-shadow: var(--shadow-lg);
+}
+
+.modal-content h3 {
+  margin-top: 0;
+  margin-bottom: 20px;
+  color: var(--color-text-primary);
+}
+
+.org-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.form-group label {
+  font-weight: 500;
+  font-size: 14px;
+  color: var(--color-text-primary);
+}
+
+.form-group input,
+.form-group textarea {
+  padding: 8px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  font-family: inherit;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.error {
+  padding: 12px;
+  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+  color: var(--color-danger);
+  border-radius: var(--radius-sm);
+}
+
+.toast {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  padding: 12px 20px;
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-weight: 500;
+  z-index: 1100;
+  box-shadow: var(--shadow-lg);
+}
+
+.toast-success { background: var(--color-success); color: #fff; }
+</style>
--- a/frontend/src/views/Properties.vue
+++ b/frontend/src/views/Properties.vue
@@ -0,0 +1,630 @@
+<template>
+  <div class="properties">
+    <Breadcrumb :items="breadcrumbItems" />
+    <div class="page-header">
+      <h2>Properties</h2>
+      <button class="btn btn-primary" @click="openCreateModal">
+        <Plus :size="16" />
+        New Property
+      </button>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="loading-state">
+      <div class="spinner"></div>
+      <p>Loading properties...</p>
+    </div>
+
+    <!-- Empty -->
+    <div v-else-if="properties.length === 0" class="empty-state">
+      <Landmark :size="48" class="empty-icon" />
+      <p>No properties yet</p>
+      <button class="btn btn-primary" @click="openCreateModal">Create your first property</button>
+    </div>
+
+    <!-- Property Grid -->
+    <div v-else class="property-grid">
+      <div
+        v-for="prop in properties"
+        :key="prop.id"
+        :class="['property-card', { 'property-card-inactive': !prop.is_active }]"
+        @click="goToProperty(prop.id)"
+      >
+        <div class="property-card-header">
+          <h3>{{ prop.name }}</h3>
+          <div class="badges">
+            <span :class="['badge', prop.is_public ? 'badge-public' : 'badge-private']">
+              {{ prop.is_public ? 'Public' : 'Private' }}
+            </span>
+            <span :class="['badge', prop.is_active ? 'badge-active' : 'badge-inactive']">
+              {{ prop.is_active ? 'Active' : 'Inactive' }}
+            </span>
+          </div>
+        </div>
+        <p v-if="prop.description" class="property-desc">{{ prop.description }}</p>
+        <p v-if="prop.address" class="property-address">{{ prop.address }}</p>
+        <div v-if="prop.managers && prop.managers.length > 0" class="property-managers">
+          <span class="managers-label">Managed by:</span>
+          <div class="manager-chips">
+            <span v-for="mgr in prop.managers" :key="mgr.user_id" class="manager-chip" :title="mgr.email">
+              <span class="manager-avatar">{{ mgr.full_name.charAt(0).toUpperCase() }}</span>
+              {{ mgr.full_name }}
+            </span>
+          </div>
+        </div>
+        <div class="property-footer">
+          <span class="space-count">{{ prop.space_count || 0 }} spaces</span>
+          <div class="property-actions" @click.stop>
+            <button
+              class="btn-icon"
+              :title="prop.is_active ? 'Deactivate' : 'Activate'"
+              @click="togglePropertyStatus(prop)"
+            >
+              <PowerOff :size="15" />
+            </button>
+            <button
+              class="btn-icon btn-icon-danger"
+              title="Delete property"
+              @click="confirmDelete(prop)"
+            >
+              <Trash2 :size="15" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Create Property Modal -->
+    <div v-if="showModal" class="modal" @click.self="closeModal">
+      <div class="modal-content">
+        <h3>Create New Property</h3>
+        <form @submit.prevent="handleCreate" class="property-form">
+          <div class="form-group">
+            <label for="name">Name *</label>
+            <input id="name" v-model="formData.name" type="text" required placeholder="Property name" />
+          </div>
+          <div class="form-group">
+            <label for="description">Description</label>
+            <textarea id="description" v-model="formData.description" rows="3" placeholder="Optional description"></textarea>
+          </div>
+          <div class="form-group">
+            <label for="address">Address</label>
+            <input id="address" v-model="formData.address" type="text" placeholder="Optional address" />
+          </div>
+          <div class="form-group form-checkbox">
+            <label>
+              <input type="checkbox" v-model="formData.is_public" />
+              Public (allows anonymous bookings)
+            </label>
+          </div>
+
+          <div v-if="error" class="error">{{ error }}</div>
+
+          <div class="form-actions">
+            <button type="submit" class="btn btn-primary" :disabled="submitting">
+              {{ submitting ? 'Creating...' : 'Create' }}
+            </button>
+            <button type="button" class="btn btn-secondary" @click="closeModal">Cancel</button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Confirm Modal -->
+    <div v-if="showConfirm" class="modal" @click.self="showConfirm = false">
+      <div class="modal-content modal-confirm">
+        <h3>{{ confirmTitle }}</h3>
+        <p>{{ confirmMessage }}</p>
+        <div v-if="error" class="error" style="margin-bottom: 12px;">{{ error }}</div>
+        <div class="form-actions">
+          <button class="btn btn-danger" :disabled="submitting" @click="executeConfirm">
+            {{ submitting ? 'Processing...' : confirmAction }}
+          </button>
+          <button class="btn btn-secondary" @click="showConfirm = false">Cancel</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Toast -->
+    <div v-if="successMsg" class="toast toast-success">{{ successMsg }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { propertiesApi, handleApiError } from '@/services/api'
+import { useAuthStore } from '@/stores/auth'
+import Breadcrumb from '@/components/Breadcrumb.vue'
+import { Landmark, Plus, PowerOff, Trash2 } from 'lucide-vue-next'
+import type { Property } from '@/types'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+const breadcrumbItems = [
+  { label: 'Dashboard', to: '/dashboard' },
+  { label: 'Properties' }
+]
+
+const properties = ref<Property[]>([])
+const loading = ref(true)
+const showModal = ref(false)
+const submitting = ref(false)
+const error = ref('')
+const successMsg = ref('')
+
+// Confirm modal state
+const showConfirm = ref(false)
+const confirmTitle = ref('')
+const confirmMessage = ref('')
+const confirmAction = ref('')
+const confirmCallback = ref<(() => Promise<void>) | null>(null)
+
+const formData = ref({
+  name: '',
+  description: '',
+  address: '',
+  is_public: false
+})
+
+const loadProperties = async () => {
+  loading.value = true
+  try {
+    if (authStore.isSuperadmin) {
+      properties.value = await propertiesApi.listAll()
+    } else {
+      properties.value = await propertiesApi.list({ managed_only: true })
+    }
+  } catch (err) {
+    error.value = handleApiError(err)
+  } finally {
+    loading.value = false
+  }
+}
+
+const openCreateModal = () => {
+  formData.value = { name: '', description: '', address: '', is_public: false }
+  error.value = ''
+  showModal.value = true
+}
+
+const closeModal = () => {
+  showModal.value = false
+}
+
+const handleCreate = async () => {
+  submitting.value = true
+  error.value = ''
+  try {
+    await propertiesApi.create(formData.value)
+    closeModal()
+    showToast('Property created!')
+    await loadProperties()
+  } catch (err) {
+    error.value = handleApiError(err)
+  } finally {
+    submitting.value = false
+  }
+}
+
+const togglePropertyStatus = (prop: Property) => {
+  const newStatus = !prop.is_active
+  confirmTitle.value = newStatus ? 'Activate Property' : 'Deactivate Property'
+  confirmMessage.value = newStatus
+    ? `Activate "${prop.name}"? Users will be able to see and book spaces in this property.`
+    : `Deactivate "${prop.name}"? This will hide the property from users. Existing bookings will not be affected.`
+  confirmAction.value = newStatus ? 'Activate' : 'Deactivate'
+  error.value = ''
+  confirmCallback.value = async () => {
+    await propertiesApi.updateStatus(prop.id, newStatus)
+    showToast(`Property ${newStatus ? 'activated' : 'deactivated'}!`)
+    await loadProperties()
+  }
+  showConfirm.value = true
+}
+
+const confirmDelete = (prop: Property) => {
+  confirmTitle.value = 'Delete Property'
+  confirmMessage.value = `Are you sure you want to delete "${prop.name}"? This action cannot be undone. Spaces will be unlinked (not deleted). Active bookings must be cancelled first.`
+  confirmAction.value = 'Delete'
+  error.value = ''
+  confirmCallback.value = async () => {
+    await propertiesApi.delete(prop.id)
+    showToast('Property deleted!')
+    await loadProperties()
+  }
+  showConfirm.value = true
+}
+
+const executeConfirm = async () => {
+  if (!confirmCallback.value) return
+  submitting.value = true
+  error.value = ''
+  try {
+    await confirmCallback.value()
+    showConfirm.value = false
+  } catch (err) {
+    error.value = handleApiError(err)
+  } finally {
+    submitting.value = false
+  }
+}
+
+const showToast = (msg: string) => {
+  successMsg.value = msg
+  setTimeout(() => { successMsg.value = '' }, 3000)
+}
+
+const goToProperty = (id: number) => {
+  router.push(`/properties/${id}`)
+}
+
+onMounted(() => {
+  loadProperties()
+})
+</script>
+
+<style scoped>
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.page-header h2 {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 60px 20px;
+  color: var(--color-text-secondary);
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--color-border);
+  border-top-color: var(--color-accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin-bottom: 12px;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 60px 20px;
+  color: var(--color-text-muted);
+  gap: 16px;
+}
+
+.empty-icon { color: var(--color-border); }
+
+.property-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 16px;
+}
+
+.property-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.property-card:hover {
+  box-shadow: var(--shadow-md);
+  border-color: var(--color-accent);
+}
+
+.property-card-inactive {
+  opacity: 0.6;
+  border-style: dashed;
+}
+
+.property-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.property-card-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.badges {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.badge {
+  display: inline-block;
+  padding: 3px 10px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.badge-public {
+  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
+  color: var(--color-accent);
+}
+
+.badge-private {
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-secondary);
+}
+
+.badge-active {
+  background: color-mix(in srgb, var(--color-success) 15%, transparent);
+  color: var(--color-success);
+}
+
+.badge-inactive {
+  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
+  color: var(--color-danger);
+}
+
+.property-desc {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  margin: 0 0 4px;
+}
+
+.property-address {
+  font-size: 13px;
+  color: var(--color-text-muted);
+  margin: 0 0 8px;
+}
+
+.property-managers {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--color-border);
+}
+
+.managers-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  color: var(--color-text-muted);
+  display: block;
+  margin-bottom: 6px;
+}
+
+.manager-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.manager-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px 3px 3px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 500;
+  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+  color: var(--color-text-primary);
+}
+
+.manager-avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--color-accent);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.property-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.space-count {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-accent);
+}
+
+.property-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.btn-icon:hover {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
+}
+
+.btn-icon-danger:hover {
+  border-color: var(--color-danger);
+  color: var(--color-danger);
+  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
+}
+
+/* Modal */
+.modal {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  padding: 28px;
+  max-width: 500px;
+  width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: var(--shadow-lg);
+}
+
+.modal-content h3 {
+  margin-top: 0;
+  margin-bottom: 20px;
+  color: var(--color-text-primary);
+}
+
+.modal-confirm p {
+  color: var(--color-text-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+  margin: 0 0 20px;
+}
+
+.property-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.form-group label {
+  font-weight: 500;
+  font-size: 14px;
+  color: var(--color-text-primary);
+}
+
+.form-group input[type="text"],
+.form-group input[type="email"],
+.form-group textarea {
+  padding: 8px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  font-family: inherit;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
+}
+
+.form-checkbox label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 20px;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.btn-primary { background: var(--color-accent); color: white; }
+.btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); }
+
+.btn-secondary { background: var(--color-bg-tertiary); color: var(--color-text-primary); }
+.btn-secondary:hover:not(:disabled) { background: var(--color-border); }
+
+.btn-danger { background: var(--color-danger); color: white; }
+.btn-danger:hover:not(:disabled) { opacity: 0.9; }
+
+.error {
+  padding: 12px;
+  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+  color: var(--color-danger);
+  border-radius: var(--radius-sm);
+}
+
+.toast {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  padding: 12px 20px;
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-weight: 500;
+  z-index: 1100;
+  box-shadow: var(--shadow-lg);
+}
+
+.toast-success {
+  background: var(--color-success);
+  color: #fff;
+}
+
+@media (max-width: 768px) {
+  .property-grid { grid-template-columns: 1fr; }
+}
+</style>
--- a/frontend/src/views/PropertyDetail.vue
+++ b/frontend/src/views/PropertyDetail.vue
--- a/frontend/src/views/PublicBooking.vue
+++ b/frontend/src/views/PublicBooking.vue
@@ -0,0 +1,493 @@
+<template>
+  <div class="public-booking-container">
+    <div class="public-booking-card card">
+      <h2>Book a Space</h2>
+      <p class="subtitle">Reserve a meeting room or workspace without an account</p>
+
+      <!-- Step 1: Select Property -->
+      <div v-if="step === 'property'">
+        <div v-if="loadingProperties" class="loading-inline">Loading properties...</div>
+        <div v-else-if="properties.length === 0" class="empty-msg">No public properties available.</div>
+        <div v-else class="property-list">
+          <div
+            v-for="prop in properties"
+            :key="prop.id"
+            class="selectable-card"
+            @click="selectProperty(prop)"
+          >
+            <h4>{{ prop.name }}</h4>
+            <p v-if="prop.description" class="card-desc">{{ prop.description }}</p>
+            <p v-if="prop.address" class="card-meta">{{ prop.address }}</p>
+            <span class="card-count">{{ prop.space_count || 0 }} spaces</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Step 2: Select Space -->
+      <div v-else-if="step === 'space'">
+        <button class="btn-back" @click="step = 'property'">Back to properties</button>
+        <h3 class="step-title">{{ selectedProperty?.name }} - Choose a Space</h3>
+        <div v-if="loadingSpaces" class="loading-inline">Loading spaces...</div>
+        <div v-else-if="spaces.length === 0" class="empty-msg">No spaces available.</div>
+        <div v-else class="space-list">
+          <div
+            v-for="sp in spaces"
+            :key="sp.id"
+            class="selectable-card"
+            @click="selectSpace(sp)"
+          >
+            <h4>{{ sp.name }}</h4>
+            <div class="card-meta-row">
+              <span>{{ formatType(sp.type) }}</span>
+              <span>Capacity: {{ sp.capacity }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Step 3: Booking Form -->
+      <div v-else-if="step === 'form'">
+        <button class="btn-back" @click="step = 'space'">Back to spaces</button>
+        <h3 class="step-title">Book {{ selectedSpace?.name }}</h3>
+
+        <form @submit.prevent="handleSubmit" class="booking-form">
+          <div class="form-group">
+            <label for="guest_name">Your Name *</label>
+            <input id="guest_name" v-model="form.guest_name" type="text" required placeholder="John Doe" />
+          </div>
+
+          <div class="form-group">
+            <label for="guest_email">Your Email *</label>
+            <input id="guest_email" v-model="form.guest_email" type="email" required placeholder="john@example.com" />
+          </div>
+
+          <div class="form-group">
+            <label for="guest_organization">Organization (optional)</label>
+            <input id="guest_organization" v-model="form.guest_organization" type="text" placeholder="Company name" />
+          </div>
+
+          <div class="form-group">
+            <label for="title">Booking Title *</label>
+            <input id="title" v-model="form.title" type="text" required placeholder="Team meeting" />
+          </div>
+
+          <div class="form-group">
+            <label for="description">Description (optional)</label>
+            <textarea id="description" v-model="form.description" rows="2" placeholder="Additional details..."></textarea>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label for="date">Date *</label>
+              <input id="date" v-model="form.date" type="date" required :min="minDate" />
+            </div>
+            <div class="form-group">
+              <label for="start_time">Start Time *</label>
+              <input id="start_time" v-model="form.start_time" type="time" required />
+            </div>
+            <div class="form-group">
+              <label for="end_time">End Time *</label>
+              <input id="end_time" v-model="form.end_time" type="time" required />
+            </div>
+          </div>
+
+          <div v-if="error" class="error">{{ error }}</div>
+
+          <button type="submit" class="btn btn-primary btn-block" :disabled="submitting">
+            {{ submitting ? 'Submitting...' : 'Submit Booking Request' }}
+          </button>
+        </form>
+      </div>
+
+      <!-- Step 4: Success -->
+      <div v-else-if="step === 'success'" class="success-state">
+        <div class="success-icon">&#10003;</div>
+        <h3>Booking Request Sent!</h3>
+        <p>Your booking request has been submitted. You will receive updates at <strong>{{ form.guest_email }}</strong>.</p>
+        <button class="btn btn-primary" @click="resetForm">Book Another</button>
+      </div>
+
+      <p class="login-hint">
+        Already have an account? <router-link to="/login">Sign in</router-link>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { publicApi, handleApiError } from '@/services/api'
+import type { Property, Space } from '@/types'
+
+const route = useRoute()
+
+const step = ref<'property' | 'space' | 'form' | 'success'>('property')
+const loadingProperties = ref(false)
+const loadingSpaces = ref(false)
+const submitting = ref(false)
+const error = ref('')
+const properties = ref<Property[]>([])
+const spaces = ref<Space[]>([])
+const selectedProperty = ref<Property | null>(null)
+const selectedSpace = ref<Space | null>(null)
+
+const form = ref({
+  guest_name: '',
+  guest_email: '',
+  guest_organization: '',
+  title: '',
+  description: '',
+  date: '',
+  start_time: '',
+  end_time: ''
+})
+
+const minDate = computed(() => new Date().toISOString().split('T')[0])
+
+const formatType = (type: string): string => {
+  const map: Record<string, string> = {
+    desk: 'Desk', meeting_room: 'Meeting Room', conference_room: 'Conference Room',
+    sala: 'Sala', birou: 'Birou'
+  }
+  return map[type] || type
+}
+
+const loadProperties = async () => {
+  loadingProperties.value = true
+  try {
+    properties.value = await publicApi.getProperties()
+    // If propertyId in route, auto-select
+    const pid = route.params.propertyId
+    if (pid) {
+      const prop = properties.value.find(p => p.id === Number(pid))
+      if (prop) {
+        selectProperty(prop)
+      }
+    }
+  } catch (err) {
+    error.value = handleApiError(err)
+  } finally {
+    loadingProperties.value = false
+  }
+}
+
+const selectProperty = async (prop: Property) => {
+  selectedProperty.value = prop
+  step.value = 'space'
+  loadingSpaces.value = true
+  try {
+    spaces.value = await publicApi.getPropertySpaces(prop.id)
+  } catch (err) {
+    error.value = handleApiError(err)
+  } finally {
+    loadingSpaces.value = false
+  }
+}
+
+const selectSpace = (sp: Space) => {
+  selectedSpace.value = sp
+  step.value = 'form'
+  error.value = ''
+}
+
+const handleSubmit = async () => {
+  error.value = ''
+  if (!selectedSpace.value) return
+
+  if (form.value.start_time >= form.value.end_time) {
+    error.value = 'End time must be after start time'
+    return
+  }
+
+  submitting.value = true
+  try {
+    await publicApi.createBooking({
+      space_id: selectedSpace.value.id,
+      start_datetime: `${form.value.date}T${form.value.start_time}:00`,
+      end_datetime: `${form.value.date}T${form.value.end_time}:00`,
+      title: form.value.title,
+      description: form.value.description || undefined,
+      guest_name: form.value.guest_name,
+      guest_email: form.value.guest_email,
+      guest_organization: form.value.guest_organization || undefined
+    })
+    step.value = 'success'
+  } catch (err) {
+    error.value = handleApiError(err)
+  } finally {
+    submitting.value = false
+  }
+}
+
+const resetForm = () => {
+  step.value = 'property'
+  selectedProperty.value = null
+  selectedSpace.value = null
+  form.value = {
+    guest_name: '',
+    guest_email: '',
+    guest_organization: '',
+    title: '',
+    description: '',
+    date: '',
+    start_time: '',
+    end_time: ''
+  }
+  error.value = ''
+}
+
+onMounted(() => {
+  loadProperties()
+})
+</script>
+
+<style scoped>
+.public-booking-container {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  min-height: 100vh;
+  padding: 2rem 1rem;
+  background: var(--color-bg-primary);
+}
+
+.public-booking-card {
+  width: 100%;
+  max-width: 560px;
+}
+
+h2 {
+  text-align: center;
+  margin-bottom: 0.25rem;
+  color: var(--color-text-primary);
+}
+
+.subtitle {
+  text-align: center;
+  color: var(--color-text-secondary);
+  margin-bottom: 1.5rem;
+}
+
+.step-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: 16px;
+}
+
+.btn-back {
+  background: none;
+  border: none;
+  color: var(--color-accent);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0;
+  margin-bottom: 12px;
+  font-weight: 500;
+}
+
+.btn-back:hover {
+  text-decoration: underline;
+}
+
+.loading-inline {
+  text-align: center;
+  padding: 24px;
+  color: var(--color-text-secondary);
+}
+
+.empty-msg {
+  text-align: center;
+  padding: 24px;
+  color: var(--color-text-muted);
+}
+
+.property-list, .space-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.selectable-card {
+  padding: 16px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  background: var(--color-bg-secondary);
+}
+
+.selectable-card:hover {
+  border-color: var(--color-accent);
+  box-shadow: var(--shadow-sm);
+}
+
+.selectable-card h4 {
+  margin: 0 0 4px;
+  font-size: 16px;
+  color: var(--color-text-primary);
+}
+
+.card-desc {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  margin: 0 0 4px;
+}
+
+.card-meta {
+  font-size: 13px;
+  color: var(--color-text-muted);
+  margin: 0 0 4px;
+}
+
+.card-meta-row {
+  display: flex;
+  gap: 16px;
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+
+.card-count {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--color-accent);
+}
+
+.booking-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 12px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.form-group label {
+  font-weight: 500;
+  font-size: 14px;
+  color: var(--color-text-primary);
+}
+
+.form-group input,
+.form-group textarea,
+.form-group select {
+  padding: 8px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  font-family: inherit;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px 20px;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--color-accent);
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--color-accent-hover);
+}
+
+.btn-block {
+  width: 100%;
+  margin-top: 0.5rem;
+}
+
+.error {
+  padding: 10px 14px;
+  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+  border-left: 3px solid var(--color-danger);
+  border-radius: var(--radius-sm);
+  color: var(--color-danger);
+  font-size: 14px;
+}
+
+.success-state {
+  text-align: center;
+  padding: 24px 0;
+}
+
+.success-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--color-success) 15%, transparent);
+  color: var(--color-success);
+  font-size: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+}
+
+.success-state h3 {
+  color: var(--color-success);
+  margin-bottom: 8px;
+}
+
+.success-state p {
+  color: var(--color-text-secondary);
+  margin-bottom: 20px;
+}
+
+.login-hint {
+  text-align: center;
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--color-border);
+  color: var(--color-text-secondary);
+  font-size: 14px;
+}
+
+.login-hint a {
+  color: var(--color-accent);
+  text-decoration: none;
+}
+
+.login-hint a:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 640px) {
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
--- a/frontend/src/views/SpaceDetail.vue
+++ b/frontend/src/views/SpaceDetail.vue
@@ -66,7 +66,82 @@
      <div class="card calendar-card">
        <h3>Availability Calendar</h3>
        <p class="calendar-subtitle">View existing bookings and available time slots</p>
-        <SpaceCalendar ref="calendarRef" :space-id="space.id" />
+        <SpaceCalendar
+          ref="calendarRef"
+          :space-id="space.id"
+          :space-name="space.name"
+          @edit-booking="openEditBookingModal"
+          @cancel-booking="handleCancelBooking"
+          @approve-booking="handleApproveBooking"
+          @reject-booking="openRejectBookingModal"
+        />
+      </div>
+
+      <!-- Bookings List Section -->
+      <div class="card bookings-card">
+        <div class="bookings-card-header">
+          <h3>Bookings</h3>
+          <span class="result-count" v-if="!bookingsLoading">{{ spaceBookings.length }} bookings</span>
+        </div>
+
+        <div v-if="bookingsLoading" class="bookings-loading">Loading bookings...</div>
+        <div v-else-if="spaceBookings.length === 0" class="bookings-empty">No bookings found for this space.</div>
+
+        <table v-else class="bookings-table">
+          <thead>
+            <tr>
+              <th>User</th>
+              <th>Date</th>
+              <th>Time</th>
+              <th>Title</th>
+              <th>Status</th>
+              <th v-if="isAdmin">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="b in spaceBookings" :key="b.id">
+              <td class="cell-user">{{ b.user?.full_name || b.guest_name || 'Unknown' }}</td>
+              <td>{{ formatBookingDate(b.start_datetime) }}</td>
+              <td class="cell-time">{{ formatBookingTime(b.start_datetime) }} - {{ formatBookingTime(b.end_datetime) }}</td>
+              <td class="cell-title">{{ b.title }}</td>
+              <td><span :class="['badge-status', `badge-${b.status}`]">{{ b.status }}</span></td>
+              <td v-if="isAdmin" class="cell-actions">
+                <button
+                  v-if="b.status === 'pending'"
+                  class="btn-action btn-action-approve"
+                  title="Approve"
+                  @click="handleApproveBooking(b)"
+                >
+                  <Check :size="14" />
+                </button>
+                <button
+                  v-if="b.status === 'pending'"
+                  class="btn-action btn-action-reject"
+                  title="Reject"
+                  @click="openRejectBookingModal(b)"
+                >
+                  <XIcon :size="14" />
+                </button>
+                <button
+                  v-if="b.status === 'pending' || b.status === 'approved'"
+                  class="btn-action btn-action-edit"
+                  title="Edit"
+                  @click="openEditBookingModal(b)"
+                >
+                  <Pencil :size="14" />
+                </button>
+                <button
+                  v-if="b.status === 'pending' || b.status === 'approved'"
+                  class="btn-action btn-action-cancel"
+                  title="Cancel"
+                  @click="handleCancelBooking(b)"
+                >
+                  <Ban :size="14" />
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
      </div>
    </div>

@@ -93,24 +168,114 @@
        />
      </div>
    </div>
+
+    <!-- Edit Booking Modal -->
+    <div v-if="showEditModal" class="modal" @click.self="closeEditModal">
+      <div class="modal-content">
+        <h3>Edit Booking</h3>
+        <form @submit.prevent="saveEdit">
+          <div class="form-group">
+            <label for="edit-title">Title *</label>
+            <input id="edit-title" v-model="editForm.title" type="text" required maxlength="200" placeholder="Booking title" />
+          </div>
+          <div class="form-group">
+            <label for="edit-description">Description (optional)</label>
+            <textarea id="edit-description" v-model="editForm.description" rows="3" placeholder="Additional details..."></textarea>
+          </div>
+          <div class="form-group">
+            <label>Start *</label>
+            <div class="datetime-row">
+              <div class="datetime-field">
+                <label for="edit-start-date" class="sublabel">Date</label>
+                <input id="edit-start-date" v-model="editForm.start_date" type="date" required />
+              </div>
+              <div class="datetime-field">
+                <label for="edit-start-time" class="sublabel">Time</label>
+                <input id="edit-start-time" v-model="editForm.start_time" type="time" required />
+              </div>
+            </div>
+          </div>
+          <div class="form-group">
+            <label>End *</label>
+            <div class="datetime-row">
+              <div class="datetime-field">
+                <label for="edit-end-date" class="sublabel">Date</label>
+                <input id="edit-end-date" v-model="editForm.end_date" type="date" required />
+              </div>
+              <div class="datetime-field">
+                <label for="edit-end-time" class="sublabel">Time</label>
+                <input id="edit-end-time" v-model="editForm.end_time" type="time" required />
+              </div>
+            </div>
+          </div>
+          <div v-if="editError" class="error-msg">{{ editError }}</div>
+          <div class="form-actions">
+            <button type="button" class="btn btn-secondary" @click="closeEditModal">Cancel</button>
+            <button type="submit" class="btn btn-primary" :disabled="editSaving">{{ editSaving ? 'Saving...' : 'Save Changes' }}</button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Confirm Modal -->
+    <div v-if="showConfirmModal" class="modal" @click.self="showConfirmModal = false">
+      <div class="modal-content">
+        <h3>{{ confirmTitle }}</h3>
+        <p class="confirm-text">{{ confirmMessage }}</p>
+        <div class="form-actions">
+          <button type="button" class="btn btn-secondary" @click="showConfirmModal = false" :disabled="confirmLoading">Cancel</button>
+          <button type="button" :class="['btn', confirmDanger ? 'btn-danger' : 'btn-primary']" @click="executeConfirm" :disabled="confirmLoading">
+            {{ confirmLoading ? 'Processing...' : confirmLabel }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Reject Modal -->
+    <div v-if="showRejectModal" class="modal" @click.self="showRejectModal = false">
+      <div class="modal-content">
+        <h3>Reject Booking</h3>
+        <p class="confirm-text">Rejecting "{{ rejectBooking?.title }}"</p>
+        <div class="form-group">
+          <label for="reject-reason">Reason (optional)</label>
+          <textarea id="reject-reason" v-model="rejectReason" rows="3" placeholder="Enter rejection reason..."></textarea>
+        </div>
+        <div class="form-actions">
+          <button type="button" class="btn btn-secondary" @click="showRejectModal = false">Cancel</button>
+          <button type="button" class="btn btn-danger" @click="doReject" :disabled="rejectLoading">
+            {{ rejectLoading ? 'Rejecting...' : 'Reject' }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Toast -->
+    <div v-if="toastMsg" :class="['toast', `toast-${toastType}`]">{{ toastMsg }}</div>
  </div>
 </template>

 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { spacesApi, handleApiError } from '@/services/api'
+import { spacesApi, bookingsApi, adminBookingsApi, handleApiError } from '@/services/api'
+import {
+  formatDate as formatDateTZ,
+  formatTime as formatTimeTZ,
+  isoToLocalDateTime,
+  localDateTimeToISO
+} from '@/utils/datetime'
 import Breadcrumb from '@/components/Breadcrumb.vue'
 import SpaceCalendar from '@/components/SpaceCalendar.vue'
 import BookingForm from '@/components/BookingForm.vue'
 import AdminBookingForm from '@/components/AdminBookingForm.vue'
 import { useAuthStore } from '@/stores/auth'
-import { Users, Plus, UserPlus } from 'lucide-vue-next'
-import type { Space } from '@/types'
+import { Users, Plus, UserPlus, Check, X as XIcon, Pencil, Ban } from 'lucide-vue-next'
+import type { Space, Booking } from '@/types'

 const route = useRoute()
 const authStore = useAuthStore()
-const isAdmin = computed(() => authStore.user?.role === 'admin')
+const isAdmin = computed(() => ['admin', 'superadmin', 'manager'].includes(authStore.user?.role || ''))
+const userTimezone = computed(() => authStore.user?.timezone || 'UTC')

 const breadcrumbItems = computed(() => [
  { label: 'Dashboard', to: '/dashboard' },
@@ -125,6 +290,45 @@ const showBookingForm = ref(false)
 const showAdminBookingForm = ref(false)
 const calendarRef = ref<InstanceType<typeof SpaceCalendar> | null>(null)

+// Bookings list
+const spaceBookings = ref<Booking[]>([])
+const bookingsLoading = ref(false)
+
+// Toast
+const toastMsg = ref('')
+const toastType = ref<'success' | 'error'>('success')
+const showToast = (msg: string, type: 'success' | 'error') => {
+  toastMsg.value = msg
+  toastType.value = type
+  setTimeout(() => { toastMsg.value = '' }, type === 'success' ? 3000 : 5000)
+}
+
+// Edit modal
+const showEditModal = ref(false)
+const editingBooking = ref<Booking | null>(null)
+const editForm = ref({ title: '', description: '', start_date: '', start_time: '', end_date: '', end_time: '' })
+const editError = ref('')
+const editSaving = ref(false)
+
+// Confirm modal
+const showConfirmModal = ref(false)
+const confirmTitle = ref('')
+const confirmMessage = ref('')
+const confirmDanger = ref(false)
+const confirmLabel = ref('Yes')
+const confirmLoading = ref(false)
+const onConfirm = ref<(() => Promise<void>) | null>(null)
+
+// Reject modal
+const showRejectModal = ref(false)
+const rejectBooking = ref<Booking | null>(null)
+const rejectReason = ref('')
+const rejectLoading = ref(false)
+
+// Format helpers
+const formatBookingDate = (datetime: string): string => formatDateTZ(datetime, userTimezone.value)
+const formatBookingTime = (datetime: string): string => formatTimeTZ(datetime, userTimezone.value)
+
 // Format space type for display
 const formatType = (type: string): string => {
  const typeMap: Record<string, string> = {
@@ -155,6 +359,7 @@ const loadSpace = async () => {
      error.value = 'Space not found (404). The space may not exist or has been removed.'
    } else {
      space.value = foundSpace
+      loadSpaceBookings()
    }
  } catch (err) {
    error.value = handleApiError(err)
@@ -163,6 +368,29 @@ const loadSpace = async () => {
  }
 }

+// Load bookings for this space
+const loadSpaceBookings = async () => {
+  if (!space.value) return
+  bookingsLoading.value = true
+  try {
+    const now = new Date()
+    const start = new Date(now.getFullYear(), now.getMonth() - 1, 1)
+    const end = new Date(now.getFullYear(), now.getMonth() + 3, 0)
+    spaceBookings.value = await bookingsApi.getForSpace(space.value.id, start.toISOString(), end.toISOString())
+    // Sort by date descending
+    spaceBookings.value.sort((a, b) => new Date(b.start_datetime).getTime() - new Date(a.start_datetime).getTime())
+  } catch (err) {
+    // Non-critical
+  } finally {
+    bookingsLoading.value = false
+  }
+}
+
+const refreshAll = () => {
+  calendarRef.value?.refresh()
+  loadSpaceBookings()
+}
+
 // Handle reserve button click
 const handleReserve = () => {
  showBookingForm.value = !showBookingForm.value
@@ -176,13 +404,141 @@ const closeBookingModal = () => {
 // Handle booking form submit
 const handleBookingSubmit = () => {
  showBookingForm.value = false
-  calendarRef.value?.refresh()
+  refreshAll()
 }

 // Handle admin booking form submit
 const handleAdminBookingSubmit = () => {
  showAdminBookingForm.value = false
-  calendarRef.value?.refresh()
+  refreshAll()
+}
+
+// --- Calendar action handlers ---
+
+const openConfirm = (opts: { title: string; message: string; danger?: boolean; label?: string; action: () => Promise<void> }) => {
+  confirmTitle.value = opts.title
+  confirmMessage.value = opts.message
+  confirmDanger.value = opts.danger ?? false
+  confirmLabel.value = opts.label ?? 'Yes'
+  onConfirm.value = opts.action
+  confirmLoading.value = false
+  showConfirmModal.value = true
+}
+
+const executeConfirm = async () => {
+  if (!onConfirm.value) return
+  confirmLoading.value = true
+  try {
+    await onConfirm.value()
+  } finally {
+    confirmLoading.value = false
+    showConfirmModal.value = false
+  }
+}
+
+const handleApproveBooking = (booking: Booking) => {
+  openConfirm({
+    title: 'Approve Booking',
+    message: `Approve booking "${booking.title}"?`,
+    label: 'Approve',
+    action: async () => {
+      await adminBookingsApi.approve(booking.id)
+      showToast(`Booking "${booking.title}" approved!`, 'success')
+      refreshAll()
+    }
+  })
+}
+
+const handleCancelBooking = (booking: Booking) => {
+  openConfirm({
+    title: 'Cancel Booking',
+    message: `Cancel booking "${booking.title}"?`,
+    danger: true,
+    label: 'Cancel Booking',
+    action: async () => {
+      await adminBookingsApi.cancel(booking.id)
+      showToast(`Booking "${booking.title}" canceled.`, 'success')
+      refreshAll()
+    }
+  })
+}
+
+const openRejectBookingModal = (booking: Booking) => {
+  rejectBooking.value = booking
+  rejectReason.value = ''
+  rejectLoading.value = false
+  showRejectModal.value = true
+}
+
+const doReject = async () => {
+  if (!rejectBooking.value) return
+  rejectLoading.value = true
+  try {
+    await adminBookingsApi.reject(rejectBooking.value.id, rejectReason.value || undefined)
+    showToast(`Booking "${rejectBooking.value.title}" rejected.`, 'success')
+    showRejectModal.value = false
+    refreshAll()
+  } catch (err) {
+    showToast(handleApiError(err), 'error')
+  } finally {
+    rejectLoading.value = false
+  }
+}
+
+const openEditBookingModal = (booking: Booking) => {
+  editingBooking.value = booking
+  const startLocal = isoToLocalDateTime(booking.start_datetime, userTimezone.value)
+  const endLocal = isoToLocalDateTime(booking.end_datetime, userTimezone.value)
+  const [startDate, startTime] = startLocal.split('T')
+  const [endDate, endTime] = endLocal.split('T')
+  editForm.value = {
+    title: booking.title,
+    description: booking.description || '',
+    start_date: startDate,
+    start_time: startTime,
+    end_date: endDate,
+    end_time: endTime
+  }
+  editError.value = ''
+  showEditModal.value = true
+}
+
+const closeEditModal = () => {
+  showEditModal.value = false
+  editingBooking.value = null
+  editError.value = ''
+}
+
+const saveEdit = async () => {
+  if (!editingBooking.value) return
+  editSaving.value = true
+  editError.value = ''
+  try {
+    const startDateTime = `${editForm.value.start_date}T${editForm.value.start_time}`
+    const endDateTime = `${editForm.value.end_date}T${editForm.value.end_time}`
+    if (isAdmin.value) {
+      await adminBookingsApi.update(editingBooking.value.id, {
+        title: editForm.value.title,
+        description: editForm.value.description,
+        start_datetime: localDateTimeToISO(startDateTime),
+        end_datetime: localDateTimeToISO(endDateTime)
+      })
+    } else {
+      await bookingsApi.update(editingBooking.value.id, {
+        title: editForm.value.title,
+        description: editForm.value.description,
+        start_datetime: localDateTimeToISO(startDateTime),
+        end_datetime: localDateTimeToISO(endDateTime)
+      })
+    }
+    closeEditModal()
+    showToast('Booking updated successfully!', 'success')
+    refreshAll()
+  } catch (err) {
+    editError.value = handleApiError(err)
+  } finally {
+    editSaving.value = false
+  }
 }

 onMounted(() => {
@@ -380,6 +736,264 @@ onMounted(() => {
  margin-bottom: 20px;
 }

+/* Bookings List Card */
+.bookings-card-header {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.result-count {
+  font-size: 13px;
+  color: var(--color-text-muted);
+  font-weight: 400;
+}
+
+.bookings-loading,
+.bookings-empty {
+  text-align: center;
+  padding: 24px;
+  color: var(--color-text-muted);
+  font-size: 14px;
+}
+
+.bookings-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.bookings-table th {
+  text-align: left;
+  padding: 10px 12px;
+  background: var(--color-bg-secondary);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.bookings-table td {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border-light);
+  font-size: 13px;
+  color: var(--color-text-primary);
+  vertical-align: middle;
+}
+
+.bookings-table tbody tr:hover {
+  background: var(--color-surface-hover);
+}
+
+.bookings-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.cell-user {
+  font-weight: 500;
+}
+
+.cell-time {
+  white-space: nowrap;
+}
+
+.cell-title {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cell-actions {
+  white-space: nowrap;
+}
+
+.badge-status {
+  display: inline-block;
+  padding: 3px 10px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.badge-pending {
+  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
+  color: var(--color-warning);
+}
+
+.badge-approved {
+  background: color-mix(in srgb, var(--color-success) 15%, transparent);
+  color: var(--color-success);
+}
+
+.badge-rejected {
+  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
+  color: var(--color-danger);
+}
+
+.badge-canceled {
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-muted);
+}
+
+.btn-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  padding: 0;
+  margin-right: 4px;
+}
+
+.btn-action:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.btn-action-approve:hover { color: var(--color-success); border-color: var(--color-success); }
+.btn-action-reject:hover { color: var(--color-danger); border-color: var(--color-danger); }
+.btn-action-edit:hover { color: var(--color-warning); border-color: var(--color-warning); }
+.btn-action-cancel:hover { color: var(--color-danger); border-color: var(--color-danger); }
+
+/* Form styles for modals */
+.form-group {
+  margin-bottom: 16px;
+}
+
+.form-group > label {
+  display: block;
+  margin-bottom: 6px;
+  font-weight: 500;
+  font-size: 14px;
+  color: var(--color-text-primary);
+}
+
+.sublabel {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: 400;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+.datetime-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.datetime-field {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  font-family: inherit;
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  box-sizing: border-box;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
+}
+
+.form-group textarea {
+  resize: vertical;
+}
+
+.error-msg {
+  padding: 12px;
+  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+  color: var(--color-danger);
+  border-radius: var(--radius-sm);
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+}
+
+.btn-secondary {
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-primary);
+  padding: 10px 20px;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--color-border);
+}
+
+.btn-danger {
+  background: var(--color-danger);
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--color-danger) 85%, black);
+}
+
+.confirm-text {
+  color: var(--color-text-secondary);
+  margin-bottom: 20px;
+  line-height: 1.5;
+}
+
+/* Toast */
+.toast {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  padding: 12px 20px;
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-weight: 500;
+  z-index: 1100;
+  animation: slideUp 0.3s ease;
+  box-shadow: var(--shadow-lg);
+}
+
+.toast-success { background: var(--color-success); color: #fff; }
+.toast-error { background: var(--color-danger); color: #fff; }
+
+@keyframes slideUp {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
 /* Modal */
 .modal {
  position: fixed;
--- a/frontend/src/views/Spaces.vue
+++ b/frontend/src/views/Spaces.vue
@@ -58,9 +58,12 @@
      >
        <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 class="header-badges">
+            <span v-if="space.property_name" class="badge badge-property">{{ space.property_name }}</span>
+            <span :class="['badge', space.is_active ? 'badge-active' : 'badge-inactive']">
+              {{ space.is_active ? 'Active' : 'Inactive' }}
+            </span>
+          </div>
        </div>

        <div class="space-card-body">
@@ -431,6 +434,18 @@ onMounted(() => {
  color: var(--color-danger);
 }

+.badge-property {
+  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
+  color: var(--color-accent);
+}
+
+.header-badges {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
 .space-card-body {
  flex: 1;
  margin-bottom: 20px;
--- a/frontend/src/views/Users.vue
+++ b/frontend/src/views/Users.vue
@@ -2,7 +2,7 @@
  <div class="users">
    <Breadcrumb :items="breadcrumbItems" />
    <div class="page-header">
-      <h2>Admin Dashboard - User Management</h2>
+      <h2>User Management</h2>
      <button class="btn btn-primary" @click="openCreateModal">
        <UserPlus :size="16" />
        Create New User
@@ -16,7 +16,8 @@
          <label for="filter-role">Filter by Role</label>
          <select id="filter-role" v-model="filterRole" @change="loadUsers">
            <option value="">All Roles</option>
-            <option value="admin">Admin</option>
+            <option value="admin">Superadmin</option>
+            <option value="manager">Manager</option>
            <option value="user">User</option>
          </select>
        </div>
@@ -57,8 +58,8 @@
              <td>{{ user.email }}</td>
              <td>{{ user.full_name }}</td>
              <td>
-                <span :class="['badge', user.role === 'admin' ? 'badge-admin' : 'badge-user']">
-                  {{ user.role }}
+                <span :class="['badge', user.role === 'admin' || user.role === 'superadmin' ? 'badge-admin' : user.role === 'manager' ? 'badge-manager' : 'badge-user']">
+                  {{ user.role === 'admin' ? 'superadmin' : user.role }}
                </span>
              </td>
              <td>{{ user.organization || '-' }}</td>
@@ -140,7 +141,8 @@
            <label for="role">Role *</label>
            <select id="role" v-model="formData.role" required>
              <option value="user">User</option>
-              <option value="admin">Admin</option>
+              <option value="manager">Manager</option>
+              <option value="admin">Superadmin</option>
            </select>
          </div>

@@ -268,7 +270,8 @@ const handleSubmit = async () => {
        full_name: formData.value.full_name,
        password: formData.value.password,
        role: formData.value.role,
-        organization: formData.value.organization || undefined
+        organization: formData.value.organization || undefined,
+        timezone: 'UTC'
      })
      success.value = 'User created successfully!'
    }
@@ -389,6 +392,8 @@ onMounted(() => {

 .page-header h2 {
  margin: 0;
+  font-size: 28px;
+  font-weight: 700;
  color: var(--color-text-primary);
 }

@@ -593,6 +598,11 @@ onMounted(() => {
  color: var(--color-accent);
 }

+.badge-manager {
+  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
+  color: var(--color-warning);
+}
+
 .badge-user {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
@@ -619,15 +629,18 @@ onMounted(() => {

 .modal-content {
  background: var(--color-surface);
-  border-radius: var(--radius-md);
-  padding: 24px;
+  border-radius: var(--radius-lg);
+  padding: 28px;
  max-width: 500px;
  width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
  box-shadow: var(--shadow-lg);
 }

 .modal-content h3 {
-  margin-bottom: 16px;
+  margin-top: 0;
+  margin-bottom: 20px;
  color: var(--color-text-primary);
 }