@quillsql/admin 1.0.7 → 1.0.8

package/lib/Admin.js

@@ -142,7 +142,336 @@ const defaultTheme = {
     labelFontWeight: "500",
     fontSize: 14,
 };
-function Portal({ publicKey, queryEndpoint, theme = defaultTheme, queryHeaders, withCredentials, environment, organizationId, TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, UserManagementComponent, }) {
+function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, setIsOpen, filters, dateFilter, openAddFilterModal, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, selectedEditDashboard, dashNames, setSelectedEditDashboard, }) {
+    const [selectedDashboardName, setSelectedDashboardName] = (0, react_1.useState)("");
+    (0, react_1.useEffect)(() => {
+        setSelectedDashboardName(selectedDashboard);
+    }, [selectedDashboard]);
+    const [newFilters, setNewFilters] = (0, react_1.useState)([]);
+    const [newDateFilter, setNewDateFilter] = (0, react_1.useState)(null);
+    const [tables] = (0, react_1.useContext)(TablesContext);
+    const [selectedTable, setSelectedTable] = (0, react_1.useState)(null);
+    const [field, setField] = (0, react_1.useState)("");
+    (0, react_1.useEffect)(() => {
+        if (tables.length) {
+            setSelectedTable(tables[0]);
+            setField(tables[0].columns.map((elem) => elem.name)[0]);
+        }
+    }, [tables]);
+    (0, react_1.useEffect)(() => {
+        if (dashboardData && dashboardData.filters) {
+            setNewFilters(dashboardData.filters);
+        }
+        if (dashboardData && dashboardData.dateFilter) {
+            setNewDateFilter(dashboardData.dateFilter);
+        }
+    }, [dashboardData]);
+    const handleAddFilter = async () => {
+        setNewFilters([...newFilters, { label: "", field }]);
+    };
+    const handleSubmitDashboardChanges = async () => {
+        if (!selectedDashboardName ||
+            newFilters.some((filter) => !filter.label) ||
+            (newDateFilter &&
+                Object.keys(newDateFilter).length &&
+                !newDateFilter.label)) {
+            alert("Empty fields");
+            return;
+        }
+        if (newFilters.filter((elem) => !elem.field).length) {
+            alert(`no filter field for: ${newFilters.filter((elem) => !elem.field)[0].label}`);
+            return;
+        }
+        const updatedFilters = newFilters.map((filter) => {
+            const filterType = getPostgresBasicType(selectedTable.columns.find((col) => col.name === filter.field));
+            return {
+                table: selectedTable.name,
+                field: filter.field,
+                labelField: filter.field,
+                label: filter.label,
+                filterType,
+            };
+        });
+        if (dashNames &&
+            dashNames.length > 0 &&
+            dashNames.some((dashName) => dashName.name === selectedDashboardName &&
+                selectedDashboardName !== selectedDashboard)) {
+            alert("Dashboard name already taken!");
+            return;
+        }
+        const fieldsSet = new Set();
+        const hasDuplicateField = updatedFilters.some((filter) => {
+            if (fieldsSet.has(filter.field)) {
+                return true;
+            }
+            else {
+                fieldsSet.add(filter.field);
+                return false;
+            }
+        });
+        if (hasDuplicateField ||
+            (Object.keys(newDateFilter).length > 0 &&
+                updatedFilters.some((filter) => filter.filterType === "date"))) {
+            alert("Maximum of one filter per field");
+            return;
+        }
+        let allValid = true;
+        updatedFilters.forEach((filter) => {
+            if (filter.filterType !== "string" && filter.filterType !== "date") {
+                allValid = false;
+                console.error(`Invalid filterType found: ${filter.filterType}`);
+            }
+        });
+        if (!allValid) {
+            alert("We only support string and filters.");
+            return;
+        }
+        let responseData;
+        const url = `https://quill-344421.uc.r.appspot.com/dashfilter/${client._id}/`;
+        const body = {
+            newDashboardName: selectedDashboardName,
+            filters: updatedFilters,
+            dateFilter: newDateFilter,
+            name: selectedDashboard,
+        };
+        const headers = {
+            "Content-Type": "application/json",
+            Authorization: `Bearer `,
+        };
+        try {
+            const response = await fetch(url, {
+                method: "POST",
+                headers: headers,
+                body: JSON.stringify(body),
+            });
+            setSelectedEditDashboard(null);
+            setIsOpen(false);
+        }
+        catch (e) {
+            console.log("error");
+        }
+    };
+    // const handleDeleteFilter = async () => {
+    //   const url = `https://quill-344421.uc.r.appspot.com/dashfilterdelete/${client._id}/`;
+    //   const body = {
+    //     name: selectedDashboard.name,
+    //     filterId: "DATE_RANGE", //TODO: Change this?
+    //   };
+    //   const headers = {
+    //     "Content-Type": "application/json",
+    //     Authorization: `Bearer `,
+    //   };
+    //   try {
+    //     const response = await fetch(url, {
+    //       method: "POST",
+    //       headers: headers,
+    //       body: JSON.stringify(body),
+    //     });
+    //     if (!response.ok) {
+    //       throw new Error(`HTTP error! Status: ${response.status}`);
+    //     }
+    //     const responseData = await response.json();
+    //     if (responseData) {
+    //       setIsOpen(false);
+    //       return;
+    //     }
+    //   } catch (error) {
+    //     console.error("There was a problem with the fetch operation:", error);
+    //   }
+    // };
+    const handleDeleteFilter = (filter) => {
+        setNewFilters(newFilters.filter((f) => f !== filter));
+    };
+    const handleDeleteDateFilter = async () => {
+        // const response2 = await axios.post(
+        //   `https://quill-344421.uc.r.appspot.com/dashfilterdelete/${client._id}/`,
+        //   {
+        //     name: selectedDashboard.name,
+        //     filterId: "DATE_RANGE",
+        //   },
+        //   { headers: { Authorization: `Bearer ` } }
+        // );
+        // if (response2 && response2.data) {
+        //   setIsOpen(false);
+        //   return;
+        // }
+        setNewDateFilter({});
+    };
+    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => {
+            setIsOpen(false);
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                // alignItems: "center",
+            }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Edit filters" }), (0, jsx_runtime_1.jsx)("div", { children: "Dashboard name" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { value: selectedDashboardName, onChange: (e) => setSelectedDashboardName(e.target.value) }), (0, jsx_runtime_1.jsxs)("div", { children: [newDateFilter &&
+                            Object.values(newDateFilter).length > 0 &&
+                            newDateFilter.label ? (
+                        // <div style={{ display: "flex", flexDirection: "row" }}>
+                        //   <div style={{ display: "flex", flexDirection: "column" }}>
+                        //     <div>Label</div>
+                        //     <div>{dashboardData.dateFilter.label}</div>
+                        //   </div>
+                        //   <div style={{ display: "flex", flexDirection: "column" }}>
+                        //     <div>Initial date range</div>
+                        //     <div
+                        //       style={{
+                        //         display: "flex",
+                        //         flexDirection: "column",
+                        //         alignItems: "center",
+                        //       }}
+                        //     >
+                        //       <div>
+                        //         {dashboardData.dateFilter.initialRange === "LAST_90_DAYS"
+                        //           ? "Last 90 days"
+                        //           : ""}
+                        //         {dashboardData.dateFilter.initialRange === "LAST_30_DAYS"
+                        //           ? "Last 30 days"
+                        //           : ""}
+                        //         {dashboardData.dateFilter.initialRange === "CURRENT_MONTH"
+                        //           ? "This month"
+                        //           : ""}
+                        //       </div>
+                        //       <div
+                        //         // onClick={handleDeleteDateFilter}
+                        //         style={{
+                        //           height: 42,
+                        //           width: 42,
+                        //           alignItems: "center",
+                        //           justifyContent: "center",
+                        //           display: "flex",
+                        //         }}
+                        //       >
+                        //         {/* <svg
+                        //               xmlns="http://www.w3.org/2000/svg"
+                        //               viewBox="0 0 24 24"
+                        //               fill="#4C5462"
+                        //               width="20"
+                        //               height="20"
+                        //             >
+                        //               <path
+                        //                 fill-rule="evenodd"
+                        //                 d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z"
+                        //                 clip-rule="evenodd"
+                        //               />
+                        //             </svg> */}
+                        //       </div>
+                        //     </div>
+                        //   </div>
+                        // </div>
+                        (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "row" }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [(0, jsx_runtime_1.jsx)("h2", { children: "Date Label" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { value: newDateFilter.label, onChange: (e) => {
+                                                setNewDateFilter({
+                                                    ...newDateFilter,
+                                                    label: e.target.value,
+                                                });
+                                            } })] }), (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteDateFilter(), style: {
+                                        height: 42,
+                                        width: 42,
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        display: "flex",
+                                    }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: (0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] })) : null, newFilters.length > 0 &&
+                            newFilters.map((filter, index) => {
+                                return ((0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "row" }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [(0, jsx_runtime_1.jsx)("h2", { children: "Label" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { value: filter.label, onChange: (e) => {
+                                                        const updatedFilters = newFilters.map((otherFilter, i) => index === i
+                                                            ? { ...otherFilter, label: e.target.value }
+                                                            : otherFilter);
+                                                        setNewFilters(updatedFilters);
+                                                    } })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [(0, jsx_runtime_1.jsx)("h4", { children: "Field" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                        display: "flex",
+                                                        flexDirection: "column",
+                                                        alignItems: "center",
+                                                    }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                            display: "flex",
+                                                            flexDirection: "row",
+                                                            alignItems: "center",
+                                                        }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: filter && filter.field ? filter.field : "", options: selectedTable.columns.map((column) => {
+                                                                    return { label: column.name, value: column.name };
+                                                                }), onChange: (e) => {
+                                                                    const updatedFilters = newFilters.map((otherFilter, i) => index === i
+                                                                        ? { ...otherFilter, field: e }
+                                                                        : otherFilter);
+                                                                    setNewFilters(updatedFilters);
+                                                                } }), (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteFilter(filter), style: {
+                                                                    height: 42,
+                                                                    width: 42,
+                                                                    alignItems: "center",
+                                                                    justifyContent: "center",
+                                                                    display: "flex",
+                                                                }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: (0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }) })] })] }));
+                            })] }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleAddFilter, label: "Add new filter +" }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleSubmitDashboardChanges, label: "Submit Dashboard Changes" })] }) }));
+}
+function AddFilterModal({ isOpen, selectedDashboard, client, setIsOpen, ModalComponent, TextInputComponent, SelectComponent, HeaderComponent, ButtonComponent, openAddDashboardModal, }) {
+    const [tables] = (0, react_1.useContext)(TablesContext);
+    const [selectedTable, setSelectedTable] = (0, react_1.useState)(null);
+    const [name, setName] = (0, react_1.useState)("");
+    const [field, setField] = (0, react_1.useState)("");
+    const [filterType, setFilterType] = (0, react_1.useState)("string");
+    const [dateRange, setDateRange] = (0, react_1.useState)([new Date(), new Date()]);
+    (0, react_1.useEffect)(() => {
+        if (tables.length) {
+            setSelectedTable(tables[0]);
+            // setField(tables[0].columns.map((elem) => elem.name));
+            setField(tables[0].columns[0].name);
+        }
+    }, [tables]);
+    const handleAddFilter = async () => {
+        if (!selectedTable || !field) {
+            return;
+        }
+        const filterType = getPostgresBasicType(selectedTable.columns.find((col) => col.name === field));
+        if (filterType !== "string" && filterType !== "date") {
+            alert("We only support string and filters.");
+            return;
+        }
+        let responseData;
+        const url = `https://quill-344421.uc.r.appspot.comdashfilter/${client._id}/`;
+        const body = {
+            name: selectedDashboard,
+            filter: {
+                table: selectedTable.name,
+                field: field,
+                labelField: field,
+                label: name,
+                filterType,
+            },
+        };
+        const headers = {
+            "Content-Type": "application/json",
+            Authorization: `Bearer `,
+        };
+        try {
+            const response = await fetch(url, {
+                method: "POST",
+                headers: headers,
+                body: JSON.stringify(body),
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            responseData = await response.json();
+        }
+        catch (error) {
+            console.error("There was a problem with the fetch operation:", error);
+        }
+        if (responseData) {
+            setIsOpen(false);
+            setName("");
+            setField("");
+            return;
+        }
+    };
+    if (!selectedTable) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Add filter" }), (0, jsx_runtime_1.jsx)("div", { children: "Label" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { value: name, onChange: (e) => setName(e.target.value) }), (0, jsx_runtime_1.jsx)("div", { children: "Table" }), (0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: selectedTable ? selectedTable : "", onChange: (e) => setSelectedTable(e.target.value), options: tables.map((table) => {
+                        return { label: table.name, value: table.name };
+                    }) }), (0, jsx_runtime_1.jsx)("div", { children: "Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: field ? field : "", options: selectedTable.columns.map((column) => {
+                        return { label: column.name, value: column.name };
+                    }), onChange: (e) => {
+                        setField(e);
+                    } }), (0, jsx_runtime_1.jsx)(ButtonComponent, { label: "Add filter", onClick: handleAddFilter })] }) }));
+}
+function Portal({ publicKey, queryEndpoint, theme = defaultTheme, queryHeaders, withCredentials, environment, organizationId, TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, UserManagementComponent, HeaderComponent, }) {
     return ((0, jsx_runtime_1.jsx)(ContextProvider, { children: (0, jsx_runtime_1.jsx)(Navigation, { theme: theme, publicKey: publicKey, organizationId: organizationId, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials, TextInputComponent: TextInputComponent ||
                 (({ onChange, value, placeholder }) => ((0, jsx_runtime_1.jsx)("input", { style: {
                         display: "flex",
@@ -177,7 +506,13 @@ function Portal({ publicKey, queryEndpoint, theme = defaultTheme, queryHeaders,
                         fontSize: 14,
                         paddingLeft: 20,
                         paddingRight: 20,
-                    }, onClick: onClick, children: label }))), SecondaryButtonComponent: SecondaryButtonComponent ||
+                    }, onClick: onClick, children: label }))), HeaderComponent: HeaderComponent ||
+                (({ label }) => ((0, jsx_runtime_1.jsx)("h1", { style: {
+                        color: theme?.primaryTextColor,
+                        fontFamily: theme?.fontFamily,
+                        fontWeight: theme?.buttonFontWeight || 600,
+                        fontSize: 16,
+                    }, children: label }))), SecondaryButtonComponent: SecondaryButtonComponent ||
                 (({ onClick, label }) => ((0, jsx_runtime_1.jsx)("button", { style: {
                         height: 36,
                         background: "#F9FAFB",
@@ -195,39 +530,44 @@ function Portal({ publicKey, queryEndpoint, theme = defaultTheme, queryHeaders,
                         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 })] })) : null), environment: environment, OrganizationSelectComponent: OrganizationSelectComponent, UserManagementComponent: UserManagementComponent, SelectComponent: SelectComponent ||
+                (({ isOpen, close, 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)",
+                                }, 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 })] }));
+                }), environment: environment, 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: {
+                    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: "relative" }, children: [(0, jsx_runtime_1.jsx)("select", { defaultValue: "", style: {
                                     width: "100%",
                                     minWidth: 230,
                                     outline: "none",
@@ -246,7 +586,8 @@ function Portal({ publicKey, queryEndpoint, theme = defaultTheme, queryHeaders,
                                     color: theme?.primaryTextColor,
                                     boxShadow: "0 1px 2px 0 rgba(0,0,0,.05)",
                                     fontFamily: theme?.fontFamily,
-                                }, value: value, onChange: (event) => onChange(event.target.value), children: options.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, label: option.label }))) }), (0, jsx_runtime_1.jsx)(ArrowDownHeadIcon, { style: {
+                                }, value: value, onChange: (event) => onChange(event.target.value), children: options.length > 0 &&
+                                    options.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, label: option.label }, option.value))) }), (0, jsx_runtime_1.jsx)(ArrowDownHeadIcon, { style: {
                                     height: "20px",
                                     width: "20px",
                                     flex: "none",
@@ -259,7 +600,7 @@ function Portal({ publicKey, queryEndpoint, theme = defaultTheme, queryHeaders,
 }
 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, environment, withCredentials, }) {
+function Navigation({ TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, UserManagementComponent, HeaderComponent, publicKey, organizationId, queryEndpoint, queryHeaders, environment, withCredentials, }) {
     const [client, setClient] = (0, react_1.useContext)(ClientContext);
     const [environmentContext, setEnvironmentContext] = (0, react_1.useContext)(EnvironmentContext);
     const [tables, setTables] = (0, react_1.useContext)(TablesContext);
@@ -309,15 +650,15 @@ function Navigation({ TextInputComponent, ButtonComponent, SecondaryButtonCompon
     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, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, organizationId: organizationId, withCredentials: withCredentials }));
+                return ((0, jsx_runtime_1.jsx)(Dashboards, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, OrganizationSelectComponent: OrganizationSelectComponent, HeaderComponent: HeaderComponent, setReportId: setReportId, queryEndpoint: queryEndpoint, organizationId: organizationId, queryHeaders: queryHeaders, withCredentials: withCredentials }));
             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, organizationId: organizationId }));
