@quillsql/admin 1.7.0 → 1.7.2

package/dist/esm/modals/EditFiltersModal.js

@@ -1,1314 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useAdmin } from '../AdminProvider';
-import { useDashboardInternal, useDashboards, } from '@quillsql/react';
-import { SAVED_QUERIES_DASHBOARD, 
-// DateRangeOption,
-// InitialDateRangeOptions,
-SINGLE_TENANT,
-// defaultDateRange,
- } from '../utils/constants';
-import { getPostgresBasicType } from '../Admin';
-import InputLabel from '../components/InputLabel';
-import CardSection from '../components/CardSection';
-import { SegmentedControl } from '../components/SegmentedControl';
-import { convertFieldTypeToJSType } from '../utils/columnProcessing';
-import { validateDashboard } from '../utils/validation';
-import { OverflowContainer, } from '../components/UiComponents';
-import { QuillSelectComponentWithCombo } from '../components/QuillSelectWithCombo';
-import DownChevronIcon from '../icons/DownChevronIcon';
-import RightChevronIcon from '../icons/RightChevronIcon';
-import TextInputPrimitive from '../primitives/TextInputPrimitive';
-import { SingleDatePicker } from '../components/DateRangePicker/SingleDatePicker';
-import { set } from 'date-fns';
-import { QuillYearlessDateRangePicker } from '../components/DateRangePicker/YearlessDateRangePicker';
-import ExclamationFilledIcon from '../icons/ExclamationFilledIcon';
-import { QuillToolTipPortal } from '../components/QuillToolTipPortal';
-import { convertPresetOptionsToSelectableList } from '../components/DateRangePicker/dateRangePickerUtils';
-import { QuillPopover } from '../components/QuillPopover';
-const intervalTypeOptions = [
-    // {
-    //   label: 'Week',
-    //   value: 'week'
-    // },
-    {
-        label: 'Last',
-        value: 'relative',
-    },
-    {
-        label: 'Custom Term',
-        value: 'repeating',
-    },
-    {
-        label: 'Static',
-        value: 'static',
-    },
-];
-export function EditFiltersModal({ isOpen, selectedDashboardName, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, ErrorComponent, openPromoteModal, }) {
-    const { state } = useAdmin();
-    const { dashboards, deleteDashboard, updateDashboard } = useDashboards();
-    const { data: selectedDashboard } = useDashboardInternal(selectedDashboardName);
-    const [isDateComparison, setIsDateComparison] = useState(false);
-    const [currentDashboardName, setCurrentDashboardName] = useState(selectedDashboardName);
-    const [newFilters, setNewFilters] = useState([]);
-    const [initialRange, setInitialRange] = useState(selectedDashboard?.dateFilter?.primaryRange ?? {
-        label: 'Last 30 days',
-        value: 'LAST_30_DAYS',
-    });
-    const [showDateFilter, setShowDateFilter] = useState(false);
-    const [newDateFilter, setNewDateFilter] = useState();
-    const [validationError, setValidationError] = useState([]);
-    const [filterNameMap, setFilterNameMap] = useState({});
-    const [showCustomIntervals, setShowCustomIntervals] = useState(false);
-    const [displaySubIntervals, setDisplaySubIntervals] = useState([]);
-    const assignDefaultInterval = (label, set, loopStart, loopEnd) => {
-        if (!newDateFilter)
-            return;
-        if (set) {
-            setNewDateFilter({
-                ...newDateFilter,
-                defaultPresetRanges: [
-                    ...(newDateFilter?.defaultPresetRanges ?? []).filter((r) => r?.label !== label),
-                    { label, loopStart, loopEnd },
-                ],
-            });
-        }
-        else {
-            setNewDateFilter({
-                ...newDateFilter,
-                defaultPresetRanges: newDateFilter?.defaultPresetRanges?.filter((r) => r?.label !== label) ?? [],
-            });
-        }
-    };
-    const getDefaultInterval = (label) => {
-        return newDateFilter?.defaultPresetRanges?.find((r) => r?.label === label);
-    };
-    const emptyInterval = {
-        week: { type: 'week' },
-        relative: { type: 'relative', value: 1, unit: 'days' },
-        repeating: {
-            type: 'repeating',
-            label: 'Quarter',
-            loopDate: { day: 1, month: 1 },
-            subIntervals: [
-                {
-                    type: 'static',
-                    startDate: { day: 1, month: 1 },
-                    endDate: { day: 31, month: 3 },
-                },
-                {
-                    type: 'static',
-                    startDate: { day: 1, month: 4 },
-                    endDate: { day: 30, month: 6 },
-                },
-                {
-                    type: 'static',
-                    startDate: { day: 1, month: 7 },
-                    endDate: { day: 30, month: 9 },
-                },
-                {
-                    type: 'static',
-                    startDate: { day: 1, month: 10 },
-                    endDate: { day: 31, month: 12 },
-                },
-            ],
-        },
-        static: {
-            type: 'static',
-            label: 'January',
-            startDate: { day: 1, month: 1 },
-            endDate: { day: 31, month: 1 },
-        },
-    };
-    const subIntervalIssues = useMemo(() => {
-        // Helper to check if two days are adjacent (the second follows the first)
-        const areAdjacent = (day1, day2) => {
-            // Create dates in leap year 2024 for proper handling
-            const date1 = new Date(2024, day1.month - 1, day1.day);
-            const date2 = new Date(2024, day2.month - 1, day2.day);
-            // Add one day to first date and check if it equals the second date
-            const nextDay = new Date(date1);
-            nextDay.setDate(nextDay.getDate() + 1);
-            // Compare the dates ignoring time
-            return (nextDay.getDate() === date2.getDate() &&
-                nextDay.getMonth() === date2.getMonth());
-        };
-        return (newDateFilter?.presetOptions?.reduce((acc, interval, index) => {
-            if (interval?.type !== 'repeating' || !interval.subIntervals?.length)
-                return acc;
-            acc[index] = interval.subIntervals?.map((subInterval) => {
-                if (!subInterval)
-                    return 'Sub-interval is empty';
-                // if (!subInterval.label) return "Sub-interval must have a label";
-                if (!subInterval.startDate ||
-                    !subInterval.startDate.day ||
-                    !subInterval.startDate.month)
-                    return 'Sub-interval must have a start date';
-                if (!subInterval.endDate ||
-                    !subInterval.endDate.day ||
-                    !subInterval.endDate.month)
-                    return 'Sub-interval must have an end date';
-                // Verify sub-interval doesn't overlap with other sub-intervals
-                // Use 2024 (leap year) for proper date handling
-                const subIntervalStart = new Date(2024, subInterval.startDate.month - 1, subInterval.startDate.day);
-                const subIntervalEnd = new Date(2024, subInterval.endDate.month - 1, subInterval.endDate.day);
-                const overlappingSubIntervals = interval.subIntervals?.filter((otherSubInterval) => {
-                    if (!otherSubInterval || otherSubInterval === subInterval)
-                        return false;
-                    // Check for proper adjacency with February end transitions
-                    if (subInterval.endDate.month === 2 &&
-                        (subInterval.endDate.day === 28 ||
-                            subInterval.endDate.day === 29) &&
-                        otherSubInterval.startDate?.month === 3 &&
-                        otherSubInterval.startDate?.day === 1) {
-                        if (areAdjacent(subInterval.endDate, otherSubInterval.startDate)) {
-                            return false; // They're adjacent, not overlapping
-                        }
-                    }
-                    // Otherwise do normal overlap check
-                    const otherSubIntervalStart = new Date(2024, (otherSubInterval.startDate?.month ?? 1) - 1, otherSubInterval.startDate?.day ?? 1);
-                    const otherSubIntervalEnd = new Date(2024, (otherSubInterval.endDate?.month ?? 1) - 1, otherSubInterval.endDate?.day ?? 1);
-                    // Check for overlap - intervals overlap if one starts before the other ends
-                    return (subIntervalStart <= otherSubIntervalEnd &&
-                        subIntervalEnd >= otherSubIntervalStart);
-                }) ?? [];
-                if (overlappingSubIntervals.length)
-                    return 'Sub-intervals overlap';
-                return undefined;
-            });
-            return acc;
-        }, {}) ?? {});
-    }, [newDateFilter]);
-    const intervalIssues = useMemo(() => {
-        const ucFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
-        // Helper function to get the next day in month/day format
-        const getNextDay = (month, day) => {
-            const date = new Date(2024, month - 1, day + 1); // Use leap year to handle Feb correctly
-            return {
-                month: date.getMonth() + 1,
-                day: date.getDate(),
-            };
-        };
-        // Helper to compare if two date objects are the same day
-        const isSameDay = (date1, date2) => {
-            return date1.month === date2.month && date1.day === date2.day;
-        };
-        // Helper to check if two days are adjacent (the second follows the first)
-        const areAdjacent = (day1, day2) => {
-            // Normal case: check if next day of day1 is day2
-            const nextDay = getNextDay(day1.month, day1.day);
-            if (isSameDay(nextDay, day2))
-                return true;
-            // Special case for February to March transition
-            // This handles both leap years (Feb 29 -> Mar 1) and non-leap years (Feb 28 -> Mar 1)
-            if (day1.month === 2 &&
-                (day1.day === 28 || day1.day === 29) &&
-                day2.month === 3 &&
-                day2.day === 1) {
-                return true;
-            }
-            // Handle month transitions for months with 30 days
-            if ([4, 6, 9, 11].includes(day1.month) &&
-                day1.day === 30 &&
-                day2.day === 1 &&
-                day2.month === day1.month + 1) {
-                return true;
-            }
-            // Handle month transitions for months with 31 days
-            if ([1, 3, 5, 7, 8, 10, 12].includes(day1.month) &&
-                day1.day === 31 &&
-                day2.day === 1 &&
-                (day2.month === day1.month + 1 ||
-                    (day1.month === 12 && day2.month === 1))) {
-                return true;
-            }
-            return false;
-        };
-        return newDateFilter?.presetOptions?.map((interval, index) => {
-            if (!interval)
-                return 'Option is empty';
-            if (!interval.type)
-                return 'Option must have a type';
-            if ((interval.type === 'repeating' || interval.type === 'static') &&
-                !interval.label)
-                return `${ucFirst(interval.type)} intervals must have a label`;
-            // If interval label matches one of the default intervals, it must not
-            if ([
-                'Week',
-                'Month',
-                'Year',
-                'Last 7 days',
-                'Last 30 days',
-                'Last 90 days',
-                'Last 6 months',
-            ].includes(interval.label ?? '')) {
-                return 'Cannot use a default interval label';
-            }
-            if (interval.type === 'repeating' || interval.type === 'static')
-                if (newDateFilter?.presetOptions?.filter((o, i) => o?.label === interval.label && i !== index).length)
-                    return 'Duplicate label';
-            if (interval.type === 'week' &&
-                newDateFilter?.presetOptions?.filter((o, i) => o?.type === 'week' && i !== index).length)
-                return 'Only one week interval allowed';
-            if (interval.type === 'relative' &&
-                (newDateFilter?.presetOptions?.filter((o) => o?.type === 'relative' &&
-                    o.unit === interval.unit &&
-                    o.value === interval.value)?.length ?? 0) > 1)
-                return 'Duplicate relative interval';
-            if (interval.type === 'static') {
-                if (!interval.startDate ||
-                    !interval.startDate.day ||
-                    !interval.startDate.month)
-                    return 'Must have a start date';
-                if (!interval.endDate ||
-                    !interval.endDate.day ||
-                    !interval.endDate.month)
-                    return 'Must have an end date';
-            }
-            if (interval.type === 'relative') {
-                if (!interval.value)
-                    return 'Must have a value';
-                if (typeof interval.value !== 'number' &&
-                    isNaN(parseInt(interval.value)))
-                    return 'Value must be an integer';
-                if (typeof interval.value !== 'number' && parseInt(interval.value) <= 0)
-                    return 'Value must be positive';
-                if (!interval.unit)
-                    return 'Must have a unit';
-            }
-            if (interval.type === 'repeating') {
-                if (!interval.loopDate ||
-                    !interval.loopDate.day ||
-                    !interval.loopDate.month)
-                    return 'Must have a loop date';
-                if (!interval.subIntervals?.length)
-                    return 'Must have sub-intervals';
-                if (subIntervalIssues[index]?.some((issue) => !!issue))
-                    return 'Sub-intervals have issues';
-                // Verify subintervals don't overlap with each other
-                const subIntervals = interval.subIntervals?.filter((si) => !!si) || [];
-                // First, sort them by start date for validation
-                const sortedIntervals = [...subIntervals].sort((a, b) => {
-                    const aDate = new Date(2024, a.startDate.month - 1, a.startDate.day);
-                    const bDate = new Date(2024, b.startDate.month - 1, b.startDate.day);
-                    return aDate.getTime() - bDate.getTime();
-                });
-                // Find the interval that starts on the loop date
-                const loopDate = interval.loopDate;
-                const startingIntervalIndex = sortedIntervals.findIndex((si) => si?.startDate?.month === loopDate.month &&
-                    si?.startDate?.day === loopDate.day);
-                if (startingIntervalIndex === -1)
-                    return 'No sub-interval starts on the loop date';
-                // Reorder the array to start with the loop date interval
-                const orderedIntervals = [
-                    ...sortedIntervals.slice(startingIntervalIndex),
-                    ...sortedIntervals.slice(0, startingIntervalIndex),
-                ];
-                // Check for contiguity and completeness
-                for (let i = 0; i < orderedIntervals.length - 1; i++) {
-                    const current = orderedIntervals[i];
-                    const next = orderedIntervals[i + 1];
-                    if (!areAdjacent(current.endDate, next.startDate)) {
-                        return `Gap between ${current.label} and ${next.label}`;
-                    }
-                }
-                // Check if the last interval connects back to the first one
-                const last = orderedIntervals[orderedIntervals.length - 1];
-                const first = orderedIntervals[0];
-                if (!areAdjacent(last.endDate, first.startDate)) {
-                    if (!(areAdjacent({ month: 12, day: 31 }, first.startDate) &&
-                        areAdjacent(last.endDate, { month: 1, day: 1 }))) {
-                        return `Gap between ${last.label} and ${first.label}`;
-                    }
-                }
-            }
-        });
-    }, [newDateFilter, subIntervalIssues]);
-    const filteredTables = useMemo(() => {
-        return state.tables.filter((table) => {
-            return (selectedDashboard?.tenantKeys?.[0] === SINGLE_TENANT ||
-                table.ownerTenantFields?.length === 0 ||
-                table.ownerTenantFields?.includes(selectedDashboard?.tenantKeys?.[0] ?? ''));
-        });
-    }, [state.tables, selectedDashboard?.tenantKeys]);
-    const months = useRef([
-        'January',
-        'February',
-        'March',
-        'April',
-        'May',
-        'June',
-        'July',
-        'August',
-        'September',
-        'October',
-        'November',
-        'December',
-    ]);
-    const monthlyInterval = useMemo(() => getDefaultInterval('Monthly'), [newDateFilter?.defaultPresetRanges]);
-    const yearlyInterval = useMemo(() => getDefaultInterval('Yearly'), [newDateFilter?.defaultPresetRanges]);
-    useEffect(() => {
-        if (!selectedDashboard) {
-            return;
-        }
-        setValidationError([]);
-        setCurrentDashboardName(selectedDashboard.name);
-        setIsDateComparison(selectedDashboard?.dateFilter?.comparison ?? false);
-        setNewFilters(selectedDashboard?.filters ?? []);
-        setNewDateFilter(selectedDashboard.dateFilter);
-        setDisplaySubIntervals(selectedDashboard.dateFilter?.presetOptions?.map(() => false) ?? []);
-        setShowDateFilter(!!selectedDashboard.dateFilter);
-        setInitialRange(selectedDashboard.dateFilter?.primaryRange ?? {
-            label: 'Last 30 days',
-            value: 'LAST_30_DAYS',
-        });
-        setFilterNameMap(selectedDashboard.filters.reduce((acc, filter) => {
-            acc[filter.label] = filter.label;
-            return acc;
-        }, {}));
-    }, [selectedDashboard]);
-    const selectablePresetOptions = useMemo(() => {
-        return convertPresetOptionsToSelectableList((newDateFilter?.presetOptions?.filter((option, index) => !!option && !intervalIssues?.[index]) ?? []), newDateFilter?.defaultPresetRanges ?? []);
-    }, [
-        newDateFilter?.presetOptions,
-        newDateFilter?.defaultPresetRanges,
-        intervalIssues,
-    ]);
-    const dashboardValidationError = useMemo(() => {
-        if (!currentDashboardName)
-            return 'Dashboard name cannot be empty';
-        if (newFilters?.some((f) => !f.label || !f.table || !f.field))
-            return 'Filters must have a label, table, and field';
-        if ((newFilters ?? [])
-            .concat(newDateFilter ? [newDateFilter] : [])
-            ?.map((f) => f.label)
-            .filter((label, index, self) => self.indexOf(label) !== index).length)
-            return 'Filters must have unique labels';
-        if (newDateFilter && (!newDateFilter?.label || !initialRange))
-            return 'Date filter must have a label and range';
-        if (intervalIssues?.some((i) => i))
-            return 'Date filter presets have issues';
-        if (!selectablePresetOptions?.find((option) => option.value === initialRange.value))
-            return 'Date filter must have a valid initial range';
-        if (newDateFilter?.defaultPresetRanges?.some((range) => range?.label === 'Yearly' && !range.loopStart))
-            return 'Yearly intervals must have a backwards cutoff date';
-        if (newDateFilter?.defaultPresetRanges?.some((range) => range?.label === 'Monthly' && !range.loopStart))
-            return 'Monthly intervals must have a backwards cutoff date';
-        // Ensure loopEnd is after loopStart
-        if (newDateFilter?.defaultPresetRanges?.some((range) => range?.label === 'Yearly' &&
-            range?.loopEnd &&
-            range?.loopStart &&
-            range.loopEnd <= range.loopStart))
-            return 'Yearly intervals must have an end date that occurs after the start date';
-        if (newDateFilter?.defaultPresetRanges?.some((range) => range?.label === 'Monthly' &&
-            range?.loopEnd &&
-            range?.loopStart &&
-            range.loopEnd <= range.loopStart))
-            return 'Monthly intervals must have an end date that occurs after the start date';
-    }, [
-        currentDashboardName,
-        newFilters,
-        newDateFilter,
-        initialRange,
-        intervalIssues,
-        selectablePresetOptions,
-    ]);
-    const handleAddFilter = async () => {
-        setNewFilters([...newFilters, { label: '' }]);
-    };
-    const normalizeFieldName = (fieldName) => {
-        return (fieldName
-            ?.split('_')
-            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-            .join(' ') ?? '');
-    };
-    const handleSubmitDashboardChanges = async () => {
-        const validationErrorMessages = validateDashboard(newFilters, dashNames, currentDashboardName, newDateFilter ? { ...newDateFilter, comparison: isDateComparison } : null, selectedDashboard);
-        if (validationErrorMessages.length !== 0) {
-            setValidationError(validationErrorMessages);
-            return;
-        }
-        const updatedFilters = newFilters.map((filter) => {
-            const table = filteredTables.find((table) => table?.name === filter?.table);
-            const column = table?.columns.find((col) => col.field === filter?.field);
-            const filterType = column ? getPostgresBasicType(column) : 'string';
-            return {
-                table: filter.table,
-                field: filter.field,
-                labelField: filter.field,
-                label: filter.label,
-                oldLabel: Object.entries(filterNameMap).find(([oldLabel, newLabel]) => newLabel === filter.label && oldLabel !== filter.label)?.[0],
-                filterType,
-                stringFilterType: filter.stringFilterType,
-            };
-        });
-        await updateDashboard(selectedDashboardName, {
-            newName: currentDashboardName,
-            filters: updatedFilters.map((filter) => {
-                return {
-                    ...filter,
-                    filterType: filter.filterType,
-                    dashboardName: currentDashboardName,
-                    options: [],
-                };
-            }),
-            dateFilter: newDateFilter
-                ? {
-                    ...newDateFilter,
-                    comparison: isDateComparison,
-                    primaryRange: initialRange,
-                    presetOptions: newDateFilter.presetOptions
-                        ?.map((interval) => {
-                        if (!interval)
-                            return undefined;
-                        if (interval.type === 'repeating') {
-                            return {
-                                ...interval,
-                                subIntervals: interval.subIntervals?.map((subInterval) => {
-                                    if (!subInterval)
-                                        return undefined;
-                                    return {
-                                        ...subInterval,
-                                        startDate: subInterval.startDate,
-                                        endDate: subInterval.endDate,
-                                    };
-                                }),
-                            };
-                        }
-                        if (interval.type === 'static') {
-                            return {
-                                ...interval,
-                                startDate: interval.startDate,
-                                endDate: interval.endDate,
-                            };
-                        }
-                        if (interval.type === 'relative') {
-                            return {
-                                ...interval,
-                                value: typeof interval.value === 'string'
-                                    ? parseInt(interval.value)
-                                    : interval.value,
-                            };
-                        }
-                        return interval;
-                    })
-                        .filter((interval) => !!interval),
-                }
-                : undefined,
-            // sectionOrder,
-        });
-        await onSave(currentDashboardName);
-        setIsOpen(false);
-    };
-    const handleDeleteFilter = (filter) => {
-        // When a filter is deleted, we don't have any easy method of removing its entry in
-        // the filterMap on the actual dashboard item. We'll just leave it there for now.
-        delete filterNameMap[filter.label];
-        setNewFilters(newFilters.filter((f) => f !== filter));
-    };
-    const handleDeleteDateFilter = () => {
-        setShowDateFilter(false);
-        setNewDateFilter(undefined);
-    };
-    const handleAddDateFilter = () => {
-        setShowDateFilter(true);
-        setNewDateFilter({
-            label: 'Date',
-            defaultPresetRanges: [
-                { label: 'This week' },
-                { label: 'This month' },
-                { label: 'This year' },
-                { label: 'Last 7 days' },
-                { label: 'Last 30 days' },
-                { label: 'Last 90 days' },
-                { label: 'Last 6 months' },
-            ],
-        });
-    };
-    const handleAddInterval = () => {
-        setNewDateFilter({
-            ...newDateFilter,
-            presetOptions: [
-                ...(newDateFilter?.presetOptions ?? []),
-                emptyInterval['static'],
-            ],
-        });
-        setDisplaySubIntervals([...displaySubIntervals, false]);
-    };
-    const handleDeleteInterval = (index) => {
-        const updatedOptions = newDateFilter?.presetOptions?.filter((_, i) => i !== index) ?? [];
-        setNewDateFilter({
-            ...newDateFilter,
-            presetOptions: updatedOptions,
-        });
-        setDisplaySubIntervals(displaySubIntervals.filter((_, i) => i !== index));
-    };
-    const handleAddSubInterval = (index) => {
-        const updatedOptions = newDateFilter?.presetOptions?.map((o, i) => index === i
-            ? {
-                ...o,
-                subIntervals: [
-                    ...(o.subIntervals ?? []),
-                    emptyInterval['static'],
-                ],
-            }
-            : o) ?? [];
-        setNewDateFilter({
-            ...newDateFilter,
-            presetOptions: updatedOptions,
-        });
-    };
-    const handleDeleteSubInterval = (index, subIndex) => {
-        const updatedOptions = newDateFilter?.presetOptions?.map((o, i) => index === i
-            ? {
-                ...o,
-                subIntervals: o.subIntervals?.filter((_, j) => j !== subIndex),
-            }
-            : o) ?? [];
-        setNewDateFilter({
-            ...newDateFilter,
-            presetOptions: updatedOptions,
-        });
-    };
-    const handleDeleteDashboard = async () => {
-        if (confirm('Are you sure? This action cannot be undone.')) {
-            await deleteDashboard(selectedDashboardName);
-            onSave((dashboards?.filter((d) => d.name !== SAVED_QUERIES_DASHBOARD &&
-                d.name !== selectedDashboardName)?.[0]?.name ??
-                (state.client?.defaultDashboard?.name &&
-                    state.client?.defaultDashboard?.name !== selectedDashboardName))
-                ? state.client?.defaultDashboard?.name
-                : null);
-            setIsOpen(false);
-            setNewFilters([]);
-        }
-    };
-    return (_jsx(ModalComponent, { isOpen: isOpen, onClose: () => {
-            setValidationError([]);
-            setIsOpen(false);
-            setIsDateComparison(selectedDashboard?.dateFilter?.comparison ?? false);
-            setNewFilters(selectedDashboard?.filters ?? []);
-            setNewDateFilter(selectedDashboard?.dateFilter ?? undefined);
-            setCurrentDashboardName(selectedDashboardName);
-            setShowDateFilter(!!selectedDashboard?.dateFilter);
-        }, style: {
-            minWidth: '814px',
-        }, children: _jsx(OverflowContainer, { children: _jsx("div", { children: _jsxs("div", { style: {
-                        display: 'flex',
-                        gap: 16,
-                        flexDirection: 'column',
-                        width: '100%',
-                        height: '100%',
-                        maxHeight: '100%',
-                        // overflowY: 'auto',
-                    }, children: [_jsx(HeaderComponent, { label: "Manage dashboard" }), _jsxs("div", { children: [_jsx(InputLabel, { children: "Name" }), _jsx("div", { style: { maxWidth: 230 }, children: _jsx(TextInputComponent, { width: "230px", value: currentDashboardName, onChange: (e) => setCurrentDashboardName(e.target.value) }) })] }), (state.client?.allTenantTypes?.length ?? 1) <= 1 ? null : (_jsxs("div", { children: [_jsx(InputLabel, { tooltip: "Data coming into this dashboard is filtered by this singular tenant. Reports may only reference virtual tables owned by this tenant (or owned by no tenants). This is only selectable while creating a new dashboard", children: "Dashboard Owner" }), _jsx("div", { style: { maxWidth: 230 }, children: _jsx(SelectComponent, { onChange: () => { }, value: selectedDashboard?.tenantKeys?.[0] ?? '', options: state.client?.allTenantTypes?.map((tenant) => {
-                                            return {
-                                                label: tenant.name,
-                                                value: tenant.tenantField,
-                                            };
-                                        }), disabled: true }) })] })), _jsxs("div", { children: [_jsxs("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        gap: '10px',
-                                    }, children: [_jsx(CardSection, { children: "Date Filter" }), showDateFilter && (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'row',
-                                                        gap: '10px',
-                                                    }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(InputLabel, { children: "Label" }), _jsx("div", { style: {
-                                                                        display: 'flex',
-                                                                        flexDirection: 'row',
-                                                                        alignItems: 'center',
-                                                                    }, children: _jsx(TextInputComponent, { value: newDateFilter?.label || '', width: "230px", onChange: (e) => {
-                                                                            setNewDateFilter({
-                                                                                ...newDateFilter,
-                                                                                label: e.target.value,
-                                                                            });
-                                                                        } }) })] }), _jsx("div", { style: {
-                                                                display: 'flex',
-                                                                flexDirection: 'row',
-                                                                gap: '10px',
-                                                            }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(InputLabel, { children: "Initial Range" }), _jsx(SelectComponent, { value: initialRange.value, onChange: (e) => {
-                                                                            setInitialRange(
-                                                                            // InitialDateRangeOptions.find(
-                                                                            //   (table) => table.value === e,
-                                                                            // ) ?? initialRange,
-                                                                            selectablePresetOptions.find((option) => option.value === e) ??
-                                                                                initialRange);
-                                                                        }, options: selectablePresetOptions, theme: state.theme, hideEmptyOption: true })] }) }), _jsx("div", { style: {
-                                                                display: 'flex',
-                                                                flexDirection: 'row',
-                                                                gap: '10px',
-                                                                width: '100%',
-                                                            }, children: _jsx("div", { style: {
-                                                                    display: 'flex',
-                                                                    flexDirection: 'column',
-                                                                    width: '100%',
-                                                                    justifyContent: 'flex-end',
-                                                                }, children: _jsxs("div", { style: {
-                                                                        display: 'flex',
-                                                                        flexDirection: 'row',
-                                                                        gap: 10,
-                                                                        width: '100%',
-                                                                    }, children: [_jsx("div", { style: {
-                                                                                display: 'flex',
-                                                                                flexDirection: 'column',
-                                                                                justifyContent: 'center',
-                                                                                height: '100%',
-                                                                                minWidth: 200,
-                                                                                maxWidth: 200,
-                                                                                width: 200,
-                                                                            } }), _jsx("div", { style: {
-                                                                                width: '100%',
-                                                                                display: 'flex',
-                                                                                justifyContent: 'flex-end',
-                                                                            }, children: _jsx("div", { onClick: () => handleDeleteDateFilter(), style: {
-                                                                                    height: 38,
-                                                                                    width: 38,
-                                                                                    alignItems: 'center',
-                                                                                    justifyContent: 'flex-end',
-                                                                                    display: 'flex',
-                                                                                    cursor: 'pointer',
-                                                                                }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: _jsx("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) }) })] }) }) })] }), _jsx(QuillPopover, { style: {
-                                                        width: 230,
-                                                        marginTop: -8,
-                                                        display: 'none',
-                                                    }, children: _jsxs("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'column',
-                                                            fontFamily: state.theme.fontFamily,
-                                                            gap: 8,
-                                                        }, children: [_jsx("h3", { style: {
-                                                                    fontSize: 14,
-                                                                    fontWeight: 600,
-                                                                    color: state.theme.primaryTextColor,
-                                                                }, children: "Recurring" }), _jsxs("div", { style: {
-                                                                    display: 'flex',
-                                                                    flexDirection: 'row',
-                                                                    gap: 8,
-                                                                    alignItems: 'center',
-                                                                    // justifyContent: 'space-between',
-                                                                    marginTop: yearlyInterval ? -9.5 : 0,
-                                                                    marginBottom: yearlyInterval ? 0 : 9.5,
-                                                                }, children: [_jsxs("div", { style: {
-                                                                            display: 'flex',
-                                                                            alignItems: 'center',
-                                                                            gap: 8,
-                                                                        }, children: [_jsx("input", { type: "checkbox", style: { width: 16, height: 16 }, checked: !!yearlyInterval, onChange: (e) => {
-                                                                                    assignDefaultInterval('Yearly', e.target.checked, new Date(new Date().getFullYear() - 1, 0, 1), new Date(new Date().getFullYear(), 11, 31));
-                                                                                } }), _jsx("div", { children: "Yearly (2023, 2024, 2025, ...)" })] }), !!yearlyInterval && (_jsxs("div", { style: {
-                                                                            display: 'flex',
-                                                                            flexDirection: 'row',
-                                                                            gap: 2,
-                                                                            alignItems: 'center',
-                                                                            marginLeft: 26,
-                                                                        }, children: [_jsx(TextInputComponent, { value: yearlyInterval?.loopStart
-                                                                                    ?.getFullYear()
-                                                                                    .toString() ?? '', placeholder: "Start Year", onChange: (e) => {
-                                                                                    const year = parseInt(e.target.value);
-                                                                                    assignDefaultInterval('Yearly', true, new Date(year, 0, 1), yearlyInterval?.loopEnd);
-                                                                                }, width: "78px", number: true, max: 9999, min: 0, step: 1 }), _jsx("div", { children: "-" }), _jsx(TextInputComponent, { value: yearlyInterval?.loopEnd
-                                                                                    ?.getFullYear()
-                                                                                    .toString() ?? '', placeholder: "End Year", onChange: (e) => {
-                                                                                    const year = parseInt(e.target.value);
-                                                                                    assignDefaultInterval('Yearly', true, yearlyInterval?.loopStart, new Date(year, 11, 31));
-                                                                                }, width: "78px", number: true, max: 9999, min: 0, step: 1 })] }))] }), _jsxs("div", { style: {
-                                                                    display: 'flex',
-                                                                    flexDirection: 'row',
-                                                                    gap: 8,
-                                                                    alignItems: 'center',
-                                                                    justifyContent: 'space-between',
-                                                                    marginTop: monthlyInterval ? -6.5 : 3,
-                                                                    marginBottom: monthlyInterval ? 0 : 9.5,
-                                                                    width: '100%',
-                                                                }, children: [_jsxs("div", { style: {
-                                                                            display: 'flex',
-                                                                            alignItems: 'center',
-                                                                            gap: 8,
-                                                                        }, children: [_jsx("input", { type: "checkbox", style: { width: 16, height: 16 }, checked: !!monthlyInterval, onChange: (e) => {
-                                                                                    // Set date to current month - 12 months
-                                                                                    assignDefaultInterval('Monthly', e.target.checked, new Date(new Date().getFullYear() - 1, new Date().getMonth(), 1), new Date(new Date().getFullYear(), new Date().getMonth(), 1));
-                                                                                } }), _jsx("div", { children: "Monthly (Jan 2025, Feb 2025, ...)" })] }), monthlyInterval && (_jsxs("div", { style: {
-                                                                            display: 'flex',
-                                                                            flexDirection: 'row',
-                                                                            gap: 2,
-                                                                            alignItems: 'center',
-                                                                        }, children: [_jsx(QuillSelectComponentWithCombo, { value: monthlyInterval?.loopStart
-                                                                                    ?.getMonth()
-                                                                                    .toString() ?? '', onChange: (e) => {
-                                                                                    const month = parseInt(e.target.value);
-                                                                                    assignDefaultInterval('Monthly', true, new Date(monthlyInterval?.loopStart?.getFullYear() ??
-                                                                                        2025, month, 1), monthlyInterval?.loopEnd);
-                                                                                }, options: Array.from({ length: 12 }, (_, i) => ({
-                                                                                    label: months.current[i],
-                                                                                    value: i.toString(),
-                                                                                })), width: 120, hideEmptyOption: true }), _jsx(TextInputPrimitive, { value: monthlyInterval?.loopStart
-                                                                                    ?.getFullYear()
-                                                                                    .toString() ?? '', placeholder: "Start Year", onChange: (e) => {
-                                                                                    const year = parseInt(e.target.value);
-                                                                                    assignDefaultInterval('Monthly', true, new Date(year, monthlyInterval?.loopStart?.getMonth() ??
-                                                                                        0, 1), monthlyInterval?.loopEnd);
-                                                                                }, width: "78px", number: true, max: 9999, min: 0, step: 1 }), _jsx("div", { children: "-" }), _jsx(QuillSelectComponentWithCombo, { value: monthlyInterval?.loopEnd
-                                                                                    ?.getMonth()
-                                                                                    .toString() ?? '', onChange: (e) => {
-                                                                                    const month = parseInt(e.target.value);
-                                                                                    assignDefaultInterval('Monthly', true, monthlyInterval?.loopStart, new Date(monthlyInterval?.loopEnd?.getFullYear() ??
-                                                                                        2025, month, 1));
-                                                                                }, options: Array.from({ length: 12 }, (_, i) => ({
-                                                                                    label: months.current[i],
-                                                                                    value: i.toString(),
-                                                                                })), width: 120, hideEmptyOption: true }), _jsx(TextInputPrimitive, { value: monthlyInterval?.loopEnd
-                                                                                    ?.getFullYear()
-                                                                                    .toString() ?? '', placeholder: "End Year", onChange: (e) => {
-                                                                                    const year = parseInt(e.target.value);
-                                                                                    assignDefaultInterval('Monthly', true, monthlyInterval?.loopStart, new Date(year, monthlyInterval?.loopEnd?.getMonth() ?? 0, 1));
-                                                                                }, width: "78px", number: true, max: 9999, min: 0, step: 1 })] }))] }), _jsx("h3", { style: {
-                                                                    fontSize: 14,
-                                                                    fontWeight: 600,
-                                                                    color: state.theme.primaryTextColor,
-                                                                }, children: "Standard" }), _jsxs("div", { style: {
-                                                                    display: 'flex',
-                                                                    flexDirection: 'row',
-                                                                    gap: 8,
-                                                                    alignItems: 'center',
-                                                                }, children: [_jsx("input", { type: "checkbox", style: { width: 16, height: 16 }, checked: !!getDefaultInterval('This week'), onChange: (e) => {
-                                                                            assignDefaultInterval('This week', e.target.checked);
-                                                                        } }), "This week"] }), _jsxs("div", { style: {
-                                                                    display: 'flex',
-                                                                    flexDirection: 'row',
-                                                                    gap: 8,
-                                                                    alignItems: 'center',
-                                                                }, children: [_jsx("input", { type: "checkbox", style: { width: 16, height: 16 }, checked: !!getDefaultInterval('This month'), onChange: (e) => {
-                                                                            assignDefaultInterval('This month', e.target.checked);
-                                                                        } }), "This month"] }), _jsxs("div", { style: {
-                                                                    display: 'flex',
-                                                                    flexDirection: 'row',
-                                                                    gap: 8,
-                                                                    alignItems: 'center',
-                                                                }, children: [_jsx("input", { type: "checkbox", style: { width: 16, height: 16 }, checked: !!getDefaultInterval('This year'), onChange: (e) => {
-                                                                            assignDefaultInterval('This year', e.target.checked);
-                                                                        } }), "This year"] }), _jsxs("div", { style: {
-                                                                    display: 'flex',
-                                                                    flexDirection: 'row',
-                                                                    gap: 8,
-                                                                    alignItems: 'center',
-                                                                }, children: [_jsx("input", { type: "checkbox", style: { width: 16, height: 16 }, checked: !!getDefaultInterval('Last 7 days'), onChange: (e) => {
-                                                                            assignDefaultInterval('Last 7 days', e.target.checked);
-                                                                        } }), "Last 7 days"] }), _jsxs("div", { style: {
-                                                                    display: 'flex',
-                                                                    flexDirection: 'row',
-                                                                    gap: 8,
-                                                                    alignItems: 'center',
-                                                                }, children: [_jsx("input", { type: "checkbox", style: { width: 16, height: 16 }, checked: !!getDefaultInterval('Last 30 days'), onChange: (e) => {
-                                                                            assignDefaultInterval('Last 30 days', e.target.checked);
-                                                                        } }), "Last 30 days"] }), _jsxs("div", { style: {
-                                                                    display: 'flex',
-                                                                    flexDirection: 'row',
-                                                                    gap: 8,
-                                                                    alignItems: 'center',
-                                                                }, children: [_jsx("input", { type: "checkbox", style: { width: 16, height: 16 }, checked: !!getDefaultInterval('Last 90 days'), onChange: (e) => {
-                                                                            assignDefaultInterval('Last 90 days', e.target.checked);
-                                                                        } }), "Last 90 days"] }), _jsxs("div", { style: {
-                                                                    display: 'flex',
-                                                                    flexDirection: 'row',
-                                                                    gap: 8,
-                                                                    alignItems: 'center',
-                                                                }, children: [_jsx("input", { type: "checkbox", style: { width: 16, height: 16 }, checked: !!getDefaultInterval('Last 6 months'), onChange: (e) => {
-                                                                            assignDefaultInterval('Last 6 months', e.target.checked);
-                                                                        } }), "Last 6 months"] })] }) })] })), !showDateFilter && (_jsx("div", { style: { maxWidth: 230 }, children: _jsx(SecondaryButtonComponent, { onClick: handleAddDateFilter, label: "Add date filter +" }) })), newDateFilter && (_jsx(_Fragment, { children: _jsxs("div", { style: {
-                                                    // display: 'flex',
-                                                    display: 'none',
-                                                    flexDirection: 'row',
-                                                    gap: '4px',
-                                                    userSelect: 'none',
-                                                    cursor: 'pointer',
-                                                    width: 'fit-content',
-                                                }, onClick: () => setShowCustomIntervals(!showCustomIntervals), children: [_jsx(InputLabel, { children: "Custom Date Filter Presets" }), showCustomIntervals ? (_jsx(DownChevronIcon, { style: {
-                                                            color: '#4C5462',
-                                                            marginBottom: -2,
-                                                            marginTop: 2,
-                                                        } })) : (_jsx(RightChevronIcon, { style: {
-                                                            color: '#4C5462',
-                                                            marginBottom: -2,
-                                                            marginTop: 2,
-                                                        } }))] }) })), showCustomIntervals && newDateFilter && (_jsxs(_Fragment, { children: [newDateFilter?.presetOptions?.map((interval, index) => !interval ? null : (_jsxs("div", { style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        gap: '10px',
-                                                    }, children: [_jsxs("div", { style: {
-                                                                display: 'flex',
-                                                                flexDirection: 'row',
-                                                                gap: '10px',
-                                                            }, children: [_jsxs("div", { style: {
-                                                                        display: 'flex',
-                                                                        flexDirection: 'column',
-                                                                    }, children: [index === 0 && _jsx(InputLabel, { children: "Label" }), _jsx(TextInputComponent, { value: interval.label ?? '', placeholder: interval.type === 'week'
-                                                                                ? 'Week'
-                                                                                : interval.type === 'relative'
-                                                                                    ? 'Last ' +
-                                                                                        (interval.value === 1
-                                                                                            ? ''
-                                                                                            : interval.value + ' ') +
-                                                                                        (interval.value === 1
-                                                                                            ? interval.unit.substring(0, interval.unit.length - 1)
-                                                                                            : interval.unit)
-                                                                                    : 'Label', width: "230px", onChange: (e) => {
-                                                                                const updatedOptions = newDateFilter?.presetOptions?.map((o, i) => {
-                                                                                    return index === i
-                                                                                        ? { ...o, label: e.target.value }
-                                                                                        : o;
-                                                                                }) ?? [];
-                                                                                setNewDateFilter({
-                                                                                    ...newDateFilter,
-                                                                                    presetOptions: updatedOptions,
-                                                                                });
-                                                                            } })] }), _jsxs("div", { style: {
-                                                                        display: 'flex',
-                                                                        flexDirection: 'column',
-                                                                    }, children: [index === 0 && _jsx(InputLabel, { children: "Type" }), _jsx(SelectComponent, { value: interval.type, options: intervalTypeOptions, onChange: (e) => {
-                                                                                const updatedOptions = newDateFilter?.presetOptions?.map((o, i) => {
-                                                                                    return index === i
-                                                                                        ? emptyInterval[e]
-                                                                                        : o;
-                                                                                }) ?? [];
-                                                                                setNewDateFilter({
-                                                                                    ...newDateFilter,
-                                                                                    presetOptions: updatedOptions,
-                                                                                });
-                                                                            }, theme: state.theme, hideEmptyOption: true })] }), _jsxs("div", { style: {
-                                                                        display: 'flex',
-                                                                        flexDirection: 'column',
-                                                                    }, children: [index === 0 && _jsx(InputLabel, { children: "Value" }), interval.type === 'week' && (_jsx("div", { style: { width: 200, visibility: 'hidden' } })), interval.type === 'relative' && (_jsxs("div", { style: {
-                                                                                display: 'flex',
-                                                                                flexDirection: 'row',
-                                                                                gap: 10,
-                                                                            }, children: [_jsx(TextInputComponent, { value: interval.value?.toString() ?? '0', width: "70px", onChange: (e) => {
-                                                                                        const updatedOptions = newDateFilter?.presetOptions?.map((o, i) => {
-                                                                                            return index === i
-                                                                                                ? { ...o, value: e.target.value }
-                                                                                                : o;
-                                                                                        }) ?? [];
-                                                                                        setNewDateFilter({
-                                                                                            ...newDateFilter,
-                                                                                            presetOptions: updatedOptions,
-                                                                                        });
-                                                                                    }, style: {
-                                                                                        zIndex: 1,
-                                                                                    } }), _jsx(SelectComponent, { value: interval.unit ?? 'days', options: [
-                                                                                        {
-                                                                                            label: interval.value?.toString() === '1'
-                                                                                                ? 'day'
-                                                                                                : 'days',
-                                                                                            value: 'days',
-                                                                                        },
-                                                                                        {
-                                                                                            label: interval.value?.toString() === '1'
-                                                                                                ? 'week'
-                                                                                                : 'weeks',
-                                                                                            value: 'weeks',
-                                                                                        },
-                                                                                        {
-                                                                                            label: interval.value?.toString() === '1'
-                                                                                                ? 'month'
-                                                                                                : 'months',
-                                                                                            value: 'months',
-                                                                                        },
-                                                                                        {
-                                                                                            label: interval.value?.toString() === '1'
-                                                                                                ? 'year'
-                                                                                                : 'years',
-                                                                                            value: 'years',
-                                                                                        },
-                                                                                    ], onChange: (e) => {
-                                                                                        const updatedOptions = newDateFilter?.presetOptions?.map((o, i) => {
-                                                                                            return index === i
-                                                                                                ? { ...o, unit: e }
-                                                                                                : o;
-                                                                                        }) ?? [];
-                                                                                        setNewDateFilter({
-                                                                                            ...newDateFilter,
-                                                                                            presetOptions: updatedOptions,
-                                                                                        });
-                                                                                    }, theme: state.theme, hideEmptyOption: true, style: {
-                                                                                        width: 120,
-                                                                                        maxWidth: 120,
-                                                                                        minWidth: 120,
-                                                                                    } })] })), interval.type === 'repeating' && (_jsx(SingleDatePicker, { selectedDate: interval.loopDate
-                                                                                ? set(new Date(), {
-                                                                                    date: interval.loopDate.day,
-                                                                                    month: (interval.loopDate.month ?? 1) - 1,
-                                                                                    year: 2024,
-                                                                                })
-                                                                                : undefined, onChangeDate: (date) => {
-                                                                                if (!date)
-                                                                                    return;
-                                                                                const updatedOptions = newDateFilter?.presetOptions?.map((o, i) => {
-                                                                                    return index === i
-                                                                                        ? {
-                                                                                            ...o,
-                                                                                            loopDate: {
-                                                                                                day: date.getDate(),
-                                                                                                month: date.getMonth() + 1,
-                                                                                            },
-                                                                                        }
-                                                                                        : o;
-                                                                                }) ?? [];
-                                                                                setNewDateFilter({
-                                                                                    ...newDateFilter,
-                                                                                    presetOptions: updatedOptions,
-                                                                                });
-                                                                            }, disabled: false, style: {
-                                                                                width: 200,
-                                                                                minWidth: 200,
-                                                                            } })), interval.type === 'static' && (_jsx(QuillYearlessDateRangePicker, { dateRange: {
-                                                                                startDate: interval.startDate
-                                                                                    ? set(new Date(), {
-                                                                                        date: interval.startDate.day,
-                                                                                        month: (interval.startDate.month ?? 1) - 1,
-                                                                                        year: 2024,
-                                                                                    })
-                                                                                    : undefined,
-                                                                                endDate: interval.endDate
-                                                                                    ? set(new Date(), {
-                                                                                        date: interval.endDate.day,
-                                                                                        month: (interval.endDate.month ?? 1) - 1,
-                                                                                        year: 2024,
-                                                                                    })
-                                                                                    : undefined,
-                                                                            }, onChangeDateRange: (value) => {
-                                                                                const updatedOptions = newDateFilter?.presetOptions?.map((o, i) => {
-                                                                                    return index === i
-                                                                                        ? {
-                                                                                            ...o,
-                                                                                            startDate: value.startDate
-                                                                                                ? {
-                                                                                                    day: value.startDate.getDate(),
-                                                                                                    month: value.startDate.getMonth() +
-                                                                                                        1,
-                                                                                                }
-                                                                                                : undefined,
-                                                                                            endDate: value.endDate
-                                                                                                ? {
-                                                                                                    day: value.endDate.getDate(),
-                                                                                                    month: value.endDate.getMonth() +
-                                                                                                        1,
-                                                                                                }
-                                                                                                : undefined,
-                                                                                        }
-                                                                                        : o;
-                                                                                }) ?? [];
-                                                                                setNewDateFilter({
-                                                                                    ...newDateFilter,
-                                                                                    presetOptions: updatedOptions,
-                                                                                });
-                                                                            } }))] }), _jsxs("div", { style: {
-                                                                        display: 'flex',
-                                                                        flexDirection: 'column',
-                                                                        height: '100%',
-                                                                    }, children: [index === 0 && (_jsx("div", { style: { visibility: 'hidden' }, children: _jsx(InputLabel, { children: "Inter" }) })), interval.type !==
-                                                                            'repeating' ? null : displaySubIntervals[index] ? (_jsx(DownChevronIcon, { style: {
-                                                                                color: '#4C5462',
-                                                                                // center vertically
-                                                                                alignItems: 'center',
-                                                                                display: 'flex',
-                                                                                marginTop: 10,
-                                                                            }, onClick: () => {
-                                                                                const updatedDisplay = displaySubIntervals.map((d, i) => index === i ? !d : d);
-                                                                                setDisplaySubIntervals(updatedDisplay);
-                                                                            } })) : (_jsx(RightChevronIcon, { style: {
-                                                                                color: '#4C5462',
-                                                                                // center vertically
-                                                                                alignItems: 'center',
-                                                                                display: 'flex',
-                                                                                marginTop: 10,
-                                                                            }, onClick: () => {
-                                                                                const updatedDisplay = displaySubIntervals.map((d, i) => index === i ? !d : d);
-                                                                                setDisplaySubIntervals(updatedDisplay);
-                                                                            } }))] }), _jsxs("div", { style: {
-                                                                        flexGrow: 1,
-                                                                        display: 'flex',
-                                                                        flexDirection: 'row',
-                                                                        justifyContent: 'flex-end',
-                                                                    }, children: [_jsxs("div", { style: {
-                                                                                display: 'flex',
-                                                                                flexDirection: 'column',
-                                                                                marginLeft: 'auto',
-                                                                                justifySelf: 'flex-end',
-                                                                            }, children: [index === 0 && (_jsx("div", { style: { visibility: 'hidden' }, children: _jsx(InputLabel, { children: "Inter" }) })), _jsx(QuillToolTipPortal, { containerStyle: {
-                                                                                        visibility: intervalIssues?.[index]
-                                                                                            ? 'visible'
-                                                                                            : 'hidden',
-                                                                                    }, text: intervalIssues?.[index], children: _jsx(ExclamationFilledIcon, { height: 28, width: 28, style: {
-                                                                                            color: '#dc143c',
-                                                                                            marginTop: 6,
-                                                                                            marginLeft: 'auto',
-                                                                                            // Push to end of row
-                                                                                            display: 'flex',
-                                                                                        } }) })] }), _jsx("div", { style: {
-                                                                                display: 'flex',
-                                                                                justifyContent: 'flex-end',
-                                                                            }, children: _jsx("div", { onClick: () => handleDeleteInterval(index), style: {
-                                                                                    height: 38,
-                                                                                    width: 38,
-                                                                                    alignItems: 'center',
-                                                                                    justifyContent: 'flex-end',
-                                                                                    display: 'flex',
-                                                                                    cursor: 'pointer',
-                                                                                    marginTop: index === 0 ? 25 : 2,
-                                                                                }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: _jsx("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) }) })] })] }), displaySubIntervals[index] &&
-                                                            interval.type === 'repeating' && (_jsxs("div", { style: {
-                                                                display: 'flex',
-                                                                flexDirection: 'column',
-                                                                gap: '10px',
-                                                                marginLeft: 30,
-                                                                width: 'calc(100% - 30px)',
-                                                            }, children: [interval.subIntervals?.map((subInterval, subIndex) => !subInterval ? null : (_jsxs("div", { style: {
-                                                                        display: 'flex',
-                                                                        flexDirection: 'row',
-                                                                        gap: '10px',
-                                                                        width: '100%',
-                                                                    }, children: [_jsx(QuillYearlessDateRangePicker, { dateRange: {
-                                                                                startDate: subInterval.startDate
-                                                                                    ? set(new Date(), {
-                                                                                        date: subInterval.startDate
-                                                                                            .day,
-                                                                                        month: (subInterval.startDate
-                                                                                            .month ?? 1) - 1,
-                                                                                        year: 2024,
-                                                                                    })
-                                                                                    : undefined,
-                                                                                endDate: subInterval.endDate
-                                                                                    ? set(new Date(), {
-                                                                                        date: subInterval.endDate.day,
-                                                                                        month: (subInterval.endDate
-                                                                                            .month ?? 1) - 1,
-                                                                                        year: 2024,
-                                                                                    })
-                                                                                    : undefined,
-                                                                            }, onChangeDateRange: (value) => {
-                                                                                const updatedOptions = newDateFilter?.presetOptions?.map((o, i) => {
-                                                                                    return index === i
-                                                                                        ? {
-                                                                                            ...o,
-                                                                                            subIntervals: o.subIntervals?.map((s, j) => subIndex === j
-                                                                                                ? {
-                                                                                                    ...s,
-                                                                                                    startDate: value.startDate
-                                                                                                        ? {
-                                                                                                            day: value.startDate.getDate(),
-                                                                                                            month: value.startDate.getMonth() +
-                                                                                                                1,
-                                                                                                        }
-                                                                                                        : undefined,
-                                                                                                    endDate: value.endDate
-                                                                                                        ? {
-                                                                                                            day: value.endDate.getDate(),
-                                                                                                            month: value.endDate.getMonth() +
-                                                                                                                1,
-                                                                                                        }
-                                                                                                        : undefined,
-                                                                                                }
-                                                                                                : s),
-                                                                                        }
-                                                                                        : o;
-                                                                                }) ?? [];
-                                                                                setNewDateFilter({
-                                                                                    ...newDateFilter,
-                                                                                    presetOptions: updatedOptions,
-                                                                                });
-                                                                            }, style: {
-                                                                                marginLeft: 420,
-                                                                            } }), _jsxs("div", { style: {
-                                                                                flexGrow: 1,
-                                                                                display: 'flex',
-                                                                                flexDirection: 'row',
-                                                                                justifyContent: 'flex-end',
-                                                                            }, children: [_jsx("div", { style: {
-                                                                                        display: 'flex',
-                                                                                        flexDirection: 'column',
-                                                                                        height: '100%',
-                                                                                        marginLeft: 'auto',
-                                                                                        justifySelf: 'flex-end',
-                                                                                    }, children: _jsx(QuillToolTipPortal, { containerStyle: {
-                                                                                            visibility: intervalIssues?.[index]
-                                                                                                ? 'visible'
-                                                                                                : 'hidden',
-                                                                                        }, text: subIntervalIssues[index]?.[subIndex], children: _jsx(ExclamationFilledIcon, { height: 28, width: 28, style: {
-                                                                                                color: '#dc143c',
-                                                                                                marginTop: 6,
-                                                                                                marginLeft: 'auto',
-                                                                                                // Push to end of row
-                                                                                                display: 'flex',
-                                                                                                visibility: subIntervalIssues[index]?.[subIndex]
-                                                                                                    ? 'visible'
-                                                                                                    : 'hidden',
-                                                                                            } }) }) }), _jsx("div", { style: {
-                                                                                        display: 'flex',
-                                                                                        justifyContent: 'flex-end',
-                                                                                    }, children: _jsx("div", { onClick: () => handleDeleteSubInterval(index, subIndex), style: {
-                                                                                            height: 38,
-                                                                                            width: 38,
-                                                                                            alignItems: 'center',
-                                                                                            justifyContent: 'flex-end',
-                                                                                            display: 'flex',
-                                                                                            cursor: 'pointer',
-                                                                                            marginTop: 2,
-                                                                                        }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: _jsx("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) }) })] })] }, `sub-interval-${subIndex}`))), _jsx("div", { style: {
-                                                                        display: 'flex',
-                                                                        flexDirection: 'row',
-                                                                        gap: '10px',
-                                                                        justifyContent: 'flex-end',
-                                                                        width: 620,
-                                                                        borderTop: '1px solid #d7d7d7',
-                                                                        paddingTop: 10,
-                                                                    }, children: _jsx("div", { style: {
-                                                                            display: 'flex',
-                                                                            flexDirection: 'column',
-                                                                        }, children: _jsx(SecondaryButtonComponent, { onClick: () => handleAddSubInterval(index), label: "Add Sub-Interval +", style: {
-                                                                                width: 200,
-                                                                            } }) }) })] }))] }, `preset-option-${index}`))), _jsx("div", { style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'row',
-                                                        gap: '10px',
-                                                        justifyContent: 'flex-end',
-                                                        width: '100%',
-                                                    }, children: _jsx("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'column',
-                                                        }, children: _jsx(SecondaryButtonComponent, { onClick: handleAddInterval, label: "Add Interval +" }) }) })] }))] }), _jsxs("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        gap: '10px',
-                                    }, children: [_jsx("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'row',
-                                                alignItems: 'center',
-                                                justifyContent: 'space-between',
-                                                marginTop: 20,
-                                            }, children: _jsx(CardSection, { children: "Filters" }) }), newFilters.length > 0 && (_jsx("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'column',
-                                                gap: '6px',
-                                            }, children: newFilters.map((filter, index) => (_jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'row',
-                                                    gap: '10px',
-                                                }, children: [_jsxs("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'column',
-                                                            // maxWidth: 300,
-                                                        }, children: [index === 0 && _jsx(InputLabel, { children: "Label" }), _jsx(TextInputComponent, { value: filter?.label || '', width: "230px", onChange: (e) => {
-                                                                    const currentLabel = filter.label;
-                                                                    const updatedFilters = newFilters.map((otherFilter, i) => index === i
-                                                                        ? {
-                                                                            ...otherFilter,
-                                                                            label: e.target.value,
-                                                                        }
-                                                                        : otherFilter);
-                                                                    setNewFilters(updatedFilters);
-                                                                    // Find the value in the map that matches the current label
-                                                                    const oldLabel = Object.entries(filterNameMap).find(([, newLabel]) => newLabel === currentLabel)?.[0];
-                                                                    if (oldLabel) {
-                                                                        // Update the map to reflect the new label
-                                                                        setFilterNameMap({
-                                                                            ...filterNameMap,
-                                                                            [oldLabel]: e.target.value,
-                                                                        });
-                                                                    }
-                                                                } })] }), _jsxs("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'column',
-                                                            // maxWidth: 250,
-                                                        }, children: [index === 0 && _jsx(InputLabel, { children: "Table" }), _jsx(QuillSelectComponentWithCombo, { width: 200, value: filter.table || '', onChange: (event) => {
-                                                                    const e = event.target.value;
-                                                                    const updatedFilters = newFilters.map((otherFilter, i) => index === i
-                                                                        ? { ...otherFilter, table: e }
-                                                                        : otherFilter);
-                                                                    setNewFilters(updatedFilters);
-                                                                }, options: filteredTables.map((table) => {
-                                                                    return { label: table.name, value: table.name };
-                                                                }), hideEmptyOption: true })] }), _jsxs("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'column',
-                                                            maxWidth: 300,
-                                                        }, children: [index === 0 && _jsx(InputLabel, { children: "Field" }), _jsx(QuillSelectComponentWithCombo, { width: 200, value: filter && filter.field ? filter.field : '', options: filter.table
-                                                                    ? filteredTables
-                                                                        .find((table) => table.name === filter.table)
-                                                                        ?.columns.filter((column) => {
-                                                                        return (convertFieldTypeToJSType(column.fieldType) === 'string');
-                                                                    })
-                                                                        .map((column) => {
-                                                                        return {
-                                                                            label: column.label || column.field,
-                                                                            value: column.field,
-                                                                        };
-                                                                    }) || []
-                                                                    : [], onChange: (event) => {
-                                                                    // Capitalize the label
-                                                                    const e = event.target.value;
-                                                                    const updatedFilters = newFilters.map((otherFilter, i) => index === i
-                                                                        ? {
-                                                                            ...otherFilter,
-                                                                            field: e,
-                                                                            label: filter.label === '' ||
-                                                                                filter.label ===
-                                                                                    normalizeFieldName(filter.field)
-                                                                                ? normalizeFieldName(e)
-                                                                                : filter.label,
-                                                                        }
-                                                                        : otherFilter);
-                                                                    setNewFilters(updatedFilters);
-                                                                }, hideEmptyOption: true, disabled: !filter.table })] }), _jsxs("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'column',
-                                                            width: '100%',
-                                                        }, children: [index === 0 && (_jsx(InputLabel, { children: "Filter Type" })), _jsx("div", { style: {
-                                                                    display: 'flex',
-                                                                    flexDirection: 'column',
-                                                                    alignItems: 'center',
-                                                                    width: '100%',
-                                                                }, children: _jsx("div", { style: {
-                                                                        display: 'flex',
-                                                                        flexDirection: 'row',
-                                                                        alignItems: 'center',
-                                                                        width: '100%',
-                                                                        gap: 10,
-                                                                    }, children: _jsx(SegmentedControl, { theme: state.theme, value: filter && filter.stringFilterType
-                                                                            ? filter.stringFilterType
-                                                                            : 'default', onChange: (e) => {
-                                                                            const updatedFilters = newFilters.map((otherFilter, i) => index === i
-                                                                                ? {
-                                                                                    ...otherFilter,
-                                                                                    stringFilterType: e,
-                                                                                }
-                                                                                : otherFilter);
-                                                                            setNewFilters(updatedFilters);
-                                                                        } }) }) })] }), _jsxs("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'column',
-                                                            width: '100%',
-                                                            justifyContent: 'flex-end',
-                                                        }, children: [index === 0 && _jsx(InputLabel, {}), _jsx("div", { onClick: () => handleDeleteFilter(filter), style: {
-                                                                    height: 38,
-                                                                    alignItems: 'center',
-                                                                    display: 'flex',
-                                                                    cursor: 'pointer',
-                                                                    width: '100%',
-                                                                }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: _jsx("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] })] }, index))) })), _jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: handleAddFilter, label: "Add filter +" }) })] })] }), _jsx(CardSection, { children: "Promote Dashboard" }), _jsx("div", { style: {
-                                marginTop: -4,
-                                display: 'flex',
-                                flexDirection: 'row',
-                                marginRight: 'auto',
-                            }, children: _jsx(SecondaryButtonComponent, { onClick: () => {
-                                    openPromoteModal();
-                                }, label: "Choose Destination", style: {
-                                    width: 'fit-content',
-                                } }) }), _jsx(CardSection, { children: "Danger Zone" }), _jsx("div", { style: { maxWidth: 230 }, children: _jsx(SecondaryButtonComponent, { onClick: handleDeleteDashboard, label: "Delete Dashboard" }) }), _jsx("div", { style: { height: 18 } }), _jsxs("div", { style: {
-                                width: '100%',
-                                display: 'flex',
-                                flexDirection: 'row',
-                                justifyContent: 'space-between',
-                                alignItems: 'center',
-                            }, children: [_jsx(ButtonComponent, { onClick: handleSubmitDashboardChanges, label: "Save changes", disabled: !!dashboardValidationError, tooltipText: dashboardValidationError }), validationError.length !== 0 && (_jsx(ErrorComponent, { errorMessage: validationError && validationError[0], containerStyle: {
-                                        marginLeft: 4,
-                                    } }))] })] }) }) }) }));
-}