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

<template>
  <div class="admin-dash">
    <!-- Page Header -->
    <div class="page-header">
      <h1>Admin Dashboard</h1>
      <p>Members, events, and community operations</p>
    </div>

    <!-- Stats + Quick Actions row -->
    <div class="content-row">
      <div class="content-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>

      <div class="content-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>
    </div>

    <!-- Recent Activity row -->
    <div class="content-row">
      <div class="content-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>
              <span class="item-name">{{ member.name }}</span>
              <span class="item-sub">{{ member.email }}</span>
            </div>
            <div class="item-meta">
              <span class="badge" :class="member.circle">{{ member.circle }}</span>
              <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>

      <div class="content-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>
    </div>
  </div>
</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>
.admin-dash {
  max-width: 960px;
  margin: 0 auto;
}

/* ---- PAGE HEADER ---- */
.page-header {
  padding: 28px 28px 20px;
  border-bottom: 1px dashed var(--border);
}

.page-header h1 {
  font-family: 'Brygada 1918', serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--text-bright);
  line-height: 1.2;
  margin-bottom: 4px;
}

.page-header p {
  font-size: 12px;
  color: var(--text-dim);
}

/* ---- CONTENT GRID ---- */
.content-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px dashed var(--border);
}

.content-block {
  padding: 24px 28px;
  border-right: 1px dashed var(--border);
  min-width: 0;
}

.content-block:last-child {
  border-right: none;
}

/* ---- 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;
}

.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) {
  .content-row {
    grid-template-columns: 1fr;
  }

  .content-block {
    border-right: none;
    border-bottom: 1px dashed var(--border);
  }

  .content-block:last-child {
    border-bottom: none;
  }

  .page-header {
    padding: 24px 20px 16px;
  }

  .content-block {
    padding: 20px;
  }
}
</style>