@dexteel/mesf-core 5.10.0 → 5.12.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, Popover, MenuList, 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 as isNaN$1, 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';
@@ -42,7 +42,7 @@ import zoomPlugin from 'chartjs-plugin-zoom';
 import LockIcon from '@material-ui/icons/Lock';
 import SaveIcon from '@material-ui/icons/Save';
 import Button$1 from '@material-ui/core/Button';
-import Popover from '@material-ui/core/Popover';
+import Popover$1 from '@material-ui/core/Popover';
 import CreateIcon from '@material-ui/icons/Create';
 import { isAncestor, Tree, DndProvider as DndProvider$1 } from '@minoru/react-dnd-treeview';
 import FolderIcon from '@material-ui/icons/Folder';
@@ -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';
@@ -910,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,
@@ -926,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) {
@@ -1010,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,
@@ -1061,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) {
@@ -1253,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),
     },
@@ -1330,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 },
@@ -1341,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 },
@@ -1360,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,
@@ -1373,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)
@@ -1398,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)
@@ -1861,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",
@@ -1907,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];
@@ -2186,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",
@@ -2278,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];
@@ -2715,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",
@@ -2733,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" })));
@@ -2827,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",
@@ -2906,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];
@@ -3284,7 +3283,7 @@ var SearchFilter = function (_a) {
             }, 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,
     },
@@ -3316,7 +3315,7 @@ var formatTime = function (nowTime) {
 };
 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" } },
@@ -3453,7 +3452,7 @@ var useLogTableData = function () {
     return { rows: rows, columnDefs: columnDefs };
 };
 
