feat: add more pages

composables/usePortalTags.ts

@@ -0,0 +1,15 @@
+export const usePortalTags = () => {
+  const user = useDirectusUser();
+
+  const tags = computed(() => (toValue(user)?.tags as Array<string>) || []);
+
+  const details = computed(() => {
+    const value = toValue(tags);
+
+    return {
+      interest: value.includes("portal-interest"),
+    };
+  });
+
+  return details;
+};

pages/dashboard.vue

@@ -5,14 +5,11 @@
 
       <v-list color="primary" lines="two">
         <v-list-item
-          to="/dashboard/site"
+          v-for="(item, index) in menu"
-          title="Site Analytics"
+          :key="index"
-          prepend-icon="mdi-view-dashboard"
+          :to="item.to"
-        />
+          :title="item.title"
-        <v-list-item
+          :prepend-icon="item.icon"
-          to="/dashboard/data"
-          title="Data Analytics"
-          prepend-icon="mdi-finance"
         />
       </v-list>
 
@@ -48,13 +45,9 @@
       <router-view />
 
       <v-bottom-navigation :active="mdAndDown" color="primary" elevation="2">
-        <v-btn to="/dashboard/site">
+        <v-btn v-for="(item, index) in menu" :key="index" :to="item.to">
-          <v-icon icon="mdi-view-dashboard" />
+          <v-icon :icon="item.icon" />
-          <span>Site Analytics</span>
+          <span v-text="item.title" />
-        </v-btn>
-        <v-btn to="/dashboard/data">
-          <v-icon icon="mdi-finance" />
-          <span>Data Analytics</span>
         </v-btn>
       </v-bottom-navigation>
     </v-main>
@@ -70,6 +63,53 @@ definePageMeta({
 const { mdAndDown } = useDisplay();
 const { logout } = useDirectusAuth();
 
+const tags = usePortalTags();
+
+const interestMenu = [
+  {
+    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",
+  },
+];
+
+const defaultMenu = [
+  {
+    to: "/dashboard/site",
+    icon: "mdi-view-dashboard",
+    title: "Site Analytics",
+  },
+  {
+    to: "/dashboard/data",
+    icon: "mdi-finance",
+    title: "Data Analytics",
+  },
+];
+
+const menu = computed(() =>
+  toValue(tags).interest ? interestMenu : defaultMenu
+);
+
 const logOut = async () => {
   await logout();
   return navigateTo("/login");

pages/dashboard/index.vue

@@ -1,5 +1,9 @@
 <script lang="ts" setup>
-definePageMeta({
+const tags = usePortalTags();
-  redirect: "/dashboard/site",
+
-});
+onBeforeMount(() =>
+  navigateTo(
+    toValue(tags).interest ? "/dashboard/interest-analytics" : "/dashboard/site"
+  )
+);
 </script>

pages/dashboard/interest-analytics.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="embed">
+    <iframe
+      src="https://flows.portnimara.com/public/dashboards/rLjObZdvDrRCLO8OvI7Bi3Wlmc2S7aFLsnt8B8Rd?org_slug=default"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+useHead({
+  title: "Analytics",
+});
+</script>
+
+<style scoped>
+.embed {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100vh;
+}
+
+.embed iframe {
+  position: absolute;
+  width: 100%;
+  height: calc(100% + 180px);
+  border: 0;
+  top: 0;
+  left: 0;
+}
+</style>

pages/dashboard/interest-berth-list.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="embed">
+    <iframe
+      src="https://database.portnimara.com/dashboard/#/nc/gallery/3553e50d-5882-46ea-99e2-4542a1d92ef4"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+useHead({
+  title: "Berth List",
+});
+</script>
+
+<style scoped>
+.embed {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100vh;
+}
+
+.embed iframe {
+  width: 100%;
+  height: calc(100% + 46px);
+  border: 0;
+  position: absolute;
+  top: -46px;
+}
+</style>

pages/dashboard/interest-berth-status.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="embed">
+    <iframe
+      src="https://database.portnimara.com/dashboard/#/nc/kanban/b695ec72-2af5-4d13-a73f-9c72cd223680"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+useHead({
+  title: "Berth Status",
+});
+</script>
+
+<style scoped>
+.embed {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100vh;
+}
+
+.embed iframe {
+  width: 100%;
+  height: calc(100% + 46px);
+  border: 0;
+  position: absolute;
+  top: -46px;
+}
+</style>

pages/dashboard/interest-list.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="embed">
+    <iframe
+      src="https://database.portnimara.com/dashboard/#/nc/view/ebf570e4-8329-424d-a43d-a775d2169ffc"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+useHead({
+  title: "Interest List",
+});
+</script>
+
+<style scoped>
+.embed {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100vh;
+}
+
+.embed iframe {
+  width: 100%;
+  height: calc(100% + 46px);
+  border: 0;
+  position: absolute;
+  top: -46px;
+}
+</style>

pages/dashboard/interest-status.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="embed">
+    <iframe
+      src="https://database.portnimara.com/dashboard/#/nc/kanban/2fe9125c-9051-4b49-93ff-745159528425"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+useHead({
+  title: "Interest Status",
+});
+</script>
+
+<style scoped>
+.embed {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100vh;
+}
+
+.embed iframe {
+  width: 100%;
+  height: calc(100% + 46px);
+  border: 0;
+  position: absolute;
+  top: -46px;
+}
+</style>

pages/login.vue

@@ -3,7 +3,7 @@
     <v-main class="container">
       <v-container class="fill-height" fluid>
         <v-row align="center" justify="center" class="fill-height">
-          <v-card class="pa-6" rounded="xl" max-width="350" elevation="2">
+          <v-card class="pa-6" rounded max-width="350" elevation="2">
             <v-form @submit.prevent="submit" v-model="valid">
               <v-row no-gutters>
                 <v-col cols="12">