@quillsql/admin 1.4.0 → 1.6.0

package/dist/esm/Admin.js

@@ -1,23 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// @ts-nocheck
-import { useState, useEffect } from 'react';
-import { QuillProvider, useQuill, Chart, ChartEditor, useDashboard, QuillTable, } from '@quillsql/react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { QuillProvider, useQuill, ChartEditor, ReportBuilder, } from '@quillsql/react';
 import prismTheme from 'prism-react-renderer/themes/nightOwlLight';
 import Highlight, { defaultProps } from 'prism-react-renderer';
-import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, MeasuringStrategy, TouchSensor, } from '@dnd-kit/core';
-import InputLabel from './components/InputLabel';
-import CardSection from './components/CardSection';
-import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable, defaultAnimateLayoutChanges, } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { OrgSelect, DashboardManager } from './components';
+import { DashboardManager } from './components';
 import { AdminProvider, useAdmin } from './AdminProvider';
-import { ButtonPrimitive, HeaderPrimitive, ModalPrimitive, SecondaryButtonPrimitive, SelectPrimitive, TextInputPrimitive, } from './primitives';
+import { HeaderPrimitive, ModalPrimitive, SelectPrimitive, TextInputPrimitive, } from './primitives';
+import { MemoizedButton, MemoizedSecondaryButton, } from './components/UiComponents';
 import DashboardBuilder from './public_components/DashboardBuilder';
 import SQLViewManager from './public_components/SQLViewManager';
-import { InitialDateRangeOptions, QUILL_SERVER, defaultDateRange, } from './utils/constants';
-import TogglePrimitive from './primitives/TogglePrimitive';
+import { QUILL_SERVER } from './utils/constants';
+import { MemoizedModal } from './components/UiComponents';
+import { SQLEditor } from '@quillsql/react';
+import { hasColumnAlias } from './utils/table';
 // chartColors: ["#6269E9", "#E14F62"],
