305 lines
10 KiB
Vue
305 lines
10 KiB
Vue
<template>
|
|
<v-container>
|
|
<!-- Dues Payment Banner -->
|
|
<DuesPaymentBanner />
|
|
|
|
<!-- Welcome Header -->
|
|
<v-row class="mb-6">
|
|
<v-col>
|
|
<h1 class="text-h3 font-weight-bold" style="color: #a31515;">
|
|
Welcome Back, {{ firstName }}!
|
|
</h1>
|
|
<p class="text-h6 text-medium-emphasis">
|
|
MonacoUSA Member Portal
|
|
</p>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Quick Actions -->
|
|
<v-row class="mb-6">
|
|
<v-col cols="12" md="4">
|
|
<v-card class="pa-4 text-center" elevation="2" hover>
|
|
<v-icon size="48" color="primary" class="mb-2">mdi-account</v-icon>
|
|
<h3 class="mb-2">My Profile</h3>
|
|
<p class="text-body-2 mb-4">View and update your information</p>
|
|
<v-btn
|
|
color="primary"
|
|
variant="outlined"
|
|
style="border-color: #a31515; color: #a31515;"
|
|
@click="navigateToProfile"
|
|
>
|
|
View Profile
|
|
</v-btn>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="4">
|
|
<v-card class="pa-4 text-center" elevation="2" hover>
|
|
<v-icon size="48" color="primary" class="mb-2">mdi-calendar</v-icon>
|
|
<h3 class="mb-2">Events</h3>
|
|
<p class="text-body-2 mb-4">View upcoming association events</p>
|
|
<v-btn
|
|
color="primary"
|
|
variant="outlined"
|
|
style="border-color: #a31515; color: #a31515;"
|
|
@click="navigateToEvents"
|
|
>
|
|
View Events
|
|
</v-btn>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="4">
|
|
<v-card class="pa-4 text-center" elevation="2" hover>
|
|
<v-icon size="48" color="primary" class="mb-2">mdi-file-document</v-icon>
|
|
<h3 class="mb-2">Resources</h3>
|
|
<p class="text-body-2 mb-4">Access member resources</p>
|
|
<v-btn
|
|
color="primary"
|
|
variant="outlined"
|
|
style="border-color: #a31515; color: #a31515;"
|
|
@click="navigateToResources"
|
|
>
|
|
View Resources
|
|
</v-btn>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Recent Activity Section -->
|
|
<v-row class="mb-6">
|
|
<v-col cols="12">
|
|
<v-card elevation="2">
|
|
<v-card-title class="pa-4" style="background-color: #f5f5f5;">
|
|
<v-icon class="mr-2" color="primary">mdi-clock-outline</v-icon>
|
|
Recent Activity
|
|
</v-card-title>
|
|
<v-card-text class="pa-4">
|
|
<v-list>
|
|
<v-list-item>
|
|
<v-list-item-content>
|
|
<v-list-item-title>Welcome to MonacoUSA Portal!</v-list-item-title>
|
|
<v-list-item-subtitle>
|
|
You've successfully logged in to your member dashboard.
|
|
</v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
<v-list-item-action>
|
|
<v-chip color="success" size="small">New</v-chip>
|
|
</v-list-item-action>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Member Information -->
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-card elevation="2">
|
|
<v-card-title class="pa-4" style="background-color: #f5f5f5;">
|
|
<v-icon class="mr-2" color="primary">mdi-information-outline</v-icon>
|
|
Member Information
|
|
</v-card-title>
|
|
<v-card-text class="pa-4">
|
|
<v-skeleton-loader v-if="pending" type="list-item-three-line"></v-skeleton-loader>
|
|
<div v-else-if="error" class="text-error text-center pa-4">
|
|
<v-icon size="48" class="mb-2">mdi-alert-circle</v-icon>
|
|
<div>Failed to load member information</div>
|
|
</div>
|
|
<v-list v-else>
|
|
<v-list-item>
|
|
<v-list-item-content>
|
|
<v-list-item-title>Member ID</v-list-item-title>
|
|
<v-list-item-subtitle>
|
|
<v-chip color="primary" size="small" variant="outlined">
|
|
{{ memberInfo?.memberId || 'Not assigned' }}
|
|
</v-chip>
|
|
</v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-content>
|
|
<v-list-item-title>Name</v-list-item-title>
|
|
<v-list-item-subtitle>{{ memberInfo?.fullName || 'Not provided' }}</v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-content>
|
|
<v-list-item-title>Email</v-list-item-title>
|
|
<v-list-item-subtitle>{{ memberInfo?.email || 'Not provided' }}</v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-content>
|
|
<v-list-item-title>Phone</v-list-item-title>
|
|
<v-list-item-subtitle>{{ memberInfo?.phone || 'Not provided' }}</v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-content>
|
|
<v-list-item-title>Nationality</v-list-item-title>
|
|
<v-list-item-subtitle>{{ memberInfo?.nationality || 'Not provided' }}</v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-content>
|
|
<v-list-item-title>Member Since</v-list-item-title>
|
|
<v-list-item-subtitle>{{ memberInfo?.memberSince || 'Not provided' }}</v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-content>
|
|
<v-list-item-title>Dues Status</v-list-item-title>
|
|
<v-list-item-subtitle>
|
|
<v-chip
|
|
:color="memberInfo?.duesStatus === 'Paid' ? 'success' : 'warning'"
|
|
size="small"
|
|
>
|
|
{{ memberInfo?.duesStatus || 'Unknown' }}
|
|
</v-chip>
|
|
</v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-content>
|
|
<v-list-item-title>Last Payment</v-list-item-title>
|
|
<v-list-item-subtitle>{{ memberInfo?.lastPayment || 'No payment recorded' }}</v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-content>
|
|
<v-list-item-title>Member Type</v-list-item-title>
|
|
<v-list-item-subtitle>
|
|
<v-chip color="primary" size="small">{{ userTier.toUpperCase() }}</v-chip>
|
|
</v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="6">
|
|
<v-card elevation="2">
|
|
<v-card-title class="pa-4" style="background-color: #f5f5f5;">
|
|
<v-icon class="mr-2" color="primary">mdi-help-circle-outline</v-icon>
|
|
Need Help?
|
|
</v-card-title>
|
|
<v-card-text class="pa-4">
|
|
<p class="mb-4">
|
|
If you need assistance or have questions about your membership,
|
|
please don't hesitate to contact our support team.
|
|
</p>
|
|
<v-btn
|
|
color="primary"
|
|
variant="outlined"
|
|
style="border-color: #a31515; color: #a31515;"
|
|
@click="contactSupport"
|
|
>
|
|
<v-icon start>mdi-email</v-icon>
|
|
Contact Support
|
|
</v-btn>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Member } from '~/utils/types';
|
|
|
|
definePageMeta({
|
|
layout: 'dashboard',
|
|
middleware: 'auth'
|
|
});
|
|
|
|
const { firstName, user, userTier } = useAuth();
|
|
|
|
// Fetch complete member data
|
|
const { data: memberData, pending, error } = await useFetch<{ success: boolean; member: Member }>('/api/auth/session', {
|
|
server: false
|
|
});
|
|
|
|
const member = computed(() => memberData.value?.member);
|
|
|
|
// Format member information for display
|
|
const memberInfo = computed(() => {
|
|
if (!member.value) return null;
|
|
|
|
return {
|
|
memberId: member.value.member_id || 'Not assigned',
|
|
fullName: member.value.FullName || `${member.value.first_name || ''} ${member.value.last_name || ''}`.trim(),
|
|
email: member.value.email || 'Not provided',
|
|
phone: member.value.FormattedPhone || member.value.phone || 'Not provided',
|
|
nationality: member.value.nationality || 'Not provided',
|
|
memberSince: member.value.member_since ? new Date(member.value.member_since).toLocaleDateString() : 'Not provided',
|
|
duesStatus: member.value.current_year_dues_paid === 'true' ? 'Paid' : 'Outstanding',
|
|
membershipStatus: member.value.membership_status || 'Active',
|
|
lastPayment: member.value.membership_date_paid ? new Date(member.value.membership_date_paid).toLocaleDateString() : 'No payment recorded',
|
|
dueDate: member.value.payment_due_date ? new Date(member.value.payment_due_date).toLocaleDateString() : 'N/A'
|
|
};
|
|
});
|
|
|
|
// Navigation methods (placeholder implementations)
|
|
const navigateToProfile = () => {
|
|
navigateTo('/dashboard/profile');
|
|
};
|
|
|
|
const navigateToEvents = () => {
|
|
// TODO: Implement events navigation
|
|
console.log('Navigate to events');
|
|
};
|
|
|
|
const navigateToResources = () => {
|
|
// TODO: Implement resources navigation
|
|
console.log('Navigate to resources');
|
|
};
|
|
|
|
const contactSupport = () => {
|
|
const subject = encodeURIComponent('MonacoUSA Portal Support Request');
|
|
const body = encodeURIComponent(`Hello,
|
|
|
|
I need assistance with:
|
|
|
|
[Please describe your issue]
|
|
|
|
Member ID: ${memberInfo.value?.memberId || 'Not provided'}
|
|
Name: ${memberInfo.value?.fullName || 'Not provided'}
|
|
Email: ${memberInfo.value?.email || 'Not provided'}
|
|
|
|
Thank you!`);
|
|
|
|
window.open(`mailto:support@monacousa.org?subject=${subject}&body=${body}`, '_self');
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.v-card {
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
.v-card:hover {
|
|
transform: translateY(-2px);
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
.v-btn {
|
|
text-transform: none !important;
|
|
}
|
|
|
|
.v-icon {
|
|
color: #a31515 !important;
|
|
}
|
|
|
|
h3 {
|
|
color: #333;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.text-body-2 {
|
|
color: #666;
|
|
}
|
|
</style>
|