monacousa-portal/pages/member/dashboard/index.vue

<template>
  <div class="member-dashboard">
    <!-- Simple Header -->
    <div class="dashboard-header">
      <h1 class="dashboard-title">Welcome back, {{ firstName }}</h1>
      <p class="dashboard-subtitle">Member Dashboard</p>
    </div>

    <!-- Simple Two-Column Layout -->
    <v-row class="dashboard-content">
      <!-- Left Column - Profile -->
      <v-col cols="12" md="4">
        <SimpleProfileCard 
          :member="memberData"
          :email-verified="emailVerified"
          @edit-profile="navigateTo('/member/profile')"
        />
      </v-col>

      <!-- Right Column - Events -->
      <v-col cols="12" md="8">
        <EventsCard 
          :events="upcomingEvents"
          @view-all="navigateTo('/member/events')"
        />
      </v-col>
    </v-row>

    <!-- Activity Timeline -->
    <v-row class="mt-6">
      <v-col cols="12">
        <div class="activity-section">
          <div class="section-header">
            <h2 class="section-title">Recent Activity</h2>
          </div>
          <ActivityTimeline 
            :activities="filteredActivities"
            :max-items="10"
          />
        </div>
      </v-col>
    </v-row>


  </div>
</template>

<script setup lang="ts">
import type { Member } from '~/utils/types';
import SimpleProfileCard from '~/components/dashboard/SimpleProfileCard.vue';
import ActivityTimeline from '~/components/dashboard/ActivityTimeline.vue';
import EventsCard from '~/components/dashboard/EventsCard.vue';

definePageMeta({
  layout: 'member',
  middleware: 'member'
});

const { user } = useAuth();

// Fetch member data
const { data: sessionData } = await useFetch<{ success: boolean; member: Member | null }>('/api/auth/session', { 
  server: false
});

const memberData = computed<Member | null>(() => sessionData.value?.member || null);

// Computed properties
const firstName = computed(() => memberData.value?.first_name || user.value?.firstName || 'Member');
const fullName = computed(() => {
  if (memberData.value) {
    return `${memberData.value.first_name} ${memberData.value.last_name}`;
  }
  return user.value?.name || 'Member';
});
const email = computed(() => memberData.value?.email || user.value?.email || '');
const emailVerified = computed(() => {
  // Check if email is verified (you can add actual verification logic here)
  return true;
});


// Mock data - replace with actual API calls
const upcomingEvents = ref([
  {
    id: "1",
    title: "Monthly Networking Event",
    date: "2024-01-15",
    time: "6:00 PM",
    location: "Conference Center",
    status: "confirmed"
  },
  {
    id: "2",
    title: "Workshop: Digital Marketing",
    date: "2024-01-22",
    time: "2:00 PM",
    location: "Training Room A",
    status: "pending"
  },
  {
    id: "3",
    title: "Annual Gala Dinner",
    date: "2024-02-05",
    time: "7:00 PM",
    location: "Grand Ballroom",
    status: "confirmed"
  }
]);


const recentActivity = ref([
  {
    id: "1",
    type: "event",
    description: "Registered for Monthly Networking Event",
    timestamp: "2 days ago",
    icon: "mdi-calendar-check",
    color: "error"
  },
  {
    id: "2",
    type: "profile",
    description: "Updated profile information",
    timestamp: "1 week ago",
    icon: "mdi-account",
    color: "info"
  },
  {
    id: "3",
    type: "event",
    description: "Attended Workshop: Digital Marketing",
    timestamp: "2 weeks ago",
    icon: "mdi-account-group",
    color: "error"
  }
]);

// Filter activities to exclude payment and achievement types
const filteredActivities = computed(() => {
  return recentActivity.value
    .filter(activity => activity.type === 'event' || activity.type === 'profile')
    .map(activity => ({
      ...activity,
      title: activity.description.split(' ').slice(0, 3).join(' '),
      description: activity.description
    }));
});


// Helper functions
const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString('en-US', { 
    month: 'short', 
    day: 'numeric', 
    year: 'numeric' 
  });
};

// Load real data on mount
onMounted(async () => {
  // Load upcoming events
  try {
    const eventsRes = await $fetch('/api/member/events/upcoming');
    if (eventsRes?.success && eventsRes?.data) {
      // Map real events data
      console.log('Loaded upcoming events:', eventsRes.data);
    }
  } catch (error) {
    console.error('Error loading events:', error);
  }

});
</script>

<style scoped lang="scss">
.member-dashboard {
  padding: 2rem;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
  
  @media (max-width: 768px) {
    padding: 1rem;
  }
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem;
  padding: 2rem;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.85)
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  
  @media (max-width: 768px) {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
  }
}

.header-content {
  flex: 1;
}

.dashboard-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
  
  @media (max-width: 768px) {
    font-size: 2rem;
  }
}

.title-gradient {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.title-name {
  color: rgb(31, 41, 55);
}

.dashboard-subtitle {
  font-size: 1.125rem;
  color: rgb(107, 114, 128);
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 1rem;
}

.notification-btn {
  text-transform: none;
  font-weight: 500;
}

.dashboard-grid {
  margin-bottom: 3rem;
}

// Glass card base styles
.glass-card {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.7)
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  padding: 1.5rem;
  height: 100%;
}

.activity-card {
  .card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }
  
  .card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: rgb(31, 41, 55);
    margin: 0;
  }
}

.quick-actions-section {
  margin-top: 2rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgb(31, 41, 55);
  margin-bottom: 1.5rem;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  
  @media (max-width: 640px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
</style>