@dexteel/mesf-core 4.26.5 → 4.28.0

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 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, Card, CardContent, CardActions, Snackbar, CircularProgress, Paper, InputLabel, Select, FormHelperText, DialogContentText, FormControlLabel, Badge, useTheme, FormControl, Input, Chip, Tooltip, ListItemIcon, Box, List, ListItem, ListItemText, MenuList, Divider, debounce } from '@material-ui/core';
-import { get as get$1, isNil as isNil$1, isEmpty, values, round, isNaN, isNumber } from 'lodash-es';
+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, Card, CardContent, CardActions, CircularProgress, Snackbar, FormControlLabel, Switch, Paper, InputLabel, Select, FormHelperText, DialogContentText, Badge, useTheme, FormControl, Input, Chip, Tooltip, ListItemIcon, Box, List, ListItem, ListItemText, MenuList, Divider, debounce } from '@material-ui/core';
+import { isNil, get, isEmpty, values, round, isNaN, isNumber } from 'lodash-es';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, useMemo, Component, createContext, useContext, useCallback, lazy, Suspense } from 'react';
 import { ArrowRight, ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRight, Send } from '@material-ui/icons';
@@ -18,13 +18,13 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import { AgGridReact } from 'ag-grid-react';
 import MomentUtils from '@date-io/moment';
 import { MuiPickersUtilsProvider, KeyboardDatePicker, KeyboardTimePicker } from '@material-ui/pickers';
-import moment$4 from 'moment';
+import moment$7 from 'moment';
 import EditIcon from '@material-ui/icons/Edit';
 import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd';
-import { isNil, get } from 'lodash';
+import { isNil as isNil$1, get as get$1 } from 'lodash';
 import { HubConnectionBuilder, LogLevel as LogLevel$1 } from '@microsoft/signalr';
 export * from '@microsoft/signalr';
-import { Alert as Alert$3, Autocomplete } from '@material-ui/lab';
+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';
@@ -44,9 +44,9 @@ import InsertChartIcon from '@material-ui/icons/InsertChart';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import SkipNextIcon from '@material-ui/icons/SkipNext';
 import { Line } from 'react-chartjs-2';
