feat: allow selecting month range in overview reports (#12701)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: iamsivin <iamsivin@gmail.com>
2025-11-12 18:34:00 +05:30
parent fb0be60ae2
commit 28e16f7ee0
5 changed files with 484 additions and 108 deletions
@@ -119,7 +119,7 @@ const tooltip = useHeatmapTooltip();
 <!-- eslint-disable vue/no-static-inline-styles -->
 <template>
  <div
-    class="grid relative w-full gap-x-4 gap-y-2.5 overflow-y-scroll md:overflow-visible grid-cols-[80px_1fr] min-h-72"
+    class="grid relative w-full gap-x-4 gap-y-2.5 overflow-y-scroll md:overflow-visible grid-cols-[80px_1fr]"
  >
    <template v-if="isLoading">
      <div class="grid gap-[5px] flex-shrink-0">
@@ -1,15 +1,18 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, ref, computed, watch } from 'vue';
 import { useToggle } from '@vueuse/core';
 import MetricCard from '../overview/MetricCard.vue';
 import BaseHeatmap from './BaseHeatmap.vue';
+import HeatmapDateRangeSelector from './HeatmapDateRangeSelector.vue';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useLiveRefresh } from 'dashboard/composables/useLiveRefresh';
+import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
 import endOfDay from 'date-fns/endOfDay';
+import format from 'date-fns/format';
 import getUnixTime from 'date-fns/getUnixTime';
 import startOfDay from 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
 import subDays from 'date-fns/subDays';
-import format from 'date-fns/format';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import { useI18n } from 'vue-i18n';
@@ -57,27 +60,33 @@ const uiFlags = useMapGetter('getOverviewUIFlags');
 const heatmapData = useMapGetter(props.storeGetter);
 const inboxes = useMapGetter('inboxes/getInboxes');

-const menuItems = [
-  {
-    label: t('REPORT.DATE_RANGE_OPTIONS.LAST_7_DAYS'),
-    value: 6,
-  },
-  {
-    label: t('REPORT.DATE_RANGE_OPTIONS.LAST_14_DAYS'),
-    value: 13,
-  },
-  {
-    label: t('REPORT.DATE_RANGE_OPTIONS.LAST_30_DAYS'),
-    value: 29,
-  },
-];
-
-const selectedDays = ref(6);
+const selectedFrom = ref(null);
+const selectedTo = ref(null);
+const selectedDaysBefore = ref(null);
 const selectedInbox = ref(null);
+const isMonthFilter = ref(false);
+const currentMonthOffset = ref(0);

