@dexteel/mesf-core 5.12.0 → 5.13.1

package/dist/index.esm.js

@@ -1,8 +1,10 @@
+import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
+export * from '@microsoft/signalr';
 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, Popover, MenuList, Badge, useTheme, Input, Divider, CssBaseline, AppBar, Toolbar, Container, Menu, Hidden, Drawer, useMediaQuery, 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, createTheme, Hidden, Drawer, useMediaQuery, ListSubheader, debounce, 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 React__default, { createContext, useContext, useState, useRef, useEffect, useMemo, Component, 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';
@@ -10,14 +12,8 @@ import { ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRi
 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 { 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';
-import Settings$1 from '@material-ui/icons/Settings';
-import ShowChartIcon from '@material-ui/icons/ShowChart';
 import AccountCircleIcon from '@material-ui/icons/AccountCircle';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { themeMaterial } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import MomentUtils from '@date-io/moment';
@@ -26,16 +22,21 @@ import moment$3 from 'moment';
 import { isNil as isNil$1, get as get$1 } from 'lodash';
 import EditIcon from '@material-ui/icons/Edit';
 import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd';
-import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
-export * from '@microsoft/signalr';
-import { Alert as Alert$2, Autocomplete } from '@material-ui/lab';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useForm, Controller } from 'react-hook-form';
-import SearchIcon from '@material-ui/icons/Search';
+import DeleteIcon from '@material-ui/icons/Delete';
+import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
 import { useComplexState } from 'use-complex-state';
 import { createSlice } from '@reduxjs/toolkit';
-import DeleteIcon from '@material-ui/icons/Delete';
+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';
+import Settings$1 from '@material-ui/icons/Settings';
+import ShowChartIcon from '@material-ui/icons/ShowChart';
+import { Alert as Alert$2, Autocomplete } from '@material-ui/lab';
+import SearchIcon from '@material-ui/icons/Search';
 import FormatListBulletedSharpIcon from '@material-ui/icons/FormatListBulletedSharp';
-import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
 import axios from 'axios';
 import { _adapters, Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip as Tooltip$1, Legend, TimeScale } from 'chart.js';
 import zoomPlugin from 'chartjs-plugin-zoom';
@@ -251,6 +252,30 @@ var ErrorModal = function (_a) {
                         } }, "Ok")))))) : null;
 };
 
+// Create a new context file: src/context/HelmetContext.tsx
+var HelmetDexteelContext = createContext(undefined);
+var HelmetDexteelProvider = function (_a) {
+    var navbarTitle = _a.navbarTitle, children = _a.children;
+    return (React__default.createElement(HelmetDexteelContext.Provider, { value: { navbarTitle: navbarTitle } }, children));
+};
+var useHelmetDexteel = function () {
+    var context = useContext(HelmetDexteelContext);
+    if (context === undefined) {
+        throw new Error("useHelmet must be used within a HelmetProvider");
+    }
+    return context;
+};
+
+var HelmetDexteel = function (_a) {
+    var title = _a.title, props = __rest(_a, ["title"]);
+    var navbarTitle = useHelmetDexteel().navbarTitle;
+    return (React__default.createElement(Helmet, __assign({ defer: false }, props),
+        React__default.createElement("title", null,
+            title,
+            " - ",
+            navbarTitle)));
+};
+
 var BarChartControl = function (props) {
     var height = props.height, minWidth = props.minWidth, data = props.data, keys = props.keys, indexBy = props.indexBy, legendX = props.legendX, legendY = props.legendY, colors = props.colors, other = __rest(props, ["height", "minWidth", "data", "keys", "indexBy", "legendX", "legendY", "colors"]);
     return (React__default.createElement(React__default.Fragment, null,
@@ -2488,7 +2513,7 @@ var OnEnableJob = function (_a) {
 };
 
 var JobDetails = function (_a) {
-    var job = _a.job, modal = _a.modal, onHide = _a.onHide;
+    var job = _a.job, modal = _a.modal, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
     var _b = useState(false), isSubmitLoading = _b[0], setIsSubmitLoading = _b[1];
     var _c = useState(""), error = _c[0], setError = _c[1];
     var _d = useState(false), openSnackbar = _d[0], setOpenSnackbar = _d[1];
@@ -2536,6 +2561,7 @@ var JobDetails = function (_a) {
         }
     }, [modal, job]);
     return (React__default.createElement(React__default.Fragment, null,
+        (modal == "update" || modal == "create") && (React__default.createElement(HelmetDexteel, { title: "".concat(modal == "update" ? job === null || job === void 0 ? void 0 : job.sProcedure : "New Job").concat(suffixTitle ? " - ".concat(suffixTitle) : "") })),
         (job === null || modal !== "update") && modal !== "create" ? (React__default.createElement("div", { style: {
                 display: "flex",
                 justifyContent: "center",
@@ -3028,7 +3054,7 @@ var TableJobs = function (_a) {
                             } }))),
                 React.createElement(Grid, { item: true, md: 6, xs: 12 },
                     React.createElement(Paper, { elevation: 2, style: { height: "70vh", width: "100%", padding: 15 }, className: "".concat(classes.table, " ag-theme-material") },
-                        React.createElement(JobDetails, { job: jobSelected, modal: showModal, onHide: onDetailsHide }))))),
+                        React.createElement(JobDetails, { job: jobSelected, modal: showModal, onHide: onDetailsHide, suffixTitle: "System Jobs" }))))),
         React.createElement(ResetJob, { show: showModal === "reset", onHide: function (shouldUpdate) { return __awaiter(void 0, void 0, void 0, function () {
                 return __generator(this, function (_a) {
                     switch (_a.label) {
@@ -3097,10 +3123,12 @@ var Jobs = function (prop) {
     useEffect(function () {
         getJobsFromAPI();
     }, []);
-    return (React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
-        React.createElement(Grid, { item: true, md: 12, xs: 12, style: { margin: 0 } },
-            React.createElement(TableJobs, { isLoading: isLoading, getJobsFromAPI: getJobsFromAPI })),
-        React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HelmetDexteel, { title: "System Jobs" }),
+        React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
+            React.createElement(Grid, { item: true, md: 12, xs: 12, style: { margin: 0 } },
+                React.createElement(TableJobs, { isLoading: isLoading, getJobsFromAPI: getJobsFromAPI })),
+            React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }))));
 };
 
 var JobsPage = function (props) {
@@ -3314,37 +3342,40 @@ var formatTime = function (nowTime) {
     return date.toLocaleDateString() + " " + date.toLocaleTimeString();
 };
 var ModalLogSelected = function (_a) {
-    var show = _a.show, onHide = _a.onHide, selectedLog = _a.selectedLog;
+    var _b;
+    var show = _a.show, onHide = _a.onHide, selectedLog = _a.selectedLog, suffixTitle = _a.suffixTitle;
     var classes = useStyles$z();
-    return (React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
-        React__default.createElement(MesfModal, { title: "LOG DETAILS", open: show, handleClose: function () { return onHide(false); }, maxWidth: "md", id: "log-details-modal" },
-            React__default.createElement(MesfModal.Content, { style: { padding: "15px 30px" } },
-                React__default.createElement(Grid, { container: true, spacing: 1, alignItems: "flex-start" },
-                    React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
-                        React__default.createElement(TextField, { variant: "standard", fullWidth: true, margin: "dense", label: "User", defaultValue: selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.User, InputProps: {
-                                readOnly: true,
-                            } })),
-                    React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
-                        React__default.createElement(TextField, { variant: "standard", fullWidth: true, margin: "dense", label: "Time", defaultValue: formatTime(selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.Timestamp), InputProps: {
-                                readOnly: true,
-                            } })),
-                    React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
-                        React__default.createElement(TextField, { variant: "standard", fullWidth: true, margin: "dense", label: "Source", defaultValue: selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.Source, InputProps: {
-                                readOnly: true,
-                            } })),
-                    React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
-                        React__default.createElement(TextField, { variant: "standard", fullWidth: true, margin: "dense", label: "Type", defaultValue: selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.LogTypeCode, InputProps: {
-                                readOnly: true,
-                            } })),
-                    React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { paddingRight: 20, paddingLeft: 5, marginBottom: 20 } },
-                        React__default.createElement(Card, { variant: "outlined", style: { backgroundColor: "#E9F2F8" } },
-                            React__default.createElement(CardContent, null,
-                                React__default.createElement(Typography$1, { className: classes.messageTitle }, "Message:"),
-                                React__default.createElement(Typography$1, { style: { fontSize: 17 } }, selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.Message)))))),
-            React__default.createElement(MesfModal.Actions, { style: { padding: "20px 30px 30px" } },
-                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(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(true); } }, "Close")))))));
+    return (React__default.createElement(React__default.Fragment, null,
+        show && (React__default.createElement(HelmetDexteel, { title: "".concat((_b = selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.Source) !== null && _b !== void 0 ? _b : "", " - Log Details").concat(suffixTitle ? " - ".concat(suffixTitle) : "") })),
+        React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
+            React__default.createElement(MesfModal, { title: "LOG DETAILS", open: show, handleClose: function () { return onHide(false); }, maxWidth: "md", id: "log-details-modal" },
+                React__default.createElement(MesfModal.Content, { style: { padding: "15px 30px" } },
+                    React__default.createElement(Grid, { container: true, spacing: 1, alignItems: "flex-start" },
+                        React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
+                            React__default.createElement(TextField, { variant: "standard", fullWidth: true, margin: "dense", label: "User", defaultValue: selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.User, InputProps: {
+                                    readOnly: true,
+                                } })),
+                        React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
+                            React__default.createElement(TextField, { variant: "standard", fullWidth: true, margin: "dense", label: "Time", defaultValue: formatTime(selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.Timestamp), InputProps: {
+                                    readOnly: true,
+                                } })),
+                        React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
+                            React__default.createElement(TextField, { variant: "standard", fullWidth: true, margin: "dense", label: "Source", defaultValue: selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.Source, InputProps: {
+                                    readOnly: true,
+                                } })),
+                        React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
+                            React__default.createElement(TextField, { variant: "standard", fullWidth: true, margin: "dense", label: "Type", defaultValue: selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.LogTypeCode, InputProps: {
+                                    readOnly: true,
+                                } })),
+                        React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { paddingRight: 20, paddingLeft: 5, marginBottom: 20 } },
+                            React__default.createElement(Card, { variant: "outlined", style: { backgroundColor: "#E9F2F8" } },
+                                React__default.createElement(CardContent, null,
+                                    React__default.createElement(Typography$1, { className: classes.messageTitle }, "Message:"),
+                                    React__default.createElement(Typography$1, { style: { fontSize: 17 } }, selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.Message)))))),
+                React__default.createElement(MesfModal.Actions, { style: { padding: "20px 30px 30px" } },
+                    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(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(true); } }, "Close"))))))));
 };
 
 var moment$1 = getMomentTz();
