port-nimara-client-portal/pages/dashboard.vue

<template>
  <v-app full-height>
    <v-navigation-drawer
      v-model="drawer"
      :location="mdAndDown ? 'bottom' : undefined"
    >
      <v-img v-if="!mdAndDown" src="/Port_Nimara_Logo_2_Colour_New_Transparent.png" height="110" class="my-6" contain />

      <v-list color="primary" lines="two">
        <v-list-item
          v-for="(item, index) in safeMenu"
          :key="index"
          :to="item.to"
          :title="item.title"
          :prepend-icon="item.icon"
        />
      </v-list>

      <template #append>
        <v-list lines="two">
          <v-list-item
            v-if="user"
            :title="user.name"
            :subtitle="user.email"
            prepend-icon="mdi-account"
          >
            <template #append>
              <v-chip v-if="user.tier && user.tier !== 'basic'" size="small" color="primary">
                {{ user.tier }}
              </v-chip>
            </template>
          </v-list-item>
          <v-list-item
            @click="logOut"
            title="Log out"
            prepend-icon="mdi-logout"
            base-color="error"
          />
        </v-list>
      </template>
    </v-navigation-drawer>

    <v-app-bar v-if="mdAndDown" elevation="2">
      <template #prepend>
        <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer" />
      </template>

      <v-img src="/Port_Nimara_Logo_2_Colour_New_Transparent.png" height="50" />

      <template #append>
        <v-btn
          @click="logOut"
          class="mr-3"
          variant="text"
          color="error"
          icon="mdi-logout"
        />
      </template>
    </v-app-bar>

    <v-main>
      <router-view />
    </v-main>
  </v-app>
</template>

<script setup>
definePageMeta({
  middleware: ["authentication"],
  layout: false,
});

const { mdAndDown } = useDisplay();
const { user, logout, authSource } = useUnifiedAuth();
const { isAdmin, getUserGroups, getCurrentUser } = useAuthorization();
const tags = usePortalTags();

const drawer = ref(false);

// Debug auth state
onMounted(() => {
  nextTick(() => {
    console.log('[Dashboard] Auth state on mount:', {
      isAdmin: isAdmin(),
      userGroups: getUserGroups(),
      currentUser: getCurrentUser()
    });
  });
});

const interestMenu = computed(() => {
  const userIsAdmin = isAdmin();
  const userGroups = getUserGroups();
  
  console.log('[Dashboard] Computing interest menu - isAdmin:', userIsAdmin, 'groups:', userGroups);
  
  // Check if user has sales or admin privileges
  const hasSalesAccess = userGroups.includes('sales') || userGroups.includes('admin');
  
  const baseMenu = [
    //{
    //  to: "/dashboard/interest-eoi-queue",
    //  icon: "mdi-tray-full",
    //  title: "EOI Queue",
    //},
    {
      to: "/dashboard/interest-analytics",
      icon: "mdi-view-dashboard",
      title: "Analytics",
    },
    {
      to: "/dashboard/interest-berth-list",
      icon: "mdi-table",
      title: "Berth List",
    },
    {
      to: "/dashboard/interest-berth-status",
      icon: "mdi-sail-boat",
      title: "Berth Status",
    },
    {
      to: "/dashboard/interest-list",
      icon: "mdi-view-list",
      title: "Interest List",
    },
    {
      to: "/dashboard/interest-status",
      icon: "mdi-account-check",
      title: "Interest Status",
    },
    {
      to: "/dashboard/file-browser",
      icon: "mdi-folder",
      title: "File Browser",
    },
  ];

  // Only show expenses to sales and admin users
  if (hasSalesAccess) {
    console.log('[Dashboard] Adding expenses to menu (user has sales/admin access)');
    baseMenu.push({
      to: "/dashboard/expenses",
      icon: "mdi-receipt",
      title: "Expenses",
    });
  } else {
    console.log('[Dashboard] Hiding expenses from menu (user role:', userGroups, ')');
  }

  // Add admin menu items if user is admin
  if (userIsAdmin) {
    console.log('[Dashboard] Adding admin console to interest menu');
    baseMenu.push({
      to: "/dashboard/admin",
      icon: "mdi-shield-crown",
      title: "Admin Console",
    });
  }

  return baseMenu;
});

const defaultMenu = computed(() => {
  const userIsAdmin = isAdmin();
  const userGroups = getUserGroups();
  
  console.log('[Dashboard] Computing default menu - isAdmin:', userIsAdmin, 'groups:', userGroups);
  
  const baseMenu = [
    {
      to: "/dashboard/site",
      icon: "mdi-view-dashboard",
      title: "Site Analytics",
    },
    {
      to: "/dashboard/data",
      icon: "mdi-finance",
      title: "Data Analytics",
    },
    {
      to: "/dashboard/file-browser",
      icon: "mdi-folder",
      title: "File Browser",
    },
  ];

  // Add admin menu items if user is admin
  if (userIsAdmin) {
    console.log('[Dashboard] Adding admin console to default menu');
    baseMenu.push({
      to: "/dashboard/admin",
      icon: "mdi-shield-crown",
      title: "Admin Console",
    });
  }

  return baseMenu;
});

const menu = computed(() => {
  try {
    const tagsValue = toValue(tags);
    const menuToUse = tagsValue.interest ? interestMenu.value : defaultMenu.value;
    
    console.log('[Dashboard] Computing menu:', {
      hasInterestTag: tagsValue.interest,
      menuType: tagsValue.interest ? 'interestMenu' : 'defaultMenu',
      menuIsArray: Array.isArray(menuToUse),
      menuLength: menuToUse?.length
    });
    
    return menuToUse;
  } catch (error) {
    console.error('[Dashboard] Error computing menu:', error);
    return [];
  }
});

// Safe menu wrapper to prevent crashes when menu is undefined
const safeMenu = computed(() => {
  try {
    const currentMenu = menu.value;
    if (Array.isArray(currentMenu)) {
      return currentMenu;
    }
    
    console.warn('[Dashboard] Menu is not an array, returning fallback menu');
    
    // Get current user permissions for fallback menu
    const userIsAdmin = isAdmin();
    const userGroups = getUserGroups();
    const hasSalesAccess = userGroups.includes('sales') || userGroups.includes('admin');
    
    // Fallback menu with essential items (respecting permissions)
    const fallbackMenu = [
      {
        to: "/dashboard/interest-list",
        icon: "mdi-view-list",
        title: "Interest List",
      },
      {
        to: "/dashboard/file-browser",
        icon: "mdi-folder",
        title: "File Browser",
      },
    ];
    
    // Only add expenses if user has sales/admin access
    if (hasSalesAccess) {
      fallbackMenu.push({
        to: "/dashboard/expenses",
        icon: "mdi-receipt",
        title: "Expenses",
      });
    }
    
    // Only add admin console if user is admin
    if (userIsAdmin) {
      fallbackMenu.push({
        to: "/dashboard/admin",
        icon: "mdi-shield-crown",
        title: "Admin Console",
      });
    }
    
    return fallbackMenu;
  } catch (error) {
    console.error('[Dashboard] Error computing menu:', error);
    
    // Emergency fallback menu - only essential items
    return [
      {
        to: "/dashboard/interest-list",
        icon: "mdi-view-list",
        title: "Interest List",
      },
    ];
  }
});

const logOut = async () => {
  await logout();
  return navigateTo("/login");
};

onMounted(() => {
  if (mdAndDown.value) {
    return;
  }

  drawer.value = true;
})
</script>