@quillsql/admin 1.3.9 → 1.5.2

package/dist/esm/public_components/DashboardManager.js

@@ -10,6 +10,7 @@ import { NewDashboardModal } from '../modals/NewDashboardModal';
 import { QUILL_SERVER } from '../utils/constants';
 import EmptyDashboardComponent from '../components/EmptyDashboardComponent';
 import DatabaseMismatchCard from '../components/DatabaseMismatchCard';
+import { MemoizedModal } from '../components/UiComponents';
 export default function DashboardManager({ navigateToDashboardBuilder, containerStyle, }) {
     const { state, dispatch } = useAdmin();
     const parentRef = useRef(null);
@@ -109,13 +110,15 @@ export default function DashboardManager({ navigateToDashboardBuilder, container
                         ...state.queryHeaders,
                         'Content-Type': 'application/json',
                     },
-                    body: JSON.stringify({ metadata: {
+                    body: JSON.stringify({
+                        metadata: {
                             orgId: state.organizationId || '*',
                             task: 'config',
                             name: dashboard,
                             clientId: state.client._id,
                             databaseType: state.client.databaseType,
-                        } }),
+                        },
+                    }),
                     credentials: state.withCredentials ? 'include' : 'omit', // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
                 });
                 responseData = (await response.json()).data;
@@ -155,168 +158,169 @@ export default function DashboardManager({ navigateToDashboardBuilder, container
         state.organizationId,
         state.client,
     ]);