@@ -3624,7 +3655,7 @@ var TableLogs = function (_a) {
     }, [Start, End, LogTypeCode]);
     return (React.createElement(Grid, { spacing: 0, container: true, justifyContent: "center", alignItems: "center", className: classes.root },
         React.createElement(Grid, { item: true, md: 12, xs: 12, className: classes.filters },
-            React.createElement(ModalLogSelected, { show: showLogModal, onHide: function () { return setShowLogModal(false); }, selectedLog: selectedLog }),
+            React.createElement(ModalLogSelected, { show: showLogModal, onHide: function () { return setShowLogModal(false); }, selectedLog: selectedLog, suffixTitle: "MES and System Logs" }),
             React.createElement(Typography$1, { variant: "h5", style: { fontWeight: 600 } }, "MES and System Logs"),
             React.createElement(Grid, { container: true, direction: "row", spacing: 1 },
                 React.createElement(Grid, { item: true, md: 12, xs: 12 },
@@ -3717,6 +3748,7 @@ var Logs = function (prop) {
         getLogsFromAPI();
     }, []);
     return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HelmetDexteel, { title: "MES and System Logs" }),
         React__default.createElement(TableLogs, { isLoading: loading, rowData: state.logs, refreshData: getLogsFromAPI }),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
@@ -3849,7 +3881,7 @@ var useStyles$x = makeStyles(function (theme) { return ({
 }); });
 var CreateProfile = function (_a) {
     var _b;
-    var show = _a.show, onHide = _a.onHide;
+    var show = _a.show, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
     var _c = useState(false), openSnackbar = _c[0], setOpenSnackbar = _c[1];
     var _d = useState(""), message = _d[0], setMessage = _d[1];
     var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
@@ -3889,6 +3921,7 @@ var CreateProfile = function (_a) {
         }
     }, [show]);
     return (React.createElement(React.Fragment, null,
+        show && (React.createElement(HelmetDexteel, { title: "New Profile".concat(suffixTitle ? " - ".concat(suffixTitle) : "") })),
         React.createElement(Grid, { container: true },
             React.createElement(Grid, { item: true },
                 React.createElement(MesfModal, { title: "NEW PROFILE", open: show, handleClose: function () { return onHide(false); }, id: "create-profile-modal", maxWidth: "md" },
@@ -3911,7 +3944,7 @@ var CreateProfile = function (_a) {
 };
 
 var DeleteProfile = function (_a) {
-    var profile = _a.profile, show = _a.show, onHide = _a.onHide;
+    var profile = _a.profile, show = _a.show, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
     var _b = useState(false), open = _b[0], setOpen = _b[1];
     var _c = useState(""), error = _c[0], setError = _c[1];
     var _d = useState(true), isLoading = _d[0], setIsLoading = _d[1];
@@ -3953,6 +3986,7 @@ var DeleteProfile = function (_a) {
         });
     }); };
     return (React__default.createElement(React__default.Fragment, null,
+        show && (React__default.createElement(HelmetDexteel, { title: "Delete Profile".concat(suffixTitle ? " - ".concat(suffixTitle) : "") })),
         React__default.createElement(MesfModal, { title: "DELETE PROFILE", open: show, handleClose: function () { return onHide(false); }, id: "delete-profile-modal", maxWidth: "md" },
             React__default.createElement("form", null,
                 React__default.createElement(MesfModal.Content, { style: { padding: "15px 30px" } },
@@ -4098,7 +4132,7 @@ var useStyles$w = makeStyles(function (theme) { return ({
     },
 }); });
 var ActionsOfProfile = function (_a) {
-    var profileForEdit = _a.profileForEdit, show = _a.show, onHide = _a.onHide;
+    var profileForEdit = _a.profileForEdit, show = _a.show, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
     var classes = useStyles$w();
     var _b = useState(null), actionsOfProfile = _b[0], setActionsOfProfile = _b[1];
     var _c = useState(false), open = _c[0], setOpen = _c[1];
@@ -4179,6 +4213,7 @@ var ActionsOfProfile = function (_a) {
         }
     }, [show]);
     return (React.createElement(React.Fragment, null,
+        show && (React.createElement(HelmetDexteel, { title: "Edit Profile".concat(suffixTitle ? " - ".concat(suffixTitle) : "") })),
         React.createElement(MesfModal, { title: "EDIT PROFILE", open: show, handleClose: function () { return onHide(false); }, id: "edit-profile-modal", maxWidth: "xl" },
             React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
                 React.createElement(MesfModal.Content, { style: { padding: "0 30px 15px" } },
@@ -4519,19 +4554,19 @@ var TableProfiles = function (_a) {
                 setModalCreateActive(false);
                 if (shouldUpdate)
                     getProfilesFromAPI().then(function () { });
-            } }),
+            }, suffixTitle: "Profile Management" }),
         React.createElement(DeleteProfile, { show: modalDeleteProfile, profile: profile, onHide: function (shouldUpdate) {
                 setModalDeleteProfile(false);
                 setProfile(null);
                 if (shouldUpdate)
                     getProfilesFromAPI().then(function () { });
-            } }),
+            }, suffixTitle: "Profile Management" }),
         React.createElement(ActionsOfProfile, { show: modalProceduresProfile, profileForEdit: profile, onHide: function (shouldUpdate) {
                 setModalProceduresProfile(false);
                 setProfile(null);
                 if (shouldUpdate)
                     getProfilesFromAPI().then(function () { });
-            } })));
+            }, suffixTitle: "Profile Management" })));
 };
 
 var Profiles = function (prop) {
@@ -4564,6 +4599,7 @@ var Profiles = function (prop) {
     }, []);
     if (state.profiles) {
         return (React.createElement(React.Fragment, null,
+            React.createElement(HelmetDexteel, { title: "Profile Management" }),
             React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
                 React.createElement(Grid, { item: true, md: 12, xs: 12, style: { margin: 0 } },
                     React.createElement(TableProfiles, { isLoading: isLoading, getProfilesFromAPI: getProfilesFromAPI }))),
@@ -4702,7 +4738,7 @@ var useStyles$t = makeStyles(function (theme) { return ({
 }); });
 var CreateShift = function (_a) {
     var _b, _c;
-    var show = _a.show, onHide = _a.onHide;
+    var show = _a.show, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
     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];
@@ -4759,6 +4795,7 @@ var CreateShift = function (_a) {
         }
     }, [show]);
     return (React.createElement(React.Fragment, null,
+        show && (React.createElement(HelmetDexteel, { title: "New Shift/Crew".concat(suffixTitle ? " - ".concat(suffixTitle) : "") })),
         React.createElement(Grid, { container: true },
             React.createElement(Grid, { item: true },
                 React.createElement(MesfModal, { title: "NEW SHIFT/CREW", open: show, handleClose: function () { return onHide(false); }, id: "create-shift-modal", maxWidth: "md" },
@@ -4930,7 +4967,7 @@ var useStyles$s = makeStyles(function (theme) { return ({
 }); });
 var DeleteShift = function (_a) {
     var _b;
-    var show = _a.show, onHide = _a.onHide;
+    var show = _a.show, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
     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];
@@ -4987,6 +5024,7 @@ var DeleteShift = function (_a) {
         }
     }, [show]);
     return (React.createElement(React.Fragment, null,
+        show && (React.createElement(HelmetDexteel, { title: "Delete Shift".concat(suffixTitle ? " - ".concat(suffixTitle) : "") })),
         React.createElement(Grid, { container: true },
             React.createElement(Grid, { item: true },
                 React.createElement(MesfModal, { title: "DELETE SHIFT", open: show, handleClose: function () { return onHide(false); }, id: "delete-shift-MesfModal", maxWidth: "md" },
@@ -5095,7 +5133,7 @@ var useStyles$r = makeStyles(function (theme) { return ({
 }); });
 var EditShift = function (_a) {
     var _b;
-    var show = _a.show, onHide = _a.onHide;
+    var show = _a.show, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
     var _c = useState(false), open = _c[0], setOpen = _c[1];
     var _d = useState(""), error = _d[0], setError = _d[1];
     var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
@@ -5161,6 +5199,7 @@ var EditShift = function (_a) {
         setValue("NumberOfCrews", crewsCodes.length);
     }, [initialShiftPerDayAndCrewsNumber]);
     return (React.createElement(React.Fragment, null,
+        show && (React.createElement(HelmetDexteel, { title: "Edit Shift".concat(suffixTitle ? " - ".concat(suffixTitle) : "") })),
         React.createElement(Grid, { container: true },
             React.createElement(Grid, { item: true },
                 React.createElement(MesfModal, { title: "EDIT SHIFT", open: show, handleClose: function () { return onHide(false); }, id: "edit-shift-modal", maxWidth: "md" },
@@ -5610,17 +5649,17 @@ var TableShiftsCrews = function (_a) {
                         setOpenModalNew(false);
                         if (shouldUpdate)
                             getShiftsCrewsFromAPI();
-                    } }),
+                    }, suffixTitle: "Shifts / Crew" }),
                 React.createElement(EditShift, { show: openModalEditShift, onHide: function (shouldUpdate) {
                         setOpenModalEditShift(false);
                         if (shouldUpdate)
                             getShiftsCrewsFromAPI();
-                    } }),
+                    }, suffixTitle: "Shifts / Crew" }),
                 React.createElement(DeleteShift, { show: openModalDeleteShift, onHide: function (shouldUpdate) {
                         setOpenModalDeleteShift(false);
                         if (shouldUpdate)
                             getShiftsCrewsFromAPI();
-                    } }),
+                    }, suffixTitle: "Shifts / Crew" }),
                 React.createElement(Grid, { component: Paper, item: true, md: 12, xs: 12, style: {
                         height: "70vh",
                     } },
@@ -5668,6 +5707,7 @@ var ShiftsCrews = function (prop) {
             React.createElement(TableShiftsCrews, { isLoading: isLoading, getShiftsCrewsFromAPI: getShiftsCrewsFromAPI })));
     }
     return (React.createElement(React.Fragment, null,
+        React.createElement(HelmetDexteel, { title: "Shifts and Crews" }),
         React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", style: { height: "70vh", width: "100%" } },
             React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
             React.createElement(LazyLoading, null))));
