@quillsql/react 2.9.1 → 2.9.2

package/dist/Dashboard.js

@@ -1,48 +1,19 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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.COMPARISON_OPTIONS = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-const react_1 = __importStar(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 Modal_1 = __importDefault(require("./components/Modal/Modal"));
-const contexts_1 = require("./contexts");
-const Dropdown_1 = require("./components/Dropdown");
-const assets_1 = require("./assets");
-const hooks_1 = require("./hooks");
-const locale_1 = require("date-fns/locale");
-const useDashboard_1 = require("./hooks/useDashboard");
-exports.COMPARISON_OPTIONS = [
+import React, { useContext, useEffect, useState, useRef, useCallback, } from 'react';
+import Chart from './Chart';
+import { capitalize, defaultOptions, getWeekdays, getRangeFromPreset, PRIMARY_RANGE, COMPARISON_RANGE, PRIMARY_CODES, } 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 Modal from './components/Modal/Modal';
+import { HoveredValueContext, SelectedValueContext } from './contexts';
+import { DropdownItem } from './components/Dropdown';
+import { ArrowDownHeadIcon, ArrowLeftHeadIcon, ArrowRightHeadIcon, CalendarNormalIcon, } from './assets';
+import { useInternalState, useOnClickOutside, useSelectOnKeyDown, } from './hooks';
+import { enUS } from 'date-fns/locale';
+import { useDashboard } from './hooks/useDashboard';
+export const COMPARISON_OPTIONS = [
     {
         value: 'PREV_PERIOD',
         text: 'Previous Period',
@@ -64,10 +35,31 @@ exports.COMPARISON_OPTIONS = [
         text: 'No comparison',
     },
 ];
-function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePickerComponent, theme, }) {
-    const [comparisonValue, setComparisonValue] = (0, react_1.useState)('');
-    const [filterValue, setFilterValue] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
+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',
+};
+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) {
@@ -79,14 +71,21 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePic
         else if (filter.filterType === 'string') {
             setFilterValue(filter.selectedValue);
         }
-        if (filter.comparison) {
-            setComparisonValue(exports.COMPARISON_OPTIONS.find((option) => {
-                return option.value === filter.comparisonRange.value;
-            }).value);
+        if (filter.filterType == 'date_range') {
+            setDateFilter(FILTER_CODE_MAP[filter.selectedValue ? filter.selectedValue[2] : null]);
+            if (filter?.comparisonRange?.value) {
+                const newComparisonRange = COMPARISON_OPTIONS.find((option) => {
+                    return option.value === filter.comparisonRange.value;
+                });
+                setComparisonRange(newComparisonRange);
+            }
+            else {
+                setComparisonRange(null);
+            }
         }
     }, [filter]);
     if (filter.filterType === 'string') {
-        return ((0, jsx_runtime_1.jsx)(SelectComponent, { label: filter.label, value: filterValue, onChange: (e) => {
+        return (_jsx(SelectComponent, { label: filter.label, value: filterValue, onChange: (e) => {
                 onChangeFilter(filter, e);
             }, options: [
                 ...filter.options.map((elem) => {
@@ -98,11 +97,11 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePic
             ] }));
     }
     if (filter.filterType == 'date_range') {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: {
+        return (_jsxs("div", { style: {
                 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, 
+            }, 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]);
@@ -111,7 +110,7 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePic
                         ? filterValue[2]
                         : '', onChangePreset: (preset) => {
                         if (typeof preset === 'string') {
-                            const fullPreset = (0, dateRangePickerUtils_1.getRangeFromPreset)(preset);
+                            const fullPreset = getRangeFromPreset(preset);
                             onChangeFilter(filter, fullPreset);
                             setFilterValue(fullPreset);
                             return;
@@ -126,19 +125,19 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePic
                             new Date(),
                             preset?.value || '',
                         ]);
-                    }, presetOptions: dateRangePickerUtils_1.defaultOptions }), filter.comparison && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                    }, presetOptions: defaultOptions }), comparisonRange && (_jsx("div", { children: _jsxs("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',
-                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                        }, children: [_jsx("div", { style: {
                                     paddingLeft: 16,
                                     paddingRight: 12,
                                     color: theme.secondaryTextColor,
-                                }, children: "compared to" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: comparisonValue, onChange: (e) => {
-                                    onChangeFilter(filter, null, exports.COMPARISON_OPTIONS.find((option) => {
+                                }, children: "compared to" }), _jsx(SelectComponent, { value: comparisonRange.value, onChange: (e) => {
+                                    onChangeFilter(filter, null, COMPARISON_OPTIONS.find((option) => {
                                         return option.value === e;
                                     }));
-                                }, options: exports.COMPARISON_OPTIONS.map((compareOption) => {
+                                }, options: COMPARISON_OPTIONS.map((compareOption) => {
                                     return {
                                         value: compareOption.value,
                                         label: compareOption.text,
@@ -147,45 +146,44 @@ 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: [startOfWeek(startOfToday()), startOfToday(), 'wk'],
     },
     {
-        date_range: [(0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 90 }), (0, date_fns_1.startOfToday)(), '90d'],
+        date_range: [sub(startOfToday(), { days: 90 }), startOfToday(), '90d'],
     },
     {
-        date_range: [(0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 30 }), (0, date_fns_1.startOfToday)(), 't'],
+        date_range: [sub(startOfToday(), { days: 30 }), startOfToday(), 't'],
     },
     {
-        date_range: [(0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { years: 100 }), (0, date_fns_1.startOfToday)(), 'at'],
+        date_range: [sub(startOfToday(), { years: 100 }), startOfToday(), 'at'],
     },
     {
-        date_range: [(0, date_fns_1.startOfYear)((0, date_fns_1.startOfToday)()), (0, date_fns_1.startOfToday)(), 'y'],
+        date_range: [startOfYear(startOfToday()), startOfToday(), 'y'],
     },
     {
-        date_range: [(0, date_fns_1.startOfMonth)((0, date_fns_1.startOfToday)()), (0, date_fns_1.startOfToday)(), 'm'],
+        date_range: [startOfMonth(startOfToday()), startOfToday(), 'm'],
     },
     {
-        date_range: [(0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 7 }), (0, date_fns_1.startOfToday)(), 'w'],
+        date_range: [sub(startOfToday(), { days: 7 }), startOfToday(), 'w'],
     },
     {
-        date_range: [(0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { months: 6 }), (0, date_fns_1.startOfToday)(), '6m'],
+        date_range: [sub(startOfToday(), { months: 6 }), startOfToday(), '6m'],
     },
 ];
 const QuillDropdownComponent = ({ onChange, value, label, options, }) => {
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
-    const handleOnChange = (0, react_1.useCallback)((event) => {
+    const [theme] = useContext(ThemeContext);
+    const handleOnChange = useCallback((event) => {
         onChange(event.target.value);
     }, [onChange]);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [label && ((0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsxs("div", { children: [label && (_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: { position: 'relative', height: 38 }, children: [(0, jsx_runtime_1.jsxs)("select", { onChange: handleOnChange, value: value ?? '', id: 'reportbuilderdropdown', 
+                }, children: label })), _jsxs("div", { style: { position: 'relative', height: 38 }, children: [_jsxs("select", { onChange: handleOnChange, value: value ?? '', id: 'reportbuilderdropdown', 
                         // defaultValue="Select"
                         style: {
                             width: '100%',
@@ -209,7 +207,7 @@ const QuillDropdownComponent = ({ onChange, value, label, options, }) => {
                             fontSize: 14,
                             fontWeight: 500,
                             boxSizing: 'border-box',
-                        }, children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Select" }), options.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label }, option.label + index)))] }), (0, jsx_runtime_1.jsx)(assets_1.ArrowDownHeadIcon, { style: {
+                        }, children: [_jsx("option", { value: "", children: "Select" }), options.map((option, index) => (_jsx("option", { value: option.value, children: option.label }, option.label + index)))] }), _jsx(ArrowDownHeadIcon, { style: {
                             height: '20px',
                             width: '20px',
                             flex: 'none',
@@ -220,27 +218,27 @@ const QuillDropdownComponent = ({ onChange, value, label, options, }) => {
                         }, "aria-hidden": "true" })] })] }));
 };
 const isBetween = (date, startDate, endDate) => {
-    return (0, date_fns_1.isAfter)(date, startDate) && (0, date_fns_1.isBefore)(date, endDate);
+    return isAfter(date, startDate) && isBefore(date, endDate);
 };
 function Calendar({ anchorDate, selectedDateRange, 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)
+    const firstDayOfDisplayedMonth = startOfMonth(anchorDate);
+    const lastDayOfDisplayedMonth = endOfMonth(anchorDate);
+    const weekdays = getWeekdays(enUS).map((dayName) => capitalize(dayName, enUS));
+    const displayedDates = eachDayOfInterval({
+        start: isSunday(firstDayOfDisplayedMonth)
             ? firstDayOfDisplayedMonth
-            : (0, date_fns_1.previousSunday)(firstDayOfDisplayedMonth),
-        end: (0, date_fns_1.isSaturday)(lastDayOfDisplayedMonth)
+            : previousSunday(firstDayOfDisplayedMonth),
+        end: isSaturday(lastDayOfDisplayedMonth)
             ? lastDayOfDisplayedMonth
-            : (0, date_fns_1.nextSaturday)(lastDayOfDisplayedMonth),
+            : 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: {
+    const displayedTitle = capitalize(format(firstDayOfDisplayedMonth, 'MMMM yyyy', { locale: enUS }), enUS);
+    return (_jsxs("div", { style: {
             display: 'flex',
             flexDirection: 'column',
             flex: 1,
             // alignItems: 'center',
-        }, children: [(0, jsx_runtime_1.jsx)("h2", { style: {
+        }, children: [_jsx("h2", { style: {
                     color: theme?.textColor || '#364153',
                     fontSize: '13px',
                     fontFamily: theme?.fontFamily,
@@ -254,7 +252,7 @@ function Calendar({ anchorDate, selectedDateRange, onClickDate, theme, localStar
                     justifyContent: 'center',
                     marginBottom: 3,
                     marginTop: 6,
-                }, children: displayedTitle }), (0, jsx_runtime_1.jsx)("div", { style: {
+                }, children: displayedTitle }), _jsx("div", { style: {
                     color: theme?.primaryTextColor || '#364153',
                     textAlign: 'center',
                     fontSize: 12,
@@ -262,7 +260,7 @@ function Calendar({ anchorDate, selectedDateRange, onClickDate, theme, localStar
                     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: {
+                }, children: weekdays.map((dayName) => (_jsx("div", { style: { width: '100%', display: 'flex', justifyContent: 'center' }, children: _jsx("div", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center',
@@ -271,22 +269,14 @@ function Calendar({ anchorDate, selectedDateRange, onClickDate, theme, localStar
                             fontFamily: theme?.fontFamily,
                             color: theme.secondaryTextColor,
                             paddingBottom: 4,
-                        }, children: dayName }) }, dayName))) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        }, 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) => {
-                    // const isCurrentDateDisabled = isDateDisabled(
-                    //   date,
-                    //   minDate,
-                    //   maxDate,
-                    //   firstDayOfDisplayedMonth,
-                    //   lastDayOfDisplayedMonth
-                    // );
-                    // console.log(localStartDate === date, localStartDate, date);
-                    return ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)("button", { style: {
+                    return (_jsx("div", { style: { width: '100%' }, children: _jsx("button", { style: {
                                 border: 'none',
                                 height: '34px',
                                 display: 'flex',
@@ -295,22 +285,22 @@ function Calendar({ anchorDate, selectedDateRange, onClickDate, theme, localStar
                                 justifyContent: 'center',
                                 fontFamily: theme?.fontFamily,
                                 fontSize: 13,
-                                background: (0, date_fns_1.isEqual)(localStartDate, date) || (0, date_fns_1.isEqual)(localEndDate, date)
+                                background: isEqual(localStartDate, date) || 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)
+                                color: isEqual(localStartDate, date) || isEqual(localEndDate, date)
                                     ? theme.backgroundColor
                                     : theme.primaryTextColor,
-                                borderRadius: (0, date_fns_1.isEqual)(localStartDate, date) || (0, date_fns_1.isEqual)(localEndDate, date)
+                                borderRadius: isEqual(localStartDate, date) || 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 } })] }));
+                            }, 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
@@ -327,48 +317,48 @@ function isBeginningOrEndOfWeek(num) {
 }
 const formatDateText = (dateRange, localStartDate, localEndDate) => {
     if (dateRange.length && dateRange[0] && dateRange[1]) {
-        return ((0, date_fns_1.format)(dateRange[0], 'MMM dd, yyyy') +
+        return (format(dateRange[0], 'MMM dd, yyyy') +
             ' - ' +
-            (0, date_fns_1.format)(dateRange[1], 'MMM dd, yyyy'));
+            format(dateRange[1], 'MMM dd, yyyy'));
     }
     if (localStartDate && localEndDate) {
-        return ((0, date_fns_1.format)(localStartDate, 'MMM dd, yyyy') +
+        return (format(localStartDate, 'MMM dd, yyyy') +
             ' - ' +
-            (0, date_fns_1.format)(localEndDate, 'MMM dd, yyyy'));
+            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 handleOnChange = (0, react_1.useCallback)((event) => {
+    const [theme] = useContext(ThemeContext);
+    const [showModal, setShowModal] = useState(false);
+    const modalRef = useRef(null);
+    const parentRef = useRef(null);
+    const handleOnChange = useCallback((event) => {
         onChangeDateRange(event.target.value);
     }, [onChangeDateRange]);
-    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 [anchorDate, setAnchorDate] = useState(null);
+    const [localStartDate, setLocalStartDate] = useState(null);
+    const [localEndDate, setLocalEndDate] = useState(null);
     // const firstDayOfFirstMonth = startOfMonth(value[0]);
     // const lastDayOfLastMonth = endOfMonth(value[1]);
     // const weekdays = getWeekdays(enUS).map(dayName =>
     //   capitalize(dayName, locale)
     // );
-    const prevMonthAnchor = (0, date_fns_1.subDays)((0, date_fns_1.startOfMonth)(anchorDate), 1);
+    const prevMonthAnchor = subDays(startOfMonth(anchorDate), 1);
     const onClickDate = (date) => {
-        if (localStartDate && (0, date_fns_1.isBefore)(date, localStartDate)) {
+        if (localStartDate && isBefore(date, localStartDate)) {
             setLocalStartDate(date);
             return;
         }
-        if (localEndDate && (0, date_fns_1.isAfter)(date, localEndDate)) {
+        if (localEndDate && isAfter(date, localEndDate)) {
             setLocalEndDate(date);
             return;
         }
-        if (localEndDate && (0, date_fns_1.isBefore)(date, localEndDate)) {
+        if (localEndDate && isBefore(date, localEndDate)) {
             setLocalEndDate(date);
             return;
         }
-        if ((0, date_fns_1.isEqual)(localStartDate, date) || (0, date_fns_1.isEqual)(localEndDate, date)) {
+        if (isEqual(localStartDate, date) || isEqual(localEndDate, date)) {
             setLocalStartDate(null);
             setLocalEndDate(null);
         }
@@ -381,19 +371,19 @@ function CalendarDropdown({ onChangeDateRange, dateRange }) {
             return;
         }
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (localEndDate &&
             localStartDate &&
-            (0, date_fns_1.isBefore)(localStartDate, localEndDate)) {
+            isBefore(localStartDate, localEndDate)) {
             onChangeDateRange([localStartDate, localEndDate]);
         }
     }, [localEndDate, localStartDate]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (dateRange.length && !anchorDate) {
             setAnchorDate(dateRange[1]);
         }
     }, [dateRange, anchorDate]);
-    (0, hooks_1.useOnClickOutside)(modalRef, (e) => {
+    useOnClickOutside(modalRef, (e) => {
         // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
         const isTriggerElem = parentRef
             ? parentRef.current?.contains(e.target)
@@ -402,7 +392,7 @@ function CalendarDropdown({ onChangeDateRange, dateRange }) {
             setShowModal(false);
         }
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: parentRef, style: { position: 'relative', height: 38 }, children: [(0, jsx_runtime_1.jsx)("button", { 
+    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: {
@@ -431,7 +421,7 @@ function CalendarDropdown({ onChangeDateRange, dateRange }) {
                     minHeight: 38,
                     marginBottom: 0,
                     paddingLeft: 14 + 15 + 3,
-                }, children: formatDateText(dateRange, localStartDate, localEndDate) }), (0, jsx_runtime_1.jsx)(assets_1.CalendarNormalIcon, { style: {
+                }, children: formatDateText(dateRange, localStartDate, localEndDate) }), _jsx(CalendarNormalIcon, { style: {
                     height: '15px',
                     width: '15px',
                     flex: 'none',
@@ -439,7 +429,7 @@ function CalendarDropdown({ onChangeDateRange, dateRange }) {
                     left: 12,
                     top: 11,
                     color: theme?.primaryTextColor,
-                } }), showModal && ((0, jsx_runtime_1.jsxs)("div", { ref: modalRef, style: {
+                } }), showModal && (_jsxs("div", { ref: modalRef, style: {
                     position: 'absolute',
                     zIndex: 1,
                     overflowY: 'auto',
@@ -469,7 +459,7 @@ function CalendarDropdown({ onChangeDateRange, dateRange }) {
                     paddingLeft: 8,
                     paddingRight: 8,
                     paddingBottom: 1,
-                }, children: [(0, jsx_runtime_1.jsx)("button", { style: {
+                }, children: [_jsx("button", { style: {
                             height: 32,
                             width: 32,
                             position: 'absolute',
@@ -489,11 +479,11 @@ function CalendarDropdown({ onChangeDateRange, dateRange }) {
                             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: {
+                        }, onClick: () => setAnchorDate((date) => subDays(startOfMonth(date), 1)), children: _jsx(ArrowLeftHeadIcon, { style: {
                                 height: '20px',
                                 width: '20px',
                                 color: theme?.secondaryTextColor,
-                            }, "aria-hidden": "true" }) }), (0, jsx_runtime_1.jsx)("button", { style: {
+                            }, "aria-hidden": "true" }) }), _jsx("button", { style: {
                             height: 32,
                             width: 32,
                             borderColor: theme?.borderColor || '#E5E7EB',
@@ -513,33 +503,32 @@ function CalendarDropdown({ onChangeDateRange, dateRange }) {
                             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: {
+                        }, onClick: () => setAnchorDate((date) => addDays(endOfMonth(date), 1)), children: _jsx(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 }))] }))] }));
+                            }, "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 }))] }))] }));
 }
-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: {
+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 })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: label })), _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) => ({
+                }, 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 })] })] }));
 };
-exports.QuillDateRangePicker = QuillDateRangePicker;
-const MemoizedCalendarDropdown = react_1.default.memo(CalendarDropdown);
-const MemoizedDropdown = react_1.default.memo(QuillDropdownComponent);
+const MemoizedCalendarDropdown = React.memo(CalendarDropdown);
+const MemoizedDropdown = React.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
@@ -548,41 +537,47 @@ const areEqual = (prevProps, nextProps) => {
         prevProps.dateRange[0] === nextProps.dateRange[0] &&
         prevProps.dateRange[1] === nextProps.dateRange[1]);
 };
-const MemoizedDateRangePicker = react_1.default.memo(exports.QuillDateRangePicker, areEqual);
-function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, FilterDropdownComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, DashboardItemComponent, }) {
-    const { isLoading: isDataLoading, data, reload } = (0, useDashboard_1.useDashboard)(name);
-    const [dashboardSections, setDashboardSections] = (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);
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
-    const { dashboardFilters, dashboardFiltersDispatch } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
-    const { setDateFilter } = (0, react_1.useContext)(Context_1.DateFilterContext);
-    (0, react_1.useEffect)(() => {
+const MemoizedDateRangePicker = React.memo(QuillDateRangePicker, areEqual);
+export default function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, FilterDropdownComponent, EmptyDashboardComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, DashboardItemComponent, }) {
+    const { dateFilter } = useDateFilter();
+    const { isLoading: isDataLoading, data, reload } = useDashboard(name);
+    const [dashboardSections, setDashboardSections] = useState(null);
+    const { dashboard } = useContext(DashboardContext);
+    const [client] = useContext(ClientContext);
+    const [isLoading, setIsLoading] = useState(isDataLoading);
+    const [theme] = useContext(ThemeContext);
+    const { dashboardFilters, dashboardFiltersDispatch } = useContext(DashboardFiltersContext);
+    const { setDateFilter } = useContext(DateFilterContext);
+    useEffect(() => {
         setIsLoading(isDataLoading);
     }, [isDataLoading]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!data)
             return;
         onDashboardDataChange(data);
     }, [data]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         reload();
     }, [name, client]);
+    function hashCode(s) {
+        return s.split('').reduce(function (a, b) {
+            a = (a << 5) - a + b.charCodeAt(0);
+            return a & a;
+        }, 0);
+    }
     const onDashboardDataChange = (resp) => {
         setDashboardSections(resp.sections);
         const bigFilterObj = {};
         if (resp.dateFilter && Object.keys(resp.dateFilter).length) {
-            const key = 'LAST_6_MONTHS';
-            const code = '6m';
+            const key = resp.dateFilter.defaultPrimaryRange ?? 'LAST_6_MONTHS';
             const filter = {
-                startDate: dateRangePickerUtils_1.PRIMARY_RANGE[key]?.start,
-                endDate: dateRangePickerUtils_1.PRIMARY_RANGE[key]?.end,
+                startDate: PRIMARY_RANGE[key]?.start,
+                endDate: PRIMARY_RANGE[key]?.end,
                 filterType: 'date_range',
                 selectedValue: [
-                    dateRangePickerUtils_1.PRIMARY_RANGE[key]?.start,
-                    dateRangePickerUtils_1.PRIMARY_RANGE[key]?.end,
-                    code,
+                    PRIMARY_RANGE[key]?.start,
+                    PRIMARY_RANGE[key]?.end,
+                    PRIMARY_CODES[key],
                 ],
                 options: options,
                 field: 'date_range',
@@ -590,25 +585,27 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
             };
             if (resp.dateFilter.comparison) {
                 filter.comparison = true;
+                const compKey = resp.dateFilter.defaultComparisonRange ?? 'PREV_PERIOD';
                 const range = { start: filter.startDate, end: filter.endDate };
                 filter.comparisonRange = {
-                    startDate: dateRangePickerUtils_1.COMPARISON_RANGE['PREV_PERIOD'](range)?.start,
-                    endDate: dateRangePickerUtils_1.COMPARISON_RANGE['PREV_PERIOD'](range)?.end,
-                    value: 'PREV_PERIOD',
+                    startDate: COMPARISON_RANGE[compKey](range)?.start,
+                    endDate: COMPARISON_RANGE[compKey](range)?.end,
+                    value: compKey,
                 };
             }
             else {
                 filter.comparison = false;
             }
-            dashboardFiltersDispatch({
-                type: 'ADD_DASHBOARD_FILTER',
-                id: 'date_range',
-                data: {
-                    ...filter,
-                },
-            });
+            if (hashCode(JSON.stringify(dashboardFilters?.date_range ?? '')) !==
+                hashCode(JSON.stringify(filter))) {
+                dashboardFiltersDispatch({
+                    type: 'ADD_DASHBOARD_FILTER',
+                    id: 'date_range',
+                    data: filter,
+                });
+            }
             bigFilterObj[filter.field] = filter;
-            setDateFilter(resp.dateFilter);
+            setDateFilter(PRIMARY_OPTIONS.find((opt) => opt.value === resp.dateFilter.defaultPrimaryRange)?.text ?? null);
         }
         if (resp.filters && resp.filters.length) {
             Object.values(resp.filters)
@@ -618,12 +615,14 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                 bigFilterObj[filter.field] = processFilter(filter);
             });
         }
-        dashboardFiltersDispatch({
-            type: 'ADD_DASHBOARD_FILTERS',
-            id: 'tons',
-            data: bigFilterObj,
-        });
-        setDateFilter(null);
+        if (hashCode(JSON.stringify(dashboardFilters)) !==
+            hashCode(JSON.stringify(bigFilterObj))) {
+            dashboardFiltersDispatch({
+                type: 'ADD_DASHBOARD_FILTERS',
+                id: 'tons',
+                data: bigFilterObj,
+            });
+        }
     };
     const handleOnClickDashboardItem = (elem) => {
         if (dashboard[elem._id]._id) {
@@ -678,10 +677,10 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                 startDate: value ? value[0] : filter.startDate,
                 endDate: value ? value[1] : filter.endDate,
                 filterType: 'date_range',
+                label: 'Date',
                 ...(selectedValue ? { selectedValue } : {}),
                 field: 'date_range',
                 options: options,
-                label: 'Date',
             };
         }
     };
@@ -731,14 +730,14 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                         startDate: value ? value[0] : filter.startDate,
                         endDate: value ? value[1] : filter.endDate,
                         filterType: 'date_range',
+                        label: 'Date',
                         ...(selectedValue ? { selectedValue } : {}),
                         field: 'date_range',
                         options: options,
-                        label: 'Date',
                         comparison: true,
                         comparisonRange: {
-                            startDate: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)?.start,
-                            endDate: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)?.end,
+                            startDate: COMPARISON_RANGE[key](primaryRange)?.start,
+                            endDate: COMPARISON_RANGE[key](primaryRange)?.end,
                             value: key,
                         },
                     },
@@ -762,7 +761,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
             }
         }
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (dashboardSections && dashboard) {
             const totalNumberOfItems = Object.values(dashboardSections).reduce((count, arr) => count + arr.length, 0);
             const itemsLoaded = Object.keys(dashboard).length;
@@ -771,19 +770,21 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
             }
         }
     }, [dashboard, dashboardSections, isLoading]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (onChangeLoading) {
             onChangeLoading(isLoading);
         }
     }, [isLoading, onChangeLoading]);
-    if (!dashboardSections)
+    if (isLoading)
         return null;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: containerStyle, children: [!hideFilters ? ((0, jsx_runtime_1.jsx)("div", { style: {
+    if (!dashboardSections || Object.keys(dashboardSections).length == 0)
+        return _jsx(EmptyDashboardComponent, {});
+    return (_jsxs("div", { style: containerStyle, children: [!hideFilters && (_jsx("div", { style: {
                     display: 'flex',
                     boxSizing: 'content-box',
                     flexDirection: 'row',
                     alignItems: 'center',
-                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                }, children: _jsx("div", { style: {
                         width: '100%',
                         marginBottom: 25,
                         display: 'flex',
@@ -792,18 +793,18 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                         gap: 12,
                     }, children: Object.values(dashboardFilters)
                         .sort((filter) => (filter.filterType === 'date_range' ? -1 : 1))
-                        .map((filter, index) => ((0, jsx_runtime_1.jsx)(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, filterValue: dashboardFilters, SelectComponent: FilterDropdownComponent
+                        .map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, filterValue: dashboardFilters, SelectComponent: FilterDropdownComponent
                             ? FilterDropdownComponent
                             : MemoizedDropdown, DateRangePickerComponent: DateRangePickerComponent
                             ? DateRangePickerComponent
-                            : MemoizedDateRangePicker }, index))) }) })) : null, Object.keys(dashboardSections)
+                            : MemoizedDateRangePicker }, index))) }) })), Object.keys(dashboardSections)
                 .sort(function (a, b) {
                 return a.length - b.length;
             })
                 .map((section, sectionIndex) => {
-                return ((0, jsx_runtime_1.jsxs)("div", { style: {
+                return (_jsxs("div", { style: {
                         width: '100%',
-                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: sectionIndex > 0 ? 25 : 0 } }), section && ((0, jsx_runtime_1.jsx)("h1", { style: {
+                    }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: { height: sectionIndex > 0 ? 25 : 0 } }), section && (_jsx("h1", { style: {
                                         fontSize: 22,
                                         color: theme.primaryTextColor,
                                         fontFamily: theme.fontFamily,
@@ -813,7 +814,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                         // marginLeft: 25,
                                         textAlign: 'left',
                                         marginTop: 12,
-                                    }, children: section }))] }), dashboardSections[section].filter((elem) => elem.chartType === 'metric').length ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    }, children: section }))] }), dashboardSections[section].filter((elem) => elem.chartType === 'metric').length ? (_jsx("div", { style: {
                                 boxSizing: 'content-box',
                                 width: `100%`,
                                 listStyleType: 'none',
@@ -835,21 +836,21 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                             })
                                 .map((elem, index) => {
                                 if (DashboardItemComponent) {
-                                    return ((0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
+                                    return (_jsx("div", { onClick: onClickDashboardItem
                                             ? () => handleOnClickDashboardItem(elem)
-                                            : undefined, children: (0, jsx_runtime_1.jsx)(DashboardItemComponent, { dashboardItem: elem, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                            : void null, children: _jsx(DashboardItemComponent, { dashboardItem: elem, children: _jsx("div", { style: {
                                                     padding: 0,
                                                     // height: '100%',
                                                     boxSizing: 'content-box',
-                                                }, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: {
+                                                }, children: _jsx(Chart, { containerStyle: {
                                                         display: 'flex',
                                                         width: '100%',
                                                         // height: '100%',
-                                                    }, isDateFilter: true, chartId: elem._id, colors: theme.chartColors?.length
+                                                    }, chartId: elem._id, colors: theme.chartColors?.length
                                                         ? theme.chartColors
                                                         : undefined }) }) }) }, elem.name + '' + index));
                                 }
-                                return ((0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
+                                return (_jsx("div", { onClick: onClickDashboardItem
                                         ? () => handleOnClickDashboardItem(elem)
                                         : undefined, style: {
                                         // background: theme.elevatedCardColor,
@@ -862,22 +863,22 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                         cursor: 'pointer',
                                         width: '100%',
                                         ...metricContainerStyle,
-                                    }, children: (0, jsx_runtime_1.jsx)("div", { 
+                                    }, children: _jsx("div", { 
                                         // className="group-hover:bg-black"
                                         style: {
                                             width: '100%',
                                             boxSizing: 'content-box',
                                             height: '100%',
-                                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                        }, children: _jsx("div", { style: {
                                                 width: '100%',
                                                 boxSizing: 'content-box',
                                                 height: '100%',
-                                            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                            }, children: _jsxs("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     justifyContent: 'space-between',
                                                     boxSizing: 'content-box',
-                                                }, children: [(0, jsx_runtime_1.jsxs)("div", { 
+                                                }, children: [_jsxs("div", { 
                                                         // className="group-hover:bg-black"
                                                         style: {
                                                             display: 'flex',
@@ -888,7 +889,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                                             // paddingLeft: theme.padding,
                                                             // paddingRight: 25,
                                                             // paddingTop: theme.padding,
-                                                        }, children: [(0, jsx_runtime_1.jsx)("div", { title: elem.name, style: {
+                                                        }, children: [_jsx("div", { title: elem.name, style: {
                                                                     fontFamily: theme.fontFamily,
                                                                     color: theme.primaryTextColor,
                                                                     boxSizing: 'content-box',
@@ -906,7 +907,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                                                     display: 'block',
                                                                     maxWidth: '100%',
                                                                     overflow: 'hidden',
-                                                                }, children: elem.name }), onClickDashboardItem ? ((0, jsx_runtime_1.jsx)("div", { 
+                                                                }, children: elem.name }), onClickDashboardItem ? (_jsx("div", { 
                                                                 // className="hover:bg-black"
                                                                 style: {
                                                                     fontFamily: theme.fontFamily,
@@ -919,16 +920,16 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                                                     display: 'flex',
                                                                     alignItems: 'center',
                                                                     justifyContent: 'flex-end',
-                                                                }, children: 'view report →' })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: { padding: 0, paddingTop: 10 }, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: {
+                                                                }, children: 'view report →' })) : null] }), _jsx("div", { style: { padding: 0, paddingTop: 10 }, children: _jsx(Chart, { containerStyle: {
                                                             // display: 'flex',
                                                             // width: '100%',
                                                             // height: 30,
                                                             // marginBottom: 50,
                                                             // marginTop: 50,
-                                                            }, isDateFilter: true, 
+                                                            }, 
                                                             //   chartFilters={elem.chartFilters}
                                                             chartId: elem._id }) })] }) }) }) }, elem.name + '' + index));
-                            }) })) : null, dashboardSections[section].filter((elem) => elem.chartType !== 'table' && elem.chartType !== 'metric').length ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                            }) })) : null, dashboardSections[section].filter((elem) => elem.chartType !== 'table' && elem.chartType !== 'metric').length ? (_jsx("div", { style: {
                                 listStyleType: 'none',
                                 display: 'grid',
                                 gridGap: 25,
@@ -949,20 +950,20 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                             })
                                 .map((elem, index) => {
                                 if (DashboardItemComponent) {
-                                    return ((0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
+                                    return (_jsx("div", { onClick: onClickDashboardItem
                                             ? () => handleOnClickDashboardItem(elem)
-                                            : undefined, style: { height: rowHeight || 400 }, children: (0, jsx_runtime_1.jsx)(DashboardItemComponent, { dashboardItem: elem, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: {
+                                            : undefined, style: { height: rowHeight || 400 }, children: _jsx(DashboardItemComponent, { dashboardItem: elem, children: _jsx(Chart, { containerStyle: {
                                                     display: 'flex',
                                                     width: '100%',
                                                     // height: '100%',
                                                     minHeight: 300,
                                                     height: 300,
                                                     // background: 'red',
-                                                }, isDateFilter: true, chartId: elem._id, colors: theme.chartColors?.length
+                                                }, chartId: elem._id, colors: theme.chartColors?.length
                                                     ? theme.chartColors
                                                     : undefined }) }) }, elem.name + '' + index));
                                 }
-                                return ((0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
+                                return (_jsx("div", { onClick: onClickDashboardItem
                                         ? () => handleOnClickDashboardItem(elem)
                                         : undefined, style: {
                                         height: '100%',
@@ -973,26 +974,26 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                         borderRadius: 8,
                                         paddingTop: 20,
                                         ...chartContainerStyle,
-                                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                    }, children: _jsx("div", { style: {
                                             width: '100%',
                                             height: '100%',
                                             boxSizing: 'content-box',
-                                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                        }, children: _jsx("div", { style: {
                                                 width: '100%',
                                                 height: '100%',
                                                 boxSizing: 'content-box',
-                                            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                            }, children: _jsxs("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     justifyContent: 'space-between',
                                                     height: '100%',
                                                     boxSizing: 'content-box',
-                                                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                                }, children: [_jsxs("div", { style: {
                                                             display: 'flex',
                                                             flexDirection: 'row',
                                                             justifyContent: 'space-between',
                                                             boxSizing: 'content-box',
-                                                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                                        }, children: [_jsx("div", { style: {
                                                                     fontFamily: theme.fontFamily,
                                                                     color: theme.primaryTextColor,
                                                                     boxSizing: 'content-box',
@@ -1005,7 +1006,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                                                     display: 'block',
                                                                     maxWidth: '100%',
                                                                     overflow: 'hidden',
-                                                                }, children: elem.name }), onClickDashboardItem ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                                }, children: elem.name }), onClickDashboardItem ? (_jsx("div", { style: {
                                                                     fontFamily: theme.fontFamily,
                                                                     color: theme.primaryTextColor,
                                                                     boxSizing: 'content-box',
@@ -1015,27 +1016,27 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                                                     display: 'flex',
                                                                     alignItems: 'center',
                                                                     justifyContent: 'flex-end',
-                                                                }, children: 'view report →' })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                                }, children: 'view report →' })) : null] }), _jsx("div", { style: {
                                                             padding: 0,
                                                             height: '100%',
                                                             boxSizing: 'content-box',
-                                                        }, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: {
+                                                        }, children: _jsx(Chart, { containerStyle: {
                                                                 display: 'flex',
                                                                 width: '100%',
                                                                 // TODO: fix fixed height
                                                                 height: 300,
                                                                 marginBottom: 50,
                                                                 marginTop: 30,
-                                                            }, isDateFilter: true, chartId: elem._id, colors: theme.chartColors?.length
+                                                            }, chartId: elem._id, colors: theme.chartColors?.length
                                                                 ? theme.chartColors
                                                                 : undefined }) })] }) }) }) }, elem.name + '' + index));
-                            }) })) : null, dashboardSections[section].filter((elem) => elem.chartType === 'table').length ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+                            }) })) : null, dashboardSections[section].filter((elem) => elem.chartType === 'table').length ? (_jsxs("div", { style: {
                                 boxSizing: 'content-box',
                                 width: `100%`,
                                 gap: 20,
                                 display: 'flex',
                                 flexDirection: 'column',
-                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 0 } }), dashboardSections[section]
+                            }, children: [_jsx("div", { style: { height: 0 } }), dashboardSections[section]
                                     .filter((elem) => elem.chartType === 'table')
                                     .sort((a, b) => {
                                     if (a.order === undefined && b.order === undefined)
@@ -1048,23 +1049,23 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                 })
                                     .map((elem, index) => {
                                     if (DashboardItemComponent) {
-                                        return ((0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
+                                        return (_jsx("div", { onClick: onClickDashboardItem
                                                 ? () => handleOnClickDashboardItem(elem)
-                                                : undefined, children: (0, jsx_runtime_1.jsx)(DashboardItemComponent, { dashboardItem: elem, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                                : undefined, children: _jsx(DashboardItemComponent, { dashboardItem: elem, children: _jsx("div", { style: {
                                                         padding: 0,
                                                         height: '100%',
                                                         boxSizing: 'content-box',
-                                                    }, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: {
+                                                    }, children: _jsx(Chart, { containerStyle: {
                                                             display: 'flex',
                                                             width: '100%',
                                                             height: '100%',
-                                                        }, isDateFilter: true, chartId: elem._id, colors: theme.chartColors?.length
+                                                        }, chartId: elem._id, colors: theme.chartColors?.length
                                                             ? theme.chartColors
                                                             : undefined }) }) }) }, elem.name + '' + index));
                                     }
-                                    return ((0, jsx_runtime_1.jsxs)("div", { onClick: onClickDashboardItem
+                                    return (_jsxs("div", { onClick: onClickDashboardItem
                                             ? () => handleOnClickDashboardItem(elem)
-                                            : undefined, children: [(0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
+                                            : undefined, children: [_jsx("div", { onClick: onClickDashboardItem
                                                     ? () => handleOnClickDashboardItem(elem)
                                                     : undefined, style: {
                                                     // background: theme.elevatedCardColor,
@@ -1079,23 +1080,23 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                                     minHeight: 420,
                                                     height: 420,
                                                     // ...metricContainerStyle,
-                                                }, children: (0, jsx_runtime_1.jsx)("div", { 
+                                                }, children: _jsx("div", { 
                                                     // className="group-hover:bg-black"
                                                     style: {
                                                         width: '100%',
                                                         boxSizing: 'content-box',
                                                         height: '100%',
-                                                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    }, children: _jsx("div", { style: {
                                                             width: '100%',
                                                             boxSizing: 'content-box',
                                                             height: '100%',
-                                                        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                        }, children: _jsxs("div", { style: {
                                                                 display: 'flex',
                                                                 flexDirection: 'column',
                                                                 justifyContent: 'space-between',
                                                                 boxSizing: 'content-box',
                                                                 height: '100%',
-                                                            }, children: [(0, jsx_runtime_1.jsxs)("div", { 
+                                                            }, children: [_jsxs("div", { 
                                                                     // className="group-hover:bg-black"
                                                                     style: {
                                                                         display: 'flex',
@@ -1106,7 +1107,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                                                         // paddingLeft: theme.padding,
                                                                         paddingRight: 25,
                                                                         // paddingTop: theme.padding,
-                                                                    }, children: [(0, jsx_runtime_1.jsx)("div", { title: elem.name, style: {
+                                                                    }, children: [_jsx("div", { title: elem.name, style: {
                                                                                 fontFamily: theme.fontFamily,
                                                                                 color: theme.primaryTextColor,
                                                                                 boxSizing: 'content-box',
@@ -1125,7 +1126,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                                                                 display: 'block',
                                                                                 maxWidth: '100%',
                                                                                 overflow: 'hidden',
-                                                                            }, children: elem.name }), onClickDashboardItem ? ((0, jsx_runtime_1.jsx)("div", { 
+                                                                            }, children: elem.name }), onClickDashboardItem ? (_jsx("div", { 
                                                                             // className="hover:bg-black"
                                                                             style: {
                                                                                 fontFamily: theme.fontFamily,
@@ -1138,23 +1139,22 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                                                                 display: 'flex',
                                                                                 alignItems: 'center',
                                                                                 justifyContent: 'flex-end',
-                                                                            }, children: 'view report →' })) : null] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                                            }, children: 'view report →' })) : null] }), _jsxs("div", { style: {
                                                                         padding: 0,
                                                                         height: '400px',
-                                                                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: {
+                                                                    }, children: [_jsx("div", { style: { height: 20 } }), _jsx(Chart, { containerStyle: {
                                                                                 // display: 'flex',
                                                                                 // width: '100%',
                                                                                 // height: 30,
                                                                                 // marginBottom: 50,
                                                                                 height: '100%',
                                                                                 // paddingLeft: 25,
-                                                                            }, isDateFilter: true, 
+                                                                            }, 
                                                                             //   chartFilters={elem.chartFilters}
-                                                                            chartId: elem._id })] })] }) }) }) }, elem.name + '' + index), (0, jsx_runtime_1.jsx)("div", { style: { height: 40 } })] }, elem.name + '' + index));
-                                })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: { height: 40 } })] }, section + '' + sectionIndex));
+                                                                            chartId: elem._id })] })] }) }) }) }, elem.name + '' + index), _jsx("div", { style: { height: 40 } })] }, elem.name + '' + index));
+                                })] })) : null, _jsx("div", { style: { height: 40 } })] }, section + '' + sectionIndex));
             })] }));
 }
