Add member management system with NocoDB integration

- Add member CRUD operations with API endpoints
- Implement member list page with card-based layout
- Add member creation and viewing dialogs
- Support multiple nationalities with country flags
- Include phone number input with international formatting
- Integrate NocoDB as backend database
- Add comprehensive member data types and utilities

components/AddMemberDialog.vue

@@ -0,0 +1,456 @@
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    @update:model-value="$emit('update:model-value', $event)"
+    max-width="900"
+    persistent
+    scrollable
+  >
+    <v-card>
+      <v-card-title class="d-flex align-center pa-6 bg-primary">
+        <v-icon class="mr-3 text-white">mdi-account-plus</v-icon>
+        <h2 class="text-h5 text-white font-weight-bold flex-grow-1">
+          Add New Member
+        </h2>
+        <v-btn
+          icon
+          variant="text"
+          color="white"
+          @click="closeDialog"
+        >
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
+
+      <v-card-text class="pa-6">
+        <v-form ref="formRef" v-model="formValid" @submit.prevent="handleSubmit">
+          <v-row>
+            <!-- Personal Information Section -->
+            <v-col cols="12">
+              <h3 class="text-h6 mb-4 text-primary">Personal Information</h3>
+            </v-col>
+            
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="form['First Name']"
+                label="First Name"
+                variant="outlined"
+                :rules="[rules.required]"
+                required
+                :error="hasFieldError('First Name')"
+                :error-messages="getFieldError('First Name')"
+              />
+            </v-col>
+            
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="form['Last Name']"
+                label="Last Name"
+                variant="outlined"
+                :rules="[rules.required]"
+                required
+                :error="hasFieldError('Last Name')"
+                :error-messages="getFieldError('Last Name')"
+              />
+            </v-col>
+            
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="form.Email"
+                label="Email Address"
+                type="email"
+                variant="outlined"
+                :rules="[rules.required, rules.email]"
+                required
+                :error="hasFieldError('Email')"
+                :error-messages="getFieldError('Email')"
+              />
+            </v-col>
+            
+            <v-col cols="12" md="6">
+              <PhoneInputWrapper
+                v-model="form.Phone"
+                label="Phone Number"
+                placeholder="Enter phone number"
+                :error="hasFieldError('Phone')"
+                :error-message="getFieldError('Phone')"
+                @phone-data="handlePhoneData"
+              />
+            </v-col>
+            
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="form['Date of Birth']"
+                label="Date of Birth"
+                type="date"
+                variant="outlined"
+                :error="hasFieldError('Date of Birth')"
+                :error-messages="getFieldError('Date of Birth')"
+              />
+            </v-col>
+            
+            <v-col cols="12" md="6">
+              <MultipleNationalityInput
+                v-model="form.Nationality"
+                label="Nationality"
+                :error="hasFieldError('Nationality')"
+                :error-message="getFieldError('Nationality')"
+                :max-nationalities="3"
+              />
+            </v-col>
+            
+            <v-col cols="12">
+              <v-textarea
+                v-model="form.Address"
+                label="Address"
+                variant="outlined"
+                rows="2"
+                :error="hasFieldError('Address')"
+                :error-messages="getFieldError('Address')"
+              />
+            </v-col>
+
+            <!-- Membership Information Section -->
+            <v-col cols="12">
+              <v-divider class="my-4" />
+              <h3 class="text-h6 mb-4 text-primary">Membership Information</h3>
+            </v-col>
+            
+            <v-col cols="12" md="4">
+              <v-select
+                v-model="form['Membership Status']"
+                :items="membershipStatusOptions"
+                label="Membership Status"
+                variant="outlined"
+                :rules="[rules.required]"
+                required
+                :error="hasFieldError('Membership Status')"
+                :error-messages="getFieldError('Membership Status')"
+              />
+            </v-col>
+            
+            <v-col cols="12" md="4">
+              <v-text-field
+                v-model="form['Member Since']"
+                label="Member Since"
+                type="date"
+                variant="outlined"
+                :error="hasFieldError('Member Since')"
+                :error-messages="getFieldError('Member Since')"
+              />
+            </v-col>
+            
+            <v-col cols="12" md="4">
+              <v-switch
+                v-model="duesPaid"
+                label="Current Year Dues Paid"
+                color="success"
+                inset
+                :error="hasFieldError('Current Year Dues Paid')"
+                :error-messages="getFieldError('Current Year Dues Paid')"
+              />
+            </v-col>
+            
+            <v-col cols="12" md="6" v-if="duesPaid">
+              <v-text-field
+                v-model="form['Membership Date Paid']"
+                label="Payment Date"
+                type="date"
+                variant="outlined"
+                :error="hasFieldError('Membership Date Paid')"
+                :error-messages="getFieldError('Membership Date Paid')"
+              />
+            </v-col>
+            
+            <v-col cols="12" md="6" v-if="!duesPaid">
+              <v-text-field
+                v-model="form['Payment Due Date']"
+                label="Payment Due Date"
+                type="date"
+                variant="outlined"
+                :error="hasFieldError('Payment Due Date')"
+                :error-messages="getFieldError('Payment Due Date')"
+              />
+            </v-col>
+          </v-row>
+        </v-form>
+      </v-card-text>
+
+      <v-card-actions class="pa-6 pt-0">
+        <v-spacer />
+        <v-btn
+          variant="text"
+          @click="closeDialog"
+          :disabled="loading"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          color="primary"
+          @click="handleSubmit"
+          :loading="loading"
+          :disabled="!formValid"
+        >
+          <v-icon start>mdi-account-plus</v-icon>
+          Add Member
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import type { Member } from '~/utils/types';
+import { formatBooleanAsString } from '~/server/utils/nocodb';
+
+interface Props {
+  modelValue: boolean;
+}
+
+interface Emits {
+  (e: 'update:model-value', value: boolean): void;
+  (e: 'member-created', member: Member): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+// Form state
+const formRef = ref();
+const formValid = ref(false);
+const loading = ref(false);
+
+// Form data
+const form = ref({
+  'First Name': '',
+  'Last Name': '',
+  Email: '',
+  Phone: '',
+  'Date of Birth': '',
+  Nationality: '',
+  Address: '',
+  'Membership Status': 'Active',
+  'Member Since': new Date().toISOString().split('T')[0], // Today's date
+  'Current Year Dues Paid': 'false',
+  'Membership Date Paid': '',
+  'Payment Due Date': ''
+});
+
+// Additional form state
+const duesPaid = ref(false);
+const phoneData = ref(null);
+
+// Error handling
+const fieldErrors = ref<Record<string, string>>({});
+
+// Watch dues paid switch
+watch(duesPaid, (newValue) => {
+  form.value['Current Year Dues Paid'] = formatBooleanAsString(newValue);
+  if (newValue) {
+    form.value['Payment Due Date'] = '';
+    if (!form.value['Membership Date Paid']) {
+      form.value['Membership Date Paid'] = new Date().toISOString().split('T')[0];
+    }
+  } else {
+    form.value['Membership Date Paid'] = '';
+    if (!form.value['Payment Due Date']) {
+      // Set due date to one year from member since date or today
+      const memberSince = form.value['Member Since'] || new Date().toISOString().split('T')[0];
+      const dueDate = new Date(memberSince);
+      dueDate.setFullYear(dueDate.getFullYear() + 1);
+      form.value['Payment Due Date'] = dueDate.toISOString().split('T')[0];
+    }
+  }
+});
+
+// Membership status options
+const membershipStatusOptions = [
+  { title: 'Active', value: 'Active' },
+  { title: 'Inactive', value: 'Inactive' },
+  { title: 'Pending', value: 'Pending' },
+  { title: 'Expired', value: 'Expired' }
+];
+
+// Validation rules
+const rules = {
+  required: (value: any) => {
+    if (typeof value === 'string') {
+      return !!value?.trim() || 'This field is required';
+    }
+    return !!value || 'This field is required';
+  },
+  email: (value: string) => {
+    const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return !value || pattern.test(value) || 'Please enter a valid email address';
+  }
+};
+
+// Error handling methods
+const hasFieldError = (fieldName: string) => {
+  return !!fieldErrors.value[fieldName];
+};
+
+const getFieldError = (fieldName: string) => {
+  return fieldErrors.value[fieldName] || '';
+};
+
+const clearFieldErrors = () => {
+  fieldErrors.value = {};
+};
+
+// Phone data handler
+const handlePhoneData = (data: any) => {
+  phoneData.value = data;
+};
+
+// Form submission
+const handleSubmit = async () => {
+  if (!formRef.value) return;
+
+  const isValid = await formRef.value.validate();
+  if (!isValid.valid) {
+    return;
+  }
+
+  loading.value = true;
+  clearFieldErrors();
+
+  try {
+    // Prepare the data for submission
+    const memberData = { ...form.value };
+    
+    // Ensure required fields are not empty
+    if (!memberData['First Name']?.trim()) {
+      throw new Error('First Name is required');
+    }
+    if (!memberData['Last Name']?.trim()) {
+      throw new Error('Last Name is required');
+    }
+    if (!memberData.Email?.trim()) {
+      throw new Error('Email is required');
+    }
+
+    console.log('[AddMemberDialog] Submitting member data:', memberData);
+
+    const response = await $fetch<{ success: boolean; data: Member; message?: string }>('/api/members', {
+      method: 'POST',
+      body: memberData
+    });
+
+    if (response.success && response.data) {
+      console.log('[AddMemberDialog] Member created successfully:', response.data);
+      emit('member-created', response.data);
+      closeDialog();
+      resetForm();
+    } else {
+      throw new Error(response.message || 'Failed to create member');
+    }
+  } catch (error: any) {
+    console.error('[AddMemberDialog] Error creating member:', error);
+    
+    // Handle validation errors
+    if (error.data?.fieldErrors) {
+      fieldErrors.value = error.data.fieldErrors;
+    } else {
+      // Show general error
+      fieldErrors.value = {
+        general: error.message || 'Failed to create member. Please try again.'
+      };
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Dialog management
+const closeDialog = () => {
+  emit('update:model-value', false);
+};
+
+const resetForm = () => {
+  form.value = {
+    'First Name': '',
+    'Last Name': '',
+    Email: '',
+    Phone: '',
+    'Date of Birth': '',
+    Nationality: '',
+    Address: '',
+    'Membership Status': 'Active',
+    'Member Since': new Date().toISOString().split('T')[0],
+    'Current Year Dues Paid': 'false',
+    'Membership Date Paid': '',
+    'Payment Due Date': ''
+  };
+  duesPaid.value = false;
+  phoneData.value = null;
+  clearFieldErrors();
+  
+  // Reset form validation
+  nextTick(() => {
+    formRef.value?.resetValidation();
+  });
+};
+
+// Watch for dialog open/close
+watch(() => props.modelValue, (newValue) => {
+  if (newValue) {
+    // Dialog opened - reset form
+    resetForm();
+  }
+});
+</script>
+
+<style scoped>
+.bg-primary {
+  background: linear-gradient(135deg, #a31515 0%, #d32f2f 100%) !important;
+}
+
+.text-primary {
+  color: #a31515 !important;
+}
+
+.v-card {
+  border-radius: 12px !important;
+}
+
+/* Form section spacing */
+.v-card-text .v-row .v-col:first-child h3 {
+  border-bottom: 2px solid rgba(var(--v-theme-primary), 0.12);
+  padding-bottom: 8px;
+}
+
+/* Error message styling */
+.field-error {
+  color: rgb(var(--v-theme-error));
+  font-size: 0.75rem;
+  margin-top: 4px;
+}
+
+/* Switch styling */
+.v-switch {
+  flex: none;
+}
+
+/* Responsive adjustments */
+@media (max-width: 960px) {
+  .v-dialog {
+    margin: 16px;
+  }
+}
+
+@media (max-width: 600px) {
+  .v-card-title {
+    padding: 16px !important;
+  }
+  
+  .v-card-text {
+    padding: 16px !important;
+  }
+  
+  .v-card-actions {
+    padding: 16px !important;
+    padding-top: 0 !important;
+  }
+}
+</style>

components/CountryFlag.vue

@@ -0,0 +1,92 @@
+<template>
+  <span class="country-flag" :class="{ 'country-flag--small': size === 'small' }">
+    <span 
+      class="fi" 
+      :class="flagClasses"
+      :style="flagStyle"
+      :title="getCountryName(countryCode)"
+    ></span>
+    <span v-if="showName && countryCode" class="country-name">
+      {{ getCountryName(countryCode) }}
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { getCountryName } from '~/utils/countries';
+
+interface Props {
+  countryCode?: string;
+  showName?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  square?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  countryCode: '',
+  showName: true,
+  size: 'medium',
+  square: false
+});
+
+const flagClasses = computed(() => {
+  const classes = [];
+  
+  if (props.countryCode) {
+    classes.push(`fi-${props.countryCode.toLowerCase()}`);
+  }
+  
+  if (props.square) {
+    classes.push('fis');
+  }
+  
+  return classes;
+});
+
+const flagStyle = computed(() => {
+  const sizeMap = {
+    small: '1rem',
+    medium: '1.5rem',
+    large: '2rem'
+  };
+  
+  return {
+    width: sizeMap[props.size],
+    height: props.square ? sizeMap[props.size] : `calc(${sizeMap[props.size]} * 0.75)`, // 4:3 aspect ratio
+    display: 'inline-block',
+    borderRadius: '2px',
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat'
+  };
+});
+</script>
+
+<style scoped>
+.country-flag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  vertical-align: middle;
+}
+
+.country-flag--small {
+  gap: 0.25rem;
+}
+
+.country-name {
+  font-size: 0.875rem;
+  color: inherit;
+  white-space: nowrap;
+}
+
+.country-flag--small .country-name {
+  font-size: 0.75rem;
+}
+
+/* Ensure proper flag display */
+.fi {
+  flex-shrink: 0;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+</style>

components/MemberCard.vue

@@ -0,0 +1,317 @@
+<template>
+  <v-card
+    class="member-card"
+    :class="{ 'member-card--inactive': !isActive }"
+    elevation="2"
+    @click="$emit('view', member)"
+  >
+    <!-- Member Status Badge -->
+    <div class="member-status-badge">
+      <v-chip
+        :color="statusColor"
+        size="small"
+        variant="flat"
+      >
+        {{ member['Membership Status'] }}
+      </v-chip>
+    </div>
+
+    <!-- Card Header -->
+    <v-card-text class="pb-2">
+      <div class="d-flex align-center mb-3">
+        <v-avatar
+          :color="avatarColor"
+          size="48"
+          class="mr-3"
+        >
+          <span class="text-white font-weight-bold text-h6">
+            {{ memberInitials }}
+          </span>
+        </v-avatar>
+        
+        <div class="flex-grow-1">
+          <h3 class="text-h6 font-weight-bold mb-1">
+            {{ member.FullName || `${member['First Name']} ${member['Last Name']}` }}
+          </h3>
+          <div class="d-flex align-center">
+            <CountryFlag
+              v-if="member.Nationality"
+              :country-code="member.Nationality"
+              :show-name="false"
+              size="small"
+              class="mr-2"
+            />
+            <span class="text-body-2 text-medium-emphasis">
+              {{ getCountryName(member.Nationality) || 'Unknown' }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Member Info -->
+      <div class="member-info">
+        <div class="info-row mb-2">
+          <v-icon size="16" class="mr-2 text-medium-emphasis">mdi-email</v-icon>
+          <span class="text-body-2">{{ member.Email || 'No email' }}</span>
+        </div>
+        
+        <div class="info-row mb-2" v-if="member.Phone">
+          <v-icon size="16" class="mr-2 text-medium-emphasis">mdi-phone</v-icon>
+          <span class="text-body-2">{{ member.FormattedPhone || member.Phone }}</span>
+        </div>
+        
+        <div class="info-row mb-2" v-if="member['Member Since']">
+          <v-icon size="16" class="mr-2 text-medium-emphasis">mdi-calendar</v-icon>
+          <span class="text-body-2">Member since {{ formatDate(member['Member Since']) }}</span>
+        </div>
+      </div>
+
+      <!-- Dues Status -->
+      <div class="dues-status mt-3">
+        <v-chip
+          :color="duesColor"
+          :variant="duesVariant"
+          size="small"
+          class="mr-2"
+        >
+          <v-icon start size="14">{{ duesIcon }}</v-icon>
+          {{ duesText }}
+        </v-chip>
+        
+        <v-chip
+          v-if="member['Payment Due Date']"
+          color="warning"
+          variant="tonal"
+          size="small"
+          :class="{ 'text-error': isOverdue }"
+        >
+          <v-icon start size="14">mdi-calendar-alert</v-icon>
+          {{ isOverdue ? 'Overdue' : `Due ${formatDate(member['Payment Due Date'])}` }}
+        </v-chip>
+      </div>
+    </v-card-text>
+
+    <!-- Card Actions -->
+    <v-card-actions v-if="canEdit || canDelete" class="pt-0">
+      <v-spacer />
+      
+      <v-btn
+        v-if="canEdit"
+        icon
+        size="small"
+        variant="text"
+        @click.stop="$emit('edit', member)"
+        :title="'Edit ' + member.FullName"
+      >
+        <v-icon>mdi-pencil</v-icon>
+      </v-btn>
+      
+      <v-btn
+        v-if="canDelete"
+        icon
+        size="small"
+        variant="text"
+        color="error"
+        @click.stop="$emit('delete', member)"
+        :title="'Delete ' + member.FullName"
+      >
+        <v-icon>mdi-delete</v-icon>
+      </v-btn>
+    </v-card-actions>
+
+    <!-- Click overlay for better UX -->
+    <div class="member-card-overlay" @click="$emit('view', member)"></div>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import type { Member } from '~/utils/types';
+import { getCountryName } from '~/utils/countries';
+
+interface Props {
+  member: Member;
+  canEdit?: boolean;
+  canDelete?: boolean;
+}
+
+interface Emits {
+  (e: 'view', member: Member): void;
+  (e: 'edit', member: Member): void;
+  (e: 'delete', member: Member): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  canEdit: false,
+  canDelete: false
+});
+
+defineEmits<Emits>();
+
+// 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 avatarColor = computed(() => {
+  // Generate consistent color based on member ID
+  const colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'success'];
+  const idNumber = parseInt(props.member.Id) || 0;
+  return colors[idNumber % colors.length];
+});
+
+const isActive = computed(() => {
+  return props.member['Membership Status'] === 'Active';
+});
+
+const statusColor = computed(() => {
+  const status = props.member['Membership Status'];
+  switch (status) {
+    case 'Active': return 'success';
+    case 'Inactive': return 'grey';
+    case 'Pending': return 'warning';
+    case 'Expired': return 'error';
+    default: return 'grey';
+  }
+});
+
+const duesColor = computed(() => {
+  return props.member['Current Year Dues Paid'] === 'true' ? 'success' : 'error';
+});
+
+const duesVariant = computed(() => {
+  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';
+});
+
+const duesText = computed(() => {
+  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']);
+  const today = new Date();
+  return dueDate < today && props.member['Current Year Dues Paid'] !== 'true';
+});
+
+// Methods
+const formatDate = (dateString: string): string => {
+  if (!dateString) return '';
+  
+  try {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    });
+  } catch {
+    return dateString;
+  }
+};
+</script>
+
+<style scoped>
+.member-card {
+  cursor: pointer;
+  border-radius: 12px !important;
+  transition: all 0.3s ease;
+  position: relative;
+  height: 100%;
+}
+
+.member-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 25px rgba(163, 21, 21, 0.15) !important;
+}
+
+.member-card--inactive {
+  opacity: 0.8;
+}
+
+.member-card--inactive .v-card-text {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+}
+
+.member-status-badge {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 2;
+}
+
+.member-info {
+  min-height: 80px;
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+}
+
+.dues-status {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.member-card-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.v-card-actions {
+  position: relative;
+  z-index: 3;
+}
+
+.v-card-actions .v-btn {
+  pointer-events: all;
+}
+
+/* Responsive adjustments */
+@media (max-width: 600px) {
+  .member-card {
+    margin-bottom: 16px;
+  }
+  
+  .dues-status {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+/* Animation for status changes */
+.v-chip {
+  transition: all 0.2s ease;
+}
+
+/* Custom scrollbar for long content */
+.member-info::-webkit-scrollbar {
+  width: 4px;
+}
+
+.member-info::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.member-info::-webkit-scrollbar-thumb {
+  background-color: rgba(163, 21, 21, 0.3);
+  border-radius: 2px;
+}
+
+.text-error {
+  color: rgb(var(--v-theme-error)) !important;
+}
+</style>

components/MultipleNationalityInput.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="multiple-nationality-input">
+    <v-label v-if="label" class="v-label mb-2">{{ label }}</v-label>
+    
+    <div class="nationality-list">
+      <div
+        v-for="(nationality, index) in nationalities"
+        :key="`nationality-${index}`"
+        class="nationality-item d-flex align-center gap-2 mb-2"
+      >
+        <v-select
+          v-model="nationalities[index]"
+          :items="countryOptions"
+          :label="`Nationality ${index + 1}`"
+          variant="outlined"
+          density="compact"
+          :error="hasError"
+          :error-messages="errorMessage"
+          @update:model-value="updateNationalities"
+        >
+          <template #selection="{ item }">
+            <div class="d-flex align-center gap-2">
+              <CountryFlag 
+                :country-code="item.value" 
+                :show-name="false" 
+                size="small" 
+              />
+              <span>{{ item.title }}</span>
+            </div>
+          </template>
+          
+          <template #item="{ props: itemProps, item }">
+            <v-list-item v-bind="itemProps">
+              <template #prepend>
+                <CountryFlag 
+                  :country-code="item.raw.code" 
+                  :show-name="false" 
+                  size="small" 
+                />
+              </template>
+              <v-list-item-title>{{ item.raw.name }}</v-list-item-title>
+            </v-list-item>
+          </template>
+        </v-select>
+        
+        <v-btn
+          v-if="nationalities.length > 1"
+          icon="mdi-delete"
+          size="small"
+          variant="text"
+          color="error"
+          @click="removeNationality(index)"
+          :title="`Remove ${getCountryName(nationality) || 'nationality'}`"
+        />
+      </div>
+    </div>
+    
+    <div class="nationality-actions mt-2">
+      <v-btn
+        variant="outlined"
+        color="primary"
+        size="small"
+        prepend-icon="mdi-plus"
+        @click="addNationality"
+        :disabled="disabled || nationalities.length >= maxNationalities"
+      >
+        Add Nationality
+      </v-btn>
+      
+      <span v-if="nationalities.length >= maxNationalities" class="text-caption text-medium-emphasis ml-2">
+        Maximum {{ maxNationalities }} nationalities allowed
+      </span>
+    </div>
+    
+    <!-- Preview of selected nationalities -->
+    <div v-if="nationalities.length > 0 && !hasEmptyNationality" class="nationality-preview mt-3">
+      <v-label class="text-caption mb-1">Selected Nationalities:</v-label>
+      <div class="d-flex flex-wrap gap-1">
+        <v-chip
+          v-for="nationality in validNationalities"
+          :key="nationality"
+          size="small"
+          variant="tonal"
+          color="primary"
+        >
+          <CountryFlag 
+            :country-code="nationality" 
+            :show-name="false" 
+            size="small" 
+            class="mr-1"
+          />
+          {{ getCountryName(nationality) }}
+        </v-chip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getAllCountries, getCountryName } from '~/utils/countries';
+
+interface Props {
+  modelValue?: string; // Comma-separated string like "FR,MC,US"
+  label?: string;
+  error?: boolean;
+  errorMessage?: string;
+  disabled?: boolean;
+  maxNationalities?: number;
+  required?: boolean;
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: string): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  maxNationalities: 5,
+  error: false,
+  disabled: false,
+  required: false
+});
+
+const emit = defineEmits<Emits>();
+
+// Parse initial nationalities from comma-separated string
+const parseNationalities = (value: string): string[] => {
+  if (!value || value.trim() === '') return [''];
+  return value.split(',').map(n => n.trim()).filter(n => n.length > 0);
+};
+
+// Reactive nationalities array
+const nationalities = ref<string[]>(parseNationalities(props.modelValue));
+
+// Ensure there's always at least one empty nationality field
+if (nationalities.value.length === 0) {
+  nationalities.value = [''];
+}
+
+// Watch for external model changes
+watch(() => props.modelValue, (newValue) => {
+  const newNationalities = parseNationalities(newValue || '');
+  if (newNationalities.length === 0) newNationalities.push('');
+  
+  // Only update if different to prevent loops
+  const current = nationalities.value.filter(n => n).join(',');
+  const incoming = newNationalities.filter(n => n).join(',');
+  
+  if (current !== incoming) {
+    nationalities.value = newNationalities;
+  }
+});
+
+// Country options for dropdowns
+const countryOptions = computed(() => {
+  const countries = getAllCountries();
+  return countries.map(country => ({
+    title: country.name,
+    value: country.code,
+    code: country.code,
+    name: country.name
+  }));
+});
+
+// Computed properties
+const validNationalities = computed(() => {
+  return nationalities.value.filter(n => n && n.trim().length > 0);
+});
+
+const hasEmptyNationality = computed(() => {
+  return nationalities.value.some(n => !n || n.trim() === '');
+});
+
+const hasError = computed(() => {
+  return props.error || !!props.errorMessage;
+});
+
+// Methods
+const addNationality = () => {
+  if (nationalities.value.length < props.maxNationalities) {
+    nationalities.value.push('');
+  }
+};
+
+const removeNationality = (index: number) => {
+  if (nationalities.value.length > 1) {
+    nationalities.value.splice(index, 1);
+    updateNationalities();
+  }
+};
+
+const updateNationalities = () => {
+  // Remove duplicates and empty values for the model
+  const uniqueValid = [...new Set(validNationalities.value)];
+  const result = uniqueValid.join(',');
+  
+  emit('update:modelValue', result);
+};
+
+// Watch nationalities array for changes
+watch(nationalities, () => {
+  updateNationalities();
+}, { deep: true });
+
+// Initialize the model value on mount if needed
+onMounted(() => {
+  if (!props.modelValue && validNationalities.value.length > 0) {
+    updateNationalities();
+  }
+});
+</script>
+
+<style scoped>
+.multiple-nationality-input {
+  width: 100%;
+}
+
+.nationality-item {
+  position: relative;
+}
+
+.nationality-item .v-select {
+  flex: 1;
+}
+
+.nationality-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.nationality-preview {
+  padding: 12px;
+  background: rgba(var(--v-theme-surface-variant), 0.1);
+  border-radius: 8px;
+  border-left: 4px solid rgb(var(--v-theme-primary));
+}
+
+.nationality-preview .v-chip {
+  margin: 2px;
+}
+
+/* Animation for adding/removing items */
+.nationality-item {
+  transition: all 0.3s ease;
+}
+
+.nationality-item.v-enter-active,
+.nationality-item.v-leave-active {
+  transition: all 0.3s ease;
+}
+
+.nationality-item.v-enter-from,
+.nationality-item.v-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+/* Error styling */
+.error-message {
+  color: rgb(var(--v-theme-error));
+  font-size: 0.75rem;
+  margin-top: 4px;
+}
+
+/* Focus and hover states */
+.nationality-item .v-btn:hover {
+  background-color: rgba(var(--v-theme-error), 0.08);
+}
+
+/* Responsive adjustments */
+@media (max-width: 600px) {
+  .nationality-item {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+  
+  .nationality-item .v-btn {
+    align-self: flex-end;
+    width: fit-content;
+  }
+}
+
+/* Priority countries styling in dropdowns */
+:deep(.v-list-item[data-country="MC"]) {
+  background-color: rgba(var(--v-theme-primary), 0.04);
+  font-weight: 500;
+}
+
+:deep(.v-list-item[data-country="FR"]) {
+  background-color: rgba(var(--v-theme-primary), 0.04);
+  font-weight: 500;
+}
+
+:deep(.v-list-item[data-country="US"]) {
+  background-color: rgba(var(--v-theme-primary), 0.02);
+}
+</style>

components/PhoneInputWrapper.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="phone-input-wrapper">
+    <v-label v-if="label" class="v-label mb-2">{{ label }}</v-label>
+    <div class="phone-input-container" :class="{ 'phone-input-container--error': hasError }">
+      <PhoneInput
+        v-model="phoneValue"
+        @update="handlePhoneUpdate"
+        :preferred-countries="['MC', 'FR', 'US', 'IT', 'CH', 'GB']"
+        :translations="{
+          phoneInput: {
+            placeholder: placeholder || 'Phone number'
+          }
+        }"
+        country-locale="en-US"
+        :auto-format="true"
+        :no-formatting-as-you-type="false"
+        class="custom-phone-input"
+      />
+    </div>
+    <div v-if="errorMessage" class="error-message mt-1">
+      <span class="text-error text-caption">{{ errorMessage }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PhoneInput from 'base-vue-phone-input';
+
+interface Props {
+  modelValue?: string;
+  label?: string;
+  placeholder?: string;
+  error?: boolean;
+  errorMessage?: string;
+  required?: boolean;
+  disabled?: boolean;
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: string): void;
+  (e: 'phone-data', data: any): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  placeholder: 'Phone number',
+  error: false,
+  required: false,
+  disabled: false
+});
+
+const emit = defineEmits<Emits>();
+
+// Internal phone value
+const phoneValue = ref(props.modelValue || '');
+const phoneData = ref(null);
+
+// Watch for external changes
+watch(() => props.modelValue, (newValue) => {
+  if (newValue !== phoneValue.value) {
+    phoneValue.value = newValue || '';
+  }
+});
+
+// Handle phone input updates
+const handlePhoneUpdate = (data: any) => {
+  phoneData.value = data;
+  
+  // Emit the formatted international number or the raw input
+  const formattedPhone = data?.formatInternational || data?.e164 || phoneValue.value;
+  
+  emit('update:modelValue', formattedPhone);
+  emit('phone-data', data);
+};
+
+// Watch phoneValue changes to emit updates
+watch(phoneValue, (newValue) => {
+  if (!phoneData.value) {
+    // If no phone data yet, just emit the raw value
+    emit('update:modelValue', newValue);
+  }
+});
+
+const hasError = computed(() => {
+  return props.error || !!props.errorMessage;
+});
+</script>
+
+<style scoped>
+.phone-input-wrapper {
+  width: 100%;
+}
+
+.phone-input-container {
+  border: 2px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 4px;
+  transition: border-color 0.2s ease-in-out;
+  background: rgb(var(--v-theme-surface));
+}
+
+.phone-input-container:hover {
+  border-color: rgba(var(--v-theme-on-surface), 0.87);
+}
+
+.phone-input-container:focus-within {
+  border-color: rgb(var(--v-theme-primary));
+  border-width: 2px;
+}
+
+.phone-input-container--error {
+  border-color: rgb(var(--v-theme-error)) !important;
+}
+
+/* Style the phone input to match Vuetify */
+.phone-input-container :deep(.phone-input) {
+  border: none !important;
+  outline: none !important;
+  background: transparent !important;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  padding: 12px 16px;
+  width: 100%;
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+
+.phone-input-container :deep(.phone-input input) {
+  border: none !important;
+  outline: none !important;
+  background: transparent !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  width: 100%;
+}
+
+/* Style the country selector */
+.phone-input-container :deep(.country-selector) {
+  border: none !important;
+  background: transparent !important;
+  padding: 0 8px 0 0;
+  margin-right: 8px;
+  font-size: 16px;
+}
+
+.phone-input-container :deep(.country-selector .selected-country) {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+.phone-input-container :deep(.country-selector .selected-country:hover) {
+  background-color: rgba(var(--v-theme-on-surface), 0.08);
+}
+
+/* Style the dropdown */
+.phone-input-container :deep(.country-list) {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 4px;
+  background: rgb(var(--v-theme-surface));
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: 1000;
+}
+
+.phone-input-container :deep(.country-list .country-option) {
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  border-bottom: 1px solid rgba(var(--v-border-color), 0.12);
+}
+
+.phone-input-container :deep(.country-list .country-option:hover) {
+  background-color: rgba(var(--v-theme-primary), 0.08);
+}
+
+.phone-input-container :deep(.country-list .country-option:last-child) {
+  border-bottom: none;
+}
+
+/* Error styling */
+.error-message {
+  min-height: 20px;
+}
+
+.text-error {
+  color: rgb(var(--v-theme-error)) !important;
+}
+
+/* Monaco/France flag priority styling */
+.phone-input-container :deep(.country-option[data-country-code="MC"]) {
+  background-color: rgba(var(--v-theme-primary), 0.04);
+  font-weight: 500;
+}
+
+.phone-input-container :deep(.country-option[data-country-code="FR"]) {
+  background-color: rgba(var(--v-theme-primary), 0.04);
+  font-weight: 500;
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+  .phone-input-container {
+    background: rgb(var(--v-theme-surface));
+    border-color: rgba(var(--v-theme-outline), 0.38);
+  }
+  
+  .phone-input-container :deep(.country-list) {
+    background: rgb(var(--v-theme-surface));
+    border-color: rgba(var(--v-theme-outline), 0.38);
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 600px) {
+  .phone-input-container :deep(.phone-input) {
+    font-size: 16px; /* Prevent zoom on iOS */
+  }
+}
+</style>

components/ViewMemberDialog.vue

@@ -0,0 +1,324 @@
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    @update:model-value="$emit('update:model-value', $event)"
+    max-width="600"
+    persistent
+    scrollable
+  >
+    <v-card v-if="member">
+      <!-- Header -->
+      <v-card-title class="d-flex align-center pa-6 bg-primary">
+        <v-avatar
+          :color="avatarColor"
+          size="48"
+          class="mr-4"
+        >
+          <span class="text-white font-weight-bold text-h6">
+            {{ memberInitials }}
+          </span>
+        </v-avatar>
+        
+        <div class="flex-grow-1">
+          <h2 class="text-h5 text-white font-weight-bold">
+            {{ member.FullName || `${member['First Name']} ${member['Last Name']}` }}
+          </h2>
+          <div class="d-flex align-center mt-1">
+            <CountryFlag
+              v-if="member.Nationality"
+              :country-code="member.Nationality"
+              :show-name="false"
+              size="small"
+              class="mr-2"
+            />
+            <span class="text-white text-body-2">
+              {{ getCountryName(member.Nationality) || 'Unknown Country' }}
+            </span>
+          </div>
+        </div>
+        
+        <v-btn
+          icon
+          variant="text"
+          color="white"
+          @click="$emit('update:model-value', false)"
+        >
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
+
+      <!-- Status Chips -->
+      <v-card-text class="py-4">
+        <div class="d-flex flex-wrap gap-2 mb-4">
+          <v-chip
+            :color="statusColor"
+            variant="flat"
+            size="small"
+          >
+            <v-icon start size="16">{{ statusIcon }}</v-icon>
+            {{ member['Membership Status'] }}
+          </v-chip>
+          
+          <v-chip
+            :color="duesColor"
+            :variant="duesVariant"
+            size="small"
+          >
+            <v-icon start size="16">{{ duesIcon }}</v-icon>
+            {{ duesText }}
+          </v-chip>
+          
+          <v-chip
+            v-if="member['Payment Due Date']"
+            :color="isOverdue ? 'error' : 'warning'"
+            variant="tonal"
+            size="small"
+          >
+            <v-icon start size="16">mdi-calendar-alert</v-icon>
+            {{ isOverdue ? 'Payment Overdue' : 'Payment Due' }}
+          </v-chip>
+        </div>
+
+        <!-- Member Information -->
+        <v-row>
+          <!-- Personal Information -->
+          <v-col cols="12" md="6">
+            <h3 class="text-h6 mb-3 text-primary">Personal Information</h3>
+            
+            <div class="info-group">
+              <div class="info-item mb-3">
+                <label class="text-body-2 font-weight-bold text-medium-emphasis">First Name</label>
+                <p class="text-body-1 ma-0">{{ member['First Name'] || 'Not provided' }}</p>
+              </div>
+              
+              <div class="info-item mb-3">
+                <label class="text-body-2 font-weight-bold text-medium-emphasis">Last Name</label>
+                <p class="text-body-1 ma-0">{{ member['Last Name'] || 'Not provided' }}</p>
+              </div>
+              
+              <div class="info-item mb-3">
+                <label class="text-body-2 font-weight-bold text-medium-emphasis">Email</label>
+                <p class="text-body-1 ma-0">
+                  <a v-if="member.Email" :href="`mailto:${member.Email}`" class="text-primary">
+                    {{ member.Email }}
+                  </a>
+                  <span v-else>Not provided</span>
+                </p>
+              </div>
+              
+              <div class="info-item mb-3" v-if="member.Phone">
+                <label class="text-body-2 font-weight-bold text-medium-emphasis">Phone</label>
+                <p class="text-body-1 ma-0">
+                  <a :href="`tel:${member.Phone}`" class="text-primary">
+                    {{ member.FormattedPhone || member.Phone }}
+                  </a>
+                </p>
+              </div>
+              
+              <div class="info-item mb-3" v-if="member['Date of Birth']">
+                <label class="text-body-2 font-weight-bold text-medium-emphasis">Date of Birth</label>
+                <p class="text-body-1 ma-0">{{ formatDate(member['Date of Birth']) }}</p>
+              </div>
+              
+              <div class="info-item mb-3" v-if="member.Address">
+                <label class="text-body-2 font-weight-bold text-medium-emphasis">Address</label>
+                <p class="text-body-1 ma-0">{{ member.Address }}</p>
+              </div>
+            </div>
+          </v-col>
+
+          <!-- Membership Information -->
+          <v-col cols="12" md="6">
+            <h3 class="text-h6 mb-3 text-primary">Membership Information</h3>
+            
+            <div class="info-group">
+              <div class="info-item mb-3">
+                <label class="text-body-2 font-weight-bold text-medium-emphasis">Member Since</label>
+                <p class="text-body-1 ma-0">{{ formatDate(member['Member Since']) || 'Not specified' }}</p>
+              </div>
+              
+              <div class="info-item mb-3">
+                <label class="text-body-2 font-weight-bold text-medium-emphasis">Membership Status</label>
+                <p class="text-body-1 ma-0">
+                  <v-chip :color="statusColor" size="small" variant="tonal">
+                    {{ member['Membership Status'] }}
+                  </v-chip>
+                </p>
+              </div>
+              
+              <div class="info-item mb-3">
+                <label class="text-body-2 font-weight-bold text-medium-emphasis">Current Year Dues</label>
+                <p class="text-body-1 ma-0">
+                  <v-chip :color="duesColor" size="small" variant="tonal">
+                    {{ member['Current Year Dues Paid'] ? 'Paid' : 'Outstanding' }}
+                  </v-chip>
+                </p>
+              </div>
+              
+              <div class="info-item mb-3" v-if="member['Membership Date Paid']">
+                <label class="text-body-2 font-weight-bold text-medium-emphasis">Last Payment Date</label>
+                <p class="text-body-1 ma-0">{{ formatDate(member['Membership Date Paid']) }}</p>
+              </div>
+              
+              <div class="info-item mb-3" v-if="member['Payment Due Date']">
+                <label class="text-body-2 font-weight-bold text-medium-emphasis">Payment Due Date</label>
+                <p class="text-body-1 ma-0" :class="{ 'text-error': isOverdue }">
+                  {{ formatDate(member['Payment Due Date']) }}
+                  <span v-if="isOverdue" class="text-error font-weight-bold"> (Overdue)</span>
+                </p>
+              </div>
+            </div>
+          </v-col>
+        </v-row>
+      </v-card-text>
+
+      <!-- Actions -->
+      <v-card-actions class="pa-6 pt-0">
+        <v-spacer />
+        <v-btn
+          variant="text"
+          @click="$emit('update:model-value', false)"
+        >
+          Close
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import type { Member } from '~/utils/types';
+import { getCountryName } from '~/utils/countries';
+
+interface Props {
+  modelValue: boolean;
+  member?: Member | null;
+}
+
+interface Emits {
+  (e: 'update:model-value', value: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  member: null
+});
+
+defineEmits<Emits>();
+
+// Computed properties
+const memberInitials = computed(() => {
+  if (!props.member) return '';
+  const firstName = props.member['First Name'] || '';
+  const lastName = props.member['Last Name'] || '';
+  return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
+});
+
+const avatarColor = computed(() => {
+  if (!props.member) return 'grey';
+  const colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'success'];
+  const idNumber = parseInt(props.member.Id) || 0;
+  return colors[idNumber % colors.length];
+});
+
+const statusColor = computed(() => {
+  if (!props.member) return 'grey';
+  const status = props.member['Membership Status'];
+  switch (status) {
+    case 'Active': return 'success';
+    case 'Inactive': return 'grey';
+    case 'Pending': return 'warning';
+    case 'Expired': return 'error';
+    default: return 'grey';
+  }
+});
+
+const statusIcon = computed(() => {
+  if (!props.member) return 'mdi-help';
+  const status = props.member['Membership Status'];
+  switch (status) {
+    case 'Active': return 'mdi-check-circle';
+    case 'Inactive': return 'mdi-pause-circle';
+    case 'Pending': return 'mdi-clock';
+    case 'Expired': return 'mdi-alert-circle';
+    default: return 'mdi-help';
+  }
+});
+
+const duesColor = computed(() => {
+  if (!props.member) return 'grey';
+  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';
+});
+
+const duesIcon = computed(() => {
+  if (!props.member) return 'mdi-help';
+  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';
+});
+
+const isOverdue = computed(() => {
+  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';
+});
+
+// Methods
+const formatDate = (dateString: string): string => {
+  if (!dateString) return '';
+  
+  try {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+  } catch {
+    return dateString;
+  }
+};
+</script>
+
+<style scoped>
+.info-group {
+  background: rgba(var(--v-theme-surface-variant), 0.1);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.info-item {
+  border-bottom: 1px solid rgba(var(--v-theme-outline), 0.12);
+  padding-bottom: 8px;
+}
+
+.info-item:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.info-item label {
+  display: block;
+  margin-bottom: 4px;
+}
+
+.bg-primary {
+  background: linear-gradient(135deg, #a31515 0%, #d32f2f 100%) !important;
+}
+
+.text-error {
+  color: rgb(var(--v-theme-error)) !important;
+}
+
+.text-primary {
+  color: #a31515 !important;
+}
+</style>