feat: complete UI/UX overhaul - dashboard unification, calendar UX, mobile optimization
- Dashboard redesign as command center with filters, quick actions, inline approve/reject - Reusable components: BookingRow, BookingFilters, ActionMenu, BookingPreviewModal, BookingEditModal - Calendar: drag & drop reschedule, eventClick preview modal, grid/list toggle - Mobile: segmented control bookings/calendar toggle, compact pills, responsive layout - Collapsible filters with active count badge - Smart menu positioning with Teleport - Calendar/list bidirectional data sync - Navigation: unified History page, removed AdminPending - Google Calendar OAuth integration - Dark mode contrast improvements, breadcrumb navigation - useLocalStorage composable for state persistence Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Agent
@@ -1,61 +1,82 @@
|
||||
<template>
|
||||
<div class="admin">
|
||||
<Breadcrumb :items="breadcrumbItems" />
|
||||
<div class="page-header">
|
||||
<h2>Admin Dashboard - Space Management</h2>
|
||||
<h2>Space Management</h2>
|
||||
<button class="btn btn-primary" @click="openCreateModal">
|
||||
<Plus :size="16" />
|
||||
Create New Space
|
||||
New Space
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Spaces List -->
|
||||
<CollapsibleSection title="All Spaces" :icon="Building2">
|
||||
<div v-if="loadingSpaces" class="loading">Loading spaces...</div>
|
||||
<div v-else-if="spaces.length === 0" class="empty">
|
||||
No spaces created yet. Create one above!
|
||||
<!-- Stats Pills -->
|
||||
<div class="stats-pills">
|
||||
<span class="stat-pill stat-pill-primary">
|
||||
<span class="stat-pill-number">{{ spaces.length }}</span>
|
||||
<span class="stat-pill-label">Total Spaces</span>
|
||||
</span>
|
||||
<span class="stat-pill stat-pill-success">
|
||||
<span class="stat-pill-number">{{ activeCount }}</span>
|
||||
<span class="stat-pill-label">Active</span>
|
||||
</span>
|
||||
<span class="stat-pill stat-pill-danger">
|
||||
<span class="stat-pill-number">{{ inactiveCount }}</span>
|
||||
<span class="stat-pill-label">Inactive</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loadingSpaces" class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<p>Loading spaces...</p>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else-if="spaces.length === 0" class="empty-state">
|
||||
<Building2 :size="48" class="empty-icon" />
|
||||
<p>No spaces created yet</p>
|
||||
<button class="btn btn-primary" @click="openCreateModal">Create your first space</button>
|
||||
</div>
|
||||
|
||||
<!-- Space Cards Grid -->
|
||||
<div v-else class="space-cards">
|
||||
<div v-for="space in spaces" :key="space.id" class="space-card">
|
||||
<div class="space-card-header">
|
||||
<div class="space-card-title">
|
||||
<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-actions">
|
||||
<button
|
||||
class="icon-btn"
|
||||
title="Edit space"
|
||||
@click="startEdit(space)"
|
||||
:disabled="loading"
|
||||
>
|
||||
<Pencil :size="16" />
|
||||
</button>
|
||||
<button
|
||||
:class="['icon-btn', space.is_active ? 'icon-btn-warning' : 'icon-btn-success']"
|
||||
:title="space.is_active ? 'Deactivate' : 'Activate'"
|
||||
@click="toggleStatus(space)"
|
||||
:disabled="loading"
|
||||
>
|
||||
<Power :size="16" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-card-meta">
|
||||
<span class="meta-badge meta-type">{{ space.type === 'sala' ? 'Sala' : 'Birou' }}</span>
|
||||
<span class="meta-item">
|
||||
<UsersIcon :size="14" />
|
||||
{{ space.capacity }}
|
||||
</span>
|
||||
</div>
|
||||
<p v-if="space.description" class="space-card-desc">{{ space.description }}</p>
|
||||
</div>
|
||||
<div v-else class="table-responsive">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Capacity</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="space in spaces" :key="space.id">
|
||||
<td>{{ space.name }}</td>
|
||||
<td>{{ space.type === 'sala' ? 'Sala' : 'Birou' }}</td>
|
||||
<td>{{ space.capacity }}</td>
|
||||
<td>
|
||||
<span :class="['badge', space.is_active ? 'badge-active' : 'badge-inactive']">
|
||||
{{ space.is_active ? 'Active' : 'Inactive' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="actions">
|
||||
<button
|
||||
class="btn btn-sm btn-secondary"
|
||||
@click="startEdit(space)"
|
||||
:disabled="loading"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
:class="['btn', 'btn-sm', space.is_active ? 'btn-warning' : 'btn-success']"
|
||||
@click="toggleStatus(space)"
|
||||
:disabled="loading"
|
||||
>
|
||||
{{ space.is_active ? 'Deactivate' : 'Activate' }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
</div>
|
||||
|
||||
<!-- Create/Edit Space Modal -->
|
||||
<div v-if="showModal" class="modal" @click.self="closeModal">
|
||||
@@ -179,14 +200,21 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { spacesApi, handleApiError } from '@/services/api'
|
||||
import CollapsibleSection from '@/components/CollapsibleSection.vue'
|
||||
import { Building2, Plus } from 'lucide-vue-next'
|
||||
import Breadcrumb from '@/components/Breadcrumb.vue'
|
||||
import { Building2, Plus, Pencil, Power, Users as UsersIcon } from 'lucide-vue-next'
|
||||
import type { Space } from '@/types'
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ label: 'Dashboard', to: '/dashboard' },
|
||||
{ label: 'Admin' }
|
||||
]
|
||||
|
||||
const spaces = ref<Space[]>([])
|
||||
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)
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
const success = ref('')
|
||||
@@ -320,9 +348,273 @@ onMounted(() => {
|
||||
|
||||
.page-header h2 {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* Stats Pills */
|
||||
.stats-pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stat-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border: 1px solid transparent;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.stat-pill-number {
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.stat-pill-primary {
|
||||
background: var(--color-accent-light);
|
||||
color: var(--color-accent);
|
||||
border-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
|
||||
}
|
||||
|
||||
.stat-pill-success {
|
||||
background: color-mix(in srgb, var(--color-success) 12%, transparent);
|
||||
color: var(--color-success);
|
||||
border-color: color-mix(in srgb, var(--color-success) 20%, transparent);
|
||||
}
|
||||
|
||||
.stat-pill-danger {
|
||||
background: color-mix(in srgb, var(--color-danger) 12%, transparent);
|
||||
color: var(--color-danger);
|
||||
border-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
|
||||
}
|
||||
|
||||
/* Loading & Empty States */
|
||||
.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);
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* Space Cards Grid */
|
||||
.space-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.space-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 20px;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.space-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.space-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.space-card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.space-card-title h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.space-card-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
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);
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
color: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
background: var(--color-accent-light);
|
||||
}
|
||||
|
||||
.icon-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.icon-btn-warning:hover {
|
||||
color: var(--color-warning);
|
||||
border-color: var(--color-warning);
|
||||
background: color-mix(in srgb, var(--color-warning) 10%, transparent);
|
||||
}
|
||||
|
||||
.icon-btn-success:hover {
|
||||
color: var(--color-success);
|
||||
border-color: var(--color-success);
|
||||
background: color-mix(in srgb, var(--color-success) 10%, transparent);
|
||||
}
|
||||
|
||||
.space-card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.meta-badge {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.meta-type {
|
||||
background: var(--color-accent-light);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.space-card-desc {
|
||||
margin: 10px 0 0;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/* Form Styles */
|
||||
.space-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -355,12 +647,6 @@ onMounted(() => {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -398,65 +684,6 @@ onMounted(() => {
|
||||
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-success {
|
||||
background: var(--color-success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--color-success) 85%, black);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background: var(--color-warning);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-warning:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--color-warning) 85%, black);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 12px;
|
||||
background: color-mix(in srgb, var(--color-danger) 10%, transparent);
|
||||
@@ -473,69 +700,7 @@ onMounted(() => {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
color: var(--color-text-secondary);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: var(--color-text-muted);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
text-align: left;
|
||||
padding: 12px;
|
||||
background: var(--color-bg-secondary);
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
border-bottom: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.data-table tr:hover {
|
||||
background: var(--color-surface-hover);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -551,8 +716,8 @@ onMounted(() => {
|
||||
|
||||
.modal-content {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 24px;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 28px;
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
max-height: 90vh;
|
||||
@@ -566,14 +731,30 @@ onMounted(() => {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.actions {
|
||||
flex-direction: column;
|
||||
.space-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats-pills {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.stat-pill {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,524 +0,0 @@
|
||||
<template>
|
||||
<div class="admin-pending">
|
||||
<h2>Admin Dashboard - Pending Booking Requests</h2>
|
||||
|
||||
<!-- Filters Card -->
|
||||
<CollapsibleSection title="Filters" :icon="Filter">
|
||||
<div class="filters">
|
||||
<div class="form-group">
|
||||
<label for="filter-space">Filter by Space</label>
|
||||
<select id="filter-space" v-model="filterSpaceId" @change="loadPendingBookings">
|
||||
<option value="">All Spaces</option>
|
||||
<option v-for="space in spaces" :key="space.id" :value="space.id">
|
||||
{{ space.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="card">
|
||||
<div class="loading">Loading pending requests...</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else-if="bookings.length === 0" class="card">
|
||||
<div class="empty">
|
||||
No pending requests found.
|
||||
{{ filterSpaceId ? 'Try different filters.' : 'All bookings have been processed.' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bookings Table -->
|
||||
<CollapsibleSection v-else :title="`Pending Requests (${bookings.length})`" :icon="ClipboardCheck">
|
||||
<div class="table-responsive">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>User</th>
|
||||
<th>Space</th>
|
||||
<th>Date</th>
|
||||
<th>Time</th>
|
||||
<th>Title</th>
|
||||
<th>Description</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="booking in bookings" :key="booking.id">
|
||||
<td>
|
||||
<div class="user-info">
|
||||
<div class="user-name">{{ booking.user?.full_name || 'Unknown' }}</div>
|
||||
<div class="user-email">{{ booking.user?.email || '-' }}</div>
|
||||
<div class="user-org" v-if="booking.user?.organization">
|
||||
{{ booking.user.organization }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="space-info">
|
||||
<div class="space-name">{{ booking.space?.name || 'Unknown Space' }}</div>
|
||||
<div class="space-type">{{ formatType(booking.space?.type || '') }}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ formatDate(booking.start_datetime) }}</td>
|
||||
<td>{{ formatTime(booking.start_datetime, booking.end_datetime) }}</td>
|
||||
<td>{{ booking.title }}</td>
|
||||
<td>
|
||||
<div class="description" :title="booking.description || '-'">
|
||||
{{ truncateText(booking.description || '-', 40) }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="actions">
|
||||
<button
|
||||
class="btn btn-sm btn-success"
|
||||
@click="handleApprove(booking)"
|
||||
:disabled="processing === booking.id"
|
||||
>
|
||||
{{ processing === booking.id ? 'Processing...' : 'Approve' }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-danger"
|
||||
@click="showRejectModal(booking)"
|
||||
:disabled="processing === booking.id"
|
||||
>
|
||||
Reject
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
|
||||
<!-- Reject Modal -->
|
||||
<div v-if="rejectingBooking" class="modal" @click.self="closeRejectModal">
|
||||
<div class="modal-content">
|
||||
<h3>Reject Booking Request</h3>
|
||||
<div class="booking-summary">
|
||||
<p><strong>User:</strong> {{ rejectingBooking.user?.full_name }}</p>
|
||||
<p><strong>Space:</strong> {{ rejectingBooking.space?.name }}</p>
|
||||
<p><strong>Title:</strong> {{ rejectingBooking.title }}</p>
|
||||
<p>
|
||||
<strong>Date:</strong> {{ formatDate(rejectingBooking.start_datetime) }} -
|
||||
{{ formatTime(rejectingBooking.start_datetime, rejectingBooking.end_datetime) }}
|
||||
</p>
|
||||
</div>
|
||||
<form @submit.prevent="handleReject">
|
||||
<div class="form-group">
|
||||
<label for="reject_reason">Rejection Reason (optional)</label>
|
||||
<textarea
|
||||
id="reject_reason"
|
||||
v-model="rejectReason"
|
||||
rows="4"
|
||||
placeholder="Provide a reason for rejection..."
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-danger" :disabled="processing !== null">
|
||||
{{ processing !== null ? 'Rejecting...' : 'Confirm Rejection' }}
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" @click="closeRejectModal">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div v-if="error" class="card">
|
||||
<div class="error">{{ error }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Success Message -->
|
||||
<div v-if="success" class="card">
|
||||
<div class="success-msg">{{ success }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { adminBookingsApi, spacesApi, handleApiError } from '@/services/api'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { formatDate as formatDateUtil, formatTime as formatTimeUtil } from '@/utils/datetime'
|
||||
import CollapsibleSection from '@/components/CollapsibleSection.vue'
|
||||
import { Filter, ClipboardCheck } from 'lucide-vue-next'
|
||||
import type { Booking, Space } from '@/types'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const userTimezone = computed(() => authStore.user?.timezone || 'UTC')
|
||||
const bookings = ref<Booking[]>([])
|
||||
const spaces = ref<Space[]>([])
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
const success = ref('')
|
||||
const processing = ref<number | null>(null)
|
||||
const filterSpaceId = ref<string>('')
|
||||
const rejectingBooking = ref<Booking | null>(null)
|
||||
const rejectReason = ref('')
|
||||
|
||||
const loadPendingBookings = async () => {
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
const filters: { space_id?: number } = {}
|
||||
if (filterSpaceId.value) {
|
||||
filters.space_id = Number(filterSpaceId.value)
|
||||
}
|
||||
bookings.value = await adminBookingsApi.getPending(filters)
|
||||
} catch (err) {
|
||||
error.value = handleApiError(err)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadSpaces = async () => {
|
||||
try {
|
||||
spaces.value = await spacesApi.list()
|
||||
} catch (err) {
|
||||
console.error('Failed to load spaces:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (datetime: string): string => {
|
||||
return formatDateUtil(datetime, userTimezone.value)
|
||||
}
|
||||
|
||||
const formatTime = (start: string, end: string): string => {
|
||||
const startTime = formatTimeUtil(start, userTimezone.value)
|
||||
const endTime = formatTimeUtil(end, userTimezone.value)
|
||||
return `${startTime} - ${endTime}`
|
||||
}
|
||||
|
||||
const formatType = (type: string): string => {
|
||||
const typeMap: Record<string, string> = {
|
||||
sala: 'Sala',
|
||||
birou: 'Birou'
|
||||
}
|
||||
return typeMap[type] || type
|
||||
}
|
||||
|
||||
const truncateText = (text: string, maxLength: number): string => {
|
||||
if (text.length <= maxLength) return text
|
||||
return text.substring(0, maxLength) + '...'
|
||||
}
|
||||
|
||||
const handleApprove = async (booking: Booking) => {
|
||||
if (!confirm('Are you sure you want to approve this booking?')) {
|
||||
return
|
||||
}
|
||||
|
||||
processing.value = booking.id
|
||||
error.value = ''
|
||||
success.value = ''
|
||||
|
||||
try {
|
||||
await adminBookingsApi.approve(booking.id)
|
||||
success.value = `Booking "${booking.title}" approved successfully!`
|
||||
|
||||
// Remove from list
|
||||
bookings.value = bookings.value.filter((b) => b.id !== booking.id)
|
||||
|
||||
// Clear success message after 3 seconds
|
||||
setTimeout(() => {
|
||||
success.value = ''
|
||||
}, 3000)
|
||||
} catch (err) {
|
||||
error.value = handleApiError(err)
|
||||
} finally {
|
||||
processing.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const showRejectModal = (booking: Booking) => {
|
||||
rejectingBooking.value = booking
|
||||
rejectReason.value = ''
|
||||
}
|
||||
|
||||
const closeRejectModal = () => {
|
||||
rejectingBooking.value = null
|
||||
rejectReason.value = ''
|
||||
}
|
||||
|
||||
const handleReject = async () => {
|
||||
if (!rejectingBooking.value) return
|
||||
|
||||
processing.value = rejectingBooking.value.id
|
||||
error.value = ''
|
||||
success.value = ''
|
||||
|
||||
try {
|
||||
await adminBookingsApi.reject(
|
||||
rejectingBooking.value.id,
|
||||
rejectReason.value || undefined
|
||||
)
|
||||
success.value = `Booking "${rejectingBooking.value.title}" rejected successfully!`
|
||||
|
||||
// Remove from list
|
||||
bookings.value = bookings.value.filter((b) => b.id !== rejectingBooking.value!.id)
|
||||
|
||||
closeRejectModal()
|
||||
|
||||
// Clear success message after 3 seconds
|
||||
setTimeout(() => {
|
||||
success.value = ''
|
||||
}, 3000)
|
||||
} catch (err) {
|
||||
error.value = handleApiError(err)
|
||||
} finally {
|
||||
processing.value = null
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadSpaces()
|
||||
loadPendingBookings()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h2 {
|
||||
margin-bottom: 24px;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 24px;
|
||||
margin-top: 16px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.collapsible-section + .collapsible-section,
|
||||
.card + .collapsible-section,
|
||||
.collapsible-section + .card {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-weight: 500;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group select,
|
||||
.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);
|
||||
}
|
||||
|
||||
.form-group select: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;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
color: var(--color-text-secondary);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: var(--color-text-muted);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 12px;
|
||||
background: color-mix(in srgb, var(--color-danger) 10%, transparent);
|
||||
color: var(--color-danger);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.success-msg {
|
||||
padding: 12px;
|
||||
background: color-mix(in srgb, var(--color-success) 10%, transparent);
|
||||
color: var(--color-success);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
text-align: left;
|
||||
padding: 12px;
|
||||
background: var(--color-bg-secondary);
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
border-bottom: 2px solid var(--color-border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
vertical-align: top;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.data-table tr:hover {
|
||||
background: var(--color-surface-hover);
|
||||
}
|
||||
|
||||
.user-info,
|
||||
.space-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.user-name,
|
||||
.space-name {
|
||||
font-weight: 500;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.user-email,
|
||||
.user-org,
|
||||
.space-type {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.description {
|
||||
max-width: 200px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
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-sm {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: var(--color-success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--color-success) 85%, black);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--color-danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--color-danger) 85%, black);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--color-bg-tertiary);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: var(--color-border);
|
||||
}
|
||||
|
||||
.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-md);
|
||||
padding: 24px;
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.modal-content h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.booking-summary {
|
||||
background: var(--color-bg-secondary);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.booking-summary p {
|
||||
margin: 8px 0;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.booking-summary strong {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="admin-reports">
|
||||
<Breadcrumb :items="breadcrumbItems" />
|
||||
<h2>Booking Reports</h2>
|
||||
|
||||
<!-- Date Range Filter -->
|
||||
@@ -150,10 +151,17 @@
|
||||
import { ref, onMounted, watch, nextTick } from 'vue'
|
||||
import { reportsApi } from '@/services/api'
|
||||
import Chart from 'chart.js/auto'
|
||||
import Breadcrumb from '@/components/Breadcrumb.vue'
|
||||
import CollapsibleSection from '@/components/CollapsibleSection.vue'
|
||||
import { CalendarDays } from 'lucide-vue-next'
|
||||
import type { SpaceUsageReport, TopUsersReport, ApprovalRateReport } from '@/types'
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ label: 'Dashboard', to: '/dashboard' },
|
||||
{ label: 'Admin', to: '/admin' },
|
||||
{ label: 'Reports' }
|
||||
]
|
||||
|
||||
const activeTab = ref('usage')
|
||||
const startDate = ref('')
|
||||
const endDate = ref('')
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="audit-log">
|
||||
<Breadcrumb :items="breadcrumbItems" />
|
||||
<h2>Jurnal Acțiuni Administrative</h2>
|
||||
|
||||
<!-- Filters -->
|
||||
@@ -77,10 +78,17 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { auditLogApi } from '@/services/api'
|
||||
import Breadcrumb from '@/components/Breadcrumb.vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { formatDateTime as formatDateTimeUtil } from '@/utils/datetime'
|
||||
import type { AuditLog } from '@/types'
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ label: 'Dashboard', to: '/dashboard' },
|
||||
{ label: 'Admin', to: '/admin' },
|
||||
{ label: 'Audit Log' }
|
||||
]
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const userTimezone = computed(() => authStore.user?.timezone || 'UTC')
|
||||
const logs = ref<AuditLog[]>([])
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="settings">
|
||||
<Breadcrumb :items="breadcrumbItems" />
|
||||
<h2>Global Booking Settings</h2>
|
||||
|
||||
<!-- Settings Form -->
|
||||
@@ -124,10 +125,17 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { settingsApi, handleApiError } from '@/services/api'
|
||||
import Breadcrumb from '@/components/Breadcrumb.vue'
|
||||
import CollapsibleSection from '@/components/CollapsibleSection.vue'
|
||||
import { Sliders, Info } from 'lucide-vue-next'
|
||||
import type { Settings } from '@/types'
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ label: 'Dashboard', to: '/dashboard' },
|
||||
{ label: 'Admin', to: '/admin' },
|
||||
{ label: 'Settings' }
|
||||
]
|
||||
|
||||
const loadingSettings = ref(true)
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
@@ -1,13 +1,7 @@
|
||||
<template>
|
||||
<div class="space-detail">
|
||||
<!-- Breadcrumbs -->
|
||||
<nav class="breadcrumbs">
|
||||
<router-link to="/">Home</router-link>
|
||||
<span class="separator">/</span>
|
||||
<router-link to="/spaces">Spaces</router-link>
|
||||
<span class="separator">/</span>
|
||||
<span class="current">{{ space?.name || 'Loading...' }}</span>
|
||||
</nav>
|
||||
<Breadcrumb :items="breadcrumbItems" />
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="loading">
|
||||
@@ -41,14 +35,25 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary btn-reserve"
|
||||
:disabled="!space.is_active"
|
||||
@click="handleReserve"
|
||||
>
|
||||
<Plus :size="18" />
|
||||
{{ showBookingForm ? 'Cancel Reservation' : 'Reserve Space' }}
|
||||
</button>
|
||||
<div class="header-actions">
|
||||
<button
|
||||
class="btn btn-primary btn-reserve"
|
||||
:disabled="!space.is_active"
|
||||
@click="handleReserve"
|
||||
>
|
||||
<Plus :size="18" />
|
||||
{{ showBookingForm ? 'Cancel' : 'Reserve Space' }}
|
||||
</button>
|
||||
<button
|
||||
v-if="isAdmin"
|
||||
class="btn btn-secondary btn-reserve"
|
||||
:disabled="!space.is_active"
|
||||
@click="showAdminBookingForm = true"
|
||||
>
|
||||
<UserPlus :size="18" />
|
||||
Book for User
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
@@ -76,24 +81,48 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Admin Booking Modal -->
|
||||
<div v-if="showAdminBookingForm && space" class="modal" @click.self="showAdminBookingForm = false">
|
||||
<div class="modal-content">
|
||||
<h3>Admin: Book for User</h3>
|
||||
<AdminBookingForm
|
||||
:space-id="space.id"
|
||||
@submit="handleAdminBookingSubmit"
|
||||
@cancel="showAdminBookingForm = false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { spacesApi, handleApiError } from '@/services/api'
|
||||
import Breadcrumb from '@/components/Breadcrumb.vue'
|
||||
import SpaceCalendar from '@/components/SpaceCalendar.vue'
|
||||
import BookingForm from '@/components/BookingForm.vue'
|
||||
import { Users, Plus } from 'lucide-vue-next'
|
||||
import AdminBookingForm from '@/components/AdminBookingForm.vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { Users, Plus, UserPlus } from 'lucide-vue-next'
|
||||
import type { Space } from '@/types'
|
||||
|
||||
const route = useRoute()
|
||||
const authStore = useAuthStore()
|
||||
const isAdmin = computed(() => authStore.user?.role === 'admin')
|
||||
|
||||
const breadcrumbItems = computed(() => [
|
||||
{ label: 'Dashboard', to: '/dashboard' },
|
||||
{ label: 'Spaces', to: '/spaces' },
|
||||
{ label: space.value?.name || 'Loading...' }
|
||||
])
|
||||
|
||||
const space = ref<Space | null>(null)
|
||||
const loading = ref(true)
|
||||
const error = ref('')
|
||||
const showBookingForm = ref(false)
|
||||
const showAdminBookingForm = ref(false)
|
||||
const calendarRef = ref<InstanceType<typeof SpaceCalendar> | null>(null)
|
||||
|
||||
// Format space type for display
|
||||
@@ -150,42 +179,18 @@ const handleBookingSubmit = () => {
|
||||
calendarRef.value?.refresh()
|
||||
}
|
||||
|
||||
// Handle admin booking form submit
|
||||
const handleAdminBookingSubmit = () => {
|
||||
showAdminBookingForm.value = false
|
||||
calendarRef.value?.refresh()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadSpace()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Breadcrumbs */
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.breadcrumbs a {
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.breadcrumbs a:hover {
|
||||
color: var(--color-accent-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.breadcrumbs .separator {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.breadcrumbs .current {
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.loading {
|
||||
display: flex;
|
||||
@@ -335,8 +340,14 @@ onMounted(() => {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-reserve {
|
||||
min-width: 180px;
|
||||
min-width: 160px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@@ -413,31 +424,6 @@ onMounted(() => {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
:deep(.fc .fc-toolbar) {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: stretch !important;
|
||||
}
|
||||
|
||||
:deep(.fc .fc-toolbar-chunk) {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.fc .fc-toolbar-title) {
|
||||
font-size: 1.2em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.fc .fc-button) {
|
||||
padding: 6px 10px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
:deep(.fc .fc-col-header-cell) {
|
||||
font-size: 0.75em;
|
||||
padding: 4px 2px;
|
||||
}
|
||||
/* Calendar mobile styles handled by SpaceCalendar component */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="spaces">
|
||||
<Breadcrumb :items="breadcrumbItems" />
|
||||
<div class="spaces-header">
|
||||
<div>
|
||||
<h2>Available Spaces</h2>
|
||||
@@ -84,6 +85,24 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upcoming Bookings Preview -->
|
||||
<div class="bookings-preview">
|
||||
<div v-if="getUpcomingBookings(space.id).length > 0" class="bookings-preview-list">
|
||||
<div
|
||||
v-for="booking in getUpcomingBookings(space.id)"
|
||||
:key="booking.id"
|
||||
class="booking-preview-item"
|
||||
>
|
||||
<Clock :size="14" class="booking-preview-icon" />
|
||||
<div class="booking-preview-info">
|
||||
<span class="booking-preview-title">{{ booking.title }}</span>
|
||||
<span class="booking-preview-time">{{ formatBookingDate(booking.start_datetime) }} {{ formatBookingTime(booking.start_datetime, booking.end_datetime) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="bookings-preview-empty">No upcoming bookings</div>
|
||||
</div>
|
||||
|
||||
<div class="space-card-footer">
|
||||
<button class="btn btn-secondary">
|
||||
View Details
|
||||
@@ -98,17 +117,28 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { spacesApi, handleApiError } from '@/services/api'
|
||||
import { Building2, Tag, Users, ChevronRight, MapPin } from 'lucide-vue-next'
|
||||
import type { Space } from '@/types'
|
||||
import { spacesApi, bookingsApi, handleApiError } from '@/services/api'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { formatDate as formatDateTZ, formatTime as formatTimeTZ } from '@/utils/datetime'
|
||||
import Breadcrumb from '@/components/Breadcrumb.vue'
|
||||
import { Building2, Tag, Users, ChevronRight, MapPin, Clock } from 'lucide-vue-next'
|
||||
import type { Space, Booking } from '@/types'
|
||||
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
const userTimezone = computed(() => authStore.user?.timezone || 'UTC')
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ label: 'Dashboard', to: '/dashboard' },
|
||||
{ label: 'Spaces' }
|
||||
]
|
||||
|
||||
const spaces = ref<Space[]>([])
|
||||
const loading = ref(true)
|
||||
const error = ref('')
|
||||
const selectedType = ref('')
|
||||
const selectedStatus = ref('')
|
||||
const spaceBookings = ref<Map<number, Booking[]>>(new Map())
|
||||
|
||||
// Format space type for display
|
||||
const formatType = (type: string): string => {
|
||||
@@ -143,6 +173,44 @@ const filteredSpaces = computed(() => {
|
||||
})
|
||||
})
|
||||
|
||||
// Get upcoming bookings for a space (max 3)
|
||||
const getUpcomingBookings = (spaceId: number): Booking[] => {
|
||||
return spaceBookings.value.get(spaceId) || []
|
||||
}
|
||||
|
||||
const formatBookingDate = (datetime: string): string => {
|
||||
return formatDateTZ(datetime, userTimezone.value)
|
||||
}
|
||||
|
||||
const formatBookingTime = (start: string, end: string): string => {
|
||||
return `${formatTimeTZ(start, userTimezone.value)} - ${formatTimeTZ(end, userTimezone.value)}`
|
||||
}
|
||||
|
||||
// Load bookings preview for all spaces
|
||||
const loadSpaceBookings = async (spaceList: Space[]) => {
|
||||
const now = new Date()
|
||||
const future = new Date(now.getTime() + 14 * 24 * 60 * 60 * 1000) // 2 weeks ahead
|
||||
|
||||
const results = await Promise.allSettled(
|
||||
spaceList.map(async (space) => {
|
||||
const bookings = await bookingsApi.getForSpace(space.id, now.toISOString(), future.toISOString())
|
||||
const upcoming = bookings
|
||||
.filter(b => b.status === 'approved')
|
||||
.sort((a, b) => new Date(a.start_datetime).getTime() - new Date(b.start_datetime).getTime())
|
||||
.slice(0, 3)
|
||||
return { spaceId: space.id, bookings: upcoming }
|
||||
})
|
||||
)
|
||||
|
||||
const newMap = new Map<number, Booking[]>()
|
||||
for (const result of results) {
|
||||
if (result.status === 'fulfilled') {
|
||||
newMap.set(result.value.spaceId, result.value.bookings)
|
||||
}
|
||||
}
|
||||
spaceBookings.value = newMap
|
||||
}
|
||||
|
||||
// Load spaces from API
|
||||
const loadSpaces = async () => {
|
||||
loading.value = true
|
||||
@@ -151,6 +219,8 @@ const loadSpaces = async () => {
|
||||
try {
|
||||
const data = await spacesApi.list()
|
||||
spaces.value = data
|
||||
// Load bookings preview in background (non-blocking)
|
||||
loadSpaceBookings(data)
|
||||
} catch (err) {
|
||||
error.value = handleApiError(err)
|
||||
} finally {
|
||||
@@ -402,6 +472,58 @@ onMounted(() => {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* Bookings Preview */
|
||||
.bookings-preview {
|
||||
border-top: 1px solid var(--color-border-light, var(--color-border));
|
||||
padding-top: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.bookings-preview-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.booking-preview-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.booking-preview-icon {
|
||||
color: var(--color-accent);
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.booking-preview-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.booking-preview-title {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.booking-preview-time {
|
||||
font-size: 11px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.bookings-preview-empty {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.space-card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="user-profile">
|
||||
<Breadcrumb :items="breadcrumbItems" />
|
||||
<h2>User Profile</h2>
|
||||
|
||||
<!-- Profile Information Card -->
|
||||
@@ -74,9 +75,18 @@
|
||||
Your approved bookings will automatically sync to your Google Calendar.
|
||||
</p>
|
||||
|
||||
<button @click="disconnectGoogle" class="btn btn-danger" :disabled="disconnecting">
|
||||
{{ disconnecting ? 'Disconnecting...' : 'Disconnect Google Calendar' }}
|
||||
</button>
|
||||
<div class="button-group">
|
||||
<button @click="syncGoogle" class="btn btn-primary" :disabled="syncing">
|
||||
{{ syncing ? 'Syncing...' : 'Sync Now' }}
|
||||
</button>
|
||||
<button @click="disconnectGoogle" class="btn btn-danger" :disabled="disconnecting">
|
||||
{{ disconnecting ? 'Disconnecting...' : 'Disconnect' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="syncResult" class="sync-result">
|
||||
Synced {{ syncResult.synced }} bookings ({{ syncResult.created }} created, {{ syncResult.updated }} updated<span v-if="syncResult.failed">, {{ syncResult.failed }} failed</span>)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="google-disconnected">
|
||||
@@ -125,10 +135,16 @@ import { ref, computed, onMounted } from 'vue'
|
||||
import { usersApi, googleCalendarApi, handleApiError } from '@/services/api'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { formatDateTime as formatDateTimeUtil } from '@/utils/datetime'
|
||||
import Breadcrumb from '@/components/Breadcrumb.vue'
|
||||
import CollapsibleSection from '@/components/CollapsibleSection.vue'
|
||||
import { User as UserIcon, Globe, CalendarDays, CheckCircle, Info } from 'lucide-vue-next'
|
||||
import type { User } from '@/types'
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ label: 'Dashboard', to: '/dashboard' },
|
||||
{ label: 'Profile' }
|
||||
]
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const userTimezone = computed(() => authStore.user?.timezone || 'UTC')
|
||||
|
||||
@@ -136,6 +152,8 @@ const user = ref<User | null>(null)
|
||||
const loadingGoogleStatus = ref(true)
|
||||
const connecting = ref(false)
|
||||
const disconnecting = ref(false)
|
||||
const syncing = ref(false)
|
||||
const syncResult = ref<{ synced: number; created: number; updated: number; failed: number } | null>(null)
|
||||
const error = ref('')
|
||||
const success = ref('')
|
||||
|
||||
@@ -296,6 +314,27 @@ const disconnectGoogle = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const syncGoogle = async () => {
|
||||
error.value = ''
|
||||
success.value = ''
|
||||
syncResult.value = null
|
||||
syncing.value = true
|
||||
|
||||
try {
|
||||
const result = await googleCalendarApi.sync()
|
||||
syncResult.value = result
|
||||
success.value = 'Calendar synced successfully!'
|
||||
setTimeout(() => {
|
||||
success.value = ''
|
||||
syncResult.value = null
|
||||
}, 5000)
|
||||
} catch (err) {
|
||||
error.value = handleApiError(err)
|
||||
} finally {
|
||||
syncing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string): string => {
|
||||
return formatDateTimeUtil(dateString, userTimezone.value)
|
||||
}
|
||||
@@ -420,6 +459,20 @@ h2 {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sync-result {
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: color-mix(in srgb, var(--color-info) 10%, transparent);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-info);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 0.75rem;
|
||||
background: color-mix(in srgb, var(--color-danger) 10%, transparent);
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="users">
|
||||
<Breadcrumb :items="breadcrumbItems" />
|
||||
<div class="page-header">
|
||||
<h2>Admin Dashboard - User Management</h2>
|
||||
<button class="btn btn-primary" @click="openCreateModal">
|
||||
@@ -201,10 +202,17 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { usersApi, handleApiError } from '@/services/api'
|
||||
import Breadcrumb from '@/components/Breadcrumb.vue'
|
||||
import CollapsibleSection from '@/components/CollapsibleSection.vue'
|
||||
import { Users as UsersIcon, UserPlus, Filter } from 'lucide-vue-next'
|
||||
import type { User } from '@/types'
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ label: 'Dashboard', to: '/dashboard' },
|
||||
{ label: 'Admin', to: '/admin' },
|
||||
{ label: 'Users' }
|
||||
]
|
||||
|
||||
const users = ref<User[]>([])
|
||||
const loadingUsers = ref(false)
|
||||
const loading = ref(false)
|
||||
|
||||
Reference in New Issue
Block a user