diff --git a/components/MemberCard.vue b/components/MemberCard.vue index 81c051c..cf81501 100644 --- a/components/MemberCard.vue +++ b/components/MemberCard.vue @@ -12,7 +12,7 @@ size="small" variant="flat" > - {{ member['Membership Status'] }} + {{ member.membership_status }} @@ -31,18 +31,18 @@

- {{ member.FullName || `${member['First Name']} ${member['Last Name']}` }} + {{ member.FullName || `${member.first_name} ${member.last_name}` }}

- {{ getCountryName(member.Nationality) || 'Unknown' }} + {{ getCountryName(member.nationality) || 'Unknown' }}
@@ -52,17 +52,17 @@
mdi-email - {{ member.Email || 'No email' }} + {{ member.email || 'No email' }}
-
+
mdi-phone - {{ member.FormattedPhone || member.Phone }} + {{ member.FormattedPhone || member.phone }}
-
+
mdi-calendar - Member since {{ formatDate(member['Member Since']) }} + Member since {{ formatDate(member.member_since) }}
@@ -79,14 +79,14 @@ mdi-calendar-alert - {{ isOverdue ? 'Overdue' : `Due ${formatDate(member['Payment Due Date'])}` }} + {{ isOverdue ? 'Overdue' : `Due ${formatDate(member.payment_due_date)}` }}
@@ -148,11 +148,11 @@ const props = withDefaults(defineProps(), { defineEmits(); // Computed properties -const memberInitials = computed(() => { - const firstName = props.member['First Name'] || ''; - const lastName = props.member['Last Name'] || ''; - return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase(); -}); + const memberInitials = computed(() => { + const firstName = props.member.first_name || ''; + const lastName = props.member.last_name || ''; + return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase(); + }); const avatarColor = computed(() => { // Generate consistent color based on member ID using high-contrast colors @@ -162,11 +162,11 @@ const avatarColor = computed(() => { }); const isActive = computed(() => { - return props.member['Membership Status'] === 'Active'; + return props.member.membership_status === 'Active'; }); const statusColor = computed(() => { - const status = props.member['Membership Status']; + const status = props.member.membership_status; switch (status) { case 'Active': return 'success'; case 'Inactive': return 'grey'; @@ -177,26 +177,26 @@ const statusColor = computed(() => { }); const duesColor = computed(() => { - return props.member['Current Year Dues Paid'] === 'true' ? 'success' : 'error'; + return props.member.current_year_dues_paid === 'true' ? 'success' : 'error'; }); const duesVariant = computed(() => { - return props.member['Current Year Dues Paid'] === 'true' ? 'tonal' : 'flat'; + return props.member.current_year_dues_paid === 'true' ? 'tonal' : 'flat'; }); const duesIcon = computed(() => { - return props.member['Current Year Dues Paid'] === 'true' ? 'mdi-check-circle' : 'mdi-alert-circle'; + return props.member.current_year_dues_paid === 'true' ? 'mdi-check-circle' : 'mdi-alert-circle'; }); const duesText = computed(() => { - return props.member['Current Year Dues Paid'] === 'true' ? 'Dues Paid' : 'Dues Outstanding'; + return props.member.current_year_dues_paid === 'true' ? 'Dues Paid' : 'Dues Outstanding'; }); const isOverdue = computed(() => { - if (!props.member['Payment Due Date']) return false; - const dueDate = new Date(props.member['Payment Due Date']); + if (!props.member.payment_due_date) return false; + const dueDate = new Date(props.member.payment_due_date); const today = new Date(); - return dueDate < today && props.member['Current Year Dues Paid'] !== 'true'; + return dueDate < today && props.member.current_year_dues_paid !== 'true'; }); // Methods diff --git a/components/ViewMemberDialog.vue b/components/ViewMemberDialog.vue index a8edbc4..fdc6379 100644 --- a/components/ViewMemberDialog.vue +++ b/components/ViewMemberDialog.vue @@ -21,18 +21,18 @@

- {{ member.FullName || `${member['First Name']} ${member['Last Name']}` }} + {{ member.FullName || `${member.first_name} ${member.last_name}` }}

- {{ getCountryName(member.Nationality) || 'Unknown Country' }} + {{ getCountryName(member.nationality) || 'Unknown Country' }}
@@ -56,7 +56,7 @@ size="small" > {{ statusIcon }} - {{ member['Membership Status'] }} + {{ member.membership_status }}
-

{{ member['First Name'] || 'Not provided' }}

+

{{ member.first_name || 'Not provided' }}

-

{{ member['Last Name'] || 'Not provided' }}

+

{{ member.last_name || 'Not provided' }}

- - {{ member.Email }} + + {{ member.email }} Not provided

-
+

- - {{ member.FormattedPhone || member.Phone }} + + {{ member.FormattedPhone || member.phone }}

-
+
-

{{ formatDate(member['Date of Birth']) }}

+

{{ formatDate(member.date_of_birth) }}

-
+
-

{{ member.Address }}

+

{{ member.address }}

@@ -134,14 +134,14 @@
-

{{ formatDate(member['Member Since']) || 'Not specified' }}

+

{{ formatDate(member.member_since) || 'Not specified' }}

- {{ member['Membership Status'] }} + {{ member.membership_status }}

@@ -150,20 +150,20 @@

- {{ member['Current Year Dues Paid'] ? 'Paid' : 'Outstanding' }} + {{ member.current_year_dues_paid === 'true' ? 'Paid' : 'Outstanding' }}

-
+
-

{{ formatDate(member['Membership Date Paid']) }}

+

{{ formatDate(member.membership_date_paid) }}

-
+

- {{ formatDate(member['Payment Due Date']) }} + {{ formatDate(member.payment_due_date) }} (Overdue)

@@ -208,8 +208,8 @@ defineEmits(); // Computed properties const memberInitials = computed(() => { if (!props.member) return ''; - const firstName = props.member['First Name'] || ''; - const lastName = props.member['Last Name'] || ''; + const firstName = props.member.first_name || ''; + const lastName = props.member.last_name || ''; return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase(); }); @@ -222,7 +222,7 @@ const avatarColor = computed(() => { const statusColor = computed(() => { if (!props.member) return 'grey'; - const status = props.member['Membership Status']; + const status = props.member.membership_status; switch (status) { case 'Active': return 'success'; case 'Inactive': return 'grey'; @@ -234,7 +234,7 @@ const statusColor = computed(() => { const statusIcon = computed(() => { if (!props.member) return 'mdi-help'; - const status = props.member['Membership Status']; + const status = props.member.membership_status; switch (status) { case 'Active': return 'mdi-check-circle'; case 'Inactive': return 'mdi-pause-circle'; @@ -246,29 +246,29 @@ const statusIcon = computed(() => { const duesColor = computed(() => { if (!props.member) return 'grey'; - return props.member['Current Year Dues Paid'] === 'true' ? 'success' : 'error'; + return props.member.current_year_dues_paid === 'true' ? 'success' : 'error'; }); const duesVariant = computed(() => { if (!props.member) return 'tonal'; - return props.member['Current Year Dues Paid'] === 'true' ? 'tonal' : 'flat'; + return props.member.current_year_dues_paid === 'true' ? 'tonal' : 'flat'; }); const duesIcon = computed(() => { if (!props.member) return 'mdi-help'; - return props.member['Current Year Dues Paid'] === 'true' ? 'mdi-check-circle' : 'mdi-alert-circle'; + return props.member.current_year_dues_paid === 'true' ? 'mdi-check-circle' : 'mdi-alert-circle'; }); const duesText = computed(() => { if (!props.member) return ''; - return props.member['Current Year Dues Paid'] === 'true' ? 'Dues Paid' : 'Dues Outstanding'; + return props.member.current_year_dues_paid === 'true' ? 'Dues Paid' : 'Dues Outstanding'; }); const isOverdue = computed(() => { - if (!props.member || !props.member['Payment Due Date']) return false; - const dueDate = new Date(props.member['Payment Due Date']); + if (!props.member || !props.member.payment_due_date) return false; + const dueDate = new Date(props.member.payment_due_date); const today = new Date(); - return dueDate < today && props.member['Current Year Dues Paid'] !== 'true'; + return dueDate < today && props.member.current_year_dues_paid !== 'true'; }); // Methods