@quillsql/admin 1.5.2 → 1.6.1

package/dist/esm/modals/EditFiltersModal.js

@@ -0,0 +1,348 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useAdmin } from '../AdminProvider';
+import { useDashboard } from '@quillsql/react';
+import { InitialDateRangeOptions, QUILL_SERVER, 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';
+import { convertFieldTypeToJSType } from '../utils/columnProcessing';
+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);
+    const [isDateComparison, setIsDateComparison] = useState(false);
+    const [newFilters, setNewFilters] = useState([]);
+    const [initialRange, setInitialRange] = useState(defaultDateRange);
+    const [showDateFilter, setShowDateFilter] = useState(false);
+    const [newDateFilter, setNewDateFilter] = useState(null);
+    useEffect(() => {
+        if (!selectedDashboard) {
+            return;
+        }
+        setSelectedDashboardName(selectedDashboard);
+        setIsDateComparison(selectedDashboard.dateFilter?.comparison);
+        setNewFilters(selectedDashboard.filters || []);
+        setNewDateFilter(selectedDashboard.dateFilter);
+        setSelectedDashboardName(selectedDashboard.name);
+        setShowDateFilter(!!selectedDashboard.dateFilter);
+    }, [selectedDashboard]);
+    const handleAddFilter = async () => {
+        setNewFilters([...newFilters, { label: '' }]);
+    };
+    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}`);
+            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));
+            return {
+                table: filter.table,
+                field: filter.field,
+                labelField: filter.field,
+                label: filter.label,
+                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)`,
+                    });
+                }
+                if (chart.chartType === 'pie' && isDateComparison) {
+                    filterProblems.push({
+                        chart: chart.name,
+                        filter: `${newDateFilter.label} (Date comparison)`,
+                    });
+                }
+            });
+        }
+        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.trim(),
+            filters: updatedFilters,
+            dateFilter: newDateFilter
+                ? {
+                    ...newDateFilter,
+                    comparison: isDateComparison,
+                    primaryRange: initialRange,
+                }
+                : null,
+            name: selectedDashboard.name
+                ? selectedDashboard.name.trim()
+                : selectedDashboardName.trim(),
+            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');
+        }
+    };
+    const handleDeleteFilter = (filter) => {
+        setNewFilters(newFilters.filter((f) => f !== filter));
+    };
+    const handleDeleteDateFilter = async () => {
+        setShowDateFilter(false);
+        setNewDateFilter(null);
+    };
+    const handleAddDateFilter = async () => {
+        setShowDateFilter(true);
+        setNewDateFilter({ label: null });
+    };
+    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,
+                    dashboardName: selectedDashboard.name,
+                }),
+            });
+            setIsOpen(false);
+            setNewFilters([]);
+            await onSave();
+        }
+    };
+    return (_jsx(ModalComponent, { isOpen: isOpen, close: () => {
+            setIsOpen(false);
+            setSelectedDashboardName(selectedDashboard);
+            setIsDateComparison(selectedDashboard.dateFilter?.comparison);
+            setNewFilters(selectedDashboard.filters || []);
+            setNewDateFilter(selectedDashboard.dateFilter);
+            setSelectedDashboardName(selectedDashboard.name);
+            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: {
+                                                            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: 'row',
+                                                    gap: '10px',
+                                                    width: '100%',
+                                                }, children: _jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                        width: '100%',
+                                                    }, children: [_jsx(InputLabel, { children: "Date Comparison" }), _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,
+                                                                    }, children: _jsx(TogglePrimitive, { value: isDateComparison, onClick: () => {
+                                                                            setIsDateComparison((isDateComparison) => !isDateComparison);
+                                                                        } }) }), _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" }) }) }) })] })] }) })] }) })), !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: {
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        gap: '10px',
+                                    }, children: [_jsxs("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                // maxWidth: 300,
+                                            }, children: [index === 0 && _jsx(InputLabel, { children: "Label" }), _jsx(TextInputComponent, { value: filter?.label || '', 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: {
+                                                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 (convertFieldTypeToJSType(column.fieldType) === 'string');
+                                                        })
+                                                            .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: {
+                                                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: {
+                                                            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);
+                                                                } }), _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" }) })] }) }));
+}

