jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(admin): migrate admin/index to PageShell + ColumnsLayout

Browse source 
- Replace .admin-dash wrapper + bespoke .page-header with <PageShell title/subtitle>
- Replace two .content-row grids with <ColumnsLayout cols=2 collapse=768> + named slots
- Rename .content-block to .admin-block (no border-right; ColumnsLayout provides divider)
- Drop .content-row, .content-block, .page-header scoped CSS
This commit is contained in:
Jennie Robinson Faber 2026-04-08 17:04:38 +01:00
parent 884cee7951
commit f267b35214
1 changed files with 90 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

221
app/pages/admin/index.vue
View file

@ -1,103 +1,108 @@
<template> <template>
<div class="admin-dash"> <PageShell
<!-- Page Header --> title="Admin Dashboard"
<div class="page-header"> subtitle="Members, events, and community operations"
<h1>Admin Dashboard</h1> >
<p>Members, events, and community operations</p>
</div>
<AdminAlertsPanel /> <AdminAlertsPanel />
<!-- Stats + Quick Actions row --> <!-- Stats + Quick Actions row -->
<div class="content-row"> <ColumnsLayout cols="2" collapse="768" class="admin-row">
<div class="content-block"> <template #left>
<div class="section-label">Overview</div> <div class="admin-block">
<div class="stat-row"> <div class="section-label">Overview</div>
<span class="stat-key">Total Members</span> <div class="stat-row">
<span class="stat-val">{{ stats.totalMembers || 0 }}</span> <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>
<div class="stat-row"> </template>
<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"> <template #right>
<div class="section-label">Quick Actions</div> <div class="admin-block">
<NuxtLink to="/admin/members" class="action-link"> <div class="section-label">Quick Actions</div>
Manage Members<span class="arrow">&rarr;</span> <NuxtLink to="/admin/members" class="action-link">
</NuxtLink> Manage Members<span class="arrow">&rarr;</span>
<NuxtLink to="/admin/events" class="action-link"> </NuxtLink>
Manage Events<span class="arrow">&rarr;</span> <NuxtLink to="/admin/events" class="action-link">
</NuxtLink> Manage Events<span class="arrow">&rarr;</span>
<NuxtLink to="/admin/events/create" class="action-link"> </NuxtLink>
Create Event<span class="arrow">&rarr;</span> <NuxtLink to="/admin/events/create" class="action-link">
</NuxtLink> Create Event<span class="arrow">&rarr;</span>
<NuxtLink to="/admin/series/create" class="action-link"> </NuxtLink>
Create Series<span class="arrow">&rarr;</span> <NuxtLink to="/admin/series/create" class="action-link">
</NuxtLink> Create Series<span class="arrow">&rarr;</span>
</div> </NuxtLink>
</div> </div>
</template>
</ColumnsLayout>
<!-- Recent Activity row --> <!-- Recent Activity row -->
<div class="content-row"> <ColumnsLayout cols="2" collapse="768" class="admin-row">
<div class="content-block"> <template #left>
<div class="section-label">Recent Members</div> <div class="admin-block">
<div class="section-label">Recent Members</div>
<div v-if="pending" class="loading-inline"> <div v-if="pending" class="loading-inline">
<div class="spinner spinner-sm" /> <div class="spinner spinner-sm" />
</div> </div>
<div v-else-if="recentMembers.length" class="item-list"> <div v-else-if="recentMembers.length" class="item-list">
<div v-for="member in recentMembers" :key="member._id" class="item-row"> <div v-for="member in recentMembers" :key="member._id" class="item-row">
<div> <div>
<NuxtLink :to="`/admin/members/${member._id}`" class="item-name">{{ member.name }}</NuxtLink> <NuxtLink :to="`/admin/members/${member._id}`" class="item-name">{{ member.name }}</NuxtLink>
<span class="item-sub">{{ member.email }}</span> <span class="item-sub">{{ member.email }}</span>
</div> </div>
<div class="item-meta"> <div class="item-meta">
<span class="badge" :class="member.circle">{{ member.circle }}</span> <span class="badge" :class="member.circle">{{ member.circle }}</span>
<span class="item-date">{{ formatDate(member.createdAt) }}</span> <span class="item-date">{{ formatDate(member.createdAt) }}</span>
</div>
</div> </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>
<div v-else class="empty-state">No recent members</div> </template>
<NuxtLink to="/admin/members" class="section-link">View all members &rarr;</NuxtLink> <template #right>
</div> <div class="admin-block">
<div class="section-label">Upcoming Events</div>
<div class="content-block"> <div v-if="pending" class="loading-inline">
<div class="section-label">Upcoming Events</div> <div class="spinner spinner-sm" />
</div>
<div v-if="pending" class="loading-inline"> <div v-else-if="upcomingEvents.length" class="item-list">
<div class="spinner spinner-sm" /> <div v-for="event in upcomingEvents" :key="event._id" class="item-row">
</div> <div>
<span class="item-name">{{ event.title }}</span>
<div v-else-if="upcomingEvents.length" class="item-list"> <span class="item-sub">{{ formatDateTime(event.startDate) }}</span>
<div v-for="event in upcomingEvents" :key="event._id" class="item-row"> </div>
<div> <div class="item-meta">
<span class="item-name">{{ event.title }}</span> <span class="badge" :class="event.eventType">{{ event.eventType }}</span>
<span class="item-sub">{{ formatDateTime(event.startDate) }}</span> <span class="item-date">{{ event.location || 'Online' }}</span>
</div> </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>
</div> <div v-else class="empty-state">No upcoming events</div>
<div v-else class="empty-state">No upcoming events</div>
<NuxtLink to="/admin/events" class="section-link">View all events &rarr;</NuxtLink> <NuxtLink to="/admin/events" class="section-link">View all events &rarr;</NuxtLink>
</div> </div>
</div> </template>
</div> </ColumnsLayout>
</PageShell>
</template> </template>
<script setup> <script setup>
@ -127,45 +132,16 @@ const formatDateTime = (dateString) => {
</script> </script>
<style scoped> <style scoped>
.admin-dash {} /* ---- ROWS ---- */
.admin-row {
/* ---- PAGE HEADER ---- */
.page-header {
padding: 28px 28px 20px;
border-bottom: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
} }
.page-header h1 { .admin-block {
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; padding: 24px 28px;
border-right: 1px dashed var(--border);
min-width: 0; min-width: 0;
} }
.content-block:last-child {
border-right: none;
}
/* ---- STATS ---- */ /* ---- STATS ---- */
.stat-row { .stat-row {
display: flex; display: flex;
@ -313,24 +289,7 @@ a.item-name:hover {
/* ---- RESPONSIVE ---- */ /* ---- RESPONSIVE ---- */
@media (max-width: 768px) { @media (max-width: 768px) {
.content-row { .admin-block {
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; padding: 20px;
} }
} }