413 lines
9.2 KiB
Vue
413 lines
9.2 KiB
Vue
<template>
|
|
<div class="member-dashboard">
|
|
<!-- Enhanced Glass Header -->
|
|
<div class="dashboard-header glass-header mb-6">
|
|
<h1 class="dashboard-title text-gradient">
|
|
Welcome back, {{ firstName }}!
|
|
</h1>
|
|
<p class="dashboard-subtitle">
|
|
Member Dashboard
|
|
</p>
|
|
<div class="text-center">
|
|
<v-chip class="glass-badge mt-2">
|
|
<v-icon start>mdi-account-circle</v-icon>
|
|
Member
|
|
</v-chip>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bento Grid Layout -->
|
|
<div class="bento-grid mb-6">
|
|
<!-- Profile Card -->
|
|
<div class="bento-item bento-item--medium">
|
|
<div class="glass-card animated-entrance">
|
|
<SimpleProfileCard
|
|
:member="memberData"
|
|
:email-verified="emailVerified"
|
|
@edit-profile="navigateTo('/member/profile')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Events Card -->
|
|
<div class="bento-item bento-item--xlarge">
|
|
<div class="glass-card animated-entrance" style="animation-delay: 0.1s;">
|
|
<EventsCard
|
|
:events="upcomingEvents"
|
|
@view-all="navigateTo('/member/events')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Activity Timeline with Glass Effect -->
|
|
<div class="bento-grid">
|
|
<div class="bento-item bento-item--full">
|
|
<div class="glass-card animated-entrance" style="animation-delay: 0.2s;">
|
|
<div class="card-header">
|
|
<v-icon class="mr-2" color="primary">mdi-history</v-icon>
|
|
<h2 class="card-title text-gradient">Recent Activity</h2>
|
|
</div>
|
|
<ActivityTimeline
|
|
:activities="filteredActivities"
|
|
:max-items="10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</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: 1rem;
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
|
|
}
|
|
|
|
/* Enhanced Glass 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;
|
|
}
|
|
|
|
.header-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.text-gradient {
|
|
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.notification-btn {
|
|
text-transform: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.dashboard-grid {
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Enhanced Glass Card */
|
|
.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;
|
|
padding: 1.5rem;
|
|
height: 100%;
|
|
|
|
&: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;
|
|
}
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1.25rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid rgba(220, 38, 38, 0.1);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
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;
|
|
}
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
}
|
|
|
|
/* 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>
|