@dexteel/mesf-core 5.9.1 → 5.11.0

package/dist/index.esm.js

@@ -1,15 +1,15 @@
 export { LicenseManager } from 'ag-grid-enterprise';
-import { withStyles, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, createStyles, Grid, Button, alpha, makeStyles, Dialog as Dialog$1, TextField, Paper, List, ListItem, ListItemIcon, ListItemText, Chip, SvgIcon, Collapse, Typography as Typography$1, Checkbox, InputAdornment, IconButton as IconButton$1, MenuItem, Box, Card, CardContent, CardActions, Tooltip, FormControl, InputLabel, Select, CircularProgress, Snackbar, FormControlLabel, Switch, DialogContentText, Badge, useTheme, Input, CssBaseline, AppBar, Toolbar, Container, Menu, Hidden, Drawer, useMediaQuery, Divider, ListSubheader, debounce, createTheme, ThemeProvider } from '@material-ui/core';
+import { withStyles, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, createStyles, Grid, Button, alpha, makeStyles, Dialog as Dialog$1, TextField, Paper, List, ListItem, ListItemIcon, ListItemText, Chip, SvgIcon, Collapse, Typography as Typography$1, Checkbox, InputAdornment, IconButton as IconButton$1, MenuItem, Box, Card, CardContent, CardActions, Tooltip, FormControl, InputLabel, Select, CircularProgress, Snackbar, FormControlLabel, Switch, DialogContentText, Badge, useTheme, Input, Divider, CssBaseline, AppBar, Toolbar, Container, Menu, Hidden, Drawer, useMediaQuery, ListSubheader, debounce, createTheme, ThemeProvider } from '@material-ui/core';
+import { values, get, isNil, isEmpty, round, isNaN as isNaN$1, isNumber } from 'lodash-es';
+import * as React from 'react';
+import React__default, { useState, useRef, useEffect, useMemo, Component, createContext, useContext, useCallback, lazy, Suspense } from 'react';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 import Alert$3 from '@material-ui/lab/Alert';
-import * as React from 'react';
-import React__default, { useState, useRef, useEffect, useMemo, Component, createContext, useContext, useCallback, lazy, Suspense } from 'react';
 import { ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRight, ArrowRight, Send, Menu as Menu$1, People, Storage, Group, Assignment, Chat, Timeline, ViewList, Build, Settings as Settings$2 } from '@material-ui/icons';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import moment$2 from 'moment-timezone';
 import { useParams, useNavigate, useSearchParams, Link, Navigate, Routes, Route, useLocation, BrowserRouter } from 'react-router-dom';
-import { values, get, isNil, isEmpty, round, isNaN, isNumber } from 'lodash-es';
 import { ClearIcon, DatePicker as DatePicker$1, CalendarIcon, DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import MenuIcon from '@material-ui/icons/Menu';
@@ -22,8 +22,8 @@ import { themeMaterial } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import MomentUtils from '@date-io/moment';
 import { MuiPickersUtilsProvider, KeyboardDatePicker, KeyboardTimePicker } from '@material-ui/pickers';
-import { isNil as isNil$1, get as get$1 } from 'lodash';
 import moment$3 from 'moment';
+import { isNil as isNil$1, get as get$1 } from 'lodash';
 import EditIcon from '@material-ui/icons/Edit';
 import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd';
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
@@ -51,9 +51,10 @@ import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import SkipNextIcon from '@material-ui/icons/SkipNext';
 import { Line } from 'react-chartjs-2';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
-import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
 import Dialog from '@material-ui/core/Dialog';
 import Typography from '@material-ui/core/Typography';
+import { format, fromZonedTime, formatInTimeZone } from 'date-fns-tz';
+import { findIana } from 'windows-iana';
 import { ResponsiveBar } from '@nivo/bar';
 import PropTypes from 'prop-types';
 import AccountTreeIcon from '@material-ui/icons/AccountTree';
@@ -63,8 +64,6 @@ import TreeView from '@material-ui/lab/TreeView';
 import { useSpring, animated } from '@react-spring/web';
 import { DataGrid, GridOverlay } from '@material-ui/data-grid';
 import GetAppIcon from '@material-ui/icons/GetApp';
-import { format, fromZonedTime, formatInTimeZone } from 'date-fns-tz';
-import { findIana } from 'windows-iana';
 import PersonOutlineIcon from '@material-ui/icons/PersonOutline';
 import PersonIcon from '@material-ui/icons/Person';
 import { LogLevel as LogLevel$1, PublicClientApplication } from '@azure/msal-browser';
@@ -383,7 +382,9 @@ var StyledTreeItem = withStyles(function (theme) { return ({
     },
     label: {
         backgroundColor: function (props) {
-            return props.isChecked ? "lightblue !important" : "inherit";
+            return props.isChecked
+                ? alpha(theme.palette.primary.main, 0.8) + " !important"
+                : "inherit";
         },
     },
 }); })(function (props) { return (React__default.createElement(TreeItem, __assign({}, props, { TransitionComponent: TransitionComponent }))); });