-const defaultTheme = {
+export const defaultTheme = {
     fontFamily: 'Inter; Helvetica',
     backgroundColor: '#FFFFFF',
     primaryTextColor: '#364153',
@@ -25,392 +22,23 @@ const defaultTheme = {
     chartLabelFontFamily: 'Inter; Helvetica',
     chartLabelColor: '#666666',
     chartTickColor: '#CCCCCC',
+    chartColors: ['#6269E9', '#E14F62', '#55B5A6', '#E9A23B', '#D0ACCF'],
     borderColor: '#E5E7EB',
     primaryButtonColor: '#364153',
     borderWidth: 1,
-    labelFontWeight: '500',
+    labelFontWeight: 500,
     fontSize: 14,
 };
-export function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, setSelectedEditDashboard, SecondaryButtonComponent, openAddFilterModal, openEditOrderModal, }) {
-    const { state, dispatch } = useAdmin();
-    const [selectedDashboardName, setSelectedDashboardName] = useState(selectedDashboard);
-    useEffect(() => {
-        setSelectedDashboardName(selectedDashboard);
-    }, [selectedDashboard]);
-    const { data } = useDashboard(selectedDashboard);
-    const [isDateComparison, setIsDateComparison] = useState(false);
-    const [newFilters, setNewFilters] = useState([]);
-    const [initialRange, setInitialRange] = useState(defaultDateRange);
-    const [showDateFilter, setShowDateFilter] = useState(true);
-    const [newDateFilter, setNewDateFilter] = useState(null);
-    const [selectedTable, setSelectedTable] = useState(null);
-    const [field, setField] = useState('');
-    useEffect(() => {
-        if (data && data.dateFilter) {
-            setIsDateComparison(data.dateFilter.comparison);
-            dispatch('SET_DATE_FILTER', data.dateFilter);
-        }
-    }, [data]);
-    useEffect(() => {
-        setIsDateComparison(!!state.dateFilter?.comparison ?? false);
-    }, [state.dateFilter]);
-    useEffect(() => {
-        if (state.tables?.length) {
-            const defaultTable = state.tables[0];
-            const name = state.editDashboardData?.filters[0]?.table;
-            const table = state.tables.find((t) => t.name === name) ?? defaultTable;
-            setSelectedTable(table);
-            setField(table.columns.map((elem) => elem.name)[0]);
-        }
-    }, [state.tables, state.editDashboardData]);
-    useEffect(() => {
-        if (dashboardData && dashboardData.filters) {
-            setNewFilters(dashboardData.filters);
-        }
-        if (dashboardData && dashboardData.dateFilter) {
-            setNewDateFilter(dashboardData.dateFilter);
-        }
-    }, [dashboardData]);
-    const handleAddFilter = async () => {
-        setNewFilters([...newFilters, { label: '' }]);
-    };
-    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 table = state.tables.find((table) => table.name === filter.table);
-            const filterType = getPostgresBasicType(table.columns.find((col) => col.name === filter.field));
-            return {
-                table: filter.table,
-                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 ||
-            (newDateFilter && 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;
-        }
-        const url = `${QUILL_SERVER}/dashfilter/${client._id}/`;
-        const body = {
-            newDashboardName: selectedDashboardName,
-            filters: updatedFilters,
-            dateFilter: newDateFilter
-                ? {
-                    ...newDateFilter,
-                    comparison: isDateComparison,
-                    primaryRange: initialRange,
-                }
-                : null,
-            name: selectedDashboard,
-            databaseType: state.client.databaseType,
-        };
-        dispatch({ type: 'SET_DATE_FILTER', payload: body.dateFilter });
-        const headers = {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer `,
-        };
-        try {
-            const response = await fetch(url, {
-                method: 'POST',
-                headers: headers,
-                body: JSON.stringify(body),
-            });
-            await onSave();
-            setSelectedEditDashboard(null);
-            setIsOpen(false);
-        }
-        catch (e) {
-            console.log('error');
-        }
-    };
-    const handleDeleteFilter = (filter) => {
-        setNewFilters(newFilters.filter((f) => f !== filter));
-    };
-    const handleDeleteDateFilter = async () => {
-        setShowDateFilter(false);
-        setNewDateFilter(null);
-    };
-    const handleAddDateFilter = async () => {
-        setShowDateFilter(true);
-        if (dashboardData && dashboardData.dateFilter) {
-            setNewDateFilter(dashboardData.dateFilter);
-        }
-    };
-    const handleDeleteDashboard = async () => {
-        if (confirm('Are you sure? This action cannot be undone.')) {
-            const URL = `${QUILL_SERVER}/dashboard/${selectedDashboard}`;
-            await fetch(URL, {
-                method: 'DELETE',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    clientId: client._id,
-                    databaseType: state.client.databaseType,
-                }),
-            });
-            setIsOpen(false);
-            setNewFilters([]);
-            await onSave();
-        }
-    };
-    return (_jsx(ModalComponent, { isOpen: isOpen, close: () => {
-            setIsOpen(false);
-            setNewFilters([]);
-            setIsDateComparison(state.dateFilter?.comparison ?? false);
-        }, style: {
-            minWidth: '814px',
-            maxWidth: '814px',
-        }, children: _jsxs("div", { style: {
-                display: 'flex',
-                gap: 16,
-                flexDirection: 'column',
-                width: '100%',
-                height: '100%',
-                maxHeight: '100%',
-                overflowY: 'auto',
-            }, children: [_jsx(HeaderComponent, { label: "Manage dashboard" }), _jsxs("div", { children: [_jsx(InputLabel, { children: "Name" }), _jsx("div", { style: { maxWidth: 230 }, children: _jsx(TextInputComponent, { value: selectedDashboardName, onChange: (e) => setSelectedDashboardName(e.target.value) }) })] }), _jsxs("div", { children: [_jsxs("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                gap: '10px',
-                            }, children: [_jsx(CardSection, { children: "Date Filter" }), showDateFilter && (_jsx(_Fragment, { children: _jsxs("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'row',
-                                            gap: '10px',
-                                        }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(InputLabel, { children: "Label" }), _jsx("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'row',
-                                                            alignItems: 'center',
-                                                        }, children: _jsx(TextInputComponent, { value: newDateFilter?.label, onChange: (e) => {
-                                                                setNewDateFilter({
-                                                                    ...newDateFilter,
-                                                                    label: e.target.value,
-                                                                });
-                                                            } }) })] }), _jsx("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'row',
-                                                    gap: '10px',
-                                                }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(InputLabel, { children: "Initial Range" }), _jsx(SelectComponent, { value: initialRange.label, onChange: (e) => {
-                                                                setInitialRange(InitialDateRangeOptions.find((table) => table.label === e) ?? initialRange);
-                                                            }, options: InitialDateRangeOptions.map((table) => {
-                                                                return { label: table.label, value: table.label };
-                                                            }) })] }) }), _jsx("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'row',
-                                                    gap: '10px',
-                                                }, children: _jsxs("div", { style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                    }, children: [_jsx(InputLabel, { children: "Date Comparison" }), _jsx("div", { style: {
-                                                                display: 'flex',
-                                                                flexDirection: 'column',
-                                                                justifyContent: 'center',
-                                                                height: '100%',
-                                                                minWidth: 200,
-                                                                maxWidth: 200,
-                                                                width: 200,
-                                                            }, children: _jsx(TogglePrimitive, { value: isDateComparison, onClick: () => {
-                                                                    setIsDateComparison((isDateComparison) => !isDateComparison);
-                                                                } }) })] }) }), _jsx("div", { style: {
-                                                    display: 'flex',
-                                                    flexGrow: 1,
-                                                    flexDirection: 'row',
-                                                    alignItems: 'end',
-                                                    justifyContent: 'end',
-                                                    gap: '10px',
-                                                }, children: _jsx("div", { style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        justifyContent: 'center',
-                                                    }, children: _jsx("div", { onClick: () => handleDeleteDateFilter(), style: {
-                                                            height: 38,
-                                                            width: 42,
-                                                            alignItems: 'center',
-                                                            justifyContent: 'center',
-                                                            display: 'flex',
-                                                            cursor: 'pointer',
-                                                        }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: _jsx("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) }) }) })] }) })), !showDateFilter && (_jsx("div", { style: { maxWidth: 230 }, children: _jsx(SecondaryButtonComponent, { onClick: handleAddDateFilter, label: "Add date filter +" }) }))] }), _jsx("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                                justifyContent: 'space-between',
-                                marginTop: 20,
-                            }, children: _jsx(CardSection, { children: "Filters" }) }), newFilters.length > 0 && (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '6px' }, children: newFilters.map((filter, index) => {
-                                return (_jsxs("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'row',
-                                        gap: '10px',
-                                    }, children: [_jsxs("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'column',
-                                                maxWidth: 300,
-                                            }, children: [index === 0 && _jsx(InputLabel, { children: "Label" }), _jsx(TextInputComponent, { value: filter.label, onChange: (e) => {
-                                                        const updatedFilters = newFilters.map((otherFilter, i) => index === i
-                                                            ? { ...otherFilter, label: e.target.value }
-                                                            : otherFilter);
-                                                        setNewFilters(updatedFilters);
-                                                    }, width: "230px" })] }), _jsxs("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'column',
-                                                maxWidth: 300,
-                                            }, children: [index === 0 && _jsx(InputLabel, { children: "Table" }), _jsx(SelectComponent, { defaultValue: "", value: filter.table, onChange: (e) => {
-                                                        const updatedFilters = newFilters.map((otherFilter, i) => index === i
-                                                            ? { ...otherFilter, table: e }
-                                                            : otherFilter);
-                                                        setNewFilters(updatedFilters);
-                                                    }, options: [
-                                                        { label: 'Select', value: '' },
-                                                        ...state.tables.map((table) => {
-                                                            return { label: table.name, value: table.name };
-                                                        }),
-                                                        ,
-                                                    ] })] }), _jsxs("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'column',
-                                                maxWidth: 300,
-                                            }, children: [index === 0 && _jsx(InputLabel, { children: "Field" }), _jsx("div", { style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        alignItems: 'center',
-                                                    }, children: _jsxs("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'row',
-                                                            alignItems: 'center',
-                                                        }, children: [_jsx(SelectComponent, { defaultValue: "", value: filter && filter.field ? filter.field : '', options: state.tables
-                                                                    .find((table) => table.name === filter.table)
-                                                                    ?.columns.map((column) => {
-                                                                    return {
-                                                                        label: column.name,
-                                                                        value: column.name,
-                                                                    };
-                                                                }), onChange: (e) => {
-                                                                    const updatedFilters = newFilters.map((otherFilter, i) => index === i
-                                                                        ? { ...otherFilter, field: e }
-                                                                        : otherFilter);
-                                                                    setNewFilters(updatedFilters);
-                                                                } }), _jsx("div", { onClick: () => handleDeleteFilter(filter), style: {
-                                                                    height: 38,
-                                                                    width: 42,
-                                                                    alignItems: 'center',
-                                                                    justifyContent: 'center',
-                                                                    display: 'flex',
-                                                                    cursor: 'pointer',
-                                                                }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: _jsx("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }) })] })] }, index));
-                            }) })), _jsx("div", { style: { height: 12 } }), _jsx(SecondaryButtonComponent, { onClick: handleAddFilter, label: "Add filter +" })] }), _jsx(CardSection, { children: "Chart order" }), _jsx("div", { style: { maxWidth: 230 }, children: _jsx(SecondaryButtonComponent, { onClick: () => openEditOrderModal(selectedDashboardName), label: "Edit chart order" }) }), _jsx(CardSection, { children: "Danger Zone" }), _jsx("div", { style: { maxWidth: 230 }, children: _jsx(SecondaryButtonComponent, { onClick: handleDeleteDashboard, label: "Delete Dashboard" }) }), _jsx("div", { style: { height: 18 } }), _jsx("div", { style: { maxWidth: 230 }, children: _jsx(ButtonComponent, { onClick: handleSubmitDashboardChanges, label: "Save changes" }) })] }) }));
-}
-export function AddFilterModal({ isOpen, selectedDashboard, client, setIsOpen, ModalComponent, TextInputComponent, SelectComponent, HeaderComponent, ButtonComponent, openAddDashboardModal, }) {
-    const [selectedTable, setSelectedTable] = useState(null);
-    const [name, setName] = useState('');
-    const [field, setField] = useState('');
-    const [filterType, setFilterType] = useState('string');
-    const [dateRange, setDateRange] = useState([new Date(), new Date()]);
-    const { state, dispatch } = useAdmin();
-    useEffect(() => {
-        if (state.tables?.length) {
-            setSelectedTable(state.tables[0]);
-            // setField(tables[0].columns.map((elem) => elem.name));
-            setField(state.tables[0].columns[0].name);
-        }
-    }, [state.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 = `${QUILL_SERVER}/dashfilter/${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 (_jsx(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(HeaderComponent, { label: "Add filter" }), _jsx("div", { children: "Label" }), _jsx(TextInputComponent, { value: name, onChange: (e) => setName(e.target.value) }), _jsx("div", { children: "Table" }), _jsx(SelectComponent, { defaultValue: "", value: selectedTable ? selectedTable : '', onChange: (e) => setSelectedTable(e.target.value), QuillOptions: state.tables.map((table) => {
-                        return { label: table.name, value: table.name };
-                    }) }), _jsx("div", { children: "Field" }), _jsx(SelectComponent, { defaultValue: "", value: field ? field : '', QuillOptions: selectedTable.columns.map((column) => {
-                        return { label: column.name, value: column.name };
-                    }), onChange: (e) => {
-                        setField(e);
-                    } }), _jsx(ButtonComponent, { label: "Add filter", onClick: handleAddFilter })] }) }));
-}
-export default function Portal({ publicKey, queryEndpoint, theme = defaultTheme, queryHeaders, withCredentials, environment, organizationId, TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, UserManagementComponent, HeaderComponent, }) {
-    return (_jsx(AdminProvider, { publicKey: publicKey, children: _jsx(Navigation, { theme: theme, publicKey: publicKey, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials, TextInputComponent: TextInputComponent || TextInputPrimitive, ButtonComponent: ButtonComponent || ButtonPrimitive, HeaderComponent: HeaderComponent || HeaderPrimitive, SecondaryButtonComponent: SecondaryButtonComponent || SecondaryButtonPrimitive, ModalComponent: ModalComponent || ModalPrimitive, environment: environment, OrganizationSelectComponent: OrganizationSelectComponent, UserManagementComponent: UserManagementComponent, SelectComponent: SelectComponent || SelectPrimitive }) }));
+export default function Portal({ publicKey, queryEndpoint, theme = defaultTheme, queryHeaders, withCredentials, environment, organizationId, TextInputComponent, ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, ModalComponent, SelectComponent, OrganizationSelectComponent, UserManagementComponent, HeaderComponent, }) {
+    return (_jsx(AdminProvider, { publicKey: publicKey, children: _jsx(Navigation, { theme: theme, publicKey: publicKey, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials, 
+            // @ts-ignore
+            TextInputComponent: TextInputComponent || TextInputPrimitive, ButtonComponent: ButtonComponent, 
+            // @ts-ignore
+            HeaderComponent: HeaderComponent || HeaderPrimitive, SecondaryButtonComponent: SecondaryButtonComponent, 
+            // @ts-ignore
+            ModalComponent: ModalComponent || ModalPrimitive, environment: environment, OrganizationSelectComponent: OrganizationSelectComponent, UserManagementComponent: UserManagementComponent, 
+            // @ts-ignore
+            SelectComponent: SelectComponent || SelectPrimitive }) }));
 }
 function Navigation({ TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, UserManagementComponent, HeaderComponent, publicKey, queryEndpoint, queryHeaders, environment, withCredentials, }) {
     const { state, dispatch } = useAdmin();
@@ -424,15 +52,21 @@ function Navigation({ TextInputComponent, ButtonComponent, SecondaryButtonCompon
     const renderComponentBasedOnName = () => {
         switch (state.activeComponent) {
             case 'Dashboards':
-                return (_jsx(DashboardManager, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, HeaderComponent: HeaderComponent, setReportId: (id) => dispatch({ type: 'SET_REPORT_ID', payload: id }), queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials }));
+                return (_jsx(DashboardManager
+                // @ts-ignore
+                , { 
+                    // @ts-ignore
+                    TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, HeaderComponent: HeaderComponent, setReportId: (id) => dispatch({ type: 'SET_REPORT_ID', payload: id }), queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials }));
             case 'SQL editor':
                 return _jsx(DashboardBuilder, {});
-            case 'Report':
-                return (_jsx(ReportWrapper, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, OrganizationSelectComponent: OrganizationSelectComponent, organizationId: state.organizationId, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials }));
             case 'SQL views':
                 return _jsx(SQLViewManager, {});
             default:
-                return (_jsx(Dashboards, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, OrganizationSelectComponent: OrganizationSelectComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, HeaderComponent: HeaderComponent, setReportId: (id) => dispatch({ type: 'SET_REPORT_ID', payload: id }), queryEndpoint: queryEndpoint, organizationId: state.organizationId, queryHeaders: queryHeaders, withCredentials: withCredentials }));
+                return (_jsx(DashboardManager
+                // @ts-ignore
+                , { 
+                    // @ts-ignore
+                    TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, HeaderComponent: HeaderComponent, setReportId: (id) => dispatch({ type: 'SET_REPORT_ID', payload: id }), queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials }));
         }
     };
     return (_jsxs("div", { style: {
@@ -533,7 +167,7 @@ function Navigation({ TextInputComponent, ButtonComponent, SecondaryButtonCompon
                 , { 
                     // organizationId={'2'}
                     // publicKey={client?._id}
-                    organizationId: state.organizationId, queryEndpoint: queryEndpoint, withCredentials: withCredentials, queryHeaders: queryHeaders, publicKey: state.client._id, environment: state.environment, theme: theme, children: renderComponentBasedOnName() }) })] }));
+                    organizationId: state.organizationId, queryEndpoint: queryEndpoint || '', withCredentials: withCredentials, queryHeaders: queryHeaders || {}, publicKey: state.client._id, environment: state.environment, theme: theme, children: renderComponentBasedOnName() }) })] }));
 }
 export const theme = {
     fontFamily: 'Inter; Helvetica',
@@ -629,172 +263,7 @@ export function getPostgresBasicType(column) {
     }
     return format;
 }
