feat: assistant overview drilldown reports [CW-7408] (#14920)

<img width="2616" height="1716" alt="CleanShot 2026-07-09 at 14 22
42@2x"
src="https://github.com/user-attachments/assets/504e58df-0243-4cb9-a811-62504fdcb0ac"
/>

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Sony Mathew <sony@chatwoot.com>

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

@@ -8,16 +8,35 @@ const props = defineProps({
   hint: { type: String, default: '' },
   // null = neutral, true = good direction, false = bad direction
   trendGood: { type: Boolean, default: null },
+  clickable: { type: Boolean, default: false },
 });
 
+const emit = defineEmits(['click']);
+
 const trendClass = computed(() => {
   if (props.trendGood === null) return 'text-n-slate-11';
   return props.trendGood ? 'text-n-teal-11' : 'text-n-ruby-11';
 });
+
+const onActivate = () => {
+  if (props.clickable) emit('click');
+};
 </script>
 
 <template>
-  <div class="flex flex-col gap-3 p-5 group bg-n-solid-1">
+  <div
+    class="flex flex-col gap-3 p-5 group bg-n-solid-1"
+    :class="
+      clickable
+        ? 'cursor-pointer transition-colors hover:bg-n-slate-2/50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-n-brand'
+        : ''
+    "
+    :role="clickable ? 'button' : undefined"
+    :tabindex="clickable ? 0 : undefined"
+    @click="onActivate"
+    @keydown.enter.self.prevent="onActivate"
+    @keydown.space.self.prevent="onActivate"
+  >
     <div class="flex items-center gap-1.5">
       <span class="text-sm font-medium text-n-slate-11">{{ label }}</span>
       <span