Fix member management issues and add refined view
All checks were successful
Build And Push Image / docker (push) Successful in 2m0s
All checks were successful
Build And Push Image / docker (push) Successful in 2m0s
- Sort dues management cards alphabetically by last name - Change 'Invalid Date' display to 'N/A' in formatDate functions - Add new refined member management view with modern UI design - Glassmorphism effects and gradient accents - Enhanced stat cards with progress indicators - Improved search and filter interface - Better card and table layouts - Smooth animations and transitions 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -150,8 +150,21 @@ const loadDuesData = async () => {
|
||||
}>('/api/members/dues-status');
|
||||
|
||||
if (response.success) {
|
||||
overdueMembers.value = response.data.overdue || [];
|
||||
upcomingMembers.value = response.data.upcoming || [];
|
||||
// Sort members alphabetically by last name, then first name
|
||||
const sortByName = (a: Member, b: Member) => {
|
||||
const aLastName = (a.last_name || '').toLowerCase();
|
||||
const bLastName = (b.last_name || '').toLowerCase();
|
||||
const aFirstName = (a.first_name || '').toLowerCase();
|
||||
const bFirstName = (b.first_name || '').toLowerCase();
|
||||
|
||||
const lastNameCompare = aLastName.localeCompare(bLastName);
|
||||
if (lastNameCompare !== 0) return lastNameCompare;
|
||||
|
||||
return aFirstName.localeCompare(bFirstName);
|
||||
};
|
||||
|
||||
overdueMembers.value = (response.data.overdue || []).sort(sortByName);
|
||||
upcomingMembers.value = (response.data.upcoming || []).sort(sortByName);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading dues data:', error);
|
||||
|
||||
@@ -570,8 +570,10 @@ const getMembershipColor = (type: string) => {
|
||||
};
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
if (!date) return null;
|
||||
return new Date(date).toLocaleDateString('en-US', {
|
||||
if (!date) return 'N/A';
|
||||
const parsedDate = new Date(date);
|
||||
if (isNaN(parsedDate.getTime())) return 'N/A';
|
||||
return parsedDate.toLocaleDateString('en-US', {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
|
||||
Reference in New Issue
Block a user