chore: remove working copies and superseded verify.get.js
This commit is contained in:
parent
e81000b5a6
commit
ee438f5c60
6 changed files with 0 additions and 1198 deletions
|
|
@ -1,542 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<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-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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Search and Actions -->
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<div class="flex gap-4 items-center">
|
||||
<UInput
|
||||
v-model="searchQuery"
|
||||
placeholder="Search events..."
|
||||
class="w-80"
|
||||
/>
|
||||
<USelect
|
||||
v-model="typeFilter"
|
||||
:items="[
|
||||
{ label: 'All Types', value: '' },
|
||||
{ label: 'Community', value: 'community' },
|
||||
{ label: 'Workshop', value: 'workshop' },
|
||||
{ label: 'Social', value: 'social' },
|
||||
{ label: 'Showcase', value: 'showcase' },
|
||||
]"
|
||||
class="w-full"
|
||||
/>
|
||||
<USelect
|
||||
v-model="statusFilter"
|
||||
:items="[
|
||||
{ label: 'All Status', value: '' },
|
||||
{ label: 'Upcoming', value: 'upcoming' },
|
||||
{ label: 'Ongoing', value: 'ongoing' },
|
||||
{ label: 'Past', value: 'past' },
|
||||
]"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
@click="showCreateModal = true"
|
||||
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"
|
||||
>
|
||||
Create Event
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Events Table -->
|
||||
<div class="bg-guild-900 rounded-lg shadow overflow-hidden">
|
||||
<div v-if="pending" class="p-8 text-center">
|
||||
<div class="inline-flex items-center">
|
||||
<div
|
||||
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-ember-400">
|
||||
Error loading events: {{ error }}
|
||||
</div>
|
||||
|
||||
<table v-else class="w-full">
|
||||
<thead class="bg-guild-950">
|
||||
<tr>
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Title
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Type
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Start Date
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Registration
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-guild-900 divide-y divide-guild-700">
|
||||
<tr
|
||||
v-for="event in filteredEvents"
|
||||
:key="event._id"
|
||||
class="hover:bg-guild-800"
|
||||
>
|
||||
<td class="px-6 py-4">
|
||||
<div class="text-sm font-medium text-guild-100">
|
||||
{{ event.title }}
|
||||
</div>
|
||||
<div class="text-sm text-guild-500">
|
||||
{{ event.description.substring(0, 100) }}...
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
:class="getEventTypeClasses(event.eventType)"
|
||||
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
|
||||
>
|
||||
{{ event.eventType }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-guild-400">
|
||||
{{ formatDateTime(event.startDate) }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
:class="getStatusClasses(event)"
|
||||
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
|
||||
>
|
||||
{{ getEventStatus(event) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
:class="
|
||||
event.registrationRequired
|
||||
? 'bg-candlelight-900/20 text-candlelight-400'
|
||||
: 'bg-guild-800 text-guild-300'
|
||||
"
|
||||
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
|
||||
>
|
||||
{{ event.registrationRequired ? "Required" : "Open" }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-guild-100">
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
@click="editEvent(event)"
|
||||
class="text-candlelight-400 hover:text-candlelight-300"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
@click="duplicateEvent(event)"
|
||||
class="text-candlelight-400 hover:text-candlelight-300"
|
||||
>
|
||||
Duplicate
|
||||
</button>
|
||||
<button
|
||||
@click="deleteEvent(event)"
|
||||
class="text-ember-400 hover:text-ember-300"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div
|
||||
v-if="!pending && !error && filteredEvents.length === 0"
|
||||
class="p-8 text-center text-guild-500"
|
||||
>
|
||||
No events found matching your criteria
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create/Edit Event Modal -->
|
||||
<div
|
||||
v-if="showCreateModal"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 overflow-y-auto"
|
||||
>
|
||||
<div class="bg-guild-900 rounded-lg shadow-xl max-w-2xl w-full mx-4 my-8">
|
||||
<div class="px-6 py-4 border-b border-guild-700">
|
||||
<h3 class="text-display-sm font-semibold text-guild-100">
|
||||
{{ editingEvent ? "Edit Event" : "Create New Event" }}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="saveEvent" class="p-6 space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="md:col-span-2">
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Event Title</label
|
||||
>
|
||||
<UInput
|
||||
v-model="eventForm.title"
|
||||
placeholder="Enter event title"
|
||||
required
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Event Type</label
|
||||
>
|
||||
<USelect
|
||||
v-model="eventForm.eventType"
|
||||
:items="[
|
||||
{ label: 'Community Meetup', value: 'community' },
|
||||
{ label: 'Workshop', value: 'workshop' },
|
||||
{ label: 'Social Event', value: 'social' },
|
||||
{ label: 'Showcase', value: 'showcase' },
|
||||
]"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Location</label
|
||||
>
|
||||
<UInput
|
||||
v-model="eventForm.location"
|
||||
placeholder="Event location"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Start Date & Time</label
|
||||
>
|
||||
<UInput
|
||||
v-model="eventForm.startDate"
|
||||
type="datetime-local"
|
||||
required
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>End Date & Time</label
|
||||
>
|
||||
<UInput
|
||||
v-model="eventForm.endDate"
|
||||
type="datetime-local"
|
||||
required
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Max Attendees</label
|
||||
>
|
||||
<UInput
|
||||
v-model="eventForm.maxAttendees"
|
||||
type="number"
|
||||
placeholder="Optional"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Registration Deadline</label
|
||||
>
|
||||
<UInput
|
||||
v-model="eventForm.registrationDeadline"
|
||||
type="datetime-local"
|
||||
placeholder="Optional"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Description</label
|
||||
>
|
||||
<UTextarea
|
||||
v-model="eventForm.description"
|
||||
placeholder="Event description"
|
||||
required
|
||||
:rows="3"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Additional Content</label
|
||||
>
|
||||
<UTextarea
|
||||
v-model="eventForm.content"
|
||||
placeholder="Detailed event information, agenda, etc."
|
||||
:rows="4"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-6">
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
v-model="eventForm.isOnline"
|
||||
type="checkbox"
|
||||
class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500"
|
||||
/>
|
||||
<span class="ml-2 text-sm text-guild-100">Online Event</span>
|
||||
</label>
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
v-model="eventForm.registrationRequired"
|
||||
type="checkbox"
|
||||
class="rounded border-guild-700 text-candlelight-500 focus:ring-candlelight-500"
|
||||
/>
|
||||
<span class="ml-2 text-sm text-guild-100"
|
||||
>Registration Required</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
@click="cancelEdit"
|
||||
class="px-4 py-2 text-guild-400 hover:text-guild-100 font-medium"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="creating"
|
||||
class="bg-candlelight-600 text-white px-4 py-2 rounded-lg hover:bg-candlelight-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{{
|
||||
creating
|
||||
? "Saving..."
|
||||
: editingEvent
|
||||
? "Update Event"
|
||||
: "Create Event"
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
const {
|
||||
data: events,
|
||||
pending,
|
||||
error,
|
||||
refresh,
|
||||
} = await useFetch("/api/admin/events");
|
||||
|
||||
const searchQuery = ref("");
|
||||
const typeFilter = ref("");
|
||||
const statusFilter = ref("");
|
||||
const showCreateModal = ref(false);
|
||||
const creating = ref(false);
|
||||
const editingEvent = ref(null);
|
||||
|
||||
const eventForm = reactive({
|
||||
title: "",
|
||||
description: "",
|
||||
content: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
eventType: "community",
|
||||
location: "",
|
||||
isOnline: false,
|
||||
maxAttendees: "",
|
||||
registrationRequired: false,
|
||||
registrationDeadline: "",
|
||||
});
|
||||
|
||||
const filteredEvents = computed(() => {
|
||||
if (!events.value) return [];
|
||||
|
||||
return events.value.filter((event) => {
|
||||
const matchesSearch =
|
||||
!searchQuery.value ||
|
||||
event.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
||||
event.description.toLowerCase().includes(searchQuery.value.toLowerCase());
|
||||
|
||||
const matchesType =
|
||||
!typeFilter.value || event.eventType === typeFilter.value;
|
||||
|
||||
const eventStatus = getEventStatus(event);
|
||||
const matchesStatus =
|
||||
!statusFilter.value || eventStatus.toLowerCase() === statusFilter.value;
|
||||
|
||||
return matchesSearch && matchesType && matchesStatus;
|
||||
});
|
||||
});
|
||||
|
||||
const getEventTypeClasses = (type) => {
|
||||
const classes = {
|
||||
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-guild-800 text-guild-300";
|
||||
};
|
||||
|
||||
const getEventStatus = (event) => {
|
||||
const now = new Date();
|
||||
const startDate = new Date(event.startDate);
|
||||
const endDate = new Date(event.endDate);
|
||||
|
||||
if (now < startDate) return "Upcoming";
|
||||
if (now >= startDate && now <= endDate) return "Ongoing";
|
||||
return "Past";
|
||||
};
|
||||
|
||||
const getStatusClasses = (event) => {
|
||||
const status = getEventStatus(event);
|
||||
const classes = {
|
||||
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-guild-800 text-guild-300";
|
||||
};
|
||||
|
||||
const formatDateTime = (dateString) => {
|
||||
return new Date(dateString).toLocaleString();
|
||||
};
|
||||
|
||||
const saveEvent = async () => {
|
||||
creating.value = true;
|
||||
try {
|
||||
if (editingEvent.value) {
|
||||
await $fetch(`/api/admin/events/${editingEvent.value._id}`, {
|
||||
method: "PUT",
|
||||
body: eventForm,
|
||||
});
|
||||
} else {
|
||||
await $fetch("/api/admin/events", {
|
||||
method: "POST",
|
||||
body: eventForm,
|
||||
});
|
||||
}
|
||||
|
||||
cancelEdit();
|
||||
await refresh();
|
||||
alert("Event saved successfully!");
|
||||
} catch (error) {
|
||||
console.error("Failed to save event:", error);
|
||||
alert("Failed to save event");
|
||||
} finally {
|
||||
creating.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const editEvent = (event) => {
|
||||
editingEvent.value = event;
|
||||
Object.assign(eventForm, {
|
||||
title: event.title,
|
||||
description: event.description,
|
||||
content: event.content || "",
|
||||
startDate: new Date(event.startDate).toISOString().slice(0, 16),
|
||||
endDate: new Date(event.endDate).toISOString().slice(0, 16),
|
||||
eventType: event.eventType,
|
||||
location: event.location || "",
|
||||
isOnline: event.isOnline,
|
||||
maxAttendees: event.maxAttendees || "",
|
||||
registrationRequired: event.registrationRequired,
|
||||
registrationDeadline: event.registrationDeadline
|
||||
? new Date(event.registrationDeadline).toISOString().slice(0, 16)
|
||||
: "",
|
||||
});
|
||||
showCreateModal.value = true;
|
||||
};
|
||||
|
||||
const duplicateEvent = (event) => {
|
||||
editingEvent.value = null;
|
||||
Object.assign(eventForm, {
|
||||
title: `${event.title} (Copy)`,
|
||||
description: event.description,
|
||||
content: event.content || "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
eventType: event.eventType,
|
||||
location: event.location || "",
|
||||
isOnline: event.isOnline,
|
||||
maxAttendees: event.maxAttendees || "",
|
||||
registrationRequired: event.registrationRequired,
|
||||
registrationDeadline: "",
|
||||
});
|
||||
showCreateModal.value = true;
|
||||
};
|
||||
|
||||
const cancelEdit = () => {
|
||||
showCreateModal.value = false;
|
||||
editingEvent.value = null;
|
||||
Object.assign(eventForm, {
|
||||
title: "",
|
||||
description: "",
|
||||
content: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
eventType: "community",
|
||||
location: "",
|
||||
isOnline: false,
|
||||
maxAttendees: "",
|
||||
registrationRequired: false,
|
||||
registrationDeadline: "",
|
||||
});
|
||||
};
|
||||
|
||||
const deleteEvent = async (event) => {
|
||||
if (confirm(`Are you sure you want to delete "${event.title}"?`)) {
|
||||
try {
|
||||
await $fetch(`/api/admin/events/${event._id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
await refresh();
|
||||
alert("Event deleted successfully!");
|
||||
} catch (error) {
|
||||
console.error("Failed to delete event:", error);
|
||||
alert("Failed to delete event");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<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-display font-bold text-guild-100">Admin Interface - Working Version</h1>
|
||||
<p class="text-guild-400">Fully functional admin interface without Nuxt UI component issues</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Navigation Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<NuxtLink to="/admin/dashboard" class="block bg-guild-900 rounded-lg shadow hover:shadow-lg transition-shadow p-6 text-center border-2 border-transparent hover:border-candlelight-800">
|
||||
<div class="w-16 h-16 bg-candlelight-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-candlelight-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-guild-100 mb-2">Dashboard</h3>
|
||||
<p class="text-guild-400 text-sm">Overview & statistics</p>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink to="/admin/members-working" class="block bg-guild-900 rounded-lg shadow hover:shadow-lg transition-shadow p-6 text-center border-2 border-transparent hover:border-candlelight-800">
|
||||
<div class="w-16 h-16 bg-candlelight-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-candlelight-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-.5a4 4 0 110 5.292M4 19.5a4 4 0 010-5.292"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-guild-100 mb-2">Members</h3>
|
||||
<p class="text-guild-400 text-sm">Manage members</p>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink to="/admin/events-working" class="block bg-guild-900 rounded-lg shadow hover:shadow-lg transition-shadow p-6 text-center border-2 border-transparent hover:border-earth-800">
|
||||
<div class="w-16 h-16 bg-earth-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-earth-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-guild-100 mb-2">Events</h3>
|
||||
<p class="text-guild-400 text-sm">Manage events</p>
|
||||
</NuxtLink>
|
||||
|
||||
<div class="bg-guild-950 rounded-lg p-6 text-center border-2 border-dashed border-guild-700">
|
||||
<div class="w-16 h-16 bg-guild-800 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-guild-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold mb-2 text-guild-400">More</h3>
|
||||
<p class="text-guild-500 text-sm">Coming soon</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Information -->
|
||||
<div class="bg-candlelight-900/20 border border-candlelight-800 rounded-lg p-6">
|
||||
<div class="flex items-start">
|
||||
<svg class="w-6 h-6 text-candlelight-400 mt-0.5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-candlelight-400 mb-2">Admin Interface Status: Fully Working</h3>
|
||||
<div class="space-y-2 text-candlelight-400">
|
||||
<p>✅ <strong>Dashboard:</strong> Shows statistics, recent members, and upcoming events</p>
|
||||
<p>✅ <strong>Member Management:</strong> Full CRUD operations, search, filter, create members</p>
|
||||
<p>✅ <strong>Event Management:</strong> Create, edit, delete, duplicate events with full forms</p>
|
||||
<p>✅ <strong>Database:</strong> MongoDB connected with {{ memberCount }} members and {{ eventCount }} events</p>
|
||||
<p>✅ <strong>APIs:</strong> All backend endpoints working correctly</p>
|
||||
<p>⚠️ <strong>Authentication:</strong> Temporarily disabled for testing (re-enable when ready)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Stats Preview -->
|
||||
<div class="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div class="bg-guild-900 rounded-lg shadow p-4 text-center">
|
||||
<p class="text-2xl font-bold text-candlelight-400 text-ui-mono">{{ memberCount }}</p>
|
||||
<p class="text-sm text-guild-400">Members</p>
|
||||
</div>
|
||||
<div class="bg-guild-900 rounded-lg shadow p-4 text-center">
|
||||
<p class="text-2xl font-bold text-candlelight-400 text-ui-mono">{{ eventCount }}</p>
|
||||
<p class="text-sm text-guild-400">Events</p>
|
||||
</div>
|
||||
<div class="bg-guild-900 rounded-lg shadow p-4 text-center">
|
||||
<p class="text-2xl font-bold text-earth-400 text-ui-mono">${{ monthlyRevenue }}</p>
|
||||
<p class="text-sm text-guild-400">Monthly Revenue</p>
|
||||
</div>
|
||||
<div class="bg-guild-900 rounded-lg shadow p-4 text-center">
|
||||
<p class="text-2xl font-bold text-ember-400 text-ui-mono">{{ pendingInvites }}</p>
|
||||
<p class="text-sm text-guild-400">Pending Invites</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout: 'admin'
|
||||
})
|
||||
|
||||
// Get quick stats for preview
|
||||
const { data: dashboardData } = await useFetch('/api/admin/dashboard')
|
||||
const stats = computed(() => dashboardData.value?.stats || {})
|
||||
|
||||
const memberCount = computed(() => stats.value.totalMembers || 0)
|
||||
const eventCount = computed(() => (dashboardData.value?.upcomingEvents?.length || 0) + (dashboardData.value?.recentMembers?.length || 0))
|
||||
const monthlyRevenue = computed(() => stats.value.monthlyRevenue || 0)
|
||||
const pendingInvites = computed(() => stats.value.pendingSlackInvites || 0)
|
||||
</script>
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1 class="text-display font-bold mb-6 text-guild-100">Members</h1>
|
||||
|
||||
<div v-if="pending" class="text-center text-guild-400">Loading...</div>
|
||||
|
||||
<div v-else-if="error" class="text-ember-400">
|
||||
Error loading members: {{ error }}
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-4">
|
||||
<div class="bg-guild-900 rounded-lg border border-guild-700 p-4">
|
||||
<h3 class="font-semibold mb-2 text-guild-100">Total Members: {{ members?.length || 0 }}</h3>
|
||||
|
||||
<div v-for="member in members" :key="member._id" class="border-b border-guild-700 pb-2 mb-2 last:border-b-0">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="font-medium text-guild-100">{{ member.name }}</p>
|
||||
<p class="text-guild-400 text-sm">{{ member.email }}</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="inline-block px-2 py-1 text-xs rounded bg-candlelight-900/20 text-candlelight-400">
|
||||
{{ member.circle }}
|
||||
</span>
|
||||
<p class="text-sm text-guild-500 text-ui-mono">${{ member.contributionTier }}/month</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Simple Add Member Form -->
|
||||
<div class="bg-guild-900 rounded-lg border border-guild-700 p-4">
|
||||
<h3 class="text-display-sm font-semibold mb-4 text-guild-100">Add Member</h3>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<input v-model="newMember.name" placeholder="Name" class="border border-guild-700 bg-guild-800 text-guild-100 placeholder-guild-500 rounded p-2" />
|
||||
<input v-model="newMember.email" placeholder="Email" class="border border-guild-700 bg-guild-800 text-guild-100 placeholder-guild-500 rounded p-2" />
|
||||
<select v-model="newMember.circle" class="border border-guild-700 bg-guild-800 text-guild-100 rounded p-2">
|
||||
<option value="community">Community</option>
|
||||
<option value="founder">Founder</option>
|
||||
<option value="practitioner">Practitioner</option>
|
||||
</select>
|
||||
<select v-model="newMember.contributionTier" class="border border-guild-700 bg-guild-800 text-guild-100 rounded p-2">
|
||||
<option value="0">$0/month</option>
|
||||
<option value="5">$5/month</option>
|
||||
<option value="15">$15/month</option>
|
||||
<option value="30">$30/month</option>
|
||||
<option value="50">$50/month</option>
|
||||
</select>
|
||||
</div>
|
||||
<button @click="createMember" :disabled="creating" class="mt-4 bg-candlelight-600 text-white px-4 py-2 rounded hover:bg-candlelight-700 disabled:opacity-50">
|
||||
{{ creating ? 'Adding...' : 'Add Member' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout: 'admin'
|
||||
})
|
||||
|
||||
const { data: members, pending, error, refresh } = await useFetch("/api/admin/members")
|
||||
const creating = ref(false)
|
||||
|
||||
const newMember = reactive({
|
||||
name: '',
|
||||
email: '',
|
||||
circle: 'community',
|
||||
contributionTier: '0'
|
||||
})
|
||||
|
||||
const createMember = async () => {
|
||||
if (!newMember.name || !newMember.email) {
|
||||
alert('Please fill in name and email')
|
||||
return
|
||||
}
|
||||
|
||||
creating.value = true
|
||||
try {
|
||||
await $fetch('/api/admin/members', {
|
||||
method: 'POST',
|
||||
body: newMember
|
||||
})
|
||||
|
||||
Object.assign(newMember, {
|
||||
name: '',
|
||||
email: '',
|
||||
circle: 'community',
|
||||
contributionTier: '0'
|
||||
})
|
||||
|
||||
await refresh()
|
||||
alert('Member added successfully!')
|
||||
} catch (error) {
|
||||
alert('Failed to add member: ' + error.message)
|
||||
} finally {
|
||||
creating.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,345 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<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-display font-bold text-guild-100">Member Management</h1>
|
||||
<p class="text-guild-400">
|
||||
Manage Ghost Guild members, their contributions, and access levels
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Search and Actions -->
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<div class="flex gap-4 items-center">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
placeholder="Search members..."
|
||||
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-candlelight-500 focus:border-transparent"
|
||||
/>
|
||||
<select
|
||||
v-model="circleFilter"
|
||||
class="border border-guild-700 bg-guild-900 text-guild-100 rounded-lg px-4 py-2 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
|
||||
>
|
||||
<option value="">All Circles</option>
|
||||
<option value="community">Community</option>
|
||||
<option value="founder">Founder</option>
|
||||
<option value="practitioner">Practitioner</option>
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
@click="showCreateModal = true"
|
||||
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"
|
||||
>
|
||||
Add Member
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Members Table -->
|
||||
<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-candlelight-500 mr-3"
|
||||
></div>
|
||||
Loading members...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="p-8 text-center text-ember-400">
|
||||
Error loading members: {{ error }}
|
||||
</div>
|
||||
|
||||
<table v-else class="w-full">
|
||||
<thead class="bg-guild-950">
|
||||
<tr>
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Email
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Circle
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Contribution
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Slack Status
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Joined
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
||||
>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-guild-900 divide-y divide-guild-700">
|
||||
<tr
|
||||
v-for="member in filteredMembers"
|
||||
:key="member._id"
|
||||
class="hover:bg-guild-800"
|
||||
>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm font-medium text-guild-100">
|
||||
{{ member.name }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm text-guild-400">{{ member.email }}</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
:class="getCircleClasses(member.circle)"
|
||||
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
|
||||
>
|
||||
{{ member.circle }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-candlelight-900/20 text-candlelight-400"
|
||||
>
|
||||
${{ member.contributionTier }}/month
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
:class="
|
||||
member.slackInvited
|
||||
? 'bg-candlelight-900/20 text-candlelight-400'
|
||||
: 'bg-guild-800 text-guild-300'
|
||||
"
|
||||
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
|
||||
>
|
||||
{{ member.slackInvited ? "Invited" : "Pending" }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-guild-400 text-ui-mono">
|
||||
{{ formatDate(member.createdAt) }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-guild-400">
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
@click="sendSlackInvite(member)"
|
||||
class="text-candlelight-400 hover:text-candlelight-300"
|
||||
>
|
||||
Slack Invite
|
||||
</button>
|
||||
<button
|
||||
@click="editMember(member)"
|
||||
class="text-candlelight-400 hover:text-candlelight-300"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div
|
||||
v-if="!pending && !error && filteredMembers.length === 0"
|
||||
class="p-8 text-center text-guild-500"
|
||||
>
|
||||
No members found matching your criteria
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create Member Modal -->
|
||||
<div
|
||||
v-if="showCreateModal"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
|
||||
>
|
||||
<div class="bg-guild-900 rounded-lg shadow-xl max-w-md w-full mx-4 border border-guild-700">
|
||||
<div class="px-6 py-4 border-b border-guild-700">
|
||||
<h3 class="text-display-sm font-semibold text-guild-100">Add New Member</h3>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="createMember" class="p-6 space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Name</label
|
||||
>
|
||||
<input
|
||||
v-model="newMember.name"
|
||||
placeholder="Full name"
|
||||
required
|
||||
class="w-full border border-guild-700 bg-guild-800 text-guild-100 placeholder-guild-500 rounded-lg px-3 py-2 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Email</label
|
||||
>
|
||||
<input
|
||||
v-model="newMember.email"
|
||||
type="email"
|
||||
placeholder="email@example.com"
|
||||
required
|
||||
class="w-full border border-guild-700 bg-guild-800 text-guild-100 placeholder-guild-500 rounded-lg px-3 py-2 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Circle</label
|
||||
>
|
||||
<select
|
||||
v-model="newMember.circle"
|
||||
class="w-full border border-guild-700 bg-guild-800 text-guild-100 rounded-lg px-3 py-2 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
|
||||
>
|
||||
<option value="community">Community</option>
|
||||
<option value="founder">Founder</option>
|
||||
<option value="practitioner">Practitioner</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Contribution Tier</label
|
||||
>
|
||||
<select
|
||||
v-model="newMember.contributionTier"
|
||||
class="w-full border border-guild-700 bg-guild-800 text-guild-100 rounded-lg px-3 py-2 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
|
||||
>
|
||||
<option value="0">$0/month</option>
|
||||
<option value="5">$5/month</option>
|
||||
<option value="15">$15/month</option>
|
||||
<option value="30">$30/month</option>
|
||||
<option value="50">$50/month</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
@click="showCreateModal = false"
|
||||
class="px-4 py-2 text-guild-400 hover:text-guild-100"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="creating"
|
||||
class="bg-candlelight-600 text-white px-4 py-2 rounded-lg hover:bg-candlelight-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{{ creating ? "Creating..." : "Create Member" }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
const {
|
||||
data: members,
|
||||
pending,
|
||||
error,
|
||||
refresh,
|
||||
} = await useFetch("/api/admin/members");
|
||||
|
||||
const searchQuery = ref("");
|
||||
const circleFilter = ref("");
|
||||
const showCreateModal = ref(false);
|
||||
const creating = ref(false);
|
||||
|
||||
const newMember = reactive({
|
||||
name: "",
|
||||
email: "",
|
||||
circle: "community",
|
||||
contributionTier: "0",
|
||||
});
|
||||
|
||||
const filteredMembers = computed(() => {
|
||||
if (!members.value) return [];
|
||||
|
||||
return members.value.filter((member) => {
|
||||
const matchesSearch =
|
||||
!searchQuery.value ||
|
||||
member.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
||||
member.email.toLowerCase().includes(searchQuery.value.toLowerCase());
|
||||
|
||||
const matchesCircle =
|
||||
!circleFilter.value || member.circle === circleFilter.value;
|
||||
|
||||
return matchesSearch && matchesCircle;
|
||||
});
|
||||
});
|
||||
|
||||
const getCircleClasses = (circle) => {
|
||||
const classes = {
|
||||
community: "bg-candlelight-900/20 text-candlelight-400",
|
||||
founder: "bg-earth-900/20 text-earth-400",
|
||||
practitioner: "bg-candlelight-900/20 text-candlelight-400",
|
||||
};
|
||||
return classes[circle] || "bg-guild-800 text-guild-300";
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleDateString();
|
||||
};
|
||||
|
||||
const createMember = async () => {
|
||||
creating.value = true;
|
||||
try {
|
||||
await $fetch("/api/admin/members", {
|
||||
method: "POST",
|
||||
body: newMember,
|
||||
});
|
||||
|
||||
showCreateModal.value = false;
|
||||
Object.assign(newMember, {
|
||||
name: "",
|
||||
email: "",
|
||||
circle: "community",
|
||||
contributionTier: "0",
|
||||
});
|
||||
|
||||
await refresh();
|
||||
alert("Member created successfully!");
|
||||
} catch (error) {
|
||||
console.error("Failed to create member:", error);
|
||||
alert("Failed to create member");
|
||||
} finally {
|
||||
creating.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const sendSlackInvite = (member) => {
|
||||
alert(`Slack invite functionality would send invite to ${member.email}`);
|
||||
console.log("Send Slack invite to:", member.email);
|
||||
};
|
||||
|
||||
const editMember = (member) => {
|
||||
alert(`Edit functionality would open editor for ${member.name}`);
|
||||
console.log("Edit member:", member._id);
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>UI Component Test</h1>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Basic Button Test -->
|
||||
<UButton>Test Button</UButton>
|
||||
|
||||
<!-- Basic Card Test -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3>Test Card</h3>
|
||||
</template>
|
||||
<p>Card content</p>
|
||||
</UCard>
|
||||
|
||||
<!-- Basic Input Test -->
|
||||
<UInput placeholder="Test input" />
|
||||
|
||||
<!-- Basic Table Test -->
|
||||
<UTable :columns="[{key: 'name', label: 'Name'}]" :rows="[{name: 'Test'}]" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout: 'admin'
|
||||
})
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue