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

306
app/pages/admin/series-management.vue
View file

@ -1,10 +1,10 @@
<template>
<div>
<div class="bg-elevated border-b border-default">
<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">Series Management</h1>
<p class="text-muted">Manage event series and their relationships</p>
<h1 class="text-display font-bold text-guild-100">Series Management</h1>
<p class="text-guild-400">Manage event series and their relationships</p>
</div>
</div>
</div>
@ -13,49 +13,49 @@
<!-- Series Overview -->
<div class="mb-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-elevated rounded-lg shadow p-6">
<div class="bg-guild-900 rounded-lg shadow p-6">
<div class="flex items-center">
<div class="p-3 bg-purple-100 rounded-full">
<div class="p-3 bg-earth-900/20 rounded-full">
<Icon
name="heroicons:squares-2x2"
class="w-6 h-6 text-purple-600"
class="w-6 h-6 text-earth-400"
/>
</div>
<div class="ml-4">
<p class="text-sm text-dimmed">Active Series</p>
<p class="text-2xl font-semibold text-highlighted">
<p class="text-sm text-guild-500">Active Series</p>
<p class="text-2xl font-semibold text-guild-100 text-ui-mono">
{{ activeSeries.length }}
</p>
</div>
</div>
</div>
<div class="bg-elevated rounded-lg shadow p-6">
<div class="bg-guild-900 rounded-lg shadow p-6">
<div class="flex items-center">
<div class="p-3 bg-blue-100 rounded-full">
<div class="p-3 bg-candlelight-900/20 rounded-full">
<Icon
name="heroicons:calendar-days"
class="w-6 h-6 text-blue-600"
class="w-6 h-6 text-candlelight-400"
/>
</div>
<div class="ml-4">
<p class="text-sm text-dimmed">Total Series Events</p>
<p class="text-2xl font-semibold text-highlighted">
<p class="text-sm text-guild-500">Total Series Events</p>
<p class="text-2xl font-semibold text-guild-100 text-ui-mono">
{{ totalSeriesEvents }}
</p>
</div>
</div>
</div>
<div class="bg-elevated rounded-lg shadow p-6">
<div class="bg-guild-900 rounded-lg shadow p-6">
<div class="flex items-center">
<div class="p-3 bg-green-100 rounded-full">
<div class="p-3 bg-candlelight-900/20 rounded-full">
<Icon
name="heroicons:chart-bar"
class="w-6 h-6 text-green-600"
class="w-6 h-6 text-candlelight-400"
/>
</div>
<div class="ml-4">
<p class="text-sm text-dimmed">Avg Events/Series</p>
<p class="text-2xl font-semibold text-highlighted">
<p class="text-sm text-guild-500">Avg Events/Series</p>
<p class="text-2xl font-semibold text-guild-100 text-ui-mono">
{{
activeSeries.length > 0
? Math.round(totalSeriesEvents / activeSeries.length)
@ -74,11 +74,11 @@
<input
v-model="searchQuery"
placeholder="Search series..."
class="border border-default bg-elevated text-default placeholder-dimmed rounded-lg px-4 py-2 w-80 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
class="border border-guild-700 bg-guild-900 text-guild-100 placeholder-guild-500 rounded-lg px-4 py-2 w-80 focus:ring-2 focus:ring-earth-500 focus:border-transparent"
/>
<select
v-model="statusFilter"
class="border border-default bg-elevated text-default rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
class="border border-guild-700 bg-guild-900 text-guild-100 rounded-lg px-4 py-2 focus:ring-2 focus:ring-earth-500 focus:border-transparent"
>
<option value="">All Status</option>
<option value="active">Active</option>
@ -89,14 +89,14 @@
<div class="flex gap-3">
<button
@click="showBulkModal = true"
class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 inline-flex items-center"
class="bg-guild-600 text-white px-4 py-2 rounded-lg hover:bg-guild-700 inline-flex items-center"
>
<Icon name="heroicons:cog-6-tooth" class="w-4 h-4 mr-2" />
Bulk Operations
</button>
<NuxtLink
to="/admin/series/create"
class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 inline-flex items-center"
class="bg-earth-600 text-white px-4 py-2 rounded-lg hover:bg-earth-700 inline-flex items-center"
>
<Icon name="heroicons:plus" class="w-4 h-4 mr-2" />
Create Series
@ -107,19 +107,19 @@
<!-- Series List -->
<div v-if="pending" class="text-center py-12">
<div
class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-500 mx-auto mb-4"
class="animate-spin rounded-full h-8 w-8 border-b-2 border-earth-500 mx-auto mb-4"
></div>
<p class="text-muted">Loading series...</p>
<p class="text-guild-400">Loading series...</p>
</div>
<div v-else-if="filteredSeries.length > 0" class="space-y-6">
<div
v-for="series in filteredSeries"
:key="series.id"
class="bg-elevated rounded-lg shadow overflow-hidden"
class="bg-guild-900 rounded-lg shadow overflow-hidden"
>
<!-- Series Header -->
<div class="px-6 py-4 bg-muted border-b border-default">
<div class="px-6 py-4 bg-guild-950 border-b border-guild-700">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<div
@ -131,10 +131,10 @@
{{ formatSeriesType(series.type) }}
</div>
<div>
<h3 class="text-lg font-semibold text-highlighted">
<h3 class="text-display-sm font-semibold text-guild-100">
{{ series.title }}
</h3>
<p class="text-sm text-muted">{{ series.description }}</p>
<p class="text-sm text-guild-400">{{ series.description }}</p>
</div>
</div>
<div class="flex items-center gap-3">
@ -142,15 +142,15 @@
:class="[
'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium',
series.status === 'active'
? 'bg-green-100 text-green-700'
? 'bg-candlelight-900/20 text-candlelight-400'
: series.status === 'upcoming'
? 'bg-blue-100 text-blue-700'
: 'bg-accented text-default',
? 'bg-earth-900/20 text-earth-400'
: 'bg-guild-800 text-guild-300',
]"
>
{{ series.status }}
</span>
<span class="text-sm text-dimmed">
<span class="text-sm text-guild-500">
{{ series.eventCount }} events
</span>
</div>
@ -158,24 +158,24 @@
</div>
<!-- Series Events -->
<div class="divide-y divide-default">
<div class="divide-y divide-guild-700">
<div
v-for="event in series.events"
:key="event.id"
class="px-6 py-4 hover:bg-muted"
class="px-6 py-4 hover:bg-guild-800"
>
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<div
class="w-8 h-8 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center text-sm font-semibold"
class="w-8 h-8 bg-earth-800 text-earth-400 rounded-full flex items-center justify-center text-sm font-semibold"
>
{{ event.series?.position || "?" }}
</div>
<div>
<h4 class="text-sm font-medium text-highlighted">
<h4 class="text-sm font-medium text-guild-100">
{{ event.title }}
</h4>
<p class="text-xs text-dimmed">
<p class="text-xs text-guild-500">
{{ formatEventDate(event.startDate) }}
</p>
</div>
@ -192,21 +192,21 @@
<div class="flex gap-1">
<NuxtLink
:to="`/events/${event.slug || event.id}`"
class="p-1 text-muted hover:text-default rounded"
class="p-1 text-guild-500 hover:text-guild-100 rounded"
title="View Event"
>
<Icon name="heroicons:eye" class="w-4 h-4" />
</NuxtLink>
<button
@click="editEvent(event)"
class="p-1 text-muted hover:text-primary rounded"
class="p-1 text-candlelight-400 hover:text-candlelight-300 rounded"
title="Edit Event"
>
<Icon name="heroicons:pencil-square" class="w-4 h-4" />
</button>
<button
@click="removeFromSeries(event)"
class="p-1 text-muted hover:text-red-600 rounded"
class="p-1 text-ember-400 hover:text-ember-300 rounded"
title="Remove from Series"
>
<Icon name="heroicons:x-mark" class="w-4 h-4" />
@ -220,16 +220,16 @@
<!-- Series Ticketing Info -->
<div
v-if="series.tickets?.enabled"
class="px-6 py-3 bg-blue-50 dark:bg-blue-950/20 border-t border-default"
class="px-6 py-3 bg-candlelight-900/20 border-t border-guild-700"
>
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<Icon name="heroicons:ticket" class="w-5 h-5 text-blue-600" />
<Icon name="heroicons:ticket" class="w-5 h-5 text-candlelight-400" />
<div>
<span class="text-sm font-medium text-default">
<span class="text-sm font-medium text-guild-100">
Series Pass Ticketing Enabled
</span>
<p class="text-xs text-dimmed">
<p class="text-xs text-guild-500">
<span v-if="series.tickets.public?.available">
Public: ${{ series.tickets.public.price || 0 }}
</span>
@ -246,7 +246,7 @@
</div>
<button
@click="manageSeriesTickets(series)"
class="text-sm text-blue-600 hover:text-blue-700 font-medium"
class="text-sm text-candlelight-400 hover:text-candlelight-300 font-medium"
>
Manage Tickets
</button>
@ -254,39 +254,39 @@
</div>
<!-- Series Actions -->
<div class="px-6 py-3 bg-muted border-t border-default">
<div class="px-6 py-3 bg-guild-950 border-t border-guild-700">
<div class="flex justify-between items-center">
<div class="text-sm text-dimmed">
<div class="text-sm text-guild-500">
{{ formatDateRange(series.startDate, series.endDate) }}
</div>
<div class="flex gap-2">
<button
@click="manageSeriesTickets(series)"
class="text-sm text-primary hover:text-primary font-medium"
class="text-sm text-candlelight-400 hover:text-candlelight-300 font-medium"
>
Ticketing
</button>
<button
@click="editSeries(series)"
class="text-sm text-primary hover:text-primary font-medium"
class="text-sm text-candlelight-400 hover:text-candlelight-300 font-medium"
>
Edit Series
</button>
<button
@click="addEventToSeries(series)"
class="text-sm text-primary hover:text-primary font-medium"
class="text-sm text-candlelight-400 hover:text-candlelight-300 font-medium"
>
Add Event
</button>
<button
@click="duplicateSeries(series)"
class="text-sm text-primary hover:text-primary font-medium"
class="text-sm text-candlelight-400 hover:text-candlelight-300 font-medium"
>
Duplicate Series
</button>
<button
@click="deleteSeries(series)"
class="text-sm text-red-600 hover:text-red-700 font-medium"
class="text-sm text-ember-400 hover:text-ember-300 font-medium"
>
Delete Series
</button>
@ -296,13 +296,13 @@
</div>
</div>
<div v-else class="text-center py-12 bg-elevated rounded-lg shadow">
<div v-else class="text-center py-12 bg-guild-900 rounded-lg shadow">
<Icon
name="heroicons:squares-2x2"
class="w-12 h-12 text-muted mx-auto mb-3"
class="w-12 h-12 text-guild-400 mx-auto mb-3"
/>
<p class="text-muted">No event series found</p>
<p class="text-sm text-dimmed mt-2">
<p class="text-guild-400">No event series found</p>
<p class="text-sm text-guild-500 mt-2">
Create events and group them into series to get started
</p>
</div>
@ -311,17 +311,17 @@
<!-- Edit Series Modal -->
<div
v-if="editingSeriesId"
class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center p-4 z-50"
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
>
<div
class="bg-elevated rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
class="bg-guild-900 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
>
<div class="px-6 py-4 border-b border-default">
<div class="px-6 py-4 border-b border-guild-700">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-highlighted">Edit Series</h3>
<h3 class="text-display-sm font-semibold text-guild-100">Edit Series</h3>
<button
@click="cancelEditSeries"
class="text-muted hover:text-default"
class="text-guild-400 hover:text-guild-100"
>
<Icon name="heroicons:x-mark" class="w-5 h-5" />
</button>
@ -330,31 +330,31 @@
<div class="p-6 space-y-6">
<div>
<label class="block text-sm font-medium text-default mb-2"
<label class="block text-sm font-medium text-guild-100 mb-2"
>Series Title</label
>
<input
v-model="editingSeriesData.title"
type="text"
class="w-full border border-default bg-elevated text-default placeholder-dimmed rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
class="w-full border border-guild-700 bg-guild-900 text-guild-100 placeholder-guild-500 rounded-lg px-4 py-2 focus:ring-2 focus:ring-earth-500 focus:border-transparent"
placeholder="e.g., Co-op Game Dev Workshop Series"
/>
</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"
>Description</label
>
<textarea
v-model="editingSeriesData.description"
rows="3"
class="w-full border border-default bg-elevated text-default placeholder-dimmed rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
class="w-full border border-guild-700 bg-guild-900 text-guild-100 placeholder-guild-500 rounded-lg px-4 py-2 focus:ring-2 focus:ring-earth-500 focus:border-transparent"
placeholder="Brief description of this series"
/>
</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"
>Series Type</label
>
<USelect
@ -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"
>Total Events (optional)</label
>
<UInput
@ -383,16 +383,16 @@
</div>
</div>
<div class="px-6 py-4 border-t border-default flex justify-end gap-3">
<div class="px-6 py-4 border-t border-guild-700 flex justify-end gap-3">
<button
@click="cancelEditSeries"
class="px-4 py-2 text-muted hover:text-default"
class="px-4 py-2 text-guild-400 hover:text-guild-100"
>
Cancel
</button>
<button
@click="saveSeriesEdit"
class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
class="px-4 py-2 bg-earth-600 text-white rounded-lg hover:bg-earth-700"
>
Save Changes
</button>
@ -403,19 +403,19 @@
<!-- Bulk Operations Modal -->
<div
v-if="showBulkModal"
class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center p-4 z-50"
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
>
<div
class="bg-elevated rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
class="bg-guild-900 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
>
<div class="px-6 py-4 border-b border-default">
<div class="px-6 py-4 border-b border-guild-700">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-highlighted">
<h3 class="text-display-sm font-semibold text-guild-100">
Bulk Series Operations
</h3>
<button
@click="showBulkModal = false"
class="text-muted hover:text-default"
class="text-guild-400 hover:text-guild-100"
>
<Icon name="heroicons:x-mark" class="w-5 h-5" />
</button>
@ -424,24 +424,24 @@
<div class="p-6 space-y-6">
<div>
<h4 class="text-sm font-medium text-highlighted mb-3">
<h4 class="text-sm font-medium text-guild-100 mb-3">
Series Management Tools
</h4>
<div class="space-y-3">
<button
@click="reorderAllSeries"
class="w-full text-left p-3 border border-default rounded-lg hover:bg-muted"
class="w-full text-left p-3 border border-guild-700 rounded-lg hover:bg-guild-800"
>
<div class="flex items-center">
<Icon
name="heroicons:arrows-up-down"
class="w-5 h-5 text-muted mr-3"
class="w-5 h-5 text-guild-400 mr-3"
/>
<div>
<p class="text-sm font-medium text-highlighted">
<p class="text-sm font-medium text-guild-100">
Auto-Reorder Series
</p>
<p class="text-xs text-dimmed">
<p class="text-xs text-guild-500">
Fix position numbers based on event dates
</p>
</div>
@ -450,18 +450,18 @@
<button
@click="validateAllSeries"
class="w-full text-left p-3 border border-default rounded-lg hover:bg-muted"
class="w-full text-left p-3 border border-guild-700 rounded-lg hover:bg-guild-800"
>
<div class="flex items-center">
<Icon
name="heroicons:check-circle"
class="w-5 h-5 text-muted mr-3"
class="w-5 h-5 text-guild-400 mr-3"
/>
<div>
<p class="text-sm font-medium text-highlighted">
<p class="text-sm font-medium text-guild-100">
Validate Series Data
</p>
<p class="text-xs text-dimmed">
<p class="text-xs text-guild-500">
Check for consistency issues
</p>
</div>
@ -470,18 +470,18 @@
<button
@click="exportSeriesData"
class="w-full text-left p-3 border border-default rounded-lg hover:bg-muted"
class="w-full text-left p-3 border border-guild-700 rounded-lg hover:bg-guild-800"
>
<div class="flex items-center">
<Icon
name="heroicons:document-arrow-down"
class="w-5 h-5 text-muted mr-3"
class="w-5 h-5 text-guild-400 mr-3"
/>
<div>
<p class="text-sm font-medium text-highlighted">
<p class="text-sm font-medium text-guild-100">
Export Series Data
</p>
<p class="text-xs text-dimmed">
<p class="text-xs text-guild-500">
Download series information as JSON
</p>
</div>
@ -491,10 +491,10 @@
</div>
</div>
<div class="px-6 py-4 border-t border-default flex justify-end">
<div class="px-6 py-4 border-t border-guild-700 flex justify-end">
<button
@click="showBulkModal = false"
class="px-4 py-2 text-muted hover:text-default"
class="px-4 py-2 text-guild-400 hover:text-guild-100"
>
Close
</button>
@ -505,22 +505,22 @@
<!-- Series Ticketing Modal -->
<div
v-if="editingTicketsSeriesId"
class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center p-4 z-50"
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
>
<div
class="bg-elevated rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto"
class="bg-guild-900 rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto"
>
<div class="px-6 py-4 border-b border-default">
<div class="px-6 py-4 border-b border-guild-700">
<div class="flex items-center justify-between">
<div>
<h3 class="text-lg font-semibold text-highlighted">
<h3 class="text-display-sm font-semibold text-guild-100">
Series Pass Ticketing
</h3>
<p class="text-sm text-muted">{{ editingTicketsData.title }}</p>
<p class="text-sm text-guild-400">{{ editingTicketsData.title }}</p>
</div>
<button
@click="cancelTicketsEdit"
class="text-muted hover:text-default"
class="text-guild-400 hover:text-guild-100"
>
<Icon name="heroicons:x-mark" class="w-5 h-5" />
</button>
@ -529,18 +529,18 @@
<div class="p-6 space-y-6">
<!-- Enable Ticketing Toggle -->
<div class="p-4 bg-muted rounded-lg">
<div class="p-4 bg-guild-950 rounded-lg">
<label class="flex items-start cursor-pointer">
<input
v-model="editingTicketsData.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 Series Pass Ticketing</span
>
<p class="text-xs text-dimmed">
<p class="text-xs text-guild-500">
Allow users to purchase a pass for all events in this series
</p>
</div>
@ -550,7 +550,7 @@
<div v-if="editingTicketsData.tickets.enabled" class="space-y-6">
<!-- Ticketing Behavior -->
<div class="space-y-4">
<h4 class="text-sm font-semibold text-highlighted">
<h4 class="text-sm font-semibold text-guild-100">
Ticketing Behavior
</h4>
@ -558,13 +558,13 @@
<input
v-model="editingTicketsData.tickets.requiresSeriesTicket"
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"
>Require Series Pass</span
>
<p class="text-xs text-dimmed">
<p class="text-xs text-guild-500">
Users must buy the series pass; individual event tickets are
not available
</p>
@ -577,14 +577,14 @@
editingTicketsData.tickets.allowIndividualEventTickets
"
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"
:disabled="editingTicketsData.tickets.requiresSeriesTicket"
/>
<div class="ml-3">
<span class="text-sm font-medium text-default"
<span class="text-sm font-medium text-guild-100"
>Allow Individual Event Tickets</span
>
<p class="text-xs text-dimmed">
<p class="text-xs text-guild-500">
Users can attend single events without buying the full
series pass
</p>
@ -593,17 +593,17 @@
</div>
<!-- Member Tickets -->
<div class="border border-default rounded-lg p-4">
<div class="border border-guild-700 rounded-lg p-4">
<div class="flex items-center justify-between mb-4">
<h4 class="text-sm font-semibold text-highlighted">
<h4 class="text-sm font-semibold text-guild-100">
Member Series Pass
</h4>
<label class="flex items-center cursor-pointer">
<span class="text-xs text-muted mr-2">Available</span>
<span class="text-xs text-guild-400 mr-2">Available</span>
<input
v-model="editingTicketsData.tickets.member.available"
type="checkbox"
class="rounded border-default text-blue-600 focus:ring-blue-500"
class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500"
/>
</label>
</div>
@ -614,7 +614,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"
>Pass Name</label
>
<UInput
@ -625,7 +625,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
>
<div class="flex items-center gap-2">
@ -644,16 +644,16 @@
<input
v-model="editingTicketsData.tickets.member.isFree"
type="checkbox"
class="rounded border-default text-blue-600 focus:ring-blue-500"
class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500"
/>
<span class="ml-1 text-xs text-muted">Free</span>
<span class="ml-1 text-xs text-guild-400">Free</span>
</label>
</div>
</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"
>Description</label
>
<UTextarea
@ -667,17 +667,17 @@
</div>
<!-- Public Tickets -->
<div class="border border-default rounded-lg p-4">
<div class="border border-guild-700 rounded-lg p-4">
<div class="flex items-center justify-between mb-4">
<h4 class="text-sm font-semibold text-highlighted">
<h4 class="text-sm font-semibold text-guild-100">
Public Series Pass
</h4>
<label class="flex items-center cursor-pointer">
<span class="text-xs text-muted mr-2">Available</span>
<span class="text-xs text-guild-400 mr-2">Available</span>
<input
v-model="editingTicketsData.tickets.public.available"
type="checkbox"
class="rounded border-default text-blue-600 focus:ring-blue-500"
class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500"
/>
</label>
</div>
@ -688,7 +688,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"
>Pass Name</label
>
<UInput
@ -699,7 +699,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
@ -714,7 +714,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"
>Description</label
>
<UTextarea
@ -727,7 +727,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
@ -739,7 +739,7 @@
placeholder="Leave blank for unlimited"
class="w-full"
/>
<p class="text-xs text-dimmed mt-1">
<p class="text-xs text-guild-500 mt-1">
{{ editingTicketsData.tickets.public.sold || 0 }} sold,
{{ editingTicketsData.tickets.public.reserved || 0 }}
reserved
@ -747,7 +747,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
@ -766,7 +766,7 @@
<div
v-if="editingTicketsData.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
>
<UInput
@ -776,7 +776,7 @@
type="datetime-local"
class="w-full"
/>
<p class="text-xs text-dimmed mt-1">
<p class="text-xs text-guild-500 mt-1">
Price increases to ${{
editingTicketsData.tickets.public.price
}}
@ -787,14 +787,14 @@
</div>
<!-- Capacity Management -->
<div class="border border-default rounded-lg p-4">
<h4 class="text-sm font-semibold text-highlighted mb-4">
<div class="border border-guild-700 rounded-lg p-4">
<h4 class="text-sm font-semibold text-guild-100 mb-4">
Capacity Management
</h4>
<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"
>Total Capacity</label
>
<UInput
@ -804,13 +804,13 @@
placeholder="Leave blank for unlimited"
class="w-full"
/>
<p class="text-xs text-dimmed mt-1">
<p class="text-xs text-guild-500 mt-1">
Maximum series pass holders across all types
</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"
>Currently Reserved</label
>
<UInput
@ -820,9 +820,9 @@
type="number"
min="0"
disabled
class="w-full bg-accented"
class="w-full bg-guild-800"
/>
<p class="text-xs text-dimmed mt-1">
<p class="text-xs text-guild-500 mt-1">
Auto-calculated during checkout
</p>
</div>
@ -830,21 +830,21 @@
</div>
<!-- Waitlist Configuration -->
<div class="border border-default rounded-lg p-4">
<div class="border border-guild-700 rounded-lg p-4">
<div class="flex items-center justify-between mb-4">
<h4 class="text-sm font-semibold text-highlighted">Waitlist</h4>
<h4 class="text-sm font-semibold text-guild-100">Waitlist</h4>
<label class="flex items-center cursor-pointer">
<span class="text-xs text-muted mr-2">Enable Waitlist</span>
<span class="text-xs text-guild-400 mr-2">Enable Waitlist</span>
<input
v-model="editingTicketsData.tickets.waitlist.enabled"
type="checkbox"
class="rounded border-default text-blue-600 focus:ring-blue-500"
class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500"
/>
</label>
</div>
<div v-if="editingTicketsData.tickets.waitlist.enabled">
<label class="block text-sm font-medium text-default mb-2"
<label class="block text-sm font-medium text-guild-100 mb-2"
>Max Waitlist Size</label
>
<UInput
@ -854,7 +854,7 @@
placeholder="Leave blank for unlimited"
class="w-full"
/>
<p class="text-xs text-dimmed mt-1">
<p class="text-xs text-guild-500 mt-1">
{{ editingTicketsData.tickets.waitlist.entries?.length || 0 }}
people currently on waitlist
</p>
@ -863,16 +863,16 @@
</div>
</div>
<div class="px-6 py-4 border-t border-default flex justify-end gap-3">
<div class="px-6 py-4 border-t border-guild-700 flex justify-end gap-3">
<button
@click="cancelTicketsEdit"
class="px-4 py-2 text-muted hover:text-default"
class="px-4 py-2 text-guild-400 hover:text-guild-100"
>
Cancel
</button>
<button
@click="saveTicketsEdit"
class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
class="px-4 py-2 bg-candlelight-600 text-white rounded-lg hover:bg-candlelight-700"
>
Save Ticketing Settings
</button>
@ -986,12 +986,12 @@ const formatSeriesType = (type) => {
const getSeriesTypeBadgeClass = (type) => {
const classes = {
workshop_series: "bg-emerald-100 text-emerald-700",
recurring_meetup: "bg-blue-100 text-blue-700",
multi_day: "bg-purple-100 text-purple-700",
course: "bg-amber-100 text-amber-700",
workshop_series: "bg-candlelight-900/20 text-candlelight-400",
recurring_meetup: "bg-candlelight-900/20 text-candlelight-400",
multi_day: "bg-earth-900/20 text-earth-400",
course: "bg-candlelight-900/20 text-candlelight-400",
};
return classes[type] || "bg-gray-100 text-gray-700";
return classes[type] || "bg-guild-800 text-guild-300";
};
const formatEventDate = (date) => {
@ -1029,11 +1029,11 @@ const getEventStatus = (event) => {
const getEventStatusClass = (event) => {
const status = getEventStatus(event);
const classes = {
Upcoming: "bg-blue-100 text-blue-700",
Ongoing: "bg-green-100 text-green-700",
Completed: "bg-gray-100 text-gray-700",
Upcoming: "bg-candlelight-900/20 text-candlelight-400",
Ongoing: "bg-candlelight-900/20 text-candlelight-400",
Completed: "bg-guild-800 text-guild-300",
};
return classes[status] || "bg-gray-100 text-gray-700";
return classes[status] || "bg-guild-800 text-guild-300";
};
// Actions