Huge bunch of UI/UX improvements and tweaks!

app/pages/admin/events/index.vue

@@ -27,14 +27,6 @@
           <option value="showcase">Showcase</option>
         </select>
       </div>
-      <div class="field" style="margin-bottom: 0;">
-        <select v-model="statusFilter">
-          <option value="all">All Status</option>
-          <option value="upcoming">Upcoming</option>
-          <option value="ongoing">Ongoing</option>
-          <option value="past">Past</option>
-        </select>
-      </div>
       <div class="field" style="margin-bottom: 0;">
         <select v-model="seriesFilter">
           <option value="all">All Events</option>
@@ -44,124 +36,214 @@
       </div>
     </div>
 
-    <!-- Events Table -->
-    <div class="table-wrap">
-      <div v-if="pending" class="loading-state">
-        <div class="spinner" />
-        <span>Loading events...</span>
-      </div>
-
-      <div v-else-if="error" class="error-state">
-        Error loading events: {{ error }}
-      </div>
-
-      <table v-else-if="filteredEvents.length">
-        <thead>
-          <tr>
-            <th class="col-title">Title</th>
-            <th>Type</th>
-            <th>Date</th>
-            <th>Status</th>
-            <th>Registration</th>
-            <th>Tickets</th>
-            <th class="col-actions-head">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="event in filteredEvents" :key="event._id">
-            <!-- Title -->
-            <td class="col-title">
-              <div class="event-title-cell">
-                <div v-if="event.featureImage?.url && !event.featureImage?.publicId" class="event-thumb">
-                  <img
-                    :src="event.featureImage.url"
-                    :alt="event.title"
-                    @error="handleImageError($event)"
-                  />
-                </div>
-                <div>
-                  <span class="event-name">{{ event.title }}</span>
-                  <span class="event-desc">{{ event.description.substring(0, 80) }}...</span>
-                  <div v-if="event.series?.isSeriesEvent" class="series-tag">
-                    <span class="series-pos">{{ event.series.position }}</span>
-                    {{ event.series.title }}
-                  </div>
-                  <div class="event-flags">
-                    <span v-if="event.membersOnly" class="flag">Members Only</span>
-                    <span v-if="event.targetCircles?.length" class="flag">{{ event.targetCircles.join(', ') }}</span>
-                    <span v-if="!event.isVisible" class="flag flag-dim">Hidden</span>
-                  </div>
-                </div>
-              </div>
-            </td>
-
-            <!-- Type -->
-            <td>
-              <span class="badge" :class="event.eventType">{{ event.eventType }}</span>
-            </td>
-
-            <!-- Date -->
-            <td class="col-date">
-              <span class="date-main">{{ formatDate(event.startDate) }}</span>
-              <span class="date-time">{{ formatTime(event.startDate) }}</span>
-            </td>
-
-            <!-- Status -->
-            <td>
-              <span :class="['status-pill', `status-${getEventStatus(event).toLowerCase()}`]">
-                {{ getEventStatus(event) }}
-              </span>
-              <span v-if="event.isCancelled" class="status-pill status-cancelled">Cancelled</span>
-            </td>
-
-            <!-- Registration -->
-            <td>
-              <span v-if="event.registrationRequired" class="status-ok" style="font-size: 11px;">Required</span>
-              <span v-else class="status-dim" style="font-size: 11px;">Optional</span>
-              <span v-if="event.maxAttendees" class="reg-count">
-                {{ event.registeredCount || 0 }} / {{ event.maxAttendees }}
-              </span>
-            </td>
-
-            <!-- Tickets -->
-            <td class="col-tickets">
-              <template v-if="event.tickets?.enabled">
-                <span class="ticket-on">Ticketing On</span>
-                <span v-if="event.tickets?.requiresSeriesTicket" class="ticket-detail">Series Pass Required</span>
-                <template v-else>
-                  <span v-if="event.tickets.member?.available" class="ticket-detail">
-                    Member: {{ event.tickets.member.isFree ? 'Free' : `$${event.tickets.member.price}` }}
-                  </span>
-                  <span v-if="event.tickets.public?.available" class="ticket-detail">
-                    Public: ${{ event.tickets.public.price || 0 }}
-                    <template v-if="event.tickets.public.quantity">
-                      ({{ event.tickets.public.sold || 0 }}/{{ event.tickets.public.quantity }})
-                    </template>
-                  </span>
-                </template>
-              </template>
-              <span v-else class="status-dim" style="font-size: 11px;">No tickets</span>
-            </td>
-
-            <!-- Actions -->
-            <td class="col-actions">
-              <NuxtLink
-                :to="`/events/${event.slug || String(event._id)}`"
-                class="link-btn"
-                title="View"
-              >View</NuxtLink>
-              <button @click="editEvent(event)" class="link-btn" title="Edit">Edit</button>
-              <button @click="duplicateEvent(event)" class="link-btn" title="Duplicate">Dup</button>
-              <button @click="deleteEvent(event)" class="link-btn link-btn-danger" title="Delete">Del</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <div v-else class="empty-state">
-        No events found matching your criteria
-      </div>
+    <!-- Loading / Error -->
+    <div v-if="pending" class="loading-state">
+      <div class="spinner" />
+      <span>Loading events...</span>
     </div>
