996 lines
29 KiB
Vue
996 lines
29 KiB
Vue
|
<template>
|
||
|
|
<v-container fluid class="pa-6">
|
||
|
|
<!-- Animated Header with Gradient -->
|
||
|
|
<div class="header-section mb-8">
|
||
|
|
<v-row align="center" justify="space-between">
|
||
|
|
<v-col cols="auto">
|
||
|
|
<div class="d-flex align-center">
|
||
|
|
<v-avatar size="56" class="gradient-avatar mr-4 elevation-3">
|
||
|
|
<v-icon size="32" color="white">mdi-account-group</v-icon>
|
||
|
|
</v-avatar>
|
||
|
|
<div>
|
||
|
|
<h1 class="text-h3 font-weight-bold gradient-text">Member Directory</h1>
|
||
|
|
<p class="text-body-1 text-medium-emphasis mt-1">
|
||
|
|
<v-icon size="18" class="mr-1">mdi-account-multiple</v-icon>
|
||
|
|
{{ stats.total }} total members • {{ stats.active }} active
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="auto">
|
||
|
|
<v-btn
|
||
|
|
color="primary"
|
||
|
|
size="large"
|
||
|
|
elevation="3"
|
||
|
|
rounded="lg"
|
||
|
|
prepend-icon="mdi-account-plus"
|
||
|
|
@click="showCreateDialog = true"
|
||
|
|
class="pulse-animation"
|
||
|
|
>
|
||
|
|
Add New Member
|
||
|
|
</v-btn>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Enhanced Stats Cards with Glassmorphism -->
|
||
|
|
<v-row class="mb-8">
|
||
|
|
<v-col v-for="stat in statsCards" :key="stat.title" cols="12" sm="6" md="3">
|
||
|
|
<v-card
|
||
|
|
class="stat-card glass-card"
|
||
|
|
elevation="0"
|
||
|
|
:style="`border-left: 4px solid ${stat.color}`"
|
||
|
|
>
|
||
|
|
<v-card-text class="pa-5">
|
||
|
|
<div class="d-flex align-center justify-space-between mb-3">
|
||
|
|
<v-avatar :color="stat.color" size="48" class="elevation-2">
|
||
|
|
<v-icon color="white">{{ stat.icon }}</v-icon>
|
||
|
|
</v-avatar>
|
||
|
|
<v-chip
|
||
|
|
v-if="stat.change"
|
||
|
|
:color="stat.changeType === 'increase' ? 'success' : 'error'"
|
||
|
|
size="small"
|
||
|
|
variant="tonal"
|
||
|
|
>
|
||
|
|
<v-icon size="14">
|
||
|
|
{{ stat.changeType === 'increase' ? 'mdi-trending-up' : 'mdi-trending-down' }}
|
||
|
|
</v-icon>
|
||
|
|
{{ stat.change }}
|
||
|
|
</v-chip>
|
||
|
|
</div>
|
||
|
|
<div class="text-h3 font-weight-bold mb-1">{{ stat.value }}</div>
|
||
|
|
<div class="text-body-2 text-medium-emphasis">{{ stat.title }}</div>
|
||
|
|
<v-progress-linear
|
||
|
|
v-if="stat.progress"
|
||
|
|
:model-value="stat.progress"
|
||
|
|
:color="stat.color"
|
||
|
|
height="4"
|
||
|
|
rounded
|
||
|
|
class="mt-3"
|
||
|
|
/>
|
||
|
|
</v-card-text>
|
||
|
|
</v-card>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
|
||
|
|
<!-- Enhanced Search & Filters Bar -->
|
||
|
|
<v-card class="filter-card glass-card mb-6" elevation="0">
|
||
|
|
<v-card-text class="pa-5">
|
||
|
|
<v-row align="center">
|
||
|
|
<v-col cols="12" md="5">
|
||
|
|
<v-text-field
|
||
|
|
v-model="searchQuery"
|
||
|
|
label="Search members"
|
||
|
|
placeholder="Name, email, or ID..."
|
||
|
|
prepend-inner-icon="mdi-magnify"
|
||
|
|
variant="solo"
|
||
|
|
density="comfortable"
|
||
|
|
clearable
|
||
|
|
hide-details
|
||
|
|
class="search-field"
|
||
|
|
>
|
||
|
|
<template v-slot:append-inner>
|
||
|
|
<v-badge
|
||
|
|
v-if="searchQuery"
|
||
|
|
:content="filteredMembers.length"
|
||
|
|
color="primary"
|
||
|
|
inline
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
</v-text-field>
|
||
|
|
</v-col>
|
||
|
|
|
||
|
|
<v-col cols="12" md="7">
|
||
|
|
<div class="d-flex gap-2 flex-wrap">
|
||
|
|
<v-chip-group
|
||
|
|
v-model="quickFilter"
|
||
|
|
selected-class="chip-active"
|
||
|
|
>
|
||
|
|
<v-chip filter variant="outlined" value="all">
|
||
|
|
<v-icon start size="18">mdi-all-inclusive</v-icon>
|
||
|
|
All Members
|
||
|
|
</v-chip>
|
||
|
|
<v-chip filter variant="outlined" value="active">
|
||
|
|
<v-icon start size="18" color="success">mdi-check-circle</v-icon>
|
||
|
|
Active
|
||
|
|
</v-chip>
|
||
|
|
<v-chip filter variant="outlined" value="dues-pending">
|
||
|
|
<v-icon start size="18" color="warning">mdi-clock-alert</v-icon>
|
||
|
|
Dues Pending
|
||
|
|
</v-chip>
|
||
|
|
<v-chip filter variant="outlined" value="new">
|
||
|
|
<v-icon start size="18" color="info">mdi-new-box</v-icon>
|
||
|
|
New This Month
|
||
|
|
</v-chip>
|
||
|
|
</v-chip-group>
|
||
|
|
|
||
|
|
<v-btn
|
||
|
|
icon
|
||
|
|
variant="outlined"
|
||
|
|
@click="showAdvancedFilters = !showAdvancedFilters"
|
||
|
|
>
|
||
|
|
<v-icon>mdi-filter-variant</v-icon>
|
||
|
|
<v-tooltip activator="parent">Advanced Filters</v-tooltip>
|
||
|
|
</v-btn>
|
||
|
|
|
||
|
|
<v-btn
|
||
|
|
icon
|
||
|
|
variant="outlined"
|
||
|
|
@click="exportMembers"
|
||
|
|
>
|
||
|
|
<v-icon>mdi-download</v-icon>
|
||
|
|
<v-tooltip activator="parent">Export</v-tooltip>
|
||
|
|
</v-btn>
|
||
|
|
</div>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
|
||
|
|
<!-- Advanced Filters (Collapsible) -->
|
||
|
|
<v-expand-transition>
|
||
|
|
<v-row v-if="showAdvancedFilters" class="mt-4">
|
||
|
|
<v-col cols="12" md="3">
|
||
|
|
<v-select
|
||
|
|
v-model="statusFilter"
|
||
|
|
label="Status"
|
||
|
|
:items="statusOptions"
|
||
|
|
variant="solo"
|
||
|
|
density="comfortable"
|
||
|
|
clearable
|
||
|
|
hide-details
|
||
|
|
/>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="12" md="3">
|
||
|
|
<v-select
|
||
|
|
v-model="membershipFilter"
|
||
|
|
label="Membership Type"
|
||
|
|
:items="membershipOptions"
|
||
|
|
variant="solo"
|
||
|
|
density="comfortable"
|
||
|
|
clearable
|
||
|
|
hide-details
|
||
|
|
/>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="12" md="3">
|
||
|
|
<v-select
|
||
|
|
v-model="nationalityFilter"
|
||
|
|
label="Nationality"
|
||
|
|
:items="countryOptions"
|
||
|
|
item-title="name"
|
||
|
|
item-value="code"
|
||
|
|
variant="solo"
|
||
|
|
density="comfortable"
|
||
|
|
clearable
|
||
|
|
hide-details
|
||
|
|
/>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="12" md="3">
|
||
|
|
<v-select
|
||
|
|
v-model="duesFilter"
|
||
|
|
label="Dues Status"
|
||
|
|
:items="['Paid', 'Unpaid', 'Overdue']"
|
||
|
|
variant="solo"
|
||
|
|
density="comfortable"
|
||
|
|
clearable
|
||
|
|
hide-details
|
||
|
|
/>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
</v-expand-transition>
|
||
|
|
</v-card-text>
|
||
|
|
</v-card>
|
||
|
|
|
||
|
|
<!-- View Mode Toggle -->
|
||
|
|
<div class="d-flex justify-space-between align-center mb-4">
|
||
|
|
<div class="text-body-1">
|
||
|
|
Showing <strong>{{ filteredMembers.length }}</strong> of {{ members.length }} members
|
||
|
|
</div>
|
||
|
|
<v-btn-toggle
|
||
|
|
v-model="viewMode"
|
||
|
|
mandatory
|
||
|
|
density="comfortable"
|
||
|
|
rounded="lg"
|
||
|
|
color="primary"
|
||
|
|
class="elevation-2"
|
||
|
|
>
|
||
|
|
<v-btn value="cards" prepend-icon="mdi-view-grid">
|
||
|
|
Cards
|
||
|
|
</v-btn>
|
||
|
|
<v-btn value="table" prepend-icon="mdi-table">
|
||
|
|
Table
|
||
|
|
</v-btn>
|
||
|
|
</v-btn-toggle>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Enhanced Card View -->
|
||
|
|
<transition-group
|
||
|
|
v-if="viewMode === 'cards'"
|
||
|
|
name="card-list"
|
||
|
|
tag="div"
|
||
|
|
class="row"
|
||
|
|
>
|
||
|
|
<v-col
|
||
|
|
v-for="member in paginatedMembers"
|
||
|
|
:key="member.member_id"
|
||
|
|
cols="12"
|
||
|
|
sm="6"
|
||
|
|
md="4"
|
||
|
|
lg="3"
|
||
|
|
>
|
||
|
|
<v-card
|
||
|
|
class="member-card glass-card h-100"
|
||
|
|
elevation="0"
|
||
|
|
@click="viewMember(member)"
|
||
|
|
>
|
||
|
|
<!-- Card Header with Gradient Background -->
|
||
|
|
<div class="card-header gradient-bg pa-4 text-center">
|
||
|
|
<ProfileAvatar
|
||
|
|
:member-id="member.member_id"
|
||
|
|
:first-name="member.first_name"
|
||
|
|
:last-name="member.last_name"
|
||
|
|
size="80"
|
||
|
|
class="mb-3 mx-auto elevation-4 white-border"
|
||
|
|
/>
|
||
|
|
<h3 class="text-h6 font-weight-bold white--text">
|
||
|
|
{{ member.first_name }} {{ member.last_name }}
|
||
|
|
</h3>
|
||
|
|
<div class="text-caption white--text opacity-90">
|
||
|
|
{{ member.member_id || 'Pending ID' }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<v-card-text class="pa-4">
|
||
|
|
<!-- Contact Info -->
|
||
|
|
<div class="info-row mb-3">
|
||
|
|
<v-icon size="18" class="mr-2 text-medium-emphasis">mdi-email</v-icon>
|
||
|
|
<span class="text-body-2 text-truncate">{{ member.email }}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Nationality with Flag -->
|
||
|
|
<div class="info-row mb-3">
|
||
|
|
<v-icon size="18" class="mr-2 text-medium-emphasis">mdi-flag</v-icon>
|
||
|
|
<MultipleCountryFlags
|
||
|
|
:nationality="member.nationality"
|
||
|
|
:show-name="true"
|
||
|
|
size="small"
|
||
|
|
fallback-text="Not specified"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Member Since -->
|
||
|
|
<div class="info-row mb-3">
|
||
|
|
<v-icon size="18" class="mr-2 text-medium-emphasis">mdi-calendar</v-icon>
|
||
|
|
<span class="text-body-2">Since {{ formatDate(member.join_date) }}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Status Badges -->
|
||
|
|
<div class="d-flex flex-wrap gap-2 mb-3">
|
||
|
|
<v-chip
|
||
|
|
:color="member.status === 'active' ? 'success' : 'error'"
|
||
|
|
size="small"
|
||
|
|
variant="tonal"
|
||
|
|
label
|
||
|
|
>
|
||
|
|
<v-icon start size="14">
|
||
|
|
{{ member.status === 'active' ? 'mdi-check' : 'mdi-close' }}
|
||
|
|
</v-icon>
|
||
|
|
{{ member.status }}
|
||
|
|
</v-chip>
|
||
|
|
|
||
|
|
<v-chip
|
||
|
|
:color="getDuesChipColor(member)"
|
||
|
|
size="small"
|
||
|
|
variant="tonal"
|
||
|
|
label
|
||
|
|
>
|
||
|
|
<v-icon start size="14">mdi-cash</v-icon>
|
||
|
|
{{ member.dues_paid_this_year ? 'Dues Paid' : 'Dues Pending' }}
|
||
|
|
</v-chip>
|
||
|
|
|
||
|
|
<v-chip
|
||
|
|
v-if="member.membership_type !== 'Standard'"
|
||
|
|
color="purple"
|
||
|
|
size="small"
|
||
|
|
variant="tonal"
|
||
|
|
label
|
||
|
|
>
|
||
|
|
{{ member.membership_type }}
|
||
|
|
</v-chip>
|
||
|
|
</div>
|
||
|
|
</v-card-text>
|
||
|
|
|
||
|
|
<!-- Quick Actions -->
|
||
|
|
<v-card-actions class="pa-3 pt-0">
|
||
|
|
<v-btn
|
||
|
|
v-if="!member.dues_paid_this_year"
|
||
|
|
color="success"
|
||
|
|
variant="flat"
|
||
|
|
size="small"
|
||
|
|
block
|
||
|
|
rounded
|
||
|
|
@click.stop="markDuesPaid(member)"
|
||
|
|
>
|
||
|
|
<v-icon start>mdi-check</v-icon>
|
||
|
|
Mark Dues Paid
|
||
|
|
</v-btn>
|
||
|
|
<v-row v-else dense>
|
||
|
|
<v-col cols="4">
|
||
|
|
<v-btn
|
||
|
|
icon="mdi-eye"
|
||
|
|
size="small"
|
||
|
|
variant="text"
|
||
|
|
block
|
||
|
|
@click.stop="viewMember(member)"
|
||
|
|
>
|
||
|
|
<v-tooltip activator="parent">View</v-tooltip>
|
||
|
|
</v-btn>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="4">
|
||
|
|
<v-btn
|
||
|
|
icon="mdi-pencil"
|
||
|
|
size="small"
|
||
|
|
variant="text"
|
||
|
|
block
|
||
|
|
@click.stop="editMember(member)"
|
||
|
|
>
|
||
|
|
<v-tooltip activator="parent">Edit</v-tooltip>
|
||
|
|
</v-btn>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="4">
|
||
|
|
<v-btn
|
||
|
|
icon="mdi-email"
|
||
|
|
size="small"
|
||
|
|
variant="text"
|
||
|
|
block
|
||
|
|
@click.stop="sendEmail(member)"
|
||
|
|
>
|
||
|
|
<v-tooltip activator="parent">Email</v-tooltip>
|
||
|
|
</v-btn>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
</v-card-actions>
|
||
|
|
</v-card>
|
||
|
|
</v-col>
|
||
|
|
</transition-group>
|
||
|
|
|
||
|
|
<!-- Enhanced Table View -->
|
||
|
|
<v-card v-else-if="viewMode === 'table'" class="glass-card" elevation="0">
|
||
|
|
<v-data-table
|
||
|
|
:headers="tableHeaders"
|
||
|
|
:items="filteredMembers"
|
||
|
|
:search="searchQuery"
|
||
|
|
:loading="loading"
|
||
|
|
class="modern-table"
|
||
|
|
hover
|
||
|
|
:items-per-page="15"
|
||
|
|
@click:row="(e, { item }) => viewMember(item)"
|
||
|
|
>
|
||
|
|
<template v-slot:item.member="{ item }">
|
||
|
|
<div class="d-flex align-center py-3">
|
||
|
|
<ProfileAvatar
|
||
|
|
:member-id="item.member_id"
|
||
|
|
:first-name="item.first_name"
|
||
|
|
:last-name="item.last_name"
|
||
|
|
size="40"
|
||
|
|
class="mr-3"
|
||
|
|
/>
|
||
|
|
<div>
|
||
|
|
<div class="font-weight-medium">
|
||
|
|
{{ item.first_name }} {{ item.last_name }}
|
||
|
|
</div>
|
||
|
|
<div class="text-caption text-medium-emphasis">
|
||
|
|
{{ item.member_id || 'Pending ID' }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template v-slot:item.contact="{ item }">
|
||
|
|
<div class="py-2">
|
||
|
|
<div class="d-flex align-center mb-1">
|
||
|
|
<v-icon size="14" class="mr-1">mdi-email</v-icon>
|
||
|
|
<a :href="`mailto:${item.email}`" class="text-primary text-decoration-none" @click.stop>
|
||
|
|
{{ item.email }}
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div v-if="item.phone" class="d-flex align-center text-caption">
|
||
|
|
<v-icon size="14" class="mr-1">mdi-phone</v-icon>
|
||
|
|
{{ item.phone }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template v-slot:item.nationality="{ item }">
|
||
|
|
<MultipleCountryFlags
|
||
|
|
:nationality="item.nationality"
|
||
|
|
:show-name="true"
|
||
|
|
size="small"
|
||
|
|
fallback-text="—"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template v-slot:item.membership="{ item }">
|
||
|
|
<div class="py-2">
|
||
|
|
<v-chip
|
||
|
|
:color="getMembershipColor(item.membership_type)"
|
||
|
|
size="small"
|
||
|
|
variant="tonal"
|
||
|
|
label
|
||
|
|
class="mb-1"
|
||
|
|
>
|
||
|
|
{{ item.membership_type }}
|
||
|
|
</v-chip>
|
||
|
|
<div class="text-caption text-medium-emphasis">
|
||
|
|
Since {{ formatDate(item.join_date) }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template v-slot:item.status="{ item }">
|
||
|
|
<div class="d-flex gap-2">
|
||
|
|
<v-chip
|
||
|
|
:color="item.status === 'active' ? 'success' : 'error'"
|
||
|
|
size="small"
|
||
|
|
variant="tonal"
|
||
|
|
label
|
||
|
|
>
|
||
|
|
{{ item.status }}
|
||
|
|
</v-chip>
|
||
|
|
<v-chip
|
||
|
|
:color="getDuesChipColor(item)"
|
||
|
|
size="small"
|
||
|
|
variant="tonal"
|
||
|
|
label
|
||
|
|
>
|
||
|
|
{{ item.dues_paid_this_year ? 'Paid' : 'Due' }}
|
||
|
|
</v-chip>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template v-slot:item.actions="{ item }">
|
||
|
|
<div class="d-flex gap-1">
|
||
|
|
<v-btn
|
||
|
|
icon="mdi-eye"
|
||
|
|
size="x-small"
|
||
|
|
variant="text"
|
||
|
|
@click.stop="viewMember(item)"
|
||
|
|
/>
|
||
|
|
<v-btn
|
||
|
|
icon="mdi-pencil"
|
||
|
|
size="x-small"
|
||
|
|
variant="text"
|
||
|
|
@click.stop="editMember(item)"
|
||
|
|
/>
|
||
|
|
<v-menu>
|
||
|
|
<template v-slot:activator="{ props }">
|
||
|
|
<v-btn
|
||
|
|
icon="mdi-dots-vertical"
|
||
|
|
size="x-small"
|
||
|
|
variant="text"
|
||
|
|
v-bind="props"
|
||
|
|
@click.stop
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
<v-list density="compact">
|
||
|
|
<v-list-item @click="sendEmail(item)">
|
||
|
|
<template v-slot:prepend>
|
||
|
|
<v-icon size="small">mdi-email</v-icon>
|
||
|
|
</template>
|
||
|
|
<v-list-item-title>Send Email</v-list-item-title>
|
||
|
|
</v-list-item>
|
||
|
|
<v-list-item
|
||
|
|
v-if="!item.dues_paid_this_year"
|
||
|
|
@click="markDuesPaid(item)"
|
||
|
|
>
|
||
|
|
<template v-slot:prepend>
|
||
|
|
<v-icon size="small" color="success">mdi-check</v-icon>
|
||
|
|
</template>
|
||
|
|
<v-list-item-title>Mark Dues Paid</v-list-item-title>
|
||
|
|
</v-list-item>
|
||
|
|
<v-list-item @click="viewPaymentHistory(item)">
|
||
|
|
<template v-slot:prepend>
|
||
|
|
<v-icon size="small">mdi-history</v-icon>
|
||
|
|
</template>
|
||
|
|
<v-list-item-title>Payment History</v-list-item-title>
|
||
|
|
</v-list-item>
|
||
|
|
<v-divider />
|
||
|
|
<v-list-item
|
||
|
|
@click="toggleStatus(item)"
|
||
|
|
:class="item.status === 'active' ? 'text-error' : 'text-success'"
|
||
|
|
>
|
||
|
|
<template v-slot:prepend>
|
||
|
|
<v-icon size="small">
|
||
|
|
{{ item.status === 'active' ? 'mdi-account-off' : 'mdi-account-check' }}
|
||
|
|
</v-icon>
|
||
|
|
</template>
|
||
|
|
<v-list-item-title>
|
||
|
|
{{ item.status === 'active' ? 'Deactivate' : 'Activate' }}
|
||
|
|
</v-list-item-title>
|
||
|
|
</v-list-item>
|
||
|
|
</v-list>
|
||
|
|
</v-menu>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</v-data-table>
|
||
|
|
</v-card>
|
||
|
|
|
||
|
|
<!-- Pagination -->
|
||
|
|
<v-card
|
||
|
|
v-if="viewMode === 'cards' && filteredMembers.length > itemsPerPage"
|
||
|
|
class="mt-6 glass-card"
|
||
|
|
elevation="0"
|
||
|
|
>
|
||
|
|
<v-card-text>
|
||
|
|
<v-pagination
|
||
|
|
v-model="currentPage"
|
||
|
|
:length="Math.ceil(filteredMembers.length / itemsPerPage)"
|
||
|
|
:total-visible="7"
|
||
|
|
rounded="circle"
|
||
|
|
color="primary"
|
||
|
|
/>
|
||
|
|
</v-card-text>
|
||
|
|
</v-card>
|
||
|
|
|
||
|
|
<!-- Dialogs -->
|
||
|
|
<ViewMemberDialog
|
||
|
|
v-model="showViewDialog"
|
||
|
|
:member="selectedMember"
|
||
|
|
@edit="handleEditMember"
|
||
|
|
@mark-dues-paid="handleMarkDuesPaid"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<EditMemberDialog
|
||
|
|
v-model="showEditDialog"
|
||
|
|
:member="selectedMember"
|
||
|
|
@member-updated="handleMemberUpdated"
|
||
|
|
/>
|
||
|
|
</v-container>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import type { Member } from '~/utils/types';
|
||
|
|
import { countries } from '~/utils/countries';
|
||
|
|
|
||
|
|
definePageMeta({
|
||
|
|
layout: 'admin',
|
||
|
|
middleware: 'admin'
|
||
|
|
});
|
||
|
|
|
||
|
|
// State
|
||
|
|
const loading = ref(false);
|
||
|
|
const members = ref<Member[]>([]);
|
||
|
|
const searchQuery = ref('');
|
||
|
|
const quickFilter = ref('all');
|
||
|
|
const statusFilter = ref(null);
|
||
|
|
const membershipFilter = ref(null);
|
||
|
|
const nationalityFilter = ref(null);
|
||
|
|
const duesFilter = ref(null);
|
||
|
|
const viewMode = ref('cards');
|
||
|
|
const currentPage = ref(1);
|
||
|
|
const itemsPerPage = 12;
|
||
|
|
const showAdvancedFilters = ref(false);
|
||
|
|
const showViewDialog = ref(false);
|
||
|
|
const showEditDialog = ref(false);
|
||
|
|
const showCreateDialog = ref(false);
|
||
|
|
const selectedMember = ref<Member | null>(null);
|
||
|
|
|
||
|
|
// Stats
|
||
|
|
const stats = ref({
|
||
|
|
total: 0,
|
||
|
|
active: 0,
|
||
|
|
paidThisYear: 0,
|
||
|
|
duesOutstanding: 0,
|
||
|
|
newThisMonth: 0
|
||
|
|
});
|
||
|
|
|
||
|
|
// Computed stats cards
|
||
|
|
const statsCards = computed(() => [
|
||
|
|
{
|
||
|
|
title: 'Total Members',
|
||
|
|
value: stats.value.total,
|
||
|
|
icon: 'mdi-account-group',
|
||
|
|
color: '#3b82f6',
|
||
|
|
change: '+12',
|
||
|
|
changeType: 'increase'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Active Members',
|
||
|
|
value: stats.value.active,
|
||
|
|
icon: 'mdi-account-check',
|
||
|
|
color: '#10b981',
|
||
|
|
progress: Math.round((stats.value.active / stats.value.total) * 100)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Dues Paid',
|
||
|
|
value: stats.value.paidThisYear,
|
||
|
|
icon: 'mdi-cash-check',
|
||
|
|
color: '#8b5cf6',
|
||
|
|
progress: Math.round((stats.value.paidThisYear / stats.value.total) * 100)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'New This Month',
|
||
|
|
value: stats.value.newThisMonth,
|
||
|
|
icon: 'mdi-account-plus',
|
||
|
|
color: '#f59e0b',
|
||
|
|
change: '+8',
|
||
|
|
changeType: 'increase'
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
|
||
|
|
// Options
|
||
|
|
const statusOptions = ['active', 'inactive'];
|
||
|
|
const membershipOptions = ['Standard', 'Premium', 'VIP', 'Lifetime'];
|
||
|
|
const countryOptions = countries;
|
||
|
|
|
||
|
|
// Table headers
|
||
|
|
const tableHeaders = [
|
||
|
|
{ title: 'Member', key: 'member', sortable: true },
|
||
|
|
{ title: 'Contact', key: 'contact', sortable: true },
|
||
|
|
{ title: 'Nationality', key: 'nationality', sortable: true },
|
||
|
|
{ title: 'Membership', key: 'membership', sortable: true },
|
||
|
|
{ title: 'Status', key: 'status', sortable: true },
|
||
|
|
{ title: '', key: 'actions', sortable: false, align: 'end' }
|
||
|
|
];
|
||
|
|
|
||
|
|
// Computed
|
||
|
|
const filteredMembers = computed(() => {
|
||
|
|
let filtered = [...members.value];
|
||
|
|
|
||
|
|
// Apply quick filter
|
||
|
|
if (quickFilter.value === 'active') {
|
||
|
|
filtered = filtered.filter(m => m.status === 'active');
|
||
|
|
} else if (quickFilter.value === 'dues-pending') {
|
||
|
|
filtered = filtered.filter(m => !m.dues_paid_this_year);
|
||
|
|
} else if (quickFilter.value === 'new') {
|
||
|
|
const thisMonth = new Date().getMonth();
|
||
|
|
filtered = filtered.filter(m => {
|
||
|
|
const joinDate = new Date(m.join_date);
|
||
|
|
return joinDate.getMonth() === thisMonth;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Apply advanced filters
|
||
|
|
if (statusFilter.value) {
|
||
|
|
filtered = filtered.filter(m => m.status === statusFilter.value);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (membershipFilter.value) {
|
||
|
|
filtered = filtered.filter(m => m.membership_type === membershipFilter.value);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (nationalityFilter.value) {
|
||
|
|
filtered = filtered.filter(m => m.nationality === nationalityFilter.value);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (duesFilter.value) {
|
||
|
|
if (duesFilter.value === 'Paid') {
|
||
|
|
filtered = filtered.filter(m => m.dues_paid_this_year);
|
||
|
|
} else if (duesFilter.value === 'Unpaid' || duesFilter.value === 'Overdue') {
|
||
|
|
filtered = filtered.filter(m => !m.dues_paid_this_year);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return filtered;
|
||
|
|
});
|
||
|
|
|
||
|
|
const paginatedMembers = computed(() => {
|
||
|
|
const start = (currentPage.value - 1) * itemsPerPage;
|
||
|
|
const end = start + itemsPerPage;
|
||
|
|
return filteredMembers.value.slice(start, end);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Methods
|
||
|
|
const formatDate = (date: string) => {
|
||
|
|
if (!date) return 'N/A';
|
||
|
|
const parsedDate = new Date(date);
|
||
|
|
if (isNaN(parsedDate.getTime())) return 'N/A';
|
||
|
|
return parsedDate.toLocaleDateString('en-US', {
|
||
|
|
month: 'short',
|
||
|
|
year: 'numeric'
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const getMembershipColor = (type: string) => {
|
||
|
|
switch (type) {
|
||
|
|
case 'VIP': return 'error';
|
||
|
|
case 'Premium': return 'warning';
|
||
|
|
case 'Lifetime': return 'purple';
|
||
|
|
default: return 'info';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const getDuesChipColor = (member: Member) => {
|
||
|
|
return member.dues_paid_this_year ? 'success' : 'warning';
|
||
|
|
};
|
||
|
|
|
||
|
|
const viewMember = (member: Member) => {
|
||
|
|
selectedMember.value = member;
|
||
|
|
showViewDialog.value = true;
|
||
|
|
};
|
||
|
|
|
||
|
|
const editMember = (member: Member) => {
|
||
|
|
selectedMember.value = member;
|
||
|
|
showEditDialog.value = true;
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleEditMember = (member: Member) => {
|
||
|
|
showViewDialog.value = false;
|
||
|
|
selectedMember.value = member;
|
||
|
|
showEditDialog.value = true;
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleMemberUpdated = (member: Member) => {
|
||
|
|
const index = members.value.findIndex(m => m.member_id === member.member_id);
|
||
|
|
if (index > -1) {
|
||
|
|
members.value[index] = member;
|
||
|
|
}
|
||
|
|
showEditDialog.value = false;
|
||
|
|
};
|
||
|
|
|
||
|
|
const markDuesPaid = async (member: Member) => {
|
||
|
|
try {
|
||
|
|
member.dues_paid_this_year = true;
|
||
|
|
member.dues_status = 'Paid';
|
||
|
|
member.last_dues_paid = new Date().toISOString();
|
||
|
|
|
||
|
|
stats.value.paidThisYear++;
|
||
|
|
stats.value.duesOutstanding--;
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error marking dues as paid:', error);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleMarkDuesPaid = (member: Member) => {
|
||
|
|
markDuesPaid(member);
|
||
|
|
};
|
||
|
|
|
||
|
|
const sendEmail = (member: Member) => {
|
||
|
|
window.location.href = `mailto:${member.email}`;
|
||
|
|
};
|
||
|
|
|
||
|
|
const viewPaymentHistory = (member: Member) => {
|
||
|
|
// TODO: Navigate to payment history
|
||
|
|
};
|
||
|
|
|
||
|
|
const toggleStatus = (member: Member) => {
|
||
|
|
member.status = member.status === 'active' ? 'inactive' : 'active';
|
||
|
|
// TODO: Make API call
|
||
|
|
};
|
||
|
|
|
||
|
|
const exportMembers = () => {
|
||
|
|
// TODO: Export to CSV/Excel
|
||
|
|
};
|
||
|
|
|
||
|
|
// Load members data
|
||
|
|
const loadMembers = async () => {
|
||
|
|
loading.value = true;
|
||
|
|
try {
|
||
|
|
const response = await $fetch('/api/members');
|
||
|
|
const membersList = response?.data?.list || response?.data?.members || response?.list || [];
|
||
|
|
|
||
|
|
if (membersList && membersList.length > 0) {
|
||
|
|
const currentYear = new Date().getFullYear();
|
||
|
|
const currentMonth = new Date().getMonth();
|
||
|
|
|
||
|
|
members.value = membersList.map((member: any) => {
|
||
|
|
const lastPaid = member.last_dues_paid ? new Date(member.last_dues_paid) : null;
|
||
|
|
const duesPaidThisYear = lastPaid && lastPaid.getFullYear() === currentYear;
|
||
|
|
const joinDate = member.member_since || member.created_at;
|
||
|
|
const joinMonth = joinDate ? new Date(joinDate).getMonth() : null;
|
||
|
|
|
||
|
|
return {
|
||
|
|
...member,
|
||
|
|
member_id: member.member_id || '',
|
||
|
|
first_name: member.first_name,
|
||
|
|
last_name: member.last_name,
|
||
|
|
name: `${member.last_name || ''}, ${member.first_name || ''}`.trim(),
|
||
|
|
email: member.email,
|
||
|
|
nationality: member.nationality || member.country_code || '',
|
||
|
|
membership_type: member.membership_type || 'Standard',
|
||
|
|
status: member.membership_status === 'Active' ? 'active' : 'inactive',
|
||
|
|
dues_status: member.dues_status || (duesPaidThisYear ? 'Paid' : 'Due'),
|
||
|
|
dues_paid_this_year: duesPaidThisYear,
|
||
|
|
last_dues_paid: member.last_dues_paid,
|
||
|
|
join_date: joinDate,
|
||
|
|
phone: member.phone_number || member.phone || ''
|
||
|
|
};
|
||
|
|
}).sort((a, b) => {
|
||
|
|
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);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Calculate stats
|
||
|
|
const currentYearMembers = members.value.filter(m => m.dues_paid_this_year);
|
||
|
|
const newThisMonth = members.value.filter(m => {
|
||
|
|
const joinDate = new Date(m.join_date);
|
||
|
|
return joinDate.getMonth() === currentMonth && joinDate.getFullYear() === currentYear;
|
||
|
|
});
|
||
|
|
|
||
|
|
stats.value = {
|
||
|
|
total: members.value.length,
|
||
|
|
active: members.value.filter(m => m.status === 'active').length,
|
||
|
|
paidThisYear: currentYearMembers.length,
|
||
|
|
duesOutstanding: members.value.length - currentYearMembers.length,
|
||
|
|
newThisMonth: newThisMonth.length
|
||
|
|
};
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error loading members:', error);
|
||
|
|
} finally {
|
||
|
|
loading.value = false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Load on mount
|
||
|
|
onMounted(async () => {
|
||
|
|
await loadMembers();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* Glassmorphism effect */
|
||
|
|
.glass-card {
|
||
|
|
background: rgba(255, 255, 255, 0.95);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
||
|
|
border-radius: 16px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Gradient text */
|
||
|
|
.gradient-text {
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
background-clip: text;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Gradient avatar */
|
||
|
|
.gradient-avatar {
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Gradient background for card headers */
|
||
|
|
.gradient-bg {
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Stat card hover effect */
|
||
|
|
.stat-card {
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-card:hover {
|
||
|
|
transform: translateY(-4px);
|
||
|
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Member card effects */
|
||
|
|
.member-card {
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
cursor: pointer;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.member-card:hover {
|
||
|
|
transform: translateY(-4px);
|
||
|
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.member-card .card-header {
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.member-card .card-header::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||
|
|
transform: translateX(-100%);
|
||
|
|
transition: transform 0.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.member-card:hover .card-header::before {
|
||
|
|
transform: translateX(100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* White border for avatar */
|
||
|
|
.white-border {
|
||
|
|
border: 3px solid white;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Info row styling */
|
||
|
|
.info-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Search field styling */
|
||
|
|
.search-field :deep(.v-field) {
|
||
|
|
border-radius: 12px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Chip active state */
|
||
|
|
.chip-active {
|
||
|
|
background-color: rgba(var(--v-theme-primary), 0.12) !important;
|
||
|
|
border-color: rgb(var(--v-theme-primary)) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Table styling */
|
||
|
|
.modern-table :deep(tbody tr) {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modern-table :deep(tbody tr:hover) {
|
||
|
|
background-color: rgba(var(--v-theme-primary), 0.04);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Animation for cards */
|
||
|
|
.card-list-move,
|
||
|
|
.card-list-enter-active,
|
||
|
|
.card-list-leave-active {
|
||
|
|
transition: all 0.5s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-list-enter-from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(30px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-list-leave-to {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(-30px);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Pulse animation for add button */
|
||
|
|
@keyframes pulse {
|
||
|
|
0% {
|
||
|
|
box-shadow: 0 0 0 0 rgba(var(--v-theme-primary), 0.4);
|
||
|
|
}
|
||
|
|
70% {
|
||
|
|
box-shadow: 0 0 0 10px rgba(var(--v-theme-primary), 0);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
box-shadow: 0 0 0 0 rgba(var(--v-theme-primary), 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.pulse-animation {
|
||
|
|
animation: pulse 2s infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Filter card styling */
|
||
|
|
.filter-card {
|
||
|
|
border-left: 4px solid rgb(var(--v-theme-primary));
|
||
|
|
}
|
||
|
|
</style>
|