-var useStyles$A = makeStyles(function (theme) { return ({
+var useStyles$y = makeStyles(function (theme) { return ({
     root: {
         "& .MuiDataGrid-row": {
             cursor: "pointer",
@@ -3522,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];
@@ -3832,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,
     },
@@ -3855,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;
@@ -4091,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",
@@ -4100,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];
@@ -4288,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",
@@ -4306,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 ({
@@ -4378,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",
@@ -4449,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;
     }, []);
@@ -4681,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,
     },
@@ -4707,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,
@@ -4909,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,
     },
@@ -4935,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;
@@ -5074,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,
     },
@@ -5101,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
@@ -5369,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",
@@ -5388,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 ({
@@ -5499,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",
@@ -5551,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];
@@ -5835,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,
@@ -5991,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",
@@ -6034,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];
@@ -6165,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",
@@ -6213,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];
@@ -6333,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",
@@ -6377,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];
@@ -6436,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",
@@ -6487,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;
@@ -6650,105 +6708,321 @@ var useAssetActions = function (_a) {
     return { handleDrop: handleDrop, handleCtrlClick: handleCtrlClick, handleDragEnd: handleDragEnd, handleDragStart: handleDragStart };
 };
 
-var TypeIcon = function (props) {
-    if (props.droppable) {
-        return React__default.createElement(FolderIcon, null);
-    }
-    switch (props.fileType) {
-        case "image":
-            return React__default.createElement(ImageIcon, null);
-        case "csv":
-            return React__default.createElement(ListAltIcon, null);
-        case "text":
-            return React__default.createElement(DescriptionIcon, null);
-        default:
-            return null;
-    }
-};
-
-var useStyles$m = makeStyles(function (theme) { return ({
-    root: {
-        alignItems: "center",
-        backgroundColor: "#1967d2",
-        borderRadius: "4px",
-        boxShadow: " 0 12px 24px -6px rgba(0, 0, 0, .25); 0 0 0 1px rgba(0, 0, 0, .08)",
-        color: "#fff",
-        display: "inline-grid",
-        fontSize: "14px",
-        gap: "8px",
-        gridTemplateColumns: "auto auto",
-        padding: "4px 8px",
-        pointerEvents: "none",
-    },
-    icon: {
-        alignItems: "center",
-        display: "flex",
-    },
-    label: {
-        alignItems: "center",
-        display: "flex",
-    },
-}); });
-var CustomDragPreview$1 = function (props) {
-    var _a;
-    var classes = useStyles$m();
-    var item = props.monitorProps.item;
-    return (React__default.createElement("div", { className: classes.root },
-        React__default.createElement("div", { className: classes.icon },
-            React__default.createElement(TypeIcon, { droppable: item.droppable, fileType: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.fileType })),
-        React__default.createElement("div", { className: classes.label }, item.text)));
-};
-
-var useStyles$l = makeStyles(function (theme) { return ({
-    root: {
-        alignItems: "center",
-        display: "flex",
-        height: "32px",
-    },
-    customNodeRoot: {
-        listStyleType: "none",
-        margin: 0,
-        padding: 0,
-    },
-    arrow: {
-        alignItems: "center",
-        cursor: "pointer",
-        display: "flex",
-        height: "24px",
-        justifyContent: "center",
-        width: "24px",
-        transition: "transform linear 0.1s",
-        transform: "rotate(0deg)",
-    },
-    "arrow > div": {
-        alignItems: "center",
-        display: "flex",
-    },
-    "arrow.is-open": {
-        transform: "rotate(90deg)",
-    },
-    filetype: {
-        display: "flex",
-    },
-    label: {
-        paddingInlineStart: "8px",
-    },
-    selected: {
-        backgroundColor: "#e8f0fe",
-    },
-    dragging: {
-        opacity: 0.5,
-    },
-}); });
-var customStyles$1 = "\n  ul, ol {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n  }\n";
-var CustomNode = function (_a) {
-    var setContextMenuOver = _a.setContextMenuOver, onDoubleClick = _a.onDoubleClick; _a.testIdPrefix; var isSelected = _a.isSelected, props = __rest(_a, ["setContextMenuOver", "onDoubleClick", "testIdPrefix", "isSelected"]);
-    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 nodeClasses = "".concat(classes.customNodeRoot, " ").concat(classes.root, " ").concat(isSelected ? classes.selected : "");
-    var handleClick = function (e) {
+var useAssetSearch = function (_a) {
+    var assetNodes = _a.assetNodes, externalSearchTerm = _a.externalSearchTerm, onSearchTermChange = _a.onSearchTermChange;
+    var _b = useState(externalSearchTerm || ""), searchTerm = _b[0], setSearchTerm = _b[1];
+    var _c = useState([]), searchResults = _c[0], setSearchResults = _c[1];
+    var _d = useState(false), showSearchResults = _d[0], setShowSearchResults = _d[1];
+    var _e = useState(-1), focusedSearchIndex = _e[0], setFocusedSearchIndex = _e[1];
+    var searchTimeoutRef = useRef(null);
+    var searchResultsRefs = useRef([]);
+    var searchIndex = useMemo(function () {
+        var index = [];
+        var nodeMap = new Map();
+        assetNodes.forEach(function (node) {
+            if (node.id !== undefined && node.id !== null) {
+                nodeMap.set(node.id, node);
+            }
+        });
+        var buildNodePath = function (nodeId) {
+            var path = [];
+            var currentNode = nodeMap.get(nodeId);
+            while (currentNode && currentNode.parent !== -1) {
+                path.unshift(currentNode.text);
+                currentNode = nodeMap.get(currentNode.parent);
+            }
+            if (currentNode && currentNode.parent === -1) {
+                path.unshift(currentNode.text);
+            }
+            return path;
+        };
+        assetNodes.forEach(function (node) {
+            if (node.id === undefined || node.id === null || !node.text)
+                return;
+            var nodePath = buildNodePath(node.id);
+            var pathStr = nodePath.join(" > ");
+            var hasChildren = assetNodes.some(function (child) { return child.parent === node.id; });
+            index.push({
+                id: node.id,
+                name: node.text,
+                path: pathStr,
+                isDroppable: node.droppable || false,
+                hasChildren: hasChildren,
+                node: node,
+            });
+        });
+        return index;
+    }, [assetNodes]);
+    var searchNodes = function (searchTerm) {
+        var lowerSearchTerm = searchTerm.toLowerCase();
+        return searchIndex.filter(function (item) {
+            return item.name.toLowerCase().includes(lowerSearchTerm);
+        });
+    };
+    React__default.useEffect(function () {
+        if (externalSearchTerm !== undefined && externalSearchTerm !== searchTerm) {
+            setSearchTerm(externalSearchTerm);
+        }
+    }, [externalSearchTerm]);
+    var handleSearchChange = function (event) {
+        var term = event.target.value;
+        setSearchTerm(term);
+        onSearchTermChange === null || onSearchTermChange === void 0 ? void 0 : onSearchTermChange(term);
+        if (searchTimeoutRef.current) {
+            clearTimeout(searchTimeoutRef.current);
+        }
+        if (term.trim() === "" || term.length < 2) {
+            setSearchResults([]);
+            setShowSearchResults(false);
+            setFocusedSearchIndex(-1);
+            return;
+        }
+        searchTimeoutRef.current = setTimeout(function () {
+            var results = searchNodes(term);
+            setSearchResults(results);
+            setShowSearchResults(results.length > 0);
+            var newFocusIndex = results.length > 0 ? 0 : -1;
+            setFocusedSearchIndex(newFocusIndex);
+            searchResultsRefs.current = new Array(results.length).fill(null);
+        }, 250);
+    };
+    var handleKeyDown = function (event) {
+        if (event.key === "Escape") {
+            if (showSearchResults) {
+                setSearchTerm("");
+                setSearchResults([]);
+                setShowSearchResults(false);
+                setFocusedSearchIndex(-1);
+            }
+            return undefined;
+        }
+        if (showSearchResults && searchResults.length > 0) {
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                var newIndex_1 = focusedSearchIndex < searchResults.length - 1
+                    ? focusedSearchIndex + 1
+                    : 0;
+                setFocusedSearchIndex(newIndex_1);
+                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);
+                setTimeout(function () { return scrollFocusedItemIntoView(newIndex_2); }, 0);
+            }
+            else if (event.key === "Enter" && focusedSearchIndex >= 0) {
+                event.preventDefault();
+                var selectedResult = searchResults[focusedSearchIndex];
+                return selectedResult;
+            }
+        }
+        return undefined;
+    };
+    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",
+            });
+        }
+    };
+    var clearSearch = function () {
+        setSearchTerm("");
+        setSearchResults([]);
+        setShowSearchResults(false);
+        setFocusedSearchIndex(-1);
+        onSearchTermChange === null || onSearchTermChange === void 0 ? void 0 : onSearchTermChange("");
+    };
+    var triggerSearch = function (term) {
+        setSearchTerm(term);
+        onSearchTermChange === null || onSearchTermChange === void 0 ? void 0 : onSearchTermChange(term);
+        if (searchTimeoutRef.current) {
+            clearTimeout(searchTimeoutRef.current);
+        }
+        if (term.trim() === "" || term.length < 2) {
+            setSearchResults([]);
+            setShowSearchResults(false);
+            setFocusedSearchIndex(-1);
+            return;
+        }
+        searchTimeoutRef.current = setTimeout(function () {
+            var results = searchNodes(term);
+            setSearchResults(results);
+            setShowSearchResults(results.length > 0);
+            var newFocusIndex = results.length > 0 ? 0 : -1;
+            setFocusedSearchIndex(newFocusIndex);
+            searchResultsRefs.current = new Array(results.length).fill(null);
+        }, 250);
+    };
+    return {
+        searchTerm: searchTerm,
+        searchResults: searchResults,
+        showSearchResults: showSearchResults,
+        focusedSearchIndex: focusedSearchIndex,
+        searchResultsRefs: searchResultsRefs,
+        handleSearchChange: handleSearchChange,
+        handleKeyDown: handleKeyDown,
+        scrollFocusedItemIntoView: scrollFocusedItemIntoView,
+        clearSearch: clearSearch,
+        triggerSearch: triggerSearch,
+    };
+};
+
+var AssetSearchInput = function (_a) {
+    var assetNodes = _a.assetNodes, onSearchResultClick = _a.onSearchResultClick;
+    var searchInputRef = useRef(null);
+    var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    var _c = useAssetSearch({ assetNodes: assetNodes }), searchTerm = _c.searchTerm, searchResults = _c.searchResults, showSearchResults = _c.showSearchResults, focusedSearchIndex = _c.focusedSearchIndex, searchResultsRefs = _c.searchResultsRefs, handleSearchChange = _c.handleSearchChange, handleKeyDown = _c.handleKeyDown, clearSearch = _c.clearSearch;
+    var handleSearchResultClick = function (result) {
+        onSearchResultClick(result);
+        clearSearch();
+        setAnchorEl(null);
+    };
+    var handleKeyDownWithResultSelection = function (event) {
+        var selectedResult = handleKeyDown(event);
+        if (selectedResult) {
+            handleSearchResultClick(selectedResult);
+        }
+    };
+    var handleSearchInputChange = function (event) {
+        handleSearchChange(event);
+        if (!anchorEl && searchInputRef.current) {
+            setAnchorEl(searchInputRef.current);
+        }
+    };
+    var handlePopoverClose = function () {
+        setAnchorEl(null);
+    };
+    return (React__default.createElement("div", { onKeyDown: handleKeyDownWithResultSelection, style: { marginBottom: 16 } },
+        React__default.createElement(TextField, { placeholder: "Search assets (min. 2 characters)...", variant: "outlined", size: "small", fullWidth: true, value: searchTerm, onChange: handleSearchInputChange, inputRef: searchInputRef, InputProps: {
+                startAdornment: (React__default.createElement(InputAdornment, { position: "start" },
+                    React__default.createElement(SearchIcon, { color: "action" }))),
+            } }),
+        React__default.createElement(Popover, { open: showSearchResults && Boolean(anchorEl), anchorEl: anchorEl, onClose: handlePopoverClose, disableAutoFocus: true, disableEnforceFocus: true, anchorOrigin: {
+                vertical: "bottom",
+                horizontal: "left",
+            }, transformOrigin: {
+                vertical: "top",
+                horizontal: "left",
+            }, PaperProps: {
+                style: { width: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.offsetWidth, maxHeight: 300 },
+            } },
+            React__default.createElement(MenuList, { dense: true }, searchResults.map(function (result, index) { return (React__default.createElement(MenuItem, { key: result.id, ref: function (el) {
+                    if (searchResultsRefs.current) {
+                        searchResultsRefs.current[index] = el;
+                    }
+                }, selected: index === focusedSearchIndex, onClick: function () { return handleSearchResultClick(result); } },
+                React__default.createElement(ListItemIcon, null, result.hasChildren || result.isDroppable ? (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, secondaryTypographyProps: {
+                        variant: "caption",
+                        color: "textSecondary",
+                        style: { fontStyle: "italic" },
+                    } }))); })))));
+};
+
+var TypeIcon = function (props) {
+    if (props.droppable) {
+        return React__default.createElement(FolderIcon, null);
+    }
+    switch (props.fileType) {
+        case "image":
+            return React__default.createElement(ImageIcon, null);
+        case "csv":
+            return React__default.createElement(ListAltIcon, null);
+        case "text":
+            return React__default.createElement(DescriptionIcon, null);
+        default:
+            return null;
+    }
+};
+
+var useStyles$k = makeStyles(function (theme) { return ({
+    root: {
+        alignItems: "center",
+        backgroundColor: "#1967d2",
+        borderRadius: "4px",
+        boxShadow: " 0 12px 24px -6px rgba(0, 0, 0, .25); 0 0 0 1px rgba(0, 0, 0, .08)",
+        color: "#fff",
+        display: "inline-grid",
+        fontSize: "14px",
+        gap: "8px",
+        gridTemplateColumns: "auto auto",
+        padding: "4px 8px",
+        pointerEvents: "none",
+    },
+    icon: {
+        alignItems: "center",
+        display: "flex",
+    },
+    label: {
+        alignItems: "center",
+        display: "flex",
+    },
+}); });
+var CustomDragPreview$1 = function (props) {
+    var _a;
+    var classes = useStyles$k();
+    var item = props.monitorProps.item;
+    return (React__default.createElement("div", { className: classes.root },
+        React__default.createElement("div", { className: classes.icon },
+            React__default.createElement(TypeIcon, { droppable: item.droppable, fileType: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.fileType })),
+        React__default.createElement("div", { className: classes.label }, item.text)));
+};
+
+var useStyles$j = makeStyles(function (theme) { return ({
+    root: {
+        alignItems: "center",
+        display: "flex",
+        height: "32px",
+    },
+    customNodeRoot: {
+        listStyleType: "none",
+        margin: 0,
+        padding: 0,
+    },
+    arrow: {
+        alignItems: "center",
+        cursor: "pointer",
+        display: "flex",
+        height: "24px",
+        justifyContent: "center",
+        width: "24px",
+        transition: "transform linear 0.1s",
+        transform: "rotate(0deg)",
+    },
+    "arrow > div": {
+        alignItems: "center",
+        display: "flex",
+    },
+    "arrow.is-open": {
+        transform: "rotate(90deg)",
+    },
+    filetype: {
+        display: "flex",
+    },
+    label: {
+        paddingInlineStart: "8px",
+    },
+    selected: {
+        backgroundColor: "#e8f0fe",
+    },
+    dragging: {
+        opacity: 0.5,
+    },
+}); });
+var customStyles$1 = "\n  ul, ol {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n  }\n";
+var CustomNode = function (_a) {
+    var setContextMenuOver = _a.setContextMenuOver, onDoubleClick = _a.onDoubleClick; _a.testIdPrefix; var isSelected = _a.isSelected, props = __rest(_a, ["setContextMenuOver", "onDoubleClick", "testIdPrefix", "isSelected"]);
+    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$j();
+    var nodeClasses = "".concat(classes.customNodeRoot, " ").concat(classes.root, " ").concat(isSelected ? classes.selected : "");
+    var handleClick = function (e) {
         props.onClick(e, props.node);
     };
     var handleToggle = function (e) {
@@ -6801,7 +7075,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",
@@ -6834,7 +7108,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;
@@ -6845,7 +7119,7 @@ var MultipleDragPreview = function (props) {
         }))));
 };
 
