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

<template>
  <PageShell
    title="Admin Dashboard"
    subtitle="Members, events, and community operations"
  >
    <AdminAlertsPanel />

    <!-- Stats + Quick Actions row -->
    <ColumnsLayout cols="2" collapse="768" class="admin-row">
      <template #left>
        <div class="admin-block">
          <div class="section-label">Overview</div>
          <div class="stat-row">
            <span class="stat-key">Total Members</span>
            <span class="stat-val">{{ stats.totalMembers || 0 }}</span>
          </div>
          <div class="stat-row">
            <span class="stat-key">Active Events</span>
            <span class="stat-val">{{ stats.activeEvents || 0 }}</span>
          </div>
          <div class="stat-row">
            <span class="stat-key">Monthly Revenue</span>
            <span class="stat-val">${{ stats.monthlyRevenue || 0 }}</span>
          </div>
          <div class="stat-row">
            <span class="stat-key">Pending Slack Invites</span>
            <span class="stat-val">{{ stats.pendingSlackInvites || 0 }}</span>
          </div>
        </div>
      </template>

      <template #right>
        <div class="admin-block">
          <div class="section-label">Quick Actions</div>
          <NuxtLink to="/admin/members" class="action-link">
            Manage Members<span class="arrow">&rarr;</span>
          </NuxtLink>
          <NuxtLink to="/admin/events" class="action-link">
            Manage Events<span class="arrow">&rarr;</span>
          </NuxtLink>
          <NuxtLink to="/admin/events/create" class="action-link">
            Create Event<span class="arrow">&rarr;</span>
          </NuxtLink>
          <NuxtLink to="/admin/series/create" class="action-link">
            Create Series<span class="arrow">&rarr;</span>
          </NuxtLink>
        </div>
      </template>
    </ColumnsLayout>

    <!-- Recent Activity row -->
    <ColumnsLayout cols="2" collapse="768" class="admin-row">
      <template #left>
        <div class="admin-block">
          <div class="section-label">Recent Members</div>

          <div v-if="pending" class="loading-inline">
            <div class="spinner spinner-sm" />
          </div>

          <div v-else-if="recentMembers.length" class="item-list">
            <div v-for="member in recentMembers" :key="member._id" class="item-row">
              <div>
                <NuxtLink :to="`/admin/members/${member._id}`" class="item-name">{{ member.name }}</NuxtLink>
                <span class="item-sub">{{ member.email }}</span>
              </div>
              <div class="item-meta">
                <CircleBadge :circle="member.circle" />
                <span class="item-date">{{ formatDate(member.createdAt) }}</span>
              </div>
            </div>
          </div>
          <div v-else class="empty-state">No recent members</div>

          <NuxtLink to="/admin/members" class="section-link">View all members &rarr;</NuxtLink>
        </div>
      </template>

      <template #right>
        <div class="admin-block">
          <div class="section-label">Upcoming Events</div>

          <div v-if="pending" class="loading-inline">
            <div class="spinner spinner-sm" />
          </div>

          <div v-else-if="upcomingEvents.length" class="item-list">
            <div v-for="event in upcomingEvents" :key="event._id" class="item-row">
              <div>
                <span class="item-name">{{ event.title }}</span>
                <span class="item-sub">{{ formatDateTime(event.startDate) }}</span>
              </div>
              <div class="item-meta">
                <span class="badge" :class="event.eventType">{{ event.eventType }}</span>
                <span class="item-date">{{ event.location || 'Online' }}</span>
              </div>
            </div>
          </div>
          <div v-else class="empty-state">No upcoming events</div>

          <NuxtLink to="/admin/events" class="section-link">View all events &rarr;</NuxtLink>
        </div>
      </template>
    </ColumnsLayout>
  </PageShell>
</template>

<script setup>
definePageMeta({
  layout: 'admin',
  middleware: 'admin',
})

const { data: dashboardData, pending } = await useFetch('/api/admin/dashboard')

const stats = computed(() => dashboardData.value?.stats || {})
const recentMembers = computed(() => dashboardData.value?.recentMembers || [])
const upcomingEvents = computed(() => dashboardData.value?.upcomingEvents || [])

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString()
}

const formatDateTime = (dateString) => {
  return new Date(dateString).toLocaleDateString(undefined, {
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
  })
}
</script>

<style scoped>
/* ---- ROWS ---- */
.admin-row {
  border-bottom: 1px dashed var(--border);
}

.admin-block {
  padding: 24px 28px;
  min-width: 0;
}

/* ---- STATS ---- */
.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 12px;
}

.stat-row:last-of-type {
  border-bottom: none;
}

.stat-key {
  color: var(--text-faint);
}

.stat-val {
  color: var(--text-bright);
  font-weight: 600;
}

/* ---- QUICK ACTIONS ---- */
.action-link {
  border: 1px dashed var(--border);
  padding: 14px 20px;
  margin-bottom: 8px;
  transition: border-color 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
}

.action-link:hover {
  border-color: var(--candle-faint);
  color: var(--candle);
  text-decoration: none;
}

.action-link .arrow {
  color: var(--text-faint);
  margin-left: 8px;
  transition: color 0.2s;
}

.action-link:hover .arrow {
  color: var(--candle-faint);
}

/* ---- ITEM LIST (members / events) ---- */
.item-list {
  margin-bottom: 4px;
}

.item-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
  gap: 12px;
}

.item-row:last-child {
  border-bottom: none;
}

.item-name {
  display: block;
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
}

a.item-name:hover {
  color: var(--candle);
  text-decoration: underline;
}

.item-sub {
  display: block;
  color: var(--text-faint);
  font-size: 11px;
  margin-top: 2px;
}

.item-meta {
  text-align: right;
  flex-shrink: 0;
}

.item-date {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
}

/* ---- SECTION LINK ---- */
.section-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  color: var(--candle);
  text-decoration: none;
}

.section-link:hover {
  text-decoration: underline;
}

/* ---- STATES ---- */
.loading-inline {
  padding: 24px 0;
  text-align: center;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2px dashed var(--candle);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

.spinner-sm {
  width: 16px;
  height: 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.empty-state {
  padding: 24px 0;
  color: var(--text-faint);
  font-size: 12px;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .admin-block {
    padding: 20px;
  }
}
</style>