@quillsql/admin 1.6.0 → 1.6.2

package/dist/esm/modals/EditFiltersModal.js

@@ -1,338 +1,1310 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useAdmin } from '../AdminProvider';
-import { useDashboard } from '@quillsql/react';
-import { InitialDateRangeOptions, QUILL_SERVER, defaultDateRange, } from '../utils/constants';
+import { useDashboard, useDashboards, } from '@quillsql/react';
+import { SAVED_QUERIES_DASHBOARD, 
+// DateRangeOption,
+// InitialDateRangeOptions,
+SINGLE_TENANT,
+// defaultDateRange,
+ } from '../utils/constants';
 import { defaultTheme, getPostgresBasicType } from '../Admin';
 import InputLabel from '../components/InputLabel';
 import CardSection from '../components/CardSection';
-import TogglePrimitive from '../primitives/TogglePrimitive';
 import { SegmentedControl } from '../components/SegmentedControl';
-export function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, openEditOrderModal, }) {
-    const { state, dispatch } = useAdmin();
-    const [selectedDashboardName, setSelectedDashboardName] = useState('');
-    const { data } = useDashboard(selectedDashboard.name);
+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 } = useDashboard(selectedDashboardName);
     const [isDateComparison, setIsDateComparison] = useState(false);
+    const [currentDashboardName, setCurrentDashboardName] = useState(selectedDashboardName);
     const [newFilters, setNewFilters] = useState([]);
-    const [initialRange, setInitialRange] = useState(defaultDateRange);
+    const [initialRange, setInitialRange] = useState(selectedDashboard?.dateFilter?.primaryRange ?? {
+        label: 'Last 30 days',
+        value: 'LAST_30_DAYS',
+    });
     const [showDateFilter, setShowDateFilter] = useState(false);
-    const [newDateFilter, setNewDateFilter] = useState(null);
+    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;
         }
-        setSelectedDashboardName(selectedDashboard);
-        setIsDateComparison(selectedDashboard.dateFilter?.comparison);
-        setNewFilters(selectedDashboard.filters || []);
+        setValidationError([]);
+        setCurrentDashboardName(selectedDashboard.name);
+        setIsDateComparison(selectedDashboard?.dateFilter?.comparison ?? false);
+        setNewFilters(selectedDashboard?.filters ?? []);
         setNewDateFilter(selectedDashboard.dateFilter);
