@dexteel/mesf-core 5.4.0 → 5.4.2

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 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, SvgIcon, Collapse, Typography as Typography$1, Checkbox, TextField, InputAdornment, IconButton as IconButton$1, MenuItem, Box, Card, CardContent, CardActions, Paper, Tooltip, FormControl, InputLabel, Select, ListItemIcon, CircularProgress, Snackbar, FormControlLabel, Switch, FormHelperText, DialogContentText, Badge, useTheme, Input, Chip, CssBaseline, AppBar, Toolbar, Container, Menu, Hidden, Drawer, List, ListItem, ListItemText, useMediaQuery, Divider, ListSubheader, debounce, createTheme, ThemeProvider } from '@material-ui/core';
+import { withStyles, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, createStyles, Grid, Button, alpha, makeStyles, Dialog as Dialog$1, SvgIcon, Collapse, Typography as Typography$1, Checkbox, TextField, InputAdornment, IconButton as IconButton$1, MenuItem, Box, Card, CardContent, CardActions, Paper, Tooltip, FormControl, InputLabel, Select, ListItemIcon, CircularProgress, Snackbar, FormControlLabel, Switch, Chip, DialogContentText, Badge, useTheme, Input, CssBaseline, AppBar, Toolbar, Container, Menu, Hidden, Drawer, List, ListItem, ListItemText, useMediaQuery, Divider, ListSubheader, debounce, createTheme, ThemeProvider } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 import Alert$3 from '@material-ui/lab/Alert';
@@ -7,7 +7,7 @@ import * as React from 'react';
 import React__default, { useState, useRef, useEffect, useMemo, Component, createContext, useContext, useCallback, lazy, Suspense } from 'react';
 import { ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRight, ArrowRight, Send, Menu as Menu$1, People, Storage, Group, Assignment, Chat, Timeline, ViewList, Build, Settings as Settings$1 } from '@material-ui/icons';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import moment from 'moment-timezone';
+import moment$2 from 'moment-timezone';
 import { useParams, useNavigate, useSearchParams, Link, Navigate, Routes, Route, useLocation, BrowserRouter } from 'react-router-dom';
 import { values, get, isNil, isEmpty, round, isNaN, isNumber } from 'lodash-es';
 import { ClearIcon, DatePicker as DatePicker$1, CalendarIcon, DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
@@ -20,18 +20,18 @@ import { createSlice } from '@reduxjs/toolkit';
 import AccountCircleIcon from '@material-ui/icons/AccountCircle';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+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$1 from 'moment';
+import { isNil as isNil$1, get as get$1 } from 'lodash';
+import moment$3 from 'moment';
 import EditIcon from '@material-ui/icons/Edit';
 import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd';
-import { isNil as isNil$1, get as get$1 } from 'lodash';
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 export * from '@microsoft/signalr';
 import { Alert as Alert$2, Autocomplete } from '@material-ui/lab';
 import { useForm, Controller } from 'react-hook-form';
-import 'ag-grid-community/styles/ag-theme-material.min.css';
 import SearchIcon from '@material-ui/icons/Search';
 import DeleteIcon from '@material-ui/icons/Delete';
 import FormatListBulletedSharpIcon from '@material-ui/icons/FormatListBulletedSharp';
@@ -70,14 +70,10 @@ import PersonIcon from '@material-ui/icons/Person';
 import { LogLevel as LogLevel$1, PublicClientApplication } from '@azure/msal-browser';
 import { useMsal, MsalProvider } from '@azure/msal-react';
 import CloudIcon from '@material-ui/icons/Cloud';
-import 'ag-grid-community/styles/ag-grid.css';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import ReplayIcon from '@material-ui/icons/Replay';
 import ToggleOfIcon from '@material-ui/icons/ToggleOff';
 import ToggleOnIcon from '@material-ui/icons/ToggleOn';
-import 'ag-grid-enterprise/styles/ag-grid.css';
-import 'ag-grid-enterprise/styles/ag-theme-balham.min.css';
-import 'ag-grid-community/styles/ag-theme-material.css';
 import AddBoxIcon from '@material-ui/icons/AddBox';
 import FindInPageIcon from '@material-ui/icons/FindInPage';
 import DescriptionIcon from '@material-ui/icons/Description';
@@ -594,7 +590,7 @@ var ModalTreeFilterControl = function (props) {
             React__default.createElement(Button, { onClick: handleOk, color: "primary" }, "OK"))));
 };
 
