fix: show count on tab header

frontend/src/pages/Organization.vue

@@ -111,7 +111,26 @@
         </div>
       </div>
     </div>
-    <Tabs v-model="tabIndex" v-slot="{ tab }" :tabs="tabs">
+    <Tabs v-model="tabIndex" :tabs="tabs">
+      <template #tab="{ tab, selected }">
+        <button
+          class="group -mb-px flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
+          :class="{ 'text-gray-900': selected }"
+        >
+          <component v-if="tab.icon" :is="tab.icon" class="h-5" />
+          {{ tab.label }}
+          <Badge
+            class="group-hover:bg-gray-900"
+            :class="[selected ? 'bg-gray-900' : 'bg-gray-600']"
+            variant="solid"
+            theme="gray"
+            size="sm"
+          >
+            {{ tab.count }}
+          </Badge>
+        </button>
+      </template>
+      <template #default="{ tab }">
         <div class="flex h-full">
           <LeadsListView
             class="mt-4"
@@ -141,6 +160,7 @@
             </div>
           </div>
         </div>
+      </template>
     </Tabs>
     <OrganizationModal
       v-model="showOrganizationModal"
@@ -158,6 +178,7 @@ import {
   ErrorMessage,
   Dropdown,
   Tabs,
+  Badge,
   call,
   createListResource,
 } from 'frappe-ui'
@@ -243,14 +264,17 @@ const tabs = [
   {
     label: 'Leads',
     icon: h(LeadsIcon, { class: 'h-4 w-4' }),
+    count: computed(() => leads.data?.length),
   },
   {
     label: 'Deals',
     icon: h(DealsIcon, { class: 'h-4 w-4' }),
+    count: computed(() => deals.data?.length),
   },
   {
     label: 'Contacts',
     icon: h(ContactsIcon, { class: 'h-4 w-4' }),
+    count: computed(() => contacts.data?.length),
   },
 ]