-        setSelectedDashboardName(selectedDashboard.name);
+        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
+            ?.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 () => {
-        if (!selectedDashboardName ||
-            newFilters.some((filter) => !filter.label) ||
-            (newDateFilter &&
-                Object.keys(newDateFilter).length &&
-                !newDateFilter.label)) {
-            alert('Empty fields');
-            return;
-        }
-        if (newFilters.filter((elem) => !elem.field).length) {
-            alert(`no filter field for: ${newFilters.filter((elem) => !elem.field)[0].label}`);
+        const validationErrorMessages = validateDashboard(newFilters, dashNames, currentDashboardName, newDateFilter ? { ...newDateFilter, comparison: isDateComparison } : null, { ...selectedDashboard, name: currentDashboardName });
+        if (validationErrorMessages.length !== 0) {
+            setValidationError(validationErrorMessages);
             return;
         }
         const updatedFilters = newFilters.map((filter) => {
-            const table = state.tables.find((table) => table.name === filter.table);
-            const filterType = getPostgresBasicType(table.columns.find((col) => col.name === filter.field));
+            const table = filteredTables.find((table) => table?.name === filter?.table);
+            const filterType = getPostgresBasicType(table.columns.find((col) => col?.name === filter?.field));
             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,
             };
         });
-        if (dashNames &&
-            dashNames.length > 0 &&
-            dashNames.some((dashName) => dashName.name === selectedDashboardName &&
-                selectedDashboardName !== selectedDashboard.name)) {
-            alert('Dashboard name already taken!');
-            return;
-        }
-        const fieldsSet = new Set();
-        const hasDuplicateField = updatedFilters.some((filter) => {
-            if (fieldsSet.has(filter.field)) {
-                return true;
-            }
-            else {
-                fieldsSet.add(filter.field);
-                return false;
-            }
-        });
-        if (hasDuplicateField ||
-            (newDateFilter &&
-                Object.keys(newDateFilter).length > 0 &&
-                updatedFilters.some((filter) => filter.filterType === 'date'))) {
-            alert('Maximum of one filter per field');
-            return;
-        }
-        let allValid = true;
-        updatedFilters.forEach((filter) => {
-            if (filter.filterType !== 'string' && filter.filterType !== 'date') {
-                allValid = false;
-                console.error(`Invalid filterType found: ${filter.filterType}`);
-            }
-        });
-        if (!allValid) {
-            alert('We only support string and date filters.');
-            return;
-        }
-        const filterProblems = [];
-        if (newDateFilter) {
-            data.newQueries.forEach((chart) => {
-                if (!chart.dateField ||
-                    !chart.dateField.table ||
-                    !chart.dateField.field) {
-                    filterProblems.push({
-                        chart: chart.name,
-                        filter: `${newDateFilter.label} (Date filter)`,
-                    });
-                }
-            });
-        }
-        updatedFilters.forEach((filter) => {
-            data.newQueries.forEach((chart) => {
-                const chartTable = chart.referencedTables.find((table) => table === filter.table);
-                if (!chartTable) {
-                    filterProblems.push({ chart: chart.name, filter: filter.label });
-                }
-            });
-        });
-        if (filterProblems.length > 0) {
-            alert(`The following filters are not applicable to the following charts:\n\n${filterProblems.map((problem) => `${problem.filter} - ${problem.chart}`).join('\n')}\n\nPlease update the charts or remove the filters.`);
-            return;
-        }
-        const url = `${QUILL_SERVER}/dashfilter/${client._id}/`;
-        const body = {
-            newDashboardName: selectedDashboardName,
-            filters: updatedFilters,
+        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),
                 }
