@dexteel/mesf-core 5.12.1 → 5.14.0

package/dist/index.esm.js

@@ -1,41 +1,43 @@
+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';
 import { ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRight, ArrowRight, Send, Menu as Menu$1, People, Storage, Group, Assignment, Chat, Timeline, ViewList, Build, Settings as Settings$2 } from '@material-ui/icons';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import moment$2 from 'moment-timezone';
+import moment$1 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 { Alert as Alert$2, AlertTitle, Autocomplete } from '@material-ui/lab';
 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 { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { themeMaterial } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import MomentUtils from '@date-io/moment';
 import { MuiPickersUtilsProvider, KeyboardDatePicker, KeyboardTimePicker } from '@material-ui/pickers';
-import moment$3 from 'moment';
-import { isNil as isNil$1, get as get$1 } from 'lodash';
+import moment$2 from 'moment';
+import { get as get$1, isNil as isNil$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 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 +253,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,
@@ -1709,13 +1735,13 @@ var ShiftDayNavigatorControl = function (_a) {
                     case 2:
                         resp = _a.sent();
                         if (resp.ok) {
-                            shift = __assign(__assign({}, resp.data), { CurrentProductionDate: moment$2
+                            shift = __assign(__assign({}, resp.data), { CurrentProductionDate: moment$1
                                     .utc(resp.data.CurrentProductionDate)
-                                    .toDate(), CurrentStart: moment$2.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$2.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$2
+                                    .toDate(), CurrentStart: moment$1.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$1.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$1
                                     .utc(resp.data.PreviousProductionDate)
-                                    .toDate(), PreviousStart: moment$2.utc(resp.data.PreviousStart).toDate(), PreviousEnd: moment$2.utc(resp.data.PreviousEnd).toDate(), LastProductionDate: moment$2
+                                    .toDate(), PreviousStart: moment$1.utc(resp.data.PreviousStart).toDate(), PreviousEnd: moment$1.utc(resp.data.PreviousEnd).toDate(), LastProductionDate: moment$1
                                     .utc(resp.data.LastProductionDate)
-                                    .toDate(), LastStart: moment$2.utc(resp.data.LastStart).toDate(), LastEnd: moment$2.utc(resp.data.LastEnd).toDate() });
+                                    .toDate(), LastStart: moment$1.utc(resp.data.LastStart).toDate(), LastEnd: moment$1.utc(resp.data.LastEnd).toDate() });
                             setShiftInfoCopy(shift);
                         }
                         return [3 /*break*/, 4];
@@ -1759,7 +1785,7 @@ var ShiftDayNavigatorControl = function (_a) {
                     }, size: "small" },
                     React__default.createElement(ArrowBackRounded, null)))),
         React__default.createElement(Grid, { item: true },
-            React__default.createElement(DatePicker, { label: "Current Date", timezone: "UTC", format: "MM/DD/YYYY", maxDate: moment$2(), closeOnSelect: true, formatDensity: "dense", value: moment$2(shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.CurrentProductionDate), onChange: function (date) {
+            React__default.createElement(DatePicker, { label: "Current Date", timezone: "UTC", format: "MM/DD/YYYY", maxDate: moment$1(), closeOnSelect: true, formatDensity: "dense", value: moment$1(shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.CurrentProductionDate), onChange: function (date) {
                     if (date) {
                         getShiftDataFromAPI(date.toDate(), 0).then(function () { });
                     }
@@ -1841,8 +1867,8 @@ var getShiftsRangeByParameters = function (period_1) {
                     if (resp.ok) {
                         data = resp.data;
                         data.tables[0].rows.map(function (shift) {
-                            shift.Start = moment$2.utc(shift["Start"]).toDate();
-                            shift.End = moment$2.utc(shift["End"]).toDate();
+                            shift.Start = moment$1.utc(shift["Start"]).toDate();
+                            shift.End = moment$1.utc(shift["End"]).toDate();
                         });
                         return [2 /*return*/, {
                                 ok: true,
@@ -1927,13 +1953,13 @@ var ShiftPeriodNavigatorControl = function (_a) {
                 case 1:
                     _a.trys.push([1, 6, , 7]);
                     if (!(direction === "prev" && (startShift === null || startShift === void 0 ? void 0 : startShift.Start))) return [3 /*break*/, 3];
-                    return [4 /*yield*/, searchShiftsRangeByParameters(period, moment$2(startShift.Start).toDate(), null, false, "prev")];
+                    return [4 /*yield*/, searchShiftsRangeByParameters(period, moment$1(startShift.Start).toDate(), null, false, "prev")];
                 case 2:
                     _a.sent();
                     return [3 /*break*/, 5];
                 case 3:
                     if (!(direction === "next" && (endShift === null || endShift === void 0 ? void 0 : endShift.End))) return [3 /*break*/, 5];
-                    return [4 /*yield*/, searchShiftsRangeByParameters(period, null, moment$2(endShift.End).toDate(), false, "next")];
+                    return [4 /*yield*/, searchShiftsRangeByParameters(period, null, moment$1(endShift.End).toDate(), false, "next")];
                 case 4:
                     _a.sent();
                     _a.label = 5;
@@ -2089,8 +2115,8 @@ var ShiftPeriodNavigatorControl = function (_a) {
                     newPeriod = e.target.value;
                     setPeriod(newPeriod);
                     if (!(newPeriod === "Custom")) return [3 /*break*/, 2];
-                    today = moment$2();
-                    yesterday = moment$2().subtract(1, "day");
+                    today = moment$1();
+                    yesterday = moment$1().subtract(1, "day");
                     setCustomStartDate(yesterday);
                     setCustomEndDate(today);
                     return [4 /*yield*/, searchShiftsRangeByParameters("Custom", yesterday.toDate(), today.toDate(), false)];
@@ -2100,7 +2126,7 @@ var ShiftPeriodNavigatorControl = function (_a) {
                 case 2:
                     setCustomStartDate(null);
                     setCustomEndDate(null);
-                    return [4 /*yield*/, searchShiftsRangeByParameters(newPeriod, null, (endShift === null || endShift === void 0 ? void 0 : endShift.Start) ? moment$2(endShift.Start).toDate() : null, false)];
+                    return [4 /*yield*/, searchShiftsRangeByParameters(newPeriod, null, (endShift === null || endShift === void 0 ? void 0 : endShift.Start) ? moment$1(endShift.Start).toDate() : null, false)];
                 case 3:
                     _a.sent();
                     _a.label = 4;
@@ -2140,10 +2166,10 @@ var ShiftPeriodNavigatorControl = function (_a) {
                 React__default.createElement(ChevronLeft, null))),
         React__default.createElement("div", { className: "".concat(classes.gridItem, " ").concat(classes.datePickerWrapper) },
             React__default.createElement(DatePicker$1, { label: "Start", format: dateFormat, value: isCustomMode
-                    ? customStartDate || moment$2().subtract(1, "day")
-                    : moment$2((startShift === null || startShift === void 0 ? void 0 : startShift.Start) || moment$2().subtract(1, "day")), onChange: function (value) {
-                    return handleDateChange(value ? moment$2(value) : null, "start");
-                }, disabled: loadingShiftPeriodList, maxDate: isCustomMode ? moment$2() : undefined, enableAccessibleFieldDOMStructure: false, slots: {
+                    ? customStartDate || moment$1().subtract(1, "day")
+                    : moment$1((startShift === null || startShift === void 0 ? void 0 : startShift.Start) || moment$1().subtract(1, "day")), onChange: function (value) {
+                    return handleDateChange(value ? moment$1(value) : null, "start");
+                }, disabled: loadingShiftPeriodList, maxDate: isCustomMode ? moment$1() : undefined, enableAccessibleFieldDOMStructure: false, slots: {
                     textField: function (props) { return (React__default.createElement(TextField, __assign({}, props, { size: "small", variant: "outlined", fullWidth: true, style: { width: "100%" }, InputProps: __assign(__assign({}, props.InputProps), { style: { paddingTop: "2px" } }) }))); },
                     openPickerIcon: function () { return (React__default.createElement("div", { style: {
                             display: "flex",
@@ -2162,10 +2188,10 @@ var ShiftPeriodNavigatorControl = function (_a) {
                     } }, periodOptions.map(function (option) { return (React__default.createElement(MenuItem, { key: option.value, value: option.value }, option.label)); })))),
         React__default.createElement("div", { className: "".concat(classes.gridItem, " ").concat(classes.datePickerWrapper) },
             React__default.createElement(DatePicker$1, { label: "End", format: dateFormat, value: isCustomMode
-                    ? customEndDate || moment$2()
-                    : moment$2((endShift === null || endShift === void 0 ? void 0 : endShift.End) || (endShift === null || endShift === void 0 ? void 0 : endShift.Start) || moment$2()), onChange: function (value) {
-                    return handleDateChange(value ? moment$2(value) : null, "end");
-                }, disabled: loadingShiftPeriodList, minDate: isCustomMode && customStartDate ? customStartDate : undefined, maxDate: isCustomMode ? moment$2() : undefined, enableAccessibleFieldDOMStructure: false, slots: {
+                    ? customEndDate || moment$1()
+                    : moment$1((endShift === null || endShift === void 0 ? void 0 : endShift.End) || (endShift === null || endShift === void 0 ? void 0 : endShift.Start) || moment$1()), onChange: function (value) {
+                    return handleDateChange(value ? moment$1(value) : null, "end");
+                }, disabled: loadingShiftPeriodList, minDate: isCustomMode && customStartDate ? customStartDate : undefined, maxDate: isCustomMode ? moment$1() : undefined, enableAccessibleFieldDOMStructure: false, slots: {
                     textField: function (props) { return (React__default.createElement(TextField, __assign({}, props, { size: "small", variant: "outlined", fullWidth: true, style: { width: "100%" }, InputProps: __assign(__assign({}, props.InputProps), { style: { paddingTop: "2px" } }) }))); },
                     openPickerIcon: function () { return (React__default.createElement("div", { style: {
                             display: "flex",
@@ -2329,15 +2355,15 @@ var GetJobsStatus = function () { return __awaiter(void 0, void 0, void 0, funct
                 if (resp.ok) {
                     rows = get(resp, "data.tables[0].rows", []);
                     rows = rows.map(function (job) { return (__assign(__assign({}, job), { LastStarted: job.LastStarted
-                            ? moment$2.utc(job["LastStarted"]).toDate()
+                            ? moment$1.utc(job["LastStarted"]).toDate()
                             : null, LastContact: job.LastContact
-                            ? moment$2.utc(job["LastContact"]).toDate()
+                            ? moment$1.utc(job["LastContact"]).toDate()
                             : null, LastCounter: job.LastCounter
-                            ? moment$2.utc(job["LastCounter"]).toDate()
-                            : null, StartTime: job.StartTime ? moment$2.utc(job["StartTime"]).toDate() : null, NextExecutionTime: job.NextExecutionTime
-                            ? moment$2.utc(job["NextExecutionTime"]).toDate()
+                            ? moment$1.utc(job["LastCounter"]).toDate()
+                            : null, StartTime: job.StartTime ? moment$1.utc(job["StartTime"]).toDate() : null, NextExecutionTime: job.NextExecutionTime
+                            ? moment$1.utc(job["NextExecutionTime"]).toDate()
                             : null, LastExecutionTime: job.LastExecutionTime
-                            ? moment$2.utc(job["LastExecutionTime"]).toDate()
+                            ? moment$1.utc(job["LastExecutionTime"]).toDate()
                             : null })); });
                     return [2 /*return*/, {
                             ok: true,
@@ -2488,7 +2514,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 +2562,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",
@@ -2566,7 +2593,7 @@ var JobDetails = function (_a) {
                     React__default.createElement(Controller, { name: "StartTime", control: control, render: function (_a) {
                             var field = _a.field, error = _a.fieldState.error;
                             return (React__default.createElement(React__default.Fragment, null,
-                                React__default.createElement(DateTimePicker, { label: "Start Time", value: field.value ? moment$2(field.value) : null, onChange: field.onChange, format: "MM/DD/YYYY HH:mm:ss", views: ["year", "month", "day", "hours", "minutes"], ampm: false, timezone: TimeService.getInstance().getServerTimeZone(), slotProps: {
+                                React__default.createElement(DateTimePicker, { label: "Start Time", value: field.value ? moment$1(field.value) : null, onChange: field.onChange, format: "MM/DD/YYYY HH:mm:ss", views: ["year", "month", "day", "hours", "minutes"], ampm: false, timezone: TimeService.getInstance().getServerTimeZone(), slotProps: {
                                         textField: {
                                             size: "small",
                                             margin: "none",
@@ -2583,7 +2610,7 @@ var JobDetails = function (_a) {
                 React__default.createElement(Grid, { item: true, xs: 12, md: 6 },
                     React__default.createElement(Controller, { name: "LastExecutionTime", control: control, render: function (_a) {
                             var field = _a.field;
-                            return (React__default.createElement(DateTimePicker, { label: "Last Execution Time", value: field.value ? moment$2(field.value) : null, format: "MM/DD/YYYY HH:mm:ss", views: ["year", "month", "day", "hours", "minutes"], ampm: false, timezone: TimeService.getInstance().getServerTimeZone(), disabled: true, slotProps: {
+                            return (React__default.createElement(DateTimePicker, { label: "Last Execution Time", value: field.value ? moment$1(field.value) : null, format: "MM/DD/YYYY HH:mm:ss", views: ["year", "month", "day", "hours", "minutes"], ampm: false, timezone: TimeService.getInstance().getServerTimeZone(), disabled: true, slotProps: {
                                     textField: {
                                         size: "small",
                                         margin: "none",
@@ -2593,7 +2620,7 @@ var JobDetails = function (_a) {
                 React__default.createElement(Grid, { item: true, xs: 12, md: 6 },
                     React__default.createElement(Controller, { name: "NextExecutionTime", control: control, render: function (_a) {
                             var field = _a.field;
-                            return (React__default.createElement(DateTimePicker, { label: "Next Execution Time", value: field.value ? moment$2(field.value) : null, format: "MM/DD/YYYY HH:mm:ss", views: ["year", "month", "day", "hours", "minutes"], ampm: false, timezone: TimeService.getInstance().getServerTimeZone(), disabled: true, slotProps: {
+                            return (React__default.createElement(DateTimePicker, { label: "Next Execution Time", value: field.value ? moment$1(field.value) : null, format: "MM/DD/YYYY HH:mm:ss", views: ["year", "month", "day", "hours", "minutes"], ampm: false, timezone: TimeService.getInstance().getServerTimeZone(), disabled: true, slotProps: {
                                     textField: {
                                         size: "small",
                                         margin: "none",
@@ -2776,7 +2803,7 @@ var useJobsTableData = function (_a) {
             headerName: "Next Execution",
             valueFormatter: function (_a) {
                 var value = _a.value;
-                return value === null ? "" : moment$3(value).format("DD/MM/YYYY HH:mm");
+                return value === null ? "" : moment$2(value).format("DD/MM/YYYY HH:mm");
             },
             flex: 1,
             cellStyle: {
@@ -3028,7 +3055,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 +3124,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) {
@@ -3108,138 +3137,6 @@ var JobsPage = function (props) {
         React.createElement(Jobs, null)));
 };
 
-var TimeService = /** @class */ (function () {
-    function TimeService() {
-        this.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    }
-    TimeService.getInstance = function () {
-        if (!TimeService.instance) {
-            TimeService.instance = new TimeService();
-        }
-        return TimeService.instance;
-    };
-    TimeService.prototype.setTimeZone = function (timeZone) {
-        var ianaTimeZones = findIana(timeZone);
-        if (ianaTimeZones.length) {
-            this.timeZone = ianaTimeZones[0];
-        }
-        else {
-            this.timeZone = timeZone;
-        }
-        moment$2.tz.setDefault(this.timeZone);
-    };
-    TimeService.prototype.toUTC = function (datetime, format$1) {
-        try {
-            if (datetime instanceof Date) {
-                return format(datetime, format$1);
-            }
-            return format(fromZonedTime(datetime, TimeService.instance.timeZone), format$1);
-        }
-        catch (e) {
-            console.log({ datetime: datetime, e: e });
-            return "";
-        }
-    };
-    TimeService.prototype.toLocalServerTime = function (datetime, format) {
-        try {
-            if (isNil(datetime) || !datetime) {
-                return "";
-            }
-            if (typeof datetime === "string") {
-                if (datetime.includes("Z")) {
-                    datetime = new Date(datetime);
-                }
-                else {
-                    datetime = new Date("".concat(datetime, "Z"));
-                }
-            }
-            return formatInTimeZone(datetime, TimeService.instance.timeZone, format);
-        }
-        catch (e) {
-            console.log({ datetime: datetime, e: e });
-            return "";
-        }
-    };
-    TimeService.prototype.getServerTimeZone = function () {
-        return this.timeZone;
-    };
-    return TimeService;
-}());
-var getMomentTz = function () { return moment$2; };
-var dxtServerTimeZone = function () {
-    return TimeService.getInstance().getServerTimeZone;
-};
-var dxtToUTC = TimeService.getInstance().toUTC;
-var dxtToLocalServerTime = TimeService.getInstance().toLocalServerTime;
-
-var LogsInitialState = {
-    logs: [],
-    searchData: {
-        Start: moment$3().add(-5, "days").hour(0).minute(0).second(0).toDate(),
-        End: moment$3().hour(23).minute(59).second(59).toDate(),
-        Search: "",
-        LogTypeCode: "A",
-    },
-    Timezone: "UTC",
-};
-var LogsReducer = createSlice({
-    name: "__",
-    initialState: LogsInitialState,
-    reducers: {
-        setLogs: function (state, _a) {
-            var payload = _a.payload;
-            state.logs = payload;
-        },
-        setSearchData: function (state, _a) {
-            var payload = _a.payload;
-            state.searchData = payload;
-        },
-        setStartFilter: function (state, _a) {
-            var payload = _a.payload;
-            state.searchData.Start = payload;
-        },
-        setEndFilter: function (state, _a) {
-            var payload = _a.payload;
-            state.searchData.End = payload;
-        },
-        setSearchFilter: function (state, _a) {
-            var payload = _a.payload;
-            state.searchData.Search = payload;
-        },
-        setLogTypeCodeFilter: function (state, _a) {
-            var payload = _a.payload;
-            state.searchData.LogTypeCode = payload;
-        },
-        resetFilters: function (state, _a) {
-            _a.payload;
-            state.searchData = {
-                Start: moment$3().add(-5, "days").hour(0).minute(0).second(0).toDate(),
-                End: moment$3().hour(23).minute(59).second(59).toDate(),
-                Search: "",
-                LogTypeCode: "A",
-            };
-        },
-        setTimezone: function (state, _a) {
-            var payload = _a.payload;
-            state.Timezone = payload;
-        },
-    },
-});
-
-var LogsContext = createContext({
-    state: LogsReducer.getInitialState(),
-    actions: LogsReducer.actions,
-});
-var useLogsContext = function () { return useContext(LogsContext); };
-var LogsProvider = function (_a) {
-    var children = _a.children;
-    var _b = useComplexState({
-        initialState: LogsReducer.getInitialState(),
-        reducers: LogsReducer.caseReducers,
-    }), state = _b[0], actions = _b[1];
-    return (React__default.createElement(LogsContext.Provider, { value: { state: state, actions: actions } }, children));
-};
-
 var LOG_TYPE_CODES = {
     A: { id: "A", description: "All" },
     I: { id: "I", color: "#3f51b5", description: "Info" },
@@ -3266,7 +3163,7 @@ var DateFilter = function (_a) {
         }
     };
     return (React__default.createElement(MuiPickersUtilsProvider, { utils: MomentUtils },
-        React__default.createElement(KeyboardDatePicker, { disableToolbar: true, variant: "inline", format: "MM/DD/yyyy", id: "date-picker-inline", autoOk: true, minDate: minDate, maxDate: maxDate || moment$3().toDate(), style: {
+        React__default.createElement(KeyboardDatePicker, { disableToolbar: true, variant: "inline", format: "MM/DD/yyyy", id: "date-picker-inline", autoOk: true, minDate: minDate, maxDate: maxDate || moment$2().toDate(), style: {
                 minWidth: "100%",
                 borderTopLeftRadius: 3,
                 borderTopRightRadius: 3,
@@ -3314,62 +3211,46 @@ 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();
 var useLogTableData = function () {
-    var _a;
-    var state = useLogsContext().state;
-    var getLogTypeByCodeId = function (logTypeCodeId) {
-        return get$1(LOG_TYPE_CODES, "".concat(logTypeCodeId, ".description"), " -");
-    };
     var backgroundColor = function (logTypeCode) {
         return get$1(LOG_TYPE_CODES, "".concat(logTypeCode[0], ".color"), "#BBBBBB");
     };
-    var rows = (_a = state.logs) === null || _a === void 0 ? void 0 : _a.map(function (_a) {
-        var LogId = _a.LogId, Timestamp = _a.Timestamp, Source = _a.Source, Message = _a.Message, LogTypeCode = _a.LogTypeCode, User = _a.User;
-        return ({
-            id: LogId,
-            Timestamp: state.Timezone === "UTC"
-                ? moment$1(Timestamp).utc().format("YYYY-MM-DD HH:mm:ss z")
-                : dxtToLocalServerTime(Timestamp, "yyyy-MM-dd HH:mm:ss z"),
-            Source: Source,
-            Message: isNil$1(Message) ? "" : Message.replaceAll("Added", " Added"),
-            LogTypeCode: getLogTypeByCodeId(LogTypeCode),
-            User: User,
-        });
-    });
     var columnDefs = useState([
         {
             field: "Timestamp",
@@ -3449,7 +3330,18 @@ var useLogTableData = function () {
             headerClass: "ag-header-cell-centered",
         },
     ])[0];
-    return { rows: rows, columnDefs: columnDefs };
+    return { columnDefs: columnDefs };
+};
+
+var CenteredLazyLoading = function () {
+    return (React__default.createElement("div", { style: {
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+        } },
+        React__default.createElement(LazyLoading, null)));
 };
 
 var useStyles$y = makeStyles(function (theme) { return ({
@@ -3518,19 +3410,44 @@ var useLogsOptionsFunctions = function (_a) {
     };
 };
 
-var TableLogs = function (_a) {
-    var isLoading = _a.isLoading; _a.rowData; var refreshData = _a.refreshData;
-    var _b = useLogsContext(), _c = _b.state, Timezone = _c.Timezone, _d = _c.searchData, Start = _d.Start, End = _d.End, Search = _d.Search, LogTypeCode = _d.LogTypeCode, _e = _b.actions, setLogTypeCodeFilter = _e.setLogTypeCodeFilter, setEndFilter = _e.setEndFilter, setStartFilter = _e.setStartFilter, setSearchFilter = _e.setSearchFilter, setTimezone = _e.setTimezone;
+var getLogTypeByCodeId = function (logTypeCodeId) {
+    return get(LOG_TYPE_CODES, "".concat(logTypeCodeId, ".description"), " -");
+};
+var TableLogs = function () {
     var classes = useStyles$y();
-    var gridStyle = useMemo(function () { return ({ height: "100%", width: "100%" }); }, []);
-    var _f = useState(null); _f[0]; var setGridAPI = _f[1];
-    var _g = useState(false), showLogModal = _g[0], setShowLogModal = _g[1];
-    var _h = useState(undefined), selectedLog = _h[0], setSelectedLog = _h[1];
-    var _j = useState(""), error = _j[0], setError = _j[1];
+    var _a = useState(moment$2().add(-5, "days").hour(0).minute(0).second(0).toDate()), startDate = _a[0], setStartDate = _a[1];
+    var _b = useState(moment$2().hour(23).minute(59).second(59).toDate()), endDate = _b[0], setEndDate = _b[1];
+    var _c = useState("UTC"), timezone = _c[0], setTimezone = _c[1];
+    var _d = useState(""), search = _d[0], setSearch = _d[1];
+    var _e = useState("A"), logTypeCode = _e[0], setLogTypeCode = _e[1];
+    var _f = useState(false), autoRefresh = _f[0], setAutoRefresh = _f[1];
+    var _g = useState(null), gridAPI = _g[0], setGridAPI = _g[1];
+    var _h = useState(""), error = _h[0], setError = _h[1];
+    var _j = useState(false), showLogModal = _j[0], setShowLogModal = _j[1];
+    var _k = useState(undefined), selectedLog = _k[0], setSelectedLog = _k[1];
+    var _l = useLogs({
+        startDate: startDate,
+        endDate: endDate,
+        logTypeCode: logTypeCode,
+        autoRefresh: autoRefresh,
+    }), rows = _l.data, isLoading = _l.isLoading, refetch = _l.refetch, isError = _l.isError, e = _l.error;
     var onGridReady = function (params) {
         setGridAPI(params.api);
     };
-    var _k = useLogTableData(), rows = _k.rows, columnDefs = _k.columnDefs;
+    var formattedRows = rows === null || rows === void 0 ? void 0 : rows.map(function (_a) {
+        var LogId = _a.LogId, Timestamp = _a.Timestamp, Source = _a.Source, Message = _a.Message, LogTypeCode = _a.LogTypeCode, User = _a.User;
+        return ({
+            id: LogId,
+            Timestamp: timezone === "UTC"
+                ? moment$2(Timestamp).utc().format("YYYY-MM-DD HH:mm:ss z")
+                : dxtToLocalServerTime(Timestamp, "yyyy-MM-dd HH:mm:ss z"),
+            Source: Source,
+            Message: isNil(Message) ? "" : Message.replaceAll("Added", " Added"),
+            LogTypeCode: getLogTypeByCodeId(LogTypeCode),
+            User: User,
+        });
+    });
+    var columnDefs = useLogTableData().columnDefs;
     var defaultColDef = useMemo(function () {
         return {
             sortable: true,
@@ -3539,58 +3456,24 @@ var TableLogs = function (_a) {
             wrapHeaderText: true,
         };
     }, []);
-    var _l = useContextMenuMESF(), showContextMenu = _l.showContextMenu, registerConfig = _l.registerConfig;
-    // Debounced search timer ref
-    var searchTimeoutRef = useRef(null);
-    // Store current values in ref to avoid closure issues
-    var currentValues = useRef({ Start: Start, End: End, Search: Search, LogTypeCode: LogTypeCode });
-    currentValues.current = { Start: Start, End: End, Search: Search, LogTypeCode: LogTypeCode };
-    // Auto search when Search filter changes (with debounce)
-    useEffect(function () {
-        if (searchTimeoutRef.current) {
-            clearTimeout(searchTimeoutRef.current);
-        }
-        searchTimeoutRef.current = setTimeout(function () {
-            var _a = currentValues.current, currentStart = _a.Start, currentEnd = _a.End, currentSearch = _a.Search, currentLogTypeCode = _a.LogTypeCode;
-            refreshData({
-                Start: currentStart,
-                End: currentEnd,
-                Search: currentSearch,
-                LogTypeCode: currentLogTypeCode,
-            });
-        }, 500);
-        return function () {
-            if (searchTimeoutRef.current) {
-                clearTimeout(searchTimeoutRef.current);
-            }
-        };
-    }, [Search]);
+    var _m = useContextMenuMESF(), showContextMenu = _m.showContextMenu, registerConfig = _m.registerConfig;
     var handleResetButtonClick = function () {
         resetFilter();
-        refreshData({
-            Start: moment$3().add(-5, "days").hour(0).minute(0).second(0).toDate(),
-            End: moment$3().hour(23).minute(59).second(59).toDate(),
-            Search: "",
-            LogTypeCode: "A",
-        });
+        setStartDate(moment$2().add(-5, "days").hour(0).minute(0).second(0).toDate());
+        setEndDate(moment$2().hour(23).minute(59).second(59).toDate());
+        setSearch("");
+        gridAPI === null || gridAPI === void 0 ? void 0 : gridAPI.setGridOption("quickFilterText", "");
+        setLogTypeCode("A");
+        refetch();
         setError("");
     };
-    var loadingOverlayComponent = useMemo(function () {
-        return (React.createElement("div", { style: {
-                width: "100%",
-                height: "100%",
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-            } },
-            React.createElement(LazyLoading, null)));
-    }, [isLoading]);
     // Btn reset data
     var resetFilter = function () {
-        setStartFilter(moment$3().add(-5, "days").hour(0).minute(0).second(0).toDate());
-        setEndFilter(moment$3().hour(23).minute(59).second(59).toDate());
-        setSearchFilter("");
-        setLogTypeCodeFilter("A");
+        setStartDate(moment$2().add(-5, "days").hour(0).minute(0).second(0).toDate());
+        setEndDate(moment$2().hour(23).minute(59).second(59).toDate());
+        setSearch("");
+        gridAPI === null || gridAPI === void 0 ? void 0 : gridAPI.setGridOption("quickFilterText", "");
+        setLogTypeCode("A");
         setSelectedLog(undefined);
     };
     var rowClicked = function (rowClickedEvent) {
@@ -3620,11 +3503,13 @@ var TableLogs = function (_a) {
         });
     }, []);
     useEffect(function () {
-        refreshData({ Start: Start, End: End, Search: Search, LogTypeCode: LogTypeCode }).then(function (r) { });
-    }, [Start, End, LogTypeCode]);
+        if (isError && e) {
+            setError(e.message);
+        }
+    }, [isError, e]);
     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 },
@@ -3632,98 +3517,108 @@ var TableLogs = function (_a) {
                         React.createElement(CardContent, { style: { padding: "6px !important", width: "100%" } },
                             React.createElement(Grid, { container: true, alignItems: "center", direction: "row", spacing: 1 },
                                 React.createElement(Grid, { item: true, md: 2, xs: 12 },
-                                    React.createElement(DateFilter, { label: "From", date: Start, setDate: setStartFilter, maxDate: End })),
+                                    React.createElement(DateFilter, { label: "From", date: startDate, setDate: function (date) {
+                                            return setStartDate(date || new Date());
+                                        }, maxDate: endDate !== null && endDate !== void 0 ? endDate : undefined })),
                                 React.createElement(Grid, { item: true, md: 2, xs: 12 },
-                                    React.createElement(DateFilter, { label: "To", date: End, setDate: setEndFilter, minDate: Start })),
+                                    React.createElement(DateFilter, { label: "To", date: endDate, setDate: function (date) {
+                                            if (date) {
+                                                setEndDate(date);
+                                                setAutoRefresh(false);
+                                            }
+                                        }, minDate: startDate })),
                                 React.createElement(Grid, { item: true, md: 1, xs: 12 },
-                                    React.createElement(CodeFilter, { LogTypeCode: LogTypeCode, setLogTypeCodeFilter: setLogTypeCodeFilter })),
-                                React.createElement(Grid, { item: true, md: 2, xs: 12 },
-                                    React.createElement(TimezoneSelector, { value: Timezone, onChange: setTimezone })),
+                                    React.createElement(CodeFilter, { LogTypeCode: logTypeCode, setLogTypeCodeFilter: setLogTypeCode })),
+                                React.createElement(Grid, { item: true, md: 1, xs: 12 },
+                                    React.createElement(TimezoneSelector, { value: timezone, onChange: setTimezone })),
+                                React.createElement(Grid, { item: true, md: 1, xs: 12 },
+                                    React.createElement(FormControlLabel, { checked: autoRefresh, control: React.createElement(Switch, { color: "primary" }), label: "Auto Refresh", onChange: function (e, checked) {
+                                            if (checked) {
+                                                setEndDate(null);
+                                            }
+                                            else {
+                                                setEndDate(moment$2().hour(23).minute(59).second(59).toDate());
+                                            }
+                                            setAutoRefresh(checked);
+                                        } })),
                                 React.createElement(Grid, { item: true, md: 4, xs: 12 },
-                                    React.createElement(SearchFilter, { search: Search, setSearch: setSearchFilter })),
+                                    React.createElement(SearchFilter, { search: search, setSearch: function (search) {
+                                            setSearch(search);
+                                            gridAPI === null || gridAPI === void 0 ? void 0 : gridAPI.setGridOption("quickFilterText", search);
+                                        } })),
                                 React.createElement(Grid, { item: true, md: 1, xs: 12, style: { paddingTop: 8 } },
                                     React.createElement(Button, { variant: "contained", color: "default", onClick: handleResetButtonClick, fullWidth: true, size: "small" }, "Reset")))))),
                 React.createElement(Grid, { item: true, md: 12, xs: 12, style: {
                         height: "70vh",
                     } },
-                    React.createElement(Paper, { style: gridStyle },
-                        React.createElement(AgGridReact, { gridOptions: {
+                    React.createElement(Paper, { style: { height: "100%", width: "100%" } },
+                        React.createElement(AgGridReact, { loading: isLoading, gridOptions: {
                                 theme: themeMaterial.withParams({
                                     spacing: 2,
                                 }),
-                            }, rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, onGridReady: onGridReady, getRowId: function (params) { return params.data.id; }, rowHeight: 34, headerHeight: 40, animateRows: true, loadingOverlayComponent: loadingOverlayComponent, getContextMenuItems: function (e) { return getContextMenuItems(e); }, rowSelection: "single", onRowDoubleClicked: function (e) {
+                            }, rowData: formattedRows, columnDefs: columnDefs, defaultColDef: defaultColDef, onGridReady: onGridReady, getRowId: function (params) { return params.data.id; }, rowHeight: 34, headerHeight: 40, animateRows: true, loadingOverlayComponent: CenteredLazyLoading, getContextMenuItems: function (e) { return getContextMenuItems(e); }, rowSelection: "single", onRowDoubleClicked: function (e) {
                                 rowClicked(e);
                             } }))))),
         React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
+var moment = getMomentTz();
 //fx obtener logs
-var getLogs = function (Start, End, Search, LogTypeCode) { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, parameters, resp;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
+var getLogs = function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
+    var apiService, tomorrow, end, parameters, resp, rows;
+    var startDate = _b.startDate, endDate = _b.endDate, logTypeCode = _b.logTypeCode;
+    return __generator(this, function (_c) {
+        switch (_c.label) {
             case 0:
                 apiService = new MESApiService();
-                parameters = [];
-                parameters.push({ name: "Start", value: Start });
-                parameters.push({ name: "End", value: End });
-                parameters.push({ name: "Search", value: Search });
-                parameters.push({
-                    name: "LogTypeCode",
-                    value: LogTypeCode === "A" ? null : LogTypeCode,
-                });
+                tomorrow = new Date();
+                tomorrow.setDate(tomorrow.getDate() + 1);
+                end = endDate ? endDate : tomorrow;
+                parameters = [
+                    { name: "Start", value: startDate },
+                    { name: "End", value: end },
+                    {
+                        name: "LogTypeCode",
+                        value: logTypeCode === "A" ? null : logTypeCode,
+                    },
+                ];
                 return [4 /*yield*/, apiService.callV2("[MES].[GetLogs]", parameters)];
             case 1:
-                resp = _a.sent();
-                return [2 /*return*/, resp];
+                resp = _c.sent();
+                if (resp.ok) {
+                    rows = get(resp, "data.tables[0].rows", []);
+                    rows = rows.map(function (log) { return (__assign(__assign({}, log), { Timestamp: log.Timestamp ? moment.utc(log["Timestamp"]).toDate() : null })); });
+                    return [2 /*return*/, rows];
+                }
+                else {
+                    throw new Error(resp.message || "Error fetching logs");
+                }
         }
     });
 }); };
 
-var moment = getMomentTz();
+var useLogs = function (_a) {
+    var startDate = _a.startDate, endDate = _a.endDate, logTypeCode = _a.logTypeCode, autoRefresh = _a.autoRefresh;
+    return useQuery({
+        queryKey: ["logs", startDate, endDate, logTypeCode],
+        queryFn: function () {
+            return getLogs({
+                startDate: startDate,
+                endDate: endDate,
+                logTypeCode: logTypeCode,
+            });
+        },
+        refetchInterval: autoRefresh ? 5000 : false,
+    });
+};
 var Logs = function (prop) {
-    var _a = useState(true), loading = _a[0], setLoading = _a[1];
-    var _b = useState(""), error = _b[0], setError = _b[1];
-    var _c = useLogsContext(), _d = _c.state.searchData, Start = _d.Start, End = _d.End, Search = _d.Search, LogTypeCode = _d.LogTypeCode, state = _c.state, actions = _c.actions;
-    var getLogsFromAPI = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var canceled, res, logs;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    canceled = false;
-                    setLoading(true);
-                    return [4 /*yield*/, getLogs(Start, End, Search, LogTypeCode)];
-                case 1:
-                    res = _a.sent();
-                    if (res.ok) {
-                        logs = get(res, "data.tables[0].rows", []);
-                        if (canceled)
-                            return [2 /*return*/];
-                        logs = logs.map(function (log) { return (__assign(__assign({}, log), { Timestamp: moment.utc(log["Timestamp"]).toDate() })); });
-                        actions.setLogs(logs);
-                    }
-                    else
-                        setError(res.message);
-                    if (canceled)
-                        return [2 /*return*/];
-                    setLoading(false);
-                    return [2 /*return*/, function () {
-                            canceled = true;
-                        }];
-            }
-        });
-    }); };
-    useEffect(function () {
-        getLogsFromAPI();
-    }, []);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(TableLogs, { isLoading: loading, rowData: state.logs, refreshData: getLogsFromAPI }),
-        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
+        React__default.createElement(HelmetDexteel, { title: "MES and System Logs" }),
+        React__default.createElement(TableLogs, null)));
 };
 
 var LogsPage = function (props) {
-    return (React.createElement(LogsProvider, null,
-        React.createElement(Logs, null)));
+    return React.createElement(Logs, null);
 };
 
 var Alert = function (props) {
@@ -3849,7 +3744,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 +3784,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 +3807,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 +3849,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 +3995,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 +4076,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 +4417,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 +4462,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 +4601,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 +4658,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 +4830,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 +4887,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 +4996,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 +5062,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" },
@@ -5407,7 +5309,7 @@ var useTableData$2 = function (_a) {
             headerName: "Pattern Start",
             valueFormatter: function (_a) {
                 var value = _a.value;
-                return "".concat(moment$3(value).format("L"), ", ").concat(moment$3(value).format("LTS"));
+                return "".concat(moment$2(value).format("L"), ", ").concat(moment$2(value).format("LTS"));
             },
             minWidth: 180,
             flex: 4,
@@ -5610,17 +5512,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 +5570,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 +5994,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 +6073,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 +6175,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 +6241,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 +6341,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 +6382,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 +6452,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 +6478,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 +7207,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 +7544,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 +7596,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 +7646,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 +7725,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 +8119,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 +8212,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 +8592,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 +8641,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) {
@@ -9022,7 +8939,7 @@ var MESApiService = /** @class */ (function () {
                 data.dataBaseName = database;
                 data.parameters = formattedParameters;
                 Date.prototype.toJSON = function () {
-                    return moment$3(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$2(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/Execute", {
@@ -9061,10 +8978,9 @@ var MESApiService = /** @class */ (function () {
             });
         });
     };
-    MESApiService.prototype.callV2 = function (procedure_1, parameters_1) {
-        return __awaiter(this, arguments, void 0, function (procedure, parameters, database) {
+    MESApiService.prototype.callV2 = function (procedure, parameters, signal) {
+        return __awaiter(this, void 0, void 0, function () {
             var data, formattedParameters, curatedMethod, response, err_1;
-            if (database === void 0) { database = ""; }
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -9080,16 +8996,16 @@ var MESApiService = /** @class */ (function () {
                             formattedParameters.push(formattedParameter);
                         });
                         data.method = procedure;
-                        data.dataBaseName = database;
                         data.parameters = formattedParameters;
                         Date.prototype.toJSON = function () {
-                            return moment$3(this).format("YYYY-MM-DDTHH:mm:ss");
+                            return moment$2(this).format("YYYY-MM-DDTHH:mm:ss");
                         }; // eslint-disable-line
                         curatedMethod = procedure.replace(/[\[\]]/g, "");
                         _a.label = 1;
                     case 1:
                         _a.trys.push([1, 3, , 4]);
                         return [4 /*yield*/, axiosInstance.post("/action/".concat(curatedMethod), data, {
+                                signal: signal,
                                 params: data.parameters.map(function (param) {
                                     var _a, _b;
                                     var mapKey = param.name.replace("@", "");
@@ -9137,7 +9053,7 @@ var MESApiService = /** @class */ (function () {
                 data.dataBaseName = database;
                 data.parameters = formattedParameters;
                 Date.prototype.toJSON = function () {
-                    return moment$3(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$2(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/ExecuteJSON", {
@@ -9194,7 +9110,7 @@ var MESApiService = /** @class */ (function () {
                     formattedParameters.push(formattedParameter);
                 });
                 Date.prototype.toJSON = function () {
-                    return moment$3(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$2(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 files.forEach(function (element) {
@@ -9261,7 +9177,7 @@ var MESApiService = /** @class */ (function () {
                 data.parameters = formattedParameters;
                 data.fileName = fileName || "Default.xlsx";
                 Date.prototype.toJSON = function () {
-                    return moment$3(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$2(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/Export", {
@@ -9339,7 +9255,7 @@ var MESApiService = /** @class */ (function () {
                 data.parameters = formattedParameters;
                 data.fileName = fileName || "Default.xlsx";
                 Date.prototype.toJSON = function () {
-                    return moment$3(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$2(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/ExportExcel", {
@@ -9410,6 +9326,70 @@ var MESApiService = /** @class */ (function () {
     return MESApiService;
 }());
 
+var TimeService = /** @class */ (function () {
+    function TimeService() {
+        this.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    }
+    TimeService.getInstance = function () {
+        if (!TimeService.instance) {
+            TimeService.instance = new TimeService();
+        }
+        return TimeService.instance;
+    };
+    TimeService.prototype.setTimeZone = function (timeZone) {
+        var ianaTimeZones = findIana(timeZone);
+        if (ianaTimeZones.length) {
+            this.timeZone = ianaTimeZones[0];
+        }
+        else {
+            this.timeZone = timeZone;
+        }
+        moment$1.tz.setDefault(this.timeZone);
+    };
+    TimeService.prototype.toUTC = function (datetime, format$1) {
+        try {
+            if (datetime instanceof Date) {
+                return format(datetime, format$1);
+            }
+            return format(fromZonedTime(datetime, TimeService.instance.timeZone), format$1);
+        }
+        catch (e) {
+            console.log({ datetime: datetime, e: e });
+            return "";
+        }
+    };
+    TimeService.prototype.toLocalServerTime = function (datetime, format) {
+        try {
+            if (isNil(datetime) || !datetime) {
+                return "";
+            }
+            if (typeof datetime === "string") {
+                if (datetime.includes("Z")) {
+                    datetime = new Date(datetime);
+                }
+                else {
+                    datetime = new Date("".concat(datetime, "Z"));
+                }
+            }
+            return formatInTimeZone(datetime, TimeService.instance.timeZone, format);
+        }
+        catch (e) {
+            console.log({ datetime: datetime, e: e });
+            return "";
+        }
+    };
+    TimeService.prototype.getServerTimeZone = function () {
+        return this.timeZone;
+    };
+    return TimeService;
+}());
+var getMomentTz = function () { return moment$1; };
+var dxtServerTimeZone = function () {
+    return TimeService.getInstance().getServerTimeZone;
+};
+var dxtToUTC = TimeService.getInstance().toUTC;
+var dxtToLocalServerTime = TimeService.getInstance().toLocalServerTime;
+
 var getUsers = function () { return __awaiter(void 0, void 0, void 0, function () {
     var apiService, resp;
     return __generator(this, function (_a) {
@@ -9560,7 +9540,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 +9564,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 +9749,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("");
             } }),
@@ -10423,51 +10406,43 @@ function Logout() {
     var clearUserData = useContext(AuthContext).clearUserData;
     var navigate = useNavigate();
     var _a = useSearchParams(), params = _a[0]; _a[1];
+    var _b = useState(""), message = _b[0], setMessage = _b[1];
     var logout = function () {
+        // Clear any auto-logout data from localStorage
+        localStorage.removeItem("shiftAutoLogout");
         clearUserData();
-        navigate("/?".concat(params.toString()));
+        // Check if there's a message parameter
+        var messageParam = params.get("message");
+        if (messageParam) {
+            // Remove message from params before redirecting
+            var newParams = new URLSearchParams(params);
+            newParams.delete("message");
+            navigate("/?".concat(newParams.toString()));
+        }
+        else {
+            navigate("/?".concat(params.toString()));
+        }
     };
     useEffect(function () {
-        logout();
+        // Check for message parameter
+        var messageParam = params.get("message");
+        if (messageParam) {
+            setMessage(decodeURIComponent(messageParam));
+        }
+        // Perform logout after a brief delay to show the message
+        var timer = setTimeout(function () {
+            logout();
+        }, message ? 2000 : 0);
+        return function () { return clearTimeout(timer); };
     }, []);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", null, "logging out!!!")));
+        React__default.createElement(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", minHeight: "100vh" },
+            message && (React__default.createElement(Alert$2, { severity: "info", style: { marginBottom: 20 } },
+                React__default.createElement(AlertTitle, null, "Session Ended"),
+                React__default.createElement(Typography$1, null, message))),
+            React__default.createElement(Typography$1, { variant: "h6" }, "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,39 +10503,206 @@ var TimeAndUserMenu = function (_a) {
             React__default.createElement(MenuItem, { component: "a", href: "logout" }, "Logout"))));
 };
 
-var AreaSelector$1 = lazy(function () {
-    return Promise.resolve().then(function () { return areaSelector; }).then(function (mod) { return ({
-        default: mod.AreaSelector,
-    }); });
-});
-var useStyles$5 = makeStyles(function (theme) { return ({
-    appBar: {
-        // You can use dark or light variants of the primary color
-        // backgroundColor: theme.palette.primary.dark,  // Darker shade
-        backgroundColor: theme.palette.primary.main, // Lighter shade
-        // Or use a specific opacity
-        // backgroundColor: alpha(theme.palette.primary.main, 0.9),  // 90% opacity
-    },
-    title: {
-        flexGrow: 0,
-        marginRight: theme.spacing(2),
-        textDecoration: "none",
-        color: "white",
-        textWrap: "nowrap",
-    },
-    navContainer: {
-        display: "flex",
-        flexGrow: 1,
-        "& a": {
-            color: "white",
+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;
         },
-    },
-    rightItems: {
-        display: "flex",
-        alignItems: "center",
-        color: "white",
-    },
-    menuButton: {
+        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,
+    }); });
+});
+var useStyles$5 = makeStyles(function (theme) { return ({
+    appBar: {
+        // You can use dark or light variants of the primary color
+        // backgroundColor: theme.palette.primary.dark,  // Darker shade
+        backgroundColor: theme.palette.primary.main, // Lighter shade
+        // Or use a specific opacity
+        // backgroundColor: alpha(theme.palette.primary.main, 0.9),  // 90% opacity
+    },
+    title: {
+        flexGrow: 0,
+        marginRight: theme.spacing(2),
+        textDecoration: "none",
+        color: "white",
+        textWrap: "nowrap",
+    },
+    navContainer: {
+        display: "flex",
+        flexGrow: 1,
+        "& a": {
+            color: "white",
+        },
+    },
+    rightItems: {
+        display: "flex",
+        alignItems: "center",
+        color: "white",
+    },
+    menuButton: {
         marginRight: theme.spacing(2),
         color: "white",
     },
@@ -10783,26 +10925,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 +11080,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 +11429,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 +11473,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 +11536,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 +11584,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 +11641,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 +11689,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 +11816,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 +11864,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(""); } })));
@@ -11926,7 +12079,7 @@ const FORMATS = {
   year: 'YYYY'
 };
 
-_adapters._date.override(typeof moment$3 === 'function' ? {
+_adapters._date.override(typeof moment$2 === 'function' ? {
   _id: 'moment', // DEBUG ONLY
 
   formats: function() {
@@ -11935,27 +12088,27 @@ _adapters._date.override(typeof moment$3 === 'function' ? {
 
   parse: function(value, format) {
     if (typeof value === 'string' && typeof format === 'string') {
-      value = moment$3(value, format);
-    } else if (!(value instanceof moment$3)) {
-      value = moment$3(value);
+      value = moment$2(value, format);
+    } else if (!(value instanceof moment$2)) {
+      value = moment$2(value);
     }
     return value.isValid() ? value.valueOf() : null;
   },
 
   format: function(time, format) {
-    return moment$3(time).format(format);
+    return moment$2(time).format(format);
   },
 
   add: function(time, amount, unit) {
-    return moment$3(time).add(amount, unit).valueOf();
+    return moment$2(time).add(amount, unit).valueOf();
   },
 
   diff: function(max, min, unit) {
-    return moment$3(max).diff(moment$3(min), unit);
+    return moment$2(max).diff(moment$2(min), unit);
   },
 
   startOf: function(time, unit, weekday) {
-    time = moment$3(time);
+    time = moment$2(time);
     if (unit === 'isoWeek') {
       weekday = Math.trunc(Math.min(Math.max(0, weekday), 6));
       return time.isoWeekday(weekday).startOf('day').valueOf();
@@ -11964,7 +12117,7 @@ _adapters._date.override(typeof moment$3 === 'function' ? {
   },
 
   endOf: function(time, unit) {
-    return moment$3(time).endOf(unit).valueOf();
+    return moment$2(time).endOf(unit).valueOf();
   }
 } : {});
 
@@ -12057,15 +12210,8 @@ 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(),
+    timeScopeStart: moment$2(new Date()).subtract(1, "days").toDate(),
     timeScopeEnd: new Date(),
     scope: "1 day",
     graphPan: false,
@@ -12105,32 +12251,32 @@ var TrendingsReducer = createSlice({
                 if (payload.scope !== "custom") {
                     switch (payload.scope) {
                         case "10 min":
-                            state.timeScopeStart = moment$3(state.timeScopeEnd)
+                            state.timeScopeStart = moment$2(state.timeScopeEnd)
                                 .subtract(10, "minutes")
                                 .toDate();
                             break;
                         case "1 hour":
-                            state.timeScopeStart = moment$3(state.timeScopeEnd)
+                            state.timeScopeStart = moment$2(state.timeScopeEnd)
                                 .subtract(1, "hours")
                                 .toDate();
                             break;
                         case "4 hours":
-                            state.timeScopeStart = moment$3(state.timeScopeEnd)
+                            state.timeScopeStart = moment$2(state.timeScopeEnd)
                                 .subtract(4, "hours")
                                 .toDate();
                             break;
                         case "12 hours":
-                            state.timeScopeStart = moment$3(state.timeScopeEnd)
+                            state.timeScopeStart = moment$2(state.timeScopeEnd)
                                 .subtract(12, "hours")
                                 .toDate();
                             break;
                         case "1 day":
-                            state.timeScopeStart = moment$3(state.timeScopeEnd)
+                            state.timeScopeStart = moment$2(state.timeScopeEnd)
                                 .subtract(1, "days")
                                 .toDate();
                             break;
                         case "10 days":
-                            state.timeScopeStart = moment$3(state.timeScopeEnd)
+                            state.timeScopeStart = moment$2(state.timeScopeEnd)
                                 .subtract(10, "days")
                                 .toDate();
                             break;
@@ -12161,32 +12307,32 @@ var TrendingsReducer = createSlice({
                 if (state.scope !== "custom") {
                     switch (state.scope) {
                         case "10 min":
-                            state.timeScopeEnd = moment$3(payload.start)
+                            state.timeScopeEnd = moment$2(payload.start)
                                 .add(10, "minutes")
                                 .toDate();
                             break;
                         case "1 hour":
-                            state.timeScopeEnd = moment$3(payload.start)
+                            state.timeScopeEnd = moment$2(payload.start)
                                 .add(1, "hours")
                                 .toDate();
                             break;
                         case "4 hours":
-                            state.timeScopeEnd = moment$3(payload.start)
+                            state.timeScopeEnd = moment$2(payload.start)
                                 .add(4, "hours")
                                 .toDate();
                             break;
                         case "12 hours":
-                            state.timeScopeEnd = moment$3(payload.start)
+                            state.timeScopeEnd = moment$2(payload.start)
                                 .add(12, "hours")
                                 .toDate();
                             break;
                         case "1 day":
-                            state.timeScopeEnd = moment$3(payload.start)
+                            state.timeScopeEnd = moment$2(payload.start)
                                 .add(1, "days")
                                 .toDate();
                             break;
                         case "10 days":
-                            state.timeScopeEnd = moment$3(payload.start)
+                            state.timeScopeEnd = moment$2(payload.start)
                                 .add(10, "days")
                                 .toDate();
                             break;
@@ -12199,32 +12345,32 @@ var TrendingsReducer = createSlice({
                 if (state.scope !== "custom") {
                     switch (state.scope) {
                         case "10 min":
-                            state.timeScopeStart = moment$3(payload.end)
+                            state.timeScopeStart = moment$2(payload.end)
                                 .subtract(10, "minutes")
                                 .toDate();
                             break;
                         case "1 hour":
-                            state.timeScopeStart = moment$3(payload.end)
+                            state.timeScopeStart = moment$2(payload.end)
                                 .subtract(1, "hours")
                                 .toDate();
                             break;
                         case "4 hours":
-                            state.timeScopeStart = moment$3(payload.end)
+                            state.timeScopeStart = moment$2(payload.end)
                                 .subtract(4, "hours")
                                 .toDate();
                             break;
                         case "12 hours":
-                            state.timeScopeStart = moment$3(payload.end)
+                            state.timeScopeStart = moment$2(payload.end)
                                 .subtract(12, "hours")
                                 .toDate();
                             break;
                         case "1 day":
-                            state.timeScopeStart = moment$3(payload.end)
+                            state.timeScopeStart = moment$2(payload.end)
                                 .subtract(1, "days")
                                 .toDate();
                             break;
                         case "10 days":
-                            state.timeScopeStart = moment$3(payload.end)
+                            state.timeScopeStart = moment$2(payload.end)
                                 .subtract(10, "days")
                                 .toDate();
                             break;
@@ -14183,21 +14329,21 @@ var dateNavigator = function (startDate, endDate, scope, operator, current) {
         }
         else {
             var _a = scope.split(" "), quantity = _a[0], duration = _a[1];
-            newStartDate = moment$3(newEndDate)
+            newStartDate = moment$2(newEndDate)
                 .subtract(quantity, duration[0])
                 .toDate();
         }
     }
     else {
         if (scope === "custom") {
-            var durationInMs = moment$3(endDate).diff(moment$3(startDate));
-            newStartDate = moment$3(startDate)[operator](durationInMs).toDate();
+            var durationInMs = moment$2(endDate).diff(moment$2(startDate));
+            newStartDate = moment$2(startDate)[operator](durationInMs).toDate();
         }
         else {
             var _b = scope.split(" "), quantity = _b[0], duration = _b[1];
-            newStartDate = moment$3(startDate)[operator](quantity, duration[0])
+            newStartDate = moment$2(startDate)[operator](quantity, duration[0])
                 .toDate();
-            newEndDate = moment$3(endDate)[operator](quantity, duration[0])
+            newEndDate = moment$2(endDate)[operator](quantity, duration[0])
                 .toDate();
         }
     }
@@ -14226,7 +14372,7 @@ var Header = function (_a) {
     var handleDateChange = function (newValue, key) {
         var _a;
         //@ts-ignore
-        actions.setTotalScope((_a = {}, _a[key] = moment$3(newValue).toDate(), _a));
+        actions.setTotalScope((_a = {}, _a[key] = moment$2(newValue).toDate(), _a));
     };
     var handleChangeScope = function (e) {
         var newScope = e.target.value;
@@ -14262,7 +14408,7 @@ var Header = function (_a) {
                 React__default.createElement(IconButton$1, { color: "primary", onClick: function () { return handleDateNavigator("subtract"); }, className: classes.navigatorButton },
                     React__default.createElement(ChevronLeft, { fontSize: "large" }))),
             React__default.createElement(Grid, { item: true },
-                React__default.createElement(TextField, { type: "datetime-local", className: classes.datetimePicker, label: "Start", variant: "outlined", value: moment$3(state.timeScopeStart).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "start"); }, InputLabelProps: {
+                React__default.createElement(TextField, { type: "datetime-local", className: classes.datetimePicker, label: "Start", variant: "outlined", value: moment$2(state.timeScopeStart).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "start"); }, InputLabelProps: {
                         shrink: true,
                         style: { marginLeft: "10px" },
                     }, InputProps: {
@@ -14279,7 +14425,7 @@ var Header = function (_a) {
                         React__default.createElement(MenuItem, { value: "10 days" }, "10 days"),
                         React__default.createElement(MenuItem, { value: "custom" }, "Custom")))),
             React__default.createElement(Grid, { item: true },
-                React__default.createElement(TextField, { label: "End", variant: "outlined", className: classes.datetimePicker, type: "datetime-local", value: moment$3(state.timeScopeEnd).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "end"); }, InputLabelProps: {
+                React__default.createElement(TextField, { label: "End", variant: "outlined", className: classes.datetimePicker, type: "datetime-local", value: moment$2(state.timeScopeEnd).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "end"); }, InputLabelProps: {
                         shrink: true,
                         style: { marginLeft: "10px" },
                     } })),
@@ -14809,6 +14955,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,84 +15033,6 @@ var Navigation = function (_a) {
         React__default.createElement(MESFMainContainer, null)));
 };
 
-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 ProvidersLoader = function (_a) {
     var children = _a.children;
     var isUsersLoading = useUserContext().isLoading;
@@ -14980,77 +15049,40 @@ var ProvidersLoader = function (_a) {
     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$1.tz.setDefault(timezone);
+var base = document.getElementsByTagName("base")[0].getAttribute("href") || "/";
+var queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            refetchOnWindowFocus: false,
+            cacheTime: 1000 * 60,
         },
     },
 });
-
-var timezone = TimeService.getInstance().getServerTimeZone();
-moment$2.tz.setDefault(timezone);
-var base = document.getElementsByTagName("base")[0].getAttribute("href") || "/";
 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(QueryClientProvider, { client: queryClient },
+                    React__default.createElement(ThemeProvider, { theme: theme },
+                        React__default.createElement(AuthProvider, { authConfig: authentication },
+                            React__default.createElement(LocalizationProvider, { dateAdapter: AdapterMoment, dateLibInstance: moment$1 },
+                                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) {
@@ -15177,6 +15209,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 },
@@ -15202,5 +15235,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