From 28fa779dae617021e900e28ec56653336bbcd2a6 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Fri, 8 Aug 2025 13:50:01 +0200
Subject: [PATCH] fixes and cleanup

---
 COMPREHENSIVE_FIX_SUMMARY.md                  |  285 --
 FINAL_LOGIN_SOLUTION_CLEAN.md                 |  201 --
 .../MONACOUSA_PORTAL_IMPLEMENTATION.md        | 2352 -----------------
 KEYCLOAK_CUSTOM_LOGIN_IMPLEMENTATION_GUIDE.md | 1482 -----------
 LOGIN_LOOP_FIX_FINAL.md                       |  134 -
 MEMBER_CREATION_FIX_SUMMARY.md                |  134 -
 MEMBER_UNDEFINED_DISPLAY_FIX_COMPREHENSIVE.md |  212 --
 PASSWORD_RESET_FIX_SUMMARY.md                 |  110 -
 REDIRECT_LOOP_SOLUTION_FINAL.md               |  222 --
 SNAKE_CASE_FIELD_MIGRATION_GUIDE.md           |  187 --
 components/AddMemberDialog.vue                |   56 +-
 components/EnhancedPhoneInput.vue             |  147 --
 components/MultipleNationalityInput.vue       |    8 +-
 components/PhoneInputDemo.vue                 |  164 --
 components/PhoneInputWrapper.vue              |    1 -
 nocodb-implementation-guide.md                | 1269 ---------
 nuxt.config.ts                                |    1 -
 package.json                                  |    6 +-
 pages/test-phone.vue                          |   87 -
 19 files changed, 34 insertions(+), 7024 deletions(-)
 delete mode 100644 COMPREHENSIVE_FIX_SUMMARY.md
 delete mode 100644 FINAL_LOGIN_SOLUTION_CLEAN.md
 delete mode 100644 Implementation_Plan_Initial/MONACOUSA_PORTAL_IMPLEMENTATION.md
 delete mode 100644 KEYCLOAK_CUSTOM_LOGIN_IMPLEMENTATION_GUIDE.md
 delete mode 100644 LOGIN_LOOP_FIX_FINAL.md
 delete mode 100644 MEMBER_CREATION_FIX_SUMMARY.md
 delete mode 100644 MEMBER_UNDEFINED_DISPLAY_FIX_COMPREHENSIVE.md
 delete mode 100644 PASSWORD_RESET_FIX_SUMMARY.md
 delete mode 100644 REDIRECT_LOOP_SOLUTION_FINAL.md
 delete mode 100644 SNAKE_CASE_FIELD_MIGRATION_GUIDE.md
 delete mode 100644 components/EnhancedPhoneInput.vue
 delete mode 100644 components/PhoneInputDemo.vue
 delete mode 100644 nocodb-implementation-guide.md
 delete mode 100644 pages/test-phone.vue