-exports.default = Dashboard;
 // ----------------------------------------------------------------
 // REST OF CODE NOT USED
 function Filter({ defaultValue, theme, onValueChange, filter }) {
@@ -1167,23 +1167,23 @@ function Filter({ defaultValue, theme, onValueChange, filter }) {
         { value: 'popupbagelsredding', text: 'popupbagelsredding' },
         { value: 'popupbagelsthompson', text: 'popupbagelsthompson' },
     ];
-    const dropdownRef = (0, react_1.useRef)(null);
-    const [showDropdown, setShowDropdown] = (0, react_1.useState)(false);
-    const [selectedValue, setSelectedValue] = (0, hooks_1.useInternalState)(defaultValue, undefined);
+    const dropdownRef = useRef(null);
+    const [showDropdown, setShowDropdown] = useState(false);
+    const [selectedValue, setSelectedValue] = useInternalState(defaultValue, undefined);
     const selectedDropdownValue = selectedValue ? selectedValue[2] ?? null : null;
     const handleDropdownOptionClick = (dropdownValue) => {
         setSelectedValue([undefined, undefined, dropdownValue]);
         onValueChange?.([undefined, undefined, dropdownValue]);
         setShowDropdown(false);
     };
-    const [hoveredDropdownValue, handleDropdownKeyDown] = (0, hooks_1.useSelectOnKeyDown)(handleDropdownOptionClick, dropdownOptions.map((option) => option.value), showDropdown, setShowDropdown, selectedDropdownValue);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+    const [hoveredDropdownValue, handleDropdownKeyDown] = useSelectOnKeyDown(handleDropdownOptionClick, dropdownOptions.map((option) => option.value), showDropdown, setShowDropdown, selectedDropdownValue);
+    return (_jsxs("div", { style: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
                     marginBottom: 6,
                     fontWeight: '600',
                     color: theme.secondaryTextColor,
                     fontSize: 14,
                     fontFamily: theme.fontFamily,
-                }, children: filter.label }), (0, jsx_runtime_1.jsx)(FilterDropdown, { showDropdown: showDropdown, setShowDropdown: setShowDropdown, handleDropdownKeyDown: handleDropdownKeyDown, dropdownRef: dropdownRef, theme: theme, selectedDropdownValue: selectedDropdownValue, dropdownOptions: filter.options, field: filter.field, label: filter.labelField }), (0, jsx_runtime_1.jsx)(FilterModal, { showDropdown: showDropdown, setShowDropdown: setShowDropdown, dropdownRef: dropdownRef, theme: theme, hoveredDropdownValue: hoveredDropdownValue, selectedDropdownValue: selectedDropdownValue, dropdownOptions: filter.options, handleDropdownOptionClick: handleDropdownOptionClick, field: filter.field, label: filter.labelField })] }));
+                }, children: filter.label }), _jsx(FilterDropdown, { showDropdown: showDropdown, setShowDropdown: setShowDropdown, handleDropdownKeyDown: handleDropdownKeyDown, dropdownRef: dropdownRef, theme: theme, selectedDropdownValue: selectedDropdownValue, dropdownOptions: filter.options, field: filter.field, label: filter.labelField }), _jsx(FilterModal, { showDropdown: showDropdown, setShowDropdown: setShowDropdown, dropdownRef: dropdownRef, theme: theme, hoveredDropdownValue: hoveredDropdownValue, selectedDropdownValue: selectedDropdownValue, dropdownOptions: filter.options, handleDropdownOptionClick: handleDropdownOptionClick, field: filter.field, label: filter.labelField })] }));
 }
 function removeQuotes(str) {
     if (str.startsWith('"') && str.endsWith('"')) {
@@ -1197,7 +1197,7 @@ function FilterDropdown({ setShowDropdown, dropdownRef, showDropdown, handleDrop
     const dropdownText = selectedDropdownValue
         ? String(dropdownOptions.find((option) => option[removeQuotes(field)] === selectedDropdownValue)[removeQuotes(label)])
         : dropdownPlaceholder;
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsx("div", { style: {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'space-between',
@@ -1205,7 +1205,7 @@ function FilterDropdown({ setShowDropdown, dropdownRef, showDropdown, handleDrop
             background: theme?.backgroundColor,
             fontFamily: theme?.fontFamily,
             boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-        }, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", style: {
+        }, children: _jsxs("button", { type: "button", style: {
                 // fontFamily: theme?.fontFamily,
                 borderColor: theme?.borderColor || '#E5E7EB',
                 borderStyle: 'solid',
@@ -1227,7 +1227,7 @@ function FilterDropdown({ setShowDropdown, dropdownRef, showDropdown, handleDrop
                 background: theme?.backgroundColor,
                 fontSize: theme?.fontSizeSmall || '0.875rem',
                 // fontWeight: theme?.fontWeightMedium || '800',
-            }, ref: dropdownRef, onClick: () => setShowDropdown(!showDropdown), onKeyDown: handleDropdownKeyDown, children: [(0, jsx_runtime_1.jsx)("p", { style: {
+            }, ref: dropdownRef, onClick: () => setShowDropdown(!showDropdown), onKeyDown: handleDropdownKeyDown, children: [_jsx("p", { style: {
                         margin: 0,
                         fontFamily: theme?.fontFamily,
                         color: theme?.primaryTextColor || '#364153',
@@ -1236,7 +1236,7 @@ function FilterDropdown({ setShowDropdown, dropdownRef, showDropdown, handleDrop
                         whiteSpace: 'nowrap',
                         fontWeight: theme?.fontWeightMedium || '500',
                         fontSize: theme?.fontSizeSmall || '0.875rem',
-                    }, children: dropdownText }), (0, jsx_runtime_1.jsx)(assets_1.ArrowDownHeadIcon, { style: {
+                    }, children: dropdownText }), _jsx(ArrowDownHeadIcon, { style: {
                         height: '1.25rem',
                         width: '1.25rem',
                         flex: 'none',
@@ -1245,9 +1245,8 @@ function FilterDropdown({ setShowDropdown, dropdownRef, showDropdown, handleDrop
                     }, "aria-hidden": "true" })] }) }));
 }
 function FilterModal({ setShowDropdown, dropdownRef, showDropdown, theme, selectedDropdownValue, hoveredDropdownValue, dropdownOptions, handleDropdownOptionClick, field, label, }) {
-    return ((0, jsx_runtime_1.jsx)(Modal_1.default, { showModal: showDropdown, setShowModal: setShowDropdown, parentRef: dropdownRef, theme: theme, children: (0, jsx_runtime_1.jsx)(contexts_1.SelectedValueContext.Provider, { value: {
+    return (_jsx(Modal, { showModal: showDropdown, setShowModal: setShowDropdown, parentRef: dropdownRef, theme: theme, children: _jsx(SelectedValueContext.Provider, { value: {
                 selectedValue: selectedDropdownValue,
                 handleValueChange: handleDropdownOptionClick,
-            }, children: (0, jsx_runtime_1.jsx)(contexts_1.HoveredValueContext.Provider, { value: { hoveredValue: hoveredDropdownValue }, children: dropdownOptions.map((row, index) => ((0, jsx_runtime_1.jsx)(Dropdown_1.DropdownItem, { value: row[removeQuotes(field)], text: row[removeQuotes(label)], theme: theme, lastItem: dropdownOptions.length - 1 === index }, row[removeQuotes(field)]))) }) }) }));
+            }, children: _jsx(HoveredValueContext.Provider, { value: { hoveredValue: hoveredDropdownValue }, children: dropdownOptions.map((row, index) => (_jsx(DropdownItem, { value: row[removeQuotes(field)], text: row[removeQuotes(label)], theme: theme, lastItem: dropdownOptions.length - 1 === index }, row[removeQuotes(field)]))) }) }) }));
 }
-//# sourceMappingURL=Dashboard.js.map