@quillsql/react 2.10.17 → 2.10.18

package/dist/cjs/Dashboard.js

@@ -3,16 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.QuillDateRangePicker = exports.DashboardFilter = exports.PRIMARY_OPTIONS = exports.COMPARISON_OPTIONS = void 0;
+exports.DashboardFilter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Chart_1 = __importDefault(require("./Chart"));
 const dateRangePickerUtils_1 = require("./DateRangePicker/dateRangePickerUtils");
 const Context_1 = require("./Context");
-const date_fns_1 = require("date-fns");
 const assets_1 = require("./assets");
-const hooks_1 = require("./hooks");
-const locale_1 = require("date-fns/locale");
 const useDashboard_1 = require("./hooks/useDashboard");
 const crypto_1 = require("./utils/crypto");
 const DashboardSectionContainer_1 = __importDefault(require("./components/Dashboard/DashboardSectionContainer"));
@@ -22,71 +19,21 @@ const ChartComponent_1 = __importDefault(require("./components/Dashboard/ChartCo
 const DashboardSection_1 = __importDefault(require("./components/Dashboard/DashboardSection"));
 const styles_1 = require("./utils/styles");
 const dashboard_1 = require("./utils/dashboard");
+const QuillDateRangePicker_1 = require("./DateRangePicker/QuillDateRangePicker");
 const DataLoader_1 = __importDefault(require("./components/Dashboard/DataLoader"));
-exports.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',
-    },
-];
-exports.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',
-};
+const QuillSelect_1 = require("./components/QuillSelect");
 function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePickerComponent, theme, }) {
     const { comparisonRange, setComparisonRange } = (0, Context_1.useComparisonRange)();
     const { setDateFilter } = (0, Context_1.useDateFilter)();
     const [filterValue, setFilterValue] = (0, react_1.useState)(null);
     (0, react_1.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 = exports.COMPARISON_OPTIONS.find((option) => {
+                const newComparisonRange = dateRangePickerUtils_1.COMPARISON_OPTIONS.find((option) => {
                     return option.value === filter.comparisonRange.value;
                 });
                 setComparisonRange(newComparisonRange);
@@ -97,7 +44,7 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePic
         }
     }, [filter]);
     if (filter.filterType === 'string') {
-        return ((0, jsx_runtime_1.jsx)(SelectComponent, { label: filter.label, value: filterValue, onChange: (e) => {
+        return ((0, jsx_runtime_1.jsx)(QuillSelect_1.QuillSelectComponent, { theme: theme, label: filter.label, value: filterValue, onChange: (e) => {
                 onChangeFilter(filter, e);
             }, options: [
                 ...filter.options.map((elem) => {
@@ -113,31 +60,14 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePic
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'flex-end',
-            }, children: [(0, jsx_runtime_1.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 = (0, dateRangePickerUtils_1.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: dateRangePickerUtils_1.defaultOptions }), comparisonRange && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: {
+            }, children: [(0, jsx_runtime_1.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 || dateRangePickerUtils_1.defaultOptions }), comparisonRange && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',
@@ -146,11 +76,12 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePic
                                     paddingRight: 12,
                                     color: theme?.secondaryTextColor,
                                     fontFamily: theme?.fontFamily,
-                                }, children: "compared to" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: comparisonRange.value, onChange: (e) => {
-                                    onChangeFilter(filter, null, exports.COMPARISON_OPTIONS.find((option) => {
+                                    fontSize: 14,
+                                }, children: "compared to" }), (0, jsx_runtime_1.jsx)(QuillSelect_1.QuillSelectComponent, { theme: theme, value: comparisonRange.value, onChange: (e) => {
+                                    onChangeFilter(filter, null, dateRangePickerUtils_1.COMPARISON_OPTIONS.find((option) => {
                                         return option.value === e;
                                     }));
-                                }, options: exports.COMPARISON_OPTIONS.map((compareOption) => {
+                                }, options: dateRangePickerUtils_1.COMPARISON_OPTIONS.map((compareOption) => {
                                     return {
                                         value: compareOption.value,
                                         label: compareOption.text,
@@ -160,32 +91,6 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePic
     return null;
 }
 exports.DashboardFilter = DashboardFilter;
-const options = [
-    {
-        date_range: [(0, date_fns_1.startOfWeek)((0, date_fns_1.startOfToday)()), (0, date_fns_1.startOfToday)(), 'wk'],
-    },
-    {
-        date_range: [(0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 90 }), (0, date_fns_1.startOfToday)(), '90d'],
-    },
-    {
-        date_range: [(0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 30 }), (0, date_fns_1.startOfToday)(), 't'],
-    },
-    {
-        date_range: [(0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { years: 100 }), (0, date_fns_1.startOfToday)(), 'at'],
-    },
-    {
-        date_range: [(0, date_fns_1.startOfYear)((0, date_fns_1.startOfToday)()), (0, date_fns_1.startOfToday)(), 'y'],
-    },
-    {
-        date_range: [(0, date_fns_1.startOfMonth)((0, date_fns_1.startOfToday)()), (0, date_fns_1.startOfToday)(), 'm'],
-    },
-    {
-        date_range: [(0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 7 }), (0, date_fns_1.startOfToday)(), 'w'],
-    },
-    {
-        date_range: [(0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { months: 6 }), (0, date_fns_1.startOfToday)(), '6m'],
-    },
-];
 const QuillDropdownComponent = ({ onChange, value, label, options, }) => {
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const handleOnChange = (0, react_1.useCallback)((event) => {
@@ -231,320 +136,14 @@ const QuillDropdownComponent = ({ onChange, value, label, options, }) => {
                             color: theme?.secondaryTextColor,
                         }, "aria-hidden": "true" })] })] }));
 };
-const isBetween = (date, startDate, endDate) => {
-    return (0, date_fns_1.isAfter)(date, startDate) && (0, date_fns_1.isBefore)(date, endDate);
-};
-function Calendar({ anchorDate, onClickDate, theme, localStartDate, localEndDate, }) {
-    const firstDayOfDisplayedMonth = (0, date_fns_1.startOfMonth)(anchorDate);
-    const lastDayOfDisplayedMonth = (0, date_fns_1.endOfMonth)(anchorDate);
-    const weekdays = (0, dateRangePickerUtils_1.getWeekdays)(locale_1.enUS).map((dayName) => (0, dateRangePickerUtils_1.capitalize)(dayName, locale_1.enUS));
-    const displayedDates = (0, date_fns_1.eachDayOfInterval)({
-        start: (0, date_fns_1.isSunday)(firstDayOfDisplayedMonth)
-            ? firstDayOfDisplayedMonth
-            : (0, date_fns_1.previousSunday)(firstDayOfDisplayedMonth),
-        end: (0, date_fns_1.isSaturday)(lastDayOfDisplayedMonth)
-            ? lastDayOfDisplayedMonth
-            : (0, date_fns_1.nextSaturday)(lastDayOfDisplayedMonth),
-    });
-    const displayedTitle = (0, dateRangePickerUtils_1.capitalize)((0, date_fns_1.format)(firstDayOfDisplayedMonth, 'MMMM yyyy', { locale: locale_1.enUS }), locale_1.enUS);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            flex: 1,
-            // alignItems: 'center',
-        }, children: [(0, jsx_runtime_1.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 }), (0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%', display: 'flex', justifyContent: 'center' }, children: (0, jsx_runtime_1.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))) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
-                    borderRadius: 3,
-                    overflow: 'hidden',
-                    rowGap: 6,
-                }, children: displayedDates.map((date, index) => {
-                    return ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)("button", { style: {
-                                border: 'none',
-                                height: '34px',
-                                display: 'flex',
-                                width: '100%',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                fontFamily: theme?.fontFamily,
-                                fontSize: 13,
-                                background: (0, date_fns_1.isEqual)(localStartDate, date) || (0, date_fns_1.isEqual)(localEndDate, date)
-                                    ? theme.primaryTextColor
-                                    : isBetween(date, localStartDate, localEndDate)
-                                        ? '#F4F4F5'
-                                        : 'transparent',
-                                color: (0, date_fns_1.isEqual)(localStartDate, date) || (0, date_fns_1.isEqual)(localEndDate, date)
-                                    ? theme.backgroundColor
-                                    : theme.primaryTextColor,
-                                borderRadius: (0, date_fns_1.isEqual)(localStartDate, date) || (0, date_fns_1.isEqual)(localEndDate, date)
-                                    ? 3
-                                    : 0,
-                                ...isBeginningOrEndOfWeek(index),
-                            }, type: "button", onClick: () => {
-                                onClickDate(date);
-                            }, children: (0, jsx_runtime_1.jsx)("time", { dateTime: (0, date_fns_1.format)(date, 'yyyy-MM-dd', { locale: locale_1.enUS }), children: (0, date_fns_1.format)(date, 'd', { locale: locale_1.enUS }) }) }) }, date.toString()));
-                }) }), (0, jsx_runtime_1.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 ((0, date_fns_1.format)(dateRange[0], 'MMM dd, yyyy') +
-            ' - ' +
-            (0, date_fns_1.format)(dateRange[1], 'MMM dd, yyyy'));
-    }
-    if (localStartDate && localEndDate) {
-        return ((0, date_fns_1.format)(localStartDate, 'MMM dd, yyyy') +
-            ' - ' +
-            (0, date_fns_1.format)(localEndDate, 'MMM dd, yyyy'));
-    }
-    return '';
-};
-function CalendarDropdown({ onChangeDateRange, dateRange }) {
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
-    const [showModal, setShowModal] = (0, react_1.useState)(false);
-    const modalRef = (0, react_1.useRef)(null);
-    const parentRef = (0, react_1.useRef)(null);
-    const [anchorDate, setAnchorDate] = (0, react_1.useState)(null);
-    const [localStartDate, setLocalStartDate] = (0, react_1.useState)(null);
-    const [localEndDate, setLocalEndDate] = (0, react_1.useState)(null);
-    const prevMonthAnchor = (0, date_fns_1.subDays)((0, date_fns_1.startOfMonth)(anchorDate), 1);
-    const onClickDate = (date) => {
-        if (localStartDate && (0, date_fns_1.isBefore)(date, localStartDate)) {
-            setLocalStartDate(date);
-            return;
-        }
-        if (localEndDate && (0, date_fns_1.isAfter)(date, localEndDate)) {
-            setLocalEndDate(date);
-            return;
-        }
-        if (localEndDate && (0, date_fns_1.isBefore)(date, localEndDate)) {
-            setLocalEndDate(date);
-            return;
-        }
-        if ((0, date_fns_1.isEqual)(localStartDate, date) || (0, date_fns_1.isEqual)(localEndDate, date)) {
-            setLocalStartDate(null);
-            setLocalEndDate(null);
-        }
-        if (!localStartDate) {
-            setLocalStartDate(date);
-            return;
-        }
-        if (!localEndDate) {
-            setLocalEndDate(date);
-            return;
-        }
-    };
-    (0, react_1.useEffect)(() => {
-        if (localEndDate &&
-            localStartDate &&
-            (0, date_fns_1.isBefore)(localStartDate, localEndDate)) {
-            onChangeDateRange([localStartDate, localEndDate]);
-        }
-    }, [localEndDate, localStartDate]);
-    (0, react_1.useEffect)(() => {
-        if (dateRange.length && !anchorDate) {
-            setAnchorDate(dateRange[1]);
-        }
-    }, [dateRange, anchorDate]);
-    (0, hooks_1.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 ((0, jsx_runtime_1.jsxs)("div", { ref: parentRef, style: { position: 'relative', height: 38 }, children: [(0, jsx_runtime_1.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) }), (0, jsx_runtime_1.jsx)(assets_1.CalendarNormalIcon, { style: {
-                    height: '15px',
-                    width: '15px',
-                    flex: 'none',
-                    position: 'absolute',
-                    left: 12,
-                    top: 11,
-                    color: theme?.primaryTextColor,
-                } }), showModal && ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.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) => (0, date_fns_1.subDays)((0, date_fns_1.startOfMonth)(date), 1)), children: (0, jsx_runtime_1.jsx)(assets_1.ArrowLeftHeadIcon, { style: {
-                                height: '20px',
-                                width: '20px',
-                                color: theme?.secondaryTextColor,
-                            }, "aria-hidden": "true" }) }), (0, jsx_runtime_1.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) => (0, date_fns_1.addDays)((0, date_fns_1.endOfMonth)(date), 1)), children: (0, jsx_runtime_1.jsx)(assets_1.ArrowRightHeadIcon, { style: {
-                                height: '20px',
-                                width: '20px',
-                                color: theme?.secondaryTextColor,
-                            }, "aria-hidden": "true" }) }), anchorDate && ((0, jsx_runtime_1.jsx)(Calendar, { anchorDate: prevMonthAnchor, dateRange: dateRange, theme: theme, onClickDate: onClickDate, localStartDate: localStartDate, localEndDate: localEndDate })), anchorDate && ((0, jsx_runtime_1.jsx)(Calendar, { anchorDate: anchorDate, dateRange: dateRange, theme: theme, onClickDate: onClickDate, localStartDate: localStartDate, localEndDate: localEndDate }))] }))] }));
-}
-const QuillDateRangePicker = ({ label, dateRange, onChangeDateRange, presetOptions, preset, onChangePreset, }) => {
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [label !== '' && ((0, jsx_runtime_1.jsx)("div", { style: {
-                    marginBottom: 6,
-                    fontWeight: theme.labelFontWeight || '600',
-                    color: theme.secondaryTextColor,
-                    fontFamily: theme.fontFamily,
-                    fontSize: 14,
-                }, children: label })), (0, jsx_runtime_1.jsxs)("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 12,
-                }, children: [(0, jsx_runtime_1.jsx)(MemoizedCalendarDropdown, { dateRange: dateRange, onChangeDateRange: onChangeDateRange, theme: theme }), (0, jsx_runtime_1.jsx)(MemoizedDropdown, { options: presetOptions.map((option) => ({
-                            label: option.text,
-                            value: option.value,
-                        })), onChange: onChangePreset, value: preset })] })] }));
-};
-exports.QuillDateRangePicker = QuillDateRangePicker;
-const MemoizedCalendarDropdown = (0, react_1.memo)(CalendarDropdown);
 const MemoizedDropdown = (0, react_1.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 = (0, react_1.memo)(exports.QuillDateRangePicker, areEqual);
+const MemoizedDateRangePicker = (0, react_1.memo)(QuillDateRangePicker_1.QuillDateRangePicker, areEqual);
 const QuillEmptyDashboardComponent = () => (0, jsx_runtime_1.jsx)("div", {});
 const defaultChartContainerStyles = {
     display: 'flex',
@@ -560,6 +159,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartCon
     const { dispatch } = (0, react_1.useContext)(Context_1.DashboardContext);
     const { isLoading: isDataLoading, data, reload, } = (0, useDashboard_1.useDashboard)(name);
     const [dashboardSections, setDashboardSections] = (0, react_1.useState)(null);
+    const [presetFilters, setPresetFilters] = (0, react_1.useState)(null);
     const { dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
     const [isLoading, setIsLoading] = (0, react_1.useState)(isDataLoading);
@@ -581,19 +181,45 @@ function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartCon
         setDashboardSections(resp.sections);
         const bigFilterObj = {};
         if (resp.dateFilter && Object.keys(resp.dateFilter).length) {
-            const key = resp.dateFilter.defaultPrimaryRange ?? 'LAST_6_MONTHS';
+            let presetsOptions = dateRangePickerUtils_1.defaultOptionsV2;
+            if (resp.dateFilter.presetRanges) {
+                presetsOptions = resp.dateFilter.presetRanges.map((elem) => {
+                    if (!elem.isStatic) {
+                        return {
+                            label: elem.label,
+                            value: elem.value,
+                            startDate: dateRangePickerUtils_1.PRIMARY_RANGE[elem.value].start,
+                            endDate: dateRangePickerUtils_1.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: dateRangePickerUtils_1.PRIMARY_RANGE[key]?.start,
-                endDate: dateRangePickerUtils_1.PRIMARY_RANGE[key]?.end,
+                startDate: primaryPreset.startDate,
+                endDate: primaryPreset.endDate,
                 filterType: 'date_range',
-                selectedValue: [
-                    dateRangePickerUtils_1.PRIMARY_RANGE[key]?.start,
-                    dateRangePickerUtils_1.PRIMARY_RANGE[key]?.end,
-                    dateRangePickerUtils_1.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;
@@ -617,13 +243,12 @@ function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartCon
                 });
             }
             bigFilterObj[filter.field] = filter;
-            setDateFilter(exports.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);
             });
         }
@@ -655,18 +280,6 @@ function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartCon
             });
         }
     };
