631 lines
18 KiB
Vue
631 lines
18 KiB
Vue
<template>
|
|
<v-container fluid class="pa-4">
|
|
<!-- Dues Payment Banner -->
|
|
<DuesPaymentBanner />
|
|
|
|
<!-- Header -->
|
|
<v-row class="mb-4">
|
|
<v-col>
|
|
<h1 class="text-h4 font-weight-bold mb-4">
|
|
<v-icon left>mdi-account-multiple</v-icon>
|
|
Welcome Back, {{ firstName }}
|
|
</h1>
|
|
<p class="text-body-1 mb-4">
|
|
Manage MonacoUSA association members and their information.
|
|
</p>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
|
|
<!-- Search and Filter Controls -->
|
|
<v-row class="mb-4">
|
|
<v-col cols="12" md="2">
|
|
<v-text-field
|
|
v-model="searchTerm"
|
|
label="Search members..."
|
|
prepend-inner-icon="mdi-magnify"
|
|
variant="outlined"
|
|
clearable
|
|
@input="debouncedSearch"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="2">
|
|
<v-select
|
|
v-model="activeFilter"
|
|
:items="activeFilterOptions"
|
|
label="Member Status"
|
|
variant="outlined"
|
|
clearable
|
|
prepend-inner-icon="mdi-account-check"
|
|
/>
|
|
</v-col>
|
|
|
|
|
|
<v-col cols="12" md="2">
|
|
<v-select
|
|
v-model="duesFilter"
|
|
:items="duesFilterOptions"
|
|
label="Dues Status"
|
|
variant="outlined"
|
|
clearable
|
|
prepend-inner-icon="mdi-cash"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="2">
|
|
<v-select
|
|
v-model="sortOption"
|
|
:items="sortOptions"
|
|
label="Sort By"
|
|
variant="outlined"
|
|
prepend-inner-icon="mdi-sort"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="2">
|
|
<v-btn
|
|
color="primary"
|
|
block
|
|
size="large"
|
|
@click="showAddDialog = true"
|
|
:disabled="!canCreateMembers"
|
|
>
|
|
<v-icon start>mdi-plus</v-icon>
|
|
Add Member
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Member Statistics -->
|
|
<v-row class="mb-6">
|
|
<v-col cols="12" md="3">
|
|
<v-card elevation="2">
|
|
<v-card-text>
|
|
<div class="text-h6 text-primary font-weight-bold">{{ totalMembers }}</div>
|
|
<div class="text-body-2 text-medium-emphasis">Total Members</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="12" md="3">
|
|
<v-card elevation="2">
|
|
<v-card-text>
|
|
<div class="text-h6 text-success font-weight-bold">{{ activeMembers }}</div>
|
|
<div class="text-body-2 text-medium-emphasis">Active Members</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="12" md="3">
|
|
<v-card elevation="2">
|
|
<v-card-text>
|
|
<div class="text-h6 text-success font-weight-bold">{{ paidDuesMembers }}</div>
|
|
<div class="text-body-2 text-medium-emphasis">Paid Dues</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="12" md="3">
|
|
<v-card elevation="2">
|
|
<v-card-text>
|
|
<div class="text-h6 font-weight-bold">{{ uniqueNationalities }}</div>
|
|
<div class="text-body-2 text-medium-emphasis">Countries</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Loading State -->
|
|
<v-row v-if="loading" justify="center" class="my-12">
|
|
<v-col cols="auto" class="text-center">
|
|
<v-progress-circular indeterminate color="primary" size="64" />
|
|
<p class="mt-4 text-h6">Loading members...</p>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Error State -->
|
|
<v-alert
|
|
v-else-if="error"
|
|
type="error"
|
|
variant="tonal"
|
|
class="mb-4"
|
|
closable
|
|
@click:close="error = ''"
|
|
>
|
|
<template #title>Failed to load members</template>
|
|
{{ error }}
|
|
<template #append>
|
|
<v-btn color="error" variant="text" @click="loadMembers">
|
|
Try Again
|
|
</v-btn>
|
|
</template>
|
|
</v-alert>
|
|
|
|
<!-- Members Grid -->
|
|
<v-row v-else>
|
|
<v-col
|
|
v-for="member in filteredMembers"
|
|
:key="member.Id"
|
|
cols="12"
|
|
sm="6"
|
|
md="6"
|
|
lg="4"
|
|
xl="3"
|
|
>
|
|
<MemberCard
|
|
:member="member"
|
|
@edit="editMember"
|
|
@delete="confirmDeleteMember"
|
|
@view="viewMember"
|
|
@create-portal-account="createPortalAccount"
|
|
:can-edit="canEditMembers"
|
|
:can-delete="canDeleteMembers"
|
|
:can-create-portal-account="canCreatePortalAccounts"
|
|
:creating-portal-account="creatingPortalAccountIds.includes(member.Id)"
|
|
/>
|
|
</v-col>
|
|
|
|
<!-- No Results State -->
|
|
<v-col v-if="filteredMembers.length === 0 && !loading && !error" cols="12" class="text-center">
|
|
<v-card elevation="0" class="pa-8">
|
|
<v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-account-search</v-icon>
|
|
<h3 class="text-h5 mb-2">No members found</h3>
|
|
<p class="text-body-1 mb-4">
|
|
{{ searchTerm
|
|
? 'Try adjusting your filters to find members.'
|
|
: 'No members have been added yet.' }}
|
|
</p>
|
|
<v-btn
|
|
v-if="canCreateMembers && !searchTerm"
|
|
color="primary"
|
|
@click="showAddDialog = true"
|
|
>
|
|
<v-icon start>mdi-plus</v-icon>
|
|
Add First Member
|
|
</v-btn>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Add Member Dialog -->
|
|
<AddMemberDialog
|
|
v-model="showAddDialog"
|
|
@member-created="handleMemberCreated"
|
|
/>
|
|
|
|
<!-- Edit Member Dialog -->
|
|
<EditMemberDialog
|
|
v-model="showEditDialog"
|
|
:member="selectedMember"
|
|
@member-updated="handleMemberUpdated"
|
|
/>
|
|
|
|
<!-- View Member Dialog -->
|
|
<ViewMemberDialog
|
|
v-model="showViewDialog"
|
|
:member="selectedMember"
|
|
@edit="editMember"
|
|
/>
|
|
|
|
<!-- Create Portal Account Dialog -->
|
|
<CreatePortalAccountDialog
|
|
v-model="showCreatePortalAccountDialog"
|
|
:member="selectedMemberForPortalAccount"
|
|
@account-created="handlePortalAccountCreated"
|
|
/>
|
|
|
|
<!-- Delete Confirmation Dialog -->
|
|
<v-dialog v-model="showDeleteDialog" max-width="400">
|
|
<v-card>
|
|
<v-card-title class="text-h6">
|
|
<v-icon color="error" class="mr-2">mdi-delete-alert</v-icon>
|
|
Confirm Delete
|
|
</v-card-title>
|
|
<v-card-text>
|
|
Are you sure you want to delete <strong>{{ selectedMember?.FullName }}</strong>?
|
|
<br><br>
|
|
<v-alert type="warning" variant="tonal" class="mt-2">
|
|
This action cannot be undone.
|
|
</v-alert>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn @click="showDeleteDialog = false" variant="text">
|
|
Cancel
|
|
</v-btn>
|
|
<v-btn
|
|
color="error"
|
|
@click="deleteMember"
|
|
:loading="deleteLoading"
|
|
>
|
|
<v-icon start>mdi-delete</v-icon>
|
|
Delete
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<!-- Success Snackbar -->
|
|
<v-snackbar
|
|
v-model="showSuccess"
|
|
:timeout="4000"
|
|
color="success"
|
|
location="top"
|
|
>
|
|
{{ successMessage }}
|
|
<template #actions>
|
|
<v-btn variant="text" @click="showSuccess = false">
|
|
Close
|
|
</v-btn>
|
|
</template>
|
|
</v-snackbar>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Member, MembershipStatus } from '~/utils/types';
|
|
import { getAllCountries, searchCountries } from '~/utils/countries';
|
|
|
|
definePageMeta({
|
|
layout: 'dashboard',
|
|
middleware: 'auth-board'
|
|
});
|
|
|
|
// Auth and permissions
|
|
const { firstName, isBoard, isAdmin } = useAuth();
|
|
const canCreateMembers = computed(() => isBoard.value || isAdmin.value);
|
|
const canEditMembers = computed(() => isBoard.value || isAdmin.value);
|
|
const canDeleteMembers = computed(() => isAdmin.value);
|
|
const canCreatePortalAccounts = computed(() => isAdmin.value); // Only admins can create portal accounts
|
|
|
|
// Reactive data
|
|
const members = ref<Member[]>([]);
|
|
const loading = ref(true);
|
|
const error = ref('');
|
|
|
|
// Search and filtering
|
|
const searchTerm = ref('');
|
|
const activeFilter = ref('');
|
|
const duesFilter = ref('');
|
|
const sortOption = ref('name-asc');
|
|
|
|
// Dialogs
|
|
const showAddDialog = ref(false);
|
|
const showEditDialog = ref(false);
|
|
const showViewDialog = ref(false);
|
|
const showDeleteDialog = ref(false);
|
|
const showCreatePortalAccountDialog = ref(false);
|
|
const selectedMember = ref<Member | null>(null);
|
|
const selectedMemberForPortalAccount = ref<Member | null>(null);
|
|
const deleteLoading = ref(false);
|
|
|
|
// Success handling
|
|
const showSuccess = ref(false);
|
|
const successMessage = ref('');
|
|
|
|
// Portal account creation
|
|
const creatingPortalAccountIds = ref<string[]>([]);
|
|
|
|
// Overdue dues management
|
|
const overdueCount = ref(0);
|
|
const overdueRefreshTrigger = ref(0);
|
|
|
|
// Filter options
|
|
const activeFilterOptions = [
|
|
{ title: 'Active Members', value: 'active' },
|
|
{ title: 'Inactive Members', value: 'inactive' }
|
|
];
|
|
|
|
const membershipLevelOptions = [
|
|
{ title: 'Regular Member', value: 'regular' },
|
|
{ title: 'Board Member', value: 'board' },
|
|
{ title: 'Honorary Member', value: 'honorary' },
|
|
{ title: 'New Member', value: 'new' },
|
|
{ title: 'Delinquent Member', value: 'delinquent' }
|
|
];
|
|
|
|
const duesFilterOptions = [
|
|
{ title: 'Dues Paid', value: 'paid' },
|
|
{ title: 'Dues Outstanding', value: 'unpaid' }
|
|
];
|
|
|
|
// Sort options
|
|
const sortOptions = [
|
|
{ title: 'Name (A-Z)', value: 'name-asc' },
|
|
{ title: 'Name (Z-A)', value: 'name-desc' },
|
|
{ title: 'Nationality (A-Z)', value: 'nationality-asc' },
|
|
{ title: 'Nationality (Z-A)', value: 'nationality-desc' }
|
|
];
|
|
|
|
// Computed properties
|
|
const filteredMembers = computed(() => {
|
|
let filtered = [...members.value];
|
|
|
|
// Search filter
|
|
if (searchTerm.value) {
|
|
const search = searchTerm.value.toLowerCase();
|
|
filtered = filtered.filter(member =>
|
|
member.FullName?.toLowerCase().includes(search) ||
|
|
member.email?.toLowerCase().includes(search) ||
|
|
member.phone?.includes(search) ||
|
|
member.member_id?.toLowerCase().includes(search) ||
|
|
`MUSA-${member.Id}`.toLowerCase().includes(search) // Search by generated member ID format
|
|
);
|
|
}
|
|
|
|
// Active/Inactive filter
|
|
if (activeFilter.value) {
|
|
if (activeFilter.value === 'active') {
|
|
filtered = filtered.filter(member => member.membership_status === 'Active');
|
|
} else if (activeFilter.value === 'inactive') {
|
|
filtered = filtered.filter(member => member.membership_status !== 'Active');
|
|
}
|
|
}
|
|
|
|
|
|
// Dues filter
|
|
if (duesFilter.value) {
|
|
if (duesFilter.value === 'paid') {
|
|
filtered = filtered.filter(member => member.current_year_dues_paid === 'true');
|
|
} else if (duesFilter.value === 'unpaid') {
|
|
filtered = filtered.filter(member => member.current_year_dues_paid !== 'true');
|
|
}
|
|
}
|
|
|
|
// Sorting
|
|
if (sortOption.value) {
|
|
filtered.sort((a, b) => {
|
|
switch (sortOption.value) {
|
|
case 'name-asc':
|
|
return (a.FullName || '').localeCompare(b.FullName || '');
|
|
case 'name-desc':
|
|
return (b.FullName || '').localeCompare(a.FullName || '');
|
|
case 'nationality-asc':
|
|
return (a.nationality || '').localeCompare(b.nationality || '');
|
|
case 'nationality-desc':
|
|
return (b.nationality || '').localeCompare(a.nationality || '');
|
|
default:
|
|
return 0;
|
|
}
|
|
});
|
|
}
|
|
|
|
return filtered;
|
|
});
|
|
|
|
const totalMembers = computed(() => members.value.length);
|
|
const activeMembers = computed(() => {
|
|
// Temporary debug logging
|
|
console.log('Members data for active count:');
|
|
members.value.forEach((m, i) => {
|
|
if (i < 5) { // Only log first 5 to avoid spam
|
|
console.log(`${m.FullName}: status="${m.membership_status}", type=${typeof m.membership_status}`);
|
|
}
|
|
});
|
|
|
|
const activeCount = members.value.filter(m => m.membership_status === 'Active').length;
|
|
console.log(`Active members count: ${activeCount} out of ${members.value.length} total`);
|
|
return activeCount;
|
|
});
|
|
const paidDuesMembers = computed(() =>
|
|
members.value.filter(m => m.current_year_dues_paid === 'true').length
|
|
);
|
|
const uniqueNationalities = computed(() => {
|
|
const nationalities = new Set(members.value.map(m => m.nationality).filter(Boolean));
|
|
return nationalities.size;
|
|
});
|
|
|
|
// Methods
|
|
const loadMembers = async () => {
|
|
loading.value = true;
|
|
error.value = '';
|
|
|
|
try {
|
|
const response = await $fetch<{ success: boolean; data: { list: Member[] } }>('/api/members');
|
|
|
|
if (response.success) {
|
|
members.value = response.data.list || [];
|
|
|
|
// DIAGNOSTIC: Log what we received from API
|
|
console.log('[member-list] Received response from API:', response);
|
|
console.log('[member-list] Members count:', members.value.length);
|
|
if (members.value.length > 0) {
|
|
const sampleMember = members.value[0];
|
|
console.log('[member-list] DIAGNOSTIC - Sample member from API:', JSON.stringify(sampleMember, null, 2));
|
|
console.log('[member-list] DIAGNOSTIC - Sample member fields:', Object.keys(sampleMember));
|
|
console.log('[member-list] DIAGNOSTIC - Sample FullName:', `"${sampleMember.FullName}"`);
|
|
console.log('[member-list] DIAGNOSTIC - Sample first_name:', `"${sampleMember.first_name}"`);
|
|
console.log('[member-list] DIAGNOSTIC - Sample last_name:', `"${sampleMember.last_name}"`);
|
|
}
|
|
} else {
|
|
throw new Error('Failed to load members');
|
|
}
|
|
} catch (err: any) {
|
|
console.error('Error loading members:', err);
|
|
error.value = err.message || 'Failed to load members. Please try again.';
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
// Simple debounce function
|
|
const debouncedSearch = (() => {
|
|
let timeout: NodeJS.Timeout;
|
|
return () => {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(() => {
|
|
// Search happens automatically via computed
|
|
}, 300);
|
|
};
|
|
})();
|
|
|
|
const filterMembers = () => {
|
|
// Filtering happens automatically via computed
|
|
};
|
|
|
|
const viewMember = (member: Member) => {
|
|
selectedMember.value = member;
|
|
showViewDialog.value = true;
|
|
};
|
|
|
|
const editMember = (member: Member) => {
|
|
selectedMember.value = member;
|
|
showEditDialog.value = true;
|
|
};
|
|
|
|
const confirmDeleteMember = (member: Member) => {
|
|
selectedMember.value = member;
|
|
showDeleteDialog.value = true;
|
|
};
|
|
|
|
const deleteMember = async () => {
|
|
if (!selectedMember.value) return;
|
|
|
|
deleteLoading.value = true;
|
|
|
|
try {
|
|
const response = await $fetch<{ success: boolean; message?: string }>(`/api/members/${selectedMember.value.Id}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (response.success) {
|
|
// Remove from local array
|
|
const index = members.value.findIndex(m => m.Id === selectedMember.value?.Id);
|
|
if (index !== -1) {
|
|
members.value.splice(index, 1);
|
|
}
|
|
|
|
showSuccess.value = true;
|
|
successMessage.value = `${selectedMember.value.FullName} has been deleted successfully.`;
|
|
showDeleteDialog.value = false;
|
|
selectedMember.value = null;
|
|
}
|
|
} catch (err: any) {
|
|
console.error('Error deleting member:', err);
|
|
error.value = err.message || 'Failed to delete member. Please try again.';
|
|
} finally {
|
|
deleteLoading.value = false;
|
|
}
|
|
};
|
|
|
|
const handleMemberCreated = (newMember: Member) => {
|
|
console.log('[member-list] handleMemberCreated called with:', JSON.stringify(newMember, null, 2));
|
|
console.log('[member-list] newMember fields:', Object.keys(newMember));
|
|
console.log('[member-list] FullName value:', `"${newMember.FullName}"`);
|
|
console.log('[member-list] first_name value:', `"${newMember.first_name}"`);
|
|
console.log('[member-list] last_name value:', `"${newMember.last_name}"`);
|
|
|
|
// Calculate FullName if it doesn't exist
|
|
const fullName = newMember.FullName ||
|
|
`${newMember.first_name || ''} ${newMember.last_name || ''}`.trim() ||
|
|
'New Member';
|
|
|
|
console.log('[member-list] Calculated FullName:', `"${fullName}"`);
|
|
|
|
// Ensure the member has a FullName for display
|
|
const memberWithFullName = {
|
|
...newMember,
|
|
FullName: fullName
|
|
};
|
|
|
|
members.value.unshift(memberWithFullName);
|
|
showSuccess.value = true;
|
|
successMessage.value = `${fullName} has been added successfully.`;
|
|
};
|
|
|
|
const handleMemberUpdated = (updatedMember: Member) => {
|
|
const index = members.value.findIndex(m => m.Id === updatedMember.Id);
|
|
if (index !== -1) {
|
|
members.value[index] = updatedMember;
|
|
}
|
|
showSuccess.value = true;
|
|
successMessage.value = `${updatedMember.FullName} has been updated successfully.`;
|
|
};
|
|
|
|
const createPortalAccount = (member: Member) => {
|
|
selectedMemberForPortalAccount.value = member;
|
|
showCreatePortalAccountDialog.value = true;
|
|
};
|
|
|
|
const handlePortalAccountCreated = (updatedMember: Member) => {
|
|
// Update the member in the local array to reflect the new keycloak_id
|
|
const index = members.value.findIndex(m => m.Id === updatedMember.Id);
|
|
if (index !== -1) {
|
|
members.value[index] = updatedMember;
|
|
}
|
|
|
|
showSuccess.value = true;
|
|
successMessage.value = `Portal account created successfully for ${updatedMember.FullName}.`;
|
|
};
|
|
|
|
// Overdue dues handlers
|
|
const loadOverdueCount = async () => {
|
|
try {
|
|
const response = await $fetch<{
|
|
success: boolean;
|
|
data: {
|
|
count: number;
|
|
overdueMembers: any[];
|
|
}
|
|
}>('/api/members/overdue-count');
|
|
if (response.success) {
|
|
overdueCount.value = response.data.count;
|
|
}
|
|
} catch (error: any) {
|
|
console.error('Error loading overdue count:', error);
|
|
}
|
|
};
|
|
|
|
const viewOverdueMembers = () => {
|
|
// Filter to show only inactive members (who were marked inactive due to overdue dues)
|
|
activeFilter.value = 'inactive';
|
|
duesFilter.value = 'unpaid';
|
|
|
|
showSuccess.value = true;
|
|
successMessage.value = 'Showing members with overdue dues (marked as inactive)';
|
|
};
|
|
|
|
const sendDuesReminders = () => {
|
|
// Placeholder for dues reminder functionality
|
|
console.log('Send dues reminders - feature to be implemented');
|
|
showSuccess.value = true;
|
|
successMessage.value = 'Dues reminder feature coming soon!';
|
|
};
|
|
|
|
const handleStatusesUpdated = async (updatedCount: number) => {
|
|
showSuccess.value = true;
|
|
successMessage.value = `Successfully updated ${updatedCount} member${updatedCount !== 1 ? 's' : ''} to inactive status`;
|
|
|
|
// Refresh members list and overdue count
|
|
await loadMembers();
|
|
await loadOverdueCount();
|
|
|
|
// Trigger banner refresh
|
|
overdueRefreshTrigger.value += 1;
|
|
};
|
|
|
|
// Load members and overdue count on mount
|
|
onMounted(async () => {
|
|
await loadMembers();
|
|
await loadOverdueCount();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.v-card {
|
|
border-radius: 12px !important;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.v-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
|
|
}
|
|
|
|
.member-grid {
|
|
min-height: 400px;
|
|
}
|
|
|
|
.text-primary {
|
|
color: #a31515 !important;
|
|
}
|
|
</style>
|