-    if (state.activeComponent == 'Report') {
-        return (_jsx(ReportWrapper, { ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, ModalComponent: ModalPrimitive, SelectComponent: SelectPrimitive, OrganizationSelectComponent: OrgSelect, organizationId: state.organizationId, queryEndpoint: state.queryEndpoint, queryHeaders: state.queryHeaders, withCredentials: state.withCredentials }));
-    }
-    return (_jsx("div", { style: containerStyle, children: _jsxs("div", { style: {
-                display: 'flex',
-                flexDirection: 'column',
-                paddingTop: '0px',
-                position: 'relative',
-            }, ref: parentRef, children: [_jsx("div", { style: {
-                        //   width: 'calc(100vw - 30px)',
-                        display: 'flex',
-                        position: 'sticky',
-                        backgroundColor: 'white',
-                        zIndex: 3,
-                        left: 0,
-                        right: 0,
-                        top: 0,
-                        flexDirection: 'row',
-                        paddingTop: 12,
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        paddingLeft: '30px',
-                        paddingRight: '30px',
-                        borderBottomWidth: 1,
-                        borderTopWidth: 0,
-                        borderLeftWidth: 0,
-                        borderRightWidth: 0,
-                        borderStyle: 'solid',
-                        borderColor: state.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: {
-                            width: '100%',
+    return (_jsxs("div", { style: containerStyle, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    paddingTop: '0px',
+                    position: 'relative',
+                }, ref: parentRef, children: [_jsx("div", { style: {
+                            //   width: 'calc(100vw - 30px)',
                             display: 'flex',
+                            position: 'sticky',
+                            backgroundColor: 'white',
+                            zIndex: 3,
+                            left: 0,
+                            right: 0,
+                            top: 0,
                             flexDirection: 'row',
-                            alignItems: 'flex-end',
+                            paddingTop: 12,
+                            alignItems: 'center',
                             justifyContent: 'space-between',
-                        }, children: [_jsxs("div", { style: { gap: 16, display: 'flex', flexDirection: 'row' }, children: [!!state.dashboards.length && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("h1", { style: {
-                                                    fontSize: '14px',
-                                                    paddingTop: '0px',
-                                                    marginTop: '0px',
-                                                    marginBottom: '4px',
-                                                    fontWeight: '600',
-                                                    color: state.theme.secondaryTextColor,
-                                                    userSelect: 'none',
-                                                }, children: "Dashboard" }), _jsx(DashboardSelectPopover, { dashboards: state.dashboards.length
-                                                    ? state.dashboards.map((elem) => {
-                                                        return { value: elem.name, label: elem.name };
-                                                    })
-                                                    : [], setDashboard: (dashboard) => {
-                                                    dispatch({
-                                                        type: 'SET_SELECTED_DASHBOARD',
-                                                        payload: dashboard,
-                                                    });
-                                                }, dashboard: state.selectedDashboard ? state.selectedDashboard : '', theme: state.theme, onClickNewDashboard: () => {
-                                                    setNewDashboardModalIsOpen(true);
-                                                }, setSelectedEditDashboard: (d) => {
-                                                    dispatch({
-                                                        type: 'SET_SELECTED_EDIT_DASHBOARD',
-                                                        payload: d,
-                                                    });
-                                                    setEditFilterModalIsOpen(true);
-                                                } })] })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("h1", { style: {
-                                                    fontSize: '14px',
-                                                    paddingTop: '0px',
-                                                    marginTop: '0px',
-                                                    marginBottom: '4px',
-                                                    fontWeight: '600',
-                                                    color: state.theme.secondaryTextColor,
-                                                    fontFamily: state.theme.fontFamily,
-                                                    userSelect: 'none',
-                                                }, children: "Environment" }), _jsx(EnvSelectPopover, { setEnvironment: (env) => dispatch({ type: 'SET_ENVIRONMENT', payload: env }), environment: state.environment, clients: state.clients, client: state.client, setClient: (client) => dispatch({ type: 'SET_CLIENT', payload: client }), theme: state.theme, showPromote: true, handlePromote: () => setIsPromoteDashModalOpen(true) })] })] }), !!state.dashboards.length && !state.databaseTypeMismatch.show && (_jsx(OrgSelect, { parentRef: parentRef, environment: state.environment, setEnvironment: (env) => dispatch({ type: 'SET_ENVIRONMENT', payload: env }), organizations: state.organizations, theme: state.theme, organizationId: state.organizationId, setOrganizationId: (id) => dispatch({ type: 'SET_ORGANIZATION_ID', payload: id }) }))] }) }), state.databaseTypeMismatch.show ? (_jsx(DatabaseMismatchCard, { environemntName: state.client.name, environemntDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'inline-block' }, children: [!state.dashboards.length && !initialLoad && (_jsx("div", { style: {
-                                        width: '100%',
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        alignItems: 'center',
-                                    }, children: _jsxs("div", { style: {
-                                            height: 80,
-                                            width: 260,
-                                            borderRadius: 6,
-                                            marginTop: 100,
+                            paddingLeft: '30px',
+                            paddingRight: '30px',
+                            borderBottomWidth: 1,
+                            borderTopWidth: 0,
+                            borderLeftWidth: 0,
+                            borderRightWidth: 0,
+                            borderStyle: 'solid',
+                            borderColor: state.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: {
+                                width: '100%',
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'flex-end',
+                                justifyContent: 'space-between',
+                            }, children: [_jsxs("div", { style: { gap: 16, display: 'flex', flexDirection: 'row' }, children: [!!state.dashboards.length && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("h1", { style: {
+                                                        fontSize: '14px',
+                                                        paddingTop: '0px',
+                                                        marginTop: '0px',
+                                                        marginBottom: '4px',
+                                                        fontWeight: '600',
+                                                        color: state.theme.secondaryTextColor,
+                                                        userSelect: 'none',
+                                                    }, children: "Dashboard" }), _jsx(DashboardSelectPopover, { dashboards: state.dashboards.length
+                                                        ? state.dashboards.map((elem) => {
+                                                            return { value: elem.name, label: elem.name };
+                                                        })
+                                                        : [], setDashboard: (dashboard) => {
+                                                        dispatch({
+                                                            type: 'SET_SELECTED_DASHBOARD',
+                                                            payload: dashboard,
+                                                        });
+                                                    }, dashboard: state.selectedDashboard ? state.selectedDashboard : '', theme: state.theme, onClickNewDashboard: () => {
+                                                        setNewDashboardModalIsOpen(true);
+                                                    }, setSelectedEditDashboard: (d) => {
+                                                        dispatch({
+                                                            type: 'SET_SELECTED_EDIT_DASHBOARD',
+                                                            payload: d,
+                                                        });
+                                                        setEditFilterModalIsOpen(true);
+                                                    } })] })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("h1", { style: {
+                                                        fontSize: '14px',
+                                                        paddingTop: '0px',
+                                                        marginTop: '0px',
+                                                        marginBottom: '4px',
+                                                        fontWeight: '600',
+                                                        color: state.theme.secondaryTextColor,
+                                                        fontFamily: state.theme.fontFamily,
+                                                        userSelect: 'none',
+                                                    }, children: "Environment" }), _jsx(EnvSelectPopover, { setEnvironment: (env) => dispatch({ type: 'SET_ENVIRONMENT', payload: env }), environment: state.environment, clients: state.clients, client: state.client, setClient: (client) => dispatch({ type: 'SET_CLIENT', payload: client }), theme: state.theme, showPromote: true, handlePromote: () => setIsPromoteDashModalOpen(true) })] })] }), !!state.dashboards.length && !state.databaseTypeMismatch.show && (_jsx(OrgSelect, { parentRef: parentRef, environment: state.environment, setEnvironment: (env) => dispatch({ type: 'SET_ENVIRONMENT', payload: env }), organizations: state.organizations, theme: state.theme, organizationId: state.organizationId, setOrganizationId: (id) => dispatch({ type: 'SET_ORGANIZATION_ID', payload: id }) }))] }) }), state.databaseTypeMismatch.show ? (_jsx(DatabaseMismatchCard, { environemntName: state.client.name, environemntDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'inline-block' }, children: [!state.dashboards.length && !initialLoad && (_jsx("div", { style: {
+                                            width: '100%',
                                             display: 'flex',
                                             flexDirection: 'column',
                                             alignItems: 'center',
-                                            justifyContent: 'center',
-                                            gap: 20,
-                                        }, className: "hover-dash-rect", onClick: () => {
-                                            setNewDashboardModalIsOpen(true);
-                                        }, children: [_jsx("style", { children: ` .hover-dash-rect { background: white; border: 1px dashed #e7e7e7; } .hover-dash-rect:hover { background: white; box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.07); border: 1px solid #e7e7e7; } ` }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'row',
-                                                    alignItems: 'center',
-                                                    justifyContent: 'center',
-                                                    width: 260,
-                                                }, children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#565656", height: 26, width: 26, children: [_jsx("path", { fillRule: "evenodd", d: "M2.25 13.5a8.25 8.25 0 0 1 8.25-8.25.75.75 0 0 1 .75.75v6.75H18a.75.75 0 0 1 .75.75 8.25 8.25 0 0 1-16.5 0Z", clipRule: "evenodd" }), _jsx("path", { fillRule: "evenodd", d: "M12.75 3a.75.75 0 0 1 .75-.75 8.25 8.25 0 0 1 8.25 8.25.75.75 0 0 1-.75.75h-7.5a.75.75 0 0 1-.75-.75V3Z", clipRule: "evenodd" })] }), _jsx("div", { style: {
-                                                            fontSize: 14,
-                                                            fontWeight: 500,
-                                                            color: '#565656',
-                                                            // border: '1px solid #e7e7e7',
-                                                            paddingTop: 8,
-                                                            paddingBottom: 8,
-                                                            paddingRight: 12,
-                                                            paddingLeft: 12,
-                                                            borderRadius: 4,
-                                                            cursor: 'pointer',
-                                                        }, className: "quill-hover-button", children: "Create new dashboard" })] })] }) })), reloadFlag ? null : (_jsx(Dashboard, { name: state.selectedDashboard, containerStyle: {
-                                        paddingRight: 25,
-                                        paddingLeft: 25,
-                                        paddingTop: 30,
-                                    }, onClickDashboardItem: (elem) => {
-                                        dispatch({ type: 'SET_REPORT_ID', payload: elem._id });
-                                        dispatch({
-                                            type: 'SET_ACTIVE_COMPONENT',
-                                            payload: 'Report',
-                                        });
-                                    }, EmptyDashboardComponent: EmptyDashboardComponent }))] }), _jsx(EditDashboardsModal, { clientId: state.client._id, isOpen: isEditDashboardModalOpen, setIsOpen: setIsEditDashboardModalOpen, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, TextInputComponent: TextInputPrimitive, openEditFilterModal: (dashboardName) => {
-                                dispatch({
-                                    type: 'SET_SELECTED_EDIT_DASHBOARD',
-                                    payload: dashboardName,
-                                });
-                                setEditFilterModalIsOpen(true);
-                                // setIsEditDashboardModalOpen(false);
-                            }, openAddDashboardModal: () => {
-                                setIsAddDashboardModalOpen(true);
-                                // setIsEditDashboardModalOpen(false);
-                            }, openEditOrderModal: (dashboardName) => {
-                                setSelectedReorderDashboard(dashboardName);
-                                setIsReorderDashboardModalOpen(true);
-                            }, HeaderComponent: HeaderPrimitive, setDashboardData: setDashboardData, dashboards: state.dashboards, getDashNames: getDashNames }), _jsx(PromoteDashModal, { clientId: state.client._id, client: state.client, clients: state.clients, isOpen: isPromoteDashModalOpen, setIsOpen: setIsPromoteDashModalOpen, ModalComponent: ModalPrimitive, dashboards: state.dashboards, selectedDashboard: state.selectedDashboard, theme: state.theme, ButtonComponent: ButtonPrimitive }), _jsx(EditFiltersModal, { selectedDashboard: state.selectedDashboard, dashboardData: state.editDashboardData, isOpen: editFilterModalIsOpen, setIsOpen: setEditFilterModalIsOpen, openAddFilterModal: () => {
-                                setAddFilterModalIsOpen(true);
-                                // setEditFilterModalIsOpen(false);
-                            }, openEditOrderModal: (dashboardName) => {
-                                setSelectedReorderDashboard(dashboardName);
-                                setIsReorderDashboardModalOpen(true);
-                            }, onSave: async () => {
-                                await getDashNames();
-                                setReloadFlag(true);
-                                reloadDashboard();
-                            }, client: state.client, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, TextInputComponent: TextInputPrimitive, HeaderComponent: HeaderPrimitive, SelectComponent: SelectPrimitive, dashNames: state.dashboards, setSelectedEditDashboard: (d) => dispatch({ type: 'SET_SELECTED_EDIT_DASHBOARD', payload: d }) }), _jsx(NewDashboardModal, { isOpen: newDashboardModalIsOpen, setIsOpen: setNewDashboardModalIsOpen, openEditOrderModal: (dashboardName) => {
-                                setSelectedReorderDashboard(dashboardName);
-                                setIsReorderDashboardModalOpen(true);
-                            }, onSave: (name) => {
-                                dispatch({ type: 'SET_SELECTED_DASHBOARD', payload: name });
-                                dispatch({
-                                    type: 'SET_DASHBOARDS',
-                                    payload: [...state.dashboards, { name }],
-                                });
-                                setReloadFlag(true);
-                                reloadDashboard();
-                            }, client: state.client, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, TextInputComponent: TextInputPrimitive, HeaderComponent: HeaderPrimitive, SelectComponent: SelectPrimitive, dashNames: state.dashboards, setSelectedEditDashboard: (d) => dispatch({ type: 'SET_SELECTED_EDIT_DASHBOARD', payload: d }) }), _jsx(ReorderDashboardModal, { organizationId: state.organizationId, isOpen: isReorderDashboardModalOpen, client: state.client, onSave: () => {
-                                setReloadFlag(true);
-                                reloadDashboard();
-                            }, setIsOpen: setIsReorderDashboardModalOpen, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, selectedDashboard: selectedReorderDashboard }), _jsx(AddFilterModal, { selectedDashboard: state.selectedEditDashboard, isOpen: addFilterModalIsOpen, setIsOpen: setAddFilterModalIsOpen, client: state.client, ModalComponent: ModalPrimitive, TextInputComponent: TextInputPrimitive, SelectComponent: SelectPrimitive, HeaderComponent: HeaderPrimitive, ButtonComponent: ButtonPrimitive, openAddDashboardModal: () => {
-                                setIsAddDashboardModalOpen(true);
-                                // setAddFilterModalIsOpen(false);
-                            } }), _jsx(AddDashboardModal, { selectedDashboard: state.selectedDashboard, isOpen: isAddDashboardModalOpen, setIsOpen: setIsAddDashboardModalOpen, client: state.client, ModalComponent: ModalPrimitive, TextInputComponent: TextInputPrimitive, SelectComponent: SelectPrimitive, HeaderComponent: HeaderPrimitive, ButtonComponent: ButtonPrimitive, dashNames: state.dashboards, 
-                            // @ts-ignore
-                            openAddFilterModal: () => {
-                                setAddFilterModalIsOpen(true);
-                                // setIsAddDashboardModalOpen(false);
-                            }, organizationId: state.organizationId, getDashNames: getDashNames })] }))] }) }));
+                                        }, children: _jsxs("div", { style: {
+                                                height: 80,
+                                                width: 260,
+                                                borderRadius: 6,
+                                                marginTop: 100,
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                gap: 20,
+                                            }, className: "hover-dash-rect", onClick: () => {
+                                                setNewDashboardModalIsOpen(true);
+                                            }, children: [_jsx("style", { children: ` .hover-dash-rect { background: white; border: 1px dashed #e7e7e7; } .hover-dash-rect:hover { background: white; box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.07); border: 1px solid #e7e7e7; } ` }), _jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        flexDirection: 'row',
+                                                        alignItems: 'center',
+                                                        justifyContent: 'center',
+                                                        width: 260,
+                                                    }, children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#565656", height: 26, width: 26, children: [_jsx("path", { fillRule: "evenodd", d: "M2.25 13.5a8.25 8.25 0 0 1 8.25-8.25.75.75 0 0 1 .75.75v6.75H18a.75.75 0 0 1 .75.75 8.25 8.25 0 0 1-16.5 0Z", clipRule: "evenodd" }), _jsx("path", { fillRule: "evenodd", d: "M12.75 3a.75.75 0 0 1 .75-.75 8.25 8.25 0 0 1 8.25 8.25.75.75 0 0 1-.75.75h-7.5a.75.75 0 0 1-.75-.75V3Z", clipRule: "evenodd" })] }), _jsx("div", { style: {
+                                                                fontSize: 14,
+                                                                fontWeight: 500,
+                                                                color: '#565656',
+                                                                // border: '1px solid #e7e7e7',
+                                                                paddingTop: 8,
+                                                                paddingBottom: 8,
+                                                                paddingRight: 12,
+                                                                paddingLeft: 12,
+                                                                borderRadius: 4,
+                                                                cursor: 'pointer',
+                                                            }, className: "quill-hover-button", children: "Create new dashboard" })] })] }) })), reloadFlag ? null : (_jsx(Dashboard, { name: state.selectedDashboard, containerStyle: { padding: 25 }, onClickDashboardItem: (elem) => {
+                                            dispatch({ type: 'SET_REPORT_ID', payload: elem._id });
+                                            dispatch({
+                                                type: 'SET_ACTIVE_COMPONENT',
+                                                payload: 'Report',
+                                            });
+                                        }, EmptyDashboardComponent: EmptyDashboardComponent }))] }), _jsx(EditDashboardsModal, { clientId: state.client._id, isOpen: isEditDashboardModalOpen, setIsOpen: setIsEditDashboardModalOpen, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, TextInputComponent: TextInputPrimitive, openEditFilterModal: (dashboardName) => {
+                                    dispatch({
+                                        type: 'SET_SELECTED_EDIT_DASHBOARD',
+                                        payload: dashboardName,
+                                    });
+                                    setEditFilterModalIsOpen(true);
+                                    // setIsEditDashboardModalOpen(false);
+                                }, openAddDashboardModal: () => {
+                                    setIsAddDashboardModalOpen(true);
+                                    // setIsEditDashboardModalOpen(false);
+                                }, openEditOrderModal: (dashboardName) => {
+                                    setSelectedReorderDashboard(dashboardName);
+                                    setIsReorderDashboardModalOpen(true);
+                                }, HeaderComponent: HeaderPrimitive, setDashboardData: setDashboardData, dashboards: state.dashboards, getDashNames: getDashNames }), _jsx(PromoteDashModal, { clientId: state.client._id, client: state.client, clients: state.clients, isOpen: isPromoteDashModalOpen, setIsOpen: setIsPromoteDashModalOpen, ModalComponent: ModalPrimitive, dashboards: state.dashboards, selectedDashboard: state.selectedDashboard, theme: state.theme, ButtonComponent: ButtonPrimitive }), _jsx(EditFiltersModal, { selectedDashboard: state.selectedDashboard, dashboardData: state.editDashboardData, isOpen: editFilterModalIsOpen, setIsOpen: setEditFilterModalIsOpen, openAddFilterModal: () => {
+                                    setAddFilterModalIsOpen(true);
+                                    // setEditFilterModalIsOpen(false);
+                                }, openEditOrderModal: (dashboardName) => {
+                                    setSelectedReorderDashboard(dashboardName);
+                                    setIsReorderDashboardModalOpen(true);
+                                }, onSave: async () => {
+                                    await getDashNames();
+                                    setReloadFlag(true);
+                                    reloadDashboard();
+                                }, client: state.client, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, TextInputComponent: TextInputPrimitive, HeaderComponent: HeaderPrimitive, SelectComponent: SelectPrimitive, dashNames: state.dashboards, setSelectedEditDashboard: (d) => dispatch({ type: 'SET_SELECTED_EDIT_DASHBOARD', payload: d }) }), _jsx(NewDashboardModal, { isOpen: newDashboardModalIsOpen, setIsOpen: setNewDashboardModalIsOpen, openEditOrderModal: (dashboardName) => {
+                                    setSelectedReorderDashboard(dashboardName);
+                                    setIsReorderDashboardModalOpen(true);
+                                }, onSave: (name) => {
+                                    dispatch({ type: 'SET_SELECTED_DASHBOARD', payload: name });
+                                    dispatch({
+                                        type: 'SET_DASHBOARDS',
+                                        payload: [...state.dashboards, { name }],
+                                    });
+                                    setReloadFlag(true);
+                                    reloadDashboard();
+                                }, client: state.client, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, TextInputComponent: TextInputPrimitive, HeaderComponent: HeaderPrimitive, SelectComponent: SelectPrimitive, dashNames: state.dashboards, setSelectedEditDashboard: (d) => dispatch({ type: 'SET_SELECTED_EDIT_DASHBOARD', payload: d }) }), _jsx(ReorderDashboardModal, { organizationId: state.organizationId, isOpen: isReorderDashboardModalOpen, client: state.client, onSave: () => {
+                                    setReloadFlag(true);
+                                    reloadDashboard();
+                                }, setIsOpen: setIsReorderDashboardModalOpen, ModalComponent: ModalPrimitive, ButtonComponent: ButtonPrimitive, selectedDashboard: selectedReorderDashboard }), _jsx(AddFilterModal, { selectedDashboard: state.selectedEditDashboard, isOpen: addFilterModalIsOpen, setIsOpen: setAddFilterModalIsOpen, client: state.client, ModalComponent: ModalPrimitive, TextInputComponent: TextInputPrimitive, SelectComponent: SelectPrimitive, HeaderComponent: HeaderPrimitive, ButtonComponent: ButtonPrimitive, openAddDashboardModal: () => {
+                                    setIsAddDashboardModalOpen(true);
+                                    // setAddFilterModalIsOpen(false);
+                                } }), _jsx(AddDashboardModal, { selectedDashboard: state.selectedDashboard, isOpen: isAddDashboardModalOpen, setIsOpen: setIsAddDashboardModalOpen, client: state.client, ModalComponent: ModalPrimitive, TextInputComponent: TextInputPrimitive, SelectComponent: SelectPrimitive, HeaderComponent: HeaderPrimitive, ButtonComponent: ButtonPrimitive, dashNames: state.dashboards, 
+                                // @ts-ignore
+                                openAddFilterModal: () => {
+                                    setAddFilterModalIsOpen(true);
+                                    // setIsAddDashboardModalOpen(false);
+                                }, organizationId: state.organizationId, getDashNames: getDashNames })] }))] }), _jsx(ReportWrapper, { isOpen: state.activeComponent === 'Report', setIsOpen: (isOpen) => {
+                    dispatch({
+                        type: 'SET_ACTIVE_COMPONENT',
+                        payload: isOpen ? 'Report' : 'Dashboards',
+                    });
+                }, ButtonComponent: ButtonPrimitive, SecondaryButtonComponent: SecondaryButtonPrimitive, ModalComponent: MemoizedModal, SelectComponent: SelectPrimitive, OrganizationSelectComponent: OrgSelect, organizationId: state.organizationId, queryEndpoint: state.queryEndpoint, queryHeaders: state.queryHeaders, withCredentials: state.withCredentials, reloadDashboard: () => {
+                    setReloadFlag(true);
+                    reloadDashboard();
+                } })] }));
 }

