From 3e7d04c52130c634081bd23daea8dbd5f45b0876 Mon Sep 17 00:00:00 2001 From: Matt Date: Thu, 4 Sep 2025 14:33:44 +0200 Subject: [PATCH] Redesign member management section with enhanced UI/UX MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add dual view modes (list and grid) with toggle functionality - Enhance list view with profile avatars, nationality flags, and dues status - Implement responsive grid view with member cards - Add inline 'Mark as Paid' functionality in both views - Redesign ViewMemberDialog with modern hero header and tabbed interface - Add payment history, activity timeline, and notes management tabs - Integrate profile avatars throughout the application - Make all member entries clickable to open detailed modal - Clean up console.log statements and remove unused code - Improve overall design consistency with glass morphism effects 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- components/ViewMemberDialog.vue | 1132 +++++++++++++++++-------------- pages/admin/members/index.vue | 537 +++++++++++---- 2 files changed, 1006 insertions(+), 663 deletions(-) diff --git a/components/ViewMemberDialog.vue b/components/ViewMemberDialog.vue index eab7284..839dd99 100644 --- a/components/ViewMemberDialog.vue +++ b/components/ViewMemberDialog.vue @@ -2,203 +2,471 @@ - - - - - -
-

- {{ member.FullName || `${member.first_name} ${member.last_name}` }} -

-
- - - {{ getCountryName(member.nationality) || 'Unknown Country' }} - -
-
- + + +
mdi-close - - - - -
- - {{ statusIcon }} - {{ member.membership_status }} - + +
+ - - {{ duesIcon }} - {{ duesText }} - +

+ {{ member.FullName || `${member.first_name} ${member.last_name}` }} +

- - mdi-calendar-alert - {{ isOverdue ? 'Payment Overdue' : 'Payment Due' }} - +
+
+ + + {{ getCountryName(member.nationality) || 'No nationality' }} + +
+ + + Member since {{ formatDate(member.member_since) || 'Unknown' }} + +
+ + +
+ + {{ statusIcon }} + {{ member.membership_status }} + + + + {{ duesIcon }} + {{ duesText }} + + + + {{ member.membership_type }} + +
+
- - - - -

Personal Information

- -
-
- -

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

-
- -
- -

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

-
- -
- -

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

-
- -
- -

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

-
- -
- -

{{ formatDate(member.date_of_birth) }}

-
- -
- -

{{ member.address }}

-
-
- + +
+ + Mark Dues Paid + + + Edit Profile + + + Send Email + + + Call + + + + + + + mdi-history + Payment History + + + + + mdi-file-document + Generate Invoice + + + + + mdi-download + Export Data + + + + +
- - -

Membership Information

- -
-
- -

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

-
- -
- -

- - {{ member.membership_status }} - -

-
- -
- -

- - {{ member.current_year_dues_paid === 'true' ? 'Paid' : 'Outstanding' }} - -

-
- -
- -

{{ formatDate(member.membership_date_paid) }}

-
- -
- -

- {{ formatDate(member.payment_due_date) }} - (Overdue) -

-
-
- - + + + + + mdi-account-details + Overview + + + mdi-cash-multiple + Payments + + + mdi-history + Activity + + + mdi-note-text + Notes + + + + + + + + + + + + + mdi-account + Personal Information + + +
+
+ +

{{ member.first_name }} {{ member.last_name }}

+
+ +
+ +

+ + {{ member.email }} + +

+
+ +
+ +

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

+
+ +
+ +

{{ formatDate(member.date_of_birth) }}

+
+ +
+ +

{{ member.address }}

+
+ +
+ +
+ + {{ getCountryName(member.nationality) || 'Not specified' }} +
+
+
+ + + + + + + + + mdi-card-account-details + Membership Details + + +
+
+ +

{{ member.member_id }}

+
+ +
+ + + {{ member.membership_type }} + +
+ +
+ + + {{ member.membership_status }} + +
+ +
+ +

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

+
+ +
+ +

{{ member.last_renewal ? formatDate(member.last_renewal) : 'Never' }}

+
+ +
+ + + {{ duesText }} + +
+
+ + + + + + + + + mdi-phone-alert + Emergency Contact + + + + +
+ +

{{ member.emergency_contact.name || 'Not provided' }}

+
+ + +
+ +

{{ member.emergency_contact.relationship || 'Not provided' }}

+
+ + +
+ +

{{ member.emergency_contact.phone || 'Not provided' }}

+
+ + + + + + + + + + + + + + +
+ mdi-cash-multiple + Payment History +
+ + Record Payment + + + + + + + + ${{ payment.amount }} - {{ payment.type }} + + + {{ formatDate(payment.date) }} • {{ payment.method }} + + + + +
+ No payment history available +
+ + + + + + + + + + + mdi-history + Recent Activity + + + + + +
+
{{ activity.title }}
+
{{ activity.description }}
+
+ + +
+ No recent activity +
+ + + + + + + + + + +
+ mdi-note-text + Member Notes +
+ + Add Note + + + + + + Save Notes + + + + + + - - - - - mdi-email-alert - Send Dues Reminder - - - - - mdi-cash - Mark Dues as Paid - - + + - mdi-pencil - Edit - - - - - - - - - - {{ member.FullName || `${member.first_name} ${member.last_name}` }} - Profile Photo - - - mdi-close - - - -
- -
- - - - - - - - - mdi-calendar-check - Mark Dues as Paid - - - -
-

- {{ member?.FullName || `${member?.first_name} ${member?.last_name}` }} -

-

- Select the date when the dues payment was received: -

-
- -
- -
- Select the date when the payment was received (Monaco timezone) -
-
- - - mdi-information - Future dates are not allowed. Please select today or an earlier date. - - - - - - - Cancel - - - mdi-check-circle - Confirm Payment + Edit Member @@ -323,311 +489,235 @@ + \ No newline at end of file diff --git a/pages/admin/members/index.vue b/pages/admin/members/index.vue index d22ce2d..ec37071 100644 --- a/pages/admin/members/index.vue +++ b/pages/admin/members/index.vue @@ -6,7 +6,24 @@

Member Management

Manage association members and their information

- + + + + + mdi-view-list + List View + + + mdi-view-grid + Grid View + + +
-
{{ stats.newThisMonth }}
-
New This Month
+
{{ stats.paidThisYear }}
+
Dues Paid This Year
- mdi-account-plus-outline + mdi-cash-check
@@ -64,8 +81,8 @@
-
{{ stats.renewalDue }}
-
Renewal Due
+
{{ stats.duesOutstanding }}
+
Dues Outstanding
mdi-clock-alert-outline
@@ -89,7 +106,7 @@ hide-details /> - + - + + + + - - + + -