@dexteel/mesf-core 5.13.1 → 5.14.1

package/dist/index.esm.js

@@ -10,16 +10,18 @@ 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 moment from 'moment';
+import { Alert as Alert$2, AlertTitle, Autocomplete } from '@material-ui/lab';
 import AccountCircleIcon from '@material-ui/icons/AccountCircle';
 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 { 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 { DndProvider } from 'react-dnd';
@@ -34,7 +36,6 @@ import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import MenuIcon from '@material-ui/icons/Menu';
 import Settings$1 from '@material-ui/icons/Settings';
 import ShowChartIcon from '@material-ui/icons/ShowChart';
-import { Alert as Alert$2, Autocomplete } from '@material-ui/lab';
 import SearchIcon from '@material-ui/icons/Search';
 import FormatListBulletedSharpIcon from '@material-ui/icons/FormatListBulletedSharp';
 import axios from 'axios';
@@ -1545,7 +1546,6 @@ var useShiftNavigatorManager = function () {
     var _a = useState(null), shiftInfo = _a[0], setShiftInfo = _a[1];
     var _b = useState(false); _b[0]; var setIsShiftInfoLoading = _b[1];
     var _c = useState(""); _c[0]; var setError = _c[1];
-    var moment = getMomentTz();
     var moveShift = function (direction) { return __awaiter(void 0, void 0, void 0, function () {
         var shiftId, resp, shift;
         return __generator(this, function (_a) {
@@ -1734,13 +1734,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];
@@ -1784,7 +1784,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 () { });
                     }
@@ -1866,8 +1866,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,
@@ -1952,13 +1952,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;
@@ -2114,8 +2114,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)];
@@ -2125,7 +2125,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;
@@ -2165,10 +2165,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",
@@ -2187,10 +2187,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",
@@ -2354,15 +2354,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,
@@ -2592,7 +2592,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",
@@ -2609,7 +2609,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",
@@ -2619,7 +2619,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",
@@ -2802,7 +2802,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(value).format("DD/MM/YYYY HH:mm");
             },
             flex: 1,
             cellStyle: {
@@ -3136,138 +3136,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" },
@@ -3294,7 +3162,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().toDate(), style: {
                 minWidth: "100%",
                 borderTopLeftRadius: 3,
                 borderTopRightRadius: 3,
@@ -3378,29 +3246,10 @@ var ModalLogSelected = function (_a) {
                             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",
@@ -3480,7 +3329,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 ({
@@ -3549,19 +3409,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().add(-5, "days").hour(0).minute(0).second(0).toDate()), startDate = _a[0], setStartDate = _a[1];
+    var _b = useState(moment().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(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,
@@ -3570,58 +3455,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().add(-5, "days").hour(0).minute(0).second(0).toDate());
+        setEndDate(moment().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().add(-5, "days").hour(0).minute(0).second(0).toDate());
+        setEndDate(moment().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) {
@@ -3651,8 +3502,10 @@ 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, suffixTitle: "MES and System Logs" }),
@@ -3663,99 +3516,107 @@ 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().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(""); } })));
 };
 
 //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(HelmetDexteel, { title: "MES and System Logs" }),
-        React__default.createElement(TableLogs, { isLoading: loading, rowData: state.logs, refreshData: getLogsFromAPI }),
-        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
+        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) {
@@ -5446,7 +5307,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(value).format("L"), ", ").concat(moment(value).format("LTS"));
             },
             minWidth: 180,
             flex: 4,
