Simplify member dashboard - remove points, payments, stats, and social features

pages/member/dashboard/index.vue

@@ -1,182 +1,55 @@
 <template>
   <div class="member-dashboard">
-    <!-- Animated Header -->
-    <div 
-      v-motion
-      :initial="{ opacity: 0, y: -20 }"
-      :enter="{ 
-        opacity: 1, 
-        y: 0,
-        transition: {
-          duration: 600,
-          type: 'spring'
-        }
-      }"
-      class="dashboard-header"
-    >
-      <div class="header-content">
-        <h1 class="dashboard-title">
-          <span class="title-gradient">Welcome back,</span>
-          <span class="title-name">{{ firstName }}</span>
-        </h1>
-        <p class="dashboard-subtitle">Here's what's happening with your account today</p>
-      </div>
-      <div class="header-actions">
-        <v-btn
-          color="white"
-          variant="outlined"
-          prepend-icon="mdi-bell"
-          class="notification-btn"
-        >
-          <v-badge
-            color="error"
-            dot
-            offset-x="-8"
-            offset-y="-8"
-          >
-            Notifications
-          </v-badge>
-        </v-btn>
-      </div>
+    <!-- Simple Header -->
+    <div class="dashboard-header">
+      <h1 class="dashboard-title">Welcome back, {{ firstName }}</h1>
+      <p class="dashboard-subtitle">Member Dashboard</p>
     </div>
 
-    <!-- Bento Grid Dashboard -->
-    <BentoGrid gap="lg" class="dashboard-grid">
-      <!-- Profile Card -->
-      <div class="bento-item bento-item--medium bento-item--tall">
-        <ProfileCard 
+    <!-- Simple Two-Column Layout -->
+    <v-row class="dashboard-content">
+      <!-- Left Column - Profile -->
+      <v-col cols="12" md="4">
+        <SimpleProfileCard 
           :member="memberData"
-          :member-points="memberPoints"
-          :events-attended="12"
-          :connections="48"
+          :email-verified="emailVerified"
           @edit-profile="navigateTo('/member/profile')"
         />
-      </div>
+      </v-col>
 
-      <!-- Statistics Cards -->
-      <div class="bento-item bento-item--small">
-        <StatsCard
-          label="Total Points"
-          :value="memberPoints"
-          icon="mdi-star"
-          icon-color="warning"
-          :icon-background="'linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05))'"
-          :change="12"
-          suffix="pts"
-          :delay="100"
-          decoration-color="#f59e0b"
-        />
-      </div>
-
-      <div class="bento-item bento-item--small">
-        <StatsCard
-          label="Events Attended"
-          :value="upcomingEvents.length"
-          icon="mdi-calendar-check"
-          icon-color="success"
-          :icon-background="'linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05))'"
-          subtitle="This month"
-          :delay="200"
-          decoration-color="#22c55e"
-        />
-      </div>
-
-      <div class="bento-item bento-item--small">
-        <StatsCard
-          label="Active Membership"
-          :value="membershipDays"
-          icon="mdi-crown"
-          icon-color="error"
-          :change="100"
-          suffix="days"
-          subtitle="Premium member"
-          :delay="300"
-        />
-      </div>
-
-      <!-- Upcoming Events Card -->
-      <div class="bento-item bento-item--large">
+      <!-- Right Column - Events -->
+      <v-col cols="12" md="8">
         <EventsCard 
           :events="upcomingEvents"
           @view-all="navigateTo('/member/events')"
         />
-      </div>
+      </v-col>
+    </v-row>
 
-      <!-- Payment Status Card -->
-      <div class="bento-item bento-item--medium">
-        <PaymentCard
-          :membership-type="membershipType"
-          :next-payment-date="nextPaymentDate"
-          :membership-amount="membershipAmount"
-          :payment-history="paymentHistory"
-          @update-payment="navigateTo('/member/payments')"
-        />
-      </div>
-
-      <!-- Activity Timeline -->
-      <div class="bento-item bento-item--medium bento-item--tall">
-        <div class="glass-card activity-card">
-          <div class="card-header">
-            <v-icon color="error" size="20">mdi-history</v-icon>
-            <h3 class="card-title">Recent Activity</h3>
+    <!-- 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="formattedActivities"
-            :max-items="5"
+            :activities="filteredActivities"
+            :max-items="10"
           />
-          <v-btn
-            variant="outlined"
-            color="error"
-            block
-            class="mt-4"
-            @click="navigateTo('/member/activity')"
-          >
-            View All Activity
-          </v-btn>
         </div>
