feat: Space Booking System - MVP complet
Sistem web pentru rezervarea de birouri și săli de ședință cu flux de aprobare administrativă. Stack: FastAPI + Vue.js 3 + SQLite + TypeScript Features implementate: - Autentificare JWT + Self-registration cu email verification - CRUD Spații, Utilizatori, Settings (Admin) - Calendar interactiv (FullCalendar) cu drag-and-drop - Creare rezervări cu validare (durată, program, overlap, max/zi) - Rezervări recurente (săptămânal) - Admin: aprobare/respingere/anulare cereri - Admin: creare directă rezervări (bypass approval) - Admin: editare orice rezervare - User: editare/anulare rezervări proprii - Notificări in-app (bell icon + dropdown) - Notificări email (async SMTP cu BackgroundTasks) - Jurnal acțiuni administrative (audit log) - Rapoarte avansate (utilizare, top users, approval rate) - Șabloane rezervări (booking templates) - Atașamente fișiere (upload/download) - Conflict warnings (verificare disponibilitate real-time) - Integrare Google Calendar (OAuth2) - Suport timezone (UTC storage + user preference) - 225+ teste backend Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Agent
513
frontend/src/views/AdminPending.vue
Normal file
513
frontend/src/views/AdminPending.vue
Normal file
@@ -0,0 +1,513 @@
|
||||
<template>
|
||||
<div class="admin-pending">
|
||||
<h2>Admin Dashboard - Pending Booking Requests</h2>
|
||||
|
||||
<!-- Filters Card -->
|
||||
<div class="card">
|
||||
<h3>Filters</h3>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- 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 -->
|
||||
<div v-else class="card">
|
||||
<h3>Pending Requests ({{ bookings.length }})</h3>
|
||||
<table class="bookings-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>
|
||||
|
||||
<!-- 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">{{ success }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { adminBookingsApi, spacesApi, handleApiError } from '@/services/api'
|
||||
import type { Booking, Space } from '@/types'
|
||||
|
||||
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 => {
|
||||
const date = new Date(datetime)
|
||||
return date.toLocaleDateString('en-GB', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric'
|
||||
})
|
||||
}
|
||||
|
||||
const formatTime = (start: string, end: string): string => {
|
||||
const startDate = new Date(start)
|
||||
const endDate = new Date(end)
|
||||
const formatTimeOnly = (date: Date) =>
|
||||
date.toLocaleTimeString('en-GB', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
})
|
||||
return `${formatTimeOnly(startDate)} - ${formatTimeOnly(endDate)}`
|
||||
}
|
||||
|
||||
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>
|
||||
.admin-pending {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.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: #374151;
|
||||
}
|
||||
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
color: #6b7280;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: #9ca3af;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 12px;
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.success {
|
||||
padding: 12px;
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.bookings-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.bookings-table th {
|
||||
text-align: left;
|
||||
padding: 12px;
|
||||
background: #f9fafb;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bookings-table td {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.bookings-table tr:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.user-info,
|
||||
.space-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.user-name,
|
||||
.space-name {
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.user-email,
|
||||
.user-org,
|
||||
.space-type {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.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: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success:hover:not(:disabled) {
|
||||
background: #059669;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6b7280;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
||||
.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: white;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.modal-content h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.booking-summary {
|
||||
background: #f9fafb;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.booking-summary p {
|
||||
margin: 8px 0;
|
||||
font-size: 14px;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.booking-summary strong {
|
||||
color: #1f2937;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user