From ae18ce17864a0beb247e9f340246e4f53a4d7721 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sun, 31 Aug 2025 16:07:17 +0200
Subject: [PATCH] Apply glass morphism and Bento grid to admin and board
 dashboards

- Implemented enhanced glass morphism effects with 30px blur
- Added Bento grid layout system (12-column grid)
- Created gradient text effects for dashboard titles
- Added animated entrance effects for all cards
- Implemented stat cards with gradient values
- Added responsive breakpoints for mobile/tablet
- Unified button styles with hover animations
- Removed basic elevation cards in favor of glass cards
---
 pages/admin/dashboard/index.vue | 240 ++++++++++++++++++++++-------
 pages/board/dashboard/index.vue | 260 +++++++++++++++++++++++++-------
 2 files changed, 389 insertions(+), 111 deletions(-)

diff --git a/pages/admin/dashboard/index.vue b/pages/admin/dashboard/index.vue
index 06cd2d2..b89ca10 100644
--- a/pages/admin/dashboard/index.vue
+++ b/pages/admin/dashboard/index.vue
@@ -1,20 +1,20 @@
 <template>
-  <div>
-    <!-- Header -->
-    <div class="mb-6">
-      <h1 class="text-h4 font-weight-bold mb-2">System Administration</h1>
-      <p class="text-body-1 text-medium-emphasis">Complete platform control and management</p>
+  <div class="admin-dashboard">
+    <!-- Enhanced Header with Glass Effect -->
+    <div class="dashboard-header glass-header mb-6">
+      <h1 class="dashboard-title text-gradient">System Administration</h1>
+      <p class="dashboard-subtitle">Complete platform control and management</p>
     </div>
 
-    <!-- System Overview Cards -->
-    <v-row class="mb-6">
-      <v-col cols="12" sm="6" md="3">
-        <v-card elevation="2">
+    <!-- Bento Grid Layout with Glass Cards -->
+    <div class="bento-grid mb-6">
+      <div class="bento-item bento-item--small">
+        <v-card class="glass-card stat-card animated-entrance">
           <v-card-text>
             <div class="d-flex justify-space-between align-center">
               <div>
                 <div class="text-caption text-medium-emphasis">Total Members</div>
-                <div class="text-h5 font-weight-bold">1,247</div>
+                <div class="stat-value">1,247</div>
                 <div class="text-caption">
                   <v-icon size="x-small" color="success">mdi-trending-up</v-icon>
                   <span class="text-success">+12%</span> this month
@@ -26,14 +26,14 @@
             </div>
           </v-card-text>
         </v-card>
-      </v-col>
-      <v-col cols="12" sm="6" md="3">
-        <v-card elevation="2">
+      </div>
+      <div class="bento-item bento-item--small">
+        <v-card class="glass-card stat-card animated-entrance" style="animation-delay: 0.1s;">
           <v-card-text>
             <div class="d-flex justify-space-between align-center">
               <div>
                 <div class="text-caption text-medium-emphasis">Active Sessions</div>
-                <div class="text-h5 font-weight-bold">342</div>
+                <div class="stat-value">342</div>
                 <div class="text-caption">
                   <v-icon size="x-small">mdi-circle</v-icon>
                   <span>Live now</span>
@@ -45,14 +45,14 @@
             </div>
           </v-card-text>
         </v-card>
-      </v-col>
-      <v-col cols="12" sm="6" md="3">
-        <v-card elevation="2">
+      </div>
+      <div class="bento-item bento-item--small">
+        <v-card class="glass-card stat-card animated-entrance" style="animation-delay: 0.2s;">
           <v-card-text>
             <div class="d-flex justify-space-between align-center">
               <div>
                 <div class="text-caption text-medium-emphasis">Revenue MTD</div>
