@levi-gemcommerce/analytics 3.0.1-dev.2 → 3.0.1-dev.3

package/src/components/GTimePicker/constants/compareDateTimePicker.ts

@@ -0,0 +1,68 @@
+import type { DateTimeFilter, IGetCompareDateByAlias } from '../types';
+
+import {
+  getPreviousWeek,
+  getPreviousQuarter,
+  getPreviousMonth,
+  getPreviousYear,
+  getNoComparison,
+  getPreviousPeriod,
+} from '../helpers/';
+
+export enum CompareDateTimePickerAlias {
+  NO_COMPARISON = 'noComparison',
+  PREVIOUS_PERIOD = 'previousPeriod',
+  PREVIOUS_WEEK = 'previousWeek',
+  PREVIOUS_MONTH = 'previousMonth',
+  PREVIOUS_QUARTER = 'previousQuarter',
+  PREVIOUS_YEAR = 'previousYear',
+}
+
+export const PREVIOUS_PERIOD_FILTER: DateTimeFilter = {
+  title: 'Previous period',
+  alias: CompareDateTimePickerAlias.PREVIOUS_PERIOD,
+  since: 0,
+  until: 0,
+};
+export const DATE_TIME_COMPARISON_FILTERS: DateTimeFilter[] = [
+  {
+    title: 'No comparison',
+    alias: CompareDateTimePickerAlias.NO_COMPARISON,
+    since: 0,
+    until: 0,
+  },
+  PREVIOUS_PERIOD_FILTER,
+  {
+    title: 'Previous week',
+    alias: CompareDateTimePickerAlias.PREVIOUS_WEEK,
+    since: 0,
+    until: 0,
+  },
+  {
+    title: 'Previous quarter',
+    alias: CompareDateTimePickerAlias.PREVIOUS_QUARTER,
+    since: 0,
+    until: 0,
+  },
+  {
+    title: 'Previous month',
+    alias: CompareDateTimePickerAlias.PREVIOUS_MONTH,
+    since: 0,
+    until: 0,
+  },
+  {
+    title: 'Previous year',
+    alias: CompareDateTimePickerAlias.PREVIOUS_YEAR,
+    since: 0,
+    until: 0,
+  },
+];
+
+export const COMPARE_DATE_TIME_FILTERS_MAP: Record<CompareDateTimePickerAlias, IGetCompareDateByAlias> = {
+  [CompareDateTimePickerAlias.NO_COMPARISON]: getNoComparison,
+  [CompareDateTimePickerAlias.PREVIOUS_PERIOD]: getPreviousPeriod,
+  [CompareDateTimePickerAlias.PREVIOUS_WEEK]: getPreviousWeek,
+  [CompareDateTimePickerAlias.PREVIOUS_QUARTER]: getPreviousQuarter,
+  [CompareDateTimePickerAlias.PREVIOUS_MONTH]: getPreviousMonth,
+  [CompareDateTimePickerAlias.PREVIOUS_YEAR]: getPreviousYear,
+};

package/src/components/GTimePicker/constants/datePicker.ts

@@ -0,0 +1,14 @@
+export const DATE_FORMAT = {
+  YMD: 'YYYY-MM-DD', // 2025-01-01
+  MONTH_YEAR: 'MMM YYYY', // Jan 2025
+  FULL: 'MMMM D, YYYY', // January 1, 2025
+  FULL_WITH_TIME: 'MMMM D, YYYY [at] h:mm A', // January 1, 2025 at 12:00 AM
+  SHORT: 'MMM DD, YYYY', // Jan 01, 2025
+  SHORT_NO_PAD: 'MMM D, YYYY', // Jan 1, 2025
+  SHORT_WITH_TIME: 'MMM D, YYYY [at] h:mm A', // Jan 1, 2025 at 12:00 AM
+  MONTH_DAY: 'MMM D', // Jan 1
+  DAY_YEAR: 'D, YYYY', // 1, 2025
+  TIME: 'h:mm A', // 12:00 AM
+  MONTH_DAY_WITH_TIME: 'MMM D [at] h:mm A', // Jan 1 at 12:00 AM
+  YEAR: 'YYYY', // 2025
+};