@@ -391,12 +392,20 @@ var useTreviewStyle = makeStyles(function (theme) { return ({
     root: {
         minHeight: 350,
         flexGrow: 1,
-        height: "450px",
+        height: "100%",
         overflow: "auto",
+        overflowX: "hidden",
+        width: "100%",
     },
     treeContainer: {
-        height: "450px",
+        flex: 1,
         overflow: "auto",
+        display: "flex",
+        flexDirection: "column",
+        paddingTop: theme.spacing(1),
+        paddingLeft: theme.spacing(2),
+        paddingRight: theme.spacing(2),
+        paddingBottom: theme.spacing(2),
     },
     treLabelIcon: {
         marginRight: theme.spacing(1),
@@ -446,6 +455,11 @@ var useTreviewStyle = makeStyles(function (theme) { return ({
         "&:hover": {
             backgroundColor: theme.palette.action.hover,
         },
+        "&.focused": {
+            backgroundColor: theme.palette.action.selected,
+            outline: "2px solid ".concat(theme.palette.primary.main),
+            outlineOffset: "-2px",
+        },
     },
     searchResultPath: {
         fontSize: "0.75rem",
@@ -462,6 +476,7 @@ var useTreviewStyle = makeStyles(function (theme) { return ({
         zIndex: 1000,
         backgroundColor: theme.palette.background.paper,
         borderBottom: "1px solid ".concat(theme.palette.divider),
+        padding: theme.spacing(1),
         paddingBottom: theme.spacing(0.5),
         marginBottom: theme.spacing(0.5),
     },
@@ -475,7 +490,11 @@ var ModalTreeFilterControl = function (props) {
     var _f = useState(""), searchTerm = _f[0], setSearchTerm = _f[1];
     var _g = useState([]), searchResults = _g[0], setSearchResults = _g[1];
     var _h = useState(false), showSearchResults = _h[0], setShowSearchResults = _h[1];
+    var _j = useState(-1), focusedSearchIndex = _j[0], setFocusedSearchIndex = _j[1];
     var searchTimeoutRef = useRef(null);
+    var searchContainerRef = useRef(null);
+    var searchResultsRefs = useRef([]);
+    var searchInputRef = useRef(null);
     var classes = useTreviewStyle();
     useEffect(function () {
         if (!open) {
@@ -484,12 +503,40 @@ var ModalTreeFilterControl = function (props) {
             setSearchTerm("");
             setSearchResults([]);
             setShowSearchResults(false);
+            setFocusedSearchIndex(-1);
         }
         else {
-            if (valueProp !== undefined)
+            if (valueProp !== undefined) {
                 expandNode(valueProp);
+                // Scroll to the selected node when dialog opens
+                setTimeout(function () {
+                    var nodeElement = document.getElementById(valueProp.toString());
+                    if (nodeElement) {
+                        nodeElement.scrollIntoView({
+                            behavior: "smooth",
+                            block: "center",
+                        });
+                    }
+                }, 300);
+            }
+            // Auto-focus search input when dialog opens and search is allowed
+            if (allowSearch) {
+                setTimeout(function () {
+                    // Try multiple ways to focus the search input
+                    if (searchInputRef.current) {
+                        searchInputRef.current.focus();
+                    }
+                    else {
+                        // Fallback: find input by placeholder
+                        var searchInput = document.querySelector('input[placeholder*="Search"]');
+                        if (searchInput) {
+                            searchInput.focus();
+                        }
+                    }
+                }, 200);
+            }
         }
-    }, [valueProp, open]);
+    }, [valueProp, open, allowSearch]);
     useEffect(function () {
         if (Array.isArray(listAssetDrawings) && listAssetDrawings.length >= 1) {
             setSelectedNodes(listAssetDrawings);
@@ -515,6 +562,11 @@ var ModalTreeFilterControl = function (props) {
         return branches;
     };
     var handleCancel = function () {
+        setSearchTerm("");
+        setSearchResults([]);
+        setShowSearchResults(false);
+        setFocusedSearchIndex(-1);
+        setValue(valueProp);
         onClose();
         if (onHide)
             onHide(false);
@@ -543,7 +595,55 @@ var ModalTreeFilterControl = function (props) {
     };
     var handleKeyDown = function (event) {
         if (event.key === "Escape") {
-            onClose();
+            // Clear search if showing results, otherwise close dialog
+            if (showSearchResults) {
+                setSearchTerm("");
+                setSearchResults([]);
+                setShowSearchResults(false);
+                setFocusedSearchIndex(-1);
+            }
+            else {
+                // Reset everything when closing with ESC
+                setSearchTerm("");
+                setSearchResults([]);
+                setShowSearchResults(false);
+                setFocusedSearchIndex(-1);
+                setValue(valueProp);
+                onClose();
+            }
+            return;
+        }
+        // Handle keyboard navigation in search results
+        if (showSearchResults && searchResults.length > 0) {
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                var newIndex_1 = focusedSearchIndex < searchResults.length - 1
+                    ? focusedSearchIndex + 1
+                    : 0;
+                setFocusedSearchIndex(newIndex_1);
+                // Scroll to the focused item
+                setTimeout(function () { return scrollFocusedItemIntoView(newIndex_1); }, 0);
+            }
+            else if (event.key === "ArrowUp") {
+                event.preventDefault();
+                var newIndex_2 = focusedSearchIndex > 0
+                    ? focusedSearchIndex - 1
+                    : searchResults.length - 1;
+                setFocusedSearchIndex(newIndex_2);
+                // Scroll to the focused item
+                setTimeout(function () { return scrollFocusedItemIntoView(newIndex_2); }, 0);
+            }
+            else if (event.key === "Enter" && focusedSearchIndex >= 0) {
+                event.preventDefault();
+                var selectedResult = searchResults[focusedSearchIndex];
+                if (selectedResult) {
+                    handleSearchResultClick(selectedResult);
+                }
+            }
+        }
+        else if (event.key === "Enter" && !showSearchResults) {
+            event.preventDefault();
+            handleOk();
         }
     };
     var handleCheckboxClick = function (event) {
@@ -570,9 +670,11 @@ var ModalTreeFilterControl = function (props) {
         return [];
     };
     var expandNode = function (nodeId) {
-        var expandedNode = getNodeParent(data, nodeId, []);
-        expandedNode.push(nodeId.toString());
-        setExpanded(expandedNode);
+        var pathToNode = getNodeParent(data, nodeId, []);
+        pathToNode.push(nodeId.toString());
+        // Merge with existing expanded nodes to preserve current expansions
+        var mergedExpanded = Array.from(new Set(__spreadArray(__spreadArray([], expanded, true), pathToNode, true)));
+        setExpanded(mergedExpanded);
     };
     var handleChange = function (event, nodeIds) {
         var findNode = getNodeData(data, nodeIds !== undefined ? Number.parseInt(nodeIds) : -1);
@@ -636,6 +738,16 @@ var ModalTreeFilterControl = function (props) {
         });
         return treeArray;
     }
+    // Helper function to scroll focused item into view
+    var scrollFocusedItemIntoView = function (index) {
+        var _a;
+        if (searchResultsRefs.current[index]) {
+            (_a = searchResultsRefs.current[index]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+            });
+        }
+    };
     // Pre-build search index for better performance with large trees
     var searchIndex = useMemo(function () {
         var index = [];
@@ -662,11 +774,8 @@ var ModalTreeFilterControl = function (props) {
                 }
             }
         };
-        if (data && data.children) {
-            for (var _i = 0, _a = data.children; _i < _a.length; _i++) {
-                var child = _a[_i];
-                buildIndex(child);
-            }
+        if (data) {
+            buildIndex(data);
         }
         return index;
     }, [data]);
@@ -693,25 +802,42 @@ var ModalTreeFilterControl = function (props) {
             var results = searchNodes(term);
             setSearchResults(results);
             setShowSearchResults(results.length > 0);
+            // Auto-focus first result if results are available
+            var newFocusIndex = results.length > 0 ? 0 : -1;
+            setFocusedSearchIndex(newFocusIndex);
+            // Clear refs array and prepare for new results
+            searchResultsRefs.current = new Array(results.length).fill(null);
+            // Scroll to first item when results appear
+            if (newFocusIndex >= 0) {
+                setTimeout(function () { return scrollFocusedItemIntoView(newFocusIndex); }, 100);
+            }
         }, 250);
     };
     var handleSearchResultClick = function (result) {
-        // Expand to node
-        var expandedNode = getNodeParent(data, result.id, []);
-        setExpanded(expandedNode);
+        // Get path to the selected node
+        var pathToNode = getNodeParent(data, result.id, []);
+        // Merge with existing expanded nodes to avoid collapsing other parts of the tree
+        var mergedExpanded = Array.from(new Set(__spreadArray(__spreadArray([], expanded, true), pathToNode, true)));
+        setExpanded(mergedExpanded);
         // Select the node
         setValue(result.id);
         // Clear search
         setSearchTerm("");
         setSearchResults([]);
         setShowSearchResults(false);
-        // Scroll to node after a small delay to ensure tree is expanded
+        setFocusedSearchIndex(-1);
+        if (searchInputRef.current) {
+            searchInputRef.current.blur();
+        }
         setTimeout(function () {
             var nodeElement = document.getElementById(result.id.toString());
             if (nodeElement) {
-                nodeElement.scrollIntoView({ behavior: "smooth", block: "center" });
+                nodeElement.scrollIntoView({
+                    behavior: "smooth",
+                    block: "center",
+                });
             }
-        }, 100);
+        }, 300);
     };
     var renderTree = function (nodes) { return (React__default.createElement(StyledTreeItem, { isChecked: selectedNodes.includes(nodes.id), key: nodes.id, nodeId: nodes.id.toString(), label: React__default.createElement("div", { className: classes.treeLabelRoot },
             nodes.isCode === true && (React__default.createElement(Code, { className: classes.treLabelIcon, htmlColor: "#1ABC9C" })),
@@ -737,13 +863,21 @@ var ModalTreeFilterControl = function (props) {
                 justifyContent: "center",
                 alignItems: "center",
             } },
-            React__default.createElement(LazyLoading, null))) : (React__default.createElement(DialogContent$1, { dividers: true, style: { height: "500px", overflow: "hidden" } },
-            allowSearch && (React__default.createElement("div", { className: classes.searchContainer },
-                React__default.createElement(TextField, { className: classes.searchField, placeholder: "Search items (min. 2 characters)...", variant: "outlined", size: "small", fullWidth: true, value: searchTerm, onChange: handleSearchChange, InputProps: {
+            React__default.createElement(LazyLoading, null))) : (React__default.createElement(DialogContent$1, { dividers: true, style: {
+                height: "500px",
+                overflow: "hidden",
+                display: "flex",
+                flexDirection: "column",
+                padding: 0,
+            } },
+            allowSearch && (React__default.createElement("div", { className: classes.searchContainer, ref: searchContainerRef },
+                React__default.createElement(TextField, { className: classes.searchField, placeholder: "Search (min. 2 characters)...", variant: "outlined", size: "small", fullWidth: true, value: searchTerm, onChange: handleSearchChange, inputRef: searchInputRef, InputProps: {
                         startAdornment: (React__default.createElement(SearchIcon, { style: { marginRight: 8, color: "#999" } })),
                     } }),
                 showSearchResults && (React__default.createElement(Paper, { className: classes.searchResults },
-                    React__default.createElement(List, null, searchResults.map(function (result) { return (React__default.createElement(ListItem, { key: result.id, button: true, className: classes.searchResultItem, onClick: function () { return handleSearchResultClick(result); } },
+                    React__default.createElement(List, null, searchResults.map(function (result, index) { return (React__default.createElement(ListItem, { key: result.id, button: true, ref: function (el) {
+                            searchResultsRefs.current[index] = el;
+                        }, className: "".concat(classes.searchResultItem, " ").concat(index === focusedSearchIndex ? "focused" : ""), onClick: function () { return handleSearchResultClick(result); } },
                         React__default.createElement(ListItemIcon, { className: classes.searchResultIcon }, result.hasChildren ? (React__default.createElement(AccountTreeIcon, { color: "primary", fontSize: "small" })) : (React__default.createElement(Settings$1, { color: "primary", fontSize: "small" }))),
                         React__default.createElement(ListItemText, { primary: result.name, secondary: result.path, classes: {
                                 secondary: classes.searchResultPath,
@@ -775,7 +909,7 @@ var ModalTreeFilterControl = function (props) {
             React__default.createElement(Button, { onClick: function () { return handleOk(); }, color: "primary" }, "OK"))));
 };
 
-var useStyles$I = makeStyles(function (theme) { return ({
+var useStyles$G = makeStyles(function (theme) { return ({
     root: {
         width: "100%",
         backgroundColor: theme.palette.background.paper,
@@ -791,7 +925,7 @@ var useStyles$I = makeStyles(function (theme) { return ({
     },
 }); });
 var TreePickerControl = function (props) {
-    var classes = useStyles$I();
+    var classes = useStyles$G();
     var onSelect = props.onSelect, value = props.value; props.styleLabel; var dataSource = props.dataSource, _a = props.inputTitle, inputTitle = _a === void 0 ? "Asset" : _a; props.showPath; var _c = props.multipleSelectNodes, multipleSelectNodes = _c === void 0 ? false : _c, _d = props.showClearButton, showClearButton = _d === void 0 ? false : _d, showAssetTree = props.showAssetTree, onHide = props.onHide, _e = props.listAssetDrawings, listAssetDrawings = _e === void 0 ? [] : _e, onSuccess = props.onSuccess, isLoading = props.isLoading, _f = props.allowSearch, allowSearch = _f === void 0 ? false : _f, other = __rest(props, ["onSelect", "value", "styleLabel", "dataSource", "inputTitle", "showPath", "multipleSelectNodes", "showClearButton", "showAssetTree", "onHide", "listAssetDrawings", "onSuccess", "isLoading", "allowSearch"]);
     var _g = useState(showAssetTree || false), open = _g[0], setOpen = _g[1];
     var handleClickListItem = function (e) {
@@ -875,7 +1009,7 @@ var TreePickerControl = function (props) {
                 }, onHide: onHide, id: "modal-treeview-filters", title: props.title, keepMounted: true, open: open, onClose: handleClose, isLoading: isLoading, value: value, data: dataSource, onBackdropClick: function () { return setOpen(false); }, multipleSelectNodes: multipleSelectNodes, listAssetDrawings: listAssetDrawings, setListAssetDrawings: listAssetDrawings, onSuccess: onSuccess, allowSearch: allowSearch }, other)))));
 };
 
-var useStyles$H = makeStyles(function (theme) { return ({
+var useStyles$F = makeStyles(function (theme) { return ({
     root: {
         width: "100%",
         backgroundColor: theme.palette.background.paper,
@@ -926,7 +1060,7 @@ function getNodePath(node, nodeId, parentPath, isRoot) {
     return null;
 }
 var TreePickerControlV2 = function (props) {
-    var classes = useStyles$H();
+    var classes = useStyles$F();
     var value = props.value, onSelect = props.onSelect; props.styleLabel; var dataSource = props.dataSource; props.getOptionName; var _a = props.inputTitle, inputTitle = _a === void 0 ? "Asset" : _a; props.showPath; var _c = props.multipleSelectNodes, multipleSelectNodes = _c === void 0 ? false : _c, _d = props.showClearButton, showClearButton = _d === void 0 ? false : _d, _e = props.showFullPath, showFullPath = _e === void 0 ? false : _e, showAssetTree = props.showAssetTree, onHide = props.onHide, _f = props.listAssetDrawings, listAssetDrawings = _f === void 0 ? [] : _f, onSuccess = props.onSuccess, isLoading = props.isLoading, _g = props.disabled, disabled = _g === void 0 ? false : _g, _h = props.mostUsedCount, mostUsedCount = _h === void 0 ? 0 : _h, _j = props.itemsWithParent, itemsWithParent = _j === void 0 ? [] : _j, _k = props.dialogMaxWidth, dialogMaxWidth = _k === void 0 ? "sm" : _k, _l = props.allowSearch, allowSearch = _l === void 0 ? false : _l, other = __rest(props, ["value", "onSelect", "styleLabel", "dataSource", "getOptionName", "inputTitle", "showPath", "multipleSelectNodes", "showClearButton", "showFullPath", "showAssetTree", "onHide", "listAssetDrawings", "onSuccess", "isLoading", "disabled", "mostUsedCount", "itemsWithParent", "dialogMaxWidth", "allowSearch"]);
     var _m = useState(false), open = _m[0], setOpen = _m[1];
     var handleClickListItem = function (event) {
@@ -1118,7 +1252,7 @@ DataGridControl.propTypes = {
     rows: PropTypes.array,
 };
 
-var useStyles$G = makeStyles(function (theme) { return ({
+var useStyles$E = makeStyles(function (theme) { return ({
     contentWrapper: {
         padding: theme.spacing(2),
     },
@@ -1195,7 +1329,7 @@ var useStyles$G = makeStyles(function (theme) { return ({
 }); });
 var Alert$1 = function (_a) {
     var show = _a.show, variant = _a.variant, dismissible = _a.dismissible, onClose = _a.onClose, children = _a.children;
-    var classes = useStyles$G();
+    var classes = useStyles$E();
     return (React__default.createElement(Collapse, { in: show },
         React__default.createElement(Paper, { className: "".concat(classes.alert, " ").concat(variant === "success" ? classes.success : classes.error), elevation: 0 },
             React__default.createElement("div", { className: classes.alertContent },
@@ -1206,7 +1340,7 @@ var Alert$1 = function (_a) {
 var GenericPanel = function (_a) {
     var _b;
     var title = _a.title, _c = _a.description, description = _c === void 0 ? "" : _c, _d = _a.showPromptSuccess, showPromptSuccess = _d === void 0 ? false : _d, _e = _a.showPromptError, showPromptError = _e === void 0 ? false : _e, _f = _a.onDismissSuccess, onDismissSuccess = _f === void 0 ? function () { return null; } : _f, _g = _a.onDismissError, onDismissError = _g === void 0 ? function () { return null; } : _g, successMessage = _a.successMessage, error = _a.error, children = _a.children;
-    var classes = useStyles$G();
+    var classes = useStyles$E();
     return (React__default.createElement(Box, { className: classes.contentWrapper },
         React__default.createElement(Box, { className: classes.alertContainer },
             React__default.createElement(Alert$1, { show: showPromptError, variant: "danger", dismissible: true, onClose: onDismissError },
@@ -1225,7 +1359,7 @@ var GenericPanel = function (_a) {
 };
 var MasterDetailPanel = function (_a) {
     var title = _a.title, onSave = _a.onSave, onCancel = _a.onCancel, onDelete = _a.onDelete, saveStatus = _a.saveStatus, deleteStatus = _a.deleteStatus, _b = _a.showSave, showSave = _b === void 0 ? true : _b, showDelete = _a.showDelete, children = _a.children;
-    var classes = useStyles$G();
+    var classes = useStyles$E();
     return (React__default.createElement(Box, { className: classes.masterDetailPanel },
         React__default.createElement(Card, { variant: "outlined" },
             React__default.createElement(CardContent, null,
@@ -1238,7 +1372,7 @@ var MasterDetailPanel = function (_a) {
                     showDelete && (React__default.createElement(Button, { variant: "contained", color: "primary", className: classes.button, onClick: onDelete, disabled: !deleteStatus }, "Delete")))))));
 };
 var FilterPanel = function (props) {
-    var classes = useStyles$G();
+    var classes = useStyles$E();
     var onClickExport = props.onClickExport, onClickReset = props.onClickReset, OnClickGo = props.OnClickGo, showButtons = props.showButtons, showExport = props.showExport, _a = props.extraButtons, extraButtons = _a === void 0 ? [] : _a, children = props.children;
     var handleExport = function () {
         if (onClickExport)
@@ -1263,7 +1397,7 @@ var FilterPanel = function (props) {
                     showExport && (React__default.createElement(Button, { variant: "contained", className: "".concat(classes.button, " ").concat(classes.exportButton), onClick: handleExport, startIcon: React__default.createElement(GetAppIcon, null) }, "Excel"))))))));
 };
 var LongFilterPanel = function (props) {
-    var classes = useStyles$G();
+    var classes = useStyles$E();
     var onClickExport = props.onClickExport, onClickReset = props.onClickReset, OnClickGo = props.OnClickGo, showButtons = props.showButtons, showExport = props.showExport, _a = props.extraButtons, extraButtons = _a === void 0 ? [] : _a, children = props.children;
     var handleExport = function () {
         if (onClickExport)
@@ -1726,7 +1860,7 @@ var getShiftsRangeByParameters = function (period_1) {
     });
 };
 
-var useStyles$F = makeStyles(function (theme) { return ({
+var useStyles$D = makeStyles(function (theme) { return ({
     container: {
         display: "grid",
         gridTemplateColumns: "auto minmax(100px, 1fr) 80px minmax(100px, 1fr) auto auto",
@@ -1772,7 +1906,7 @@ var DEFAULT_PERIOD_OPTIONS = [
 var ShiftPeriodNavigatorControl = function (_a) {
     var _b;
     var value = _a.value, onChange = _a.onChange, _c = _a.showShiftAndCrews, showShiftAndCrews = _c === void 0 ? true : _c, _d = _a.dateFormat, dateFormat = _d === void 0 ? "MM/DD/YYYY HH:mm a" : _d, _e = _a.periodOptions, periodOptions = _e === void 0 ? DEFAULT_PERIOD_OPTIONS : _e;
-    var classes = useStyles$F();
+    var classes = useStyles$D();
     var _f = useState(((_b = periodOptions[0]) === null || _b === void 0 ? void 0 : _b.value) || "Day"), period = _f[0], setPeriod = _f[1];
     var _g = useState(false), loadingShiftPeriodList = _g[0], setLoadingShiftPeriodList = _g[1];
     var _h = useState(""); _h[0]; var setError = _h[1];
@@ -2051,7 +2185,7 @@ var ShiftPeriodNavigatorControl = function (_a) {
                 React__default.createElement(SkipNextIcon, null)))));
 };
 
-var useStyles$E = makeStyles(function (theme) { return ({
+var useStyles$C = makeStyles(function (theme) { return ({
     contextMenu: {
         backgroundColor: "#fff",
         borderRadius: "2px",
@@ -2143,7 +2277,7 @@ var useContextMenuMESF = function () { return useContext(ContextMenuMESFContext)
 
 var ContextMenu$1 = function () {
     var _a = useContextMenuMESF(), show = _a.show, position = _a.position, options = _a.options;
-    var classes = useStyles$E();
+    var classes = useStyles$C();
     var menuRef = useRef(null);
     var _b = useState("0"), x = _b[0], setX = _b[1];
     var _c = useState("0"), y = _c[0], setY = _c[1];
@@ -2580,7 +2714,7 @@ var JobsProvider = function (_a) {
     return (React__default.createElement(JobsContext.Provider, { value: { state: state, actions: actions } }, children));
 };
 
-var useStyles$D = makeStyles(function (theme) { return ({
+var useStyles$B = makeStyles(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -2598,7 +2732,7 @@ var useStyles$D = makeStyles(function (theme) { return ({
 var useJobsTableData = function (_a) {
     var setShowModal = _a.setShowModal, setJobSelected = _a.setJobSelected, showContextMenu = _a.showContextMenu;
     var rows = useJobsContext().state.jobsData;
-    useStyles$D();
+    useStyles$B();
     var renderButtonMenu = function (params) {
         return (React__default.createElement(Button, { style: {}, onClick: function (e) { return showContextMenu(e, params.data, "jobsContext"); } },
             React__default.createElement(FormatListBulletedSharpIcon, { style: { height: "auto" }, color: "action" })));
@@ -2692,7 +2826,7 @@ var CustomStatusPanel = function (_a) {
     return (React.createElement(IconButton$1, { onClick: handleNew, color: "primary", style: { marginLeft: -15 } },
         React.createElement(PlaylistAddIcon, { style: { width: 30, height: 30 } })));
 };
-var useStyles$C = makeStyles(function (theme) { return ({
+var useStyles$A = makeStyles(function (theme) { return ({
     root: {
         "& .MuiDataGrid-row": {
             cursor: "pointer",
@@ -2771,7 +2905,7 @@ var useStyles$C = makeStyles(function (theme) { return ({
 }); });
 var TableJobs = function (_a) {
     var getJobsFromAPI = _a.getJobsFromAPI, isLoading = _a.isLoading;
-    var classes = useStyles$C();
+    var classes = useStyles$A();
     var _b = useState(null), jobSelected = _b[0], setJobSelected = _b[1];
     var _c = useState(null), gridApi = _c[0], setGridApi = _c[1];
     var _d = useState(""), errorMessage = _d[0], setErrorMessage = _d[1];
@@ -3125,12 +3259,14 @@ var CodeFilter = function (_a) {
 };
 
 var DateFilter = function (_a) {
-    var date = _a.date, setDate = _a.setDate, _b = _a.label, label = _b === void 0 ? "Date" : _b;
+    var date = _a.date, setDate = _a.setDate, _b = _a.label, label = _b === void 0 ? "Date" : _b, minDate = _a.minDate, maxDate = _a.maxDate;
     var handleDateChange = function (datePicker) {
-        setDate(datePicker.toDate());
+        if (datePicker) {
+            setDate(datePicker.toDate());
+        }
     };
     return (React__default.createElement(MuiPickersUtilsProvider, { utils: MomentUtils },
-        React__default.createElement(KeyboardDatePicker, { disableToolbar: true, variant: "inline", format: "MM/DD/yyyy", id: "date-picker-inline", style: {
+        React__default.createElement(KeyboardDatePicker, { disableToolbar: true, variant: "inline", format: "MM/DD/yyyy", id: "date-picker-inline", autoOk: true, minDate: minDate, maxDate: maxDate || moment$3().toDate(), style: {
                 minWidth: "100%",
                 borderTopLeftRadius: 3,
                 borderTopRightRadius: 3,
@@ -3141,14 +3277,13 @@ var DateFilter = function (_a) {
 
 var SearchFilter = function (_a) {
     var search = _a.search, setSearch = _a.setSearch;
-    return (React__default.createElement(React__default.Fragment, null,
+    return (React__default.createElement("div", { style: { marginTop: 8 } },
         React__default.createElement(TextField, { style: {
                 minWidth: "100%",
-                backgroundColor: "#f5f8fa",
-            }, label: "Search", variant: "outlined", margin: "dense", value: search, onChange: function (e) { return setSearch(e.target.value); }, autoComplete: "off" })));
+            }, label: "Search", variant: "outlined", size: "small", value: search, onChange: function (e) { return setSearch(e.target.value); }, autoComplete: "off" })));
 };
 
-var useStyles$B = makeStyles(function (theme) { return ({
+var useStyles$z = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15,
     },
@@ -3160,54 +3295,45 @@ var useStyles$B = makeStyles(function (theme) { return ({
 }); });
 var formatTime = function (nowTime) {
     if (nowTime == undefined)
-        return;
-    return nowTime.toLocaleDateString() + " " + nowTime.toLocaleTimeString();
+        return "";
+    // Ensure nowTime is a Date object
+    var date;
+    if (nowTime instanceof Date) {
+        date = nowTime;
+    }
+    else if (typeof nowTime === "string" || typeof nowTime === "number") {
+        date = new Date(nowTime);
+    }
+    else {
+        return "";
+    }
+    // Check if date is valid
+    if (isNaN(date.getTime())) {
+        return "";
+    }
+    return date.toLocaleDateString() + " " + date.toLocaleTimeString();
 };
 var ModalLogSelected = function (_a) {
     var show = _a.show, onHide = _a.onHide, selectedLog = _a.selectedLog;
-    var classes = useStyles$B();
+    var classes = useStyles$z();
     return (React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
         React__default.createElement(MesfModal, { title: "LOG DETAILS", open: show, handleClose: function () { return onHide(false); }, maxWidth: "md", id: "log-details-modal" },
             React__default.createElement(MesfModal.Content, { style: { padding: "15px 30px" } },
                 React__default.createElement(Grid, { container: true, spacing: 1, alignItems: "flex-start" },
                     React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
-                        React__default.createElement(TextField
-                        // disabled
-                        , { 
-                            // disabled
-                            variant: "standard", 
-                            // variant="outline"
-                            fullWidth: true, margin: "dense", label: "User", defaultValue: selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.User, InputProps: {
+                        React__default.createElement(TextField, { variant: "standard", fullWidth: true, margin: "dense", label: "User", defaultValue: selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.User, InputProps: {
                                 readOnly: true,
                             } })),
                     React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
-                        React__default.createElement(TextField
-                        // disabled
-                        , { 
-                            // disabled
-                            variant: "standard", 
-                            // variant="outline"
-                            fullWidth: true, margin: "dense", label: "Time", defaultValue: formatTime(selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.Timestamp), InputProps: {
+                        React__default.createElement(TextField, { variant: "standard", fullWidth: true, margin: "dense", label: "Time", defaultValue: formatTime(selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.Timestamp), InputProps: {
                                 readOnly: true,
                             } })),
                     React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
-                        React__default.createElement(TextField
-                        // disabled
-                        , { 
-                            // disabled
-                            variant: "standard", 
-                            // variant="outline"
-                            fullWidth: true, margin: "dense", label: "Source", defaultValue: selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.Source, InputProps: {
+                        React__default.createElement(TextField, { variant: "standard", fullWidth: true, margin: "dense", label: "Source", defaultValue: selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.Source, InputProps: {
                                 readOnly: true,
                             } })),
                     React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
-                        React__default.createElement(TextField
-                        // disabled
-                        , { 
-                            // disabled
-                            variant: "standard", 
-                            // variant="outline"
-                            fullWidth: true, margin: "dense", label: "Type", defaultValue: selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.LogTypeCode, InputProps: {
+                        React__default.createElement(TextField, { variant: "standard", fullWidth: true, margin: "dense", label: "Type", defaultValue: selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.LogTypeCode, InputProps: {
                                 readOnly: true,
                             } })),
                     React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { paddingRight: 20, paddingLeft: 5, marginBottom: 20 } },
@@ -3326,14 +3452,7 @@ var useLogTableData = function () {
     return { rows: rows, columnDefs: columnDefs };
 };
 
-var ButtonWithLoading = function (_a) {
-    var children = _a.children, isLoading = _a.isLoading, props = __rest(_a, ["children", "isLoading"]);
-    return (React__default.createElement(Button, __assign({}, props, { disabled: isLoading }),
-        isLoading && React__default.createElement(CircularProgress, { size: "1rem" }),
-        children));
-};
-
-var useStyles$A = makeStyles(function (theme) { return ({
+var useStyles$y = makeStyles(function (theme) { return ({
     root: {
         "& .MuiDataGrid-row": {
             cursor: "pointer",
@@ -3344,49 +3463,12 @@ var useStyles$A = makeStyles(function (theme) { return ({
         "& .MuiDataGrid-columnHeaderTitle, & .MuiTablePagination-caption": {
             fontWeight: "bold",
         },
-        // "& .ag-icon-menu": {
-        // 	display: "none",
-        // },
-        // "& .ag-header-cell-label": {
-        // 	display: "flex",
-        // 	alignItems: "start",
-        // 	justifyContent: "start",
-        // 	fontSize: "1rem",
-        // 	fontWeight: "bold",
-        // },
-        // "& .ag-header-cell-centered .ag-header-cell-label": {
-        // 	justifyContent: "center !important",
-        // },
-        //
-        // "& .ag-header-cell-text": {
-        // 	textAlign: "start !important",
-        // },
-        //
-        // "& .ag-checkbox-input-wrapper": {
-        // 	margin: "0 10px",
-        // },
-        // "& .ag-cell": {
-        // 	padding: "2px !important",
-        // },
-        // "& .ag-header-cell": {
-        // 	padding: "0px !important",
-        // 	textAlign: "center !important",
-        // 	fontSize: 10,
-        // 	display: "flex",
-        // 	alignItems: "center",
-        // 	justifyContent: "center",
-        // },
-        // "& .ag-cell-wrapper": {},
-        // "& .ag-menu-option": {
-        // 	cursor: "pointer",
-        // },
     },
     card: {
-        backgroundColor: "#e9f2f8",
+        backgroundColor: "#ffffff",
         display: "flex",
         alignItems: "center",
         height: "100%",
-        // justifyContent: "center",
     },
     filters: {
         position: "relative",
@@ -3439,7 +3521,7 @@ var useLogsOptionsFunctions = function (_a) {
 var TableLogs = function (_a) {
     var isLoading = _a.isLoading; _a.rowData; var refreshData = _a.refreshData;
     var _b = useLogsContext(), _c = _b.state, Timezone = _c.Timezone, _d = _c.searchData, Start = _d.Start, End = _d.End, Search = _d.Search, LogTypeCode = _d.LogTypeCode, _e = _b.actions, setLogTypeCodeFilter = _e.setLogTypeCodeFilter, setEndFilter = _e.setEndFilter, setStartFilter = _e.setStartFilter, setSearchFilter = _e.setSearchFilter, setTimezone = _e.setTimezone;
-    var classes = useStyles$A();
+    var classes = useStyles$y();
     var gridStyle = useMemo(function () { return ({ height: "100%", width: "100%" }); }, []);
     var _f = useState(null); _f[0]; var setGridAPI = _f[1];
     var _g = useState(false), showLogModal = _g[0], setShowLogModal = _g[1];
@@ -3458,10 +3540,31 @@ var TableLogs = function (_a) {
         };
     }, []);
     var _l = useContextMenuMESF(), showContextMenu = _l.showContextMenu, registerConfig = _l.registerConfig;
-    var handleSubmit = function (ev) {
-        ev.preventDefault();
-        refreshData({ Start: Start, End: End, Search: Search, LogTypeCode: LogTypeCode });
-    };
+    // Debounced search timer ref
+    var searchTimeoutRef = useRef(null);
+    // Store current values in ref to avoid closure issues
+    var currentValues = useRef({ Start: Start, End: End, Search: Search, LogTypeCode: LogTypeCode });
+    currentValues.current = { Start: Start, End: End, Search: Search, LogTypeCode: LogTypeCode };
+    // Auto search when Search filter changes (with debounce)
+    useEffect(function () {
+        if (searchTimeoutRef.current) {
+            clearTimeout(searchTimeoutRef.current);
+        }
+        searchTimeoutRef.current = setTimeout(function () {
+            var _a = currentValues.current, currentStart = _a.Start, currentEnd = _a.End, currentSearch = _a.Search, currentLogTypeCode = _a.LogTypeCode;
+            refreshData({
+                Start: currentStart,
+                End: currentEnd,
+                Search: currentSearch,
+                LogTypeCode: currentLogTypeCode,
+            });
+        }, 500);
+        return function () {
+            if (searchTimeoutRef.current) {
+                clearTimeout(searchTimeoutRef.current);
+            }
+        };
+    }, [Search]);
     var handleResetButtonClick = function () {
         resetFilter();
         refreshData({
@@ -3484,15 +3587,15 @@ var TableLogs = function (_a) {
     }, [isLoading]);
     // Btn reset data
     var resetFilter = function () {
-        setStartFilter(null);
-        setEndFilter(null);
+        setStartFilter(moment$3().add(-5, "days").hour(0).minute(0).second(0).toDate());
+        setEndFilter(moment$3().hour(23).minute(59).second(59).toDate());
         setSearchFilter("");
         setLogTypeCodeFilter("A");
         setSelectedLog(undefined);
     };
     var rowClicked = function (rowClickedEvent) {
         var data = rowClickedEvent.data;
-        if (data)
+        if (!data)
             return;
         setSelectedLog(data);
         setShowLogModal(true);
@@ -3527,24 +3630,19 @@ var TableLogs = function (_a) {
                 React.createElement(Grid, { item: true, md: 12, xs: 12 },
                     React.createElement(Card, { className: classes.card },
                         React.createElement(CardContent, { style: { padding: "6px !important", width: "100%" } },
-                            React.createElement("form", { onSubmit: handleSubmit, className: classes.form },
-                                React.createElement(Grid, { container: true, alignItems: "center", direction: "row", spacing: 1 },
-                                    React.createElement(Grid, { item: true, md: 2, xs: 12 },
-                                        React.createElement(DateFilter, { label: "From", date: Start, setDate: setStartFilter })),
-                                    React.createElement(Grid, { item: true, md: 2, xs: 12 },
-                                        React.createElement(DateFilter, { label: "To", date: End, setDate: setEndFilter })),
-                                    React.createElement(Grid, { item: true, md: 2, xs: 12 },
-                                        React.createElement(CodeFilter, { LogTypeCode: LogTypeCode, setLogTypeCodeFilter: setLogTypeCodeFilter })),
-                                    React.createElement(Grid, { item: true, md: 2, xs: 12 },
-                                        React.createElement(TimezoneSelector, { value: Timezone, onChange: setTimezone })),
-                                    React.createElement(Grid, { item: true, container: true, md: 4, xs: 12, spacing: 1, justifyContent: "flex-end", alignItems: "flex-end" },
-                                        React.createElement(Grid, { item: true, md: 4, xs: 12 },
-                                            React.createElement(Button, { variant: "contained", color: "default", onClick: handleResetButtonClick, fullWidth: true }, "Reset")),
-                                        React.createElement(Grid, { item: true, md: 4, xs: 12 },
-                                            React.createElement(ButtonWithLoading, { isLoading: isLoading, fullWidth: true, variant: "contained", color: "primary", type: "submit" }, "Search")))),
-                                React.createElement(Grid, { container: true, direction: "row" },
-                                    React.createElement(Grid, { item: true, md: 12, xs: 12 },
-                                        React.createElement(SearchFilter, { search: Search, setSearch: setSearchFilter }))))))),
+                            React.createElement(Grid, { container: true, alignItems: "center", direction: "row", spacing: 1 },
+                                React.createElement(Grid, { item: true, md: 2, xs: 12 },
+                                    React.createElement(DateFilter, { label: "From", date: Start, setDate: setStartFilter, maxDate: End })),
+                                React.createElement(Grid, { item: true, md: 2, xs: 12 },
+                                    React.createElement(DateFilter, { label: "To", date: End, setDate: setEndFilter, minDate: Start })),
+                                React.createElement(Grid, { item: true, md: 1, xs: 12 },
+                                    React.createElement(CodeFilter, { LogTypeCode: LogTypeCode, setLogTypeCodeFilter: setLogTypeCodeFilter })),
+                                React.createElement(Grid, { item: true, md: 2, xs: 12 },
+                                    React.createElement(TimezoneSelector, { value: Timezone, onChange: setTimezone })),
+                                React.createElement(Grid, { item: true, md: 4, xs: 12 },
+                                    React.createElement(SearchFilter, { search: Search, setSearch: setSearchFilter })),
+                                React.createElement(Grid, { item: true, md: 1, xs: 12, style: { paddingTop: 8 } },
+                                    React.createElement(Button, { variant: "contained", color: "default", onClick: handleResetButtonClick, fullWidth: true, size: "small" }, "Reset")))))),
                 React.createElement(Grid, { item: true, md: 12, xs: 12, style: {
                         height: "70vh",
                     } },
@@ -3733,7 +3831,7 @@ var deleteProfile = function (profileId) { return __awaiter(void 0, void 0, void
     });
 }); };
 
-var useStyles$z = makeStyles(function (theme) { return ({
+var useStyles$x = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15,
     },
@@ -3756,7 +3854,7 @@ var CreateProfile = function (_a) {
     var _d = useState(""), message = _d[0], setMessage = _d[1];
     var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
     var _f = useState(""), error = _f[0], setError = _f[1];
-    var classes = useStyles$z();
+    var classes = useStyles$x();
     var _g = useForm({ defaultValues: INITIAL_VALUES$3 }), register = _g.register, handleSubmit = _g.handleSubmit, reset = _g.reset, errors = _g.formState.errors;
     var onSubmit = function (data) { return __awaiter(void 0, void 0, void 0, function () {
         var res;
@@ -3992,7 +4090,7 @@ var DataTable = function (_a) {
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
-var useStyles$y = makeStyles(function (theme) { return ({
+var useStyles$w = makeStyles(function (theme) { return ({
     root: {
         "& .MuiFormLabel-asterisk": {
             display: "none",
@@ -4001,7 +4099,7 @@ var useStyles$y = makeStyles(function (theme) { return ({
 }); });
 var ActionsOfProfile = function (_a) {
     var profileForEdit = _a.profileForEdit, show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$y();
+    var classes = useStyles$w();
     var _b = useState(null), actionsOfProfile = _b[0], setActionsOfProfile = _b[1];
     var _c = useState(false), open = _c[0], setOpen = _c[1];
     var _d = useState(true), isLoading = _d[0], setIsLoading = _d[1];
@@ -4189,7 +4287,7 @@ var ProfilesProvider = function (_a) {
     return (React__default.createElement(ProfilesContext.Provider, { value: { state: state, actions: actions } }, children));
 };
 
-var useStyles$x = makeStyles(function (theme) { return ({
+var useStyles$v = makeStyles(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -4207,7 +4305,7 @@ var useStyles$x = makeStyles(function (theme) { return ({
 var useTableData$3 = function (_a) {
     var setProfileId = _a.setProfileId, setModalProceduresProfile = _a.setModalProceduresProfile, setModalDeleteProfile = _a.setModalDeleteProfile, showContextMenu = _a.showContextMenu;
     var state = useProfilesContext().state;
-    var classes = useStyles$x();
+    var classes = useStyles$v();
     var rows = state.profiles.map(function (_a) {
         var ProfileId = _a.ProfileId, ProfileName = _a.ProfileName;
         return ({
@@ -4279,7 +4377,7 @@ var useTableData$3 = function (_a) {
     return { rows: rows, columnDefs: columnDefs };
 };
 
-var useStyles$w = makeStyles(function (theme) { return ({
+var useStyles$u = makeStyles(function (theme) { return ({
     root: {
         "& .ag-icon-menu": {
             display: "none",
@@ -4350,7 +4448,7 @@ var TableProfiles = function (_a) {
     var _d = useState(false), modalDeleteProfile = _d[0], setModalDeleteProfile = _d[1];
     var _e = useState(null), profile = _e[0], setProfile = _e[1];
     var _f = useState(null), gridApi = _f[0], setGridApi = _f[1];
-    var classes = useStyles$w();
+    var classes = useStyles$u();
     var loadingOverlayComponent = useMemo(function () {
         return LazyLoading;
     }, []);
@@ -4582,7 +4680,7 @@ var DeleteShiftParameters = function (PatternStart) { return __awaiter(void 0, v
     });
 }); };
 
-var useStyles$v = makeStyles(function (theme) { return ({
+var useStyles$t = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15,
     },
@@ -4608,7 +4706,7 @@ var CreateShift = function (_a) {
     var _d = useState(false), open = _d[0], setOpen = _d[1];
     var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
     var _f = useState(""), error = _f[0], setError = _f[1];
-    var classes = useStyles$v();
+    var classes = useStyles$t();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _g = useForm({
         defaultValues: shiftTableData ? shiftTableData : INITIAL_VALUES$2,
@@ -4810,7 +4908,7 @@ var CreateShift = function (_a) {
             React.createElement(Alert, { severity: "success", onClose: handleClose }, "The shift was created successfully"))));
 };
 
-var useStyles$u = makeStyles(function (theme) { return ({
+var useStyles$s = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15,
     },
@@ -4836,7 +4934,7 @@ var DeleteShift = function (_a) {
     var _c = useState(false), open = _c[0], setOpen = _c[1];
     var _d = useState(false), isSubmitLoading = _d[0], setIsSubmitLoading = _d[1];
     var _e = useState(false), deleteAlert = _e[0], setDeleteAlert = _e[1];
-    var classes = useStyles$u();
+    var classes = useStyles$s();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _f = useState(""), error = _f[0], setError = _f[1];
     var _g = useForm({ defaultValues: INITIAL_VALUES$2 }), control = _g.control, setValue = _g.setValue, reset = _g.reset, watch = _g.watch, errors = _g.formState.errors;
@@ -4975,7 +5073,7 @@ var DeleteShift = function (_a) {
             React.createElement(Alert, { severity: "warning", onClose: handleClose }, "The shift was deleted successfully"))));
 };
 
-var useStyles$t = makeStyles(function (theme) { return ({
+var useStyles$r = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15,
     },
@@ -5002,7 +5100,7 @@ var EditShift = function (_a) {
     var _d = useState(""), error = _d[0], setError = _d[1];
     var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
     var _f = useState(false), initialShiftPerDayAndCrewsNumber = _f[0], setInitialShiftPerDayAndCrewsNumber = _f[1];
-    var classes = useStyles$t();
+    var classes = useStyles$r();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _g = useForm({ defaultValues: INITIAL_VALUES$2 }), control = _g.control, setValue = _g.setValue, handleSubmit = _g.handleSubmit, reset = _g.reset, watch = _g.watch, errors = _g.formState.errors;
     // Progress bar
@@ -5270,7 +5368,7 @@ var useShiftsOptionsFunctions = function (_a) {
     };
 };
 
-var useStyles$s = makeStyles(function (theme) { return ({
+var useStyles$q = makeStyles(function (theme) { return ({
     root: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -5289,7 +5387,7 @@ var useTableData$2 = function (_a) {
     var _b;
     var setOpenModalEditShift = _a.setOpenModalEditShift, setOpenModalDeleteShift = _a.setOpenModalDeleteShift, showContextMenu = _a.showContextMenu;
     var _c = useShiftsCrewsContext(), state = _c.state, actions = _c.actions;
-    var classes = useStyles$s();
+    var classes = useStyles$q();
     var rows = (_b = state.shifts) === null || _b === void 0 ? void 0 : _b.map(function (_a) {
         var PatternStart = _a.PatternStart, ShiftCodes = _a.ShiftCodes, Crews = _a.Crews, PatternDays = _a.PatternDays, CrewRotation = _a.CrewRotation, Comments = _a.Comments, CanEdit = _a.CanEdit;
         return ({
@@ -5400,7 +5498,7 @@ var useTableData$2 = function (_a) {
     return { rows: rows, columnDefs: columnDefs };
 };
 
-var useStyles$r = makeStyles(function (theme) { return ({
+var useStyles$p = makeStyles(function (theme) { return ({
     root: {
     // "& .ag-icon-menu": {
     // 	display: "none",
@@ -5452,7 +5550,7 @@ var useStyles$r = makeStyles(function (theme) { return ({
 }); });
 var TableShiftsCrews = function (_a) {
     _a.isLoading; var getShiftsCrewsFromAPI = _a.getShiftsCrewsFromAPI;
-    var classes = useStyles$r();
+    var classes = useStyles$p();
     var _b = useState(false), openModalNew = _b[0], setOpenModalNew = _b[1];
     var _c = useState(false), openModalEditShift = _c[0], setOpenModalEditShift = _c[1];
     var _d = useState(false), openModalDeleteShift = _d[0], setOpenModalDeleteShift = _d[1];
@@ -5736,6 +5834,65 @@ var ConfigurationAssetProvider = function (_a) {
     return (React__default.createElement(ConfigurationAssetContext.Provider, { value: { state: state, actions: actions } }, children));
 };
 
+var getUser = function (UserId, UserName) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "UserId", value: UserId });
+                parameters.push({ name: "UserName", value: UserName });
+                return [4 /*yield*/, apiService.callV2("[SEC].[GetUser]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+var getAssets = function () { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                return [4 /*yield*/, apiService.callV2("[MES].[GetAssets]", [])];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+var getUTLSettings = function () { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                return [4 /*yield*/, apiService.callV2("[UTL].[GetSettings]", [])];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+var upsertDefaultAreaId = function (UserId, DefaultAreaId) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "UserId", value: UserId });
+                parameters.push({ name: "DefaultAssetId", value: DefaultAreaId });
+                return [4 /*yield*/, apiService.callV2("[SEC].[UpsertDefaultAssetId]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+
 var TransformAssetModelData = function (node) {
     var model = {
         id: node.AssetId,
@@ -5892,7 +6049,7 @@ var useAssetCodes = function () {
     return { loadFilterAssets: loadFilterAssets };
 };
 
-var useStyles$q = makeStyles(function (theme) { return ({
+var useStyles$o = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none",
@@ -5935,7 +6092,7 @@ var useStyles$q = makeStyles(function (theme) { return ({
 }); });
 var CreateNewAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$q();
+    var classes = useStyles$o();
     var _b = useState(true), fullWidth = _b[0]; _b[1];
     var _c = useState("sm"), maxWidth = _c[0]; _c[1];
     var _d = useState(false), assetCreatedSuccess = _d[0], setAssetCreatedSuccess = _d[1];
@@ -6066,7 +6223,7 @@ var CreateNewAssetDialog = function (_a) {
             React__default.createElement(Alert$3, { severity: "info", onClose: handleClose }, "Document created successfully"))));
 };
 
-var useStyles$p = makeStyles(function (theme) { return ({
+var useStyles$n = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none",
@@ -6114,7 +6271,7 @@ var useStyles$p = makeStyles(function (theme) { return ({
 }); });
 var EditAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$p();
+    var classes = useStyles$n();
     var _b = useState(true), fullWidth = _b[0]; _b[1];
     var _c = useState("sm"), maxWidth = _c[0]; _c[1];
     var _d = useState(false), assetEditedSuccess = _d[0], setAssetEditedSuccess = _d[1];
@@ -6234,7 +6391,7 @@ var EditAssetDialog = function (_a) {
                                 React__default.createElement(Alert$2, { severity: "info", onClose: handleClose }, "Document created succesfully")))))))));
 };
 
-var useStyles$o = makeStyles(function (theme) { return ({
+var useStyles$m = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none",
@@ -6278,7 +6435,7 @@ var useStyles$o = makeStyles(function (theme) { return ({
 }); });
 var RemoveAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$o();
+    var classes = useStyles$m();
     var _b = useState(true), fullWidth = _b[0]; _b[1];
     var _c = useState("sm"), maxWidth = _c[0]; _c[1];
     var _d = useState(false), assetRemovedSuccess = _d[0], setAssetRemovedSuccess = _d[1];
@@ -6337,7 +6494,7 @@ var RemoveAssetDialog = function (_a) {
             React__default.createElement(Alert$3, { severity: "info", onClose: handleClose }, "Asset removed succesfully"))));
 };
 
-var useStyles$n = makeStyles(function (theme) { return ({
+var useStyles$l = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none",
@@ -6388,7 +6545,7 @@ var useStyles$n = makeStyles(function (theme) { return ({
 }); });
 var ViewerAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$n();
+    var classes = useStyles$l();
     var _b = useState(true), fullWidth = _b[0]; _b[1];
     var _c = useState("sm"), maxWidth = _c[0]; _c[1];
     var _d = useConfigurationAssetContext().state, dataToCreateAsset = _d.dataToCreateAsset, assetNodeSelectedInTree = _d.assetNodeSelectedInTree;
@@ -6567,7 +6724,7 @@ var TypeIcon = function (props) {
     }
 };
 
-var useStyles$m = makeStyles(function (theme) { return ({
+var useStyles$k = makeStyles(function (theme) { return ({
     root: {
         alignItems: "center",
         backgroundColor: "#1967d2",
@@ -6592,7 +6749,7 @@ var useStyles$m = makeStyles(function (theme) { return ({
 }); });
 var CustomDragPreview$1 = function (props) {
     var _a;
-    var classes = useStyles$m();
+    var classes = useStyles$k();
     var item = props.monitorProps.item;
     return (React__default.createElement("div", { className: classes.root },
         React__default.createElement("div", { className: classes.icon },
@@ -6600,7 +6757,7 @@ var CustomDragPreview$1 = function (props) {
         React__default.createElement("div", { className: classes.label }, item.text)));
 };
 
-var useStyles$l = makeStyles(function (theme) { return ({
+var useStyles$j = makeStyles(function (theme) { return ({
     root: {
         alignItems: "center",
         display: "flex",
@@ -6647,7 +6804,7 @@ var CustomNode = function (_a) {
     var _c = useConfigurationAssetContext(), openAssets = _c.state.openAssets, setOpenAssets = _c.actions.setOpenAssets;
     var _d = props.node, id = _d.id, droppable = _d.droppable, data = _d.data;
     var indent = props.depth * 24;
-    var classes = useStyles$l();
+    var classes = useStyles$j();
     var nodeClasses = "".concat(classes.customNodeRoot, " ").concat(classes.root, " ").concat(isSelected ? classes.selected : "");
     var handleClick = function (e) {
         props.onClick(e, props.node);
@@ -6702,7 +6859,7 @@ var CustomNode = function (_a) {
             React__default.createElement(Typography$1, { variant: "body2" }, props.node.text))));
 };
 
-var useStyles$k = makeStyles(function (theme) { return ({
+var useStyles$i = makeStyles(function (theme) { return ({
     root: {
         alignItems: "flex-start",
         backgroundColor: "#1967d2",
@@ -6735,7 +6892,7 @@ var useStyles$k = makeStyles(function (theme) { return ({
     },
 }); });
 var MultipleDragPreview = function (props) {
-    var classes = useStyles$k();
+    var classes = useStyles$i();
     return (React__default.createElement(Badge, { classes: { badge: classes.badge }, color: "error", badgeContent: props.dragSources.length, anchorOrigin: { vertical: "top", horizontal: "right" } },
         React__default.createElement("div", { className: classes.root, "data-testid": "custom-drag-preview" }, props.dragSources.map(function (node) {
             var _a;
@@ -6746,7 +6903,7 @@ var MultipleDragPreview = function (props) {
         }))));
 };
 
-var useStyles$j = makeStyles(function (theme) { return ({
+var useStyles$h = makeStyles(function (theme) { return ({
     root: {},
     contextMenu: {
         backgroundColor: "#F8F8F8",
@@ -6792,7 +6949,7 @@ var useStyles$j = makeStyles(function (theme) { return ({
 }); });
 var AssetViewComponent = function () {
     var _a = useState([]), selectedNodes = _a[0], setSelectedNodes = _a[1];
-    var classes = useStyles$j();
+    var classes = useStyles$h();
     var _b = useState(false), isDragging = _b[0], setIsDragging = _b[1];
     var _c = useState(false), isCtrlPressing = _c[0], setIsCtrlPressing = _c[1];
     var _d = useState(false), isDoubleClick = _d[0], setIsDoubleClick = _d[1];
@@ -7011,200 +7168,6 @@ var AssetPage = function (props) {
         React.createElement(ConfigurationAssetPage, null)));
 };
 
-var getUsers = function () { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, resp;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                apiService = new MESApiService();
-                return [4 /*yield*/, apiService.callV2("[SEC].[GetUsers]", [])];
-            case 1:
-                resp = _a.sent();
-                return [2 /*return*/, resp];
-        }
-    });
-}); };
-var getDataUser = function (UserId) { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, parameters, resp;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                apiService = new MESApiService();
-                parameters = [];
-                parameters.push({ name: "UserId", value: UserId });
-                parameters.push({ name: "UserName", value: null });
-                return [4 /*yield*/, apiService.callV2("[SEC].[GetUser]", parameters)];
-            case 1:
-                resp = _a.sent();
-                return [2 /*return*/, resp];
-        }
-    });
-}); };
-var getProfiles = function () { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, resp;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                apiService = new MESApiService();
-                return [4 /*yield*/, apiService.callV2("[SEC].[GetProfiles]", [])];
-            case 1:
-                resp = _a.sent();
-                return [2 /*return*/, resp];
-        }
-    });
-}); };
-var deleteUser = function (userId) { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, parameters, resp;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                apiService = new MESApiService();
-                parameters = [];
-                parameters.push({ name: "UserId", value: userId });
-                return [4 /*yield*/, apiService.callV2("[SEC].[DeleteUser]", parameters)];
-            case 1:
-                resp = _a.sent();
-                return [2 /*return*/, resp];
-        }
-    });
-}); };
-var setPassword = function (userId, password) { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, resp, e_1;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                apiService = new MESApiService();
-                _a.label = 1;
-            case 1:
-                _a.trys.push([1, 3, , 4]);
-                return [4 /*yield*/, apiService.changePassword(userId.toString(), password)];
-            case 2:
-                resp = _a.sent();
-                return [2 /*return*/, {
-                        ok: true,
-                        data: resp,
-                    }];
-            case 3:
-                e_1 = _a.sent();
-                return [2 /*return*/, { ok: false, message: e_1.toString() }];
-            case 4: return [2 /*return*/];
-        }
-    });
-}); };
-var upsertUser = function (user) { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, parameters, resp;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                apiService = new MESApiService();
-                parameters = [];
-                parameters.push({ name: "UserId", value: user.UserId });
-                parameters.push({ name: "UserName", value: user.UserName });
-                parameters.push({ name: "Name", value: user.FirstName });
-                parameters.push({ name: "LastName", value: user.LastName });
-                parameters.push({ name: "AuthTypeId", value: user.AuthTypeId });
-                parameters.push({ name: "IsActive", value: user.IsActive });
-                parameters.push({ name: "DefaultAssetId", value: user.DefaultAssetId });
-                return [4 /*yield*/, apiService.callV2("[SEC].[UpsertUser]", parameters)];
-            case 1:
-                resp = _a.sent();
-                return [2 /*return*/, resp];
-        }
-    });
-}); };
-var getAuthTypes = function () { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, resp;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                apiService = new MESApiService();
-                return [4 /*yield*/, apiService.callV2("[SEC].[GetAuthTypes]", [])];
-            case 1:
-                resp = _a.sent();
-                return [2 /*return*/, resp];
-        }
-    });
-}); };
-var setProfilesToUser = function (UserId, profileIds) { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, parameters, resp;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                apiService = new MESApiService();
-                parameters = [];
-                parameters.push({ name: "UserId", value: UserId });
-                parameters.push({ name: "ProfileIds", value: profileIds.join(" , ") });
-                return [4 /*yield*/, apiService.callV2("[SEC].[setProfilesToUser]", parameters)];
-            case 1:
-                resp = _a.sent();
-                return [2 /*return*/, resp];
-        }
-    });
-}); };
-var getUserPermissionsFromAPI = function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
-    var apiService, parameters, resp, rows;
-    var _c = _b.UserId, UserId = _c === void 0 ? null : _c, _d = _b.UserName, UserName = _d === void 0 ? null : _d;
-    return __generator(this, function (_e) {
-        switch (_e.label) {
-            case 0:
-                apiService = new MESApiService();
-                parameters = [];
-                parameters.push({ name: "UserId", value: UserId });
-                parameters.push({ name: "UserName", value: UserName });
-                return [4 /*yield*/, apiService.callV2("SEC.GetPermissions", parameters)];
-            case 1:
-                resp = _e.sent();
-                rows = get(resp, "data.tables[0].rows", []);
-                return [2 /*return*/, rows[0] ? rows[0] : null];
-        }
-    });
-}); };
-
-var ChangePassword$1 = function (_a) {
-    var show = _a.show, userId = _a.userId, onHide = _a.onHide;
-    var _b = useState(""), password = _b[0], setPasswordText = _b[1];
-    var _c = useState(false), isDirty = _c[0], setIsDirty = _c[1];
-    var handleSubmit = useCallback(function (ev) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    ev.preventDefault();
-                    return [4 /*yield*/, setPassword(userId, password)];
-                case 1:
-                    _a.sent();
-                    onHide(true);
-                    return [2 /*return*/];
-            }
-        });
-    }); }, [userId, password]);
-    useEffect(function () {
-        if (show) {
-            setPasswordText("");
-            setIsDirty(false);
-        }
-    }, [show]);
-    if (userId) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(MesfModal, { title: "Change password", open: show, handleClose: function () { return onHide(false); }, maxWidth: "lg" },
-                React.createElement(Grid, { container: true },
-                    React.createElement(Grid, { item: true, md: 12, xs: 12 },
-                        React.createElement(MesfModal.Content, { style: { padding: "6px 16px 16px" } },
-                            React.createElement("form", { onSubmit: handleSubmit },
-                                React.createElement(Grid, { item: true, md: 12, xs: 12 },
-                                    React.createElement(TextField, { label: "New Password", value: password, onChange: function (el) {
-                                            setIsDirty(true);
-                                            setPasswordText(el.target.value);
-                                        }, variant: "outlined", error: isEmpty(password) && isDirty, fullWidth: true, 
-                                        // margin="dense"
-                                        autoComplete: "off" })),
-                                React.createElement(Grid, { item: true, md: 12, xs: 12, style: { marginTop: 15 } },
-                                    React.createElement(Button, { fullWidth: true, variant: "contained", color: "primary", type: "submit" }, "APPLY")))))))));
-    }
-    else {
-        return React.createElement(React.Fragment, null);
-    }
-};
-
 var INITIAL_VALUES$1 = {
     UserId: null,
     UserName: "",
@@ -7220,18 +7183,38 @@ var INITIAL_VALUES$1 = {
 
 var AssetSelector = function (_a) {
     var value = _a.value, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
-    var areasList = useAssetContext().state.areasList;
+    var _c = useAssetContext().state, areasList = _c.areasList, plantAssetId = _c.plantAssetId;
+    var hasAssets = areasList && areasList.length > 0;
+    var displayValue = React__default.useMemo(function () {
+        if (!hasAssets) {
+            return "";
+        }
+        if (isNil$1(value)) {
+            return plantAssetId;
+        }
+        return value;
+    }, [value, hasAssets, plantAssetId]);
+    var handleChange = function (event) {
+        var selectedValue = event.target.value;
+        if (selectedValue === "") {
+            onChange(null);
+        }
+        else {
+            onChange(Number(selectedValue));
+        }
+    };
+    React__default.useEffect(function () {
+        if (isNil$1(value)) {
+            onChange(plantAssetId);
+        }
+    }, [value, onChange, plantAssetId]);
     return (React__default.createElement(FormControl, { variant: "outlined", fullWidth: true, margin: "dense", disabled: disabled },
         React__default.createElement(InputLabel, null, "Default Asset"),
-        React__default.createElement(Select, { value: value || "", onChange: function (e) {
-                return onChange(e.target.value ? Number(e.target.value) : null);
-            }, label: "Default Asset" },
-            React__default.createElement(MenuItem, { value: "" },
-                React__default.createElement("em", null, "None")),
-            areasList.map(function (area) { return (React__default.createElement(MenuItem, { key: area === null || area === void 0 ? void 0 : area.AssetId, value: area === null || area === void 0 ? void 0 : area.AssetId }, area === null || area === void 0 ? void 0 : area.AssetName)); }))));
+        React__default.createElement(Select, { value: displayValue, onChange: handleChange, label: "Default Asset" }, !hasAssets ? (React__default.createElement(MenuItem, { value: "" },
+            React__default.createElement("em", null, "None"))) : (areasList.map(function (area) { return (React__default.createElement(MenuItem, { key: area === null || area === void 0 ? void 0 : area.AssetId, value: area === null || area === void 0 ? void 0 : area.AssetId }, area === null || area === void 0 ? void 0 : area.AssetName)); })))));
 };
 
-var useStyles$i = makeStyles(function (theme) { return ({
+var useStyles$g = makeStyles(function (theme) { return ({
     root: {
         "& .MuiSelect-select": {
             minHeight: "40px",
@@ -7264,7 +7247,7 @@ var MenuProps$1 = {
 };
 var AuthTypeSelector = function (_a) {
     var value = _a.value, onChange = _a.onChange, disabled = _a.disabled;
-    var classes = useStyles$i();
+    var classes = useStyles$g();
     var _b = useState([]), authTypes = _b[0], setAuthTypes = _b[1];
     var _c = useState(true), isLoading = _c[0], setIsLoading = _c[1];
     var theme = useTheme();
@@ -7300,7 +7283,7 @@ var AuthTypeSelector = function (_a) {
                 React.createElement(Chip, { key: "selected-authType-".concat(selected), label: selectedAuthTypeName, className: classes.chip }))); }, MenuProps: MenuProps$1 }, authTypes.map(function (authType) { return (React.createElement(MenuItem, { key: "auth-".concat(authType.AuthTypeId), value: authType.AuthTypeId, style: getStyles(authType.AuthTypeId, authTypes, theme) }, authType.Name)); })))) : (React.createElement(React.Fragment, null))));
 };
 
-var useStyles$h = makeStyles(function (theme) { return ({
+var useStyles$f = makeStyles(function (theme) { return ({
     root: {
         "& .MuiSelect-select": {
             height: "auto",
@@ -7341,7 +7324,7 @@ var MenuProps = {
 };
 var ProfilesPicker = function (_a) {
     var value = _a.value, onChange = _a.onChange; _a.userIdForDelete; var setprofileError = _a.setprofileError, disabled = _a.disabled;
-    var classes = useStyles$h();
+    var classes = useStyles$f();
     var theme = useTheme();
     var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
     var _c = useState([]), profiles = _c[0], setProfiles = _c[1];
@@ -7382,7 +7365,7 @@ var ProfilesPicker = function (_a) {
         React__default.createElement(Select, { autoWidth: true, labelId: "demo-mutiple-chip-label", id: "demo-mutiple-chip", multiple: true, value: value, onChange: onChange, input: React__default.createElement(Input, { id: "select-multiple-chip" }), renderValue: function (selected) { return (React__default.createElement("div", { className: classes.chips }, selected.map(function (profileId) { return (React__default.createElement(Chip, { key: "selected-profile-".concat(profileId), label: getProfileNameById(profileId), className: classes.chip })); }))); }, MenuProps: MenuProps }, profiles.map(function (profile) { return (React__default.createElement(MenuItem, { key: "profile-".concat(profile.ProfileId), value: profile.ProfileId, style: getStyles(profile.ProfileId, profiles, theme) }, profile.ProfileName.replaceAll("Profile", ""))); })))) : (React__default.createElement(React__default.Fragment, null))));
 };
 
-var useStyles$g = makeStyles(function (theme) { return ({
+var useStyles$e = makeStyles(function (theme) { return ({
     checkbox: {
         userSelect: "none",
     },
@@ -7404,7 +7387,7 @@ var CreateUser = function (_a) {
     var _f = useState(false), isSubmitLoading = _f[0], setIsSubmitLoading = _f[1];
     var _g = useState(""), error = _g[0], setError = _g[1];
     var _h = useState(""), profileError = _h[0], setprofileError = _h[1];
-    var classes = useStyles$g();
+    var classes = useStyles$e();
     var _j = useForm({ defaultValues: INITIAL_VALUES$1 }), register = _j.register, control = _j.control, handleSubmit = _j.handleSubmit, reset = _j.reset, watch = _j.watch, errors = _j.formState.errors;
     var handleClose = function (event, reason) {
         if (reason === "clickaway") {
@@ -7933,7 +7916,7 @@ function useToken() {
     };
 }
 
-var useStyles$f = makeStyles(function (theme) { return ({
+var useStyles$d = makeStyles(function (theme) { return ({
     checkbox: {
         userSelect: "none",
     },
@@ -7952,7 +7935,7 @@ var useStyles$f = makeStyles(function (theme) { return ({
 var EditUser = function (_a) {
     var _b, _c, _d;
     var userId = _a.userId, show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$f();
+    var classes = useStyles$d();
     var _e = useState(false), open = _e[0], setOpen = _e[1];
     var _f = useState(false), isLoading = _f[0], setIsLoading = _f[1];
     var _g = useState(false), isSubmitLoading = _g[0], setIsSubmitLoading = _g[1];
@@ -8122,7 +8105,7 @@ var UsersProvider = function (_a) {
     return (React__default.createElement(UsersContext.Provider, { value: { state: state, actions: actions } }, children));
 };
 
-var useStyles$e = makeStyles(function (theme) { return ({
+var useStyles$c = makeStyles(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -8138,7 +8121,7 @@ var useStyles$e = makeStyles(function (theme) { return ({
     },
 }); });
 var buttonsCellRenderer = function (params) {
-    var classes = useStyles$e();
+    var classes = useStyles$c();
     var setUserId = params.setUserId, setOpenModalEditDataUser = params.setOpenModalEditDataUser, setOpenModalDeleteUser = params.setOpenModalDeleteUser, setOpenModalChangePasswordd = params.setOpenModalChangePasswordd, showContextMenu = params.showContextMenu;
     return (React__default.createElement(Grid, { container: true, style: {
             height: "100%",
@@ -9156,49 +9139,121 @@ var MESApiService = /** @class */ (function () {
     return MESApiService;
 }());
 
-var getUser = function (UserId, UserName) { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, parameters, resp;
+var getUsers = function () { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, resp;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
                 apiService = new MESApiService();
-                parameters = [];
-                parameters.push({ name: "UserId", value: UserId });
-                parameters.push({ name: "UserName", value: UserName });
-                return [4 /*yield*/, apiService.callV2("[SEC].[GetUser]", parameters)];
+                return [4 /*yield*/, apiService.callV2("[SEC].[GetUsers]", [])];
             case 1:
                 resp = _a.sent();
                 return [2 /*return*/, resp];
         }
     });
 }); };
-var getAssets = function () { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, resp;
+var getDataUser = function (UserId) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
                 apiService = new MESApiService();
-                return [4 /*yield*/, apiService.callV2("[MES].[GetAssets]", [])];
+                parameters = [];
+                parameters.push({ name: "UserId", value: UserId });
+                parameters.push({ name: "UserName", value: null });
+                return [4 /*yield*/, apiService.callV2("[SEC].[GetUser]", parameters)];
             case 1:
                 resp = _a.sent();
                 return [2 /*return*/, resp];
         }
     });
 }); };
-var getUTLSettings = function () { return __awaiter(void 0, void 0, void 0, function () {
+var getProfiles = function () { return __awaiter(void 0, void 0, void 0, function () {
     var apiService, resp;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
                 apiService = new MESApiService();
-                return [4 /*yield*/, apiService.callV2("[UTL].[GetSettings]", [])];
+                return [4 /*yield*/, apiService.callV2("[SEC].[GetProfiles]", [])];
             case 1:
                 resp = _a.sent();
                 return [2 /*return*/, resp];
         }
     });
 }); };
-var upsertDefaultAreaId = function (UserId, DefaultAreaId) { return __awaiter(void 0, void 0, void 0, function () {
+var deleteUser = function (userId) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "UserId", value: userId });
+                return [4 /*yield*/, apiService.callV2("[SEC].[DeleteUser]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+var setPassword = function (userId, password) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, resp, e_1;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                _a.label = 1;
+            case 1:
+                _a.trys.push([1, 3, , 4]);
+                return [4 /*yield*/, apiService.changePassword(userId.toString(), password)];
+            case 2:
+                resp = _a.sent();
+                return [2 /*return*/, {
+                        ok: true,
+                        data: resp,
+                    }];
+            case 3:
+                e_1 = _a.sent();
+                return [2 /*return*/, { ok: false, message: e_1.toString() }];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
+var upsertUser = function (user) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "UserId", value: user.UserId });
+                parameters.push({ name: "UserName", value: user.UserName });
+                parameters.push({ name: "Name", value: user.FirstName });
+                parameters.push({ name: "LastName", value: user.LastName });
+                parameters.push({ name: "AuthTypeId", value: user.AuthTypeId });
+                parameters.push({ name: "IsActive", value: user.IsActive });
+                parameters.push({ name: "DefaultAssetId", value: user.DefaultAssetId });
+                return [4 /*yield*/, apiService.callV2("[SEC].[UpsertUser]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+var getAuthTypes = function () { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                return [4 /*yield*/, apiService.callV2("[SEC].[GetAuthTypes]", [])];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+var setProfilesToUser = function (UserId, profileIds) { return __awaiter(void 0, void 0, void 0, function () {
     var apiService, parameters, resp;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -9206,85 +9261,206 @@ var upsertDefaultAreaId = function (UserId, DefaultAreaId) { return __awaiter(vo
                 apiService = new MESApiService();
                 parameters = [];
                 parameters.push({ name: "UserId", value: UserId });
-                parameters.push({ name: "DefaultAssetId", value: DefaultAreaId });
-                return [4 /*yield*/, apiService.callV2("[SEC].[UpsertDefaultAssetId]", parameters)];
+                parameters.push({ name: "ProfileIds", value: profileIds.join(" , ") });
+                return [4 /*yield*/, apiService.callV2("[SEC].[setProfilesToUser]", parameters)];
             case 1:
                 resp = _a.sent();
                 return [2 /*return*/, resp];
         }
     });
 }); };
+var getUserPermissionsFromAPI = function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
+    var apiService, parameters, resp, rows;
+    var _c = _b.UserId, UserId = _c === void 0 ? null : _c, _d = _b.UserName, UserName = _d === void 0 ? null : _d;
+    return __generator(this, function (_e) {
+        switch (_e.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "UserId", value: UserId });
+                parameters.push({ name: "UserName", value: UserName });
+                return [4 /*yield*/, apiService.callV2("SEC.GetPermissions", parameters)];
+            case 1:
+                resp = _e.sent();
+                rows = get(resp, "data.tables[0].rows", []);
+                return [2 /*return*/, rows[0] ? rows[0] : null];
+        }
+    });
+}); };
+
+var ChangePassword$1 = function (_a) {
+    var show = _a.show, userId = _a.userId, onHide = _a.onHide;
+    var _b = useState(""), password = _b[0], setPasswordText = _b[1];
+    var _c = useState(false), isDirty = _c[0], setIsDirty = _c[1];
+    var handleSubmit = useCallback(function (ev) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    ev.preventDefault();
+                    return [4 /*yield*/, setPassword(userId, password)];
+                case 1:
+                    _a.sent();
+                    onHide(true);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [userId, password]);
+    useEffect(function () {
+        if (show) {
+            setPasswordText("");
+            setIsDirty(false);
+        }
+    }, [show]);
+    if (userId) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(MesfModal, { title: "Change password", open: show, handleClose: function () { return onHide(false); }, maxWidth: "lg" },
+                React.createElement(Grid, { container: true },
+                    React.createElement(Grid, { item: true, md: 12, xs: 12 },
+                        React.createElement(MesfModal.Content, { style: { padding: "6px 16px 16px" } },
+                            React.createElement("form", { onSubmit: handleSubmit },
+                                React.createElement(Grid, { item: true, md: 12, xs: 12 },
+                                    React.createElement(TextField, { label: "New Password", value: password, onChange: function (el) {
+                                            setIsDirty(true);
+                                            setPasswordText(el.target.value);
+                                        }, variant: "outlined", error: isEmpty(password) && isDirty, fullWidth: true, 
+                                        // margin="dense"
+                                        autoComplete: "off" })),
+                                React.createElement(Grid, { item: true, md: 12, xs: 12, style: { marginTop: 15 } },
+                                    React.createElement(Button, { fullWidth: true, variant: "contained", color: "primary", type: "submit" }, "APPLY")))))))));
+    }
+    else {
+        return React.createElement(React.Fragment, null);
+    }
+};
 
-var useStyles$d = makeStyles$1(function (theme) { return ({
-    root: {
-        padding: theme.spacing(3),
-    },
-    paper: {
-        padding: theme.spacing(3),
-        marginBottom: theme.spacing(3),
-    },
-    title: {
-        marginBottom: theme.spacing(2),
-    },
-    formRow: {
-        marginBottom: theme.spacing(2),
-    },
-    changePasswordButton: {
-        marginLeft: theme.spacing(2),
-    },
-    textArea: {
-        width: "100%",
-        height: "50vh",
-        padding: theme.spacing(1),
-        fontFamily: "inherit",
-        border: "1px solid ".concat(theme.palette.divider),
-        borderRadius: 4,
-        backgroundColor: theme.palette.action.disabledBackground,
-    },
-    successMessage: {
-        padding: theme.spacing(1),
-        marginBottom: theme.spacing(2),
-        backgroundColor: theme.palette.success.light,
-        color: theme.palette.success.contrastText,
-        borderRadius: 4,
-    },
-}); });
 var Account = function () {
-    var classes = useStyles$d();
-    var _a = useState(""), error = _a[0], setError = _a[1];
-    var _b = useState(""), userLastName = _b[0], setUserLastName = _b[1];
-    var _c = useState(""), userFirstName = _c[0], setUserFirstName = _c[1];
-    var user = useState(function () {
+    var _a = useToken(), getUserId = _a.getUserId; _a.getUserName; _a.getFirstName; _a.getLastName;
+    var getUserNameFromStorage = function () {
         var sessionData = localStorage.getItem("userMESData");
-        return JSON.parse(sessionData || "{}");
-    })[0];
-    var _d = useState(""), userName = _d[0], setUserName = _d[1];
-    var _e = useState(false), userIsDomain = _e[0], setUserIsDomain = _e[1];
-    var _f = useState(false), userIsActive = _f[0], setUserIsActive = _f[1];
-    var _g = useState(""), userProfiles = _g[0], setUserProfiles = _g[1];
-    var _h = useState(""), userPermissions = _h[0], setUserPermissions = _h[1];
-    var _j = useState(""), userProcedures = _j[0], setUserProcedures = _j[1];
-    var _k = useState(false); _k[0]; _k[1];
-    var _l = useState(false), showSuccess = _l[0], setShowSuccess = _l[1];
-    var _m = useState(""), successMessage = _m[0], setSuccessMessage = _m[1];
+        if (sessionData) {
+            var userData = JSON.parse(sessionData);
+            return (userData.userName || userData.UserName || userData.username || null);
+        }
+        return null;
+    };
+    var _b = useState(""), error = _b[0], setError = _b[1];
+    var _c = useState(""), userName = _c[0], setUserName = _c[1];
+    var _d = useState(""), userFirstName = _d[0], setUserFirstName = _d[1];
+    var _e = useState(""), userLastName = _e[0], setUserLastName = _e[1];
+    var _f = useState(false), userIsDomain = _f[0], setUserIsDomain = _f[1];
+    var _g = useState(false), userIsActive = _g[0], setUserIsActive = _g[1];
+    var _h = useState(""), userProfiles = _h[0], setUserProfiles = _h[1];
+    var _j = useState(""), userPermissions = _j[0], setUserPermissions = _j[1];
+    var _k = useState(""), userProcedures = _k[0], setUserProcedures = _k[1];
+    var _l = useState(""), editFirstName = _l[0], setEditFirstName = _l[1];
+    var _m = useState(""), editLastName = _m[0], setEditLastName = _m[1];
+    var _o = useState(false), isSaving = _o[0], setIsSaving = _o[1];
+    var _p = useState(false), showPasswordModal = _p[0], setShowPasswordModal = _p[1];
+    var _q = useState(false), showSuccess = _q[0], setShowSuccess = _q[1];
+    var _r = useState(""), successMessage = _r[0], setSuccessMessage = _r[1];
+    var hasChanges = function () {
+        return editFirstName !== userFirstName || editLastName !== userLastName;
+    };
+    var handleSave = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var userId, user, resp, sessionData, userData, err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!hasChanges() || !editFirstName.trim() || !editLastName.trim())
+                        return [2 /*return*/];
+                    setIsSaving(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    userId = getUserId();
+                    user = {
+                        UserId: userId,
+                        UserName: userName,
+                        FirstName: editFirstName.trim(),
+                        LastName: editLastName.trim(),
+                        AuthTypeId: userIsDomain ? 1 : 0,
+                        IsActive: userIsActive,
+                        LastLogin: null,
+                        DefaultAssetId: null,
+                        ProfilesId: "",
+                        Profiles: "",
+                    };
+                    return [4 /*yield*/, upsertUser(user)];
+                case 2:
+                    resp = _a.sent();
+                    if (resp.ok) {
+                        setUserFirstName(editFirstName.trim());
+                        setUserLastName(editLastName.trim());
+                        sessionData = localStorage.getItem("userMESData");
+                        if (sessionData) {
+                            userData = JSON.parse(sessionData);
+                            userData.firstName = editFirstName.trim();
+                            userData.lastName = editLastName.trim();
+                            localStorage.setItem("userMESData", JSON.stringify(userData));
+                        }
+                        setShowSuccess(true);
+                        setSuccessMessage("Profile updated successfully.");
+                    }
+                    else {
+                        setError(resp.message || "Failed to update profile");
+                    }
+                    return [3 /*break*/, 5];
+                case 3:
+                    err_1 = _a.sent();
+                    setError(err_1.toString());
+                    return [3 /*break*/, 5];
+                case 4:
+                    setIsSaving(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handlePasswordChange = function (success) {
+        setShowPasswordModal(false);
+        if (success) {
+            setShowSuccess(true);
+            setSuccessMessage("Password changed successfully.");
+        }
+    };
+    var handleKeyDown = function (e) {
+        if (e.key === "Enter" &&
+            hasChanges() &&
+            editFirstName.trim() &&
+            editLastName.trim() &&
+            !isSaving) {
+            handleSave();
+        }
+    };
     var stringToList = function (s) {
         s = s.replace(/,/g, "\n");
         s = s.replace(/ *\([^)]*\) */g, "");
         return s;
     };
     var loadUserData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var resp, userData;
+        var userId, currentUserName, resp, userData, firstName, lastName;
         var _a, _b, _c, _d, _e, _f, _g, _h;
         return __generator(this, function (_j) {
             switch (_j.label) {
-                case 0: return [4 /*yield*/, getUser(user.UserId, user.UserName)];
+                case 0:
+                    userId = getUserId();
+                    currentUserName = getUserNameFromStorage();
+                    if (!userId || userId === -1) {
+                        setError("UserId is NULL. Please login again.");
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, getUser(userId, currentUserName)];
                 case 1:
                     resp = _j.sent();
                     if (resp.ok) {
                         userData = get(resp, "data.tables[0].rows", null);
-                        setUserName((_a = userData[0]) === null || _a === void 0 ? void 0 : _a.UserName);
-                        setUserLastName((_b = userData[0]) === null || _b === void 0 ? void 0 : _b.LastName);
-                        setUserFirstName((_c = userData[0]) === null || _c === void 0 ? void 0 : _c.FirstName);
+                        firstName = ((_a = userData[0]) === null || _a === void 0 ? void 0 : _a.FirstName) || "";
+                        lastName = ((_b = userData[0]) === null || _b === void 0 ? void 0 : _b.LastName) || "";
+                        setUserName((_c = userData[0]) === null || _c === void 0 ? void 0 : _c.UserName);
+                        setUserFirstName(firstName);
+                        setUserLastName(lastName);
+                        setEditFirstName(firstName);
+                        setEditLastName(lastName);
                         setUserIsDomain((_d = userData[0]) === null || _d === void 0 ? void 0 : _d.AuthTypeId);
                         setUserIsActive((_e = userData[0]) === null || _e === void 0 ? void 0 : _e.IsActive);
                         setUserProfiles(stringToList(((_f = userData[0]) === null || _f === void 0 ? void 0 : _f.Profiles) || ""));
@@ -9321,42 +9497,98 @@ var Account = function () {
             closeMessage();
         }
     }, [showSuccess]);
-    return (React__default.createElement(Box, { className: classes.root },
-        React__default.createElement(Paper, { className: classes.paper },
-            React__default.createElement(Typography$1, { variant: "h5", component: "h1", className: classes.title }, "Account Configuration"),
-            showSuccess && (React__default.createElement(Box, { className: classes.successMessage },
-                React__default.createElement(Typography$1, null, successMessage))),
+    return (React__default.createElement(Box, { p: 3, maxWidth: "100%" },
+        showSuccess && (React__default.createElement(Paper, { elevation: 2, style: {
+                padding: 16,
+                marginBottom: 16,
+                backgroundColor: "#c8e6c9",
+                color: "#1b5e20",
+                display: "flex",
+                alignItems: "center",
+            } },
+            React__default.createElement(Typography$1, null, successMessage))),
+        React__default.createElement(Box, null,
+            React__default.createElement(Typography$1, { variant: "h5", component: "h1", gutterBottom: true, style: { fontWeight: 600, marginBottom: 16 } }, "Account Configuration"),
             React__default.createElement(Grid, { container: true, spacing: 3 },
                 React__default.createElement(Grid, { item: true, xs: 12, md: 6 },
-                    React__default.createElement(Box, { display: "flex", alignItems: "center", className: classes.formRow },
-                        React__default.createElement(TextField, { label: "Username", value: userName, variant: "outlined", size: "small", fullWidth: true, InputProps: {
-                                readOnly: true,
-                            } })),
-                    React__default.createElement(Box, { className: classes.formRow },
-                        React__default.createElement(TextField, { label: "Name", value: userFirstName, variant: "outlined", size: "small", fullWidth: true, InputProps: {
-                                readOnly: true,
-                            } })),
-                    React__default.createElement(Box, { className: classes.formRow },
-                        React__default.createElement(TextField, { label: "Lastname", value: userLastName, variant: "outlined", size: "small", fullWidth: true, InputProps: {
-                                readOnly: true,
-                            } })),
-                    React__default.createElement(Box, { className: classes.formRow },
-                        React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { checked: userIsDomain, disabled: true }), label: "Domain User" })),
-                    React__default.createElement(Box, { className: classes.formRow },
-                        React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { checked: userIsActive, disabled: true }), label: "Active" })))),
-            React__default.createElement(Grid, { container: true, spacing: 3 },
-                React__default.createElement(Grid, { item: true, xs: 12, md: 4 },
-                    React__default.createElement(Typography$1, { variant: "h6", gutterBottom: true }, "Profiles"),
-                    React__default.createElement("textarea", { className: classes.textArea, placeholder: userProfiles, readOnly: true, value: userProfiles })),
-                React__default.createElement(Grid, { item: true, xs: 12, md: 4 },
-                    React__default.createElement(Typography$1, { variant: "h6", gutterBottom: true }, "Permissions"),
-                    React__default.createElement("textarea", { className: classes.textArea, placeholder: userPermissions, readOnly: true, value: userPermissions })),
-                React__default.createElement(Grid, { item: true, xs: 12, md: 4 },
-                    React__default.createElement(Typography$1, { variant: "h6", gutterBottom: true }, "Procedures"),
-                    React__default.createElement("textarea", { className: classes.textArea, placeholder: userProcedures, readOnly: true, value: userProcedures })))),
+                    React__default.createElement(Paper, { style: { padding: 24, height: "100%", minHeight: "350px" } },
+                        React__default.createElement(Typography$1, { variant: "h6", gutterBottom: true, style: { marginBottom: 24, fontWeight: 600 } }, "Account Information"),
+                        React__default.createElement(Box, { mb: 2 },
+                            React__default.createElement(TextField, { label: "Username", value: userName, variant: "outlined", fullWidth: true, style: {
+                                    pointerEvents: "none",
+                                    cursor: "default",
+                                }, InputProps: {
+                                    readOnly: true,
+                                }, tabIndex: -1 })),
+                        React__default.createElement(Box, { mt: 3, display: "flex", flexDirection: "column", style: { gap: 4 } },
+                            React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { checked: userIsDomain, disabled: true }), label: "Domain User" }),
+                            React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { checked: userIsActive, disabled: true }), label: "Active Account" })))),
+                React__default.createElement(Grid, { item: true, xs: 12, md: 6 },
+                    React__default.createElement(Paper, { style: { padding: 24, height: "100%", minHeight: "350px" } },
+                        React__default.createElement(Typography$1, { variant: "h6", gutterBottom: true, style: { marginBottom: 24, fontWeight: 600 } }, "Personal Details"),
+                        React__default.createElement(Box, { mb: 2 },
+                            React__default.createElement(TextField, { label: "First Name", value: editFirstName, variant: "outlined", fullWidth: true, onChange: function (e) { return setEditFirstName(e.target.value); }, onKeyDown: handleKeyDown, error: !editFirstName.trim(), helperText: !editFirstName.trim() ? "First name is required" : "" })),
+                        React__default.createElement(Box, { mb: 2 },
+                            React__default.createElement(TextField, { label: "Last Name", value: editLastName, variant: "outlined", fullWidth: true, onChange: function (e) { return setEditLastName(e.target.value); }, onKeyDown: handleKeyDown, error: !editLastName.trim(), helperText: !editLastName.trim() ? "Last name is required" : "" })),
+                        React__default.createElement(Divider, { style: { margin: "24px 0 20px" } }),
+                        React__default.createElement(Box, { mt: 2, display: "flex", flexDirection: "column", style: { gap: 8 } },
+                            React__default.createElement(Button, { fullWidth: true, startIcon: isSaving && React__default.createElement(CircularProgress, { size: "1rem" }), disabled: !hasChanges() ||
+                                    isSaving ||
+                                    !editFirstName.trim() ||
+                                    !editLastName.trim(), variant: "contained", color: "primary", onClick: handleSave, style: { marginBottom: "8px" } }, "Save Changes"),
+                            React__default.createElement(Button, { fullWidth: true, variant: "contained", color: "primary", onClick: function () { return setShowPasswordModal(true); } }, "Change Password"))))),
+            React__default.createElement(Paper, { elevation: 2, style: { padding: 24, marginBottom: 24, marginTop: 24 } },
+                React__default.createElement(Typography$1, { variant: "h6", gutterBottom: true, style: { marginBottom: 24, fontWeight: 600 } }, "Permissions & Access"),
+                React__default.createElement(Grid, { container: true, spacing: 3 },
+                    React__default.createElement(Grid, { item: true, xs: 12, md: 4 },
+                        React__default.createElement(Typography$1, { variant: "body1", gutterBottom: true, color: "textSecondary" }, "Assigned Profiles"),
+                        React__default.createElement("textarea", { style: {
+                                width: "100%",
+                                minHeight: "300px",
+                                padding: 16,
+                                fontFamily: "inherit",
+                                fontSize: "14px",
+                                lineHeight: "1.5",
+                                border: "2px solid #e0e0e0",
+                                borderRadius: 8,
+                                backgroundColor: "#fff",
+                                resize: "vertical",
+                                outline: "none",
+                            }, placeholder: "No profiles assigned", readOnly: true, value: userProfiles })),
+                    React__default.createElement(Grid, { item: true, xs: 12, md: 4 },
+                        React__default.createElement(Typography$1, { variant: "body1", gutterBottom: true, color: "textSecondary" }, "System Permissions"),
+                        React__default.createElement("textarea", { style: {
+                                width: "100%",
+                                minHeight: "300px",
+                                padding: 16,
+                                fontFamily: "inherit",
+                                fontSize: "14px",
+                                lineHeight: "1.5",
+                                border: "2px solid #e0e0e0",
+                                borderRadius: 8,
+                                backgroundColor: "#fff",
+                                resize: "vertical",
+                                outline: "none",
+                            }, placeholder: "No permissions assigned", readOnly: true, value: userPermissions })),
+                    React__default.createElement(Grid, { item: true, xs: 12, md: 4 },
+                        React__default.createElement(Typography$1, { variant: "body1", gutterBottom: true, color: "textSecondary" }, "Available Procedures"),
+                        React__default.createElement("textarea", { style: {
+                                width: "100%",
+                                minHeight: "300px",
+                                padding: 16,
+                                fontFamily: "inherit",
+                                fontSize: "14px",
+                                lineHeight: "1.5",
+                                border: "2px solid #e0e0e0",
+                                borderRadius: 8,
+                                backgroundColor: "#fff",
+                                resize: "vertical",
+                                outline: "none",
+                            }, placeholder: "No procedures available", readOnly: true, value: userProcedures }))))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () {
                 setError("");
-            } })));
+            } }),
+        React__default.createElement(ChangePassword$1, { show: showPasswordModal, userId: getUserId(), onHide: handlePasswordChange })));
 };
 
 function ChangePassword(props) {
@@ -9447,7 +9679,7 @@ var Unauthenticated = function (_a) {
     return React__default.createElement(Login, { authConfig: authConfig });
 };
 
-var useStyles$c = makeStyles(function (theme) { return ({
+var useStyles$b = makeStyles(function (theme) { return ({
     button: {
         padding: theme.spacing(1.2),
         fontWeight: 600,
@@ -9462,7 +9694,7 @@ var useStyles$c = makeStyles(function (theme) { return ({
     },
 }); });
 var LoginAsGuest = function () {
-    var classes = useStyles$c();
+    var classes = useStyles$b();
     var _a = React__default.useState(false), showError = _a[0], setShowError = _a[1];
     var _b = React__default.useState(undefined), error = _b[0], setError = _b[1];
     var saveUserData = React__default.useContext(AuthContext).saveUserData;
@@ -9502,7 +9734,7 @@ var LoginAsGuest = function () {
         React__default.createElement(Button, { fullWidth: true, variant: "contained", color: "primary", className: classes.button, style: { backgroundColor: "#479DC4", color: "white" }, role: "button", onClick: loginAsGuest, startIcon: React__default.createElement(PersonOutlineIcon, { className: classes.icon }) }, "Guest Access")));
 };
 
-var useStyles$b = makeStyles(function (theme) { return ({
+var useStyles$a = makeStyles(function (theme) { return ({
     form: {
         width: "100%",
         marginTop: theme.spacing(1),
@@ -9525,7 +9757,7 @@ var useStyles$b = makeStyles(function (theme) { return ({
     },
 }); });
 var LoginWithEmailAndPassword = function () {
-    var classes = useStyles$b();
+    var classes = useStyles$a();
     var _a = useState(""), username = _a[0], setUserName = _a[1];
     var _b = useState(""), password = _b[0], setPassword = _b[1];
     var _c = React__default.useState(false), showError = _c[0], setShowError = _c[1];
@@ -9584,7 +9816,7 @@ var WindowsLogo = function (_a) {
         React__default.createElement("path", { color: color, d: "M12 16H3v7.75l9 1.238zm0-11L3 6.25V14h9zm2-.25V14h13V3zM14 16v9.25L27 27V16z" })));
 };
 
-var useStyles$a = makeStyles(function (theme) { return ({
+var useStyles$9 = makeStyles(function (theme) { return ({
     button: {
         padding: theme.spacing(1.2),
         fontWeight: 600,
@@ -9602,7 +9834,7 @@ var useStyles$a = makeStyles(function (theme) { return ({
     },
 }); });
 var LoginWithWindowsAuthentication = function () {
-    var classes = useStyles$a();
+    var classes = useStyles$9();
     var _a = React__default.useState(false), showError = _a[0], setShowError = _a[1];
     var _b = React__default.useState(undefined), error = _b[0], setError = _b[1];
     var saveUserData = React__default.useContext(AuthContext).saveUserData;
@@ -9725,7 +9957,7 @@ var loginRequest = {
     scopes: ["User.Read"],
 };
 
-var useStyles$9 = makeStyles(function (theme) { return ({
+var useStyles$8 = makeStyles(function (theme) { return ({
     button: {
         padding: theme.spacing(1.2),
         fontWeight: 600,
@@ -9740,7 +9972,7 @@ var useStyles$9 = makeStyles(function (theme) { return ({
     },
 }); });
 var LoginWithAzureADForm = function () {
-    var classes = useStyles$9();
+    var classes = useStyles$8();
     var saveUserData = React__default.useContext(AuthContext).saveUserData;
     var instance = useMsal().instance;
     var login = function (e) { return __awaiter(void 0, void 0, void 0, function () {
@@ -9791,7 +10023,7 @@ var LoginWithAzureAD = function (_a) {
             React__default.createElement(LoginWithAzureADForm, null))));
 };
 
-var useStyles$8 = makeStyles(function (theme) { return ({
+var useStyles$7 = makeStyles(function (theme) { return ({
     root: {
         minHeight: "100vh",
         backgroundImage: "linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)",
@@ -9870,7 +10102,7 @@ var useStyles$8 = makeStyles(function (theme) { return ({
 }); });
 function Login(_a) {
     var authConfig = _a.authConfig;
-    var classes = useStyles$8();
+    var classes = useStyles$7();
     var params = useRef(new URL(document.location).searchParams);
     var _b = useState(false), open = _b[0], setOpen = _b[1];
     var _c = useState(""), message = _c[0], setMessage = _c[1];
@@ -9965,7 +10197,7 @@ var useSearchAssets = function (setError) {
     return { searchAssets: searchAssets };
 };
 
-var useStyles$7 = makeStyles(function (theme) { return ({
+var useStyles$6 = makeStyles(function (theme) { return ({
     container: {
         display: "flex",
         alignItems: "center",
@@ -9988,13 +10220,18 @@ var useStyles$7 = makeStyles(function (theme) { return ({
 }); });
 var TimeAndUserMenu = function (_a) {
     var className = _a.className;
-    var classes = useStyles$7();
+    var classes = useStyles$6();
     var getUserName = useToken().getUserName;
-    var userName = useState(getUserName())[0];
-    var _b = useState(new Date()), date = _b[0], setDate = _b[1];
-    var _c = useState(null), userMenuAnchorEl = _c[0], setUserMenuAnchorEl = _c[1];
+    var _b = useState(getUserName()), userName = _b[0], setUserName = _b[1];
+    var _c = useState(new Date()), date = _c[0], setDate = _c[1];
+    var _d = useState(null), userMenuAnchorEl = _d[0], setUserMenuAnchorEl = _d[1];
     var tick = function () {
         setDate(new Date());
+        // Also update username in case it changed
+        var currentName = getUserName();
+        if (currentName !== userName) {
+            setUserName(currentName);
+        }
     };
     useEffect(function () {
         var timerID = setTimeout(function () {
@@ -10025,7 +10262,7 @@ var AreaSelector$1 = lazy(function () {
         default: mod.AreaSelector,
     }); });
 });
-var useStyles$6 = makeStyles(function (theme) { return ({
+var useStyles$5 = makeStyles(function (theme) { return ({
     appBar: {
         // You can use dark or light variants of the primary color
         // backgroundColor: theme.palette.primary.dark,  // Darker shade
@@ -10081,7 +10318,7 @@ var useStyles$6 = makeStyles(function (theme) { return ({
 }); });
 function Header$1(_a) {
     var _b = _a.showAreaSelector, showAreaSelector = _b === void 0 ? false : _b, _c = _a.showTrendingsIcon, showTrendingsIcon = _c === void 0 ? true : _c, _d = _a.navbarTitle, navbarTitle = _d === void 0 ? "MESF" : _d;
-    var classes = useStyles$6();
+    var classes = useStyles$5();
     var _e = useState(""), error = _e[0], setError = _e[1];
     var CustomNavbar = useContext(NavbarContext);
     var searchAssets = useSearchAssets(setError).searchAssets;
@@ -10152,7 +10389,7 @@ var Home = function () { return (React__default.createElement("div", { style: {
         position: "absolute",
     } })); };
 
-var useStyles$5 = makeStyles(function (theme) { return ({
+var useStyles$4 = makeStyles(function (theme) { return ({
     root: {
         width: "100%",
         maxWidth: 800,
@@ -10182,7 +10419,7 @@ var useStyles$5 = makeStyles(function (theme) { return ({
     },
 }); });
 var ChatComponent = function () {
-    var classes = useStyles$5();
+    var classes = useStyles$4();
     var _a = useState("/ws"), hubUrl = _a[0]; _a[1];
     var _b = useState(null), connection = _b[0], setConnection = _b[1];
     var _c = useState({
@@ -10297,28 +10534,8 @@ var ChatComponent = function () {
             React__default.createElement(Button, { type: "submit", variant: "contained", color: "primary", disabled: !connectionState.isConnected || !user || !message, endIcon: React__default.createElement(Send, null) }, "Send"))));
 };
 
-var useStyles$4 = makeStyles(function (theme) { return ({
-    root: {
-        height: "100vh",
-        padding: theme.spacing(4),
-    },
-    header: {
-        marginBottom: theme.spacing(4),
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-    },
-    gridContainer: {
-        height: "75%",
-        width: "100%",
-    },
-    autocomplete: {
-        marginTop: theme.spacing(2),
-        marginBottom: theme.spacing(2),
-    },
-}); });
 var QueryCacheInvalidations = function () {
-    var classes = useStyles$4();
+    var gridRef = useRef(null);
     var _a = useState([]), rowData = _a[0], setRowData = _a[1];
     var _b = useState([]), actions = _b[0], setActions = _b[1];
     var _c = useState(""), modal = _c[0], setModal = _c[1];
@@ -10331,14 +10548,31 @@ var QueryCacheInvalidations = function () {
             targets: [],
         },
     }), control = _g.control, reset = _g.reset, handleSubmit = _g.handleSubmit; _g.setValue;
+    var defaultColDef = useMemo(function () {
+        return {
+            sortable: true,
+            wrapText: true,
+            autoHeight: true,
+            wrapHeaderText: true,
+            cellStyle: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            },
+        };
+    }, []);
     var columnDefs = [
-        { field: "SourceId", headerName: "Source ID" },
-        { field: "Source", headerName: "Source" },
-        { field: "TargetsCSV", headerName: "Targets" },
+        { field: "SourceId", headerName: "Source ID", flex: 1 },
+        { field: "Source", headerName: "Source", flex: 2 },
+        { field: "TargetsCSV", headerName: "Targets", flex: 3 },
         {
             headerName: "Actions",
-            cellRenderer: function (params) { return (React__default.createElement(Box, null,
-                React__default.createElement(Button, { variant: "contained", color: "primary", onClick: function () { return handleEdit(params.data); } }, "Edit"))); },
+            flex: 1,
+            cellRenderer: function (params) { return (React__default.createElement(Button, { variant: "contained", color: "primary", onClick: function () { return handleEdit(params.data); }, style: {
+                    width: "100%",
+                    height: "28px",
+                    minWidth: "60px",
+                } }, "EDIT")); },
         },
     ];
     var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -10431,31 +10665,37 @@ var QueryCacheInvalidations = function () {
             }
         });
     }); };
-    return (React__default.createElement(Box, { className: classes.root },
-        React__default.createElement(Box, { className: classes.header },
-            React__default.createElement(Typography$1, { variant: "h4", component: "h2" }, "Query Cache Invalidations"),
-            React__default.createElement(Button, { variant: "contained", color: "primary", onClick: handleAdd }, "Add New")),
-        React__default.createElement(Box, { className: "".concat(classes.gridContainer) },
-            React__default.createElement(AgGridReact, { gridOptions: {
-                    theme: themeMaterial.withParams({
-                        spacing: 2,
-                    }),
-                }, rowData: rowData, columnDefs: columnDefs, defaultColDef: { flex: 1 } })),
+    return (React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
+        React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" } },
+            React__default.createElement(Typography$1, { variant: "h5", style: { margin: "20px 0", fontWeight: 600 } }, "Query Cache Invalidations")),
+        React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
+            React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" } },
+                React__default.createElement(Grid, { component: Paper, item: true, md: 12, xs: 12, style: {
+                        height: "70vh",
+                    } },
+                    React__default.createElement(AgGridReact, { gridOptions: {
+                            theme: themeMaterial,
+                        }, ref: gridRef, rowData: rowData, columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 34, headerHeight: 34, animateRows: true, rowSelection: "single", onRowDoubleClicked: function (event) {
+                            handleEdit(event.data);
+                        } })),
+                React__default.createElement(Grid, { container: true, justifyContent: "flex-end", style: { marginTop: 10 } },
+                    React__default.createElement(Grid, { item: true, md: 2, xs: 12 },
+                        React__default.createElement(Button, { variant: "contained", color: "primary", onClick: handleAdd, fullWidth: true }, "ADD NEW"))))),
         React__default.createElement(MesfModal, { title: modal === "add" ? "Add Cache Invalidation" : "Edit Cache Invalidation", open: ["add", "edit"].includes(modal), handleClose: function () { return setModal(""); } },
             React__default.createElement("form", { onSubmit: handleSubmit(onSubmit) },
                 React__default.createElement(MesfModal.Content, { dividers: true },
                     React__default.createElement(Grid, { container: true, spacing: 3 },
                         React__default.createElement(Grid, { item: true, xs: 12 },
-                            React__default.createElement(Controller, { control: control, name: "source", render: function (params) { return (React__default.createElement(Autocomplete, { options: actions, getOptionLabel: function (option) { return "".concat(option.ActionName); }, value: params.field.value, onChange: function (_, value) { return params.field.onChange(value); }, renderInput: function (params) { return (React__default.createElement(TextField, __assign({}, params, { label: "Select Source Action", variant: "outlined" }))); }, className: classes.autocomplete, disabled: modal === "edit" })); } })),
+                            React__default.createElement(Controller, { control: control, name: "source", render: function (params) { return (React__default.createElement(Autocomplete, { options: actions, getOptionLabel: function (option) { return "".concat(option.ActionName); }, value: params.field.value, onChange: function (_, value) { return params.field.onChange(value); }, renderInput: function (params) { return (React__default.createElement(TextField, __assign({}, params, { label: "Select Source Action", variant: "outlined" }))); }, style: { marginTop: 16, marginBottom: 16 }, disabled: modal === "edit" })); } })),
                         React__default.createElement(Grid, { item: true, xs: 12 },
                             React__default.createElement(Controller, { control: control, name: "targets", render: function (params) { return (React__default.createElement(Autocomplete, { multiple: true, options: actions.filter(function (a) { var _a; return a.ActionId !== ((_a = control._formValues.source) === null || _a === void 0 ? void 0 : _a.ActionId); }), getOptionLabel: function (option) { return option.ActionName; }, value: params.field.value, onChange: function (_, value) {
                                         params.field.onChange(value);
-                                    }, renderInput: function (params) { return (React__default.createElement(TextField, __assign({}, params, { label: "Select Target Actions", variant: "outlined" }))); }, className: classes.autocomplete })); } })))),
+                                    }, renderInput: function (params) { return (React__default.createElement(TextField, __assign({}, params, { label: "Select Target Actions", variant: "outlined" }))); }, style: { marginTop: 16, marginBottom: 16 } })); } })))),
                 React__default.createElement(MesfModal.Actions, null,
                     React__default.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
-                        React__default.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                        React__default.createElement(Grid, { item: true, md: 3, xs: 12 },
                             React__default.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return setModal(""); } }, "Cancel")),
-                        React__default.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                        React__default.createElement(Grid, { item: true, md: 3, xs: 12 },
                             React__default.createElement(Button, { fullWidth: true, startIcon: isLoading && React__default.createElement(CircularProgress, { size: "1rem" }), disabled: isLoading, variant: "contained", color: "primary", type: "submit" }, "Save"))))))));
 };
 
@@ -11546,6 +11786,13 @@ var ColorPicker = function (_a) {
                 } })); })))));
 };
 
+var ButtonWithLoading = function (_a) {
+    var children = _a.children, isLoading = _a.isLoading, props = __rest(_a, ["children", "isLoading"]);
+    return (React__default.createElement(Button, __assign({}, props, { disabled: isLoading }),
+        isLoading && React__default.createElement(CircularProgress, { size: "1rem" }),
+        children));
+};
+
 var TrendingsInitialState = {
     timeScopeStart: moment$3(new Date()).subtract(1, "days").toDate(),
     timeScopeEnd: new Date(),
@@ -13477,12 +13724,12 @@ var TableComponent = function (_a) {
                                 React__default.createElement("td", { className: classes.doubleInput }, round((_c = dataTable[tag.TagName]) === null || _c === void 0 ? void 0 : _c.y2, 3) || 0),
                                 React__default.createElement("td", null, round((_d = dataTable[tag.TagName]) === null || _d === void 0 ? void 0 : _d.y2y1, 3) || 0),
                                 React__default.createElement("td", null,
-                                    !isNaN(((_e = dataTable[tag.TagName]) === null || _e === void 0 ? void 0 : _e.pmin.y) * 0)
+                                    !isNaN$1(((_e = dataTable[tag.TagName]) === null || _e === void 0 ? void 0 : _e.pmin.y) * 0)
                                         ? round((_f = dataTable[tag.TagName]) === null || _f === void 0 ? void 0 : _f.pmin.y, 3)
                                         : 0,
                                     " "),
                                 React__default.createElement("td", null,
-                                    !isNaN(((_g = dataTable[tag.TagName]) === null || _g === void 0 ? void 0 : _g.pmax.y) * 0)
+                                    !isNaN$1(((_g = dataTable[tag.TagName]) === null || _g === void 0 ? void 0 : _g.pmax.y) * 0)
                                         ? round((_h = dataTable[tag.TagName]) === null || _h === void 0 ? void 0 : _h.pmax.y)
                                         : 0,
                                     " ")));
@@ -14334,7 +14581,7 @@ var MESFMainRouter = function () {
         React__default.createElement(Routes, null,
             React__default.createElement(Route, { path: "/", element: React__default.createElement(Navigate, { replace: true, to: "/home" }) }),
             canShowSettings && (React__default.createElement(Route, { path: "/configuration/*", element: React__default.createElement(Configuration, null) })),
-            React__default.createElement(Route, { path: "/account", element: React__default.createElement(Navigate, { replace: true, to: "/" }) }),
+            React__default.createElement(Route, { path: "/account", element: React__default.createElement(Account, null) }),
             React__default.createElement(Route, { path: "/trendings", element: React__default.createElement(index, null) }),
             React__default.createElement(Route, { path: "/home", element: React__default.createElement(Home, null) })),
         React__default.createElement(CustomRoutes, null)));
@@ -14694,5 +14941,5 @@ var areaSelector = /*#__PURE__*/Object.freeze({
     AreaSelector: AreaSelector
 });
 
-export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, ShiftDayNavigatorControl, ShiftNavigatorProvider, ShiftPeriodNavigatorControl, SimplePasswordControl, SimpleSelectorControl, TimeAndUserMenu, TimeFormatter, TimeService, TreePickerControl, TreePickerControlV2, TrendingsPage, USER_LABELS, UTLSettingsProvider, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getError, getMomentTz, getProfiles, getShiftByParameters, getShiftStyle, getShiftsRangeByParameters, getTokenFromLS, getUserPermissionsFromAPI, getUsers, renewToken, setPassword, setProfilesToUser, themeMESF, upsertUser, useAssetContext, useContextMenuMESF, useHasPermission, useMesfRealtime, useShiftNavigator, useShiftNavigatorManager, useStyles$E as useStyles, useToken, useUTLSettingsContext, useUserContext };
+export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, ShiftDayNavigatorControl, ShiftNavigatorProvider, ShiftPeriodNavigatorControl, SimplePasswordControl, SimpleSelectorControl, TimeAndUserMenu, TimeFormatter, TimeService, TreePickerControl, TreePickerControlV2, TrendingsPage, USER_LABELS, UTLSettingsProvider, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getError, getMomentTz, getProfiles, getShiftByParameters, getShiftStyle, getShiftsRangeByParameters, getTokenFromLS, getUserPermissionsFromAPI, getUsers, renewToken, setPassword, setProfilesToUser, themeMESF, upsertUser, useAssetContext, useContextMenuMESF, useHasPermission, useMesfRealtime, useShiftNavigator, useShiftNavigatorManager, useStyles$C as useStyles, useToken, useUTLSettingsContext, useUserContext };
 //# sourceMappingURL=index.esm.js.map