@quillsql/react 2.13.7 → 2.13.9

package/dist/esm/Dashboard.js

@@ -15,7 +15,7 @@ import { QuillDateRangePicker } from './DateRangePicker/QuillDateRangePicker';
 import DataLoader, { ChartDataLoader, } from './components/Dashboard/DataLoader';
 import { QuillEmptyDashboardComponent, QuillFilterContainerComponent, QuillLoadingDashboardComponent, QuillModalComponent, MemoizedButton, MemoizedSecondaryButton, QuillTextInput, MemoizedPopover, QuillErrorMessageComponent, } from './components/UiComponents';
 import { DashboardFilter } from './components/Dashboard/DashboardFilter';
-import { BoolOperator, FieldTypes, NullOperator, NumberOperator, StringOperator, } from './models/Filter';
+import { BoolOperator, convertCustomFilter, FieldType, NullOperator, NumberOperator, StringOperator, } from './models/Filter';
 import { QuillMultiSelectComponentWithCombo } from './components/QuillMultiSelectWithCombo';
 import { QuillSelectComponentWithCombo } from './components/QuillSelectWithCombo';
 import { getUniqueStringValues } from './utils/tableProcessing';
@@ -53,7 +53,7 @@ const sortByOrdering = (a, b) => {
     return a.order - b.order;
 };
 const customOperatorOptions = {
-    [FieldTypes.Number]: [
+    [FieldType.Number]: [
         NumberOperator.EqualTo,
         NumberOperator.NotEqualTo,
         NumberOperator.GreaterThan,
@@ -63,7 +63,7 @@ const customOperatorOptions = {
         NullOperator.IsNotNull,
         NullOperator.IsNull,
     ],
-    [FieldTypes.String]: [
+    [FieldType.String]: [
         StringOperator.IsExactly,
         StringOperator.IsNotExactly,
         StringOperator.Contains,
@@ -72,7 +72,7 @@ const customOperatorOptions = {
         NullOperator.IsNotNull,
         NullOperator.IsNull,
     ],
-    [FieldTypes.Boolean]: [
+    [FieldType.Boolean]: [
         BoolOperator.EqualTo,
         BoolOperator.NotEqualTo,
         NullOperator.IsNotNull,
@@ -110,11 +110,22 @@ const customOperatorOptions = {
  * ### API Reference
  * @see https://docs.quillsql.com/components/dashboard
  */
-export default function Dashboard({ name, hidden = false, SelectComponent = QuillSelectComponentWithCombo, MultiSelectComponent = QuillMultiSelectComponentWithCombo, ModalComponent = QuillModalComponent, ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, FilterTagComponent = QuillFilterPopover, PopoverComponent = MemoizedPopover, TextInputComponent = QuillTextInput, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent = QuillDateRangePicker, MetricComponent = QuillMetricComponent, ChartComponent = QuillChartComponent, TableComponent = QuillTableComponent, TemplateMetricComponent = QuillTemplateMetricComponent, TemplateChartComponent = QuillTemplateChartComponent, TemplateTableComponent = QuillTemplateTableComponent, DashboardSectionComponent = DashboardSection, DashboardSectionContainerComponent = DashboardSectionContainer, FilterContainerComponent = QuillFilterContainerComponent, DashboardLoadingComponent = QuillLoadingDashboardComponent, ErrorComponent = QuillChartErrorWithAction, onClickReport, hoverActions, onChangeLoading, hideFilters, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', containerStyle, className, chartContainerStyle = defaultChartContainerStyles, 
-// TODO: do something with these custom filters
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-filters, onClickChartElement, dateBucket, additionalProcessing, hideAdminErrors = true, templateDashboardName, pagination = { rowsPerPage: 10, rowsPerRequest: 50 }, }) {
-    const { isLoading, data, isDashboardFilterLoading, dashboardFilters: populatedDashboardFilters, reload, } = useDashboard(name);
+export default function Dashboard({ name, hidden = false, SelectComponent = QuillSelectComponentWithCombo, MultiSelectComponent = QuillMultiSelectComponentWithCombo, ModalComponent = QuillModalComponent, ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, FilterTagComponent = QuillFilterPopover, PopoverComponent = MemoizedPopover, TextInputComponent = QuillTextInput, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent = QuillDateRangePicker, MetricComponent = QuillMetricComponent, ChartComponent = QuillChartComponent, TableComponent = QuillTableComponent, TemplateMetricComponent = QuillTemplateMetricComponent, TemplateChartComponent = QuillTemplateChartComponent, TemplateTableComponent = QuillTemplateTableComponent, DashboardSectionComponent = DashboardSection, DashboardSectionContainerComponent = DashboardSectionContainer, FilterContainerComponent = QuillFilterContainerComponent, DashboardLoadingComponent = QuillLoadingDashboardComponent, ErrorComponent = QuillChartErrorWithAction, onClickReport, hoverActions, onChangeLoading, hideFilters, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', containerStyle, className, chartContainerStyle = defaultChartContainerStyles, filters, onUserFiltersUpdated, onClickChartElement, dateBucket, additionalProcessing, hideAdminErrors = true, templateDashboardName, pagination = { rowsPerPage: 10, rowsPerRequest: 50 }, }) {
+    const [userFilters, setUserFilters] = useState({});
+    useEffect(() => {
+        onUserFiltersUpdated?.(Object.values(userFilters));
+    }, [userFilters]);
+    const { isLoading, data, isDashboardFilterLoading, dashboardFilters: populatedDashboardFilters, reload, } = useDashboard(name, (filters?.map((f) => convertCustomFilter(f)) ?? []).concat(Object.values(userFilters) ?? []));
+    const mounted = useRef(false);
+    useEffect(() => {
+        if (!mounted.current) {
+            mounted.current = true;
+            return;
+        }
+        reload(name, false, undefined, {
+            filters: populatedDashboardFilters ?? [],
+        });
+    }, [filters, userFilters]);
     const [client, isClientLoading] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
     const [schemaData] = useContext(SchemaDataContext);
@@ -131,8 +142,10 @@ filters, onClickChartElement, dateBucket, additionalProcessing, hideAdminErrors
                     return {
                         label: elem.label,
                         value: elem.value,
-                        startDate: PRIMARY_RANGE[elem.value].start,
-                        endDate: PRIMARY_RANGE[elem.value].end,
+                        startDate: PRIMARY_RANGE[elem.value]?.startDate ??
+                            PRIMARY_RANGE['LAST_30_DAYS'].startDate,
+                        endDate: PRIMARY_RANGE[elem.value]?.endDate ??
+                            PRIMARY_RANGE['LAST_30_DAYS'].endDate,
                     };
                 }
                 return {
@@ -144,10 +157,11 @@ filters, onClickChartElement, dateBucket, additionalProcessing, hideAdminErrors
             }) ?? defaultOptionsV2)
             : defaultOptionsV2;
     }, [populatedDashboardFilters]);
-    const [userFilters, setUserFilters] = useState({});
     // A filter value can either be a string, an array of strings for a multiselect, or a date range (that could have a comparison range)
     const [filterValues, setFilterValues] = useState({});
     const prevClientIdRef = useRef(undefined);
+    const addFilterPopoverButtonRef = useRef(null);
+    const viewFiltersPopoverButtonRef = useRef(null);
     useEffect(() => {
         setFilterValues({});
         const clientIdChanged = prevClientIdRef.current !== client?.organizationId;
@@ -191,12 +205,7 @@ filters, onClickChartElement, dateBucket, additionalProcessing, hideAdminErrors
             .flatMap((section) => section.map((chart) => chart.referencedTables))
             .flat();
         if (tables && tables.length > 0) {
-            let intersection = new Set(tables[0]);
-            for (let i = 1; i < tables.length; ++i) {
-                const currentSet = new Set(tables[i]);
-                intersection = new Set(Array.from(intersection).filter((value) => currentSet.has(value)));
-            }
-            const tablesList = Array.from(intersection);
+            const tablesList = Array.from(new Set(tables));
             setReferencedTables(tablesList);
             // get all columns from the intersected tables
             const columns = tablesList
@@ -220,7 +229,7 @@ filters, onClickChartElement, dateBucket, additionalProcessing, hideAdminErrors
         }
     }, [data?.sections, schemaData.schema]);
     const handleOnClickDashboardItem = (elem) => onClickReport && onClickReport({ ...elem, _id: elem.id });
-    const updateFilter = (filter, value = null, comparison = null) => {
+    const updateFilter = (filter, value, comparison) => {
         if (!populatedDashboardFilters)
             return;
         let filterValue = {};
@@ -253,23 +262,25 @@ filters, onClickChartElement, dateBucket, additionalProcessing, hideAdminErrors
                 const key = comparison?.value ||
                     (filter.comparisonRange?.value ?? 'NO_COMPARISON');
                 let primaryRange = {
-                    start: value ? value.startDate : filter.startDate,
-                    end: value ? value.endDate : filter.endDate,
+                    startDate: value ? value.startDate : filter.startDate,
+                    endDate: value ? value.endDate : filter.endDate,
                 };
                 if (value && value.preset) {
                     preset = value.preset;
                     primaryRange = getRangeFromPresetOptions(value.preset, presetOptions);
                 }
                 filterValue = {
-                    startDate: primaryRange.start,
-                    endDate: primaryRange.end,
+                    startDate: primaryRange.startDate,
+                    endDate: primaryRange.endDate,
                     preset: {
                         label: presetOptions.find((o) => o.value === preset)?.label ?? preset,
                         value: preset,
                     },
                     comparisonRange: {
-                        startDate: COMPARISON_RANGE[key](primaryRange)?.start,
-                        endDate: COMPARISON_RANGE[key](primaryRange)?.end,
+                        startDate: COMPARISON_RANGE[key](primaryRange)
+                            ?.startDate,
+                        endDate: COMPARISON_RANGE[key](primaryRange)
+                            ?.endDate,
                         value: key,
                     },
                 };
@@ -282,14 +293,17 @@ filters, onClickChartElement, dateBucket, additionalProcessing, hideAdminErrors
                 const primaryRange = value && value.preset
                     ? getRangeFromPresetOptions(value.preset, presetOptions)
                     : {
-                        start: value?.startDate || filter.startDate,
-                        end: value?.endDate || filter.endDate,
+                        startDate: value?.startDate || filter.startDate,
+                        endDate: value?.endDate || filter.endDate,
                     };
                 const preset = value?.preset ? value.preset : '';
                 filterValue = {
-                    startDate: primaryRange.start,
-                    endDate: primaryRange.end,
-                    preset: { label: preset, value: preset },
+                    startDate: primaryRange.startDate,
+                    endDate: primaryRange.endDate,
+                    preset: {
+                        label: presetOptions.find((o) => o.value === preset)?.label ?? preset,
+                        value: preset,
+                    },
                 };
                 setFilterValues((filterValues) => ({
                     ...filterValues,
@@ -344,31 +358,25 @@ filters, onClickChartElement, dateBucket, additionalProcessing, hideAdminErrors
     if (hidden || isLoading || isClientLoading || !data?.sections) {
         return (_jsx(DashboardLoadingComponent, { containerStyle: containerStyle, chartContainerStyle: chartContainerStyle }));
     }
-    return (_jsxs("div", { className: className, ...styleToProps(containerStyle), children: [data &&
-                data.customFiltersEnabled &&
-                !hideAdminErrors &&
-                !hideFilters &&
-                data &&
-                data.customFiltersEnabled &&
-                filterSchema &&
-                filterSchema.columns.length === 0 && (_jsx("div", { style: { marginBottom: 10 }, children: _jsx(QuillErrorMessageComponent, { errorMessage: "Warning: No custom filter options because there are no common views among the charts in the dashboard" }) })), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [!hideFilters && (_jsxs(FilterContainerComponent, { children: [(populatedDashboardFilters ?? []).map((filter) => (_jsx(DashboardFilter, { filter: {
+    return (_jsxs("div", { className: className, ...styleToProps(containerStyle), children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [!hideFilters && (_jsxs(FilterContainerComponent, { children: [(populatedDashboardFilters ?? []).map((filter) => (_jsx(DashboardFilter, { filter: {
                                     ...filter,
                                     ...(filter.filterType === 'date_range' && {
                                         options: presetOptions,
                                     }),
                                     ...filterValues[filter.label],
-                                }, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent, isLoading: isDashboardFilterLoading(filter.label) }, filter.label + name))), _jsxs("div", { style: {
+                                }, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent, isLoading: isDashboardFilterLoading(filter.label) }, filter.label + name))), data?.customFiltersEnabled &&
+                                Object.values(userFilters).length === 0 && (_jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'column',
-                                }, children: [data && data.customFiltersEnabled && (_jsx(SecondaryButtonComponent, { onClick: () => {
+                                }, ref: viewFiltersPopoverButtonRef, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
                                             if (fieldValuesIsLoaded) {
-                                                setAddFilterPopoverIsOpen(true);
+                                                setAddFilterPopoverIsOpen(!addFilterPopoverIsOpen);
                                                 setFilterListIsOpen(false);
                                             }
-                                        }, label: `Add Filter` })), _jsx(PopoverComponent, { isOpen: addFilterPopoverIsOpen, setIsOpen: setAddFilterPopoverIsOpen, popoverTitle: "Add Filter", popoverChildren: _jsx(FilterModal, { schema: filterSchema, fieldValuesMap: fieldValuesMap, onSubmitFilter: (filter) => {
+                                        }, label: `Add Filter` }), _jsx(PopoverComponent, { isOpen: addFilterPopoverIsOpen, setIsOpen: setAddFilterPopoverIsOpen, popoverTitle: "Add Filter", ignoredRefs: [viewFiltersPopoverButtonRef], popoverChildren: _jsx(FilterModal, { schema: filterSchema, fieldValuesMap: fieldValuesMap, onSubmitFilter: (filter) => {
                                                 setAddFilterPopoverIsOpen(false);
                                                 updateUserFilter(filter);
-                                            }, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, TextInputComponent: TextInputComponent }), containerStyle: { position: 'relative', top: 10 } })] }), Object.values(userFilters).length > 0 && (_jsx(ModalComponent, { triggerLabel: `Filters${Object.values(userFilters).length > 0 ? ` (${Object.values(userFilters).length})` : ''}`, isOpen: filterListIsOpen, setIsOpen: setFilterListIsOpen, title: "Filters", children: _jsxs("div", { style: {
+                                            }, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, TextInputComponent: TextInputComponent }), containerStyle: { position: 'relative', top: 10 } })] })), Object.values(userFilters).length > 0 && (_jsx(ModalComponent, { triggerLabel: `Filters${Object.values(userFilters).length > 0 ? ` (${Object.values(userFilters).length})` : ''}`, isOpen: filterListIsOpen, setIsOpen: setFilterListIsOpen, title: "Filters", children: _jsxs("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'column',
                                         alignItems: 'start',
@@ -379,14 +387,8 @@ filters, onClickChartElement, dateBucket, additionalProcessing, hideAdminErrors
                                                 operator: filter.operator,
                                                 value: filter.value,
                                             }, filterLabel: filter ? filterSentence(filter) : '', index: index, fieldValuesMap: fieldValuesMap, customOperatorOptions: customOperatorOptions, FilterTagComponent: FilterTagComponent, FilterModal: FilterModal, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent, handleFilterSave: (newFilter) => {
-                                                // TODO: Implement user filters with new filter structure
-                                                getUserFilter(newFilter, filter._id, filter);
-                                                // console.log('updated filter', updatedFilter);
-                                                // dashboardFiltersDispatch({
-                                                //   type: 'UPDATE_DASHBOARD_FILTER',
-                                                //   id: updatedFilter.id,
-                                                //   data: updatedFilter,
-                                                // });
+                                                const userFilter = getUserFilter(newFilter, filter._id, filter);
+                                                updateUserFilter(userFilter);
                                             }, handleFilterDelete: () => {
                                                 setUserFilters((userFilters) => {
                                                     const updatedFilters = { ...userFilters };
@@ -396,15 +398,23 @@ filters, onClickChartElement, dateBucket, additionalProcessing, hideAdminErrors
                                             }, containerStyle: { width: 300, marginBottom: 10 } }, `userFilter_${index}_${filter ? filterSentence(filter) : ''}`))), _jsxs("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'column',
-                                            }, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                            }, ref: addFilterPopoverButtonRef, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
                                                         if (fieldValuesIsLoaded) {
-                                                            setFilterListAddFilterPopoverIsOpen(true);
+                                                            setFilterListAddFilterPopoverIsOpen(!filterListAddFilterPopoverIsOpen);
                                                         }
-                                                    }, label: `Add Filter` }), _jsx(PopoverComponent, { isOpen: filterListAddFilterPopoverIsOpen, setIsOpen: setFilterListAddFilterPopoverIsOpen, popoverTitle: "Add Filter", popoverChildren: _jsx(FilterModal, { schema: filterSchema, fieldValuesMap: fieldValuesMap, onSubmitFilter: (filter) => {
+                                                    }, label: `Add Filter` }), _jsx(PopoverComponent, { isOpen: filterListAddFilterPopoverIsOpen, setIsOpen: setFilterListAddFilterPopoverIsOpen, popoverTitle: "Add Filter", ignoredRefs: [addFilterPopoverButtonRef], popoverChildren: _jsx(FilterModal, { schema: filterSchema, fieldValuesMap: fieldValuesMap, onSubmitFilter: (filter) => {
                                                             setFilterListAddFilterPopoverIsOpen(false);
                                                             setFilterListIsOpen(false);
                                                             updateUserFilter(filter);
-                                                        }, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, TextInputComponent: TextInputComponent }), containerStyle: { position: 'relative', top: 10 } })] })] }) }))] })), templateDashboardName && (_jsx(QuillDashboardTemplate, { name: templateDashboardName, originDashboard: name, client: client, appliedFilters: populatedDashboardFilters, ModalComponent: ModalComponent, TemplateChartComponent: TemplateChartComponent, TemplateMetricComponent: TemplateMetricComponent, TemplateTableComponent: TemplateTableComponent, ButtonComponent: SecondaryButtonComponent }))] }), Object.keys(data.sections)
+                                                        }, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, TextInputComponent: TextInputComponent }), containerStyle: { position: 'relative', top: 10 } })] })] }) }))] })), templateDashboardName && (_jsx(QuillDashboardTemplate, { name: templateDashboardName, originDashboard: name, client: client, appliedFilters: populatedDashboardFilters, ModalComponent: ModalComponent, TemplateChartComponent: TemplateChartComponent, TemplateMetricComponent: TemplateMetricComponent, TemplateTableComponent: TemplateTableComponent, ButtonComponent: SecondaryButtonComponent }))] }), data &&
+                data.customFiltersEnabled &&
+                !hideAdminErrors &&
+                !hideFilters &&
+                filterSchema.columns.length === 0 && (_jsx(QuillErrorMessageComponent, { errorMessage: "No custom filter options because there are no common views among the charts in the dashboard", containerStyle: {
+                    marginBottom: 16,
+                    marginTop: -6,
+                    maxWidth: 'fit-content',
+                } })), Object.keys(data.sections)
                 .sort(function (a, b) {
                 return a.length - b.length;
             })