@@ -6091,7 +6131,7 @@ var useStyles$o = makeStyles(function (theme) { return ({
     },
 }); });
 var CreateNewAssetDialog = function (_a) {
-    var show = _a.show, onHide = _a.onHide;
+    var show = _a.show, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
     var classes = useStyles$o();
     var _b = useState(true), fullWidth = _b[0]; _b[1];
     var _c = useState("sm"), maxWidth = _c[0]; _c[1];
@@ -6170,54 +6210,56 @@ var CreateNewAssetDialog = function (_a) {
             }
         }
     }, [show]);
-    return (React__default.createElement("div", { className: classes.root },
-        React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
-            React__default.createElement("form", { onSubmit: handleFormSubmit },
-                React__default.createElement(Grid, { container: true, style: { padding: "15px 0 20px", height: "50%" } },
-                    React__default.createElement(Grid, { container: true, item: true },
-                        React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
-                            React__default.createElement(Typography$1, { style: { padding: "0 24px 12px", fontSize: 25 } }, "NEW ASSET"))),
-                    React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
-                        React__default.createElement(DialogContent$1, { dividers: true, style: { padding: "10px 24px 0" } },
+    return (React__default.createElement(React__default.Fragment, null,
+        show && (React__default.createElement(HelmetDexteel, { title: "New Asset".concat(suffixTitle ? " - ".concat(suffixTitle) : "") })),
+        React__default.createElement("div", { className: classes.root },
+            React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
+                React__default.createElement("form", { onSubmit: handleFormSubmit },
+                    React__default.createElement(Grid, { container: true, style: { padding: "15px 0 20px", height: "50%" } },
+                        React__default.createElement(Grid, { container: true, item: true },
                             React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
-                                React__default.createElement(Controller, { name: "AssetName", control: control, rules: {
-                                        validate: {
-                                            notEmpty: function (value) { return value.trim() !== ""; },
-                                        },
-                                    }, render: function (_a) {
-                                        var _b;
-                                        var _c = _a.field, onChange = _c.onChange, value = _c.value;
-                                        return (React__default.createElement(React__default.Fragment, null,
-                                            React__default.createElement(TextField, { label: "Asset Name", variant: "outlined", error: !!errors.AssetName, fullWidth: true, margin: "dense", autoComplete: "off", onChange: onChange, value: value }),
-                                            ((_b = errors.AssetName) === null || _b === void 0 ? void 0 : _b.type) === "notEmpty" && (React__default.createElement("span", { className: classes.errorLabel }, "Asset Name is required"))));
-                                    } })),
-                            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) {
-                                                var value = _a.field.value;
-                                                return (React__default.createElement(TreePickerControlV2, { inputTitle: "Asset", title: "Asset Parent", dataSource: assetCodes, value: value, 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) {
-                                                var field = _a.field;
-                                                return (React__default.createElement(FormControlLabel, { className: classes.checkbox, control: React__default.createElement(Checkbox, { checked: field.value, onChange: function (e) {
-                                                            return field.onChange(e.target.checked);
-                                                        }, name: "CanBeDefaultAsset", color: "primary" }), label: "Can be Default Asset" }));
-                                            } }))))),
-                        React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { marginTop: "15px" } },
-                            React__default.createElement(DialogActions$1, { style: { padding: "0px 24px" } },
-                                React__default.createElement(Grid, { container: true, justifyContent: "flex-end", style: { margin: 0 } },
-                                    React__default.createElement(Grid, { container: true, item: true, style: {
-                                            marginLeft: "auto",
-                                            marginTop: 5,
-                                            marginBottom: 0,
-                                        } },
-                                        React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingLeft: "0", paddingRight: "16px" } },
-                                            React__default.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return handleCancel(); } }, "Cancel")),
-                                        React__default.createElement(Grid, { item: true, md: 6, xs: 12 },
-                                            React__default.createElement(Button, { fullWidth: true, startIcon: isCreateSubmitLoading && (React__default.createElement(CircularProgress, { size: "1rem" })), disabled: isCreateSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))))))),
+                                React__default.createElement(Typography$1, { style: { padding: "0 24px 12px", fontSize: 25 } }, "NEW ASSET"))),
+                        React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
+                            React__default.createElement(DialogContent$1, { dividers: true, style: { padding: "10px 24px 0" } },
+                                React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
+                                    React__default.createElement(Controller, { name: "AssetName", control: control, rules: {
+                                            validate: {
+                                                notEmpty: function (value) { return value.trim() !== ""; },
+                                            },
+                                        }, render: function (_a) {
+                                            var _b;
+                                            var _c = _a.field, onChange = _c.onChange, value = _c.value;
+                                            return (React__default.createElement(React__default.Fragment, null,
+                                                React__default.createElement(TextField, { label: "Asset Name", variant: "outlined", error: !!errors.AssetName, fullWidth: true, margin: "dense", autoComplete: "off", onChange: onChange, value: value }),
+                                                ((_b = errors.AssetName) === null || _b === void 0 ? void 0 : _b.type) === "notEmpty" && (React__default.createElement("span", { className: classes.errorLabel }, "Asset Name is required"))));
+                                        } })),
+                                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) {
+                                                    var value = _a.field.value;
+                                                    return (React__default.createElement(TreePickerControlV2, { inputTitle: "Asset", title: "Asset Parent", dataSource: assetCodes, value: value, 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) {
+                                                    var field = _a.field;
+                                                    return (React__default.createElement(FormControlLabel, { className: classes.checkbox, control: React__default.createElement(Checkbox, { checked: field.value, onChange: function (e) {
+                                                                return field.onChange(e.target.checked);
+                                                            }, name: "CanBeDefaultAsset", color: "primary" }), label: "Can be Default Asset" }));
+                                                } }))))),
+                            React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { marginTop: "15px" } },
+                                React__default.createElement(DialogActions$1, { style: { padding: "0px 24px" } },
+                                    React__default.createElement(Grid, { container: true, justifyContent: "flex-end", style: { margin: 0 } },
+                                        React__default.createElement(Grid, { container: true, item: true, style: {
+                                                marginLeft: "auto",
+                                                marginTop: 5,
+                                                marginBottom: 0,
+                                            } },
+                                            React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingLeft: "0", paddingRight: "16px" } },
+                                                React__default.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return handleCancel(); } }, "Cancel")),
+                                            React__default.createElement(Grid, { item: true, md: 6, xs: 12 },
+                                                React__default.createElement(Button, { fullWidth: true, startIcon: isCreateSubmitLoading && (React__default.createElement(CircularProgress, { size: "1rem" })), disabled: isCreateSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save"))))))))))),
         React__default.createElement(ErrorModal, { error: errorCreateAsset, onHide: function () { return setErrorCreateAsset(""); } }),
         React__default.createElement(Snackbar, { open: assetCreatedSuccess, autoHideDuration: 2500, onClose: handleClose },
             React__default.createElement(Alert$3, { severity: "info", onClose: handleClose }, "Document created successfully"))));
@@ -6270,7 +6312,7 @@ var useStyles$n = makeStyles(function (theme) { return ({
     },
 }); });
 var EditAssetDialog = function (_a) {
-    var show = _a.show, onHide = _a.onHide;
+    var show = _a.show, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
     var classes = useStyles$n();
     var _b = useState(true), fullWidth = _b[0]; _b[1];
     var _c = useState("sm"), maxWidth = _c[0]; _c[1];
@@ -6336,59 +6378,61 @@ var EditAssetDialog = function (_a) {
             setValue("CanBeDefaultAsset", assetNodeFromApi === null || assetNodeFromApi === void 0 ? void 0 : assetNodeFromApi.CanBeDefaultAsset);
         }
     }, [show]);
