@quillsql/react 2.8.4 → 2.8.6

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, Fragment as _Fragment } 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 dataFetcher_1 = require("./utils/dataFetcher");
-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");
-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, } from './DateRangePicker/dateRangePickerUtils';
+import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, DateFilterContext, } 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,10 @@ 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 function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePickerComponent, theme, }) {
+    const [comparisonValue, setComparisonValue] = useState('');
+    const [filterValue, setFilterValue] = useState(null);
+    useEffect(() => {
         if (filter.filterType === 'date_range' &&
             !filter.selectedValue &&
             !filterValue) {
@@ -80,16 +51,16 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePic
             setFilterValue(filter.selectedValue);
         }
         if (filter.comparison) {
-            setComparisonValue(exports.COMPARISON_OPTIONS.find(option => {
+            setComparisonValue(COMPARISON_OPTIONS.find((option) => {
                 return option.value === filter.comparisonRange.value;
             }).value);
         }
     }, [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 => {
+                ...filter.options.map((elem) => {
                     return {
                         label: elem[filter.labelField],
                         value: elem[filter.field],
@@ -98,20 +69,20 @@ 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 => {
+                    onChangeDateRange: (dateRange) => {
                         onChangeFilter(filter, [dateRange[0], dateRange[1], null]);
                         setFilterValue([dateRange[0], dateRange[1], null]);
                     }, preset: filterValue && filterValue.length === 3 && filterValue[2] !== null
                         ? filterValue[2]
-                        : '', onChangePreset: preset => {
+                        : '', 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 +97,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 }), filter.comparison && (_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: comparisonValue, 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 +118,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 +179,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 +190,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 +224,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 +232,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,7 +241,7 @@ 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,
@@ -286,7 +256,7 @@ function Calendar({ anchorDate, selectedDateRange, onClickDate, theme, localStar
                     //   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 +265,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 +297,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 onClickDate = date => {
-        if (localStartDate && (0, date_fns_1.isBefore)(date, localStartDate)) {
+    const prevMonthAnchor = subDays(startOfMonth(anchorDate), 1);
+    const onClickDate = (date) => {
+        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 +351,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,10 +372,10 @@ 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: {
+                onClick: () => setShowModal((showModal) => !showModal), id: 'reportbuilderdropdown', defaultValue: "Select", style: {
                     width: '100%',
                     WebkitAppearance: 'none',
                     minWidth: 275,
@@ -431,7 +401,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 +409,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 +439,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 +459,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 +483,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,110 +517,84 @@ 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 [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)(false);
-    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);
-    // const [configFilters, setConfigFilters] = useState([]);
-    react_1.default.useEffect(() => {
-        async function getDashboards() {
-            const { publicKey, customerId } = client;
-            try {
-                setIsLoading(true);
-                // Add query parameters to the URL
-                const searchParams = new URLSearchParams({
-                    publicKey: publicKey,
-                    orgId: customerId,
-                    name: name,
-                }).toString();
-                const hostedBody = {
-                    metadata: customerId
-                        ? { orgId: customerId, name, task: 'config', clientId: publicKey }
-                        : { name, task: 'config', clientId: publicKey },
+const MemoizedDateRangePicker = React.memo(QuillDateRangePicker, areEqual);
+export default function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, FilterDropdownComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, DashboardItemComponent, }) {
+    const { isLoading: isDataLoading, data, error, 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]);
+    useEffect(() => {
+        onDashboardDataChange(data);
+    }, [data]);
+    useEffect(() => {
+        reload();
+    }, [name, client]);
+    const onDashboardDataChange = (resp) => {
+        if (!resp)
+            return;
+        setDashboardSections(resp.sections);
+        const bigFilterObj = {};
+        if (resp.dateFilter && Object.keys(resp.dateFilter).length) {
+            const key = 'LAST_6_MONTHS';
+            const code = '6m';
+            const filter = {
+                startDate: PRIMARY_RANGE[key]?.start,
+                endDate: PRIMARY_RANGE[key]?.end,
+                filterType: 'date_range',
+                selectedValue: [
+                    PRIMARY_RANGE[key]?.start,
+                    PRIMARY_RANGE[key]?.end,
+                    code,
+                ],
+                options: options,
+                field: 'date_range',
+                label: 'Date',
+            };
+            if (resp.dateFilter.comparison) {
+                filter.comparison = true;
+                const range = { start: filter.startDate, end: filter.endDate };
+                filter.comparisonRange = {
+                    startDate: COMPARISON_RANGE['PREV_PERIOD'](range)?.start,
+                    endDate: COMPARISON_RANGE['PREV_PERIOD'](range)?.end,
+                    value: 'PREV_PERIOD',
                 };
-                const resp = await (0, dataFetcher_1.getData)(client, `dashconfig?${searchParams}`, 'omit', hostedBody, null, 'GET');
-                setDashboardSections(resp.sections);
-                const bigFilterObj = {};
-                if (resp.dateFilter && Object.keys(resp.dateFilter).length) {
-                    // const startDate = resp.dateFilter;
-                    const filter = {
-                        startDate: dateRangePickerUtils_1.PRIMARY_RANGE['LAST_6_MONTHS']?.start,
-                        endDate: dateRangePickerUtils_1.PRIMARY_RANGE['LAST_6_MONTHS']?.end,
-                        filterType: 'date_range',
-                        selectedValue: [
-                            dateRangePickerUtils_1.PRIMARY_RANGE['LAST_6_MONTHS']?.start,
-                            dateRangePickerUtils_1.PRIMARY_RANGE['LAST_6_MONTHS']?.end,
-                            '6m',
-                        ],
-                        options: options,
-                        field: 'date_range',
-                        label: 'Date',
-                    };
-                    if (resp.dateFilter.comparison) {
-                        filter.comparison = true;
-                        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',
-                        };
-                    }
-                    else {
-                        filter.comparison = false;
-                    }
-                    dashboardFiltersDispatch({
-                        type: 'ADD_DASHBOARD_FILTER',
-                        id: 'date_range',
-                        data: {
-                            ...filter,
-                        },
-                    });
-                    bigFilterObj[filter.field] = filter;
-                    setDateFilter(resp.dateFilter);
-                }
-                if (resp.filters && resp.filters.length) {
-                    Object.values(resp.filters)
-                        .filter(filter => filter.filterType !== 'date')
-                        .forEach(filter => {
-                        // processFilter(filter);
-                        bigFilterObj[filter.field] = processFilter(filter);
-                    });
-                }
-                dashboardFiltersDispatch({
-                    type: 'ADD_DASHBOARD_FILTERS',
-                    id: 'tons',
-                    data: bigFilterObj,
-                });
-                setDateFilter(null);
             }
-            catch (error) {
-                console.error('Error fetching data:', error);
+            else {
+                filter.comparison = false;
             }
+            dashboardFiltersDispatch({
+                type: 'ADD_DASHBOARD_FILTER',
+                id: 'date_range',
+                data: {
+                    ...filter,
+                },
+            });
+            bigFilterObj[filter.field] = filter;
+            setDateFilter(resp.dateFilter);
+        }
+        if (resp.filters && resp.filters.length) {
+            Object.values(resp.filters)
+                .filter((filter) => filter.filterType !== 'date')
+                .forEach((filter) => {
+                // processFilter(filter);
+                bigFilterObj[filter.field] = processFilter(filter);
+            });
         }
-        getDashboards();
-    }, [name, client]);
-    // TODO: I think this can be removed
-    (0, react_1.useEffect)(() => {
-        // change to be set on the dashboard / section as default date range
-        const filter = {
-            startDate: (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 90 }),
-            endDate: new Date(),
-            filterType: 'date_range',
-        };
         dashboardFiltersDispatch({
-            type: 'ADD_DASHBOARD_FILTER',
-            id: 'date_range',
-            data: {
-                ...filter,
-            },
+            type: 'ADD_DASHBOARD_FILTERS',
+            id: 'tons',
+            data: bigFilterObj,
         });
-    }, []);
-    const handleOnClickDashboardItem = elem => {
+        setDateFilter(null);
+    };
+    const handleOnClickDashboardItem = (elem) => {
         if (dashboard[elem._id]._id) {
             onClickDashboardItem(dashboard[elem._id]);
         }
@@ -664,7 +607,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
             });
         }
     };
-    const onChangeDateFilter = dateFilter => {
+    const onChangeDateFilter = (dateFilter) => {
         // setGlobalDateFilter(dateFilter[0], dateFilter[1]);
         dashboardFiltersDispatch({
             type: 'ADD_DASHBOARD_FILTER',
@@ -682,7 +625,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
         let selectedValue;
         let selectedElem;
         if (filter.filterType === 'string') {
-            selectedElem = filter.options.find(elem => elem[removeQuotes(filter.field)] === value);
+            selectedElem = filter.options.find((elem) => elem[removeQuotes(filter.field)] === value);
             if (selectedElem) {
                 selectedValue = selectedElem[removeQuotes(filter.field)];
             }
@@ -693,7 +636,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
         }
         if (filter.filterType === 'date' || filter.filterType === 'date_range') {
             if (value[2]) {
-                selectedElem = filter.options.find(elem => {
+                selectedElem = filter.options.find((elem) => {
                     return value[2] === elem[removeQuotes(filter.field)][2];
                 });
                 if (selectedElem) {
@@ -717,7 +660,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
         let selectedValue;
         let selectedElem;
         if (filter.filterType === 'string') {
-            selectedElem = filter.options.find(elem => elem[removeQuotes(filter.field)] === value);
+            selectedElem = filter.options.find((elem) => elem[removeQuotes(filter.field)] === value);
             if (selectedElem) {
                 selectedValue = selectedElem[removeQuotes(filter.field)];
             }
@@ -733,7 +676,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
         }
         if (filter.filterType === 'date' || filter.filterType === 'date_range') {
             if (value && value[2]) {
-                selectedElem = filter.options.find(elem => {
+                selectedElem = filter.options.find((elem) => {
                     return value[2] === elem[removeQuotes(filter.field)][2];
                 });
                 if (selectedElem) {
@@ -763,8 +706,8 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                         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,
                         },
                     },
@@ -788,7 +731,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;
@@ -797,7 +740,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
             }
         }
     }, [dashboard, dashboardSections, isLoading]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (onChangeLoading) {
             onChangeLoading(isLoading);
         }
@@ -805,22 +748,21 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
     if (!dashboardSections) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: containerStyle, children: [!hideFilters ? ((0, jsx_runtime_1.jsx)("div", { style: {
+    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',
                         flexDirection: 'row',
                         alignItems: 'center',
                         gap: 12,
-                        // paddingLeft: 25,
                     }, 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
+                        .sort((filter) => (filter.filterType === 'date_range' ? -1 : 1))
+                        .map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, filterValue: dashboardFilters, SelectComponent: FilterDropdownComponent
                             ? FilterDropdownComponent
                             : MemoizedDropdown, DateRangePickerComponent: DateRangePickerComponent
                             ? DateRangePickerComponent
@@ -829,9 +771,9 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                 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,
@@ -841,7 +783,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',
@@ -851,7 +793,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                 gridTemplateColumns: `repeat(auto-fill,minmax(${maxColumnWidth || 400}px, 1fr))`,
                                 gridTemplateRows: `repeat(${170}px)`,
                             }, children: dashboardSections[section]
-                                .filter(elem => elem.chartType === 'metric')
+                                .filter((elem) => elem.chartType === 'metric')
                                 .sort((a, b) => {
                                 if (a.order === undefined && b.order === undefined)
                                     return 0; // both items don't have the 'order' field
@@ -863,13 +805,13 @@ 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%',
@@ -877,7 +819,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                                         ? 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,
@@ -890,22 +832,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',
@@ -916,7 +858,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',
@@ -934,7 +876,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,
@@ -947,7 +889,7 @@ 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,
@@ -956,7 +898,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                                             }, 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,
@@ -964,7 +906,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                 gridTemplateColumns: `repeat(auto-fill,minmax(${maxColumnWidth || 400}px, 1fr))`,
                                 gridTemplateRows: `repeat(auto-fill, ${rowHeight || 400}px)`,
                             }, children: dashboardSections[section]
-                                .filter(elem => elem.chartType !== 'metric' &&
+                                .filter((elem) => elem.chartType !== 'metric' &&
                                 elem.chartType !== 'table')
                                 .sort((a, b) => {
                                 if (a.order === undefined && b.order === undefined)
@@ -977,9 +919,9 @@ 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%',
@@ -990,7 +932,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                                     ? 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%',
@@ -1001,26 +943,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',
@@ -1033,7 +975,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',
@@ -1043,11 +985,11 @@ 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
@@ -1057,14 +999,14 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                                             }, isDateFilter: true, 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]
-                                    .filter(elem => elem.chartType === 'table')
+                            }, children: [_jsx("div", { style: { height: 0 } }), dashboardSections[section]
+                                    .filter((elem) => elem.chartType === 'table')
                                     .sort((a, b) => {
                                     if (a.order === undefined && b.order === undefined)
                                         return 0; // both items don't have the 'order' field
@@ -1076,13 +1018,13 @@ 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%',
@@ -1090,7 +1032,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                                             ? theme.chartColors
                                                             : undefined }) }) }) }, elem.name + '' + index));
                                     }
-                                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
+                                    return (_jsxs(_Fragment, { children: [_jsx("div", { onClick: onClickDashboardItem
                                                     ? () => handleOnClickDashboardItem(elem)
                                                     : undefined, style: {
                                                     // background: theme.elevatedCardColor,
@@ -1105,23 +1047,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',
@@ -1132,7 +1074,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',
@@ -1151,7 +1093,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,
@@ -1164,10 +1106,10 @@ 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,
@@ -1176,11 +1118,10 @@ function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerS
                                                                                 // paddingLeft: 25,
                                                                             }, isDateFilter: true, 
                                                                             //   chartFilters={elem.chartFilters}
-                                                                            chartId: elem._id })] })] }) }) }) }, elem.name + '' + index), (0, jsx_runtime_1.jsx)("div", { style: { height: 40 } })] }));
-                                })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: { height: 40 } })] }, section + '' + sectionIndex));
+                                                                            chartId: elem._id })] })] }) }) }) }, elem.name + '' + index), _jsx("div", { style: { height: 40 } })] }));
+                                })] })) : null, _jsx("div", { style: { height: 40 } })] }, section + '' + sectionIndex));
             })] }));
 }
-exports.default = Dashboard;
 // ----------------------------------------------------------------
 // REST OF CODE NOT USED
 function Filter({ defaultValue, theme, onValueChange, filter }) {
@@ -1193,23 +1134,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('"')) {
@@ -1221,9 +1162,9 @@ function removeQuotes(str) {
 }
 function FilterDropdown({ setShowDropdown, dropdownRef, showDropdown, handleDropdownKeyDown, theme, dropdownPlaceholder = 'Select', selectedDropdownValue, dropdownOptions, field, label, }) {
     const dropdownText = selectedDropdownValue
-        ? String(dropdownOptions.find(option => option[removeQuotes(field)] === selectedDropdownValue)[removeQuotes(label)])
+        ? 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',
@@ -1231,7 +1172,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',
@@ -1253,7 +1194,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',
@@ -1262,7 +1203,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',
@@ -1271,8 +1212,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)]))) }) }) }));
 }