+                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 }));
+                return ((0, jsx_runtime_1.jsx)(Tables, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders }));
             default:
-                return ((0, jsx_runtime_1.jsx)(Dashboards, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, OrganizationSelectComponent: OrganizationSelectComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, setReportId: setReportId, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, organizationId: organizationId, withCredentials: withCredentials }));
+                return ((0, jsx_runtime_1.jsx)(Dashboards, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, OrganizationSelectComponent: OrganizationSelectComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, HeaderComponent: HeaderComponent, setReportId: setReportId, queryEndpoint: queryEndpoint, organizationId: organizationId, queryHeaders: queryHeaders, withCredentials: withCredentials }));
         }
     };
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
@@ -508,17 +849,22 @@ function classNames(...classes) {
     return classes.filter(Boolean).join(" ");
 }
 exports.classNames = classNames;
-function Dashboards({ setReportId, TextInputComponent, ButtonComponent, SecondaryButtonComponent, OrganizationSelectComponent, ModalComponent, SelectComponent, queryEndpoint, queryHeaders, organizationId, withCredentials, }) {
+function Dashboards({ setReportId, TextInputComponent, ButtonComponent, SecondaryButtonComponent, OrganizationSelectComponent, ModalComponent, SelectComponent, queryEndpoint, queryHeaders, organizationId, HeaderComponent, withCredentials, }) {
     const [organizations] = (0, react_1.useContext)(OrganizationsContext);
+    const [client] = (0, react_1.useContext)(ClientContext);
+    const [organization, setOrganization] = (0, react_1.useContext)(OrganizationContext);
     const [environment] = (0, react_1.useContext)(EnvironmentContext);
     const [dashboards, setDashboards] = (0, react_1.useState)([]);
     const [selectedDashboard, setSelectedDashboard] = (0, react_1.useState)("");
+    const [selectedEditDashboard, setSelectedEditDashboard] = (0, react_1.useState)("");
+    const [editDashboardData, setEditDashboardData] = (0, react_1.useState)(null);
     const [addFilterModalIsOpen, setAddFilterModalIsOpen] = (0, react_1.useState)(false);
+    const [isAddDashboardModalOpen, setIsAddDashboardModalOpen] = (0, react_1.useState)(false);
     const [editFilterModalIsOpen, setEditFilterModalIsOpen] = (0, react_1.useState)(false);
     const [dashboardData, setDashboardData] = (0, react_1.useState)(null);
     const [activeComponent, setActiveComponent] = (0, react_1.useContext)(ActiveComponentContext);
+    const [isEditDashboardModalOpen, setIsEditDashboardModalOpen] = (0, react_1.useState)(false);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [client] = (0, react_1.useContext)(ClientContext);
     // const navigate = useNavigate();
     // useEffect(() => {
     //   if (customValue.length && customValue !== id && !userTyping) {
@@ -529,28 +875,28 @@ function Dashboards({ setReportId, TextInputComponent, ButtonComponent, Secondar
     //   //   navigate("/");
     //   // }
     // }, [customValue, userTyping]);
+    async function getDashNames() {
+        const url = `https://quill-344421.uc.r.appspot.com/dashnames/${client._id}/`;
+        const response2 = await fetch(url, {
+            method: "GET",
+            headers: {
+                Authorization: "Bearer ",
+                environment: environment,
+            },
+        });
+        // If you need to retrieve the JSON data from the response:
+        const data = await response2.json();
+        const dashNames = data.dashboardNames.map((elem) => {
+            if (!elem) {
+                return { name: "null" };
+            }
+            return { name: elem };
+        });
+        setDashboards(dashNames);
+        setSelectedDashboard(dashNames[0].name);
+    }
     (0, react_1.useEffect)(() => {
         let isSubscribed = true;
-        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();
         }
@@ -563,11 +909,15 @@ function Dashboards({ setReportId, TextInputComponent, ButtonComponent, Secondar
     //     window.location.reload();
     //   }
     // }, [id]);
+    const handleSetOrganization = (org) => {
+        setOrganization(null);
+        setTimeout(() => setOrganization(org), 50);
+    };
     (0, react_1.useEffect)(() => {
-        async function getDashboardData() {
-            let response2;
+        async function getDashboardData(dashboard, setData) {
+            let responseData;
             if (queryEndpoint) {
-                response2 = await fetch(queryEndpoint, {
+                const response = await fetch(queryEndpoint, {
                     method: "POST",
                     headers: {
                         ...queryHeaders,
@@ -577,38 +927,43 @@ function Dashboards({ setReportId, TextInputComponent, ButtonComponent, Secondar
                         metadata: organizationId
                             ? {
                                 orgId: organizationId,
-                                name: selectedDashboard,
                                 task: "config",
+                                name: dashboard,
                             }
-                            : { name: selectedDashboard, task: "config" },
+                            : { task: "config", name: dashboard },
                     }),
                     credentials: withCredentials ? "include" : "omit", // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
                 });
+                responseData = await response.json(); // If the server returns JSON data
             }
             else {
-                const url = new URL(`https://quill-344421.uc.r.appspot.com/dashconfig/`);
+                const url = new URL(`https://quill-344421.uc.r.appspot.com/dashconfig`);
                 // Setting the search parameters for the URL
                 url.search = new URLSearchParams({
                     orgId: organizationId ? organizationId : "",
                     publicKey: client._id,
-                    name: selectedDashboard,
+                    name: dashboard,
                 }).toString();
-                response2 = await fetch(url, {
+                const response2 = await fetch(url, {
                     method: "GET",
                     headers: {
                         Authorization: "Bearer ",
                         environment: environment,
                     },
                 });
+                // If you need to retrieve the JSON data from the response:
+                responseData = await response2.json();
             }
-            // If you need to retrieve the JSON data from the response:
-            const data = await response2.json();
-            setDashboardData(data);
+            setData(responseData);
+        }
+        if (selectedEditDashboard) {
+            getDashboardData(selectedEditDashboard, setEditDashboardData);
+            return;
         }
         if (selectedDashboard && client) {
-            getDashboardData();
+            getDashboardData(selectedDashboard, setDashboardData);
         }
-    }, [selectedDashboard, organizationId, client]);
+    }, [selectedDashboard, selectedEditDashboard, organizationId, client]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: "flex",
             flexDirection: "column",
@@ -669,16 +1024,16 @@ function Dashboards({ setReportId, TextInputComponent, ButtonComponent, Secondar
                                                             marginBottom: "4px",
                                                             fontWeight: "600",
                                                             color: exports.theme.secondaryTextColor,
-                                                        }, children: "Dashboard" }), (0, jsx_runtime_1.jsx)(SelectComponent, { options: dashboards.length
+                                                        }, children: "Dashboard" }), (0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", options: dashboards.length
                                                             ? dashboards.map((elem) => {
                                                                 return { value: elem.name, label: elem.name };
                                                             })
-                                                            : [], onChange: (e) => setSelectedDashboard(e.target.value), value: selectedDashboard })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                            : [], onChange: (e) => setSelectedDashboard(e), value: selectedDashboard ? selectedDashboard : "" })] }), (0, jsx_runtime_1.jsxs)("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
+                                                }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Edit dashboards", onClick: () => setIsEditDashboardModalOpen(true) }), (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
@@ -692,27 +1047,259 @@ function Dashboards({ setReportId, TextInputComponent, ButtonComponent, Secondar
                     }, onClickDashboardItem: (elem) => {
                         setReportId(elem._id);
                         setActiveComponent("Report");
-                    } })) })] }));
+                    } })) }), (0, jsx_runtime_1.jsx)(EditDashboardsModal, { clientId: client._id, isOpen: isEditDashboardModalOpen, setIsOpen: setIsEditDashboardModalOpen, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, TextInputComponent: TextInputComponent, openEditFilterModal: (dashboardName) => {
+                    setSelectedEditDashboard(dashboardName);
+                    setEditFilterModalIsOpen(true);
+                    // setIsEditDashboardModalOpen(false);
+                }, openAddDashboardModal: () => {
+                    setIsAddDashboardModalOpen(true);
+                    // setIsEditDashboardModalOpen(false);
+                }, HeaderComponent: HeaderComponent, setDashboardData: setDashboardData, dashboards: dashboards, getDashNames: getDashNames }), (0, jsx_runtime_1.jsx)(EditFiltersModal, { selectedDashboard: selectedEditDashboard, dashboardData: editDashboardData, isOpen: editFilterModalIsOpen, setIsOpen: setEditFilterModalIsOpen, openAddFilterModal: () => {
+                    setAddFilterModalIsOpen(true);
+                    // setEditFilterModalIsOpen(false);
+                }, client: client, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, TextInputComponent: TextInputComponent, HeaderComponent: HeaderComponent, SelectComponent: SelectComponent, dashNames: dashboards, setSelectedEditDashboard: setSelectedEditDashboard }), (0, jsx_runtime_1.jsx)(AddFilterModal, { selectedDashboard: selectedEditDashboard, isOpen: addFilterModalIsOpen, setIsOpen: setAddFilterModalIsOpen, client: client, ModalComponent: ModalComponent, TextInputComponent: TextInputComponent, SelectComponent: SelectComponent, HeaderComponent: HeaderComponent, ButtonComponent: ButtonComponent, openAddDashboardModal: () => {
+                    setIsAddDashboardModalOpen(true);
+                    // setAddFilterModalIsOpen(false);
+                } }), (0, jsx_runtime_1.jsx)(AddDashboardModal, { selectedDashboard: selectedDashboard, isOpen: isAddDashboardModalOpen, setIsOpen: setIsAddDashboardModalOpen, client: client, ModalComponent: ModalComponent, TextInputComponent: TextInputComponent, SelectComponent: SelectComponent, HeaderComponent: HeaderComponent, ButtonComponent: ButtonComponent, dashNames: dashboards, openAddFilterModal: () => {
+                    setAddFilterModalIsOpen(true);
+                    // setIsAddDashboardModalOpen(false);
+                }, organizationId: organizationId, getDashNames: getDashNames })] }));
 }
