Add Metabase integration with token generation API and update navigation

components/layouts/Breadcrumb.vue

@@ -6,13 +6,15 @@ const breadcrumb = computed(() => {
   let breadcrumb = null;
   const matched = route.matched;
 
+  console.log("matched:", matched);
+
   if (matched[matched.length - 1].meta?.breadcrumb) {
     breadcrumb = matched[matched.length - 1].meta.breadcrumb;
   } else {
     // if no breadcrumb in page meta, get breadcrumb from route matched
     breadcrumb = matched.map((item) => {
       return {
-        name: item.meta.title,
+        name: item.name,
         path: item.path,
       };
     });
@@ -33,10 +35,12 @@ const breadcrumb = computed(() => {
   return breadcrumb;
 });
 
+console.log("breadcrumb", breadcrumb);
+
 // Get title from page meta
 const title = computed(() => {
   const matched = route.matched;
-  const title = matched[matched.length - 1].meta.title;
+  const title = matched[matched.length - 1].name;
   return title;
 });
 
@@ -58,11 +62,7 @@ async function navigateMenu(path) {
             <Icon name="mdi:home" size="16" />
           </NuxtLink>
         </li>
-        <li
+        <li v-for="(item, index) in breadcrumb" :key="index" class="flex items-center">
-          v-for="(item, index) in breadcrumb"
-          :key="index"
-          class="flex items-center"
-        >
           <Icon
             name="mdi:chevron-right"
             size="16"
@@ -71,9 +71,9 @@ async function navigateMenu(path) {
           />
           <a
             @click="navigateMenu(item.path)"
+            class="cursor-pointer capitalize"
             :class="{
-              'text-gray-500 hover:text-gray-700':
+              'text-gray-500 hover:text-gray-700': index !== breadcrumb.length - 1,
-                index !== breadcrumb.length - 1,
               'text-primary font-medium': index === breadcrumb.length - 1,
             }"
             :aria-current="index === breadcrumb.length - 1 ? 'page' : undefined"

navigation/index.js

@@ -15,6 +15,12 @@ export default [
         "path": "/notes",
         "icon": "",
         "child": []
+      },
+      {
+        "title": "Metabase",
+        "path": "/metabase",
+        "icon": "",
+        "child": []
       }
     ],
     "meta": {}

nuxt.config.js

@@ -5,6 +5,10 @@ export default defineNuxtConfig({
       secretAccess: process.env.NUXT_ACCESS_TOKEN_SECRET,
       secretRefresh: process.env.NUXT_REFRESH_TOKEN_SECRET,
     },
+    metabase: {
+      secretKey: process.env.NUXT_METABASE_SECRET_KEY || "c98a5b005450e699b6d420f46e0062912ac75268716f1298c11d8bb11c291eb0",
+      siteUrl: process.env.NUXT_METABASE_SITE_URL || "http://mb.sena.my",
+    },
   },
   modules: [
     "@nuxtjs/tailwindcss",

pages/metabase/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <LayoutsBreadcrumb />
+
+    <section class="flex flex-col h-screen">
+      <div class="mb-4 flex-shrink-0">
+        <h3>Metabase</h3>
+        <p>
+          Metabase is a powerful data visualization and analytics tool that allows you to
+          create and share dashboards, reports, and visualizations with your team.
+        </p>
+      </div>
+
+      <div v-if="pending" class="flex justify-center items-center flex-1">
+        <div class="text-lg">Loading Metabase dashboard...</div>
+      </div>
+      <div v-else-if="error" class="flex justify-center items-center flex-1">
+        <div class="text-red-500">Error loading dashboard: {{ error.message }}</div>
+      </div>
+      <iframe
+        v-else
+        :src="iframeUrl"
+        frameborder="0"
+        width="100%"
+        class="flex-1"
+        allowtransparency
+      />
+    </section>
+  </div>
+</template>
+
+<script setup>
+// Fetch the JWT token from our server API
+const { data: tokenData, pending, error } = await useFetch("/api/metabase/token");
+
+const iframeUrl = computed(() => {
+  if (tokenData.value?.token && tokenData.value?.siteUrl) {
+    return (
+      tokenData.value.siteUrl +
+      "/embed/dashboard/" +
+      tokenData.value.token +
+      "#bordered=true&titled=true"
+    );
+  }
+  return "";
+});
+</script>
+
+<style lang="scss" scoped></style>

prisma/schema.prisma

@@ -65,37 +65,37 @@ model userrole {
 }
 
 model site_settings {
-  settingID           Int       @id @default(autoincrement())
+  settingID            Int       @id @default(autoincrement())
-  siteName            String?   @db.VarChar(255)
+  siteName             String?   @db.VarChar(255)
-  siteNameFontSize    Int?      @default(18)
+  siteNameFontSize     Int?      @default(18)
-  siteDescription     String?   @db.Text
+  siteDescription      String?   @db.Text
-  siteLogo            String?   @db.VarChar(500)
+  siteLogo             String?   @db.VarChar(500)
-  siteLoadingLogo     String?   @db.VarChar(500)
+  siteLoadingLogo      String?   @db.VarChar(500)
-  siteFavicon         String?   @db.VarChar(500)
+  siteFavicon          String?   @db.VarChar(500)
-  siteLoginLogo       String?   @db.VarChar(500)
+  showSiteNameInHeader Boolean?  @default(true)
-  showSiteNameInHeader Boolean? @default(true)
+  primaryColor         String?   @db.VarChar(50)
-  primaryColor        String?   @db.VarChar(50)
+  secondaryColor       String?   @db.VarChar(50)
-  secondaryColor      String?   @db.VarChar(50)
+  successColor         String?   @db.VarChar(50)
-  successColor        String?   @db.VarChar(50)
+  infoColor            String?   @db.VarChar(50)
-  infoColor           String?   @db.VarChar(50)
+  warningColor         String?   @db.VarChar(50)
-  warningColor        String?   @db.VarChar(50)
+  dangerColor          String?   @db.VarChar(50)
-  dangerColor         String?   @db.VarChar(50)
+  customCSS            String?   @db.Text
-  customCSS           String?   @db.Text
+  themeMode            String?   @db.VarChar(50)
-  themeMode           String?   @db.VarChar(50)
+  customThemeFile      String?   @db.VarChar(500)
-  customThemeFile     String?   @db.VarChar(500)
+  currentFont          String?   @db.VarChar(255)
-  currentFont         String?   @db.VarChar(255)
+  fontSource           String?   @db.VarChar(500)
-  fontSource          String?   @db.VarChar(500)
+  seoTitle             String?   @db.VarChar(255)
-  seoTitle            String?   @db.VarChar(255)
+  seoDescription       String?   @db.Text
-  seoDescription      String?   @db.Text
+  seoKeywords          String?   @db.Text
-  seoKeywords         String?   @db.Text
+  seoAuthor            String?   @db.VarChar(255)
-  seoAuthor           String?   @db.VarChar(255)
+  seoOgImage           String?   @db.VarChar(500)
-  seoOgImage          String?   @db.VarChar(500)
+  seoTwitterCard       String?   @default("summary_large_image") @db.VarChar(50)
-  seoTwitterCard      String?   @db.VarChar(50) @default("summary_large_image")
+  seoCanonicalUrl      String?   @db.VarChar(500)
-  seoCanonicalUrl     String?   @db.VarChar(500)
+  seoRobots            String?   @default("index, follow") @db.VarChar(100)
-  seoRobots           String?   @db.VarChar(100) @default("index, follow")
+  seoGoogleAnalytics   String?   @db.VarChar(255)
-  seoGoogleAnalytics  String?   @db.VarChar(255)
+  seoGoogleTagManager  String?   @db.VarChar(255)
-  seoGoogleTagManager String?   @db.VarChar(255)
+  seoFacebookPixel     String?   @db.VarChar(255)
-  seoFacebookPixel    String?   @db.VarChar(255)
+  settingCreatedDate   DateTime? @db.DateTime(0)
-  settingCreatedDate  DateTime? @db.DateTime(0)
+  settingModifiedDate  DateTime? @db.DateTime(0)
-  settingModifiedDate DateTime? @db.DateTime(0)
+  siteLoginLogo        String?   @db.VarChar(500)
 }

server/api/metabase/token.get.js

@@ -0,0 +1,28 @@
+import jwt from "jsonwebtoken";
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig();
+  
+  const METABASE_SECRET_KEY = config.metabase.secretKey;
+
+  const payload = {
+    resource: { dashboard: 2 },
+    params: {},
+    exp: Math.round(Date.now() / 1000) + 10 * 60, // 10 minute expiration
+  };
+
+  try {
+    const token = jwt.sign(payload, METABASE_SECRET_KEY);
+    
+    return {
+      success: true,
+      token: token,
+      siteUrl: config.metabase.siteUrl
+    };
+  } catch (error) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Failed to generate Metabase token'
+    });
+  }
+});