@quillsql/admin 1.3.1 → 1.3.3

package/{lib → dist}/Admin.js

@@ -33,8 +33,9 @@ const react_1 = require("react");
 const react_2 = require("@quillsql/react");
 const nightOwlLight_1 = __importDefault(require("prism-react-renderer/themes/nightOwlLight"));
 const prism_react_renderer_1 = __importStar(require("prism-react-renderer"));
-const react_3 = __importDefault(require("@monaco-editor/react"));
 const core_1 = require("@dnd-kit/core");
+const InputLabel_1 = __importDefault(require("./components/InputLabel"));
+const CardSection_1 = __importDefault(require("./components/CardSection"));
 const sortable_1 = require("@dnd-kit/sortable");
 const utilities_1 = require("@dnd-kit/utilities");
 const components_1 = require("./components");
@@ -42,110 +43,57 @@ const AdminProvider_1 = require("./AdminProvider");
 const primitives_1 = require("./primitives");
 const DashboardBuilder_1 = __importDefault(require("./public_components/DashboardBuilder"));
 const SQLViewManager_1 = __importDefault(require("./public_components/SQLViewManager"));
-const CONTAINER = {
-    display: "flex",
-    flexDirection: "row",
-    height: "800px",
-    background: "white",
-    marginTop: 32,
-    width: "calc(100% - 50px)",
-    // borderRadius: 12,
-    overflow: "hidden",
-    borderRadius: 12,
-    // border: "1px solid #EDEDED",
-    boxShadow: "0px 1px 24px 0px rgba(0, 0, 0, 0.09)",
-};
-const customStyles = {
-    content: {
-        top: "50%",
-        left: "50%",
-        right: "auto",
-        bottom: "auto",
-        marginRight: "-50%",
-        border: "none",
-        transform: "translate(-50%, -50%)",
-        borderRadius: 6,
-        zIndex: 4,
-        boxShadow: "0px 2px 24px 0px rgb(63,82,149, 0.09)",
-    },
-};
-const THEME = {
-    /* Components font family */
-    // fontFamily: 'BlinkMacSystemFont',
-    fontFamily: "Inter",
-    /* Default font size */
-    fontSize: 14,
-    /* Header font size */
-    headerFontSize: 18,
-    editorDarkMode: true,
-    /* Primary color */
-    primaryColor: "#212121",
-    buttonUnderlayColor: "#000000",
-    /* Secondary color */
-    secondaryColor: "white",
-    selectedTabColor: "white",
-    /* When you select underlay */
-    selectUnderlayColor: "#F5F5F5",
-    /* Background color */
-    backgroundColor: "#FFFFFF",
-    editorBackgroundColor: "#FBFBFB",
-    elevatedCardColor: "#FFFFFF",
-    /* Primary font color */
-    fontColor: "#212121",
-    /* Secondary font color */
-    secondaryFontColor: "#777777",
-    selectedFontColor: "#212121",
-    unselectedFontColor: "#777777",
-    buttonLabelColor: "white",
-    buttonFontWeight: "500",
-    /* Label font weight */
-    labelFontWeight: "500",
-    /* Header font weight */
-    headerFontWeight: "500",
-    /* Selected font weight */
-    selectedFontWeight: "700",
-    /* Padding for containers */
-    padding: 25,
-    /* Border radius for selected Quill elements */
-    borderRadius: "8px",
-    /* Box shadow applied on Quill components */
-    boxShadow: "0px 1px 8px 0px rgb(63,82,149, 0.09)",
-    shadowColor: "rgba(0, 0, 0, 0.09)",
-    primaryButtonColor: "#212121",
-};
-const frontendApi = "clerk.withquill.com";
+const constants_1 = require("./utils/constants");
+const TogglePrimitive_1 = __importDefault(require("./primitives/TogglePrimitive"));
 const defaultTheme = {
-    fontFamily: "Inter; Helvetica",
-    backgroundColor: "#FFFFFF",
-    primaryTextColor: "#364153",
-    secondaryTextColor: "#6C727F",
-    chartLabelFontFamily: "Inter; Helvetica",
-    chartLabelColor: "#666666",
-    chartTickColor: "#CCCCCC",
+    fontFamily: 'Inter; Helvetica',
+    backgroundColor: '#FFFFFF',
+    primaryTextColor: '#364153',
+    secondaryTextColor: '#6C727F',
+    chartLabelFontFamily: 'Inter; Helvetica',
+    chartLabelColor: '#666666',
+    chartTickColor: '#CCCCCC',
     // chartColors: ["#6269E9", "#E14F62"],
-    borderColor: "#E5E7EB",
-    primaryButtonColor: "#364153",
+    borderColor: '#E5E7EB',
+    primaryButtonColor: '#364153',
     borderWidth: 1,
-    labelFontWeight: "500",
+    labelFontWeight: '500',
     fontSize: 14,
 };
-function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, setIsOpen, filters, dateFilter, openAddFilterModal, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, selectedEditDashboard, dashNames, setSelectedEditDashboard, SecondaryButtonComponent, }) {
+function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, setSelectedEditDashboard, SecondaryButtonComponent, openAddFilterModal, openEditOrderModal, }) {
     const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
-    const [selectedDashboardName, setSelectedDashboardName] = (0, react_1.useState)("");
+    const [selectedDashboardName, setSelectedDashboardName] = (0, react_1.useState)(selectedDashboard);
     (0, react_1.useEffect)(() => {
         setSelectedDashboardName(selectedDashboard);
     }, [selectedDashboard]);
+    const { data } = (0, react_2.useDashboard)(selectedDashboard);
     const [newFilters, setNewFilters] = (0, react_1.useState)([]);
+    const [isDateComparison, setIsDateComparison] = (0, react_1.useState)(state.dateFilter.comparison);
+    const [initialRange, setInitialRange] = (0, react_1.useState)(constants_1.defaultDateRange);
+    const [showDateFilter, setShowDateFilter] = (0, react_1.useState)(true);
     const [newDateFilter, setNewDateFilter] = (0, react_1.useState)(null);
-    // const [tables, setTables] = useContext<TablesContextType>(TablesContext);
     const [selectedTable, setSelectedTable] = (0, react_1.useState)(null);
-    const [field, setField] = (0, react_1.useState)("");
+    const [field, setField] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        if (data && data.dateFilter) {
+            dispatch('SET_DATE_FILTER', {
+                ...state.dateFilter,
+                comparison: data.dateFilter.comparison,
+            });
+        }
+    }, [state.dateFilter, data]);
+    (0, react_1.useEffect)(() => {
+        setIsDateComparison(!!state.dateFilter.comparison);
+    }, [state.dateFilter]);
     (0, react_1.useEffect)(() => {
         if (state.tables.length) {
-            setSelectedTable(state.tables[0]);
-            setField(state.tables[0].columns.map((elem) => elem.name)[0]);
+            const defaultTable = state.tables[0];
+            const name = state.editDashboardData?.filters[0]?.table;
+            const table = state.tables.find((t) => t.name === name) ?? defaultTable;
+            setSelectedTable(table);
+            setField(table.columns.map((elem) => elem.name)[0]);
         }
-    }, [state.tables]);
+    }, [state.tables, state.editDashboardData]);
     (0, react_1.useEffect)(() => {
         if (dashboardData && dashboardData.filters) {
             setNewFilters(dashboardData.filters);
@@ -155,7 +103,7 @@ function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, se
         }
     }, [dashboardData]);
     const handleAddFilter = async () => {
-        setNewFilters([...newFilters, { label: "", field }]);
+        setNewFilters([...newFilters, { label: '', field }]);
     };
     const handleSubmitDashboardChanges = async () => {
         if (!selectedDashboardName ||
@@ -163,7 +111,7 @@ function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, se
             (newDateFilter &&
                 Object.keys(newDateFilter).length &&
                 !newDateFilter.label)) {
-            alert("Empty fields");
+            alert('Empty fields');
             return;
         }
         if (newFilters.filter((elem) => !elem.field).length) {
@@ -184,7 +132,7 @@ function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, se
             dashNames.length > 0 &&
             dashNames.some((dashName) => dashName.name === selectedDashboardName &&
                 selectedDashboardName !== selectedDashboard)) {
-            alert("Dashboard name already taken!");
+            alert('Dashboard name already taken!');
             return;
         }
         const fieldsSet = new Set();
@@ -199,201 +147,194 @@ function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, se
         });
         if (hasDuplicateField ||
             (Object.keys(newDateFilter).length > 0 &&
-                updatedFilters.some((filter) => filter.filterType === "date"))) {
-            alert("Maximum of one filter per field");
+                updatedFilters.some((filter) => filter.filterType === 'date'))) {
+            alert('Maximum of one filter per field');
             return;
         }
         let allValid = true;
         updatedFilters.forEach((filter) => {
-            if (filter.filterType !== "string" && filter.filterType !== "date") {
+            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.");
+            alert('We only support string and filters.');
             return;
         }
-        let responseData;
-        const url = `https://quill-344421.uc.r.appspot.com/dashfilter/${client._id}/`;
+        const url = `${constants_1.QUILL_SERVER}/dashfilter/${client._id}/`;
         const body = {
             newDashboardName: selectedDashboardName,
             filters: updatedFilters,
-            dateFilter: newDateFilter,
+            dateFilter: {
+                ...newDateFilter,
+                comparison: isDateComparison,
+                primaryRange: initialRange,
+            },
             name: selectedDashboard,
         };
+        dispatch({ type: 'SET_DATE_FILTER', payload: body.dateFilter });
         const headers = {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
             Authorization: `Bearer `,
         };
         try {
             const response = await fetch(url, {
-                method: "POST",
+                method: 'POST',
                 headers: headers,
                 body: JSON.stringify(body),
             });
             setSelectedEditDashboard(null);
             setIsOpen(false);
+            onSave();
         }
         catch (e) {
-            console.log("error");
+            console.log('error');
         }
     };
-    // const handleDeleteFilter = async () => {
-    //   const url = `https://quill-344421.uc.r.appspot.com/dashfilterdelete/${client._id}/`;
-    //   const body = {
-    //     name: selectedDashboard.name,
-    //     filterId: "DATE_RANGE", //TODO: Change this?
-    //   };
-    //   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) {
-    //       setIsOpen(false);
-    //       return;
-    //     }
-    //   } catch (error) {
-    //     console.error("There was a problem with the fetch operation:", error);
-    //   }
-    // };
     const handleDeleteFilter = (filter) => {
         setNewFilters(newFilters.filter((f) => f !== filter));
     };
     const handleDeleteDateFilter = async () => {
-        // const response2 = await axios.post(
-        //   `https://quill-344421.uc.r.appspot.com/dashfilterdelete/${client._id}/`,
-        //   {
-        //     name: selectedDashboard.name,
-        //     filterId: "DATE_RANGE",
-        //   },
-        //   { headers: { Authorization: `Bearer ` } }
-        // );
-        // if (response2 && response2.data) {
-        //   setIsOpen(false);
-        //   return;
-        // }
+        setShowDateFilter(false);
         setNewDateFilter({});
     };
+    const handleAddDateFilter = async () => {
+        setShowDateFilter(true);
+        if (dashboardData && dashboardData.dateFilter) {
+            setNewDateFilter(dashboardData.dateFilter);
+        }
+    };
+    const handleDeleteDashboard = async () => {
+        if (confirm('Are you sure? This action cannot be undone.')) {
+            const URL = `${constants_1.QUILL_SERVER}/dashboard/${selectedDashboard}`;
+            const res = await fetch(URL, {
+                method: 'DELETE',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ clientId: client._id }),
+            });
+            alert(JSON.stringify(res));
+        }
+    };
     return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => {
             setIsOpen(false);
+            setNewFilters([]);
+            setIsDateComparison(state.dateFilter.comparison);
+        }, style: {
+            minWidth: '814px',
+            maxWidth: '814px',
         }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                display: "flex",