package/dist/esm/modals/NewDashboardModal.d.ts

@@ -1,4 +1,4 @@
-export declare function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, setSelectedEditDashboard, SecondaryButtonComponent, openEditOrderModal, }: {
+export declare function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, openEditOrderModal, }: {
     isOpen: boolean;
     client: any;
     setIsOpen: any;
@@ -11,9 +11,7 @@ export declare function NewDashboardModal({ isOpen, client, setIsOpen, onSave, M
     ButtonComponent: any;
     HeaderComponent: any;
     SelectComponent: any;
-    selectedEditDashboard: any;
     dashNames: any;
-    setSelectedEditDashboard: any;
     SecondaryButtonComponent: any;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=NewDashboardModal.d.ts.map

package/dist/esm/modals/NewDashboardModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewDashboardModal.d.ts","sourceRoot":"","sources":["../../../src/modals/NewDashboardModal.tsx"],"names":[],"mappings":"AAeA,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,MAAM,EACN,SAAS,EACT,MAAM,EACN,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,eAAe,EACf,SAAS,EACT,wBAAwB,EACxB,wBAAwB,EACxB,kBAAkB,GACnB,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,GAAG,CAAC;IACZ,SAAS,EAAE,GAAG,CAAC;IACf,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,OAAO,EAAE,GAAG,CAAC;IACb,UAAU,EAAE,GAAG,CAAC;IAChB,kBAAkB,EAAE,GAAG,CAAC;IACxB,cAAc,EAAE,GAAG,CAAC;IACpB,kBAAkB,EAAE,GAAG,CAAC;IACxB,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;IACrB,qBAAqB,EAAE,GAAG,CAAC;IAC3B,SAAS,EAAE,GAAG,CAAC;IACf,wBAAwB,EAAE,GAAG,CAAC;IAC9B,wBAAwB,EAAE,GAAG,CAAC;CAC/B,2CAqgBA"}
+{"version":3,"file":"NewDashboardModal.d.ts","sourceRoot":"","sources":["../../../src/modals/NewDashboardModal.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,MAAM,EACN,SAAS,EACT,MAAM,EACN,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,eAAe,EACf,SAAS,EACT,wBAAwB,EACxB,kBAAkB,GACnB,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,GAAG,CAAC;IACZ,SAAS,EAAE,GAAG,CAAC;IACf,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,OAAO,EAAE,GAAG,CAAC;IACb,UAAU,EAAE,GAAG,CAAC;IAChB,kBAAkB,EAAE,GAAG,CAAC;IACxB,cAAc,EAAE,GAAG,CAAC;IACpB,kBAAkB,EAAE,GAAG,CAAC;IACxB,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;IACrB,SAAS,EAAE,GAAG,CAAC;IACf,wBAAwB,EAAE,GAAG,CAAC;CAC/B,2CA+hBA"}

package/dist/esm/modals/NewDashboardModal.js

@@ -8,7 +8,8 @@ import { InitialDateRangeOptions, QUILL_SERVER, defaultDateRange, } from '../uti
 import { getPostgresBasicType } from '../Admin';
 import TogglePrimitive from '../primitives/TogglePrimitive';
 import { delay } from '../utils/delay';
-export function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, setSelectedEditDashboard, SecondaryButtonComponent, openEditOrderModal, }) {
+import { SegmentedControl } from '../components/SegmentedControl';
+export function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, openEditOrderModal, }) {
     const { state, dispatch } = useAdmin();
     const [selectedDashboardName, setSelectedDashboardName] = useState('');
     const [saveButtonMessage, setSaveButtonMessage] = useState('Save changes');
@@ -56,6 +57,7 @@ export function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComp
                 labelField: filter.field,
                 label: filter.label,
                 filterType,
+                stringFilterType: filter.stringFilterType,
             };
         });
         if (dashNames &&
@@ -96,16 +98,15 @@ export function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComp
         }
         const url = `${QUILL_SERVER}/dashfilter/${client._id}/`;
         const body = {
-            newDashboardName: selectedDashboardName,
+            newDashboardName: selectedDashboardName.trim(),
             filters: updatedFilters,
             dateFilter: showDateFilter && {
                 ...newDateFilter,
                 comparison: isDateComparison,
                 primaryRange: initialRange,
             },
-            name: selectedDashboardName,
+            name: selectedDashboardName.trim(),
         };
