@quillsql/react 2.9.3 → 2.9.4

package/dist/cjs/Dashboard.js

@@ -0,0 +1,1195 @@
+"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.PRIMARY_OPTIONS = exports.COMPARISON_OPTIONS = void 0;
+const jsx_runtime_1 = require("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 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 = [
+    {
+        value: 'PREV_PERIOD',
+        text: 'Previous Period',
+    },
+    {
+        value: 'PREV_7_DAYS',
+        text: 'Previous 7 days',
+    },
+    {
+        value: 'PREV_30_DAYS',
+        text: 'Previous 30 days',
+    },
+    {
+        value: 'PREV_90_DAYS',
+        text: 'Previous 90 days',
+    },
+    {
+        value: 'NO_COMPARISON',
+        text: 'No comparison',
+    },
+];
+exports.PRIMARY_OPTIONS = [
+    { value: 'THIS_WEEK', text: 'This Week' },
+    { value: 'THIS_MONTH', text: 'This Month' },
+    { value: 'THIS_YEAR', text: 'This year' },
+    { value: 'LAST_7_DAYS', text: 'Last 7 days' },
+    { value: 'LAST_30_DAYS', text: 'Last 30 days' },
+    { value: 'LAST_90_DAYS', text: 'Last 90 days' },
+    { value: 'LAST_6_MONTHS', text: 'Last 6 months' },
+    { value: 'ALL_TIME', text: 'All time' },
+];
+const FILTER_CODE_MAP = {
+    wk: 'This week',
+    m: 'This month',
+    y: 'This year',
+    w: 'Last 7 days',
+    t: 'Last 30 days',
+    '90d': 'Last 90 days',
+    '6m': 'Last 6 months',
+    at: 'All time',
+};
+function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePickerComponent, theme, }) {
+    const { comparisonRange, setComparisonRange } = (0, Context_1.useComparisonRange)();
+    const { setDateFilter } = (0, Context_1.useDateFilter)();
+    const [filterValue, setFilterValue] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (filter.filterType === 'date_range' &&
+            !filter.selectedValue &&
+            !filterValue) {
+            setFilterValue([filter.startDate, filter.endDate, null]);
+        }
+        else if (filter.filterType === 'date_range' && !filterValue) {
+            setFilterValue(filter.selectedValue);
+        }
+        else if (filter.filterType === 'string') {
+            setFilterValue(filter.selectedValue);
+        }
+        if (filter.filterType == 'date_range') {
+            setDateFilter(FILTER_CODE_MAP[filter.selectedValue ? filter.selectedValue[2] : null]);
+            if (filter?.comparisonRange?.value) {
+                const newComparisonRange = exports.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) => {
+                onChangeFilter(filter, e);
+            }, options: [
+                ...filter.options.map((elem) => {
+                    return {
+                        label: elem[filter.labelField],
+                        value: elem[filter.field],
+                    };
+                }),
+            ] }));
+    }
+    if (filter.filterType == 'date_range') {
+        return ((0, jsx_runtime_1.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, 
+                    // value={filterValue}
+                    onChangeDateRange: (dateRange) => {
+                        onChangeFilter(filter, [dateRange[0], dateRange[1], null]);
+                        setFilterValue([dateRange[0], dateRange[1], null]);
+                    }, preset: filterValue && filterValue.length === 3 && filterValue[2] !== null
+                        ? filterValue[2]
+                        : '', onChangePreset: (preset) => {
+                        if (typeof preset === 'string') {
+                            const fullPreset = (0, dateRangePickerUtils_1.getRangeFromPreset)(preset);
+                            onChangeFilter(filter, fullPreset);
+                            setFilterValue(fullPreset);
+                            return;
+                        }
+                        onChangeFilter(filter, [
+                            preset?.startDate || null,
+                            new Date(),
+                            preset?.value || '',
+                        ]);
+                        setFilterValue([
+                            preset?.startDate || null,
+                            new Date(),
+                            preset?.value || '',
+                        ]);
+                    }, presetOptions: dateRangePickerUtils_1.defaultOptions }), comparisonRange && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                    paddingLeft: 16,
+                                    paddingRight: 12,
+                                    color: theme.secondaryTextColor,
+                                }, children: "compared to" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: comparisonRange.value, onChange: (e) => {
+                                    onChangeFilter(filter, null, exports.COMPARISON_OPTIONS.find((option) => {
+                                        return option.value === e;
+                                    }));
+                                }, options: exports.COMPARISON_OPTIONS.map((compareOption) => {
+                                    return {
+                                        value: compareOption.value,
+                                        label: compareOption.text,
+                                    };
+                                }) })] }) }))] }));
+    }
+    return null;
+}
+exports.DashboardFilter = DashboardFilter;
+const options = [
+    {
+        date_range: [(0, date_fns_1.startOfWeek)((0, date_fns_1.startOfToday)()), (0, date_fns_1.startOfToday)(), 'wk'],
+    },
+    {
+        date_range: [(0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 90 }), (0, date_fns_1.startOfToday)(), '90d'],
+    },
+    {
+        date_range: [(0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 30 }), (0, date_fns_1.startOfToday)(), 't'],
+    },
+    {
+        date_range: [(0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { years: 100 }), (0, date_fns_1.startOfToday)(), 'at'],
+    },
+    {
+        date_range: [(0, date_fns_1.startOfYear)((0, date_fns_1.startOfToday)()), (0, date_fns_1.startOfToday)(), 'y'],
+    },
+    {
+        date_range: [(0, date_fns_1.startOfMonth)((0, date_fns_1.startOfToday)()), (0, date_fns_1.startOfToday)(), 'm'],
+    },
+    {
+        date_range: [(0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 7 }), (0, date_fns_1.startOfToday)(), 'w'],
+    },
+    {
+        date_range: [(0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { months: 6 }), (0, date_fns_1.startOfToday)(), '6m'],
+    },
+];
+const QuillDropdownComponent = ({ onChange, value, label, options, }) => {
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
+    const handleOnChange = (0, react_1.useCallback)((event) => {
+        onChange(event.target.value);
+    }, [onChange]);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [label && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    marginBottom: 6,
+                    fontWeight: theme.labelFontWeight || '600',
+                    color: theme.secondaryTextColor,
+                    fontFamily: theme.fontFamily,
+                    fontSize: 14,
+                }, children: label })), (0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', height: 38 }, children: [(0, jsx_runtime_1.jsxs)("select", { onChange: handleOnChange, value: value ?? '', id: 'reportbuilderdropdown', 
+                        // defaultValue="Select"
+                        style: {
+                            width: '100%',
+                            WebkitAppearance: 'none',
+                            minWidth: 230,
+                            outline: 'none',
+                            textAlign: 'left',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            borderRadius: 6,
+                            paddingLeft: 12,
+                            paddingRight: 12,
+                            height: 38,
+                            borderWidth: theme.borderWidth,
+                            borderColor: theme.borderColor,
+                            background: theme.backgroundColor,
+                            color: theme.primaryTextColor,
+                            boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
+                            fontFamily: theme.fontFamily,
+                            fontSize: 14,
+                            fontWeight: 500,
+                            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: {
+                            height: '20px',
+                            width: '20px',
+                            flex: 'none',
+                            position: 'absolute',
+                            right: 8,
+                            top: 9,
+                            color: theme?.secondaryTextColor,
+                        }, "aria-hidden": "true" })] })] }));
+};
+const isBetween = (date, startDate, endDate) => {
+    return (0, date_fns_1.isAfter)(date, startDate) && (0, date_fns_1.isBefore)(date, endDate);
+};
+function Calendar({ anchorDate, 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)
+            ? firstDayOfDisplayedMonth
+            : (0, date_fns_1.previousSunday)(firstDayOfDisplayedMonth),
+        end: (0, date_fns_1.isSaturday)(lastDayOfDisplayedMonth)
+            ? lastDayOfDisplayedMonth
+            : (0, date_fns_1.nextSaturday)(lastDayOfDisplayedMonth),
+    });
+    const displayedTitle = (0, dateRangePickerUtils_1.capitalize)((0, date_fns_1.format)(firstDayOfDisplayedMonth, 'MMMM yyyy', { locale: locale_1.enUS }), locale_1.enUS);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+            // alignItems: 'center',
+        }, children: [(0, jsx_runtime_1.jsx)("h2", { style: {
+                    color: theme?.textColor || '#364153',
+                    fontSize: '13px',
+                    fontFamily: theme?.fontFamily,
+                    fontWeight: '700',
+                    width: '100%',
+                    textAlign: 'center',
+                    height: 36,
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginBottom: 3,
+                    marginTop: 6,
+                }, children: displayedTitle }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    color: theme?.primaryTextColor || '#364153',
+                    textAlign: 'center',
+                    fontSize: 12,
+                    fontWeight: '500',
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
+                    paddingTop: 6,
+                }, children: weekdays.map((dayName) => ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%', display: 'flex', justifyContent: 'center' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            width: '100%',
+                            // height: '2.25rem',
+                            fontFamily: theme?.fontFamily,
+                            color: theme.secondaryTextColor,
+                            paddingBottom: 4,
+                        }, children: dayName }) }, dayName))) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
+                    borderRadius: 3,
+                    overflow: 'hidden',
+                    rowGap: 6,
+                }, children: displayedDates.map((date, index) => {
+                    return ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)("button", { style: {
+                                border: 'none',
+                                height: '34px',
+                                display: 'flex',
+                                width: '100%',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                fontFamily: theme?.fontFamily,
+                                fontSize: 13,
+                                background: (0, date_fns_1.isEqual)(localStartDate, date) || (0, date_fns_1.isEqual)(localEndDate, date)
+                                    ? theme.primaryTextColor
+                                    : isBetween(date, localStartDate, localEndDate)
+                                        ? '#F4F4F5'
+                                        : 'transparent',
+                                color: (0, date_fns_1.isEqual)(localStartDate, date) || (0, date_fns_1.isEqual)(localEndDate, date)
+                                    ? theme.backgroundColor
+                                    : theme.primaryTextColor,
+                                borderRadius: (0, date_fns_1.isEqual)(localStartDate, date) || (0, date_fns_1.isEqual)(localEndDate, date)
+                                    ? 3
+                                    : 0,
+                                ...isBeginningOrEndOfWeek(index),
+                            }, type: "button", onClick: () => {
+                                onClickDate(date);
+                            }, children: (0, jsx_runtime_1.jsx)("time", { dateTime: (0, date_fns_1.format)(date, 'yyyy-MM-dd', { locale: locale_1.enUS }), children: (0, date_fns_1.format)(date, 'd', { locale: locale_1.enUS }) }) }) }, date.toString()));
+                }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 8 } })] }));
+}
+function isBeginningOrEndOfWeek(num) {
+    // Check if the number is 0
+    if (num === 0)
+        return { borderTopLeftRadius: 3, borderBottomLeftRadius: 3 };
+    // Check if the number is divisible by 7
+    if (num % 7 === 0)
+        return { borderTopLeftRadius: 3, borderBottomLeftRadius: 3 };
+    // Check if the number is one less than a multiple of 7
+    if ((num + 1) % 7 === 0)
+        return { borderTopRightRadius: 3, borderBottomRightRadius: 3 };
+    // If none of the conditions are met, return false
+    return {};
+}
+const formatDateText = (dateRange, localStartDate, localEndDate) => {
+    if (dateRange.length && dateRange[0] && dateRange[1]) {
+        return ((0, date_fns_1.format)(dateRange[0], 'MMM dd, yyyy') +
+            ' - ' +
+            (0, date_fns_1.format)(dateRange[1], 'MMM dd, yyyy'));
+    }
+    if (localStartDate && localEndDate) {
+        return ((0, date_fns_1.format)(localStartDate, 'MMM dd, yyyy') +
+            ' - ' +
+            (0, date_fns_1.format)(localEndDate, 'MMM dd, yyyy'));
+    }
+    return '';
+};
+function CalendarDropdown({ onChangeDateRange, dateRange }) {
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
+    const [showModal, setShowModal] = (0, react_1.useState)(false);
+    const modalRef = (0, react_1.useRef)(null);
+    const parentRef = (0, react_1.useRef)(null);
+    const handleOnChange = (0, react_1.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 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)) {
+            setLocalStartDate(date);
+            return;
+        }
+        if (localEndDate && (0, date_fns_1.isAfter)(date, localEndDate)) {
+            setLocalEndDate(date);
+            return;
+        }
+        if (localEndDate && (0, date_fns_1.isBefore)(date, localEndDate)) {
+            setLocalEndDate(date);
+            return;
+        }
+        if ((0, date_fns_1.isEqual)(localStartDate, date) || (0, date_fns_1.isEqual)(localEndDate, date)) {
+            setLocalStartDate(null);
+            setLocalEndDate(null);
+        }
+        if (!localStartDate) {
+            setLocalStartDate(date);
+            return;
+        }
+        if (!localEndDate) {
+            setLocalEndDate(date);
+            return;
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (localEndDate &&
+            localStartDate &&
+            (0, date_fns_1.isBefore)(localStartDate, localEndDate)) {
+            onChangeDateRange([localStartDate, localEndDate]);
+        }
+    }, [localEndDate, localStartDate]);
+    (0, react_1.useEffect)(() => {
+        if (dateRange.length && !anchorDate) {
+            setAnchorDate(dateRange[1]);
+        }
+    }, [dateRange, anchorDate]);
+    (0, hooks_1.useOnClickOutside)(modalRef, (e) => {
+        // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
+        const isTriggerElem = parentRef
+            ? parentRef.current?.contains(e.target)
+            : false;
+        if (!isTriggerElem) {
+            setShowModal(false);
+        }
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: parentRef, style: { position: 'relative', height: 38 }, children: [(0, jsx_runtime_1.jsx)("button", { 
+                // onChange={handleOnChange}
+                // value={value}
+                onClick: () => setShowModal((showModal) => !showModal), id: 'reportbuilderdropdown', defaultValue: "Select", style: {
+                    width: '100%',
+                    WebkitAppearance: 'none',
+                    minWidth: 275,
+                    maxWidth: 275,
+                    outline: 'none',
+                    textAlign: 'left',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    borderRadius: 6,
+                    // paddingLeft: 12,
+                    paddingRight: 12,
+                    height: 38,
+                    borderStyle: 'solid',
+                    borderWidth: theme.borderWidth,
+                    borderColor: theme.borderColor,
+                    background: theme.backgroundColor,
+                    color: theme.primaryTextColor,
+                    boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
+                    fontFamily: theme.fontFamily,
+                    fontSize: 14,
+                    fontWeight: 500,
+                    minHeight: 38,
+                    marginBottom: 0,
+                    paddingLeft: 14 + 15 + 3,
+                }, children: formatDateText(dateRange, localStartDate, localEndDate) }), (0, jsx_runtime_1.jsx)(assets_1.CalendarNormalIcon, { style: {
+                    height: '15px',
+                    width: '15px',
+                    flex: 'none',
+                    position: 'absolute',
+                    left: 12,
+                    top: 11,
+                    color: theme?.primaryTextColor,
+                } }), showModal && ((0, jsx_runtime_1.jsxs)("div", { ref: modalRef, style: {
+                    position: 'absolute',
+                    zIndex: 1,
+                    overflowY: 'auto',
+                    top: 38 + 8,
+                    width: 230 + 245 + 12,
+                    // left: getAbsoluteSpacing(),
+                    // right: getAbsoluteSpacing(),
+                    // height: 230 + 10,
+                    backgroundColor: theme?.backgroundColor || 'white',
+                    borderColor: theme?.borderColor || '#E5E7EB',
+                    borderTopStyle: 'solid',
+                    borderBottomStyle: 'solid',
+                    borderLeftStyle: 'solid',
+                    borderRightStyle: 'solid',
+                    borderTopWidth: 1,
+                    borderBottomWidth: 1,
+                    borderLeftWidth: 1,
+                    borderRightWidth: 1,
+                    marginTop: 0,
+                    // marginTop: '6px',
+                    borderRadius: 5,
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'flex-start',
+                    boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+                    gap: 12,
+                    paddingLeft: 8,
+                    paddingRight: 8,
+                    paddingBottom: 1,
+                }, children: [(0, jsx_runtime_1.jsx)("button", { style: {
+                            height: 32,
+                            width: 32,
+                            position: 'absolute',
+                            borderColor: theme?.borderColor || '#E5E7EB',
+                            borderTopStyle: 'solid',
+                            borderBottomStyle: 'solid',
+                            borderLeftStyle: 'solid',
+                            borderRightStyle: 'solid',
+                            borderTopWidth: 1,
+                            borderBottomWidth: 1,
+                            borderLeftWidth: 1,
+                            borderRightWidth: 1,
+                            top: 8,
+                            left: 8,
+                            borderRadius: 3,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            background: 'transparent',
+                        }, onClick: () => setAnchorDate((date) => (0, date_fns_1.subDays)((0, date_fns_1.startOfMonth)(date), 1)), children: (0, jsx_runtime_1.jsx)(assets_1.ArrowLeftHeadIcon, { style: {
+                                height: '20px',
+                                width: '20px',
+                                color: theme?.secondaryTextColor,
+                            }, "aria-hidden": "true" }) }), (0, jsx_runtime_1.jsx)("button", { style: {
+                            height: 32,
+                            width: 32,
+                            borderColor: theme?.borderColor || '#E5E7EB',
+                            borderTopStyle: 'solid',
+                            borderBottomStyle: 'solid',
+                            borderLeftStyle: 'solid',
+                            borderRightStyle: 'solid',
+                            borderTopWidth: 1,
+                            borderBottomWidth: 1,
+                            borderLeftWidth: 1,
+                            borderRightWidth: 1,
+                            position: 'absolute',
+                            top: 8,
+                            right: 8,
+                            borderRadius: 3,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            background: 'transparent',
+                        }, onClick: () => setAnchorDate((date) => (0, date_fns_1.addDays)((0, date_fns_1.endOfMonth)(date), 1)), children: (0, jsx_runtime_1.jsx)(assets_1.ArrowRightHeadIcon, { style: {
+                                height: '20px',
+                                width: '20px',
+                                color: theme?.secondaryTextColor,
+                            }, "aria-hidden": "true" }) }), anchorDate && ((0, jsx_runtime_1.jsx)(Calendar, { anchorDate: prevMonthAnchor, dateRange: dateRange, theme: theme, onClickDate: onClickDate, localStartDate: localStartDate, localEndDate: localEndDate })), anchorDate && ((0, jsx_runtime_1.jsx)(Calendar, { anchorDate: anchorDate, dateRange: dateRange, theme: theme, onClickDate: onClickDate, localStartDate: localStartDate, localEndDate: localEndDate }))] }))] }));
+}
+const QuillDateRangePicker = ({ label, dateRange, onChangeDateRange, presetOptions, preset, onChangePreset, }) => {
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [label !== '' && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    marginBottom: 6,
+                    fontWeight: theme.labelFontWeight || '600',
+                    color: theme.secondaryTextColor,
+                    fontFamily: theme.fontFamily,
+                    fontSize: 14,
+                }, children: label })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 12,
+                }, children: [(0, jsx_runtime_1.jsx)(MemoizedCalendarDropdown, { dateRange: dateRange, onChangeDateRange: onChangeDateRange, theme: theme }), (0, jsx_runtime_1.jsx)(MemoizedDropdown, { options: presetOptions.map((option) => ({
+                            label: option.text,
+                            value: option.value,
+                        })), onChange: onChangePreset, value: preset })] })] }));
+};
+exports.QuillDateRangePicker = QuillDateRangePicker;
+const MemoizedCalendarDropdown = react_1.default.memo(CalendarDropdown);
+const MemoizedDropdown = react_1.default.memo(QuillDropdownComponent);
+const areEqual = (prevProps, nextProps) => {
+    // This function returns true if passing nextProps to render would return
+    // the same result as passing prevProps to render, otherwise it returns false
+    // You can replace 'someProperty' with the actual prop you want to compare
+    return (prevProps.dateRange.length === nextProps.dateRange.length &&
+        prevProps.dateRange[0] === nextProps.dateRange[0] &&
+        prevProps.dateRange[1] === nextProps.dateRange[1]);
+};
+const MemoizedDateRangePicker = react_1.default.memo(exports.QuillDateRangePicker, areEqual);
+const QuillEmptyDashboardComponent = () => (0, jsx_runtime_1.jsx)("div", {});
+function removeQuotes(str) {
+    if (str.startsWith('"') && str.endsWith('"')) {
+        return str.slice(1, -1);
+    }
+    else {
+        return str;
+    }
+}
+function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, FilterDropdownComponent, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, DashboardItemComponent, }) {
+    const { dateFilter } = (0, Context_1.useDateFilter)();
+    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)(() => {
+        setIsLoading(isDataLoading);
+    }, [isDataLoading]);
+    (0, react_1.useEffect)(() => {
+        if (!data)
+            return;
+        onDashboardDataChange(data);
+    }, [data]);
+    (0, react_1.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 = resp.dateFilter.defaultPrimaryRange ?? 'LAST_6_MONTHS';
+            const filter = {
+                startDate: dateRangePickerUtils_1.PRIMARY_RANGE[key]?.start,
+                endDate: dateRangePickerUtils_1.PRIMARY_RANGE[key]?.end,
+                filterType: 'date_range',
+                selectedValue: [
+                    dateRangePickerUtils_1.PRIMARY_RANGE[key]?.start,
+                    dateRangePickerUtils_1.PRIMARY_RANGE[key]?.end,
+                    dateRangePickerUtils_1.PRIMARY_CODES[key],
+                ],
+                options: options,
+                field: 'date_range',
+                label: 'Date',
+            };
+            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[compKey](range)?.start,
+                    endDate: dateRangePickerUtils_1.COMPARISON_RANGE[compKey](range)?.end,
+                    value: compKey,
+                };
+            }
+            else {
+                filter.comparison = false;
+            }
+            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(exports.PRIMARY_OPTIONS.find((opt) => opt.value === resp.dateFilter.defaultPrimaryRange)?.text ?? null);
+        }
+        if (resp.filters && resp.filters.length) {
+            Object.values(resp.filters)
+                .filter((filter) => filter.filterType !== 'date')
+                .forEach((filter) => {
+                // processFilter(filter);
+                bigFilterObj[filter.field] = processFilter(filter);
+            });
+        }
+        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 && onClickDashboardItem) {
+            onClickDashboardItem(dashboard[elem._id]);
+        }
+        else if (onClickDashboardItem) {
+            onClickDashboardItem({
+                ...dashboard[elem._id],
+                error_id: elem._id,
+                name: elem.name,
+                query: elem.queryString,
+            });
+        }
+    };
+    const onChangeDateFilter = (dateFilter) => {
+        // setGlobalDateFilter(dateFilter[0], dateFilter[1]);
+        dashboardFiltersDispatch({
+            type: 'ADD_DASHBOARD_FILTER',
+            id: 'date_range',
+            data: {
+                startDate: dateFilter[0],
+                endDate: dateFilter[1],
+                filterType: 'date_range',
+            },
+        });
+    };
+    const processFilter = (filter, value = null) => {
+        //for dateObjects only, since values are arrays for dateObjects
+        const { selectedValue: _, ...filterWithoutSelectedValue } = filter; // _ is a throwaway variable
+        let selectedValue;
+        let selectedElem;
+        if (filter.filterType === 'string') {
+            selectedElem = filter.options.find((elem) => elem[removeQuotes(filter.field)] === value);
+            if (selectedElem) {
+                selectedValue = selectedElem[removeQuotes(filter.field)];
+            }
+            return {
+                ...filterWithoutSelectedValue,
+                ...(selectedValue ? { selectedValue } : {}),
+            };
+        }
+        if (filter.filterType === 'date' || filter.filterType === 'date_range') {
+            if (value[2]) {
+                selectedElem = filter.options.find((elem) => {
+                    return value[2] === elem[removeQuotes(filter.field)][2];
+                });
+                if (selectedElem) {
+                    selectedValue = selectedElem[removeQuotes(filter.field)];
+                }
+            }
+            return {
+                startDate: value ? value[0] : filter.startDate,
+                endDate: value ? value[1] : filter.endDate,
+                filterType: 'date_range',
+                label: 'Date',
+                ...(selectedValue ? { selectedValue } : {}),
+                field: 'date_range',
+                options: options,
+            };
+        }
+    };
+    const updateFilter = (filter, value = null, comparison = null) => {
+        //for dateObjects only, since values are arrays for dateObjects
+        const { selectedValue: _, ...filterWithoutSelectedValue } = filter; // _ is a throwaway variable
+        let selectedValue;
+        let selectedElem;
+        if (filter.filterType === 'string') {
+            selectedElem = filter.options.find((elem) => elem[removeQuotes(filter.field)] === value);
+            if (selectedElem) {
+                selectedValue = selectedElem[removeQuotes(filter.field)];
+            }
+            dashboardFiltersDispatch({
+                type: 'ADD_DASHBOARD_FILTER',
+                id: filter.field,
+                data: {
+                    ...filterWithoutSelectedValue,
+                    ...(selectedValue ? { selectedValue } : {}),
+                },
+            });
+            return;
+        }
+        if (filter.filterType === 'date' || filter.filterType === 'date_range') {
+            if (value && value[2]) {
+                selectedElem = filter.options.find((elem) => {
+                    return value[2] === elem[removeQuotes(filter.field)][2];
+                });
+                if (selectedElem) {
+                    selectedValue = selectedElem[removeQuotes(filter.field)];
+                }
+            }
+            if (comparison ||
+                (filter.comparison && filter.comparisonRange.value !== 'NO_COMPARISON')) {
+                if (comparison) {
+                    selectedValue = filter.selectedValue;
+                }
+                const key = comparison?.value || filter.comparisonRange.value;
+                const primaryRange = {
+                    start: value ? value[0] : filter.startDate,
+                    end: value ? value[1] : filter.endDate,
+                };
+                dashboardFiltersDispatch({
+                    type: 'ADD_DASHBOARD_FILTER',
+                    id: 'date_range',
+                    data: {
+                        startDate: value ? value[0] : filter.startDate,
+                        endDate: value ? value[1] : filter.endDate,
+                        filterType: 'date_range',
+                        label: 'Date',
+                        ...(selectedValue ? { selectedValue } : {}),
+                        field: 'date_range',
+                        options: options,
+                        comparison: true,
+                        comparisonRange: {
+                            startDate: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)?.start,
+                            endDate: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)?.end,
+                            value: key,
+                        },
+                    },
+                });
+            }
+            else {
+                dashboardFiltersDispatch({
+                    type: 'ADD_DASHBOARD_FILTER',
+                    id: 'date_range',
+                    data: {
+                        ...filter,
+                        startDate: value ? value[0] : filter.startDate,
+                        endDate: value ? value[1] : filter.endDate,
+                        filterType: 'date_range',
+                        ...(selectedValue ? { selectedValue } : {}),
+                        field: 'date_range',
+                        options: options,
+                        label: 'Date',
+                    },
+                });
+            }
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (dashboardSections && dashboard) {
+            const totalNumberOfItems = Object.values(dashboardSections).reduce((count, arr) => count + arr.length, 0);
+            const itemsLoaded = Object.keys(dashboard).length;
+            if (totalNumberOfItems === itemsLoaded && isLoading) {
+                setIsLoading(false);
+            }
+        }
+    }, [dashboard, dashboardSections, isLoading]);
+    (0, react_1.useEffect)(() => {
+        if (onChangeLoading) {
+            onChangeLoading(isLoading);
+        }
+    }, [isLoading, onChangeLoading]);
+    if (isLoading)
+        return null;
+    if (!dashboardSections || Object.keys(dashboardSections).length == 0)
+        return (0, jsx_runtime_1.jsx)(EmptyDashboardComponent, {});
+    return ((0, jsx_runtime_1.jsxs)("div", { style: containerStyle, children: [!hideFilters && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    boxSizing: 'content-box',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                        width: '100%',
+                        marginBottom: 25,
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        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
+                            ? FilterDropdownComponent
+                            : MemoizedDropdown, DateRangePickerComponent: DateRangePickerComponent
+                            ? DateRangePickerComponent
+                            : 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: {
+                        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: {
+                                        fontSize: 22,
+                                        color: theme.primaryTextColor,
+                                        fontFamily: theme.fontFamily,
+                                        fontWeight: 'bold',
+                                        // fontWeight: theme.headerFontWeight,
+                                        marginBottom: 16,
+                                        // marginLeft: 25,
+                                        textAlign: 'left',
+                                        marginTop: 12,
+                                    }, children: section }))] }), dashboardSections[section].filter((elem) => elem.chartType === 'metric').length ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                                boxSizing: 'content-box',
+                                width: `100%`,
+                                listStyleType: 'none',
+                                marginBottom: 50,
+                                display: 'grid',
+                                gridGap: 25,
+                                gridTemplateColumns: `repeat(auto-fill,minmax(${maxColumnWidth || 400}px, 1fr))`,
+                                gridTemplateRows: `repeat(${170}px)`,
+                            }, children: dashboardSections[section]
+                                .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
+                                if (a.order === undefined)
+                                    return 1; // only 'a' doesn't have the 'order' field, place 'a' last
+                                if (b.order === undefined)
+                                    return -1; // only 'b' doesn't have the 'order' field, place 'b' last
+                                return a.order - b.order; // both items have the 'order' field, sort numerically
+                            })
+                                .map((elem, index) => {
+                                if (DashboardItemComponent) {
+                                    return ((0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
+                                            ? () => handleOnClickDashboardItem(elem)
+                                            : void null, children: (0, jsx_runtime_1.jsx)(DashboardItemComponent, { dashboardItem: elem, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    padding: 0,
+                                                    // height: '100%',
+                                                    boxSizing: 'content-box',
+                                                }, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: {
+                                                        display: 'flex',
+                                                        width: '100%',
+                                                        // height: '100%',
+                                                    }, chartId: elem._id, colors: theme.chartColors?.length
+                                                        ? theme.chartColors
+                                                        : undefined }) }) }) }, elem.name + '' + index));
+                                }
+                                return ((0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
+                                        ? () => handleOnClickDashboardItem(elem)
+                                        : undefined, style: {
+                                        // background: theme.elevatedCardColor,
+                                        // borderRadius: theme.borderRadius,
+                                        // boxShadow: theme.boxShadow,
+                                        paddingTop: 12,
+                                        boxSizing: 'content-box',
+                                        borderRadius: 8,
+                                        height: '100%',
+                                        cursor: 'pointer',
+                                        width: '100%',
+                                        ...metricContainerStyle,
+                                    }, children: (0, jsx_runtime_1.jsx)("div", { 
+                                        // className="group-hover:bg-black"
+                                        style: {
+                                            width: '100%',
+                                            boxSizing: 'content-box',
+                                            height: '100%',
+                                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                                width: '100%',
+                                                boxSizing: 'content-box',
+                                                height: '100%',
+                                            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'column',
+                                                    justifyContent: 'space-between',
+                                                    boxSizing: 'content-box',
+                                                }, children: [(0, jsx_runtime_1.jsxs)("div", { 
+                                                        // className="group-hover:bg-black"
+                                                        style: {
+                                                            display: 'flex',
+                                                            flexDirection: 'row',
+                                                            justifyContent: 'space-between',
+                                                            boxSizing: 'content-box',
+                                                            // alignItems: 'center',
+                                                            // paddingLeft: theme.padding,
+                                                            // paddingRight: 25,
+                                                            // paddingTop: theme.padding,
+                                                        }, children: [(0, jsx_runtime_1.jsx)("div", { title: elem.name, style: {
+                                                                    fontFamily: theme.fontFamily,
+                                                                    color: theme.primaryTextColor,
+                                                                    boxSizing: 'content-box',
+                                                                    // TODO: FIX SIZE
+                                                                    fontSize: 18,
+                                                                    // TODO: FIX WEIGHT
+                                                                    fontWeight: '500',
+                                                                    // fontSize: theme.headerFontSize,
+                                                                    // color: theme.fontColor,
+                                                                    // fontWeight: theme.headerFontWeight,
+                                                                    textOverflow: 'ellipsis',
+                                                                    // margin: 0,
+                                                                    padding: 0,
+                                                                    whiteSpace: 'nowrap',
+                                                                    display: 'block',
+                                                                    maxWidth: '100%',
+                                                                    overflow: 'hidden',
+                                                                }, children: elem.name }), onClickDashboardItem ? ((0, jsx_runtime_1.jsx)("div", { 
+                                                                // className="hover:bg-black"
+                                                                style: {
+                                                                    fontFamily: theme.fontFamily,
+                                                                    boxSizing: 'content-box',
+                                                                    color: theme.primaryTextColor,
+                                                                    fontWeight: '500',
+                                                                    fontSize: 14,
+                                                                    minWidth: 14 * 7,
+                                                                    // background: 'red',
+                                                                    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: {
+                                                            // display: 'flex',
+                                                            // width: '100%',
+                                                            // height: 30,
+                                                            // marginBottom: 50,
+                                                            // marginTop: 50,
+                                                            }, 
+                                                            //   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: {
+                                listStyleType: 'none',
+                                display: 'grid',
+                                gridGap: 25,
+                                boxSizing: 'content-box',
+                                gridTemplateColumns: `repeat(auto-fill,minmax(${maxColumnWidth || 400}px, 1fr))`,
+                                gridTemplateRows: `repeat(auto-fill, ${rowHeight || 400}px)`,
+                            }, children: dashboardSections[section]
+                                .filter((elem) => elem.chartType !== 'metric' &&
+                                elem.chartType !== 'table')
+                                .sort((a, b) => {
+                                if (a.order === undefined && b.order === undefined)
+                                    return 0; // both items don't have the 'order' field
+                                if (a.order === undefined)
+                                    return 1; // only 'a' doesn't have the 'order' field, place 'a' last
+                                if (b.order === undefined)
+                                    return -1; // only 'b' doesn't have the 'order' field, place 'b' last
+                                return a.order - b.order; // both items have the 'order' field, sort numerically
+                            })
+                                .map((elem, index) => {
+                                if (DashboardItemComponent) {
+                                    return ((0, jsx_runtime_1.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: {
+                                                    display: 'flex',
+                                                    width: '100%',
+                                                    // height: '100%',
+                                                    minHeight: 300,
+                                                    height: 300,
+                                                    // background: 'red',
+                                                }, chartId: elem._id, colors: theme.chartColors?.length
+                                                    ? theme.chartColors
+                                                    : undefined }) }) }, elem.name + '' + index));
+                                }
+                                return ((0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
+                                        ? () => handleOnClickDashboardItem(elem)
+                                        : undefined, style: {
+                                        height: '100%',
+                                        cursor: 'pointer',
+                                        boxSizing: 'content-box',
+                                        paddingRight: 25,
+                                        minHeight: rowHeight || 400,
+                                        borderRadius: 8,
+                                        paddingTop: 20,
+                                        ...chartContainerStyle,
+                                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                            width: '100%',
+                                            height: '100%',
+                                            boxSizing: 'content-box',
+                                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                                width: '100%',
+                                                height: '100%',
+                                                boxSizing: 'content-box',
+                                            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'column',
+                                                    justifyContent: 'space-between',
+                                                    height: '100%',
+                                                    boxSizing: 'content-box',
+                                                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                                            display: 'flex',
+                                                            flexDirection: 'row',
+                                                            justifyContent: 'space-between',
+                                                            boxSizing: 'content-box',
+                                                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                                                    fontFamily: theme.fontFamily,
+                                                                    color: theme.primaryTextColor,
+                                                                    boxSizing: 'content-box',
+                                                                    fontSize: 18,
+                                                                    fontWeight: '500',
+                                                                    textOverflow: 'ellipsis',
+                                                                    // marginLeft: 25,
+                                                                    padding: 0,
+                                                                    whiteSpace: 'nowrap',
+                                                                    display: 'block',
+                                                                    maxWidth: '100%',
+                                                                    overflow: 'hidden',
+                                                                }, children: elem.name }), onClickDashboardItem ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                                    fontFamily: theme.fontFamily,
+                                                                    color: theme.primaryTextColor,
+                                                                    boxSizing: 'content-box',
+                                                                    fontWeight: '500',
+                                                                    fontSize: 14,
+                                                                    minWidth: 14 * 7,
+                                                                    display: 'flex',
+                                                                    alignItems: 'center',
+                                                                    justifyContent: 'flex-end',
+                                                                }, children: 'view report →' })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                            padding: 0,
+                                                            height: '100%',
+                                                            boxSizing: 'content-box',
+                                                        }, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: {
+                                                                display: 'flex',
+                                                                width: '100%',
+                                                                // TODO: fix fixed height
+                                                                height: 300,
+                                                                marginBottom: 50,
+                                                                marginTop: 30,
+                                                            }, 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: {
+                                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')
+                                    .sort((a, b) => {
+                                    if (a.order === undefined && b.order === undefined)
+                                        return 0; // both items don't have the 'order' field
+                                    if (a.order === undefined)
+                                        return 1; // only 'a' doesn't have the 'order' field, place 'a' last
+                                    if (b.order === undefined)
+                                        return -1; // only 'b' doesn't have the 'order' field, place 'b' last
+                                    return a.order - b.order; // both items have the 'order' field, sort numerically
+                                })
+                                    .map((elem, index) => {
+                                    if (DashboardItemComponent) {
+                                        return ((0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
+                                                ? () => handleOnClickDashboardItem(elem)
+                                                : undefined, children: (0, jsx_runtime_1.jsx)(DashboardItemComponent, { dashboardItem: elem, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                                        padding: 0,
+                                                        height: '100%',
+                                                        boxSizing: 'content-box',
+                                                    }, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: {
+                                                            display: 'flex',
+                                                            width: '100%',
+                                                            height: '100%',
+                                                        }, chartId: elem._id, colors: theme.chartColors?.length
+                                                            ? theme.chartColors
+                                                            : undefined }) }) }) }, elem.name + '' + index));
+                                    }
+                                    return ((0, jsx_runtime_1.jsxs)("div", { onClick: onClickDashboardItem
+                                            ? () => handleOnClickDashboardItem(elem)
+                                            : undefined, children: [(0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
+                                                    ? () => handleOnClickDashboardItem(elem)
+                                                    : undefined, style: {
+                                                    // background: theme.elevatedCardColor,
+                                                    // borderRadius: theme.borderRadius,
+                                                    // boxShadow: theme.boxShadow,
+                                                    paddingTop: 12,
+                                                    boxSizing: 'content-box',
+                                                    borderRadius: 8,
+                                                    // height: '100%',
+                                                    cursor: 'pointer',
+                                                    width: '100%',
+                                                    minHeight: 420,
+                                                    height: 420,
+                                                    // ...metricContainerStyle,
+                                                }, children: (0, jsx_runtime_1.jsx)("div", { 
+                                                    // className="group-hover:bg-black"
+                                                    style: {
+                                                        width: '100%',
+                                                        boxSizing: 'content-box',
+                                                        height: '100%',
+                                                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                                            width: '100%',
+                                                            boxSizing: 'content-box',
+                                                            height: '100%',
+                                                        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                                display: 'flex',
+                                                                flexDirection: 'column',
+                                                                justifyContent: 'space-between',
+                                                                boxSizing: 'content-box',
+                                                                height: '100%',
+                                                            }, children: [(0, jsx_runtime_1.jsxs)("div", { 
+                                                                    // className="group-hover:bg-black"
+                                                                    style: {
+                                                                        display: 'flex',
+                                                                        flexDirection: 'row',
+                                                                        justifyContent: 'space-between',
+                                                                        boxSizing: 'content-box',
+                                                                        // alignItems: 'center',
+                                                                        // paddingLeft: theme.padding,
+                                                                        paddingRight: 25,
+                                                                        // paddingTop: theme.padding,
+                                                                    }, children: [(0, jsx_runtime_1.jsx)("div", { title: elem.name, style: {
+                                                                                fontFamily: theme.fontFamily,
+                                                                                color: theme.primaryTextColor,
+                                                                                boxSizing: 'content-box',
+                                                                                // TODO: FIX SIZE
+                                                                                fontSize: 18,
+                                                                                // TODO: FIX WEIGHT
+                                                                                fontWeight: '500',
+                                                                                // fontSize: theme.headerFontSize,
+                                                                                // color: theme.fontColor,
+                                                                                // fontWeight: theme.headerFontWeight,
+                                                                                textOverflow: 'ellipsis',
+                                                                                // margin: 0,
+                                                                                // marginLeft: 25,
+                                                                                padding: 0,
+                                                                                whiteSpace: 'nowrap',
+                                                                                display: 'block',
+                                                                                maxWidth: '100%',
+                                                                                overflow: 'hidden',
+                                                                            }, children: elem.name }), onClickDashboardItem ? ((0, jsx_runtime_1.jsx)("div", { 
+                                                                            // className="hover:bg-black"
+                                                                            style: {
+                                                                                fontFamily: theme.fontFamily,
+                                                                                boxSizing: 'content-box',
+                                                                                color: theme.primaryTextColor,
+                                                                                fontWeight: '500',
+                                                                                fontSize: 14,
+                                                                                minWidth: 14 * 7,
+                                                                                // background: 'red',
+                                                                                display: 'flex',
+                                                                                alignItems: 'center',
+                                                                                justifyContent: 'flex-end',
+                                                                            }, children: 'view report →' })) : null] }), (0, jsx_runtime_1.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: {
+                                                                                // display: 'flex',
+                                                                                // width: '100%',
+                                                                                // height: 30,
+                                                                                // marginBottom: 50,
+                                                                                height: '100%',
+                                                                                // paddingLeft: 25,
+                                                                            }, 
+                                                                            //   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));
+            })] }));
+}
+exports.default = Dashboard;