-    return (React__default.createElement("div", { className: classes.root },
-        React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
-            React__default.createElement("form", { onSubmit: handleFormSubmit },
-                React__default.createElement(Grid, { container: true, style: { padding: "15px 0 20px", height: "50%" } },
-                    React__default.createElement(Grid, { container: true, item: true },
-                        React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
-                            React__default.createElement(Typography$1, { style: { padding: "0 24px 12px", fontSize: 25 } }, assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.AssetName))),
-                    React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
-                        React__default.createElement(DialogContent$1, { dividers: true, style: { padding: "10px 24px 0" } },
+    return (React__default.createElement(React__default.Fragment, null,
+        show && (React__default.createElement(HelmetDexteel, { title: "Edit Asset".concat(suffixTitle ? " - ".concat(suffixTitle) : "") })),
+        React__default.createElement("div", { className: classes.root },
+            React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
+                React__default.createElement("form", { onSubmit: handleFormSubmit },
+                    React__default.createElement(Grid, { container: true, style: { padding: "15px 0 20px", height: "50%" } },
+                        React__default.createElement(Grid, { container: true, item: true },
                             React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
-                                React__default.createElement(Controller, { name: "AssetName", control: control, render: function (_a) {
-                                        var _b = _a.field, onChange = _b.onChange, value = _b.value;
-                                        return (React__default.createElement(React__default.Fragment, null,
-                                            React__default.createElement(TextField, { label: "Asset Name", variant: "outlined", error: !!errors.AssetName, fullWidth: true, margin: "dense", autoComplete: "off", onChange: onChange, value: value })));
-                                    } })),
-                            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("div", { title: "Parent Asset: ".concat(parentAsset) },
-                                                React__default.createElement(TreePickerControl, { inputTitle: parentAsset
-                                                        ? "Parent Asset: ".concat(parentAsset)
-                                                        : "Parent 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(Grid, { container: true, style: { marginTop: "10px", padding: "0px" } },
-                                        React__default.createElement(Grid, { item: true, xs: 6, md: 6 },
-                                            React__default.createElement(Controller, { name: "IsBranch", control: control, defaultValue: false, render: function (_a) {
-                                                    var field = _a.field;
-                                                    return (React__default.createElement(FormControlLabel, { className: classes.checkbox, control: React__default.createElement(Checkbox, { checked: field.value, onChange: function (e) {
-                                                                return field.onChange(e.target.checked);
-                                                            }, name: "IsAsset", color: "primary", disabled: true }), label: "Has Children" }));
-                                                } })),
-                                        React__default.createElement(Grid, { item: true, xs: 6, md: 6 },
-                                            React__default.createElement(Controller, { name: "CanBeDefaultAsset", control: control, defaultValue: false, render: function (_a) {
-                                                    var field = _a.field;
-                                                    return (React__default.createElement(FormControlLabel, { className: classes.checkbox, control: React__default.createElement(Checkbox, { checked: field.value, onChange: function (e) {
-                                                                return field.onChange(e.target.checked);
-                                                            }, name: "CanBeDefaultAsset", color: "primary" }), label: "Can be Default Asset" }));
-                                                } })))))),
-                        React__default.createElement(Grid, { item: true, md: 12, xs: 12, justifyContent: "flex-end", style: { marginTop: "15px" } },
-                            React__default.createElement(DialogActions$1, { style: { padding: "0px 24px" } },
-                                React__default.createElement(Grid, { container: true, justifyContent: "flex-end", style: { margin: 0 } },
-                                    React__default.createElement(Grid, { container: true, item: true, style: {
-                                            marginLeft: "auto",
-                                            marginTop: 5,
-                                            marginBottom: 0,
-                                        } },
-                                        React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingLeft: "0", paddingRight: "16px" } },
-                                            React__default.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return handleCancel(); } }, "Cancel")),
-                                        React__default.createElement(Grid, { item: true, md: 6, xs: 12 },
-                                            React__default.createElement(Button, { fullWidth: true, startIcon: isEditSubmitLoading && (React__default.createElement(CircularProgress, { size: "1rem" })), disabled: isEditSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save"))))),
-                            React__default.createElement(ErrorModal, { error: errorEditAsset, onHide: function () { return setErrorEditAsset(""); } }),
-                            React__default.createElement(Snackbar, { open: assetEditedSuccess, autoHideDuration: 2500, onClose: handleClose },
-                                React__default.createElement(Alert$2, { severity: "info", onClose: handleClose }, "Document created succesfully")))))))));
+                                React__default.createElement(Typography$1, { style: { padding: "0 24px 12px", fontSize: 25 } }, assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.AssetName))),
+                        React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
+                            React__default.createElement(DialogContent$1, { dividers: true, style: { padding: "10px 24px 0" } },
+                                React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
+                                    React__default.createElement(Controller, { name: "AssetName", control: control, render: function (_a) {
+                                            var _b = _a.field, onChange = _b.onChange, value = _b.value;
+                                            return (React__default.createElement(React__default.Fragment, null,
+                                                React__default.createElement(TextField, { label: "Asset Name", variant: "outlined", error: !!errors.AssetName, fullWidth: true, margin: "dense", autoComplete: "off", onChange: onChange, value: value })));
+                                        } })),
+                                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("div", { title: "Parent Asset: ".concat(parentAsset) },
+                                                    React__default.createElement(TreePickerControl, { inputTitle: parentAsset
+                                                            ? "Parent Asset: ".concat(parentAsset)
+                                                            : "Parent 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(Grid, { container: true, style: { marginTop: "10px", padding: "0px" } },
+                                            React__default.createElement(Grid, { item: true, xs: 6, md: 6 },
+                                                React__default.createElement(Controller, { name: "IsBranch", control: control, defaultValue: false, render: function (_a) {
+                                                        var field = _a.field;
+                                                        return (React__default.createElement(FormControlLabel, { className: classes.checkbox, control: React__default.createElement(Checkbox, { checked: field.value, onChange: function (e) {
+                                                                    return field.onChange(e.target.checked);
+                                                                }, name: "IsAsset", color: "primary", disabled: true }), label: "Has Children" }));
+                                                    } })),
+                                            React__default.createElement(Grid, { item: true, xs: 6, md: 6 },
+                                                React__default.createElement(Controller, { name: "CanBeDefaultAsset", control: control, defaultValue: false, render: function (_a) {
+                                                        var field = _a.field;
+                                                        return (React__default.createElement(FormControlLabel, { className: classes.checkbox, control: React__default.createElement(Checkbox, { checked: field.value, onChange: function (e) {
+                                                                    return field.onChange(e.target.checked);
+                                                                }, name: "CanBeDefaultAsset", color: "primary" }), label: "Can be Default Asset" }));
+                                                    } })))))),
+                            React__default.createElement(Grid, { item: true, md: 12, xs: 12, justifyContent: "flex-end", style: { marginTop: "15px" } },
+                                React__default.createElement(DialogActions$1, { style: { padding: "0px 24px" } },
+                                    React__default.createElement(Grid, { container: true, justifyContent: "flex-end", style: { margin: 0 } },
+                                        React__default.createElement(Grid, { container: true, item: true, style: {
+                                                marginLeft: "auto",
+                                                marginTop: 5,
+                                                marginBottom: 0,
+                                            } },
+                                            React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingLeft: "0", paddingRight: "16px" } },
+                                                React__default.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return handleCancel(); } }, "Cancel")),
+                                            React__default.createElement(Grid, { item: true, md: 6, xs: 12 },
+                                                React__default.createElement(Button, { fullWidth: true, startIcon: isEditSubmitLoading && (React__default.createElement(CircularProgress, { size: "1rem" })), disabled: isEditSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save"))))))))))),
+        React__default.createElement(ErrorModal, { error: errorEditAsset, onHide: function () { return setErrorEditAsset(""); } }),
+        React__default.createElement(Snackbar, { open: assetEditedSuccess, autoHideDuration: 2500, onClose: handleClose },
+            React__default.createElement(Alert$2, { severity: "info", onClose: handleClose }, "Document created succesfully"))));
 };
 
 var useStyles$m = makeStyles(function (theme) { return ({
@@ -6434,7 +6478,7 @@ var useStyles$m = makeStyles(function (theme) { return ({
     },
 }); });
 var RemoveAssetDialog = function (_a) {
-    var show = _a.show, onHide = _a.onHide;
+    var show = _a.show, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
     var classes = useStyles$m();
     var _b = useState(true), fullWidth = _b[0]; _b[1];
     var _c = useState("sm"), maxWidth = _c[0]; _c[1];
@@ -6475,6 +6519,7 @@ var RemoveAssetDialog = function (_a) {
         });
     }); };
     return (React__default.createElement(React__default.Fragment, null,
+        show && (React__default.createElement(HelmetDexteel, { title: "Delete Asset".concat(suffixTitle ? " - ".concat(suffixTitle) : "") })),
         React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
             React__default.createElement(DialogTitle$1, { id: "responsive-dialog-title" }, "WARNING"),
             React__default.createElement(DialogContent$1, null,
@@ -6544,7 +6589,7 @@ var useStyles$l = makeStyles(function (theme) { return ({
     },
 }); });
 var ViewerAssetDialog = function (_a) {
-    var show = _a.show, onHide = _a.onHide;
+    var show = _a.show, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
     var classes = useStyles$l();
     var _b = useState(true), fullWidth = _b[0]; _b[1];
     var _c = useState("sm"), maxWidth = _c[0]; _c[1];
@@ -6570,43 +6615,45 @@ var ViewerAssetDialog = function (_a) {
             setValue("CanBeDefaultAsset", assetNodeFromApi === null || assetNodeFromApi === void 0 ? void 0 : assetNodeFromApi.CanBeDefaultAsset);
         }
     }, [show]);
-    return (React__default.createElement("div", { className: classes.root },
-        React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
-            React__default.createElement("form", { onSubmit: function () { } },
-                React__default.createElement(Grid, { container: true, style: { padding: "15px 0", height: "50%" } },
-                    React__default.createElement(Grid, { container: true, item: true },
-                        React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
-                            React__default.createElement(Typography$1, { style: { padding: "0 24px 12px", fontSize: 25 } }, assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.AssetName))),
-                    React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
-                        React__default.createElement(DialogContent$1, { dividers: true, style: { padding: "10px 24px 0" } },
+    return (React__default.createElement(React__default.Fragment, null,
+        show && (React__default.createElement(HelmetDexteel, { title: "View Asset".concat(suffixTitle ? " - ".concat(suffixTitle) : "") })),
+        React__default.createElement("div", { className: classes.root },
+            React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
+                React__default.createElement("form", { onSubmit: function () { } },
+                    React__default.createElement(Grid, { container: true, style: { padding: "15px 0", height: "50%" } },
+                        React__default.createElement(Grid, { container: true, item: true },
                             React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
-                                React__default.createElement(Controller, { name: "AssetName", control: control, render: function (_a) {
-                                        var _b = _a.field, onChange = _b.onChange, value = _b.value;
-                                        return (React__default.createElement(React__default.Fragment, null,
-                                            React__default.createElement(TextField, { label: "Asset Name", variant: "outlined", error: !!errors.AssetName, fullWidth: true, margin: "dense", autoComplete: "off", onChange: onChange, value: value, disabled: true })));
-                                    } })),
-                            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: "ParentAssetName", control: control, render: function (_a) {
-                                                var _b = _a.field, onChange = _b.onChange, value = _b.value;
-                                                return (React__default.createElement(React__default.Fragment, null, value ? (React__default.createElement(TextField, { label: "Parent Asset", variant: "outlined", error: !!errors.AssetName, fullWidth: true, margin: "dense", autoComplete: "off", onChange: onChange, value: value || "", disabled: true })) : (React__default.createElement(React__default.Fragment, null))));
-                                            } }))),
-                                React__default.createElement(Grid, { container: true, style: { marginTop: "5px", padding: "0 8px" } },
-                                    React__default.createElement(Grid, { item: true, xs: 6, md: 6 },
-                                        React__default.createElement(Controller, { name: "IsBranch", control: control, defaultValue: false, render: function (_a) {
-                                                var field = _a.field;
-                                                return (React__default.createElement(FormControlLabel, { className: classes.checkbox, control: React__default.createElement(Checkbox, { checked: field.value, onChange: function (e) {
-                                                            return field.onChange(e.target.checked);
-                                                        }, name: "IsBranch", color: "primary", disabled: true }), label: "Has Children" }));
-                                            } })),
-                                    React__default.createElement(Grid, { item: true, xs: 6, md: 6 },
-                                        React__default.createElement(Controller, { name: "CanBeDefaultAsset", control: control, defaultValue: false, render: function (_a) {
-                                                var field = _a.field;
-                                                return (React__default.createElement(FormControlLabel, { className: classes.checkbox, control: React__default.createElement(Checkbox, { checked: field.value, onChange: function (e) {
-                                                            return field.onChange(e.target.checked);
-                                                        }, name: "CanBeDefaultAsset", color: "primary", disabled: true }), label: "Can be Default Asset" }));
-                                            } })))))))))));
+                                React__default.createElement(Typography$1, { style: { padding: "0 24px 12px", fontSize: 25 } }, assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.AssetName))),
+                        React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
+                            React__default.createElement(DialogContent$1, { dividers: true, style: { padding: "10px 24px 0" } },
+                                React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
+                                    React__default.createElement(Controller, { name: "AssetName", control: control, render: function (_a) {
+                                            var _b = _a.field, onChange = _b.onChange, value = _b.value;
+                                            return (React__default.createElement(React__default.Fragment, null,
+                                                React__default.createElement(TextField, { label: "Asset Name", variant: "outlined", error: !!errors.AssetName, fullWidth: true, margin: "dense", autoComplete: "off", onChange: onChange, value: value, disabled: true })));
+                                        } })),
+                                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: "ParentAssetName", control: control, render: function (_a) {
+                                                    var _b = _a.field, onChange = _b.onChange, value = _b.value;
+                                                    return (React__default.createElement(React__default.Fragment, null, value ? (React__default.createElement(TextField, { label: "Parent Asset", variant: "outlined", error: !!errors.AssetName, fullWidth: true, margin: "dense", autoComplete: "off", onChange: onChange, value: value || "", disabled: true })) : (React__default.createElement(React__default.Fragment, null))));
+                                                } }))),
+                                    React__default.createElement(Grid, { container: true, style: { marginTop: "5px", padding: "0 8px" } },
+                                        React__default.createElement(Grid, { item: true, xs: 6, md: 6 },
+                                            React__default.createElement(Controller, { name: "IsBranch", control: control, defaultValue: false, render: function (_a) {
+                                                    var field = _a.field;
+                                                    return (React__default.createElement(FormControlLabel, { className: classes.checkbox, control: React__default.createElement(Checkbox, { checked: field.value, onChange: function (e) {
+                                                                return field.onChange(e.target.checked);
+                                                            }, name: "IsBranch", color: "primary", disabled: true }), label: "Has Children" }));
+                                                } })),
+                                        React__default.createElement(Grid, { item: true, xs: 6, md: 6 },
+                                            React__default.createElement(Controller, { name: "CanBeDefaultAsset", control: control, defaultValue: false, render: function (_a) {
+                                                    var field = _a.field;
+                                                    return (React__default.createElement(FormControlLabel, { className: classes.checkbox, control: React__default.createElement(Checkbox, { checked: field.value, onChange: function (e) {
+                                                                return field.onChange(e.target.checked);
+                                                            }, name: "CanBeDefaultAsset", color: "primary", disabled: true }), label: "Can be Default Asset" }));
+                                                } }))))))))))));
 };
 
 var useAssetActions = function (_a) {
@@ -7297,109 +7344,111 @@ var AssetViewComponent = function () {
     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",
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HelmetDexteel, { title: "Assets Tree" }),
+        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(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(""); } })));
+                                    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();
+                                    }
+                                }, suffixTitle: "Assets Tree" }),
+                            React__default.createElement(EditAssetDialog, { show: showEditAssetDialog, onHide: function (shouldUpdate) {
+                                    setShowEditAssetDialog(false);
+                                    if (shouldUpdate) {
+                                        searchAssets();
+                                    }
+                                }, suffixTitle: "Assets Tree" }),
+                            React__default.createElement(ViewerAssetDialog, { show: showViewerAssetDialog, onHide: function () { return handleOnHideViewer(); }, suffixTitle: "Assets Tree" }),
+                            React__default.createElement(RemoveAssetDialog, { show: showRemoveAssetDialog, onHide: function (shouldUpdate) {
+                                    setShowRemoveAssetDialog(false);
+                                    if (shouldUpdate) {
+                                        searchAssets();
+                                    }
+                                }, suffixTitle: "Assets Tree" })),
+                        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 () {
@@ -7632,7 +7681,7 @@ var useStyles$e = makeStyles(function (theme) { return ({
 }); });
 var CreateUser = function (_a) {
     var _b, _c, _d;
-    var show = _a.show, onHide = _a.onHide;
+    var show = _a.show, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
     var _e = useState(false), open = _e[0], setOpen = _e[1];
     var _f = useState(false), isSubmitLoading = _f[0], setIsSubmitLoading = _f[1];
     var _g = useState(""), error = _g[0], setError = _g[1];
@@ -7684,6 +7733,7 @@ var CreateUser = function (_a) {
         }
     }, [show]);
     return (React.createElement(React.Fragment, null,
+        show && (React.createElement(HelmetDexteel, { title: "New User".concat(suffixTitle ? " - ".concat(suffixTitle) : "") })),
         React.createElement(MesfModal, { title: "NEW USER", open: show, handleClose: function () { return onHide(false); }, id: "create-user-modal", maxWidth: "md" },
             React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
                 React.createElement(MesfModal.Content, { style: { padding: "15px 30px" } },
@@ -7733,7 +7783,7 @@ var CreateUser = function (_a) {
 };
 
 var DeleteUser = function (_a) {
-    var userId = _a.userId, show = _a.show, onHide = _a.onHide;
+    var userId = _a.userId, show = _a.show, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
     var _b = useState(false), open = _b[0], setOpen = _b[1];
     var _c = useState(false), isLoading = _c[0], setIsLoading = _c[1];
     var _d = useState(false), isSubmitLoading = _d[0], setIsSubmitLoading = _d[1];
@@ -7812,6 +7862,7 @@ var DeleteUser = function (_a) {
         }
     }, [show]);
     return (React__default.createElement(React__default.Fragment, null,
+        show && (React__default.createElement(HelmetDexteel, { title: "Delete User".concat(suffixTitle ? " - ".concat(suffixTitle) : "") })),
         React__default.createElement(MesfModal, { title: "DELETE USER", open: show, handleClose: function () { return onHide(false); }, id: "delete-user-modal", maxWidth: "md" },
             React__default.createElement("form", null,
                 React__default.createElement(MesfModal.Content, { style: { padding: "15px 30px" } },
@@ -8205,7 +8256,7 @@ var useStyles$d = makeStyles(function (theme) { return ({
 }); });
 var EditUser = function (_a) {
     var _b, _c, _d;
-    var userId = _a.userId, show = _a.show, onHide = _a.onHide;
+    var userId = _a.userId, show = _a.show, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
     var classes = useStyles$d();
     var _e = useState(false), open = _e[0], setOpen = _e[1];
     var _f = useState(false), isLoading = _f[0], setIsLoading = _f[1];
@@ -8298,6 +8349,7 @@ var EditUser = function (_a) {
         }
     }, [show]);
     return (React.createElement(React.Fragment, null,
+        show && (React.createElement(HelmetDexteel, { title: "Edit User".concat(suffixTitle ? " - ".concat(suffixTitle) : "") })),
         React.createElement(MesfModal, { title: "EDIT USER", open: show, handleClose: function () { return onHide(false); }, id: "edit-user-modal", maxWidth: "md" },
             React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
                 React.createElement(MesfModal.Content, { className: classes.modalBody, style: { padding: "15px 30px" } },
@@ -8677,26 +8729,26 @@ var TableUsers = function (_a) {
                 setUserId(null);
                 if (shouldUpdate)
                     getUsersFromAPI();
-            } }),
+            }, suffixTitle: "User Management" }),
         React.createElement(EditUser, { show: openModalEditDataUser, userId: userId, onHide: function (shouldUpdate) {
                 setOpenModalEditDataUser(false);
                 setUserId(null);
                 if (shouldUpdate)
                     getUsersFromAPI();
-            } }),
+            }, suffixTitle: "User Management" }),
         React.createElement(ChangePassword$1, { show: openModalChangePassword, userId: userId, onHide: function (shouldUpdate) {
                 setOpenModalChangePasswordd(false);
                 setUserId(null);
                 if (shouldUpdate) {
                     getUsersFromAPI();
                 }
-            } }),
+            }, suffixTitle: "User Management" }),
         React.createElement(DeleteUser, { show: openModalDeleteUser, userId: userId, onHide: function (shouldUpdate) {
                 setOpenModalDeleteUser(false);
                 setUserId(null);
                 if (shouldUpdate)
                     getUsersFromAPI();
-            } })));
+            }, suffixTitle: "User Management" })));
 };
 
 var Users = function (prop) {
@@ -8726,10 +8778,12 @@ var Users = function (prop) {
     useEffect(function () {
         getUsersFromAPI();
     }, []);
-    return (React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
-        React.createElement(Grid, { item: true, xs: 12 },
-            React.createElement(TableUsers, { isLoading: isLoading, getUsersFromAPI: getUsersFromAPI })),
-        React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HelmetDexteel, { title: "User Management" }),
+        React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
+            React.createElement(Grid, { item: true, xs: 12 },
+                React.createElement(TableUsers, { isLoading: isLoading, getUsersFromAPI: getUsersFromAPI })),
+            React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }))));
 };
 
 var UsersPage = function (props) {
@@ -9560,7 +9614,7 @@ var getUserPermissionsFromAPI = function (_a) { return __awaiter(void 0, [_a], v
 }); };
 
 var ChangePassword$1 = function (_a) {
-    var show = _a.show, userId = _a.userId, onHide = _a.onHide;
+    var show = _a.show, userId = _a.userId, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
     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 () {
@@ -9584,6 +9638,7 @@ var ChangePassword$1 = function (_a) {
     }, [show]);
     if (userId) {
         return (React.createElement(React.Fragment, null,
+            show && (React.createElement(HelmetDexteel, { title: "Change Password".concat(suffixTitle ? " - ".concat(suffixTitle) : "") })),
             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 },
@@ -9768,94 +9823,96 @@ var Account = function () {
             closeMessage();
         }
     }, [showSuccess]);
-    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(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"),
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HelmetDexteel, { title: "Account Configuration" }),
+        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: 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(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 } }, "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("");
             } }),
