Many an update!

app/pages/member/dashboard.vue

@@ -11,7 +11,7 @@
     <UContainer class="">
       <!-- Loading State -->
       <div
-        v-if="!memberData || authPending"
+        v-if="authPending"
         class="flex justify-center items-center py-20"
       >
         <div class="text-center">
@@ -22,8 +22,27 @@
         </div>
       </div>
 
+      <!-- Unauthenticated State -->
+      <div
+        v-else-if="!memberData"
+        class="flex justify-center items-center py-20"
+      >
+        <div class="text-center max-w-md">
+          <div class="w-16 h-16 bg-ghost-800 border border-ghost-600 rounded-full flex items-center justify-center mx-auto mb-4">
+            <Icon name="heroicons:lock-closed" class="w-8 h-8 text-ghost-400" />
+          </div>
+          <h2 class="text-xl font-semibold text-ghost-100 mb-2">Sign in required</h2>
+          <p class="text-ghost-400 mb-6">Please sign in to access your member dashboard.</p>
+          <UButton @click="openLoginModal({ title: 'Sign in to your dashboard', description: 'Enter your email to access your member dashboard' })">
+            Sign In
+          </UButton>
+        </div>
+      </div>
+
       <!-- Dashboard Content -->
       <div v-else class="space-y-8">
+        <!-- Member Status Banner -->
+        <MemberStatusBanner :dismissible="true" />
         <!-- Welcome Card -->
         <UCard
           class="sparkle-field"
@@ -39,7 +58,16 @@
                 <h1 class="text-2xl font-bold text-ghost-100 ethereal-text">
                   Welcome to Ghost Guild, {{ memberData?.name }}!
                 </h1>
-                <p class="text-ghost-300 mt-2">Your membership is active!</p>
+                <p
+                  :class="[
+                    'mt-2',
+                    isActive ? 'text-ghost-300' : statusConfig.textColor,
+                  ]"
+                >
+                  {{
+                    isActive ? "Your membership is active!" : statusConfig.label
+                  }}
+                </p>
               </div>
               <div class="flex-shrink-0" v-if="memberData?.avatar">
                 <img
@@ -92,18 +120,29 @@
             <UButton
               to="/members?peerSupport=true"
               variant="outline"
-              class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
+              :disabled="!canPeerSupport"
+              :class="[
+                'border-ghost-600 text-ghost-200 justify-start',
+                canPeerSupport
+                  ? 'hover:bg-ghost-800 hover:border-whisper-500'
+                  : 'opacity-50 cursor-not-allowed',
+              ]"
               block
+              :title="
+                !canPeerSupport
+                  ? 'Complete your membership to book peer sessions'
+                  : ''
+              "
             >
               Book a Peer Session
             </UButton>
 
             <UButton
-              disabled
+              to="https://wiki.ghostguild.org"
+              target="_blank"
               variant="outline"
-              class="border-ghost-600 text-ghost-500 cursor-not-allowed justify-start"
+              class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
               block
-              title="Coming soon"
             >
               Browse Resources
             </UButton>
@@ -309,6 +348,8 @@
 
 <script setup>
 const { memberData, checkMemberStatus } = useAuth();
+const { isActive, statusConfig, isPendingPayment, canPeerSupport } = useMemberStatus();
+const { completePayment, isProcessingPayment } = useMemberPayment();
 
 const registeredEvents = ref([]);
 const loadingEvents = ref(false);
@@ -340,6 +381,8 @@ const copyCalendarLink = async () => {
   }
 };
 
+const { openLoginModal } = useLoginModal();
+
 // Handle authentication check on page load
 const { pending: authPending } = await useLazyAsyncData(
   "dashboard-auth",
@@ -347,52 +390,38 @@ const { pending: authPending } = await useLazyAsyncData(
     // Only check authentication on client side
     if (process.server) return null;
 
-    console.log(
-      "📊 Dashboard auth check - memberData exists:",
-      !!memberData.value,
-    );
-
     // If no member data, try to authenticate
     if (!memberData.value) {
-      console.log("  - No member data, checking authentication...");
       const isAuthenticated = await checkMemberStatus();
-      console.log("  - Auth result:", isAuthenticated);
 
       if (!isAuthenticated) {
-        console.log("  - Redirecting to login");
-        await navigateTo("/login");
+        // Show login modal instead of redirecting
+        openLoginModal({
+          title: "Sign in to your dashboard",
+          description: "Enter your email to access your member dashboard",
+          dismissible: true,
+        });
         return null;
       }
     }
 
-    console.log("  - ✅ Dashboard auth successful");
     return memberData.value;
   },
 );
 
 // Load registered events
 const loadRegisteredEvents = async () => {
-  console.log(
-    "🔍 memberData.value:",
-    JSON.stringify(memberData.value, null, 2),
-  );
-  console.log("🔍 memberData.value._id:", memberData.value?._id);
-  console.log("🔍 memberData.value.id:", memberData.value?.id);
-
   const memberId = memberData.value?._id || memberData.value?.id;
 
   if (!memberId) {
-    console.log("❌ No member ID available");
     return;
   }
 
-  console.log("📅 Loading events for member:", memberId);
   loadingEvents.value = true;
   try {
     const response = await $fetch("/api/members/my-events", {
       params: { memberId },
     });
-    console.log("📅 Events response:", response);
     registeredEvents.value = response.events;
   } catch (error) {
     console.error("Failed to load registered events:", error);