-var useStyles$j = makeStyles(function (theme) { return ({
+var useStyles$h = makeStyles(function (theme) { return ({
     root: {},
     contextMenu: {
         backgroundColor: "#F8F8F8",
@@ -6891,11 +7165,11 @@ 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];
-    var _e = useConfigurationAssetContext(), _f = _e.state, allAssetNodes = _f.allAssetNodes, openAssets = _f.openAssets, showContextMenu = _f.showContextMenu, showCreateNewContextMenu = _f.showCreateNewContextMenu, assetNodeSelectedInTree = _f.assetNodeSelectedInTree, _g = _f.anchorPoint, x = _g.x, y = _g.y, _h = _e.actions, setShowContextMenu = _h.setShowContextMenu, setShowCreateNewContextMenu = _h.setShowCreateNewContextMenu, setMenuContextAssetId = _h.setMenuContextAssetId, setAnchorPointX = _h.setAnchorPointX, setAnchorPointY = _h.setAnchorPointY, setAssetNodeSelectedInTree = _h.setAssetNodeSelectedInTree;
+    var _e = useConfigurationAssetContext(), _f = _e.state, allAssetNodes = _f.allAssetNodes, openAssets = _f.openAssets, showContextMenu = _f.showContextMenu, showCreateNewContextMenu = _f.showCreateNewContextMenu, assetNodeSelectedInTree = _f.assetNodeSelectedInTree, _g = _f.anchorPoint, x = _g.x, y = _g.y, _h = _e.actions, setShowContextMenu = _h.setShowContextMenu, setShowCreateNewContextMenu = _h.setShowCreateNewContextMenu, setMenuContextAssetId = _h.setMenuContextAssetId, setAnchorPointX = _h.setAnchorPointX, setAnchorPointY = _h.setAnchorPointY, setAssetNodeSelectedInTree = _h.setAssetNodeSelectedInTree, setOpenAssets = _h.setOpenAssets;
     var allAssets = useAssetContext().state.allAssets;
     var _j = useState(false), showCreateNewAssetDialog = _j[0], setShowCreateNewAssetDialog = _j[1];
     var _k = useState(false), showViewerAssetDialog = _k[0], setShowViewerAssetDialog = _k[1];
@@ -6981,327 +7255,167 @@ var AssetViewComponent = function () {
     var handleOnHideViewer = function () {
         setShowViewerAssetDialog(false);
         setIsDoubleClick(false);
-        setShowCreateNewContextMenu(false);
-        setShowContextMenu(false);
-    };
-    useEffect(function () {
-        searchAssets();
-    }, []);
-    var openAssetsArray = useMemo(function () {
-        return Object.keys(openAssets).map(function (el) { return Number.parseInt(el); });
-    }, [openAssets]);
-    return (React__default.createElement("div", { style: { width: "100%", height: "100%" } },
-        React__default.createElement("div", { onClick: handleClick },
-            React__default.createElement("div", { onContextMenu: handleCreateNewContextMenu },
-                React__default.createElement("div", null,
-                    React__default.createElement(Grid, { container: true, justifyContent: "flex-start", alignItems: "center", className: classes.root },
-                        React__default.createElement(Typography$1, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "Assets Tree"),
-                        isLoading ? (React__default.createElement(Grid, { container: true, style: { width: "100%", height: "100%" } },
-                            React__default.createElement(Grid, { item: true, xs: 12, md: 12, style: {
-                                    height: "71vh",
-                                    justifyContent: "center",
-                                    alignItems: "center",
-                                } },
-                                React__default.createElement("div", { style: {
-                                        width: "100%",
-                                        height: "100%",
-                                        display: "flex",
-                                        justifyContent: "center",
-                                        alignItems: "center",
-                                    } },
-                                    React__default.createElement(LazyLoading, null))))) : (React__default.createElement(Paper, { elevation: 2, style: {
-                                width: "100%",
-                                padding: "15px 20px 10px",
-                                borderRadius: "0.75rem",
-                            } },
-                            React__default.createElement(Grid, { container: true, alignItems: "center" },
-                                React__default.createElement(Grid, { container: true, style: {
-                                        height: "71vh",
-                                        overflowY: "auto",
-                                        paddingBottom: 10,
-                                    } },
-                                    React__default.createElement(Grid, null,
-                                        React__default.createElement(Tree, { rootId: -1, initialOpen: openAssetsArray, tree: allAssetNodes, enableAnimateExpand: true, classes: {
-                                                root: classes.assetRoot,
-                                                dropTarget: classes.dropTarget,
-                                            }, onDrop: handleDrop, onDragStart: handleDragStart, onDragEnd: handleDragEnd, canDrop: function (asset, options) {
-                                                return !selectedNodes.some(function (selectedNode) {
-                                                    return selectedNode.id === options.dropTargetId;
-                                                });
-                                            }, render: function (node, options) {
-                                                var selected = selectedNodes.some(function (selectedNode) { return selectedNode.id === node.id; });
-                                                return (React__default.createElement(CustomNode, __assign({ setContextMenuOver: handleContextMenu, node: node }, options, { isSelected: selected, isDragging: selected && isDragging, onClick: handleCtrlClick, onDoubleClick: handleShowViewerAsset })));
-                                            }, dragPreviewRender: function (monitorProps) {
-                                                if (selectedNodes.length > 1) {
-                                                    return (React__default.createElement(MultipleDragPreview, { dragSources: selectedNodes }));
-                                                }
-                                                return (React__default.createElement(CustomDragPreview$1, { monitorProps: monitorProps }));
-                                            } })))))),
-                        React__default.createElement(CreateNewAssetDialog, { show: showCreateNewAssetDialog, onHide: function (shouldUpdate) {
-                                setShowCreateNewAssetDialog(false);
-                                if (shouldUpdate) {
-                                    searchAssets();
-                                }
-                            } }),
-                        React__default.createElement(EditAssetDialog, { show: showEditAssetDialog, onHide: function (shouldUpdate) {
-                                setShowEditAssetDialog(false);
-                                if (shouldUpdate) {
-                                    searchAssets();
-                                }
-                            } }),
-                        React__default.createElement(ViewerAssetDialog, { show: showViewerAssetDialog, onHide: function () { return handleOnHideViewer(); } }),
-                        React__default.createElement(RemoveAssetDialog, { show: showRemoveAssetDialog, onHide: function (shouldUpdate) {
-                                setShowRemoveAssetDialog(false);
-                                if (shouldUpdate) {
-                                    searchAssets();
-                                }
-                            } })),
-                    React__default.createElement(Snackbar, { open: updatedSuccessfullyMessage, autoHideDuration: 2500, onClose: handleClose },
-                        React__default.createElement(Alert$2, { severity: "success", onClose: handleClose }, "Asset updated successfully"))),
-                showContextMenu && !isDoubleClick ? (React__default.createElement("ul", { className: classes.contextMenu, style: { top: y, left: x, padding: "6px 0" } },
-                    React__default.createElement(MenuItem, { className: classes.menuItem, onClick: function () { return setShowViewerAssetDialog(true); } },
-                        React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
-                            React__default.createElement(Grid, { item: true, md: 2, xs: 3 },
-                                React__default.createElement(FindInPageIcon, { style: { width: 18 } })),
-                            React__default.createElement(Grid, { item: true, md: 9, xs: 9 },
-                                React__default.createElement("div", { style: { marginLeft: 5 } }, "View Asset")))),
-                    React__default.createElement(MenuItem, { className: classes.menuItem, onClick: function () { return setShowEditAssetDialog(true); } },
-                        React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
-                            React__default.createElement(Grid, { item: true, md: 2, xs: 3 },
-                                React__default.createElement(EditIcon, { style: { width: 18 } })),
-                            React__default.createElement(Grid, { item: true, md: 9, xs: 9 },
-                                React__default.createElement("div", { style: { marginLeft: 5 } }, "Edit Asset")))),
-                    React__default.createElement(MenuItem, { className: classes.menuItem, onClick: function () { return setShowCreateNewAssetDialog(true); } },
-                        React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
-                            React__default.createElement(Grid, { item: true, md: 2, xs: 3 },
-                                React__default.createElement(AddBoxIcon, { style: { width: 18 } })),
-                            React__default.createElement(Grid, { item: true, md: 9, xs: 9 },
-                                React__default.createElement("div", { style: { marginLeft: 5 } }, "Create Asset")))),
-                    (assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.IsBranch) === false && (React__default.createElement(MenuItem, { className: classes.menuItem, onClick: function () { return setShowRemoveAssetDialog(true); } },
-                        React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
-                            React__default.createElement(Grid, { item: true, md: 2, xs: 3 },
-                                React__default.createElement(DeleteIcon, { style: { width: 18 } })),
-                            React__default.createElement(Grid, { item: true, md: 9, xs: 9 },
-                                React__default.createElement("div", { style: { marginLeft: 5 } }, "Remove Asset"))))))) : (""),
-                showCreateNewContextMenu ? (React__default.createElement("ul", { className: classes.contextMenu, style: { top: y, left: x } },
-                    React__default.createElement(MenuItem, { className: classes.menuItem, onClick: function () { return setShowCreateNewAssetDialog(true); } },
-                        React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
-                            React__default.createElement(Grid, { item: true, md: 2, xs: 3 },
-                                React__default.createElement(AddBoxIcon, { style: { width: 18 } })),
-                            React__default.createElement(Grid, { item: true, md: 9, xs: 9 },
-                                React__default.createElement("div", { style: { marginLeft: 5 } }, "Create Asset")))))) : (""))),
-        React__default.createElement(ErrorModal, { error: errorUpdate, onHide: function () { return setErrorUpdate(""); } }),
-        React__default.createElement(ErrorModal, { error: searchError, onHide: function () { return setSearchError(""); } })));
-};
-
-var ConfigurationAssetComponent = function () {
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(DndProvider, { backend: HTML5Backend },
-            React__default.createElement(AssetViewComponent, null))));
-};
-
-var ConfigurationAssetPage = function () {
-    return (React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
-        React.createElement(ConfigurationAssetComponent, null)));
-};
-
-var AssetPage = function (props) {
-    return (React.createElement(ConfigurationAssetProvider, null,
-        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*/];
-            }
+        setShowCreateNewContextMenu(false);
+        setShowContextMenu(false);
+    };
+    var handleSearchResultClick = function (result) {
+        var expandPath = function (nodeId) {
+            var path = [];
+            var findNodeAndPath = function (currentId) {
+                var node = allAssetNodes.find(function (n) { return n.id === currentId; });
+                if (node && node.parent !== -1) {
+                    path.unshift(currentId);
+                    findNodeAndPath(node.parent);
+                }
+                else if (node) {
+                    path.unshift(currentId);
+                }
+            };
+            findNodeAndPath(nodeId);
+            return path;
+        };
+        var pathToExpand = expandPath(result.id);
+        var newOpenAssets = __assign({}, openAssets);
+        pathToExpand.forEach(function (nodeId) {
+            newOpenAssets[nodeId] = nodeId;
         });
-    }); }, [userId, password]);
+        setOpenAssets(newOpenAssets);
+        setSelectedNodes([result.node]);
+        setTimeout(function () {
+            var nodeElement = document.querySelector("[data-node-id=\"".concat(result.id, "\"]"));
+            if (nodeElement) {
+                nodeElement.scrollIntoView({
+                    behavior: "smooth",
+                    block: "center",
+                });
+            }
+        }, 300);
+    };
     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);