@@ -10434,40 +10491,6 @@ function Logout() {
         React__default.createElement("div", null, "logging out!!!")));
 }
 
-var RouterContext = createContext(function () { return React__default.createElement(React__default.Fragment, null); });
-var ConfigurationContext = createContext([
-    [],
-    function () { return React__default.createElement(React__default.Fragment, null); },
-]);
-var NavbarContext = createContext(function () { return React__default.createElement(React__default.Fragment, null); });
-
-var useSearchAssets = function (setError) {
-    var _a = useAssetContext().actions, setAllAssets = _a.setAllAssets, setAreasList = _a.setAreasList;
-    var searchAssets = function () {
-        getAssets().then(function (res) { return __awaiter(void 0, void 0, void 0, function () {
-            var rows, areas;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!res.ok) return [3 /*break*/, 2];
-                        rows = get(res, "data.tables[0].rows", []);
-                        return [4 /*yield*/, rows.filter(function (asset) { return asset.CanBeDefaultAsset; })];
-                    case 1:
-                        areas = _a.sent();
-                        setAllAssets(rows);
-                        setAreasList(areas);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        setError(res.message);
-                        _a.label = 3;
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    return { searchAssets: searchAssets };
-};
-
 var useStyles$6 = makeStyles(function (theme) { return ({
     container: {
         display: "flex",
@@ -10528,6 +10551,173 @@ var TimeAndUserMenu = function (_a) {
             React__default.createElement(MenuItem, { component: "a", href: "logout" }, "Logout"))));
 };
 
+var ButtonWithLoading = function (_a) {
+    var children = _a.children, isLoading = _a.isLoading, props = __rest(_a, ["children", "isLoading"]);
+    return (React__default.createElement(Button, __assign({}, props, { disabled: isLoading }),
+        isLoading && React__default.createElement(CircularProgress, { size: "1rem" }),
+        children));
+};
+
+var UTLSettingsInitialState = {
+    serverTimeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    settings: {},
+};
+var UTLSettingsReducer = createSlice({
+    name: "__",
+    initialState: UTLSettingsInitialState,
+    reducers: {
+        setServerTimeZone: function (state, _a) {
+            var payload = _a.payload;
+            state.serverTimeZone = payload;
+        },
+        setSetting: function (state, _a) {
+            var payload = _a.payload;
+            state.settings[payload.key] = payload.value;
+        },
+        initSettings: function (state, _a) {
+            var payload = _a.payload;
+            state.settings = payload.reduce(function (acc, cur) {
+                if (cur.SettingName.trim().toLowerCase() === "timezone") {
+                    var timeService = TimeService.getInstance();
+                    timeService.setTimeZone(cur.Value);
+                }
+                acc[cur.SettingName.trim()] = cur.Value;
+                return acc;
+            }, {});
+        },
+    },
+});
+
+var UTLSettingsContext = createContext({
+    state: UTLSettingsReducer.getInitialState(),
+    actions: UTLSettingsReducer.actions,
+    isLoading: true,
+});
+var useUTLSettingsContext = function () { return useContext(UTLSettingsContext); };
+var UTLSettingsProvider = function (_a) {
+    var children = _a.children;
+    var _b = useComplexState({
+        initialState: UTLSettingsReducer.getInitialState(),
+        reducers: UTLSettingsReducer.caseReducers,
+    }), state = _b[0], actions = _b[1];
+    var _c = useState(true), isLoading = _c[0], setIsLoading = _c[1];
+    var searchUTLSettings = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var res, settings, settingsTrimmed;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, getUTLSettings()];
+                case 1:
+                    res = _a.sent();
+                    if (res.ok) {
+                        settings = get(res, "data.tables[0].rows", []);
+                        settingsTrimmed = settings.map(function (setting) { return (__assign(__assign({}, setting), { SettingName: setting.SettingName.trim() })); });
+                        actions.initSettings(settingsTrimmed);
+                    }
+                    else {
+                        console.error(res.message);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        setIsLoading(true);
+        searchUTLSettings().then(function () {
+            setIsLoading(false);
+        });
+    }, []);
+    useMesfRealtime({
+        onReceiveMessage: function (author, message) {
+            if (message === "UTL.GetSettings") {
+                searchUTLSettings();
+            }
+        },
+    });
+    return (React__default.createElement(UTLSettingsContext.Provider, { value: { state: state, actions: actions, isLoading: isLoading } }, children));
+};
+
+var themeMESF = createTheme({
+    palette: {
+        type: "light",
+        primary: {
+            main: "#3f51b5",
+        },
+        secondary: {
+            main: "#f50057",
+        },
+    },
+    typography: {
+        // Modify base font size
+        fontSize: 14,
+        // Customize specific variants
+        h6: {
+            fontSize: "1.1rem",
+            fontWeight: 500,
+        },
+        subtitle1: {
+            fontSize: "0.875rem",
+        },
+        body1: {
+            fontSize: "0.875rem",
+        },
+        body2: {
+            fontSize: "0.875rem",
+        },
+    },
+    overrides: {
+        MuiListItemText: {
+            primary: {
+                fontSize: "0.875rem",
+            },
+        },
+        MuiListSubheader: {
+            root: {
+                fontSize: "0.875rem",
+                fontWeight: 600,
+            },
+        },
+        MuiListItemIcon: {
+            root: {
+                minWidth: "40px",
+            },
+        },
+    },
+});
+
+var RouterContext = createContext(function () { return React__default.createElement(React__default.Fragment, null); });
+var ConfigurationContext = createContext([
+    [],
+    function () { return React__default.createElement(React__default.Fragment, null); },
+]);
+var NavbarContext = createContext(function () { return React__default.createElement(React__default.Fragment, null); });
+
+var useSearchAssets = function (setError) {
+    var _a = useAssetContext().actions, setAllAssets = _a.setAllAssets, setAreasList = _a.setAreasList;
+    var searchAssets = function () {
+        getAssets().then(function (res) { return __awaiter(void 0, void 0, void 0, function () {
+            var rows, areas;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!res.ok) return [3 /*break*/, 2];
+                        rows = get(res, "data.tables[0].rows", []);
+                        return [4 /*yield*/, rows.filter(function (asset) { return asset.CanBeDefaultAsset; })];
+                    case 1:
+                        areas = _a.sent();
+                        setAllAssets(rows);
+                        setAreasList(areas);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        setError(res.message);
+                        _a.label = 3;
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); });
+    };
+    return { searchAssets: searchAssets };
+};
+
 var AreaSelector$1 = lazy(function () {
     return Promise.resolve().then(function () { return areaSelector; }).then(function (mod) { return ({
         default: mod.AreaSelector,
@@ -10783,26 +10973,28 @@ var ChatComponent = function () {
             }
         });
     }); };
-    return (React__default.createElement(Paper, { className: classes.root, elevation: 3 },
-        React__default.createElement(Box, { mb: 2 },
-            React__default.createElement(Chip, { label: connectionState.isConnected ? "Connected" : "Disconnected", color: connectionState.isConnected ? "primary" : "default", className: classes.statusChip }),
-            connectionState.error && (React__default.createElement(Typography$1, { color: "error" },
-                "Error: ",
-                connectionState.error.message))),
-        React__default.createElement(Paper, { className: classes.messageList, variant: "outlined" },
-            React__default.createElement(List, null,
-                messages.map(function (msg, index) { return (React__default.createElement(ListItem, { key: index },
-                    React__default.createElement(ListItemText, { primary: React__default.createElement(Typography$1, null,
-                            React__default.createElement("strong", null,
-                                msg.user,
-                                ":"),
-                            " ",
-                            msg.message), secondary: React__default.createElement("span", { className: classes.timestamp }, msg.timestamp.toLocaleTimeString()) }))); }),
-                React__default.createElement("div", { ref: messageEndRef }))),
-        React__default.createElement("form", { onSubmit: sendMessage, className: classes.messageForm },
-            React__default.createElement(TextField, { value: user, onChange: function (e) { return setUser(e.target.value); }, label: "Your name", variant: "outlined", size: "small" }),
-            React__default.createElement(TextField, { className: classes.messageInput, value: message, onChange: function (e) { return setMessage(e.target.value); }, label: "Type a message", variant: "outlined", size: "small" }),
-            React__default.createElement(Button, { type: "submit", variant: "contained", color: "primary", disabled: !connectionState.isConnected || !user || !message, endIcon: React__default.createElement(Send, null) }, "Send"))));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HelmetDexteel, { title: "Client - Real Time" }),
+        React__default.createElement(Paper, { className: classes.root, elevation: 3 },
+            React__default.createElement(Box, { mb: 2 },
+                React__default.createElement(Chip, { label: connectionState.isConnected ? "Connected" : "Disconnected", color: connectionState.isConnected ? "primary" : "default", className: classes.statusChip }),
+                connectionState.error && (React__default.createElement(Typography$1, { color: "error" },
+                    "Error: ",
+                    connectionState.error.message))),
+            React__default.createElement(Paper, { className: classes.messageList, variant: "outlined" },
+                React__default.createElement(List, null,
+                    messages.map(function (msg, index) { return (React__default.createElement(ListItem, { key: index },
+                        React__default.createElement(ListItemText, { primary: React__default.createElement(Typography$1, null,
+                                React__default.createElement("strong", null,
+                                    msg.user,
+                                    ":"),
+                                " ",
+                                msg.message), secondary: React__default.createElement("span", { className: classes.timestamp }, msg.timestamp.toLocaleTimeString()) }))); }),
+                    React__default.createElement("div", { ref: messageEndRef }))),
+            React__default.createElement("form", { onSubmit: sendMessage, className: classes.messageForm },
+                React__default.createElement(TextField, { value: user, onChange: function (e) { return setUser(e.target.value); }, label: "Your name", variant: "outlined", size: "small" }),
+                React__default.createElement(TextField, { className: classes.messageInput, value: message, onChange: function (e) { return setMessage(e.target.value); }, label: "Type a message", variant: "outlined", size: "small" }),
+                React__default.createElement(Button, { type: "submit", variant: "contained", color: "primary", disabled: !connectionState.isConnected || !user || !message, endIcon: React__default.createElement(Send, null) }, "Send")))));
 };
 
 var QueryCacheInvalidations = function () {
@@ -10936,38 +11128,43 @@ var QueryCacheInvalidations = function () {
             }
         });
     }); };
