504 lines
16 KiB
Vue
504 lines
16 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Page Header -->
|
|
<PageHeader
|
|
title="Member Dashboard"
|
|
:subtitle="`Welcome back, ${memberData?.name || 'Member'}!`"
|
|
theme="blue"
|
|
size="medium"
|
|
/>
|
|
|
|
<UContainer class="py-12">
|
|
<!-- Loading State -->
|
|
<div
|
|
v-if="!memberData || authPending"
|
|
class="flex justify-center items-center py-20"
|
|
>
|
|
<div class="text-center">
|
|
<div
|
|
class="w-8 h-8 border-4 border-whisper-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
|
|
></div>
|
|
<p class="text-ghost-300">Loading your dashboard...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dashboard Content -->
|
|
<div v-else class="space-y-8">
|
|
<!-- Welcome Card -->
|
|
<UCard
|
|
class="sparkle-field"
|
|
:ui="{
|
|
root: 'bg-ghost-900 border border-ghost-700',
|
|
header: 'border-b border-ghost-700',
|
|
body: 'bg-ghost-900',
|
|
}"
|
|
>
|
|
<template #header>
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div class="flex-1">
|
|
<h1 class="text-2xl font-bold text-ghost-100 ethereal-text">
|
|
Welcome to Ghost Guild, {{ memberData?.name }}!
|
|
</h1>
|
|
<p class="text-ghost-300 mt-2">
|
|
Your membership is active and you're part of our cooperative
|
|
community.
|
|
</p>
|
|
</div>
|
|
<div class="flex-shrink-0" v-if="memberData?.avatar">
|
|
<img
|
|
:src="`/ghosties/Ghost-${capitalize(memberData.avatar)}.png`"
|
|
:alt="memberData.name"
|
|
class="w-16 h-16"
|
|
/>
|
|
</div>
|
|
<div v-else class="flex-shrink-0">
|
|
<div
|
|
class="w-16 h-16 bg-ghost-700 border border-ghost-600 flex items-center justify-center text-ghost-200 font-bold text-xl"
|
|
>
|
|
{{ memberData?.name?.charAt(0)?.toUpperCase() }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="flex flex-wrap gap-4 text-sm">
|
|
<div class="bg-ghost-800 border border-ghost-600 px-4 py-2">
|
|
<span class="text-ghost-400">Circle:</span>
|
|
<span class="font-medium text-whisper-300 ml-1 capitalize">{{
|
|
memberData?.circle
|
|
}}</span>
|
|
</div>
|
|
<div class="bg-ghost-800 border border-ghost-600 px-4 py-2">
|
|
<span class="text-ghost-400">Contribution:</span>
|
|
<span class="font-medium text-whisper-300 ml-1"
|
|
>${{ memberData?.contributionTier }} CAD/month</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- Quick Links -->
|
|
<UCard
|
|
:ui="{
|
|
root: 'bg-ghost-900 border border-ghost-700',
|
|
header: 'border-b border-ghost-700 bg-ghost-900',
|
|
body: 'bg-ghost-900',
|
|
}"
|
|
>
|
|
<template #header>
|
|
<h2 class="text-xl font-bold text-ghost-100 ethereal-text">
|
|
Quick Links
|
|
</h2>
|
|
</template>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
|
<UButton
|
|
disabled
|
|
variant="outline"
|
|
class="border-ghost-600 text-ghost-500 cursor-not-allowed justify-start"
|
|
block
|
|
title="Coming soon"
|
|
>
|
|
<template #leading>
|
|
<Icon name="heroicons:calendar-days" class="w-5 h-5" />
|
|
</template>
|
|
Propose an Event
|
|
</UButton>
|
|
|
|
<UButton
|
|
disabled
|
|
variant="outline"
|
|
class="border-ghost-600 text-ghost-500 cursor-not-allowed justify-start"
|
|
block
|
|
title="Coming soon"
|
|
>
|
|
<template #leading>
|
|
<Icon name="heroicons:user-group" class="w-5 h-5" />
|
|
</template>
|
|
Book a Peer Session
|
|
</UButton>
|
|
|
|
<UButton
|
|
disabled
|
|
variant="outline"
|
|
class="border-ghost-600 text-ghost-500 cursor-not-allowed justify-start"
|
|
block
|
|
title="Coming soon"
|
|
>
|
|
<template #leading>
|
|
<Icon name="heroicons:book-open" class="w-5 h-5" />
|
|
</template>
|
|
Browse Resources
|
|
</UButton>
|
|
|
|
<UButton
|
|
to="/member/profile"
|
|
variant="outline"
|
|
class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
|
|
block
|
|
>
|
|
<template #leading>
|
|
<Icon name="heroicons:user-circle" class="w-5 h-5" />
|
|
</template>
|
|
Update Profile
|
|
</UButton>
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- Quick Actions Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<UCard
|
|
:ui="{
|
|
root: 'bg-ghost-900 border border-ghost-700 hover:border-whisper-600 transition-colors',
|
|
header: 'border-b-0',
|
|
body: 'bg-ghost-900',
|
|
footer: 'border-t-0 bg-ghost-900',
|
|
}"
|
|
class="hover:border-whisper-600 transition-colors"
|
|
>
|
|
<template #header>
|
|
<div
|
|
class="w-12 h-12 bg-ghost-800 border border-ghost-600 flex items-center justify-center"
|
|
>
|
|
<Icon
|
|
name="heroicons:calendar-days"
|
|
class="w-6 h-6 text-whisper-400"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<h3 class="text-lg font-semibold mb-2 text-ghost-100">
|
|
Upcoming Events
|
|
</h3>
|
|
<p class="text-ghost-300 mb-4">
|
|
Discover and register for community events and workshops.
|
|
</p>
|
|
|
|
<template #footer>
|
|
<UButton
|
|
to="/events"
|
|
variant="outline"
|
|
size="sm"
|
|
class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500"
|
|
>
|
|
View Events
|
|
</UButton>
|
|
</template>
|
|
</UCard>
|
|
|
|
<UCard
|
|
:ui="{
|
|
root: 'bg-ghost-900 border border-ghost-700 hover:border-whisper-600 transition-colors',
|
|
header: 'border-b-0',
|
|
body: 'bg-ghost-900',
|
|
footer: 'border-t-0 bg-ghost-900',
|
|
}"
|
|
>
|
|
<template #header>
|
|
<div
|
|
class="w-12 h-12 bg-ghost-800 border border-ghost-600 flex items-center justify-center"
|
|
>
|
|
<Icon
|
|
name="heroicons:user-group"
|
|
class="w-6 h-6 text-whisper-400"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<h3 class="text-lg font-semibold mb-2 text-ghost-100">Community</h3>
|
|
<p class="text-ghost-300 mb-4">
|
|
Connect with other members in your circle and beyond.
|
|
</p>
|
|
|
|
<template #footer>
|
|
<UButton
|
|
to="/members"
|
|
variant="outline"
|
|
size="sm"
|
|
class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500"
|
|
>
|
|
Browse Members
|
|
</UButton>
|
|
</template>
|
|
</UCard>
|
|
|
|
<UCard
|
|
:ui="{
|
|
root: 'bg-ghost-900 border border-ghost-700 hover:border-whisper-600 transition-colors',
|
|
header: 'border-b-0',
|
|
body: 'bg-ghost-900',
|
|
footer: 'border-t-0 bg-ghost-900',
|
|
}"
|
|
>
|
|
<template #header>
|
|
<div
|
|
class="w-12 h-12 bg-ghost-800 border border-ghost-600 flex items-center justify-center"
|
|
>
|
|
<Icon
|
|
name="heroicons:cog-6-tooth"
|
|
class="w-6 h-6 text-whisper-400"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<h3 class="text-lg font-semibold mb-2 text-ghost-100">
|
|
Account Settings
|
|
</h3>
|
|
<p class="text-ghost-300 mb-4">
|
|
Manage your profile and membership settings.
|
|
</p>
|
|
|
|
<template #footer>
|
|
<UButton
|
|
to="/member/profile#account"
|
|
variant="outline"
|
|
size="sm"
|
|
class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500"
|
|
>
|
|
Manage Account
|
|
</UButton>
|
|
</template>
|
|
</UCard>
|
|
</div>
|
|
|
|
<!-- Your Registered Events -->
|
|
<UCard
|
|
:ui="{
|
|
root: 'bg-ghost-900 border border-ghost-700',
|
|
header: 'border-b border-ghost-700 bg-ghost-900',
|
|
body: 'bg-ghost-900',
|
|
}"
|
|
>
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-xl font-bold text-ghost-100 ethereal-text">
|
|
Your Upcoming Events
|
|
</h2>
|
|
<UButton
|
|
to="/events"
|
|
variant="ghost"
|
|
size="sm"
|
|
class="text-ghost-300 hover:text-ghost-100"
|
|
>
|
|
Browse All Events
|
|
</UButton>
|
|
</div>
|
|
</template>
|
|
|
|
<div v-if="loadingEvents" class="text-center py-8">
|
|
<div
|
|
class="w-6 h-6 border-2 border-whisper-500 border-t-transparent rounded-full animate-spin mx-auto"
|
|
></div>
|
|
</div>
|
|
|
|
<div v-else-if="registeredEvents.length" class="space-y-4">
|
|
<NuxtLink
|
|
v-for="evt in registeredEvents"
|
|
:key="evt._id"
|
|
:to="`/events/${evt.slug || evt._id}`"
|
|
class="block p-4 border border-ghost-700 hover:border-whisper-500 transition-colors"
|
|
>
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
v-if="
|
|
evt.featureImage &&
|
|
(evt.featureImage.publicId || evt.featureImage.url)
|
|
"
|
|
class="flex-shrink-0 w-20 h-20 overflow-hidden"
|
|
>
|
|
<img
|
|
:src="getEventImageUrl(evt.featureImage)"
|
|
:alt="evt.title"
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="flex-shrink-0 w-20 h-20 bg-ghost-800 border border-ghost-600 flex items-center justify-center"
|
|
>
|
|
<Icon
|
|
name="heroicons:calendar-days"
|
|
class="w-8 h-8 text-whisper-400"
|
|
/>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<h3 class="font-semibold text-ghost-100 mb-1">
|
|
{{ evt.title }}
|
|
</h3>
|
|
<div class="flex items-center gap-4 text-sm text-ghost-400">
|
|
<span class="flex items-center gap-1">
|
|
<Icon name="heroicons:calendar" class="w-4 h-4" />
|
|
{{ formatEventDate(evt.startDate) }}
|
|
</span>
|
|
<span class="flex items-center gap-1">
|
|
<Icon name="heroicons:clock" class="w-4 h-4" />
|
|
{{ formatEventTime(evt.startDate) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<Icon
|
|
name="heroicons:chevron-right"
|
|
class="w-5 h-5 text-ghost-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div v-else class="text-center py-8">
|
|
<Icon
|
|
name="heroicons:calendar-days"
|
|
class="w-12 h-12 text-ghost-600 mx-auto mb-3"
|
|
/>
|
|
<p class="text-ghost-400 mb-4">
|
|
You haven't registered for any upcoming events
|
|
</p>
|
|
<UButton
|
|
to="/events"
|
|
size="sm"
|
|
class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500"
|
|
>
|
|
Browse Events
|
|
</UButton>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
</UContainer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { memberData, checkMemberStatus } = useAuth();
|
|
|
|
const registeredEvents = ref([]);
|
|
const loadingEvents = ref(false);
|
|
|
|
// Handle authentication check on page load
|
|
const { pending: authPending } = await useLazyAsyncData(
|
|
"dashboard-auth",
|
|
async () => {
|
|
// Only check authentication on client side
|
|
if (process.server) return null;
|
|
|
|
console.log(
|
|
"📊 Dashboard auth check - memberData exists:",
|
|
!!memberData.value,
|
|
);
|
|
|
|
// If no member data, try to authenticate
|
|
if (!memberData.value) {
|
|
console.log(" - No member data, checking authentication...");
|
|
const isAuthenticated = await checkMemberStatus();
|
|
console.log(" - Auth result:", isAuthenticated);
|
|
|
|
if (!isAuthenticated) {
|
|
console.log(" - Redirecting to login");
|
|
await navigateTo("/login");
|
|
return null;
|
|
}
|
|
}
|
|
|
|
console.log(" - ✅ Dashboard auth successful");
|
|
return memberData.value;
|
|
},
|
|
);
|
|
|
|
// Load registered events
|
|
const loadRegisteredEvents = async () => {
|
|
console.log(
|
|
"🔍 memberData.value:",
|
|
JSON.stringify(memberData.value, null, 2),
|
|
);
|
|
console.log("🔍 memberData.value._id:", memberData.value?._id);
|
|
console.log("🔍 memberData.value.id:", memberData.value?.id);
|
|
|
|
const memberId = memberData.value?._id || memberData.value?.id;
|
|
|
|
if (!memberId) {
|
|
console.log("❌ No member ID available");
|
|
return;
|
|
}
|
|
|
|
console.log("📅 Loading events for member:", memberId);
|
|
loadingEvents.value = true;
|
|
try {
|
|
const response = await $fetch("/api/members/my-events", {
|
|
params: { memberId },
|
|
});
|
|
console.log("📅 Events response:", response);
|
|
registeredEvents.value = response.events;
|
|
} catch (error) {
|
|
console.error("Failed to load registered events:", error);
|
|
} finally {
|
|
loadingEvents.value = false;
|
|
}
|
|
};
|
|
|
|
// Valid ghost avatar options
|
|
const validAvatars = [
|
|
"disbelieving",
|
|
"double-take",
|
|
"exasperated",
|
|
"mild",
|
|
"sweet",
|
|
];
|
|
|
|
const isValidAvatar = (avatar) => {
|
|
if (!avatar) return false;
|
|
return validAvatars.includes(avatar.toLowerCase());
|
|
};
|
|
|
|
const capitalize = (str) => {
|
|
if (!str) return "";
|
|
// Handle kebab-case or multi-word avatars (e.g., "double-take" -> "Double-Take")
|
|
return str
|
|
.split("-")
|
|
.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
|
|
.join("-");
|
|
};
|
|
|
|
// Helper functions for event display
|
|
const getEventImageUrl = (featureImage) => {
|
|
if (!featureImage) return "";
|
|
|
|
if (featureImage.url) {
|
|
return featureImage.url;
|
|
}
|
|
|
|
if (featureImage.publicId) {
|
|
const config = useRuntimeConfig();
|
|
return `https://res.cloudinary.com/${config.public.cloudinaryCloudName}/image/upload/w_200,h_200,c_fill,f_auto,q_auto/${featureImage.publicId}`;
|
|
}
|
|
|
|
return "";
|
|
};
|
|
|
|
const formatEventDate = (dateString) => {
|
|
const date = new Date(dateString);
|
|
return new Intl.DateTimeFormat("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
}).format(date);
|
|
};
|
|
|
|
const formatEventTime = (dateString) => {
|
|
const date = new Date(dateString);
|
|
return new Intl.DateTimeFormat("en-US", {
|
|
hour: "numeric",
|
|
minute: "2-digit",
|
|
}).format(date);
|
|
};
|
|
|
|
onMounted(() => {
|
|
loadRegisteredEvents();
|
|
});
|
|
|
|
// Set page meta
|
|
useHead({
|
|
title: "Member Dashboard - Ghost Guild",
|
|
});
|
|
|
|
// Removed middleware - handling auth directly in the page component
|
|
</script>
|