@quillsql/react 2.10.17 → 2.10.19

package/dist/esm/Dashboard.js

@@ -1,12 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useState, useRef, useCallback, memo, } from 'react';
+import { useContext, useEffect, useState, useCallback, memo, } from 'react';
 import Chart from './Chart';
-import { capitalize, defaultOptions, getWeekdays, getRangeFromPreset, PRIMARY_RANGE, COMPARISON_RANGE, PRIMARY_CODES, } from './DateRangePicker/dateRangePickerUtils';
+import { PRIMARY_RANGE, COMPARISON_RANGE, defaultOptionsV2, COMPARISON_OPTIONS, getRangeFromPresetOptions, } from './DateRangePicker/dateRangePickerUtils';
 import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, DateFilterContext, useComparisonRange, useDateFilter, } from './Context';
-import { addDays, eachDayOfInterval, endOfMonth, format, isAfter, isBefore, isEqual, isSaturday, isSunday, nextSaturday, previousSunday, startOfMonth, startOfToday, startOfWeek, startOfYear, sub, subDays, } from 'date-fns';
-import { ArrowDownHeadIcon, ArrowLeftHeadIcon, ArrowRightHeadIcon, CalendarNormalIcon, } from './assets';
-import { useOnClickOutside } from './hooks';
-import { enUS } from 'date-fns/locale';
+import { ArrowDownHeadIcon } from './assets';
 import { useDashboard } from './hooks/useDashboard';
 import { hashCode } from './utils/crypto';
 import DashboardSectionContainer from './components/Dashboard/DashboardSectionContainer';
@@ -16,69 +13,19 @@ import QuillChartComponent from './components/Dashboard/ChartComponent';
 import DashboardSection from './components/Dashboard/DashboardSection';
 import { styleToProps } from './utils/styles';
 import { cleanDashboardItem } from './utils/dashboard';
+import { QuillDateRangePicker } from './DateRangePicker/QuillDateRangePicker';
 import DataLoader from './components/Dashboard/DataLoader';
