monacousa-portal/pages/board/dashboard/glass.vue

<template>
  <div class="min-h-screen bg-gradient-to-br from-gray-50 to-white">
    <!-- Dashboard Content -->
    <div class="p-6 space-y-6">
      <!-- Welcome Section -->
      <div class="relative overflow-hidden rounded-3xl p-8 text-center shadow-lg border border-white/20" 
           style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);">
        <h2 class="text-3xl font-bold text-gray-800 mb-2">
          Welcome back!
        </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">
        <div v-for="stat in stats" :key="stat.label" 
             class="relative overflow-hidden rounded-2xl p-6 shadow-lg border border-white/20 transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
             style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);">
          <div class="flex items-center justify-between mb-4">
            <div class="w-12 h-12 rounded-xl bg-red-50 flex items-center justify-center">
              <span class="text-red-600 text-xl">{{ stat.icon }}</span>
            </div>
          </div>
          <p class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-1">
            {{ stat.label }}
          </p>
          <p class="text-3xl font-bold text-gray-800">
            {{ stat.prefix }}{{ stat.value }}{{ stat.suffix }}
          </p>
          <p v-if="stat.change" class="text-sm text-green-600 mt-2">
            {{ stat.change }}
          </p>
        </div>
      </div>

      <!-- Dues Management Section -->
      <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>

        <!-- Dues Cards Grid - MAX 4 VISIBLE -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <div v-for="member in visibleDuesMembers" :key="member.id"
               class="relative overflow-hidden rounded-2xl p-5 shadow-lg border border-white/20 transition-all duration-300 hover:shadow-xl"
               style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);">
            <!-- Member Info -->
            <div class="flex items-center gap-3 mb-4">
              <div class="w-12 h-12 rounded-full bg-gray-200"></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>
            
            <!-- Amount -->
            <div class="flex items-center justify-between mb-3">
              <span class="text-sm text-gray-600">Amount Due</span>
              <span class="text-lg font-bold text-red-600">${{ member.dueAmount }}</span>
            </div>
            
            <!-- Actions -->
            <button class="w-full px-3 py-2 rounded-lg border border-red-200 text-red-600 text-sm font-medium transition-all duration-200 hover:bg-red-50"
                    style="background: rgba(255, 255, 255, 0.5);">
              Mark Paid
            </button>
          </div>
        </div>

        <!-- View All Button -->
        <div class="text-center">
          <button class="px-6 py-2.5 rounded-xl border border-red-200 text-red-600 font-medium transition-all duration-200 hover:bg-red-50"
                  style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);">
            View All Members →
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'board',
  middleware: 'board-auth'
}
</script>

<script setup>
import { ref } from 'vue'

// Statistics data
const stats = ref([
  {
    icon: '👥',
    label: 'Total Members',
    value: 1234,
    change: '+12%',
  },
  {
    icon: '💰',
    label: 'Dues Collected',
    value: 45678,
    prefix: '$',
    change: '+8%',
  },
  {
    icon: '📅',
    label: 'Upcoming Events',
    value: 5,
    change: '2 this week',
  },
  {
    icon: '📈',
    label: 'Growth Rate',
    value: 23,
    suffix: '%',
    change: '+3%',
  }
])

// Sample dues members data - LIMITED TO 4
const visibleDuesMembers = ref([
  {
    id: 1,
    name: 'John Smith',
    dueAmount: 250,
  },
  {
    id: 2,
    name: 'Marie Dubois',
    dueAmount: 250,
  },
  {
    id: 3,
    name: 'Alessandro Rossi',
    dueAmount: 250,
  },
  {
    id: 4,
    name: 'Emma Wilson',
    dueAmount: 250,
  }
])
</script>

<style scoped>
/* Glass dashboard styles */
</style>