552 lines
15 KiB
Vue
552 lines
15 KiB
Vue
<template>
|
|
<v-container fluid>
|
|
<!-- Header -->
|
|
<v-row class="mb-6">
|
|
<v-col>
|
|
<h1 class="text-h3 font-weight-bold mb-2">Event Management</h1>
|
|
<p class="text-body-1 text-medium-emphasis">Create and manage association events</p>
|
|
</v-col>
|
|
<v-col cols="auto">
|
|
<v-btn
|
|
color="primary"
|
|
variant="flat"
|
|
prepend-icon="mdi-calendar-plus"
|
|
@click="showCreateDialog = true"
|
|
>
|
|
Create Event
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Stats Cards -->
|
|
<v-row class="mb-6">
|
|
<v-col cols="12" md="3">
|
|
<v-card elevation="2">
|
|
<v-card-text>
|
|
<div class="d-flex align-center justify-space-between">
|
|
<div>
|
|
<div class="text-h4 font-weight-bold">{{ stats.upcoming }}</div>
|
|
<div class="text-body-2 text-medium-emphasis">Upcoming Events</div>
|
|
</div>
|
|
<v-icon size="32" color="primary">mdi-calendar-clock</v-icon>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="12" md="3">
|
|
<v-card elevation="2">
|
|
<v-card-text>
|
|
<div class="d-flex align-center justify-space-between">
|
|
<div>
|
|
<div class="text-h4 font-weight-bold">{{ stats.totalRegistrations }}</div>
|
|
<div class="text-body-2 text-medium-emphasis">Total Registrations</div>
|
|
</div>
|
|
<v-icon size="32" color="success">mdi-account-check</v-icon>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="12" md="3">
|
|
<v-card elevation="2">
|
|
<v-card-text>
|
|
<div class="d-flex align-center justify-space-between">
|
|
<div>
|
|
<div class="text-h4 font-weight-bold">${{ stats.revenue }}</div>
|
|
<div class="text-body-2 text-medium-emphasis">Total Revenue</div>
|
|
</div>
|
|
<v-icon size="32" color="warning">mdi-cash</v-icon>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="12" md="3">
|
|
<v-card elevation="2">
|
|
<v-card-text>
|
|
<div class="d-flex align-center justify-space-between">
|
|
<div>
|
|
<div class="text-h4 font-weight-bold">{{ stats.avgAttendance }}%</div>
|
|
<div class="text-body-2 text-medium-emphasis">Avg Attendance</div>
|
|
</div>
|
|
<v-icon size="32" color="info">mdi-chart-line</v-icon>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Filters -->
|
|
<v-card class="mb-6" elevation="0">
|
|
<v-card-text>
|
|
<v-row>
|
|
<v-col cols="12" md="3">
|
|
<v-text-field
|
|
v-model="searchQuery"
|
|
label="Search events"
|
|
prepend-inner-icon="mdi-magnify"
|
|
variant="outlined"
|
|
density="compact"
|
|
clearable
|
|
hide-details
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="3">
|
|
<v-select
|
|
v-model="statusFilter"
|
|
label="Status"
|
|
:items="statusOptions"
|
|
variant="outlined"
|
|
density="compact"
|
|
clearable
|
|
hide-details
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="3">
|
|
<v-select
|
|
v-model="typeFilter"
|
|
label="Event Type"
|
|
:items="typeOptions"
|
|
variant="outlined"
|
|
density="compact"
|
|
clearable
|
|
hide-details
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="3">
|
|
<v-select
|
|
v-model="dateRange"
|
|
label="Date Range"
|
|
:items="dateRangeOptions"
|
|
variant="outlined"
|
|
density="compact"
|
|
clearable
|
|
hide-details
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
<!-- Events List -->
|
|
<v-card elevation="2">
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="filteredEvents"
|
|
:search="searchQuery"
|
|
:loading="loading"
|
|
class="elevation-0"
|
|
hover
|
|
>
|
|
<template v-slot:item.title="{ item }">
|
|
<div class="py-2">
|
|
<div class="font-weight-medium">{{ item.title }}</div>
|
|
<div class="text-caption text-medium-emphasis">{{ item.type }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-slot:item.date="{ item }">
|
|
<div>
|
|
<div class="text-body-2">{{ formatDate(item.date) }}</div>
|
|
<div class="text-caption text-medium-emphasis">{{ item.time }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-slot:item.registrations="{ item }">
|
|
<div class="d-flex align-center">
|
|
<v-progress-linear
|
|
:model-value="(item.registrations / item.capacity) * 100"
|
|
:color="getCapacityColor(item.registrations, item.capacity)"
|
|
height="6"
|
|
rounded
|
|
class="mr-2"
|
|
style="min-width: 60px"
|
|
/>
|
|
<span class="text-body-2">
|
|
{{ item.registrations }}/{{ item.capacity }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-slot:item.status="{ item }">
|
|
<v-chip
|
|
:color="getStatusColor(item.status)"
|
|
size="small"
|
|
variant="tonal"
|
|
>
|
|
{{ item.status }}
|
|
</v-chip>
|
|
</template>
|
|
|
|
<template v-slot:item.actions="{ item }">
|
|
<v-btn
|
|
icon="mdi-eye"
|
|
size="small"
|
|
variant="text"
|
|
@click="viewEvent(item)"
|
|
/>
|
|
<v-btn
|
|
icon="mdi-pencil"
|
|
size="small"
|
|
variant="text"
|
|
@click="editEvent(item)"
|
|
/>
|
|
<v-btn
|
|
icon="mdi-dots-vertical"
|
|
size="small"
|
|
variant="text"
|
|
>
|
|
<v-menu activator="parent">
|
|
<v-list density="compact">
|
|
<v-list-item @click="duplicateEvent(item)">
|
|
<v-list-item-title>
|
|
<v-icon size="small" class="mr-2">mdi-content-copy</v-icon>
|
|
Duplicate
|
|
</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item @click="viewAttendees(item)">
|
|
<v-list-item-title>
|
|
<v-icon size="small" class="mr-2">mdi-account-group</v-icon>
|
|
View Attendees
|
|
</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item @click="exportEvent(item)">
|
|
<v-list-item-title>
|
|
<v-icon size="small" class="mr-2">mdi-download</v-icon>
|
|
Export Data
|
|
</v-list-item-title>
|
|
</v-list-item>
|
|
<v-divider />
|
|
<v-list-item
|
|
@click="cancelEvent(item)"
|
|
class="text-error"
|
|
:disabled="item.status === 'cancelled'"
|
|
>
|
|
<v-list-item-title>
|
|
<v-icon size="small" class="mr-2">mdi-cancel</v-icon>
|
|
Cancel Event
|
|
</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</v-btn>
|
|
</template>
|
|
</v-data-table>
|
|
</v-card>
|
|
|
|
<!-- Create/Edit Event Dialog -->
|
|
<v-dialog v-model="showCreateDialog" max-width="800">
|
|
<v-card>
|
|
<v-card-title>
|
|
{{ editingEvent ? 'Edit Event' : 'Create New Event' }}
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<v-form ref="eventForm">
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<v-text-field
|
|
v-model="eventForm.title"
|
|
label="Event Title"
|
|
variant="outlined"
|
|
required
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-textarea
|
|
v-model="eventForm.description"
|
|
label="Description"
|
|
variant="outlined"
|
|
rows="3"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
v-model="eventForm.type"
|
|
label="Event Type"
|
|
:items="typeOptions"
|
|
variant="outlined"
|
|
required
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="eventForm.location"
|
|
label="Location"
|
|
variant="outlined"
|
|
required
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<v-text-field
|
|
v-model="eventForm.date"
|
|
label="Date"
|
|
type="date"
|
|
variant="outlined"
|
|
required
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<v-text-field
|
|
v-model="eventForm.time"
|
|
label="Time"
|
|
type="time"
|
|
variant="outlined"
|
|
required
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<v-text-field
|
|
v-model="eventForm.duration"
|
|
label="Duration (hours)"
|
|
type="number"
|
|
variant="outlined"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<v-text-field
|
|
v-model="eventForm.capacity"
|
|
label="Capacity"
|
|
type="number"
|
|
variant="outlined"
|
|
required
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<v-text-field
|
|
v-model="eventForm.price"
|
|
label="Price"
|
|
prefix="$"
|
|
type="number"
|
|
variant="outlined"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<v-select
|
|
v-model="eventForm.registrationType"
|
|
label="Registration"
|
|
:items="['Open', 'Members Only', 'Invite Only']"
|
|
variant="outlined"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-form>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn variant="text" @click="showCreateDialog = false">Cancel</v-btn>
|
|
<v-btn color="primary" variant="flat" @click="saveEvent">
|
|
{{ editingEvent ? 'Update' : 'Create' }}
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'admin',
|
|
middleware: 'admin'
|
|
});
|
|
|
|
// State
|
|
const loading = ref(false);
|
|
const showCreateDialog = ref(false);
|
|
const editingEvent = ref(null);
|
|
const searchQuery = ref('');
|
|
const statusFilter = ref(null);
|
|
const typeFilter = ref(null);
|
|
const dateRange = ref(null);
|
|
|
|
// Stats
|
|
const stats = ref({
|
|
upcoming: 8,
|
|
totalRegistrations: 342,
|
|
revenue: 15420,
|
|
avgAttendance: 78
|
|
});
|
|
|
|
// Form data
|
|
const eventForm = ref({
|
|
title: '',
|
|
description: '',
|
|
type: '',
|
|
location: '',
|
|
date: '',
|
|
time: '',
|
|
duration: 2,
|
|
capacity: 50,
|
|
price: 0,
|
|
registrationType: 'Open'
|
|
});
|
|
|
|
// Options
|
|
const statusOptions = [
|
|
'Upcoming',
|
|
'Ongoing',
|
|
'Completed',
|
|
'Cancelled'
|
|
];
|
|
|
|
const typeOptions = [
|
|
'Conference',
|
|
'Workshop',
|
|
'Networking',
|
|
'Social',
|
|
'Fundraiser',
|
|
'Meeting'
|
|
];
|
|
|
|
const dateRangeOptions = [
|
|
'This Week',
|
|
'This Month',
|
|
'Next Month',
|
|
'This Quarter',
|
|
'This Year'
|
|
];
|
|
|
|
// Table configuration
|
|
const headers = [
|
|
{ title: 'Event', key: 'title', sortable: true },
|
|
{ title: 'Date & Time', key: 'date', sortable: true },
|
|
{ title: 'Location', key: 'location', sortable: true },
|
|
{ title: 'Registrations', key: 'registrations', sortable: true },
|
|
{ title: 'Status', key: 'status', sortable: true },
|
|
{ title: 'Actions', key: 'actions', sortable: false, align: 'end' }
|
|
];
|
|
|
|
// Mock data
|
|
const events = ref([
|
|
{
|
|
id: 1,
|
|
title: 'Annual Gala Dinner',
|
|
type: 'Fundraiser',
|
|
date: new Date('2024-02-15'),
|
|
time: '19:00',
|
|
location: 'Grand Ballroom',
|
|
registrations: 145,
|
|
capacity: 200,
|
|
status: 'Upcoming',
|
|
price: 250
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'Business Networking Event',
|
|
type: 'Networking',
|
|
date: new Date('2024-01-22'),
|
|
time: '18:00',
|
|
location: 'Conference Center',
|
|
registrations: 48,
|
|
capacity: 50,
|
|
status: 'Upcoming',
|
|
price: 0
|
|
},
|
|
{
|
|
id: 3,
|
|
title: 'Digital Marketing Workshop',
|
|
type: 'Workshop',
|
|
date: new Date('2024-01-10'),
|
|
time: '14:00',
|
|
location: 'Training Room A',
|
|
registrations: 22,
|
|
capacity: 30,
|
|
status: 'Completed',
|
|
price: 75
|
|
},
|
|
{
|
|
id: 4,
|
|
title: 'Board Meeting',
|
|
type: 'Meeting',
|
|
date: new Date('2024-01-05'),
|
|
time: '10:00',
|
|
location: 'Board Room',
|
|
registrations: 12,
|
|
capacity: 15,
|
|
status: 'Completed',
|
|
price: 0
|
|
}
|
|
]);
|
|
|
|
// Computed
|
|
const filteredEvents = computed(() => {
|
|
let filtered = [...events.value];
|
|
|
|
if (statusFilter.value) {
|
|
filtered = filtered.filter(e => e.status === statusFilter.value);
|
|
}
|
|
|
|
if (typeFilter.value) {
|
|
filtered = filtered.filter(e => e.type === typeFilter.value);
|
|
}
|
|
|
|
return filtered;
|
|
});
|
|
|
|
// Methods
|
|
const getStatusColor = (status: string) => {
|
|
switch (status) {
|
|
case 'Upcoming': return 'info';
|
|
case 'Ongoing': return 'success';
|
|
case 'Completed': return 'default';
|
|
case 'Cancelled': return 'error';
|
|
default: return 'default';
|
|
}
|
|
};
|
|
|
|
const getCapacityColor = (registrations: number, capacity: number) => {
|
|
const percentage = (registrations / capacity) * 100;
|
|
if (percentage >= 90) return 'error';
|
|
if (percentage >= 70) return 'warning';
|
|
return 'success';
|
|
};
|
|
|
|
const formatDate = (date: Date) => {
|
|
return new Date(date).toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric'
|
|
});
|
|
};
|
|
|
|
const viewEvent = (event: any) => {
|
|
console.log('View event:', event);
|
|
};
|
|
|
|
const editEvent = (event: any) => {
|
|
editingEvent.value = event;
|
|
eventForm.value = {
|
|
title: event.title,
|
|
description: '',
|
|
type: event.type,
|
|
location: event.location,
|
|
date: event.date.toISOString().split('T')[0],
|
|
time: event.time,
|
|
duration: 2,
|
|
capacity: event.capacity,
|
|
price: event.price,
|
|
registrationType: 'Open'
|
|
};
|
|
showCreateDialog.value = true;
|
|
};
|
|
|
|
const duplicateEvent = (event: any) => {
|
|
console.log('Duplicate event:', event);
|
|
};
|
|
|
|
const viewAttendees = (event: any) => {
|
|
console.log('View attendees:', event);
|
|
};
|
|
|
|
const exportEvent = (event: any) => {
|
|
console.log('Export event:', event);
|
|
};
|
|
|
|
const cancelEvent = (event: any) => {
|
|
console.log('Cancel event:', event);
|
|
event.status = 'Cancelled';
|
|
};
|
|
|
|
const saveEvent = () => {
|
|
console.log('Save event:', eventForm.value);
|
|
showCreateDialog.value = false;
|
|
editingEvent.value = null;
|
|
};
|
|
</script> |