-                flexDirection: "column",
-                width: "100%",
-                // alignItems: "center",
-            }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Edit dashboard" }), (0, jsx_runtime_1.jsx)("div", { style: {
-                        fontFamily: exports.theme.fontFamily,
-                        color: exports.theme.secondaryTextColor,
-                        fontSize: 14,
-                        fontWeight: "600",
-                        marginBottom: 3,
-                        marginTop: 8,
-                    }, children: "Dashboard name" }), (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(TextInputComponent, { value: selectedDashboardName, onChange: (e) => setSelectedDashboardName(e.target.value) }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 8 } }), (0, jsx_runtime_1.jsxs)("div", { children: [newDateFilter &&
-                            Object.values(newDateFilter).length > 0 &&
-                            newDateFilter.label ? ((0, jsx_runtime_1.jsxs)("div", { style: {
-                                display: "flex",
-                                flexDirection: "column",
-                                gap: "10px",
-                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                        fontFamily: exports.theme.fontFamily,
-                                        color: exports.theme.primaryTextColor,
-                                        fontSize: 16,
-                                        fontWeight: "600",
-                                    }, children: "Date filter" }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                fontFamily: exports.theme.fontFamily,
-                                                color: exports.theme.secondaryTextColor,
-                                                fontSize: 14,
-                                                fontWeight: "600",
-                                                marginBottom: 3,
-                                            }, children: "Label" }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                display: "flex",
-                                                flexDirection: "row",
-                                                alignItems: "center",
-                                            }, children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { value: newDateFilter.label, onChange: (e) => {
-                                                        setNewDateFilter({
-                                                            ...newDateFilter,
-                                                            label: e.target.value,
-                                                        });
-                                                    } }), (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteDateFilter(), style: {
-                                                        height: 38,
-                                                        width: 42,
-                                                        alignItems: "center",
-                                                        justifyContent: "center",
-                                                        display: "flex",
-                                                    }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: (0, jsx_runtime_1.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" }) }) })] })] })] })) : null, (0, jsx_runtime_1.jsxs)("div", { style: {
-                                display: "flex",
-                                flexDirection: "row",
-                                alignItems: "center",
-                                justifyContent: "space-between",
+                display: 'flex',
+                gap: 16,
+                flexDirection: 'column',
+                width: '100%',
+                height: '100%',
+                maxHeight: '100%',
+                overflowY: 'auto'
+            }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Manage dashboard" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Name" }), (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(TextInputComponent, { value: selectedDashboardName, onChange: (e) => setSelectedDashboardName(e.target.value) }) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: '10px',
+                            }, children: [(0, jsx_runtime_1.jsx)(CardSection_1.default, { children: "Date Filter" }), showDateFilter && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            gap: '10px',
+                                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Label" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                            display: 'flex',
+                                                            flexDirection: 'row',
+                                                            alignItems: 'center',
+                                                        }, children: (0, jsx_runtime_1.jsx)(TextInputComponent, { value: newDateFilter?.label, onChange: (e) => {
+                                                                setNewDateFilter({
+                                                                    ...newDateFilter,
+                                                                    label: e.target.value,
+                                                                });
+                                                            } }) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'row',
+                                                    gap: '10px',
+                                                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Initial Range" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: initialRange.label, onChange: (e) => {
+                                                                setInitialRange(constants_1.InitialDateRangeOptions.find((table) => table.label === e) ?? initialRange);
+                                                            }, options: constants_1.InitialDateRangeOptions.map((table) => {
+                                                                return { label: table.label, value: table.label };
+                                                            }) })] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'row',
+                                                    gap: '10px',
+                                                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                    }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Date Comparison" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                                display: 'flex',
+                                                                flexDirection: 'column',
+                                                                justifyContent: 'center',
+                                                                width: '100%',
+                                                                height: '100%',
+                                                                minWidth: 230,
+                                                                maxWidth: 230,
+                                                                width: 230,
+                                                            }, children: (0, jsx_runtime_1.jsx)(TogglePrimitive_1.default, { value: isDateComparison, onClick: () => {
+                                                                    setIsDateComparison((isDateComparison) => !isDateComparison);
+                                                                } }) })] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    display: 'flex',
+                                                    flexGrow: 1,
+                                                    flexDirection: 'row',
+                                                    alignItems: 'end',
+                                                    justifyContent: 'end',
+                                                    gap: '10px',
+                                                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                        justifyContent: 'center',
+                                                    }, children: (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteDateFilter(), style: {
+                                                            height: 38,
+                                                            width: 42,
+                                                            alignItems: 'center',
+                                                            justifyContent: 'center',
+                                                            display: 'flex',
+                                                            cursor: 'pointer',
+                                                        }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: (0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAddDateFilter, label: "Add date filter +" }) }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
                                 marginTop: 20,