-    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")),
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HelmetDexteel, { title: "Query Cache Invalidations - Real Time" }),
+        ["add", "edit"].includes(modal) && (React__default.createElement(HelmetDexteel, { title: "".concat(modal === "add" ? "Add Cache Invalidation" : "Edit Cache Invalidation", " - 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" }))); }, 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" }))); }, 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 },
-                            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 },
-                            React__default.createElement(Button, { fullWidth: true, startIcon: isLoading && React__default.createElement(CircularProgress, { size: "1rem" }), disabled: isLoading, variant: "contained", color: "primary", type: "submit" }, "Save"))))))));
+                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" }))); }, 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" }))); }, 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 },
+                                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 },
+                                React__default.createElement(Button, { fullWidth: true, startIcon: isLoading && React__default.createElement(CircularProgress, { size: "1rem" }), disabled: isLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))))));
 };
 
 var SettingsInitialState = {
@@ -11280,7 +11477,7 @@ var useStyles$1 = makeStyles(function (theme) { return ({
     },
 }); });
 var CreateSetting = function (_a) {
-    var show = _a.show, onHide = _a.onHide;
+    var show = _a.show, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
     var _b = useState(false), open = _b[0], setOpen = _b[1];
     var _c = useState(false), isSubmitLoading = _c[0], setIsSubmitLoading = _c[1];
     var _d = useState(""), error = _d[0], setError = _d[1];
@@ -11324,9 +11521,10 @@ var CreateSetting = function (_a) {
         }
     }, [show]);
     return (React.createElement(React.Fragment, null,
+        show && (React.createElement(HelmetDexteel, { title: "New Setting".concat(suffixTitle ? " - ".concat(suffixTitle) : "") })),
         React.createElement(Grid, { container: true },
             React.createElement(Grid, { item: true },
-                React.createElement(MesfModal, { title: "NEW SETTING/CREW", open: show, handleClose: function () { return onHide(false); }, id: "create-setting-modal", maxWidth: "md" },
+                React.createElement(MesfModal, { title: "NEW SETTING", open: show, handleClose: function () { return onHide(false); }, id: "create-setting-modal", maxWidth: "md" },
                     React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
                         React.createElement(MesfModal.Content, { style: { padding: "15px 30px 0" } },
                             React.createElement(Grid, { container: true, spacing: 2 },
@@ -11386,7 +11584,7 @@ makeStyles(function (theme) { return ({
     },
 }); });
 var DeleteSetting = function (_a) {
-    var show = _a.show, onHide = _a.onHide;
+    var show = _a.show, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
     var _b = useState(false), open = _b[0], setOpen = _b[1];
     var _c = useState(false), isSubmitLoading = _c[0], setIsSubmitLoading = _c[1];
     var _d = useState(""), error = _d[0], setError = _d[1];
@@ -11434,9 +11632,10 @@ var DeleteSetting = function (_a) {
         }
     }, [show]);
     return (React.createElement(React.Fragment, null,
+        show && (React.createElement(HelmetDexteel, { title: "Delete Setting".concat(suffixTitle ? " - ".concat(suffixTitle) : "") })),
         React.createElement(Grid, { container: true },
             React.createElement(Grid, { item: true },
-                React.createElement(MesfModal, { title: "DELETE SETTING/CREW", open: show, handleClose: function () { return onHide(false); }, id: "delete-setting-modal", maxWidth: "md" },
+                React.createElement(MesfModal, { title: "DELETE SETTING", open: show, handleClose: function () { return onHide(false); }, id: "delete-setting-modal", maxWidth: "md" },
                     React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
                         React.createElement(MesfModal.Content, { style: { padding: "15px 30px 0" } },
                             React.createElement(Grid, { container: true, spacing: 2 },
@@ -11490,7 +11689,7 @@ makeStyles(function (theme) { return ({
     },
 }); });
 var EditSetting = function (_a) {
-    var show = _a.show, onHide = _a.onHide;
+    var show = _a.show, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
     var _b = useState(false), open = _b[0], setOpen = _b[1];
     var _c = useState(false), isSubmitLoading = _c[0], setIsSubmitLoading = _c[1];
     var _d = useState(""), error = _d[0], setError = _d[1];
@@ -11538,9 +11737,10 @@ var EditSetting = function (_a) {
         }
     }, [show]);
     return (React.createElement(React.Fragment, null,
+        show && (React.createElement(HelmetDexteel, { title: "Edit Setting".concat(suffixTitle ? " - ".concat(suffixTitle) : "") })),
         React.createElement(Grid, { container: true },
             React.createElement(Grid, { item: true },
-                React.createElement(MesfModal, { title: "EDIT SETTING/CREW", open: show, handleClose: function () { return onHide(false); }, id: "edit-setting-modal", maxWidth: "md" },
+                React.createElement(MesfModal, { title: "EDIT SETTING", open: show, handleClose: function () { return onHide(false); }, id: "edit-setting-modal", maxWidth: "md" },
                     React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
                         React.createElement(MesfModal.Content, { style: { padding: "15px 30px 0" } },
                             React.createElement(Grid, { container: true, spacing: 2 },
@@ -11664,17 +11864,17 @@ var TableSettings = function (_a) {
                             setOpenModalNew(false);
                             if (shouldUpdate)
                                 getSettingsFromAPI();
-                        } }),
+                        }, suffixTitle: "Settings" }),
                     React__default.createElement(EditSetting, { show: openModalEditSetting, onHide: function (shouldUpdate) {
                             setOpenModalEditSetting(false);
                             if (shouldUpdate)
                                 getSettingsFromAPI();
-                        } }),
+                        }, suffixTitle: "Settings" }),
                     React__default.createElement(DeleteSetting, { show: openModalDeleteSetting, onHide: function (shouldUpdate) {
                             setOpenModalDeleteSetting(false);
                             if (shouldUpdate)
                                 getSettingsFromAPI();
-                        } })),
+                        }, suffixTitle: "Settings" })),
                 React__default.createElement(Grid, { container: true, justifyContent: "flex-end" },
                     React__default.createElement(Grid, { item: true, md: 2, xs: 12, style: {
                             display: "flex",
@@ -11712,6 +11912,7 @@ var SettingsPage = function () {
         getSettingsFromAPI();
     }, []);
     return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HelmetDexteel, { title: "Settings" }),
         React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
             React__default.createElement(TableSettings, { rows: state.settings, isLoading: isLoading, getSettingsFromAPI: getSettingsFromAPI })),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
@@ -12057,13 +12258,6 @@ var ColorPicker = function (_a) {
                 } })); })))));
 };
 
