fix: enforce email limits for agent invitations

Atomically reserve Chatwoot Cloud account email capacity before sending new agent invitations, including bulk creation, and roll back with HTTP 429 when the limit is exhausted.

app/builders/agent_builder.rb

@@ -17,7 +17,9 @@ class AgentBuilder
     ActiveRecord::Base.transaction do
       @user = find_or_create_user
       create_account_user
+      reserve_invitation_email_capacity if user_needs_confirmation?
     end
+    @user.send_confirmation_instructions if user_needs_confirmation?
     @user
   end
 
@@ -26,18 +28,29 @@ class AgentBuilder
   # Finds a user by email or creates a new one with a temporary password.
   # @return [User] the found or created user.
   def find_or_create_user
+    @new_user = false
     user = User.from_email(email)
     return user if user
 
     @name = email.split('@').first if @name.blank?
     temp_password = "1!aA#{SecureRandom.alphanumeric(12)}"
-    User.create!(email: email, name: @name, password: temp_password, password_confirmation: temp_password)
+    User.new(email: email, name: @name, password: temp_password, password_confirmation: temp_password).tap do |new_user|
+      new_user.skip_confirmation_notification!
+      new_user.save!
+      @new_user = true
+    end
   end
 
   # Checks if the user needs confirmation.
   # @return [Boolean] true if the user is persisted and not confirmed, false otherwise.
   def user_needs_confirmation?
-    @user.persisted? && !@user.confirmed?
+    @new_user && @user.persisted? && !@user.confirmed?
+  end
+
+  def reserve_invitation_email_capacity
+    return if account.reserve_email_send_capacity
+
+    raise CustomExceptions::Account::EmailLimitExceeded.new({})
   end
 
   # Creates an account user linking the user to the current account.

app/controllers/concerns/request_exception_handler.rb

@@ -9,7 +9,9 @@ module RequestExceptionHandler
 
   included do
     rescue_from ActiveRecord::RecordInvalid, with: :render_record_invalid
-    rescue_from CustomExceptions::Inbox::LimitExceeded, with: :render_error_response
+    rescue_from CustomExceptions::Inbox::LimitExceeded,
+                CustomExceptions::Account::EmailLimitExceeded,
+                with: :render_error_response
   end
 
   private

app/javascript/dashboard/api/calls.js

@@ -0,0 +1,14 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class CallsAPI extends ApiClient {
+  constructor() {
+    super('calls', { accountScoped: true });
+  }
+
+  get(params = {}) {
+    return axios.get(this.url, { params });
+  }
+}
+
+export default new CallsAPI();

app/javascript/dashboard/components-next/Calls/CallListItem.vue