-export function classNames(...classes) {
-    return classes.filter(Boolean).join(' ');
-}
-export function AddDashboardModal({ selectedDashboard, isOpen, setIsOpen, client, ModalComponent, TextInputComponent, SelectComponent, HeaderComponent, ButtonComponent, dashNames, getDashNames, organizationId, }) {
-    const { state, dispatch } = useAdmin();
-    const [selectedDashboardName, setSelectedDashboardName] = useState(selectedDashboard?.name);
-    // const [tables] = useContext(TablesContext);
-    const [selectedTable, setSelectedTable] = useState(null);
-    const [name, setName] = useState('');
-    const [field, setField] = useState('');
-    const [filterType, setFilterType] = useState('string');
-    const [dateRange, setDateRange] = useState([new Date(), new Date()]);
-    const [newFilters, setNewFilters] = useState([]);
-    const [newDateFilter, setNewDateFilter] = useState(null);
-    useEffect(() => {
-        if (state.tables?.length) {
-            setSelectedTable(state.tables[0]);
-            // setField(tables[0].columns.map((elem) => elem.name));
-            setField(state.tables[0].columns[0].name);
-        }
-    }, [state.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 = `${QUILL_SERVER}/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 (!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 _jsx(_Fragment, {});
-    }
-    const handleAddFilter = async () => {
-        setNewFilters([...newFilters, { label: '', field }]);
-    };
-    return (_jsx(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: _jsxs("div", { children: [_jsx(TextInputComponent, { placeholder: "Enter Dashboard Name...", onChange: (e) => setSelectedDashboardName(e.target.value), value: selectedDashboardName }), _jsxs("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                    }, children: [newFilters.map((filter, index) => {
-                            return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("h2", { children: "Label" }), _jsx(TextInputComponent, { value: filter.label, onChange: (e) => {
-                                                    const updatedFilters = newFilters.map((otherFilter, i) => index === i
-                                                        ? { ...otherFilter, label: e.target.value }
-                                                        : otherFilter);
-                                                    setNewFilters(updatedFilters);
-                                                } })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("h4", { children: "Field" }), _jsx("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                    alignItems: 'center',
-                                                }, children: _jsxs("div", { style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'row',
-                                                        alignItems: 'center',
-                                                    }, children: [_jsx(SelectComponent, { defaultValue: "", value: filter && filter.field ? filter.field : '', QuillOptions: selectedTable.columns.map((column) => {
-                                                                return { label: column.name, value: column.name };
-                                                            }), onChange: (e) => {
-                                                                const updatedFilters = newFilters.map((otherFilter, i) => index === i
-                                                                    ? { ...otherFilter, field: e }
-                                                                    : otherFilter);
-                                                                setNewFilters(updatedFilters);
-                                                            } }), _jsx("div", { onClick: () => handleDeleteFilter(filter), style: {
-                                                                height: 38,
-                                                                width: 42,
-                                                                alignItems: 'center',
-                                                                justifyContent: 'center',
-                                                                display: 'flex',
-                                                            }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: _jsx("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }) })] })] }, filter.field + index));
-                        }), _jsx(ButtonComponent, { onClick: handleAddFilter, label: "Add new filter +" }), _jsx(ButtonComponent, { onClick: handleAddDashboardSubmit, label: "Add Dashboard +" })] })] }) }));
-}
-export function TableCell({ table, clickTableCell }) {
+export function TableCell({ table, clickTableCell, }) {
     const handleClickTableCell = () => {
         clickTableCell(table);
     };
@@ -816,272 +285,201 @@ export function TableCell({ table, clickTableCell }) {
                         // height: "1.3em",
                     }, children: tokens.map((line, i) => (_jsx("div", { ...getLineProps({ line, key: i }), children: line.map((token, key) => (_jsx("span", { ...getTokenProps({ token, key }) }, key))) }, i))) })) })] }, table._id));
 }
-const SchemaListComponent = ({ schema, theme }) => {
-    return (_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) => (_jsx(SchemaItem, { elem: elem, theme: theme, index: index }, elem.displayName + index))) }));
+const FakeModal = ({ children }) => (_jsx("div", { style: { height: '100%' }, children: children }));
+const FakeSQLEditorModal = ({ children, isOpen, }) => {
+    if (!isOpen)
+        return null;
+    return _jsx("div", { style: { height: '100%' }, children: children });
 };
-function SchemaItem({ elem, theme, index }) {
-    const [isOpen, setIsOpen] = 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 (_jsxs("div", { style: schemaContainerStyle, children: [_jsxs("div", { style: { ...schemaRowStyle, ...(isOpen && schemaRowHoverStyle) }, onClick: () => setIsOpen(!isOpen), children: [_jsx("p", { style: {
-                            marginLeft: theme.padding,
-                            fontSize: theme.fontSize,
-                            color: '#384151',
-                            fontWeight: '500',
-                        }, children: elem.displayName }), _jsx("div", { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            // paddingRight: 25,
-                            paddingTop: 20,
-                            paddingBottom: 20,
-                            paddingLeft: 0,
-                            cursor: 'pointer',
-                        }, children: isOpen ? (_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: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" }) })) : (_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: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })) })] }), isOpen ? (_jsx("div", { style: {
-                    paddingBottom: theme.padding,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    paddingLeft: theme.padding,
-                    paddingRight: theme.padding,
-                }, children: elem.columns.map((elem, index) => (_jsxs("div", { style: {
-                        paddingTop: theme.padding,
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                    }, children: [_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 }), _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] }));
-}
-export 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',
-        },
-    });
-}
-export function setEditorTheme(editor, monaco) {
-    try {
-        monaco.editor.setTheme('onedark');
-    }
-    catch (e) {
-        console.log('ERROR: ', e);
-    }
-}
-export function isValidDate(d) {
-    return d instanceof Date && !isNaN(d);
-}
-export const isArrayOfValidDates = (arr, field) => arr.every((d) => new Date(d[field]) instanceof Date && !isNaN(new Date(d[field])));
-export 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,
-    };
-}
-const POSTGRES_DATE_TYPES = [
-    'timestamp',
-    'date',
-    'timestamptz',
-    'time',
-    'timetz',
-];
-const FORMAT_QuillOptionS = [
-    { value: 'whole_number', label: 'whole number' },
-    { value: 'one_decimal_place', label: 'one decimal place' },
-    { value: 'dollar_amount', label: 'dollar amount' },
-    { value: 'MMM_yyyy', label: 'month' },
-    { value: 'MMM_dd-MMM_dd', label: 'week' },
-    { value: 'MMM_dd_yyyy', label: 'day' },
-    { value: 'MMM_dd_hh:mm_ap_pm', label: 'day and time' },
-    { value: 'hh_ap_pm', label: 'hour' },
-    { value: 'percent', label: 'percent' },
-    { value: 'string', label: 'string' },
-];
-function Report({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQueryOpen, SecondaryButtonComponent, ButtonComponent, deleteReport, updateQuery, OrganizationSelectComponent, ModalComponent, NavigateToDashboardBuilder, }) {
-    const { data, loading, error } = useQuill(reportId);
+function QuillReport({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQueryOpen, SecondaryButtonComponent, ButtonComponent, deleteReport, handleSave, updateQuery, OrganizationSelectComponent, ModalComponent = MemoizedModal, NavigateToDashboardBuilder, }) {
     const { state, dispatch } = useAdmin();
-    const goBack = () => {
-        // setActiveComponent("Dashboards");
-        dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'Dashboards' });
+    const { data, loading, error } = useQuill(reportId);
+    const parentRef = useRef(null);
+    const [modalWidth, setModalWidth] = useState(200);
+    const [modalHeight, setModalHeight] = useState(200);
+    const [isOpenChartBuilder, setIsOpenChartBuilder] = useState(false);
+    const handleResize = useCallback(() => {
+        const screenSize = window.innerWidth;
+        const isEditQuery = state.activeQuery && state.activeEditItem;
+        if (isOpenChartBuilder && !isEditQuery && screenSize < 1200) {
+            setModalWidth(undefined); // use dynamic width of contents
+        }
+        else {
+            setModalWidth(window.innerWidth - 80);
+        }
+        setModalHeight(window.innerHeight - 80);
+    }, [isOpenChartBuilder, state.activeQuery, state.activeEditItem]);
+    useEffect(() => {
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [handleResize]);
+    const handleSetIsOpen = (isOpen) => {
+        if (!isOpen) {
+            dispatch({
+                type: 'SET_ACTIVE_QUERY',
+                payload: '',
+            });
+            dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
+        }
+        setIsOpenChartBuilder(isOpen);
+        setIsOpen(isOpen);
     };
     if (!data || loading) {
         return null;
     }
-    if (error) {
-        return _jsx("div", { children: error });
-    }
-    return (_jsxs("div", { style: { paddingLeft: 40, paddingRight: 40 }, children: [_jsx("div", { style: {
-                    //   width: 'calc(100vw - 30px)',
-                    display: 'flex',
-                    position: 'fixed',
-                    backgroundColor: 'white',
-                    zIndex: 1,
-                    left: 0,
-                    right: 0,
-                    top: 0,
-                    flexDirection: 'row',
-                    paddingTop: 15,
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    paddingLeft: '30px',
-                    paddingRight: '30px',
-                    borderBottomWidth: 1,
-                    borderTopWidth: 0,
-                    borderLeftWidth: 0,
-                    borderRightWidth: 0,
-                    borderStyle: 'solid',
-                    borderColor: theme.borderColor,
-                    paddingBottom: 20,
-                    boxShadow: '0px 1px 4px 0px rgba(0, 0, 0, 0.07)',
-                    //   paddingRight: '50px',
-                    //   position: 'absolute'
-                    //   // zIndex: 10
-                }, children: _jsxs("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'flex-end',
-                        justifyContent: 'space-between',
-                        width: '100%',
-                        // marginLeft: '25px'
-                    }, children: [_jsxs("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                                paddingBottom: 4,
-                            }, children: [_jsx(SecondaryButtonComponent, { label: "\u2190 Back", onClick: goBack }), _jsx("h1", { style: {
-                                        fontSize: '36px',
-                                        paddingTop: '0px',
-                                        fontWeight: '600',
-                                        color: '#384151',
-                                        margin: 0,
-                                        paddingLeft: 16,
-                                    }, children: data.name })] }), _jsxs("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                            }, children: [_jsx("div", { style: { width: '20px' } }), _jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'row',
-                                            alignItems: 'flex-end',
-                                            gap: 16,
-                                        }, children: _jsx(OrgSelect, { environment: state.environment, setEnvironment: (env) => dispatch({ type: 'SET_ENVIRONMENT', payload: env }), organizations: state.organizations, organizationId: state.organizationId, setOrganizationId: (orgId) => dispatch({ type: 'SET_ORGANIZATION_ID', payload: orgId }), theme: state.theme }) }) })] })] }) }), _jsx("div", { style: { height: 240 } }), _jsx(Chart, { chartId: reportId, colors: theme.chartColors, isAnimationActive: false, containerStyle: {
-                    width: 'calc(100vw - 80px)',
-                    height: data.chartType === 'table' ? 600 : 400,
-                } }), _jsxs("div", { style: {
+    return (_jsx("div", { ref: parentRef, children: _jsx(ModalComponent, { isOpen: isOpen, setIsOpen: handleSetIsOpen, title: data.name || 'Report Detail', width: modalWidth, height: modalHeight, children: _jsxs("div", { style: {
+                    width: '100%',
+                    height: 'calc(100% - 52px)', // full height minus header height
                     display: 'flex',
-                    alignItems: 'center',
-                    gap: 16,
-                    marginTop: 20,
-                }, children: [_jsx(SecondaryButtonComponent, { label: "Edit chart", onClick: () => setIsOpen(true) }), state.navigateToDashboardBuilder && (_jsx(SecondaryButtonComponent, { label: "Edit query", onClick: () => {
-                            dispatch({ type: 'SET_ACTIVE_QUERY', payload: data.queryString });
-                            dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: data });
-                            state.navigateToDashboardBuilder();
-                        } })), _jsx(SecondaryButtonComponent, { label: "Delete", onClick: deleteReport })] }), data.chartType !== 'table' && (_jsx(QuillTable, { containerStyle: { height: 400, width: '100%', marginTop: 24 }, rows: data.rows, columns: data.columns, showDownloadCSVButton: true })), _jsx(EditVisualizationModal, { isOpen: isOpen, setIsOpen: setIsOpen, report: data, isEditMode: !!state.activeQuery, data: data.rows, query: data.queryString, columns: data.columns, fields: data.fields, state: state, goBack: goBack })] }));
+                    flexDirection: 'column',
+                    flexGrow: 1,
+                }, children: [_jsxs("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 16,
+                            padding: 15,
+                        }, children: [_jsxs("button", { style: {
+                                    height: 36,
+                                    color: theme?.secondaryTextColor,
+                                    border: '1px solid #e7e7e7',
+                                    borderRadius: 6,
+                                    outline: 'none',
+                                    cursor: 'pointer',
+                                    fontFamily: theme?.fontFamily,
+                                    fontWeight: theme?.buttonFontWeight || 500,
+                                    fontSize: 14,
+                                    padding: '0px 12px',
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: 5,
+                                }, onClick: () => {
+                                    setIsOpenChartBuilder((showEditChart) => !showEditChart);
+                                    dispatch({
+                                        type: 'SET_ACTIVE_QUERY',
+                                        payload: '',
+                                    });
+                                    dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
+                                }, className: "secondary-button-quill", children: [_jsx("style", { children: `.secondary-button-quill { background: white } .secondary-button-quill:hover { background: #F4F4F5 }` }), _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", height: 15, width: 15, children: [_jsx("path", { d: "M12 9a1 1 0 0 1-1-1V3c0-.552.45-1.007.997-.93a7.004 7.004 0 0 1 5.933 5.933c.078.547-.378.997-.93.997h-5Z" }), _jsx("path", { d: "M8.003 4.07C8.55 3.994 9 4.449 9 5v5a1 1 0 0 0 1 1h5c.552 0 1.008.45.93.997A7.001 7.001 0 0 1 2 11a7.002 7.002 0 0 1 6.003-6.93Z" })] }), "Edit chart"] }), _jsxs("button", { style: {
+                                    height: 36,
+                                    color: theme?.secondaryTextColor,
+                                    border: '1px solid #e7e7e7',
+                                    borderRadius: 6,
+                                    outline: 'none',
+                                    cursor: 'pointer',
+                                    fontFamily: theme?.fontFamily,
+                                    fontWeight: theme?.buttonFontWeight || 500,
+                                    fontSize: 14,
+                                    padding: '0px 12px',
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: 5,
+                                }, onClick: () => {
+                                    if (state.activeQuery && state.activeEditItem) {
+                                        dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
+                                        dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
+                                        return;
+                                    }
+                                    dispatch({
+                                        type: 'SET_ACTIVE_QUERY',
+                                        payload: data.queryString,
+                                    });
+                                    dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: data });
+                                }, className: "secondary-button-quill", children: [_jsx("style", { children: `.secondary-button-quill { background: white } .secondary-button-quill:hover { background: #F4F4F5 }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", height: 12, width: 12, children: _jsx("path", { d: "M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z" }) }), "Edit query"] }), _jsxs("button", { style: {
+                                    height: 36,
+                                    color: theme?.secondaryTextColor,
+                                    border: '1px solid #e7e7e7',
+                                    borderRadius: 6,
+                                    outline: 'none',
+                                    cursor: 'pointer',
+                                    fontFamily: theme?.fontFamily,
+                                    fontWeight: theme?.buttonFontWeight || 500,
+                                    fontSize: 14,
+                                    padding: '0px 12px',
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: 4,
+                                }, onClick: deleteReport, className: "secondary-button-quill", children: [_jsx("style", { children: `.secondary-button-quill { background: white } .secondary-button-quill:hover { background: #F4F4F5 }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", height: 14, width: 14, children: _jsx("path", { fillRule: "evenodd", d: "M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z", clipRule: "evenodd" }) }), "Delete"] })] }), _jsx("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            height: 'calc(100% - 66px)', // full height minus button container
+                            flexGrow: 1,
+                        }, children: _jsx("div", { style: {
+                                width: '100%',
+                                height: '100%',
+                                overflowX: 'hidden',
+                                overflowY: 'auto',
+                            }, children: state.activeEditItem && state.activeQuery ? (_jsx(QueryEditor, { onSave: handleSave })) : (_jsx(ChartEditor, { isOpen: isOpenChartBuilder, setIsOpen: setIsOpenChartBuilder, reportId: reportId, isAdmin: true, organizationName: state.organizations.find((org) => {
+                                    return (org.id &&
+                                        String(org.id) === String(state.organizationId));
+                                })?.name, onDelete: deleteReport, onAddToDashboardComplete: (report) => {
+                                    const dashboard = state.dashboards.find((dash) => {
+                                        return dash.name === report.dashboardName;
+                                    });
+                                    dispatch({
+                                        type: 'SET_SELECTED_DASHBOARD',
+                                        payload: dashboard,
+                                    });
+                                    handleSave();
+                                }, isHorizontalView: true, ModalComponent: FakeModal, ButtonComponent: MemoizedButton })) }) })] }) }) }));
 }