package/src/components/GTimePicker/constants/mainDataTimePicker.ts

@@ -0,0 +1,88 @@
+import {
+  getLast12Months,
+  getLast30Days,
+  getLast365Days,
+  getLast7Days,
+  getLast90Days,
+  getLastMonth,
+  getLastYear,
+  getToday,
+  getYesterday,
+} from '../helpers';
+import type { IDateTimeFilterMapping } from '../types';
+
+export enum MainDateTimePickerAlias {
+  TODAY = 'today',
+  YESTERDAY = 'yesterday',
+  LAST_7_DAYS = 'last7days',
+  LAST_30_DAYS = 'last30days',
+  LAST_90_DAYS = 'last90days',
+  LAST_365_DAYS = 'last365days',
+  LAST_MONTH = 'lastMonth',
+  LAST_12_MONTHS = 'last12Months',
+  LAST_YEAR = 'lastYear',
+}
+
+export function getDateTimeFilterMapping(): Record<MainDateTimePickerAlias, IDateTimeFilterMapping> {
+  const mappings: Record<MainDateTimePickerAlias, IDateTimeFilterMapping> = {
+    [MainDateTimePickerAlias.TODAY]: {
+      title: 'Today',
+      alias: MainDateTimePickerAlias.TODAY,
+      getDateRange: getToday,
+    },
+    [MainDateTimePickerAlias.YESTERDAY]: {
+      title: 'Yesterday',
+      alias: MainDateTimePickerAlias.YESTERDAY,
+      getDateRange: getYesterday,
+    },
+
+    [MainDateTimePickerAlias.LAST_7_DAYS]: {
+      title: 'Last 7 days',
+      alias: MainDateTimePickerAlias.LAST_7_DAYS,
+      getDateRange: getLast7Days,
+    },
+
+    [MainDateTimePickerAlias.LAST_30_DAYS]: {
+      title: 'Last 30 days',
+      alias: MainDateTimePickerAlias.LAST_30_DAYS,
+      getDateRange: getLast30Days,
+    },
+
+    [MainDateTimePickerAlias.LAST_90_DAYS]: {
+      title: 'Last 90 days',
+      alias: MainDateTimePickerAlias.LAST_90_DAYS,
+      getDateRange: getLast90Days,
+    },
+
+    [MainDateTimePickerAlias.LAST_365_DAYS]: {
+      title: 'Last 365 days',
+      alias: MainDateTimePickerAlias.LAST_365_DAYS,
+      getDateRange: getLast365Days,
+    },
+
+    [MainDateTimePickerAlias.LAST_MONTH]: {
+      title: 'Last month',
+      alias: MainDateTimePickerAlias.LAST_MONTH,
+      getDateRange: getLastMonth,
+    },
+
+    [MainDateTimePickerAlias.LAST_12_MONTHS]: {
+      title: 'Last 12 months',
+      alias: MainDateTimePickerAlias.LAST_12_MONTHS,
+      getDateRange: getLast12Months,
+    },
+
+    [MainDateTimePickerAlias.LAST_YEAR]: {
+      title: 'Last year',
+      alias: MainDateTimePickerAlias.LAST_YEAR,
+      getDateRange: getLastYear,
+    },
+  };
+
+  return mappings;
+}
+
+export function getDateTimeFilterByAlias(alias: MainDateTimePickerAlias): IDateTimeFilterMapping {
+  const mappings = getDateTimeFilterMapping();
+  return mappings[alias];
+}

package/src/components/GTimePicker/contexts/DateTimePickerProvider.tsx