@@ -9076,7 +8937,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(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/Execute", {
@@ -9115,10 +8976,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:
@@ -9134,16 +8994,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(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("@", "");
@@ -9191,7 +9051,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(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/ExecuteJSON", {
@@ -9248,7 +9108,7 @@ var MESApiService = /** @class */ (function () {
                     formattedParameters.push(formattedParameter);
                 });
                 Date.prototype.toJSON = function () {
-                    return moment$3(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 files.forEach(function (element) {
@@ -9315,7 +9175,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(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/Export", {
@@ -9393,7 +9253,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(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/ExportExcel", {
@@ -9464,6 +9324,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) {
@@ -10480,15 +10404,41 @@ 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 useStyles$6 = makeStyles(function (theme) { return ({
@@ -12127,7 +12077,7 @@ const FORMATS = {
   year: 'YYYY'
 };
 
-_adapters._date.override(typeof moment$3 === 'function' ? {
+_adapters._date.override(typeof moment === 'function' ? {
   _id: 'moment', // DEBUG ONLY
 
   formats: function() {
@@ -12136,27 +12086,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(value, format);
+    } else if (!(value instanceof moment)) {
+      value = moment(value);
     }
     return value.isValid() ? value.valueOf() : null;
   },
 
   format: function(time, format) {
-    return moment$3(time).format(format);
+    return moment(time).format(format);
   },
 
   add: function(time, amount, unit) {
-    return moment$3(time).add(amount, unit).valueOf();
+    return moment(time).add(amount, unit).valueOf();
   },
 
   diff: function(max, min, unit) {
-    return moment$3(max).diff(moment$3(min), unit);
+    return moment(max).diff(moment(min), unit);
   },
 
   startOf: function(time, unit, weekday) {
-    time = moment$3(time);
+    time = moment(time);
     if (unit === 'isoWeek') {
       weekday = Math.trunc(Math.min(Math.max(0, weekday), 6));
       return time.isoWeekday(weekday).startOf('day').valueOf();
@@ -12165,7 +12115,7 @@ _adapters._date.override(typeof moment$3 === 'function' ? {
   },
 
   endOf: function(time, unit) {
-    return moment$3(time).endOf(unit).valueOf();
+    return moment(time).endOf(unit).valueOf();
   }
 } : {});
 
@@ -12259,7 +12209,7 @@ var ColorPicker = function (_a) {
 };
 
 var TrendingsInitialState = {
-    timeScopeStart: moment$3(new Date()).subtract(1, "days").toDate(),
+    timeScopeStart: moment(new Date()).subtract(1, "days").toDate(),
     timeScopeEnd: new Date(),
     scope: "1 day",
     graphPan: false,
@@ -12299,32 +12249,32 @@ var TrendingsReducer = createSlice({
                 if (payload.scope !== "custom") {
                     switch (payload.scope) {
                         case "10 min":
-                            state.timeScopeStart = moment$3(state.timeScopeEnd)
+                            state.timeScopeStart = moment(state.timeScopeEnd)
                                 .subtract(10, "minutes")
                                 .toDate();
                             break;
                         case "1 hour":
-                            state.timeScopeStart = moment$3(state.timeScopeEnd)
+                            state.timeScopeStart = moment(state.timeScopeEnd)
                                 .subtract(1, "hours")
                                 .toDate();
                             break;
                         case "4 hours":
-                            state.timeScopeStart = moment$3(state.timeScopeEnd)
+                            state.timeScopeStart = moment(state.timeScopeEnd)
                                 .subtract(4, "hours")
                                 .toDate();
                             break;
                         case "12 hours":
-                            state.timeScopeStart = moment$3(state.timeScopeEnd)
+                            state.timeScopeStart = moment(state.timeScopeEnd)
                                 .subtract(12, "hours")
                                 .toDate();
                             break;
                         case "1 day":
-                            state.timeScopeStart = moment$3(state.timeScopeEnd)
+                            state.timeScopeStart = moment(state.timeScopeEnd)
                                 .subtract(1, "days")
                                 .toDate();
                             break;
                         case "10 days":
-                            state.timeScopeStart = moment$3(state.timeScopeEnd)
+                            state.timeScopeStart = moment(state.timeScopeEnd)
                                 .subtract(10, "days")
                                 .toDate();
                             break;
@@ -12355,32 +12305,32 @@ var TrendingsReducer = createSlice({
                 if (state.scope !== "custom") {
                     switch (state.scope) {
                         case "10 min":
-                            state.timeScopeEnd = moment$3(payload.start)
+                            state.timeScopeEnd = moment(payload.start)
                                 .add(10, "minutes")
                                 .toDate();
                             break;
                         case "1 hour":
-                            state.timeScopeEnd = moment$3(payload.start)
+                            state.timeScopeEnd = moment(payload.start)
                                 .add(1, "hours")
                                 .toDate();
                             break;
                         case "4 hours":
-                            state.timeScopeEnd = moment$3(payload.start)
+                            state.timeScopeEnd = moment(payload.start)
                                 .add(4, "hours")
                                 .toDate();
                             break;
                         case "12 hours":
-                            state.timeScopeEnd = moment$3(payload.start)
+                            state.timeScopeEnd = moment(payload.start)
                                 .add(12, "hours")
                                 .toDate();
                             break;
                         case "1 day":
-                            state.timeScopeEnd = moment$3(payload.start)
+                            state.timeScopeEnd = moment(payload.start)
                                 .add(1, "days")
                                 .toDate();
                             break;
                         case "10 days":
-                            state.timeScopeEnd = moment$3(payload.start)
+                            state.timeScopeEnd = moment(payload.start)
                                 .add(10, "days")
                                 .toDate();
                             break;
@@ -12393,32 +12343,32 @@ var TrendingsReducer = createSlice({
                 if (state.scope !== "custom") {
                     switch (state.scope) {
                         case "10 min":
-                            state.timeScopeStart = moment$3(payload.end)
+                            state.timeScopeStart = moment(payload.end)
                                 .subtract(10, "minutes")
                                 .toDate();
                             break;
                         case "1 hour":
-                            state.timeScopeStart = moment$3(payload.end)
+                            state.timeScopeStart = moment(payload.end)
                                 .subtract(1, "hours")
                                 .toDate();
                             break;
                         case "4 hours":
-                            state.timeScopeStart = moment$3(payload.end)
+                            state.timeScopeStart = moment(payload.end)
                                 .subtract(4, "hours")
                                 .toDate();
                             break;
                         case "12 hours":
-                            state.timeScopeStart = moment$3(payload.end)
+                            state.timeScopeStart = moment(payload.end)
                                 .subtract(12, "hours")
                                 .toDate();
                             break;
                         case "1 day":
-                            state.timeScopeStart = moment$3(payload.end)
+                            state.timeScopeStart = moment(payload.end)
                                 .subtract(1, "days")
                                 .toDate();
                             break;
                         case "10 days":
-                            state.timeScopeStart = moment$3(payload.end)
+                            state.timeScopeStart = moment(payload.end)
                                 .subtract(10, "days")
                                 .toDate();
                             break;
@@ -14377,21 +14327,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(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(endDate).diff(moment(startDate));
+            newStartDate = moment(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(startDate)[operator](quantity, duration[0])
                 .toDate();
-            newEndDate = moment$3(endDate)[operator](quantity, duration[0])
+            newEndDate = moment(endDate)[operator](quantity, duration[0])
                 .toDate();
         }
     }
@@ -14420,7 +14370,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(newValue).toDate(), _a));
     };
     var handleChangeScope = function (e) {
         var newScope = e.target.value;
@@ -14456,7 +14406,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(state.timeScopeStart).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "start"); }, InputLabelProps: {
                         shrink: true,
                         style: { marginLeft: "10px" },
                     }, InputProps: {
@@ -14473,7 +14423,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(state.timeScopeEnd).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "end"); }, InputLabelProps: {
                         shrink: true,
                         style: { marginLeft: "10px" },
                     } })),
@@ -15098,30 +15048,39 @@ var ProvidersLoader = function (_a) {
 };
 
 var timezone = TimeService.getInstance().getServerTimeZone();
-moment$2.tz.setDefault(timezone);
+moment$1.tz.setDefault(timezone);
 var base = document.getElementsByTagName("base")[0].getAttribute("href") || "/";
+var queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            refetchOnWindowFocus: false,
+            cacheTime: 1000 * 60,
+        },
+    },
+});
 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(HelmetProvider, null,
             React__default.createElement(HelmetDexteelProvider, { navbarTitle: navbarTitle },
-                React__default.createElement(ThemeProvider, { theme: theme },
-                    React__default.createElement(AuthProvider, { authConfig: authentication },
-                        React__default.createElement(LocalizationProvider, { dateAdapter: AdapterMoment, dateLibInstance: moment$2 },
-                            React__default.createElement(UserProvider, null,
-                                React__default.createElement(UTLSettingsProvider, null,
-                                    React__default.createElement(ProvidersLoader, null,
-                                        React__default.createElement(AssetProvider, { plantAssetId: plantAssetId },
-                                            React__default.createElement(RouterContext.Provider, { value: routes },
-                                                React__default.createElement(NavbarContext.Provider, { value: navbar },
-                                                    React__default.createElement(ConfigurationContext.Provider, { value: configurations },
-                                                        React__default.createElement(ShiftNavigatorProvider, null,
-                                                            React__default.createElement(ContextMenuMESFProvider, null,
-                                                                React__default.createElement(BrowserRouter, { basename: base },
-                                                                    React__default.createElement(Routes, null,
-                                                                        React__default.createElement(Route, { path: "/logout", element: React__default.createElement(Logout, null) })),
-                                                                    React__default.createElement(Navigation, { showAreaSelector: showAreaSelector, showTrendingsIcon: showTrendingsIcon, navbarTitle: navbarTitle, byPassHeaderRoutes: byPassHeaderRoutes }))))))))))))))))));
+                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) {