@quillsql/admin 1.2.5 → 1.2.7

package/lib/Admin.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatDateBuckets = exports.isArrayOfValidDates = exports.isValidDate = exports.DropdownMenu = exports.classNames = exports.getPostgresBasicType = exports.convertPostgresColumn = exports.theme = void 0;
+exports.ReorderableList = exports.ReportWrapper = exports.formatDateBuckets = exports.isArrayOfValidDates = exports.isValidDate = exports.setEditorTheme = exports.defineEditorTheme = exports.SQLEditorComponent = exports.TableCell = exports.AddDashboardModal = exports.classNames = exports.getPostgresBasicType = exports.convertPostgresColumn = exports.theme = exports.AddFilterModal = exports.EditFiltersModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore
 const react_1 = require("react");
@@ -37,27 +37,11 @@ const react_3 = __importDefault(require("@monaco-editor/react"));
 const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
 const utilities_1 = require("@dnd-kit/utilities");
-const ClientContext = (0, react_1.createContext)();
-const EnvironmentContext = (0, react_1.createContext)();
-const OrganizationsContext = (0, react_1.createContext)();
-const OrganizationContext = (0, react_1.createContext)();
-const ActiveQueryContext = (0, react_1.createContext)();
-const TablesContext = (0, react_1.createContext)();
-const SchemaContext = (0, react_1.createContext)();
-const ActiveComponentContext = (0, react_1.createContext)();
-const ReportIdContext = (0, react_1.createContext)();
-function ContextProvider({ children }) {
-    const [client, setClient] = (0, react_1.useState)(null);
-    const [environment, setEnvironment] = (0, react_1.useState)("PRODUCTION");
-    const [organization, setOrganization] = (0, react_1.useState)(null);
-    const [organizations, setOrganizations] = (0, react_1.useState)([]);
-    const [activeQuery, setActiveQuery] = (0, react_1.useState)("");
-    const [tables, setTables] = (0, react_1.useState)([]);
-    const [schema, setSchema] = (0, react_1.useState)([]);
-    const [activeComponent, setActiveComponent] = (0, react_1.useState)("Dashboards");
-    const [reportId, setReportId] = (0, react_1.useState)(null);
-    return ((0, jsx_runtime_1.jsx)(ClientContext.Provider, { value: [client, setClient], children: (0, jsx_runtime_1.jsx)(EnvironmentContext.Provider, { value: [environment, setEnvironment], children: (0, jsx_runtime_1.jsx)(OrganizationsContext.Provider, { value: [organizations, setOrganizations], children: (0, jsx_runtime_1.jsx)(OrganizationContext.Provider, { value: [organization, setOrganization], children: (0, jsx_runtime_1.jsx)(SchemaContext.Provider, { value: [schema, setSchema], children: (0, jsx_runtime_1.jsx)(TablesContext.Provider, { value: [tables, setTables], children: (0, jsx_runtime_1.jsx)(ActiveQueryContext.Provider, { value: [activeQuery, setActiveQuery], children: (0, jsx_runtime_1.jsx)(ActiveComponentContext.Provider, { value: [activeComponent, setActiveComponent], children: (0, jsx_runtime_1.jsx)(ReportIdContext.Provider, { value: [reportId, setReportId], children: children }) }) }) }) }) }) }) }) }));
-}
+const components_1 = require("./components");
+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",
@@ -146,21 +130,22 @@ const defaultTheme = {
     fontSize: 14,
 };
 function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, setIsOpen, filters, dateFilter, openAddFilterModal, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, selectedEditDashboard, dashNames, setSelectedEditDashboard, SecondaryButtonComponent, }) {
+    const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
     const [selectedDashboardName, setSelectedDashboardName] = (0, react_1.useState)("");
     (0, react_1.useEffect)(() => {
         setSelectedDashboardName(selectedDashboard);
     }, [selectedDashboard]);
     const [newFilters, setNewFilters] = (0, react_1.useState)([]);
     const [newDateFilter, setNewDateFilter] = (0, react_1.useState)(null);
-    const [tables] = (0, react_1.useContext)(TablesContext);
+    // const [tables, setTables] = useContext<TablesContextType>(TablesContext);
     const [selectedTable, setSelectedTable] = (0, react_1.useState)(null);
     const [field, setField] = (0, react_1.useState)("");
     (0, react_1.useEffect)(() => {
-        if (tables.length) {
-            setSelectedTable(tables[0]);
-            setField(tables[0].columns.map((elem) => elem.name)[0]);
+        if (state.tables.length) {
+            setSelectedTable(state.tables[0]);
+            setField(state.tables[0].columns.map((elem) => elem.name)[0]);
         }
-    }, [tables]);
+    }, [state.tables]);
     (0, react_1.useEffect)(() => {
         if (dashboardData && dashboardData.filters) {
             setNewFilters(dashboardData.filters);
@@ -387,7 +372,7 @@ function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, se
                                                         fontSize: 14,
                                                         fontWeight: "600",
                                                         marginBottom: 3,
-                                                    }, children: "Table" }), (0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: selectedTable ? selectedTable.name : "", onChange: (e) => setSelectedTable(tables.find((table) => table.name === e)), options: tables.map((table) => {
+                                                    }, 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",
@@ -424,20 +409,21 @@ function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, se
                                                                 }, 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", { "fill-rule": "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" })] }) }));
 }
+exports.EditFiltersModal = EditFiltersModal;
 function AddFilterModal({ isOpen, selectedDashboard, client, setIsOpen, ModalComponent, TextInputComponent, SelectComponent, HeaderComponent, ButtonComponent, openAddDashboardModal, }) {
-    const [tables] = (0, react_1.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 [dateRange, setDateRange] = (0, react_1.useState)([new Date(), new Date()]);
+    const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
     (0, react_1.useEffect)(() => {
-        if (tables.length) {
-            setSelectedTable(tables[0]);
+        if (state.tables.length) {
+            setSelectedTable(state.tables[0]);
             // setField(tables[0].columns.map((elem) => elem.name));
-            setField(tables[0].columns[0].name);
+            setField(state.tables[0].columns[0].name);
         }
-    }, [tables]);
+    }, [state.tables]);
     const handleAddFilter = async () => {
         if (!selectedTable || !field) {
             return;
@@ -448,7 +434,7 @@ function AddFilterModal({ isOpen, selectedDashboard, client, setIsOpen, ModalCom
             return;
         }
         let responseData;
-        const url = `https://quill-344421.uc.r.appspot.comdashfilter/${client._id}/`;
+        const url = `https://quill-344421.uc.r.appspot.com/dashfilter/${client._id}/`;
         const body = {
             name: selectedDashboard,
             filter: {
@@ -487,7 +473,7 @@ function AddFilterModal({ isOpen, selectedDashboard, client, setIsOpen, ModalCom
     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: 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), options: 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) => {
                         return { label: column.name, value: column.name };
@@ -495,211 +481,38 @@ function AddFilterModal({ isOpen, selectedDashboard, client, setIsOpen, ModalCom
                         setField(e);
                     } }), (0, jsx_runtime_1.jsx)(ButtonComponent, { label: "Add filter", onClick: handleAddFilter })] }) }));
 }