-const selectedDayFilter = computed(() =>
-  menuItems.find(menuItem => menuItem.value === selectedDays.value)
-);
+const selectedRange = computed(() => {
+  if (!selectedFrom.value || !selectedTo.value) {
+    return null;
+  }
+  return {
+    from: selectedFrom.value,
+    to: selectedTo.value,
+  };
+});
+
+const numberOfRows = computed(() => {
+  if (!selectedRange.value) {
+    return 0;
+  }
+  const dateDifference = differenceInCalendarDays(
+    selectedRange.value.to,
+    selectedRange.value.from
+  );
+  return dateDifference + 1;
+});

 const inboxMenuItems = computed(() => {
  return [
@@ -105,13 +114,42 @@ const selectedInboxFilter = computed(() => {

 const isLoading = computed(() => uiFlags.value[props.uiFlagKey]);

+// Keeps relative presets (last 7 days / this month) aligned with "now" during live refreshes.
+const resolveActiveRange = () => {
+  if (isMonthFilter.value && currentMonthOffset.value === 0) {
+    const now = new Date();
+    const monthStart = startOfMonth(now);
+    return {
+      from: startOfDay(monthStart),
+      to: endOfDay(now),
+    };
+  }
+
+  if (!isMonthFilter.value && selectedDaysBefore.value !== null) {
+    const to = endOfDay(new Date());
+    return {
+      from: startOfDay(subDays(to, Number(selectedDaysBefore.value))),
+      to,
+    };
+  }
+
+  return selectedRange.value;
+};
+
 const downloadHeatmapData = () => {
-  const to = endOfDay(new Date());
+  const range = resolveActiveRange();
+  if (!range) {
+    return;
+  }
+
+  const { to } = range;
+  const shouldUseBackendDownload =
+    !isMonthFilter.value && !selectedInbox.value && props.downloadAction;

  // If no inbox is selected and download action exists, use backend endpoint
-  if (!selectedInbox.value && props.downloadAction) {
+  if (shouldUseBackendDownload) {
    store.dispatch(props.downloadAction, {
-      daysBefore: selectedDays.value,
+      daysBefore: selectedDaysBefore.value,
      to: getUnixTime(to),
    });
    return;
@@ -150,7 +188,6 @@ const downloadHeatmapData = () => {
  downloadCsvFile(fileName, csvContent);
 };

-const [showDropdown, toggleDropdown] = useToggle();
 const [showInboxDropdown, toggleInboxDropdown] = useToggle();

 const fetchHeatmapData = () => {
@@ -158,8 +195,12 @@ const fetchHeatmapData = () => {
    return;
  }

-  let to = endOfDay(new Date());
-  let from = startOfDay(subDays(to, Number(selectedDays.value)));
+  const range = resolveActiveRange();
+  if (!range) {
+    return;
+  }
+
+  const { from, to } = range;

  const params = {
    metric: props.metric,
@@ -178,25 +219,43 @@ const fetchHeatmapData = () => {
  store.dispatch(props.storeAction, params);
 };

-const handleAction = ({ value }) => {
-  toggleDropdown(false);
-  selectedDays.value = value;
-  fetchHeatmapData();
-};
-
 const handleInboxAction = ({ value }) => {
  toggleInboxDropdown(false);
  selectedInbox.value = value
    ? inboxes.value.find(inbox => inbox.id === value)
    : null;
-  fetchHeatmapData();
 };

 const { startRefetching } = useLiveRefresh(fetchHeatmapData);

+const handleRangeTypeChange = type => {
+  isMonthFilter.value = type === 'month';
+};
+
+const handleMonthOffsetChange = offset => {
+  currentMonthOffset.value = offset;
+};
+
+watch(
+  () => [selectedFrom.value, selectedTo.value],
+  ([from, to]) => {
+    if (from && to) {
+      fetchHeatmapData();
+    }
+  }
+);
+
+watch(
+  () => selectedInbox.value,
+  () => {
+    if (selectedRange.value) {
+      fetchHeatmapData();
+    }
+  }
+);
+
 onMounted(() => {
  store.dispatch('inboxes/get');
-  fetchHeatmapData();
  startRefetching();
 });
 </script>
@@ -205,25 +264,13 @@ onMounted(() => {
  <div class="flex flex-row flex-wrap max-w-full">
    <MetricCard :header="title">
      <template #control>
-        <div
-          v-on-clickaway="() => toggleDropdown(false)"
-          class="relative flex items-center group"
-        >
-          <Button
-            sm
-            slate
-            faded
-            :label="selectedDayFilter.label"
-            class="rounded-md group-hover:bg-n-alpha-2"
-            @click="toggleDropdown()"
-          />
-          <DropdownMenu
-            v-if="showDropdown"
-            :menu-items="menuItems"
-            class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0 top-full"
-            @action="handleAction($event)"
-          />
-        </div>
+        <HeatmapDateRangeSelector
+          v-model:from="selectedFrom"
+          v-model:to="selectedTo"
+          v-model:days-num="selectedDaysBefore"
+          @range-type-change="handleRangeTypeChange"
+          @month-offset-change="handleMonthOffsetChange"
+        />
        <div
          v-on-clickaway="() => toggleInboxDropdown(false)"
          class="relative flex items-center group"
@@ -241,22 +288,23 @@ onMounted(() => {
            :menu-items="inboxMenuItems"
            show-search
            :search-placeholder="t('INBOX_REPORTS.SEARCH_INBOX')"
-            class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0 top-full min-w-[200px]"
+            class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0 top-full !min-w-56 max-w-56 max-h-96 overflow-y-auto"
            @action="handleInboxAction($event)"
          />
        </div>
        <Button
+          v-tooltip="t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.DOWNLOAD_REPORT')"
          sm
          slate
          faded
-          :label="t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.DOWNLOAD_REPORT')"
+          icon="i-lucide-download"
          class="rounded-md group-hover:bg-n-alpha-2"
          @click="downloadHeatmapData"
        />
      </template>
      <BaseHeatmap
        :heatmap-data="heatmapData"
-        :number-of-rows="selectedDays + 1"
+        :number-of-rows="numberOfRows"
        :is-loading="isLoading"
        :color-scheme="colorScheme"
      />
@@ -0,0 +1,211 @@
+<script setup>
+import { computed, ref, watch, defineModel } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import addMonths from 'date-fns/addMonths';
+import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
+import endOfDay from 'date-fns/endOfDay';
+import endOfMonth from 'date-fns/endOfMonth';
+import startOfDay from 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
+import subDays from 'date-fns/subDays';
+import { vOnClickOutside } from '@vueuse/components';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const emit = defineEmits(['rangeTypeChange', 'monthOffsetChange']);
+
+const fromModel = defineModel('from', { type: Date, default: null });
+const toModel = defineModel('to', { type: Date, default: null });
+const daysNumModel = defineModel('daysNum', { type: Number, default: null });
+
+const { t, locale } = useI18n();
+
+const DATE_FILTER_TYPES = {
+  DAY: 'day',
+  MONTH: 'month',
+};
+
+const DATE_FILTER_ACTION = 'select_date_range';
+
+const dayMenuItemConfigs = computed(() => [
+  {
+    label: t('REPORT.DATE_RANGE_OPTIONS.LAST_7_DAYS'),
+    value: 'last_7_days',
+    action: DATE_FILTER_ACTION,
+    type: DATE_FILTER_TYPES.DAY,
+    daysBefore: 6,
+  },
+  {
+    label: t('REPORT.DATE_RANGE_OPTIONS.LAST_14_DAYS'),
+    value: 'last_14_days',
+    action: DATE_FILTER_ACTION,
+    type: DATE_FILTER_TYPES.DAY,
+    daysBefore: 13,
+  },
+  {
+    label: t('REPORT.DATE_RANGE_OPTIONS.LAST_30_DAYS'),
+    value: 'last_30_days',
+    action: DATE_FILTER_ACTION,
+    type: DATE_FILTER_TYPES.DAY,
+    daysBefore: 29,
+  },
+]);
+
+const resolvedLocale = computed(
+  () =>
+    locale.value ||
+    (typeof navigator !== 'undefined' ? navigator.language : 'en')
+);
+
+const monthFormatter = computed(
+  () =>
+    new Intl.DateTimeFormat(resolvedLocale.value, {
+      month: 'long',
+      year: 'numeric',
+    })
+);
+
+const monthMenuItemConfigs = computed(() => {
+  const now = new Date();
+  const offsets = [0, -1, -2];
+
+  return offsets.map(offset => ({
+    label:
+      offset === 0
+        ? t('REPORT.DATE_RANGE_OPTIONS.THIS_MONTH')
+        : monthFormatter.value.format(addMonths(now, offset)),
+    value: offset === 0 ? 'this_month' : `month_${offset}`,
+    action: DATE_FILTER_ACTION,
+    type: DATE_FILTER_TYPES.MONTH,
+    monthOffset: offset,
+  }));
+});
+
+const selectedDateRangeValue = ref('');
+
+const [showDropdown, toggleDropdown] = useToggle();
+const monthOffset = ref(0);
+
+const menuItems = computed(() => {
+  const selectedValue = selectedDateRangeValue.value;
+  return [...dayMenuItemConfigs.value, ...monthMenuItemConfigs.value].map(
+    config => ({
+      ...config,
+      isSelected: selectedValue === config.value,
+    })
+  );
+});
+
+selectedDateRangeValue.value = menuItems.value[0]?.value || '';
+
+const menuSections = computed(() => {
+  const dayItems = menuItems.value.filter(
+    item => item.type === DATE_FILTER_TYPES.DAY
+  );
+  const monthItems = menuItems.value.filter(
+    item => item.type === DATE_FILTER_TYPES.MONTH
+  );
+
+  return [{ items: dayItems }, { items: monthItems }].filter(
+    section => section.items.length > 0
+  );
+});
+
+const selectedConfig = computed(
+  () =>
+    menuItems.value.find(
+      menuItem => menuItem.value === selectedDateRangeValue.value
+    ) || menuItems.value[0]
+);
+
+const selectedLabel = computed(() => {
+  const selectedItem = menuItems.value.find(
+    item => item.value === selectedDateRangeValue.value
+  );
+  return selectedItem?.label || '';
+});
+
+const computeRange = config => {
+  if (!config) {
+    return null;
+  }
+
+  if (config.type === DATE_FILTER_TYPES.MONTH) {
+    const now = new Date();
+    const baseMonthStart = startOfMonth(addMonths(now, monthOffset.value));
+    const from = startOfDay(baseMonthStart);
+    const isCurrentMonth =
+      config.value === 'this_month' && monthOffset.value === 0;
+    const to = isCurrentMonth
+      ? endOfDay(now)
+      : endOfDay(endOfMonth(baseMonthStart));
+    const daysBefore = differenceInCalendarDays(to, from);
+    return { from, to, daysBefore };
+  }
+
+  const to = endOfDay(new Date());
+  const from = startOfDay(subDays(to, Number(config.daysBefore)));
+  return { from, to, daysBefore: Number(config.daysBefore) };
+};
+
+const applySelection = config => {
+  if (!config) return;
+
+  if (config.type === DATE_FILTER_TYPES.MONTH) {
+    monthOffset.value = config.monthOffset || 0;
+  } else {
+    monthOffset.value = 0;
+  }
+
+  const range = computeRange(config);
+  if (!range) return;
+
+  const { from, to, daysBefore } = range;
+  fromModel.value = from;
+  toModel.value = to;
+  daysNumModel.value = daysBefore;
+
+  emit('rangeTypeChange', config.type);
+  emit('monthOffsetChange', monthOffset.value);
+};
+
+const handleAction = ({ action, value }) => {
+  toggleDropdown(false);
+  if (action !== DATE_FILTER_ACTION) {
+    return;
+  }
+  selectedDateRangeValue.value = value;
+};
+
+watch(
+  () => selectedConfig.value,
+  config => {
+    applySelection(config);
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div
+    v-on-click-outside="() => toggleDropdown(false)"
+    class="relative flex items-center group"
+  >
+    <Button
+      sm
+      slate
+      faded
+      :label="selectedLabel"
+      class="rounded-md group-hover:bg-n-alpha-2"
+      @click="toggleDropdown()"
+    />
+    <DropdownMenu
+      v-if="showDropdown"
+      :menu-items="menuItems"
+      :menu-sections="menuSections"
+      class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0 top-full"
+      @action="handleAction($event)"
+    />
+  </div>
+</template>