From a98666030ba2e228ff2638ef5aa0ce89e7bb7008 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 23 Jul 2026 18:45:56 +0530
Subject: [PATCH] chore: Calls page UI improvements (#15129)

---
 .../AssignmentPolicyCard.vue                  |  7 ++-
 .../components-next/Calls/CallListItem.vue    | 20 +++---
 .../components-next/Calls/CallsFilterBar.vue  | 42 +++++++++----
 .../Campaigns/CampaignCard/CampaignCard.vue   |  8 ++-
 .../ConversationCard/ConversationCard.vue     |  4 +-
 .../components-next/Inbox/InboxCard.vue       |  4 +-
 .../helpers/composeConversationHelper.js      |  4 +-
 .../specs/composeConversationHelper.spec.js   | 14 +++++
 .../components-next/audio/AudioPlayer.vue     |  8 +--
 .../captain/assistant/InboxCard.vue           |  8 ++-
 .../components-next/icon/ChannelIcon.vue      | 10 +--
 .../components-next/icon/provider.js          | 20 +++---
 .../icon/specs/provider.spec.js               | 23 ++++++-
 .../components-next/message/Message.vue       |  5 +-
 app/javascript/dashboard/helper/inbox.js      | 28 ++++++++-
 .../dashboard/helper/specs/inbox.spec.js      | 62 +++++++++++++++++++
 .../SearchResultConversationItem.vue          |  4 +-
 .../components/SearchResultMessageItem.vue    |  4 +-
 .../dashboard/calls/pages/CallsIndex.vue      | 24 +++----
 .../pages/AgentAssignmentEditPage.vue         | 16 ++---
 .../pages/AgentCapacityEditPage.vue           | 24 ++++---
 .../pages/components/InboxLinkDialog.vue      |  3 +-
 .../dashboard/settings/inbox/Settings.vue     |  8 ++-
 enterprise/app/finders/call_finder.rb         |  2 +-
 .../views/api/v1/models/_call.json.jbuilder   |  2 +
 .../api/v1/accounts/calls_controller_spec.rb  |  1 +
 theme/icons.js                                | 20 ++++++
 27 files changed, 283 insertions(+), 92 deletions(-)

diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.vue
index 45311ece6..e015f682a 100644
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.vue
@@ -28,7 +28,12 @@ const inboxes = computed(() => {
     return {
       name: inbox.name,
       id: inbox.id,
-      icon: getInboxIconByType(inbox.channelType, inbox.medium, 'line'),
+      icon: getInboxIconByType(
+        inbox.channelType,
+        inbox.medium,
+        'line',
+        inbox.voiceEnabled
+      ),
     };
   });
 });
