@quillsql/admin 1.6.1 → 1.6.2

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

@@ -1,16 +1,14 @@
-export declare function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, openEditOrderModal, }: {
+import { ButtonComponentProps } from '@quillsql/react';
+import { SelectComponentProps } from '../components/UiComponents';
+export declare function NewDashboardModal({ isOpen, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, }: {
     isOpen: boolean;
-    client: any;
     setIsOpen: any;
-    onSave: (name: string) => void;
-    filters: any;
-    dateFilter: any;
-    openEditOrderModal: any;
+    onSave: (name: string, owner: string) => void;
     ModalComponent: any;
     TextInputComponent: any;
-    ButtonComponent: any;
+    ButtonComponent: (props: ButtonComponentProps) => JSX.Element;
     HeaderComponent: any;
-    SelectComponent: any;
+    SelectComponent: (props: SelectComponentProps) => JSX.Element;
     dashNames: any;
     SecondaryButtonComponent: any;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"NewDashboardModal.d.ts","sourceRoot":"","sources":["../../../src/modals/NewDashboardModal.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,oBAAoB,EAAiB,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAYlE,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,SAAS,EACT,MAAM,EACN,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,eAAe,EACf,SAAS,EACT,wBAAwB,GACzB,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,GAAG,CAAC;IACf,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,GAAG,CAAC;IACpB,kBAAkB,EAAE,GAAG,CAAC;IACxB,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9D,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9D,SAAS,EAAE,GAAG,CAAC;IACf,wBAAwB,EAAE,GAAG,CAAC;CAC/B,2CAqoBA"}

package/dist/esm/modals/NewDashboardModal.js

@@ -1,70 +1,74 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// @ts-nocheck
-import { useState, useEffect } from 'react';
+import { useState, useMemo } from 'react';
 import InputLabel from '../components/InputLabel';
 import CardSection from '../components/CardSection';
 import { useAdmin } from '../AdminProvider';
-import { InitialDateRangeOptions, QUILL_SERVER, defaultDateRange, } from '../utils/constants';
-import { getPostgresBasicType } from '../Admin';
-import TogglePrimitive from '../primitives/TogglePrimitive';
+import { SINGLE_TENANT } from '../utils/constants';
+// import TogglePrimitive from '../primitives/TogglePrimitive';
 import { delay } from '../utils/delay';
 import { SegmentedControl } from '../components/SegmentedControl';
-export function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, openEditOrderModal, }) {
-    const { state, dispatch } = useAdmin();
+import { convertFieldTypeToJSType } from '../utils/columnProcessing';
+import { useDashboards } from '@quillsql/react';
+import { defaultOptionsV2 } from '../components/DateRangePicker/dateRangePickerUtils';
+const normalizeFieldName = (fieldName) => {
+    return (fieldName
+        ?.split('_')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ') ?? '');
+};
+export function NewDashboardModal({ isOpen, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, }) {
+    const { state } = useAdmin();
+    const { createDashboard } = useDashboards();
     const [selectedDashboardName, setSelectedDashboardName] = useState('');
-    const [saveButtonMessage, setSaveButtonMessage] = useState('Save changes');
     const [newFilters, setNewFilters] = useState([]);
-    const [isDateComparison, setIsDateComparison] = useState(false);
-    const [initialRange, setInitialRange] = useState(defaultDateRange);
-    const [showDateFilter, setShowDateFilter] = useState(true);
-    const [newDateFilter, setNewDateFilter] = useState(null);
-    const [selectedTable, setSelectedTable] = useState(null);
-    const [field, setField] = useState('');
-    useEffect(() => {
-        if (state.tables?.length) {
-            setSelectedTable(state.tables[0]);
-            setField(state.tables[0].columns.map((elem) => elem.name)[0]);
-        }
-    }, [state.tables]);
+    // const [isDateComparison, setIsDateComparison] = useState<boolean>(false);
+    const [initialRange, setInitialRange] = useState({ label: 'Last 30 days', value: 'LAST_30_DAYS' });
+    const [newDateFilter, setNewDateFilter] = useState(undefined);
+    const [tenantKey, setTenantKey] = useState(state.client?.ownerTenantFields?.[0]);
+    const ownerTenants = useMemo(() => state.client?.allTenantTypes?.filter((tenant) => state.client?.ownerTenantFields?.includes(tenant.tenantField)), [state.client?.allTenantTypes, state.client?.ownerTenantFields]);
+    const filteredTables = useMemo(() => {
+        return state.tables.filter((table) => {
+            return (tenantKey === SINGLE_TENANT ||
+                table.ownerTenantFields?.length === 0 ||
+                table.ownerTenantFields?.includes(tenantKey ?? ''));
+        });
+    }, [state.tables, tenantKey]);
+    const saveButtonDisabled = useMemo(() => {
+        return (newFilters.some((filter) => !filter.label || !filter.table || !filter.field) ||
+            newDateFilter?.label === '' ||
+            !tenantKey ||
+            !selectedDashboardName);
+    }, [newFilters, newDateFilter, selectedDashboardName]);
     const handleAddFilter = async () => {
-        setNewFilters([...newFilters, { label: '', field }]);
+        setNewFilters([...newFilters, {}]);
     };
     const handleSubmitDashboardChanges = async () => {
-        // Stop the next code from running for a second
-        // This is to show the saving message
-        setSaveButtonMessage('Saving...');
-        await delay(200);
         if (!selectedDashboardName ||
-            !newDateFilter ||
             newFilters.some((filter) => !filter.label) ||
-            (newDateFilter &&
-                Object.keys(newDateFilter).length &&
-                !newDateFilter.label)) {
+            (Object.keys(newDateFilter ?? {}).length && !newDateFilter?.label)) {
             alert('Empty fields');
-            setSaveButtonMessage('Save changes');
             return;
         }
         if (newFilters.filter((elem) => !elem.field).length) {
-            alert(`no filter field for: ${newFilters.filter((elem) => !elem.field)[0].label}`);
-            setSaveButtonMessage('Save changes');
+            alert(`no filter field for: ${newFilters.filter((elem) => !elem.field)[0]?.label}`);
             return;
         }
         const updatedFilters = newFilters.map((filter) => {
-            const filterType = getPostgresBasicType(selectedTable.columns.find((col) => col.name === filter.field));
             return {
-                table: selectedTable.name,
+                table: filter.table,
                 field: filter.field,
                 labelField: filter.field,
                 label: filter.label,
-                filterType,
+                filterType: 'string',
                 stringFilterType: filter.stringFilterType,
+                dashboardName: selectedDashboardName,
+                options: [],
             };
         });
         if (dashNames &&
             dashNames.length > 0 &&
-            dashNames.some((dashName) => dashName.name === selectedDashboardName)) {
+            dashNames.some((dash) => dash.name === selectedDashboardName)) {
             alert('Dashboard name already taken!');
-            setSaveButtonMessage('Save changes');
             return;
         }
         const fieldsSet = new Set();
@@ -78,76 +82,56 @@ export function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComp
             }
         });
         if (hasDuplicateField ||
-            (Object.keys(newDateFilter).length > 0 &&
+            (Object.keys(newDateFilter ?? {}).length > 0 &&
                 updatedFilters.some((filter) => filter.filterType === 'date'))) {
             alert('Maximum of one filter per field');
-            setSaveButtonMessage('Save changes');
             return;
         }
         let allValid = true;
         updatedFilters.forEach((filter) => {
-            if (filter.filterType !== 'string' && filter.filterType !== 'date') {
+            if (!filter.table || !filter.field || !filter.label) {
                 allValid = false;
-                console.error(`Invalid filterType found: ${filter.filterType}`);
             }
         });
         if (!allValid) {
-            alert('We only support string and filters.');
-            setSaveButtonMessage('Save changes');
+            alert('Please fill out all filter fields.');
             return;
         }
-        const url = `${QUILL_SERVER}/dashfilter/${client._id}/`;
-        const body = {
-            newDashboardName: selectedDashboardName.trim(),
-            filters: updatedFilters,
-            dateFilter: showDateFilter && {
-                ...newDateFilter,
-                comparison: isDateComparison,
-                primaryRange: initialRange,
-            },
-            name: selectedDashboardName.trim(),
-        };
-        const headers = {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer `,
-        };
-        try {
-            const response = await fetch(url, {
-                method: 'POST',
-                headers: headers,
-                body: JSON.stringify(body),
-            });
-            setSaveButtonMessage('Saved ✅');
-            await delay(200);
-            setIsOpen(false);
-            setSelectedDashboardName('');
-            setNewFilters([]);
-            setIsDateComparison(false);
-            onSave(body);
-            setSaveButtonMessage('Save changes');
-        }
-        catch (e) {
-            console.log('error');
+        if (!tenantKey) {
+            alert('Your dashboard must have an owner');
+            return;
         }
+        await createDashboard({
+            name: selectedDashboardName.trim(),
+            filters: updatedFilters,
+            dateFilter: newDateFilter
+                ? {
+                    ...newDateFilter,
+                    // comparison: isDateComparison,
+                    comparison: false,
+                    primaryRange: initialRange,
+                }
+                : undefined,
+            dashboardOwners: [tenantKey],
+        });
+        onSave(selectedDashboardName, tenantKey);
+        await delay(200);
+        setIsOpen(false);
+        setSelectedDashboardName('');
+        setNewFilters([]);
+        // setIsDateComparison(false);
     };
-    const handleDeleteFilter = (filter) => {
-        setNewFilters(newFilters.filter((f) => f !== filter));
-    };
-    const handleDeleteDateFilter = async () => {
-        setShowDateFilter(false);
-        setNewDateFilter({});
-    };
-    const handleAddDateFilter = async () => {
-        setShowDateFilter(true);
-    };
-    const handleDeleteDashboard = () => {
-        confirm("Are you sure you'd like to delete this dashboard?");
+    const handleDeleteFilter = (index) => {
+        setNewFilters(newFilters.filter((_, i) => i !== index));
     };
-    return (_jsx(ModalComponent, { isOpen: isOpen, close: () => {
+    // const handleDeleteDateFilter = async () => {
+    //   setNewDateFilter(undefined);
+    // };
+    return (_jsx(ModalComponent, { isOpen: isOpen, onClose: () => {
             setIsOpen(false);
             setSelectedDashboardName('');
             setNewFilters([]);
-            setIsDateComparison(false);
+            // setIsDateComparison(false);
         }, style: {
             minWidth: '814px',
             overflow: 'visible',
@@ -156,19 +140,32 @@ export function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComp
                 gap: 16,
                 flexDirection: 'column',
                 width: '100%',
-            }, children: [_jsx(HeaderComponent, { label: "New 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: {
+            }, children: [_jsx(HeaderComponent, { label: "New dashboard" }), _jsxs("div", { children: [_jsx(InputLabel, { children: "Name" }), _jsx("div", { style: { maxWidth: 230 }, children: _jsx(TextInputComponent, { value: selectedDashboardName, onChange: (e) => setSelectedDashboardName(e.target.value) }) })] }), (ownerTenants?.length ?? 0) > 1 && (_jsxs("div", { children: [_jsx(InputLabel, { tooltip: "Which tenant will filter the data coming into this dashboard? You will only be able to use virtual tables owned by this tenant (or owned by no tenants). You will not be able to change this without creating a new dashboard", children: "Dashboard Owner" }), _jsx("div", { style: { maxWidth: 230 }, children: _jsx(SelectComponent, { value: tenantKey ?? '', options: ownerTenants?.map((tenant) => ({
+                                    label: tenant.name,
+                                    value: tenant.tenantField,
+                                })) ?? [], onChange: (e) => {
+                                    setTenantKey(e);
+                                    // delete any filters that are not in the new tenant's tables
+                                    const newFilteredTables = state.tables.filter((table) => {
+                                        return (e === SINGLE_TENANT ||
+                                            table.ownerTenantFields?.length === 0 ||
+                                            table.ownerTenantFields?.includes(e ?? ''));
+                                    });
+                                    const updatedFilters = newFilters.filter((filter) => newFilteredTables.find((table) => table.name === filter.table));
+                                    setNewFilters(updatedFilters);
+                                }, hideEmptyOption: true }) })] })), _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: {
+                            }, children: [_jsx(CardSection, { children: "Date Filter" }), newDateFilter && (_jsx(_Fragment, { children: _jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'row',
-                                            gap: '10px',
+                                            gap: '20px',
                                         }, 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) => {
+                                                        }, children: _jsx(TextInputComponent, { width: 230, value: newDateFilter?.label ?? '', onChange: (e) => {
                                                                 setNewDateFilter({
                                                                     ...newDateFilter,
                                                                     label: e.target.value,
@@ -176,60 +173,53 @@ export function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComp
                                                             } }) })] }), _jsx("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'row',
-                                                    gap: '10px',
+                                                    gap: '20px',
                                                 }, 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) => {
+                                                                setInitialRange(defaultOptionsV2.find((table) => table.label === e) ?? initialRange);
+                                                            }, options: defaultOptionsV2.map((table) => {
                                                                 return { label: table.label, value: table.label };
-                                                            }) })] }) }), _jsx("div", { style: {
+                                                            }) })] }) }), _jsx("div", { onClick: () => {
+                                                    setNewDateFilter(undefined);
+                                                }, style: {
+                                                    height: 38,
+                                                    alignItems: 'center',
+                                                    justifyContent: 'flex-end',
                                                     display: 'flex',
-                                                    flexDirection: 'row',
+                                                    cursor: 'pointer',
                                                     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' }, 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: {
+                                                    marginTop: 'auto',
+                                                }, 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" }) }) })] }) })), !newDateFilter && (_jsx("div", { style: { maxWidth: 230 }, children: _jsx(SecondaryButtonComponent, { onClick: () => 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' },
+                                            ],
+                                        }), 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) => {
+                            }, children: _jsx(CardSection, { children: "Filters" }) }), newFilters.length > 0 && (_jsx("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: '8px',
+                                marginTop: 6,
+                            }, children: newFilters.map((filter, index) => {
                                 return (_jsxs("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'row',
-                                        gap: '10px',
+                                        gap: '20px',
                                     }, children: [_jsxs("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'column',
                                                 maxWidth: 300,
-                                            }, children: [index === 0 && _jsx(InputLabel, { children: "Label" }), _jsx(TextInputComponent, { value: filter.label, onChange: (e) => {
+                                            }, children: [index === 0 && _jsx(InputLabel, { children: "Label" }), _jsx(TextInputComponent, { value: filter.label, width: 230, onChange: (e) => {
                                                         const updatedFilters = newFilters.map((otherFilter, i) => index === i
                                                             ? { ...otherFilter, label: e.target.value }
                                                             : otherFilter);
@@ -238,27 +228,39 @@ export function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComp
                                                 display: 'flex',
                                                 flexDirection: 'column',
                                                 maxWidth: 300,
-                                            }, children: [index === 0 && _jsx(InputLabel, { children: "Table" }), _jsx(SelectComponent, { defaultValue: "", value: selectedTable ? selectedTable.name : '', onChange: (e) => setSelectedTable(state.tables.find((table) => table.name === e)), options: state.tables.map((table) => {
+                                            }, children: [index === 0 && _jsx(InputLabel, { children: "Table" }), _jsx(SelectComponent, { value: filter.table ?? '', onChange: (e) => setNewFilters(newFilters.map((otherFilter, i) => index === i
+                                                        ? { ...otherFilter, table: e }
+                                                        : otherFilter)), options: filteredTables.map((table) => {
                                                         return { label: table.name, value: table.name };
                                                     }) })] }), _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: selectedTable?.columns
-                                                        .filter((column) => {
-                                                        return column.fieldType === 'varchar';
-                                                    })
-                                                        .map((column) => {
-                                                        return {
-                                                            label: column.name,
-                                                            value: column.name,
-                                                        };
-                                                    }), onChange: (e) => {
+                                            }, children: [index === 0 && _jsx(InputLabel, { children: "Field" }), _jsx(SelectComponent, { value: filter?.field ?? '', options: filter?.table
+                                                        ? filteredTables
+                                                            .find((t) => t.name === filter.table)
+                                                            .columns.filter((column) => convertFieldTypeToJSType(column.fieldType) === 'string')
+                                                            .map((column) => {
+                                                            return {
+                                                                label: column.name,
+                                                                value: column.name,
+                                                            };
+                                                        })
+                                                        : [], onChange: (e) => {
+                                                        // Capitalize the label
                                                         const updatedFilters = newFilters.map((otherFilter, i) => index === i
-                                                            ? { ...otherFilter, field: e }
+                                                            ? {
+                                                                ...otherFilter,
+                                                                field: e,
+                                                                label: !filter.label ||
+                                                                    filter.label ===
+                                                                        normalizeFieldName(filter.field)
+                                                                    ? normalizeFieldName(e)
+                                                                    : filter.label,
+                                                            }
                                                             : otherFilter);
                                                         setNewFilters(updatedFilters);
-                                                    } })] }), _jsxs("div", { style: {
+                                                    }, disabled: !filter?.table })] }), _jsxs("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'column',
                                                 width: '100%',
@@ -281,7 +283,7 @@ export function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComp
                                                                         ? { ...otherFilter, stringFilterType: e }
                                                                         : otherFilter);
                                                                     setNewFilters(updatedFilters);
-                                                                } }), _jsx("div", { onClick: () => handleDeleteFilter(filter), style: {
+                                                                } }), _jsx("div", { onClick: () => handleDeleteFilter(index), style: {
                                                                     height: 38,
                                                                     alignItems: 'center',
                                                                     justifyContent: 'flex-end',
@@ -289,5 +291,5 @@ export function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComp
                                                                     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 }) })] }) }));
+                            }) })), _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: 'Create', disabled: saveButtonDisabled }) })] }) }));
 }

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

@@ -0,0 +1,16 @@
+import { ModalComponentProps, SelectComponentProps } from '../components/UiComponents';
+import { ButtonComponentProps } from '@quillsql/react';
+export declare function PromoteDashboardModal({ isOpen, setIsOpen, autoPromoteVirtualTables, setAutoPromoteVirtualTables, handlePromote, ModalComponent, ButtonComponent, SelectComponent, CheckboxComponent, HeaderComponent, ErrorComponent, }: {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    autoPromoteVirtualTables: boolean;
+    setAutoPromoteVirtualTables: (autoPromoteVirtualTables: boolean) => void;
+    handlePromote: (selectedToClient: any) => void;
+    ModalComponent: React.FC<ModalComponentProps>;
+    ButtonComponent: (props: ButtonComponentProps) => JSX.Element;
+    SelectComponent: (props: SelectComponentProps) => JSX.Element;
+    CheckboxComponent: any;
+    HeaderComponent: any;
+    ErrorComponent: any;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PromoteDashboardModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PromoteDashboardModal.d.ts","sourceRoot":"","sources":["../../../src/modals/PromoteDashboardModal.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,SAAS,EACT,wBAAwB,EACxB,2BAA2B,EAC3B,aAAa,EACb,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,cAAc,GACf,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wBAAwB,EAAE,OAAO,CAAC;IAClC,2BAA2B,EAAE,CAAC,wBAAwB,EAAE,OAAO,KAAK,IAAI,CAAC;IACzE,aAAa,EAAE,CAAC,gBAAgB,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/C,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9D,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9D,iBAAiB,EAAE,GAAG,CAAC;IACvB,eAAe,EAAE,GAAG,CAAC;IACrB,cAAc,EAAE,GAAG,CAAC;CACrB,2CAwGA"}

package/dist/esm/modals/PromoteDashboardModal.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useAdmin } from '../AdminProvider';
+export function PromoteDashboardModal({ isOpen, setIsOpen, autoPromoteVirtualTables, setAutoPromoteVirtualTables, handlePromote, ModalComponent, ButtonComponent, SelectComponent, CheckboxComponent, HeaderComponent, ErrorComponent, }) {
+    const { state } = useAdmin();
+    const [validationError, setValidationError] = useState('');
+    const [selectedToClient, setSelectedToClient] = useState();
+    useEffect(() => {
+        setSelectedToClient(state.clients.filter((c) => c.name !== state.client.name)[0]);
+    }, [state.clients]);
+    return (_jsx(ModalComponent, { isOpen: isOpen, onClose: () => {
+            setValidationError('');
+            setIsOpen(false);
+            setSelectedToClient(state.clients.filter((c) => c.name !== state.client.name)[0]);
+        }, style: {
+            minWidth: '400px',
+            overflow: 'visible',
+        }, children: _jsxs("div", { style: {
+                display: 'flex',
+                gap: 16,
+                flexDirection: 'column',
+                width: '100%',
+                height: '100%',
+                maxHeight: '100%',
+            }, children: [_jsx(HeaderComponent, { label: "Promote Dashboard" }), _jsx("div", { id: "promote-dashboard-description", children: "Copy this dashboard to another environment." }), _jsx("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 4,
+                    }, children: _jsx(CheckboxComponent, { label: "Auto-promote virtual tables for reports", isChecked: autoPromoteVirtualTables, onChange: () => {
+                            setAutoPromoteVirtualTables(!autoPromoteVirtualTables);
+                        }, containerStyle: {
+                            gap: 2,
+                        }, labelStyle: {
+                            color: '#666666',
+                            fontSize: '13px',
+                            fontWeight: 400,
+                        } }) }), _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 12,
+                    }, children: [_jsx(SelectComponent, { options: state.clients
+                                .filter((c) => c.name !== state.client.name)
+                                .map((client) => {
+                                return { label: client.name, value: client };
+                            }), onChange: setSelectedToClient, value: selectedToClient, theme: state.theme }), _jsx(ButtonComponent, { disabled: !selectedToClient, onClick: () => handlePromote(selectedToClient), label: "Promote" })] }), validationError.length !== 0 && (_jsx("div", { style: {
+                        width: '100%',
+                        display: 'flex',
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                    }, children: _jsx(ErrorComponent, { errorMessage: validationError }) }))] }) }));
+}

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

@@ -0,0 +1,15 @@
+interface PromoteReportProps {
+    ModalComponent: React.ComponentType<any>;
+    HeaderComponent: React.ComponentType<any>;
+    ButtonComponent: React.ComponentType<any>;
+    SelectComponent: React.ComponentType<any>;
+    CheckboxComponent: React.ComponentType<any>;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    reportId: string;
+    currentClientId: string;
+    currentDashboardName: string;
+}
+export default function PromoteReportModal({ ModalComponent, HeaderComponent, ButtonComponent, SelectComponent, CheckboxComponent, isOpen, setIsOpen, reportId, currentClientId, currentDashboardName, }: PromoteReportProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PromoteReportModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PromoteReportModal.d.ts","sourceRoot":"","sources":["../../../src/modals/PromoteReportModal.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,iBAAiB,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC5C,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,MAAM,EACN,SAAS,EACT,QAAQ,EACR,eAAe,EACf,oBAAoB,GACrB,EAAE,kBAAkB,2CA4LpB"}