npm - @dexteel/mesf-core - Versions diffs - 4.1.0 → 4.3.0 - Mend

@dexteel/mesf-core 4.1.0 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.esm.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Typography, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Checkbox, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
+import { Typography, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Checkbox, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, useTheme as useTheme$1, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
 import { values, get, isNil as isNil$1, isEmpty } from 'lodash-es';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, Component, createContext, useContext, useMemo, useCallback, lazy, Suspense } from 'react';
@@ -54,7 +54,6 @@ import InputLabel from '@material-ui/core/InputLabel';
 import 'ag-grid-enterprise';
 import { useForm, Controller } from 'react-hook-form';
 import DialogContentText$1 from '@material-ui/core/DialogContentText';
-import LockRounded from '@material-ui/icons/LockRounded';
 import DeleteIcon from '@material-ui/icons/Delete';
 import EditIcon from '@material-ui/icons/Edit';
 import 'ag-grid-enterprise/styles/ag-grid.css';
@@ -472,9 +471,8 @@ var TreePickerControl = function (props) {
     };
     return (React__default.createElement(Grid, { container: true, className: classes.root },
         React__default.createElement(Grid, { container: true, item: true, md: 12, xs: 12, style: { position: "relative" } },
-            React__default.createElement(Grid, { item: true },
-                React__default.createElement(TextField, { label: inputTitle, variant: "outlined", value: props.description, margin: "dense", autoComplete: 'off', fullWidth: true, disabled: true })),
-            React__default.createElement(Grid, { item: true },
+            React__default.createElement(Grid, { item: true, style: { position: "relative" } },
+                React__default.createElement(TextField, { label: inputTitle, variant: "outlined", value: props.description, margin: "dense", autoComplete: 'off', fullWidth: true, disabled: true }),
                 React__default.createElement(AccountTreeIcon, { style: { position: "absolute", right: 15, top: 16, cursor: "pointer" } })),
             React__default.createElement("div", { style: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, cursor: 'pointer' }, onClick: handleClickListItem })),
         React__default.createElement(ModalTreeFilterControl, __assign({ classes: {
@@ -1011,7 +1009,7 @@ var LazyLoading = function () {
             React__default.createElement("div", null))));
 };
-var useStyles$r = makeStyles$1(function (theme) {
+var useStyles$s = makeStyles$1(function (theme) {
     return ({
         buttons: {
             opacity: 0,
@@ -1031,7 +1029,7 @@ var useStyles$r = makeStyles$1(function (theme) {
 var useJobsTableData = function (_a) {
     var setRowSelected = _a.setRowSelected;
     var _b = useJobsContext().state, jobsData = _b.jobsData, blockButtons = _b.blockButtons;
-    var classes = useStyles$r();
+    var classes = useStyles$s();
     var rows = jobsData.map(function (_a) {
         var JobId = _a.JobId, sProcedure = _a.sProcedure, Running = _a.Running, LastStarted = _a.LastStarted, LastCounter = _a.LastCounter, Enabled = _a.Enabled, RestartAfterFailure = _a.RestartAfterFailure;
         return ({
@@ -1049,18 +1047,18 @@ var useJobsTableData = function (_a) {
     };
     var renderButtonEnable = function (params) {
         var isDisabled = (params.data.Enabled) || (blockButtons);
-        return (React__default.createElement("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" } },
-            React__default.createElement(Button$1, { style: { height: "100%" }, fullWidth: true, color: "primary", onClick: function () { setRowSelected(params.data); }, disabled: isDisabled }, "ENABLE")));
+        return (React__default.createElement("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", padding: 5 } },
+            React__default.createElement(Button$1, { style: { height: "100%", maxHeight: "27px" }, variant: "contained", fullWidth: true, color: "primary", onClick: function () { setRowSelected(params.data); }, disabled: isDisabled }, "ENABLE")));
     };
     var renderButtonDisable = function (params) {
         var isDisabled = (!params.data.Enabled) || (blockButtons);
-        return (React__default.createElement("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" } },
-            React__default.createElement(Button$1, { style: { height: "100%" }, fullWidth: true, color: "secondary", onClick: function () { setRowSelected(params.data); }, disabled: isDisabled }, "DISABLED")));
+        return (React__default.createElement("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", padding: 5 } },
+            React__default.createElement(Button$1, { style: { height: "100%", maxHeight: "27px" }, variant: "contained", fullWidth: true, color: "secondary", onClick: function () { setRowSelected(params.data); }, disabled: isDisabled }, "DISABLED")));
     };
     var renderButtonReset = function (params) {
         var isDisabled = (!params.data.Enabled) || (blockButtons);
-        return (React__default.createElement("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" } },
-            React__default.createElement(Button$1, { style: { height: "100%" }, fullWidth: true, color: "primary", onClick: function () { setRowSelected(params.data); }, disabled: isDisabled }, "RESET")));
+        return (React__default.createElement("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", padding: 5 } },
+            React__default.createElement(Button$1, { style: { height: "100%", maxHeight: "27px" }, variant: "contained", fullWidth: true, color: "primary", onClick: function () { setRowSelected(params.data); }, disabled: isDisabled }, "RESET")));
     };
     var renderButtonMenu = function (params) {
         return (React__default.createElement(Grid$1, { container: true, style: {
@@ -1078,31 +1076,31 @@ var useJobsTableData = function (_a) {
                     React__default.createElement(FormatListBulletedSharpIcon, { style: { height: "auto" }, color: "action" })))));
     };
     var columnDefs = [
-        { field: 'sProcedure', minWidth: 150, headerName: 'Procedure', type: 'string', flex: 2 },
-        { field: 'Running', minWidth: 130, headerName: 'Status', valueFormatter: function (_a) {
+        { field: 'sProcedure', minWidth: 260, headerName: 'Procedure', type: 'string', flex: 2 },
+        { field: 'Running', minWidth: 100, maxWidth: 100, headerName: 'Status', valueFormatter: function (_a) {
                 var value = _a.value;
                 return (value ? 'running' : 'inactive');
-            }, flex: 2 },
-        { field: 'LastStarted', minWidth: 140, headerName: 'Started', valueFormatter: function (_a) {
+            }, flex: 1 },
+        { field: 'LastStarted', minWidth: 100, maxWidth: 100, headerName: 'Started', valueFormatter: function (_a) {
                 var value = _a.value;
                 return (value === null ? 'NULL' : moment(value).format('DD/MM/YYYY HH:mm'));
-            }, flex: 2 },
-        { field: 'LastCounter', minWidth: 150, headerName: 'Last Seen', valueFormatter: function (_a) {
+            }, flex: 1 },
+        { field: 'LastCounter', minWidth: 130, maxWidth: 130, headerName: 'Last Seen', valueFormatter: function (_a) {
                 var value = _a.value;
                 return (value === null ? 'NULL' : moment(value).format('DD/MM/YYYY HH:mm'));
             }, flex: 2 },
-        { field: 'Enabled', minWidth: 140, headerName: 'Enabled', valueFormatter: function (_a) {
+        { field: 'Enabled', minWidth: 70, maxWidth: 70, headerName: 'Enabled', valueFormatter: function (_a) {
                 var value = _a.value;
                 return (!value ? 'N' : 'Y');
-            }, flex: 2 },
-        { field: 'RestartAfterFailure', minWidth: 170, headerName: 'AutoRecover', valueFormatter: function (_a) {
+            }, flex: 1 },
+        { field: 'RestartAfterFailure', minWidth: 70, maxWidth: 70, headerName: 'AutoRecover', valueFormatter: function (_a) {
                 var value = _a.value;
                 return (!value ? 'N' : 'Y');
-            }, flex: 2 },
-        { field: 'Enable', headerName: 'Actions', minWidth: 80, cellRenderer: renderButtonEnable, flex: 2, wrapText: false, autoHeight: false, wrapHeaderText: false, sortable: false },
-        { field: 'Disable', headerName: ' ', minWidth: 80, cellRenderer: renderButtonDisable, flex: 2, wrapText: false, autoHeight: false, wrapHeaderText: false, sortable: false },
-        { field: 'Reset', headerName: ' ', minWidth: 80, cellRenderer: renderButtonReset, flex: 2, wrapText: false, autoHeight: false, wrapHeaderText: false, sortable: false },
-        { field: 'Menu', headerName: ' ', minWidth: 80, cellRenderer: renderButtonMenu, flex: 2, wrapText: false, autoHeight: false, wrapHeaderText: false, sortable: false },
+            }, flex: 1 },
+        { field: 'Enable', headerName: '', minWidth: 80, cellRenderer: renderButtonEnable, flex: 1, wrapText: false, autoHeight: false, wrapHeaderText: false, sortable: false },
+        { field: 'Disable', headerName: 'Actions', minWidth: 80, cellRenderer: renderButtonDisable, flex: 1, wrapText: false, autoHeight: false, wrapHeaderText: false, sortable: false },
+        { field: 'Reset', headerName: ' ', minWidth: 80, cellRenderer: renderButtonReset, flex: 1, wrapText: false, autoHeight: false, wrapHeaderText: false, sortable: false },
+        { field: 'Menu', headerName: ' ', minWidth: 80, maxWidth: 80, cellRenderer: renderButtonMenu, flex: 1, wrapText: false, autoHeight: false, wrapHeaderText: false, sortable: false },
     ];
     return { rows: rows, columnDefs: columnDefs };
 };
@@ -1241,7 +1239,7 @@ var OnEnableJob = function (_a) {
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
-var useStyles$q = makeStyles(function (theme) {
+var useStyles$r = makeStyles(function (theme) {
     return ({
         root: {
             '& .MuiDataGrid-row': {
@@ -1304,7 +1302,7 @@ var useStyles$q = makeStyles(function (theme) {
     });
 });
 var TableJobs = function () {
-    var classes = useStyles$q();
+    var classes = useStyles$r();
     var _a = useState(""), error = _a[0], setError = _a[1];
     var _b = useState(true), loading = _b[0], setLoading = _b[1];
     var _c = useState(null), rowSelected = _c[0], setRowSelected = _c[1];
@@ -1366,7 +1364,7 @@ var TableJobs = function () {
         }
         if (rowSelectedInGrid) {
             result.push({
-                name: 'Disabled',
+                name: 'Disable',
                 action: function () {
                     setRowSelected(rowSelectedInGrid);
                 }
@@ -1507,7 +1505,7 @@ var LOG_TYPE_CODES = [
     { 'id': "E", 'description': "Error" }
 ];
-var useStyles$p = makeStyles$1(function (theme) {
+var useStyles$q = makeStyles$1(function (theme) {
     return ({
         buttons: {
             opacity: 0,
@@ -1527,7 +1525,7 @@ var useStyles$p = makeStyles$1(function (theme) {
 var useLogTableData = function () {
     var _a;
     var state = useLogsContext().state;
-    var classes = useStyles$p();
+    var classes = useStyles$q();
     var formatTime = function (nowTime) {
         return ((nowTime.toLocaleDateString('en-US') + ' ' + nowTime.toLocaleTimeString()));
     };
@@ -1674,7 +1672,7 @@ var useGetLogsFromAPI = function (_a) {
     return update;
 };
-var useStyles$o = makeStyles(function (theme) {
+var useStyles$p = makeStyles(function (theme) {
     return ({
         title: {
             fontSize: 15
@@ -1693,7 +1691,7 @@ var formatTime = function (nowTime) {
 };
 var ModalLogSelected = function (_a) {
     var show = _a.show, onHide = _a.onHide, selectedLog = _a.selectedLog;
-    var classes = useStyles$o();
+    var classes = useStyles$p();
     return (React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
         React__default.createElement(Modal$2, __assign({}, { show: show }, { onHide: function () { return onHide(false); }, size: "lg", "aria-labelledby": "contained-modal-title-vcenter", centered: true }),
             React__default.createElement(Modal$2.Header, { closeButton: true, style: { padding: "10px 30px" } },
@@ -1778,7 +1776,7 @@ var SearchFilter = function (_a) {
         React__default.createElement(FormHelperText, { style: { marginBottom: 10, marginTop: -15 } }, "Search by Source, Message or User")));
 };
-var useStyles$n = makeStyles(function (theme) {
+var useStyles$o = makeStyles(function (theme) {
     return ({
         root: {
             '& .MuiDataGrid-row': {
@@ -1841,7 +1839,7 @@ var useStyles$n = makeStyles(function (theme) {
 });
 var TableLogs = function () {
     var _a = useLogsContext(), _b = _a.state.searchData, Start = _b.Start, End = _b.End, Search = _b.Search, LogTypeCode = _b.LogTypeCode, _c = _a.actions, setStartFilter = _c.setStartFilter, setEndFilter = _c.setEndFilter, setSearchFilter = _c.setSearchFilter, setLogTypeCodeFilter = _c.setLogTypeCodeFilter, resetFilters = _c.resetFilters;
-    var classes = useStyles$n();
+    var classes = useStyles$o();
     var gridStyle = useMemo(function () { return ({ height: '100%', width: '100%' }); }, []);
     var gridRef = useRef(null);
     var _d = useState(false), showLogModal = _d[0], setShowLogModal = _d[1];
@@ -2012,15 +2010,15 @@ var getProfiles$1 = function () { return __awaiter(void 0, void 0, void 0, funct
         }
     });
 }); };
-var upsertProfile = function (profile) { return __awaiter(void 0, void 0, void 0, function () {
+var upsertProfile = function (ProfileId, ProfileName) { 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: "ProfileId", value: profile.ProfileId });
-                parameters.push({ name: "ProfileName", value: profile.ProfileName });
+                parameters.push({ name: "ProfileId", value: ProfileId });
+                parameters.push({ name: "ProfileName", value: ProfileName });
                 return [4 /*yield*/, apiService.callV2("[SEC].[UpsertProfile]", parameters)];
             case 1:
                 resp = _a.sent();
@@ -2094,108 +2092,7 @@ var deleteProfile = function (profileId) { return __awaiter(void 0, void 0, void
     });
 }); };
-var useStyles$m = makeStyles(function (theme) {
-    return ({
-        title: {
-            fontSize: 15
-        },
-        modalTitle: {
-            fontSize: 15,
-            marginTop: theme.spacing(1)
-        },
-        chip: {
-            margin: 2
-        },
-        errorLabel: {
-            fontSize: 12,
-            color: "#F44336"
-        },
-        error: {
-            marginBottom: "15px"
-        },
-        textError: {
-            listStyle: "none",
-            padding: 0,
-            margin: 0
-        }
-    });
-});
-var EditProfile = function (_a) {
-    var _b;
-    var profileForEdit = _a.profileForEdit, show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$m();
-    var _c = useState(null); _c[0]; _c[1];
-    var _d = useState(false), open = _d[0], setOpen = _d[1];
-    var _e = useState(true), isLoading = _e[0], setIsLoading = _e[1];
-    var _f = useState(false), isSubmitLoading = _f[0], setIsSubmitLoading = _f[1];
-    var _g = useState(""), error = _g[0], setError = _g[1];
-    var _h = useState(""), alertMessage = _h[0], setAlertMessage = _h[1];
-    var _j = useForm({ defaultValues: INITIAL_VALUES$2 }), register = _j.register; _j.control; var setValue = _j.setValue, handleSubmit = _j.handleSubmit, errors = _j.formState.errors; _j.watch;
-    var handleClose = function (event, reason) {
-        if (reason === 'clickaway') {
-            return;
-        }
-        setOpen(false);
-    };
-    var onSubmit = function (profile) { return __awaiter(void 0, void 0, void 0, function () {
-        var res;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    setIsSubmitLoading(true);
-                    return [4 /*yield*/, upsertProfile(profile)];
-                case 1:
-                    res = _a.sent();
-                    if (!res.ok) {
-                        setError(res.message);
-                        setAlertMessage("Please try again");
-                    }
-                    else {
-                        setAlertMessage("The profile was edited successfully");
-                        onHide(true);
-                    }
-                    setIsSubmitLoading(false);
-                    setOpen(true);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    useEffect(function () {
-        if (show) {
-            setIsLoading(true);
-            setIsSubmitLoading(false);
-            if (profileForEdit) {
-                setValue("ProfileId", profileForEdit.ProfileId);
-                setValue("ProfileName", profileForEdit.ProfileName);
-                setIsLoading(false);
-            }
-        }
-    }, [show]);
-    return (React.createElement(React.Fragment, null,
-        !error && !isLoading && (React.createElement(Modal$2, __assign({}, { show: show }, { onHide: function () { return onHide(false); }, size: "lg", "aria-labelledby": "contained-modal-title-vcenter", centered: true }),
-            React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
-                React.createElement(Modal$2.Header, { closeButton: true, style: { padding: "10px 30px" } },
-                    React.createElement(Modal$2.Title, { id: "contained-modal-title-vcenter", style: { margin: "20px 0 0" } }, profileForEdit === null || profileForEdit === void 0 ? void 0 :
-                        profileForEdit.ProfileName,
-                        " Profile")),
-                React.createElement(Modal$2.Body, { style: { padding: "15px 30px" } },
-                    React.createElement(Grid, { container: true, spacing: 1 },
-                        React.createElement(Grid, { item: true, md: 12, xs: 12 },
-                            React.createElement(TextField, __assign({}, register("ProfileName", { required: true }), { label: "Profile name", variant: "outlined", error: !!errors.ProfileName, fullWidth: true, margin: "dense", autoComplete: 'off' })),
-                            "  ",
-                            ((_b = errors.ProfileName) === null || _b === void 0 ? void 0 : _b.type) === 'required' && React.createElement("span", { className: classes.errorLabel }, "Profile name is required")))),
-                React.createElement(Modal$2.Footer, { style: { padding: "20px 30px 30px" } },
-                    React.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
-                        React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
-                            React.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Cancel")),
-                        React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
-                            React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress$1, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: 'submit' }, "Save"))))))),
-        React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
-            React.createElement(Alert, { severity: "info", onClose: handleClose }, alertMessage)),
-        React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
-};
-var useStyles$l = makeStyles(function (theme) {
+var useStyles$n = makeStyles(function (theme) {
     return ({
         title: {
             fontSize: 15
@@ -2220,7 +2117,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$l();
+    var classes = useStyles$n();
     var _g = useForm({ defaultValues: INITIAL_VALUES$2 }), 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;
@@ -2228,7 +2125,7 @@ var CreateProfile = function (_a) {
             switch (_a.label) {
                 case 0:
                     setIsSubmitLoading(true);
-                    return [4 /*yield*/, upsertProfile(data)];
+                    return [4 /*yield*/, upsertProfile(data.ProfileId, data.ProfileName)];
                 case 1:
                     res = _a.sent();
                     if (!res.ok)
@@ -2356,7 +2253,7 @@ var DeleteProfile = function (_a) {
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
-var useStyles$k = makeStyles$1(function (theme) {
+var useStyles$m = makeStyles$1(function (theme) {
     return ({
         buttons: {
             opacity: 0,
@@ -2374,9 +2271,9 @@ var useStyles$k = makeStyles$1(function (theme) {
     });
 });
 var useTableData$2 = function (_a) {
-    var setProfileForEdit = _a.setProfileForEdit, setModalProceduresProfile = _a.setModalProceduresProfile, setModalEditProfile = _a.setModalEditProfile, setProfileForDelete = _a.setProfileForDelete, setModalDeleteProfile = _a.setModalDeleteProfile;
+    var setProfileForEdit = _a.setProfileForEdit, setModalProceduresProfile = _a.setModalProceduresProfile, setProfileForDelete = _a.setProfileForDelete, setModalDeleteProfile = _a.setModalDeleteProfile;
     var state = useProfilesContext().state;
-    var classes = useStyles$k();
+    var classes = useStyles$m();
     var rows = state.profiles.map(function (_a) {
         var ProfileId = _a.ProfileId, ProfileName = _a.ProfileName;
         return ({
@@ -2408,16 +2305,6 @@ var useTableData$2 = function (_a) {
                             justifyContent: "center",
                             alignItems: "center"
                         } },
-                        React__default.createElement(Button, { onClick: function () {
-                                (function () { return __awaiter(void 0, void 0, void 0, function () {
-                                    return __generator(this, function (_a) {
-                                        setProfileForEdit(params.data);
-                                        setModalEditProfile(true);
-                                        return [2 /*return*/];
-                                    });
-                                }); })();
-                            } },
-                            React__default.createElement(EditIcon, { style: { width: 16, height: 16 }, color: "primary" })),
                         React__default.createElement(Button, { onClick: function () {
                                 (function () { return __awaiter(void 0, void 0, void 0, function () {
                                     return __generator(this, function (_a) {
@@ -2427,7 +2314,7 @@ var useTableData$2 = function (_a) {
                                     });
                                 }); })();
                             } },
-                            React__default.createElement(LockRounded, { style: { width: 16, height: 16 }, color: "inherit" })),
+                            React__default.createElement(EditIcon, { color: "primary" })),
                         React__default.createElement(Button, { onClick: function () {
                                 (function () { return __awaiter(void 0, void 0, void 0, function () {
                                     return __generator(this, function (_a) {
@@ -2437,7 +2324,7 @@ var useTableData$2 = function (_a) {
                                     });
                                 }); })();
                             } },
-                            React__default.createElement(DeleteIcon, { style: { width: 16, height: 16 }, color: "secondary" })),
+                            React__default.createElement(DeleteIcon, { color: "secondary" })),
                         React__default.createElement(Button, { style: {}, onClick: function (e) { return onActionsClick(e, params); } },
                             React__default.createElement(FormatListBulletedSharpIcon, { style: { height: "auto" }, color: "action" })))));
             },
@@ -2453,9 +2340,23 @@ var useTableData$2 = function (_a) {
     return { rows: rows, columnDefs: columnDefs };
 };
+var useStyles$l = makeStyles$1(function (theme) {
+    return ({
+        root: {
+            "& .MuiFormLabel-asterisk": {
+                display: "none"
+            }
+        },
+        errorLabel: {
+            fontSize: 12,
+            color: "#F44336"
+        }
+    });
+});
 var DataTable = function (_a) {
-    var actionsOfProfile = _a.actionsOfProfile, onSelectionChanged = _a.onSelectionChanged;
+    var actionsOfProfile = _a.actionsOfProfile, onSelectionChanged = _a.onSelectionChanged, profileName = _a.profileName, setProfileName = _a.setProfileName;
     var _b = useState(""), filterInput = _b[0], setFilterInput = _b[1];
+    var classes = useStyles$l();
     var _c = useState([]), allActions = _c[0], setAllActions = _c[1];
     var _d = useState(""), error = _d[0], setError = _d[1];
     var _e = useState(null), gridApi = _e[0], setGridApi = _e[1];
@@ -2509,6 +2410,9 @@ var DataTable = function (_a) {
             }
         },
     ];
+    var handleChangeProfielName = function (ev) {
+        setProfileName(ev.target.value);
+    };
     var defaultColDef = useMemo(function () { return ({
         resizable: true,
         sortable: true,
@@ -2550,39 +2454,20 @@ var DataTable = function (_a) {
         }); })();
     }, []);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Grid$1, { md: 12, xs: 12, style: { width: "100rem", padding: "10px 0px" } },
-            React__default.createElement(TextField, { id: "outlined-basic", label: "Filter...", variant: "outlined", style: { width: "100%" }, value: filterInput, onChange: handlerFilter })),
+        React__default.createElement(Grid$1, { container: true, md: 12, xs: 12, style: { padding: "0 0 10px", justifyContent: "space-between" }, className: classes.root },
+            React__default.createElement(Grid$1, { item: true, md: 12, xs: 12 },
+                React__default.createElement(Modal$2.Title, { id: "contained-modal-title-vcenter", style: { width: "100%", fontSize: 20, margin: "5px 0 0" } }, "Actions")),
+            React__default.createElement(Grid$1, { item: true, md: 6, xs: 12, style: { paddingRight: 15 } },
+                React__default.createElement(TextField, { id: "outlined-basic", label: "Search", variant: "outlined", value: filterInput, onChange: handlerFilter, margin: "dense", style: { width: "100%" } })),
+            React__default.createElement(Grid$1, { item: true, md: 6, xs: 12, style: { paddingLeft: 15 } },
+                React__default.createElement(TextField, { id: "outlined-basic", label: "Profile name to edit", variant: "outlined", value: profileName, fullWidth: true, margin: "dense", autoComplete: 'off', onChange: function (e) { return handleChangeProfielName(e); }, InputLabelProps: {
+                        shrink: true
+                    }, required: true, error: profileName.length === 0, style: { width: "100%" } }))),
         React__default.createElement("div", { className: "ag-theme-balham", style: { width: "100%", height: "60vh" } },
             React__default.createElement(AgGridReact, { getRowId: function (params) { return params.data.ActionId; }, onGridReady: onGridReady, rowData: rows, columnDefs: columns, defaultColDef: defaultColDef, onFirstDataRendered: onFirstDataRendered, rowSelection: "multiple", rowMultiSelectWithClick: true, onSelectionChanged: onAgGridSelectionChanged })),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
-makeStyles(function (theme) {
-    return ({
-        title: {
-            fontSize: 15
-        },
-        modalTitle: {
-            fontSize: 15,
-            marginTop: theme.spacing(1)
-        },
-        chip: {
-            margin: 2
-        },
-        errorLabel: {
-            fontSize: 12,
-            color: "#F44336"
-        },
-        error: {
-            marginBottom: "15px"
-        },
-        textError: {
-            listStyle: "none",
-            padding: 0,
-            margin: 0
-        }
-    });
-});
 var ActionsOfProfile = function (_a) {
     var profileForEdit = _a.profileForEdit, show = _a.show, onHide = _a.onHide;
     var _b = useState(null), actionsOfProfile = _b[0], setActionsOfProfile = _b[1];
@@ -2591,7 +2476,9 @@ var ActionsOfProfile = function (_a) {
     var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
     var _f = useState([]), actionsSelected = _f[0], setActionsSelected = _f[1];
     var _g = useState(""), error = _g[0], setError = _g[1];
-    var _h = useForm({ defaultValues: INITIAL_VALUES$2 }), handleSubmit = _h.handleSubmit; _h.formState.errors;
+    var _h = useState(""), profileName = _h[0], setProfileName = _h[1];
+    var _j = useState(""), nameError = _j[0], setNameError = _j[1];
+    var _k = useForm({ defaultValues: INITIAL_VALUES$2 }), handleSubmit = _k.handleSubmit; _k.formState.errors;
     var handleClose = function (event, reason) {
         if (reason === 'clickaway') {
             return;
@@ -2599,7 +2486,7 @@ var ActionsOfProfile = function (_a) {
         setOpen(false);
     };
     var onSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var resp;
+        var resp, profileRes;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -2607,13 +2494,24 @@ var ActionsOfProfile = function (_a) {
                     return [4 /*yield*/, upsertProfileActions(profileForEdit, actionsSelected)];
                 case 1:
                     resp = _a.sent();
-                    if (!resp.ok) {
+                    if (!resp.ok)
                         setError(resp.message);
-                    }
-                    else {
+                    if (!((profileForEdit === null || profileForEdit === void 0 ? void 0 : profileForEdit.ProfileName) !== profileName)) return [3 /*break*/, 3];
+                    return [4 /*yield*/, upsertProfile(profileForEdit === null || profileForEdit === void 0 ? void 0 : profileForEdit.ProfileId, profileName)];
+                case 2:
+                    profileRes = _a.sent();
+                    if (!profileRes.ok)
+                        setNameError(profileRes.message);
+                    else if (profileRes.ok && resp.ok) {
                         setOpen(true);
                         onHide(true);
                     }
+                    return [3 /*break*/, 4];
+                case 3:
+                    setOpen(true);
+                    onHide(true);
+                    _a.label = 4;
+                case 4:
                     setIsSubmitLoading(false);
                     return [2 /*return*/];
             }
@@ -2626,6 +2524,7 @@ var ActionsOfProfile = function (_a) {
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
+                            setProfileName(profileForEdit === null || profileForEdit === void 0 ? void 0 : profileForEdit.ProfileName);
                             setIsLoading(true);
                             setIsSubmitLoading(false);
                             if (!profileForEdit) return [3 /*break*/, 2];
@@ -2648,14 +2547,15 @@ var ActionsOfProfile = function (_a) {
         React.createElement(Modal$2, __assign({}, { show: show }, { onHide: function () { return onHide(false); }, size: "lg", "aria-labelledby": "contained-modal-title-vcenter", centered: true }),
             React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
                 React.createElement(Modal$2.Header, { closeButton: true, style: { padding: "10px 30px" } },
-                    React.createElement(Modal$2.Title, { id: "contained-modal-title-vcenter", style: { margin: "20px 0 0" } }, profileForEdit === null || profileForEdit === void 0 ? void 0 :
-                        profileForEdit.ProfileName,
-                        " Profile")),
-                React.createElement(Modal$2.Body, { style: { padding: "15px 30px" } },
+                    React.createElement(Modal$2.Title, { id: "contained-modal-title-vcenter", style: { margin: "20px 0 0", width: "100%" } },
+                        React.createElement(Grid, { container: true },
+                            React.createElement(Grid, { item: true, md: 2, xs: 2, style: { maxWidth: "85px" } }, "Profile: "),
+                            React.createElement(Grid, { item: true, md: 10, xs: 10 }, profileForEdit === null || profileForEdit === void 0 ? void 0 : profileForEdit.ProfileName)))),
+                React.createElement(Modal$2.Body, { style: { padding: "0 30px 15px" } },
                     isLoading && (React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", style: { minHeight: "60px" } },
                         React.createElement(CircularProgress$1, { size: "3rem" }))),
                     !error && !isLoading && actionsOfProfile &&
-                        React.createElement(DataTable, { actionsOfProfile: actionsOfProfile, onSelectionChanged: setActionsSelected })),
+                        React.createElement(DataTable, { actionsOfProfile: actionsOfProfile, onSelectionChanged: setActionsSelected, profileName: profileName, setProfileName: setProfileName })),
                 React.createElement(Modal$2.Footer, { style: { padding: "20px 30px 30px" } }, !isLoading && (React.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
                     React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
                         React.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Cancel")),
@@ -2663,10 +2563,11 @@ var ActionsOfProfile = function (_a) {
                         React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress$1, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: 'submit' }, "Save"))))))),
         React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
             React.createElement(Alert, { severity: "info", onClose: handleClose }, "The actions of the profile were edited successfully")),
-        React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
+        React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
+        React.createElement(ErrorModal, { error: nameError, onHide: function () { return setNameError(""); } })));
 };
-var useStyles$j = makeStyles(function (theme) {
+var useStyles$k = makeStyles(function (theme) {
     return ({
         root: {
             "& .ag-icon-menu": {
@@ -2734,14 +2635,13 @@ var useStyles$j = makeStyles(function (theme) {
 var TableProfiles = function (_a) {
     var getProfilesFromAPI = _a.getProfilesFromAPI, isLoading = _a.isLoading;
     var _b = useState(false), modalCreateActive = _b[0], setModalCreateActive = _b[1];
-    var _c = useState(false), modalEditProfile = _c[0], setModalEditProfile = _c[1];
-    var _d = useState(null), profileForEdit = _d[0], setProfileForEdit = _d[1];
-    var _e = useState(false), modalProceduresProfile = _e[0], setModalProceduresProfile = _e[1];
-    var _f = useState(false), modalDeleteProfile = _f[0], setModalDeleteProfile = _f[1];
-    var _g = useState(null), profileForDelete = _g[0], setProfileForDelete = _g[1];
+    var _c = useState(null), profileForEdit = _c[0], setProfileForEdit = _c[1];
+    var _d = useState(false), modalProceduresProfile = _d[0], setModalProceduresProfile = _d[1];
+    var _e = useState(false), modalDeleteProfile = _e[0], setModalDeleteProfile = _e[1];
+    var _f = useState(null), profileForDelete = _f[0], setProfileForDelete = _f[1];
     var gridStyle = useMemo(function () { return ({ height: '100%', width: '100%' }); }, []);
-    var _h = useState(null), gridApi = _h[0], setGridApi = _h[1];
-    var classes = useStyles$j();
+    var _g = useState(null), gridApi = _g[0], setGridApi = _g[1];
+    var classes = useStyles$k();
     var loadingOverlayComponent = useMemo(function () {
         return LazyLoading;
     }, []);
@@ -2753,13 +2653,12 @@ var TableProfiles = function (_a) {
             wrapHeaderText: true
         };
     }, []);
-    var _j = useTableData$2({
+    var _h = useTableData$2({
         setModalDeleteProfile: setModalDeleteProfile,
-        setModalEditProfile: setModalEditProfile,
         setModalProceduresProfile: setModalProceduresProfile,
         setProfileForDelete: setProfileForDelete,
         setProfileForEdit: setProfileForEdit
-    }), rows = _j.rows, columnDefs = _j.columnDefs;
+    }), rows = _h.rows, columnDefs = _h.columnDefs;
     var getContextMenuItems = React.useCallback(function (params) {
         var _a;
         var data = (_a = params.node) === null || _a === void 0 ? void 0 : _a.data;
@@ -2772,15 +2671,6 @@ var TableProfiles = function (_a) {
                 }
             });
         }
-        if (data) {
-            result.push({
-                name: 'Edit Profile',
-                action: function () {
-                    setProfileForEdit(data);
-                    setModalEditProfile(true);
-                }
-            });
-        }
         if (data) {
             result.push({
                 name: 'Remove Profile',
@@ -2819,12 +2709,6 @@ var TableProfiles = function (_a) {
                         if (shouldUpdate)
                             getProfilesFromAPI().then(function () { });
                     } }),
-                React.createElement(EditProfile, { show: modalEditProfile, profileForEdit: profileForEdit, onHide: function (shouldUpdate) {
-                        setModalEditProfile(false);
-                        setProfileForEdit(null);
-                        if (shouldUpdate)
-                            getProfilesFromAPI().then(function () { });
-                    } }),
                 React.createElement(DeleteProfile, { show: modalDeleteProfile, profileForDelete: profileForDelete, onHide: function (shouldUpdate) {
                         setModalDeleteProfile(false);
                         setProfileForDelete(null);
@@ -2841,7 +2725,6 @@ var TableProfiles = function (_a) {
                     React.createElement("div", { style: gridStyle, className: "ag-theme-alpine" },
                         React.createElement(AgGridReact, { rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 38, headerHeight: 32, loadingOverlayComponent: loadingOverlayComponent, animateRows: true, getContextMenuItems: function (e) { return getContextMenuItems(e); }, pagination: true, rowSelection: "single", onRowDoubleClicked: function (event) {
                                 setProfileForEdit(event.data);
-                                setModalEditProfile(true);
                             }, onGridReady: function (params) { return setGridApi(params.api); } }))),
                 React.createElement(Grid, { container: true, justifyContent: "flex-end" },
                     React.createElement(Grid, { item: true, md: 2, xs: 12, className: classes.btnModal },
@@ -2991,7 +2874,7 @@ var DeleteShiftParameters = function (PatternStart) { return __awaiter(void 0, v
     });
 }); };
-var useStyles$i = makeStyles(function (theme) {
+var useStyles$j = makeStyles(function (theme) {
     return ({
         title: {
             fontSize: 15
@@ -3019,7 +2902,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$i();
+    var classes = useStyles$j();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _g = useForm({ defaultValues: shiftTableData ? shiftTableData : INITIAL_VALUES$1 }), control = _g.control, handleSubmit = _g.handleSubmit, reset = _g.reset, watch = _g.watch, setValue = _g.setValue, errors = _g.formState.errors;
     // Progress bar
@@ -3199,7 +3082,7 @@ var CreateShift = function (_a) {
             React.createElement(Alert, { severity: "success", onClose: handleClose }, "The shift was created successfully"))));
 };
-var useStyles$h = makeStyles(function (theme) {
+var useStyles$i = makeStyles(function (theme) {
     return ({
         title: {
             fontSize: 15
@@ -3227,7 +3110,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$h();
+    var classes = useStyles$i();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _f = useState(""), error = _f[0], setError = _f[1];
     var _g = useForm({ defaultValues: INITIAL_VALUES$1 }), control = _g.control, setValue = _g.setValue, reset = _g.reset, watch = _g.watch, errors = _g.formState.errors;
@@ -3364,7 +3247,7 @@ var DeleteShift = function (_a) {
             React.createElement(Alert, { severity: "warning", onClose: handleClose }, "The shift was deleted successfully"))));
 };
-var useStyles$g = makeStyles(function (theme) {
+var useStyles$h = makeStyles(function (theme) {
     return ({
         title: {
             fontSize: 15
@@ -3393,7 +3276,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$g();
+    var classes = useStyles$h();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _g = useForm({ defaultValues: INITIAL_VALUES$1 }), control = _g.control, setValue = _g.setValue, handleSubmit = _g.handleSubmit, reset = _g.reset, watch = _g.watch, errors = _g.formState.errors;
     // Progress bar
@@ -3587,7 +3470,7 @@ var EditShift = function (_a) {
             React.createElement(Alert, { severity: "success", onClose: handleClose }, "The shift was created successfully"))));
 };
-var useStyles$f = makeStyles$1(function (theme) {
+var useStyles$g = makeStyles$1(function (theme) {
     return ({
         root: {
             opacity: 0,
@@ -3608,7 +3491,7 @@ var useTableData$1 = function (_a) {
     var _b;
     var setOpenModalEditShift = _a.setOpenModalEditShift, setOpenModalDeleteShift = _a.setOpenModalDeleteShift;
     var _c = useShiftsCrewsContext(), state = _c.state, actions = _c.actions;
-    var classes = useStyles$f();
+    var classes = useStyles$g();
     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 ({
@@ -3698,7 +3581,7 @@ var useTableData$1 = function (_a) {
     return { rows: rows, columnDefs: columnDefs };
 };
-var useStyles$e = makeStyles(function (theme) {
+var useStyles$f = makeStyles(function (theme) {
     return ({
         root: {
             "& .ag-icon-menu": {
@@ -3749,7 +3632,7 @@ var useStyles$e = makeStyles(function (theme) {
 });
 var TableShiftsCrews = function (_a) {
     _a.isLoading; var getShiftsCrewsFromAPI = _a.getShiftsCrewsFromAPI;
-    var classes = useStyles$e();
+    var classes = useStyles$f();
     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];
@@ -4014,7 +3897,7 @@ var ConfigurationAssetProvider = function (_a) {
     return (React__default.createElement(ConfigurationAssetContext.Provider, { value: { state: state, actions: actions } }, children));
 };
-var useStyles$d = makeStyles$1(function (theme) { return ({
+var useStyles$e = makeStyles$1(function (theme) { return ({
     root: {
         alignItems: "center",
         display: "flex",
@@ -4061,7 +3944,7 @@ var CustomNode = function (_a) {
     var _c = useConfigurationAssetContext(), openAssets = _c.state.openAssets, setOpenAssets = _c.actions.setOpenAssets;
     var _d = props.node, id = _d.id, droppable = _d.droppable, data = _d.data;
     var indent = props.depth * 24;
-    var classes = useStyles$d();
+    var classes = useStyles$e();
     var nodeClasses = "".concat(classes.customNodeRoot, " ").concat(classes.root, " ").concat(isSelected ? classes.selected : "");
     var handleClick = function (e) {
         props.onClick(e, props.node);
@@ -4116,7 +3999,7 @@ var CustomNode = function (_a) {
             React__default.createElement(Typography, { variant: "body2" }, props.node.text))));
 };
-var useStyles$c = makeStyles$1(function (theme) { return ({
+var useStyles$d = makeStyles$1(function (theme) { return ({
     root: {
         alignItems: "flex-start",
         backgroundColor: "#1967d2",
@@ -4148,7 +4031,7 @@ var useStyles$c = makeStyles$1(function (theme) { return ({
     }
 }); });
 var MultipleDragPreview = function (props) {
-    var classes = useStyles$c();
+    var classes = useStyles$d();
     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;
@@ -4159,7 +4042,7 @@ var MultipleDragPreview = function (props) {
         }))));
 };
-var useStyles$b = makeStyles$1(function (theme) { return ({
+var useStyles$c = makeStyles$1(function (theme) { return ({
     root: {
         alignItems: "center",
         backgroundColor: "#1967d2",
@@ -4184,7 +4067,7 @@ var useStyles$b = makeStyles$1(function (theme) { return ({
 }); });
 var CustomDragPreview = function (props) {
     var _a;
-    var classes = useStyles$b();
+    var classes = useStyles$c();
     var item = props.monitorProps.item;
     return (React__default.createElement("div", { className: classes.root },
         React__default.createElement("div", { className: classes.icon },
@@ -4477,7 +4360,7 @@ var useAssetCodes = function () {
     return { loadFilterAssets: loadFilterAssets };
 };
-var useStyles$a = makeStyles(function (theme) { return ({
+var useStyles$b = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -4518,14 +4401,14 @@ var useStyles$a = makeStyles(function (theme) { return ({
 }); });
 var CreateNewAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$a();
+    var classes = useStyles$b();
     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];
     var _e = useState(""), errorCreateAsset = _e[0], setErrorCreateAsset = _e[1];
     var _f = useState(false), isCreateSubmitLoading = _f[0], setIsCreateSubmitLoading = _f[1];
     var allAssets = useAssetContext().state.allAssets;
-    var _g = useConfigurationAssetContext(), _h = _g.state, assetNodeSelectedInTree = _h.assetNodeSelectedInTree, assetCodes = _h.assetCodes, dataToCreateAsset = _h.dataToCreateAsset, _j = _g.actions, setAssetNameToCreateAsset = _j.setAssetNameToCreateAsset, setAssetTreeName = _j.setAssetTreeName, setAssetParentAssetIdToCreateAsset = _j.setAssetParentAssetIdToCreateAsset, setParentAssetNameInNodeSelectedInTree = _j.setParentAssetNameInNodeSelectedInTree;
+    var _g = useConfigurationAssetContext(), _h = _g.state, assetNodeSelectedInTree = _h.assetNodeSelectedInTree, assetCodes = _h.assetCodes, dataToCreateAsset = _h.dataToCreateAsset; _h.assetTreeName; var _j = _g.actions, setAssetNameToCreateAsset = _j.setAssetNameToCreateAsset, setAssetTreeName = _j.setAssetTreeName, setAssetParentAssetIdToCreateAsset = _j.setAssetParentAssetIdToCreateAsset, setParentAssetNameInNodeSelectedInTree = _j.setParentAssetNameInNodeSelectedInTree;
     var loadFilterAssets = useAssetCodes().loadFilterAssets;
     var _k = useForm({ defaultValues: dataToCreateAsset ? dataToCreateAsset : DATA_ASSET_INITIAL_VALUES }), control = _k.control, handleSubmit = _k.handleSubmit, reset = _k.reset, setValue = _k.setValue, errors = _k.formState.errors;
     var handleCancel = function () {
@@ -4563,16 +4446,16 @@ var CreateNewAssetDialog = function (_a) {
     var changeParentAssetId = function (value, description) {
         setValue("ParentAssetId", parseInt(value));
         setAssetParentAssetIdToCreateAsset(parseInt(value));
-        setAssetTreeName(description);
+        setParentAssetNameInNodeSelectedInTree(description);
     };
     var handleFormSubmit = handleSubmit(handleCreateAsset);
     useEffect(function () {
         if (show) {
             reset();
             loadFilterAssets();
-            if (assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.ParentAssetId) {
-                setValue("ParentAssetId", assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.ParentAssetId);
-                var parentAssetNode = allAssets.find(function (node) { return node.AssetId === (assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.ParentAssetId); });
+            if (assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.AssetId) {
+                setValue("ParentAssetId", parseInt(assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.AssetId));
+                var parentAssetNode = allAssets.find(function (node) { return node.AssetId === (assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.AssetId); });
                 setParentAssetNameInNodeSelectedInTree(parentAssetNode === null || parentAssetNode === void 0 ? void 0 : parentAssetNode.AssetName);
             }
             else {
@@ -4606,7 +4489,7 @@ var CreateNewAssetDialog = function (_a) {
                             React__default.createElement(Grid, { container: true },
                                 React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { marginBottom: "8px" } },
                                     React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: 0, marginTop: 10 } },
-                                        React__default.createElement(Controller, { name: "ParentAssetId", control: control, render: function (_a) { return (React__default.createElement(TreePickerControl, { inputTitle: "Asset", title: "Asset Parent", dataSource: assetCodes, value: (assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.ParentAssetId) || 1, description: (assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.ParentAssetName) || "Plant", onSelect: changeParentAssetId, selectBranch: true, selectActive: false, selectInternal: false })); } }))),
+                                        React__default.createElement(Controller, { name: "ParentAssetId", control: control, render: function (_a) { return (React__default.createElement(TreePickerControl, { inputTitle: "Asset", title: "Asset Parent", dataSource: assetCodes, value: (assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.AssetId) || 1, description: (assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.ParentAssetName) || "Plant", onSelect: changeParentAssetId, selectBranch: true, selectActive: false, selectInternal: false })); } }))),
                                 React__default.createElement(Grid, { container: true, style: { marginTop: "10px 0", padding: "0" } },
                                     React__default.createElement(Grid, { item: true, xs: 6, md: 6 },
                                         React__default.createElement(Controller, { name: "CanBeDefaultAsset", control: control, defaultValue: false, render: function (_a) {
@@ -4626,7 +4509,7 @@ var CreateNewAssetDialog = function (_a) {
             React__default.createElement(Alert$2, { severity: "info", onClose: handleClose }, "Document created succesfully")))));
 };
-var useStyles$9 = makeStyles(function (theme) { return ({
+var useStyles$a = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -4675,7 +4558,7 @@ var useStyles$9 = makeStyles(function (theme) { return ({
 }); });
 var ViewerAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$9();
+    var classes = useStyles$a();
     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;
@@ -4732,7 +4615,7 @@ var ViewerAssetDialog = function (_a) {
                                             } }))))))))))));
 };
-var useStyles$8 = makeStyles(function (theme) { return ({
+var useStyles$9 = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -4774,7 +4657,7 @@ var useStyles$8 = makeStyles(function (theme) { return ({
 }); });
 var RemoveAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$8();
+    var classes = useStyles$9();
     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];
@@ -4832,7 +4715,7 @@ var RemoveAssetDialog = function (_a) {
             React__default.createElement(Alert$2, { severity: "info", onClose: handleClose }, "Asset removed succesfully"))));
 };
-var useStyles$7 = makeStyles(function (theme) { return ({
+var useStyles$8 = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -4878,7 +4761,7 @@ var useStyles$7 = makeStyles(function (theme) { return ({
 }); });
 var EditAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$7();
+    var classes = useStyles$8();
     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];
@@ -4983,7 +4866,7 @@ var EditAssetDialog = function (_a) {
                                 React__default.createElement(Alert$3, { severity: "info", onClose: handleClose }, "Document created succesfully"))))))))));
 };
-var useStyles$6 = makeStyles$1(function (theme) { return ({
+var useStyles$7 = makeStyles$1(function (theme) { return ({
     root: {},
     contextMenu: {
         fontSize: "14px",
@@ -5014,7 +4897,7 @@ var useStyles$6 = makeStyles$1(function (theme) { return ({
 }); });
 var AssetViewComponent = function () {
     var _a = useState([]), selectedNodes = _a[0], setSelectedNodes = _a[1];
-    var classes = useStyles$6();
+    var classes = useStyles$7();
     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];
@@ -5080,6 +4963,7 @@ var AssetViewComponent = function () {
         var left = e.clientX;
         setAnchorPointX(left);
         setAnchorPointY(top);
+        setSelectedNodes([data]);
         setShowContextMenu(true);
         var selectedNode = allAssets.find(function (node) { return node.AssetId === data.id; });
         if (selectedNode) {
@@ -5345,11 +5229,12 @@ var setProfilesToUser = function (UserId, profileIds) { return __awaiter(void 0,
     });
 }); };
-var useStyles$5 = makeStyles(function (theme) {
+var useStyles$6 = makeStyles(function (theme) {
     return ({
         root: {
             "& .MuiSelect-select": {
-                height: "auto"
+                height: "auto",
+                minHeight: "40px"
             }
         },
         formControl: {
@@ -5375,19 +5260,19 @@ var getStyles = function (profileId, profiles, theme) {
             : theme.typography.fontWeightMedium
     };
 };
-var ITEM_HEIGHT = 48;
-var ITEM_PADDING_TOP = 8;
-var MenuProps = {
+var ITEM_HEIGHT$1 = 48;
+var ITEM_PADDING_TOP$1 = 8;
+var MenuProps$1 = {
     PaperProps: {
         style: {
-            maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+            maxHeight: ITEM_HEIGHT$1 * 4.5 + ITEM_PADDING_TOP$1,
             width: 250
         }
     }
 };
 var ProfilesPicker = function (_a) {
     var value = _a.value, onChange = _a.onChange, userIdForDelete = _a.userIdForDelete, setprofileError = _a.setprofileError;
-    var classes = useStyles$5();
+    var classes = useStyles$6();
     var theme = useTheme();
     var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
     var _c = useState([]), profiles = _c[0], setProfiles = _c[1];
@@ -5418,8 +5303,8 @@ var ProfilesPicker = function (_a) {
         return ((_a = profiles.find(function (p) { return p.ProfileId === profileId; })) === null || _a === void 0 ? void 0 : _a.ProfileName.replaceAll("Profile", "")) || '';
     }
     return (React__default.createElement("div", { className: classes.root }, !isLoading && profiles.length ? (React__default.createElement(FormControl, { className: classes.formControl, disabled: !!userIdForDelete },
-        React__default.createElement(InputLabel, { id: "demo-mutiple-chip-label" }, "Profiles"),
-        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)));
+        React__default.createElement(InputLabel, { id: "demo-mutiple-chip-label", style: value.length ? { display: "flex", alignItems: "center" } : { display: "flex", alignItems: "center", marginTop: 10 } }, "Profiles"),
+        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$1 }, 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 INITIAL_VALUES = {
@@ -5435,11 +5320,52 @@ var INITIAL_VALUES = {
 };
 // @flow
+var useStyles$5 = makeStyles$1(function (theme) {
+    return ({
+        root: {
+            "& .MuiSelect-select": {
+                minHeight: "40px"
+            }
+        },
+        formControl: {
+            width: "100%"
+        },
+        chips: {
+            display: 'flex',
+            flexWrap: 'wrap'
+        },
+        chip: {
+            margin: 2
+        },
+        noLabel: {
+            marginTop: theme.spacing(3)
+        }
+    });
+});
+var ITEM_HEIGHT = 48;
+var ITEM_PADDING_TOP = 8;
+var MenuProps = {
+    PaperProps: {
+        style: {
+            maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+            width: 250
+        }
+    }
+};
 var AuthTypeSelector = function (_a) {
     var value = _a.value, onChange = _a.onChange;
+    var classes = useStyles$5();
     var _b = useState([]), authTypes = _b[0], setAuthTypes = _b[1];
     var _c = useState(true), isLoading = _c[0], setIsLoading = _c[1];
-    var _d = useState(''), error = _d[0], setError = _d[1];
+    var theme = useTheme$1();
+    var _d = useState(''); _d[0]; var setError = _d[1];
+    var getStyles = function (AuthTypeId, authTypes, theme) {
+        return {
+            fontWeight: !!authTypes.find(function (p) { return p.AuthTypeId === AuthTypeId; })
+                ? theme.typography.fontWeightRegular
+                : theme.typography.fontWeightMedium
+        };
+    };
     var selectedAuthTypeName = useMemo(function () {
         var _a;
         return ((_a = authTypes.find(function (authType) { return authType.AuthTypeId === value; })) === null || _a === void 0 ? void 0 : _a.Name) || 'Empty';
@@ -5458,12 +5384,10 @@ var AuthTypeSelector = function (_a) {
             }
         });
     }, []);
-    return (React.createElement(React.Fragment, null,
-        (!isLoading && authTypes.length) ? (React.createElement(FormControl, { variant: 'outlined', fullWidth: true },
-            React.createElement(InputLabel, { id: "auth-type-label" }, "Auth Type"),
-            React.createElement(Select, { fullWidth: true, labelId: "auth-type-label", id: "auth-type-id", value: value, onChange: onChange, input: React.createElement(Input, { id: "select-multiple-chip" }), renderValue: function (selected) { return (React.createElement(Chip, { key: "selected-authType-".concat(selected), label: selectedAuthTypeName })); } }, authTypes.map(function (authType) { return (React.createElement(MenuItem, { key: "authType-".concat(authType.AuthTypeId), value: authType.AuthTypeId }, authType.Name)); })))) : null,
-        !isLoading && error ? (React.createElement(React.Fragment, null,
-            React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }))) : null));
+    return (React.createElement("div", { className: classes.root }, !isLoading && authTypes.length ? (React.createElement(FormControl, { className: classes.formControl },
+        React.createElement(InputLabel, { id: "demo-mutiple-chip-label" }, "Auth type"),
+        React.createElement(Select, { autoWidth: true, labelId: "demo-mutiple-chip-label", id: "demo-mutiple-chip", value: value, style: { padding: 0 }, onChange: onChange, input: React.createElement(Input, { id: "select-multiple-chip" }), renderValue: function (selected) { return (React.createElement("div", { className: classes.chips },
+                React.createElement(Chip, { key: "selected-authType-".concat(selected), label: selectedAuthTypeName, className: classes.chip }))); }, MenuProps: MenuProps }, 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$4 = makeStyles(function (theme) {
@@ -5554,23 +5478,22 @@ var CreateUser = function (_a) {
                         React.createElement(Grid, { item: true, md: 6, xs: 12 },
                             React.createElement(TextField, __assign({}, register("LastName", { required: true }), { label: "Last name", variant: "outlined", error: !!errors.FirstName, fullWidth: true, margin: "dense", autoComplete: 'off' })),
                             ((_d = errors.LastName) === null || _d === void 0 ? void 0 : _d.type) === 'required' && React.createElement("span", { className: classes.errorLabel }, "Last name is required")),
-                        React.createElement(Grid, { item: true, container: true, xs: 12, spacing: 3 },
-                            React.createElement(Grid, { item: true, xs: 12, md: 6 },
-                                React.createElement(Controller, { name: "ProfilesId", control: control, rules: { required: true }, render: function (_a) {
-                                        var _b = _a.field, onChange = _b.onChange, value = _b.value;
-                                        return (React.createElement(ProfilesPicker, { onChange: onChange, value: value, userIdForDelete: null, setprofileError: setprofileError }));
-                                    } }),
-                                errors.ProfilesId && React.createElement("span", { className: classes.errorLabel }, "Select a profile(s)")),
-                            React.createElement(Grid, { item: true, xs: 12, md: 6 },
-                                React.createElement(Controller, { name: "AuthTypeId", control: control, render: function (_a) {
-                                        var _b = _a.field, value = _b.value, onChange = _b.onChange;
-                                        return (React.createElement(AuthTypeSelector, { value: value, onChange: onChange }));
-                                    } })),
-                            React.createElement(Grid, { item: true, xs: 12, md: 6 },
-                                React.createElement(Controller, { name: "IsActive", control: control, render: function (_a) {
-                                        var field = _a.field;
-                                        return (React.createElement(FormControlLabel$1, { className: classes.checkbox, control: React.createElement(Checkbox$1, { checked: field.value, onChange: field.onChange, name: "IsActive", color: "primary" }), label: "Active" }));
-                                    } }))))),
+                        React.createElement(Grid, { item: true, xs: 12, md: 6 },
+                            React.createElement(Controller, { name: "ProfilesId", control: control, rules: { required: true }, render: function (_a) {
+                                    var _b = _a.field, onChange = _b.onChange, value = _b.value;
+                                    return (React.createElement(ProfilesPicker, { onChange: onChange, value: value, userIdForDelete: null, setprofileError: setprofileError }));
+                                } }),
+                            errors.ProfilesId && React.createElement("span", { className: classes.errorLabel }, "Select a profile(s)")),
+                        React.createElement(Grid, { item: true, xs: 12, md: 6 },
+                            React.createElement(Controller, { name: "AuthTypeId", control: control, render: function (_a) {
+                                    var _b = _a.field, value = _b.value, onChange = _b.onChange;
+                                    return (React.createElement(AuthTypeSelector, { value: value, onChange: onChange }));
+                                } })),
+                        React.createElement(Grid, { item: true, xs: 12, md: 6, style: { marginTop: "5px" } },
+                            React.createElement(Controller, { name: "IsActive", control: control, render: function (_a) {
+                                    var field = _a.field;
+                                    return (React.createElement(FormControlLabel$1, { className: classes.checkbox, control: React.createElement(Checkbox$1, { checked: field.value, onChange: field.onChange, name: "IsActive", color: "primary" }), label: "Active" }));
+                                } })))),
                 React.createElement(Modal$2.Footer, { style: { padding: "20px 30px 30px" } },
                     React.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
                         React.createElement(Grid, { item: true, md: 3, xs: 12 },
@@ -5894,27 +5817,30 @@ var useTableData = function (_a) {
             headerName: 'UserName',
             sortable: false,
             flex: 1,
-            minWidth: 140
+            minWidth: 130,
+            maxWidth: 130
         },
         {
             field: 'FirstName',
             headerName: 'First name',
             sortable: false,
             flex: 1,
-            minWidth: 140
+            minWidth: 130,
+            maxWidth: 130
         },
         {
             field: 'LastName',
             headerName: 'Last name',
             sortable: false,
             flex: 1,
-            minWidth: 140
+            minWidth: 130,
+            maxWidth: 130
         },
         {
             field: 'Profiles',
             headerName: 'Profiles',
             sortable: false,
-            flex: 1,
+            flex: 2,
             minWidth: 220
         },
         {
@@ -5968,8 +5894,9 @@ var useTableData = function (_a) {
             wrapHeaderText: false,
             headerName: ' ',
             sortable: false,
-            flex: 2,
-            minWidth: 300
+            flex: 1,
+            minWidth: 260,
+            maxWidth: 260
         },
     ])[0];
     var rows = state.users.map(function (_a) {
@@ -7744,10 +7671,10 @@ var useSearchUTLSettings = function (setError) {
 var AreaSelector$1 = lazy(function () { return Promise.resolve().then(function () { return areaSelector; }).then(function (mod) { return ({ "default": mod.AreaSelector }); }); });
 function Header(_a) {
-    var _b = _a.showAreaSelector, showAreaSelector = _b === void 0 ? false : _b;
+    var _b = _a.showAreaSelector, showAreaSelector = _b === void 0 ? false : _b, _c = _a.navbarTitle, navbarTitle = _c === void 0 ? "MESF" : _c;
     var getUserName = useToken().getUserName;
-    var _c = useState(''), error = _c[0], setError = _c[1];
-    var _d = useState(new Date()), date = _d[0], setDate = _d[1];
+    var _d = useState(''), error = _d[0], setError = _d[1];
+    var _e = useState(new Date()), date = _e[0], setDate = _e[1];
     var CustomNavbar = useContext(NavbarContext);
     var userName = useState(getUserName())[0];
     var searchAssets = useSearchAssets(setError).searchAssets;
@@ -7770,29 +7697,27 @@ function Header(_a) {
             searchUTLSettings();
         }
     }, [userLogged]);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Navbar, { variant: "dark", expand: "lg", className: "mes-primary-color mes-menu-top" },
-            React__default.createElement(Container, { fluid: true },
-                React__default.createElement(Navbar.Brand, { as: Link, to: "/home" }, "MESF"),
-                React__default.createElement(Navbar.Toggle, { "aria-controls": "basic-navbar-nav" }),
-                React__default.createElement(Navbar.Collapse, { id: "basic-navbar-nav" },
-                    React__default.createElement(Nav, { className: "me-auto" },
-                        React__default.createElement(Nav.Link, { as: Link, to: "/" }, "Home"),
-                        React__default.createElement(CustomNavbar, null)),
-                    React__default.createElement(Nav, { className: "ml-auto", style: { alignItems: 'baseline' } },
-                        React__default.createElement(Nav, null,
-                            React__default.createElement("span", { className: "navbar-text" }, date.toLocaleTimeString())),
-                        React__default.createElement(Nav, { className: "mx-2" },
-                            React__default.createElement(Nav.Link, { as: Link, to: "/configuration" },
-                                React__default.createElement("i", { className: "fas fa-cog" }))),
-                        showAreaSelector ? (React__default.createElement(Suspense, { fallback: '...' },
-                            React__default.createElement(AreaSelector$1, null))) : null,
-                        React__default.createElement(NavDropdown, { id: "user-menu", title: React__default.createElement(React__default.Fragment, null,
-                                React__default.createElement("i", { className: "fas fa-user", style: { marginRight: 6 } }),
-                                userName), className: "mx-2" },
-                            React__default.createElement(NavDropdown.Item, { href: "account" }, "Account"),
-                            React__default.createElement(NavDropdown.Item, { href: "logout" }, "Logout"))))),
-            React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } }))));
+    return (React__default.createElement(Navbar, { variant: "dark", expand: "lg", className: "mes-primary-color mes-menu-top" },
+        React__default.createElement(Container, { fluid: true },
+            React__default.createElement(Navbar.Brand, { as: Link, to: "/home" }, navbarTitle),
+            React__default.createElement(Navbar.Toggle, { "aria-controls": "basic-navbar-nav" }),
+            React__default.createElement(Navbar.Collapse, { id: "basic-navbar-nav" },
+                React__default.createElement(Nav, { className: "me-auto" },
+                    React__default.createElement(CustomNavbar, null)),
+                React__default.createElement(Nav, { className: "ml-auto", style: { alignItems: 'baseline' } },
+                    React__default.createElement(Nav, null,
+                        React__default.createElement("span", { className: "navbar-text" }, date.toLocaleTimeString())),
+                    React__default.createElement(Nav, { className: "mx-2" },
+                        React__default.createElement(Nav.Link, { as: Link, to: "/configuration" },
+                            React__default.createElement("i", { className: "fas fa-cog" }))),
+                    showAreaSelector ? (React__default.createElement(Suspense, { fallback: '...' },
+                        React__default.createElement(AreaSelector$1, null))) : null,
+                    React__default.createElement(NavDropdown, { id: "user-menu", title: React__default.createElement(React__default.Fragment, null,
+                            React__default.createElement("i", { className: "fas fa-user", style: { marginRight: 6 } }),
+                            userName), className: "mx-2" },
+                        React__default.createElement(NavDropdown.Item, { href: "account" }, "Account"),
+                        React__default.createElement(NavDropdown.Item, { href: "logout" }, "Logout"))))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 }
 function Configuration() {
@@ -7888,8 +7813,8 @@ var MESFMainContainer = function () { return (React__default.createElement("div"
     React__default.createElement(MESFMainRouter, null))); };
 var Navigation = function (_a) {
-    var _b = _a.showAreaSelector, showAreaSelector = _b === void 0 ? false : _b;
-    var _c = useSearchParams(), params = _c[0]; _c[1];
+    var _b = _a.showAreaSelector, showAreaSelector = _b === void 0 ? false : _b, _c = _a.navbarTitle, navbarTitle = _c === void 0 ? "MESF" : _c;
+    var _d = useSearchParams(), params = _d[0]; _d[1];
     var mounted = useRef(true);
     useEffect(function () {
         if (params.has('redirectTo')) {
@@ -7904,7 +7829,7 @@ var Navigation = function (_a) {
         };
     }, [params.toString()]);
     return (React__default.createElement("div", { className: "wrapper" },
-        React__default.createElement(Header, { showAreaSelector: showAreaSelector }),
+        React__default.createElement(Header, { showAreaSelector: showAreaSelector, navbarTitle: navbarTitle }),
         React__default.createElement(MESFMainContainer, null)));
 };
@@ -7913,7 +7838,7 @@ n(css,{});
 var base = document.getElementsByTagName('base')[0].getAttribute('href') || '/';
 function MESFMain(_a) {
-    var authentication = _a.authentication, routes = _a.routes, navbar = _a.navbar, configurations = _a.configurations, _b = _a.showAreaSelector, showAreaSelector = _b === void 0 ? false : _b;
+    var authentication = _a.authentication, routes = _a.routes, navbar = _a.navbar, _b = _a.navbarTitle, navbarTitle = _b === void 0 ? "MESF" : _b, configurations = _a.configurations, _c = _a.showAreaSelector, showAreaSelector = _c === void 0 ? false : _c;
     return (React__default.createElement(AuthProvider, { authConfig: authentication },
         React__default.createElement(UserProvider, null,
             React__default.createElement(AssetProvider, null,
@@ -7924,7 +7849,7 @@ function MESFMain(_a) {
                                 React__default.createElement(BrowserRouter, { basename: base },
                                     React__default.createElement(Routes, null,
                                         React__default.createElement(Route, { path: "/logout", element: React__default.createElement(Logout, null) })),
-                                    React__default.createElement(Navigation, { showAreaSelector: showAreaSelector }))))))))));
+                                    React__default.createElement(Navigation, { showAreaSelector: showAreaSelector, navbarTitle: navbarTitle }))))))))));
 }
 var useDefaultAreaId = function (setError) {