@@ -0,0 +1,125 @@
+import type { DateTimeFilter } from '../types';
+
+import { COMPARE_DATE_TIME_FILTERS_MAP, CompareDateTimePickerAlias, PREVIOUS_PERIOD_FILTER } from '../constants';
+import { createContext, useCallback, useContext, useState } from 'react';
+import { useDateTimeFilter } from '../hooks/useDateTimeFilter';
+import { dayjs, dayjsTz } from '@/utils';
+
+export interface ContextType {
+  dateTimePicked: DateTimeFilter;
+  compareDateTimePicked: DateTimeFilter;
+  setDateTimePicked: (value: DateTimeFilter) => void;
+  setCompareDateTimePicked: (value: DateTimeFilter) => void;
+  resetDateVersion: () => void;
+}
+
+export const DateTimePickerContext = createContext<ContextType>({
+  dateTimePicked: {
+    since: dayjsTz().valueOf(),
+    until: dayjsTz().valueOf(),
+    title: 'Today',
+    alias: 'today',
+  },
+  compareDateTimePicked: PREVIOUS_PERIOD_FILTER,
+  setDateTimePicked: () => {},
+  setCompareDateTimePicked: () => {},
+  resetDateVersion: () => {},
+});
+
+export const DateTimePickerProvider = ({
+  children,
+  initDate,
+  initDateCompare,
+}: {
+  children: React.ReactNode;
+  initDate?: DateTimeFilter;
+  initDateCompare?: DateTimeFilter;
+}) => {
+  const [dateTimePicked, setDateTimePicked] = useState(
+    initDate || {
+      since: dayjsTz().set('hour', 0).valueOf(),
+      until: dayjsTz().set('hour', 0).valueOf(),
+      title: 'Today',
+      alias: 'today',
+    },
+  );
+  const { DATE_TIME_FILTERS } = useDateTimeFilter();
+
+  const getCompareDateTimePicked = useCallback(
+    (alias: CompareDateTimePickerAlias, source = dateTimePicked) => {
+      return {
+        ...PREVIOUS_PERIOD_FILTER,
+        ...COMPARE_DATE_TIME_FILTERS_MAP[alias]({
+          since: source.since,
+          until: source.until,
+          alias: source.alias,
+        }),
+      };
+    },
+    [dateTimePicked],
+  );
+
+  const [compareDateTimePicked, setCompareDateTimePicked] = useState(
+    initDateCompare || getCompareDateTimePicked(CompareDateTimePickerAlias.PREVIOUS_PERIOD),
+  );
+
+  const updateCompareDateTimePicked = useCallback(
+    (source: DateTimeFilter) => {
+      if (
+        compareDateTimePicked.alias === 'custom' ||
+        compareDateTimePicked.alias === CompareDateTimePickerAlias.NO_COMPARISON
+      )
+        return;
+      setCompareDateTimePicked(
+        getCompareDateTimePicked(compareDateTimePicked.alias as CompareDateTimePickerAlias, source),
+      );
+    },
+    [compareDateTimePicked, getCompareDateTimePicked],
+  );
+
+  const resetDateVersion = () => {
+    const since = dayjs(dateTimePicked.since).startOf('day').valueOf();
+    const until = dayjs(dateTimePicked.until).startOf('day').valueOf();
+    const dateFilter = DATE_TIME_FILTERS.find((filter) => filter.since === since && filter.until === until);
+
+    setDateTimePicked({
+      ...dateTimePicked,
+      isVersion: false,
+      versionId: undefined,
+      isCurrentVersion: false,
+      description: '',
+      title: dateFilter?.title || dateTimePicked.title,
+      alias: dateFilter?.alias || 'custom',
+    });
+  };
+
+  const onSetDateTimePicked = useCallback(
+    (value: DateTimeFilter) => {
+      setDateTimePicked(value);
+      updateCompareDateTimePicked(value);
+    },
+    [updateCompareDateTimePicked],
+  );
+
+  return (
+    <DateTimePickerContext.Provider
+      value={{
+        dateTimePicked,
+        setDateTimePicked: onSetDateTimePicked,
+        compareDateTimePicked,
+        setCompareDateTimePicked,
+        resetDateVersion,
+      }}
+    >
+      {children}
+    </DateTimePickerContext.Provider>
+  );
+};
+
+export const useDateTimePickerContext = () => {
+  const context = useContext(DateTimePickerContext);
+  if (!context) {
+    throw new Error('useDateTimePickerContext must be used within a DateTimePickerProvider');
+  }
+  return context;
+};