-                : null,
-            name: selectedDashboard.name,
-            databaseType: state.client.databaseType,
-        };
-        const headers = {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer `,
-        };
-        try {
-            const response = await fetch(url, {
-                method: 'POST',
-                headers: headers,
-                body: JSON.stringify(body),
-            });
-            await onSave(selectedDashboardName);
-            setIsOpen(false);
-        }
-        catch (e) {
-            console.log('error');
-        }
+                : 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 = async () => {
+    const handleDeleteDateFilter = () => {
         setShowDateFilter(false);
-        setNewDateFilter(null);
+        setNewDateFilter(undefined);
     };
-    const handleAddDateFilter = async () => {
+    const handleAddDateFilter = () => {
         setShowDateFilter(true);
-        setNewDateFilter({ label: null });
+        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.')) {
-            const URL = `${QUILL_SERVER}/dashboard/${selectedDashboard.name}`;
-            await fetch(URL, {
-                method: 'DELETE',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    clientId: client._id,
-                    databaseType: state.client.databaseType,
-                }),
-            });
+            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([]);
-            await onSave();
         }
     };
-    return (_jsx(ModalComponent, { isOpen: isOpen, close: () => {
+    return (_jsx(ModalComponent, { isOpen: isOpen, onClose: () => {
+            setValidationError([]);
             setIsOpen(false);
-            setSelectedDashboardName(selectedDashboard);
-            setIsDateComparison(selectedDashboard.dateFilter?.comparison);
-            setNewFilters(selectedDashboard.filters || []);
-            setNewDateFilter(selectedDashboard.dateFilter);
-            setSelectedDashboardName(selectedDashboard.name);
-            setShowDateFilter(!!selectedDashboard.dateFilter);
+            setIsDateComparison(selectedDashboard?.dateFilter?.comparison ?? false);
+            setNewFilters(selectedDashboard?.filters ?? []);
+            setNewDateFilter(selectedDashboard?.dateFilter ?? undefined);
+            setCurrentDashboardName(selectedDashboardName);
+            setShowDateFilter(!!selectedDashboard?.dateFilter);
         }, style: {
             minWidth: '814px',
-        }, 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, { value: selectedDashboardName, onChange: (e) => setSelectedDashboardName(e.target.value) }) })] }), _jsxs("div", { children: [_jsxs("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                gap: '10px',
-                            }, children: [_jsx(CardSection, { children: "Date Filter" }), showDateFilter && (_jsx(_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: {
+        }, 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: defaultTheme, 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: 'row',
-                                                            alignItems: 'center',
-                                                        }, children: _jsx(TextInputComponent, { value: newDateFilter?.label || '', 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.label, onChange: (e) => {
-                                                                setInitialRange(InitialDateRangeOptions.find((table) => table.label === e) ?? initialRange);
-                                                            }, options: InitialDateRangeOptions.map((table) => {
-                                                                return { label: table.label, value: table.label };
-                                                            }), theme: defaultTheme })] }) }), _jsx("div", { style: {
-                                                    display: 'flex',
+                                                            flexDirection: 'column',
+                                                            fontFamily: defaultTheme.fontFamily,
+                                                            gap: 8,
+                                                        }, children: [_jsx("h3", { style: {
+                                                                    fontSize: 14,
+                                                                    fontWeight: 600,
+                                                                    color: defaultTheme.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: defaultTheme.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: '10px',
-                                                    width: '100%',
-                                                }, children: _jsxs("div", { style: {
+                                                    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',
-                                                        width: '100%',
-                                                    }, children: [_jsx(InputLabel, { children: "Date Comparison" }), _jsxs("div", { style: {
+                                                        gap: '10px',
+                                                    }, children: [_jsxs("div", { style: {
                                                                 display: 'flex',
                                                                 flexDirection: 'row',
-                                                                gap: 10,
-                                                                width: '100%',
-                                                            }, children: [_jsx("div", { style: {
+                                                                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: defaultTheme, 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: defaultTheme, 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',
-                                                                        justifyContent: 'center',
                                                                         height: '100%',
-                                                                        minWidth: 200,
-                                                                        maxWidth: 200,
-                                                                        width: 200,
-                                                                    }, children: _jsx(TogglePrimitive, { value: isDateComparison, onClick: () => {
-                                                                            setIsDateComparison((isDateComparison) => !isDateComparison);
-                                                                        } }) }), _jsx("div", { style: {
+                                                                    }, 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',
-                                                                    }, children: _jsx("div", { onClick: () => handleDeleteDateFilter(), style: {
-                                                                            height: 38,
-                                                                            width: 38,
-                                                                            alignItems: 'center',
-                                                                            justifyContent: 'flex-end',
+                                                                        width: 620,
+                                                                        borderTop: '1px solid #d7d7d7',
+                                                                        paddingTop: 10,
+                                                                    }, children: _jsx("div", { style: {
                                                                             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" }) }) }) })] })] }) })] }) })), !showDateFilter && (_jsx("div", { style: { maxWidth: 230 }, children: _jsx(SecondaryButtonComponent, { onClick: handleAddDateFilter, label: "Add date filter +" }) }))] }), _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) => {
-                                return (_jsxs("div", { style: {
+                                                                            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: 'row',
+                                        flexDirection: 'column',
                                         gap: '10px',
-                                    }, children: [_jsxs("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'column',
-                                                // maxWidth: 300,
-                                            }, children: [index === 0 && _jsx(InputLabel, { children: "Label" }), _jsx(TextInputComponent, { value: filter?.label || '', onChange: (e) => {
-                                                        const updatedFilters = newFilters.map((otherFilter, i) => index === i
-                                                            ? { ...otherFilter, label: e.target.value }
-                                                            : otherFilter);
-                                                        setNewFilters(updatedFilters);
-                                                    } })] }), _jsxs("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'column',
-                                                maxWidth: 300,
-                                            }, children: [index === 0 && _jsx(InputLabel, { children: "Table" }), _jsx(SelectComponent, { value: filter.table || '', onChange: (e) => {
-                                                        const updatedFilters = newFilters.map((otherFilter, i) => index === i
-                                                            ? { ...otherFilter, table: e }
-                                                            : otherFilter);
-                                                        setNewFilters(updatedFilters);
-                                                    }, options: state.tables.map((table) => {
-                                                        return { label: table.name, value: table.name };
-                                                    }), theme: defaultTheme })] }), _jsxs("div", { style: {
+                                    }, children: [_jsx("div", { style: {
                                                 display: 'flex',
-                                                flexDirection: 'column',
-                                                maxWidth: 300,
-                                            }, children: [index === 0 && _jsx(InputLabel, { children: "Field" }), _jsx(SelectComponent, { defaultValue: "", value: filter && filter.field ? filter.field : '', options: filter.table
-                                                        ? state.tables
-                                                            .find((table) => table.name === filter.table)
-                                                            ?.columns.filter((column) => {
-                                                            return column.fieldType === 'varchar';
-                                                        })
-                                                            .map((column) => {
-                                                            return {
-                                                                label: column.name,
-                                                                value: column.name,
-                                                            };
-                                                        })
-                                                        : [], onChange: (e) => {
-                                                        const updatedFilters = newFilters.map((otherFilter, i) => index === i
-                                                            ? { ...otherFilter, field: e }
-                                                            : otherFilter);
-                                                        setNewFilters(updatedFilters);
-                                                    } })] }), _jsxs("div", { style: {
+                                                flexDirection: 'row',
+                                                alignItems: 'center',
+                                                justifyContent: 'space-between',
+                                                marginTop: 20,
+                                            }, children: _jsx(CardSection, { children: "Filters" }) }), newFilters.length > 0 && (_jsx("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: _jsxs("div", { style: {
+                                                gap: '6px',
+                                            }, children: newFilters.map((filter, index) => (_jsxs("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'row',
+                                                    gap: '10px',
+                                                }, children: [_jsxs("div", { style: {
                                                             display: 'flex',
-                                                            flexDirection: 'row',
-                                                            alignItems: 'center',
-                                                            width: '100%',
-                                                            gap: 10,
-                                                        }, children: [_jsx(SegmentedControl, { theme: defaultTheme, value: filter && filter.stringFilterType
-                                                                    ? filter.stringFilterType
-                                                                    : 'default', onChange: (e) => {
+                                                            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.name,
+                                                                            value: column.name,
+                                                                        };
+                                                                    })
+                                                                    : [], onChange: (event) => {
+                                                                    // Capitalize the label
+                                                                    const e = event.target.value;
                                                                     const updatedFilters = newFilters.map((otherFilter, i) => index === i
-                                                                        ? { ...otherFilter, stringFilterType: e }
+                                                                        ? {
+                                                                            ...otherFilter,
+                                                                            field: e,
+                                                                            label: filter.label === '' ||
+                                                                                filter.label ===
+                                                                                    normalizeFieldName(filter.field)
+                                                                                ? normalizeFieldName(e)
+                                                                                : filter.label,
+                                                                        }
                                                                         : otherFilter);
                                                                     setNewFilters(updatedFilters);
-                                                                } }), _jsx("div", { onClick: () => handleDeleteFilter(filter), style: {
+                                                                }, 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: defaultTheme, 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',
-                                                                    justifyContent: 'flex-end',
                                                                     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", { style: { height: 12 } }), _jsx(SecondaryButtonComponent, { onClick: handleAddFilter, label: "Add filter +" })] }), _jsx(CardSection, { children: "Chart order" }), _jsx("div", { style: { maxWidth: 230 }, children: _jsx(SecondaryButtonComponent, { onClick: () => openEditOrderModal(selectedDashboardName), label: "Edit chart order" }) }), _jsx(CardSection, { children: "Danger Zone" }), _jsx("div", { style: { maxWidth: 230 }, children: _jsx(SecondaryButtonComponent, { onClick: handleDeleteDashboard, label: "Delete Dashboard" }) }), _jsx("div", { style: { height: 18 } }), _jsx("div", { style: { maxWidth: 230 }, children: _jsx(ButtonComponent, { onClick: handleSubmitDashboardChanges, label: "Save changes" }) })] }) }));
+                                                                }, 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] }))] })] }) }) }) }));
 }