@quillsql/admin 1.3.3 → 1.3.6

package/dist/esm/Admin.js

@@ -0,0 +1,1387 @@
+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, Table, SQLEditor, AddToDashboardModal, ChartEditor, useDashboard, } 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 { AdminProvider, useAdmin } from './AdminProvider';
+import { ButtonPrimitive, HeaderPrimitive, ModalPrimitive, SecondaryButtonPrimitive, SelectPrimitive, TextInputPrimitive, } from './primitives';
+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';
+const defaultTheme = {
+    fontFamily: 'Inter; Helvetica',
+    backgroundColor: '#FFFFFF',
+    primaryTextColor: '#364153',
+    secondaryTextColor: '#6C727F',
+    chartLabelFontFamily: 'Inter; Helvetica',
+    chartLabelColor: '#666666',
+    chartTickColor: '#CCCCCC',
+    // chartColors: ["#6269E9", "#E14F62"],
+    borderColor: '#E5E7EB',
+    primaryButtonColor: '#364153',
+    borderWidth: 1,
+    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);
+    }, [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: '', 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;
+        }
+        const url = `${QUILL_SERVER}/dashfilter/${client._id}/`;
+        const body = {
+            newDashboardName: selectedDashboardName,
+            filters: updatedFilters,
+            dateFilter: {
+                ...newDateFilter,
+                comparison: isDateComparison,
+                primaryRange: initialRange,
+            },
+            name: selectedDashboard,
+        };
+        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({});
+    };
+    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 }),
+            });
+            setIsOpen(false);
+            setNewFilters([]);
+            await onSave();
+        }
+    };
+    return (_jsx(ModalComponent, { isOpen: isOpen, close: () => {
+            setIsOpen(false);
+            setNewFilters([]);
+            setIsDateComparison(state.dateFilter.comparison);
+        }, 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);
+                                                    } })] }), _jsxs("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                maxWidth: 300,
+                                            }, children: [index === 0 && _jsx(InputLabel, { children: "Table" }), _jsx(SelectComponent, { defaultValue: "", value: selectedTable ? selectedTable.name : '', onChange: (e) => setSelectedTable(state.tables.find((table) => table.name === e)), options: state.tables.map((table) => {
+                                                        return { label: table.name, value: table.name };
+                                                    }) })] }), _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: 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',
+                                                                    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" }) }) })] }) })] })] }));
+                            }) })), _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 }) }));
+}
+function Navigation({ TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, UserManagementComponent, HeaderComponent, publicKey, queryEndpoint, queryHeaders, environment, withCredentials, }) {
+    const { state, dispatch } = useAdmin();
+    // MMTODO: Idk if this is needed
+    // useEffect(() => {
+    //     setEnvironmentContext(environment);
+    // }, [environment]);
+    if (!state.client) {
+        return null;
+    }
+    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 }));
+            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 (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100vh',
+            width: '100vw',
+        }, children: [_jsxs("nav", { style: {
+                    zIndex: 2,
+                    height: '70px',
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    backgroundColor: 'white',
+                    padding: '0',
+                    position: 'fixed',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    borderBottomWidth: 1,
+                    borderTopWidth: 0,
+                    borderLeftWidth: 0,
+                    borderRightWidth: 0,
+                    borderStyle: 'solid',
+                    borderColor: theme.borderColor,
+                }, children: [_jsx("div", { style: {
+                            paddingTop: '18px',
+                            paddingLeft: '14px',
+                            paddingBottom: '18px',
+                            width: 230,
+                        }, children: _jsxs("svg", { width: "45", height: "18", viewBox: "0 0 45 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("g", { clipPath: "url(#clip0_2489_282)", children: _jsx("path", { d: "M18.634 17.3008H9.196C7.97867 17.3008 6.84933 17.1248 5.808 16.7728C4.78133 16.4061 3.894 15.8781 3.146 15.1888C2.398 14.4994 1.81133 13.6634 1.386 12.6808C0.960667 11.6981 0.748 10.5761 0.748 9.31478C0.748 8.14145 0.960667 7.06345 1.386 6.08078C1.826 5.09811 2.42 4.25478 3.168 3.55078C3.916 2.84678 4.796 2.30411 5.808 1.92278C6.82 1.52678 7.90533 1.32878 9.064 1.32878C10.2227 1.32878 11.308 1.52678 12.32 1.92278C13.332 2.31878 14.212 2.86878 14.96 3.57278C15.708 4.27678 16.2947 5.12011 16.72 6.10278C17.16 7.07078 17.38 8.14145 17.38 9.31478C17.38 9.87211 17.314 10.4148 17.182 10.9428C17.0647 11.4708 16.8813 11.9694 16.632 12.4388C16.3827 12.9081 16.06 13.3334 15.664 13.7148C15.268 14.0814 14.806 14.3821 14.278 14.6168V14.6608H18.634V17.3008ZM4.312 9.31478C4.312 9.98945 4.43667 10.6201 4.686 11.2068C4.93533 11.7934 5.27267 12.3068 5.698 12.7468C6.138 13.1721 6.644 13.5094 7.216 13.7588C7.788 14.0081 8.404 14.1328 9.064 14.1328C9.724 14.1328 10.34 14.0081 10.912 13.7588C11.484 13.5094 11.9827 13.1721 12.408 12.7468C12.848 12.3068 13.1927 11.7934 13.442 11.2068C13.6913 10.6201 13.816 9.98945 13.816 9.31478C13.816 8.64011 13.6913 8.00945 13.442 7.42278C13.1927 6.83611 12.848 6.33011 12.408 5.90478C11.9827 5.46478 11.484 5.12011 10.912 4.87078C10.34 4.62145 9.724 4.49678 9.064 4.49678C8.404 4.49678 7.788 4.62145 7.216 4.87078C6.644 5.12011 6.138 5.46478 5.698 5.90478C5.27267 6.33011 4.93533 6.83611 4.686 7.42278C4.43667 8.00945 4.312 8.64011 4.312 9.31478ZM29.3164 17.3008H26.1484V15.8488H26.1044C25.987 16.0541 25.833 16.2594 25.6424 16.4648C25.4664 16.6701 25.2464 16.8534 24.9824 17.0148C24.7184 17.1761 24.4177 17.3081 24.0804 17.4108C23.743 17.5134 23.3764 17.5648 22.9804 17.5648C22.1444 17.5648 21.4624 17.4401 20.9344 17.1908C20.421 16.9268 20.0177 16.5674 19.7244 16.1128C19.4457 15.6581 19.255 15.1228 19.1524 14.5068C19.0644 13.8908 19.0204 13.2234 19.0204 12.5048V6.60878H22.3204V11.8448C22.3204 12.1528 22.3277 12.4754 22.3424 12.8128C22.3717 13.1354 22.4377 13.4361 22.5404 13.7148C22.6577 13.9934 22.8264 14.2208 23.0464 14.3968C23.281 14.5728 23.611 14.6608 24.0364 14.6608C24.4617 14.6608 24.8064 14.5874 25.0704 14.4408C25.3344 14.2794 25.5324 14.0741 25.6644 13.8248C25.811 13.5608 25.9064 13.2674 25.9504 12.9448C25.9944 12.6221 26.0164 12.2848 26.0164 11.9328V6.60878H29.3164V17.3008ZM30.8172 6.60878H34.1172V17.3008H30.8172V6.60878ZM30.5532 3.24278C30.5532 2.71478 30.7365 2.26745 31.1032 1.90078C31.4845 1.51945 31.9392 1.32878 32.4672 1.32878C32.9952 1.32878 33.4425 1.51945 33.8092 1.90078C34.1905 2.26745 34.3812 2.71478 34.3812 3.24278C34.3812 3.77078 34.1905 4.22545 33.8092 4.60678C33.4425 4.97345 32.9952 5.15678 32.4672 5.15678C31.9392 5.15678 31.4845 4.97345 31.1032 4.60678C30.7365 4.22545 30.5532 3.77078 30.5532 3.24278ZM35.652 0.66878H38.952V17.3008H35.652V0.66878ZM40.4869 0.66878H43.7869V17.3008H40.4869V0.66878Z", fill: "#212121" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_2489_282", children: _jsx("rect", { width: "45", height: "18", fill: "white" }) }) })] }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row' }, children: [_jsx("button", { style: {
+                                    color: '#212121',
+                                    backgroundColor: state.activeComponent === 'Dashboards'
+                                        ? '#2121210A'
+                                        : 'transparent',
+                                    padding: '8px 12px',
+                                    height: '38px',
+                                    marginBottom: '4px',
+                                    fontWeight: 'bold',
+                                    fontSize: '0.875rem',
+                                    borderRadius: '4px',
+                                    transition: 'background-color 0.3s',
+                                    border: 'none',
+                                    outline: 'none',
+                                }, 
+                                // onClick={() => setActiveComponent("Dashboards")}
+                                onClick: () => dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'Dashboards' }), children: "Dashboards" }), _jsx("button", { style: {
+                                    color: '#212121',
+                                    backgroundColor: state.activeComponent === 'SQL editor'
+                                        ? '#2121210A'
+                                        : 'transparent',
+                                    padding: '8px 12px',
+                                    height: '38px',
+                                    marginBottom: '4px',
+                                    fontWeight: 'bold',
+                                    fontSize: '0.875rem',
+                                    borderRadius: '4px',
+                                    transition: 'background-color 0.3s',
+                                    border: 'none',
+                                    outline: 'none',
+                                }, 
+                                // onClick={() => setActiveComponent("SQL editor")}
+                                onClick: () => dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'SQL editor' }), children: "SQL editor" }), _jsx("button", { style: {
+                                    color: '#212121',
+                                    backgroundColor: state.activeComponent === 'SQL views'
+                                        ? '#2121210A'
+                                        : 'transparent',
+                                    padding: '8px 12px',
+                                    height: '38px',
+                                    marginBottom: '4px',
+                                    fontWeight: 'bold',
+                                    fontSize: '0.875rem',
+                                    borderRadius: '4px',
+                                    transition: 'background-color 0.3s',
+                                    border: 'none',
+                                    outline: 'none',
+                                }, 
+                                // onClick={() => setActiveComponent("SQL views")}
+                                onClick: () => dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'SQL views' }), children: "SQL views" })] }), _jsx("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            minHeight: '50px',
+                            justifyContent: 'flex-end',
+                            alignItems: 'center',
+                            paddingRight: '8px',
+                            width: 230,
+                        }, children: UserManagementComponent && _jsx(UserManagementComponent, {}) })] }), _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    width: '100%',
+                    // marginTop: activeComponent !== 'Report' ? '70px' : undefined
+                }, children: _jsx(QuillProvider
+                // organizationId={'2'}
+                // publicKey={client?._id}
+                , { 
+                    // 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() }) })] }));
+}
+export const theme = {
+    fontFamily: 'Inter; Helvetica',
+    backgroundColor: '#FFFFFF',
+    primaryTextColor: '#364153',
+    secondaryTextColor: '#6C727F',
+    chartLabelFontFamily: 'Inter; Helvetica',
+    chartLabelColor: '#666666',
+    chartTickColor: '#CCCCCC',
+    chartColors: ['#6269E9', '#E14F62', '#55B5A6', '#E9A23B', '#D0ACCF'],
+    borderColor: '#E5E7EB',
+    labelFontWeight: 500,
+    fontSize: 14,
+    borderWidth: 1,
+    primaryButtonColor: '#212121',
+    primaryButtonTextColor: '#FFFFFF',
+};
+export function convertPostgresColumn(column) {
+    let format;
+    switch (column.dataTypeID) {
+        case 20: // int8
+        case 21: // int2
+        case 23: // int4
+            format = 'whole_number';
+            break;
+        case 700: // float4
+        case 701: // float8
+        case 1700: // numeric
+            format = 'two_decimal_places';
+            break;
+        case 1082: // date
+        case 1083: // time
+        case 1184: // timestamptz
+        case 1114: // timestamp
+            format = 'MMM_dd_yyyy';
+            break;
+        case 1043: // varchar
+        default:
+            format = 'string';
+    }
+    return {
+        label: column.name,
+        field: column.name,
+        format: format,
+    };
+}
+export function getPostgresBasicType(column) {
+    let format;
+    // first check if column.dataTypeID exists
+    if (column.dataTypeID) {
+        switch (column.dataTypeID) {
+            case 20: // int8
+            case 21: // int2
+            case 23: // int4
+            case 700: // float4
+            case 701: // float8
+            case 1700: // numeric
+                format = 'number';
+                break;
+            case 1082: // date
+            case 1083: // time
+            case 1184: // timestamptz
+            case 1114: // timestamp
+                format = 'date';
+                break;
+            case 1043: // varchar
+            default:
+                format = 'string';
+        }
+    }
+    else if (column.fieldType) {
+        // if column.dataTypeID doesn't exist, check column.fieldType
+        switch (column.fieldType) {
+            case 'int8':
+            case 'int2':
+            case 'int4':
+            case 'float4':
+            case 'float8':
+            case 'numeric':
+                format = 'number';
+                break;
+            case 'date':
+            case 'time':
+            case 'timestamptz':
+            case 'timestamp':
+                format = 'date';
+                break;
+            case 'varchar':
+            default:
+                format = 'string';
+        }
+    }
+    return format;
+}
+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 }) {
+    const handleClickTableCell = () => {
+        clickTableCell(table);
+    };
+    return (_jsxs("div", { onClick: handleClickTableCell, style: {
+            marginBottom: '54px',
+            flex: 1,
+            minWidth: '540px',
+            maxWidth: '540px',
+            cursor: 'pointer',
+        }, children: [_jsx("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: _jsx("h3", { style: { color: '#384151' }, children: table.displayName }) }), _jsx(Highlight, { ...defaultProps, theme: prismTheme, code: table.viewQuery, language: "sql", children: ({ className, style, tokens, getLineProps, getTokenProps }) => (_jsx("pre", { className: className, style: {
+                        ...style,
+                        textAlign: 'left',
+                        margin: '1em 0',
+                        padding: '0.5em',
+                        overflow: 'auto',
+                        maxHeight: 120,
+                        maxWidth: 520,
+                        // lineHeight: "1.3em",
+                        // 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.displayName));
+}
+export const SQLEditorComponent = ({ query, setQuery, 
+// handleRunQuery,
+theme,
+// defineEditorTheme,
+// setEditorTheme,
+ }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [rows, setRows] = useState([]);
+    const [columns, setColumns] = useState([]);
+    const [fields, setFields] = useState([]);
+    // const [activeQuery] = useContext(ActiveQueryContext);
+    const { state, dispatch } = useAdmin();
+    return (_jsxs("div", { style: {
+            background: theme.backgroundColor,
+            // maxHeight: 700,
+            // width: "100%",
+            minWidth: 450,
+            // overflowY: "scroll",
+            // padding: "20px 30px 20px 20px",
+            // marginLeft: 20,
+            borderRadius: 6,
+            overflow: 'hidden',
+        }, children: [_jsx(SQLEditor, { containerStyle: { height: 'calc(100vh - 270px)', width: '100%' }, onChangeQuery: (query) => setQuery(query), onChangeData: (data) => setRows(data), onChangeColumns: (columns) => setColumns(columns), onChangeFields: (fields) => setFields(fields), defaultQuery: state.activeQuery ? state.activeQuery : '' }), rows.length > 0 && (_jsx("button", { style: {
+                    height: 36,
+                    marginLeft: 250,
+                    marginTop: 20,
+                    background: theme.primaryButtonColor,
+                    color: theme.backgroundColor,
+                    display: 'flex',
+                    borderRadius: 6,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    outline: 'none',
+                    cursor: 'pointer',
+                    fontFamily: theme.fontFamily,
+                    fontWeight: theme.buttonFontWeight || 600,
+                    border: 'none',
+                    fontSize: 14,
+                    paddingLeft: 20,
+                    paddingRight: 20,
+                }, onClick: () => setIsOpen(true), children: "Add to dashboard" })), _jsx(AddToDashboardModal, { isOpen: isOpen, setIsOpen: setIsOpen, rows: rows, columns: columns, query: query, showTableFormatQuillOptions: true, showDateFieldQuillOptions: true, showAccessControlQuillOptions: true, fields: fields })] }));
+};
+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))) }));
+};
+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);
+    const { state, dispatch } = useAdmin();
+    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");
+        dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'Dashboards' });
+    };
+    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: {
+                    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(Table, { containerStyle: { height: 400, width: '100%', marginTop: 24 }, chartId: reportId })), _jsx(EditVisualizationModal, { isOpen: isOpen, setIsOpen: setIsOpen, report: data, isEditMode: !!state.activeQuery, data: data.rows, query: data.queryString, columns: data.columns, fields: data.fields })] }));
+}
+function EditVisualizationModal({ isOpen, setIsOpen, report, data, isEditMode, }) {
+    if (!report && !data?.length) {
+        return null;
+    }
+    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 }) }) })] })) }));
+}
+export function ReportWrapper({ SecondaryButtonComponent, ButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, organizationId, queryEndpoint, queryHeaders, withCredentials, }) {
+    const { state, dispatch } = useAdmin();
+    let [isOpen, setIsOpen] = useState(false);
+    const [isEditQueryOpen, setIsEditQueryOpen] = useState(false);
+    const updateQuery = async (dashboardItemId, query) => {
+        if (!state.client || !dashboardItemId || !query) {
+            return;
+        }
+        let responseData;
+        if (queryEndpoint) {
+            const response = await fetch(queryEndpoint, {
+                method: 'POST',
+                headers: {
+                    ...queryHeaders,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    metadata: {
+                        task: 'edit_query',
+                        id: state.reportId,
+                        query,
+                        ...(organizationId && { orgId: organizationId }),
+                    },
+                }),
+                credentials: withCredentials ? 'include' : 'omit',
+            });
+            responseData = await response.json();
+        }
+        else {
+            const url = `${QUILL_SERVER}/updatequery/${state.client._id}/${organizationId}/`;
+            const requestBody = {
+                dashboardItemId,
+                query,
+            };
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: 'Bearer ',
+                    environment: state.environment || undefined,
+                },
+                body: JSON.stringify(requestBody),
+            });
+            responseData = await response.json();
+        }
+        if (responseData) {
+            if (responseData.error) {
+                alert(`Failed to save query. ${typeof responseData.error === 'string'
+                    ? responseData.error
+                    : responseData.error?.routine === 'errorMissingColumn'
+                        ? "A column was referenced that doesn't exist."
+                        : responseData.error?.routine
+                            ? responseData.error?.routine
+                            : 'Error parsing SQL query'}`);
+                return;
+            }
+            setIsEditQueryOpen(false);
+        }
+    };
+    const deleteReport = async () => {
+        if (!state.reportId) {
+            return;
+        }
+        if (!state.client) {
+            return;
+        }
+        if (!confirm('Are you sure?')) {
+            return;
+        }
+        let responseData;
+        if (queryEndpoint) {
+            const response = await fetch(queryEndpoint, {
+                method: 'POST',
+                headers: {
+                    ...queryHeaders,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    metadata: organizationId
+                        ? {
+                            orgId: organizationId,
+                            task: 'delete',
+                            dashboardItemId: state.reportId,
+                            clientId: state.client._id,
+                        }
+                        : {
+                            task: 'delete',
+                            dashboardItemId: state.reportId,
+                            clientId: state.client._id,
+                        },
+                }),
+                credentials: withCredentials ? 'include' : 'omit', // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
+            });
+            responseData = await response.json(); // If the server returns JSON data
+        }
+        else {
+            const url = `${QUILL_SERVER}/deletedash/${state.client._id}/${organizationId}/`;
+            const requestBody = {
+                dashboardItemId: state.reportId,
+            };
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    environment: state.environment || undefined,
+                },
+                body: JSON.stringify(requestBody),
+            });
+            // To get JSON data from the response:
+            responseData = await response.json();
+        }
+        if (responseData) {
+            dispatch({ type: 'SET_ACTIVE_COMPONENT', payload: 'Dashboards' });
+        }
+    };
+    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',
+    };
+    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" }) }) })] }) }));
+}