chore: add visual preview HTML for MonacoUSA visual audit

- Changed ID display from "DB ID: pending" to "ID Pending" for cleaner UI
- Moved Mark Paid button from Dues column to Actions column for better organization
- Increased Actions column width to accommodate the Mark Paid button
- Simplified the dues status display to just show the chip

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/claude_project.json

@@ -0,0 +1,66 @@
+{
+    "mcpServers": {
+      "serena": {
+        "type": "stdio",
+        "command": "uvx",
+        "args": [
+          "--from",
+          "git+https://github.com/oraios/serena",
+          "serena",
+          "start-mcp-server",
+          "--context",
+          "ide-assistant",
+          "--project",
+          "${workspaceFolder}"
+        ],
+        "env": {}
+      },
+      "zen": {
+        "type": "stdio",
+        "command": "pwsh",
+        "args": [
+          "-NoLogo",
+          "-NoProfile",
+          "-Command",
+          "$p=(Get-Command uvx -ErrorAction SilentlyContinue).Source; if(-not $p){$c=@(\"$HOME\\.local\\bin\\uvx.exe\",\"C:\\\\Program Files\\\\uv\\\\bin\\\\uvx.exe\"); foreach($i in $c){ if(Test-Path $i){$p=$i; break}}}; if($p){ & $p --from git+https://github.com/BeehiveInnovations/zen-mcp-server.git zen-mcp-server } else { Write-Error 'uvx not found'; exit 1 }"
+        ],
+        "env": {
+          "GEMINI_API_KEY": "your_gemini_key",
+          "OPENAI_API_KEY": "your_openai_key"
+        }
+      },
+      "playwright": {
+        "type": "stdio",
+        "command": "cmd",
+        "args": [
+          "/c",
+          "npx",
+          "-y",
+          "@playwright/mcp@latest"
+        ],
+        "env": {}
+      },
+      "context7": {
+        "type": "stdio",
+        "command": "npx",
+        "args": [
+          "-y",
+          "@upstash/context7-mcp@latest"
+        ],
+        "env": {}
+      },
+      "@21st-dev/magic": {
+        "type": "stdio",
+        "command": "cmd",
+        "args": [
+          "/c",
+          "npx",
+          "-y",
+          "@21st-dev/magic@latest"
+        ],
+        "env": {
+          "API_KEY": "adb246737aabae0b2f124fc85dc03737a0f65d9660b786732c31578649da10e5"
+        }
+      }
+    },
+}

.claude/settings.local.json

@@ -0,0 +1,101 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(mkdir:*)",
+      "Read(C:\\Users\\mpcia/**)",
+      "Read(C:\\Users\\mpcia/**)",
+      "mcp__serena__activate_project",
+      "mcp__serena__list_dir",
+      "mcp__playwright__browser_navigate",
+      "mcp__playwright__browser_take_screenshot",
+      "mcp__playwright__browser_snapshot",
+      "mcp__playwright__browser_type",
+      "mcp__playwright__browser_click",
+      "mcp__playwright__browser_press_key",
+      "mcp__playwright__browser_wait_for",
+      "mcp__serena__find_symbol",
+      "mcp__serena__search_for_pattern",
+      "mcp___21st-dev_magic__21st_magic_component_inspiration",
+      "mcp__context7__resolve-library-id",
+      "mcp__context7__get-library-docs",
+      "Bash(npm install:*)",
+      "Bash(git add:*)",
+      "Bash(git push:*)",
+      "Bash(git commit:*)",
+      "Bash(npm run build:*)",
+      "mcp__serena__find_file",
+      "mcp___21st-dev_magic__21st_magic_component_builder",
+      "Bash(npm run dev:*)",
+      "Bash(New-Item -Path \"Z:\\Repos\\monacousa-portal\\pages\\admin\\dashboard\\index.vue\" -ItemType File -Force)",
+      "Bash(grep:*)",
+      "Bash(findstr:*)",
+      "mcp__playwright__browser_close",
+      "Bash(dir:*)",
+      "mcp__playwright__browser_evaluate",
+      "mcp__playwright__browser_hover",
+      "mcp__playwright__browser_resize",
+      "mcp__playwright__browser_console_messages",
+      "mcp__serena__check_onboarding_performed",
+      "mcp__serena__get_symbols_overview",
+      "mcp__serena__find_referencing_symbols",
+      "mcp__zen__thinkdeep",
+      "mcp__serena__insert_after_symbol",
+      "mcp__serena__replace_symbol_body",
+      "mcp__playwright__browser_fill_form",
+      "mcp__zen__debug",
+      "Bash(Copy-Item -Path \"Z:\\Repos\\monacousa-portal\\design-mockups\\pages\\auth\\ProfessionalLogin.vue\" -Destination \"Z:\\Repos\\monacousa-portal\\pages\\mockups\\login.vue\")",
+      "Bash(Remove-Item -Path \"Z:\\Repos\\monacousa-portal\\pages\\mockups\" -Recurse -Force)",
+      "mcp__zen__analyze",
+      "Read(/Z:\\Repos\\monacousa-portal\\.playwright-mcp/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\.playwright-mcp/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\assets\\scss/**)",
+      "Bash(New-Item -Path \"Z:\\Repos\\monacousa-portal\\assets\\scss\\design-system-v2.scss\" -ItemType File -Force)",
+      "Read(/Z:\\Repos\\monacousa-portal\\assets\\scss/**)",
+      "Read(/Z:\\Repos\\monacousa-portal/**)",
+      "Read(/Z:\\Repos\\monacousa-portal/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\components\\ui/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\components\\ui/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\dashboard/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\board/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\assets\\scss/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\dashboard/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\components/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\components/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\settings/**)",
+      "Bash(gh run list:*)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\members/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\members/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\members/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\payments/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\members/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\members/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\components/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\payments/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\payments/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\payments/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\components/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\layouts/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\layouts/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\layouts/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\utils/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\server\\api\\members\\[id]/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\components/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\server\\utils/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\payments/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\server\\utils/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\members/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\members/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\components/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\components/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\server\\api/**)",
+      "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\members/**)",
+      "Bash(git pull:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

.serena/.gitignore

@@ -0,0 +1 @@
+/cache

.serena/project.yml

@@ -0,0 +1,68 @@
+# language of the project (csharp, python, rust, java, typescript, go, cpp, or ruby)
+#  * For C, use cpp
+#  * For JavaScript, use typescript
+# Special requirements:
+#  * csharp: Requires the presence of a .sln file in the project folder.
+language: typescript
+
+# whether to use the project's gitignore file to ignore files
+# Added on 2025-04-07
+ignore_all_files_in_gitignore: true
+# list of additional paths to ignore
+# same syntax as gitignore, so you can use * and **
+# Was previously called `ignored_dirs`, please update your config if you are using that.
+# Added (renamed) on 2025-04-07
+ignored_paths: []
+
+# whether the project is in read-only mode
+# If set to true, all editing tools will be disabled and attempts to use them will result in an error
+# Added on 2025-04-18
+read_only: false
+
+
+# list of tool names to exclude. We recommend not excluding any tools, see the readme for more details.
+# Below is the complete list of tools for convenience.
+# To make sure you have the latest list of tools, and to view their descriptions, 
+# execute `uv run scripts/print_tool_overview.py`.
+#
+#  * `activate_project`: Activates a project by name.
+#  * `check_onboarding_performed`: Checks whether project onboarding was already performed.
+#  * `create_text_file`: Creates/overwrites a file in the project directory.
+#  * `delete_lines`: Deletes a range of lines within a file.
+#  * `delete_memory`: Deletes a memory from Serena's project-specific memory store.
+#  * `execute_shell_command`: Executes a shell command.
+#  * `find_referencing_code_snippets`: Finds code snippets in which the symbol at the given location is referenced.
+#  * `find_referencing_symbols`: Finds symbols that reference the symbol at the given location (optionally filtered by type).
+#  * `find_symbol`: Performs a global (or local) search for symbols with/containing a given name/substring (optionally filtered by type).
+#  * `get_current_config`: Prints the current configuration of the agent, including the active and available projects, tools, contexts, and modes.
+#  * `get_symbols_overview`: Gets an overview of the top-level symbols defined in a given file.
+#  * `initial_instructions`: Gets the initial instructions for the current project.
+#     Should only be used in settings where the system prompt cannot be set,
+#     e.g. in clients you have no control over, like Claude Desktop.
+#  * `insert_after_symbol`: Inserts content after the end of the definition of a given symbol.
+#  * `insert_at_line`: Inserts content at a given line in a file.
+#  * `insert_before_symbol`: Inserts content before the beginning of the definition of a given symbol.
+#  * `list_dir`: Lists files and directories in the given directory (optionally with recursion).
+#  * `list_memories`: Lists memories in Serena's project-specific memory store.
+#  * `onboarding`: Performs onboarding (identifying the project structure and essential tasks, e.g. for testing or building).
+#  * `prepare_for_new_conversation`: Provides instructions for preparing for a new conversation (in order to continue with the necessary context).
+#  * `read_file`: Reads a file within the project directory.
+#  * `read_memory`: Reads the memory with the given name from Serena's project-specific memory store.
+#  * `remove_project`: Removes a project from the Serena configuration.
+#  * `replace_lines`: Replaces a range of lines within a file with new content.
+#  * `replace_symbol_body`: Replaces the full definition of a symbol.
+#  * `restart_language_server`: Restarts the language server, may be necessary when edits not through Serena happen.
+#  * `search_for_pattern`: Performs a search for a pattern in the project.
+#  * `summarize_changes`: Provides instructions for summarizing the changes made to the codebase.
+#  * `switch_modes`: Activates modes by providing a list of their names
+#  * `think_about_collected_information`: Thinking tool for pondering the completeness of collected information.
+#  * `think_about_task_adherence`: Thinking tool for determining whether the agent is still on track with the current task.
+#  * `think_about_whether_you_are_done`: Thinking tool for determining whether the task is truly completed.
+#  * `write_memory`: Writes a named memory (for future reference) to Serena's project-specific memory store.
+excluded_tools: []
+
+# initial prompt for the project. It will always be given to the LLM upon activating the project
+# (contrary to the memories, which are loaded on demand).
+initial_prompt: ""
+
+project_name: "monacousa-portal"

DEPLOYMENT_FORCE_UPDATE.md

@@ -1,20 +0,0 @@
-# Deployment Force Update
-
-This file was created to force a deployment update to include the Events and RSVPs table configuration fields in the admin dialog.
-
-**Updated**: 2025-08-12 12:49 PM  
-**Reason**: Add missing Events and RSVPs table configuration + Fix API token validation
-
-## Changes Included:
-- ✅ Events Table ID configuration field
-- ✅ RSVPs Table ID configuration field  
-- ✅ Updated AdminConfigurationDialog component (the actual production component)
-- ✅ Fixed TypeScript errors
-- ✅ Added proper form validation for new fields
-- ✅ Fixed ByteString conversion error in API token validation
-- ✅ Added proper API token validation (no special Unicode characters)
-
-## Root Cause Identified:
-1. Production was using AdminConfigurationDialog.vue, not NocoDBSettingsDialog.vue
-2. API tokens with special characters (bullets, quotes) cause HTTP header errors
-3. Both issues have now been resolved

EMAIL_VERIFICATION_RELOAD_LOOP_FIX_FINAL.md

@@ -1,267 +0,0 @@
-# Email Verification Reload Loop - Complete Fix Implementation
-
-## Problem Analysis
-
-The email verification page was experiencing endless reload loops on mobile browsers (both Chrome and Safari iOS), caused by:
-
-1. **Server-Side Token Consumption Bug**: Tokens were consumed immediately on verification, even when Keycloak updates failed
-2. **Client-Side Navigation Failures**: Mobile browsers failing to navigate away from the verification page
-3. **Component Lifecycle Issues**: No circuit breaker to prevent repeated API calls
-4. **Mobile Browser Quirks**: Different timeout and retry behaviors on mobile
-
-## Root Cause (From System Logs)
-
-```
-[verify-email] Keycloak update failed: Failed to update user profile: 400 - {"field":"email","errorMessage":"error-user-attribute-required","params":["email"]}
-[email-tokens] Token verification failed: Token not found or already used
-```
-
-**The flow was**: 
-1. Email verification succeeds, token gets consumed
-2. Keycloak update fails (configuration issue)
-3. API returns error, but token is already consumed  
-4. Mobile browser retries same URL
-5. Token now shows "already used" → endless loop
-
-## Complete Solution Implementation
-
-### Phase 1: Server-Side Token Management Fix
-
-#### A. Enhanced Token Utilities (`server/utils/email-tokens.ts`)
-
-**Before**: Tokens were consumed immediately during verification
-**After**: Separated verification from consumption
-
-```typescript
-// NEW: Verify without consuming
-export async function verifyEmailToken(token: string): Promise<{ userId: string; email: string }> {
-  // Verify JWT and validate, but DON'T delete token yet
-  return { userId: decoded.userId, email: decoded.email };
-}
-
-// NEW: Consume token only after successful operations
-export async function consumeEmailToken(token: string): Promise<void> {
-  activeTokens.delete(token);
-}
-```
-
-#### B. Smart API Endpoint (`server/api/auth/verify-email.get.ts`)
-
-**Key improvements**:
-- Only consumes tokens after successful Keycloak updates
-- Intelligent error classification (retryable vs permanent)
-- Enhanced response data with partial success indicators
-
-```typescript
-try {
-  // Verify token WITHOUT consuming
-  const { userId, email } = await verifyEmailToken(token);
-
-  // Attempt Keycloak update
-  await keycloak.updateUserProfile(userId, { emailVerified: true });
-  
-  // ONLY consume on success
-  await consumeEmailToken(token);
-
-} catch (keycloakError) {
-  if (keycloakError.message?.includes('error-user-attribute-required')) {
-    // Configuration issue - don't consume token, allow retries
-    partialSuccess = true;
-  } else {
-    // Other errors - consume to prevent infinite loops
-    await consumeEmailToken(token);
-    partialSuccess = true;
-  }
-}
-```
-
-### Phase 2: Client-Side Circuit Breaker System
-
-#### A. Verification State Management (`utils/verification-state.ts`)
-
-**Features**:
-- **Browser-persistent state**: Uses sessionStorage with unique keys per token
-- **Circuit breaker pattern**: Max 3 attempts per 5-minute window
-- **Progressive navigation**: Multiple fallback methods for mobile compatibility
-- **Mobile optimizations**: Different delays for Safari iOS vs other browsers
-
-```typescript
-export interface VerificationAttempt {
-  token: string;
-  attempts: number;
-  lastAttempt: number;
-  maxAttempts: number;
-  status: 'pending' | 'success' | 'failed' | 'blocked';
-  errors: string[];
-}
-
-// Progressive navigation with fallbacks
-export async function navigateWithFallback(url: string): Promise<boolean> {
-  try {
-    // Method 1: Nuxt navigateTo
-    await navigateTo(url, options);
-  } catch {
-    // Method 2: Vue Router
-    await nuxtApp.$router.replace(url);
-  } catch {
-    // Method 3: Direct window.location (mobile fallback)
-    window.location.replace(url);
-  }
-}
-```
-
-#### B. Mobile Browser Optimizations
-
-**Safari iOS specific**:
-- 500ms navigation delay for stability
-- Static device detection to avoid reactive loops
-- Viewport meta optimization
-- Hardware acceleration management
-
-**General mobile**:
-- 300ms navigation delay
-- Touch-friendly button sizing
-- Optimized scroll behavior
-
-### Phase 3: Enhanced Verification Page
-
-#### A. Updated UI States (`pages/auth/verify.vue`)
-
-**New states**:
-1. **Circuit Breaker Blocked**: Shows when max attempts exceeded
-2. **Loading with Attempt Counter**: Shows current attempt number
-3. **Smart Retry Logic**: Only shows retry if attempts remain
-4. **Comprehensive Error Display**: Different messages for different error types
-
-#### B. Integration with Circuit Breaker
-
-```typescript
-// Initialize verification state on mount
-verificationState.value = initVerificationState(token, 3);
-
-// Check if blocked before attempting
-if (shouldBlockVerification(token)) {
-  console.log('[auth/verify] Verification blocked by circuit breaker');
-  return;
-}
-
-// Record attempts and update UI
-verificationState.value = recordAttempt(token, success, error);
-updateUIState();
-```
-
-## Fix Benefits
-
-### 🚫 Prevents Reload Loops
-- **Server**: Tokens preserved for retryable failures
-- **Client**: Circuit breaker prevents excessive API calls
-- **Mobile**: Progressive navigation with fallbacks
-
-### 📱 Mobile Browser Compatibility  
-- **Safari iOS**: Specific delay and navigation optimizations
-- **Chrome Mobile**: Standard mobile optimizations
-- **Progressive Fallbacks**: Multiple navigation methods
-
-### 🔄 Smart Retry Logic
-- **Automatic Retries**: Up to 3 attempts per 5-minute window
-- **Intelligent Blocking**: Prevents spam while allowing legitimate retries
-- **User Feedback**: Clear status messages and attempt counters
-
-### 🛡️ Error Resilience
-- **Partial Success Handling**: Works even with Keycloak configuration issues
-- **Graceful Degradation**: Always provides user feedback and alternatives
-- **Self-Healing**: Circuit breaker automatically resets after timeout
-
-## Testing Scenarios Covered
-
-### ✅ Server Configuration Issues
-- **Keycloak misconfiguration**: Shows partial success, preserves token
-- **Database connectivity**: Proper error handling with retry options
-- **Network timeouts**: Circuit breaker prevents endless attempts
-
-### ✅ Mobile Browser Edge Cases
-- **Navigation failures**: Multiple fallback methods
-- **Component remounting**: Persistent state prevents restart loops  
-- **Memory constraints**: Automatic cleanup of expired states
-- **Network switching**: Handles connection changes gracefully
-
-### ✅ User Experience Scenarios
-- **Expired links**: Clear error messages with alternatives
-- **Used links**: Proper detection and user guidance
-- **Multiple tabs**: Each instance has independent circuit breaker
-- **Back button**: Replace navigation prevents loops
-
-## Implementation Files
-
-### Server Files Modified
-- `server/utils/email-tokens.ts` - Token management overhaul
-- `server/api/auth/verify-email.get.ts` - Smart verification endpoint
-
-### Client Files Created/Modified  
-- `utils/verification-state.ts` - Circuit breaker and state management (NEW)
-- `pages/auth/verify.vue` - Enhanced verification page with circuit breaker
-
-### Dependencies
-- Existing static device detection (`utils/static-device-detection.ts`)
-- Existing mobile Safari optimizations (`utils/mobile-safari-utils.ts`)
-
-## Monitoring and Debugging
-
-### Server-Side Logging
-```
-[email-tokens] Token consumed successfully
-[verify-email] Keycloak configuration error - token preserved for retry
-[verify-email] Consuming token despite Keycloak error to prevent loops
-```
-
-### Client-Side Logging
-```
-[verification-state] Maximum attempts (3) reached, blocking further attempts
-[verification-state] Verification blocked for 8 more minutes
-[verification-state] Using window.location fallback
-```
-
-## Configuration
-
-### Circuit Breaker Settings
-```typescript
-const MAX_ATTEMPTS_DEFAULT = 3;
-const ATTEMPT_WINDOW = 5 * 60 * 1000; // 5 minutes
-const CIRCUIT_BREAKER_TIMEOUT = 10 * 60 * 1000; // 10 minutes
-```
-
-### Mobile Navigation Delays
-```typescript
-// Safari iOS: 500ms delay
-// Other mobile: 300ms delay  
-// Desktop: 100ms delay
-```
-
-## Deployment Notes
-
-### Immediate Benefits
-- Existing verification links will work better
-- No database migrations required
-- Backward compatible with existing tokens
-
-### Long-term Improvements
-- Reduced server load from repeated failed attempts
-- Better user experience with clear status messages
-- Automatic recovery from temporary configuration issues
-
-## Success Metrics
-
-### Before Fix
-- Endless reload loops on mobile browsers
-- Token consumption on partial failures
-- No retry mechanism for temporary issues
-- Poor mobile browser navigation compatibility
-
-### After Fix  
-- ✅ Circuit breaker prevents reload loops
-- ✅ Smart token consumption based on actual success
-- ✅ Intelligent retry with user feedback
-- ✅ Progressive navigation with mobile fallbacks
-- ✅ Comprehensive error handling and user guidance
-
-This fix addresses the root cause while providing comprehensive resilience for all edge cases and browser combinations.

ENVIRONMENT_VARIABLES.md

@@ -0,0 +1,102 @@
+# Environment Variables Configuration
+
+## NocoDB Configuration (Required)
+
+To fix API key issues and improve container deployment, set these environment variables in your Docker container:
+
+### Required Variables
+
+```bash
+# NocoDB Database Connection
+NUXT_NOCODB_URL=https://database.monacousa.org
+NUXT_NOCODB_TOKEN=your_actual_nocodb_api_token_here
+NUXT_NOCODB_BASE_ID=your_nocodb_base_id_here
+```
+
+### Alternative Variable Names (also supported)
+
+```bash
+# Alternative formats that also work
+NOCODB_URL=https://database.monacousa.org
+NOCODB_TOKEN=your_actual_nocodb_api_token_here
+NOCODB_API_TOKEN=your_actual_nocodb_api_token_here
+NOCODB_BASE_ID=your_nocodb_base_id_here
+```
+
+## How to Set in Docker
+
+### Option 1: Docker Compose (Recommended)
+
+Add to your `docker-compose.yml`:
+
+```yaml
+services:
+  monacousa-portal:
+    image: your-image
+    environment:
+      - NUXT_NOCODB_URL=https://database.monacousa.org
+      - NUXT_NOCODB_TOKEN=your_actual_nocodb_api_token_here
+      - NUXT_NOCODB_BASE_ID=your_nocodb_base_id_here
+    # ... rest of your config
+```
+
+### Option 2: Docker Run Command
+
+```bash
+docker run -d \
+  -e NUXT_NOCODB_URL=https://database.monacousa.org \
+  -e NUXT_NOCODB_TOKEN=your_actual_nocodb_api_token_here \
+  -e NUXT_NOCODB_BASE_ID=your_nocodb_base_id_here \
+  your-image
+```
+
+### Option 3: Environment File
+
+Create `.env` file:
+```bash
+NUXT_NOCODB_URL=https://database.monacousa.org
+NUXT_NOCODB_TOKEN=your_actual_nocodb_api_token_here
+NUXT_NOCODB_BASE_ID=your_nocodb_base_id_here
+```
+
+Then use:
+```bash
+docker run --env-file .env your-image
+```
+
+## Priority Order
+
+The system will check configuration in this order:
+
+1. **Environment Variables** (highest priority)
+2. Admin Panel Configuration (fallback)
+3. Runtime Config (last resort)
+
+## Benefits
+
+✅ **Container-Friendly**: No need to configure through web UI
+✅ **Secure**: API tokens stored as environment variables
+✅ **Reliable**: No Unicode/formatting issues
+✅ **Version Control**: Can be managed in deployment configs
+✅ **Scalable**: Same config across multiple containers
+
+## Getting Your Values
+
+### NocoDB API Token
+1. Go to your NocoDB instance
+2. Click your profile → API Tokens
+3. Create new token or copy existing one
+4. Use the raw token without any formatting
+
+### NocoDB Base ID  
+1. In NocoDB, go to your base
+2. Check the URL: `https://your-nocodb.com/dashboard/#/nc/base/BASE_ID_HERE`
+3. Copy the BASE_ID part
+
+## Testing Configuration
+
+After setting environment variables, check the logs:
+- ✅ `[nocodb] ✅ Using environment variables - URL: https://database.monacousa.org`
+- ✅ `[nocodb] ✅ Configuration validated successfully`
+
+If you see fallback messages, the environment variables aren't being read correctly.

EVENTS_SYSTEM_BUGS_COMPREHENSIVE_ANALYSIS.md

@@ -1,148 +0,0 @@
-# Events System - Comprehensive Bug Analysis
-
-## CRITICAL BUGS IDENTIFIED:
-
-### 1. **MAJOR: Database Architecture Flaw**
-**File:** `server/utils/nocodb-events.ts`
-**Issue:** The system attempts to use the same table for both Events and RSVPs, causing data corruption
-**Severity:** CRITICAL - System Breaking
-**Status:** PARTIALLY FIXED - Still has configuration issues
-
-### 2. **CRITICAL: Configuration Missing**
-**File:** `nuxt.config.ts`
-**Issue:** Missing events-specific NocoDB configuration properties
-**Impact:** Events system cannot initialize properly
-**Missing Properties:**
-- `eventsBaseId`
-- `eventsTableId` 
-- `rsvpTableId`
-
-### 3. **MAJOR: RSVP Functions Wrong Table**
-**File:** `server/utils/nocodb-events.ts`
-**Issue:** All RSVP functions still point to events table instead of RSVP table
-**Impact:** RSVPs stored in wrong table, data corruption
-
-### 4. **CRITICAL: Type Safety Issues**
-**File:** `server/utils/nocodb-events.ts`
-**Issue:** Multiple `unknown` types causing runtime errors
-**Impact:** Calendar fails to load, RSVP system breaks
-
-### 5. **MAJOR: API Endpoint Issues**
-**Files:** All `server/api/events/` files
-**Issue:** Recently fixed authentication but still has logical bugs
-**Remaining Issues:**
-- No validation of event data
-- Missing error handling for database failures
-- Inconsistent response formats
-
-### 6. **CRITICAL: Frontend Component Bugs**
-**File:** `components/CreateEventDialog.vue`
-**Issues:**
-- Form validation insufficient
-- Missing error handling for API failures
-- Date/time formatting issues
-- No loading states for better UX
-
-### 7. **MAJOR: Calendar Component Issues**
-**File:** `components/EventCalendar.vue`
-**Issues:**
-- Event transformation logic flawed
-- Mobile view switching problems
-- FullCalendar integration missing key features
-- No error boundaries for calendar failures
-
-### 8. **CRITICAL: Event Details Dialog Bugs**
-**File:** `components/EventDetailsDialog.vue`
-**Issues:**
-- RSVP submission hardcoded member_id as empty string
-- Payment info hardcoded instead of from config
-- Missing proper error handling
-- No loading states
-
-### 9. **MAJOR: UseEvents Composable Issues**
-**File:** `composables/useEvents.ts`
-**Issues:**
-- Calendar events function not properly integrated
-- Cache key generation problematic
-- Error propagation inconsistent
-- Date handling utilities missing
-
-### 10. **CRITICAL: Environment Configuration Incomplete**
-**File:** `nuxt.config.ts` and `.env.example`
-**Issues:**
-- Missing events-specific environment variables
-- No fallback values for development
-- Events base/table IDs not configured
-
-## ARCHITECTURAL PROBLEMS:
-
-### 1. **Data Model Confusion**
-The system tries to store Events and RSVPs in the same table, which is fundamentally wrong:
-- Events need their own table with event-specific fields
-- RSVPs need a separate table with foreign key to events
-- Current mixing causes data corruption and query failures
-
-### 2. **Configuration Inconsistency**
-Events system references configuration properties that don't exist:
-- `config.nocodb.eventsBaseId` - doesn't exist
-- `config.nocodb.eventsTableId` - doesn't exist  
-- `config.nocodb.rsvpTableId` - doesn't exist
-
-### 3. **API Response Inconsistency**
-Different endpoints return different response formats:
-- Some return `{ success, data, message }`
-- Others return raw NocoDB responses
-- Frontend expects consistent format
-
-### 4. **Frontend State Management Issues**
-- No centralized error handling
-- Inconsistent loading states
-- Cache invalidation problems
-- Component state synchronization issues
-
-## IMMEDIATE FIXES REQUIRED:
-
-### Phase 1 - Critical Infrastructure
-1. Fix NocoDB configuration in `nuxt.config.ts`
-2. Separate Events and RSVPs into different tables/functions
-3. Fix all TypeScript errors
-4. Ensure basic API endpoints work
-
-### Phase 2 - API Stability  
-1. Standardize API response formats
-2. Add proper validation and error handling
-3. Fix authentication integration
-4. Test all CRUD operations
-
-### Phase 3 - Frontend Polish
-1. Fix component error handling
-2. Add proper loading states
-3. Fix form validation
-4. Test calendar integration
-
-### Phase 4 - Integration Testing
-1. End-to-end event creation flow
-2. RSVP submission and management
-3. Calendar display and interaction
-4. Mobile responsiveness
-
-## RECOMMENDED APPROACH:
-
-1. **Stop using current events system** - it will cause data corruption
-2. **Fix configuration first** - add missing environment variables
-3. **Separate data models** - create proper Events and RSVPs tables
-4. **Rebuild API layer** - ensure consistency and reliability
-5. **Fix frontend components** - proper error handling and state management
-6. **Full integration testing** - ensure entire flow works end-to-end
-
-## ESTIMATED EFFORT:
-- **Critical fixes:** 4-6 hours
-- **Full system stability:** 8-12 hours  
-- **Polish and testing:** 4-6 hours
-- **Total:** 16-24 hours of focused development time
-
-## RISK ASSESSMENT:
-- **Current system:** HIGH RISK - will cause data loss/corruption
-- **After Phase 1 fixes:** MEDIUM RISK - basic functionality restored
-- **After Phase 2 fixes:** LOW RISK - production ready
-- **After Phase 3-4:** MINIMAL RISK - polished and tested

INTEGRATION_REVIEW.md

@@ -1,280 +0,0 @@
-# MonacoUSA Portal - Integration Review & Troubleshooting Guide
-
-## SMTP Email Integration Points
-
-### 1. Email Configuration Storage
-- **Location**: `server/utils/admin-config.ts`
-- **Storage**: Encrypted in `/app/data/admin-config.json` (Docker) or `./data/admin-config.json` (local)
-- **Fields**: host, port, secure, username, password, fromAddress, fromName
-
-### 2. Email Service Implementation
-- **Location**: `server/utils/email.ts`
-- **Features**:
-  - Auto-detects security settings based on port
-  - Increased timeouts (60 seconds) for slow servers
-  - Supports STARTTLS (port 587) and SSL/TLS (port 465)
-  - Authentication type set to 'login' for compatibility
-  - Accepts self-signed certificates
-
-### 3. Email Usage Points
-- **Registration**: `server/api/registration.post.ts` - Sends welcome email with verification link
-- **Portal Account Creation**: `server/api/members/[id]/create-portal-account.post.ts` - Sends welcome email
-- **Password Reset**: `server/api/auth/forgot-password.post.ts` - Sends password reset link
-- **Email Verification Resend**: `server/api/auth/send-verification-email.post.ts`
-- **Test Email**: `server/api/admin/test-email.post.ts` - Admin panel test
-
-### 4. Common SMTP Issues & Solutions
-
-#### Issue: "500 plugin timeout" / EAUTH errors
-**Solutions**:
-1. **Port 587 (STARTTLS)**:
-   - Set SSL/TLS: OFF
-   - Username: Full email address (noreply@monacousa.org)
-   - Password: Your SMTP password (not email password if different)
-
-2. **Port 465 (SSL/TLS)**:
-   - Set SSL/TLS: ON
-   - Same credentials as above
-
-3. **Port 25 (Unencrypted)**:
-   - Set SSL/TLS: OFF
-   - May not require authentication
-   - Not recommended for production
-
-4. **Alternative Configuration** for mail.monacousa.org:
-   - Try port 587 with SSL/TLS OFF
-   - Try port 465 with SSL/TLS ON
-   - Ensure username is full email address
-   - Some servers require app-specific passwords
-
-#### Issue: Connection timeouts
-**Solutions**:
-- Timeouts already increased to 60 seconds
-- Check firewall rules allow outbound connections on SMTP port
-- Verify DNS resolution of mail server
-
-#### Issue: Certificate errors
-**Solutions**:
-- Self-signed certificates are already accepted
-- TLS minimum version set to TLSv1 for compatibility
-
-### 5. Testing SMTP Without Email
-If SMTP cannot be configured, the system gracefully handles email failures:
-- Portal accounts are still created
-- Users can use "Forgot Password" to set initial password
-- Admin sees appropriate messages about email status
-
-## Keycloak Integration Points
-
-### 1. Authentication Flow
-- **Login**: `server/api/auth/keycloak/login.get.ts` - Redirects to Keycloak
-- **Callback**: `server/api/auth/keycloak/callback.get.ts` - Handles OAuth callback
-- **Session**: `server/utils/session.ts` - Manages encrypted sessions
-- **Logout**: `server/api/auth/logout.post.ts` - Clears session and Keycloak logout
-
-### 2. User Management
-- **Admin Client**: `server/utils/keycloak-admin.ts`
-- **Features**:
-  - Create users with role-based registration
-  - Update user attributes (membership data)
-  - Password reset functionality
-  - Email verification tokens
-  - User search by email
-
-### 3. Role-Based Access
-- **Tiers**: admin, board, user
-- **Middleware**:
-  - `middleware/auth.ts` - General authentication
-  - `middleware/auth-admin.ts` - Admin only
-  - `middleware/auth-board.ts` - Board and admin
-  - `middleware/auth-user.ts` - All authenticated users
-
-### 4. Member-Portal Sync
-- **Dual Database System**:
-  - NocoDB: Member records (source of truth)
-  - Keycloak: Authentication and portal accounts
-- **Sync Points**:
-  - Registration creates both records
-  - Portal account creation links existing member to Keycloak
-  - Member updates sync to Keycloak attributes
-
-### 5. Common Keycloak Issues & Solutions
-
-#### Issue: Login redirect loops
-**Solutions**:
-- Check `NUXT_KEYCLOAK_CALLBACK_URL` matches actual domain
-- Verify Keycloak client redirect URIs include callback URL
-- Ensure session secret is set and consistent
-
-#### Issue: User creation failures
-**Solutions**:
-- Check Keycloak admin credentials in environment
-- Verify realm exists and is accessible
-- Ensure email is unique in Keycloak
-
-#### Issue: Role assignment not working
-**Solutions**:
-- Verify realm roles exist: user, board, admin
-- Check client scope mappings include roles
-- Ensure token includes role claims
-
-## Environment Variables Required
-
-### Keycloak Configuration
-```env
-NUXT_KEYCLOAK_ISSUER=https://auth.monacousa.org/realms/monacousa-portal
-NUXT_KEYCLOAK_CLIENT_ID=monacousa-portal
-NUXT_KEYCLOAK_CLIENT_SECRET=your-client-secret
-NUXT_KEYCLOAK_CALLBACK_URL=https://monacousa.org/auth/callback
-NUXT_KEYCLOAK_ADMIN_USERNAME=admin
-NUXT_KEYCLOAK_ADMIN_PASSWORD=admin-password
-```
-
-### Session Security
-```env
-NUXT_SESSION_SECRET=48-character-secret-key
-NUXT_ENCRYPTION_KEY=32-character-encryption-key
-```
-
-### Public Configuration
-```env
-NUXT_PUBLIC_DOMAIN=monacousa.org
-```
-
-## Health Check Endpoints
-
-### System Health
-- **Endpoint**: `GET /api/health`
-- **Checks**:
-  - Database connectivity (NocoDB)
-  - Keycloak connectivity
-  - Session management
-  - File storage (if configured)
-
-## Troubleshooting Workflow
-
-### For SMTP Issues:
-1. Try port 587 with SSL/TLS OFF first
-2. If fails, try port 465 with SSL/TLS ON
-3. Check credentials (use full email as username)
-4. Test with personal Gmail/Outlook account to verify code works
-5. Check firewall/network restrictions
-6. Review server logs for specific error messages
-
-### For Keycloak Issues:
-1. Verify all environment variables are set
-2. Check Keycloak server is accessible
-3. Test with direct Keycloak login first
-4. Review browser console for redirect issues
-5. Check server logs for token/session errors
-6. Verify realm and client configuration in Keycloak admin
-
-## Manual SMTP Testing
-
-To manually test SMTP settings without the portal:
-
-### Using OpenSSL (for connection test):
-```bash
-# For STARTTLS (port 587)
-openssl s_client -starttls smtp -connect mail.monacousa.org:587
-
-# For SSL/TLS (port 465)
-openssl s_client -connect mail.monacousa.org:465
-```
-
-### Using Telnet (for basic connectivity):
-```bash
-telnet mail.monacousa.org 587
-```
-
-### Using swaks (comprehensive SMTP test):
-```bash
-swaks --to test@example.com \
-      --from noreply@monacousa.org \
-      --server mail.monacousa.org:587 \
-      --auth LOGIN \
-      --auth-user noreply@monacousa.org \
-      --auth-password yourpassword \
-      --tls
-```
-
-## Alternative Email Solutions
-
-If SMTP continues to fail:
-
-### 1. Use Gmail with App Password:
-- Enable 2FA on Gmail account
-- Generate app-specific password
-- Use smtp.gmail.com:587
-- Username: your gmail address
-- Password: app-specific password
-
-### 2. Use SendGrid (Free tier available):
-- Sign up at sendgrid.com
-- Create API key
-- Use smtp.sendgrid.net:587
-- Username: apikey (literal string)
-- Password: your API key
-
-### 3. Use Local Mail Server (Development):
-- Install MailHog or MailCatcher
-- No authentication required
-- Captures all emails locally
-- Perfect for testing
-
-## System Architecture
-
-```
-┌─────────────────┐     ┌──────────────┐     ┌─────────────┐
-│                 │────▶│              │────▶│             │
-│   Frontend      │     │   Nuxt API   │     │  Keycloak   │
-│   (Vue/Vuetify) │◀────│   Routes     │◀────│   Server    │
-│                 │     │              │     │             │
-└─────────────────┘     └──────────────┘     └─────────────┘
-                               │                     ▲
-                               │                     │
-                               ▼                     │
-                        ┌──────────────┐             │
-                        │              │             │
-                        │    NocoDB    │─────────────┘
-                        │   Database   │
-                        │              │
-                        └──────────────┘
-                               │
-                               ▼
-                        ┌──────────────┐
-                        │              │
-                        │     SMTP     │
-                        │    Server    │
-                        │              │
-                        └──────────────┘
-```
-
-## Production Checklist
-
-- [ ] All environment variables set correctly
-- [ ] SSL certificates valid and configured
-- [ ] Keycloak realm and client configured
-- [ ] NocoDB database accessible and configured
-- [ ] SMTP credentials tested and working
-- [ ] Session secrets are strong and unique
-- [ ] Firewall rules allow necessary ports
-- [ ] Backup strategy in place
-- [ ] Monitoring and logging configured
-- [ ] Health check endpoint monitored
-
-## Support Resources
-
-- **Keycloak Documentation**: https://www.keycloak.org/documentation
-- **NocoDB Documentation**: https://docs.nocodb.com
-- **Nodemailer Documentation**: https://nodemailer.com
-- **Nuxt 3 Documentation**: https://nuxt.com
-
-## Contact for Issues
-
-If you continue to experience issues after following this guide:
-1. Check server logs for detailed error messages
-2. Test each component independently
-3. Verify network connectivity and DNS resolution
-4. Review firewall and security group rules
-5. Consider using alternative email providers

MOBILE_BROWSER_RELOAD_LOOP_FIX_COMPLETE.md

@@ -1,144 +0,0 @@
-# Mobile Browser Reload Loop - Complete Fix
-
-## Problem Summary
-
-After fixing the initial email verification reload loop, the issue propagated to other auth pages:
-- **Email verification success page** constantly reloaded on mobile
-- **Password setup page** constantly reloaded on mobile
-- **Verification expired page** had similar issues
-
-## Root Cause Analysis
-
-The problem was **reactive computed properties** that watched `route.query` parameters:
-
-```typescript
-// PROBLEMATIC - causes reload loops on mobile
-const email = computed(() => route.query.email as string || '');
-const partialWarning = computed(() => route.query.warning === 'partial');
-const token = computed(() => route.query.token as string || '');
-const reason = computed(() => route.query.reason as string || 'expired');
-```
-
-In mobile browsers (especially Safari iOS), these reactive computeds can trigger infinite update loops:
-1. Page loads with route.query values
-2. Computed properties watch these values reactively
-3. Mobile browser reactivity can trigger spurious updates  
-4. Page reloads, cycle continues
-
-## Complete Solution Implemented
-
-### ✅ Fixed All Affected Pages
-
-**1. pages/auth/verify-success.vue**
-```typescript
-// BEFORE (reactive - causes loops)
-const email = computed(() => route.query.email as string || '');
-const partialWarning = computed(() => route.query.warning === 'partial');
-
-// AFTER (static - no loops)  
-const email = ref((route.query.email as string) || '');
-const partialWarning = ref(route.query.warning === 'partial');
-```
-
-**2. pages/auth/setup-password.vue**
-```typescript
-// BEFORE (reactive - causes loops)
-const email = computed(() => route.query.email as string || '');
-const token = computed(() => route.query.token as string || '');
-
-// AFTER (static - no loops)
-const email = ref((route.query.email as string) || '');
-const token = ref((route.query.token as string) || '');
-```
-
-**3. pages/auth/verify-expired.vue**
-```typescript
-// BEFORE (reactive - causes loops)
-const reason = computed(() => route.query.reason as string || 'expired');
-
-// AFTER (static - no loops)
-const reason = ref((route.query.reason as string) || 'expired');
-```
-
-**4. pages/auth/verify.vue**
-- ✅ Already fixed with comprehensive circuit breaker system
-- ✅ Uses static device detection and verification state management
-
-## Key Principle
-
-**Static Query Parameter Capture**: Instead of reactively watching route query parameters, capture them once on page load as static refs. This prevents mobile browser reactivity loops while maintaining functionality.
-
-## Testing Verified
-
-### ✅ Mobile Safari iOS
-- Email verification flow works end-to-end
-- Success page loads without reload loops
-- Password setup page works properly
-- All navigation functions correctly
-
-### ✅ Chrome Mobile Android  
-- All auth pages load without reload loops
-- Progressive navigation fallbacks work
-- Form submissions and redirects function properly
-
-### ✅ Desktop Browsers
-- All existing functionality preserved
-- No performance regressions
-- Enhanced error handling maintained
-
-## Files Modified
-
-**Auth Pages Fixed:**
-- `pages/auth/verify-success.vue` - Static email and warning refs
-- `pages/auth/setup-password.vue` - Static email and token refs  
-- `pages/auth/verify-expired.vue` - Static reason ref
-- `pages/auth/verify.vue` - Already had circuit breaker (no changes needed)
-
-**Supporting Infrastructure:**
-- `server/utils/email-tokens.ts` - Smart token consumption
-- `server/api/auth/verify-email.get.ts` - Enhanced error handling
-- `utils/verification-state.ts` - Circuit breaker system
-- All mobile Safari optimizations maintained
-
-## Mobile Browser Compatibility
-
-### Safari iOS 
-✅ No reload loops on any auth pages  
-✅ Proper navigation between pages  
-✅ Form submissions work correctly  
-✅ PWA functionality maintained  
-
-### Chrome Mobile
-✅ All auth flows work properly  
-✅ No performance issues  
-✅ Touch targets optimized  
-✅ Viewport handling correct  
-
-### Edge Mobile & Others
-✅ Progressive fallbacks ensure compatibility  
-✅ Static query handling works universally  
-✅ No browser-specific issues  
-
-## Deployment Ready
-
-- **Zero Breaking Changes**: All existing functionality preserved
-- **Backward Compatible**: Existing links and bookmarks still work  
-- **Performance Optimized**: Reduced reactive overhead on mobile
-- **Comprehensive Testing**: All auth flows verified on multiple devices
-
-## Success Metrics
-
-### Before Fix
-❌ Email verification success page: endless reload loops  
-❌ Password setup page: endless reload loops  
-❌ Mobile Safari: unusable auth experience  
-❌ High server load from repeated requests  
-
-### After Fix
-✅ All auth pages load successfully on mobile  
-✅ Complete end-to-end verification flow works  
-✅ Zero reload loops on any mobile browser  
-✅ Reduced server load with circuit breaker  
-✅ Enhanced user experience with clear error states  
-
-**Result**: The MonacoUSA Portal email verification and password setup flow now works flawlessly across all mobile browsers, providing a smooth user experience for account registration and verification.

MOBILE_RELOAD_LOOP_PREVENTION_COMPREHENSIVE.md

@@ -1,344 +0,0 @@
-# Mobile Safari Reload Loop Prevention - Comprehensive Solution
-
-## Overview
-
-This document describes the comprehensive reload loop prevention system implemented to resolve infinite reload loops on mobile Safari for the signup, email verification, and password setup pages. This solution builds upon previous fixes with advanced detection, prevention, and recovery mechanisms.
-
-## Problem Analysis
-
-### Root Causes Identified
-
-1. **Reactive Dependency Loops**: Vue's reactivity system creating cascading re-renders
-2. **Config Cache Corruption**: Race conditions in configuration loading
-3. **Mobile Safari Specific Issues**: 
-   - Aggressive back/forward cache (bfcache)
-   - Viewport handling inconsistencies
-   - Navigation timing issues
-4. **API Call Cascades**: Repeated config API calls triggering reload cycles
-5. **Error Propagation**: Unhandled errors causing page reloads
-
-## Solution Architecture
-
-### 1. Advanced Reload Loop Detection (`utils/reload-loop-prevention.ts`)
-
-**Core Features:**
-- **Page Load Tracking**: Monitors page load frequency per URL
-- **Circuit Breaker Pattern**: Automatically blocks pages after 5 loads in 10 seconds
-- **Emergency Mode**: 30-second block with user-friendly message
-- **Mobile Safari Integration**: Specific handling for Safari's bfcache and navigation quirks
-
-**Key Functions:**
-```typescript
-// Initialize protection for a page
-const canLoad = initReloadLoopPrevention('page-name');
-if (!canLoad) {
-  return; // Page blocked, show emergency message
-}
-
-// Check if a specific page is blocked
-const isBlocked = isPageBlocked('/auth/verify');
-
-// Get current status for debugging
-const status = getReloadLoopStatus();
-```
-
-### 2. Enhanced Config Cache Plugin (`plugins/04.config-cache-init.client.ts`)
-
-**New Features:**
-- **Reload Loop Integration**: Checks prevention system before initialization
-- **Advanced Error Handling**: Catches more error patterns
-- **API Call Monitoring**: Detects excessive API calls (>10 in 5 seconds)
-- **Performance Monitoring**: Tracks page reload events
-- **Visibility Change Handling**: Manages cache integrity when page visibility changes
-
-**Enhanced Protection:**
-```typescript
-// Comprehensive error patterns
-const isReloadLoop = (
-  msg.includes('Maximum call stack') ||
-  msg.includes('too much recursion') ||
-  msg.includes('RangeError') ||
-  msg.includes('Script error') ||
-  msg.includes('ResizeObserver loop limit exceeded') ||
-  msg.includes('Non-Error promise rejection captured')
-);
-```
-
-### 3. Page-Level Integration
-
-**Signup Page (`pages/signup.vue`):**
-- Reload loop check before all initialization
-- Timeout protection for config loading (10 seconds)
-- Enhanced error handling with cache cleanup
-- Graceful degradation to default values
-
-**Verification Page (`pages/auth/verify.vue`):**
-- Early reload loop prevention check
-- Integration with existing circuit breaker
-- Protected navigation with mobile delays
-
-**Password Setup Page (`pages/auth/setup-password.vue`):**
-- Immediate reload loop prevention
-- Protected initialization sequence
-
-## Key Improvements
-
-### 1. Early Detection System
-```typescript
-// Check BEFORE any initialization
-const { initReloadLoopPrevention } = await import('~/utils/reload-loop-prevention');
-const canLoad = initReloadLoopPrevention('page-name');
-
-if (!canLoad) {
-  console.error('Page load blocked by reload loop prevention system');
-  return; // Stop all initialization
-}
-```
-
-### 2. Mobile Safari Optimizations
-```typescript
-// Auto-applied mobile Safari fixes
-applyMobileSafariReloadLoopFixes();
-
-// Handles bfcache restoration
-window.addEventListener('pageshow', (event) => {
-  if (event.persisted) {
-    // Handle back/forward cache restoration
-  }
-});
-```
-
-### 3. Enhanced API Monitoring
-```typescript
-// Monitor fetch calls for loops
-window.fetch = function(input, init) {
-  // Track API call frequency
-  // Block excessive config API calls
-  // Log suspicious patterns
-  return originalFetch.call(this, input, init);
-};
-```
-
-### 4. Emergency User Interface
-When a reload loop is detected, users see:
-- Clear explanation of the issue
-- Estimated time until block is lifted (30 seconds)
-- Alternative navigation options (Home, Back)
-- Contact information for support
-
-## Testing Instructions
-
-### Manual Testing on Mobile Safari
-
-1. **Basic Load Test:**
-   ```bash
-   # Navigate to each page multiple times rapidly
-   /signup
-   /auth/verify?token=test
-   /auth/setup-password?email=test@test.com
-   ```
-
-2. **Reload Loop Simulation:**
-   ```javascript
-   // In browser console, simulate rapid reloads
-   for (let i = 0; i < 6; i++) {
-     window.location.reload();
-   }
-   ```
-
-3. **Config API Testing:**
-   ```javascript
-   // Test circuit breaker
-   for (let i = 0; i < 12; i++) {
-     fetch('/api/recaptcha-config');
-   }
-   ```
-
-### Automated Testing Commands
-
-```bash
-# Test page load times
-curl -w "%{time_total}" https://monacousa.org/signup
-
-# Monitor server logs for API calls
-tail -f /var/log/nginx/access.log | grep -E "(recaptcha-config|registration-config)"
-
-# Check browser console for prevention messages
-# Look for: [reload-prevention] messages
-```
-
-## Debugging & Monitoring
-
-### Browser Console Commands
-
-```javascript
-// Check reload loop status
-window.__reloadLoopStatus = () => {
-  const { getReloadLoopStatus } = require('~/utils/reload-loop-prevention');
-  console.table(getReloadLoopStatus());
-};
-
-// Check config cache status
-window.__configCacheStatus = () => {
-  console.log('Config Cache:', window.__configCache);
-  console.log('Initialized:', window.__configCacheInitialized);
-};
-
-// Clear prevention state (for testing)
-window.__clearReloadPrevention = () => {
-  const { clearReloadLoopPrevention } = require('~/utils/reload-loop-prevention');
-  clearReloadLoopPrevention();
-  console.log('Reload loop prevention cleared');
-};
-```
-
-### Server-Side Monitoring
-
-```bash
-# Monitor API call frequency
-grep -E "(recaptcha-config|registration-config)" /var/log/nginx/access.log | \
-awk '{print $4}' | sort | uniq -c | sort -nr
-
-# Check for error patterns
-tail -f /var/log/nginx/error.log | grep -E "(reload|loop|circuit)"
-```
-
-### Key Log Messages to Monitor
-
-**Successful Prevention:**
-```
-[reload-prevention] Page load allowed: signup-page (/signup)
-[config-cache-init] Comprehensive config cache and reload prevention plugin initialized successfully
-```
-
-**Loop Detection:**
-```
-[reload-prevention] Reload loop detected for /signup (6 loads)
-[reload-prevention] Page load blocked: signup-page (/signup)
-[config-cache-init] Config API loop detected! /api/recaptcha-config
-```
-
-**Recovery:**
-```
-[reload-prevention] Emergency block lifted for /signup
-```
-
-## Performance Impact
-
-### Before Implementation
-- **Mobile Safari**: 15+ page reloads, 30+ API calls
-- **Load Time**: 15-30 seconds (if it ever loaded)
-- **Success Rate**: <20% on mobile Safari
-
-### After Implementation
-- **Mobile Safari**: 1-2 page reloads maximum
-- **Load Time**: 2-5 seconds consistently
-- **Success Rate**: >95% on mobile Safari
-- **API Calls**: Max 2 per config type per session
-
-## Rollback Plan
-
-If issues arise, remove in this order:
-
-1. **Remove page-level checks:**
-   ```typescript
-   // Comment out in onMounted functions
-   // const canLoad = initReloadLoopPrevention('page-name');
-   ```
-
-2. **Revert plugin:**
-   ```bash
-   git checkout HEAD~1 -- plugins/04.config-cache-init.client.ts
-   ```
-
-3. **Remove prevention utility:**
-   ```bash
-   rm utils/reload-loop-prevention.ts
-   ```
-
-## Configuration Options
-
-### Environment Variables
-```env
-# Enable debug mode (development only)
-NUXT_RELOAD_PREVENTION_DEBUG=true
-
-# Adjust thresholds
-NUXT_RELOAD_PREVENTION_THRESHOLD=5
-NUXT_RELOAD_PREVENTION_WINDOW=10000
-NUXT_RELOAD_PREVENTION_BLOCK_TIME=30000
-```
-
-### Runtime Configuration
-```typescript
-// Adjust thresholds in utils/reload-loop-prevention.ts
-const RELOAD_LOOP_THRESHOLD = 5; // Max page loads
-const TIME_WINDOW = 10000; // Time window (ms)
-const EMERGENCY_BLOCK_TIME = 30000; // Block duration (ms)
-```
-
-## Mobile Browser Compatibility
-
-### Tested Browsers
-- **iOS Safari**: 15.0+ ✅
-- **iOS Chrome**: 110+ ✅
-- **Android Chrome**: 110+ ✅
-- **Android Firefox**: 115+ ✅
-- **Desktop Safari**: 16+ ✅
-
-### Browser-Specific Features
-- **iOS Safari**: bfcache handling, viewport fixes
-- **Android Chrome**: Performance optimizations
-- **All Mobile**: Touch-friendly error UI, reduced animations
-
-## Future Improvements
-
-### Phase 2 Enhancements
-1. **ML-Based Detection**: Learn user patterns to predict loops
-2. **Service Worker Integration**: Cache configs in service worker
-3. **Real-time Monitoring**: Dashboard for reload loop metrics
-4. **A/B Testing**: Test different threshold values
-5. **User Feedback**: Collect feedback on blocked experiences
-
-### Performance Optimizations
-1. **Config Preloading**: Preload configs during app initialization  
-2. **Smart Caching**: Intelligent cache invalidation
-3. **Progressive Enhancement**: Load features progressively
-4. **Bundle Optimization**: Lazy load prevention utilities
-
-## Support & Maintenance
-
-### Regular Maintenance Tasks
-1. **Weekly**: Review reload loop metrics
-2. **Monthly**: Analyze blocked user patterns
-3. **Quarterly**: Update mobile browser compatibility
-4. **Annually**: Review and optimize thresholds
-
-### Troubleshooting Guide
-
-**Issue: Page still reloading**
-- Check console for prevention messages
-- Verify plugin loading order
-- Test with cleared browser cache
-
-**Issue: False positive blocks**
-- Review threshold settings
-- Check for legitimate rapid navigation
-- Adjust time windows if needed
-
-**Issue: Users report blocked pages**
-- Check emergency block duration
-- Review user feedback channels
-- Consider threshold adjustments
-
-## Conclusion
-
-This comprehensive reload loop prevention system provides:
-
-1. **Proactive Detection**: Catches loops before they impact users
-2. **Graceful Degradation**: Provides alternatives when blocking occurs
-3. **Mobile Optimization**: Specifically tuned for mobile Safari issues
-4. **Developer Tools**: Rich debugging and monitoring capabilities
-5. **Future-Proof Architecture**: Extensible for additional features
-
-The solution transforms the mobile Safari experience from unreliable (20% success) to highly reliable (95%+ success) while maintaining performance and user experience standards.

MOBILE_SAFARI_KEYCLOAK_FIXES_SUMMARY.md

@@ -1,325 +0,0 @@
-# Mobile Safari & Keycloak Fixes - Complete Implementation Summary
-
-## ✅ **Issues Successfully Resolved**
-
-### **1. Mobile Safari Endless Reloading (Signup Page)**
-**Problem:** Signup page continuously reloading on Safari iPhone
-**Status:** ✅ FIXED
-
-### **2. Keycloak "Set Your Password" 404 Error**
-**Problem:** "Set Your Password" button leading to "Page not found" 
-**Status:** ✅ FIXED
-
-### **3. Country Dropdown Completely Broken on Mobile**
-**Problem:** Country selection dropdown overlapping with other elements, unusable interface
-**Status:** ✅ FIXED
-
----
-
-## 🔍 **Root Causes & Solutions**
-
-### **Mobile Safari Endless Reloading Issue**
-
-#### **Root Causes:**
-1. **Performance Overload:** Heavy `backdrop-filter: blur(15px)` causing GPU strain
-2. **Viewport Height Conflicts:** Incompatible `100vh` and `100dvh` units
-3. **Reactive Update Loops:** Complex `onMounted()` logic triggering re-renders
-4. **Background Image Performance:** Large images causing memory pressure
-5. **Promise Chain Failures:** API errors bubbling up and causing page reloads
-
-#### **Solutions Implemented:**
-```typescript
-// 1. Mobile Safari Detection System
-utils/mobile-safari-utils.ts
-- Device detection (mobile Safari, iOS, performance needs)
-- Backdrop-filter disabling for problematic devices
-- Viewport height optimization with CSS variables
-- Performance utilities (throttle, debounce)
-- Automatic CSS class application
-
-// 2. Performance Optimizations
-pages/signup.vue
-- Dynamic CSS classes based on device capabilities
-- Simplified onMounted() to prevent reload loops
-- Better error handling that doesn't cause page reloads
-- Fallback configurations to prevent undefined errors
-- Mobile-specific viewport meta tag
-
-// 3. Mobile Safari CSS Optimizations
-.performance-optimized {
-  backdrop-filter: none; /* Remove expensive filter */
-  background: rgba(255, 255, 255, 0.98) !important;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
-  transition: none; /* Remove animations */
-}
-
-// 4. Viewport Height Fix
-.is-mobile-safari {
-  min-height: -webkit-fill-available;
-  background-attachment: scroll !important;
-}
-```
-
-### **Keycloak "Set Your Password" 404 Error**
-
-#### **Root Causes:**
-1. **Missing Public Config:** `keycloakIssuer` not exposed to client-side
-2. **Incorrect URL Structure:** Using hash fragments that don't exist
-3. **Wrong Realm Name:** Using `monacousa-portal` instead of `monacousa`
-
-#### **Solutions Implemented:**
-```typescript
-// 1. Fixed Nuxt Config
-nuxt.config.ts
-public: {
-  keycloakIssuer: process.env.NUXT_KEYCLOAK_ISSUER || 
-    "https://auth.monacousa.org/realms/monacousa"
-}
-
-// 2. Fixed URL Generation
-pages/auth/verify-success.vue
-const setupPasswordUrl = computed(() => {
-  const runtimeConfig = useRuntimeConfig();
-  const keycloakIssuer = runtimeConfig.public.keycloakIssuer || 
-    'https://auth.monacousa.org/realms/monacousa';
-  
-  // Fixed: Remove hash fragment that caused 404
-  return `${keycloakIssuer}/account/`;
-});
-```
-
-### **Country Dropdown Broken on Mobile**
-
-#### **Root Causes:**
-1. **Vuetify v-select Issues:** Mobile Safari incompatibility with complex dropdown positioning
-2. **Z-index Conflicts:** Dropdown overlapping with other form elements
-3. **Touch Interaction Problems:** Poor touch responsiveness on mobile devices
-4. **Layout Disruption:** Dropdown breaking the form layout and rendering incorrectly
-
-#### **Solutions Implemented:**
-```typescript
-// 1. Mobile-Optimized Country Selector
-components/MultipleNationalityInput.vue
-- Device detection to switch between desktop v-select and mobile dialog
-- Full-screen country selection dialog for mobile Safari
-- Touch-optimized interface with larger touch targets
-- Search functionality with smooth scrolling
-
-// 2. Mobile Dialog Interface
-<v-dialog
-  v-model="showMobileSelector"
-  :fullscreen="useMobileInterface"
-  :transition="'dialog-bottom-transition'"
-  class="mobile-country-dialog"
->
-  <!-- Full-screen country list with search -->
-  <!-- Optimized for touch interaction -->
-  <!-- Smooth iOS-style animations -->
-</v-dialog>
-
-// 3. Performance Optimizations
-- Hardware acceleration for smooth scrolling
-- Disabled transitions for performance mode
-- Touch-friendly 60px minimum button heights
-- -webkit-overflow-scrolling: touch for iOS
-```
-
----
-
-## 📁 **Files Modified**
-
-### **New Files Created:**
-- `utils/mobile-safari-utils.ts` - Mobile Safari detection and optimization utilities
-- `plugins/03.mobile-safari-fixes.client.ts` - Auto-apply mobile Safari fixes
-
-### **Files Updated:**
-- `nuxt.config.ts` - Added public keycloakIssuer configuration
-- `pages/signup.vue` - Complete mobile Safari optimization
-- `pages/auth/verify-success.vue` - Fixed Keycloak URL + mobile Safari optimization
-
----
-
-## 🚀 **New Features Implemented**
-
-### **1. Device-Aware Optimization System**
-```typescript
-// Automatic device detection
-const deviceInfo = getDeviceInfo();
-const performanceMode = needsPerformanceOptimization();
-const disableBackdropFilter = shouldDisableBackdropFilter();
-
-// Dynamic CSS classes
-const containerClasses = [
-  'base-container',
-  ...getOptimizedClasses()  // Adds: is-mobile, is-mobile-safari, performance-mode
-].join(' ');
-```
-
-### **2. Progressive Performance Degradation**
-- **High-performance devices:** Full visual effects (backdrop-filter, animations)
-- **Mobile Safari:** Disabled backdrop-filter, simplified backgrounds
-- **Performance mode:** Removed animations, lighter shadows, no transitions
-
-### **3. Viewport Height Optimization**
-```css
-/* Universal viewport height handling */
-.container {
-  min-height: 100vh;
-  min-height: calc(var(--vh, 1vh) * 100); /* Mobile Safari fallback */
-}
-
-.is-mobile-safari .container {
-  min-height: -webkit-fill-available;
-}
-```
-
-### **4. Auto-Applied Mobile Safari Fixes**
-- Automatic viewport height calculation
-- CSS class injection
-- Resize event handling
-- Route change optimization
-
----
-
-## 🎯 **Expected Results**
-
-### **Signup Page (Mobile Safari)**
-✅ No more endless reloading
-✅ Smooth performance on mobile devices
-✅ Progressive visual degradation based on device capabilities
-✅ Proper viewport handling without scroll issues
-✅ Touch-friendly interface
-
-### **Verification Success Page**
-✅ "Set Your Password" button works correctly
-✅ Proper Keycloak account management redirection
-✅ Mobile Safari optimized layout
-✅ Performance-optimized animations and effects
-
----
-
-## 📱 **Mobile Safari Specific Optimizations**
-
-### **Performance Features:**
-- **Disabled backdrop-filter** on mobile Safari (major performance improvement)
-- **Simplified backgrounds** for low-powered devices
-- **Removed heavy animations** in performance mode
-- **Lighter box-shadows** and effects
-- **Hardware acceleration optimizations**
-
-### **Viewport Features:**
-- **CSS custom properties** for dynamic viewport height
-- **-webkit-fill-available** support for newer Safari versions
-- **Resize event handling** with debouncing
-- **Horizontal scroll prevention**
-
-### **Touch Optimizations:**
-- **48px minimum touch targets** for buttons
-- **Optimized button spacing** on mobile
-- **Touch-friendly hover states**
-- **Disabled zoom** on form inputs
-
----
-
-## ⚙️ **Technical Implementation Details**
-
-### **Device Detection Logic:**
-```typescript
-export function getDeviceInfo(): DeviceInfo {
-  const userAgent = navigator.userAgent;
-  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
-  const isIOS = /iPad|iPhone|iPod/.test(userAgent);
-  const isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
-  const isMobileSafari = isIOS && isSafari;
-  
-  return { isMobile, isSafari, isMobileSafari, isIOS, safariVersion };
-}
-```
-
-### **CSS Performance Classes:**
-```css
-/* Applied automatically based on device detection */
-.is-mobile { /* Mobile-specific optimizations */ }
-.is-mobile-safari { /* Safari-specific fixes */ }
-.is-ios { /* iOS-specific adjustments */ }
-.performance-mode { /* Performance optimizations */ }
-```
-
-### **Viewport Height Handling:**
-```javascript
-// Automatic viewport height calculation
-const setViewportHeight = () => {
-  const vh = window.innerHeight * 0.01;
-  document.documentElement.style.setProperty('--vh', `${vh}px`);
-};
-```
-
----
-
-## 🧪 **Testing Checklist**
-
-### **Mobile Safari Testing:**
-- [ ] Signup page loads without endless reloading
-- [ ] Form submission works correctly
-- [ ] Page scrolling is smooth
-- [ ] No horizontal scroll issues
-- [ ] Touch targets are appropriately sized
-
-### **Keycloak Integration Testing:**
-- [ ] "Set Your Password" button redirects correctly
-- [ ] Keycloak account management page loads
-- [ ] Password setup process works
-- [ ] Login flow continues normally after password setup
-
-### **Cross-Device Testing:**
-- [ ] Works on iPhone Safari
-- [ ] Works on Android Chrome
-- [ ] Works on desktop browsers
-- [ ] Performance optimizations activate appropriately
-
----
-
-## 📈 **Performance Improvements**
-
-### **Before Fixes:**
-- Heavy backdrop-filter causing 60%+ GPU usage
-- Viewport height conflicts causing layout thrashing
-- Complex reactive loops causing memory leaks
-- Broken Keycloak URLs causing user frustration
-
-### **After Fixes:**
-- ✅ 90%+ reduction in GPU usage on mobile Safari
-- ✅ Stable viewport handling without layout shifts
-- ✅ Clean initialization without reactive loops
-- ✅ Working Keycloak integration with proper URLs
-- ✅ Progressive performance degradation based on device capabilities
-
----
-
-## 🔄 **Automatic Features**
-
-The system now automatically:
-1. **Detects device capabilities** on page load
-2. **Applies appropriate CSS classes** for optimization
-3. **Sets viewport height variables** for mobile Safari
-4. **Handles resize events** with debouncing
-5. **Disables performance-heavy features** on constrained devices
-6. **Uses correct Keycloak URLs** based on configuration
-
----
-
-## 🎉 **Summary**
-
-Both critical issues have been comprehensively resolved:
-
-1. **Mobile Safari endless reloading** - Fixed with performance optimization system
-2. **Keycloak 404 error** - Fixed with proper URL configuration
-
-The MonacoUSA Portal now provides:
-- ✅ Reliable mobile Safari compatibility
-- ✅ Working Keycloak integration
-- ✅ Performance optimization for all devices
-- ✅ Progressive enhancement based on capabilities
-- ✅ Future-proof architecture for mobile web development
-
-The implementation is production-ready with comprehensive error handling, logging, and device-specific optimizations.

MOBILE_SAFARI_RELOAD_LOOP_FINAL_FIX.md

@@ -1,190 +0,0 @@
-# Mobile Safari Reload Loop - Final Fix
-
-## Problem Description
-Users on Safari iPhone experienced endless reload loops on:
-- Signup page (`/signup`)
-- Email verification page (`/auth/verify`)
-- Password setup page (`/auth/setup-password`)
-
-The server logs showed repeated calls to:
-- `/api/recaptcha-config`
-- `/api/registration-config`
-
-## Root Causes Identified
-
-### 1. Incorrect Reactive Reference in Signup Page
-**Issue**: `cardClasses` was defined as a ref containing a function instead of the function's result:
-```typescript
-// WRONG - causes reactivity issues
-const cardClasses = ref(() => {
-  const classes = ['signup-card'];
-  // ...
-  return classes.join(' ');
-});
-```
-
-**Fix**: Execute the function immediately and store the result:
-```typescript
-// CORRECT
-const cardClasses = ref((() => {
-  const classes = ['signup-card'];
-  // ...
-  return classes.join(' ');
-})()); // Note the immediate execution with ()
-```
-
-### 2. Config Cache Not Persisting Across Component Lifecycles
-**Issue**: The global config cache was using module-level variables that could be reset during Vue's reactivity cycles, causing repeated API calls.
-
-**Fix**: Use `window` object for true persistence:
-```typescript
-// Use window object for true persistence across component lifecycle
-function getGlobalCache(): ConfigCache {
-  if (typeof window === 'undefined') {
-    return defaultCache;
-  }
-  
-  if (!(window as any).__configCache) {
-    (window as any).__configCache = defaultCache;
-  }
-  
-  return (window as any).__configCache;
-}
-```
-
-### 3. Missing Circuit Breaker Protection
-**Issue**: No protection against rapid successive API calls that could trigger reload loops.
-
-**Fix**: Implemented circuit breaker with threshold protection:
-- Max 5 calls in 10-second window
-- Automatic blocking when threshold reached
-- Fallback to default values when blocked
-
-## Complete Solution Implementation
-
-### Files Modified
-
-1. **`pages/signup.vue`**
-   - Fixed `cardClasses` ref definition
-   - Ensured static device detection
-   - Added initialization flag to prevent multiple setups
-
-2. **`utils/config-cache.ts`**
-   - Moved cache storage to `window` object
-   - Added `getGlobalCache()` function for persistent storage
-   - Improved circuit breaker implementation
-   - Added proper logging for debugging
-
-3. **`plugins/04.config-cache-init.client.ts`** (NEW)
-   - Pre-initializes config cache structure
-   - Sets up global error handlers to catch reload loops
-   - Prevents multiple initializations
-   - Adds unhandled rejection handler
-
-## How The Fix Works
-
-### 1. Plugin Initialization (runs first)
-- `04.config-cache-init.client.ts` runs before other plugins
-- Initializes `window.__configCache` structure
-- Sets up error handlers to catch potential reload loops
-- Marks initialization complete with `window.__configCacheInitialized`
-
-### 2. Config Loading (on-demand)
-- When pages need config, they call `loadAllConfigs()`
-- Cache is checked first via `getGlobalCache()`
-- If cached, returns immediately (no API call)
-- If not cached, makes API call with circuit breaker protection
-- Results stored in `window.__configCache` for persistence
-
-### 3. Circuit Breaker Protection
-- Tracks API call history in time windows
-- Blocks calls if threshold exceeded (5 calls in 10 seconds)
-- Returns fallback values when blocked
-- Prevents cascade failures and reload loops
-
-## Testing Instructions
-
-### Test on Safari iPhone:
-1. Clear Safari cache and cookies
-2. Navigate to `/signup` - should load without reload loop
-3. Navigate to `/auth/verify?token=test` - should show error without loop
-4. Navigate to `/auth/setup-password?email=test@test.com` - should load without loop
-
-### Monitor Console Logs:
-- Look for `[config-cache-init]` messages confirming initialization
-- Check for `[config-cache] Returning cached` messages on subsequent loads
-- Watch for `Circuit breaker activated` if threshold reached
-
-### Server Logs:
-- Should see initial calls to `/api/recaptcha-config` and `/api/registration-config`
-- Should NOT see repeated calls in quick succession
-- Maximum 2-3 calls per page load (initial + retry if needed)
-
-## Prevention Measures
-
-### 1. Static Detection Pattern
-All device detection uses static, non-reactive patterns:
-```typescript
-const deviceInfo = getStaticDeviceInfo(); // Called once, never reactive
-const containerClasses = ref(getDeviceCssClasses('page-name')); // Computed once
-```
-
-### 2. Configuration Caching
-All configuration loading uses cached utility:
-```typescript
-const configs = await loadAllConfigs(); // Uses cache automatically
-```
-
-### 3. Initialization Flags
-Prevent multiple initializations:
-```typescript
-let initialized = false;
-onMounted(() => {
-  if (initialized) return;
-  initialized = true;
-  // ... initialization code
-});
-```
-
-## Monitoring
-
-### Key Metrics to Watch:
-1. **API Call Frequency**: `/api/recaptcha-config` and `/api/registration-config` should be called max once per session
-2. **Page Load Time**: Should be under 2 seconds on mobile
-3. **Error Rate**: No "Maximum call stack" or recursion errors
-4. **User Reports**: No complaints about infinite loading
-
-### Debug Commands:
-```javascript
-// Check cache status in browser console
-console.log(window.__configCache);
-console.log(window.__configCacheInitialized);
-
-// Force clear cache (for testing)
-window.__configCache = null;
-window.__configCacheInitialized = false;
-```
-
-## Rollback Plan
-
-If issues persist, rollback changes:
-1. Remove `plugins/04.config-cache-init.client.ts`
-2. Revert `utils/config-cache.ts` to previous version
-3. Revert `pages/signup.vue` changes
-
-## Long-term Improvements
-
-1. **Server-side caching**: Cache config in Redis/memory on server
-2. **SSR config injection**: Inject config during SSR to avoid client calls
-3. **PWA service worker**: Cache config in service worker
-4. **Config versioning**: Add version check to invalidate stale cache
-
-## Conclusion
-
-The mobile Safari reload loop has been resolved through:
-1. Fixing reactive reference bugs
-2. Implementing proper persistent caching
-3. Adding circuit breaker protection
-4. Setting up global error handlers
-
-The solution is backward compatible and doesn't affect desktop users or other browsers. The fix specifically targets the root causes while maintaining the existing functionality.

MOBILE_SAFARI_RELOAD_LOOP_FIX_IMPLEMENTATION.md

@@ -1,274 +0,0 @@
-# 🔄 Mobile Safari Reload Loop Fix - Implementation Complete
-
-## 🎯 Executive Summary
-
-**SUCCESS!** The endless reload loops on mobile Safari for the signup, email verification, and password reset pages have been **completely eliminated** by replacing reactive mobile detection with static, non-reactive alternatives.
-
-### ✅ Root Cause Identified & Fixed
-- **Problem**: Reactive `useMobileDetection` composable with global state that updated `viewportHeight` on every viewport change
-- **Result**: ALL components using the composable re-rendered simultaneously when mobile Safari viewport changed (virtual keyboard, touch, scroll)
-- **Solution**: Replaced with official @nuxt/device module and static detection patterns
-
-### ✅ Key Benefits Achieved
-- **🚀 No More Reload Loops**: Eliminated reactive cascade that caused infinite re-renders
-- **📱 Better Mobile Performance**: Static detection runs once vs. continuous reactive updates
-- **🔧 Professional Solution**: Using official @nuxt/device module (Trust Score 9.1) instead of custom reactive code
-- **🧹 Cleaner Architecture**: Removed complex reactive state management for simple static detection
-
----
-
-## 📋 Implementation Phases Completed
-
-### ✅ Phase 1: Architecture Analysis
-- **Status**: Complete
-- **Finding**: Confirmed `useMobileDetection` reactive global state as root cause
-- **Evidence**: `globalState.viewportHeight` updates triggered cascading re-renders
-
-### ✅ Phase 2: Install Nuxt Device Module  
-- **Status**: Complete
-- **Action**: `npx nuxi@latest module add device`
-- **Result**: Official @nuxtjs/device@3.2.4 installed successfully
-
-### ✅ Phase 3: Migrate Signup Page
-- **Status**: Complete
-- **Changes**: 
-  - Removed `useMobileDetection()` reactive composable
-  - Replaced `computed()` classes with static `ref()` 
-  - Used `useDevice()` from Nuxt Device Module in `onMounted()` only
-- **Result**: No more reactive subscriptions = No reload loops
-
-### ✅ Phase 4: Migrate Setup Password Page
-- **Status**: Complete  
-- **Changes**: Same pattern as signup page
-- **Result**: Static device detection, no reactive dependencies
-
-### ✅ Phase 5: Email Verification Page
-- **Status**: Complete (Already had static detection)
-- **Verification**: Confirmed no reactive mobile detection usage
-
-### ✅ Phase 6: Migrate Mobile Safari Plugin
-- **Status**: Complete
-- **Changes**: 
-  - Removed `useMobileDetection()` import
-  - Replaced with static user agent parsing
-  - No reactive subscriptions, runs once on plugin init
-- **Result**: Initial mobile Safari fixes without reactive state
-
-### ✅ Phase 7: CSS-Only Viewport Management
-- **Status**: Complete
-- **New File**: `utils/viewport-manager.ts`
-- **Features**:
-  - Updates `--vh` CSS custom property only (no Vue reactivity)
-  - Smart keyboard detection to prevent unnecessary updates
-  - Mobile Safari specific optimizations
-  - Auto-initializes on client side
-
-### ✅ Phase 8: Testing & Validation 
-- **Status**: 🔄 **Ready for User Testing**
-- **Test Plan**: See Testing Instructions below
-
-### ✅ Phase 9: Dependency Analysis & Research
-- **Status**: Complete
-- **Result**: Identified @nuxt/device as optimal solution
-- **Benefits**: Official support, no reactive state, better performance
-
-### ✅ Phase 10: Legacy Code Cleanup
-- **Status**: **COMPLETE** ✅
-- **Files Removed**: 
-  - `composables/useMobileDetection.ts` (reactive composable causing reload loops)
-  - `utils/mobile-safari-utils.ts` (redundant utility functions)
-- **Result**: Cleaner codebase using official @nuxt/device module
-
----
-
-## 🔧 Technical Implementation Details
-
-### Before (Problematic Reactive Pattern):
-```typescript
-// ❌ OLD: Reactive global state that caused reload loops
-const mobileDetection = useMobileDetection();
-const containerClasses = computed(() => {
-  const classes = ['signup-container'];
-  if (mobileDetection.isMobile) classes.push('is-mobile');
-  return classes.join(' '); // Re-runs on every viewport change!
-});
-```
-
-### After (Static Non-Reactive Pattern):
-```typescript
-// ✅ NEW: Static device detection, no reactive dependencies
-const { isMobile, isIos, isSafari } = useDevice();
-const containerClasses = ref('signup-container');
-
-onMounted(() => {
-  const classes = ['signup-container'];
-  if (isMobile) classes.push('is-mobile');
-  if (isMobile && isIos && isSafari) classes.push('is-mobile-safari');
-  containerClasses.value = classes.join(' '); // Runs once only!
-});
-```
-
-### Key Changes Made:
-
-#### 1. **pages/signup.vue**
-- ✅ Removed reactive `useMobileDetection()` 
-- ✅ Replaced `computed()` with static `ref()`
-- ✅ Added `useDevice()` in `onMounted()` for static detection
-- ✅ Fixed TypeScript issues with device property names
-
-#### 2. **pages/auth/setup-password.vue** 
-- ✅ Same pattern as signup page
-- ✅ Simplified password visibility toggle (no mobile-specific reactive logic)
-- ✅ Static device detection in `onMounted()`
-
-#### 3. **pages/auth/verify.vue**
-- ✅ Already had static detection (confirmed no issues)
-
-#### 4. **plugins/03.mobile-safari-fixes.client.ts**
-- ✅ Removed `useMobileDetection()` import
-- ✅ Replaced with static user agent parsing 
-- ✅ No reactive subscriptions, runs once only
-
-#### 5. **utils/viewport-manager.ts** (New)
-- ✅ CSS-only viewport height management
-- ✅ Updates `--vh` custom property without Vue reactivity
-- ✅ Smart keyboard detection and debouncing
-- ✅ Mobile Safari specific optimizations
-
----
-
-## 🧪 Testing Instructions
-
-### Phase 8: User Testing Required
-
-**Please test the following on mobile Safari (iPhone):**
-
-#### 1. **Signup Page** (`/signup`)
-- ✅ **Before**: Endless reload loops when interacting with form
-- 🔄 **Test Now**: Should load normally, no reloads when:
-  - Opening virtual keyboard
-  - Scrolling the page
-  - Rotating device
-  - Touching form fields
-  - Filling out the form
-
-#### 2. **Email Verification Links** 
-- ✅ **Before**: Reload loops when clicking verification emails
-- 🔄 **Test Now**: Should work normally:
-  - Click verification link from email
-  - Should navigate to verify page without loops
-  - Should process verification and redirect to success page
-
-#### 3. **Password Setup** (`/auth/setup-password`)
-- ✅ **Before**: Reload loops on password setup page  
-- 🔄 **Test Now**: Should work normally:
-  - Load page from email link
-  - Interact with password fields
-  - Toggle password visibility
-  - Submit password form
-
-#### 4. **Mobile Safari Optimizations Still Work**
-- 🔄 **Verify**: CSS `--vh` variable updates correctly
-- 🔄 **Verify**: Mobile classes still applied (`.is-mobile`, `.is-mobile-safari`)
-- 🔄 **Verify**: Viewport changes handled properly
-- 🔄 **Verify**: No console errors
-
-### Testing Checklist:
-- [ ] Signup page loads without reload loops
-- [ ] Email verification links work normally  
-- [ ] Password setup works without issues
-- [ ] Mobile Safari optimizations still functional
-- [ ] No console errors in browser dev tools
-- [ ] Form interactions work smoothly
-- [ ] Virtual keyboard doesn't cause reloads
-- [ ] Device rotation handled properly
-
----
-
-## 📊 Performance Improvements
-
-### Before Fix:
-- 🔴 **Reactive State**: Global state updated on every viewport change
-- 🔴 **Component Re-renders**: ALL components using composable re-rendered simultaneously
-- 🔴 **Viewport Events**: High-frequency updates caused cascading effects
-- 🔴 **Mobile Safari**: Extreme viewport sensitivity triggered continuous loops
-
-### After Fix:
-- 🟢 **Static Detection**: Device detection runs once per page load
-- 🟢 **No Re-renders**: Classes applied statically, no reactive dependencies  
-- 🟢 **CSS-Only Updates**: Viewport changes update CSS properties only
-- 🟢 **Optimized Mobile**: Smart debouncing and keyboard detection
-
-### Measured Benefits:
-- **🚀 Zero Reload Loops**: Complete elimination of the core issue
-- **📱 Better Performance**: Significantly reduced re-rendering overhead
-- **🔧 Simpler Code**: Less complex reactive state management
-- **💪 Official Support**: Using well-tested @nuxt/device module
-
----
-
-## 🎯 Solution Architecture 
-
-### Component Layer:
-```
-📱 Pages (signup, setup-password, verify)
-├── useDevice() - Static detection from @nuxt/device
-├── onMounted() - Apply classes once, no reactivity  
-└── ref() containers - Static class strings
-```
-
-### System Layer:
-```
-🔧 Plugin Layer (mobile-safari-fixes)  
-├── Static user agent parsing
-├── One-time initialization
-└── No reactive subscriptions
-
-📐 Viewport Management (viewport-manager.ts)
-├── CSS custom property updates only
-├── Smart keyboard detection  
-├── Debounced resize handling
-└── No Vue component reactivity
-```
-
-### Benefits:
-- **🎯 Targeted**: Mobile Safari specific optimizations without affecting other browsers
-- **🔒 Isolated**: No cross-component reactive dependencies 
-- **⚡ Performant**: Static detection vs. continuous reactive updates
-- **🧹 Clean**: Uses official modules vs. custom reactive code
-
----
-
-## 🚀 Next Steps
-
-### Immediate:
-1. **🧪 User Testing**: Test all affected pages on mobile Safari iPhone
-2. **✅ Validation**: Confirm reload loops are eliminated
-3. **🔍 Verification**: Ensure mobile optimizations still work
-
-### ✅ Cleanup Complete:
-1. **🧹 Cleanup**: ✅ **DONE** - Removed legacy reactive mobile detection files
-2. **📝 Documentation**: ✅ **DONE** - Implementation document updated
-3. **🎉 Deployment**: Ready for production deployment with confidence
-
-### Rollback Plan (if needed):
-- All original files are preserved  
-- Can revert individual components if issues found
-- Plugin and viewport manager are additive (can be disabled)
-
----
-
-## 🎊 Success Metrics
-
-This implementation successfully addresses:
-
-- ✅ **Primary Issue**: Mobile Safari reload loops completely eliminated
-- ✅ **Performance**: Significantly reduced component re-rendering  
-- ✅ **Maintainability**: Using official @nuxt/device module vs custom reactive code
-- ✅ **Architecture**: Clean separation of concerns, no reactive cascade
-- ✅ **Mobile UX**: All mobile Safari optimizations preserved
-- ✅ **Compatibility**: No impact on other browsers or desktop experience
-
-The MonacoUSA Portal signup, email verification, and password reset flows now work reliably on mobile Safari without any reload loop issues.
-
-**🎯 Mission Accomplished!** 🎯

PORTAL_FIXES_SUMMARY.md

@@ -1,142 +0,0 @@
-# MonacoUSA Portal Issues - Complete Fix Summary
-
-## 🎯 **Issues Resolved**
-
-### ✅ **Phase 1: Docker Template Inclusion (CRITICAL)**
-**Problem:** Email templates not included in Docker production builds, causing all email functionality to fail.
-
-**Solution Implemented:**
-- **File Modified:** `Dockerfile`
-- **Change:** Added `COPY --from=build /app/server/templates /app/server/templates`
-- **Impact:** Email templates now available in production container
-- **Status:** ✅ FIXED
-
-### ✅ **Phase 2: Portal Account Detection Bug (MODERATE)**
-**Problem:** User portal accounts not being detected properly - showing "No Portal Account" when account exists.
-
-**Solution Implemented:**
-- **File Modified:** `server/utils/nocodb.ts`
-- **Changes:**
-  - Added `'Keycloak ID': 'keycloak_id'` to readFieldMap
-  - Added `'keycloak_id': 'keycloak_id'` to readFieldMap  
-  - Added `'keycloak_id': 'Keycloak ID'` to writeFieldMap
-- **Impact:** Portal account status now displays correctly
-- **Status:** ✅ FIXED
-
-### ✅ **Phase 3: Enhanced Member Deletion with Keycloak Cleanup (IMPORTANT)**
-**Problem:** Member deletion only removed NocoDB records, leaving orphaned Keycloak accounts.
-
-**Solution Implemented:**
-- **Files Modified:**
-  - `server/utils/keycloak-admin.ts` - Added `deleteKeycloakUser()` helper function
-  - `server/api/members/[id].delete.ts` - Enhanced deletion logic
-- **Changes:**
-  - Retrieve member data before deletion to check for keycloak_id
-  - If keycloak_id exists, delete Keycloak user first
-  - Continue with NocoDB deletion regardless of Keycloak result
-  - Enhanced logging and error handling
-- **Impact:** Complete data cleanup on member deletion
-- **Status:** ✅ FIXED
-
-## 🚀 **Implementation Details**
-
-### Docker Template Fix
-```dockerfile
-# Added to Dockerfile
-COPY --from=build /app/server/templates /app/server/templates
-```
-
-### Portal Account Detection Fix
-```javascript
-// Added to field mappings in nocodb.ts
-'Keycloak ID': 'keycloak_id',
-'keycloak_id': 'keycloak_id',
-// ... in readFieldMap
-
-'keycloak_id': 'Keycloak ID'
-// ... in writeFieldMap
-```
-
-### Enhanced Member Deletion
-```javascript
-// New helper function
-export async function deleteKeycloakUser(userId: string): Promise<void>
-
-// Enhanced deletion logic
-1. Get member data to check keycloak_id
-2. If keycloak_id exists, delete Keycloak user
-3. Delete NocoDB record
-4. Log completion status
-```
-
-## 📊 **Impact Summary**
-
-| Issue | Severity | Status | Impact |
-|-------|----------|---------|--------|
-| Docker Templates | CRITICAL | ✅ FIXED | Email functionality restored |
-| Portal Detection | MODERATE | ✅ FIXED | UX improved, accounts display correctly |
-| Deletion Cleanup | IMPORTANT | ✅ FIXED | Data integrity maintained |
-
-## 🧪 **Testing Recommendations**
-
-### Phase 1 Testing (Docker Templates)
-1. Rebuild Docker container
-2. Check production logs for template loading
-3. Test email functionality:
-   - Create portal account (should send welcome email)
-   - Test email verification
-   - Test password reset
-
-### Phase 2 Testing (Portal Detection)
-1. Check member list for users with portal accounts
-2. Verify "Portal Account Active" chips display correctly
-3. Test with your own account
-
-### Phase 3 Testing (Enhanced Deletion)
-1. Create test member with portal account
-2. Delete member from admin panel
-3. Check logs for both NocoDB and Keycloak deletion
-4. Verify no orphaned accounts remain
-
-## 🔍 **Monitoring & Logging**
-
-All fixes include comprehensive logging:
-- Docker template loading logged at container startup
-- Portal account detection logged during member list retrieval  
-- Enhanced deletion logs both NocoDB and Keycloak operations
-
-## 🛡️ **Error Handling**
-
-- **Docker:** If templates fail to load, detailed error messages
-- **Portal Detection:** Graceful fallback to existing data
-- **Enhanced Deletion:** Continues NocoDB deletion even if Keycloak fails
-
-## ✨ **Additional Improvements**
-
-- Better error messages and status reporting
-- Comprehensive logging for debugging
-- Graceful handling of edge cases
-- Maintains backwards compatibility
-
----
-
-**All critical issues have been resolved!** The MonacoUSA Portal now has:
-- ✅ Working email functionality in production
-- ✅ Accurate portal account status display  
-- ✅ Complete member deletion with proper cleanup
-- ✅ Correct membership fee amount (€150/year)
-- ✅ Fixed email verification links pointing to correct domain
-
-## 🔧 **Additional Fixes Applied (Phase 4)**
-
-### **Issue 4: Incorrect Membership Fee Amount**
-**Problem:** Welcome email showed €50/year instead of €150/year
-**Fix:** Updated `server/templates/welcome.hbs`
-**Status:** ✅ FIXED
-
-### **Issue 5: 404 Error on Email Verification**
-**Problem:** Verification links pointed to `monacousa.org` instead of `portal.monacousa.org`
-**Fix:** Updated `nuxt.config.ts` domain configuration
-**Status:** ✅ FIXED
-
-The fixes are production-ready and include proper error handling and logging.

PWA_DISABLE_TEST_SUMMARY.md

@@ -1,118 +0,0 @@
-# PWA Disable Test - Mobile Safari Reload Loop Fix
-
-## Changes Made
-
-### 1. Disabled PWA Module (`nuxt.config.ts`)
-- Commented out `@vite-pwa/nuxt` module configuration
-- This eliminates service worker registration
-- Removes automatic updates and periodic sync
-
-### 2. Disabled Service Worker Unregistration (`plugins/02.unregister-sw.client.ts`)  
-- Commented out the service worker unregistration logic
-- Added logging to confirm plugin is disabled
-
-## Root Cause Theory
-
-**Service Worker Registration/Unregistration Conflict:**
-1. PWA module tries to register service worker
-2. Unregister plugin immediately removes it
-3. PWA module detects missing worker and re-registers
-4. Mobile Safari gets confused and reloads page
-5. **Infinite loop!**
-
-## Testing Instructions
-
-### Mobile Safari Test (iPhone/iPad)
-1. Clear Safari cache and cookies
-2. Navigate to these pages and verify NO reload loops:
-   - `/signup` 
-   - `/auth/verify?token=test`
-   - `/auth/setup-password?email=test@test.com`
-
-### Expected Results
-- **Before**: Endless page reloads, never fully loads
-- **After**: Pages load normally within 2-5 seconds
-
-### Console Logs to Look For
-```
-🚫 Service worker unregistration plugin disabled (PWA testing)
-```
-
-### What's Lost (Temporarily)
-- PWA installation capability
-- Offline functionality
-- Service worker caching
-- App-like behavior on mobile
-
-## Next Steps
-
-### If This Fixes the Issue:
-1. **Option A**: Keep PWA disabled (simplest)
-2. **Option B**: Configure PWA properly:
-   - Remove service worker unregistration plugin
-   - Change `registerType` from `autoUpdate` to `prompt` 
-   - Disable `periodicSyncForUpdates`
-   - Add proper service worker lifecycle handling
-
-### If Issue Persists:
-- Check for other causes:
-  - CSS backdrop-filter issues
-  - Large background images
-  - Vue reactivity loops
-  - Plugin conflicts
-
-## Re-enabling PWA (If Issue is Fixed)
-
-```typescript
-// In nuxt.config.ts - Better PWA configuration
-["@vite-pwa/nuxt", {
-  registerType: 'prompt',          // User-initiated instead of auto
-  workbox: {
-    globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
-    navigateFallback: '/',
-    navigateFallbackDenylist: [/^\/api\//]
-  },
-  client: {
-    installPrompt: true,
-    periodicSyncForUpdates: false   // Disable automatic sync
-  },
-  devOptions: {
-    enabled: false,                 // Disable in development
-    suppressWarnings: true
-  }
-  // ... rest of manifest config
-}]
-```
-
-## Rollback Instructions
-
-If you need to revert these changes:
-
-```bash
-# Restore nuxt.config.ts
-git checkout HEAD -- nuxt.config.ts
-
-# Restore service worker plugin  
-git checkout HEAD -- plugins/02.unregister-sw.client.ts
-```
-
-## Test Results
-
-**Date**: _______________  
-**Device**: _______________  
-**Browser**: _______________  
-
-- [ ] `/signup` loads without reload loop
-- [ ] `/auth/verify` loads without reload loop  
-- [ ] `/auth/setup-password` loads without reload loop
-- [ ] Form submission works normally
-- [ ] Navigation between pages works normally
-
-**Notes**: 
-_________________________________
-_________________________________
-_________________________________
-
-## Conclusion
-
-This simple fix eliminates the service worker conflict that was likely causing the mobile Safari reload loops. If this resolves the issue, we can either keep PWA disabled or implement a proper PWA configuration that doesn't conflict with page loading.

SAFARI_RELOAD_LOOP_FIX_COMPLETE.md

@@ -1,190 +0,0 @@
-# Safari iOS Reload Loop Fix - Complete Implementation
-
-## Problem Solved
-
-Fixed the endless reload loops on Safari iOS for three critical pages:
-- **Signup page** (`/signup`) - Primary issue causing repeated API calls
-- **Email verification page** (`/auth/verify`) 
-- **Password setup page** (`/auth/setup-password`)
-
-The logs showed repeated API calls to `/api/recaptcha-config` and `/api/registration-config` causing infinite reload cycles.
-
-## Root Cause Analysis
-
-The reload loops were caused by **Vue reactivity cycles** that triggered Safari iOS's aggressive memory management:
-
-1. **useDevice()** created reactive dependencies that triggered re-renders
-2. **API calls in onMounted()** updated reactive refs, causing more re-renders
-3. **Safari iOS memory management** interpreted frequent re-renders as memory pressure
-4. **Component unmounting/remounting** created infinite loops
-
-## Solution Implementation
-
-### 1. Created Static Device Detection Utility
-
-**File:** `utils/static-device-detection.ts`
-
-**Key Features:**
-- Non-reactive device detection using `navigator.userAgent`
-- Cached results to prevent multiple parsing
-- Mobile Safari specific optimization functions
-- Static CSS class generation
-- Functions: `getStaticDeviceInfo()`, `getDeviceCssClasses()`, `applyMobileSafariOptimizations()`
-
-### 2. Created Global Configuration Cache
-
-**File:** `utils/config-cache.ts`
-
-**Key Features:**
-- Singleton pattern preventing repeated API calls
-- Circuit breaker (max 5 calls per 10 seconds)
-- Proper error handling with fallback configurations
-- Functions: `getCachedRecaptchaConfig()`, `getCachedRegistrationConfig()`, `loadAllConfigs()`
-
-### 3. Fixed Signup Page
-
-**File:** `pages/signup.vue`
-
-**Critical Changes:**
-- **Switched to reCAPTCHA v2** (checkbox style) from v3
-- **Eliminated useDevice()** reactive dependencies
-- **Used static device detection** 
-- **Implemented cached config loading**
-- **Added initialization guards** to prevent multiple API calls
-- **Applied mobile Safari optimizations**
-
-### 4. Fixed Auth Pages
-
-**Files:** `pages/auth/verify.vue`, `pages/auth/setup-password.vue`
-
-**Changes Applied:**
-- Replaced `useDevice()` with static detection
-- Added mobile Safari optimizations
-- Removed reactive dependencies from initialization
-- Maintained existing functionality with better performance
-
-## reCAPTCHA v2 Implementation
-
-The signup page now uses **reCAPTCHA v2** (checkbox style) instead of v3:
-
-### Benefits:
-- ✅ **No background JavaScript execution** (unlike v3)
-- ✅ **Static widget** that doesn't trigger reactive cycles
-- ✅ **User-initiated** - only activates when clicked
-- ✅ **No automatic token generation** that could cause loops
-
-### Required Action:
-**You need to update your reCAPTCHA configuration** with the v2 site key you created:
-
-1. Update your environment variables with the new reCAPTCHA v2 keys:
-```env
-NUXT_RECAPTCHA_SITE_KEY=your-new-recaptcha-v2-site-key
-NUXT_RECAPTCHA_SECRET_KEY=your-new-recaptcha-v2-secret-key
-```
-
-2. Update the admin configuration in your portal dashboard
-
-## Technical Implementation Details
-
-### Static vs Reactive Detection
-
-**Before (Problematic):**
-```typescript
-const { isMobile, isIos, isSafari } = useDevice(); // Creates reactive dependencies
-const containerClasses = ref('signup-container'); // Reactive ref
-```
-
-**After (Fixed):**
-```typescript
-const deviceInfo = getStaticDeviceInfo(); // Static, cached
-const containerClasses = ref(getDeviceCssClasses('signup-container')); // Computed once
-```
-
-### API Call Prevention
-
-**Before (Problematic):**
-```typescript
-$fetch('/api/recaptcha-config').then((response) => {
-  recaptchaConfig.value = response.data; // Reactive update triggers re-render
-});
-```
-
-**After (Fixed):**
-```typescript
-const configs = await loadAllConfigs(); // Cached, singleton pattern
-recaptchaSiteKey = configs.recaptcha?.siteKey; // Static assignment
-```
-
-### Circuit Breaker Protection
-
-The config cache includes circuit breaker protection:
-- **Maximum 5 API calls per 10-second window**
-- **Automatic fallback to default configurations**
-- **Prevents API spam that was visible in logs**
-
-## Performance Optimizations
-
-### Mobile Safari Specific:
-- **Disabled backdrop filters** (expensive CSS operations)
-- **Reduced box shadows** for better performance
-- **Disabled CSS transitions** on mobile Safari
-- **Applied hardware acceleration optimizations**
-- **Set proper viewport height** using CSS variables
-
-### Memory Management:
-- **Eliminated reactive watchers** during initialization
-- **Static class computation** prevents re-calculations
-- **Proper component cleanup** on unmount
-- **Initialization guards** prevent duplicate setup
-
-## Testing Recommendations
-
-### 1. Manual Testing on Safari iOS:
-1. **Signup Page:** Verify no reload loops, reCAPTCHA v2 checkbox appears
-2. **Email Verification:** Test email verification links work smoothly
-3. **Password Setup:** Test password setup from email links
-
-### 2. Monitor Server Logs:
-- **No repeated API calls** to `/api/recaptcha-config` and `/api/registration-config`
-- **Circuit breaker warnings** should appear if there are still issues
-- **Proper initialization logging** from each page
-
-### 3. Browser Developer Tools:
-- **Network tab:** Should show minimal API calls
-- **Console:** Should show clean initialization logs
-- **Performance:** Reduced JavaScript execution on mobile
-
-## Files Modified
-
-### New Files Created:
-1. `utils/static-device-detection.ts` - Static device detection utility
-2. `utils/config-cache.ts` - Global configuration cache with circuit breaker
-3. `SAFARI_RELOAD_LOOP_FIX_COMPLETE.md` - This documentation
-
-### Files Updated:
-1. `pages/signup.vue` - Complete rewrite with reCAPTCHA v2 and static detection
-2. `pages/auth/verify.vue` - Updated with static device detection
-3. `pages/auth/setup-password.vue` - Updated with static device detection
-
-## Monitoring and Maintenance
-
-### Health Check:
-- Monitor `/api/health` endpoint for system stability
-- Check server logs for circuit breaker activations
-- Monitor user registration completion rates
-
-### Future Considerations:
-- **reCAPTCHA v3 can be restored** once Safari iOS issues are resolved
-- **Config cache can be extended** to other API endpoints if needed
-- **Static device detection** can be used in other components
-
-## Success Criteria
-
-✅ **No reload loops** on Safari iOS for affected pages  
-✅ **Reduced API call frequency** (circuit breaker protection)  
-✅ **Maintained functionality** of all registration/verification flows  
-✅ **Improved performance** on mobile Safari  
-✅ **reCAPTCHA v2 integration** working properly  
-✅ **Proper error handling** and fallbacks in place  
-
-The implementation provides a robust, production-ready solution that eliminates the Safari iOS reload loops while maintaining all existing functionality and improving overall performance.

assets/scss/components/_dashboards.scss

@@ -0,0 +1,474 @@
+// ============================================
+// Dashboard Component Styles
+// Professional enhancements for all dashboards
+// ============================================
+
+// Dashboard Container
+.admin-dashboard,
+.board-dashboard,
+.member-dashboard {
+  padding: 2rem;
+  min-height: 100vh;
+  background-color: #fafafa; // Fallback for browsers that don't support gradients
+  background-image: linear-gradient(135deg, #fafafa 0%, #f4f4f5 100%);
+  background: linear-gradient(135deg, #fafafa 0%, #f4f4f5 100%);
+  
+  @media (max-width: 768px) {
+    padding: 1rem;
+  }
+}
+
+// Enhanced Dashboard Header
+.dashboard-header {
+  text-align: center;
+  padding: 3rem 2rem;
+  margin-bottom: 2rem;
+  position: relative;
+  overflow: hidden;
+  
+  &.glass-header {
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    border-radius: 24px;
+    box-shadow: 
+      0 20px 40px rgba(0, 0, 0, 0.05),
+      inset 0 1px 0 rgba(255, 255, 255, 0.5);
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: -50%;
+      left: -50%;
+      width: 200%;
+      height: 200%;
+      background: radial-gradient(
+        circle,
+        rgba(220, 38, 38, 0.03) 0%,
+        transparent 70%
+      );
+      animation: float 20s ease-in-out infinite;
+    }
+  }
+  
+  .dashboard-title {
+    font-size: 3rem;
+    font-weight: 800;
+    margin-bottom: 0.5rem;
+    letter-spacing: -0.02em;
+    
+    &.text-gradient {
+      background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    
+    @media (max-width: 768px) {
+      font-size: 2rem;
+    }
+  }
+  
+  .dashboard-subtitle {
+    font-size: 1.125rem;
+    color: #64748b;
+    font-weight: 500;
+  }
+}
+
+// Enhanced Stat Cards
+.stat-card {
+  height: 100%;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  .stat-value {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #1f2937;
+    line-height: 1.2;
+    margin: 0.5rem 0;
+    
+    @media (max-width: 768px) {
+      font-size: 2rem;
+    }
+  }
+  
+  &:hover {
+    transform: translateY(-6px) scale(1.02);
+    box-shadow: 
+      0 25px 50px rgba(0, 0, 0, 0.15),
+      0 10px 30px rgba(220, 38, 38, 0.1);
+  }
+  
+  .v-avatar {
+    background: linear-gradient(135deg, 
+      rgba(var(--v-theme-on-surface), 0.05) 0%, 
+      rgba(var(--v-theme-on-surface), 0.02) 100%);
+  }
+}
+
+// Enhanced Glass Cards
+.glass-card {
+  background: rgba(255, 255, 255, 0.88) !important;
+  backdrop-filter: blur(16px) saturate(180%) !important;
+  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
+  border: 1px solid rgba(255, 255, 255, 0.3) !important;
+  box-shadow: 
+    0 10px 40px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
+  
+  &:hover {
+    box-shadow: 
+      0 20px 60px rgba(0, 0, 0, 0.12),
+      inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
+  }
+}
+
+// Enhanced Bento Grid
+.bento-grid {
+  display: grid !important;
+  grid-template-columns: repeat(12, 1fr) !important;
+  gap: 1.5rem !important;
+  margin-bottom: 2rem;
+  
+  .bento-item {
+    position: relative;
+    
+    &--small {
+      grid-column: span 3 !important;
+      
+      @media (max-width: 1280px) {
+        grid-column: span 6 !important;
+      }
+      
+      @media (max-width: 768px) {
+        grid-column: span 12 !important;
+      }
+    }
+    
+    &--medium {
+      grid-column: span 4 !important;
+      
+      @media (max-width: 1280px) {
+        grid-column: span 6 !important;
+      }
+      
+      @media (max-width: 768px) {
+        grid-column: span 12 !important;
+      }
+    }
+    
+    &--large {
+      grid-column: span 6 !important;
+      
+      @media (max-width: 768px) {
+        grid-column: span 12 !important;
+      }
+    }
+    
+    &--xlarge {
+      grid-column: span 8 !important;
+      
+      @media (max-width: 1280px) {
+        grid-column: span 12 !important;
+      }
+    }
+    
+    &--full {
+      grid-column: span 12 !important;
+    }
+  }
+}
+
+// Enhanced Data Tables
+.v-data-table {
+  background: transparent !important;
+  
+  .v-data-table__wrapper {
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    border-radius: 16px;
+    overflow: hidden;
+  }
+  
+  thead {
+    background: linear-gradient(135deg, 
+      rgba(220, 38, 38, 0.03) 0%, 
+      rgba(185, 28, 28, 0.01) 100%);
+    
+    th {
+      font-weight: 600 !important;
+      font-size: 0.75rem !important;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: #64748b !important;
+      padding: 1rem !important;
+    }
+  }
+  
+  tbody {
+    tr {
+      transition: all 0.2s ease;
+      
+      &:hover {
+        background: rgba(220, 38, 38, 0.02) !important;
+        
+        td {
+          color: #1f2937 !important;
+        }
+      }
+      
+      td {
+        padding: 1rem !important;
+        font-size: 0.875rem;
+        color: #475569;
+      }
+    }
+  }
+}
+
+// Enhanced Buttons in Dashboards
+.dashboard-action-btn {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.5);
+    transform: translate(-50%, -50%);
+    transition: width 0.6s, height 0.6s;
+  }
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.2);
+    
+    &::before {
+      width: 300px;
+      height: 300px;
+    }
+  }
+}
+
+// Activity Timeline Enhancement
+.activity-timeline {
+  .v-timeline-item {
+    &::before {
+      background: linear-gradient(180deg, 
+        rgba(220, 38, 38, 0.1) 0%, 
+        transparent 100%);
+    }
+    
+    .v-timeline-item__dot {
+      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
+    }
+  }
+}
+
+// Quick Actions Enhancement
+.quick-actions-card {
+  .v-btn {
+    margin: 0.25rem;
+    
+    &:hover {
+      transform: translateY(-2px);
+    }
+  }
+}
+
+// Enhanced Loading States
+.skeleton-loader {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.5) 25%,
+    rgba(255, 255, 255, 0.8) 50%,
+    rgba(255, 255, 255, 0.5) 75%
+  );
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  33% {
+    transform: translate(30px, -30px) rotate(120deg);
+  }
+  66% {
+    transform: translate(-20px, 20px) rotate(240deg);
+  }
+}
+
+// Animated Entrance
+.animated-entrance {
+  animation: slideInUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// Professional Typography in Dashboards
+.dashboard-section-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #1f2937;
+  margin-bottom: 1.5rem;
+  position: relative;
+  padding-left: 1rem;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 4px;
+    height: 24px;
+    background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
+    border-radius: 2px;
+  }
+}
+
+// Status Badges Enhancement
+.status-badge {
+  padding: 0.25rem 0.75rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  
+  &--active {
+    background: linear-gradient(135deg, 
+      rgba(34, 197, 94, 0.1) 0%, 
+      rgba(34, 197, 94, 0.05) 100%);
+    color: #16a34a;
+    border: 1px solid rgba(34, 197, 94, 0.2);
+  }
+  
+  &--pending {
+    background: linear-gradient(135deg, 
+      rgba(245, 158, 11, 0.1) 0%, 
+      rgba(245, 158, 11, 0.05) 100%);
+    color: #ca8a04;
+    border: 1px solid rgba(245, 158, 11, 0.2);
+  }
+  
+  &--inactive {
+    background: linear-gradient(135deg, 
+      rgba(107, 114, 128, 0.1) 0%, 
+      rgba(107, 114, 128, 0.05) 100%);
+    color: #6b7280;
+    border: 1px solid rgba(107, 114, 128, 0.2);
+  }
+}
+
+// Chart Card Enhancement
+.chart-card {
+  .chart-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    
+    .chart-title {
+      font-size: 1.125rem;
+      font-weight: 600;
+      color: #1f2937;
+    }
+    
+    .chart-subtitle {
+      font-size: 0.875rem;
+      color: #64748b;
+      margin-top: 0.25rem;
+    }
+  }
+  
+  .chart-body {
+    padding: 1.5rem;
+    position: relative;
+  }
+}
+
+// Responsive Improvements
+@media (max-width: 768px) {
+  .dashboard-header {
+    padding: 2rem 1rem;
+    
+    .dashboard-title {
+      font-size: 1.75rem;
+    }
+    
+    .dashboard-subtitle {
+      font-size: 1rem;
+    }
+  }
+  
+  .bento-grid {
+    gap: 1rem !important;
+  }
+  
+  .stat-card {
+    .stat-value {
+      font-size: 1.75rem;
+    }
+  }
+}
+
+// Dark Mode Support
+@media (prefers-color-scheme: dark) {
+  .admin-dashboard,
+  .board-dashboard,
+  .member-dashboard {
+    background: linear-gradient(135deg, #18181b 0%, #27272a 100%);
+  }
+  
+  .dashboard-header.glass-header {
+    background: rgba(30, 30, 30, 0.9);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+  
+  .glass-card {
+    background: rgba(30, 30, 30, 0.88) !important;
+    border-color: rgba(255, 255, 255, 0.1) !important;
+  }
+  
+  .dashboard-title.text-gradient {
+    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+  
+  .stat-value,
+  .dashboard-section-title {
+    color: #f4f4f5;
+  }
+}

assets/scss/design-system-v2.scss

@@ -0,0 +1,652 @@
+// Monaco USA Portal - Design System v2.0
+// Addressing critical issues from visual audit
+
+// ============================================
+// 1. COLOR PALETTE - Standardized
+// ============================================
+
+// Brand Colors
+$monaco-red: #DC143C;
+$monaco-red-dark: #B91C3C;
+$monaco-red-light: #FF6B8A;
+$monaco-white: #FFFFFF;
+$monaco-gold: #FFD700;
+
+// Primary color variations (for dashboard-v2 compatibility)
+$primary-600: #dc2626;  // Same as refined Monaco red
+$primary-700: #b91c1c;  // Same as monaco-red-dark
+$primary-800: #991b1b;  // Darker shade
+
+// Semantic Colors
+$color-success: #10B981;
+$color-warning: #F59E0B;
+$color-error: #EF4444;
+$color-info: #3B82F6;
+
+// Semantic color variations (for dashboard-v2 compatibility)
+$success-500: #10B981;
+$warning-500: #F59E0B;
+$error-500: #EF4444;
+$info-500: #3B82F6;
+$blue-500: #3B82F6;  // Same as info color
+$blue-600: #2563EB;  // Slightly darker blue
+
+// Neutral Palette
+$neutral-900: #0F172A;
+$neutral-800: #1E293B;
+$neutral-700: #334155;
+$neutral-600: #475569;
+$neutral-500: #64748B;
+$neutral-400: #94A3B8;
+$neutral-300: #CBD5E1;
+$neutral-200: #E2E8F0;
+$neutral-100: #F1F5F9;
+$neutral-50: #F8FAFC;
+
+// Glass Morphism
+$glass-white: rgba(255, 255, 255, 0.1);
+$glass-white-hover: rgba(255, 255, 255, 0.15);
+$glass-border: rgba(255, 255, 255, 0.2);
+$glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+
+// ============================================
+// 2. TYPOGRAPHY - Consistent Hierarchy
+// ============================================
+
+// Font Family
+$font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-mono: 'Fira Code', 'Monaco', monospace;
+
+// Font Sizes - Using rem for accessibility
+$text-xs: 0.75rem;    // 12px
+$text-sm: 0.875rem;   // 14px
+$text-base: 1rem;     // 16px
+$text-lg: 1.125rem;   // 18px
+$text-xl: 1.25rem;    // 20px
+$text-2xl: 1.5rem;    // 24px
+$text-3xl: 1.875rem;  // 30px
+$text-4xl: 2.25rem;   // 36px
+$text-4xl: 2.25rem;   // 36px
+$text-5xl: 3rem;      // 48px
+
+// Line Heights
+$leading-none: 1;
+$leading-tight: 1.2;
+$leading-snug: 1.375;
+$leading-normal: 1.6;
+$leading-relaxed: 1.75;
+$leading-loose: 2;
+
+// Font Weights
+$font-light: 300;
+$font-regular: 400;
+$font-medium: 500;
+$font-semibold: 600;
+$font-bold: 700;
+$font-extrabold: 800;
+
+// ============================================
+// 3. SPACING SYSTEM - 8px Grid
+// ============================================
+
+$space-px: 1px;
+$space-0: 0;
+$space-1: 0.25rem;  // 4px
+$space-2: 0.5rem;   // 8px
+$space-3: 0.75rem;  // 12px
+$space-4: 1rem;     // 16px
+$space-5: 1.25rem;  // 20px
+$space-6: 1.5rem;   // 24px
+$space-7: 1.75rem;  // 28px
+$space-8: 2rem;     // 32px
+$space-10: 2.5rem;  // 40px
+$space-12: 3rem;    // 48px
+$space-16: 4rem;    // 64px
+$space-20: 5rem;    // 80px
+$space-24: 6rem;    // 96px
+
+// ============================================
+// 4. BORDER RADIUS - Consistent Curves
+// ============================================
+
+$radius-none: 0;
+$radius-sm: 0.25rem;   // 4px
+$radius-md: 0.5rem;    // 8px
+$radius-lg: 0.75rem;   // 12px
+$radius-xl: 1rem;      // 16px
+$radius-2xl: 1.5rem;   // 24px
+$radius-full: 9999px;
+
+// ============================================
+// 5. SHADOWS - Depth System
+// ============================================
+
+$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
+$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+$shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
+$shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
+$shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
+$shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1);
+
+// Additional shadows for dashboard-v2 compatibility
+$shadow-inset-sm: inset 0 1px 3px rgba(0, 0, 0, 0.08);
+$shadow-soft-md: 0 4px 12px rgba(0, 0, 0, 0.05);
+
+// ============================================
+// 6. BREAKPOINTS - Mobile First
+// ============================================
+
+$breakpoint-sm: 640px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 1024px;
+$breakpoint-xl: 1280px;
+$breakpoint-2xl: 1536px;
+
+@mixin sm {
+  @media (min-width: $breakpoint-sm) { @content; }
+}
+
+@mixin md {
+  @media (min-width: $breakpoint-md) { @content; }
+}
+
+@mixin lg {
+  @media (min-width: $breakpoint-lg) { @content; }
+}
+
+@mixin xl {
+  @media (min-width: $breakpoint-xl) { @content; }
+}
+
+@mixin xxl {
+  @media (min-width: $breakpoint-2xl) { @content; }
+}
+
+// ============================================
+// 7. TRANSITIONS - Smooth Interactions
+// ============================================
+
+$ease-linear: linear;
+$ease-in: cubic-bezier(0.4, 0, 1, 1);
+$ease-out: cubic-bezier(0, 0, 0.2, 1);
+$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+$ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+// Additional easing for dashboard-v2 compatibility
+$spring-smooth: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+$duration-fast: 150ms;
+$duration-normal: 250ms;
+$duration-slow: 350ms;
+$duration-slower: 500ms;
+
+// Common transition for dashboard-v2 compatibility
+$transition-base: all $duration-normal $ease-out;
+$transition-fast: all $duration-fast $ease-out;
+
+// ============================================
+// 8. Z-INDEX SCALE - Layering System
+// ============================================
+
+$z-negative: -1;
+$z-0: 0;
+$z-10: 10;
+$z-20: 20;
+$z-30: 30;
+$z-40: 40;
+$z-50: 50;
+$z-dropdown: 1000;
+$z-sticky: 1020;
+$z-fixed: 1030;
+$z-modal-backdrop: 1040;
+$z-modal: 1050;
+$z-popover: 1060;
+$z-tooltip: 1070;
+$z-notification: 1080;
+
+// ============================================
+// 9. IMPROVED GLASS EFFECT MIXIN
+// ============================================
+
+@mixin glass-effect(
+  $blur: 10px, 
+  $opacity: 0.1, 
+  $border-opacity: 0.2,
+  $shadow: true
+) {
+  background: rgba(255, 255, 255, $opacity);
+  
+  @supports (backdrop-filter: blur($blur)) or (-webkit-backdrop-filter: blur($blur)) {
+    backdrop-filter: blur($blur);
+    -webkit-backdrop-filter: blur($blur);
+  }
+  
+  border: 1px solid rgba(255, 255, 255, $border-opacity);
+  
+  @if $shadow {
+    box-shadow: $shadow-glass;
+  }
+  
+  transition: all $duration-normal $ease-out;
+  
+  &:hover {
+    background: rgba(255, 255, 255, $opacity + 0.05);
+    border-color: rgba(255, 255, 255, $border-opacity + 0.1);
+    
+    @if $shadow {
+      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+    }
+  }
+}
+
+// ============================================
+// 10. NEUMORPHIC & MORPHING MIXINS - Dashboard V2 Compatibility
+// ============================================
+
+@mixin neumorphic-card($size: 'md') {
+  $depth: 6px;
+  $blur: 12px;
+  
+  @if $size == 'sm' {
+    $depth: 4px;
+    $blur: 8px;
+  } @else if $size == 'lg' {
+    $depth: 8px;
+    $blur: 16px;
+  }
+  
+  background: linear-gradient(145deg, #ffffff, #f5f5f5);
+  box-shadow: 
+    $depth $depth $blur rgba(0, 0, 0, 0.1),
+    (-$depth) (-$depth) $blur rgba(255, 255, 255, 0.7);
+  border-radius: $radius-xl;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  transition: all $duration-normal $ease-out;
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 
+      ($depth + 2px) ($depth + 2px) ($blur + 4px) rgba(0, 0, 0, 0.15),
+      (-$depth - 2px) (-$depth - 2px) ($blur + 4px) rgba(255, 255, 255, 0.8);
+  }
+}
+
+@mixin morphing-dropdown() {
+  position: relative;
+  background: linear-gradient(145deg, #ffffff, #f5f5f5);
+  border-radius: $radius-lg;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 
+    inset 2px 2px 5px rgba(0, 0, 0, 0.05),
+    inset -2px -2px 5px rgba(255, 255, 255, 0.9);
+  transition: all $duration-normal $ease-out;
+  
+  &:focus-within {
+    box-shadow: 
+      inset 3px 3px 8px rgba(0, 0, 0, 0.1),
+      inset -3px -3px 8px rgba(255, 255, 255, 0.95);
+  }
+}
+
+@mixin neumorphic-button() {
+  background: linear-gradient(145deg, #ffffff, #f5f5f5);
+  box-shadow: 
+    4px 4px 8px rgba(0, 0, 0, 0.1),
+    -4px -4px 8px rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: $radius-lg;
+  transition: all $duration-fast $ease-out;
+  
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 
+      6px 6px 12px rgba(0, 0, 0, 0.12),
+      -6px -6px 12px rgba(255, 255, 255, 0.8);
+  }
+  
+  &:active {
+    transform: translateY(0);
+    box-shadow: 
+      inset 2px 2px 5px rgba(0, 0, 0, 0.1),
+      inset -2px -2px 5px rgba(255, 255, 255, 0.9);
+  }
+}
+
+@mixin responsive($breakpoint) {
+  @media (min-width: $breakpoint) {
+    @content;
+  }
+}
+
+// ============================================
+// 11. COMPONENT CLASSES - Reusable Styles
+// ============================================
+
+// Cards
+.card-base {
+  @include glass-effect(12px, 0.08, 0.18, true);
+  border-radius: $radius-xl;
+  padding: $space-6;
+  margin-bottom: $space-4;
+  
+  @include md {
+    padding: $space-8;
+  }
+}
+
+// Buttons
+@mixin button-base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: $space-2;
+  padding: $space-3 $space-6;
+  border-radius: $radius-lg;
+  font-weight: $font-medium;
+  transition: all $duration-normal $ease-out;
+  cursor: pointer;
+  border: 1px solid transparent;
+  
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  &:focus-visible {
+    outline: 2px solid $monaco-red;
+    outline-offset: 2px;
+  }
+}
+
+.btn-primary {
+  @include button-base;
+  background: linear-gradient(135deg, $monaco-red 0%, $monaco-red-dark 100%);
+  color: white;
+  
+  &:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba($monaco-red, 0.3);
+  }
+  
+  &:active:not(:disabled) {
+    transform: translateY(0);
+  }
+}
+
+.btn-secondary {
+  @include button-base;
+  background: $neutral-100;
+  color: $neutral-800;
+  border-color: $neutral-300;
+  
+  &:hover:not(:disabled) {
+    background: $neutral-200;
+    border-color: $neutral-400;
+  }
+}
+
+.btn-ghost {
+  @include button-base;
+  background: transparent;
+  color: $neutral-600;
+  
+  &:hover:not(:disabled) {
+    background: $neutral-100;
+    color: $neutral-800;
+  }
+}
+
+// Typography Classes
+.heading-1 {
+  font-size: $text-4xl;
+  font-weight: $font-bold;
+  line-height: $leading-tight;
+  color: $neutral-900;
+  
+  @include md {
+    font-size: $text-5xl;
+  }
+}
+
+.heading-2 {
+  font-size: $text-3xl;
+  font-weight: $font-semibold;
+  line-height: $leading-tight;
+  color: $neutral-900;
+  
+  @include md {
+    font-size: $text-4xl;
+  }
+}
+
+.heading-3 {
+  font-size: $text-2xl;
+  font-weight: $font-semibold;
+  line-height: $leading-snug;
+  color: $neutral-800;
+}
+
+.heading-4 {
+  font-size: $text-xl;
+  font-weight: $font-medium;
+  line-height: $leading-snug;
+  color: $neutral-800;
+}
+
+.body-text {
+  font-size: $text-base;
+  line-height: $leading-normal;
+  color: $neutral-700;
+}
+
+.small-text {
+  font-size: $text-sm;
+  line-height: $leading-normal;
+  color: $neutral-600;
+}
+
+// ============================================
+// 12. LAYOUT UTILITIES
+// ============================================
+
+.container {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 $space-4;
+  
+  @include md {
+    padding: 0 $space-6;
+  }
+  
+  @include lg {
+    padding: 0 $space-8;
+  }
+}
+
+.grid {
+  display: grid;
+  gap: $space-4;
+  
+  &.grid-cols-1 {
+    grid-template-columns: repeat(1, 1fr);
+  }
+  
+  @include md {
+    &.md\:grid-cols-2 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+  
+  @include lg {
+    &.lg\:grid-cols-3 {
+      grid-template-columns: repeat(3, 1fr);
+    }
+    
+    &.lg\:grid-cols-4 {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+}
+
+.flex {
+  display: flex;
+  
+  &.flex-col {
+    flex-direction: column;
+  }
+  
+  &.items-center {
+    align-items: center;
+  }
+  
+  &.justify-between {
+    justify-content: space-between;
+  }
+  
+  &.gap-2 {
+    gap: $space-2;
+  }
+  
+  &.gap-4 {
+    gap: $space-4;
+  }
+}
+
+// ============================================
+// 13. ANIMATION CLASSES
+// ============================================
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.animate-fadeIn {
+  animation: fadeIn $duration-normal $ease-out;
+}
+
+.animate-slideIn {
+  animation: slideIn $duration-slow $ease-out;
+}
+
+.animate-pulse {
+  animation: pulse 2s $ease-in-out infinite;
+}
+
+// ============================================
+// 14. ACCESSIBILITY UTILITIES
+// ============================================
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.focus-visible {
+  &:focus-visible {
+    outline: 2px solid $monaco-red;
+    outline-offset: 2px;
+    border-radius: $radius-sm;
+  }
+}
+
+// ============================================
+// 15. STATUS INDICATORS
+// ============================================
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: $space-1 $space-3;
+  border-radius: $radius-full;
+  font-size: $text-xs;
+  font-weight: $font-semibold;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  
+  &.status-overdue {
+    background: rgba($color-error, 0.1);
+    color: $color-error;
+    border: 1px solid rgba($color-error, 0.2);
+  }
+  
+  &.status-pending {
+    background: rgba($color-warning, 0.1);
+    color: $color-warning;
+    border: 1px solid rgba($color-warning, 0.2);
+  }
+  
+  &.status-paid {
+    background: rgba($color-success, 0.1);
+    color: $color-success;
+    border: 1px solid rgba($color-success, 0.2);
+  }
+}
+
+// ============================================
+// 16. LOADING STATES
+// ============================================
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    $neutral-200 25%,
+    $neutral-100 50%,
+    $neutral-200 75%
+  );
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+  border-radius: $radius-md;
+  
+  &.skeleton-text {
+    height: $space-4;
+    margin-bottom: $space-2;
+  }
+  
+  &.skeleton-card {
+    height: 120px;
+    margin-bottom: $space-4;
+  }
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}

components/AddMemberDialog.vue

@@ -159,6 +159,8 @@
                 variant="outlined"
                 :error="hasFieldError('Membership Date Paid')"
                 :error-messages="getFieldError('Membership Date Paid')"
+                hint="Enter the actual date when dues were paid (can be historical)"
+                persistent-hint
               />
             </v-col>
             
@@ -170,8 +172,29 @@
                 variant="outlined"
                 :error="hasFieldError('Payment Due Date')"
                 :error-messages="getFieldError('Payment Due Date')"
+                hint="Enter when payment is due (for new members in grace period)"
+                persistent-hint
               />
             </v-col>
+
+            <!-- Dues Status Preview -->
+            <v-col cols="12" v-if="duesPaid && form['Membership Date Paid']">
+              <v-card variant="tonal" :color="calculatedDuesStatus.color" class="pa-3">
+                <div class="d-flex align-center">
+                  <v-icon :color="calculatedDuesStatus.color" class="mr-2">
+                    {{ calculatedDuesStatus.icon }}
+                  </v-icon>
+                  <div>
+                    <div class="text-subtitle-2 font-weight-bold">
+                      Calculated Dues Status: {{ calculatedDuesStatus.text }}
+                    </div>
+                    <div class="text-caption">
+                      {{ calculatedDuesStatus.message }}
+                    </div>
+                  </div>
+                </div>
+              </v-card>
+            </v-col>
           </v-row>
         </v-form>
       </v-card-text>
@@ -201,7 +224,8 @@
 
 <script setup lang="ts">
 import type { Member } from '~/utils/types';
-import { formatBooleanAsString } from '~/server/utils/nocodb';
+import { formatBooleanAsString } from '~/utils/client-utils';
+import { isPaymentOverOneYear, isDuesActuallyCurrent, calculateOverdueDays } from '~/utils/dues-calculations';
 
 interface Props {
   modelValue: boolean;
@@ -243,23 +267,69 @@ const phoneData = ref(null);
 // Error handling
 const fieldErrors = ref<Record<string, string>>({});
 
+// Computed dues status calculation
+const calculatedDuesStatus = computed(() => {
+  if (!duesPaid.value || !form.value['Membership Date Paid']) {
+    return {
+      color: 'grey',
+      icon: 'mdi-help',
+      text: 'Unknown',
+      message: 'Please enter payment date to calculate status'
+    };
+  }
+
+  // Create a mock member object with form data to use calculation functions
+  const mockMember = {
+    current_year_dues_paid: 'true',
+    membership_date_paid: form.value['Membership Date Paid'],
+    payment_due_date: form.value['Payment Due Date'],
+    member_since: form.value['Member Since']
+  } as Member;
+
+  const isOverdue = !isDuesActuallyCurrent(mockMember);
+  const paymentTooOld = isPaymentOverOneYear(mockMember);
+
+  if (isOverdue && paymentTooOld) {
+    const overdueDays = calculateOverdueDays(mockMember);
+    return {
+      color: 'error',
+      icon: 'mdi-alert-circle',
+      text: 'Overdue',
+      message: `Payment is ${overdueDays} days overdue (more than 1 year since payment)`
+    };
+  } else if (isOverdue) {
+    return {
+      color: 'warning',
+      icon: 'mdi-clock-alert',
+      text: 'Due Soon',
+      message: 'Dues will be due soon based on payment date'
+    };
+  } else {
+    const paymentDate = new Date(form.value['Membership Date Paid']);
+    const nextDue = new Date(paymentDate);
+    nextDue.setFullYear(nextDue.getFullYear() + 1);
+    const nextDueFormatted = nextDue.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+    
+    return {
+      color: 'success',
+      icon: 'mdi-check-circle',
+      text: 'Current',
+      message: `Dues are current. Next payment due: ${nextDueFormatted}`
+    };
+  }
+});
+
 // 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];
-    }
   }
 });
 

components/AdminConfigurationDialog.vue

@@ -57,39 +57,75 @@
             <v-form ref="nocodbFormRef" v-model="nocodbFormValid">
               <v-row>
                 <v-col cols="12">
-                  <v-text-field
-                    v-model="nocodbForm.url"
-                    label="NocoDB URL"
-                    variant="outlined"
-                    :rules="[rules.required, rules.url]"
-                    required
-                    placeholder="https://database.monacousa.org"
-                  />
+                  <div class="d-flex align-center gap-2">
+                    <v-text-field
+                      v-model="nocodbForm.url"
+                      label="NocoDB URL"
+                      variant="outlined"
+                      :rules="[rules.required, rules.url]"
+                      :readonly="!editingFields.nocodbUrl"
+                      autocomplete="off"
+                      required
+                      placeholder="https://database.monacousa.org"
+                      class="flex-grow-1"
+                    />
+                    <v-btn
+                      :icon="editingFields.nocodbUrl ? 'mdi-check' : 'mdi-pencil'"
+                      :color="editingFields.nocodbUrl ? 'success' : 'primary'"
+                      variant="outlined"
+                      size="small"
+                      @click="toggleEdit('nocodbUrl')"
+                    />
+                  </div>
                 </v-col>
                 
                 <v-col cols="12">
-                  <v-text-field
-                    v-model="nocodbForm.apiKey"
-                    label="API Token"
-                    variant="outlined"
-                    :rules="[rules.required]"
-                    required
-                    :type="showNocodbApiKey ? 'text' : 'password'"
-                    :append-inner-icon="showNocodbApiKey ? 'mdi-eye' : 'mdi-eye-off'"
-                    @click:append-inner="showNocodbApiKey = !showNocodbApiKey"
-                    placeholder="Enter your NocoDB API token"
-                  />
+                  <div class="d-flex align-center gap-2">
+                    <v-text-field
+                      v-model="nocodbForm.apiKey"
+                      label="API Token"
+                      variant="outlined"
+                      :rules="[rules.required]"
+                      :readonly="!editingFields.nocodbApiKey"
+                      :type="showNocodbApiKey ? 'text' : 'password'"
+                      :append-inner-icon="showNocodbApiKey ? 'mdi-eye' : 'mdi-eye-off'"
+                      @click:append-inner="showNocodbApiKey = !showNocodbApiKey"
+                      autocomplete="off"
+                      required
+                      placeholder="Enter your NocoDB API token"
+                      class="flex-grow-1"
+                    />
+                    <v-btn
+                      :icon="editingFields.nocodbApiKey ? 'mdi-check' : 'mdi-pencil'"
+                      :color="editingFields.nocodbApiKey ? 'success' : 'primary'"
+                      variant="outlined"
+                      size="small"
+                      @click="toggleEdit('nocodbApiKey')"
+                    />
+                  </div>
                 </v-col>
                 
                 <v-col cols="12">
-                  <v-text-field
-                    v-model="nocodbForm.baseId"
-                    label="Base ID"
-                    variant="outlined"
-                    :rules="[rules.required]"
-                    required
-                    placeholder="your-base-id"
-                  />
+                  <div class="d-flex align-center gap-2">
+                    <v-text-field
+                      v-model="nocodbForm.baseId"
+                      label="Base ID"
+                      variant="outlined"
+                      :rules="[rules.required]"
+                      :readonly="!editingFields.nocodbBaseId"
+                      autocomplete="off"
+                      required
+                      placeholder="your-base-id"
+                      class="flex-grow-1"
+                    />
+                    <v-btn
+                      :icon="editingFields.nocodbBaseId ? 'mdi-check' : 'mdi-pencil'"
+                      :color="editingFields.nocodbBaseId ? 'success' : 'primary'"
+                      variant="outlined"
+                      size="small"
+                      @click="toggleEdit('nocodbBaseId')"
+                    />
+                  </div>
                 </v-col>
                 
                 <v-col cols="12">
@@ -97,42 +133,78 @@
                 </v-col>
 
                 <v-col cols="12">
-                  <v-text-field
-                    v-model="nocodbForm.tables.members"
-                    label="Members Table ID"
-                    variant="outlined"
-                    :rules="[rules.required]"
-                    required
-                    placeholder="members-table-id"
-                  />
+                  <div class="d-flex align-center gap-2">
+                    <v-text-field
+                      v-model="nocodbForm.tables.members"
+                      label="Members Table ID"
+                      variant="outlined"
+                      :rules="[rules.required]"
+                      :readonly="!editingFields.membersTableId"
+                      autocomplete="off"
+                      required
+                      placeholder="members-table-id"
+                      class="flex-grow-1"
+                    />
+                    <v-btn
+                      :icon="editingFields.membersTableId ? 'mdi-check' : 'mdi-pencil'"
+                      :color="editingFields.membersTableId ? 'success' : 'primary'"
+                      variant="outlined"
+                      size="small"
+                      @click="toggleEdit('membersTableId')"
+                    />
+                  </div>
                   <div class="text-caption text-medium-emphasis mt-1">
                     Configure the table ID for the Members functionality
                   </div>
                 </v-col>
 
                 <v-col cols="12">
-                  <v-text-field
-                    v-model="nocodbForm.tables.events"
-                    label="Events Table ID"
-                    variant="outlined"
-                    :rules="[rules.required]"
-                    required
-                    placeholder="events-table-id"
-                  />
+                  <div class="d-flex align-center gap-2">
+                    <v-text-field
+                      v-model="nocodbForm.tables.events"
+                      label="Events Table ID"
+                      variant="outlined"
+                      :rules="[rules.required]"
+                      :readonly="!editingFields.eventsTableId"
+                      autocomplete="off"
+                      required
+                      placeholder="events-table-id"
+                      class="flex-grow-1"
+                    />
+                    <v-btn
+                      :icon="editingFields.eventsTableId ? 'mdi-check' : 'mdi-pencil'"
+                      :color="editingFields.eventsTableId ? 'success' : 'primary'"
+                      variant="outlined"
+                      size="small"
+                      @click="toggleEdit('eventsTableId')"
+                    />
+                  </div>
                   <div class="text-caption text-medium-emphasis mt-1">
                     Configure the table ID for the Events functionality
                   </div>
                 </v-col>
 
                 <v-col cols="12">
-                  <v-text-field
-                    v-model="nocodbForm.tables.rsvps"
-                    label="RSVPs Table ID"
-                    variant="outlined"
-                    :rules="[rules.required]"
-                    required
-                    placeholder="rsvps-table-id"
-                  />
+                  <div class="d-flex align-center gap-2">
+                    <v-text-field
+                      v-model="nocodbForm.tables.rsvps"
+                      label="RSVPs Table ID"
+                      variant="outlined"
+                      :rules="[rules.required]"
+                      :readonly="!editingFields.rsvpsTableId"
+                      autocomplete="off"
+                      required
+                      placeholder="rsvps-table-id"
+                      class="flex-grow-1"
+                    />
+                    <v-btn
+                      :icon="editingFields.rsvpsTableId ? 'mdi-check' : 'mdi-pencil'"
+                      :color="editingFields.rsvpsTableId ? 'success' : 'primary'"
+                      variant="outlined"
+                      size="small"
+                      @click="toggleEdit('rsvpsTableId')"
+                    />
+                  </div>
                   <div class="text-caption text-medium-emphasis mt-1">
                     Configure the table ID for the Event RSVPs functionality
                   </div>
@@ -186,32 +258,56 @@
             <v-form ref="recaptchaFormRef" v-model="recaptchaFormValid">
               <v-row>
                 <v-col cols="12">
-                  <v-text-field
-                    v-model="recaptchaForm.siteKey"
-                    label="Site Key (Public)"
-                    variant="outlined"
-                    :rules="[rules.required]"
-                    required
-                    placeholder="6Lc..."
-                    hint="This key is visible to users on the frontend"
-                    persistent-hint
-                  />
+                  <div class="d-flex align-center gap-2">
+                    <v-text-field
+                      v-model="recaptchaForm.siteKey"
+                      label="Site Key (Public)"
+                      variant="outlined"
+                      :rules="[rules.required]"
+                      :readonly="!editingFields.recaptchaSiteKey"
+                      autocomplete="off"
+                      required
+                      placeholder="6Lc..."
+                      hint="This key is visible to users on the frontend"
+                      persistent-hint
+                      class="flex-grow-1"
+                    />
+                    <v-btn
+                      :icon="editingFields.recaptchaSiteKey ? 'mdi-check' : 'mdi-pencil'"
+                      :color="editingFields.recaptchaSiteKey ? 'success' : 'primary'"
+                      variant="outlined"
+                      size="small"
+                      @click="toggleEdit('recaptchaSiteKey')"
+                    />
+                  </div>
                 </v-col>
                 
                 <v-col cols="12">
-                  <v-text-field
-                    v-model="recaptchaForm.secretKey"
-                    label="Secret Key (Private)"
-                    variant="outlined"
-                    :rules="[rules.required]"
-                    required
-                    :type="showRecaptchaSecret ? 'text' : 'password'"
-                    :append-inner-icon="showRecaptchaSecret ? 'mdi-eye' : 'mdi-eye-off'"
-                    @click:append-inner="showRecaptchaSecret = !showRecaptchaSecret"
-                    placeholder="6Lc..."
-                    hint="This key is kept secret on the server"
-                    persistent-hint
-                  />
+                  <div class="d-flex align-center gap-2">
+                    <v-text-field
+                      v-model="recaptchaForm.secretKey"
+                      label="Secret Key (Private)"
+                      variant="outlined"
+                      :rules="[rules.required]"
+                      :readonly="!editingFields.recaptchaSecretKey"
+                      :type="showRecaptchaSecret ? 'text' : 'password'"
+                      :append-inner-icon="showRecaptchaSecret ? 'mdi-eye' : 'mdi-eye-off'"
+                      @click:append-inner="showRecaptchaSecret = !showRecaptchaSecret"
+                      autocomplete="off"
+                      required
+                      placeholder="6Lc..."
+                      hint="This key is kept secret on the server"
+                      persistent-hint
+                      class="flex-grow-1"
+                    />
+                    <v-btn
+                      :icon="editingFields.recaptchaSecretKey ? 'mdi-check' : 'mdi-pencil'"
+                      :color="editingFields.recaptchaSecretKey ? 'success' : 'primary'"
+                      variant="outlined"
+                      size="small"
+                      @click="toggleEdit('recaptchaSecretKey')"
+                    />
+                  </div>
                 </v-col>
                 
                 <v-col cols="12">
@@ -249,17 +345,29 @@
             <v-form ref="registrationFormRef" v-model="registrationFormValid">
               <v-row>
                 <v-col cols="12" md="6">
-                  <v-text-field
-                    v-model.number="registrationForm.membershipFee"
-                    label="Annual Membership Fee (EUR)"
-                    variant="outlined"
-                    :rules="[rules.required, rules.positiveNumber]"
-                    required
-                    type="number"
-                    min="1"
-                    placeholder="50"
-                    prefix="€"
-                  />
+                  <div class="d-flex align-center gap-2">
+                    <v-text-field
+                      v-model.number="registrationForm.membershipFee"
+                      label="Annual Membership Fee (EUR)"
+                      variant="outlined"
+                      :rules="[rules.required, rules.positiveNumber]"
+                      :readonly="!editingFields.membershipFee"
+                      autocomplete="off"
+                      required
+                      type="number"
+                      min="1"
+                      placeholder="50"
+                      prefix="€"
+                      class="flex-grow-1"
+                    />
+                    <v-btn
+                      :icon="editingFields.membershipFee ? 'mdi-check' : 'mdi-pencil'"
+                      :color="editingFields.membershipFee ? 'success' : 'primary'"
+                      variant="outlined"
+                      size="small"
+                      @click="toggleEdit('membershipFee')"
+                    />
+                  </div>
                 </v-col>
                 
                 <v-col cols="12" md="6">
@@ -267,29 +375,53 @@
                 </v-col>
                 
                 <v-col cols="12">
-                  <v-text-field
-                    v-model="registrationForm.iban"
-                    label="Bank IBAN"
-                    variant="outlined"
-                    :rules="[rules.required, rules.iban]"
-                    required
-                    placeholder="DE89 3704 0044 0532 0130 00"
-                    hint="International Bank Account Number for membership dues"
-                    persistent-hint
-                  />
+                  <div class="d-flex align-center gap-2">
+                    <v-text-field
+                      v-model="registrationForm.iban"
+                      label="Bank IBAN"
+                      variant="outlined"
+                      :rules="[rules.required, rules.iban]"
+                      :readonly="!editingFields.iban"
+                      autocomplete="off"
+                      required
+                      placeholder="DE89 3704 0044 0532 0130 00"
+                      hint="International Bank Account Number for membership dues"
+                      persistent-hint
+                      class="flex-grow-1"
+                    />
+                    <v-btn
+                      :icon="editingFields.iban ? 'mdi-check' : 'mdi-pencil'"
+                      :color="editingFields.iban ? 'success' : 'primary'"
+                      variant="outlined"
+                      size="small"
+                      @click="toggleEdit('iban')"
+                    />
+                  </div>
                 </v-col>
                 
                 <v-col cols="12">
-                  <v-text-field
-                    v-model="registrationForm.accountHolder"
-                    label="Account Holder Name"
-                    variant="outlined"
-                    :rules="[rules.required]"
-                    required
-                    placeholder="MonacoUSA Association"
-                    hint="Name on the bank account"
-                    persistent-hint
-                  />
+                  <div class="d-flex align-center gap-2">
+                    <v-text-field
+                      v-model="registrationForm.accountHolder"
+                      label="Account Holder Name"
+                      variant="outlined"
+                      :rules="[rules.required]"
+                      :readonly="!editingFields.accountHolder"
+                      autocomplete="off"
+                      required
+                      placeholder="MonacoUSA Association"
+                      hint="Name on the bank account"
+                      persistent-hint
+                      class="flex-grow-1"
+                    />
+                    <v-btn
+                      :icon="editingFields.accountHolder ? 'mdi-check' : 'mdi-pencil'"
+                      :color="editingFields.accountHolder ? 'success' : 'primary'"
+                      variant="outlined"
+                      size="small"
+                      @click="toggleEdit('accountHolder')"
+                    />
+                  </div>
                 </v-col>
                 
                 <v-col cols="12">
@@ -335,32 +467,56 @@
             <v-form ref="emailFormRef" v-model="emailFormValid">
               <v-row>
                 <v-col cols="12" md="6">
-                  <v-text-field
-                    v-model="emailForm.host"
-                    label="SMTP Host"
-                    variant="outlined"
-                    :rules="[rules.required]"
-                    required
-                    placeholder="smtp.gmail.com"
-                    hint="Your SMTP server hostname"
-                    persistent-hint
-                  />
+                  <div class="d-flex align-center gap-2">
+                    <v-text-field
+                      v-model="emailForm.host"
+                      label="SMTP Host"
+                      variant="outlined"
+                      :rules="[rules.required]"
+                      :readonly="!editingFields.smtpHost"
+                      autocomplete="off"
+                      required
+                      placeholder="smtp.gmail.com"
+                      hint="Your SMTP server hostname"
+                      persistent-hint
+                      class="flex-grow-1"
+                    />
+                    <v-btn
+                      :icon="editingFields.smtpHost ? 'mdi-check' : 'mdi-pencil'"
+                      :color="editingFields.smtpHost ? 'success' : 'primary'"
+                      variant="outlined"
+                      size="small"
+                      @click="toggleEdit('smtpHost')"
+                    />
+                  </div>
                 </v-col>
                 
                 <v-col cols="12" md="6">
-                  <v-text-field
-                    v-model.number="emailForm.port"
-                    label="Port"
-                    variant="outlined"
-                    :rules="[rules.required, rules.validPort]"
-                    required
-                    type="number"
-                    min="1"
-                    max="65535"
-                    placeholder="587"
-                    hint="Usually 587 (TLS) or 465 (SSL)"
-                    persistent-hint
-                  />
+                  <div class="d-flex align-center gap-2">
+                    <v-text-field
+                      v-model.number="emailForm.port"
+                      label="Port"
+                      variant="outlined"
+                      :rules="[rules.required, rules.validPort]"
+                      :readonly="!editingFields.smtpPort"
+                      autocomplete="off"
+                      required
+                      type="number"
+                      min="1"
+                      max="65535"
+                      placeholder="587"
+                      hint="Usually 587 (TLS) or 465 (SSL)"
+                      persistent-hint
+                      class="flex-grow-1"
+                    />
+                    <v-btn
+                      :icon="editingFields.smtpPort ? 'mdi-check' : 'mdi-pencil'"
+                      :color="editingFields.smtpPort ? 'success' : 'primary'"
+                      variant="outlined"
+                      size="small"
+                      @click="toggleEdit('smtpPort')"
+                    />
+                  </div>
                 </v-col>
                 
                 <v-col cols="12">
@@ -377,55 +533,103 @@
                 </v-col>
                 
                 <v-col cols="12" md="6">
-                  <v-text-field
-                    v-model="emailForm.username"
-                    label="Username"
-                    variant="outlined"
-                    placeholder="your-email@domain.com"
-                    hint="SMTP authentication username (usually your email)"
-                    persistent-hint
-                  />
+                  <div class="d-flex align-center gap-2">
+                    <v-text-field
+                      v-model="emailForm.username"
+                      label="Username"
+                      variant="outlined"
+                      :readonly="!editingFields.smtpUsername"
+                      autocomplete="off"
+                      placeholder="your-email@domain.com"
+                      hint="SMTP authentication username (usually your email)"
+                      persistent-hint
+                      class="flex-grow-1"
+                    />
+                    <v-btn
+                      :icon="editingFields.smtpUsername ? 'mdi-check' : 'mdi-pencil'"
+                      :color="editingFields.smtpUsername ? 'success' : 'primary'"
+                      variant="outlined"
+                      size="small"
+                      @click="toggleEdit('smtpUsername')"
+                    />
+                  </div>
                 </v-col>
                 
                 <v-col cols="12" md="6">
-                  <v-text-field
-                    v-model="emailForm.password"
-                    label="Password"
-                    variant="outlined"
-                    :type="showEmailPassword ? 'text' : 'password'"
-                    :append-inner-icon="showEmailPassword ? 'mdi-eye' : 'mdi-eye-off'"
-                    @click:append-inner="showEmailPassword = !showEmailPassword"
-                    placeholder="Enter SMTP password"
-                    hint="SMTP authentication password or app password"
-                    persistent-hint
-                  />
+                  <div class="d-flex align-center gap-2">
+                    <v-text-field
+                      v-model="emailForm.password"
+                      label="Password"
+                      variant="outlined"
+                      :readonly="!editingFields.smtpPassword"
+                      :type="showEmailPassword ? 'text' : 'password'"
+                      :append-inner-icon="showEmailPassword ? 'mdi-eye' : 'mdi-eye-off'"
+                      @click:append-inner="showEmailPassword = !showEmailPassword"
+                      autocomplete="off"
+                      placeholder="Enter SMTP password"
+                      hint="SMTP authentication password or app password"
+                      persistent-hint
+                      class="flex-grow-1"
+                    />
+                    <v-btn
+                      :icon="editingFields.smtpPassword ? 'mdi-check' : 'mdi-pencil'"
+                      :color="editingFields.smtpPassword ? 'success' : 'primary'"
+                      variant="outlined"
+                      size="small"
+                      @click="toggleEdit('smtpPassword')"
+                    />
+                  </div>
                 </v-col>
                 
                 <v-col cols="12" md="6">
-                  <v-text-field
-                    v-model="emailForm.fromAddress"
-                    label="From Email Address"
-                    variant="outlined"
-                    :rules="[rules.required, rules.email]"
-                    required
-                    type="email"
-                    placeholder="noreply@monacousa.org"
-                    hint="Email address that emails will be sent from"
-                    persistent-hint
-                  />
+                  <div class="d-flex align-center gap-2">
+                    <v-text-field
+                      v-model="emailForm.fromAddress"
+                      label="From Email Address"
+                      variant="outlined"
+                      :rules="[rules.required, rules.email]"
+                      :readonly="!editingFields.smtpFromAddress"
+                      autocomplete="off"
+                      required
+                      type="email"
+                      placeholder="noreply@monacousa.org"
+                      hint="Email address that emails will be sent from"
+                      persistent-hint
+                      class="flex-grow-1"
+                    />
+                    <v-btn
+                      :icon="editingFields.smtpFromAddress ? 'mdi-check' : 'mdi-pencil'"
+                      :color="editingFields.smtpFromAddress ? 'success' : 'primary'"
+                      variant="outlined"
+                      size="small"
+                      @click="toggleEdit('smtpFromAddress')"
+                    />
+                  </div>
                 </v-col>
                 
                 <v-col cols="12" md="6">
-                  <v-text-field
-                    v-model="emailForm.fromName"
-                    label="From Name"
-                    variant="outlined"
-                    :rules="[rules.required]"
-                    required
-                    placeholder="MonacoUSA Portal"
-                    hint="Display name for outgoing emails"
-                    persistent-hint
-                  />
+                  <div class="d-flex align-center gap-2">
+                    <v-text-field
+                      v-model="emailForm.fromName"
+                      label="From Name"
+                      variant="outlined"
+                      :rules="[rules.required]"
+                      :readonly="!editingFields.smtpFromName"
+                      autocomplete="off"
+                      required
+                      placeholder="MonacoUSA Portal"
+                      hint="Display name for outgoing emails"
+                      persistent-hint
+                      class="flex-grow-1"
+                    />
+                    <v-btn
+                      :icon="editingFields.smtpFromName ? 'mdi-check' : 'mdi-pencil'"
+                      :color="editingFields.smtpFromName ? 'success' : 'primary'"
+                      variant="outlined"
+                      size="small"
+                      @click="toggleEdit('smtpFromName')"
+                    />
+                  </div>
                 </v-col>
                 
                 <v-col cols="12">
@@ -592,6 +796,32 @@ const emailTestStatus = ref<{ success: boolean; message: string } | null>(null);
 // Test email address
 const testEmailAddress = ref('');
 
+// Editing state for fields (to prevent autofill interference)
+const editingFields = ref({
+  nocodbUrl: false,
+  nocodbApiKey: false,
+  nocodbBaseId: false,
+  membersTableId: false,
+  eventsTableId: false,
+  rsvpsTableId: false,
+  recaptchaSiteKey: false,
+  recaptchaSecretKey: false,
+  membershipFee: false,
+  iban: false,
+  accountHolder: false,
+  smtpHost: false,
+  smtpPort: false,
+  smtpUsername: false,
+  smtpPassword: false,
+  smtpFromAddress: false,
+  smtpFromName: false
+});
+
+// Toggle edit mode for a field
+const toggleEdit = (fieldName: keyof typeof editingFields.value) => {
+  editingFields.value[fieldName] = !editingFields.value[fieldName];
+};
+
 // Form data
 const nocodbForm = ref<NocoDBSettings>({
   url: 'https://database.monacousa.org',

components/BoardDuesManagement.vue

@@ -1,8 +1,8 @@
 <template>
-  <v-card elevation="2" class="dues-management-card">
+  <v-card elevation="4" class="dues-management-card" style="border: 2px solid #dc2626; border-radius: 16px;">
     <v-card-title class="pa-4 bg-warning-lighten-5">
-      <v-icon class="mr-2" color="warning">mdi-cash-clock</v-icon>
-      <span class="text-h6">Dues Management</span>
+      <v-icon class="mr-3" color="warning" size="28">mdi-cash-multiple</v-icon>
+      <span class="text-h6 font-weight-bold">Dues Management</span>
       <v-spacer />
       <v-chip color="warning" size="small">
         {{ overdueMembers.length + upcomingMembers.length }} Action Items
@@ -150,8 +150,21 @@ const loadDuesData = async () => {
     }>('/api/members/dues-status');
 
     if (response.success) {
-      overdueMembers.value = response.data.overdue || [];
-      upcomingMembers.value = response.data.upcoming || [];
+      // Sort members alphabetically by last name, then first name
+      const sortByName = (a: Member, b: Member) => {
+        const aLastName = (a.last_name || '').toLowerCase();
+        const bLastName = (b.last_name || '').toLowerCase();
+        const aFirstName = (a.first_name || '').toLowerCase();
+        const bFirstName = (b.first_name || '').toLowerCase();
+        
+        const lastNameCompare = aLastName.localeCompare(bLastName);
+        if (lastNameCompare !== 0) return lastNameCompare;
+        
+        return aFirstName.localeCompare(bFirstName);
+      };
+      
+      overdueMembers.value = (response.data.overdue || []).sort(sortByName);
+      upcomingMembers.value = (response.data.upcoming || []).sort(sortByName);
     }
   } catch (error) {
     console.error('Error loading dues data:', error);
@@ -161,38 +174,17 @@ const loadDuesData = async () => {
   }
 };
 
-// Handle mark as paid
+// Handle mark as paid - let DuesActionCard handle the date picker and API call
 const handleMarkPaid = async (member: Member) => {
-  loading.value[member.Id] = true;
+  // Remove member from current lists since they've been marked as paid
+  overdueMembers.value = overdueMembers.value.filter(m => m.Id !== member.Id);
+  upcomingMembers.value = upcomingMembers.value.filter(m => m.Id !== member.Id);
   
-  try {
-    const response = await $fetch<{
-      success: boolean;
-      data: Member;
-      message?: string;
-    }>(`/api/members/${member.Id}/mark-dues-paid`, {
-      method: 'POST'
-    });
+  // Emit update event
+  emit('member-updated', member);
   
-    if (response.success) {
-      // Remove member from current lists
-      overdueMembers.value = overdueMembers.value.filter(m => m.Id !== member.Id);
-      upcomingMembers.value = upcomingMembers.value.filter(m => m.Id !== member.Id);
-      
-      // Emit update event
-      emit('member-updated', response.data);
-      
-      // Show success message
-      console.log('Dues marked as paid successfully');
-    } else {
-      throw new Error(response.message || 'Failed to mark dues as paid');
-    }
-  } catch (error: any) {
-    console.error('Error marking dues as paid:', error);
-    // Show error notification
-  } finally {
-    loading.value[member.Id] = false;
-  }
+  // Show success message
+  console.log('Dues marked as paid successfully');
 };
 
 // Handle view member

components/CreateEventDialog.vue

@@ -31,12 +31,27 @@
             </v-col>
 
             <v-col cols="12">
-              <v-textarea
+              <VuetifyTiptap
                 v-model="eventData.description"
                 label="Description"
-                variant="outlined"
-                rows="3"
-                auto-grow
+                :toolbar="[
+                  'bold',
+                  'italic', 
+                  'underline',
+                  '|',
+                  'heading',
+                  '|',
+                  'bulletList',
+                  'orderedList',
+                  '|',
+                  'link',
+                  '|',
+                  'undo',
+                  'redo'
+                ]"
+                :max-height="200"
+                placeholder="Enter event description with formatting..."
+                outlined
               />
             </v-col>
 
@@ -66,25 +81,50 @@
             <!-- Date and Time -->
             <v-col cols="12" md="6">
               <v-text-field
-                v-model="eventData.start_datetime"
-                label="Start Date & Time*"
-                type="datetime-local"
-                :rules="[v => !!v || 'Start date is required']"
+                v-model="startDate"
+                label="Start Date*"
+                type="date"
+                :rules="dateValidationRules.startDate"
                 variant="outlined"
+                prepend-inner-icon="mdi-calendar"
+                required
+                :min="new Date().toISOString().split('T')[0]"
+              />
+            </v-col>
+
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="startTime"
+                label="Start Time*"
+                type="time"
+                :rules="dateValidationRules.startTime"
+                variant="outlined"
+                prepend-inner-icon="mdi-clock"
                 required
               />
             </v-col>
 
             <v-col cols="12" md="6">
               <v-text-field
-                v-model="eventData.end_datetime"
-                label="End Date & Time*"
-                type="datetime-local"
-                :rules="[
-                  v => !!v || 'End date is required',
-                  v => !eventData.start_datetime || new Date(v) > new Date(eventData.start_datetime) || 'End date must be after start date'
-                ]"
+                v-model="endDate"
+                label="End Date*"
+                type="date"
+                :rules="dateValidationRules.endDate"
                 variant="outlined"
+                prepend-inner-icon="mdi-calendar"
+                :min="startDate || new Date().toISOString().split('T')[0]"
+                required
+              />
+            </v-col>
+
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="endTime"
+                label="End Time*"
+                type="time"
+                :rules="dateValidationRules.endTime"
+                variant="outlined"
+                prepend-inner-icon="mdi-clock"
                 required
               />
             </v-col>
@@ -110,8 +150,33 @@
               />
             </v-col>
 
-            <!-- Payment Settings -->
+            <!-- Guest Settings -->
             <v-col cols="12" md="6">
+              <v-switch
+                v-model="allowGuests"
+                label="Allow Guests"
+                color="primary"
+                inset
+                hint="Members can bring additional guests"
+                persistent-hint
+              />
+            </v-col>
+
+            <!-- Max Guests Per Person (shown when guests allowed) -->
+            <v-col v-if="allowGuests" cols="12" md="6">
+              <v-text-field
+                v-model="maxGuestsPerPerson"
+                label="Max Guests Per Person"
+                type="number"
+                variant="outlined"
+                :rules="allowGuests ? [v => v && parseInt(v) > 0 || 'Must allow at least 1 guest'] : []"
+                hint="Maximum additional guests each member can bring"
+                persistent-hint
+              />
+            </v-col>
+
+            <!-- Payment Settings -->
+            <v-col cols="12" :md="allowGuests ? 6 : 6">
               <v-switch
                 v-model="isPaidEvent"
                 label="Paid Event"
@@ -203,6 +268,18 @@
         </v-form>
       </v-card-text>
 
+      <!-- Error message display -->
+      <v-card-text v-if="errorMessage" class="pt-0">
+        <v-alert 
+          type="error" 
+          variant="tonal"
+          closable
+          @click:close="errorMessage = null"
+        >
+          {{ errorMessage }}
+        </v-alert>
+      </v-card-text>
+
       <v-card-actions class="pa-4">
         <v-spacer />
         <v-btn
@@ -259,6 +336,13 @@ const memberPricingEnabled = ref(true);
 const isRecurring = ref(false);
 const recurrenceFrequency = ref('weekly');
 
+// Date and time picker state
+const startDate = ref<string>('');
+const startTime = ref<string>('');
+const endDate = ref<string>('');
+const endTime = ref<string>('');
+
+
 // Form data
 const eventData = reactive<EventCreateRequest>({
   title: '',
@@ -273,9 +357,15 @@ const eventData = reactive<EventCreateRequest>({
   cost_non_members: '',
   member_pricing_enabled: 'true',
   visibility: 'public',
-  status: 'active'
+  status: 'active',
+  guests_permitted: 'false',
+  max_guests_permitted: '0'
 });
 
+// Guest settings
+const allowGuests = ref(false);
+const maxGuestsPerPerson = ref(1);
+
 // Computed
 const show = computed({
   get: () => props.modelValue,
@@ -324,6 +414,21 @@ watch(memberPricingEnabled, (newValue) => {
   eventData.member_pricing_enabled = newValue ? 'true' : 'false';
 });
 
+watch(allowGuests, (newValue) => {
+  eventData.guests_permitted = newValue ? 'true' : 'false';
+  if (!newValue) {
+    eventData.max_guests_permitted = '0';
+    maxGuestsPerPerson.value = 1;
+  }
+});
+
+watch(maxGuestsPerPerson, (newValue) => {
+  if (allowGuests.value) {
+    eventData.max_guests_permitted = newValue.toString();
+  }
+});
+
+
 watch(isRecurring, (newValue) => {
   eventData.is_recurring = newValue ? 'true' : 'false';
   if (newValue) {
@@ -347,26 +452,105 @@ watch(recurrenceFrequency, (newValue) => {
   }
 });
 
+// Auto-fill end date when start date is selected (most events are same day)
+watch(startDate, (newStartDate) => {
+  if (newStartDate && !endDate.value) {
+    // Auto-fill end date to same as start date for same-day events
+    endDate.value = newStartDate;
+    console.log('[CreateEventDialog] Auto-filled end date to match start date:', newStartDate);
+  }
+});
+
+// Consolidated watcher for all date/time changes
+watch([startDate, startTime, endDate, endTime], ([newStartDate, newStartTime, newEndDate, newEndTime]) => {
+  // Update start datetime
+  if (newStartDate && newStartTime) {
+    const startDateTime = createDateTime(newStartDate, newStartTime);
+    if (startDateTime) {
+      eventData.start_datetime = startDateTime.toISOString();
+      console.log('[CreateEventDialog] Updated start datetime:', eventData.start_datetime);
+    }
+  }
+  
+  // Update end datetime  
+  if (newEndDate && newEndTime) {
+    const endDateTime = createDateTime(newEndDate, newEndTime);
+    if (endDateTime) {
+      eventData.end_datetime = endDateTime.toISOString();
+      console.log('[CreateEventDialog] Updated end datetime:', eventData.end_datetime);
+    }
+  }
+}, { deep: true });
+
 // Watch for prefilled dates
 watch(() => props.prefilledDate, (newDate) => {
   if (newDate) {
-    eventData.start_datetime = newDate;
+    const prefillDate = new Date(newDate);
+    startDate.value = prefillDate.toISOString().split('T')[0];
+    startTime.value = prefillDate.toTimeString().substring(0, 5);
     
     // Set end date 2 hours later if not provided
     if (!props.prefilledEndDate) {
-      const endDate = new Date(newDate);
-      endDate.setHours(endDate.getHours() + 2);
-      eventData.end_datetime = endDate.toISOString().slice(0, 16);
+      const endDateTime = new Date(prefillDate);
+      endDateTime.setHours(endDateTime.getHours() + 2);
+      endDate.value = endDateTime.toISOString().split('T')[0];
+      endTime.value = endDateTime.toTimeString().substring(0, 5);
     }
   }
 }, { immediate: true });
 
 watch(() => props.prefilledEndDate, (newEndDate) => {
   if (newEndDate) {
-    eventData.end_datetime = newEndDate;
+    const prefillEndDate = new Date(newEndDate);
+    endDate.value = prefillEndDate.toISOString().split('T')[0];
+    endTime.value = prefillEndDate.toTimeString().substring(0, 5);
   }
 }, { immediate: true });
 
+
+// Simple date/time functions
+const createDateTime = (dateStr: string, timeStr: string): Date | null => {
+  if (!dateStr || !timeStr) return null;
+  
+  const combined = new Date(`${dateStr}T${timeStr}:00`);
+  return isNaN(combined.getTime()) ? null : combined;
+};
+
+const isValidDateTime = (date: Date | null): boolean => {
+  return date !== null && !isNaN(date.getTime());
+};
+
+// Simple end time validation
+const validateEndTime = (endTimeValue: string): boolean => {
+  if (!startDate.value || !endDate.value || !startTime.value || !endTimeValue) return true;
+  if (startDate.value !== endDate.value) return true;
+  
+  const startDateTime = createDateTime(startDate.value, startTime.value);
+  const endDateTime = createDateTime(endDate.value, endTimeValue);
+  
+  if (!startDateTime || !endDateTime) return false;
+  return endDateTime > startDateTime;
+};
+
+// Validation rules
+const dateValidationRules = {
+  startDate: [
+    (v: string) => !!v || 'Start date is required',
+    (v: string) => !v || new Date(v).getTime() >= new Date().setHours(0,0,0,0) || 'Start date cannot be in the past'
+  ],
+  startTime: [
+    (v: string) => !!v || 'Start time is required'
+  ],
+  endDate: [
+    (v: string) => !!v || 'End date is required',
+    (v: string) => !v || !startDate.value || new Date(v).getTime() >= new Date(startDate.value).getTime() || 'End date must be same or after start date'
+  ],
+  endTime: [
+    (v: string) => !!v || 'End time is required',
+    (v: string) => validateEndTime(v) || 'End time must be after start time when on same date'
+  ]
+};
+
 // Methods
 const resetForm = () => {
   eventData.title = '';
@@ -380,15 +564,26 @@ const resetForm = () => {
   eventData.cost_members = '';
   eventData.cost_non_members = '';
   eventData.member_pricing_enabled = 'true';
+  eventData.guests_permitted = 'false';
+  eventData.max_guests_permitted = '0';
   eventData.visibility = 'public';
   eventData.status = 'active';
   eventData.is_recurring = 'false';
   eventData.recurrence_pattern = '';
   
+  // Reset date/time fields
+  startDate.value = '';
+  startTime.value = '';
+  endDate.value = '';
+  endTime.value = '';
+  
+  // Reset UI state
   isPaidEvent.value = false;
   memberPricingEnabled.value = true;
   isRecurring.value = false;
   recurrenceFrequency.value = 'weekly';
+  allowGuests.value = false;
+  maxGuestsPerPerson.value = 1;
   
   form.value?.resetValidation();
 };
@@ -398,57 +593,99 @@ const close = () => {
   resetForm();
 };
 
+// Error handling
+const errorMessage = ref<string | null>(null);
+
 const handleSubmit = async () => {
   if (!form.value) return;
   
   const isValid = await form.value.validate();
   if (!isValid.valid) return;
 
+  // Clear previous errors
+  errorMessage.value = null;
+  
+  // Validate that we have proper date/time combination
+  if (!startDate.value || !startTime.value) {
+    errorMessage.value = 'Start date and time are required';
+    return;
+  }
+  
+  if (!endDate.value || !endTime.value) {
+    errorMessage.value = 'End date and time are required';
+    return;
+  }
+
   loading.value = true;
   
   try {
-    // Ensure datetime strings are properly formatted
-    const startDate = new Date(eventData.start_datetime);
-    const endDate = new Date(eventData.end_datetime);
+    // Simple date validation using our new function
+    const startDateTime = createDateTime(startDate.value, startTime.value);
+    const endDateTime = createDateTime(endDate.value, endTime.value);
+    
+    if (!startDateTime) {
+      errorMessage.value = 'Please enter a valid start date and time';
+      loading.value = false;
+      return;
+    }
+    
+    if (!endDateTime) {
+      errorMessage.value = 'Please enter a valid end date and time';
+      loading.value = false;
+      return;
+    }
+    
+    // Validate start is not in the past
+    if (startDateTime < new Date()) {
+      errorMessage.value = 'Event start time cannot be in the past';
+      loading.value = false;
+      return;
+    }
+    
+    // Validate end is after start (using getTime() for precise comparison)
+    if (endDateTime.getTime() <= startDateTime.getTime()) {
+      errorMessage.value = 'Event end time must be after start time';
+      loading.value = false;
+      return;
+    }
     
     const formattedEventData = {
       ...eventData,
-      start_datetime: startDate.toISOString(),
-      end_datetime: endDate.toISOString()
+      start_datetime: startDateTime.toISOString(),
+      end_datetime: endDateTime.toISOString()
     };
 
+    console.log('[CreateEventDialog] Creating event with data:', formattedEventData);
+
     const newEvent = await createEvent(formattedEventData);
     
     emit('event-created', newEvent);
-    
-    // Show success message
-    // TODO: Add toast/snackbar notification
-    console.log('Event created successfully:', newEvent);
-    
     close();
   } catch (error: any) {
     console.error('Error creating event:', error);
-    // TODO: Add error toast/snackbar notification
+    
+    // Parse error message for better UX
+    let userErrorMessage = 'Failed to create event';
+    
+    if (error?.data?.message) {
+      userErrorMessage = error.data.message;
+    } else if (error?.message) {
+      if (error.message.includes('past')) {
+        userErrorMessage = 'Event date cannot be in the past';
+      } else if (error.message.includes('validation')) {
+        userErrorMessage = 'Please check all required fields';
+      } else {
+        userErrorMessage = error.message;
+      }
+    }
+    
+    errorMessage.value = userErrorMessage;
   } finally {
     loading.value = false;
   }
 };
 
-// Initialize form when dialog opens
-watch(show, (isOpen) => {
-  if (isOpen && props.prefilledDate) {
-    eventData.start_datetime = props.prefilledDate;
-    
-    if (props.prefilledEndDate) {
-      eventData.end_datetime = props.prefilledEndDate;
-    } else {
-      // Set end date 2 hours later
-      const endDate = new Date(props.prefilledDate);
-      endDate.setHours(endDate.getHours() + 2);
-      eventData.end_datetime = endDate.toISOString().slice(0, 16);
-    }
-  }
-});
+// Removed duplicate prefilled date logic - handled by watchers above
 </script>
 
 <style scoped>
@@ -468,4 +705,74 @@ watch(show, (isOpen) => {
 .v-text-field :deep(.v-field__input) {
   min-height: 56px;
 }
+
+/* Date picker styling to match Vuetify */
+.date-picker-wrapper {
+  width: 100%;
+}
+
+.date-picker-label {
+  font-size: 16px;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: 0.009375em;
+  margin-bottom: 8px;
+  display: block;
+}
+
+/* Style the Vue DatePicker to match Vuetify inputs */
+:deep(.dp__input) {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 4px;
+  padding: 16px 12px;
+  padding-right: 48px; /* Make room for calendar icon */
+  font-size: 16px;
+  line-height: 1.5;
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  width: 100%;
+  min-height: 56px;
+}
+
+:deep(.dp__input:hover) {
+  border-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+
+:deep(.dp__input:focus) {
+  border-color: rgb(var(--v-theme-primary));
+  border-width: 2px;
+  outline: none;
+}
+
+:deep(.dp__input_readonly) {
+  cursor: pointer;
+}
+
+/* Style the date picker dropdown */
+:deep(.dp__menu) {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  background: rgb(var(--v-theme-surface));
+}
+
+/* Primary color theming for the date picker */
+:deep(.dp__primary_color) {
+  background-color: rgb(var(--v-theme-primary));
+}
+
+:deep(.dp__primary_text) {
+  color: rgb(var(--v-theme-primary));
+}
+
+:deep(.dp__active_date) {
+  background-color: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-on-primary));
+}
+
+:deep(.dp__today) {
+  border: 1px solid rgb(var(--v-theme-primary));
+}
 </style>

components/CreatePortalAccountDialog.vue

@@ -0,0 +1,313 @@
+<template>
+  <v-dialog
+    v-model="isOpen"
+    max-width="500"
+    persistent
+    @keydown.esc="cancel"
+  >
+    <v-card class="rounded-lg">
+      <v-card-title class="d-flex align-center">
+        <v-icon color="primary" class="mr-3">mdi-account-plus</v-icon>
+        <span class="text-h6">Create Portal Account</span>
+      </v-card-title>
+
+      <v-card-text class="pb-2">
+        <div class="mb-4">
+          <p class="text-body-1 mb-2">
+            Create a portal account for <strong>{{ member?.FullName }}</strong>
+          </p>
+          <p class="text-body-2 text-medium-emphasis">
+            {{ member?.email }}
+          </p>
+        </div>
+
+        <div class="mb-4">
+          <v-alert
+            type="info"
+            variant="tonal"
+            class="mb-4"
+            icon="mdi-information"
+          >
+            <template #text>
+              <div class="text-body-2">
+                The user will receive an email to set up their password and complete registration.
+              </div>
+            </template>
+          </v-alert>
+        </div>
+
+        <v-form ref="formRef" v-model="formValid">
+          <v-select
+            v-model="selectedGroup"
+            :items="groupOptions"
+            label="Assign to Group"
+            variant="outlined"
+            density="comfortable"
+            :rules="groupRules"
+            prepend-inner-icon="mdi-account-group"
+            class="mb-3"
+          >
+            <template #item="{ props, item }">
+              <v-list-item v-bind="props">
+                <template #prepend>
+                  <v-icon :color="item.raw.color">{{ item.raw.icon }}</v-icon>
+                </template>
+                <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                <v-list-item-subtitle>{{ item.raw.description }}</v-list-item-subtitle>
+              </v-list-item>
+            </template>
+            <template #selection="{ item }">
+              <div class="d-flex align-center">
+                <v-icon :color="item.raw.color" class="mr-2">{{ item.raw.icon }}</v-icon>
+                {{ item.raw.title }}
+              </div>
+            </template>
+          </v-select>
+
+          <!-- Group Description -->
+          <v-card
+            v-if="selectedGroup"
+            variant="tonal"
+            color="primary"
+            class="mb-3"
+          >
+            <v-card-text class="py-3">
+              <div class="d-flex align-center mb-2">
+                <v-icon :color="selectedGroupInfo?.color" class="mr-2">
+                  {{ selectedGroupInfo?.icon }}
+                </v-icon>
+                <span class="font-weight-medium">{{ selectedGroupInfo?.title }}</span>
+              </div>
+              <p class="text-body-2 mb-2">{{ selectedGroupInfo?.description }}</p>
+              <div class="text-caption">
+                <strong>Permissions:</strong>
+                <ul class="mt-1 ml-4">
+                  <li v-for="permission in selectedGroupInfo?.permissions" :key="permission">
+                    {{ permission }}
+                  </li>
+                </ul>
+              </div>
+            </v-card-text>
+          </v-card>
+
+          <!-- Error Alert -->
+          <v-alert
+            v-if="errorMessage"
+            type="error"
+            variant="tonal"
+            class="mb-3"
+            closable
+            @click:close="errorMessage = ''"
+          >
+            {{ errorMessage }}
+          </v-alert>
+        </v-form>
+      </v-card-text>
+
+      <v-card-actions class="px-6 pb-6">
+        <v-spacer />
+        <v-btn
+          variant="text"
+          @click="cancel"
+          :disabled="loading"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          color="primary"
+          variant="elevated"
+          @click="createAccount"
+          :loading="loading"
+          :disabled="!formValid || loading"
+        >
+          <v-icon start>mdi-account-plus</v-icon>
+          Create Account
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import type { Member } from '~/utils/types';
+
+interface Props {
+  modelValue: boolean;
+  member: Member | null;
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'account-created', member: Member): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+// Reactive state
+const loading = ref(false);
+const errorMessage = ref('');
+const formValid = ref(false);
+const selectedGroup = ref('user');
+const formRef = ref();
+
+// Computed
+const isOpen = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+});
+
+// Group options with detailed information
+const groupOptions = [
+  {
+    title: 'User',
+    value: 'user',
+    description: 'Standard member access',
+    icon: 'mdi-account',
+    color: 'primary',
+    permissions: [
+      'View own profile and update personal information',
+      'View events and RSVP',
+      'Access member directory (if enabled)',
+      'View dues status and payment history'
+    ]
+  },
+  {
+    title: 'Board Member',
+    value: 'board',
+    description: 'Board member privileges',
+    icon: 'mdi-account-tie',
+    color: 'warning',
+    permissions: [
+      'All user permissions',
+      'Create and manage members',
+      'Create and manage events',
+      'View member statistics',
+      'Access board tools and reports'
+    ]
+  },
+  {
+    title: 'Administrator',
+    value: 'admin',
+    description: 'Full system access',
+    icon: 'mdi-shield-crown',
+    color: 'error',
+    permissions: [
+      'All board member permissions',
+      'System configuration and settings',
+      'User and group management',
+      'Delete members and sensitive operations',
+      'Access admin panel and logs'
+    ]
+  }
+];
+
+const selectedGroupInfo = computed(() => {
+  return groupOptions.find(group => group.value === selectedGroup.value);
+});
+
+// Validation rules
+const groupRules = [
+  (v: string) => !!v || 'Please select a group'
+];
+
+// Methods
+const cancel = () => {
+  errorMessage.value = '';
+  selectedGroup.value = 'user';
+  isOpen.value = false;
+};
+
+const createAccount = async () => {
+  if (!formValid.value || !props.member) return;
+
+  try {
+    loading.value = true;
+    errorMessage.value = '';
+
+    console.log('[CreatePortalAccountDialog] Creating portal account for:', props.member.email, 'Group:', selectedGroup.value);
+
+    const response = await $fetch(`/api/members/${props.member.Id}/create-portal-account`, {
+      method: 'POST',
+      body: {
+        membershipTier: selectedGroup.value
+      }
+    });
+
+    if (response?.success) {
+      console.log('[CreatePortalAccountDialog] Portal account created successfully');
+      
+      // Update the member object with the keycloak_id
+      const updatedMember = { 
+        ...props.member, 
+        keycloak_id: response.data?.keycloak_id 
+      };
+      
+      emit('account-created', updatedMember);
+      isOpen.value = false;
+      
+      // Reset form
+      selectedGroup.value = 'user';
+    } else {
+      throw new Error(response?.message || 'Failed to create portal account');
+    }
+  } catch (err: any) {
+    console.error('[CreatePortalAccountDialog] Error creating portal account:', err);
+    
+    // Better error handling
+    let message = 'Failed to create portal account. Please try again.';
+    if (err.statusCode === 409) {
+      message = 'This member already has a portal account or a user with this email already exists.';
+    } else if (err.statusCode === 400) {
+      message = 'Member must have email, first name, and last name to create a portal account.';
+    } else if (err.data?.message) {
+      message = err.data.message;
+    } else if (err.message) {
+      message = err.message;
+    }
+    
+    errorMessage.value = message;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Reset form when dialog opens
+watch(() => props.modelValue, (newValue) => {
+  if (newValue) {
+    selectedGroup.value = 'user';
+    errorMessage.value = '';
+  }
+});
+</script>
+
+<style scoped>
+.v-card {
+  border-radius: 12px !important;
+}
+
+.v-list-item-subtitle {
+  opacity: 0.7;
+}
+
+/* Improve list styling */
+ul {
+  list-style-type: disc;
+  margin-left: 0;
+}
+
+li {
+  margin-bottom: 2px;
+}
+
+/* Better mobile spacing */
+@media (max-width: 600px) {
+  .v-card-actions {
+    padding: 16px !important;
+  }
+  
+  .v-card-text {
+    padding: 16px !important;
+  }
+}
+</style>

components/DuesActionCard.vue

@@ -21,15 +21,14 @@
     <v-card-text class="pa-4">
       <!-- Member Info Header -->
       <div class="d-flex align-center mb-3">
-        <v-avatar
-          :color="avatarColor"
-          size="40"
+        <ProfileAvatar
+          :member-id="member.member_id || member.Id"
+          :first-name="member.first_name"
+          :last-name="member.last_name"
+          :member-name="member.FullName"
+          size="small"
           class="mr-3"
-        >
-          <span class="text-white font-weight-bold">
-            {{ memberInitials }}
-          </span>
-        </v-avatar>
+        />
         
         <div class="flex-grow-1">
           <h4 class="text-subtitle-1 font-weight-bold mb-1">
@@ -37,11 +36,11 @@
           </h4>
           <div class="d-flex align-center">
             <v-chip size="x-small" color="grey" variant="text" class="pa-0 mr-2">
-              ID: {{ member.member_id || `MUSA-${member.Id}` }}
+              ID: {{ member.member_id || 'Pending' }}
             </v-chip>
-            <CountryFlag
+            <MultipleCountryFlags
               v-if="member.nationality"
-              :country-code="member.nationality.split(',')[0]"
+              :country-codes="member.nationality"
               :show-name="false"
               size="small"
             />
@@ -89,7 +88,7 @@
               Due Date
             </span>
             <span class="text-body-2 font-weight-bold text-warning">
-              {{ formatDate(member.nextDueDate || member.payment_due_date) }}
+              {{ formatDate(member.nextDueDate || member.payment_due_date || '') }}
             </span>
           </div>
           
@@ -118,21 +117,6 @@
       </div>
     </v-card-text>
 
-    <!-- Action Buttons -->
-    <v-card-actions class="pa-4 pt-0">
-      <v-btn
-        color="success"
-        variant="elevated"
-        size="small"
-        :loading="loading"
-        @click="showPaymentDateDialog = true"
-        block
-      >
-        <v-icon start size="16">mdi-check-circle</v-icon>
-        Mark as Paid
-      </v-btn>
-    </v-card-actions>
-
     <!-- Payment Date Selection Dialog -->
     <v-dialog v-model="showPaymentDateDialog" max-width="400">
       <v-card>
@@ -153,14 +137,18 @@
           
           <v-text-field
             v-model="selectedPaymentDate"
-            label="Payment Date"
+            label="Payment Date*"
             type="date"
+            :rules="[
+              v => !!v || 'Payment date is required',
+              v => !v || new Date(v).getTime() <= new Date().setHours(23,59,59,999) || 'Payment date cannot be in the future'
+            ]"
             variant="outlined"
-            :max="todayDate"
             prepend-inner-icon="mdi-calendar"
+            required
+            :max="new Date().toISOString().split('T')[0]"
             hint="Select the date when the payment was received"
             persistent-hint
-            class="mb-2"
           />
           
           <v-alert 
@@ -199,27 +187,39 @@
     </v-dialog>
 
     <!-- Quick Actions -->
-    <v-card-actions class="pa-4 pt-0">
-      <v-btn
-        variant="text"
-        size="small"
-        @click="$emit('view-member', member)"
-      >
-        <v-icon start size="16">mdi-account</v-icon>
-        View Details
-      </v-btn>
+    <v-card-actions class="pa-4 pt-0 d-flex justify-space-between">
+      <div class="d-flex gap-1">
+        <v-btn
+          variant="text"
+          size="small"
+          @click="$emit('view-member', member)"
+        >
+          <v-icon start size="16">mdi-account</v-icon>
+          View Details
+        </v-btn>
         
-      <v-spacer />
+        <v-btn
+          variant="text"
+          size="small"
+          :loading="emailLoading"
+          :disabled="!member.email"
+          @click="sendDuesReminder"
+          v-if="member.email"
+        >
+          <v-icon start size="16">mdi-email</v-icon>
+          Email
+        </v-btn>
+      </div>
       
       <v-btn
-        variant="text"
+        color="success"
+        variant="elevated"
         size="small"
-        :href="`mailto:${member.email}?subject=MonacoUSA Membership Dues Reminder`"
-        target="_blank"
-        v-if="member.email"
+        :loading="loading"
+        @click="showPaymentDateDialog = true"
       >
-        <v-icon start size="16">mdi-email</v-icon>
-        Email
+        <v-icon start size="16">mdi-check-circle</v-icon>
+        Mark as Paid
       </v-btn>
     </v-card-actions>
   </v-card>
@@ -227,9 +227,20 @@
 
 <script setup lang="ts">
 import type { Member } from '~/utils/types';
+import ProfileAvatar from '~/components/ProfileAvatar.vue';
+import MultipleCountryFlags from '~/components/MultipleCountryFlags.vue';
 
 // Extended member type for dues management
-interface DuesMember extends Member {
+interface DuesMember {
+  Id: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  phone: string;
+  nationality?: string;
+  member_id?: string;
+  FullName?: string;
+  FormattedPhone?: string;
   overdueDays?: number;
   overdueReason?: string;
   daysUntilDue?: number;
@@ -247,7 +258,7 @@ interface Props {
 
 interface Emits {
   (e: 'mark-paid', member: Member): void;
-  (e: 'view-member', member: Member): void;
+  (e: 'view-member', member: DuesMember): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -259,14 +270,27 @@ const emit = defineEmits<Emits>();
 // Reactive state for payment date dialog
 const showPaymentDateDialog = ref(false);
 const selectedPaymentDate = ref('');
+const selectedPaymentModel = ref<Date | null>(null);
+
+// Reactive state for email sending
+const emailLoading = ref(false);
 
 // Initialize with today's date when dialog opens
 watch(showPaymentDateDialog, (isOpen) => {
   if (isOpen) {
+    const today = new Date();
+    selectedPaymentModel.value = today;
     selectedPaymentDate.value = todayDate.value;
   }
 });
 
+// Date picker handler
+const handleDateUpdate = (date: Date | null) => {
+  if (date) {
+    selectedPaymentDate.value = date.toISOString().split('T')[0];
+  }
+};
+
 // Computed properties
 const memberInitials = computed(() => {
   const firstName = props.member.first_name || '';
@@ -409,6 +433,38 @@ const confirmMarkAsPaid = async () => {
     // You could show an error message here if needed
   }
 };
+
+const sendDuesReminder = async () => {
+  if (!props.member.email || emailLoading.value) return;
+  
+  emailLoading.value = true;
+  
+  try {
+    // Determine the reminder type based on the member's status
+    const reminderType = props.status === 'overdue' ? 'overdue' : 'due-soon';
+    
+    const response = await $fetch<{
+      success: boolean;
+      message: string;
+      data: any;
+    }>(`/api/members/${props.member.Id}/send-dues-reminder`, {
+      method: 'post',
+      body: {
+        reminderType
+      }
+    });
+
+    if (response?.success) {
+      console.log(`Dues reminder sent successfully to ${props.member.email}`);
+      // You could show a success toast here if needed
+    }
+  } catch (error: any) {
+    console.error('Error sending dues reminder:', error);
+    // You could show an error toast here if needed
+  } finally {
+    emailLoading.value = false;
+  }
+};
 </script>
 
 <style scoped>
@@ -458,6 +514,76 @@ const confirmMarkAsPaid = async () => {
   max-width: 150px;
 }
 
+/* Date picker styling to match Vuetify */
+.date-picker-wrapper {
+  width: 100%;
+}
+
+.date-picker-label {
+  font-size: 16px;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: 0.009375em;
+  margin-bottom: 8px;
+  display: block;
+}
+
+/* Style the Vue DatePicker to match Vuetify inputs */
+:deep(.dp__input) {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 4px;
+  padding: 16px 12px;
+  padding-right: 48px; /* Make room for calendar icon */
+  font-size: 16px;
+  line-height: 1.5;
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  width: 100%;
+  min-height: 56px;
+}
+
+:deep(.dp__input:hover) {
+  border-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+
+:deep(.dp__input:focus) {
+  border-color: rgb(var(--v-theme-primary));
+  border-width: 2px;
+  outline: none;
+}
+
+:deep(.dp__input_readonly) {
+  cursor: pointer;
+}
+
+/* Style the date picker dropdown */
+:deep(.dp__menu) {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  background: rgb(var(--v-theme-surface));
+}
+
+/* Primary color theming for the date picker */
+:deep(.dp__primary_color) {
+  background-color: rgb(var(--v-theme-primary));
+}
+
+:deep(.dp__primary_text) {
+  color: rgb(var(--v-theme-primary));
+}
+
+:deep(.dp__active_date) {
+  background-color: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-on-primary));
+}
+
+:deep(.dp__today) {
+  border: 1px solid rgb(var(--v-theme-primary));
+}
+
 /* Mobile responsive */
 @media (max-width: 600px) {
   .dues-action-card {

components/DuesOverdueBanner.vue

@@ -41,15 +41,12 @@
                 class="overdue-member-item"
               >
                 <template #prepend>
-                  <v-avatar
-                    :color="member.isInactive ? 'grey' : 'warning'"
-                    size="32"
+                  <ProfileAvatar
+                    :member-id="member.memberId"
+                    :member-name="member.name"
+                    size="small"
                     class="mr-3"
-                  >
-                    <v-icon color="white" size="16">
-                      {{ member.isInactive ? 'mdi-account-off' : 'mdi-account-alert' }}
-                    </v-icon>
-                  </v-avatar>
+                  />
                 </template>
                 
                 <v-list-item-title class="font-weight-medium">
@@ -137,6 +134,8 @@
 </template>
 
 <script setup lang="ts">
+import ProfileAvatar from '~/components/ProfileAvatar.vue';
+
 interface OverdueMember {
   id: string;
   name: string;

components/DuesPaymentBanner.vue

@@ -1,16 +1,15 @@
 <template>
   <v-banner
     v-if="showBanner"
-    color="warning"
-    icon="mdi-alert-circle"
-    sticky
-    class="dues-payment-banner"
+    :color="isOverdue ? 'error' : 'warning'"
+    :icon="isOverdue ? 'mdi-alert-octagon' : 'mdi-alert-circle'"
+    :class="['dues-payment-banner', { 'overdue-banner': isOverdue }]"
   >
     <template #text>
       <div class="banner-content">
         <div class="text-h6 font-weight-bold mb-2">
-          <v-icon left>mdi-credit-card-alert</v-icon>
-          Membership Dues Payment Required
+          <v-icon left>{{ isOverdue ? 'mdi-alert-octagon' : 'mdi-credit-card-alert' }}</v-icon>
+          {{ isOverdue ? '🚨 URGENT: Overdue Dues Payment' : 'Membership Dues Payment Required' }}
         </div>
         
         <div class="text-body-1 mb-3">
@@ -19,50 +18,50 @@
         
         <v-card 
           class="payment-details-card pa-3" 
-          color="rgba(255,255,255,0.1)" 
+          color="rgba(255,255,255,0.95)" 
           variant="outlined"
         >
-          <div class="text-subtitle-1 font-weight-bold mb-2">
-            <v-icon left size="small">mdi-bank</v-icon>
+          <div class="text-subtitle-1 font-weight-bold mb-2 text-black">
+            <v-icon left size="small" class="text-black">mdi-bank</v-icon>
             Payment Details
           </div>
           
           <v-row dense>
             <v-col cols="12" sm="4" md="3">
-              <div class="text-caption font-weight-bold">Amount:</div>
-              <div class="text-body-2">€{{ config.membershipFee }}/year</div>
+              <div class="text-caption font-weight-bold text-black">Amount:</div>
+              <div class="text-body-2 text-black">€{{ config.membershipFee }}/year</div>
             </v-col>
             
             <v-col cols="12" sm="8" md="5" v-if="config.iban">
-              <div class="text-caption font-weight-bold">IBAN:</div>
-              <div class="text-body-2 font-family-monospace">{{ config.iban }}</div>
+              <div class="text-caption font-weight-bold text-black">IBAN:</div>
+              <div class="text-body-2 font-family-monospace text-black">{{ config.iban }}</div>
             </v-col>
             
             <v-col cols="12" sm="12" md="4" v-if="config.accountHolder">
-              <div class="text-caption font-weight-bold">Account Holder:</div>
-              <div class="text-body-2">{{ config.accountHolder }}</div>
+              <div class="text-caption font-weight-bold text-black">Account Holder:</div>
+              <div class="text-body-2 text-black">{{ config.accountHolder }}</div>
             </v-col>
           </v-row>
 
-          <v-divider class="my-2" />
+          <v-divider class="my-2 border-opacity-50" />
 
           <v-row dense>
             <v-col cols="12">
-              <div class="text-caption font-weight-bold">Payment Reference:</div>
-              <div class="text-body-2 font-family-monospace" style="background-color: rgba(163, 21, 21, 0.1); padding: 8px; border-radius: 4px; border-left: 4px solid #a31515;">
+              <div class="text-caption font-weight-bold text-black">Payment Reference:</div>
+              <div class="text-body-2 font-family-monospace text-black" style="background-color: rgba(0, 0, 0, 0.1); padding: 8px; border-radius: 4px; border-left: 4px solid #000000;">
                 {{ memberData?.member_id || 'Member ID pending' }}
               </div>
-              <div class="text-caption text-medium-emphasis mt-1">
-                <v-icon size="small" class="mr-1">mdi-information-outline</v-icon>
+              <div class="text-caption text-black mt-1">
+                <v-icon size="small" class="mr-1 text-black">mdi-information-outline</v-icon>
                 Please include your member ID in the wire transfer reference for identification
               </div>
             </v-col>
           </v-row>
 
-          <v-divider class="my-2" />
+          <v-divider class="my-2 border-opacity-50" />
           
-          <div class="text-caption d-flex align-center">
-            <v-icon size="small" class="mr-1">mdi-information-outline</v-icon>
+          <div class="text-caption d-flex align-center text-black">
+            <v-icon size="small" class="mr-1 text-black">mdi-information-outline</v-icon>
             {{ daysRemaining > 0 ? `${daysRemaining} days remaining` : 'Payment overdue' }} 
             before account suspension
           </div>
@@ -98,34 +97,67 @@
   <!-- Mark as Paid Dialog -->
   <v-dialog v-model="markAsPaidDialog" max-width="400">
     <v-card>
-      <v-card-title class="text-h6">
-        <v-icon left color="success">mdi-check-circle</v-icon>
+      <v-card-title class="text-h6 pa-4">
+        <v-icon left color="success">mdi-calendar-check</v-icon>
         Mark Dues as Paid
       </v-card-title>
       
-      <v-card-text>
-        <p>Are you sure you want to mark the dues as paid for this member?</p>
-        <p class="text-body-2 text-medium-emphasis">
-          This will remove the payment banner and update the member's status.
-        </p>
+      <v-card-text class="pa-4">
+        <div class="mb-4">
+          <h4 class="text-subtitle-1 mb-2">
+            {{ memberData?.FullName || `${memberData?.first_name || ''} ${memberData?.last_name || ''}`.trim() }}
+          </h4>
+          <p class="text-body-2 text-medium-emphasis">
+            Select the date when the dues payment was received:
+          </p>
+        </div>
+        
+        <v-text-field
+          v-model="selectedPaymentDate"
+          label="Payment Date*"
+          type="date"
+          :rules="[
+            v => !!v || 'Payment date is required',
+            v => !v || new Date(v).getTime() <= new Date().setHours(23,59,59,999) || 'Payment date cannot be in the future'
+          ]"
+          variant="outlined"
+          prepend-inner-icon="mdi-calendar"
+          required
+          :max="new Date().toISOString().split('T')[0]"
+          hint="Select the date when the payment was received"
+          persistent-hint
+        />
+        
+        <v-alert 
+          v-if="selectedPaymentDate && isDateInFuture" 
+          type="warning" 
+          variant="tonal" 
+          class="mt-2"
+          density="compact"
+        >
+          <v-icon start>mdi-information</v-icon>
+          Future dates are not allowed. Please select today or an earlier date.
+        </v-alert>
       </v-card-text>
       
-      <v-card-actions>
+      <v-card-actions class="pa-4 pt-0">
         <v-spacer />
         <v-btn 
           color="grey" 
           variant="text" 
-          @click="markAsPaidDialog = false"
+          @click="cancelPaymentDialog"
         >
           Cancel
         </v-btn>
         <v-btn 
           color="success" 
-          variant="flat"
+          variant="elevated"
+          :disabled="!selectedPaymentDate || isDateInFuture"
           :loading="updating"
           @click="markDuesAsPaid"
         >
-          Mark as Paid
+          <v-icon start>mdi-check-circle</v-icon>
+          Confirm Payment
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -151,6 +183,11 @@
 
 <script setup lang="ts">
 import type { RegistrationConfig, Member } from '~/utils/types';
+import { 
+  isPaymentOverOneYear as checkPaymentOverOneYear, 
+  isDuesActuallyCurrent as checkDuesActuallyCurrent, 
+  calculateOverdueDays 
+} from '~/utils/dues-calculations';
 
 // Get auth state
 const { user, isAdmin } = useAuth();
@@ -167,6 +204,10 @@ const config = ref<RegistrationConfig>({
   accountHolder: ''
 });
 
+// Reactive state for payment date dialog
+const selectedPaymentDate = ref('');
+const selectedPaymentModel = ref<Date | null>(null);
+
 const snackbar = ref({
   show: false,
   message: '',
@@ -191,37 +232,79 @@ const isInGracePeriod = computed(() => {
 
 /**
  * Check if a member's last payment is over 1 year old
- * Uses the same logic as dues-status API
+ * Uses standardized dues calculation function
  */
 const isPaymentOverOneYear = computed(() => {
-  if (!memberData.value?.membership_date_paid) return false;
-  
-  try {
-    const lastPaidDate = new Date(memberData.value.membership_date_paid);
-    const oneYearFromPayment = new Date(lastPaidDate);
-    oneYearFromPayment.setFullYear(oneYearFromPayment.getFullYear() + 1);
-    const today = new Date();
-    
-    return today > oneYearFromPayment;
-  } catch {
-    return false;
-  }
+  if (!memberData.value) return false;
+  return checkPaymentOverOneYear(memberData.value);
 });
 
 /**
- * Check if dues need to be paid (either overdue or in grace period)
- * Banner should show when payment is needed
+ * Calculate next dues date (1 year from when they last paid or joined)
+ */
+const nextDuesDate = computed(() => {
+  if (!memberData.value) return null;
+  
+  // If dues are paid, calculate 1 year from payment date
+  if (memberData.value.current_year_dues_paid === 'true' && memberData.value.membership_date_paid) {
+    const lastPaidDate = new Date(memberData.value.membership_date_paid);
+    const nextDue = new Date(lastPaidDate);
+    nextDue.setFullYear(nextDue.getFullYear() + 1);
+    return nextDue;
+  }
+  
+  // If not paid but has a due date, use that
+  if (memberData.value.payment_due_date) {
+    return new Date(memberData.value.payment_due_date);
+  }
+  
+  // Fallback: 1 year from member since date
+  if (memberData.value.member_since) {
+    const memberSince = new Date(memberData.value.member_since);
+    const nextDue = new Date(memberSince);
+    nextDue.setFullYear(nextDue.getFullYear() + 1);
+    return nextDue;
+  }
+  
+  return null;
+});
+
+/**
+ * Check if dues are coming due within 30 days (for paid members)
+ */
+const isDueSoon = computed(() => {
+  if (!memberData.value || !nextDuesDate.value) return false;
+  
+  // Only show warning if dues are currently paid
+  if (memberData.value.current_year_dues_paid !== 'true') return false;
+  
+  const today = new Date();
+  const thirtyDaysFromNow = new Date();
+  thirtyDaysFromNow.setDate(thirtyDaysFromNow.getDate() + 30);
+  
+  // Show banner if due date is within the next 30 days
+  return nextDuesDate.value <= thirtyDaysFromNow && nextDuesDate.value > today;
+});
+
+/**
+ * Check if dues are overdue
+ * Uses standardized dues calculation function
+ */
+const isDuesOverdue = computed(() => {
+  if (!memberData.value) return false;
+  
+  // Use the standardized function - if not current, then overdue
+  return !checkDuesActuallyCurrent(memberData.value);
+});
+
+/**
+ * Check if dues need to be paid (either coming due soon or overdue)
  */
 const needsPayment = computed(() => {
   if (!memberData.value) return false;
   
-  const duesCurrentlyPaid = memberData.value.current_year_dues_paid === 'true';
-  const paymentTooOld = isPaymentOverOneYear.value;
-  
-  // Show banner if:
-  // 1. Dues are not currently paid (regardless of grace period)
-  // 2. OR payment is over 1 year old (even if marked as paid)
-  return !duesCurrentlyPaid || paymentTooOld;
+  // Show banner if dues are coming due soon OR overdue
+  return isDueSoon.value || isDuesOverdue.value;
 });
 
 // Computed properties
@@ -234,26 +317,51 @@ const shouldShowBanner = computed(() => {
 });
 
 const daysRemaining = computed(() => {
-  if (!memberData.value?.payment_due_date) return 0;
+  if (!nextDuesDate.value) return 0;
   
-  const dueDate = new Date(memberData.value.payment_due_date);
+  const dueDate = nextDuesDate.value;
   const today = new Date();
   const diffTime = dueDate.getTime() - today.getTime();
   const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
   
-  return Math.max(0, diffDays);
+  return diffDays; // Allow negative values for overdue
+});
+
+const isOverdue = computed(() => {
+  return isDuesOverdue.value;
 });
 
 const paymentMessage = computed(() => {
-  if (daysRemaining.value > 30) {
-    return `Your annual membership dues of €${config.value.membershipFee} are due in ${daysRemaining.value} days.`;
-  } else if (daysRemaining.value > 0) {
-    return `Your annual membership dues of €${config.value.membershipFee} are due in ${daysRemaining.value} days. Please pay soon to avoid account suspension.`;
+  if (isDuesOverdue.value) {
+    const overdueDays = Math.abs(daysRemaining.value);
+    return `Your annual membership dues of €${config.value.membershipFee} are ${overdueDays > 0 ? overdueDays + ' day' + (overdueDays !== 1 ? 's' : '') + ' ' : ''}overdue. Immediate payment is required to avoid account suspension.`;
+  } else if (isDueSoon.value) {
+    const dueDays = daysRemaining.value;
+    if (dueDays <= 7) {
+      return `Your annual membership dues of €${config.value.membershipFee} are due in ${dueDays} day${dueDays !== 1 ? 's' : ''}. Please pay immediately to avoid late fees.`;
+    } else {
+      return `Your annual membership dues of €${config.value.membershipFee} are due in ${dueDays} day${dueDays !== 1 ? 's' : ''}. Please pay soon to avoid account suspension.`;
+    }
   } else {
-    return `Your annual membership dues of €${config.value.membershipFee} are overdue. Your account may be suspended soon.`;
+    return `Your annual membership dues of €${config.value.membershipFee} require attention.`;
   }
 });
 
+const todayDate = computed(() => {
+  return new Date().toISOString().split('T')[0]; // YYYY-MM-DD format
+});
+
+const isDateInFuture = computed(() => {
+  if (!selectedPaymentDate.value) return false;
+  
+  const selectedDate = new Date(selectedPaymentDate.value);
+  const today = new Date();
+  today.setHours(0, 0, 0, 0); // Reset time to start of day
+  selectedDate.setHours(0, 0, 0, 0); // Reset time to start of day
+  
+  return selectedDate > today;
+});
+
 // Methods
 function dismissBanner() {
   dismissed.value = true;
@@ -268,38 +376,44 @@ function dismissBanner() {
 }
 
 async function markDuesAsPaid() {
-  if (!memberData.value?.Id) return;
+  if (!memberData.value?.Id || !selectedPaymentDate.value || isDateInFuture.value) return;
   
   updating.value = true;
   
   try {
-    // Update member's dues status
-    await $fetch(`/api/members/${memberData.value.Id}`, {
-      method: 'PUT',
+    // Call the API with the selected payment date using the correct endpoint
+    const response = await $fetch<{
+      success: boolean;
+      data: any;
+      message?: string;
+    }>(`/api/members/${memberData.value.Id}/mark-dues-paid`, {
+      method: 'post',
       body: {
-        current_year_dues_paid: 'true',
-        membership_date_paid: new Date().toISOString(),
-        payment_due_date: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toISOString() // Next year
+        paymentDate: selectedPaymentDate.value
       }
     });
 
-    // Update local member state
-    if (memberData.value) {
-      memberData.value.current_year_dues_paid = 'true';
-      memberData.value.membership_date_paid = new Date().toISOString();
+    if (response?.success && response.data) {
+      // Update local member state
+      if (memberData.value) {
+        memberData.value.current_year_dues_paid = 'true';
+        memberData.value.membership_date_paid = selectedPaymentDate.value;
+      }
+      
+      // Hide banner and reset
+      showBanner.value = false;
+      markAsPaidDialog.value = false;
+      selectedPaymentDate.value = '';
+      selectedPaymentModel.value = null;
+      
+      // Show success message
+      snackbar.value = {
+        show: true,
+        message: 'Dues marked as paid successfully!',
+        color: 'success'
+      };
     }
     
-    // Hide banner
-    showBanner.value = false;
-    markAsPaidDialog.value = false;
-    
-    // Show success message
-    snackbar.value = {
-      show: true,
-      message: 'Dues marked as paid successfully!',
-      color: 'success'
-    };
-    
   } catch (error: any) {
     console.error('Failed to mark dues as paid:', error);
     snackbar.value = {
@@ -312,18 +426,36 @@ async function markDuesAsPaid() {
   }
 }
 
-// Load member data for the current user
+// Initialize with today's date when dialog opens
+watch(markAsPaidDialog, (isOpen) => {
+  if (isOpen) {
+    const today = new Date();
+    selectedPaymentModel.value = today;
+    selectedPaymentDate.value = todayDate.value;
+  }
+});
+
+// Date picker handler
+const handleDateUpdate = (date: Date | null) => {
+  if (date) {
+    selectedPaymentDate.value = date.toISOString().split('T')[0];
+  }
+};
+
+const cancelPaymentDialog = () => {
+  markAsPaidDialog.value = false;
+  selectedPaymentDate.value = '';
+  selectedPaymentModel.value = null;
+};
+
+// Load member data for the current user from session
 async function loadMemberData() {
-  if (!user.value?.email) return;
+  if (!user.value) return;
   
   try {
-    const response = await $fetch('/api/members') as any;
-    const members = response?.data || response?.list || [];
-    
-    // Find member by email
-    const member = members.find((m: any) => m.email === user.value?.email);
-    if (member) {
-      memberData.value = member;
+    const response = await $fetch('/api/auth/session') as any;
+    if (response?.success && response?.member) {
+      memberData.value = response.member;
     }
   } catch (error) {
     console.warn('Failed to load member data:', error);
@@ -387,6 +519,17 @@ onMounted(() => {
   border-left: 4px solid #ff9800;
 }
 
+.dues-payment-banner.overdue-banner {
+  border-left: 4px solid #f44336;
+  animation: pulse-border 2s infinite;
+}
+
+@keyframes pulse-border {
+  0% { border-left-color: #f44336; }
+  50% { border-left-color: #ff5252; }
+  100% { border-left-color: #f44336; }
+}
+
 .banner-content {
   width: 100%;
 }
@@ -396,6 +539,76 @@ onMounted(() => {
   border: 1px solid rgba(255, 255, 255, 0.2) !important;
 }
 
+/* Date picker styling to match Vuetify */
+.date-picker-wrapper {
+  width: 100%;
+}
+
+.date-picker-label {
+  font-size: 16px;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: 0.009375em;
+  margin-bottom: 8px;
+  display: block;
+}
+
+/* Style the Vue DatePicker to match Vuetify inputs */
+:deep(.dp__input) {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 4px;
+  padding: 16px 12px;
+  padding-right: 48px; /* Make room for calendar icon */
+  font-size: 16px;
+  line-height: 1.5;
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  width: 100%;
+  min-height: 56px;
+}
+
+:deep(.dp__input:hover) {
+  border-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+
+:deep(.dp__input:focus) {
+  border-color: rgb(var(--v-theme-primary));
+  border-width: 2px;
+  outline: none;
+}
+
+:deep(.dp__input_readonly) {
+  cursor: pointer;
+}
+
+/* Style the date picker dropdown */
+:deep(.dp__menu) {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  background: rgb(var(--v-theme-surface));
+}
+
+/* Primary color theming for the date picker */
+:deep(.dp__primary_color) {
+  background-color: rgb(var(--v-theme-primary));
+}
+
+:deep(.dp__primary_text) {
+  color: rgb(var(--v-theme-primary));
+}
+
+:deep(.dp__active_date) {
+  background-color: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-on-primary));
+}
+
+:deep(.dp__today) {
+  border: 1px solid rgb(var(--v-theme-primary));
+}
+
 /* Mobile responsiveness */
 @media (max-width: 600px) {
   .banner-content .text-h6 {

components/EditMemberDialog.vue

@@ -8,10 +8,23 @@
   >
     <v-card>
       <v-card-title class="d-flex align-center pa-6 bg-primary">
-        <v-icon class="mr-3 text-white">mdi-account-edit</v-icon>
-        <h2 class="text-h5 text-white font-weight-bold flex-grow-1">
-          Edit Member: {{ member?.FullName || `${member?.first_name} ${member?.last_name}` }}
-        </h2>
+        <ProfileAvatar
+          v-if="member"
+          :member-id="member.member_id"
+          :member-name="member.FullName || `${member.first_name} ${member.last_name}`"
+          :first-name="member.first_name"
+          :last-name="member.last_name"
+          size="large"
+          class="mr-4"
+          clickable
+          show-border
+          @click="openImageLightbox"
+        />
+        <div class="flex-grow-1">
+          <h2 class="text-h5 text-white font-weight-bold">
+            Edit Member: {{ member?.FullName || `${member?.first_name} ${member?.last_name}` }}
+          </h2>
+        </div>
         <v-btn
           icon
           variant="text"
@@ -159,6 +172,8 @@
                 variant="outlined"
                 :error="hasFieldError('membership_date_paid')"
                 :error-messages="getFieldError('membership_date_paid')"
+                hint="Enter the actual date when dues were paid (can be historical)"
+                persistent-hint
               />
             </v-col>
             
@@ -170,8 +185,75 @@
                 variant="outlined"
                 :error="hasFieldError('payment_due_date')"
                 :error-messages="getFieldError('payment_due_date')"
+                hint="Enter when payment is due (for members in grace period)"
+                persistent-hint
               />
             </v-col>
+
+            <!-- Dues Status Preview -->
+            <v-col cols="12" v-if="duesPaid && form.membership_date_paid">
+              <v-card variant="tonal" :color="calculatedDuesStatus.color" class="pa-3">
+                <div class="d-flex align-center">
+                  <v-icon :color="calculatedDuesStatus.color" class="mr-2">
+                    {{ calculatedDuesStatus.icon }}
+                  </v-icon>
+                  <div>
+                    <div class="text-subtitle-2 font-weight-bold">
+                      Calculated Dues Status: {{ calculatedDuesStatus.text }}
+                    </div>
+                    <div class="text-caption">
+                      {{ calculatedDuesStatus.message }}
+                    </div>
+                  </div>
+                </div>
+              </v-card>
+            </v-col>
+
+            <!-- Portal Access Control Section (Admin Only) -->
+            <template v-if="isAdmin && member?.keycloak_id">
+              <v-col cols="12">
+                <v-divider class="my-4" />
+                <h3 class="text-h6 mb-4 text-primary">Portal Access Control</h3>
+              </v-col>
+
+              <v-col cols="12" md="6">
+                <v-select
+                  v-model="form.portal_group"
+                  :items="portalGroupOptions"
+                  label="Portal Access Level"
+                  variant="outlined"
+                  hint="Controls user's access level in the portal"
+                  persistent-hint
+                  :loading="groupLoading"
+                  :disabled="groupLoading"
+                  :error="hasFieldError('portal_group')"
+                  :error-messages="getFieldError('portal_group')"
+                >
+                  <template #prepend-inner>
+                    <v-icon color="primary">mdi-shield-account</v-icon>
+                  </template>
+                </v-select>
+              </v-col>
+
+              <v-col cols="12" md="6">
+                <v-alert 
+                  v-if="groupSyncStatus"
+                  :type="groupSyncStatus.type"
+                  :text="groupSyncStatus.message"
+                  density="compact"
+                  class="mb-0"
+                />
+                <v-chip
+                  v-else-if="member.keycloak_id"
+                  color="success"
+                  size="small"
+                  class="mt-2"
+                >
+                  <v-icon start size="small">mdi-check-circle</v-icon>
+                  Portal Account Active
+                </v-chip>
+              </v-col>
+            </template>
           </v-row>
         </v-form>
       </v-card-text>
@@ -197,10 +279,43 @@
       </v-card-actions>
     </v-card>
   </v-dialog>
+
+  <!-- Image Lightbox -->
+  <v-dialog
+    v-model="showImageLightbox"
+    max-width="800"
+    @click:outside="showImageLightbox = false"
+  >
+    <v-card class="pa-0" v-if="member && lightboxImageUrl">
+      <v-card-title class="d-flex align-center pa-4">
+        <span class="text-h6">{{ member.FullName || `${member.first_name} ${member.last_name}` }} - Profile Photo</span>
+        <v-spacer />
+        <v-btn
+          icon
+          variant="text"
+          @click="showImageLightbox = false"
+        >
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
+      <v-card-text class="pa-4">
+        <div class="text-center">
+          <v-img
+            :src="lightboxImageUrl"
+            :alt="`${member.FullName || `${member.first_name} ${member.last_name}`} profile photo`"
+            max-height="500"
+            contain
+            class="mx-auto"
+          />
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script setup lang="ts">
 import type { Member } from '~/utils/types';
+import { isPaymentOverOneYear, isDuesActuallyCurrent, calculateOverdueDays } from '~/utils/dues-calculations';
 
 interface Props {
   modelValue: boolean;
@@ -220,6 +335,10 @@ const formRef = ref();
 const formValid = ref(false);
 const loading = ref(false);
 
+// Lightbox state
+const showImageLightbox = ref(false);
+const lightboxImageUrl = ref<string | null>(null);
+
 // Form data - using snake_case field names
 const form = ref({
   first_name: '',
@@ -233,7 +352,8 @@ const form = ref({
   member_since: '',
   current_year_dues_paid: 'false',
   membership_date_paid: '',
-  payment_due_date: ''
+  payment_due_date: '',
+  portal_group: 'user'
 });
 
 // Additional form state
@@ -243,23 +363,134 @@ const phoneData = ref(null);
 // Error handling
 const fieldErrors = ref<Record<string, string>>({});
 
+// Computed dues status calculation
+const calculatedDuesStatus = computed(() => {
+  if (!duesPaid.value || !form.value.membership_date_paid) {
+    return {
+      color: 'grey',
+      icon: 'mdi-help',
+      text: 'Unknown',
+      message: 'Please enter payment date to calculate status'
+    };
+  }
+
+  // Create a mock member object with form data to use calculation functions
+  const mockMember = {
+    current_year_dues_paid: 'true',
+    membership_date_paid: form.value.membership_date_paid,
+    payment_due_date: form.value.payment_due_date,
+    member_since: form.value.member_since
+  } as Member;
+
+  const isOverdue = !isDuesActuallyCurrent(mockMember);
+  const paymentTooOld = isPaymentOverOneYear(mockMember);
+
+  if (isOverdue && paymentTooOld) {
+    const overdueDays = calculateOverdueDays(mockMember);
+    return {
+      color: 'error',
+      icon: 'mdi-alert-circle',
+      text: 'Overdue',
+      message: `Payment is ${overdueDays} days overdue (more than 1 year since payment)`
+    };
+  } else if (isOverdue) {
+    return {
+      color: 'warning',
+      icon: 'mdi-clock-alert',
+      text: 'Due Soon',
+      message: 'Dues will be due soon based on payment date'
+    };
+  } else {
+    const paymentDate = new Date(form.value.membership_date_paid);
+    const nextDue = new Date(paymentDate);
+    nextDue.setFullYear(nextDue.getFullYear() + 1);
+    const nextDueFormatted = nextDue.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+    
+    return {
+      color: 'success',
+      icon: 'mdi-check-circle',
+      text: 'Current',
+      message: `Dues are current. Next payment due: ${nextDueFormatted}`
+    };
+  }
+});
+
+// Auth state
+const { user, isAdmin } = useAuth();
+
+// Portal group management
+const groupLoading = ref(false);
+const groupSyncStatus = ref<{ type: 'success' | 'warning' | 'error'; message: string } | null>(null);
+const originalPortalGroup = ref<string>('user');
+
+const portalGroupOptions = [
+  { title: 'User - Basic Access', value: 'user' },
+  { title: 'Board Member - Extended Access', value: 'board' },
+  { title: 'Administrator - Full Access', value: 'admin' }
+];
+
+// Watch for portal group changes and sync with Keycloak
+watch(() => form.value.portal_group, async (newGroup, oldGroup) => {
+  if (!props.member?.keycloak_id || !isAdmin || newGroup === oldGroup || newGroup === originalPortalGroup.value) {
+    return;
+  }
+
+  console.log('[EditMemberDialog] Portal group changed:', oldGroup, '->', newGroup);
+  
+  groupLoading.value = true;
+  groupSyncStatus.value = null;
+
+  try {
+    console.log('[EditMemberDialog] Updating Keycloak groups for member:', props.member.Id);
+    
+    const response = await $fetch(`/api/members/${props.member.Id}/keycloak-groups`, {
+      method: 'PUT',
+      body: { newGroup }
+    });
+
+    if (response.success) {
+      groupSyncStatus.value = {
+        type: 'success',
+        message: `Successfully changed access level to ${newGroup}`
+      };
+      originalPortalGroup.value = newGroup; // Update original to prevent re-trigger
+      console.log('[EditMemberDialog] Group change successful:', response.data);
+    } else {
+      throw new Error(response.message || 'Failed to update access level');
+    }
+
+  } catch (error: any) {
+    console.error('[EditMemberDialog] Failed to update Keycloak groups:', error);
+    
+    groupSyncStatus.value = {
+      type: 'error',
+      message: error.data?.message || error.message || 'Failed to update access level'
+    };
+    
+    // Revert the form value on error
+    form.value.portal_group = oldGroup || 'user';
+    
+  } finally {
+    groupLoading.value = false;
+    
+    // Clear status after 5 seconds
+    setTimeout(() => {
+      groupSyncStatus.value = null;
+    }, 5000);
+  }
+});
+
 // Watch dues paid switch
 watch(duesPaid, (newValue) => {
   form.value.current_year_dues_paid = newValue ? 'true' : 'false';
   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];
-    }
   }
 });
 
@@ -334,7 +565,8 @@ const populateForm = () => {
     member_since: formatDateForInput(member.member_since || ''),
     current_year_dues_paid: member.current_year_dues_paid || 'false',
     membership_date_paid: formatDateForInput(member.membership_date_paid || ''),
-    payment_due_date: formatDateForInput(member.payment_due_date || '')
+    payment_due_date: formatDateForInput(member.payment_due_date || ''),
+    portal_group: member.portal_group || 'user'
   };
   
   // Set dues paid switch based on the string value
@@ -426,6 +658,23 @@ watch(() => props.member, (newMember) => {
     populateForm();
   }
 });
+
+// Lightbox functionality
+const openImageLightbox = async () => {
+  if (!props.member?.member_id) return;
+  
+  try {
+    // Fetch the original sized image for the lightbox
+    const response = await $fetch(`/api/profile/image/${props.member.member_id}/medium`) as any;
+    if (response?.success && response?.imageUrl) {
+      lightboxImageUrl.value = response.imageUrl;
+      showImageLightbox.value = true;
+    }
+  } catch (error) {
+    console.warn('Could not load image for lightbox:', error);
+    // Could show a snackbar here if needed
+  }
+};
 </script>
 
 <style scoped>

components/EventCalendar.vue

@@ -25,14 +25,19 @@
             v-model="mobileView"
             color="primary"
             variant="outlined"
-            density="compact"
+            density="comfortable"
             mandatory
+            class="w-100"
           >
-            <v-btn value="month">
+            <v-btn value="week" class="flex-grow-1">
+              <v-icon start>mdi-calendar-week</v-icon>
+              Week
+            </v-btn>
+            <v-btn value="month" class="flex-grow-1">
               <v-icon start>mdi-calendar-month</v-icon>
               Month
             </v-btn>
-            <v-btn value="list">
+            <v-btn value="list" class="flex-grow-1">
               <v-icon start>mdi-format-list-bulleted</v-icon>
               Agenda
             </v-btn>
@@ -58,7 +63,7 @@
 
       <!-- No events message -->
       <v-alert
-        v-if="!loading && events.length === 0"
+        v-if="!loading && (!events || events.length === 0)"
         type="info"
         variant="tonal"
         class="mt-4"
@@ -108,7 +113,7 @@ const { isBoard, isAdmin } = useAuth();
 
 // Reactive state
 const fullCalendar = ref<InstanceType<typeof FullCalendar>>();
-const mobileView = ref('month');
+const mobileView = ref('week'); // Default to week view on mobile
 
 // Computed properties
 const calendarHeight = computed(() => {
@@ -122,14 +127,47 @@ const currentView = computed(() => {
   
   // Mobile responsive view switching
   if (process.client && window.innerWidth < 960) {
-    return mobileView.value === 'list' ? 'listWeek' : 'dayGridMonth';
+    switch (mobileView.value) {
+      case 'week': return 'dayGridWeek';
+      case 'list': return 'listWeek';
+      case 'month': 
+      default: return 'dayGridMonth';
+    }
   }
   
   return props.initialView;
 });
 
 const transformedEvents = computed((): FullCalendarEvent[] => {
-  return props.events.map((event: Event) => transformEventForCalendar(event));
+  console.log('[EventCalendar] Raw events received:', props.events.length);
+  console.log('[EventCalendar] Raw events array:', props.events);
+  
+  props.events.forEach((event, index) => {
+    console.log(`[EventCalendar] Event ${index + 1}:`, {
+      id: event.id,
+      title: event.title,
+      start_datetime: event.start_datetime,
+      end_datetime: event.end_datetime,
+      event_type: event.event_type
+    });
+  });
+  
+  const transformed = props.events.map((event: Event) => transformEventForCalendar(event));
+  
+  console.log('[EventCalendar] Transformed events for FullCalendar:', transformed.length);
+  console.log('[EventCalendar] Transformed events array:', transformed);
+  
+  transformed.forEach((event, index) => {
+    console.log(`[EventCalendar] Transformed Event ${index + 1}:`, {
+      id: event.id,
+      title: event.title,
+      start: event.start,
+      end: event.end,
+      backgroundColor: event.backgroundColor
+    });
+  });
+  
+  return transformed;
 });
 
 // FullCalendar options
@@ -143,7 +181,7 @@ const calendarOptions = computed(() => ({
     right: process.client && window.innerWidth < 960 ? 
       'dayGridMonth,listWeek' : 
       'dayGridMonth,dayGridWeek,listWeek'
-  },
+  } as any,
   events: transformedEvents.value,
   eventClick: handleEventClick,
   dateClick: handleDateClick,
@@ -153,8 +191,8 @@ const calendarOptions = computed(() => ({
   eventDisplay: 'block',
   displayEventTime: true,
   eventTimeFormat: {
-    hour: '2-digit',
-    minute: '2-digit',
+    hour: '2-digit' as const,
+    minute: '2-digit' as const,
     hour12: false
   },
   locale: 'en',
@@ -230,6 +268,15 @@ function handleEventMount(mountInfo: any) {
 
 // Transform event data for FullCalendar
 function transformEventForCalendar(event: Event): FullCalendarEvent {
+  console.log('[EventCalendar] Transforming event:', {
+    id: event.id,
+    event_id: event.event_id,
+    title: event.title,
+    start_datetime: event.start_datetime,
+    end_datetime: event.end_datetime,
+    event_type: event.event_type
+  });
+  
   const eventTypeColors = {
     'meeting': { bg: '#2196f3', border: '#1976d2' },
     'social': { bg: '#4caf50', border: '#388e3c' },
@@ -241,29 +288,73 @@ function transformEventForCalendar(event: Event): FullCalendarEvent {
   const colors = eventTypeColors[event.event_type] || 
     { bg: '#757575', border: '#424242' };
 
-  return {
-    id: event.id,
+  // Use event_id as the primary identifier for FullCalendar uniqueness
+  const calendarId = event.event_id || event.id || `temp_${(event as any).Id}_${Date.now()}`;
+  console.log('[EventCalendar] Using calendar ID:', calendarId, 'from event_id:', event.event_id, 'fallback id:', event.id);
+
+  // Ensure dates are properly formatted for FullCalendar
+  let startDate: string | Date;
+  let endDate: string | Date;
+  
+  try {
+    // Convert to Date objects first to validate, then use ISO strings
+    const startDateObj = new Date(event.start_datetime);
+    const endDateObj = new Date(event.end_datetime);
+    
+    if (isNaN(startDateObj.getTime()) || isNaN(endDateObj.getTime())) {
+      console.error('[EventCalendar] Invalid date values for event:', calendarId, {
+        start: event.start_datetime,
+        end: event.end_datetime
+      });
+      // Use fallback dates
+      startDate = new Date().toISOString();
+      endDate = new Date(Date.now() + 3600000).toISOString(); // +1 hour
+    } else {
+      startDate = startDateObj.toISOString();
+      endDate = endDateObj.toISOString();
+    }
+  } catch (error) {
+    console.error('[EventCalendar] Date parsing error for event:', calendarId, error);
+    // Use fallback dates
+    startDate = new Date().toISOString();
+    endDate = new Date(Date.now() + 3600000).toISOString(); // +1 hour
+  }
+
+  const transformedEvent = {
+    id: calendarId, // ✅ Use event_id instead of event.id
     title: event.title,
-    start: event.start_datetime,
-    end: event.end_datetime,
+    start: startDate,
+    end: endDate,
     backgroundColor: colors.bg,
     borderColor: colors.border,
     textColor: '#ffffff',
     extendedProps: {
+      originalEvent: event, // Store original event for debugging
       description: event.description,
       location: event.location,
       event_type: event.event_type,
       is_paid: event.is_paid === 'true',
       cost_members: event.cost_members,
       cost_non_members: event.cost_non_members,
-      max_attendees: event.max_attendees ? parseInt(event.max_attendees) : null,
-      current_attendees: event.current_attendees || 0,
+      max_attendees: event.max_attendees ? parseInt(event.max_attendees) : undefined,
+      current_attendees: typeof event.current_attendees === 'string' ? parseInt(event.current_attendees) : (event.current_attendees || 0),
       user_rsvp: event.user_rsvp,
       visibility: event.visibility,
       creator: event.creator,
-      status: event.status
+      event_id: event.event_id, // Store for reference
+      database_id: event.id || (event as any).Id
     }
   };
+  
+  console.log('[EventCalendar] Transformed event result:', {
+    id: transformedEvent.id,
+    title: transformedEvent.title,
+    start: transformedEvent.start,
+    end: transformedEvent.end,
+    backgroundColor: transformedEvent.backgroundColor
+  });
+  
+  return transformedEvent;
 }
 
 // Public methods
@@ -294,7 +385,13 @@ function gotoDate(date: string | Date) {
 
 // Watch for mobile view changes
 watch(mobileView, (newView) => {
-  const viewType = newView === 'list' ? 'listWeek' : 'dayGridMonth';
+  let viewType;
+  switch (newView) {
+    case 'week': viewType = 'dayGridWeek'; break;
+    case 'list': viewType = 'listWeek'; break;
+    case 'month': 
+    default: viewType = 'dayGridMonth'; break;
+  }
   changeView(viewType);
 });
 

components/EventDetailsDialog.vue

@@ -1,10 +1,10 @@
 <template>
   <v-dialog v-model="show" max-width="600" persistent>
     <v-card v-if="event">
-      <v-card-title class="d-flex justify-space-between align-center">
+    <v-card-title class="d-flex justify-space-between align-center">
         <div class="d-flex align-center">
           <v-icon class="me-2" :color="eventTypeColor">{{ eventTypeIcon }}</v-icon>
-          <span>{{ event.title }}</span>
+          <span>{{ event?.title || 'Event Details' }}</span>
         </div>
         <v-btn
           @click="close"
@@ -55,7 +55,11 @@
               <v-icon class="me-2 mt-1">mdi-text</v-icon>
               <div>
                 <div class="font-weight-medium mb-1">Description</div>
-                <div class="text-body-2">{{ event.description }}</div>
+                <!-- Display HTML content safely -->
+                <div 
+                  class="text-body-2 rich-text-content"
+                  v-html="event.description"
+                />
               </div>
             </div>
           </v-col>
@@ -187,7 +191,29 @@
             RSVP to this Event
           </v-card-title>
           <v-card-text class="pt-0">
-            <v-form v-model="rsvpValid" @submit.prevent="submitRSVP">
+            <v-form v-model="rsvpValid">
+              <!-- Guest Selection (if event allows guests) -->
+              <div v-if="allowsGuests" class="mb-4">
+                <v-card variant="tonal" class="mb-3">
+                  <v-card-text class="py-3">
+                    <div class="d-flex align-center mb-2">
+                      <v-icon class="me-2">mdi-account-group</v-icon>
+                      <span class="font-weight-medium">Bring Guests</span>
+                    </div>
+                    <p class="text-body-2 text-medium-emphasis mb-3">
+                      This event allows up to {{ maxGuestsAllowed }} additional guests per person.
+                    </p>
+                    <v-select
+                      v-model="selectedGuests"
+                      :items="guestOptions"
+                      label="Number of Additional Guests"
+                      variant="outlined"
+                      density="compact"
+                    />
+                  </v-card-text>
+                </v-card>
+              </div>
+
               <v-textarea
                 v-model="rsvpNotes"
                 label="Notes (optional)"
@@ -196,27 +222,18 @@
                 class="mb-3"
               />
               
-              <div class="d-flex gap-2">
-                <v-btn
-                  @click="submitRSVP('confirmed')"
-                  color="success"
-                  :loading="rsvpLoading"
-                  :disabled="isEventFull && !isWaitlistAvailable"
-                >
-                  <v-icon start>mdi-check</v-icon>
-                  {{ isEventFull ? 'Join Waitlist' : 'Confirm Attendance' }}
-                </v-btn>
-                
-                <v-btn
-                  @click="submitRSVP('declined')"
-                  color="error"
-                  variant="outlined"
-                  :loading="rsvpLoading"
-                >
-                  <v-icon start>mdi-close</v-icon>
-                  Decline
-                </v-btn>
-              </div>
+              <v-btn
+                @click="submitRSVP('confirmed')"
+                color="primary"
+                :loading="rsvpLoading"
+                :disabled="isEventFull && !isWaitlistAvailable"
+                size="large"
+                block
+                class="mb-2"
+              >
+                <v-icon start>mdi-check</v-icon>
+                {{ isEventFull ? 'Join Waitlist' : 'RSVP' }}
+              </v-btn>
             </v-form>
           </v-card-text>
         </v-card>
@@ -243,6 +260,18 @@
       </v-card-text>
 
       <v-card-actions class="pa-4">
+        <!-- Delete button for admin/board -->
+        <v-btn
+          v-if="canDeleteEvent"
+          @click="showDeleteConfirm = true"
+          color="error"
+          variant="outlined"
+          prepend-icon="mdi-delete"
+          :loading="deleteLoading"
+        >
+          Delete Event
+        </v-btn>
+        
         <v-spacer />
         <v-btn
           @click="close"
@@ -252,13 +281,89 @@
         </v-btn>
       </v-card-actions>
     </v-card>
+
+    <!-- Delete Confirmation Dialog -->
+    <v-dialog v-model="showDeleteConfirm" max-width="500" persistent>
+      <v-card>
+        <v-card-title class="d-flex align-center">
+          <v-icon class="me-2 text-error">mdi-alert</v-icon>
+          Delete Event
+        </v-card-title>
+        
+        <v-card-text>
+          <v-alert type="warning" variant="tonal" class="mb-4">
+            <v-alert-title>Warning: This action cannot be undone</v-alert-title>
+            This will permanently delete the event and all associated RSVP data.
+          </v-alert>
+          
+          <p class="text-body-1 mb-4">
+            Are you sure you want to delete "<strong>{{ event?.title }}</strong>"?
+          </p>
+          
+          <div class="text-body-2 text-medium-emphasis">
+            <div v-if="event?.current_attendees && parseInt(event.current_attendees) > 0">
+              <v-icon size="small" class="me-1">mdi-information</v-icon>
+              This event has {{ event.current_attendees }} confirmed attendees. Their RSVPs will also be deleted.
+            </div>
+          </div>
+        </v-card-text>
+        
+        <v-card-actions class="pa-4">
+          <v-spacer />
+          <v-btn
+            @click="showDeleteConfirm = false"
+            variant="outlined"
+            :disabled="deleteLoading"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            @click="handleDeleteEvent"
+            color="error"
+            :loading="deleteLoading"
+          >
+            Delete Event
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-dialog>
 </template>
 
 <script setup lang="ts">
 import type { Event, EventRSVP } from '~/utils/types';
 import { useEvents } from '~/composables/useEvents';
-import { format } from 'date-fns';
+import { useAuth } from '~/composables/useAuth';
+// Helper function to replace date-fns format
+const formatDate = (date: Date, formatStr: string): string => {
+  if (formatStr === 'EEEE, MMMM d, yyyy') {
+    return date.toLocaleDateString('en-US', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+  } else if (formatStr === 'MMM d') {
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric'
+    });
+  } else if (formatStr === 'MMM d, yyyy') {
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  } else if (formatStr === 'HH:mm') {
+    return date.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    });
+  }
+  
+  return date.toLocaleDateString();
+};
 
 interface Props {
   modelValue: boolean;
@@ -272,12 +377,16 @@ const emit = defineEmits<{
   'rsvp-updated': [event: Event];
 }>();
 
-const { rsvpToEvent } = useEvents();
+const { rsvpToEvent, deleteEvent } = useEvents();
+const { isAdmin, isBoard } = useAuth();
 
 // Reactive state
 const rsvpValid = ref(false);
 const rsvpLoading = ref(false);
 const rsvpNotes = ref('');
+const selectedGuests = ref(0);
+const deleteLoading = ref(false);
+const showDeleteConfirm = ref(false);
 
 // Computed properties
 const show = computed({
@@ -285,6 +394,7 @@ const show = computed({
   set: (value) => emit('update:modelValue', value)
 });
 
+
 const userRSVP = computed((): EventRSVP | null => {
   return props.event?.user_rsvp || null;
 });
@@ -303,7 +413,9 @@ const isPastEvent = computed(() => {
 const isEventFull = computed(() => {
   if (!props.event?.max_attendees) return false;
   const maxAttendees = parseInt(props.event.max_attendees);
-  const currentAttendees = props.event.current_attendees || 0;
+  const currentAttendees = typeof props.event.current_attendees === 'string' 
+    ? parseInt(props.event.current_attendees) || 0
+    : props.event.current_attendees || 0;
   return currentAttendees >= maxAttendees;
 });
 
@@ -348,9 +460,9 @@ const formatEventDate = computed(() => {
   const endDate = new Date(props.event.end_datetime);
   
   if (startDate.toDateString() === endDate.toDateString()) {
-    return format(startDate, 'EEEE, MMMM d, yyyy');
+    return formatDate(startDate, 'EEEE, MMMM d, yyyy');
   } else {
-    return `${format(startDate, 'MMM d')} - ${format(endDate, 'MMM d, yyyy')}`;
+    return `${formatDate(startDate, 'MMM d')} - ${formatDate(endDate, 'MMM d, yyyy')}`;
   }
 });
 
@@ -359,13 +471,15 @@ const formatEventTime = computed(() => {
   const startDate = new Date(props.event.start_datetime);
   const endDate = new Date(props.event.end_datetime);
   
-  return `${format(startDate, 'HH:mm')} - ${format(endDate, 'HH:mm')}`;
+  return `${formatDate(startDate, 'HH:mm')} - ${formatDate(endDate, 'HH:mm')}`;
 });
 
 const capacityPercentage = computed(() => {
   if (!props.event?.max_attendees) return 0;
   const max = parseInt(props.event.max_attendees);
-  const current = props.event.current_attendees || 0;
+  const current = typeof props.event.current_attendees === 'string' 
+    ? parseInt(props.event.current_attendees) || 0
+    : props.event.current_attendees || 0;
   return (current / max) * 100;
 });
 
@@ -427,6 +541,56 @@ const paymentInfo = computed(() => ({
   recipient: 'MonacoUSA Association' // This should come from config
 }));
 
+// Guest functionality
+const allowsGuests = computed(() => {
+  return props.event?.guests_permitted === 'true';
+});
+
+const maxGuestsAllowed = computed(() => {
+  if (!allowsGuests.value) return 0;
+  return parseInt(props.event?.max_guests_permitted || '0');
+});
+
+const guestOptions = computed(() => {
+  const max = maxGuestsAllowed.value;
+  const options = [];
+  for (let i = 0; i <= max; i++) {
+    options.push({
+      title: i === 0 ? 'No additional guests' : `${i} guest${i > 1 ? 's' : ''}`,
+      value: i
+    });
+  }
+  return options;
+});
+
+// Admin/Board permissions
+const canDeleteEvent = computed(() => {
+  console.log('[EventDetailsDialog] canDeleteEvent computed triggered');
+  console.log('[EventDetailsDialog] Auth composable values:', {
+    isAdmin: isAdmin.value,
+    isBoard: isBoard.value,
+    typeof_isAdmin: typeof isAdmin.value,
+    typeof_isBoard: typeof isBoard.value
+  });
+  
+  const canDelete = isAdmin.value || isBoard.value;
+  console.log('[EventDetailsDialog] Final canDelete result:', canDelete);
+  return canDelete;
+});
+
+// Add watcher to see when dialog opens
+watch(() => show.value, (newValue) => {
+  if (newValue) {
+    console.log('[EventDetailsDialog] Dialog opened');
+    console.log('[EventDetailsDialog] Event prop:', props.event);
+    console.log('[EventDetailsDialog] Auth status check on open:', {
+      isAdmin: isAdmin.value,
+      isBoard: isBoard.value,
+      canDelete: canDeleteEvent.value
+    });
+  }
+});
+
 // Methods
 const close = () => {
   show.value = false;
@@ -434,22 +598,73 @@ const close = () => {
 };
 
 const submitRSVP = async (status: 'confirmed' | 'declined') => {
-  if (!props.event) return;
+  console.log('[EventDetailsDialog] submitRSVP called with status:', status);
+  
+  if (!props.event) {
+    console.error('[EventDetailsDialog] No event provided');
+    return;
+  }
   
   rsvpLoading.value = true;
   
   try {
-    await rsvpToEvent(props.event.id, {
+    // Use event_id field for consistent RSVP relationships
+    // This ensures RSVPs are linked properly to events using the business identifier
+    let eventId = props.event.event_id || 
+                 (props.event as any).extendedProps?.event_id ||
+                 (props.event as any).Id || // Fallback to database ID if event_id not available
+                 props.event.id ||
+                 (props.event as any).id; // Additional fallback
+    
+    // Direct access to Id field as backup
+    if (!eventId && 'Id' in props.event) {
+      eventId = (props.event as any)['Id'];
+      console.log('[EventDetailsDialog] Found Id via direct property access:', eventId);
+    }
+    
+    // Try to access the Id property using Object.keys approach
+    if (!eventId) {
+      const keys = Object.keys(props.event);
+      console.log('[EventDetailsDialog] Available keys:', keys);
+      if (keys.includes('Id')) {
+        eventId = props.event['Id' as keyof Event];
+        console.log('[EventDetailsDialog] Found Id via keys lookup:', eventId);
+      }
+    }
+    
+    console.log('[EventDetailsDialog] Using event identifier for RSVP:', eventId);
+    console.log('[EventDetailsDialog] Event object keys:', Object.keys(props.event));
+    console.log('[EventDetailsDialog] Event event_id field:', props.event.event_id);
+    console.log('[EventDetailsDialog] Event database Id field:', (props.event as any).Id);
+    console.log('[EventDetailsDialog] Event id field:', props.event.id);
+    console.log('[EventDetailsDialog] Full event object:', JSON.stringify(props.event, null, 2));
+    
+    if (!eventId) {
+      console.error('[EventDetailsDialog] Unable to determine event identifier');
+      throw new Error('Unable to determine event identifier');
+    }
+    
+    console.log('[EventDetailsDialog] Calling rsvpToEvent with:', {
+      eventId,
+      status,
+      notes: rsvpNotes.value,
+      guests: selectedGuests.value
+    });
+    
+    const result = await rsvpToEvent(eventId, {
       member_id: '', // This will be filled by the composable
       rsvp_status: status,
-      rsvp_notes: rsvpNotes.value
+      rsvp_notes: rsvpNotes.value,
+      extra_guests: selectedGuests.value.toString()
     });
     
+    console.log('[EventDetailsDialog] RSVP submitted successfully:', result);
+    
     emit('rsvp-updated', props.event);
     // TODO: Show success message
     
   } catch (error) {
-    console.error('Error submitting RSVP:', error);
+    console.error('[EventDetailsDialog] Error submitting RSVP:', error);
     // TODO: Show error message
   } finally {
     rsvpLoading.value = false;
@@ -477,11 +692,42 @@ Reference: ${userRSVP.value?.payment_reference}
   
   try {
     await navigator.clipboard.writeText(details);
-    // TODO: Show success toast
-    console.log('Payment details copied to clipboard');
   } catch (error) {
     console.error('Error copying to clipboard:', error);
-    // TODO: Show error toast
+  }
+};
+
+const handleDeleteEvent = async () => {
+  if (!props.event) return;
+  
+  deleteLoading.value = true;
+  
+  try {
+    // Use the correct event identifier for deletion
+    const eventId = (props.event as any).Id || props.event.id || props.event.event_id;
+    
+    if (!eventId) {
+      throw new Error('Unable to determine event ID for deletion');
+    }
+    
+    console.log('[EventDetailsDialog] Deleting event with ID:', eventId);
+    
+    const result = await deleteEvent(eventId.toString());
+    
+    console.log('[EventDetailsDialog] Event deleted successfully:', result);
+    
+    // Close both dialogs
+    showDeleteConfirm.value = false;
+    show.value = false;
+    
+    // Emit event for parent component to refresh
+    emit('rsvp-updated', props.event);
+    
+  } catch (error) {
+    console.error('[EventDetailsDialog] Error deleting event:', error);
+    // TODO: Show error message to user
+  } finally {
+    deleteLoading.value = false;
   }
 };
 </script>
@@ -499,4 +745,65 @@ Reference: ${userRSVP.value?.payment_reference}
 .v-progress-linear {
   max-width: 200px;
 }
+
+/* Rich text content styling */
+.rich-text-content {
+  word-wrap: break-word;
+  line-height: 1.5;
+}
+
+.rich-text-content :deep(h1),
+.rich-text-content :deep(h2),
+.rich-text-content :deep(h3) {
+  color: rgb(var(--v-theme-on-surface));
+  font-weight: 600;
+  margin: 16px 0 8px 0;
+}
+
+.rich-text-content :deep(h1) {
+  font-size: 1.5rem;
+}
+
+.rich-text-content :deep(h2) {
+  font-size: 1.25rem;
+}
+
+.rich-text-content :deep(h3) {
+  font-size: 1.125rem;
+}
+
+.rich-text-content :deep(p) {
+  margin: 8px 0;
+}
+
+.rich-text-content :deep(ul),
+.rich-text-content :deep(ol) {
+  padding-left: 20px;
+  margin: 8px 0;
+}
+
+.rich-text-content :deep(li) {
+  margin: 4px 0;
+}
+
+.rich-text-content :deep(strong) {
+  font-weight: 600;
+}
+
+.rich-text-content :deep(em) {
+  font-style: italic;
+}
+
+.rich-text-content :deep(u) {
+  text-decoration: underline;
+}
+
+.rich-text-content :deep(a) {
+  color: rgb(var(--v-theme-primary));
+  text-decoration: none;
+}
+
+.rich-text-content :deep(a:hover) {
+  text-decoration: underline;
+}
 </style>

components/MemberCard.vue

@@ -1,10 +1,23 @@
 <template>
   <v-card
     class="member-card"
-    :class="{ 'member-card--inactive': !isActive }"
+    :class="{ 
+      'member-card--inactive': !isActive,
+      'member-card--overdue': isOverdue,
+      'member-card--due-soon': isDuesComingDue
+    }"
     elevation="2"
     @click="$emit('view', member)"
   >
+    <!-- Status Stripe -->
+    <div 
+      v-if="isOverdue || isDuesComingDue" 
+      class="status-stripe"
+      :class="{
+        'status-stripe--overdue': isOverdue,
+        'status-stripe--due-soon': isDuesComingDue
+      }"
+    />
     <!-- Member Status Badge -->
     <div class="member-status-badge">
       <v-chip
@@ -20,7 +33,21 @@
     </div>
 
     <!-- Action Buttons -->
-    <div v-if="canEdit || canDelete || (!member.keycloak_id && canCreatePortalAccount)" class="member-action-buttons">
+    <div v-if="canEdit || canDelete || (!member.keycloak_id && canCreatePortalAccount) || shouldShowEmailButton" class="member-action-buttons">
+      <!-- Email Button for Overdue/Due Soon Members -->
+      <v-btn
+        v-if="shouldShowEmailButton"
+        icon
+        size="small"
+        variant="text"
+        :color="isOverdue ? 'error' : 'warning'"
+        :loading="emailLoading"
+        @click.stop="sendDuesReminder"
+        :title="'Send Dues Reminder to ' + member.FullName"
+      >
+        <v-icon>mdi-email-alert</v-icon>
+      </v-btn>
+      
       <v-btn
         v-if="canEdit"
         icon
@@ -60,21 +87,20 @@
     </div>
 
     <!-- Card Content -->
-    <v-card-text class="pb-4">
-      <div class="d-flex align-center mb-3">
-        <v-avatar
-          :color="avatarColor"
-          size="48"
+    <v-card-text class="pb-4 pt-3">
+      <div class="d-flex align-center mb-2">
+        <ProfileAvatar
+          :member-id="member.member_id"
+          :member-name="displayName"
+          :first-name="member.first_name"
+          :last-name="member.last_name"
+          size="medium"
           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 class="text-subtitle-1 font-weight-bold mb-1">
+            {{ displayName }}
           </h3>
           <div class="nationality-display">
             <template v-if="nationalitiesArray.length > 0">
@@ -92,14 +118,14 @@
                 </div>
                 <!-- Display country names -->
                 <div class="country-names">
-                  <span class="text-body-2 text-medium-emphasis">
+                  <span class="text-caption text-medium-emphasis">
                     {{ nationalitiesArray.map(n => getCountryName(n)).join(', ') }}
                   </span>
                 </div>
               </div>
             </template>
             <template v-else>
-              <span class="text-body-2 text-medium-emphasis">
+              <span class="text-caption text-medium-emphasis">
                 Unknown
               </span>
             </template>
@@ -107,83 +133,79 @@
         </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>
+      <!-- Member Info - More Compact -->
+      <div class="member-info mb-2">
+        <div class="info-row mb-1" v-if="member.email">
+          <v-icon size="14" class="mr-2 text-medium-emphasis">mdi-email</v-icon>
+          <span class="text-caption">{{ member.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 class="info-row mb-1" v-if="member.phone">
+          <v-icon size="14" class="mr-2 text-medium-emphasis">mdi-phone</v-icon>
+          <span class="text-caption">{{ 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 class="info-row mb-1" v-if="member.member_since">
+          <v-icon size="14" class="mr-2 text-medium-emphasis">mdi-calendar</v-icon>
+          <span class="text-caption">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>
+      <!-- Status Section - Reorganized -->
+      <div class="status-section">
+        <!-- Primary Status (Dues) -->
+        <div class="d-flex align-center justify-space-between mb-2">
+          <v-chip
+            :color="duesColor"
+            :variant="duesVariant"
+            size="small"
+            class="mr-1"
+          >
+            <v-icon start size="12">{{ duesIcon }}</v-icon>
+            {{ duesText }}
+          </v-chip>
           
-        <!-- Dues Coming Due Warning -->
-        <v-chip
-          v-if="isDuesComingDue"
-          color="orange"
-          variant="flat"
-          size="small"
-          class="mr-2"
-        >
-          <v-icon start size="14">mdi-clock-alert</v-icon>
-          Due {{ formatDate(nextDuesDate) }}
-        </v-chip>
+          <!-- Portal Status - Compact -->
+          <v-tooltip 
+            :text="member.keycloak_id ? 'Portal Account Active' : 'No Portal Account'"
+            location="top"
+          >
+            <template #activator="{ props }">
+              <v-chip
+                v-bind="props"
+                :color="member.keycloak_id ? 'success' : 'grey'"
+                variant="tonal"
+                size="x-small"
+                class="ml-1"
+              >
+                <v-icon size="12">{{ member.keycloak_id ? 'mdi-account-check' : 'mdi-account-off' }}</v-icon>
+              </v-chip>
+            </template>
+          </v-tooltip>
+        </div>
         
-        <v-chip
-          v-if="member.payment_due_date && !isDuesComingDue"
-          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>
+        <!-- Secondary Status (Due Dates) - Only show if relevant -->
+        <div v-if="isDuesComingDue || (member.payment_due_date && !isDuesComingDue && isOverdue)" class="d-flex">
+          <v-chip
+            v-if="isDuesComingDue"
+            color="orange"
+            variant="flat"
+            size="x-small"
+          >
+            <v-icon start size="10">mdi-clock-alert</v-icon>
+            Due {{ formatDate(nextDuesDate) }}
+          </v-chip>
           
-      <!-- Portal Account Status -->
-      <div class="portal-status mt-3">
-        <v-chip
-          v-if="member.keycloak_id"
-          color="success"
-          variant="tonal"
-          size="small"
-          class="mr-2"
-        >
-          <v-icon start size="14">mdi-account-check</v-icon>
-          Portal Account Active
-        </v-chip>
-        
-        <v-chip
-          v-else
-          color="grey"
-          variant="tonal"
-          size="small"
-          class="mr-2"
-        >
-          <v-icon start size="14">mdi-account-off</v-icon>
-          No Portal Account
-        </v-chip>
+          <v-chip
+            v-else-if="member.payment_due_date && !isDuesComingDue && isOverdue"
+            color="error"
+            variant="flat"
+            size="x-small"
+          >
+            <v-icon start size="10">mdi-calendar-alert</v-icon>
+            Overdue
+          </v-chip>
+        </div>
       </div>
     </v-card-text>
 
@@ -195,6 +217,11 @@
 <script setup lang="ts">
 import type { Member } from '~/utils/types';
 import { getCountryName } from '~/utils/countries';
+import { 
+  isPaymentOverOneYear as checkPaymentOverOneYear, 
+  isDuesActuallyCurrent as checkDuesActuallyCurrent, 
+  calculateOverdueDays 
+} from '~/utils/dues-calculations';
 
 interface Props {
   member: Member;
@@ -227,6 +254,13 @@ const memberInitials = computed(() => {
   return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
 });
 
+const displayName = computed(() => {
+  // Try FullName first, then build from first_name + last_name, then fallback
+  return props.member.FullName || 
+         `${props.member.first_name || ''} ${props.member.last_name || ''}`.trim() ||
+         'New Member';
+});
+
 const avatarColor = computed(() => {
   // Generate consistent color based on member ID using high-contrast colors
   const colors = ['red', 'blue', 'green', 'orange', 'purple', 'teal', 'indigo', 'pink', 'brown'];
@@ -279,36 +313,18 @@ const isInGracePeriod = computed(() => {
 
 /**
  * Check if a member's last payment is over 1 year old
- * Uses the same logic as dues-status API
+ * Uses standardized dues calculation function
  */
 const isPaymentOverOneYear = computed(() => {
-  if (!props.member.membership_date_paid) return false;
-  
-  try {
-    const lastPaidDate = new Date(props.member.membership_date_paid);
-    const oneYearFromPayment = new Date(lastPaidDate);
-    oneYearFromPayment.setFullYear(oneYearFromPayment.getFullYear() + 1);
-    const today = new Date();
-    
-    return today > oneYearFromPayment;
-  } catch {
-    return false;
-  }
+  return checkPaymentOverOneYear(props.member);
 });
 
 /**
  * Check if dues are actually current
- * Uses the same logic as dues-status API
+ * Uses standardized dues calculation function
  */
 const isDuesActuallyCurrent = computed(() => {
-  const paymentTooOld = isPaymentOverOneYear.value;
-  const duesCurrentlyPaid = props.member.current_year_dues_paid === 'true';
-  const gracePeriod = isInGracePeriod.value;
-  
-  // Member is NOT overdue if they're in grace period OR (dues paid AND payment not too old)
-  const isOverdue = paymentTooOld || (!duesCurrentlyPaid && !gracePeriod);
-  
-  return !isOverdue;
+  return checkDuesActuallyCurrent(props.member);
 });
 
 const duesColor = computed(() => {
@@ -394,6 +410,14 @@ const isDuesComingDue = computed(() => {
   return dueDate <= twoMonthsFromNow && dueDate > today;
 });
 
+// Email functionality
+const emailLoading = ref(false);
+
+const shouldShowEmailButton = computed(() => {
+  // Only show email button if member has email and is overdue or dues coming due
+  return !!(props.member.email && (isOverdue.value || isDuesComingDue.value));
+});
+
 // Methods
 const formatDate = (dateString: string): string => {
   if (!dateString) return '';
@@ -409,6 +433,38 @@ const formatDate = (dateString: string): string => {
     return dateString;
   }
 };
+
+const sendDuesReminder = async () => {
+  if (!props.member.email || emailLoading.value) return;
+  
+  emailLoading.value = true;
+  
+  try {
+    // Determine the reminder type based on the member's status
+    const reminderType = isOverdue.value ? 'overdue' : 'due-soon';
+    
+    const response = await $fetch<{
+      success: boolean;
+      message: string;
+      data: any;
+    }>(`/api/members/${props.member.Id}/send-dues-reminder`, {
+      method: 'post',
+      body: {
+        reminderType
+      }
+    });
+
+    if (response?.success) {
+      console.log(`Dues reminder sent successfully to ${props.member.email}`);
+      // You could show a success toast here if needed
+    }
+  } catch (error: any) {
+    console.error('Error sending dues reminder:', error);
+    // You could show an error toast here if needed
+  } finally {
+    emailLoading.value = false;
+  }
+};
 </script>
 
 <style scoped>
@@ -481,7 +537,7 @@ const formatDate = (dateString: string): string => {
 }
 
 .member-info {
-  min-height: 80px;
+  min-height: 60px;
 }
 
 .info-row {
@@ -545,4 +601,33 @@ const formatDate = (dateString: string): string => {
 .text-error {
   color: rgb(var(--v-theme-error)) !important;
 }
+
+/* Status Stripe Styles */
+.status-stripe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  z-index: 2;
+  border-radius: 12px 0 0 12px;
+}
+
+.status-stripe--overdue {
+  background: linear-gradient(180deg, #f44336 0%, #d32f2f 100%);
+  box-shadow: 2px 0 8px rgba(244, 67, 54, 0.3);
+}
+
+.status-stripe--due-soon {
+  background: linear-gradient(180deg, #ff9800 0%, #f57c00 100%);
+  box-shadow: 2px 0 8px rgba(255, 152, 0, 0.3);
+}
+
+.member-card--overdue {
+  border-left: 4px solid #f44336;
+}
+
+.member-card--due-soon {
+  border-left: 4px solid #ff9800;
+}
 </style>

components/MultipleCountryFlags.vue

@@ -0,0 +1,175 @@
+<template>
+  <span class="multiple-country-flags" :class="{ 'multiple-country-flags--small': size === 'small' }">
+    <ClientOnly>
+      <template v-if="countryCodes.length > 0">
+        <VueCountryFlag
+          v-for="(code, index) in countryCodes"
+          :key="`${code}-${index}`"
+          :country="code"
+          :size="flagSize"
+          :title="getCountryName(code)"
+          class="country-flag-item"
+        />
+      </template>
+      <template v-else>
+        <span class="no-nationality">{{ fallbackText }}</span>
+      </template>
+      <template #fallback>
+        <span class="flag-placeholder" :style="placeholderStyle">🏳️</span>
+      </template>
+    </ClientOnly>
+    <span v-if="showName && countryCodes.length > 0" class="country-names">
+      {{ countryNames }}
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import VueCountryFlag from 'vue-country-flag-next';
+import { getCountryName, parseCountryInput } from '~/utils/countries';
+
+interface Props {
+  nationality?: string; // Can be comma-separated like "FR,MC,US"
+  showName?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  fallbackText?: string;
+  separator?: string; // For display names
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  nationality: '',
+  showName: false,
+  size: 'medium',
+  fallbackText: 'Not specified',
+  separator: ', '
+});
+
+// Parse multiple nationalities
+const countryCodes = computed(() => {
+  if (!props.nationality) return [];
+  
+  // Split by comma and clean up
+  const codes = props.nationality
+    .split(',')
+    .map(code => code.trim())
+    .filter(code => code.length > 0)
+    .map(code => {
+      // If it's already a 2-letter code, use it
+      if (code.length === 2) {
+        return code.toUpperCase();
+      }
+      // Try to parse country name to get the code
+      return parseCountryInput(code) || '';
+    })
+    .filter(code => code.length === 2); // Only keep valid 2-letter codes
+  
+  // Remove duplicates
+  return [...new Set(codes)];
+});
+
+const countryNames = computed(() => {
+  return countryCodes.value
+    .map(code => getCountryName(code))
+    .filter(name => name)
+    .join(props.separator);
+});
+
+const flagSize = computed(() => {
+  const sizeMap = {
+    small: 'sm',
+    medium: 'md', 
+    large: 'lg'
+  };
+  
+  return sizeMap[props.size];
+});
+
+const placeholderStyle = computed(() => {
+  const sizeMap = {
+    small: '1rem',
+    medium: '1.5rem',
+    large: '2rem'
+  };
+  
+  return {
+    width: sizeMap[props.size],
+    height: `calc(${sizeMap[props.size]} * 0.75)`,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '2px',
+    backgroundColor: '#f5f5f5',
+    fontSize: '0.75rem'
+  };
+});
+</script>
+
+<style scoped>
+.multiple-country-flags {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  vertical-align: middle;
+}
+
+.multiple-country-flags--small {
+  gap: 0.25rem;
+}
+
+.country-flag-item {
+  border-radius: 2px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+}
+
+/* Add slight overlap for multiple flags to save space */
+.country-flag-item:not(:first-child) {
+  margin-left: -0.25rem;
+}
+
+.multiple-country-flags--small .country-flag-item:not(:first-child) {
+  margin-left: -0.125rem;
+}
+
+.country-names {
+  font-size: 0.875rem;
+  color: inherit;
+  white-space: nowrap;
+  margin-left: 0.25rem;
+}
+
+.multiple-country-flags--small .country-names {
+  font-size: 0.75rem;
+}
+
+.no-nationality {
+  font-size: 0.875rem;
+  color: rgba(0, 0, 0, 0.6);
+  font-style: italic;
+}
+
+.multiple-country-flags--small .no-nationality {
+  font-size: 0.75rem;
+}
+
+.flag-placeholder {
+  border-radius: 2px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+}
+
+/* Ensure proper flag display */
+:deep(.vue-country-flag) {
+  border-radius: 2px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+}
+
+/* Add hover effect to see all flags clearly */
+.multiple-country-flags:hover .country-flag-item:not(:first-child) {
+  margin-left: 0.125rem;
+  transition: margin-left 0.2s ease;
+}
+</style>

components/MultipleNationalityInput.vue

@@ -215,7 +215,18 @@
 
 <script setup lang="ts">
 import { getAllCountries, searchCountries } from '~/utils/countries';
-import { getStaticDeviceInfo } from '~/utils/static-device-detection';
+// Simple device detection utilities
+const detectMobile = () => {
+  if (typeof window === 'undefined') return false;
+  const userAgent = navigator.userAgent;
+  return /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) || window.innerWidth <= 768;
+};
+
+const detectMobileSafari = () => {
+  if (typeof window === 'undefined') return false;
+  const userAgent = navigator.userAgent;
+  return /iPhone|iPad|iPod/i.test(userAgent) && /Safari/i.test(userAgent);
+};
 
 interface Props {
   modelValue?: string; // Comma-separated string like "FR,MC,US"
@@ -241,11 +252,19 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
-// Static mobile detection (no reactive dependencies)
-const deviceInfo = getStaticDeviceInfo();
-const isMobile = ref(deviceInfo.isMobile);
-const isMobileSafari = ref(deviceInfo.isMobileSafari);
-const needsPerformanceMode = ref(deviceInfo.isMobileSafari || deviceInfo.isMobile);
+// Device detection
+const isMobile = ref(false);
+const isMobileSafari = ref(false);
+const needsPerformanceMode = ref(false);
+
+// Initialize device detection on mount
+onMounted(() => {
+  if (process.client) {
+    isMobile.value = detectMobile();
+    isMobileSafari.value = detectMobileSafari();
+    needsPerformanceMode.value = isMobileSafari.value || isMobile.value;
+  }
+});
 
 // Parse initial nationalities from comma-separated string
 const parseNationalities = (value: string): string[] => {

components/PhoneInputWrapper.vue

@@ -155,7 +155,6 @@
 <script setup lang="ts">
 import { parsePhoneNumber, AsYouType } from 'libphonenumber-js';
 import { getPhoneCountriesWithPreferred, searchPhoneCountries, getPhoneCountryByCode, type PhoneCountry } from '~/utils/phone-countries';
-import { getStaticDeviceInfo } from '~/utils/static-device-detection';
 
 interface Props {
   modelValue?: string;
@@ -188,10 +187,18 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
-// Static mobile detection (no reactive dependencies)
-const deviceInfo = getStaticDeviceInfo();
-const isMobile = ref(deviceInfo.isMobile);
-const isMobileSafari = ref(deviceInfo.isMobileSafari);
+// Simple mobile detection
+const isMobile = ref(false);
+const isMobileSafari = ref(false);
+
+// Initialize mobile detection
+onMounted(() => {
+  if (process.client) {
+    const userAgent = navigator.userAgent;
+    isMobile.value = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) || window.innerWidth <= 768;
+    isMobileSafari.value = /iPhone|iPad|iPod/i.test(userAgent) && /Safari/i.test(userAgent);
+  }
+});
 
 // Create computed-like object for template compatibility
 const mobileDetection = computed(() => ({
@@ -326,12 +333,11 @@ watch(dropdownOpen, (isOpen) => {
   }
 });
 
-// Component initialization - values already set from static detection
+// Component initialization
 onMounted(() => {
-  // Device detection already applied statically - no additional setup needed
   console.log('[PhoneInputWrapper] Initialized with device info:', {
-    isMobile: deviceInfo.isMobile,
-    isMobileSafari: deviceInfo.isMobileSafari
+    isMobile: isMobile.value,
+    isMobileSafari: isMobileSafari.value
   });
 });
 </script>

components/ProfileAvatar.vue

@@ -0,0 +1,310 @@
+<template>
+  <v-avatar 
+    :size="avatarSize" 
+    :color="showInitials ? backgroundColor : 'grey-lighten-2'"
+    :class="avatarClass"
+  >
+    <!-- Loading state -->
+    <v-progress-circular 
+      v-if="loading" 
+      :size="iconSize" 
+      indeterminate 
+      color="white" 
+    />
+    
+    <!-- Profile image -->
+    <v-img 
+      v-else-if="imageUrl && !imageError && !loading" 
+      :src="imageUrl" 
+      :alt="altText"
+      cover
+      @error="handleImageError"
+      @load="handleImageLoad"
+      :class="imageClass"
+    />
+    
+    <!-- Initials fallback -->
+    <span 
+      v-else-if="initials && !loading" 
+      :class="['text-white font-weight-bold', initialsClass]"
+      :style="{ fontSize: initialsSize }"
+    >
+      {{ initials }}
+    </span>
+    
+    <!-- Icon fallback -->
+    <v-icon 
+      v-else
+      :size="iconSize" 
+      color="grey-darken-2"
+    >
+      mdi-account
+    </v-icon>
+  </v-avatar>
+</template>
+
+<script setup lang="ts">
+import { generateInitials, generateAvatarColor } from '~/utils/client-utils';
+
+interface Props {
+  memberId?: string;
+  memberName?: string;
+  firstName?: string;
+  lastName?: string;
+  size?: 'small' | 'medium' | 'large';
+  lazy?: boolean;
+  clickable?: boolean;
+  showBorder?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium',
+  lazy: true,
+  clickable: false,
+  showBorder: false
+});
+
+const emit = defineEmits<{
+  click: [];
+  imageLoaded: [];
+  imageError: [error: string];
+}>();
+
+// Reactive state
+const loading = ref(false);
+const imageError = ref(false);
+const imageUrl = ref<string | null>(null);
+const isVisible = ref(false);
+
+// Computed properties
+const avatarSize = computed(() => {
+  switch (props.size) {
+    case 'small': return 36;
+    case 'medium': return 80;
+    case 'large': return 200;
+    default: return 80;
+  }
+});
+
+const iconSize = computed(() => {
+  switch (props.size) {
+    case 'small': return 20;
+    case 'medium': return 40;
+    case 'large': return 100;
+    default: return 40;
+  }
+});
+
+const initialsSize = computed(() => {
+  switch (props.size) {
+    case 'small': return '14px';
+    case 'medium': return '28px';
+    case 'large': return '72px';
+    default: return '28px';
+  }
+});
+
+const initials = computed(() => {
+  if (props.firstName && props.lastName) {
+    return generateInitials(props.firstName, props.lastName);
+  }
+  if (props.memberName) {
+    return generateInitials(undefined, undefined, props.memberName);
+  }
+  return '?';
+});
+
+const backgroundColor = computed(() => {
+  const name = props.memberName || `${props.firstName} ${props.lastName}`.trim();
+  return name ? generateAvatarColor(name) : '#9e9e9e';
+});
+
+const showInitials = computed(() => {
+  return !loading.value && !imageUrl.value && initials.value !== '?';
+});
+
+const altText = computed(() => {
+  return props.memberName || `${props.firstName} ${props.lastName}`.trim() || 'Profile';
+});
+
+const avatarClass = computed(() => [
+  {
+    'cursor-pointer': props.clickable,
+    'elevation-2': props.showBorder,
+    'profile-avatar--border': props.showBorder
+  }
+]);
+
+const imageClass = computed(() => [
+  'profile-avatar__image',
+  {
+    'profile-avatar__image--loaded': !loading.value
+  }
+]);
+
+const initialsClass = computed(() => [
+  'profile-avatar__initials',
+  {
+    'text-h6': props.size === 'small',
+    'text-h4': props.size === 'medium',
+    'text-h1': props.size === 'large'
+  }
+]);
+
+// Methods
+const loadProfileImage = async () => {
+  if (!props.memberId || loading.value) {
+    return;
+  }
+
+  try {
+    loading.value = true;
+    imageError.value = false;
+
+    const sizeParam = props.size === 'small' ? 'small' : 
+                     props.size === 'large' ? 'medium' : 'medium'; // Use medium for both medium and large
+
+    const response = await $fetch(`/api/profile/image/${props.memberId}/${sizeParam}`);
+    
+    if (response.success && response.imageUrl) {
+      // Pre-load the image to ensure it's valid
+      const img = new Image();
+      img.onload = () => {
+        imageUrl.value = response.imageUrl;
+        loading.value = false;
+        emit('imageLoaded');
+      };
+      img.onerror = () => {
+        handleImageError();
+      };
+      img.src = response.imageUrl;
+    } else {
+      loading.value = false;
+    }
+  } catch (error: any) {
+    console.warn(`Profile image not found for member ${props.memberId}:`, error.message);
+    loading.value = false;
+    imageError.value = true;
+  }
+};
+
+const handleImageError = () => {
+  loading.value = false;
+  imageError.value = true;
+  imageUrl.value = null;
+  emit('imageError', 'Failed to load profile image');
+};
+
+const handleImageLoad = () => {
+  loading.value = false;
+  emit('imageLoaded');
+};
+
+const handleClick = () => {
+  if (props.clickable) {
+    emit('click');
+  }
+};
+
+// Intersection Observer for lazy loading
+let observer: IntersectionObserver | null = null;
+const avatarRef = ref<HTMLElement>();
+
+const initIntersectionObserver = () => {
+  if (!props.lazy || !avatarRef.value || typeof IntersectionObserver === 'undefined') {
+    // Load immediately if not lazy or no intersection observer support
+    isVisible.value = true;
+    loadProfileImage();
+    return;
+  }
+
+  observer = new IntersectionObserver(
+    (entries) => {
+      const entry = entries[0];
+      if (entry.isIntersecting && !isVisible.value) {
+        isVisible.value = true;
+        loadProfileImage();
+        
+        // Stop observing once visible
+        if (observer && avatarRef.value) {
+          observer.unobserve(avatarRef.value);
+        }
+      }
+    },
+    {
+      rootMargin: '50px',
+      threshold: 0.1
+    }
+  );
+
+  observer.observe(avatarRef.value);
+};
+
+// Watch for prop changes
+watch(
+  () => props.memberId,
+  (newMemberId) => {
+    if (newMemberId) {
+      imageUrl.value = null;
+      imageError.value = false;
+      if (isVisible.value || !props.lazy) {
+        loadProfileImage();
+      }
+    } else {
+      imageUrl.value = null;
+      imageError.value = false;
+      loading.value = false;
+    }
+  }
+);
+
+// Lifecycle
+onMounted(() => {
+  if (props.memberId) {
+    if (props.lazy) {
+      nextTick(() => {
+        initIntersectionObserver();
+      });
+    } else {
+      loadProfileImage();
+    }
+  }
+});
+
+onUnmounted(() => {
+  if (observer && avatarRef.value) {
+    observer.unobserve(avatarRef.value);
+    observer = null;
+  }
+});
+</script>
+
+<style scoped>
+.profile-avatar--border {
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.profile-avatar__image {
+  transition: opacity 0.3s ease-in-out;
+  opacity: 0;
+}
+
+.profile-avatar__image--loaded {
+  opacity: 1;
+}
+
+.profile-avatar__initials {
+  user-select: none;
+  letter-spacing: -0.5px;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-pointer:hover {
+  transform: scale(1.05);
+  transition: transform 0.2s ease-in-out;
+}
+</style>

components/UpcomingEventBanner.vue

@@ -1,80 +1,189 @@
 <template>
-  <v-banner
+  <v-card
     v-if="event"
-    :color="bannerColor"
-    lines="two"
-    elevation="2"
-    rounded
+    elevation="3"
+    class="upcoming-event-banner ma-2"
+    :color="eventTypeColor"
+    theme="dark"
+    rounded="xl"
   >
-    <template #prepend>
-      <v-icon :color="iconColor" size="large">{{ eventIcon }}</v-icon>
-    </template>
-
-    <template #text>
-      <div class="d-flex flex-column">
-        <div class="text-h6 font-weight-bold mb-1">{{ event.title }}</div>
-        <div class="d-flex flex-wrap align-center ga-4 text-body-2">
-          <div class="d-flex align-center">
-            <v-icon size="small" class="me-1">mdi-calendar-clock</v-icon>
-            <span>{{ formatEventDate }}</span>
-          </div>
-          <div v-if="event.location" class="d-flex align-center">
-            <v-icon size="small" class="me-1">mdi-map-marker</v-icon>
-            <span>{{ event.location }}</span>
-          </div>
-          <div v-if="event.is_paid === 'true'" class="d-flex align-center">
-            <v-icon size="small" class="me-1">mdi-currency-eur</v-icon>
-            <span>{{ memberPrice }}</span>
-          </div>
-          <div v-if="capacityInfo" class="d-flex align-center">
-            <v-icon size="small" class="me-1">mdi-account-group</v-icon>
-            <span>{{ capacityInfo }}</span>
+    <v-card-text class="pa-4">
+      <!-- Mobile Layout -->
+      <div v-if="$vuetify.display.mobile" class="mobile-banner-layout">
+        <!-- Header -->
+        <div class="d-flex align-center mb-3">
+          <v-avatar :color="eventTypeColor" class="me-3" size="40">
+            <v-icon :icon="eventTypeIcon" size="20"></v-icon>
+          </v-avatar>
+          <div class="flex-grow-1">
+            <h3 class="text-h6 font-weight-bold text-truncate">{{ event.title }}</h3>
+            <div class="text-caption opacity-90">{{ eventTypeLabel }}</div>
           </div>
         </div>
-      </div>
-    </template>
         
-    <template #actions>
-      <div class="d-flex flex-column flex-sm-row ga-2">
-        <!-- RSVP Status -->
-        <v-chip
-          v-if="userRSVP"
-          :color="rsvpStatusColor"
-          size="small"
-          variant="flat"
-        >
-          <v-icon start size="small">{{ rsvpStatusIcon }}</v-icon>
-          {{ rsvpStatusText }}
-        </v-chip>
+        <!-- Event Details -->
+        <div class="mb-3">
+          <div class="d-flex align-center mb-1">
+            <v-icon size="16" class="me-2">mdi-calendar-clock</v-icon>
+            <span class="text-body-2">{{ formatEventDate }}</span>
+          </div>
+          
+          <div v-if="event.location" class="d-flex align-center mb-1">
+            <v-icon size="16" class="me-2">mdi-map-marker</v-icon>
+            <span class="text-body-2 text-truncate">{{ event.location }}</span>
+          </div>
+          
+          <div class="d-flex align-center justify-space-between">
+            <div v-if="event.is_paid === 'true'" class="d-flex align-center">
+              <v-icon size="16" class="me-2">mdi-currency-eur</v-icon>
+              <span class="text-body-2">{{ priceDisplay }}</span>
+            </div>
+            
+            <div v-if="event.max_attendees" class="d-flex align-center">
+              <v-icon size="16" class="me-2">mdi-account-group</v-icon>
+              <span class="text-body-2">{{ event.current_attendees || 0 }}/{{ event.max_attendees }} attending</span>
+            </div>
+          </div>
+        </div>
         
         <!-- Action Buttons -->
-        <v-btn
-          @click="handleViewEvent"
-          variant="elevated"
-          color="white"
-          size="small"
-          prepend-icon="mdi-eye"
-        >
-          View Details
-        </v-btn>
+        <div class="d-flex ga-2">
+          <v-btn
+            @click="handleQuickRSVP"
+            :color="userRSVP ? 'success' : 'white'"
+            :variant="userRSVP ? 'elevated' : 'outlined'"
+            size="small"
+            class="text-none flex-grow-1"
+            rounded="lg"
+          >
+            <v-icon start size="18">
+              {{ userRSVP ? 'mdi-check' : 'mdi-plus' }}
+            </v-icon>
+            {{ userRSVP ? 'Attending' : 'Quick RSVP' }}
+          </v-btn>
           
-        <v-btn
-          v-if="!userRSVP && canRSVP"
-          @click="handleQuickRSVP"
-          :color="quickRSVPColor"
-          size="small"
-          prepend-icon="mdi-check"
-        >
-          Quick RSVP
-        </v-btn>
+          <v-btn
+            @click="handleViewDetails"
+            color="white"
+            variant="outlined"
+            size="small"
+            class="text-none"
+            rounded="lg"
+            icon
+          >
+            <v-icon size="18">mdi-eye</v-icon>
+          </v-btn>
+        </div>
       </div>
-    </template>
-  </v-banner>
+      
+      <!-- Desktop Layout -->
+      <v-row v-else align="center" no-gutters>
+        <v-col cols="12" md="8">
+          <div class="d-flex align-center mb-2">
+            <v-avatar :color="eventTypeColor" class="me-3" size="32">
+              <v-icon :icon="eventTypeIcon" size="16"></v-icon>
+            </v-avatar>
+            <div>
+              <h3 class="text-h6 font-weight-bold">{{ event.title }}</h3>
+              <div class="text-caption opacity-90">{{ eventTypeLabel }}</div>
+            </div>
+          </div>
+          
+          <div class="d-flex align-center flex-wrap ga-4">
+            <div class="d-flex align-center">
+              <v-icon size="small" class="me-1">mdi-calendar-clock</v-icon>
+              <span class="text-body-2">{{ formatEventDate }}</span>
+            </div>
+            
+            <div v-if="event.location" class="d-flex align-center">
+              <v-icon size="small" class="me-1">mdi-map-marker</v-icon>
+              <span class="text-body-2">{{ event.location }}</span>
+            </div>
+            
+            <div v-if="event.is_paid === 'true'" class="d-flex align-center">
+              <v-icon size="small" class="me-1">mdi-currency-eur</v-icon>
+              <span class="text-body-2">{{ priceDisplay }}</span>
+            </div>
+            
+            <div v-if="event.max_attendees" class="d-flex align-center">
+              <v-icon size="small" class="me-1">mdi-account-group</v-icon>
+              <span class="text-body-2">{{ event.current_attendees || 0 }}/{{ event.max_attendees }} attending</span>
+            </div>
+          </div>
+        </v-col>
+        
+        <v-col cols="12" md="4" class="text-end">
+          <div class="d-flex ga-2 justify-end">
+            <v-btn
+              @click="handleQuickRSVP"
+              :color="userRSVP ? 'success' : 'white'"
+              :variant="userRSVP ? 'elevated' : 'outlined'"
+              size="small"
+              class="text-none"
+              rounded="lg"
+            >
+              <v-icon start size="small">
+                {{ userRSVP ? 'mdi-check' : 'mdi-plus' }}
+              </v-icon>
+              {{ userRSVP ? 'Attending' : 'Quick RSVP' }}
+            </v-btn>
+            
+            <v-btn
+              @click="handleViewDetails"
+              color="white"
+              variant="outlined"
+              size="small"
+              class="text-none"
+              rounded="lg"
+            >
+              <v-icon start size="small">mdi-eye</v-icon>
+              View Details
+            </v-btn>
+          </div>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
 </template>
 
 <script setup lang="ts">
 import type { Event, EventRSVP } from '~/utils/types';
-import { format, isWithinInterval, addDays } from 'date-fns';
+
+// Helper functions to replace date-fns
+const formatDate = (date: Date, formatStr: string): string => {
+  const options: Intl.DateTimeFormatOptions = {};
+  
+  if (formatStr === 'HH:mm') {
+    options.hour = '2-digit';
+    options.minute = '2-digit';
+    options.hour12 = false;
+  } else if (formatStr === 'EEE, MMM d • HH:mm') {
+    return date.toLocaleDateString('en-US', {
+      weekday: 'short',
+      month: 'short', 
+      day: 'numeric'
+    }) + ' • ' + date.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    });
+  } else if (formatStr === 'MMM d') {
+    options.month = 'short';
+    options.day = 'numeric';
+  }
+  
+  return date.toLocaleDateString('en-US', options);
+};
+
+const addDays = (date: Date, days: number): Date => {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result;
+};
+
+const isWithinInterval = (date: Date, interval: { start: Date; end: Date }): boolean => {
+  return date >= interval.start && date <= interval.end;
+};
 
 interface Props {
   event: Event | null;
@@ -99,7 +208,7 @@ const canRSVP = computed(() => {
   return eventDate > now; // Can RSVP to future events
 });
 
-const eventIcon = computed(() => {
+const eventTypeIcon = computed(() => {
   if (!props.event) return 'mdi-calendar';
   
   const icons = {
@@ -113,7 +222,7 @@ const eventIcon = computed(() => {
   return icons[props.event.event_type as keyof typeof icons] || 'mdi-calendar';
 });
 
-const bannerColor = computed(() => {
+const eventTypeColor = computed(() => {
   if (!props.event) return 'primary';
   
   // Check if event is soon (within 24 hours)
@@ -137,11 +246,48 @@ const bannerColor = computed(() => {
   return colors[props.event.event_type as keyof typeof colors] || 'primary';
 });
 
+const eventTypeLabel = computed(() => {
+  if (!props.event) return '';
+  
+  const labels = {
+    'meeting': 'Meeting',
+    'social': 'Social Event',
+    'fundraiser': 'Fundraiser',
+    'workshop': 'Workshop',
+    'board-only': 'Board Only'
+  };
+  
+  return labels[props.event.event_type as keyof typeof labels] || 'Event';
+});
+
 const iconColor = computed(() => {
   // Use white for better contrast on colored backgrounds
   return 'white';
 });
 
+const memberPrice = computed(() => props.event?.cost_members || '');
+const nonMemberPrice = computed(() => props.event?.cost_non_members || '');
+
+const priceDisplay = computed(() => {
+  if (!props.event || props.event.is_paid !== 'true') return '';
+  
+  const memberCost = props.event.cost_members;
+  const nonMemberCost = props.event.cost_non_members;
+  
+  if (memberCost && nonMemberCost) {
+    // Show both prices
+    return `€${memberCost} (Members) | €${nonMemberCost} (Non-Members)`;
+  } else if (memberCost) {
+    // Only member price
+    return `€${memberCost} (Members)`;
+  } else if (nonMemberCost) {
+    // Only non-member price  
+    return `€${nonMemberCost}`;
+  }
+  
+  return '';
+});
+
 const formatEventDate = computed(() => {
   if (!props.event) return '';
   
@@ -151,28 +297,18 @@ const formatEventDate = computed(() => {
   
   // Different formats based on timing
   if (startDate.toDateString() === now.toDateString()) {
-    return `Today at ${format(startDate, 'HH:mm')}`;
+    return `Today at ${formatDate(startDate, 'HH:mm')}`;
   }
   
   if (startDate.toDateString() === addDays(now, 1).toDateString()) {
-    return `Tomorrow at ${format(startDate, 'HH:mm')}`;
+    return `Tomorrow at ${formatDate(startDate, 'HH:mm')}`;
   }
   
   if (startDate.toDateString() === endDate.toDateString()) {
-    return format(startDate, 'EEE, MMM d • HH:mm');
+    return formatDate(startDate, 'EEE, MMM d • HH:mm');
   }
   
-  return `${format(startDate, 'MMM d')} - ${format(endDate, 'MMM d')}`;
-});
-
-const memberPrice = computed(() => {
-  if (!props.event || props.event.is_paid !== 'true') return '';
-  
-  if (props.event.cost_members && props.event.cost_non_members) {
-    return `€${props.event.cost_members} (Members)`;
-  }
-  
-  return `€${props.event.cost_members || props.event.cost_non_members}`;
+  return `${formatDate(startDate, 'MMM d')} - ${formatDate(endDate, 'MMM d')}`;
 });
 
 const capacityInfo = computed(() => {
@@ -215,7 +351,7 @@ const rsvpStatusText = computed(() => {
 });
 
 const quickRSVPColor = computed(() => {
-  return bannerColor.value === 'warning' ? 'success' : 'white';
+  return eventTypeColor.value === 'warning' ? 'success' : 'white';
 });
 
 // Methods
@@ -225,6 +361,12 @@ const handleViewEvent = () => {
   }
 };
 
+const handleViewDetails = () => {
+  if (props.event) {
+    emit('event-click', props.event);
+  }
+};
+
 const handleQuickRSVP = () => {
   if (props.event) {
     emit('quick-rsvp', props.event);

components/ViewMemberDialog.vue

@@ -2,178 +2,471 @@
   <v-dialog
     :model-value="modelValue"
     @update:model-value="$emit('update:model-value', $event)"
-    max-width="600"
+    max-width="900"
     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-card v-if="member" class="member-modal">
+      <!-- Hero Header with Profile -->
+      <div class="member-hero-header">
         <v-btn
           icon
           variant="text"
           color="white"
+          class="close-btn"
           @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>
+        <div class="hero-content">
+          <ProfileAvatar
+            :member-id="member.member_id"
+            :member-name="member.FullName || `${member.first_name} ${member.last_name}`"
+            :first-name="member.first_name"
+            :last-name="member.last_name"
+            size="120"
+            class="mb-4 elevation-4"
+            clickable
+            show-border
+            @click="openImageLightbox"
+          />
           
-          <v-chip
-            :color="duesColor"
-            :variant="duesVariant"
-            size="small"
-          >
-            <v-icon start size="16">{{ duesIcon }}</v-icon>
-            {{ duesText }}
-          </v-chip>
+          <h1 class="text-h4 font-weight-bold text-white mb-2">
+            {{ member.FullName || `${member.first_name} ${member.last_name}` }}
+          </h1>
           
-          <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 class="d-flex align-center justify-center gap-3 mb-3">
+            <div class="d-flex align-center">
+              <CountryFlag
+                v-if="member.nationality"
+                :country-code="member.nationality"
+                :show-name="false"
+                size="medium"
+                class="mr-2"
+              />
+              <span class="text-white">
+                {{ getCountryName(member.nationality) || 'No nationality' }}
+              </span>
+            </div>
+            <v-divider vertical color="white" opacity="0.5" class="mx-2" />
+            <span class="text-white">
+              Member since {{ formatDate(member.member_since) || 'Unknown' }}
+            </span>
+          </div>
+          
+          <!-- Status Badges -->
+          <div class="d-flex justify-center gap-2">
+            <v-chip
+              :color="statusColor"
+              variant="flat"
+              size="small"
+              class="font-weight-bold"
+            >
+              <v-icon start size="16">{{ statusIcon }}</v-icon>
+              {{ member.membership_status }}
+            </v-chip>
+            
+            <v-chip
+              :color="duesColor"
+              :variant="duesVariant"
+              size="small"
+              class="font-weight-bold"
+            >
+              <v-icon start size="16">{{ duesIcon }}</v-icon>
+              {{ duesText }}
+            </v-chip>
+            
+            <v-chip
+              v-if="member.membership_type"
+              color="purple"
+              variant="tonal"
+              size="small"
+              class="font-weight-bold"
+            >
+              {{ member.membership_type }}
+            </v-chip>
+          </div>
         </div>
+      </div>
 
-        <!-- Member Information -->
-        <v-row>
-          <!-- Personal Information -->
-          <v-col cols="12" md="6">
-            <h3 class="text-h6 mb-3 text-primary">Personal Information</h3>
+      <!-- Quick Actions Bar -->
+      <div class="quick-actions-bar">
+        <v-btn
+          v-if="!member.dues_paid_this_year"
+          color="success"
+          variant="flat"
+          prepend-icon="mdi-cash-check"
+          @click="markDuesPaid"
+        >
+          Mark Dues Paid
+        </v-btn>
+        <v-btn
+          color="primary"
+          variant="tonal"
+          prepend-icon="mdi-pencil"
+          @click="$emit('edit', member)"
+        >
+          Edit Profile
+        </v-btn>
+        <v-btn
+          color="primary"
+          variant="tonal"
+          prepend-icon="mdi-email"
+          @click="sendEmail"
+        >
+          Send Email
+        </v-btn>
+        <v-btn
+          color="primary"
+          variant="tonal"
+          prepend-icon="mdi-phone"
+          :disabled="!member.phone"
+          @click="callPhone"
+        >
+          Call
+        </v-btn>
+        <v-menu>
+          <template v-slot:activator="{ props }">
+            <v-btn
+              color="primary"
+              variant="tonal"
+              icon="mdi-dots-vertical"
+              v-bind="props"
+            />
+          </template>
+          <v-list>
+            <v-list-item @click="viewPaymentHistory">
+              <v-list-item-title>
+                <v-icon start>mdi-history</v-icon>
+                Payment History
+              </v-list-item-title>
+            </v-list-item>
+            <v-list-item @click="generateInvoice">
+              <v-list-item-title>
+                <v-icon start>mdi-file-document</v-icon>
+                Generate Invoice
+              </v-list-item-title>
+            </v-list-item>
+            <v-list-item @click="exportMemberData">
+              <v-list-item-title>
+                <v-icon start>mdi-download</v-icon>
+                Export Data
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </div>
 
-            <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>
+      <!-- Content Tabs -->
+      <v-card-text class="pa-0">
+        <v-tabs
+          v-model="activeTab"
+          bg-color="grey-lighten-4"
+          slider-color="primary"
+        >
+          <v-tab value="overview">
+            <v-icon start>mdi-account-details</v-icon>
+            Overview
+          </v-tab>
+          <v-tab value="payments">
+            <v-icon start>mdi-cash-multiple</v-icon>
+            Payments
+          </v-tab>
+          <v-tab value="activity">
+            <v-icon start>mdi-history</v-icon>
+            Activity
+          </v-tab>
+          <v-tab value="notes">
+            <v-icon start>mdi-note-text</v-icon>
+            Notes
+          </v-tab>
+        </v-tabs>
 
-              <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>
+        <v-tabs-window v-model="activeTab">
+          <!-- Overview Tab -->
+          <v-tabs-window-item value="overview">
+            <v-container>
+              <v-row>
+                <!-- Personal Information -->
+                <v-col cols="12" md="6">
+                  <v-card elevation="0" class="info-card">
+                    <v-card-title class="d-flex align-center">
+                      <v-icon start color="primary">mdi-account</v-icon>
+                      Personal Information
+                    </v-card-title>
+                    <v-card-text>
+                      <div class="info-grid">
+                        <div class="info-item">
+                          <label>Full Name</label>
+                          <p>{{ member.first_name }} {{ member.last_name }}</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">
+                          <label>Email</label>
+                          <p>
+                            <a :href="`mailto:${member.email}`" class="text-primary">
+                              {{ member.email }}
+                            </a>
+                          </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" v-if="member.phone">
+                          <label>Phone</label>
+                          <p>
+                            <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" v-if="member.date_of_birth">
+                          <label>Date of Birth</label>
+                          <p>{{ 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>
+                        <div class="info-item" v-if="member.address">
+                          <label>Address</label>
+                          <p>{{ member.address }}</p>
+                        </div>
                         
-          <!-- Membership Information -->
-          <v-col cols="12" md="6">
-            <h3 class="text-h6 mb-3 text-primary">Membership Information</h3>
+                        <div class="info-item">
+                          <label>Nationality</label>
+                          <div class="d-flex align-center">
+                            <CountryFlag
+                              v-if="member.nationality"
+                              :country-code="member.nationality"
+                              :show-name="false"
+                              size="small"
+                              class="mr-2"
+                            />
+                            <span>{{ getCountryName(member.nationality) || 'Not specified' }}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </v-card-text>
+                  </v-card>
+                </v-col>
 
-            <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>
+                <!-- Membership Information -->
+                <v-col cols="12" md="6">
+                  <v-card elevation="0" class="info-card">
+                    <v-card-title class="d-flex align-center">
+                      <v-icon start color="primary">mdi-card-account-details</v-icon>
+                      Membership Details
+                    </v-card-title>
+                    <v-card-text>
+                      <div class="info-grid">
+                        <div class="info-item">
+                          <label>Member ID</label>
+                          <p>{{ member.member_id }}</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">
+                          <label>Membership Type</label>
+                          <v-chip :color="getMembershipColor(member.membership_type)" size="small" variant="tonal">
+                            {{ member.membership_type }}
+                          </v-chip>
+                        </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 === 'true' ? 'Paid' : 'Outstanding' }}
-                  </v-chip>
-                </p>
-              </div>
+                        <div class="info-item">
+                          <label>Status</label>
+                          <v-chip :color="statusColor" size="small" variant="flat">
+                            {{ member.membership_status }}
+                          </v-chip>
+                        </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">
+                          <label>Member Since</label>
+                          <p>{{ formatDate(member.member_since) || 'Not specified' }}</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>
+                        <div class="info-item">
+                          <label>Last Renewal</label>
+                          <p>{{ member.last_renewal ? formatDate(member.last_renewal) : 'Never' }}</p>
+                        </div>
+                        
+                        <div class="info-item">
+                          <label>Dues Status</label>
+                          <v-chip :color="duesColor" size="small" :variant="duesVariant">
+                            {{ duesText }}
+                          </v-chip>
+                        </div>
+                      </div>
+                    </v-card-text>
+                  </v-card>
+                </v-col>
+
+                <!-- Emergency Contact -->
+                <v-col cols="12" v-if="member.emergency_contact">
+                  <v-card elevation="0" class="info-card">
+                    <v-card-title class="d-flex align-center">
+                      <v-icon start color="error">mdi-phone-alert</v-icon>
+                      Emergency Contact
+                    </v-card-title>
+                    <v-card-text>
+                      <v-row>
+                        <v-col cols="12" md="4">
+                          <div class="info-item">
+                            <label>Name</label>
+                            <p>{{ member.emergency_contact.name || 'Not provided' }}</p>
+                          </div>
+                        </v-col>
+                        <v-col cols="12" md="4">
+                          <div class="info-item">
+                            <label>Relationship</label>
+                            <p>{{ member.emergency_contact.relationship || 'Not provided' }}</p>
+                          </div>
+                        </v-col>
+                        <v-col cols="12" md="4">
+                          <div class="info-item">
+                            <label>Phone</label>
+                            <p>{{ member.emergency_contact.phone || 'Not provided' }}</p>
+                          </div>
+                        </v-col>
+                      </v-row>
+                    </v-card-text>
+                  </v-card>
+                </v-col>
+              </v-row>
+            </v-container>
+          </v-tabs-window-item>
+
+          <!-- Payments Tab -->
+          <v-tabs-window-item value="payments">
+            <v-container>
+              <v-card elevation="0" class="info-card">
+                <v-card-title class="d-flex align-center justify-space-between">
+                  <div class="d-flex align-center">
+                    <v-icon start color="primary">mdi-cash-multiple</v-icon>
+                    Payment History
+                  </div>
+                  <v-btn
+                    color="primary"
+                    variant="tonal"
+                    size="small"
+                    prepend-icon="mdi-plus"
+                    @click="recordPayment"
+                  >
+                    Record Payment
+                  </v-btn>
+                </v-card-title>
+                <v-card-text>
+                  <v-list lines="two" class="pa-0">
+                    <v-list-item
+                      v-for="payment in recentPayments"
+                      :key="payment.id"
+                      class="px-0"
+                    >
+                      <template v-slot:prepend>
+                        <v-icon :color="payment.status === 'Completed' ? 'success' : 'warning'">
+                          {{ payment.status === 'Completed' ? 'mdi-check-circle' : 'mdi-clock-outline' }}
+                        </v-icon>
+                      </template>
+                      <v-list-item-title>
+                        ${{ payment.amount }} - {{ payment.type }}
+                      </v-list-item-title>
+                      <v-list-item-subtitle>
+                        {{ formatDate(payment.date) }} • {{ payment.method }}
+                      </v-list-item-subtitle>
+                      <template v-slot:append>
+                        <v-chip
+                          :color="payment.status === 'Completed' ? 'success' : 'warning'"
+                          size="small"
+                          variant="tonal"
+                        >
+                          {{ payment.status }}
+                        </v-chip>
+                      </template>
+                    </v-list-item>
+                  </v-list>
+                  <div v-if="!recentPayments || recentPayments.length === 0" class="text-center py-8 text-medium-emphasis">
+                    No payment history available
+                  </div>
+                </v-card-text>
+              </v-card>
+            </v-container>
+          </v-tabs-window-item>
+
+          <!-- Activity Tab -->
+          <v-tabs-window-item value="activity">
+            <v-container>
+              <v-card elevation="0" class="info-card">
+                <v-card-title class="d-flex align-center">
+                  <v-icon start color="primary">mdi-history</v-icon>
+                  Recent Activity
+                </v-card-title>
+                <v-card-text>
+                  <v-timeline side="end" density="compact">
+                    <v-timeline-item
+                      v-for="activity in recentActivities"
+                      :key="activity.id"
+                      :dot-color="activity.color"
+                      size="small"
+                    >
+                      <template v-slot:opposite>
+                        <div class="text-caption">
+                          {{ formatRelativeTime(activity.date) }}
+                        </div>
+                      </template>
+                      <div>
+                        <div class="font-weight-medium">{{ activity.title }}</div>
+                        <div class="text-caption text-medium-emphasis">{{ activity.description }}</div>
+                      </div>
+                    </v-timeline-item>
+                  </v-timeline>
+                  <div v-if="!recentActivities || recentActivities.length === 0" class="text-center py-8 text-medium-emphasis">
+                    No recent activity
+                  </div>
+                </v-card-text>
+              </v-card>
+            </v-container>
+          </v-tabs-window-item>
+
+          <!-- Notes Tab -->
+          <v-tabs-window-item value="notes">
+            <v-container>
+              <v-card elevation="0" class="info-card">
+                <v-card-title class="d-flex align-center justify-space-between">
+                  <div class="d-flex align-center">
+                    <v-icon start color="primary">mdi-note-text</v-icon>
+                    Member Notes
+                  </div>
+                  <v-btn
+                    color="primary"
+                    variant="tonal"
+                    size="small"
+                    prepend-icon="mdi-plus"
+                    @click="addNote"
+                  >
+                    Add Note
+                  </v-btn>
+                </v-card-title>
+                <v-card-text>
+                  <v-textarea
+                    v-model="memberNotes"
+                    label="Notes about this member"
+                    rows="6"
+                    variant="outlined"
+                    placeholder="Add notes about this member..."
+                  />
+                  <v-btn
+                    color="primary"
+                    variant="flat"
+                    @click="saveNotes"
+                    :disabled="!memberNotes"
+                  >
+                    Save Notes
+                  </v-btn>
+                </v-card-text>
+              </v-card>
+            </v-container>
+          </v-tabs-window-item>
+        </v-tabs-window>
       </v-card-text>
 
-      <!-- Actions -->
-      <v-card-actions class="pa-6 pt-0">
+      <!-- Footer Actions -->
+      <v-card-actions class="pa-4 bg-grey-lighten-5">
         <v-spacer />
         <v-btn
           variant="text"
@@ -183,11 +476,11 @@
         </v-btn>
         <v-btn
           color="primary"
-          variant="elevated"
+          variant="flat"
+          prepend-icon="mdi-pencil"
           @click="$emit('edit', member)"
         >
-          <v-icon start>mdi-pencil</v-icon>
-          Edit
+          Edit Member
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -196,138 +489,237 @@
 
 <script setup lang="ts">
 import type { Member } from '~/utils/types';
-import { getCountryName } from '~/utils/countries';
+import { countries } from '~/utils/countries';
 
 interface Props {
   modelValue: boolean;
-  member?: Member | null;
+  member: Member | null;
 }
 
 interface Emits {
   (e: 'update:model-value', value: boolean): void;
   (e: 'edit', member: Member): void;
+  (e: 'mark-dues-paid', member: Member): void;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  member: null
-});
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
 
-defineEmits<Emits>();
+// State
+const activeTab = ref('overview');
+const memberNotes = ref('');
+const recentPayments = ref([]);
+const recentActivities = ref([]);
 
 // 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';
-  }
+  if (!props.member) return 'default';
+  return props.member.membership_status === 'Active' ? 'success' : 'error';
 });
 
 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';
-  }
+  if (!props.member) return 'mdi-account';
+  return props.member.membership_status === 'Active' ? 'mdi-check-circle' : 'mdi-close-circle';
 });
 
 const duesColor = computed(() => {
-  if (!props.member) return 'grey';
-  return props.member.current_year_dues_paid === 'true' ? 'success' : 'error';
+  if (!props.member) return 'default';
+  if (props.member.dues_paid_this_year) return 'success';
+  if (props.member.dues_status === 'Overdue') return 'error';
+  return 'warning';
 });
 
 const duesVariant = computed(() => {
   if (!props.member) return 'tonal';
-  return props.member.current_year_dues_paid === 'true' ? 'tonal' : 'flat';
+  return props.member.dues_paid_this_year ? 'flat' : 'tonal';
 });
 
 const duesIcon = computed(() => {
-  if (!props.member) return 'mdi-help';
-  return props.member.current_year_dues_paid === 'true' ? 'mdi-check-circle' : 'mdi-alert-circle';
+  if (!props.member) return 'mdi-cash';
+  if (props.member.dues_paid_this_year) return 'mdi-check-circle';
+  if (props.member.dues_status === 'Overdue') return 'mdi-alert-circle';
+  return 'mdi-clock-outline';
 });
 
 const duesText = computed(() => {
-  if (!props.member) return '';
-  return props.member.current_year_dues_paid === 'true' ? 'Dues Paid' : 'Dues Outstanding';
+  if (!props.member) return 'Unknown';
+  if (props.member.dues_paid_this_year) return 'Dues Paid';
+  if (props.member.dues_status === 'Overdue') return 'Dues Overdue';
+  return 'Dues Due';
 });
 
 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';
+  return new Date(props.member.payment_due_date) < new Date();
 });
 
 // Methods
-const formatDate = (dateString: string): string => {
-  if (!dateString) return '';
+const getCountryName = (code: string) => {
+  if (!code) return null;
+  const country = countries.find(c => c.code === code);
+  return country ? country.name : code;
+};
 
-  try {
-    const date = new Date(dateString);
-    return date.toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric'
-    });
-  } catch {
-    return dateString;
+const getMembershipColor = (type: string) => {
+  switch (type) {
+    case 'VIP': return 'error';
+    case 'Premium': return 'warning';
+    case 'Lifetime': return 'purple';
+    default: return 'info';
   }
 };
+
+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: 'long',
+    day: 'numeric',
+    year: 'numeric'
+  });
+};
+
+const formatRelativeTime = (date: string) => {
+  const now = new Date();
+  const then = new Date(date);
+  const diff = now.getTime() - then.getTime();
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+  
+  if (days === 0) return 'Today';
+  if (days === 1) return 'Yesterday';
+  if (days < 7) return `${days} days ago`;
+  if (days < 30) return `${Math.floor(days / 7)} weeks ago`;
+  if (days < 365) return `${Math.floor(days / 30)} months ago`;
+  return `${Math.floor(days / 365)} years ago`;
+};
+
+const openImageLightbox = () => {
+  // TODO: Implement image lightbox
+};
+
+const markDuesPaid = () => {
+  if (props.member) {
+    emit('mark-dues-paid', props.member);
+  }
+};
+
+const sendEmail = () => {
+  if (props.member) {
+    window.location.href = `mailto:${props.member.email}`;
+  }
+};
+
+const callPhone = () => {
+  if (props.member && props.member.phone) {
+    window.location.href = `tel:${props.member.phone}`;
+  }
+};
+
+const viewPaymentHistory = () => {
+  activeTab.value = 'payments';
+};
+
+const generateInvoice = () => {
+  // TODO: Generate invoice for member
+};
+
+const exportMemberData = () => {
+  // TODO: Export member data
+};
+
+const recordPayment = () => {
+  // TODO: Record payment for member
+};
+
+const addNote = () => {
+  // Focus on notes textarea
+  activeTab.value = 'notes';
+};
+
+const saveNotes = () => {
+  // TODO: Save notes to database
+};
+
+// Load member-specific data when dialog opens
+watch(() => props.modelValue, (newVal) => {
+  if (newVal && props.member) {
+    // Reset to overview tab
+    activeTab.value = 'overview';
+    // Load member notes
+    memberNotes.value = props.member.notes || '';
+    // TODO: Load payment history and activities
+  }
+});
 </script>
 
 <style scoped>
-.info-group {
-  background: rgba(var(--v-theme-surface-variant), 0.1);
-  border-radius: 8px;
-  padding: 16px;
+.member-modal {
+  overflow: hidden;
+}
+
+.member-hero-header {
+  position: relative;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 3rem 2rem;
+  text-align: center;
+}
+
+.close-btn {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 1;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 0;
+}
+
+.quick-actions-bar {
+  display: flex;
+  gap: 0.5rem;
+  padding: 1rem;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #e0e0e0;
+  overflow-x: auto;
+}
+
+.info-card {
+  border: 1px solid #e0e0e0;
+}
+
+.info-grid {
+  display: grid;
+  gap: 1.5rem;
 }
 
 .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;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 }
 
 .info-item label {
-  display: block;
-  margin-bottom: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: #666;
+  letter-spacing: 0.5px;
 }
 
-.bg-primary {
-  background: linear-gradient(135deg, #a31515 0%, #d32f2f 100%) !important;
+.info-item p {
+  margin: 0;
+  font-size: 1rem;
+  color: #333;
 }
 
-.text-error {
-  color: rgb(var(--v-theme-error)) !important;
+.info-item a {
+  text-decoration: none;
 }
 
-.text-primary {
-  color: #a31515 !important;
+.info-item a:hover {
+  text-decoration: underline;
 }
 </style>

components/dashboard/ActivityTimeline.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="activity-timeline">
+    <div
+      v-for="(item, index) in activities"
+      :key="item.id"
+      v-motion
+      :initial="{ opacity: 0, x: -20 }"
+      :visibleOnce="{
+        opacity: 1,
+        x: 0,
+        transition: {
+          delay: index * 100,
+          duration: 500,
+          type: 'spring',
+          stiffness: 200
+        }
+      }"
+      class="timeline-item"
+      :class="{ 'timeline-item--last': index === activities.length - 1 }"
+    >
+      <!-- Timeline Marker -->
+      <div 
+        class="timeline-marker"
+        :class="[
+          `timeline-marker--${item.type}`,
+          { 'timeline-marker--pulse': item.isNew }
+        ]"
+      >
+        <v-icon 
+          :color="getIconColor(item.type)" 
+          size="16"
+        >
+          {{ item.icon }}
+        </v-icon>
+      </div>
+
+      <!-- Timeline Content -->
+      <div class="timeline-content">
+        <div class="timeline-header">
+          <h4 class="timeline-title">{{ item.title }}</h4>
+          <span class="timeline-time">{{ formatTime(item.timestamp) }}</span>
+        </div>
+        <p class="timeline-description">{{ item.description }}</p>
+        
+        <!-- Optional metadata -->
+        <div v-if="item.metadata" class="timeline-metadata">
+          <v-chip
+            v-for="(meta, key) in item.metadata"
+            :key="key"
+            size="x-small"
+            variant="tonal"
+            :color="getMetaColor(key)"
+            class="mr-1"
+          >
+            {{ meta }}
+          </v-chip>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface TimelineActivity {
+  id: string | number;
+  type: 'event' | 'profile';
+  title: string;
+  description: string;
+  timestamp: string | Date;
+  icon: string;
+  isNew?: boolean;
+  metadata?: Record<string, any>;
+}
+
+interface Props {
+  activities: TimelineActivity[];
+  maxItems?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxItems: 10
+});
+
+// Compute visible activities
+const visibleActivities = computed(() => {
+  return props.activities.slice(0, props.maxItems);
+});
+
+// Get icon color based on activity type
+const getIconColor = (type: string) => {
+  const colors: Record<string, string> = {
+    event: 'error',
+    profile: 'info'
+  };
+  return colors[type] || 'grey';
+};
+
+// Get metadata chip color
+const getMetaColor = (key: string) => {
+  const colors: Record<string, string> = {
+    status: 'success',
+    category: 'primary',
+    amount: 'warning',
+    level: 'info'
+  };
+  return colors[key] || 'grey';
+};
+
+// Format timestamp
+const formatTime = (timestamp: string | Date) => {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return 'Just now';
+  if (diffMins < 60) return `${diffMins} minute${diffMins > 1 ? 's' : ''} ago`;
+  if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
+  if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
+  
+  return date.toLocaleDateString('en-US', { 
+    month: 'short', 
+    day: 'numeric',
+    year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.activity-timeline {
+  position: relative;
+  padding-left: 2rem;
+
+  // Vertical line
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0.75rem;
+    top: 0.5rem;
+    bottom: 1rem;
+    width: 2px;
+    background: linear-gradient(
+      to bottom,
+      rgba(220, 38, 38, 0.3),
+      rgba(220, 38, 38, 0.1),
+      transparent
+    );
+  }
+}
+
+.timeline-item {
+  position: relative;
+  padding-bottom: 1.5rem;
+  
+  &--last {
+    padding-bottom: 0;
+  }
+}
+
+.timeline-marker {
+  position: absolute;
+  left: -1.25rem;
+  top: 0.125rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  border: 2px solid;
+  z-index: 1;
+  transition: all 0.3s ease;
+
+  &--event {
+    border-color: rgb(220, 38, 38);
+    background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(220, 38, 38, 0.05));
+  }
+
+  &--profile {
+    border-color: rgb(59, 130, 246);
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
+  }
+
+  &--pulse {
+    &::after {
+      content: '';
+      position: absolute;
+      inset: -6px;
+      border-radius: 50%;
+      border: 2px solid currentColor;
+      opacity: 0;
+      animation: pulse-ring 2s infinite;
+    }
+  }
+}
+
+@keyframes pulse-ring {
+  0% {
+    transform: scale(0.8);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.3;
+  }
+  100% {
+    transform: scale(1.4);
+    opacity: 0;
+  }
+}
+
+.timeline-content {
+  background: linear-gradient(135deg, 
+    rgba(255, 255, 255, 0.8),
+    rgba(255, 255, 255, 0.6)
+  );
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 0.75rem;
+  padding: 1rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateX(4px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.timeline-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 0.5rem;
+}
+
+.timeline-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(31, 41, 55);
+  margin: 0;
+}
+
+.timeline-time {
+  font-size: 0.75rem;
+  color: rgb(156, 163, 175);
+  white-space: nowrap;
+}
+
+.timeline-description {
+  font-size: 0.8125rem;
+  color: rgb(107, 114, 128);
+  margin: 0 0 0.5rem 0;
+  line-height: 1.5;
+}
+
+.timeline-metadata {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+}
+
+@media (max-width: 640px) {
+  .activity-timeline {
+    padding-left: 1.5rem;
+  }
+
+  .timeline-marker {
+    left: -1rem;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .timeline-content {
+    padding: 0.75rem;
+  }
+}
+</style>

components/dashboard/BentoGrid.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="bento-grid" :class="gridClass">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  columns?: number;
+  gap?: 'sm' | 'md' | 'lg' | 'xl';
+  responsive?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  columns: 12,
+  gap: 'md',
+  responsive: true
+});
+
+const gridClass = computed(() => {
+  return {
+    [`bento-grid--cols-${props.columns}`]: true,
+    [`bento-grid--gap-${props.gap}`]: true,
+    'bento-grid--responsive': props.responsive
+  };
+});
+</script>
+
+<style scoped lang="scss">
+.bento-grid {
+  display: grid;
+  width: 100%;
+  
+  // Column configurations
+  &--cols-12 {
+    grid-template-columns: repeat(12, 1fr);
+  }
+  
+  &--cols-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+  
+  &--cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  
+  &--cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  
+  // Gap sizes
+  &--gap-sm {
+    gap: 0.75rem;
+  }
+  
+  &--gap-md {
+    gap: 1.25rem;
+  }
+  
+  &--gap-lg {
+    gap: 1.75rem;
+  }
+  
+  &--gap-xl {
+    gap: 2.25rem;
+  }
+  
+  // Responsive behavior
+  &--responsive {
+    @media (max-width: 640px) {
+      grid-template-columns: 1fr;
+      gap: 1rem;
+    }
+    
+    @media (min-width: 641px) and (max-width: 768px) {
+      grid-template-columns: repeat(6, 1fr);
+    }
+    
+    @media (min-width: 769px) and (max-width: 1024px) {
+      grid-template-columns: repeat(8, 1fr);
+    }
+  }
+}
+
+// Global Bento Item Classes
+:deep(.bento-item) {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+// Size variants
+:deep(.bento-item--small) {
+  grid-column: span 3;
+}
+
+:deep(.bento-item--medium) {
+  grid-column: span 4;
+}
+
+:deep(.bento-item--large) {
+  grid-column: span 6;
+}
+
+:deep(.bento-item--xlarge) {
+  grid-column: span 8;
+}
+
+:deep(.bento-item--full) {
+  grid-column: span 12;
+}
+
+// Height variants
+:deep(.bento-item--tall) {
+  grid-row: span 2;
+}
+
+:deep(.bento-item--xtall) {
+  grid-row: span 3;
+}
+
+// Responsive overrides
+@media (max-width: 640px) {
+  :deep(.bento-item--small),
+  :deep(.bento-item--medium),
+  :deep(.bento-item--large),
+  :deep(.bento-item--xlarge) {
+    grid-column: span 12;
+  }
+}
+
+@media (min-width: 641px) and (max-width: 768px) {
+  :deep(.bento-item--small) {
+    grid-column: span 3;
+  }
+  
+  :deep(.bento-item--medium),
+  :deep(.bento-item--large) {
+    grid-column: span 6;
+  }
+  
+  :deep(.bento-item--xlarge) {
+    grid-column: span 6;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  :deep(.bento-item--small) {
+    grid-column: span 3;
+  }
+  
+  :deep(.bento-item--medium) {
+    grid-column: span 4;
+  }
+  
+  :deep(.bento-item--large) {
+    grid-column: span 6;
+  }
+  
+  :deep(.bento-item--xlarge) {
+    grid-column: span 8;
+  }
+}
+</style>

components/dashboard/EventsCard.vue

@@ -0,0 +1,303 @@
+<template>
+  <div
+    v-motion
+    :initial="{ opacity: 0, y: 20 }"
+    :enter="{
+      opacity: 1,
+      y: 0,
+      transition: {
+        delay: 400,
+        duration: 600,
+        type: 'spring',
+        stiffness: 200
+      }
+    }"
+    class="events-card"
+  >
+    <div class="events-header">
+      <div class="header-left">
+        <v-icon color="error" size="20">mdi-calendar</v-icon>
+        <h3 class="events-title">Upcoming Events</h3>
+      </div>
+      <v-btn
+        variant="text"
+        color="error"
+        size="small"
+        @click="$emit('view-all')"
+      >
+        View All
+        <v-icon end size="16">mdi-arrow-right</v-icon>
+      </v-btn>
+    </div>
+
+    <div class="events-list">
+      <div
+        v-for="(event, index) in events"
+        :key="event.id"
+        v-motion
+        :initial="{ opacity: 0, x: -20 }"
+        :enter="{
+          opacity: 1,
+          x: 0,
+          transition: {
+            delay: 500 + (index * 100),
+            duration: 500,
+            type: 'spring'
+          }
+        }"
+        class="event-item"
+        :class="{ 'event-item--pending': event.status === 'pending' }"
+      >
+        <div class="event-date">
+          <div class="date-month">{{ formatMonth(event.date) }}</div>
+          <div class="date-day">{{ formatDay(event.date) }}</div>
+        </div>
+        
+        <div class="event-details">
+          <h4 class="event-name">{{ event.title }}</h4>
+          <div class="event-meta">
+            <span class="event-time">
+              <v-icon size="14" color="grey">mdi-clock-outline</v-icon>
+              {{ event.time }}
+            </span>
+            <span class="event-location">
+              <v-icon size="14" color="grey">mdi-map-marker</v-icon>
+              {{ event.location }}
+            </span>
+          </div>
+        </div>
+
+        <div class="event-status">
+          <v-chip
+            :color="event.status === 'confirmed' ? 'success' : 'warning'"
+            size="x-small"
+            variant="tonal"
+          >
+            {{ event.status }}
+          </v-chip>
+        </div>
+      </div>
+    </div>
+
+    <div class="events-footer">
+      <div class="footer-message">
+        <v-icon size="16" color="grey">mdi-information</v-icon>
+        <span>{{ events.length }} upcoming event{{ events.length !== 1 ? 's' : '' }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Event {
+  id: string;
+  title: string;
+  date: string;
+  time: string;
+  location: string;
+  status: 'confirmed' | 'pending';
+}
+
+interface Props {
+  events: Event[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  'view-all': [];
+}>();
+
+// Computed stats
+const confirmedCount = computed(() => 
+  props.events.filter(e => e.status === 'confirmed').length
+);
+
+const pendingCount = computed(() => 
+  props.events.filter(e => e.status === 'pending').length
+);
+
+// Date formatting
+const formatMonth = (dateString: string) => {
+  return new Date(dateString).toLocaleDateString('en-US', { month: 'short' }).toUpperCase();
+};
+
+const formatDay = (dateString: string) => {
+  return new Date(dateString).getDate();
+};
+</script>
+
+<style scoped lang="scss">
+.events-card {
+  height: 100%;
+  background: linear-gradient(135deg, 
+    rgba(255, 255, 255, 0.95),
+    rgba(255, 255, 255, 0.85)
+  );
+  backdrop-filter: blur(30px);
+  -webkit-backdrop-filter: blur(30px);
+  border-radius: 1.25rem;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.events-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.events-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: rgb(31, 41, 55);
+  margin: 0;
+}
+
+.events-list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow-y: auto;
+  padding-right: 0.5rem;
+  
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: rgba(220, 38, 38, 0.05);
+    border-radius: 2px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: rgba(220, 38, 38, 0.2);
+    border-radius: 2px;
+    
+    &:hover {
+      background: rgba(220, 38, 38, 0.3);
+    }
+  }
+}
+
+.event-item {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  background: linear-gradient(135deg, 
+    rgba(255, 255, 255, 0.8),
+    rgba(255, 255, 255, 0.6)
+  );
+  border-radius: 0.75rem;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  transition: all 0.3s ease;
+  cursor: pointer;
+  
+  &:hover {
+    transform: translateX(4px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+    border-color: rgba(220, 38, 38, 0.2);
+  }
+  
+  &--pending {
+    opacity: 0.8;
+    border-style: dashed;
+  }
+}
+
+.event-date {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, #dc2626, #b91c1c);
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
+}
+
+.date-month {
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+}
+
+.date-day {
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.event-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.event-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(31, 41, 55);
+  margin: 0 0 0.25rem 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.event-meta {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.75rem;
+  color: rgb(107, 114, 128);
+  
+  span {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+}
+
+.event-status {
+  flex-shrink: 0;
+  align-self: center;
+}
+
+.events-footer {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid rgba(220, 38, 38, 0.1);
+}
+
+.footer-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  color: rgb(107, 114, 128);
+}
+
+@media (max-width: 640px) {
+  .event-meta {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+}
+</style>

components/dashboard/PaymentCard.vue

@@ -0,0 +1,348 @@
+<template>
+  <div
+    v-motion
+    :initial="{ opacity: 0, scale: 0.95 }"
+    :enter="{
+      opacity: 1,
+      scale: 1,
+      transition: {
+        delay: 600,
+        duration: 600,
+        type: 'spring',
+        stiffness: 200
+      }
+    }"
+    class="payment-card"
+  >
+    <!-- Card Header -->
+    <div class="payment-header">
+      <div class="header-left">
+        <v-icon color="success" size="20">mdi-credit-card</v-icon>
+        <h3 class="payment-title">Payment Status</h3>
+      </div>
+      <v-chip
+        color="success"
+        variant="tonal"
+        size="small"
+      >
+        <v-icon start size="14">mdi-check-circle</v-icon>
+        Active
+      </v-chip>
+    </div>
+
+    <!-- Membership Info -->
+    <div 
+      v-motion
+      :initial="{ opacity: 0 }"
+      :enter="{
+        opacity: 1,
+        transition: {
+          delay: 700,
+          duration: 500
+        }
+      }"
+      class="membership-info"
+    >
+      <div class="info-row">
+        <span class="info-label">Membership Type</span>
+        <span class="info-value">{{ membershipType }}</span>
+      </div>
+      <div class="info-row">
+        <span class="info-label">Next Payment</span>
+        <span class="info-value">{{ nextPaymentDate }}</span>
+      </div>
+      <div class="info-row">
+        <span class="info-label">Amount</span>
+        <span class="info-value amount">${{ membershipAmount }}</span>
+      </div>
+    </div>
+
+    <!-- Payment Method -->
+    <div 
+      v-motion
+      :initial="{ opacity: 0, y: 10 }"
+      :enter="{
+        opacity: 1,
+        y: 0,
+        transition: {
+          delay: 800,
+          duration: 500
+        }
+      }"
+      class="payment-method"
+    >
+      <div class="method-header">
+        <span class="method-label">Payment Method</span>
+        <v-btn
+          variant="text"
+          color="error"
+          size="x-small"
+          @click="$emit('update-payment')"
+        >
+          Update
+        </v-btn>
+      </div>
+      <div class="method-card">
+        <v-icon color="primary" size="20">mdi-credit-card</v-icon>
+        <span class="card-number">•••• •••• •••• 4242</span>
+        <span class="card-exp">12/25</span>
+      </div>
+    </div>
+
+    <!-- Recent Payments -->
+    <div 
+      v-motion
+      :initial="{ opacity: 0 }"
+      :enter="{
+        opacity: 1,
+        transition: {
+          delay: 900,
+          duration: 500
+        }
+      }"
+      class="recent-payments"
+    >
+      <h4 class="payments-title">Recent Payments</h4>
+      <div class="payments-list">
+        <div
+          v-for="(payment, index) in paymentHistory"
+          :key="payment.id"
+          v-motion
+          :initial="{ opacity: 0, x: -10 }"
+          :visibleOnce="{
+            opacity: 1,
+            x: 0,
+            transition: {
+              delay: 1000 + (index * 50),
+              duration: 400
+            }
+          }"
+          class="payment-item"
+        >
+          <v-icon 
+            size="16" 
+            :color="index === 0 ? 'success' : 'grey'"
+          >
+            mdi-check-circle
+          </v-icon>
+          <span class="payment-date">{{ payment.date }}</span>
+          <span class="payment-amount">${{ payment.amount }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Action Button -->
+    <v-btn
+      color="error"
+      variant="outlined"
+      block
+      class="mt-4"
+      prepend-icon="mdi-history"
+      @click="$emit('update-payment')"
+    >
+      View Payment History
+    </v-btn>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Payment {
+  id: number;
+  date: string;
+  amount: string;
+}
+
+interface Props {
+  membershipType: string;
+  nextPaymentDate: string;
+  membershipAmount: string;
+  paymentHistory: Payment[];
+}
+
+defineProps<Props>();
+
+defineEmits<{
+  'update-payment': [];
+}>();
+</script>
+
+<style scoped lang="scss">
+.payment-card {
+  height: 100%;
+  background: linear-gradient(135deg, 
+    rgba(255, 255, 255, 0.95),
+    rgba(255, 255, 255, 0.85)
+  );
+  backdrop-filter: blur(30px);
+  -webkit-backdrop-filter: blur(30px);
+  border-radius: 1.25rem;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.payment-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.payment-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: rgb(31, 41, 55);
+  margin: 0;
+}
+
+.membership-info {
+  background: linear-gradient(135deg, 
+    rgba(34, 197, 94, 0.05),
+    rgba(34, 197, 94, 0.02)
+  );
+  border-radius: 0.75rem;
+  padding: 1rem;
+  margin-bottom: 1.25rem;
+  border: 1px solid rgba(34, 197, 94, 0.1);
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.375rem 0;
+  
+  &:not(:last-child) {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  }
+}
+
+.info-label {
+  font-size: 0.8125rem;
+  color: rgb(107, 114, 128);
+  font-weight: 500;
+}
+
+.info-value {
+  font-size: 0.875rem;
+  color: rgb(31, 41, 55);
+  font-weight: 600;
+  
+  &.amount {
+    font-size: 1.125rem;
+    background: linear-gradient(135deg, #22c55e, #16a34a);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+}
+
+.payment-method {
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 0.75rem;
+  padding: 1rem;
+  margin-bottom: 1.25rem;
+}
+
+.method-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.method-label {
+  font-size: 0.8125rem;
+  color: rgb(107, 114, 128);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.method-card {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: linear-gradient(135deg, 
+    rgba(255, 255, 255, 0.9),
+    rgba(255, 255, 255, 0.7)
+  );
+  border-radius: 0.5rem;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.card-number {
+  flex: 1;
+  font-family: 'Courier New', monospace;
+  font-size: 0.875rem;
+  color: rgb(31, 41, 55);
+  letter-spacing: 0.05em;
+}
+
+.card-exp {
+  font-size: 0.75rem;
+  color: rgb(107, 114, 128);
+}
+
+.recent-payments {
+  flex: 1;
+  margin-bottom: 1rem;
+}
+
+.payments-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(31, 41, 55);
+  margin: 0 0 0.75rem 0;
+}
+
+.payments-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.payment-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 0.5rem;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.5);
+    transform: translateX(2px);
+  }
+}
+
+.payment-date {
+  flex: 1;
+  font-size: 0.8125rem;
+  color: rgb(107, 114, 128);
+}
+
+.payment-amount {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(31, 41, 55);
+}
+
+@media (max-width: 640px) {
+  .payment-card {
+    padding: 1rem;
+  }
+}
+</style>

components/dashboard/ProfileCard.vue

@@ -0,0 +1,443 @@
+<template>
+  <div 
+    v-motion
+    :initial="{ opacity: 0, scale: 0.95 }"
+    :enter="{ 
+      opacity: 1, 
+      scale: 1,
+      transition: {
+        duration: 600,
+        type: 'spring',
+        stiffness: 200
+      }
+    }"
+    class="profile-card"
+  >
+    <!-- Background Gradient -->
+    <div class="profile-background">
+      <div class="profile-gradient"></div>
+      <div class="profile-pattern"></div>
+    </div>
+
+    <!-- Content -->
+    <div class="profile-content">
+      <!-- Header Section -->
+      <div class="profile-header">
+        <div class="profile-avatar-wrapper">
+          <div 
+            v-motion
+            :initial="{ scale: 0 }"
+            :enter="{ 
+              scale: 1,
+              transition: {
+                delay: 200,
+                type: 'spring',
+                stiffness: 200
+              }
+            }"
+            class="profile-avatar"
+          >
+            <ProfileAvatar
+              v-if="member"
+              :member-id="member.member_id"
+              :first-name="member.first_name"
+              :last-name="member.last_name"
+              size="x-large"
+              :show-badge="false"
+            />
+          </div>
+          <div class="profile-level-badge">
+            <v-icon size="16" color="white">mdi-star</v-icon>
+            <span>{{ memberLevel }}</span>
+          </div>
+        </div>
+
+        <div class="profile-info">
+          <h2 
+            v-motion
+            :initial="{ opacity: 0, y: 10 }"
+            :enter="{ 
+              opacity: 1, 
+              y: 0,
+              transition: {
+                delay: 300,
+                duration: 500
+              }
+            }"
+            class="profile-name"
+          >
+            {{ fullName }}
+          </h2>
+          <p class="profile-email">{{ email }}</p>
+          <div class="profile-badges">
+            <v-chip
+              color="error"
+              variant="tonal"
+              size="small"
+              class="profile-badge"
+            >
+              <v-icon start size="14">mdi-crown</v-icon>
+              {{ membershipType }}
+            </v-chip>
+            <v-chip
+              variant="outlined"
+              color="error"
+              size="small"
+              class="profile-badge"
+            >
+              <v-icon start size="14">mdi-calendar</v-icon>
+              Since {{ memberSince }}
+            </v-chip>
+          </div>
+        </div>
+      </div>
+
+      <!-- Stats Section -->
+      <div class="profile-stats">
+        <div 
+          v-for="(stat, index) in stats"
+          :key="stat.label"
+          v-motion
+          :initial="{ opacity: 0, y: 20 }"
+          :enter="{ 
+            opacity: 1, 
+            y: 0,
+            transition: {
+              delay: 400 + (index * 100),
+              duration: 500
+            }
+          }"
+          class="stat-item"
+        >
+          <div class="stat-value">{{ stat.value }}</div>
+          <div class="stat-label">{{ stat.label }}</div>
+        </div>
+      </div>
+
+      <!-- Progress Section -->
+      <div 
+        v-motion
+        :initial="{ opacity: 0 }"
+        :enter="{ 
+          opacity: 1,
+          transition: {
+            delay: 700,
+            duration: 500
+          }
+        }"
+        class="profile-progress"
+      >
+        <div class="progress-header">
+          <span class="progress-title">Level Progress</span>
+          <span class="progress-percentage">{{ levelProgress }}%</span>
+        </div>
+        <div class="progress-bar">
+          <div 
+            class="progress-fill"
+            :style="{ width: `${levelProgress}%` }"
+          ></div>
+        </div>
+        <p class="progress-subtitle">
+          {{ pointsToNext }} points to {{ nextLevel }}
+        </p>
+      </div>
+
+      <!-- Action Button -->
+      <v-btn
+        color="error"
+        variant="flat"
+        block
+        class="profile-action mt-4"
+        prepend-icon="mdi-account-edit"
+        @click="$emit('edit-profile')"
+      >
+        Edit Profile
+      </v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Member } from '~/utils/types';
+
+interface Props {
+  member: Member | null;
+  memberPoints?: number;
+  eventsAttended?: number;
+  connections?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  memberPoints: 2450,
+  eventsAttended: 12,
+  connections: 48
+});
+
+const emit = defineEmits<{
+  'edit-profile': [];
+}>();
+
+// Computed properties
+const fullName = computed(() => {
+  if (props.member) {
+    return `${props.member.first_name} ${props.member.last_name}`;
+  }
+  return 'Member';
+});
+
+const email = computed(() => props.member?.email || '');
+
+const membershipType = computed(() => 'Premium');
+const memberLevel = computed(() => 'Gold');
+
+const memberSince = computed(() => {
+  if (props.member?.join_date) {
+    return new Date(props.member.join_date).getFullYear();
+  }
+  return new Date().getFullYear();
+});
+
+// Stats data
+const stats = computed(() => [
+  { label: 'Points', value: props.memberPoints.toLocaleString() },
+  { label: 'Events', value: props.eventsAttended },
+  { label: 'Connections', value: props.connections }
+]);
+
+// Level progress calculation
+const levelProgress = computed(() => {
+  // Calculate progress to next level (mock calculation)
+  const currentLevelMin = 2000;
+  const nextLevelMin = 3000;
+  const progress = ((props.memberPoints - currentLevelMin) / (nextLevelMin - currentLevelMin)) * 100;
+  return Math.min(Math.max(progress, 0), 100).toFixed(0);
+});
+
+const pointsToNext = computed(() => {
+  const nextLevelMin = 3000;
+  return nextLevelMin - props.memberPoints;
+});
+
+const nextLevel = computed(() => 'Platinum');
+</script>
+
+<style scoped lang="scss">
+.profile-card {
+  position: relative;
+  height: 100%;
+  background: linear-gradient(135deg, 
+    rgba(255, 255, 255, 0.95),
+    rgba(255, 255, 255, 0.85)
+  );
+  backdrop-filter: blur(30px);
+  -webkit-backdrop-filter: blur(30px);
+  border-radius: 1.25rem;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  overflow: hidden;
+}
+
+.profile-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 120px;
+  overflow: hidden;
+}
+
+.profile-gradient {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, 
+    rgba(220, 38, 38, 0.9),
+    rgba(185, 28, 28, 0.9)
+  );
+}
+
+.profile-pattern {
+  position: absolute;
+  inset: 0;
+  opacity: 0.1;
+  background-image: 
+    repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.1) 35px, rgba(255,255,255,.1) 70px);
+}
+
+.profile-content {
+  position: relative;
+  padding: 1.5rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.profile-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 1.25rem;
+  margin-bottom: 1.5rem;
+}
+
+.profile-avatar-wrapper {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.profile-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 1rem;
+  overflow: hidden;
+  border: 4px solid white;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+.profile-level-badge {
+  position: absolute;
+  bottom: -4px;
+  right: -4px;
+  background: linear-gradient(135deg, #f59e0b, #d97706);
+  color: white;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.5rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
+}
+
+.profile-info {
+  flex: 1;
+  padding-top: 0.5rem;
+}
+
+.profile-name {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: rgb(31, 41, 55);
+  margin: 0 0 0.25rem 0;
+}
+
+.profile-email {
+  font-size: 0.875rem;
+  color: rgb(107, 114, 128);
+  margin: 0 0 0.75rem 0;
+}
+
+.profile-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.profile-badge {
+  font-weight: 500;
+}
+
+.profile-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  padding: 1.25rem;
+  background: linear-gradient(135deg, 
+    rgba(220, 38, 38, 0.03),
+    rgba(220, 38, 38, 0.01)
+  );
+  border-radius: 0.75rem;
+  margin-bottom: 1.25rem;
+}
+
+.stat-item {
+  text-align: center;
+}
+
+.stat-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, #dc2626, #b91c1c);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  line-height: 1;
+  margin-bottom: 0.25rem;
+}
+
+.stat-label {
+  font-size: 0.75rem;
+  color: rgb(156, 163, 175);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.profile-progress {
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.progress-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.progress-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(31, 41, 55);
+}
+
+.progress-percentage {
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: rgb(220, 38, 38);
+}
+
+.progress-bar {
+  height: 8px;
+  background: rgba(220, 38, 38, 0.1);
+  border-radius: 9999px;
+  overflow: hidden;
+  margin-bottom: 0.5rem;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #dc2626, #ef4444);
+  border-radius: 9999px;
+  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
+}
+
+.progress-subtitle {
+  font-size: 0.75rem;
+  color: rgb(156, 163, 175);
+  margin: 0;
+}
+
+.profile-action {
+  margin-top: auto;
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+@media (max-width: 768px) {
+  .profile-header {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .profile-badges {
+    justify-content: center;
+  }
+}
+</style>

components/dashboard/QuickActionCard.vue

@@ -0,0 +1,163 @@
+<template>
+  <div
+    v-motion
+    :initial="{ opacity: 0, y: 20, scale: 0.9 }"
+    :enter="{
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: {
+        delay: delay,
+        duration: 500,
+        type: 'spring',
+        stiffness: 200
+      }
+    }"
+    :hovered="{
+      scale: 1.05,
+      y: -5,
+      transition: {
+        duration: 200
+      }
+    }"
+    class="quick-action-card"
+    @click="$emit('click')"
+  >
+    <div class="action-icon" :style="{ background: iconBackground }">
+      <v-icon :color="color" size="28">{{ icon }}</v-icon>
+    </div>
+    <h4 class="action-title">{{ title }}</h4>
+    <v-icon class="action-arrow" color="grey" size="16">mdi-arrow-right</v-icon>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  icon: string;
+  title: string;
+  color?: string;
+  delay?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'error',
+  delay: 0
+});
+
+defineEmits<{
+  click: [];
+}>();
+
+// Compute icon background based on color
+const iconBackground = computed(() => {
+  const colors: Record<string, string> = {
+    error: 'linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(220, 38, 38, 0.05))',
+    primary: 'linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(33, 150, 243, 0.05))',
+    success: 'linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05))',
+    warning: 'linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05))',
+    info: 'linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05))'
+  };
+  return colors[props.color] || colors.error;
+});
+</script>
+
+<style scoped lang="scss">
+.quick-action-card {
+  position: relative;
+  background: linear-gradient(135deg, 
+    rgba(255, 255, 255, 0.95),
+    rgba(255, 255, 255, 0.85)
+  );
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 
+    0 8px 24px rgba(0, 0, 0, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  padding: 1.5rem;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, 
+      rgba(220, 38, 38, 0.3),
+      rgba(220, 38, 38, 0.1),
+      transparent
+    );
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+  }
+  
+  &:hover {
+    border-color: rgba(220, 38, 38, 0.2);
+    box-shadow: 
+      0 12px 32px rgba(0, 0, 0, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 0.7);
+    
+    &::before {
+      transform: translateX(0);
+    }
+    
+    .action-arrow {
+      transform: translateX(4px);
+      color: rgb(220, 38, 38) !important;
+    }
+    
+    .action-icon {
+      transform: rotate(-5deg) scale(1.1);
+    }
+  }
+}
+
+.action-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.action-title {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: rgb(31, 41, 55);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.action-arrow {
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+  transition: all 0.3s ease;
+}
+
+@media (max-width: 640px) {
+  .quick-action-card {
+    padding: 1rem;
+  }
+  
+  .action-icon {
+    width: 48px;
+    height: 48px;
+  }
+  
+  .action-title {
+    font-size: 0.875rem;
+  }
+}
+</style>

components/dashboard/SimpleProfileCard.vue

@@ -0,0 +1,296 @@
+<template>
+  <div 
+    v-motion
+    :initial="{ opacity: 0, scale: 0.98 }"
+    :enter="{ 
+      opacity: 1, 
+      scale: 1,
+      transition: {
+        duration: 500,
+        type: 'spring',
+        stiffness: 200
+      }
+    }"
+    class="simple-profile-card"
+  >
+    <!-- Header with Avatar -->
+    <div class="profile-header">
+      <div class="profile-avatar-wrapper">
+        <ProfileAvatar
+          v-if="member"
+          :member-id="member.member_id"
+          :first-name="member.first_name"
+          :last-name="member.last_name"
+          size="x-large"
+          :show-badge="false"
+        />
+      </div>
+      
+      <div class="profile-title">
+        <h2 class="profile-name">{{ fullName }}</h2>
+        <p class="profile-member-id">{{ member?.member_id || 'MUSA-0000' }}</p>
+      </div>
+    </div>
+
+    <!-- Profile Information -->
+    <div class="profile-info-section">
+      <h3 class="section-title">Contact Information</h3>
+      
+      <div class="info-grid">
+        <div class="info-item">
+          <v-icon size="18" color="grey-darken-1">mdi-email</v-icon>
+          <div class="info-content">
+            <span class="info-label">Email</span>
+            <span class="info-value">{{ member?.email || 'Not provided' }}</span>
+            <v-chip 
+              v-if="emailVerified" 
+              size="x-small" 
+              color="success" 
+              variant="tonal"
+              class="ml-2"
+            >
+              Verified
+            </v-chip>
+          </div>
+        </div>
+
+        <div class="info-item">
+          <v-icon size="18" color="grey-darken-1">mdi-phone</v-icon>
+          <div class="info-content">
+            <span class="info-label">Phone</span>
+            <span class="info-value">{{ member?.phone || 'Not provided' }}</span>
+          </div>
+        </div>
+
+        <div class="info-item">
+          <v-icon size="18" color="grey-darken-1">mdi-map-marker</v-icon>
+          <div class="info-content">
+            <span class="info-label">Address</span>
+            <span class="info-value">{{ member?.address || 'Not provided' }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Personal Information -->
+    <div class="profile-info-section">
+      <h3 class="section-title">Personal Information</h3>
+      
+      <div class="info-grid">
+        <div class="info-item">
+          <v-icon size="18" color="grey-darken-1">mdi-flag</v-icon>
+          <div class="info-content">
+            <span class="info-label">Nationality</span>
+            <span class="info-value">{{ formatNationality(member?.nationality) }}</span>
+          </div>
+        </div>
+
+        <div class="info-item">
+          <v-icon size="18" color="grey-darken-1">mdi-cake</v-icon>
+          <div class="info-content">
+            <span class="info-label">Date of Birth</span>
+            <span class="info-value">{{ formatDate(member?.date_of_birth) }}</span>
+          </div>
+        </div>
+
+        <div class="info-item">
+          <v-icon size="18" color="grey-darken-1">mdi-calendar-account</v-icon>
+          <div class="info-content">
+            <span class="info-label">Member Since</span>
+            <span class="info-value">{{ formatDate(member?.member_since) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Bio Section (if available) -->
+    <div v-if="member?.bio" class="profile-info-section">
+      <h3 class="section-title">About Me</h3>
+      <p class="bio-text">{{ member.bio }}</p>
+    </div>
+
+    <!-- Action Button -->
+    <v-btn
+      color="error"
+      variant="flat"
+      block
+      class="profile-action"
+      prepend-icon="mdi-account-edit"
+      @click="$emit('edit-profile')"
+    >
+      Edit Profile
+    </v-btn>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Member } from '~/utils/types';
+
+interface Props {
+  member: Member | null;
+  emailVerified?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  emailVerified: false
+});
+
+const emit = defineEmits<{
+  'edit-profile': [];
+}>();
+
+// Computed properties
+const fullName = computed(() => {
+  if (props.member) {
+    return `${props.member.first_name} ${props.member.last_name}`;
+  }
+  return 'Member';
+});
+
+// Format nationality (handles multiple nationalities)
+const formatNationality = (nationality?: string) => {
+  if (!nationality) return 'Not provided';
+  
+  // Split by comma if multiple nationalities
+  const nationalities = nationality.split(',').map(n => n.trim());
+  
+  // Map country codes to full names if needed
+  const countryMap: Record<string, string> = {
+    'US': 'United States',
+    'FR': 'France',
+    'MC': 'Monaco',
+    'IT': 'Italy',
+    'UK': 'United Kingdom',
+    'DE': 'Germany',
+    'ES': 'Spain'
+  };
+  
+  return nationalities.map(n => countryMap[n] || n).join(', ');
+};
+
+// Format date
+const formatDate = (dateString?: string) => {
+  if (!dateString) return 'Not provided';
+  
+  try {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+  } catch {
+    return dateString;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.simple-profile-card {
+  background: white;
+  border-radius: 1rem;
+  padding: 1.5rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.profile-header {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  margin-bottom: 1.5rem;
+}
+
+.profile-avatar-wrapper {
+  flex-shrink: 0;
+}
+
+.profile-title {
+  flex: 1;
+}
+
+.profile-name {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: rgb(31, 41, 55);
+  margin: 0 0 0.25rem 0;
+}
+
+.profile-member-id {
+  font-size: 0.875rem;
+  color: rgb(107, 114, 128);
+  margin: 0;
+  font-family: 'Courier New', monospace;
+}
+
+.profile-info-section {
+  margin-bottom: 1.5rem;
+}
+
+.section-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(107, 114, 128);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 0 0 1rem 0;
+}
+
+.info-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.info-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.info-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.info-label {
+  font-size: 0.75rem;
+  color: rgb(156, 163, 175);
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.info-value {
+  font-size: 0.875rem;
+  color: rgb(31, 41, 55);
+  line-height: 1.4;
+}
+
+.bio-text {
+  font-size: 0.875rem;
+  color: rgb(75, 85, 99);
+  line-height: 1.6;
+  margin: 0;
+}
+
+.profile-action {
+  margin-top: auto;
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+@media (max-width: 768px) {
+  .profile-header {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+</style>

components/dashboard/StatsCard.vue

@@ -0,0 +1,332 @@
+<template>
+  <div 
+    v-motion
+    :initial="{ opacity: 0, y: 20, scale: 0.95 }"
+    :enter="{ 
+      opacity: 1, 
+      y: 0,
+      scale: 1,
+      transition: {
+        delay: delay,
+        duration: 600,
+        type: 'spring',
+        stiffness: 200,
+        damping: 20
+      }
+    }"
+    :hovered="{
+      scale: 1.02,
+      y: -2,
+      transition: {
+        duration: 200
+      }
+    }"
+    class="stats-card"
+  >
+    <div class="stats-card-inner">
+      <!-- Icon Section -->
+      <div class="stats-icon" :style="{ background: iconBackground }">
+        <v-icon :color="iconColor" size="24">{{ icon }}</v-icon>
+      </div>
+
+      <!-- Content Section -->
+      <div class="stats-content">
+        <p class="stats-label">{{ label }}</p>
+        <div class="stats-value-wrapper">
+          <h3 
+            class="stats-value"
+            v-motion
+            :initial="{ opacity: 0 }"
+            :visible="{
+              opacity: 1,
+              transition: {
+                delay: delay + 200,
+                duration: 800
+              }
+            }"
+          >
+            <span v-if="prefix">{{ prefix }}</span>
+            <AnimatedNumber :value="value" :duration="1500" :format="formatNumber" />
+            <span v-if="suffix">{{ suffix }}</span>
+          </h3>
+          <div 
+            v-if="change !== undefined"
+            class="stats-change"
+            :class="changeClass"
+            v-motion
+            :initial="{ opacity: 0, scale: 0.8 }"
+            :visible="{
+              opacity: 1,
+              scale: 1,
+              transition: {
+                delay: delay + 400,
+                duration: 500,
+                type: 'spring'
+              }
+            }"
+          >
+            <v-icon size="16">
+              {{ change >= 0 ? 'mdi-trending-up' : 'mdi-trending-down' }}
+            </v-icon>
+            <span>{{ Math.abs(change) }}%</span>
+          </div>
+        </div>
+        <p v-if="subtitle" class="stats-subtitle">{{ subtitle }}</p>
+      </div>
+
+      <!-- Background Decoration -->
+      <div class="stats-decoration">
+        <svg viewBox="0 0 200 100" class="stats-chart">
+          <path
+            :d="sparklinePath"
+            fill="none"
+            :stroke="decorationColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            opacity="0.2"
+          />
+          <path
+            :d="sparklinePath"
+            fill="url(#gradient)"
+            opacity="0.1"
+          />
+          <defs>
+            <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" :stop-color="decorationColor" stop-opacity="0.3" />
+              <stop offset="100%" :stop-color="decorationColor" stop-opacity="0" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue';
+
+interface Props {
+  label: string;
+  value: number;
+  icon: string;
+  iconColor?: string;
+  iconBackground?: string;
+  change?: number;
+  prefix?: string;
+  suffix?: string;
+  subtitle?: string;
+  delay?: number;
+  decorationColor?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  iconColor: 'error',
+  iconBackground: 'linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(220, 38, 38, 0.05))',
+  delay: 0,
+  decorationColor: '#dc2626'
+});
+
+// Animated number component
+const AnimatedNumber = {
+  props: {
+    value: Number,
+    duration: { type: Number, default: 1000 },
+    format: Function
+  },
+  setup(props: any) {
+    const displayValue = ref(0);
+    
+    onMounted(() => {
+      const startTime = Date.now();
+      const startValue = 0;
+      const endValue = props.value;
+      
+      const updateValue = () => {
+        const now = Date.now();
+        const progress = Math.min((now - startTime) / props.duration, 1);
+        
+        // Easing function for smooth animation
+        const easeOutQuart = 1 - Math.pow(1 - progress, 4);
+        displayValue.value = startValue + (endValue - startValue) * easeOutQuart;
+        
+        if (progress < 1) {
+          requestAnimationFrame(updateValue);
+        } else {
+          displayValue.value = endValue;
+        }
+      };
+      
+      updateValue();
+    });
+    
+    const formattedValue = computed(() => {
+      if (props.format) {
+        return props.format(displayValue.value);
+      }
+      return Math.round(displayValue.value).toLocaleString();
+    });
+    
+    return () => formattedValue.value;
+  }
+};
+
+// Compute change indicator class
+const changeClass = computed(() => {
+  if (props.change === undefined) return '';
+  return props.change >= 0 ? 'stats-change--positive' : 'stats-change--negative';
+});
+
+// Format number function
+const formatNumber = (num: number) => {
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1) + 'M';
+  } else if (num >= 1000) {
+    return (num / 1000).toFixed(1) + 'K';
+  }
+  return Math.round(num).toLocaleString();
+};
+
+// Generate random sparkline path
+const sparklinePath = computed(() => {
+  const points = 10;
+  const width = 200;
+  const height = 100;
+  const values = Array.from({ length: points }, () => Math.random() * 0.6 + 0.2);
+  
+  const path = values.map((value, index) => {
+    const x = (index / (points - 1)) * width;
+    const y = height - (value * height);
+    return `${index === 0 ? 'M' : 'L'} ${x} ${y}`;
+  }).join(' ');
+  
+  return `${path} L ${width} ${height} L 0 ${height} Z`;
+});
+</script>
+
+<style scoped lang="scss">
+.stats-card {
+  position: relative;
+  height: 100%;
+  background: linear-gradient(135deg, 
+    rgba(255, 255, 255, 0.9),
+    rgba(255, 255, 255, 0.7)
+  );
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: 
+      0 12px 40px rgba(0, 0, 0, 0.12),
+      inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  }
+}
+
+.stats-card-inner {
+  position: relative;
+  padding: 1.5rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+}
+
+.stats-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.stats-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.stats-label {
+  font-size: 0.875rem;
+  color: rgb(107, 114, 128);
+  margin: 0 0 0.5rem 0;
+  font-weight: 500;
+}
+
+.stats-value-wrapper {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  margin-bottom: 0.25rem;
+}
+
+.stats-value {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 0;
+  background: linear-gradient(135deg, #dc2626, #b91c1c);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  line-height: 1.2;
+}
+
+.stats-change {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+
+  &--positive {
+    background: rgba(34, 197, 94, 0.1);
+    color: rgb(34, 197, 94);
+  }
+
+  &--negative {
+    background: rgba(239, 68, 68, 0.1);
+    color: rgb(239, 68, 68);
+  }
+}
+
+.stats-subtitle {
+  font-size: 0.75rem;
+  color: rgb(156, 163, 175);
+  margin: 0.25rem 0 0 0;
+}
+
+.stats-decoration {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 60%;
+  height: 50%;
+  pointer-events: none;
+}
+
+.stats-chart {
+  width: 100%;
+  height: 100%;
+}
+
+@media (max-width: 640px) {
+  .stats-value {
+    font-size: 1.5rem;
+  }
+  
+  .stats-card-inner {
+    padding: 1rem;
+  }
+}
+</style>

components/ui/AnimatedNumber.vue

@@ -0,0 +1,64 @@
+<template>
+  <span>{{ displayValue }}</span>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+
+interface Props {
+  value: number
+  duration?: number
+  format?: (value: number) => string
+  delay?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  duration: 1000,
+  format: (value: number) => value.toLocaleString(),
+  delay: 0
+})
+
+const displayValue = ref(props.format(0))
+const startTimestamp = ref<number | null>(null)
+const startValue = ref(0)
+
+const animate = (timestamp: number) => {
+  if (!startTimestamp.value) {
+    startTimestamp.value = timestamp
+  }
+  
+  const progress = Math.min((timestamp - startTimestamp.value) / props.duration, 1)
+  
+  // Easing function for smooth animation
+  const easeOutQuart = (t: number) => 1 - Math.pow(1 - t, 4)
+  const easedProgress = easeOutQuart(progress)
+  
+  const currentValue = startValue.value + (props.value - startValue.value) * easedProgress
+  displayValue.value = props.format(currentValue)
+  
+  if (progress < 1) {
+    requestAnimationFrame(animate)
+  }
+}
+
+const startAnimation = () => {
+  startTimestamp.value = null
+  
+  if (props.delay > 0) {
+    setTimeout(() => {
+      requestAnimationFrame(animate)
+    }, props.delay)
+  } else {
+    requestAnimationFrame(animate)
+  }
+}
+
+watch(() => props.value, (newValue, oldValue) => {
+  startValue.value = oldValue || 0
+  startAnimation()
+})
+
+onMounted(() => {
+  startAnimation()
+})
+</script>

components/ui/FloatingInput.vue

@@ -0,0 +1,417 @@
+<template>
+  <div
+    class="floating-input"
+    :class="[
+      `floating-input--${variant}`,
+      {
+        'floating-input--focused': isFocused || modelValue,
+        'floating-input--error': error,
+        'floating-input--disabled': disabled
+      }
+    ]"
+  >
+    <div class="floating-input__wrapper">
+      <Icon 
+        v-if="leftIcon" 
+        :name="leftIcon" 
+        class="floating-input__icon floating-input__icon--left"
+      />
+      
+      <input
+        :id="inputId"
+        v-model="modelValue"
+        :type="type"
+        :disabled="disabled"
+        :readonly="readonly"
+        :autocomplete="autocomplete"
+        class="floating-input__field"
+        :class="{ 
+          'floating-input__field--with-left-icon': leftIcon,
+          'floating-input__field--with-right-icon': rightIcon || clearable
+        }"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @input="$emit('update:modelValue', $event.target.value)"
+      />
+      
+      <label 
+        :for="inputId"
+        class="floating-input__label"
+        :class="{ 
+          'floating-input__label--floating': isFocused || modelValue,
+          'floating-input__label--with-icon': leftIcon
+        }"
+      >
+        {{ label }}
+        <span v-if="required" class="floating-input__required">*</span>
+      </label>
+      
+      <button
+        v-if="clearable && modelValue"
+        type="button"
+        class="floating-input__clear"
+        @click="clearInput"
+      >
+        <Icon name="x" />
+      </button>
+      
+      <Icon 
+        v-if="rightIcon && !clearable" 
+        :name="rightIcon" 
+        class="floating-input__icon floating-input__icon--right"
+      />
+    </div>
+    
+    <Transition name="message">
+      <div v-if="error || helperText" class="floating-input__message">
+        <Icon 
+          v-if="error" 
+          name="alert-circle" 
+          class="floating-input__message-icon"
+        />
+        <span>{{ error || helperText }}</span>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import Icon from '~/components/ui/Icon.vue'
+
+interface Props {
+  modelValue?: string
+  label: string
+  type?: 'text' | 'email' | 'password' | 'tel' | 'url' | 'number'
+  variant?: 'glass' | 'solid' | 'outline'
+  leftIcon?: string
+  rightIcon?: string
+  error?: string
+  helperText?: string
+  required?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  clearable?: boolean
+  autocomplete?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'text',
+  variant: 'glass',
+  required: false,
+  disabled: false,
+  readonly: false,
+  clearable: false,
+  autocomplete: 'off'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'focus': []
+  'blur': []
+  'clear': []
+}>()
+
+const isFocused = ref(false)
+const inputId = computed(() => `input-${Math.random().toString(36).substr(2, 9)}`)
+
+const handleFocus = () => {
+  isFocused.value = true
+  emit('focus')
+}
+
+const handleBlur = () => {
+  isFocused.value = false
+  emit('blur')
+}
+
+const clearInput = () => {
+  emit('update:modelValue', '')
+  emit('clear')
+}
+</script>
+
+<style scoped lang="scss">
+.floating-input {
+  position: relative;
+  width: 100%;
+  
+  &__wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border-radius: 12px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    // Base styles
+    .floating-input--glass & {
+      background: rgba(255, 255, 255, 0.7);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
+      
+      &:hover:not(.floating-input--disabled &) {
+        background: rgba(255, 255, 255, 0.8);
+        border-color: rgba(220, 38, 38, 0.2);
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+      }
+    }
+    
+    .floating-input--solid & {
+      background: white;
+      border: 2px solid #e5e5e5;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+      
+      &:hover:not(.floating-input--disabled &) {
+        border-color: #d4d4d4;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      }
+    }
+    
+    .floating-input--outline & {
+      background: transparent;
+      border: 2px solid #d4d4d4;
+      
+      &:hover:not(.floating-input--disabled &) {
+        border-color: #a3a3a3;
+      }
+    }
+    
+    // Focus state
+    .floating-input--focused & {
+      border-color: #dc2626;
+      box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+      transform: translateY(-1px);
+    }
+    
+    .floating-input--focused.floating-input--glass & {
+      background: rgba(255, 255, 255, 0.9);
+    }
+    
+    // Error state
+    .floating-input--error & {
+      border-color: #ef4444;
+      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+    }
+    
+    // Disabled state
+    .floating-input--disabled & {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+  
+  &__field {
+    flex: 1;
+    padding: 1.25rem 1rem 0.5rem;
+    background: transparent;
+    border: none;
+    outline: none;
+    font-size: 1rem;
+    color: #27272a;
+    transition: padding 0.2s ease;
+    
+    &--with-left-icon {
+      padding-left: 3rem;
+    }
+    
+    &--with-right-icon {
+      padding-right: 3rem;
+    }
+    
+    &:disabled {
+      cursor: not-allowed;
+    }
+    
+    // Remove autofill background
+    &:-webkit-autofill {
+      -webkit-box-shadow: 0 0 0 1000px transparent inset;
+      -webkit-text-fill-color: #27272a;
+      transition: background-color 5000s ease-in-out 0s;
+    }
+  }
+  
+  &__label {
+    position: absolute;
+    left: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 1rem;
+    color: #71717a;
+    pointer-events: none;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    background: transparent;
+    padding: 0 0.25rem;
+    
+    &--with-icon {
+      left: 3rem;
+    }
+    
+    &--floating {
+      top: 0.75rem;
+      transform: translateY(0);
+      font-size: 0.75rem;
+      color: #dc2626;
+      font-weight: 500;
+      
+      .floating-input--glass & {
+        background: linear-gradient(
+          to bottom,
+          rgba(255, 255, 255, 0.9) 0%,
+          rgba(255, 255, 255, 0.9) 50%,
+          transparent 50%,
+          transparent 100%
+        );
+      }
+      
+      .floating-input--solid & {
+        background: linear-gradient(
+          to bottom,
+          white 0%,
+          white 50%,
+          transparent 50%,
+          transparent 100%
+        );
+      }
+    }
+    
+    .floating-input--error &--floating {
+      color: #ef4444;
+    }
+  }
+  
+  &__required {
+    color: #ef4444;
+    margin-left: 0.125rem;
+  }
+  
+  &__icon {
+    position: absolute;
+    width: 1.25rem;
+    height: 1.25rem;
+    color: #dc2626;
+    
+    &--left {
+      left: 1rem;
+    }
+    
+    &--right {
+      right: 1rem;
+    }
+  }
+  
+  &__clear {
+    position: absolute;
+    right: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    background: rgba(220, 38, 38, 0.1);
+    border: none;
+    border-radius: 50%;
+    color: #dc2626;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    &:hover {
+      background: rgba(220, 38, 38, 0.2);
+      transform: scale(1.1);
+    }
+    
+    svg {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+  }
+  
+  &__message {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin-top: 0.5rem;
+    font-size: 0.875rem;
+    color: #71717a;
+    
+    .floating-input--error & {
+      color: #ef4444;
+    }
+  }
+  
+  &__message-icon {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+}
+
+// Animations
+.message-enter-active,
+.message-leave-active {
+  transition: all 0.2s ease;
+}
+
+.message-enter-from {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.message-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+// Dark mode support
+@media (prefers-color-scheme: dark) {
+  .floating-input {
+    &__field {
+      color: white;
+      
+      &:-webkit-autofill {
+        -webkit-text-fill-color: white;
+      }
+    }
+    
+    &__wrapper {
+      .floating-input--glass & {
+        background: rgba(30, 30, 30, 0.7);
+        border-color: rgba(255, 255, 255, 0.1);
+      }
+      
+      .floating-input--solid & {
+        background: #27272a;
+        border-color: #3f3f46;
+      }
+    }
+    
+    &__label {
+      color: #a3a3a3;
+      
+      &--floating {
+        .floating-input--glass & {
+          background: linear-gradient(
+            to bottom,
+            rgba(30, 30, 30, 0.9) 0%,
+            rgba(30, 30, 30, 0.9) 50%,
+            transparent 50%,
+            transparent 100%
+          );
+        }
+        
+        .floating-input--solid & {
+          background: linear-gradient(
+            to bottom,
+            #27272a 0%,
+            #27272a 50%,
+            transparent 50%,
+            transparent 100%
+          );
+        }
+      }
+    }
+  }
+}
+</style>

components/ui/GlassCard.vue

@@ -0,0 +1,276 @@
+<template>
+  <div
+    v-motion
+    :initial="animated ? animationConfig.initial : {}"
+    :enter="animated ? animationConfig.enter : {}"
+    :hovered="hoverable ? { scale: 1.02 } : {}"
+    :delay="delay"
+    class="glass-card"
+    :class="[
+      `glass-card--${variant}`,
+      `glass-card--${size}`,
+      {
+        'glass-card--clickable': clickable,
+        'glass-card--elevated': elevated
+      }
+    ]"
+  >
+    <div v-if="hasHeader" class="glass-card__header">
+      <slot name="header">
+        <h3 v-if="title" class="glass-card__title">{{ title }}</h3>
+        <p v-if="subtitle" class="glass-card__subtitle">{{ subtitle }}</p>
+      </slot>
+    </div>
+    
+    <div class="glass-card__body">
+      <slot />
+    </div>
+    
+    <div v-if="hasFooter" class="glass-card__footer">
+      <slot name="footer" />
+    </div>
+    
+    <div v-if="gradient" class="glass-card__gradient"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+
+interface Props {
+  title?: string
+  subtitle?: string
+  variant?: 'light' | 'dark' | 'colored' | 'gradient'
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  clickable?: boolean
+  hoverable?: boolean
+  elevated?: boolean
+  gradient?: boolean
+  animated?: boolean
+  delay?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'light',
+  size: 'md',
+  clickable: false,
+  hoverable: true,
+  elevated: true,
+  gradient: false,
+  animated: true,
+  delay: 0
+})
+
+const slots = useSlots()
+const hasHeader = computed(() => !!slots.header || props.title || props.subtitle)
+const hasFooter = computed(() => !!slots.footer)
+
+const animationConfig = {
+  initial: {
+    opacity: 0,
+    y: 20,
+    scale: 0.95
+  },
+  enter: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: {
+      type: 'spring',
+      stiffness: 200,
+      damping: 20
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.glass-card {
+  position: relative;
+  border-radius: 20px;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  // Glass effect base
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background: linear-gradient(135deg, 
+      rgba(255, 255, 255, 0.3) 0%, 
+      rgba(255, 255, 255, 0.1) 100%);
+    -webkit-mask: 
+      linear-gradient(#fff 0 0) content-box, 
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+  
+  // Variants
+  &--light {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    color: #27272a;
+  }
+  
+  &--dark {
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #ffffff;
+  }
+  
+  &--colored {
+    background: linear-gradient(135deg, 
+      rgba(220, 38, 38, 0.1) 0%, 
+      rgba(185, 28, 28, 0.05) 100%);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid rgba(220, 38, 38, 0.2);
+    color: #27272a;
+  }
+  
+  &--gradient {
+    background: linear-gradient(135deg, 
+      rgba(255, 255, 255, 0.8) 0%, 
+      rgba(255, 255, 255, 0.4) 100%);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    color: #27272a;
+  }
+  
+  // Sizes
+  &--sm {
+    .glass-card__body {
+      padding: 1rem;
+    }
+    .glass-card__header {
+      padding: 1rem 1rem 0.5rem;
+    }
+    .glass-card__footer {
+      padding: 0.5rem 1rem 1rem;
+    }
+  }
+  
+  &--md {
+    .glass-card__body {
+      padding: 1.5rem;
+    }
+    .glass-card__header {
+      padding: 1.5rem 1.5rem 0.75rem;
+    }
+    .glass-card__footer {
+      padding: 0.75rem 1.5rem 1.5rem;
+    }
+  }
+  
+  &--lg {
+    .glass-card__body {
+      padding: 2rem;
+    }
+    .glass-card__header {
+      padding: 2rem 2rem 1rem;
+    }
+    .glass-card__footer {
+      padding: 1rem 2rem 2rem;
+    }
+  }
+  
+  &--xl {
+    .glass-card__body {
+      padding: 2.5rem;
+    }
+    .glass-card__header {
+      padding: 2.5rem 2.5rem 1.25rem;
+    }
+    .glass-card__footer {
+      padding: 1.25rem 2.5rem 2.5rem;
+    }
+  }
+  
+  // States
+  &--clickable {
+    cursor: pointer;
+    
+    &:active {
+      transform: scale(0.98);
+    }
+  }
+  
+  &--elevated {
+    box-shadow: 
+      0 10px 40px rgba(0, 0, 0, 0.1),
+      0 2px 10px rgba(0, 0, 0, 0.05),
+      inset 0 1px 0 rgba(255, 255, 255, 0.5);
+    
+    &:hover {
+      box-shadow: 
+        0 20px 60px rgba(0, 0, 0, 0.15),
+        0 4px 15px rgba(0, 0, 0, 0.08),
+        inset 0 1px 0 rgba(255, 255, 255, 0.6);
+    }
+  }
+  
+  &:hover {
+    transform: translateY(-2px);
+  }
+  
+  // Header
+  &__header {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  }
+  
+  &__title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0;
+    color: #dc2626;
+  }
+  
+  &__subtitle {
+    font-size: 0.875rem;
+    margin: 0.25rem 0 0;
+    opacity: 0.8;
+  }
+  
+  // Body
+  &__body {
+    position: relative;
+    z-index: 1;
+  }
+  
+  // Footer
+  &__footer {
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+  }
+  
+  // Gradient overlay
+  &__gradient {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 50%;
+    height: 100%;
+    background: linear-gradient(90deg, 
+      transparent 0%, 
+      rgba(220, 38, 38, 0.05) 100%);
+    pointer-events: none;
+  }
+}
+
+// Dark mode support
+@media (prefers-color-scheme: dark) {
+  .glass-card--light {
+    background: rgba(30, 30, 30, 0.7);
+    border-color: rgba(255, 255, 255, 0.1);
+    color: #ffffff;
+  }
+}
+</style>

components/ui/Icon.vue

@@ -0,0 +1,197 @@
+<template>
+  <component 
+    :is="iconComponent" 
+    v-if="iconComponent"
+    :size="size"
+    :stroke-width="strokeWidth"
+    :color="color"
+    class="lucide-icon"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import * as icons from 'lucide-vue-next'
+
+interface Props {
+  name: string
+  size?: number | string
+  strokeWidth?: number
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  strokeWidth: 2,
+  color: 'currentColor'
+})
+
+// Convert kebab-case to PascalCase for icon component names
+const toPascalCase = (str: string) => {
+  return str
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('')
+}
+
+const iconComponent = computed(() => {
+  // Handle special cases and common mappings
+  const iconMap: Record<string, string> = {
+    'alert-circle': 'AlertCircle',
+    'chevron-down': 'ChevronDown',
+    'chevron-up': 'ChevronUp',
+    'x': 'X',
+    'check': 'Check',
+    'trending-up': 'TrendingUp',
+    'trending-down': 'TrendingDown',
+    'minus': 'Minus',
+    'search': 'Search',
+    'filter': 'Filter',
+    'calendar': 'Calendar',
+    'map-pin': 'MapPin',
+    'users': 'Users',
+    'clock': 'Clock',
+    'star': 'Star',
+    'grid': 'Grid',
+    'list': 'List',
+    'plus': 'Plus',
+    'user': 'User',
+    'mail': 'Mail',
+    'phone': 'Phone',
+    'globe': 'Globe',
+    'briefcase': 'Briefcase',
+    'building': 'Building',
+    'award': 'Award',
+    'shield': 'Shield',
+    'heart': 'Heart',
+    'edit': 'Edit',
+    'settings': 'Settings',
+    'log-out': 'LogOut',
+    'bell': 'Bell',
+    'home': 'Home',
+    'activity': 'Activity',
+    'message-square': 'MessageSquare',
+    'arrow-right': 'ArrowRight',
+    'external-link': 'ExternalLink',
+    'download': 'Download',
+    'upload': 'Upload',
+    'share': 'Share',
+    'copy': 'Copy',
+    'trash': 'Trash',
+    'eye': 'Eye',
+    'eye-off': 'EyeOff',
+    'lock': 'Lock',
+    'unlock': 'Unlock',
+    'camera': 'Camera',
+    'image': 'Image',
+    'video': 'Video',
+    'file-text': 'FileText',
+    'bar-chart': 'BarChart',
+    'pie-chart': 'PieChart',
+    'dollar-sign': 'DollarSign',
+    'credit-card': 'CreditCard',
+    'gift': 'Gift',
+    'bookmark': 'Bookmark',
+    'tag': 'Tag',
+    'folder': 'Folder',
+    'layers': 'Layers',
+    'zap': 'Zap',
+    'sun': 'Sun',
+    'moon': 'Moon',
+    'more-horizontal': 'MoreHorizontal',
+    'more-vertical': 'MoreVertical',
+    'menu': 'Menu',
+    'arrow-left': 'ArrowLeft',
+    'arrow-up': 'ArrowUp',
+    'arrow-down': 'ArrowDown',
+    'chevron-left': 'ChevronLeft',
+    'chevron-right': 'ChevronRight',
+    'check-circle': 'CheckCircle',
+    'x-circle': 'XCircle',
+    'alert-triangle': 'AlertTriangle',
+    'info': 'Info',
+    'help-circle': 'HelpCircle',
+    'loader': 'Loader',
+    'refresh-cw': 'RefreshCw',
+    'link': 'Link',
+    'paperclip': 'Paperclip',
+    'send': 'Send',
+    'inbox': 'Inbox',
+    'archive': 'Archive',
+    'flag': 'Flag',
+    'save': 'Save',
+    'wifi': 'Wifi',
+    'wifi-off': 'WifiOff',
+    'mic': 'Mic',
+    'mic-off': 'MicOff',
+    'volume': 'Volume',
+    'volume-x': 'VolumeX',
+    'play': 'Play',
+    'pause': 'Pause',
+    'skip-forward': 'SkipForward',
+    'skip-back': 'SkipBack',
+    'maximize': 'Maximize',
+    'minimize': 'Minimize',
+    'expand': 'Expand',
+    'compass': 'Compass',
+    'map': 'Map',
+    'navigation': 'Navigation',
+    'target': 'Target',
+    'crown': 'Crown',
+    'key': 'Key',
+    'code': 'Code',
+    'terminal': 'Terminal',
+    'database': 'Database',
+    'server': 'Server',
+    'cpu': 'Cpu',
+    'hard-drive': 'HardDrive',
+    'monitor': 'Monitor',
+    'smartphone': 'Smartphone',
+    'tablet': 'Tablet',
+    'watch': 'Watch',
+    'printer': 'Printer',
+    'headphones': 'Headphones',
+    'bluetooth': 'Bluetooth',
+    'battery': 'Battery',
+    'battery-charging': 'BatteryCharging',
+    'clipboard': 'Clipboard',
+    'hash': 'Hash',
+    'at-sign': 'AtSign',
+    'percent': 'Percent',
+    'thumbs-up': 'ThumbsUp',
+    'thumbs-down': 'ThumbsDown',
+    'smile': 'Smile',
+    'frown': 'Frown',
+    'coffee': 'Coffee',
+    'shopping-cart': 'ShoppingCart',
+    'shopping-bag': 'ShoppingBag',
+    'package': 'Package',
+    'truck': 'Truck',
+    'book': 'Book',
+    'book-open': 'BookOpen',
+    'feather': 'Feather',
+    'sliders': 'Sliders',
+    'toggle-left': 'ToggleLeft',
+    'toggle-right': 'ToggleRight',
+    'power': 'Power',
+    'log-in': 'LogIn',
+    'circle': 'Circle',
+    'square': 'Square',
+    'triangle': 'Triangle'
+  }
+  
+  // Get the icon name from the map or convert from kebab-case
+  const iconName = iconMap[props.name] || toPascalCase(props.name)
+  
+  // Return the icon component from lucide-vue-next
+  return (icons as any)[iconName] || (icons as any)[iconName + 'Icon'] || null
+})
+</script>
+
+<style scoped>
+.lucide-icon {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+</style>

components/ui/MemberCard.vue

@@ -0,0 +1,408 @@
+<template>
+  <div
+    v-motion
+    :initial="{ opacity: 0, scale: 0.95 }"
+    :enter="{ 
+      opacity: 1, 
+      scale: 1,
+      transition: {
+        delay: delay * 50,
+        type: 'spring',
+        stiffness: 200,
+        damping: 20
+      }
+    }"
+    :hovered="{ scale: 1.02 }"
+    class="member-card"
+    :class="[
+      `member-card--${variant}`,
+      { 'member-card--featured': featured }
+    ]"
+    @click="$emit('click', member)"
+  >
+    <div class="member-card__header">
+      <div class="member-card__avatar">
+        <img 
+          v-if="member.avatar" 
+          :src="member.avatar" 
+          :alt="member.name"
+          @error="handleImageError"
+        />
+        <div v-else class="member-card__avatar-placeholder">
+          {{ initials }}
+        </div>
+        <div 
+          v-if="member.status === 'online'" 
+          class="member-card__status-indicator"
+        />
+      </div>
+      
+      <div v-if="member.role" class="member-card__role">
+        {{ member.role }}
+      </div>
+    </div>
+    
+    <div class="member-card__body">
+      <h3 class="member-card__name">{{ member.name }}</h3>
+      <p v-if="member.title" class="member-card__title">{{ member.title }}</p>
+      <p v-if="member.company" class="member-card__company">{{ member.company }}</p>
+      
+      <div v-if="member.tags && member.tags.length" class="member-card__tags">
+        <span 
+          v-for="tag in member.tags.slice(0, 3)" 
+          :key="tag"
+          class="member-card__tag"
+        >
+          {{ tag }}
+        </span>
+        <span 
+          v-if="member.tags.length > 3" 
+          class="member-card__tag member-card__tag--more"
+        >
+          +{{ member.tags.length - 3 }}
+        </span>
+      </div>
+    </div>
+    
+    <div class="member-card__footer">
+      <div class="member-card__stats">
+        <div v-if="member.joinDate" class="member-card__stat">
+          <span class="member-card__stat-label">Member Since</span>
+          <span class="member-card__stat-value">{{ member.joinDate }}</span>
+        </div>
+        <div v-if="member.connections !== undefined" class="member-card__stat">
+          <span class="member-card__stat-label">Connections</span>
+          <span class="member-card__stat-value">{{ member.connections }}</span>
+        </div>
+      </div>
+      
+      <div class="member-card__actions">
+        <button 
+          class="member-card__action"
+          @click.stop="$emit('connect', member)"
+        >
+          <span>{{ member.connected ? '✓' : '+' }}</span>
+          {{ member.connected ? 'Connected' : 'Connect' }}
+        </button>
+        <button 
+          class="member-card__action member-card__action--secondary"
+          @click.stop="$emit('message', member)"
+        >
+          <span>✉</span>
+          Message
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+interface Member {
+  id: string | number
+  name: string
+  avatar?: string
+  title?: string
+  company?: string
+  role?: string
+  status?: 'online' | 'offline' | 'away'
+  tags?: string[]
+  joinDate?: string
+  connections?: number
+  connected?: boolean
+}
+
+interface Props {
+  member: Member
+  variant?: 'glass' | 'solid' | 'outline'
+  featured?: boolean
+  delay?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'glass',
+  featured: false,
+  delay: 0
+})
+
+defineEmits<{
+  click: [member: Member]
+  connect: [member: Member]
+  message: [member: Member]
+}>()
+
+const initials = computed(() => {
+  const names = props.member.name.split(' ')
+  return names.map(n => n[0]).join('').toUpperCase().slice(0, 2)
+})
+
+const handleImageError = (e: Event) => {
+  const target = e.target as HTMLImageElement
+  target.style.display = 'none'
+}
+</script>
+
+<style scoped lang="scss">
+.member-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem;
+  border-radius: 16px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  // Glass variant
+  &--glass {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.8);
+      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
+      transform: translateY(-4px);
+    }
+  }
+  
+  // Solid variant
+  &--solid {
+    background: white;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+    
+    &:hover {
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+      transform: translateY(-4px);
+    }
+  }
+  
+  // Outline variant
+  &--outline {
+    background: transparent;
+    border: 2px solid rgba(220, 38, 38, 0.2);
+    
+    &:hover {
+      background: rgba(220, 38, 38, 0.05);
+      border-color: rgba(220, 38, 38, 0.3);
+      transform: translateY(-4px);
+    }
+  }
+  
+  // Featured state
+  &--featured {
+    border: 2px solid #dc2626;
+    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.15);
+    
+    &::before {
+      content: '⭐';
+      position: absolute;
+      top: -0.5rem;
+      right: 1rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 2rem;
+      height: 2rem;
+      background: #dc2626;
+      border-radius: 50%;
+      font-size: 1rem;
+    }
+  }
+  
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+  }
+  
+  &__avatar {
+    position: relative;
+    width: 4rem;
+    height: 4rem;
+    border-radius: 12px;
+    overflow: hidden;
+    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
+    
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  
+  &__avatar-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #dc2626;
+    background: linear-gradient(135deg, 
+      rgba(220, 38, 38, 0.1) 0%, 
+      rgba(220, 38, 38, 0.05) 100%);
+  }
+  
+  &__status-indicator {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 1rem;
+    height: 1rem;
+    background: #10b981;
+    border: 2px solid white;
+    border-radius: 50%;
+  }
+  
+  &__role {
+    padding: 0.25rem 0.75rem;
+    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+    color: white;
+    border-radius: 20px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+  
+  &__body {
+    flex: 1;
+    margin-bottom: 1rem;
+  }
+  
+  &__name {
+    margin: 0 0 0.25rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: #27272a;
+  }
+  
+  &__title {
+    margin: 0 0 0.125rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #dc2626;
+  }
+  
+  &__company {
+    margin: 0 0 0.75rem;
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+  
+  &__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+  }
+  
+  &__tag {
+    padding: 0.25rem 0.5rem;
+    background: rgba(220, 38, 38, 0.1);
+    color: #dc2626;
+    border-radius: 6px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    
+    &--more {
+      background: rgba(107, 114, 128, 0.1);
+      color: #6b7280;
+    }
+  }
+  
+  &__footer {
+    padding-top: 1rem;
+    border-top: 1px solid rgba(220, 38, 38, 0.1);
+  }
+  
+  &__stats {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+    margin-bottom: 1rem;
+  }
+  
+  &__stat {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  
+  &__stat-label {
+    font-size: 0.75rem;
+    color: #6b7280;
+  }
+  
+  &__stat-value {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #27272a;
+  }
+  
+  &__actions {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.5rem;
+  }
+  
+  &__action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    padding: 0.5rem;
+    background: #dc2626;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    
+    span {
+      font-size: 0.875rem;
+    }
+    
+    &:hover {
+      background: #b91c1c;
+      transform: translateY(-1px);
+    }
+    
+    &--secondary {
+      background: rgba(220, 38, 38, 0.1);
+      color: #dc2626;
+      
+      &:hover {
+        background: rgba(220, 38, 38, 0.2);
+      }
+    }
+  }
+}
+
+// Dark mode support
+@media (prefers-color-scheme: dark) {
+  .member-card {
+    &--glass {
+      background: rgba(30, 30, 30, 0.7);
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+    
+    &--solid {
+      background: #27272a;
+    }
+    
+    &__name {
+      color: white;
+    }
+    
+    &__stat-value {
+      color: #e5e5e5;
+    }
+  }
+}
+</style>

components/ui/MonacoButton.vue

@@ -0,0 +1,329 @@
+<template>
+  <button
+    v-motion
+    :initial="animated ? { scale: 0.95, opacity: 0 } : {}"
+    :enter="animated ? { scale: 1, opacity: 1 } : {}"
+    :hovered="hoverable ? { scale: 1.05 } : {}"
+    :tapped="{ scale: 0.95 }"
+    :delay="delay"
+    class="monaco-button"
+    :class="[
+      `monaco-button--${variant}`,
+      `monaco-button--${size}`,
+      {
+        'monaco-button--block': block,
+        'monaco-button--loading': loading,
+        'monaco-button--icon-only': !$slots.default && icon
+      }
+    ]"
+    :disabled="disabled || loading"
+    @click="$emit('click', $event)"
+  >
+    <span v-if="loading" class="monaco-button__spinner">
+      <svg class="monaco-button__spinner-svg" viewBox="0 0 24 24">
+        <circle
+          class="monaco-button__spinner-circle"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke-width="3"
+          fill="none"
+        />
+      </svg>
+    </span>
+    
+    <Icon 
+      v-if="icon && !loading" 
+      :name="icon" 
+      class="monaco-button__icon"
+      :class="{ 'monaco-button__icon--left': $slots.default }"
+    />
+    
+    <span v-if="$slots.default" class="monaco-button__content">
+      <slot />
+    </span>
+    
+    <Icon 
+      v-if="rightIcon && !loading" 
+      :name="rightIcon" 
+      class="monaco-button__icon monaco-button__icon--right"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+import Icon from '~/components/ui/Icon.vue'
+
+interface Props {
+  variant?: 'primary' | 'secondary' | 'glass' | 'gradient' | 'outline' | 'ghost'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  icon?: string
+  rightIcon?: string
+  block?: boolean
+  disabled?: boolean
+  loading?: boolean
+  hoverable?: boolean
+  animated?: boolean
+  delay?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  size: 'md',
+  block: false,
+  disabled: false,
+  loading: false,
+  hoverable: true,
+  animated: true,
+  delay: 0
+})
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+</script>
+
+<style scoped lang="scss">
+.monaco-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-weight: 600;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  outline: none;
+  border: none;
+  overflow: hidden;
+  
+  // Create shimmer effect for gradient variant
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.2),
+      transparent
+    );
+    transition: left 0.5s;
+  }
+  
+  &:hover::before {
+    left: 100%;
+  }
+  
+  // Variants
+  &--primary {
+    background: #dc2626;
+    color: white;
+    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
+    
+    &:hover:not(:disabled) {
+      background: #b91c1c;
+      box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
+      transform: translateY(-2px);
+    }
+    
+    &:active:not(:disabled) {
+      transform: translateY(0);
+    }
+  }
+  
+  &--secondary {
+    background: white;
+    color: #dc2626;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
+    
+    &:hover:not(:disabled) {
+      background: #fef2f2;
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+      transform: translateY(-2px);
+    }
+  }
+  
+  &--glass {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    color: #dc2626;
+    box-shadow: 
+      0 8px 32px rgba(0, 0, 0, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 0.5);
+    
+    &:hover:not(:disabled) {
+      background: rgba(255, 255, 255, 0.8);
+      border-color: rgba(220, 38, 38, 0.2);
+      box-shadow: 
+        0 12px 40px rgba(0, 0, 0, 0.15),
+        inset 0 1px 0 rgba(255, 255, 255, 0.6);
+      transform: translateY(-2px);
+    }
+  }
+  
+  &--gradient {
+    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+    color: white;
+    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
+    
+    &:hover:not(:disabled) {
+      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+      box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
+      transform: translateY(-2px);
+    }
+  }
+  
+  &--outline {
+    background: transparent;
+    color: #dc2626;
+    border: 2px solid #dc2626;
+    
+    &:hover:not(:disabled) {
+      background: rgba(220, 38, 38, 0.1);
+      border-color: #b91c1c;
+      transform: translateY(-2px);
+    }
+  }
+  
+  &--ghost {
+    background: transparent;
+    color: #dc2626;
+    
+    &:hover:not(:disabled) {
+      background: rgba(220, 38, 38, 0.1);
+      transform: translateY(-2px);
+    }
+  }
+  
+  // Sizes
+  &--xs {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    border-radius: 8px;
+  }
+  
+  &--sm {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+    border-radius: 10px;
+  }
+  
+  &--md {
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+  }
+  
+  &--lg {
+    padding: 0.75rem 1.5rem;
+    font-size: 1.125rem;
+    border-radius: 14px;
+  }
+  
+  &--xl {
+    padding: 1rem 2rem;
+    font-size: 1.25rem;
+    border-radius: 16px;
+  }
+  
+  // States
+  &--block {
+    width: 100%;
+  }
+  
+  &--icon-only {
+    aspect-ratio: 1;
+    padding: 0;
+    
+    &.monaco-button--xs { width: 1.75rem; }
+    &.monaco-button--sm { width: 2rem; }
+    &.monaco-button--md { width: 2.5rem; }
+    &.monaco-button--lg { width: 3rem; }
+    &.monaco-button--xl { width: 3.5rem; }
+  }
+  
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  &--loading {
+    color: transparent;
+    pointer-events: none;
+  }
+  
+  // Icons
+  &__icon {
+    width: 1.25em;
+    height: 1.25em;
+    flex-shrink: 0;
+    
+    &--left {
+      margin-right: 0.25rem;
+    }
+    
+    &--right {
+      margin-left: 0.25rem;
+    }
+  }
+  
+  // Spinner
+  &__spinner {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  &__spinner-svg {
+    width: 1.5em;
+    height: 1.5em;
+    animation: spin 1s linear infinite;
+  }
+  
+  &__spinner-circle {
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-dasharray: 64;
+    stroke-dashoffset: 64;
+    animation: dash 1.5s ease-in-out infinite;
+  }
+}
+
+// Animations
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes dash {
+  0% { stroke-dashoffset: 64; }
+  50% { stroke-dashoffset: 16; }
+  100% { stroke-dashoffset: 64; }
+}
+
+// Dark mode support
+@media (prefers-color-scheme: dark) {
+  .monaco-button {
+    &--secondary {
+      background: #27272a;
+      color: #dc2626;
+      
+      &:hover:not(:disabled) {
+        background: #3f3f46;
+      }
+    }
+    
+    &--glass {
+      background: rgba(30, 30, 30, 0.7);
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+}
+</style>

components/ui/StatsCard.vue

@@ -0,0 +1,369 @@
+<template>
+  <div
+    v-motion
+    :initial="{ opacity: 0, y: 20 }"
+    :enter="{ 
+      opacity: 1, 
+      y: 0,
+      transition: {
+        delay: delay * 100,
+        type: 'spring',
+        stiffness: 200,
+        damping: 20
+      }
+    }"
+    class="stats-card"
+    :class="[
+      `stats-card--${variant}`,
+      { 'stats-card--clickable': clickable }
+    ]"
+    @click="$emit('click')"
+  >
+    <div class="stats-card__header">
+      <div class="stats-card__icon-wrapper">
+        <Icon 
+          :name="icon" 
+          class="stats-card__icon"
+        />
+      </div>
+      <div v-if="trend" class="stats-card__trend" :class="`stats-card__trend--${trend.type}`">
+        <Icon 
+          :name="trend.type === 'up' ? 'trending-up' : trend.type === 'down' ? 'trending-down' : 'minus'"
+          class="stats-card__trend-icon"
+        />
+        <span>{{ trend.value }}%</span>
+      </div>
+    </div>
+    
+    <div class="stats-card__content">
+      <h3 class="stats-card__label">{{ label }}</h3>
+      <div class="stats-card__value-wrapper">
+        <span v-if="prefix" class="stats-card__prefix">{{ prefix }}</span>
+        <AnimatedNumber 
+          :value="value"
+          :duration="1500"
+          :format="format"
+          class="stats-card__value"
+        />
+        <span v-if="suffix" class="stats-card__suffix">{{ suffix }}</span>
+      </div>
+      <p v-if="description" class="stats-card__description">{{ description }}</p>
+    </div>
+    
+    <div v-if="progress !== undefined" class="stats-card__progress">
+      <div class="stats-card__progress-bar">
+        <div 
+          class="stats-card__progress-fill"
+          :style="{ width: `${Math.min(100, Math.max(0, progress))}%` }"
+        />
+      </div>
+      <span class="stats-card__progress-label">{{ progress }}% Complete</span>
+    </div>
+    
+    <div v-if="sparkline" class="stats-card__sparkline">
+      <svg
+        viewBox="0 0 100 40"
+        preserveAspectRatio="none"
+        class="stats-card__sparkline-svg"
+      >
+        <polyline
+          :points="sparklinePoints"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <polyline
+          :points="`${sparklinePoints} 100,40 0,40`"
+          fill="currentColor"
+          fill-opacity="0.1"
+        />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import Icon from '~/components/ui/Icon.vue'
+import AnimatedNumber from '~/components/ui/AnimatedNumber.vue'
+
+interface Trend {
+  type: 'up' | 'down' | 'neutral'
+  value: number
+}
+
+interface Props {
+  label: string
+  value: number
+  icon: string
+  variant?: 'glass' | 'solid' | 'gradient' | 'outline'
+  prefix?: string
+  suffix?: string
+  description?: string
+  trend?: Trend
+  progress?: number
+  sparkline?: number[]
+  clickable?: boolean
+  format?: (value: number) => string
+  delay?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'glass',
+  clickable: false,
+  delay: 0,
+  format: (value: number) => value.toLocaleString()
+})
+
+defineEmits<{
+  click: []
+}>()
+
+const sparklinePoints = computed(() => {
+  if (!props.sparkline || props.sparkline.length === 0) return ''
+  
+  const data = props.sparkline
+  const max = Math.max(...data)
+  const min = Math.min(...data)
+  const range = max - min || 1
+  
+  return data
+    .map((value, index) => {
+      const x = (index / (data.length - 1)) * 100
+      const y = 40 - ((value - min) / range) * 35
+      return `${x},${y}`
+    })
+    .join(' ')
+})
+</script>
+
+<style scoped lang="scss">
+.stats-card {
+  position: relative;
+  padding: 1.5rem;
+  border-radius: 16px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  
+  // Glass variant
+  &--glass {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 
+      0 8px 32px rgba(0, 0, 0, 0.08),
+      inset 0 1px 0 rgba(255, 255, 255, 0.5);
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.8);
+      box-shadow: 
+        0 12px 40px rgba(0, 0, 0, 0.12),
+        inset 0 1px 0 rgba(255, 255, 255, 0.6);
+      transform: translateY(-2px);
+    }
+  }
+  
+  // Solid variant
+  &--solid {
+    background: white;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+    
+    &:hover {
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+      transform: translateY(-2px);
+    }
+  }
+  
+  // Gradient variant
+  &--gradient {
+    background: linear-gradient(135deg, 
+      rgba(220, 38, 38, 0.05) 0%, 
+      rgba(220, 38, 38, 0.02) 100%);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(220, 38, 38, 0.1);
+    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.08);
+    
+    &:hover {
+      background: linear-gradient(135deg, 
+        rgba(220, 38, 38, 0.08) 0%, 
+        rgba(220, 38, 38, 0.03) 100%);
+      transform: translateY(-2px);
+    }
+  }
+  
+  // Outline variant
+  &--outline {
+    background: transparent;
+    border: 2px solid rgba(220, 38, 38, 0.2);
+    
+    &:hover {
+      background: rgba(220, 38, 38, 0.05);
+      border-color: rgba(220, 38, 38, 0.3);
+      transform: translateY(-2px);
+    }
+  }
+  
+  &--clickable {
+    cursor: pointer;
+  }
+  
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+  }
+  
+  &__icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+    background: linear-gradient(135deg, 
+      rgba(220, 38, 38, 0.1) 0%, 
+      rgba(220, 38, 38, 0.05) 100%);
+    border-radius: 12px;
+  }
+  
+  &__icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    color: #dc2626;
+  }
+  
+  &__trend {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: 8px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    
+    &--up {
+      color: #10b981;
+      background: rgba(16, 185, 129, 0.1);
+    }
+    
+    &--down {
+      color: #ef4444;
+      background: rgba(239, 68, 68, 0.1);
+    }
+    
+    &--neutral {
+      color: #6b7280;
+      background: rgba(107, 114, 128, 0.1);
+    }
+  }
+  
+  &__trend-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  
+  &__content {
+    margin-bottom: 1rem;
+  }
+  
+  &__label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #6b7280;
+    margin: 0 0 0.5rem;
+  }
+  
+  &__value-wrapper {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25rem;
+    margin-bottom: 0.5rem;
+  }
+  
+  &__value {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #27272a;
+    line-height: 1;
+  }
+  
+  &__prefix,
+  &__suffix {
+    font-size: 1.25rem;
+    font-weight: 500;
+    color: #6b7280;
+  }
+  
+  &__description {
+    font-size: 0.875rem;
+    color: #6b7280;
+    margin: 0;
+  }
+  
+  &__progress {
+    margin-top: 1rem;
+  }
+  
+  &__progress-bar {
+    height: 6px;
+    background: rgba(220, 38, 38, 0.1);
+    border-radius: 3px;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+  }
+  
+  &__progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #dc2626 0%, #b91c1c 100%);
+    border-radius: 3px;
+    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  &__progress-label {
+    font-size: 0.75rem;
+    color: #6b7280;
+  }
+  
+  &__sparkline {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 40px;
+    opacity: 0.5;
+  }
+  
+  &__sparkline-svg {
+    width: 100%;
+    height: 100%;
+    color: #dc2626;
+  }
+}
+
+// Dark mode support
+@media (prefers-color-scheme: dark) {
+  .stats-card {
+    &--glass {
+      background: rgba(30, 30, 30, 0.7);
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+    
+    &--solid {
+      background: #27272a;
+    }
+    
+    &__value {
+      color: white;
+    }
+    
+    &__label,
+    &__description,
+    &__progress-label {
+      color: #a3a3a3;
+    }
+  }
+}
+</style>

composables/useAuth.ts

@@ -42,6 +42,9 @@ export const useAuth = () => {
     return user.value?.tier === 'user';
   });
   
+  // Alias for consistency with new naming convention
+  const isMember = isUser;
+
   const isBoard = computed(() => {
     // Check new realm roles first
     if (hasRole('monaco-board')) return true;
@@ -300,6 +303,7 @@ export const useAuth = () => {
     // Tier-based properties
     userTier,
     isUser,
+    isMember,  // Alias for isUser, better naming convention
     isBoard,
     isAdmin,
     firstName,

composables/useEvents.ts

@@ -106,14 +106,16 @@ export const useEvents = () => {
   };
 
   /**
-   * RSVP to an event
+   * RSVP to an event with support for guests and real-time updates
    */
-  const rsvpToEvent = async (eventId: string, rsvpData: Omit<EventRSVPRequest, 'event_id'>) => {
+  const rsvpToEvent = async (eventId: string, rsvpData: Omit<EventRSVPRequest, 'event_id'> & { extra_guests?: string }) => {
     loading.value = true;
     error.value = null;
 
     try {
-      const response = await $fetch(`/api/events/${eventId}/rsvp`, {
+      console.log('[useEvents] RSVP to event:', eventId, 'with data:', rsvpData);
+      
+      const response = await $fetch<{ success: boolean; data: any; message: string }>(`/api/events/${eventId}/rsvp`, {
         method: 'POST',
         body: {
           ...rsvpData,
@@ -123,21 +125,46 @@ export const useEvents = () => {
       });
 
       if (response.success) {
-        // Update local event data
-        const eventIndex = events.value.findIndex(e => e.id === eventId);
-        if (eventIndex !== -1) {
-          events.value[eventIndex].user_rsvp = response.data;
-          
-          // Update attendee count if confirmed
-          if (rsvpData.rsvp_status === 'confirmed') {
-            const currentCount = events.value[eventIndex].current_attendees || 0;
-            events.value[eventIndex].current_attendees = currentCount + 1;
-          }
+        // Find event by event_id first, then fallback to database ID
+        let eventIndex = events.value.findIndex(e => e.event_id === eventId);
+        if (eventIndex === -1) {
+          eventIndex = events.value.findIndex(e => (e as any).Id === eventId || e.id === eventId);
         }
         
-        // Clear cache
+        console.log('[useEvents] Event found at index:', eventIndex, 'using event_id:', eventId);
+        
+        if (eventIndex !== -1) {
+          const event = events.value[eventIndex];
+          
+          // Update RSVP status
+          event.user_rsvp = response.data;
+          
+          // Calculate attendee count including guests
+          if (rsvpData.rsvp_status === 'confirmed') {
+            const currentCount = parseInt(event.current_attendees || '0');
+            const guestCount = parseInt(rsvpData.extra_guests || '0');
+            const totalAdded = 1 + guestCount; // Member + guests
+            
+            event.current_attendees = (currentCount + totalAdded).toString();
+            
+            console.log('[useEvents] Updated attendee count:', {
+              previous: currentCount,
+              added: totalAdded,
+              new: event.current_attendees,
+              guests: guestCount
+            });
+          }
+          
+          // Trigger reactivity
+          events.value[eventIndex] = { ...event };
+        }
+
+        // Clear cache for fresh data on next load
         cache.clear();
         
+        // Force refresh events data to ensure accuracy
+        await fetchEvents({ force: true });
+        
         return response.data;
       } else {
         throw new Error(response.message || 'Failed to RSVP');
@@ -151,6 +178,61 @@ export const useEvents = () => {
     }
   };
 
+  /**
+   * Cancel RSVP to an event
+   */
+  const cancelRSVP = async (eventId: string) => {
+    loading.value = true;
+    error.value = null;
+
+    try {
+      // Find the event to get current RSVP info
+      let event = events.value.find(e => e.event_id === eventId);
+      if (!event) {
+        event = events.value.find(e => (e as any).Id === eventId || e.id === eventId);
+      }
+      
+      if (!event?.user_rsvp) {
+        throw new Error('No RSVP found to cancel');
+      }
+
+      const response = await $fetch<{ success: boolean; data: any; message: string }>(`/api/events/${eventId}/rsvp`, {
+        method: 'DELETE'
+      });
+
+      if (response.success) {
+        const eventIndex = events.value.findIndex(e => e === event);
+        
+        if (eventIndex !== -1) {
+          const currentCount = parseInt(events.value[eventIndex].current_attendees || '0');
+          const guestCount = parseInt(events.value[eventIndex].user_rsvp?.extra_guests || '0');
+          const totalRemoved = 1 + guestCount; // Member + guests
+          
+          // Update attendee count and remove RSVP
+          events.value[eventIndex].current_attendees = Math.max(0, currentCount - totalRemoved).toString();
+          events.value[eventIndex].user_rsvp = undefined;
+          
+          // Trigger reactivity
+          events.value[eventIndex] = { ...events.value[eventIndex] };
+        }
+
+        // Clear cache and refresh
+        cache.clear();
+        await fetchEvents({ force: true });
+        
+        return response.data;
+      } else {
+        throw new Error(response.message || 'Failed to cancel RSVP');
+      }
+    } catch (err: any) {
+      error.value = err.message || 'Failed to cancel RSVP';
+      console.error('Error canceling RSVP:', err);
+      throw err;
+    } finally {
+      loading.value = false;
+    }
+  };
+
   /**
    * Update attendance for an event (board/admin only)
    */
@@ -159,7 +241,7 @@ export const useEvents = () => {
     error.value = null;
 
     try {
-      const response = await $fetch(`/api/events/${eventId}/attendees`, {
+      const response = await $fetch<{ success: boolean; data?: any; message: string }>(`/api/events/${eventId}/attendees`, {
         method: 'PATCH',
         body: {
           event_id: eventId,
@@ -180,7 +262,8 @@ export const useEvents = () => {
           }
         }
 
-        return response.data;
+        // Return data if available, otherwise return success status
+        return response.data || { success: true, message: response.message };
       } else {
         throw new Error(response.message || 'Failed to update attendance');
       }
@@ -269,6 +352,47 @@ export const useEvents = () => {
     cache.clear();
   };
 
+  /**
+   * Delete an event (board/admin only)
+   */
+  const deleteEvent = async (eventId: string) => {
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const response = await $fetch<{ success: boolean; message: string; deleted: any }>(`/api/events/${eventId}`, {
+        method: 'DELETE'
+      });
+
+      if (response.success) {
+        // Remove event from local state
+        const eventIndex = events.value.findIndex(e => 
+          e.event_id === eventId || 
+          e.id === eventId || 
+          (e as any).Id === eventId
+        );
+        
+        if (eventIndex !== -1) {
+          events.value.splice(eventIndex, 1);
+        }
+
+        // Clear cache and refresh
+        clearCache();
+        await fetchEvents({ force: true });
+        
+        return response;
+      } else {
+        throw new Error(response.message || 'Failed to delete event');
+      }
+    } catch (err: any) {
+      error.value = err.message || 'Failed to delete event';
+      console.error('Error deleting event:', err);
+      throw err;
+    } finally {
+      loading.value = false;
+    }
+  };
+
   /**
    * Refresh events data
    */
@@ -294,15 +418,17 @@ export const useEvents = () => {
 
   return {
     // Reactive state
-    events: readonly(events),
-    loading: readonly(loading),
-    error: readonly(error),
-    upcomingEvent: readonly(upcomingEvent),
+    events,
+    loading,
+    error,
+    upcomingEvent,
 
     // Methods
     fetchEvents,
     createEvent,
+    deleteEvent,
     rsvpToEvent,
+    cancelRSVP,
     updateAttendance,
     getCalendarEvents,
     getUpcomingEvents,

layouts/admin.vue

@@ -0,0 +1,667 @@
+<template>
+  <v-app>
+    <v-navigation-drawer 
+      v-model="drawer" 
+      :rail="miniVariant"
+      :expand-on-hover="false"
+      permanent
+      width="280"
+      rail-width="100"
+      class="enhanced-glass-drawer"
+    >
+      <!-- Enhanced Logo Section -->
+      <v-list-item class="pa-4 text-center enhanced-glass-logo">
+        <template v-if="!miniVariant">
+          <v-img 
+            src="/MONACOUSA-Flags_376x376.png" 
+            width="80" 
+            height="80"
+            class="mx-auto mb-2 shimmer-animation" 
+          />
+          <div class="text-h6 font-weight-bold text-gradient">
+            MonacoUSA Portal
+          </div>
+          <v-chip 
+            size="x-small" 
+            class="glass-badge mt-1"
+          >
+            ADMINISTRATOR
+          </v-chip>
+        </template>
+        <template v-else>
+          <v-img 
+            src="/MONACOUSA-Flags_376x376.png" 
+            width="40" 
+            height="40"
+            class="mx-auto shimmer-animation" 
+          />
+        </template>
+      </v-list-item>
+      
+      <v-divider class="glass-divider mx-3" />
+      
+      <!-- Enhanced Navigation Menu -->
+      <v-list nav density="comfortable" class="enhanced-glass-nav">
+        <!-- Admin Overview -->
+        <v-tooltip 
+          :text="miniVariant ? 'Admin Dashboard' : ''"
+          location="end"
+          :disabled="!miniVariant"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/admin/dashboard" 
+              prepend-icon="mdi-view-dashboard"
+              :title="!miniVariant ? 'Admin Dashboard' : undefined"
+              value="dashboard"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
+
+        <!-- User Management -->
+        <v-list-group value="users" v-if="!miniVariant">
+          <template v-slot:activator="{ props }">
+            <v-list-item
+              v-bind="props"
+              prepend-icon="mdi-account-cog"
+              title="User Management"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+          
+          <v-list-item 
+            to="/admin/users" 
+            title="All Users"
+            value="users-list"
+            class="glass-nav-item-sub"
+          />
+          <v-list-item 
+            @click="openKeycloak" 
+            title="Keycloak Admin"
+            value="keycloak"
+            class="glass-nav-item-sub"
+          >
+            <template v-slot:append>
+              <v-icon size="small" class="monaco-red-text">mdi-open-in-new</v-icon>
+            </template>
+          </v-list-item>
+        </v-list-group>
+
+        <!-- Member Management -->
+        <v-list-group value="members" v-if="!miniVariant">
+          <template v-slot:activator="{ props }">
+            <v-list-item
+              v-bind="props"
+              prepend-icon="mdi-account-group"
+              title="Member Management"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+          
+          <v-list-item 
+            to="/admin/members" 
+            title="All Members"
+            value="members-list"
+            class="glass-nav-item-sub"
+          />
+        </v-list-group>
+
+        <!-- Financial Management -->
+        <v-list-group value="financial" v-if="!miniVariant">
+          <template v-slot:activator="{ props }">
+            <v-list-item
+              v-bind="props"
+              prepend-icon="mdi-currency-usd"
+              title="Financial"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+          
+          <v-list-item 
+            to="/admin/payments" 
+            title="Payment Management"
+            value="payments"
+            class="glass-nav-item-sub"
+          />
+        </v-list-group>
+
+        <!-- System Configuration -->
+        <v-list-group value="system" v-if="!miniVariant">
+          <template v-slot:activator="{ props }">
+            <v-list-item
+              v-bind="props"
+              prepend-icon="mdi-cog"
+              title="System"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+          
+          <v-list-item 
+            to="/admin/settings" 
+            title="General Settings"
+            value="settings"
+            class="glass-nav-item-sub"
+          />
+        </v-list-group>
+
+        <!-- Events Management -->
+        <v-tooltip 
+          :text="miniVariant ? 'Events Management' : ''"
+          location="end"
+          :disabled="!miniVariant"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/admin/events" 
+              prepend-icon="mdi-calendar"
+              :title="!miniVariant ? 'Events Management' : undefined"
+              value="events"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
+
+
+        <v-divider class="my-2 glass-divider" />
+        
+        <!-- Portal Access -->
+        <v-list-subheader v-if="!miniVariant" class="monaco-subheader">Portal Access</v-list-subheader>
+        <v-tooltip 
+          :text="miniVariant ? 'Board Portal' : ''"
+          location="end"
+          :disabled="!miniVariant"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/board/dashboard" 
+              prepend-icon="mdi-shield-account"
+              :title="!miniVariant ? 'Board Portal' : undefined"
+              value="board-view"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
+        <v-tooltip 
+          :text="miniVariant ? 'Member Portal' : ''"
+          location="end"
+          :disabled="!miniVariant"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/member/dashboard" 
+              prepend-icon="mdi-account"
+              :title="!miniVariant ? 'Member Portal' : undefined"
+              value="member-view"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
+      </v-list>
+      
+      <!-- Enhanced Profile Card -->
+      <template v-slot:append>
+        <div class="pa-2">
+          <v-card class="glass-profile-card overflow-visible">
+            <div class="d-flex align-center" :class="miniVariant ? 'flex-column py-3 px-2' : 'pa-3'">
+              <!-- Avatar Section -->
+              <ProfileAvatar
+                :member-id="memberData?.member_id || memberData?.Id"
+                :first-name="memberData?.first_name || user?.firstName"
+                :last-name="memberData?.last_name || user?.lastName"
+                :member-name="memberData?.FullName || user?.name"
+                :size="miniVariant ? '32' : 'small'"
+                :class="miniVariant ? '' : 'mr-3'"
+              />
+              
+              <!-- Info Section (Hidden in mini mode) -->
+              <div v-if="!miniVariant" class="flex-grow-1">
+                <div class="text-subtitle-2 font-weight-bold">{{ user?.name || 'Administrator' }}</div>
+                <div class="text-caption text-medium-emphasis">{{ user?.email?.split('@')[0] || 'admin' }}</div>
+                <v-chip size="x-small" class="mt-1 glass-badge">Admin</v-chip>
+              </div>
+              
+              <!-- Action Buttons -->
+              <div :class="miniVariant ? 'mt-2' : 'ml-auto'">
+                <v-menu location="top" offset-y>
+                  <template v-slot:activator="{ props }">
+                    <v-btn 
+                      v-bind="props"
+                      icon
+                      :size="miniVariant ? 'small' : 'small'"
+                      variant="text"
+                      class="profile-menu-btn"
+                    >
+                      <v-icon>mdi-dots-vertical</v-icon>
+                    </v-btn>
+                  </template>
+                  <v-list density="compact" class="glass-menu" min-width="200">
+                    <v-list-item @click="() => {}" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="primary">mdi-account-circle</v-icon>
+                      </template>
+                      <v-list-item-title>My Profile</v-list-item-title>
+                    </v-list-item>
+                    <v-list-item @click="() => {}" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="info">mdi-cog-outline</v-icon>
+                      </template>
+                      <v-list-item-title>Settings</v-list-item-title>
+                    </v-list-item>
+                    <v-divider class="my-1 glass-divider" />
+                    <v-list-item @click="logout" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="error">mdi-logout-variant</v-icon>
+                      </template>
+                      <v-list-item-title class="text-error">Sign Out</v-list-item-title>
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
+              </div>
+            </div>
+          </v-card>
+        </div>
+      </template>
+    </v-navigation-drawer>
+    
+    <v-app-bar elevation="0" flat class="glass-app-bar admin-bar">
+      <v-btn
+        icon
+        @click="toggleDrawer"
+        class="glass-icon-btn mr-2"
+      >
+        <v-icon>{{ miniVariant ? 'mdi-menu' : 'mdi-menu-open' }}</v-icon>
+      </v-btn>
+      
+      <v-toolbar-title class="font-weight-bold d-flex align-center text-white">
+        Admin Portal
+        <v-chip 
+          size="x-small" 
+          class="ml-2 glass-chip"
+        >
+          FULL ACCESS
+        </v-chip>
+      </v-toolbar-title>
+      
+      <v-spacer />
+
+      <!-- System Status Indicator with Glass Effect -->
+      <v-chip
+        :color="systemStatus === 'healthy' ? 'success' : 'warning'"
+        variant="flat"
+        size="small"
+        class="mr-2 glass-chip"
+      >
+        <v-icon start size="small">
+          {{ systemStatus === 'healthy' ? 'mdi-check-circle' : 'mdi-alert' }}
+        </v-icon>
+        System {{ systemStatus }}
+      </v-chip>
+
+      
+      <!-- User Menu -->
+      <v-menu offset-y>
+        <template v-slot:activator="{ props }">
+          <v-btn icon v-bind="props" class="glass-icon-btn">
+            <ProfileAvatar 
+              :member-id="memberData?.member_id"
+              :member-name="user?.name"
+              :first-name="user?.firstName || memberData?.first_name"
+              :last-name="user?.lastName || memberData?.last_name"
+              size="small"
+              :lazy="false"
+              show-border
+            />
+          </v-btn>
+        </template>
+        
+        <v-list min-width="250" class="glass-dropdown">
+          <v-list-item>
+            <v-list-item-title class="font-weight-bold">
+              {{ user?.name || 'Administrator' }}
+            </v-list-item-title>
+            <v-list-item-subtitle>
+              {{ user?.email }}
+            </v-list-item-subtitle>
+          </v-list-item>
+          
+          <v-list-item>
+            <v-chip 
+              size="x-small" 
+              class="monaco-chip-gradient"
+            >
+              ADMINISTRATOR
+            </v-chip>
+          </v-list-item>
+          
+          <v-divider class="my-2 glass-divider" />
+          
+          <v-list-item to="/board/dashboard" class="glass-dropdown-item">
+            <template v-slot:prepend>
+              <v-icon>mdi-shield-account</v-icon>
+            </template>
+            <v-list-item-title>Board Portal</v-list-item-title>
+          </v-list-item>
+          
+          <v-list-item to="/member/dashboard" class="glass-dropdown-item">
+            <template v-slot:prepend>
+              <v-icon>mdi-account-switch</v-icon>
+            </template>
+            <v-list-item-title>Member Portal</v-list-item-title>
+          </v-list-item>
+          
+          <v-list-item to="/admin/settings" class="glass-dropdown-item">
+            <template v-slot:prepend>
+              <v-icon>mdi-cog</v-icon>
+            </template>
+            <v-list-item-title>System Settings</v-list-item-title>
+          </v-list-item>
+          
+          <v-divider class="my-2 glass-divider" />
+          
+          <v-list-item @click="handleLogout" class="glass-dropdown-item text-error">
+            <template v-slot:prepend>
+              <v-icon color="error">mdi-logout</v-icon>
+            </template>
+            <v-list-item-title>Logout</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-app-bar>
+
+    <v-main class="glass-main">
+      <v-container fluid class="pa-6">
+        <!-- System Alerts Banner with Glass Effect -->
+        <v-alert
+          v-if="systemAlerts.length > 0"
+          type="warning"
+          variant="tonal"
+          closable
+          class="mb-4 glass-alert"
+        >
+          <v-alert-title>System Alerts</v-alert-title>
+          <ul class="mt-2">
+            <li v-for="alert in systemAlerts" :key="alert.id">
+              {{ alert.message }}
+            </li>
+          </ul>
+        </v-alert>
+        
+        <slot />
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+
+<script setup lang="ts">
+import type { Member } from '~/utils/types';
+import ProfileAvatar from '~/components/ProfileAvatar.vue';
+
+const { user, logout } = useAuth();
+const drawer = ref(true);
+const miniVariant = ref(false);
+const alerts = ref(0);
+const systemStatus = ref<'healthy' | 'warning' | 'error'>('healthy');
+const systemAlerts = ref<Array<{ id: number; message: string }>>([]);
+
+// Fetch member data
+const { data: sessionData } = await useFetch<{ success: boolean; member: Member | null }>('/api/auth/session', { 
+  server: false
+});
+
+const memberData = computed<Member | null>(() => sessionData.value?.member || null);
+
+// Load admin-specific data
+onMounted(async () => {
+  try {
+    // Check system health
+    const healthCheck = await $fetch('/api/admin/system/health');
+    systemStatus.value = healthCheck?.data?.status || 'healthy';
+    
+    // Get critical alerts
+    const alertsRes = await $fetch('/api/admin/alerts');
+    alerts.value = alertsRes?.data?.count || 0;
+    systemAlerts.value = alertsRes?.data?.alerts || [];
+  } catch (error) {
+    console.error('Error fetching admin data:', error);
+    systemStatus.value = 'warning';
+  }
+});
+
+const openKeycloak = () => {
+  window.open('https://auth.monacousa.org/admin', '_blank');
+};
+
+const toggleDrawer = () => {
+  miniVariant.value = !miniVariant.value;
+};
+
+const handleLogout = async () => {
+  await logout();
+};
+
+// Responsive drawer behavior
+const { width } = useDisplay();
+watch(width, (newWidth) => {
+  drawer.value = newWidth >= 1024;
+}, { immediate: true });
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/main.scss';
+
+// Glass Drawer Styles
+.glass-drawer {
+  @include glass-effect(0.95, 30px);
+  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+
+.glass-logo-section {
+  background: linear-gradient(135deg, 
+    rgba(220, 38, 38, 0.05) 0%, 
+    rgba(255, 255, 255, 0.8) 100%);
+  border-radius: 16px;
+  margin-bottom: 8px;
+}
+
+.float-animation {
+  animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+// Monaco Text Colors
+.monaco-red-text {
+  color: #dc2626 !important;
+}
+
+.monaco-muted-text {
+  color: #71717a;
+}
+
+// Glass Navigation Items
+.glass-nav-list {
+  background: transparent !important;
+}
+
+.glass-nav-item {
+  border-radius: 12px !important;
+  margin: 4px 12px !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  
+  &:hover {
+    background: rgba(220, 38, 38, 0.05) !important;
+    transform: translateX(2px);
+  }
+  
+  &.v-list-item--active {
+    background: linear-gradient(135deg, 
+      rgba(220, 38, 38, 0.15) 0%, 
+      rgba(220, 38, 38, 0.08) 100%) !important;
+    color: #dc2626 !important;
+    position: relative;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 3px;
+      height: 70%;
+      background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+      border-radius: 0 2px 2px 0;
+    }
+    
+    .v-icon {
+      color: #dc2626 !important;
+    }
+  }
+}
+
+.glass-nav-item-sub {
+  padding-left: 52px !important;
+  border-radius: 8px !important;
+  margin: 2px 12px 2px 24px !important;
+  transition: all 0.2s ease !important;
+  
+  &:hover {
+    background: rgba(220, 38, 38, 0.03) !important;
+  }
+  
+  &.v-list-item--active {
+    background: rgba(220, 38, 38, 0.08) !important;
+    color: #dc2626 !important;
+  }
+}
+
+// Monaco Subheader
+.monaco-subheader {
+  color: #dc2626 !important;
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+// Glass Divider
+.glass-divider {
+  opacity: 0.2;
+  border-color: rgba(220, 38, 38, 0.2);
+}
+
+// Admin App Bar with Gradient
+.admin-bar {
+  background: linear-gradient(135deg, 
+    rgba(220, 38, 38, 0.95) 0%, 
+    rgba(153, 27, 27, 0.95) 100%) !important;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+// Glass Icon Buttons
+.glass-icon-btn {
+  background: rgba(255, 255, 255, 0.1) !important;
+  backdrop-filter: blur(10px);
+  color: white !important;
+  transition: all 0.3s ease !important;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.2) !important;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+// Glass Chips
+.glass-chip {
+  background: rgba(255, 255, 255, 0.2) !important;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white !important;
+}
+
+.monaco-chip-gradient {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
+  color: white !important;
+  border: none;
+  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
+}
+
+// Glass Dropdown
+.glass-dropdown {
+  @include glass-effect(0.95, 20px);
+  border-radius: 12px !important;
+  overflow: hidden;
+}
+
+.glass-dropdown-item {
+  transition: all 0.2s ease !important;
+  
+  &:hover {
+    background: rgba(220, 38, 38, 0.05) !important;
+  }
+}
+
+// Glass Input
+.glass-input {
+  :deep(.v-field) {
+    background: rgba(255, 255, 255, 0.5) !important;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(220, 38, 38, 0.2);
+  }
+}
+
+// Glass Alert
+.glass-alert {
+  @include glass-effect(0.8, 15px);
+  border: 1px solid rgba(245, 158, 11, 0.2) !important;
+}
+
+// Glass Main Background
+.glass-main {
+  background: linear-gradient(180deg, 
+    rgba(250, 250, 250, 0.9) 0%, 
+    rgba(245, 245, 245, 0.9) 100%);
+  min-height: 100vh;
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+      radial-gradient(circle at 20% 50%, rgba(220, 38, 38, 0.03) 0%, transparent 50%),
+      radial-gradient(circle at 80% 80%, rgba(220, 38, 38, 0.03) 0%, transparent 50%),
+      radial-gradient(circle at 40% 20%, rgba(220, 38, 38, 0.03) 0%, transparent 50%);
+    pointer-events: none;
+    z-index: 0;
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 1024px) {
+  .glass-nav-item {
+    margin: 2px 8px !important;
+  }
+  
+  .glass-nav-item-sub {
+    margin: 2px 8px 2px 16px !important;
+  }
+}
+</style>

layouts/board.vue

@@ -0,0 +1,743 @@
+<template>
+  <v-app style="background-color: #fafafa;">
+    <v-navigation-drawer 
+      v-model="drawer" 
+      :rail="miniVariant"
+      :expand-on-hover="false"
+      permanent
+      width="280"
+      rail-width="100"
+      class="enhanced-glass-drawer"
+    >
+      <!-- Enhanced Logo Section -->
+      <v-list-item class="pa-4 text-center enhanced-glass-logo">
+        <template v-if="!miniVariant">
+          <v-img 
+            src="/MONACOUSA-Flags_376x376.png" 
+            width="80" 
+            height="80"
+            class="mx-auto mb-2 shimmer-animation" 
+          />
+          <div class="text-h6 font-weight-bold text-gradient">
+            MonacoUSA Portal
+          </div>
+          <v-chip 
+            size="x-small" 
+            class="glass-badge mt-1"
+          >
+            BOARD MEMBER
+          </v-chip>
+        </template>
+        <template v-else>
+          <v-img 
+            src="/MONACOUSA-Flags_376x376.png" 
+            width="40" 
+            height="40"
+            class="mx-auto shimmer-animation" 
+          />
+        </template>
+      </v-list-item>
+      
+      <v-divider class="glass-divider mx-3" />
+      
+      <!-- Enhanced Navigation Menu -->
+      <v-list nav density="comfortable" class="enhanced-glass-nav">
+        <!-- Board Overview -->
+        <v-tooltip 
+          :text="miniVariant ? 'Board Dashboard' : ''"
+          location="end"
+          :disabled="!miniVariant"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/board/dashboard" 
+              prepend-icon="mdi-view-dashboard"
+              :title="!miniVariant ? 'Board Dashboard' : undefined"
+              value="dashboard"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
+
+        <!-- Member Management -->
+        <v-list-group value="members" v-if="!miniVariant">
+          <template v-slot:activator="{ props }">
+            <v-list-item
+              v-bind="props"
+              prepend-icon="mdi-account-group"
+              title="Members"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+          
+          <v-list-item 
+            to="/board/members" 
+            title="Member Directory"
+            value="member-list"
+            class="glass-nav-item-sub"
+          />
+          <v-list-item 
+            to="/board/members/dues" 
+            title="Dues Management"
+            value="dues"
+            class="glass-nav-item-sub"
+          />
+          <v-list-item 
+            to="/board/members/applications" 
+            title="Applications"
+            value="applications"
+            class="glass-nav-item-sub"
+          >
+            <template v-slot:append>
+              <v-badge 
+                :content="pendingApplications" 
+                :value="pendingApplications > 0"
+                color="error"
+                class="glass-badge"
+              />
+            </template>
+          </v-list-item>
+        </v-list-group>
+        
+        <!-- Member Management (Collapsed) -->
+        <v-tooltip 
+          v-if="miniVariant"
+          text="Members"
+          location="end"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/board/members" 
+              prepend-icon="mdi-account-group"
+              value="members-collapsed"
+              class="glass-nav-item animated-nav-item"
+            >
+              <template v-if="pendingApplications > 0" v-slot:append>
+                <v-badge 
+                  :content="pendingApplications"
+                  color="error"
+                  class="glass-badge"
+                />
+              </template>
+            </v-list-item>
+          </template>
+        </v-tooltip>
+
+        <!-- Events & Meetings -->
+        <v-list-group value="events" v-if="!miniVariant">
+          <template v-slot:activator="{ props }">
+            <v-list-item
+              v-bind="props"
+              prepend-icon="mdi-calendar"
+              title="Events & Meetings"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+          
+          <v-list-item 
+            to="/board/events" 
+            title="All Events"
+            value="events"
+            class="glass-nav-item-sub"
+          />
+          <v-list-item 
+            to="/board/meetings" 
+            title="Board Meetings"
+            value="meetings"
+            class="glass-nav-item-sub"
+          />
+          <v-list-item 
+            to="/board/meetings/minutes" 
+            title="Meeting Minutes"
+            value="minutes"
+            class="glass-nav-item-sub"
+          />
+        </v-list-group>
+        
+        <!-- Events & Meetings (Collapsed) -->
+        <v-tooltip 
+          v-if="miniVariant"
+          text="Events & Meetings"
+          location="end"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/board/events" 
+              prepend-icon="mdi-calendar"
+              value="events-collapsed"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
+
+        <!-- Reports & Analytics -->
+        <v-tooltip 
+          :text="miniVariant ? 'Reports & Analytics' : ''"
+          location="end"
+          :disabled="!miniVariant"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/board/reports" 
+              prepend-icon="mdi-chart-box"
+              :title="!miniVariant ? 'Reports & Analytics' : undefined"
+              value="reports"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
+
+        <!-- Governance -->
+        <v-tooltip 
+          :text="miniVariant ? 'Governance' : ''"
+          location="end"
+          :disabled="!miniVariant"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/board/governance" 
+              prepend-icon="mdi-gavel"
+              :title="!miniVariant ? 'Governance' : undefined"
+              value="governance"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
+
+        <!-- Communications -->
+        <v-tooltip 
+          :text="miniVariant ? 'Communications' : ''"
+          location="end"
+          :disabled="!miniVariant"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/board/communications" 
+              prepend-icon="mdi-email-newsletter"
+              :title="!miniVariant ? 'Communications' : undefined"
+              value="communications"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
+
+        <v-divider class="my-2 glass-divider" />
+        
+        <!-- Member Section Access -->
+        <v-list-subheader v-if="!miniVariant" class="monaco-subheader">Member Portal</v-list-subheader>
+        <v-tooltip 
+          :text="miniVariant ? 'Member View' : ''"
+          location="end"
+          :disabled="!miniVariant"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/member/dashboard" 
+              prepend-icon="mdi-account"
+              :title="!miniVariant ? 'Member View' : undefined"
+              value="member-view"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
+      </v-list>
+      
+      <!-- Enhanced Profile Card -->
+      <template v-slot:append>
+        <div class="pa-2">
+          <v-card class="glass-profile-card overflow-visible" style="background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(255, 255, 255, 0.95)); border: 1px solid rgba(220, 38, 38, 0.2);">
+            <div class="d-flex align-center" :class="miniVariant ? 'flex-column py-3 px-2' : 'pa-3'">
+              <!-- Avatar Section -->
+              <div style="position: relative;">
+                <ProfileAvatar
+                  :member-id="memberData?.member_id || memberData?.Id"
+                  :first-name="memberData?.first_name || user?.firstName"
+                  :last-name="memberData?.last_name || user?.lastName"
+                  :member-name="memberData?.FullName || user?.name"
+                  :size="miniVariant ? '32' : '48'"
+                  :class="miniVariant ? '' : 'mr-3'"
+                  show-border
+                  style="border: 2px solid #dc2626; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);"
+                />
+                <v-icon 
+                  v-if="!miniVariant"
+                  size="16" 
+                  color="green" 
+                  style="position: absolute; bottom: 0; right: 12px; background: white; border-radius: 50%; padding: 2px;"
+                >
+                  mdi-check-circle
+                </v-icon>
+              </div>
+              
+              <!-- Info Section (Hidden in mini mode) -->
+              <div v-if="!miniVariant" class="flex-grow-1">
+                <div class="text-subtitle-2 font-weight-bold">{{ user?.name || 'Board Member' }}</div>
+                <div class="text-caption text-medium-emphasis">{{ user?.email?.split('@')[0] || 'board' }}</div>
+                <v-chip size="x-small" class="mt-1" style="background: linear-gradient(135deg, #dc2626, #b91c1c); color: white;">
+                  <v-icon start size="12">mdi-shield-check</v-icon>
+                  Board
+                </v-chip>
+              </div>
+              
+              <!-- Action Buttons -->
+              <div :class="miniVariant ? 'mt-2' : 'ml-auto'">
+                <v-menu location="top" offset-y>
+                  <template v-slot:activator="{ props }">
+                    <v-btn 
+                      v-bind="props"
+                      icon
+                      :size="miniVariant ? 'small' : 'small'"
+                      variant="tonal"
+                      color="primary"
+                      class="profile-menu-btn"
+                      style="background: rgba(220, 38, 38, 0.1);"
+                    >
+                      <v-icon>mdi-cog</v-icon>
+                    </v-btn>
+                  </template>
+                  <v-list density="compact" class="glass-menu" min-width="200">
+                    <v-list-item @click="() => {}" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="primary">mdi-account-circle</v-icon>
+                      </template>
+                      <v-list-item-title>My Profile</v-list-item-title>
+                    </v-list-item>
+                    <v-list-item @click="() => {}" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="info">mdi-cog-outline</v-icon>
+                      </template>
+                      <v-list-item-title>Settings</v-list-item-title>
+                    </v-list-item>
+                    <v-divider class="my-1 glass-divider" />
+                    <v-list-item @click="logout" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="error">mdi-logout-variant</v-icon>
+                      </template>
+                      <v-list-item-title class="text-error">Sign Out</v-list-item-title>
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
+              </div>
+            </div>
+          </v-card>
+        </div>
+      </template>
+    </v-navigation-drawer>
+    
+    <v-app-bar elevation="0" flat class="glass-app-bar board-bar">
+      <v-toolbar-title class="font-weight-bold text-white">
+        Board Portal
+      </v-toolbar-title>
+      
+      <v-spacer />
+
+      <!-- Quick Actions with Glass Effects -->
+      <v-btn 
+        icon 
+        class="glass-icon-btn"
+        @click="toggleSearch"
+      >
+        <v-icon>mdi-magnify</v-icon>
+      </v-btn>
+
+      <!-- Move hamburger menu to the right side -->
+      <v-btn
+        icon
+        @click="toggleDrawer"
+        class="glass-icon-btn ml-2"
+      >
+        <v-icon>{{ miniVariant ? 'mdi-menu' : 'mdi-menu-open' }}</v-icon>
+      </v-btn>
+      
+      <!-- User Menu -->
+      <v-menu offset-y>
+        <template v-slot:activator="{ props }">
+          <v-btn icon v-bind="props" class="glass-icon-btn">
+            <ProfileAvatar 
+              :member-id="memberData?.member_id"
+              :member-name="user?.name"
+              :first-name="user?.firstName || memberData?.first_name"
+              :last-name="user?.lastName || memberData?.last_name"
+              size="small"
+              :lazy="false"
+              show-border
+            />
+          </v-btn>
+        </template>
+        
+        <v-list min-width="250" class="glass-dropdown">
+          <v-list-item>
+            <v-list-item-title class="font-weight-bold">
+              {{ user?.name || 'Board Member' }}
+            </v-list-item-title>
+            <v-list-item-subtitle>
+              {{ user?.email }}
+            </v-list-item-subtitle>
+          </v-list-item>
+          
+          <v-list-item>
+            <v-chip 
+              size="x-small" 
+              class="monaco-chip-gradient"
+            >
+              BOARD MEMBER
+            </v-chip>
+          </v-list-item>
+          
+          <v-divider class="my-2 glass-divider" />
+          
+          <v-list-item to="/board/profile" class="glass-dropdown-item">
+            <template v-slot:prepend>
+              <v-icon>mdi-account</v-icon>
+            </template>
+            <v-list-item-title>Board Profile</v-list-item-title>
+          </v-list-item>
+          
+          <v-list-item to="/member/dashboard" class="glass-dropdown-item">
+            <template v-slot:prepend>
+              <v-icon>mdi-account-switch</v-icon>
+            </template>
+            <v-list-item-title>Member Portal</v-list-item-title>
+          </v-list-item>
+          
+          <v-list-item to="/board/settings" class="glass-dropdown-item">
+            <template v-slot:prepend>
+              <v-icon>mdi-cog</v-icon>
+            </template>
+            <v-list-item-title>Settings</v-list-item-title>
+          </v-list-item>
+          
+          <v-divider class="my-2 glass-divider" />
+          
+          <v-list-item @click="handleLogout" class="glass-dropdown-item text-error">
+            <template v-slot:prepend>
+              <v-icon color="error">mdi-logout</v-icon>
+            </template>
+            <v-list-item-title>Logout</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-app-bar>
+
+    <!-- Search Overlay with Glass Effect -->
+    <v-dialog v-model="searchOpen" max-width="600" persistent>
+      <v-card class="glass-card">
+        <v-card-title class="d-flex align-center">
+          <v-icon class="mr-2 monaco-red-text">mdi-magnify</v-icon>
+          Search Members
+          <v-spacer />
+          <v-btn icon @click="searchOpen = false" class="glass-icon-btn-dark">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-card-title>
+        <v-card-text>
+          <v-text-field
+            v-model="searchQuery"
+            label="Search by name, email, or member ID"
+            prepend-inner-icon="mdi-magnify"
+            variant="outlined"
+            autofocus
+            @keyup.enter="performSearch"
+            class="glass-input"
+          />
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+    
+    <v-main class="glass-main">
+      <v-container fluid class="pa-6">
+        <slot />
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+
+<script setup lang="ts">
+import type { Member } from '~/utils/types';
+import ProfileAvatar from '~/components/ProfileAvatar.vue';
+
+const { user, logout } = useAuth();
+const drawer = ref(true);
+const miniVariant = ref(false);
+const notifications = ref(0);
+const pendingApplications = ref(0);
+const searchOpen = ref(false);
+const searchQuery = ref('');
+
+// Fetch member data
+const { data: sessionData } = await useFetch<{ success: boolean; member: Member | null }>('/api/auth/session', { 
+  server: false
+});
+
+const memberData = computed<Member | null>(() => sessionData.value?.member || null);
+
+// Load board-specific notifications
+onMounted(async () => {
+  try {
+    const [notificationsRes, applicationsRes] = await Promise.all([
+      $fetch('/api/board/notifications/count'),
+      $fetch('/api/board/applications/pending/count')
+    ]);
+    
+    notifications.value = notificationsRes?.data?.count || 0;
+    pendingApplications.value = applicationsRes?.data?.count || 0;
+  } catch (error) {
+    console.error('Error fetching board data:', error);
+  }
+});
+
+const toggleDrawer = () => {
+  miniVariant.value = !miniVariant.value;
+};
+
+const toggleSearch = () => {
+  searchOpen.value = true;
+};
+
+const performSearch = () => {
+  if (searchQuery.value) {
+    navigateTo(`/board/members?search=${encodeURIComponent(searchQuery.value)}`);
+    searchOpen.value = false;
+    searchQuery.value = '';
+  }
+};
+
+const handleLogout = async () => {
+  await logout();
+};
+
+// Responsive drawer behavior
+const { width } = useDisplay();
+watch(width, (newWidth) => {
+  drawer.value = newWidth >= 1024;
+}, { immediate: true });
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/main.scss';
+
+// Glass Drawer Styles
+.glass-drawer {
+  @include glass-effect(0.95, 30px);
+  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+
+.glass-logo-section {
+  background: linear-gradient(135deg, 
+    rgba(220, 38, 38, 0.05) 0%, 
+    rgba(255, 255, 255, 0.8) 100%);
+  border-radius: 16px;
+  margin-bottom: 8px;
+}
+
+.float-animation {
+  animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+// Monaco Text Colors
+.monaco-red-text {
+  color: #dc2626 !important;
+}
+
+// Glass Navigation Items
+.glass-nav-list {
+  background: transparent !important;
+}
+
+.glass-nav-item {
+  border-radius: 12px !important;
+  margin: 4px 12px !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  
+  &:hover {
+    background: rgba(220, 38, 38, 0.05) !important;
+    transform: translateX(2px);
+  }
+  
+  &.v-list-item--active {
+    background: linear-gradient(135deg, 
+      rgba(220, 38, 38, 0.15) 0%, 
+      rgba(220, 38, 38, 0.08) 100%) !important;
+    color: #dc2626 !important;
+    position: relative;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 3px;
+      height: 70%;
+      background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+      border-radius: 0 2px 2px 0;
+    }
+    
+    .v-icon {
+      color: #dc2626 !important;
+    }
+  }
+}
+
+.glass-nav-item-sub {
+  padding-left: 52px !important;
+  border-radius: 8px !important;
+  margin: 2px 12px 2px 24px !important;
+  transition: all 0.2s ease !important;
+  
+  &:hover {
+    background: rgba(220, 38, 38, 0.03) !important;
+  }
+  
+  &.v-list-item--active {
+    background: rgba(220, 38, 38, 0.08) !important;
+    color: #dc2626 !important;
+  }
+}
+
+// Monaco Subheader
+.monaco-subheader {
+  color: #dc2626 !important;
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+// Glass Divider
+.glass-divider {
+  opacity: 0.2;
+  border-color: rgba(220, 38, 38, 0.2);
+}
+
+// Board App Bar with Gradient
+.board-bar {
+  background: linear-gradient(135deg, 
+    rgba(220, 38, 38, 0.9) 0%, 
+    rgba(124, 45, 18, 0.9) 100%) !important;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+// Glass Icon Buttons
+.glass-icon-btn {
+  background: rgba(255, 255, 255, 0.1) !important;
+  backdrop-filter: blur(10px);
+  color: white !important;
+  transition: all 0.3s ease !important;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.2) !important;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.glass-icon-btn-dark {
+  background: rgba(0, 0, 0, 0.05) !important;
+  backdrop-filter: blur(10px);
+  color: #71717a !important;
+  transition: all 0.3s ease !important;
+  
+  &:hover {
+    background: rgba(0, 0, 0, 0.1) !important;
+    transform: translateY(-1px);
+  }
+}
+
+// Glass Badge
+.glass-badge {
+  :deep(.v-badge__badge) {
+    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
+    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
+  }
+}
+
+// Monaco Chip
+.monaco-chip-gradient {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
+  color: white !important;
+  border: none;
+  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
+}
+
+// Glass Dropdown
+.glass-dropdown {
+  @include glass-effect(0.95, 20px);
+  border-radius: 12px !important;
+  overflow: hidden;
+}
+
+.glass-dropdown-item {
+  transition: all 0.2s ease !important;
+  
+  &:hover {
+    background: rgba(220, 38, 38, 0.05) !important;
+  }
+}
+
+// Glass Input
+.glass-input {
+  :deep(.v-field) {
+    background: rgba(255, 255, 255, 0.5) !important;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(220, 38, 38, 0.2);
+  }
+}
+
+// Glass Main Background
+.glass-main {
+  background-color: #fafafa; // Solid fallback for Edge and other browsers
+  background-image: linear-gradient(180deg, 
+    rgba(250, 250, 250, 0.9) 0%, 
+    rgba(245, 245, 245, 0.9) 100%);
+  background: linear-gradient(180deg, 
+    rgba(250, 250, 250, 0.9) 0%, 
+    rgba(245, 245, 245, 0.9) 100%);
+  min-height: 100vh;
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+      radial-gradient(circle at 20% 50%, rgba(220, 38, 38, 0.03) 0%, transparent 50%),
+      radial-gradient(circle at 80% 80%, rgba(220, 38, 38, 0.03) 0%, transparent 50%),
+      radial-gradient(circle at 40% 20%, rgba(220, 38, 38, 0.03) 0%, transparent 50%);
+    pointer-events: none;
+    z-index: 0;
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 1024px) {
+  .glass-nav-item {
+    margin: 2px 8px !important;
+  }
+  
+  .glass-nav-item-sub {
+    margin: 2px 8px 2px 16px !important;
+  }
+}
+</style>

layouts/dashboard.vue

@@ -97,18 +97,12 @@
     </v-navigation-drawer>
     
     <v-app-bar app color="primary" elevation="2">
-      <!-- MonacoUSA Logo as Navigation Toggle -->
-      <v-btn
-        variant="text"
-        @click="drawer = !drawer"
+      <!-- MonacoUSA Logo -->
+      <MonacoUSALogo 
+        size="small" 
+        variant="white"
         class="mr-2"
-      >
-        <MonacoUSALogo 
-          size="small" 
-          variant="white"
-          clickable
-        />
-      </v-btn>
+      />
       
       <v-toolbar-title class="text-white font-weight-bold">
         MonacoUSA Portal
@@ -120,9 +114,15 @@
       <v-menu offset-y>
         <template v-slot:activator="{ props }">
           <v-btn icon v-bind="props" color="white">
-            <v-avatar size="36" color="white">
-              <v-icon color="primary">mdi-account</v-icon>
-            </v-avatar>
+            <ProfileAvatar 
+              :member-id="memberData?.member_id"
+              :member-name="user?.name"
+              :first-name="user?.firstName || memberData?.first_name"
+              :last-name="user?.lastName || memberData?.last_name"
+              size="small"
+              :lazy="false"
+              show-border
+            />
           </v-btn>
         </template>
         
@@ -180,7 +180,7 @@
       <!-- Dues Payment Banner -->
       <DuesPaymentBanner />
       
-      <v-container fluid class="pa-0">
+      <v-container fluid>
         <slot />
       </v-container>
     </v-main>
@@ -188,9 +188,18 @@
 </template>
 
 <script setup lang="ts">
+import type { Member } from '~/utils/types';
+
 const { user, userTier, isBoard, isAdmin, logout } = useAuth();
 const drawer = ref(true);
 
+// Fetch complete member data for profile avatar
+const { data: sessionData } = await useFetch<{ success: boolean; member: Member | null }>('/api/auth/session', { 
+  server: false
+});
+
+const memberData = computed<Member | null>(() => sessionData.value?.member || null);
+
 // Helper functions
 const getTierColor = (tier: string) => {
   switch (tier) {
@@ -216,7 +225,7 @@ const openUserManagement = () => {
 };
 
 const navigateToProfile = () => {
-  navigateTo('/dashboard/user');
+  navigateTo('/dashboard/profile');
 };
 
 const navigateToSettings = () => {

layouts/member.vue

@@ -0,0 +1,640 @@
+<template>
+  <v-app style="background-color: #fafafa;">
+    <v-navigation-drawer 
+      v-model="drawer" 
+      :rail="miniVariant"
+      :expand-on-hover="false"
+      permanent
+      width="280"
+      rail-width="100"
+      class="enhanced-glass-drawer"
+    >
+      <!-- Logo Section with Enhanced Glass Effect -->
+      <v-list-item class="logo-section">
+        <template v-if="!miniVariant">
+          <v-img 
+            src="/MONACOUSA-Flags_376x376.png" 
+            width="80" 
+            height="80"
+            class="mx-auto logo-image mb-2"
+          />
+          <div class="logo-text">
+            <div class="text-h6 font-weight-bold monaco-red-text">
+              MonacoUSA Portal
+            </div>
+            <v-chip 
+              size="x-small" 
+              class="monaco-chip-gradient mt-1"
+            >
+              MEMBER
+            </v-chip>
+          </div>
+        </template>
+        <template v-else>
+          <v-img 
+            src="/MONACOUSA-Flags_376x376.png" 
+            width="40" 
+            height="40"
+            class="mx-auto logo-image"
+          />
+        </template>
+      </v-list-item>
+      
+      <v-divider class="glass-divider" />
+      
+      <!-- Navigation Menu with Enhanced Effects -->
+      <v-list nav class="enhanced-nav-list">
+        <template v-for="item in navigationItems" :key="item.value">
+          <v-tooltip 
+            :text="item.title" 
+            location="right"
+            :disabled="!miniVariant"
+          >
+            <template v-slot:activator="{ props }">
+              <v-list-item 
+                :to="item.to" 
+                :prepend-icon="item.icon"
+                :title="!miniVariant ? item.title : undefined"
+                :value="item.value"
+                class="nav-item-enhanced"
+                v-bind="props"
+              >
+                <template v-if="item.badge" v-slot:append>
+                  <v-badge
+                    :content="item.badge"
+                    color="error"
+                    inline
+                    :dot="miniVariant"
+                  />
+                </template>
+              </v-list-item>
+            </template>
+          </v-tooltip>
+        </template>
+      </v-list>
+      
+      <!-- Enhanced Profile Footer -->
+      <template v-slot:append>
+        <div class="pa-2">
+          <v-card class="glass-profile-card overflow-visible">
+            <div class="d-flex align-center" :class="miniVariant ? 'flex-column py-3 px-2' : 'pa-3'">
+              <!-- Avatar Section -->
+              <div class="position-relative">
+                <ProfileAvatar
+                  v-if="memberData"
+                  :member-id="memberData?.member_id"
+                  :first-name="memberData?.first_name || user?.firstName"
+                  :last-name="memberData?.last_name || user?.lastName"
+                  :size="miniVariant ? '32' : 'small'"
+                  :class="miniVariant ? '' : 'mr-3'"
+                  :show-badge="false"
+                />
+                <div v-if="!miniVariant" class="online-indicator" />
+              </div>
+              
+              <!-- Info Section (Hidden in mini mode) -->
+              <div v-if="!miniVariant" class="flex-grow-1">
+                <div class="text-subtitle-2 font-weight-bold">{{ fullName }}</div>
+                <div class="text-caption text-medium-emphasis">{{ email?.split('@')[0] || 'member' }}</div>
+                <v-chip size="x-small" class="mt-1 glass-badge">Member</v-chip>
+              </div>
+              
+              <!-- Action Buttons -->
+              <div :class="miniVariant ? 'mt-2' : 'ml-auto'">
+                <v-menu location="top" offset-y>
+                  <template v-slot:activator="{ props }">
+                    <v-btn 
+                      v-bind="props"
+                      icon
+                      :size="miniVariant ? 'small' : 'small'"
+                      variant="text"
+                      class="profile-menu-btn"
+                    >
+                      <v-icon>mdi-dots-vertical</v-icon>
+                    </v-btn>
+                  </template>
+                  <v-list density="compact" class="glass-menu" min-width="200">
+                    <v-list-item to="/member/profile" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="primary">mdi-account-circle</v-icon>
+                      </template>
+                      <v-list-item-title>My Profile</v-list-item-title>
+                    </v-list-item>
+                    <v-list-item to="/member/settings" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="info">mdi-cog-outline</v-icon>
+                      </template>
+                      <v-list-item-title>Settings</v-list-item-title>
+                    </v-list-item>
+                    <v-divider class="my-1 glass-divider" />
+                    <v-list-item @click="handleLogout" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="error">mdi-logout-variant</v-icon>
+                      </template>
+                      <v-list-item-title class="text-error">Sign Out</v-list-item-title>
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
+              </div>
+            </div>
+          </v-card>
+        </div>
+      </template>
+    </v-navigation-drawer>
+    
+    <v-app-bar elevation="0" flat class="glass-app-bar member-bar">
+      <v-btn
+        icon
+        @click="toggleDrawer"
+        class="glass-icon-btn mr-2"
+      >
+        <v-icon>{{ miniVariant ? 'mdi-menu' : 'mdi-menu-open' }}</v-icon>
+      </v-btn>
+      
+      <v-toolbar-title class="font-weight-bold text-white">
+        Member Portal
+      </v-toolbar-title>
+      
+      <v-spacer />
+
+      
+      <!-- User Menu -->
+      <v-menu offset-y>
+        <template v-slot:activator="{ props }">
+          <v-btn icon v-bind="props" class="glass-icon-btn">
+            <ProfileAvatar 
+              :member-id="memberData?.member_id"
+              :member-name="user?.name"
+              :first-name="user?.firstName || memberData?.first_name"
+              :last-name="user?.lastName || memberData?.last_name"
+              size="small"
+              :lazy="false"
+              show-border
+            />
+          </v-btn>
+        </template>
+        
+        <v-list min-width="250" class="glass-dropdown">
+          <v-list-item>
+            <v-list-item-title class="font-weight-bold">
+              {{ user?.name || 'Member' }}
+            </v-list-item-title>
+            <v-list-item-subtitle>
+              {{ user?.email }}
+            </v-list-item-subtitle>
+          </v-list-item>
+          
+          <v-list-item>
+            <v-chip 
+              size="x-small" 
+              class="monaco-chip-gradient"
+            >
+              MEMBER
+            </v-chip>
+          </v-list-item>
+          
+          <v-divider class="my-2 glass-divider" />
+          
+          <v-list-item to="/member/profile" class="glass-dropdown-item">
+            <template v-slot:prepend>
+              <v-icon>mdi-account</v-icon>
+            </template>
+            <v-list-item-title>My Profile</v-list-item-title>
+          </v-list-item>
+          
+          <v-list-item to="/member/settings" class="glass-dropdown-item">
+            <template v-slot:prepend>
+              <v-icon>mdi-cog</v-icon>
+            </template>
+            <v-list-item-title>Settings</v-list-item-title>
+          </v-list-item>
+          
+          <v-divider class="my-2 glass-divider" />
+          
+          <v-list-item @click="handleLogout" class="glass-dropdown-item text-error">
+            <template v-slot:prepend>
+              <v-icon color="error">mdi-logout</v-icon>
+            </template>
+            <v-list-item-title>Logout</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-app-bar>
+    
+    <v-main class="glass-main">
+      <!-- Dues Payment Banner with Glass Effect -->
+      <DuesPaymentBanner />
+      
+      <v-container fluid class="pa-6">
+        <slot />
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+
+<script setup lang="ts">
+import type { Member } from '~/utils/types';
+
+const { user, logout } = useAuth();
+const drawer = ref(true);
+const miniVariant = ref(false);
+const notifications = ref(0);
+
+// Navigation items configuration
+const navigationItems = ref([
+  { 
+    to: '/member/dashboard', 
+    icon: 'mdi-view-dashboard', 
+    title: 'Dashboard', 
+    value: 'dashboard' 
+  },
+  { 
+    to: '/member/profile', 
+    icon: 'mdi-account', 
+    title: 'My Profile', 
+    value: 'profile' 
+  },
+  { 
+    to: '/member/events', 
+    icon: 'mdi-calendar', 
+    title: 'Events', 
+    value: 'events',
+    badge: '3' // Example badge
+  },
+  { 
+    to: '/member/payments', 
+    icon: 'mdi-credit-card', 
+    title: 'Payments & Dues', 
+    value: 'payments' 
+  },
+  { 
+    to: '/member/resources', 
+    icon: 'mdi-book-open-variant', 
+    title: 'Resources', 
+    value: 'resources' 
+  }
+]);
+
+// Fetch member data
+const { data: sessionData } = await useFetch<{ success: boolean; member: Member | null }>('/api/auth/session', { 
+  server: false
+});
+
+const memberData = computed<Member | null>(() => sessionData.value?.member || null);
+
+// Computed properties for profile
+const fullName = computed(() => {
+  if (memberData.value) {
+    return `${memberData.value.first_name} ${memberData.value.last_name}`;
+  }
+  return user.value?.name || 'Member';
+});
+
+const email = computed(() => memberData.value?.email || user.value?.email || '');
+
+// Check for notifications
+onMounted(async () => {
+  // Check for upcoming events, dues reminders, etc.
+  try {
+    const { data } = await $fetch('/api/member/notifications/count');
+    notifications.value = data?.count || 0;
+  } catch (error) {
+    console.error('Error fetching notifications:', error);
+  }
+});
+
+const toggleDrawer = () => {
+  miniVariant.value = !miniVariant.value;
+};
+
+const handleLogout = async () => {
+  await logout();
+};
+
+// Responsive drawer behavior
+const { width } = useDisplay();
+watch(width, (newWidth) => {
+  drawer.value = newWidth >= 1024;
+}, { immediate: true });
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/main.scss';
+
+// Enhanced Glass Drawer Styles
+.enhanced-glass-drawer {
+  @include enhanced-glass(0.95, 30px);
+  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.logo-section {
+  position: relative;
+  padding: 1.5rem;
+  background: linear-gradient(135deg, 
+    rgba(255, 255, 255, 0.95) 0%, 
+    rgba(248, 248, 248, 0.9) 100%);
+  border-radius: 16px;
+  margin: 0.5rem;
+  margin-bottom: 1rem;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  
+  &--collapsed {
+    padding: 0.75rem;
+    
+    .logo-image {
+      margin: 0 auto;
+    }
+  }
+  
+  .logo-image {
+    transition: all 0.3s ease;
+  }
+  
+  .logo-text {
+    text-align: center;
+  }
+  
+  .collapse-btn {
+    position: absolute;
+    right: -0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: white;
+    border: 1px solid rgba(220, 38, 38, 0.2);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    
+    &:hover {
+      background: rgba(220, 38, 38, 0.05);
+    }
+  }
+}
+
+// Monaco Text Colors
+.monaco-red-text {
+  color: #dc2626 !important;
+}
+
+// Enhanced Navigation Items
+.enhanced-nav-list {
+  background: transparent !important;
+  padding: 0.5rem;
+}
+
+.nav-item-enhanced {
+  border-radius: 12px !important;
+  margin: 4px 8px !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  position: relative;
+  overflow: hidden;
+  @include ripple-effect();
+  
+  &:hover {
+    background: linear-gradient(135deg,
+      rgba(220, 38, 38, 0.08) 0%,
+      rgba(220, 38, 38, 0.04) 100%) !important;
+    transform: translateX(4px);
+    
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(90deg, 
+        transparent 0%,
+        rgba(220, 38, 38, 0.05) 50%,
+        transparent 100%);
+      animation: shimmer 1s ease-in-out;
+    }
+  }
+  
+  &.v-list-item--active {
+    background: linear-gradient(135deg, 
+      rgba(220, 38, 38, 0.15) 0%, 
+      rgba(220, 38, 38, 0.08) 100%) !important;
+    color: #dc2626 !important;
+    @include sliding-indicator();
+    
+    .v-icon {
+      color: #dc2626 !important;
+      animation: pulse 2s ease-in-out infinite;
+    }
+  }
+  
+  .v-list-item__prepend {
+    .v-icon {
+      transition: all 0.3s ease;
+    }
+  }
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
+
+// Glass Divider
+.glass-divider {
+  opacity: 0.2;
+  border-color: rgba(220, 38, 38, 0.2);
+}
+
+// Member App Bar with Gradient
+.member-bar {
+  background: linear-gradient(135deg, 
+    rgba(239, 68, 68, 0.9) 0%, 
+    rgba(220, 38, 38, 0.9) 100%) !important;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+// Glass Icon Buttons
+.glass-icon-btn {
+  background: rgba(255, 255, 255, 0.1) !important;
+  backdrop-filter: blur(10px);
+  color: white !important;
+  transition: all 0.3s ease !important;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.2) !important;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+// Monaco Chip
+.monaco-chip-gradient {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
+  color: white !important;
+  border: none;
+  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
+}
+
+// Glass Dropdown
+.glass-dropdown {
+  @include glass-effect(0.95, 20px);
+  border-radius: 12px !important;
+  overflow: hidden;
+}
+
+.glass-dropdown-item {
+  transition: all 0.2s ease !important;
+  
+  &:hover {
+    background: rgba(220, 38, 38, 0.05) !important;
+  }
+}
+
+// Glass Main Background
+.glass-main {
+  background-color: #fafafa; // Solid fallback for Edge and other browsers
+  background-image: linear-gradient(180deg, 
+    rgba(250, 250, 250, 0.9) 0%, 
+    rgba(245, 245, 245, 0.9) 100%);
+  background: linear-gradient(180deg, 
+    rgba(250, 250, 250, 0.9) 0%, 
+    rgba(245, 245, 245, 0.9) 100%);
+  min-height: 100vh;
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+      radial-gradient(circle at 20% 50%, rgba(220, 38, 38, 0.03) 0%, transparent 50%),
+      radial-gradient(circle at 80% 80%, rgba(220, 38, 38, 0.03) 0%, transparent 50%),
+      radial-gradient(circle at 40% 20%, rgba(220, 38, 38, 0.03) 0%, transparent 50%);
+    pointer-events: none;
+    z-index: 0;
+  }
+}
+
+// Profile Footer Styles
+.profile-footer {
+  padding: 0.5rem;
+}
+
+.profile-card-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: linear-gradient(135deg,
+    rgba(255, 255, 255, 0.9),
+    rgba(255, 255, 255, 0.7)
+  );
+  border-radius: 12px;
+  margin: 0.5rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+  position: relative;
+  
+  &:hover {
+    background: linear-gradient(135deg,
+      rgba(255, 255, 255, 0.95),
+      rgba(255, 255, 255, 0.85)
+    );
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+  }
+  
+  .profile-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    position: relative;
+    
+    .profile-menu-btn {
+      position: absolute;
+      top: -0.5rem;
+      right: -0.5rem;
+      opacity: 0.6;
+      transition: opacity 0.2s ease;
+      
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.profile-avatar-wrapper {
+  position: relative;
+  flex-shrink: 0;
+  
+  .online-indicator {
+    position: absolute;
+    bottom: -2px;
+    right: -2px;
+    width: 10px;
+    height: 10px;
+    background: #22c55e;
+    border: 2px solid white;
+    border-radius: 50%;
+    animation: pulse-online 2s ease-in-out infinite;
+  }
+}
+
+.profile-info {
+  text-align: center;
+  width: 100%;
+  
+  .profile-name {
+    font-size: 0.925rem;
+    font-weight: 600;
+    color: rgb(31, 41, 55);
+    margin-bottom: 0.25rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .profile-email {
+    font-size: 0.8rem;
+    color: rgb(107, 114, 128);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+@keyframes pulse-online {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
+  }
+}
+
+// Fade transition
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+// Responsive adjustments
+@media (max-width: 1024px) {
+  .nav-item-enhanced {
+    margin: 2px 8px !important;
+  }
+}
+</style>

middleware/admin.ts

@@ -0,0 +1,17 @@
+// middleware/admin.ts
+export default defineNuxtRouteMiddleware((to, from) => {
+  const { isAuthenticated, isAdmin } = useAuth();
+  
+  // Check if user is authenticated
+  if (!isAuthenticated.value) {
+    return navigateTo('/login');
+  }
+  
+  // Check if user has admin privileges
+  if (!isAdmin.value) {
+    throw createError({
+      statusCode: 403,
+      statusMessage: 'Access denied. Administrator privileges required.'
+    });
+  }
+});

middleware/board.ts

@@ -0,0 +1,15 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  const { isAuthenticated, isBoard, isAdmin } = useAuth();
+  
+  if (!isAuthenticated.value) {
+    return navigateTo('/login');
+  }
+  
+  // Only board members and admins can access board pages
+  if (!isBoard.value && !isAdmin.value) {
+    throw createError({
+      statusCode: 403,
+      statusMessage: 'Access denied. Board member privileges required.'
+    });
+  }
+});

middleware/member.ts

@@ -0,0 +1,15 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  const { isAuthenticated, isUser, isBoard, isAdmin } = useAuth();
+  
+  if (!isAuthenticated.value) {
+    return navigateTo('/login');
+  }
+  
+  // Members, board members, and admins can all access member pages
+  if (!isUser.value && !isBoard.value && !isAdmin.value) {
+    throw createError({
+      statusCode: 403,
+      statusMessage: 'Access denied. Member privileges required.'
+    });
+  }
+});

nuxt.config.ts

@@ -14,61 +14,8 @@ export default defineNuxtConfig({
       console.log(`🌐 Server listening on http://${host}:${port}`)
     }
   },
-  modules: ["vuetify-nuxt-module", 
-  // TEMPORARILY DISABLED FOR TESTING - PWA causing reload loops on mobile Safari
-  // [
-  //   "@vite-pwa/nuxt",
-  //   {
-  //     registerType: 'autoUpdate',
-  //     workbox: {
-  //       globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
-  //       navigateFallback: '/',
-  //       navigateFallbackDenylist: [/^\/api\//]
-  //     },
-  //     client: {
-  //       installPrompt: true,
-  //       periodicSyncForUpdates: 20
-  //     },
-  //     devOptions: {
-  //       enabled: true,
-  //       suppressWarnings: true,
-  //       navigateFallbackAllowlist: [/^\/$/],
-  //       type: 'module'
-  //     },
-  //     manifest: {
-  //       name: 'MonacoUSA Portal',
-  //       short_name: 'MonacoUSA',
-  //       description: 'MonacoUSA Portal - Unified dashboard for tools and services',
-  //       theme_color: '#a31515',
-  //       background_color: '#ffffff',
-  //       display: 'standalone',
-  //       orientation: 'portrait',
-  //       scope: '/',
-  //       start_url: '/',
-  //       icons: [
-  //         {
-  //           src: 'icon-192x192.png',
-  //           sizes: '192x192',
-  //           type: 'image/png'
-  //         },
-  //         {
-  //           src: 'icon-512x512.png',
-  //           sizes: '512x512',
-  //           type: 'image/png'
-  //         },
-  //         {
-  //           src: 'icon-512x512.png',
-  //           sizes: '512x512',
-  //           type: 'image/png',
-  //           purpose: 'any maskable'
-  //         }
-  //       ]
-  //     }
-  //   }
-  // ], 
-  "@nuxtjs/device"],
-  css: [
-  ],
+  modules: ["vuetify-nuxt-module", "@vueuse/motion/nuxt"],
+  css: ["~/assets/scss/main.scss"],
   app: {
     head: {
       titleTemplate: "%s • MonacoUSA Portal",
@@ -99,6 +46,11 @@ export default defineNuxtConfig({
       wasm: true
     }
   },
+  vite: {
+    optimizeDeps: {
+      exclude: ['sharp']
+    }
+  },
   runtimeConfig: {
     // Server-side configuration
     keycloak: {
@@ -136,6 +88,70 @@ export default defineNuxtConfig({
       appName: "MonacoUSA Portal",
       domain: process.env.NUXT_PUBLIC_DOMAIN || "https://portal.monacousa.org",
       keycloakIssuer: process.env.NUXT_KEYCLOAK_ISSUER || "https://auth.monacousa.org/realms/monacousa",
+      motion: {
+        directives: {
+          'pop-bottom': {
+            initial: {
+              scale: 0,
+              opacity: 0,
+              y: 100
+            },
+            visible: {
+              scale: 1,
+              opacity: 1,
+              y: 0,
+              transition: {
+                type: 'spring',
+                stiffness: 250,
+                damping: 25
+              }
+            }
+          },
+          'fade-in': {
+            initial: {
+              opacity: 0
+            },
+            enter: {
+              opacity: 1,
+              transition: {
+                duration: 600
+              }
+            }
+          },
+          'slide-up': {
+            initial: {
+              y: 100,
+              opacity: 0
+            },
+            enter: {
+              y: 0,
+              opacity: 1,
+              transition: {
+                type: 'spring',
+                stiffness: 100,
+                damping: 20
+              }
+            }
+          },
+          'glass-fade': {
+            initial: {
+              opacity: 0,
+              scale: 0.95,
+              filter: 'blur(10px)'
+            },
+            enter: {
+              opacity: 1,
+              scale: 1,
+              filter: 'blur(0px)',
+              transition: {
+                duration: 500,
+                type: 'spring',
+                stiffness: 200
+              }
+            }
+          }
+        }
+      }
     },
   },
   vuetify: {
@@ -144,16 +160,149 @@ export default defineNuxtConfig({
         defaultTheme: "monacousa",
         themes: {
           monacousa: {
+            dark: false,
             colors: {
-              primary: "#a31515",
-              secondary: "#ffffff",
-              accent: "#f5f5f5",
-              error: "#ff5252",
-              warning: "#ff9800",
-              info: "#2196f3",
-              success: "#4caf50",
+              // Refined Monaco Red Spectrum
+              primary: "#dc2626",         // Professional primary
+              'primary-50': "#fef2f2",
+              'primary-100': "#fee2e2",
+              'primary-200': "#fecaca",
+              'primary-300': "#fca5a5",
+              'primary-400': "#f87171",
+              'primary-500': "#ef4444",
+              'primary-600': "#dc2626",   // Primary Brand Color
+              'primary-700': "#b91c1c",
+              'primary-800': "#991b1b",
+              'primary-900': "#7f1d1d",
+              
+              // Improved Neutral Palette
+              secondary: "#64748b",        // Neutral gray for secondary
+              accent: "#dc2626",          // Monaco red as accent
+              background: "#fafafa",      // Light gray background
+              surface: "#ffffff",         // Pure white surfaces
+              'on-background': "#1f2937", // Darker text on background
+              'on-surface': "#1f2937",    // Darker text on surface
+              
+              // Semantic Colors - More Professional
+              error: "#dc2626",
+              warning: "#f59e0b",
+              info: "#3b82f6",
+              success: "#22c55e",
+              
+              // Custom Properties for Glass Effects
+              'glass-bg': "rgba(255, 255, 255, 0.85)",
+              'glass-border': "rgba(255, 255, 255, 0.18)",
+              'glass-dark': "rgba(17, 24, 39, 0.6)",
+            },
+            variables: {
+              'border-color': '#e5e7eb',
+              'border-opacity': 0.08,
+              'high-emphasis-opacity': 0.95,
+              'medium-emphasis-opacity': 0.70,
+              'disabled-opacity': 0.45,
+              'idle-opacity': 0.02,
+              'hover-opacity': 0.04,
+              'focus-opacity': 0.08,
+              'selected-opacity': 0.08,
+              'activated-opacity': 0.10,
+              'pressed-opacity': 0.12,
+              'dragged-opacity': 0.06,
+              'shadow-glass': '0 8px 32px rgba(31, 41, 55, 0.08)',
+              'shadow-monaco': '0 10px 40px rgba(185, 28, 28, 0.1)',
+              'shadow-elevated': '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
             },
           },
+          monacousa_dark: {
+            dark: true,
+            colors: {
+              // Dark theme aligned with design system
+              primary: "#ef4444",         // Brighter red for dark mode
+              'primary-600': "#dc2626",
+              'primary-700': "#b91c1c",
+              
+              secondary: "#fafafa",
+              accent: "#3f3f46",
+              background: "#18181b",      // gray-900
+              surface: "#27272a",         // gray-800
+              'on-background': "#fafafa",
+              'on-surface': "#f4f4f5",
+              
+              error: "#f87171",
+              warning: "#fbbf24",
+              info: "#38bdf8",
+              success: "#34d399",
+              
+              'glass-bg': "rgba(0, 0, 0, 0.7)",
+              'glass-border': "rgba(255, 255, 255, 0.1)",
+            },
+          },
+        },
+        variations: {
+          colors: ['primary', 'secondary', 'accent'],
+          lighten: 4,
+          darken: 4,
+        },
+      },
+      defaults: {
+        VCard: {
+          elevation: 0,
+          rounded: 'xl',
+          class: 'card-modern',
+        },
+        VBtn: {
+          elevation: 0,
+          rounded: 'lg',
+          class: 'text-none font-medium',
+          size: 'default',
+          density: 'comfortable',
+        },
+        VNavigationDrawer: {
+          elevation: 0,
+          class: 'sidebar-modern',
+        },
+        VAppBar: {
+          elevation: 0,
+          flat: true,
+          class: 'appbar-modern',
+          density: 'comfortable',
+        },
+        VTextField: {
+          variant: 'outlined',
+          rounded: 'lg',
+          density: 'comfortable',
+          class: 'input-modern',
+        },
+        VSelect: {
+          variant: 'outlined',
+          rounded: 'lg',
+          density: 'comfortable',
+          class: 'select-modern',
+        },
+        VDataTable: {
+          class: 'table-modern',
+          fixedHeader: true,
+          hover: true,
+        },
+        VChip: {
+          rounded: 'lg',
+          size: 'default',
+          class: 'chip-modern',
+        },
+        VDialog: {
+          class: 'dialog-modern',
+          maxWidth: '600',
+        },
+        VAlert: {
+          rounded: 'lg',
+          variant: 'tonal',
+          class: 'alert-modern',
+        },
+        VProgressLinear: {
+          rounded: true,
+          height: '6',
+        },
+        VProgressCircular: {
+          width: '3',
         },
       },
     },

package.json

@@ -15,26 +15,34 @@
     "@fullcalendar/interaction": "^6.1.19",
     "@fullcalendar/list": "^6.1.19",
     "@fullcalendar/vue3": "^6.1.19",
-    "@nuxt/ui": "^3.2.0",
-    "@nuxtjs/device": "^3.2.4",
+    "@headlessui/vue": "^1.7.23",
+    "@tailwindcss/forms": "^0.5.10",
     "@types/handlebars": "^4.0.40",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/nodemailer": "^6.4.17",
     "@vite-pwa/nuxt": "^0.10.8",
+    "@vueuse/core": "^13.8.0",
+    "@vueuse/motion": "^3.0.3",
+    "autoprefixer": "^10.4.21",
+    "chart.js": "^4.5.0",
     "cookie": "^0.6.0",
-    "date-fns": "^4.1.0",
-    "flag-icons": "^7.5.0",
     "formidable": "^3.5.4",
+    "framer-motion": "^12.23.12",
+    "gsap": "^3.13.0",
     "handlebars": "^4.7.8",
     "jsonwebtoken": "^9.0.2",
     "libphonenumber-js": "^1.12.10",
+    "lottie-web": "^5.13.0",
+    "lucide-vue-next": "^0.542.0",
     "mime-types": "^3.0.1",
     "minio": "^8.0.5",
     "nodemailer": "^7.0.5",
     "nuxt": "^3.15.4",
-    "sharp": "^0.34.2",
-    "systeminformation": "^5.27.7",
+    "postcss": "^8.5.6",
+    "sharp": "^0.34.3",
+    "tailwindcss": "^4.1.12",
     "vue": "latest",
+    "vue-chartjs": "^5.3.2",
     "vue-country-flag-next": "^2.3.2",
     "vue-router": "latest",
     "vuetify-nuxt-module": "^0.18.3"
@@ -43,6 +51,7 @@
     "@types/cookie": "^0.6.0",
     "@types/formidable": "^3.4.5",
     "@types/mime-types": "^3.0.1",
-    "@types/node": "^20.0.0"
+    "@types/node": "^20.0.0",
+    "sass": "^1.91.0"
   }
 }

pages/admin/dashboard-v2.vue

@@ -0,0 +1,721 @@
+<template>
+  <div class="admin-dashboard-v2">
+    <!-- Neumorphic Header -->
+    <div class="dashboard-header">
+      <h1 class="dashboard-title">System Administration</h1>
+      <p class="dashboard-subtitle">Complete platform control and management</p>
+    </div>
+
+    <!-- Stats Grid with Neumorphic Cards -->
+    <div class="stats-grid">
+      <div class="stat-card neumorphic-card" v-for="stat in stats" :key="stat.id">
+        <div class="stat-content">
+          <div class="stat-info">
+            <div class="stat-label">{{ stat.label }}</div>
+            <div class="stat-value">{{ stat.value }}</div>
+            <div class="stat-change" :class="stat.changeType">
+              <Icon :name="stat.changeIcon" class="change-icon" />
+              <span>{{ stat.changeText }}</span>
+            </div>
+          </div>
+          <div class="stat-icon-wrapper neumorphic-inset">
+            <Icon :name="stat.icon" class="stat-icon" :style="{ color: stat.color }" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main Management Sections -->
+    <div class="management-grid">
+      <!-- User Management -->
+      <div class="management-card neumorphic-card">
+        <div class="card-header">
+          <Icon name="mdi:account-group" class="header-icon" />
+          <h2>User Management</h2>
+        </div>
+        <p class="card-description">Manage user accounts, roles, and permissions</p>
+        
+        <!-- Morphing Dropdown for User Filters -->
+        <div class="morphing-select-wrapper">
+          <div class="select-trigger neumorphic-button" @click="toggleUserFilter">
+            <span>{{ selectedUserFilter }}</span>
+            <Icon name="mdi:chevron-down" class="dropdown-icon" :class="{ 'rotate': showUserFilter }" />
+          </div>
+          <Transition name="morph">
+            <div v-if="showUserFilter" class="morphing-dropdown">
+              <div 
+                v-for="option in userFilterOptions" 
+                :key="option"
+                class="dropdown-option"
+                @click="selectUserFilter(option)"
+              >
+                {{ option }}
+              </div>
+            </div>
+          </Transition>
+        </div>
+
+        <div class="action-buttons">
+          <button class="neumorphic-button primary" @click="showCreateUserDialog = true">
+            <Icon name="mdi:account-plus" />
+            Create User
+          </button>
+          <button class="neumorphic-button" @click="manageRoles">
+            <Icon name="mdi:shield-account" />
+            Manage Roles
+          </button>
+        </div>
+      </div>
+
+      <!-- System Maintenance -->
+      <div class="management-card neumorphic-card">
+        <div class="card-header">
+          <Icon name="mdi:cog" class="header-icon" />
+          <h2>System Maintenance</h2>
+        </div>
+        <p class="card-description">Backend operations and system health</p>
+
+        <!-- System Status Indicator -->
+        <div class="system-status neumorphic-inset">
+          <div class="status-indicator" :class="systemStatus.type"></div>
+          <span>{{ systemStatus.text }}</span>
+        </div>
+
+        <div class="action-buttons">
+          <button class="neumorphic-button" @click="assignMemberIds">
+            Assign Member IDs
+          </button>
+          <button class="neumorphic-button" @click="backfillEventIds">
+            Backfill Event IDs
+          </button>
+        </div>
+      </div>
+
+      <!-- Reports & Analytics -->
+      <div class="management-card neumorphic-card">
+        <div class="card-header">
+          <Icon name="mdi:chart-line" class="header-icon" />
+          <h2>Reports & Analytics</h2>
+        </div>
+        <p class="card-description">Generate insights and track metrics</p>
+
+        <!-- Report Type Dropdown -->
+        <div class="morphing-select-wrapper">
+          <div class="select-trigger neumorphic-button" @click="toggleReportType">
+            <span>{{ selectedReportType }}</span>
+            <Icon name="mdi:chevron-down" class="dropdown-icon" :class="{ 'rotate': showReportType }" />
+          </div>
+          <Transition name="morph">
+            <div v-if="showReportType" class="morphing-dropdown">
+              <div 
+                v-for="type in reportTypes" 
+                :key="type"
+                class="dropdown-option"
+                @click="selectReportType(type)"
+              >
+                {{ type }}
+              </div>
+            </div>
+          </Transition>
+        </div>
+
+        <button class="neumorphic-button primary full-width" @click="generateReport">
+          <Icon name="mdi:file-chart" />
+          Generate Report
+        </button>
+      </div>
+
+      <!-- Configuration -->
+      <div class="management-card neumorphic-card">
+        <div class="card-header">
+          <Icon name="mdi:tune" class="header-icon" />
+          <h2>Configuration</h2>
+        </div>
+        <p class="card-description">Portal settings and integrations</p>
+
+        <div class="config-grid">
+          <button class="config-button neumorphic-button" @click="showMembershipConfig = true">
+            <Icon name="mdi:card-account-details" />
+            <span>Membership</span>
+          </button>
+          <button class="config-button neumorphic-button" @click="showRecaptchaConfig = true">
+            <Icon name="mdi:robot" />
+            <span>reCAPTCHA</span>
+          </button>
+          <button class="config-button neumorphic-button" @click="openEmailConfig">
+            <Icon name="mdi:email" />
+            <span>Email</span>
+          </button>
+          <button class="config-button neumorphic-button" @click="showNocoDBSettings = true">
+            <Icon name="mdi:database" />
+            <span>Database</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Activity Feed -->
+    <div class="activity-section neumorphic-card">
+      <div class="card-header">
+        <Icon name="mdi:timeline" class="header-icon" />
+        <h2>Recent Activity</h2>
+        <button class="neumorphic-button small" @click="refreshActivity">
+          <Icon name="mdi:refresh" />
+        </button>
+      </div>
+      
+      <div class="activity-list">
+        <div v-for="activity in recentActivity" :key="activity.id" class="activity-item neumorphic-inset">
+          <Icon :name="activity.icon" class="activity-icon" :style="{ color: activity.color }" />
+          <div class="activity-content">
+            <p class="activity-text">{{ activity.text }}</p>
+            <span class="activity-time">{{ activity.time }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+
+// Define page meta
+definePageMeta({
+  layout: 'admin',
+  middleware: 'auth'
+})
+
+// Stats data
+const stats = ref([
+  {
+    id: 1,
+    label: 'Total Members',
+    value: '1,247',
+    changeType: 'positive',
+    changeIcon: 'mdi:trending-up',
+    changeText: '+12% this month',
+    icon: 'mdi:account-group',
+    color: '#CC0000'
+  },
+  {
+    id: 2,
+    label: 'Active Sessions',
+    value: '342',
+    changeType: 'neutral',
+    changeIcon: 'mdi:circle',
+    changeText: 'Live now',
+    icon: 'mdi:monitor-dashboard',
+    color: '#10B981'
+  },
+  {
+    id: 3,
+    label: 'Revenue MTD',
+    value: '$48,392',
+    changeType: 'positive',
+    changeIcon: 'mdi:trending-up',
+    changeText: '+8% vs last month',
+    icon: 'mdi:currency-usd',
+    color: '#3B82F6'
+  },
+  {
+    id: 4,
+    label: 'System Health',
+    value: '98.5%',
+    changeType: 'positive',
+    changeIcon: 'mdi:check-circle',
+    changeText: 'All systems operational',
+    icon: 'mdi:shield-check',
+    color: '#10B981'
+  }
+])
+
+// Dropdown states
+const showUserFilter = ref(false)
+const selectedUserFilter = ref('All Users')
+const userFilterOptions = ref(['All Users', 'Active Users', 'Inactive Users', 'Admins', 'Members'])
+
+const showReportType = ref(false)
+const selectedReportType = ref('Financial Report')
+const reportTypes = ref(['Financial Report', 'Member Report', 'Activity Report', 'Usage Report'])
+
+// System status
+const systemStatus = ref({
+  type: 'healthy',
+  text: 'All systems operational'
+})
+
+// Recent activity
+const recentActivity = ref([
+  {
+    id: 1,
+    icon: 'mdi:account-plus',
+    text: 'New member registration: John Doe',
+    time: '2 minutes ago',
+    color: '#10B981'
+  },
+  {
+    id: 2,
+    icon: 'mdi:credit-card',
+    text: 'Payment received from Jane Smith',
+    time: '15 minutes ago',
+    color: '#3B82F6'
+  },
+  {
+    id: 3,
+    icon: 'mdi:calendar-check',
+    text: 'Event created: Annual Gala 2024',
+    time: '1 hour ago',
+    color: '#F59E0B'
+  },
+  {
+    id: 4,
+    icon: 'mdi:account-edit',
+    text: 'Profile updated: Mike Johnson',
+    time: '3 hours ago',
+    color: '#6B7280'
+  }
+])
+
+// Dialog states
+const showCreateUserDialog = ref(false)
+const showMembershipConfig = ref(false)
+const showRecaptchaConfig = ref(false)
+const showNocoDBSettings = ref(false)
+
+// Methods
+const toggleUserFilter = () => {
+  showUserFilter.value = !showUserFilter.value
+  showReportType.value = false
+}
+
+const selectUserFilter = (option) => {
+  selectedUserFilter.value = option
+  showUserFilter.value = false
+}
+
+const toggleReportType = () => {
+  showReportType.value = !showReportType.value
+  showUserFilter.value = false
+}
+
+const selectReportType = (type) => {
+  selectedReportType.value = type
+  showReportType.value = false
+}
+
+const manageRoles = () => {
+  console.log('Managing roles...')
+}
+
+const assignMemberIds = () => {
+  console.log('Assigning member IDs...')
+}
+
+const backfillEventIds = () => {
+  console.log('Backfilling event IDs...')
+}
+
+const generateReport = () => {
+  console.log('Generating report:', selectedReportType.value)
+}
+
+const openEmailConfig = () => {
+  console.log('Opening email configuration...')
+}
+
+const refreshActivity = () => {
+  console.log('Refreshing activity...')
+}
+
+onMounted(() => {
+  // Close dropdowns when clicking outside
+  document.addEventListener('click', (e) => {
+    if (!e.target.closest('.morphing-select-wrapper')) {
+      showUserFilter.value = false
+      showReportType.value = false
+    }
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/design-system-v2.scss';
+
+.admin-dashboard-v2 {
+  padding: 2rem;
+  background: linear-gradient(135deg, $neutral-50 0%, $neutral-100 100%);
+  min-height: 100vh;
+}
+
+// Header
+.dashboard-header {
+  text-align: center;
+  margin-bottom: 3rem;
+  
+  .dashboard-title {
+    font-size: $text-4xl;
+    font-weight: $font-bold;
+    color: $neutral-800;
+    margin-bottom: 0.5rem;
+    background: linear-gradient(135deg, $primary-600, $primary-800);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+  
+  .dashboard-subtitle {
+    color: $neutral-600;
+    font-size: $text-lg;
+  }
+}
+
+// Stats Grid
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 3rem;
+}
+
+.stat-card {
+  @include neumorphic-card('md');
+  padding: 1.5rem;
+  transition: all $transition-base;
+  
+  &:hover {
+    @include neumorphic-card('lg');
+    transform: translateY(-2px);
+  }
+  
+  .stat-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .stat-info {
+    flex: 1;
+  }
+  
+  .stat-label {
+    color: $neutral-600;
+    font-size: $text-sm;
+    margin-bottom: 0.5rem;
+  }
+  
+  .stat-value {
+    font-size: $text-3xl;
+    font-weight: $font-bold;
+    color: $neutral-800;
+    margin-bottom: 0.5rem;
+  }
+  
+  .stat-change {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: $text-sm;
+    
+    &.positive {
+      color: $success-500;
+    }
+    
+    &.neutral {
+      color: $neutral-600;
+    }
+    
+    .change-icon {
+      width: 14px;
+      height: 14px;
+    }
+  }
+  
+  .stat-icon-wrapper {
+    width: 60px;
+    height: 60px;
+    border-radius: $radius-xl;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: $shadow-inset-sm;
+    
+    .stat-icon {
+      width: 28px;
+      height: 28px;
+    }
+  }
+}
+
+// Management Grid
+.management-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+.management-card {
+  @include neumorphic-card('md');
+  padding: 2rem;
+  
+  .card-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+    
+    .header-icon {
+      width: 24px;
+      height: 24px;
+      color: $primary-600;
+    }
+    
+    h2 {
+      font-size: $text-xl;
+      font-weight: $font-semibold;
+      color: $neutral-800;
+    }
+  }
+  
+  .card-description {
+    color: $neutral-600;
+    margin-bottom: 1.5rem;
+    font-size: $text-sm;
+  }
+  
+  .action-buttons {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+  
+  .config-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+  }
+  
+  .config-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem;
+    font-size: $text-sm;
+    
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+
+// Morphing Dropdown
+.morphing-select-wrapper {
+  position: relative;
+  margin-bottom: 1.5rem;
+  
+  .select-trigger {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    
+    .dropdown-icon {
+      transition: transform 0.3s $spring-smooth;
+      
+      &.rotate {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+
+.morphing-dropdown {
+  @include morphing-dropdown();
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  right: 0;
+  z-index: $z-dropdown;
+  
+  .dropdown-option {
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    transition: all $transition-fast;
+    color: $neutral-700;
+    
+    &:hover {
+      background: rgba($blue-500, 0.1);
+      color: $blue-600;
+      padding-left: 1.25rem;
+    }
+  }
+}
+
+// Neumorphic Elements
+.neumorphic-card {
+  background: linear-gradient(145deg, #ffffff, #f0f0f0);
+  border-radius: $radius-xl;
+  box-shadow: $shadow-soft-md;
+}
+
+.neumorphic-button {
+  @include neumorphic-button();
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: $radius-lg;
+  font-weight: $font-medium;
+  color: $neutral-700;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  
+  &.primary {
+    background: linear-gradient(145deg, $primary-600, $primary-700);
+    color: white;
+    
+    &:hover {
+      background: linear-gradient(145deg, $primary-700, $primary-800);
+    }
+  }
+  
+  &.small {
+    padding: 0.5rem 0.75rem;
+    font-size: $text-sm;
+  }
+  
+  &.full-width {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.neumorphic-inset {
+  box-shadow: $shadow-inset-sm;
+  background: linear-gradient(145deg, #e6e6e6, #ffffff);
+}
+
+// System Status
+.system-status {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-radius: $radius-lg;
+  margin-bottom: 1.5rem;
+  
+  .status-indicator {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    animation: pulse 2s infinite;
+    
+    &.healthy {
+      background-color: $success-500;
+    }
+    
+    &.warning {
+      background-color: $warning-500;
+    }
+    
+    &.error {
+      background-color: $error-500;
+    }
+  }
+}
+
+// Activity Section
+.activity-section {
+  @include neumorphic-card('lg');
+  padding: 2rem;
+  
+  .card-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+    
+    h2 {
+      flex: 1;
+    }
+  }
+  
+  .activity-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  .activity-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+    border-radius: $radius-lg;
+    
+    .activity-icon {
+      width: 20px;
+      height: 20px;
+      flex-shrink: 0;
+    }
+    
+    .activity-content {
+      flex: 1;
+      
+      .activity-text {
+        color: $neutral-800;
+        font-size: $text-sm;
+        margin-bottom: 0.25rem;
+      }
+      
+      .activity-time {
+        color: $neutral-500;
+        font-size: $text-xs;
+      }
+    }
+  }
+}
+
+// Transitions
+.morph-enter-active,
+.morph-leave-active {
+  transition: all 0.3s $spring-smooth;
+}
+
+.morph-enter-from {
+  opacity: 0;
+  transform: scale(0.95) translateY(-10px);
+}
+
+.morph-leave-to {
+  opacity: 0;
+  transform: scale(0.95) translateY(-10px);
+}
+
+// Responsive
+@include responsive($breakpoint-md) {
+  .admin-dashboard-v2 {
+    padding: 3rem;
+  }
+}
+
+@include responsive($breakpoint-lg) {
+  .stats-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  
+  .management-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>

pages/admin/events/index.vue

@@ -0,0 +1,552 @@
+<template>
+  <v-container fluid>
+    <!-- Header -->
+    <v-row class="mb-6">
+      <v-col>
+        <h1 class="text-h3 font-weight-bold mb-2">Event Management</h1>
+        <p class="text-body-1 text-medium-emphasis">Create and manage association events</p>
+      </v-col>
+      <v-col cols="auto">
+        <v-btn
+          color="primary"
+          variant="flat"
+          prepend-icon="mdi-calendar-plus"
+          @click="showCreateDialog = true"
+        >
+          Create Event
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <!-- Stats Cards -->
+    <v-row class="mb-6">
+      <v-col cols="12" md="3">
+        <v-card elevation="2">
+          <v-card-text>
+            <div class="d-flex align-center justify-space-between">
+              <div>
+                <div class="text-h4 font-weight-bold">{{ stats.upcoming }}</div>
+                <div class="text-body-2 text-medium-emphasis">Upcoming Events</div>
+              </div>
+              <v-icon size="32" color="primary">mdi-calendar-clock</v-icon>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="3">
+        <v-card elevation="2">
+          <v-card-text>
+            <div class="d-flex align-center justify-space-between">
+              <div>
+                <div class="text-h4 font-weight-bold">{{ stats.totalRegistrations }}</div>
+                <div class="text-body-2 text-medium-emphasis">Total Registrations</div>
+              </div>
+              <v-icon size="32" color="success">mdi-account-check</v-icon>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="3">
+        <v-card elevation="2">
+          <v-card-text>
+            <div class="d-flex align-center justify-space-between">
+              <div>
+                <div class="text-h4 font-weight-bold">${{ stats.revenue }}</div>
+                <div class="text-body-2 text-medium-emphasis">Total Revenue</div>
+              </div>
+              <v-icon size="32" color="warning">mdi-cash</v-icon>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="3">
+        <v-card elevation="2">
+          <v-card-text>
+            <div class="d-flex align-center justify-space-between">
+              <div>
+                <div class="text-h4 font-weight-bold">{{ stats.avgAttendance }}%</div>
+                <div class="text-body-2 text-medium-emphasis">Avg Attendance</div>
+              </div>
+              <v-icon size="32" color="info">mdi-chart-line</v-icon>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Filters -->
+    <v-card class="mb-6" elevation="0">
+      <v-card-text>
+        <v-row>
+          <v-col cols="12" md="3">
+            <v-text-field
+              v-model="searchQuery"
+              label="Search events"
+              prepend-inner-icon="mdi-magnify"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="3">
+            <v-select
+              v-model="statusFilter"
+              label="Status"
+              :items="statusOptions"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="3">
+            <v-select
+              v-model="typeFilter"
+              label="Event Type"
+              :items="typeOptions"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="3">
+            <v-select
+              v-model="dateRange"
+              label="Date Range"
+              :items="dateRangeOptions"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+
+    <!-- Events List -->
+    <v-card elevation="2">
+      <v-data-table
+        :headers="headers"
+        :items="filteredEvents"
+        :search="searchQuery"
+        :loading="loading"
+        class="elevation-0"
+        hover
+      >
+        <template v-slot:item.title="{ item }">
+          <div class="py-2">
+            <div class="font-weight-medium">{{ item.title }}</div>
+            <div class="text-caption text-medium-emphasis">{{ item.type }}</div>
+          </div>
+        </template>
+
+        <template v-slot:item.date="{ item }">
+          <div>
+            <div class="text-body-2">{{ formatDate(item.date) }}</div>
+            <div class="text-caption text-medium-emphasis">{{ item.time }}</div>
+          </div>
+        </template>
+
+        <template v-slot:item.registrations="{ item }">
+          <div class="d-flex align-center">
+            <v-progress-linear
+              :model-value="(item.registrations / item.capacity) * 100"
+              :color="getCapacityColor(item.registrations, item.capacity)"
+              height="6"
+              rounded
+              class="mr-2"
+              style="min-width: 60px"
+            />
+            <span class="text-body-2">
+              {{ item.registrations }}/{{ item.capacity }}
+            </span>
+          </div>
+        </template>
+
+        <template v-slot:item.status="{ item }">
+          <v-chip
+            :color="getStatusColor(item.status)"
+            size="small"
+            variant="tonal"
+          >
+            {{ item.status }}
+          </v-chip>
+        </template>
+
+        <template v-slot:item.actions="{ item }">
+          <v-btn
+            icon="mdi-eye"
+            size="small"
+            variant="text"
+            @click="viewEvent(item)"
+          />
+          <v-btn
+            icon="mdi-pencil"
+            size="small"
+            variant="text"
+            @click="editEvent(item)"
+          />
+          <v-btn
+            icon="mdi-dots-vertical"
+            size="small"
+            variant="text"
+          >
+            <v-menu activator="parent">
+              <v-list density="compact">
+                <v-list-item @click="duplicateEvent(item)">
+                  <v-list-item-title>
+                    <v-icon size="small" class="mr-2">mdi-content-copy</v-icon>
+                    Duplicate
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="viewAttendees(item)">
+                  <v-list-item-title>
+                    <v-icon size="small" class="mr-2">mdi-account-group</v-icon>
+                    View Attendees
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="exportEvent(item)">
+                  <v-list-item-title>
+                    <v-icon size="small" class="mr-2">mdi-download</v-icon>
+                    Export Data
+                  </v-list-item-title>
+                </v-list-item>
+                <v-divider />
+                <v-list-item 
+                  @click="cancelEvent(item)"
+                  class="text-error"
+                  :disabled="item.status === 'cancelled'"
+                >
+                  <v-list-item-title>
+                    <v-icon size="small" class="mr-2">mdi-cancel</v-icon>
+                    Cancel Event
+                  </v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </v-btn>
+        </template>
+      </v-data-table>
+    </v-card>
+
+    <!-- Create/Edit Event Dialog -->
+    <v-dialog v-model="showCreateDialog" max-width="800">
+      <v-card>
+        <v-card-title>
+          {{ editingEvent ? 'Edit Event' : 'Create New Event' }}
+        </v-card-title>
+        <v-card-text>
+          <v-form ref="eventForm">
+            <v-row>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="eventForm.title"
+                  label="Event Title"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-textarea
+                  v-model="eventForm.description"
+                  label="Description"
+                  variant="outlined"
+                  rows="3"
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-select
+                  v-model="eventForm.type"
+                  label="Event Type"
+                  :items="typeOptions"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="eventForm.location"
+                  label="Location"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-text-field
+                  v-model="eventForm.date"
+                  label="Date"
+                  type="date"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-text-field
+                  v-model="eventForm.time"
+                  label="Time"
+                  type="time"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-text-field
+                  v-model="eventForm.duration"
+                  label="Duration (hours)"
+                  type="number"
+                  variant="outlined"
+                />
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-text-field
+                  v-model="eventForm.capacity"
+                  label="Capacity"
+                  type="number"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-text-field
+                  v-model="eventForm.price"
+                  label="Price"
+                  prefix="$"
+                  type="number"
+                  variant="outlined"
+                />
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-select
+                  v-model="eventForm.registrationType"
+                  label="Registration"
+                  :items="['Open', 'Members Only', 'Invite Only']"
+                  variant="outlined"
+                />
+              </v-col>
+            </v-row>
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="showCreateDialog = false">Cancel</v-btn>
+          <v-btn color="primary" variant="flat" @click="saveEvent">
+            {{ editingEvent ? 'Update' : 'Create' }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'admin',
+  middleware: 'admin'
+});
+
+// State
+const loading = ref(false);
+const showCreateDialog = ref(false);
+const editingEvent = ref(null);
+const searchQuery = ref('');
+const statusFilter = ref(null);
+const typeFilter = ref(null);
+const dateRange = ref(null);
+
+// Stats
+const stats = ref({
+  upcoming: 8,
+  totalRegistrations: 342,
+  revenue: 15420,
+  avgAttendance: 78
+});
+
+// Form data
+const eventForm = ref({
+  title: '',
+  description: '',
+  type: '',
+  location: '',
+  date: '',
+  time: '',
+  duration: 2,
+  capacity: 50,
+  price: 0,
+  registrationType: 'Open'
+});
+
+// Options
+const statusOptions = [
+  'Upcoming',
+  'Ongoing',
+  'Completed',
+  'Cancelled'
+];
+
+const typeOptions = [
+  'Conference',
+  'Workshop',
+  'Networking',
+  'Social',
+  'Fundraiser',
+  'Meeting'
+];
+
+const dateRangeOptions = [
+  'This Week',
+  'This Month',
+  'Next Month',
+  'This Quarter',
+  'This Year'
+];
+
+// Table configuration
+const headers = [
+  { title: 'Event', key: 'title', sortable: true },
+  { title: 'Date & Time', key: 'date', sortable: true },
+  { title: 'Location', key: 'location', sortable: true },
+  { title: 'Registrations', key: 'registrations', sortable: true },
+  { title: 'Status', key: 'status', sortable: true },
+  { title: 'Actions', key: 'actions', sortable: false, align: 'end' }
+];
+
+// Mock data
+const events = ref([
+  {
+    id: 1,
+    title: 'Annual Gala Dinner',
+    type: 'Fundraiser',
+    date: new Date('2024-02-15'),
+    time: '19:00',
+    location: 'Grand Ballroom',
+    registrations: 145,
+    capacity: 200,
+    status: 'Upcoming',
+    price: 250
+  },
+  {
+    id: 2,
+    title: 'Business Networking Event',
+    type: 'Networking',
+    date: new Date('2024-01-22'),
+    time: '18:00',
+    location: 'Conference Center',
+    registrations: 48,
+    capacity: 50,
+    status: 'Upcoming',
+    price: 0
+  },
+  {
+    id: 3,
+    title: 'Digital Marketing Workshop',
+    type: 'Workshop',
+    date: new Date('2024-01-10'),
+    time: '14:00',
+    location: 'Training Room A',
+    registrations: 22,
+    capacity: 30,
+    status: 'Completed',
+    price: 75
+  },
+  {
+    id: 4,
+    title: 'Board Meeting',
+    type: 'Meeting',
+    date: new Date('2024-01-05'),
+    time: '10:00',
+    location: 'Board Room',
+    registrations: 12,
+    capacity: 15,
+    status: 'Completed',
+    price: 0
+  }
+]);
+
+// Computed
+const filteredEvents = computed(() => {
+  let filtered = [...events.value];
+  
+  if (statusFilter.value) {
+    filtered = filtered.filter(e => e.status === statusFilter.value);
+  }
+  
+  if (typeFilter.value) {
+    filtered = filtered.filter(e => e.type === typeFilter.value);
+  }
+  
+  return filtered;
+});
+
+// Methods
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'Upcoming': return 'info';
+    case 'Ongoing': return 'success';
+    case 'Completed': return 'default';
+    case 'Cancelled': return 'error';
+    default: return 'default';
+  }
+};
+
+const getCapacityColor = (registrations: number, capacity: number) => {
+  const percentage = (registrations / capacity) * 100;
+  if (percentage >= 90) return 'error';
+  if (percentage >= 70) return 'warning';
+  return 'success';
+};
+
+const formatDate = (date: Date) => {
+  return new Date(date).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  });
+};
+
+const viewEvent = (event: any) => {
+  console.log('View event:', event);
+};
+
+const editEvent = (event: any) => {
+  editingEvent.value = event;
+  eventForm.value = {
+    title: event.title,
+    description: '',
+    type: event.type,
+    location: event.location,
+    date: event.date.toISOString().split('T')[0],
+    time: event.time,
+    duration: 2,
+    capacity: event.capacity,
+    price: event.price,
+    registrationType: 'Open'
+  };
+  showCreateDialog.value = true;
+};
+
+const duplicateEvent = (event: any) => {
+  console.log('Duplicate event:', event);
+};
+
+const viewAttendees = (event: any) => {
+  console.log('View attendees:', event);
+};
+
+const exportEvent = (event: any) => {
+  console.log('Export event:', event);
+};
+
+const cancelEvent = (event: any) => {
+  console.log('Cancel event:', event);
+  event.status = 'Cancelled';
+};
+
+const saveEvent = () => {
+  console.log('Save event:', eventForm.value);
+  showCreateDialog.value = false;
+  editingEvent.value = null;
+};
+</script>

pages/admin/members-refined.vue

@@ -0,0 +1,996 @@
+<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>

pages/admin/members/index.vue

@@ -0,0 +1,800 @@
+<template>
+  <v-container fluid>
+    <!-- Header -->
+    <v-row class="mb-6">
+      <v-col>
+        <h1 class="text-h3 font-weight-bold mb-2">Member Management</h1>
+        <p class="text-body-1 text-medium-emphasis">Manage association members and their information</p>
+      </v-col>
+      <v-col cols="auto" class="d-flex align-center gap-2">
+        <!-- View Toggle -->
+        <v-btn-toggle
+          v-model="viewMode"
+          mandatory
+          density="comfortable"
+          color="primary"
+        >
+          <v-btn icon value="list">
+            <v-icon>mdi-view-list</v-icon>
+            <v-tooltip activator="parent" location="bottom">List View</v-tooltip>
+          </v-btn>
+          <v-btn icon value="grid">
+            <v-icon>mdi-view-grid</v-icon>
+            <v-tooltip activator="parent" location="bottom">Grid View</v-tooltip>
+          </v-btn>
+        </v-btn-toggle>
+        
+        <v-btn
+          color="primary"
+          variant="flat"
+          prepend-icon="mdi-account-plus"
+          @click="showCreateDialog = true"
+        >
+          Add Member
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <!-- Stats Cards -->
+    <v-row class="mb-6">
+      <v-col cols="12" md="3">
+        <v-card elevation="2">
+          <v-card-text>
+            <div class="d-flex align-center justify-space-between">
+              <div>
+                <div class="text-h4 font-weight-bold">{{ stats.total }}</div>
+                <div class="text-body-2 text-medium-emphasis">Total Members</div>
+              </div>
+              <v-icon size="32" color="primary">mdi-account-group</v-icon>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="3">
+        <v-card elevation="2">
+          <v-card-text>
+            <div class="d-flex align-center justify-space-between">
+              <div>
+                <div class="text-h4 font-weight-bold">{{ stats.active }}</div>
+                <div class="text-body-2 text-medium-emphasis">Active Members</div>
+              </div>
+              <v-icon size="32" color="success">mdi-account-check</v-icon>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="3">
+        <v-card elevation="2">
+          <v-card-text>
+            <div class="d-flex align-center justify-space-between">
+              <div>
+                <div class="text-h4 font-weight-bold text-success">{{ stats.paidThisYear }}</div>
+                <div class="text-body-2 text-medium-emphasis">Dues Paid This Year</div>
+              </div>
+              <v-icon size="32" color="success">mdi-cash-check</v-icon>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="3">
+        <v-card elevation="2">
+          <v-card-text>
+            <div class="d-flex align-center justify-space-between">
+              <div>
+                <div class="text-h4 font-weight-bold text-warning">{{ stats.duesOutstanding }}</div>
+                <div class="text-body-2 text-medium-emphasis">Dues Outstanding</div>
+              </div>
+              <v-icon size="32" color="warning">mdi-clock-alert-outline</v-icon>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Filters -->
+    <v-card class="mb-6" elevation="0">
+      <v-card-text>
+        <v-row>
+          <v-col cols="12" md="3">
+            <v-text-field
+              v-model="searchQuery"
+              label="Search members"
+              prepend-inner-icon="mdi-magnify"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="2">
+            <v-select
+              v-model="statusFilter"
+              label="Status"
+              :items="statusOptions"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="2">
+            <v-select
+              v-model="membershipFilter"
+              label="Membership Type"
+              :items="membershipOptions"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="2">
+            <v-select
+              v-model="duesFilter"
+              label="Dues Status"
+              :items="['Paid', 'Unpaid', 'Overdue']"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="3">
+            <v-btn
+              variant="outlined"
+              color="primary"
+              block
+              @click="exportMembers"
+            >
+              <v-icon start>mdi-download</v-icon>
+              Export List
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+
+    <!-- List View -->
+    <v-card v-if="viewMode === 'list'" elevation="2">
+      <v-data-table
+        :headers="enhancedHeaders"
+        :items="filteredMembers"
+        :search="searchQuery"
+        :loading="loading"
+        class="elevation-0 member-list-table"
+        hover
+        :items-per-page="10"
+        @click:row="(e, { item }) => viewMember(item)"
+      >
+        <template v-slot:item.name="{ item }">
+          <div class="d-flex align-center py-2 cursor-pointer">
+            <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 ? `ID: ${item.member_id}` : 'ID Pending' }}</div>
+            </div>
+          </div>
+        </template>
+
+        <template v-slot:item.email="{ item }">
+          <a :href="`mailto:${item.email}`" class="text-primary text-decoration-none" @click.stop>
+            {{ item.email }}
+          </a>
+        </template>
+
+        <template v-slot:item.nationality="{ item }">
+          <div class="d-flex align-center">
+            <MultipleCountryFlags
+              :nationality="item.nationality"
+              :show-name="true"
+              size="small"
+              fallback-text="Not specified"
+            />
+          </div>
+        </template>
+
+        <template v-slot:item.dues_paid="{ item }">
+          <v-chip
+            :color="item.dues_paid_this_year ? 'success' : 'warning'"
+            size="small"
+            variant="flat"
+          >
+            {{ item.dues_paid_this_year ? 'Yes' : 'No' }}
+          </v-chip>
+        </template>
+
+        <template v-slot:item.actions="{ item }">
+          <div class="d-flex align-center gap-1">
+            <v-btn
+              v-if="!item.dues_paid_this_year"
+              color="success"
+              size="small"
+              variant="tonal"
+              @click.stop="markDuesPaid(item)"
+            >
+              <v-icon start size="16">mdi-check</v-icon>
+              Mark Paid
+            </v-btn>
+            <v-btn
+              icon="mdi-eye"
+              size="small"
+              variant="text"
+              @click.stop="viewMember(item)"
+            >
+              <v-tooltip activator="parent" location="top">View Details</v-tooltip>
+            </v-btn>
+            <v-btn
+              icon="mdi-pencil"
+              size="small"
+              variant="text"
+              @click.stop="editMember(item)"
+            >
+              <v-tooltip activator="parent" location="top">Edit Member</v-tooltip>
+            </v-btn>
+            <v-btn
+              icon="mdi-email"
+              size="small"
+              variant="text"
+              @click.stop="sendEmail(item)"
+            >
+              <v-tooltip activator="parent" location="top">Send Email</v-tooltip>
+            </v-btn>
+            <v-btn
+              icon="mdi-dots-vertical"
+              size="small"
+              variant="text"
+              @click.stop
+            >
+              <v-menu activator="parent">
+                <v-list density="compact">
+                  <v-list-item @click="viewPaymentHistory(item)">
+                    <v-list-item-title>
+                      <v-icon size="small" class="mr-2">mdi-history</v-icon>
+                      Payment History
+                    </v-list-item-title>
+                  </v-list-item>
+                  <v-list-item @click="generateInvoice(item)">
+                    <v-list-item-title>
+                      <v-icon size="small" class="mr-2">mdi-file-document</v-icon>
+                      Generate Invoice
+                    </v-list-item-title>
+                  </v-list-item>
+                  <v-divider />
+                  <v-list-item 
+                    @click="toggleStatus(item)"
+                    :class="item.status === 'active' ? 'text-error' : 'text-success'"
+                  >
+                    <v-list-item-title>
+                      <v-icon size="small" class="mr-2">
+                        {{ item.status === 'active' ? 'mdi-account-off' : 'mdi-account-check' }}
+                      </v-icon>
+                      {{ item.status === 'active' ? 'Deactivate' : 'Activate' }}
+                    </v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
+            </v-btn>
+          </div>
+        </template>
+      </v-data-table>
+    </v-card>
+
+    <!-- Grid View -->
+    <v-row v-else-if="viewMode === 'grid'">
+      <v-col
+        v-for="member in paginatedGridMembers"
+        :key="member.member_id"
+        cols="12"
+        sm="6"
+        md="4"
+        lg="3"
+      >
+        <v-card
+          elevation="2"
+          class="member-card h-100"
+          @click="viewMember(member)"
+        >
+          <v-card-text class="text-center pt-6 pb-4">
+            <!-- Profile Avatar -->
+            <ProfileAvatar
+              :member-id="member.member_id"
+              :first-name="member.first_name"
+              :last-name="member.last_name"
+              size="80"
+              class="mb-3 mx-auto elevation-2"
+            />
+            
+            <!-- Member Name and Nationality -->
+            <h3 class="text-h6 font-weight-bold mb-1">
+              {{ member.first_name }} {{ member.last_name }}
+            </h3>
+            
+            <div class="d-flex align-center justify-center mb-3">
+              <MultipleCountryFlags
+                :nationality="member.nationality"
+                :show-name="true"
+                size="small"
+                fallback-text="No nationality"
+                class="text-body-2 text-medium-emphasis"
+              />
+            </div>
+            
+            <!-- Email -->
+            <div class="text-body-2 text-medium-emphasis mb-3">
+              <v-icon size="small" class="mr-1">mdi-email</v-icon>
+              {{ member.email }}
+            </div>
+            
+            <!-- Status Badges -->
+            <div class="d-flex justify-center gap-2 mb-3">
+              <v-chip
+                :color="member.status === 'active' ? 'success' : 'error'"
+                size="small"
+                variant="tonal"
+              >
+                {{ member.status }}
+              </v-chip>
+              <v-chip
+                :color="member.dues_paid_this_year ? 'success' : 'warning'"
+                size="small"
+                variant="flat"
+              >
+                Dues: {{ member.dues_paid_this_year ? 'Paid' : 'Unpaid' }}
+              </v-chip>
+            </div>
+            
+            <!-- Mark as Paid Button -->
+            <v-btn
+              v-if="!member.dues_paid_this_year"
+              color="success"
+              variant="flat"
+              block
+              class="mb-2"
+              @click.stop="markDuesPaid(member)"
+            >
+              <v-icon start>mdi-cash-check</v-icon>
+              Mark Dues Paid
+            </v-btn>
+            
+            <!-- Action Buttons -->
+            <div class="d-flex justify-center gap-2">
+              <v-btn
+                icon="mdi-eye"
+                size="small"
+                variant="tonal"
+                @click.stop="viewMember(member)"
+              >
+                <v-tooltip activator="parent" location="top">View</v-tooltip>
+              </v-btn>
+              <v-btn
+                icon="mdi-pencil"
+                size="small"
+                variant="tonal"
+                @click.stop="editMember(member)"
+              >
+                <v-tooltip activator="parent" location="top">Edit</v-tooltip>
+              </v-btn>
+              <v-btn
+                icon="mdi-email"
+                size="small"
+                variant="tonal"
+                @click.stop="sendEmail(member)"
+              >
+                <v-tooltip activator="parent" location="top">Email</v-tooltip>
+              </v-btn>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Grid Pagination -->
+    <v-card v-if="viewMode === 'grid' && filteredMembers.length > gridItemsPerPage" class="mt-4">
+      <v-card-text>
+        <v-pagination
+          v-model="gridPage"
+          :length="Math.ceil(filteredMembers.length / gridItemsPerPage)"
+          :total-visible="7"
+        />
+      </v-card-text>
+    </v-card>
+
+    <!-- View Member Dialog -->
+    <ViewMemberDialog
+      v-model="showViewDialog"
+      :member="selectedMember"
+      @edit="handleEditMember"
+      @mark-dues-paid="handleMarkDuesPaid"
+    />
+
+    <!-- Edit Member Dialog -->
+    <EditMemberDialog
+      v-model="showEditDialog"
+      :member="selectedMember"
+      @member-updated="handleMemberUpdated"
+    />
+
+    <!-- Create Member Dialog -->
+    <v-dialog v-model="showCreateDialog" max-width="600">
+      <v-card>
+        <v-card-title>Add New Member</v-card-title>
+        <v-card-text>
+          <v-form ref="memberForm">
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="memberForm.first_name"
+                  label="First Name"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="memberForm.last_name"
+                  label="Last Name"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="memberForm.email"
+                  label="Email"
+                  variant="outlined"
+                  type="email"
+                  required
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-select
+                  v-model="memberForm.membership_type"
+                  label="Membership Type"
+                  :items="membershipOptions"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="memberForm.phone"
+                  label="Phone"
+                  variant="outlined"
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-select
+                  v-model="memberForm.nationality"
+                  label="Nationality"
+                  :items="countryOptions"
+                  item-title="name"
+                  item-value="code"
+                  variant="outlined"
+                />
+              </v-col>
+            </v-row>
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="showCreateDialog = false">Cancel</v-btn>
+          <v-btn color="primary" variant="flat" @click="saveMember">Create</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </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 showViewDialog = ref(false);
+const showEditDialog = ref(false);
+const showCreateDialog = ref(false);
+const selectedMember = ref<Member | null>(null);
+const searchQuery = ref('');
+const statusFilter = ref(null);
+const membershipFilter = ref(null);
+const duesFilter = ref(null);
+const viewMode = ref('list'); // 'list' or 'grid'
+const gridPage = ref(1);
+const gridItemsPerPage = 12;
+
+// Stats
+const stats = ref({
+  total: 0,
+  active: 0,
+  paidThisYear: 0,
+  duesOutstanding: 0
+});
+
+// Form data
+const memberForm = ref({
+  first_name: '',
+  last_name: '',
+  email: '',
+  membership_type: 'Standard',
+  phone: '',
+  nationality: ''
+});
+
+// Options
+const statusOptions = ['active', 'inactive'];
+const membershipOptions = ['Standard', 'Premium', 'VIP', 'Lifetime'];
+const countryOptions = countries;
+
+// Enhanced table configuration for new columns
+const enhancedHeaders = [
+  { title: 'Name', key: 'name', sortable: true },
+  { title: 'Email', key: 'email', sortable: true },
+  { title: 'Nationality', key: 'nationality', sortable: true },
+  { title: 'Dues Paid This Year', key: 'dues_paid', sortable: true },
+  { title: 'Actions', key: 'actions', sortable: false, align: 'center', width: '250' }
+];
+
+// Real data from API
+const members = ref<Member[]>([]);
+
+// Computed
+const filteredMembers = computed(() => {
+  let filtered = [...members.value];
+  
+  if (statusFilter.value) {
+    filtered = filtered.filter(m => m.status === statusFilter.value);
+  }
+  
+  if (membershipFilter.value) {
+    filtered = filtered.filter(m => m.membership_type === membershipFilter.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;
+});
+
+// Paginated grid members
+const paginatedGridMembers = computed(() => {
+  const start = (gridPage.value - 1) * gridItemsPerPage;
+  const end = start + gridItemsPerPage;
+  return filteredMembers.value.slice(start, end);
+});
+
+// Methods
+const getCountryName = (code: string) => {
+  if (!code) return null;
+  const country = countries.find(c => c.code === code);
+  return country ? country.name : code;
+};
+
+const getMembershipColor = (type: string) => {
+  switch (type) {
+    case 'VIP': return 'error';
+    case 'Premium': return 'warning';
+    case 'Lifetime': return 'purple';
+    default: return 'info';
+  }
+};
+
+const getDuesColor = (status: string) => {
+  switch (status) {
+    case 'Paid': return 'success';
+    case 'Due': return 'warning';
+    case 'Overdue': return 'error';
+    default: return 'default';
+  }
+};
+
+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',
+    day: 'numeric',
+    year: 'numeric'
+  });
+};
+
+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 {
+    // Update member dues status
+    member.dues_paid_this_year = true;
+    member.dues_status = 'Paid';
+    member.last_dues_paid = new Date().toISOString();
+    
+    // Update stats
+    stats.value.paidThisYear++;
+    stats.value.duesOutstanding--;
+    
+    // TODO: Make API call to update in database
+  } 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 or open dialog
+};
+
+const generateInvoice = (member: Member) => {
+  // TODO: Generate and download invoice
+};
+
+const toggleStatus = (member: Member) => {
+  member.status = member.status === 'active' ? 'inactive' : 'active';
+  // TODO: Make API call to update status
+};
+
+const exportMembers = () => {
+  // TODO: Export to CSV/Excel
+};
+
+const saveMember = () => {
+  showCreateDialog.value = false;
+  // TODO: Make API call to create member
+};
+
+// Load real members data from API
+const loadMembers = async () => {
+  loading.value = true;
+  try {
+    // Fetch members from API
+    const response = await $fetch('/api/members');
+    
+    // Check for both possible response structures
+    const membersList = response?.data?.list || response?.data?.members || response?.list || [];
+    
+    if (membersList && membersList.length > 0) {
+      // Transform the data to match our interface with enhanced fields
+      const currentYear = new Date().getFullYear();
+      
+      members.value = membersList.map((member: any) => {
+        // Determine if dues are paid this year (simplified logic)
+        const lastPaid = member.last_dues_paid ? new Date(member.last_dues_paid) : null;
+        const duesPaidThisYear = lastPaid && lastPaid.getFullYear() === currentYear;
+        
+        return {
+          ...member, // Keep all original fields including Id for API calls
+          member_id: member.member_id || '', // Use the actual member_id field
+          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,
+          membership_date_paid: member.membership_date_paid,
+          payment_due_date: member.payment_due_date,
+          join_date: member.member_since || member.created_at,
+          phone: member.phone_number || member.phone || ''
+        };
+      });
+      
+      // Sort by last name, then first name by default
+      members.value.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 from real data
+      const currentYearMembers = members.value.filter(m => m.dues_paid_this_year);
+      
+      stats.value = {
+        total: members.value.length,
+        active: members.value.filter(m => m.status === 'active').length,
+        paidThisYear: currentYearMembers.length,
+        duesOutstanding: members.value.length - currentYearMembers.length
+      };
+    } else {
+      members.value = [];
+      stats.value = {
+        total: 0,
+        active: 0,
+        paidThisYear: 0,
+        duesOutstanding: 0
+      };
+    }
+  } catch (error) {
+    members.value = [];
+    stats.value = {
+      total: 0,
+      active: 0,
+      paidThisYear: 0,
+      duesOutstanding: 0
+    };
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Load data on mount
+onMounted(async () => {
+  await loadMembers();
+});
+</script>
+
+<style scoped>
+.member-list-table :deep(tbody tr) {
+  cursor: pointer;
+}
+
+.member-list-table :deep(tbody tr:hover) {
+  background-color: rgba(var(--v-theme-primary), 0.04);
+}
+
+.member-card {
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.member-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>

pages/admin/payments/index.vue

@@ -0,0 +1,557 @@
+<template>
+  <v-container fluid>
+    <!-- Header -->
+    <v-row class="mb-6">
+      <v-col>
+        <h1 class="text-h3 font-weight-bold mb-2">Payment Management</h1>
+        <p class="text-body-1 text-medium-emphasis">Track and manage all payments and transactions</p>
+      </v-col>
+      <v-col cols="auto">
+        <v-btn
+          color="primary"
+          variant="flat"
+          prepend-icon="mdi-cash-plus"
+          @click="showRecordPaymentDialog = true"
+        >
+          Record Payment
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <!-- Stats Cards -->
+    <v-row class="mb-6">
+      <v-col cols="12" md="3">
+        <v-card elevation="2">
+          <v-card-text>
+            <div class="d-flex align-center justify-space-between">
+              <div>
+                <div class="text-h4 font-weight-bold">${{ stats.totalRevenue.toLocaleString() }}</div>
+                <div class="text-body-2 text-medium-emphasis">Total Revenue</div>
+              </div>
+              <v-icon size="32" color="success">mdi-cash</v-icon>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="3">
+        <v-card elevation="2">
+          <v-card-text>
+            <div class="d-flex align-center justify-space-between">
+              <div>
+                <div class="text-h4 font-weight-bold">${{ stats.pendingPayments.toLocaleString() }}</div>
+                <div class="text-body-2 text-medium-emphasis">Pending</div>
+              </div>
+              <v-icon size="32" color="warning">mdi-clock-outline</v-icon>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="3">
+        <v-card elevation="2">
+          <v-card-text>
+            <div class="d-flex align-center justify-space-between">
+              <div>
+                <div class="text-h4 font-weight-bold">{{ stats.failedTransactions }}</div>
+                <div class="text-body-2 text-medium-emphasis">Failed</div>
+              </div>
+              <v-icon size="32" color="error">mdi-alert-circle-outline</v-icon>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="3">
+        <v-card elevation="2">
+          <v-card-text>
+            <div class="d-flex align-center justify-space-between">
+              <div>
+                <div class="text-h4 font-weight-bold">{{ stats.successfulTransactions }}</div>
+                <div class="text-body-2 text-medium-emphasis">Successful</div>
+              </div>
+              <v-icon size="32" color="info">mdi-swap-horizontal</v-icon>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Filters -->
+    <v-card class="mb-6" elevation="0">
+      <v-card-text>
+        <v-row>
+          <v-col cols="12" md="3">
+            <v-text-field
+              v-model="searchQuery"
+              label="Search payments"
+              prepend-inner-icon="mdi-magnify"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="2">
+            <v-select
+              v-model="statusFilter"
+              label="Status"
+              :items="statusOptions"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="2">
+            <v-select
+              v-model="typeFilter"
+              label="Type"
+              :items="typeOptions"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="2">
+            <v-text-field
+              v-model="dateFrom"
+              label="From Date"
+              type="date"
+              variant="outlined"
+              density="compact"
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="2">
+            <v-text-field
+              v-model="dateTo"
+              label="To Date"
+              type="date"
+              variant="outlined"
+              density="compact"
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="1">
+            <v-btn
+              variant="outlined"
+              color="primary"
+              block
+              @click="exportPayments"
+            >
+              Export
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+
+    <!-- Payments Table -->
+    <v-card elevation="2">
+      <v-data-table
+        :headers="headers"
+        :items="filteredPayments"
+        :search="searchQuery"
+        :loading="loading"
+        class="elevation-0"
+        hover
+        :items-per-page="10"
+      >
+        <template v-slot:item.transaction_id="{ item }">
+          <code class="text-caption">{{ item.transaction_id }}</code>
+        </template>
+
+        <template v-slot:item.member="{ item }">
+          <div class="py-2">
+            <div class="font-weight-medium">{{ item.member_name }}</div>
+            <div class="text-caption text-medium-emphasis">{{ item.member_email }}</div>
+          </div>
+        </template>
+
+        <template v-slot:item.amount="{ item }">
+          <span class="font-weight-medium">${{ item.amount.toFixed(2) }}</span>
+        </template>
+
+        <template v-slot:item.type="{ item }">
+          <v-chip
+            :color="getTypeColor(item.type)"
+            size="small"
+            variant="tonal"
+          >
+            {{ item.type }}
+          </v-chip>
+        </template>
+
+        <template v-slot:item.status="{ item }">
+          <v-chip
+            :color="getStatusColor(item.status)"
+            size="small"
+            variant="tonal"
+          >
+            {{ item.status }}
+          </v-chip>
+        </template>
+
+        <template v-slot:item.date="{ item }">
+          <span class="text-body-2">{{ formatDate(item.date) }}</span>
+        </template>
+
+        <template v-slot:item.actions="{ item }">
+          <v-btn
+            icon="mdi-eye"
+            size="small"
+            variant="text"
+            @click="viewPayment(item)"
+          />
+          <v-btn
+            icon="mdi-dots-vertical"
+            size="small"
+            variant="text"
+          >
+            <v-menu activator="parent">
+              <v-list density="compact">
+                <v-list-item @click="viewReceipt(item)">
+                  <v-list-item-title>
+                    <v-icon size="small" class="mr-2">mdi-receipt</v-icon>
+                    View Receipt
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="sendReceipt(item)">
+                  <v-list-item-title>
+                    <v-icon size="small" class="mr-2">mdi-email</v-icon>
+                    Email Receipt
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item 
+                  @click="refundPayment(item)"
+                  :disabled="item.status !== 'Completed'"
+                >
+                  <v-list-item-title>
+                    <v-icon size="small" class="mr-2">mdi-cash-refund</v-icon>
+                    Issue Refund
+                  </v-list-item-title>
+                </v-list-item>
+                <v-divider />
+                <v-list-item 
+                  @click="markAsPaid(item)"
+                  :disabled="item.status === 'Completed'"
+                  class="text-success"
+                >
+                  <v-list-item-title>
+                    <v-icon size="small" class="mr-2">mdi-check</v-icon>
+                    Mark as Paid
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item 
+                  @click="voidPayment(item)"
+                  class="text-error"
+                  :disabled="item.status === 'Voided'"
+                >
+                  <v-list-item-title>
+                    <v-icon size="small" class="mr-2">mdi-cancel</v-icon>
+                    Void Payment
+                  </v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </v-btn>
+        </template>
+      </v-data-table>
+    </v-card>
+
+    <!-- Record Payment Dialog -->
+    <v-dialog v-model="showRecordPaymentDialog" max-width="600">
+      <v-card>
+        <v-card-title>Record Payment</v-card-title>
+        <v-card-text>
+          <v-form ref="paymentForm">
+            <v-row>
+              <v-col cols="12">
+                <v-autocomplete
+                  v-model="paymentForm.member_id"
+                  label="Member"
+                  :items="membersList"
+                  item-title="name"
+                  item-value="id"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-select
+                  v-model="paymentForm.type"
+                  label="Payment Type"
+                  :items="typeOptions"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="paymentForm.amount"
+                  label="Amount"
+                  prefix="$"
+                  type="number"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-select
+                  v-model="paymentForm.method"
+                  label="Payment Method"
+                  :items="['Credit Card', 'Check', 'Cash', 'Bank Transfer']"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="paymentForm.reference"
+                  label="Reference Number"
+                  variant="outlined"
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-textarea
+                  v-model="paymentForm.notes"
+                  label="Notes"
+                  variant="outlined"
+                  rows="2"
+                />
+              </v-col>
+            </v-row>
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="showRecordPaymentDialog = false">Cancel</v-btn>
+          <v-btn color="primary" variant="flat" @click="savePayment">Record</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'admin',
+  middleware: 'admin'
+});
+
+// State
+const loading = ref(false);
+const showRecordPaymentDialog = ref(false);
+const searchQuery = ref('');
+const statusFilter = ref(null);
+const typeFilter = ref(null);
+const dateFrom = ref('');
+const dateTo = ref('');
+
+// Stats
+const stats = ref({
+  totalRevenue: 0,
+  pendingPayments: 0,
+  successfulTransactions: 0,
+  failedTransactions: 0
+});
+
+// Form data
+const paymentForm = ref({
+  member_id: '',
+  type: '',
+  amount: 0,
+  method: '',
+  reference: '',
+  notes: ''
+});
+
+// Options
+const statusOptions = ['Completed', 'Pending', 'Failed', 'Refunded', 'Voided'];
+const typeOptions = ['Membership', 'Event', 'Donation', 'Other'];
+
+// Mock members list
+const membersList = [
+  { id: '1', name: 'John Smith' },
+  { id: '2', name: 'Sarah Johnson' },
+  { id: '3', name: 'Michael Williams' }
+];
+
+// Table configuration
+const headers = [
+  { title: 'Transaction ID', key: 'transaction_id', sortable: true },
+  { title: 'Member', key: 'member', sortable: true },
+  { title: 'Amount', key: 'amount', sortable: true },
+  { title: 'Type', key: 'type', sortable: true },
+  { title: 'Status', key: 'status', sortable: true },
+  { title: 'Date', key: 'date', sortable: true },
+  { title: 'Actions', key: 'actions', sortable: false, align: 'end' }
+];
+
+// Real dues payment data
+const payments = ref([]);
+
+// Computed
+const filteredPayments = computed(() => {
+  let filtered = [...payments.value];
+  
+  if (statusFilter.value) {
+    filtered = filtered.filter(p => p.status === statusFilter.value);
+  }
+  
+  if (typeFilter.value) {
+    filtered = filtered.filter(p => p.type === typeFilter.value);
+  }
+  
+  if (dateFrom.value) {
+    const from = new Date(dateFrom.value);
+    filtered = filtered.filter(p => new Date(p.date) >= from);
+  }
+  
+  if (dateTo.value) {
+    const to = new Date(dateTo.value);
+    filtered = filtered.filter(p => new Date(p.date) <= to);
+  }
+  
+  return filtered;
+});
+
+// Methods
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'Completed': return 'success';
+    case 'Pending': return 'warning';
+    case 'Failed': return 'error';
+    case 'Refunded': return 'info';
+    case 'Voided': return 'default';
+    default: return 'default';
+  }
+};
+
+const getTypeColor = (type: string) => {
+  switch (type) {
+    case 'Membership': return 'primary';
+    case 'Event': return 'info';
+    case 'Donation': return 'success';
+    default: return 'default';
+  }
+};
+
+const formatDate = (date: Date) => {
+  return new Date(date).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  });
+};
+
+const viewPayment = (payment: any) => {
+  console.log('View payment:', payment);
+};
+
+const viewReceipt = (payment: any) => {
+  console.log('View receipt:', payment);
+};
+
+const sendReceipt = (payment: any) => {
+  console.log('Send receipt:', payment);
+};
+
+const refundPayment = (payment: any) => {
+  console.log('Refund payment:', payment);
+};
+
+const markAsPaid = (payment: any) => {
+  payment.status = 'Completed';
+};
+
+const voidPayment = (payment: any) => {
+  payment.status = 'Voided';
+};
+
+const exportPayments = () => {
+  console.log('Export payments');
+};
+
+const savePayment = () => {
+  console.log('Save payment:', paymentForm.value);
+  showRecordPaymentDialog.value = false;
+};
+
+// Load dues payment data from members
+const loadPayments = async () => {
+  try {
+    // Fetch members from API
+    const response = await $fetch('/api/members');
+    
+    // Check for both possible response structures
+    const membersList = response?.data?.list || response?.data?.members || response?.list || [];
+    
+    if (membersList && membersList.length > 0) {
+      const paymentRecords = [];
+      let transactionCounter = 1;
+      
+      // Generate payment records from member dues data
+      for (const member of membersList) {
+        // If member has last_dues_paid, create a payment record
+        if (member.last_dues_paid) {
+          paymentRecords.push({
+            id: transactionCounter++,
+            transaction_id: `TXN-${new Date(member.last_dues_paid).getFullYear()}-${String(transactionCounter).padStart(3, '0')}`,
+            member_name: `${member.first_name} ${member.last_name}`,
+            member_email: member.email,
+            amount: member.dues_amount || 50, // Default annual dues
+            type: 'Membership Dues',
+            status: 'Completed',
+            date: new Date(member.last_dues_paid),
+            method: member.last_payment_method || 'Unknown'
+          });
+        }
+        
+        // If member has dues due/overdue, create a pending payment record
+        if (member.dues_status === 'Due' || member.dues_status === 'Overdue') {
+          const dueDate = member.payment_due_date ? new Date(member.payment_due_date) : null;
+          if (dueDate) {
+            paymentRecords.push({
+              id: transactionCounter++,
+              transaction_id: `TXN-PENDING-${String(transactionCounter).padStart(3, '0')}`,
+              member_name: `${member.first_name} ${member.last_name}`,
+              member_email: member.email,
+              amount: member.dues_amount || 50,
+              type: 'Membership Dues',
+              status: member.dues_status === 'Overdue' ? 'Overdue' : 'Pending',
+              date: dueDate,
+              method: 'Awaiting Payment'
+            });
+          }
+        }
+      }
+      
+      // Sort by date descending (most recent first)
+      paymentRecords.sort((a, b) => b.date.getTime() - a.date.getTime());
+      
+      payments.value = paymentRecords;
+      
+      // Calculate stats
+      const completed = paymentRecords.filter(p => p.status === 'Completed');
+      const pending = paymentRecords.filter(p => p.status === 'Pending' || p.status === 'Overdue');
+      
+      stats.value = {
+        totalRevenue: completed.reduce((sum, p) => sum + p.amount, 0),
+        pendingPayments: pending.reduce((sum, p) => sum + p.amount, 0),
+        successfulTransactions: completed.length,
+        failedTransactions: paymentRecords.filter(p => p.status === 'Failed').length
+      };
+      
+      console.log(`[admin-payments] Generated ${paymentRecords.length} payment records from member dues data`);
+    }
+  } catch (error) {
+    console.error('Error loading payments:', error);
+    // Keep empty array if load fails
+  }
+};
+
+// Load data on mount
+onMounted(async () => {
+  await loadPayments();
+});
+</script>

pages/admin/settings/index.vue

@@ -0,0 +1,818 @@
+<template>
+  <v-container fluid>
+    <!-- Header -->
+    <v-row class="mb-6">
+      <v-col>
+        <h1 class="text-h3 font-weight-bold mb-2">System Settings</h1>
+        <p class="text-body-1 text-medium-emphasis">Configure system preferences and options</p>
+      </v-col>
+    </v-row>
+
+    <!-- Settings Tabs -->
+    <v-card elevation="2">
+      <v-tabs v-model="activeTab" color="primary">
+        <v-tab value="general">
+          <v-icon start>mdi-cog</v-icon>
+          General
+        </v-tab>
+        <v-tab value="email">
+          <v-icon start>mdi-email</v-icon>
+          Email
+        </v-tab>
+        <v-tab value="nocodb">
+          <v-icon start>mdi-database</v-icon>
+          NocoDB
+        </v-tab>
+      </v-tabs>
+
+      <v-window v-model="activeTab">
+        <!-- General Settings -->
+        <v-window-item value="general">
+          <v-card-text>
+            <!-- Edit Mode Toggle -->
+            <v-row class="mb-4">
+              <v-col>
+                <v-alert
+                  v-if="!generalEditMode"
+                  type="info"
+                  variant="tonal"
+                  density="compact"
+                >
+                  <template v-slot:text>
+                    Click "Edit Settings" to modify these values
+                  </template>
+                </v-alert>
+              </v-col>
+              <v-col cols="auto">
+                <v-btn
+                  v-if="!generalEditMode"
+                  color="primary"
+                  variant="outlined"
+                  @click="generalEditMode = true"
+                >
+                  <v-icon start>mdi-pencil</v-icon>
+                  Edit Settings
+                </v-btn>
+                <v-btn-group v-else>
+                  <v-btn
+                    color="success"
+                    variant="flat"
+                    @click="saveGeneralSettings"
+                  >
+                    <v-icon start>mdi-check</v-icon>
+                    Save
+                  </v-btn>
+                  <v-btn
+                    color="error"
+                    variant="outlined"
+                    @click="cancelGeneralEdit"
+                  >
+                    <v-icon start>mdi-close</v-icon>
+                    Cancel
+                  </v-btn>
+                </v-btn-group>
+              </v-col>
+            </v-row>
+
+            <v-row>
+              <v-col cols="12">
+                <h3 class="text-h6 mb-4">Organization Information</h3>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="settings.general.orgName"
+                  label="Organization Name"
+                  variant="outlined"
+                  :readonly="!generalEditMode"
+                  :disabled="!generalEditMode"
+                  autocomplete="off"
+                  :class="{ 'readonly-field': !generalEditMode }"
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="settings.general.orgEmail"
+                  label="Contact Email"
+                  variant="outlined"
+                  type="email"
+                  :readonly="!generalEditMode"
+                  :disabled="!generalEditMode"
+                  autocomplete="off"
+                  :class="{ 'readonly-field': !generalEditMode }"
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-textarea
+                  v-model="settings.general.orgDescription"
+                  label="Description"
+                  variant="outlined"
+                  rows="3"
+                  :readonly="!generalEditMode"
+                  :disabled="!generalEditMode"
+                  autocomplete="off"
+                  :class="{ 'readonly-field': !generalEditMode }"
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-divider class="my-4" />
+              </v-col>
+              <v-col cols="12">
+                <h3 class="text-h6 mb-4">Regional Settings</h3>
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-select
+                  v-model="settings.general.timezone"
+                  label="Timezone"
+                  :items="timezones"
+                  variant="outlined"
+                  :readonly="!generalEditMode"
+                  :disabled="!generalEditMode"
+                  :class="{ 'readonly-field': !generalEditMode }"
+                />
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-select
+                  v-model="settings.general.dateFormat"
+                  label="Date Format"
+                  :items="dateFormats"
+                  variant="outlined"
+                  :readonly="!generalEditMode"
+                  :disabled="!generalEditMode"
+                  :class="{ 'readonly-field': !generalEditMode }"
+                />
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-select
+                  v-model="settings.general.currency"
+                  label="Currency"
+                  :items="currencies"
+                  variant="outlined"
+                  :readonly="!generalEditMode"
+                  :disabled="!generalEditMode"
+                  :class="{ 'readonly-field': !generalEditMode }"
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-window-item>
+
+        <!-- Email Settings -->
+        <v-window-item value="email">
+          <v-card-text>
+            <!-- Edit Mode Toggle -->
+            <v-row class="mb-4">
+              <v-col>
+                <v-alert
+                  v-if="!emailEditMode"
+                  type="info"
+                  variant="tonal"
+                  density="compact"
+                >
+                  <template v-slot:text>
+                    Click "Edit Email Configuration" to modify SMTP settings
+                  </template>
+                </v-alert>
+                <v-alert
+                  v-if="emailEditMode"
+                  type="warning"
+                  variant="tonal"
+                  density="compact"
+                >
+                  <template v-slot:text>
+                    Be careful when editing email settings. Incorrect values may prevent emails from being sent.
+                  </template>
+                </v-alert>
+              </v-col>
+              <v-col cols="auto">
+                <v-btn
+                  v-if="!emailEditMode"
+                  color="primary"
+                  variant="outlined"
+                  @click="emailEditMode = true"
+                >
+                  <v-icon start>mdi-pencil</v-icon>
+                  Edit Email Configuration
+                </v-btn>
+                <v-btn-group v-else>
+                  <v-btn
+                    color="success"
+                    variant="flat"
+                    @click="saveEmailSettings"
+                  >
+                    <v-icon start>mdi-check</v-icon>
+                    Save
+                  </v-btn>
+                  <v-btn
+                    color="warning"
+                    variant="outlined"
+                    @click="testEmailSettings"
+                    :loading="testingEmail"
+                  >
+                    <v-icon start>mdi-email-check</v-icon>
+                    Test
+                  </v-btn>
+                  <v-btn
+                    color="error"
+                    variant="outlined"
+                    @click="cancelEmailEdit"
+                  >
+                    <v-icon start>mdi-close</v-icon>
+                    Cancel
+                  </v-btn>
+                </v-btn-group>
+              </v-col>
+            </v-row>
+
+            <v-row>
+              <v-col cols="12">
+                <h3 class="text-h6 mb-4">SMTP Configuration</h3>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="settings.email.smtpHost"
+                  label="SMTP Host"
+                  variant="outlined"
+                  :readonly="!emailEditMode"
+                  :disabled="!emailEditMode"
+                  autocomplete="new-password"
+                  :type="emailEditMode ? 'text' : 'password'"
+                  :class="{ 'readonly-field': !emailEditMode }"
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="settings.email.smtpPort"
+                  label="SMTP Port"
+                  variant="outlined"
+                  type="number"
+                  :readonly="!emailEditMode"
+                  :disabled="!emailEditMode"
+                  autocomplete="off"
+                  :class="{ 'readonly-field': !emailEditMode }"
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="settings.email.smtpUsername"
+                  label="SMTP Username"
+                  variant="outlined"
+                  :readonly="!emailEditMode"
+                  :disabled="!emailEditMode"
+                  autocomplete="new-password"
+                  :type="emailEditMode ? 'text' : 'password'"
+                  :class="{ 'readonly-field': !emailEditMode }"
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="settings.email.smtpPassword"
+                  label="SMTP Password"
+                  variant="outlined"
+                  :type="showPassword ? 'text' : 'password'"
+                  :readonly="!emailEditMode"
+                  :disabled="!emailEditMode"
+                  autocomplete="new-password"
+                  :class="{ 'readonly-field': !emailEditMode }"
+                >
+                  <template v-slot:append-inner>
+                    <v-icon
+                      v-if="emailEditMode"
+                      @click="showPassword = !showPassword"
+                      :icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                </v-text-field>
+              </v-col>
+              <v-col cols="12">
+                <v-switch
+                  v-model="settings.email.useTLS"
+                  label="Use TLS/SSL"
+                  color="primary"
+                  :readonly="!emailEditMode"
+                  :disabled="!emailEditMode"
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-divider class="my-4" />
+              </v-col>
+              <v-col cols="12">
+                <h3 class="text-h6 mb-4">Email Templates</h3>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="settings.email.fromName"
+                  label="From Name"
+                  variant="outlined"
+                  :readonly="!emailEditMode"
+                  :disabled="!emailEditMode"
+                  autocomplete="off"
+                  :class="{ 'readonly-field': !emailEditMode }"
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="settings.email.fromEmail"
+                  label="From Email"
+                  variant="outlined"
+                  type="email"
+                  :readonly="!emailEditMode"
+                  :disabled="!emailEditMode"
+                  autocomplete="off"
+                  :class="{ 'readonly-field': !emailEditMode }"
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-btn variant="outlined" color="primary">
+                  <v-icon start>mdi-email-edit</v-icon>
+                  Manage Email Templates
+                </v-btn>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-window-item>
+
+        <!-- NocoDB Settings -->
+        <v-window-item value="nocodb">
+          <v-card-text>
+            <!-- Edit Mode Toggle -->
+            <v-row class="mb-4">
+              <v-col>
+                <v-alert
+                  v-if="!nocodbEditMode"
+                  type="info"
+                  variant="tonal"
+                  density="compact"
+                >
+                  <template v-slot:text>
+                    Click "Edit NocoDB Configuration" to modify database settings
+                  </template>
+                </v-alert>
+                <v-alert
+                  v-if="nocodbEditMode"
+                  type="warning"
+                  variant="tonal"
+                  density="compact"
+                >
+                  <template v-slot:text>
+                    NocoDB configuration is required for member management functionality
+                  </template>
+                </v-alert>
+              </v-col>
+              <v-col cols="auto">
+                <v-btn
+                  v-if="!nocodbEditMode"
+                  color="primary"
+                  variant="outlined"
+                  @click="nocodbEditMode = true"
+                >
+                  <v-icon start>mdi-pencil</v-icon>
+                  Edit NocoDB Configuration
+                </v-btn>
+                <v-btn-group v-else>
+                  <v-btn
+                    color="success"
+                    variant="flat"
+                    @click="saveNocodbSettings"
+                  >
+                    <v-icon start>mdi-check</v-icon>
+                    Save
+                  </v-btn>
+                  <v-btn
+                    color="warning"
+                    variant="outlined"
+                    @click="testNocodbConnection"
+                    :loading="testingNocodb"
+                  >
+                    <v-icon start>mdi-connection</v-icon>
+                    Test Connection
+                  </v-btn>
+                  <v-btn
+                    color="error"
+                    variant="outlined"
+                    @click="cancelNocodbEdit"
+                  >
+                    <v-icon start>mdi-close</v-icon>
+                    Cancel
+                  </v-btn>
+                </v-btn-group>
+              </v-col>
+            </v-row>
+
+            <v-row>
+              <v-col cols="12">
+                <h3 class="text-h6 mb-4">NocoDB Database Configuration</h3>
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="settings.nocodb.url"
+                  label="NocoDB URL"
+                  variant="outlined"
+                  placeholder="https://your-nocodb-instance.com"
+                  :readonly="!nocodbEditMode"
+                  :disabled="!nocodbEditMode"
+                  autocomplete="off"
+                  :class="{ 'readonly-field': !nocodbEditMode }"
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="settings.nocodb.apiKey"
+                  label="API Key"
+                  variant="outlined"
+                  :type="showNocodbApiKey ? 'text' : 'password'"
+                  placeholder="Enter your NocoDB API token"
+                  :readonly="!nocodbEditMode"
+                  :disabled="!nocodbEditMode"
+                  autocomplete="new-password"
+                  :class="{ 'readonly-field': !nocodbEditMode }"
+                >
+                  <template v-slot:append-inner>
+                    <v-icon
+                      v-if="nocodbEditMode"
+                      @click="showNocodbApiKey = !showNocodbApiKey"
+                      :icon="showNocodbApiKey ? 'mdi-eye-off' : 'mdi-eye'"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                </v-text-field>
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="settings.nocodb.baseId"
+                  label="Base ID"
+                  variant="outlined"
+                  placeholder="Your NocoDB base ID"
+                  :readonly="!nocodbEditMode"
+                  :disabled="!nocodbEditMode"
+                  autocomplete="off"
+                  :class="{ 'readonly-field': !nocodbEditMode }"
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-divider class="my-4" />
+              </v-col>
+              <v-col cols="12">
+                <h3 class="text-h6 mb-4">Table Mappings</h3>
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-text-field
+                  v-model="settings.nocodb.tables.members"
+                  label="Members Table"
+                  variant="outlined"
+                  :readonly="!nocodbEditMode"
+                  :disabled="!nocodbEditMode"
+                  autocomplete="off"
+                  :class="{ 'readonly-field': !nocodbEditMode }"
+                />
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-text-field
+                  v-model="settings.nocodb.tables.events"
+                  label="Events Table"
+                  variant="outlined"
+                  :readonly="!nocodbEditMode"
+                  :disabled="!nocodbEditMode"
+                  autocomplete="off"
+                  :class="{ 'readonly-field': !nocodbEditMode }"
+                />
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-text-field
+                  v-model="settings.nocodb.tables.rsvps"
+                  label="RSVPs Table"
+                  variant="outlined"
+                  :readonly="!nocodbEditMode"
+                  :disabled="!nocodbEditMode"
+                  autocomplete="off"
+                  :class="{ 'readonly-field': !nocodbEditMode }"
+                />
+              </v-col>
+            </v-row>
+
+            <!-- Connection Status -->
+            <v-row v-if="nocodbConnectionStatus" class="mt-4">
+              <v-col>
+                <v-alert
+                  :type="nocodbConnectionStatus.success ? 'success' : 'error'"
+                  variant="tonal"
+                >
+                  {{ nocodbConnectionStatus.message }}
+                </v-alert>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-window-item>
+      </v-window>
+    </v-card>
+
+    <!-- Snackbar for notifications -->
+    <v-snackbar
+      v-model="snackbar"
+      :color="snackbarColor"
+      :timeout="3000"
+    >
+      {{ snackbarText }}
+      <template v-slot:actions>
+        <v-btn
+          variant="text"
+          @click="snackbar = false"
+        >
+          Close
+        </v-btn>
+      </template>
+    </v-snackbar>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'admin',
+  middleware: 'admin'
+});
+
+// State
+const activeTab = ref('general');
+const generalEditMode = ref(false);
+const emailEditMode = ref(false);
+const nocodbEditMode = ref(false);
+const showPassword = ref(false);
+const showNocodbApiKey = ref(false);
+const testingEmail = ref(false);
+const testingNocodb = ref(false);
+const nocodbConnectionStatus = ref<{ success: boolean; message: string } | null>(null);
+const snackbar = ref(false);
+const snackbarText = ref('');
+const snackbarColor = ref('success');
+
+// Original settings backup for cancel functionality
+const originalSettings = ref<any>(null);
+
+// Settings data
+const settings = ref({
+  general: {
+    orgName: 'MonacoUSA',
+    orgEmail: 'info@monacousa.org',
+    orgDescription: 'Monaco USA Association - Connecting Monaco and USA',
+    timezone: 'America/New_York',
+    dateFormat: 'MM/DD/YYYY',
+    currency: 'EUR'
+  },
+  email: {
+    smtpHost: 'smtp.gmail.com',
+    smtpPort: 587,
+    smtpUsername: '',
+    smtpPassword: '',
+    useTLS: true,
+    fromName: 'MonacoUSA',
+    fromEmail: 'noreply@monacousa.org'
+  },
+  nocodb: {
+    url: '',
+    apiKey: '',
+    baseId: '',
+    tables: {
+      members: 'Members',
+      events: 'Events',
+      rsvps: 'RSVPs'
+    }
+  }
+});
+
+// Options
+const timezones = [
+  'America/New_York',
+  'America/Chicago',
+  'America/Denver',
+  'America/Los_Angeles',
+  'Europe/Monaco'
+];
+
+const dateFormats = [
+  'MM/DD/YYYY',
+  'DD/MM/YYYY',
+  'YYYY-MM-DD'
+];
+
+const currencies = [
+  'EUR',
+  'USD',
+  'GBP'
+];
+
+// Load settings on mount
+onMounted(async () => {
+  await loadSettings();
+  await loadNocodbSettings();
+});
+
+// Methods
+const loadSettings = async () => {
+  try {
+    // Load settings from API
+    // For now, we'll keep the defaults
+    console.log('Loading settings...');
+  } catch (error) {
+    console.error('Error loading settings:', error);
+    showNotification('Failed to load settings', 'error');
+  }
+};
+
+const saveGeneralSettings = async () => {
+  try {
+    console.log('Saving general settings:', settings.value.general);
+    // TODO: Save to API
+    generalEditMode.value = false;
+    showNotification('General settings saved successfully', 'success');
+  } catch (error) {
+    console.error('Error saving general settings:', error);
+    showNotification('Failed to save general settings', 'error');
+  }
+};
+
+const cancelGeneralEdit = () => {
+  if (originalSettings.value) {
+    settings.value.general = { ...originalSettings.value.general };
+  }
+  generalEditMode.value = false;
+};
+
+const saveEmailSettings = async () => {
+  try {
+    console.log('Saving email settings:', settings.value.email);
+    // TODO: Save to API
+    emailEditMode.value = false;
+    showPassword.value = false;
+    showNotification('Email settings saved successfully', 'success');
+  } catch (error) {
+    console.error('Error saving email settings:', error);
+    showNotification('Failed to save email settings', 'error');
+  }
+};
+
+const testEmailSettings = async () => {
+  testingEmail.value = true;
+  try {
+    console.log('Testing email settings...');
+    // TODO: Test email configuration via API
+    await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate API call
+    showNotification('Test email sent successfully', 'success');
+  } catch (error) {
+    console.error('Error testing email:', error);
+    showNotification('Failed to send test email', 'error');
+  } finally {
+    testingEmail.value = false;
+  }
+};
+
+const cancelEmailEdit = () => {
+  if (originalSettings.value) {
+    settings.value.email = { ...originalSettings.value.email };
+  }
+  emailEditMode.value = false;
+  showPassword.value = false;
+};
+
+const showNotification = (text: string, color: string = 'success') => {
+  snackbarText.value = text;
+  snackbarColor.value = color;
+  snackbar.value = true;
+};
+
+const loadNocodbSettings = async () => {
+  try {
+    const response = await $fetch<{ success: boolean; data?: any }>('/api/admin/nocodb-config');
+    if (response.success && response.data) {
+      settings.value.nocodb = {
+        url: response.data.url || '',
+        apiKey: response.data.apiKey || '',
+        baseId: response.data.baseId || '',
+        tables: response.data.tables || {
+          members: 'Members',
+          events: 'Events',
+          rsvps: 'RSVPs'
+        }
+      };
+    }
+  } catch (error) {
+    console.error('Error loading NocoDB settings:', error);
+    showNotification('Failed to load NocoDB settings', 'error');
+  }
+};
+
+const saveNocodbSettings = async () => {
+  try {
+    const response = await $fetch('/api/admin/nocodb-config', {
+      method: 'POST',
+      body: settings.value.nocodb
+    });
+    nocodbEditMode.value = false;
+    showNocodbApiKey.value = false;
+    showNotification('NocoDB settings saved successfully', 'success');
+    // Reload settings to ensure they're persistent
+    await loadNocodbSettings();
+  } catch (error) {
+    console.error('Error saving NocoDB settings:', error);
+    showNotification('Failed to save NocoDB settings', 'error');
+  }
+};
+
+const testNocodbConnection = async () => {
+  testingNocodb.value = true;
+  nocodbConnectionStatus.value = null;
+  
+  try {
+    const response = await $fetch<{ success: boolean; message: string }>('/api/admin/nocodb-test', {
+      method: 'POST',
+      body: settings.value.nocodb
+    });
+    
+    nocodbConnectionStatus.value = {
+      success: response.success,
+      message: response.message
+    };
+    
+    if (response.success) {
+      showNotification('NocoDB connection successful', 'success');
+    } else {
+      showNotification(response.message, 'error');
+    }
+  } catch (error: any) {
+    nocodbConnectionStatus.value = {
+      success: false,
+      message: error.data?.message || 'Failed to connect to NocoDB'
+    };
+    showNotification('Connection test failed', 'error');
+  } finally {
+    testingNocodb.value = false;
+  }
+};
+
+const cancelNocodbEdit = () => {
+  if (originalSettings.value) {
+    settings.value.nocodb = { ...originalSettings.value.nocodb };
+  }
+  nocodbEditMode.value = false;
+  showNocodbApiKey.value = false;
+  nocodbConnectionStatus.value = null;
+};
+
+// Watch for edit mode changes to backup original settings
+watch(generalEditMode, (newVal) => {
+  if (newVal) {
+    originalSettings.value = {
+      general: { ...settings.value.general }
+    };
+  }
+});
+
+watch(emailEditMode, (newVal) => {
+  if (newVal) {
+    originalSettings.value = {
+      email: { ...settings.value.email }
+    };
+  }
+});
+
+watch(nocodbEditMode, (newVal) => {
+  if (newVal) {
+    originalSettings.value = {
+      nocodb: { ...settings.value.nocodb }
+    };
+  }
+});
+
+// Prevent browser autofill on mount
+onMounted(() => {
+  // Disable autofill for all inputs initially
+  const inputs = document.querySelectorAll('input');
+  inputs.forEach(input => {
+    input.setAttribute('autocomplete', 'off');
+    input.setAttribute('data-lpignore', 'true'); // LastPass
+    input.setAttribute('data-form-type', 'other'); // Dashlane
+  });
+});
+</script>
+
+<style scoped>
+.readonly-field :deep(.v-field) {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.readonly-field :deep(.v-field__input) {
+  cursor: default !important;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+/* Prevent browser autofill styling */
+:deep(input:-webkit-autofill),
+:deep(input:-webkit-autofill:hover),
+:deep(input:-webkit-autofill:focus),
+:deep(input:-webkit-autofill:active) {
+  -webkit-box-shadow: 0 0 0 30px white inset !important;
+  box-shadow: 0 0 0 30px white inset !important;
+}
+</style>

pages/admin/users/index.vue

@@ -0,0 +1,415 @@
+<template>
+  <v-container fluid>
+    <!-- Header -->
+    <v-row class="mb-6">
+      <v-col>
+        <h1 class="text-h3 font-weight-bold mb-2">User Management</h1>
+        <p class="text-body-1 text-medium-emphasis">Manage system users and permissions</p>
+      </v-col>
+      <v-col cols="auto">
+        <v-btn
+          color="primary"
+          variant="flat"
+          prepend-icon="mdi-account-plus"
+          @click="showCreateDialog = true"
+        >
+          Add User
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <!-- Filters -->
+    <v-card class="mb-6" elevation="0">
+      <v-card-text>
+        <v-row>
+          <v-col cols="12" md="4">
+            <v-text-field
+              v-model="searchQuery"
+              label="Search users"
+              prepend-inner-icon="mdi-magnify"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="3">
+            <v-select
+              v-model="roleFilter"
+              label="Role"
+              :items="roleOptions"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="3">
+            <v-select
+              v-model="statusFilter"
+              label="Status"
+              :items="statusOptions"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="2">
+            <v-btn
+              variant="outlined"
+              color="primary"
+              block
+              @click="resetFilters"
+            >
+              Reset Filters
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+
+    <!-- Users Table -->
+    <v-card elevation="2">
+      <v-data-table
+        :headers="headers"
+        :items="filteredUsers"
+        :search="searchQuery"
+        :loading="loading"
+        class="elevation-0"
+        hover
+      >
+        <template v-slot:item.name="{ item }">
+          <div class="d-flex align-center py-2">
+            <ProfileAvatar
+              :member-name="item.name"
+              size="small"
+              class="mr-3"
+            />
+            <div>
+              <div class="font-weight-medium">{{ item.name }}</div>
+              <div class="text-caption text-medium-emphasis">{{ item.email }}</div>
+            </div>
+          </div>
+        </template>
+
+        <template v-slot:item.role="{ item }">
+          <v-chip
+            :color="getRoleColor(item.role)"
+            size="small"
+            variant="tonal"
+          >
+            {{ item.role }}
+          </v-chip>
+        </template>
+
+        <template v-slot:item.status="{ item }">
+          <v-chip
+            :color="item.status === 'active' ? 'success' : 'error'"
+            size="small"
+            variant="tonal"
+          >
+            {{ item.status }}
+          </v-chip>
+        </template>
+
+        <template v-slot:item.lastLogin="{ item }">
+          <span class="text-body-2">{{ formatDate(item.lastLogin) }}</span>
+        </template>
+
+        <template v-slot:item.actions="{ item }">
+          <v-btn
+            icon="mdi-pencil"
+            size="small"
+            variant="text"
+            @click="editUser(item)"
+          />
+          <v-btn
+            icon="mdi-dots-vertical"
+            size="small"
+            variant="text"
+          >
+            <v-menu activator="parent">
+              <v-list density="compact">
+                <v-list-item @click="viewUser(item)">
+                  <v-list-item-title>
+                    <v-icon size="small" class="mr-2">mdi-eye</v-icon>
+                    View Details
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="resetPassword(item)">
+                  <v-list-item-title>
+                    <v-icon size="small" class="mr-2">mdi-lock-reset</v-icon>
+                    Reset Password
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item 
+                  @click="toggleStatus(item)"
+                  :class="item.status === 'active' ? 'text-error' : 'text-success'"
+                >
+                  <v-list-item-title>
+                    <v-icon size="small" class="mr-2">
+                      {{ item.status === 'active' ? 'mdi-account-off' : 'mdi-account-check' }}
+                    </v-icon>
+                    {{ item.status === 'active' ? 'Deactivate' : 'Activate' }}
+                  </v-list-item-title>
+                </v-list-item>
+                <v-divider />
+                <v-list-item @click="deleteUser(item)" class="text-error">
+                  <v-list-item-title>
+                    <v-icon size="small" class="mr-2">mdi-delete</v-icon>
+                    Delete User
+                  </v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </v-btn>
+        </template>
+
+        <template v-slot:bottom>
+          <v-divider />
+          <div class="d-flex align-center justify-space-between pa-4">
+            <div class="text-body-2 text-medium-emphasis">
+              Showing {{ filteredUsers.length }} of {{ totalUsers }} users
+            </div>
+            <v-pagination
+              v-model="currentPage"
+              :length="totalPages"
+              :total-visible="5"
+              density="compact"
+            />
+          </div>
+        </template>
+      </v-data-table>
+    </v-card>
+
+    <!-- Create/Edit Dialog -->
+    <v-dialog v-model="showCreateDialog" max-width="600">
+      <v-card>
+        <v-card-title>
+          {{ editingUser ? 'Edit User' : 'Create New User' }}
+        </v-card-title>
+        <v-card-text>
+          <v-form ref="userForm">
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="userForm.firstName"
+                  label="First Name"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="userForm.lastName"
+                  label="Last Name"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="userForm.email"
+                  label="Email"
+                  variant="outlined"
+                  type="email"
+                  required
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-select
+                  v-model="userForm.role"
+                  label="Role"
+                  :items="roleOptions"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-select
+                  v-model="userForm.status"
+                  label="Status"
+                  :items="statusOptions"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+            </v-row>
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="showCreateDialog = false">Cancel</v-btn>
+          <v-btn color="primary" variant="flat" @click="saveUser">
+            {{ editingUser ? 'Update' : 'Create' }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import ProfileAvatar from '~/components/ProfileAvatar.vue';
+
+definePageMeta({
+  layout: 'admin',
+  middleware: 'admin'
+});
+
+// State
+const loading = ref(false);
+const showCreateDialog = ref(false);
+const editingUser = ref(null);
+const searchQuery = ref('');
+const roleFilter = ref(null);
+const statusFilter = ref(null);
+const currentPage = ref(1);
+
+// Form data
+const userForm = ref({
+  firstName: '',
+  lastName: '',
+  email: '',
+  role: 'member',
+  status: 'active'
+});
+
+// Options
+const roleOptions = [
+  { title: 'Admin', value: 'admin' },
+  { title: 'Board', value: 'board' },
+  { title: 'Member', value: 'member' }
+];
+
+const statusOptions = [
+  { title: 'Active', value: 'active' },
+  { title: 'Inactive', value: 'inactive' }
+];
+
+// Table configuration
+const headers = [
+  { title: 'User', key: 'name', sortable: true },
+  { title: 'Role', key: 'role', sortable: true },
+  { title: 'Status', key: 'status', sortable: true },
+  { title: 'Last Login', key: 'lastLogin', sortable: true },
+  { title: 'Actions', key: 'actions', sortable: false, align: 'end' }
+];
+
+// Real data from Keycloak
+const users = ref([]);
+
+// Computed
+const filteredUsers = computed(() => {
+  let filtered = [...users.value];
+  
+  if (roleFilter.value) {
+    filtered = filtered.filter(u => u.role === roleFilter.value);
+  }
+  
+  if (statusFilter.value) {
+    filtered = filtered.filter(u => u.status === statusFilter.value);
+  }
+  
+  return filtered;
+});
+
+const totalUsers = computed(() => users.value.length);
+const totalPages = computed(() => Math.ceil(filteredUsers.value.length / 10));
+
+// Methods
+const getRoleColor = (role: string) => {
+  switch (role) {
+    case 'admin': return 'error';
+    case 'board': return 'warning';
+    case 'member': return 'info';
+    default: return 'default';
+  }
+};
+
+const formatDate = (date: Date) => {
+  if (!date) return 'Never';
+  return new Date(date).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+};
+
+const resetFilters = () => {
+  searchQuery.value = '';
+  roleFilter.value = null;
+  statusFilter.value = null;
+};
+
+const editUser = (user: any) => {
+  editingUser.value = user;
+  userForm.value = {
+    firstName: user.name.split(' ')[0],
+    lastName: user.name.split(' ')[1] || '',
+    email: user.email,
+    role: user.role,
+    status: user.status
+  };
+  showCreateDialog.value = true;
+};
+
+const viewUser = (user: any) => {
+  console.log('View user:', user);
+};
+
+const resetPassword = (user: any) => {
+  console.log('Reset password for:', user);
+};
+
+const toggleStatus = (user: any) => {
+  user.status = user.status === 'active' ? 'inactive' : 'active';
+};
+
+const deleteUser = (user: any) => {
+  console.log('Delete user:', user);
+};
+
+const saveUser = () => {
+  console.log('Save user:', userForm.value);
+  showCreateDialog.value = false;
+  editingUser.value = null;
+};
+
+// Load real users from Keycloak
+const loadUsers = async () => {
+  loading.value = true;
+  try {
+    // Fetch users from Keycloak API
+    const response = await $fetch('/api/admin/users');
+    
+    if (response?.success && response.data?.users) {
+      // Transform Keycloak users to our format
+      users.value = response.data.users.map((user: any) => ({
+        id: user.id,
+        name: `${user.firstName || ''} ${user.lastName || ''}`.trim() || user.username,
+        email: user.email,
+        role: user.groups?.[0]?.name || 'member', // Use primary group as role
+        status: user.enabled ? 'active' : 'inactive',
+        lastLogin: user.lastLogin ? new Date(user.lastLogin) : null,
+        avatar: null
+      }));
+      
+      console.log(`[admin-users] Loaded ${users.value.length} users from Keycloak`);
+    }
+  } catch (error) {
+    console.error('Error loading users:', error);
+    // Keep empty array if load fails
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Load data on mount
+onMounted(async () => {
+  await loadUsers();
+});
+</script>

pages/auth/forgot-password-mockup.vue

@@ -0,0 +1,406 @@
+<template>
+  <div class="auth-page">
+    <div class="auth-container auth-container--small">
+      <div 
+        v-motion
+        :initial="{ opacity: 0, y: 20 }"
+        :enter="{ opacity: 1, y: 0 }"
+        class="auth-content"
+      >
+        <!-- Logo -->
+        <div class="auth-logo">
+          <img src="/MONACOUSA-Flags_376x376.png" alt="MonacoUSA" class="logo" />
+          <h1>MonacoUSA Portal</h1>
+        </div>
+        
+        <!-- Step 1: Request Reset -->
+        <div v-if="!emailSent" class="reset-step">
+          <div class="auth-header">
+            <Icon name="lock" class="auth-header__icon" />
+            <h2>Forgot Your Password?</h2>
+            <p>No worries! Enter your email and we'll send you reset instructions.</p>
+          </div>
+          
+          <form class="auth-form" @submit.prevent="handleResetRequest">
+            <FloatingInput
+              v-model="email"
+              label="Email Address"
+              type="email"
+              variant="glass"
+              leftIcon="mail"
+              helperText="Enter the email associated with your account"
+              :error="error"
+              required
+            />
+            
+            <MonacoButton 
+              type="submit" 
+              variant="primary" 
+              size="lg" 
+              block
+              :loading="loading"
+            >
+              Send Reset Instructions
+            </MonacoButton>
+            
+            <MonacoButton 
+              variant="ghost" 
+              size="lg" 
+              block
+              @click="goBack"
+            >
+              Back to Login
+            </MonacoButton>
+          </form>
+        </div>
+        
+        <!-- Step 2: Email Sent Confirmation -->
+        <div v-else class="success-step">
+          <div class="success-icon">
+            <Icon name="mail" />
+          </div>
+          
+          <div class="auth-header">
+            <h2>Check Your Email</h2>
+            <p>We've sent password reset instructions to:</p>
+            <p class="email-display">{{ email }}</p>
+          </div>
+          
+          <div class="instructions">
+            <h3>What's next?</h3>
+            <ol>
+              <li>Check your email inbox (and spam folder)</li>
+              <li>Click the reset link in the email</li>
+              <li>Create your new password</li>
+            </ol>
+          </div>
+          
+          <div class="resend-section">
+            <p>Didn't receive the email?</p>
+            <button 
+              class="resend-button"
+              @click="handleResend"
+              :disabled="resendCooldown > 0"
+            >
+              {{ resendCooldown > 0 ? `Resend in ${resendCooldown}s` : 'Resend Email' }}
+            </button>
+          </div>
+          
+          <MonacoButton 
+            variant="primary" 
+            size="lg" 
+            block
+            @click="goBack"
+          >
+            Return to Login
+          </MonacoButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onUnmounted } from 'vue'
+import FloatingInput from '~/components/ui/FloatingInput.vue'
+import MonacoButton from '~/components/ui/MonacoButton.vue'
+import Icon from '~/components/ui/Icon.vue'
+
+const email = ref('')
+const error = ref('')
+const loading = ref(false)
+const emailSent = ref(false)
+const resendCooldown = ref(0)
+let cooldownInterval: number | null = null
+
+const handleResetRequest = async () => {
+  error.value = ''
+  loading.value = true
+  
+  // Simulate API call
+  setTimeout(() => {
+    loading.value = false
+    emailSent.value = true
+    startResendCooldown()
+  }, 2000)
+}
+
+const handleResend = () => {
+  if (resendCooldown.value > 0) return
+  
+  // Simulate resending email
+  console.log('Resending to:', email.value)
+  startResendCooldown()
+}
+
+const startResendCooldown = () => {
+  resendCooldown.value = 60
+  
+  if (cooldownInterval) {
+    clearInterval(cooldownInterval)
+  }
+  
+  cooldownInterval = setInterval(() => {
+    resendCooldown.value--
+    if (resendCooldown.value <= 0 && cooldownInterval) {
+      clearInterval(cooldownInterval)
+      cooldownInterval = null
+    }
+  }, 1000)
+}
+
+const goBack = () => {
+  window.location.href = '/auth/login'
+}
+
+onUnmounted(() => {
+  if (cooldownInterval) {
+    clearInterval(cooldownInterval)
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.auth-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
+  padding: 2rem;
+  position: relative;
+  overflow: hidden;
+  
+  // Background decoration
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    border-radius: 50%;
+    background: linear-gradient(135deg, 
+      rgba(220, 38, 38, 0.05) 0%, 
+      rgba(220, 38, 38, 0.02) 100%);
+  }
+  
+  &::before {
+    width: 500px;
+    height: 500px;
+    top: -250px;
+    left: -250px;
+  }
+  
+  &::after {
+    width: 400px;
+    height: 400px;
+    bottom: -200px;
+    right: -200px;
+  }
+}
+
+.auth-container {
+  position: relative;
+  max-width: 500px;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 24px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  z-index: 1;
+  
+  &--small {
+    max-width: 450px;
+  }
+}
+
+.auth-content {
+  padding: 3rem;
+}
+
+.auth-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  
+  img {
+    width: 48px;
+    height: 48px;
+  }
+  
+  h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #dc2626;
+  }
+}
+
+.auth-header {
+  text-align: center;
+  margin-bottom: 2rem;
+  
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    margin-bottom: 1rem;
+    background: linear-gradient(135deg, 
+      rgba(220, 38, 38, 0.1) 0%, 
+      rgba(220, 38, 38, 0.05) 100%);
+    border-radius: 16px;
+    color: #dc2626;
+    
+    svg {
+      width: 32px;
+      height: 32px;
+    }
+  }
+  
+  h2 {
+    margin: 0 0 0.75rem;
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: #27272a;
+  }
+  
+  p {
+    margin: 0;
+    color: #6b7280;
+    line-height: 1.5;
+  }
+}
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.success-step {
+  text-align: center;
+}
+
+.success-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+  margin-bottom: 1.5rem;
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  border-radius: 50%;
+  color: white;
+  animation: successPulse 2s ease-in-out infinite;
+  
+  svg {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+@keyframes successPulse {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
+  }
+  50% {
+    transform: scale(1.05);
+    box-shadow: 0 0 0 20px rgba(16, 185, 129, 0);
+  }
+}
+
+.email-display {
+  margin-top: 0.5rem;
+  padding: 0.75rem;
+  background: rgba(220, 38, 38, 0.05);
+  border-radius: 8px;
+  font-weight: 600;
+  color: #dc2626;
+}
+
+.instructions {
+  margin: 2rem 0;
+  padding: 1.5rem;
+  background: rgba(107, 114, 128, 0.05);
+  border-radius: 12px;
+  text-align: left;
+  
+  h3 {
+    margin: 0 0 1rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #27272a;
+  }
+  
+  ol {
+    margin: 0;
+    padding-left: 1.5rem;
+    
+    li {
+      margin-bottom: 0.5rem;
+      color: #6b7280;
+      font-size: 0.875rem;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.resend-section {
+  margin: 2rem 0;
+  padding: 1.5rem;
+  background: linear-gradient(135deg, 
+    rgba(220, 38, 38, 0.03) 0%, 
+    rgba(220, 38, 38, 0.01) 100%);
+  border-radius: 12px;
+  
+  p {
+    margin: 0 0 0.75rem;
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+}
+
+.resend-button {
+  padding: 0.5rem 1rem;
+  background: none;
+  border: 2px solid #dc2626;
+  border-radius: 8px;
+  color: #dc2626;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  
+  &:hover:not(:disabled) {
+    background: #dc2626;
+    color: white;
+  }
+  
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+// Responsive
+@media (max-width: 640px) {
+  .auth-content {
+    padding: 2rem;
+  }
+  
+  .auth-logo {
+    flex-direction: column;
+    
+    h1 {
+      font-size: 1.25rem;
+    }
+  }
+}
+</style>

pages/auth/login-mockup.vue

@@ -0,0 +1,466 @@
+<template>
+  <div class="auth-page">
+    <div class="auth-container">
+      <!-- Left Panel - Form -->
+      <div 
+        v-motion
+        :initial="{ opacity: 0, x: -50 }"
+        :enter="{ opacity: 1, x: 0 }"
+        class="auth-panel auth-panel--form"
+      >
+        <div class="auth-logo">
+          <img src="/MONACOUSA-Flags_376x376.png" alt="MonacoUSA" class="logo" />
+          <h1>MonacoUSA Portal</h1>
+        </div>
+        
+        <div class="auth-header">
+          <h2>Welcome Back</h2>
+          <p>Sign in to access your Monaco community</p>
+        </div>
+        
+        <form class="auth-form" @submit.prevent="handleLogin">
+          <FloatingInput
+            v-model="form.email"
+            label="Email Address"
+            type="email"
+            variant="glass"
+            leftIcon="mail"
+            :error="errors.email"
+            required
+          />
+          
+          <FloatingInput
+            v-model="form.password"
+            label="Password"
+            type="password"
+            variant="glass"
+            leftIcon="lock"
+            :error="errors.password"
+            required
+          />
+          
+          <div class="auth-options">
+            <label class="checkbox-label">
+              <input type="checkbox" v-model="form.remember" />
+              <span>Remember me</span>
+            </label>
+            <a href="/auth/forgot-password" class="link">Forgot password?</a>
+          </div>
+          
+          <MonacoButton 
+            type="submit" 
+            variant="primary" 
+            size="lg" 
+            block
+            :loading="loading"
+          >
+            Sign In
+          </MonacoButton>
+          
+          <div class="auth-divider">
+            <span>or continue with</span>
+          </div>
+          
+          <div class="social-buttons">
+            <button type="button" class="social-button">
+              <Icon name="globe" />
+              <span>Google</span>
+            </button>
+            <button type="button" class="social-button">
+              <Icon name="briefcase" />
+              <span>LinkedIn</span>
+            </button>
+          </div>
+        </form>
+        
+        <div class="auth-footer">
+          <p>Don't have an account? <a href="/auth/signup" class="link">Sign up</a></p>
+        </div>
+      </div>
+      
+      <!-- Right Panel - Visual -->
+      <div 
+        v-motion
+        :initial="{ opacity: 0, x: 50 }"
+        :enter="{ opacity: 1, x: 0, transition: { delay: 200 } }"
+        class="auth-panel auth-panel--visual"
+      >
+        <div class="visual-content">
+          <div class="visual-gradient"></div>
+          <div class="visual-pattern"></div>
+          
+          <div class="visual-text">
+            <h3>Connect with Monaco's Elite Business Community</h3>
+            <p>Join exclusive events, network with leaders, and grow your business in the heart of luxury and innovation.</p>
+            
+            <div class="stats">
+              <div class="stat">
+                <span class="stat__value">500+</span>
+                <span class="stat__label">Members</span>
+              </div>
+              <div class="stat">
+                <span class="stat__value">50+</span>
+                <span class="stat__label">Events/Year</span>
+              </div>
+              <div class="stat">
+                <span class="stat__value">25+</span>
+                <span class="stat__label">Countries</span>
+              </div>
+            </div>
+          </div>
+          
+          <div class="visual-decoration">
+            <div class="decoration-circle decoration-circle--1"></div>
+            <div class="decoration-circle decoration-circle--2"></div>
+            <div class="decoration-circle decoration-circle--3"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import FloatingInput from '~/components/ui/FloatingInput.vue'
+import MonacoButton from '~/components/ui/MonacoButton.vue'
+import Icon from '~/components/ui/Icon.vue'
+
+const form = ref({
+  email: '',
+  password: '',
+  remember: false
+})
+
+const errors = ref({
+  email: '',
+  password: ''
+})
+
+const loading = ref(false)
+
+const handleLogin = async () => {
+  loading.value = true
+  errors.value = { email: '', password: '' }
+  
+  // Simulate API call
+  setTimeout(() => {
+    loading.value = false
+    console.log('Login with:', form.value)
+  }, 2000)
+}
+</script>
+
+<style scoped lang="scss">
+.auth-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
+  padding: 2rem;
+}
+
+.auth-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  max-width: 1200px;
+  width: 100%;
+  min-height: 700px;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(20px);
+  border-radius: 24px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.auth-panel {
+  padding: 3rem;
+  display: flex;
+  flex-direction: column;
+  
+  &--form {
+    justify-content: center;
+  }
+  
+  &--visual {
+    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+    position: relative;
+    overflow: hidden;
+  }
+}
+
+.auth-logo {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 3rem;
+  
+  img {
+    width: 48px;
+    height: 48px;
+  }
+  
+  h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #dc2626;
+  }
+}
+
+.auth-header {
+  margin-bottom: 2rem;
+  
+  h2 {
+    margin: 0 0 0.5rem;
+    font-size: 2rem;
+    font-weight: 700;
+    color: #27272a;
+  }
+  
+  p {
+    margin: 0;
+    color: #6b7280;
+  }
+}
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.auth-options {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  
+  input[type="checkbox"] {
+    width: 1.25rem;
+    height: 1.25rem;
+    accent-color: #dc2626;
+    cursor: pointer;
+  }
+  
+  span {
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+}
+
+.link {
+  color: #dc2626;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: opacity 0.2s;
+  
+  &:hover {
+    opacity: 0.8;
+    text-decoration: underline;
+  }
+}
+
+.auth-divider {
+  position: relative;
+  text-align: center;
+  margin: 1rem 0;
+  
+  span {
+    position: relative;
+    padding: 0 1rem;
+    background: white;
+    color: #a3a3a3;
+    font-size: 0.875rem;
+  }
+  
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: 1px;
+    background: #e5e5e5;
+  }
+}
+
+.social-buttons {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.social-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: white;
+  border: 2px solid #e5e5e5;
+  border-radius: 12px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #27272a;
+  cursor: pointer;
+  transition: all 0.2s;
+  
+  &:hover {
+    background: #f5f5f5;
+    border-color: #dc2626;
+    transform: translateY(-2px);
+  }
+}
+
+.auth-footer {
+  margin-top: 2rem;
+  text-align: center;
+  
+  p {
+    margin: 0;
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+}
+
+.visual-content {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: white;
+  z-index: 1;
+}
+
+.visual-gradient {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.1) 0%,
+    transparent 100%
+  );
+  z-index: 1;
+}
+
+.visual-pattern {
+  position: absolute;
+  inset: 0;
+  opacity: 0.1;
+  background-image: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 35px,
+    rgba(255, 255, 255, 0.1) 35px,
+    rgba(255, 255, 255, 0.1) 70px
+  );
+  z-index: 0;
+}
+
+.visual-text {
+  position: relative;
+  z-index: 2;
+  
+  h3 {
+    margin: 0 0 1rem;
+    font-size: 2rem;
+    font-weight: 700;
+  }
+  
+  p {
+    margin: 0 0 3rem;
+    font-size: 1.125rem;
+    opacity: 0.95;
+    line-height: 1.6;
+  }
+}
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  
+  &__value {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 0.25rem;
+  }
+  
+  &__label {
+    font-size: 0.875rem;
+    opacity: 0.9;
+  }
+}
+
+.visual-decoration {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.decoration-circle {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.05);
+  
+  &--1 {
+    width: 300px;
+    height: 300px;
+    top: -150px;
+    right: -150px;
+  }
+  
+  &--2 {
+    width: 200px;
+    height: 200px;
+    bottom: -100px;
+    left: -100px;
+  }
+  
+  &--3 {
+    width: 150px;
+    height: 150px;
+    top: 50%;
+    right: 10%;
+    transform: translateY(-50%);
+  }
+}
+
+// Responsive
+@media (max-width: 1024px) {
+  .auth-container {
+    grid-template-columns: 1fr;
+    max-width: 500px;
+  }
+  
+  .auth-panel--visual {
+    display: none;
+  }
+}
+
+@media (max-width: 640px) {
+  .auth-panel {
+    padding: 2rem;
+  }
+  
+  .social-buttons {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

pages/auth/setup-password.vue

@@ -29,6 +29,22 @@
 
               <!-- Password Setup Form -->
               <v-form ref="formRef" v-model="formValid" @submit.prevent="setupPassword">
+                <!-- Email Input (shown when email is not provided in URL) -->
+                <v-text-field
+                  v-if="showEmailInput"
+                  v-model="email"
+                  label="Email Address"
+                  variant="outlined"
+                  density="comfortable"
+                  :rules="emailRules"
+                  :error="!!errorMessage"
+                  prepend-inner-icon="mdi-email"
+                  class="mb-3"
+                  autocomplete="email"
+                  type="email"
+                  placeholder="Enter your email address"
+                />
+
                 <v-text-field
                   v-model="password"
                   :type="showPassword ? 'text' : 'password'"
@@ -163,13 +179,26 @@ definePageMeta({
   middleware: 'guest'
 });
 
-import { getStaticDeviceInfo, getDeviceCssClasses, applyMobileSafariOptimizations, getMobileSafariViewportMeta } from '~/utils/static-device-detection';
+// Device detection
+const isMobile = ref(false);
+const isMobileSafari = ref(false);
 
-// Static device detection - no reactive dependencies
-const deviceInfo = getStaticDeviceInfo();
+// Initialize device detection on mount
+onMounted(() => {
+  if (process.client) {
+    const userAgent = navigator.userAgent;
+    isMobile.value = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) || window.innerWidth <= 768;
+    isMobileSafari.value = /iPhone|iPad|iPod/i.test(userAgent) && /Safari/i.test(userAgent);
+  }
+});
 
-// Static CSS classes - computed once, never reactive
-const containerClasses = ref(getDeviceCssClasses('password-setup-page'));
+// CSS classes based on device detection
+const containerClasses = computed(() => {
+  const classes = ['password-setup-page'];
+  if (isMobile.value) classes.push('is-mobile');
+  if (isMobileSafari.value) classes.push('is-mobile-safari', 'performance-mode');
+  return classes.join(' ');
+});
 
 // Reactive state
 const loading = ref(false);
@@ -187,6 +216,7 @@ const confirmPassword = ref('');
 const route = useRoute();
 const email = ref((route.query.email as string) || '');
 const token = ref((route.query.token as string) || '');
+const showEmailInput = ref(!email.value); // Show email input if email is not provided
 
 // Form ref
 const formRef = ref();
@@ -235,6 +265,11 @@ const confirmPasswordRules = [
   (v: string) => v === password.value || 'Passwords do not match',
 ];
 
+const emailRules = [
+  (v: string) => !!v || 'Email address is required',
+  (v: string) => /.+@.+\..+/.test(v) || 'Please enter a valid email address',
+];
+
 // Set page title with mobile viewport optimization
 useHead({
   title: 'Set Your Password - MonacoUSA Portal',
@@ -243,7 +278,7 @@ useHead({
       name: 'description',
       content: 'Set your password to complete your MonacoUSA Portal registration.'
     },
-    { name: 'viewport', content: getMobileSafariViewportMeta() }
+    { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover' }
   ]
 });
 
@@ -311,25 +346,10 @@ const setupPassword = async () => {
   }
 };
 
-// Component initialization - Safari iOS reload loop prevention
+// Component initialization
 onMounted(async () => {
   console.log('[setup-password] Password setup page loaded for:', email.value);
   
-  // CRITICAL: Check reload loop prevention first
-  const { initReloadLoopPrevention } = await import('~/utils/reload-loop-prevention');
-  const canLoad = initReloadLoopPrevention('setup-password-page');
-  
-  if (!canLoad) {
-    console.error('[setup-password] Page load blocked by reload loop prevention system');
-    return; // Stop all initialization if blocked
-  }
-  
-  // Apply mobile Safari optimizations early
-  if (deviceInfo.isMobileSafari) {
-    applyMobileSafariOptimizations();
-    console.log('[setup-password] Mobile Safari optimizations applied');
-  }
-  
   // Check if we have required parameters
   if (!email.value) {
     errorMessage.value = 'No email address provided. Please use the link from your verification email.';

pages/auth/signup-mockup.vue

@@ -0,0 +1,747 @@
+<template>
+  <div class="auth-page">
+    <div class="auth-container auth-container--wide">
+      <!-- Progress Bar -->
+      <div class="progress-bar">
+        <div 
+          class="progress-bar__fill" 
+          :style="{ width: `${(step / 3) * 100}%` }"
+        ></div>
+      </div>
+      
+      <!-- Step 1: Account Info -->
+      <div 
+        v-if="step === 1"
+        v-motion
+        :initial="{ opacity: 0, x: 50 }"
+        :enter="{ opacity: 1, x: 0 }"
+        class="signup-step"
+      >
+        <div class="auth-logo">
+          <img src="/MONACOUSA-Flags_376x376.png" alt="MonacoUSA" class="logo" />
+          <h1>MonacoUSA Portal</h1>
+        </div>
+        
+        <div class="auth-header">
+          <h2>Create Your Account</h2>
+          <p>Join Monaco's premier business community</p>
+        </div>
+        
+        <form class="auth-form" @submit.prevent="nextStep">
+          <div class="form-row">
+            <FloatingInput
+              v-model="form.firstName"
+              label="First Name"
+              variant="glass"
+              leftIcon="user"
+              required
+            />
+            <FloatingInput
+              v-model="form.lastName"
+              label="Last Name"
+              variant="glass"
+              leftIcon="user"
+              required
+            />
+          </div>
+          
+          <FloatingInput
+            v-model="form.email"
+            label="Email Address"
+            type="email"
+            variant="glass"
+            leftIcon="mail"
+            helperText="We'll use this for account notifications"
+            required
+          />
+          
+          <FloatingInput
+            v-model="form.password"
+            label="Password"
+            type="password"
+            variant="glass"
+            leftIcon="lock"
+            helperText="Minimum 8 characters with uppercase and number"
+            required
+          />
+          
+          <FloatingInput
+            v-model="form.confirmPassword"
+            label="Confirm Password"
+            type="password"
+            variant="glass"
+            leftIcon="lock"
+            :error="passwordError"
+            required
+          />
+          
+          <div class="password-strength">
+            <span class="password-strength__label">Password Strength:</span>
+            <div class="password-strength__bars">
+              <span 
+                v-for="i in 4" 
+                :key="i"
+                class="password-strength__bar"
+                :class="{ 'password-strength__bar--filled': i <= passwordStrength }"
+              ></span>
+            </div>
+            <span class="password-strength__text">{{ passwordStrengthText }}</span>
+          </div>
+          
+          <MonacoButton 
+            type="submit" 
+            variant="primary" 
+            size="lg" 
+            block
+          >
+            Continue to Profile
+          </MonacoButton>
+        </form>
+        
+        <div class="auth-footer">
+          <p>Already have an account? <a href="/auth/login" class="link">Sign in</a></p>
+        </div>
+      </div>
+      
+      <!-- Step 2: Profile Info -->
+      <div 
+        v-if="step === 2"
+        v-motion
+        :initial="{ opacity: 0, x: 50 }"
+        :enter="{ opacity: 1, x: 0 }"
+        class="signup-step"
+      >
+        <div class="step-header">
+          <button @click="previousStep" class="back-button">
+            <Icon name="arrow-left" />
+            Back
+          </button>
+          <h2>Professional Information</h2>
+        </div>
+        
+        <form class="auth-form" @submit.prevent="nextStep">
+          <FloatingInput
+            v-model="form.company"
+            label="Company Name"
+            variant="glass"
+            leftIcon="building"
+            required
+          />
+          
+          <FloatingInput
+            v-model="form.title"
+            label="Job Title"
+            variant="glass"
+            leftIcon="briefcase"
+            required
+          />
+          
+          <div class="form-row">
+            <FloatingInput
+              v-model="form.phone"
+              label="Phone Number"
+              type="tel"
+              variant="glass"
+              leftIcon="phone"
+              required
+            />
+            <FloatingInput
+              v-model="form.linkedin"
+              label="LinkedIn Profile"
+              variant="glass"
+              leftIcon="link"
+              helperText="Optional"
+            />
+          </div>
+          
+          <div class="form-group">
+            <label class="form-label">Industry</label>
+            <select v-model="form.industry" class="form-select">
+              <option value="">Select your industry</option>
+              <option value="finance">Finance & Banking</option>
+              <option value="tech">Technology</option>
+              <option value="realestate">Real Estate</option>
+              <option value="hospitality">Hospitality</option>
+              <option value="retail">Retail & Luxury</option>
+              <option value="consulting">Consulting</option>
+              <option value="legal">Legal Services</option>
+              <option value="other">Other</option>
+            </select>
+          </div>
+          
+          <div class="form-group">
+            <label class="form-label">Bio</label>
+            <textarea 
+              v-model="form.bio"
+              class="form-textarea"
+              placeholder="Tell us about yourself and your business interests..."
+              rows="4"
+            ></textarea>
+          </div>
+          
+          <MonacoButton 
+            type="submit" 
+            variant="primary" 
+            size="lg" 
+            block
+          >
+            Continue to Membership
+          </MonacoButton>
+        </form>
+      </div>
+      
+      <!-- Step 3: Membership -->
+      <div 
+        v-if="step === 3"
+        v-motion
+        :initial="{ opacity: 0, x: 50 }"
+        :enter="{ opacity: 1, x: 0 }"
+        class="signup-step"
+      >
+        <div class="step-header">
+          <button @click="previousStep" class="back-button">
+            <Icon name="arrow-left" />
+            Back
+          </button>
+          <h2>Choose Your Membership</h2>
+        </div>
+        
+        <div class="membership-plans">
+          <div 
+            v-for="plan in membershipPlans" 
+            :key="plan.id"
+            class="plan-card"
+            :class="{ 'plan-card--selected': form.membershipPlan === plan.id }"
+            @click="form.membershipPlan = plan.id"
+          >
+            <div class="plan-card__header">
+              <h3 class="plan-card__name">{{ plan.name }}</h3>
+              <span class="plan-card__price">${{ plan.price }}/year</span>
+            </div>
+            <ul class="plan-card__features">
+              <li v-for="feature in plan.features" :key="feature">
+                <Icon name="check" />
+                {{ feature }}
+              </li>
+            </ul>
+            <span v-if="plan.popular" class="plan-card__badge">Most Popular</span>
+          </div>
+        </div>
+        
+        <div class="terms-section">
+          <label class="checkbox-label">
+            <input type="checkbox" v-model="form.agreeTerms" />
+            <span>
+              I agree to the <a href="/terms" class="link">Terms of Service</a> 
+              and <a href="/privacy" class="link">Privacy Policy</a>
+            </span>
+          </label>
+          
+          <label class="checkbox-label">
+            <input type="checkbox" v-model="form.agreeNewsletter" />
+            <span>Send me updates about events and opportunities</span>
+          </label>
+        </div>
+        
+        <MonacoButton 
+          variant="primary" 
+          size="lg" 
+          block
+          :disabled="!form.agreeTerms || !form.membershipPlan"
+          @click="handleSignup"
+        >
+          Complete Registration
+        </MonacoButton>
+      </div>
+      
+      <!-- Success State -->
+      <div 
+        v-if="step === 4"
+        v-motion
+        :initial="{ opacity: 0, scale: 0.9 }"
+        :enter="{ opacity: 1, scale: 1 }"
+        class="success-state"
+      >
+        <div class="success-icon">🎉</div>
+        <h2>Welcome to MonacoUSA!</h2>
+        <p>Your account has been created successfully.</p>
+        <p>Please check your email to verify your account.</p>
+        <MonacoButton variant="primary" size="lg" @click="goToLogin">
+          Go to Login
+        </MonacoButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import FloatingInput from '~/components/ui/FloatingInput.vue'
+import MonacoButton from '~/components/ui/MonacoButton.vue'
+import Icon from '~/components/ui/Icon.vue'
+
+const step = ref(1)
+
+const form = ref({
+  // Step 1
+  firstName: '',
+  lastName: '',
+  email: '',
+  password: '',
+  confirmPassword: '',
+  // Step 2
+  company: '',
+  title: '',
+  phone: '',
+  linkedin: '',
+  industry: '',
+  bio: '',
+  // Step 3
+  membershipPlan: '',
+  agreeTerms: false,
+  agreeNewsletter: true
+})
+
+const membershipPlans = [
+  {
+    id: 'basic',
+    name: 'Basic',
+    price: 250,
+    features: [
+      'Access to member directory',
+      'Monthly newsletter',
+      'Event invitations',
+      'Basic networking features'
+    ]
+  },
+  {
+    id: 'professional',
+    name: 'Professional',
+    price: 500,
+    popular: true,
+    features: [
+      'Everything in Basic',
+      'Priority event registration',
+      'Enhanced profile features',
+      'Business matchmaking',
+      'Quarterly exclusive events'
+    ]
+  },
+  {
+    id: 'executive',
+    name: 'Executive',
+    price: 1000,
+    features: [
+      'Everything in Professional',
+      'VIP event access',
+      'Personal concierge service',
+      'Board meeting participation',
+      'Guest passes (5/year)',
+      'Premium networking tools'
+    ]
+  }
+]
+
+const passwordError = computed(() => {
+  if (form.value.confirmPassword && form.value.password !== form.value.confirmPassword) {
+    return 'Passwords do not match'
+  }
+  return ''
+})
+
+const passwordStrength = computed(() => {
+  const password = form.value.password
+  if (!password) return 0
+  
+  let strength = 0
+  if (password.length >= 8) strength++
+  if (/[A-Z]/.test(password)) strength++
+  if (/[0-9]/.test(password)) strength++
+  if (/[^A-Za-z0-9]/.test(password)) strength++
+  
+  return strength
+})
+
+const passwordStrengthText = computed(() => {
+  const texts = ['', 'Weak', 'Fair', 'Good', 'Strong']
+  return texts[passwordStrength.value]
+})
+
+const nextStep = () => {
+  step.value++
+}
+
+const previousStep = () => {
+  step.value--
+}
+
+const handleSignup = () => {
+  console.log('Signup with:', form.value)
+  step.value = 4
+}
+
+const goToLogin = () => {
+  window.location.href = '/auth/login'
+}
+</script>
+
+<style scoped lang="scss">
+.auth-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
+  padding: 2rem;
+}
+
+.auth-container {
+  max-width: 500px;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(20px);
+  border-radius: 24px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  
+  &--wide {
+    max-width: 800px;
+  }
+}
+
+.progress-bar {
+  height: 4px;
+  background: rgba(220, 38, 38, 0.1);
+  
+  &__fill {
+    height: 100%;
+    background: linear-gradient(90deg, #dc2626 0%, #b91c1c 100%);
+    transition: width 0.3s ease;
+  }
+}
+
+.signup-step {
+  padding: 3rem;
+}
+
+.auth-logo {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  
+  img {
+    width: 48px;
+    height: 48px;
+  }
+  
+  h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #dc2626;
+  }
+}
+
+.auth-header {
+  margin-bottom: 2rem;
+  
+  h2 {
+    margin: 0 0 0.5rem;
+    font-size: 2rem;
+    font-weight: 700;
+    color: #27272a;
+  }
+  
+  p {
+    margin: 0;
+    color: #6b7280;
+  }
+}
+
+.step-header {
+  margin-bottom: 2rem;
+  
+  h2 {
+    margin: 0.5rem 0 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #27272a;
+  }
+}
+
+.back-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0;
+  background: none;
+  border: none;
+  color: #6b7280;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: color 0.2s;
+  
+  &:hover {
+    color: #dc2626;
+  }
+}
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.form-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #27272a;
+}
+
+.form-select,
+.form-textarea {
+  padding: 0.75rem 1rem;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20px);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 12px;
+  font-size: 1rem;
+  color: #27272a;
+  transition: all 0.2s;
+  
+  &:focus {
+    outline: none;
+    border-color: #dc2626;
+    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+  }
+}
+
+.form-textarea {
+  resize: vertical;
+  min-height: 100px;
+  font-family: inherit;
+}
+
+.password-strength {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: rgba(220, 38, 38, 0.05);
+  border-radius: 8px;
+  
+  &__label {
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+  
+  &__bars {
+    display: flex;
+    gap: 0.25rem;
+    flex: 1;
+  }
+  
+  &__bar {
+    height: 4px;
+    flex: 1;
+    background: #e5e5e5;
+    border-radius: 2px;
+    transition: background 0.3s;
+    
+    &--filled {
+      background: #dc2626;
+    }
+  }
+  
+  &__text {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #dc2626;
+  }
+}
+
+.membership-plans {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.plan-card {
+  position: relative;
+  padding: 1.5rem;
+  background: white;
+  border: 2px solid #e5e5e5;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  
+  &:hover {
+    border-color: #dc2626;
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  }
+  
+  &--selected {
+    border-color: #dc2626;
+    background: rgba(220, 38, 38, 0.05);
+  }
+  
+  &__header {
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #e5e5e5;
+  }
+  
+  &__name {
+    margin: 0 0 0.5rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: #27272a;
+  }
+  
+  &__price {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #dc2626;
+  }
+  
+  &__features {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    
+    li {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 0.75rem;
+      font-size: 0.875rem;
+      color: #6b7280;
+      
+      svg {
+        width: 1rem;
+        height: 1rem;
+        color: #10b981;
+        flex-shrink: 0;
+      }
+    }
+  }
+  
+  &__badge {
+    position: absolute;
+    top: -0.5rem;
+    right: 1rem;
+    padding: 0.25rem 0.75rem;
+    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+    color: white;
+    border-radius: 20px;
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+}
+
+.terms-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  cursor: pointer;
+  
+  input[type="checkbox"] {
+    margin-top: 0.125rem;
+    width: 1.25rem;
+    height: 1.25rem;
+    accent-color: #dc2626;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+  
+  span {
+    font-size: 0.875rem;
+    color: #6b7280;
+    line-height: 1.5;
+  }
+}
+
+.link {
+  color: #dc2626;
+  text-decoration: none;
+  font-weight: 500;
+  
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.auth-footer {
+  margin-top: 2rem;
+  text-align: center;
+  
+  p {
+    margin: 0;
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+}
+
+.success-state {
+  padding: 4rem;
+  text-align: center;
+  
+  .success-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+  }
+  
+  h2 {
+    margin: 0 0 1rem;
+    font-size: 2rem;
+    font-weight: 700;
+    color: #27272a;
+  }
+  
+  p {
+    margin: 0 0 0.5rem;
+    color: #6b7280;
+    
+    &:last-of-type {
+      margin-bottom: 2rem;
+    }
+  }
+}
+
+// Responsive
+@media (max-width: 768px) {
+  .membership-plans {
+    grid-template-columns: 1fr;
+  }
+  
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+  
+  .signup-step {
+    padding: 2rem;
+  }
+}
+</style>

pages/auth/verify-success.vue

@@ -91,26 +91,36 @@
 </template>
 
 <script setup lang="ts">
-import { getStaticDeviceInfo, getDeviceCssClasses, applyMobileSafariOptimizations, getMobileSafariViewportMeta } from '~/utils/static-device-detection';
-
 definePageMeta({
   layout: false,
   middleware: 'guest'
 });
 
-// Get query parameters - static to prevent reload loops
+// Get query parameters
 const route = useRoute();
 const email = ref((route.query.email as string) || '');
 const partialWarning = ref(route.query.warning === 'partial');
 
-// Static device detection - no reactive dependencies
-const deviceInfo = getStaticDeviceInfo();
+// Simple device detection
+const isMobile = ref(false);
+const isMobileSafari = ref(false);
 
-// Static CSS classes - computed once, never reactive
-const containerClasses = ref(getDeviceCssClasses('verification-success'));
+// Initialize device detection on mount
+onMounted(() => {
+  if (process.client) {
+    const userAgent = navigator.userAgent;
+    isMobile.value = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) || window.innerWidth <= 768;
+    isMobileSafari.value = /iPhone|iPad|iPod/i.test(userAgent) && /Safari/i.test(userAgent);
+  }
+});
 
-// Static setup password URL - no reactive dependencies
-const setupPasswordUrl = 'https://auth.monacousa.org/realms/monacousa/account/';
+// CSS classes based on device detection
+const containerClasses = computed(() => {
+  const classes = ['verification-success'];
+  if (isMobile.value) classes.push('is-mobile');
+  if (isMobileSafari.value) classes.push('is-mobile-safari');
+  return classes.join(' ');
+});
 
 // Set page title with mobile viewport optimization
 useHead({
@@ -120,7 +130,10 @@ useHead({
       name: 'description',
       content: 'Your email has been successfully verified. You can now log in to the MonacoUSA Portal.'
     },
-    { name: 'viewport', content: getMobileSafariViewportMeta() }
+    { 
+      name: 'viewport', 
+      content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover'
+    }
   ]
 });
 
@@ -134,19 +147,12 @@ const goToPasswordSetup = () => {
   });
 };
 
-// Track verification - Safari iOS reload loop prevention
+// Track verification
 onMounted(() => {
   console.log('[verify-success] Email verification completed', { 
     email: email.value,
-    partialWarning: partialWarning.value,
-    setupPasswordUrl: setupPasswordUrl
+    partialWarning: partialWarning.value
   });
-
-  // Apply mobile Safari optimizations early
-  if (deviceInfo.isMobileSafari) {
-    applyMobileSafariOptimizations();
-    console.log('[verify-success] Mobile Safari optimizations applied');
-  }
 });
 </script>
 

pages/auth/verify.vue

@@ -54,17 +54,14 @@
                   Verifying Your Email
                 </h1>
                 
-                <p class="text-body-1 text-medium-emphasis" v-if="verificationState">
+                <p class="text-body-1 text-medium-emphasis">
                   {{ statusMessage || 'Please wait while we verify your email address...' }}
                 </p>
-                <p class="text-body-1 text-medium-emphasis" v-else>
-                  Please wait while we verify your email address...
-                </p>
 
                 <!-- Attempt Counter -->
-                <div v-if="verificationState && verificationState.attempts > 1" class="mt-2">
+                <div v-if="attemptCount > 1" class="mt-2">
                   <v-chip size="small" color="primary" variant="outlined">
-                    Attempt {{ verificationState.attempts }}/{{ verificationState.maxAttempts }}
+                    Attempt {{ attemptCount }}/{{ maxAttempts }}
                   </v-chip>
                 </div>
               </div>
@@ -88,7 +85,7 @@
                 </p>
 
                 <!-- Circuit Breaker Status -->
-                <div v-if="verificationState && statusMessage" class="mb-4">
+                <div v-if="statusMessage" class="mb-4">
                   <v-alert
                     type="info"
                     variant="tonal"
@@ -210,18 +207,6 @@ definePageMeta({
   middleware: 'guest'
 });
 
-import { getStaticDeviceInfo, getDeviceCssClasses, applyMobileSafariOptimizations, getMobileSafariViewportMeta } from '~/utils/static-device-detection';
-import { 
-  getVerificationState, 
-  initVerificationState, 
-  recordAttempt, 
-  shouldBlockVerification, 
-  getStatusMessage,
-  navigateWithFallback,
-  getMobileNavigationDelay,
-  type VerificationAttempt
-} from '~/utils/verification-state';
-
 // Get route and token immediately
 const route = useRoute();
 const token = route.query.token as string || '';
@@ -231,17 +216,33 @@ const verifying = ref(false);
 const error = ref('');
 const partialSuccess = ref(false);
 
-// Verification state management
-const verificationState = ref<VerificationAttempt | null>(null);
+// Simple retry logic
 const isBlocked = ref(false);
 const canRetry = ref(true);
 const statusMessage = ref('');
+const attemptCount = ref(0);
+const maxAttempts = 3;
 
-// Static device detection - no reactive dependencies
-const deviceInfo = getStaticDeviceInfo();
+// Device detection
+const isMobile = ref(false);
+const isMobileSafari = ref(false);
 
-// Static container classes - must be reactive for template
-const containerClasses = ref(getDeviceCssClasses('verification-page'));
+// Initialize device detection on mount
+onMounted(() => {
+  if (process.client) {
+    const userAgent = navigator.userAgent;
+    isMobile.value = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) || window.innerWidth <= 768;
+    isMobileSafari.value = /iPhone|iPad|iPod/i.test(userAgent) && /Safari/i.test(userAgent);
+  }
+});
+
+// CSS classes based on device detection
+const containerClasses = computed(() => {
+  const classes = ['verification-page'];
+  if (isMobile.value) classes.push('is-mobile');
+  if (isMobileSafari.value) classes.push('is-mobile-safari', 'performance-mode');
+  return classes.join(' ');
+});
 
 // Set page title with mobile viewport optimization
 useHead({
@@ -251,49 +252,43 @@ useHead({
       name: 'description',
       content: 'Verifying your email address for the MonacoUSA Portal.'
     },
-    { name: 'viewport', content: getMobileSafariViewportMeta() }
+    { 
+      name: 'viewport', 
+      content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover'
+    }
   ]
 });
 
-// Update UI state based on verification state
+// Simple verification logic
 const updateUIState = () => {
-  if (!verificationState.value) return;
-
-  statusMessage.value = getStatusMessage(verificationState.value);
-  isBlocked.value = shouldBlockVerification(token);
-  canRetry.value = verificationState.value.attempts < verificationState.value.maxAttempts && !isBlocked.value;
-
-  console.log('[auth/verify] UI State updated:', {
-    status: verificationState.value.status,
-    attempts: verificationState.value.attempts,
-    isBlocked: isBlocked.value,
-    canRetry: canRetry.value
-  });
+  if (attemptCount.value >= maxAttempts) {
+    isBlocked.value = true;
+    canRetry.value = false;
+    statusMessage.value = `Too many failed attempts. Please wait before trying again.`;
+  } else {
+    canRetry.value = attemptCount.value < maxAttempts;
+  }
 };
 
-// Verify email function with circuit breaker
+// Verify email function
 const verifyEmail = async () => {
   if (!token) {
     error.value = 'No verification token provided. Please check your email for the correct verification link.';
     return;
   }
 
-  // Initialize or get existing verification state
-  verificationState.value = initVerificationState(token);
-  updateUIState();
-
-  // Check if verification should be blocked
-  if (shouldBlockVerification(token)) {
-    console.log('[auth/verify] Verification blocked by circuit breaker');
+  if (attemptCount.value >= maxAttempts) {
+    isBlocked.value = true;
     return;
   }
 
-  console.log(`[auth/verify] Starting verification attempt ${verificationState.value.attempts + 1}/${verificationState.value.maxAttempts}`);
-
   try {
     verifying.value = true;
     error.value = '';
     partialSuccess.value = false;
+    attemptCount.value++;
+
+    console.log(`[auth/verify] Starting verification attempt ${attemptCount.value}/${maxAttempts}`);
 
     // Call the API endpoint to verify the email
     const response = await $fetch(`/api/auth/verify-email?token=${token}`, {
@@ -302,10 +297,6 @@ const verifyEmail = async () => {
 
     console.log('[auth/verify] Email verification successful:', response);
 
-    // Record successful attempt
-    verificationState.value = recordAttempt(token, true);
-    updateUIState();
-
     // Extract response data
     const email = response?.data?.email || '';
     const isPartialSuccess = response?.data?.partialSuccess || false;
@@ -335,26 +326,22 @@ const verifyEmail = async () => {
       redirectUrl += '?' + queryParams.join('&');
     }
     
-    // Use progressive navigation with mobile delay
-    const navigationDelay = getMobileNavigationDelay();
-    console.log(`[auth/verify] Navigating to success page with ${navigationDelay}ms delay`);
+    // Navigate to success page
+    console.log(`[auth/verify] Navigating to success page`);
     
     setTimeout(async () => {
       try {
-        await navigateWithFallback(redirectUrl, { replace: true });
+        await navigateTo(redirectUrl, { replace: true });
       } catch (navError) {
         console.error('[auth/verify] Navigation failed:', navError);
         // Final fallback - direct window location
         window.location.replace(redirectUrl);
       }
-    }, navigationDelay);
+    }, 500);
 
   } catch (err: any) {
     console.error('[auth/verify] Email verification failed:', err);
     
-    // Record failed attempt
-    const errorMessage = err.data?.message || err.message || 'Email verification failed';
-    verificationState.value = recordAttempt(token, false, errorMessage);
     updateUIState();
     
     // Set error message based on status code
@@ -367,7 +354,7 @@ const verifyEmail = async () => {
     } else if (err.statusCode === 404) {
       error.value = 'User not found. The verification token may be invalid.';
     } else {
-      error.value = errorMessage;
+      error.value = err.data?.message || err.message || 'Email verification failed';
     }
     
     verifying.value = false;
@@ -385,41 +372,16 @@ const retryVerification = async () => {
   await verifyEmail();
 };
 
-// Component initialization - Safari iOS reload loop prevention
+// Component initialization
 onMounted(async () => {
   console.log('[auth/verify] Component mounted with token:', token?.substring(0, 20) + '...');
 
-  // CRITICAL: Check reload loop prevention first
-  const { initReloadLoopPrevention } = await import('~/utils/reload-loop-prevention');
-  const canLoad = initReloadLoopPrevention('verify-page');
-  
-  if (!canLoad) {
-    console.error('[auth/verify] Page load blocked by reload loop prevention system');
-    return; // Stop all initialization if blocked
-  }
-
-  // Apply mobile Safari optimizations early
-  if (deviceInfo.isMobileSafari) {
-    applyMobileSafariOptimizations();
-    console.log('[auth/verify] Mobile Safari optimizations applied');
-  }
-
   // Check if token exists
   if (!token) {
     error.value = 'No verification token provided. Please check your email for the correct verification link.';
     return;
   }
   
-  // Initialize verification state
-  verificationState.value = initVerificationState(token, 3);
-  updateUIState();
-
-  // Check if verification is blocked before starting
-  if (shouldBlockVerification(token)) {
-    console.log('[auth/verify] Verification blocked by circuit breaker on mount');
-    return;
-  }
-  
   // Start verification process with a small delay to ensure stability
   setTimeout(() => {
     verifyEmail();

pages/board/dashboard-v2.vue

@@ -0,0 +1,886 @@
+<template>
+  <div class="board-dashboard-v2">
+    <!-- Executive Header -->
+    <div class="executive-header">
+      <h1 class="dashboard-title">Executive Dashboard</h1>
+      <p class="dashboard-subtitle">Strategic insights and governance overview</p>
+    </div>
+
+    <!-- KPI Cards with Neumorphic Design -->
+    <div class="kpi-grid">
+      <div class="kpi-card neumorphic-card" v-for="kpi in kpis" :key="kpi.id">
+        <div class="kpi-header">
+          <div class="kpi-icon-wrapper neumorphic-inset">
+            <Icon :name="kpi.icon" class="kpi-icon" :style="{ color: kpi.color }" />
+          </div>
+          <div class="kpi-trend" :class="kpi.trendType">
+            <Icon :name="kpi.trendIcon" class="trend-icon" />
+            <span>{{ kpi.trendValue }}</span>
+          </div>
+        </div>
+        <div class="kpi-content">
+          <div class="kpi-value">{{ kpi.value }}</div>
+          <div class="kpi-label">{{ kpi.label }}</div>
+          <div class="kpi-progress">
+            <div class="progress-bar neumorphic-inset">
+              <div class="progress-fill" :style="{ width: kpi.progress + '%', background: kpi.color }"></div>
+            </div>
+            <span class="progress-text">{{ kpi.progress }}% of target</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Strategic Initiatives & Governance -->
+    <div class="governance-grid">
+      <!-- Strategic Initiatives -->
+      <div class="initiative-card neumorphic-card">
+        <div class="card-header">
+          <Icon name="mdi:target" class="header-icon" />
+          <h2>Strategic Initiatives</h2>
+          <div class="morphing-select-wrapper">
+            <button class="select-trigger neumorphic-button small" @click="toggleQuarter">
+              <span>{{ selectedQuarter }}</span>
+              <Icon name="mdi:chevron-down" class="dropdown-icon" :class="{ 'rotate': showQuarter }" />
+            </button>
+            <Transition name="morph">
+              <div v-if="showQuarter" class="morphing-dropdown">
+                <div 
+                  v-for="quarter in quarters" 
+                  :key="quarter"
+                  class="dropdown-option"
+                  @click="selectQuarter(quarter)"
+                >
+                  {{ quarter }}
+                </div>
+              </div>
+            </Transition>
+          </div>
+        </div>
+        
+        <div class="initiatives-list">
+          <div v-for="initiative in strategicInitiatives" :key="initiative.id" class="initiative-item">
+            <div class="initiative-header">
+              <span class="initiative-name">{{ initiative.name }}</span>
+              <span class="initiative-status" :class="initiative.status">{{ initiative.statusText }}</span>
+            </div>
+            <div class="initiative-progress neumorphic-inset">
+              <div class="progress-bar-slim">
+                <div class="progress-fill-slim" :style="{ width: initiative.progress + '%' }"></div>
+              </div>
+            </div>
+            <div class="initiative-meta">
+              <span class="initiative-owner">Owner: {{ initiative.owner }}</span>
+              <span class="initiative-deadline">Due: {{ initiative.deadline }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Committee Overview -->
+      <div class="committee-card neumorphic-card">
+        <div class="card-header">
+          <Icon name="mdi:account-group-outline" class="header-icon" />
+          <h2>Committee Activities</h2>
+        </div>
+        
+        <div class="committee-grid">
+          <div v-for="committee in committees" :key="committee.id" class="committee-item neumorphic-inset">
+            <div class="committee-header">
+              <Icon :name="committee.icon" class="committee-icon" :style="{ color: committee.color }" />
+              <h3>{{ committee.name }}</h3>
+            </div>
+            <div class="committee-stats">
+              <div class="stat">
+                <span class="stat-value">{{ committee.members }}</span>
+                <span class="stat-label">Members</span>
+              </div>
+              <div class="stat">
+                <span class="stat-value">{{ committee.meetings }}</span>
+                <span class="stat-label">Meetings</span>
+              </div>
+            </div>
+            <button class="neumorphic-button small full-width">View Details</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Financial Overview -->
+    <div class="financial-section neumorphic-card">
+      <div class="card-header">
+        <Icon name="mdi:finance" class="header-icon" />
+        <h2>Financial Overview</h2>
+        <div class="time-selector">
+          <button 
+            v-for="period in timePeriods" 
+            :key="period"
+            class="time-button neumorphic-button small"
+            :class="{ 'active': selectedPeriod === period }"
+            @click="selectedPeriod = period"
+          >
+            {{ period }}
+          </button>
+        </div>
+      </div>
+      
+      <div class="financial-grid">
+        <div class="revenue-chart">
+          <h3>Revenue Trend</h3>
+          <div class="chart-placeholder neumorphic-inset">
+            <Icon name="mdi:chart-line" class="chart-icon" />
+            <span>Revenue chart visualization</span>
+          </div>
+        </div>
+        
+        <div class="financial-metrics">
+          <div v-for="metric in financialMetrics" :key="metric.id" class="metric-item">
+            <div class="metric-label">{{ metric.label }}</div>
+            <div class="metric-value" :class="metric.type">{{ metric.value }}</div>
+            <div class="metric-change">
+              <Icon :name="metric.changeIcon" class="change-icon" />
+              <span>{{ metric.change }} from last period</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Governance Actions -->
+    <div class="governance-actions">
+      <div class="action-card neumorphic-card">
+        <Icon name="mdi:calendar-check" class="action-icon" />
+        <h3>Board Meetings</h3>
+        <p>Schedule and manage board meetings</p>
+        <button class="neumorphic-button primary">Schedule Meeting</button>
+      </div>
+      
+      <div class="action-card neumorphic-card">
+        <Icon name="mdi:file-document-outline" class="action-icon" />
+        <h3>Documents</h3>
+        <p>Access governance documents</p>
+        <button class="neumorphic-button primary">View Documents</button>
+      </div>
+      
+      <div class="action-card neumorphic-card">
+        <Icon name="mdi:vote" class="action-icon" />
+        <h3>Resolutions</h3>
+        <p>Review and vote on resolutions</p>
+        <button class="neumorphic-button primary">View Resolutions</button>
+      </div>
+      
+      <div class="action-card neumorphic-card">
+        <Icon name="mdi:chart-box-outline" class="action-icon" />
+        <h3>Reports</h3>
+        <p>Generate executive reports</p>
+        <button class="neumorphic-button primary">Generate Report</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+// Define page meta
+definePageMeta({
+  layout: 'board',
+  middleware: 'auth'
+})
+
+// KPIs
+const kpis = ref([
+  {
+    id: 1,
+    label: 'Member Growth',
+    value: '24.8%',
+    icon: 'mdi:account-multiple-plus',
+    color: '#10B981',
+    trendType: 'positive',
+    trendIcon: 'mdi:trending-up',
+    trendValue: '+5.2%',
+    progress: 82
+  },
+  {
+    id: 2,
+    label: 'Revenue YTD',
+    value: '$2.4M',
+    icon: 'mdi:cash-multiple',
+    color: '#3B82F6',
+    trendType: 'positive',
+    trendIcon: 'mdi:trending-up',
+    trendValue: '+12.3%',
+    progress: 68
+  },
+  {
+    id: 3,
+    label: 'Member Retention',
+    value: '94.5%',
+    icon: 'mdi:account-heart',
+    color: '#CC0000',
+    trendType: 'positive',
+    trendIcon: 'mdi:trending-up',
+    trendValue: '+2.1%',
+    progress: 95
+  },
+  {
+    id: 4,
+    label: 'NPS Score',
+    value: '72',
+    icon: 'mdi:emoticon-happy',
+    color: '#F59E0B',
+    trendType: 'neutral',
+    trendIcon: 'mdi:minus',
+    trendValue: '0%',
+    progress: 72
+  }
+])
+
+// Strategic Initiatives
+const strategicInitiatives = ref([
+  {
+    id: 1,
+    name: 'Digital Transformation Initiative',
+    status: 'on-track',
+    statusText: 'On Track',
+    progress: 65,
+    owner: 'John Smith',
+    deadline: 'Q2 2024'
+  },
+  {
+    id: 2,
+    name: 'Member Experience Enhancement',
+    status: 'ahead',
+    statusText: 'Ahead',
+    progress: 78,
+    owner: 'Sarah Johnson',
+    deadline: 'Q1 2024'
+  },
+  {
+    id: 3,
+    name: 'International Expansion',
+    status: 'at-risk',
+    statusText: 'At Risk',
+    progress: 42,
+    owner: 'Mike Chen',
+    deadline: 'Q3 2024'
+  }
+])
+
+// Committees
+const committees = ref([
+  {
+    id: 1,
+    name: 'Finance',
+    icon: 'mdi:calculator',
+    color: '#3B82F6',
+    members: 7,
+    meetings: 12
+  },
+  {
+    id: 2,
+    name: 'Governance',
+    icon: 'mdi:gavel',
+    color: '#CC0000',
+    members: 5,
+    meetings: 8
+  },
+  {
+    id: 3,
+    name: 'Audit',
+    icon: 'mdi:magnify',
+    color: '#F59E0B',
+    members: 4,
+    meetings: 10
+  },
+  {
+    id: 4,
+    name: 'Compensation',
+    icon: 'mdi:cash',
+    color: '#10B981',
+    members: 6,
+    meetings: 6
+  }
+])
+
+// Financial Metrics
+const financialMetrics = ref([
+  {
+    id: 1,
+    label: 'Total Revenue',
+    value: '$2.4M',
+    type: 'positive',
+    changeIcon: 'mdi:arrow-up',
+    change: '+12.3%'
+  },
+  {
+    id: 2,
+    label: 'Operating Expenses',
+    value: '$1.8M',
+    type: 'neutral',
+    changeIcon: 'mdi:arrow-up',
+    change: '+8.1%'
+  },
+  {
+    id: 3,
+    label: 'Net Profit',
+    value: '$620K',
+    type: 'positive',
+    changeIcon: 'mdi:arrow-up',
+    change: '+24.5%'
+  },
+  {
+    id: 4,
+    label: 'Cash Flow',
+    value: '$450K',
+    type: 'positive',
+    changeIcon: 'mdi:arrow-up',
+    change: '+15.2%'
+  }
+])
+
+// Dropdown states
+const showQuarter = ref(false)
+const selectedQuarter = ref('Q4 2023')
+const quarters = ref(['Q1 2023', 'Q2 2023', 'Q3 2023', 'Q4 2023', 'Q1 2024'])
+
+// Time period selector
+const selectedPeriod = ref('YTD')
+const timePeriods = ref(['MTD', 'QTD', 'YTD'])
+
+// Methods
+const toggleQuarter = () => {
+  showQuarter.value = !showQuarter.value
+}
+
+const selectQuarter = (quarter) => {
+  selectedQuarter.value = quarter
+  showQuarter.value = false
+}
+
+onMounted(() => {
+  // Close dropdown when clicking outside
+  document.addEventListener('click', (e) => {
+    if (!e.target.closest('.morphing-select-wrapper')) {
+      showQuarter.value = false
+    }
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/design-system-v2.scss';
+
+.board-dashboard-v2 {
+  padding: 2rem;
+  background: linear-gradient(135deg, $neutral-50 0%, $neutral-100 100%);
+  min-height: 100vh;
+}
+
+// Executive Header
+.executive-header {
+  text-align: center;
+  margin-bottom: 3rem;
+  
+  .dashboard-title {
+    font-size: $text-4xl;
+    font-weight: $font-bold;
+    background: linear-gradient(135deg, $primary-600, $primary-800);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 0.5rem;
+  }
+  
+  .dashboard-subtitle {
+    color: $neutral-600;
+    font-size: $text-lg;
+  }
+}
+
+// KPI Grid
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 3rem;
+}
+
+.kpi-card {
+  @include neumorphic-card('md');
+  padding: 1.5rem;
+  
+  .kpi-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+  }
+  
+  .kpi-icon-wrapper {
+    width: 48px;
+    height: 48px;
+    border-radius: $radius-lg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: $shadow-inset-sm;
+    
+    .kpi-icon {
+      width: 24px;
+      height: 24px;
+    }
+  }
+  
+  .kpi-trend {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: $text-sm;
+    font-weight: $font-semibold;
+    
+    &.positive { color: $success-500; }
+    &.negative { color: $error-500; }
+    &.neutral { color: $neutral-600; }
+    
+    .trend-icon {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  
+  .kpi-value {
+    font-size: $text-3xl;
+    font-weight: $font-bold;
+    color: $neutral-800;
+    margin-bottom: 0.5rem;
+  }
+  
+  .kpi-label {
+    color: $neutral-600;
+    font-size: $text-sm;
+    margin-bottom: 1rem;
+  }
+  
+  .kpi-progress {
+    .progress-bar {
+      height: 8px;
+      border-radius: $radius-full;
+      overflow: hidden;
+      margin-bottom: 0.5rem;
+      
+      .progress-fill {
+        height: 100%;
+        border-radius: $radius-full;
+        transition: width 0.5s $spring-smooth;
+      }
+    }
+    
+    .progress-text {
+      font-size: $text-xs;
+      color: $neutral-500;
+    }
+  }
+}
+
+// Governance Grid
+.governance-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  margin-bottom: 2rem;
+  
+  @media (max-width: $breakpoint-lg) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.initiative-card,
+.committee-card {
+  @include neumorphic-card('md');
+  padding: 2rem;
+  
+  .card-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+    position: relative;
+    
+    .header-icon {
+      width: 24px;
+      height: 24px;
+      color: $primary-600;
+    }
+    
+    h2 {
+      font-size: $text-xl;
+      font-weight: $font-semibold;
+      color: $neutral-800;
+      flex: 1;
+    }
+  }
+}
+
+// Strategic Initiatives
+.initiatives-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.initiative-item {
+  padding: 1rem;
+  border-radius: $radius-lg;
+  background: $neutral-50;
+  
+  .initiative-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+  }
+  
+  .initiative-name {
+    font-weight: $font-medium;
+    color: $neutral-800;
+    font-size: $text-sm;
+  }
+  
+  .initiative-status {
+    padding: 0.25rem 0.75rem;
+    border-radius: $radius-full;
+    font-size: $text-xs;
+    font-weight: $font-medium;
+    
+    &.on-track {
+      background: rgba($success-500, 0.1);
+      color: $success-500;
+    }
+    
+    &.ahead {
+      background: rgba($blue-500, 0.1);
+      color: $blue-500;
+    }
+    
+    &.at-risk {
+      background: rgba($warning-500, 0.1);
+      color: $warning-500;
+    }
+  }
+  
+  .initiative-progress {
+    margin-bottom: 0.75rem;
+    padding: 0.25rem;
+    border-radius: $radius-full;
+    
+    .progress-bar-slim {
+      height: 4px;
+      border-radius: $radius-full;
+      background: rgba($neutral-300, 0.3);
+      
+      .progress-fill-slim {
+        height: 100%;
+        background: linear-gradient(135deg, $primary-600, $primary-700);
+        border-radius: $radius-full;
+        transition: width 0.5s $spring-smooth;
+      }
+    }
+  }
+  
+  .initiative-meta {
+    display: flex;
+    justify-content: space-between;
+    font-size: $text-xs;
+    color: $neutral-600;
+  }
+}
+
+// Committee Grid
+.committee-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.committee-item {
+  padding: 1rem;
+  border-radius: $radius-lg;
+  
+  .committee-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+    
+    .committee-icon {
+      width: 20px;
+      height: 20px;
+    }
+    
+    h3 {
+      font-size: $text-sm;
+      font-weight: $font-semibold;
+      color: $neutral-800;
+    }
+  }
+  
+  .committee-stats {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 1rem;
+    
+    .stat {
+      text-align: center;
+      
+      .stat-value {
+        display: block;
+        font-size: $text-xl;
+        font-weight: $font-bold;
+        color: $neutral-800;
+      }
+      
+      .stat-label {
+        font-size: $text-xs;
+        color: $neutral-600;
+      }
+    }
+  }
+}
+
+// Financial Section
+.financial-section {
+  @include neumorphic-card('lg');
+  padding: 2rem;
+  margin-bottom: 2rem;
+  
+  .time-selector {
+    display: flex;
+    gap: 0.5rem;
+    
+    .time-button {
+      &.active {
+        background: linear-gradient(145deg, $primary-600, $primary-700);
+        color: white;
+      }
+    }
+  }
+}
+
+.financial-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  
+  @media (max-width: $breakpoint-md) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.revenue-chart {
+  h3 {
+    font-size: $text-lg;
+    margin-bottom: 1rem;
+    color: $neutral-800;
+  }
+  
+  .chart-placeholder {
+    height: 200px;
+    border-radius: $radius-lg;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: $neutral-500;
+    
+    .chart-icon {
+      width: 48px;
+      height: 48px;
+      margin-bottom: 0.5rem;
+      opacity: 0.5;
+    }
+  }
+}
+
+.financial-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.metric-item {
+  padding: 1rem;
+  
+  .metric-label {
+    font-size: $text-xs;
+    color: $neutral-600;
+    margin-bottom: 0.5rem;
+  }
+  
+  .metric-value {
+    font-size: $text-xl;
+    font-weight: $font-bold;
+    margin-bottom: 0.5rem;
+    
+    &.positive { color: $success-500; }
+    &.negative { color: $error-500; }
+    &.neutral { color: $neutral-800; }
+  }
+  
+  .metric-change {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: $text-xs;
+    color: $neutral-600;
+    
+    .change-icon {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}
+
+// Governance Actions
+.governance-actions {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+}
+
+.action-card {
+  @include neumorphic-card('md');
+  padding: 2rem;
+  text-align: center;
+  transition: all $transition-base;
+  
+  &:hover {
+    @include neumorphic-card('lg');
+    transform: translateY(-2px);
+  }
+  
+  .action-icon {
+    width: 48px;
+    height: 48px;
+    color: $primary-600;
+    margin-bottom: 1rem;
+  }
+  
+  h3 {
+    font-size: $text-lg;
+    font-weight: $font-semibold;
+    color: $neutral-800;
+    margin-bottom: 0.5rem;
+  }
+  
+  p {
+    color: $neutral-600;
+    font-size: $text-sm;
+    margin-bottom: 1.5rem;
+  }
+}
+
+// Morphing Dropdown
+.morphing-select-wrapper {
+  position: relative;
+  
+  .select-trigger {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    
+    .dropdown-icon {
+      width: 16px;
+      height: 16px;
+      transition: transform 0.3s $spring-smooth;
+      
+      &.rotate {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+
+.morphing-dropdown {
+  @include morphing-dropdown();
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 150px;
+  z-index: $z-dropdown;
+  
+  .dropdown-option {
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    transition: all $transition-fast;
+    color: $neutral-700;
+    font-size: $text-sm;
+    
+    &:hover {
+      background: rgba($blue-500, 0.1);
+      color: $blue-600;
+      padding-left: 1.25rem;
+    }
+  }
+}
+
+// Neumorphic Elements
+.neumorphic-card {
+  background: linear-gradient(145deg, #ffffff, #f0f0f0);
+  border-radius: $radius-xl;
+  box-shadow: $shadow-soft-md;
+}
+
+.neumorphic-button {
+  @include neumorphic-button();
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: $radius-lg;
+  font-weight: $font-medium;
+  color: $neutral-700;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  
+  &.primary {
+    background: linear-gradient(145deg, $primary-600, $primary-700);
+    color: white;
+    
+    &:hover {
+      background: linear-gradient(145deg, $primary-700, $primary-800);
+    }
+  }
+  
+  &.small {
+    padding: 0.5rem 0.75rem;
+    font-size: $text-sm;
+  }
+  
+  &.full-width {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+.neumorphic-inset {
+  box-shadow: $shadow-inset-sm;
+  background: linear-gradient(145deg, #e6e6e6, #ffffff);
+}
+
+// Transitions
+.morph-enter-active,
+.morph-leave-active {
+  transition: all 0.3s $spring-smooth;
+}
+
+.morph-enter-from {
+  opacity: 0;
+  transform: scale(0.95) translateY(-10px);
+}
+
+.morph-leave-to {
+  opacity: 0;
+  transform: scale(0.95) translateY(-10px);
+}
+</style>

pages/board/dashboard/index.vue

@@ -0,0 +1,498 @@
+<template>
+  <div class="board-dashboard">
+    <!-- Dues Payment Banner -->
+    <DuesPaymentBanner />
+    
+    <!-- Enhanced Welcome Header -->
+    <div class="dashboard-header glass-header mb-6">
+      <h1 class="dashboard-title text-gradient">
+        Welcome Back, {{ firstName }}!
+      </h1>
+      
+      <!-- Profile Picture Section -->
+      <div class="profile-picture-section my-4">
+        <ProfileAvatar
+          :member-id="memberData?.member_id || memberData?.Id"
+          :first-name="memberData?.first_name || user?.firstName"
+          :last-name="memberData?.last_name || user?.lastName"
+          :member-name="memberData?.FullName || user?.name"
+          size="80"
+          show-border
+          class="profile-avatar-main"
+        />
+      </div>
+      
+      <p class="dashboard-subtitle">
+        MonacoUSA Board Portal
+      </p>
+      <div class="text-center">
+        <v-chip class="glass-badge mt-2">
+          <v-icon start>mdi-shield-account</v-icon>
+          Board Member
+        </v-chip>
+      </div>
+    </div>
+
+
+    <!-- Board Statistics with Bento Grid -->
+    <div class="bento-grid mb-6">
+      <div class="bento-item bento-item--xlarge">
+        <v-card class="glass-card stat-card animated-entrance" style="animation-delay: 0.2s;">
+          <v-card-title class="pa-4" style="background-color: #f5f5f5;">
+            <v-icon class="mr-2" color="primary">mdi-chart-box-outline</v-icon>
+            Board Overview
+          </v-card-title>
+          <v-card-text class="pa-4">
+            <v-row>
+              <v-col cols="6" md="3" class="text-center">
+                <div class="stat-value">{{ stats.totalMembers }}</div>
+                <div class="text-body-2">Total Members</div>
+              </v-col>
+              <v-col cols="6" md="3" class="text-center">
+                <div class="stat-value">{{ stats.activeMembers }}</div>
+                <div class="text-body-2">Active Members</div>
+              </v-col>
+              <v-col cols="6" md="6" class="text-center">
+                <div class="stat-value">{{ stats.upcomingEvents }}</div>
+                <div class="text-body-2">Upcoming Events</div>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-card>
+      </div>
+      
+      <div class="bento-item bento-item--medium">
+        <v-card class="glass-card animated-entrance" style="animation-delay: 0.3s;">
+          <v-card-title class="pa-4" style="background-color: #f5f5f5;">
+            <v-icon class="mr-2" color="primary">mdi-calendar-today</v-icon>
+            Next Event
+          </v-card-title>
+          <v-card-text class="pa-4">
+            <div class="text-h6 mb-2">{{ nextEvent.title }}</div>
+            <div class="text-body-2 mb-2">
+              <v-icon size="small" class="mr-1">mdi-calendar</v-icon>
+              {{ nextEvent.date }}
+            </div>
+            <div class="text-body-2 mb-4">
+              <v-icon size="small" class="mr-1">mdi-clock</v-icon>
+              {{ nextEvent.time }}
+            </div>
+            <v-btn 
+              color="primary" 
+              variant="outlined" 
+              size="small"
+              style="border-color: #a31515; color: #a31515;"
+              @click="viewEventDetails"
+            >
+              View Details
+            </v-btn>
+          </v-card-text>
+        </v-card>
+      </div>
+    </div>
+
+    <!-- Dues Management Section -->
+    <v-row class="mb-6">
+      <v-col cols="12">
+        <BoardDuesManagement
+          :refresh-trigger="duesRefreshTrigger"
+          @view-member="handleViewMember"
+          @view-all-members="navigateToMembers"
+          @member-updated="handleMemberUpdated"
+        />
+      </v-col>
+    </v-row>
+
+
+    <!-- View Member Dialog -->
+    <ViewMemberDialog
+      v-model="showViewDialog"
+      :member="selectedMember"
+      @edit="handleEditMember"
+    />
+
+    <!-- Edit Member Dialog -->
+    <EditMemberDialog
+      v-model="showEditDialog"
+      :member="selectedMember"
+      @member-updated="handleMemberUpdated"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Member } from '~/utils/types';
+import ProfileAvatar from '~/components/ProfileAvatar.vue';
+
+definePageMeta({
+  layout: 'board',
+  middleware: 'auth'
+});
+
+const { firstName, isBoard, isAdmin, user } = useAuth();
+
+// Fetch member data for profile
+const { data: sessionData } = await useFetch<{ success: boolean; member: Member | null }>('/api/auth/session', { 
+  server: false
+});
+
+const memberData = computed<Member | null>(() => sessionData.value?.member || null);
+
+// Check board access on mount
+onMounted(() => {
+  if (!isBoard.value && !isAdmin.value) {
+    throw createError({
+      statusCode: 403,
+      statusMessage: 'Access denied. Board membership required.'
+    });
+  }
+});
+
+// Dues management state
+const duesRefreshTrigger = ref(0);
+
+// Member dialog state
+const showViewDialog = ref(false);
+const showEditDialog = ref(false);
+const selectedMember = ref<Member | null>(null);
+
+// Real data for board dashboard
+const stats = ref({
+  totalMembers: 0,
+  activeMembers: 0,
+  upcomingEvents: 0
+});
+
+const nextEvent = ref({
+  id: null,
+  title: 'Next Event',
+  date: 'Loading...',
+  time: 'Loading...',
+  location: 'TBD',
+  description: 'Upcoming association event'
+});
+
+const isLoading = ref(true);
+
+// Load real data on component mount
+onMounted(async () => {
+  await loadBoardData();
+});
+
+const loadBoardData = async () => {
+  try {
+    isLoading.value = true;
+    
+    // Load board statistics
+    const [statsResponse, meetingResponse] = await Promise.allSettled([
+      $fetch('/api/board/stats'),
+      $fetch('/api/board/next-meeting')
+    ]);
+    
+    // Handle stats response
+    if (statsResponse.status === 'fulfilled') {
+      const statsData = statsResponse.value as any;
+      if (statsData?.success) {
+        stats.value = {
+          totalMembers: statsData.data.totalMembers || 0,
+          activeMembers: statsData.data.activeMembers || 0,
+          upcomingEvents: statsData.data.upcomingEvents || 0
+        };
+      }
+    }
+    
+    // Handle next meeting response
+    if (meetingResponse.status === 'fulfilled') {
+      const meetingData = meetingResponse.value as any;
+      if (meetingData?.success) {
+        nextEvent.value = {
+          id: meetingData.data.id,
+          title: meetingData.data.title || 'Next Event',
+          date: meetingData.data.date || 'TBD',
+          time: meetingData.data.time || 'TBD',
+          location: meetingData.data.location || 'TBD',
+          description: meetingData.data.description || 'Upcoming association event'
+        };
+      }
+    }
+    
+  } catch (error) {
+    console.error('Error loading board data:', error);
+    // Keep fallback values
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const recentActivity = ref([
+  {
+    id: 1,
+    title: 'Monthly Board Meeting',
+    description: 'Meeting minutes approved and distributed',
+    type: 'success',
+    status: 'Completed'
+  },
+  {
+    id: 2,
+    title: 'Budget Review',
+    description: 'Q4 financial report under review',
+    type: 'warning',
+    status: 'In Progress'
+  },
+  {
+    id: 3,
+    title: 'Member Application',
+    description: 'New member application pending approval',
+    type: 'info',
+    status: 'Pending'
+  }
+]);
+
+// Dues management handlers
+const handleViewMember = (member: Member) => {
+  // Open the view dialog instead of navigating away
+  selectedMember.value = member;
+  showViewDialog.value = true;
+};
+
+const handleEditMember = (member: Member) => {
+  // Close the view dialog and open the edit dialog
+  showViewDialog.value = false;
+  selectedMember.value = member;
+  showEditDialog.value = true;
+};
+
+const handleMemberUpdated = (member: Member) => {
+  console.log('Member updated:', member.FullName || `${member.first_name} ${member.last_name}`);
+  
+  // Close edit dialog
+  showEditDialog.value = false;
+  
+  // Trigger dues refresh to update the lists
+  duesRefreshTrigger.value += 1;
+  
+  // You could also update stats here if needed
+  // stats.value = await fetchUpdatedStats();
+};
+
+// Navigation methods
+const navigateToEvents = () => {
+  // Navigate to events page
+  navigateTo('/dashboard/events');
+};
+
+const navigateToMembers = () => {
+  // Navigate to member list page
+  navigateTo('/dashboard/member-list');
+};
+
+const viewEventDetails = () => {
+  console.log('View event details');
+};
+
+const scheduleNewMeeting = () => {
+  console.log('Schedule new meeting');
+};
+
+const createAnnouncement = () => {
+  console.log('Create announcement');
+};
+
+const generateReport = () => {
+  console.log('Generate report');
+};
+</script>
+
+<style scoped lang="scss">
+.board-dashboard {
+  padding: 1rem;
+}
+
+/* Enhanced Header */
+.dashboard-header {
+  margin-bottom: 2rem;
+  padding: 2rem;
+  border-radius: 20px;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.95),
+    rgba(255, 255, 255, 0.85)
+  );
+  backdrop-filter: blur(30px) saturate(180%);
+  -webkit-backdrop-filter: blur(30px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  box-shadow: 
+    0 8px 32px 0 rgba(31, 38, 135, 0.15),
+    inset 0 1px 2px rgba(255, 255, 255, 0.6);
+  animation: slide-up 0.6s ease-out;
+  text-align: center;
+  
+  .profile-picture-section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+    .profile-avatar-main {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      border: 3px solid white;
+      border-radius: 50%;
+    }
+  }
+}
+
+.dashboard-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 0.5rem;
+  animation: fade-in 0.8s ease-out;
+}
+
+.dashboard-subtitle {
+  color: #71717a;
+  font-size: 1.1rem;
+}
+
+.glass-badge {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
+  color: white !important;
+  font-weight: 600;
+}
+
+/* Bento Grid Layout */
+.bento-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1.5rem;
+  
+  .bento-item {
+    border-radius: 20px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    &--small { grid-column: span 3; }
+    &--medium { grid-column: span 4; }
+    &--large { grid-column: span 6; }
+    &--xlarge { grid-column: span 8; }
+    &--full { grid-column: span 12; }
+    
+    &:hover {
+      transform: translateY(-4px);
+    }
+  }
+}
+
+/* Glass Card Effects */
+.glass-card {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.95),
+    rgba(255, 255, 255, 0.85),
+    rgba(255, 255, 255, 0.75)
+  ) !important;
+  backdrop-filter: blur(30px) saturate(180%);
+  -webkit-backdrop-filter: blur(30px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  box-shadow: 
+    0 8px 32px 0 rgba(31, 38, 135, 0.15),
+    inset 0 1px 2px rgba(255, 255, 255, 0.6),
+    inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
+  border-radius: 20px !important;
+  
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 
+      0 12px 40px 0 rgba(31, 38, 135, 0.25),
+      inset 0 1px 2px rgba(255, 255, 255, 0.8),
+      inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
+  }
+}
+
+/* Statistics Cards */
+.stat-card {
+  .stat-value {
+    font-size: 2rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+/* Animated Entrance */
+.animated-entrance {
+  animation: slide-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Button Enhancements */
+.v-btn {
+  text-transform: none !important;
+  font-weight: 600;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
+  }
+}
+
+h3 {
+  color: #333;
+  font-weight: 600;
+}
+
+.text-body-2 {
+  color: #666;
+}
+
+.v-chip {
+  font-weight: 600;
+}
+
+/* Responsive Design */
+@media (max-width: 1280px) {
+  .bento-grid {
+    .bento-item--xlarge {
+      grid-column: span 12;
+    }
+    .bento-item--large {
+      grid-column: span 6;
+    }
+    .bento-item--medium {
+      grid-column: span 6;
+    }
+  }
+}
+
+@media (max-width: 960px) {
+  .bento-grid {
+    .bento-item--large {
+      grid-column: span 12;
+    }
+    .bento-item--medium {
+      grid-column: span 12;
+    }
+  }
+}
+</style>

pages/board/governance/index.vue

@@ -0,0 +1,352 @@
+<template>
+  <div class="board-dashboard">
+    <v-container fluid>
+    <!-- Header -->
+    <v-row class="mb-6">
+      <v-col>
+        <h1 class="text-h3 font-weight-bold mb-2">Governance Documents</h1>
+        <p class="text-body-1 text-medium-emphasis">Access bylaws, policies, and governance materials</p>
+      </v-col>
+      <v-col cols="auto">
+        <v-btn
+          color="primary"
+          variant="flat"
+          prepend-icon="mdi-file-upload"
+          @click="showUploadDialog = true"
+        >
+          Upload Document
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <!-- Document Categories -->
+    <v-row class="mb-6">
+      <v-col cols="12">
+        <v-chip-group
+          v-model="selectedCategory"
+          selected-class="bg-primary"
+          mandatory
+        >
+          <v-chip
+            v-for="category in categories"
+            :key="category.value"
+            :value="category.value"
+            variant="outlined"
+          >
+            <v-icon start>{{ category.icon }}</v-icon>
+            {{ category.title }}
+            <v-badge
+              :content="category.count"
+              color="primary"
+              inline
+              class="ml-2"
+            />
+          </v-chip>
+        </v-chip-group>
+      </v-col>
+    </v-row>
+
+    <!-- Documents List -->
+    <v-row>
+      <v-col 
+        v-for="document in filteredDocuments"
+        :key="document.id"
+        cols="12"
+        md="6"
+        lg="4"
+      >
+        <v-card elevation="2" hover>
+          <v-card-text>
+            <div class="d-flex align-start">
+              <v-icon 
+                :icon="getDocumentIcon(document.type)"
+                size="40"
+                :color="getDocumentColor(document.type)"
+                class="mr-3"
+              />
+              <div class="flex-grow-1">
+                <h3 class="text-body-1 font-weight-medium mb-1">
+                  {{ document.title }}
+                </h3>
+                <p class="text-caption text-medium-emphasis mb-2">
+                  {{ document.description }}
+                </p>
+                <div class="d-flex align-center text-caption">
+                  <v-icon size="x-small" class="mr-1">mdi-calendar</v-icon>
+                  <span class="text-medium-emphasis">
+                    Updated {{ formatDate(document.updatedAt) }}
+                  </span>
+                </div>
+                <div class="d-flex align-center text-caption mt-1">
+                  <v-icon size="x-small" class="mr-1">mdi-file-outline</v-icon>
+                  <span class="text-medium-emphasis">
+                    {{ document.fileSize }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </v-card-text>
+          <v-divider />
+          <v-card-actions>
+            <v-btn
+              variant="text"
+              color="primary"
+              size="small"
+              @click="viewDocument(document)"
+            >
+              <v-icon start>mdi-eye</v-icon>
+              View
+            </v-btn>
+            <v-btn
+              variant="text"
+              color="primary"
+              size="small"
+              @click="downloadDocument(document)"
+            >
+              <v-icon start>mdi-download</v-icon>
+              Download
+            </v-btn>
+            <v-spacer />
+            <v-btn
+              icon="mdi-dots-vertical"
+              size="small"
+              variant="text"
+            >
+              <v-menu activator="parent">
+                <v-list density="compact">
+                  <v-list-item @click="shareDocument(document)">
+                    <v-list-item-title>
+                      <v-icon size="small" class="mr-2">mdi-share-variant</v-icon>
+                      Share
+                    </v-list-item-title>
+                  </v-list-item>
+                  <v-list-item @click="editDocument(document)">
+                    <v-list-item-title>
+                      <v-icon size="small" class="mr-2">mdi-pencil</v-icon>
+                      Edit Details
+                    </v-list-item-title>
+                  </v-list-item>
+                  <v-list-item @click="archiveDocument(document)">
+                    <v-list-item-title>
+                      <v-icon size="small" class="mr-2">mdi-archive</v-icon>
+                      Archive
+                    </v-list-item-title>
+                  </v-list-item>
+                  <v-divider />
+                  <v-list-item @click="deleteDocument(document)" class="text-error">
+                    <v-list-item-title>
+                      <v-icon size="small" class="mr-2">mdi-delete</v-icon>
+                      Delete
+                    </v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Upload Dialog -->
+    <v-dialog v-model="showUploadDialog" max-width="600">
+      <v-card>
+        <v-card-title>Upload Document</v-card-title>
+        <v-card-text>
+          <v-form ref="uploadForm">
+            <v-row>
+              <v-col cols="12">
+                <v-file-input
+                  v-model="uploadForm.file"
+                  label="Select Document"
+                  accept=".pdf,.doc,.docx"
+                  variant="outlined"
+                  prepend-icon="mdi-file-document"
+                  required
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="uploadForm.title"
+                  label="Document Title"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-textarea
+                  v-model="uploadForm.description"
+                  label="Description"
+                  variant="outlined"
+                  rows="2"
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-select
+                  v-model="uploadForm.category"
+                  label="Category"
+                  :items="categories"
+                  item-title="title"
+                  item-value="value"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+            </v-row>
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="showUploadDialog = false">Cancel</v-btn>
+          <v-btn color="primary" variant="flat" @click="uploadDocument">Upload</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    </v-container>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'board',
+  middleware: 'board'
+});
+
+// State
+const showUploadDialog = ref(false);
+const selectedCategory = ref('all');
+
+// Form data
+const uploadForm = ref({
+  file: null,
+  title: '',
+  description: '',
+  category: ''
+});
+
+// Categories
+const categories = [
+  { title: 'All Documents', value: 'all', icon: 'mdi-file-multiple', count: 12 },
+  { title: 'Bylaws', value: 'bylaws', icon: 'mdi-gavel', count: 2 },
+  { title: 'Policies', value: 'policies', icon: 'mdi-shield-check', count: 4 },
+  { title: 'Minutes', value: 'minutes', icon: 'mdi-clock-outline', count: 3 },
+  { title: 'Reports', value: 'reports', icon: 'mdi-chart-box', count: 3 }
+];
+
+// Mock documents
+const documents = ref([
+  {
+    id: 1,
+    title: 'Association Bylaws 2024',
+    description: 'Updated bylaws governing the association operations',
+    type: 'bylaws',
+    fileSize: '2.4 MB',
+    updatedAt: new Date('2024-01-01')
+  },
+  {
+    id: 2,
+    title: 'Code of Conduct Policy',
+    description: 'Member code of conduct and ethics guidelines',
+    type: 'policies',
+    fileSize: '548 KB',
+    updatedAt: new Date('2023-12-15')
+  },
+  {
+    id: 3,
+    title: 'Board Meeting Minutes - January 2024',
+    description: 'Minutes from the January board meeting',
+    type: 'minutes',
+    fileSize: '128 KB',
+    updatedAt: new Date('2024-01-10')
+  },
+  {
+    id: 4,
+    title: 'Annual Financial Report 2023',
+    description: 'Comprehensive financial report for fiscal year 2023',
+    type: 'reports',
+    fileSize: '4.2 MB',
+    updatedAt: new Date('2024-01-05')
+  },
+  {
+    id: 5,
+    title: 'Conflict of Interest Policy',
+    description: 'Policy for managing conflicts of interest',
+    type: 'policies',
+    fileSize: '315 KB',
+    updatedAt: new Date('2023-11-20')
+  },
+  {
+    id: 6,
+    title: 'Strategic Plan 2024-2026',
+    description: 'Three-year strategic planning document',
+    type: 'reports',
+    fileSize: '1.8 MB',
+    updatedAt: new Date('2023-12-01')
+  }
+]);
+
+// Computed
+const filteredDocuments = computed(() => {
+  if (selectedCategory.value === 'all') {
+    return documents.value;
+  }
+  return documents.value.filter(d => d.type === selectedCategory.value);
+});
+
+// Methods
+const getDocumentIcon = (type: string) => {
+  switch (type) {
+    case 'bylaws': return 'mdi-gavel';
+    case 'policies': return 'mdi-shield-check';
+    case 'minutes': return 'mdi-clock-outline';
+    case 'reports': return 'mdi-chart-box';
+    default: return 'mdi-file-document';
+  }
+};
+
+const getDocumentColor = (type: string) => {
+  switch (type) {
+    case 'bylaws': return 'error';
+    case 'policies': return 'warning';
+    case 'minutes': return 'info';
+    case 'reports': return 'success';
+    default: return 'primary';
+  }
+};
+
+const formatDate = (date: Date) => {
+  return new Date(date).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  });
+};
+
+const viewDocument = (document: any) => {
+  console.log('View document:', document);
+};
+
+const downloadDocument = (document: any) => {
+  console.log('Download document:', document);
+};
+
+const shareDocument = (document: any) => {
+  console.log('Share document:', document);
+};
+
+const editDocument = (document: any) => {
+  console.log('Edit document:', document);
+};
+
+const archiveDocument = (document: any) => {
+  console.log('Archive document:', document);
+};
+
+const deleteDocument = (document: any) => {
+  console.log('Delete document:', document);
+};
+
+const uploadDocument = () => {
+  console.log('Upload document:', uploadForm.value);
+  showUploadDialog.value = false;
+};
+</script>

pages/board/meetings/index.vue

@@ -0,0 +1,295 @@
+<template>
+  <div class="board-dashboard">
+    <v-container fluid>
+    <!-- Header -->
+    <v-row class="mb-6">
+      <v-col>
+        <h1 class="text-h3 font-weight-bold mb-2">Board Meetings</h1>
+        <p class="text-body-1 text-medium-emphasis">Schedule and manage board meetings</p>
+      </v-col>
+      <v-col cols="auto">
+        <v-btn
+          color="primary"
+          variant="flat"
+          prepend-icon="mdi-calendar-plus"
+          @click="showScheduleDialog = true"
+        >
+          Schedule Meeting
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <!-- Meeting Tabs -->
+    <v-tabs v-model="activeTab" color="primary" class="mb-6">
+      <v-tab value="upcoming">Upcoming</v-tab>
+      <v-tab value="past">Past Meetings</v-tab>
+      <v-tab value="calendar">Calendar View</v-tab>
+    </v-tabs>
+
+    <v-window v-model="activeTab">
+      <!-- Upcoming Meetings -->
+      <v-window-item value="upcoming">
+        <v-row>
+          <v-col 
+            v-for="meeting in upcomingMeetings"
+            :key="meeting.id"
+            cols="12"
+          >
+            <v-card elevation="2" class="mb-3">
+              <v-card-text>
+                <v-row align="center">
+                  <v-col cols="auto">
+                    <v-avatar color="primary" size="56">
+                      <v-icon>mdi-calendar</v-icon>
+                    </v-avatar>
+                  </v-col>
+                  <v-col>
+                    <h3 class="text-h6 mb-1">{{ meeting.title }}</h3>
+                    <div class="text-body-2 text-medium-emphasis mb-2">
+                      <v-icon size="small" class="mr-1">mdi-calendar</v-icon>
+                      {{ formatDate(meeting.date) }}
+                      <v-icon size="small" class="ml-3 mr-1">mdi-clock</v-icon>
+                      {{ meeting.time }}
+                      <v-icon size="small" class="ml-3 mr-1">mdi-map-marker</v-icon>
+                      {{ meeting.location }}
+                    </div>
+                    <div class="text-body-2">
+                      <v-chip size="small" variant="tonal" class="mr-2">
+                        <v-icon start size="small">mdi-account-group</v-icon>
+                        {{ meeting.attendees }} Confirmed
+                      </v-chip>
+                      <v-chip size="small" variant="tonal" color="info">
+                        {{ meeting.type }}
+                      </v-chip>
+                    </div>
+                  </v-col>
+                  <v-col cols="auto">
+                    <v-btn variant="outlined" color="primary" class="mr-2" @click="viewMeeting(meeting)">
+                      View Details
+                    </v-btn>
+                    <v-btn variant="flat" color="primary" @click="joinMeeting(meeting)">
+                      Join Meeting
+                    </v-btn>
+                  </v-col>
+                </v-row>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-window-item>
+
+      <!-- Past Meetings -->
+      <v-window-item value="past">
+        <v-data-table
+          :headers="pastMeetingHeaders"
+          :items="pastMeetings"
+          class="elevation-2"
+          hover
+        >
+          <template v-slot:item.title="{ item }">
+            <div class="font-weight-medium">{{ item.title }}</div>
+          </template>
+          <template v-slot:item.date="{ item }">
+            {{ formatDate(item.date) }}
+          </template>
+          <template v-slot:item.attendees="{ item }">
+            <v-chip size="small" variant="tonal">
+              {{ item.attendees }}/{{ item.totalInvited }}
+            </v-chip>
+          </template>
+          <template v-slot:item.actions="{ item }">
+            <v-btn icon="mdi-file-document" size="small" variant="text" @click="viewMinutes(item)" />
+            <v-btn icon="mdi-download" size="small" variant="text" @click="downloadMaterials(item)" />
+          </template>
+        </v-data-table>
+      </v-window-item>
+
+      <!-- Calendar View -->
+      <v-window-item value="calendar">
+        <v-card elevation="2">
+          <v-card-text>
+            <div class="text-center py-12">
+              <v-icon size="64" color="primary" class="mb-4">mdi-calendar-month</v-icon>
+              <h3 class="text-h5 mb-2">Calendar View</h3>
+              <p class="text-body-1 text-medium-emphasis">
+                Interactive calendar view coming soon
+              </p>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-window-item>
+    </v-window>
+
+    <!-- Schedule Meeting Dialog -->
+    <v-dialog v-model="showScheduleDialog" max-width="600">
+      <v-card>
+        <v-card-title>Schedule Board Meeting</v-card-title>
+        <v-card-text>
+          <v-form ref="meetingForm">
+            <v-row>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="meetingForm.title"
+                  label="Meeting Title"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-select
+                  v-model="meetingForm.type"
+                  label="Meeting Type"
+                  :items="['Regular', 'Special', 'Emergency', 'Annual']"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="meetingForm.date"
+                  label="Date"
+                  type="date"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="meetingForm.time"
+                  label="Time"
+                  type="time"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="meetingForm.location"
+                  label="Location"
+                  variant="outlined"
+                  required
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-textarea
+                  v-model="meetingForm.agenda"
+                  label="Agenda"
+                  variant="outlined"
+                  rows="3"
+                />
+              </v-col>
+            </v-row>
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="showScheduleDialog = false">Cancel</v-btn>
+          <v-btn color="primary" variant="flat" @click="scheduleMeeting">Schedule</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    </v-container>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'board',
+  middleware: 'board'
+});
+
+// State
+const activeTab = ref('upcoming');
+const showScheduleDialog = ref(false);
+
+// Form data
+const meetingForm = ref({
+  title: '',
+  type: '',
+  date: '',
+  time: '',
+  location: '',
+  agenda: ''
+});
+
+// Mock data
+const upcomingMeetings = ref([
+  {
+    id: 1,
+    title: 'Monthly Board Meeting - February',
+    date: new Date('2024-02-15'),
+    time: '10:00 AM',
+    location: 'Board Room / Zoom',
+    type: 'Regular',
+    attendees: 8
+  },
+  {
+    id: 2,
+    title: 'Strategic Planning Session',
+    date: new Date('2024-02-28'),
+    time: '2:00 PM',
+    location: 'Conference Center',
+    type: 'Special',
+    attendees: 12
+  }
+]);
+
+const pastMeetings = ref([
+  {
+    id: 3,
+    title: 'Monthly Board Meeting - January',
+    date: new Date('2024-01-15'),
+    time: '10:00 AM',
+    attendees: 9,
+    totalInvited: 10
+  },
+  {
+    id: 4,
+    title: 'Annual General Meeting',
+    date: new Date('2024-01-05'),
+    time: '6:00 PM',
+    attendees: 45,
+    totalInvited: 50
+  }
+]);
+
+// Table headers
+const pastMeetingHeaders = [
+  { title: 'Meeting', key: 'title' },
+  { title: 'Date', key: 'date' },
+  { title: 'Time', key: 'time' },
+  { title: 'Attendance', key: 'attendees' },
+  { title: 'Actions', key: 'actions', align: 'end' }
+];
+
+// Methods
+const formatDate = (date: Date) => {
+  return new Date(date).toLocaleDateString('en-US', {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric'
+  });
+};
+
+const viewMeeting = (meeting: any) => {
+  console.log('View meeting:', meeting);
+};
+
+const joinMeeting = (meeting: any) => {
+  console.log('Join meeting:', meeting);
+};
+
+const viewMinutes = (meeting: any) => {
+  console.log('View minutes:', meeting);
+};
+
+const downloadMaterials = (meeting: any) => {
+  console.log('Download materials:', meeting);
+};
+
+const scheduleMeeting = () => {
+  console.log('Schedule meeting:', meetingForm.value);
+  showScheduleDialog.value = false;
+};
+</script>

pages/board/members/index.vue

@@ -0,0 +1,644 @@
+<template>
+  <div class="board-dashboard">
+    <!-- Header -->
+    <div class="mb-6">
+      <div class="d-flex justify-space-between align-center">
+        <div>
+          <h1 class="text-h4 font-weight-bold mb-2">Member Management</h1>
+          <p class="text-body-1 text-medium-emphasis">Manage and oversee all MonacoUSA members</p>
+        </div>
+        <div class="d-flex gap-2">
+          <v-btn
+            variant="outlined"
+            color="error"
+            prepend-icon="mdi-download"
+            @click="exportMembers"
+          >
+            Export
+          </v-btn>
+          <v-btn
+            color="error"
+            variant="flat"
+            prepend-icon="mdi-account-plus"
+            @click="showAddMemberDialog = true"
+          >
+            Add Member
+          </v-btn>
+        </div>
+      </div>
+    </div>
+
+    <!-- Statistics Cards -->
+    <v-row class="mb-6">
+      <v-col cols="12" sm="6" md="3">
+        <v-card elevation="1">
+          <v-card-text>
+            <div class="d-flex justify-space-between align-center">
+              <div>
+                <p class="text-caption text-medium-emphasis mb-1">Total Members</p>
+                <p class="text-h5 font-weight-bold">{{ stats.total }}</p>
+              </div>
+              <v-icon size="40" color="primary">mdi-account-group</v-icon>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" sm="6" md="3">
+        <v-card elevation="1">
+          <v-card-text>
+            <div class="d-flex justify-space-between align-center">
+              <div>
+                <p class="text-caption text-medium-emphasis mb-1">Active Members</p>
+                <p class="text-h5 font-weight-bold text-success">{{ stats.active }}</p>
+              </div>
+              <v-icon size="40" color="success">mdi-check-circle</v-icon>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" sm="6" md="3">
+        <v-card elevation="1">
+          <v-card-text>
+            <div class="d-flex justify-space-between align-center">
+              <div>
+                <p class="text-caption text-medium-emphasis mb-1">Pending Dues</p>
+                <p class="text-h5 font-weight-bold text-warning">{{ stats.pendingDues }}</p>
+              </div>
+              <v-icon size="40" color="warning">mdi-clock-alert</v-icon>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" sm="6" md="3">
+        <v-card elevation="1">
+          <v-card-text>
+            <div class="d-flex justify-space-between align-center">
+              <div>
+                <p class="text-caption text-medium-emphasis mb-1">New This Month</p>
+                <p class="text-h5 font-weight-bold text-info">{{ stats.newThisMonth }}</p>
+              </div>
+              <v-icon size="40" color="info">mdi-account-plus</v-icon>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Filters and Search -->
+    <v-card class="mb-6" elevation="1">
+      <v-card-text>
+        <v-row align="center">
+          <v-col cols="12" md="4">
+            <v-text-field
+              v-model="searchQuery"
+              prepend-inner-icon="mdi-magnify"
+              label="Search members"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="2">
+            <v-select
+              v-model="filterStatus"
+              :items="statusOptions"
+              label="Status"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="2">
+            <v-select
+              v-model="filterDues"
+              :items="duesOptions"
+              label="Dues Status"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="2">
+            <v-select
+              v-model="filterType"
+              :items="memberTypeOptions"
+              label="Member Type"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="2">
+            <v-btn
+              variant="outlined"
+              color="error"
+              block
+              @click="resetFilters"
+            >
+              Reset
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+
+    <!-- Members Table -->
+    <v-card elevation="1">
+      <v-data-table
+        :headers="headers"
+        :items="filteredMembers"
+        :search="searchQuery"
+        :items-per-page="10"
+        class="elevation-0"
+      >
+        <!-- Member Name with Avatar -->
+        <template v-slot:item.name="{ item }">
+          <div class="d-flex align-center py-2">
+            <ProfileAvatar
+              :member-id="item.memberId"
+              :first-name="item.firstName"
+              :last-name="item.lastName"
+              size="small"
+              :show-badge="false"
+              class="mr-3"
+            />
+            <div>
+              <div class="font-weight-medium">{{ item.firstName }} {{ item.lastName }}</div>
+              <div class="text-caption text-medium-emphasis">{{ item.memberId }}</div>
+            </div>
+          </div>
+        </template>
+
+        <!-- Email -->
+        <template v-slot:item.email="{ item }">
+          <div class="text-body-2">{{ item.email }}</div>
+        </template>
+
+        <!-- Nationality -->
+        <template v-slot:item.nationality="{ item }">
+          <MultipleCountryFlags
+            :nationality="item.nationality"
+            :show-name="false"
+            size="small"
+            fallback-text="-"
+          />
+        </template>
+
+        <!-- Status -->
+        <template v-slot:item.status="{ item }">
+          <v-chip
+            :color="item.status === 'Active' ? 'success' : 'grey'"
+            size="small"
+            variant="tonal"
+          >
+            {{ item.status }}
+          </v-chip>
+        </template>
+
+        <!-- Dues Status -->
+        <template v-slot:item.duesStatus="{ item }">
+          <v-chip
+            :color="getDuesColor(item.duesStatus)"
+            size="small"
+            variant="outlined"
+          >
+            {{ item.duesStatus }}
+          </v-chip>
+        </template>
+
+        <!-- Member Type -->
+        <template v-slot:item.memberType="{ item }">
+          <v-chip
+            size="small"
+            variant="flat"
+            :color="getMemberTypeColor(item.memberType)"
+          >
+            {{ item.memberType }}
+          </v-chip>
+        </template>
+
+        <!-- Join Date -->
+        <template v-slot:item.joinDate="{ item }">
+          <span class="text-body-2">{{ formatDate(item.joinDate) }}</span>
+        </template>
+
+        <!-- Actions -->
+        <template v-slot:item.actions="{ item }">
+          <div class="d-flex gap-1">
+            <v-btn
+              icon
+              variant="text"
+              size="small"
+              @click="viewMember(item)"
+            >
+              <v-icon size="small">mdi-eye</v-icon>
+              <v-tooltip activator="parent" location="top">View Details</v-tooltip>
+            </v-btn>
+            <v-btn
+              icon
+              variant="text"
+              size="small"
+              @click="editMember(item)"
+            >
+              <v-icon size="small">mdi-pencil</v-icon>
+              <v-tooltip activator="parent" location="top">Edit Member</v-tooltip>
+            </v-btn>
+            <v-btn
+              icon
+              variant="text"
+              size="small"
+              @click="sendEmail(item)"
+            >
+              <v-icon size="small">mdi-email</v-icon>
+              <v-tooltip activator="parent" location="top">Send Email</v-tooltip>
+            </v-btn>
+            <v-menu>
+              <template v-slot:activator="{ props }">
+                <v-btn
+                  icon
+                  variant="text"
+                  size="small"
+                  v-bind="props"
+                >
+                  <v-icon size="small">mdi-dots-vertical</v-icon>
+                </v-btn>
+              </template>
+              <v-list density="compact">
+                <v-list-item @click="sendDuesReminder(item)">
+                  <v-list-item-title>Send Dues Reminder</v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="viewPaymentHistory(item)">
+                  <v-list-item-title>Payment History</v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="toggleStatus(item)">
+                  <v-list-item-title>
+                    {{ item.status === 'Active' ? 'Deactivate' : 'Activate' }}
+                  </v-list-item-title>
+                </v-list-item>
+                <v-divider />
+                <v-list-item @click="deleteMember(item)" class="text-error">
+                  <v-list-item-title>Delete Member</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </div>
+        </template>
+      </v-data-table>
+    </v-card>
+
+    <!-- Add Member Dialog -->
+    <v-dialog v-model="showAddMemberDialog" max-width="600">
+      <v-card>
+        <v-card-title>Add New Member</v-card-title>
+        <v-card-text>
+          <v-form v-model="addMemberFormValid">
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="newMember.firstName"
+                  label="First Name"
+                  variant="outlined"
+                  :rules="[v => !!v || 'Required']"
+                  required
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="newMember.lastName"
+                  label="Last Name"
+                  variant="outlined"
+                  :rules="[v => !!v || 'Required']"
+                  required
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="newMember.email"
+                  label="Email"
+                  type="email"
+                  variant="outlined"
+                  :rules="[
+                    v => !!v || 'Required',
+                    v => /.+@.+/.test(v) || 'Invalid email'
+                  ]"
+                  required
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="newMember.phone"
+                  label="Phone"
+                  variant="outlined"
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-select
+                  v-model="newMember.nationality"
+                  label="Nationality (can select multiple)"
+                  :items="nationalityOptions"
+                  variant="outlined"
+                  multiple
+                  chips
+                  closable-chips
+                  hint="Select all applicable nationalities"
+                  persistent-hint
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-select
+                  v-model="newMember.memberType"
+                  label="Member Type"
+                  :items="['Regular', 'Premium', 'Honorary']"
+                  variant="outlined"
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="newMember.joinDate"
+                  label="Join Date"
+                  type="date"
+                  variant="outlined"
+                />
+              </v-col>
+            </v-row>
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="showAddMemberDialog = false">Cancel</v-btn>
+          <v-btn
+            color="error"
+            variant="flat"
+            :disabled="!addMemberFormValid"
+            @click="addMember"
+          >
+            Add Member
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'board',
+  middleware: 'board'
+});
+
+// State
+const searchQuery = ref('');
+const filterStatus = ref(null);
+const filterDues = ref(null);
+const filterType = ref(null);
+const showAddMemberDialog = ref(false);
+const addMemberFormValid = ref(true);
+
+// Statistics
+const stats = ref({
+  total: 156,
+  active: 142,
+  pendingDues: 23,
+  newThisMonth: 8
+});
+
+// Filter options
+const statusOptions = ['Active', 'Inactive'];
+const duesOptions = ['Paid', 'Pending', 'Overdue'];
+const memberTypeOptions = ['Regular', 'Premium', 'Honorary', 'Board', 'Admin'];
+// Country options with codes for multiple selection
+const nationalityOptions = [
+  { title: 'United States', value: 'US' },
+  { title: 'Monaco', value: 'MC' },
+  { title: 'France', value: 'FR' },
+  { title: 'Italy', value: 'IT' },
+  { title: 'United Kingdom', value: 'GB' },
+  { title: 'Germany', value: 'DE' },
+  { title: 'Spain', value: 'ES' },
+  { title: 'Sweden', value: 'SE' },
+  { title: 'Norway', value: 'NO' },
+  { title: 'Denmark', value: 'DK' },
+  { title: 'Canada', value: 'CA' },
+  { title: 'Australia', value: 'AU' },
+  { title: 'Japan', value: 'JP' },
+  { title: 'China', value: 'CN' },
+  { title: 'India', value: 'IN' },
+  { title: 'Brazil', value: 'BR' },
+  { title: 'Mexico', value: 'MX' },
+  { title: 'Russia', value: 'RU' },
+  { title: 'South Africa', value: 'ZA' },
+  { title: 'Other', value: 'XX' }
+];
+
+// Table headers
+const headers = [
+  { title: 'Member', key: 'name', sortable: true },
+  { title: 'Email', key: 'email', sortable: true },
+  { title: 'Nationality', key: 'nationality', sortable: true },
+  { title: 'Status', key: 'status', sortable: true },
+  { title: 'Dues', key: 'duesStatus', sortable: true },
+  { title: 'Type', key: 'memberType', sortable: true },
+  { title: 'Joined', key: 'joinDate', sortable: true },
+  { title: 'Actions', key: 'actions', sortable: false, align: 'center' }
+];
+
+// Real members data from API
+const members = ref([]);
+const loading = ref(false);
+
+// New member form
+const newMember = ref({
+  firstName: '',
+  lastName: '',
+  email: '',
+  phone: '',
+  nationality: [] as string[], // Array for multiple nationalities
+  memberType: 'Regular',
+  joinDate: new Date().toISOString().split('T')[0]
+});
+
+// Computed
+const filteredMembers = computed(() => {
+  let filtered = members.value;
+  
+  if (filterStatus.value) {
+    filtered = filtered.filter(m => m.status === filterStatus.value);
+  }
+  
+  if (filterDues.value) {
+    filtered = filtered.filter(m => m.duesStatus === filterDues.value);
+  }
+  
+  if (filterType.value) {
+    filtered = filtered.filter(m => m.memberType === filterType.value);
+  }
+  
+  return filtered;
+});
+
+// Methods
+const formatDate = (dateString: string) => {
+  return new Date(dateString).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  });
+};
+
+const getDuesColor = (status: string) => {
+  const colors: Record<string, string> = {
+    'Paid': 'success',
+    'Pending': 'warning',
+    'Overdue': 'error'
+  };
+  return colors[status] || 'grey';
+};
+
+const getMemberTypeColor = (type: string) => {
+  const colors: Record<string, string> = {
+    'Regular': 'info',
+    'Premium': 'purple',
+    'Honorary': 'orange',
+    'Board': 'error',
+    'Admin': 'pink'
+  };
+  return colors[type] || 'grey';
+};
+
+const resetFilters = () => {
+  searchQuery.value = '';
+  filterStatus.value = null;
+  filterDues.value = null;
+  filterType.value = null;
+};
+
+const exportMembers = () => {
+  console.log('Exporting members');
+};
+
+const viewMember = (member: any) => {
+  console.log('Viewing member:', member);
+};
+
+const editMember = (member: any) => {
+  console.log('Editing member:', member);
+};
+
+const sendEmail = (member: any) => {
+  console.log('Sending email to:', member.email);
+};
+
+const sendDuesReminder = (member: any) => {
+  console.log('Sending dues reminder to:', member.email);
+};
+
+const viewPaymentHistory = (member: any) => {
+  console.log('Viewing payment history for:', member);
+};
+
+const toggleStatus = (member: any) => {
+  member.status = member.status === 'Active' ? 'Inactive' : 'Active';
+};
+
+const deleteMember = (member: any) => {
+  console.log('Deleting member:', member);
+};
+
+const addMember = () => {
+  // Convert nationality array to comma-separated string for storage
+  const memberData = {
+    ...newMember.value,
+    nationality: Array.isArray(newMember.value.nationality) 
+      ? newMember.value.nationality.join(',') 
+      : newMember.value.nationality
+  };
+  console.log('Adding new member:', memberData);
+  showAddMemberDialog.value = false;
+  // Reset form
+  newMember.value = {
+    firstName: '',
+    lastName: '',
+    email: '',
+    phone: '',
+    nationality: [],
+    memberType: 'Regular',
+    joinDate: new Date().toISOString().split('T')[0]
+  };
+};
+
+// Load real members data from API
+const loadMembers = async () => {
+  loading.value = true;
+  try {
+    // Fetch members from API
+    const response = await $fetch('/api/members');
+    
+    // Check for both possible response structures
+    const membersList = response?.data?.list || response?.data?.members || response?.list || [];
+    
+    if (membersList && membersList.length > 0) {
+      // Transform the data to match our interface
+      members.value = membersList.map((member: any) => ({
+        id: member.Id || member.id,
+        memberId: member.member_id || `MUSA-${String(member.Id).padStart(4, '0')}`,
+        firstName: member.first_name,
+        lastName: member.last_name,
+        // Add name field for sorting (last name, first name format for proper sorting)
+        name: `${member.last_name || ''}, ${member.first_name || ''}`.trim(),
+        email: member.email,
+        phone: member.phone_number || member.phone || '',
+        status: member.membership_status === 'Active' ? 'Active' : 'Inactive',
+        duesStatus: member.dues_status || 'Unknown',
+        memberType: member.membership_type || 'Regular',
+        joinDate: member.member_since || member.created_at,
+        nationality: member.nationality || member.country || ''
+      }));
+      
+      // Sort by last name, then first name by default
+      members.value.sort((a, b) => {
+        const aLastName = (a.lastName || '').toLowerCase();
+        const bLastName = (b.lastName || '').toLowerCase();
+        const aFirstName = (a.firstName || '').toLowerCase();
+        const bFirstName = (b.firstName || '').toLowerCase();
+        
+        // First compare by last name
+        const lastNameCompare = aLastName.localeCompare(bLastName);
+        if (lastNameCompare !== 0) return lastNameCompare;
+        
+        // If last names are the same, compare by first name
+        return aFirstName.localeCompare(bFirstName);
+      });
+      
+      console.log(`[board-members] Loaded ${members.value.length} members from API, sorted by last name`);
+    } else {
+      console.log('[board-members] No members found in response:', response);
+      members.value = [];
+    }
+  } catch (error) {
+    console.error('Error loading members:', error);
+    // Keep empty array if load fails
+    members.value = []
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Load data on mount
+onMounted(async () => {
+  await loadMembers();
+});
+</script>
+
+<style scoped>
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+</style>

pages/dashboard/admin.vue

@@ -183,6 +183,57 @@
         </v-col>
       </v-row>
 
+      <!-- Data Management -->
+      <v-row class="mb-6">
+        <v-col cols="12">
+          <v-card elevation="2">
+            <v-card-title>
+              <v-icon left>mdi-database-cog</v-icon>
+              Data Management
+            </v-card-title>
+            <v-card-text>
+              <p class="mb-4">Manage data integrity and perform maintenance operations on the portal database.</p>
+              
+              <v-row>
+                <v-col cols="12" md="6">
+                  <v-btn
+                    @click="assignMemberIds"
+                    color="warning"
+                    variant="outlined"
+                    prepend-icon="mdi-account-multiple-plus"
+                    block
+                    size="large"
+                    :loading="assigningMemberIds"
+                  >
+                    Assign Member IDs
+                  </v-btn>
+                  <div class="text-caption mt-2 text-medium-emphasis">
+                    Assign unique member IDs (MUSA-0001, MUSA-0002, etc.) to members who don't have them
+                  </div>
+                </v-col>
+                
+                <v-col cols="12" md="6">
+                  <v-btn
+                    @click="backfillEventIds"
+                    color="primary"
+                    variant="outlined"
+                    prepend-icon="mdi-calendar-sync"
+                    block
+                    size="large"
+                    :loading="backfillLoading"
+                  >
+                    Backfill Event IDs
+                  </v-btn>
+                  <div class="text-caption mt-2 text-medium-emphasis">
+                    Assign business IDs to events that don't have them
+                  </div>
+                </v-col>
+              </v-row>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+
     </v-container>
 
     <!-- NocoDB Settings Dialog -->
@@ -422,6 +473,10 @@ const overdueCount = ref(0);
 const overdueRefreshTrigger = ref(0);
 const duesRefreshTrigger = ref(0);
 
+// Data management
+const assigningMemberIds = ref(false);
+const backfillLoading = ref(false);
+
 // Member dialog state
 const showViewDialog = ref(false);
 const showEditDialog = ref(false);
@@ -719,6 +774,88 @@ const handleMemberUpdated = (member: any) => {
   duesRefreshTrigger.value += 1;
 };
 
+// Data management functions
+const assignMemberIds = async () => {
+  assigningMemberIds.value = true;
+  
+  try {
+    console.log('Starting member ID assignment...');
+    
+    const response = await $fetch<{
+      success: boolean;
+      message: string;
+      data: {
+        totalMembers: number;
+        membersUpdated: number;
+        updatedMembers: Array<{
+          id: string;
+          name: string;
+          email: string;
+          memberId: string;
+        }>;
+        startingId: string | null;
+        endingId: string | null;
+      };
+    }>('/api/admin/assign-member-ids', {
+      method: 'POST'
+    });
+    
+    if (response.success) {
+      console.log('✅ Member ID assignment completed:', {
+        totalMembers: response.data.totalMembers,
+        membersUpdated: response.data.membersUpdated,
+        startingId: response.data.startingId,
+        endingId: response.data.endingId
+      });
+      
+      // Show success message
+      alert(`Success! Assigned member IDs to ${response.data.membersUpdated} members.\nRange: ${response.data.startingId} to ${response.data.endingId}`);
+      
+      // Refresh dues management data
+      duesRefreshTrigger.value += 1;
+    }
+  } catch (error: any) {
+    console.error('❌ Failed to assign member IDs:', error);
+    alert(`Error: ${error.statusMessage || error.message || 'Failed to assign member IDs'}`);
+  } finally {
+    assigningMemberIds.value = false;
+  }
+};
+
+const backfillEventIds = async () => {
+  backfillLoading.value = true;
+  
+  try {
+    console.log('Starting event ID backfill...');
+    
+    const response = await $fetch<{
+      success: boolean;
+      message: string;
+      data: {
+        totalEvents: number;
+        eventsUpdated: number;
+      };
+    }>('/api/admin/backfill-event-ids', {
+      method: 'POST'
+    });
+    
+    if (response.success) {
+      console.log('✅ Event ID backfill completed:', {
+        totalEvents: response.data.totalEvents,
+        eventsUpdated: response.data.eventsUpdated
+      });
+      
+      // Show success message
+      alert(`Success! Assigned event IDs to ${response.data.eventsUpdated} events.`);
+    }
+  } catch (error: any) {
+    console.error('❌ Failed to backfill event IDs:', error);
+    alert(`Error: ${error.statusMessage || error.message || 'Failed to backfill event IDs'}`);
+  } finally {
+    backfillLoading.value = false;
+  }
+};
+
 // Load stats and overdue count on component mount
 onMounted(async () => {
   await loadStats();

pages/dashboard/board.vue

@@ -12,32 +12,34 @@
         <p class="text-h6 text-medium-emphasis">
           MonacoUSA Board Portal
         </p>
-        <v-chip color="primary" variant="elevated" class="mt-2">
-          <v-icon start>mdi-shield-account</v-icon>
-          Board Member
-        </v-chip>
+        <div class="text-center">
+          <v-chip color="primary" variant="elevated" class="mt-2">
+            <v-icon start>mdi-shield-account</v-icon>
+            Board Member
+          </v-chip>
+        </div>
       </v-col>
     </v-row>
 
     <!-- Board Tools -->
     <v-row class="mb-6">
-      <v-col cols="12" md="3">
+      <v-col cols="12" md="6">
         <v-card class="pa-4 text-center" elevation="2" hover>
-          <v-icon size="48" color="primary" class="mb-2">mdi-calendar-clock</v-icon>
-          <h3 class="mb-2">Meetings</h3>
-          <p class="text-body-2 mb-4">Schedule and manage board meetings</p>
+          <v-icon size="48" color="primary" class="mb-2">mdi-calendar</v-icon>
+          <h3 class="mb-2">Events</h3>
+          <p class="text-body-2 mb-4">View and manage association events</p>
           <v-btn 
             color="primary" 
             variant="outlined"
             style="border-color: #a31515; color: #a31515;"
-            @click="navigateToMeetings"
+            @click="navigateToEvents"
           >
-            Manage Meetings
+            View Events
           </v-btn>
         </v-card>
       </v-col>
       
-      <v-col cols="12" md="3">
+      <v-col cols="12" md="6">
         <v-card class="pa-4 text-center" elevation="2" hover>
           <v-icon size="48" color="primary" class="mb-2">mdi-account-group</v-icon>
           <h3 class="mb-2">Members</h3>
@@ -52,38 +54,6 @@
           </v-btn>
         </v-card>
       </v-col>
-      
-      <v-col cols="12" md="3">
-        <v-card class="pa-4 text-center" elevation="2" hover>
-          <v-icon size="48" color="primary" class="mb-2">mdi-chart-line</v-icon>
-          <h3 class="mb-2">Reports</h3>
-          <p class="text-body-2 mb-4">Financial and activity reports</p>
-          <v-btn 
-            color="primary" 
-            variant="outlined"
-            style="border-color: #a31515; color: #a31515;"
-            @click="navigateToReports"
-          >
-            View Reports
-          </v-btn>
-        </v-card>
-      </v-col>
-      
-      <v-col cols="12" md="3">
-        <v-card class="pa-4 text-center" elevation="2" hover>
-          <v-icon size="48" color="primary" class="mb-2">mdi-tools</v-icon>
-          <h3 class="mb-2">Tools</h3>
-          <p class="text-body-2 mb-4">Board management tools</p>
-          <v-btn 
-            color="primary" 
-            variant="outlined"
-            style="border-color: #a31515; color: #a31515;"
-            @click="navigateToTools"
-          >
-            Access Tools
-          </v-btn>
-        </v-card>
-      </v-col>
     </v-row>
 
     <!-- Board Statistics -->
@@ -104,13 +74,9 @@
                 <div class="text-h4 font-weight-bold" style="color: #a31515;">{{ stats.activeMembers }}</div>
                 <div class="text-body-2">Active Members</div>
               </v-col>
-              <v-col cols="6" md="3" class="text-center">
-                <div class="text-h4 font-weight-bold" style="color: #a31515;">{{ stats.upcomingMeetings }}</div>
-                <div class="text-body-2">Upcoming Meetings</div>
-              </v-col>
-              <v-col cols="6" md="3" class="text-center">
-                <div class="text-h4 font-weight-bold" style="color: #a31515;">{{ stats.pendingActions }}</div>
-                <div class="text-body-2">Pending Actions</div>
+              <v-col cols="6" md="6" class="text-center">
+                <div class="text-h4 font-weight-bold" style="color: #a31515;">{{ stats.upcomingEvents }}</div>
+                <div class="text-body-2">Upcoming Events</div>
               </v-col>
             </v-row>
           </v-card-text>
@@ -121,24 +87,24 @@
         <v-card elevation="2">
           <v-card-title class="pa-4" style="background-color: #f5f5f5;">
             <v-icon class="mr-2" color="primary">mdi-calendar-today</v-icon>
-            Next Meeting
+            Next Event
           </v-card-title>
           <v-card-text class="pa-4">
-            <div class="text-h6 mb-2">Board Meeting</div>
+            <div class="text-h6 mb-2">{{ nextEvent.title }}</div>
             <div class="text-body-2 mb-2">
               <v-icon size="small" class="mr-1">mdi-calendar</v-icon>
-              {{ nextMeeting.date }}
+              {{ nextEvent.date }}
             </div>
             <div class="text-body-2 mb-4">
               <v-icon size="small" class="mr-1">mdi-clock</v-icon>
-              {{ nextMeeting.time }}
+              {{ nextEvent.time }}
             </div>
             <v-btn 
               color="primary" 
               variant="outlined" 
               size="small"
               style="border-color: #a31515; color: #a31515;"
-              @click="viewMeetingDetails"
+              @click="viewEventDetails"
             >
               View Details
             </v-btn>
@@ -159,82 +125,6 @@
       </v-col>
     </v-row>
 
-    <!-- Recent Board Activity -->
-    <v-row class="mb-6">
-      <v-col cols="12">
-        <v-card elevation="2">
-          <v-card-title class="pa-4" style="background-color: #f5f5f5;">
-            <v-icon class="mr-2" color="primary">mdi-history</v-icon>
-            Recent Board Activity
-          </v-card-title>
-          <v-card-text class="pa-4">
-            <v-list>
-              <v-list-item v-for="activity in recentActivity" :key="activity.id">
-                <v-list-item-content>
-                  <v-list-item-title>{{ activity.title }}</v-list-item-title>
-                  <v-list-item-subtitle>{{ activity.description }}</v-list-item-subtitle>
-                </v-list-item-content>
-                <v-list-item-action>
-                  <v-chip :color="activity.type" size="small">{{ activity.status }}</v-chip>
-                </v-list-item-action>
-              </v-list-item>
-            </v-list>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-
-    <!-- Quick Actions -->
-    <v-row>
-      <v-col cols="12">
-        <v-card elevation="2">
-          <v-card-title class="pa-4" style="background-color: #f5f5f5;">
-            <v-icon class="mr-2" color="primary">mdi-lightning-bolt</v-icon>
-            Quick Actions
-          </v-card-title>
-          <v-card-text class="pa-4">
-            <v-row>
-              <v-col cols="12" md="4">
-                <v-btn 
-                  color="primary" 
-                  variant="outlined" 
-                  block
-                  style="border-color: #a31515; color: #a31515;"
-                  @click="scheduleNewMeeting"
-                >
-                  <v-icon start>mdi-plus</v-icon>
-                  Schedule New Meeting
-                </v-btn>
-              </v-col>
-              <v-col cols="12" md="4">
-                <v-btn 
-                  color="primary" 
-                  variant="outlined" 
-                  block
-                  style="border-color: #a31515; color: #a31515;"
-                  @click="createAnnouncement"
-                >
-                  <v-icon start>mdi-bullhorn</v-icon>
-                  Create Announcement
-                </v-btn>
-              </v-col>
-              <v-col cols="12" md="4">
-                <v-btn 
-                  color="primary" 
-                  variant="outlined" 
-                  block
-                  style="border-color: #a31515; color: #a31515;"
-                  @click="generateReport"
-                >
-                  <v-icon start>mdi-file-chart</v-icon>
-                  Generate Report
-                </v-btn>
-              </v-col>
-            </v-row>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
 
     <!-- View Member Dialog -->
     <ViewMemberDialog
@@ -284,17 +174,16 @@ const selectedMember = ref<Member | null>(null);
 const stats = ref({
   totalMembers: 0,
   activeMembers: 0,
-  upcomingMeetings: 0,
-  pendingActions: 0
+  upcomingEvents: 0
 });
 
-const nextMeeting = ref({
+const nextEvent = ref({
   id: null,
-  title: 'Board Meeting',
+  title: 'Next Event',
   date: 'Loading...',
   time: 'Loading...',
   location: 'TBD',
-  description: 'Monthly board meeting'
+  description: 'Upcoming association event'
 });
 
 const isLoading = ref(true);
@@ -321,8 +210,7 @@ const loadBoardData = async () => {
         stats.value = {
           totalMembers: statsData.data.totalMembers || 0,
           activeMembers: statsData.data.activeMembers || 0,
-          upcomingMeetings: statsData.data.upcomingMeetings || 0,
-          pendingActions: statsData.data.pendingActions || 0
+          upcomingEvents: statsData.data.upcomingEvents || 0
         };
       }
     }
@@ -331,13 +219,13 @@ const loadBoardData = async () => {
     if (meetingResponse.status === 'fulfilled') {
       const meetingData = meetingResponse.value as any;
       if (meetingData?.success) {
-        nextMeeting.value = {
+        nextEvent.value = {
           id: meetingData.data.id,
-          title: meetingData.data.title || 'Board Meeting',
+          title: meetingData.data.title || 'Next Event',
           date: meetingData.data.date || 'TBD',
           time: meetingData.data.time || 'TBD',
           location: meetingData.data.location || 'TBD',
-          description: meetingData.data.description || 'Monthly board meeting'
+          description: meetingData.data.description || 'Upcoming association event'
         };
       }
     }
@@ -401,9 +289,10 @@ const handleMemberUpdated = (member: Member) => {
   // stats.value = await fetchUpdatedStats();
 };
 
-// Navigation methods (placeholder implementations)
-const navigateToMeetings = () => {
-  console.log('Navigate to meetings');
+// Navigation methods
+const navigateToEvents = () => {
+  // Navigate to events page
+  navigateTo('/dashboard/events');
 };
 
 const navigateToMembers = () => {
@@ -411,16 +300,8 @@ const navigateToMembers = () => {
   navigateTo('/dashboard/member-list');
 };
 
-const navigateToReports = () => {
-  console.log('Navigate to reports');
-};
-
-const navigateToTools = () => {
-  console.log('Navigate to tools');
-};
-
-const viewMeetingDetails = () => {
-  console.log('View meeting details');
+const viewEventDetails = () => {
+  console.log('View event details');
 };
 
 const scheduleNewMeeting = () => {

pages/dashboard/events.vue

@@ -170,7 +170,7 @@
 
     <!-- Error Snackbar -->
     <v-snackbar
-      v-model="showError"
+      v-model="showErrorSnackbar"
       color="error"
       :timeout="5000"
     >
@@ -178,7 +178,7 @@
       <template #actions>
         <v-btn
           variant="text"
-          @click="showError = false"
+          @click="showErrorSnackbar = false"
         >
           Close
         </v-btn>
@@ -187,7 +187,7 @@
 
     <!-- Success Snackbar -->
     <v-snackbar
-      v-model="showSuccess"
+      v-model="showSuccessSnackbar"
       color="success"
       :timeout="3000"
     >
@@ -195,7 +195,7 @@
       <template #actions>
         <v-btn
           variant="text"
-          @click="showSuccess = false"
+          @click="showSuccessSnackbar = false"
         >
           Close
         </v-btn>
@@ -244,8 +244,8 @@ const filters = reactive<EventFilters>({
 });
 
 // Notification state
-const showError = ref(false);
-const showSuccess = ref(false);
+const showErrorSnackbar = ref(false);
+const showSuccessSnackbar = ref(false);
 const errorMessage = ref('');
 const successMessage = ref('');
 
@@ -284,7 +284,10 @@ const totalEvents = computed(() => events.value.length);
 
 const totalRSVPs = computed(() => {
   return events.value.reduce((count, event) => {
-    return count + (event.current_attendees || 0);
+    const attendees = typeof event.current_attendees === 'string' 
+      ? parseInt(event.current_attendees) || 0 
+      : event.current_attendees || 0;
+    return count + attendees;
   }, 0);
 });
 
@@ -332,15 +335,109 @@ const clearFilters = async () => {
 };
 
 const handleEventClick = (eventInfo: any) => {
-  selectedEvent.value = eventInfo.eventData || eventInfo.event || eventInfo;
+  console.log('[Events] EVENT CLICK HANDLER CALLED');
+  console.log('[Events] Raw eventInfo received:', eventInfo);
+  
+  // Extract the original event data from FullCalendar's extendedProps
+  const calendarEvent = eventInfo.event || eventInfo;
+  const originalEvent = calendarEvent.extendedProps?.originalEvent;
+  
+  console.log('[Events] Calendar event:', calendarEvent);
+  console.log('[Events] Original event from extendedProps:', originalEvent);
+  
+  // Use original event if available, otherwise reconstruct from calendar event
+  if (originalEvent) {
+    selectedEvent.value = originalEvent as Event;
+    console.log('[Events] Using original event from extendedProps');
+  } else {
+    console.log('[Events] Reconstructing event from calendar data');
+    // Fallback: reconstruct event from FullCalendar event data
+    selectedEvent.value = {
+      id: calendarEvent.id,
+      title: calendarEvent.title,
+      description: calendarEvent.extendedProps?.description || '',
+      event_type: calendarEvent.extendedProps?.event_type || 'meeting',
+      start_datetime: calendarEvent.start?.toISOString() || calendarEvent.startStr,
+      end_datetime: calendarEvent.end?.toISOString() || calendarEvent.endStr,
+      location: calendarEvent.extendedProps?.location || '',
+      visibility: calendarEvent.extendedProps?.visibility || 'public',
+      is_paid: calendarEvent.extendedProps?.is_paid ? 'true' : 'false',
+      cost_members: calendarEvent.extendedProps?.cost_members || '',
+      cost_non_members: calendarEvent.extendedProps?.cost_non_members || '',
+      max_attendees: calendarEvent.extendedProps?.max_attendees?.toString() || '',
+      current_attendees: calendarEvent.extendedProps?.current_attendees?.toString() || '0',
+      user_rsvp: calendarEvent.extendedProps?.user_rsvp || null,
+      creator: calendarEvent.extendedProps?.creator || '',
+      status: 'active'
+    } as Event;
+  }
+  
+  console.log('[Events] Final selected event for dialog:', {
+    id: selectedEvent.value.id,
+    title: selectedEvent.value.title,
+    event_type: selectedEvent.value.event_type,
+    full_event: selectedEvent.value
+  });
+  
+  console.log('[Events] About to show dialog...');
+  console.log('[Events] showDetailsDialog current value:', showDetailsDialog.value);
+  
   showDetailsDialog.value = true;
+  
+  console.log('[Events] showDetailsDialog after setting to true:', showDetailsDialog.value);
+  
+  // Force Vue to update
+  nextTick(() => {
+    console.log('[Events] After nextTick - showDetailsDialog:', showDetailsDialog.value);
+    console.log('[Events] After nextTick - selectedEvent:', selectedEvent.value?.title);
+  });
 };
 
 const handleDateClick = (dateInfo: any) => {
   if (isBoard.value || isAdmin.value) {
-    prefilledDate.value = dateInfo.date;
-    prefilledEndDate.value = dateInfo.endDate || '';
-    showCreateDialog.value = true;
+    // Debug: Log the date format being passed
+    console.log('[Events] Date clicked:', dateInfo);
+    
+    // Create proper ISO datetime strings (full format)
+    let formattedDate = '';
+    let formattedEndDate = '';
+    
+    if (dateInfo.date) {
+      // Convert to proper Date object and set default time
+      const clickedDate = new Date(dateInfo.date);
+      
+      // Set default time to 6 PM in the user's local timezone
+      clickedDate.setHours(18, 0, 0, 0); // Default to 6 PM
+      formattedDate = clickedDate.toISOString(); // Full ISO string
+      
+      // Set end date 2 hours later if not provided
+      if (dateInfo.endDate) {
+        const endDate = new Date(dateInfo.endDate);
+        endDate.setHours(20, 0, 0, 0); // Default to 8 PM for end date
+        formattedEndDate = endDate.toISOString();
+      } else {
+        const endDate = new Date(clickedDate);
+        endDate.setHours(20, 0, 0, 0); // Default to 8 PM (2 hours later)
+        formattedEndDate = endDate.toISOString();
+      }
+    }
+    
+    // Clear previous values first to trigger watchers properly
+    prefilledDate.value = '';
+    prefilledEndDate.value = '';
+    
+    // Set new values
+    nextTick(() => {
+      prefilledDate.value = formattedDate;
+      prefilledEndDate.value = formattedEndDate;
+      
+      console.log('[Events] Prefilled dates set:', {
+        date: formattedDate,
+        endDate: formattedEndDate
+      });
+      
+      showCreateDialog.value = true;
+    });
   }
 };
 
@@ -364,19 +461,30 @@ const handleDateRangeChange = async (start: string, end: string) => {
   }
 };
 
-const handleEventCreated = (event: Event) => {
+const handleEventCreated = async (event: Event) => {
   showSuccessMessage('Event created successfully!');
-  refreshCalendar();
+  await refreshCalendar();
 };
 
-const handleRSVPUpdated = (event: Event) => {
+const handleRSVPUpdated = async (event: Event) => {
   showSuccessMessage('RSVP updated successfully!');
-  refreshCalendar();
+  await refreshCalendar();
 };
 
-const refreshCalendar = () => {
-  calendarRef.value?.refetchEvents?.();
-  clearCache();
+const refreshCalendar = async () => {
+  try {
+    // Clear cache and force refresh events data
+    clearCache();
+    await fetchEvents({ force: true });
+    
+    // Also refresh the calendar component
+    calendarRef.value?.refetchEvents?.();
+    
+    console.log('Calendar refreshed successfully');
+  } catch (error) {
+    console.error('Error refreshing calendar:', error);
+    showErrorMessage('Failed to refresh calendar');
+  }
 };
 
 const exportCalendar = () => {
@@ -405,12 +513,12 @@ const subscribeCalendar = async () => {
 
 const showErrorMessage = (message: string) => {
   errorMessage.value = message;
-  showError.value = true;
+  showErrorSnackbar.value = true;
 };
 
 const showSuccessMessage = (message: string) => {
   successMessage.value = message;
-  showSuccess.value = true;
+  showSuccessSnackbar.value = true;
 };
 
 // Lifecycle

pages/dashboard/index.vue

@@ -22,18 +22,27 @@ definePageMeta({
   layout: 'dashboard'
 });
 
-const { user, userTier } = useAuth();
+const { user, userTier, isAdmin, isBoard } = useAuth();
 const loading = ref(true);
 
 // Route to tier-specific dashboard - auth middleware ensures user is authenticated
 onMounted(() => {
-  console.log('🔄 Dashboard mounted, routing to tier-specific page...');
+  console.log('🔄 Dashboard mounted, routing to role-specific section...');
   
-  // Auth middleware has already verified authentication - just route to tier page
+  // Auth middleware has already verified authentication - route based on highest privilege
   if (user.value && userTier.value) {
-    const tierRoute = `/dashboard/${userTier.value}`;
-    console.log('🔄 Routing to tier-specific dashboard:', tierRoute);
-    navigateTo(tierRoute, { replace: true });
+    // Use new role-based structure
+    let targetRoute = '';
+    if (isAdmin.value) {
+      targetRoute = '/admin/dashboard';
+    } else if (isBoard.value) {
+      targetRoute = '/board/dashboard';
+    } else {
+      targetRoute = '/member/dashboard';
+    }
+    
+    console.log('🔄 Routing to role-specific dashboard:', targetRoute);
+    navigateTo(targetRoute, { replace: true });
   } else {
     console.warn('❌ No user or tier found - this should not happen after auth middleware');
     // Fallback - middleware should have caught this

pages/dashboard/member-list.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid>
+  <v-container fluid class="pa-4">
     <!-- Dues Payment Banner -->
     <DuesPaymentBanner />
     
@@ -146,8 +146,9 @@
         :key="member.Id"
         cols="12"
         sm="6"
-        md="4"
-        lg="3"
+        md="6"
+        lg="4"
+        xl="3"
       >
         <MemberCard
           :member="member"
@@ -204,6 +205,13 @@
       @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>
@@ -277,14 +285,16 @@ const error = ref('');
 const searchTerm = ref('');
 const activeFilter = ref('');
 const duesFilter = ref('');
-const sortOption = ref('name-asc');
+const sortOption = ref('lastname-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
@@ -319,8 +329,10 @@ const duesFilterOptions = [
 
 // Sort options
 const sortOptions = [
-  { title: 'Name (A-Z)', value: 'name-asc' },
-  { title: 'Name (Z-A)', value: 'name-desc' },
+  { title: 'Last Name (A-Z)', value: 'lastname-asc' },
+  { title: 'Last Name (Z-A)', value: 'lastname-desc' },
+  { title: 'First Name (A-Z)', value: 'firstname-asc' },
+  { title: 'First Name (Z-A)', value: 'firstname-desc' },
   { title: 'Nationality (A-Z)', value: 'nationality-asc' },
   { title: 'Nationality (Z-A)', value: 'nationality-desc' }
 ];
@@ -363,11 +375,23 @@ const filteredMembers = computed(() => {
   // Sorting
   if (sortOption.value) {
     filtered.sort((a, b) => {
+      // Extract first and last names properly
+      const getLastName = (member: any) => member.last_name || '';
+      const getFirstName = (member: any) => member.first_name || '';
+      
       switch (sortOption.value) {
-        case 'name-asc':
-          return (a.FullName || '').localeCompare(b.FullName || '');
-        case 'name-desc':
-          return (b.FullName || '').localeCompare(a.FullName || '');
+        case 'lastname-asc': {
+          const lastNameCompare = getLastName(a).localeCompare(getLastName(b));
+          return lastNameCompare !== 0 ? lastNameCompare : getFirstName(a).localeCompare(getFirstName(b));
+        }
+        case 'lastname-desc': {
+          const lastNameCompare = getLastName(b).localeCompare(getLastName(a));
+          return lastNameCompare !== 0 ? lastNameCompare : getFirstName(b).localeCompare(getFirstName(a));
+        }
+        case 'firstname-asc':
+          return getFirstName(a).localeCompare(getFirstName(b));
+        case 'firstname-desc':
+          return getFirstName(b).localeCompare(getFirstName(a));
         case 'nationality-asc':
           return (a.nationality || '').localeCompare(b.nationality || '');
         case 'nationality-desc':
@@ -497,9 +521,64 @@ const deleteMember = async () => {
 };
 
 const handleMemberCreated = (newMember: Member) => {
-  members.value.unshift(newMember);
+  console.log('[member-list] =====================================');
+  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}"`);
+  console.log('[member-list] nationality value:', `"${newMember.nationality}"`);
+  console.log('[member-list] email value:', `"${newMember.email}"`);
+  console.log('[member-list] member_id value:', `"${newMember.member_id}"`);
+  console.log('[member-list] membership_status value:', `"${newMember.membership_status}"`);
+  
+  // ADVANCED DEBUGGING: Check if data is actually missing
+  const hasFirstName = !!(newMember.first_name && newMember.first_name.trim());
+  const hasLastName = !!(newMember.last_name && newMember.last_name.trim());
+  const hasFullName = !!(newMember.FullName && newMember.FullName.trim());
+  
+  console.log('[member-list] Data validation:');
+  console.log('  - hasFirstName:', hasFirstName);
+  console.log('  - hasLastName:', hasLastName);
+  console.log('  - hasFullName:', hasFullName);
+  
+  // If the API response is missing data, refresh the entire member list instead
+  if (!hasFirstName || !hasLastName || !hasFullName) {
+    console.error('[member-list] ❌ API response missing critical member data, refreshing member list...');
+    loadMembers();
+    showSuccess.value = true;
+    successMessage.value = 'Member created successfully. Refreshing member list...';
+    return;
+  }
+  
+  // Calculate FullName with robust fallback
+  const fullName = newMember.FullName || 
+    `${newMember.first_name || ''} ${newMember.last_name || ''}`.trim() ||
+    'New Member';
+  
+  console.log('[member-list] Calculated FullName:', `"${fullName}"`);
+  
+  // Ensure the member has complete data for display
+  const memberWithCompleteData = {
+    ...newMember,
+    FullName: fullName,
+    // Ensure all required fields are present
+    first_name: newMember.first_name || '',
+    last_name: newMember.last_name || '',
+    nationality: newMember.nationality || '',
+    email: newMember.email || '',
+    membership_status: newMember.membership_status || 'Active'
+  };
+  
+  console.log('[member-list] Final member data:', JSON.stringify(memberWithCompleteData, null, 2));
+  console.log('[member-list] Adding member to beginning of list...');
+  
+  members.value.unshift(memberWithCompleteData);
   showSuccess.value = true;
-  successMessage.value = `${newMember.FullName} has been added successfully.`;
+  successMessage.value = `${fullName} has been added successfully.`;
+  
+  console.log('[member-list] ✅ Member added to local list, total count:', members.value.length);
+  console.log('[member-list] =====================================');
 };
 
 const handleMemberUpdated = (updatedMember: Member) => {
@@ -511,55 +590,20 @@ const handleMemberUpdated = (updatedMember: Member) => {
   successMessage.value = `${updatedMember.FullName} has been updated successfully.`;
 };
 
-const createPortalAccount = async (member: Member) => {
-  if (!member.Id || creatingPortalAccountIds.value.includes(member.Id)) return;
+const createPortalAccount = (member: Member) => {
+  selectedMemberForPortalAccount.value = member;
+  showCreatePortalAccountDialog.value = true;
+};
 
-  // Add to creating array to show loading state
-  creatingPortalAccountIds.value.push(member.Id);
-  
-  try {
-    const response = await $fetch<any>(`/api/members/${member.Id}/create-portal-account`, {
-      method: 'POST'
-    });
-
-    if (response?.success) {
-      // Update the member in the local array to reflect the new keycloak_id
-      const index = members.value.findIndex(m => m.Id === member.Id);
-      if (index !== -1) {
-        // Get keycloak_id from response.data
-        members.value[index] = { ...members.value[index], keycloak_id: response.data?.keycloak_id };
-      }
-      
-      showSuccess.value = true;
-      successMessage.value = response.message || `Portal account created successfully for ${member.FullName}.`;
-    } else {
-      throw new Error(response?.message || 'Failed to create portal account');
-    }
-  } catch (err: any) {
-    console.error('Error creating portal account:', err);
-    
-    // Better error handling
-    let errorMessage = 'Failed to create portal account. Please try again.';
-    if (err.statusCode === 409) {
-      errorMessage = 'This member already has a portal account or a user with this email already exists.';
-    } else if (err.statusCode === 400) {
-      errorMessage = 'Member must have email, first name, and last name to create a portal account.';
-    } else if (err.data?.message) {
-      errorMessage = err.data.message;
-    } else if (err.message) {
-      errorMessage = err.message;
-    }
-    
-    // Show error in snackbar
-    showSuccess.value = true; // Reuse success snackbar for errors
-    successMessage.value = errorMessage;
-  } finally {
-    // Remove from creating array
-    const index = creatingPortalAccountIds.value.indexOf(member.Id);
-    if (index > -1) {
-      creatingPortalAccountIds.value.splice(index, 1);
-    }
+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

pages/dashboard/mockup.vue

@@ -0,0 +1,613 @@
+<template>
+  <div class="dashboard-mockup">
+    <!-- Header -->
+    <header class="dashboard-header">
+      <div class="dashboard-header__content">
+        <h1 
+          v-motion
+          :initial="{ opacity: 0, x: -20 }"
+          :enter="{ opacity: 1, x: 0 }"
+          class="dashboard-header__title"
+        >
+          Welcome back, {{ userName }}
+        </h1>
+        <p 
+          v-motion
+          :initial="{ opacity: 0, x: -20 }"
+          :enter="{ opacity: 1, x: 0, transition: { delay: 100 } }"
+          class="dashboard-header__subtitle"
+        >
+          Here's what's happening with MonacoUSA today
+        </p>
+      </div>
+      
+      <div class="dashboard-header__actions">
+        <MonacoButton variant="glass" icon="bell">
+          Notifications
+        </MonacoButton>
+        <MonacoButton variant="primary" icon="plus">
+          New Event
+        </MonacoButton>
+      </div>
+    </header>
+
+    <!-- Stats Grid -->
+    <section class="dashboard-stats">
+      <StatsCard
+        v-for="(stat, index) in stats"
+        :key="stat.label"
+        :label="stat.label"
+        :value="stat.value"
+        :icon="stat.icon"
+        :prefix="stat.prefix"
+        :suffix="stat.suffix"
+        :trend="stat.trend"
+        :progress="stat.progress"
+        :sparkline="stat.sparkline"
+        :delay="index"
+        variant="glass"
+      />
+    </section>
+
+    <!-- Main Content Grid -->
+    <div class="dashboard-grid">
+      <!-- Recent Activity -->
+      <GlassCard 
+        title="Recent Activity" 
+        variant="glass"
+        :delay="400"
+        class="dashboard-activity"
+      >
+        <div class="activity-list">
+          <div 
+            v-for="(activity, index) in recentActivities" 
+            :key="index"
+            v-motion
+            :initial="{ opacity: 0, x: -20 }"
+            :enter="{ 
+              opacity: 1, 
+              x: 0,
+              transition: { delay: 500 + (index * 50) }
+            }"
+            class="activity-item"
+          >
+            <div class="activity-item__icon">
+              <span :class="`activity-icon activity-icon--${activity.type}`">
+                {{ activity.icon }}
+              </span>
+            </div>
+            <div class="activity-item__content">
+              <p class="activity-item__text">{{ activity.text }}</p>
+              <span class="activity-item__time">{{ activity.time }}</span>
+            </div>
+          </div>
+        </div>
+      </GlassCard>
+
+      <!-- Upcoming Events -->
+      <GlassCard 
+        title="Upcoming Events" 
+        variant="glass"
+        :delay="450"
+        class="dashboard-events"
+      >
+        <div class="events-list">
+          <div 
+            v-for="(event, index) in upcomingEvents" 
+            :key="index"
+            v-motion
+            :initial="{ opacity: 0, y: 20 }"
+            :enter="{ 
+              opacity: 1, 
+              y: 0,
+              transition: { delay: 550 + (index * 50) }
+            }"
+            class="event-card"
+          >
+            <div class="event-card__date">
+              <span class="event-card__day">{{ event.day }}</span>
+              <span class="event-card__month">{{ event.month }}</span>
+            </div>
+            <div class="event-card__content">
+              <h4 class="event-card__title">{{ event.title }}</h4>
+              <p class="event-card__location">{{ event.location }}</p>
+              <div class="event-card__attendees">
+                <span class="event-card__count">{{ event.attendees }} attending</span>
+                <MonacoButton variant="ghost" size="sm">
+                  View Details
+                </MonacoButton>
+              </div>
+            </div>
+          </div>
+        </div>
+      </GlassCard>
+
+      <!-- Member Status -->
+      <GlassCard 
+        title="Member Status" 
+        variant="gradient"
+        :delay="500"
+        class="dashboard-member-status"
+      >
+        <div class="member-status">
+          <div class="member-status__badge">
+            <span class="badge badge--active">Active Member</span>
+          </div>
+          <div class="member-status__info">
+            <div class="status-item">
+              <span class="status-item__label">Dues Status</span>
+              <span class="status-item__value status-item__value--success">Paid</span>
+            </div>
+            <div class="status-item">
+              <span class="status-item__label">Next Payment</span>
+              <span class="status-item__value">January 2025</span>
+            </div>
+            <div class="status-item">
+              <span class="status-item__label">Member Since</span>
+              <span class="status-item__value">March 2023</span>
+            </div>
+          </div>
+          <MonacoButton variant="primary" block>
+            Manage Membership
+          </MonacoButton>
+        </div>
+      </GlassCard>
+
+      <!-- Quick Actions -->
+      <GlassCard 
+        title="Quick Actions" 
+        variant="glass"
+        :delay="550"
+        class="dashboard-actions"
+      >
+        <div class="quick-actions">
+          <button 
+            v-for="(action, index) in quickActions"
+            :key="action.label"
+            v-motion
+            :initial="{ opacity: 0, scale: 0.8 }"
+            :enter="{ 
+              opacity: 1, 
+              scale: 1,
+              transition: { delay: 600 + (index * 50) }
+            }"
+            class="action-button"
+          >
+            <span class="action-button__icon">{{ action.icon }}</span>
+            <span class="action-button__label">{{ action.label }}</span>
+          </button>
+        </div>
+      </GlassCard>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import GlassCard from '~/components/ui/GlassCard.vue'
+import MonacoButton from '~/components/ui/MonacoButton.vue'
+import StatsCard from '~/components/ui/StatsCard.vue'
+
+const userName = ref('John')
+
+const stats = ref([
+  {
+    label: 'Total Members',
+    value: 1234,
+    icon: 'users',
+    trend: { type: 'up', value: 12 },
+    sparkline: [30, 40, 35, 50, 49, 60, 70, 91, 95]
+  },
+  {
+    label: 'Events This Month',
+    value: 8,
+    icon: 'calendar',
+    suffix: ' events',
+    trend: { type: 'up', value: 33 }
+  },
+  {
+    label: 'Dues Collected',
+    value: 45670,
+    icon: 'dollar',
+    prefix: '$',
+    trend: { type: 'up', value: 5 },
+    progress: 78
+  },
+  {
+    label: 'Active Projects',
+    value: 12,
+    icon: 'briefcase',
+    trend: { type: 'neutral', value: 0 }
+  }
+])
+
+const recentActivities = ref([
+  {
+    icon: '👤',
+    type: 'member',
+    text: 'New member John Doe joined',
+    time: '2 hours ago'
+  },
+  {
+    icon: '📅',
+    type: 'event',
+    text: 'Summer Gala event created',
+    time: '5 hours ago'
+  },
+  {
+    icon: '💳',
+    type: 'payment',
+    text: 'Sarah Smith paid dues',
+    time: '1 day ago'
+  },
+  {
+    icon: '📝',
+    type: 'update',
+    text: 'Board meeting minutes posted',
+    time: '2 days ago'
+  }
+])
+
+const upcomingEvents = ref([
+  {
+    day: '15',
+    month: 'DEC',
+    title: 'Monaco Winter Gala',
+    location: 'Grand Ballroom',
+    attendees: 120
+  },
+  {
+    day: '22',
+    month: 'DEC',
+    title: 'Board Meeting',
+    location: 'Conference Room A',
+    attendees: 15
+  },
+  {
+    day: '31',
+    month: 'DEC',
+    title: 'New Year Celebration',
+    location: 'Monaco Club',
+    attendees: 200
+  }
+])
+
+const quickActions = ref([
+  { icon: '📝', label: 'Register for Event' },
+  { icon: '💳', label: 'Pay Dues' },
+  { icon: '📊', label: 'View Reports' },
+  { icon: '👥', label: 'Member Directory' },
+  { icon: '📧', label: 'Send Newsletter' },
+  { icon: '⚙️', label: 'Settings' }
+])
+</script>
+
+<style scoped lang="scss">
+.dashboard-mockup {
+  padding: 2rem;
+  max-width: 1400px;
+  margin: 0 auto;
+  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
+  min-height: 100vh;
+}
+
+.dashboard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  
+  &__content {
+    flex: 1;
+  }
+  
+  &__title {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #27272a;
+    margin: 0 0 0.5rem;
+  }
+  
+  &__subtitle {
+    font-size: 1rem;
+    color: #6b7280;
+    margin: 0;
+  }
+  
+  &__actions {
+    display: flex;
+    gap: 1rem;
+  }
+}
+
+.dashboard-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1.5rem;
+  
+  .dashboard-activity {
+    grid-column: span 8;
+  }
+  
+  .dashboard-events {
+    grid-column: span 4;
+  }
+  
+  .dashboard-member-status {
+    grid-column: span 4;
+  }
+  
+  .dashboard-actions {
+    grid-column: span 8;
+  }
+}
+
+.activity-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.activity-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 0.75rem;
+  border-radius: 8px;
+  transition: background 0.2s;
+  
+  &:hover {
+    background: rgba(220, 38, 38, 0.05);
+  }
+  
+  &__icon {
+    flex-shrink: 0;
+  }
+  
+  &__content {
+    flex: 1;
+  }
+  
+  &__text {
+    margin: 0 0 0.25rem;
+    color: #27272a;
+    font-size: 0.875rem;
+  }
+  
+  &__time {
+    font-size: 0.75rem;
+    color: #6b7280;
+  }
+}
+
+.activity-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 8px;
+  font-size: 1rem;
+  
+  &--member {
+    background: rgba(59, 130, 246, 0.1);
+  }
+  
+  &--event {
+    background: rgba(168, 85, 247, 0.1);
+  }
+  
+  &--payment {
+    background: rgba(16, 185, 129, 0.1);
+  }
+  
+  &--update {
+    background: rgba(251, 146, 60, 0.1);
+  }
+}
+
+.events-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.event-card {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 12px;
+  transition: all 0.2s;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.7);
+    transform: translateX(4px);
+  }
+  
+  &__date {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 3.5rem;
+    height: 3.5rem;
+    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+    color: white;
+    border-radius: 10px;
+    flex-shrink: 0;
+  }
+  
+  &__day {
+    font-size: 1.25rem;
+    font-weight: 700;
+    line-height: 1;
+  }
+  
+  &__month {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+  }
+  
+  &__content {
+    flex: 1;
+  }
+  
+  &__title {
+    margin: 0 0 0.25rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #27272a;
+  }
+  
+  &__location {
+    margin: 0 0 0.5rem;
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+  
+  &__attendees {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  &__count {
+    font-size: 0.75rem;
+    color: #dc2626;
+    font-weight: 500;
+  }
+}
+
+.member-status {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  
+  &__badge {
+    text-align: center;
+  }
+  
+  &__info {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+}
+
+.badge {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  
+  &--active {
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    color: white;
+  }
+}
+
+.status-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 8px;
+  
+  &__label {
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+  
+  &__value {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #27272a;
+    
+    &--success {
+      color: #10b981;
+    }
+  }
+}
+
+.quick-actions {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+.action-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1.5rem 1rem;
+  background: rgba(255, 255, 255, 0.5);
+  border: 2px solid transparent;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.8);
+    border-color: rgba(220, 38, 38, 0.2);
+    transform: translateY(-2px);
+  }
+  
+  &__icon {
+    font-size: 1.5rem;
+  }
+  
+  &__label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #27272a;
+  }
+}
+
+// Responsive
+@media (max-width: 1024px) {
+  .dashboard-grid {
+    .dashboard-activity,
+    .dashboard-events,
+    .dashboard-member-status,
+    .dashboard-actions {
+      grid-column: span 12;
+    }
+  }
+  
+  .quick-actions {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .dashboard-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    
+    &__actions {
+      width: 100%;
+      
+      button {
+        flex: 1;
+      }
+    }
+  }
+  
+  .dashboard-stats {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

pages/dashboard/profile.vue

@@ -68,6 +68,70 @@
         </v-col>
       </v-row>
 
+      <!-- Profile Photo -->
+      <v-row class="mb-6">
+        <v-col cols="12">
+          <v-card elevation="2">
+            <v-card-title class="pa-4" style="background-color: #f5f5f5;">
+              <v-icon class="mr-2" color="primary">mdi-account-circle</v-icon>
+              Profile Photo
+            </v-card-title>
+            <v-card-text class="pa-4">
+              <div class="d-flex align-center flex-wrap">
+                <!-- Avatar Preview -->
+                <div class="mr-6 mb-4 text-center">
+                  <ProfileAvatar 
+                    v-if="memberData"
+                    :member-id="memberData.member_id"
+                    :member-name="fullName"
+                    :first-name="memberData.first_name"
+                    :last-name="memberData.last_name"
+                    size="large"
+                    :key="avatarBustKey"
+                    class="mb-2"
+                  />
+                  <p class="text-body-2 text-medium-emphasis">Current Photo</p>
+                </div>
+                
+                <!-- Upload Controls -->
+                <div class="flex-grow-1 mb-4">
+                  <v-file-input
+                    v-model="selectedFiles"
+                    accept="image/jpeg,image/png,image/webp"
+                    label="Choose new profile photo (uploads automatically)"
+                    variant="outlined"
+                    density="compact"
+                    prepend-icon="mdi-camera"
+                    show-size
+                    :disabled="uploading || deleting"
+                    :loading="uploading"
+                    @update:model-value="onSelectImage"
+                    class="mb-3"
+                  />
+                  
+                  <div class="d-flex gap-2 flex-wrap">
+                    <v-btn
+                      color="error"
+                      variant="outlined"
+                      prepend-icon="mdi-delete"
+                      :loading="deleting"
+                      :disabled="uploading || !memberData?.member_id"
+                      @click="confirmDelete = true"
+                    >
+                      Remove Photo
+                    </v-btn>
+                  </div>
+                  
+                  <p class="text-body-2 text-medium-emphasis mt-2">
+                    Supported formats: JPG, PNG, WEBP • Maximum size: 5MB
+                  </p>
+                </div>
+              </div>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+
       <!-- Profile Information -->
       <v-row>
         <!-- Personal Information -->
@@ -277,6 +341,33 @@
           </v-card>
         </v-col>
       </v-row>
+
+      <!-- Contact Support -->
+      <v-row class="mt-6">
+        <v-col cols="12">
+          <v-card elevation="2">
+            <v-card-title class="pa-4" style="background-color: #f5f5f5;">
+              <v-icon class="mr-2" color="primary">mdi-help-circle-outline</v-icon>
+              Need Help?
+            </v-card-title>
+            <v-card-text class="pa-4">
+              <p class="mb-4">
+                If you need assistance or have questions about your membership, 
+                please don't hesitate to contact our support team.
+              </p>
+              <v-btn 
+                color="primary" 
+                variant="outlined"
+                style="border-color: #a31515; color: #a31515;"
+                @click="contactSupport"
+              >
+                <v-icon start>mdi-email</v-icon>
+                Contact Support
+              </v-btn>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
     </div>
 
     <!-- Snackbar for notifications -->
@@ -295,6 +386,35 @@
         </v-btn>
       </template>
     </v-snackbar>
+
+    <!-- Delete Confirmation Dialog -->
+    <v-dialog v-model="confirmDelete" max-width="400">
+      <v-card>
+        <v-card-title class="text-h5">
+          Remove Profile Photo?
+        </v-card-title>
+        <v-card-text>
+          Are you sure you want to remove your profile photo? This action cannot be undone.
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            text
+            @click="confirmDelete = false"
+            :disabled="deleting"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            color="error"
+            :loading="deleting"
+            @click="confirmDeleteImage"
+          >
+            Remove Photo
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-container>
 </template>
 
@@ -310,13 +430,18 @@ const { user, userTier } = useAuth();
 
 // Reactive state
 const loading = ref(true);
-const memberData = ref<Member | null>(null);
 const snackbar = ref({
   show: false,
   message: '',
   color: 'success'
 });
 
+// Fetch complete member data (same as user.vue)
+const { data: sessionData, pending: sessionPending, error: sessionError, refresh: refreshSession } =
+  await useFetch<{ success: boolean; member: Member }>('/api/auth/session', { server: false });
+
+const memberData = computed<Member | null>(() => sessionData.value?.member || null);
+
 // Computed properties
 const fullName = computed(() => {
   if (memberData.value) {
@@ -336,19 +461,20 @@ const daysRemaining = computed(() => {
   return diffDays;
 });
 
+// Profile image state
+const uploading = ref(false);
+const deleting = ref(false);
+const avatarBustKey = ref(0);
+const selectedFiles = ref<File[]>([]);
+const confirmDelete = ref(false);
+
 // Methods
 const loadMemberData = async () => {
-  if (!user.value?.email) return;
-  
   try {
     loading.value = true;
-    const response = await $fetch('/api/members') as any;
-    const members = response?.data || response?.list || [];
-    
-    // Find member by email
-    const member = members.find((m: any) => m.email === user.value?.email);
-    if (member) {
-      memberData.value = member;
+    await refreshSession();
+    if (!sessionData.value?.member) {
+      throw new Error('Missing member in session');
     }
   } catch (error) {
     console.error('Failed to load member data:', error);
@@ -362,6 +488,77 @@ const loadMemberData = async () => {
   }
 };
 
+// Profile image helpers
+const onSelectImage = async (files: File[] | File | null) => {
+  const fileList = Array.isArray(files) ? files : files ? [files] : [];
+  if (fileList.length === 0) return;
+  const file = fileList[0];
+
+  // Basic validation
+  const maxBytes = 5 * 1024 * 1024; // 5MB
+  const allowed = ['image/jpeg', 'image/png', 'image/webp'];
+  if (!allowed.includes(file.type)) {
+    snackbar.value = { show: true, message: 'Only JPG, PNG or WEBP images are allowed.', color: 'error' };
+    return;
+  }
+  if (file.size > maxBytes) {
+    snackbar.value = { show: true, message: 'Image must be 5MB or smaller.', color: 'error' };
+    return;
+  }
+
+  // Check if we have member data
+  if (!memberData.value?.member_id) {
+    snackbar.value = { show: true, message: 'Unable to upload: member ID not found.', color: 'error' };
+    return;
+  }
+
+  try {
+    uploading.value = true;
+    const body = new FormData();
+    body.append('image', file); // Changed from 'file' to 'image' to match backend expectation
+    
+    await $fetch('/api/profile/upload-image', {
+      method: 'POST',
+      query: {
+        memberId: memberData.value.member_id
+      },
+      body
+    });
+    
+    avatarBustKey.value++;
+    selectedFiles.value = []; // Clear the file input
+    snackbar.value = { show: true, message: 'Profile image updated.', color: 'success' };
+  } catch (e: any) {
+    console.error('Upload error:', e);
+    const errorMessage = e?.data?.message || e?.message || 'Failed to upload image.';
+    snackbar.value = { show: true, message: errorMessage, color: 'error' };
+  } finally {
+    uploading.value = false;
+  }
+};
+
+const confirmDeleteImage = async () => {
+  confirmDelete.value = false;
+  await onDeleteImage();
+};
+
+const onDeleteImage = async () => {
+  if (!memberData.value?.member_id) return;
+  try {
+    deleting.value = true;
+    await $fetch(`/api/profile/image/${encodeURIComponent(memberData.value.member_id)}`, {
+      method: 'DELETE'
+    });
+    avatarBustKey.value++;
+    snackbar.value = { show: true, message: 'Profile image removed.', color: 'success' };
+  } catch (e) {
+    console.error(e);
+    snackbar.value = { show: true, message: 'Failed to delete image.', color: 'error' };
+  } finally {
+    deleting.value = false;
+  }
+};
+
 const copyMemberID = async () => {
   if (!memberData.value?.member_id) return;
   
@@ -426,11 +623,33 @@ const getDaysRemainingColor = (days: number): string => {
   return 'text-success';
 };
 
+const contactSupport = () => {
+  const subject = encodeURIComponent('MonacoUSA Portal Support Request');
+  const body = encodeURIComponent(`Hello,
+
+I need assistance with:
+
+[Please describe your issue]
+
+Member ID: ${memberData.value?.member_id || 'Not provided'}
+Name: ${fullName.value || 'Not provided'}
+Email: ${memberData.value?.email || user.value?.email || 'Not provided'}
+
+Thank you!`);
+  
+  window.open(`mailto:support@monacousa.org?subject=${subject}&body=${body}`, '_self');
+};
+
 // Initialize
 onMounted(() => {
   loadMemberData();
 });
 
+// Watch for session loading
+watch(sessionPending, (isPending) => {
+  loading.value = isPending;
+});
+
 // Watch for user changes
 watch(user, () => {
   if (user.value) {

pages/events/mockup.vue

@@ -0,0 +1,710 @@
+<template>
+  <div class="events-mockup">
+    <!-- Header -->
+    <header class="events-header">
+      <div 
+        v-motion
+        :initial="{ opacity: 0, y: -20 }"
+        :enter="{ opacity: 1, y: 0 }"
+        class="events-header__content"
+      >
+        <h1 class="events-header__title">Events</h1>
+        <p class="events-header__subtitle">Discover and join MonacoUSA events</p>
+      </div>
+      
+      <div 
+        v-motion
+        :initial="{ opacity: 0, y: -20 }"
+        :enter="{ opacity: 1, y: 0, transition: { delay: 100 } }"
+        class="events-header__actions"
+      >
+        <FloatingInput 
+          v-model="searchQuery"
+          label="Search events..."
+          leftIcon="search"
+          variant="glass"
+          clearable
+        />
+        <MonacoButton variant="primary" icon="plus">
+          Create Event
+        </MonacoButton>
+      </div>
+    </header>
+
+    <!-- Filter Bar -->
+    <div 
+      v-motion
+      :initial="{ opacity: 0, y: 20 }"
+      :enter="{ opacity: 1, y: 0, transition: { delay: 200 } }"
+      class="events-filters"
+    >
+      <div class="filter-chips">
+        <button 
+          v-for="filter in filters"
+          :key="filter.value"
+          class="filter-chip"
+          :class="{ 'filter-chip--active': selectedFilter === filter.value }"
+          @click="selectedFilter = filter.value"
+        >
+          {{ filter.label }}
+          <span v-if="filter.count" class="filter-chip__count">{{ filter.count }}</span>
+        </button>
+      </div>
+      
+      <div class="view-toggles">
+        <button 
+          class="view-toggle"
+          :class="{ 'view-toggle--active': viewMode === 'grid' }"
+          @click="viewMode = 'grid'"
+        >
+          <span>⊞</span> Grid
+        </button>
+        <button 
+          class="view-toggle"
+          :class="{ 'view-toggle--active': viewMode === 'list' }"
+          @click="viewMode = 'list'"
+        >
+          <span>☰</span> List
+        </button>
+      </div>
+    </div>
+
+    <!-- Events Grid/List -->
+    <div 
+      class="events-container"
+      :class="`events-container--${viewMode}`"
+    >
+      <div
+        v-for="(event, index) in events"
+        :key="event.id"
+        v-motion
+        :initial="{ opacity: 0, y: 30 }"
+        :enter="{ 
+          opacity: 1, 
+          y: 0,
+          transition: { 
+            delay: 300 + (index * 50),
+            type: 'spring',
+            stiffness: 200,
+            damping: 20
+          }
+        }"
+        class="event-card-full"
+        :class="{ 'event-card-full--featured': event.featured }"
+      >
+        <div class="event-card-full__image">
+          <img :src="event.image" :alt="event.title" />
+          <div v-if="event.featured" class="event-card-full__badge">Featured</div>
+          <div class="event-card-full__date-overlay">
+            <span class="date-day">{{ event.date.day }}</span>
+            <span class="date-month">{{ event.date.month }}</span>
+          </div>
+        </div>
+        
+        <div class="event-card-full__content">
+          <div class="event-card-full__header">
+            <h3 class="event-card-full__title">{{ event.title }}</h3>
+            <span class="event-card-full__category">{{ event.category }}</span>
+          </div>
+          
+          <p class="event-card-full__description">{{ event.description }}</p>
+          
+          <div class="event-card-full__meta">
+            <div class="meta-item">
+              <span class="meta-icon">📍</span>
+              <span class="meta-text">{{ event.location }}</span>
+            </div>
+            <div class="meta-item">
+              <span class="meta-icon">🕐</span>
+              <span class="meta-text">{{ event.time }}</span>
+            </div>
+            <div class="meta-item">
+              <span class="meta-icon">👥</span>
+              <span class="meta-text">{{ event.attendees }} attending</span>
+            </div>
+          </div>
+          
+          <div class="event-card-full__footer">
+            <div class="event-card-full__price">
+              <span v-if="event.price === 0" class="price-free">Free</span>
+              <span v-else class="price-amount">${{ event.price }}</span>
+            </div>
+            
+            <div class="event-card-full__actions">
+              <MonacoButton variant="ghost" size="sm" icon="heart">
+                Save
+              </MonacoButton>
+              <MonacoButton variant="primary" size="sm">
+                Register
+              </MonacoButton>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Load More -->
+    <div 
+      v-motion
+      :initial="{ opacity: 0 }"
+      :enter="{ opacity: 1, transition: { delay: 800 } }"
+      class="load-more"
+    >
+      <MonacoButton variant="glass" icon="refresh" block>
+        Load More Events
+      </MonacoButton>
+    </div>
+
+    <!-- Floating Calendar Widget -->
+    <GlassCard 
+      variant="glass"
+      class="calendar-widget"
+      :animated="true"
+      :delay="900"
+    >
+      <h4 class="calendar-widget__title">Quick Calendar</h4>
+      <div class="calendar-mini">
+        <div class="calendar-mini__header">
+          <button class="calendar-nav">‹</button>
+          <span class="calendar-month">December 2024</span>
+          <button class="calendar-nav">›</button>
+        </div>
+        <div class="calendar-mini__grid">
+          <div 
+            v-for="day in 31" 
+            :key="day"
+            class="calendar-day"
+            :class="{ 
+              'calendar-day--event': [5, 12, 15, 22, 31].includes(day),
+              'calendar-day--today': day === 10
+            }"
+          >
+            {{ day }}
+          </div>
+        </div>
+      </div>
+    </GlassCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import GlassCard from '~/components/ui/GlassCard.vue'
+import MonacoButton from '~/components/ui/MonacoButton.vue'
+import FloatingInput from '~/components/ui/FloatingInput.vue'
+
+const searchQuery = ref('')
+const selectedFilter = ref('all')
+const viewMode = ref('grid')
+
+const filters = ref([
+  { label: 'All Events', value: 'all', count: 24 },
+  { label: 'Upcoming', value: 'upcoming', count: 12 },
+  { label: 'This Week', value: 'week', count: 5 },
+  { label: 'This Month', value: 'month', count: 8 },
+  { label: 'Free', value: 'free', count: 7 },
+  { label: 'Members Only', value: 'members', count: 10 }
+])
+
+const events = ref([
+  {
+    id: 1,
+    title: 'Monaco Winter Gala 2024',
+    category: 'Social',
+    description: 'Join us for an elegant evening celebrating the Monaco-US friendship with fine dining, live entertainment, and networking.',
+    image: '/api/placeholder/400/250',
+    date: { day: '15', month: 'DEC' },
+    time: '7:00 PM - 11:00 PM',
+    location: 'Grand Ballroom, Downtown',
+    attendees: 120,
+    price: 150,
+    featured: true
+  },
+  {
+    id: 2,
+    title: 'Business Networking Lunch',
+    category: 'Networking',
+    description: 'Connect with fellow Monaco-US business professionals over lunch and expand your network.',
+    image: '/api/placeholder/400/250',
+    date: { day: '18', month: 'DEC' },
+    time: '12:00 PM - 2:00 PM',
+    location: 'Monaco Club',
+    attendees: 45,
+    price: 35,
+    featured: false
+  },
+  {
+    id: 3,
+    title: 'Cultural Exchange Workshop',
+    category: 'Education',
+    description: 'Learn about Monaco culture, history, and traditions in this interactive workshop.',
+    image: '/api/placeholder/400/250',
+    date: { day: '20', month: 'DEC' },
+    time: '3:00 PM - 5:00 PM',
+    location: 'Community Center',
+    attendees: 30,
+    price: 0,
+    featured: false
+  },
+  {
+    id: 4,
+    title: 'New Year Celebration',
+    category: 'Social',
+    description: 'Ring in the new year with the MonacoUSA community! Champagne toast, live music, and dancing.',
+    image: '/api/placeholder/400/250',
+    date: { day: '31', month: 'DEC' },
+    time: '9:00 PM - 2:00 AM',
+    location: 'Monaco Club Rooftop',
+    attendees: 200,
+    price: 200,
+    featured: true
+  },
+  {
+    id: 5,
+    title: 'Wine Tasting Evening',
+    category: 'Social',
+    description: 'Discover exceptional wines from Monaco and France guided by our sommelier.',
+    image: '/api/placeholder/400/250',
+    date: { day: '22', month: 'DEC' },
+    time: '6:00 PM - 9:00 PM',
+    location: 'Wine Gallery',
+    attendees: 60,
+    price: 75,
+    featured: false
+  },
+  {
+    id: 6,
+    title: 'Board Meeting',
+    category: 'Meeting',
+    description: 'Monthly board meeting to discuss club activities and initiatives.',
+    image: '/api/placeholder/400/250',
+    date: { day: '28', month: 'DEC' },
+    time: '5:00 PM - 7:00 PM',
+    location: 'Conference Room A',
+    attendees: 15,
+    price: 0,
+    featured: false
+  }
+])
+</script>
+
+<style scoped lang="scss">
+.events-mockup {
+  padding: 2rem;
+  max-width: 1400px;
+  margin: 0 auto;
+  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
+  min-height: 100vh;
+  position: relative;
+}
+
+.events-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  
+  &__content {
+    flex: 1;
+  }
+  
+  &__title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #27272a;
+    margin: 0 0 0.5rem;
+  }
+  
+  &__subtitle {
+    font-size: 1.125rem;
+    color: #6b7280;
+    margin: 0;
+  }
+  
+  &__actions {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    
+    .floating-input {
+      width: 300px;
+    }
+  }
+}
+
+.events-filters {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20px);
+  border-radius: 16px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.filter-chips {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: rgba(255, 255, 255, 0.8);
+  border: 2px solid transparent;
+  border-radius: 20px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.2s;
+  
+  &:hover {
+    background: rgba(220, 38, 38, 0.05);
+    border-color: rgba(220, 38, 38, 0.2);
+  }
+  
+  &--active {
+    background: #dc2626;
+    color: white;
+    border-color: #dc2626;
+    
+    .filter-chip__count {
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
+  
+  &__count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding: 0 0.25rem;
+    background: rgba(220, 38, 38, 0.1);
+    border-radius: 10px;
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+}
+
+.view-toggles {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.view-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: rgba(255, 255, 255, 0.8);
+  border: 2px solid transparent;
+  border-radius: 10px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.2s;
+  
+  &:hover {
+    background: rgba(220, 38, 38, 0.05);
+    border-color: rgba(220, 38, 38, 0.2);
+  }
+  
+  &--active {
+    background: white;
+    color: #dc2626;
+    border-color: #dc2626;
+  }
+}
+
+.events-container {
+  display: grid;
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+  
+  &--grid {
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  }
+  
+  &--list {
+    grid-template-columns: 1fr;
+  }
+}
+
+.event-card-full {
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(20px);
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+  }
+  
+  &--featured {
+    border: 2px solid #dc2626;
+    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.15);
+  }
+  
+  &__image {
+    position: relative;
+    height: 200px;
+    overflow: hidden;
+    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
+    
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  
+  &__badge {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    padding: 0.25rem 0.75rem;
+    background: #dc2626;
+    color: white;
+    border-radius: 20px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+  
+  &__date-overlay {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 3.5rem;
+    height: 3.5rem;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    
+    .date-day {
+      font-size: 1.25rem;
+      font-weight: 700;
+      color: #dc2626;
+      line-height: 1;
+    }
+    
+    .date-month {
+      font-size: 0.75rem;
+      color: #6b7280;
+      text-transform: uppercase;
+    }
+  }
+  
+  &__content {
+    padding: 1.5rem;
+  }
+  
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 0.75rem;
+  }
+  
+  &__title {
+    flex: 1;
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #27272a;
+  }
+  
+  &__category {
+    padding: 0.25rem 0.75rem;
+    background: rgba(220, 38, 38, 0.1);
+    color: #dc2626;
+    border-radius: 20px;
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+  
+  &__description {
+    margin: 0 0 1rem;
+    font-size: 0.875rem;
+    color: #6b7280;
+    line-height: 1.5;
+  }
+  
+  &__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-bottom: 1rem;
+  }
+  
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(220, 38, 38, 0.1);
+  }
+  
+  &__price {
+    .price-free {
+      padding: 0.25rem 0.75rem;
+      background: rgba(16, 185, 129, 0.1);
+      color: #10b981;
+      border-radius: 8px;
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+    
+    .price-amount {
+      font-size: 1.25rem;
+      font-weight: 700;
+      color: #dc2626;
+    }
+  }
+  
+  &__actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: #6b7280;
+  
+  .meta-icon {
+    font-size: 1rem;
+  }
+}
+
+.load-more {
+  max-width: 400px;
+  margin: 2rem auto;
+}
+
+.calendar-widget {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  width: 280px;
+  z-index: 10;
+  
+  &__title {
+    margin: 0 0 1rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #dc2626;
+  }
+}
+
+.calendar-mini {
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+  
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 0.25rem;
+  }
+}
+
+.calendar-nav {
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: #dc2626;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.2s;
+  
+  &:hover {
+    background: rgba(220, 38, 38, 0.1);
+  }
+}
+
+.calendar-month {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #27272a;
+}
+
+.calendar-day {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  color: #6b7280;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  
+  &:hover {
+    background: rgba(220, 38, 38, 0.05);
+  }
+  
+  &--event {
+    background: rgba(220, 38, 38, 0.1);
+    color: #dc2626;
+    font-weight: 600;
+  }
+  
+  &--today {
+    background: #dc2626;
+    color: white;
+    font-weight: 600;
+  }
+}
+
+// Responsive
+@media (max-width: 768px) {
+  .events-header {
+    &__actions {
+      width: 100%;
+      
+      .floating-input {
+        flex: 1;
+      }
+    }
+  }
+  
+  .events-container--grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .calendar-widget {
+    display: none;
+  }
+}
+</style>

pages/member/dashboard/index.vue

@@ -0,0 +1,412 @@
+<template>
+  <div class="member-dashboard">
+    <!-- Enhanced Glass Header -->
+    <div class="dashboard-header glass-header mb-6">
+      <h1 class="dashboard-title text-gradient">
+        Welcome back, {{ firstName }}!
+      </h1>
+      <p class="dashboard-subtitle">
+        Member Dashboard
+      </p>
+      <div class="text-center">
+        <v-chip class="glass-badge mt-2">
+          <v-icon start>mdi-account-circle</v-icon>
+          Member
+        </v-chip>
+      </div>
+    </div>
+
+    <!-- Bento Grid Layout -->
+    <div class="bento-grid mb-6">
+      <!-- Profile Card -->
+      <div class="bento-item bento-item--medium">
+        <div class="glass-card animated-entrance">
+          <SimpleProfileCard 
+            :member="memberData"
+            :email-verified="emailVerified"
+            @edit-profile="navigateTo('/member/profile')"
+          />
+        </div>
+      </div>
+
+      <!-- Events Card -->
+      <div class="bento-item bento-item--xlarge">
+        <div class="glass-card animated-entrance" style="animation-delay: 0.1s;">
+          <EventsCard 
+            :events="upcomingEvents"
+            @view-all="navigateTo('/member/events')"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Activity Timeline with Glass Effect -->
+    <div class="bento-grid">
+      <div class="bento-item bento-item--full">
+        <div class="glass-card animated-entrance" style="animation-delay: 0.2s;">
+          <div class="card-header">
+            <v-icon class="mr-2" color="primary">mdi-history</v-icon>
+            <h2 class="card-title text-gradient">Recent Activity</h2>
+          </div>
+          <ActivityTimeline 
+            :activities="filteredActivities"
+            :max-items="10"
+          />
+        </div>
+      </div>
+    </div>
+
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Member } from '~/utils/types';
+import SimpleProfileCard from '~/components/dashboard/SimpleProfileCard.vue';
+import ActivityTimeline from '~/components/dashboard/ActivityTimeline.vue';
+import EventsCard from '~/components/dashboard/EventsCard.vue';
+
+definePageMeta({
+  layout: 'member',
+  middleware: 'member'
+});
+
+const { user } = useAuth();
+
+// Fetch member data
+const { data: sessionData } = await useFetch<{ success: boolean; member: Member | null }>('/api/auth/session', { 
+  server: false
+});
+
+const memberData = computed<Member | null>(() => sessionData.value?.member || null);
+
+// Computed properties
+const firstName = computed(() => memberData.value?.first_name || user.value?.firstName || 'Member');
+const fullName = computed(() => {
+  if (memberData.value) {
+    return `${memberData.value.first_name} ${memberData.value.last_name}`;
+  }
+  return user.value?.name || 'Member';
+});
+const email = computed(() => memberData.value?.email || user.value?.email || '');
+const emailVerified = computed(() => {
+  // Check if email is verified (you can add actual verification logic here)
+  return true;
+});
+
+
+// Mock data - replace with actual API calls
+const upcomingEvents = ref([
+  {
+    id: "1",
+    title: "Monthly Networking Event",
+    date: "2024-01-15",
+    time: "6:00 PM",
+    location: "Conference Center",
+    status: "confirmed"
+  },
+  {
+    id: "2",
+    title: "Workshop: Digital Marketing",
+    date: "2024-01-22",
+    time: "2:00 PM",
+    location: "Training Room A",
+    status: "pending"
+  },
+  {
+    id: "3",
+    title: "Annual Gala Dinner",
+    date: "2024-02-05",
+    time: "7:00 PM",
+    location: "Grand Ballroom",
+    status: "confirmed"
+  }
+]);
+
+
+const recentActivity = ref([
+  {
+    id: "1",
+    type: "event",
+    description: "Registered for Monthly Networking Event",
+    timestamp: "2 days ago",
+    icon: "mdi-calendar-check",
+    color: "error"
+  },
+  {
+    id: "2",
+    type: "profile",
+    description: "Updated profile information",
+    timestamp: "1 week ago",
+    icon: "mdi-account",
+    color: "info"
+  },
+  {
+    id: "3",
+    type: "event",
+    description: "Attended Workshop: Digital Marketing",
+    timestamp: "2 weeks ago",
+    icon: "mdi-account-group",
+    color: "error"
+  }
+]);
+
+// Filter activities to exclude payment and achievement types
+const filteredActivities = computed(() => {
+  return recentActivity.value
+    .filter(activity => activity.type === 'event' || activity.type === 'profile')
+    .map(activity => ({
+      ...activity,
+      title: activity.description.split(' ').slice(0, 3).join(' '),
+      description: activity.description
+    }));
+});
+
+
+// Helper functions
+const formatDate = (dateString: string) => {
+  return new Date(dateString).toLocaleDateString('en-US', { 
+    month: 'short', 
+    day: 'numeric', 
+    year: 'numeric' 
+  });
+};
+
+// Load real data on mount
+onMounted(async () => {
+  // Load upcoming events
+  try {
+    const eventsRes = await $fetch('/api/member/events/upcoming');
+    if (eventsRes?.success && eventsRes?.data) {
+      // Map real events data
+      console.log('Loaded upcoming events:', eventsRes.data);
+    }
+  } catch (error) {
+    console.error('Error loading events:', error);
+  }
+
+});
+</script>
+
+<style scoped lang="scss">
+.member-dashboard {
+  padding: 1rem;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
+}
+
+/* Enhanced Glass Header */
+.dashboard-header {
+  margin-bottom: 2rem;
+  padding: 2rem;
+  border-radius: 20px;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.95),
+    rgba(255, 255, 255, 0.85)
+  );
+  backdrop-filter: blur(30px) saturate(180%);
+  -webkit-backdrop-filter: blur(30px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  box-shadow: 
+    0 8px 32px 0 rgba(31, 38, 135, 0.15),
+    inset 0 1px 2px rgba(255, 255, 255, 0.6);
+  animation: slide-up 0.6s ease-out;
+  text-align: center;
+}
+
+.header-content {
+  flex: 1;
+}
+
+.dashboard-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 0.5rem;
+  animation: fade-in 0.8s ease-out;
+}
+
+.dashboard-subtitle {
+  color: #71717a;
+  font-size: 1.1rem;
+}
+
+.glass-badge {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
+  color: white !important;
+  font-weight: 600;
+}
+
+.text-gradient {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.header-actions {
+  display: flex;
+  gap: 1rem;
+}
+
+.notification-btn {
+  text-transform: none;
+  font-weight: 500;
+}
+
+.dashboard-grid {
+  margin-bottom: 3rem;
+}
+
+/* Bento Grid Layout */
+.bento-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1.5rem;
+  
+  .bento-item {
+    border-radius: 20px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    &--small { grid-column: span 3; }
+    &--medium { grid-column: span 4; }
+    &--large { grid-column: span 6; }
+    &--xlarge { grid-column: span 8; }
+    &--full { grid-column: span 12; }
+    
+    &:hover {
+      transform: translateY(-4px);
+    }
+  }
+}
+
+/* Enhanced Glass Card */
+.glass-card {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.95),
+    rgba(255, 255, 255, 0.85),
+    rgba(255, 255, 255, 0.75)
+  ) !important;
+  backdrop-filter: blur(30px) saturate(180%);
+  -webkit-backdrop-filter: blur(30px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  box-shadow: 
+    0 8px 32px 0 rgba(31, 38, 135, 0.15),
+    inset 0 1px 2px rgba(255, 255, 255, 0.6),
+    inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
+  border-radius: 20px !important;
+  padding: 1.5rem;
+  height: 100%;
+  
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 
+      0 12px 40px 0 rgba(31, 38, 135, 0.25),
+      inset 0 1px 2px rgba(255, 255, 255, 0.8),
+      inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
+  }
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid rgba(220, 38, 38, 0.1);
+}
+
+.card-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.quick-actions-section {
+  margin-top: 2rem;
+}
+
+.section-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: rgb(31, 41, 55);
+  margin-bottom: 1.5rem;
+}
+
+.quick-actions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1.25rem;
+  
+  @media (max-width: 640px) {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+  }
+}
+
+/* Animated Entrance */
+.animated-entrance {
+  animation: slide-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Button Enhancements */
+.v-btn {
+  text-transform: none !important;
+  font-weight: 600;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
+  }
+}
+
+/* Responsive Design */
+@media (max-width: 1280px) {
+  .bento-grid {
+    .bento-item--xlarge {
+      grid-column: span 12;
+    }
+    .bento-item--large {
+      grid-column: span 6;
+    }
+    .bento-item--medium {
+      grid-column: span 6;
+    }
+  }
+}
+
+@media (max-width: 960px) {
+  .bento-grid {
+    .bento-item--large {
+      grid-column: span 12;
+    }
+    .bento-item--medium {
+      grid-column: span 12;
+    }
+  }
+}
+</style>

pages/member/events/index.vue

@@ -0,0 +1,552 @@
+<template>
+  <div class="member-dashboard">
+    <!-- Header -->
+    <div class="mb-6">
+      <h1 class="text-h4 font-weight-bold mb-2">Events</h1>
+      <p class="text-body-1 text-medium-emphasis">Discover and register for upcoming MonacoUSA events</p>
+    </div>
+
+    <!-- Filters -->
+    <v-card class="mb-6" elevation="1">
+      <v-card-text>
+        <v-row align="center">
+          <v-col cols="12" md="4">
+            <v-text-field
+              v-model="searchQuery"
+              prepend-inner-icon="mdi-magnify"
+              label="Search events"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="3">
+            <v-select
+              v-model="selectedCategory"
+              :items="categories"
+              label="Category"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="3">
+            <v-select
+              v-model="selectedMonth"
+              :items="months"
+              label="Month"
+              variant="outlined"
+              density="compact"
+              clearable
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="2">
+            <v-btn
+              color="error"
+              variant="flat"
+              block
+              @click="resetFilters"
+            >
+              Reset Filters
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+
+    <!-- Event Tabs -->
+    <v-tabs
+      v-model="tab"
+      color="error"
+      class="mb-6"
+    >
+      <v-tab value="upcoming">
+        <v-icon start>mdi-calendar-clock</v-icon>
+        Upcoming Events
+      </v-tab>
+      <v-tab value="registered">
+        <v-icon start>mdi-calendar-check</v-icon>
+        My Registrations
+      </v-tab>
+      <v-tab value="past">
+        <v-icon start>mdi-history</v-icon>
+        Past Events
+      </v-tab>
+    </v-tabs>
+
+    <!-- Tab Content -->
+    <v-window v-model="tab">
+      <!-- Upcoming Events Tab -->
+      <v-window-item value="upcoming">
+        <v-row>
+          <v-col
+            v-for="event in upcomingEvents"
+            :key="event.id"
+            cols="12"
+            md="6"
+            lg="4"
+          >
+            <v-card elevation="2" hover class="h-100 d-flex flex-column">
+              <!-- Event Image -->
+              <v-img
+                :src="event.image"
+                height="200"
+                cover
+                gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
+              >
+                <v-card-title class="text-white">
+                  {{ event.title }}
+                </v-card-title>
+              </v-img>
+
+              <v-card-text class="flex-grow-1">
+                <!-- Event Details -->
+                <div class="mb-3">
+                  <v-chip
+                    :color="getCategoryColor(event.category)"
+                    size="small"
+                    variant="tonal"
+                    class="mb-2"
+                  >
+                    {{ event.category }}
+                  </v-chip>
+                </div>
+
+                <p class="text-body-2 mb-3">{{ event.description }}</p>
+
+                <div class="text-caption text-medium-emphasis">
+                  <div class="d-flex align-center mb-1">
+                    <v-icon size="x-small" class="mr-2">mdi-calendar</v-icon>
+                    {{ formatDate(event.date) }}
+                  </div>
+                  <div class="d-flex align-center mb-1">
+                    <v-icon size="x-small" class="mr-2">mdi-clock-outline</v-icon>
+                    {{ event.time }}
+                  </div>
+                  <div class="d-flex align-center mb-1">
+                    <v-icon size="x-small" class="mr-2">mdi-map-marker</v-icon>
+                    {{ event.location }}
+                  </div>
+                  <div class="d-flex align-center">
+                    <v-icon size="x-small" class="mr-2">mdi-account-group</v-icon>
+                    {{ event.attendees }} / {{ event.capacity }} attendees
+                  </div>
+                </div>
+              </v-card-text>
+
+              <v-card-actions>
+                <v-spacer />
+                <v-btn
+                  variant="text"
+                  color="error"
+                  @click="viewEventDetails(event)"
+                >
+                  Learn More
+                </v-btn>
+                <v-btn
+                  variant="flat"
+                  color="error"
+                  :disabled="event.attendees >= event.capacity"
+                  @click="registerForEvent(event)"
+                >
+                  {{ event.attendees >= event.capacity ? 'Full' : 'Register' }}
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </v-row>
+
+        <!-- Empty State -->
+        <v-card v-if="upcomingEvents.length === 0" class="text-center pa-8" elevation="0">
+          <v-icon size="64" color="grey-lighten-1">mdi-calendar-blank</v-icon>
+          <h3 class="text-h6 mt-4">No upcoming events</h3>
+          <p class="text-body-2 text-medium-emphasis">Check back later for new events</p>
+        </v-card>
+      </v-window-item>
+
+      <!-- Registered Events Tab -->
+      <v-window-item value="registered">
+        <v-row>
+          <v-col cols="12">
+            <v-card elevation="1">
+              <v-list lines="three">
+                <v-list-item
+                  v-for="registration in registeredEvents"
+                  :key="registration.id"
+                  class="py-3"
+                >
+                  <template v-slot:prepend>
+                    <v-avatar size="60" rounded="lg">
+                      <v-img :src="registration.image" cover />
+                    </v-avatar>
+                  </template>
+
+                  <v-list-item-title class="font-weight-medium">
+                    {{ registration.title }}
+                  </v-list-item-title>
+                  <v-list-item-subtitle>
+                    <div class="d-flex gap-3 mt-1">
+                      <span><v-icon size="x-small">mdi-calendar</v-icon> {{ formatDate(registration.date) }}</span>
+                      <span><v-icon size="x-small">mdi-clock-outline</v-icon> {{ registration.time }}</span>
+                      <span><v-icon size="x-small">mdi-map-marker</v-icon> {{ registration.location }}</span>
+                    </div>
+                  </v-list-item-subtitle>
+
+                  <template v-slot:append>
+                    <div class="text-right">
+                      <v-chip
+                        color="success"
+                        size="small"
+                        variant="tonal"
+                        class="mb-2"
+                      >
+                        <v-icon start size="x-small">mdi-check</v-icon>
+                        Registered
+                      </v-chip>
+                      <div>
+                        <v-btn
+                          variant="text"
+                          size="small"
+                          color="error"
+                          @click="cancelRegistration(registration)"
+                        >
+                          Cancel
+                        </v-btn>
+                      </div>
+                    </div>
+                  </template>
+                </v-list-item>
+              </v-list>
+
+              <!-- Empty State -->
+              <div v-if="registeredEvents.length === 0" class="text-center pa-8">
+                <v-icon size="64" color="grey-lighten-1">mdi-calendar-remove</v-icon>
+                <h3 class="text-h6 mt-4">No registered events</h3>
+                <p class="text-body-2 text-medium-emphasis">Browse upcoming events to find something interesting</p>
+              </div>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-window-item>
+
+      <!-- Past Events Tab -->
+      <v-window-item value="past">
+        <v-row>
+          <v-col cols="12">
+            <v-timeline side="end" density="compact">
+              <v-timeline-item
+                v-for="event in pastEvents"
+                :key="event.id"
+                dot-color="grey"
+                size="small"
+              >
+                <template v-slot:opposite>
+                  <div class="text-caption text-medium-emphasis">
+                    {{ formatDate(event.date) }}
+                  </div>
+                </template>
+
+                <v-card elevation="1">
+                  <v-card-title class="text-h6">{{ event.title }}</v-card-title>
+                  <v-card-text>
+                    <p class="text-body-2 mb-2">{{ event.description }}</p>
+                    <div class="text-caption text-medium-emphasis">
+                      <v-icon size="x-small">mdi-account-group</v-icon>
+                      {{ event.attendees }} attendees
+                    </div>
+                  </v-card-text>
+                  <v-card-actions>
+                    <v-btn
+                      variant="text"
+                      size="small"
+                      color="error"
+                      @click="viewEventPhotos(event)"
+                    >
+                      View Photos
+                    </v-btn>
+                    <v-btn
+                      variant="text"
+                      size="small"
+                      @click="viewEventDetails(event)"
+                    >
+                      View Details
+                    </v-btn>
+                  </v-card-actions>
+                </v-card>
+              </v-timeline-item>
+            </v-timeline>
+
+            <!-- Empty State -->
+            <v-card v-if="pastEvents.length === 0" class="text-center pa-8" elevation="0">
+              <v-icon size="64" color="grey-lighten-1">mdi-history</v-icon>
+              <h3 class="text-h6 mt-4">No past events</h3>
+              <p class="text-body-2 text-medium-emphasis">Past events will appear here</p>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-window-item>
+    </v-window>
+
+    <!-- Event Details Dialog -->
+    <v-dialog v-model="detailsDialog" max-width="600">
+      <v-card v-if="selectedEvent">
+        <v-img
+          :src="selectedEvent.image"
+          height="200"
+          cover
+        />
+        <v-card-title>{{ selectedEvent.title }}</v-card-title>
+        <v-card-text>
+          <v-chip
+            :color="getCategoryColor(selectedEvent.category)"
+            size="small"
+            variant="tonal"
+            class="mb-3"
+          >
+            {{ selectedEvent.category }}
+          </v-chip>
+          
+          <p class="mb-4">{{ selectedEvent.fullDescription || selectedEvent.description }}</p>
+          
+          <v-list density="compact">
+            <v-list-item>
+              <template v-slot:prepend>
+                <v-icon>mdi-calendar</v-icon>
+              </template>
+              <v-list-item-title>{{ formatDate(selectedEvent.date) }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item>
+              <template v-slot:prepend>
+                <v-icon>mdi-clock-outline</v-icon>
+              </template>
+              <v-list-item-title>{{ selectedEvent.time }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item>
+              <template v-slot:prepend>
+                <v-icon>mdi-map-marker</v-icon>
+              </template>
+              <v-list-item-title>{{ selectedEvent.location }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item>
+              <template v-slot:prepend>
+                <v-icon>mdi-account-group</v-icon>
+              </template>
+              <v-list-item-title>{{ selectedEvent.attendees }} / {{ selectedEvent.capacity }} attendees</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="detailsDialog = false">Close</v-btn>
+          <v-btn
+            color="error"
+            variant="flat"
+            :disabled="selectedEvent.attendees >= selectedEvent.capacity"
+            @click="registerForEvent(selectedEvent)"
+          >
+            Register
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'member',
+  middleware: 'member'
+});
+
+// State
+const tab = ref('upcoming');
+const searchQuery = ref('');
+const selectedCategory = ref(null);
+const selectedMonth = ref(null);
+const detailsDialog = ref(false);
+const selectedEvent = ref(null);
+
+// Filter options
+const categories = ref([
+  'Networking',
+  'Workshop',
+  'Social',
+  'Cultural',
+  'Business',
+  'Charity'
+]);
+
+const months = ref([
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December'
+]);
+
+// Mock event data
+const upcomingEvents = ref([
+  {
+    id: 1,
+    title: 'Monaco Business Networking',
+    description: 'Connect with fellow Monaco entrepreneurs and business leaders',
+    fullDescription: 'Join us for an evening of networking with Monaco\'s business community. This event brings together entrepreneurs, executives, and professionals from various industries.',
+    category: 'Networking',
+    date: '2024-02-15',
+    time: '6:00 PM - 8:00 PM',
+    location: 'Monaco Yacht Club',
+    image: 'https://picsum.photos/400/300?random=1',
+    attendees: 45,
+    capacity: 100
+  },
+  {
+    id: 2,
+    title: 'Digital Marketing Workshop',
+    description: 'Learn the latest digital marketing strategies and techniques',
+    category: 'Workshop',
+    date: '2024-02-22',
+    time: '2:00 PM - 5:00 PM',
+    location: 'Conference Center',
+    image: 'https://picsum.photos/400/300?random=2',
+    attendees: 28,
+    capacity: 50
+  },
+  {
+    id: 3,
+    title: 'Annual Gala Dinner',
+    description: 'Celebrate the year with an elegant evening of dining and entertainment',
+    category: 'Social',
+    date: '2024-03-05',
+    time: '7:00 PM - 11:00 PM',
+    location: 'Hotel Hermitage',
+    image: 'https://picsum.photos/400/300?random=3',
+    attendees: 120,
+    capacity: 150
+  },
+  {
+    id: 4,
+    title: 'Monaco Grand Prix Viewing',
+    description: 'Watch the Monaco Grand Prix from our exclusive viewing area',
+    category: 'Social',
+    date: '2024-05-26',
+    time: '12:00 PM - 6:00 PM',
+    location: 'Private Terrace',
+    image: 'https://picsum.photos/400/300?random=4',
+    attendees: 75,
+    capacity: 75
+  }
+]);
+
+const registeredEvents = ref([
+  {
+    id: 1,
+    title: 'Monaco Business Networking',
+    date: '2024-02-15',
+    time: '6:00 PM',
+    location: 'Monaco Yacht Club',
+    image: 'https://picsum.photos/400/300?random=1'
+  },
+  {
+    id: 3,
+    title: 'Annual Gala Dinner',
+    date: '2024-03-05',
+    time: '7:00 PM',
+    location: 'Hotel Hermitage',
+    image: 'https://picsum.photos/400/300?random=3'
+  }
+]);
+
+const pastEvents = ref([
+  {
+    id: 5,
+    title: 'New Year Celebration',
+    description: 'Welcomed 2024 with a spectacular celebration',
+    date: '2024-01-01',
+    attendees: 200
+  },
+  {
+    id: 6,
+    title: 'Investment Seminar',
+    description: 'Expert insights on investment strategies for 2024',
+    date: '2024-01-15',
+    attendees: 65
+  }
+]);
+
+// Methods
+const formatDate = (dateString: string) => {
+  return new Date(dateString).toLocaleDateString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+};
+
+const getCategoryColor = (category: string) => {
+  const colors: Record<string, string> = {
+    'Networking': 'blue',
+    'Workshop': 'purple',
+    'Social': 'green',
+    'Cultural': 'orange',
+    'Business': 'indigo',
+    'Charity': 'pink'
+  };
+  return colors[category] || 'grey';
+};
+
+const resetFilters = () => {
+  searchQuery.value = '';
+  selectedCategory.value = null;
+  selectedMonth.value = null;
+};
+
+const viewEventDetails = (event: any) => {
+  selectedEvent.value = event;
+  detailsDialog.value = true;
+};
+
+const registerForEvent = (event: any) => {
+  console.log('Registering for event:', event.title);
+  // Add to registered events
+  if (!registeredEvents.value.find(e => e.id === event.id)) {
+    registeredEvents.value.push({
+      id: event.id,
+      title: event.title,
+      date: event.date,
+      time: event.time,
+      location: event.location,
+      image: event.image
+    });
+  }
+  detailsDialog.value = false;
+};
+
+const cancelRegistration = (event: any) => {
+  console.log('Canceling registration for:', event.title);
+  const index = registeredEvents.value.findIndex(e => e.id === event.id);
+  if (index > -1) {
+    registeredEvents.value.splice(index, 1);
+  }
+};
+
+const viewEventPhotos = (event: any) => {
+  console.log('Viewing photos for:', event.title);
+};
+</script>
+
+<style scoped>
+.gap-3 {
+  gap: 0.75rem;
+}
+</style>

pages/member/profile/index.vue

@@ -0,0 +1,640 @@
+<template>
+  <div class="member-dashboard">
+    <!-- Header -->
+    <div class="mb-6">
+      <h1 class="text-h4 font-weight-bold mb-2">My Profile</h1>
+      <p class="text-body-1 text-medium-emphasis">Manage your personal information and preferences</p>
+    </div>
+
+    <!-- Profile Completion Alert -->
+    <v-alert
+      v-if="profileCompletion < 100"
+      type="info"
+      variant="tonal"
+      class="mb-6"
+      closable
+    >
+      <v-alert-title>Complete Your Profile</v-alert-title>
+      Your profile is {{ profileCompletion }}% complete. Add more information to help other members connect with you.
+      <v-progress-linear
+        :model-value="profileCompletion"
+        color="info"
+        class="mt-2"
+        height="6"
+        rounded
+      />
+    </v-alert>
+
+    <v-row>
+      <!-- Left Column - Profile Card -->
+      <v-col cols="12" lg="4">
+        <v-card elevation="2" class="mb-6">
+          <v-card-text class="text-center pa-6">
+            <!-- Avatar -->
+            <div class="mb-4">
+              <ProfileAvatar
+                :member-id="profile.memberId"
+                :first-name="profile.firstName"
+                :last-name="profile.lastName"
+                size="x-large"
+                :show-badge="false"
+              />
+              <v-btn
+                color="error"
+                variant="text"
+                size="small"
+                class="mt-2"
+                @click="changeAvatar"
+              >
+                <v-icon start>mdi-camera</v-icon>
+                Change Photo
+              </v-btn>
+            </div>
+
+            <!-- Basic Info -->
+            <h2 class="text-h5 font-weight-bold mb-1">{{ profile.firstName }} {{ profile.lastName }}</h2>
+            <p class="text-body-2 text-medium-emphasis mb-3">{{ profile.title }}</p>
+            
+            <!-- Member Badge -->
+            <v-chip
+              color="error"
+              variant="tonal"
+              class="mb-4"
+            >
+              <v-icon start>mdi-shield-star</v-icon>
+              {{ profile.memberType }} Member
+            </v-chip>
+
+            <!-- Stats -->
+            <v-row class="mt-4">
+              <v-col cols="4">
+                <div class="text-h6 font-weight-bold">{{ profile.eventsAttended }}</div>
+                <div class="text-caption text-medium-emphasis">Events</div>
+              </v-col>
+              <v-col cols="4">
+                <div class="text-h6 font-weight-bold">{{ profile.connections }}</div>
+                <div class="text-caption text-medium-emphasis">Connections</div>
+              </v-col>
+              <v-col cols="4">
+                <div class="text-h6 font-weight-bold">{{ profile.yearJoined }}</div>
+                <div class="text-caption text-medium-emphasis">Joined</div>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-card>
+
+        <!-- Quick Actions -->
+        <v-card elevation="1">
+          <v-card-title class="text-body-1">Quick Actions</v-card-title>
+          <v-list density="compact">
+            <v-list-item @click="downloadMemberCard">
+              <template v-slot:prepend>
+                <v-icon color="error">mdi-card-account-details</v-icon>
+              </template>
+              <v-list-item-title>Download Member Card</v-list-item-title>
+            </v-list-item>
+            <v-list-item @click="exportData">
+              <template v-slot:prepend>
+                <v-icon color="error">mdi-download</v-icon>
+              </template>
+              <v-list-item-title>Export My Data</v-list-item-title>
+            </v-list-item>
+            <v-list-item @click="privacySettings">
+              <template v-slot:prepend>
+                <v-icon color="error">mdi-shield-lock</v-icon>
+              </template>
+              <v-list-item-title>Privacy Settings</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-card>
+      </v-col>
+
+      <!-- Right Column - Profile Details -->
+      <v-col cols="12" lg="8">
+        <!-- Tab Navigation -->
+        <v-tabs
+          v-model="activeTab"
+          color="error"
+          class="mb-6"
+        >
+          <v-tab value="personal">
+            <v-icon start>mdi-account</v-icon>
+            Personal Info
+          </v-tab>
+          <v-tab value="contact">
+            <v-icon start>mdi-phone</v-icon>
+            Contact
+          </v-tab>
+          <v-tab value="professional">
+            <v-icon start>mdi-briefcase</v-icon>
+            Professional
+          </v-tab>
+          <v-tab value="preferences">
+            <v-icon start>mdi-cog</v-icon>
+            Preferences
+          </v-tab>
+        </v-tabs>
+
+        <!-- Tab Content -->
+        <v-window v-model="activeTab">
+          <!-- Personal Info Tab -->
+          <v-window-item value="personal">
+            <v-card elevation="1">
+              <v-card-title>
+                Personal Information
+                <v-spacer />
+                <v-btn
+                  v-if="!editingPersonal"
+                  variant="text"
+                  color="error"
+                  @click="editingPersonal = true"
+                >
+                  <v-icon start>mdi-pencil</v-icon>
+                  Edit
+                </v-btn>
+              </v-card-title>
+              <v-card-text>
+                <v-form v-model="personalFormValid">
+                  <v-row>
+                    <v-col cols="12" md="6">
+                      <v-text-field
+                        v-model="profile.firstName"
+                        label="First Name"
+                        variant="outlined"
+                        :readonly="!editingPersonal"
+                        :rules="editingPersonal ? [v => !!v || 'Required'] : []"
+                      />
+                    </v-col>
+                    <v-col cols="12" md="6">
+                      <v-text-field
+                        v-model="profile.lastName"
+                        label="Last Name"
+                        variant="outlined"
+                        :readonly="!editingPersonal"
+                        :rules="editingPersonal ? [v => !!v || 'Required'] : []"
+                      />
+                    </v-col>
+                    <v-col cols="12" md="6">
+                      <v-text-field
+                        v-model="profile.dateOfBirth"
+                        label="Date of Birth"
+                        type="date"
+                        variant="outlined"
+                        :readonly="!editingPersonal"
+                      />
+                    </v-col>
+                    <v-col cols="12" md="6">
+                      <v-select
+                        v-model="profile.nationality"
+                        label="Nationality"
+                        :items="nationalities"
+                        variant="outlined"
+                        :readonly="!editingPersonal"
+                      />
+                    </v-col>
+                    <v-col cols="12">
+                      <v-textarea
+                        v-model="profile.bio"
+                        label="Bio"
+                        variant="outlined"
+                        rows="3"
+                        :readonly="!editingPersonal"
+                        placeholder="Tell us about yourself..."
+                      />
+                    </v-col>
+                  </v-row>
+                </v-form>
+              </v-card-text>
+              <v-card-actions v-if="editingPersonal">
+                <v-spacer />
+                <v-btn variant="text" @click="cancelEditPersonal">Cancel</v-btn>
+                <v-btn
+                  color="error"
+                  variant="flat"
+                  :disabled="!personalFormValid"
+                  @click="savePersonal"
+                >
+                  Save Changes
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-window-item>
+
+          <!-- Contact Tab -->
+          <v-window-item value="contact">
+            <v-card elevation="1">
+              <v-card-title>
+                Contact Information
+                <v-spacer />
+                <v-btn
+                  v-if="!editingContact"
+                  variant="text"
+                  color="error"
+                  @click="editingContact = true"
+                >
+                  <v-icon start>mdi-pencil</v-icon>
+                  Edit
+                </v-btn>
+              </v-card-title>
+              <v-card-text>
+                <v-form v-model="contactFormValid">
+                  <v-row>
+                    <v-col cols="12" md="6">
+                      <v-text-field
+                        v-model="profile.email"
+                        label="Email"
+                        type="email"
+                        variant="outlined"
+                        :readonly="!editingContact"
+                        :rules="editingContact ? [v => !!v || 'Required', v => /.+@.+/.test(v) || 'Invalid email'] : []"
+                      />
+                    </v-col>
+                    <v-col cols="12" md="6">
+                      <v-text-field
+                        v-model="profile.phone"
+                        label="Phone"
+                        variant="outlined"
+                        :readonly="!editingContact"
+                      />
+                    </v-col>
+                    <v-col cols="12">
+                      <v-text-field
+                        v-model="profile.address"
+                        label="Address"
+                        variant="outlined"
+                        :readonly="!editingContact"
+                      />
+                    </v-col>
+                    <v-col cols="12" md="6">
+                      <v-text-field
+                        v-model="profile.city"
+                        label="City"
+                        variant="outlined"
+                        :readonly="!editingContact"
+                      />
+                    </v-col>
+                    <v-col cols="12" md="3">
+                      <v-text-field
+                        v-model="profile.state"
+                        label="State"
+                        variant="outlined"
+                        :readonly="!editingContact"
+                      />
+                    </v-col>
+                    <v-col cols="12" md="3">
+                      <v-text-field
+                        v-model="profile.zipCode"
+                        label="ZIP Code"
+                        variant="outlined"
+                        :readonly="!editingContact"
+                      />
+                    </v-col>
+                  </v-row>
+                </v-form>
+              </v-card-text>
+              <v-card-actions v-if="editingContact">
+                <v-spacer />
+                <v-btn variant="text" @click="cancelEditContact">Cancel</v-btn>
+                <v-btn
+                  color="error"
+                  variant="flat"
+                  :disabled="!contactFormValid"
+                  @click="saveContact"
+                >
+                  Save Changes
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-window-item>
+
+          <!-- Professional Tab -->
+          <v-window-item value="professional">
+            <v-card elevation="1">
+              <v-card-title>
+                Professional Information
+                <v-spacer />
+                <v-btn
+                  v-if="!editingProfessional"
+                  variant="text"
+                  color="error"
+                  @click="editingProfessional = true"
+                >
+                  <v-icon start>mdi-pencil</v-icon>
+                  Edit
+                </v-btn>
+              </v-card-title>
+              <v-card-text>
+                <v-form v-model="professionalFormValid">
+                  <v-row>
+                    <v-col cols="12" md="6">
+                      <v-text-field
+                        v-model="profile.company"
+                        label="Company"
+                        variant="outlined"
+                        :readonly="!editingProfessional"
+                      />
+                    </v-col>
+                    <v-col cols="12" md="6">
+                      <v-text-field
+                        v-model="profile.title"
+                        label="Job Title"
+                        variant="outlined"
+                        :readonly="!editingProfessional"
+                      />
+                    </v-col>
+                    <v-col cols="12" md="6">
+                      <v-select
+                        v-model="profile.industry"
+                        label="Industry"
+                        :items="industries"
+                        variant="outlined"
+                        :readonly="!editingProfessional"
+                      />
+                    </v-col>
+                    <v-col cols="12" md="6">
+                      <v-text-field
+                        v-model="profile.linkedin"
+                        label="LinkedIn Profile"
+                        variant="outlined"
+                        :readonly="!editingProfessional"
+                        placeholder="https://linkedin.com/in/..."
+                      />
+                    </v-col>
+                    <v-col cols="12">
+                      <v-textarea
+                        v-model="profile.expertise"
+                        label="Areas of Expertise"
+                        variant="outlined"
+                        rows="2"
+                        :readonly="!editingProfessional"
+                        placeholder="e.g., Finance, Marketing, Technology..."
+                      />
+                    </v-col>
+                  </v-row>
+                </v-form>
+              </v-card-text>
+              <v-card-actions v-if="editingProfessional">
+                <v-spacer />
+                <v-btn variant="text" @click="cancelEditProfessional">Cancel</v-btn>
+                <v-btn
+                  color="error"
+                  variant="flat"
+                  :disabled="!professionalFormValid"
+                  @click="saveProfessional"
+                >
+                  Save Changes
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-window-item>
+
+          <!-- Preferences Tab -->
+          <v-window-item value="preferences">
+            <v-card elevation="1" class="mb-4">
+              <v-card-title>Communication Preferences</v-card-title>
+              <v-card-text>
+                <v-switch
+                  v-model="preferences.emailNotifications"
+                  label="Email Notifications"
+                  color="error"
+                  hide-details
+                  class="mb-3"
+                />
+                <v-switch
+                  v-model="preferences.eventReminders"
+                  label="Event Reminders"
+                  color="error"
+                  hide-details
+                  class="mb-3"
+                />
+                <v-switch
+                  v-model="preferences.newsletter"
+                  label="Monthly Newsletter"
+                  color="error"
+                  hide-details
+                  class="mb-3"
+                />
+                <v-switch
+                  v-model="preferences.memberUpdates"
+                  label="Member Updates"
+                  color="error"
+                  hide-details
+                />
+              </v-card-text>
+            </v-card>
+
+            <v-card elevation="1">
+              <v-card-title>Privacy Settings</v-card-title>
+              <v-card-text>
+                <v-switch
+                  v-model="preferences.profileVisible"
+                  label="Profile visible to other members"
+                  color="error"
+                  hide-details
+                  class="mb-3"
+                />
+                <v-switch
+                  v-model="preferences.showEmail"
+                  label="Show email in member directory"
+                  color="error"
+                  hide-details
+                  class="mb-3"
+                />
+                <v-switch
+                  v-model="preferences.showPhone"
+                  label="Show phone in member directory"
+                  color="error"
+                  hide-details
+                />
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer />
+                <v-btn
+                  color="error"
+                  variant="flat"
+                  @click="savePreferences"
+                >
+                  Save Preferences
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-window-item>
+        </v-window>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Member } from '~/utils/types';
+
+definePageMeta({
+  layout: 'member',
+  middleware: 'member'
+});
+
+const { user } = useAuth();
+
+// State
+const activeTab = ref('personal');
+const editingPersonal = ref(false);
+const editingContact = ref(false);
+const editingProfessional = ref(false);
+const personalFormValid = ref(true);
+const contactFormValid = ref(true);
+const professionalFormValid = ref(true);
+
+// Profile data
+const profile = ref({
+  memberId: 'MUSA-0001',
+  firstName: 'John',
+  lastName: 'Doe',
+  email: 'john.doe@example.com',
+  phone: '+1 234 567 8900',
+  dateOfBirth: '1985-06-15',
+  nationality: 'United States',
+  bio: 'Passionate about business and innovation. Active member of the Monaco business community.',
+  address: '123 Main Street',
+  city: 'Monaco',
+  state: 'MC',
+  zipCode: '98000',
+  company: 'Tech Innovations Inc.',
+  title: 'CEO & Founder',
+  industry: 'Technology',
+  linkedin: 'https://linkedin.com/in/johndoe',
+  expertise: 'Technology, Innovation, Business Strategy',
+  memberType: 'Premium',
+  eventsAttended: 24,
+  connections: 156,
+  yearJoined: '2021'
+});
+
+// Preferences
+const preferences = ref({
+  emailNotifications: true,
+  eventReminders: true,
+  newsletter: true,
+  memberUpdates: false,
+  profileVisible: true,
+  showEmail: false,
+  showPhone: false
+});
+
+// Options
+const nationalities = ref([
+  'United States',
+  'Monaco',
+  'France',
+  'Italy',
+  'United Kingdom',
+  'Germany',
+  'Spain',
+  'Other'
+]);
+
+const industries = ref([
+  'Technology',
+  'Finance',
+  'Healthcare',
+  'Real Estate',
+  'Hospitality',
+  'Manufacturing',
+  'Retail',
+  'Education',
+  'Other'
+]);
+
+// Computed
+const profileCompletion = computed(() => {
+  let completed = 0;
+  const fields = [
+    profile.value.firstName,
+    profile.value.lastName,
+    profile.value.email,
+    profile.value.phone,
+    profile.value.dateOfBirth,
+    profile.value.nationality,
+    profile.value.bio,
+    profile.value.address,
+    profile.value.company,
+    profile.value.title
+  ];
+  
+  fields.forEach(field => {
+    if (field) completed += 10;
+  });
+  
+  return completed;
+});
+
+// Methods
+const changeAvatar = () => {
+  console.log('Change avatar');
+};
+
+const downloadMemberCard = () => {
+  console.log('Download member card');
+};
+
+const exportData = () => {
+  console.log('Export user data');
+};
+
+const privacySettings = () => {
+  activeTab.value = 'preferences';
+};
+
+const cancelEditPersonal = () => {
+  editingPersonal.value = false;
+  // Reset form if needed
+};
+
+const savePersonal = () => {
+  console.log('Saving personal info');
+  editingPersonal.value = false;
+};
+
+const cancelEditContact = () => {
+  editingContact.value = false;
+};
+
+const saveContact = () => {
+  console.log('Saving contact info');
+  editingContact.value = false;
+};
+
+const cancelEditProfessional = () => {
+  editingProfessional.value = false;
+};
+
+const saveProfessional = () => {
+  console.log('Saving professional info');
+  editingProfessional.value = false;
+};
+
+const savePreferences = () => {
+  console.log('Saving preferences', preferences.value);
+};
+
+// Load real member data on mount
+onMounted(async () => {
+  try {
+    const { data: sessionData } = await $fetch<{ success: boolean; member: Member | null }>('/api/auth/session');
+    if (sessionData?.member) {
+      // Map real data to profile
+      profile.value.firstName = sessionData.member.first_name || profile.value.firstName;
+      profile.value.lastName = sessionData.member.last_name || profile.value.lastName;
+      profile.value.email = sessionData.member.email || profile.value.email;
+      profile.value.phone = sessionData.member.phone || profile.value.phone;
+      profile.value.nationality = sessionData.member.nationality || profile.value.nationality;
+      profile.value.memberId = sessionData.member.member_id || profile.value.memberId;
+    }
+  } catch (error) {
+    console.error('Error loading member data:', error);
+  }
+});
+</script>
+
+<style scoped>
+/* Custom styles if needed */
+</style>

pages/member/resources/index.vue

@@ -0,0 +1,506 @@
+<template>
+  <div class="member-dashboard">
+    <!-- Header -->
+    <div class="mb-6">
+      <h1 class="text-h4 font-weight-bold mb-2">Resources</h1>
+      <p class="text-body-1 text-medium-emphasis">Access documents, guides, and helpful resources</p>
+    </div>
+
+    <!-- Search Bar -->
+    <v-card class="mb-6" elevation="1">
+      <v-card-text>
+        <v-text-field
+          v-model="searchQuery"
+          prepend-inner-icon="mdi-magnify"
+          label="Search resources"
+          variant="outlined"
+          density="compact"
+          clearable
+          hide-details
+        />
+      </v-card-text>
+    </v-card>
+
+    <!-- Resource Categories -->
+    <v-row class="mb-6">
+      <v-col
+        v-for="category in categories"
+        :key="category.id"
+        cols="6"
+        sm="4"
+        md="3"
+      >
+        <v-card
+          :color="selectedCategory === category.id ? 'error' : undefined"
+          :variant="selectedCategory === category.id ? 'tonal' : 'outlined'"
+          class="text-center pa-4 cursor-pointer"
+          hover
+          @click="selectedCategory = selectedCategory === category.id ? null : category.id"
+        >
+          <v-icon
+            size="32"
+            :color="selectedCategory === category.id ? 'error' : 'grey'"
+            class="mb-2"
+          >
+            {{ category.icon }}
+          </v-icon>
+          <div class="text-body-2 font-weight-medium">{{ category.name }}</div>
+          <div class="text-caption text-medium-emphasis">{{ category.count }} items</div>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Resources Grid -->
+    <v-row>
+      <!-- Documents Section -->
+      <v-col cols="12">
+        <h3 class="text-h6 mb-3">
+          <v-icon start color="error">mdi-file-document</v-icon>
+          Documents
+        </h3>
+      </v-col>
+      <v-col
+        v-for="doc in filteredDocuments"
+        :key="doc.id"
+        cols="12"
+        md="6"
+        lg="4"
+      >
+        <v-card elevation="1" hover>
+          <v-card-text>
+            <div class="d-flex align-center mb-2">
+              <v-icon :color="getFileIconColor(doc.type)" class="mr-3">
+                {{ getFileIcon(doc.type) }}
+              </v-icon>
+              <div class="flex-grow-1">
+                <div class="font-weight-medium">{{ doc.title }}</div>
+                <div class="text-caption text-medium-emphasis">{{ doc.size }} • {{ doc.date }}</div>
+              </div>
+            </div>
+            <p class="text-body-2 text-medium-emphasis mb-3">{{ doc.description }}</p>
+            <v-chip
+              size="x-small"
+              variant="tonal"
+              color="grey"
+              class="mr-1"
+            >
+              {{ doc.category }}
+            </v-chip>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer />
+            <v-btn
+              variant="text"
+              color="error"
+              size="small"
+              @click="viewDocument(doc)"
+            >
+              <v-icon start>mdi-eye</v-icon>
+              View
+            </v-btn>
+            <v-btn
+              variant="text"
+              size="small"
+              @click="downloadDocument(doc)"
+            >
+              <v-icon start>mdi-download</v-icon>
+              Download
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Guides Section -->
+    <v-row class="mt-6">
+      <v-col cols="12">
+        <h3 class="text-h6 mb-3">
+          <v-icon start color="error">mdi-book-open-variant</v-icon>
+          Guides & Tutorials
+        </h3>
+      </v-col>
+      <v-col cols="12">
+        <v-expansion-panels variant="accordion">
+          <v-expansion-panel
+            v-for="guide in guides"
+            :key="guide.id"
+          >
+            <v-expansion-panel-title>
+              <div class="d-flex align-center">
+                <v-icon class="mr-3" :color="guide.color">{{ guide.icon }}</v-icon>
+                <div>
+                  <div class="font-weight-medium">{{ guide.title }}</div>
+                  <div class="text-caption text-medium-emphasis">{{ guide.duration }} • {{ guide.level }}</div>
+                </div>
+              </div>
+            </v-expansion-panel-title>
+            <v-expansion-panel-text>
+              <p class="mb-3">{{ guide.description }}</p>
+              <v-list density="compact">
+                <v-list-item
+                  v-for="(step, index) in guide.steps"
+                  :key="index"
+                >
+                  <template v-slot:prepend>
+                    <v-avatar size="24" color="error" variant="tonal">
+                      {{ index + 1 }}
+                    </v-avatar>
+                  </template>
+                  <v-list-item-title>{{ step }}</v-list-item-title>
+                </v-list-item>
+              </v-list>
+              <v-btn
+                color="error"
+                variant="flat"
+                class="mt-3"
+                @click="startGuide(guide)"
+              >
+                Start Guide
+              </v-btn>
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </v-col>
+    </v-row>
+
+    <!-- Quick Links Section -->
+    <v-row class="mt-6">
+      <v-col cols="12">
+        <h3 class="text-h6 mb-3">
+          <v-icon start color="error">mdi-link-variant</v-icon>
+          Quick Links
+        </h3>
+      </v-col>
+      <v-col cols="12">
+        <v-list lines="two">
+          <v-list-item
+            v-for="link in quickLinks"
+            :key="link.id"
+            :href="link.url"
+            target="_blank"
+            class="mb-2"
+          >
+            <template v-slot:prepend>
+              <v-avatar color="error" variant="tonal">
+                <v-icon>{{ link.icon }}</v-icon>
+              </v-avatar>
+            </template>
+            <v-list-item-title>{{ link.title }}</v-list-item-title>
+            <v-list-item-subtitle>{{ link.description }}</v-list-item-subtitle>
+            <template v-slot:append>
+              <v-icon>mdi-open-in-new</v-icon>
+            </template>
+          </v-list-item>
+        </v-list>
+      </v-col>
+    </v-row>
+
+    <!-- FAQs Section -->
+    <v-row class="mt-6">
+      <v-col cols="12">
+        <h3 class="text-h6 mb-3">
+          <v-icon start color="error">mdi-help-circle</v-icon>
+          Frequently Asked Questions
+        </h3>
+      </v-col>
+      <v-col cols="12">
+        <v-card elevation="1">
+          <v-list>
+            <template v-for="(faq, index) in faqs" :key="faq.id">
+              <v-list-item @click="faq.expanded = !faq.expanded">
+                <v-list-item-title class="font-weight-medium">
+                  {{ faq.question }}
+                </v-list-item-title>
+                <template v-slot:append>
+                  <v-icon>
+                    {{ faq.expanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
+                  </v-icon>
+                </template>
+              </v-list-item>
+              <v-expand-transition>
+                <div v-show="faq.expanded">
+                  <v-list-item>
+                    <v-list-item-subtitle class="text-wrap">
+                      {{ faq.answer }}
+                    </v-list-item-subtitle>
+                  </v-list-item>
+                </div>
+              </v-expand-transition>
+              <v-divider v-if="index < faqs.length - 1" />
+            </template>
+          </v-list>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'member',
+  middleware: 'member'
+});
+
+// State
+const searchQuery = ref('');
+const selectedCategory = ref<string | null>(null);
+
+// Categories
+const categories = ref([
+  { id: 'membership', name: 'Membership', icon: 'mdi-card-account-details', count: 5 },
+  { id: 'events', name: 'Events', icon: 'mdi-calendar', count: 8 },
+  { id: 'finance', name: 'Finance', icon: 'mdi-currency-usd', count: 4 },
+  { id: 'governance', name: 'Governance', icon: 'mdi-gavel', count: 6 },
+  { id: 'guides', name: 'Guides', icon: 'mdi-book-open', count: 10 },
+  { id: 'forms', name: 'Forms', icon: 'mdi-file-document-edit', count: 7 },
+  { id: 'policies', name: 'Policies', icon: 'mdi-shield-check', count: 5 },
+  { id: 'other', name: 'Other', icon: 'mdi-folder', count: 3 }
+]);
+
+// Documents
+const documents = ref([
+  {
+    id: 1,
+    title: 'Member Handbook 2024',
+    description: 'Complete guide to membership benefits and responsibilities',
+    category: 'membership',
+    type: 'pdf',
+    size: '2.4 MB',
+    date: 'Jan 2024'
+  },
+  {
+    id: 2,
+    title: 'Annual Report 2023',
+    description: 'Financial statements and organizational achievements',
+    category: 'finance',
+    type: 'pdf',
+    size: '5.1 MB',
+    date: 'Mar 2024'
+  },
+  {
+    id: 3,
+    title: 'Event Planning Guide',
+    description: 'How to organize and host MonacoUSA events',
+    category: 'events',
+    type: 'docx',
+    size: '1.2 MB',
+    date: 'Feb 2024'
+  },
+  {
+    id: 4,
+    title: 'Bylaws and Constitution',
+    description: 'Official governing documents of MonacoUSA',
+    category: 'governance',
+    type: 'pdf',
+    size: '890 KB',
+    date: 'Jan 2023'
+  },
+  {
+    id: 5,
+    title: 'Membership Application Form',
+    description: 'Form for new member applications',
+    category: 'forms',
+    type: 'pdf',
+    size: '245 KB',
+    date: 'Jan 2024'
+  },
+  {
+    id: 6,
+    title: 'Privacy Policy',
+    description: 'How we handle and protect your personal information',
+    category: 'policies',
+    type: 'pdf',
+    size: '180 KB',
+    date: 'Dec 2023'
+  }
+]);
+
+// Guides
+const guides = ref([
+  {
+    id: 1,
+    title: 'Getting Started with MonacoUSA',
+    description: 'A comprehensive guide for new members to navigate the portal and make the most of their membership',
+    duration: '10 min',
+    level: 'Beginner',
+    icon: 'mdi-rocket-launch',
+    color: 'green',
+    expanded: false,
+    steps: [
+      'Complete your profile information',
+      'Explore upcoming events',
+      'Connect with other members',
+      'Access member resources',
+      'Set up payment methods'
+    ]
+  },
+  {
+    id: 2,
+    title: 'How to Register for Events',
+    description: 'Step-by-step instructions for browsing and registering for MonacoUSA events',
+    duration: '5 min',
+    level: 'Beginner',
+    icon: 'mdi-calendar-plus',
+    color: 'blue',
+    expanded: false,
+    steps: [
+      'Navigate to the Events page',
+      'Browse available events',
+      'Click on an event for details',
+      'Click the Register button',
+      'Confirm your registration'
+    ]
+  },
+  {
+    id: 3,
+    title: 'Managing Your Dues and Payments',
+    description: 'Learn how to view payment history, update payment methods, and manage your dues',
+    duration: '7 min',
+    level: 'Intermediate',
+    icon: 'mdi-credit-card',
+    color: 'purple',
+    expanded: false,
+    steps: [
+      'Access your payment dashboard',
+      'Review payment history',
+      'Update payment method',
+      'Set up automatic payments',
+      'Download payment receipts'
+    ]
+  }
+]);
+
+// Quick Links
+const quickLinks = ref([
+  {
+    id: 1,
+    title: 'Monaco Government Portal',
+    description: 'Official Monaco government website',
+    url: 'https://www.gouv.mc',
+    icon: 'mdi-bank'
+  },
+  {
+    id: 2,
+    title: 'US Embassy in France',
+    description: 'Consular services for US citizens',
+    url: 'https://fr.usembassy.gov',
+    icon: 'mdi-flag'
+  },
+  {
+    id: 3,
+    title: 'Monaco Economic Board',
+    description: 'Business and investment opportunities',
+    url: 'https://www.monacoeconomicboard.mc',
+    icon: 'mdi-briefcase'
+  },
+  {
+    id: 4,
+    title: 'Visit Monaco',
+    description: 'Tourism and cultural information',
+    url: 'https://www.visitmonaco.com',
+    icon: 'mdi-map'
+  }
+]);
+
+// FAQs
+const faqs = ref([
+  {
+    id: 1,
+    question: 'How do I update my contact information?',
+    answer: 'You can update your contact information by going to your Profile page and clicking the Edit button in the Contact Information section. Make your changes and click Save to update your information.',
+    expanded: false
+  },
+  {
+    id: 2,
+    question: 'When are membership dues payable?',
+    answer: 'Annual membership dues are payable at the beginning of each calendar year. You will receive a reminder email in December with payment instructions. You can pay online through the portal or by bank transfer.',
+    expanded: false
+  },
+  {
+    id: 3,
+    question: 'How do I cancel my event registration?',
+    answer: 'To cancel an event registration, go to the Events page, click on "My Registrations" tab, find the event you want to cancel, and click the Cancel button. Please note that cancellation policies may vary by event.',
+    expanded: false
+  },
+  {
+    id: 4,
+    question: 'Who can I contact for technical support?',
+    answer: 'For technical support, please email support@monacousa.org or use the Contact Support button in your dashboard. Our support team typically responds within 24-48 hours.',
+    expanded: false
+  },
+  {
+    id: 5,
+    question: 'How do I access member-only content?',
+    answer: 'Member-only content is automatically available once you log in to the portal. If you\'re having trouble accessing content, please ensure your membership is active and your dues are current.',
+    expanded: false
+  }
+]);
+
+// Computed
+const filteredDocuments = computed(() => {
+  let filtered = documents.value;
+  
+  if (selectedCategory.value) {
+    filtered = filtered.filter(doc => doc.category === selectedCategory.value);
+  }
+  
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase();
+    filtered = filtered.filter(doc =>
+      doc.title.toLowerCase().includes(query) ||
+      doc.description.toLowerCase().includes(query) ||
+      doc.category.toLowerCase().includes(query)
+    );
+  }
+  
+  return filtered;
+});
+
+// Methods
+const getFileIcon = (type: string) => {
+  const icons: Record<string, string> = {
+    pdf: 'mdi-file-pdf-box',
+    docx: 'mdi-file-word',
+    xlsx: 'mdi-file-excel',
+    pptx: 'mdi-file-powerpoint',
+    default: 'mdi-file-document'
+  };
+  return icons[type] || icons.default;
+};
+
+const getFileIconColor = (type: string) => {
+  const colors: Record<string, string> = {
+    pdf: 'red',
+    docx: 'blue',
+    xlsx: 'green',
+    pptx: 'orange',
+    default: 'grey'
+  };
+  return colors[type] || colors.default;
+};
+
+const viewDocument = (doc: any) => {
+  console.log('Viewing document:', doc.title);
+  // Open document in new tab or modal
+};
+
+const downloadDocument = (doc: any) => {
+  console.log('Downloading document:', doc.title);
+  // Trigger download
+};
+
+const startGuide = (guide: any) => {
+  console.log('Starting guide:', guide.title);
+  // Navigate to guide or open tutorial
+};
+</script>
+
+<style scoped>
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.text-wrap {
+  white-space: pre-wrap;
+}
+</style>