-      </div>
-    </BentoGrid>
+      </v-col>
+    </v-row>
 
 
-    <!-- Quick Actions Section -->
-    <div 
-      v-motion
-      :initial="{ opacity: 0, y: 20 }"
-      :enter="{ 
-        opacity: 1, 
-        y: 0,
-        transition: {
-          delay: 800,
-          duration: 600
-        }
-      }"
-      class="quick-actions-section"
-    >
-      <h3 class="section-title">Quick Actions</h3>
-      <div class="quick-actions-grid">
-        <QuickActionCard
-          v-for="(action, index) in quickActions"
-          :key="action.title"
-          :icon="action.icon"
-          :title="action.title"
-          :color="action.color"
-          :delay="900 + (index * 100)"
-          @click="navigateTo(action.route)"
-        />
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { Member } from '~/utils/types';
-import BentoGrid from '~/components/dashboard/BentoGrid.vue';
-import StatsCard from '~/components/dashboard/StatsCard.vue';
-import ProfileCard from '~/components/dashboard/ProfileCard.vue';
+import SimpleProfileCard from '~/components/dashboard/SimpleProfileCard.vue';
 import ActivityTimeline from '~/components/dashboard/ActivityTimeline.vue';
 import EventsCard from '~/components/dashboard/EventsCard.vue';
-import PaymentCard from '~/components/dashboard/PaymentCard.vue';
-import QuickActionCard from '~/components/dashboard/QuickActionCard.vue';
 
 definePageMeta({
   layout: 'member',
@@ -201,28 +74,11 @@ const fullName = computed(() => {
   return user.value?.name || 'Member';
 });
 const email = computed(() => memberData.value?.email || user.value?.email || '');
-const membershipType = computed(() => 'Premium');
-const memberLevel = computed(() => 'Gold');
-const memberSince = computed(() => {
-  if (memberData.value?.join_date) {
-    return new Date(memberData.value.join_date).toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
-  }
-  return 'January 2023';
+const emailVerified = computed(() => {
+  // Check if email is verified (you can add actual verification logic here)
+  return true;
 });
-const memberPoints = ref(2450);
-const nextPaymentDate = ref('Feb 15, 2024');
-const membershipAmount = ref('99.00');
 
-// Calculate membership days
-const membershipDays = computed(() => {
-  if (memberData.value?.join_date) {
-    const joinDate = new Date(memberData.value.join_date);
-    const today = new Date();
-    const diffTime = Math.abs(today.getTime() - joinDate.getTime());
-    return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-  }
-  return 365;
-});
 
 // Mock data - replace with actual API calls
 const upcomingEvents = ref([
@@ -252,83 +108,45 @@ const upcomingEvents = ref([
   }
 ]);
 
-const paymentHistory = ref([
-  { id: 1, date: 'Jan 15, 2024', amount: '99.00' },
-  { id: 2, date: 'Dec 15, 2023', amount: '99.00' },
-  { id: 3, date: 'Nov 15, 2023', amount: '99.00' }
-]);
 
 const recentActivity = ref([
   {
     id: "1",
     type: "event",
-    description: "Attended Leadership Summit",
+    description: "Registered for Monthly Networking Event",
     timestamp: "2 days ago",
-    icon: "mdi-account-group",
+    icon: "mdi-calendar-check",
     color: "error"
   },
   {
     id: "2",
-    type: "payment",
-    description: "Membership renewal completed",
+    type: "profile",
+    description: "Updated profile information",
     timestamp: "1 week ago",
-    icon: "mdi-credit-card",
-    color: "success"
+    icon: "mdi-account",
+    color: "info"
   },
   {
     id: "3",
-    type: "achievement",
-    description: "Earned Gold Level status",
+    type: "event",
+    description: "Attended Workshop: Digital Marketing",
     timestamp: "2 weeks ago",
-    icon: "mdi-trophy",
-    color: "warning"
-  },
-  {
-    id: "4",
-    type: "profile",
-    description: "Updated profile information",
-    timestamp: "3 weeks ago",
-    icon: "mdi-account",
-    color: "info"
+    icon: "mdi-account-group",
+    color: "error"
   }
 ]);
 
-// Format activities for the timeline component
-const formattedActivities = computed(() => {
-  return recentActivity.value.map(activity => ({
-    ...activity,
-    title: activity.description.split(' ').slice(0, 3).join(' '),
-    description: activity.description
-  }));
+// 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
+    }));
 });
 
-// Quick actions data
-const quickActions = ref([
-  {
-    title: "View Events",
-    icon: "mdi-calendar",
-    color: "error",
-    route: "/member/events"
-  },
-  {
-    title: "Update Profile",
-    icon: "mdi-account-edit",
-    color: "primary",
-    route: "/member/profile"
-  },
-  {
-    title: "Payments",
-    icon: "mdi-credit-card",
-    color: "success",
-    route: "/member/payments"
-  },
-  {
-    title: "Resources",
-    icon: "mdi-book-open-variant",
-    color: "warning",
-    route: "/member/resources"
-  }
-]);
 
 // Helper functions
 const formatDate = (dateString: string) => {
@@ -352,16 +170,6 @@ onMounted(async () => {
     console.error('Error loading events:', error);
   }
 
-  // Load payment information
-  try {
-    const paymentsRes = await $fetch('/api/member/payments/status');
-    if (paymentsRes?.success && paymentsRes?.data) {
-      // Update payment data
-      console.log('Loaded payment status:', paymentsRes.data);
-    }
-  } catch (error) {
-    console.error('Error loading payment status:', error);
-  }
 });
 </script>