-function Portal({ publicKey, queryEndpoint, theme = defaultTheme, queryHeaders, withCredentials, environment, organizationId, TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, EnvironmentSelectComponent, UserManagementComponent, HeaderComponent, }) {
-    return ((0, jsx_runtime_1.jsx)(ContextProvider, { children: (0, jsx_runtime_1.jsx)(Navigation, { theme: theme, publicKey: publicKey, organizationId: organizationId, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials, TextInputComponent: TextInputComponent ||
-                (({ onChange, value, placeholder }) => ((0, jsx_runtime_1.jsx)("input", { style: {
-                        display: "flex",
-                        flexDirection: "row",
-                        alignItems: "center",
-                        paddingLeft: "12px",
-                        paddingRight: "12px",
-                        fontWeight: "medium",
-                        height: 38,
-                        minWidth: 230,
-                        boxShadow: "0 1px 2px 0 rgba(0,0,0,.05)",
-                        // TODO: TEST
-                        width: "100%",
-                        backgroundColor: theme?.backgroundColor || "white",
-                        color: theme?.primaryTextColor,
-                        borderWidth: "1px",
-                        borderColor: theme?.borderColor || "#E7E7E7",
-                        borderStyle: "solid",
-                        borderRadius: "6px",
-                    }, onChange: onChange, value: value, placeholder: placeholder }))), ButtonComponent: ButtonComponent ||
-                (({ onClick, label }) => ((0, jsx_runtime_1.jsx)("button", { style: {
-                        height: 36,
-                        background: theme?.primaryButtonColor,
-                        color: theme?.backgroundColor,
-                        display: "flex",
-                        borderRadius: 6,
-                        alignItems: "center",
-                        justifyContent: "center",
-                        outline: "none",
-                        cursor: "pointer",
-                        fontFamily: theme?.fontFamily,
-                        fontWeight: theme?.buttonFontWeight || 600,
-                        border: "none",
-                        fontSize: 14,
-                        paddingLeft: 20,
-                        paddingRight: 20,
-                    }, onClick: onClick, children: label }))), HeaderComponent: HeaderComponent ||
-                (({ label }) => ((0, jsx_runtime_1.jsx)("h1", { style: {
-                        color: theme?.primaryTextColor,
-                        fontFamily: theme?.fontFamily,
-                        fontWeight: theme?.buttonFontWeight || 600,
-                        fontSize: 24,
-                    }, children: label }))), SecondaryButtonComponent: SecondaryButtonComponent ||
-                (({ onClick, label }) => ((0, jsx_runtime_1.jsx)("button", { style: {
-                        height: 36,
-                        background: "#F9FAFB",
-                        color: theme?.primaryTextColor,
-                        display: "flex",
-                        borderRadius: 6,
-                        alignItems: "center",
-                        justifyContent: "center",
-                        outline: "none",
-                        cursor: "pointer",
-                        fontFamily: theme?.fontFamily,
-                        fontWeight: theme?.buttonFontWeight || 600,
-                        border: "none",
-                        fontSize: 14,
-                        paddingLeft: 20,
-                        paddingRight: 20,
-                    }, onClick: onClick, children: label }))), ModalComponent: ModalComponent ||
-                (({ isOpen, close, children }) => {
-                    (0, react_1.useEffect)(() => {
-                        // Prevent scrolling in the background when the modal is open
-                        if (isOpen) {
-                            document.body.style.overflow = "hidden";
-                        }
-                        return () => {
-                            // Re-enable scrolling when the modal is closed/unmounted
-                            document.body.style.overflow = "unset";
-                        };
-                    }, [isOpen]);
-                    if (!isOpen) {
-                        return null;
-                    }
-                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                    position: "fixed",
-                                    top: "0",
-                                    right: "0",
-                                    bottom: "0",
-                                    left: "0",
-                                    zIndex: "50",
-                                    backgroundColor: "rgba(255, 255, 255, 0.8)",
-                                    backdropFilter: "blur(5px)",
-                                }, onClick: close }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                    // position: "absolute",
-                                    position: "fixed",
-                                    left: "50%",
-                                    top: "50%",
-                                    zIndex: "50",
-                                    // width: "100%",
-                                    // maxWidth: 1024,
-                                    maxHeight: "90vh",
-                                    minWidth: 462,
-                                    display: "flex",
-                                    justifyContent: "center",
-                                    alignItems: "center",
-                                    transform: "translateX(-50%) translateY(-50%)",
-                                    background: "white",
-                                    borderRadius: 8,
-                                    borderStyle: "solid",
-                                    borderWidth: 1,
-                                    borderColor: "#e7e7e7",
-                                    // overflow: "scroll",
-                                    padding: 30,
-                                    // zIndex: 1000,
-                                }, children: children })] }));
-                }), environment: environment, OrganizationSelectComponent: OrganizationSelectComponent, UserManagementComponent: UserManagementComponent, EnvironmentSelectComponent: EnvironmentSelectComponent, SelectComponent: SelectComponent ||
-                (({ options, onChange, value }) => {
-                    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: "relative" }, children: [(0, jsx_runtime_1.jsx)("select", { style: {
-                                    width: "100%",
-                                    minWidth: 230,
-                                    maxWidth: 230,
-                                    outline: "none",
-                                    textAlign: "left",
-                                    whiteSpace: "nowrap",
-                                    overflow: "hidden",
-                                    textOverflow: "ellipsis",
-                                    borderRadius: 6,
-                                    WebkitAppearance: "none",
-                                    paddingLeft: 12,
-                                    paddingRight: 12,
-                                    height: 38,
-                                    borderWidth: theme?.borderWidth,
-                                    borderColor: theme?.borderColor,
-                                    background: theme?.backgroundColor,
-                                    color: theme?.primaryTextColor,
-                                    boxShadow: "0 1px 2px 0 rgba(0,0,0,.05)",
-                                    fontFamily: theme?.fontFamily,
-                                }, value: value || "", onChange: (event) => onChange(event.target.value), children: options.length > 0 &&
-                                    options.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, label: option.label }, option.value))) }), (0, jsx_runtime_1.jsx)(ArrowDownHeadIcon, { style: {
-                                    height: "20px",
-                                    width: "20px",
-                                    flex: "none",
-                                    position: "absolute",
-                                    right: 8,
-                                    top: 9,
-                                    color: theme?.secondaryTextColor,
-                                }, "aria-hidden": "true" })] }));
-                }) }) }));
+exports.AddFilterModal = AddFilterModal;
+function Portal({ publicKey, queryEndpoint, theme = defaultTheme, queryHeaders, withCredentials, environment, organizationId, TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, UserManagementComponent, HeaderComponent, }) {
+    return ((0, jsx_runtime_1.jsx)(AdminProvider_1.AdminProvider, { publicKey: publicKey, children: (0, jsx_runtime_1.jsx)(Navigation, { theme: theme, publicKey: publicKey, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials, TextInputComponent: TextInputComponent ||
+                primitives_1.TextInputPrimitive, ButtonComponent: ButtonComponent ||
+                primitives_1.ButtonPrimitive, HeaderComponent: HeaderComponent ||
+                primitives_1.HeaderPrimitive, SecondaryButtonComponent: SecondaryButtonComponent ||
+                primitives_1.SecondaryButtonPrimitive, ModalComponent: ModalComponent ||
+                primitives_1.ModalPrimitive, environment: environment, OrganizationSelectComponent: OrganizationSelectComponent, UserManagementComponent: UserManagementComponent, SelectComponent: SelectComponent ||
+                primitives_1.SelectPrimitive }) }));
 }
 exports.default = Portal;