-var useStyles$J = makeStyles(function (theme) { return ({
+var useStyles$I = makeStyles(function (theme) { return ({
     root: {
         width: "100%",
         backgroundColor: theme.palette.background.paper,
@@ -610,7 +606,7 @@ var useStyles$J = makeStyles(function (theme) { return ({
     },
 }); });
 var TreePickerControl = function (props) {
-    var classes = useStyles$J();
+    var classes = useStyles$I();
     var onSelect = props.onSelect, value = props.value; props.styleLabel; var dataSource = props.dataSource, _a = props.inputTitle, inputTitle = _a === void 0 ? "Asset" : _a; props.showPath; var _c = props.multipleSelectNodes, multipleSelectNodes = _c === void 0 ? false : _c, _d = props.showClearButton, showClearButton = _d === void 0 ? false : _d, showAssetTree = props.showAssetTree, onHide = props.onHide, _e = props.listAssetDrawings, listAssetDrawings = _e === void 0 ? [] : _e, onSuccess = props.onSuccess, isLoading = props.isLoading, other = __rest(props, ["onSelect", "value", "styleLabel", "dataSource", "inputTitle", "showPath", "multipleSelectNodes", "showClearButton", "showAssetTree", "onHide", "listAssetDrawings", "onSuccess", "isLoading"]);
     var _f = useState(showAssetTree || false), open = _f[0], setOpen = _f[1];
     var handleClickListItem = function (e) {
@@ -694,7 +690,7 @@ var TreePickerControl = function (props) {
                 }, onHide: onHide, id: "modal-treeview-filter", title: props.title, keepMounted: true, open: open, onClose: handleClose, isLoading: isLoading, value: value, data: dataSource, onBackdropClick: function () { return setOpen(false); }, multipleSelectNodes: multipleSelectNodes, listAssetDrawings: listAssetDrawings, setListAssetDrawings: listAssetDrawings, onSuccess: onSuccess }, other)))));
 };
 
-var useStyles$I = makeStyles(function (theme) { return ({
+var useStyles$H = makeStyles(function (theme) { return ({
     root: {
         width: "100%",
         backgroundColor: theme.palette.background.paper,
@@ -745,7 +741,7 @@ function getNodePath(node, nodeId, parentPath, isRoot) {
     return null;
 }
 var TreePickerControlV2 = function (props) {
-    var classes = useStyles$I();
+    var classes = useStyles$H();
     var value = props.value, onSelect = props.onSelect; props.styleLabel; var dataSource = props.dataSource; props.getOptionName; var _a = props.inputTitle, inputTitle = _a === void 0 ? "Asset" : _a; props.showPath; var _c = props.multipleSelectNodes, multipleSelectNodes = _c === void 0 ? false : _c, _d = props.showClearButton, showClearButton = _d === void 0 ? false : _d, _e = props.showFullPath, showFullPath = _e === void 0 ? false : _e, showAssetTree = props.showAssetTree, onHide = props.onHide, _f = props.listAssetDrawings, listAssetDrawings = _f === void 0 ? [] : _f, onSuccess = props.onSuccess, isLoading = props.isLoading, _g = props.disabled, disabled = _g === void 0 ? false : _g, other = __rest(props, ["value", "onSelect", "styleLabel", "dataSource", "getOptionName", "inputTitle", "showPath", "multipleSelectNodes", "showClearButton", "showFullPath", "showAssetTree", "onHide", "listAssetDrawings", "onSuccess", "isLoading", "disabled"]);
     var _h = useState(false), open = _h[0], setOpen = _h[1];
     var handleClickListItem = function (event) {
@@ -802,22 +798,6 @@ var TreePickerControlV2 = function (props) {
                 }, onHide: onHide, id: "modal-treeview-filter", title: props.title, keepMounted: true, open: open, onClose: handleClose, isLoading: isLoading, value: value, data: dataSource, onBackdropClick: function () { return setOpen(false); }, multipleSelectNodes: multipleSelectNodes, listAssetDrawings: listAssetDrawings, setListAssetDrawings: listAssetDrawings, onSuccess: onSuccess }, other)))));
 };
 
-var SimpleTextControl = /** @class */ (function (_super) {
-    __extends(SimpleTextControl, _super);
-    function SimpleTextControl() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SimpleTextControl.prototype.render = function () {
-        var _this = this;
-        return (React__default.createElement("div", { className: "input-group" },
-            React__default.createElement("div", { className: "input-group-prepend" },
-                React__default.createElement("span", { className: "input-group-text", style: this.props.styleLabel || {} }, this.props.title)),
-            React__default.createElement("input", { type: "text", className: "form-control " + (this.props.isNumeric ? "mes-numeric" : ""), placeholder: this.props.title, readOnly: this.props.readOnly, value: this.props.value || "", onChange: function (e) {
-                    return _this.props.onChange(e.target.value, _this.props.name || "");
-                }, style: this.props.styleTextBox || {}, maxLength: this.props.lengthCharacters || "" })));
-    };
-    return SimpleTextControl;
-}(Component));
 var SimplePasswordControl = /** @class */ (function (_super) {
     __extends(SimplePasswordControl, _super);
     function SimplePasswordControl() {
@@ -840,66 +820,6 @@ var formatNumber = function (value) {
         return "";
     return number.toString();
 };
-var NumericTextControl = function (props) {
-    var value = props.value, title = props.title, styleLabel = props.styleLabel, readOnly = props.readOnly, styleTextBox = props.styleTextBox, onChange = props.onChange, name = props.name, typeNumber = props.typeNumber; //typeNumber 1 = real, 2 = integer, 3 = natural
-    var _a = React__default.useState(formatNumber(value)), formattedValue = _a[0], setFormattedValue = _a[1];
-    var changedValue = function (e) {
-        setFormattedValue(e.target.value);
-    };
-    var valueBlured = function (inputValue) {
-        var number = Number(inputValue);
-        if (Number.isNaN(number))
-            setFormattedValue(formatNumber(value));
-        else if (typeNumber === 2 && !Number.isInteger(number))
-            setFormattedValue(formatNumber(value));
-        else if (typeNumber === 3 && (!Number.isInteger(number) || number < 0))
-            setFormattedValue(formatNumber(value));
-        else
-            onChange(number, name || "");
-    };
-    React__default.useEffect(function () {
-        setFormattedValue(formatNumber(value));
-    }, [value]); // eslint-disable-line react-hooks/exhaustive-deps
-    return (React__default.createElement("div", { className: "input-group" },
-        React__default.createElement("div", { className: "input-group-prepend" },
-            React__default.createElement("span", { className: "input-group-text", style: styleLabel || {} }, title)),
-        React__default.createElement("input", { type: "text", className: "form-control mes-numeric", placeholder: title, readOnly: readOnly, value: formattedValue || "", onChange: function (e) { return changedValue(e); }, onBlur: function (e) { return valueBlured(e.target.value); }, style: styleTextBox || {} })));
-};
-var HorizontalTextControl = /** @class */ (function (_super) {
-    __extends(HorizontalTextControl, _super);
-    function HorizontalTextControl() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    HorizontalTextControl.prototype.render = function () {
-        var _this = this;
-        return (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement("div", { className: "input-group" },
-                React__default.createElement("div", { className: "input-group-prepend" },
-                    React__default.createElement("span", { className: "input-group-text", style: this.props.styleLabel || {} }, this.props.title)),
-                React__default.createElement("input", { type: "text", className: "form-control " + (this.props.isNumeric ? "mes-numeric" : ""), placeholder: this.props.title, readOnly: this.props.readOnly, value: this.props.value || "", style: this.props.styleText || {}, onChange: function (e) {
-                        return _this.props.onChange(e.target.value, _this.props.name || "");
-                    } }),
-                React__default.createElement("div", { className: "input-group-append" },
-                    React__default.createElement("span", { className: "input-group-text", style: this.props.styleSubLabel || {} }, this.props.subTitle || "")))));
-    };
-    return HorizontalTextControl;
-}(Component));
-var SimpleTextAreaControl = /** @class */ (function (_super) {
-    __extends(SimpleTextAreaControl, _super);
-    function SimpleTextAreaControl() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SimpleTextAreaControl.prototype.render = function () {
-        var _this = this;
-        return (React__default.createElement("div", { className: "input-group" },
-            React__default.createElement("div", { className: "input-group-prepend" },
-                React__default.createElement("span", { className: "input-group-text", style: this.props.styleLabel || {} }, this.props.title)),
-            React__default.createElement("textarea", { className: "form-control", placeholder: this.props.title, value: this.props.value || "", onChange: function (e) {
-                    return _this.props.onChange(e.target.value, _this.props.name || "");
-                }, style: this.props.styleText || {}, disabled: !!this.props.disabled })));
-    };
-    return SimpleTextAreaControl;
-}(Component));
 function SimpleSelectorControl(_a) {
     var title = _a.title, _b = _a.dataSource, dataSource = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, onChange = _a.onChange, showColor = _a.showColor, styleList = _a.styleList, hasChoose = _a.hasChoose;
     return (React__default.createElement(TextField, { select: true, label: title, variant: "outlined", value: selectedValue || "DEFAULT", onChange: function (e) {
@@ -936,40 +856,6 @@ var CheckBoxControl = function (props) {
                         }, disabled: props.disabled }))),
             React__default.createElement("input", { type: "text", className: "form-control", "aria-label": props.title, value: props.title, readOnly: true, style: props.styleTextBox || [] }))));
 };
-var UploadFileControl = function (props) {
-    var FileChanged = function (e) {
-        props.onChange(e.target.files[0]);
-    };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { className: "input-group mes-upload-control" },
-            React__default.createElement("div", { className: "input-group-prepend" },
-                React__default.createElement("div", { className: "input-group-text p-0 file-box" },
-                    React__default.createElement("div", { className: "file-detail", style: {} },
-                        props.selectedFile && (React__default.createElement(React__default.Fragment, null,
-                            React__default.createElement("h5", null, "File Details:"),
-                            React__default.createElement("table", null,
-                                React__default.createElement("tbody", null,
-                                    React__default.createElement("tr", null,
-                                        React__default.createElement("td", null,
-                                            "File Name: ",
-                                            props.selectedFile.name)),
-                                    React__default.createElement("tr", null,
-                                        React__default.createElement("td", null,
-                                            "File Type: ",
-                                            props.selectedFile.type)),
-                                    React__default.createElement("tr", null,
-                                        React__default.createElement("td", null,
-                                            "Last Modified:",
-                                            " ",
-                                            props.selectedFile.lastModifiedDate.toDateString())))))),
-                        props.selectedFile === undefined && (React__default.createElement("div", { className: "pt-4" },
-                            React__default.createElement(Typography$1, null, "Select or drag a file")))),
-                    React__default.createElement("input", { id: "myFile", type: "file", className: "formcontrol", style: {}, onChange: FileChanged, accept: props.acceptFile || "*.*" }))),
-            React__default.createElement("div", { className: "input-group-append" },
-                React__default.createElement("button", { className: "btn btn-primary mes-button-primary", disabled: props.selectedFile === undefined, onClick: props.onUpload },
-                    React__default.createElement("i", { className: "fas fa-upload pr-2" }),
-                    React__default.createElement("span", null, "Upload"))))));
-};
 
 function GenericRow(props) {
     var cells = props.row.map(function (cell, index) { return (React__default.createElement("td", { key: index }, cell)); });
@@ -1047,7 +933,7 @@ DataGridControl.propTypes = {
     rows: PropTypes.array,
 };
 
-var useStyles$H = makeStyles(function (theme) { return ({
+var useStyles$G = makeStyles(function (theme) { return ({
     contentWrapper: {
         padding: theme.spacing(2),
     },
@@ -1124,7 +1010,7 @@ var useStyles$H = makeStyles(function (theme) { return ({
 }); });
 var Alert$1 = function (_a) {
     var show = _a.show, variant = _a.variant, dismissible = _a.dismissible, onClose = _a.onClose, children = _a.children;
-    var classes = useStyles$H();
+    var classes = useStyles$G();
     return (React__default.createElement(Collapse, { in: show },
         React__default.createElement(Paper, { className: "".concat(classes.alert, " ").concat(variant === "success" ? classes.success : classes.error), elevation: 0 },
             React__default.createElement("div", { className: classes.alertContent },
@@ -1135,7 +1021,7 @@ var Alert$1 = function (_a) {
 var GenericPanel = function (_a) {
     var _b;
     var title = _a.title, _c = _a.description, description = _c === void 0 ? "" : _c, _d = _a.showPromptSuccess, showPromptSuccess = _d === void 0 ? false : _d, _e = _a.showPromptError, showPromptError = _e === void 0 ? false : _e, _f = _a.onDismissSuccess, onDismissSuccess = _f === void 0 ? function () { return null; } : _f, _g = _a.onDismissError, onDismissError = _g === void 0 ? function () { return null; } : _g, successMessage = _a.successMessage, error = _a.error, children = _a.children;
-    var classes = useStyles$H();
+    var classes = useStyles$G();
     return (React__default.createElement(Box, { className: classes.contentWrapper },
         React__default.createElement(Box, { className: classes.alertContainer },
             React__default.createElement(Alert$1, { show: showPromptError, variant: "danger", dismissible: true, onClose: onDismissError },
@@ -1154,7 +1040,7 @@ var GenericPanel = function (_a) {
 };
 var MasterDetailPanel = function (_a) {
     var title = _a.title, onSave = _a.onSave, onCancel = _a.onCancel, onDelete = _a.onDelete, saveStatus = _a.saveStatus, deleteStatus = _a.deleteStatus, _b = _a.showSave, showSave = _b === void 0 ? true : _b, showDelete = _a.showDelete, children = _a.children;
-    var classes = useStyles$H();
+    var classes = useStyles$G();
     return (React__default.createElement(Box, { className: classes.masterDetailPanel },
         React__default.createElement(Card, { variant: "outlined" },
             React__default.createElement(CardContent, null,
@@ -1167,7 +1053,7 @@ var MasterDetailPanel = function (_a) {
                     showDelete && (React__default.createElement(Button, { variant: "contained", color: "primary", className: classes.button, onClick: onDelete, disabled: !deleteStatus }, "Delete")))))));
 };
 var FilterPanel = function (props) {
-    var classes = useStyles$H();
+    var classes = useStyles$G();
     var onClickExport = props.onClickExport, onClickReset = props.onClickReset, OnClickGo = props.OnClickGo, showButtons = props.showButtons, showExport = props.showExport, _a = props.extraButtons, extraButtons = _a === void 0 ? [] : _a, children = props.children;
     var handleExport = function () {
         if (onClickExport)
@@ -1192,7 +1078,7 @@ var FilterPanel = function (props) {
                     showExport && (React__default.createElement(Button, { variant: "contained", className: "".concat(classes.button, " ").concat(classes.exportButton), onClick: handleExport, startIcon: React__default.createElement(GetAppIcon, null) }, "Excel"))))))));
 };
 var LongFilterPanel = function (props) {
-    var classes = useStyles$H();
+    var classes = useStyles$G();
     var onClickExport = props.onClickExport, onClickReset = props.onClickReset, OnClickGo = props.OnClickGo, showButtons = props.showButtons, showExport = props.showExport, _a = props.extraButtons, extraButtons = _a === void 0 ? [] : _a, children = props.children;
     var handleExport = function () {
         if (onClickExport)
@@ -1503,13 +1389,13 @@ var ShiftDayNavigatorControl = function (props) {
                     case 2:
                         resp = _a.sent();
                         if (resp.ok) {
-                            shift = __assign(__assign({}, resp.data), { CurrentProductionDate: moment
+                            shift = __assign(__assign({}, resp.data), { CurrentProductionDate: moment$2
                                     .utc(resp.data.CurrentProductionDate)
-                                    .toDate(), CurrentStart: moment.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment
+                                    .toDate(), CurrentStart: moment$2.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$2.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$2
                                     .utc(resp.data.PreviousProductionDate)
-                                    .toDate(), PreviousStart: moment.utc(resp.data.PreviousStart).toDate(), PreviousEnd: moment.utc(resp.data.PreviousEnd).toDate(), LastProductionDate: moment
+                                    .toDate(), PreviousStart: moment$2.utc(resp.data.PreviousStart).toDate(), PreviousEnd: moment$2.utc(resp.data.PreviousEnd).toDate(), LastProductionDate: moment$2
                                     .utc(resp.data.LastProductionDate)
-                                    .toDate(), LastStart: moment.utc(resp.data.LastStart).toDate(), LastEnd: moment.utc(resp.data.LastEnd).toDate() });
+                                    .toDate(), LastStart: moment$2.utc(resp.data.LastStart).toDate(), LastEnd: moment$2.utc(resp.data.LastEnd).toDate() });
                             setShiftInfoCopy(shift);
                         }
                         return [3 /*break*/, 4];
@@ -1554,7 +1440,7 @@ var ShiftDayNavigatorControl = function (props) {
                         }, 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(), closeOnSelect: true, formatDensity: "dense", value: moment(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$2(), closeOnSelect: true, formatDensity: "dense", value: moment$2(shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.CurrentProductionDate), onChange: function (date) {
                         if (date) {
                             getShiftDataFromAPI(date.toDate(), 0).then(function () { });
                         }
@@ -1635,8 +1521,8 @@ var getShiftsRangeByParameters = function (period_1) {
                     if (resp.ok) {
                         data = resp.data;
                         data.tables[0].rows.map(function (shift) {
-                            shift.Start = moment.utc(shift["Start"]).toDate();
-                            shift.End = moment.utc(shift["End"]).toDate();
+                            shift.Start = moment$2.utc(shift["Start"]).toDate();
+                            shift.End = moment$2.utc(shift["End"]).toDate();
                         });
                         return [2 /*return*/, {
                                 ok: true,
@@ -1654,7 +1540,7 @@ var getShiftsRangeByParameters = function (period_1) {
     });
 };
 
-var useStyles$G = makeStyles(function (theme) { return ({
+var useStyles$F = makeStyles(function (theme) { return ({
     container: {
         display: "grid",
         gridTemplateColumns: "auto minmax(100px, 1fr) 80px minmax(100px, 1fr) auto auto",
@@ -1700,7 +1586,7 @@ var DEFAULT_PERIOD_OPTIONS = [
 var ShiftPeriodNavigatorControl = function (_a) {
     var _b;
     var value = _a.value, onChange = _a.onChange, _c = _a.showShiftAndCrews, showShiftAndCrews = _c === void 0 ? true : _c, _d = _a.dateFormat, dateFormat = _d === void 0 ? "MM/DD/YYYY HH:mm a" : _d, _e = _a.periodOptions, periodOptions = _e === void 0 ? DEFAULT_PERIOD_OPTIONS : _e;
-    var classes = useStyles$G();
+    var classes = useStyles$F();
     var _f = useState(((_b = periodOptions[0]) === null || _b === void 0 ? void 0 : _b.value) || "Day"), period = _f[0], setPeriod = _f[1];
     var _g = useState(false), loadingShiftPeriodList = _g[0], setLoadingShiftPeriodList = _g[1];
     var _h = useState(""); _h[0]; var setError = _h[1];
@@ -1717,13 +1603,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(startShift.Start).toDate(), null, false, "prev")];
+                    return [4 /*yield*/, searchShiftsRangeByParameters(period, moment$2(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(endShift.End).toDate(), false, "next")];
+                    return [4 /*yield*/, searchShiftsRangeByParameters(period, null, moment$2(endShift.End).toDate(), false, "next")];
                 case 4:
                     _a.sent();
                     _a.label = 5;
@@ -1840,7 +1726,7 @@ var ShiftPeriodNavigatorControl = function (_a) {
                 case 0:
                     newPeriod = e.target.value;
                     setPeriod(newPeriod);
-                    return [4 /*yield*/, searchShiftsRangeByParameters(newPeriod, null, (endShift === null || endShift === void 0 ? void 0 : endShift.Start) ? moment(endShift.Start).toDate() : null, false)];
+                    return [4 /*yield*/, searchShiftsRangeByParameters(newPeriod, null, (endShift === null || endShift === void 0 ? void 0 : endShift.Start) ? moment$2(endShift.Start).toDate() : null, false)];
                 case 1:
                     _a.sent();
                     return [2 /*return*/];
@@ -1877,8 +1763,8 @@ var ShiftPeriodNavigatorControl = function (_a) {
             React__default.createElement(IconButton$1, { size: "small", color: "primary", disabled: loadingShiftPeriodList, onClick: function () { return handleArrowNavigation("prev"); } },
                 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: moment((startShift === null || startShift === void 0 ? void 0 : startShift.Start) || moment().subtract(1, "day")), onChange: function (value) {
-                    return handleDateChange(value ? moment(value) : null, "start");
+            React__default.createElement(DatePicker$1, { label: "Start", format: dateFormat, value: 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, 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: {
@@ -1897,8 +1783,8 @@ var ShiftPeriodNavigatorControl = function (_a) {
                         width: "100%",
                     } }, 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: moment((endShift === null || endShift === void 0 ? void 0 : endShift.Start) || moment().subtract(1, "day")), onChange: function (value) {
-                    return handleDateChange(value ? moment(value) : null, "end");
+            React__default.createElement(DatePicker$1, { label: "End", format: dateFormat, value: moment$2((endShift === null || endShift === void 0 ? void 0 : endShift.Start) || moment$2().subtract(1, "day")), onChange: function (value) {
+                    return handleDateChange(value ? moment$2(value) : null, "end");
                 }, disabled: loadingShiftPeriodList, 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: {
@@ -1919,7 +1805,7 @@ var ShiftPeriodNavigatorControl = function (_a) {
                 React__default.createElement(SkipNextIcon, null)))));
 };
 
-var useStyles$F = makeStyles(function (theme) { return ({
+var useStyles$E = makeStyles(function (theme) { return ({
     contextMenu: {
         backgroundColor: "#fff",
         borderRadius: "2px",
@@ -2011,7 +1897,7 @@ var useContextMenuMESF = function () { return useContext(ContextMenuMESFContext)
 
 var ContextMenu$1 = function () {
     var _a = useContextMenuMESF(), show = _a.show, position = _a.position, options = _a.options;
-    var classes = useStyles$F();
+    var classes = useStyles$E();
     var menuRef = useRef(null);
     var _b = useState("0"), x = _b[0], setX = _b[1];
     var _c = useState("0"), y = _c[0], setY = _c[1];
@@ -2063,15 +1949,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.utc(job["LastStarted"]).toDate()
+                            ? moment$2.utc(job["LastStarted"]).toDate()
                             : null, LastContact: job.LastContact
-                            ? moment.utc(job["LastContact"]).toDate()
+                            ? moment$2.utc(job["LastContact"]).toDate()
                             : null, LastCounter: job.LastCounter
-                            ? moment.utc(job["LastCounter"]).toDate()
-                            : null, StartTime: job.StartTime ? moment.utc(job["StartTime"]).toDate() : null, NextExecutionTime: job.NextExecutionTime
-                            ? moment.utc(job["NextExecutionTime"]).toDate()
+                            ? 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()
                             : null, LastExecutionTime: job.LastExecutionTime
-                            ? moment.utc(job["LastExecutionTime"]).toDate()
+                            ? moment$2.utc(job["LastExecutionTime"]).toDate()
                             : null })); });
                     return [2 /*return*/, {
                             ok: true,
@@ -2300,7 +2186,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(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$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: {
                                         textField: {
                                             size: "small",
                                             margin: "none",
@@ -2317,7 +2203,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(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$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: {
                                     textField: {
                                         size: "small",
                                         margin: "none",
@@ -2327,7 +2213,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(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$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: {
                                     textField: {
                                         size: "small",
                                         margin: "none",
@@ -2448,7 +2334,7 @@ var JobsProvider = function (_a) {
     return (React__default.createElement(JobsContext.Provider, { value: { state: state, actions: actions } }, children));
 };
 
-var useStyles$E = makeStyles(function (theme) { return ({
+var useStyles$D = makeStyles(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -2466,7 +2352,7 @@ var useStyles$E = makeStyles(function (theme) { return ({
 var useJobsTableData = function (_a) {
     var setShowModal = _a.setShowModal, setJobSelected = _a.setJobSelected, showContextMenu = _a.showContextMenu;
     var rows = useJobsContext().state.jobsData;
-    useStyles$E();
+    useStyles$D();
     var renderButtonMenu = function (params) {
         return (React__default.createElement(Button, { style: {}, onClick: function (e) { return showContextMenu(e, params.data, "jobsContext"); } },
             React__default.createElement(FormatListBulletedSharpIcon, { style: { height: "auto" }, color: "action" })));
@@ -2510,7 +2396,7 @@ var useJobsTableData = function (_a) {
             headerName: "Next Execution",
             valueFormatter: function (_a) {
                 var value = _a.value;
-                return value === null ? "" : moment$1(value).format("DD/MM/YYYY HH:mm");
+                return value === null ? "" : moment$3(value).format("DD/MM/YYYY HH:mm");
             },
             flex: 1,
             cellStyle: {
@@ -2560,7 +2446,7 @@ var CustomStatusPanel = function (_a) {
     return (React.createElement(IconButton$1, { onClick: handleNew, color: "primary", style: { marginLeft: -15 } },
         React.createElement(PlaylistAddIcon, { style: { width: 30, height: 30 } })));
 };
-var useStyles$D = makeStyles(function (theme) { return ({
+var useStyles$C = makeStyles(function (theme) { return ({
     root: {
         "& .MuiDataGrid-row": {
             cursor: "pointer",
@@ -2569,42 +2455,44 @@ var useStyles$D = makeStyles(function (theme) { return ({
             fontWeight: "bold",
             fontColor: "black",
         },
-        "& .ag-icon-menu": {
-            display: "none",
-        },
-        "& .ag-header-cell-label": {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            fontSize: "1rem",
-            padding: "0",
-        },
-        "& .ag-header-cell-text": {
-            textAlign: "center !important",
-            padding: "0",
-        },
-        "& .ag-checkbox-input-wrapper": {
-            margin: "0 10px",
-        },
-        "& .ag-cell": {
-            alignItems: "center",
-            padding: "0 !important",
-            border: "unset !important",
-        },
-        "& .ag-header-cell": {
-            padding: "0px !important",
-            textAlign: "center !important",
-            fontSize: 10,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-        },
-        "& .ag-cell-wrapper": {
-            textAlign: "center",
-        },
-        "& .ag-menu-option": {
-            cursor: "pointer",
-        },
+        // "& .ag-icon-menu": {
+        // 	display: "none",
+        // },
+        // "& .ag-header-cell-label": {
+        // 	display: "flex",
+        // 	alignItems: "center",
+        // 	justifyContent: "center",
+        // 	fontSize: "1rem",
+        // 	padding: "0",
+        // },
+        //
+        // "& .ag-header-cell-text": {
+        // 	textAlign: "center !important",
+        // 	padding: "0",
+        // },
+        //
+        // "& .ag-checkbox-input-wrapper": {
+        // 	margin: "0 10px",
+        // },
+        // "& .ag-cell": {
+        // 	alignItems: "center",
+        // 	padding: "0 !important",
+        // 	border: "unset !important",
+        // },
+        // "& .ag-header-cell": {
+        // 	padding: "0px !important",
+        // 	textAlign: "center !important",
+        // 	fontSize: 10,
+        // 	display: "flex",
+        // 	alignItems: "center",
+        // 	justifyContent: "center",
+        // },
+        // "& .ag-cell-wrapper": {
+        // 	textAlign: "center",
+        // },
+        // "& .ag-menu-option": {
+        // 	cursor: "pointer",
+        // },
     },
     card: {
         backgroundColor: "#e9f2f8",
@@ -2624,20 +2512,20 @@ var useStyles$D = makeStyles(function (theme) { return ({
         flexDirection: "column",
     },
     table: {
-        "& .ag-header-cell": {
-            fontSize: 11,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-        },
-        "& .ag-header-cell-label": {
-            justifyContent: "center",
-        },
+    // "& .ag-header-cell": {
+    // 	fontSize: 11,
+    // 	display: "flex",
+    // 	alignItems: "center",
+    // 	justifyContent: "center",
+    // },
+    // "& .ag-header-cell-label": {
+    // 	justifyContent: "center",
+    // },
     },
 }); });
 var TableJobs = function (_a) {
     var getJobsFromAPI = _a.getJobsFromAPI, isLoading = _a.isLoading;
-    var classes = useStyles$D();
+    var classes = useStyles$C();
     var _b = useState(null), jobSelected = _b[0], setJobSelected = _b[1];
     var _c = useState(null), gridApi = _c[0], setGridApi = _c[1];
     var _d = useState(""), errorMessage = _d[0], setErrorMessage = _d[1];
@@ -2740,8 +2628,11 @@ var TableJobs = function (_a) {
                 React.createElement(Typography$1, { variant: "h5", style: { fontWeight: 600, marginBottom: 4 } }, "System Jobs")),
             React.createElement(Grid, { container: true, justifyContent: "flex-start", alignItems: "center", className: classes.root, style: { width: "100%", padding: "0 10px" }, spacing: 2 },
                 React.createElement(Grid, { item: true, md: 6, xs: 12 },
-                    React.createElement(Paper, { elevation: 2, style: { height: "70vh", width: "100%" }, className: "".concat(classes.table, " ag-theme-material") },
+                    React.createElement(Paper, { elevation: 2, style: { height: "70vh", width: "100%" } },
                         React.createElement(AgGridReact, { rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, getContextMenuItems: getContextMenuItems, loadingOverlayComponent: LazyLoading, rowHeight: 34, headerHeight: 34, animateRows: true, rowSelection: "single", onGridReady: function (params) { return setGridApi(params.api); }, getRowId: function (params) { return "".concat(params.data.JobId); }, onRowSelected: onRowSelected, gridOptions: {
+                                theme: themeMaterial.withParams({
+                                    spacing: 2,
+                                }),
                                 statusBar: {
                                     statusPanels: [
                                         {
@@ -2837,14 +2728,79 @@ 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$1().add(-5, "days").hour(0).minute(0).second(0).toDate(),
-        End: moment$1().hour(23).minute(59).second(59).toDate(),
+        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: "__",
@@ -2877,12 +2833,16 @@ var LogsReducer = createSlice({
         resetFilters: function (state, _a) {
             _a.payload;
             state.searchData = {
-                Start: moment$1().add(-5, "days").hour(0).minute(0).second(0).toDate(),
-                End: moment$1().hour(23).minute(59).second(59).toDate(),
+                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;
+        },
     },
 });
 
@@ -2938,16 +2898,11 @@ var SearchFilter = function (_a) {
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(TextField, { style: {
                 minWidth: "100%",
-                margin: "15px 0px",
                 backgroundColor: "#f5f8fa",
-                borderTopLeftRadius: 3,
-                borderTopRightRadius: 3,
-                paddingBottom: 0,
-            }, label: "Search", variant: "outlined", margin: "dense", value: search, onChange: function (e) { return setSearch(e.target.value); }, autoComplete: "off" }),
-        React__default.createElement(FormHelperText, { style: { marginBottom: 10, marginTop: -15 } }, "Search by Source, Message or User")));
+            }, label: "Search", variant: "outlined", margin: "dense", value: search, onChange: function (e) { return setSearch(e.target.value); }, autoComplete: "off" })));
 };
 
-var useStyles$C = makeStyles(function (theme) { return ({
+var useStyles$B = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15,
     },
@@ -2964,7 +2919,7 @@ var formatTime = function (nowTime) {
 };
 var ModalLogSelected = function (_a) {
     var show = _a.show, onHide = _a.onHide, selectedLog = _a.selectedLog;
-    var classes = useStyles$C();
+    var classes = useStyles$B();
     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" } },
@@ -3020,28 +2975,10 @@ var ModalLogSelected = function (_a) {
                         React__default.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(true); } }, "Close")))))));
 };
 
-var useStyles$B = makeStyles(function (theme) { return ({
-    buttons: {
-        opacity: 0,
-        transition: "opacity 0.1s ease-in-out",
-        ".ag-row-hover &": {
-            opacity: 1,
-        },
-        ".ag-row-focus &": {
-            opacity: 1,
-        },
-        ".ag-row-selected &": {
-            opacity: 1,
-        },
-    },
-}); });
+var moment$1 = getMomentTz();
 var useLogTableData = function () {
     var _a;
     var state = useLogsContext().state;
-    useStyles$B();
-    var formatTime = function (nowTime) {
-        return (nowTime.toLocaleDateString("en-US") + " " + nowTime.toLocaleTimeString());
-    };
     var getLogTypeByCodeId = function (logTypeCodeId) {
         return get$1(LOG_TYPE_CODES, "".concat(logTypeCodeId, ".description"), " -");
     };
@@ -3052,7 +2989,9 @@ var useLogTableData = function () {
         var LogId = _a.LogId, Timestamp = _a.Timestamp, Source = _a.Source, Message = _a.Message, LogTypeCode = _a.LogTypeCode, User = _a.User;
         return ({
             id: LogId,
-            Timestamp: Timestamp === null ? null : new Date(Timestamp),
+            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),
@@ -3063,12 +3002,8 @@ var useLogTableData = function () {
         {
             field: "Timestamp",
             headerName: "Time",
-            minWidth: 150,
+            minWidth: 180,
             flex: 1,
-            valueFormatter: function (_a) {
-                var value = _a.value;
-                return value === null ? "" : formatTime(value);
-            },
             cellStyle: {
                 display: "flex",
                 alignItems: "center",
@@ -3079,8 +3014,8 @@ var useLogTableData = function () {
         {
             field: "Source",
             headerName: "Source",
-            minWidth: 180,
-            flex: 1,
+            minWidth: 200,
+            flex: 2,
             type: "string",
         },
         {
@@ -3094,21 +3029,34 @@ var useLogTableData = function () {
             field: "LogTypeCode",
             headerName: "Type",
             minWidth: 50,
-            maxWidth: 50,
+            maxWidth: 70,
             flex: 1,
+            cellStyle: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            },
             cellRenderer: function (params) {
-                return (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement("div", { style: {
-                            padding: "2px 6px",
-                            borderRadius: 4,
-                            display: "inline-flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            color: "#fff",
-                            fontWeight: "bold",
-                            fontSize: "0.75rem",
-                            backgroundColor: backgroundColor(params.value),
-                        } }, params.value)));
+                return (React__default.createElement(Chip, { style: {
+                        backgroundColor: backgroundColor(params.value),
+                        color: "white",
+                    }, label: params.value, size: "small" })
+                // <div
+                // 	style={{
+                // 		padding: "2px 6px",
+                // 		borderRadius: 4,
+                // 		display: "flex",
+                // 		alignItems: "center",
+                // 		justifyContent: "center",
+                // 		color: "#fff",
+                // 		fontWeight: "bold",
+                // 		fontSize: "0.75rem",
+                // 		backgroundColor: backgroundColor(params.value),
+                // 	}}
+                // >
+                // 	{params.value}
+                // </div>
+                );
             },
         },
         {
@@ -3150,40 +3098,42 @@ var useStyles$A = makeStyles(function (theme) { return ({
         "& .MuiDataGrid-columnHeaderTitle, & .MuiTablePagination-caption": {
             fontWeight: "bold",
         },
-        "& .ag-icon-menu": {
-            display: "none",
-        },
-        "& .ag-header-cell-label": {
-            display: "flex",
-            alignItems: "start",
-            justifyContent: "start",
-            fontSize: "1rem",
-            fontWeight: "bold",
-        },
-        "& .ag-header-cell-centered .ag-header-cell-label": {
-            justifyContent: "center !important",
-        },
-        "& .ag-header-cell-text": {
-            textAlign: "start !important",
-        },
-        "& .ag-checkbox-input-wrapper": {
-            margin: "0 10px",
-        },
-        "& .ag-cell": {
-            padding: "2px !important",
-        },
-        "& .ag-header-cell": {
-            padding: "0px !important",
-            textAlign: "center !important",
-            fontSize: 10,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-        },
-        "& .ag-cell-wrapper": {},
-        "& .ag-menu-option": {
-            cursor: "pointer",
-        },
+        // "& .ag-icon-menu": {
+        // 	display: "none",
+        // },
+        // "& .ag-header-cell-label": {
+        // 	display: "flex",
+        // 	alignItems: "start",
+        // 	justifyContent: "start",
+        // 	fontSize: "1rem",
+        // 	fontWeight: "bold",
+        // },
+        // "& .ag-header-cell-centered .ag-header-cell-label": {
+        // 	justifyContent: "center !important",
+        // },
+        //
+        // "& .ag-header-cell-text": {
+        // 	textAlign: "start !important",
+        // },
+        //
+        // "& .ag-checkbox-input-wrapper": {
+        // 	margin: "0 10px",
+        // },
+        // "& .ag-cell": {
+        // 	padding: "2px !important",
+        // },
+        // "& .ag-header-cell": {
+        // 	padding: "0px !important",
+        // 	textAlign: "center !important",
+        // 	fontSize: 10,
+        // 	display: "flex",
+        // 	alignItems: "center",
+        // 	justifyContent: "center",
+        // },
+        // "& .ag-cell-wrapper": {},
+        // "& .ag-menu-option": {
+        // 	cursor: "pointer",
+        // },
     },
     card: {
         backgroundColor: "#e9f2f8",
@@ -3194,11 +3144,20 @@ var useStyles$A = makeStyles(function (theme) { return ({
     },
     filters: {
         position: "relative",
-        margin: "0 10px",
+        margin: "0 2px",
     },
     form: {},
 }); });
 
+var TimezoneSelector = function (_a) {
+    var value = _a.value, onChange = _a.onChange;
+    return (React__default.createElement("div", { style: { marginTop: 6, borderTopLeftRadius: 3, borderTopRightRadius: 3 } },
+        React__default.createElement(InputLabel, { id: "timezone-selector-label", style: { fontSize: 10, marginBottom: 0 } }, "Timezone"),
+        React__default.createElement(Select, { labelId: "timezone-selector-label", id: "timezone-selector", value: value, onChange: function (event) { return onChange(event.target.value); }, style: { minWidth: "100%" } },
+            React__default.createElement(MenuItem, { value: "UTC" }, "UTC"),
+            React__default.createElement(MenuItem, { value: "Server" }, "Server"))));
+};
+
 var useLogsOptionsFunctions = function (_a) {
     var setSelectedLog = _a.setSelectedLog, setShowLogModal = _a.setShowLogModal, handleResetButtonClick = _a.handleResetButtonClick;
     var getMenuOptions = function (data) {
@@ -3233,17 +3192,17 @@ var useLogsOptionsFunctions = function (_a) {
 
 var TableLogs = function (_a) {
     var isLoading = _a.isLoading; _a.rowData; var refreshData = _a.refreshData;
-    var _b = useLogsContext(), _c = _b.state.searchData, Start = _c.Start, End = _c.End, Search = _c.Search, LogTypeCode = _c.LogTypeCode, _d = _b.actions, setLogTypeCodeFilter = _d.setLogTypeCodeFilter, setEndFilter = _d.setEndFilter, setStartFilter = _d.setStartFilter, setSearchFilter = _d.setSearchFilter;
+    var _b = useLogsContext(), _c = _b.state, Timezone = _c.Timezone, _d = _c.searchData, Start = _d.Start, End = _d.End, Search = _d.Search, LogTypeCode = _d.LogTypeCode, _e = _b.actions, setLogTypeCodeFilter = _e.setLogTypeCodeFilter, setEndFilter = _e.setEndFilter, setStartFilter = _e.setStartFilter, setSearchFilter = _e.setSearchFilter, setTimezone = _e.setTimezone;
     var classes = useStyles$A();
     var gridStyle = useMemo(function () { return ({ height: "100%", width: "100%" }); }, []);
-    var _e = useState(null); _e[0]; var setGridAPI = _e[1];
-    var _f = useState(false), showLogModal = _f[0], setShowLogModal = _f[1];
-    var _g = useState(undefined), selectedLog = _g[0], setSelectedLog = _g[1];
-    var _h = useState(""), error = _h[0], setError = _h[1];
+    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 onGridReady = function (params) {
         setGridAPI(params.api);
     };
-    var _j = useLogTableData(), rows = _j.rows, columnDefs = _j.columnDefs;
+    var _k = useLogTableData(), rows = _k.rows, columnDefs = _k.columnDefs;
     var defaultColDef = useMemo(function () {
         return {
             sortable: true,
@@ -3252,7 +3211,7 @@ var TableLogs = function (_a) {
             wrapHeaderText: true,
         };
     }, []);
-    var _k = useContextMenuMESF(), showContextMenu = _k.showContextMenu, registerConfig = _k.registerConfig;
+    var _l = useContextMenuMESF(), showContextMenu = _l.showContextMenu, registerConfig = _l.registerConfig;
     var handleSubmit = function (ev) {
         ev.preventDefault();
         refreshData({ Start: Start, End: End, Search: Search, LogTypeCode: LogTypeCode });
@@ -3260,8 +3219,8 @@ var TableLogs = function (_a) {
     var handleResetButtonClick = function () {
         resetFilter();
         refreshData({
-            Start: moment$1().add(-5, "days").hour(0).minute(0).second(0).toDate(),
-            End: moment$1().hour(23).minute(59).second(59).toDate(),
+            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",
         });
@@ -3314,22 +3273,24 @@ var TableLogs = function (_a) {
     useEffect(function () {
         refreshData({ Start: Start, End: End, Search: Search, LogTypeCode: LogTypeCode }).then(function (r) { });
     }, [Start, End, LogTypeCode]);
-    return (React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", className: classes.root },
-        React.createElement(Grid, { item: true, md: 12, xs: 12, className: classes.filters, style: { padding: "0 15px" } },
+    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(Typography$1, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "MES and System Logs"),
-            React.createElement(Grid, { container: true, direction: "row", style: { margin: "10px 0 0" }, spacing: 1 },
+            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 },
                     React.createElement(Card, { className: classes.card },
                         React.createElement(CardContent, { style: { padding: "6px !important", width: "100%" } },
                             React.createElement("form", { onSubmit: handleSubmit, className: classes.form },
-                                React.createElement(Grid, { container: true, alignItems: "center", direction: "row", spacing: 2 },
-                                    React.createElement(Grid, { item: true, md: 3, xs: 12 },
+                                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 })),
-                                    React.createElement(Grid, { item: true, md: 3, xs: 12 },
+                                    React.createElement(Grid, { item: true, md: 2, xs: 12 },
                                         React.createElement(DateFilter, { label: "To", date: End, setDate: setEndFilter })),
                                     React.createElement(Grid, { item: true, md: 2, 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(Grid, { item: true, container: true, md: 4, xs: 12, spacing: 1, justifyContent: "flex-end", alignItems: "flex-end" },
                                         React.createElement(Grid, { item: true, md: 4, xs: 12 },
                                             React.createElement(Button, { variant: "contained", color: "default", onClick: handleResetButtonClick, fullWidth: true }, "Reset")),
@@ -3341,8 +3302,12 @@ var TableLogs = function (_a) {
                 React.createElement(Grid, { item: true, md: 12, xs: 12, style: {
                         height: "70vh",
                     } },
-                    React.createElement(Paper, { style: gridStyle, className: "ag-theme-material" },
-                        React.createElement(AgGridReact, { 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) {
+                    React.createElement(Paper, { style: gridStyle },
+                        React.createElement(AgGridReact, { 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) {
                                 rowClicked(e);
                             } }))))),
         React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
@@ -3371,6 +3336,7 @@ var getLogs = function (Start, End, Search, LogTypeCode) { return __awaiter(void
     });
 }); };
 
+var moment = getMomentTz();
 var Logs = function (prop) {
     var _a = useState(true), loading = _a[0], setLoading = _a[1];
     var _b = useState(""), error = _b[0], setError = _b[1];
@@ -3389,6 +3355,7 @@ var Logs = function (prop) {
                         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
@@ -3406,9 +3373,7 @@ var Logs = function (prop) {
         getLogsFromAPI();
     }, []);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
-            React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { margin: 0 } },
-                React__default.createElement(TableLogs, { isLoading: loading, rowData: state.logs, refreshData: getLogsFromAPI }))),
+        React__default.createElement(TableLogs, { isLoading: loading, rowData: state.logs, refreshData: getLogsFromAPI }),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
@@ -3772,8 +3737,12 @@ var DataTable = function (_a) {
             React__default.createElement(Grid, { item: true, md: 12, xs: 12 }, "Actions"),
             React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
                 React__default.createElement(TextField, { id: "outlined-basic", label: "Search", variant: "outlined", value: filterInput, onChange: handlerFilter, margin: "dense", style: { width: "100%" } }))),
-        React__default.createElement("div", { className: "ag-theme-balham", style: { width: "100%", height: "40vh" } },
-            React__default.createElement(AgGridReact, { getRowId: function (params) { return params.data.ActionId; }, onGridReady: onGridReady, rowData: rows, columnDefs: columns, defaultColDef: defaultColDef, onFirstDataRendered: onFirstDataRendered, rowSelection: "multiple", rowMultiSelectWithClick: true, onSelectionChanged: onAgGridSelectionChanged })),
+        React__default.createElement("div", { style: { width: "100%", height: "60vh" } },
+            React__default.createElement(AgGridReact, { gridOptions: {
+                    theme: themeMaterial.withParams({
+                        spacing: 4,
+                    }),
+                }, getRowId: function (params) { return String(params.data.ActionId); }, onGridReady: onGridReady, rowData: rows, columnDefs: columns, defaultColDef: defaultColDef, onFirstDataRendered: onFirstDataRendered, rowSelection: "multiple", rowMultiSelectWithClick: true, onSelectionChanged: onAgGridSelectionChanged })),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
@@ -3866,7 +3835,7 @@ var ActionsOfProfile = function (_a) {
         }
     }, [show]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(MesfModal, { title: "EDIT PROFILE", open: show, handleClose: function () { return onHide(false); }, id: "edit-profile-modal", maxWidth: "lg" },
+        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" } },
                     React.createElement(Grid, { container: true, style: { position: "relative" }, className: classes.root },
@@ -4134,7 +4103,6 @@ var TableProfiles = function (_a) {
     var _c = useState(false), modalProceduresProfile = _c[0], setModalProceduresProfile = _c[1];
     var _d = useState(false), modalDeleteProfile = _d[0], setModalDeleteProfile = _d[1];
     var _e = useState(null), profile = _e[0], setProfile = _e[1];
-    useMemo(function () { return ({ height: "100%", width: "100%" }); }, []);
     var _f = useState(null), gridApi = _f[0], setGridApi = _f[1];
     var classes = useStyles$w();
     var loadingOverlayComponent = useMemo(function () {
@@ -4193,8 +4161,10 @@ var TableProfiles = function (_a) {
                         React.createElement(Paper, { style: {
                                 height: "70vh",
                                 width: "100%",
-                            }, className: "ag-theme-material" },
-                            React.createElement(AgGridReact, { rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 34, headerHeight: 34, loadingOverlayComponent: loadingOverlayComponent, animateRows: true, getContextMenuItems: function (e) { return getContextMenuItems(e); }, getRowId: function (params) { return params.data.ProfileId; }, rowSelection: "single", onRowDoubleClicked: function (event) {
+                            } },
+                            React.createElement(AgGridReact, { gridOptions: {
+                                    theme: themeMaterial,
+                                }, rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 34, headerHeight: 34, loadingOverlayComponent: loadingOverlayComponent, animateRows: true, getContextMenuItems: function (e) { return getContextMenuItems(e); }, getRowId: function (params) { return params.data.ProfileId; }, rowSelection: "single", onRowDoubleClicked: function (event) {
                                     setProfile(event.data);
                                     setModalProceduresProfile(true);
                                 }, onGridReady: function (params) { return setGridApi(params.api); } }))),
@@ -5093,7 +5063,7 @@ var useTableData$2 = function (_a) {
             headerName: "Pattern Start",
             valueFormatter: function (_a) {
                 var value = _a.value;
-                return "".concat(moment$1(value).format("L"), ", ").concat(moment$1(value).format("LTS"));
+                return "".concat(moment$3(value).format("L"), ", ").concat(moment$3(value).format("LTS"));
             },
             minWidth: 180,
             flex: 4,
@@ -5186,40 +5156,42 @@ var useTableData$2 = function (_a) {
 
 var useStyles$r = makeStyles(function (theme) { return ({
     root: {
-        "& .ag-icon-menu": {
-            display: "none",
-        },
-        "& .ag-header-cell-label": {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            fontSize: "1rem",
-        },
-        "& .ag-header-cell-text": {
-            textAlign: "center !important",
-        },
-        "& .ag-checkbox-input-wrapper": {
-            margin: "0 10px",
-        },
-        "& .ag-cell": {
-            alignItems: "center",
-            padding: "0 !important",
-            border: "unset !important",
-        },
-        "& .ag-header-cell": {
-            padding: "0px !important",
-            textAlign: "center !important",
-            fontSize: 10,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-        },
-        "& .ag-cell-wrapper": {
-            textAlign: "center",
-        },
-        "& .ag-menu-option": {
-            cursor: "pointer",
-        },
+    // "& .ag-icon-menu": {
+    // 	display: "none",
+    // },
+    // "& .ag-header-cell-label": {
+    // 	display: "flex",
+    // 	alignItems: "center",
+    // 	justifyContent: "center",
+    // 	fontSize: "1rem",
+    // },
+    //
+    // "& .ag-header-cell-text": {
+    // 	textAlign: "center !important",
+    // },
+    //
+    // "& .ag-checkbox-input-wrapper": {
+    // 	margin: "0 10px",
+    // },
+    // "& .ag-cell": {
+    // 	alignItems: "center",
+    // 	padding: "0 !important",
+    // 	border: "unset !important",
+    // },
+    // "& .ag-header-cell": {
+    // 	padding: "0px !important",
+    // 	textAlign: "center !important",
+    // 	fontSize: 10,
+    // 	display: "flex",
+    // 	alignItems: "center",
+    // 	justifyContent: "center",
+    // },
+    // "& .ag-cell-wrapper": {
+    // 	textAlign: "center",
+    // },
+    // "& .ag-menu-option": {
+    // 	cursor: "pointer",
+    // },
     },
     relative: {
         position: "relative",
@@ -5240,7 +5212,6 @@ var TableShiftsCrews = function (_a) {
     var _d = useState(false), openModalDeleteShift = _d[0], setOpenModalDeleteShift = _d[1];
     var _e = useState(""), messageTable = _e[0]; _e[1];
     var gridRef = useRef(null);
-    useMemo(function () { return ({ height: "100%", width: "100%" }); }, []);
     var defaultColDef = useMemo(function () {
         return {
             sortable: true,
@@ -5308,8 +5279,10 @@ var TableShiftsCrews = function (_a) {
                     } }),
                 React.createElement(Grid, { component: Paper, item: true, md: 12, xs: 12, style: {
                         height: "70vh",
-                    }, className: "ag-theme-material" },
-                    React.createElement(AgGridReact, { ref: gridRef, rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 34, headerHeight: 34, animateRows: true, loadingOverlayComponent: loadingOverlayComponent, getContextMenuItems: function (e) { return getContextMenuItems(e); }, rowSelection: "single", overlayNoRowsTemplate: messageTable, onRowDoubleClicked: function (event) {
+                    } },
+                    React.createElement(AgGridReact, { gridOptions: {
+                            theme: themeMaterial,
+                        }, ref: gridRef, rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 34, headerHeight: 34, animateRows: true, loadingOverlayComponent: loadingOverlayComponent, getContextMenuItems: function (e) { return getContextMenuItems(e); }, rowSelection: "single", overlayNoRowsTemplate: messageTable, onRowDoubleClicked: function (event) {
                             setShiftTableData(event.data);
                             setOpenModalEditShift(true);
                         } })),
@@ -7609,7 +7582,6 @@ var useTableData$1 = function (_a) {
             sortable: false,
             flex: 1,
             minWidth: 130,
-            maxWidth: 130,
             cellStyle: {
                 display: "flex",
                 alignItems: "center",
@@ -7622,7 +7594,6 @@ var useTableData$1 = function (_a) {
             sortable: false,
             flex: 1,
             minWidth: 130,
-            maxWidth: 130,
             cellStyle: {
                 display: "flex",
                 alignItems: "center",
@@ -7635,7 +7606,6 @@ var useTableData$1 = function (_a) {
             sortable: false,
             flex: 1,
             minWidth: 130,
-            maxWidth: 130,
             cellStyle: {
                 display: "flex",
                 alignItems: "center",
@@ -7821,10 +7791,12 @@ var TableUsers = function (_a) {
                         React.createElement(Paper, null,
                             React.createElement(TextField, { label: "Search", value: searchText, onChange: function (e) { return setSearchText(e.target.value); }, fullWidth: true, variant: "outlined" }))),
                     React.createElement(Grid, { item: true, md: 12, xs: 12 },
-                        React.createElement(Paper, { className: "ag-theme-material", style: {
+                        React.createElement(Paper, { style: {
                                 height: "70vh",
                             } },
-                            React.createElement(AgGridReact, { rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 34, headerHeight: 34, loadingOverlayComponent: loadingOverlayComponent, animateRows: true, getContextMenuItems: getContextMenuItems, getRowId: function (params) { return params.data.UserId; }, rowSelection: "single", onRowDoubleClicked: function (event) {
+                            React.createElement(AgGridReact, { gridOptions: {
+                                    theme: themeMaterial,
+                                }, rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 34, headerHeight: 34, loadingOverlayComponent: loadingOverlayComponent, animateRows: true, getContextMenuItems: getContextMenuItems, getRowId: function (params) { return params.data.UserId; }, rowSelection: "single", onRowDoubleClicked: function (event) {
                                     setUserId(event.data.UserId);
                                     setOpenModalEditDataUser(true);
                                 }, onGridReady: function (params) { return setGridApi(params.api); } }))),
@@ -8282,7 +8254,7 @@ var MESApiService = /** @class */ (function () {
                 data.dataBaseName = database;
                 data.parameters = formattedParameters;
                 Date.prototype.toJSON = function () {
-                    return moment$1(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$3(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/Execute", {
@@ -8343,7 +8315,7 @@ var MESApiService = /** @class */ (function () {
                         data.dataBaseName = database;
                         data.parameters = formattedParameters;
                         Date.prototype.toJSON = function () {
-                            return moment$1(this).format("YYYY-MM-DDTHH:mm:ss");
+                            return moment$3(this).format("YYYY-MM-DDTHH:mm:ss");
                         }; // eslint-disable-line
                         curatedMethod = procedure.replace(/[\[\]]/g, "");
                         _a.label = 1;
@@ -8397,7 +8369,7 @@ var MESApiService = /** @class */ (function () {
                 data.dataBaseName = database;
                 data.parameters = formattedParameters;
                 Date.prototype.toJSON = function () {
-                    return moment$1(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$3(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/ExecuteJSON", {
@@ -8454,7 +8426,7 @@ var MESApiService = /** @class */ (function () {
                     formattedParameters.push(formattedParameter);
                 });
                 Date.prototype.toJSON = function () {
-                    return moment$1(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$3(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 files.forEach(function (element) {
@@ -8521,7 +8493,7 @@ var MESApiService = /** @class */ (function () {
                 data.parameters = formattedParameters;
                 data.fileName = fileName || "Default.xlsx";
                 Date.prototype.toJSON = function () {
-                    return moment$1(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$3(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/Export", {
@@ -8599,7 +8571,7 @@ var MESApiService = /** @class */ (function () {
                 data.parameters = formattedParameters;
                 data.fileName = fileName || "Default.xlsx";
                 Date.prototype.toJSON = function () {
-                    return moment$1(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$3(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/ExportExcel", {
@@ -8670,70 +8642,6 @@ 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.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; };
-var dxtServerTimeZone = function () {
-    return TimeService.getInstance().getServerTimeZone;
-};
-var dxtToUTC = TimeService.getInstance().toUTC;
-var dxtToLocalServerTime = TimeService.getInstance().toLocalServerTime;
-
 var getUser = function (UserId, UserName) { return __awaiter(void 0, void 0, void 0, function () {
     var apiService, parameters, resp;
     return __generator(this, function (_a) {
@@ -10300,8 +10208,12 @@ var QueryCacheInvalidations = function () {
         React__default.createElement(Box, { className: classes.header },
             React__default.createElement(Typography$1, { variant: "h4", component: "h2" }, "Query Cache Invalidations"),
             React__default.createElement(Button, { variant: "contained", color: "primary", onClick: handleAdd }, "Add New")),
-        React__default.createElement(Box, { className: "".concat(classes.gridContainer, " ag-theme-material") },
-            React__default.createElement(AgGridReact, { rowData: rowData, columnDefs: columnDefs, defaultColDef: { flex: 1 } })),
+        React__default.createElement(Box, { className: "".concat(classes.gridContainer) },
+            React__default.createElement(AgGridReact, { gridOptions: {
+                    theme: themeMaterial.withParams({
+                        spacing: 2,
+                    }),
+                }, rowData: rowData, columnDefs: columnDefs, defaultColDef: { flex: 1 } })),
         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 },
@@ -10355,40 +10267,42 @@ var SettingsProvider = function (_a) {
 
 var useStyles$3 = makeStyles(function (theme) { return ({
     root: {
-        "& .ag-icon-menu": {
-            display: "none",
-        },
-        "& .ag-header-cell-label": {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            fontSize: "1rem",
-        },
-        "& .ag-header-cell-text": {
-            textAlign: "center !important",
-        },
-        "& .ag-checkbox-input-wrapper": {
-            margin: "0 10px",
-        },
-        "& .ag-cell": {
-            alignItems: "center",
-            padding: "0 !important",
-            border: "unset !important",
-        },
-        "& .ag-header-cell": {
-            padding: "0px !important",
-            textAlign: "center !important",
-            fontSize: 10,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-        },
-        "& .ag-cell-wrapper": {
-            textAlign: "center",
-        },
-        "& .ag-menu-option": {
-            cursor: "pointer",
-        },
+    // "& .ag-icon-menu": {
+    // 	display: "none",
+    // },
+    // "& .ag-header-cell-label": {
+    // 	display: "flex",
+    // 	alignItems: "center",
+    // 	justifyContent: "center",
+    // 	fontSize: "1rem",
+    // },
+    //
+    // "& .ag-header-cell-text": {
+    // 	textAlign: "center !important",
+    // },
+    //
+    // "& .ag-checkbox-input-wrapper": {
+    // 	margin: "0 10px",
+    // },
+    // "& .ag-cell": {
+    // 	alignItems: "center",
+    // 	padding: "0 !important",
+    // 	border: "unset !important",
+    // },
+    // "& .ag-header-cell": {
+    // 	padding: "0px !important",
+    // 	textAlign: "center !important",
+    // 	fontSize: 10,
+    // 	display: "flex",
+    // 	alignItems: "center",
+    // 	justifyContent: "center",
+    // },
+    // "& .ag-cell-wrapper": {
+    // 	textAlign: "center",
+    // },
+    // "& .ag-menu-option": {
+    // 	cursor: "pointer",
+    // },
     },
     relative: {
         position: "relative",
@@ -10930,24 +10844,24 @@ var EditSetting = function (_a) {
 var TableSettings = function (_a) {
     var getSettingsFromAPI = _a.getSettingsFromAPI, isLoading = _a.isLoading, rows = _a.rows;
     var _b = useContextMenuMESF(), showContextMenu = _b.showContextMenu, registerConfig = _b.registerConfig;
-    var _c = useSettingsContext(); _c.state; var setSettingSelected = _c.actions.setSettingSelected;
+    var setSettingSelected = useSettingsContext().actions.setSettingSelected;
     var classes = useStyles$3();
-    var _d = useState(null), gridApi = _d[0], setGridApi = _d[1];
-    var _e = useState(""), filterValue = _e[0], setFilterValue = _e[1];
-    var _f = useState(false), openModalNew = _f[0], setOpenModalNew = _f[1];
-    var _g = useState(false), openModalEditSetting = _g[0], setOpenModalEditSetting = _g[1];
-    var _h = useState(false), openModalDeleteSetting = _h[0], setOpenModalDeleteSetting = _h[1];
+    var _c = useState(null), gridApi = _c[0], setGridApi = _c[1];
+    var _d = useState(""), filterValue = _d[0], setFilterValue = _d[1];
+    var _e = useState(false), openModalNew = _e[0], setOpenModalNew = _e[1];
+    var _f = useState(false), openModalEditSetting = _f[0], setOpenModalEditSetting = _f[1];
+    var _g = useState(false), openModalDeleteSetting = _g[0], setOpenModalDeleteSetting = _g[1];
     var getMenuOptions = useSettingsOptionsFunctions({
         setSettingId: setSettingSelected,
         setShowDeleteModal: setOpenModalDeleteSetting,
         setShowCreateModal: setOpenModalNew,
         setShowEditModal: setOpenModalEditSetting,
     }).getMenuOptions;
-    var _j = useTableData({
+    var _h = useTableData({
         setOpenModalEditSetting: setOpenModalEditSetting,
         setOpenModalDeleteSetting: setOpenModalDeleteSetting,
         showContextMenu: showContextMenu,
-    }), columnDefs = _j.columnDefs, defaultColDef = _j.defaultColDef;
+    }), columnDefs = _h.columnDefs, defaultColDef = _h.defaultColDef;
     var loadingOverlayComponent = function () {
         return (React__default.createElement("div", { style: {
                 width: "100%",
@@ -10982,19 +10896,32 @@ var TableSettings = function (_a) {
     }, [isLoading, gridApi]);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", className: classes.root },
-            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 20px", fontWeight: 600 } }, "Settings")),
-            React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { margin: "10px 20px" } },
-                React__default.createElement(TextField, { fullWidth: true, label: "Search", variant: "outlined", size: "small", margin: "dense", value: filterValue, onChange: function (event) {
-                        setFilterValue(event.target.value);
-                        gridApi === null || gridApi === void 0 ? void 0 : gridApi.setGridOption("quickFilterText", event.target.value);
-                    }, InputProps: {
-                        startAdornment: (React__default.createElement(InputAdornment, { position: "start" },
-                            React__default.createElement(IconButton$1, { edge: "start", type: "submit" },
-                                React__default.createElement(SearchIcon, null)))),
-                    } })),
-            React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", className: classes.root },
-                React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" }, className: classes.relative },
+            React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
+                React__default.createElement(Typography$1, { variant: "h5", style: { margin: "8px 0 8px", fontWeight: 600 } }, "Settings")),
+            React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
+                React__default.createElement(Paper, null,
+                    React__default.createElement(TextField, { fullWidth: true, label: "Search", variant: "outlined", size: "small", margin: "dense", value: filterValue, onChange: function (event) {
+                            setFilterValue(event.target.value);
+                            gridApi === null || gridApi === void 0 ? void 0 : gridApi.setGridOption("quickFilterText", event.target.value);
+                        }, InputProps: {
+                            startAdornment: (React__default.createElement(InputAdornment, { position: "start" },
+                                React__default.createElement(IconButton$1, { edge: "start", type: "submit" },
+                                    React__default.createElement(SearchIcon, null)))),
+                        } }))),
+            React__default.createElement(Grid, { item: true, md: 12, xs: 12, className: classes.relative, container: true },
+                React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: {
+                        height: "70vh",
+                        marginTop: 2,
+                    } },
+                    React__default.createElement(Paper, { style: { height: "100%", width: "100%" } },
+                        React__default.createElement(AgGridReact, { gridOptions: {
+                                theme: themeMaterial.withParams({
+                                    spacing: 2,
+                                }),
+                            }, rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 34, headerHeight: 34, animateRows: true, loadingOverlayComponent: loadingOverlayComponent, getContextMenuItems: function (e) { return getContextMenuItems(e); }, rowSelection: "single", onRowDoubleClicked: function (event) {
+                                setSettingSelected(event.data);
+                                setOpenModalEditSetting(true);
+                            }, onGridReady: function (params) { return setGridApi(params.api); } })),
                     React__default.createElement(CreateSetting, { show: openModalNew, onHide: function (shouldUpdate) {
                             setOpenModalNew(false);
                             if (shouldUpdate)
@@ -11009,23 +10936,13 @@ var TableSettings = function (_a) {
                             setOpenModalDeleteSetting(false);
                             if (shouldUpdate)
                                 getSettingsFromAPI();
-                        } }),
-                    React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: {
-                            height: "70vh",
-                            padding: 10,
-                            margin: "20px 0 10px",
+                        } })),
+                React__default.createElement(Grid, { container: true, justifyContent: "flex-end" },
+                    React__default.createElement(Grid, { item: true, md: 2, xs: 12, style: {
+                            display: "flex",
+                            justifyContent: "flex-end",
                         } },
-                        React__default.createElement("div", { style: { height: "100%", width: "100%" }, className: "ag-theme-material" },
-                            React__default.createElement(AgGridReact, { rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 34, headerHeight: 34, animateRows: true, loadingOverlayComponent: loadingOverlayComponent, getContextMenuItems: function (e) { return getContextMenuItems(e); }, rowSelection: "single", onRowDoubleClicked: function (event) {
-                                    setSettingSelected(event.data);
-                                    setOpenModalEditSetting(true);
-                                }, onGridReady: function (params) { return setGridApi(params.api); } }))),
-                    React__default.createElement(Grid, { container: true, justifyContent: "flex-end" },
-                        React__default.createElement(Grid, { item: true, md: 2, xs: 12, style: {
-                                display: "flex",
-                                justifyContent: "flex-end",
-                            } },
-                            React__default.createElement(Button, { variant: "contained", color: "primary", onClick: function () { return setOpenModalNew(!openModalNew); }, fullWidth: true, style: { marginTop: 10 } }, "NEW SETTING"))))))));
+                        React__default.createElement(Button, { variant: "contained", color: "primary", onClick: function () { return setOpenModalNew(!openModalNew); }, fullWidth: true, style: { marginTop: 2 } }, "NEW SETTING")))))));
 };
 
 var SettingsPage = function () {
@@ -11058,12 +10975,7 @@ var SettingsPage = function () {
     }, []);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
-            React__default.createElement(Paper, { elevation: 1, style: {
-                    width: "100%",
-                    padding: "10px 0 20px",
-                    borderRadius: "0.75rem",
-                } },
-                React__default.createElement(TableSettings, { rows: state.settings, isLoading: isLoading, getSettingsFromAPI: getSettingsFromAPI }))),
+            React__default.createElement(TableSettings, { rows: state.settings, isLoading: isLoading, getSettingsFromAPI: getSettingsFromAPI })),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
@@ -11276,7 +11188,7 @@ const FORMATS = {
   year: 'YYYY'
 };
 
-_adapters._date.override(typeof moment$1 === 'function' ? {
+_adapters._date.override(typeof moment$3 === 'function' ? {
   _id: 'moment', // DEBUG ONLY
 
   formats: function() {
@@ -11285,27 +11197,27 @@ _adapters._date.override(typeof moment$1 === 'function' ? {
 
   parse: function(value, format) {
     if (typeof value === 'string' && typeof format === 'string') {
-      value = moment$1(value, format);
-    } else if (!(value instanceof moment$1)) {
-      value = moment$1(value);
+      value = moment$3(value, format);
+    } else if (!(value instanceof moment$3)) {
+      value = moment$3(value);
     }
     return value.isValid() ? value.valueOf() : null;
   },
 
   format: function(time, format) {
-    return moment$1(time).format(format);
+    return moment$3(time).format(format);
   },
 
   add: function(time, amount, unit) {
-    return moment$1(time).add(amount, unit).valueOf();
+    return moment$3(time).add(amount, unit).valueOf();
   },
 
   diff: function(max, min, unit) {
-    return moment$1(max).diff(moment$1(min), unit);
+    return moment$3(max).diff(moment$3(min), unit);
   },
 
   startOf: function(time, unit, weekday) {
-    time = moment$1(time);
+    time = moment$3(time);
     if (unit === 'isoWeek') {
       weekday = Math.trunc(Math.min(Math.max(0, weekday), 6));
       return time.isoWeekday(weekday).startOf('day').valueOf();
@@ -11314,7 +11226,7 @@ _adapters._date.override(typeof moment$1 === 'function' ? {
   },
 
   endOf: function(time, unit) {
-    return moment$1(time).endOf(unit).valueOf();
+    return moment$3(time).endOf(unit).valueOf();
   }
 } : {});
 
@@ -11408,7 +11320,7 @@ var ColorPicker = function (_a) {
 };
 
 var TrendingsInitialState = {
-    timeScopeStart: moment$1(new Date()).subtract(1, "days").toDate(),
+    timeScopeStart: moment$3(new Date()).subtract(1, "days").toDate(),
     timeScopeEnd: new Date(),
     scope: "1 day",
     graphPan: false,
@@ -11448,32 +11360,32 @@ var TrendingsReducer = createSlice({
                 if (payload.scope !== "custom") {
                     switch (payload.scope) {
                         case "10 min":
-                            state.timeScopeStart = moment$1(state.timeScopeEnd)
+                            state.timeScopeStart = moment$3(state.timeScopeEnd)
                                 .subtract(10, "minutes")
                                 .toDate();
                             break;
                         case "1 hour":
-                            state.timeScopeStart = moment$1(state.timeScopeEnd)
+                            state.timeScopeStart = moment$3(state.timeScopeEnd)
                                 .subtract(1, "hours")
                                 .toDate();
                             break;
                         case "4 hours":
-                            state.timeScopeStart = moment$1(state.timeScopeEnd)
+                            state.timeScopeStart = moment$3(state.timeScopeEnd)
                                 .subtract(4, "hours")
                                 .toDate();
                             break;
                         case "12 hours":
-                            state.timeScopeStart = moment$1(state.timeScopeEnd)
+                            state.timeScopeStart = moment$3(state.timeScopeEnd)
                                 .subtract(12, "hours")
                                 .toDate();
                             break;
                         case "1 day":
-                            state.timeScopeStart = moment$1(state.timeScopeEnd)
+                            state.timeScopeStart = moment$3(state.timeScopeEnd)
                                 .subtract(1, "days")
                                 .toDate();
                             break;
                         case "10 days":
-                            state.timeScopeStart = moment$1(state.timeScopeEnd)
+                            state.timeScopeStart = moment$3(state.timeScopeEnd)
                                 .subtract(10, "days")
                                 .toDate();
                             break;
@@ -11504,32 +11416,32 @@ var TrendingsReducer = createSlice({
                 if (state.scope !== "custom") {
                     switch (state.scope) {
                         case "10 min":
-                            state.timeScopeEnd = moment$1(payload.start)
+                            state.timeScopeEnd = moment$3(payload.start)
                                 .add(10, "minutes")
                                 .toDate();
                             break;
                         case "1 hour":
-                            state.timeScopeEnd = moment$1(payload.start)
+                            state.timeScopeEnd = moment$3(payload.start)
                                 .add(1, "hours")
                                 .toDate();
                             break;
                         case "4 hours":
-                            state.timeScopeEnd = moment$1(payload.start)
+                            state.timeScopeEnd = moment$3(payload.start)
                                 .add(4, "hours")
                                 .toDate();
                             break;
                         case "12 hours":
-                            state.timeScopeEnd = moment$1(payload.start)
+                            state.timeScopeEnd = moment$3(payload.start)
                                 .add(12, "hours")
                                 .toDate();
                             break;
                         case "1 day":
-                            state.timeScopeEnd = moment$1(payload.start)
+                            state.timeScopeEnd = moment$3(payload.start)
                                 .add(1, "days")
                                 .toDate();
                             break;
                         case "10 days":
-                            state.timeScopeEnd = moment$1(payload.start)
+                            state.timeScopeEnd = moment$3(payload.start)
                                 .add(10, "days")
                                 .toDate();
                             break;
@@ -11542,32 +11454,32 @@ var TrendingsReducer = createSlice({
                 if (state.scope !== "custom") {
                     switch (state.scope) {
                         case "10 min":
-                            state.timeScopeStart = moment$1(payload.end)
+                            state.timeScopeStart = moment$3(payload.end)
                                 .subtract(10, "minutes")
                                 .toDate();
                             break;
                         case "1 hour":
-                            state.timeScopeStart = moment$1(payload.end)
+                            state.timeScopeStart = moment$3(payload.end)
                                 .subtract(1, "hours")
                                 .toDate();
                             break;
                         case "4 hours":
-                            state.timeScopeStart = moment$1(payload.end)
+                            state.timeScopeStart = moment$3(payload.end)
                                 .subtract(4, "hours")
                                 .toDate();
                             break;
                         case "12 hours":
-                            state.timeScopeStart = moment$1(payload.end)
+                            state.timeScopeStart = moment$3(payload.end)
                                 .subtract(12, "hours")
                                 .toDate();
                             break;
                         case "1 day":
-                            state.timeScopeStart = moment$1(payload.end)
+                            state.timeScopeStart = moment$3(payload.end)
                                 .subtract(1, "days")
                                 .toDate();
                             break;
                         case "10 days":
-                            state.timeScopeStart = moment$1(payload.end)
+                            state.timeScopeStart = moment$3(payload.end)
                                 .subtract(10, "days")
                                 .toDate();
                             break;
@@ -13526,21 +13438,21 @@ var dateNavigator = function (startDate, endDate, scope, operator, current) {
         }
         else {
             var _a = scope.split(" "), quantity = _a[0], duration = _a[1];
-            newStartDate = moment$1(newEndDate)
+            newStartDate = moment$3(newEndDate)
                 .subtract(quantity, duration[0])
                 .toDate();
         }
     }
     else {
         if (scope === "custom") {
-            var durationInMs = moment$1(endDate).diff(moment$1(startDate));
-            newStartDate = moment$1(startDate)[operator](durationInMs).toDate();
+            var durationInMs = moment$3(endDate).diff(moment$3(startDate));
+            newStartDate = moment$3(startDate)[operator](durationInMs).toDate();
         }
         else {
             var _b = scope.split(" "), quantity = _b[0], duration = _b[1];
-            newStartDate = moment$1(startDate)[operator](quantity, duration[0])
+            newStartDate = moment$3(startDate)[operator](quantity, duration[0])
                 .toDate();
-            newEndDate = moment$1(endDate)[operator](quantity, duration[0])
+            newEndDate = moment$3(endDate)[operator](quantity, duration[0])
                 .toDate();
         }
     }
@@ -13569,7 +13481,7 @@ var Header = function (_a) {
     var handleDateChange = function (newValue, key) {
         var _a;
         //@ts-ignore
-        actions.setTotalScope((_a = {}, _a[key] = moment$1(newValue).toDate(), _a));
+        actions.setTotalScope((_a = {}, _a[key] = moment$3(newValue).toDate(), _a));
     };
     var handleChangeScope = function (e) {
         var newScope = e.target.value;
@@ -13605,7 +13517,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$1(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$3(state.timeScopeStart).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "start"); }, InputLabelProps: {
                         shrink: true,
                         style: { marginLeft: "10px" },
                     }, InputProps: {
@@ -13622,7 +13534,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$1(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$3(state.timeScopeEnd).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "end"); }, InputLabelProps: {
                         shrink: true,
                         style: { marginLeft: "10px" },
                     } })),
@@ -14278,7 +14190,7 @@ var themeMESF = createTheme({
 });
 
 var timezone = TimeService.getInstance().getServerTimeZone();
-moment.tz.setDefault(timezone);
+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;
@@ -14286,7 +14198,7 @@ function MESFMain(_a) {
         React__default.createElement(CssBaseline, null),
         React__default.createElement(ThemeProvider, { theme: themeMESF },
             React__default.createElement(AuthProvider, { authConfig: authentication },
-                React__default.createElement(LocalizationProvider, { dateAdapter: AdapterMoment, dateLibInstance: moment },
+                React__default.createElement(LocalizationProvider, { dateAdapter: AdapterMoment, dateLibInstance: moment$2 },
                     React__default.createElement(UserProvider, null,
                         React__default.createElement(AssetProvider, null,
                             React__default.createElement(UTLSettingsProvider, null,
@@ -14445,5 +14357,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, HorizontalTextControl, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, NumericTextControl, ShiftDayNavigatorControl, ShiftNavigatorProvider, ShiftPeriodNavigatorControl, SimplePasswordControl, SimpleSelectorControl, SimpleTextAreaControl, SimpleTextControl, TimeAndUserMenu, TimeFormatter, TimeService, TreePickerControl, TreePickerControlV2, TrendingsPage, USER_LABELS, UTLSettingsProvider, UploadFileControl, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getError, getMomentTz, getProfiles, getShiftByParameters, getShiftStyle, getShiftsRangeByParameters, getTokenFromLS, getUserPermissionsFromAPI, getUsers, renewToken, setPassword, setProfilesToUser, themeMESF, upsertUser, useAssetContext, useContextMenuMESF, useHasPermission, useMesfRealtime, useShiftNavigator, useShiftNavigatorManager, useStyles$F as useStyles, useToken, useUTLSettingsContext, useUserContext };
+export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, ShiftDayNavigatorControl, ShiftNavigatorProvider, ShiftPeriodNavigatorControl, SimplePasswordControl, SimpleSelectorControl, TimeAndUserMenu, TimeFormatter, TimeService, TreePickerControl, TreePickerControlV2, TrendingsPage, USER_LABELS, UTLSettingsProvider, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getError, getMomentTz, getProfiles, getShiftByParameters, getShiftStyle, getShiftsRangeByParameters, getTokenFromLS, getUserPermissionsFromAPI, getUsers, renewToken, setPassword, setProfilesToUser, themeMESF, upsertUser, useAssetContext, useContextMenuMESF, useHasPermission, useMesfRealtime, useShiftNavigator, useShiftNavigatorManager, useStyles$E as useStyles, useToken, useUTLSettingsContext, useUserContext };
 //# sourceMappingURL=index.esm.js.map