@@ -418,7 +428,7 @@ filters, onClickChartElement, dateBucket, additionalProcessing, hideAdminErrors
                                         textAlign: 'left',
                                         marginTop: 12,
                                     }, children: section })] })), metrics(data.sections, section, sortByOrdering).length > 0 && (_jsx(DashboardSectionComponent, { section: "metrics", children: metrics(data.sections, section, sortByOrdering).map((item) => {
-                                return (_jsx(DataLoader, { item: item, filters: populatedDashboardFilters, additionalProcessing: {
+                                return (_jsx(DataLoader, { item: item, filters: populatedDashboardFilters ?? [], userFilters: (filters?.map((f) => convertCustomFilter(f)) ?? []).concat(Object.values(userFilters)), additionalProcessing: {
                                         page: DEFAULT_PAGINATION,
                                         last: additionalProcessing?.last,
                                     }, children: ({ isLoading, error, data, }) => (_jsx(MetricComponent, { error: error, isLoading: isLoading, report: data, onClick: !isLoading && onClickReport
@@ -430,7 +440,7 @@ filters, onClickChartElement, dateBucket, additionalProcessing, hideAdminErrors
                             }) })), charts(data.sections, section, sortByOrdering).length > 0 && (_jsx(DashboardSectionComponent, { section: "charts", children: charts(data.sections, section, sortByOrdering).map((item) => (_jsx(ChartDataLoader, { item: item, dateBucket: dateBucket, additionalProcessing: {
                                     page: pagination,
                                     last: additionalProcessing?.last,
-                                }, filters: populatedDashboardFilters, children: ({ isLoading, data, error, dateBucket, }) => (_jsx(ChartComponent, { report: data, error: error, onClick: () => {
+                                }, filters: populatedDashboardFilters ?? [], userFilters: (filters?.map((f) => convertCustomFilter(f)) ?? []).concat(Object.values(userFilters)), children: ({ isLoading, data, error, dateBucket, }) => (_jsx(ChartComponent, { report: data, error: error, onClick: () => {
                                         if (!isLoading && onClickReport) {
                                             handleOnClickDashboardItem({
                                                 ...item,
@@ -442,7 +452,7 @@ filters, onClickChartElement, dateBucket, additionalProcessing, hideAdminErrors
                                             height: 300,
                                         } })) : (_jsx(ChartDisplay, { reportId: data.id, config: data, loading: isLoading, containerStyle: chartContainerStyle, colors: theme.chartColors?.length
                                             ? theme.chartColors
-                                            : undefined, scrollable: false, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle, onClickChartElement: onClickChartElement })) }, 'chart' + item.name + '' + item.id)) }, `chart${item.id}`))) })), tables(data.sections, section, sortByOrdering).length > 0 && (_jsx(DashboardSectionComponent, { section: "tables", children: tables(data.sections, section, sortByOrdering).map((item) => (_jsx(DataLoader, { item: item, filters: populatedDashboardFilters, additionalProcessing: {
+                                            : undefined, scrollable: false, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle, onClickChartElement: onClickChartElement })) }, 'chart' + item.name + '' + item.id)) }, `chart${item.id}`))) })), tables(data.sections, section, sortByOrdering).length > 0 && (_jsx(DashboardSectionComponent, { section: "tables", children: tables(data.sections, section, sortByOrdering).map((item) => (_jsx(DataLoader, { item: item, filters: populatedDashboardFilters ?? [], userFilters: (filters?.map((f) => convertCustomFilter(f)) ?? []).concat(Object.values(userFilters)), additionalProcessing: {
                                     page: pagination,
                                     last: additionalProcessing?.last,
                                 }, children: ({ isLoading, error, onPageChange, onSortChange, data, rowCount, rowCountIsLoading, }) => (_jsx(TableComponent, { report: data, isLoading: isLoading, error: error, onClick: !isLoading && onClickReport

package/dist/esm/DateRangePicker/QuillDateRangePicker.d.ts

@@ -4,8 +4,8 @@ export interface DateRangePickerComponentProps {
     label?: string;
     selectWidth?: number;
     dateRange: {
-        startDate: Date;
-        endDate: Date;
+        startDate?: Date;
+        endDate?: Date;
     };
     presetOptions: {
         label: string;

package/dist/esm/DateRangePicker/QuillDateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillDateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/QuillDateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,WAAW,EAKZ,MAAM,OAAO,CAAC;AAmBf,MAAM,WAAW,6BAA6B;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE;QAAE,SAAS,EAAE,IAAI,CAAC;QAAC,OAAO,EAAE,IAAI,CAAA;KAAE,CAAC;IAC9C,aAAa,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAClD,iBAAiB,EAAE,CAAC,EAClB,SAAS,EACT,OAAO,GACR,EAAE;QACD,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;KACf,KAAK,IAAI,CAAC;IACX,cAAc,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,IAAI,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,EACN,KAAK,EACL,WAAW,EACX,UAAU,GACX,EAAE,6BAA6B,2CAoJ/B"}
+{"version":3,"file":"QuillDateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/QuillDateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,WAAW,EAKZ,MAAM,OAAO,CAAC;AAmBf,MAAM,WAAW,6BAA6B;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE;QAAE,SAAS,CAAC,EAAE,IAAI,CAAC;QAAC,OAAO,CAAC,EAAE,IAAI,CAAA;KAAE,CAAC;IAChD,aAAa,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAClD,iBAAiB,EAAE,CAAC,EAClB,SAAS,EACT,OAAO,GACR,EAAE;QACD,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;KACf,KAAK,IAAI,CAAC;IACX,cAAc,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,IAAI,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,EACN,KAAK,EACL,WAAW,EACX,UAAU,GACX,EAAE,6BAA6B,2CAoJ/B"}

package/dist/esm/DateRangePicker/dateRangePickerUtils.d.ts

@@ -9,8 +9,8 @@ export declare const parseEndDate: (endDate: Date | null | undefined, maxDate: D
  * A simple date range that spans from start to end.
  */
 type QuillDateRange = {
-    start: Date;
-    end: Date;
+    startDate: Date;
+    endDate: Date;
 };
 /**
  * A simple map between the primary range key and the QuillDateRange for that
@@ -18,8 +18,8 @@ type QuillDateRange = {
  */
 export declare const PRIMARY_RANGE: {
     [key: string]: QuillDateRange | {
-        start: undefined;
-        end: undefined;
+        startDate: undefined;
+        endDate: undefined;
     };
 };
 /**
@@ -38,21 +38,21 @@ export declare const COMPARISON_OPTIONS: {
  * comparison range) and returns a QuillDateRange based on that key and date.
  */
 export declare const COMPARISON_RANGE: {
-    readonly PREV_PERIOD: ({ start, end }: QuillDateRange) => {
-        start: Date;
-        end: Date;
+    readonly PREV_PERIOD: ({ startDate, endDate }: QuillDateRange) => {
+        startDate: Date;
+        endDate: Date;
     };
-    readonly PREV_7_DAYS: ({ start }: QuillDateRange) => {
-        start: Date;
-        end: Date;
+    readonly PREV_7_DAYS: ({ startDate }: QuillDateRange) => {
+        startDate: Date;
+        endDate: Date;
     };
-    readonly PREV_30_DAYS: ({ start }: QuillDateRange) => {
-        start: Date;
-        end: Date;
+    readonly PREV_30_DAYS: ({ startDate }: QuillDateRange) => {
+        startDate: Date;
+        endDate: Date;
     };
-    readonly PREV_90_DAYS: ({ start }: QuillDateRange) => {
-        start: Date;
-        end: Date;
+    readonly PREV_90_DAYS: ({ startDate }: QuillDateRange) => {
+        startDate: Date;
+        endDate: Date;
     };
     readonly NO_COMPARISON: () => null;
 };
@@ -67,11 +67,11 @@ export declare const getRangeFromPresetOptions: (preset: string, presetOptions:
     startDate: Date;
     endDate: Date;
 }[]) => {
-    start: Date;
-    end: Date;
+    startDate: Date;
+    endDate: Date;
 } | {
-    start: null;
-    end: null;
+    startDate: null;
+    endDate: null;
 };
 export declare const getDateStyles: (theme: any, date: Date, finalStartDate: Date | null, finalEndDate: Date | null, hoveredDate: Date | undefined, isDateDisabled: boolean) => any;
 export declare const displaySelected: (selectedStartDay: Date | null, selectedEndDay: Date | null) => string | undefined;

package/dist/esm/DateRangePicker/dateRangePickerUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dateRangePickerUtils.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/dateRangePickerUtils.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAG/D,eAAO,MAAM,WAAW,WAAY,MAAM,aAKzC,CAAC;AAEF,eAAO,MAAM,UAAU,MAAO,MAAM,UAAU,MAAM,WAEnD,CAAC;AAEF,eAAO,MAAM,2BAA2B,kBACvB,MAAM,GAAG,IAAI,GAAG,SAAS,oBACtB,qBAAqB,EAAE,gBAU1C,CAAC;AAEF,eAAO,MAAM,yBAAyB,kBACrB,MAAM,GAAG,IAAI,GAAG,SAAS,oBACtB,qBAAqB,EAAE,SAU1C,CAAC;AAEF,eAAO,MAAM,cAAc,cACd,IAAI,GAAG,IAAI,GAAG,SAAS,WACzB,IAAI,GAAG,IAAI,GAAG,SAAS,yBACT,MAAM,GAAG,IAAI,GAAG,SAAS,mBAC/B,qBAAqB,EAAE,gBAWzC,CAAC;AAEF,eAAO,MAAM,YAAY,YACd,IAAI,GAAG,IAAI,GAAG,SAAS,WACvB,IAAI,GAAG,IAAI,GAAG,SAAS,yBACT,MAAM,GAAG,IAAI,GAAG,SAAS,mBAC/B,qBAAqB,EAAE,gBASzC,CAAC;AAEF;;GAEG;AACH,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,EAAE,IAAI,CAAC;CACX,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG;QAAE,KAAK,EAAE,SAAS,CAAC;QAAC,GAAG,EAAE,SAAS,CAAA;KAAE,CAAC;CAatE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,OAAO,aAAa,GAAG,MAAM,CAAA;CAStE,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,EAqBA,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;2CACG,cAAc;;;;sCAInB,cAAc;;;;uCAIb,cAAc;;;;uCAId,cAAc;;;;;CAKhC,CAAC;AACX,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAE/D,eAAO,MAAM,gBAAgB,EAAE,GAAG,EAiDjC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,qBAAqB,EAyCjD,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,qBAAqB,EA+BvD,CAAC;AAEF,eAAO,MAAM,kBAAkB,WAAY,MAAM,6BAOhD,CAAC;AAEF,eAAO,MAAM,yBAAyB,WAC5B,MAAM,iBACC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,IAAI,CAAC;CACf,EAAE;;;;;;CAQJ,CAAC;AAEF,eAAO,MAAM,aAAa,UACjB,GAAG,QACJ,IAAI,kBACM,IAAI,GAAG,IAAI,gBACb,IAAI,GAAG,IAAI,eACZ,IAAI,GAAG,SAAS,kBACb,OAAO,QAgCxB,CAAC;AAkGF,eAAO,MAAM,eAAe,qBACR,IAAI,GAAG,IAAI,kBACb,IAAI,GAAG,IAAI,uBA0C5B,CAAC;AAmGF,eAAO,MAAM,mBAAmB,cACnB,IAAI,GAAG,IAAI,WACb,IAAI,GAAG,IAAI,WACX,MAAM,WAyChB,CAAC"}
+{"version":3,"file":"dateRangePickerUtils.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/dateRangePickerUtils.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAG/D,eAAO,MAAM,WAAW,WAAY,MAAM,aAKzC,CAAC;AAEF,eAAO,MAAM,UAAU,MAAO,MAAM,UAAU,MAAM,WAEnD,CAAC;AAEF,eAAO,MAAM,2BAA2B,kBACvB,MAAM,GAAG,IAAI,GAAG,SAAS,oBACtB,qBAAqB,EAAE,gBAU1C,CAAC;AAEF,eAAO,MAAM,yBAAyB,kBACrB,MAAM,GAAG,IAAI,GAAG,SAAS,oBACtB,qBAAqB,EAAE,SAU1C,CAAC;AAEF,eAAO,MAAM,cAAc,cACd,IAAI,GAAG,IAAI,GAAG,SAAS,WACzB,IAAI,GAAG,IAAI,GAAG,SAAS,yBACT,MAAM,GAAG,IAAI,GAAG,SAAS,mBAC/B,qBAAqB,EAAE,gBAWzC,CAAC;AAEF,eAAO,MAAM,YAAY,YACd,IAAI,GAAG,IAAI,GAAG,SAAS,WACvB,IAAI,GAAG,IAAI,GAAG,SAAS,yBACT,MAAM,GAAG,IAAI,GAAG,SAAS,mBAC/B,qBAAqB,EAAE,gBASzC,CAAC;AAEF;;GAEG;AACH,KAAK,cAAc,GAAG;IACpB,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,IAAI,CAAC;CACf,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG;QAAE,SAAS,EAAE,SAAS,CAAC;QAAC,OAAO,EAAE,SAAS,CAAA;KAAE,CAAC;CAyB9E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,OAAO,aAAa,GAAG,MAAM,CAAA;CAStE,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,EAqBA,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;mDACW,cAAc;;;;0CAIvB,cAAc;;;;2CAIb,cAAc;;;;2CAId,cAAc;;;;;CAKpC,CAAC;AACX,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAE/D,eAAO,MAAM,gBAAgB,EAAE,GAAG,EAiDjC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,qBAAqB,EAyCjD,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,qBAAqB,EA+BvD,CAAC;AAEF,eAAO,MAAM,kBAAkB,WAAY,MAAM,6BAOhD,CAAC;AAEF,eAAO,MAAM,yBAAyB,WAC5B,MAAM,iBACC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,IAAI,CAAC;CACf,EAAE;;;;;;CAQJ,CAAC;AAEF,eAAO,MAAM,aAAa,UACjB,GAAG,QACJ,IAAI,kBACM,IAAI,GAAG,IAAI,gBACb,IAAI,GAAG,IAAI,eACZ,IAAI,GAAG,SAAS,kBACb,OAAO,QAgCxB,CAAC;AAkGF,eAAO,MAAM,eAAe,qBACR,IAAI,GAAG,IAAI,kBACb,IAAI,GAAG,IAAI,uBA0C5B,CAAC;AAmGF,eAAO,MAAM,mBAAmB,cACnB,IAAI,GAAG,IAAI,WACb,IAAI,GAAG,IAAI,WACX,MAAM,WAyChB,CAAC"}

package/dist/esm/DateRangePicker/dateRangePickerUtils.js

@@ -45,17 +45,29 @@ export const parseEndDate = (endDate, maxDate, selectedDropdownValue, dropdownOp
  * key ending on today.
  */
 export const PRIMARY_RANGE = {
-    THIS_WEEK: { start: startOfWeek(startOfToday()), end: endOfToday() },
-    THIS_MONTH: { start: startOfMonth(startOfToday()), end: endOfToday() },
-    THIS_YEAR: { start: startOfYear(startOfToday()), end: endOfToday() },
-    LAST_7_DAYS: { start: sub(startOfToday(), { days: 7 }), end: endOfToday() },
-    LAST_30_DAYS: { start: sub(startOfToday(), { days: 30 }), end: endOfToday() },
-    LAST_90_DAYS: { start: sub(startOfToday(), { days: 90 }), end: endOfToday() },
+    THIS_WEEK: { startDate: startOfWeek(startOfToday()), endDate: endOfToday() },
+    THIS_MONTH: {
+        startDate: startOfMonth(startOfToday()),
+        endDate: endOfToday(),
+    },
+    THIS_YEAR: { startDate: startOfYear(startOfToday()), endDate: endOfToday() },
+    LAST_7_DAYS: {
+        startDate: sub(startOfToday(), { days: 7 }),
+        endDate: endOfToday(),
+    },
+    LAST_30_DAYS: {
+        startDate: sub(startOfToday(), { days: 30 }),
+        endDate: endOfToday(),
+    },
+    LAST_90_DAYS: {
+        startDate: sub(startOfToday(), { days: 90 }),
+        endDate: endOfToday(),
+    },
     LAST_6_MONTHS: {
-        start: sub(startOfToday(), { months: 6 }),
-        end: endOfToday(),
+        startDate: sub(startOfToday(), { months: 6 }),
+        endDate: endOfToday(),
     },
-    ALL_TIME: { start: undefined, end: undefined },
+    ALL_TIME: { startDate: undefined, endDate: undefined },
 };
 /**
  * Maps between the keys of primary range and the short code.
@@ -98,21 +110,21 @@ export const COMPARISON_OPTIONS = [
  * comparison range) and returns a QuillDateRange based on that key and date.
  */
 export const COMPARISON_RANGE = {
-    PREV_PERIOD: ({ start, end }) => ({
-        start: sub(start, { days: differenceInDays(end, start) }),
-        end: start,
+    PREV_PERIOD: ({ startDate, endDate }) => ({
+        startDate: sub(startDate, { days: differenceInDays(endDate, startDate) }),
+        endDate: startDate,
     }),
-    PREV_7_DAYS: ({ start }) => ({
-        start: sub(start, { days: 7 }),
-        end: start,
+    PREV_7_DAYS: ({ startDate }) => ({
+        startDate: sub(startDate, { days: 7 }),
+        endDate: startDate,
     }),
-    PREV_30_DAYS: ({ start }) => ({
-        start: sub(start, { days: 30 }),
-        end: start,
+    PREV_30_DAYS: ({ startDate }) => ({
+        startDate: sub(startDate, { days: 30 }),
+        endDate: startDate,
     }),
-    PREV_90_DAYS: ({ start }) => ({
-        start: sub(start, { days: 90 }),
-        end: start,
+    PREV_90_DAYS: ({ startDate }) => ({
+        startDate: sub(startDate, { days: 90 }),
+        endDate: startDate,
     }),
     NO_COMPARISON: () => null,
 };
@@ -120,123 +132,123 @@ export const defaultOptionsV2 = [
     {
         value: 'THIS_WEEK',
         label: 'This week',
-        startDate: PRIMARY_RANGE['THIS_WEEK']?.start,
-        endDate: PRIMARY_RANGE['THIS_WEEK']?.end,
+        startDate: PRIMARY_RANGE['THIS_WEEK']?.startDate,
+        endDate: PRIMARY_RANGE['THIS_WEEK']?.endDate,
     },
     {
         value: 'THIS_MONTH',
         label: 'This month',
-        startDate: PRIMARY_RANGE['THIS_MONTH']?.start,
-        endDate: PRIMARY_RANGE['THIS_MONTH']?.end,
+        startDate: PRIMARY_RANGE['THIS_MONTH']?.startDate,
+        endDate: PRIMARY_RANGE['THIS_MONTH']?.endDate,
     },
     {
         value: 'THIS_YEAR',
         label: 'This year',
-        startDate: PRIMARY_RANGE['THIS_YEAR']?.start,
-        endDate: PRIMARY_RANGE['THIS_YEAR']?.end,
+        startDate: PRIMARY_RANGE['THIS_YEAR']?.startDate,
+        endDate: PRIMARY_RANGE['THIS_YEAR']?.endDate,
     },
     {
         value: 'LAST_7_DAYS',
         label: 'Last 7 days',
-        startDate: PRIMARY_RANGE['LAST_7_DAYS']?.start,
-        endDate: PRIMARY_RANGE['LAST_7_DAYS']?.end,
+        startDate: PRIMARY_RANGE['LAST_7_DAYS']?.startDate,
+        endDate: PRIMARY_RANGE['LAST_7_DAYS']?.endDate,
     },
     {
         value: 'LAST_30_DAYS',
         label: 'Last 30 days',
-        startDate: PRIMARY_RANGE['LAST_30_DAYS']?.start,
-        endDate: PRIMARY_RANGE['LAST_30_DAYS']?.end,
+        startDate: PRIMARY_RANGE['LAST_30_DAYS']?.startDate,
+        endDate: PRIMARY_RANGE['LAST_30_DAYS']?.endDate,
     },
     {
         value: 'LAST_90_DAYS',
         label: 'Last 90 days',
-        startDate: PRIMARY_RANGE['LAST_90_DAYS']?.start,
-        endDate: PRIMARY_RANGE['LAST_90_DAYS']?.end,
+        startDate: PRIMARY_RANGE['LAST_90_DAYS']?.startDate,
+        endDate: PRIMARY_RANGE['LAST_90_DAYS']?.endDate,
     },
     {
         value: 'LAST_6_MONTHS',
         label: 'Last 6 months',
-        startDate: PRIMARY_RANGE['LAST_6_MONTHS']?.start,
-        endDate: PRIMARY_RANGE['LAST_6_MONTHS']?.end,
+        startDate: PRIMARY_RANGE['LAST_6_MONTHS']?.startDate,
+        endDate: PRIMARY_RANGE['LAST_6_MONTHS']?.endDate,
     },
     {
         value: 'ALL_TIME',
         label: 'All time',
-        startDate: PRIMARY_RANGE['ALL_TIME']?.start,
-        endDate: PRIMARY_RANGE['ALL_TIME']?.end,
+        startDate: PRIMARY_RANGE['ALL_TIME']?.startDate,
+        endDate: PRIMARY_RANGE['ALL_TIME']?.endDate,
     },
 ];
 export const defaultOptions = [
     {
         value: 'wk',
         text: 'This week',
-        startDate: PRIMARY_RANGE['THIS_WEEK']?.start,
+        startDate: PRIMARY_RANGE['THIS_WEEK']?.startDate,
     },
     {
         value: 'm',
         text: 'This month',
-        startDate: PRIMARY_RANGE['THIS_MONTH']?.start,
+        startDate: PRIMARY_RANGE['THIS_MONTH']?.startDate,
     },
     {
         value: 'y',
         text: 'This year',
-        startDate: PRIMARY_RANGE['THIS_YEAR']?.start,
+        startDate: PRIMARY_RANGE['THIS_YEAR']?.startDate,
     },
     {
         value: 'w',
         text: 'Last 7 days',
-        startDate: PRIMARY_RANGE['LAST_7_DAYS']?.start,
+        startDate: PRIMARY_RANGE['LAST_7_DAYS']?.startDate,
     },
     {
         value: 't',
         text: 'Last 30 days',
-        startDate: PRIMARY_RANGE['LAST_30_DAYS']?.start,
+        startDate: PRIMARY_RANGE['LAST_30_DAYS']?.startDate,
     },
     {
         value: '90d',
         text: 'Last 90 days',
-        startDate: PRIMARY_RANGE['LAST_90_DAYS']?.start,
+        startDate: PRIMARY_RANGE['LAST_90_DAYS']?.startDate,
     },
     {
         value: '6m',
         text: 'Last 6 months',
-        startDate: PRIMARY_RANGE['LAST_6_MONTHS']?.start,
+        startDate: PRIMARY_RANGE['LAST_6_MONTHS']?.startDate,
     },
     {
         value: 'at',
         text: 'All time',
-        startDate: PRIMARY_RANGE['ALL_TIME']?.start,
+        startDate: PRIMARY_RANGE['ALL_TIME']?.startDate,
     },
 ];
 export const reportBuilderOptions = [
     {
         value: 'w',
         text: 'Last 7 days',
-        startDate: PRIMARY_RANGE['LAST_7_DAYS']?.start,
+        startDate: PRIMARY_RANGE['LAST_7_DAYS']?.startDate,
         dayInterval: 7,
     },
     {
         value: 't',
         text: 'Last 30 days',
-        startDate: PRIMARY_RANGE['LAST_30_DAYS']?.start,
+        startDate: PRIMARY_RANGE['LAST_30_DAYS']?.startDate,
         dayInterval: 30,
     },
     {
         value: '90d',
         text: 'Last 90 days',
-        startDate: PRIMARY_RANGE['LAST_90_DAYS']?.start,
+        startDate: PRIMARY_RANGE['LAST_90_DAYS']?.startDate,
         dayInterval: 90,
     },
     {
         value: '6m',
         text: 'Last 6 months',
-        startDate: PRIMARY_RANGE['LAST_6_MONTHS']?.start,
+        startDate: PRIMARY_RANGE['LAST_6_MONTHS']?.startDate,
         dayInterval: 180,
     },
     {
         value: 'at',
         text: 'All time',
-        startDate: PRIMARY_RANGE['ALL_TIME']?.start,
+        startDate: PRIMARY_RANGE['ALL_TIME']?.startDate,
         dayInterval: 36500,
     },
 ];
@@ -251,10 +263,10 @@ export const getRangeFromPreset = (preset) => {
 export const getRangeFromPresetOptions = (preset, presetOptions) => {
     const foundPreset = presetOptions.find((elem) => elem.value === preset);
     if (foundPreset) {
-        return { start: foundPreset?.startDate, end: foundPreset?.endDate };
+        return { startDate: foundPreset?.startDate, endDate: foundPreset?.endDate };
     }
     else {
-        return { start: null, end: null };
+        return { startDate: null, endDate: null };
     }
 };
 export const getDateStyles = (theme, date, finalStartDate, finalEndDate, hoveredDate, isDateDisabled) => {