monacousa-portal/pages/dashboard/index.vue

<template>
  <div class="dashboard-router">
    <v-container v-if="loading" class="fill-height">
      <v-row justify="center" align="center">
        <v-col cols="auto" class="text-center">
          <v-progress-circular 
            indeterminate 
            color="primary" 
            size="64"
            width="6"
          />
          <p class="mt-4 text-h6">Loading your dashboard...</p>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  middleware: 'auth',
  layout: 'dashboard'
});

const { user, userTier } = useAuth();
const loading = ref(true);

// Route to tier-specific dashboard - auth middleware ensures user is authenticated
onMounted(() => {
  console.log('🔄 Dashboard mounted, routing to role-specific section...');
  
  // Auth middleware has already verified authentication - route based on highest privilege
  if (user.value && userTier.value) {
    // Use old structure for now until new pages are fully deployed
    let targetRoute = `/dashboard/${userTier.value}`;
    
    console.log('🔄 Routing to role-specific dashboard:', targetRoute);
    navigateTo(targetRoute, { replace: true });
  } else {
    console.warn('❌ No user or tier found - this should not happen after auth middleware');
    // Fallback - middleware should have caught this
    navigateTo('/login');
  }
  
  loading.value = false;
});
</script>

<style scoped>
.dashboard-router {
  min-height: 100vh;
}

.v-progress-circular {
  margin-bottom: 1rem;
}
</style>