ghostguild-org/app/pages/admin/events/index.vue

<template>
  <div>
    <div class="bg-elevated border-b">
      <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">
            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"
          />
          <USelect
            v-model="seriesFilter"
            :items="[
              { label: 'All Events', value: '' },
              { label: 'Series Events Only', value: 'series-only' },
              { label: 'Standalone Only', value: 'standalone-only' },
            ]"
            class="w-full"
          />
        </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"
        >
          <Icon name="heroicons:plus" class="w-4 h-4 mr-2" />
          Create Event
        </NuxtLink>
      </div>

      <!-- Events Table -->
      <div class="bg-elevated 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-blue-600 mr-3"
            ></div>
            Loading events...
          </div>
        </div>

        <div v-else-if="error" class="p-8 text-center text-red-600">
          Error loading events: {{ error }}
        </div>

        <table v-else class="w-full">
          <thead class="bg-muted">
            <tr>
              <th
                class="px-6 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
              >
                Title
              </th>
              <th
                class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
              >
                Type
              </th>
              <th
                class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
              >
                Date
              </th>
              <th
                class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
              >
                Status
              </th>
              <th
                class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
              >
                Registration
              </th>
              <th
                class="px-6 py-4 text-right text-xs font-medium text-dimmed uppercase tracking-wider"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tbody class="bg-elevated divide-y divide-default">
            <tr
              v-for="event in filteredEvents"
              :key="event._id"
              class="hover:bg-muted"
            >
              <!-- Title Column -->
              <td class="px-6 py-6">
                <div class="flex items-start space-x-3">
                  <div
                    v-if="
                      event.featureImage?.url && !event.featureImage?.publicId
                    "
                    class="flex-shrink-0 w-12 h-12 bg-accented rounded-lg overflow-hidden"
                  >
                    <img
                      :src="event.featureImage.url"
                      :alt="event.title"
                      class="w-full h-full object-cover"
                      @error="handleImageError($event)"
                    />
                  </div>
                  <div
                    v-else
                    class="flex-shrink-0 w-12 h-12 bg-accented rounded-lg flex items-center justify-center"
                  >
                    <Icon
                      name="heroicons:calendar-days"
                      class="w-6 h-6 text-muted"
                    />
                  </div>
                  <div class="flex-1 min-w-0">
                    <div class="text-sm font-semibold text-highlighted mb-1">
                      {{ event.title }}
                    </div>
                    <div class="text-sm text-dimmed 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"
                      >
                        <div
                          class="w-4 h-4 bg-purple-200 text-purple-700 rounded-full flex items-center justify-center text-xs font-bold"
                        >
                          {{ event.series.position }}
                        </div>
                        {{ event.series.title }}
                      </div>
                    </div>
                    <div class="flex items-center space-x-4 mt-2">
                      <div
                        v-if="event.membersOnly"
                        class="flex items-center text-xs text-purple-600"
                      >
                        <Icon
                          name="heroicons:lock-closed"
                          class="w-3 h-3 mr-1"
                        />
                        Members Only
                      </div>
                      <div
                        v-if="
                          event.targetCircles && event.targetCircles.length > 0
                        "
                        class="flex items-center space-x-1"
                      >
                        <Icon
                          name="heroicons:user-group"
                          class="w-3 h-3 text-muted"
                        />
                        <span class="text-xs text-dimmed">{{
                          event.targetCircles.join(", ")
                        }}</span>
                      </div>
                      <div
                        v-if="!event.isVisible"
                        class="flex items-center text-xs text-dimmed"
                      >
                        <Icon name="heroicons:eye-slash" class="w-3 h-3 mr-1" />
                        Hidden
                      </div>
                    </div>
                  </div>
                </div>
              </td>

              <!-- Type Column -->
              <td class="px-4 py-6 whitespace-nowrap">
                <span
                  :class="getEventTypeClasses(event.eventType)"
                  class="inline-flex px-3 py-1 text-xs font-semibold rounded-full capitalize"
                >
                  {{ event.eventType }}
                </span>
              </td>

              <!-- Date Column -->
              <td class="px-4 py-6 whitespace-nowrap text-sm text-muted">
                <div class="space-y-1">
                  <div class="font-medium">
                    {{ formatDate(event.startDate) }}
                  </div>
                  <div class="text-xs text-dimmed">
                    {{ formatTime(event.startDate) }}
                  </div>
                </div>
              </td>

              <!-- Status Column -->
              <td class="px-4 py-6 whitespace-nowrap">
                <div class="space-y-2">
                  <span
                    :class="getStatusClasses(event)"
                    class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
                  >
                    {{ getEventStatus(event) }}
                  </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"
                  >
                    Cancelled
                  </div>
                </div>
              </td>

              <!-- Registration Column -->
              <td class="px-4 py-6 whitespace-nowrap">
                <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"
                  >
                    Required
                  </div>
                  <div
                    v-else
                    class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-accented text-default"
                  >
                    Optional
                  </div>
                  <div v-if="event.maxAttendees" class="text-xs text-dimmed">
                    {{ event.registeredCount || 0 }} / {{ event.maxAttendees }}
                  </div>
                </div>
              </td>

              <!-- Actions Column -->
              <td class="px-6 py-6 whitespace-nowrap text-right">
                <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"
                    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"
                    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"
                    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"
                    title="Delete Event"
                  >
                    <Icon name="heroicons:trash" class="w-4 h-4" />
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>

        <div
          v-if="!pending && !error && filteredEvents.length === 0"
          class="p-8 text-center text-dimmed"
        >
          No events found matching your criteria
        </div>
      </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 seriesFilter = ref("");

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;

    const matchesSeries =
      !seriesFilter.value ||
      (seriesFilter.value === "series-only" && event.series?.isSeriesEvent) ||
      (seriesFilter.value === "standalone-only" &&
        !event.series?.isSeriesEvent);

    return matchesSearch && matchesType && matchesStatus && matchesSeries;
  });
});

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",
  };
  return classes[type] || "bg-gray-100 text-gray-800";
};

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-blue-100 text-blue-800",
    Ongoing: "bg-green-100 text-green-800",
    Past: "bg-gray-100 text-gray-800",
  };
  return classes[status] || "bg-gray-100 text-gray-800";
};