-    }
+        searchAssets();
+    }, []);
+    var openAssetsArray = useMemo(function () {
+        return Object.keys(openAssets).map(function (el) { return Number.parseInt(el); });
+    }, [openAssets]);
+    return (React__default.createElement("div", { style: { width: "100%", height: "100%" } },
+        React__default.createElement("div", { onClick: handleClick },
+            React__default.createElement("div", { onContextMenu: handleCreateNewContextMenu },
+                React__default.createElement("div", null,
+                    React__default.createElement(Grid, { spacing: 0, container: true, justifyContent: "flex-start", alignItems: "flex-start", className: classes.root },
+                        React__default.createElement(Typography$1, { variant: "h5", style: { margin: "20px 0 20px 20px", fontWeight: 600 } }, "Assets Tree"),
+                        isLoading ? (React__default.createElement(Grid, { container: true, style: { width: "100%", height: "100%" } },
+                            React__default.createElement(Grid, { item: true, xs: 12, md: 12, style: {
+                                    height: "71vh",
+                                    justifyContent: "center",
+                                    alignItems: "center",
+                                } },
+                                React__default.createElement("div", { style: {
+                                        width: "100%",
+                                        height: "100%",
+                                        display: "flex",
+                                        justifyContent: "center",
+                                        alignItems: "center",
+                                    } },
+                                    React__default.createElement(LazyLoading, null))))) : (React__default.createElement(Paper, { elevation: 2, style: {
+                                width: "100%",
+                                padding: "15px 20px 10px",
+                                borderRadius: "0.75rem",
+                            } },
+                            React__default.createElement(AssetSearchInput, { assetNodes: allAssetNodes, onSearchResultClick: handleSearchResultClick }),
+                            React__default.createElement(Grid, { container: true, alignItems: "center" },
+                                React__default.createElement(Grid, { container: true, style: {
+                                        height: "71vh",
+                                        overflowY: "auto",
+                                        paddingBottom: 10,
+                                    } },
+                                    React__default.createElement(Grid, null,
+                                        React__default.createElement(Tree, { rootId: -1, initialOpen: openAssetsArray, tree: allAssetNodes, enableAnimateExpand: true, classes: {
+                                                root: classes.assetRoot,
+                                                dropTarget: classes.dropTarget,
+                                            }, onDrop: handleDrop, onDragStart: handleDragStart, onDragEnd: handleDragEnd, canDrop: function (asset, options) {
+                                                return !selectedNodes.some(function (selectedNode) {
+                                                    return selectedNode.id === options.dropTargetId;
+                                                });
+                                            }, render: function (node, options) {
+                                                var selected = selectedNodes.some(function (selectedNode) { return selectedNode.id === node.id; });
+                                                return (React__default.createElement(CustomNode, __assign({ setContextMenuOver: handleContextMenu, node: node }, options, { isSelected: selected, isDragging: selected && isDragging, onClick: handleCtrlClick, onDoubleClick: handleShowViewerAsset })));
+                                            }, dragPreviewRender: function (monitorProps) {
+                                                if (selectedNodes.length > 1) {
+                                                    return (React__default.createElement(MultipleDragPreview, { dragSources: selectedNodes }));
+                                                }
+                                                return (React__default.createElement(CustomDragPreview$1, { monitorProps: monitorProps }));
+                                            } })))))),
+                        React__default.createElement(CreateNewAssetDialog, { show: showCreateNewAssetDialog, onHide: function (shouldUpdate) {
+                                setShowCreateNewAssetDialog(false);
+                                if (shouldUpdate) {
+                                    searchAssets();
+                                }
+                            } }),
+                        React__default.createElement(EditAssetDialog, { show: showEditAssetDialog, onHide: function (shouldUpdate) {
+                                setShowEditAssetDialog(false);
+                                if (shouldUpdate) {
+                                    searchAssets();
+                                }
+                            } }),
+                        React__default.createElement(ViewerAssetDialog, { show: showViewerAssetDialog, onHide: function () { return handleOnHideViewer(); } }),
+                        React__default.createElement(RemoveAssetDialog, { show: showRemoveAssetDialog, onHide: function (shouldUpdate) {
+                                setShowRemoveAssetDialog(false);
+                                if (shouldUpdate) {
+                                    searchAssets();
+                                }
+                            } })),
+                    React__default.createElement(Snackbar, { open: updatedSuccessfullyMessage, autoHideDuration: 2500, onClose: handleClose },
+                        React__default.createElement(Alert$2, { severity: "success", onClose: handleClose }, "Asset updated successfully"))),
+                showContextMenu && !isDoubleClick ? (React__default.createElement("ul", { className: classes.contextMenu, style: { top: y, left: x, padding: "6px 0" } },
+                    React__default.createElement(MenuItem, { className: classes.menuItem, onClick: function () { return setShowViewerAssetDialog(true); } },
+                        React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
+                            React__default.createElement(Grid, { item: true, md: 2, xs: 3 },
+                                React__default.createElement(FindInPageIcon, { style: { width: 18 } })),
+                            React__default.createElement(Grid, { item: true, md: 9, xs: 9 },
+                                React__default.createElement("div", { style: { marginLeft: 5 } }, "View Asset")))),
+                    React__default.createElement(MenuItem, { className: classes.menuItem, onClick: function () { return setShowEditAssetDialog(true); } },
+                        React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
+                            React__default.createElement(Grid, { item: true, md: 2, xs: 3 },
+                                React__default.createElement(EditIcon, { style: { width: 18 } })),
+                            React__default.createElement(Grid, { item: true, md: 9, xs: 9 },
+                                React__default.createElement("div", { style: { marginLeft: 5 } }, "Edit Asset")))),
+                    React__default.createElement(MenuItem, { className: classes.menuItem, onClick: function () { return setShowCreateNewAssetDialog(true); } },
+                        React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
+                            React__default.createElement(Grid, { item: true, md: 2, xs: 3 },
+                                React__default.createElement(AddBoxIcon, { style: { width: 18 } })),
+                            React__default.createElement(Grid, { item: true, md: 9, xs: 9 },
+                                React__default.createElement("div", { style: { marginLeft: 5 } }, "Create Asset")))),
+                    (assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.IsBranch) === false && (React__default.createElement(MenuItem, { className: classes.menuItem, onClick: function () { return setShowRemoveAssetDialog(true); } },
+                        React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
+                            React__default.createElement(Grid, { item: true, md: 2, xs: 3 },
+                                React__default.createElement(DeleteIcon, { style: { width: 18 } })),
+                            React__default.createElement(Grid, { item: true, md: 9, xs: 9 },
+                                React__default.createElement("div", { style: { marginLeft: 5 } }, "Remove Asset"))))))) : (""),
+                showCreateNewContextMenu ? (React__default.createElement("ul", { className: classes.contextMenu, style: { top: y, left: x } },
+                    React__default.createElement(MenuItem, { className: classes.menuItem, onClick: function () { return setShowCreateNewAssetDialog(true); } },
+                        React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
+                            React__default.createElement(Grid, { item: true, md: 2, xs: 3 },
+                                React__default.createElement(AddBoxIcon, { style: { width: 18 } })),
+                            React__default.createElement(Grid, { item: true, md: 9, xs: 9 },
+                                React__default.createElement("div", { style: { marginLeft: 5 } }, "Create Asset")))))) : (""))),
+        React__default.createElement(ErrorModal, { error: errorUpdate, onHide: function () { return setErrorUpdate(""); } }),
+        React__default.createElement(ErrorModal, { error: searchError, onHide: function () { return setSearchError(""); } })));
+};
+
+var ConfigurationAssetComponent = function () {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(DndProvider, { backend: HTML5Backend },
+            React__default.createElement(AssetViewComponent, null))));
+};
+
+var ConfigurationAssetPage = function () {
+    return (React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
+        React.createElement(ConfigurationAssetComponent, null)));
+};
+
+var AssetPage = function (props) {
+    return (React.createElement(ConfigurationAssetProvider, null,
+        React.createElement(ConfigurationAssetPage, null)));
 };
 
 var INITIAL_VALUES$1 = {
@@ -7319,18 +7433,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",
@@ -7363,7 +7497,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();
@@ -7399,7 +7533,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",
@@ -7440,7 +7574,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];
@@ -7481,7 +7615,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",
     },