diff --git a/app/javascript/dashboard/components-next/Calls/CallListItem.vue b/app/javascript/dashboard/components-next/Calls/CallListItem.vue
index dd2b3af37..0a54cab65 100644
--- a/app/javascript/dashboard/components-next/Calls/CallListItem.vue
+++ b/app/javascript/dashboard/components-next/Calls/CallListItem.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { relativeDayTimestamp } from 'shared/helpers/timeHelper';
+import { getInboxVoiceIcon } from 'dashboard/helper/inbox';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import AudioPlayer from 'dashboard/components-next/audio/AudioPlayer.vue';
@@ -60,7 +61,7 @@ const resultLabel = computed(() => {
 });
 
 const providerIcon = computed(() =>
-  props.call.provider === 'whatsapp' ? 'i-woot-whatsapp' : 'i-lucide-phone'
+  getInboxVoiceIcon(props.call.inbox.channelType, props.call.inbox.medium)
 );
 
 const createdAtLabel = computed(() =>
@@ -150,7 +151,7 @@ const conversationRoute = computed(() => ({
   <div
     class="hidden items-center gap-x-1.5 gap-y-2.5 border-b border-n-weak lg:flex lg:items-center lg:gap-1.5"
   >
-    <div class="flex items-center gap-2.5 min-w-0 w-40 shrink-0 py-3.5">
+    <div class="flex items-center gap-2.5 min-w-0 w-52 shrink-0 py-3.5">
       <Avatar
         :src="call.contact.avatar"
         :name="contactName"
@@ -169,9 +170,12 @@ const conversationRoute = computed(() => ({
     >
       <div class="flex items-center gap-x-2 min-w-0 lg:contents py-3.5">
         <CallStatusBadge :kind="kind" class="shrink-0" />
-        <template v-if="agentActionLabel">
+        <div
+          v-if="agentActionLabel"
+          class="gap-x-1.5 min-w-0 flex items-center"
+        >
           <span
-            class="text-label-small text-n-slate-10 truncate min-w-0 shrink min-w-8"
+            class="text-label-small text-n-slate-10 truncate shrink min-w-8 xl:min-w-14"
           >
             {{ agentActionLabel }}
           </span>
@@ -192,7 +196,7 @@ const conversationRoute = computed(() => ({
               {{ call.agent.name }}
             </span>
           </span>
-        </template>
+        </div>
         <span
           v-else-if="resultLabel"
           class="text-body-main truncate text-n-slate-10 min-w-0 shrink-[20]"
@@ -212,10 +216,10 @@ const conversationRoute = computed(() => ({
         content: call.inbox.name,
         delay: { show: 500, hide: 0 },
       }"
-      class="flex items-center gap-1.5 justify-start min-w-14 shrink-[100] py-3.5"
+      class="flex items-center gap-1 justify-end w-40 min-w-4 shrink-[100] py-3.5"
     >
       <Icon :icon="providerIcon" class="size-4 text-n-slate-11 shrink-0" />
-      <span class="text-body-main truncate text-n-slate-11">
+      <span class="text-body-main truncate text-n-slate-11 min-w-0">
         {{ call.inbox.name }}
       </span>
     </div>
@@ -232,7 +236,7 @@ const conversationRoute = computed(() => ({
         content: createdAtLabel,
         delay: { show: 500, hide: 0 },
       }"
-      class="text-label-small text-end text-n-slate-11 truncate py-3.5 tabular-nums justify-self-end w-16 shrink-0"
+      class="text-label-small text-end text-n-slate-11 truncate py-3.5 tabular-nums justify-self-end min-w-16 max-w-20 shrink-0"
     >
       {{ createdAtLabel }}
     </span>
diff --git a/app/javascript/dashboard/components-next/Calls/CallsFilterBar.vue b/app/javascript/dashboard/components-next/Calls/CallsFilterBar.vue
index 4d01b0500..647f64cdb 100644
--- a/app/javascript/dashboard/components-next/Calls/CallsFilterBar.vue
+++ b/app/javascript/dashboard/components-next/Calls/CallsFilterBar.vue
@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
 const props = defineProps({
   // Null while a fetch is in flight so stale counts are never shown.
@@ -117,10 +118,16 @@ const moreFiltersSections = computed(() => [
   },
 ]);
 
+const selectedAssignee = computed(
+  () => props.agents.find(agent => agent.id === assigneeId.value) || null
+);
+
 const selectedAssigneeLabel = computed(
-  () =>
-    props.agents.find(agent => agent.id === assigneeId.value)?.name ||
-    t('CALLS_PAGE.FILTERS.ASSIGNEE')
+  () => selectedAssignee.value?.name || t('CALLS_PAGE.FILTERS.ASSIGNEE')
+);
+
+const isOtherActivitySelected = computed(() =>
+  OTHER_ACTIVITIES.includes(activity.value)
 );
 
 const hasMoreFilters = computed(() => Boolean(inboxId.value));
@@ -143,7 +150,7 @@ const applyMoreFilter = ({ action, value }) => {
 
 <template>
   <div class="flex flex-wrap items-center justify-between gap-3">
-    <div class="flex flex-wrap items-center gap-3">
+    <div class="flex flex-wrap items-center gap-2">
       <span v-if="!activity" class="text-heading-3 text-n-slate-11 shrink-0">
         {{
           totalCount === null
@@ -157,13 +164,13 @@ const applyMoreFilter = ({ action, value }) => {
         color="blue"
         size="sm"
         :icon="ACTIVITY_ICONS[activity]"
-        class="shrink-0"
+        class="shrink-0 !h-7 !px-2"
         @click="setActivity(null)"
       >
         {{ activeChipLabel }}
         <Icon icon="i-lucide-x" />
       </Button>
-      <div class="w-px h-4 bg-n-strong shrink-0" />
+      <div class="w-px h-3.5 mx-1 bg-n-strong shrink-0" />
       <Button
         v-for="chip in inactiveChips"
         :key="chip"
@@ -172,7 +179,7 @@ const applyMoreFilter = ({ action, value }) => {
         size="sm"
         :icon="ACTIVITY_ICONS[chip]"
         :label="activityLabel(chip)"
-        class="shrink-0 text-n-slate-12"
+        class="shrink-0 text-n-slate-11 !h-7 !px-2"
         @click="setActivity(chip)"
       />
       <OnClickOutside
@@ -184,7 +191,10 @@ const applyMoreFilter = ({ action, value }) => {
           color="slate"
           size="sm"
           icon="i-lucide-phone"
-          class="text-n-slate-12"
+          class="!h-7 !px-2"
+          :class="
+            isOtherActivitySelected ? 'text-n-slate-12' : 'text-n-slate-11'
+          "
           @click="toggleMenu('activity')"
         >
           {{ t('CALLS_PAGE.FILTERS.OTHER_ACTIVITY') }}
@@ -208,10 +218,19 @@ const applyMoreFilter = ({ action, value }) => {
           variant="outline"
           color="slate"
           size="sm"
-          icon="i-lucide-user-round-cog"
-          class="max-w-52 text-n-slate-12"
+          icon="i-woot-empty-assignee"
+          class="max-w-52 !h-7 !px-2"
+          :class="assigneeId ? 'text-n-slate-12' : 'text-n-slate-11'"
           @click="toggleMenu('assignee')"
         >
+          <template v-if="selectedAssignee" #icon>
+            <Avatar
+              :src="selectedAssignee.thumbnail"
+              :name="selectedAssignee.name"
+              :size="16"
+              rounded-full
+            />
+          </template>
           <span class="truncate">{{ selectedAssigneeLabel }}</span>
           <Icon icon="i-lucide-chevron-down" class="text-n-slate-11 shrink-0" />
         </Button>
@@ -228,8 +247,9 @@ const applyMoreFilter = ({ action, value }) => {
           variant="outline"
           size="sm"
           icon="i-lucide-list-filter"
+          class="!h-7 !px-2"
           :color="hasMoreFilters ? 'blue' : 'slate'"
-          :class="hasMoreFilters ? '' : 'text-n-slate-12'"
+          :class="hasMoreFilters ? '' : 'text-n-slate-11'"
           @click="toggleMenu('more')"
         >
           {{ t('CALLS_PAGE.FILTERS.MORE_FILTERS') }}
diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue
index 437933e5f..c71ab0d43 100644
--- a/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue
@@ -83,8 +83,12 @@ const campaignStatus = computed(() => {
 const inboxName = computed(() => props.inbox?.name || '');
 
 const inboxIcon = computed(() => {
-  const { medium, channel_type: type } = props.inbox;
-  return getInboxIconByType(type, medium);
+  const {
+    medium,
+    channel_type: type,
+    voice_enabled: voiceEnabled,
+  } = props.inbox;
+  return getInboxIconByType(type, medium, 'fill', voiceEnabled);
 });
 </script>
 
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
index be3ddf280..5008e96f0 100644
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
@@ -48,8 +48,8 @@ const inbox = computed(() => props.stateInbox);
 const inboxName = computed(() => inbox.value?.name);
 
 const inboxIcon = computed(() => {
-  const { channelType, medium } = inbox.value;
-  return getInboxIconByType(channelType, medium);
+  const { channelType, medium, voiceEnabled } = inbox.value;
+  return getInboxIconByType(channelType, medium, 'fill', voiceEnabled);
 });
 
 const lastActivityAt = computed(() => {
diff --git a/app/javascript/dashboard/components-next/Inbox/InboxCard.vue b/app/javascript/dashboard/components-next/Inbox/InboxCard.vue
index 078d49fe4..88a5487a6 100644
--- a/app/javascript/dashboard/components-next/Inbox/InboxCard.vue
+++ b/app/javascript/dashboard/components-next/Inbox/InboxCard.vue
@@ -49,8 +49,8 @@ const isUnread = computed(() => !props.inboxItem?.readAt);
 const inbox = computed(() => props.stateInbox);
 
 const inboxIcon = computed(() => {
-  const { channelType, medium } = inbox.value;
-  return getInboxIconByType(channelType, medium);
+  const { channelType, medium, voiceEnabled } = inbox.value;
+  return getInboxIconByType(channelType, medium, 'fill', voiceEnabled);
 });
 
 const hasSlaThreshold = computed(() => {
diff --git a/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js b/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
index 8e933cd84..f2628c065 100644
--- a/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
@@ -37,10 +37,11 @@ const transformInbox = ({
   channelType,
   phoneNumber,
   medium,
+  voiceEnabled,
   ...rest
 }) => ({
   id,
-  icon: getInboxIconByType(channelType, medium, 'line'),
+  icon: getInboxIconByType(channelType, medium, 'line', voiceEnabled),
   label: generateLabelForContactableInboxesList({
     name,
     email,
@@ -54,6 +55,7 @@ const transformInbox = ({
   phoneNumber,
   channelType,
   medium,
+  voiceEnabled,
   ...rest,
 });
 
diff --git a/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js b/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
index 73bd0ce99..d7bfe427d 100644
--- a/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
@@ -79,6 +79,20 @@ describe('composeConversationHelper', () => {
         channelType: INBOX_TYPES.EMAIL,
       });
     });
+
+    it('uses the voice glyph for a voice-enabled inbox', () => {
+      const inboxes = [
+        {
+          id: 2,
+          name: 'WhatsApp Cloud',
+          channelType: INBOX_TYPES.WHATSAPP,
+          voiceEnabled: true,
+        },
+      ];
+
+      const result = helpers.buildContactableInboxesList(inboxes);
+      expect(result[0].icon).toBe('i-woot-whatsapp-voice');
+    });
   });
 
   describe('getCapitalizedNameFromEmail', () => {
diff --git a/app/javascript/dashboard/components-next/audio/AudioPlayer.vue b/app/javascript/dashboard/components-next/audio/AudioPlayer.vue
index c716ffbfb..68d8bd02b 100644
--- a/app/javascript/dashboard/components-next/audio/AudioPlayer.vue
+++ b/app/javascript/dashboard/components-next/audio/AudioPlayer.vue
@@ -117,8 +117,8 @@ const downloadRecording = () => {
     >
       <template #icon>
         <Icon
-          :icon="isPlaying ? 'i-lucide-pause' : 'i-lucide-play'"
-          class="size-4 flex-shrink-0"
+          :icon="isPlaying ? 'i-woot-audio-pause' : 'i-woot-audio-play'"
+          class="size-4 flex-shrink-0 text-n-slate-11"
         />
       </template>
     </Button>
@@ -127,10 +127,10 @@ const downloadRecording = () => {
       min="0"
       :max="duration || 0"
       :value="currentTime"
-      class="flex-1 min-w-0 lg:grow-0 lg:basis-24 h-1 rounded-lg appearance-none cursor-pointer bg-n-slate-12/30 accent-n-slate-11"
+      class="flex-1 min-w-0 lg:grow-0 lg:basis-24 h-0.5 rounded-full appearance-none cursor-pointer bg-n-slate-12/30 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-2 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-n-slate-11 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:size-2 [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-n-slate-11"
       @input="seek"
     />
-    <span class="text-sm tabular-nums text-n-slate-11 shrink-0">
+    <span class="text-label-small tabular-nums text-n-slate-11 shrink-0">
       {{ displayedTime }}
     </span>
     <div class="w-px h-3.5 bg-n-slate-6 shrink-0" />
diff --git a/app/javascript/dashboard/components-next/captain/assistant/InboxCard.vue b/app/javascript/dashboard/components-next/captain/assistant/InboxCard.vue
index f349720b0..8561737a5 100644
--- a/app/javascript/dashboard/components-next/captain/assistant/InboxCard.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/InboxCard.vue
@@ -58,8 +58,12 @@ const menuItems = computed(() => [
 ]);
 
 const icon = computed(() => {
-  const { medium, channel_type: type } = props.inbox;
-  return getInboxIconByType(type, medium, 'outline');
+  const {
+    medium,
+    channel_type: type,
+    voice_enabled: voiceEnabled,
+  } = props.inbox;
+  return getInboxIconByType(type, medium, 'outline', voiceEnabled);
 });
 
 const handleAction = ({ action, value }) => {
diff --git a/app/javascript/dashboard/components-next/icon/ChannelIcon.vue b/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
index f680d3f03..e8369122e 100644
--- a/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
+++ b/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { computed, toRef } from 'vue';
-import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
 import { useChannelIcon, useChannelBrandIcon } from './provider';
 import Icon from 'next/icon/Icon.vue';
 
@@ -21,7 +20,6 @@ defineOptions({ inheritAttrs: false });
 
 const inboxRef = toRef(props, 'inbox');
 
-const hasVoiceBadge = computed(() => isVoiceCallEnabled(props.inbox));
 const channelIcon = useChannelIcon(inboxRef);
 const brandIcon = useChannelBrandIcon(inboxRef);
 
@@ -31,13 +29,7 @@ const icon = computed(() =>
 </script>
 
 <template>
-  <span class="relative inline-flex" v-bind="$attrs">
+  <span class="inline-flex" v-bind="$attrs">
     <Icon :icon="icon" class="size-full" />
-    <span
-      v-if="hasVoiceBadge"
-      class="absolute top-0 ltr:right-0 rtl:left-0 inline-flex items-center justify-center size-2 rounded-full bg-n-surface-1"
-    >
-      <Icon icon="i-lucide-audio-lines" class="size-1.5 text-n-slate-12" />
-    </span>
   </span>
 </template>
diff --git a/app/javascript/dashboard/components-next/icon/provider.js b/app/javascript/dashboard/components-next/icon/provider.js
index 0eb91afd5..7328d25a1 100644
--- a/app/javascript/dashboard/components-next/icon/provider.js
+++ b/app/javascript/dashboard/components-next/icon/provider.js
@@ -1,4 +1,9 @@
-import { INBOX_TYPES, TWILIO_CHANNEL_MEDIUM } from 'dashboard/helper/inbox';
+import {
+  INBOX_TYPES,
+  TWILIO_CHANNEL_MEDIUM,
+  isVoiceCallEnabled,
+  getInboxVoiceIcon,
+} from 'dashboard/helper/inbox';
 import { computed } from 'vue';
 
 const channelTypeIconMap = {
@@ -61,16 +66,9 @@ export function useChannelIcon(inbox) {
       icon = 'i-woot-whatsapp';
     }
 
-    // Native Twilio voice inbox: a TwilioSms with voice enabled (and no WhatsApp medium)
-    // is presented as a Voice channel, so show the phone icon.
-    const voiceEnabled =
-      inboxDetails.voice_enabled || inboxDetails.voiceEnabled;
-    if (
-      type === INBOX_TYPES.TWILIO &&
-      voiceEnabled &&
-      inboxDetails.medium !== TWILIO_CHANNEL_MEDIUM.WHATSAPP
-    ) {
-      icon = 'i-woot-voice';
+    // Voice-enabled inboxes use the combined channel + voice-wave badge glyph.
+    if (isVoiceCallEnabled(inboxDetails)) {
+      icon = getInboxVoiceIcon(type, inboxDetails.medium);
     }
 
     return icon ?? 'i-ri-global-fill';
diff --git a/app/javascript/dashboard/components-next/icon/specs/provider.spec.js b/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
index 38c001fae..300f21939 100644
--- a/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
+++ b/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
@@ -19,13 +19,32 @@ describe('useChannelIcon', () => {
     expect(icon).toBe('i-woot-whatsapp');
   });
 
-  it('returns correct icon for voice-enabled Twilio channel', () => {
+  it('returns the voice-call glyph for a voice-enabled Twilio channel', () => {
     const inbox = {
       channel_type: 'Channel::TwilioSms',
       voice_enabled: true,
     };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-voice');
+    expect(icon).toBe('i-woot-voice-call');
+  });
+
+  it('returns the WhatsApp voice glyph for a voice-enabled WhatsApp channel', () => {
+    const inbox = {
+      channel_type: 'Channel::Whatsapp',
+      voice_enabled: true,
+    };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-woot-whatsapp-voice');
+  });
+
+  it('returns the WhatsApp voice glyph for a voice-enabled Twilio WhatsApp channel', () => {
+    const inbox = {
+      channel_type: 'Channel::TwilioSms',
+      medium: 'whatsapp',
+      voice_enabled: true,
+    };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-woot-whatsapp-voice');
   });
 
   it('returns correct icon for Line channel', () => {
diff --git a/app/javascript/dashboard/components-next/message/Message.vue b/app/javascript/dashboard/components-next/message/Message.vue
index cd3c7d5dc..ae5565fe0 100644
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -457,10 +457,11 @@ function handleReplyTo() {
 
 const avatarInfo = computed(() => {
   if (props.contentAttributes?.externalEcho) {
-    const { name, avatar_url, channel_type, medium } = inbox.value;
+    const { name, avatar_url, channel_type, medium, voice_enabled } =
+      inbox.value;
     const iconName = avatar_url
       ? null
-      : getInboxIconByType(channel_type, medium);
+      : getInboxIconByType(channel_type, medium, 'fill', voice_enabled);
     return {
       name: iconName ? '' : name || t('CONVERSATION.NATIVE_APP'),
       src: avatar_url || '',
diff --git a/app/javascript/dashboard/helper/inbox.js b/app/javascript/dashboard/helper/inbox.js
index 4100cfb32..f44898b84 100644
--- a/app/javascript/dashboard/helper/inbox.js
+++ b/app/javascript/dashboard/helper/inbox.js
@@ -55,11 +55,30 @@ export const getVoiceCallProvider = inbox => {
 
 export const isVoiceCallEnabled = inbox => getVoiceCallProvider(inbox) !== null;
 
+// Combined channel + voice-wave badge glyph per voice-call provider.
+export const VOICE_CALL_ICONS = {
+  [VOICE_CALL_PROVIDERS.WHATSAPP]: 'i-woot-whatsapp-voice',
+  [VOICE_CALL_PROVIDERS.TWILIO]: 'i-woot-voice-call',
+};
+
+export const getVoiceCallIcon = provider =>
+  VOICE_CALL_ICONS[provider] ?? VOICE_CALL_ICONS[VOICE_CALL_PROVIDERS.TWILIO];
+
 export const TWILIO_CHANNEL_MEDIUM = {
   WHATSAPP: 'whatsapp',
   SMS: 'sms',
 };
 
+export const getInboxVoiceIcon = (channelType, medium) => {
+  const isWhatsapp =
+    channelType === INBOX_TYPES.WHATSAPP ||
+    (channelType === INBOX_TYPES.TWILIO &&
+      medium === TWILIO_CHANNEL_MEDIUM.WHATSAPP);
+  return getVoiceCallIcon(
+    isWhatsapp ? VOICE_CALL_PROVIDERS.WHATSAPP : VOICE_CALL_PROVIDERS.TWILIO
+  );
+};
+
 const INBOX_ICON_MAP_FILL = {
   [INBOX_TYPES.WEB]: 'i-ri-global-fill',
   [INBOX_TYPES.FB]: 'i-ri-messenger-fill',
@@ -182,7 +201,14 @@ export const getInboxClassByType = (type, phoneNumber) => {
   }
 };
 
-export const getInboxIconByType = (type, medium, variant = 'fill') => {
+export const getInboxIconByType = (
+  type,
+  medium,
+  variant = 'fill',
+  voiceEnabled = false
+) => {
+  if (voiceEnabled) return getInboxVoiceIcon(type, medium);
+
   const iconMap =
     variant === 'fill' ? INBOX_ICON_MAP_FILL : INBOX_ICON_MAP_LINE;
   const defaultIcon =
diff --git a/app/javascript/dashboard/helper/specs/inbox.spec.js b/app/javascript/dashboard/helper/specs/inbox.spec.js
index 775f05d3a..f49076cb1 100644
--- a/app/javascript/dashboard/helper/specs/inbox.spec.js
+++ b/app/javascript/dashboard/helper/specs/inbox.spec.js
@@ -1,8 +1,11 @@
 import {
   INBOX_TYPES,
+  VOICE_CALL_PROVIDERS,
   getInboxClassByType,
   getInboxIconByType,
+  getInboxVoiceIcon,
   getInboxWarningIconClass,
+  getVoiceCallIcon,
 } from '../inbox';
 
 describe('#Inbox Helpers', () => {
@@ -166,4 +169,63 @@ describe('#Inbox Helpers', () => {
       );
     });
   });
+
+  describe('getVoiceCallIcon', () => {
+    it('returns the WhatsApp voice glyph for the whatsapp provider', () => {
+      expect(getVoiceCallIcon(VOICE_CALL_PROVIDERS.WHATSAPP)).toBe(
+        'i-woot-whatsapp-voice'
+      );
+    });
+
+    it('returns the generic voice-call glyph for the twilio provider', () => {
+      expect(getVoiceCallIcon(VOICE_CALL_PROVIDERS.TWILIO)).toBe(
+        'i-woot-voice-call'
+      );
+    });
+
+    it('falls back to the generic voice-call glyph for an unknown provider', () => {
+      expect(getVoiceCallIcon('unknown')).toBe('i-woot-voice-call');
+      expect(getVoiceCallIcon(undefined)).toBe('i-woot-voice-call');
+    });
+  });
+
+  describe('getInboxVoiceIcon', () => {
+    it('returns the WhatsApp voice glyph for a WhatsApp inbox', () => {
+      expect(getInboxVoiceIcon(INBOX_TYPES.WHATSAPP)).toBe(
+        'i-woot-whatsapp-voice'
+      );
+    });
+
+    it('returns the WhatsApp voice glyph for a Twilio WhatsApp inbox', () => {
+      expect(getInboxVoiceIcon(INBOX_TYPES.TWILIO, 'whatsapp')).toBe(
+        'i-woot-whatsapp-voice'
+      );
+    });
+
+    it('returns the generic voice-call glyph for a Twilio voice inbox', () => {
+      expect(getInboxVoiceIcon(INBOX_TYPES.TWILIO, 'sms')).toBe(
+        'i-woot-voice-call'
+      );
+    });
+  });
+
+  describe('getInboxIconByType with voice enabled', () => {
+    it('returns the WhatsApp voice glyph for a voice-enabled WhatsApp inbox', () => {
+      expect(
+        getInboxIconByType(INBOX_TYPES.WHATSAPP, undefined, 'line', true)
+      ).toBe('i-woot-whatsapp-voice');
+    });
+
+    it('returns the generic voice-call glyph for a voice-enabled Twilio inbox', () => {
+      expect(getInboxIconByType(INBOX_TYPES.TWILIO, 'sms', 'line', true)).toBe(
+        'i-woot-voice-call'
+      );
+    });
+
+    it('returns the normal channel icon when voice is not enabled', () => {
+      expect(
+        getInboxIconByType(INBOX_TYPES.WHATSAPP, undefined, 'line', false)
+      ).toBe('i-woot-whatsapp');
+    });
+  });
 });
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
index e0047a65e..101b643ed 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
@@ -87,8 +87,8 @@ const inboxName = computed(() => props.inbox?.name);
 
 const inboxIcon = computed(() => {
   if (!inbox.value) return null;
-  const { channelType, medium } = inbox.value;
-  return getInboxIconByType(channelType, medium);
+  const { channelType, medium, voiceEnabled } = inbox.value;
+  return getInboxIconByType(channelType, medium, 'fill', voiceEnabled);
 });
 </script>
 
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultMessageItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultMessageItem.vue
index b9272c928..fa8c4e2bc 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultMessageItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultMessageItem.vue
@@ -65,8 +65,8 @@ const inboxName = computed(() => inbox.value?.name);
 
 const inboxIcon = computed(() => {
   if (!inbox.value) return null;
-  const { channelType, medium } = inbox.value;
-  return getInboxIconByType(channelType, medium);
+  const { channelType, medium, voiceEnabled } = inbox.value;
+  return getInboxIconByType(channelType, medium, 'fill', voiceEnabled);
 });
 
 const fileAttachments = computed(() => {
diff --git a/app/javascript/dashboard/routes/dashboard/calls/pages/CallsIndex.vue b/app/javascript/dashboard/routes/dashboard/calls/pages/CallsIndex.vue
index 553cbceac..f7b499352 100644
--- a/app/javascript/dashboard/routes/dashboard/calls/pages/CallsIndex.vue
+++ b/app/javascript/dashboard/routes/dashboard/calls/pages/CallsIndex.vue
@@ -129,22 +129,22 @@ onMounted(async () => {
     v-else
     class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1"
   >
-    <header class="px-6 pt-6 pb-4 shrink-0">
-      <div class="w-full">
+    <header class="shrink-0">
+      <div class="w-full px-6 pt-6">
         <h1 class="text-xl font-medium text-n-slate-12">
           {{ t('CALLS_PAGE.HEADER') }}
         </h1>
-        <CallsFilterBar
-          v-model:activity="activity"
-          v-model:assignee-id="assigneeId"
-          v-model:inbox-id="inboxId"
-          class="mt-5"
-          :total-count="isFetching ? null : meta.count"
-          :agents="agents"
-          :inboxes="voiceInboxes"
-          :show-assignee="isAdmin"
-        />
       </div>
+      <CallsFilterBar
+        v-model:activity="activity"
+        v-model:assignee-id="assigneeId"
+        v-model:inbox-id="inboxId"
+        class="mt-5 pb-4 border-b border-n-weak mx-6"
+        :total-count="isFetching ? null : meta.count"
+        :agents="agents"
+        :inboxes="voiceInboxes"
+        :show-assignee="isAdmin"
+      />
     </header>
     <main class="flex-1 px-6 overflow-y-auto">
       <div class="w-full">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentEditPage.vue b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentEditPage.vue
index 0550e7364..abba07478 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentEditPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentEditPage.vue
@@ -79,13 +79,15 @@ const breadcrumbItems = computed(() => {
 });
 
 const buildInboxList = allInboxes =>
-  allInboxes?.map(({ name, id, email, phoneNumber, channelType, medium }) => ({
-    name,
-    id,
-    email,
-    phoneNumber,
-    icon: getInboxIconByType(channelType, medium, 'line'),
-  })) || [];
+  allInboxes?.map(
+    ({ name, id, email, phoneNumber, channelType, medium, voiceEnabled }) => ({
+      name,
+      id,
+      email,
+      phoneNumber,
+      icon: getInboxIconByType(channelType, medium, 'line', voiceEnabled),
+    })
+  ) || [];
 
 const policyInboxes = computed(() =>
   buildInboxList(selectedPolicy.value?.inboxes)
diff --git a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue
index 31d0fa3e1..a65c2f8b3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue
@@ -64,13 +64,23 @@ const allInboxes = computed(
     inboxes.value
       ?.slice()
       .sort((a, b) => a.name.localeCompare(b.name))
-      .map(({ name, id, email, phoneNumber, channelType, medium }) => ({
-        name,
-        id,
-        email,
-        phoneNumber,
-        icon: getInboxIconByType(channelType, medium, 'line'),
-      })) || []
+      .map(
+        ({
+          name,
+          id,
+          email,
+          phoneNumber,
+          channelType,
+          medium,
+          voiceEnabled,
+        }) => ({
+          name,
+          id,
+          email,
+          phoneNumber,
+          icon: getInboxIconByType(channelType, medium, 'line', voiceEnabled),
+        })
+      ) || []
 );
 
 const formData = computed(() => ({
diff --git a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/InboxLinkDialog.vue b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/InboxLinkDialog.vue
index 69ea620bd..6a0aaa1d5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/InboxLinkDialog.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/InboxLinkDialog.vue
@@ -29,7 +29,8 @@ const inboxIcon = computed(() => {
   return getInboxIconByType(
     props.inbox.channelType,
     props.inbox.medium,
-    'line'
+    'line',
+    props.inbox.voiceEnabled
   );
 });
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index 0ebe8f238..93a21c868 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -281,8 +281,12 @@ export default {
       return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
     },
     inboxIcon() {
-      const { medium, channel_type: type } = this.inbox;
-      return getInboxIconByType(type, medium, 'line');
+      const {
+        medium,
+        channel_type: type,
+        voice_enabled: voiceEnabled,
+      } = this.inbox;
+      return getInboxIconByType(type, medium, 'line', voiceEnabled);
     },
     bannerMaxWidth() {
       const narrowTabs = ['collaborators', 'bot-configuration'];
diff --git a/enterprise/app/finders/call_finder.rb b/enterprise/app/finders/call_finder.rb
index 31d6ae5f2..6d3ee59be 100644
--- a/enterprise/app/finders/call_finder.rb
+++ b/enterprise/app/finders/call_finder.rb
@@ -62,7 +62,7 @@ class CallFinder
   end
 
   def paginated_calls
-    @calls.includes(:contact, :inbox, :conversation, :accepted_by_agent)
+    @calls.includes(:contact, :conversation, :accepted_by_agent, inbox: :channel)
           .order(created_at: :desc)
           .page(@params[:page] || 1)
           .per(RESULTS_PER_PAGE)
diff --git a/enterprise/app/views/api/v1/models/_call.json.jbuilder b/enterprise/app/views/api/v1/models/_call.json.jbuilder
index 7a3531b39..cd14a27c7 100644
--- a/enterprise/app/views/api/v1/models/_call.json.jbuilder
+++ b/enterprise/app/views/api/v1/models/_call.json.jbuilder
@@ -19,6 +19,8 @@ end
 json.inbox do
   json.id call.inbox_id
   json.name call.inbox.name
+  json.channel_type call.inbox.channel_type
+  json.medium call.inbox.channel.try(:medium)
 end
 
 if call.accepted_by_agent
diff --git a/spec/enterprise/controllers/api/v1/accounts/calls_controller_spec.rb b/spec/enterprise/controllers/api/v1/accounts/calls_controller_spec.rb
index 86e4fb317..4f6d0d1b4 100644
--- a/spec/enterprise/controllers/api/v1/accounts/calls_controller_spec.rb
+++ b/spec/enterprise/controllers/api/v1/accounts/calls_controller_spec.rb
@@ -32,6 +32,7 @@ RSpec.describe 'Calls API', type: :request do
       item = body['payload'].find { |c| c['id'] == agent_call.id }
       expect(item['transcript']).to eq('hello world')
       expect(item['contact']['phone_number']).to eq(contact.phone_number)
+      expect(item['inbox']).to include('id' => inbox.id, 'name' => inbox.name, 'channel_type' => inbox.channel_type)
     end
 
     it 'scopes the list to calls the agent accepted' do
diff --git a/theme/icons.js b/theme/icons.js
index 265bd4e16..fa737bd30 100644
--- a/theme/icons.js
+++ b/theme/icons.js
@@ -269,6 +269,16 @@ export const icons = {
     width: 24,
     height: 24,
   },
+  'voice-call': {
+    body: `<mask id="cvc" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16"><rect width="16" height="16" fill="#fff"/><circle cx="12" cy="4" r="4" fill="#000"/></mask><g mask="url(#cvc)"><path d="M7.916 10.784a.5.5 0 0 0 .607-.152L8.7 10.4a1 1 0 0 1 .8-.4H11a1 1 0 0 1 1 1v1.5a1 1 0 0 1-1 1 9 9 0 0 1-9-9 1 1 0 0 1 1-1h1.5a1 1 0 0 1 1 1V6a1 1 0 0 1-.4.8l-.234.176a.5.5 0 0 0-.146.616 7 7 0 0 0 3.196 3.192" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g><circle cx="12" cy="4" r="4" fill="currentColor" fill-opacity="0.15"/><path d="M10.4 3.2v1.6M12 2.4v3.2m1.6-2.4v1.6" stroke="currentColor" stroke-width=".833" stroke-linecap="round" stroke-linejoin="round"/>`,
+    width: 16,
+    height: 16,
+  },
+  'whatsapp-voice': {
+    body: `<mask id="cwv" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16"><rect width="16" height="16" fill="#fff"/><circle cx="12" cy="4.5" r="4" fill="#000"/></mask><g mask="url(#cwv)"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.349 3.655A5.6 5.6 0 0 0 8.357 2a5.65 5.65 0 0 0-5.643 5.642c0 .995.26 1.966.753 2.821l-.512 1.873a.63.63 0 0 0 .767.775l1.936-.508a5.64 5.64 0 0 0 2.697.687h.002A5.65 5.65 0 0 0 14 7.647a5.6 5.6 0 0 0-1.652-3.992m-3.992 8.682h-.002a4.7 4.7 0 0 1-2.387-.654l-.171-.102-1.776.466.474-1.73-.111-.178a4.7 4.7 0 0 1-.717-2.496 4.697 4.697 0 0 1 4.692-4.69c1.253 0 2.43.489 3.316 1.376a4.66 4.66 0 0 1 1.372 3.317 4.697 4.697 0 0 1-4.69 4.69m2.573-3.513c-.141-.07-.835-.411-.964-.458-.13-.047-.223-.07-.317.07a8 8 0 0 1-.446.553c-.083.094-.165.106-.306.035s-.595-.22-1.134-.7a4.3 4.3 0 0 1-.784-.976c-.082-.141-.009-.218.061-.288.064-.063.141-.165.212-.247.07-.082.094-.141.141-.235s.024-.176-.012-.247c-.035-.07-.317-.765-.434-1.047-.115-.275-.231-.237-.318-.242a6 6 0 0 0-.27-.005.52.52 0 0 0-.376.177c-.13.14-.493.482-.493 1.176 0 .693.505 1.364.575 1.458.071.094.995 1.518 2.409 2.13.336.145.599.232.804.297.337.107.645.092.888.056.27-.041.834-.342.951-.671.118-.33.118-.612.083-.67-.035-.06-.13-.095-.27-.166" fill="currentColor"/></g><circle cx="12" cy="4.5" r="4" fill="currentColor" fill-opacity="0.15"/><path d="M10.4 3.7v1.6M12 2.9v3.2m1.6-2.4v1.6" stroke="currentColor" stroke-width=".833" stroke-linecap="round" stroke-linejoin="round"/>`,
+    width: 16,
+    height: 16,
+  },
   instagram: {
     body: `<g fill="none" stroke="currentColor"><path d="M12.0003 15.3329C13.8412 15.3329 15.3337 13.8405 15.3337 11.9996C15.3337 10.1586 13.8412 8.66626 12.0003 8.66626C10.1594 8.66626 8.66699 10.1586 8.66699 11.9996C8.66699 13.8405 10.1594 15.3329 12.0003 15.3329Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.5 15.3333V8.66667C4.5 6.36548 6.36548 4.5 8.66667 4.5H15.3333C17.6345 4.5 19.5 6.36548 19.5 8.66667V15.3333C19.5 17.6345 17.6345 19.5 15.3333 19.5H8.66667C6.36548 19.5 4.5 17.6345 4.5 15.3333Z" stroke-width="1.5"/><path d="M16.583 7.42552L16.5913 7.41626" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></g>`,
     width: 24,
@@ -470,5 +480,15 @@ export const icons = {
     width: 24,
     height: 24,
   },
+  'audio-play': {
+    body: `<path d="M3.31445 11.3998V2.6002C3.31445 2.35931 3.39947 2.15725 3.56951 1.99401C3.73955 1.83077 3.93793 1.74944 4.16465 1.75C4.2355 1.75 4.31004 1.76049 4.38826 1.78146C4.46647 1.80243 4.54073 1.83446 4.61101 1.87753L11.5401 6.27732C11.6677 6.36234 11.7635 6.46862 11.8275 6.59615C11.8916 6.72368 11.9233 6.85829 11.9227 6.99999C11.9222 7.14169 11.8904 7.27631 11.8275 7.40384C11.7646 7.53137 11.6688 7.63764 11.5401 7.72266L4.61101 12.1224C4.54016 12.165 4.46591 12.197 4.38826 12.2185C4.3106 12.2401 4.23607 12.2505 4.16465 12.25C3.93793 12.25 3.73955 12.1684 3.56951 12.0051C3.39947 11.8419 3.31445 11.6401 3.31445 11.3998Z" fill="currentColor"/>`,
+    width: 14,
+    height: 14,
+  },
+  'audio-pause': {
+    body: `<path d="M10.5001 1.75H8.75008C8.42792 1.75 8.16675 2.01117 8.16675 2.33333V11.6667C8.16675 11.9888 8.42792 12.25 8.75008 12.25H10.5001C10.8222 12.25 11.0834 11.9888 11.0834 11.6667V2.33333C11.0834 2.01117 10.8222 1.75 10.5001 1.75Z" fill="currentColor"/><path d="M5.25008 1.75H3.50008C3.17792 1.75 2.91675 2.01117 2.91675 2.33333V11.6667C2.91675 11.9888 3.17792 12.25 3.50008 12.25H5.25008C5.57225 12.25 5.83342 11.9888 5.83342 11.6667V2.33333C5.83342 2.01117 5.57225 1.75 5.25008 1.75Z" fill="currentColor"/>`,
+    width: 14,
+    height: 14,
+  },
   /** Ends */
 };