-                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                        fontFamily: exports.theme.fontFamily,
-                                        color: exports.theme.primaryTextColor,
-                                        fontSize: 17,
-                                        fontWeight: "600",
-                                    }, children: "Filters" }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAddFilter, label: "Add filter +" })] }), newFilters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: newFilters.map((filter, index) => {
+                            }, children: (0, jsx_runtime_1.jsx)(CardSection_1.default, { children: "Filters" }) }), newFilters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: '6px' }, children: newFilters.map((filter, index) => {
                                 return ((0, jsx_runtime_1.jsxs)("div", { style: {
-                                        display: "flex",
-                                        flexDirection: "row",
-                                        gap: "10px",
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        gap: '10px',
                                     }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                                                display: "flex",
-                                                flexDirection: "column",
+                                                display: 'flex',
+                                                flexDirection: 'column',
                                                 maxWidth: 300,
-                                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                        fontFamily: exports.theme.fontFamily,
-                                                        color: exports.theme.secondaryTextColor,
-                                                        fontSize: 14,
-                                                        fontWeight: "600",
-                                                        marginBottom: 3,
-                                                    }, children: "Label" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { value: filter.label, onChange: (e) => {
+                                            }, children: [index === 0 && (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Label" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { value: filter.label, onChange: (e) => {
                                                         const updatedFilters = newFilters.map((otherFilter, i) => index === i
                                                             ? { ...otherFilter, label: e.target.value }
                                                             : otherFilter);
                                                         setNewFilters(updatedFilters);
                                                     } })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                display: "flex",
-                                                flexDirection: "column",
+                                                display: 'flex',
+                                                flexDirection: 'column',
                                                 maxWidth: 300,
-                                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                        fontFamily: exports.theme.fontFamily,
-                                                        color: exports.theme.secondaryTextColor,
-                                                        fontSize: 14,
-                                                        fontWeight: "600",
-                                                        marginBottom: 3,
-                                                    }, children: "Table" }), (0, jsx_runtime_1.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 && (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Table" }), (0, jsx_runtime_1.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 };
                                                     }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                display: "flex",
-                                                flexDirection: "column",
+                                                display: 'flex',
+                                                flexDirection: 'column',
                                                 maxWidth: 300,
-                                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                        fontFamily: exports.theme.fontFamily,
-                                                        color: exports.theme.secondaryTextColor,
-                                                        fontSize: 14,
-                                                        fontWeight: "600",
-                                                        marginBottom: 3,
-                                                    }, children: "Field" }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                                        display: "flex",
-                                                        flexDirection: "column",
-                                                        alignItems: "center",
+                                            }, children: [index === 0 && (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Field" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                        alignItems: 'center',
                                                     }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                            display: "flex",
-                                                            flexDirection: "row",
-                                                            alignItems: "center",
-                                                        }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: filter && filter.field ? filter.field : "", options: selectedTable?.columns.map((column) => {
-                                                                    return { label: column.name, value: column.name };
+                                                            display: 'flex',
+                                                            flexDirection: 'row',
+                                                            alignItems: 'center',
+                                                        }, children: [(0, jsx_runtime_1.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 }
@@ -402,19 +343,19 @@ function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, se
                                                                 } }), (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteFilter(filter), style: {
                                                                     height: 38,
                                                                     width: 42,
-                                                                    alignItems: "center",
-                                                                    justifyContent: "center",
-                                                                    display: "flex",
-                                                                    cursor: "pointer",
+                                                                    alignItems: 'center',
+                                                                    justifyContent: 'center',
+                                                                    display: 'flex',
+                                                                    cursor: 'pointer',
                                                                 }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: (0, jsx_runtime_1.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" }) }) })] }) })] })] }));
-                            }) }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 24 } }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleSubmitDashboardChanges, label: "Save changes" })] }) }));
+                            }) })), (0, jsx_runtime_1.jsx)("div", { style: { height: 12 } }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAddFilter, label: "Add filter +" })] }), (0, jsx_runtime_1.jsx)(CardSection_1.default, { children: "Chart order" }), (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => openEditOrderModal(selectedDashboardName), label: "Edit chart order" }) }), (0, jsx_runtime_1.jsx)(CardSection_1.default, { children: "Danger Zone" }), (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleDeleteDashboard, label: "Delete Dashboard" }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 18 } }), (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleSubmitDashboardChanges, label: "Save changes" }) })] }) }));
 }
 exports.EditFiltersModal = EditFiltersModal;
 function AddFilterModal({ isOpen, selectedDashboard, client, setIsOpen, ModalComponent, TextInputComponent, SelectComponent, HeaderComponent, ButtonComponent, openAddDashboardModal, }) {
     const [selectedTable, setSelectedTable] = (0, react_1.useState)(null);
-    const [name, setName] = (0, react_1.useState)("");
-    const [field, setField] = (0, react_1.useState)("");
-    const [filterType, setFilterType] = (0, react_1.useState)("string");
+    const [name, setName] = (0, react_1.useState)('');
+    const [field, setField] = (0, react_1.useState)('');
+    const [filterType, setFilterType] = (0, react_1.useState)('string');
     const [dateRange, setDateRange] = (0, react_1.useState)([new Date(), new Date()]);
     const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
     (0, react_1.useEffect)(() => {
@@ -429,12 +370,12 @@ function AddFilterModal({ isOpen, selectedDashboard, client, setIsOpen, ModalCom
             return;
         }
         const filterType = getPostgresBasicType(selectedTable.columns.find((col) => col.name === field));
-        if (filterType !== "string" && filterType !== "date") {
-            alert("We only support string and filters.");
+        if (filterType !== 'string' && filterType !== 'date') {
+            alert('We only support string and filters.');
             return;
         }
         let responseData;
-        const url = `https://quill-344421.uc.r.appspot.com/dashfilter/${client._id}/`;
+        const url = `${constants_1.QUILL_SERVER}/dashfilter/${client._id}/`;
         const body = {
             name: selectedDashboard,
             filter: {
@@ -446,12 +387,12 @@ function AddFilterModal({ isOpen, selectedDashboard, client, setIsOpen, ModalCom
             },
         };
         const headers = {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
             Authorization: `Bearer `,
         };
         try {
             const response = await fetch(url, {
-                method: "POST",
+                method: 'POST',
                 headers: headers,
                 body: JSON.stringify(body),
             });
@@ -461,21 +402,21 @@ function AddFilterModal({ isOpen, selectedDashboard, client, setIsOpen, ModalCom
             responseData = await response.json();
         }
         catch (error) {
-            console.error("There was a problem with the fetch operation:", error);
+            console.error('There was a problem with the fetch operation:', error);
         }
         if (responseData) {
             setIsOpen(false);
-            setName("");
-            setField("");
+            setName('');
+            setField('');
             return;
         }
     };
     if (!selectedTable) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Add filter" }), (0, jsx_runtime_1.jsx)("div", { children: "Label" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { value: name, onChange: (e) => setName(e.target.value) }), (0, jsx_runtime_1.jsx)("div", { children: "Table" }), (0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: selectedTable ? selectedTable : "", onChange: (e) => setSelectedTable(e.target.value), options: state.tables.map((table) => {
+    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Add filter" }), (0, jsx_runtime_1.jsx)("div", { children: "Label" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { value: name, onChange: (e) => setName(e.target.value) }), (0, jsx_runtime_1.jsx)("div", { children: "Table" }), (0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: selectedTable ? selectedTable : '', onChange: (e) => setSelectedTable(e.target.value), QuillOptions: state.tables.map((table) => {
                         return { label: table.name, value: table.name };
-                    }) }), (0, jsx_runtime_1.jsx)("div", { children: "Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: field ? field : "", options: selectedTable.columns.map((column) => {
+                    }) }), (0, jsx_runtime_1.jsx)("div", { children: "Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: field ? field : '', QuillOptions: selectedTable.columns.map((column) => {
                         return { label: column.name, value: column.name };
                     }), onChange: (e) => {
                         setField(e);
@@ -497,34 +438,34 @@ function Navigation({ TextInputComponent, ButtonComponent, SecondaryButtonCompon
     }
     const renderComponentBasedOnName = () => {
         switch (state.activeComponent) {
-            case "Dashboards":
-                return ((0, jsx_runtime_1.jsx)(components_1.DashboardManager, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, HeaderComponent: HeaderComponent, setReportId: (id) => dispatch({ type: "SET_REPORT_ID", payload: id }), queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials }));
-            case "SQL editor":
+            case 'Dashboards':
+                return ((0, jsx_runtime_1.jsx)(components_1.DashboardManager, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, HeaderComponent: HeaderComponent, setReportId: (id) => dispatch({ type: 'SET_REPORT_ID', payload: id }), queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials }));
+            case 'SQL editor':
                 return (0, jsx_runtime_1.jsx)(DashboardBuilder_1.default, {});
-            case "Report":
+            case 'Report':
                 return ((0, jsx_runtime_1.jsx)(ReportWrapper, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, OrganizationSelectComponent: OrganizationSelectComponent, organizationId: state.organizationId, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials }));
-            case "SQL views":
+            case 'SQL views':
                 return (0, jsx_runtime_1.jsx)(SQLViewManager_1.default, {});
             default:
-                return ((0, jsx_runtime_1.jsx)(Dashboards, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, OrganizationSelectComponent: OrganizationSelectComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, HeaderComponent: HeaderComponent, setReportId: (id) => dispatch({ type: "SET_REPORT_ID", payload: id }), queryEndpoint: queryEndpoint, organizationId: state.organizationId, queryHeaders: queryHeaders, withCredentials: withCredentials }));
+                return ((0, jsx_runtime_1.jsx)(Dashboards, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, OrganizationSelectComponent: OrganizationSelectComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, HeaderComponent: HeaderComponent, setReportId: (id) => dispatch({ type: 'SET_REPORT_ID', payload: id }), queryEndpoint: queryEndpoint, organizationId: state.organizationId, queryHeaders: queryHeaders, withCredentials: withCredentials }));
         }
     };
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            display: "flex",
-            flexDirection: "column",
-            height: "100vh",
-            width: "100vw",
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100vh',
+            width: '100vw',
         }, children: [(0, jsx_runtime_1.jsxs)("nav", { style: {
                     zIndex: 2,
-                    height: "70px",
-                    width: "100%",
-                    display: "flex",
-                    flexDirection: "row",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    backgroundColor: "white",
-                    padding: "0",
-                    position: "fixed",
+                    height: '70px',
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    backgroundColor: 'white',
+                    padding: '0',
+                    position: 'fixed',
                     top: 0,
                     left: 0,
                     right: 0,
@@ -532,74 +473,74 @@ function Navigation({ TextInputComponent, ButtonComponent, SecondaryButtonCompon
                     borderTopWidth: 0,
                     borderLeftWidth: 0,
                     borderRightWidth: 0,
-                    borderStyle: "solid",
+                    borderStyle: 'solid',
                     borderColor: exports.theme.borderColor,
                 }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                            paddingTop: "18px",
-                            paddingLeft: "14px",
-                            paddingBottom: "18px",
+                            paddingTop: '18px',
+                            paddingLeft: '14px',
+                            paddingBottom: '18px',
                             width: 230,
-                        }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "45", height: "18", viewBox: "0 0 45 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("g", { clipPath: "url(#clip0_2489_282)", children: (0, jsx_runtime_1.jsx)("path", { d: "M18.634 17.3008H9.196C7.97867 17.3008 6.84933 17.1248 5.808 16.7728C4.78133 16.4061 3.894 15.8781 3.146 15.1888C2.398 14.4994 1.81133 13.6634 1.386 12.6808C0.960667 11.6981 0.748 10.5761 0.748 9.31478C0.748 8.14145 0.960667 7.06345 1.386 6.08078C1.826 5.09811 2.42 4.25478 3.168 3.55078C3.916 2.84678 4.796 2.30411 5.808 1.92278C6.82 1.52678 7.90533 1.32878 9.064 1.32878C10.2227 1.32878 11.308 1.52678 12.32 1.92278C13.332 2.31878 14.212 2.86878 14.96 3.57278C15.708 4.27678 16.2947 5.12011 16.72 6.10278C17.16 7.07078 17.38 8.14145 17.38 9.31478C17.38 9.87211 17.314 10.4148 17.182 10.9428C17.0647 11.4708 16.8813 11.9694 16.632 12.4388C16.3827 12.9081 16.06 13.3334 15.664 13.7148C15.268 14.0814 14.806 14.3821 14.278 14.6168V14.6608H18.634V17.3008ZM4.312 9.31478C4.312 9.98945 4.43667 10.6201 4.686 11.2068C4.93533 11.7934 5.27267 12.3068 5.698 12.7468C6.138 13.1721 6.644 13.5094 7.216 13.7588C7.788 14.0081 8.404 14.1328 9.064 14.1328C9.724 14.1328 10.34 14.0081 10.912 13.7588C11.484 13.5094 11.9827 13.1721 12.408 12.7468C12.848 12.3068 13.1927 11.7934 13.442 11.2068C13.6913 10.6201 13.816 9.98945 13.816 9.31478C13.816 8.64011 13.6913 8.00945 13.442 7.42278C13.1927 6.83611 12.848 6.33011 12.408 5.90478C11.9827 5.46478 11.484 5.12011 10.912 4.87078C10.34 4.62145 9.724 4.49678 9.064 4.49678C8.404 4.49678 7.788 4.62145 7.216 4.87078C6.644 5.12011 6.138 5.46478 5.698 5.90478C5.27267 6.33011 4.93533 6.83611 4.686 7.42278C4.43667 8.00945 4.312 8.64011 4.312 9.31478ZM29.3164 17.3008H26.1484V15.8488H26.1044C25.987 16.0541 25.833 16.2594 25.6424 16.4648C25.4664 16.6701 25.2464 16.8534 24.9824 17.0148C24.7184 17.1761 24.4177 17.3081 24.0804 17.4108C23.743 17.5134 23.3764 17.5648 22.9804 17.5648C22.1444 17.5648 21.4624 17.4401 20.9344 17.1908C20.421 16.9268 20.0177 16.5674 19.7244 16.1128C19.4457 15.6581 19.255 15.1228 19.1524 14.5068C19.0644 13.8908 19.0204 13.2234 19.0204 12.5048V6.60878H22.3204V11.8448C22.3204 12.1528 22.3277 12.4754 22.3424 12.8128C22.3717 13.1354 22.4377 13.4361 22.5404 13.7148C22.6577 13.9934 22.8264 14.2208 23.0464 14.3968C23.281 14.5728 23.611 14.6608 24.0364 14.6608C24.4617 14.6608 24.8064 14.5874 25.0704 14.4408C25.3344 14.2794 25.5324 14.0741 25.6644 13.8248C25.811 13.5608 25.9064 13.2674 25.9504 12.9448C25.9944 12.6221 26.0164 12.2848 26.0164 11.9328V6.60878H29.3164V17.3008ZM30.8172 6.60878H34.1172V17.3008H30.8172V6.60878ZM30.5532 3.24278C30.5532 2.71478 30.7365 2.26745 31.1032 1.90078C31.4845 1.51945 31.9392 1.32878 32.4672 1.32878C32.9952 1.32878 33.4425 1.51945 33.8092 1.90078C34.1905 2.26745 34.3812 2.71478 34.3812 3.24278C34.3812 3.77078 34.1905 4.22545 33.8092 4.60678C33.4425 4.97345 32.9952 5.15678 32.4672 5.15678C31.9392 5.15678 31.4845 4.97345 31.1032 4.60678C30.7365 4.22545 30.5532 3.77078 30.5532 3.24278ZM35.652 0.66878H38.952V17.3008H35.652V0.66878ZM40.4869 0.66878H43.7869V17.3008H40.4869V0.66878Z", fill: "#212121" }) }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_2489_282", children: (0, jsx_runtime_1.jsx)("rect", { width: "45", height: "18", fill: "white" }) }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "row" }, children: [(0, jsx_runtime_1.jsx)("button", { style: {
-                                    color: "#212121",
-                                    backgroundColor: state.activeComponent === "Dashboards"
-                                        ? "#2121210A"
-                                        : "transparent",
-                                    padding: "8px 12px",
-                                    height: "38px",
-                                    marginBottom: "4px",
-                                    fontWeight: "bold",
-                                    fontSize: "0.875rem",
-                                    borderRadius: "4px",
-                                    transition: "background-color 0.3s",
-                                    border: "none",
-                                    outline: "none",
+                        }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "45", height: "18", viewBox: "0 0 45 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("g", { clipPath: "url(#clip0_2489_282)", children: (0, jsx_runtime_1.jsx)("path", { d: "M18.634 17.3008H9.196C7.97867 17.3008 6.84933 17.1248 5.808 16.7728C4.78133 16.4061 3.894 15.8781 3.146 15.1888C2.398 14.4994 1.81133 13.6634 1.386 12.6808C0.960667 11.6981 0.748 10.5761 0.748 9.31478C0.748 8.14145 0.960667 7.06345 1.386 6.08078C1.826 5.09811 2.42 4.25478 3.168 3.55078C3.916 2.84678 4.796 2.30411 5.808 1.92278C6.82 1.52678 7.90533 1.32878 9.064 1.32878C10.2227 1.32878 11.308 1.52678 12.32 1.92278C13.332 2.31878 14.212 2.86878 14.96 3.57278C15.708 4.27678 16.2947 5.12011 16.72 6.10278C17.16 7.07078 17.38 8.14145 17.38 9.31478C17.38 9.87211 17.314 10.4148 17.182 10.9428C17.0647 11.4708 16.8813 11.9694 16.632 12.4388C16.3827 12.9081 16.06 13.3334 15.664 13.7148C15.268 14.0814 14.806 14.3821 14.278 14.6168V14.6608H18.634V17.3008ZM4.312 9.31478C4.312 9.98945 4.43667 10.6201 4.686 11.2068C4.93533 11.7934 5.27267 12.3068 5.698 12.7468C6.138 13.1721 6.644 13.5094 7.216 13.7588C7.788 14.0081 8.404 14.1328 9.064 14.1328C9.724 14.1328 10.34 14.0081 10.912 13.7588C11.484 13.5094 11.9827 13.1721 12.408 12.7468C12.848 12.3068 13.1927 11.7934 13.442 11.2068C13.6913 10.6201 13.816 9.98945 13.816 9.31478C13.816 8.64011 13.6913 8.00945 13.442 7.42278C13.1927 6.83611 12.848 6.33011 12.408 5.90478C11.9827 5.46478 11.484 5.12011 10.912 4.87078C10.34 4.62145 9.724 4.49678 9.064 4.49678C8.404 4.49678 7.788 4.62145 7.216 4.87078C6.644 5.12011 6.138 5.46478 5.698 5.90478C5.27267 6.33011 4.93533 6.83611 4.686 7.42278C4.43667 8.00945 4.312 8.64011 4.312 9.31478ZM29.3164 17.3008H26.1484V15.8488H26.1044C25.987 16.0541 25.833 16.2594 25.6424 16.4648C25.4664 16.6701 25.2464 16.8534 24.9824 17.0148C24.7184 17.1761 24.4177 17.3081 24.0804 17.4108C23.743 17.5134 23.3764 17.5648 22.9804 17.5648C22.1444 17.5648 21.4624 17.4401 20.9344 17.1908C20.421 16.9268 20.0177 16.5674 19.7244 16.1128C19.4457 15.6581 19.255 15.1228 19.1524 14.5068C19.0644 13.8908 19.0204 13.2234 19.0204 12.5048V6.60878H22.3204V11.8448C22.3204 12.1528 22.3277 12.4754 22.3424 12.8128C22.3717 13.1354 22.4377 13.4361 22.5404 13.7148C22.6577 13.9934 22.8264 14.2208 23.0464 14.3968C23.281 14.5728 23.611 14.6608 24.0364 14.6608C24.4617 14.6608 24.8064 14.5874 25.0704 14.4408C25.3344 14.2794 25.5324 14.0741 25.6644 13.8248C25.811 13.5608 25.9064 13.2674 25.9504 12.9448C25.9944 12.6221 26.0164 12.2848 26.0164 11.9328V6.60878H29.3164V17.3008ZM30.8172 6.60878H34.1172V17.3008H30.8172V6.60878ZM30.5532 3.24278C30.5532 2.71478 30.7365 2.26745 31.1032 1.90078C31.4845 1.51945 31.9392 1.32878 32.4672 1.32878C32.9952 1.32878 33.4425 1.51945 33.8092 1.90078C34.1905 2.26745 34.3812 2.71478 34.3812 3.24278C34.3812 3.77078 34.1905 4.22545 33.8092 4.60678C33.4425 4.97345 32.9952 5.15678 32.4672 5.15678C31.9392 5.15678 31.4845 4.97345 31.1032 4.60678C30.7365 4.22545 30.5532 3.77078 30.5532 3.24278ZM35.652 0.66878H38.952V17.3008H35.652V0.66878ZM40.4869 0.66878H43.7869V17.3008H40.4869V0.66878Z", fill: "#212121" }) }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_2489_282", children: (0, jsx_runtime_1.jsx)("rect", { width: "45", height: "18", fill: "white" }) }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsx)("button", { style: {
+                                    color: '#212121',
+                                    backgroundColor: state.activeComponent === 'Dashboards'
+                                        ? '#2121210A'
+                                        : 'transparent',
+                                    padding: '8px 12px',
+                                    height: '38px',
+                                    marginBottom: '4px',
+                                    fontWeight: 'bold',
+                                    fontSize: '0.875rem',
+                                    borderRadius: '4px',
+                                    transition: 'background-color 0.3s',
+                                    border: 'none',
+                                    outline: 'none',
                                 }, 
                                 // onClick={() => setActiveComponent("Dashboards")}
-                                onClick: () => dispatch({ type: "SET_ACTIVE_COMPONENT", payload: "Dashboards" }), children: "Dashboards" }), (0, jsx_runtime_1.jsx)("button", { style: {
-                                    color: "#212121",
-                                    backgroundColor: state.activeComponent === "SQL editor"
-                                        ? "#2121210A"
-                                        : "transparent",
-                                    padding: "8px 12px",
-                                    height: "38px",
-                                    marginBottom: "4px",
-                                    fontWeight: "bold",
-                                    fontSize: "0.875rem",
-                                    borderRadius: "4px",
-                                    transition: "background-color 0.3s",
-                                    border: "none",
-                                    outline: "none",
+                                onClick: () => dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'Dashboards' }), children: "Dashboards" }), (0, jsx_runtime_1.jsx)("button", { style: {
+                                    color: '#212121',
+                                    backgroundColor: state.activeComponent === 'SQL editor'
+                                        ? '#2121210A'
+                                        : 'transparent',
+                                    padding: '8px 12px',
+                                    height: '38px',
+                                    marginBottom: '4px',
+                                    fontWeight: 'bold',
+                                    fontSize: '0.875rem',
+                                    borderRadius: '4px',
+                                    transition: 'background-color 0.3s',
+                                    border: 'none',
+                                    outline: 'none',
                                 }, 
                                 // onClick={() => setActiveComponent("SQL editor")}
-                                onClick: () => dispatch({ type: "SET_ACTIVE_COMPONENT", payload: "SQL editor" }), children: "SQL editor" }), (0, jsx_runtime_1.jsx)("button", { style: {
-                                    color: "#212121",
-                                    backgroundColor: state.activeComponent === "SQL views"
-                                        ? "#2121210A"
-                                        : "transparent",
-                                    padding: "8px 12px",
-                                    height: "38px",
-                                    marginBottom: "4px",
-                                    fontWeight: "bold",
-                                    fontSize: "0.875rem",
-                                    borderRadius: "4px",
-                                    transition: "background-color 0.3s",
-                                    border: "none",
-                                    outline: "none",
+                                onClick: () => dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'SQL editor' }), children: "SQL editor" }), (0, jsx_runtime_1.jsx)("button", { style: {
+                                    color: '#212121',
+                                    backgroundColor: state.activeComponent === 'SQL views'
+                                        ? '#2121210A'
+                                        : 'transparent',
+                                    padding: '8px 12px',
+                                    height: '38px',
+                                    marginBottom: '4px',
+                                    fontWeight: 'bold',
+                                    fontSize: '0.875rem',
+                                    borderRadius: '4px',
+                                    transition: 'background-color 0.3s',
+                                    border: 'none',
+                                    outline: 'none',
                                 }, 
                                 // onClick={() => setActiveComponent("SQL views")}
-                                onClick: () => dispatch({ type: "SET_ACTIVE_COMPONENT", payload: "SQL views" }), children: "SQL views" })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                            display: "flex",
-                            flexDirection: "row",
-                            minHeight: "50px",
-                            justifyContent: "flex-end",
-                            alignItems: "center",
-                            paddingRight: "8px",
+                                onClick: () => dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'SQL views' }), children: "SQL views" })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            minHeight: '50px',
+                            justifyContent: 'flex-end',
+                            alignItems: 'center',
+                            paddingRight: '8px',
                             width: 230,
                         }, children: UserManagementComponent && (0, jsx_runtime_1.jsx)(UserManagementComponent, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    height: "100%",
-                    width: "100%",
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    width: '100%',
                     // marginTop: activeComponent !== 'Report' ? '70px' : undefined
                 }, children: (0, jsx_runtime_1.jsx)(react_2.QuillProvider
                 // organizationId={'2'}
@@ -610,20 +551,20 @@ function Navigation({ TextInputComponent, ButtonComponent, SecondaryButtonCompon
                     organizationId: state.organizationId, queryEndpoint: queryEndpoint, withCredentials: withCredentials, queryHeaders: queryHeaders, publicKey: state.client._id, environment: state.environment, theme: exports.theme, children: renderComponentBasedOnName() }) })] }));
 }
 exports.theme = {
-    fontFamily: "Inter; Helvetica",
-    backgroundColor: "#FFFFFF",
-    primaryTextColor: "#364153",
-    secondaryTextColor: "#6C727F",
-    chartLabelFontFamily: "Inter; Helvetica",
-    chartLabelColor: "#666666",
-    chartTickColor: "#CCCCCC",
-    // chartColors: ["#6269E9", "#E14F62"],
-    borderColor: "#E5E7EB",
+    fontFamily: 'Inter; Helvetica',
+    backgroundColor: '#FFFFFF',
+    primaryTextColor: '#364153',
+    secondaryTextColor: '#6C727F',
+    chartLabelFontFamily: 'Inter; Helvetica',
+    chartLabelColor: '#666666',
+    chartTickColor: '#CCCCCC',
+    chartColors: ['#6269E9', '#E14F62'],
+    borderColor: '#E5E7EB',
     labelFontWeight: 500,
     fontSize: 14,
     borderWidth: 1,
-    primaryButtonColor: "#212121",
-    primaryButtonTextColor: "#FFFFFF",
+    primaryButtonColor: '#212121',
+    primaryButtonTextColor: '#FFFFFF',
 };
 function convertPostgresColumn(column) {
     let format;
@@ -631,22 +572,22 @@ function convertPostgresColumn(column) {
         case 20: // int8
         case 21: // int2
         case 23: // int4
-            format = "whole_number";
+            format = 'whole_number';
             break;
         case 700: // float4
         case 701: // float8
         case 1700: // numeric
-            format = "two_decimal_places";
+            format = 'two_decimal_places';
             break;
         case 1082: // date
         case 1083: // time
         case 1184: // timestamptz
         case 1114: // timestamp
-            format = "MMM_dd_yyyy";
+            format = 'MMM_dd_yyyy';
             break;
         case 1043: // varchar
         default:
-            format = "string";
+            format = 'string';
     }
     return {
         label: column.name,
@@ -666,46 +607,46 @@ function getPostgresBasicType(column) {
             case 700: // float4
             case 701: // float8
             case 1700: // numeric
-                format = "number";
+                format = 'number';
                 break;
             case 1082: // date
             case 1083: // time
             case 1184: // timestamptz
             case 1114: // timestamp
-                format = "date";
+                format = 'date';
                 break;
             case 1043: // varchar
             default:
-                format = "string";
+                format = 'string';
         }
     }
     else if (column.fieldType) {
         // if column.dataTypeID doesn't exist, check column.fieldType
         switch (column.fieldType) {
-            case "int8":
-            case "int2":
-            case "int4":
-            case "float4":
-            case "float8":
-            case "numeric":
-                format = "number";
+            case 'int8':
+            case 'int2':
+            case 'int4':
+            case 'float4':
+            case 'float8':
+            case 'numeric':
+                format = 'number';
                 break;
-            case "date":
-            case "time":
-            case "timestamptz":
-            case "timestamp":
-                format = "date";
+            case 'date':
+            case 'time':
+            case 'timestamptz':
+            case 'timestamp':
+                format = 'date';
                 break;
-            case "varchar":
+            case 'varchar':
             default:
-                format = "string";
+                format = 'string';
         }
     }
     return format;
 }
 exports.getPostgresBasicType = getPostgresBasicType;
 function classNames(...classes) {
-    return classes.filter(Boolean).join(" ");
+    return classes.filter(Boolean).join(' ');
 }
 exports.classNames = classNames;
 function AddDashboardModal({ selectedDashboard, isOpen, setIsOpen, client, ModalComponent, TextInputComponent, SelectComponent, HeaderComponent, ButtonComponent, dashNames, getDashNames, organizationId, }) {
@@ -713,9 +654,9 @@ function AddDashboardModal({ selectedDashboard, isOpen, setIsOpen, client, Modal
     const [selectedDashboardName, setSelectedDashboardName] = (0, react_1.useState)(selectedDashboard?.name);
     // const [tables] = useContext(TablesContext);
     const [selectedTable, setSelectedTable] = (0, react_1.useState)(null);
-    const [name, setName] = (0, react_1.useState)("");
-    const [field, setField] = (0, react_1.useState)("");
-    const [filterType, setFilterType] = (0, react_1.useState)("string");
+    const [name, setName] = (0, react_1.useState)('');
+    const [field, setField] = (0, react_1.useState)('');
+    const [filterType, setFilterType] = (0, react_1.useState)('string');
     const [dateRange, setDateRange] = (0, react_1.useState)([new Date(), new Date()]);
     const [newFilters, setNewFilters] = (0, react_1.useState)([]);
     const [newDateFilter, setNewDateFilter] = (0, react_1.useState)(null);
@@ -733,11 +674,11 @@ function AddDashboardModal({ selectedDashboard, isOpen, setIsOpen, client, Modal
         if (!selectedDashboardName ||
             newFilters.some((filter) => !filter.label) ||
             (newDateFilter && newDateFilter.label)) {
-            alert("Empty labels");
+            alert('Empty labels');
             return;
         }
         if (newFilters.some((filter) => !filter.field)) {
-            alert("Empty fields");
+            alert('Empty fields');
             return;
         }
         if (!selectedTable || !field) {
@@ -746,7 +687,7 @@ function AddDashboardModal({ selectedDashboard, isOpen, setIsOpen, client, Modal
         if (dashNames &&
             dashNames.length > 0 &&
             dashNames.some((dashName) => dashName.name === selectedDashboardName)) {
-            alert("Dashboard name already taken!");
+            alert('Dashboard name already taken!');
             return;
         }
         let updatedFilters = newFilters.map((filter) => {
@@ -770,26 +711,26 @@ function AddDashboardModal({ selectedDashboard, isOpen, setIsOpen, client, Modal
             }
         });
         if (hasDuplicateField) {
-            alert("Maximum of one filter per field");
+            alert('Maximum of one filter per field');
             return;
         }
         let allValid = true;
         updatedFilters.forEach((filter) => {
-            if (filter.filterType !== "string" && filter.filterType !== "date") {
+            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.");
+            alert('We only support string and filters.');
             return;
         }
-        if (updatedFilters.filter((filter) => filter.filterType === "date").length > 1) {
-            alert("More than one date filter");
+        if (updatedFilters.filter((filter) => filter.filterType === 'date').length > 1) {
+            alert('More than one date filter');
             return;
         }
         let responseData;
-        const url = `https://quill-344421.uc.r.appspot.com/newdash/${client._id}/`;
+        const url = `${constants_1.QUILL_SERVER}/newdash/${client._id}/`;
         const body = newDateFilter && Object.keys(newDateFilter).length
             ? {
                 dateFilter: newDateFilter,
@@ -803,12 +744,12 @@ function AddDashboardModal({ selectedDashboard, isOpen, setIsOpen, client, Modal
                 organizationId,
             };
         const headers = {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
             Authorization: `Bearer `,
         };
         try {
             const response = await fetch(url, {
-                method: "POST",
+                method: 'POST',
                 headers: headers,
                 body: JSON.stringify(body),
             });
@@ -818,12 +759,12 @@ function AddDashboardModal({ selectedDashboard, isOpen, setIsOpen, client, Modal
             responseData = await response.json();
         }
         catch (e) {
-            console.log("error");
+            console.log('error');
         }
         if (responseData) {
             setIsOpen(false);
-            setName("");
-            setSelectedDashboardName("");
+            setName('');
+            setSelectedDashboardName('');
             setNewFilters([]);
             setNewDateFilter(null);
             getDashNames();
@@ -834,27 +775,27 @@ function AddDashboardModal({ selectedDashboard, isOpen, setIsOpen, client, Modal
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
     const handleAddFilter = async () => {
-        setNewFilters([...newFilters, { label: "", field }]);
+        setNewFilters([...newFilters, { label: '', field }]);
     };
     return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { placeholder: "Enter Dashboard Name...", onChange: (e) => setSelectedDashboardName(e.target.value), value: selectedDashboardName }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                        display: "flex",
-                        flexDirection: "column",
-                        alignItems: "center",
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
                     }, children: [newFilters.map((filter, index) => {
-                            return ((0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "row" }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [(0, jsx_runtime_1.jsx)("h2", { children: "Label" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { value: filter.label, onChange: (e) => {
+                            return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("h2", { children: "Label" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { value: filter.label, onChange: (e) => {
                                                     const updatedFilters = newFilters.map((otherFilter, i) => index === i
                                                         ? { ...otherFilter, label: e.target.value }
                                                         : otherFilter);
                                                     setNewFilters(updatedFilters);
-                                                } })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [(0, jsx_runtime_1.jsx)("h4", { children: "Field" }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                                    display: "flex",
-                                                    flexDirection: "column",
-                                                    alignItems: "center",
+                                                } })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("h4", { children: "Field" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'column',
+                                                    alignItems: 'center',
                                                 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                        display: "flex",
-                                                        flexDirection: "row",
-                                                        alignItems: "center",
-                                                    }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: filter && filter.field ? filter.field : "", options: selectedTable.columns.map((column) => {
+                                                        display: 'flex',
+                                                        flexDirection: 'row',
+                                                        alignItems: 'center',
+                                                    }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: filter && filter.field ? filter.field : '', QuillOptions: selectedTable.columns.map((column) => {
                                                                 return { label: column.name, value: column.name };
                                                             }), onChange: (e) => {
                                                                 const updatedFilters = newFilters.map((otherFilter, i) => index === i
@@ -864,9 +805,9 @@ function AddDashboardModal({ selectedDashboard, isOpen, setIsOpen, client, Modal
                                                             } }), (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteFilter(filter), style: {
                                                                 height: 38,
                                                                 width: 42,
-                                                                alignItems: "center",
-                                                                justifyContent: "center",
-                                                                display: "flex",
+                                                                alignItems: 'center',
+                                                                justifyContent: 'center',
+                                                                display: 'flex',
                                                             }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: (0, jsx_runtime_1.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" }) }) })] }) })] })] }, filter.field + index));
                         }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleAddFilter, label: "Add new filter +" }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleAddDashboardSubmit, label: "Add Dashboard +" })] })] }) }));
 }
@@ -876,17 +817,17 @@ function TableCell({ table, clickTableCell }) {
         clickTableCell(table);
     };
     return ((0, jsx_runtime_1.jsxs)("div", { onClick: handleClickTableCell, style: {
-            marginBottom: "54px",
+            marginBottom: '54px',
             flex: 1,
-            minWidth: "540px",
-            maxWidth: "540px",
-            cursor: "pointer",
-        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexDirection: "row", alignItems: "center" }, children: (0, jsx_runtime_1.jsx)("h3", { style: { color: "#384151" }, children: table.displayName }) }), (0, jsx_runtime_1.jsx)(prism_react_renderer_1.default, { ...prism_react_renderer_1.defaultProps, theme: nightOwlLight_1.default, code: table.viewQuery, language: "sql", children: ({ className, style, tokens, getLineProps, getTokenProps }) => ((0, jsx_runtime_1.jsx)("pre", { className: className, style: {
+            minWidth: '540px',
+            maxWidth: '540px',
+            cursor: 'pointer',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: (0, jsx_runtime_1.jsx)("h3", { style: { color: '#384151' }, children: table.displayName }) }), (0, jsx_runtime_1.jsx)(prism_react_renderer_1.default, { ...prism_react_renderer_1.defaultProps, theme: nightOwlLight_1.default, code: table.viewQuery, language: "sql", children: ({ className, style, tokens, getLineProps, getTokenProps }) => ((0, jsx_runtime_1.jsx)("pre", { className: className, style: {
                         ...style,
-                        textAlign: "left",
-                        margin: "1em 0",
-                        padding: "0.5em",
-                        overflow: "scroll",
+                        textAlign: 'left',
+                        margin: '1em 0',
+                        padding: '0.5em',
+                        overflow: 'scroll',
                         maxHeight: 120,
                         maxWidth: 520,
                         // lineHeight: "1.3em",
@@ -915,26 +856,26 @@ theme,
             // padding: "20px 30px 20px 20px",
             // marginLeft: 20,
             borderRadius: 6,
-            overflow: "hidden",
-        }, children: [(0, jsx_runtime_1.jsx)(react_2.SQLEditor, { containerStyle: { height: "calc(100vh - 270px)", width: "100%" }, onChangeQuery: (query) => setQuery(query), onChangeData: (data) => setRows(data), onChangeColumns: (columns) => setColumns(columns), onChangeFields: (fields) => setFields(fields), defaultQuery: state.activeQuery ? state.activeQuery : "" }), rows.length > 0 && ((0, jsx_runtime_1.jsx)("button", { style: {
+            overflow: 'hidden',
+        }, children: [(0, jsx_runtime_1.jsx)(react_2.SQLEditor, { containerStyle: { height: 'calc(100vh - 270px)', width: '100%' }, onChangeQuery: (query) => setQuery(query), onChangeData: (data) => setRows(data), onChangeColumns: (columns) => setColumns(columns), onChangeFields: (fields) => setFields(fields), defaultQuery: state.activeQuery ? state.activeQuery : '' }), rows.length > 0 && ((0, jsx_runtime_1.jsx)("button", { style: {
                     height: 36,
                     marginLeft: 250,
                     marginTop: 20,
                     background: theme.primaryButtonColor,
                     color: theme.backgroundColor,
-                    display: "flex",
+                    display: 'flex',
                     borderRadius: 6,
-                    alignItems: "center",
-                    justifyContent: "center",
-                    outline: "none",
-                    cursor: "pointer",
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    outline: 'none',
+                    cursor: 'pointer',
                     fontFamily: theme.fontFamily,
                     fontWeight: theme.buttonFontWeight || 600,
-                    border: "none",
+                    border: 'none',
                     fontSize: 14,
                     paddingLeft: 20,
                     paddingRight: 20,
-                }, onClick: () => setIsOpen(true), children: "Add to dashboard" })), (0, jsx_runtime_1.jsx)(react_2.AddToDashboardModal, { isOpen: isOpen, setIsOpen: setIsOpen, rows: rows, columns: columns, query: query, showTableFormatOptions: true, showDateFieldOptions: true, showAccessControlOptions: true, fields: fields })] }));
+                }, onClick: () => setIsOpen(true), children: "Add to dashboard" })), (0, jsx_runtime_1.jsx)(react_2.AddToDashboardModal, { isOpen: isOpen, setIsOpen: setIsOpen, rows: rows, columns: columns, query: query, showTableFormatQuillOptions: true, showDateFieldQuillOptions: true, showAccessControlQuillOptions: true, fields: fields })] }));
 };
 exports.SQLEditorComponent = SQLEditorComponent;
 const SchemaListComponent = ({ schema, theme }) => {
@@ -943,7 +884,7 @@ const SchemaListComponent = ({ schema, theme }) => {
             maxHeight: 700,
             width: 300,
             minWidth: 300,
-            overflowY: "scroll",
+            overflowY: 'scroll',
             // maxHeight: "100%",
             paddingLeft: 20,
             paddingRight: 20,
@@ -952,8 +893,8 @@ const SchemaListComponent = ({ schema, theme }) => {
 function SchemaItem({ elem, theme, index }) {
     const [isOpen, setIsOpen] = (0, react_1.useState)(index === 0);
     const schemaContainerStyle = {
-        display: "flex",
-        flexDirection: "column",
+        display: 'flex',
+        flexDirection: 'column',
         // WebkitTouchCallout: "none",
         // WebkitUserSelect: "none",
         // KhtmlUserSelect: "none",
@@ -962,12 +903,12 @@ function SchemaItem({ elem, theme, index }) {
         // userSelect: "none",
     };
     const schemaRowStyle = {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        width: "100%",
-        justifyContent: "space-between",
-        cursor: "pointer",
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '100%',
+        justifyContent: 'space-between',
+        cursor: 'pointer',
     };
     const schemaRowHoverStyle = {
         background: theme.selectUnderlayColor,
@@ -975,37 +916,37 @@ function SchemaItem({ elem, theme, index }) {
     return ((0, jsx_runtime_1.jsxs)("div", { style: schemaContainerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: { ...schemaRowStyle, ...(isOpen && schemaRowHoverStyle) }, onClick: () => setIsOpen(!isOpen), children: [(0, jsx_runtime_1.jsx)("p", { style: {
                             marginLeft: theme.padding,
                             fontSize: theme.fontSize,
-                            color: "#384151",
-                            fontWeight: "500",
+                            color: '#384151',
+                            fontWeight: '500',
                         }, children: elem.displayName }), (0, jsx_runtime_1.jsx)("div", { style: {
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
                             // paddingRight: 25,
                             paddingTop: 20,
                             paddingBottom: 20,
                             paddingLeft: 0,
-                            cursor: "pointer",
+                            cursor: 'pointer',
                         }, children: isOpen ? ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "h-5 w-5 text-gray-400", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" }) })) : ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "h-5 w-5", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })) })] }), isOpen ? ((0, jsx_runtime_1.jsx)("div", { style: {
                     paddingBottom: theme.padding,
-                    display: "flex",
-                    flexDirection: "column",
+                    display: 'flex',
+                    flexDirection: 'column',
                     paddingLeft: theme.padding,
                     paddingRight: theme.padding,
                 }, children: elem.columns.map((elem, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
                         paddingTop: theme.padding,
-                        display: "flex",
-                        flexDirection: "row",
-                        alignItems: "center",
-                        justifyContent: "space-between",
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
                     }, children: [(0, jsx_runtime_1.jsx)("div", { title: elem.displayName, className: "text-gray-500", style: {
                                 fontSize: 13,
                                 //   color: theme.secondaryFontColor,
-                                whiteSpace: "nowrap",
+                                whiteSpace: 'nowrap',
                                 padding: 0,
                                 margin: 0,
-                                textOverflow: "ellipsis",
-                                overflow: "hidden",
+                                textOverflow: 'ellipsis',
+                                overflow: 'hidden',
                                 width: 200,
                                 maxWidth: 200,
                             }, children: elem.displayName }), (0, jsx_runtime_1.jsx)("div", { className: "text-gray-500", title: elem.displayName, style: {
@@ -1016,29 +957,29 @@ function SchemaItem({ elem, theme, index }) {
                             }, children: elem.fieldType })] }, elem.displayName + elem.index))) })) : null] }));
 }
 function defineEditorTheme(monaco, theme) {
-    monaco.editor.defineTheme("onedark", {
-        base: theme.darkMode ? "vs-dark" : "vs",
+    monaco.editor.defineTheme('onedark', {
+        base: theme.darkMode ? 'vs-dark' : 'vs',
         inherit: true,
         rules: [
             {
-                token: "comment",
-                foreground: "#5d7988",
-                fontStyle: "italic",
+                token: 'comment',
+                foreground: '#5d7988',
+                fontStyle: 'italic',
             },
-            { token: "constant", foreground: "#e06c75" },
+            { token: 'constant', foreground: '#e06c75' },
         ],
         colors: {
-            "editor.background": "#F9F9F9",
+            'editor.background': '#F9F9F9',
         },
     });
 }
 exports.defineEditorTheme = defineEditorTheme;
 function setEditorTheme(editor, monaco) {
     try {
-        monaco.editor.setTheme("onedark");
+        monaco.editor.setTheme('onedark');
     }
     catch (e) {
-        console.log("ERROR: ", e);
+        console.log('ERROR: ', e);
     }
 }
 exports.setEditorTheme = setEditorTheme;
@@ -1054,8 +995,8 @@ function formatDateBuckets(startDate, endDate) {
     // Check if the distance is less than or equal to one hour
     if (distanceInHours <= 1) {
         return {
-            unit: "hour",
-            format: "h a",
+            unit: 'hour',
+            format: 'h a',
             startOf: startOfHour,
         };
     }
@@ -1064,8 +1005,8 @@ function formatDateBuckets(startDate, endDate) {
     // Check if the distance is less than or equal to one day
     if (distanceInDays <= 1) {
         return {
-            unit: "day",
-            format: "MMM d",
+            unit: 'day',
+            format: 'MMM d',
             startOf: startOfDay,
         };
     }
@@ -1074,8 +1015,8 @@ function formatDateBuckets(startDate, endDate) {
     // Check if the distance is less than or equal to one month
     if (distanceInMonths <= 1) {
         return {
-            unit: "month",
-            format: "MMM yyyy",
+            unit: 'month',
+            format: 'MMM yyyy',
             startOf: startOfMonth,
         };
     }
@@ -1084,39 +1025,39 @@ function formatDateBuckets(startDate, endDate) {
     // Check if the distance is less than or equal to one year
     if (distanceInYears <= 1) {
         return {
-            unit: "year",
-            format: "yyyy",
+            unit: 'year',
+            format: 'yyyy',
             startOf: startOfYear,
         };
     }
     // Otherwise, the distance is more than one year
     return {
-        unit: "year",
-        format: "yyyy",
+        unit: 'year',
+        format: 'yyyy',
         startOf: startOfYear,
     };
 }
 exports.formatDateBuckets = formatDateBuckets;
 const POSTGRES_DATE_TYPES = [
-    "timestamp",
-    "date",
-    "timestamptz",
-    "time",
-    "timetz",
+    'timestamp',
+    'date',
+    'timestamptz',
+    'time',
+    'timetz',
 ];
-const FORMAT_OPTIONS = [
-    { value: "whole_number", label: "whole number" },
-    { value: "one_decimal_place", label: "one decimal place" },
-    { value: "dollar_amount", label: "dollar amount" },
-    { value: "MMM_yyyy", label: "month" },
-    { value: "MMM_dd-MMM_dd", label: "week" },
-    { value: "MMM_dd_yyyy", label: "day" },
-    { value: "MMM_dd_hh:mm_ap_pm", label: "day and time" },
-    { value: "hh_ap_pm", label: "hour" },
-    { value: "percent", label: "percent" },
-    { value: "string", label: "string" },
+const FORMAT_QuillOptionS = [
+    { value: 'whole_number', label: 'whole number' },
+    { value: 'one_decimal_place', label: 'one decimal place' },
+    { value: 'dollar_amount', label: 'dollar amount' },
+    { value: 'MMM_yyyy', label: 'month' },
+    { value: 'MMM_dd-MMM_dd', label: 'week' },
+    { value: 'MMM_dd_yyyy', label: 'day' },
+    { value: 'MMM_dd_hh:mm_ap_pm', label: 'day and time' },
+    { value: 'hh_ap_pm', label: 'hour' },
+    { value: 'percent', label: 'percent' },
+    { value: 'string', label: 'string' },
 ];
-function Report({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQueryOpen, setIsEditQueryOpen, SecondaryButtonComponent, ButtonComponent, deleteReport, updateQuery, OrganizationSelectComponent, ModalComponent, NavigateToDashboardBuilder, }) {
+function Report({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQueryOpen, SecondaryButtonComponent, ButtonComponent, deleteReport, updateQuery, OrganizationSelectComponent, ModalComponent, NavigateToDashboardBuilder, }) {
     const { data, loading, error } = (0, react_2.useQuill)(reportId);
     const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
     const downloadCSV = () => {
@@ -1128,27 +1069,27 @@ function Report({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQueryOpe
         const fields = Object.keys(json[0]); // Assumes all objects have same keys
         const csvRows = [];
         // Header row
-        csvRows.push(fields.join(","));
+        csvRows.push(fields.join(','));
         // Data rows
         for (let row of json) {
-            let values = fields.map((field) => JSON.stringify(row[field] || ""));
-            csvRows.push(values.join(","));
+            let values = fields.map((field) => JSON.stringify(row[field] || ''));
+            csvRows.push(values.join(','));
         }
         // Create CSV string and create a 'blob' with it
-        const csvString = csvRows.join("\r\n");
-        const csvBlob = new Blob([csvString], { type: "text/csv" });
+        const csvString = csvRows.join('\r\n');
+        const csvBlob = new Blob([csvString], { type: 'text/csv' });
         // Create a download link and click it
-        const downloadLink = document.createElement("a");
-        downloadLink.download = "download.csv";
+        const downloadLink = document.createElement('a');
+        downloadLink.download = 'download.csv';
         downloadLink.href = URL.createObjectURL(csvBlob);
-        downloadLink.style.display = "none";
+        downloadLink.style.display = 'none';
         document.body.appendChild(downloadLink);
         downloadLink.click();
         document.body.removeChild(downloadLink);
     };
     const goBack = () => {
         // setActiveComponent("Dashboards");
-        dispatch({ type: "SET_ACTIVE_COMPONENT", payload: "Dashboards" });
+        dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'Dashboards' });
     };
     if (!data || loading) {
         return null;
@@ -1158,158 +1099,82 @@ function Report({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQueryOpe
     }
     return ((0, jsx_runtime_1.jsxs)("div", { style: { paddingLeft: 40, paddingRight: 40 }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                     //   width: 'calc(100vw - 30px)',
-                    display: "flex",
-                    position: "fixed",
-                    backgroundColor: "white",
+                    display: 'flex',
+                    position: 'fixed',
+                    backgroundColor: 'white',
                     zIndex: 1,
                     left: 0,
                     right: 0,
                     top: 0,
-                    flexDirection: "row",
+                    flexDirection: 'row',
                     paddingTop: 85,
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    paddingLeft: "30px",
-                    paddingRight: "30px",
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    paddingLeft: '30px',
+                    paddingRight: '30px',
                     borderBottomWidth: 1,
                     borderTopWidth: 0,
                     borderLeftWidth: 0,
                     borderRightWidth: 0,
-                    borderStyle: "solid",
+                    borderStyle: 'solid',
                     borderColor: exports.theme.borderColor,
                     paddingBottom: 20,
-                    boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.07)",
+                    boxShadow: '0px 1px 4px 0px rgba(0, 0, 0, 0.07)',
                     //   paddingRight: '50px',
                     //   position: 'absolute'
                     //   // zIndex: 10
                 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                        display: "flex",
-                        flexDirection: "row",
-                        alignItems: "flex-end",
-                        justifyContent: "space-between",
-                        width: "100%",
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'flex-end',
+                        justifyContent: 'space-between',
+                        width: '100%',
                         // marginLeft: '25px'
                     }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                                display: "flex",
-                                flexDirection: "row",
-                                alignItems: "center",
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
                                 paddingBottom: 4,
                             }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "\u2190 Back", onClick: goBack }), (0, jsx_runtime_1.jsx)("h1", { style: {
-                                        fontSize: "36px",
-                                        paddingTop: "0px",
-                                        fontWeight: "600",
-                                        color: "#384151",
+                                        fontSize: '36px',
+                                        paddingTop: '0px',
+                                        fontWeight: '600',
+                                        color: '#384151',
                                         margin: 0,
                                         paddingLeft: 16,
                                     }, children: data.name })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                display: "flex",
-                                flexDirection: "row",
-                                alignItems: "center",
-                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: "20px" } }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexDirection: "column" }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                            display: "flex",
-                                            flexDirection: "row",
-                                            alignItems: "flex-end",
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '20px' } }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'flex-end',
                                             gap: 16,
-                                        }, children: (0, jsx_runtime_1.jsx)(components_1.OrgSelect, { environment: state.environment, setEnvironment: (env) => dispatch({ type: "SET_ENVIRONMENT", payload: env }), organizations: state.organizations, organizationId: state.organizationId, setOrganizationId: (orgId) => dispatch({ type: "SET_ORGANIZATION_ID", payload: orgId }), theme: state.theme }) }) })] })] }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 240 } }), (0, jsx_runtime_1.jsx)(react_2.Chart, { chartId: reportId, colors: exports.theme.chartColors, containerStyle: {
-                    width: "calc(100vw - 80px)",
-                    height: data.chartType === "table" ? 600 : 400,
+                                        }, children: (0, jsx_runtime_1.jsx)(components_1.OrgSelect, { environment: state.environment, setEnvironment: (env) => dispatch({ type: 'SET_ENVIRONMENT', payload: env }), organizations: state.organizations, organizationId: state.organizationId, setOrganizationId: (orgId) => dispatch({ type: 'SET_ORGANIZATION_ID', payload: orgId }), theme: state.theme }) }) })] })] }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 240 } }), (0, jsx_runtime_1.jsx)(react_2.Chart, { chartId: reportId, colors: exports.theme.chartColors, containerStyle: {
+                    width: 'calc(100vw - 80px)',
+                    height: data.chartType === 'table' ? 600 : 400,
                 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                    display: "flex",
-                    alignItems: "center",
+                    display: 'flex',
+                    alignItems: 'center',
                     gap: 16,
                     marginTop: 20,
-                }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Edit chart", onClick: () => setIsOpen(true) }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Edit query", onClick: () => setIsEditQueryOpen(true) }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Open query", onClick: () => {
-                            // setActiveQuery(data.queryString);
-                            dispatch({ type: "SET_ACTIVE_QUERY", payload: data.queryString });
-                            // setActiveComponent("SQL editor");
-                            if (state.navigateToDashboardBuilder) {
-                                state.navigateToDashboardBuilder();
-                            }
-                        } }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Delete", onClick: deleteReport })] }), data.chartType !== "table" && ((0, jsx_runtime_1.jsx)(react_2.Table
-            // containerStyle={{ width: "80vw", height: 1100 }}
-            , { 
-                // containerStyle={{ width: "80vw", height: 1100 }}
-                containerStyle: { height: 400, width: "100%", marginTop: 24 }, chartId: reportId })), (0, jsx_runtime_1.jsx)(EditVisualizationModal, { isOpen: isOpen, setIsOpen: setIsOpen, report: data, data: data.rows, query: data.queryString, columns: data.columns, fields: data.fields }), (0, jsx_runtime_1.jsx)(EditQueryModal, { theme: exports.theme, ModalComponent: ModalComponent, query: data.queryString, report: data, isOpen: isEditQueryOpen, setIsOpen: setIsEditQueryOpen, updateQuery: updateQuery, ButtonComponent: ButtonComponent })] }));
+                }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Edit chart", onClick: () => setIsOpen(true) }), state.navigateToDashboardBuilder && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Edit query", onClick: () => {
+                            dispatch({ type: 'SET_ACTIVE_QUERY', payload: data.queryString });
+                            dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: data });
+                            state.navigateToDashboardBuilder();
+                        } })), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Delete", onClick: deleteReport })] }), data.chartType !== 'table' && ((0, jsx_runtime_1.jsx)(react_2.Table, { containerStyle: { height: 400, width: '100%', marginTop: 24 }, chartId: reportId })), (0, jsx_runtime_1.jsx)(EditVisualizationModal, { isOpen: isOpen, setIsOpen: setIsOpen, report: data, isEditMode: !!state.activeQuery, data: data.rows, query: data.queryString, columns: data.columns, fields: data.fields })] }));
 }
