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