@quillsql/admin 1.0.0

package/lib/Admin.js

@@ -0,0 +1,1750 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@quillsql/react");
+const nightOwlLight_1 = __importDefault(require("prism-react-renderer/themes/nightOwlLight"));
+const prism_react_renderer_1 = __importStar(require("prism-react-renderer"));
+const react_3 = __importDefault(require("@monaco-editor/react"));
+const 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 CONTAINER = {
+    display: "flex",
+    flexDirection: "row",
+    height: "800px",
+    background: "white",
+    marginTop: 32,
+    width: "calc(100% - 50px)",
+    // borderRadius: 12,
+    overflow: "hidden",
+    borderRadius: 12,
+    // border: "1px solid #EDEDED",
+    boxShadow: "0px 1px 24px 0px rgba(0, 0, 0, 0.09)",
+};
+const customStyles = {
+    content: {
+        top: "50%",
+        left: "50%",
+        right: "auto",
+        bottom: "auto",
+        marginRight: "-50%",
+        border: "none",
+        transform: "translate(-50%, -50%)",
+        borderRadius: 6,
+        zIndex: 4,
+        boxShadow: "0px 2px 24px 0px rgb(63,82,149, 0.09)",
+    },
+};
+const THEME = {
+    /* Components font family */
+    // fontFamily: 'BlinkMacSystemFont',
+    fontFamily: "Inter",
+    /* Default font size */
+    fontSize: 14,
+    /* Header font size */
+    headerFontSize: 18,
+    editorDarkMode: true,
+    /* Primary color */
+    primaryColor: "#212121",
+    buttonUnderlayColor: "#000000",
+    /* Secondary color */
+    secondaryColor: "white",
+    selectedTabColor: "white",
+    /* When you select underlay */
+    selectUnderlayColor: "#F5F5F5",
+    /* Background color */
+    backgroundColor: "#FFFFFF",
+    editorBackgroundColor: "#FBFBFB",
+    elevatedCardColor: "#FFFFFF",
+    /* Primary font color */
+    fontColor: "#212121",
+    /* Secondary font color */
+    secondaryFontColor: "#777777",
+    selectedFontColor: "#212121",
+    unselectedFontColor: "#777777",
+    buttonLabelColor: "white",
+    buttonFontWeight: "500",
+    /* Label font weight */
+    labelFontWeight: "500",
+    /* Header font weight */
+    headerFontWeight: "500",
+    /* Selected font weight */
+    selectedFontWeight: "700",
+    /* Padding for containers */
+    padding: 25,
+    /* Border radius for selected Quill elements */
+    borderRadius: "8px",
+    /* Box shadow applied on Quill components */
+    boxShadow: "0px 1px 8px 0px rgb(63,82,149, 0.09)",
+    shadowColor: "rgba(0, 0, 0, 0.09)",
+    primaryButtonColor: "#212121",
+};
+const frontendApi = "clerk.withquill.com";
+// const frontendApi = "clerk.romantic.quetzal-89.lcl.dev";
+function Portal({ publicKey, queryEndpoint, theme, queryHeaders, organizationId, TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, UserManagementComponent, }) {
+    return ((0, jsx_runtime_1.jsx)(ContextProvider, { children: (0, jsx_runtime_1.jsx)(Navigation, { theme: theme, publicKey: publicKey, organizationId: organizationId, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, 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: 36,
+                        boxShadow: "rgba(0, 0, 0, 0.1) 0px 1px 5px 0px",
+                        width: "445px",
+                        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 }))), 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 }) => isOpen && ((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",
+                                display: "flex",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                transform: "translateX(-50%) translateY(-50%)",
+                                background: "white",
+                                borderRadius: 8,
+                                borderStyle: "solid",
+                                borderWidth: 1,
+                                borderColor: "#e7e7e7",
+                                overflow: "hidden",
+                                padding: 30,
+                                // zIndex: 1000,
+                            }, children: children })] }))), OrganizationSelectComponent: OrganizationSelectComponent, UserManagementComponent: UserManagementComponent, 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,
+                                    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: onChange, children: options.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, label: option.label }))) }), (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.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, UserManagementComponent, publicKey, organizationId, queryEndpoint, queryHeaders, }) {
+    // Get the user's first name
+    // const { user } = useUser();
+    // const location = useLocation();
+    const [client, setClient] = (0, react_1.useContext)(ClientContext);
+    const [environment, setEnvironment] = (0, react_1.useContext)(EnvironmentContext);
+    const [tables, setTables] = (0, react_1.useContext)(TablesContext);
+    const [organizations, setOrganizations] = (0, react_1.useContext)(OrganizationsContext);
+    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/schema2/62cda15d7c9fcca7bc0a3689/`,
+                `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/62cda15d7c9fcca7bc0a3689/`,
+                `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("There was an error:", error);
+            }
+        }
+        if (isSubscribed) {
+            getClient();
+        }
+        return () => {
+            isSubscribed = false;
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        let isSubscribed = true;
+        async function getCustomers() {
+            // const url = `https://quill-344421.uc.r.appspot.com/orgs/62cda15d7c9fcca7bc0a3689/`
+            const url = `https://quill-344421.uc.r.appspot.com/orgs/${publicKey}/`;
+            const response = await fetch(url, {
+                method: "GET",
+                headers: {
+                    Authorization: "Bearer ",
+                    environment: environment,
+                },
+            });
+            // If you need to retrieve the JSON data from the response:
+            const data = await response.json();
+            setOrganizations([...data.orgs, { id: "", name: "All Organizations" }]);
+            if (environment === "STAGING") {
+                setOrganization(data.orgs.filter((org) => org.id === client.stagingAdminCustomerId)[0]);
+            }
+            else {
+                setOrganization(data.orgs.filter((org) => org.id === client.adminCustomerId)[0]);
+            }
+        }
+        if (isSubscribed && environment && client) {
+            getCustomers();
+        }
+        return () => {
+            isSubscribed = false;
+        };
+    }, [environment, client, activeComponent]);
+    if (!client) {
+        return null;
+    }
+    const renderComponentBasedOnName = () => {
+        switch (activeComponent) {
+            case "Dashboards":
+                return ((0, jsx_runtime_1.jsx)(Dashboards, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, OrganizationSelectComponent: OrganizationSelectComponent, setReportId: setReportId }));
+            case "SQL editor":
+                return ((0, jsx_runtime_1.jsx)(QueryEditor, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent }));
+            case "Report":
+                return ((0, jsx_runtime_1.jsx)(ReportWrapper, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent }));
+            case "SQL views":
+                return ((0, jsx_runtime_1.jsx)(Tables, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent }));
+            default:
+                return ((0, jsx_runtime_1.jsx)(Dashboards, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, OrganizationSelectComponent: OrganizationSelectComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent }));
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            height: "100vh",
+            width: "100vw",
+        }, children: [activeComponent !== "Report" && ((0, jsx_runtime_1.jsxs)("nav", { style: {
+                    zIndex: 2,
+                    height: "70px",
+                    width: "100%",
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    backgroundColor: "white",
+                    padding: "0",
+                    position: "fixed",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    borderBottomWidth: 1,
+                    borderTopWidth: 0,
+                    borderLeftWidth: 0,
+                    borderRightWidth: 0,
+                    borderStyle: "solid",
+                    borderColor: exports.theme.borderColor,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            paddingTop: "18px",
+                            paddingLeft: "14px",
+                            paddingBottom: "18px",
+                            width: 230,
+                        }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "45", height: "18", viewBox: "0 0 45 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("g", { clipPath: "url(#clip0_2489_282)", children: (0, jsx_runtime_1.jsx)("path", { d: "M18.634 17.3008H9.196C7.97867 17.3008 6.84933 17.1248 5.808 16.7728C4.78133 16.4061 3.894 15.8781 3.146 15.1888C2.398 14.4994 1.81133 13.6634 1.386 12.6808C0.960667 11.6981 0.748 10.5761 0.748 9.31478C0.748 8.14145 0.960667 7.06345 1.386 6.08078C1.826 5.09811 2.42 4.25478 3.168 3.55078C3.916 2.84678 4.796 2.30411 5.808 1.92278C6.82 1.52678 7.90533 1.32878 9.064 1.32878C10.2227 1.32878 11.308 1.52678 12.32 1.92278C13.332 2.31878 14.212 2.86878 14.96 3.57278C15.708 4.27678 16.2947 5.12011 16.72 6.10278C17.16 7.07078 17.38 8.14145 17.38 9.31478C17.38 9.87211 17.314 10.4148 17.182 10.9428C17.0647 11.4708 16.8813 11.9694 16.632 12.4388C16.3827 12.9081 16.06 13.3334 15.664 13.7148C15.268 14.0814 14.806 14.3821 14.278 14.6168V14.6608H18.634V17.3008ZM4.312 9.31478C4.312 9.98945 4.43667 10.6201 4.686 11.2068C4.93533 11.7934 5.27267 12.3068 5.698 12.7468C6.138 13.1721 6.644 13.5094 7.216 13.7588C7.788 14.0081 8.404 14.1328 9.064 14.1328C9.724 14.1328 10.34 14.0081 10.912 13.7588C11.484 13.5094 11.9827 13.1721 12.408 12.7468C12.848 12.3068 13.1927 11.7934 13.442 11.2068C13.6913 10.6201 13.816 9.98945 13.816 9.31478C13.816 8.64011 13.6913 8.00945 13.442 7.42278C13.1927 6.83611 12.848 6.33011 12.408 5.90478C11.9827 5.46478 11.484 5.12011 10.912 4.87078C10.34 4.62145 9.724 4.49678 9.064 4.49678C8.404 4.49678 7.788 4.62145 7.216 4.87078C6.644 5.12011 6.138 5.46478 5.698 5.90478C5.27267 6.33011 4.93533 6.83611 4.686 7.42278C4.43667 8.00945 4.312 8.64011 4.312 9.31478ZM29.3164 17.3008H26.1484V15.8488H26.1044C25.987 16.0541 25.833 16.2594 25.6424 16.4648C25.4664 16.6701 25.2464 16.8534 24.9824 17.0148C24.7184 17.1761 24.4177 17.3081 24.0804 17.4108C23.743 17.5134 23.3764 17.5648 22.9804 17.5648C22.1444 17.5648 21.4624 17.4401 20.9344 17.1908C20.421 16.9268 20.0177 16.5674 19.7244 16.1128C19.4457 15.6581 19.255 15.1228 19.1524 14.5068C19.0644 13.8908 19.0204 13.2234 19.0204 12.5048V6.60878H22.3204V11.8448C22.3204 12.1528 22.3277 12.4754 22.3424 12.8128C22.3717 13.1354 22.4377 13.4361 22.5404 13.7148C22.6577 13.9934 22.8264 14.2208 23.0464 14.3968C23.281 14.5728 23.611 14.6608 24.0364 14.6608C24.4617 14.6608 24.8064 14.5874 25.0704 14.4408C25.3344 14.2794 25.5324 14.0741 25.6644 13.8248C25.811 13.5608 25.9064 13.2674 25.9504 12.9448C25.9944 12.6221 26.0164 12.2848 26.0164 11.9328V6.60878H29.3164V17.3008ZM30.8172 6.60878H34.1172V17.3008H30.8172V6.60878ZM30.5532 3.24278C30.5532 2.71478 30.7365 2.26745 31.1032 1.90078C31.4845 1.51945 31.9392 1.32878 32.4672 1.32878C32.9952 1.32878 33.4425 1.51945 33.8092 1.90078C34.1905 2.26745 34.3812 2.71478 34.3812 3.24278C34.3812 3.77078 34.1905 4.22545 33.8092 4.60678C33.4425 4.97345 32.9952 5.15678 32.4672 5.15678C31.9392 5.15678 31.4845 4.97345 31.1032 4.60678C30.7365 4.22545 30.5532 3.77078 30.5532 3.24278ZM35.652 0.66878H38.952V17.3008H35.652V0.66878ZM40.4869 0.66878H43.7869V17.3008H40.4869V0.66878Z", fill: "#212121" }) }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_2489_282", children: (0, jsx_runtime_1.jsx)("rect", { width: "45", height: "18", fill: "white" }) }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "row" }, children: [(0, jsx_runtime_1.jsx)("button", { style: {
+                                    color: "#212121",
+                                    backgroundColor: activeComponent === "Dashboards"
+                                        ? "#2121210A"
+                                        : "transparent",
+                                    padding: "8px 12px",
+                                    height: "38px",
+                                    marginBottom: "4px",
+                                    fontWeight: "bold",
+                                    fontSize: "0.875rem",
+                                    borderRadius: "4px",
+                                    transition: "background-color 0.3s",
+                                    border: "none",
+                                    outline: "none",
+                                }, onClick: () => setActiveComponent("Dashboards"), children: "Dashboards" }), (0, jsx_runtime_1.jsx)("button", { style: {
+                                    color: "#212121",
+                                    backgroundColor: activeComponent === "SQL editor"
+                                        ? "#2121210A"
+                                        : "transparent",
+                                    padding: "8px 12px",
+                                    height: "38px",
+                                    marginBottom: "4px",
+                                    fontWeight: "bold",
+                                    fontSize: "0.875rem",
+                                    borderRadius: "4px",
+                                    transition: "background-color 0.3s",
+                                    border: "none",
+                                    outline: "none",
+                                }, onClick: () => setActiveComponent("SQL editor"), children: "SQL editor" }), (0, jsx_runtime_1.jsx)("button", { style: {
+                                    color: "#212121",
+                                    backgroundColor: activeComponent === "SQL views" ? "#2121210A" : "transparent",
+                                    padding: "8px 12px",
+                                    height: "38px",
+                                    marginBottom: "4px",
+                                    fontWeight: "bold",
+                                    fontSize: "0.875rem",
+                                    borderRadius: "4px",
+                                    transition: "background-color 0.3s",
+                                    border: "none",
+                                    outline: "none",
+                                }, onClick: () => setActiveComponent("SQL views"), children: "SQL views" })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            display: "flex",
+                            flexDirection: "row",
+                            minHeight: "50px",
+                            justifyContent: "flex-end",
+                            alignItems: "center",
+                            paddingRight: "8px",
+                            width: 230,
+                        }, children: (0, jsx_runtime_1.jsx)(UserManagementComponent, {}) })] })), (0, jsx_runtime_1.jsx)("div", { style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    height: "100%",
+                    width: "100%",
+                    // marginTop: activeComponent !== 'Report' ? '70px' : undefined
+                }, children: (0, jsx_runtime_1.jsx)(react_2.QuillProvider
+                // organizationId={'2'}
+                // publicKey={client?._id}
+                , { 
+                    // organizationId={'2'}
+                    // publicKey={client?._id}
+                    organizationId: organizationId, publicKey: publicKey, environment: environment, theme: exports.theme, children: renderComponentBasedOnName() }) })] }));
+}
+exports.theme = {
+    fontFamily: "Inter; Helvetica",
+    backgroundColor: "#FFFFFF",
+    primaryTextColor: "#364153",
+    secondaryTextColor: "#6C727F",
+    chartLabelFontFamily: "Inter; Helvetica",
+    chartLabelColor: "#666666",
+    chartTickColor: "#CCCCCC",
+    chartColors: ["#6269E9", "#E14F62"],
+    borderColor: "#E5E7EB",
+    borderWidth: 1,
+    primaryButtonColor: "#212121",
+};
+function convertPostgresColumn(column) {
+    let format;
+    switch (column.dataTypeID) {
+        case 20: // int8
+        case 21: // int2
+        case 23: // int4
+            format = "whole_number";
+            break;
+        case 700: // float4
+        case 701: // float8
+        case 1700: // numeric
+            format = "two_decimal_places";
+            break;
+        case 1082: // date
+        case 1083: // time
+        case 1184: // timestamptz
+        case 1114: // timestamp
+            format = "MMM_dd_yyyy";
+            break;
+        case 1043: // varchar
+        default:
+            format = "string";
+    }
+    return {
+        label: column.name,
+        field: column.name,
+        format: format,
+    };
+}
+exports.convertPostgresColumn = convertPostgresColumn;
+function getPostgresBasicType(column) {
+    let format;
+    // first check if column.dataTypeID exists
+    if (column.dataTypeID) {
+        switch (column.dataTypeID) {
+            case 20: // int8
+            case 21: // int2
+            case 23: // int4
+            case 700: // float4
+            case 701: // float8
+            case 1700: // numeric
+                format = "number";
+                break;
+            case 1082: // date
+            case 1083: // time
+            case 1184: // timestamptz
+            case 1114: // timestamp
+                format = "date";
+                break;
+            case 1043: // varchar
+            default:
+                format = "string";
+        }
+    }
+    else if (column.fieldType) {
+        // if column.dataTypeID doesn't exist, check column.fieldType
+        switch (column.fieldType) {
+            case "int8":
+            case "int2":
+            case "int4":
+            case "float4":
+            case "float8":
+            case "numeric":
+                format = "number";
+                break;
+            case "date":
+            case "time":
+            case "timestamptz":
+            case "timestamp":
+                format = "date";
+                break;
+            case "varchar":
+            default:
+                format = "string";
+        }
+    }
+    return format;
+}
+exports.getPostgresBasicType = getPostgresBasicType;
+function classNames(...classes) {
+    return classes.filter(Boolean).join(" ");
+}
+exports.classNames = classNames;
+function Dashboards({ setReportId, TextInputComponent, ButtonComponent, SecondaryButtonComponent, OrganizationSelectComponent, ModalComponent, SelectComponent, }) {
+    const [organizations] = (0, react_1.useContext)(OrganizationsContext);
+    const [organization, setOrganization] = (0, react_1.useContext)(OrganizationContext);
+    const [environment] = (0, react_1.useContext)(EnvironmentContext);
+    const [dashboards, setDashboards] = (0, react_1.useState)([]);
+    const [selectedDashboard, setSelectedDashboard] = (0, react_1.useState)("");
+    const [addFilterModalIsOpen, setAddFilterModalIsOpen] = (0, react_1.useState)(false);
+    const [editFilterModalIsOpen, setEditFilterModalIsOpen] = (0, react_1.useState)(false);
+    const [dashboardData, setDashboardData] = (0, react_1.useState)(null);
+    const [activeComponent, setActiveComponent] = (0, react_1.useContext)(ActiveComponentContext);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [client] = (0, react_1.useContext)(ClientContext);
+    // const navigate = useNavigate();
+    // useEffect(() => {
+    //   if (customValue.length && customValue !== id && !userTyping) {
+    //     navigate(`/dashboards/${customValue}`);
+    //     // window.location.reload();
+    //   }
+    //   // } else {
+    //   //   navigate("/");
+    //   // }
+    // }, [customValue, userTyping]);
+    console.log("IS CLIENT IN HERE: ", client);
+    (0, react_1.useEffect)(() => {
+        let isSubscribed = true;
+        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();
+            const dashNames = data.dashboardNames.map((elem) => {
+                if (!elem) {
+                    return { name: "null" };
+                }
+                return { name: elem };
+            });
+            setDashboards(dashNames);
+            setSelectedDashboard(dashNames[0].name);
+        }
+        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() {
+            const url = new URL(`https://quill-344421.uc.r.appspot.com/dashconfig/`);
+            // Setting the search parameters for the URL
+            url.search = new URLSearchParams({
+                orgId: organization ? organization.id : "",
+                publicKey: client._id,
+                name: selectedDashboard,
+            }).toString();
+            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();
+            setDashboardData(data);
+        }
+        if (selectedDashboard && client) {
+            getDashboardData();
+        }
+    }, [selectedDashboard, organization, 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, { options: dashboards.length
+                                                            ? dashboards.map((elem) => {
+                                                                return { value: elem.name, label: elem.name };
+                                                            })
+                                                            : [], onChange: (e) => setSelectedDashboard(e.target.value), value: selectedDashboard })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    minWidth: 238 - 120,
+                                                    gap: 12,
+                                                    display: "flex",
+                                                    flexDirection: "row",
+                                                }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Create report", onClick: () => setActiveComponent("SQL editor") }) })] }) })] })] }) }), (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");
+                    } })) })] }));
+}
+function EditDashboardsModal({ ModalComponent, isOpen, setIsOpen, clientId }) {
+    const [dashboards, setDashboards] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        async function getDashboards(clientId) {
+            const url = `https://quill-344421.uc.r.appspot.com/dashs/${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();
+        }
+        if (clientId) {
+            getDashboards(clientId);
+        }
+    }, [clientId]);
+    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: (0, jsx_runtime_1.jsx)("div", {}) }));
+}
+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 defineEditorTheme(monaco, theme) {
+    monaco.editor.defineTheme("onedark", {
+        base: theme.darkMode ? "vs-dark" : "vs",
+        inherit: true,
+        rules: [
+            {
+                token: "comment",
+                foreground: "#5d7988",
+                fontStyle: "italic",
+            },
+            { token: "constant", foreground: "#e06c75" },
+        ],
+        colors: {
+            "editor.background": "#F9F9F9",
+        },
+    });
+}
+function setEditorTheme(editor, monaco) {
+    try {
+        monaco.editor.setTheme("onedark");
+    }
+    catch (e) {
+        console.log("ERROR: ", e);
+    }
+}
+function Tables({ TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, }) {
+    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 [code, setCode] = (0, react_1.useState)(``);
+    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);
+        setCode("");
+    };
+    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);
+        setCode(table.viewQuery);
+    };
+    const handleDeleteTable = async () => {
+        if (deleteName !== tableToBeDeleted) {
+            alert("Table names must match");
+            return;
+        }
+        const response = await fetch(`https://quill-344421.uc.r.appspot.com/table/${client._id}/`, {
+            method: "POST",
+            headers: { 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 (editViewQuery[editViewQuery.length - 1] === ";") {
+            const 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.slice(0, -1),
+                    name: editName,
+                    id: editViewId,
+                }),
+            });
+            const data = await response.json();
+            if (data) {
+                closeEditModal();
+                getTables();
+            }
+            return;
+        }
+        const 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,
+                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 (!code.length) {
+            alert("Please enter a table query.");
+            return;
+        }
+        if (code[code.length - 1] === ";") {
+            const 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: code.slice(0, -1),
+                    name: name,
+                }),
+            });
+            const data = await response.json();
+            if (data) {
+                closeModal();
+                getTables();
+            }
+            return;
+        }
+        const 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: code,
+                name: name,
+            }),
+        });
+        const data = await response.json();
+        if (data) {
+            closeModal();
+            getTables();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { paddingLeft: "50px", paddingRight: "50px" }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    width: "100%",
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    paddingTop: "90px",
+                    paddingBottom: "25px",
+                }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
+                            fontSize: "36px",
+                            paddingTop: "0px",
+                            marginTop: "0px",
+                            fontWeight: "700",
+                            color: "#384151",
+                        }, children: "SQL views" }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: openModal, label: "Add view +" })] }), (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)("h1", { className: "text-3xl pt-[0px] mt-[0px] mb-[12px] font-bold text-[#212121]", children: "Add view" }), (0, jsx_runtime_1.jsx)("h3", { className: "font-semibold text-sm mb-[6px] text-[#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", { className: "font-semibold text-sm mt-[12px] mb-[6px] text-[#212121]", 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: code, loading: (0, jsx_runtime_1.jsx)("div", {}), options: {
+                                    wordWrap: "on",
+                                    minimap: {
+                                        enabled: false,
+                                    },
+                                    padding: { top: 16 },
+                                }, onChange: (query) => setCode(query), beforeMount: (monaco) => defineEditorTheme(monaco, exports.theme), onMount: setEditorTheme }) }), (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: code, loading: (0, jsx_runtime_1.jsx)("div", {}), options: {
+                                    wordWrap: "on",
+                                    minimap: {
+                                        enabled: false,
+                                    },
+                                    padding: { top: 16 },
+                                }, onChange: (query) => setCode(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 Modal({ isOpen, onRequestClose, children }) {
+    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)",
+                } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    // position: "absolute",
+                    position: "fixed",
+                    left: "50%",
+                    top: "50%",
+                    zIndex: "50",
+                    // width: "100%",
+                    // maxWidth: 1024,
+                    maxHeight: "90vh",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    transform: "translateX(-50%) translateY(-50%)",
+                    background: "white",
+                    borderRadius: 8,
+                    borderStyle: "solid",
+                    borderWidth: 1,
+                    borderColor: "#e7e7e7",
+                    overflow: "hidden",
+                    padding: 30,
+                    // zIndex: 1000,
+                }, children: children })] }));
+}
+function TableCell({ table, clickTableCell }) {
+    const handleClickTableCell = () => {
+        clickTableCell(table);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { onClick: handleClickTableCell, style: {
+            marginBottom: "54px",
+            flex: 1,
+            minWidth: "540px",
+            maxWidth: "540px",
+            cursor: "pointer",
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexDirection: "row", alignItems: "center" }, children: (0, jsx_runtime_1.jsx)("h3", { style: { color: "#384151" }, children: table.displayName }) }), (0, jsx_runtime_1.jsx)(prism_react_renderer_1.default, { ...prism_react_renderer_1.defaultProps, theme: nightOwlLight_1.default, code: table.viewQuery, language: "sql", children: ({ className, style, tokens, getLineProps, getTokenProps }) => ((0, jsx_runtime_1.jsx)("pre", { className: className, style: {
+                        ...style,
+                        textAlign: "left",
+                        margin: "1em 0",
+                        padding: "0.5em",
+                        overflow: "scroll",
+                        maxHeight: 120,
+                        maxWidth: 520,
+                        // lineHeight: "1.3em",
+                        // 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))) })) })] }));
+}
+function QueryEditor({ TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, }) {
+    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)("");
+    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] = (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() {
+            const url = `https://quill-344421.uc.r.appspot.com/orgs/62cda15d7c9fcca7bc0a3689/`;
+            const response = await fetch(url, {
+                method: "GET",
+                headers: {
+                    Authorization: "Bearer ",
+                    environment: environment,
+                },
+            });
+            // If you need to retrieve the JSON data from the response:
+            const data = await response.json();
+            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();
+            setOrganizations([...data.orgs, { id: "", name: "All Organizations" }]);
+            const dashNames = response2Data.dashboardNames.filter((elem) => elem !== null);
+            setDashboardNames(dashNames);
+            setSelectedDashboardName(dashNames[0]);
+            setFilteredOptions(data.customerIds);
+        }
+        if (isSubscribed) {
+            getCustomers();
+        }
+        return () => {
+            isSubscribed = false;
+        };
+    }, [environment]);
+    // const navigate = useNavigate();
+    const editChart = async ({ report, values, yAxisFields, columns, query }) => {
+        const { publicKey, customerId, authToken } = client;
+        const { xAxisLabel, yAxisLabel, chartName, chartType, xAxisField, xAxisFormat, dashboardName, dateFieldTable, dateField, } = values;
+        if (!chartName) {
+            alert("Please enter a chart name");
+            return;
+        }
+        for (let i = 0; i < yAxisFields.length; i++) {
+            if (!yAxisFields[i].label && chartType !== "pie") {
+                alert(`Please enter a label for column '${yAxisFields[i].field}'`);
+                return;
+            }
+        }
+        if (!client || !organization) {
+            return;
+        }
+        const response = await fetch(`https://quill-344421.uc.r.appspot.com/dashedit/${client._id}/${organization.id}/`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${authToken}`,
+                environment: environment || undefined,
+            },
+            body: JSON.stringify({
+                name: chartName,
+                xAxisField,
+                yAxisFields,
+                xAxisLabel,
+                xAxisFormat,
+                yAxisLabel,
+                chartType,
+                dashboardName,
+                columns,
+                dateField: { table: dateFieldTable, field: dateField },
+                query: query,
+            }),
+        });
+        const responseData = await response.json();
+        if (!responseData) {
+            return;
+        }
+        // setDashboard((dashboard) => {
+        //   return {
+        //     ...dashboard,
+        //     [response.data._id]: { ...existingVisualization, ...response.data }
+        //   }
+        // })
+        setIsOpen(false);
+        setActiveComponent("/Dashboards");
+    };
+    const handleRunSqlPrompt = async () => {
+        const { _id } = client;
+        setSqlResponseLoading(true);
+        const response = await fetch(`https://quill-344421.uc.r.appspot.com/quillai`, {
+            method: "POST",
+            headers: {
+                Authorization: `Bearer `,
+                environment: environment,
+                "Content-Type": "application/json", // Important when sending JSON
+            },
+            body: JSON.stringify({
+                initialQuestion: sqlPrompt,
+                publicKey: _id,
+            }),
+        });
+        const responseData = await response.json();
+        setQuery(responseData.message);
+        setSqlResponseLoading(false);
+    };
+    const handleRunQuery = async () => {
+        const { _id } = client;
+        try {
+            const response = await fetch(`https://quill-344421.uc.r.appspot.com/dashquery?orgId=${organization && organization.id ? organization.id : ""}&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);
+            console.log("too easy");
+        }
+        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)("h1", { style: {
+                    fontSize: "36px",
+                    marginLeft: "20px",
+                    paddingTop: "0px",
+                    marginTop: "15px",
+                    fontWeight: "bold",
+                    color: "#384151",
+                }, children: "SQL editor" }), (0, jsx_runtime_1.jsx)(SQLEditorComponent, { query: query, setQuery: setQuery, handleRunQuery: handleRunQuery, theme: exports.theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, rows: rows, columns: columns, fields: fields })] }));
+}
+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)([]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            background: theme.backgroundColor,
+            // maxHeight: 700,
+            // width: "100%",
+            minWidth: 450,
+            // overflowY: "scroll",
+            // padding: "20px 30px 20px 20px",
+            // marginLeft: 20,
+            borderRadius: 6,
+            overflow: "hidden",
+        }, children: [(0, jsx_runtime_1.jsx)(react_2.SQLEditor, { defaultQuery: query, containerStyle: { height: "calc(100vh - 230px)", width: "100%" }, onChangeQuery: (query) => setQuery(query), onChangeData: (data) => setRows(data), onChangeColumns: (columns) => setColumns(columns), onChangeFields: (fields) => setFields(fields) }), rows.length > 0 && ((0, jsx_runtime_1.jsx)("button", { style: {
+                    height: 36,
+                    marginLeft: 300,
+                    marginTop: 20,
+                    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: () => 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 })] }));
+};
+const SchemaListComponent = ({ schema, theme }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            background: theme.backgroundColor,
+            maxHeight: 700,
+            width: 300,
+            minWidth: 300,
+            overflowY: "scroll",
+            // maxHeight: "100%",
+            paddingLeft: 20,
+            paddingRight: 20,
+        }, children: schema.map((elem, index) => ((0, jsx_runtime_1.jsx)(SchemaItem, { elem: elem, theme: theme, index: index }, elem.displayName + index))) }));
+};
+function SchemaItem({ elem, theme, index }) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(index === 0);
+    const schemaContainerStyle = {
+        display: "flex",
+        flexDirection: "column",
+        // WebkitTouchCallout: "none",
+        // WebkitUserSelect: "none",
+        // KhtmlUserSelect: "none",
+        // MozUserSelect: "none",
+        // msUserSelect: "none",
+        // userSelect: "none",
+    };
+    const schemaRowStyle = {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        width: "100%",
+        justifyContent: "space-between",
+        cursor: "pointer",
+    };
+    const schemaRowHoverStyle = {
+        background: theme.selectUnderlayColor,
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: schemaContainerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: { ...schemaRowStyle, ...(isOpen && schemaRowHoverStyle) }, onClick: () => setIsOpen(!isOpen), children: [(0, jsx_runtime_1.jsx)("p", { style: {
+                            marginLeft: theme.padding,
+                            fontSize: theme.fontSize,
+                            color: "#384151",
+                            fontWeight: "500",
+                        }, children: elem.displayName }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            // paddingRight: 25,
+                            paddingTop: 20,
+                            paddingBottom: 20,
+                            paddingLeft: 0,
+                            cursor: "pointer",
+                        }, children: isOpen ? ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "h-5 w-5 text-gray-400", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" }) })) : ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "h-5 w-5", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })) })] }), isOpen ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                    paddingBottom: theme.padding,
+                    display: "flex",
+                    flexDirection: "column",
+                    paddingLeft: theme.padding,
+                    paddingRight: theme.padding,
+                }, children: elem.columns.map((elem, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        paddingTop: theme.padding,
+                        display: "flex",
+                        flexDirection: "row",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { title: elem.displayName, className: "text-gray-500", style: {
+                                fontSize: 13,
+                                //   color: theme.secondaryFontColor,
+                                whiteSpace: "nowrap",
+                                padding: 0,
+                                margin: 0,
+                                textOverflow: "ellipsis",
+                                overflow: "hidden",
+                                width: 200,
+                                maxWidth: 200,
+                            }, children: elem.displayName }), (0, jsx_runtime_1.jsx)("div", { className: "text-gray-500", title: elem.displayName, style: {
+                                fontSize: 13,
+                                color: theme.secondaryFontColor,
+                                padding: 0,
+                                margin: 0,
+                            }, children: elem.fieldType })] }, elem.displayName + elem.index))) })) : null] }));
+}
+function defineEditorTheme(monaco, theme) {
+    monaco.editor.defineTheme("onedark", {
+        base: theme.darkMode ? "vs-dark" : "vs",
+        inherit: true,
+        rules: [
+            {
+                token: "comment",
+                foreground: "#5d7988",
+                fontStyle: "italic",
+            },
+            { token: "constant", foreground: "#e06c75" },
+        ],
+        colors: {
+            "editor.background": "#F9F9F9",
+        },
+    });
+}
+function setEditorTheme(editor, monaco) {
+    try {
+        monaco.editor.setTheme("onedark");
+    }
+    catch (e) {
+        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,
+};
+function isValidDate(d) {
+    return d instanceof Date && !isNaN(d);
+}
+exports.isValidDate = isValidDate;
+const isArrayOfValidDates = (arr, field) => arr.every((d) => new Date(d[field]) instanceof Date && !isNaN(new Date(d[field])));
+exports.isArrayOfValidDates = isArrayOfValidDates;
+function formatDateBuckets(startDate, endDate) {
+    // Calculate the distance in hours
+    const distanceInHours = Math.abs(differenceInHours(endDate, startDate));
+    // Check if the distance is less than or equal to one hour
+    if (distanceInHours <= 1) {
+        return {
+            unit: "hour",
+            format: "h a",
+            startOf: startOfHour,
+        };
+    }
+    // Calculate the distance in days
+    const distanceInDays = Math.abs(differenceInDays(endDate, startDate));
+    // Check if the distance is less than or equal to one day
+    if (distanceInDays <= 1) {
+        return {
+            unit: "day",
+            format: "MMM d",
+            startOf: startOfDay,
+        };
+    }
+    // Calculate the distance in months
+    const distanceInMonths = Math.abs(differenceInMonths(endDate, startDate));
+    // Check if the distance is less than or equal to one month
+    if (distanceInMonths <= 1) {
+        return {
+            unit: "month",
+            format: "MMM yyyy",
+            startOf: startOfMonth,
+        };
+    }
+    // Calculate the distance in years
+    const distanceInYears = Math.abs(differenceInYears(endDate, startDate));
+    // Check if the distance is less than or equal to one year
+    if (distanceInYears <= 1) {
+        return {
+            unit: "year",
+            format: "yyyy",
+            startOf: startOfYear,
+        };
+    }
+    // Otherwise, the distance is more than one year
+    return {
+        unit: "year",
+        format: "yyyy",
+        startOf: startOfYear,
+    };
+}
+exports.formatDateBuckets = formatDateBuckets;
+const POSTGRES_DATE_TYPES = [
+    "timestamp",
+    "date",
+    "timestamptz",
+    "time",
+    "timetz",
+];
+const FORMAT_OPTIONS = [
+    { value: "whole_number", label: "whole number" },
+    { value: "one_decimal_place", label: "one decimal place" },
+    { value: "dollar_amount", label: "dollar amount" },
+    { value: "MMM_yyyy", label: "month" },
+    { value: "MMM_dd-MMM_dd", label: "week" },
+    { value: "MMM_dd_yyyy", label: "day" },
+    { value: "MMM_dd_hh:mm_ap_pm", label: "day and time" },
+    { value: "hh_ap_pm", label: "hour" },
+    { value: "percent", label: "percent" },
+    { value: "string", label: "string" },
+];
+function Report({ reportId, editChart, saveDashboardItem, isOpen, setIsOpen, isEditQueryOpen, setIsEditQueryOpen, SecondaryButtonComponent, ButtonComponent, deleteReport, updateQuery, }) {
+    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 downloadCSV = () => {
+        // report.rows
+        if (!data) {
+            return;
+        }
+        const json = data.rows; // JSON data passed as a prop
+        const fields = Object.keys(json[0]); // Assumes all objects have same keys
+        const csvRows = [];
+        // Header row
+        csvRows.push(fields.join(","));
+        // Data rows
+        for (let row of json) {
+            let values = fields.map((field) => JSON.stringify(row[field] || ""));
+            csvRows.push(values.join(","));
+        }
+        // Create CSV string and create a 'blob' with it
+        const csvString = csvRows.join("\r\n");
+        const csvBlob = new Blob([csvString], { type: "text/csv" });
+        // Create a download link and click it
+        const downloadLink = document.createElement("a");
+        downloadLink.download = "download.csv";
+        downloadLink.href = URL.createObjectURL(csvBlob);
+        downloadLink.style.display = "none";
+        document.body.appendChild(downloadLink);
+        downloadLink.click();
+        document.body.removeChild(downloadLink);
+    };
+    const goBack = () => {
+        setActiveComponent("Dashboards");
+    };
+    if (!data || loading) {
+        return null;
+    }
+    if (error) {
+        return (0, jsx_runtime_1.jsx)("div", { children: error });
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { paddingLeft: 40, paddingRight: 40 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "row", alignItems: "center" }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "\u2190 Back", onClick: goBack }), (0, jsx_runtime_1.jsx)("h1", { style: {
+                            fontSize: "24px",
+                            fontWeight: "bold",
+                            marginLeft: "16px",
+                            marginTop: "30px",
+                            marginBottom: "35px",
+                            color: exports.theme.primaryTextColor,
+                        }, children: data.name })] }), (0, jsx_runtime_1.jsx)(react_2.Chart, { chartId: reportId, colors: exports.theme.chartColors, containerStyle: {
+                    width: "calc(100vw - 80px)",
+                    height: data.chartType === "table" ? 600 : 400,
+                } }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    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");
+                        } }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Delete", onClick: deleteReport })] }), (0, jsx_runtime_1.jsx)(react_2.Table
+            // containerStyle={{ width: "80vw", height: 1100 }}
+            , { 
+                // containerStyle={{ width: "80vw", height: 1100 }}
+                containerStyle: { height: 400, width: "100%", marginTop: 24 }, chartId: reportId }), (0, jsx_runtime_1.jsx)(EditVisualizationModal, { isOpen: isOpen, setIsOpen: setIsOpen, report: data, editChart: editChart, data: data.rows, query: data.queryString, columns: data.columns, fields: data.fields }), (0, jsx_runtime_1.jsx)(EditQueryModal, { query: data.queryString, report: data, isOpen: isEditQueryOpen, setIsOpen: setIsEditQueryOpen, updateQuery: updateQuery })] }));
+}
+function EditQueryModal({ query, report, isOpen, setIsOpen, updateQuery }) {
+    const [newQuery, setNewQuery] = (0, react_1.useState)(query);
+    const hasQueryChanged = (0, react_1.useMemo)(() => {
+        return newQuery !== query;
+    }, [newQuery]);
+    if (!query || !report) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isOpen && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 bg-black/30", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 overflow-y-auto", "aria-modal": "true", role: "dialog", children: (0, jsx_runtime_1.jsx)("div", { className: "flex min-h-full items-center justify-center p-4", children: (0, jsx_runtime_1.jsxs)("div", { 
+                            // style={{ overflow: "hidden" }}
+                            className: "bg-white px-7 py-7 rounded-lg", children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                        fontFamily: exports.theme.fontFamily,
+                                        color: exports.theme.primaryTextColor,
+                                        fontSize: 20,
+                                        fontWeight: 600,
+                                    }, children: "Edit query" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                        background: exports.theme.backgroundColor,
+                                        height: 422,
+                                        maxHeight: 422,
+                                        marginTop: 24,
+                                        minHeight: 422,
+                                        width: 722,
+                                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                            background: exports.theme.editorBackgroundColor || exports.theme.backgroundColor,
+                                            marginRight: exports.theme.padding,
+                                            borderBottomRightRadius: 4,
+                                            borderBottomLeftRadius: 4,
+                                            borderTopRightRadius: 4,
+                                            borderTopLeftRadius: 4,
+                                            overflow: "hidden",
+                                        }, children: (0, jsx_runtime_1.jsx)(react_3.default, { height: "400px", defaultLanguage: "pgsql", defaultValue: "", value: newQuery, loading: (0, jsx_runtime_1.jsx)("div", {}), options: {
+                                                wordWrap: "on",
+                                                minimap: {
+                                                    enabled: false,
+                                                },
+                                                padding: { top: 16 },
+                                            }, onChange: (query) => setNewQuery(query), beforeMount: (monaco) => defineEditorTheme(monaco, exports.theme), onMount: setEditorTheme }) }) }), (0, jsx_runtime_1.jsx)("button", { 
+                                    // disabled={isSubmitting}
+                                    theme: exports.theme, onClick: hasQueryChanged
+                                        ? () => updateQuery(report?._id, newQuery)
+                                        : undefined, 
+                                    // editing
+                                    className: `rounded-md ${hasQueryChanged ? "bg-opacity-100" : "bg-opacity-70"} bg-opacity-100 bg-[#384151] px-4 py-2.5 text-sm font-semibold text-white hover:bg-opacity-70 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`, children: "Save changes" })] }) }) })] })) }));
+}
+function EditVisualizationModal({ isOpen, setIsOpen, report, editChart, columns, data, fields, query, }) {
+    const [tables] = (0, react_1.useContext)(TablesContext);
+    const [organization] = (0, react_1.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, }) {
+    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);
+    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 editChart = async ({ report, values, yAxisFields, columns }) => {
+        const { publicKey, customerId, authToken } = client;
+        const { xAxisLabel, yAxisLabel, chartName, chartType, xAxisField, xAxisFormat, dashboardName, dateFieldTable, dateField, template, } = values;
+        if (!chartName) {
+            alert("Please enter a chart name");
+            return;
+        }
+        // if (!dashboardName) {
+        //   alert("Please choose a dashboard name");
+        //   return;
+        // }
+        // if (!xAxisLabel && chartType !== "pie" && chartType !== "table") {
+        //   alert("Please enter a label for the x-axis");
+        //   return;
+        // }
+        // if (!yAxisLabel && chartType !== "pie" && chartType !== "table") {
+        //   alert("Please enter a label for the y-axis");
+        //   return;
+        // }
+        for (let i = 0; i < yAxisFields.length; i++) {
+            if (!yAxisFields[i].label && chartType !== "pie") {
+                alert(`Please enter a label for column '${yAxisFields[i].field}'`);
+                return;
+            }
+        }
+        if (!client || !organization) {
+            return;
+        }
+        const url = `https://quill-344421.uc.r.appspot.com/dashedit/${client._id}/${organization.id}/`;
+        const requestBody = {
+            dashboardItemId: id,
+            name: chartName,
+            xAxisField,
+            yAxisFields,
+            xAxisLabel,
+            xAxisFormat,
+            yAxisLabel,
+            chartType,
+            dashboardName,
+            columns,
+            dateField: { table: dateFieldTable, field: dateField },
+            template,
+        };
+        const response = await fetch(url, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${authToken}`,
+                environment: environment || undefined,
+            },
+            body: JSON.stringify(requestBody),
+        });
+        // setDashboard((dashboard) => {
+        //   return {
+        //     ...dashboard,
+        //     [response.data._id]: { ...existingVisualization, ...response.data }
+        //   }
+        // })
+        setIsOpen(false);
+        setActiveComponent("Dashboards");
+    };
+    const updateQuery = async (dashboardItemId, query) => {
+        if (!client || !organization || !dashboardItemId || !query) {
+            return;
+        }
+        const url = `https://quill-344421.uc.r.appspot.com/updatequery/${client._id}/${organization.id}/`;
+        const requestBody = {
+            dashboardItemId,
+            query,
+        };
+        const response = await fetch(url, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: "Bearer ",
+                environment: environment || undefined,
+            },
+            body: JSON.stringify(requestBody),
+        });
+        // To get JSON data from the response:
+        const responseData = await response.json();
+        if (responseData) {
+            setIsEditQueryOpen(false);
+        }
+    };
+    const deleteReport = async () => {
+        const { publicKey, customerId, authToken } = client;
+        if (!reportId) {
+            return;
+        }
+        if (!client || !organization) {
+            return;
+        }
+        const url = `https://quill-344421.uc.r.appspot.com/deletedash/${client._id}/${organization.id}/`;
+        const requestBody = {
+            dashboardItemId: reportId,
+        };
+        const response = await fetch(url, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${authToken}`,
+                environment: environment || undefined,
+            },
+            body: JSON.stringify(requestBody),
+        });
+        // To get JSON data from the response:
+        const responseData = await response.json();
+        if (responseData) {
+            setActiveComponent("Dashboards");
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(Report, { reportId: reportId, editChart: editChart, updateQuery: updateQuery, isOpen: isOpen, setIsOpen: setIsOpen, isEditQueryOpen: isEditQueryOpen, setIsEditQueryOpen: setIsEditQueryOpen, deleteReport: deleteReport, SecondaryButtonComponent: SecondaryButtonComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent }));
+}
+//# sourceMappingURL=Admin.js.map