-function EditQueryModal({ query, report, isOpen, setIsOpen, updateQuery, ModalComponent, ButtonComponent, theme, }) {
-    const [newQuery, setNewQuery] = (0, react_1.useState)(query);
-    const hasQueryChanged = (0, react_1.useMemo)(() => {
-        return newQuery !== query;
-    }, [newQuery]);
-    if (!query || !report) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => {
-            setIsOpen(false);
-        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-            }, children: (0, jsx_runtime_1.jsxs)("div", { style: { background: "white" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                            fontFamily: theme.fontFamily,
-                            color: theme.primaryTextColor,
-                            fontSize: 20,
-                            fontWeight: 600,
-                        }, children: "Edit query" }), (0, jsx_runtime_1.jsx)("div", { style: {
-                            background: theme.backgroundColor,
-                            height: 422,
-                            maxHeight: 422,
-                            marginTop: 24,
-                            minHeight: 422,
-                            width: 722,
-                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                background: theme.editorBackgroundColor || theme.backgroundColor,
-                                marginRight: theme.padding,
-                                borderBottomRightRadius: 4,
-                                borderBottomLeftRadius: 4,
-                                borderTopRightRadius: 4,
-                                borderTopLeftRadius: 4,
-                                overflow: "hidden",
-                            }, children: (0, jsx_runtime_1.jsx)(react_3.default, { height: "400px", defaultLanguage: "pgsql", defaultValue: "", value: newQuery, loading: (0, jsx_runtime_1.jsx)("div", {}), options: {
-                                    wordWrap: "on",
-                                    minimap: {
-                                        enabled: false,
-                                    },
-                                    padding: { top: 16 },
-                                }, onChange: (query) => setNewQuery(query), beforeMount: (monaco) => defineEditorTheme(monaco, theme), onMount: setEditorTheme }) }) }), (0, jsx_runtime_1.jsx)("button", { 
-                        // disabled={isSubmitting}
-                        theme: theme, onClick: hasQueryChanged
-                            ? () => updateQuery(report?._id, newQuery)
-                            : undefined, style: {
-                            borderRadius: 6,
-                            backgroundColor: hasQueryChanged
-                                ? "#384151"
-                                : "rgba(56, 65, 81, 0.7)",
-                            // padding: "0.625rem 1rem", // combined px-4 and py-2.5
-                            fontSize: "14px",
-                            fontWeight: "600",
-                            color: "white",
-                            paddingLeft: 12,
-                            paddingRight: 12,
-                            paddingTop: 6,
-                            paddingBottom: 6,
-                            // Hover and focus styles can't be applied directly with inline styles. You'll need JavaScript or external CSS for that.
-                        }, children: "Save changes" })] }) }) }));
-}
-function EditVisualizationModal({ isOpen, setIsOpen, report, columns, data, fields, query, }) {
-    // const [tables] = useContext(TablesContext);
-    // const [organization] = useContext(OrganizationContext);
+function EditVisualizationModal({ isOpen, setIsOpen, report, data, isEditMode, }) {
     if (!report && !data?.length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "fixed inset-0 overflow-y-auto relative", style: { zIndex: 120 }, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 bg-black/30", "aria-hidden": "true", onClick: () => setIsOpen(false) }), (0, jsx_runtime_1.jsx)("div", { className: "flex min-h-full items-center justify-center p-4", children: (0, jsx_runtime_1.jsx)("div", { className: "bg-white px-7 py-7 rounded-lg", children: (0, jsx_runtime_1.jsx)(react_2.ChartEditor, { isOpen: isOpen, setIsOpen: setIsOpen, chartId: report._id, admin: true }) }) })] })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "inset-0 overflow-y-auto relative", style: { zIndex: 120 }, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 bg-black/30", "aria-hidden": "true", onClick: () => setIsOpen(false) }), (0, jsx_runtime_1.jsx)("div", { className: "flex min-h-full items-center justify-center p-4", children: (0, jsx_runtime_1.jsx)("div", { className: "bg-white px-7 py-7 rounded-lg", children: (0, jsx_runtime_1.jsx)(react_2.ChartEditor, { isOpen: isOpen, setIsOpen: setIsOpen, isEditMode: isEditMode, chartId: report._id, admin: true }) }) })] })) }));
 }
 function ReportWrapper({ SecondaryButtonComponent, ButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, organizationId, queryEndpoint, queryHeaders, withCredentials, }) {
     const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
-    // const [organization, setOrganization] = useContext(OrganizationContext);
-    // const [client] = useContext(ClientContext);
-    // const [environment] = useContext(EnvironmentContext);
-    // const [reportId, setReportId] = useContext(ReportIdContext);
     let [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [isEditQueryOpen, setIsEditQueryOpen] = (0, react_1.useState)(false);
-    // const [activeComponent, setActiveComponent] = useContext(
-    //     ActiveComponentContext
-    // );
     const updateQuery = async (dashboardItemId, query) => {
         if (!state.client || !dashboardItemId || !query) {
             return;
@@ -1317,53 +1182,51 @@ function ReportWrapper({ SecondaryButtonComponent, ButtonComponent, ModalCompone
         let responseData;
         if (queryEndpoint) {
             const response = await fetch(queryEndpoint, {
-                method: "POST",
+                method: 'POST',
                 headers: {
                     ...queryHeaders,
-                    "Content-Type": "application/json",
+                    'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({
                     metadata: organizationId
                         ? {
                             orgId: organizationId,
-                            task: "edit_query",
+                            task: 'edit_query',
                             id: state.reportId,
                             query,
                         }
-                        : { task: "edit_query", id: state.reportId, query },
+                        : { task: 'edit_query', id: state.reportId, query },
                 }),
-                credentials: withCredentials ? "include" : "omit",
+                credentials: withCredentials ? 'include' : 'omit',
             });
             responseData = await response.json();
         }
         else {
-            const url = `https://quill-344421.uc.r.appspot.com/updatequery/${state.client._id}/${organizationId}/`;
-            // const url = `https://quill-344421.uc.r.appspot.com/updatequery/${state.client._id}/${organizationId}/`;
+            const url = `${constants_1.QUILL_SERVER}/updatequery/${state.client._id}/${organizationId}/`;
             const requestBody = {
                 dashboardItemId,
                 query,
             };
             const response = await fetch(url, {
-                method: "POST",
+                method: 'POST',
                 headers: {
-                    "Content-Type": "application/json",
-                    Authorization: "Bearer ",
+                    'Content-Type': 'application/json',
+                    Authorization: 'Bearer ',
                     environment: state.environment || undefined,
                 },
                 body: JSON.stringify(requestBody),
             });
-            // To get JSON data from the response:
             responseData = await response.json();
         }
         if (responseData) {
             if (responseData.error) {
-                alert(`Failed to save query. ${typeof responseData.error === "string"
+                alert(`Failed to save query. ${typeof responseData.error === 'string'
                     ? responseData.error
-                    : responseData.error?.routine === "errorMissingColumn"
+                    : responseData.error?.routine === 'errorMissingColumn'
                         ? "A column was referenced that doesn't exist."
                         : responseData.error?.routine
                             ? responseData.error?.routine
-                            : "Error parsing SQL query"}`);
+                            : 'Error parsing SQL query'}`);
                 return;
             }
             setIsEditQueryOpen(false);
@@ -1376,37 +1239,44 @@ function ReportWrapper({ SecondaryButtonComponent, ButtonComponent, ModalCompone
         if (!state.client) {
             return;
         }
+        if (!confirm('Are you sure?')) {
+            return;
+        }
         let responseData;
         if (queryEndpoint) {
             const response = await fetch(queryEndpoint, {
-                method: "POST",
+                method: 'POST',
                 headers: {
                     ...queryHeaders,
-                    "Content-Type": "application/json",
+                    'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({
                     metadata: organizationId
                         ? {
                             orgId: organizationId,
-                            task: "delete",
-                            id: state.reportId,
+                            task: 'delete',
+                            dashboardItemId: state.reportId,
                             clientId: state.client._id,
                         }
-                        : { task: "delete", id: state.reportId, clientId: state.client._id },
+                        : {
+                            task: 'delete',
+                            dashboardItemId: state.reportId,
+                            clientId: state.client._id,
+                        },
                 }),
-                credentials: withCredentials ? "include" : "omit", // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
+                credentials: withCredentials ? 'include' : 'omit', // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
             });
             responseData = await response.json(); // If the server returns JSON data
         }
         else {
-            const url = `https://quill-344421.uc.r.appspot.com/deletedash/${state.client._id}/${organizationId}/`;
+            const url = `${constants_1.QUILL_SERVER}/deletedash/${state.client._id}/${organizationId}/`;
             const requestBody = {
                 dashboardItemId: state.reportId,
             };
             const response = await fetch(url, {
-                method: "POST",
+                method: 'POST',
                 headers: {
-                    "Content-Type": "application/json",
+                    'Content-Type': 'application/json',
                     environment: state.environment || undefined,
                 },
                 body: JSON.stringify(requestBody),
@@ -1415,7 +1285,7 @@ function ReportWrapper({ SecondaryButtonComponent, ButtonComponent, ModalCompone
             responseData = await response.json();
         }
         if (responseData) {
-            dispatch({ type: "SET_ACTIVE_COMPONENT", payload: "Dashboards" });
+            dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'Dashboards' });
         }
     };
     return ((0, jsx_runtime_1.jsx)(Report, { reportId: state.reportId, updateQuery: updateQuery, isOpen: isOpen, setIsOpen: setIsOpen, isEditQueryOpen: isEditQueryOpen, setIsEditQueryOpen: setIsEditQueryOpen, deleteReport: deleteReport, SecondaryButtonComponent: SecondaryButtonComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, OrganizationSelectComponent: OrganizationSelectComponent }));
@@ -1426,13 +1296,13 @@ const measuringConfig = {
         strategy: core_1.MeasuringStrategy.Always,
     },
 };
-function ReorderableList({ initialItems, itemMap, ButtonComponent, closeModal, }) {
+function ReorderableList({ initialItems, client, itemMap, ButtonComponent, closeModal, onSave, }) {
     const [items, setItems] = (0, react_1.useState)([]);
     // const [client] = useContext(ClientContext);
     const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor), (0, core_1.useSensor)(core_1.KeyboardSensor, {
         coordinateGetter: sortable_1.sortableKeyboardCoordinates,
     }), (0, core_1.useSensor)(core_1.TouchSensor, {
-        activationConstraint: "",
+        activationConstraint: '',
     }));
     (0, react_1.useEffect)(() => {
         setItems(initialItems
@@ -1455,10 +1325,10 @@ function ReorderableList({ initialItems, itemMap, ButtonComponent, closeModal, }
             return;
         }
         try {
-            const response = await fetch("https://quill-344421.uc.r.appspot.com/dashorder/", {
-                method: "POST",
+            const response = await fetch(`${constants_1.QUILL_SERVER}/dashorder/`, {
+                method: 'POST',
                 headers: {
-                    "Content-Type": "application/json",
+                    'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({
                     publicKey: client._id,
@@ -1467,9 +1337,10 @@ function ReorderableList({ initialItems, itemMap, ButtonComponent, closeModal, }
             });
             if (!response.ok) {
                 const errorData = await response.json();
-                throw new Error(`Error: ${errorData.error || "Unknown error"}`);
+                throw new Error(`Error: ${errorData.error || 'Unknown error'}`);
             }
             const data = await response.json();
+            onSave();
             closeModal();
         }
         catch (error) {
@@ -1477,19 +1348,19 @@ function ReorderableList({ initialItems, itemMap, ButtonComponent, closeModal, }
         }
     };
     return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: sensors, collisionDetection: core_1.closestCenter, onDragEnd: handleDragEnd, measuring: measuringConfig, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: items, strategy: sortable_1.verticalListSortingStrategy, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                            background: "white",
-                            position: "fixed",
-                            width: "100%",
-                            height: "calc(100% - 40px)",
-                            overflowY: "scroll",
-                            overflowX: "hidden",
+                            background: 'white',
+                            position: 'fixed',
+                            width: '100%',
+                            height: 'calc(100% - 40px)',
+                            overflowY: 'scroll',
+                            overflowX: 'hidden',
                             maxWidth: 700,
-                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 80 } }), items.map((id) => ((0, jsx_runtime_1.jsx)(SortableItem, { id: id, name: itemMap?.get(id).name }, id))), (0, jsx_runtime_1.jsx)("div", { style: { height: 100, width: "100%" } })] }) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 80 } }), items.map((id) => ((0, jsx_runtime_1.jsx)(SortableItem, { id: id, name: itemMap?.get(id).name }, id))), (0, jsx_runtime_1.jsx)("div", { style: { height: 100, width: '100%' } })] }) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
                     height: 80,
                     paddingTop: 20,
-                    width: "100%",
-                    background: "white",
-                    position: "absolute",
+                    width: '100%',
+                    background: 'white',
+                    position: 'absolute',
                     bottom: -20,
                     left: 0,
                     right: 0,
@@ -1519,53 +1390,45 @@ function SortableItem({ id, name }) {
     const style = {
         transform: utilities_1.CSS.Translate.toString(transform),
         transition,
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        borderRadius: "10px",
-        border: "1px solid #E7E7E7",
-        boxShadow: "0px 2px 8px 0px rgba(56, 65, 81, 0.08)",
-        // padding: "20px",
-        // height: `${height}px`,
-        cursor: "grab",
-        userSelect: "none",
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        borderRadius: '10px',
+        border: '1px solid #E7E7E7',
+        boxShadow: '0px 2px 8px 0px rgba(56, 65, 81, 0.08)',
+        cursor: 'grab',
+        userSelect: 'none',
         marginBottom: 20,
-        background: "white",
+        background: 'white',
     };
     return ((0, jsx_runtime_1.jsx)("div", { ref: setNodeRef, style: style, ...attributes, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                // border: "1px solid grey",
-                // background: "grey",
-                // color: "white",
-                // borderRadius: "10px",
-                // padding: "15px",
-                cursor: "pointer",
-                // background: "red",
-                width: "100%",
-                display: "flex",
-                flexDirection: "row",
-                alignItems: "center",
-                justifyContent: "space-between",
+                cursor: 'pointer',
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
                 height: 260,
             }, ...listeners, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                        display: "flex",
-                        flexDirection: "column",
-                        justifyContent: "space-between",
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'space-between',
                         height: 260,
                         paddingTop: 20,
                         paddingBottom: 20,
-                        width: "100%",
+                        width: '100%',
                     }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                                 minWidth: 600,
-                                width: "100%",
+                                width: '100%',
                                 paddingLeft: 20,
                                 fontSize: 18,
-                                fontWeight: "500",
+                                fontWeight: '500',
                             }, children: name }), (0, jsx_runtime_1.jsx)(react_2.Chart, { chartId: id, containerStyle: {
                                 height: 180,
-                                width: "100%",
+                                width: '100%',
                             } })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                        display: "flex",
-                        flexDirection: "column",
+                        display: 'flex',
+                        flexDirection: 'column',
                         paddingRight: 20,
                         paddingLeft: 20,
                     }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "#6D727E", height: 24, width: 24, children: (0, jsx_runtime_1.jsx)("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" }) }) })] }) }));