-const ArrowDownHeadIcon = ({ ...props }) => ((0, jsx_runtime_1.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" })] }));
-function Navigation({ TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, EnvironmentSelectComponent, UserManagementComponent, HeaderComponent, publicKey, organizationId, queryEndpoint, queryHeaders, environment, withCredentials, }) {
-    const [client, setClient] = (0, react_1.useContext)(ClientContext);
-    const [environmentContext, setEnvironmentContext] = (0, react_1.useContext)(EnvironmentContext);
-    const [tables, setTables] = (0, react_1.useContext)(TablesContext);
-    const [organization, setOrganization] = (0, react_1.useContext)(OrganizationContext);
-    const [schema, setSchema] = (0, react_1.useContext)(SchemaContext);
-    const [activeComponent, setActiveComponent] = (0, react_1.useContext)(ActiveComponentContext);
-    const [reportId, setReportId] = (0, react_1.useContext)(ReportIdContext);
-    (0, react_1.useEffect)(() => {
-        let isSubscribed = true;
-        async function getClient() {
-            try {
-                const response1 = await fetch(`https://quill-344421.uc.r.appspot.com/client/${publicKey}/`, {
-                    method: "GET",
-                    headers: {
-                        Authorization: `Bearer `,
-                    },
-                });
-                const data1 = await response1.json();
-                setClient(data1.client);
-                const response = await fetch(`https://quill-344421.uc.r.appspot.com/schema2/${publicKey}/`, {
-                    method: "GET",
-                    headers: {
-                        Authorization: `Bearer `,
-                    },
-                });
-                if (!response.ok) {
-                    throw new Error("Failed to fetch tables data");
-                }
-                const data = await response.json();
-                setTables(data.tables);
-                setSchema(data.tables);
-            }
-            catch (error) {
-                console.error("ERROR:", error);
-            }
-        }
-        if (isSubscribed) {
-            getClient();
-        }
-        return () => {
-            isSubscribed = false;
-        };
-    }, [publicKey]);
-    (0, react_1.useEffect)(() => {
-        setEnvironmentContext(environment);
-    }, [environment]);
-    if (!client) {
+function Navigation({ TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, UserManagementComponent, HeaderComponent, publicKey, queryEndpoint, queryHeaders, environment, withCredentials, }) {
+    const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
+    // MMTODO: Idk if this is needed
+    // useEffect(() => {
+    //     setEnvironmentContext(environment);
+    // }, [environment]);
+    if (!state.client) {
         return null;
     }
     const renderComponentBasedOnName = () => {
-        switch (activeComponent) {
+        switch (state.activeComponent) {
             case "Dashboards":
-                return ((0, jsx_runtime_1.jsx)(Dashboards, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, OrganizationSelectComponent: OrganizationSelectComponent, EnvironmentSelectComponent: EnvironmentSelectComponent, HeaderComponent: HeaderComponent, setReportId: setReportId, queryEndpoint: queryEndpoint, organizationId: organizationId, queryHeaders: queryHeaders, withCredentials: withCredentials }));
+                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)(QueryEditor, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, OrganizationSelectComponent: OrganizationSelectComponent, EnvironmentSelectComponent: EnvironmentSelectComponent, organizationId: organizationId }));
+                return ((0, jsx_runtime_1.jsx)(DashboardBuilder_1.default, {}));
             case "Report":
-                return ((0, jsx_runtime_1.jsx)(ReportWrapper, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, OrganizationSelectComponent: OrganizationSelectComponent, organizationId: organizationId, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials }));
+                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":
-                return ((0, jsx_runtime_1.jsx)(Tables, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, HeaderComponent: HeaderComponent, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, EnvironmentSelectComponent: EnvironmentSelectComponent, OrganizationSelectComponent: OrganizationSelectComponent }));
+                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, EnvironmentSelectComponent: EnvironmentSelectComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, HeaderComponent: HeaderComponent, setReportId: setReportId, queryEndpoint: queryEndpoint, organizationId: 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: {
@@ -734,7 +547,7 @@ function Navigation({ TextInputComponent, ButtonComponent, SecondaryButtonCompon
                             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: activeComponent === "Dashboards" ? "#2121210A" : "transparent",
+                                    backgroundColor: state.activeComponent === "Dashboards" ? "#2121210A" : "transparent",
                                     padding: "8px 12px",
                                     height: "38px",
                                     marginBottom: "4px",
@@ -744,9 +557,11 @@ function Navigation({ TextInputComponent, ButtonComponent, SecondaryButtonCompon
                                     transition: "background-color 0.3s",
                                     border: "none",
                                     outline: "none",
-                                }, onClick: () => setActiveComponent("Dashboards"), children: "Dashboards" }), (0, jsx_runtime_1.jsx)("button", { style: {
+                                }, 
+                                // onClick={() => setActiveComponent("Dashboards")}
+                                onClick: () => dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'Dashboards' }), children: "Dashboards" }), (0, jsx_runtime_1.jsx)("button", { style: {
                                     color: "#212121",
-                                    backgroundColor: activeComponent === "SQL editor" ? "#2121210A" : "transparent",
+                                    backgroundColor: state.activeComponent === "SQL editor" ? "#2121210A" : "transparent",
                                     padding: "8px 12px",
                                     height: "38px",
                                     marginBottom: "4px",
@@ -756,9 +571,11 @@ function Navigation({ TextInputComponent, ButtonComponent, SecondaryButtonCompon
                                     transition: "background-color 0.3s",
                                     border: "none",
                                     outline: "none",
-                                }, onClick: () => setActiveComponent("SQL editor"), children: "SQL editor" }), (0, jsx_runtime_1.jsx)("button", { style: {
+                                }, 
+                                // 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: activeComponent === "SQL views" ? "#2121210A" : "transparent",
+                                    backgroundColor: state.activeComponent === "SQL views" ? "#2121210A" : "transparent",
                                     padding: "8px 12px",
                                     height: "38px",
                                     marginBottom: "4px",
@@ -768,7 +585,9 @@ function Navigation({ TextInputComponent, ButtonComponent, SecondaryButtonCompon
                                     transition: "background-color 0.3s",
                                     border: "none",
                                     outline: "none",
-                                }, onClick: () => setActiveComponent("SQL views"), children: "SQL views" })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                }, 
+                                // 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",
@@ -788,7 +607,7 @@ function Navigation({ TextInputComponent, ButtonComponent, SecondaryButtonCompon
                 , { 
                     // organizationId={'2'}
                     // publicKey={client?._id}
-                    organizationId: organizationId, queryEndpoint: queryEndpoint, withCredentials: withCredentials, queryHeaders: queryHeaders, publicKey: publicKey, environment: environment, theme: exports.theme, children: renderComponentBasedOnName() }) })] }));
+                    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",
@@ -800,8 +619,11 @@ exports.theme = {
     chartTickColor: "#CCCCCC",
     chartColors: ["#6269E9", "#E14F62"],
     borderColor: "#E5E7EB",
+    labelFontWeight: 500,
+    fontSize: 14,
     borderWidth: 1,
     primaryButtonColor: "#212121",
+    primaryButtonTextColor: "#FFFFFF",
 };
 function convertPostgresColumn(column) {
     let format;
@@ -886,233 +708,10 @@ function classNames(...classes) {
     return classes.filter(Boolean).join(" ");
 }
 exports.classNames = classNames;
-function Dashboards({ setReportId, TextInputComponent, ButtonComponent, SecondaryButtonComponent, OrganizationSelectComponent, EnvironmentSelectComponent, ModalComponent, SelectComponent, queryEndpoint, queryHeaders, organizationId, HeaderComponent, withCredentials, }) {
-    const [organizations] = (0, react_1.useContext)(OrganizationsContext);
-    const [client] = (0, react_1.useContext)(ClientContext);
-    const [organization, setOrganization] = (0, react_1.useContext)(OrganizationContext);
-    const [environment, setEnvironment] = (0, react_1.useContext)(EnvironmentContext);
-    const [dashboards, setDashboards] = (0, react_1.useState)([]);
-    const [selectedDashboard, setSelectedDashboard] = (0, react_1.useState)("");
-    const [selectedEditDashboard, setSelectedEditDashboard] = (0, react_1.useState)("");
-    const [selectedReorderDashboard, setSelectedReorderDashboard] = (0, react_1.useState)("");
-    const [editDashboardData, setEditDashboardData] = (0, react_1.useState)(null);
-    const [addFilterModalIsOpen, setAddFilterModalIsOpen] = (0, react_1.useState)(false);
-    const [isAddDashboardModalOpen, setIsAddDashboardModalOpen] = (0, react_1.useState)(false);
-    const [editFilterModalIsOpen, setEditFilterModalIsOpen] = (0, react_1.useState)(false);
-    const [isReorderDashboardModalOpen, setIsReorderDashboardModalOpen] = (0, react_1.useState)(false);
-    const [dashboardData, setDashboardData] = (0, react_1.useState)(null);
-    const [activeComponent, setActiveComponent] = (0, react_1.useContext)(ActiveComponentContext);
-    const [isEditDashboardModalOpen, setIsEditDashboardModalOpen] = (0, react_1.useState)(false);
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    // const navigate = useNavigate();
-    // useEffect(() => {
-    //   if (customValue.length && customValue !== id && !userTyping) {
-    //     navigate(`/dashboards/${customValue}`);
-    //     // window.location.reload();
-    //   }
-    //   // } else {
-    //   //   navigate("/");
-    //   // }
-    // }, [customValue, userTyping]);
-    async function getDashNames() {
-        const url = `https://quill-344421.uc.r.appspot.com/dashnames/${client._id}/`;
-        const response2 = await fetch(url, {
-            method: "GET",
-            headers: {
-                Authorization: "Bearer ",
-                environment: environment,
-            },
-        });
-        // If you need to retrieve the JSON data from the response:
-        const data = await response2.json();
-        if (!data.dashboardNames || !data.dashboardNames.length) {
-            return;
-        }
-        const dashNames = data.dashboardNames.map((elem) => {
-            if (!elem) {
-                return { name: "null" };
-            }
-            return { name: elem };
-        });
-        setDashboards(dashNames);
-        setSelectedDashboard(dashNames[0].name);
-    }
-    (0, react_1.useEffect)(() => {
-        let isSubscribed = true;
-        if (isSubscribed) {
-            getDashNames();
-        }
-        return () => {
-            isSubscribed = false;
-        };
-    }, [environment]);
-    // useEffect(() => {
-    //   if (id && id.length) {
-    //     window.location.reload();
-    //   }
-    // }, [id]);
-    const handleSetOrganization = (org) => {
-        setOrganization(null);
-        setTimeout(() => setOrganization(org), 50);
-    };
-    (0, react_1.useEffect)(() => {
-        async function getDashboardData(dashboard, setData) {
-            let responseData;
-            if (queryEndpoint) {
-                const response = await fetch(queryEndpoint, {
-                    method: "POST",
-                    headers: {
-                        ...queryHeaders,
-                        "Content-Type": "application/json",
-                    },
-                    body: JSON.stringify({
-                        metadata: organizationId
-                            ? {
-                                orgId: organizationId,
-                                task: "config",
-                                name: dashboard,
-                            }
-                            : { task: "config", name: dashboard },
-                    }),
-                    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 = new URL(`https://quill-344421.uc.r.appspot.com/dashconfig`);
-                // Setting the search parameters for the URL
-                url.search = new URLSearchParams({
-                    orgId: organizationId ? organizationId : "",
-                    publicKey: client._id,
-                    name: dashboard,
-                }).toString();
-                const response2 = await fetch(url, {
-                    method: "GET",
-                    headers: {
-                        Authorization: "Bearer ",
-                        environment: environment,
-                    },
-                });
-                // If you need to retrieve the JSON data from the response:
-                responseData = await response2.json();
-            }
-            setData(responseData);
-        }
-        if (selectedEditDashboard) {
-            getDashboardData(selectedEditDashboard, setEditDashboardData);
-            return;
-        }
-        if (selectedDashboard && client) {
-            getDashboardData(selectedDashboard, setDashboardData);
-        }
-    }, [selectedDashboard, selectedEditDashboard, organizationId, client]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            display: "flex",
-            flexDirection: "column",
-            paddingTop: "0px",
-        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                    //   width: 'calc(100vw - 30px)',
-                    display: "flex",
-                    position: "fixed",
-                    backgroundColor: "white",
-                    zIndex: 1,
-                    left: 0,
-                    right: 0,
-                    top: 0,
-                    flexDirection: "row",
-                    paddingTop: 85,
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    paddingLeft: "30px",
-                    paddingRight: "30px",
-                    borderBottomWidth: 1,
-                    borderTopWidth: 0,
-                    borderLeftWidth: 0,
-                    borderRightWidth: 0,
-                    borderStyle: "solid",
-                    borderColor: exports.theme.borderColor,
-                    paddingBottom: 20,
-                    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%",
-                        // marginLeft: '25px'
-                    }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
-                                fontSize: "36px",
-                                paddingTop: "0px",
-                                fontWeight: "600",
-                                color: "#384151",
-                                margin: 0,
-                                paddingBottom: 4,
-                            }, children: "Dashboards" }), (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.jsxs)("div", { style: {
-                                            display: "flex",
-                                            flexDirection: "row",
-                                            alignItems: "flex-end",
-                                            gap: 16,
-                                        }, children: [OrganizationSelectComponent && (0, jsx_runtime_1.jsx)(OrganizationSelectComponent, {}), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
-                                                            fontSize: "14px",
-                                                            paddingTop: "0px",
-                                                            marginTop: "0px",
-                                                            marginBottom: "4px",
-                                                            fontWeight: "600",
-                                                            color: exports.theme.secondaryTextColor,
-                                                        }, children: "Dashboard" }), (0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", options: dashboards.length
-                                                            ? dashboards.map((elem) => {
-                                                                return { value: elem.name, label: elem.name };
-                                                            })
-                                                            : [], onChange: (e) => setSelectedDashboard(e), value: selectedDashboard ? selectedDashboard : "" })] }), EnvironmentSelectComponent && (0, jsx_runtime_1.jsx)(EnvironmentSelectComponent, {}), (0, jsx_runtime_1.jsx)("div", { style: {
-                                                    minWidth: 238 - 120,
-                                                    gap: 12,
-                                                    display: "flex",
-                                                    flexDirection: "row",
-                                                }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Edit dashboards", onClick: () => setIsEditDashboardModalOpen(true) }) })] }) })] })] }) }), (0, jsx_runtime_1.jsx)("div", { style: { paddingTop: "190px", display: "inline-block" }, children: selectedDashboard && ((0, jsx_runtime_1.jsx)(react_2.Dashboard
-                // TODO: CHANGE
-                , { 
-                    // TODO: CHANGE
-                    name: selectedDashboard, 
-                    // name='Customer Report'
-                    containerStyle: {
-                        // height: "850px",
-                        paddingRight: 25,
-                        //   display: "block",
-                        // width: 'calc(100% - 50px)'
-                    }, onClickDashboardItem: (elem) => {
-                        setReportId(elem._id);
-                        setActiveComponent("Report");
-                    } })) }), (0, jsx_runtime_1.jsx)(EditDashboardsModal, { clientId: client._id, isOpen: isEditDashboardModalOpen, setIsOpen: setIsEditDashboardModalOpen, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, TextInputComponent: TextInputComponent, openEditFilterModal: (dashboardName) => {
-                    setSelectedEditDashboard(dashboardName);
-                    setEditFilterModalIsOpen(true);
-                    // setIsEditDashboardModalOpen(false);
-                }, openAddDashboardModal: () => {
-                    setIsAddDashboardModalOpen(true);
-                    // setIsEditDashboardModalOpen(false);
-                }, openEditOrderModal: (dashboardName) => {
-                    setSelectedReorderDashboard(dashboardName);
-                    setIsReorderDashboardModalOpen(true);
-                }, HeaderComponent: HeaderComponent, setDashboardData: setDashboardData, dashboards: dashboards, getDashNames: getDashNames }), (0, jsx_runtime_1.jsx)(ReorderDashboardModal, { organizationId: organizationId, isOpen: isReorderDashboardModalOpen, setIsOpen: setIsReorderDashboardModalOpen, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, selectedDashboard: selectedReorderDashboard, organizationId: organizationId }), (0, jsx_runtime_1.jsx)(EditFiltersModal, { selectedDashboard: selectedEditDashboard, dashboardData: editDashboardData, isOpen: editFilterModalIsOpen, setIsOpen: setEditFilterModalIsOpen, openAddFilterModal: () => {
-                    setAddFilterModalIsOpen(true);
-                    // setEditFilterModalIsOpen(false);
-                }, client: client, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, TextInputComponent: TextInputComponent, HeaderComponent: HeaderComponent, SelectComponent: SelectComponent, dashNames: dashboards, setSelectedEditDashboard: setSelectedEditDashboard }), (0, jsx_runtime_1.jsx)(AddFilterModal, { selectedDashboard: selectedEditDashboard, isOpen: addFilterModalIsOpen, setIsOpen: setAddFilterModalIsOpen, client: client, ModalComponent: ModalComponent, TextInputComponent: TextInputComponent, SelectComponent: SelectComponent, HeaderComponent: HeaderComponent, ButtonComponent: ButtonComponent, openAddDashboardModal: () => {
-                    setIsAddDashboardModalOpen(true);
-                    // setAddFilterModalIsOpen(false);
-                } }), (0, jsx_runtime_1.jsx)(AddDashboardModal, { selectedDashboard: selectedDashboard, isOpen: isAddDashboardModalOpen, setIsOpen: setIsAddDashboardModalOpen, client: client, ModalComponent: ModalComponent, TextInputComponent: TextInputComponent, SelectComponent: SelectComponent, HeaderComponent: HeaderComponent, ButtonComponent: ButtonComponent, dashNames: dashboards, openAddFilterModal: () => {
-                    setAddFilterModalIsOpen(true);
-                    // setIsAddDashboardModalOpen(false);
-                }, organizationId: organizationId, getDashNames: getDashNames })] }));
-}
 function AddDashboardModal({ selectedDashboard, isOpen, setIsOpen, client, ModalComponent, TextInputComponent, SelectComponent, HeaderComponent, ButtonComponent, dashNames, getDashNames, organizationId, }) {
+    const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
     const [selectedDashboardName, setSelectedDashboardName] = (0, react_1.useState)(selectedDashboard.name);
-    const [tables] = (0, react_1.useContext)(TablesContext);
+    // 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)("");
@@ -1121,12 +720,12 @@ function AddDashboardModal({ selectedDashboard, isOpen, setIsOpen, client, Modal
     const [newFilters, setNewFilters] = (0, react_1.useState)([]);
     const [newDateFilter, setNewDateFilter] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
-        if (tables.length) {
-            setSelectedTable(tables[0]);
+        if (state.tables.length) {
+            setSelectedTable(state.tables[0]);
             // setField(tables[0].columns.map((elem) => elem.name));
-            setField(tables[0].columns[0].name);
+            setField(state.tables[0].columns[0].name);
         }
-    }, [tables]);
+    }, [state.tables]);
     const handleDeleteFilter = async (filter) => {
         setNewFilters(newFilters.filter((f) => f !== filter));
     };