-function EditDashboardsModal({ ModalComponent, isOpen, setIsOpen, clientId }) {
-    const [dashboards, setDashboards] = (0, react_1.useState)([]);
+function AddDashboardModal({ selectedDashboard, isOpen, setIsOpen, client, ModalComponent, TextInputComponent, SelectComponent, HeaderComponent, ButtonComponent, dashNames, getDashNames, organizationId, }) {
+    const [selectedDashboardName, setSelectedDashboardName] = (0, react_1.useState)(selectedDashboard.name);
+    const [tables] = (0, react_1.useContext)(TablesContext);
+    const [selectedTable, setSelectedTable] = (0, react_1.useState)(null);
+    const [name, setName] = (0, react_1.useState)("");
+    const [field, setField] = (0, react_1.useState)("");
+    const [filterType, setFilterType] = (0, react_1.useState)("string");
+    const [dateRange, setDateRange] = (0, react_1.useState)([new Date(), new Date()]);
+    const [newFilters, setNewFilters] = (0, react_1.useState)([]);
+    const [newDateFilter, setNewDateFilter] = (0, react_1.useState)(null);
     (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 (tables.length) {
+            setSelectedTable(tables[0]);
+            // setField(tables[0].columns.map((elem) => elem.name));
+            setField(tables[0].columns[0].name);
+        }
+    }, [tables]);
+    const handleDeleteFilter = async (filter) => {
+        setNewFilters(newFilters.filter((f) => f !== filter));
+    };
+    const handleAddDashboardSubmit = async () => {
+        if (!selectedDashboardName ||
+            newFilters.some((filter) => !filter.label) ||
+            (newDateFilter && newDateFilter.label)) {
+            alert("Empty labels");
+            return;
+        }
+        if (newFilters.some((filter) => !filter.field)) {
+            alert("Empty fields");
+            return;
+        }
+        if (!selectedTable || !field) {
+            return;
+        }
+        if (dashNames &&
+            dashNames.length > 0 &&
+            dashNames.some((dashName) => dashName.name === selectedDashboardName)) {
+            alert("Dashboard name already taken!");
+            return;
+        }
+        let updatedFilters = newFilters.map((filter) => {
+            const filterType = getPostgresBasicType(selectedTable.columns.find((col) => col.name === filter.field));
+            return {
+                table: selectedTable.name,
+                field: filter.field,
+                labelField: filter.field,
+                label: filter.label,
+                filterType,
+            };
+        });
+        const fieldsSet = new Set();
+        const hasDuplicateField = updatedFilters.some((filter) => {
+            if (fieldsSet.has(filter.field)) {
+                return true;
+            }
+            else {
+                fieldsSet.add(filter.field);
+                return false;
+            }
+        });
+        if (hasDuplicateField) {
+            alert("Maximum of one filter per field");
+            return;
+        }
+        let allValid = true;
+        updatedFilters.forEach((filter) => {
+            if (filter.filterType !== "string" && filter.filterType !== "date") {
+                allValid = false;
+                console.error(`Invalid filterType found: ${filter.filterType}`);
+            }
+        });
+        if (!allValid) {
+            alert("We only support string and filters.");
+            return;
+        }
+        if (updatedFilters.filter((filter) => filter.filterType === "date").length > 1) {
+            alert("More than one date filter");
+            return;
+        }
+        let responseData;
+        const url = `https://quill-344421.uc.r.appspot.com/newdash/${client._id}/`;
+        const body = newDateFilter && Object.keys(newDateFilter).length
+            ? {
+                dateFilter: newDateFilter,
+                newDashboardName: selectedDashboardName,
+                filters: updatedFilters,
+                organizationId,
+            }
+            : {
+                newDashboardName: selectedDashboardName,
+                filters: updatedFilters,
+                organizationId,
+            };
+        const headers = {
+            "Content-Type": "application/json",
+            Authorization: `Bearer `,
+        };
+        try {
+            const response = await fetch(url, {
+                method: "POST",
+                headers: headers,
+                body: JSON.stringify(body),
             });
-            // If you need to retrieve the JSON data from the response:
-            const data = await response2.json();
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            responseData = await response.json();
+        }
+        catch (e) {
+            console.log("error");
+        }
+        if (responseData) {
+            setIsOpen(false);
+            setName("");
+            setSelectedDashboardName("");
+            setNewFilters([]);
+            setNewDateFilter(null);
+            getDashNames();
+            return;
+        }
+    };
+    if (!selectedTable) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
+    const handleAddFilter = async () => {
+        setNewFilters([...newFilters, { label: "", field }]);
+    };
+    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { placeholder: "Enter Dashboard Name...", onChange: (e) => setSelectedDashboardName(e.target.value), value: selectedDashboardName }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                    }, children: [newFilters.map((filter, index) => {
+                            return ((0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "row" }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [(0, jsx_runtime_1.jsx)("h2", { children: "Label" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { value: filter.label, onChange: (e) => {
+                                                    const updatedFilters = newFilters.map((otherFilter, i) => index === i
+                                                        ? { ...otherFilter, label: e.target.value }
+                                                        : otherFilter);
+                                                    setNewFilters(updatedFilters);
+                                                } })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [(0, jsx_runtime_1.jsx)("h4", { children: "Field" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    display: "flex",
+                                                    flexDirection: "column",
+                                                    alignItems: "center",
+                                                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                        display: "flex",
+                                                        flexDirection: "row",
+                                                        alignItems: "center",
+                                                    }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: filter && filter.field ? filter.field : "", options: selectedTable.columns.map((column) => {
+                                                                return { label: column.name, value: column.name };
+                                                            }), onChange: (e) => {
+                                                                const updatedFilters = newFilters.map((otherFilter, i) => index === i
+                                                                    ? { ...otherFilter, field: e }
+                                                                    : otherFilter);
+                                                                setNewFilters(updatedFilters);
+                                                            } }), (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteFilter(filter), style: {
+                                                                height: 42,
+                                                                width: 42,
+                                                                alignItems: "center",
+                                                                justifyContent: "center",
+                                                                display: "flex",
+                                                            }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }) })] })] }, filter.field + index));
+                        }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleAddFilter, label: "Add new filter +" }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleAddDashboardSubmit, label: "Add Dashboard +" })] })] }) }));
+}
+function EditDashboardsModal({ ModalComponent, TextInputComponent, isOpen, setIsOpen, clientId, ButtonComponent, openEditFilterModal, openAddDashboardModal, HeaderComponent, setDashboardData, dashboards, getDashNames, }) {
+    // const [dashboards, setDashboards] = useState([]);
+    // useEffect(() => {
+    //   async function getDashboards(clientId) {
+    //     const url = `https://quill-344421.uc.r.appspot.com/dashnames/${clientId}/`;
+    //     const response2 = await fetch(url, {
+    //       method: "GET",
+    //       headers: {
+    //         Authorization: "Bearer ", // Ensure you append your token after 'Bearer ' if needed
+    //       },
+    //     });
+    //     // If you need to retrieve the JSON data from the response:
+    //     const data = await response2.json();
+    //     setDashboards(data);
+    //   }
+    //   if (clientId) {
+    //     getDashboards(clientId);
+    //   }
+    // }, [clientId]);
+    async function handleDeleteDashboard(dashboardName) {
+        const url = `https://quill-344421.uc.r.appspot.com/dashdelete/${clientId}/`;
+        const body = {
+            name: dashboardName,
+        };
+        const headers = {
+            "Content-Type": "application/json",
+            Authorization: `Bearer `,
+        };
+        try {
+            const response = await fetch(url, {
+                method: "POST",
+                headers: headers,
+                body: JSON.stringify(body),
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            const responseData = await response.json();
+            if (responseData) {
+                getDashNames();
+                return;
+            }
         }
-        if (clientId) {
-            getDashboards(clientId);
+        catch (e) {
+            console.log("error", e);
         }
-    }, [clientId]);
-    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: (0, jsx_runtime_1.jsx)("div", {}) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                    }, children: dashboards &&
+                        dashboards.map((dashboardName, index) => {
+                            return ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: "flex",
+                                    flexDirection: "row",
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                            display: "flex",
+                                            flexDirection: "column",
+                                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                                marginRight: 12,
+                                            }, children: dashboardName.name }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: "flex",
+                                            flexDirection: "column",
+                                        }, children: [" ", (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                    display: "flex",
+                                                    flexDirection: "row",
+                                                    alignItems: "flex-end",
+                                                }, children: [(0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => openEditFilterModal(dashboardName.name), label: "Edit" }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => handleDeleteDashboard(dashboardName.name), label: "Delete" })] })] })] }, dashboardName + index));
+                        }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                        justifyContent: "center",
+                    }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: openAddDashboardModal, label: "Create new dashboard" }) })] }) }));
 }
 function DropdownMenu({ items, setSelected, selected, filterKey }) {
     return ((0, jsx_runtime_1.jsx)("select", { onChange: (e) => {
@@ -720,32 +1307,7 @@ function DropdownMenu({ items, setSelected, selected, filterKey }) {
         }, 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, }) {
+function Tables({ TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, queryEndpoint, queryHeaders, withCredentials, }) {
     const [tables, setTables] = (0, react_1.useState)([]);
     const [modalIsOpen, setIsOpen] = (0, react_1.useState)(false);
     const [editModalIsOpen, setEditModalIsOpen] = (0, react_1.useState)(false);
@@ -755,7 +1317,6 @@ function Tables({ TextInputComponent, ButtonComponent, SecondaryButtonComponent,
     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);
@@ -764,7 +1325,7 @@ function Tables({ TextInputComponent, ButtonComponent, SecondaryButtonComponent,
     };
     const openModal = () => {
         setIsOpen(true);
-        setCode("");
+        setEditViewQuery("");
     };
     const closeModal = () => {
         setIsOpen(false);
@@ -781,21 +1342,47 @@ function Tables({ TextInputComponent, ButtonComponent, SecondaryButtonComponent,
         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,
-            }),
-        });
+        if (!editViewId) {
+            console.log("No view id found");
+            return;
+        }
+        let response;
+        if (queryEndpoint) {
+            response = await fetch(queryEndpoint, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    ...queryHeaders,
+                },
+                body: JSON.stringify({
+                    metadata: {
+                        task: "view",
+                        id: editViewId,
+                        deleted: true,
+                    },
+                }),
+                credentials: withCredentials ? "include" : "omit", // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
+            });
+        }
+        else {
+            response = await fetch(`https://quill-344421.uc.r.appspot.com/table/${client._id}/`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer `,
+                },
+                body: JSON.stringify({
+                    id: editViewId,
+                    deleted: true,
+                }),
+            });
+        }
         const data = await response.json();
         if (data) {
             setDeleteName("");
@@ -836,38 +1423,47 @@ function Tables({ TextInputComponent, ButtonComponent, SecondaryButtonComponent,
             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}/`, {
+        if (!editViewId) {
+            alert("Could not save.");
+            return;
+        }
+        let response;
+        if (queryEndpoint) {
+            response = await fetch(queryEndpoint, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    ...queryHeaders,
+                },
+                body: JSON.stringify({
+                    metadata: {
+                        query: editViewQuery[editViewQuery.length - 1] === ";"
+                            ? editViewQuery.slice(0, -1)
+                            : editViewQuery,
+                        name: editName,
+                        task: "view",
+                        id: editViewId,
+                    },
+                }),
+                credentials: withCredentials ? "include" : "omit", // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
+            });
+        }
+        else {
+            response = await fetch(`https://quill-344421.uc.r.appspot.com/table/${client._id}/`, {
                 method: "POST",
                 headers: {
                     "Content-Type": "application/json",
                     Authorization: `Bearer `,
                 },
                 body: JSON.stringify({
-                    viewQuery: editViewQuery.slice(0, -1),
+                    viewQuery: editViewQuery[editViewQuery.length - 1] === ";"
+                        ? editViewQuery.slice(0, -1)
+                        : editViewQuery,
                     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();
@@ -879,40 +1475,45 @@ function Tables({ TextInputComponent, ButtonComponent, SecondaryButtonComponent,
             alert("Please enter a table name.");
             return;
         }
-        if (!code.length) {
+        if (!editViewQuery.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}/`, {
+        let response;
+        if (queryEndpoint) {
+            response = await fetch(queryEndpoint, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    ...queryHeaders,
+                },
+                body: JSON.stringify({
+                    metadata: {
+                        query: editViewQuery[editViewQuery.length - 1] === ";"
+                            ? editViewQuery.slice(0, -1)
+                            : editViewQuery,
+                        name: name,
+                        task: "view",
+                    },
+                }),
+                credentials: withCredentials ? "include" : "omit", // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
+            });
+        }
+        else {
+            response = await fetch(`https://quill-344421.uc.r.appspot.com/table/${client._id}/`, {
                 method: "POST",
                 headers: {
                     "Content-Type": "application/json",
                     Authorization: `Bearer `,
                 },
                 body: JSON.stringify({
-                    viewQuery: code.slice(0, -1),
+                    viewQuery: editViewQuery[editViewQuery.length - 1] === ";"
+                        ? editViewQuery.slice(0, -1)
+                        : editViewQuery,
                     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();
@@ -949,13 +1550,13 @@ function Tables({ TextInputComponent, ButtonComponent, SecondaryButtonComponent,
                                 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: {
+                            }, children: (0, jsx_runtime_1.jsx)(react_3.default, { height: "500px", width: "100%", defaultLanguage: "pgsql", defaultValue: "", value: editViewQuery, loading: (0, jsx_runtime_1.jsx)("div", {}), options: {
                                     wordWrap: "on",
                                     minimap: {
                                         enabled: false,
                                     },
                                     padding: { top: 16 },
-                                }, onChange: (query) => 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: {
+                                }, onChange: (query) => setEditViewQuery(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",
@@ -999,13 +1600,13 @@ function Tables({ TextInputComponent, ButtonComponent, SecondaryButtonComponent,
                                 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: {
+                            }, children: (0, jsx_runtime_1.jsx)(react_3.default, { height: "300px", width: "520px", defaultLanguage: "pgsql", defaultValue: "", value: editViewQuery, loading: (0, jsx_runtime_1.jsx)("div", {}), options: {
                                     wordWrap: "on",
                                     minimap: {
                                         enabled: false,
                                     },
                                     padding: { top: 16 },
-                                }, onChange: (query) => setCode(query), beforeMount: (monaco) => defineEditorTheme(monaco, exports.theme), onMount: setEditorTheme }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                }, onChange: (query) => setEditViewQuery(query), beforeMount: (monaco) => defineEditorTheme(monaco, exports.theme), onMount: setEditorTheme }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                 display: "flex",
                                 flexDirection: "row",
                                 alignItems: "center",
@@ -1065,7 +1666,7 @@ function Modal({ isOpen, onRequestClose, children }) {
                     // zIndex: 1000,
                 }, children: children })] }));
 }
-function TableCell({ table, clickTableCell }) {
+function TableCell({ table, clickTableCell, key }) {
     const handleClickTableCell = () => {
         clickTableCell(table);
     };
@@ -1085,7 +1686,7 @@ function TableCell({ table, clickTableCell }) {
                         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))) })) })] }));
+                    }, children: tokens.map((line, i) => ((0, jsx_runtime_1.jsx)("div", { ...getLineProps({ line, key: i }), children: line.map((token, key) => ((0, jsx_runtime_1.jsx)("span", { ...getTokenProps({ token, key }) }, key))) }, i))) })) })] }, table.displayName));
 }
 function QueryEditor({ TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, }) {
     const [customerId, setCustomerId] = (0, react_1.useState)("");
@@ -1149,75 +1750,6 @@ function QueryEditor({ TextInputComponent, ButtonComponent, SecondaryButtonCompo
         };
     }, [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 {
@@ -1501,11 +2033,38 @@ const FORMAT_OPTIONS = [
     { value: "percent", label: "percent" },
     { value: "string", label: "string" },
 ];
-function Report({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQueryOpen, setIsEditQueryOpen, SecondaryButtonComponent, ModalComponent, deleteReport, updateQuery, }) {
+function Report({ reportId, 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");
     };
@@ -1533,11 +2092,11 @@ function Report({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQueryOpe
                 }, 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
+                        } }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Delete", onClick: deleteReport })] }), data.chartType !== "table" && ((0, jsx_runtime_1.jsx)(react_2.Table
             // containerStyle={{ width: "80vw", height: 1100 }}
             , { 
                 // containerStyle={{ width: "80vw", height: 1100 }}
-                containerStyle: { height: 400, width: "100%", marginTop: 24 }, chartId: reportId }), (0, jsx_runtime_1.jsx)(react_2.AddToDashboardModal, { isOpen: isOpen, setIsOpen: setIsOpen, rows: data.rows, columns: data.columns, fields: data.fields, query: data.queryString, report: data, ModalComponent: ModalComponent, showTableFormatOptions: true, showDateFieldOptions: true, showAccessControlOptions: true }), (0, jsx_runtime_1.jsx)(EditQueryModal, { query: data.queryString, report: data, isOpen: isEditQueryOpen, setIsOpen: setIsEditQueryOpen, updateQuery: updateQuery })] }));
+                containerStyle: { height: 400, width: "100%", marginTop: 24 }, chartId: reportId })), (0, jsx_runtime_1.jsx)(EditVisualizationModal, { isOpen: isOpen, setIsOpen: setIsOpen, report: data, data: data.rows, query: data.queryString, columns: data.columns, fields: data.fields }), (0, jsx_runtime_1.jsx)(EditQueryModal, { 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);
@@ -1591,7 +2150,7 @@ function EditVisualizationModal({ isOpen, setIsOpen, report, columns, data, fiel
     }
     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, organizationId, }) {
+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);
@@ -1628,10 +2187,10 @@ function ReportWrapper({ SecondaryButtonComponent, ButtonComponent, ModalCompone
         if (!reportId) {
             return;
         }
-        if (!client || !organizationId) {
+        if (!client) {
             return;
         }
-        const url = `https://quill-344421.uc.r.appspot.com/deletedash/${client._id}/${organizationId}/`;
+        const url = `https://quill-344421.uc.r.appspot.com/deletedash/${client._id}/${customerId}/`;
         const requestBody = {
             dashboardItemId: reportId,
         };