@@ -7503,7 +7637,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") {
@@ -7869,6 +8003,7 @@ var UserInitialState = {
     defaultAreaName: "",
     userLogged: false,
     permissions: [],
+    profiles: [],
 };
 var UserReducer = createSlice({
     name: "__",
@@ -7898,6 +8033,10 @@ var UserReducer = createSlice({
             var payload = _a.payload;
             state.permissions = payload;
         },
+        setProfiles: function (state, _a) {
+            var payload = _a.payload;
+            state.profiles = payload;
+        },
     },
 });
 
@@ -7913,6 +8052,12 @@ var useHasPermission = function () {
         return state.permissions.some(function (p) { return p === permission; });
     };
 };
+var useHasProfile = function () {
+    var state = useUserContext().state;
+    return function (profile) {
+        return state.profiles.some(function (p) { return p === profile; });
+    };
+};
 var UserProvider = function (_a) {
     var children = _a.children;
     var _b = useComplexState({
@@ -7920,13 +8065,14 @@ var UserProvider = function (_a) {
         reducers: UserReducer.caseReducers,
     }), state = _b[0], actions = _b[1];
     var _c = useState(false), permissionsLoaded = _c[0], setPermissionsLoaded = _c[1];
+    var _d = useState(false), profilesLoaded = _d[0], setProfilesLoaded = _d[1];
     var getUserId = function () {
         var sessionData = localStorage.getItem("userMESData") || "{}";
         var userData = JSON.parse(sessionData);
         return get(userData, "id", null);
     };
     var getUserPermissions = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var userId, resp, permissionsArray, error_1;
+        var userId, resp, permissionsArray, profilesArray, error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -7945,6 +8091,11 @@ var UserProvider = function (_a) {
                         actions.setPermissions(permissionsArray);
                         setPermissionsLoaded(true);
                     }
+                    if (resp && resp.Profiles) {
+                        profilesArray = resp.Profiles.split(",");
+                        actions.setProfiles(profilesArray);
+                        setProfilesLoaded(true);
+                    }
                     return [3 /*break*/, 4];
                 case 3:
                     error_1 = _a.sent();
@@ -7965,7 +8116,11 @@ var UserProvider = function (_a) {
             }
         },
     });