-                <div class="text-h5 font-weight-bold">$48,392</div>
+                <div class="stat-value">$48,392</div>
                 <div class="text-caption">
                   <v-icon size="x-small" color="success">mdi-trending-up</v-icon>
                   <span class="text-success">+8%</span> vs last month
@@ -64,14 +64,14 @@
             </div>
           </v-card-text>
         </v-card>
-      </v-col>
-      <v-col cols="12" sm="6" md="3">
-        <v-card elevation="2">
+      </div>
+      <div class="bento-item bento-item--small">
+        <v-card class="glass-card stat-card animated-entrance" style="animation-delay: 0.3s;">
           <v-card-text>
             <div class="d-flex justify-space-between align-center">
               <div>
                 <div class="text-caption text-medium-emphasis">System Health</div>
-                <div class="text-h5 font-weight-bold">98.5%</div>
+                <div class="stat-value">98.5%</div>
                 <div class="text-caption">
                   <v-icon size="x-small" color="success">mdi-check-circle</v-icon>
                   <span class="text-success">All systems operational</span>
@@ -83,13 +83,13 @@
             </div>
           </v-card-text>
         </v-card>
-      </v-col>
-    </v-row>
+      </div>
+    </div>
 
-      <!-- User Management -->
-      <v-row class="mb-6">
-        <v-col cols="12">
-          <v-card elevation="2">
+      <!-- User Management Section -->
+      <div class="bento-grid mb-6">
+        <div class="bento-item bento-item--full">
+          <v-card class="glass-card animated-entrance" style="animation-delay: 0.4s;">
             <v-card-title>
               <v-icon left>mdi-account-group</v-icon>
               User Management
@@ -151,26 +151,28 @@
               </v-row>
             </v-card-text>
           </v-card>
-        </v-col>
-      </v-row>
+        </div>
+      </div>
 
 
       <!-- Dues Management -->
-      <v-row class="mb-6">
-        <v-col cols="12">
+      <div class="bento-grid mb-6">
+        <div class="bento-item bento-item--full">
           <BoardDuesManagement
             :refresh-trigger="duesRefreshTrigger"
             @view-member="handleViewMember"
             @view-all-members="navigateToMembers"
             @member-updated="handleMemberUpdated"
+            class="animated-entrance"
+            style="animation-delay: 0.5s;"
           />
-        </v-col>
-      </v-row>
+        </div>
+      </div>
 
       <!-- Portal Configuration -->
-      <v-row class="mb-6">
-        <v-col cols="12">
-          <v-card elevation="2">
+      <div class="bento-grid mb-6">
+        <div class="bento-item bento-item--full">
+          <v-card class="glass-card animated-entrance" style="animation-delay: 0.6s;">
             <v-card-title>
               <v-icon left>mdi-cog</v-icon>
               Portal Configuration
@@ -222,13 +224,13 @@
               </v-row>
             </v-card-text>
           </v-card>
-        </v-col>
-      </v-row>
+        </div>
+      </div>
 
       <!-- Data Management -->
-      <v-row class="mb-6">
-        <v-col cols="12">
-          <v-card elevation="2">
+      <div class="bento-grid mb-6">
+        <div class="bento-item bento-item--full">
+          <v-card class="glass-card animated-entrance" style="animation-delay: 0.7s;">
             <v-card-title>
               <v-icon left>mdi-database-cog</v-icon>
               Data Management
@@ -273,8 +275,8 @@
               </v-row>
             </v-card-text>
           </v-card>
-        </v-col>
-      </v-row>
+        </div>
+      </div>
 
     <!-- NocoDB Settings Dialog -->
     <NocoDBSettingsDialog
@@ -903,27 +905,155 @@ onMounted(async () => {
 });
 </script>
 
