From f267b35214f0c964da42d583e9bcc3cf948abc99 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Wed, 8 Apr 2026 17:04:38 +0100
Subject: [PATCH] refactor(admin): migrate admin/index to PageShell +
 ColumnsLayout

- 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
---
 app/pages/admin/index.vue | 221 ++++++++++++++++----------------------
 1 file changed, 90 insertions(+), 131 deletions(-)

diff --git a/app/pages/admin/index.vue b/app/pages/admin/index.vue
index 4382211..e117a8f 100644
--- a/app/pages/admin/index.vue
+++ b/app/pages/admin/index.vue
@@ -1,103 +1,108 @@
 <template>
-  <div class="admin-dash">
-    <!-- Page Header -->
-    <div class="page-header">
-      <h1>Admin Dashboard</h1>
-      <p>Members, events, and community operations</p>
-    </div>
-
+  <PageShell
+    title="Admin Dashboard"
+    subtitle="Members, events, and community operations"
+  >
     <AdminAlertsPanel />
 
     <!-- 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>
+    <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>
-        <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>
 
-      <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>
+      <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 -->
-    <div class="content-row">
-      <div class="content-block">
-        <div class="section-label">Recent Members</div>
+    <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-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">
-              <span class="badge" :class="member.circle">{{ member.circle }}</span>
-              <span class="item-date">{{ formatDate(member.createdAt) }}</span>
+          <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">
+                <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 v-else class="empty-state">No recent members</div>
+      </template>
 
-        <NuxtLink to="/admin/members" class="section-link">View all members &rarr;</NuxtLink>
-      </div>
+      <template #right>
+        <div class="admin-block">
+          <div class="section-label">Upcoming Events</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-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 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>
-        <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>
-      </div>
-    </div>
-  </div>
+          <NuxtLink to="/admin/events" class="section-link">View all events &rarr;</NuxtLink>
+        </div>
+      </template>
+    </ColumnsLayout>
+  </PageShell>
 </template>
 
 <script setup>
@@ -127,45 +132,16 @@ const formatDateTime = (dateString) => {
 </script>
 
 <style scoped>
-.admin-dash {}
-
-/* ---- PAGE HEADER ---- */
-.page-header {
-  padding: 28px 28px 20px;
+/* ---- ROWS ---- */
+.admin-row {
   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 {
+.admin-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;
@@ -313,24 +289,7 @@ a.item-name:hover {
 
 /* ---- 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 {
+  .admin-block {
     padding: 20px;
   }
 }