-    return (React__default.createElement(UserContext.Provider, { value: { state: state, actions: actions, isLoading: !permissionsLoaded } }, children));
+    return (React__default.createElement(UserContext.Provider, { value: {
+            state: state,
+            actions: actions,
+            isLoading: !permissionsLoaded || !profilesLoaded,
+        } }, children));
 };
 
 var getTokenFromLS = function () {
@@ -8032,7 +8187,7 @@ function useToken() {
     };
 }
 
-var useStyles$f = makeStyles(function (theme) { return ({
+var useStyles$d = makeStyles(function (theme) { return ({
     checkbox: {
         userSelect: "none",
     },
@@ -8051,7 +8206,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];
@@ -8221,7 +8376,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",
@@ -8237,7 +8392,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%",
@@ -9255,49 +9410,121 @@ var MESApiService = /** @class */ (function () {
     return MESApiService;
 }());
 
-var getUser = function (UserId, UserName) { return __awaiter(void 0, void 0, void 0, function () {
+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 });
-                parameters.push({ name: "UserName", value: UserName });
-                return [4 /*yield*/, apiService.callV2("[SEC].[GetUser]", parameters)];
+                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*/, resp];
+                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 getAssets = function () { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, resp;
+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();
-                return [4 /*yield*/, apiService.callV2("[MES].[GetAssets]", [])];
+                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 getUTLSettings = function () { return __awaiter(void 0, void 0, void 0, function () {
+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("[UTL].[GetSettings]", [])];
+                return [4 /*yield*/, apiService.callV2("[SEC].[GetAuthTypes]", [])];
             case 1:
                 resp = _a.sent();
                 return [2 /*return*/, resp];
         }
     });
 }); };
-var upsertDefaultAreaId = function (UserId, DefaultAreaId) { return __awaiter(void 0, void 0, void 0, function () {
+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) {
@@ -9305,85 +9532,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) || ""));
@@ -9420,42 +9768,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) {
@@ -9546,7 +9950,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,
@@ -9561,7 +9965,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;
@@ -9601,7 +10005,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),
@@ -9624,7 +10028,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];
@@ -9683,7 +10087,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,
@@ -9701,7 +10105,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;
@@ -9824,7 +10228,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,
@@ -9839,7 +10243,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 () {
@@ -9890,7 +10294,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%)",
@@ -9969,7 +10373,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];
@@ -10064,7 +10468,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",
@@ -10087,13 +10491,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 () {
@@ -10124,7 +10533,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
@@ -10180,7 +10589,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;
@@ -10251,7 +10660,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,
@@ -10281,7 +10690,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({
@@ -10396,28 +10805,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];
@@ -10430,14 +10819,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: "TargetNamesCSV", 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 () {
@@ -10530,31 +10936,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"))))))));
 };
 
@@ -11635,7 +12047,7 @@ var ColorPicker = function (_a) {
                 padding: 0,
                 margin: "4px",
             } }),
-        React__default.createElement(Popover, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
+        React__default.createElement(Popover$1, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
                 vertical: "bottom",
                 horizontal: "left",
             } },
@@ -14440,7 +14852,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)));
@@ -14800,5 +15212,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, useHasProfile, useMesfRealtime, useShiftNavigator, useShiftNavigatorManager, useStyles$C as useStyles, useToken, useUTLSettingsContext, useUserContext };
 //# sourceMappingURL=index.esm.js.map