@@ -0,0 +1,237 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { relativeDayTimestamp } from 'shared/helpers/timeHelper';
+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';
+import {
+  VOICE_CALL_DIRECTION,
+  VOICE_CALL_STATUS,
+} from 'dashboard/components-next/message/constants';
+import CallStatusBadge from './CallStatusBadge.vue';
+import { CALL_KIND, getCallKind } from './constants';
+
+const props = defineProps({
+  call: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+const route = useRoute();
+
+const kind = computed(() => getCallKind(props.call));
+
+const contactName = computed(
+  () => props.call.contact.name || props.call.contact.phoneNumber
+);
+
+const agentActionLabel = computed(() => {
+  if (!props.call.agent) return '';
+  if (kind.value === CALL_KIND.OUTGOING) return t('CALLS_PAGE.ROW.DIALED_BY');
+  if (kind.value === CALL_KIND.INCOMING) return t('CALLS_PAGE.ROW.PICKED_BY');
+  // Ongoing collapses direction, so resolve dialed-vs-picked from the raw value.
+  if (kind.value === CALL_KIND.ONGOING) {
+    return props.call.direction === VOICE_CALL_DIRECTION.OUTBOUND
+      ? t('CALLS_PAGE.ROW.DIALED_BY')
+      : t('CALLS_PAGE.ROW.PICKED_BY');
+  }
+  return '';
+});
+
+const resultLabel = computed(() => {
+  if (kind.value === CALL_KIND.MISSED) return t('CALLS_PAGE.ROW.NO_AGENT');
+  if (kind.value === CALL_KIND.NO_REPLY) {
+    return t('CALLS_PAGE.ROW.NO_CONTACT_ANSWER');
+  }
+  if (kind.value === CALL_KIND.FAILED) return t('CALLS_PAGE.ROW.FAILED');
+  if (kind.value === CALL_KIND.ONGOING) {
+    return props.call.status === VOICE_CALL_STATUS.RINGING
+      ? t('CALLS_PAGE.ROW.RINGING')
+      : t('CALLS_PAGE.ROW.IN_PROGRESS');
+  }
+  return t('CALLS_PAGE.ROW.ANSWERED');
+});
+
+const providerIcon = computed(() =>
+  props.call.provider === 'whatsapp' ? 'i-woot-whatsapp' : 'i-lucide-phone'
+);
+
+const createdAtLabel = computed(() =>
+  relativeDayTimestamp(props.call.createdAt, t('CALLS_PAGE.ROW.YESTERDAY'))
+);
+
+const conversationRoute = computed(() => ({
+  name: 'inbox_conversation',
+  params: {
+    accountId: route.params.accountId,
+    conversation_id: props.call.conversation.displayId,
+  },
+  query: { messageId: props.call.messageId },
+}));
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 py-3.5 border-b border-n-weak lg:hidden">
+    <div class="flex items-center gap-2 min-w-0">
+      <Avatar
+        :src="call.contact.avatar"
+        :name="contactName"
+        :size="24"
+        rounded-full
+      />
+      <span
+        v-tooltip.top="{ content: contactName, delay: { show: 500, hide: 0 } }"
+        class="text-heading-3 font-medium truncate text-n-slate-12 min-w-0"
+      >
+        {{ contactName }}
+      </span>
+      <CallStatusBadge :kind="kind" class="ms-auto shrink-0" />
+      <RouterLink
+        :to="conversationRoute"
+        class="inline-flex items-center h-6 gap-1 px-2 text-label-small outline outline-1 -outline-offset-1 rounded-md outline-n-weak text-n-slate-11 hover:bg-n-alpha-1 shrink-0"
+      >
+        <Icon icon="i-lucide-message-circle" class="size-3.5 text-n-slate-11" />
+        {{ call.conversation.displayId }}
+        <Icon icon="i-lucide-arrow-up-right" class="size-3.5 text-n-slate-11" />
+      </RouterLink>
+    </div>
+    <div class="flex items-center gap-1.5 min-w-0">
+      <template v-if="agentActionLabel">
+        <span class="text-label-small text-n-slate-10 shrink-0">
+          {{ agentActionLabel }}
+        </span>
+        <Avatar
+          :src="call.agent.avatar"
+          :name="call.agent.name"
+          :size="20"
+          rounded-full
+        />
+        <span class="text-body-main truncate text-n-slate-12 min-w-0">
+          {{ call.agent.name }}
+        </span>
+      </template>
+      <span v-else class="text-body-main truncate text-n-slate-10 min-w-0">
+        {{ resultLabel }}
+      </span>
+      <span class="w-px h-3 bg-n-strong shrink-0" />
+      <Icon :icon="providerIcon" class="size-4 text-n-slate-11 shrink-0" />
+      <span class="text-body-main truncate text-n-slate-11 min-w-0">
+        {{ call.inbox.name }}
+      </span>
+      <span
+        v-if="!call.recordingUrl"
+        class="ms-auto shrink-0 text-label-small text-n-slate-11 tabular-nums"
+      >
+        {{ createdAtLabel }}
+      </span>
+    </div>
+    <div
+      v-if="call.recordingUrl"
+      class="flex items-center gap-2 min-w-0 justify-between"
+    >
+      <AudioPlayer
+        :src="call.recordingUrl"
+        :fallback-duration="call.durationSeconds || 0"
+        class="flex-1 sm:flex-[0.7] min-w-0"
+      />
+      <span class="shrink-0 text-label-small text-n-slate-11 tabular-nums">
+        {{ createdAtLabel }}
+      </span>
+    </div>
+  </div>
+
+  <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">
+      <Avatar
+        :src="call.contact.avatar"
+        :name="contactName"
+        :size="24"
+        rounded-full
+      />
+      <span
+        v-tooltip.top="{ content: contactName, delay: { show: 500, hide: 0 } }"
+        class="text-heading-3 font-medium truncate text-n-slate-12"
+      >
+        {{ contactName }}
+      </span>
+    </div>
+    <div
+      class="flex flex-nowrap items-center gap-x-2 gap-y-2 min-w-0 grow shrink"
+    >
+      <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">
+          <span
+            class="text-label-small text-n-slate-10 truncate min-w-0 shrink min-w-8"
+          >
+            {{ agentActionLabel }}
+          </span>
+          <span class="flex items-center gap-1.5 min-w-16 shrink-[20]">
+            <Avatar
+              :src="call.agent.avatar"
+              :name="call.agent.name"
+              :size="20"
+              rounded-full
+            />
+            <span
+              v-tooltip.top="{
+                content: call.agent.name,
+                delay: { show: 500, hide: 0 },
+              }"
+              class="text-body-main truncate text-n-slate-12 min-w-0"
+            >
+              {{ call.agent.name }}
+            </span>
+          </span>
+        </template>
+        <span
+          v-else-if="resultLabel"
+          class="text-body-main truncate text-n-slate-10 min-w-0 shrink-[20]"
+        >
+          {{ resultLabel }}
+        </span>
+      </div>
+      <AudioPlayer
+        v-if="call.recordingUrl"
+        :src="call.recordingUrl"
+        :fallback-duration="call.durationSeconds || 0"
+        class="w-auto min-w-44 shrink mx-auto"
+      />
+    </div>
+    <div
+      v-tooltip.top="{
+        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"
+    >
+      <Icon :icon="providerIcon" class="size-4 text-n-slate-11 shrink-0" />
+      <span class="text-body-main truncate text-n-slate-11">
+        {{ call.inbox.name }}
+      </span>
+    </div>
+    <RouterLink
+      :to="conversationRoute"
+      class="inline-flex items-center h-6 gap-1 px-2 text-label-small py-3.5 outline outline-1 -outline-offset-1 rounded-md outline-n-weak text-n-slate-11 hover:bg-n-alpha-1 shrink-0 justify-self-start"
+    >
+      <Icon icon="i-lucide-message-circle" class="size-3.5 text-n-slate-11" />
+      {{ call.conversation.displayId }}
+      <Icon icon="i-lucide-arrow-up-right" class="size-3.5 text-n-slate-11" />
+    </RouterLink>
+    <span
+      v-tooltip.top="{
+        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"
+    >
+      {{ createdAtLabel }}
+    </span>
+  </div>
+</template>

app/javascript/dashboard/components-next/Calls/CallRecordingPlayer.vue

@@ -0,0 +1,158 @@
+<script setup>
+import { computed, getCurrentInstance, ref, useTemplateRef } from 'vue';
+import { downloadFile } from '@chatwoot/utils';
+import { useEmitter } from 'dashboard/composables/emitter';
+import { emitter } from 'shared/helpers/mitt';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+  fallbackDuration: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const PLAYBACK_SPEEDS = [1, 1.5, 2];
+
+const audioPlayer = useTemplateRef('audioPlayer');
+const { uid } = getCurrentInstance();
+
+const isPlaying = ref(false);
+const currentTime = ref(0);
+const duration = ref(props.fallbackDuration);
+const playbackSpeed = ref(1);
+
+const onLoadedMetadata = () => {
+  const loadedDuration = audioPlayer.value?.duration;
+  if (Number.isFinite(loadedDuration)) duration.value = loadedDuration;
+};
+
+const formatTime = time => {
+  if (!time || Number.isNaN(time)) return '00:00';
+  const minutes = Math.floor(time / 60);
+  const seconds = Math.floor(time % 60);
+  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+};
+
+const playbackSpeedLabel = computed(() => `${playbackSpeed.value}x`);
+
+const displayedTime = computed(() =>
+  formatTime(
+    isPlaying.value || currentTime.value ? currentTime.value : duration.value
+  )
+);
+
+// Only one recording should play at a time across the list.
+useEmitter('pause_playing_audio', currentPlayingId => {
+  if (currentPlayingId !== uid && isPlaying.value) {
+    audioPlayer.value?.pause();
+    isPlaying.value = false;
+  }
+});
+
+const playOrPause = () => {
+  if (isPlaying.value) {
+    audioPlayer.value.pause();
+    isPlaying.value = false;
+  } else {
+    emitter.emit('pause_playing_audio', uid);
+    audioPlayer.value.play();
+    isPlaying.value = true;
+  }
+};
+
+const onTimeUpdate = () => {
+  currentTime.value = audioPlayer.value?.currentTime;
+};
+
+const seek = event => {
+  const time = Number(event.target.value);
+  audioPlayer.value.currentTime = time;
+  currentTime.value = time;
+};
+
+const onEnd = () => {
+  isPlaying.value = false;
+  currentTime.value = 0;
+};
+
+const changePlaybackSpeed = () => {
+  const currentIndex = PLAYBACK_SPEEDS.indexOf(playbackSpeed.value);
+  playbackSpeed.value =
+    PLAYBACK_SPEEDS[(currentIndex + 1) % PLAYBACK_SPEEDS.length];
+  audioPlayer.value.playbackRate = playbackSpeed.value;
+};
+
+const downloadRecording = () => {
+  downloadFile({ url: props.src, type: 'audio' });
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-center h-9 gap-2 px-2 rounded-full bg-n-alpha-1 dark:bg-n-alpha-2 overflow-hidden"
+    @click.stop
+  >
+    <audio
+      ref="audioPlayer"
+      class="hidden"
+      playsinline
+      @loadedmetadata="onLoadedMetadata"
+      @timeupdate="onTimeUpdate"
+      @ended="onEnd"
+    >
+      <source :src="src" />
+    </audio>
+    <Button
+      variant="ghost"
+      color="slate"
+      size="xs"
+      class="!w-6 !p-0 text-n-slate-12"
+      @click="playOrPause"
+    >
+      <template #icon>
+        <Icon
+          :icon="isPlaying ? 'i-lucide-pause' : 'i-lucide-play'"
+          class="size-4 flex-shrink-0"
+        />
+      </template>
+    </Button>
+    <input
+      type="range"
+      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"
+      @input="seek"
+    />
+    <span class="text-sm tabular-nums text-n-slate-11 shrink-0">
+      {{ displayedTime }}
+    </span>
+    <div class="w-px h-3.5 bg-n-slate-6 shrink-0" />
+    <Button
+      variant="ghost"
+      color="slate"
+      size="xs"
+      :label="playbackSpeedLabel"
+      class="!px-1 min-w-6 !text-n-slate-11"
+      @click="changePlaybackSpeed"
+    />
+    <div class="w-px h-3.5 bg-n-slate-6 shrink-0" />
+    <Button
+      variant="ghost"
+      color="slate"
+      size="xs"
+      class="!w-6 !p-0 text-n-slate-11"
+      @click="downloadRecording"
+    >
+      <template #icon>
+        <Icon icon="i-lucide-download" class="size-4 flex-shrink-0" />
+      </template>
+    </Button>
+  </div>
+</template>

app/javascript/dashboard/components-next/Calls/CallStatusBadge.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import { CALL_KIND } from './constants';
+
+const props = defineProps({
+  kind: {
+    type: String,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const KIND_CONFIG = {
+  [CALL_KIND.ONGOING]: {
+    icon: 'i-lucide-phone-call',
+    class: 'bg-n-teal-3 text-n-teal-11',
+  },
+  [CALL_KIND.INCOMING]: {
+    icon: 'i-lucide-phone-incoming',
+    class: 'bg-n-slate-3 text-n-slate-11',
+  },
+  [CALL_KIND.OUTGOING]: {
+    icon: 'i-lucide-phone-outgoing',
+    class: 'bg-n-slate-3 text-n-slate-11',
+  },
+  [CALL_KIND.MISSED]: {
+    icon: 'i-lucide-phone-missed',
+    class: 'bg-n-ruby-3 text-n-ruby-11',
+  },
+  [CALL_KIND.NO_REPLY]: {
+    icon: 'i-lucide-phone-outgoing',
+    class: 'bg-n-amber-3 text-n-amber-11',
+  },
+  [CALL_KIND.FAILED]: {
+    icon: 'i-lucide-phone-off',
+    class: 'bg-n-ruby-3 text-n-ruby-11',
+  },
+};
+
+const config = computed(() => KIND_CONFIG[props.kind]);
+</script>
+
+<template>
+  <span
+    class="inline-flex items-center justify-center w-20 gap-1.5 h-6 px-1 rounded-md text-label-small shrink-0"
+    :class="config.class"
+  >
+    <Icon :icon="config.icon" class="size-3 flex-shrink-0" />
+    <span class="truncate">{{
+      t(`CALLS_PAGE.STATUS.${kind.toUpperCase()}`)
+    }}</span>
+  </span>
+</template>

app/javascript/dashboard/components-next/Calls/CallsEmptyState.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const setupVoiceChannel = () => {
+  router.push({
+    name: 'settings_inbox_new',
+    params: { accountId: route.params.accountId },
+  });
+};
+</script>
+
+<template>
+  <EmptyStateLayout
+    :title="t('CALLS_PAGE.SETUP.TITLE')"
+    :subtitle="t('CALLS_PAGE.SETUP.SUBTITLE')"
+    :show-backdrop="false"
+    :action-perms="['administrator']"
+  >
+    <template #actions>
+      <Button
+        :label="t('CALLS_PAGE.SETUP.ACTION')"
+        icon="i-lucide-plus"
+        @click="setupVoiceChannel"
+      />
+    </template>
+  </EmptyStateLayout>
+</template>

app/javascript/dashboard/components-next/Calls/CallsFilterBar.vue

@@ -0,0 +1,250 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
+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';
+
+const props = defineProps({
+  // Null while a fetch is in flight so stale counts are never shown.
+  totalCount: {
+    type: Number,
+    default: null,
+  },
+  agents: {
+    type: Array,
+    default: () => [],
+  },
+  inboxes: {
+    type: Array,
+    default: () => [],
+  },
+  // Self-scoped viewers only ever see their own calls, so the assignee filter
+  // is meaningless for them — only admins get it.
+  showAssignee: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const activity = defineModel('activity', { type: String, default: null });
+const assigneeId = defineModel('assigneeId', { type: Number, default: null });
+const inboxId = defineModel('inboxId', { type: Number, default: null });
+
+const { t } = useI18n();
+
+const ACTIVITY_ICONS = {
+  missed: 'i-lucide-phone-missed',
+  no_reply: 'i-lucide-phone-outgoing',
+  incoming: 'i-lucide-phone-incoming',
+  outgoing: 'i-lucide-phone-outgoing',
+  in_progress: 'i-lucide-phone-call',
+};
+
+const BASE_ACTIVITIES = ['missed', 'no_reply'];
+const OTHER_ACTIVITIES = ['incoming', 'outgoing', 'in_progress'];
+
+// A single open-menu identifier keeps the three dropdowns mutually exclusive:
+// opening one closes the others without any cross-wiring.
+const openMenu = ref(null); // 'activity' | 'assignee' | 'more' | null
+
+const toggleMenu = name => {
+  openMenu.value = openMenu.value === name ? null : name;
+};
+
+// Each dropdown wrapper closes itself on outside clicks. The guard keeps the
+// other two wrappers (which the click is also outside of) from closing a
+// menu the user is interacting with.
+const closeOnOutside = name => {
+  if (openMenu.value === name) openMenu.value = null;
+};
+
+const activityLabel = value => t(`CALLS_PAGE.FILTERS.${value.toUpperCase()}`);
+
+const activeChipLabel = computed(() => {
+  const label = activityLabel(activity.value);
+  return props.totalCount === null ? label : `${label} (${props.totalCount})`;
+});
+
+const inactiveChips = computed(() =>
+  BASE_ACTIVITIES.filter(value => value !== activity.value)
+);
+
+const otherActivityItems = computed(() =>
+  OTHER_ACTIVITIES.map(value => ({
+    label: activityLabel(value),
+    value,
+    action: 'filter',
+    icon: ACTIVITY_ICONS[value],
+    isSelected: activity.value === value,
+  }))
+);
+
+const assigneeItems = computed(() => [
+  {
+    label: t('CALLS_PAGE.FILTERS.ALL_ASSIGNEES'),
+    value: null,
+    action: 'filter',
+    isSelected: !assigneeId.value,
+  },
+  ...props.agents.map(agent => ({
+    label: agent.name,
+    value: agent.id,
+    action: 'filter',
+    thumbnail: { name: agent.name, src: agent.thumbnail },
+    isSelected: assigneeId.value === agent.id,
+  })),
+]);
+
+const moreFiltersSections = computed(() => [
+  {
+    title: t('CALLS_PAGE.FILTERS.INBOX'),
+    items: [
+      {
+        label: t('CALLS_PAGE.FILTERS.ALL_INBOXES'),
+        value: null,
+        action: 'inbox',
+        isSelected: !inboxId.value,
+      },
+      ...props.inboxes.map(inbox => ({
+        label: inbox.name,
+        value: inbox.id,
+        action: 'inbox',
+        isSelected: inboxId.value === inbox.id,
+      })),
+    ],
+  },
+]);
+
+const selectedAssigneeLabel = computed(
+  () =>
+    props.agents.find(agent => agent.id === assigneeId.value)?.name ||
+    t('CALLS_PAGE.FILTERS.ASSIGNEE')
+);
+
+const hasMoreFilters = computed(() => Boolean(inboxId.value));
+
+const setActivity = value => {
+  openMenu.value = null;
+  activity.value = value;
+};
+
+const setAssignee = ({ value }) => {
+  openMenu.value = null;
+  assigneeId.value = value;
+};
+
+const applyMoreFilter = ({ action, value }) => {
+  openMenu.value = null;
+  if (action === 'inbox') inboxId.value = value;
+};
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-between gap-3">
+    <div class="flex flex-wrap items-center gap-3">
+      <span v-if="!activity" class="text-heading-3 text-n-slate-11 shrink-0">
+        {{
+          totalCount === null
+            ? t('CALLS_PAGE.ALL_CALLS')
+            : t('CALLS_PAGE.ALL_CALLS_COUNT', { count: totalCount })
+        }}
+      </span>
+      <Button
+        v-else
+        variant="outline"
+        color="blue"
+        size="sm"
+        :icon="ACTIVITY_ICONS[activity]"
+        class="shrink-0"
+        @click="setActivity(null)"
+      >
+        {{ activeChipLabel }}
+        <Icon icon="i-lucide-x" />
+      </Button>
+      <div class="w-px h-4 bg-n-strong shrink-0" />
+      <Button
+        v-for="chip in inactiveChips"
+        :key="chip"
+        variant="outline"
+        color="slate"
+        size="sm"
+        :icon="ACTIVITY_ICONS[chip]"
+        :label="activityLabel(chip)"
+        class="shrink-0 text-n-slate-12"
+        @click="setActivity(chip)"
+      />
+      <OnClickOutside
+        class="relative shrink-0"
+        @trigger="closeOnOutside('activity')"
+      >
+        <Button
+          variant="outline"
+          color="slate"
+          size="sm"
+          icon="i-lucide-phone"
+          class="text-n-slate-12"
+          @click="toggleMenu('activity')"
+        >
+          {{ t('CALLS_PAGE.FILTERS.OTHER_ACTIVITY') }}
+          <Icon icon="i-lucide-chevron-down" class="text-n-slate-11" />
+        </Button>
+        <DropdownMenu
+          v-if="openMenu === 'activity'"
+          :menu-items="otherActivityItems"
+          class="mt-1 start-0 top-full w-44"
+          @action="setActivity($event.value)"
+        />
+      </OnClickOutside>
+    </div>
+    <div class="flex items-center gap-2 shrink-0">
+      <OnClickOutside
+        v-if="showAssignee"
+        class="relative"
+        @trigger="closeOnOutside('assignee')"
+      >
+        <Button
+          variant="outline"
+          color="slate"
+          size="sm"
+          icon="i-lucide-user-round-cog"
+          class="max-w-52 text-n-slate-12"
+          @click="toggleMenu('assignee')"
+        >
+          <span class="truncate">{{ selectedAssigneeLabel }}</span>
+          <Icon icon="i-lucide-chevron-down" class="text-n-slate-11 shrink-0" />
+        </Button>
+        <DropdownMenu
+          v-if="openMenu === 'assignee'"
+          :menu-items="assigneeItems"
+          show-search
+          class="mt-1 end-0 top-full w-56 max-h-72"
+          @action="setAssignee"
+        />
+      </OnClickOutside>
+      <OnClickOutside class="relative" @trigger="closeOnOutside('more')">
+        <Button
+          variant="outline"
+          size="sm"
+          icon="i-lucide-list-filter"
+          :color="hasMoreFilters ? 'blue' : 'slate'"
+          :class="hasMoreFilters ? '' : 'text-n-slate-12'"
+          @click="toggleMenu('more')"
+        >
+          {{ t('CALLS_PAGE.FILTERS.MORE_FILTERS') }}
+          <Icon
+            icon="i-lucide-chevron-down"
+            :class="hasMoreFilters ? '' : 'text-n-slate-11'"
+          />
+        </Button>
+        <DropdownMenu
+          v-if="openMenu === 'more'"
+          :menu-sections="moreFiltersSections"
+          class="mt-1 end-0 top-full w-56 max-h-80"
+          @action="applyMoreFilter"
+        />
+      </OnClickOutside>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/Calls/constants.js

@@ -0,0 +1,51 @@
+import {
+  VOICE_CALL_STATUS,
+  VOICE_CALL_DIRECTION,
+} from 'dashboard/components-next/message/constants';
+
+export const CALL_KIND = {
+  ONGOING: 'ongoing',
+  INCOMING: 'incoming',
+  OUTGOING: 'outgoing',
+  MISSED: 'missed',
+  NO_REPLY: 'no_reply',
+  FAILED: 'failed',
+};
+
+// The API returns display values: status (ringing/in-progress/completed/
+// no-answer/failed) and direction (inbound/outbound). The list UI presents
+// them as a single "kind" per row.
+export const getCallKind = call => {
+  if (
+    [VOICE_CALL_STATUS.RINGING, VOICE_CALL_STATUS.IN_PROGRESS].includes(
+      call.status
+    )
+  ) {
+    return CALL_KIND.ONGOING;
+  }
+  if (
+    [VOICE_CALL_STATUS.FAILED, VOICE_CALL_STATUS.REJECTED].includes(call.status)
+  ) {
+    return CALL_KIND.FAILED;
+  }
+  const isInbound = call.direction === VOICE_CALL_DIRECTION.INBOUND;
+  if (call.status === VOICE_CALL_STATUS.NO_ANSWER) {
+    return isInbound ? CALL_KIND.MISSED : CALL_KIND.NO_REPLY;
+  }
+  return isInbound ? CALL_KIND.INCOMING : CALL_KIND.OUTGOING;
+};
+
+// Filter chips map to the status/direction params supported by CallFinder.
+export const CALL_ACTIVITY_PARAMS = {
+  missed: {
+    status: VOICE_CALL_STATUS.NO_ANSWER,
+    direction: VOICE_CALL_DIRECTION.INBOUND,
+  },
+  no_reply: {
+    status: VOICE_CALL_STATUS.NO_ANSWER,
+    direction: VOICE_CALL_DIRECTION.OUTBOUND,
+  },
+  incoming: { direction: VOICE_CALL_DIRECTION.INBOUND },
+  outgoing: { direction: VOICE_CALL_DIRECTION.OUTBOUND },
+  in_progress: { status: VOICE_CALL_STATUS.IN_PROGRESS },
+};

app/javascript/dashboard/components-next/audio/AudioPlayer.vue

@@ -0,0 +1,158 @@
+<script setup>
+import { computed, getCurrentInstance, ref, useTemplateRef } from 'vue';
+import { downloadFile } from '@chatwoot/utils';
+import { useEmitter } from 'dashboard/composables/emitter';
+import { emitter } from 'shared/helpers/mitt';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+  fallbackDuration: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const PLAYBACK_SPEEDS = [1, 1.5, 2];
+
+const audioPlayer = useTemplateRef('audioPlayer');
+const { uid } = getCurrentInstance();
+
+const isPlaying = ref(false);
+const currentTime = ref(0);
+const duration = ref(props.fallbackDuration);
+const playbackSpeed = ref(1);
+
+const onLoadedMetadata = () => {
+  const loadedDuration = audioPlayer.value?.duration;
+  if (Number.isFinite(loadedDuration)) duration.value = loadedDuration;
+};
+
+const formatTime = time => {
+  if (!time || Number.isNaN(time)) return '00:00';
+  const minutes = Math.floor(time / 60);
+  const seconds = Math.floor(time % 60);
+  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+};
+
+const playbackSpeedLabel = computed(() => `${playbackSpeed.value}x`);
+
+const displayedTime = computed(() =>
+  formatTime(
+    isPlaying.value || currentTime.value ? currentTime.value : duration.value
+  )
+);
+
+// Only one recording should play at a time across the list.
+useEmitter('pause_playing_audio', currentPlayingId => {
+  if (currentPlayingId !== uid && isPlaying.value) {
+    audioPlayer.value?.pause();
+    isPlaying.value = false;
+  }
+});
+
+const playOrPause = () => {
+  if (isPlaying.value) {
+    audioPlayer.value.pause();
+    isPlaying.value = false;
+  } else {
+    emitter.emit('pause_playing_audio', uid);
+    audioPlayer.value.play();
+    isPlaying.value = true;
+  }
+};
+
+const onTimeUpdate = () => {
+  currentTime.value = audioPlayer.value?.currentTime;
+};
+
+const seek = event => {
+  const time = Number(event.target.value);
+  audioPlayer.value.currentTime = time;
+  currentTime.value = time;
+};
+
+const onEnd = () => {
+  isPlaying.value = false;
+  currentTime.value = 0;
+};
+
+const changePlaybackSpeed = () => {
+  const currentIndex = PLAYBACK_SPEEDS.indexOf(playbackSpeed.value);
+  playbackSpeed.value =
+    PLAYBACK_SPEEDS[(currentIndex + 1) % PLAYBACK_SPEEDS.length];
+  audioPlayer.value.playbackRate = playbackSpeed.value;
+};
+
+const downloadRecording = () => {
+  downloadFile({ url: props.src, type: 'audio' });
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-center h-8 gap-2 px-2 rounded-full bg-n-alpha-1 dark:bg-n-alpha-2 overflow-hidden"
+    @click.stop
+  >
+    <audio
+      ref="audioPlayer"
+      class="hidden"
+      playsinline
+      @loadedmetadata="onLoadedMetadata"
+      @timeupdate="onTimeUpdate"
+      @ended="onEnd"
+    >
+      <source :src="src" />
+    </audio>
+    <Button
+      variant="ghost"
+      color="slate"
+      size="xs"
+      class="!w-6 !p-0 text-n-slate-12"
+      @click="playOrPause"
+    >
+      <template #icon>
+        <Icon
+          :icon="isPlaying ? 'i-lucide-pause' : 'i-lucide-play'"
+          class="size-4 flex-shrink-0"
+        />
+      </template>
+    </Button>
+    <input
+      type="range"
+      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"
+      @input="seek"
+    />
+    <span class="text-sm tabular-nums text-n-slate-11 shrink-0">
+      {{ displayedTime }}
+    </span>
+    <div class="w-px h-3.5 bg-n-slate-6 shrink-0" />
+    <Button
+      variant="ghost"
+      color="slate"
+      size="xs"
+      :label="playbackSpeedLabel"
+      class="!px-1 min-w-6 !text-n-slate-11"
+      @click="changePlaybackSpeed"
+    />
+    <div class="w-px h-3.5 bg-n-slate-6 shrink-0" />
+    <Button
+      variant="ghost"
+      color="slate"
+      size="xs"
+      class="!w-6 !p-0 text-n-slate-11"
+      @click="downloadRecording"
+    >
+      <template #icon>
+        <Icon icon="i-lucide-download" class="size-4 flex-shrink-0" />
+      </template>
+    </Button>
+  </div>
+</template>

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -2,6 +2,7 @@
 import { h, ref, computed, onMounted, watch } from 'vue';
 import { provideSidebarContext, useSidebarResize } from './provider';
 import { useAccount } from 'dashboard/composables/useAccount';
+import { useConfig } from 'dashboard/composables/useConfig';
 import { useKbd } from 'dashboard/composables/utils/useKbd';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useStore } from 'vuex';
@@ -43,7 +44,14 @@ const emit = defineEmits([
 ]);
 
 const { accountScopedRoute, isOnChatwootCloud } = useAccount();
+const { isEnterprise } = useConfig();
 const store = useStore();
+
+// Calls run on the enterprise-only API (cloud runs enterprise); hide the entry
+// on community so it doesn't lead to a dashboard/CTA the backend can't serve.
+const isCallsAvailable = computed(
+  () => isOnChatwootCloud.value || isEnterprise
+);
 const searchShortcut = useKbd([`$mod`, 'k']);
 const { t } = useI18n();
 
@@ -563,6 +571,17 @@ const menuItems = computed(() => {
         },
       ],
     },
+    ...(isCallsAvailable.value
+      ? [
+          {
+            name: 'Calls',
+            label: t('SIDEBAR.CALLS'),
+            icon: 'i-lucide-phone',
+            to: accountScopedRoute('calls_dashboard_index'),
+            activeOn: ['calls_dashboard_index'],
+          },
+        ]
+      : []),
     {
       name: 'Contacts',
       label: t('SIDEBAR.CONTACTS'),

app/javascript/dashboard/i18n/locale/en/calls.json

@@ -0,0 +1,45 @@
+{
+  "CALLS_PAGE": {
+    "HEADER": "Calls",
+    "ALL_CALLS": "All Calls",
+    "ALL_CALLS_COUNT": "All Calls ({count})",
+    "EMPTY_STATE": "No calls found",
+    "SETUP": {
+      "TITLE": "Make and receive calls in one place",
+      "SUBTITLE": "Set up a voice channel to start handling calls with your team. Every call, along with its recording, will appear here.",
+      "ACTION": "Set up voice channel"
+    },
+    "FILTERS": {
+      "MISSED": "Missed",
+      "NO_REPLY": "No reply",
+      "OTHER_ACTIVITY": "Other activity",
+      "INCOMING": "Incoming",
+      "OUTGOING": "Outgoing",
+      "IN_PROGRESS": "In progress",
+      "ASSIGNEE": "Assignee",
+      "ALL_ASSIGNEES": "All assignees",
+      "MORE_FILTERS": "More filters",
+      "INBOX": "Inbox",
+      "ALL_INBOXES": "All inboxes"
+    },
+    "STATUS": {
+      "ONGOING": "Ongoing",
+      "INCOMING": "Incoming",
+      "OUTGOING": "Outgoing",
+      "MISSED": "Missed",
+      "NO_REPLY": "No reply",
+      "FAILED": "Failed"
+    },
+    "ROW": {
+      "PICKED_BY": "Picked by",
+      "DIALED_BY": "Dialed by",
+      "ANSWERED": "Answered",
+      "RINGING": "Ringing",
+      "IN_PROGRESS": "In progress",
+      "NO_AGENT": "No agent answered this call",
+      "NO_CONTACT_ANSWER": "Contact did not answer",
+      "FAILED": "This call could not be connected",
+      "YESTERDAY": "Yesterday"
+    }
+  }
+}

app/javascript/dashboard/i18n/locale/en/index.js

@@ -5,6 +5,7 @@ import attributesMgmt from './attributesMgmt.json';
 import auditLogs from './auditLogs.json';
 import automation from './automation.json';
 import bulkActions from './bulkActions.json';
+import calls from './calls.json';
 import campaign from './campaign.json';
 import cannedMgmt from './cannedMgmt.json';
 import chatlist from './chatlist.json';
@@ -51,6 +52,7 @@ export default {
   ...auditLogs,
   ...automation,
   ...bulkActions,
+  ...calls,
   ...campaign,
   ...cannedMgmt,
   ...chatlist,

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -324,6 +324,7 @@
     "COMPANIES": "Companies",
     "ALL_COMPANIES": "All Companies",
     "CAPTAIN": "Captain",
+    "CALLS": "Calls",
     "CAPTAIN_ASSISTANTS": "Assistants",
     "CAPTAIN_OVERVIEW": "Overview",
     "CAPTAIN_DOCUMENTS": "Documents",

app/javascript/dashboard/routes/dashboard/calls/pages/CallsIndex.vue

@@ -0,0 +1,168 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { useCallHistoryStore } from 'dashboard/stores/callHistory';
+
+import CallListItem from 'dashboard/components-next/Calls/CallListItem.vue';
+import CallsEmptyState from 'dashboard/components-next/Calls/CallsEmptyState.vue';
+import CallsFilterBar from 'dashboard/components-next/Calls/CallsFilterBar.vue';
+import { CALL_ACTIVITY_PARAMS } from 'dashboard/components-next/Calls/constants';
+import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+const RESULTS_PER_PAGE = 25;
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+const callHistoryStore = useCallHistoryStore();
+
+const inboxes = useMapGetter('inboxes/getInboxes');
+const accountId = useMapGetter('getCurrentAccountId');
+const currentUserId = useMapGetter('getCurrentUserID');
+const agents = useMapGetter('agents/getVerifiedAgents');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+
+// CallFinder scopes non-admins to their own accepted calls, so the assignee
+// filter is only meaningful for admins; everyone else defaults to themselves.
+const { isAdmin } = useAdmin();
+
+const voiceInboxes = computed(() => inboxes.value.filter(isVoiceCallEnabled));
+
+const isVoiceEnabled = computed(
+  () =>
+    isFeatureEnabledonAccount.value(
+      accountId.value,
+      FEATURE_FLAGS.CHANNEL_VOICE
+    ) && voiceInboxes.value.length > 0
+);
+
+const calls = computed(() => callHistoryStore.records);
+const meta = computed(() => callHistoryStore.meta);
+const isFetching = computed(() => callHistoryStore.uiFlags.isFetching);
+const inboxesUiFlags = useMapGetter('inboxes/getUIFlags');
+
+// Filters are seeded from the URL so a shared link restores the same view.
+const activity = ref(
+  CALL_ACTIVITY_PARAMS[route.query.activity] ? route.query.activity : null
+);
+
+const assigneeId = ref(
+  isAdmin.value ? Number(route.query.assignee_id) || null : currentUserId.value
+);
+const inboxId = ref(Number(route.query.inbox_id) || null);
+const currentPage = ref(Number(route.query.page) || 1);
+
+const syncFiltersToUrl = () => {
+  router.replace({
+    query: {
+      ...(activity.value && { activity: activity.value }),
+      ...(isAdmin.value &&
+        assigneeId.value && { assignee_id: assigneeId.value }),
+      ...(inboxId.value && { inbox_id: inboxId.value }),
+      ...(currentPage.value > 1 && { page: currentPage.value }),
+    },
+  });
+};
+
+const fetchCalls = async () => {
+  syncFiltersToUrl();
+  try {
+    await callHistoryStore.fetchCalls({
+      page: currentPage.value,
+      ...(CALL_ACTIVITY_PARAMS[activity.value] || {}),
+      ...(assigneeId.value ? { agent_id: assigneeId.value } : {}),
+      ...(inboxId.value ? { inbox_id: inboxId.value } : {}),
+    });
+  } catch (error) {
+    useAlert(error.message);
+  }
+};
+
+watch([activity, assigneeId, inboxId], () => {
+  currentPage.value = 1;
+  fetchCalls();
+});
+
+const onPageChange = page => {
+  currentPage.value = page;
+  fetchCalls();
+};
+
+// inboxes/get flips isFetching true synchronously, so the spinner shows on the
+// first render and the setup CTA never flashes; hit the calls endpoint only
+// once inboxes confirm voice is on.
+store.dispatch('inboxes/get').then(() => {
+  if (!isVoiceEnabled.value) return;
+  // Only admins see the assignee filter, so only they need the agent list.
+  if (isAdmin.value) store.dispatch('agents/get');
+  fetchCalls();
+});
+</script>
+
+<template>
+  <div
+    v-if="inboxesUiFlags.isFetching"
+    class="flex items-center justify-center w-full h-full bg-n-surface-1"
+  >
+    <Spinner :size="24" />
+  </div>
+  <CallsEmptyState v-else-if="!isVoiceEnabled" />
+  <section
+    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">
+        <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>
+    </header>
+    <main class="flex-1 px-6 overflow-y-auto">
+      <div class="w-full">
+        <div v-if="isFetching" class="flex items-center justify-center py-16">
+          <Spinner :size="24" />
+        </div>
+        <div
+          v-else-if="!calls.length"
+          class="flex items-center justify-center py-16"
+        >
+          <span class="text-base text-n-slate-11">
+            {{ t('CALLS_PAGE.EMPTY_STATE') }}
+          </span>
+        </div>
+        <template v-else>
+          <CallListItem v-for="call in calls" :key="call.id" :call="call" />
+        </template>
+      </div>
+    </main>
+    <footer v-if="calls.length" class="sticky bottom-0 shrink-0">
+      <PaginationFooter
+        :current-page="currentPage"
+        :total-items="meta.count"
+        :items-per-page="RESULTS_PER_PAGE"
+        @update:current-page="onPageChange"
+      />
+    </footer>
+  </section>
+</template>

app/javascript/dashboard/routes/dashboard/calls/routes.js

@@ -0,0 +1,22 @@
+import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
+import {
+  CONVERSATION_PERMISSIONS,
+  ROLES,
+} from 'dashboard/constants/permissions';
+import { frontendURL } from '../../../helper/URLHelper';
+import CallsIndex from './pages/CallsIndex.vue';
+
+export const routes = [
+  {
+    path: frontendURL('accounts/:accountId/calls'),
+    name: 'calls_dashboard_index',
+    component: CallsIndex,
+    meta: {
+      permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
+      installationTypes: [
+        INSTALLATION_TYPES.CLOUD,
+        INSTALLATION_TYPES.ENTERPRISE,
+      ],
+    },
+  },
+];

app/javascript/dashboard/routes/dashboard/dashboard.routes.js

@@ -1,6 +1,7 @@
 import settings from './settings/settings.routes';
 import conversation from './conversation/conversation.routes';
 import { routes as searchRoutes } from '../../modules/search/search.routes';
+import { routes as callRoutes } from './calls/routes';
 import { routes as contactRoutes } from './contacts/routes';
 import { routes as companyRoutes } from './companies/routes';
 import { routes as notificationRoutes } from './notifications/routes';
@@ -25,6 +26,7 @@ export default {
         ...inboxRoutes,
         ...conversation.routes,
         ...settings.routes,
+        ...callRoutes,
         ...contactRoutes,
         ...companyRoutes,
         ...searchRoutes,

app/javascript/dashboard/stores/callHistory.js

@@ -0,0 +1,40 @@
+import camelcaseKeys from 'camelcase-keys';
+import CallsAPI from 'dashboard/api/calls';
+import { throwErrorMessage } from 'dashboard/store/utils/api';
+import { defineStore } from 'pinia';
+
+export const useCallHistoryStore = defineStore('callHistory', {
+  state: () => ({
+    records: [],
+    meta: { count: 0, currentPage: 1, totalPages: 0 },
+    uiFlags: { isFetching: false },
+    fetchRequestToken: 0,
+  }),
+
+  actions: {
+    async fetchCalls(params = {}) {
+      this.uiFlags.isFetching = true;
+      this.fetchRequestToken += 1;
+      const requestToken = this.fetchRequestToken;
+      try {
+        const { data } = await CallsAPI.get(params);
+        // A newer fetch (filter/page change) superseded this one; drop the result.
+        if (this.fetchRequestToken !== requestToken) return this.records;
+        this.records = camelcaseKeys(data.payload, { deep: true });
+        this.meta = camelcaseKeys(data.meta);
+        return this.records;
+      } catch (error) {
+        // Don't surface errors from a fetch that a newer request already replaced.
+        if (this.fetchRequestToken !== requestToken) return this.records;
+        // Drop the previous results so stale rows aren't shown under the new view.
+        this.records = [];
+        this.meta = { count: 0, currentPage: 1, totalPages: 0 };
+        return throwErrorMessage(error);
+      } finally {
+        if (this.fetchRequestToken === requestToken) {
+          this.uiFlags.isFetching = false;
+        }
+      }
+    },
+  },
+});

app/javascript/dashboard/stores/specs/callHistory.spec.js

@@ -0,0 +1,117 @@
+import { setActivePinia, createPinia } from 'pinia';
+import CallsAPI from 'dashboard/api/calls';
+import { throwErrorMessage } from 'dashboard/store/utils/api';
+import { useCallHistoryStore } from '../callHistory';
+
+vi.mock('dashboard/api/calls', () => ({
+  default: {
+    get: vi.fn(),
+  },
+}));
+
+vi.mock('dashboard/store/utils/api', () => ({
+  throwErrorMessage: vi.fn(error => error),
+}));
+
+const createDeferred = () => {
+  let resolve;
+  const promise = new Promise(res => {
+    resolve = res;
+  });
+
+  return { promise, resolve };
+};
+
+const buildResponse = (payload, meta) => ({ data: { payload, meta } });
+
+describe('callHistory store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    vi.clearAllMocks();
+  });
+
+  it('fetches calls and stores camelized records and meta', async () => {
+    CallsAPI.get.mockResolvedValue(
+      buildResponse(
+        [{ id: 1, recording_url: 'rec.mp3', contact: { phone_number: '+1' } }],
+        { count: 44, current_page: 1, total_pages: 2 }
+      )
+    );
+    const store = useCallHistoryStore();
+
+    await store.fetchCalls({ page: 1, status: 'no-answer' });
+
+    expect(CallsAPI.get).toHaveBeenCalledWith({ page: 1, status: 'no-answer' });
+    expect(store.records).toEqual([
+      { id: 1, recordingUrl: 'rec.mp3', contact: { phoneNumber: '+1' } },
+    ]);
+    expect(store.meta).toEqual({ count: 44, currentPage: 1, totalPages: 2 });
+    expect(store.uiFlags.isFetching).toBe(false);
+  });
+
+  it('drops a superseded response that resolves after the latest one', async () => {
+    const firstRequest = createDeferred();
+    const secondRequest = createDeferred();
+    CallsAPI.get
+      .mockImplementationOnce(() => firstRequest.promise)
+      .mockImplementationOnce(() => secondRequest.promise);
+    const store = useCallHistoryStore();
+
+    const staleFetch = store.fetchCalls({ page: 1 });
+    const currentFetch = store.fetchCalls({ page: 2 });
+
+    secondRequest.resolve(
+      buildResponse([{ id: 2 }], { count: 1, current_page: 2, total_pages: 2 })
+    );
+    await currentFetch;
+
+    firstRequest.resolve(
+      buildResponse([{ id: 1 }], { count: 99, current_page: 1, total_pages: 9 })
+    );
+    await staleFetch;
+
+    expect(store.records).toEqual([{ id: 2 }]);
+    expect(store.meta.count).toBe(1);
+    expect(store.uiFlags.isFetching).toBe(false);
+  });
+
+  it('keeps fetching state when a superseded response resolves first', async () => {
+    const firstRequest = createDeferred();
+    const secondRequest = createDeferred();
+    CallsAPI.get
+      .mockImplementationOnce(() => firstRequest.promise)
+      .mockImplementationOnce(() => secondRequest.promise);
+    const store = useCallHistoryStore();
+
+    const staleFetch = store.fetchCalls({ page: 1 });
+    const currentFetch = store.fetchCalls({ page: 2 });
+
+    firstRequest.resolve(
+      buildResponse([{ id: 1 }], { count: 99, current_page: 1, total_pages: 9 })
+    );
+    await staleFetch;
+
+    expect(store.records).toEqual([]);
+    expect(store.uiFlags.isFetching).toBe(true);
+
+    secondRequest.resolve(
+      buildResponse([{ id: 2 }], { count: 1, current_page: 2, total_pages: 2 })
+    );
+    await currentFetch;
+
+    expect(store.records).toEqual([{ id: 2 }]);
+    expect(store.uiFlags.isFetching).toBe(false);
+  });
+
+  it('surfaces the error and resets fetching state on failure', async () => {
+    const error = new Error('Request failed');
+    CallsAPI.get.mockRejectedValue(error);
+    const store = useCallHistoryStore();
+
+    await store.fetchCalls();
+
+    expect(throwErrorMessage).toHaveBeenCalledWith(error);
+    expect(store.records).toEqual([]);
+    expect(store.uiFlags.isFetching).toBe(false);
+  });
+});

app/javascript/dashboard/stores/specs/companies.spec.js

@@ -1,6 +1,6 @@
 import { setActivePinia, createPinia } from 'pinia';
 import CompanyAPI from 'dashboard/api/companies';
-import { useCompaniesStore } from './companies';
+import { useCompaniesStore } from '../companies';
 
 vi.mock('dashboard/api/companies', () => ({
   default: {

app/javascript/shared/helpers/specs/timeHelper.spec.js

@@ -1,11 +1,12 @@
 import {
-  messageStamp,
-  messageTimestamp,
-  dynamicTime,
   dateFormat,
-  shortTimestamp,
+  dynamicTime,
   getDayDifferenceFromNow,
   hasOneDayPassed,
+  messageStamp,
+  messageTimestamp,
+  relativeDayTimestamp,
+  shortTimestamp,
 } from 'shared/helpers/timeHelper';
 
 beforeEach(() => {
@@ -37,6 +38,33 @@ describe('#messageTimestamp', () => {
   });
 });
 
+describe('#relativeDayTimestamp', () => {
+  // System time is mocked to May 5, 2023 00:00 UTC.
+  const toUnix = date => Math.floor(date / 1000);
+
+  it('returns the time for timestamps from today', () => {
+    const today = toUnix(Date.UTC(2023, 4, 5, 15, 35, 0));
+    expect(relativeDayTimestamp(today, 'Yesterday')).toEqual('3:35 PM');
+  });
+
+  it('returns the supplied label for timestamps from yesterday', () => {
+    const yesterday = toUnix(Date.UTC(2023, 4, 4, 9, 0, 0));
+    expect(relativeDayTimestamp(yesterday, 'Yesterday')).toEqual('Yesterday');
+  });
+
+  it('returns a day and month for older timestamps in the current year', () => {
+    const earlierThisYear = toUnix(Date.UTC(2023, 1, 10, 12, 0, 0));
+    expect(relativeDayTimestamp(earlierThisYear, 'Yesterday')).toEqual(
+      'Feb 10'
+    );
+  });
+
+  it('returns a full date for timestamps from a previous year', () => {
+    const lastYear = toUnix(Date.UTC(2021, 1, 10, 12, 0, 0));
+    expect(relativeDayTimestamp(lastYear, 'Yesterday')).toEqual('Feb 10, 2021');
+  });
+});
+
 describe('#dynamicTime', () => {
   it('returns correct value', () => {
     Date.now = vi.fn(() => new Date(Date.UTC(2023, 1, 14)).valueOf());

app/javascript/shared/helpers/timeHelper.js

@@ -1,6 +1,9 @@
 import {
   format,
   isSameYear,
+  isThisYear,
+  isToday,
+  isYesterday,
   fromUnixTime,
   formatDistanceToNow,
   differenceInDays,
@@ -33,6 +36,22 @@ export const messageTimestamp = (time, dateFormat = 'MMM d, yyyy') => {
   return messageDate;
 };
 
+/**
+ * Formats a Unix timestamp relative to today: the time for today, a caller-
+ * supplied label for yesterday, and a date otherwise. The yesterday label is
+ * passed in so the caller keeps ownership of translation.
+ * @param {number} time - Unix timestamp.
+ * @param {string} yesterdayLabel - Localized label shown for yesterday.
+ * @returns {string} Formatted timestamp string.
+ */
+export const relativeDayTimestamp = (time, yesterdayLabel) => {
+  const date = fromUnixTime(time);
+  if (isToday(date)) return format(date, 'h:mm a');
+  if (isYesterday(date)) return yesterdayLabel;
+  if (isThisYear(date)) return format(date, 'MMM d');
+  return format(date, 'MMM d, yyyy');
+};
+
 /**
  * Converts a Unix timestamp to a relative time string (e.g., 3 hours ago).
  * @param {number} time - Unix timestamp.

app/models/concerns/account_email_rate_limitable.rb

@@ -20,7 +20,7 @@ module AccountEmailRateLimitable
     return true unless ChatwootApp.chatwoot_cloud?
     return true if emails_sent_today < email_rate_limit
 
-    Rails.logger.warn("Account #{id} reached daily email rate limit of #{email_rate_limit}. Sent: #{emails_sent_today}")
+    log_email_limit_reached
     false
   end
 
@@ -30,8 +30,39 @@ module AccountEmailRateLimitable
     end
   end
 
+  def reserve_email_send_capacity(count = 1)
+    return true unless ChatwootApp.chatwoot_cloud?
+
+    loop do
+      reservation = attempt_email_capacity_reservation(count)
+      if reservation == :limit_exceeded
+        log_email_limit_reached
+        return false
+      end
+      return true if reservation.present?
+    end
+  end
+
   private
 
+  def attempt_email_capacity_reservation(count)
+    Redis::Alfred.with do |redis|
+      redis.watch(email_count_cache_key) do
+        current_count = redis.get(email_count_cache_key).to_i
+        next :limit_exceeded if current_count + count > email_rate_limit
+
+        redis.multi do |transaction|
+          transaction.incrby(email_count_cache_key, count)
+          transaction.expire(email_count_cache_key, OUTBOUND_EMAIL_TTL) if current_count.zero?
+        end
+      end
+    end
+  end
+
+  def log_email_limit_reached
+    Rails.logger.warn("Account #{id} reached daily email rate limit of #{email_rate_limit}. Sent: #{emails_sent_today}")
+  end
+
   def email_count_cache_key
     @email_count_cache_key ||= format(
       Redis::Alfred::ACCOUNT_OUTBOUND_EMAIL_COUNT_KEY,

config/locales/en.yml

@@ -76,6 +76,7 @@ en:
   errors:
     account:
       not_authorized: You are not authorized to access this account
+      email_limit_exceeded: The daily email limit for this account has been reached
       reporting_timezone:
         invalid: is not a valid timezone
       support_email:

lib/custom_exceptions/account.rb

@@ -42,4 +42,18 @@ module CustomExceptions::Account
       I18n.t 'errors.plan_upgrade_required.failed'
     end
   end
+
+  class EmailLimitExceeded < CustomExceptions::Base
+    def message
+      I18n.t('errors.account.email_limit_exceeded')
+    end
+
+    def to_hash
+      { error: message }
+    end
+
+    def http_status
+      :too_many_requests
+    end
+  end
 end

spec/builders/agent_builder_spec.rb

@@ -24,6 +24,8 @@ RSpec.describe AgentBuilder, type: :model do
 
   describe '#perform' do
     context 'when user does not exist' do
+      before { clear_enqueued_jobs }
+
       it 'creates a new user' do
         expect { agent_builder.perform }.to change(User, :count).by(1)
       end
@@ -35,6 +37,28 @@ RSpec.describe AgentBuilder, type: :model do
       it 'returns a user' do
         expect(agent_builder.perform).to be_a(User)
       end
+
+      it 'reserves email capacity and enqueues the invitation' do
+        allow(ChatwootApp).to receive(:chatwoot_cloud?).and_return(true)
+
+        expect { agent_builder.perform }.to have_enqueued_mail(Devise::Mailer, :confirmation_instructions)
+        expect(account.emails_sent_today).to eq(1)
+      end
+
+      context 'when the account email limit is exhausted' do
+        before do
+          allow(ChatwootApp).to receive(:chatwoot_cloud?).and_return(true)
+          account.update!(limits: { 'emails' => 0 })
+        end
+
+        it 'does not create the user or enqueue an invitation' do
+          expect { agent_builder.perform }.to raise_error(CustomExceptions::Account::EmailLimitExceeded)
+          expect(User.from_email(email)).to be_nil
+          expect(AccountUser.find_by(account: account, user: User.from_email(email))).to be_nil
+          mail_jobs = enqueued_jobs.select { |job| job[:job].to_s == 'ActionMailer::MailDeliveryJob' }
+          expect(mail_jobs).to be_empty
+        end
+      end
     end
 
     context 'when user exists' do
@@ -49,6 +73,13 @@ RSpec.describe AgentBuilder, type: :model do
       it 'creates a new account user' do
         expect { agent_builder.perform }.to change(AccountUser, :count).by(1)
       end
+
+      it 'does not consume email capacity or enqueue another invitation' do
+        clear_enqueued_jobs
+
+        expect { agent_builder.perform }.not_to have_enqueued_mail(Devise::Mailer, :confirmation_instructions)
+        expect(account.emails_sent_today).to eq(0)
+      end
     end
 
     context 'when only email is provided' do

spec/controllers/api/v1/accounts/agents_controller_spec.rb

@@ -177,6 +177,22 @@ RSpec.describe 'Agents API', type: :request do
         expect(response.parsed_body['email']).to eq(params[:email])
         expect(account.users.last.name).to eq('NewUser')
       end
+
+      context 'when the account email limit is exhausted' do
+        before do
+          allow(ChatwootApp).to receive(:chatwoot_cloud?).and_return(true)
+          account.update!(limits: { 'emails' => 0 })
+        end
+
+        it 'does not create an agent' do
+          expect do
+            post "/api/v1/accounts/#{account.id}/agents", params: params, headers: admin.create_new_auth_token, as: :json
+          end.not_to change(User, :count)
+
+          expect(response).to have_http_status(:too_many_requests)
+          expect(response.parsed_body['error']).to eq('The daily email limit for this account has been reached')
+        end
+      end
     end
   end
 
@@ -211,6 +227,22 @@ RSpec.describe 'Agents API', type: :request do
 
         expect(response).to have_http_status(:ok)
       end
+
+      context 'when the account email limit is exhausted' do
+        before do
+          allow(ChatwootApp).to receive(:chatwoot_cloud?).and_return(true)
+          account.update!(limits: { 'emails' => 0 })
+        end
+
+        it 'does not create agents' do
+          expect do
+            post "/api/v1/accounts/#{account.id}/agents/bulk_create", params: bulk_create_params, headers: admin.create_new_auth_token
+          end.not_to change(User, :count)
+
+          expect(response).to have_http_status(:too_many_requests)
+          expect(response.parsed_body['error']).to eq('The daily email limit for this account has been reached')
+        end
+      end
     end
   end
 end

spec/models/concerns/account_email_rate_limitable_spec.rb

@@ -83,4 +83,38 @@ RSpec.describe AccountEmailRateLimitable do
       expect(Redis::Alfred).not_to have_received(:expire)
     end
   end
+
+  describe '#reserve_email_send_capacity' do
+    context 'when chatwoot cloud' do
+      before do
+        allow(ChatwootApp).to receive(:chatwoot_cloud?).and_return(true)
+        account.update!(limits: { 'emails' => 2 })
+      end
+
+      it 'atomically reserves capacity without exceeding the limit' do
+        expect(account.reserve_email_send_capacity).to be true
+        expect(account.reserve_email_send_capacity).to be true
+        expect(account.reserve_email_send_capacity).to be false
+        expect(account.emails_sent_today).to eq(2)
+      end
+
+      it 'does not partially reserve a batch that exceeds the remaining capacity' do
+        expect(account.reserve_email_send_capacity(2)).to be true
+        expect(account.reserve_email_send_capacity(2)).to be false
+        expect(account.emails_sent_today).to eq(2)
+      end
+    end
+
+    context 'when self-hosted' do
+      before do
+        allow(ChatwootApp).to receive(:chatwoot_cloud?).and_return(false)
+        account.update!(limits: { 'emails' => 1 })
+      end
+
+      it 'does not reserve or track email capacity' do
+        expect(account.reserve_email_send_capacity(2)).to be true
+        expect(account.emails_sent_today).to eq(0)
+      end
+    end
+  end
 end