-<style scoped>
-.v-card {
-  border-radius: 12px !important;
+<style scoped lang="scss">
+.admin-dashboard {
+  padding: 0;
 }
 
-.v-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
-  transition: all 0.3s ease;
+/* Enhanced Header */
+.dashboard-header {
+  margin-bottom: 2rem;
+  padding: 2rem;
+  border-radius: 20px;
+  @include enhanced-glass(0.95, 30px);
+  animation: slide-up 0.6s ease-out;
 }
 
+.dashboard-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 0.5rem;
+  animation: fade-in 0.8s ease-out;
+}
+
+.dashboard-subtitle {
+  color: #71717a;
+  font-size: 1.1rem;
+}
+
+/* Bento Grid Layout */
+.bento-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1.5rem;
+  
+  .bento-item {
+    border-radius: 20px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    &--small { grid-column: span 3; }
+    &--medium { grid-column: span 4; }
+    &--large { grid-column: span 6; }
+    &--xlarge { grid-column: span 8; }
+    &--full { grid-column: span 12; }
+    
+    &:hover {
+      transform: translateY(-4px);
+    }
+  }
+}
+
+/* Glass Card Effects */
+.glass-card {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.95),
+    rgba(255, 255, 255, 0.85),
+    rgba(255, 255, 255, 0.75)
+  ) !important;
+  backdrop-filter: blur(30px) saturate(180%);
+  -webkit-backdrop-filter: blur(30px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  box-shadow: 
+    0 8px 32px 0 rgba(31, 38, 135, 0.15),
+    inset 0 1px 2px rgba(255, 255, 255, 0.6),
+    inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
+  border-radius: 20px !important;
+  
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 
+      0 12px 40px 0 rgba(31, 38, 135, 0.25),
+      inset 0 1px 2px rgba(255, 255, 255, 0.8),
+      inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
+  }
+}
+
+/* Statistics Cards */
+.stat-card {
+  position: relative;
+  overflow: hidden;
+  
+  .stat-value {
+    font-size: 2rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  
+  .text-success {
+    color: #10b981 !important;
+  }
+}
+
+/* Animated Entrance */
+.animated-entrance {
+  animation: slide-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Button Enhancements */
 .v-btn {
   text-transform: none !important;
   font-weight: 600;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
+  }
 }
 
-.v-list-item {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+/* Responsive Design */
+@media (max-width: 1280px) {
+  .bento-grid {
+    .bento-item--small {
+      grid-column: span 6;
+    }
+  }
 }
 
-.v-list-item:last-child {
-  border-bottom: none;
+@media (max-width: 960px) {
+  .bento-grid {
+    .bento-item--small {
+      grid-column: span 12;
+    }
+    .bento-item--medium {
+      grid-column: span 12;
+    }
+  }
 }
 </style>
diff --git a/pages/board/dashboard/index.vue b/pages/board/dashboard/index.vue
index 0d39900..62b0fde 100644
--- a/pages/board/dashboard/index.vue
+++ b/pages/board/dashboard/index.vue
@@ -1,30 +1,28 @@
 <template>
-  <v-container>
+  <div class="board-dashboard">
     <!-- Dues Payment Banner -->
     <DuesPaymentBanner />
     
-    <!-- Welcome Header -->
-    <v-row class="mb-6">
-      <v-col>
-        <h1 class="text-h3 font-weight-bold" style="color: #a31515;">
-          Welcome Back, {{ firstName }}!
-        </h1>
-        <p class="text-h6 text-medium-emphasis">
-          MonacoUSA Board Portal
-        </p>
-        <div class="text-center">
-          <v-chip color="primary" variant="elevated" class="mt-2">
-            <v-icon start>mdi-shield-account</v-icon>
-            Board Member
-          </v-chip>
-        </div>
-      </v-col>
-    </v-row>
+    <!-- Enhanced Welcome Header -->
+    <div class="dashboard-header glass-header mb-6">
+      <h1 class="dashboard-title text-gradient">
+        Welcome Back, {{ firstName }}!
+      </h1>
+      <p class="dashboard-subtitle">
+        MonacoUSA Board Portal
+      </p>
+      <div class="text-center">
+        <v-chip class="glass-badge mt-2">
+          <v-icon start>mdi-shield-account</v-icon>
+          Board Member
+        </v-chip>
+      </div>
+    </div>
 
-    <!-- Board Tools -->
-    <v-row class="mb-6">
-      <v-col cols="12" md="6">
-        <v-card class="pa-4 text-center" elevation="2" hover>
+    <!-- Board Tools with Bento Grid -->
+    <div class="bento-grid mb-6">
+      <div class="bento-item bento-item--large">
+        <v-card class="glass-card pa-4 text-center animated-entrance">
           <v-icon size="48" color="primary" class="mb-2">mdi-calendar</v-icon>
           <h3 class="mb-2">Events</h3>
           <p class="text-body-2 mb-4">View and manage association events</p>
@@ -37,10 +35,10 @@
             View Events
           </v-btn>
         </v-card>
-      </v-col>
+      </div>
       
-      <v-col cols="12" md="6">
-        <v-card class="pa-4 text-center" elevation="2" hover>
+      <div class="bento-item bento-item--large">
+        <v-card class="glass-card pa-4 text-center animated-entrance">
           <v-icon size="48" color="primary" class="mb-2">mdi-account-group</v-icon>
           <h3 class="mb-2">Members</h3>
           <p class="text-body-2 mb-4">View and manage association members</p>
@@ -53,13 +51,13 @@
             View Members
           </v-btn>
         </v-card>
-      </v-col>
-    </v-row>
+      </div>
+    </div>
 
-    <!-- Board Statistics -->
-    <v-row class="mb-6">
-      <v-col cols="12" md="8">
-        <v-card elevation="2">
+    <!-- Board Statistics with Bento Grid -->
+    <div class="bento-grid mb-6">
+      <div class="bento-item bento-item--xlarge">
+        <v-card class="glass-card stat-card animated-entrance" style="animation-delay: 0.2s;">
           <v-card-title class="pa-4" style="background-color: #f5f5f5;">
             <v-icon class="mr-2" color="primary">mdi-chart-box-outline</v-icon>
             Board Overview
@@ -67,24 +65,24 @@
           <v-card-text class="pa-4">
             <v-row>
               <v-col cols="6" md="3" class="text-center">
-                <div class="text-h4 font-weight-bold" style="color: #a31515;">{{ stats.totalMembers }}</div>
+                <div class="stat-value">{{ stats.totalMembers }}</div>
                 <div class="text-body-2">Total Members</div>
-              </v-col>
+              </div>
               <v-col cols="6" md="3" class="text-center">
-                <div class="text-h4 font-weight-bold" style="color: #a31515;">{{ stats.activeMembers }}</div>
+                <div class="stat-value">{{ stats.activeMembers }}</div>
                 <div class="text-body-2">Active Members</div>
-              </v-col>
+              </div>
               <v-col cols="6" md="6" class="text-center">
-                <div class="text-h4 font-weight-bold" style="color: #a31515;">{{ stats.upcomingEvents }}</div>
+                <div class="stat-value">{{ stats.upcomingEvents }}</div>
                 <div class="text-body-2">Upcoming Events</div>
-              </v-col>
-            </v-row>
+              </div>
+            </div>
           </v-card-text>
         </v-card>
-      </v-col>
+      </div>
       
-      <v-col cols="12" md="4">
-        <v-card elevation="2">
+      <div class="bento-item bento-item--medium">
+        <v-card class="glass-card animated-entrance" style="animation-delay: 0.3s;">
           <v-card-title class="pa-4" style="background-color: #f5f5f5;">
             <v-icon class="mr-2" color="primary">mdi-calendar-today</v-icon>
             Next Event
@@ -110,8 +108,8 @@
             </v-btn>
           </v-card-text>
         </v-card>
-      </v-col>
-    </v-row>
+      </div>
+    </div>
 
     <!-- Dues Management Section -->
     <v-row class="mb-6">
@@ -122,8 +120,8 @@
           @view-all-members="navigateToMembers"
           @member-updated="handleMemberUpdated"
         />
-      </v-col>
-    </v-row>
+      </div>
+    </div>
 
 
     <!-- View Member Dialog -->
@@ -139,7 +137,7 @@
       :member="selectedMember"
       @member-updated="handleMemberUpdated"
     />
-  </v-container>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -317,22 +315,146 @@ const generateReport = () => {
 };
 </script>
 
-<style scoped>
-.v-card {
-  border-radius: 12px !important;
+<style scoped lang="scss">
+.board-dashboard {
+  padding: 1rem;
 }
 
-.v-card:hover {
-  transform: translateY(-2px);
-  transition: transform 0.2s ease-in-out;
+/* Enhanced Header */
+.dashboard-header {
+  margin-bottom: 2rem;
+  padding: 2rem;
+  border-radius: 20px;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.95),
+    rgba(255, 255, 255, 0.85)
+  );
+  backdrop-filter: blur(30px) saturate(180%);
+  -webkit-backdrop-filter: blur(30px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  box-shadow: 
+    0 8px 32px 0 rgba(31, 38, 135, 0.15),
+    inset 0 1px 2px rgba(255, 255, 255, 0.6);
+  animation: slide-up 0.6s ease-out;
+  text-align: center;
 }
 
+.dashboard-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 0.5rem;
+  animation: fade-in 0.8s ease-out;
+}
+
+.dashboard-subtitle {
+  color: #71717a;
+  font-size: 1.1rem;
+}
+
+.glass-badge {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
+  color: white !important;
+  font-weight: 600;
+}
+
+/* Bento Grid Layout */
+.bento-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1.5rem;
+  
+  .bento-item {
+    border-radius: 20px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    &--small { grid-column: span 3; }
+    &--medium { grid-column: span 4; }
+    &--large { grid-column: span 6; }
+    &--xlarge { grid-column: span 8; }
+    &--full { grid-column: span 12; }
+    
+    &:hover {
+      transform: translateY(-4px);
+    }
+  }
+}
+
+/* Glass Card Effects */
+.glass-card {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.95),
+    rgba(255, 255, 255, 0.85),
+    rgba(255, 255, 255, 0.75)
+  ) !important;
+  backdrop-filter: blur(30px) saturate(180%);
+  -webkit-backdrop-filter: blur(30px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  box-shadow: 
+    0 8px 32px 0 rgba(31, 38, 135, 0.15),
+    inset 0 1px 2px rgba(255, 255, 255, 0.6),
+    inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
+  border-radius: 20px !important;
+  
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 
+      0 12px 40px 0 rgba(31, 38, 135, 0.25),
+      inset 0 1px 2px rgba(255, 255, 255, 0.8),
+      inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
+  }
+}
+
+/* Statistics Cards */
+.stat-card {
+  .stat-value {
+    font-size: 2rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+/* Animated Entrance */
+.animated-entrance {
+  animation: slide-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Button Enhancements */
 .v-btn {
   text-transform: none !important;
-}
-
-.v-icon {
-  color: #a31515 !important;
+  font-weight: 600;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
+  }
 }
 
 h3 {
@@ -347,4 +469,30 @@ h3 {
 .v-chip {
   font-weight: 600;
 }
+
+/* Responsive Design */
+@media (max-width: 1280px) {
+  .bento-grid {
+    .bento-item--xlarge {
+      grid-column: span 12;
+    }
+    .bento-item--large {
+      grid-column: span 6;
+    }
+    .bento-item--medium {
+      grid-column: span 6;
+    }
+  }
+}
+
+@media (max-width: 960px) {
+  .bento-grid {
+    .bento-item--large {
+      grid-column: span 12;
+    }
+    .bento-item--medium {
+      grid-column: span 12;
+    }
+  }
+}
 </style>