-var ButtonWithLoading = function (_a) {
-    var children = _a.children, isLoading = _a.isLoading, props = __rest(_a, ["children", "isLoading"]);
-    return (React__default.createElement(Button, __assign({}, props, { disabled: isLoading }),
-        isLoading && React__default.createElement(CircularProgress, { size: "1rem" }),
-        children));
-};
-
 var TrendingsInitialState = {
     timeScopeStart: moment$3(new Date()).subtract(1, "days").toDate(),
     timeScopeEnd: new Date(),
@@ -14809,6 +15003,7 @@ var TrendingsPage = function (props) {
         getTagsFromAPI();
     }, []);
     return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HelmetDexteel, { title: "Trending Chart" }),
         React__default.createElement(Box, { p: 3, style: { maxWidth: "100%" } },
             React__default.createElement(Paper, null,
                 React__default.createElement(Grid, { container: true, spacing: 3, style: { padding: "20px" } },
@@ -14886,94 +15081,6 @@ var Navigation = function (_a) {
         React__default.createElement(MESFMainContainer, null)));
 };
 
-var useSearchUTLSettings = function (_a) {
-    var onError = _a.onError;
-    var initSettings = useUTLSettingsContext().actions.initSettings;
-    var searchUTLSettings = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var res, settings;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, getUTLSettings()];
-                case 1:
-                    res = _a.sent();
-                    if (res.ok) {
-                        settings = get(res, "data.tables[0].rows", []);
-                        initSettings(settings);
-                    }
-                    else {
-                        onError(res.message);
-                    }
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    return { searchUTLSettings: searchUTLSettings };
-};
-
-var UTLSettingsInitialState = {
-    serverTimeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-    settings: {},
-};
-var UTLSettingsReducer = createSlice({
-    name: "__",
-    initialState: UTLSettingsInitialState,
-    reducers: {
-        setServerTimeZone: function (state, _a) {
-            var payload = _a.payload;
-            state.serverTimeZone = payload;
-        },
-        setSetting: function (state, _a) {
-            var payload = _a.payload;
-            state.settings[payload.key] = payload.value;
-        },
-        initSettings: function (state, _a) {
-            var payload = _a.payload;
-            state.settings = payload.reduce(function (acc, cur) {
-                if (cur.SettingName.trim() === "TimeZone") {
-                    var timeService = TimeService.getInstance();
-                    timeService.setTimeZone(cur.Value);
-                }
-                acc[cur.SettingName.trim()] = cur.Value;
-                return acc;
-            }, {});
-        },
-    },
-});
-
-var UTLSettingsContext = createContext({
-    state: UTLSettingsReducer.getInitialState(),
-    actions: UTLSettingsReducer.actions,
-    isLoading: true,
-});
-var useUTLSettingsContext = function () { return useContext(UTLSettingsContext); };
-var UTLSettingsProvider = function (_a) {
-    var children = _a.children;
-    var _b = useComplexState({
-        initialState: UTLSettingsReducer.getInitialState(),
-        reducers: UTLSettingsReducer.caseReducers,
-    }), state = _b[0], actions = _b[1];
-    var _c = useState(true), isLoading = _c[0], setIsLoading = _c[1];
-    var searchUTLSettings = useSearchUTLSettings({
-        onError: console.error,
-    }).searchUTLSettings;
-    useEffect(function () {
-        setIsLoading(true);
-        searchUTLSettings().then(function () {
-            setIsLoading(false);
-        });
-    }, []);
-    useMesfRealtime({
-        onReceiveMessage: function (author, message) {
-            if (message === "UTL.GetSettings") {
-                searchUTLSettings().then(function () {
-                    // setIsLoading(false);
-                });
-            }
-        },
-    });
-    return (React__default.createElement(UTLSettingsContext.Provider, { value: { state: state, actions: actions, isLoading: isLoading } }, children));
-};
-
 var ProvidersLoader = function (_a) {
     var children = _a.children;
     var isUsersLoading = useUserContext().isLoading;
@@ -14983,61 +15090,13 @@ var ProvidersLoader = function (_a) {
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",
-                height: "100vh",
+                height: "80vh",
             } },
             React__default.createElement(CircularProgress, null)));
     }
     return React__default.createElement(React__default.Fragment, null, children);
 };
 
