jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Readying for design

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-03-04 18:24:20 +00:00
parent d73256ca2b
commit fadf473dde
50 changed files with 1478 additions and 1259 deletions
Download patch file Download diff file Expand all files Collapse all files

230
app/pages/admin/events/create.vue
View file

@ -1,17 +1,17 @@
<template>
<div>
<div class="bg-elevated border-b">
<div class="bg-guild-900 border-b border-guild-700">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="py-6">
<div class="flex items-center gap-4 mb-2">
<NuxtLink to="/admin/events" class="text-dimmed hover:text-default">
<NuxtLink to="/admin/events" class="text-guild-500 hover:text-guild-100">
<Icon name="heroicons:arrow-left" class="w-5 h-5" />
</NuxtLink>
<h1 class="text-2xl font-bold text-highlighted">
<h1 class="text-display font-bold text-guild-100">
{{ editingEvent ? "Edit Event" : "Create New Event" }}
</h1>
</div>
<p class="text-muted">
<p class="text-guild-400">
Fill out the form below to create or update an event
</p>
</div>
@ -22,18 +22,18 @@
<!-- Error Summary -->
<div
v-if="formErrors.length > 0"
class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg"
class="mb-6 p-4 bg-ember-900/20 border border-ember-800 rounded-lg"
>
<div class="flex">
<Icon
name="heroicons:exclamation-circle"
class="w-5 h-5 text-red-500 mr-3 mt-0.5"
class="w-5 h-5 text-ember-400 mr-3 mt-0.5"
/>
<div>
<h3 class="text-sm font-medium text-red-800 mb-2">
<h3 class="text-sm font-medium text-ember-400 mb-2">
Please fix the following errors:
</h3>
<ul class="text-sm text-red-700 space-y-1">
<ul class="text-sm text-ember-400 space-y-1">
<li v-for="error in formErrors" :key="error">• {{ error }}</li>
</ul>
</div>
@ -43,15 +43,15 @@
<!-- Success Message -->
<div
v-if="showSuccessMessage"
class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg"
class="mb-6 p-4 bg-candlelight-900/20 border border-candlelight-800 rounded-lg"
>
<div class="flex">
<Icon
name="heroicons:check-circle"
class="w-5 h-5 text-green-500 mr-3 mt-0.5"
class="w-5 h-5 text-candlelight-400 mr-3 mt-0.5"
/>
<div>
<h3 class="text-sm font-medium text-green-800">
<h3 class="text-sm font-medium text-candlelight-400">
{{
editingEvent
? "Event updated successfully!"
@ -65,14 +65,14 @@
<form @submit.prevent="saveEvent">
<!-- Basic Information -->
<div class="mb-8">
<h2 class="text-lg font-semibold text-highlighted mb-4">
<h2 class="text-lg font-semibold text-guild-100 mb-4">
Basic Information
</h2>
<div class="grid grid-cols-1 gap-6">
<div>
<label class="block text-sm font-medium text-default mb-2">
Event Title <span class="text-red-500">*</span>
<label class="block text-sm font-medium text-guild-100 mb-2">
Event Title <span class="text-ember-400">*</span>
</label>
<UInput
v-model="eventForm.title"
@ -81,25 +81,25 @@
:color="fieldErrors.title ? 'error' : undefined"
class="w-full"
/>
<p v-if="fieldErrors.title" class="mt-1 text-sm text-red-600">
<p v-if="fieldErrors.title" class="mt-1 text-sm text-ember-400">
{{ fieldErrors.title }}
</p>
</div>
<div>
<label class="block text-sm font-medium text-default mb-2"
<label class="block text-sm font-medium text-guild-100 mb-2"
>Feature Image</label
>
<ImageUpload v-model="eventForm.featureImage" />
<p class="mt-1 text-sm text-dimmed">
<p class="mt-1 text-sm text-guild-500">
Upload a high-quality image (1200x630px recommended) to
represent your event
</p>
</div>
<div>
<label class="block text-sm font-medium text-default mb-2">
Event Description <span class="text-red-500">*</span>
<label class="block text-sm font-medium text-guild-100 mb-2">
Event Description <span class="text-ember-400">*</span>
</label>
<UTextarea
v-model="eventForm.description"
@ -111,17 +111,17 @@
/>
<p
v-if="fieldErrors.description"
class="mt-1 text-sm text-red-600"
class="mt-1 text-sm text-ember-400"
>
{{ fieldErrors.description }}
</p>
<p class="mt-1 text-sm text-dimmed">
<p class="mt-1 text-sm text-guild-500">
This will be displayed on the event listing and detail pages
</p>
</div>
<div>
<label class="block text-sm font-medium text-default mb-2"
<label class="block text-sm font-medium text-guild-100 mb-2"
>Additional Content</label
>
<UTextarea
@ -130,7 +130,7 @@
:rows="6"
class="w-full"
/>
<p class="mt-1 text-sm text-dimmed">
<p class="mt-1 text-sm text-guild-500">
Optional: Provide additional context, agenda items, or detailed
requirements
</p>
@ -140,14 +140,14 @@
<!-- Event Details -->
<div class="mb-8">
<h2 class="text-lg font-semibold text-highlighted mb-4">
<h2 class="text-lg font-semibold text-guild-100 mb-4">
Event Details
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-default mb-2">
Event Type <span class="text-red-500">*</span>
<label class="block text-sm font-medium text-guild-100 mb-2">
Event Type <span class="text-ember-400">*</span>
</label>
<USelect
v-model="eventForm.eventType"
@ -159,14 +159,14 @@
]"
class="w-full"
/>
<p class="mt-1 text-sm text-dimmed">
<p class="mt-1 text-sm text-guild-500">
Choose the category that best describes your event
</p>
</div>
<div>
<label class="block text-sm font-medium text-default mb-2">
Location <span class="text-red-500">*</span>
<label class="block text-sm font-medium text-guild-100 mb-2">
Location <span class="text-ember-400">*</span>
</label>
<UInput
v-model="eventForm.location"
@ -175,50 +175,50 @@
:color="fieldErrors.location ? 'error' : undefined"
class="w-full"
/>
<p v-if="fieldErrors.location" class="mt-1 text-sm text-red-600">
<p v-if="fieldErrors.location" class="mt-1 text-sm text-ember-400">
{{ fieldErrors.location }}
</p>
<p class="mt-1 text-sm text-dimmed">
<p class="mt-1 text-sm text-guild-500">
Enter a video conference link or Slack channel (starting with #)
</p>
</div>
<div>
<label class="block text-sm font-medium text-default mb-2">
Start Date & Time <span class="text-red-500">*</span>
<label class="block text-sm font-medium text-guild-100 mb-2">
Start Date & Time <span class="text-ember-400">*</span>
</label>
<NaturalDateInput
v-model="eventForm.startDate"
placeholder="e.g., 'tomorrow at 3pm', 'next Friday at 9am'"
:required="true"
:input-class="{
'border-red-300 focus:ring-red-500': fieldErrors.startDate,
'border-ember-700 focus:ring-ember-500': fieldErrors.startDate,
}"
/>
<p v-if="fieldErrors.startDate" class="mt-1 text-sm text-red-600">
<p v-if="fieldErrors.startDate" class="mt-1 text-sm text-ember-400">
{{ fieldErrors.startDate }}
</p>
</div>
<div>
<label class="block text-sm font-medium text-default mb-2">
End Date & Time <span class="text-red-500">*</span>
<label class="block text-sm font-medium text-guild-100 mb-2">
End Date & Time <span class="text-ember-400">*</span>
</label>
<NaturalDateInput
v-model="eventForm.endDate"
placeholder="e.g., 'tomorrow at 5pm', 'next Friday at 11am'"
:required="true"
:input-class="{
'border-red-300 focus:ring-red-500': fieldErrors.endDate,
'border-ember-700 focus:ring-ember-500': fieldErrors.endDate,
}"
/>
<p v-if="fieldErrors.endDate" class="mt-1 text-sm text-red-600">
<p v-if="fieldErrors.endDate" class="mt-1 text-sm text-ember-400">
{{ fieldErrors.endDate }}
</p>
</div>
<div>
<label class="block text-sm font-medium text-default mb-2"
<label class="block text-sm font-medium text-guild-100 mb-2"
>Max Attendees</label
>
<UInput
@ -228,20 +228,20 @@
placeholder="Leave blank for unlimited"
class="w-full"
/>
<p class="mt-1 text-sm text-dimmed">
<p class="mt-1 text-sm text-guild-500">
Set a maximum number of attendees (optional)
</p>
</div>
<div>
<label class="block text-sm font-medium text-default mb-2"
<label class="block text-sm font-medium text-guild-100 mb-2"
>Registration Deadline</label
>
<NaturalDateInput
v-model="eventForm.registrationDeadline"
placeholder="e.g., 'tomorrow at noon', '1 hour before event'"
/>
<p class="mt-1 text-sm text-dimmed">
<p class="mt-1 text-sm text-guild-500">
When should registration close? (optional)
</p>
</div>
@ -250,12 +250,12 @@
<!-- Target Audience -->
<div class="mb-8">
<h2 class="text-lg font-semibold text-highlighted mb-4">
<h2 class="text-lg font-semibold text-guild-100 mb-4">
Target Audience
</h2>
<div>
<label class="block text-sm font-medium text-default mb-3"
<label class="block text-sm font-medium text-guild-100 mb-3"
>Target Circles</label
>
<div class="space-y-3">
@ -264,13 +264,13 @@
v-model="eventForm.targetCircles"
value="community"
type="checkbox"
class="rounded border-default text-blue-600 focus:ring-blue-500 mt-1"
class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500 mt-1"
/>
<div class="ml-3">
<span class="text-sm font-medium text-default"
<span class="text-sm font-medium text-guild-100"
>Community Circle</span
>
<p class="text-xs text-dimmed">
<p class="text-xs text-guild-500">
New members and those exploring the community
</p>
</div>
@ -280,13 +280,13 @@
v-model="eventForm.targetCircles"
value="founder"
type="checkbox"
class="rounded border-default text-blue-600 focus:ring-blue-500 mt-1"
class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500 mt-1"
/>
<div class="ml-3">
<span class="text-sm font-medium text-default"
<span class="text-sm font-medium text-guild-100"
>Founder Circle</span
>
<p class="text-xs text-dimmed">
<p class="text-xs text-guild-500">
Entrepreneurs and business leaders
</p>
</div>
@ -296,19 +296,19 @@
v-model="eventForm.targetCircles"
value="practitioner"
type="checkbox"
class="rounded border-default text-blue-600 focus:ring-blue-500 mt-1"
class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500 mt-1"
/>
<div class="ml-3">
<span class="text-sm font-medium text-default"
<span class="text-sm font-medium text-guild-100"
>Practitioner Circle</span
>
<p class="text-xs text-dimmed">
<p class="text-xs text-guild-500">
Experts and professionals sharing knowledge
</p>
</div>
</label>
</div>
<p class="mt-2 text-sm text-dimmed">
<p class="mt-2 text-sm text-guild-500">
Select which circles this event is most relevant for (leave blank
for all circles)
</p>
@ -317,20 +317,20 @@
<!-- Ticketing -->
<div class="mb-8">
<h2 class="text-lg font-semibold text-highlighted mb-4">Ticketing</h2>
<h2 class="text-lg font-semibold text-guild-100 mb-4">Ticketing</h2>
<div class="space-y-6">
<label class="flex items-start">
<input
v-model="eventForm.tickets.enabled"
type="checkbox"
class="rounded border-default text-blue-600 focus:ring-blue-500 mt-1"
class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500 mt-1"
/>
<div class="ml-3">
<span class="text-sm font-medium text-default"
<span class="text-sm font-medium text-guild-100"
>Enable Ticketing</span
>
<p class="text-xs text-dimmed">
<p class="text-xs text-guild-500">
Allow ticket sales for this event
</p>
</div>
@ -338,19 +338,19 @@
<div
v-if="eventForm.tickets.enabled"
class="ml-6 space-y-4 p-4 bg-muted rounded-lg"
class="ml-6 space-y-4 p-4 bg-guild-950 rounded-lg"
>
<label class="flex items-start">
<input
v-model="eventForm.tickets.public.available"
type="checkbox"
class="rounded border-default text-blue-600 focus:ring-blue-500 mt-1"
class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500 mt-1"
/>
<div class="ml-3">
<span class="text-sm font-medium text-default"
<span class="text-sm font-medium text-guild-100"
>Public Tickets Available</span
>
<p class="text-xs text-dimmed">
<p class="text-xs text-guild-500">
Allow non-members to purchase tickets
</p>
</div>
@ -359,7 +359,7 @@
<div v-if="eventForm.tickets.public.available" class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-default mb-2"
<label class="block text-sm font-medium text-guild-100 mb-2"
>Ticket Name</label
>
<UInput
@ -370,7 +370,7 @@
</div>
<div>
<label class="block text-sm font-medium text-default mb-2"
<label class="block text-sm font-medium text-guild-100 mb-2"
>Price (CAD)</label
>
<UInput
@ -381,14 +381,14 @@
placeholder="0.00"
class="w-full"
/>
<p class="mt-1 text-xs text-dimmed">
<p class="mt-1 text-xs text-guild-500">
Set to 0 for free public events
</p>
</div>
</div>
<div>
<label class="block text-sm font-medium text-default mb-2"
<label class="block text-sm font-medium text-guild-100 mb-2"
>Ticket Description</label
>
<UTextarea
@ -401,7 +401,7 @@
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-default mb-2"
<label class="block text-sm font-medium text-guild-100 mb-2"
>Quantity Available</label
>
<UInput
@ -414,7 +414,7 @@
</div>
<div>
<label class="block text-sm font-medium text-default mb-2"
<label class="block text-sm font-medium text-guild-100 mb-2"
>Early Bird Price (Optional)</label
>
<UInput
@ -429,7 +429,7 @@
</div>
<div v-if="eventForm.tickets.public.earlyBirdPrice > 0">
<label class="block text-sm font-medium text-default mb-2"
<label class="block text-sm font-medium text-guild-100 mb-2"
>Early Bird Deadline</label
>
<div class="md:w-1/2">
@ -438,15 +438,15 @@
placeholder="e.g., '1 week before event', 'next Monday'"
/>
</div>
<p class="mt-1 text-xs text-dimmed">
<p class="mt-1 text-xs text-guild-500">
Price increases to regular price after this date
</p>
</div>
</div>
</div>
<div class="p-3 bg-blue-50 rounded-lg">
<p class="text-sm text-blue-700">
<div class="p-3 bg-candlelight-900/20 rounded-lg">
<p class="text-sm text-candlelight-400">
<strong>Note:</strong> Members always get free access to all
events regardless of ticket settings.
</p>
@ -456,7 +456,7 @@
<!-- Series Management -->
<div class="mb-8">
<h2 class="text-lg font-semibold text-highlighted mb-4">
<h2 class="text-lg font-semibold text-guild-100 mb-4">
Series Management
</h2>
@ -465,13 +465,13 @@
<input
v-model="eventForm.series.isSeriesEvent"
type="checkbox"
class="rounded border-default text-purple-600 focus:ring-purple-500 mt-1"
class="rounded border-guild-700 text-earth-500 focus:ring-earth-500 mt-1"
/>
<div class="ml-3">
<span class="text-sm font-medium text-default"
<span class="text-sm font-medium text-guild-100"
>Part of Event Series</span
>
<p class="text-xs text-dimmed">
<p class="text-xs text-guild-500">
This event is part of a multi-event series
</p>
</div>
@ -479,11 +479,11 @@
<div
v-if="eventForm.series.isSeriesEvent"
class="ml-6 space-y-4 p-4 bg-purple-500/10 rounded-lg border border-purple-500/20"
class="ml-6 space-y-4 p-4 bg-earth-900/20 rounded-lg border border-earth-800"
>
<div>
<label class="block text-sm font-medium text-default mb-2">
Select Series <span class="text-red-500">*</span>
<label class="block text-sm font-medium text-guild-100 mb-2">
Select Series <span class="text-ember-400">*</span>
</label>
<div class="flex gap-2">
<USelect
@ -501,12 +501,12 @@
/>
<NuxtLink
to="/admin/series/create"
class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm font-medium whitespace-nowrap"
class="px-4 py-2 bg-earth-600 text-white rounded-lg hover:bg-earth-700 text-sm font-medium whitespace-nowrap"
>
New Series
</NuxtLink>
</div>
<p class="text-xs text-dimmed mt-1">
<p class="text-xs text-guild-500 mt-1">
Select an existing series or create a new one
</p>
</div>
@ -516,18 +516,18 @@
class="space-y-4"
>
<div>
<label class="block text-sm font-medium text-default mb-2">
Series Title <span class="text-red-500">*</span>
<label class="block text-sm font-medium text-guild-100 mb-2">
Series Title <span class="text-ember-400">*</span>
</label>
<UInput
v-model="eventForm.series.title"
placeholder="e.g., Cooperative Game Development Fundamentals"
required
:readonly="selectedSeriesId"
:class="{ 'bg-accented': selectedSeriesId }"
:class="{ 'bg-guild-800': selectedSeriesId }"
class="w-full"
/>
<p class="text-xs text-dimmed mt-1">
<p class="text-xs text-guild-500 mt-1">
{{
selectedSeriesId
? "From selected series"
@ -537,8 +537,8 @@
</div>
<div>
<label class="block text-sm font-medium text-default mb-2">
Series Description <span class="text-red-500">*</span>
<label class="block text-sm font-medium text-guild-100 mb-2">
Series Description <span class="text-ember-400">*</span>
</label>
<UTextarea
v-model="eventForm.series.description"
@ -546,10 +546,10 @@
required
:rows="3"
:readonly="selectedSeriesId"
:class="{ 'bg-accented': selectedSeriesId }"
:class="{ 'bg-guild-800': selectedSeriesId }"
class="w-full"
/>
<p class="text-xs text-dimmed mt-1">
<p class="text-xs text-guild-500 mt-1">
{{
selectedSeriesId
? "From selected series"
@ -560,9 +560,9 @@
<div
v-if="selectedSeriesId"
class="p-3 bg-blue-500/10 rounded-lg border border-blue-500/20"
class="p-3 bg-candlelight-900/20 rounded-lg border border-candlelight-800"
>
<p class="text-sm text-blue-600 dark:text-blue-400">
<p class="text-sm text-candlelight-400">
<strong>Note:</strong> This event will be added to the
existing "{{ eventForm.series.title }}" series.
</p>
@ -574,7 +574,7 @@
<!-- Event Agenda -->
<div class="mb-8">
<h2 class="text-lg font-semibold text-highlighted mb-4">
<h2 class="text-lg font-semibold text-guild-100 mb-4">
Event Agenda
</h2>
@ -592,7 +592,7 @@
<button
type="button"
@click="removeAgendaItem(index)"
class="px-3 py-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
class="px-3 py-2 text-ember-400 hover:bg-ember-900/20 rounded-lg transition-colors"
>
<Icon name="heroicons:trash" class="w-5 h-5" />
</button>
@ -601,14 +601,14 @@
<button
type="button"
@click="addAgendaItem"
class="flex items-center gap-2 px-4 py-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors font-medium"
class="flex items-center gap-2 px-4 py-2 text-candlelight-400 hover:bg-candlelight-900/20 rounded-lg transition-colors font-medium"
>
<Icon name="heroicons:plus" class="w-5 h-5" />
Add Agenda Item
</button>
</div>
<p class="mt-2 text-sm text-dimmed">
<p class="mt-2 text-sm text-guild-500">
Add agenda items to help attendees know what to expect during the
event
</p>
@ -616,7 +616,7 @@
<!-- Event Settings -->
<div class="mb-8">
<h2 class="text-lg font-semibold text-highlighted mb-4">
<h2 class="text-lg font-semibold text-guild-100 mb-4">
Event Settings
</h2>
@ -626,13 +626,13 @@
<input
v-model="eventForm.isOnline"
type="checkbox"
class="rounded border-default text-blue-600 focus:ring-blue-500 mt-1"
class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500 mt-1"
/>
<div class="ml-3">
<span class="text-sm font-medium text-default"
<span class="text-sm font-medium text-guild-100"
>Online Event</span
>
<p class="text-xs text-dimmed">
<p class="text-xs text-guild-500">
Event will be conducted virtually
</p>
</div>
@ -642,13 +642,13 @@
<input
v-model="eventForm.registrationRequired"
type="checkbox"
class="rounded border-default text-blue-600 focus:ring-blue-500 mt-1"
class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500 mt-1"
/>
<div class="ml-3">
<span class="text-sm font-medium text-default"
<span class="text-sm font-medium text-guild-100"
>Registration Required</span
>
<p class="text-xs text-dimmed">
<p class="text-xs text-guild-500">
Attendees must register before attending
</p>
</div>
@ -660,13 +660,13 @@
<input
v-model="eventForm.isVisible"
type="checkbox"
class="rounded border-default text-blue-600 focus:ring-blue-500 mt-1"
class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500 mt-1"
/>
<div class="ml-3">
<span class="text-sm font-medium text-default"
<span class="text-sm font-medium text-guild-100"
>Visible on Public Calendar</span
>
<p class="text-xs text-dimmed">
<p class="text-xs text-guild-500">
Event will appear on the public events page
</p>
</div>
@ -676,13 +676,13 @@
<input
v-model="eventForm.isCancelled"
type="checkbox"
class="rounded border-default text-red-600 focus:ring-red-500 mt-1"
class="rounded border-guild-700 text-ember-500 focus:ring-ember-500 mt-1"
/>
<div class="ml-3">
<span class="text-sm font-medium text-default"
<span class="text-sm font-medium text-guild-100"
>Event Cancelled</span
>
<p class="text-xs text-dimmed">
<p class="text-xs text-guild-500">
Mark this event as cancelled
</p>
</div>
@ -693,7 +693,7 @@
<!-- Cancellation Message (conditional) -->
<div v-if="eventForm.isCancelled" class="mb-8">
<label class="block text-sm font-medium text-default mb-2"
<label class="block text-sm font-medium text-guild-100 mb-2"
>Cancellation Message</label
>
<UTextarea
@ -703,18 +703,18 @@
color="error"
class="w-full"
/>
<p class="text-xs text-dimmed mt-1">
<p class="text-xs text-guild-500 mt-1">
This message will be displayed to users viewing the event page
</p>
</div>
<!-- Form Actions -->
<div
class="flex justify-between items-center pt-6 border-t border-default"
class="flex justify-between items-center pt-6 border-t border-guild-700"
>
<NuxtLink
to="/admin/events"
class="px-4 py-2 text-muted hover:text-highlighted font-medium"
class="px-4 py-2 text-guild-400 hover:text-guild-100 font-medium"
>
Cancel
</NuxtLink>
@ -725,7 +725,7 @@
type="button"
@click="saveAndCreateAnother"
:disabled="creating"
class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
class="px-4 py-2 bg-guild-600 text-white rounded-lg hover:bg-guild-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
>
{{ creating ? "Saving..." : "Save & Create Another" }}
</button>
@ -733,7 +733,7 @@
<button
type="submit"
:disabled="creating"
class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
class="px-6 py-2 bg-candlelight-600 text-white rounded-lg hover:bg-candlelight-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
>
{{
creating

110
app/pages/admin/events/index.vue
View file

@ -1,10 +1,10 @@
<template>
<div>
<div class="bg-elevated border-b">
<div class="bg-guild-900 border-b border-guild-700">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="py-6">
<h1 class="text-2xl font-bold text-highlighted">Event Management</h1>
<p class="text-muted">
<h1 class="text-display font-bold text-guild-100">Event Management</h1>
<p class="text-guild-400">
Create, manage, and monitor Ghost Guild events and workshops
</p>
</div>
@ -53,7 +53,7 @@
</div>
<NuxtLink
to="/admin/events/create"
class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 inline-flex items-center"
class="bg-candlelight-600 text-white px-4 py-2 rounded-lg hover:bg-candlelight-700 focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2 inline-flex items-center"
>
<Icon name="heroicons:plus" class="w-4 h-4 mr-2" />
Create Event
@ -61,65 +61,65 @@
</div>
<!-- Events Table -->
<div class="bg-elevated rounded-lg shadow overflow-hidden">
<div v-if="pending" class="p-8 text-center">
<div class="bg-guild-900 rounded-lg shadow overflow-hidden">
<div v-if="pending" class="p-8 text-center text-guild-100">
<div class="inline-flex items-center">
<div
class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mr-3"
class="animate-spin rounded-full h-6 w-6 border-b-2 border-candlelight-500 mr-3"
></div>
Loading events...
</div>
</div>
<div v-else-if="error" class="p-8 text-center text-red-600">
<div v-else-if="error" class="p-8 text-center text-ember-400">
Error loading events: {{ error }}
</div>
<table v-else class="w-full">
<thead class="bg-muted">
<thead class="bg-guild-950">
<tr>
<th
class="px-6 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
class="px-6 py-4 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
>
Title
</th>
<th
class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
class="px-4 py-4 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
>
Type
</th>
<th
class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
class="px-4 py-4 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
>
Date
</th>
<th
class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
class="px-4 py-4 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
>
Status
</th>
<th
class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
class="px-4 py-4 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
>
Registration
</th>
<th
class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
class="px-4 py-4 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
>
Tickets
</th>
<th
class="px-6 py-4 text-right text-xs font-medium text-dimmed uppercase tracking-wider"
class="px-6 py-4 text-right text-xs font-medium text-guild-500 uppercase tracking-wider"
>
Actions
</th>
</tr>
</thead>
<tbody class="bg-elevated divide-y divide-default">
<tbody class="bg-guild-900 divide-y divide-guild-700">
<tr
v-for="event in filteredEvents"
:key="event._id"
class="hover:bg-muted"
class="hover:bg-guild-800"
>
<!-- Title Column -->
<td class="px-6 py-6">
@ -128,7 +128,7 @@
v-if="
event.featureImage?.url && !event.featureImage?.publicId
"
class="flex-shrink-0 w-12 h-12 bg-accented rounded-lg overflow-hidden"
class="flex-shrink-0 w-12 h-12 bg-guild-800 rounded-lg overflow-hidden"
>
<img
:src="event.featureImage.url"
@ -139,26 +139,26 @@
</div>
<div
v-else
class="flex-shrink-0 w-12 h-12 bg-accented rounded-lg flex items-center justify-center"
class="flex-shrink-0 w-12 h-12 bg-guild-800 rounded-lg flex items-center justify-center"
>
<Icon
name="heroicons:calendar-days"
class="w-6 h-6 text-muted"
class="w-6 h-6 text-guild-400"
/>
</div>
<div class="flex-1 min-w-0">
<div class="text-sm font-semibold text-highlighted mb-1">
<div class="text-sm font-semibold text-guild-100 mb-1">
{{ event.title }}
</div>
<div class="text-sm text-dimmed line-clamp-2">
<div class="text-sm text-guild-500 line-clamp-2">
{{ event.description.substring(0, 100) }}...
</div>
<div v-if="event.series?.isSeriesEvent" class="mt-2 mb-2">
<div
class="inline-flex items-center gap-1 px-2 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded-full"
class="inline-flex items-center gap-1 px-2 py-1 bg-earth-900/20 text-earth-400 text-xs font-medium rounded-full"
>
<div
class="w-4 h-4 bg-purple-200 text-purple-700 rounded-full flex items-center justify-center text-xs font-bold"
class="w-4 h-4 bg-earth-800 text-earth-400 rounded-full flex items-center justify-center text-xs font-bold"
>
{{ event.series.position }}
</div>
@ -168,7 +168,7 @@
<div class="flex items-center space-x-4 mt-2">
<div
v-if="event.membersOnly"
class="flex items-center text-xs text-purple-600"
class="flex items-center text-xs text-earth-400"
>
<Icon
name="heroicons:lock-closed"
@ -184,15 +184,15 @@
>
<Icon
name="heroicons:user-group"
class="w-3 h-3 text-muted"
class="w-3 h-3 text-guild-400"
/>
<span class="text-xs text-dimmed">{{
<span class="text-xs text-guild-500">{{
event.targetCircles.join(", ")
}}</span>
</div>
<div
v-if="!event.isVisible"
class="flex items-center text-xs text-dimmed"
class="flex items-center text-xs text-guild-500"
>
<Icon name="heroicons:eye-slash" class="w-3 h-3 mr-1" />
Hidden
@ -213,12 +213,12 @@
</td>
<!-- Date Column -->
<td class="px-4 py-6 whitespace-nowrap text-sm text-muted">
<td class="px-4 py-6 whitespace-nowrap text-sm text-guild-400">
<div class="space-y-1">
<div class="font-medium">
{{ formatDate(event.startDate) }}
</div>
<div class="text-xs text-dimmed">
<div class="text-xs text-guild-500">
{{ formatTime(event.startDate) }}
</div>
</div>
@ -235,7 +235,7 @@
</span>
<div
v-if="event.isCancelled"
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800"
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-ember-900/20 text-ember-400"
>
Cancelled
</div>
@ -247,17 +247,17 @@
<div class="space-y-2">
<div
v-if="event.registrationRequired"
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800"
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-candlelight-900/20 text-candlelight-400"
>
Required
</div>
<div
v-else
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-accented text-default"
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-guild-800 text-guild-300"
>
Optional
</div>
<div v-if="event.maxAttendees" class="text-xs text-dimmed">
<div v-if="event.maxAttendees" class="text-xs text-guild-500">
{{ event.registeredCount || 0 }} / {{ event.maxAttendees }}
</div>
</div>
@ -270,20 +270,20 @@
<div class="flex items-center gap-1 text-xs">
<Icon
name="heroicons:ticket"
class="w-3.5 h-3.5 text-blue-600"
class="w-3.5 h-3.5 text-candlelight-400"
/>
<span class="font-medium text-default">Ticketing On</span>
<span class="font-medium text-guild-100">Ticketing On</span>
</div>
<div
v-if="event.tickets?.requiresSeriesTicket"
class="text-xs text-purple-600"
class="text-xs text-earth-400"
>
Series Pass Required
</div>
<div v-else class="space-y-0.5">
<div
v-if="event.tickets.member?.available"
class="text-xs text-dimmed"
class="text-xs text-guild-500"
>
Member:
{{
@ -294,7 +294,7 @@
</div>
<div
v-if="event.tickets.public?.available"
class="text-xs text-dimmed"
class="text-xs text-guild-500"
>
Public: ${{ event.tickets.public.price || 0 }}
<span v-if="event.tickets.public.quantity" class="ml-1">
@ -305,7 +305,7 @@
</div>
</div>
</div>
<div v-else class="text-xs text-dimmed">No tickets</div>
<div v-else class="text-xs text-guild-500">No tickets</div>
</div>
</td>
@ -314,28 +314,28 @@
<div class="flex items-center justify-end space-x-2">
<NuxtLink
:to="`/events/${event.slug || String(event._id)}`"
class="p-2 text-dimmed hover:text-default hover:bg-accented rounded-full transition-colors"
class="p-2 text-guild-500 hover:text-guild-100 hover:bg-guild-800 rounded-full transition-colors"
title="View Event"
>
<Icon name="heroicons:eye" class="w-4 h-4" />
</NuxtLink>
<button
@click="editEvent(event)"
class="p-2 text-primary hover:text-primary hover:bg-primary/10 rounded-full transition-colors"
class="p-2 text-candlelight-400 hover:text-candlelight-300 hover:bg-candlelight-900/20 rounded-full transition-colors"
title="Edit Event"
>
<Icon name="heroicons:pencil-square" class="w-4 h-4" />
</button>
<button
@click="duplicateEvent(event)"
class="p-2 text-primary hover:text-primary hover:bg-primary/10 rounded-full transition-colors"
class="p-2 text-candlelight-400 hover:text-candlelight-300 hover:bg-candlelight-900/20 rounded-full transition-colors"
title="Duplicate Event"
>
<Icon name="heroicons:document-duplicate" class="w-4 h-4" />
</button>
<button
@click="deleteEvent(event)"
class="p-2 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-full transition-colors"
class="p-2 text-ember-400 hover:text-ember-300 hover:bg-ember-900/20 rounded-full transition-colors"
title="Delete Event"
>
<Icon name="heroicons:trash" class="w-4 h-4" />
@ -348,7 +348,7 @@
<div
v-if="!pending && !error && filteredEvents.length === 0"
class="p-8 text-center text-dimmed"
class="p-8 text-center text-guild-500"
>
No events found matching your criteria
</div>
@ -402,12 +402,12 @@ const filteredEvents = computed(() => {
const getEventTypeClasses = (type) => {
const classes = {
community: "bg-blue-100 text-blue-800",
workshop: "bg-green-100 text-green-800",
social: "bg-purple-100 text-purple-800",
showcase: "bg-orange-100 text-orange-800",
community: "bg-candlelight-900/20 text-candlelight-400",
workshop: "bg-candlelight-900/20 text-candlelight-400",
social: "bg-earth-900/20 text-earth-400",
showcase: "bg-ember-900/20 text-ember-400",
};
return classes[type] || "bg-gray-100 text-gray-800";
return classes[type] || "bg-guild-800 text-guild-300";
};
const getEventStatus = (event) => {
@ -423,11 +423,11 @@ const getEventStatus = (event) => {
const getStatusClasses = (event) => {
const status = getEventStatus(event);
const classes = {
Upcoming: "bg-blue-100 text-blue-800",
Ongoing: "bg-green-100 text-green-800",
Past: "bg-gray-100 text-gray-800",
Upcoming: "bg-candlelight-900/20 text-candlelight-400",
Ongoing: "bg-candlelight-900/20 text-candlelight-400",
Past: "bg-guild-800 text-guild-300",
};
return classes[status] || "bg-gray-100 text-gray-800";
return classes[status] || "bg-guild-800 text-guild-300";
};
const formatDateTime = (dateString) => {