matt/monacousa-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix email template compatibility and enhance user dashboard
All checks were successful
Build And Push Image / docker (push) Successful in 3m20s
Details

Browse Source 
- Convert all email templates to table-based layouts for compatibility with Outlook, Gmail, Apple Mail, etc.
- Use only inline CSS and email-safe properties
- Fix welcome.hbs, verification.hbs, password-reset.hbs, dues-reminder.hbs, test.hbs templates
- Enhanced user dashboard with complete member information (Member ID, registration date, dues status, etc.)
- Added proper loading states and error handling for member data
- Improved member profile page with comprehensive information display
- Fixed missing wiring information in user and profile screens as requested
This commit is contained in:
Matt
2025-08-11 16:26:51 +02:00
parent c12b88072f
commit ea6a722364
6 changed files with 1189 additions and 939 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
pages/dashboard/user.vue
View File

@@ -102,17 +102,69 @@
Member Information
</v-card-title>
<v-card-text class="pa-4">
<v-list>
<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>{{ user?.name || 'Not provided' }}</v-list-item-subtitle>
<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>{{ user?.email || 'Not provided' }}</v-list-item-subtitle>
<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>
@@ -156,6 +208,8 @@
</template>
<script setup lang="ts">
import type { Member } from '~/utils/types';
definePageMeta({
layout: 'dashboard',
middleware: 'auth'
@@ -163,6 +217,31 @@ definePageMeta({
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');
@@ -186,8 +265,9 @@ I need assistance with:
[Please describe your issue]
Member: ${user.value?.name || 'Not provided'}
Email: ${user.value?.email || 'Not provided'}
Member ID: ${memberInfo.value?.memberId || 'Not provided'}
Name: ${memberInfo.value?.fullName || 'Not provided'}
Email: ${memberInfo.value?.email || 'Not provided'}
Thank you!`);