-var themeMESF = createTheme({
-    palette: {
-        type: "light",
-        primary: {
-            main: "#3f51b5",
-        },
-        secondary: {
-            main: "#f50057",
-        },
-    },
-    typography: {
-        // Modify base font size
-        fontSize: 14,
-        // Customize specific variants
-        h6: {
-            fontSize: "1.1rem",
-            fontWeight: 500,
-        },
-        subtitle1: {
-            fontSize: "0.875rem",
-        },
-        body1: {
-            fontSize: "0.875rem",
-        },
-        body2: {
-            fontSize: "0.875rem",
-        },
-    },
-    overrides: {
-        MuiListItemText: {
-            primary: {
-                fontSize: "0.875rem",
-            },
-        },
-        MuiListSubheader: {
-            root: {
-                fontSize: "0.875rem",
-                fontWeight: 600,
-            },
-        },
-        MuiListItemIcon: {
-            root: {
-                minWidth: "40px",
-            },
-        },
-    },
-});
-
 var timezone = TimeService.getInstance().getServerTimeZone();
 moment$2.tz.setDefault(timezone);
 var base = document.getElementsByTagName("base")[0].getAttribute("href") || "/";
@@ -15045,22 +15104,24 @@ function MESFMain(_a) {
     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, _d = _a.showTrendingsIcon, showTrendingsIcon = _d === void 0 ? true : _d, _e = _a.byPassHeaderRoutes, byPassHeaderRoutes = _e === void 0 ? [] : _e, _f = _a.plantAssetId, plantAssetId = _f === void 0 ? 1 : _f, _g = _a.theme, theme = _g === void 0 ? themeMESF : _g;
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(CssBaseline, null),
-        React__default.createElement(ThemeProvider, { theme: theme },
-            React__default.createElement(AuthProvider, { authConfig: authentication },
-                React__default.createElement(LocalizationProvider, { dateAdapter: AdapterMoment, dateLibInstance: moment$2 },
-                    React__default.createElement(UserProvider, null,
-                        React__default.createElement(UTLSettingsProvider, null,
-                            React__default.createElement(ProvidersLoader, null,
-                                React__default.createElement(AssetProvider, { plantAssetId: plantAssetId },
-                                    React__default.createElement(RouterContext.Provider, { value: routes },
-                                        React__default.createElement(NavbarContext.Provider, { value: navbar },
-                                            React__default.createElement(ConfigurationContext.Provider, { value: configurations },
-                                                React__default.createElement(ShiftNavigatorProvider, null,
-                                                    React__default.createElement(ContextMenuMESFProvider, null,
-                                                        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, showTrendingsIcon: showTrendingsIcon, navbarTitle: navbarTitle, byPassHeaderRoutes: byPassHeaderRoutes }))))))))))))))));
+        React__default.createElement(HelmetProvider, null,
+            React__default.createElement(HelmetDexteelProvider, { navbarTitle: navbarTitle },
+                React__default.createElement(ThemeProvider, { theme: theme },
+                    React__default.createElement(AuthProvider, { authConfig: authentication },
+                        React__default.createElement(LocalizationProvider, { dateAdapter: AdapterMoment, dateLibInstance: moment$2 },
+                            React__default.createElement(UserProvider, null,
+                                React__default.createElement(UTLSettingsProvider, null,
+                                    React__default.createElement(ProvidersLoader, null,
+                                        React__default.createElement(AssetProvider, { plantAssetId: plantAssetId },
+                                            React__default.createElement(RouterContext.Provider, { value: routes },
+                                                React__default.createElement(NavbarContext.Provider, { value: navbar },
+                                                    React__default.createElement(ConfigurationContext.Provider, { value: configurations },
+                                                        React__default.createElement(ShiftNavigatorProvider, null,
+                                                            React__default.createElement(ContextMenuMESFProvider, null,
+                                                                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, showTrendingsIcon: showTrendingsIcon, navbarTitle: navbarTitle, byPassHeaderRoutes: byPassHeaderRoutes }))))))))))))))))));
 }
 
 var useDefaultAreaId = function (setError) {
@@ -15187,6 +15248,7 @@ var AreaSelector = function () {
                 React__default.createElement("div", { className: classes.areaLink },
                     React__default.createElement(PersonPinCircleIcon, { className: classes.areaIcon }),
                     defaultAreaName))),
+        open && React__default.createElement(HelmetDexteel, { title: "Change Default Area" }),
         React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, onClose: handleClose, "aria-labelledby": "confirmation-dialog-title", open: open, className: classes.root },
             React__default.createElement(DialogTitle$1, { id: "confirmation-dialog-title" }, "AREA"),
             React__default.createElement(DialogContent$1, { dividers: true },
@@ -15212,5 +15274,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, useHasProfile, useMesfRealtime, useShiftNavigator, useShiftNavigatorManager, useStyles$C 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, HelmetDexteel, 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