feat: add quicklinks

app/javascript/dashboard/components-next/captain/pageComponents/overview/KnowledgeCard.vue

@@ -1,5 +1,10 @@
 <script setup>
 import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const route = useRoute();
 
 // Knowledge coverage (sample data).
 const knowledge = {
@@ -12,6 +17,35 @@ const approvedPct = computed(() => {
   const total = knowledge.approved + knowledge.pending;
   return total ? Math.round((knowledge.approved / total) * 100) : 0;
 });
+
+const linkTo = routeName => ({
+  name: routeName,
+  params: {
+    accountId: route.params.accountId,
+    assistantId: route.params.assistantId,
+  },
+});
+
+const stats = computed(() => [
+  {
+    key: 'approved',
+    value: knowledge.approved,
+    label: t('CAPTAIN.OVERVIEW.KNOWLEDGE.APPROVED'),
+    to: linkTo('captain_assistants_responses_index'),
+  },
+  {
+    key: 'pending',
+    value: knowledge.pending,
+    label: t('CAPTAIN.OVERVIEW.KNOWLEDGE.PENDING'),
+    to: linkTo('captain_assistants_responses_pending'),
+  },
+  {
+    key: 'documents',
+    value: knowledge.documents,
+    label: t('CAPTAIN.OVERVIEW.KNOWLEDGE.DOCUMENTS'),
+    to: linkTo('captain_assistants_documents_index'),
+  },
+]);
 </script>
 
 <template>
@@ -33,30 +67,24 @@ const approvedPct = computed(() => {
       />
     </div>
     <div class="grid grid-cols-3 gap-3">
-      <div class="flex flex-col gap-1">
+      <RouterLink
+        v-for="stat in stats"
+        :key="stat.key"
+        :to="stat.to"
+        class="flex flex-col gap-1 group/stat"
+      >
         <span class="text-xl font-semibold tabular-nums text-n-slate-12">
-          {{ knowledge.approved }}
+          {{ stat.value }}
         </span>
-        <span class="text-xs text-n-slate-11">
-          {{ $t('CAPTAIN.OVERVIEW.KNOWLEDGE.APPROVED') }}
+        <span
+          class="inline-flex items-center gap-1 text-xs transition-colors text-n-slate-11 group-hover/stat:text-n-slate-12"
+        >
+          {{ stat.label }}
+          <span
+            class="transition-opacity opacity-0 i-lucide-arrow-up-right size-3 group-hover/stat:opacity-100"
+          />
         </span>
-      </div>
-      <div class="flex flex-col gap-1">
-        <span class="text-xl font-semibold tabular-nums text-n-slate-12">
-          {{ knowledge.pending }}
-        </span>
-        <span class="text-xs text-n-slate-11">
-          {{ $t('CAPTAIN.OVERVIEW.KNOWLEDGE.PENDING') }}
-        </span>
-      </div>
-      <div class="flex flex-col gap-1">
-        <span class="text-xl font-semibold tabular-nums text-n-slate-12">
-          {{ knowledge.documents }}
-        </span>
-        <span class="text-xs text-n-slate-11">
-          {{ $t('CAPTAIN.OVERVIEW.KNOWLEDGE.DOCUMENTS') }}
-        </span>
-      </div>
+      </RouterLink>
     </div>
   </div>
 </template>

app/javascript/dashboard/components-next/captain/pageComponents/overview/QuickLinks.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute, RouterLink } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { getHelpUrlForFeature } from 'dashboard/helper/featureHelper';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const assistantParams = computed(() => ({
+  accountId: route.params.accountId,
+  assistantId: route.params.assistantId,
+}));
+
+const links = computed(() => [
+  {
+    key: 'docs',
+    title: t('CAPTAIN.OVERVIEW.LINKS.DOCS.TITLE'),
+    description: t('CAPTAIN.OVERVIEW.LINKS.DOCS.DESCRIPTION'),
+    icon: 'i-lucide-book-open',
+    href: getHelpUrlForFeature('captain'),
+  },
+  {
+    key: 'playground',
+    title: t('CAPTAIN.OVERVIEW.LINKS.PLAYGROUND.TITLE'),
+    description: t('CAPTAIN.OVERVIEW.LINKS.PLAYGROUND.DESCRIPTION'),
+    icon: 'i-lucide-flask-conical',
+    to: {
+      name: 'captain_assistants_playground_index',
+      params: assistantParams.value,
+    },
+  },
+  {
+    key: 'billing',
+    title: t('CAPTAIN.OVERVIEW.LINKS.BILLING.TITLE'),
+    description: t('CAPTAIN.OVERVIEW.LINKS.BILLING.DESCRIPTION'),
+    icon: 'i-lucide-credit-card',
+    to: {
+      name: 'billing_settings_index',
+      params: { accountId: route.params.accountId },
+    },
+  },
+]);
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+    <component
+      :is="link.href ? 'a' : RouterLink"
+      v-for="link in links"
+      :key="link.key"
+      :href="link.href"
+      :to="link.to"
+      :target="link.href ? '_blank' : undefined"
+      :rel="link.href ? 'noopener noreferrer' : undefined"
+      class="flex items-center gap-3 p-4 transition-colors border rounded-xl bg-n-solid-1 border-n-weak hover:bg-n-alpha-1 group/link"
+    >
+      <span
+        class="grid rounded-lg size-9 shrink-0 place-content-center bg-n-alpha-2 text-n-slate-11"
+      >
+        <span :class="link.icon" class="size-4" />
+      </span>
+      <div class="flex flex-col min-w-0">
+        <span class="text-sm font-medium text-n-slate-12">
+          {{ link.title }}
+        </span>
+        <span class="text-xs truncate text-n-slate-11">
+          {{ link.description }}
+        </span>
+      </div>
+      <span
+        :class="
+          link.href ? 'i-lucide-arrow-up-right' : 'i-lucide-chevron-right'
+        "
+        class="ml-auto transition-opacity opacity-0 size-4 text-n-slate-10 group-hover/link:opacity-100"
+      />
+    </component>
+  </div>
+</template>

app/javascript/dashboard/i18n/locale/en/integrations.json

@@ -442,6 +442,20 @@
         "AXIS_START": "{count}d ago",
         "AXIS_END": "Today"
       },
+      "LINKS": {
+        "DOCS": {
+          "TITLE": "Captain docs",
+          "DESCRIPTION": "Guides and how-tos for Captain"
+        },
+        "PLAYGROUND": {
+          "TITLE": "Playground",
+          "DESCRIPTION": "Test this assistant's replies"
+        },
+        "BILLING": {
+          "TITLE": "Billing",
+          "DESCRIPTION": "Manage credits and plan"
+        }
+      },
       "FLAG_REASONS": {
         "INCORRECT": "Incorrect info",
         "INCOMPLETE": "Incomplete",

app/javascript/dashboard/routes/dashboard/captain/assistants/overview/Index.vue

@@ -8,6 +8,7 @@ import MetricCard from 'dashboard/components-next/captain/pageComponents/overvie
 import KnowledgeCard from 'dashboard/components-next/captain/pageComponents/overview/KnowledgeCard.vue';
 import ResponseQualityCard from 'dashboard/components-next/captain/pageComponents/overview/ResponseQualityCard.vue';
 import CreditUsageCard from 'dashboard/components-next/captain/pageComponents/overview/CreditUsageCard.vue';
+import QuickLinks from 'dashboard/components-next/captain/pageComponents/overview/QuickLinks.vue';
 
 const { t } = useI18n();
 
@@ -124,6 +125,8 @@ const metrics = computed(() => [
         </div>
 
         <CreditUsageCard :range="selectedRange" />
+
+        <QuickLinks />
       </div>
     </template>
   </PageLayout>