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'),