-    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);
@@ -691,22 +304,13 @@ function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartCon
             };
         }
         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,
             };
         }
     };
@@ -731,35 +335,32 @@ function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartCon
             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 = (0, dateRangePickerUtils_1.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: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)
@@ -771,17 +372,24 @@ function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartCon
                 });
             }
             else {
+                const primaryRange = value.preset
+                    ? (0, dateRangePickerUtils_1.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',
                     },
                 });
@@ -839,7 +447,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartCon
                         flexDirection: 'row',
                         alignItems: 'center',
                         gap: 12,
-                    }, children: sortedFilters.map((filter, index) => ((0, jsx_runtime_1.jsx)(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, filterValue: dashboardFilters, SelectComponent: SelectComponent ? SelectComponent : MemoizedDropdown, DateRangePickerComponent: DateRangePickerComponent
+                    }, children: sortedFilters.map((filter, index) => ((0, jsx_runtime_1.jsx)(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent ? SelectComponent : MemoizedDropdown, DateRangePickerComponent: DateRangePickerComponent
                             ? DateRangePickerComponent
                             : MemoizedDateRangePicker }, index))) }) })), Object.keys(dashboardSections)
                 .sort(function (a, b) {
@@ -882,7 +490,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartCon
                                             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));
             })] }));
 }
 exports.default = Dashboard;