-import { ClearIcon, DatePicker as DatePicker$1, CalendarIcon, LocalizationProvider } from '@mui/x-date-pickers';
+import { ClearIcon, DateTimePicker, DatePicker as DatePicker$1, CalendarIcon, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
-import moment$5 from 'moment-timezone';
+import moment$6 from 'moment-timezone';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
 import Dialog from '@material-ui/core/Dialog';
 import IconButton from '@material-ui/core/IconButton';
@@ -62,14 +62,14 @@ import { useSpring, animated } from '@react-spring/web';
 import { DataGrid, GridOverlay } from '@material-ui/data-grid';
 import { format, fromZonedTime, formatInTimeZone } from 'date-fns-tz';
 import { findIana } from 'windows-iana';
-import Alert$2 from '@material-ui/lab/Alert';
+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 Alert$3 from '@material-ui/lab/Alert';
 import 'ag-grid-enterprise/styles/ag-grid.css';
 import 'ag-grid-enterprise/styles/ag-theme-balham.min.css';
-import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import AddBoxIcon from '@material-ui/icons/AddBox';
 import FindInPageIcon from '@material-ui/icons/FindInPage';
@@ -406,6 +406,9 @@ var useTreviewStyle = makeStyles(function (theme) { return ({
         textDecoration: "line-through",
         textDecorationColor: "red"
     },
+    treeLabelUnselectable: {
+        color: "grey"
+    },
     smallCheckbox: {
         transform: "scale(0.8)"
     }
@@ -511,6 +514,11 @@ var ModalTreeFilterControl = function (props) {
         setExpanded(expandedNode);
     };
     var handleChange = function (event, nodeIds) {
+        var findNode = getNodeData(data, nodeIds !== undefined ? Number.parseInt(nodeIds) : -1);
+        if ((findNode === null || findNode === void 0 ? void 0 : findNode.hasOwnProperty("isSelectable")) &&
+            findNode.isSelectable === false) {
+            return;
+        }
         setValue(Number.parseInt(nodeIds));
     };
     var handleToogle = function (event, nodeIds) {
@@ -552,7 +560,10 @@ var ModalTreeFilterControl = function (props) {
     var renderTree = function (nodes) { return (React__default.createElement(StyledTreeItem, { isChecked: selectedNodes.includes(nodes.id), key: nodes.id, nodeId: nodes.id.toString(), label: React__default.createElement("div", { className: classes.treeLabelRoot },
             nodes.isCode === true && (React__default.createElement(Code, { className: classes.treLabelIcon, htmlColor: "#1ABC9C" })),
             nodes.isCode === false && (React__default.createElement(FolderIcon, { className: classes.treLabelIcon, htmlColor: "#F1C40F" })),
-            React__default.createElement(Typography$1, { variant: "body2", className: "".concat(classes.treeLabelText, " ").concat(!nodes.isActive ? classes.treeLabelInactive : "") },
+            React__default.createElement(Typography$1, { variant: "body2", className: "\n\t\t\t\t\t\t\t".concat(classes.treeLabelText, "\n\t\t\t\t\t\t\t").concat(!nodes.isActive ? classes.treeLabelInactive : "", "\n\t\t\t\t\t\t\t").concat((nodes === null || nodes === void 0 ? void 0 : nodes.hasOwnProperty("isSelectable")) &&
+                    nodes.isSelectable === false
+                    ? classes.treeLabelUnselectable
+                    : "", "\n\t\t\t\t\t\t") },
                 React__default.createElement("span", null,
                     nodes.isCode && (React__default.createElement("i", { className: "fas fa-square mr-2", style: { color: nodes.delayCategoryColor || "#FFFFFF" } })),
                     nodes.name)),
@@ -702,10 +713,35 @@ function findNameById(node, id) {
     }
     return null;
 }
+function getNodePath(node, nodeId, parentPath, isRoot) {
+    if (parentPath === void 0) { parentPath = ""; }
+    if (isRoot === void 0) { isRoot = true; }
+    if (node.id === nodeId) {
+        if (isRoot) {
+            return "";
+        }
+        return parentPath ? "".concat(parentPath, "/").concat(node.name) : node.name;
+    }
+    if (node.children && node.children.length > 0) {
+        for (var _i = 0, _a = node.children; _i < _a.length; _i++) {
+            var child = _a[_i];
+            var currentPath = isRoot
+                ? ""
+                : parentPath
+                    ? "".concat(parentPath, "/").concat(node.name)
+                    : node.name;
+            var foundPath = getNodePath(child, nodeId, currentPath, false);
+            if (foundPath !== null) {
+                return foundPath;
+            }
+        }
+    }
+    return null;
+}
 var TreePickerControlV2 = function (props) {
     var classes = useStyles$A();
-    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, showAssetTree = props.showAssetTree, onHide = props.onHide, _e = props.listAssetDrawings, listAssetDrawings = _e === void 0 ? [] : _e, onSuccess = props.onSuccess, isLoading = props.isLoading, _f = props.disabled, disabled = _f === void 0 ? false : _f, other = __rest(props, ["value", "onSelect", "styleLabel", "dataSource", "getOptionName", "inputTitle", "showPath", "multipleSelectNodes", "showClearButton", "showAssetTree", "onHide", "listAssetDrawings", "onSuccess", "isLoading", "disabled"]);
-    var _g = useState(false), open = _g[0], setOpen = _g[1];
+    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) {
         event.stopPropagation();
         if (disabled)
@@ -721,14 +757,15 @@ var TreePickerControlV2 = function (props) {
         }
     };
     var description = useMemo(function () { return findNameById(dataSource, value) || ""; }, [dataSource, value]);
+    var fullPath = useMemo(function () { return getNodePath(dataSource, value) || ""; }, [dataSource, value]);
     return (React__default.createElement(Grid, { container: true, className: classes.root },
         !showAssetTree ? (React__default.createElement(Grid, { container: true, item: true, md: 12, xs: 12, style: { position: "relative" }, title: props.description },
             React__default.createElement(Grid, { item: true, style: { position: "relative", width: "100%" } },
-                React__default.createElement(TextField, { id: "treePickerTextField", label: inputTitle || "", variant: "outlined", value: description, margin: "dense", autoComplete: "off", fullWidth: true, disabled: true, InputProps: {
+                React__default.createElement(TextField, { id: "treePickerTextField", label: inputTitle || "", variant: "outlined", value: showFullPath ? fullPath : description, margin: "dense", autoComplete: "off", fullWidth: true, disabled: true, InputProps: {
                         style: {
                             color: disabled ? "grey" : "black",
                             cursor: "pointer",
-                            paddingRight: 45
+                            paddingRight: 25
                         },
                         endAdornment: (React__default.createElement(InputAdornment, { position: "end", style: {
                                 cursor: "pointer"
@@ -739,7 +776,7 @@ var TreePickerControlV2 = function (props) {
                                 }, style: {
                                     cursor: "pointer",
                                     zIndex: 100
-                                }, edge: "end" },
+                                }, edge: "end", size: "small" },
                                 React__default.createElement(ClearIcon, null))) : null,
                             React__default.createElement(AccountTreeIcon, { style: {
                                     cursor: "pointer"
@@ -1139,45 +1176,73 @@ var LongFilterPanel = /** @class */ (function (_super) {
     return LongFilterPanel;
 }(Component));
 
-var Alert = function (props) {
-    return React__default.createElement(Alert$2, __assign({ elevation: 6, variant: "filled" }, props));
-};
-
-var JobsInitialState = {
-    jobsData: [],
-    blockButtons: false
-};
-var JobsReducer = createSlice({
-    name: "__",
-    initialState: JobsInitialState,
-    reducers: {
-        setJobs: function (state, _a) {
-            var payload = _a.payload;
-            state.jobsData = payload;
-        },
-        setBlockButtons: function (state, _a) {
-            var payload = _a.payload;
-            state.blockButtons = payload;
-        }
+var TimeService = /** @class */ (function () {
+    function TimeService() {
+        this.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     }
-});
-
-var JobsContext = createContext({
-    state: JobsReducer.getInitialState(),
-    actions: JobsReducer.actions
-});
-var useJobsContext = function () { return useContext(JobsContext); };
-var JobsProvider = function (_a) {
-    var children = _a.children;
-    var _b = useComplexState({
-        initialState: JobsReducer.getInitialState(),
-        reducers: JobsReducer.caseReducers
-    }), state = _b[0], actions = _b[1];
-    return (React__default.createElement(JobsContext.Provider, { value: { state: state, actions: actions } }, children));
-};
+    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$6.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$6; };
+var dxtServerTimeZone = function () {
+    return TimeService.getInstance().getServerTimeZone;
+};
+var dxtToUTC = TimeService.getInstance().toUTC;
+var dxtToLocalServerTime = TimeService.getInstance().toLocalServerTime;
 
+var moment$5 = getMomentTz();
 var GetJobsStatus = function () { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, resp;
+    var apiService, resp, rows;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -1185,67 +1250,99 @@ var GetJobsStatus = function () { return __awaiter(void 0, void 0, void 0, funct
                 return [4 /*yield*/, apiService.callV2("[SYSTEM].[GetJobsStatus]", [])];
             case 1:
                 resp = _a.sent();
-                return [2 /*return*/, resp];
+                if (resp.ok) {
+                    rows = get(resp, "data.tables[0].rows", []);
+                    rows = rows.map(function (job) { return (__assign(__assign({}, job), { LastStarted: job.LastStarted
+                            ? moment$5.utc(job["LastStarted"]).toDate()
+                            : null, LastContact: job.LastContact
+                            ? moment$5.utc(job["LastContact"]).toDate()
+                            : null, LastCounter: job.LastCounter
+                            ? moment$5.utc(job["LastCounter"]).toDate()
+                            : null, StartTime: job.StartTime ? moment$5.utc(job["StartTime"]).toDate() : null, NextExecutionTime: job.NextExecutionTime
+                            ? moment$5.utc(job["NextExecutionTime"]).toDate()
+                            : null, LastExecutionTime: job.LastExecutionTime
+                            ? moment$5.utc(job["LastExecutionTime"]).toDate()
+                            : null })); });
+                    return [2 /*return*/, {
+                            ok: true,
+                            data: rows
+                        }];
+                }
+                else {
+                    return [2 /*return*/, {
+                            ok: false,
+                            message: resp.message
+                        }];
+                }
         }
     });
 }); };
-var SetJobEnable = function (Enable, sProcedure) { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, parameters, resp;
+var upsertJob = function (job) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
                 apiService = new MESApiService();
-                parameters = [];
-                parameters.push({ name: "Enable", value: !Enable });
-                parameters.push({ name: "sProcedure", value: sProcedure });
+                parameters = [
+                    { name: "JobId", value: job.JobId },
+                    { name: "sProcedure", value: job.sProcedure },
+                    { name: "StartTime", value: job.StartTime },
+                    { name: "PeriodTime", value: job.PeriodTime },
+                    { name: "RestartAfterFailure", value: job.RestartAfterFailure },
+                ];
+                return [4 /*yield*/, apiService.callV2("[SYSTEM].[UpsertJob]", parameters)];
+            case 1: return [2 /*return*/, _a.sent()];
+        }
+    });
+}); };
+var SetJobEnable = function (enabled, jobId) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [
+                    { name: "Enabled", value: enabled !== null && enabled !== void 0 ? enabled : true },
+                    { name: "JobId", value: jobId },
+                ];
                 return [4 /*yield*/, apiService.callV2("[SYSTEM].[SetJobEnable]", parameters)];
-            case 1:
-                resp = _a.sent();
-                return [2 /*return*/, resp];
+            case 1: return [2 /*return*/, _a.sent()];
         }
     });
 }); };
-var RestartJob = function (sProcedure) { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, parameters, resp;
+var RestartJob = function (jobId) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
                 apiService = new MESApiService();
-                parameters = [];
-                parameters.push({ name: "sProcedure", value: sProcedure });
+                parameters = [{ name: "JobId", value: jobId }];
                 return [4 /*yield*/, apiService.callV2("[SYSTEM].[RestartJob]", parameters)];
-            case 1:
-                resp = _a.sent();
-                return [2 /*return*/, resp];
+            case 1: return [2 /*return*/, _a.sent()];
         }
     });
 }); };
 
 var ResetJob = function (_a) {
-    var rowSelected = _a.rowSelected, show = _a.show, onHide = _a.onHide, setSnackbarLoading = _a.setSnackbarLoading, setSnackbarSuccessfulMessage = _a.setSnackbarSuccessfulMessage;
+    var jobSelected = _a.jobSelected, show = _a.show, onHide = _a.onHide;
     var _b = useState(""), error = _b[0], setError = _b[1];
     var _c = useState(false), isLoading = _c[0], setIsLoading = _c[1];
-    var setBlockButtons = useJobsContext().actions.setBlockButtons;
+    var _d = useState(false), openSnackbar = _d[0], setOpenSnackbar = _d[1];
     var onSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var sProcedure;
-        return __generator(this, function (_a) {
-            sProcedure = rowSelected.sProcedure;
-            setSnackbarLoading(true);
-            setBlockButtons(true);
+        var _a;
+        return __generator(this, function (_b) {
             setIsLoading(true);
-            RestartJob(sProcedure)
+            RestartJob((_a = jobSelected === null || jobSelected === void 0 ? void 0 : jobSelected.JobId) !== null && _a !== void 0 ? _a : null)
                 .then(function (res) {
                 if (res.ok) {
                     onHide(true);
-                    setSnackbarSuccessfulMessage(true);
+                    setOpenSnackbar(true);
                 }
                 else {
                     setError(res.message);
                 }
             })["finally"](function () {
                 setIsLoading(false);
-                setSnackbarLoading(false);
-                setBlockButtons(false);
             });
             return [2 /*return*/];
         });
@@ -1254,81 +1351,229 @@ var ResetJob = function (_a) {
         React__default.createElement(MesfModal, { title: "RESET JOB", open: show, handleClose: function () { return onHide(false); }, id: "reset-job-modal" },
             React__default.createElement(MesfModal.Content, null, "Are you sure you want to reset? This action leaves the task in enable"),
             React__default.createElement(MesfModal.Actions, { style: { padding: "16px 24px" } },
-                React__default.createElement(Button, { onClick: function () { return onHide(false); }, autoFocus: true, color: "default" }, "DISAGREE"),
-                React__default.createElement(Button, { onClick: function () {
-                        onSubmit();
-                    }, disabled: isLoading, variant: "outlined", color: "primary" }, "AGREE"))),
-        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
+                React__default.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
+                    React__default.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                        React__default.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Disagree")),
+                    React__default.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                        React__default.createElement(Button, { fullWidth: true, startIcon: isLoading && React__default.createElement(CircularProgress, { size: "1rem" }), onClick: function () { return onSubmit(); }, disabled: isLoading, variant: "contained", color: "primary" }, "Agree"))))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
+        React__default.createElement(Snackbar, { open: openSnackbar, autoHideDuration: 2500, onClose: function () { return setOpenSnackbar(false); } },
+            React__default.createElement(Alert$2, { severity: "success", onClose: function () { return setOpenSnackbar(false); } }, "The job was reseted succesfully"))));
 };
 
 var OnEnableJob = function (_a) {
-    var rowSelected = _a.rowSelected, show = _a.show, onHide = _a.onHide;
+    var jobSelected = _a.jobSelected, show = _a.show, onHide = _a.onHide;
     var _b = useState(""), error = _b[0], setError = _b[1];
     var _c = useState(false), isLoading = _c[0], setIsLoading = _c[1];
-    var setBlockButtons = useJobsContext().actions.setBlockButtons;
+    var _d = useState(false), openSnackbar = _d[0], setOpenSnackbar = _d[1];
     var onSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var Enabled, sProcedure;
+        var resp;
         return __generator(this, function (_a) {
-            Enabled = rowSelected.Enabled, sProcedure = rowSelected.sProcedure;
-            setBlockButtons(true);
-            setIsLoading(true);
-            SetJobEnable(Enabled, sProcedure)
-                .then(function (res) {
-                if (res.ok) {
-                    onHide(true);
-                }
-                else {
-                    setError(res.message);
-                }
-            })["finally"](function () {
-                setIsLoading(false);
-                setBlockButtons(false);
-            });
-            return [2 /*return*/];
+            switch (_a.label) {
+                case 0:
+                    setIsLoading(true);
+                    return [4 /*yield*/, SetJobEnable(!(jobSelected === null || jobSelected === void 0 ? void 0 : jobSelected.Enabled), jobSelected === null || jobSelected === void 0 ? void 0 : jobSelected.JobId)];
+                case 1:
+                    resp = _a.sent();
+                    if (resp.ok) {
+                        setOpenSnackbar(true);
+                        onHide(true);
+                    }
+                    else {
+                        setError(resp.message);
+                        onHide(false);
+                    }
+                    setIsLoading(false);
+                    return [2 /*return*/];
+            }
         });
     }); };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(MesfModal, { title: "ENABLE JOB", open: show, handleClose: function () { return onHide(false); }, id: "enable-job-modal" },
-            React__default.createElement(MesfModal.Content, null, "Are you sure you want to reset? This action leaves the task in enable"),
+        React__default.createElement(MesfModal, { title: "".concat((jobSelected === null || jobSelected === void 0 ? void 0 : jobSelected.Enabled) ? "DISABLE" : "ENABLE", " JOB"), open: show, handleClose: function () { return onHide(false); }, id: "enable-job-modal" },
+            React__default.createElement(MesfModal.Content, null,
+                "Are you sure you want to ",
+                (jobSelected === null || jobSelected === void 0 ? void 0 : jobSelected.Enabled) ? "disable" : "enable",
+                " ",
+                "the job?"),
             React__default.createElement(MesfModal.Actions, { style: { padding: "16px 24px" } },
-                React__default.createElement(Button, { onClick: function () { return onHide(false); }, autoFocus: true, color: "default" }, "DISAGREE"),
-                React__default.createElement(Button, { onClick: function () {
-                        onSubmit();
-                    }, disabled: isLoading, variant: "outlined", color: "primary" }, "AGREE"))),
+                React__default.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
+                    React__default.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                        React__default.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Disagree")),
+                    React__default.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                        React__default.createElement(Button, { fullWidth: true, startIcon: isLoading && React__default.createElement(CircularProgress, { size: "1rem" }), onClick: function () { return onSubmit(); }, disabled: isLoading, variant: "contained", color: "primary" }, "Agree"))))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
+        React__default.createElement(Snackbar, { open: openSnackbar, autoHideDuration: 2500, onClose: function () { return setOpenSnackbar(false); } },
+            React__default.createElement(Alert$2, { severity: "success", onClose: function () { return setOpenSnackbar(false); } },
+                "The job was ",
+                (jobSelected === null || jobSelected === void 0 ? void 0 : jobSelected.Enabled) ? "disabled" : "enabled",
+                " ",
+                "succesfully"))));
+};
+
+var moment$4 = getMomentTz();
+var JobDetails = function (_a) {
+    var job = _a.job, modal = _a.modal, onHide = _a.onHide;
+    var _b = useState(false), isSubmitLoading = _b[0], setIsSubmitLoading = _b[1];
+    var _c = useState(""), error = _c[0], setError = _c[1];
+    var _d = useState(false), openSnackbar = _d[0], setOpenSnackbar = _d[1];
+    var _e = useForm({
+        mode: "onChange"
+    }), control = _e.control, reset = _e.reset, handleSubmit = _e.handleSubmit, dirtyFields = _e.formState.dirtyFields;
+    var isFormDirty = !(Object.keys(dirtyFields).length === 0);
+    var onSubmit = function (data) { return __awaiter(void 0, void 0, void 0, function () {
+        var resp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsSubmitLoading(true);
+                    if (!(modal !== "reset")) return [3 /*break*/, 2];
+                    return [4 /*yield*/, upsertJob(data)];
+                case 1:
+                    resp = _a.sent();
+                    if (resp.ok) {
+                        setOpenSnackbar(true);
+                        onHide({ close: false, entityId: resp.data.returnValue });
+                    }
+                    else {
+                        setError(resp.message);
+                    }
+                    _a.label = 2;
+                case 2:
+                    setIsSubmitLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        if (modal === "create" || modal === "update") {
+            reset(job || {
+                sProcedure: "",
+                RestartAfterFailure: true,
+                PeriodTime: null,
+                StartTime: null,
+                LastStatus: null,
+                LastExecutionTime: null,
+                LastExecutionResult: "",
+                NextExecutionTime: null
+            });
+            setIsSubmitLoading(false);
+        }
+    }, [modal, job]);
+    return (React__default.createElement(React__default.Fragment, null,
+        (job === null || modal !== "update") && modal !== "create" ? (React__default.createElement("div", { style: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                height: "100%",
+                width: "100%"
+            } },
+            React__default.createElement(Typography$1, null, "Select a job or create a new one"))) : (React__default.createElement("form", { onSubmit: handleSubmit(onSubmit) },
+            React__default.createElement(Grid, { container: true, spacing: 1 },
+                React__default.createElement(Grid, { item: true, xs: 12, md: 12 },
+                    React__default.createElement(Controller, { name: "sProcedure", control: control, rules: { required: "Name is required" }, render: function (_a) {
+                            var _b;
+                            var field = _a.field, error = _a.fieldState.error;
+                            return (React__default.createElement(TextField, { label: "Name", value: (_b = field.value) !== null && _b !== void 0 ? _b : "", onChange: field.onChange, variant: "outlined", size: "small", fullWidth: true, error: !!error, helperText: error === null || error === void 0 ? void 0 : error.message }));
+                        } })),
+                React__default.createElement(Grid, { item: true, xs: 12, md: 6 },
+                    React__default.createElement(Controller, { name: "RestartAfterFailure", control: control, render: function (_a) {
+                            var field = _a.field;
+                            return (React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { checked: !!field.value, onChange: field.onChange, name: "RestartAfterFailure", color: "primary" }), label: "Restart After Failure" }));
+                        } })),
+                React__default.createElement(Grid, { item: true, xs: 12, md: 6, style: { marginTop: -7 } },
+                    React__default.createElement(Controller, { name: "PeriodTime", control: control, rules: { required: "Period time is required" }, render: function (_a) {
+                            var _b;
+                            var field = _a.field, error = _a.fieldState.error;
+                            return (React__default.createElement(TextField, { label: "Period Time", value: (_b = field.value) !== null && _b !== void 0 ? _b : "", onChange: field.onChange, variant: "outlined", size: "small", margin: "dense", fullWidth: true, error: !!error, helperText: error === null || error === void 0 ? void 0 : error.message }));
+                        } })),
+                React__default.createElement(Grid, { item: true, xs: 12, md: 6 },
+                    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$4(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",
+                                            error: !!error
+                                        }
+                                    } })));
+                        } })),
+                React__default.createElement(Grid, { item: true, xs: 12, md: 6 },
+                    React__default.createElement(Controller, { name: "LastStatus", control: control, render: function (_a) {
+                            var _b;
+                            var field = _a.field;
+                            return (React__default.createElement(TextField, { label: "Last Status", value: (_b = field.value) !== null && _b !== void 0 ? _b : "", variant: "outlined", size: "small", fullWidth: true, disabled: true }));
+                        } })),
+                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$4(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"
+                                    }
+                                } }));
+                        } })),
+                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$4(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"
+                                    }
+                                } }));
+                        } })),
+                React__default.createElement(Grid, { item: true, xs: 12, md: 12 },
+                    React__default.createElement(Controller, { name: "LastExecutionResult", control: control, render: function (_a) {
+                            var _b;
+                            var field = _a.field;
+                            return (React__default.createElement(TextField, { label: "Last Execution Result", value: (_b = field.value) !== null && _b !== void 0 ? _b : "", variant: "outlined", size: "small", margin: "dense", fullWidth: true, multiline: true, minRows: 2, maxRows: 2, disabled: true }));
+                        } })),
+                React__default.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end", style: { margin: 15 } },
+                    React__default.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
+                        React__default.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                            React__default.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide({ close: true }); } }, "Close")),
+                        React__default.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                            React__default.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React__default.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading || !isFormDirty, variant: "contained", color: "primary", type: "submit" }, "Save"))))))),
+        React__default.createElement(Snackbar, { open: openSnackbar, autoHideDuration: 2500, onClose: function () { return setOpenSnackbar(false); } },
+            React__default.createElement(Alert$2, { severity: "success", onClose: function () { return setOpenSnackbar(false); } }, "The job was updated succesfully")),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
 var useJobsOptionsFunctions = function (_a) {
-    var getJobsFromAPI = _a.getJobsFromAPI, setRowSelected = _a.setRowSelected;
+    var setShowModal = _a.setShowModal, setJobSelected = _a.setJobSelected, getJobsFromAPI = _a.getJobsFromAPI;
     var getMenuOptions = function (data) {
         var options = [];
-        if (!data) {
-            options = options.concat([
-                {
-                    name: "Refresh Job",
-                    key: "refresh_job",
-                    onClick: function () {
-                        getJobsFromAPI();
-                    },
-                    icon: React__default.createElement(RefreshIcon, null)
+        options = options.concat([
+            {
+                name: "New Job",
+                key: "new_job",
+                onClick: function () {
+                    setShowModal("create");
                 },
-            ]);
-        }
-        else {
+                icon: React__default.createElement(PlaylistAddIcon, null)
+            },
+        ]);
+        if (data) {
             options = options.concat([
                 {
                     name: "Enable Job",
                     key: "enable_job",
+                    disabled: data.Enabled ? true : false,
                     onClick: function () {
-                        setRowSelected(data);
+                        setShowModal("enable");
+                        setJobSelected(data);
                     },
                     icon: React__default.createElement(ToggleOnIcon, null)
                 },
                 {
                     name: "Disable Job",
                     key: "disable_job",
+                    disabled: data.Enabled ? false : true,
                     onClick: function () {
-                        setRowSelected(data);
+                        setShowModal("enable");
+                        setJobSelected(data);
                     },
                     icon: React__default.createElement(ToggleOfIcon, null)
                 },
@@ -1336,20 +1581,23 @@ var useJobsOptionsFunctions = function (_a) {
                     name: "Reset Job",
                     key: "reset_job",
                     onClick: function () {
-                        setRowSelected(data);
+                        setShowModal("reset");
+                        setJobSelected(data);
                     },
                     icon: React__default.createElement(ReplayIcon, null)
                 },
-                {
-                    name: "Refresh Job",
-                    key: "refresh_job",
-                    onClick: function () {
-                        getJobsFromAPI();
-                    },
-                    icon: React__default.createElement(RefreshIcon, null)
-                },
             ]);
         }
+        options = options.concat([
+            {
+                name: "Refresh Job",
+                key: "refresh_job",
+                onClick: function () {
+                    getJobsFromAPI();
+                },
+                icon: React__default.createElement(RefreshIcon, null)
+            },
+        ]);
         return options;
     };
     return {
@@ -1357,6 +1605,39 @@ var useJobsOptionsFunctions = function (_a) {
     };
 };
 
+var JobsInitialState = {
+    jobsData: [],
+    blockButtons: false
+};
+var JobsReducer = createSlice({
+    name: "__",
+    initialState: JobsInitialState,
+    reducers: {
+        setJobs: function (state, _a) {
+            var payload = _a.payload;
+            state.jobsData = payload;
+        },
+        setBlockButtons: function (state, _a) {
+            var payload = _a.payload;
+            state.blockButtons = payload;
+        }
+    }
+});
+
+var JobsContext = createContext({
+    state: JobsReducer.getInitialState(),
+    actions: JobsReducer.actions
+});
+var useJobsContext = function () { return useContext(JobsContext); };
+var JobsProvider = function (_a) {
+    var children = _a.children;
+    var _b = useComplexState({
+        initialState: JobsReducer.getInitialState(),
+        reducers: JobsReducer.caseReducers
+    }), state = _b[0], actions = _b[1];
+    return (React__default.createElement(JobsContext.Provider, { value: { state: state, actions: actions } }, children));
+};
+
 var useStyles$z = makeStyles(function (theme) { return ({
     buttons: {
         opacity: 0,
@@ -1373,63 +1654,9 @@ var useStyles$z = makeStyles(function (theme) { return ({
     }
 }); });
 var useJobsTableData = function (_a) {
-    var setRowSelected = _a.setRowSelected, showContextMenu = _a.showContextMenu;
-    var _b = useJobsContext().state, jobsData = _b.jobsData, blockButtons = _b.blockButtons;
+    var setShowModal = _a.setShowModal, setJobSelected = _a.setJobSelected, showContextMenu = _a.showContextMenu;
+    var rows = useJobsContext().state.jobsData;
     var classes = useStyles$z();
-    var rows = jobsData.map(function (_a) {
-        var JobId = _a.JobId, sProcedure = _a.sProcedure, Running = _a.Running, LastStarted = _a.LastStarted, LastCounter = _a.LastCounter, Enabled = _a.Enabled, RestartAfterFailure = _a.RestartAfterFailure, PeriodTime = _a.PeriodTime, StartTime = _a.StartTime, NextExecutionTime = _a.NextExecutionTime;
-        return ({
-            id: JobId,
-            sProcedure: sProcedure,
-            Running: Running,
-            LastStarted: LastStarted,
-            LastCounter: LastCounter,
-            Enabled: Enabled,
-            RestartAfterFailure: RestartAfterFailure,
-            PeriodTime: PeriodTime,
-            StartTime: StartTime,
-            NextExecutionTime: NextExecutionTime
-        });
-    });
-    var renderButtonEnable = function (params) {
-        var isDisabled = params.data.Enabled || blockButtons;
-        return (React__default.createElement("div", { style: {
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                height: "100%",
-                padding: 5
-            } },
-            React__default.createElement(Button, { style: { height: "100%", maxHeight: "27px" }, variant: "contained", fullWidth: true, color: "primary", onClick: function () {
-                    setRowSelected(params.data);
-                }, disabled: isDisabled }, "ENABLE")));
-    };
-    var renderButtonDisable = function (params) {
-        var isDisabled = !params.data.Enabled || blockButtons;
-        return (React__default.createElement("div", { style: {
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                height: "100%",
-                padding: 5
-            } },
-            React__default.createElement(Button, { style: { height: "100%", maxHeight: "27px" }, variant: "contained", fullWidth: true, color: "secondary", onClick: function () {
-                    setRowSelected(params.data);
-                }, disabled: isDisabled }, "DISABLE")));
-    };
-    var renderButtonReset = function (params) {
-        var isDisabled = !params.data.Enabled || blockButtons;
-        return (React__default.createElement("div", { style: {
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                height: "100%",
-                padding: 5
-            } },
-            React__default.createElement(Button, { style: { height: "100%", maxHeight: "27px" }, variant: "contained", fullWidth: true, color: "primary", onClick: function () {
-                    setRowSelected(params.data);
-                }, disabled: isDisabled }, "RESET")));
-    };
     var renderButtonMenu = function (params) {
         return (React__default.createElement(Grid, { container: true, style: {
                 height: "100%",
@@ -1437,90 +1664,21 @@ var useJobsTableData = function (_a) {
                 justifyContent: "center",
                 alignItems: "center"
             }, className: classes.buttons },
-            React__default.createElement(Grid, { item: true, xs: 12, md: 12, style: {
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center"
-                } },
-                React__default.createElement(Button, { style: {}, onClick: function (e) { return showContextMenu(e, params.data); } },
-                    React__default.createElement(FormatListBulletedSharpIcon, { style: { height: "auto" }, color: "action" })))));
-    };
-    var columnDefs = [
-        {
-            field: "sProcedure",
-            minWidth: 260,
-            headerName: "Procedure",
-            type: "string",
-            flex: 2,
-            cellStyle: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-            }
-        },
-        {
-            field: "Running",
-            minWidth: 60,
-            maxWidth: 60,
-            headerName: "Status",
-            valueFormatter: function (_a) {
-                var value = _a.value;
-                return (value ? "Running" : "Inactive");
-            },
-            flex: 1,
-            cellStyle: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-            }
-        },
-        {
-            field: "PeriodTime",
-            minWidth: 80,
-            maxWidth: 80,
-            headerName: "Period Time",
-            flex: 1,
-            valueFormatter: function (_a) {
-                var value = _a.value;
-                if (value === null || value === undefined)
-                    return "";
-                var horas = Math.floor(value / 3600);
-                var minutos = Math.floor((value % 3600) / 60);
-                var segundos = value % 60;
-                return "".concat(horas, "h ").concat(minutos, "min ").concat(segundos, "s");
-            },
-            cellStyle: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-            }
-        },
-        {
-            field: "StartTime",
-            minWidth: 130,
-            maxWidth: 130,
-            headerName: "Start Time",
-            valueFormatter: function (_a) {
-                var value = _a.value;
-                return value === null ? "NULL" : moment$4(value).format("DD/MM/YYYY HH:mm");
-            },
-            flex: 1,
-            cellStyle: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-            }
-        },
+            React__default.createElement(Grid, { item: true, xs: 12, md: 12, style: {
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center"
+                } },
+                React__default.createElement(Button, { style: {}, onClick: function (e) { return showContextMenu(e, params.data, "jobsContext"); } },
+                    React__default.createElement(FormatListBulletedSharpIcon, { style: { height: "auto" }, color: "action" })))));
+    };
+    var columnDefs = [
         {
-            field: "NextExecutionTime",
-            minWidth: 115,
-            maxWidth: 115,
-            headerName: "Next Execution",
-            valueFormatter: function (_a) {
-                var value = _a.value;
-                return value === null ? "NULL" : moment$4(value).format("DD/MM/YYYY HH:mm");
-            },
-            flex: 1,
+            field: "sProcedure",
+            minWidth: 240,
+            headerName: "Procedures",
+            type: "string",
+            flex: 2,
             cellStyle: {
                 display: "flex",
                 alignItems: "center",
@@ -1528,15 +1686,20 @@ var useJobsTableData = function (_a) {
             }
         },
         {
-            field: "LastStarted",
-            minWidth: 100,
-            maxWidth: 100,
-            headerName: "Started",
+            field: "PeriodTime",
+            minWidth: 90,
+            maxWidth: 90,
+            headerName: "Period Time",
+            flex: 1,
             valueFormatter: function (_a) {
                 var value = _a.value;
-                return value === null ? "NULL" : moment$4(value).format("DD/MM/YYYY HH:mm");
+                if (value === null || value === undefined)
+                    return "";
+                var horas = Math.floor(value / 3600);
+                var minutos = Math.floor((value % 3600) / 60);
+                var segundos = value % 60;
+                return "".concat(horas, "h ").concat(minutos, "min ").concat(segundos, "s");
             },
-            flex: 1,
             cellStyle: {
                 display: "flex",
                 alignItems: "center",
@@ -1544,15 +1707,15 @@ var useJobsTableData = function (_a) {
             }
         },
         {
-            field: "LastCounter",
+            field: "NextExecutionTime",
             minWidth: 115,
-            maxWidth: 115,
-            headerName: "Last Seen",
+            maxWidth: 125,
+            headerName: "Next Execution",
             valueFormatter: function (_a) {
                 var value = _a.value;
-                return value === null ? "NULL" : moment$4(value).format("DD/MM/YYYY HH:mm");
+                return value === null ? "" : moment$7(value).format("DD/MM/YYYY HH:mm");
             },
-            flex: 2,
+            flex: 1,
             cellStyle: {
                 display: "flex",
                 alignItems: "center",
@@ -1561,9 +1724,9 @@ var useJobsTableData = function (_a) {
         },
         {
             field: "Enabled",
+            headerName: "Enabled",
             minWidth: 50,
             maxWidth: 50,
-            headerName: "Enabled",
             valueFormatter: function (_a) {
                 var value = _a.value;
                 return (!value ? "N" : "Y");
@@ -1573,77 +1736,15 @@ var useJobsTableData = function (_a) {
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center"
-            }
-        },
-        {
-            field: "RestartAfterFailure",
-            minWidth: 70,
-            maxWidth: 70,
-            headerName: "AutoRecover",
-            valueFormatter: function (_a) {
-                var value = _a.value;
-                return (!value ? "N" : "Y");
             },
-            flex: 1,
-            cellStyle: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-            }
+            cellRenderer: function (params) { return (React__default.createElement(Switch, { checked: !!params.data.Enabled, color: "primary", size: "small", onChange: function (event, checked) {
+                    setJobSelected(params.data);
+                    setShowModal("enable");
+                } })); }
         },
         {
-            field: "Enable",
+            field: "-",
             headerName: "",
-            minWidth: 80,
-            cellRenderer: renderButtonEnable,
-            flex: 1,
-            wrapText: false,
-            autoHeight: false,
-            wrapHeaderText: false,
-            sortable: false,
-            cellStyle: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-            }
-        },
-        {
-            field: "Disable",
-            headerName: "Actions",
-            minWidth: 80,
-            cellRenderer: renderButtonDisable,
-            flex: 1,
-            wrapText: false,
-            autoHeight: false,
-            wrapHeaderText: false,
-            sortable: false,
-            cellStyle: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-            }
-        },
-        {
-            field: "Reset",
-            headerName: " ",
-            minWidth: 80,
-            cellRenderer: renderButtonReset,
-            flex: 1,
-            wrapText: false,
-            autoHeight: false,
-            wrapHeaderText: false,
-            sortable: false,
-            cellStyle: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-            }
-        },
-        {
-            field: "Menu",
-            headerName: " ",
-            minWidth: 80,
-            maxWidth: 80,
             cellRenderer: renderButtonMenu,
             flex: 1,
             wrapText: false,
@@ -1660,6 +1761,11 @@ var useJobsTableData = function (_a) {
     return { rows: rows, columnDefs: columnDefs };
 };
 
+var CustomStatusPanel = function (_a) {
+    var handleNew = _a.handleNew;
+    return (React.createElement(IconButton$1, { onClick: handleNew, color: "primary", style: { marginLeft: -15 } },
+        React.createElement(PlaylistAddIcon, { style: { width: 30, height: 30 } })));
+};
 var useStyles$y = makeStyles(function (theme) { return ({
     root: {
         "& .MuiDataGrid-row": {
@@ -1719,16 +1825,27 @@ var useStyles$y = makeStyles(function (theme) { return ({
     form: {
         display: "flex",
         flexDirection: "column"
+    },
+    table: {
+        "& .ag-header-cell": {
+            padding: "2px !important",
+            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$y();
-    var _b = useState(null), rowSelected = _b[0], setRowSelected = _b[1];
-    var _c = useState(false), snackbarLoading = _c[0], setSnackbarLoading = _c[1];
-    var _d = useState(false), snackbarSuccessfulMessage = _d[0], setSnackbarSuccessfulMessage = _d[1];
-    var gridStyle = useMemo(function () { return ({ height: "100%", width: "100%" }); }, []);
-    var _e = useState(null), gridApi = _e[0], setGridApi = _e[1];
+    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];
+    var _e = useState(""), showModal = _e[0], setShowModal = _e[1];
     var defaultColDef = useMemo(function () {
         return {
             sortable: true,
@@ -1737,32 +1854,77 @@ var TableJobs = function (_a) {
             wrapHeaderText: true
         };
     }, []);
-    var loadingOverlayComponent = useMemo(function () {
-        return LazyLoading;
-    }, []);
-    var handleClose = function (event, reason) {
-        if (reason === "clickaway") {
-            return;
+    var onRowSelected = function (event) {
+        var cell = gridApi === null || gridApi === void 0 ? void 0 : gridApi.getFocusedCell();
+        if ((cell === null || cell === void 0 ? void 0 : cell.column.getColId()) !== "-" && event.node.isSelected()) {
+            setJobSelected(event.data);
+            setShowModal("update");
+        }
+        if ((cell === null || cell === void 0 ? void 0 : cell.column.getColId()) === "Enabled") {
+            setJobSelected(event.data);
+            setShowModal("enable");
         }
-        setSnackbarSuccessfulMessage(false);
     };
+    var _f = useContextMenuMESF(), showContextMenu = _f.showContextMenu, registerConfig = _f.registerConfig;
     var getMenuOptions = useJobsOptionsFunctions({
-        getJobsFromAPI: getJobsFromAPI,
-        setRowSelected: setRowSelected
+        setShowModal: setShowModal,
+        setJobSelected: setJobSelected,
+        getJobsFromAPI: getJobsFromAPI
     }).getMenuOptions;
-    var _f = useContextMenuMESF(), showContextMenu = _f.showContextMenu, registerConfig = _f.registerConfig;
     var _g = useJobsTableData({
-        setRowSelected: setRowSelected,
+        setJobSelected: setJobSelected,
+        setShowModal: setShowModal,
         showContextMenu: showContextMenu
     }), rows = _g.rows, columnDefs = _g.columnDefs;
     var getContextMenuItems = function (params) {
         var _a, _b;
         var data = (_a = params.node) === null || _a === void 0 ? void 0 : _a.data;
-        params.api.deselectAll();
-        (_b = params.node) === null || _b === void 0 ? void 0 : _b.setSelected(true);
-        showContextMenu(event, data, "TableJobs");
+        showContextMenu(event, data, "jobContext");
+        if (data) {
+            params.api.deselectAll();
+            (_b = params.node) === null || _b === void 0 ? void 0 : _b.setSelected(true);
+        }
         return [];
     };
+    var handleNewJob = function () {
+        if (gridApi)
+            gridApi.deselectAll();
+        setShowModal("create");
+        setJobSelected(null);
+    };
+    var onDetailsHide = function (_a) {
+        var close = _a.close, entityId = _a.entityId;
+        return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (close) {
+                            setShowModal("");
+                            setJobSelected(null);
+                            if (gridApi)
+                                gridApi === null || gridApi === void 0 ? void 0 : gridApi.deselectAll();
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, getJobsFromAPI().then(function () {
+                                if (entityId) {
+                                    setTimeout(function () {
+                                        var _a;
+                                        var rowNode = gridApi === null || gridApi === void 0 ? void 0 : gridApi.getRowNode(String(entityId));
+                                        if (rowNode) {
+                                            gridApi === null || gridApi === void 0 ? void 0 : gridApi.ensureIndexVisible((_a = rowNode === null || rowNode === void 0 ? void 0 : rowNode.rowIndex) !== null && _a !== void 0 ? _a : 0);
+                                            rowNode === null || rowNode === void 0 ? void 0 : rowNode.setSelected(true);
+                                            setJobSelected(rowNode === null || rowNode === void 0 ? void 0 : rowNode.data);
+                                        }
+                                    }, 0);
+                                }
+                            })];
+                    case 1:
+                        _b.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     useEffect(function () {
         if (isLoading) {
             gridApi === null || gridApi === void 0 ? void 0 : gridApi.showLoadingOverlay();
@@ -1770,79 +1932,96 @@ var TableJobs = function (_a) {
         else {
             gridApi === null || gridApi === void 0 ? void 0 : gridApi.hideOverlay();
         }
-    }, [isLoading, rows, gridApi]);
+    }, [isLoading, gridApi]);
     useEffect(function () {
         registerConfig({
-            id: "TableJobs",
+            id: "jobsContext",
             getOptions: getMenuOptions
         });
     }, []);
-    return (React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", className: classes.root },
-        React.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" }, className: classes.filters },
-            React.createElement(Typography$1, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "System Jobs"),
-            React.createElement(Grid, { item: true, md: 12, xs: 12, style: {
-                    height: "70vh",
-                    border: "4px solid #ccc",
-                    borderRadius: 10,
-                    padding: 10,
-                    margin: "20px 0 10px"
-                } },
-                React.createElement("div", { style: gridStyle, className: "ag-theme-alpine" },
-                    React.createElement(AgGridReact, { rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, suppressContextMenu: false, getContextMenuItems: getContextMenuItems, loadingOverlayComponent: loadingOverlayComponent, rowHeight: 34, headerHeight: 34, animateRows: true, pagination: true, rowSelection: "single", onGridReady: function (params) { return setGridApi(params.api); } })),
-                React.createElement(ResetJob, { show: !!rowSelected, setSnackbarLoading: setSnackbarLoading, setSnackbarSuccessfulMessage: setSnackbarSuccessfulMessage, onHide: function (shouldUpdate) {
-                        setRowSelected(null);
-                        if (shouldUpdate) {
-                            getJobsFromAPI();
-                        }
-                    }, rowSelected: rowSelected }),
-                React.createElement(OnEnableJob, { show: !!rowSelected, onHide: function (shouldUpdate) {
-                        setRowSelected(null);
-                        if (shouldUpdate) {
-                            getJobsFromAPI();
-                        }
-                    }, rowSelected: rowSelected }),
-                React.createElement(Snackbar, { open: snackbarLoading, autoHideDuration: 3500, onClose: handleClose },
-                    React.createElement(Alert, { style: {
-                            width: "250px",
-                            justifyContent: "center",
-                            alignItems: "center"
-                        }, severity: "info" },
-                        React.createElement(Grid, { container: true, alignItems: "center", spacing: 2 },
-                            React.createElement(Grid, { item: true }, "Waiting for reset"),
-                            React.createElement(Grid, { item: true },
-                                React.createElement(CircularProgress, { style: {
-                                        color: "#FFF",
-                                        width: 18,
-                                        height: 18,
-                                        marginTop: 4
-                                    } }))))),
-                React.createElement(Snackbar, { open: snackbarSuccessfulMessage, autoHideDuration: 2500, onClose: handleClose },
-                    React.createElement(Alert, { style: {
-                            width: "250px",
-                            justifyContent: "center",
-                            alignItems: "center"
-                        }, severity: "success" }, "Reset was successful"))))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Grid, { container: true, justifyContent: "center" },
+            React.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px", margin: "10px 0px" } },
+                React.createElement(Typography$1, { variant: "h5", style: { fontWeight: 600 } }, "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(AgGridReact, { rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, getContextMenuItems: getContextMenuItems, loadingOverlayComponent: LazyLoading, suppressContextMenu: false, rowHeight: 34, headerHeight: 34, animateRows: true, pagination: false, rowSelection: "single", onGridReady: function (params) { return setGridApi(params.api); }, getRowId: function (params) { return "".concat(params.data.JobId); }, onRowSelected: onRowSelected, gridOptions: {
+                                statusBar: {
+                                    statusPanels: [
+                                        {
+                                            statusPanel: "agTotalRowCountComponent",
+                                            align: "right"
+                                        },
+                                        {
+                                            statusPanel: function (params) { return (React.createElement(CustomStatusPanel, { handleNew: handleNewJob })); },
+                                            align: "left"
+                                        },
+                                    ]
+                                }
+                            } }))),
+                React.createElement(Grid, { item: true, md: 6, xs: 12 },
+                    React.createElement(Paper, { elevation: 2, style: { height: "70vh", width: "100%", padding: 15 }, className: "".concat(classes.table, " ag-theme-material") },
+                        React.createElement(JobDetails, { job: jobSelected, modal: showModal, onHide: onDetailsHide }))))),
+        React.createElement(ResetJob, { show: showModal === "reset", onHide: function (shouldUpdate) { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            setShowModal("");
+                            setJobSelected(null);
+                            if (gridApi) {
+                                gridApi.deselectAll();
+                            }
+                            if (!shouldUpdate) return [3 /*break*/, 2];
+                            return [4 /*yield*/, getJobsFromAPI()];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            }); }, jobSelected: jobSelected }),
+        React.createElement(OnEnableJob, { show: showModal === "enable", onHide: function (shouldUpdate) { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            setShowModal("");
+                            setJobSelected(null);
+                            if (gridApi) {
+                                gridApi.deselectAll();
+                            }
+                            if (!shouldUpdate) return [3 /*break*/, 2];
+                            return [4 /*yield*/, getJobsFromAPI()];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            }); }, jobSelected: jobSelected }),
+        React.createElement(ErrorModal, { error: errorMessage, onHide: function () { return setErrorMessage(""); } })));
 };
 
 var Jobs = function (prop) {
-    var _a = useJobsContext(), state = _a.state, actions = _a.actions;
+    var _a = useJobsContext(); _a.state; var actions = _a.actions;
     var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
     var _c = useState(""), error = _c[0], setError = _c[1];
     var getJobsFromAPI = function () { return __awaiter(void 0, void 0, void 0, function () {
         var resp;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
                     setIsLoading(true);
                     return [4 /*yield*/, GetJobsStatus()];
                 case 1:
-                    resp = _a.sent();
+                    resp = _b.sent();
                     if (resp.ok) {
-                        actions.setJobs(resp.data.tables[0].rows);
+                        actions.setJobs(resp.data);
                         setIsLoading(false);
                     }
                     else {
-                        setError(resp.message);
+                        setError((_a = resp.message) !== null && _a !== void 0 ? _a : "Error loading jobs");
                         setIsLoading(false);
                     }
                     return [2 /*return*/];
@@ -1852,24 +2031,15 @@ var Jobs = function (prop) {
     useEffect(function () {
         getJobsFromAPI();
     }, []);
-    if (state.jobsData)
-        return (React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
-            React.createElement(Grid, { item: true, md: 12, xs: 12, style: { margin: 0 } },
-                React.createElement(Paper, { elevation: 1, style: {
-                        width: "100%",
-                        padding: "10px 0 20px",
-                        borderRadius: "0.75rem"
-                    } },
-                    React.createElement(TableJobs, { isLoading: isLoading, getJobsFromAPI: getJobsFromAPI }))),
-            React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
-    else
-        return (React.createElement("div", { style: {
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                height: "100vh"
-            } },
-            React.createElement(LazyLoading, null)));
+    return (React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
+        React.createElement(Grid, { item: true, md: 12, xs: 12, style: { margin: 0 } },
+            React.createElement(Paper, { elevation: 1, style: {
+                    width: "100%",
+                    padding: "10px 0 20px",
+                    borderRadius: "0.75rem"
+                } },
+                React.createElement(TableJobs, { isLoading: isLoading, getJobsFromAPI: getJobsFromAPI }))),
+        React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
 var JobsPage = function (props) {
@@ -1880,8 +2050,8 @@ var JobsPage = function (props) {
 var LogsInitialState = {
     logs: [],
     searchData: {
-        Start: moment$4().add(-5, "days").hour(0).minute(0).second(0).toDate(),
-        End: moment$4().hour(23).minute(59).second(59).toDate(),
+        Start: moment$7().add(-5, "days").hour(0).minute(0).second(0).toDate(),
+        End: moment$7().hour(23).minute(59).second(59).toDate(),
         Search: "",
         LogTypeCode: "A"
     }
@@ -1917,8 +2087,8 @@ var LogsReducer = createSlice({
         resetFilters: function (state, _a) {
             _a.payload;
             state.searchData = {
-                Start: moment$4().add(-5, "days").hour(0).minute(0).second(0).toDate(),
-                End: moment$4().hour(23).minute(59).second(59).toDate(),
+                Start: moment$7().add(-5, "days").hour(0).minute(0).second(0).toDate(),
+                End: moment$7().hour(23).minute(59).second(59).toDate(),
                 Search: "",
                 LogTypeCode: "A"
             };
@@ -2083,10 +2253,10 @@ var useLogTableData = function () {
         return (nowTime.toLocaleDateString("en-US") + " " + nowTime.toLocaleTimeString());
     };
     var getLogTypeByCodeId = function (logTypeCodeId) {
-        return get(LOG_TYPE_CODES, "".concat(logTypeCodeId, ".description"), " -");
+        return get$1(LOG_TYPE_CODES, "".concat(logTypeCodeId, ".description"), " -");
     };
     var backgroundColor = function (logTypeCode) {
-        return get(LOG_TYPE_CODES, "".concat(logTypeCode[0], ".color"), "#BBBBBB");
+        return get$1(LOG_TYPE_CODES, "".concat(logTypeCode[0], ".color"), "#BBBBBB");
     };
     var rows = (_a = state.logs) === null || _a === void 0 ? void 0 : _a.map(function (_a) {
         var LogId = _a.LogId, Timestamp = _a.Timestamp, Source = _a.Source, Message = _a.Message, LogTypeCode = _a.LogTypeCode, User = _a.User;
@@ -2094,7 +2264,7 @@ var useLogTableData = function () {
             id: LogId,
             Timestamp: Timestamp === null ? null : new Date(Timestamp),
             Source: Source,
-            Message: isNil(Message) ? "" : Message.replaceAll("Added", " Added"),
+            Message: isNil$1(Message) ? "" : Message.replaceAll("Added", " Added"),
             LogTypeCode: getLogTypeByCodeId(LogTypeCode),
             User: User
         });
@@ -2319,8 +2489,8 @@ var TableLogs = function (_a) {
     var handleResetButtonClick = function () {
         resetFilter();
         refreshData({
-            Start: moment$4().add(-5, "days").hour(0).minute(0).second(0).toDate(),
-            End: moment$4().hour(23).minute(59).second(59).toDate(),
+            Start: moment$7().add(-5, "days").hour(0).minute(0).second(0).toDate(),
+            End: moment$7().hour(23).minute(59).second(59).toDate(),
             Search: "",
             LogTypeCode: "A"
         });
@@ -2446,7 +2616,7 @@ var Logs = function (prop) {
                 case 1:
                     res = _a.sent();
                     if (res.ok) {
-                        logs = get$1(res, "data.tables[0].rows", []);
+                        logs = get(res, "data.tables[0].rows", []);
                         if (canceled)
                             return [2 /*return*/];
                         actions.setLogs(logs);
@@ -2482,6 +2652,10 @@ var LogsPage = function (props) {
         React.createElement(Logs, null)));
 };
 
+var Alert = function (props) {
+    return React__default.createElement(Alert$3, __assign({ elevation: 6, variant: "filled" }, props));
+};
+
 var INITIAL_VALUES$3 = {
     ProfileId: null,
     ProfileName: ""
@@ -2802,7 +2976,7 @@ var DataTable = function (_a) {
     var onFirstDataRendered = useCallback(function (params) {
         params.api.forEachNode(function (node) {
             node.setSelected(!!node.data &&
-                !isNil$1(actionsOfProfile.find(function (p) { return p.ActionId === node.data.ActionId; })));
+                !isNil(actionsOfProfile.find(function (p) { return p.ActionId === node.data.ActionId; })));
         });
         sortRows(params);
     }, [sortRows]);
@@ -2822,7 +2996,7 @@ var DataTable = function (_a) {
                     case 1:
                         resp = _a.sent();
                         if (resp.ok)
-                            setAllActions(get$1(resp, "data.tables[0].rows", []));
+                            setAllActions(get(resp, "data.tables[0].rows", []));
                         else
                             setError(resp.message);
                         return [2 /*return*/];
@@ -2918,7 +3092,7 @@ var ActionsOfProfile = function (_a) {
                         case 1:
                             resp = _a.sent();
                             if (resp.ok)
-                                setActionsOfProfile(get$1(resp, "data.tables[0].rows", []));
+                                setActionsOfProfile(get(resp, "data.tables[0].rows", []));
                             else
                                 setError(resp.message);
                             setIsLoading(false);
@@ -3300,7 +3474,7 @@ var Profiles = function (prop) {
                 case 1:
                     resp = _a.sent();
                     if (resp.ok) {
-                        profiles = get(resp, "data.tables[0].rows", []);
+                        profiles = get$1(resp, "data.tables[0].rows", []);
                         actions.setProfiles(profiles);
                         setIsLoading(false);
                     }
@@ -4166,7 +4340,7 @@ var useTableData$2 = function (_a) {
             headerName: "Pattern Start",
             valueFormatter: function (_a) {
                 var value = _a.value;
-                return "".concat(moment$4(value).format("L"), ", ").concat(moment$4(value).format("LTS"));
+                return "".concat(moment$7(value).format("L"), ", ").concat(moment$7(value).format("LTS"));
             },
             minWidth: 180,
             flex: 4,
@@ -4672,7 +4846,7 @@ var useSearchAssets$1 = function (_a) {
         getAssets().then(function (res) {
             if (res.ok) {
                 var mydataSource_1 = [];
-                var rows = get$1(res, "data.tables[0].rows", []);
+                var rows = get(res, "data.tables[0].rows", []);
                 var areas = rows.filter(function (asset) { return asset.CanBeDefaultAsset; });
                 setAllAssets(rows);
                 setAreasList(areas);
@@ -4970,7 +5144,7 @@ var CreateNewAssetDialog = function (_a) {
                                             React__default.createElement(Button, { fullWidth: true, startIcon: isCreateSubmitLoading && (React__default.createElement(CircularProgress, { size: "1rem" })), disabled: isCreateSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))))))),
         React__default.createElement(ErrorModal, { error: errorCreateAsset, onHide: function () { return setErrorCreateAsset(""); } }),
         React__default.createElement(Snackbar, { open: assetCreatedSuccess, autoHideDuration: 2500, onClose: handleClose },
-            React__default.createElement(Alert$2, { severity: "info", onClose: handleClose }, "Document created succesfully"))));
+            React__default.createElement(Alert$3, { severity: "info", onClose: handleClose }, "Document created succesfully"))));
 };
 
 var useStyles$k = makeStyles(function (theme) { return ({
@@ -5138,7 +5312,7 @@ var EditAssetDialog = function (_a) {
                                             React__default.createElement(Button, { fullWidth: true, startIcon: isEditSubmitLoading && (React__default.createElement(CircularProgress, { size: "1rem" })), disabled: isEditSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save"))))),
                             React__default.createElement(ErrorModal, { error: errorEditAsset, onHide: function () { return setErrorEditAsset(""); } }),
                             React__default.createElement(Snackbar, { open: assetEditedSuccess, autoHideDuration: 2500, onClose: handleClose },
-                                React__default.createElement(Alert$3, { severity: "info", onClose: handleClose }, "Document created succesfully")))))))));
+                                React__default.createElement(Alert$2, { severity: "info", onClose: handleClose }, "Document created succesfully")))))))));
 };
 
 var useStyles$j = makeStyles(function (theme) { return ({
@@ -5241,7 +5415,7 @@ var RemoveAssetDialog = function (_a) {
                 React__default.createElement(Button, { autoFocus: true, color: "secondary", startIcon: isCreateSubmitLoading && React__default.createElement(CircularProgress, { size: "1rem" }), onClick: handleRemoveAsset }, "Delete"))),
         React__default.createElement(ErrorModal, { error: errorRemoveAsset, onHide: function () { return setErrorRemoveAsset(""); } }),
         React__default.createElement(Snackbar, { open: assetRemovedSuccess, autoHideDuration: 2500, onClose: handleClose },
-            React__default.createElement(Alert$2, { severity: "info", onClose: handleClose }, "Asset removed succesfully"))));
+            React__default.createElement(Alert$3, { severity: "info", onClose: handleClose }, "Asset removed succesfully"))));
 };
 
 var useStyles$i = makeStyles(function (theme) { return ({
@@ -5863,7 +6037,7 @@ var AssetViewComponent = function () {
                                     }
                                 } }))),
                     React__default.createElement(Snackbar, { open: updatedSuccessfullyMessage, autoHideDuration: 2500, onClose: handleClose },
-                        React__default.createElement(Alert$3, { severity: "success", onClose: handleClose }, "Asset updated successfully"))),
+                        React__default.createElement(Alert$2, { severity: "success", onClose: handleClose }, "Asset updated successfully"))),
                 showContextMenu && !isDoubleClick ? (React__default.createElement("ul", { className: classes.contextMenu, style: { top: y, left: x, padding: "6px 0" } },
                     React__default.createElement(MenuItem, { className: classes.menuItem, onClick: function () { return setShowViewerAssetDialog(true); } },
                         React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
@@ -6159,7 +6333,7 @@ var AuthTypeSelector = function (_a) {
         setIsLoading(true);
         getAuthTypes().then(function (resp) {
             if (resp.ok) {
-                setAuthTypes(get$1(resp, "data.tables[0].rows", []));
+                setAuthTypes(get(resp, "data.tables[0].rows", []));
                 setIsLoading(false);
             }
             else {
@@ -6225,7 +6399,7 @@ var ProfilesPicker = function (_a) {
         getProfiles()
             .then(function (res) {
             if (res.ok) {
-                var profilesData = get$1(res, "data.tables[0].rows", null);
+                var profilesData = get(res, "data.tables[0].rows", null);
                 if (profilesData) {
                     if (canceled)
                         return;
@@ -7270,12 +7444,12 @@ axiosInstance.interceptors.response.use(function (res) { return res; }, function
 }); });
 
 var getError = function (error) {
-    var arrayOfErrors = values(get$1(error, "response.data.errors", null));
+    var arrayOfErrors = values(get(error, "response.data.errors", null));
     var allErrors = "";
     if (arrayOfErrors.length) {
         allErrors = concatErrorMessagges(arrayOfErrors, allErrors);
     }
-    return get$1(error, "response.data.result", get$1(error, "response.data.message", get$1(error, "internalError.message", get$1(error, "response.data.detail", get$1(error, "response.data.title", error.toString()) + " " + allErrors))));
+    return get(error, "response.data.result", get(error, "response.data.message", get(error, "internalError.message", get(error, "response.data.detail", get(error, "response.data.title", error.toString()) + " " + allErrors))));
 };
 var concatErrorMessagges = function (arrayOfErrors, string) {
     arrayOfErrors.forEach(function (element, index) {
@@ -7518,7 +7692,7 @@ var MESApiService = /** @class */ (function () {
                 data.dataBaseName = database;
                 data.parameters = formattedParameters;
                 Date.prototype.toJSON = function () {
-                    return moment$4(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$7(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/Execute", {
@@ -7577,7 +7751,7 @@ var MESApiService = /** @class */ (function () {
                         data.dataBaseName = database;
                         data.parameters = formattedParameters;
                         Date.prototype.toJSON = function () {
-                            return moment$4(this).format("YYYY-MM-DDTHH:mm:ss");
+                            return moment$7(this).format("YYYY-MM-DDTHH:mm:ss");
                         }; // eslint-disable-line
                         curatedMethod = procedure.replace(/[\[\]]/g, "");
                         _a.label = 1;
@@ -7631,7 +7805,7 @@ var MESApiService = /** @class */ (function () {
                 data.dataBaseName = database;
                 data.parameters = formattedParameters;
                 Date.prototype.toJSON = function () {
-                    return moment$4(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$7(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/ExecuteJSON", {
@@ -7686,7 +7860,7 @@ var MESApiService = /** @class */ (function () {
                     formattedParameters.push(formattedParameter);
                 });
                 Date.prototype.toJSON = function () {
-                    return moment$4(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$7(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 files.forEach(function (element) {
@@ -7751,7 +7925,7 @@ var MESApiService = /** @class */ (function () {
                 data.parameters = formattedParameters;
                 data.fileName = fileName || "Default.xlsx";
                 Date.prototype.toJSON = function () {
-                    return moment$4(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$7(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/Export", {
@@ -7827,7 +8001,7 @@ var MESApiService = /** @class */ (function () {
                 data.parameters = formattedParameters;
                 data.fileName = fileName || "Default.xlsx";
                 Date.prototype.toJSON = function () {
-                    return moment$4(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$7(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/ExportExcel", {
@@ -7896,70 +8070,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$5.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$1(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$5; };
-var dxtServerTimeZone = function () {
-    return TimeService.getInstance().getServerTimeZone;
-};
-var dxtToUTC = TimeService.getInstance().toUTC;
-var dxtToLocalServerTime = TimeService.getInstance().toLocalServerTime;
-
 var getShiftByParameters = function (parameters) { return __awaiter(void 0, void 0, void 0, function () {
     var utcString, sqlParameters, apiService, resp, e_1;
     var _a;
@@ -7986,7 +8096,7 @@ var getShiftByParameters = function (parameters) { return __awaiter(void 0, void
                 if (resp.ok) {
                     return [2 /*return*/, {
                             ok: true,
-                            data: get$1(resp.data, "tables[0].rows[0]", {})
+                            data: get(resp.data, "tables[0].rows[0]", {})
                         }];
                 }
                 else {
@@ -8013,7 +8123,7 @@ var useShiftNavigatorManager = function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (isNil$1(shiftInfo)) {
+                    if (isNil(shiftInfo)) {
                         return [2 /*return*/];
                     }
                     setIsShiftInfoLoading(true);
@@ -8465,7 +8575,7 @@ var ShiftPeriodNavigatorControl = function (_a) {
                     case 2:
                         res = _c.sent();
                         if (res.ok) {
-                            rowsSource = get$1(res, "data.tables[0].rows", []);
+                            rowsSource = get(res, "data.tables[0].rows", []);
                             setShiftPeriodList(rowsSource);
                             if (rowsSource.length >= 2) {
                                 onChange({
@@ -8953,7 +9063,7 @@ var Account = function () {
                 case 1:
                     resp = _j.sent();
                     if (resp.ok) {
-                        userData = get$1(resp, "data.tables[0].rows", null);
+                        userData = get(resp, "data.tables[0].rows", null);
                         setUserName((_a = userData[0]) === null || _a === void 0 ? void 0 : _a.UserName);
                         setUserLastName((_b = userData[0]) === null || _b === void 0 ? void 0 : _b.LastName);
                         setUserFirstName((_c = userData[0]) === null || _c === void 0 ? void 0 : _c.FirstName);
@@ -9331,10 +9441,10 @@ function Login(_a) {
     var params = useRef(new URL(document.location).searchParams);
     var _b = useState(false), open = _b[0], setOpen = _b[1];
     var _c = useState(""), message = _c[0], setMessage = _c[1];
-    var useEmailAndPassword = get$1(authConfig, "useEmailAndPassword", true);
-    var useAzureAD = get$1(authConfig, "useAzureAD", false);
-    var useWindowsAuth = get$1(authConfig, "useWindowsAuth", false);
-    var guestIsEnabled = get$1(authConfig, "guestIsEnabled", false);
+    var useEmailAndPassword = get(authConfig, "useEmailAndPassword", true);
+    var useAzureAD = get(authConfig, "useAzureAD", false);
+    var useWindowsAuth = get(authConfig, "useWindowsAuth", false);
+    var guestIsEnabled = get(authConfig, "guestIsEnabled", false);
     var handleClose = function () {
         setOpen(false);
         params.current["delete"]("message");
@@ -9410,7 +9520,7 @@ var useSearchAssets = function (setError) {
                 switch (_a.label) {
                     case 0:
                         if (!res.ok) return [3 /*break*/, 2];
-                        rows = get$1(res, "data.tables[0].rows", []);
+                        rows = get(res, "data.tables[0].rows", []);
                         return [4 /*yield*/, rows.filter(function (asset) { return asset.CanBeDefaultAsset; })];
                     case 1:
                         areas = _a.sent();
@@ -9483,7 +9593,7 @@ var useSearchUTLSettings = function (_a) {
                 case 1:
                     res = _a.sent();
                     if (res.ok) {
-                        settings = get$1(res, "data.tables[0].rows", []);
+                        settings = get(res, "data.tables[0].rows", []);
                         initSettings(settings);
                     }
                     else {
@@ -10591,7 +10701,7 @@ var SettingsPage = function () {
                 case 1:
                     res = _a.sent();
                     if (res.ok) {
-                        settings = get$1(res, "data.tables[0].rows", []);
+                        settings = get(res, "data.tables[0].rows", []);
                         actions.setSettings(settings);
                     }
                     else {
@@ -10741,7 +10851,7 @@ const FORMATS = {
   year: 'YYYY'
 };
 
-_adapters._date.override(typeof moment$4 === 'function' ? {
+_adapters._date.override(typeof moment$7 === 'function' ? {
   _id: 'moment', // DEBUG ONLY
 
   formats: function() {
@@ -10750,27 +10860,27 @@ _adapters._date.override(typeof moment$4 === 'function' ? {
 
   parse: function(value, format) {
     if (typeof value === 'string' && typeof format === 'string') {
-      value = moment$4(value, format);
-    } else if (!(value instanceof moment$4)) {
-      value = moment$4(value);
+      value = moment$7(value, format);
+    } else if (!(value instanceof moment$7)) {
+      value = moment$7(value);
     }
     return value.isValid() ? value.valueOf() : null;
   },
 
   format: function(time, format) {
-    return moment$4(time).format(format);
+    return moment$7(time).format(format);
   },
 
   add: function(time, amount, unit) {
-    return moment$4(time).add(amount, unit).valueOf();
+    return moment$7(time).add(amount, unit).valueOf();
   },
 
   diff: function(max, min, unit) {
-    return moment$4(max).diff(moment$4(min), unit);
+    return moment$7(max).diff(moment$7(min), unit);
   },
 
   startOf: function(time, unit, weekday) {
-    time = moment$4(time);
+    time = moment$7(time);
     if (unit === 'isoWeek') {
       weekday = Math.trunc(Math.min(Math.max(0, weekday), 6));
       return time.isoWeekday(weekday).startOf('day').valueOf();
@@ -10779,7 +10889,7 @@ _adapters._date.override(typeof moment$4 === 'function' ? {
   },
 
   endOf: function(time, unit) {
-    return moment$4(time).endOf(unit).valueOf();
+    return moment$7(time).endOf(unit).valueOf();
   }
 } : {});
 
@@ -10873,7 +10983,7 @@ var ColorPicker = function (_a) {
 };
 
 var TrendingsInitialState = {
-    timeScopeStart: moment$4(new Date()).subtract(1, "days").toDate(),
+    timeScopeStart: moment$7(new Date()).subtract(1, "days").toDate(),
     timeScopeEnd: new Date(),
     scope: "1 day",
     graphPan: false,
@@ -10900,45 +11010,45 @@ var TrendingsReducer = createSlice({
             var payload = _a.payload; _a.type;
             state.shouldRefetchSeries += 1;
             state.graphShouldUpdate += 1;
-            if (!isNil$1(payload.start) &&
-                !isNil$1(payload.end) &&
-                !isNil$1(payload.scope)) {
+            if (!isNil(payload.start) &&
+                !isNil(payload.end) &&
+                !isNil(payload.scope)) {
                 //from arrow navigators
                 state.timeScopeStart = payload.start;
                 state.timeScopeEnd = payload.end;
                 state.scope = payload.scope;
                 return;
             }
-            if (!isNil$1(payload.scope)) {
+            if (!isNil(payload.scope)) {
                 if (payload.scope !== "custom") {
                     switch (payload.scope) {
                         case "10 min":
-                            state.timeScopeStart = moment$4(state.timeScopeEnd)
+                            state.timeScopeStart = moment$7(state.timeScopeEnd)
                                 .subtract(10, "minutes")
                                 .toDate();
                             break;
                         case "1 hour":
-                            state.timeScopeStart = moment$4(state.timeScopeEnd)
+                            state.timeScopeStart = moment$7(state.timeScopeEnd)
                                 .subtract(1, "hours")
                                 .toDate();
                             break;
                         case "4 hours":
-                            state.timeScopeStart = moment$4(state.timeScopeEnd)
+                            state.timeScopeStart = moment$7(state.timeScopeEnd)
                                 .subtract(4, "hours")
                                 .toDate();
                             break;
                         case "12 hours":
-                            state.timeScopeStart = moment$4(state.timeScopeEnd)
+                            state.timeScopeStart = moment$7(state.timeScopeEnd)
                                 .subtract(12, "hours")
                                 .toDate();
                             break;
                         case "1 day":
-                            state.timeScopeStart = moment$4(state.timeScopeEnd)
+                            state.timeScopeStart = moment$7(state.timeScopeEnd)
                                 .subtract(1, "days")
                                 .toDate();
                             break;
                         case "10 days":
-                            state.timeScopeStart = moment$4(state.timeScopeEnd)
+                            state.timeScopeStart = moment$7(state.timeScopeEnd)
                                 .subtract(10, "days")
                                 .toDate();
                             break;
@@ -10947,54 +11057,54 @@ var TrendingsReducer = createSlice({
                 state.scope = payload.scope;
                 return;
             }
-            if (!isNil$1(payload.start) &&
-                !isNil$1(payload.end) &&
-                isNil$1(payload.graphPan)) {
+            if (!isNil(payload.start) &&
+                !isNil(payload.end) &&
+                isNil(payload.graphPan)) {
                 // from zoom
                 state.timeScopeStart = payload.start;
                 state.timeScopeEnd = payload.end;
                 state.scope = "custom";
                 return;
             }
-            if (!isNil$1(payload.start) &&
-                !isNil$1(payload.end) &&
-                !isNil$1(payload.graphPan)) {
+            if (!isNil(payload.start) &&
+                !isNil(payload.end) &&
+                !isNil(payload.graphPan)) {
                 // from pan
                 state.timeScopeStart = payload.start;
                 state.timeScopeEnd = payload.end;
                 return;
             }
-            if (!isNil$1(payload.start)) {
+            if (!isNil(payload.start)) {
                 state.timeScopeStart = payload.start;
                 if (state.scope !== "custom") {
                     switch (state.scope) {
                         case "10 min":
-                            state.timeScopeEnd = moment$4(payload.start)
+                            state.timeScopeEnd = moment$7(payload.start)
                                 .add(10, "minutes")
                                 .toDate();
                             break;
                         case "1 hour":
-                            state.timeScopeEnd = moment$4(payload.start)
+                            state.timeScopeEnd = moment$7(payload.start)
                                 .add(1, "hours")
                                 .toDate();
                             break;
                         case "4 hours":
-                            state.timeScopeEnd = moment$4(payload.start)
+                            state.timeScopeEnd = moment$7(payload.start)
                                 .add(4, "hours")
                                 .toDate();
                             break;
                         case "12 hours":
-                            state.timeScopeEnd = moment$4(payload.start)
+                            state.timeScopeEnd = moment$7(payload.start)
                                 .add(12, "hours")
                                 .toDate();
                             break;
                         case "1 day":
-                            state.timeScopeEnd = moment$4(payload.start)
+                            state.timeScopeEnd = moment$7(payload.start)
                                 .add(1, "days")
                                 .toDate();
                             break;
                         case "10 days":
-                            state.timeScopeEnd = moment$4(payload.start)
+                            state.timeScopeEnd = moment$7(payload.start)
                                 .add(10, "days")
                                 .toDate();
                             break;
@@ -11002,37 +11112,37 @@ var TrendingsReducer = createSlice({
                 }
                 return;
             }
-            if (!isNil$1(payload.end)) {
+            if (!isNil(payload.end)) {
                 state.timeScopeEnd = payload.end;
                 if (state.scope !== "custom") {
                     switch (state.scope) {
                         case "10 min":
-                            state.timeScopeStart = moment$4(payload.end)
+                            state.timeScopeStart = moment$7(payload.end)
                                 .subtract(10, "minutes")
                                 .toDate();
                             break;
                         case "1 hour":
-                            state.timeScopeStart = moment$4(payload.end)
+                            state.timeScopeStart = moment$7(payload.end)
                                 .subtract(1, "hours")
                                 .toDate();
                             break;
                         case "4 hours":
-                            state.timeScopeStart = moment$4(payload.end)
+                            state.timeScopeStart = moment$7(payload.end)
                                 .subtract(4, "hours")
                                 .toDate();
                             break;
                         case "12 hours":
-                            state.timeScopeStart = moment$4(payload.end)
+                            state.timeScopeStart = moment$7(payload.end)
                                 .subtract(12, "hours")
                                 .toDate();
                             break;
                         case "1 day":
-                            state.timeScopeStart = moment$4(payload.end)
+                            state.timeScopeStart = moment$7(payload.end)
                                 .subtract(1, "days")
                                 .toDate();
                             break;
                         case "10 days":
-                            state.timeScopeStart = moment$4(payload.end)
+                            state.timeScopeStart = moment$7(payload.end)
                                 .subtract(10, "days")
                                 .toDate();
                             break;
@@ -11405,7 +11515,7 @@ var DeleteViewModal = function (_a) {
             switch (_a.label) {
                 case 0:
                     setIsLoading(true);
-                    if (!!isNil$1(view)) return [3 /*break*/, 2];
+                    if (!!isNil(view)) return [3 /*break*/, 2];
                     return [4 /*yield*/, deleteView(view.ViewId)];
                 case 1:
                     resp = _a.sent();
@@ -11425,7 +11535,7 @@ var DeleteViewModal = function (_a) {
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: "Delete View" },
             React__default.createElement(Divider, null),
-            React__default.createElement(MesfModal.Content, null, !isNil$1(view) ? (React__default.createElement(Grid, { container: true, spacing: 5, style: { padding: "2rem" } },
+            React__default.createElement(MesfModal.Content, null, !isNil(view) ? (React__default.createElement(Grid, { container: true, spacing: 5, style: { padding: "2rem" } },
                 React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
                     React__default.createElement(Typography$1, null,
                         "Are yu sure you want to delete",
@@ -11441,7 +11551,7 @@ var DeleteViewModal = function (_a) {
                     } },
                     React__default.createElement(Grid, { item: true },
                         React__default.createElement(Button, { variant: "outlined", color: "secondary", onClick: function () { return handleClose(false); } }, "Cancel")),
-                    React__default.createElement(Grid, { item: true }, !isNil$1(view) ? (React__default.createElement(ButtonWithLoading, { variant: "contained", color: "secondary", onClick: handleSubmit, isLoading: isLoading }, "Delete")) : (React__default.createElement(Button, { variant: "contained", style: { marginRight: "1rem" }, color: "primary", onClick: function () { return handleClose(false); } }, "Ok")))))),
+                    React__default.createElement(Grid, { item: true }, !isNil(view) ? (React__default.createElement(ButtonWithLoading, { variant: "contained", color: "secondary", onClick: handleSubmit, isLoading: isLoading }, "Delete")) : (React__default.createElement(Button, { variant: "contained", style: { marginRight: "1rem" }, color: "primary", onClick: function () { return handleClose(false); } }, "Ok")))))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
@@ -11458,7 +11568,7 @@ var EditViewModal = function (_a) {
             switch (_a.label) {
                 case 0:
                     setIsLoading(true);
-                    if (!!isNil$1(view)) return [3 /*break*/, 2];
+                    if (!!isNil(view)) return [3 /*break*/, 2];
                     return [4 /*yield*/, upsertView(view.ViewId, newName, isPublic)];
                 case 1:
                     resp = _a.sent();
@@ -11490,7 +11600,7 @@ var EditViewModal = function (_a) {
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: "Update View" },
             React__default.createElement(Divider, null),
-            React__default.createElement(MesfModal.Content, null, !isNil$1(view) ? (React__default.createElement(Grid, { container: true, spacing: 5, style: { padding: "2rem" } },
+            React__default.createElement(MesfModal.Content, null, !isNil(view) ? (React__default.createElement(Grid, { container: true, spacing: 5, style: { padding: "2rem" } },
                 React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
                     React__default.createElement(TextField, { required: true, className: classes.inputCustom, id: "viewName", label: "Name", variant: "outlined", onChange: handleChangeInput, value: newName })),
                 React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { paddingTop: "2rem" }, className: classes.isPublicCheckbox },
@@ -11506,7 +11616,7 @@ var EditViewModal = function (_a) {
                     } },
                     React__default.createElement(Grid, { item: true },
                         React__default.createElement(Button, { variant: "outlined", color: "secondary", onClick: function () { return handleClose(false); } }, "Cancel")),
-                    React__default.createElement(Grid, { item: true }, !isNil$1(view) ? (React__default.createElement(ButtonWithLoading, { variant: "contained", color: "primary", onClick: handleSubmit, isLoading: isLoading }, "Update")) : (React__default.createElement(Button, { variant: "contained", style: { marginRight: "1rem" }, color: "primary", onClick: function () { return handleClose(false); } }, "Ok")))))),
+                    React__default.createElement(Grid, { item: true }, !isNil(view) ? (React__default.createElement(ButtonWithLoading, { variant: "contained", color: "primary", onClick: handleSubmit, isLoading: isLoading }, "Update")) : (React__default.createElement(Button, { variant: "contained", style: { marginRight: "1rem" }, color: "primary", onClick: function () { return handleClose(false); } }, "Ok")))))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
@@ -11533,7 +11643,7 @@ var LoadViewModal = function (_a) {
                     viewTagsResp = _a.sent();
                     if (viewTagsResp.ok) {
                         setViewTagsAndRefetch(viewTagsResp.data.tables[0].rows.reduce(function (carr, curr, idx) {
-                            if (isNil$1(curr.Color)) {
+                            if (isNil(curr.Color)) {
                                 curr.Color = getRandomColor();
                             }
                             carr[curr.TagId] = {
@@ -12497,7 +12607,7 @@ var TableComponent = function (_a) {
     };
     var handleDelete = function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
-            if (!isNil$1(viewTagForDelete)) {
+            if (!isNil(viewTagForDelete)) {
                 if (viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId) {
                     handleDeleteTag(viewTagForDelete.TagId);
                 }
@@ -12836,7 +12946,7 @@ var TableComponent = function (_a) {
                 } })),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
         React__default.createElement(Snackbar, { open: !!snackbarMessage, autoHideDuration: 800, onClose: handleCloseSnackbar },
-            React__default.createElement(Alert$3, { onClose: handleCloseSnackbar, severity: "success" }, snackbarMessage))));
+            React__default.createElement(Alert$2, { onClose: handleCloseSnackbar, severity: "success" }, snackbarMessage))));
 };
 
 var formatDateTimeToString = function (date) {
@@ -12991,21 +13101,21 @@ var dateNavigator = function (startDate, endDate, scope, operator, current) {
         }
         else {
             var _a = scope.split(" "), quantity = _a[0], duration = _a[1];
-            newStartDate = moment$4(newEndDate)
+            newStartDate = moment$7(newEndDate)
                 .subtract(quantity, duration[0])
                 .toDate();
         }
     }
     else {
         if (scope === "custom") {
-            var durationInMs = moment$4(endDate).diff(moment$4(startDate));
-            newStartDate = moment$4(startDate)[operator](durationInMs).toDate();
+            var durationInMs = moment$7(endDate).diff(moment$7(startDate));
+            newStartDate = moment$7(startDate)[operator](durationInMs).toDate();
         }
         else {
             var _b = scope.split(" "), quantity = _b[0], duration = _b[1];
-            newStartDate = moment$4(startDate)[operator](quantity, duration[0])
+            newStartDate = moment$7(startDate)[operator](quantity, duration[0])
                 .toDate();
-            newEndDate = moment$4(endDate)[operator](quantity, duration[0])
+            newEndDate = moment$7(endDate)[operator](quantity, duration[0])
                 .toDate();
         }
     }
@@ -13034,7 +13144,7 @@ var Header = function (_a) {
     var handleDateChange = function (newValue, key) {
         var _a;
         //@ts-ignore
-        actions.setTotalScope((_a = {}, _a[key] = moment$4(newValue).toDate(), _a));
+        actions.setTotalScope((_a = {}, _a[key] = moment$7(newValue).toDate(), _a));
     };
     var handleChangeScope = function (e) {
         var newScope = e.target.value;
@@ -13070,7 +13180,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$4(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$7(state.timeScopeStart).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "start"); }, InputLabelProps: {
                         shrink: true,
                         style: { marginLeft: "10px" }
                     }, InputProps: {
@@ -13087,7 +13197,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$4(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$7(state.timeScopeEnd).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "end"); }, InputLabelProps: {
                         shrink: true,
                         style: { marginLeft: "10px" }
                     } })),
@@ -13267,10 +13377,10 @@ var useYAxisPlugin = function () {
 };
 
 var areRangesSimilar = function (tag1, tag2) {
-    if (isNil$1(tag1.MaxScale) ||
-        isNil$1(tag1.MinScale) ||
-        isNil$1(tag2.MaxScale) ||
-        isNil$1(tag2.MinScale))
+    if (isNil(tag1.MaxScale) ||
+        isNil(tag1.MinScale) ||
+        isNil(tag2.MaxScale) ||
+        isNil(tag2.MinScale))
         return;
     var range1 = tag1.MaxScale - tag1.MinScale; // Rango de la primera etiqueta
     var range2 = tag2.MaxScale - tag2.MinScale; // Rango de la segunda etiqueta
@@ -13585,7 +13695,7 @@ var TrendingsPage = function (props) {
                         viewTagsResp = _a.sent();
                         if (viewTagsResp.ok) {
                             viewTags = viewTagsResp.data.tables[0].rows.reduce(function (carr, curr, idx) {
-                                if (isNil$1(curr.Color)) {
+                                if (isNil(curr.Color)) {
                                     curr.Color = getRandomColor();
                                 }
                                 carr[curr.TagId] = {
@@ -13688,12 +13798,12 @@ var css = "body {\n\tmargin: 0;\n\tfont-family: -apple-system, BlinkMacSystemFon
 n(css,{});
 
 var timezone = TimeService.getInstance().getServerTimeZone();
-moment$5.tz.setDefault(timezone);
+moment$6.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;
     return (React__default.createElement(AuthProvider, { authConfig: authentication },
-        React__default.createElement(LocalizationProvider, { dateAdapter: AdapterMoment, dateLibInstance: moment$5 },
+        React__default.createElement(LocalizationProvider, { dateAdapter: AdapterMoment, dateLibInstance: moment$6 },
             React__default.createElement(UserProvider, null,
                 React__default.createElement(AssetProvider, null,
                     React__default.createElement(UTLSettingsProvider, null,
@@ -13744,7 +13854,7 @@ var useDefaultAreaId = function (setError) {
         if (userId) {
             getUser(userId, null).then(function (res) {
                 if (res.ok) {
-                    var userDefaultAreaId = get$1(res, "data.tables[0].rows[0].DefaultAssetId", null);
+                    var userDefaultAreaId = get(res, "data.tables[0].rows[0].DefaultAssetId", null);
                     if (userDefaultAreaId) {
                         setDefaultAreaId(userDefaultAreaId);
                     }