+
+    <div v-else-if="error" class="error-state">
+      Error loading events: {{ error }}
+    </div>
+
+    <template v-else>
+      <!-- ── Upcoming Events ── -->
+      <div class="section-divider">
+        <span class="section-label">Upcoming Events</span>
+        <span class="event-count">{{ upcomingFiltered.length }}</span>
+      </div>
+
+      <div class="table-wrap">
+        <table v-if="upcomingPaged.length">
+          <thead>
+            <tr>
+              <th class="col-title">Title</th>
+              <th>Type</th>
+              <th>Date</th>
+              <th>Status</th>
+              <th>Registration</th>
+              <th>Tickets</th>
+              <th class="col-actions-head">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="event in upcomingPaged" :key="event._id">
+              <td class="col-title">
+                <div class="event-title-cell">
+                  <div v-if="event.featureImage?.url && !event.featureImage?.publicId" class="event-thumb">
+                    <img :src="event.featureImage.url" :alt="event.title" @error="handleImageError($event)" />
+                  </div>
+                  <div>
+                    <span class="event-name">{{ event.title }}</span>
+                    <span class="event-desc">{{ event.description.substring(0, 80) }}...</span>
+                    <div v-if="event.series?.isSeriesEvent" class="series-tag">
+                      <span class="series-pos">{{ event.series.position }}</span>
+                      {{ event.series.title }}
+                    </div>
+                    <div class="event-flags">
+                      <span v-if="event.membersOnly" class="flag">Members Only</span>
+                      <span v-if="event.targetCircles?.length" class="flag">{{ event.targetCircles.join(', ') }}</span>
+                      <span v-if="!event.isVisible" class="flag flag-dim">Hidden</span>
+                    </div>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <span class="badge" :class="event.eventType">{{ event.eventType }}</span>
+              </td>
+              <td class="col-date">
+                <span class="date-main">{{ formatDate(event.startDate) }}</span>
+                <span class="date-time">{{ formatTime(event.startDate) }}</span>
+              </td>
+              <td>
+                <span :class="['status-pill', `status-${getEventStatus(event).toLowerCase()}`]">
+                  {{ getEventStatus(event) }}
+                </span>
+                <span v-if="event.isCancelled" class="status-pill status-cancelled">Cancelled</span>
+              </td>
+              <td>
+                <span v-if="event.registrationRequired" class="status-ok" style="font-size: 11px;">Required</span>
+                <span v-else class="status-dim" style="font-size: 11px;">Optional</span>
+                <span v-if="event.maxAttendees" class="reg-count">
+                  {{ event.registeredCount || 0 }} / {{ event.maxAttendees }}
+                </span>
+              </td>
+              <td class="col-tickets">
+                <template v-if="event.tickets?.enabled">
+                  <span class="ticket-on">Ticketing On</span>
+                  <span v-if="event.tickets?.requiresSeriesTicket" class="ticket-detail">Series Pass Required</span>
+                  <template v-else>
+                    <span v-if="event.tickets.member?.available" class="ticket-detail">
+                      Member: {{ event.tickets.member.isFree ? 'Free' : `$${event.tickets.member.price}` }}
+                    </span>
+                    <span v-if="event.tickets.public?.available" class="ticket-detail">
+                      Public: ${{ event.tickets.public.price || 0 }}
+                      <template v-if="event.tickets.public.quantity">
+                        ({{ event.tickets.public.sold || 0 }}/{{ event.tickets.public.quantity }})
+                      </template>
+                    </span>
+                  </template>
+                </template>
+                <span v-else class="status-dim" style="font-size: 11px;">No tickets</span>
+              </td>
+              <td class="col-actions">
+                <NuxtLink :to="`/events/${event.slug || String(event._id)}`" class="link-btn" title="View">View</NuxtLink>
+                <button @click="editEvent(event)" class="link-btn" title="Edit">Edit</button>
+                <button @click="duplicateEvent(event)" class="link-btn" title="Duplicate">Dup</button>
+                <button @click="deleteEvent(event)" class="link-btn link-btn-danger" title="Delete">Del</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div v-else class="empty-state">No upcoming events matching your filters</div>
+
+        <div v-if="upcomingPageCount > 1" class="pagination">
+          <button class="page-btn" :disabled="upcomingPage === 1" @click="upcomingPage--">←</button>
+          <span class="page-info">{{ upcomingPage }} / {{ upcomingPageCount }}</span>
+          <button class="page-btn" :disabled="upcomingPage === upcomingPageCount" @click="upcomingPage++">→</button>
+        </div>
+      </div>
+
+      <!-- ── Past Events ── -->
+      <div class="section-divider">
+        <span class="section-label">Past Events</span>
+        <span class="event-count">{{ pastFiltered.length }}</span>
+      </div>
+
+      <div class="table-wrap">
+        <table v-if="pastPaged.length">
+          <thead>
+            <tr>
+              <th class="col-title">Title</th>
+              <th>Type</th>
+              <th>Date</th>
+              <th>Status</th>
+              <th>Registration</th>
+              <th>Tickets</th>
+              <th class="col-actions-head">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="event in pastPaged" :key="event._id">
+              <td class="col-title">
+                <div class="event-title-cell">
+                  <div v-if="event.featureImage?.url && !event.featureImage?.publicId" class="event-thumb">
+                    <img :src="event.featureImage.url" :alt="event.title" @error="handleImageError($event)" />
+                  </div>
+                  <div>
+                    <span class="event-name">{{ event.title }}</span>
+                    <span class="event-desc">{{ event.description.substring(0, 80) }}...</span>
+                    <div v-if="event.series?.isSeriesEvent" class="series-tag">
+                      <span class="series-pos">{{ event.series.position }}</span>
+                      {{ event.series.title }}
+                    </div>
+                    <div class="event-flags">
+                      <span v-if="event.membersOnly" class="flag">Members Only</span>
+                      <span v-if="event.targetCircles?.length" class="flag">{{ event.targetCircles.join(', ') }}</span>
+                      <span v-if="!event.isVisible" class="flag flag-dim">Hidden</span>
+                    </div>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <span class="badge" :class="event.eventType">{{ event.eventType }}</span>
+              </td>
+              <td class="col-date">
+                <span class="date-main">{{ formatDate(event.startDate) }}</span>
+                <span class="date-time">{{ formatTime(event.startDate) }}</span>
+              </td>
+              <td>
+                <span :class="['status-pill', `status-${getEventStatus(event).toLowerCase()}`]">
+                  {{ getEventStatus(event) }}
+                </span>
+                <span v-if="event.isCancelled" class="status-pill status-cancelled">Cancelled</span>
+              </td>
+              <td>
+                <span v-if="event.registrationRequired" class="status-ok" style="font-size: 11px;">Required</span>
+                <span v-else class="status-dim" style="font-size: 11px;">Optional</span>
+                <span v-if="event.maxAttendees" class="reg-count">
+                  {{ event.registeredCount || 0 }} / {{ event.maxAttendees }}
+                </span>
+              </td>
+              <td class="col-tickets">
+                <template v-if="event.tickets?.enabled">
+                  <span class="ticket-on">Ticketing On</span>
+                  <span v-if="event.tickets?.requiresSeriesTicket" class="ticket-detail">Series Pass Required</span>
+                  <template v-else>
+                    <span v-if="event.tickets.member?.available" class="ticket-detail">
+                      Member: {{ event.tickets.member.isFree ? 'Free' : `$${event.tickets.member.price}` }}
+                    </span>
+                    <span v-if="event.tickets.public?.available" class="ticket-detail">
+                      Public: ${{ event.tickets.public.price || 0 }}
+                      <template v-if="event.tickets.public.quantity">
+                        ({{ event.tickets.public.sold || 0 }}/{{ event.tickets.public.quantity }})
+                      </template>
+                    </span>
+                  </template>
+                </template>
+                <span v-else class="status-dim" style="font-size: 11px;">No tickets</span>
+              </td>
+              <td class="col-actions">
+                <NuxtLink :to="`/events/${event.slug || String(event._id)}`" class="link-btn" title="View">View</NuxtLink>
+                <button @click="editEvent(event)" class="link-btn" title="Edit">Edit</button>
+                <button @click="duplicateEvent(event)" class="link-btn" title="Duplicate">Dup</button>
+                <button @click="deleteEvent(event)" class="link-btn link-btn-danger" title="Delete">Del</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div v-else class="empty-state">No past events matching your filters</div>
+
+        <div v-if="pastPageCount > 1" class="pagination">
+          <button class="page-btn" :disabled="pastPage === 1" @click="pastPage--">←</button>
+          <span class="page-info">{{ pastPage }} / {{ pastPageCount }}</span>
+          <button class="page-btn" :disabled="pastPage === pastPageCount" @click="pastPage++">→</button>
+        </div>
+      </div>
+    </template>
+
     <!-- Confirm Delete Modal -->
     <div v-if="confirmDelete.show" class="modal-overlay" @click.self="confirmDelete.show = false">
       <div class="modal">