package/src/components/GTimePicker/helpers/date-range-info.ts

@@ -0,0 +1,84 @@
+import type { DateTimeFilterBase } from '../types';
+
+import {
+  getDateTimeFilterByAlias,
+  getDateTimeFilterMapping,
+  MainDateTimePickerAlias,
+} from '../constants/mainDataTimePicker';
+import { isSameDayTimestamp, formatTimeRange } from './parse-date';
+import { dayjsTz, convertDateToTz } from '@/utils';
+import { DATE_FORMAT } from '../constants/datePicker';
+
+interface IDateRangeLabelParams {
+  since: number | string;
+  until: number | string;
+  isShowNow?: boolean;
+}
+
+export function getDateRangeTitle(since: number | string, until: number | string): string {
+  const sinceDate = convertDateToTz(since);
+  const untilDate = convertDateToTz(until);
+
+  if (sinceDate.isSame(untilDate, 'day')) {
+    return sinceDate.format(DATE_FORMAT.SHORT);
+  }
+
+  if (sinceDate.isSame(untilDate, 'month') && sinceDate.isSame(untilDate, 'year')) {
+    return `${sinceDate.format(DATE_FORMAT.MONTH_DAY)} - ${untilDate.format(DATE_FORMAT.DAY_YEAR)}`;
+  }
+
+  if (sinceDate.isSame(untilDate, 'year')) {
+    return `${sinceDate.format(DATE_FORMAT.MONTH_DAY)} - ${untilDate.format(DATE_FORMAT.SHORT_NO_PAD)}`;
+  }
+
+  return `${sinceDate.format(DATE_FORMAT.SHORT_NO_PAD)} - ${untilDate.format(DATE_FORMAT.SHORT_NO_PAD)}`;
+}
+
+/**
+ * Resolves a { title, alias } pair from a since/until date range.
+ * Matches against known presets (today, last 7 days, …); falls back to
+ * a formatted custom range with alias "custom".
+ */
+export function getDateTimeFilterBase(since: number | string, until: number | string): DateTimeFilterBase {
+  const now = dayjsTz();
+  const sinceDate = convertDateToTz(since);
+  const untilDate = convertDateToTz(until);
+
+  const mappings = getDateTimeFilterMapping();
+  for (const mapping of Object.values(mappings)) {
+    const range = mapping.getDateRange(now);
+    const expectedSince = convertDateToTz(range.since);
+    const expectedUntil = convertDateToTz(range.until);
+
+    const isSameSince = sinceDate.isSame(expectedSince, 'day');
+    const isSameUntil = untilDate.isSame(expectedUntil, 'day');
+
+    if (isSameSince && isSameUntil) {
+      return { title: mapping.title, alias: mapping.alias };
+    }
+  }
+
+  return {
+    title: getDateRangeTitle(since, until),
+    alias: 'custom',
+  };
+}
+
+export function getVersionDateRangeTitle(data: IDateRangeLabelParams): string {
+  const { since, until, isShowNow } = data;
+
+  const sinceDate = convertDateToTz(since);
+  const isToday = sinceDate.isSame(dayjsTz(), 'day');
+
+  if (isToday) return getDateTimeFilterByAlias(MainDateTimePickerAlias.TODAY).title;
+  if (isShowNow) return `${sinceDate.format(DATE_FORMAT.SHORT_NO_PAD)} - Now`;
+
+  return getDateRangeTitle(since, until);
+}
+
+export const getVersionDateDescription = ({ since, until, isShowNow }: IDateRangeLabelParams) => {
+  const isSameDay = isSameDayTimestamp(since, until);
+  if (!isSameDay) return undefined;
+
+  return formatTimeRange({ since, until, showNow: isShowNow });
+};