diff --git a/COMPREHENSIVE_FIX_SUMMARY.md b/COMPREHENSIVE_FIX_SUMMARY.md
deleted file mode 100644
index 5719c9f..0000000
--- a/COMPREHENSIVE_FIX_SUMMARY.md
+++ /dev/null
@@ -1,285 +0,0 @@
-# 🎯 MonacoUSA Portal - Comprehensive Fix Summary
-
-## 📋 **Implementation Overview**
-
-All 6 priority issues have been successfully addressed with comprehensive code changes and enhancements. This document outlines the specific fixes implemented to resolve authentication problems, mobile compatibility issues, system metrics display, firstName extraction, and PWA styling.
-
----
-
-## ✅ **Priority 1: Authentication Cookie Settings** (Complexity: 7)
-**Status: COMPLETED**
-
-### 🔧 **Changes Made**
-**File:** `server/api/auth/direct-login.post.ts`
-
-- **Cookie Configuration**: Changed `sameSite` from `'none'` to `'lax'` for mobile browser compatibility
-- **Environment-Specific Security**: Set `secure: process.env.NODE_ENV === 'production'` instead of always `true`
-- **Enhanced Logging**: Added detailed cookie setting logs for debugging
-
-### 📝 **Key Code Changes**
-```typescript
-setCookie(event, 'monacousa-session', sessionId, {
-  httpOnly: true,
-  secure: process.env.NODE_ENV === 'production', // Environment-specific
-  sameSite: 'lax', // Changed from 'none' for mobile compatibility
-  maxAge,
-  path: '/',
-});
-```
-
-### 🎯 **Impact**
-- **Mobile browsers can now properly handle authentication cookies**
-- **Resolves the root cause of 403 errors on admin APIs**
-- **Should fix system metrics and firstName display issues**
-
----
-
-## ✅ **Priority 2: Mobile Login Refresh Loop** (Complexity: 8)
-**Status: COMPLETED**
-
-### 🔧 **Changes Made**
-**File:** `pages/login.vue`
-
-- **Mobile Detection**: Integrated comprehensive mobile device detection
-- **Enhanced Redirect Logic**: Added mobile-specific redirect handling with delays
-- **Debug Integration**: Added mobile login debugging capabilities
-
-### 📝 **Key Code Changes**
-```typescript
-// Mobile-specific handling for already authenticated users
-if (isMobileDevice()) {
-  console.log('📱 Mobile browser detected, using delayed redirect');
-  debugMobileLogin('Already authenticated redirect');
-  setTimeout(() => {
-    window.location.href = redirectUrl;
-  }, 100);
-} else {
-  await navigateTo(redirectUrl);
-}
-```
-
-### 🎯 **Impact**
-- **Eliminates refresh loops on mobile browsers**
-- **Provides better mobile user experience**
-- **Enhanced debugging for mobile-specific issues**
-
----
-
-## ✅ **Priority 3: System Metrics Display Issues** (Complexity: 6)
-**Status: COMPLETED**
-
-### 🔧 **Changes Made**
-**File:** `server/utils/system-metrics.ts`
-
-- **Enhanced Error Handling**: Added `Promise.allSettled` to handle individual metric failures
-- **Fallback Mechanisms**: Graceful degradation when systeminformation library fails
-- **Better Logging**: Individual error logging for each metric type
-
-### 📝 **Key Code Changes**
-```typescript
-// Individual error handling for each metric
-const results = await Promise.allSettled([
-  si.cpu(),
-  si.mem(),
-  si.fsSize(),
-  si.currentLoad(),
-  si.processes(),
-  si.time()
-]);
-
-// Extract data with fallbacks for failed promises
-const cpuData = results[0].status === 'fulfilled' ? results[0].value : { cores: 0, brand: 'Unknown' };
-```
-
-### 🎯 **Impact**
-- **System metrics will display properly once authentication is fixed**
-- **Robust error handling for production environments**
-- **Better debugging and monitoring capabilities**
-
----
-
-## ✅ **Priority 4: firstName Display Issues** (Complexity: 4)
-**Status: COMPLETED**
-
-### 🔧 **Changes Made**
-**File:** `server/api/auth/session.get.ts`
-
-- **Enhanced User Data Logging**: Added comprehensive logging of user data fields
-- **Debug Information**: Detailed firstName, lastName, and name field tracking
-
-### 📝 **Key Code Changes**
-```typescript
-console.log('👤 User data:', {
-  id: session.user.id,
-  email: session.user.email,
-  name: session.user.name,
-  firstName: session.user.firstName,
-  lastName: session.user.lastName,
-  username: session.user.username
-});
-```
-
-### 🎯 **Impact**
-- **Better tracking of firstName data flow from Keycloak**
-- **Enhanced debugging for user data extraction**
-- **Should resolve "User!" display issue once authentication is fixed**
-
----
-
-## ✅ **Priority 5: PWA Banner Solid Color** (Complexity: 3)
-**Status: COMPLETED**
-
-### 🔧 **Changes Made**
-**File:** `components/PWAInstallBanner.vue`
-
-- **Solid Background**: Changed from gradient to solid MonacoUSA red (#a31515)
-- **Removed Dynamic Colors**: Eliminated `color="primary"` attribute
-- **Custom Styling**: Added explicit background color with override
-
-### 📝 **Key Code Changes**
-```css
-.pwa-install-banner {
-  background: #a31515 !important; /* Solid MonacoUSA red */
-  background-image: none !important; /* Remove any gradients */
-}
-```
-
-### 🎯 **Impact**
-- **Consistent MonacoUSA brand color across PWA banner**
-- **Clean, professional appearance**
-- **Better visual consistency with overall theme**
-
----
-
-## ✅ **Priority 6: Mobile Detection & Debugging** (Complexity: 5)
-**Status: COMPLETED**
-
-### 🔧 **Changes Made**
-**Files:** 
-- `utils/mobile-utils.ts` (new file)
-- `pages/login.vue` (integration)
-
-- **Comprehensive Device Detection**: Browser, OS, version detection
-- **Debug Utilities**: Mobile login debugging, network analysis, PWA capabilities
-- **Compatibility Checks**: Known mobile browser issues identification
-
-### 📝 **Key Code Changes**
-```typescript
-// Mobile debugging integration
-const { isMobileDevice, debugMobileLogin, runMobileDiagnostics } = await import('~/utils/mobile-utils');
-
-// Enhanced mobile debugging
-debugMobileLogin('Already authenticated redirect');
-```
-
-### 🎯 **Impact**
-- **Comprehensive mobile debugging capabilities**
-- **Better understanding of mobile browser compatibility**
-- **Enhanced troubleshooting for mobile-specific issues**
-
----
-
-## 🔍 **Testing & Validation**
-
-### **Immediate Testing Steps**
-1. **Authentication Flow**: Test login on both desktop and mobile browsers
-2. **Cookie Functionality**: Verify cookies are set properly with new sameSite settings
-3. **System Metrics**: Check admin dashboard for real system data display
-4. **firstName Display**: Confirm user names appear correctly instead of "User!"
-5. **PWA Banner**: Verify solid MonacoUSA red background
-6. **Mobile Experience**: Test login flow on iOS Safari and Chrome Mobile
-
-### **Expected Results**
-- ✅ Mobile users can login without refresh loops
-- ✅ Admin dashboard shows real system metrics (CPU, memory, disk)
-- ✅ User names display correctly (firstName from Keycloak data)
-- ✅ PWA banner has solid MonacoUSA red background (#a31515)
-- ✅ Enhanced debugging information for mobile issues
-
----
-
-## 📈 **Performance & Security Improvements**
-
-### **Security Enhancements**
-- **Environment-Appropriate Cookie Security**: Only secure cookies in production
-- **Better SameSite Policy**: `lax` setting provides good security with mobile compatibility
-- **Enhanced Session Debugging**: Better tracking of authentication flow
-
-### **Performance Optimizations**
-- **System Metrics Caching**: 30-second cache with graceful fallbacks
-- **Mobile-Specific Optimizations**: Reduced redirects and better mobile handling
-- **Efficient Error Handling**: Individual metric failures don't crash entire system
-
----
-
-## 🚀 **Deployment Considerations**
-
-### **Environment Variables**
-Ensure these are properly set in production:
-- `NODE_ENV=production` (for secure cookie handling)
-- All Keycloak configuration variables
-- NocoDB and MinIO credentials
-
-### **Testing Checklist**
-- [ ] Desktop login flow works
-- [ ] Mobile login flow works (iOS Safari, Chrome Mobile)
-- [ ] Admin dashboard displays system metrics
-- [ ] User names show correctly
-- [ ] PWA banner appears with solid color
-- [ ] No console errors in mobile browsers
-
----
-
-## 🔧 **Technical Architecture**
-
-### **Cookie Strategy**
-```
-Development: secure=false, sameSite=lax
-Production:  secure=true,  sameSite=lax
-```
-
-### **Mobile Compatibility Matrix**
-- ✅ **iOS Safari 14+**: Full compatibility with SameSite=lax
-- ✅ **Chrome Mobile 80+**: Full SameSite support
-- ✅ **Android WebView**: Compatible with lax policy
-- ⚠️ **Legacy Browsers**: May need fallback handling
-
-### **Error Handling Strategy**
-- **Authentication**: Graceful fallbacks with user-friendly messages
-- **System Metrics**: Individual metric failures with fallback data
-- **Mobile Detection**: Progressive enhancement with desktop fallbacks
-
----
-
-## 📊 **Success Metrics**
-
-### **Before Fixes**
-- ❌ Mobile login refresh loops
-- ❌ System metrics showing zeros
-- ❌ Username showing "User!" 
-- ❌ PWA banner gradient background
-- ❌ Limited mobile debugging
-
-### **After Fixes**
-- ✅ Smooth mobile login experience
-- ✅ Real system metrics display
-- ✅ Proper firstName extraction
-- ✅ Solid MonacoUSA brand color
-- ✅ Comprehensive mobile debugging
-
----
-
-## 🎯 **Final Summary**
-
-All **6 priority issues** have been comprehensively addressed with:
-
-1. **🍪 Cookie compatibility** for mobile browsers
-2. **📱 Mobile-specific** redirect handling 
-3. **📊 Robust system metrics** with fallbacks
-4. **👤 Enhanced user data** debugging
-5. **🎨 Consistent PWA styling** with brand colors
-6. **🔧 Comprehensive mobile** debugging utilities
-
-The fixes target the **root authentication issues** while providing **enhanced mobile support** and **better debugging capabilities** for ongoing maintenance and troubleshooting.
-
-**Next Steps**: Deploy changes and test the complete authentication flow on both desktop and mobile devices to validate all fixes are working as expected.
diff --git a/FINAL_LOGIN_SOLUTION_CLEAN.md b/FINAL_LOGIN_SOLUTION_CLEAN.md
deleted file mode 100644
index 3ad9e47..0000000
--- a/FINAL_LOGIN_SOLUTION_CLEAN.md
+++ /dev/null
@@ -1,201 +0,0 @@
-# 🎯 Final Login Solution - Clean & Simple
-
-## 🚨 **Problems Solved**
-
-### ❌ **Before Fix**
-- **Desktop**: White screen after login attempt
-- **Mobile**: Endless login loop in iOS Safari  
-- **Server**: Session API spam (50+ calls per 30 seconds)
-
-### ✅ **After Fix**
-- **Desktop**: Clean login flow with proper redirects
-- **Mobile**: No more loops, standard navigation works
-- **Server**: Simple session checks, no spam
-
-## 🔧 **Root Cause Analysis**
-
-Using sequential thinking MCP, I identified two critical issues:
-
-1. **White Screen**: `await checkAuth(true)` at top level of login page broke SSR/hydration
-2. **Mobile Loops**: Complex throttling mechanism prevented proper auth flow
-
-## ✅ **Complete Solution Implemented**
-
-### **1. Simplified checkAuth Function**
-```typescript
-// composables/useAuth.ts
-const checkAuth = async () => {
-  try {
-    console.log('🔄 Performing session check...');
-    
-    const response = await $fetch<{
-      authenticated: boolean;
-      user: User | null;
-    }>('/api/auth/session');
-    
-    if (response.authenticated && response.user) {
-      user.value = response.user;
-      return true;
-    } else {
-      user.value = null;
-      return false;
-    }
-  } catch (err) {
-    console.error('Auth check error:', err);
-    user.value = null;
-    return false;
-  }
-};
-```
-**Changes**:
-- ❌ Removed ALL throttling logic
-- ❌ Removed force parameter
-- ✅ Simple, reliable session checks
-
-### **2. Fixed Login Page**
-```typescript
-// pages/login.vue
-onMounted(async () => {
-  // Check if user is already authenticated (client-side only)
-  const isAuthenticated = await checkAuth();
-  if (isAuthenticated && user.value) {
-    console.log('🔄 User already authenticated, redirecting to dashboard');
-    await navigateTo('/dashboard');
-    return;
-  }
-  
-  // Auto-focus username field
-  nextTick(() => {
-    const usernameField = document.querySelector('input[type="text"]') as HTMLInputElement;
-    if (usernameField) {
-      usernameField.focus();
-    }
-  });
-});
-```
-**Changes**:
-- ❌ Removed top-level async `await checkAuth(true)`
-- ✅ Moved auth check to `onMounted` (client-side only)
-- ✅ Standard `navigateTo()` instead of `window.location`
-
-### **3. Simplified Middleware**
-```typescript
-// middleware/auth.ts
-export default defineNuxtRouteMiddleware(async (to) => {
-  if (to.meta.auth === false) {
-    return;
-  }
-
-  const { isAuthenticated, checkAuth, user } = useAuth();
-  
-  // Simple check without forcing
-  if (!user.value) {
-    await checkAuth();
-  }
-
-  if (!isAuthenticated.value) {
-    return navigateTo('/login');
-  }
-});
-```
-**Changes**:
-- ❌ Removed `checkAuth(true)` forced parameter
-- ✅ Simple, standard auth checks
-
-### **4. Clean Login Method**
-```typescript
-// In login method
-while (!sessionSuccess && attempts < maxAttempts) {
-  attempts++;
-  console.log(`🔄 Session check attempt ${attempts}/${maxAttempts}`);
-  
-  sessionSuccess = await checkAuth(); // Simple check
-  
-  if (!sessionSuccess && attempts < maxAttempts) {
-    console.log('⏳ Session not ready, waiting 500ms...');
-    await new Promise(resolve => setTimeout(resolve, 500));
-  }
-}
-```
-**Changes**:
-- ❌ Removed forced checkAuth calls
-- ✅ Standard retry logic
-
-## 🎯 **Key Principles Applied**
-
-### **1. No Over-Engineering**
-- Removed complex throttling that caused more problems than it solved
-- Simple auth checks work reliably across all platforms
-
-### **2. Proper SSR Handling**
-- No async operations at top level of components
-- Client-side auth checks in `onMounted` lifecycle
-
-### **3. Standard Nuxt Navigation**
-- Use `navigateTo()` instead of `window.location` manipulations
-- Let Nuxt handle routing properly
-
-### **4. Clean Error Handling**
-- Simple try/catch blocks
-- Clear logging for debugging
-
-## 📊 **Expected Results**
-
-### **Desktop Experience**
-- ✅ Login form appears immediately (no white screen)
-- ✅ Valid credentials → redirect to dashboard
-- ✅ Invalid credentials → clear error message
-- ✅ Already authenticated → automatic redirect
-
-### **Mobile Experience (iOS Safari)**
-- ✅ Smooth login flow without loops
-- ✅ Standard navigation behavior
-- ✅ Proper cookie handling with `sameSite: 'lax'`
-- ✅ No complex mobile detection needed
-
-### **Server Performance**
-- ✅ Reduced session API calls (from 50+ to normal levels)
-- ✅ Clean session logs without spam
-- ✅ Proper authentication flow
-
-## 🧪 **Testing Checklist**
-
-### **Desktop Testing**
-- [ ] Login page loads without white screen
-- [ ] Valid login redirects to dashboard
-- [ ] Invalid login shows error
-- [ ] Already authenticated users redirect automatically
-
-### **Mobile Testing**
-- [ ] No login loops on iOS Safari
-- [ ] Smooth navigation between pages
-- [ ] Proper form interaction
-- [ ] Correct redirect behavior
-
-### **Server Monitoring**
-- [ ] Normal session check frequency (not 50+ per 30 seconds)
-- [ ] Clean server logs
-- [ ] Successful authentication flow
-
-## 🎉 **Why This Works**
-
-1. **Simplicity**: Removed all complex logic that was causing issues
-2. **SSR Compatibility**: Proper lifecycle management prevents hydration issues
-3. **Standard Patterns**: Uses Nuxt conventions instead of custom workarounds
-4. **Mobile Friendly**: Works with standard browser behavior
-5. **Reliable**: Consistent behavior across all platforms
-
-## 🚀 **Files Modified**
-
-- `composables/useAuth.ts` - Removed throttling, simplified checkAuth
-- `middleware/auth.ts` - Removed forced parameters
-- `pages/login.vue` - Moved auth check to onMounted, standard navigation
-
-## 📈 **Success Metrics**
-
-- **White Screen**: ❌ → ✅ (Fixed SSR issues)
-- **Mobile Loops**: ❌ → ✅ (Removed complex navigation)
-- **Server Spam**: ❌ → ✅ (Removed throttling complications)
-- **User Experience**: ❌ → ✅ (Clean, reliable authentication)
-
-The authentication system is now **simple, reliable, and works consistently** across all platforms! 🎯
diff --git a/Implementation_Plan_Initial/MONACOUSA_PORTAL_IMPLEMENTATION.md b/Implementation_Plan_Initial/MONACOUSA_PORTAL_IMPLEMENTATION.md
deleted file mode 100644
index 1b79810..0000000
--- a/Implementation_Plan_Initial/MONACOUSA_PORTAL_IMPLEMENTATION.md
+++ /dev/null
@@ -1,2352 +0,0 @@
-# MonacoUSA Portal - Complete Implementation Guide
-
-## Overview
-
-This document provides step-by-step instructions to create a complete portal foundation for MonacoUSA using the same proven tech stack as the Port Nimara client portal. The portal will feature Keycloak authentication, responsive design, PWA capabilities, and a modular structure for adding custom tools.
-
-## Project Specifications
-
-- **Project Name**: monacousa-portal
-- **Domain**: monacousa.org (configurable)
-- **Primary Color**: #a31515 (MonacoUSA red)
-- **Secondary Color**: #ffffff (white)
-- **Framework**: Nuxt 3 with Vue 3
-- **UI Library**: Vuetify 3
-- **Authentication**: Keycloak (OAuth2/OIDC)
-- **Database**: NocoDB
-- **File Storage**: MinIO (S3-compatible)
-- **Features**: PWA, Mobile-responsive, Dashboard layout
-
-## Prerequisites
-
-Before starting, ensure you have:
-- Node.js 18+ installed
-- Git installed
-- Access to a Keycloak server
-- NocoDB instance (or ability to set one up)
-- MinIO instance (or ability to set one up)
-
-## Phase 1: Project Initialization
-
-### 1.1 Create New Repository
-
-```bash
-mkdir monacousa-portal
-cd monacousa-portal
-git init
-```
-
-### 1.2 Initialize Nuxt 3 Project
-
-```bash
-npx nuxi@latest init .
-```
-
-### 1.3 Install Core Dependencies
-
-```bash
-npm install @nuxt/ui@^3.2.0 vuetify-nuxt-module@^0.18.3 @vite-pwa/nuxt@^0.10.6 motion-v@^1.6.1
-```
-
-### 1.4 Install Additional Dependencies
-
-```bash
-npm install @types/node formidable@^3.5.4 mime-types@^3.0.1 minio@^8.0.5 sharp@^0.34.2
-npm install -D @types/formidable@^3.4.5 @types/mime-types@^3.0.1
-```
-
-## Phase 2: Project Structure Setup
-
-### 2.1 Create Directory Structure
-
-```bash
-mkdir -p components composables layouts middleware pages/auth pages/dashboard server/api server/utils server/plugins utils docs public/icons
-```
-
-### 2.2 Create package.json
-
-```json
-{
-  "name": "monacousa-portal",
-  "type": "module",
-  "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
-  },
-  "dependencies": {
-    "@nuxt/ui": "^3.2.0",
-    "@vite-pwa/nuxt": "^0.10.6",
-    "formidable": "^3.5.4",
-    "mime-types": "^3.0.1",
-    "minio": "^8.0.5",
-    "motion-v": "^1.6.1",
-    "nuxt": "^3.15.4",
-    "sharp": "^0.34.2",
-    "vue": "latest",
-    "vue-router": "latest",
-    "vuetify-nuxt-module": "^0.18.3"
-  },
-  "devDependencies": {
-    "@types/formidable": "^3.4.5",
-    "@types/mime-types": "^3.0.1"
-  }
-}
-```
-
-## Phase 3: Core Configuration
-
-### 3.1 Create nuxt.config.ts
-
-```typescript
-export default defineNuxtConfig({
-  ssr: false,
-  compatibilityDate: "2024-11-01",
-  devtools: { enabled: true },
-  modules: ["vuetify-nuxt-module", "@vite-pwa/nuxt", "motion-v/nuxt"],
-  app: {
-    head: {
-      titleTemplate: "%s • MonacoUSA Portal",
-      title: "MonacoUSA Portal",
-      meta: [
-        { property: "og:title", content: "MonacoUSA Portal" },
-        { property: "og:image", content: "/og-image.png" },
-        { name: "twitter:card", content: "summary_large_image" },
-        { name: "viewport", content: "width=device-width, initial-scale=1" },
-        { name: "apple-mobile-web-app-capable", content: "yes" },
-        { name: "apple-mobile-web-app-status-bar-style", content: "default" },
-        { name: "apple-mobile-web-app-title", content: "MonacoUSA Portal" },
-      ],
-      htmlAttrs: {
-        lang: "en",
-      },
-    },
-  },
-  pwa: {
-    registerType: 'autoUpdate',
-    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',
-      start_url: '/',
-      scope: '/',
-      icons: [
-        {
-          src: '/icons/icon-72x72.png',
-          sizes: '72x72',
-          type: 'image/png'
-        },
-        {
-          src: '/icons/icon-96x96.png',
-          sizes: '96x96',
-          type: 'image/png'
-        },
-        {
-          src: '/icons/icon-128x128.png',
-          sizes: '128x128',
-          type: 'image/png'
-        },
-        {
-          src: '/icons/icon-144x144.png',
-          sizes: '144x144',
-          type: 'image/png'
-        },
-        {
-          src: '/icons/icon-152x152.png',
-          sizes: '152x152',
-          type: 'image/png'
-        },
-        {
-          src: '/icons/icon-192x192.png',
-          sizes: '192x192',
-          type: 'image/png'
-        },
-        {
-          src: '/icons/icon-384x384.png',
-          sizes: '384x384',
-          type: 'image/png'
-        },
-        {
-          src: '/icons/icon-512x512.png',
-          sizes: '512x512',
-          type: 'image/png'
-        }
-      ]
-    },
-    workbox: {
-      navigateFallback: '/',
-      globPatterns: ['**/*.{js,css,html,png,jpg,jpeg,svg,ico}'],
-      navigateFallbackDenylist: [/^\/api\//],
-      runtimeCaching: [
-        {
-          urlPattern: /^https:\/\/.*\.monacousa\.org\/.*/i,
-          handler: 'NetworkFirst',
-          options: {
-            cacheName: 'api-cache',
-            expiration: {
-              maxEntries: 10,
-              maxAgeSeconds: 60 * 60 * 24 // 24 hours
-            },
-            cacheableResponse: {
-              statuses: [0, 200]
-            }
-          }
-        }
-      ],
-      skipWaiting: true,
-      clientsClaim: true
-    },
-    client: {
-      installPrompt: true,
-      periodicSyncForUpdates: 20
-    },
-    devOptions: {
-      enabled: true,
-      type: 'module'
-    }
-  },
-  nitro: {
-    experimental: {
-      wasm: true
-    }
-  },
-  runtimeConfig: {
-    // Server-side configuration
-    keycloak: {
-      issuer: process.env.NUXT_KEYCLOAK_ISSUER || "",
-      clientId: process.env.NUXT_KEYCLOAK_CLIENT_ID || "monacousa-portal",
-      clientSecret: process.env.NUXT_KEYCLOAK_CLIENT_SECRET || "",
-      callbackUrl: process.env.NUXT_KEYCLOAK_CALLBACK_URL || "https://monacousa.org/auth/callback",
-    },
-    nocodb: {
-      url: process.env.NUXT_NOCODB_URL || "",
-      token: process.env.NUXT_NOCODB_TOKEN || "",
-      baseId: process.env.NUXT_NOCODB_BASE_ID || "",
-    },
-    minio: {
-      endPoint: process.env.NUXT_MINIO_ENDPOINT || "s3.monacousa.org",
-      port: parseInt(process.env.NUXT_MINIO_PORT || "443"),
-      useSSL: process.env.NUXT_MINIO_USE_SSL !== "false",
-      accessKey: process.env.NUXT_MINIO_ACCESS_KEY || "",
-      secretKey: process.env.NUXT_MINIO_SECRET_KEY || "",
-      bucketName: process.env.NUXT_MINIO_BUCKET_NAME || "monacousa-portal",
-    },
-    sessionSecret: process.env.NUXT_SESSION_SECRET || "",
-    encryptionKey: process.env.NUXT_ENCRYPTION_KEY || "",
-    public: {
-      // Client-side configuration
-      appName: "MonacoUSA Portal",
-      domain: process.env.NUXT_PUBLIC_DOMAIN || "monacousa.org",
-    },
-  },
-  vuetify: {
-    vuetifyOptions: {
-      theme: {
-        defaultTheme: "monacousa",
-        themes: {
-          monacousa: {
-            colors: {
-              primary: "#a31515",
-              secondary: "#ffffff",
-              accent: "#f5f5f5",
-              error: "#ff5252",
-              warning: "#ff9800",
-              info: "#2196f3",
-              success: "#4caf50",
-            },
-          },
-        },
-      },
-    },
-  },
-});
-```
-
-### 3.2 Create Environment Configuration (.env.example)
-
-```env
-# Keycloak Configuration
-NUXT_KEYCLOAK_ISSUER=https://auth.monacousa.org/realms/monacousa-portal
-NUXT_KEYCLOAK_CLIENT_ID=monacousa-portal
-NUXT_KEYCLOAK_CLIENT_SECRET=your-keycloak-client-secret
-NUXT_KEYCLOAK_CALLBACK_URL=https://monacousa.org/auth/callback
-
-# NocoDB Configuration
-NUXT_NOCODB_URL=https://db.monacousa.org
-NUXT_NOCODB_TOKEN=your-nocodb-token
-NUXT_NOCODB_BASE_ID=your-nocodb-base-id
-
-# MinIO Configuration
-NUXT_MINIO_ENDPOINT=s3.monacousa.org
-NUXT_MINIO_PORT=443
-NUXT_MINIO_USE_SSL=true
-NUXT_MINIO_ACCESS_KEY=your-minio-access-key
-NUXT_MINIO_SECRET_KEY=your-minio-secret-key
-NUXT_MINIO_BUCKET_NAME=monacousa-portal
-
-# Security Configuration
-NUXT_SESSION_SECRET=your-48-character-session-secret-key-here
-NUXT_ENCRYPTION_KEY=your-32-character-encryption-key-here
-
-# Public Configuration
-NUXT_PUBLIC_DOMAIN=monacousa.org
-```
-
-## Phase 4: Authentication Implementation
-
-### 4.1 Create Keycloak Utility (server/utils/keycloak.ts)
-
-```typescript
-interface KeycloakConfig {
-  issuer: string;
-  clientId: string;
-  clientSecret: string;
-  callbackUrl: string;
-}
-
-interface TokenResponse {
-  access_token: string;
-  refresh_token: string;
-  id_token: string;
-  token_type: string;
-  expires_in: number;
-}
-
-interface UserInfo {
-  sub: string;
-  email: string;
-  given_name?: string;
-  family_name?: string;
-  name?: string;
-  groups?: string[];
-  tier?: string;
-}
-
-export class KeycloakClient {
-  private config: KeycloakConfig;
-
-  constructor(config: KeycloakConfig) {
-    this.config = config;
-  }
-
-  getAuthUrl(state: string): string {
-    const params = new URLSearchParams({
-      client_id: this.config.clientId,
-      redirect_uri: this.config.callbackUrl,
-      response_type: 'code',
-      scope: 'openid email profile',
-      state,
-    });
-
-    return `${this.config.issuer}/protocol/openid-connect/auth?${params}`;
-  }
-
-  async exchangeCodeForTokens(code: string): Promise<TokenResponse> {
-    const response = await fetch(`${this.config.issuer}/protocol/openid-connect/token`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-      },
-      body: new URLSearchParams({
-        grant_type: 'authorization_code',
-        client_id: this.config.clientId,
-        client_secret: this.config.clientSecret,
-        code,
-        redirect_uri: this.config.callbackUrl,
-      }),
-    });
-
-    if (!response.ok) {
-      throw new Error(`Token exchange failed: ${response.statusText}`);
-    }
-
-    return response.json();
-  }
-
-  async getUserInfo(accessToken: string): Promise<UserInfo> {
-    const response = await fetch(`${this.config.issuer}/protocol/openid-connect/userinfo`, {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-      },
-    });
-
-    if (!response.ok) {
-      throw new Error(`Failed to get user info: ${response.statusText}`);
-    }
-
-    return response.json();
-  }
-
-  async refreshToken(refreshToken: string): Promise<TokenResponse> {
-    const response = await fetch(`${this.config.issuer}/protocol/openid-connect/token`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-      },
-      body: new URLSearchParams({
-        grant_type: 'refresh_token',
-        client_id: this.config.clientId,
-        client_secret: this.config.clientSecret,
-        refresh_token: refreshToken,
-      }),
-    });
-
-    if (!response.ok) {
-      throw new Error(`Token refresh failed: ${response.statusText}`);
-    }
-
-    return response.json();
-  }
-}
-
-export function createKeycloakClient(): KeycloakClient {
-  const config = useRuntimeConfig();
-  return new KeycloakClient(config.keycloak);
-}
-```
-
-### 4.2 Create Session Management (server/utils/session.ts)
-
-```typescript
-import { serialize, parse } from 'cookie';
-import { createHash, createCipheriv, createDecipheriv, randomBytes } from 'crypto';
-
-interface SessionData {
-  user: {
-    id: string;
-    email: string;
-    name: string;
-    groups?: string[];
-    tier?: string;
-  };
-  tokens: {
-    accessToken: string;
-    refreshToken: string;
-    expiresAt: number;
-  };
-  createdAt: number;
-  lastActivity: number;
-}
-
-export class SessionManager {
-  private encryptionKey: Buffer;
-  private cookieName = 'monacousa-session';
-
-  constructor(encryptionKey: string) {
-    this.encryptionKey = Buffer.from(encryptionKey, 'hex');
-  }
-
-  private encrypt(data: string): string {
-    const iv = randomBytes(16);
-    const cipher = createCipheriv('aes-256-cbc', this.encryptionKey, iv);
-    let encrypted = cipher.update(data, 'utf8', 'hex');
-    encrypted += cipher.final('hex');
-    return iv.toString('hex') + ':' + encrypted;
-  }
-
-  private decrypt(encryptedData: string): string {
-    const [ivHex, encrypted] = encryptedData.split(':');
-    const iv = Buffer.from(ivHex, 'hex');
-    const decipher = createDecipheriv('aes-256-cbc', this.encryptionKey, iv);
-    let decrypted = decipher.update(encrypted, 'hex', 'utf8');
-    decrypted += decipher.final('utf8');
-    return decrypted;
-  }
-
-  createSession(sessionData: SessionData): string {
-    const data = JSON.stringify(sessionData);
-    const encrypted = this.encrypt(data);
-    
-    return serialize(this.cookieName, encrypted, {
-      httpOnly: true,
-      secure: true,
-      sameSite: 'lax',
-      maxAge: 60 * 60 * 24 * 7, // 7 days
-      path: '/',
-    });
-  }
-
-  getSession(cookieHeader?: string): SessionData | null {
-    if (!cookieHeader) return null;
-
-    const cookies = parse(cookieHeader);
-    const sessionCookie = cookies[this.cookieName];
-
-    if (!sessionCookie) return null;
-
-    try {
-      const decrypted = this.decrypt(sessionCookie);
-      const sessionData = JSON.parse(decrypted) as SessionData;
-
-      // Check if session is expired
-      if (Date.now() > sessionData.tokens.expiresAt) {
-        return null;
-      }
-
-      return sessionData;
-    } catch (error) {
-      console.error('Failed to decrypt session:', error);
-      return null;
-    }
-  }
-
-  destroySession(): string {
-    return serialize(this.cookieName, '', {
-      httpOnly: true,
-      secure: true,
-      sameSite: 'lax',
-      maxAge: 0,
-      path: '/',
-    });
-  }
-}
-
-export function createSessionManager(): SessionManager {
-  const config = useRuntimeConfig();
-  return new SessionManager(config.encryptionKey);
-}
-```
-
-### 4.3 Create Authentication Middleware (middleware/auth.ts)
-
-```typescript
-export default defineNuxtRouteMiddleware((to) => {
-  // Skip auth for public pages
-  if (to.meta.auth === false) {
-    return;
-  }
-
-  // Check if user is authenticated
-  const authState = useState('auth.state', () => ({
-    authenticated: false,
-    user: null,
-    groups: [],
-  }));
-
-  if (!authState.value.authenticated) {
-    return navigateTo('/login');
-  }
-});
-```
-
-### 4.4 Create Auth API Routes
-
-#### server/api/auth/login.get.ts
-
-```typescript
-export default defineEventHandler(async (event) => {
-  const keycloak = createKeycloakClient();
-  const state = randomBytes(32).toString('hex');
-  
-  // Store state in session for verification
-  setCookie(event, 'oauth-state', state, {
-    httpOnly: true,
-    secure: true,
-    maxAge: 600, // 10 minutes
-  });
-
-  const authUrl = keycloak.getAuthUrl(state);
-  
-  return sendRedirect(event, authUrl);
-});
-```
-
-#### server/api/auth/callback.get.ts
-
-```typescript
-export default defineEventHandler(async (event) => {
-  const query = getQuery(event);
-  const { code, state } = query;
-
-  if (!code || !state) {
-    throw createError({
-      statusCode: 400,
-      statusMessage: 'Missing authorization code or state',
-    });
-  }
-
-  // Verify state
-  const storedState = getCookie(event, 'oauth-state');
-  if (state !== storedState) {
-    throw createError({
-      statusCode: 400,
-      statusMessage: 'Invalid state parameter',
-    });
-  }
-
-  try {
-    const keycloak = createKeycloakClient();
-    const sessionManager = createSessionManager();
-
-    // Exchange code for tokens
-    const tokens = await keycloak.exchangeCodeForTokens(code as string);
-    
-    // Get user info
-    const userInfo = await keycloak.getUserInfo(tokens.access_token);
-
-    // Create session
-    const sessionData = {
-      user: {
-        id: userInfo.sub,
-        email: userInfo.email,
-        name: userInfo.name || `${userInfo.given_name} ${userInfo.family_name}`.trim(),
-        groups: userInfo.groups || [],
-        tier: userInfo.tier,
-      },
-      tokens: {
-        accessToken: tokens.access_token,
-        refreshToken: tokens.refresh_token,
-        expiresAt: Date.now() + (tokens.expires_in * 1000),
-      },
-      createdAt: Date.now(),
-      lastActivity: Date.now(),
-    };
-
-    const sessionCookie = sessionManager.createSession(sessionData);
-    
-    // Set session cookie
-    setHeader(event, 'Set-Cookie', sessionCookie);
-    
-    // Clear state cookie
-    deleteCookie(event, 'oauth-state');
-
-    return sendRedirect(event, '/dashboard');
-  } catch (error) {
-    console.error('Auth callback error:', error);
-    throw createError({
-      statusCode: 500,
-      statusMessage: 'Authentication failed',
-    });
-  }
-});
-```
-
-#### server/api/auth/session.get.ts
-
-```typescript
-export default defineEventHandler(async (event) => {
-  const sessionManager = createSessionManager();
-  const cookieHeader = getHeader(event, 'cookie');
-  const session = sessionManager.getSession(cookieHeader);
-
-  if (!session) {
-    return {
-      authenticated: false,
-      user: null,
-      groups: [],
-    };
-  }
-
-  return {
-    authenticated: true,
-    user: session.user,
-    groups: session.user.groups || [],
-  };
-});
-```
-
-#### server/api/auth/logout.post.ts
-
-```typescript
-export default defineEventHandler(async (event) => {
-  const sessionManager = createSessionManager();
-  const destroyCookie = sessionManager.destroySession();
-  
-  setHeader(event, 'Set-Cookie', destroyCookie);
-  
-  return { success: true };
-});
-```
-
-## Phase 5: Database Integration (NocoDB)
-
-### 5.1 Create NocoDB Utility (server/utils/nocodb.ts)
-
-```typescript
-interface NocoDBConfig {
-  url: string;
-  token: string;
-  baseId: string;
-}
-
-export class NocoDBClient {
-  private config: NocoDBConfig;
-  private baseUrl: string;
-
-  constructor(config: NocoDBConfig) {
-    this.config = config;
-    this.baseUrl = `${config.url}/api/v2/tables`;
-  }
-
-  private async request(endpoint: string, options: RequestInit = {}) {
-    const url = `${this.baseUrl}${endpoint}`;
-    
-    const response = await fetch(url, {
-      ...options,
-      headers: {
-        'xc-token': this.config.token,
-        'Content-Type': 'application/json',
-        ...options.headers,
-      },
-    });
-
-    if (!response.ok) {
-      throw new Error(`NocoDB request failed: ${response.statusText}`);
-    }
-
-    return response.json();
-  }
-
-  async findAll(tableName: string, params: Record<string, any> = {}) {
-    const queryString = new URLSearchParams(params).toString();
-    const endpoint = `/${tableName}/records${queryString ? `?${queryString}` : ''}`;
-    return this.request(endpoint);
-  }
-
-  async findOne(tableName: string, id: string) {
-    return this.request(`/${tableName}/records/${id}`);
-  }
-
-  async create(tableName: string, data: Record<string, any>) {
-    return this.request(`/${tableName}/records`, {
-      method: 'POST',
-      body: JSON.stringify(data),
-    });
-  }
-
-  async update(tableName: string, id: string, data: Record<string, any>) {
-    return this.request(`/${tableName}/records/${id}`, {
-      method: 'PATCH',
-      body: JSON.stringify(data),
-    });
-  }
-
-  async delete(tableName: string, id: string) {
-    return this.request(`/${tableName}/records/${id}`, {
-      method: 'DELETE',
-    });
-  }
-}
-
-export function createNocoDBClient(): NocoDBClient {
-  const config = useRuntimeConfig();
-  return new NocoDBClient(config.nocodb);
-}
-```
-
-### 5.2 Create Database API Template (server/api/data/[table]/[...params].ts)
-
-```typescript
-export default defineEventHandler(async (event) => {
-  const method = getMethod(event);
-  const params = getRouterParams(event);
-  const table = params.table;
-  const additionalParams = params.params?.split('/') || [];
-
-  const nocodb = createNocoDBClient();
-
-  try {
-    switch (method) {
-      case 'GET':
-        if (additionalParams.length > 0) {
-          // Get single record
-          const id = additionalParams[0];
-          return await nocodb.findOne(table, id);
-        } else {
-          // Get all records
-          const query = getQuery(event);
-          return await nocodb.findAll(table, query);
-        }
-
-      case 'POST':
-        const createData = await readBody(event);
-        return await nocodb.create(table, createData);
-
-      case 'PATCH':
-        if (additionalParams.length === 0) {
-          throw createError({
-            statusCode: 400,
-            statusMessage: 'Record ID required for update',
-          });
-        }
-        const updateId = additionalParams[0];
-        const updateData = await readBody(event);
-        return await nocodb.update(table, updateId, updateData);
-
-      case 'DELETE':
-        if (additionalParams.length === 0) {
-          throw createError({
-            statusCode: 400,
-            statusMessage: 'Record ID required for delete',
-          });
-        }
-        const deleteId = additionalParams[0];
-        return await nocodb.delete(table, deleteId);
-
-      default:
-        throw createError({
-          statusCode: 405,
-          statusMessage: 'Method not allowed',
-        });
-    }
-  } catch (error) {
-    console.error('Database operation error:', error);
-    throw createError({
-      statusCode: 500,
-      statusMessage: 'Database operation failed',
-    });
-  }
-});
-```
-
-## Phase 6: File Storage Integration (MinIO)
-
-### 6.1 Create MinIO Utility (server/utils/minio.ts)
-
-```typescript
-import { Client } from 'minio';
-
-interface MinIOConfig {
-  endPoint: string;
-  port: number;
-  useSSL: boolean;
-  accessKey: string;
-  secretKey: string;
-  bucketName: string;
-}
-
-export class MinIOClient {
-  private client: Client;
-  private bucketName: string;
-
-  constructor(config: MinIOConfig) {
-    this.client = new Client({
-      endPoint: config.endPoint,
-      port: config.port,
-      useSSL: config.useSSL,
-      accessKey: config.accessKey,
-      secretKey: config.secretKey,
-    });
-    this.bucketName = config.bucketName;
-  }
-
-  async ensureBucket(): Promise<void> {
-    const exists = await this.client.bucketExists(this.bucketName);
-    if (!exists) {
-      await this.client.makeBucket(this.bucketName);
-    }
-  }
-
-  async uploadFile(fileName: string, buffer: Buffer, contentType?: string): Promise<string> {
-    await this.ensureBucket();
-    
-    const metadata = contentType ? { 'Content-Type': contentType } : {};
-    
-    await this.client.putObject(this.bucketName, fileName, buffer, buffer.length, metadata);
-    
-    return fileName;
-  }
-
-  async getFile(fileName: string): Promise<Buffer> {
-    const stream = await this.client.getObject(this.bucketName, fileName);
-    const chunks: Buffer[] = [];
-    
-    return new Promise((resolve, reject) => {
-      stream.on('data', (chunk) => chunks.push(chunk));
-      stream.on('end', () => resolve(Buffer.concat(chunks)));
-      stream.on('error', reject);
-    });
-  }
-
-  async deleteFile(fileName: string): Promise<void> {
-    await this.client.removeObject(this.bucketName, fileName);
-  }
-
-  async listFiles(prefix?: string): Promise<string[]> {
-    const objects: string[] = [];
-    const stream = this.client.listObjects(this.bucketName, prefix);
-    
-    return new Promise((resolve, reject) => {
-      stream.on('data', (obj) => objects.push(obj.name!));
-      stream.on('end', () => resolve(objects));
-      stream.on('error', reject);
-    });
-  }
-
-  getPresignedUrl(fileName: string, expiry: number = 3600): Promise<string> {
-    return this.client.presignedGetObject(this.bucketName, fileName, expiry);
-  }
-}
-
-export function createMinIOClient(): MinIOClient {
-  const config = useRuntimeConfig();
-  return new MinIOClient(config.minio);
-}
-```
-
-### 6.2 Create File Upload API (server/api/files/upload.post.ts)
-
-```typescript
-import formidable from 'formidable';
-import { readFileSync } from 'fs';
-import { lookup } from 'mime-types';
-
-export default defineEventHandler(async (event) => {
-  const form = formidable({
-    maxFileSize: 10 * 1024 * 1024, // 10MB
-    allowEmptyFiles: false,
-  });
-
-  try {
-    const [fields, files] = await form.parse(event.node.req);
-    const minio = createMinIOClient();
-
-    const uploadedFiles = [];
-
-    for (const [fieldName, fileArray] of Object.entries(files)) {
-      const file = Array.isArray(fileArray) ? fileArray[0] : fileArray;
-      
-      if (file && file.filepath) {
-        const buffer = readFileSync(file.filepath);
-        const contentType = lookup(file.originalFilename || '') || 'application/octet-stream';
-        const fileName = `${Date.now()}-${file.originalFilename}`;
-        
-        await minio.uploadFile(fileName, buffer, contentType);
-        
-        uploadedFiles.push({
-          fieldName,
-          fileName,
-          originalName: file.originalFilename,
-          size: file.size,
-          contentType,
-        });
-      }
-    }
-
-    return { success: true, files: uploadedFiles };
-  } catch (error) {
-    console.error('File upload error:', error);
-    throw createError({
-      statusCode: 500,
-      statusMessage: 'File upload failed',
-    });
-  }
-});
-```
-
-### 6.3 Create File Download API (server/api/files/[filename].get.ts)
-
-```typescript
-export default defineEventHandler(async (event) => {
-  const filename = getRouterParam(event, 'filename');
-  
-  if (!filename) {
-    throw createError({
-      statusCode: 400,
-      statusMessage: 'Filename required',
-    });
-  }
-
-  try {
-    const minio = createMinIOClient();
-    const buffer = await minio.getFile(filename);
-    
-    // Set appropriate headers
-    setHeader(event, 'Content-Type', 'application/octet-stream');
-    setHeader(event, 'Content-Disposition', `attachment; filename="${filename}"`);
-    
-    return buffer;
-  } catch (error) {
-    console.error('File download error:', error);
-    throw createError({
-      statusCode: 404,
-      statusMessage: 'File not found',
-    });
-  }
-});
-```
-
-## Phase 7: UI Components and Layout
-
-### 7.1 Create Authentication Composable (composables/useAuth.ts)
-
-```typescript
-interface User {
-  id: string;
-  email: string;
-  name: string;
-  groups?: string[];
-  tier?: string;
-}
-
-interface AuthState {
-  authenticated: boolean;
-  user: User | null;
-  groups: string[];
-}
-
-export const useAuth = () => {
-  const authState = useState<AuthState>('auth.state', () => ({
-    authenticated: false,
-    user: null,
-    groups: [],
-  }));
-
-  const login = () => {
-    return navigateTo('/api/auth/login');
-  };
-
-  const logout = async () => {
-    try {
-      await $fetch('/api/auth/logout', { method: 'POST' });
-      authState.value = {
-        authenticated: false,
-        user: null,
-        groups: [],
-      };
-      await navigateTo('/login');
-    } catch (error) {
-      console.error('Logout error:', error);
-      await navigateTo('/login');
-    }
-  };
-
-  const checkAuth = async () => {
-    try {
-      const response = await $fetch<AuthState>('/api/auth/session');
-      authState.value = response;
-      return response.authenticated;
-    } catch (error) {
-      console.error('Auth check error:', error);
-      authState.value = {
-        authenticated: false,
-        user: null,
-        groups: [],
-      };
-      return false;
-    }
-  };
-
-  const isAdmin = computed(() => {
-    return authState.value.groups?.includes('admin') || false;
-  });
-
-  const hasRole = (role: string) => {
-    return authState.value.groups?.includes(role) || false;
-  };
-
-  return {
-    authState: readonly(authState),
-    user: computed(() => authState.value.user),
-    authenticated: computed(() => authState.value.authenticated),
-    groups: computed(() => authState.value.groups),
-    isAdmin,
-    hasRole,
-    login,
-    logout,
-    checkAuth,
-  };
-};
-```
-
-### 7.2 Create Login Page (pages/login.vue)
-
-```vue
-<template>
-  <v-app>
-    <v-main class="d-flex align-center justify-center min-h-screen bg-grey-lighten-4">
-      <v-container>
-        <v-row justify="center">
-          <v-col cols="12" sm="8" md="6" lg="4">
-            <v-card class="elevation-8 rounded-lg">
-              <v-card-text class="pa-8">
-                <div class="text-center mb-6">
-                  <v-img
-                    src="/logo.png"
-                    alt="MonacoUSA"
-                    max-width="120"
-                    class="mx-auto mb-4"
-                  />
-                  <h1 class="text-h4 font-weight-bold text-primary mb-2">
-                    MonacoUSA Portal
-                  </h1>
-                  <p class="text-body-1 text-grey-600">
-                    Sign in to access your dashboard
-                  </p>
-                </div>
-
-                <v-btn
-                  @click="handleLogin"
-                  :loading="loading"
-                  color="primary"
-                  size="large"
-                  block
-                  class="mb-4"
-                  prepend-icon="mdi-login"
-                >
-                  Sign In with SSO
-                </v-btn>
-
-                <div class="text-center">
-                  <p class="text-caption text-grey-600">
-                    Secure authentication powered by Keycloak
-                  </p>
-                </div>
-              </v-card-text>
-            </v-card>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-main>
-  </v-app>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  auth: false,
-  layout: false,
-});
-
-const { login } = useAuth();
-const loading = ref(false);
-
-const handleLogin = async () => {
-  loading.value = true;
-  try {
-    await login();
-  } catch (error) {
-    console.error('Login error:', error);
-  } finally {
-    loading.value = false;
-  }
-};
-</script>
-```
-
-### 7.3 Create Auth Callback Page (pages/auth/callback.vue)
-
-```vue
-<template>
-  <v-app>
-    <v-main class="d-flex align-center justify-center min-h-screen">
-      <v-container>
-        <v-row justify="center">
-          <v-col cols="12" sm="6" md="4">
-            <v-card class="text-center pa-8">
-              <v-progress-circular
-                indeterminate
-                color="primary"
-                size="64"
-                class="mb-4"
-              />
-              <h2 class="text-h5 mb-2">Signing you in...</h2>
-              <p class="text-body-2 text-grey-600">
-                Please wait while we complete your authentication.
-              </p>
-            </v-card>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-main>
-  </v-app>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  auth: false,
-  layout: false,
-});
-
-// The actual authentication is handled by the server-side callback API
-// This page just shows a loading state while the redirect happens
-</script>
-```
-
-### 7.4 Create Dashboard Layout (layouts/dashboard.vue)
-
-```vue
-<template>
-  <v-app>
-    <v-navigation-drawer
-      v-model="drawer"
-      :rail="rail && !mdAndDown"
-      permanent
-      color="white"
-      class="elevation-2"
-    >
-      <!-- Logo and Title -->
-      <v-list>
-        <v-list-item
-          class="px-3 py-3"
-          :class="{ 'cursor-pointer': !mdAndDown }"
-          @click="!mdAndDown ? (rail = !rail) : undefined"
-        >
-          <template v-slot:prepend>
-            <v-avatar size="40" class="me-3">
-              <v-img src="/logo.png" alt="MonacoUSA" />
-            </v-avatar>
-          </template>
-          <v-list-item-title v-if="!rail || mdAndDown" class="text-subtitle-1 font-weight-medium">
-            MonacoUSA Portal
-          </v-list-item-title>
-        </v-list-item>
-      </v-list>
-
-      <v-divider></v-divider>
-
-      <!-- Navigation Items -->
-      <v-list density="compact" nav>
-        <v-list-item
-          v-for="item in navigationItems"
-          :key="item.to"
-          :prepend-icon="item.icon"
-          :title="item.label"
-          :value="item.to"
-          :to="item.to"
-          color="primary"
-          rounded="xl"
-          class="mx-1"
-        ></v-list-item>
-
-        <!-- Admin Section -->
-        <template v-if="isAdmin">
-          <v-divider class="my-2"></v-divider>
-          <v-list-subheader class="text-caption text-grey-600 px-3">
-            Administration
-          </v-list-subheader>
-          <v-list-item
-            v-for="item in adminItems"
-            :key="item.to"
-            :prepend-icon="item.icon"
-            :title="item.label"
-            :value="item.to"
-            :to="item.to"
-            color="primary"
-            rounded="xl"
-            class="mx-1"
-          ></v-list-item>
-        </template>
-      </v-list>
-
-      <template v-slot:append>
-        <v-divider></v-divider>
-        
-        <!-- User Info Section -->
-        <div class="pa-2">
-          <v-list v-if="user">
-            <v-list-item
-              :prepend-avatar="`https://ui-avatars.com/api/?name=${encodeURIComponent(user.name || user.email)}&background=a31515&color=fff`"
-              :title="user.name || user.email"
-              :subtitle="user.email"
-              class="px-2"
-            >
-              <template v-slot:append v-if="!rail && groups.length">
-                <div>
-                  <v-chip 
-                    v-if="groups.includes('admin')" 
-                    size="small" 
-                    color="primary"
-                    variant="tonal"
-                  >
-                    Admin
-                  </v-chip>
-                  <v-chip 
-                    v-else-if="groups.includes('manager')" 
-                    size="small" 
-                    color="success"
-                    variant="tonal"
-                  >
-                    Manager
-                  </v-chip>
-                </div>
-              </template>
-            </v-list-item>
-            
-            <v-list-item
-              @click="handleLogout"
-              prepend-icon="mdi-logout"
-              title="Logout"
-              class="px-2 mt-1"
-              base-color="error"
-              rounded="xl"
-            ></v-list-item>
-          </v-list>
-        </div>
-      </template>
-    </v-navigation-drawer>
-
-    <v-app-bar 
-      flat
-      color="white"
-      class="border-b"
-    >
-      <v-app-bar-nav-icon
-        @click="drawer = !drawer"
-        class="d-lg-none"
-      ></v-app-bar-nav-icon>
-
-      <v-toolbar-title class="text-h6">
-        {{ pageTitle }}
-      </v-toolbar-title>
-
-      <v-spacer></v-spacer>
-
-      <!-- PWA Install Button -->
-      <v-btn
-        v-if="canInstall"
-        @click="install"
-        icon="mdi-download"
-        variant="text"
-        class="me-2"
-      >
-        <v-icon>mdi-download</v-icon>
-        <v-tooltip activator="parent" location="bottom">
-          Install App
-        </v-tooltip>
-      </v-btn>
-    </v-app-bar>
-
-    <v-main class="bg-grey-lighten-4">
-      <slot />
-    </v-main>
-  </v-app>
-</template>
-
-<script setup lang="ts">
-import { useDisplay } from 'vuetify';
-
-const route = useRoute();
-const { mdAndDown } = useDisplay();
-const { user, groups, isAdmin, logout } = useAuth();
-
-// Sidebar state
-const drawer = ref(true);
-const rail = ref(false);
-
-// PWA install
-const canInstall = ref(false);
-let deferredPrompt: any = null;
-
-// Page title based on current route
-const pageTitle = computed(() => {
-  const routeName = route.name as string;
-  const pageTitles: Record<string, string> = {
-    'dashboard': 'Dashboard',
-    'dashboard-index': 'Dashboard',
-    'dashboard-tools': 'Tools',
-    'dashboard-settings': 'Settings',
-    'dashboard-admin': 'Administration',
-  };
-  
-  return pageTitles[routeName] || 'Dashboard';
-});
-
-// Main navigation items
-const navigationItems = computed(() => {
-  return [
-    {
-      label: 'Dashboard',
-      icon: 'mdi-view-dashboard',
-      to: '/dashboard',
-    },
-    {
-      label: 'Tools',
-      icon: 'mdi-tools',
-      to: '/dashboard/tools',
-    },
-    {
-      label: 'Settings',
-      icon: 'mdi-cog',
-      to: '/dashboard/settings',
-    },
-  ];
-});
-
-// Admin navigation items
-const adminItems = computed(() => {
-  return [
-    {
-      label: 'Admin Panel',
-      icon: 'mdi-shield-crown',
-      to: '/dashboard/admin',
-    },
-  ];
-});
-
-// Logout handler
-const handleLogout = async () => {
-  await logout();
-};
-
-// PWA install handler
-const install = async () => {
-  if (deferredPrompt) {
-    deferredPrompt.prompt();
-    const { outcome } = await deferredPrompt.userChoice;
-    if (outcome === 'accepted') {
-      canInstall.value = false;
-    }
-    deferredPrompt = null;
-  }
-};
-
-// Initialize drawer state on mobile
-onMounted(() => {
-  if (mdAndDown.value) {
-    drawer.value = false;
-  }
-
-  // PWA install prompt
-  window.addEventListener('beforeinstallprompt', (e) => {
-    e.preventDefault();
-    deferredPrompt = e;
-    canInstall.value = true;
-  });
-
-  window.addEventListener('appinstalled', () => {
-    canInstall.value = false;
-    deferredPrompt = null;
-  });
-});
-</script>
-
-<style scoped>
-.border-b {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-/* Improve rail mode appearance */
-.v-navigation-drawer--rail {
-  width: 72px !important;
-}
-
-.v-navigation-drawer--rail .v-list-item {
-  padding-inline-start: 16px !important;
-  padding-inline-end: 16px !important;
-  justify-content: center;
-  min-height: 48px;
-}
-
-.v-navigation-drawer--rail .v-list-item__prepend {
-  margin-inline-end: 0 !important;
-  justify-content: center;
-}
-
-.v-navigation-drawer--rail .v-list-item__content {
-  display: none;
-}
-
-.v-navigation-drawer--rail .v-list-item__append {
-  display: none;
-}
-
-/* Mobile responsiveness */
-@media (max-width: 960px) {
-  .v-navigation-drawer {
-    position: fixed !important;
-    z-index: 1004 !important;
-  }
-  
-  .v-main {
-    padding-left: 0 !important;
-  }
-}
-
-/* PWA optimizations */
-@media (display-mode: standalone) {
-  .v-app-bar {
-    padding-top: env(safe-area-inset-top);
-  }
-  
-  .v-navigation-drawer {
-    padding-bottom: env(safe-area-inset-bottom);
-  }
-}
-</style>
-```
-
-### 7.5 Create Dashboard Index Page (pages/dashboard/index.vue)
-
-```vue
-<template>
-  <v-container fluid class="pa-6">
-    <v-row>
-      <v-col cols="12">
-        <div class="d-flex align-center mb-6">
-          <div>
-            <h1 class="text-h4 font-weight-bold text-primary mb-2">
-              Welcome back, {{ user?.name || 'User' }}!
-            </h1>
-            <p class="text-body-1 text-grey-600">
-              Here's what's happening with your MonacoUSA Portal today.
-            </p>
-          </div>
-        </div>
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <!-- Quick Stats -->
-      <v-col cols="12" sm="6" md="3">
-        <v-card class="pa-4 text-center" color="primary" variant="tonal">
-          <v-icon size="48" class="mb-2">mdi-account-group</v-icon>
-          <div class="text-h5 font-weight-bold">{{ stats.users }}</div>
-          <div class="text-body-2">Active Users</div>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" sm="6" md="3">
-        <v-card class="pa-4 text-center" color="success" variant="tonal">
-          <v-icon size="48" class="mb-2">mdi-tools</v-icon>
-          <div class="text-h5 font-weight-bold">{{ stats.tools }}</div>
-          <div class="text-body-2">Available Tools</div>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" sm="6" md="3">
-        <v-card class="pa-4 text-center" color="info" variant="tonal">
-          <v-icon size="48" class="mb-2">mdi-file-document</v-icon>
-          <div class="text-h5 font-weight-bold">{{ stats.documents }}</div>
-          <div class="text-body-2">Documents</div>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" sm="6" md="3">
-        <v-card class="pa-4 text-center" color="warning" variant="tonal">
-          <v-icon size="48" class="mb-2">mdi-chart-line</v-icon>
-          <div class="text-h5 font-weight-bold">{{ stats.activity }}</div>
-          <div class="text-body-2">Recent Activity</div>
-        </v-card>
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <!-- Recent Activity -->
-      <v-col cols="12" md="8">
-        <v-card>
-          <v-card-title class="d-flex align-center">
-            <v-icon class="me-2">mdi-history</v-icon>
-            Recent Activity
-          </v-card-title>
-          <v-card-text>
-            <v-list>
-              <v-list-item
-                v-for="activity in recentActivity"
-                :key="activity.id"
-                :prepend-icon="activity.icon"
-                :title="activity.title"
-                :subtitle="activity.description"
-              >
-                <template v-slot:append>
-                  <div class="text-caption text-grey-600">
-                    {{ formatDate(activity.timestamp) }}
-                  </div>
-                </template>
-              </v-list-item>
-            </v-list>
-          </v-card-text>
-        </v-card>
-      </v-col>
-
-      <!-- Quick Actions -->
-      <v-col cols="12" md="4">
-        <v-card>
-          <v-card-title class="d-flex align-center">
-            <v-icon class="me-2">mdi-lightning-bolt</v-icon>
-            Quick Actions
-          </v-card-title>
-          <v-card-text>
-            <v-list>
-              <v-list-item
-                v-for="action in quickActions"
-                :key="action.title"
-                :prepend-icon="action.icon"
-                :title="action.title"
-                :subtitle="action.description"
-                :to="action.to"
-                class="rounded"
-              />
-            </v-list>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: 'dashboard',
-});
-
-const { user } = useAuth();
-
-// Mock data - replace with real API calls
-const stats = ref({
-  users: 42,
-  tools: 8,
-  documents: 156,
-  activity: 23,
-});
-
-const recentActivity = ref([
-  {
-    id: 1,
-    icon: 'mdi-account-plus',
-    title: 'New user registered',
-    description: 'John Doe joined the portal',
-    timestamp: new Date(Date.now() - 1000 * 60 * 30), // 30 minutes ago
-  },
-  {
-    id: 2,
-    icon: 'mdi-file-upload',
-    title: 'Document uploaded',
-    description: 'Annual report uploaded to documents',
-    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2), // 2 hours ago
-  },
-  {
-    id: 3,
-    icon: 'mdi-cog',
-    title: 'Settings updated',
-    description: 'Portal configuration modified',
-    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24), // 1 day ago
-  },
-]);
-
-const quickActions = ref([
-  {
-    icon: 'mdi-tools',
-    title: 'Browse Tools',
-    description: 'Access available tools',
-    to: '/dashboard/tools',
-  },
-  {
-    icon: 'mdi-file-upload',
-    title: 'Upload Document',
-    description: 'Add new files',
-    to: '/dashboard/files',
-  },
-  {
-    icon: 'mdi-cog',
-    title: 'Settings',
-    description: 'Configure your account',
-    to: '/dashboard/settings',
-  },
-]);
-
-const formatDate = (date: Date) => {
-  const now = new Date();
-  const diff = now.getTime() - date.getTime();
-  const minutes = Math.floor(diff / (1000 * 60));
-  const hours = Math.floor(diff / (1000 * 60 * 60));
-  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
-
-  if (minutes < 60) {
-    return `${minutes}m ago`;
-  } else if (hours < 24) {
-    return `${hours}h ago`;
-  } else {
-    return `${days}d ago`;
-  }
-};
-</script>
-```
-
-### 7.6 Create Tools Page Template (pages/dashboard/tools.vue)
-
-```vue
-<template>
-  <v-container fluid class="pa-6">
-    <v-row>
-      <v-col cols="12">
-        <div class="d-flex align-center justify-space-between mb-6">
-          <div>
-            <h1 class="text-h4 font-weight-bold text-primary mb-2">
-              Tools & Services
-            </h1>
-            <p class="text-body-1 text-grey-600">
-              Access your available tools and services
-            </p>
-          </div>
-        </div>
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col
-        v-for="tool in tools"
-        :key="tool.id"
-        cols="12"
-        sm="6"
-        md="4"
-        lg="3"
-      >
-        <v-card
-          class="h-100 d-flex flex-column"
-          :class="{ 'elevation-8': tool.featured }"
-          hover
-        >
-          <v-card-text class="flex-grow-1 d-flex flex-column">
-            <div class="text-center mb-4">
-              <v-avatar
-                :color="tool.color"
-                size="64"
-                class="mb-3"
-              >
-                <v-icon size="32" color="white">{{ tool.icon }}</v-icon>
-              </v-avatar>
-              <h3 class="text-h6 font-weight-bold mb-2">{{ tool.name }}</h3>
-              <p class="text-body-2 text-grey-600">{{ tool.description }}</p>
-            </div>
-
-            <v-spacer />
-
-            <div class="d-flex align-center justify-space-between">
-              <v-chip
-                :color="tool.status === 'active' ? 'success' : 'warning'"
-                size="small"
-                variant="tonal"
-              >
-                {{ tool.status }}
-              </v-chip>
-              <v-btn
-                :to="tool.link"
-                color="primary"
-                variant="tonal"
-                size="small"
-              >
-                Open
-              </v-btn>
-            </div>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-
-    <!-- Coming Soon Section -->
-    <v-row v-if="comingSoonTools.length > 0">
-      <v-col cols="12">
-        <h2 class="text-h5 font-weight-bold text-primary mb-4 mt-6">
-          Coming Soon
-        </h2>
-      </v-col>
-      <v-col
-        v-for="tool in comingSoonTools"
-        :key="tool.id"
-        cols="12"
-        sm="6"
-        md="4"
-        lg="3"
-      >
-        <v-card class="h-100" disabled>
-          <v-card-text class="text-center">
-            <v-avatar
-              color="grey-lighten-2"
-              size="64"
-              class="mb-3"
-            >
-              <v-icon size="32" color="grey">{{ tool.icon }}</v-icon>
-            </v-avatar>
-            <h3 class="text-h6 font-weight-bold mb-2 text-grey">{{ tool.name }}</h3>
-            <p class="text-body-2 text-grey-600">{{ tool.description }}</p>
-            <v-chip color="grey" size="small" variant="tonal" class="mt-2">
-              Coming Soon
-            </v-chip>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: 'dashboard',
-});
-
-// Available tools - customize this based on your needs
-const tools = ref([
-  {
-    id: 1,
-    name: 'File Manager',
-    description: 'Upload, organize, and manage your files',
-    icon: 'mdi-folder-multiple',
-    color: 'blue',
-    status: 'active',
-    featured: true,
-    link: '/dashboard/files',
-  },
-  {
-    id: 2,
-    name: 'User Management',
-    description: 'Manage users and permissions',
-    icon: 'mdi-account-group',
-    color: 'green',
-    status: 'active',
-    featured: false,
-    link: '/dashboard/users',
-  },
-  {
-    id: 3,
-    name: 'Analytics',
-    description: 'View detailed analytics and reports',
-    icon: 'mdi-chart-bar',
-    color: 'purple',
-    status: 'active',
-    featured: false,
-    link: '/dashboard/analytics',
-  },
-]);
-
-// Coming soon tools
-const comingSoonTools = ref([
-  {
-    id: 4,
-    name: 'API Manager',
-    description: 'Manage API keys and integrations',
-    icon: 'mdi-api',
-  },
-  {
-    id: 5,
-    name: 'Notifications',
-    description: 'Configure alerts and notifications',
-    icon: 'mdi-bell',
-  },
-]);
-</script>
-```
-
-## Phase 8: Health Check and Startup
-
-### 8.1 Create Health Check API (server/api/health.get.ts)
-
-```typescript
-export default defineEventHandler(async (event) => {
-  const checks = {
-    server: 'ok',
-    database: 'unknown',
-    storage: 'unknown',
-    auth: 'unknown',
-  };
-
-  try {
-    // Test NocoDB connection
-    const nocodb = createNocoDBClient();
-    await nocodb.findAll('test', { limit: 1 });
-    checks.database = 'ok';
-  } catch (error) {
-    checks.database = 'error';
-  }
-
-  try {
-    // Test MinIO connection
-    const minio = createMinIOClient();
-    await minio.ensureBucket();
-    checks.storage = 'ok';
-  } catch (error) {
-    checks.storage = 'error';
-  }
-
-  try {
-    // Test Keycloak connection
-    const keycloak = createKeycloakClient();
-    // Simple connectivity test - you might want to implement a proper health check
-    checks.auth = 'ok';
-  } catch (error) {
-    checks.auth = 'error';
-  }
-
-  const allHealthy = Object.values(checks).every(status => status === 'ok');
-
-  return {
-    status: allHealthy ? 'healthy' : 'degraded',
-    timestamp: new Date().toISOString(),
-    checks,
-  };
-});
-```
-
-### 8.2 Create Startup Plugin (plugins/01.auth-check.client.ts)
-
-```typescript
-export default defineNuxtPlugin(async () => {
-  const { checkAuth } = useAuth();
-  
-  // Check authentication status on app startup
-  await checkAuth();
-});
-```
-
-## Phase 9: TypeScript Types
-
-### 9.1 Create Type Definitions (utils/types.ts)
-
-```typescript
-export interface User {
-  id: string;
-  email: string;
-  name: string;
-  groups?: string[];
-  tier?: string;
-}
-
-export interface AuthState {
-  authenticated: boolean;
-  user: User | null;
-  groups: string[];
-}
-
-export interface ApiResponse<T = any> {
-  success: boolean;
-  data?: T;
-  error?: string;
-  message?: string;
-}
-
-export interface FileUpload {
-  fieldName: string;
-  fileName: string;
-  originalName: string;
-  size: number;
-  contentType: string;
-}
-
-export interface DatabaseRecord {
-  id: string;
-  created_at: string;
-  updated_at: string;
-  [key: string]: any;
-}
-
-export interface HealthCheck {
-  status: 'healthy' | 'degraded' | 'unhealthy';
-  timestamp: string;
-  checks: {
-    server: string;
-    database: string;
-    storage: string;
-    auth: string;
-  };
-}
-```
-
-## Phase 10: Final Setup and Testing
-
-### 10.1 Create Main App File (app.vue)
-
-```vue
-<template>
-  <NuxtLayout>
-    <NuxtPage />
-  </NuxtLayout>
-</template>
-
-<script setup lang="ts">
-// Global app setup
-useHead({
-  titleTemplate: (titleChunk) => {
-    return titleChunk ? `${titleChunk} • MonacoUSA Portal` : 'MonacoUSA Portal';
-  },
-});
-</script>
-```
-
-### 10.2 Create Index Page (pages/index.vue)
-
-```vue
-<template>
-  <div>
-    <!-- Redirect to dashboard if authenticated, otherwise to login -->
-  </div>
-</template>
-
-<script setup lang="ts">
-const { authenticated } = useAuth();
-
-// Redirect based on authentication status
-await navigateTo(authenticated.value ? '/dashboard' : '/login');
-</script>
-```
-
-### 10.3 Create README.md
-
-```markdown
-# MonacoUSA Portal
-
-A modern, responsive portal built with Nuxt 3, Vuetify, and Keycloak authentication.
-
-## Features
-
-- 🔐 **Keycloak Authentication** - Secure OAuth2/OIDC authentication
-- 📱 **Mobile Responsive** - Works perfectly on all devices
-- 🚀 **PWA Support** - Installable progressive web app
-- 🎨 **Modern UI** - Beautiful Vuetify 3 interface with MonacoUSA branding
-- 📁 **File Storage** - MinIO S3-compatible file storage
-- 🗄️ **Database** - NocoDB for flexible data management
-- 🔧 **Modular** - Easy to extend with new tools and features
-
-## Tech Stack
-
-- **Framework**: Nuxt 3 with Vue 3
-- **UI Library**: Vuetify 3
-- **Authentication**: Keycloak (OAuth2/OIDC)
-- **Database**: NocoDB
-- **File Storage**: MinIO (S3-compatible)
-- **PWA**: Vite PWA plugin
-- **TypeScript**: Full TypeScript support
-
-## Quick Start
-
-1. **Clone and Install**
-   ```bash
-   git clone <repository-url>
-   cd monacousa-portal
-   npm install
-   ```
-
-2. **Environment Setup**
-   ```bash
-   cp .env.example .env
-   # Edit .env with your configuration
-   ```
-
-3. **Development**
-   ```bash
-   npm run dev
-   ```
-
-4. **Production Build**
-   ```bash
-   npm run build
-   npm run preview
-   ```
-
-## Configuration
-
-### Environment Variables
-
-See `.env.example` for all required environment variables:
-
-- **Keycloak**: Authentication server configuration
-- **NocoDB**: Database connection settings
-- **MinIO**: File storage configuration
-- **Security**: Encryption keys and session secrets
-
-### Keycloak Setup
-
-1. Create a new client in your Keycloak realm
-2. Set client type to "Confidential"
-3. Configure redirect URIs:
-   - `https://monacousa.org/auth/callback`
-   - `http://localhost:3000/auth/callback` (development)
-4. Enable "Standard Flow" authentication
-5. Set up user attributes and groups as needed
-
-### NocoDB Setup
-
-1. Set up your NocoDB instance
-2. Create a new base/project
-3. Generate an API token
-4. Configure tables as needed for your tools
-
-### MinIO Setup
-
-1. Set up MinIO server
-2. Create access keys
-3. Configure bucket policies
-4. Set CORS policies for web access
-
-## Project Structure
-
-```
-monacousa-portal/
-├── components/          # Vue components
-├── composables/         # Vue composables
-├── layouts/            # Nuxt layouts
-├── middleware/         # Route middleware
-├── pages/              # Application pages
-│   ├── auth/           # Authentication pages
-│   └── dashboard/      # Dashboard pages
-├── plugins/            # Nuxt plugins
-├── public/             # Static assets
-├── server/             # Server-side code
-│   ├── api/            # API routes
-│   ├── utils/          # Server utilities
-│   └── plugins/        # Server plugins
-├── utils/              # Shared utilities
-└── docs/               # Documentation
-```
-
-## Development
-
-### Adding New Tools
-
-1. Create a new page in `pages/dashboard/`
-2. Add navigation item to dashboard layout
-3. Implement API routes in `server/api/` if needed
-4. Add database tables in NocoDB if required
-
-### API Usage
-
-The portal provides RESTful APIs for data operations:
-
-```typescript
-// Get all records from a table
-const data = await $fetch('/api/data/users');
-
-// Get single record
-const user = await $fetch('/api/data/users/123');
-
-// Create new record
-const newUser = await $fetch('/api/data/users', {
-  method: 'POST',
-  body: { name: 'John Doe', email: 'john@example.com' }
-});
-
-// Update record
-const updatedUser = await $fetch('/api/data/users/123', {
-  method: 'PATCH',
-  body: { name: 'Jane Doe' }
-});
-
-// Delete record
-await $fetch('/api/data/users/123', { method: 'DELETE' });
-```
-
-### File Upload
-
-```typescript
-// Upload files
-const formData = new FormData();
-formData.append('file', file);
-
-const result = await $fetch('/api/files/upload', {
-  method: 'POST',
-  body: formData
-});
-```
-
-## Deployment
-
-### Docker Deployment
-
-```dockerfile
-FROM node:18-alpine
-
-WORKDIR /app
-COPY package*.json ./
-RUN npm ci --only=production
-
-COPY . .
-RUN npm run build
-
-EXPOSE 3000
-CMD ["npm", "run", "preview"]
-```
-
-### Environment Variables for Production
-
-Ensure all environment variables are properly set:
-- Use strong encryption keys
-- Configure proper domain names
-- Set up SSL certificates
-- Configure firewall rules
-
-## Health Checks
-
-The portal includes health check endpoints:
-
-- `GET /api/health` - Overall system health
-- Check database connectivity
-- Check file storage connectivity
-- Check authentication service
-
-## Security
-
-- All sessions are encrypted
-- HTTPS required in production
-- CSRF protection enabled
-- Secure cookie settings
-- Input validation on all APIs
-
-## Support
-
-For issues and questions:
-1. Check the documentation
-2. Review environment configuration
-3. Check health endpoints
-4. Review server logs
-
-## License
-
-[Your License Here]
-```
-
-### 10.4 Create TypeScript Configuration (tsconfig.json)
-
-```json
-{
-  "extends": "./.nuxt/tsconfig.json"
-}
-```
-
-### 10.5 Create Git Ignore (.gitignore)
-
-```gitignore
-# Nuxt dev/build outputs
-.output
-.nuxt
-.nitro
-.cache
-dist
-
-# Node dependencies
-node_modules
-
-# Logs
-*.log*
-
-# Misc
-.DS_Store
-.fleet
-.idea
-
-# Local env files
-.env
-.env.*
-!.env.example
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-```
-
-## Phase 11: Testing and Verification
-
-### 11.1 Development Testing
-
-After setting up the project, test the following:
-
-1. **Authentication Flow**
-   ```bash
-   npm run dev
-   # Visit http://localhost:3000
-   # Test login/logout flow
-   ```
-
-2. **API Endpoints**
-   ```bash
-   # Test health check
-   curl http://localhost:3000/api/health
-   
-   # Test authentication session
-   curl http://localhost:3000/api/auth/session
-   ```
-
-3. **File Upload**
-   - Test file upload functionality
-   - Verify MinIO storage
-   - Check file download
-
-4. **Database Operations**
-   - Test CRUD operations
-   - Verify NocoDB integration
-   - Check data persistence
-
-### 11.2 Production Checklist
-
-Before deploying to production:
-
-- [ ] All environment variables configured
-- [ ] SSL certificates installed
-- [ ] Keycloak client properly configured
-- [ ] NocoDB accessible and secured
-- [ ] MinIO bucket policies configured
-- [ ] Health checks passing
-- [ ] PWA manifest and icons in place
-- [ ] Error handling tested
-- [ ] Mobile responsiveness verified
-
-## Phase 12: Deployment Guide
-
-### 12.1 Server Requirements
-
-- Node.js 18+
-- SSL certificate
-- Reverse proxy (nginx/Apache)
-- Firewall configuration
-
-### 12.2 Environment Setup
-
-1. **Production Environment Variables**
-   ```bash
-   # Copy and configure
-   cp .env.example .env.production
-   ```
-
-2. **Build Application**
-   ```bash
-   npm run build
-   ```
-
-3. **Start Production Server**
-   ```bash
-   npm run preview
-   # or use PM2 for process management
-   pm2 start ecosystem.config.js
-   ```
-
-### 12.3 Nginx Configuration Example
-
-```nginx
-server {
-    listen 443 ssl http2;
-    server_name monacousa.org;
-
-    ssl_certificate /path/to/certificate.crt;
-    ssl_certificate_key /path/to/private.key;
-
-    location / {
-        proxy_pass http://localhost:3000;
-        proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection 'upgrade';
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-        proxy_cache_bypass $http_upgrade;
-    }
-}
-```
-
-## Conclusion
-
-This implementation guide provides a complete foundation for the MonacoUSA Portal. The portal includes:
-
-✅ **Complete Authentication System** with Keycloak integration
-✅ **Responsive Dashboard** that works on all devices
-✅ **File Storage System** with MinIO integration
-✅ **Database Integration** with NocoDB
-✅ **PWA Support** for mobile installation
-✅ **Modern UI** with Vuetify and MonacoUSA branding
-✅ **Modular Architecture** for easy extension
-✅ **Production-Ready** configuration and deployment guide
-
-The foundation is ready for you to build your custom tools and features on top of this solid, proven architecture.
diff --git a/KEYCLOAK_CUSTOM_LOGIN_IMPLEMENTATION_GUIDE.md b/KEYCLOAK_CUSTOM_LOGIN_IMPLEMENTATION_GUIDE.md
deleted file mode 100644
index 00c1feb..0000000
--- a/KEYCLOAK_CUSTOM_LOGIN_IMPLEMENTATION_GUIDE.md
+++ /dev/null
@@ -1,1482 +0,0 @@
-# 🔐 Keycloak Custom Login Implementation Guide
-
-## 📋 **Table of Contents**
-
-1. [Overview & Architecture](#overview--architecture)
-2. [Keycloak Configuration](#keycloak-configuration)
-3. [Environment Setup](#environment-setup)
-4. [Server-Side Implementation](#server-side-implementation)
-5. [Client-Side Implementation](#client-side-implementation)
-6. [Authentication Flow](#authentication-flow)
-7. [Session Management](#session-management)
-8. [Security Implementation](#security-implementation)
-9. [Middleware System](#middleware-system)
-10. [Error Handling](#error-handling)
-11. [Testing & Debugging](#testing--debugging)
-12. [Production Considerations](#production-considerations)
-13. [Troubleshooting](#troubleshooting)
-
-## 🏗️ **Overview & Architecture**
-
-### **Why Custom Login Instead of Keycloak Hosted Pages**
-
-**Benefits:**
-- ✅ **Complete UI Control**: Custom branding, responsive design, mobile optimization
-- ✅ **Better UX**: No redirects to external domains, seamless user experience  
-- ✅ **Integration**: Easy integration with existing Nuxt/Vue components
-- ✅ **Mobile Compatibility**: Full control over mobile browser behavior
-- ✅ **Performance**: No external redirects, faster login experience
-
-**Trade-offs:**
-- ⚠️ **More Complex**: Must handle security, session management, token validation
-- ⚠️ **Security Responsibility**: Must implement proper rate limiting, CSRF protection
-- ⚠️ **Maintenance**: More code to maintain vs. Keycloak's hosted pages
-
-### **Architecture Overview**
-
-```mermaid
-graph TD
-    A[Client Browser] --> B[Nuxt App]
-    B --> C[Custom Login Page]
-    C --> D[Server API Route]
-    D --> E[Keycloak Token Endpoint]
-    E --> F[Return Access Token]
-    F --> D
-    D --> G[Create Encrypted Session]
-    G --> H[Set HTTP-Only Cookie]
-    H --> B
-    B --> I[Authenticated App]
-```
-
-### **Tech Stack**
-
-- **Frontend**: Nuxt 3 + Vue 3 + Vuetify 3
-- **Backend**: Nuxt 3 Server Routes
-- **Authentication**: Keycloak (Resource Owner Password Credentials flow)
-- **Session**: Encrypted server-side session storage
-- **Security**: Rate limiting, input validation, CSRF protection
-
-## 🔧 **Keycloak Configuration**
-
-### **1. Client Configuration**
-
-In Keycloak Admin Console:
-
-```javascript
-// Client Settings
-{
-  clientId: "monacousa-portal",
-  clientType: "confidential", // Important: Must be confidential
-  standardFlowEnabled: false, // Disable standard flow
-  directAccessGrantsEnabled: true, // Enable direct access grants
-  serviceAccountsEnabled: false,
-  publicClient: false,
-  
-  // Valid Redirect URIs (for OAuth fallback if needed)
-  redirectUris: [
-    "https://yourdomain.com/auth/callback",
-    "http://localhost:3000/auth/callback" // Dev only
-  ],
-  
-  // Root URL
-  rootUrl: "https://yourdomain.com",
-  adminUrl: "https://yourdomain.com",
-  baseUrl: "https://yourdomain.com",
-  
-  // Advanced Settings
-  accessTokenLifespan: "15 minutes",
-  ssoSessionIdleTimeout: "30 minutes",
-  ssoSessionMaxLifespan: "12 hours"
-}
-```
-
-### **2. Required Scopes**
-
-```javascript
-// Default Client Scopes (include these)
-[
-  "openid",     // OpenID Connect
-  "profile",    // User profile information  
-  "email",      // Email address
-  "roles",      // User roles/groups
-  "groups"      // User groups (if using)
-]
-```
-
-### **3. User Groups/Roles Setup**
-
-```javascript
-// Example Group Structure
-{
-  groups: [
-    {
-      name: "admin",
-      description: "System administrators"
-    },
-    {
-      name: "board", 
-      description: "Board members"
-    },
-    {
-      name: "user",
-      description: "Regular users"
-    }
-  ]
-}
-```
-
-### **4. Keycloak Client Secret**
-
-```bash
-# In Keycloak Admin Console:
-# Clients → [Your Client] → Credentials → Client Secret
-# Copy this secret for environment variables
-```
-
-## 🌐 **Environment Setup**
-
-### **Environment Variables**
-
-```bash
-# .env
-# Keycloak Configuration
-NUXT_KEYCLOAK_ISSUER=https://auth.yourdomain.com/realms/your-realm
-NUXT_KEYCLOAK_CLIENT_ID=your-client-id
-NUXT_KEYCLOAK_CLIENT_SECRET=your-client-secret
-NUXT_KEYCLOAK_CALLBACK_URL=https://yourdomain.com/auth/callback
-
-# Session Security
-NUXT_SESSION_SECRET=your-48-character-session-secret-key-here-123456
-NUXT_ENCRYPTION_KEY=your-32-character-encryption-key-here12
-
-# Public Configuration
-NUXT_PUBLIC_DOMAIN=yourdomain.com
-```
-
-### **Nuxt Configuration**
-
-```typescript
-// nuxt.config.ts
-export default defineNuxtConfig({
-  runtimeConfig: {
-    // Private (server-side only)
-    keycloak: {
-      issuer: process.env.NUXT_KEYCLOAK_ISSUER,
-      clientId: process.env.NUXT_KEYCLOAK_CLIENT_ID,
-      clientSecret: process.env.NUXT_KEYCLOAK_CLIENT_SECRET,
-      callbackUrl: process.env.NUXT_KEYCLOAK_CALLBACK_URL
-    },
-    sessionSecret: process.env.NUXT_SESSION_SECRET,
-    encryptionKey: process.env.NUXT_ENCRYPTION_KEY,
-    
-    // Public (client-side accessible)
-    public: {
-      domain: process.env.NUXT_PUBLIC_DOMAIN
-    }
-  },
-  
-  // SSR Configuration for auth
-  ssr: false, // or configure properly for SSR
-  
-  // Security headers
-  nitro: {
-    experimental: {
-      wasm: true
-    }
-  }
-})
-```
-
-## 🖥️ **Server-Side Implementation**
-
-### **1. Direct Login API Route**
-
-```typescript
-// server/api/auth/direct-login.post.ts
-export default defineEventHandler(async (event) => {
-  try {
-    const { username, password, rememberMe } = await readBody(event);
-    const config = useRuntimeConfig();
-    
-    // Input validation
-    if (!username || !password) {
-      throw createError({
-        statusCode: 400,
-        statusMessage: 'Username and password are required'
-      });
-    }
-
-    // Rate limiting
-    const clientIP = getClientIP(event);
-    if (!checkRateLimit(clientIP)) {
-      throw createError({
-        statusCode: 429,
-        statusMessage: 'Too many login attempts'
-      });
-    }
-
-    // Direct authentication with Keycloak
-    const tokenResponse = await fetch(`${config.keycloak.issuer}/protocol/openid-connect/token`, {
-      method: 'POST',
-      headers: { 
-        'Content-Type': 'application/x-www-form-urlencoded',
-        'User-Agent': 'YourApp/1.0'
-      },
-      body: new URLSearchParams({
-        grant_type: 'password',
-        client_id: config.keycloak.clientId,
-        client_secret: config.keycloak.clientSecret,
-        username,
-        password,
-        scope: 'openid email profile roles'
-      })
-    });
-
-    if (!tokenResponse.ok) {
-      throw createError({
-        statusCode: 401,
-        statusMessage: 'Invalid credentials'
-      });
-    }
-
-    const tokens = await tokenResponse.json();
-
-    // Get user info from Keycloak
-    const userResponse = await fetch(`${config.keycloak.issuer}/protocol/openid-connect/userinfo`, {
-      headers: { 
-        'Authorization': `Bearer ${tokens.access_token}`
-      }
-    });
-
-    const userInfo = await userResponse.json();
-
-    // Extract user groups and determine tier
-    const groups = extractUserGroups(tokens, userInfo);
-    const userTier = determineTier(groups);
-
-    // Create session
-    const sessionData = {
-      user: {
-        id: userInfo.sub,
-        email: userInfo.email,
-        name: userInfo.name,
-        firstName: userInfo.given_name,
-        lastName: userInfo.family_name,
-        tier: userTier,
-        groups: groups
-      },
-      tokens: {
-        accessToken: tokens.access_token,
-        refreshToken: tokens.refresh_token,
-        expiresAt: Date.now() + (tokens.expires_in * 1000)
-      },
-      rememberMe: !!rememberMe,
-      createdAt: Date.now(),
-      lastActivity: Date.now()
-    };
-
-    // Create encrypted session cookie
-    const sessionManager = createSessionManager();
-    const cookieString = sessionManager.createSession(sessionData, !!rememberMe);
-    
-    // Set secure cookie
-    const maxAge = !!rememberMe ? 60 * 60 * 24 * 30 : 60 * 60 * 24 * 7;
-    const isProduction = process.env.NODE_ENV === 'production';
-    
-    setCookie(event, 'your-session-name', cookieString.split('=')[1], {
-      httpOnly: true,
-      secure: isProduction,
-      sameSite: 'lax',
-      maxAge,
-      path: '/'
-    });
-
-    return {
-      success: true,
-      redirectTo: '/dashboard',
-      user: {
-        email: userInfo.email,
-        name: userInfo.name,
-        tier: userTier
-      }
-    };
-
-  } catch (error) {
-    // Error handling
-    throw createError({
-      statusCode: error.statusCode || 500,
-      statusMessage: error.statusMessage || 'Authentication failed'
-    });
-  }
-});
-```
-
-### **2. Session Validation API**
-
-```typescript
-// server/api/auth/session.get.ts
-export default defineEventHandler(async (event) => {
-  try {
-    const sessionManager = createSessionManager();
-    const sessionData = sessionManager.getSession(event);
-    
-    if (!sessionData || !sessionData.user) {
-      return {
-        authenticated: false,
-        user: null
-      };
-    }
-    
-    // Check if token needs refresh
-    if (sessionData.tokens.expiresAt < Date.now() + 60000) { // 1 minute buffer
-      try {
-        const refreshedTokens = await refreshKeycloakToken(sessionData.tokens.refreshToken);
-        
-        // Update session with new tokens
-        sessionData.tokens = {
-          accessToken: refreshedTokens.access_token,
-          refreshToken: refreshedTokens.refresh_token,
-          expiresAt: Date.now() + (refreshedTokens.expires_in * 1000)
-        };
-        
-        sessionManager.updateSession(event, sessionData);
-      } catch (refreshError) {
-        console.warn('Token refresh failed:', refreshError);
-        // Session is invalid, force logout
-        return {
-          authenticated: false,
-          user: null
-        };
-      }
-    }
-    
-    // Update last activity
-    sessionData.lastActivity = Date.now();
-    sessionManager.updateSession(event, sessionData);
-    
-    return {
-      authenticated: true,
-      user: sessionData.user
-    };
-    
-  } catch (error) {
-    console.error('Session validation error:', error);
-    return {
-      authenticated: false,
-      user: null
-    };
-  }
-});
-```
-
-### **3. Session Management Utilities**
-
-```typescript
-// server/utils/session.ts
-import crypto from 'crypto';
-
-interface SessionData {
-  user: User;
-  tokens: {
-    accessToken: string;
-    refreshToken: string;
-    expiresAt: number;
-  };
-  rememberMe: boolean;
-  createdAt: number;
-  lastActivity: number;
-}
-
-export const createSessionManager = () => {
-  const config = useRuntimeConfig();
-  
-  const encryptData = (data: any): string => {
-    const cipher = crypto.createCipher('aes-256-cbc', config.encryptionKey);
-    let encrypted = cipher.update(JSON.stringify(data), 'utf8', 'hex');
-    encrypted += cipher.final('hex');
-    return encrypted;
-  };
-
-  const decryptData = (encryptedData: string): any => {
-    try {
-      const decipher = crypto.createDecipher('aes-256-cbc', config.encryptionKey);
-      let decrypted = decipher.update(encryptedData, 'hex', 'utf8');
-      decrypted += decipher.final('utf8');
-      return JSON.parse(decrypted);
-    } catch (error) {
-      return null;
-    }
-  };
-
-  const createSession = (sessionData: SessionData, rememberMe: boolean): string => {
-    const sessionId = crypto.randomUUID();
-    const encryptedData = encryptData(sessionData);
-    
-    // Store in server-side storage (memory, database, Redis, etc.)
-    serverSessionStorage.set(sessionId, encryptedData);
-    
-    return `session-id=${sessionId}`;
-  };
-
-  const getSession = (event: any): SessionData | null => {
-    const sessionId = getCookie(event, 'your-session-name');
-    if (!sessionId) return null;
-    
-    const encryptedData = serverSessionStorage.get(sessionId);
-    if (!encryptedData) return null;
-    
-    return decryptData(encryptedData);
-  };
-
-  return {
-    createSession,
-    getSession,
-    updateSession: (event: any, sessionData: SessionData) => {
-      const sessionId = getCookie(event, 'your-session-name');
-      if (sessionId) {
-        const encryptedData = encryptData(sessionData);
-        serverSessionStorage.set(sessionId, encryptedData);
-      }
-    },
-    destroySession: (event: any) => {
-      const sessionId = getCookie(event, 'your-session-name');
-      if (sessionId) {
-        serverSessionStorage.delete(sessionId);
-        deleteCookie(event, 'your-session-name');
-      }
-    }
-  };
-};
-```
-
-## 🎨 **Client-Side Implementation**
-
-### **1. Authentication Composable**
-
-```typescript
-// composables/useAuth.ts
-export const useAuth = () => {
-  // Use useState for SSR compatibility
-  const user = useState<User | null>('auth.user', () => null);
-  const isAuthenticated = computed(() => !!user.value);
-  const loading = ref(false);
-  const error = ref<string | null>(null);
-
-  // Tier-based computed properties
-  const userTier = computed(() => user.value?.tier || 'user');
-  const isUser = computed(() => user.value?.tier === 'user');
-  const isBoard = computed(() => user.value?.tier === 'board');
-  const isAdmin = computed(() => user.value?.tier === 'admin');
-
-  // Login method
-  const login = async (credentials: LoginCredentials) => {
-    loading.value = true;
-    error.value = null;
-    
-    try {
-      const response = await $fetch<LoginResponse>('/api/auth/direct-login', {
-        method: 'POST',
-        body: credentials,
-        timeout: 30000
-      });
-      
-      if (response.success) {
-        // Wait for cookie to be set
-        await new Promise(resolve => setTimeout(resolve, 200));
-        
-        // Verify session was created properly
-        let sessionSuccess = false;
-        let attempts = 0;
-        const maxAttempts = 3;
-        
-        while (!sessionSuccess && attempts < maxAttempts) {
-          attempts++;
-          sessionSuccess = await checkAuth();
-          
-          if (!sessionSuccess && attempts < maxAttempts) {
-            await new Promise(resolve => setTimeout(resolve, 500));
-          }
-        }
-        
-        if (sessionSuccess) {
-          return { 
-            success: true, 
-            redirectTo: response.redirectTo || '/dashboard' 
-          };
-        }
-      }
-      
-      return { success: false, error: 'Login failed' };
-    } catch (err: any) {
-      const errorMessage = getErrorMessage(err);
-      error.value = errorMessage;
-      return { success: false, error: errorMessage };
-    } finally {
-      loading.value = false;
-    }
-  };
-
-  // Check authentication status
-  const checkAuth = async (): Promise<boolean> => {
-    try {
-      const response = await $fetch<SessionResponse>('/api/auth/session');
-      
-      if (response.authenticated && response.user) {
-        user.value = response.user;
-        return true;
-      } else {
-        user.value = null;
-        return false;
-      }
-    } catch (err) {
-      user.value = null;
-      return false;
-    }
-  };
-
-  // Logout method
-  const logout = async () => {
-    try {
-      await $fetch('/api/auth/logout', { method: 'POST' });
-      user.value = null;
-      await navigateTo('/login');
-    } catch (err) {
-      user.value = null;
-      await navigateTo('/login');
-    }
-  };
-
-  return {
-    user: readonly(user),
-    isAuthenticated,
-    loading: readonly(loading),
-    error: readonly(error),
-    userTier,
-    isUser,
-    isBoard,
-    isAdmin,
-    login,
-    logout,
-    checkAuth
-  };
-};
-```
-
-### **2. Custom Login Page**
-
-```vue
-<!-- pages/login.vue -->
-<template>
-  <div class="login-container">
-    <v-container fluid class="fill-height">
-      <v-row class="fill-height" justify="center" align="center">
-        <v-col cols="12" sm="8" md="6" lg="4" xl="3">
-          <v-card class="login-card" elevation="24">
-            <v-card-text class="pa-8">
-              <!-- Logo and Branding -->
-              <div class="text-center mb-8">
-                <v-img 
-                  src="/logo.png" 
-                  width="120" 
-                  height="120"
-                  class="mx-auto mb-4" 
-                  alt="Company Logo"
-                />
-                <h1 class="text-h4 font-weight-bold mb-2">
-                  Welcome Back
-                </h1>
-                <p class="text-body-1 text-medium-emphasis">
-                  Sign in to your portal
-                </p>
-              </div>
-
-              <!-- Login Form -->
-              <v-form @submit.prevent="handleLogin" ref="loginForm">
-                <v-text-field
-                  v-model="credentials.username"
-                  label="Username or Email"
-                  prepend-inner-icon="mdi-account"
-                  variant="outlined"
-                  :error-messages="errors.username"
-                  :disabled="loading"
-                  class="mb-3"
-                  required
-                />
-                
-                <v-text-field
-                  v-model="credentials.password"
-                  :type="showPassword ? 'text' : 'password'"
-                  label="Password"
-                  prepend-inner-icon="mdi-lock"
-                  :append-inner-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
-                  @click:append-inner="showPassword = !showPassword"
-                  variant="outlined"
-                  :error-messages="errors.password"
-                  :disabled="loading"
-                  class="mb-3"
-                  required
-                />
-
-                <div class="d-flex justify-space-between align-center mb-6">
-                  <v-checkbox 
-                    v-model="credentials.rememberMe" 
-                    label="Remember me"
-                    density="compact"
-                    :disabled="loading"
-                  />
-                </div>
-
-                <!-- Error Alert -->
-                <v-alert
-                  v-if="loginError"
-                  type="error"
-                  variant="tonal"
-                  class="mb-4"
-                  closable
-                  @click:close="loginError = ''"
-                >
-                  {{ loginError }}
-                </v-alert>
-
-                <!-- Login Button -->
-                <v-btn
-                  type="submit"
-                  color="primary"
-                  size="large"
-                  block
-                  :loading="loading"
-                  :disabled="!isFormValid"
-                  class="mb-4"
-                >
-                  <v-icon left>mdi-login</v-icon>
-                  Sign In
-                </v-btn>
-              </v-form>
-            </v-card-text>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-container>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-  middleware: 'guest'  // Prevents authenticated users from accessing login
-});
-
-const { login, loading: authLoading, error: authError } = useAuth();
-
-// Form state
-const credentials = ref({
-  username: '',
-  password: '',
-  rememberMe: false
-});
-
-const showPassword = ref(false);
-const loginError = ref('');
-const errors = ref({
-  username: '',
-  password: ''
-});
-
-const loading = computed(() => authLoading.value);
-const isFormValid = computed(() => {
-  return credentials.value.username.length > 0 && 
-         credentials.value.password.length > 0 && 
-         !loading.value;
-});
-
-// Form validation
-const validateForm = () => {
-  errors.value = { username: '', password: '' };
-  let isValid = true;
-
-  if (!credentials.value.username || credentials.value.username.length < 2) {
-    errors.value.username = 'Username must be at least 2 characters';
-    isValid = false;
-  }
-
-  if (!credentials.value.password || credentials.value.password.length < 6) {
-    errors.value.password = 'Password must be at least 6 characters';
-    isValid = false;
-  }
-
-  return isValid;
-};
-
-// Handle login submission
-const handleLogin = async () => {
-  if (!validateForm()) return;
-
-  loginError.value = '';
-
-  try {
-    const result = await login({
-      username: credentials.value.username,
-      password: credentials.value.password,
-      rememberMe: credentials.value.rememberMe
-    });
-
-    if (result.success) {
-      await navigateTo(result.redirectTo || '/dashboard');
-    } else {
-      loginError.value = result.error || 'Login failed. Please check your credentials.';
-    }
-  } catch (error: any) {
-    loginError.value = authError.value || 'Login failed. Please try again.';
-  }
-};
-
-// Auto-focus username field
-onMounted(() => {
-  nextTick(() => {
-    const usernameField = document.querySelector('input[type="text"]') as HTMLInputElement;
-    if (usernameField) {
-      usernameField.focus();
-    }
-  });
-});
-</script>
-```
-
-### **3. Auth Plugin (Initialize Auth State)**
-
-```typescript
-// plugins/01.auth-check.client.ts
-export default defineNuxtPlugin(async () => {
-  const { checkAuth } = useAuth();
-  
-  // Check authentication status on app startup
-  await checkAuth();
-});
-```
-
-## 🛡️ **Security Implementation**
-
-### **1. Rate Limiting**
-
-```typescript
-// server/utils/security.ts
-const loginAttempts = new Map<string, { count: number; lastAttempt: number }>();
-const blockedIPs = new Map<string, number>();
-
-export const checkRateLimit = (ip: string): { allowed: boolean; attemptsLeft: number } => {
-  const now = Date.now();
-  const maxAttempts = 5;
-  const windowMs = 15 * 60 * 1000; // 15 minutes
-  const blockDurationMs = 60 * 60 * 1000; // 1 hour
-
-  // Check if IP is blocked
-  const blockedUntil = blockedIPs.get(ip);
-  if (blockedUntil && now < blockedUntil) {
-    return { allowed: false, attemptsLeft: 0 };
-  }
-
-  // Clear expired blocks
-  if (blockedUntil && now >= blockedUntil) {
-    blockedIPs.delete(ip);
-  }
-
-  // Check current attempts
-  const attempts = loginAttempts.get(ip);
-  if (attempts && (now - attempts.lastAttempt) > windowMs) {
-    loginAttempts.delete(ip);
-    return { allowed: true, attemptsLeft: maxAttempts };
-  }
-
-  const currentCount = attempts?.count || 0;
-  if (currentCount >= maxAttempts) {
-    blockedIPs.set(ip, now + blockDurationMs);
-    return { allowed: false, attemptsLeft: 0 };
-  }
-
-  return { allowed: true, attemptsLeft: maxAttempts - currentCount };
-};
-
-export const recordFailedAttempt = (ip: string): void => {
-  const now = Date.now();
-  const attempts = loginAttempts.get(ip);
-  
-  if (attempts) {
-    attempts.count += 1;
-    attempts.lastAttempt = now;
-  } else {
-    loginAttempts.set(ip, { count: 1, lastAttempt: now });
-  }
-};
-```
-
-### **2. Input Validation**
-
-```typescript
-// server/utils/validation.ts
-export const validateLoginInput = (username: string, password: string): string[] => {
-  const errors: string[] = [];
-  
-  // Username validation
-  if (!username || typeof username !== 'string') {
-    errors.push('Username is required');
-  } else if (username.length < 2) {
-    errors.push('Username must be at least 2 characters');
-  } else if (username.length > 100) {
-    errors.push('Username is too long');
-  } else if (!/^[a-zA-Z0-9@._-]+$/.test(username)) {
-    errors.push('Username contains invalid characters');
-  }
-  
-  // Password validation
-  if (!password || typeof password !== 'string') {
-    errors.push('Password is required');
-  } else if (password.length < 6) {
-    errors.push('Password must be at least 6 characters');
-  } else if (password.length > 200) {
-    errors.push('Password is too long');
-  }
-  
-  return errors;
-};
-
-export const getClientIP = (event: any): string => {
-  const headers = getHeaders(event);
-  return (
-    headers['x-forwarded-for']?.split(',')[0]?.trim() ||
-    headers['x-real-ip'] ||
-    headers['x-client-ip'] ||
-    headers['cf-connecting-ip'] ||
-    'unknown'
-  );
-};
-```
-
-### **3. Session Security**
-
-```typescript
-// Secure cookie configuration
-setCookie(event, 'session-name', sessionId, {
-  httpOnly: true,           // Prevent XSS attacks
-  secure: isProduction,     // HTTPS only in production
-  sameSite: 'lax',         // CSRF protection
-  maxAge: rememberMe ? 2592000 : 604800, // 30 days vs 7 days
-  path: '/',               // Available site-wide
-  domain: process.env.NUXT_PUBLIC_DOMAIN ? `.${process.env.NUXT_PUBLIC_DOMAIN}` : undefined
-});
-```
-
-## 🔄 **Authentication Flow**
-
-### **Complete Authentication Flow Diagram**
-
-```mermaid
-sequenceDiagram
-    participant U as User
-    participant C as Client App
-    participant S as Server API
-    participant K as Keycloak
-    participant D as Database
-
-    U->>C: Navigate to /login
-    C->>C: Guest middleware (allow if not authenticated)
-    C->>U: Show login form
-
-    U->>C: Submit credentials
-    C->>S: POST /api/auth/direct-login
-    S->>S: Validate input & rate limiting
-    S->>K: POST /token (ROPC flow)
-    K->>S: Return access token + refresh token
-    S->>K: GET /userinfo (with access token)
-    K->>S: Return user profile
-    S->>S: Extract groups/roles, determine tier
-    S->>D: Create encrypted session
-    S->>C: Set secure cookie + return success
-    C->>C: Navigate to /dashboard
-    C->>S: GET /api/auth/session (via cookie)
-    S->>S: Decrypt session, validate tokens
-    S->>C: Return user data
-    C->>C: Auth middleware passes
-    C->>U: Show authenticated dashboard
-```
-
-### **Session Lifecycle**
-
-1. **Login**: User provides credentials → Server validates with Keycloak → Creates encrypted session
-2. **Session Check**: Client calls `/api/auth/session` → Server validates session → Returns user data
-3. **Token Refresh**: Server automatically refreshes tokens before expiry
-4. **Logout**: Client calls `/api/auth/logout` → Server destroys session → Redirects to login
-
-## 🛠️ **Middleware System**
-
-### **1. Auth Middleware (Protect Routes)**
-
-```typescript
-// middleware/auth.ts
-export default defineNuxtRouteMiddleware(async (to) => {
-  if (to.meta.auth === false) {
-    return; // Skip auth for public pages
-  }
-
-  const { isAuthenticated, checkAuth, user } = useAuth();
-  
-  // Ensure auth is checked if user isn't loaded
-  if (!user.value) {
-    await checkAuth();
-  }
-
-  if (!isAuthenticated.value) {
-    return navigateTo('/login');
-  }
-});
-```
-
-### **2. Guest Middleware (Redirect Authenticated Users)**
-
-```typescript
-// middleware/guest.ts
-export default defineNuxtRouteMiddleware((to, from) => {
-  const { user } = useAuth();
-  
-  // If user is already authenticated, redirect to dashboard
-  if (user.value) {
-    return navigateTo('/dashboard');
-  }
-});
-```
-
-### **3. Role-Based Middleware**
-
-```typescript
-// middleware/auth-admin.ts
-export default defineNuxtRouteMiddleware((to, from) => {
-  const { isAuthenticated, isAdmin } = useAuth();
-  
-  if (!isAuthenticated.value) {
-    return navigateTo('/login');
-  }
-  
-  if (!isAdmin.value) {
-    throw createError({
-      statusCode: 403,
-      statusMessage: 'Access denied. Administrator privileges required.'
-    });
-  }
-});
-```
-
-## 🧪 **Testing & Debugging**
-
-### **1. Testing Checklist**
-
-**Backend Testing:**
-```bash
-# Test direct login endpoint
-curl -X POST http://localhost:3000/api/auth/direct-login \
-  -H "Content-Type: application/json" \
-  -d '{"username":"test@example.com","password":"password123"}'
-
-# Test session endpoint with cookie
-curl -X GET http://localhost:3000/api/auth/session \
-  -H "Cookie: your-session-name=session-id-here"
-
-# Test logout endpoint
-curl -X POST http://localhost:3000/api/auth/logout \
-  -H "Cookie: your-session-name=session-id-here"
-```
-
-**Frontend Testing:**
-- [ ] **Login Form Validation**: Test empty fields, short passwords, invalid characters
-- [ ] **Login Flow**: Valid credentials → successful login → redirect to dashboard
-- [ ] **Error Handling**: Invalid credentials → proper error messages
-- [ ] **Session Management**: Page refresh → user stays logged in
-- [ ] **Mobile Compatibility**: Test on iOS Safari, Android Chrome
-- [ ] **Remember Me**: Long-term sessions work correctly
-
-**Security Testing:**
-- [ ] **Rate Limiting**: 5+ failed attempts → IP blocked for 1 hour
-- [ ] **CSRF Protection**: Direct API calls without cookies → rejected
-- [ ] **XSS Protection**: Malicious input → properly sanitized
-- [ ] **Session Security**: HttpOnly cookies → not accessible via JavaScript
-
-### **2. Debug Tools**
-
-**Server-Side Debugging:**
-```typescript
-// Add debug logging in server routes
-console.log('🔄 Login attempt:', {
-  username: credentials.username,
-  ip: getClientIP(event),
-  timestamp: new Date().toISOString()
-});
-
-console.log('✅ Keycloak response:', {
-  status: tokenResponse.status,
-  hasTokens: !!tokens.access_token,
-  userEmail: userInfo.email,
-  groups: extractedGroups
-});
-```
-
-**Client-Side Debugging:**
-```typescript
-// Add debug logging in composables
-const checkAuth = async (): Promise<boolean> => {
-  console.log('🔄 Checking authentication...');
-  
-  try {
-    const response = await $fetch<SessionResponse>('/api/auth/session');
-    
-    console.log('🔍 Session response:', {
-      authenticated: response.authenticated,
-      user: response.user?.email,
-      tier: response.user?.tier
-    });
-    
-    // ... rest of method
-  } catch (err) {
-    console.error('❌ Auth check failed:', err);
-    // ... error handling
-  }
-};
-```
-
-**Browser DevTools Inspection:**
-- **Network Tab**: Monitor API calls to `/api/auth/*`
-- **Application Tab**: Check cookies are set correctly
-- **Console Tab**: Review authentication logs
-- **Sources Tab**: Set breakpoints in auth flow
-
-## 🚨 **Error Handling**
-
-### **1. Server-Side Error Handling**
-
-```typescript
-// server/api/auth/direct-login.post.ts
-export default defineEventHandler(async (event) => {
-  try {
-    // ... authentication logic
-    
-  } catch (error: any) {
-    console.error('❌ Login error:', {
-      message: error.message,
-      status: error.status,
-      ip: getClientIP(event),
-      timestamp: new Date().toISOString()
-    });
-
-    // Map specific errors to user-friendly messages
-    if (error.status === 401) {
-      recordFailedAttempt(getClientIP(event));
-      
-      throw createError({
-        statusCode: 401,
-        statusMessage: 'Invalid username or password'
-      });
-    }
-    
-    if (error.status === 429) {
-      throw createError({
-        statusCode: 429,
-        statusMessage: 'Too many login attempts. Please try again later.'
-      });
-    }
-    
-    if (error.code === 'ECONNREFUSED') {
-      throw createError({
-        statusCode: 503,
-        statusMessage: 'Authentication service temporarily unavailable'
-      });
-    }
-    
-    // Generic error for unexpected issues
-    throw createError({
-      statusCode: 500,
-      statusMessage: 'Login failed. Please try again.'
-    });
-  }
-});
-```
-
-### **2. Client-Side Error Handling**
-
-```typescript
-// composables/useAuth.ts
-const getErrorMessage = (err: any): string => {
-  // Handle network errors
-  if (!err.response) {
-    return 'Network error. Please check your connection.';
-  }
-  
-  // Handle HTTP errors
-  switch (err.status) {
-    case 400:
-      return err.data?.message || 'Invalid request. Please check your input.';
-    case 401:
-      return 'Invalid username or password.';
-    case 403:
-      return 'Access denied. Please contact your administrator.';
-    case 429:
-      return 'Too many login attempts. Please try again later.';
-    case 502:
-    case 503:
-      return 'Service temporarily unavailable. Please try again.';
-    case 504:
-      return 'Request timeout. Please try again.';
-    default:
-      return err.data?.message || 'Login failed. Please try again.';
-  }
-};
-```
-
-### **3. User-Friendly Error Display**
-
-```vue
-<!-- Login page error handling -->
-<v-alert
-  v-if="loginError"
-  type="error"
-  variant="tonal"
-  class="mb-4"
-  closable
-  @click:close="loginError = ''"
->
-  <template v-slot:prepend>
-    <v-icon>mdi-alert-circle</v-icon>
-  </template>
-  <div>
-    <strong>Login Failed</strong>
-    <br>
-    {{ loginError }}
-  </div>
-  <template v-slot:append v-if="showRetryButton">
-    <v-btn
-      variant="text"
-      size="small"
-      @click="retryLogin"
-    >
-      Retry
-    </v-btn>
-  </template>
-</v-alert>
-```
-
-## 🚀 **Production Considerations**
-
-### **1. Environment Configuration**
-
-```bash
-# Production .env
-NODE_ENV=production
-
-# Use strong secrets in production
-NUXT_SESSION_SECRET=generate-a-very-strong-48-character-secret-key-here
-NUXT_ENCRYPTION_KEY=generate-strong-32-char-key-here
-
-# Keycloak production URLs
-NUXT_KEYCLOAK_ISSUER=https://auth.yourdomain.com/realms/your-realm
-NUXT_KEYCLOAK_CLIENT_ID=your-production-client
-NUXT_KEYCLOAK_CLIENT_SECRET=your-production-secret
-
-# Security settings
-NUXT_PUBLIC_DOMAIN=yourdomain.com
-```
-
-### **2. Security Headers**
-
-```typescript
-// nuxt.config.ts
-export default defineNuxtConfig({
-  nitro: {
-    routeRules: {
-      '/**': {
-        headers: {
-          // Security headers
-          'X-Frame-Options': 'DENY',
-          'X-Content-Type-Options': 'nosniff',
-          'X-XSS-Protection': '1; mode=block',
-          'Referrer-Policy': 'strict-origin-when-cross-origin',
-          'Permissions-Policy': 'camera=(), microphone=(), geolocation=()',
-          
-          // HTTPS enforcement
-          'Strict-Transport-Security': 'max-age=31536000; includeSubDomains',
-          
-          // Content Security Policy
-          'Content-Security-Policy': [
-            "default-src 'self'",
-            "script-src 'self' 'unsafe-inline'",
-            "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
-            "font-src 'self' https://fonts.gstatic.com",
-            "img-src 'self' data: https:",
-            "connect-src 'self'"
-          ].join('; ')
-        }
-      }
-    }
-  }
-});
-```
-
-### **3. Session Storage Options**
-
-**In-Memory (Development Only):**
-```typescript
-// Simple Map - loses data on restart
-const sessions = new Map<string, string>();
-```
-
-**Redis (Recommended for Production):**
-```typescript
-// server/utils/session-storage.ts
-import Redis from 'ioredis';
-
-const redis = new Redis({
-  host: process.env.REDIS_HOST || 'localhost',
-  port: parseInt(process.env.REDIS_PORT || '6379'),
-  password: process.env.REDIS_PASSWORD,
-  db: 0,
-  retryDelayOnFailover: 100,
-  maxRetriesPerRequest: 3
-});
-
-export const sessionStorage = {
-  async set(key: string, value: string, ttl: number = 3600): Promise<void> {
-    await redis.setex(`session:${key}`, ttl, value);
-  },
-  
-  async get(key: string): Promise<string | null> {
-    return await redis.get(`session:${key}`);
-  },
-  
-  async delete(key: string): Promise<void> {
-    await redis.del(`session:${key}`);
-  }
-};
-```
-
-**Database (Alternative):**
-```sql
--- Session table schema
-CREATE TABLE user_sessions (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  session_id VARCHAR(255) UNIQUE NOT NULL,
-  user_id VARCHAR(255) NOT NULL,
-  session_data TEXT NOT NULL,
-  expires_at TIMESTAMP NOT NULL,
-  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-  last_activity TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-);
-
-CREATE INDEX idx_sessions_session_id ON user_sessions(session_id);
-CREATE INDEX idx_sessions_expires_at ON user_sessions(expires_at);
-```
-
-### **4. Monitoring & Logging**
-
-```typescript
-// server/utils/monitoring.ts
-export const logAuthEvent = (event: string, data: any) => {
-  const logData = {
-    timestamp: new Date().toISOString(),
-    event,
-    ip: data.ip || 'unknown',
-    userAgent: data.userAgent || 'unknown',
-    user: data.user || 'anonymous',
-    success: data.success || false,
-    error: data.error || null
-  };
-  
-  // Send to monitoring service (e.g., DataDog, New Relic, etc.)
-  console.log(JSON.stringify(logData));
-  
-  // In production, send to your logging service:
-  // await sendToLoggingService(logData);
-};
-
-// Usage in auth routes
-logAuthEvent('login_attempt', {
-  ip: getClientIP(event),
-  user: username,
-  success: true
-});
-```
-
-### **5. Performance Optimization**
-
-```typescript
-// Cache Keycloak public key for token validation
-let keycloakPublicKey: string | null = null;
-let keyLastFetched = 0;
-const KEY_CACHE_DURATION = 3600000; // 1 hour
-
-const getKeycloakPublicKey = async (): Promise<string> => {
-  const now = Date.now();
-  
-  if (!keycloakPublicKey || (now - keyLastFetched) > KEY_CACHE_DURATION) {
-    const config = useRuntimeConfig();
-    const response = await fetch(`${config.keycloak.issuer}/.well-known/openid_configuration`);
-    const oidcConfig = await response.json();
-    
-    const keysResponse = await fetch(oidcConfig.jwks_uri);
-    const keys = await keysResponse.json();
-    
-    // Extract public key from JWKS
-    keycloakPublicKey = keys.keys[0].x5c[0];
-    keyLastFetched = now;
-  }
-  
-  return keycloakPublicKey!;
-};
-```
-
-## 🔧 **Troubleshooting**
-
-### **1. Common Issues**
-
-**Issue: "Invalid client credentials"**
-```bash
-# Solution: Check Keycloak client configuration
-- Verify client ID matches environment variable
-- Ensure client secret is correct
-- Confirm client type is "confidential"
-- Check "Direct Access Grants" is enabled
-```
-
-**Issue: "CORS errors during login"**
-```bash
-# Solution: Configure Keycloak CORS settings
-- In Keycloak Admin Console
-- Go to Client → Settings → Advanced Settings
-- Add your domain to "Web Origins"
-- Set "Valid Redirect URIs" properly
-```
-
-**Issue: "Session not persisting after login"**
-```typescript
-// Solution: Check cookie configuration
-setCookie(event, 'session-name', sessionId, {
-  httpOnly: true,
-  secure: process.env.NODE_ENV === 'production', // Important!
-  sameSite: 'lax',
-  domain: process.env.NODE_ENV === 'production' ? '.yourdomain.com' : undefined
-});
-```
-
-**Issue: "Redirect loop after login"**
-```typescript
-// Solution: Check middleware configuration
-// Ensure pages have correct middleware:
-- Login page: middleware: 'guest'
-- Dashboard pages: middleware: 'auth'
-- Index page: client-side navigation only
-```
-
-**Issue: "User groups/roles not being extracted"**
-```typescript
-// Solution: Configure group mappers in Keycloak
-// 1. Go to Client Scopes → roles → Mappers
-// 2. Create mapper: "groups"
-// 3. Mapper Type: "Group Membership"
-// 4. Token Claim Name: "groups"
-// 5. Add to access token and ID token
-```
-
-### **2. Debug Commands**
-
-```bash
-# Check Keycloak connectivity
-curl -X GET "https://auth.yourdomain.com/realms/your-realm/.well-known/openid_configuration"
-
-# Test token endpoint directly
-curl -X POST "https://auth.yourdomain.com/realms/your-realm/protocol/openid-connect/token" \
-  -H "Content-Type: application/x-www-form-urlencoded" \
-  -d "grant_type=password&client_id=your-client&client_secret=your-secret&username=test&password=test123"
-
-# Verify user info endpoint
-curl -X GET "https://auth.yourdomain.com/realms/your-realm/protocol/openid-connect/userinfo" \
-  -H "Authorization: Bearer YOUR_ACCESS_TOKEN"
-```
-
-### **3. Common Configuration Mistakes**
-
-❌ **Wrong Grant Type:**
-```javascript
-// WRONG - Don't use authorization code flow for custom login
-standardFlowEnabled: true
-directAccessGrantsEnabled: false
-```
-
-✅ **Correct Grant Type:**
-```javascript
-// CORRECT - Use Resource Owner Password Credentials
-standardFlowEnabled: false
-directAccessGrantsEnabled: true
-```
-
-❌ **Wrong Cookie Settings:**
-```typescript
-// WRONG - Insecure cookie settings
-setCookie(event, 'session', sessionId, {
-  httpOnly: false,  // ❌ XSS vulnerable
-  secure: false,    // ❌ Not secure over HTTP
-  sameSite: 'none'  // ❌ CSRF vulnerable
-});
-```
-
-✅ **Correct Cookie Settings:**
-```typescript
-// CORRECT - Secure cookie settings
-setCookie(event, 'session', sessionId, {
-  httpOnly: true,           // ✅ XSS protection
-  secure: isProduction,     // ✅ HTTPS in production
-  sameSite: 'lax'          // ✅ CSRF protection
-});
-```
-
-### **4. Performance Troubleshooting**
-
-**Slow Login Response:**
-- Check network latency to Keycloak server
-- Verify Keycloak server performance
-- Consider caching user info for short periods
-- Optimize session creation process
-
-**High Memory Usage:**
-- Implement session cleanup for expired sessions
-- Use external session storage (Redis) instead of memory
-- Set appropriate session TTL values
-
-**Database Connection Issues:**
-- Configure proper connection pooling
-- Set appropriate timeout values
-- Implement retry logic for transient failures
-
-## 📚 **Additional Resources**
-
-### **Keycloak Documentation**
-- [Resource Owner Password Credentials Flow](https://www.keycloak.org/docs/latest/securing_apps/#_resource_owner_password_credentials_flow)
-- [Client Configuration](https://www.keycloak.org/docs/latest/server_admin/#_clients)
-- [User Groups and Roles](https://www.keycloak.org/docs/latest/server_admin/#con-groups_server_administration_guide)
-
-### **Security Best Practices**
-- [OWASP Authentication Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Authentication_Cheat_Sheet.html)
-- [OWASP Session Management](https://cheatsheetseries.owasp.org/cheatsheets/Session_Management_Cheat_Sheet.html)
-- [Cookie Security Guide](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#security)
-
-### **Nuxt 3 Specific**
-- [Nuxt 3 Authentication Patterns](https://nuxt.com/docs/guide/directory-structure/middleware#authentication)
-- [Server Routes](https://nuxt.com/docs/guide/directory-structure/server)
-- [Runtime Config](https://nuxt.com/docs/api/nuxt-config#runtimeconfig)
-
----
-
-## 🎉 **Conclusion**
-
-This comprehensive guide covers implementing a custom login page with Keycloak in a Nuxt 3 application. The solution provides:
-
-✅ **Complete UI Control**: Custom branded login experience
-✅ **Mobile Compatibility**: Works perfectly on all devices including iOS Safari
-✅ **Enterprise Security**: Rate limiting, input validation, secure sessions
-✅ **Production Ready**: Proper error handling, monitoring, and scalability
-✅ **Maintainable**: Clean separation of concerns and well-documented code
-
-The implementation balances security, performance, and user experience while providing a solid foundation for enterprise authentication needs.
diff --git a/LOGIN_LOOP_FIX_FINAL.md b/LOGIN_LOOP_FIX_FINAL.md
deleted file mode 100644
index 3c6cd13..0000000
--- a/LOGIN_LOOP_FIX_FINAL.md
+++ /dev/null
@@ -1,134 +0,0 @@
-# 🔧 Login Loop Fix - Complete Solution
-
-## 🚨 **Problem Analysis**
-
-**Sequential Thinking Diagnosis:**
-- Desktop login was just reloading the login page
-- Mobile still had endless login loops  
-- Root cause: Session check throttling was too aggressive
-- The 5-second throttle prevented login verification from working
-
-## 🔍 **Root Cause Found**
-
-### **Login Flow Breakdown:**
-1. User submits credentials → Server login succeeds ✅
-2. Client calls `checkAuth()` up to 3 times to verify session
-3. **THROTTLING PROBLEM**: All `checkAuth()` calls returned cached `false`
-4. Login method thought session failed → User stayed on login page
-5. **Mobile Loop**: Navigation attempts triggered middleware → More throttled calls → Endless loop
-
-## ✅ **Solution Implemented**
-
-### **Smart Throttling with Force Parameter**
-
-**1. Enhanced checkAuth() Function**
-```typescript
-const checkAuth = async (force = false) => {
-  const now = Date.now();
-  
-  // Allow forced checks to bypass throttling for critical operations
-  if (!force && now - lastSessionCheck.value < SESSION_CHECK_THROTTLE) {
-    console.log('🚫 Session check throttled, using cached result');
-    return !!user.value;
-  }
-  
-  // ... perform actual session check
-}
-```
-
-**2. Updated Login Method**
-```typescript
-// Force bypass throttling during login verification
-sessionSuccess = await checkAuth(true);
-```
-
-**3. Updated Auth Middleware**
-```typescript
-// Force check when user is not loaded
-if (!user.value) {
-  await checkAuth(true); // Bypass throttling for middleware
-}
-```
-
-**4. Updated Login Page**
-```typescript
-// Force check to ensure accurate authentication status on page load
-const isAlreadyAuthenticated = await checkAuth(true);
-```
-
-## 🎯 **How This Fixes Both Issues**
-
-### **Prevents Login Failure:**
-- ✅ Login verification uses `checkAuth(true)` - bypasses throttling
-- ✅ Session is properly verified after server login
-- ✅ User successfully redirects to dashboard
-
-### **Prevents Session Spam:**
-- ✅ General/repeated calls still use throttling: `checkAuth()`
-- ✅ Only critical operations use forced checks: `checkAuth(true)`
-- ✅ Overall session API calls dramatically reduced
-
-### **Prevents Mobile Loops:**
-- ✅ Middleware uses forced checks when needed
-- ✅ Login page uses accurate authentication status
-- ✅ Navigation loops eliminated
-
-## 📊 **Expected Server Log Changes**
-
-### **Before Fix:**
-```
-🔍 Session check requested at: 2025-08-07T14:12:56.288Z
-🔍 Session check requested at: 2025-08-07T14:12:56.328Z
-🔍 Session check requested at: 2025-08-07T14:12:56.367Z
-... (50+ checks in 30 seconds)
-```
-
-### **After Fix:**
-```
-🔄 Performing forced session check... (login)
-🔄 Performing forced session check... (middleware)
-🚫 Session check throttled, using cached result (general calls)
-... (5-10 checks in 30 seconds)
-```
-
-## 🧪 **Testing Checklist**
-
-### **Desktop Testing:**
-- [ ] Login with valid credentials → Should redirect to dashboard
-- [ ] Invalid credentials → Should show error message
-- [ ] Already authenticated → Should redirect to dashboard immediately
-
-### **Mobile Testing (iOS Safari):**
-- [ ] Login flow works without loops
-- [ ] No endless session check spam in server logs
-- [ ] Smooth navigation between login and dashboard
-- [ ] Back button behavior is correct
-
-### **Server Monitoring:**
-- [ ] Reduced session API call frequency
-- [ ] "Forced" vs "throttled" session checks in logs
-- [ ] No more 50+ session checks per 30 seconds
-
-## 🎯 **Key Benefits**
-
-1. **🔓 Login Works**: Force parameter allows critical auth operations to bypass throttling
-2. **📱 Mobile Fixed**: iOS Safari loops eliminated with proper session verification
-3. **⚡ Performance**: Session spam reduced by 80-90% through smart throttling
-4. **🛡️ Robust**: Critical operations (login, middleware) always work regardless of throttling
-5. **🔧 Maintainable**: Clear separation between forced and throttled checks
-
-## 🚀 **Files Modified**
-
-- `composables/useAuth.ts` - Added force parameter and smart throttling
-- `middleware/auth.ts` - Use forced checks for middleware
-- `pages/login.vue` - Use forced check for auth status verification
-- Removed problematic system metrics entirely
-
-## 📈 **Success Metrics**
-
-- **Before**: Login broken on desktop + mobile loops
-- **After**: Login works smoothly on both platforms
-- **Session Calls**: Reduced from 50+ to <10 per 30 seconds
-- **User Experience**: Seamless authentication flow
-
-The login loop issue should now be **completely resolved** with this targeted smart throttling approach! 🎉
diff --git a/MEMBER_CREATION_FIX_SUMMARY.md b/MEMBER_CREATION_FIX_SUMMARY.md
deleted file mode 100644
index 58d9844..0000000
--- a/MEMBER_CREATION_FIX_SUMMARY.md
+++ /dev/null
@@ -1,134 +0,0 @@
-# Member Creation Fix Summary
-
-## Issue Description
-
-The "Add Member" functionality was failing with validation errors, despite the form appearing to be filled out correctly. The server logs showed:
-
-```
-Validation failed: First Name is required and must be at least 2 characters, Last Name is required and must be at least 2 characters, Valid email address is required
-```
-
-The server was receiving field names like `'First Name'`, `'Last Name'`, `'Email'` instead of the expected snake_case names like `first_name`, `last_name`, `email`.
-
-## Root Cause Analysis
-
-1. **Field Name Mismatch**: The client form was using display names with spaces, but the server validation expected snake_case field names.
-2. **Data Transformation Issue**: Although the client had transformation logic, the server was still receiving the display names.
-3. **Empty Field Values**: The validation indicated that required fields were empty or invalid.
-
-## Implemented Fixes
-
-### 1. Server-Side Field Mapping (Immediate Fix)
-
-**File**: `server/api/members/index.post.ts`
-
-Added a robust field mapping function that handles both display names and snake_case:
-
-```javascript
-function normalizeFieldNames(data: any): any {
-  const fieldMap: Record<string, string> = {
-    'First Name': 'first_name',
-    'Last Name': 'last_name',
-    'Email': 'email',
-    'Phone': 'phone',
-    'Date of Birth': 'date_of_birth',
-    'Nationality': 'nationality',
-    'Address': 'address',
-    'Membership Status': 'membership_status',
-    'Member Since': 'member_since',
-    'Current Year Dues Paid': 'current_year_dues_paid',
-    'Membership Date Paid': 'membership_date_paid',
-    'Payment Due Date': 'payment_due_date'
-  };
-
-  const normalized: any = {};
-  for (const [key, value] of Object.entries(data)) {
-    const normalizedKey = fieldMap[key] || key;
-    normalized[normalizedKey] = value;
-  }
-  return normalized;
-}
-```
-
-### 2. Enhanced Server Logging
-
-Added comprehensive logging to track:
-- Raw request body data
-- Field mapping transformations
-- Validation process
-- Data sanitization steps
-
-```javascript
-console.log('[api/members.post] Raw body data:', JSON.stringify(body, null, 2));
-console.log('[api/members.post] Normalized fields:', Object.keys(normalizedBody));
-```
-
-### 3. Client-Side Debug Enhancement
-
-**File**: `components/AddMemberDialog.vue`
-
-Added detailed debugging to identify form data issues:
-
-```javascript
-console.log('[AddMemberDialog] Current form.value:', JSON.stringify(form.value, null, 2));
-console.log('[AddMemberDialog] Field access test:');
-console.log('  - First Name:', form.value['First Name']);
-console.log('  - Last Name:', form.value['Last Name']);
-console.log('[AddMemberDialog] Transformed memberData:', JSON.stringify(memberData, null, 2));
-```
-
-### 4. Syntax Error Fix
-
-**File**: `server/api/members/[id].put.ts`
-
-Fixed extra character in import statement:
-```javascript
-// Before: iimport { updateMember, ... }
-// After:  import { updateMember, ... }
-```
-
-## Implementation Strategy
-
-1. **Immediate Protection**: Server-side field mapping ensures the API works regardless of client field names
-2. **Debugging Capability**: Enhanced logging helps identify any future issues
-3. **Backward Compatibility**: The fix handles both display names and snake_case names
-4. **Error Prevention**: Comprehensive validation with clear error messages
-
-## Testing Process
-
-1. **Server Startup**: Fixed syntax error allowing proper development server startup
-2. **Form Submission**: Enhanced logging will show exact data flow during member creation
-3. **Field Validation**: Server now properly validates fields regardless of naming convention
-4. **Data Integrity**: Proper sanitization and transformation ensure clean data storage
-
-## Benefits
-
-1. **Robust Error Handling**: Works with various field naming conventions
-2. **Detailed Debugging**: Comprehensive logs for troubleshooting
-3. **Backward Compatible**: Doesn't break existing functionality
-4. **Future Proof**: Handles both current and legacy field names
-5. **Clear Error Messages**: Better user feedback when validation fails
-
-## Next Steps
-
-1. **Test Member Creation**: Verify the form now works correctly
-2. **Monitor Logs**: Check server and client logs for successful data flow
-3. **Remove Debug Logs**: Clean up excessive logging once confirmed working
-4. **Document Field Standards**: Establish consistent field naming conventions
-
-## Files Modified
-
-- `server/api/members/index.post.ts` - Added field mapping and enhanced logging
-- `components/AddMemberDialog.vue` - Added client-side debugging
-- `server/api/members/[id].put.ts` - Fixed syntax error
-
-## Expected Behavior
-
-After this fix:
-1. Member creation form should work correctly
-2. Server logs will show successful field mapping
-3. Client logs will show proper data transformation
-4. New members will be created successfully in the database
-5. Form validation will provide clear feedback for any remaining issues
-
-The system now handles both display field names and snake_case field names, providing robustness against client-side data formatting issues.
diff --git a/MEMBER_UNDEFINED_DISPLAY_FIX_COMPREHENSIVE.md b/MEMBER_UNDEFINED_DISPLAY_FIX_COMPREHENSIVE.md
deleted file mode 100644
index 650d6ca..0000000
--- a/MEMBER_UNDEFINED_DISPLAY_FIX_COMPREHENSIVE.md
+++ /dev/null
@@ -1,212 +0,0 @@
-# Member "Undefined" Display Issue - Comprehensive Fix
-
-## Issue Summary
-
-Members were being created successfully in NocoDB but displaying as "undefined" in the portal interface. This indicated a data schema mismatch between write and read operations.
-
-## Root Cause Analysis
-
-After thorough investigation, the issue was identified as a **field name inconsistency** between:
-- **Write operations**: Using snake_case (`first_name`, `last_name`) 
-- **Read operations**: Expecting snake_case but NocoDB returning display names (`First Name`, `Last Name`)
-- **Display logic**: Requiring `FullName` computed from `first_name` + `last_name`
-
-## Comprehensive Diagnostic System Implemented
-
-### 1. NocoDB Utility Layer Diagnostics
-**File**: `server/utils/nocodb.ts`
-
-Added detailed logging in `getMembers()` to capture:
-- Raw member data structure from NocoDB
-- Field names and types
-- Values for both snake_case and display name variants
-
-```typescript
-// DIAGNOSTIC: Log raw member data structure
-console.log('[nocodb.getMembers] DIAGNOSTIC - Raw member fields from NocoDB:', Object.keys(sampleMember));
-console.log('[nocodb.getMembers] DIAGNOSTIC - first_name value:', sampleMember.first_name);
-console.log('[nocodb.getMembers] DIAGNOSTIC - First Name value:', (sampleMember as any)['First Name']);
-```
-
-### 2. API Layer Diagnostics  
-**File**: `server/api/members/index.get.ts`
-
-Enhanced GET endpoint with comprehensive logging:
-- Raw data from NocoDB
-- Field normalization process
-- FullName calculation results
-- Final processed member structure
-
-```typescript
-// DIAGNOSTIC: Log processing pipeline
-console.log('[api/members.get] DIAGNOSTIC - FullName calculation result:', 
-  `"${sampleProcessed.first_name || ''}" + " " + "${sampleProcessed.last_name || ''}" = "${sampleProcessed.FullName}"`);
-```
-
-### 3. Client-Side Diagnostics
-**File**: `pages/dashboard/member-list.vue`
-
-Added frontend logging to track:
-- API response structure
-- Member data received by client
-- Field availability and values
-
-```typescript
-// DIAGNOSTIC: Log what we received from API
-console.log('[member-list] DIAGNOSTIC - Sample FullName:', `"${sampleMember.FullName}"`);
-console.log('[member-list] DIAGNOSTIC - Sample first_name:', `"${sampleMember.first_name}"`);
-```
-
-## Bidirectional Field Normalization System
-
-### 1. Read Operations (NocoDB → Application)
-**Function**: `normalizeFieldsFromNocoDB()`
-
-Maps both display names and snake_case to consistent internal format:
-
-```typescript
-const readFieldMap: Record<string, string> = {
-  'First Name': 'first_name',
-  'Last Name': 'last_name',
-  'Email': 'email',
-  // ... handles all field variants
-  'first_name': 'first_name', // Pass-through for snake_case
-  'last_name': 'last_name',
-};
-```
-
-### 2. Write Operations (Application → NocoDB) 
-**Function**: `normalizeFieldsForNocoDB()`
-
-Maps internal snake_case to NocoDB expected format:
-
-```typescript
-const writeFieldMap: Record<string, string> = {
-  'first_name': 'First Name',
-  'last_name': 'Last Name',
-  'email': 'Email',
-  // ... complete mapping for write operations
-};
-```
-
-### 3. Robust Fallback System
-
-Ensures data integrity with multiple fallback layers:
-
-```typescript
-// Ensure required fields exist with fallbacks
-normalized.first_name = normalized.first_name || normalized['First Name'] || '';
-normalized.last_name = normalized.last_name || normalized['Last Name'] || '';
-normalized.email = normalized.email || normalized['Email'] || normalized['Email Address'] || '';
-```
-
-## Integration Points
-
-### 1. GET Endpoint Integration
-Applied field normalization to all retrieved members:
-
-```typescript
-// Apply field normalization to handle schema mismatches
-members = members.map(member => {
-  const normalized = normalizeFieldsFromNocoDB(member);
-  return normalized;
-});
-```
-
-### 2. POST Endpoint Integration
-Already included the server-side field mapping from previous fix:
-
-```typescript
-// Map display names to snake_case field names (fallback for client issues)
-const normalizedBody = normalizeFieldNames(body);
-```
-
-## Testing Strategy
-
-### 1. Server-Side Logging
-Check server console for diagnostic output:
-- `[nocodb.getMembers] DIAGNOSTIC` - Raw NocoDB data
-- `[api/members.get] DIAGNOSTIC` - Processing pipeline  
-- `[normalizeFieldsFromNocoDB]` - Field mapping results
-
-### 2. Client-Side Logging
-Check browser console for:
-- `[member-list] DIAGNOSTIC` - Frontend data reception
-- Member field structure and values
-- FullName calculation success
-
-### 3. Manual Testing
-1. **Create New Member**: Verify creation and immediate display
-2. **Reload Page**: Check if existing members display correctly  
-3. **Edit Member**: Verify editing functionality works
-4. **View Member**: Check detailed view displays properly
-
-## Expected Results
-
-After implementing these fixes:
-
-### ✅ **Successful Scenarios**:
-1. **New Members**: Display immediately after creation
-2. **Existing Members**: Show correct names instead of "undefined"
-3. **Mixed Schemas**: Handle both display names and snake_case data
-4. **Robust Fallbacks**: Work regardless of NocoDB column naming
-
-### 🔍 **Diagnostic Information**:
-- Complete visibility into data flow from database to display
-- Identification of exact field naming used by NocoDB
-- Validation of field mapping effectiveness
-- Confirmation of FullName calculation success
-
-### 🛠️ **Technical Benefits**:
-- **Backward Compatible**: Works with existing data
-- **Future Proof**: Handles schema changes gracefully  
-- **Debuggable**: Comprehensive logging for troubleshooting
-- **Maintainable**: Clean separation of concerns
-
-## Troubleshooting Guide
-
-### Issue: Still Seeing "Undefined" Names
-**Check**: Server logs for `[normalizeFieldsFromNocoDB]` output
-**Action**: Verify field mapping covers the actual NocoDB column names
-
-### Issue: Empty FullName Field
-**Check**: `[api/members.get] DIAGNOSTIC - FullName calculation result`
-**Action**: Confirm `first_name` and `last_name` have values after normalization
-
-### Issue: API Errors
-**Check**: Server console for `[nocodb.getMembers]` errors
-**Action**: Verify NocoDB connection and table configuration
-
-### Issue: Client Not Receiving Data
-**Check**: Browser console for `[member-list] DIAGNOSTIC` logs
-**Action**: Confirm API response structure and member data format
-
-## Files Modified
-
-### Server-Side Changes:
-1. **`server/utils/nocodb.ts`**
-   - Added diagnostic logging to `getMembers()`
-   - Implemented `normalizeFieldsFromNocoDB()` 
-   - Implemented `normalizeFieldsForNocoDB()`
-
-2. **`server/api/members/index.get.ts`**
-   - Enhanced diagnostic logging
-   - Integrated field normalization
-   - Added import for normalization functions
-
-3. **`server/api/members/index.post.ts`**
-   - Previous field mapping enhancement (already implemented)
-
-### Client-Side Changes:
-1. **`pages/dashboard/member-list.vue`**
-   - Added comprehensive client-side diagnostic logging
-   - Enhanced member data tracking
-
-## Next Steps
-
-1. **Deploy and Test**: Apply these changes and monitor logs
-2. **Identify Schema**: Use diagnostic output to confirm exact NocoDB field names  
-3. **Optimize**: Remove excessive logging once issue is resolved
-4. **Document**: Update field naming standards based on findings
-
-This comprehensive fix provides both immediate resolution and long-term robustness for the member display system.
diff --git a/PASSWORD_RESET_FIX_SUMMARY.md b/PASSWORD_RESET_FIX_SUMMARY.md
deleted file mode 100644
index 3493902..0000000
--- a/PASSWORD_RESET_FIX_SUMMARY.md
+++ /dev/null
@@ -1,110 +0,0 @@
-# Password Reset Fix - Implementation Summary
-
-## Problem
-The password reset functionality was failing with a 500 error because the portal client (`monacousa-portal`) was being used to access Keycloak's Admin API, but it didn't have the necessary permissions to execute admin operations like sending password reset emails.
-
-## Root Cause
-The original implementation was using the portal client credentials for both:
-1. User authentication (correct usage)
-2. Admin operations like password reset (incorrect - needs admin permissions)
-
-Error from logs:
-```
-❌ Failed to send reset email: 500
-Reset email error details: {"errorMessage":"Failed to send execute actions email: Error when attempting to send the email to the server. More information is available in the server log."}
-```
-
-## Solution
-Implemented a dedicated admin client approach using Keycloak's `admin-cli` client:
-
-### 1. Keycloak Configuration
-- Enabled "Client authentication" for `admin-cli` client
-- Enabled "Service accounts roles" 
-- Assigned realm-management roles:
-  - `view-users`
-  - `manage-users` 
-  - `query-users`
-- Generated client secret
-
-### 2. Environment Variables
-Added new admin client configuration:
-```env
-NUXT_KEYCLOAK_ADMIN_CLIENT_ID=admin-cli
-NUXT_KEYCLOAK_ADMIN_CLIENT_SECRET=your-admin-cli-secret
-```
-
-### 3. Code Changes
-
-#### Files Modified:
-- `nuxt.config.ts` - Added keycloakAdmin runtime config
-- `.env.example` - Documented new environment variables
-- `utils/types.ts` - Added KeycloakAdminConfig interface
-- `server/utils/keycloak-admin.ts` - **NEW** Admin client utility
-- `server/api/auth/forgot-password.post.ts` - Updated to use admin client
-
-#### Key Fix:
-**Before (broken):**
-```typescript
-// Using portal client for admin operations (no permissions)
-body: new URLSearchParams({
-  grant_type: 'client_credentials',
-  client_id: config.keycloak.clientId,        // monacousa-portal
-  client_secret: config.keycloak.clientSecret // portal secret
-})
-```
-
-**After (working):**
-```typescript
-// Using admin client for admin operations (has permissions)
-body: new URLSearchParams({
-  grant_type: 'client_credentials',
-  client_id: config.keycloakAdmin.clientId,     // admin-cli
-  client_secret: config.keycloakAdmin.clientSecret // admin secret
-})
-```
-
-### 4. Enhanced Error Handling
-Added specific handling for:
-- Permission errors (403/Forbidden)
-- SMTP server errors (500)
-- Timeout errors
-- User not found scenarios
-
-### 5. Security Improvements
-- Always return generic success messages (don't reveal if email exists)
-- Enhanced logging for debugging
-- Proper error categorization
-- Rate limiting considerations documented
-
-## Architecture
-```
-Password Reset Flow:
-1. User submits email via forgot password form
-2. Server validates email format
-3. Server creates Keycloak admin client
-4. Admin client obtains admin token using admin-cli credentials
-5. Admin client searches for user by email
-6. If user found, admin client sends password reset email
-7. Server always returns generic success message
-```
-
-## Benefits
-- ✅ Password reset emails now work properly
-- ✅ Proper separation of concerns (portal vs admin operations)  
-- ✅ Enhanced security and error handling
-- ✅ Better logging for troubleshooting
-- ✅ Maintainable admin utility for future admin operations
-
-## Testing
-To test the fix:
-1. Navigate to login page
-2. Click "Forgot Password"
-3. Enter valid email address
-4. Check email inbox for reset link
-5. Verify server logs show successful operation
-
-## Future Enhancements
-- Rate limiting on forgot password endpoint
-- CAPTCHA integration
-- Admin dashboard for user management
-- Email template customization
diff --git a/REDIRECT_LOOP_SOLUTION_FINAL.md b/REDIRECT_LOOP_SOLUTION_FINAL.md
deleted file mode 100644
index dfa4626..0000000
--- a/REDIRECT_LOOP_SOLUTION_FINAL.md
+++ /dev/null
@@ -1,222 +0,0 @@
-# 🎯 REDIRECT LOOP SOLUTION - COMPREHENSIVE FIX
-
-## 🚨 **THE PROBLEM**
-
-**Endless redirect loop** between `/login` ↔ `/dashboard` caused by multiple conflicting auth checks running simultaneously and SSR/hydration mismatches.
-
-## 🔍 **ROOT CAUSE ANALYSIS**
-
-### **The Critical Issues Found:**
-
-1. **`pages/index.vue`**: Top-level `await navigateTo()` caused SSR/hydration issues
-2. **Multiple Auth Checks**: Same auth state being checked in plugins, middleware, and onMounted hooks
-3. **Race Conditions**: Plugin, middleware, and component lifecycle all checking auth simultaneously
-4. **SSR Mismatches**: Server and client had different auth states during hydration
-5. **Missing Middleware**: Login page didn't use guest middleware to handle authenticated users
-
-### **The Redirect Loop Flow:**
-1. User visits site → `index.vue` top-level navigation (SSR issues)
-2. Plugin checks auth → Sets user state
-3. Login page `onMounted` checks auth → Finds user → Redirects to `/dashboard`
-4. Dashboard middleware checks auth → User might not be set yet → Redirects to `/login`
-5. **INFINITE LOOP** 🔄
-
-## ✅ **THE COMPLETE SOLUTION**
-
-### **1. Fixed `pages/index.vue` - Eliminated SSR Issues**
-```vue
-<template>
-  <div class="loading-container">
-    <!-- Loading spinner -->
-  </div>
-</template>
-
-<script setup lang="ts">
-// ❌ REMOVED: await navigateTo() at top level (causes SSR issues)
-// ✅ ADDED: Client-side only navigation in onMounted
-
-onMounted(() => {
-  const { isAuthenticated } = useAuth();
-  
-  // Route after component is mounted (client-side only)
-  if (isAuthenticated.value) {
-    navigateTo('/dashboard');
-  } else {
-    navigateTo('/login');
-  }
-});
-</script>
-```
-
-**Why this works:**
-- ❌ No top-level async operations that break SSR
-- ✅ Client-side only navigation prevents hydration mismatches
-- ✅ Clean loading state while routing decision is made
-
-### **2. Fixed Login Page - Proper Middleware Usage**
-```vue
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-  middleware: 'guest'  // ✅ This prevents authenticated users from accessing login
-});
-
-// ❌ REMOVED: onMounted auth check (conflicts with middleware)
-// ✅ ADDED: Only auto-focus behavior
-
-onMounted(() => {
-  // Only auto-focus, no auth check needed - guest middleware handles it
-  nextTick(() => {
-    const usernameField = document.querySelector('input[type="text"]');
-    if (usernameField) usernameField.focus();
-  });
-});
-</script>
-```
-
-**Why this works:**
-- ✅ Guest middleware handles authenticated user redirects properly
-- ❌ No conflicting auth checks in onMounted
-- ✅ Single responsibility: middleware for auth, component for UI
-
-### **3. Fixed Dashboard Index - Removed Duplicate Checks**
-```vue
-<script setup lang="ts">
-definePageMeta({
-  middleware: 'auth',
-  layout: 'dashboard'
-});
-
-// ❌ REMOVED: await checkAuth() (middleware already did this)
-// ✅ ADDED: Simple tier-based routing
-
-onMounted(() => {
-  // Auth middleware has already verified authentication - just route to tier page
-  if (user.value && userTier.value) {
-    const tierRoute = `/dashboard/${userTier.value}`;
-    navigateTo(tierRoute, { replace: true });
-  } else {
-    // Fallback - middleware should have caught this
-    navigateTo('/login');
-  }
-});
-</script>
-```
-
-**Why this works:**
-- ✅ Auth middleware ensures user is authenticated before component loads
-- ❌ No duplicate auth checks that could conflict
-- ✅ Simple tier-based routing logic
-
-### **4. Made Auth State SSR-Compatible**
-```typescript
-// composables/useAuth.ts
-export const useAuth = () => {
-  // ✅ CHANGED: Use useState for SSR compatibility
-  const user = useState<User | null>('auth.user', () => null);
-  
-  // ❌ OLD: const user = ref<User | null>(null);
-  // This caused hydration mismatches between server/client
-```
-
-**Why this works:**
-- ✅ `useState` ensures consistent state between server and client
-- ❌ Prevents hydration mismatches that caused loops
-- ✅ Proper SSR/SPA compatibility
-
-## 🎯 **KEY PRINCIPLES APPLIED**
-
-### **1. Single Responsibility**
-- **Middleware**: Handles auth checks and redirects
-- **Components**: Handle UI and user interactions only
-- **Plugins**: Initialize auth state on app startup
-
-### **2. Eliminate Race Conditions**
-- ❌ No multiple auth checks running simultaneously
-- ✅ Clear order: Plugin → Middleware → Component lifecycle
-- ✅ Each layer trusts the previous layer's work
-
-### **3. SSR Compatibility**
-- ❌ No top-level async operations in components
-- ✅ Use `onMounted` for client-side only operations
-- ✅ Use `useState` for consistent server/client state
-
-### **4. Proper Middleware Usage**
-- **Login page**: Uses `guest` middleware (redirects authenticated users)
-- **Dashboard pages**: Use `auth` middleware (redirects unauthenticated users)
-- **No conflicting checks** in component lifecycle hooks
-
-## 📊 **THE AUTHENTICATION FLOW NOW**
-
-### **Happy Path - User Logs In:**
-1. **Visit `/`** → Loading screen → Routes to `/login` (if not authenticated)
-2. **Login Page** → Guest middleware allows access → User enters credentials
-3. **Login Success** → Server sets cookie → Routes to `/dashboard`
-4. **Dashboard Index** → Auth middleware verifies → Routes to `/dashboard/user`
-5. **User Dashboard** → Loads successfully ✅
-
-### **Already Authenticated User:**
-1. **Plugin** → Checks auth → Sets user state
-2. **Visit `/`** → Routes to `/dashboard`
-3. **Dashboard Index** → Auth middleware passes → Routes to `/dashboard/user`
-4. **User Dashboard** → Loads successfully ✅
-
-### **Unauthenticated User Tries Dashboard:**
-1. **Visit `/dashboard`** → Auth middleware → Redirects to `/login`
-2. **Login Page** → Guest middleware allows access
-3. **User can login** ✅
-
-### **Authenticated User Visits Login:**
-1. **Visit `/login`** → Guest middleware → Redirects to `/dashboard`
-2. **Dashboard loads** ✅
-
-## 🎉 **WHAT THIS FIXES**
-
-### **Before Fix ❌**
-- Endless redirect loops between login/dashboard
-- White screens during navigation
-- SSR/hydration mismatches
-- Race conditions between auth checks
-- Inconsistent behavior across devices
-
-### **After Fix ✅**
-- Clean, predictable auth flow
-- No redirect loops
-- Proper SSR/SPA compatibility
-- Single source of truth for auth state
-- Consistent behavior across all platforms
-
-## 📋 **FILES MODIFIED**
-
-1. **`pages/index.vue`** - Removed top-level navigation, added client-side routing
-2. **`pages/login.vue`** - Added guest middleware, removed duplicate auth check
-3. **`pages/dashboard/index.vue`** - Removed duplicate auth check, simplified routing
-4. **`composables/useAuth.ts`** - Changed to useState for SSR compatibility
-
-## 🔧 **TESTING CHECKLIST**
-
-### **Desktop Testing:**
-- [ ] Visit `/` → Should load and route properly
-- [ ] Login with valid credentials → Should redirect to dashboard
-- [ ] Already authenticated → Should skip login page
-- [ ] Unauthenticated dashboard access → Should redirect to login
-
-### **Mobile Testing:**
-- [ ] All above scenarios work on mobile browsers
-- [ ] No redirect loops in iOS Safari
-- [ ] Smooth navigation between pages
-
-### **Server Logs:**
-- [ ] No excessive session API calls
-- [ ] Clean authentication flow logs
-- [ ] No error messages about hydration
-
-## 🎯 **SUCCESS CRITERIA**
-
-✅ **No more redirect loops between `/login` and `/dashboard`**
-✅ **Clean authentication flow on all devices**  
-✅ **Proper SSR/SPA compatibility**
-✅ **Consistent user experience**
-✅ **Maintainable, single-responsibility code**
-
-The authentication system now works reliably with a clear, predictable flow that eliminates all race conditions and conflicts! 🚀
diff --git a/SNAKE_CASE_FIELD_MIGRATION_GUIDE.md b/SNAKE_CASE_FIELD_MIGRATION_GUIDE.md
deleted file mode 100644
index d6ccfd7..0000000
--- a/SNAKE_CASE_FIELD_MIGRATION_GUIDE.md
+++ /dev/null
@@ -1,187 +0,0 @@
-# MonacoUSA Portal - Snake Case Field Migration Guide
-
-## 🎯 Overview
-
-This document provides complete instructions for migrating from space-separated field names (e.g., "First Name") to snake_case field names (e.g., "first_name") to eliminate data corruption issues when editing records directly in NocoDB.
-
-## 📊 Required NocoDB Field Name Changes
-
-You need to rename the following fields in your NocoDB Members table:
-
-| **Current Field Name**      | **New Snake Case Name**     | **Type**    |
-|----------------------------|----------------------------|-------------|
-| `First Name`               | `first_name`               | Text        |
-| `Last Name`                | `last_name`                | Text        |
-| `Email`                    | `email`                    | Email       |
-| `Phone`                    | `phone`                    | Text        |
-| `Date of Birth`            | `date_of_birth`            | Date        |
-| `Nationality`              | `nationality`              | Text        |
-| `Address`                  | `address`                  | LongText    |
-| `Membership Status`        | `membership_status`        | SingleSelect|
-| `Member Since`             | `member_since`             | Date        |
-| `Current Year Dues Paid`   | `current_year_dues_paid`   | Text        |
-| `Membership Date Paid`     | `membership_date_paid`     | Date        |
-| `Payment Due Date`         | `payment_due_date`         | Date        |
-
-### 🔧 How to Rename Fields in NocoDB
-
-1. **Open your NocoDB Members table**
-2. **For each field above:**
-   - Click on the field header
-   - Select "Edit" or click the gear icon
-   - Change the field name from the old name to the new snake_case name
-   - Click "Save"
-
-⚠️ **Important**: Do NOT change the field types, only the names.
-
-## 🏗️ Backend Files Updated
-
-The following files have been completely updated to use snake_case field names:
-
-### Type Definitions
-- ✅ `utils/types.ts` - Member interface updated
-
-### NocoDB Utilities
-- ✅ `server/utils/nocodb.ts` - All CRUD operations updated
-
-### API Endpoints
-- ✅ `server/api/members/index.get.ts` - List members API
-- ✅ `server/api/members/[id].get.ts` - Get single member API
-- ✅ `server/api/members/index.post.ts` - Create member API
-- ✅ `server/api/members/[id].put.ts` - Update member API
-
-## 🎨 Frontend Files That Need Updates
-
-The following frontend components still reference the old field names and need to be updated:
-
-### Vue Components
-- `components/ViewMemberDialog.vue`
-- `components/MemberCard.vue` 
-- `components/EditMemberDialog.vue`
-- `components/AddMemberDialog.vue`
-- `pages/dashboard/member-list.vue`
-
-## 🔄 Complete Field Mapping Reference
-
-### Data Access Patterns
-
-**Before (❌ Old)**:
-```javascript
-member['First Name']
-member['Last Name']
-member['Membership Status']
-member['Current Year Dues Paid']
-```
-
-**After (✅ New)**:
-```javascript
-member.first_name
-member.last_name  
-member.membership_status
-member.current_year_dues_paid
-```
-
-### API Request/Response Format
-
-**Create/Update Member Payload**:
-```json
-{
-  "first_name": "John",
-  "last_name": "Doe", 
-  "email": "john.doe@example.com",
-  "phone": "+1234567890",
-  "nationality": "US",
-  "membership_status": "Active",
-  "current_year_dues_paid": "true",
-  "date_of_birth": "1990-01-15",
-  "member_since": "2023-01-01",
-  "membership_date_paid": "2024-01-15",
-  "payment_due_date": "2025-01-15",
-  "address": "123 Main St, City, State"
-}
-```
-
-## 🧪 Testing Checklist
-
-After making the NocoDB field changes, test the following:
-
-### Backend API Testing
-- [ ] `GET /api/members` - List all members
-- [ ] `GET /api/members/{id}` - Get single member  
-- [ ] `POST /api/members` - Create new member
-- [ ] `PUT /api/members/{id}` - Update existing member
-- [ ] `DELETE /api/members/{id}` - Delete member
-
-### Data Integrity Testing  
-- [ ] Create member via portal → Verify in NocoDB
-- [ ] Edit member via portal → Verify in NocoDB  
-- [ ] Edit member in NocoDB directly → Verify portal displays correctly
-- [ ] All fields display properly (names, flags, contact info)
-
-### Frontend Display Testing
-- [ ] Member list page loads and displays all members
-- [ ] Member cards show correct information
-- [ ] Country flags display properly  
-- [ ] Search and filtering work correctly
-- [ ] Add member dialog works
-- [ ] Edit member dialog works and pre-populates correctly
-- [ ] View member dialog shows all details
-
-## 🚨 Critical Success Criteria  
-
-The migration is successful when:
-
-1. ✅ **No "undefined undefined" names appear** in member cards
-2. ✅ **Country flags display properly** for all nationalities  
-3. ✅ **Direct NocoDB edits sync properly** with portal display
-4. ✅ **All CRUD operations work** through the portal
-5. ✅ **No TypeScript errors** in the console
-6. ✅ **No API errors** in browser network tab
-
-## 🔧 Rollback Plan
-
-If issues occur, you can temporarily rollback by:
-
-1. **Revert NocoDB field names** back to the original space-separated format
-2. **Revert the backend files** using git:
-   ```bash
-   git checkout HEAD~1 -- utils/types.ts server/utils/nocodb.ts server/api/members/
-   ```
-
-## 📈 Next Steps After Migration
-
-1. **Update frontend components** to use snake_case field names
-2. **Test thoroughly** across all functionality
-3. **Update any documentation** that references old field names
-4. **Consider adding validation** to prevent future field name inconsistencies
-
-## 💡 Benefits After Migration
-
-- ✅ **Consistent data display** regardless of edit source (portal vs NocoDB)
-- ✅ **No more "undefined undefined" member names**
-- ✅ **Proper country flag rendering**
-- ✅ **Standard database naming conventions**
-- ✅ **Easier debugging and maintenance**
-- ✅ **Better API consistency**
-
-## 🆘 Troubleshooting
-
-### Issue: Members showing "undefined undefined"
-- **Cause**: NocoDB field names don't match backend expectations
-- **Solution**: Verify all field names in NocoDB match the snake_case format exactly
-
-### Issue: Country flags not displaying
-- **Cause**: Nationality field not properly mapped
-- **Solution**: Ensure `Nationality` field is renamed to `nationality` in NocoDB
-
-### Issue: API errors in console
-- **Cause**: Field name mismatch between frontend and backend
-- **Solution**: Update frontend components to use snake_case field names
-
-### Issue: Direct NocoDB edits causing corruption
-- **Cause**: This was the original problem - should be fixed after migration
-- **Solution**: This migration specifically addresses this issue
-
----
-
-**🎉 Once you complete the NocoDB field renaming, the backend will be fully compatible with snake_case field names and the data corruption issue should be completely resolved!**
diff --git a/components/AddMemberDialog.vue b/components/AddMemberDialog.vue
index f08656f..e54e071 100644
--- a/components/AddMemberDialog.vue
+++ b/components/AddMemberDialog.vue
@@ -322,43 +322,47 @@ const handleSubmit = async () => {
     console.log('[AddMemberDialog] Form keys:', Object.keys(form.value));
     console.log('[AddMemberDialog] duesPaid switch value:', duesPaid.value);
     
-    // Transform field names to match server expectations (snake_case)
+    // Get current form values
+    const currentForm = unref(form);
+    
+    console.log('[AddMemberDialog] Unref form access test:');
+    console.log('  - First Name:', currentForm['First Name']);
+    console.log('  - Last Name:', currentForm['Last Name']);
+    console.log('  - Email:', currentForm.Email);
+    console.log('  - Phone:', currentForm.Phone);
+    
+    // Simple approach - send the form data as-is with display names
+    // Let the server handle field normalization
     const memberData = {
-      first_name: form.value['First Name']?.trim(),
-      last_name: form.value['Last Name']?.trim(), 
-      email: form.value.Email?.trim(),
-      phone: form.value.Phone?.trim() || null,
-      date_of_birth: form.value['Date of Birth'] || null,
-      nationality: form.value.Nationality?.trim() || null,
-      address: form.value.Address?.trim() || null,
-      membership_status: form.value['Membership Status'],
-      member_since: form.value['Member Since'] || null,
-      current_year_dues_paid: form.value['Current Year Dues Paid'],
-      membership_date_paid: form.value['Membership Date Paid'] || null,
-      payment_due_date: form.value['Payment Due Date'] || null
+      'First Name': currentForm['First Name']?.trim(),
+      'Last Name': currentForm['Last Name']?.trim(),
+      'Email': currentForm.Email?.trim(),
+      'Phone': currentForm.Phone?.trim() || '',
+      'Date of Birth': currentForm['Date of Birth'] || '',
+      'Nationality': currentForm.Nationality?.trim() || '',
+      'Address': currentForm.Address?.trim() || '',
+      'Membership Status': currentForm['Membership Status'],
+      'Member Since': currentForm['Member Since'] || '',
+      'Current Year Dues Paid': currentForm['Current Year Dues Paid'],
+      'Membership Date Paid': currentForm['Membership Date Paid'] || '',
+      'Payment Due Date': currentForm['Payment Due Date'] || ''
     };
-
-    console.log('[AddMemberDialog] Field access test:');
-    console.log('  - First Name:', form.value['First Name']);
-    console.log('  - Last Name:', form.value['Last Name']);
-    console.log('  - Email:', form.value.Email);
-    console.log('  - Phone:', form.value.Phone);
     
     // Ensure required fields are not empty
-    if (!memberData.first_name) {
-      console.error('[AddMemberDialog] First Name is empty. Raw value:', form.value['First Name']);
+    if (!memberData['First Name']) {
+      console.error('[AddMemberDialog] First Name is empty. Raw value:', currentForm['First Name']);
       throw new Error('First Name is required');
     }
-    if (!memberData.last_name) {
-      console.error('[AddMemberDialog] Last Name is empty. Raw value:', form.value['Last Name']);
+    if (!memberData['Last Name']) {
+      console.error('[AddMemberDialog] Last Name is empty. Raw value:', currentForm['Last Name']);
       throw new Error('Last Name is required');
     }
-    if (!memberData.email) {
-      console.error('[AddMemberDialog] Email is empty. Raw value:', form.value.Email);
+    if (!memberData['Email']) {
+      console.error('[AddMemberDialog] Email is empty. Raw value:', currentForm.Email);
       throw new Error('Email is required');
     }
 
-    console.log('[AddMemberDialog] Transformed memberData:', JSON.stringify(memberData, null, 2));
+    console.log('[AddMemberDialog] Final memberData:', JSON.stringify(memberData, null, 2));
     console.log('[AddMemberDialog] About to submit to API...');
 
     const response = await $fetch<{ success: boolean; data: Member; message?: string }>('/api/members', {
diff --git a/components/EnhancedPhoneInput.vue b/components/EnhancedPhoneInput.vue
deleted file mode 100644
index f3530e8..0000000
--- a/components/EnhancedPhoneInput.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-  <div class="enhanced-phone-input">
-    <PhoneInput
-      v-model="phoneValue"
-      :country-code="selectedCountryCode"
-      :placeholder="placeholder || 'Enter phone number'"
-      :preferred-countries="['US', 'FR', 'GB', 'DE', 'CA', 'AU', 'ES', 'IT', 'NL', 'BE']"
-      :auto-format="true"
-      :no-formatting-as-you-type="false"
-      country-locale="en-US"
-      @update="handlePhoneUpdate"
-      @input="handlePhoneInput"
-      class="phone-input-wrapper"
-    >
-      <template #input="{ inputValue, updateInputValue, placeholder: inputPlaceholder }">
-        <v-text-field
-          :model-value="inputValue"
-          @update:model-value="updateInputValue"
-          :placeholder="inputPlaceholder"
-          :label="label"
-          variant="outlined"
-          density="comfortable"
-          :error="hasError"
-          :error-messages="errorMessage"
-          :rules="rules"
-          class="phone-number-input"
-          hide-details="auto"
-        />
-      </template>
-    </PhoneInput>
-  </div>
-</template>
-
-<script setup lang="ts">
-import PhoneInput from 'base-vue-phone-input';
-import type { Results as PhoneResults } from 'base-vue-phone-input';
-
-interface Props {
-  modelValue?: string;
-  label?: string;
-  placeholder?: string;
-  error?: boolean;
-  errorMessage?: string;
-  rules?: Array<(value: any) => boolean | string>;
-}
-
-interface Emits {
-  (e: 'update:model-value', value: string): void;
-  (e: 'phone-data', data: PhoneResults): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
-  label: 'Phone Number',
-  placeholder: 'Enter phone number',
-  error: false,
-  errorMessage: '',
-  rules: () => []
-});
-
-const emit = defineEmits<Emits>();
-
-// Local state
-const phoneValue = ref(props.modelValue);
-const selectedCountryCode = ref('US');
-const phoneData = ref<PhoneResults | null>(null);
-
-// Computed properties
-const hasError = computed(() => props.error);
-
-// Watch for external changes to modelValue
-watch(() => props.modelValue, (newValue) => {
-  if (newValue !== phoneValue.value) {
-    phoneValue.value = newValue;
-  }
-});
-
-// Handle phone input events
-const handlePhoneInput = (value: string) => {
-  phoneValue.value = value;
-  emit('update:model-value', value);
-};
-
-const handlePhoneUpdate = (data: PhoneResults) => {
-  phoneData.value = data;
-  
-  // Update country code if available
-  if (data.countryCode) {
-    selectedCountryCode.value = data.countryCode;
-  }
-  
-  // Emit the formatted phone number
-  const formattedNumber = data.formatInternational || data.e164 || phoneValue.value;
-  if (formattedNumber !== phoneValue.value) {
-    phoneValue.value = formattedNumber;
-    emit('update:model-value', formattedNumber);
-  }
-  
-  // Emit phone data for parent component
-  emit('phone-data', data);
-};
-
-// Initialize with modelValue
-onMounted(() => {
-  if (props.modelValue) {
-    phoneValue.value = props.modelValue;
-  }
-});
-</script>
-
-<style scoped>
-.enhanced-phone-input {
-  width: 100%;
-}
-
-.phone-input-wrapper {
-  display: flex;
-  gap: 8px;
-  align-items: flex-start;
-}
-
-.country-select {
-  flex: 0 0 120px;
-}
-
-.phone-number-input {
-  flex: 1;
-}
-
-.flag-emoji {
-  font-size: 1.2em;
-}
-
-.country-code {
-  font-size: 0.875rem;
-  color: rgba(var(--v-theme-on-surface), 0.87);
-}
-
-/* Ensure proper spacing in Vuetify forms */
-:deep(.v-input) {
-  margin-bottom: 0;
-}
-
-:deep(.v-input__details) {
-  min-height: 20px;
-}
-</style>
diff --git a/components/MultipleNationalityInput.vue b/components/MultipleNationalityInput.vue
index b4e5dee..223793a 100644
--- a/components/MultipleNationalityInput.vue
+++ b/components/MultipleNationalityInput.vue
@@ -1,7 +1,5 @@
 <template>
   <div class="multiple-nationality-input">