@@ -1271,590 +870,8 @@ function AddDashboardModal({ selectedDashboard, isOpen, setIsOpen, client, Modal
                                                             }, 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 +" })] })] }) }));
 }
-function ReorderDashboardModal({ isOpen, setIsOpen, ModalComponent, ButtonComponent, selectedDashboard, organizationId, }) {
-    const [client] = (0, react_1.useContext)(ClientContext);
-    const [dashboardItems, setDashboardItems] = (0, react_1.useState)([]);
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    const [chartType, setChartType] = (0, react_1.useState)("metric");
-    const [doesDashboardHaveTables, setDoesDashboardHaveTables] = (0, react_1.useState)(false);
-    const [doesDashboardHaveCharts, setDoesDashboardHaveCharts] = (0, react_1.useState)(false);
-    const [doesDashboardHaveMetrics, setDoesDashboardHaveMetrics] = (0, react_1.useState)(false);
-    const [orderArray, setOrderArray] = (0, react_1.useState)([]);
-    const [itemMap, setItemMap] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        async function getDashboardItems() {
-            const { _id, environment } = client;
-            setLoading(true);
-            const url = new URL("https://quill-344421.uc.r.appspot.com/dashconfig");
-            // Add query parameters to the URL
-            url.search = new URLSearchParams({
-                publicKey: _id,
-                orgId: organizationId,
-                name: selectedDashboard,
-            }).toString();
-            const response = await fetch(url, {
-                method: "GET",
-                headers: {
-                    environment: environment || undefined,
-                },
-            });
-            const responseData = await response.json();
-            let flattened = [];
-            for (let key in responseData.sections) {
-                flattened = flattened.concat(responseData.sections[key]);
-            }
-            setDashboardItems(flattened);
-            setLoading(false);
-        }
-        if (selectedDashboard && client) {
-            getDashboardItems();
-        }
-    }, [selectedDashboard, client]);
-    (0, react_1.useEffect)(() => {
-        const itemMap = new Map();
-        dashboardItems.forEach((item) => {
-            if (item.chartType === "table") {
-                setDoesDashboardHaveTables(true);
-            }
-            else if (item.chartType === "metric") {
-                setDoesDashboardHaveMetrics(true);
-            }
-            else {
-                setDoesDashboardHaveCharts(true);
-            }
-            itemMap.set(item._id, item);
-        });
-        setItemMap(itemMap);
-    }, [dashboardItems]);
-    const closeModal = () => {
-        setIsOpen(false);
-    };
-    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                display: "flex",
-                flexDirection: "column",
-                position: "relative",
-                minWidth: 700,
-                maxWidth: 700,
-                minHeight: 700,
-                // overflowY: "scroll",
-            }, children: [loading ? (0, jsx_runtime_1.jsx)("div", { children: "Loading..." }) : null, dashboardItems.length > 0 && itemMap.size > 0 && ((0, jsx_runtime_1.jsx)(ReorderableList, { itemMap: itemMap, initialItems: dashboardItems.filter((elem) => chartType === "chart"
-                        ? elem.chartType !== "metric" && elem.chartType !== "table"
-                        : elem.chartType === chartType), ButtonComponent: ButtonComponent, closeModal: closeModal })), (0, jsx_runtime_1.jsxs)("div", { style: {
-                        height: 80,
-                        background: "white",
-                        width: 700,
-                        position: "absolute",
-                        top: -20,
-                        left: 0,
-                        right: 20,
-                        paddingTop: 20,
-                        display: "flex",
-                        flexDirection: "row",
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                    }, children: [(0, jsx_runtime_1.jsx)("h1", { style: { fontSize: 22, fontWeight: 600 }, children: "Reorder items" }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                background: "#f7f7f7",
-                                borderRadius: 6,
-                                height: 32,
-                                display: "flex",
-                                flexDirection: "row",
-                                alignItems: "center",
-                                paddingLeft: 4,
-                                paddingRight: 4,
-                            }, children: [doesDashboardHaveMetrics && ((0, jsx_runtime_1.jsx)("button", { style: {
-                                        background: chartType === "metric" ? "white" : undefined,
-                                        color: chartType === "metric" ? "#384151" : "#677389",
-                                        fontWeight: chartType === "metric" ? "600" : "500",
-                                        borderRadius: 4,
-                                        paddingLeft: 6,
-                                        paddingRight: 6,
-                                        fontSize: 16,
-                                    }, onClick: () => setChartType("metric"), children: "Metrics" })), doesDashboardHaveCharts && ((0, jsx_runtime_1.jsx)("button", { style: {
-                                        background: chartType === "chart" ? "white" : undefined,
-                                        color: chartType === "chart" ? "#384151" : "#677389",
-                                        fontWeight: chartType === "chart" ? "600" : "500",
-                                        borderRadius: 4,
-                                        paddingLeft: 6,
-                                        paddingRight: 6,
-                                        fontSize: 16,
-                                    }, onClick: () => setChartType("chart"), children: "Charts" })), doesDashboardHaveTables && ((0, jsx_runtime_1.jsx)("button", { style: {
-                                        background: chartType === "table" ? "white" : undefined,
-                                        color: chartType === "table" ? "#384151" : "#677389",
-                                        fontWeight: chartType === "table" ? "600" : "500",
-                                        borderRadius: 4,
-                                        paddingLeft: 6,
-                                        paddingRight: 6,
-                                        fontSize: 16,
-                                    }, onClick: () => setChartType("table"), children: "Tables" }))] })] })] }) }));
-}
-function EditDashboardsModal({ ModalComponent, TextInputComponent, isOpen, setIsOpen, clientId, ButtonComponent, SecondaryButtonComponent, openEditFilterModal, openEditOrderModal, openAddDashboardModal, HeaderComponent, setDashboardData, dashboards, getDashNames, }) {
-    // const [dashboards, setDashboards] = useState([]);
-    // useEffect(() => {
-    //   async function getDashboards(clientId) {
-    //     const url = `https://quill-344421.uc.r.appspot.com/dashnames/${clientId}/`;
-    //     const response2 = await fetch(url, {
-    //       method: "GET",
-    //       headers: {
-    //         Authorization: "Bearer ", // Ensure you append your token after 'Bearer ' if needed
-    //       },
-    //     });
-    //     // If you need to retrieve the JSON data from the response:
-    //     const data = await response2.json();
-    //     setDashboards(data);
-    //   }
-    //   if (clientId) {
-    //     getDashboards(clientId);
-    //   }
-    // }, [clientId]);
-    async function handleDeleteDashboard(dashboardName) {
-        const url = `https://quill-344421.uc.r.appspot.com/dashdelete/${clientId}/`;
-        const body = {
-            name: dashboardName,
-        };
-        const headers = {
-            "Content-Type": "application/json",
-            Authorization: `Bearer `,
-        };
-        try {
-            const response = await fetch(url, {
-                method: "POST",
-                headers: headers,
-                body: JSON.stringify(body),
-            });
-            if (!response.ok) {
-                throw new Error(`HTTP error! Status: ${response.status}`);
-            }
-            const responseData = await response.json();
-            if (responseData) {
-                getDashNames();
-                return;
-            }
-        }
-        catch (e) {
-            console.log("error", e);
-        }
-    }
-    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                        display: "flex",
-                        flexDirection: "column",
-                    }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
-                                fontWeight: "600",
-                                fontSize: 24,
-                                paddingBottom: 8,
-                                color: exports.theme.primaryTextColor,
-                            }, children: "Dashboards" }), dashboards &&
-                            dashboards.map((dashboardName, index) => {
-                                return ((0, jsx_runtime_1.jsxs)("div", { style: {
-                                        display: "flex",
-                                        flexDirection: "row",
-                                        paddingTop: 5,
-                                        width: 400,
-                                        paddingBottom: 5,
-                                        alignItems: "center",
-                                        justifyContent: "space-between",
-                                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                display: "flex",
-                                                flexDirection: "column",
-                                            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                                    marginRight: 12,
-                                                    fontWeight: "600",
-                                                    fontSize: 16,
-                                                    color: exports.theme.primaryTextColor,
-                                                }, children: dashboardName.name }) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                                display: "flex",
-                                                flexDirection: "column",
-                                            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                    display: "flex",
-                                                    flexDirection: "row",
-                                                    alignItems: "flex-end",
-                                                }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => openEditFilterModal(dashboardName.name), label: "Edit" }), (0, jsx_runtime_1.jsx)("div", { style: { width: 8 } }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => openEditOrderModal(dashboardName.name), label: "Reorder" }), (0, jsx_runtime_1.jsx)("div", { style: { width: 8 } }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleDeleteDashboard(dashboardName.name), label: "Delete" })] }) })] }, dashboardName + index));
-                            })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                        display: "flex",
-                        flexDirection: "column",
-                        justifyContent: "center",
-                        marginTop: 20,
-                    }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: openAddDashboardModal, label: "Create new dashboard" }) })] }) }));
-}
-function DropdownMenu({ items, setSelected, selected, filterKey }) {
-    return ((0, jsx_runtime_1.jsx)("select", { onChange: (e) => {
-            setSelected(items.find((item) => item.name === e.target.value));
-        }, value: selected ? selected.name : "", children: items.slice(0, 50).map((item) => ((0, jsx_runtime_1.jsx)("option", { value: item.name, children: item.name }, item.name))) }));
-}
-exports.DropdownMenu = DropdownMenu;
-function Tables({ TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, queryEndpoint, queryHeaders, withCredentials, HeaderComponent, EnvironmentSelectComponent, OrganizationSelectComponent, }) {
-    const [tables, setTables] = (0, react_1.useState)([]);
-    const [modalIsOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [editModalIsOpen, setEditModalIsOpen] = (0, react_1.useState)(false);
-    const [name, setName] = (0, react_1.useState)("");
-    const [viewQuery, setViewQuery] = (0, react_1.useState)("");
-    const [editViewId, setEditViewId] = (0, react_1.useState)("");
-    const [editName, setEditName] = (0, react_1.useState)("");
-    const [editViewQuery, setEditViewQuery] = (0, react_1.useState)("");
-    const [client] = (0, react_1.useContext)(ClientContext);
-    const [tableToBeDeleted, setTableToBeDeleted] = (0, react_1.useState)("");
-    const [deleteName, setDeleteName] = (0, react_1.useState)("");
-    const [deleteModalIsOpen, setDeleteModalIsOpen] = (0, react_1.useState)(false);
-    const closeDeleteModal = () => {
-        setDeleteModalIsOpen(false);
-    };
-    const openModal = () => {
-        setIsOpen(true);
-        setEditViewQuery("");
-    };
-    const closeModal = () => {
-        setIsOpen(false);
-        setName("");
-        setViewQuery("");
-    };
-    const closeEditModal = () => {
-        setEditModalIsOpen(false);
-        setEditName("");
-        setEditViewQuery("");
-    };
-    const clickTableCell = (table) => {
-        setEditModalIsOpen(true);
-        setEditName(table.name);
-        setEditViewQuery(table.viewQuery);
-        setEditViewId(table._id);
-    };
-    const handleDeleteTable = async () => {
-        if (deleteName !== tableToBeDeleted) {
-            alert("Table names must match");
-            return;
-        }
-        if (!editViewId) {
-            console.log("No view id found");
-            return;
-        }
-        let response;
-        if (queryEndpoint) {
-            response = await fetch(queryEndpoint, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                    ...queryHeaders,
-                },
-                body: JSON.stringify({
-                    metadata: {
-                        task: "view",
-                        id: editViewId,
-                        deleted: true,
-                    },
-                }),
-                credentials: withCredentials ? "include" : "omit", // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
-            });
-        }
-        else {
-            response = await fetch(`https://quill-344421.uc.r.appspot.com/table/${client._id}/`, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                    Authorization: `Bearer `,
-                },
-                body: JSON.stringify({
-                    id: editViewId,
-                    deleted: true,
-                }),
-            });
-        }
-        const data = await response.json();
-        if (data) {
-            setDeleteName("");
-            setDeleteModalIsOpen(false);
-            setEditModalIsOpen(false);
-            setEditName("");
-            setEditViewQuery("");
-            getTables();
-        }
-    };
-    const getTables = async () => {
-        const response = await fetch(`https://quill-344421.uc.r.appspot.com/schema2/${client._id}/`, {
-            method: "GET",
-            headers: { Authorization: `Bearer ` },
-        });
-        const data = await response.json();
-        setTables(data.tables);
-    };
-    (0, react_1.useEffect)(() => {
-        let isSubscribed = true;
-        if (isSubscribed && client) {
-            getTables();
-        }
-        return () => {
-            isSubscribed = false;
-        };
-    }, []);
-    const handleClickFirstDelete = () => {
-        setTableToBeDeleted(editName);
-        setDeleteModalIsOpen(true);
-    };
-    const handleEditTable = async () => {
-        if (!editName.length) {
-            alert("Please enter a table name.");
-            return;
-        }
-        if (!editViewQuery.length) {
-            alert("Please enter a table query.");
-            return;
-        }
-        if (!editViewId) {
-            alert("Could not save.");
-            return;
-        }
-        let response;
-        if (queryEndpoint) {
-            response = await fetch(queryEndpoint, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                    ...queryHeaders,
-                },
-                body: JSON.stringify({
-                    metadata: {
-                        query: editViewQuery[editViewQuery.length - 1] === ";"
-                            ? editViewQuery.slice(0, -1)
-                            : editViewQuery,
-                        name: editName,
-                        task: "view",
-                        id: editViewId,
-                    },
-                }),
-                credentials: withCredentials ? "include" : "omit", // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
-            });
-        }
-        else {
-            response = await fetch(`https://quill-344421.uc.r.appspot.com/table/${client._id}/`, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                    Authorization: `Bearer `,
-                },
-                body: JSON.stringify({
-                    viewQuery: editViewQuery[editViewQuery.length - 1] === ";"
-                        ? editViewQuery.slice(0, -1)
-                        : editViewQuery,
-                    name: editName,
-                    id: editViewId,
-                }),
-            });
-        }
-        const data = await response.json();
-        if (data) {
-            closeEditModal();
-            getTables();
-        }
-    };
-    const handleAddTable = async () => {
-        if (!name.length) {
-            alert("Please enter a table name.");
-            return;
-        }
-        if (!editViewQuery.length) {
-            alert("Please enter a table query.");
-            return;
-        }
-        let response;
-        if (queryEndpoint) {
-            response = await fetch(queryEndpoint, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                    ...queryHeaders,
-                },
-                body: JSON.stringify({
-                    metadata: {
-                        query: editViewQuery[editViewQuery.length - 1] === ";"
-                            ? editViewQuery.slice(0, -1)
-                            : editViewQuery,
-                        name: name,
-                        task: "view",
-                    },
-                }),
-                credentials: withCredentials ? "include" : "omit", // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
-            });
-        }
-        else {
-            response = await fetch(`https://quill-344421.uc.r.appspot.com/table/${client._id}/`, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                    Authorization: `Bearer `,
-                },
-                body: JSON.stringify({
-                    viewQuery: editViewQuery[editViewQuery.length - 1] === ";"
-                        ? editViewQuery.slice(0, -1)
-                        : editViewQuery,
-                    name: name,
-                }),
-            });
-        }
-        const data = await response.json();
-        if (data) {
-            closeModal();
-            getTables();
-        }
-    };
-    (0, react_1.useEffect)(() => {
-        getTables();
-    }, [client]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { paddingLeft: "50px", paddingRight: "50px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                    //   width: 'calc(100vw - 30px)',
-                    display: "flex",
-                    position: "fixed",
-                    backgroundColor: "white",
-                    zIndex: 1,
-                    left: 0,
-                    right: 0,
-                    top: 0,
-                    flexDirection: "row",
-                    paddingTop: 85,
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    paddingLeft: "30px",
-                    paddingRight: "30px",
-                    borderBottomWidth: 1,
-                    borderTopWidth: 0,
-                    borderLeftWidth: 0,
-                    borderRightWidth: 0,
-                    borderStyle: "solid",
-                    borderColor: exports.theme.borderColor,
-                    paddingBottom: 20,
-                    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%",
-                        // marginLeft: '25px'
-                    }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
-                                fontSize: "36px",
-                                paddingTop: "0px",
-                                fontWeight: "600",
-                                color: "#384151",
-                                margin: 0,
-                                paddingBottom: 4,
-                            }, children: "SQL Views" }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                display: "flex",
-                                flexDirection: "row",
-                                alignItems: "center",
-                            }, children: (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexDirection: "column" }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                                        display: "flex",
-                                        flexDirection: "row",
-                                        alignItems: "flex-end",
-                                        gap: 16,
-                                    }, children: [OrganizationSelectComponent && (0, jsx_runtime_1.jsx)(OrganizationSelectComponent, {}), EnvironmentSelectComponent && (0, jsx_runtime_1.jsx)(EnvironmentSelectComponent, {}), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: openModal, label: "Add view +" })] }) }) })] }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 220 } }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexWrap: "wrap" }, children: tables.length
-                    ? tables.map((table) => ((0, jsx_runtime_1.jsx)(TableCell, { table: table, clickTableCell: clickTableCell })))
-                    : null }), (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: modalIsOpen, close: closeModal, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col p-[6px]", children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Add view" }), (0, jsx_runtime_1.jsx)("h3", { style: {
-                                fontWeight: 600,
-                                fontSize: 14,
-                                marginBottom: 6,
-                                marginTop: 8,
-                                color: "#212121",
-                            }, children: "name" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { placeholder: "Enter table display name...", onChange: (e) => setName(e.target.value), value: name }), (0, jsx_runtime_1.jsx)("h3", { style: {
-                                fontWeight: 600,
-                                fontSize: 14,
-                                marginBottom: 6,
-                                color: "#212121",
-                                marginTop: 8,
-                            }, children: "query" }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                background: exports.theme.backgroundColor,
-                                // maxHeight: 700,
-                                width: "800px",
-                                height: "500px",
-                                // minWidth: 450,
-                                // overflowY: "scroll",
-                                // padding: "20px 30px 20px 20px",
-                                // marginLeft: 20,
-                                borderTopLeftRadius: 6,
-                                borderBottomLeftRadius: 6,
-                                borderTopRightRadius: 0,
-                                borderBottomRightRadius: 0,
-                                overflow: "hidden",
-                            }, children: (0, jsx_runtime_1.jsx)(react_3.default, { height: "500px", width: "100%", defaultLanguage: "pgsql", defaultValue: "", value: editViewQuery, loading: (0, jsx_runtime_1.jsx)("div", {}), options: {
-                                    wordWrap: "on",
-                                    minimap: {
-                                        enabled: false,
-                                    },
-                                    padding: { top: 16 },
-                                }, onChange: (query) => setEditViewQuery(query), beforeMount: (monaco) => defineEditorTheme(monaco, exports.theme), onMount: setEditorTheme }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)(ButtonComponent, { label: "Add view +", onClick: handleAddTable })] }) }), (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: editModalIsOpen, close: closeEditModal, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col p-[6px]", children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                                display: "flex",
-                                flexDirection: "row",
-                                alignItems: "center",
-                                justifyContent: "space-between",
-                                // width: '100%'
-                            }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
-                                        fontSize: "24px",
-                                        paddingTop: "0px",
-                                        marginTop: "0px",
-                                        marginBottom: "0px",
-                                        fontWeight: "bold",
-                                        color: "#384151",
-                                    }, children: "Edit view" }), (0, jsx_runtime_1.jsx)("button", { style: {
-                                        background: "transparent",
-                                        border: "none",
-                                        outline: "none",
-                                        height: 24,
-                                        width: 24,
-                                        cursor: "pointer",
-                                    }, onClick: closeEditModal, children: (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", height: "24px", width: "24px", children: [(0, jsx_runtime_1.jsx)("line", { x1: "18", x2: "6", y1: "6", y2: "18" }), (0, jsx_runtime_1.jsx)("line", { x1: "6", x2: "18", y1: "6", y2: "18" })] }) })] }), (0, jsx_runtime_1.jsx)("h3", { style: {
-                                fontWeight: "600",
-                                fontSize: "14px",
-                                marginBottom: "6px",
-                                color: "#212121",
-                            }, children: "name" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { placeholder: "Enter table display name...", onChange: (e) => setEditName(e.target.value), value: editName }), (0, jsx_runtime_1.jsx)("h3", { style: {
-                                fontWeight: "600",
-                                fontSize: "14px",
-                                marginBottom: "6px",
-                                color: "#212121",
-                            }, children: "query" }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                background: exports.theme.backgroundColor,
-                                // maxHeight: 700,
-                                width: "520px",
-                                height: "300px",
-                                // minWidth: 450,
-                                // overflowY: "scroll",
-                                // padding: "20px 30px 20px 20px",
-                                // marginLeft: 20,
-                                borderTopLeftRadius: 6,
-                                borderBottomLeftRadius: 6,
-                                borderTopRightRadius: 0,
-                                borderBottomRightRadius: 0,
-                                overflow: "hidden",
-                            }, children: (0, jsx_runtime_1.jsx)(react_3.default, { height: "300px", width: "520px", defaultLanguage: "pgsql", defaultValue: "", value: editViewQuery, loading: (0, jsx_runtime_1.jsx)("div", {}), options: {
-                                    wordWrap: "on",
-                                    minimap: {
-                                        enabled: false,
-                                    },
-                                    padding: { top: 16 },
-                                }, onChange: (query) => setEditViewQuery(query), beforeMount: (monaco) => defineEditorTheme(monaco, exports.theme), onMount: setEditorTheme }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                display: "flex",
-                                flexDirection: "row",
-                                alignItems: "center",
-                                marginTop: 20,
-                                gap: 8,
-                            }, children: [(0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleEditTable, label: "Save changes" }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleClickFirstDelete, label: "Delete" })] })] }) }), (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: deleteModalIsOpen, close: closeDeleteModal, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                        display: "flex",
-                        flexDirection: "column",
-                        padding: "6px",
-                    }, children: [(0, jsx_runtime_1.jsxs)("h1", { style: {
-                                fontSize: "1.25rem",
-                                paddingTop: "0px",
-                                marginTop: "0px",
-                                marginBottom: "12px",
-                                fontWeight: "bold",
-                                color: "#212121",
-                            }, children: ["Confirm delete \"", tableToBeDeleted, "\" view"] }), (0, jsx_runtime_1.jsx)("h3", { style: {
-                                fontWeight: "600",
-                                fontSize: "0.875rem",
-                                marginBottom: "6px",
-                                color: "#212121",
-                            }, children: "View name" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { placeholder: "Type view name to confirm delete...", onChange: (e) => setDeleteName(e.target.value), value: deleteName }), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleDeleteTable, label: `Confirm delete ${tableToBeDeleted}` })] }) })] }));
-}
-function TableCell({ table, clickTableCell, key }) {
+exports.AddDashboardModal = AddDashboardModal;
+function TableCell({ table, clickTableCell }) {
     const handleClickTableCell = () => {
         clickTableCell(table);
     };
@@ -1876,163 +893,19 @@ function TableCell({ table, clickTableCell, key }) {
                         // height: "1.3em",
                     }, children: tokens.map((line, i) => ((0, jsx_runtime_1.jsx)("div", { ...getLineProps({ line, key: i }), children: line.map((token, key) => ((0, jsx_runtime_1.jsx)("span", { ...getTokenProps({ token, key }) }, key))) }, i))) })) })] }, table.displayName));
 }
