@dexteel/mesf-core 7.1.0 → 7.2.1

package/dist/index.esm.js

@@ -1,12 +1,12 @@
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 export * from '@microsoft/signalr';
 export { LicenseManager } from 'ag-grid-enterprise';
-import { styled, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Grid2, Button, alpha, Dialog as Dialog$1, TextField, Paper, List, ListItem, ListItemIcon, ListItemText, Box, Chip, SvgIcon, Typography as Typography$1, Checkbox, InputAdornment, IconButton as IconButton$1, MenuItem, Card, CardContent, CardActions, Collapse, createTheme, CircularProgress, Snackbar, FormControlLabel, Switch, InputLabel, Select, DialogContentText, useTheme, Popover, MenuList, FormControl, FormHelperText, Badge, Tooltip, Input, Divider, CssBaseline, AppBar, Toolbar, Container, Menu, Hidden, Drawer, useMediaQuery, ListSubheader, ListItemButton, Autocomplete as Autocomplete$1, Alert as Alert$4, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, debounce, StyledEngineProvider, ThemeProvider, ListItemSecondaryAction } from '@mui/material';
+import { styled, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Grid2, Button, alpha, Dialog as Dialog$1, TextField, Paper, List, ListItem, ListItemIcon, ListItemText, Box, Chip, SvgIcon, Typography as Typography$1, Checkbox, InputAdornment, IconButton as IconButton$1, MenuItem, Card, CardContent, CardActions, Collapse, createTheme, CircularProgress, Snackbar, FormControlLabel, Switch, InputLabel, Select, Alert as Alert$3, DialogContentText, useTheme, Popover, MenuList, FormControl, FormHelperText, Badge, Tooltip, Input, Divider, CssBaseline, AppBar, Toolbar, Container, Menu, Hidden, Drawer, useMediaQuery, ListSubheader, ListItemButton, Autocomplete as Autocomplete$1, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, debounce, StyledEngineProvider, ThemeProvider, ListItemSecondaryAction } from '@mui/material';
 import { useMutation, useQueryClient, useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as React from 'react';
 import React__default, { createContext, useContext, useState, useRef, useEffect, useMemo, Component, useCallback, lazy, Suspense } from 'react';
 import CloseIcon from '@mui/icons-material/Close';
-import Alert$3 from '@mui/lab/Alert';
+import Alert$4 from '@mui/lab/Alert';
 import IconButton from '@mui/material/IconButton';
 import GetAppIcon from '@mui/icons-material/GetApp';
 import { ArrowRight, ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRight, Cloud, Timeline, Send, Menu as Menu$1, People, Storage, Group, Assignment, Chat, ViewList, Build, Settings as Settings$2, FastRewind, FastForward, ZoomIn, Restore, Lock, Create, Delete, Folder, InsertChart, Search, PlaylistAdd, DragIndicator, Save, AttachFile, CloudUpload, GetApp } from '@mui/icons-material';
@@ -47,6 +47,7 @@ import MenuIcon from '@mui/icons-material/Menu';
 import Settings$1 from '@mui/icons-material/Settings';
 import ShowChartIcon from '@mui/icons-material/ShowChart';
 import axios from 'axios';
+import { LocalizationProvider as LocalizationProvider$1 } from '@mui/x-date-pickers/LocalizationProvider';
 import { DataGrid, GridOverlay } from '@mui/x-data-grid';
 import { isAncestor, Tree, DndProvider as DndProvider$1 } from '@minoru/react-dnd-treeview';
 import FolderIcon from '@mui/icons-material/Folder';
@@ -230,9 +231,11 @@ var DialogActions = styled(DialogActions$1)(function (_a) {
     });
 });
 function Modal(_a) {
-    var children = _a.children, title = _a.title, handleClose = _a.handleClose, open = _a.open, _b = _a.id, id = _b === void 0 ? "mesf-modal" : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? "lg" : _c;
+    var children = _a.children, title = _a.title, subtitle = _a.subtitle, handleClose = _a.handleClose, open = _a.open, _b = _a.id, id = _b === void 0 ? "mesf-modal" : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? "lg" : _c;
     return (React__default.createElement(Dialog, { onClose: function () { return handleClose(); }, "aria-labelledby": id, open: open, maxWidth: maxWidth, style: { minWidth: 320 } },
-        React__default.createElement(DialogTitle, { id: id, onClose: function () { return handleClose(); } }, title),
+        React__default.createElement(DialogTitle, { id: id, onClose: function () { return handleClose(); } },
+            title,
+            subtitle ? (React__default.createElement(Typography, { variant: "caption", color: "text.secondary", display: "block" }, subtitle)) : null),
         children));
 }
 var MesfModal = Object.assign(Modal, {
@@ -2633,9 +2636,9 @@ var LogsPage = function (props) {
     return React.createElement(Logs, null);
 };
 
-var Alert = function (props) {
-    return React__default.createElement(Alert$3, __assign({ elevation: 6, variant: "filled" }, props));
-};
+var Alert = React__default.forwardRef(function Alert(props, ref) {
+    return React__default.createElement(Alert$3, __assign({ elevation: 6, variant: "filled", ref: ref }, props));
+});
 
 var INITIAL_VALUES$3 = {
     ProfileId: null,
@@ -4872,7 +4875,6 @@ var AssetSearchInput = function (_a) {
 };
 
 var buildTreeAssets$1 = function (nodes) {
-    debugger;
     //tree build functions
     var idMapping = nodes.reduce(function (acc, el, i) {
         // console.log(acc)
@@ -5058,7 +5060,7 @@ var CreateNewAssetDialog = function (_a) {
                             React__default.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React__default.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
         React__default.createElement(Snackbar, { open: assetCreatedSuccess, autoHideDuration: 2500, onClose: handleClose },
-            React__default.createElement(Alert$3, { severity: "info", onClose: handleClose }, "Document created successfully"))));
+            React__default.createElement(Alert$4, { severity: "info", onClose: handleClose }, "Document created successfully"))));
 };
 
 var EditAssetDialog = function (_a) {
@@ -5250,7 +5252,7 @@ var RemoveAssetDialog = function (_a) {
                 React__default.createElement(Button, { autoFocus: true, color: "secondary", startIcon: isSubmitLoading && React__default.createElement(CircularProgress, { size: "1rem" }), onClick: handleRemoveAsset }, "Delete"))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
         React__default.createElement(Snackbar, { open: assetRemovedSuccess, autoHideDuration: 2500, onClose: handleClose },
-            React__default.createElement(Alert$3, { severity: "info", onClose: handleClose }, "Asset removed succesfully"))));
+            React__default.createElement(Alert$4, { severity: "info", onClose: handleClose }, "Asset removed succesfully"))));
 };
 
 var ViewerAssetDialog = function (_a) {
@@ -7490,7 +7492,7 @@ var ContextMenu$1 = function () {
             backgroundColor: "#fff",
             borderRadius: "2px",
             padding: "5px 0",
-            width: "180px",
+            width: "auto",
             height: "auto",
             margin: "0",
             zIndex: 1,
@@ -9143,7 +9145,7 @@ function ChangePassword(props) {
         React__default.createElement(DialogTitle$1, { id: "confirmation-dialog-title" }, "Change Password"),
         React__default.createElement(DialogContent$1, { dividers: true },
             React__default.createElement(Collapse, { in: showError },
-                React__default.createElement(Alert$3, { severity: "error", action: React__default.createElement(IconButton, { "aria-label": "close", color: "inherit", size: "small", onClick: function () {
+                React__default.createElement(Alert$4, { severity: "error", action: React__default.createElement(IconButton, { "aria-label": "close", color: "inherit", size: "small", onClick: function () {
                             setShowError(false);
                             setError(undefined);
                         } },
@@ -11908,7 +11910,7 @@ var SaveUpdateDeleteViewModalV2 = function (_a) {
                                     : "Save")))))),
         React__default.createElement(ConfirmationDialogRaw, { title: "Confirmation", message: "Are you sure you want to delete permanently the view: ".concat((_d = (view || viewSelected)) === null || _d === void 0 ? void 0 : _d.ViewName, "?"), open: openDeleteDialog, onClose: deleteViewAction }),
         React__default.createElement(Snackbar, { open: snackbarOpen, autoHideDuration: 2500, onClose: handleSnackbarClose },
-            React__default.createElement(Alert$3, { elevation: 6, variant: "filled", severity: "success", onClose: handleSnackbarClose }, snackbarMessage)),
+            React__default.createElement(Alert$4, { elevation: 6, variant: "filled", severity: "success", onClose: handleSnackbarClose }, snackbarMessage)),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
@@ -12119,13 +12121,18 @@ var HeaderSectionV2 = React__default.memo(function (_a) {
                             React__default.createElement(IconButton$1, { onClick: function () { return handlePartialDateNavigator("subtract"); }, size: "small" },
                                 React__default.createElement(FastRewind, { fontSize: "medium", sx: { color: "black" } })))),
                     React__default.createElement(Grid2, { size: { md: 3.5 } },
-                        React__default.createElement(TextField, { label: "Start", variant: "outlined", fullWidth: true, value: moment$8(timeScopeStart).format("MM-DD-YY HH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "start"); }, InputLabelProps: {
-                                shrink: true,
-                            }, InputProps: {
-                                max: timeScopeEnd,
-                                endAdornment: (React__default.createElement(InputAdornment, { position: "end" },
-                                    React__default.createElement(CalendarIcon, { fontSize: "small" }))),
-                            } })),
+                        React__default.createElement(LocalizationProvider$1, { dateAdapter: AdapterMoment },
+                            React__default.createElement(DateTimePicker, { label: "Start", format: "MM/DD/YYYY HH:mm:ss", value: moment$8(timeScopeStart), onChange: function (newValue) {
+                                    if (newValue) {
+                                        handleDateChange(newValue.toDate(), "start");
+                                    }
+                                }, minutesStep: 1, slotProps: {
+                                    textField: {
+                                        size: "small",
+                                        variant: "outlined",
+                                        fullWidth: true,
+                                    },
+                                } }))),
                     React__default.createElement(Grid2, { size: { md: 2 }, marginTop: 0.5 },
                         React__default.createElement(FormControl, { variant: "outlined", fullWidth: true, size: "small" },
                             React__default.createElement(Select, { value: scope, onChange: function (e) {
@@ -12139,14 +12146,18 @@ var HeaderSectionV2 = React__default.memo(function (_a) {
                                 React__default.createElement(MenuItem, { value: "10 days" }, "10 days"),
                                 React__default.createElement(MenuItem, { value: "custom" }, "Custom")))),
                     React__default.createElement(Grid2, { size: { md: 3.5 } },
-                        React__default.createElement(TextField, { label: "End", variant: "outlined", fullWidth: true, value: autoRefresh
-                                ? ""
-                                : moment$8(timeScopeEnd).format("MM-DD-YY HH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "end"); }, InputLabelProps: {
-                                shrink: true,
-                            }, InputProps: {
-                                endAdornment: (React__default.createElement(InputAdornment, { position: "end" },
-                                    React__default.createElement(CalendarIcon, { fontSize: "small" }))),
-                            } })),
+                        React__default.createElement(LocalizationProvider$1, { dateAdapter: AdapterMoment },
+                            React__default.createElement(DateTimePicker, { label: "End", format: "MM/DD/YYYY HH:mm:ss", value: autoRefresh ? null : moment$8(timeScopeEnd), onChange: function (newValue) {
+                                    if (newValue) {
+                                        handleDateChange(newValue.toDate(), "end");
+                                    }
+                                }, minutesStep: 1, slotProps: {
+                                    textField: {
+                                        size: "small",
+                                        variant: "outlined",
+                                        fullWidth: true,
+                                    },
+                                }, disabled: autoRefresh }))),
                     React__default.createElement(Grid2, null,
                         React__default.createElement(Tooltip, { title: "Navigate forward 20%", arrow: true },
                             React__default.createElement(IconButton$1, { onClick: function () { return handlePartialDateNavigator("add"); }, size: "small" },
@@ -12235,7 +12246,9 @@ var HeaderSectionV2 = React__default.memo(function (_a) {
                         backgroundColor: "white",
                         width: "100%",
                     } },
-                    React__default.createElement(Autocomplete$1, { size: "small", id: "view-selector", options: views, getOptionLabel: function (option) { return option.ViewName; }, value: viewSelected, onChange: handleViewChange, noOptionsText: "No views available", renderOption: function (props, option) { return (React__default.createElement(Box, __assign({}, props, { component: "li", style: {
+                    React__default.createElement(Autocomplete$1, { size: "small", id: "view-selector", options: views, getOptionLabel: function (option) { return option.ViewName; }, value: viewSelected, isOptionEqualToValue: function (option, value) {
+                            return option.ViewId === (value === null || value === void 0 ? void 0 : value.ViewId);
+                        }, onChange: handleViewChange, noOptionsText: "No views available", renderOption: function (props, option) { return (React__default.createElement(Box, __assign({}, props, { component: "li", style: {
                                 display: "flex",
                                 justifyContent: "space-between",
                                 width: "100%",
@@ -12588,11 +12601,8 @@ var TagFolderCustomNodeV2 = function (_a) {
         };
     }, []);
     return (React__default.createElement(Box, { onClick: onClickHandler, sx: {
-            paddingLeft: depth * 20,
+            paddingInlineStart: depth * 2,
             cursor: "pointer",
-            listStyleType: "none",
-            margin: 0,
-            padding: 0,
             alignItems: "center",
             display: "flex",
             height: "32px",
@@ -12615,7 +12625,6 @@ var TagFolderCustomNodeV2 = function (_a) {
                     alignItems: "center",
                     fontSize: "10px",
                     fontWeight: "bold",
-                    margin: "0 5px",
                     borderRadius: "3px",
                     border: "1px solid rgba(0, 0, 0, 0.2)",
                     backgroundColor: ((_f = node.data) === null || _f === void 0 ? void 0 : _f.TagTypeCode) === "A" ? "#AD48C4" : "#C46F48",
@@ -13511,7 +13520,7 @@ var TagsTableV2 = function () {
                 key: "saveView",
                 name: "Save View",
                 onClick: function () {
-                    handleSaveView();
+                    handleSaveViewRef.current();
                 },
             },
             {
@@ -13652,12 +13661,16 @@ var TagsTableV2 = function () {
     // This prevents closure issues with the context menu registration
     var viewTagsRef = React__default.useRef(viewTags);
     var handleDeleteTagRef = React__default.useRef(handleDeleteTag);
-    React__default.useEffect(function () {
+    var handleSaveViewRef = React__default.useRef(handleSaveView);
+    useEffect(function () {
         viewTagsRef.current = viewTags;
     }, [viewTags]);
-    React__default.useEffect(function () {
+    useEffect(function () {
         handleDeleteTagRef.current = handleDeleteTag;
     }, [handleDeleteTag]);
+    useEffect(function () {
+        handleSaveViewRef.current = handleSaveView;
+    }, [handleSaveView, viewSelected]);
     var handleColorChange = useCallback(function (tagId, newColor) {
         var _a;
         var currentViewTags = viewTagsRef.current;
@@ -14043,7 +14056,7 @@ var TagsTableV2 = function () {
         React__default.createElement(LoadViewModalV2, { open: loadViewOpen, handleClose: function () { return setLoadViewOpen(false); } }),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
         React__default.createElement(Snackbar, { open: !!snackbarMessage, autoHideDuration: 3000, onClose: handleCloseSnackbar, anchorOrigin: { vertical: "bottom", horizontal: "center" } },
-            React__default.createElement(Alert$4, { onClose: handleCloseSnackbar, severity: "success" }, snackbarMessage))));
+            React__default.createElement(Alert$3, { onClose: handleCloseSnackbar, severity: "success" }, snackbarMessage))));
 };
 
 /**
@@ -16177,43 +16190,44 @@ var LoadViewModal = function (_a) {
                                 React__default.createElement("input", { type: "checkbox", checked: allViewsChecked, onChange: handleAllViewsCheckbox }),
                                 React__default.createElement(Typography$1, null, "All Views")))),
                     React__default.createElement(Grid2, { size: { md: 12 } },
-                        React__default.createElement(Autocomplete, { size: "small", id: "list-of-views", noOptionsText: allViewsChecked
+                        React__default.createElement(Autocomplete$1, { size: "small", id: "list-of-views", noOptionsText: allViewsChecked
                                 ? "No views detected, please create a new view"
-                                : "No private views detected, please create a new view .", options: allViewsChecked ? views : publicViews, getOptionLabel: function (option) { return option.ViewName; }, onChange: function (ev, val) { return setOptionSelected(val); }, defaultValue: optionSelected || viewSelected, style: { width: "100%" }, renderOption: function (option, state) { return (React__default.createElement("div", { style: {
-                                    display: "flex",
-                                    justifyContent: "flex-start",
-                                    alignItems: "center",
-                                    width: "100%",
-                                } },
-                                React__default.createElement("div", { style: {
-                                        flexGrow: 1,
-                                    } }, state.ViewName),
+                                : "No private views detected, please create a new view .", options: allViewsChecked ? views : publicViews, getOptionLabel: function (option) { return option.ViewName; }, onChange: function (ev, val) { return setOptionSelected(val); }, defaultValue: optionSelected || viewSelected, style: { width: "100%" }, renderOption: function (props, option) { return (React__default.createElement("li", __assign({}, props, { key: option.ViewId }),
                                 React__default.createElement("div", { style: {
                                         display: "flex",
-                                        justifyContent: "flex-end",
+                                        justifyContent: "flex-start",
                                         alignItems: "center",
-                                        flex: 1,
+                                        width: "100%",
                                     } },
-                                    state.IsPublic ? ("") : (React__default.createElement(React__default.Fragment, null,
-                                        React__default.createElement(Tooltip, { title: "Private", arrow: true },
-                                            React__default.createElement(LockIcon, { fontSize: "small", style: {
-                                                    color: "black",
+                                    React__default.createElement("div", { style: {
+                                            flexGrow: 1,
+                                        } }, option.ViewName),
+                                    React__default.createElement("div", { style: {
+                                            display: "flex",
+                                            justifyContent: "flex-end",
+                                            alignItems: "center",
+                                            flex: 1,
+                                        } },
+                                        option.IsPublic ? ("") : (React__default.createElement(React__default.Fragment, null,
+                                            React__default.createElement(Tooltip, { title: "Private", arrow: true },
+                                                React__default.createElement(LockIcon, { fontSize: "small", style: {
+                                                        color: "black",
+                                                        height: "18px",
+                                                        width: "18px",
+                                                        cursor: "auto",
+                                                    } })))),
+                                        React__default.createElement(IconButton$1, { onClick: function (e) { return handleEditView(option); } },
+                                            React__default.createElement(CreateIcon, { fontSize: "small", color: "primary", style: {
                                                     height: "18px",
                                                     width: "18px",
-                                                    cursor: "auto",
-                                                } })))),
-                                    React__default.createElement(IconButton$1, { onClick: function (e) { return handleEditView(state); } },
-                                        React__default.createElement(CreateIcon, { fontSize: "small", color: "primary", style: {
-                                                height: "18px",
-                                                width: "18px",
-                                                cursor: "pointer",
-                                            } })),
-                                    React__default.createElement(IconButton$1, { onClick: function (e) { return handleDeleteView(state, e); } },
-                                        React__default.createElement(DeleteIcon, { fontSize: "small", color: "secondary", style: {
-                                                height: "18px",
-                                                width: "18px",
-                                                cursor: "pointer",
-                                            } }))))); }, renderInput: function (params) { return (React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" }))); } })))) : (React__default.createElement(Typography$1, null, "No views detected, please add one")))),
+                                                    cursor: "pointer",
+                                                } })),
+                                        React__default.createElement(IconButton$1, { onClick: function (e) { return handleDeleteView(option, e); } },
+                                            React__default.createElement(DeleteIcon, { fontSize: "small", color: "secondary", style: {
+                                                    height: "18px",
+                                                    width: "18px",
+                                                    cursor: "pointer",
+                                                } })))))); }, renderInput: function (params) { return (React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" }))); } })))) : (React__default.createElement(Typography$1, null, "No views detected, please add one")))),
             React__default.createElement(MesfModal.Actions, null,
                 React__default.createElement("div", { style: { paddingTop: "1rem" } },
                     React__default.createElement(Button, { variant: "outlined", style: { marginRight: "1rem" }, color: "secondary", onClick: function () { return handleClose(false); } }, "Cancel"),
@@ -16324,7 +16338,7 @@ var SaveAsViewModal = function (_a) {
             React__default.createElement(Divider, null),
             React__default.createElement(MesfModal.Content, null,
                 React__default.createElement(Grid2, { container: true, spacing: 5, style: { padding: "1rem" } },
-                    React__default.createElement(Grid2, { size: { md: 12, xs: 12 }, style: { padding: "10px", width: "100%" } }, views.length && viewSelected ? (React__default.createElement(Autocomplete, { size: "small", id: "list-of-views", options: views, defaultValue: viewSelected, getOptionLabel: function (option) {
+                    React__default.createElement(Grid2, { size: { md: 12, xs: 12 }, style: { padding: "10px", width: "100%" } }, views.length && viewSelected ? (React__default.createElement(Autocomplete$1, { size: "small", id: "list-of-views", options: views, defaultValue: viewSelected, getOptionLabel: function (option) {
                             if (typeof option === "string") {
                                 return option;
                             }
@@ -17320,18 +17334,17 @@ var TableComponent = function (_a) {
                                     " ")));
                         })) : (React__default.createElement(TableRow, null,
                             React__default.createElement(TableCell, { colSpan: 12 },
-                                React__default.createElement("div", { style: { padding: "1rem" } },
-                                    React__default.createElement("div", { style: { padding: "1rem" } },
-                                        "No tag view detected.",
-                                        " "),
-                                    React__default.createElement("div", { style: { padding: "1rem" } },
-                                        React__default.createElement(Button, { onClick: function () { return setTagsTreeModalOpen(true); }, variant: "contained", color: "primary" },
-                                            " ",
-                                            "Add tag")),
-                                    React__default.createElement("div", null,
-                                        React__default.createElement(Button, { onClick: function () { return setLoadViewOpen(true); }, variant: "outlined", color: "primary" },
-                                            " ",
-                                            "Load view")))))))))),
+                                React__default.createElement(Box, { sx: {
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        padding: 4,
+                                        gap: 2,
+                                    } },
+                                    React__default.createElement("div", null, "No tag view detected."),
+                                    React__default.createElement(Button, { onClick: function () { return setTagsTreeModalOpen(true); }, variant: "contained", color: "primary" }, "Add tag"),
+                                    React__default.createElement(Button, { onClick: function () { return setLoadViewOpen(true); }, variant: "outlined", color: "primary" }, "Load view"))))))))),
             React__default.createElement(TagsTreeModal, { open: tagsTreeModalOpen, handleClose: handleClose, onTagSelect: handleTagSelect }),
             React__default.createElement(SaveAsViewModal, { open: saveAsViewModalOpen, handleClose: function (shouldUpdate) { return __awaiter(void 0, void 0, void 0, function () {
                     return __generator(this, function (_a) {
@@ -17352,7 +17365,7 @@ var TableComponent = function (_a) {
                 } })),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
         React__default.createElement(Snackbar, { open: !!snackbarMessage, autoHideDuration: 800, onClose: handleCloseSnackbar },
-            React__default.createElement(Alert$2, { onClose: handleCloseSnackbar, severity: "success" }, snackbarMessage))));
+            React__default.createElement(Alert$3, { onClose: handleCloseSnackbar, severity: "success" }, snackbarMessage))));
 };
 
 var formatDateTimeToString = function (date) {
@@ -17497,7 +17510,7 @@ var CustomOptionsComponent = function (_a) {
                     zoom: 1.5,
                 },
             } },
-            React__default.createElement(FormControlLabel, { checked: customOptions.showGrid, control: React__default.createElement(Checkbox, { color: "primary" }), label: "Show Grid2", onChange: function (e, checked) {
+            React__default.createElement(FormControlLabel, { checked: customOptions.showGrid, control: React__default.createElement(Checkbox, { color: "primary" }), label: "Show Grid", onChange: function (e, checked) {
                     handleGridChange(checked);
                 } })),
         React__default.createElement(Grid2, { sx: {
@@ -17582,142 +17595,89 @@ var Header = React__default.memo(function (_a) {
     useEffect(function () {
         setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { scales: __assign(__assign({}, prevOptions.scales), { x: __assign(__assign({}, prevOptions.scales.x), { min: state.timeScopeStart.getTime(), max: state.timeScopeEnd.getTime() }) }) })); });
     }, [state.timeScopeStart, state.timeScopeEnd]);
-    return (React__default.createElement(Grid2, { size: { xs: 12 }, container: true, justifyContent: "space-between", alignItems: "center", style: { height: "8%" } },
-        React__default.createElement(Grid2, { size: { md: 6 }, container: true, justifyContent: "flex-start", alignItems: "center", wrap: "wrap" },
-            React__default.createElement(Grid2, null,
-                React__default.createElement(IconButton$1, { color: "primary", onClick: function () { return handleDateNavigator("subtract"); }, sx: {
-                        "& .MuiSvgIcon-root": {
-                            cursor: "pointer !important",
-                            height: "24px",
-                            width: "24px",
-                            "& svg": {
-                                // Adjust the icon size as well
-                                fontSize: "1.5rem",
-                            },
-                        },
-                        color: "black",
-                    } },
-                    React__default.createElement(ChevronLeft, { fontSize: "large" }))),
-            React__default.createElement(Grid2, null,
-                React__default.createElement(TextField, { type: "datetime-local", sx: {
-                        alignItems: "center",
-                        "& .MuiInputBase-root": {
-                            color: "black",
-                            backgroundColor: "white",
-                            borderRadius: function (theme) { return theme.shape.borderRadius; },
-                            width: "90%",
-                            minWidth: "90%",
-                            maxWidth: "90%",
-                        },
-                        "& .MuiInputBase-input": {
-                            fontSize: "0.75rem !important",
-                            height: "15px !important",
-                            paddingRight: "3px",
-                            paddingLeft: "3px",
-                        },
-                        "& .MuiInput-underline:before": {
-                            borderBottomColor: "rgba(0, 0, 0, 0.42)",
-                        },
-                        padding: 0,
-                    }, label: "Start", variant: "outlined", value: moment$8(state.timeScopeStart).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "start"); }, InputLabelProps: {
-                        shrink: true,
-                        style: { marginLeft: "10px" },
-                    }, InputProps: {
-                        max: state.timeScopeEnd,
-                    } })),
-            React__default.createElement(Grid2, { sx: {
-                    "& .MuiInput-root": {
-                        width: "100%",
-                    },
-                    "& .MuiInputBase-root": {
-                        color: "black",
-                        backgroundColor: "white",
-                        borderRadius: function (theme) { return theme.shape.borderRadius; },
-                        minWidth: "100%",
-                    },
-                    "& .MuiInputBase-input": {
-                        fontSize: "0.875rem !important",
-                        height: "15px !important",
-                    },
-                    "& .MuiInput-underline:before": {
-                        borderBottomColor: "rgba(0, 0, 0, 0.42)",
-                    },
-                    padding: 0,
-                } },
-                React__default.createElement(FormControl, { variant: "outlined" },
-                    React__default.createElement(Select, { value: state.scope, onChange: function (e) { return handleChangeScope(e.target.value); }, displayEmpty: true },
-                        React__default.createElement(MenuItem, { value: "10 min" }, "10 min"),
-                        React__default.createElement(MenuItem, { value: "1 hour" }, "1 hour"),
-                        React__default.createElement(MenuItem, { value: "4 hours" }, "4 hours"),
-                        React__default.createElement(MenuItem, { value: "12 hours" }, "12 hours"),
-                        React__default.createElement(MenuItem, { value: "1 day" }, "1 day"),
-                        React__default.createElement(MenuItem, { value: "10 days" }, "10 days"),
-                        React__default.createElement(MenuItem, { value: "custom" }, "Custom")))),
-            React__default.createElement(Grid2, null,
-                React__default.createElement(TextField, { label: "End", variant: "outlined", sx: {
-                        alignItems: "center",
-                        "& .MuiInputBase-root": {
+    return (React__default.createElement(LocalizationProvider$1, { dateAdapter: AdapterMoment },
+        React__default.createElement(Grid2, { size: { xs: 12 }, container: true, justifyContent: "space-between", alignItems: "center", style: { height: "8%" } },
+            React__default.createElement(Grid2, { size: { md: 4 }, container: true, spacing: 1, justifyContent: "flex-start", alignItems: "center", wrap: "wrap" },
+                React__default.createElement(Grid2, null,
+                    React__default.createElement(IconButton$1, { color: "primary", onClick: function () { return handleDateNavigator("subtract"); }, size: "small", sx: {
+                            padding: 0.5,
                             color: "black",
-                            backgroundColor: "white",
-                            borderRadius: function (theme) { return theme.shape.borderRadius; },
-                            width: "90%",
-                            minWidth: "90%",
-                            maxWidth: "90%",
-                        },
-                        "& .MuiInputBase-input": {
-                            fontSize: "0.75rem !important",
-                            height: "15px !important",
-                            paddingRight: "3px",
-                            paddingLeft: "3px",
-                        },
-                        "& .MuiInput-underline:before": {
-                            borderBottomColor: "rgba(0, 0, 0, 0.42)",
-                        },
-                        padding: 0,
-                    }, type: "datetime-local", value: autoRefresh
-                        ? ""
-                        : moment$8(state.timeScopeEnd).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "end"); }, InputLabelProps: {
-                        shrink: true,
-                        style: { marginLeft: "10px" },
-                    } })),
-            React__default.createElement(Grid2, null,
-                React__default.createElement(IconButton$1, { onClick: function () { return handleDateNavigator("add"); }, sx: {
-                        "& .MuiSvgIcon-root": {
-                            cursor: "pointer !important",
-                            height: "24px",
-                            width: "24px",
-                            "& svg": {
-                                // Adjust the icon size as well
-                                fontSize: "1.5rem",
-                            },
-                        },
-                        color: "black",
-                    } },
-                    React__default.createElement(ChevronRight, { fontSize: "large" }))),
-            React__default.createElement(Grid2, null,
-                React__default.createElement(IconButton$1, { onClick: function () { return handleDateNavigator("subtract", true); }, sx: {
-                        "& .MuiSvgIcon-root": {
-                            cursor: "pointer !important",
-                            height: "24px",
-                            width: "24px",
-                            "& svg": {
-                                // Adjust the icon size as well
-                                fontSize: "1.5rem",
+                        } },
+                        React__default.createElement(ChevronLeft, { fontSize: "medium" }))),
+                React__default.createElement(Grid2, { size: { md: 4 } },
+                    React__default.createElement(DateTimePicker, { label: "Start", format: "MM/DD/YYYY HH:mm:ss", value: moment$8(state.timeScopeStart), onChange: function (newValue) {
+                            if (newValue) {
+                                handleDateChange(newValue.toDate(), "start");
+                            }
+                        }, minutesStep: 1, slotProps: {
+                            textField: {
+                                size: "small",
+                                variant: "outlined",
+                                fullWidth: true,
                             },
-                        },
-                        color: "black",
-                    } },
-                    React__default.createElement(SkipNextIcon, { fontSize: "large" })))),
-        React__default.createElement(Grid2, { size: { md: 6 }, container: true, justifyContent: "space-between" },
-            React__default.createElement(Grid2, { container: true, wrap: "nowrap", spacing: 1 },
-                React__default.createElement(Grid2, { container: true },
-                    React__default.createElement(CustomOptionsComponent, { customOptions: customOptions, setCustomOptions: setCustomOptions, autoRefresh: autoRefresh, setAutoRefresh: function (autoRefresh) {
-                            if (autoRefresh) {
-                                handleChangeScope("custom");
-                                handleDateChange(new Date(), "end");
+                        } })),
+                React__default.createElement(Grid2, { size: { md: 2 }, marginTop: 0.5 },
+                    React__default.createElement(FormControl, { variant: "outlined", size: "small", fullWidth: true },
+                        React__default.createElement(Select, { value: state.scope, onChange: function (e) {
+                                return handleChangeScope(e.target.value);
+                            }, displayEmpty: true },
+                            React__default.createElement(MenuItem, { value: "10 min" }, "10 min"),
+                            React__default.createElement(MenuItem, { value: "1 hour" }, "1 hour"),
+                            React__default.createElement(MenuItem, { value: "4 hours" }, "4 hours"),
+                            React__default.createElement(MenuItem, { value: "12 hours" }, "12 hours"),
+                            React__default.createElement(MenuItem, { value: "1 day" }, "1 day"),
+                            React__default.createElement(MenuItem, { value: "10 days" }, "10 days"),
+                            React__default.createElement(MenuItem, { value: "custom" }, "Custom")))),
+                React__default.createElement(Grid2, { size: { md: 4 } },
+                    React__default.createElement(DateTimePicker, { label: "End", format: "MM/DD/YYYY HH:mm:ss", value: autoRefresh ? null : moment$8(state.timeScopeEnd), onChange: function (newValue) {
+                            if (newValue) {
+                                handleDateChange(newValue.toDate(), "end");
                             }
-                            setAutoRefresh(autoRefresh);
-                        } }))))));
+                        }, minutesStep: 1, slotProps: {
+                            textField: {
+                                size: "small",
+                                variant: "outlined",
+                                fullWidth: true,
+                            },
+                        }, disabled: autoRefresh })),
+                React__default.createElement(Grid2, null,
+                    React__default.createElement(IconButton$1, { onClick: function () { return handleDateNavigator("add"); }, sx: {
+                            "& .MuiSvgIcon-root": {
+                                cursor: "pointer !important",
+                                height: "24px",
+                                width: "24px",
+                                "& svg": {
+                                    // Adjust the icon size as well
+                                    fontSize: "1.5rem",
+                                },
+                            },
+                            color: "black",
+                        } },
+                        React__default.createElement(ChevronRight, { fontSize: "large" }))),
+                React__default.createElement(Grid2, null,
+                    React__default.createElement(IconButton$1, { onClick: function () { return handleDateNavigator("subtract", true); }, sx: {
+                            "& .MuiSvgIcon-root": {
+                                cursor: "pointer !important",
+                                height: "24px",
+                                width: "24px",
+                                "& svg": {
+                                    // Adjust the icon size as well
+                                    fontSize: "1.5rem",
+                                },
+                            },
+                            color: "black",
+                        } },
+                        React__default.createElement(SkipNextIcon, { fontSize: "large" })))),
+            React__default.createElement(Grid2, { size: { md: 6 }, container: true, justifyContent: "space-between" },
+                React__default.createElement(Grid2, { container: true, wrap: "nowrap", spacing: 1 },
+                    React__default.createElement(Grid2, { container: true },
+                        React__default.createElement(CustomOptionsComponent, { customOptions: customOptions, setCustomOptions: setCustomOptions, autoRefresh: autoRefresh, setAutoRefresh: function (autoRefresh) {
+                                if (autoRefresh) {
+                                    handleChangeScope("custom");
+                                    handleDateChange(new Date(), "end");
+                                }
+                                setAutoRefresh(autoRefresh);
+                            } })))))));
 });
 Header.displayName = "Header";
 
@@ -19173,7 +19133,7 @@ var NotificationSnackBar = function (_a) {
         setOpen(!!message);
     }, [message]);
     return (React__default.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
-        React__default.createElement(Alert$3, { elevation: 6, variant: "filled", severity: severity, onClose: handleClose }, message)));
+        React__default.createElement(Alert$4, { elevation: 6, variant: "filled", severity: severity, onClose: handleClose }, message)));
 };
 
 var useEntrySubmission = function (_a) {