-    <v-label v-if="label" class="v-label mb-2">{{ label }}</v-label>
-    
     <div class="nationality-list">
       <div
         v-for="(nationality, index) in nationalities"
@@ -11,11 +9,11 @@
         <v-select
           v-model="nationalities[index]"
           :items="countryOptions"
-          :label="`Nationality ${index + 1}`"
+          :label="index === 0 && label ? label : `Nationality ${index + 1}`"
           variant="outlined"
           density="comfortable"
-          :error="hasError"
-          :error-messages="errorMessage"
+          :error="hasError && index === 0"
+          :error-messages="hasError && index === 0 ? errorMessage : undefined"
           @update:model-value="updateNationalities"
           class="nationality-select"
         >
diff --git a/components/PhoneInputDemo.vue b/components/PhoneInputDemo.vue
deleted file mode 100644
index 5d63e56..0000000
--- a/components/PhoneInputDemo.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<template>
-  <div class="demo-container">
-    <v-card class="pa-6" elevation="2">
-      <v-card-title class="text-h5 mb-4">
-        📱 Professional Phone Input - Desktop & Mobile Optimized
-      </v-card-title>
-      
-      <v-row>
-        <v-col cols="12" md="6">
-          <PhoneInputWrapper
-            v-model="phoneNumber"
-            label="Phone Number"
-            placeholder="Enter your phone number"
-            help-text="Clean Vuetify design with advanced mobile optimization"
-            @phone-data="handlePhoneData"
-            @country-changed="handleCountryChange"
-          />
-          
-          <div class="mt-4">
-            <v-btn 
-              color="primary" 
-              @click="testUSNumber"
-              variant="outlined"
-              size="small"
-              class="mr-2 mb-2"
-            >
-              Test: (917) 932-4061
-            </v-btn>
-            
-            <v-btn 
-              color="secondary" 
-              @click="testMonacoNumber"
-              variant="outlined"
-              size="small"
-              class="mr-2 mb-2"
-            >
-              Test: Monaco +377
-            </v-btn>
-            
-            <v-btn 
-              color="accent" 
-              @click="testFrenchNumber"
-              variant="outlined"
-              size="small"
-              class="mr-2 mb-2"
-            >
-              Test: France +33
-            </v-btn>
-          </div>
-        </v-col>
-        
-        <v-col cols="12" md="6">
-          <v-card variant="outlined" class="pa-4">
-            <v-card-title class="text-subtitle-1">Live Phone Data:</v-card-title>
-            <div class="mt-2">
-              <p><strong>Number:</strong> <code>{{ phoneNumber }}</code></p>
-              <p><strong>Valid:</strong> {{ phoneData?.isValid ? '✅ Valid' : '❌ Invalid' }}</p>
-              <p><strong>Country:</strong> {{ phoneData?.country?.name }} ({{ phoneData?.country?.iso2 }})</p>
-              <p><strong>Dial Code:</strong> {{ phoneData?.country?.dialCode }}</p>
-              <p><strong>Device:</strong> {{ isMobile ? '📱 Mobile' : '🖥️ Desktop' }}</p>
-            </div>
-          </v-card>
-        </v-col>
-      </v-row>
-
-      <v-alert type="success" variant="tonal" class="mt-6">
-        <template #title>🎯 Perfect Desktop Implementation:</template>
-        <ul class="mt-2">
-          <li><strong>Clean Design:</strong> Exactly like your screenshot - Vuetify text field with flag inside</li>
-          <li><strong>Compact Dropdown:</strong> Max 240px height, not oversized</li>
-          <li><strong>Real Flags:</strong> High-quality country flags from flagcdn.com</li>
-          <li><strong>Monaco Priority:</strong> 🇲🇨 Monaco and 🇫🇷 France appear first</li>
-          <li><strong>Smart Formatting:</strong> Uses libphonenumber-js for proper formatting</li>
-          <li><strong>Search Functionality:</strong> Type to find countries quickly</li>
-        </ul>
-      </v-alert>
-
-      <v-alert type="info" variant="tonal" class="mt-4">
-        <template #title>📱 Advanced Mobile Optimization:</template>
-        <ul class="mt-2">
-          <li><strong>Mobile Detection:</strong> Automatic device detection with resize handling</li>
-          <li><strong>Full-Screen Modal:</strong> Mobile dropdown opens as centered modal with overlay</li>
-          <li><strong>Touch-Friendly:</strong> All elements sized for proper touch targets (44px+)</li>
-          <li><strong>iOS Safari Fixes:</strong> Prevents zoom on focus, proper appearance handling</li>
-          <li><strong>Android Material:</strong> Material Design touch targets and interactions</li>
-          <li><strong>Accessibility:</strong> Reduced motion, high contrast, screen reader support</li>
-          <li><strong>Safe Areas:</strong> Handles notched devices with proper padding</li>
-          <li><strong>Landscape Support:</strong> Optimized layout for landscape orientation</li>
-          <li><strong>Backdrop Blur:</strong> Modern glass morphism effects on supported devices</li>
-          <li><strong>Smooth Scrolling:</strong> Native touch scrolling with momentum</li>
-        </ul>
-      </v-alert>
-
-      <v-alert type="warning" variant="tonal" class="mt-4">
-        <template #title>🧪 Test Mobile Features:</template>
-        <p class="mt-2 mb-2">To test mobile features, try:</p>
-        <ul>
-          <li><strong>Resize Window:</strong> Make browser window narrow (< 768px)</li>
-          <li><strong>Developer Tools:</strong> Toggle device emulation in Chrome DevTools</li>
-          <li><strong>Touch Device:</strong> Test on actual phone/tablet for best experience</li>
-        </ul>
-      </v-alert>
-    </v-card>
-  </div>
-</template>
-
-<script setup lang="ts">
-import PhoneInputWrapper from './PhoneInputWrapper.vue';
-
-const phoneNumber = ref('');
-const phoneData = ref<any>(null);
-const isMobile = ref(false);
-
-// Mobile detection
-onMounted(() => {
-  const checkMobile = () => {
-    isMobile.value = window.innerWidth <= 768 || 'ontouchstart' in window;
-  };
-  
-  checkMobile();
-  window.addEventListener('resize', checkMobile);
-  
-  onUnmounted(() => {
-    window.removeEventListener('resize', checkMobile);
-  });
-});
-
-const handlePhoneData = (data: any) => {
-  phoneData.value = data;
-  console.log('Phone data:', data);
-};
-
-const handleCountryChange = (country: any) => {
-  console.log('Country changed:', country);
-};
-
-const testUSNumber = () => {
-  phoneNumber.value = '+19179324061';
-};
-
-const testMonacoNumber = () => {
-  phoneNumber.value = '+37799123456';
-};
-
-const testFrenchNumber = () => {
-  phoneNumber.value = '+33123456789';
-};
-</script>
-
-<style scoped>
-.demo-container {
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-code {
-  background: rgba(var(--v-theme-primary), 0.1);
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: 'Roboto Mono', monospace;
-  font-size: 0.875rem;
-}
-</style>
diff --git a/components/PhoneInputWrapper.vue b/components/PhoneInputWrapper.vue
index 17ac51d..89bd447 100644
--- a/components/PhoneInputWrapper.vue
+++ b/components/PhoneInputWrapper.vue
@@ -35,7 +35,6 @@
                 'country-selector--open': dropdownOpen,
                 'country-selector--mobile': isMobile
               }"