-function QueryEditor({ TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, EnvironmentSelectComponent, organizationId, }) {
-    const [customerId, setCustomerId] = (0, react_1.useState)("");
-    const [checked, setChecked] = (0, react_1.useState)(false);
-    const [selected, setSelected] = (0, react_1.useState)("");
-    const [userTyping, setUserTyping] = (0, react_1.useState)(false);
-    const inputRef = (0, react_1.useRef)(null);
-    const [organizations, setOrganizations] = (0, react_1.useState)([]);
-    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)([]);
-    const [sqlPrompt, setSqlPrompt] = (0, react_1.useState)("");
-    const [dashboardNames, setDashboardNames] = (0, react_1.useState)([]);
-    const [selectedDashboardName, setSelectedDashboardName] = (0, react_1.useState)("");
+exports.TableCell = TableCell;
+const SQLEditorComponent = ({ query, setQuery, 
+// handleRunQuery,
+theme,
+// defineEditorTheme,
+// setEditorTheme,
+ }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [organization, setOrganization] = (0, react_1.useContext)(OrganizationContext);
-    const [activeQuery, setActiveQuery] = (0, react_1.useContext)(ActiveQueryContext);
-    const [client] = (0, react_1.useContext)(ClientContext);
-    const [environment, setEnvironment] = (0, react_1.useContext)(EnvironmentContext);
-    const [query, setQuery] = (0, react_1.useState)(activeQuery);
     const [rows, setRows] = (0, react_1.useState)([]);
     const [columns, setColumns] = (0, react_1.useState)([]);
     const [fields, setFields] = (0, react_1.useState)([]);
-    const [schema] = (0, react_1.useContext)(SchemaContext);
-    const [errorMessage, setErrorMessage] = (0, react_1.useState)("");
-    const [sqlResponseLoading, setSqlResponseLoading] = (0, react_1.useState)(false);
-    const [activeComponent, setActiveComponent] = (0, react_1.useContext)(ActiveComponentContext);
-    (0, react_1.useEffect)(() => {
-        setQuery(activeQuery);
-    }, [activeQuery]);
-    (0, react_1.useEffect)(() => {
-        let isSubscribed = true;
-        async function getCustomers() {
-            // If you need to retrieve the JSON data from the response:
-            const response2 = await fetch(`https://quill-344421.uc.r.appspot.com/dashnames/${client._id}/`, {
-                method: "GET",
-                headers: {
-                    Authorization: `Bearer `,
-                    environment: environment,
-                },
-            });
-            const response2Data = await response2.json();
-            const dashNames = response2Data.dashboardNames.filter((elem) => elem !== null);
-            setDashboardNames(dashNames);
-            setSelectedDashboardName(dashNames[0]);
-        }
-        if (isSubscribed) {
-            getCustomers();
-        }
-        return () => {
-            isSubscribed = false;
-        };
-    }, [environment]);
-    // const navigate = useNavigate();
-    const handleRunQuery = async () => {
-        const { _id } = client;
-        try {
-            const response = await fetch(`https://quill-344421.uc.r.appspot.com/dashquery?orgId=${organizationId || ""}&publicKey=${_id}`, {
-                method: "POST",
-                headers: {
-                    Authorization: `Bearer `,
-                    environment: environment,
-                    "Content-Type": "application/json", // Important when sending JSON
-                },
-                body: JSON.stringify({
-                    query,
-                }),
-            });
-            const responseData = await response.json();
-            if (responseData && responseData.errorMessage) {
-                setErrorMessage("Failed to run SQL query: " + responseData.errorMessage);
-                setRows([]);
-                setColumns([]);
-                setFields([]);
-                return;
-            }
-            setErrorMessage("");
-            setRows(responseData.rows);
-            setColumns(responseData.fields.map((elem) => convertPostgresColumn(elem)));
-            setFields(responseData.fields);
-        }
-        catch (e) {
-            console.log("ERROR: ", e);
-            return;
-        }
-    };
-    const handleAddToDashboard = () => {
-        setIsOpen(true);
-    };
-    const newRows = (0, react_1.useMemo)(() => {
-        return JSON.parse(JSON.stringify(rows));
-    }, [rows]);
-    /* all your useState and useContext calls and your useEffect hooks */
-    const handleSetOrganization = (org) => {
-        setOrganization(null);
-        setTimeout(() => setOrganization(org), 50);
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            display: "flex",
-            flexDirection: "column",
-            paddingTop: "70px",
-            paddingLeft: "30px",
-            paddingRight: "30px",
-        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                    //   width: 'calc(100vw - 30px)',
-                    display: "flex",
-                    position: "fixed",
-                    backgroundColor: "white",
-                    zIndex: 1,
-                    left: 0,
-                    right: 0,
-                    top: 0,
-                    flexDirection: "row",
-                    paddingTop: 85,
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    paddingLeft: "30px",
-                    paddingRight: "30px",
-                    borderBottomWidth: 1,
-                    borderTopWidth: 0,
-                    borderLeftWidth: 0,
-                    borderRightWidth: 0,
-                    borderStyle: "solid",
-                    borderColor: exports.theme.borderColor,
-                    paddingBottom: 20,
-                    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%",
-                        // marginLeft: '25px'
-                    }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
-                                fontSize: "36px",
-                                paddingTop: "0px",
-                                fontWeight: "600",
-                                color: "#384151",
-                                margin: 0,
-                                paddingBottom: 4,
-                            }, children: "SQL Editor" }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                display: "flex",
-                                flexDirection: "row",
-                                alignItems: "center",
-                            }, children: (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexDirection: "column" }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                                        display: "flex",
-                                        flexDirection: "row",
-                                        alignItems: "flex-end",
-                                        gap: 16,
-                                    }, children: [OrganizationSelectComponent && (0, jsx_runtime_1.jsx)(OrganizationSelectComponent, {}), EnvironmentSelectComponent && (0, jsx_runtime_1.jsx)(EnvironmentSelectComponent, {})] }) }) })] }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 120 } }), (0, jsx_runtime_1.jsx)(SQLEditorComponent, { query: query, setQuery: setQuery, handleRunQuery: handleRunQuery, theme: exports.theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme })] }));
-}
-const SQLEditorComponent = ({ query, setQuery, handleRunQuery, theme, defineEditorTheme, setEditorTheme, }) => {
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [rows, setRows] = (0, react_1.useState)([]);
-    const [columns, setColumns] = (0, react_1.useState)([]);
-    const [fields, setFields] = (0, react_1.useState)([]);
-    const [activeQuery] = (0, react_1.useContext)(ActiveQueryContext);
+    // const [activeQuery] = useContext(ActiveQueryContext);
+    const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             background: theme.backgroundColor,
             // maxHeight: 700,
@@ -2043,7 +916,7 @@ const SQLEditorComponent = ({ query, setQuery, handleRunQuery, theme, defineEdit
             // 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: activeQuery ? activeQuery : "" }), rows.length > 0 && ((0, jsx_runtime_1.jsx)("button", { style: {
+        }, 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,
@@ -2063,6 +936,7 @@ const SQLEditorComponent = ({ query, setQuery, handleRunQuery, theme, defineEdit
                     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 })] }));
 };