-function EditVisualizationModal({ isOpen, setIsOpen, report, data, isEditMode, state, goBack, }) {
-    if (!report && !data?.length) {
-        return null;
+function QueryEditor({ onSave }) {
+    const { state, dispatch } = useAdmin();
+    if (state.activeEditItem &&
+        state.activeEditItem.referencedTables &&
+        state.activeEditItem.referencedTables.length === 1 &&
+        state.activeQuery &&
+        !state.activeQuery.match(/^\s*with\s/i) &&
+        !hasColumnAlias(state.activeEditItem.columns, state.activeEditItem.referencedColumns[state.activeEditItem.referencedTables[0]] || undefined)) {
+        return (_jsx(ReportBuilder, { isAdminEnabled: true, 
+            // initialTableName={state.tables.length > 0 && state.tables[0]!.name}
+            reportId: state.activeEditItem._id, onSubmitEditReport: (report) => {
+                const dashboard = state.dashboards.find((dash) => {
+                    return dash.name === report.dashboardName;
+                });
+                dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
+                dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
+                dispatch({
+                    type: 'SET_SELECTED_DASHBOARD',
+                    payload: dashboard,
+                });
+                onSave(); // refresh the dashboard in the background
+            }, organizationName: state.organizations.find((org) => {
+                return org.id && String(org.id) === String(state.organizationId);
+            })?.name, isChartBuilderHorizontalView: true, 
+            // @ts-ignore
+            ChartBuilderModalComponent: FakeSQLEditorModal, containerStyle: {
+                height: '100%',
+                width: '100%',
+            } }));
     }
-    return (_jsx(_Fragment, { children: isOpen && (_jsxs("div", { className: "inset-0 overflow-y-auto relative", style: { zIndex: 120 }, children: [_jsx("div", { className: "absolute inset-0 bg-black/30", "aria-hidden": "true", onClick: () => setIsOpen(false) }), _jsx("div", { className: "flex min-h-full items-center justify-center p-4", children: _jsx("div", { className: "bg-white px-7 py-7 rounded-lg", children: _jsx(ChartEditor, { isOpen: isOpen, setIsOpen: setIsOpen, isEditMode: isEditMode, chartId: report._id, admin: true, organizationName: state.organizations.find((org) => {
-                                return (org.id && String(org.id) === String(state.organizationId));
-                            })?.name, onDelete: goBack }) }) })] })) }));
+    return (_jsx(SQLEditor, { isChartBuilderHorizontalView: true, isChartBuilderEnabled: true, showAccessControlOptions: true, showDateFieldOptions: true, showTableFormatOptions: true, defaultQuery: state.activeQuery, addToDashboardButtonLabel: state.activeQuery ? 'Save changes' : 'Add to dashboard', chartBuilderTitle: state.activeQuery ? 'Save changes' : 'Add to dashboard', report: state.activeQuery ? state.activeEditItem : undefined, onAddToDashboardComplete: (report) => {
+            const dashboard = state.dashboards.find((dash) => {
+                return dash.name === report.dashboardName;
+            });
+            dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
+            dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
+            dispatch({
+                type: 'SET_SELECTED_DASHBOARD',
+                payload: dashboard,
+            });
+            onSave(); // refresh the dashboard in the background
+        }, containerStyle: {
+            height: '100%',
+            width: '100%',
+        }, organizationName: state.organizations.find((org) => {
+            return org.id && String(org.id) === String(state.organizationId);
+        })?.name, 
+        // @ts-ignore
+        ModalComponent: FakeSQLEditorModal, ButtonComponent: MemoizedButton }));
 }
-export function ReportWrapper({ SecondaryButtonComponent, ButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, organizationId, queryEndpoint, queryHeaders, withCredentials, }) {
+export function ReportWrapper({ SecondaryButtonComponent, ButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, organizationId, queryEndpoint, queryHeaders, withCredentials, isOpen, setIsOpen, reloadDashboard, }) {
     const { state, dispatch } = useAdmin();
-    let [isOpen, setIsOpen] = useState(false);
     const [isEditQueryOpen, setIsEditQueryOpen] = useState(false);
     const updateQuery = async (dashboardItemId, query) => {
         if (!state.client || !dashboardItemId || !query) {
@@ -1119,7 +517,7 @@ export function ReportWrapper({ SecondaryButtonComponent, ButtonComponent, Modal
                 headers: {
                     'Content-Type': 'application/json',
                     Authorization: 'Bearer ',
-                    environment: state.environment || undefined,
+                    environment: state.environment,
                 },
                 body: JSON.stringify(requestBody),
             });
@@ -1180,7 +578,7 @@ export function ReportWrapper({ SecondaryButtonComponent, ButtonComponent, Modal
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
-                    environment: state.environment || undefined,
+                    environment: state.environment,
                 },
                 body: JSON.stringify(requestBody),
             });
@@ -1189,148 +587,11 @@ export function ReportWrapper({ SecondaryButtonComponent, ButtonComponent, Modal
         }
         if (responseData) {
             dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'Dashboards' });
+            reloadDashboard();
         }
     };
-    return (_jsx(Report, { reportId: state.reportId, updateQuery: updateQuery, isOpen: isOpen, setIsOpen: setIsOpen, isEditQueryOpen: isEditQueryOpen, setIsEditQueryOpen: setIsEditQueryOpen, deleteReport: deleteReport, SecondaryButtonComponent: SecondaryButtonComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, OrganizationSelectComponent: OrganizationSelectComponent }));
-}
-const measuringConfig = {
-    droppable: {
-        strategy: MeasuringStrategy.Always,
-    },
-};
-export function ReorderableList({ initialItems, client, itemMap, ButtonComponent, closeModal, onSave, }) {
-    const [items, setItems] = useState([]);
-    // const [client] = useContext(ClientContext);
-    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
-        coordinateGetter: sortableKeyboardCoordinates,
-    }), useSensor(TouchSensor, {
-        activationConstraint: '',
-    }));
-    useEffect(() => {
-        setItems(initialItems
-            .sort((a, b) => {
-            if (a.order === undefined && b.order === undefined)
-                return 0; // both items don't have the 'order' field
-            if (a.order === undefined)
-                return 1; // only 'a' doesn't have the 'order' field, place 'a' last
-            if (b.order === undefined)
-                return -1; // only 'b' doesn't have the 'order' field, place 'b' last
-            return a.order - b.order; // both items have the 'order' field, sort numerically
-        })
-            .map((elem) => elem._id));
-    }, [initialItems]);
-    const handleSaveChanges = async () => {
-        if (!client) {
-            return;
-        }
-        if (!items.length) {
-            return;
-        }
-        try {
-            const response = await fetch(`${QUILL_SERVER}/dashorder/`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    publicKey: client._id,
-                    orderArray: items,
-                }),
-            });
-            if (!response.ok) {
-                const errorData = await response.json();
-                throw new Error(`Error: ${errorData.error || 'Unknown error'}`);
-            }
-            const data = await response.json();
-            await onSave();
-            closeModal();
-        }
-        catch (error) {
-            console.error(error.message);
-        }
-    };
-    return (_jsxs("div", { children: [_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, measuring: measuringConfig, children: _jsx(SortableContext, { items: items, strategy: verticalListSortingStrategy, children: _jsxs("div", { style: {
-                            background: 'white',
-                            position: 'fixed',
-                            width: '100%',
-                            height: 'calc(100% - 40px)',
-                            overflowY: 'scroll',
-                            overflowX: 'hidden',
-                            maxWidth: 700,
-                        }, children: [_jsx("div", { style: { height: 80 } }), items.map((id) => (_jsx(SortableItem, { id: id, name: itemMap?.get(id).name }, id))), _jsx("div", { style: { height: 100, width: '100%' } })] }) }) }), _jsx("div", { style: {
-                    height: 80,
-                    paddingTop: 20,
-                    width: '100%',
-                    background: 'white',
-                    position: 'absolute',
-                    bottom: -20,
-                    left: 0,
-                    right: 0,
-                }, children: _jsx(ButtonComponent, { onClick: handleSaveChanges, label: "Save changes" }) })] }));
-    function handleDragEnd(event) {
-        const { active, over } = event;
-        if (!over?.id || !active?.id) {
-            return;
-        }
-        if (active.id !== over.id) {
-            setItems((items) => {
-                const oldIndex = items.indexOf(active.id);
-                const newIndex = items.indexOf(over.id);
-                return arrayMove(items, oldIndex, newIndex);
-            });
-        }
-    }
-}
-const animateLayoutChanges = (args) => args.isSorting || args.wasDragging ? defaultAnimateLayoutChanges(args) : true;
-function SortableItem({ id, name }) {
-    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
-        animateLayoutChanges,
-        id: id,
-    });
-    let height = 50;
-    const style = {
-        transform: CSS.Translate.toString(transform),
-        transition,
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        borderRadius: '10px',
-        border: '1px solid #E7E7E7',
-        boxShadow: '0px 2px 8px 0px rgba(56, 65, 81, 0.08)',
-        cursor: 'grab',
-        userSelect: 'none',
-        marginBottom: 20,
-        background: 'white',
+    const handleSave = () => {
+        reloadDashboard();
     };
-    return (_jsx("div", { ref: setNodeRef, style: style, ...attributes, children: _jsxs("div", { style: {
-                cursor: 'pointer',
-                width: '100%',
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                height: 260,
-            }, ...listeners, children: [_jsxs("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        justifyContent: 'space-between',
-                        height: 260,
-                        paddingTop: 20,
-                        paddingBottom: 20,
-                        width: '100%',
-                    }, children: [_jsx("div", { style: {
-                                minWidth: 600,
-                                width: '100%',
-                                paddingLeft: 20,
-                                fontSize: 18,
-                                fontWeight: '500',
-                            }, children: name }), _jsx(Chart, { chartId: id, containerStyle: {
-                                height: 180,
-                                width: '100%',
-                            } })] }), _jsx("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        paddingRight: 20,
-                        paddingLeft: 20,
-                    }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "#6D727E", height: 24, width: 24, children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" }) }) })] }) }));
+    return (_jsx(QuillReport, { reportId: state.reportId, updateQuery: updateQuery, isOpen: isOpen, setIsOpen: setIsOpen, isEditQueryOpen: isEditQueryOpen, setIsEditQueryOpen: setIsEditQueryOpen, deleteReport: deleteReport, handleSave: handleSave, SecondaryButtonComponent: SecondaryButtonComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, OrganizationSelectComponent: OrganizationSelectComponent }));
 }