feat: assistant overview page UI

2026-06-29 17:26:42 +05:30
parent 299bc6c0a4
commit 85cd87c410
10 changed files with 453 additions and 0 deletions
@@ -0,0 +1,79 @@
+<script setup>
+import { computed } from 'vue';
+
+defineProps({
+  // Selected day-range, used only for the chart's start-axis label.
+  range: { type: String, default: '30' },
+});
+
+// Daily assistant credit usage (sample data) rendered as a lightweight bar
+// chart, so we avoid pulling in a chart library for placeholder visuals.
+const creditUsage = {
+  total: '48,210',
+  trend: '+18.2%',
+  daily: [
+    120, 145, 132, 160, 175, 158, 190, 210, 195, 230, 220, 245, 260, 240, 275,
+    290, 270, 310, 295, 330, 350, 325, 360, 380, 355, 400, 420, 395, 440, 465,
+  ],
+};
+
+// Bar heights as a percentage of the peak day, with a small floor so even the
+// lowest day stays visible.
+const bars = computed(() => {
+  const max = Math.max(...creditUsage.daily);
+  return creditUsage.daily.map((value, index) => ({
+    key: index,
+    value,
+    height: Math.max(6, Math.round((value / max) * 100)),
+  }));
+});
+</script>
+
+<template>
+  <section class="flex flex-col gap-4">
+    <div class="flex items-start justify-between gap-4">
+      <div class="flex flex-col gap-1">
+        <h3 class="text-base font-medium text-n-slate-12">
+          {{ $t('CAPTAIN.OVERVIEW.CREDITS.TITLE') }}
+        </h3>
+        <div class="flex items-baseline gap-2">
+          <span class="text-2xl font-semibold text-n-slate-12">
+            {{ creditUsage.total }}
+          </span>
+          <span class="text-sm text-n-slate-11">
+            {{ $t('CAPTAIN.OVERVIEW.CREDITS.UNIT') }}
+          </span>
+          <span class="text-sm font-medium text-n-slate-11">
+            {{ creditUsage.trend }}
+          </span>
+        </div>
+      </div>
+      <div class="flex items-center gap-2 mt-1">
+        <span class="rounded-full size-2.5 bg-n-brand" />
+        <span class="text-xs text-n-slate-11">
+          {{ $t('CAPTAIN.OVERVIEW.CREDITS.LEGEND') }}
+        </span>
+      </div>
+    </div>
+
+    <div class="p-5 border rounded-xl bg-n-solid-1 border-n-weak">
+      <div class="flex items-end gap-1 h-40">
+        <div
+          v-for="bar in bars"
+          :key="bar.key"
+          v-tooltip="`${bar.value} ${$t('CAPTAIN.OVERVIEW.CREDITS.UNIT')}`"
+          class="flex-1 rounded-t transition-colors bg-n-brand/70 hover:bg-n-brand"
+          :style="{ height: `${bar.height}%` }"
+        />
+      </div>
+      <div class="flex items-center justify-between mt-3">
+        <span class="text-xs text-n-slate-10">
+          {{ $t('CAPTAIN.OVERVIEW.CREDITS.AXIS_START', { count: range }) }}
+        </span>
+        <span class="text-xs text-n-slate-10">
+          {{ $t('CAPTAIN.OVERVIEW.CREDITS.AXIS_END') }}
+        </span>
+      </div>
+    </div>
+  </section>
+</template>
@@ -0,0 +1,62 @@
+<script setup>
+import { computed } from 'vue';
+
+// Knowledge coverage (sample data).
+const knowledge = {
+  approved: 142,
+  pending: 9,
+  documents: 23,
+};
+
+const approvedPct = computed(() => {
+  const total = knowledge.approved + knowledge.pending;
+  return total ? Math.round((knowledge.approved / total) * 100) : 0;
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-4 p-5 border rounded-xl bg-n-solid-1 border-n-weak"
+  >
+    <div class="flex items-center justify-between">
+      <span class="text-sm font-medium text-n-slate-12">
+        {{ $t('CAPTAIN.OVERVIEW.KNOWLEDGE.TITLE') }}
+      </span>
+      <span class="text-sm text-n-slate-11">
+        {{ $t('CAPTAIN.OVERVIEW.KNOWLEDGE.COVERAGE', { pct: approvedPct }) }}
+      </span>
+    </div>
+    <div class="w-full h-2 overflow-hidden rounded-full bg-n-alpha-2">
+      <div
+        class="h-full rounded-full bg-n-brand"
+        :style="{ width: `${approvedPct}%` }"
+      />
+    </div>
+    <div class="grid grid-cols-3 gap-3">
+      <div class="flex flex-col gap-1">
+        <span class="text-xl font-semibold text-n-slate-12">
+          {{ knowledge.approved }}
+        </span>
+        <span class="text-xs text-n-slate-11">
+          {{ $t('CAPTAIN.OVERVIEW.KNOWLEDGE.APPROVED') }}
+        </span>
+      </div>
+      <div class="flex flex-col gap-1">
+        <span class="text-xl font-semibold 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 text-n-slate-12">
+          {{ knowledge.documents }}
+        </span>
+        <span class="text-xs text-n-slate-11">
+          {{ $t('CAPTAIN.OVERVIEW.KNOWLEDGE.DOCUMENTS') }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,36 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  label: { type: String, required: true },
+  value: { type: String, required: true },
+  trend: { type: String, default: '' },
+  hint: { type: String, default: '' },
+  // null = neutral, true = good direction, false = bad direction
+  trendGood: { type: Boolean, default: null },
+});
+
+const trendClass = computed(() => {
+  if (props.trendGood === null) return 'text-n-slate-11';
+  return props.trendGood ? 'text-n-teal-11' : 'text-n-ruby-11';
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 p-5 group bg-n-solid-1">
+    <div class="flex items-center gap-1.5">
+      <span class="text-sm font-medium text-n-slate-11">{{ label }}</span>
+      <span
+        v-if="hint"
+        v-tooltip="hint"
+        class="transition-opacity opacity-0 cursor-help i-lucide-info size-3.5 text-n-slate-10 group-hover:opacity-100"
+      />
+    </div>
+    <div class="flex items-end justify-between gap-2">
+      <span class="text-3xl font-semibold tracking-tight text-n-slate-12">
+        {{ value }}
+      </span>
+      <span class="text-sm font-medium" :class="trendClass">{{ trend }}</span>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,71 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+// Flagged responses broken down by report reason, mapped from
+// captain_message_reports.report_reason (sample data).
+const flagReasons = [
+  {
+    key: 'incorrect',
+    label: t('CAPTAIN.OVERVIEW.FLAG_REASONS.INCORRECT'),
+    count: 11,
+  },
+  {
+    key: 'incomplete',
+    label: t('CAPTAIN.OVERVIEW.FLAG_REASONS.INCOMPLETE'),
+    count: 7,
+  },
+  {
+    key: 'outdated',
+    label: t('CAPTAIN.OVERVIEW.FLAG_REASONS.OUTDATED'),
+    count: 4,
+  },
+  {
+    key: 'inappropriate',
+    label: t('CAPTAIN.OVERVIEW.FLAG_REASONS.INAPPROPRIATE'),
+    count: 2,
+  },
+  { key: 'other', label: t('CAPTAIN.OVERVIEW.FLAG_REASONS.OTHER'), count: 3 },
+];
+
+const total = computed(() =>
+  flagReasons.reduce((sum, reason) => sum + reason.count, 0)
+);
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-4 p-5 border rounded-xl bg-n-solid-1 border-n-weak"
+  >
+    <div class="flex items-center justify-between">
+      <span class="text-sm font-medium text-n-slate-12">
+        {{ $t('CAPTAIN.OVERVIEW.FLAGGED.TITLE') }}
+      </span>
+      <span class="text-sm text-n-slate-11">
+        {{ $t('CAPTAIN.OVERVIEW.FLAGGED.TOTAL', { count: total }) }}
+      </span>
+    </div>
+    <div class="flex flex-col gap-3">
+      <div
+        v-for="reason in flagReasons"
+        :key="reason.key"
+        class="flex items-center gap-3"
+      >
+        <span class="w-28 text-xs truncate text-n-slate-11 shrink-0">
+          {{ reason.label }}
+        </span>
+        <div class="flex-1 h-2 overflow-hidden rounded-full bg-n-alpha-2">
+          <div
+            class="h-full rounded-full bg-n-amber-9"
+            :style="{ width: `${Math.round((reason.count / total) * 100)}%` }"
+          />
+        </div>
+        <span class="w-6 text-xs font-medium text-right text-n-slate-12">
+          {{ reason.count }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
@@ -440,6 +440,14 @@ const menuItems = computed(() => {
      label: t('SIDEBAR.CAPTAIN'),
      activeOn: ['captain_assistants_create_index'],
      children: [
+        {
+          name: 'Overview',
+          label: t('SIDEBAR.CAPTAIN_OVERVIEW'),
+          activeOn: ['captain_assistants_overview_index'],
+          to: accountScopedRoute('captain_assistants_index', {
+            navigationPath: 'captain_assistants_overview_index',
+          }),
+        },
        {
          name: 'FAQs',
          label: t('SIDEBAR.CAPTAIN_RESPONSES'),
@@ -392,6 +392,64 @@
  "CAPTAIN": {
    "NAME": "Captain",
    "HEADER_KNOW_MORE": "Know more",
+    "OVERVIEW": {
+      "HEADER": "Overview",
+      "SAMPLE_NOTICE": "Showing sample data. Live analytics are coming soon.",
+      "RANGES": {
+        "DAYS": "{count}d"
+      },
+      "METRICS": {
+        "HANDLED": {
+          "LABEL": "Conversations handled",
+          "HINT": "Distinct conversations this assistant replied in."
+        },
+        "AUTO_RESOLUTION": {
+          "LABEL": "Auto-resolution rate",
+          "HINT": "Share of handled conversations closed without a human reply."
+        },
+        "HANDOFF": {
+          "LABEL": "Handoff rate",
+          "HINT": "Share of handled conversations escalated to a human agent."
+        },
+        "FLAGGED": {
+          "LABEL": "Flagged response rate",
+          "HINT": "Assistant replies agents reported as low quality."
+        },
+        "REOPEN": {
+          "LABEL": "Reopen rate",
+          "HINT": "Auto-resolved conversations that were reopened afterwards."
+        },
+        "DEPTH": {
+          "LABEL": "Messages / conversation",
+          "HINT": "Average replies the assistant sends per conversation."
+        }
+      },
+      "KNOWLEDGE": {
+        "TITLE": "Knowledge coverage",
+        "COVERAGE": "{pct}% approved",
+        "APPROVED": "Approved FAQs",
+        "PENDING": "Pending FAQs",
+        "DOCUMENTS": "Documents"
+      },
+      "FLAGGED": {
+        "TITLE": "Response quality",
+        "TOTAL": "{count} flagged"
+      },
+      "CREDITS": {
+        "TITLE": "Credit usage",
+        "UNIT": "credits",
+        "LEGEND": "Daily credits used",
+        "AXIS_START": "{count}d ago",
+        "AXIS_END": "Today"
+      },
+      "FLAG_REASONS": {
+        "INCORRECT": "Incorrect info",
+        "INCOMPLETE": "Incomplete",
+        "OUTDATED": "Outdated",
+        "INAPPROPRIATE": "Inappropriate",
+        "OTHER": "Other"
+      }
+    },
    "ASSISTANT_SWITCHER": {
      "ASSISTANTS": "Assistants",
      "SWITCH_ASSISTANT": "Switch between assistants",
@@ -324,6 +324,7 @@
    "ALL_COMPANIES": "All Companies",
    "CAPTAIN": "Captain",
    "CAPTAIN_ASSISTANTS": "Assistants",
+    "CAPTAIN_OVERVIEW": "Overview",
    "CAPTAIN_DOCUMENTS": "Documents",
    "CAPTAIN_RESPONSES": "FAQs",
    "CAPTAIN_TOOLS": "Tools",
@@ -0,0 +1,130 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+
+import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
+import MetricCard from 'dashboard/components-next/captain/pageComponents/overview/MetricCard.vue';
+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';
+
+const { t } = useI18n();
+
+// NOTE: All figures below are placeholder/sample data. There is no backend
+// wiring yet; this page exists to explore the layout of the assistant overview.
+const ranges = ['7', '30', '90'];
+const selectedRange = ref('30');
+
+// Headline KPI cards. `trendGood` marks whether the trend direction is a
+// good outcome for the user, so we can colour the delta independently of sign.
+const metrics = computed(() => [
+  {
+    key: 'handled',
+    label: t('CAPTAIN.OVERVIEW.METRICS.HANDLED.LABEL'),
+    hint: t('CAPTAIN.OVERVIEW.METRICS.HANDLED.HINT'),
+    value: '1,248',
+    trend: '+12.4%',
+    trendGood: true,
+  },
+  {
+    key: 'autoResolution',
+    label: t('CAPTAIN.OVERVIEW.METRICS.AUTO_RESOLUTION.LABEL'),
+    hint: t('CAPTAIN.OVERVIEW.METRICS.AUTO_RESOLUTION.HINT'),
+    value: '63.2%',
+    trend: '+4.1%',
+    trendGood: true,
+  },
+  {
+    key: 'handoff',
+    label: t('CAPTAIN.OVERVIEW.METRICS.HANDOFF.LABEL'),
+    hint: t('CAPTAIN.OVERVIEW.METRICS.HANDOFF.HINT'),
+    value: '28.7%',
+    trend: '-3.2%',
+    trendGood: true,
+  },
+  {
+    key: 'flagged',
+    label: t('CAPTAIN.OVERVIEW.METRICS.FLAGGED.LABEL'),
+    hint: t('CAPTAIN.OVERVIEW.METRICS.FLAGGED.HINT'),
+    value: '1.9%',
+    trend: '-0.4%',
+    trendGood: true,
+  },
+  {
+    key: 'reopen',
+    label: t('CAPTAIN.OVERVIEW.METRICS.REOPEN.LABEL'),
+    hint: t('CAPTAIN.OVERVIEW.METRICS.REOPEN.HINT'),
+    value: '6.5%',
+    trend: '+0.8%',
+    trendGood: false,
+  },
+  {
+    key: 'depth',
+    label: t('CAPTAIN.OVERVIEW.METRICS.DEPTH.LABEL'),
+    hint: t('CAPTAIN.OVERVIEW.METRICS.DEPTH.HINT'),
+    value: '3.4',
+    trend: '+0.2',
+    trendGood: null,
+  },
+]);
+</script>
+
+<template>
+  <PageLayout
+    :header-title="$t('CAPTAIN.OVERVIEW.HEADER')"
+    :is-empty="false"
+    :show-pagination-footer="false"
+    :show-know-more="false"
+    :feature-flag="FEATURE_FLAGS.CAPTAIN"
+  >
+    <template #body>
+      <div class="flex flex-col gap-6">
+        <div class="flex items-center justify-between gap-4">
+          <p class="text-sm text-n-slate-11">
+            {{ $t('CAPTAIN.OVERVIEW.SAMPLE_NOTICE') }}
+          </p>
+          <div
+            class="flex items-center gap-1 p-1 rounded-lg bg-n-alpha-1 shrink-0"
+          >
+            <button
+              v-for="range in ranges"
+              :key="range"
+              type="button"
+              class="px-3 py-1 text-sm font-medium rounded-md transition-colors"
+              :class="
+                selectedRange === range
+                  ? 'bg-n-solid-active text-n-slate-12 shadow-sm'
+                  : 'text-n-slate-11 hover:text-n-slate-12'
+              "
+              @click="selectedRange = range"
+            >
+              {{ $t('CAPTAIN.OVERVIEW.RANGES.DAYS', { count: range }) }}
+            </button>
+          </div>
+        </div>
+
+        <div
+          class="grid grid-cols-1 gap-px overflow-hidden border rounded-xl sm:grid-cols-2 lg:grid-cols-3 bg-n-weak border-n-weak"
+        >
+          <MetricCard
+            v-for="metric in metrics"
+            :key="metric.key"
+            :label="metric.label"
+            :value="metric.value"
+            :trend="metric.trend"
+            :hint="metric.hint"
+            :trend-good="metric.trendGood"
+          />
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          <KnowledgeCard />
+          <ResponseQualityCard />
+        </div>
+
+        <CreditUsageCard :range="selectedRange" />
+      </div>
+    </template>
+  </PageLayout>
+</template>
@@ -6,6 +6,7 @@ import CaptainPageRouteView from './pages/CaptainPageRouteView.vue';
 import AssistantsIndexPage from './pages/AssistantsIndexPage.vue';
 import AssistantEmptyStateIndex from './assistants/Index.vue';

+import AssistantOverviewIndex from './assistants/overview/Index.vue';
 import AssistantSettingsIndex from './assistants/settings/Settings.vue';
 import AssistantInboxesIndex from './assistants/inboxes/Index.vue';
 import AssistantPlaygroundIndex from './assistants/playground/Index.vue';
@@ -36,6 +37,12 @@ const metaV2 = {
 };

 const assistantRoutes = [
+  {
+    path: frontendURL('accounts/:accountId/captain/:assistantId/overview'),
+    component: AssistantOverviewIndex,
+    name: 'captain_assistants_overview_index',
+    meta,
+  },
  {
    path: frontendURL('accounts/:accountId/captain/:assistantId/faqs'),
    component: ResponsesIndex,
@@ -53,6 +53,7 @@ const routeToLastActiveAssistant = () => {

  const { navigationPath } = route.params;
  const isAValidRoute = [
+    'captain_assistants_overview_index', // Overview page
    'captain_assistants_responses_index', // Faq page
    'captain_assistants_documents_index', // Document page
    'captain_assistants_scenarios_index', // Scenario page