639 lines
20 KiB
Vue
639 lines
20 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-stone-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-stone-100 ethereal-text">
|
|
Welcome to Ghost Guild, {{ memberData?.name }}!
|
|
</h1>
|
|
<p class="text-stone-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-stone-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-stone-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-stone-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-stone-100 ethereal-text">
|
|
Quick Links
|
|
</h2>
|
|
</template>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
|
<UButton
|
|
to="/member/my-updates"
|
|
variant="outline"
|
|
class="border-ghost-600 text-stone-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
|
|
block
|
|
>
|
|
<template #leading>
|
|
<Icon name="heroicons:pencil-square" class="w-5 h-5" />
|
|
</template>
|
|
Post an Update
|
|
</UButton>
|
|
|
|
<UButton
|
|
disabled
|
|
variant="outline"
|
|
class="border-ghost-600 text-stone-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-stone-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-stone-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-stone-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-stone-100">
|
|
Upcoming Events
|
|
</h3>
|
|
<p class="text-stone-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-stone-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-stone-100">Community</h3>
|
|
<p class="text-stone-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-stone-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-stone-100">
|
|
Account Settings
|
|
</h3>
|
|
<p class="text-stone-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-stone-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-stone-100 ethereal-text">
|
|
Your Upcoming Events
|
|
</h2>
|
|
<UButton
|
|
to="/events"
|
|
variant="ghost"
|
|
size="sm"
|
|
class="text-stone-300 hover:text-stone-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-stone-100 mb-1">
|
|
{{ evt.title }}
|
|
</h3>
|
|
<div class="flex items-center gap-4 text-sm text-stone-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-stone-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div v-else class="text-center py-8">
|
|
<Icon
|
|
name="heroicons:calendar-days"
|
|
class="w-12 h-12 text-stone-600 mx-auto mb-3"
|
|
/>
|
|
<p class="text-stone-400 mb-4">
|
|
You haven't registered for any upcoming events
|
|
</p>
|
|
<UButton
|
|
to="/events"
|
|
size="sm"
|
|
class="border-ghost-600 text-stone-200 hover:bg-ghost-800 hover:border-whisper-500"
|
|
>
|
|
Browse Events
|
|
</UButton>
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- Community Pulse - Recent Updates -->
|
|
<UCard
|
|
class="sparkle-field"
|
|
: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-stone-100 ethereal-text">
|
|
Community Pulse
|
|
</h2>
|
|
<UButton
|
|
to="/updates"
|
|
variant="ghost"
|
|
size="sm"
|
|
class="text-stone-300 hover:text-stone-100"
|
|
>
|
|
View All
|
|
</UButton>
|
|
</div>
|
|
</template>
|
|
|
|
<div v-if="loadingUpdates" 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="recentUpdates.length" class="space-y-4">
|
|
<div
|
|
v-for="update in recentUpdates"
|
|
:key="update._id"
|
|
class="border-l-2 border-ghost-600 pl-4 py-2"
|
|
>
|
|
<div class="flex items-start gap-3">
|
|
<img
|
|
v-if="
|
|
update.author?.avatar && isValidAvatar(update.author.avatar)
|
|
"
|
|
:src="`/ghosties/Ghost-${capitalize(update.author.avatar)}.png`"
|
|
:alt="update.author.name"
|
|
class="w-8 h-8 flex-shrink-0"
|
|
/>
|
|
<div
|
|
v-else-if="update.author?.name"
|
|
class="w-8 h-8 bg-ghost-700 border border-ghost-600 flex items-center justify-center text-stone-200 text-xs font-bold flex-shrink-0"
|
|
>
|
|
{{ update.author.name.charAt(0).toUpperCase() }}
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-baseline gap-2 mb-1">
|
|
<span class="font-semibold text-stone-100 text-sm">
|
|
{{ update.author?.name }}
|
|
</span>
|
|
<span class="text-xs text-stone-500">
|
|
{{ formatTimeAgo(update.createdAt) }}
|
|
</span>
|
|
</div>
|
|
<p class="text-stone-300 text-sm line-clamp-2">
|
|
{{ update.content }}
|
|
</p>
|
|
<NuxtLink
|
|
:to="`/updates/${update._id}`"
|
|
class="text-xs text-whisper-400 hover:text-whisper-300 mt-1 inline-block"
|
|
>
|
|
Read more
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="text-center py-8">
|
|
<p class="text-stone-400 mb-4">No community updates yet</p>
|
|
<UButton
|
|
to="/updates/new"
|
|
size="sm"
|
|
variant="outline"
|
|
class="border-ghost-600 text-stone-200 hover:bg-ghost-800 hover:border-whisper-500"
|
|
>
|
|
Post the First Update
|
|
</UButton>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
</UContainer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { memberData, checkMemberStatus } = useAuth();
|
|
|
|
const recentUpdates = ref([]);
|
|
const loadingUpdates = ref(false);
|
|
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 recent updates
|
|
const loadRecentUpdates = async () => {
|
|
loadingUpdates.value = true;
|
|
try {
|
|
const response = await $fetch("/api/updates", {
|
|
params: { limit: 5, skip: 0 },
|
|
});
|
|
recentUpdates.value = response.updates;
|
|
} catch (error) {
|
|
console.error("Failed to load recent updates:", error);
|
|
} finally {
|
|
loadingUpdates.value = false;
|
|
}
|
|
};
|
|
|
|
// 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("-");
|
|
};
|
|
|
|
const formatTimeAgo = (date) => {
|
|
const now = new Date();
|
|
const updateDate = new Date(date);
|
|
const diffInSeconds = Math.floor((now - updateDate) / 1000);
|
|
|
|
if (diffInSeconds < 60) return "just now";
|
|
if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
|
|
if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
|
|
if (diffInSeconds < 604800)
|
|
return `${Math.floor(diffInSeconds / 86400)}d ago`;
|
|
|
|
return updateDate.toLocaleDateString("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
});
|
|
};
|
|
|
|
// 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(() => {
|
|
loadRecentUpdates();
|
|
loadRegisteredEvents();
|
|
});
|
|
|
|
// Set page meta
|
|
useHead({
|
|
title: "Member Dashboard - Ghost Guild",
|
|
});
|
|
|
|
// Removed middleware - handling auth directly in the page component
|
|
</script>
|