From a0d703e7cb7cf324cc9b00b55bc5da9f63de63d5 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sat, 6 Sep 2025 15:17:54 +0200
Subject: [PATCH] Implement bright glassmorphic UI redesign for Board dashboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add Tailwind CSS configuration with bright glass utilities
- Create glass components (Sidebar, StatCard, DuesCard) with Lucide icons
- Implement new dashboard with limited dues display (4 cards max vs 30+)
- Use translucent white glass effects with Monaco red accents
- Improve visual hierarchy and reduce UI clutter

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 assets/css/tailwind.css               | 291 ++++++++++++++++++
 components/CountUp.vue                |  70 +++++
 components/GlassDuesCard.vue          | 229 ++++++++++++++
 components/GlassSidebar.vue           | 277 +++++++++++++++++
 components/GlassStatCard.vue          | 192 ++++++++++++
 components/SidebarLink.vue            | 111 +++++++
 nuxt.config.ts                        |   8 +-
 pages/board/dashboard/index-glass.vue | 425 ++++++++++++++++++++++++++
 postcss.config.js                     |   6 +
 tailwind.config.js                    | 249 +++++++++++++++
 10 files changed, 1857 insertions(+), 1 deletion(-)
 create mode 100644 assets/css/tailwind.css
 create mode 100644 components/CountUp.vue
 create mode 100644 components/GlassDuesCard.vue
 create mode 100644 components/GlassSidebar.vue
 create mode 100644 components/GlassStatCard.vue
 create mode 100644 components/SidebarLink.vue
 create mode 100644 pages/board/dashboard/index-glass.vue
 create mode 100644 postcss.config.js
 create mode 100644 tailwind.config.js

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
new file mode 100644
index 0000000..6eb8b39
--- /dev/null
+++ b/assets/css/tailwind.css
@@ -0,0 +1,291 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Base layer overrides */
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+  
+  body {
+    @apply bg-gradient-light min-h-screen antialiased;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  }
+
+  /* Typography defaults */
+  h1 {
+    @apply text-4xl font-bold text-gray-800;
+  }
+  
+  h2 {
+    @apply text-3xl font-bold text-gray-800;
+  }
+  
+  h3 {
+    @apply text-2xl font-semibold text-gray-700;
+  }
+  
+  h4 {
+    @apply text-xl font-semibold text-gray-700;
+  }
+  
+  p {
+    @apply text-gray-600;
+  }
+}
+
+/* Component layer */
+@layer components {
+  /* Bright Glass Card Variants */
+  .glass-card-bright {
+    @apply glass rounded-glass p-6 transition-all duration-300;
+  }
+  
+  .glass-card-ultra {
+    @apply glass-ultra rounded-glass p-6 transition-all duration-300;
+  }
+  
+  .glass-card-monaco {
+    @apply glass-monaco rounded-glass p-6 transition-all duration-300;
+  }
+
+  /* Glass Stat Card */
+  .glass-stat-card {
+    @apply glass-light rounded-glass p-6 hover:glass-ultra transition-all duration-300 hover:-translate-y-1 hover:shadow-glass-lg;
+  }
+  
+  .glass-stat-icon {
+    @apply w-12 h-12 rounded-xl bg-glass-monaco-soft flex items-center justify-center mb-4;
+  }
+  
+  .glass-stat-value {
+    @apply text-3xl font-bold text-gray-800 mb-1;
+  }
+  
+  .glass-stat-label {
+    @apply text-sm text-gray-600 uppercase tracking-wide;
+  }
+
+  /* Glass Dues Card */
+  .glass-dues-card {
+    @apply glass rounded-glass p-4 hover:shadow-glass-lg transition-all duration-300;
+  }
+  
+  .glass-dues-header {
+    @apply flex items-center justify-between mb-3;
+  }
+  
+  .glass-dues-avatar {
+    @apply w-10 h-10 rounded-full ring-2 ring-white/60;
+  }
+  
+  .glass-dues-name {
+    @apply font-semibold text-gray-800;
+  }
+  
+  .glass-dues-amount {
+    @apply text-lg font-bold text-monaco-600;
+  }
+  
+  .glass-dues-status {
+    @apply px-3 py-1 rounded-full text-xs font-medium;
+  }
+  
+  .glass-dues-status-overdue {
+    @apply bg-red-100 text-red-700;
+  }
+  
+  .glass-dues-status-upcoming {
+    @apply bg-amber-100 text-amber-700;
+  }
+
+  /* Glass Button Variants */
+  .btn-glass {
+    @apply glass-button px-6 py-2.5 rounded-xl font-medium text-gray-700 hover:text-monaco-600;
+  }
+  
+  .btn-glass-primary {
+    @apply bg-gradient-monaco text-white px-6 py-2.5 rounded-xl font-medium shadow-monaco-sm hover:shadow-monaco transition-all duration-300 hover:-translate-y-0.5;
+  }
+  
+  .btn-glass-secondary {
+    @apply glass px-6 py-2.5 rounded-xl font-medium text-monaco-600 border-monaco-200 hover:bg-glass-monaco-soft;
+  }
+  
+  .btn-glass-ghost {
+    @apply bg-transparent border-2 border-monaco-600 text-monaco-600 px-6 py-2.5 rounded-xl font-medium hover:bg-glass-monaco-soft transition-all duration-300;
+  }
+
+  /* Glass Navigation Items */
+  .nav-item-glass {
+    @apply flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 text-gray-700 hover:bg-glass-monaco-soft hover:text-monaco-600 hover:translate-x-0.5;
+  }
+  
+  .nav-item-glass-active {
+    @apply flex items-center gap-3 px-4 py-3 rounded-xl bg-glass-monaco text-monaco-600 font-medium relative;
+  }
+  
+  .nav-item-indicator {
+    @apply absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-gradient-monaco rounded-r-full;
+  }
+
+  /* Glass Input Fields */
+  .input-glass {
+    @apply glass-input px-4 py-3 rounded-xl w-full;
+  }
+  
+  .select-glass {
+    @apply glass-input px-4 py-3 rounded-xl w-full appearance-none cursor-pointer;
+  }
+  
+  .textarea-glass {
+    @apply glass-input px-4 py-3 rounded-xl w-full resize-none;
+  }
+
+  /* Glass Table */
+  .table-glass {
+    @apply glass-ultra rounded-glass overflow-hidden;
+  }
+  
+  .table-glass thead {
+    @apply bg-glass-monaco-soft border-b border-white/40;
+  }
+  
+  .table-glass th {
+    @apply px-6 py-4 text-left text-sm font-semibold text-gray-700 uppercase tracking-wider;
+  }
+  
+  .table-glass td {
+    @apply px-6 py-4 text-gray-600;
+  }
+  
+  .table-glass tbody tr {
+    @apply border-b border-white/20 hover:bg-glass-monaco-soft transition-colors duration-150;
+  }
+
+  /* Glass Modal/Dialog */
+  .modal-glass {
+    @apply glass-ultra rounded-glass shadow-2xl;
+  }
+  
+  .modal-glass-header {
+    @apply px-6 py-4 border-b border-white/40 bg-gradient-glass;
+  }
+  
+  .modal-glass-body {
+    @apply px-6 py-4;
+  }
+  
+  .modal-glass-footer {
+    @apply px-6 py-4 border-t border-white/40 bg-glass-monaco-soft flex justify-end gap-3;
+  }
+
+  /* Glass Badge */
+  .badge-glass {
+    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-glass border border-white/60;
+  }
+  
+  .badge-glass-monaco {
+    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-glass-monaco text-monaco-700 border-monaco-200;
+  }
+
+  /* Glass Alert */
+  .alert-glass {
+    @apply glass-light rounded-glass p-4 border-l-4;
+  }
+  
+  .alert-glass-success {
+    @apply alert-glass border-green-500 text-green-800;
+  }
+  
+  .alert-glass-warning {
+    @apply alert-glass border-amber-500 text-amber-800;
+  }
+  
+  .alert-glass-error {
+    @apply alert-glass border-red-500 text-red-800;
+  }
+  
+  .alert-glass-info {
+    @apply alert-glass border-blue-500 text-blue-800;
+  }
+}
+
+/* Utility layer */
+@layer utilities {
+  /* Text gradient utilities */
+  .text-gradient-monaco {
+    @apply bg-gradient-monaco bg-clip-text text-transparent;
+  }
+  
+  /* Hover lift effect */
+  .hover-lift {
+    @apply transition-transform duration-300 hover:-translate-y-1;
+  }
+  
+  /* Hover scale effect */
+  .hover-scale {
+    @apply transition-transform duration-300 hover:scale-105;
+  }
+  
+  /* Focus ring Monaco */
+  .focus-monaco {
+    @apply focus:ring-2 focus:ring-monaco-400 focus:ring-offset-2 focus:outline-none;
+  }
+  
+  /* Loading skeleton */
+  .skeleton {
+    @apply animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 rounded-lg;
+  }
+}
+
+/* Custom animations */
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+/* Glass morphism scrollbar */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 9999px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+  border-radius: 9999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
+}
+
+/* Reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
\ No newline at end of file
diff --git a/components/CountUp.vue b/components/CountUp.vue
new file mode 100644
index 0000000..2bce59f
--- /dev/null
+++ b/components/CountUp.vue
@@ -0,0 +1,70 @@
+<template>
+  <span>{{ prefix }}{{ displayValue }}{{ suffix }}</span>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+
+const props = defineProps({
+  endVal: {
+    type: Number,
+    required: true
+  },
+  duration: {
+    type: Number,
+    default: 2
+  },
+  prefix: {
+    type: String,
+    default: ''
+  },
+  suffix: {
+    type: String,
+    default: ''
+  },
+  decimals: {
+    type: Number,
+    default: 0
+  }
+})
+
+const displayValue = ref(0)
+
+const countUp = () => {
+  const startTime = Date.now()
+  const startVal = 0
+  const endVal = props.endVal
+  const duration = props.duration * 1000
+
+  const updateCount = () => {
+    const now = Date.now()
+    const progress = Math.min((now - startTime) / duration, 1)
+    
+    // Easing function for smooth animation
+    const easeOutQuart = 1 - Math.pow(1 - progress, 4)
+    
+    const currentVal = startVal + (endVal - startVal) * easeOutQuart
+    displayValue.value = props.decimals > 0 
+      ? currentVal.toFixed(props.decimals)
+      : Math.round(currentVal).toLocaleString()
+
+    if (progress < 1) {
+      requestAnimationFrame(updateCount)
+    } else {
+      displayValue.value = props.decimals > 0 
+        ? endVal.toFixed(props.decimals)
+        : endVal.toLocaleString()
+    }
+  }
+
+  updateCount()
+}
+
+onMounted(() => {
+  countUp()
+})
+
+watch(() => props.endVal, () => {
+  countUp()
+})
+</script>
\ No newline at end of file
diff --git a/components/GlassDuesCard.vue b/components/GlassDuesCard.vue
new file mode 100644
index 0000000..f5de7ea
--- /dev/null
+++ b/components/GlassDuesCard.vue
@@ -0,0 +1,229 @@
+<template>
+  <div
+    :class="[
+      'glass rounded-glass p-5 transition-all duration-300',
+      'hover:shadow-glass-lg hover:-translate-y-0.5 group'
+    ]"
+  >
+    <!-- Header Section -->
+    <div class="flex items-start justify-between mb-4">
+      <!-- Member Info -->
+      <div class="flex items-center gap-3">
+        <div class="relative">
+          <img
+            :src="member.avatar || '/default-avatar.png'"
+            :alt="member.name"
+            class="w-12 h-12 rounded-full object-cover ring-2 ring-white/60"
+          >
+          <!-- Country Flag Badge -->
+          <div
+            v-if="member.countryCode"
+            class="absolute -bottom-1 -right-1 w-6 h-6 rounded-full overflow-hidden ring-2 ring-white"
+          >
+            <CountryFlag :country="member.countryCode" size="small" />
+          </div>
+        </div>
+        
+        <div>
+          <h4 class="font-semibold text-gray-800">{{ member.name }}</h4>
+          <p class="text-sm text-gray-500">Member #{{ member.id }}</p>
+        </div>
+      </div>
+
+      <!-- Status Badge -->
+      <span
+        :class="[
+          'px-3 py-1 rounded-full text-xs font-medium',
+          status === 'overdue' 
+            ? 'bg-red-50 text-red-700 border border-red-200' 
+            : status === 'upcoming'
+            ? 'bg-amber-50 text-amber-700 border border-amber-200'
+            : 'bg-green-50 text-green-700 border border-green-200'
+        ]"
+      >
+        {{ statusLabel }}
+      </span>
+    </div>
+
+    <!-- Dues Information -->
+    <div class="space-y-3 mb-4">
+      <!-- Amount -->
+      <div class="flex items-center justify-between">
+        <span class="text-sm text-gray-600">Amount Due</span>
+        <span class="text-lg font-bold text-monaco-600">
+          ${{ member.dueAmount }}
+        </span>
+      </div>
+
+      <!-- Due Date -->
+      <div class="flex items-center justify-between">
+        <span class="text-sm text-gray-600">Due Date</span>
+        <span class="text-sm font-medium text-gray-800">
+          {{ formatDate(member.dueDate) }}
+        </span>
+      </div>
+
+      <!-- Days Status -->
+      <div
+        v-if="daysUntilDue !== null"
+        class="flex items-center justify-between"
+      >
+        <span class="text-sm text-gray-600">
+          {{ daysUntilDue > 0 ? 'Days Until Due' : 'Days Overdue' }}
+        </span>
+        <span
+          :class="[
+            'text-sm font-medium',
+            daysUntilDue > 7 
+              ? 'text-gray-800' 
+              : daysUntilDue > 0
+              ? 'text-amber-600'
+              : 'text-red-600'
+          ]"
+        >
+          {{ Math.abs(daysUntilDue) }} {{ Math.abs(daysUntilDue) === 1 ? 'day' : 'days' }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Actions Section -->
+    <div class="flex gap-2">
+      <!-- Mark as Paid - Subtle Design -->
+      <button
+        @click="$emit('mark-paid', member)"
+        class="flex-1 px-3 py-2 rounded-lg bg-white/50 border border-monaco-200 
+               text-monaco-600 text-sm font-medium hover:bg-glass-monaco-soft 
+               hover:border-monaco-300 transition-all duration-200 
+               flex items-center justify-center gap-2"
+      >
+        <Check class="w-4 h-4" />
+        Mark Paid
+      </button>
+
+      <!-- More Options Dropdown -->
+      <div class="relative">
+        <button
+          @click="showDropdown = !showDropdown"
+          class="p-2 rounded-lg bg-white/50 border border-gray-200 
+                 text-gray-600 hover:bg-gray-50 hover:border-gray-300 
+                 transition-all duration-200"
+        >
+          <MoreVertical class="w-4 h-4" />
+        </button>
+
+        <!-- Dropdown Menu -->
+        <transition name="dropdown">
+          <div
+            v-if="showDropdown"
+            class="absolute right-0 mt-2 w-48 glass-ultra rounded-xl shadow-lg 
+                   border border-white/60 overflow-hidden z-50"
+          >
+            <button
+              v-for="action in dropdownActions"
+              :key="action.label"
+              @click="handleAction(action)"
+              class="w-full px-4 py-3 text-left text-sm text-gray-700 
+                     hover:bg-glass-monaco-soft hover:text-monaco-600 
+                     transition-colors flex items-center gap-3"
+            >
+              <component :is="action.icon" class="w-4 h-4" />
+              {{ action.label }}
+            </button>
+          </div>
+        </transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { 
+  Check, 
+  MoreVertical, 
+  Mail, 
+  Phone, 
+  FileText, 
+  Calendar,
+  AlertCircle
+} from 'lucide-vue-next'
+
+const props = defineProps({
+  member: {
+    type: Object,
+    required: true
+  },
+  status: {
+    type: String,
+    default: 'upcoming',
+    validator: (value) => ['overdue', 'upcoming', 'paid'].includes(value)
+  }
+})
+
+const emit = defineEmits(['mark-paid', 'send-reminder', 'view-details', 'schedule-payment'])
+
+const showDropdown = ref(false)
+
+const statusLabel = computed(() => {
+  const labels = {
+    overdue: 'Overdue',
+    upcoming: 'Upcoming',
+    paid: 'Paid'
+  }
+  return labels[props.status] || 'Upcoming'
+})
+
+const daysUntilDue = computed(() => {
+  if (!props.member.dueDate) return null
+  
+  const today = new Date()
+  const dueDate = new Date(props.member.dueDate)
+  const diffTime = dueDate - today
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+  
+  return diffDays
+})
+
+const dropdownActions = [
+  { icon: Mail, label: 'Send Reminder', action: 'send-reminder' },
+  { icon: Calendar, label: 'Schedule Payment', action: 'schedule-payment' },
+  { icon: FileText, label: 'View Details', action: 'view-details' },
+  { icon: Phone, label: 'Contact Member', action: 'contact' },
+  { icon: AlertCircle, label: 'Report Issue', action: 'report' }
+]
+
+const handleAction = (action) => {
+  showDropdown.value = false
+  emit(action.action, props.member)
+}
+
+const formatDate = (date) => {
+  if (!date) return 'Not set'
+  return new Date(date).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  })
+}
+
+// Placeholder for CountryFlag component
+const CountryFlag = {
+  name: 'CountryFlag',
+  props: ['country', 'size'],
+  template: '<span></span>'
+}
+</script>
+
+<style scoped>
+/* Dropdown animation */
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.2s ease;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>
\ No newline at end of file
diff --git a/components/GlassSidebar.vue b/components/GlassSidebar.vue
new file mode 100644
index 0000000..340b5c8
--- /dev/null
+++ b/components/GlassSidebar.vue
@@ -0,0 +1,277 @@
+<template>
+  <aside
+    :class="[
+      'fixed left-0 top-0 h-full z-40 transition-all duration-300 glass-sidebar',
+      isCollapsed ? 'w-20' : 'w-72',
+      isMobile && !isOpen ? '-translate-x-full' : 'translate-x-0'
+    ]"
+  >
+    <!-- Logo Section -->
+    <div class="flex items-center justify-between p-6 border-b border-white/20">
+      <div class="flex items-center gap-3">
+        <img 
+          src="/MONACOUSA-Flags_376x376.png" 
+          alt="MonacoUSA" 
+          class="w-10 h-10 rounded-xl shadow-soft"
+        >
+        <transition name="fade">
+          <div v-if="!isCollapsed" class="flex flex-col">
+            <span class="text-lg font-bold text-gradient-monaco">MonacoUSA</span>
+            <span class="text-xs text-gray-500">Board Portal</span>
+          </div>
+        </transition>
+      </div>
+      
+      <!-- Collapse Button (Desktop) -->
+      <button
+        v-if="!isMobile"
+        @click="toggleCollapse"
+        class="p-2 rounded-lg hover:bg-glass-monaco-soft transition-colors"
+      >
+        <ChevronLeft v-if="!isCollapsed" class="w-5 h-5 text-gray-600" />
+        <ChevronRight v-else class="w-5 h-5 text-gray-600" />
+      </button>
+    </div>
+
+    <!-- Navigation Section -->
+    <nav class="px-4 py-6 space-y-2 overflow-y-auto scrollbar-thin h-[calc(100%-200px)]">
+      <!-- Main Navigation -->
+      <div class="space-y-1">
+        <SidebarLink
+          v-for="item in mainNavItems"
+          :key="item.path"
+          :to="item.path"
+          :icon="item.icon"
+          :label="item.label"
+          :badge="item.badge"
+          :collapsed="isCollapsed"
+        />
+      </div>
+
+      <!-- Divider -->
+      <div class="my-4 border-t border-white/20"></div>
+
+      <!-- Secondary Navigation -->
+      <div class="space-y-1">
+        <div v-if="!isCollapsed" class="px-3 py-2">
+          <span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">
+            Management
+          </span>
+        </div>
+        <SidebarLink
+          v-for="item in managementItems"
+          :key="item.path"
+          :to="item.path"
+          :icon="item.icon"
+          :label="item.label"
+          :badge="item.badge"
+          :collapsed="isCollapsed"
+        />
+      </div>
+
+      <!-- Settings Section -->
+      <div class="mt-6 pt-6 border-t border-white/20 space-y-1">
+        <SidebarLink
+          v-for="item in settingsItems"
+          :key="item.path"
+          :to="item.path"
+          :icon="item.icon"
+          :label="item.label"
+          :collapsed="isCollapsed"
+        />
+      </div>
+    </nav>
+
+    <!-- User Profile Section -->
+    <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-white/20 bg-glass-light">
+      <div class="flex items-center gap-3">
+        <div class="relative">
+          <img
+            :src="userAvatar"
+            alt="Profile"
+            class="w-10 h-10 rounded-full ring-2 ring-white/60"
+          >
+          <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full ring-2 ring-white"></div>
+        </div>
+        <transition name="fade">
+          <div v-if="!isCollapsed" class="flex-1">
+            <p class="text-sm font-semibold text-gray-800">{{ userName }}</p>
+            <p class="text-xs text-gray-500">{{ userRole }}</p>
+          </div>
+        </transition>
+        <transition name="fade">
+          <button
+            v-if="!isCollapsed"
+            @click="$emit('logout')"
+            class="p-2 rounded-lg hover:bg-glass-monaco-soft transition-colors"
+          >
+            <LogOut class="w-4 h-4 text-gray-600" />
+          </button>
+        </transition>
+      </div>
+    </div>
+
+    <!-- Mobile Close Overlay -->
+    <div
+      v-if="isMobile && isOpen"
+      @click="$emit('close')"
+      class="fixed inset-0 bg-black/20 backdrop-blur-sm -z-10"
+    ></div>
+  </aside>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import {
+  LayoutDashboard,
+  Users,
+  Calendar,
+  DollarSign,
+  FileText,
+  Mail,
+  BarChart3,
+  Settings,
+  HelpCircle,
+  LogOut,
+  ChevronLeft,
+  ChevronRight,
+  Bell,
+  Shield,
+  Globe,
+  Briefcase
+} from 'lucide-vue-next'
+
+// Component for individual sidebar links
+import SidebarLink from './SidebarLink.vue'
+
+const props = defineProps({
+  isOpen: {
+    type: Boolean,
+    default: true
+  },
+  isMobile: {
+    type: Boolean,
+    default: false
+  },
+  userName: {
+    type: String,
+    default: 'Board Member'
+  },
+  userRole: {
+    type: String,
+    default: 'Administrator'
+  },
+  userAvatar: {
+    type: String,
+    default: '/default-avatar.png'
+  }
+})
+
+const emit = defineEmits(['close', 'logout'])
+
+const isCollapsed = ref(false)
+const route = useRoute()
+
+const toggleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value
+}
+
+// Navigation items with Lucide icons
+const mainNavItems = [
+  {
+    path: '/board/dashboard',
+    icon: LayoutDashboard,
+    label: 'Dashboard',
+    badge: null
+  },
+  {
+    path: '/board/members',
+    icon: Users,
+    label: 'Members',
+    badge: '1,234'
+  },
+  {
+    path: '/board/events',
+    icon: Calendar,
+    label: 'Events',
+    badge: '3'
+  },
+  {
+    path: '/board/dues',
+    icon: DollarSign,
+    label: 'Dues & Payments',
+    badge: '12'
+  }
+]
+
+const managementItems = [
+  {
+    path: '/board/documents',
+    icon: FileText,
+    label: 'Documents',
+    badge: null
+  },
+  {
+    path: '/board/communications',
+    icon: Mail,
+    label: 'Communications',
+    badge: '5'
+  },
+  {
+    path: '/board/reports',
+    icon: BarChart3,
+    label: 'Reports',
+    badge: null
+  },
+  {
+    path: '/board/governance',
+    icon: Shield,
+    label: 'Governance',
+    badge: null
+  }
+]
+
+const settingsItems = [
+  {
+    path: '/board/settings',
+    icon: Settings,
+    label: 'Settings',
+    badge: null
+  },
+  {
+    path: '/board/help',
+    icon: HelpCircle,
+    label: 'Help & Support',
+    badge: null
+  }
+]
+</script>
+
+<style scoped>
+/* Fade transition for collapsing elements */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Custom scrollbar for navigation */
+.scrollbar-thin::-webkit-scrollbar {
+  width: 6px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 9999px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+  border-radius: 9999px;
+}
+</style>
\ No newline at end of file
diff --git a/components/GlassStatCard.vue b/components/GlassStatCard.vue
new file mode 100644
index 0000000..91a85b3
--- /dev/null
+++ b/components/GlassStatCard.vue
@@ -0,0 +1,192 @@
+<template>
+  <div
+    :class="[
+      'glass-stat-card group',
+      variant === 'ultra' ? 'glass-ultra' : 'glass-light',
+      'rounded-glass p-6 transition-all duration-300',
+      'hover:-translate-y-1 hover:shadow-glass-lg cursor-pointer'
+    ]"
+    @click="$emit('click')"
+  >
+    <!-- Icon Section -->
+    <div 
+      :class="[
+        'glass-stat-icon',
+        iconBgClass,
+        'w-14 h-14 rounded-2xl flex items-center justify-center mb-4',
+        'transition-transform duration-300 group-hover:scale-110'
+      ]"
+    >
+      <component
+        :is="icon"
+        :class="[iconColorClass, 'w-7 h-7']"
+      />
+    </div>
+
+    <!-- Content Section -->
+    <div class="space-y-2">
+      <!-- Label -->
+      <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">
+        {{ label }}
+      </p>
+
+      <!-- Value with Animation -->
+      <div class="flex items-baseline gap-2">
+        <CountUp
+          v-if="animated"
+          :end-val="numericValue"
+          :duration="2"
+          :prefix="prefix"
+          :suffix="suffix"
+          class="text-3xl font-bold text-gray-800"
+        />
+        <p v-else class="text-3xl font-bold text-gray-800">
+          {{ prefix }}{{ value }}{{ suffix }}
+        </p>
+        
+        <!-- Change Indicator -->
+        <div
+          v-if="change"
+          :class="[
+            'flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium',
+            changeType === 'increase' 
+              ? 'bg-green-100 text-green-700' 
+              : changeType === 'decrease'
+              ? 'bg-red-100 text-red-700'
+              : 'bg-gray-100 text-gray-700'
+          ]"
+        >
+          <TrendingUp v-if="changeType === 'increase'" class="w-3 h-3" />
+          <TrendingDown v-else-if="changeType === 'decrease'" class="w-3 h-3" />
+          <span>{{ change }}</span>
+        </div>
+      </div>
+
+      <!-- Description -->
+      <p v-if="description" class="text-sm text-gray-600">
+        {{ description }}
+      </p>
+
+      <!-- Progress Bar -->
+      <div v-if="showProgress" class="mt-3">
+        <div class="flex justify-between text-xs text-gray-500 mb-1">
+          <span>Progress</span>
+          <span>{{ progressValue }}%</span>
+        </div>
+        <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
+          <div
+            :style="{ width: `${progressValue}%` }"
+            class="h-full bg-gradient-monaco rounded-full transition-all duration-500"
+          ></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Action Link -->
+    <div
+      v-if="actionLabel"
+      class="mt-4 pt-4 border-t border-white/40 flex items-center justify-between group/link"
+    >
+      <span class="text-sm font-medium text-monaco-600 group-hover/link:text-monaco-700">
+        {{ actionLabel }}
+      </span>
+      <ArrowRight class="w-4 h-4 text-monaco-600 transition-transform group-hover/link:translate-x-1" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { TrendingUp, TrendingDown, ArrowRight } from 'lucide-vue-next'
+import CountUp from './CountUp.vue'
+
+const props = defineProps({
+  icon: {
+    type: Object,
+    required: true
+  },
+  label: {
+    type: String,
+    required: true
+  },
+  value: {
+    type: [String, Number],
+    required: true
+  },
+  prefix: {
+    type: String,
+    default: ''
+  },
+  suffix: {
+    type: String,
+    default: ''
+  },
+  change: {
+    type: String,
+    default: null
+  },
+  changeType: {
+    type: String,
+    default: null,
+    validator: (value) => ['increase', 'decrease', 'neutral'].includes(value)
+  },
+  description: {
+    type: String,
+    default: null
+  },
+  actionLabel: {
+    type: String,
+    default: null
+  },
+  variant: {
+    type: String,
+    default: 'light',
+    validator: (value) => ['light', 'ultra'].includes(value)
+  },
+  iconColor: {
+    type: String,
+    default: 'monaco'
+  },
+  animated: {
+    type: Boolean,
+    default: true
+  },
+  showProgress: {
+    type: Boolean,
+    default: false
+  },
+  progressValue: {
+    type: Number,
+    default: 0
+  }
+})
+
+const emit = defineEmits(['click'])
+
+const numericValue = computed(() => {
+  if (typeof props.value === 'number') return props.value
+  return parseFloat(props.value.replace(/[^0-9.-]/g, '')) || 0
+})
+
+const iconBgClass = computed(() => {
+  const colors = {
+    monaco: 'bg-glass-monaco-soft',
+    green: 'bg-green-50',
+    blue: 'bg-blue-50',
+    amber: 'bg-amber-50',
+    purple: 'bg-purple-50'
+  }
+  return colors[props.iconColor] || colors.monaco
+})
+
+const iconColorClass = computed(() => {
+  const colors = {
+    monaco: 'text-monaco-600',
+    green: 'text-green-600',
+    blue: 'text-blue-600',
+    amber: 'text-amber-600',
+    purple: 'text-purple-600'
+  }
+  return colors[props.iconColor] || colors.monaco
+})
+</script>
\ No newline at end of file
diff --git a/components/SidebarLink.vue b/components/SidebarLink.vue
new file mode 100644
index 0000000..3e35745
--- /dev/null
+++ b/components/SidebarLink.vue
@@ -0,0 +1,111 @@
+<template>
+  <NuxtLink
+    :to="to"
+    :class="[
+      'flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200 group relative',
+      isActive 
+        ? 'bg-glass-monaco text-monaco-600 font-medium shadow-soft' 
+        : 'text-gray-700 hover:bg-glass-monaco-soft hover:text-monaco-600 hover:translate-x-0.5'
+    ]"
+  >
+    <!-- Active Indicator -->
+    <div
+      v-if="isActive"
+      class="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-gradient-monaco rounded-r-full"
+    ></div>
+
+    <!-- Icon -->
+    <component
+      :is="icon"
+      :class="[
+        'flex-shrink-0 transition-colors',
+        collapsed ? 'w-6 h-6' : 'w-5 h-5',
+        isActive ? 'text-monaco-600' : 'text-gray-500 group-hover:text-monaco-600'
+      ]"
+    />
+
+    <!-- Label and Badge -->
+    <transition name="slide">
+      <div v-if="!collapsed" class="flex-1 flex items-center justify-between">
+        <span class="text-sm font-medium">{{ label }}</span>
+        
+        <!-- Badge -->
+        <span
+          v-if="badge"
+          :class="[
+            'px-2 py-0.5 text-xs rounded-full font-medium transition-colors',
+            isActive 
+              ? 'bg-monaco-600 text-white' 
+              : 'bg-glass-monaco-soft text-monaco-700 group-hover:bg-monaco-100'
+          ]"
+        >
+          {{ badge }}
+        </span>
+      </div>
+    </transition>
+
+    <!-- Tooltip for collapsed state -->
+    <div
+      v-if="collapsed"
+      class="absolute left-full ml-2 px-3 py-2 bg-gray-900 text-white text-sm rounded-lg 
+             opacity-0 invisible group-hover:opacity-100 group-hover:visible 
+             transition-all duration-200 whitespace-nowrap z-50"
+    >
+      {{ label }}
+      <div class="absolute left-0 top-1/2 -translate-x-1 -translate-y-1/2 
+                  w-0 h-0 border-4 border-transparent border-r-gray-900"></div>
+    </div>
+  </NuxtLink>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const props = defineProps({
+  to: {
+    type: String,
+    required: true
+  },
+  icon: {
+    type: Object,
+    required: true
+  },
+  label: {
+    type: String,
+    required: true
+  },
+  badge: {
+    type: [String, Number],
+    default: null
+  },
+  collapsed: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const route = useRoute()
+
+const isActive = computed(() => {
+  return route.path === props.to || route.path.startsWith(props.to + '/')
+})
+</script>
+
+<style scoped>
+/* Slide transition for label */
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 0.2s ease;
+}
+
+.slide-enter-from {
+  opacity: 0;
+  transform: translateX(-10px);
+}
+
+.slide-leave-to {
+  opacity: 0;
+  transform: translateX(-10px);
+}
+</style>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4285951..3daa790 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -15,7 +15,13 @@ export default defineNuxtConfig({
     }
   },
   modules: ["vuetify-nuxt-module", "@vueuse/motion/nuxt"],
-  css: ["~/assets/scss/main.scss"],
+  css: ["~/assets/css/tailwind.css", "~/assets/scss/main.scss"],
+  postcss: {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  },
   app: {
     head: {
       titleTemplate: "%s • MonacoUSA Portal",
diff --git a/pages/board/dashboard/index-glass.vue b/pages/board/dashboard/index-glass.vue
new file mode 100644
index 0000000..dd85e42
--- /dev/null
+++ b/pages/board/dashboard/index-glass.vue
@@ -0,0 +1,425 @@
+<template>
+  <div class="min-h-screen bg-gradient-light">
+    <!-- Glass Sidebar -->
+    <GlassSidebar
+      :is-open="sidebarOpen"
+      :is-mobile="isMobile"
+      :user-name="firstName"
+      :user-role="userRole"
+      :user-avatar="userAvatar"
+      @close="sidebarOpen = false"
+      @logout="handleLogout"
+    />
+
+    <!-- Main Content Area -->
+    <div :class="['transition-all duration-300', isMobile ? 'ml-0' : 'ml-72']">
+      <!-- Glass Navigation Bar -->
+      <header class="glass-navbar sticky top-0 z-30 px-6 py-4">
+        <div class="flex items-center justify-between">
+          <!-- Mobile Menu Toggle -->
+          <button
+            v-if="isMobile"
+            @click="sidebarOpen = !sidebarOpen"
+            class="p-2 rounded-lg hover:bg-glass-monaco-soft transition-colors lg:hidden"
+          >
+            <Menu class="w-6 h-6 text-gray-700" />
+          </button>
+
+          <!-- Page Title -->
+          <div class="flex items-center gap-4">
+            <h1 class="text-2xl font-bold text-gradient-monaco">Board Dashboard</h1>
+            <span class="px-3 py-1 rounded-full bg-glass-monaco-soft text-monaco-600 text-sm font-medium">
+              {{ currentDate }}
+            </span>
+          </div>
+
+          <!-- Header Actions -->
+          <div class="flex items-center gap-3">
+            <!-- Notifications -->
+            <button class="relative p-2 rounded-lg hover:bg-glass-monaco-soft transition-colors">
+              <Bell class="w-5 h-5 text-gray-700" />
+              <span class="absolute top-1 right-1 w-2 h-2 bg-monaco-600 rounded-full"></span>
+            </button>
+
+            <!-- Quick Actions -->
+            <button
+              @click="showQuickActions = !showQuickActions"
+              class="btn-glass-primary flex items-center gap-2"
+            >
+              <Plus class="w-4 h-4" />
+              Quick Action
+            </button>
+          </div>
+        </div>
+      </header>
+
+      <!-- Dashboard Content -->
+      <main class="p-6 space-y-6">
+        <!-- Welcome Section -->
+        <div class="glass-ultra rounded-glass p-8 text-center animate-fade-in">
+          <h2 class="text-3xl font-bold text-gray-800 mb-2">
+            Welcome back, {{ firstName }}!
+          </h2>
+          <p class="text-gray-600">
+            Here's an overview of MonacoUSA's current status and activities.
+          </p>
+        </div>
+
+        <!-- Statistics Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          <GlassStatCard
+            v-for="stat in stats"
+            :key="stat.label"
+            :icon="stat.icon"
+            :label="stat.label"
+            :value="stat.value"
+            :prefix="stat.prefix"
+            :suffix="stat.suffix"
+            :change="stat.change"
+            :change-type="stat.changeType"
+            :icon-color="stat.color"
+            :action-label="stat.actionLabel"
+            @click="handleStatClick(stat)"
+          />
+        </div>
+
+        <!-- Dues Management Section - LIMITED TO 4 CARDS -->
+        <div class="space-y-4">
+          <div class="flex items-center justify-between">
+            <h3 class="text-xl font-semibold text-gray-800">Member Dues Overview</h3>
+            <div class="flex items-center gap-3">
+              <!-- Filter Tabs -->
+              <div class="glass rounded-full p-1 flex gap-1">
+                <button
+                  v-for="tab in duesTabs"
+                  :key="tab.id"
+                  @click="activeDuesTab = tab.id"
+                  :class="[
+                    'px-4 py-2 rounded-full text-sm font-medium transition-all',
+                    activeDuesTab === tab.id
+                      ? 'bg-gradient-monaco text-white shadow-monaco-sm'
+                      : 'text-gray-600 hover:text-monaco-600 hover:bg-glass-monaco-soft'
+                  ]"
+                >
+                  {{ tab.label }}
+                  <span v-if="tab.count" class="ml-1">({{ tab.count }})</span>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Dues Cards Grid - MAX 4 VISIBLE -->
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            <GlassDuesCard
+              v-for="member in visibleDuesMembers"
+              :key="member.id"
+              :member="member"
+              :status="activeDuesTab"
+              @mark-paid="handleMarkPaid"
+              @send-reminder="handleSendReminder"
+              @view-details="handleViewDetails"
+            />
+          </div>
+
+          <!-- View All Button -->
+          <div v-if="totalDuesMembers > 4" class="text-center">
+            <button
+              @click="navigateToFullDuesList"
+              class="btn-glass-secondary inline-flex items-center gap-2"
+            >
+              View All {{ totalDuesMembers }} Members
+              <ArrowRight class="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+
+        <!-- Quick Actions Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <!-- Upcoming Events Card -->
+          <div class="glass-card-bright">
+            <div class="flex items-center justify-between mb-4">
+              <h3 class="font-semibold text-gray-800">Upcoming Events</h3>
+              <Calendar class="w-5 h-5 text-monaco-600" />
+            </div>
+            <div v-if="nextEvent" class="space-y-3">
+              <div class="p-4 bg-glass-monaco-soft rounded-xl">
+                <h4 class="font-medium text-gray-800">{{ nextEvent.title }}</h4>
+                <p class="text-sm text-gray-600 mt-1">{{ nextEvent.date }}</p>
+                <p class="text-xs text-gray-500 mt-2">{{ nextEvent.attendees }} attendees</p>
+              </div>
+              <button class="w-full btn-glass text-sm">
+                View All Events
+              </button>
+            </div>
+            <div v-else class="text-center py-8 text-gray-500">
+              No upcoming events
+            </div>
+          </div>
+
+          <!-- Recent Activity Card -->
+          <div class="glass-card-bright">
+            <div class="flex items-center justify-between mb-4">
+              <h3 class="font-semibold text-gray-800">Recent Activity</h3>
+              <Activity class="w-5 h-5 text-monaco-600" />
+            </div>
+            <div class="space-y-3">
+              <div
+                v-for="activity in recentActivity"
+                :key="activity.id"
+                class="flex items-start gap-3 p-3 rounded-lg hover:bg-glass-monaco-soft transition-colors"
+              >
+                <div class="w-2 h-2 bg-monaco-600 rounded-full mt-1.5"></div>
+                <div class="flex-1">
+                  <p class="text-sm text-gray-700">{{ activity.description }}</p>
+                  <p class="text-xs text-gray-500 mt-1">{{ activity.time }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Quick Links Card -->
+          <div class="glass-card-bright">
+            <div class="flex items-center justify-between mb-4">
+              <h3 class="font-semibold text-gray-800">Quick Actions</h3>
+              <Zap class="w-5 h-5 text-monaco-600" />
+            </div>
+            <div class="grid grid-cols-2 gap-3">
+              <button
+                v-for="action in quickActions"
+                :key="action.label"
+                @click="action.handler"
+                class="p-3 rounded-xl bg-white/50 hover:bg-glass-monaco-soft 
+                       transition-all hover:scale-105 group text-center"
+              >
+                <component
+                  :is="action.icon"
+                  class="w-6 h-6 text-gray-600 group-hover:text-monaco-600 mx-auto mb-2"
+                />
+                <span class="text-xs text-gray-700 group-hover:text-monaco-600 font-medium">
+                  {{ action.label }}
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import { useRouter } from 'vue-router'
+import { 
+  Menu, Bell, Plus, ArrowRight, Calendar, Activity, Zap,
+  Users, DollarSign, FileText, Mail, TrendingUp, Settings,
+  LayoutDashboard, UserPlus, Send, Download
+} from 'lucide-vue-next'
+
+// Import our glass components
+import GlassSidebar from '~/components/GlassSidebar.vue'
+import GlassStatCard from '~/components/GlassStatCard.vue'
+import GlassDuesCard from '~/components/GlassDuesCard.vue'
+
+// Page configuration
+definePageMeta({
+  layout: 'board',
+  middleware: 'board-auth'
+})
+
+const router = useRouter()
+
+// Reactive state
+const sidebarOpen = ref(false)
+const isMobile = ref(false)
+const showQuickActions = ref(false)
+const activeDuesTab = ref('overdue')
+const isLoading = ref(false)
+
+// User data
+const firstName = ref('Board Member')
+const userRole = ref('Administrator')
+const userAvatar = ref('/default-avatar.png')
+
+// Current date
+const currentDate = computed(() => {
+  return new Date().toLocaleDateString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  })
+})
+
+// Statistics data with Lucide icons
+const stats = ref([
+  {
+    icon: Users,
+    label: 'Total Members',
+    value: 1234,
+    change: '+12%',
+    changeType: 'increase',
+    color: 'monaco',
+    actionLabel: 'View all members'
+  },
+  {
+    icon: DollarSign,
+    label: 'Dues Collected',
+    value: 45678,
+    prefix: '$',
+    change: '+8%',
+    changeType: 'increase',
+    color: 'green',
+    actionLabel: 'View payments'
+  },
+  {
+    icon: Calendar,
+    label: 'Upcoming Events',
+    value: 5,
+    change: '2 this week',
+    changeType: 'neutral',
+    color: 'blue',
+    actionLabel: 'View calendar'
+  },
+  {
+    icon: TrendingUp,
+    label: 'Growth Rate',
+    value: 23,
+    suffix: '%',
+    change: '+3%',
+    changeType: 'increase',
+    color: 'purple',
+    actionLabel: 'View report'
+  }
+])
+
+// Dues tabs
+const duesTabs = ref([
+  { id: 'overdue', label: 'Overdue', count: 12 },
+  { id: 'upcoming', label: 'Upcoming', count: 24 },
+  { id: 'paid', label: 'Recently Paid', count: 8 }
+])
+
+// Sample dues members data - LIMITED TO 4
+const duesMembers = ref([
+  {
+    id: 1,
+    name: 'John Smith',
+    avatar: '/avatar1.jpg',
+    countryCode: 'US',
+    dueAmount: 250,
+    dueDate: '2024-01-15'
+  },
+  {
+    id: 2,
+    name: 'Marie Dubois',
+    avatar: '/avatar2.jpg',
+    countryCode: 'MC',
+    dueAmount: 250,
+    dueDate: '2024-01-20'
+  },
+  {
+    id: 3,
+    name: 'Alessandro Rossi',
+    avatar: '/avatar3.jpg',
+    countryCode: 'IT',
+    dueAmount: 250,
+    dueDate: '2024-01-25'
+  },
+  {
+    id: 4,
+    name: 'Emma Wilson',
+    avatar: '/avatar4.jpg',
+    countryCode: 'GB',
+    dueAmount: 250,
+    dueDate: '2024-01-30'
+  }
+])
+
+// Computed: visible dues members (max 4)
+const visibleDuesMembers = computed(() => {
+  return duesMembers.value.slice(0, 4)
+})
+
+const totalDuesMembers = computed(() => {
+  const tab = duesTabs.value.find(t => t.id === activeDuesTab.value)
+  return tab ? tab.count : 0
+})
+
+// Next event
+const nextEvent = ref({
+  title: 'Annual Gala Dinner',
+  date: 'January 28, 2024',
+  attendees: 150
+})
+
+// Recent activity
+const recentActivity = ref([
+  { id: 1, description: 'New member John Doe joined', time: '2 hours ago' },
+  { id: 2, description: 'Payment received from Jane Smith', time: '5 hours ago' },
+  { id: 3, description: 'Event "Wine Tasting" created', time: '1 day ago' }
+])
+
+// Quick actions
+const quickActions = [
+  { icon: UserPlus, label: 'Add Member', handler: () => router.push('/board/members/new') },
+  { icon: Calendar, label: 'New Event', handler: () => router.push('/board/events/new') },
+  { icon: Send, label: 'Send Email', handler: () => router.push('/board/communications') },
+  { icon: Download, label: 'Export Data', handler: () => generateReport() }
+]
+
+// Event handlers
+const handleStatClick = (stat) => {
+  console.log('Stat clicked:', stat.label)
+}
+
+const handleMarkPaid = (member) => {
+  console.log('Mark paid:', member.name)
+  // Implement payment marking logic
+}
+
+const handleSendReminder = (member) => {
+  console.log('Send reminder:', member.name)
+  // Implement reminder logic
+}
+
+const handleViewDetails = (member) => {
+  router.push(`/board/members/${member.id}`)
+}
+
+const navigateToFullDuesList = () => {
+  router.push('/board/dues')
+}
+
+const handleLogout = () => {
+  // Implement logout logic
+  router.push('/logout')
+}
+
+const generateReport = () => {
+  console.log('Generating report...')
+  // Implement report generation
+}
+
+// Check if mobile
+const checkMobile = () => {
+  isMobile.value = window.innerWidth < 1024
+  if (!isMobile.value) {
+    sidebarOpen.value = false
+  }
+}
+
+// Lifecycle
+onMounted(() => {
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', checkMobile)
+})
+</script>
+
+<style scoped>
+/* Any additional custom styles */
+</style>
\ No newline at end of file
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..e99ebc2
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..a50504b
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,249 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./components/**/*.{js,vue,ts}",
+    "./layouts/**/*.vue",
+    "./pages/**/*.vue",
+    "./plugins/**/*.{js,ts}",
+    "./app.vue",
+    "./error.vue",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // Monaco Red Spectrum
+        'monaco': {
+          50: '#fef2f2',
+          100: '#fee2e2',
+          200: '#fecaca',
+          300: '#fca5a5',
+          400: '#f87171',
+          500: '#ef4444',
+          600: '#dc2626', // Primary
+          700: '#b91c1c',
+          800: '#991b1b',
+          900: '#7f1d1d',
+        },
+        // Glass Colors
+        'glass': {
+          'white': 'rgba(255, 255, 255, 0.7)',
+          'light': 'rgba(255, 255, 255, 0.85)',
+          'ultra-light': 'rgba(255, 255, 255, 0.95)',
+          'border': 'rgba(255, 255, 255, 0.6)',
+          'monaco': 'rgba(220, 38, 38, 0.1)',
+          'monaco-soft': 'rgba(220, 38, 38, 0.05)',
+        },
+      },
+      backgroundImage: {
+        // Bright gradients
+        'gradient-light': 'linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%)',
+        'gradient-soft': 'linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%)',
+        'gradient-monaco-soft': 'linear-gradient(135deg, #fff5f5 0%, #ffffff 100%)',
+        // Monaco gradients
+        'gradient-monaco': 'linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)',
+        'gradient-monaco-light': 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
+        // Glass gradients
+        'gradient-glass': 'linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 100%)',
+        'gradient-glass-soft': 'linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 100%)',
+      },
+      backdropBlur: {
+        xs: '2px',
+        sm: '4px',
+        md: '8px',
+        lg: '12px',
+        xl: '16px',
+        '2xl': '20px',
+        '3xl': '30px',
+      },
+      boxShadow: {
+        'glass': '0 8px 32px rgba(31, 38, 135, 0.15)',
+        'glass-sm': '0 4px 16px rgba(31, 38, 135, 0.1)',
+        'glass-lg': '0 12px 48px rgba(31, 38, 135, 0.2)',
+        'glass-inset': 'inset 0 2px 4px rgba(255, 255, 255, 0.6), inset 0 -2px 4px rgba(0, 0, 0, 0.05)',
+        'monaco': '0 10px 40px rgba(220, 38, 38, 0.15)',
+        'monaco-sm': '0 4px 20px rgba(220, 38, 38, 0.1)',
+        'monaco-lg': '0 20px 60px rgba(220, 38, 38, 0.2)',
+        'soft': '0 2px 8px rgba(0, 0, 0, 0.08)',
+        'soft-lg': '0 4px 16px rgba(0, 0, 0, 0.12)',
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.3s ease-in-out',
+        'slide-up': 'slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)',
+        'slide-down': 'slideDown 0.3s ease-out',
+        'scale-in': 'scaleIn 0.3s ease-out',
+        'float': 'float 3s ease-in-out infinite',
+        'shimmer': 'shimmer 2s infinite',
+        'pulse-soft': 'pulseSoft 2s ease-in-out infinite',
+        'glow': 'glow 2s ease-in-out infinite',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { opacity: '0', transform: 'translateY(20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        slideDown: {
+          '0%': { opacity: '0', transform: 'translateY(-20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        scaleIn: {
+          '0%': { opacity: '0', transform: 'scale(0.9)' },
+          '100%': { opacity: '1', transform: 'scale(1)' },
+        },
+        float: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-10px)' },
+        },
+        shimmer: {
+          '0%': { backgroundPosition: '-1000px 0' },
+          '100%': { backgroundPosition: '1000px 0' },
+        },
+        pulseSoft: {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.8' },
+        },
+        glow: {
+          '0%, 100%': { boxShadow: '0 0 20px rgba(220, 38, 38, 0.3)' },
+          '50%': { boxShadow: '0 0 30px rgba(220, 38, 38, 0.5)' },
+        },
+      },
+      fontFamily: {
+        'sans': ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+      },
+      borderRadius: {
+        'glass': '20px',
+      },
+      transitionTimingFunction: {
+        'smooth': 'cubic-bezier(0.4, 0, 0.2, 1)',
+        'bounce': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+      },
+    },
+  },
+  plugins: [
+    // Custom glass utilities plugin
+    function({ addUtilities, addComponents, theme }) {
+      // Glass effect utilities
+      addUtilities({
+        '.glass': {
+          background: 'rgba(255, 255, 255, 0.7)',
+          backdropFilter: 'blur(20px)',
+          '-webkit-backdrop-filter': 'blur(20px)',
+          border: '1px solid rgba(255, 255, 255, 0.6)',
+          boxShadow: '0 8px 32px rgba(31, 38, 135, 0.15)',
+        },
+        '.glass-light': {
+          background: 'rgba(255, 255, 255, 0.85)',
+          backdropFilter: 'blur(20px)',
+          '-webkit-backdrop-filter': 'blur(20px)',
+          border: '1px solid rgba(255, 255, 255, 0.7)',
+          boxShadow: '0 8px 32px rgba(31, 38, 135, 0.12)',
+        },
+        '.glass-ultra': {
+          background: 'rgba(255, 255, 255, 0.95)',
+          backdropFilter: 'blur(30px)',
+          '-webkit-backdrop-filter': 'blur(30px)',
+          border: '1px solid rgba(255, 255, 255, 0.8)',
+          boxShadow: '0 8px 32px rgba(31, 38, 135, 0.1), inset 0 2px 4px rgba(255, 255, 255, 0.6)',
+        },
+        '.glass-monaco': {
+          background: 'linear-gradient(135deg, rgba(220, 38, 38, 0.05) 0%, rgba(255, 255, 255, 0.7) 100%)',
+          backdropFilter: 'blur(20px)',
+          '-webkit-backdrop-filter': 'blur(20px)',
+          borderLeft: '3px solid #dc2626',
+          border: '1px solid rgba(220, 38, 38, 0.2)',
+          boxShadow: '0 8px 32px rgba(220, 38, 38, 0.1)',
+        },
+        '.no-scrollbar': {
+          '-ms-overflow-style': 'none',
+          'scrollbar-width': 'none',
+          '&::-webkit-scrollbar': {
+            display: 'none',
+          },
+        },
+        '.scrollbar-thin': {
+          'scrollbar-width': 'thin',
+          '&::-webkit-scrollbar': {
+            width: '8px',
+            height: '8px',
+          },
+          '&::-webkit-scrollbar-track': {
+            background: 'rgba(0, 0, 0, 0.05)',
+            borderRadius: '9999px',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            background: 'linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)',
+            borderRadius: '9999px',
+          },
+        },
+      });
+
+      // Glass component classes
+      addComponents({
+        '.glass-card': {
+          background: 'rgba(255, 255, 255, 0.7)',
+          backdropFilter: 'blur(20px)',
+          '-webkit-backdrop-filter': 'blur(20px)',
+          border: '1px solid rgba(255, 255, 255, 0.6)',
+          boxShadow: '0 8px 32px rgba(31, 38, 135, 0.15)',
+          borderRadius: '20px',
+          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+          '&:hover': {
+            background: 'rgba(255, 255, 255, 0.8)',
+            boxShadow: '0 12px 40px rgba(31, 38, 135, 0.2)',
+            transform: 'translateY(-4px)',
+          },
+        },
+        '.glass-button': {
+          background: 'rgba(255, 255, 255, 0.7)',
+          backdropFilter: 'blur(10px)',
+          '-webkit-backdrop-filter': 'blur(10px)',
+          border: '1px solid rgba(255, 255, 255, 0.8)',
+          boxShadow: '0 4px 15px rgba(0, 0, 0, 0.08)',
+          transition: 'all 0.3s ease',
+          '&:hover': {
+            background: 'rgba(255, 255, 255, 0.9)',
+            boxShadow: '0 6px 20px rgba(220, 38, 38, 0.15)',
+            transform: 'translateY(-2px)',
+          },
+          '&:active': {
+            transform: 'translateY(0)',
+          },
+        },
+        '.glass-input': {
+          background: 'rgba(255, 255, 255, 0.7)',
+          backdropFilter: 'blur(10px)',
+          '-webkit-backdrop-filter': 'blur(10px)',
+          border: '1px solid rgba(255, 255, 255, 0.6)',
+          transition: 'all 0.3s ease',
+          '&:hover': {
+            background: 'rgba(255, 255, 255, 0.8)',
+            borderColor: 'rgba(220, 38, 38, 0.2)',
+          },
+          '&:focus': {
+            background: 'rgba(255, 255, 255, 0.9)',
+            borderColor: '#dc2626',
+            boxShadow: '0 0 0 3px rgba(220, 38, 38, 0.1)',
+            outline: 'none',
+          },
+        },
+        '.glass-sidebar': {
+          background: 'rgba(255, 255, 255, 0.85)',
+          backdropFilter: 'blur(30px)',
+          '-webkit-backdrop-filter': 'blur(30px)',
+          borderRight: '1px solid rgba(255, 255, 255, 0.6)',
+          boxShadow: '4px 0 24px rgba(0, 0, 0, 0.08)',
+        },
+        '.glass-navbar': {
+          background: 'rgba(255, 255, 255, 0.9)',
+          backdropFilter: 'blur(20px)',
+          '-webkit-backdrop-filter': 'blur(20px)',
+          borderBottom: '1px solid rgba(255, 255, 255, 0.6)',
+          boxShadow: '0 4px 24px rgba(0, 0, 0, 0.08)',
+        },
+      });
+    },
+  ],
+}
\ No newline at end of file