+exports.SQLEditorComponent = SQLEditorComponent;
 const SchemaListComponent = ({ schema, theme }) => {
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             background: theme.backgroundColor,
@@ -2158,6 +1032,7 @@ function defineEditorTheme(monaco, theme) {
         },
     });
 }
+exports.defineEditorTheme = defineEditorTheme;
 function setEditorTheme(editor, monaco) {
     try {
         monaco.editor.setTheme("onedark");
@@ -2166,19 +1041,7 @@ function setEditorTheme(editor, monaco) {
         console.log("ERROR: ", e);
     }
 }
-const theme = {
-    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,
-};
+exports.setEditorTheme = setEditorTheme;
 function isValidDate(d) {
     return d instanceof Date && !isNaN(d);
 }
@@ -2253,11 +1116,9 @@ const FORMAT_OPTIONS = [
     { value: "percent", label: "percent" },
     { value: "string", label: "string" },
 ];
-function Report({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQueryOpen, setIsEditQueryOpen, SecondaryButtonComponent, ButtonComponent, deleteReport, updateQuery, OrganizationSelectComponent, ModalComponent, }) {
+function Report({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQueryOpen, setIsEditQueryOpen, SecondaryButtonComponent, ButtonComponent, deleteReport, updateQuery, OrganizationSelectComponent, ModalComponent, NavigateToDashboardBuilder, }) {
     const { data, loading, error } = (0, react_2.useQuill)(reportId);
-    const [client] = (0, react_1.useContext)(ClientContext);
-    const [activeQuery, setActiveQuery] = (0, react_1.useContext)(ActiveQueryContext);
-    const [activeComponent, setActiveComponent] = (0, react_1.useContext)(ActiveComponentContext);
+    const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
     const downloadCSV = () => {
         // report.rows
         if (!data) {
@@ -2286,7 +1147,8 @@ function Report({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQueryOpe
         document.body.removeChild(downloadLink);
     };
     const goBack = () => {
-        setActiveComponent("Dashboards");
+        // setActiveComponent("Dashboards");
+        dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'Dashboards' });
     };
     if (!data || loading) {
         return null;
@@ -2348,7 +1210,7 @@ function Report({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQueryOpe
                                             flexDirection: "row",
                                             alignItems: "flex-end",
                                             gap: 16,
-                                        }, children: OrganizationSelectComponent && (0, jsx_runtime_1.jsx)(OrganizationSelectComponent, {}) }) })] })] }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 240 } }), (0, jsx_runtime_1.jsx)(react_2.Chart, { chartId: reportId, colors: exports.theme.chartColors, containerStyle: {
+                                        }, 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: {
@@ -2357,8 +1219,12 @@ function Report({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQueryOpe
                     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);
-                            setActiveComponent("SQL editor");
+                            // 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 }}
             , { 
@@ -2426,23 +1292,26 @@ function EditQueryModal({ query, report, isOpen, setIsOpen, updateQuery, ModalCo
                         }, children: "Save changes" })] }) }) }));
 }
 function EditVisualizationModal({ isOpen, setIsOpen, report, columns, data, fields, query, }) {
-    const [tables] = (0, react_1.useContext)(TablesContext);
-    const [organization] = (0, react_1.useContext)(OrganizationContext);
+    // const [tables] = useContext(TablesContext);
+    // const [organization] = useContext(OrganizationContext);
     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.AddToDashboardModal, { fields: fields, isOpen: isOpen, setIsOpen: setIsOpen, rows: data, columns: columns, query: query, report: report, showTableFormatOptions: true, showDateFieldOptions: true, showAccessControlOptions: true }) }) })] })) }));
 }
 function ReportWrapper({ SecondaryButtonComponent, ButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, organizationId, queryEndpoint, queryHeaders, withCredentials, }) {
-    const [organization, setOrganization] = (0, react_1.useContext)(OrganizationContext);
-    const [client] = (0, react_1.useContext)(ClientContext);
-    const [environment] = (0, react_1.useContext)(EnvironmentContext);
-    const [reportId, setReportId] = (0, react_1.useContext)(ReportIdContext);
+    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] = (0, react_1.useContext)(ActiveComponentContext);
+    // const [activeComponent, setActiveComponent] = useContext(
+    //     ActiveComponentContext
+    // );
     const updateQuery = async (dashboardItemId, query) => {
-        if (!client || !dashboardItemId || !query) {
+        if (!state.client || !dashboardItemId || !query) {
             return;
         }
         let responseData;
@@ -2458,17 +1327,17 @@ function ReportWrapper({ SecondaryButtonComponent, ButtonComponent, ModalCompone
                         ? {
                             orgId: organizationId,
                             task: "edit_query",
-                            id: reportId,
+                            id: state.reportId,
                             query,
                         }
-                        : { task: "edit_query", id: reportId, query },
+                        : { task: "edit_query", id: state.reportId, query },
                 }),
                 credentials: withCredentials ? "include" : "omit",
             });
             responseData = await response.json();
         }
         else {
-            const url = `https://quill-344421.uc.r.appspot.com/updatequery/${client._id}/${organizationId}/`;
+            const url = `https://quill-344421.uc.r.appspot.com/updatequery/${state.client._id}/${organizationId}/`;
             const requestBody = {
                 dashboardItemId,
                 query,
@@ -2478,7 +1347,7 @@ function ReportWrapper({ SecondaryButtonComponent, ButtonComponent, ModalCompone
                 headers: {
                     "Content-Type": "application/json",
                     Authorization: "Bearer ",
-                    environment: environment || undefined,
+                    environment: state.environment || undefined,
                 },
                 body: JSON.stringify(requestBody),
             });
@@ -2500,10 +1369,10 @@ function ReportWrapper({ SecondaryButtonComponent, ButtonComponent, ModalCompone
         }
     };
     const deleteReport = async () => {
-        if (!reportId) {
+        if (!state.reportId) {
             return;
         }
-        if (!client) {
+        if (!state.client) {
             return;
         }
         let responseData;
@@ -2519,24 +1388,24 @@ function ReportWrapper({ SecondaryButtonComponent, ButtonComponent, ModalCompone
                         ? {
                             orgId: organizationId,
                             task: "delete",
-                            id: reportId,
+                            id: state.reportId,
                         }
-                        : { task: "delete", id: reportId },
+                        : { task: "delete", id: state.reportId },
                 }),
                 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/${client._id}/${organizationId}/`;
+            const url = `https://quill-344421.uc.r.appspot.com/deletedash/${state.client._id}/${organizationId}/`;
             const requestBody = {
-                dashboardItemId: reportId,
+                dashboardItemId: state.reportId,
             };
             const response = await fetch(url, {
                 method: "POST",
                 headers: {
                     "Content-Type": "application/json",
-                    environment: environment || undefined,
+                    environment: state.environment || undefined,
                 },
                 body: JSON.stringify(requestBody),
             });
@@ -2544,11 +1413,12 @@ function ReportWrapper({ SecondaryButtonComponent, ButtonComponent, ModalCompone
             responseData = await response.json();
         }
         if (responseData) {
-            setActiveComponent("Dashboards");
+            dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'Dashboards' });
         }
     };
-    return ((0, jsx_runtime_1.jsx)(Report, { reportId: reportId, updateQuery: updateQuery, isOpen: isOpen, setIsOpen: setIsOpen, isEditQueryOpen: isEditQueryOpen, setIsEditQueryOpen: setIsEditQueryOpen, deleteReport: deleteReport, SecondaryButtonComponent: SecondaryButtonComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, OrganizationSelectComponent: OrganizationSelectComponent }));
+    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 }));
 }
+exports.ReportWrapper = ReportWrapper;
 const measuringConfig = {
     droppable: {
         strategy: core_1.MeasuringStrategy.Always,
@@ -2556,7 +1426,7 @@ const measuringConfig = {
 };
 function ReorderableList({ initialItems, itemMap, ButtonComponent, closeModal, }) {
     const [items, setItems] = (0, react_1.useState)([]);
-    const [client] = (0, react_1.useContext)(ClientContext);
+    // 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, {
@@ -2636,6 +1506,7 @@ function ReorderableList({ initialItems, itemMap, ButtonComponent, closeModal, }
         }
     }
 }
+exports.ReorderableList = ReorderableList;
 const animateLayoutChanges = (args) => args.isSorting || args.wasDragging ? (0, sortable_1.defaultAnimateLayoutChanges)(args) : true;
 function SortableItem({ id, name }) {
     const { attributes, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({