-              @click.stop="toggleDropdown"
             >
               <img
                 :src="flagUrl"
diff --git a/nocodb-implementation-guide.md b/nocodb-implementation-guide.md
deleted file mode 100644
index c78fe8d..0000000
--- a/nocodb-implementation-guide.md
+++ /dev/null
@@ -1,1269 +0,0 @@
-# Comprehensive NocoDB Integration Implementation Guide
-
-This guide provides a complete implementation reference for integrating NocoDB with a Nuxt.js application, based on production patterns and best practices.
-
-## Table of Contents
-
-1. [Configuration & Setup](#configuration--setup)
-2. [Core Utility Layer](#core-utility-layer)
-3. [CRUD Operations Patterns](#crud-operations-patterns)
-4. [Advanced Features](#advanced-features)
-5. [API Endpoint Patterns](#api-endpoint-patterns)
-6. [TypeScript Integration](#typescript-integration)
-7. [Best Practices](#best-practices)
-8. [Real-World Examples](#real-world-examples)
-
-## Configuration & Setup
-
-### Environment Variables
-
-Create the following environment variables in your `.env` file:
-
-```env
-NUXT_NOCODB_URL=https://your-nocodb-instance.com
-NUXT_NOCODB_TOKEN=your-api-token-here
-```
-
-### Nuxt Configuration
-
-Configure NocoDB in your `nuxt.config.ts`:
-
-```typescript
-export default defineNuxtConfig({
-  runtimeConfig: {
-    nocodb: {
-      url: process.env.NUXT_NOCODB_URL || "",
-      token: process.env.NUXT_NOCODB_TOKEN || "",
-    },
-    // Other runtime config...
-  },
-})
-```
-
-## Core Utility Layer
-
-### Base Configuration Functions
-
-Create `server/utils/nocodb.ts` with the following foundation:
-
-```typescript
-import type { YourEntityType, YourEntityResponse, ExpenseFilters } from "@/utils/types";
-
-// Data normalization functions
-export const normalizePersonName = (name: string): string => {
-  if (!name) return 'Unknown';
-  
-  // Trim whitespace and normalize case
-  return name.trim()
-    .split(' ')
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-    .join(' ');
-};
-
-// Pagination interface
-export interface PageInfo {
-  pageSize: number;
-  totalRows: number;
-  isFirstPage: boolean;
-  isLastPage: boolean;
-  page: number;
-}
-
-// Response interfaces
-export interface EntityResponse<T> {
-  list: T[];
-  PageInfo: PageInfo;
-}
-
-// Table ID enumeration - Replace with your actual table IDs
-export enum Table {
-  YourEntity = "your-table-id-here",
-  AnotherEntity = "another-table-id-here",
-  // Add all your table IDs
-}
-
-/**
- * Convert date from DD-MM-YYYY format to YYYY-MM-DD format for PostgreSQL
- */
-const convertDateFormat = (dateString: string): string => {
-  if (!dateString) return dateString;
-  
-  // If it's already in ISO format or contains 'T', return as is
-  if (dateString.includes('T') || dateString.match(/^\d{4}-\d{2}-\d{2}/)) {
-    return dateString;
-  }
-  
-  // Handle DD-MM-YYYY format
-  const ddmmyyyyMatch = dateString.match(/^(\d{1,2})-(\d{1,2})-(\d{4})$/);
-  if (ddmmyyyyMatch) {
-    const [, day, month, year] = ddmmyyyyMatch;
-    const convertedDate = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
-    console.log(`[convertDateFormat] Converted ${dateString} to ${convertedDate}`);
-    return convertedDate;
-  }
-  
-  // Handle DD/MM/YYYY format
-  const ddmmyyyySlashMatch = dateString.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
-  if (ddmmyyyySlashMatch) {
-    const [, day, month, year] = ddmmyyyySlashMatch;
-    const convertedDate = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
-    console.log(`[convertDateFormat] Converted ${dateString} to ${convertedDate}`);
-    return convertedDate;
-  }
-  
-  console.warn(`[convertDateFormat] Could not parse date format: ${dateString}`);
-  return dateString;
-};
-
-export const getNocoDbConfiguration = () => {
-  const config = useRuntimeConfig().nocodb;
-  console.log('[nocodb] Configuration URL:', config.url);
-  return config;
-};
-
-export const createTableUrl = (table: Table) => {
-  const url = `${getNocoDbConfiguration().url}/api/v2/tables/${table}/records`;
-  console.log('[nocodb] Table URL:', url);
-  return url;
-};
-```
-
-## CRUD Operations Patterns
-
-### READ Operations
-
-#### Basic List Fetching
-
-```typescript
-export const getEntities = async () =>
-  $fetch<EntityResponse<YourEntityType>>(createTableUrl(Table.YourEntity), {
-    headers: {
-      "xc-token": getNocoDbConfiguration().token,
-    },
-    params: {
-      limit: 1000,
-    },
-  });
-```
-
-#### Single Record Retrieval
-
-```typescript
-export const getEntityById = async (id: string) => {
-  console.log('[nocodb.getEntityById] Fetching entity ID:', id);
-  
-  const result = await $fetch<YourEntityType>(`${createTableUrl(Table.YourEntity)}/${id}`, {
-    headers: {
-      "xc-token": getNocoDbConfiguration().token,
-    },
-  });
-  
-  console.log('[nocodb.getEntityById] Successfully retrieved entity:', result.Id);
-  return result;
-};
-```
-
-#### Advanced Filtering with Dynamic Parameters
-
-```typescript
-const buildEntityParams = (filters?: YourFiltersType) => {
-  const params: any = { limit: 1000 };
-  
-  // Build filter conditions
-  if (filters?.startDate && filters?.endDate) {
-    const startDate = filters.startDate.includes('T') ? filters.startDate.split('T')[0] : filters.startDate;
-    const endDate = filters.endDate.includes('T') ? filters.endDate.split('T')[0] : filters.endDate;
-    params.where = `(DateField,gte,${startDate})~and(DateField,lte,${endDate})`;
-  } else if (filters?.startDate) {
-    const startDate = filters.startDate.includes('T') ? filters.startDate.split('T')[0] : filters.startDate;
-    params.where = `(DateField,gte,${startDate})`;
-  } else if (filters?.endDate) {
-    const endDate = filters.endDate.includes('T') ? filters.endDate.split('T')[0] : filters.endDate;
-    params.where = `(DateField,lte,${endDate})`;
-  }
-  
-  // Add additional filters
-  if (filters?.category) {
-    const categoryFilter = `(Category,eq,${encodeURIComponent(filters.category)})`;
-    params.where = params.where ? `${params.where}~and${categoryFilter}` : categoryFilter;
-  }
-  
-  // Sort by date descending (newest first)
-  params.sort = '-DateField';
-  
-  return params;
-};
-
-export const getEntitiesFiltered = async (filters?: YourFiltersType) => {
-  console.log('[nocodb.getEntitiesFiltered] Fetching with filters...', filters);
-  
-  const startTime = Date.now();
-  
-  try {
-    const result = await $fetch<EntityResponse<YourEntityType>>(createTableUrl(Table.YourEntity), {
-      headers: { "xc-token": getNocoDbConfiguration().token },
-      params: buildEntityParams(filters)
-    });
-
-    console.log('[nocodb.getEntitiesFiltered] Successfully fetched entities, count:', result.list?.length || 0);
-    console.log('[nocodb.getEntitiesFiltered] Request duration:', Date.now() - startTime, 'ms');
-    
-    return result;
-  } catch (error: any) {
-    console.error('[nocodb.getEntitiesFiltered] Error fetching entities:', error);
-    throw error;
-  }
-};
-```
-
-### CREATE Operations
-
-```typescript
-export const createEntity = async (data: Partial<YourEntityType>) => {
-  console.log('[nocodb.createEntity] Creating entity with fields:', Object.keys(data));
-  
-  // Create a clean data object that matches the entity schema
-  const cleanData: Record<string, any> = {};
-
-  // Only include fields that are part of the entity schema
-  const allowedFields = [
-    "Field1",
-    "Field2", 
-    "Field3",
-    // Add your actual field names here
-  ];
-
-  // Filter the data to only include allowed fields
-  for (const field of allowedFields) {
-    if (field in data) {
-      cleanData[field] = (data as any)[field];
-    }
-  }
-
-  // Remove any computed or relation fields that shouldn't be sent
-  delete cleanData.Id;
-  delete cleanData.CreatedAt;
-  delete cleanData.UpdatedAt;
-
-  // Fix date formatting for PostgreSQL
-  if (cleanData['DateField']) {
-    cleanData['DateField'] = convertDateFormat(cleanData['DateField']);
-  }
-
-  console.log('[nocodb.createEntity] Clean data fields:', Object.keys(cleanData));
-  const url = createTableUrl(Table.YourEntity);
-
-  try {
-    const result = await $fetch<YourEntityType>(url, {
-      method: "POST",
-      headers: {
-        "xc-token": getNocoDbConfiguration().token,
-      },
-      body: cleanData,
-    });
-    console.log('[nocodb.createEntity] Created entity with ID:', result.Id);
-    return result;
-  } catch (error) {
-    console.error('[nocodb.createEntity] Create failed:', error);
-    console.error('[nocodb.createEntity] Error details:', error instanceof Error ? error.message : 'Unknown error');
-    throw error;
-  }
-};
-```
-
-### UPDATE Operations with Retry Logic
-
-```typescript
-export const updateEntity = async (id: string, data: Partial<YourEntityType>, retryCount = 0): Promise<YourEntityType> => {
-  console.log('[nocodb.updateEntity] Updating entity:', id, 'Retry:', retryCount);
-  console.log('[nocodb.updateEntity] Data fields:', Object.keys(data));
-  
-  // First, try to verify the record exists
-  if (retryCount === 0) {
-    try {
-      console.log('[nocodb.updateEntity] Verifying record exists...');
-      const existingRecord = await getEntityById(id);
-      console.log('[nocodb.updateEntity] Record exists with ID:', existingRecord.Id);
-    } catch (verifyError: any) {
-      console.error('[nocodb.updateEntity] Failed to verify record:', verifyError);
-      if (verifyError.statusCode === 404 || verifyError.status === 404) {
-        console.error('[nocodb.updateEntity] Record verification failed - record not found');
-      }
-    }
-  }
-  
-  // Create a clean data object
-  const cleanData: Record<string, any> = {};
-
-  // Only include fields that are part of the entity schema
-  const allowedFields = [
-    "Field1",
-    "Field2", 
-    "Field3",
-    // Add your actual field names here
-  ];
-
-  // Filter the data to only include allowed fields
-  for (const field of allowedFields) {
-    if (field in data) {
-      const value = (data as any)[field];
-      
-      // Handle clearing fields - NocoDB requires null for clearing, not undefined
-      if (value === undefined) {
-        cleanData[field] = null;
-        console.log(`[nocodb.updateEntity] Converting undefined to null for field: ${field}`);
-      } else {
-        cleanData[field] = value;
-      }
-    }
-  }
-
-  // Fix date formatting for PostgreSQL
-  if (cleanData['DateField']) {
-    cleanData['DateField'] = convertDateFormat(cleanData['DateField']);
-  }
-
-  console.log('[nocodb.updateEntity] Clean data fields:', Object.keys(cleanData));
-  
-  // PATCH requires ID in the body (not in URL)
-  cleanData.Id = parseInt(id);
-  
-  const url = createTableUrl(Table.YourEntity);
-
-  try {
-    console.log('[nocodb.updateEntity] Sending PATCH request');
-    
-    const result = await $fetch<YourEntityType>(url, {
-      method: "PATCH",
-      headers: {
-        "xc-token": getNocoDbConfiguration().token,
-        "Content-Type": "application/json"
-      },
-      body: cleanData
-    });
-    console.log('[nocodb.updateEntity] Update successful for ID:', id);
-    return result;
-  } catch (error: any) {
-    console.error('[nocodb.updateEntity] Update failed:', error);
-    console.error('[nocodb.updateEntity] Error details:', error instanceof Error ? error.message : 'Unknown error');
-    
-    // If it's a 404 error and we haven't retried too many times, wait and retry
-    if ((error.statusCode === 404 || error.status === 404) && retryCount < 3) {
-      console.error('[nocodb.updateEntity] 404 Error - Record not found. This might be a sync delay.');
-      console.error(`Retrying in ${(retryCount + 1) * 1000}ms... (Attempt ${retryCount + 1}/3)`);
-      
-      // Wait with exponential backoff
-      await new Promise(resolve => setTimeout(resolve, (retryCount + 1) * 1000));
-      
-      // Retry the update
-      return updateEntity(id, data, retryCount + 1);
-    }
-    
-    throw error;
-  }
-};
-```
-
-### DELETE Operations
-
-```typescript
-export const deleteEntity = async (id: string) => {
-  const startTime = Date.now();
-  console.log('[nocodb.deleteEntity] =========================');
-  console.log('[nocodb.deleteEntity] DELETE operation started at:', new Date().toISOString());
-  console.log('[nocodb.deleteEntity] Target ID:', id);
-  
-  const url = createTableUrl(Table.YourEntity);
-  console.log('[nocodb.deleteEntity] URL:', url);
-  
-  const requestBody = {
-    "Id": parseInt(id)
-  };
-  
-  console.log('[nocodb.deleteEntity] Request configuration:');
-  console.log('  Method: DELETE');
-  console.log('  URL:', url);
-  console.log('  Body:', JSON.stringify(requestBody, null, 2));
-  
-  try {
-    const result = await $fetch(url, {
-      method: "DELETE",
-      headers: {
-        "xc-token": getNocoDbConfiguration().token,
-        "Content-Type": "application/json"
-      },
-      body: requestBody
-    });
-    
-    console.log('[nocodb.deleteEntity] DELETE successful');
-    console.log('[nocodb.deleteEntity] Duration:', Date.now() - startTime, 'ms');
-    
-    return result;
-  } catch (error: any) {
-    console.error('[nocodb.deleteEntity] DELETE FAILED');
-    console.error('[nocodb.deleteEntity] Error type:', error.constructor.name);
-    console.error('[nocodb.deleteEntity] Error message:', error.message);
-    console.error('[nocodb.deleteEntity] Duration:', Date.now() - startTime, 'ms');
-    throw error;
-  }
-};
-```
-
-## Advanced Features
-
-### Relationship Management
-
-#### Fetching Linked Records
-
-```typescript
-export const getEntityWithRelations = async (id: string) => {
-  console.log('[nocodb.getEntityWithRelations] Fetching entity with relations:', id);
-  
-  try {
-    // First fetch the basic entity data
-    const result = await $fetch<YourEntityType>(`${createTableUrl(Table.YourEntity)}/${id}`, {
-      headers: {
-        "xc-token": getNocoDbConfiguration().token,
-      },
-      params: {
-        fields: '*'
-      }
-    });
-    
-    console.log('[nocodb.getEntityWithRelations] Successfully fetched entity:', result.Id);
-    
-    // Now fetch and populate the related records
-    if (result['RelatedField']) {
-      // Handle case where related field is a count (number)
-      if (typeof result['RelatedField'] === 'number' && result['RelatedField'] > 0) {
-        const relatedCount = result['RelatedField'] as number;
-        console.log(`[nocodb.getEntityWithRelations] Entity has ${relatedCount} related records`);
-        
-        // Fetch the linked records using the links API
-        try {
-          const config = getNocoDbConfiguration();
-          const tableId = "your-table-id";
-          const fieldId = "your-relation-field-id";
-          
-          const linkUrl = `${config.url}/api/v2/tables/${tableId}/links/${fieldId}/records/${result.Id}`;
-          console.log(`[nocodb.getEntityWithRelations] Fetching linked records from: ${linkUrl}`);
-          
-          const linkedResponse = await $fetch<any>(linkUrl, {
-            headers: {
-              "xc-token": config.token,
-            },
-            params: {
-              limit: 100
-            }
-          });
-          
-          if (linkedResponse && linkedResponse.list && Array.isArray(linkedResponse.list)) {
-            // The links API returns limited data, so we need to fetch full records
-            const fullRelatedDetails = await Promise.all(
-              linkedResponse.list.map(async (linkedRecord: any) => {
-                try {
-                  const recordId = linkedRecord.Id || linkedRecord.id;
-                  if (recordId) {
-                    const fullDetails = await getRelatedEntityById(recordId.toString());
-                    return fullDetails;
-                  }
-                  return linkedRecord;
-                } catch (error) {
-                  console.error(`[nocodb.getEntityWithRelations] Failed to fetch full details for record ${linkedRecord.Id}:`, error);
-                  return linkedRecord;
-                }
-              })
-            );
-            
-            result['RelatedField'] = fullRelatedDetails;
-            console.log(`[nocodb.getEntityWithRelations] Successfully fetched full details for ${fullRelatedDetails.length} related records`);
-          }
-        } catch (linkError) {
-          console.error(`[nocodb.getEntityWithRelations] Failed to fetch linked records:`, linkError);
-        }
-      }
-    }
-    
-    return result;
-  } catch (error: any) {
-    console.error('[nocodb.getEntityWithRelations] Error fetching entity with relations:', error);
-    throw error;
-  }
-};
-```
-
-#### Linking/Unlinking Records
-
-```typescript
-export const linkRecords = async (parentTableId: string, parentId: string, childTableId: string, childId: string, fieldId: string) => {
-  console.log('[nocodb.linkRecords] Linking records:', { parentId, childId, fieldId });
-  
-  const config = getNocoDbConfiguration();
-  const linkUrl = `${config.url}/api/v2/tables/${parentTableId}/links/${fieldId}/records/${parentId}`;
-  
-  try {
-    const result = await $fetch(linkUrl, {
-      method: "POST",
-      headers: {
-        "xc-token": config.token,
-        "Content-Type": "application/json"
-      },
-      body: {
-        Id: parseInt(childId)
-      }
-    });
-    
-    console.log('[nocodb.linkRecords] Successfully linked records');
-    return result;
-  } catch (error: any) {
-    console.error('[nocodb.linkRecords] Failed to link records:', error);
-    throw error;
-  }
-};
-
-export const unlinkRecords = async (parentTableId: string, parentId: string, childTableId: string, childId: string, fieldId: string) => {
-  console.log('[nocodb.unlinkRecords] Unlinking records:', { parentId, childId, fieldId });
-  
-  const config = getNocoDbConfiguration();
-  const unlinkUrl = `${config.url}/api/v2/tables/${parentTableId}/links/${fieldId}/records/${parentId}`;
-  
-  try {
-    const result = await $fetch(unlinkUrl, {
-      method: "DELETE",
-      headers: {
-        "xc-token": config.token,
-        "Content-Type": "application/json"
-      },
-      body: {
-        Id: parseInt(childId)
-      }
-    });
-    
-    console.log('[nocodb.unlinkRecords] Successfully unlinked records');
-    return result;
-  } catch (error: any) {
-    console.error('[nocodb.unlinkRecords] Failed to unlink records:', error);
-    throw error;
-  }
-};
-```
-
-### Sorting and Advanced Querying
-
-```typescript
-export const getEntitiesWithSorting = async () => {
-  try {
-    const result = await $fetch<EntityResponse<YourEntityType>>(createTableUrl(Table.YourEntity), {
-      headers: {
-        "xc-token": getNocoDbConfiguration().token,
-      },
-      params: {
-        limit: 1000,
-        fields: '*'
-      },
-    });
-
-    // Apply custom sorting logic if needed
-    if (result.list && Array.isArray(result.list)) {
-      result.list.sort((a, b) => {
-        // Example: Sort by a field with letter and number parts
-        const fieldA = a['SortField'] || '';
-        const fieldB = b['SortField'] || '';
-        
-        // Extract letter and number parts
-        const matchA = fieldA.match(/^([A-Za-z]+)(\d+)$/);
-        const matchB = fieldB.match(/^([A-Za-z]+)(\d+)$/);
-        
-        if (matchA && matchB) {
-          const [, letterA, numberA] = matchA;
-          const [, letterB, numberB] = matchB;
-          
-          // First sort by letter
-          const letterCompare = letterA.localeCompare(letterB);
-          if (letterCompare !== 0) {
-            return letterCompare;
-          }
-          
-          // Then sort by number within the same letter group
-          return parseInt(numberA) - parseInt(numberB);
-        }
-        
-        // Fallback to string comparison
-        return fieldA.localeCompare(fieldB);
-      });
-    }
-    
-    return result;
-  } catch (error: any) {
-    console.error('[nocodb.getEntitiesWithSorting] Error:', error);
-    throw error;
-  }
-};
-```
-
-## API Endpoint Patterns
-
-### Standard Endpoint Structure
-
-```typescript
-// server/api/get-entities.ts
-import { getEntities } from "../utils/nocodb";
-import { requireAuth } from "../utils/auth";
-
-export default defineEventHandler(async (event) => {
-  console.log('[get-entities] Request received');
-
-  // Check authentication (adapt to your auth system)
-  await requireAuth(event);
-
-  try {
-    console.log('[get-entities] Fetching entities...');
-    const entities = await getEntities();
-    console.log('[get-entities] Successfully fetched entities, count:', entities.list?.length || 0);
-    return entities;
-  } catch (error) {
-    console.error('[get-entities] Error occurred:', error);
-    console.error('[get-entities] Error details:', error instanceof Error ? error.message : 'Unknown error');
-    throw error;
-  }
-});
-```
-
-### POST Endpoint with Validation
-
-```typescript
-// server/api/create-entity.ts
-import { createEntity } from "../utils/nocodb";
-import { requireAuth } from "../utils/auth";
-
-export default defineEventHandler(async (event) => {
-  console.log('[create-entity] Request received');
-
-  await requireAuth(event);
-
-  try {
-    const body = await readBody(event);
-    console.log('[create-entity] Request body fields:', body ? Object.keys(body) : 'none');
-    
-    if (!body || Object.keys(body).length === 0) {
-      console.error('[create-entity] No data provided');
-      throw createError({ statusCode: 400, statusMessage: "No data provided" });
-    }
-    
-    // Validate required fields
-    const requiredFields = ['Field1', 'Field2']; // Add your required fields
-    const missingFields = requiredFields.filter(field => !body[field]);
-    
-    if (missingFields.length > 0) {
-      throw createError({ 
-        statusCode: 400, 
-        statusMessage: `Missing required fields: ${missingFields.join(', ')}` 
-      });
-    }
-    
-    console.log('[create-entity] Creating new entity with fields:', Object.keys(body));
-    const createdEntity = await createEntity(body);
-    console.log('[create-entity] Successfully created entity with ID:', createdEntity.Id);
-    
-    return createdEntity;
-  } catch (error) {
-    console.error('[create-entity] Error occurred:', error);
-    console.error('[create-entity] Error stack:', error instanceof Error ? error.stack : 'No stack trace');
-    
-    if (error instanceof Error) {
-      throw createError({ statusCode: 500, statusMessage: error.message });
-    } else {
-      throw createError({
-        statusCode: 500,
-        statusMessage: "An unexpected error occurred",
-      });
-    }
-  }
-});
-```
-
-## TypeScript Integration
-
-### Entity Type Definitions
-
-Create comprehensive types in `utils/types.ts`:
-
-```typescript
-// Enums for type safety
-export enum EntityStatus {
-  Active = 'Active',
-  Inactive = 'Inactive',
-  Pending = 'Pending'
-}
-
-export enum EntityCategory {
-  TypeA = 'Type A',
-  TypeB = 'Type B',
-  TypeC = 'Type C'
-}
-
-// Main entity interface
-export interface YourEntityType {
-  Id: number;
-  Name: string;
-  Description?: string;
-  Status: EntityStatus;
-  Category: EntityCategory;
-  DateCreated: string;
-  DateModified?: string;
-  // Add your specific fields
-  
-  // Computed fields (added by API processing)
-  DisplayName?: string;
-  FormattedDate?: string;
-  
-  // Related entities
-  RelatedEntities?: RelatedEntityType[];
-  
-  // File attachments
-  Attachments?: FileAttachment[];
-}
-
-export interface RelatedEntityType {
-  Id: number;
-  Name: string;
-  Type: string;
-}
-
-export interface FileAttachment {
-  id: string;
-  url: string;
-  signedUrl: string;
-  title: string;
-  mimetype: string;
-  size: number;
-  width?: number;
-  height?: number;
-  thumbnails?: {
-    tiny: { signedUrl: string };
-    small: { signedUrl: string };
-    card_cover: { signedUrl: string };
-  };
-}
-
-// Filter interfaces
-export interface EntityFilters {
-  startDate?: string;
-  endDate?: string;
-  status?: EntityStatus;
-  category?: EntityCategory;
-  searchTerm?: string;
-}
-
-// Response interfaces
-export interface EntityResponse {
-  list: YourEntityType[];
-  PageInfo: PageInfo;
-}
-
-export interface PageInfo {
-  pageSize: number;
-  totalRows: number;
-  isFirstPage: boolean;
-  isLastPage: boolean;
-  page: number;
-}
-```
-
-### Generic Helper Functions
-
-```typescript
-// Generic function for any entity type
-export const getGenericEntity = async <T>(table: Table, id: string): Promise<T> => {
-  console.log(`[nocodb.getGenericEntity] Fetching ${table} ID: ${id}`);
-  
-  const result = await $fetch<T>(`${createTableUrl(table)}/${id}`, {
-    headers: {
-      "xc-token": getNocoDbConfiguration().token,
-    },
-  });
-  
-  console.log(`[nocodb.getGenericEntity] Successfully retrieved ${table}:`, (result as any).Id);
-  return result;
-};
-
-// Generic list function
-export const getGenericEntityList = async <T>(table: Table, params?: any): Promise<EntityResponse<T>> => {
-  console.log(`[nocodb.getGenericEntityList] Fetching ${table} list with params:`, params);
-  
-  const result = await $fetch<EntityResponse<T>>(createTableUrl(table), {
-    headers: {
-      "xc-token": getNocoDbConfiguration().token,
-    },
-    params: {
-      limit: 1000,
-      ...params
-    }
-  });
-  
-  console.log(`[nocodb.getGenericEntityList] Successfully fetched ${table} list, count:`, result.list?.length || 0);
-  return result;
-};
-```
-
-## Best Practices
-
-### 1. Comprehensive Logging
-
-```typescript
-// Always include comprehensive logging for debugging
-const logOperation = (operation: string, entityType: string, data?: any) => {
-  console.log(`[nocodb.${operation}] =========================`);
-  console.log(`[nocodb.${operation}] Operation: ${operation.toUpperCase()}`);
-  console.log(`[nocodb.${operation}] Entity: ${entityType}`);
-  console.log(`[nocodb.${operation}] Timestamp: ${new Date().toISOString()}`);
-  if (data) {
-    console.log(`[nocodb.${operation}] Data:`, JSON.stringify(data, null, 2));
-  }
-  console.log(`[nocodb.${operation}] =========================`);
-};
-```
-
-### 2. Error Handling Strategy
-
-```typescript
-// Centralized error handling
-export const handleNocoDbError = (error: any, operation: string, entityType: string) => {
-  console.error(`[nocodb.${operation}] =========================`);
-  console.error(`[nocodb.${operation}] ERROR in ${operation} for ${entityType}`);
-  console.error(`[nocodb.${operation}] Error type:`, error.constructor?.name || 'Unknown');
-  console.error(`[nocodb.${operation}] Error status:`, error.statusCode || error.status || 'Unknown');
-  console.error(`[nocodb.${operation}] Error message:`, error.message || 'Unknown error');
-  console.error(`[nocodb.${operation}] Error data:`, error.data);
-  console.error(`[nocodb.${operation}] =========================`);
-  
-  // Provide more specific error messages
-  if (error.statusCode === 401 || error.status === 401) {
-    throw createError({
-      statusCode: 401,
-      statusMessage: `Authentication failed when accessing ${entityType}. Please check your access permissions.`
-    });
-  } else if (error.statusCode === 403 || error.status === 403) {
-    throw createError({
-      statusCode: 403,
-      statusMessage: `Access denied to ${entityType}. This feature requires appropriate privileges.`
-    });
-  } else if (error.statusCode === 404 || error.status === 404) {
-    throw createError({
-      statusCode: 404,
-      statusMessage: `${entityType} not found. Please verify the record exists.`
-    });
-  } else if (error.code === 'NETWORK_ERROR' || error.code === 'TIMEOUT') {
-    throw createError({
-      statusCode: 503,
-      statusMessage: `${entityType} database is temporarily unavailable. Please try again in a moment.`
-    });
-  }
-  
-  throw error;
-};
-```
-
-### 3. Performance Optimization
-
-```typescript
-// Cache frequently accessed data
-const entityCache = new Map<string, { data: any; timestamp: number }>();
-const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
-
-export const getCachedEntity = async (id: string): Promise<YourEntityType | null> => {
-  const cacheKey = `entity-${id}`;
-  const cached = entityCache.get(cacheKey);
-  
-  if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
-    console.log('[nocodb.getCachedEntity] Cache hit for ID:', id);
-    return cached.data;
-  }
-  
-  try {
-    const entity = await getEntityById(id);
-    entityCache.set(cacheKey, { data: entity, timestamp: Date.now() });
-    console.log('[nocodb.getCachedEntity] Cache updated for ID:', id);
-    return entity;
-  } catch (error) {
-    console.error('[nocodb.getCachedEntity] Failed to fetch and cache entity:', error);
-    return null;
-  }
-};
-
-// Clear cache when entity is updated
-export const clearEntityCache = (id: string) => {
-  const cacheKey = `entity-${id}`;
-  entityCache.delete(cacheKey);
-  console.log('[nocodb.clearEntityCache] Cache cleared for ID:', id);
-};
-```
-
-### 4. Data Validation
-
-```typescript
-// Input validation functions
-export const validateEntityData = (data: Partial<YourEntityType>): string[] => {
-  const errors: string[] = [];
-  
-  // Required field validation
-  if (!data.Name || data.Name.trim().length === 0) {
-    errors.push('Name is required');
-  }
-  
-  // Format validation
-  if (data.Email && !isValidEmail(data.Email)) {
-    errors.push('Invalid email format');
-  }
-  
-  // Range validation
-  if (data.Age && (data.Age < 0 || data.Age > 150)) {
-    errors.push('Age must be between 0 and 150');
-  }
-  
-  return errors;
-};
-
-const isValidEmail = (email: string): boolean => {
-  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-  return emailRegex.test(email);
-};
-```
-
-### 5. Batch Operations
-
-```typescript
-// Batch create multiple entities
-export const createEntitiesBatch = async (entities: Partial<YourEntityType>[]): Promise<YourEntityType[]> => {
-  console.log('[nocodb.createEntitiesBatch] Creating batch of', entities.length, 'entities');
-  
-  const results: YourEntityType[] = [];
-  const errors: string[] = [];
-  
-  for (let i = 0; i < entities.length; i++) {
-    try {
-      const result = await createEntity(entities[i]);
-      results.push(result);
-      console.log(`[nocodb.createEntitiesBatch] Created entity ${i + 1}/${entities.length}:`, result.Id);
-    } catch (error) {
-      const errorMsg = `Failed to create entity ${i + 1}: ${error instanceof Error ? error.message : 'Unknown error'}`;
-      errors.push(errorMsg);
-      console.error('[nocodb.createEntitiesBatch]', errorMsg);
-    }
-  }
-  
-  if (errors.length > 0) {
-    console.warn('[nocodb.createEntitiesBatch] Batch completed with errors:', errors);
-  }
-  
-  console.log('[nocodb.createEntitiesBatch] Batch completed. Created:', results.length, 'Errors:', errors.length);
-  return results;
-};
-```
-
-## Real-World Examples
-
-### Example 1: Interest Management System
-
-Based on the actual implementation patterns from your codebase:
-
-```typescript
-// Interest entity with comprehensive field management
-export interface Interest {
-  Id: number;
-  "Full Name": string;
-  "Yacht Name": string;
-  Length: string;
-  "Email Address": string;
-  "Sales Process Level": InterestSalesProcessLevel;
-  "Phone Number": string;
-  "EOI Status": EOIStatus;
-  "Berth Info Sent Status": BerthInfoSentStatus;
-  "Contract Status": ContractStatus;
-  "Date Added": string;
-  "Created At": string;
-  // Signature links
-  "Signature Link Client"?: string;
-  "Signature Link CC"?: string;
-  "Signature Link Developer"?: string;
-  // Document ID
-  "documensoID"?: string;
-}
-
-export const updateInterestWithValidation = async (id: string, data: Partial<Interest>): Promise<Interest> => {
-  console.log('[nocodb.updateInterestWithValidation] Updating interest:', id);
-  
-  // Validate the data before processing
-  const validationErrors = validateInterestData(data);
-  if (validationErrors.length > 0) {
-    throw createError({
-      statusCode: 400,
-      statusMessage: `Validation failed: ${validationErrors.join(', ')}`
-    });
-  }
-  
-  // Clean and filter data
-  const cleanData: Record<string, any> = {};
-  
-  const allowedFields = [
-    "Full Name", "Yacht Name", "Length", "Address", "Email Address",
-    "Sales Process Level", "Phone Number", "Extra Comments",
-    "Berth Size Desired", "Date Added", "Width", "Depth",
-    "Source", "Contact Method Preferred", "Lead Category",
-    "EOI Status", "Berth Info Sent Status", "Contract Sent Status",
-    "Deposit 10% Status", "Contract Status",
-    "Signature Link Client", "Signature Link CC", "Signature Link Developer",
-    "documensoID"
-  ];
-  
-  for (const field of allowedFields) {
-    if (field in data) {
-      const value = (data as any)[field];
-      cleanData[field] = value === undefined ? null : value;
-    }
-  }
-  
-  // Handle date formatting
-  if (cleanData['Date Added']) {
-    cleanData['Date Added'] = convertDateFormat(cleanData['Date Added']);
-  }
-  
-  // Include ID for PATCH request
-  cleanData.Id = parseInt(id);
-  
-  try {
-    const result = await $fetch<Interest>(createTableUrl(Table.Interest), {
-      method: "PATCH",
-      headers: {
-        "xc-token": getNocoDbConfiguration().token,
-        "Content-Type": "application/json"
-      },
-      body: cleanData
-    });
-    
-    console.log('[nocodb.updateInterestWithValidation] Successfully updated interest:', result.Id);
-    return result;
-  } catch (error: any) {
-    console.error('[nocodb.updateInterestWithValidation] Update failed:', error);
-    throw handleNocoDbError(error, 'updateInterestWithValidation', 'Interest');
-  }
-};
-
-const validateInterestData = (data: Partial<Interest>): string[] => {
-  const errors: string[] = [];
-  
-  if (data["Full Name"] && data["Full Name"].trim().length === 0) {
-    errors.push("Full Name cannot be empty");
-  }
-  
-  if (data["Email Address"] && !isValidEmail(data["Email Address"])) {
-    errors.push("Invalid email address format");
-  }
-  
-  if (data["Phone Number"] && data["Phone Number"].length < 10) {
-    errors.push("Phone number must be at least 10 digits");
-  }
-  
-  return errors;
-};
-```
-
-### Example 2: Berth Management with Relationships
-
-```typescript
-// Berth entity with interested parties relationship
-export const getBerthWithInterestedParties = async (id: string): Promise<Berth> => {
-  console.log('[nocodb.getBerthWithInterestedParties] Fetching berth:', id);
-  
-  try {
-    // Fetch basic berth data
-    const berth = await $fetch<Berth>(`${createTableUrl(Table.Berth)}/${id}`, {
-      headers: {
-        "xc-token": getNocoDbConfiguration().token,
-      }
-    });
-    
-    // Handle interested parties relationship
-    if (berth['Interested Parties']) {
-      if (typeof berth['Interested Parties'] === 'number' && berth['Interested Parties'] > 0) {
-        const partyCount = berth['Interested Parties'] as number;
-        console.log(`[nocodb.getBerthWithInterestedParties] Fetching ${partyCount} interested parties`);
-        
-        try {
-          const config = getNocoDbConfiguration();
-          const berthsTableId = "mczgos9hr3oa9qc";
-          const interestedPartiesFieldId = "c7q2z2rb27c1cb5";
-          
-          const linkUrl = `${config.url}/api/v2/tables/${berthsTableId}/links/${interestedPartiesFieldId}/records/${berth.Id}`;
-          
-          const linkedResponse = await $fetch<any>(linkUrl, {
-            headers: { "xc-token": config.token },
-            params: { limit: 100 }
-          });
-          
-          if (linkedResponse?.list?.length > 0) {
-            const fullPartyDetails = await Promise.all(
-              linkedResponse.list.map(async (party: any) => {
-                try {
-                  const partyId = party.Id || party.id;
-                  return partyId ? await getInterestById(partyId.toString()) : party;
-                } catch (error) {
-                  console.error(`[nocodb.getBerthWithInterestedParties] Failed to fetch party ${party.Id}:`, error);
-                  return party;
-                }
-              })
-            );
-            
-            berth['Interested Parties'] = fullPartyDetails;
-            console.log(`[nocodb.getBerthWithInterestedParties] Successfully populated ${fullPartyDetails.length} interested parties`);
-          }
-        } catch (linkError) {
-          console.error(`[nocodb.getBerthWithInterestedParties] Failed to fetch linked parties:`, linkError);
-          // Provide fallback data
-          berth['Interested Parties'] = Array.from({ length: partyCount }, (_, i) => ({
-            Id: i + 1,
-            'Full Name': `Party ${i + 1}`,
-            'Sales Process Level': null,
-            'EOI Status': null,
-            'Contract Status': null
-          })) as any;
-        }
-      }
-    }
-    
-    return berth;
-  } catch (error: any) {
-    console.error('[nocodb.getBerthWithInterestedParties] Error fetching berth:', error);
-    throw handleNocoDbError(error, 'getBerthWithInterestedParties', 'Berth');
-  }
-};
-```
-
-### Example 3: Expense Tracking with Currency Conversion
-
-```typescript
-// Advanced expense management with filtering and post-processing
-export const getExpensesWithProcessing = async (filters?: ExpenseFilters) => {
-  console.log('[nocodb.getExpensesWithProcessing] Fetching expenses with filters:', filters);
-  const startTime = Date.now();
-  
-  try {
-    const result = await $fetch<ExpensesResponse>(createTableUrl(Table.Expense), {
-      headers: { "xc-token": getNocoDbConfiguration().token },
-      params: buildExpenseParams(filters)
-    });
-    
-    console.log('[nocodb.getExpensesWithProcessing] Fetched', result.list?.length || 0, 'expenses');
-    
-    // Post-process expenses with currency conversion
-    if (result.list?.length > 0) {
-      // Add computed price numbers
-      result.list = result.list.map(expense => ({
-        ...expense,
-        PriceNumber: parseFloat(expense.Price?.replace(/[€$,]/g, '') || '0') || 0
-      }));
-      
-      // Apply currency conversion (integrate with your currency service)
-      const { processExpenseWithCurrency } = await import('@/server/utils/currency');
-      const processedExpenses = await Promise.all(
-        result.list.map(expense => processExpenseWithCurrency(expense))
-      );
-      
-      // Calculate summary statistics
-      const summary = {
-        totalCount: processedExpenses.length,
-        totalUSD: processedExpenses.reduce((sum, e) => sum + (e.PriceUSD || e.PriceNumber || 0), 0),
-        totalEUR: processedExpenses.reduce((sum, e) => sum + (e.PriceEUR || e.PriceNumber || 0), 0),
-        uniquePayers: [...new Set(processedExpenses.map(e => e.Payer))].length,
-        currencies: [...new Set(processedExpenses.map(e => e.Currency || e.currency))].filter(Boolean)
-      };
-      
-      console.log('[nocodb.getExpensesWithProcessing] Processing completed in', Date.now() - startTime, 'ms');
-      
-      return {
-        list: processedExpenses,
-        PageInfo: result.PageInfo,
-        summary
-      };
-    }
-    
-    return result;
-  } catch (error: any) {
-    console.error('[nocodb.getExpensesWithProcessing] Error:', error);
-    throw handleNocoDbError(error, 'getExpensesWithProcessing', 'Expense');
-  }
-};
-
-const buildExpenseParams = (filters?: ExpenseFilters) => {
-  const params: any = { limit: 1000, sort: '-Time' };
-  
-  if (filters?.startDate && filters?.endDate) {
-    const start = filters.startDate.includes('T') ? filters.startDate.split('T')[0] : filters.startDate;
-    const end = filters.endDate.includes('T') ? filters.endDate.split('T')[0] : filters.endDate;
-    params.where = `(Time,gte,${start})~and(Time,lte,${end})`;
-  }
-  
-  if (filters?.payer) {
-    const payerFilter = `(Payer,eq,${encodeURIComponent(filters.payer)})`;
-    params.where = params.where ? `${params.where}~and${payerFilter}` : payerFilter;
-  }
-  
-  if (filters?.category) {
-    const categoryFilter = `(Category,eq,${encodeURIComponent(filters.category)})`;
-    params.where = params.where ? `${params.where}~and${categoryFilter}` : categoryFilter;
-  }
-  
-  return params;
-};
-```
-
-### Example 4: File Attachment Handling
-
-```typescript
-// Handle file attachments in NocoDB
-export const updateEntityWithAttachment = async (id: string, attachmentData: any) => {
-  console.log('[nocodb.updateEntityWithAttachment] Adding attachment to entity:', id);
-  
-  try {
-    // Get existing entity
-    const entity = await getEntityById(id);
-    const existingAttachments = entity['Attachments'] || [];
-    
-    // Add new attachment to array
-    const updatedAttachments = [...existingAttachments, attachmentData];
-    
-    // Update entity with new attachments
-    return await updateEntity(id, {
-      'Attachments': updatedAttachments
-    });
-  } catch (error) {
-    console.error('[nocodb.updateEntityWithAttachment] Failed to add attachment:', error);
-    throw error;
-  }
-};
-```
-
-## Conclusion
-
-This implementation guide provides a comprehensive foundation for integrating NocoDB with Nuxt.js applications. The patterns shown here are based on production code and include:
-
-- **Robust error handling** with retry mechanisms
-- **Type safety** with comprehensive TypeScript interfaces
-- **Performance optimization** through caching and efficient queries
-- **Security** through field whitelisting and data validation
-- **Maintainability** through consistent logging and error reporting
-- **Scalability** through generic functions and batch operations
-
-Use these patterns as a foundation and adapt them to your specific use cases. The modular approach allows you to implement only the features you need while maintaining consistency across your application.
-
-### Key Takeaways
-
-1. **Always validate and sanitize data** before sending to NocoDB
-2. **Use comprehensive logging** for debugging and monitoring
-3. **Implement retry logic** for network operations
-4. **Handle relationships carefully** using NocoDB's links API
-5. **Cache frequently accessed data** to improve performance
-6. **Use TypeScript interfaces** for type safety and better developer experience
-7. **Follow consistent naming conventions** for maintainability
-
-This guide should serve as a complete reference for implementing robust NocoDB integrations in your applications.
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 298bf94..5f6c348 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -16,7 +16,6 @@ export default defineNuxtConfig({
   },
   modules: [
     "vuetify-nuxt-module", 
-    "motion-v/nuxt", 
     [
       "@vite-pwa/nuxt",
       {
diff --git a/package.json b/package.json
index 39f3421..2cb0a3f 100644
--- a/package.json
+++ b/package.json
@@ -12,28 +12,24 @@
   "dependencies": {
     "@nuxt/ui": "^3.2.0",
     "@vite-pwa/nuxt": "^0.10.8",
-    "base-vue-phone-input": "^0.1.13",
     "cookie": "^0.6.0",
     "flag-icons": "^7.5.0",
     "formidable": "^3.5.4",
     "libphonenumber-js": "^1.12.10",
     "mime-types": "^3.0.1",
     "minio": "^8.0.5",
-    "motion-v": "^1.6.1",
     "nuxt": "^3.15.4",
     "sharp": "^0.34.2",
     "systeminformation": "^5.27.7",
     "vue": "latest",
     "vue-country-flag-next": "^2.3.2",
     "vue-router": "latest",
-    "vue-tel-input": "^9.3.0",
     "vuetify-nuxt-module": "^0.18.3"
   },
   "devDependencies": {
     "@types/cookie": "^0.6.0",
     "@types/formidable": "^3.4.5",
     "@types/mime-types": "^3.0.1",
-    "@types/node": "^20.0.0",
-    "@types/vue-tel-input": "^2.1.7"
+    "@types/node": "^20.0.0"
   }
 }
diff --git a/pages/test-phone.vue b/pages/test-phone.vue
deleted file mode 100644
index e225e36..0000000
--- a/pages/test-phone.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-  <div class="test-page">
-    <v-container>
-      <v-row justify="center">
-        <v-col cols="12" md="8" lg="6">
-          <v-card class="pa-6">
-            <v-card-title>
-              📱 Phone Input Test
-            </v-card-title>
-            
-            <v-card-text>
-              <PhoneInputWrapper
-                v-model="phoneNumber"
-                label="Test Phone Number"
-                placeholder="Click the flag dropdown to test"
-                help-text="The dropdown should open when you click the flag area"
-                @phone-data="handlePhoneData"
-                @country-changed="handleCountryChange"
-              />
-              
-              <v-alert type="info" class="mt-4" v-if="phoneData">
-                <strong>Phone Data:</strong><br>
-                Number: {{ phoneData.number }}<br>
-                Valid: {{ phoneData.isValid ? 'Yes' : 'No' }}<br>
-                Country: {{ phoneData.country.name }} ({{ phoneData.country.iso2 }})<br>
-                Dial Code: {{ phoneData.country.dialCode }}
-              </v-alert>
-              
-              <div class="mt-4">
-                <v-btn @click="testNumber" variant="outlined" color="primary" size="small" class="mr-2">
-                  Test US Number
-                </v-btn>
-                <v-btn @click="resetNumber" variant="outlined" size="small">
-                  Reset
-                </v-btn>
-              </div>
-            </v-card-text>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-container>
-  </div>
-</template>
-
-<script setup lang="ts">
-interface PhoneData {
-  number: string;
-  isValid: boolean;
-  country: {
-    name: string;
-    iso2: string;
-    dialCode: string;
-  };
-}
-
-const phoneNumber = ref('');
-const phoneData = ref<PhoneData | null>(null);
-
-const handlePhoneData = (data: PhoneData) => {
-  phoneData.value = data;
-  console.log('Phone data updated:', data);
-};
-
-const handleCountryChange = (country: any) => {
-  console.log('Country changed:', country);
-};
-
-const testNumber = () => {
-  phoneNumber.value = '+19179324061';
-};
-
-const resetNumber = () => {
-  phoneNumber.value = '';
-  phoneData.value = null;
-};
-
-definePageMeta({
-  layout: 'dashboard',
-  middleware: 'auth'
-});
-</script>
-
-<style scoped>
-.test-page {
-  padding: 20px 0;
-}
-</style>