-export const COMPARISON_OPTIONS = [
-    {
-        value: 'PREV_PERIOD',
-        text: 'Previous Period',
-    },
-    {
-        value: 'PREV_7_DAYS',
-        text: 'Previous 7 days',
-    },
-    {
-        value: 'PREV_30_DAYS',
-        text: 'Previous 30 days',
-    },
-    {
-        value: 'PREV_90_DAYS',
-        text: 'Previous 90 days',
-    },
-    {
-        value: 'NO_COMPARISON',
-        text: 'No comparison',
-    },
-];
-export const PRIMARY_OPTIONS = [
-    { value: 'THIS_WEEK', text: 'This Week' },
-    { value: 'THIS_MONTH', text: 'This Month' },
-    { value: 'THIS_YEAR', text: 'This year' },
-    { value: 'LAST_7_DAYS', text: 'Last 7 days' },
-    { value: 'LAST_30_DAYS', text: 'Last 30 days' },
-    { value: 'LAST_90_DAYS', text: 'Last 90 days' },
-    { value: 'LAST_6_MONTHS', text: 'Last 6 months' },
-    { value: 'ALL_TIME', text: 'All time' },
-];
-const FILTER_CODE_MAP = {
-    wk: 'This week',
-    m: 'This month',
-    y: 'This year',
-    w: 'Last 7 days',
-    t: 'Last 30 days',
-    '90d': 'Last 90 days',
-    '6m': 'Last 6 months',
-    at: 'All time',
-};
+import { QuillSelectComponent } from './components/QuillSelect';
 export function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePickerComponent, theme, }) {
     const { comparisonRange, setComparisonRange } = useComparisonRange();
     const { setDateFilter } = useDateFilter();
     const [filterValue, setFilterValue] = useState(null);
     useEffect(() => {
-        if (filter.filterType === 'date_range' &&
-            !filter.selectedValue &&
-            !filterValue) {
-            setFilterValue([filter.startDate, filter.endDate, null]);
-        }
-        else if (filter.filterType === 'date_range' && !filterValue) {
-            setFilterValue(filter.selectedValue);
-        }
-        else if (filter.filterType === 'string') {
+        if (filter.filterType === 'string') {
             setFilterValue(filter.selectedValue);
         }
         if (filter.filterType == 'date_range') {
-            setDateFilter(filter.selectedValue
-                ? FILTER_CODE_MAP[filter.selectedValue[2]]
-                : null);
+            setDateFilter(filter.preset.label);
             if (filter?.comparisonRange?.value) {
                 const newComparisonRange = COMPARISON_OPTIONS.find((option) => {
                     return option.value === filter.comparisonRange.value;
@@ -91,7 +38,7 @@ export function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateR
         }
     }, [filter]);
     if (filter.filterType === 'string') {
-        return (_jsx(SelectComponent, { label: filter.label, value: filterValue, onChange: (e) => {
+        return (_jsx(QuillSelectComponent, { theme: theme, label: filter.label, value: filterValue, onChange: (e) => {
                 onChangeFilter(filter, e);
             }, options: [
                 ...filter.options.map((elem) => {
@@ -107,31 +54,16 @@ export function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateR
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'flex-end',
-            }, children: [_jsx(DateRangePickerComponent, { dateRange: filterValue ? [filterValue[0], filterValue[1]] : [null, null], label: filter.label, 
-                    // value={filterValue}
-                    onChangeDateRange: (dateRange) => {
-                        onChangeFilter(filter, [dateRange[0], dateRange[1], null]);
-                        setFilterValue([dateRange[0], dateRange[1], null]);
-                    }, preset: filterValue && filterValue.length === 3 && filterValue[2] !== null
-                        ? filterValue[2]
-                        : '', onChangePreset: (preset) => {
-                        if (typeof preset === 'string') {
-                            const fullPreset = getRangeFromPreset(preset);
-                            onChangeFilter(filter, fullPreset);
-                            setFilterValue(fullPreset);
-                            return;
-                        }
-                        onChangeFilter(filter, [
-                            preset?.startDate || null,
-                            new Date(),
-                            preset?.value || '',
-                        ]);
-                        setFilterValue([
-                            preset?.startDate || null,
-                            new Date(),
-                            preset?.value || '',
-                        ]);
-                    }, presetOptions: defaultOptions }), comparisonRange && (_jsx("div", { children: _jsxs("div", { style: {
+            }, children: [_jsx(DateRangePickerComponent, { label: filter.label, dateRange: { startDate: filter.startDate, endDate: filter.endDate }, preset: filter.preset.label, onChangeDateRange: (value) => {
+                        onChangeFilter(filter, {
+                            startDate: value.startDate,
+                            endDate: value.endDate,
+                        });
+                    }, onChangePreset: (value) => {
+                        onChangeFilter(filter, { preset: value });
+                    }, presetOptions: filter.options.map((option) => {
+                        return { label: option.label, value: option.label };
+                    }) }), comparisonRange && (_jsx("div", { children: _jsxs("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',
@@ -140,7 +72,8 @@ export function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateR
                                     paddingRight: 12,
                                     color: theme?.secondaryTextColor,
                                     fontFamily: theme?.fontFamily,
-                                }, children: "compared to" }), _jsx(SelectComponent, { value: comparisonRange.value, onChange: (e) => {
+                                    fontSize: 14,
+                                }, children: "compared to" }), _jsx(QuillSelectComponent, { theme: theme, value: comparisonRange.value, onChange: (e) => {
                                     onChangeFilter(filter, null, COMPARISON_OPTIONS.find((option) => {
                                         return option.value === e;
                                     }));
@@ -153,32 +86,6 @@ export function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateR
     }
     return null;
 }
-const options = [
-    {
-        date_range: [startOfWeek(startOfToday()), startOfToday(), 'wk'],
-    },
-    {
-        date_range: [sub(startOfToday(), { days: 90 }), startOfToday(), '90d'],
-    },
-    {
-        date_range: [sub(startOfToday(), { days: 30 }), startOfToday(), 't'],
-    },
-    {
-        date_range: [sub(startOfToday(), { years: 100 }), startOfToday(), 'at'],
-    },
-    {
-        date_range: [startOfYear(startOfToday()), startOfToday(), 'y'],
-    },
-    {
-        date_range: [startOfMonth(startOfToday()), startOfToday(), 'm'],
-    },
-    {
-        date_range: [sub(startOfToday(), { days: 7 }), startOfToday(), 'w'],
-    },
-    {
-        date_range: [sub(startOfToday(), { months: 6 }), startOfToday(), '6m'],
-    },
-];
 const QuillDropdownComponent = ({ onChange, value, label, options, }) => {
     const [theme] = useContext(ThemeContext);
     const handleOnChange = useCallback((event) => {
@@ -224,317 +131,12 @@ const QuillDropdownComponent = ({ onChange, value, label, options, }) => {
                             color: theme?.secondaryTextColor,
                         }, "aria-hidden": "true" })] })] }));
 };
-const isBetween = (date, startDate, endDate) => {
-    return isAfter(date, startDate) && isBefore(date, endDate);
-};
-function Calendar({ anchorDate, onClickDate, theme, localStartDate, localEndDate, }) {
-    const firstDayOfDisplayedMonth = startOfMonth(anchorDate);
-    const lastDayOfDisplayedMonth = endOfMonth(anchorDate);
-    const weekdays = getWeekdays(enUS).map((dayName) => capitalize(dayName, enUS));
-    const displayedDates = eachDayOfInterval({
-        start: isSunday(firstDayOfDisplayedMonth)
-            ? firstDayOfDisplayedMonth
-            : previousSunday(firstDayOfDisplayedMonth),
-        end: isSaturday(lastDayOfDisplayedMonth)
-            ? lastDayOfDisplayedMonth
-            : nextSaturday(lastDayOfDisplayedMonth),
-    });
-    const displayedTitle = capitalize(format(firstDayOfDisplayedMonth, 'MMMM yyyy', { locale: enUS }), enUS);
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            flex: 1,
-            // alignItems: 'center',
-        }, children: [_jsx("h2", { style: {
-                    color: theme?.textColor || '#364153',
-                    fontSize: '13px',
-                    fontFamily: theme?.fontFamily,
-                    fontWeight: '700',
-                    width: '100%',
-                    textAlign: 'center',
-                    height: 36,
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    marginBottom: 3,
-                    marginTop: 6,
-                }, children: displayedTitle }), _jsx("div", { style: {
-                    color: theme?.primaryTextColor || '#364153',
-                    textAlign: 'center',
-                    fontSize: 12,
-                    fontWeight: '500',
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
-                    paddingTop: 6,
-                }, children: weekdays.map((dayName) => (_jsx("div", { style: { width: '100%', display: 'flex', justifyContent: 'center' }, children: _jsx("div", { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            width: '100%',
-                            // height: '2.25rem',
-                            fontFamily: theme?.fontFamily,
-                            color: theme.secondaryTextColor,
-                            paddingBottom: 4,
-                        }, children: dayName }) }, dayName))) }), _jsx("div", { style: {
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
-                    borderRadius: 3,
-                    overflow: 'hidden',
-                    rowGap: 6,
-                }, children: displayedDates.map((date, index) => {
-                    return (_jsx("div", { style: { width: '100%' }, children: _jsx("button", { style: {
-                                border: 'none',
-                                height: '34px',
-                                display: 'flex',
-                                width: '100%',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                fontFamily: theme?.fontFamily,
-                                fontSize: 13,
-                                background: isEqual(localStartDate, date) || isEqual(localEndDate, date)
-                                    ? theme.primaryTextColor
-                                    : isBetween(date, localStartDate, localEndDate)
-                                        ? '#F4F4F5'
-                                        : 'transparent',
-                                color: isEqual(localStartDate, date) || isEqual(localEndDate, date)
-                                    ? theme.backgroundColor
-                                    : theme.primaryTextColor,
-                                borderRadius: isEqual(localStartDate, date) || isEqual(localEndDate, date)
-                                    ? 3
-                                    : 0,
-                                ...isBeginningOrEndOfWeek(index),
-                            }, type: "button", onClick: () => {
-                                onClickDate(date);
-                            }, children: _jsx("time", { dateTime: format(date, 'yyyy-MM-dd', { locale: enUS }), children: format(date, 'd', { locale: enUS }) }) }) }, date.toString()));
-                }) }), _jsx("div", { style: { height: 8 } })] }));
-}
-function isBeginningOrEndOfWeek(num) {
-    // Check if the number is 0
-    if (num === 0)
-        return { borderTopLeftRadius: 3, borderBottomLeftRadius: 3 };
-    // Check if the number is divisible by 7
-    if (num % 7 === 0)
-        return { borderTopLeftRadius: 3, borderBottomLeftRadius: 3 };
-    // Check if the number is one less than a multiple of 7
-    if ((num + 1) % 7 === 0)
-        return { borderTopRightRadius: 3, borderBottomRightRadius: 3 };
-    // If none of the conditions are met, return false
-    return {};
-}
-const formatDateText = (dateRange, localStartDate, localEndDate) => {
-    if (dateRange.length && dateRange[0] && dateRange[1]) {
-        return (format(dateRange[0], 'MMM dd, yyyy') +
-            ' - ' +
-            format(dateRange[1], 'MMM dd, yyyy'));
-    }
-    if (localStartDate && localEndDate) {
-        return (format(localStartDate, 'MMM dd, yyyy') +
-            ' - ' +
-            format(localEndDate, 'MMM dd, yyyy'));
-    }
-    return '';
-};
-function CalendarDropdown({ onChangeDateRange, dateRange }) {
-    const [theme] = useContext(ThemeContext);
-    const [showModal, setShowModal] = useState(false);
-    const modalRef = useRef(null);
-    const parentRef = useRef(null);
-    const [anchorDate, setAnchorDate] = useState(null);
-    const [localStartDate, setLocalStartDate] = useState(null);
-    const [localEndDate, setLocalEndDate] = useState(null);
-    const prevMonthAnchor = subDays(startOfMonth(anchorDate), 1);
-    const onClickDate = (date) => {
-        if (localStartDate && isBefore(date, localStartDate)) {
-            setLocalStartDate(date);
-            return;
-        }
-        if (localEndDate && isAfter(date, localEndDate)) {
-            setLocalEndDate(date);
-            return;
-        }
-        if (localEndDate && isBefore(date, localEndDate)) {
-            setLocalEndDate(date);
-            return;
-        }
-        if (isEqual(localStartDate, date) || isEqual(localEndDate, date)) {
-            setLocalStartDate(null);
-            setLocalEndDate(null);
-        }
-        if (!localStartDate) {
-            setLocalStartDate(date);
-            return;
-        }
-        if (!localEndDate) {
-            setLocalEndDate(date);
-            return;
-        }
-    };
-    useEffect(() => {
-        if (localEndDate &&
-            localStartDate &&
-            isBefore(localStartDate, localEndDate)) {
-            onChangeDateRange([localStartDate, localEndDate]);
-        }
-    }, [localEndDate, localStartDate]);
-    useEffect(() => {
-        if (dateRange.length && !anchorDate) {
-            setAnchorDate(dateRange[1]);
-        }
-    }, [dateRange, anchorDate]);
-    useOnClickOutside(modalRef, (e) => {
-        // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
-        const isTriggerElem = parentRef
-            ? parentRef.current?.contains(e.target)
-            : false;
-        if (!isTriggerElem) {
-            setShowModal(false);
-        }
-    });
-    return (_jsxs("div", { ref: parentRef, style: { position: 'relative', height: 38 }, children: [_jsx("button", { 
-                // onChange={handleOnChange}
-                // value={value}
-                onClick: () => setShowModal((showModal) => !showModal), id: 'reportbuilderdropdown', defaultValue: "Select", style: {
-                    width: '100%',
-                    WebkitAppearance: 'none',
-                    minWidth: 275,
-                    maxWidth: 275,
-                    outline: 'none',
-                    textAlign: 'left',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    borderRadius: 6,
-                    // paddingLeft: 12,
-                    paddingRight: 12,
-                    height: 38,
-                    borderStyle: 'solid',
-                    borderWidth: theme.borderWidth,
-                    borderColor: theme.borderColor,
-                    background: theme.backgroundColor,
-                    color: theme.primaryTextColor,
-                    boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
-                    fontFamily: theme.fontFamily,
-                    fontSize: 14,
-                    fontWeight: 500,
-                    minHeight: 38,
-                    marginBottom: 0,
-                    paddingLeft: 14 + 15 + 3,
-                }, children: formatDateText(dateRange, localStartDate, localEndDate) }), _jsx(CalendarNormalIcon, { style: {
-                    height: '15px',
-                    width: '15px',
-                    flex: 'none',
-                    position: 'absolute',
-                    left: 12,
-                    top: 11,
-                    color: theme?.primaryTextColor,
-                } }), showModal && (_jsxs("div", { ref: modalRef, style: {
-                    position: 'absolute',
-                    zIndex: 1,
-                    overflowY: 'auto',
-                    top: 38 + 8,
-                    width: 230 + 245 + 12,
-                    // left: getAbsoluteSpacing(),
-                    // right: getAbsoluteSpacing(),
-                    // height: 230 + 10,
-                    backgroundColor: theme?.backgroundColor || 'white',
-                    borderColor: theme?.borderColor || '#E5E7EB',
-                    borderTopStyle: 'solid',
-                    borderBottomStyle: 'solid',
-                    borderLeftStyle: 'solid',
-                    borderRightStyle: 'solid',
-                    borderTopWidth: 1,
-                    borderBottomWidth: 1,
-                    borderLeftWidth: 1,
-                    borderRightWidth: 1,
-                    marginTop: 0,
-                    // marginTop: '6px',
-                    borderRadius: 5,
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'flex-start',
-                    boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
-                    gap: 12,
-                    paddingLeft: 8,
-                    paddingRight: 8,
-                    paddingBottom: 1,
-                }, children: [_jsx("button", { style: {
-                            height: 32,
-                            width: 32,
-                            position: 'absolute',
-                            borderColor: theme?.borderColor || '#E5E7EB',
-                            borderTopStyle: 'solid',
-                            borderBottomStyle: 'solid',
-                            borderLeftStyle: 'solid',
-                            borderRightStyle: 'solid',
-                            borderTopWidth: 1,
-                            borderBottomWidth: 1,
-                            borderLeftWidth: 1,
-                            borderRightWidth: 1,
-                            top: 8,
-                            left: 8,
-                            borderRadius: 3,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            background: 'transparent',
-                        }, onClick: () => setAnchorDate((date) => subDays(startOfMonth(date), 1)), children: _jsx(ArrowLeftHeadIcon, { style: {
-                                height: '20px',
-                                width: '20px',
-                                color: theme?.secondaryTextColor,
-                            }, "aria-hidden": "true" }) }), _jsx("button", { style: {
-                            height: 32,
-                            width: 32,
-                            borderColor: theme?.borderColor || '#E5E7EB',
-                            borderTopStyle: 'solid',
-                            borderBottomStyle: 'solid',
-                            borderLeftStyle: 'solid',
-                            borderRightStyle: 'solid',
-                            borderTopWidth: 1,
-                            borderBottomWidth: 1,
-                            borderLeftWidth: 1,
-                            borderRightWidth: 1,
-                            position: 'absolute',
-                            top: 8,
-                            right: 8,
-                            borderRadius: 3,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            background: 'transparent',
-                        }, onClick: () => setAnchorDate((date) => addDays(endOfMonth(date), 1)), children: _jsx(ArrowRightHeadIcon, { style: {
-                                height: '20px',
-                                width: '20px',
-                                color: theme?.secondaryTextColor,
-                            }, "aria-hidden": "true" }) }), anchorDate && (_jsx(Calendar, { anchorDate: prevMonthAnchor, dateRange: dateRange, theme: theme, onClickDate: onClickDate, localStartDate: localStartDate, localEndDate: localEndDate })), anchorDate && (_jsx(Calendar, { anchorDate: anchorDate, dateRange: dateRange, theme: theme, onClickDate: onClickDate, localStartDate: localStartDate, localEndDate: localEndDate }))] }))] }));
-}
-export const QuillDateRangePicker = ({ label, dateRange, onChangeDateRange, presetOptions, preset, onChangePreset, }) => {
-    const [theme] = useContext(ThemeContext);
-    return (_jsxs("div", { children: [label !== '' && (_jsx("div", { style: {
-                    marginBottom: 6,
-                    fontWeight: theme.labelFontWeight || '600',
-                    color: theme.secondaryTextColor,
-                    fontFamily: theme.fontFamily,
-                    fontSize: 14,
-                }, children: label })), _jsxs("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 12,
-                }, children: [_jsx(MemoizedCalendarDropdown, { dateRange: dateRange, onChangeDateRange: onChangeDateRange, theme: theme }), _jsx(MemoizedDropdown, { options: presetOptions.map((option) => ({
-                            label: option.text,
-                            value: option.value,
-                        })), onChange: onChangePreset, value: preset })] })] }));
-};
-const MemoizedCalendarDropdown = memo(CalendarDropdown);
 const MemoizedDropdown = memo(QuillDropdownComponent);
 const areEqual = (prevProps, nextProps) => {
     // This function returns true if passing nextProps to render would return
     // the same result as passing prevProps to render, otherwise it returns false
-    // You can replace 'someProperty' with the actual prop you want to compare
-    return (prevProps.dateRange.length === nextProps.dateRange.length &&
-        prevProps.dateRange[0] === nextProps.dateRange[0] &&
-        prevProps.dateRange[1] === nextProps.dateRange[1]);
+    return (prevProps.dateRange.startDate === nextProps.dateRange.startDate &&
+        prevProps.dateRange.endDate === nextProps.dateRange.endDate);
 };
 const MemoizedDateRangePicker = memo(QuillDateRangePicker, areEqual);
 const QuillEmptyDashboardComponent = () => _jsx("div", {});
@@ -552,6 +154,7 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle =
     const { dispatch } = useContext(DashboardContext);
     const { isLoading: isDataLoading, data, reload, } = useDashboard(name);
     const [dashboardSections, setDashboardSections] = useState(null);
+    const [presetFilters, setPresetFilters] = useState(null);
     const { dashboard } = useContext(DashboardContext);
     const [client] = useContext(ClientContext);
     const [isLoading, setIsLoading] = useState(isDataLoading);
@@ -573,19 +176,45 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle =
         setDashboardSections(resp.sections);
         const bigFilterObj = {};
         if (resp.dateFilter && Object.keys(resp.dateFilter).length) {
-            const key = resp.dateFilter.defaultPrimaryRange ?? 'LAST_6_MONTHS';
+            let presetsOptions = defaultOptionsV2;
+            if (resp.dateFilter.presetRanges) {
+                presetsOptions = resp.dateFilter.presetRanges.map((elem) => {
+                    if (!elem.isStatic) {
+                        return {
+                            label: elem.label,
+                            value: elem.value,
+                            startDate: PRIMARY_RANGE[elem.value].start,
+                            endDate: PRIMARY_RANGE[elem.value].end,
+                        };
+                    }
+                    return {
+                        label: elem.label,
+                        value: elem.value,
+                        startDate: new Date(elem.startDate),
+                        endDate: new Date(elem.endDate),
+                    };
+                });
+            }
+            setPresetFilters(presetsOptions);
+            const key = resp.dateFilter?.primaryRange?.value || 'LAST_6_MONTHS';
+            const primaryPreset = presetsOptions.find((option) => {
+                return option.value === key;
+            });
             const filter = {
-                startDate: PRIMARY_RANGE[key]?.start,
-                endDate: PRIMARY_RANGE[key]?.end,
+                startDate: primaryPreset.startDate,
+                endDate: primaryPreset.endDate,
                 filterType: 'date_range',
-                selectedValue: [
-                    PRIMARY_RANGE[key]?.start,
-                    PRIMARY_RANGE[key]?.end,
-                    PRIMARY_CODES[key],
-                ],
-                options: options,
+                options: presetsOptions.map((elem) => {
+                    return {
+                        label: elem.label,
+                        value: elem.value,
+                    };
+                }),
                 field: 'date_range',
                 label: 'Date',
+                preset: {
+                    label: primaryPreset.label,
+                },
             };
             if (resp.dateFilter.comparison) {
                 filter.comparison = true;
@@ -609,13 +238,12 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle =
                 });
             }
             bigFilterObj[filter.field] = filter;
-            setDateFilter(PRIMARY_OPTIONS.find((opt) => opt.value === resp.dateFilter.defaultPrimaryRange)?.text ?? null);
+            setDateFilter(presetsOptions.find((opt) => opt.value === resp.dateFilter.defaultPrimaryRange)?.label ?? null);
         }
         if (resp.filters && resp.filters.length) {
             Object.values(resp.filters)
                 .filter((filter) => filter.filterType !== 'date')
                 .forEach((filter) => {
-                // processFilter(filter);
                 bigFilterObj[filter.field] = processFilter(filter);
             });
         }
@@ -647,18 +275,6 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle =
             });
         }
     };
-    const onChangeDateFilter = (dateFilter) => {
-        // setGlobalDateFilter(dateFilter[0], dateFilter[1]);
-        dashboardFiltersDispatch({
-            type: 'ADD_DASHBOARD_FILTER',
-            id: 'date_range',
-            data: {
-                startDate: dateFilter[0],
-                endDate: dateFilter[1],
-                filterType: 'date_range',
-            },
-        });
-    };
     function removeQuotes(str) {
         if (str.startsWith('"') && str.endsWith('"')) {
             return str.slice(1, -1);
@@ -683,22 +299,13 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle =
             };
         }
         if (filter.filterType === 'date' || filter.filterType === 'date_range') {
-            if (value[2]) {
-                selectedElem = filter.options.find((elem) => {
-                    return value[2] === elem[removeQuotes(filter.field)][2];
-                });
-                if (selectedElem) {
-                    selectedValue = selectedElem[removeQuotes(filter.field)];
-                }
-            }
             return {
                 startDate: value ? value[0] : filter.startDate,
                 endDate: value ? value[1] : filter.endDate,
                 filterType: 'date_range',
                 label: 'Date',
-                ...(selectedValue ? { selectedValue } : {}),
                 field: 'date_range',
-                options: options,
+                options: filter.options,
             };
         }
     };
@@ -723,35 +330,32 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle =
             return;
         }
         if (filter.filterType === 'date' || filter.filterType === 'date_range') {
-            if (value && value[2]) {
-                selectedElem = filter.options.find((elem) => {
-                    return value[2] === elem[removeQuotes(filter.field)][2];
-                });
-                if (selectedElem) {
-                    selectedValue = selectedElem[removeQuotes(filter.field)];
-                }
-            }
             if (comparison ||
                 (filter.comparison && filter.comparisonRange.value !== 'NO_COMPARISON')) {
+                let preset = '';
                 if (comparison) {
-                    selectedValue = filter.selectedValue;
+                    preset = filter.preset.label;
                 }
                 const key = comparison?.value || filter.comparisonRange.value;
-                const primaryRange = {
-                    start: value ? value[0] : filter.startDate,
-                    end: value ? value[1] : filter.endDate,
+                let primaryRange = {
+                    start: value ? value.startDate : filter.startDate,
+                    end: value ? value.endDate : filter.endDate,
                 };
+                if (value && value.preset) {
+                    preset = value.preset;
+                    primaryRange = getRangeFromPresetOptions(value.preset, presetFilters);
+                }
                 dashboardFiltersDispatch({
                     type: 'ADD_DASHBOARD_FILTER',
                     id: 'date_range',
                     data: {
-                        startDate: value ? value[0] : filter.startDate,
-                        endDate: value ? value[1] : filter.endDate,
+                        startDate: primaryRange.start,
+                        endDate: primaryRange.end,
                         filterType: 'date_range',
                         label: 'Date',
-                        ...(selectedValue ? { selectedValue } : {}),
                         field: 'date_range',
-                        options: options,
+                        preset: { label: preset },
+                        options: filter.options,
                         comparison: true,
                         comparisonRange: {
                             startDate: COMPARISON_RANGE[key](primaryRange)
@@ -763,17 +367,24 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle =
                 });
             }
             else {
+                const primaryRange = value.preset
+                    ? getRangeFromPresetOptions(value.preset, presetFilters)
+                    : {
+                        start: value.startDate || filter.startDate,
+                        end: value.endDate || filter.endDate,
+                    };
+                const preset = value.preset ? value.preset : '';
                 dashboardFiltersDispatch({
                     type: 'ADD_DASHBOARD_FILTER',
                     id: 'date_range',
                     data: {
                         ...filter,
-                        startDate: value ? value[0] : filter.startDate,
-                        endDate: value ? value[1] : filter.endDate,
+                        preset: { label: preset },
+                        startDate: primaryRange.start,
+                        endDate: primaryRange.end,
                         filterType: 'date_range',
-                        ...(selectedValue ? { selectedValue } : {}),
                         field: 'date_range',
-                        options: options,
+                        options: filter.options,
                         label: 'Date',
                     },
                 });
@@ -831,7 +442,7 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle =
                         flexDirection: 'row',
                         alignItems: 'center',
                         gap: 12,
-                    }, children: sortedFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, filterValue: dashboardFilters, SelectComponent: SelectComponent ? SelectComponent : MemoizedDropdown, DateRangePickerComponent: DateRangePickerComponent
+                    }, children: sortedFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent ? SelectComponent : MemoizedDropdown, DateRangePickerComponent: DateRangePickerComponent
                             ? DateRangePickerComponent
                             : MemoizedDateRangePicker }, index))) }) })), Object.keys(dashboardSections)
                 .sort(function (a, b) {
@@ -874,6 +485,6 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle =
                                             height: '400px',
                                         }, chartId: item._id, colors: theme.chartColors?.length
                                             ? theme.chartColors
-                                            : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }) }, `${item.name}${index}`)) }))) }))] }, section + '' + sectionIndex));
+                                            : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }) })) }, `${item.name}${index}`))) }))] }, section + '' + sectionIndex));
             })] }));
 }