package/src/components/GTimePicker/helpers/parse-date.ts

@@ -0,0 +1,127 @@
+import type { Dayjs } from '@/utils';
+
+import { dayjsTz, dayjs, convertDateToTz } from '@/utils';
+import { DATE_FORMAT } from '../constants/datePicker';
+export function parseYearMonthDayDateString(input?: dayjs.ConfigType) {
+  // Date-only strings (e.g. "1970-01-01") are treated as UTC, not local time
+  // when using new Date()
+  // We need to split year, month, day to pass into new Date() separately
+  // to get a localized Date
+  return dayjs(input).valueOf();
+}
+const VALID_YYYY_MM_DD_DATE_REGEX = /^\d{4}-\d{1,2}-\d{1,2}/;
+export function isDate(date: number | string | Date) {
+  return !isNaN(new Date(date).getDate());
+}
+export function isValidYearMonthDayDateString(date: string) {
+  return VALID_YYYY_MM_DD_DATE_REGEX.test(date) && isDate(date);
+}
+export function isValidDate(date: string) {
+  return date.length === 10 && isValidYearMonthDayDateString(date);
+}
+
+export function formatDate(timestamp: number | string, type?: 'YMD' | 'MY' | 'FULL' | 'FULL_WITH_TIME') {
+  const date = convertDateToTz(timestamp);
+  if (type === 'YMD') {
+    return date.format(DATE_FORMAT.YMD);
+  }
+  if (type === 'MY') {
+    return date.format(DATE_FORMAT.MONTH_YEAR);
+  }
+  if (type === 'FULL') {
+    return date.format(DATE_FORMAT.FULL);
+  }
+  if (type === 'FULL_WITH_TIME') {
+    return date.format(DATE_FORMAT.FULL_WITH_TIME);
+  }
+  return date.format(DATE_FORMAT.SHORT);
+}
+
+export function formatTime(timestamp: number | string) {
+  const date = convertDateToTz(timestamp);
+  return date.format(DATE_FORMAT.TIME);
+}
+
+export function isSameDayTimestamp(since: number | string, until: number | string) {
+  const sinceDate = convertDateToTz(since);
+  const untilDate = convertDateToTz(until);
+  return sinceDate.isSame(untilDate, 'day');
+}
+
+export function formatTimeRange(data: {
+  since: number | string;
+  until: number | string;
+  format?: string;
+  showNow?: boolean;
+}) {
+  const { since, until, format = DATE_FORMAT.TIME, showNow = false } = data;
+  const sinceDate = convertDateToTz(since);
+  const untilDate = convertDateToTz(until);
+
+  return `${sinceDate.format(format)} - ${showNow ? 'Now' : untilDate.format(format)}`;
+}
+
+export function formatDateTimeRange(data: { since: number | string; until: number | string; isShowNow?: boolean }) {
+  const { since, until, isShowNow } = data;
+  const sinceDate = convertDateToTz(since);
+  const untilDate = convertDateToTz(until);
+  const isToday = sinceDate.isSame(dayjsTz(), 'day');
+
+  const startTime = sinceDate.format(DATE_FORMAT.TIME);
+  const endTime = untilDate.format(DATE_FORMAT.TIME);
+
+  if (isToday) {
+    const formatEndTime = isShowNow ? 'Now' : endTime;
+    return `Today at ${startTime} - ${formatEndTime}`;
+  }
+
+  if (isShowNow) {
+    return `${sinceDate.format(DATE_FORMAT.SHORT_WITH_TIME)} - Now`;
+  }
+
+  if (sinceDate.isSame(untilDate, 'day')) {
+    return `${sinceDate.format(DATE_FORMAT.SHORT_WITH_TIME)} - ${endTime}`;
+  }
+
+  if (sinceDate.isSame(untilDate, 'month')) {
+    const time = formatTimeRange({ since, until });
+    return `${sinceDate.format(DATE_FORMAT.SHORT)} (${time})`;
+  }
+
+  if (sinceDate.isSame(untilDate, 'year')) {
+    return `${sinceDate.format(DATE_FORMAT.MONTH_DAY_WITH_TIME)} - ${untilDate.format(DATE_FORMAT.MONTH_DAY_WITH_TIME)}, ${untilDate.format(DATE_FORMAT.YEAR)}`;
+  }
+
+  return `${sinceDate.format(DATE_FORMAT.SHORT_WITH_TIME)} - ${untilDate.format(DATE_FORMAT.SHORT_WITH_TIME)}`;
+}
+
+export const formatDayjs = (date: Dayjs, isEndDay = false, formatTemplate?: string) => {
+  // const isUTC = date.isUTC?.() ?? false;
+  // if (isUTC) return date.format();
+
+  if (isEndDay && isMidnight(date)) {
+    return date.endOf('day').format(formatTemplate);
+  }
+  return date.format(formatTemplate);
+};
+
+export const getEndOfDayBy = (value?: string | Dayjs, formatTemplate?: string) => {
+  if (!value) {
+    return formatDayjs(dayjsTz().endOf('day'), false, formatTemplate);
+  }
+
+  return formatDayjs(dayjsTz(value).endOf('day'), false, formatTemplate);
+};
+
+export const isMidnight = (date: Dayjs) => {
+  return date.hour() === 0 && date.minute() === 0;
+};
+
+export const formatMs = (ms: number): string => {
+  const totalSeconds = Math.floor(ms / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  return [hours, minutes, seconds].map((v) => String(v).padStart(2, '0')).join(':');
+};

package/src/components/GTimePicker/helpers/time-picker.ts

@@ -0,0 +1,123 @@
+import type { IGetCompareDateByAlias } from '../types';
+import type { Dayjs, ManipulateType } from 'dayjs';
+
+import { MainDateTimePickerAlias } from '../constants/mainDataTimePicker';
+import { dayjs } from '@/utils';
+
+export const getNoComparison: IGetCompareDateByAlias = () => {
+  return {
+    since: 0,
+    until: 0,
+  };
+};
+
+export const getPreviousPeriod: IGetCompareDateByAlias = (value) => {
+  const { since, until, alias } = value;
+  const sinceDate = dayjs(since);
+  const untilDate = dayjs(until);
+
+  if (alias === MainDateTimePickerAlias.LAST_MONTH) {
+    return getLastMonth(sinceDate);
+  }
+
+  if (alias === MainDateTimePickerAlias.LAST_12_MONTHS) {
+    return getLast12Months(sinceDate);
+  }
+
+  if (alias === MainDateTimePickerAlias.LAST_YEAR) {
+    return getLastYear(sinceDate);
+  }
+
+  const duration = untilDate.diff(sinceDate, 'day') + 1;
+  const previousSince = sinceDate.subtract(duration, 'day');
+  const previousUntil = untilDate.subtract(duration, 'day');
+  return {
+    since: previousSince.valueOf(),
+    until: previousUntil.valueOf(),
+  };
+};
+
+const createPreviousRange =
+  (subtractAmount: number, subtractUnit: ManipulateType) =>
+  (value: { since: number | string; until: number | string }) => {
+    const { since, until } = value;
+    const sinceDate = dayjs(since);
+    const untilDate = dayjs(until);
+    const duration = untilDate.diff(sinceDate, 'day');
+    const previousSince = sinceDate.subtract(subtractAmount, subtractUnit);
+    const previousUntil = previousSince.add(duration, 'day');
+    return {
+      since: previousSince.valueOf(),
+      until: previousUntil.valueOf(),
+    };
+  };
+
+export const getPreviousWeek = createPreviousRange(7, 'day');
+export const getPreviousQuarter = createPreviousRange(3, 'month');
+export const getPreviousMonth = createPreviousRange(1, 'month');
+export const getPreviousYear = createPreviousRange(1, 'year');
+
+export const createLastDaysRange = (subtractAmount: number) => (date: Dayjs) => {
+  return {
+    since: date.subtract(subtractAmount, 'day').valueOf(),
+    until: date.valueOf(),
+  };
+};
+export const getToday = (currentDate: Dayjs) => {
+  return {
+    since: currentDate.valueOf(),
+    until: currentDate.valueOf(),
+  };
+};
+
+export const getYesterday = (date: Dayjs) => {
+  return {
+    since: date.subtract(1, 'day').valueOf(),
+    until: date.subtract(1, 'day').valueOf(),
+  };
+};
+
+export const getLast7Days = createLastDaysRange(6);
+
+export const getLast30Days = createLastDaysRange(29);
+
+export const getLast90Days = createLastDaysRange(89);
+
+export const getLast365Days = createLastDaysRange(364);
+
+export function getLastMonth(date: Dayjs) {
+  return {
+    since: date.subtract(1, 'month').startOf('month').valueOf(),
+    until: date.subtract(1, 'month').endOf('month').valueOf(),
+  };
+}
+
+export function getLast12Months(date: Dayjs) {
+  return {
+    since: date.subtract(12, 'month').startOf('month').valueOf(),
+    until: date.subtract(1, 'month').endOf('month').valueOf(),
+  };
+}
+
+export function getLastYear(date: Dayjs) {
+  return {
+    since: date.subtract(1, 'year').startOf('year').valueOf(),
+    until: date.subtract(1, 'year').endOf('year').valueOf(),
+  };
+}
+
+export const getMonthAndYearByDateFilter = (month: number, year: number, date: Date) => {
+  const endDate = dayjs(date);
+  const endMonthFilter = endDate.month();
+  const endYearFilter = endDate.year();
+
+  if (endYearFilter !== year || endMonthFilter !== month) {
+    const prev = endDate.subtract(1, 'month');
+    return {
+      month: prev.month(),
+      year: prev.year(),
+    };
+  }
+
+  return { month, year };
+};

package/src/components/GTimePicker/helpers/version.ts

@@ -0,0 +1,36 @@
+import type { DateTimeFilter, IBaseCampaignVersion } from '../types';
+
+import { getVersionDateRangeTitle, getVersionDateDescription } from './date-range-info';
+import { dayjsTzToLocalTZ } from '@/utils';
+import { getEndOfDayBy } from './parse-date';
+import { semverToNum } from '@/utils';
+
+export const convertToDateTimeFilters = (versions: IBaseCampaignVersion[]): DateTimeFilter[] => {
+  const dataVersions = [...versions].sort((a, b) => semverToNum(b.version) - semverToNum(a.version));
+
+  return dataVersions
+    .map((item) => {
+      if (!item.startedAt) return false;
+
+      const isCurrentVersion = !item.completedAt;
+      const since = dayjsTzToLocalTZ(item.startedAt).valueOf();
+      const until = isCurrentVersion
+        ? dayjsTzToLocalTZ(getEndOfDayBy()).valueOf()
+        : dayjsTzToLocalTZ(item.completedAt!).valueOf();
+
+      const title = getVersionDateRangeTitle({ since, until, isShowNow: isCurrentVersion });
+      const description = getVersionDateDescription({ since, until, isShowNow: isCurrentVersion });
+
+      return {
+        title,
+        alias: `${item.version}`,
+        since,
+        until,
+        isVersion: true,
+        isCurrentVersion,
+        description,
+        versionId: item.id,
+      };
+    })
+    .filter(Boolean) as DateTimeFilter[];
+};