-        dispatch({ type: 'SET_DATE_FILTER', payload: body.dateFilter });
         const headers = {
             'Content-Type': 'application/json',
             Authorization: `Bearer `,
@@ -118,12 +119,11 @@ export function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComp
             });
             setSaveButtonMessage('Saved ✅');
             await delay(200);
-            setSelectedEditDashboard(null);
             setIsOpen(false);
             setSelectedDashboardName('');
             setNewFilters([]);
             setIsDateComparison(false);
-            onSave(selectedDashboardName);
+            onSave(body);
             setSaveButtonMessage('Save changes');
         }
         catch (e) {
@@ -150,7 +150,7 @@ export function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComp
             setIsDateComparison(false);
         }, style: {
             minWidth: '814px',
-            maxWidth: '814px',
+            overflow: 'visible',
         }, children: _jsxs("div", { style: {
                 display: 'flex',
                 gap: 16,
@@ -184,39 +184,37 @@ export function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComp
                                                             }) })] }) }), _jsx("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'row',
-                                                    gap: '10px',
+                                                    width: '100%',
                                                 }, children: _jsxs("div", { style: {
                                                         display: 'flex',
                                                         flexDirection: 'column',
-                                                    }, children: [_jsx(InputLabel, { children: "Date Comparison" }), _jsx("div", { style: {
-                                                                display: 'flex',
-                                                                flexDirection: 'column',
-                                                                justifyContent: 'center',
-                                                                width: '100%',
-                                                                height: '100%',
-                                                                minWidth: 120,
-                                                                maxWidth: 230,
-                                                            }, children: _jsx(TogglePrimitive, { value: isDateComparison, onClick: () => {
-                                                                    setIsDateComparison((isDateComparison) => !isDateComparison);
-                                                                } }) })] }) }), _jsx("div", { style: {
-                                                    display: 'flex',
-                                                    flexGrow: 1,
-                                                    flexDirection: 'row',
-                                                    alignItems: 'end',
-                                                    justifyContent: 'end',
-                                                    gap: '10px',
-                                                }, children: _jsx("div", { style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        justifyContent: 'center',
-                                                    }, children: _jsx("div", { onClick: () => handleDeleteDateFilter(), style: {
-                                                            height: 38,
-                                                            width: 42,
-                                                            alignItems: 'center',
-                                                            justifyContent: 'center',
-                                                            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: {
+                                                        width: '100%',
+                                                    }, children: [_jsx(InputLabel, { children: "Date Comparison" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row' }, children: [_jsx("div", { style: {
+                                                                        display: 'flex',
+                                                                        flexDirection: 'row',
+                                                                        justifyContent: 'flex-start',
+                                                                        alignItems: 'center',
+                                                                        width: '100%',
+                                                                        height: '100%',
+                                                                        minWidth: 200,
+                                                                        maxWidth: 200,
+                                                                        width: 200,
+                                                                    }, children: _jsx(TogglePrimitive, { value: isDateComparison, onClick: () => {
+                                                                            setIsDateComparison((isDateComparison) => !isDateComparison);
+                                                                        } }) }), _jsx("div", { style: {
+                                                                        display: 'flex',
+                                                                        flexDirection: 'column',
+                                                                        justifyContent: 'center',
+                                                                        width: '100%',
+                                                                    }, children: _jsx("div", { onClick: () => handleDeleteDateFilter(), style: {
+                                                                            height: 38,
+                                                                            width: 42,
+                                                                            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" }) }) }) })] })] }) })] }) })), !showDateFilter && (_jsx("div", { style: { maxWidth: 230 }, children: _jsx(SecondaryButtonComponent, { onClick: handleAddDateFilter, label: "Add date filter +" }) }))] }), _jsx("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'row',
                                 alignItems: 'center',
@@ -246,31 +244,50 @@ export function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComp
                                                 display: 'flex',
                                                 flexDirection: 'column',
                                                 maxWidth: 300,
-                                            }, children: [index === 0 && _jsx(InputLabel, { children: "Field" }), _jsx("div", { style: {
+                                            }, children: [index === 0 && _jsx(InputLabel, { children: "Field" }), _jsx(SelectComponent, { defaultValue: "", value: filter && filter.field ? filter.field : '', options: selectedTable?.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: {
+                                                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: {
                                                             display: 'flex',
                                                             flexDirection: 'row',
                                                             alignItems: 'center',
-                                                        }, children: [_jsx(SelectComponent, { defaultValue: "", value: filter && filter.field ? filter.field : '', options: selectedTable?.columns.map((column) => {
-                                                                    return {
-                                                                        label: column.name,
-                                                                        value: column.name,
-                                                                    };
-                                                                }), onChange: (e) => {
+                                                            width: '100%',
+                                                            gap: 10,
+                                                        }, children: [_jsx(SegmentedControl, { value: filter && filter.stringFilterType
+                                                                    ? filter.stringFilterType
+                                                                    : 'default', onChange: (e) => {
+                                                                    console.log(e);
                                                                     const updatedFilters = newFilters.map((otherFilter, i) => index === i
-                                                                        ? { ...otherFilter, field: e }
+                                                                        ? { ...otherFilter, stringFilterType: e }
                                                                         : otherFilter);
                                                                     setNewFilters(updatedFilters);
                                                                 } }), _jsx("div", { onClick: () => handleDeleteFilter(filter), style: {
                                                                     height: 38,
-                                                                    width: 42,
                                                                     alignItems: 'center',
-                                                                    justifyContent: '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" }) }) })] }) })] })] }));
                             }) })), _jsx("div", { style: { height: 12 } }), _jsx(SecondaryButtonComponent, { onClick: handleAddFilter, label: "Add filter +" })] }), _jsx("div", { style: { height: 18 } }), _jsx("div", { style: { maxWidth: 230 }, children: _jsx(ButtonComponent, { onClick: handleSubmitDashboardChanges, label: saveButtonMessage }) })] }) }));
 }

package/dist/esm/modals/PromoteDashModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromoteDashModal.d.ts","sourceRoot":"","sources":["../../../src/modals/PromoteDashModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAS,MAAM,UAAU,CAAC;AAmE7C,UAAU,qBAAqB;IAC7B,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,GAAG,CAAC;IACZ,UAAU,EAAE,GAAG,EAAE,CAAC;IAClB,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,UAAU,CAAC;CACnB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,cAAc,EACd,MAAM,EACN,SAAS,EACT,QAAQ,EACR,MAAM,EACN,UAAU,EACV,OAAO,EACP,KAAK,GACN,EAAE,qBAAqB,2CA2HvB"}
+{"version":3,"file":"PromoteDashModal.d.ts","sourceRoot":"","sources":["../../../src/modals/PromoteDashModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAS,MAAM,UAAU,CAAC;AAoE7C,UAAU,qBAAqB;IAC7B,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,GAAG,CAAC;IACZ,UAAU,EAAE,GAAG,EAAE,CAAC;IAClB,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,UAAU,CAAC;CACnB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,cAAc,EACd,MAAM,EACN,SAAS,EACT,QAAQ,EACR,MAAM,EACN,UAAU,EACV,OAAO,EACP,KAAK,GACN,EAAE,qBAAqB,2CAqIvB"}

package/dist/esm/modals/PromoteDashModal.js

@@ -3,6 +3,7 @@ import { useAdmin } from '../AdminProvider';
 import { DropDownMenu } from '../components';
 import { useEffect, useState } from 'react';
 import { QUILL_SERVER } from '../utils/constants';
+import { QuillSelectComponent } from '../components/QuillSelect';
 const createStyles = (theme) => ({
     modalContent: {
         display: 'flex',
@@ -44,7 +45,7 @@ const createStyles = (theme) => ({
         marginTop: '0px',
         marginBottom: '4px',
         fontWeight: theme.labelFontWeight,
-        color: theme.secondaryTextColor,
+        color: theme.primaryTextColor,
     },
     group: {
         display: 'flex',
@@ -69,7 +70,7 @@ export default function PromoteDashModal({ ModalComponent, isOpen, setIsOpen, cl
     const [selectedToClient, setSelectedToClient] = useState();
     const styles = createStyles(theme);
     useEffect(() => {
-        setModalSelectedDashboard(state.selectedDashboard);
+        setModalSelectedDashboard(state.selectedDashboard.name);
         setSelectedToClient(state.clients.filter((c) => c.name !== state.client.name)[0]);
     }, [state.selectedDashboard, state.clients]);
     const handlePromote = async () => {
@@ -95,11 +96,17 @@ export default function PromoteDashModal({ ModalComponent, isOpen, setIsOpen, cl
             console.error('Promotion failed:', error);
         }
     };
-    return (_jsx(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: _jsxs("div", { style: {
+    return (_jsx(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), style: { overflow: 'visible' }, children: _jsxs("div", { style: {
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: 'flex-start',
-            }, children: [_jsx("div", { style: styles.modalContent, children: _jsx("h1", { style: styles.modalHeader, children: "Promote Changes" }) }), _jsxs("div", { style: styles.container, children: [_jsx("h1", { style: styles.header, children: "Dashboard" }), _jsx("div", { style: styles.text, children: _jsx(DropDownMenu, { items: dashboards, setSelected: setModalSelectedDashboard, selected: modalSelectedDashboard, theme: theme }) })] }), _jsxs("div", { style: styles.multiContainer, children: [_jsxs("div", { style: styles.group, children: [_jsx("h1", { style: styles.header, children: "From" }), _jsx("div", { style: styles.text, children: _jsx(DropDownMenu, { items: [client], setSelected: () => { }, selected: client, theme: theme, disabled: true }) })] }), _jsxs("div", { style: styles.group, children: [_jsx("h1", { style: styles.header, children: "To" }), _jsx("div", { style: styles.text, children: _jsx(DropDownMenu, { items: clients.filter((c) => c.name !== client.name), setSelected: setSelectedToClient, selected: selectedToClient, theme: theme }) })] })] }), _jsx("div", { style: {
+            }, children: [_jsx("div", { style: styles.modalContent, children: _jsx("h1", { style: styles.modalHeader, children: "Promote Changes" }) }), _jsx("div", { style: styles.container, children: _jsx("div", { style: styles.text, children: _jsx(QuillSelectComponent, { label: "Dashboard", options: dashboards.map((dashboard) => {
+                                return { label: dashboard.name, value: dashboard.name };
+                            }), onChange: setModalSelectedDashboard, value: modalSelectedDashboard, theme: theme }) }) }), _jsxs("div", { style: styles.multiContainer, children: [_jsxs("div", { style: styles.group, children: [_jsx("h1", { style: styles.header, children: "From" }), _jsx("div", { style: styles.text, children: _jsx(DropDownMenu, { items: [client], setSelected: () => { }, selected: client, theme: theme, disabled: true }) })] }), _jsx("div", { style: styles.group, children: _jsx("div", { style: styles.text, children: _jsx(QuillSelectComponent, { label: "To", options: clients
+                                        .filter((c) => c.name !== client.name)
+                                        .map((client) => {
+                                        return { label: client.name, value: client };
+                                    }), onChange: setSelectedToClient, value: selectedToClient, theme: theme }) }) })] }), _jsx("div", { style: {
                         display: 'flex',
                         justifyContent: 'center',
                         alignItems: 'center',