@@ -199,33 +281,12 @@ const {
 
 const searchQuery = ref('')
 const typeFilter = ref('all')
-const statusFilter = ref('all')
 const seriesFilter = ref('all')
 
-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 === 'all' || event.eventType === typeFilter.value
-
-    const eventStatus = getEventStatus(event)
-    const matchesStatus =
-      statusFilter.value === 'all' || eventStatus.toLowerCase() === statusFilter.value
-
-    const matchesSeries =
-      seriesFilter.value === 'all' ||
-      (seriesFilter.value === 'series-only' && event.series?.isSeriesEvent) ||
-      (seriesFilter.value === 'standalone-only' && !event.series?.isSeriesEvent)
-
-    return matchesSearch && matchesType && matchesStatus && matchesSeries
-  })
-})
+const upcomingPage = ref(1)
+const pastPage = ref(1)
+const UPCOMING_PAGE_SIZE = 10
+const PAST_PAGE_SIZE = 5
 
 const getEventStatus = (event) => {
   const now = new Date()
@@ -237,6 +298,57 @@ const getEventStatus = (event) => {
   return 'Past'
 }
 
+const applyBaseFilters = (list) => {
+  if (!list) return []
+  return list.filter((event) => {
+    const matchesSearch =
+      !searchQuery.value ||
+      event.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+      event.description.toLowerCase().includes(searchQuery.value.toLowerCase())
+
+    const matchesType =
+      typeFilter.value === 'all' || event.eventType === typeFilter.value
+
+    const matchesSeries =
+      seriesFilter.value === 'all' ||
+      (seriesFilter.value === 'series-only' && event.series?.isSeriesEvent) ||
+      (seriesFilter.value === 'standalone-only' && !event.series?.isSeriesEvent)
+
+    return matchesSearch && matchesType && matchesSeries
+  })
+}
+
+const upcomingFiltered = computed(() => {
+  return applyBaseFilters(events.value)
+    .filter((e) => getEventStatus(e) !== 'Past')
+    .sort((a, b) => new Date(a.startDate) - new Date(b.startDate))
+})
+
+const pastFiltered = computed(() => {
+  return applyBaseFilters(events.value)
+    .filter((e) => getEventStatus(e) === 'Past')
+    .sort((a, b) => new Date(b.startDate) - new Date(a.startDate))
+})
+
+const upcomingPageCount = computed(() => Math.max(1, Math.ceil(upcomingFiltered.value.length / UPCOMING_PAGE_SIZE)))
+const pastPageCount = computed(() => Math.max(1, Math.ceil(pastFiltered.value.length / PAST_PAGE_SIZE)))
+
+const upcomingPaged = computed(() => {
+  const start = (upcomingPage.value - 1) * UPCOMING_PAGE_SIZE
+  return upcomingFiltered.value.slice(start, start + UPCOMING_PAGE_SIZE)
+})
+
+const pastPaged = computed(() => {
+  const start = (pastPage.value - 1) * PAST_PAGE_SIZE
+  return pastFiltered.value.slice(start, start + PAST_PAGE_SIZE)
+})
+
+// Reset pagination when filters change
+watch([searchQuery, typeFilter, seriesFilter], () => {
+  upcomingPage.value = 1
+  pastPage.value = 1
+})
+
 const formatDate = (dateString) => {
   return new Date(dateString).toLocaleDateString('en-US', {
     month: 'short',
@@ -309,10 +421,7 @@ const editEvent = (event) => {
 </script>
 
 <style scoped>
-.admin-events {
-  max-width: 1100px;
-  margin: 0 auto;
-}
+.admin-events {}
 
 /* ---- PAGE HEADER ---- */
 .page-header {
@@ -350,9 +459,34 @@ const editEvent = (event) => {
   flex-wrap: wrap;
 }
 
+/* ---- SECTION DIVIDER ---- */
+.section-divider {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 20px 28px 0;
+}
+
+.section-divider .section-label {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  font-weight: normal;
+}
+
+.event-count {
+  font-size: 10px;
+  color: var(--text-faint);
+  background: var(--surface);
+  border: 1px dashed var(--border);
+  padding: 1px 7px;
+  letter-spacing: 0.04em;
+}
+
 /* ---- TABLE ---- */
 .table-wrap {
-  padding: 0 28px 28px;
+  padding: 12px 28px 24px;
 }
 
 table {
@@ -580,6 +714,41 @@ tbody td {
   color: var(--ember);
 }
 
+/* ---- PAGINATION ---- */
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 0 0;
+}
+
+.page-btn {
+  background: none;
+  border: 1px dashed var(--border);
+  color: var(--candle);
+  cursor: pointer;
+  font-family: 'Commit Mono', monospace;
+  font-size: 12px;
+  padding: 3px 10px;
+  transition: border-color 0.1s;
+}
+
+.page-btn:disabled {
+  color: var(--text-faint);
+  border-color: var(--border);
+  cursor: default;
+}
+
+.page-btn:not(:disabled):hover {
+  border-color: var(--candle);
+}
+
+.page-info {
+  font-size: 11px;
+  color: var(--text-faint);
+  letter-spacing: 0.04em;
+}
+
 /* ---- STATES ---- */
 .loading-state {
   text-align: center;
@@ -597,7 +766,7 @@ tbody td {
 
 .empty-state {
   text-align: center;
-  padding: 48px 24px;
+  padding: 32px 24px;
   color: var(--text-faint);
   font-size: 12px;
 }
@@ -699,11 +868,15 @@ tbody td {
 
   .filter-bar {
     flex-direction: column;
-    padding: 12px 20px;
+    padding: 16px 20px;
+  }
+
+  .section-divider {
+    padding: 16px 20px 0;
   }
 
   .table-wrap {
-    padding: 0 12px 20px;
+    padding: 12px 20px 20px;
     overflow-x: auto;
   }