@quillsql/admin 1.3.4 → 1.3.6

package/dist/esm/hooks/useItemBeingEdited.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+import { createContext, useContext, useReducer, } from 'react';
+/**
+ * The actual context that this hook will monitor.
+ */
+const ItemBeingEditedContext = createContext(null);
+const reducer = (_, action) => {
+    switch (action.type) {
+        case 'SET_ITEM': {
+            return action.value;
+        }
+        case 'CLEAR_ITEM': {
+            return null;
+        }
+        // No default necessary because action.type is a union of string literals
+    }
+};
+export const useItemBeingEdited = () => {
+    const [todos, dispatch] = useReducer(reducer, null);
+    const foo = useContext(ItemBeingEditedContext);
+};
+export const ItemBeingEditedProvider = (props) => {
+    return (_jsx(ItemBeingEditedContext.Provider, { value: { state, dispatch }, children: children }));
+};

package/dist/esm/icons/ArrowDownHeadIcon.d.ts

@@ -0,0 +1,5 @@
+declare const ArrowDownHeadIcon: ({ ...props }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ArrowDownHeadIcon;
+//# sourceMappingURL=ArrowDownHeadIcon.d.ts.map

package/dist/esm/icons/ArrowDownHeadIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowDownHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/icons/ArrowDownHeadIcon.tsx"],"names":[],"mappings":"AAAA,QAAA,MAAM,iBAAiB;;6CActB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/esm/icons/ArrowDownHeadIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ArrowDownHeadIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" })] }));
+export default ArrowDownHeadIcon;

package/dist/esm/icons/XMarkIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export default function XMarkIcon(props: any): JSX.Element;
+//# sourceMappingURL=XMarkIcon.d.ts.map

package/dist/esm/icons/XMarkIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XMarkIcon.d.ts","sourceRoot":"","sources":["../../../src/icons/XMarkIcon.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CA4BzD"}

package/dist/esm/icons/XMarkIcon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function XMarkIcon(props) {
+    return (_jsx("div", { style: {
+            height: 38,
+            width: 42,
+            alignItems: 'center',
+            justifyContent: 'center',
+            display: 'flex',
+            cursor: 'pointer',
+        }, ...props, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: props.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" }) }) }));
+}

package/dist/esm/icons/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ArrowDownHeadIcon } from './ArrowDownHeadIcon';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/icons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/icons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/esm/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Admin } from './Admin';
+export { AdminProvider } from './AdminProvider';
+export { default as DashboardManager } from './public_components/DashboardManager';
+export { default as DashboardBuilder } from './public_components/DashboardBuilder';
+export { default as SQLViewManager } from './public_components/SQLViewManager';
+export { default as CreateEnvironment } from './public_components/CreateEnvironment';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uCAAuC,CAAC"}

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+interface EditDashboardsModalProps {
+    ModalComponent: React.ComponentType<any>;
+    TextInputComponent: React.ComponentType<any>;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    clientId: string;
+    ButtonComponent: React.ComponentType<any>;
+    SecondaryButtonComponent: React.ComponentType<any>;
+    openEditFilterModal: (dashboardName: string) => void;
+    openEditOrderModal: (dashboardName: string) => void;
+    openAddDashboardModal: () => void;
+    HeaderComponent: React.ComponentType<any>;
+    setDashboardData: (dashboardData: any) => void;
+    dashboards: any[];
+    getDashNames: () => void;
+}
+export default function EditDashboardsModal({ ModalComponent, TextInputComponent, isOpen, setIsOpen, clientId, ButtonComponent, SecondaryButtonComponent, openEditFilterModal, openEditOrderModal, openAddDashboardModal, HeaderComponent, setDashboardData, dashboards, getDashNames, }: EditDashboardsModalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EditDashboardsModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditDashboardsModal.d.ts","sourceRoot":"","sources":["../../../src/modals/EditDashboardsModal.tsx"],"names":[],"mappings":";AAGA,UAAU,wBAAwB;IAChC,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,kBAAkB,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,wBAAwB,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACnD,mBAAmB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,kBAAkB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,gBAAgB,EAAE,CAAC,aAAa,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,GAAG,EAAE,CAAC;IAClB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,cAAc,EACd,kBAAkB,EAClB,MAAM,EACN,SAAS,EACT,QAAQ,EACR,eAAe,EACf,wBAAwB,EACxB,mBAAmB,EACnB,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,gBAAgB,EAChB,UAAU,EACV,YAAY,GACb,EAAE,wBAAwB,2CAyJ1B"}

package/dist/esm/modals/EditDashboardsModal.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { theme } from '../Admin';
+import { QUILL_SERVER } from '../utils/constants';
+export default function EditDashboardsModal({ ModalComponent, TextInputComponent, isOpen, setIsOpen, clientId, ButtonComponent, SecondaryButtonComponent, openEditFilterModal, openEditOrderModal, openAddDashboardModal, HeaderComponent, setDashboardData, dashboards, getDashNames, }) {
+    // const [dashboards, setDashboards] = useState([]);
+    // useEffect(() => {
+    //   async function getDashboards(clientId) {
+    //     const url = `${QUILL_SERVER}/dashnames/${clientId}/`;
+    //     const response2 = await fetch(url, {
+    //       method: "GET",
+    //       headers: {
+    //         Authorization: "Bearer ", // Ensure you append your token after 'Bearer ' if needed
+    //       },
+    //     });
+    //     // If you need to retrieve the JSON data from the response:
+    //     const data = await response2.json();
+    //     setDashboards(data);
+    //   }
+    //   if (clientId) {
+    //     getDashboards(clientId);
+    //   }
+    // }, [clientId]);
+    async function handleDeleteDashboard(dashboardName) {
+        const url = `${QUILL_SERVER}/dashdelete/${clientId}/`;
+        const body = {
+            name: dashboardName,
+        };
+        const headers = {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer `,
+        };
+        try {
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: headers,
+                body: JSON.stringify(body),
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            const responseData = await response.json();
+            if (responseData) {
+                getDashNames();
+                return;
+            }
+        }
+        catch (e) {
+            console.log('error', e);
+        }
+    }
+    return (_jsx(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: _jsxs("div", { children: [_jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                    }, children: [_jsx("h1", { style: {
+                                fontWeight: '600',
+                                fontSize: 24,
+                                paddingBottom: 8,
+                                color: theme.primaryTextColor,
+                            }, children: "Dashboards" }), dashboards &&
+                            dashboards.map((dashboardName, index) => {
+                                return (_jsxs("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        paddingTop: 5,
+                                        width: 400,
+                                        paddingBottom: 5,
+                                        alignItems: 'center',
+                                        justifyContent: 'space-between',
+                                    }, children: [_jsx("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                            }, children: _jsx("div", { style: {
+                                                    marginRight: 12,
+                                                    fontWeight: '600',
+                                                    fontSize: 16,
+                                                    color: theme.primaryTextColor,
+                                                }, children: dashboardName.name }) }), _jsx("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                            }, children: _jsxs("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'row',
+                                                    alignItems: 'flex-end',
+                                                }, children: [_jsx(SecondaryButtonComponent, { onClick: () => openEditFilterModal(dashboardName.name), label: "Edit" }), _jsx("div", { style: { width: 8 } }), _jsx(SecondaryButtonComponent, { onClick: () => openEditOrderModal(dashboardName.name), label: "Reorder" }), _jsx("div", { style: { width: 8 } }), _jsx(SecondaryButtonComponent, { onClick: () => handleDeleteDashboard(dashboardName.name), label: "Delete" })] }) })] }, dashboardName + index));
+                            })] }), _jsx("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                        marginTop: 20,
+                    }, children: _jsx(ButtonComponent, { onClick: openAddDashboardModal, label: "Create new dashboard" }) })] }) }));
+}

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

@@ -0,0 +1,19 @@
+export declare function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, setSelectedEditDashboard, SecondaryButtonComponent, openEditOrderModal, }: {
+    isOpen: boolean;
+    client: any;
+    setIsOpen: any;
+    onSave: (name: string) => void;
+    filters: any;
+    dateFilter: any;
+    openEditOrderModal: any;
+    ModalComponent: any;
+    TextInputComponent: any;
+    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

@@ -0,0 +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"}

package/dist/esm/modals/NewDashboardModal.js

@@ -0,0 +1,276 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// @ts-nocheck
+import { useState, useEffect } 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 { delay } from '../utils/delay';
+export function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, setSelectedEditDashboard, SecondaryButtonComponent, openEditOrderModal, }) {
+    const { state, dispatch } = useAdmin();
+    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 handleAddFilter = async () => {
+        setNewFilters([...newFilters, { label: '', field }]);
+    };
+    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)) {
+            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');
+            return;
+        }
+        const updatedFilters = newFilters.map((filter) => {
+            const filterType = getPostgresBasicType(selectedTable.columns.find((col) => col.name === filter.field));
+            return {
+                table: selectedTable.name,
+                field: filter.field,
+                labelField: filter.field,
+                label: filter.label,
+                filterType,
+            };
+        });
+        if (dashNames &&
+            dashNames.length > 0 &&
+            dashNames.some((dashName) => dashName.name === selectedDashboardName)) {
+            alert('Dashboard name already taken!');
+            setSaveButtonMessage('Save changes');
+            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 ||
+            (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') {
+                allValid = false;
+                console.error(`Invalid filterType found: ${filter.filterType}`);
+            }
+        });
+        if (!allValid) {
+            alert('We only support string and filters.');
+            setSaveButtonMessage('Save changes');
+            return;
+        }
+        const url = `${QUILL_SERVER}/dashfilter/${client._id}/`;
+        const body = {
+            newDashboardName: selectedDashboardName,
+            filters: updatedFilters,
+            dateFilter: {
+                ...newDateFilter,
+                comparison: isDateComparison,
+                primaryRange: initialRange,
+            },
+            name: selectedDashboardName,
+        };
+        dispatch({ type: 'SET_DATE_FILTER', payload: body.dateFilter });
+        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);
+            setSelectedEditDashboard(null);
+            setIsOpen(false);
+            setSelectedDashboardName('');
+            setNewFilters([]);
+            setIsDateComparison(false);
+            onSave(selectedDashboardName);
+            setSaveButtonMessage('Save changes');
+        }
+        catch (e) {
+            console.log('error');
+        }
+    };
+    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?");
+    };
+    return (_jsx(ModalComponent, { isOpen: isOpen, close: () => {
+            setIsOpen(false);
+            setSelectedDashboardName('');
+            setNewFilters([]);
+            setIsDateComparison(false);
+        }, style: {
+            minWidth: '814px',
+            maxWidth: '814px',
+        }, children: _jsxs("div", { style: {
+                display: 'flex',
+                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: {
+                                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 };
+                                                            }) })] }) }), _jsx("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'row',
+                                                    gap: '10px',
+                                                }, 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: {
+                                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, { defaultValue: "", value: selectedTable ? selectedTable.name : '', onChange: (e) => setSelectedTable(state.tables.find((table) => table.name === e)), options: state.tables.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("div", { style: {
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                        alignItems: 'center',
+                                                    }, 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) => {
+                                                                    const updatedFilters = newFilters.map((otherFilter, i) => index === i
+                                                                        ? { ...otherFilter, field: e }
+                                                                        : otherFilter);
+                                                                    setNewFilters(updatedFilters);
+                                                                } }), _jsx("div", { onClick: () => handleDeleteFilter(filter), 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" }) }) })] }) })] })] }));
+                            }) })), _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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { QuillTheme } from '../Admin';
+interface PromoteDashModalProps {
+    ButtonComponent: React.ComponentType<any>;
+    ModalComponent: React.ComponentType<any>;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    clientId: string;
+    client: any;
+    dashboards: any[];
+    clients: any[];
+    selectedDashboard: string;
+    theme: QuillTheme;
+}
+export default function PromoteDashModal({ ModalComponent, isOpen, setIsOpen, clientId, client, dashboards, clients, theme, }: PromoteDashModalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PromoteDashModal.d.ts.map

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

@@ -0,0 +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"}