const formatDateTime = (dateString) => {
  return new Date(dateString).toLocaleString();
};

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
  });
};

const formatTime = (dateString) => {
  return new Date(dateString).toLocaleTimeString("en-US", {
    hour: "numeric",
    minute: "2-digit",
    hour12: true,
  });
};

// Get optimized Cloudinary image URL
const getOptimizedImageUrl = (publicId, transformations) => {
  if (!publicId) return "";

  const config = useRuntimeConfig();
  return `https://res.cloudinary.com/${config.public.cloudinaryCloudName}/image/upload/${transformations}/f_auto,q_auto/${publicId}`;
};

const duplicateEvent = (event) => {
  // Navigate to create page with duplicate query parameter
  const duplicateData = {
    title: `${event.title} (Copy)`,
    description: event.description,
    content: event.content || "",
    featureImage: event.featureImage || null,
    eventType: event.eventType,
    location: event.location || "",
    isOnline: event.isOnline,
    isVisible: true,
    isCancelled: false,
    cancellationMessage: "",
    targetCircles: event.targetCircles || [],
    maxAttendees: event.maxAttendees || "",
    registrationRequired: event.registrationRequired,
  };

  // Store duplicate data in session storage for the create page to use
  sessionStorage.setItem("duplicateEventData", JSON.stringify(duplicateData));
  navigateTo("/admin/events/create?duplicate=true");
};

const deleteEvent = async (event) => {
  if (confirm(`Are you sure you want to delete "${event.title}"?`)) {
    try {
      await $fetch(`/api/admin/events/${String(event._id)}`, {
        method: "DELETE",
      });
      await refresh();
      alert("Event deleted successfully!");
    } catch (error) {
      console.error("Failed to delete event:", error);
      alert("Failed to delete event");
    }
  }
};

const handleImageError = (event) => {
  const img = event.target;
  const container = img?.parentElement;
  if (container) {
    container.style.display = "none";
  }
};

const editEvent = (event) => {
  navigateTo(`/admin/events/create?edit=${String(event._id)}`);
};
</script>