@quillsql/admin 1.3.0 → 1.3.2

package/dist/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/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/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/{lib/index.d.ts → dist/index.js}

@@ -3,3 +3,4 @@ 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';

package/{lib → dist}/modals/EditDashboardsModal.d.ts

@@ -17,3 +17,4 @@ interface EditDashboardsModalProps {
 }
 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/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/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/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/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/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/{lib → dist}/modals/PromoteDashModal.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { QuillTheme } from "../Admin";
+import { QuillTheme } from '../Admin';
 interface PromoteDashModalProps {
     ButtonComponent: React.ComponentType<any>;
     ModalComponent: React.ComponentType<any>;
@@ -14,3 +14,4 @@ interface PromoteDashModalProps {
 }
 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/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"}

package/dist/modals/PromoteDashModal.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAdmin } from '../AdminProvider';
+import { DropDownMenu } from '../components';
+import { useEffect, useState } from 'react';
+import { QUILL_SERVER } from '../utils/constants';
+const createStyles = (theme) => ({
+    modalContent: {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    modalHeader: {
+        fontWeight: '600',
+        fontSize: 20,
+        paddingBottom: 4,
+        color: theme.primaryTextColor,
+    },
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        gap: '5px',
+        marginTop: 20,
+    },
+    multiContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: '20px',
+        marginTop: 20,
+    },
+    header: {
+        fontSize: theme.fontSize,
+        paddingTop: '0px',
+        marginTop: '0px',
+        marginBottom: '0px',
+        fontWeight: theme.labelFontWeight,
+        color: theme.primaryTextColor,
+    },
+    text: {
+        fontSize: theme.fontSize,
+        paddingTop: '0px',
+        marginTop: '0px',
+        marginBottom: '4px',
+        fontWeight: theme.labelFontWeight,
+        color: theme.secondaryTextColor,
+    },
+    group: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'start',
+        gap: '5px',
+    },
+    button: {
+        flexGrow: 1,
+        fontSize: theme.fontSize,
+        fontWeight: '600',
+        padding: '10px 20px',
+        marginTop: 20,
+        backgroundColor: theme.primaryButtonColor,
+        borderRadius: '5px',
+        color: theme.primaryButtonTextColor,
+    },
+});
+export default function PromoteDashModal({ ModalComponent, isOpen, setIsOpen, clientId, client, dashboards, clients, theme, }) {
+    const { state, dispatch } = useAdmin();
+    const [modalSelectedDashboard, setModalSelectedDashboard] = useState();
+    const [selectedToClient, setSelectedToClient] = useState();
+    const styles = createStyles(theme);
+    useEffect(() => {
+        setModalSelectedDashboard(state.selectedDashboard);
+        setSelectedToClient(state.clients.filter((c) => c.name !== state.client.name)[0]);
+    }, [state.selectedDashboard, state.clients]);
+    const handlePromote = async () => {
+        try {
+            const response = await fetch(`${QUILL_SERVER}/promote_dashboard/`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: 'Bearer ',
+                },
+                body: JSON.stringify({
+                    dashboardName: modalSelectedDashboard,
+                    fromClientId: clientId,
+                    toClientId: selectedToClient._id,
+                }),
+            });
+            if (!response.ok) {
+                throw new Error('API request failed');
+            }
+            const data = await response.json();
+        }
+        catch (error) {
+            console.error('Promotion failed:', error);
+        }
+    };
+    return (_jsx(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), 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: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }, children: _jsxs("button", { onClick: () => {
+                            handlePromote();
+                            setIsOpen(false);
+                        }, className: "quill-button", children: [_jsx("style", { children: `.quill-button {
+                    background: #212121;
+                    color: white;
+                    font-size: 15px;
+                    height: 42px;
+                    padding-left: 16px;
+                    padding-right: 16px;
+                    font-weight: 500;
+                    border-radius: 6px;
+                    margin-top: 30px;
+                }
+                .quill-button:hover {
+                    background: rgba(0,0,0,0.75);
+                }` }), "Promote Dashboard"] }) })] }) }));
+}

package/{lib → dist}/modals/PromoteViewModal.d.ts

@@ -10,3 +10,4 @@ interface PromoteViewModalProps {
 }
 export default function PromoteViewModal({ ModalComponent, isOpen, setIsOpen, clientId, client, clients, views, }: PromoteViewModalProps): import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=PromoteViewModal.d.ts.map

package/dist/modals/PromoteViewModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromoteViewModal.d.ts","sourceRoot":"","sources":["../../src/modals/PromoteViewModal.tsx"],"names":[],"mappings":";AAKA,UAAU,qBAAqB;IAC7B,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,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,OAAO,EAAE,GAAG,EAAE,CAAC;CAChB;AA+DD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,cAAc,EACd,MAAM,EACN,SAAS,EACT,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,GACN,EAAE,qBAAqB,2CAsGvB"}