package/dist/esm/public_components/SQLViewManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SQLViewManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/SQLViewManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AA0BnE,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,cAAc,GACf,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CAqUA"}
+{"version":3,"file":"SQLViewManager.d.ts","sourceRoot":"","sources":["../../../src/public_components/SQLViewManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AA0BnE,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,cAAc,GACf,EAAE;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CA8VA"}

package/dist/esm/public_components/SQLViewManager.js

@@ -94,15 +94,34 @@ export default function SQLViewManager({ containerStyle, }) {
                         alert('No Name found');
                         return;
                     }
+                    if (tables?.map((table) => table.name).includes(name)) {
+                        alert('Name already exists');
+                        return;
+                    }
+                    if (!/^[a-z0-9_]+$/.test(name)) {
+                        alert('Name must be lowercase with no spaces');
+                        return;
+                    }
                     await addSqlView(name, query, state);
                     break;
                 case 'edit':
+                    if (!id) {
+                        return;
+                    }
                     if (!name) {
                         alert('No id found');
                         return;
                     }
-                    if (!id) {
-                        alert('No id found');
+                    if (!/^[a-z0-9_]+$/.test(name)) {
+                        alert('Names can only include lowercase letters, numbers, and underscores');
+                        return;
+                    }
+                    // check if the tableName is present excluding the table with the same id
+                    if (tables
+                        ?.filter((table) => table._id !== id)
+                        .map((table) => table.name)
+                        .includes(name)) {
+                        alert('Name already exists');
                         return;
                     }
                     await editSQLView(name, query, id, state);
@@ -155,7 +174,7 @@ export default function SQLViewManager({ containerStyle, }) {
                     flexDirection: 'column',
                     paddingTop: '0px',
                     position: 'relative',
-                }, ref: parentRef, children: [_jsx("div", { style: {
+                }, ref: parentRef, children: [(state.databaseTypeMismatch.show || !editQueryView) && (_jsx("div", { style: {
                             //   width: 'calc(100vw - 30px)',
                             display: 'flex',
                             position: 'sticky',
@@ -204,7 +223,7 @@ export default function SQLViewManager({ containerStyle, }) {
                                         setEditViewId('');
                                         setInitialSqlView(undefined);
                                         setEditQueryView(true);
-                                    }, label: "Add view +" }))] }) }), state.databaseTypeMismatch.show ? (_jsx(DatabaseMismatchCard, { environemntName: state.client.name, environemntDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })) : (_jsx(_Fragment, { children: !editQueryView ? (_jsx("div", { style: {
+                                    }, label: "Add view +" }))] }) })), state.databaseTypeMismatch.show ? (_jsx(DatabaseMismatchCard, { environemntName: state.client.name, environemntDatabaseType: state.client.databaseType, backendDatabaseType: state.databaseTypeMismatch.backendDatabaseType })) : (_jsx(_Fragment, { children: !editQueryView ? (_jsx("div", { style: {
                                 display: 'flex',
                                 flexWrap: 'wrap',
                                 paddingLeft: 25,

package/dist/esm/utils/constants.d.ts

@@ -8,11 +8,11 @@ export declare const InitialDateRangeOptions: readonly [{
     readonly value: "LAST_30_DAYS";
     readonly label: "Last 30 days";
 }, {
-    readonly value: "CURRENT_MONTH";
-    readonly label: "Current Month";
+    readonly value: "THIS_MONTH";
+    readonly label: "This Month";
 }, {
-    readonly value: "CURRENT_WEEK";
-    readonly label: "Current Week";
+    readonly value: "THIS_WEEK";
+    readonly label: "This Week";
 }, {
     readonly value: "ALL_TIME";
     readonly label: "All time";

package/dist/esm/utils/constants.js

@@ -4,8 +4,8 @@
 export const InitialDateRangeOptions = [
     { value: 'LAST_90_DAYS', label: 'Last 90 days' },
     { value: 'LAST_30_DAYS', label: 'Last 30 days' },
-    { value: 'CURRENT_MONTH', label: 'Current Month' },
-    { value: 'CURRENT_WEEK', label: 'Current Week' },
+    { value: 'THIS_MONTH', label: 'This Month' },
+    { value: 'THIS_WEEK', label: 'This Week' },
     { value: 'ALL_TIME', label: 'All time' },
 ];
 export const defaultDateRange = InitialDateRangeOptions[0];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quillsql/admin",
-  "version": "1.3.9",
+  "version": "1.5.2",
   "description": "Admin tools for Quill",
   "exports": {
     ".": {