@dexteel/mesf-core 4.20.5 → 4.21.0

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 export { LicenseManager } from 'ag-grid-enterprise';
-import { DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Grid, Button, withStyles as withStyles$1, alpha, makeStyles, Dialog as Dialog$1, SvgIcon, Collapse, Typography as Typography$1, Checkbox, TextField, InputAdornment, IconButton as IconButton$1, MenuItem, Select, Card, CardContent, CardActions, Snackbar, CircularProgress, Paper, InputLabel, FormHelperText, DialogContentText, FormControlLabel, Badge, useTheme, FormControl, Input, Chip, Tooltip, ListItemIcon, MenuList, Divider, Box, debounce, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
+import { withStyles, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, createStyles, Grid, Button, alpha, makeStyles, Dialog as Dialog$1, SvgIcon, Collapse, Typography as Typography$1, Checkbox, TextField, InputAdornment, IconButton as IconButton$1, MenuItem, Select, Card, CardContent, CardActions, Snackbar, CircularProgress, Paper, InputLabel, FormHelperText, DialogContentText, FormControlLabel, Badge, useTheme, FormControl, Input, Chip, Tooltip, ListItemIcon, MenuList, Divider, Box, debounce, List, ListItem, ListItemText } from '@material-ui/core';
 import { get as get$1, isNil as isNil$1, 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';
@@ -9,6 +9,7 @@ import { Outlet, useParams, useNavigate, useSearchParams, Link, Navigate, Routes
 import { Alert as Alert$1, Modal as Modal$1, Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
 import { LogLevel, PublicClientApplication } from '@azure/msal-browser';
 import { useMsal, MsalProvider } from '@azure/msal-react';
+import SettingsIcon from '@material-ui/icons/Settings';
 import ShowChartIcon from '@material-ui/icons/ShowChart';
 import { useComplexState } from 'use-complex-state';
 import { createSlice } from '@reduxjs/toolkit';
@@ -17,10 +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$2 from 'moment';
+import moment$4 from 'moment';
 import EditIcon from '@material-ui/icons/Edit';
 import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd';
 import { isNil, get } from 'lodash';
+import DeleteIcon from '@material-ui/icons/Delete';
+import FormatListBulletedSharpIcon from '@material-ui/icons/FormatListBulletedSharp';
+import { useForm, Controller } from 'react-hook-form';
 import axios from 'axios';
 import { _adapters, Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip as Tooltip$1, Legend, TimeScale } from 'chart.js';
 import zoomPlugin from 'chartjs-plugin-zoom';
@@ -30,21 +34,19 @@ import { Alert as Alert$3, Autocomplete } from '@material-ui/lab';
 import Button$1 from '@material-ui/core/Button';
 import Popover from '@material-ui/core/Popover';
 import CreateIcon from '@material-ui/icons/Create';
-import DeleteIcon from '@material-ui/icons/Delete';
 import { isAncestor, Tree, DndProvider as DndProvider$1 } from '@minoru/react-dnd-treeview';
 import FolderIcon from '@material-ui/icons/Folder';
 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, LocalizationProvider } from '@mui/x-date-pickers';
+import { ClearIcon, DatePicker as DatePicker$1, CalendarIcon, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
-import moment$3 from 'moment-timezone';
+import moment$5 from 'moment-timezone';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
 import Dialog from '@material-ui/core/Dialog';
 import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
-import { withStyles, createStyles } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
 import { ResponsiveBar } from '@nivo/bar';
 import PropTypes from 'prop-types';
@@ -61,8 +63,6 @@ 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 FormatListBulletedSharpIcon from '@material-ui/icons/FormatListBulletedSharp';
-import { useForm, Controller } from 'react-hook-form';
 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';
@@ -330,7 +330,7 @@ BarChartControl.propTypes = {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css$2 = ".lds-ring {\n  display: inline-block;\n  position: relative;\n  width: 80px;\n  height: 80px;\n}\n.lds-ring div {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 64px;\n  height: 64px;\n  margin: 8px;\n  border: 5px solid rgb(63,81,181);\n  border-radius: 50%;\n  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: rgb(63,81,181) transparent transparent transparent;\n}\n.lds-ring div:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.lds-ring div:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.lds-ring div:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes lds-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
+var css$2 = ".lds-ring {\n\tdisplay: inline-block;\n\tposition: relative;\n\twidth: 80px;\n\theight: 80px;\n}\n.lds-ring div {\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tposition: absolute;\n\twidth: 64px;\n\theight: 64px;\n\tmargin: 8px;\n\tborder: 5px solid rgb(63, 81, 181);\n\tborder-radius: 50%;\n\tanimation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\tborder-color: rgb(63, 81, 181) transparent transparent transparent;\n}\n.lds-ring div:nth-child(1) {\n\tanimation-delay: -0.45s;\n}\n.lds-ring div:nth-child(2) {\n\tanimation-delay: -0.3s;\n}\n.lds-ring div:nth-child(3) {\n\tanimation-delay: -0.15s;\n}\n@keyframes lds-ring {\n\t0% {\n\t\ttransform: rotate(0deg);\n\t}\n\t100% {\n\t\ttransform: rotate(360deg);\n\t}\n}\n";
 n(css$2,{});
 
 var LazyLoading = function () {
@@ -364,7 +364,7 @@ function TransitionComponent(props) {
 TransitionComponent.propTypes = {
     "in": PropTypes.bool
 };
-var StyledTreeItem = withStyles$1(function (theme) { return ({
+var StyledTreeItem = withStyles(function (theme) { return ({
     iconContainer: {
         "& .close": {
             opacity: 0.3
@@ -573,7 +573,7 @@ var ModalTreeFilterControl = function (props) {
             React__default.createElement(Button, { onClick: handleOk, color: "primary" }, "OK"))));
 };
 
-var useStyles$v = makeStyles(function (theme) { return ({
+var useStyles$z = makeStyles(function (theme) { return ({
     root: {
         width: "100%",
         backgroundColor: theme.palette.background.paper,
@@ -589,7 +589,7 @@ var useStyles$v = makeStyles(function (theme) { return ({
     }
 }); });
 var TreePickerControl = function (props) {
-    var classes = useStyles$v();
+    var classes = useStyles$z();
     var onSelect = props.onSelect, value = props.value; props.styleLabel; var dataSource = props.dataSource, _a = props.inputTitle, inputTitle = _a === void 0 ? "Asset" : _a; props.showPath; var _c = props.multipleSelectNodes, multipleSelectNodes = _c === void 0 ? false : _c, _d = props.showClearButton, showClearButton = _d === void 0 ? false : _d, showAssetTree = props.showAssetTree, onHide = props.onHide, _e = props.listAssetDrawings, listAssetDrawings = _e === void 0 ? [] : _e, onSuccess = props.onSuccess, isLoading = props.isLoading, other = __rest(props, ["onSelect", "value", "styleLabel", "dataSource", "inputTitle", "showPath", "multipleSelectNodes", "showClearButton", "showAssetTree", "onHide", "listAssetDrawings", "onSuccess", "isLoading"]);
     var _f = useState(showAssetTree || false), open = _f[0], setOpen = _f[1];
     var handleClickListItem = function (e) {
@@ -673,7 +673,7 @@ var TreePickerControl = function (props) {
                 }, onHide: onHide, id: "modal-treeview-filter", title: props.title, keepMounted: true, open: open, onClose: handleClose, isLoading: isLoading, value: value, data: dataSource, onBackdropClick: function () { return setOpen(false); }, multipleSelectNodes: multipleSelectNodes, listAssetDrawings: listAssetDrawings, setListAssetDrawings: listAssetDrawings, onSuccess: onSuccess }, other)))));
 };
 
-var useStyles$u = makeStyles(function (theme) { return ({
+var useStyles$y = makeStyles(function (theme) { return ({
     root: {
         width: "100%",
         backgroundColor: theme.palette.background.paper
@@ -699,7 +699,7 @@ function findNameById(node, id) {
     return null;
 }
 var TreePickerControlV2 = function (props) {
-    var classes = useStyles$u();
+    var classes = useStyles$y();
     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 handleClickListItem = function (event) {
@@ -1352,7 +1352,7 @@ var useJobsOptionsFunctions = function (_a) {
     };
 };
 
-var useStyles$t = makeStyles(function (theme) { return ({
+var useStyles$x = makeStyles(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -1370,7 +1370,7 @@ var useStyles$t = 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 classes = useStyles$t();
+    var classes = useStyles$x();
     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 ({
@@ -1497,7 +1497,7 @@ var useJobsTableData = function (_a) {
             headerName: "Start Time",
             valueFormatter: function (_a) {
                 var value = _a.value;
-                return value === null ? "NULL" : moment$2(value).format("DD/MM/YYYY HH:mm");
+                return value === null ? "NULL" : moment$4(value).format("DD/MM/YYYY HH:mm");
             },
             flex: 1,
             cellStyle: {
@@ -1513,7 +1513,7 @@ var useJobsTableData = function (_a) {
             headerName: "Next Execution",
             valueFormatter: function (_a) {
                 var value = _a.value;
-                return value === null ? "NULL" : moment$2(value).format("DD/MM/YYYY HH:mm");
+                return value === null ? "NULL" : moment$4(value).format("DD/MM/YYYY HH:mm");
             },
             flex: 1,
             cellStyle: {
@@ -1529,7 +1529,7 @@ var useJobsTableData = function (_a) {
             headerName: "Started",
             valueFormatter: function (_a) {
                 var value = _a.value;
-                return value === null ? "NULL" : moment$2(value).format("DD/MM/YYYY HH:mm");
+                return value === null ? "NULL" : moment$4(value).format("DD/MM/YYYY HH:mm");
             },
             flex: 1,
             cellStyle: {
@@ -1545,7 +1545,7 @@ var useJobsTableData = function (_a) {
             headerName: "Last Seen",
             valueFormatter: function (_a) {
                 var value = _a.value;
-                return value === null ? "NULL" : moment$2(value).format("DD/MM/YYYY HH:mm");
+                return value === null ? "NULL" : moment$4(value).format("DD/MM/YYYY HH:mm");
             },
             flex: 2,
             cellStyle: {
@@ -1655,7 +1655,7 @@ var useJobsTableData = function (_a) {
     return { rows: rows, columnDefs: columnDefs };
 };
 
-var useStyles$s = makeStyles(function (theme) { return ({
+var useStyles$w = makeStyles(function (theme) { return ({
     root: {
         "& .MuiDataGrid-row": {
             cursor: "pointer"
@@ -1718,7 +1718,7 @@ var useStyles$s = makeStyles(function (theme) { return ({
 }); });
 var TableJobs = function (_a) {
     var getJobsFromAPI = _a.getJobsFromAPI, isLoading = _a.isLoading;
-    var classes = useStyles$s();
+    var classes = useStyles$w();
     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];
@@ -1875,8 +1875,8 @@ var JobsPage = function (props) {
 var LogsInitialState = {
     logs: [],
     searchData: {
-        Start: moment$2().add(-5, "days").hour(0).minute(0).second(0).toDate(),
-        End: moment$2().hour(23).minute(59).second(59).toDate(),
+        Start: moment$4().add(-5, "days").hour(0).minute(0).second(0).toDate(),
+        End: moment$4().hour(23).minute(59).second(59).toDate(),
         Search: "",
         LogTypeCode: "A"
     }
@@ -1912,8 +1912,8 @@ var LogsReducer = createSlice({
         resetFilters: function (state, _a) {
             _a.payload;
             state.searchData = {
-                Start: moment$2().add(-5, "days").hour(0).minute(0).second(0).toDate(),
-                End: moment$2().hour(23).minute(59).second(59).toDate(),
+                Start: moment$4().add(-5, "days").hour(0).minute(0).second(0).toDate(),
+                End: moment$4().hour(23).minute(59).second(59).toDate(),
                 Search: "",
                 LogTypeCode: "A"
             };
@@ -1982,7 +1982,7 @@ var SearchFilter = function (_a) {
         React__default.createElement(FormHelperText, { style: { marginBottom: 10, marginTop: -15 } }, "Search by Source, Message or User")));
 };
 
-var useStyles$r = makeStyles(function (theme) { return ({
+var useStyles$v = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15
     },
@@ -1999,7 +1999,7 @@ var formatTime = function (nowTime) {
 };
 var ModalLogSelected = function (_a) {
     var show = _a.show, onHide = _a.onHide, selectedLog = _a.selectedLog;
-    var classes = useStyles$r();
+    var classes = useStyles$v();
     return (React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
         React__default.createElement(MesfModal, { title: "LOG DETAILS", open: show, handleClose: function () { return onHide(false); }, maxWidth: "md", id: "log-details-modal" },
             React__default.createElement(MesfModal.Content, { style: { padding: "15px 30px" } },
@@ -2055,7 +2055,7 @@ var ModalLogSelected = function (_a) {
                         React__default.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(true); } }, "Close")))))));
 };
 
-var useStyles$q = makeStyles(function (theme) { return ({
+var useStyles$u = makeStyles(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -2073,7 +2073,7 @@ var useStyles$q = makeStyles(function (theme) { return ({
 var useLogTableData = function () {
     var _a;
     var state = useLogsContext().state;
-    var classes = useStyles$q();
+    var classes = useStyles$u();
     var formatTime = function (nowTime) {
         return (nowTime.toLocaleDateString("en-US") + " " + nowTime.toLocaleTimeString());
     };
@@ -2194,7 +2194,7 @@ var ButtonWithLoading = function (_a) {
         children));
 };
 
-var useStyles$p = makeStyles(function (theme) { return ({
+var useStyles$t = makeStyles(function (theme) { return ({
     root: {
         "& .MuiDataGrid-row": {
             cursor: "pointer"
@@ -2288,7 +2288,7 @@ var useLogsOptionsFunctions = function (_a) {
 var TableLogs = function (_a) {
     var isLoading = _a.isLoading; _a.rowData; var refreshData = _a.refreshData;
     var _b = useLogsContext(), _c = _b.state.searchData, Start = _c.Start, End = _c.End, Search = _c.Search, LogTypeCode = _c.LogTypeCode, _d = _b.actions, setLogTypeCodeFilter = _d.setLogTypeCodeFilter, setEndFilter = _d.setEndFilter, setStartFilter = _d.setStartFilter, setSearchFilter = _d.setSearchFilter;
-    var classes = useStyles$p();
+    var classes = useStyles$t();
     var gridStyle = useMemo(function () { return ({ height: "100%", width: "100%" }); }, []);
     var _e = useState(null); _e[0]; var setGridAPI = _e[1];
     var _f = useState(false), showLogModal = _f[0], setShowLogModal = _f[1];
@@ -2314,8 +2314,8 @@ var TableLogs = function (_a) {
     var handleResetButtonClick = function () {
         resetFilter();
         refreshData({
-            Start: moment$2().add(-5, "days").hour(0).minute(0).second(0).toDate(),
-            End: moment$2().hour(23).minute(59).second(59).toDate(),
+            Start: moment$4().add(-5, "days").hour(0).minute(0).second(0).toDate(),
+            End: moment$4().hour(23).minute(59).second(59).toDate(),
             Search: "",
             LogTypeCode: "A"
         });
@@ -2477,7 +2477,7 @@ var LogsPage = function (props) {
         React.createElement(Logs, null)));
 };
 
-var INITIAL_VALUES$2 = {
+var INITIAL_VALUES$3 = {
     ProfileId: null,
     ProfileName: ""
 };
@@ -2578,7 +2578,7 @@ var deleteProfile = function (profileId) { return __awaiter(void 0, void 0, void
     });
 }); };
 
-var useStyles$o = makeStyles(function (theme) { return ({
+var useStyles$s = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15
     },
@@ -2601,8 +2601,8 @@ var CreateProfile = function (_a) {
     var _d = useState(""), message = _d[0], setMessage = _d[1];
     var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
     var _f = useState(""), error = _f[0], setError = _f[1];
-    var classes = useStyles$o();
-    var _g = useForm({ defaultValues: INITIAL_VALUES$2 }), register = _g.register, handleSubmit = _g.handleSubmit, reset = _g.reset, errors = _g.formState.errors;
+    var classes = useStyles$s();
+    var _g = useForm({ defaultValues: INITIAL_VALUES$3 }), register = _g.register, handleSubmit = _g.handleSubmit, reset = _g.reset, errors = _g.formState.errors;
     var onSubmit = function (data) { return __awaiter(void 0, void 0, void 0, function () {
         var res;
         return __generator(this, function (_a) {
@@ -2836,7 +2836,7 @@ var DataTable = function (_a) {
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
-var useStyles$n = makeStyles(function (theme) { return ({
+var useStyles$r = makeStyles(function (theme) { return ({
     root: {
         "& .MuiFormLabel-asterisk": {
             display: "none"
@@ -2845,7 +2845,7 @@ var useStyles$n = makeStyles(function (theme) { return ({
 }); });
 var ActionsOfProfile = function (_a) {
     var profileForEdit = _a.profileForEdit, show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$n();
+    var classes = useStyles$r();
     var _b = useState(null), actionsOfProfile = _b[0], setActionsOfProfile = _b[1];
     var _c = useState(false), open = _c[0], setOpen = _c[1];
     var _d = useState(true), isLoading = _d[0], setIsLoading = _d[1];
@@ -2855,7 +2855,7 @@ var ActionsOfProfile = function (_a) {
     var _h = useState(""), profileName = _h[0], setProfileName = _h[1];
     var _j = useState(""), nameError = _j[0], setNameError = _j[1];
     var _k = useState(false); _k[0]; var setShowEditInput = _k[1];
-    var handleSubmit = useForm({ defaultValues: INITIAL_VALUES$2 }).handleSubmit;
+    var handleSubmit = useForm({ defaultValues: INITIAL_VALUES$3 }).handleSubmit;
     var handleClose = function (event, reason) {
         if (reason === "clickaway") {
             return;
@@ -3033,7 +3033,7 @@ var ProfilesProvider = function (_a) {
     return (React__default.createElement(ProfilesContext.Provider, { value: { state: state, actions: actions } }, children));
 };
 
-var useStyles$m = makeStyles(function (theme) { return ({
+var useStyles$q = makeStyles(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -3048,10 +3048,10 @@ var useStyles$m = makeStyles(function (theme) { return ({
         }
     }
 }); });
-var useTableData$2 = function (_a) {
+var useTableData$3 = function (_a) {
     var setProfileId = _a.setProfileId, setModalProceduresProfile = _a.setModalProceduresProfile, setModalDeleteProfile = _a.setModalDeleteProfile, showContextMenu = _a.showContextMenu;
     var state = useProfilesContext().state;
-    var classes = useStyles$m();
+    var classes = useStyles$q();
     var rows = state.profiles.map(function (_a) {
         var ProfileId = _a.ProfileId, ProfileName = _a.ProfileName;
         return ({
@@ -3123,7 +3123,7 @@ var useTableData$2 = function (_a) {
     return { rows: rows, columnDefs: columnDefs };
 };
 
-var useStyles$l = makeStyles(function (theme) { return ({
+var useStyles$p = makeStyles(function (theme) { return ({
     root: {
         "& .ag-icon-menu": {
             display: "none"
@@ -3195,7 +3195,7 @@ var TableProfiles = function (_a) {
     var _e = useState(null), profile = _e[0], setProfile = _e[1];
     var gridStyle = useMemo(function () { return ({ height: "100%", width: "100%" }); }, []);
     var _f = useState(null), gridApi = _f[0], setGridApi = _f[1];
-    var classes = useStyles$l();
+    var classes = useStyles$p();
     var loadingOverlayComponent = useMemo(function () {
         return LazyLoading;
     }, []);
@@ -3214,7 +3214,7 @@ var TableProfiles = function (_a) {
         setModalProceduresProfile: setModalProceduresProfile
     }).getMenuOptions;
     var _g = useContextMenuMESF(), showContextMenu = _g.showContextMenu, registerConfig = _g.registerConfig;
-    var _h = useTableData$2({
+    var _h = useTableData$3({
         setModalDeleteProfile: setModalDeleteProfile,
         setModalProceduresProfile: setModalProceduresProfile,
         setProfileId: setProfile,
@@ -3335,7 +3335,7 @@ var ProfilesPage = function (props) {
         React.createElement(Profiles, null)));
 };
 
-var INITIAL_VALUES$1 = {
+var INITIAL_VALUES$2 = {
     PatternStart: new Date(),
     ShiftCodes: "",
     Crews: "",
@@ -3350,7 +3350,7 @@ var INITIAL_VALUES$1 = {
 
 var ShiftsCrewsInitialState = {
     shifts: [],
-    shiftTableData: INITIAL_VALUES$1
+    shiftTableData: INITIAL_VALUES$2
 };
 var ShiftsCrewsReducer = createSlice({
     name: "__",
@@ -3434,7 +3434,7 @@ var DeleteShiftParameters = function (PatternStart) { return __awaiter(void 0, v
     });
 }); };
 
-var useStyles$k = makeStyles(function (theme) { return ({
+var useStyles$o = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15
     },
@@ -3460,10 +3460,10 @@ var CreateShift = function (_a) {
     var _d = useState(false), open = _d[0], setOpen = _d[1];
     var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
     var _f = useState(""), error = _f[0], setError = _f[1];
-    var classes = useStyles$k();
+    var classes = useStyles$o();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _g = useForm({
-        defaultValues: shiftTableData ? shiftTableData : INITIAL_VALUES$1
+        defaultValues: shiftTableData ? shiftTableData : INITIAL_VALUES$2
     }), control = _g.control, handleSubmit = _g.handleSubmit, reset = _g.reset, watch = _g.watch, setValue = _g.setValue, errors = _g.formState.errors;
     // Progress bar
     var calculatePercentage = function () {
@@ -3662,7 +3662,7 @@ var CreateShift = function (_a) {
             React.createElement(Alert, { severity: "success", onClose: handleClose }, "The shift was created successfully"))));
 };
 
-var useStyles$j = makeStyles(function (theme) { return ({
+var useStyles$n = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15
     },
@@ -3688,10 +3688,10 @@ var DeleteShift = function (_a) {
     var _c = useState(false), open = _c[0], setOpen = _c[1];
     var _d = useState(false), isSubmitLoading = _d[0], setIsSubmitLoading = _d[1];
     var _e = useState(false), deleteAlert = _e[0], setDeleteAlert = _e[1];
-    var classes = useStyles$j();
+    var classes = useStyles$n();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _f = useState(""), error = _f[0], setError = _f[1];
-    var _g = useForm({ defaultValues: INITIAL_VALUES$1 }), control = _g.control, setValue = _g.setValue, reset = _g.reset, watch = _g.watch, errors = _g.formState.errors;
+    var _g = useForm({ defaultValues: INITIAL_VALUES$2 }), control = _g.control, setValue = _g.setValue, reset = _g.reset, watch = _g.watch, errors = _g.formState.errors;
     var onDelete = function (data) { return __awaiter(void 0, void 0, void 0, function () {
         var shiftParameters;
         return __generator(this, function (_a) {
@@ -3827,7 +3827,7 @@ var DeleteShift = function (_a) {
             React.createElement(Alert, { severity: "warning", onClose: handleClose }, "The shift was deleted successfully"))));
 };
 
-var useStyles$i = makeStyles(function (theme) { return ({
+var useStyles$m = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15
     },
@@ -3854,9 +3854,9 @@ var EditShift = function (_a) {
     var _d = useState(""), error = _d[0], setError = _d[1];
     var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
     var _f = useState(false), initialShiftPerDayAndCrewsNumber = _f[0], setInitialShiftPerDayAndCrewsNumber = _f[1];
-    var classes = useStyles$i();
+    var classes = useStyles$m();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
-    var _g = useForm({ defaultValues: INITIAL_VALUES$1 }), control = _g.control, setValue = _g.setValue, handleSubmit = _g.handleSubmit, reset = _g.reset, watch = _g.watch, errors = _g.formState.errors;
+    var _g = useForm({ defaultValues: INITIAL_VALUES$2 }), control = _g.control, setValue = _g.setValue, handleSubmit = _g.handleSubmit, reset = _g.reset, watch = _g.watch, errors = _g.formState.errors;
     // Progress bar
     var calculatePercentage = function () {
         return ((crewRotation === null || crewRotation === void 0 ? void 0 : crewRotation.length) / maxCrewRotationLength) * 100;
@@ -4122,7 +4122,7 @@ var useShiftsOptionsFunctions = function (_a) {
     };
 };
 
-var useStyles$h = makeStyles(function (theme) { return ({
+var useStyles$l = makeStyles(function (theme) { return ({
     root: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -4137,11 +4137,11 @@ var useStyles$h = makeStyles(function (theme) { return ({
         }
     }
 }); });
-var useTableData$1 = function (_a) {
+var useTableData$2 = function (_a) {
     var _b;
     var setOpenModalEditShift = _a.setOpenModalEditShift, setOpenModalDeleteShift = _a.setOpenModalDeleteShift, showContextMenu = _a.showContextMenu;
     var _c = useShiftsCrewsContext(), state = _c.state, actions = _c.actions;
-    var classes = useStyles$h();
+    var classes = useStyles$l();
     var rows = (_b = state.shifts) === null || _b === void 0 ? void 0 : _b.map(function (_a) {
         var PatternStart = _a.PatternStart, ShiftCodes = _a.ShiftCodes, Crews = _a.Crews, PatternDays = _a.PatternDays, CrewRotation = _a.CrewRotation, Comments = _a.Comments, CanEdit = _a.CanEdit;
         return ({
@@ -4161,7 +4161,7 @@ var useTableData$1 = function (_a) {
             headerName: "Pattern Start",
             valueFormatter: function (_a) {
                 var value = _a.value;
-                return "".concat(moment$2(value).format("L"), ", ").concat(moment$2(value).format("LTS"));
+                return "".concat(moment$4(value).format("L"), ", ").concat(moment$4(value).format("LTS"));
             },
             minWidth: 180,
             flex: 4,
@@ -4252,7 +4252,7 @@ var useTableData$1 = function (_a) {
     return { rows: rows, columnDefs: columnDefs };
 };
 
-var useStyles$g = makeStyles(function (theme) { return ({
+var useStyles$k = makeStyles(function (theme) { return ({
     root: {
         "& .ag-icon-menu": {
             display: "none"
@@ -4302,7 +4302,7 @@ var useStyles$g = makeStyles(function (theme) { return ({
 }); });
 var TableShiftsCrews = function (_a) {
     _a.isLoading; var getShiftsCrewsFromAPI = _a.getShiftsCrewsFromAPI;
-    var classes = useStyles$g();
+    var classes = useStyles$k();
     var _b = useState(false), openModalNew = _b[0], setOpenModalNew = _b[1];
     var _c = useState(false), openModalEditShift = _c[0], setOpenModalEditShift = _c[1];
     var _d = useState(false), openModalDeleteShift = _d[0], setOpenModalDeleteShift = _d[1];
@@ -4325,7 +4325,7 @@ var TableShiftsCrews = function (_a) {
         setShowEditModal: setOpenModalEditShift
     }).getMenuOptions;
     var _f = useContextMenuMESF(), showContextMenu = _f.showContextMenu, registerConfig = _f.registerConfig;
-    var _g = useTableData$1({
+    var _g = useTableData$2({
         setOpenModalEditShift: setOpenModalEditShift,
         setOpenModalDeleteShift: setOpenModalDeleteShift,
         showContextMenu: showContextMenu
@@ -4806,7 +4806,7 @@ var useAssetCodes = function () {
     return { loadFilterAssets: loadFilterAssets };
 };
 
-var useStyles$f = makeStyles(function (theme) { return ({
+var useStyles$j = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -4849,7 +4849,7 @@ var useStyles$f = makeStyles(function (theme) { return ({
 }); });
 var CreateNewAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$f();
+    var classes = useStyles$j();
     var _b = useState(true), fullWidth = _b[0]; _b[1];
     var _c = useState("sm"), maxWidth = _c[0]; _c[1];
     var _d = useState(false), assetCreatedSuccess = _d[0], setAssetCreatedSuccess = _d[1];
@@ -4968,7 +4968,7 @@ var CreateNewAssetDialog = function (_a) {
             React__default.createElement(Alert$2, { severity: "info", onClose: handleClose }, "Document created succesfully"))));
 };
 
-var useStyles$e = makeStyles(function (theme) { return ({
+var useStyles$i = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -5016,7 +5016,7 @@ var useStyles$e = makeStyles(function (theme) { return ({
 }); });
 var EditAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$e();
+    var classes = useStyles$i();
     var _b = useState(true), fullWidth = _b[0]; _b[1];
     var _c = useState("sm"), maxWidth = _c[0]; _c[1];
     var _d = useState(false), assetEditedSuccess = _d[0], setAssetEditedSuccess = _d[1];
@@ -5136,7 +5136,7 @@ var EditAssetDialog = function (_a) {
                                 React__default.createElement(Alert$3, { severity: "info", onClose: handleClose }, "Document created succesfully")))))))));
 };
 
-var useStyles$d = makeStyles(function (theme) { return ({
+var useStyles$h = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -5180,7 +5180,7 @@ var useStyles$d = makeStyles(function (theme) { return ({
 }); });
 var RemoveAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$d();
+    var classes = useStyles$h();
     var _b = useState(true), fullWidth = _b[0]; _b[1];
     var _c = useState("sm"), maxWidth = _c[0]; _c[1];
     var _d = useState(false), assetRemovedSuccess = _d[0], setAssetRemovedSuccess = _d[1];
@@ -5239,7 +5239,7 @@ var RemoveAssetDialog = function (_a) {
             React__default.createElement(Alert$2, { severity: "info", onClose: handleClose }, "Asset removed succesfully"))));
 };
 
-var useStyles$c = makeStyles(function (theme) { return ({
+var useStyles$g = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -5290,7 +5290,7 @@ var useStyles$c = makeStyles(function (theme) { return ({
 }); });
 var ViewerAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$c();
+    var classes = useStyles$g();
     var _b = useState(true), fullWidth = _b[0]; _b[1];
     var _c = useState("sm"), maxWidth = _c[0]; _c[1];
     var _d = useConfigurationAssetContext().state, dataToCreateAsset = _d.dataToCreateAsset, assetNodeSelectedInTree = _d.assetNodeSelectedInTree;
@@ -5463,7 +5463,7 @@ var TypeIcon = function (props) {
     }
 };
 
-var useStyles$b = makeStyles(function (theme) { return ({
+var useStyles$f = makeStyles(function (theme) { return ({
     root: {
         alignItems: "center",
         backgroundColor: "#1967d2",
@@ -5488,7 +5488,7 @@ var useStyles$b = makeStyles(function (theme) { return ({
 }); });
 var CustomDragPreview$1 = function (props) {
     var _a;
-    var classes = useStyles$b();
+    var classes = useStyles$f();
     var item = props.monitorProps.item;
     return (React__default.createElement("div", { className: classes.root },
         React__default.createElement("div", { className: classes.icon },
@@ -5496,7 +5496,7 @@ var CustomDragPreview$1 = function (props) {
         React__default.createElement("div", { className: classes.label }, item.text)));
 };
 
-var useStyles$a = makeStyles(function (theme) { return ({
+var useStyles$e = makeStyles(function (theme) { return ({
     root: {
         alignItems: "center",
         display: "flex",
@@ -5543,7 +5543,7 @@ var CustomNode = function (_a) {
     var _c = useConfigurationAssetContext(), openAssets = _c.state.openAssets, setOpenAssets = _c.actions.setOpenAssets;
     var _d = props.node, id = _d.id, droppable = _d.droppable, data = _d.data;
     var indent = props.depth * 24;
-    var classes = useStyles$a();
+    var classes = useStyles$e();
     var nodeClasses = "".concat(classes.customNodeRoot, " ").concat(classes.root, " ").concat(isSelected ? classes.selected : "");
     var handleClick = function (e) {
         props.onClick(e, props.node);
@@ -5598,7 +5598,7 @@ var CustomNode = function (_a) {
             React__default.createElement(Typography$1, { variant: "body2" }, props.node.text))));
 };
 
-var useStyles$9 = makeStyles(function (theme) { return ({
+var useStyles$d = makeStyles(function (theme) { return ({
     root: {
         alignItems: "flex-start",
         backgroundColor: "#1967d2",
@@ -5630,7 +5630,7 @@ var useStyles$9 = makeStyles(function (theme) { return ({
     }
 }); });
 var MultipleDragPreview = function (props) {
-    var classes = useStyles$9();
+    var classes = useStyles$d();
     return (React__default.createElement(Badge, { classes: { badge: classes.badge }, color: "error", badgeContent: props.dragSources.length, anchorOrigin: { vertical: "top", horizontal: "right" } },
         React__default.createElement("div", { className: classes.root, "data-testid": "custom-drag-preview" }, props.dragSources.map(function (node) {
             var _a;
@@ -5641,7 +5641,7 @@ var MultipleDragPreview = function (props) {
         }))));
 };
 
-var useStyles$8 = makeStyles(function (theme) { return ({
+var useStyles$c = makeStyles(function (theme) { return ({
     root: {},
     contextMenu: {
         backgroundColor: "#F8F8F8",
@@ -5687,7 +5687,7 @@ var useStyles$8 = makeStyles(function (theme) { return ({
 }); });
 var AssetViewComponent = function () {
     var _a = useState([]), selectedNodes = _a[0], setSelectedNodes = _a[1];
-    var classes = useStyles$8();
+    var classes = useStyles$c();
     var _b = useState(false), isDragging = _b[0], setIsDragging = _b[1];
     var _c = useState(false), isCtrlPressing = _c[0], setIsCtrlPressing = _c[1];
     var _d = useState(false), isDoubleClick = _d[0], setIsDoubleClick = _d[1];
@@ -6088,7 +6088,7 @@ var ChangePassword$1 = function (_a) {
     }
 };
 
-var INITIAL_VALUES = {
+var INITIAL_VALUES$1 = {
     UserId: null,
     UserName: "",
     FirstName: "",
@@ -6100,7 +6100,7 @@ var INITIAL_VALUES = {
     Profiles: []
 };
 
-var useStyles$7 = makeStyles(function (theme) { return ({
+var useStyles$b = makeStyles(function (theme) { return ({
     root: {
         "& .MuiSelect-select": {
             minHeight: "40px"
@@ -6133,7 +6133,7 @@ var MenuProps$1 = {
 };
 var AuthTypeSelector = function (_a) {
     var value = _a.value, onChange = _a.onChange, disabled = _a.disabled;
-    var classes = useStyles$7();
+    var classes = useStyles$b();
     var _b = useState([]), authTypes = _b[0], setAuthTypes = _b[1];
     var _c = useState(true), isLoading = _c[0], setIsLoading = _c[1];
     var theme = useTheme();
@@ -6169,7 +6169,7 @@ var AuthTypeSelector = function (_a) {
                 React.createElement(Chip, { key: "selected-authType-".concat(selected), label: selectedAuthTypeName, className: classes.chip }))); }, MenuProps: MenuProps$1 }, authTypes.map(function (authType) { return (React.createElement(MenuItem, { key: "auth-".concat(authType.AuthTypeId), value: authType.AuthTypeId, style: getStyles(authType.AuthTypeId, authTypes, theme) }, authType.Name)); })))) : (React.createElement(React.Fragment, null))));
 };
 
-var useStyles$6 = makeStyles(function (theme) { return ({
+var useStyles$a = makeStyles(function (theme) { return ({
     root: {
         "& .MuiSelect-select": {
             height: "auto",
@@ -6210,7 +6210,7 @@ var MenuProps = {
 };
 var ProfilesPicker = function (_a) {
     var value = _a.value, onChange = _a.onChange; _a.userIdForDelete; var setprofileError = _a.setprofileError, disabled = _a.disabled;
-    var classes = useStyles$6();
+    var classes = useStyles$a();
     var theme = useTheme();
     var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
     var _c = useState([]), profiles = _c[0], setProfiles = _c[1];
@@ -6250,7 +6250,7 @@ var ProfilesPicker = function (_a) {
         React__default.createElement(Select, { autoWidth: true, labelId: "demo-mutiple-chip-label", id: "demo-mutiple-chip", multiple: true, value: value, onChange: onChange, input: React__default.createElement(Input, { id: "select-multiple-chip" }), renderValue: function (selected) { return (React__default.createElement("div", { className: classes.chips }, selected.map(function (profileId) { return (React__default.createElement(Chip, { key: "selected-profile-".concat(profileId), label: getProfileNameById(profileId), className: classes.chip })); }))); }, MenuProps: MenuProps }, profiles.map(function (profile) { return (React__default.createElement(MenuItem, { key: "profile-".concat(profile.ProfileId), value: profile.ProfileId, style: getStyles(profile.ProfileId, profiles, theme) }, profile.ProfileName.replaceAll("Profile", ""))); })))) : (React__default.createElement(React__default.Fragment, null))));
 };
 
-var useStyles$5 = makeStyles(function (theme) { return ({
+var useStyles$9 = makeStyles(function (theme) { return ({
     checkbox: {
         userSelect: "none"
     },
@@ -6272,8 +6272,8 @@ var CreateUser = function (_a) {
     var _f = useState(false), isSubmitLoading = _f[0], setIsSubmitLoading = _f[1];
     var _g = useState(""), error = _g[0], setError = _g[1];
     var _h = useState(""), profileError = _h[0], setprofileError = _h[1];
-    var classes = useStyles$5();
-    var _j = useForm({ defaultValues: INITIAL_VALUES }), register = _j.register, control = _j.control, handleSubmit = _j.handleSubmit, reset = _j.reset, watch = _j.watch, errors = _j.formState.errors;
+    var classes = useStyles$9();
+    var _j = useForm({ defaultValues: INITIAL_VALUES$1 }), register = _j.register, control = _j.control, handleSubmit = _j.handleSubmit, reset = _j.reset, watch = _j.watch, errors = _j.formState.errors;
     var handleClose = function (event, reason) {
         if (reason === "clickaway") {
             return;
@@ -6371,7 +6371,7 @@ var DeleteUser = function (_a) {
     var _f = useState(""), error = _f[0], setError = _f[1];
     var _g = useState(""), profileError = _g[0], setprofileError = _g[1];
     var _h = useForm({
-        defaultValues: INITIAL_VALUES
+        defaultValues: INITIAL_VALUES$1
     }), register = _h.register, control = _h.control, setValue = _h.setValue;
     var handleClose = function (event, reason) {
         if (reason === "clickaway") {
@@ -6487,7 +6487,7 @@ var DeleteUser = function (_a) {
         React__default.createElement(ErrorModal, { error: profileError, onHide: function () { return setprofileError(""); }, title: "Error Choosing Profile" })));
 };
 
-var useStyles$4 = makeStyles(function (theme) { return ({
+var useStyles$8 = makeStyles(function (theme) { return ({
     checkbox: {
         userSelect: "none"
     },
@@ -6506,13 +6506,13 @@ var useStyles$4 = makeStyles(function (theme) { return ({
 var EditUser = function (_a) {
     var _b, _c, _d;
     var userId = _a.userId, show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$4();
+    var classes = useStyles$8();
     var _e = useState(false), open = _e[0], setOpen = _e[1];
     var _f = useState(false), isLoading = _f[0], setIsLoading = _f[1];
     var _g = useState(false), isSubmitLoading = _g[0], setIsSubmitLoading = _g[1];
     var _h = useState(""), error = _h[0], setError = _h[1];
     var _j = useState(""), profileError = _j[0], setprofileError = _j[1];
-    var _k = useForm({ defaultValues: INITIAL_VALUES }), register = _k.register, control = _k.control, setValue = _k.setValue, handleSubmit = _k.handleSubmit, errors = _k.formState.errors;
+    var _k = useForm({ defaultValues: INITIAL_VALUES$1 }), register = _k.register, control = _k.control, setValue = _k.setValue, handleSubmit = _k.handleSubmit, errors = _k.formState.errors;
     var handleClose = function (event, reason) {
         if (reason === "clickaway") {
             return;
@@ -6657,7 +6657,7 @@ var UsersProvider = function (_a) {
     return (React__default.createElement(UsersContext.Provider, { value: { state: state, actions: actions } }, children));
 };
 
-var useStyles$3 = makeStyles(function (theme) { return ({
+var useStyles$7 = makeStyles(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -6673,7 +6673,7 @@ var useStyles$3 = makeStyles(function (theme) { return ({
     }
 }); });
 var buttonsCellRenderer = function (params) {
-    var classes = useStyles$3();
+    var classes = useStyles$7();
     var setUserId = params.setUserId, setOpenModalEditDataUser = params.setOpenModalEditDataUser, setOpenModalDeleteUser = params.setOpenModalDeleteUser, setOpenModalChangePasswordd = params.setOpenModalChangePasswordd, showContextMenu = params.showContextMenu;
     return (React__default.createElement(Grid, { container: true, style: {
             height: "100%",
@@ -6722,7 +6722,7 @@ var buttonsCellRenderer = function (params) {
                 React__default.createElement(FormatListBulletedSharpIcon, { style: { height: "auto" }, color: "action" })))));
 };
 
-var useTableData = function (_a) {
+var useTableData$1 = function (_a) {
     var setUserId = _a.setUserId, setOpenModalEditDataUser = _a.setOpenModalEditDataUser, setOpenModalDeleteUser = _a.setOpenModalDeleteUser, setOpenModalChangePasswordd = _a.setOpenModalChangePasswordd, showContextMenu = _a.showContextMenu;
     var state = useUsersContext().state;
     var columnDefs = [
@@ -6872,7 +6872,7 @@ var useUsersOptionsFunctions = function (_a) {
     };
 };
 
-var useStyles$2 = makeStyles(function (theme) { return ({
+var useStyles$6 = makeStyles(function (theme) { return ({
     root: {
         "& .ag-icon-menu": {
             display: "none"
@@ -6943,7 +6943,7 @@ var TableUsers = function (_a) {
     var _c = useState(false), openModalEditDataUser = _c[0], setOpenModalEditDataUser = _c[1];
     var _d = useState(false), openModalDeleteUser = _d[0], setOpenModalDeleteUser = _d[1];
     var _e = useState(false), openModalChangePassword = _e[0], setOpenModalChangePasswordd = _e[1];
-    var classes = useStyles$2();
+    var classes = useStyles$6();
     var _f = useState(null), userId = _f[0], setUserId = _f[1];
     var _g = useState(null), gridApi = _g[0], setGridApi = _g[1];
     var loadingOverlayComponent = useMemo(function () {
@@ -6957,7 +6957,7 @@ var TableUsers = function (_a) {
         setShowChangePasswordModal: setOpenModalChangePasswordd
     }).getMenuOptions;
     var _h = useContextMenuMESF(), showContextMenu = _h.showContextMenu, registerConfig = _h.registerConfig;
-    var _j = useTableData({
+    var _j = useTableData$1({
         setUserId: setUserId,
         setOpenModalEditDataUser: setOpenModalEditDataUser,
         setOpenModalDeleteUser: setOpenModalDeleteUser,
@@ -7412,7 +7412,7 @@ var MESApiService = /** @class */ (function () {
                 data.dataBaseName = database;
                 data.parameters = formattedParameters;
                 Date.prototype.toJSON = function () {
-                    return moment$2(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$4(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/Execute", {
@@ -7471,7 +7471,7 @@ var MESApiService = /** @class */ (function () {
                         data.dataBaseName = database;
                         data.parameters = formattedParameters;
                         Date.prototype.toJSON = function () {
-                            return moment$2(this).format("YYYY-MM-DDTHH:mm:ss");
+                            return moment$4(this).format("YYYY-MM-DDTHH:mm:ss");
                         }; // eslint-disable-line
                         _a.label = 1;
                     case 1:
@@ -7532,7 +7532,7 @@ var MESApiService = /** @class */ (function () {
                 data.dataBaseName = database;
                 data.parameters = formattedParameters;
                 Date.prototype.toJSON = function () {
-                    return moment$2(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$4(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/ExecuteJSON", {
@@ -7587,7 +7587,7 @@ var MESApiService = /** @class */ (function () {
                     formattedParameters.push(formattedParameter);
                 });
                 Date.prototype.toJSON = function () {
-                    return moment$2(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$4(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 files.forEach(function (element) {
@@ -7652,7 +7652,7 @@ var MESApiService = /** @class */ (function () {
                 data.parameters = formattedParameters;
                 data.fileName = fileName || "Default.xlsx";
                 Date.prototype.toJSON = function () {
-                    return moment$2(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$4(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/Export", {
@@ -7728,7 +7728,7 @@ var MESApiService = /** @class */ (function () {
                 data.parameters = formattedParameters;
                 data.fileName = fileName || "Default.xlsx";
                 Date.prototype.toJSON = function () {
-                    return moment$2(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$4(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/ExportExcel", {
@@ -7815,7 +7815,7 @@ var TimeService = /** @class */ (function () {
         else {
             this.timeZone = timeZone;
         }
-        moment$3.tz.setDefault(this.timeZone);
+        moment$5.tz.setDefault(this.timeZone);
     };
     TimeService.prototype.toUTC = function (datetime, format$1) {
         try {
@@ -7854,7 +7854,7 @@ var TimeService = /** @class */ (function () {
     };
     return TimeService;
 }());
-var getMomentTz = function () { return moment$3; };
+var getMomentTz = function () { return moment$5; };
 var dxtServerTimeZone = function () {
     return TimeService.getInstance().getServerTimeZone;
 };
@@ -7904,7 +7904,7 @@ var getShiftByParameters = function (parameters) { return __awaiter(void 0, void
     });
 }); };
 
-var moment$1 = getMomentTz();
+var moment$3 = getMomentTz();
 var useShiftNavigatorManager = function () {
     var _a = useState(null), shiftInfo = _a[0], setShiftInfo = _a[1];
     var _b = useState(false); _b[0]; var setIsShiftInfoLoading = _b[1];
@@ -7936,11 +7936,11 @@ var useShiftNavigatorManager = function () {
                 case 1:
                     resp = _a.sent();
                     if (resp.ok) {
-                        shift = __assign(__assign({}, resp.data), { CurrentProductionDate: moment$1
+                        shift = __assign(__assign({}, resp.data), { CurrentProductionDate: moment$3
                                 .utc(resp.data.CurrentProductionDate)
-                                .toDate(), CurrentStart: moment$1.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$1.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$1
+                                .toDate(), CurrentStart: moment$3.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$3.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$3
                                 .utc(resp.data.PreviousProductionDate)
-                                .toDate(), PreviousStart: moment$1.utc(resp.data.PreviousStart).toDate(), PreviousEnd: moment$1.utc(resp.data.PreviousEnd).toDate(), LastProductionDate: moment$1.utc(resp.data.LastProductionDate).toDate(), LastStart: moment$1.utc(resp.data.LastStart).toDate(), LastEnd: moment$1.utc(resp.data.LastEnd).toDate() });
+                                .toDate(), PreviousStart: moment$3.utc(resp.data.PreviousStart).toDate(), PreviousEnd: moment$3.utc(resp.data.PreviousEnd).toDate(), LastProductionDate: moment$3.utc(resp.data.LastProductionDate).toDate(), LastStart: moment$3.utc(resp.data.LastStart).toDate(), LastEnd: moment$3.utc(resp.data.LastEnd).toDate() });
                         setShiftInfo(shift);
                         return [2 /*return*/, shift];
                     }
@@ -7965,11 +7965,11 @@ var useShiftNavigatorManager = function () {
                 case 2:
                     resp = _a.sent();
                     if (resp.ok) {
-                        shift = __assign(__assign({}, resp.data), { CurrentProductionDate: moment$1
+                        shift = __assign(__assign({}, resp.data), { CurrentProductionDate: moment$3
                                 .utc(resp.data.CurrentProductionDate)
-                                .toDate(), CurrentStart: moment$1.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$1.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$1
+                                .toDate(), CurrentStart: moment$3.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$3.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$3
                                 .utc(resp.data.PreviousProductionDate)
-                                .toDate(), PreviousStart: moment$1.utc(resp.data.PreviousStart).toDate(), PreviousEnd: moment$1.utc(resp.data.PreviousEnd).toDate(), LastProductionDate: moment$1.utc(resp.data.LastProductionDate).toDate(), LastStart: moment$1.utc(resp.data.LastStart).toDate(), LastEnd: moment$1.utc(resp.data.LastEnd).toDate() });
+                                .toDate(), PreviousStart: moment$3.utc(resp.data.PreviousStart).toDate(), PreviousEnd: moment$3.utc(resp.data.PreviousEnd).toDate(), LastProductionDate: moment$3.utc(resp.data.LastProductionDate).toDate(), LastStart: moment$3.utc(resp.data.LastStart).toDate(), LastEnd: moment$3.utc(resp.data.LastEnd).toDate() });
                         setShiftInfo(shift);
                         return [2 /*return*/, shift];
                     }
@@ -7995,11 +7995,11 @@ var useShiftNavigatorManager = function () {
                 case 1:
                     resp = _a.sent();
                     if (resp.ok) {
-                        shift = __assign(__assign({}, resp.data), { CurrentProductionDate: moment$1
+                        shift = __assign(__assign({}, resp.data), { CurrentProductionDate: moment$3
                                 .utc(resp.data.CurrentProductionDate)
-                                .toDate(), CurrentStart: moment$1.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$1.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$1
+                                .toDate(), CurrentStart: moment$3.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$3.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$3
                                 .utc(resp.data.PreviousProductionDate)
-                                .toDate(), PreviousStart: moment$1.utc(resp.data.PreviousStart).toDate(), PreviousEnd: moment$1.utc(resp.data.PreviousEnd).toDate(), LastProductionDate: moment$1.utc(resp.data.LastProductionDate).toDate(), LastStart: moment$1.utc(resp.data.LastStart).toDate(), LastEnd: moment$1.utc(resp.data.LastEnd).toDate() });
+                                .toDate(), PreviousStart: moment$3.utc(resp.data.PreviousStart).toDate(), PreviousEnd: moment$3.utc(resp.data.PreviousEnd).toDate(), LastProductionDate: moment$3.utc(resp.data.LastProductionDate).toDate(), LastStart: moment$3.utc(resp.data.LastStart).toDate(), LastEnd: moment$3.utc(resp.data.LastEnd).toDate() });
                         setShiftInfo(shift);
                         return [2 /*return*/, shift];
                     }
@@ -8063,7 +8063,7 @@ var ShiftNavigatorProvider = function (_a) {
     return (React__default.createElement(ShiftNavigatorContext.Provider, { value: shiftNavigatorManager }, children));
 };
 
-var moment = getMomentTz();
+var moment$2 = getMomentTz();
 var ShiftDayNavigatorControl = function (props) {
     var _a;
     var _b = useShiftNavigator(), shiftInfo = _b.shiftInfo, initShiftNavigator = _b.initShiftNavigator, moveShift = _b.moveShift, getShiftDataFromAPI = _b.getShiftDataFromAPI;
@@ -8105,7 +8105,7 @@ var ShiftDayNavigatorControl = function (props) {
                         }, size: "small" },
                         React__default.createElement(ArrowBackRounded, null)))),
             React__default.createElement(Grid, { item: true },
-                React__default.createElement(DatePicker, { label: "Current Date", timezone: "UTC", format: "MM/DD/YYYY", maxDate: moment(), closeOnSelect: true, formatDensity: "dense", value: moment(shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.CurrentProductionDate), onChange: function (date) {
+                React__default.createElement(DatePicker, { label: "Current Date", timezone: "UTC", format: "MM/DD/YYYY", maxDate: moment$2(), closeOnSelect: true, formatDensity: "dense", value: moment$2(shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.CurrentProductionDate), onChange: function (date) {
                         if (date) {
                             getShiftDataFromAPI(date.toDate(), 0).then(function () { });
                         }
@@ -8138,51 +8138,389 @@ var ShiftDayNavigatorControl = function (props) {
                         React__default.createElement(SkipNext, null)))))));
 };
 
-var useStyles$1 = makeStyles(function (theme) { return ({
-    contextMenu: {
-        backgroundColor: "#fff",
-        borderRadius: "2px",
-        padding: "5px 0",
-        width: "180px",
-        height: "auto",
-        margin: "0",
-        position: "fixed",
-        zIndex: 1,
-        listStyle: "none",
-        boxShadow: "0 0 20px 0 #ccc",
-        "& .MuiMenuItem-root": {
-            fontSize: "14px"
-        },
-        "& .MuiListItemIcon-root": {
-            minWidth: "25px",
-            padding: "0"
-        },
-        "& .MuiSvgIcon-root": {
-            fontSize: "16px"
-        }
-    }
-}); });
+var moment$1 = getMomentTz();
+var getShiftsRangeByParameters = function (period, Start, End, StartShiftId, EndShiftId, action) {
+    if (Start === void 0) { Start = null; }
+    if (End === void 0) { End = null; }
+    if (StartShiftId === void 0) { StartShiftId = null; }
+    if (EndShiftId === void 0) { EndShiftId = null; }
+    if (action === void 0) { action = null; }
+    return __awaiter(void 0, void 0, void 0, function () {
+        var apiService, resp, data;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    apiService = new MESApiService();
+                    return [4 /*yield*/, apiService.callV2("[MES].[GetShiftsRangeByParameters]", [
+                            {
+                                name: "Period",
+                                value: period
+                            },
+                            {
+                                name: "Start",
+                                value: Start === null || Start === void 0 ? void 0 : Start.toISOString()
+                            },
+                            {
+                                name: "End",
+                                value: End === null || End === void 0 ? void 0 : End.toISOString()
+                            },
+                            {
+                                name: "StartShiftId",
+                                value: StartShiftId
+                            },
+                            {
+                                name: "EndShiftId",
+                                value: EndShiftId
+                            },
+                            {
+                                name: "Action",
+                                value: action
+                            },
+                        ])];
+                case 1:
+                    resp = _a.sent();
+                    if (resp.ok) {
+                        data = resp.data;
+                        data.tables[0].rows.map(function (shift) {
+                            shift.Start = moment$1.utc(shift["Start"]).toDate();
+                            shift.End = moment$1.utc(shift["End"]).toDate();
+                        });
+                        return [2 /*return*/, {
+                                ok: true,
+                                data: data
+                            }];
+                    }
+                    else {
+                        return [2 /*return*/, {
+                                ok: false,
+                                message: resp.message
+                            }];
+                    }
+            }
+        });
+    });
+};
 
-var ContextMenuMESFContext = createContext({
-    show: false,
-    position: { x: 0, y: 0 },
-    options: [],
-    showContextMenu: function () { },
-    registerConfig: function () { },
-    onClickOutside: function () { }
+var useStyles$5 = makeStyles(function (theme) {
+    var _a, _b, _c;
+    return ({
+        container: {
+            display: "flex",
+            alignItems: "center",
+            width: "100%",
+            margin: 0,
+            padding: "8px 0",
+            gap: "8px",
+            flexWrap: "wrap"
+        },
+        gridItem: (_a = {
+                display: "flex",
+                alignItems: "center"
+            },
+            _a[theme.breakpoints.down("sm")] = {
+                width: "100%"
+            },
+            _a),
+        datePickerWrapper: (_b = {
+                flex: 1,
+                minWidth: "280px"
+            },
+            _b[theme.breakpoints.down("sm")] = {
+                minWidth: "100%"
+            },
+            _b),
+        selectWrapper: (_c = {
+                width: "120px"
+            },
+            _c[theme.breakpoints.down("sm")] = {
+                width: "100%"
+            },
+            _c)
+    });
 });
-var ContextMenuMESFProvider = function (_a) {
-    var children = _a.children;
-    var _b = useState(false), show = _b[0], setShow = _b[1];
-    var _c = useState({ x: 0, y: 0 }), position = _c[0], setPosition = _c[1];
-    var _d = useState([]), options = _d[0], setOptions = _d[1];
-    var _e = useState({}), configs = _e[0], setConfigs = _e[1];
-    var currentDataRef = useRef(null);
-    var currentConfigIdRef = useRef(null);
-    var registerConfig = function (config) {
-        setConfigs(function (prev) {
-            var _a;
-            return (__assign(__assign({}, prev), (_a = {}, _a[config.id] = config, _a)));
+var moment = getMomentTz();
+var ShiftPeriodNavigatorControl = function (_a) {
+    var value = _a.value, onChange = _a.onChange;
+    var classes = useStyles$5();
+    var _b = useState("Shift"), period = _b[0], setPeriod = _b[1];
+    var _c = useState(false), loadingShiftPeriodList = _c[0], setLoadingShiftPeriodList = _c[1];
+    var _d = useState(""); _d[0]; var setError = _d[1];
+    var _e = useState([]), shiftPeriodList = _e[0], setShiftPeriodList = _e[1];
+    var _f = useState(false), isActionInProgress = _f[0], setIsActionInProgress = _f[1];
+    var handleArrowNavigation = function (direction) { return __awaiter(void 0, void 0, void 0, function () {
+        var error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(startShift === null || startShift === void 0 ? void 0 : startShift.Start) && !(endShift === null || endShift === void 0 ? void 0 : endShift.End))
+                        return [2 /*return*/];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 6, , 7]);
+                    if (!(direction === "prev" && (startShift === null || startShift === void 0 ? void 0 : startShift.Start))) return [3 /*break*/, 3];
+                    return [4 /*yield*/, searchShiftsRangeByParameters(period, moment(startShift.Start).toDate(), null, false, "prev")];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 5];
+                case 3:
+                    if (!(direction === "next" && (endShift === null || endShift === void 0 ? void 0 : endShift.End))) return [3 /*break*/, 5];
+                    return [4 /*yield*/, searchShiftsRangeByParameters(period, null, moment(endShift.End).toDate(), false, "next")];
+                case 4:
+                    _a.sent();
+                    _a.label = 5;
+                case 5: return [3 /*break*/, 7];
+                case 6:
+                    error_1 = _a.sent();
+                    setError(error_1);
+                    return [3 /*break*/, 7];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleLastShift = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, searchShiftsRangeByParameters(period, null, null, false, "last")];
+                case 1:
+                    _a.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    error_2 = _a.sent();
+                    setError(error_2);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    var searchShiftsRangeByParameters = function (newPeriod, newStartDate, newEndDate, useShiftIds, action) {
+        if (useShiftIds === void 0) { useShiftIds = true; }
+        if (action === void 0) { action = null; }
+        return __awaiter(void 0, void 0, void 0, function () {
+            var res, rowsSource, error_3;
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        if (isActionInProgress)
+                            return [2 /*return*/];
+                        setIsActionInProgress(true);
+                        setLoadingShiftPeriodList(true);
+                        _c.label = 1;
+                    case 1:
+                        _c.trys.push([1, 3, 4, 5]);
+                        return [4 /*yield*/, getShiftsRangeByParameters(newPeriod, newStartDate, newEndDate, useShiftIds ? ((_a = value === null || value === void 0 ? void 0 : value.StartShiftId) !== null && _a !== void 0 ? _a : null) : null, useShiftIds ? ((_b = value === null || value === void 0 ? void 0 : value.EndShiftId) !== null && _b !== void 0 ? _b : null) : null, action)];
+                    case 2:
+                        res = _c.sent();
+                        if (res.ok) {
+                            rowsSource = get$1(res, "data.tables[0].rows", []);
+                            setShiftPeriodList(rowsSource);
+                            if (rowsSource.length >= 2) {
+                                onChange({
+                                    StartShiftId: rowsSource[0].ShiftId,
+                                    EndShiftId: rowsSource[1].ShiftId
+                                });
+                            }
+                        }
+                        else {
+                            setError(res.message);
+                        }
+                        return [3 /*break*/, 5];
+                    case 3:
+                        error_3 = _c.sent();
+                        setError(error_3);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        setLoadingShiftPeriodList(false);
+                        setIsActionInProgress(false);
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    var handleDateChange = function (value, key) { return __awaiter(void 0, void 0, void 0, function () {
+        var newDate, error_4;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!value || !value.isValid())
+                        return [2 /*return*/];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 6, , 7]);
+                    newDate = value.toDate();
+                    if (!(key === "start")) return [3 /*break*/, 3];
+                    return [4 /*yield*/, searchShiftsRangeByParameters(period, newDate, null, false)];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 5];
+                case 3: return [4 /*yield*/, searchShiftsRangeByParameters(period, null, newDate, false)];
+                case 4:
+                    _a.sent();
+                    _a.label = 5;
+                case 5: return [3 /*break*/, 7];
+                case 6:
+                    error_4 = _a.sent();
+                    setError(error_4);
+                    return [3 /*break*/, 7];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleChangeScope = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var newPeriod;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    newPeriod = e.target.value;
+                    setPeriod(newPeriod);
+                    return [4 /*yield*/, searchShiftsRangeByParameters(newPeriod, null, (endShift === null || endShift === void 0 ? void 0 : endShift.End) ? moment(endShift.End).toDate() : null, false)];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        if ((value === null || value === void 0 ? void 0 : value.StartShiftId) || (value === null || value === void 0 ? void 0 : value.EndShiftId)) {
+            searchShiftsRangeByParameters(period, null, null, true);
+        }
+    }, [value === null || value === void 0 ? void 0 : value.StartShiftId, value === null || value === void 0 ? void 0 : value.EndShiftId]);
+    useEffect(function () {
+        searchShiftsRangeByParameters(period, null, null, true);
+    }, []);
+    var startShift = shiftPeriodList[0];
+    var endShift = shiftPeriodList[1];
+    return (React__default.createElement("div", { className: classes.container },
+        React__default.createElement("div", { className: classes.gridItem },
+            React__default.createElement(IconButton$1, { size: "small", color: "primary", disabled: loadingShiftPeriodList, onClick: function () { return handleArrowNavigation("prev"); } },
+                React__default.createElement(ChevronLeft, null))),
+        React__default.createElement("div", { className: "".concat(classes.gridItem, " ").concat(classes.datePickerWrapper) },
+            React__default.createElement(DatePicker$1, { label: "Start", format: "MM/DD/YYYY HH:mm a", value: moment((startShift === null || startShift === void 0 ? void 0 : startShift.Start) || moment().subtract(1, "day")), onChange: function (value) {
+                    return handleDateChange(value ? moment(value) : null, "start");
+                }, disabled: loadingShiftPeriodList, slots: {
+                    textField: function (props) { return (React__default.createElement(TextField, __assign({}, props, { size: "small", variant: "outlined", fullWidth: true, style: {
+                            width: "100%"
+                        }, InputProps: __assign(__assign({}, props.InputProps), { style: {
+                                height: "50px",
+                                paddingTop: "2px"
+                            } }) }))); },
+                    openPickerIcon: function () { return (React__default.createElement("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            width: "100%"
+                        } },
+                        React__default.createElement("span", { style: {
+                                paddingRight: 5,
+                                whiteSpace: "nowrap",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                fontSize: 15,
+                                fontWeight: "bold"
+                            } }, startShift === null || startShift === void 0 ? void 0 :
+                            startShift.Shift,
+                            " - ", startShift === null || startShift === void 0 ? void 0 :
+                            startShift.Crew),
+                        React__default.createElement(IconButton$1, { style: { padding: "0px", flexShrink: 0 } },
+                            React__default.createElement(CalendarIcon, null)))); }
+                } })),
+        React__default.createElement("div", { className: "".concat(classes.gridItem, " ").concat(classes.selectWrapper) },
+            React__default.createElement(FormControl, { variant: "outlined", size: "small", fullWidth: true },
+                React__default.createElement(Select, { value: period, onChange: handleChangeScope, disabled: loadingShiftPeriodList, style: {
+                        height: "50px",
+                        width: "100%",
+                        paddingTop: 10
+                    } },
+                    React__default.createElement(MenuItem, { value: "Shift" }, "Shift"),
+                    React__default.createElement(MenuItem, { value: "Day" }, "Day"),
+                    React__default.createElement(MenuItem, { value: "4Days" }, "4 Days"),
+                    React__default.createElement(MenuItem, { value: "Week" }, "Week"),
+                    React__default.createElement(MenuItem, { value: "Month" }, "Month")))),
+        React__default.createElement("div", { className: "".concat(classes.gridItem, " ").concat(classes.datePickerWrapper) },
+            React__default.createElement(DatePicker$1, { label: "End", format: "MM/DD/YYYY HH:mm a", value: moment((endShift === null || endShift === void 0 ? void 0 : endShift.Start) || moment().subtract(1, "day")), onChange: function (value) {
+                    return handleDateChange(value ? moment(value) : null, "end");
+                }, disabled: loadingShiftPeriodList, slots: {
+                    textField: function (props) { return (React__default.createElement(TextField, __assign({}, props, { size: "small", variant: "outlined", fullWidth: true, style: {
+                            width: "100%"
+                        }, InputProps: __assign(__assign({}, props.InputProps), { style: {
+                                height: "50px",
+                                paddingTop: "2px"
+                            } }) }))); },
+                    openPickerIcon: function () { return (React__default.createElement("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            width: "100%"
+                        } },
+                        React__default.createElement("span", { style: {
+                                paddingRight: 5,
+                                whiteSpace: "nowrap",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                fontSize: 15,
+                                fontWeight: "bold"
+                            } }, endShift === null || endShift === void 0 ? void 0 :
+                            endShift.Shift,
+                            " - ", endShift === null || endShift === void 0 ? void 0 :
+                            endShift.Crew),
+                        React__default.createElement(IconButton$1, { style: { padding: "4px", flexShrink: 0 } },
+                            React__default.createElement(CalendarIcon, null)))); }
+                } })),
+        React__default.createElement("div", { className: classes.gridItem },
+            React__default.createElement(IconButton$1, { size: "small", disabled: loadingShiftPeriodList, onClick: function () { return handleArrowNavigation("next"); } },
+                React__default.createElement(ChevronRight, null))),
+        React__default.createElement("div", { className: classes.gridItem },
+            React__default.createElement(IconButton$1, { size: "small", disabled: loadingShiftPeriodList, onClick: handleLastShift },
+                React__default.createElement(SkipNextIcon, null)))));
+};
+
+var useStyles$4 = makeStyles(function (theme) { return ({
+    contextMenu: {
+        backgroundColor: "#fff",
+        borderRadius: "2px",
+        padding: "5px 0",
+        width: "180px",
+        height: "auto",
+        margin: "0",
+        position: "fixed",
+        zIndex: 1,
+        listStyle: "none",
+        boxShadow: "0 0 20px 0 #ccc",
+        "& .MuiMenuItem-root": {
+            fontSize: "14px"
+        },
+        "& .MuiListItemIcon-root": {
+            minWidth: "25px",
+            padding: "0"
+        },
+        "& .MuiSvgIcon-root": {
+            fontSize: "16px"
+        }
+    }
+}); });
+
+var ContextMenuMESFContext = createContext({
+    show: false,
+    position: { x: 0, y: 0 },
+    options: [],
+    showContextMenu: function () { },
+    registerConfig: function () { },
+    onClickOutside: function () { }
+});
+var ContextMenuMESFProvider = function (_a) {
+    var children = _a.children;
+    var _b = useState(false), show = _b[0], setShow = _b[1];
+    var _c = useState({ x: 0, y: 0 }), position = _c[0], setPosition = _c[1];
+    var _d = useState([]), options = _d[0], setOptions = _d[1];
+    var _e = useState({}), configs = _e[0], setConfigs = _e[1];
+    var currentDataRef = useRef(null);
+    var currentConfigIdRef = useRef(null);
+    var registerConfig = function (config) {
+        setConfigs(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[config.id] = config, _a)));
         });
     };
     var showContextMenu = function (e, data, configId) {
@@ -8230,7 +8568,7 @@ var useContextMenuMESF = function () { return useContext(ContextMenuMESFContext)
 
 var ContextMenu$1 = function () {
     var _a = useContextMenuMESF(), show = _a.show, position = _a.position, options = _a.options;
-    var classes = useStyles$1();
+    var classes = useStyles$4();
     var menuRef = useRef(null);
     var _b = useState("0"), x = _b[0], setX = _b[1];
     var _c = useState("0"), y = _c[0], setY = _c[1];
@@ -8959,241 +9297,978 @@ var LoginWithAzureAD = function (_a) {
             React__default.createElement(LoginWithAzureADForm, null))));
 };
 
-function Login(_a) {
-    var authConfig = _a.authConfig;
-    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 handleClose = function () {
-        setOpen(false);
-        params.current["delete"]("message");
-        var newUrl = window.location.origin + "?" + params.current.toString();
-        window.history.replaceState({ path: newUrl }, "", newUrl);
-    };
-    useEffect(function () {
-        if (params.current.has("message")) {
-            setMessage(params.current.get("message"));
-            setOpen(true);
-        }
-    }, [params.toString()]);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("header", null,
-            React__default.createElement(Navbar, { variant: "dark", expand: "lg", className: "mes-primary-color mes-menu-top" },
-                React__default.createElement(Navbar.Brand, { href: "/" }, "MESF"))),
-        React__default.createElement("div", { className: "container-fluid" },
-            React__default.createElement("div", { className: "row" },
-                React__default.createElement("div", { className: "col-10 col-md-6 mx-auto my-5" },
-                    React__default.createElement(Paper, { elevation: 2 },
-                        React__default.createElement("div", { className: "card-header text-center" },
-                            React__default.createElement("b", null, "LOGIN")),
-                        React__default.createElement(Grid, { container: true, justifyContent: "space-between", alignItems: "center" }, !useAzureAD && !guestIsEnabled && !useWindowsAuth ? (React__default.createElement(Grid, { item: true, xs: 12 },
-                            React__default.createElement(Paper, { elevation: 2, style: { padding: 40, margin: "40px 40px 40px 40px" } }, useEmailAndPassword && React__default.createElement(LoginWithEmailAndPassword, null)))) : (React__default.createElement(React__default.Fragment, null,
-                            React__default.createElement(Grid, { item: true, md: 5, xs: 5 },
-                                React__default.createElement(Paper, { elevation: 2, style: { padding: 40, margin: "40px -40px 40px 40px" } }, useEmailAndPassword && React__default.createElement(LoginWithEmailAndPassword, null))),
-                            React__default.createElement(Grid, { item: true, md: 1, xs: 1, style: { maxWidth: "20px" } },
-                                React__default.createElement("span", { className: "text-muted font-weight-bold" }, "OR")),
-                            React__default.createElement(Grid, { item: true, md: 5, xs: 5, style: { marginBottom: "auto" } },
-                                React__default.createElement(Paper, { elevation: 2, style: {
-                                        padding: 40,
-                                        margin: "40px 40px 40px -40px",
-                                        minHeight: 248,
-                                        display: "flex",
-                                        flexDirection: "column",
-                                        justifyContent: "space-evenly"
-                                    } },
-                                    React__default.createElement(React__default.Fragment, null,
-                                        React__default.createElement(LoginWithWindowsAuthentication, null),
-                                        useAzureAD && (React__default.createElement(LoginWithAzureAD, { config: authConfig.AzureConfig })),
-                                        guestIsEnabled && React__default.createElement(LoginAsGuest, null))))))))))),
-        React__default.createElement(Snackbar, { open: open, autoHideDuration: 6000, onClose: handleClose, message: message })));
-}
-
-function Logout() {
-    var clearUserData = useContext(AuthContext).clearUserData;
-    var navigate = useNavigate();
-    var _a = useSearchParams(), params = _a[0]; _a[1];
-    var logout = function () {
-        clearUserData();
-        navigate("/?".concat(params.toString()));
+function Login(_a) {
+    var authConfig = _a.authConfig;
+    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 handleClose = function () {
+        setOpen(false);
+        params.current["delete"]("message");
+        var newUrl = window.location.origin + "?" + params.current.toString();
+        window.history.replaceState({ path: newUrl }, "", newUrl);
+    };
+    useEffect(function () {
+        if (params.current.has("message")) {
+            setMessage(params.current.get("message"));
+            setOpen(true);
+        }
+    }, [params.toString()]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("header", null,
+            React__default.createElement(Navbar, { variant: "dark", expand: "lg", className: "mes-primary-color mes-menu-top" },
+                React__default.createElement(Navbar.Brand, { href: "/" }, "MESF"))),
+        React__default.createElement("div", { className: "container-fluid" },
+            React__default.createElement("div", { className: "row" },
+                React__default.createElement("div", { className: "col-10 col-md-6 mx-auto my-5" },
+                    React__default.createElement(Paper, { elevation: 2 },
+                        React__default.createElement("div", { className: "card-header text-center" },
+                            React__default.createElement("b", null, "LOGIN")),
+                        React__default.createElement(Grid, { container: true, justifyContent: "space-between", alignItems: "center" }, !useAzureAD && !guestIsEnabled && !useWindowsAuth ? (React__default.createElement(Grid, { item: true, xs: 12 },
+                            React__default.createElement(Paper, { elevation: 2, style: { padding: 40, margin: "40px 40px 40px 40px" } }, useEmailAndPassword && React__default.createElement(LoginWithEmailAndPassword, null)))) : (React__default.createElement(React__default.Fragment, null,
+                            React__default.createElement(Grid, { item: true, md: 5, xs: 5 },
+                                React__default.createElement(Paper, { elevation: 2, style: { padding: 40, margin: "40px -40px 40px 40px" } }, useEmailAndPassword && React__default.createElement(LoginWithEmailAndPassword, null))),
+                            React__default.createElement(Grid, { item: true, md: 1, xs: 1, style: { maxWidth: "20px" } },
+                                React__default.createElement("span", { className: "text-muted font-weight-bold" }, "OR")),
+                            React__default.createElement(Grid, { item: true, md: 5, xs: 5, style: { marginBottom: "auto" } },
+                                React__default.createElement(Paper, { elevation: 2, style: {
+                                        padding: 40,
+                                        margin: "40px 40px 40px -40px",
+                                        minHeight: 248,
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        justifyContent: "space-evenly"
+                                    } },
+                                    React__default.createElement(React__default.Fragment, null,
+                                        React__default.createElement(LoginWithWindowsAuthentication, null),
+                                        useAzureAD && (React__default.createElement(LoginWithAzureAD, { config: authConfig.AzureConfig })),
+                                        guestIsEnabled && React__default.createElement(LoginAsGuest, null))))))))))),
+        React__default.createElement(Snackbar, { open: open, autoHideDuration: 6000, onClose: handleClose, message: message })));
+}
+
+function Logout() {
+    var clearUserData = useContext(AuthContext).clearUserData;
+    var navigate = useNavigate();
+    var _a = useSearchParams(), params = _a[0]; _a[1];
+    var logout = function () {
+        clearUserData();
+        navigate("/?".concat(params.toString()));
+    };
+    useEffect(function () {
+        logout();
+    }, []);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", null, "logging out!!!")));
+}
+
+var RouterContext = createContext(function () { return React__default.createElement(React__default.Fragment, null); });
+var ConfigurationContext = createContext([
+    [],
+    function () { return React__default.createElement(React__default.Fragment, null); },
+]);
+var NavbarContext = createContext(function () { return React__default.createElement(React__default.Fragment, null); });
+
+var useSearchAssets = function (setError) {
+    var _a = useAssetContext().actions, setAllAssets = _a.setAllAssets, setAreasList = _a.setAreasList;
+    var searchAssets = function () {
+        getAssets().then(function (res) { return __awaiter(void 0, void 0, void 0, function () {
+            var rows, areas;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!res.ok) return [3 /*break*/, 2];
+                        rows = get$1(res, "data.tables[0].rows", []);
+                        return [4 /*yield*/, rows.filter(function (asset) { return asset.CanBeDefaultAsset; })];
+                    case 1:
+                        areas = _a.sent();
+                        setAllAssets(rows);
+                        setAreasList(areas);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        setError(res.message);
+                        _a.label = 3;
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); });
+    };
+    return { searchAssets: searchAssets };
+};
+
+var UTLSettingsInitialState = {
+    serverTimeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    settings: {}
+};
+var UTLSettingsReducer = createSlice({
+    name: "__",
+    initialState: UTLSettingsInitialState,
+    reducers: {
+        setServerTimeZone: function (state, _a) {
+            var payload = _a.payload;
+            state.serverTimeZone = payload;
+        },
+        setSetting: function (state, _a) {
+            var payload = _a.payload;
+            state.settings[payload.key] = payload.value;
+        },
+        initSettings: function (state, _a) {
+            var payload = _a.payload;
+            state.settings = payload.reduce(function (acc, cur) {
+                if (cur.SettingName.trim() === "TimeZone") {
+                    var timeService = TimeService.getInstance();
+                    timeService.setTimeZone(cur.Value);
+                }
+                acc[cur.SettingName.trim()] = cur.Value;
+                return acc;
+            }, {});
+        }
+    }
+});
+
+var UTLSettingsContext = createContext({
+    state: UTLSettingsReducer.getInitialState(),
+    actions: UTLSettingsReducer.actions
+});
+var useUTLSettingsContext = function () { return useContext(UTLSettingsContext); };
+var UTLSettingsProvider = function (_a) {
+    var children = _a.children;
+    var _b = useComplexState({
+        initialState: UTLSettingsReducer.getInitialState(),
+        reducers: UTLSettingsReducer.caseReducers
+    }), state = _b[0], actions = _b[1];
+    return (React__default.createElement(UTLSettingsContext.Provider, { value: { state: state, actions: actions } }, children));
+};
+
+var useSearchUTLSettings = function (_a) {
+    var onError = _a.onError;
+    var initSettings = useUTLSettingsContext().actions.initSettings;
+    var searchUTLSettings = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var res, settings;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, getUTLSettings()];
+                case 1:
+                    res = _a.sent();
+                    if (res.ok) {
+                        settings = get$1(res, "data.tables[0].rows", []);
+                        initSettings(settings);
+                    }
+                    else {
+                        onError(res.message);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return { searchUTLSettings: searchUTLSettings };
+};
+
+var AreaSelector$1 = lazy(function () {
+    return Promise.resolve().then(function () { return areaSelector; }).then(function (mod) { return ({
+        "default": mod.AreaSelector
+    }); });
+});
+function Header$1(_a) {
+    var _b = _a.showAreaSelector, showAreaSelector = _b === void 0 ? false : _b, _c = _a.showTrendingsIcon, showTrendingsIcon = _c === void 0 ? true : _c, _d = _a.navbarTitle, navbarTitle = _d === void 0 ? "MESF" : _d;
+    var getUserName = useToken().getUserName;
+    var _e = useState(""), error = _e[0], setError = _e[1];
+    var _f = useState(new Date()), date = _f[0], setDate = _f[1];
+    var CustomNavbar = useContext(NavbarContext);
+    var userName = useState(getUserName())[0];
+    var searchAssets = useSearchAssets(setError).searchAssets;
+    var _g = useState(false), settingsIsReady = _g[0], setSettingsIsReady = _g[1];
+    var searchUTLSettings = useSearchUTLSettings({
+        onError: setError
+    }).searchUTLSettings;
+    var userLogged = useUserContext().state.userLogged;
+    var tick = function () {
+        setDate(new Date());
+    };
+    useEffect(function () {
+        var timerID = setTimeout(function () {
+            tick();
+        }, 1000);
+        return function () {
+            clearTimeout(timerID);
+        };
+    });
+    useEffect(function () {
+        searchUTLSettings().then(function () {
+            setSettingsIsReady(true);
+        });
+    }, []);
+    useEffect(function () {
+        if (showAreaSelector && userLogged && settingsIsReady) {
+            searchAssets();
+        }
+    }, [userLogged, settingsIsReady]);
+    return (React__default.createElement(Navbar, { variant: "dark", expand: "lg", className: "mes-primary-color mes-menu-top" },
+        React__default.createElement(Container, { fluid: true },
+            React__default.createElement(Navbar.Brand, { as: Link, to: "/home" }, navbarTitle),
+            React__default.createElement(Navbar.Toggle, { "aria-controls": "basic-navbar-nav" }),
+            React__default.createElement(Navbar.Collapse, { id: "basic-navbar-nav" },
+                React__default.createElement(Nav, { className: "me-auto" },
+                    React__default.createElement(CustomNavbar, null)),
+                React__default.createElement(Nav, { className: "ml-auto", style: { alignItems: "baseline" } },
+                    showTrendingsIcon ? (React__default.createElement(Nav, { className: "mx-2" },
+                        React__default.createElement(Nav.Link, { as: Link, to: "/trendings" },
+                            React__default.createElement(Tooltip, { title: "Trendings", placement: "top", arrow: true, interactive: true, enterDelay: 1500 },
+                                React__default.createElement(ShowChartIcon, null))))) : null,
+                    React__default.createElement(Nav, null,
+                        React__default.createElement("span", { className: "navbar-text" }, dxtToLocalServerTime(date, "HH:mm:ss z"))),
+                    React__default.createElement(Nav, { className: "mx-2" },
+                        React__default.createElement(Nav.Link, { as: Link, to: "/configuration" },
+                            React__default.createElement(SettingsIcon, null))),
+                    showAreaSelector ? (React__default.createElement(Suspense, { fallback: "..." },
+                        React__default.createElement(AreaSelector$1, null))) : null,
+                    React__default.createElement(NavDropdown, { id: "user-menu", title: React__default.createElement(React__default.Fragment, null,
+                            React__default.createElement("i", { className: "fas fa-user", style: { marginRight: 6 } }),
+                            userName), className: "mx-2" },
+                        React__default.createElement(NavDropdown.Item, { href: "account" }, "Account"),
+                        React__default.createElement(NavDropdown.Item, { href: "logout" }, "Logout"))))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
+}
+
+var SettingsInitialState = {
+    settings: [],
+    settingSelected: null
+};
+var SettingsReducer = createSlice({
+    name: "__",
+    initialState: SettingsInitialState,
+    reducers: {
+        setSettings: function (state, _a) {
+            var payload = _a.payload;
+            state.settings = payload;
+        },
+        setSettingSelected: function (state, _a) {
+            var payload = _a.payload;
+            state.settingSelected = payload;
+        }
+    }
+});
+
+var SettingsContext = createContext({
+    state: SettingsReducer.getInitialState(),
+    actions: SettingsReducer.actions
+});
+var useSettingsContext = function () { return useContext(SettingsContext); };
+var SettingsProvider = function (_a) {
+    var children = _a.children;
+    var _b = useComplexState({
+        initialState: SettingsReducer.getInitialState(),
+        reducers: SettingsReducer.caseReducers
+    }), state = _b[0], actions = _b[1];
+    return (React__default.createElement(SettingsContext.Provider, { value: { state: state, actions: actions } }, children));
+};
+
+var useStyles$3 = makeStyles(function (theme) { return ({
+    root: {
+        "& .ag-icon-menu": {
+            display: "none"
+        },
+        "& .ag-header-cell-label": {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "2vh"
+        },
+        "& .ag-header-cell-text": {
+            textAlign: "center !important"
+        },
+        "& .ag-checkbox-input-wrapper": {
+            margin: "0 10px"
+        },
+        "& .ag-cell": {
+            alignItems: "center",
+            padding: "0 !important",
+            border: "unset !important"
+        },
+        "& .ag-header-cell": {
+            padding: "0px !important",
+            textAlign: "center !important",
+            fontSize: 10,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+        },
+        "& .ag-cell-wrapper": {
+            textAlign: "center"
+        },
+        "& .ag-menu-option": {
+            cursor: "pointer"
+        }
+    },
+    relative: {
+        position: "relative"
+    },
+    textfield: {
+        margin: theme.spacing(2)
+    },
+    btnModal: {
+        display: "flex",
+        justifyContent: "flex-end"
+    }
+}); });
+
+var useSettingsOptionsFunctions = function (_a) {
+    var setSettingId = _a.setSettingId, setShowDeleteModal = _a.setShowDeleteModal, setShowCreateModal = _a.setShowCreateModal, setShowEditModal = _a.setShowEditModal;
+    var getMenuOptions = function (data) {
+        var options = [];
+        if (!data) {
+            options = options.concat([
+                {
+                    name: "New Setting",
+                    key: "new_setting",
+                    onClick: function () {
+                        setShowCreateModal(true);
+                    },
+                    icon: React__default.createElement(PlaylistAddIcon, null)
+                },
+            ]);
+        }
+        else {
+            options = options.concat([
+                {
+                    name: "New Setting",
+                    key: "new_setting",
+                    onClick: function () {
+                        setShowCreateModal(true);
+                    },
+                    icon: React__default.createElement(PlaylistAddIcon, null)
+                },
+                {
+                    name: "Edit Setting",
+                    key: "edit_setting",
+                    onClick: function () {
+                        setSettingId(data);
+                        setShowEditModal(true);
+                    },
+                    icon: React__default.createElement(EditIcon, null)
+                },
+                {
+                    name: "Delete Setting",
+                    key: "delete_setting",
+                    onClick: function () {
+                        setSettingId(data);
+                        setShowDeleteModal(true);
+                    },
+                    icon: React__default.createElement(DeleteIcon, null)
+                },
+            ]);
+        }
+        return options;
+    };
+    return {
+        getMenuOptions: getMenuOptions
+    };
+};
+
+var useStyles$2 = makeStyles(function (theme) { return ({
+    root: {
+        opacity: 0,
+        transition: "opacity 0.1s ease-in-out",
+        ".ag-row-hover &": {
+            opacity: 1
+        },
+        ".ag-row-focus &": {
+            opacity: 1
+        },
+        ".ag-row-selected &": {
+            opacity: 1
+        }
+    }
+}); });
+var useTableData = function (_a) {
+    var setOpenModalEditSetting = _a.setOpenModalEditSetting, setOpenModalDeleteSetting = _a.setOpenModalDeleteSetting, showContextMenu = _a.showContextMenu;
+    var _b = useSettingsContext(); _b.state; var actions = _b.actions;
+    var classes = useStyles$2();
+    var columnDefs = [
+        {
+            field: "SettingName",
+            headerName: "Name",
+            minWidth: 180,
+            flex: 4,
+            cellStyle: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+            }
+        },
+        {
+            field: "Value",
+            headerName: "Value",
+            minWidth: 180,
+            flex: 2,
+            cellStyle: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+            }
+        },
+        {
+            field: "Description",
+            headerName: "Description",
+            minWidth: 150,
+            flex: 4,
+            cellStyle: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+            }
+        },
+        {
+            cellRenderer: function (params) {
+                return (React__default.createElement(Grid, { container: true, style: {
+                        height: "100%",
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center"
+                    }, className: classes.root },
+                    React__default.createElement(Grid, { item: true, xs: 12, md: 12, style: {
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center"
+                        } },
+                        React__default.createElement(Button, { style: {}, onClick: function () {
+                                (function () { return __awaiter(void 0, void 0, void 0, function () {
+                                    return __generator(this, function (_a) {
+                                        actions.setSettingSelected(params === null || params === void 0 ? void 0 : params.data);
+                                        setOpenModalEditSetting(true);
+                                        return [2 /*return*/];
+                                    });
+                                }); })();
+                            } },
+                            React__default.createElement(EditIcon, { color: "primary" })),
+                        React__default.createElement(Button, { style: {}, onClick: function () {
+                                (function () { return __awaiter(void 0, void 0, void 0, function () {
+                                    return __generator(this, function (_a) {
+                                        actions.setSettingSelected(params === null || params === void 0 ? void 0 : params.data);
+                                        setOpenModalDeleteSetting(true);
+                                        return [2 /*return*/];
+                                    });
+                                }); })();
+                            } },
+                            React__default.createElement(DeleteIcon, { color: "secondary" })),
+                        React__default.createElement(Button, { style: {}, onClick: function (e) {
+                                return showContextMenu(e, params.data, "TableSettings");
+                            } },
+                            React__default.createElement(FormatListBulletedSharpIcon, { color: "action" })))));
+            },
+            field: "",
+            flex: 1,
+            minWidth: 240,
+            editable: false,
+            autoHeight: false,
+            suppressNavigable: true
+        },
+    ];
+    var defaultColDef = useMemo(function () {
+        return {
+            sortable: true,
+            wrapText: true,
+            autoHeight: true,
+            wrapHeaderText: true
+        };
+    }, []);
+    return { columnDefs: columnDefs, defaultColDef: defaultColDef };
+};
+
+var INITIAL_VALUES = {
+    SettingId: null,
+    SettingName: "",
+    Value: "",
+    Description: ""
+};
+
+var upsertSettings = function (_a) {
+    var SettingId = _a.SettingId, Description = _a.Description, SettingName = _a.SettingName, Value = _a.Value;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var apiService, parameters, resp;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    apiService = new MESApiService();
+                    parameters = [];
+                    parameters.push({ name: "SettingId", value: SettingId });
+                    parameters.push({ name: "SettingName", value: SettingName });
+                    parameters.push({ name: "Description", value: Description });
+                    parameters.push({ name: "Value", value: Value });
+                    return [4 /*yield*/, apiService.callV2("[UTL].[SetSetting]", parameters)];
+                case 1:
+                    resp = _b.sent();
+                    return [2 /*return*/, resp];
+            }
+        });
+    });
+};
+var deleteSetting = function (SettingId) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "SettingId", value: SettingId });
+                return [4 /*yield*/, apiService.callV2("[UTL].[DeleteSetting]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+
+var useStyles$1 = makeStyles(function (theme) { return ({
+    title: {
+        fontSize: 15
+    },
+    modalTitle: {
+        fontSize: 15,
+        marginTop: theme.spacing(1)
+    },
+    chip: {
+        margin: 2
+    },
+    errorLabel: {
+        fontSize: 12,
+        color: "#F44336"
+    },
+    infoLabel: {
+        fontSize: 12,
+        color: "#757575"
+    }
+}); });
+var CreateSetting = function (_a) {
+    var show = _a.show, onHide = _a.onHide;
+    var _b = useState(false), open = _b[0], setOpen = _b[1];
+    var _c = useState(false), isSubmitLoading = _c[0], setIsSubmitLoading = _c[1];
+    var _d = useState(""), error = _d[0], setError = _d[1];
+    useStyles$1();
+    var settingSelected = useSettingsContext().state.settingSelected;
+    var _e = useForm({
+        defaultValues: settingSelected ? settingSelected : INITIAL_VALUES
+    }), control = _e.control, handleSubmit = _e.handleSubmit, reset = _e.reset; _e.watch; _e.setValue; _e.formState.errors;
+    // Progress bar
+    var onSubmit = function (data) { return __awaiter(void 0, void 0, void 0, function () {
+        var settingsResp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsSubmitLoading(true);
+                    return [4 /*yield*/, upsertSettings(data)];
+                case 1:
+                    settingsResp = _a.sent();
+                    if (settingsResp.ok) {
+                        setIsSubmitLoading(false);
+                        setOpen(true);
+                        onHide(true);
+                    }
+                    else {
+                        setIsSubmitLoading(false);
+                        setError(settingsResp.message);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleClose = function (event, reason) {
+        if (reason === "clickaway") {
+            return;
+        }
+        setOpen(false);
+    };
+    useEffect(function () {
+        if (show) {
+            reset();
+        }
+    }, [show]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Grid, { container: true },
+            React.createElement(Grid, { item: true },
+                React.createElement(MesfModal, { title: "NEW SETTING/CREW", open: show, handleClose: function () { return onHide(false); }, id: "create-setting-modal", maxWidth: "md" },
+                    React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
+                        React.createElement(MesfModal.Content, { style: { padding: "15px 30px 0" } },
+                            React.createElement(Grid, { container: true, spacing: 2 },
+                                React.createElement(Grid, { item: true, xs: 12, md: 6 },
+                                    React.createElement(Controller, { name: "SettingName", control: control, rules: { required: "Name is required" }, render: function (_a) {
+                                            var field = _a.field, error = _a.fieldState.error;
+                                            return (React.createElement(TextField, __assign({}, field, { label: "Name", variant: "outlined", error: !!error, helperText: error ? error.message : null, fullWidth: true, margin: "dense", autoComplete: "off" })));
+                                        } })),
+                                React.createElement(Grid, { item: true, xs: 12, md: 6 },
+                                    React.createElement(Controller, { name: "Value", control: control, rules: {
+                                            required: "Value is required",
+                                            pattern: {
+                                                value: /^[A-Za-z0-9]+$/,
+                                                message: "Only letters and numbers are allowed"
+                                            }
+                                        }, render: function (_a) {
+                                            var field = _a.field, error = _a.fieldState.error;
+                                            return (React.createElement(TextField, __assign({}, field, { label: "Value", variant: "outlined", error: !!error, helperText: error ? error.message : null, fullWidth: true, margin: "dense", autoComplete: "off" })));
+                                        } })),
+                                React.createElement(Grid, { item: true, md: 12, xs: 12, style: { margin: "12px 0 20px", padding: "0 8px" } },
+                                    React.createElement(Controller, { name: "Description", control: control, render: function (_a) {
+                                            var _b = _a.field, value = _b.value, onChange = _b.onChange;
+                                            return (React.createElement(TextField, { style: { margin: "8px 0" }, size: "medium", maxRows: 5, label: "Description", multiline: true, variant: "outlined", fullWidth: true, autoComplete: "off", value: value, onChange: function (evt) {
+                                                    if (evt.target.value.length <= 200)
+                                                        onChange(evt);
+                                                } }));
+                                        } })))),
+                        React.createElement(MesfModal.Actions, { style: { padding: "20px 30px 30px" } },
+                            React.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
+                                React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                                    React.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Cancel")),
+                                React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                                    React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))))),
+        React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); }, title: "Error Creating Setting" }),
+        React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
+            React.createElement(Alert, { severity: "success", onClose: handleClose }, "The setting was created successfully"))));
+};
+
+makeStyles(function (theme) { return ({
+    title: {
+        fontSize: 15
+    },
+    modalTitle: {
+        fontSize: 15,
+        marginTop: theme.spacing(1)
+    },
+    chip: {
+        margin: 2
+    },
+    errorLabel: {
+        fontSize: 12,
+        color: "#F44336"
+    },
+    infoLabel: {
+        fontSize: 12,
+        color: "#757575"
+    }
+}); });
+var DeleteSetting = function (_a) {
+    var show = _a.show, onHide = _a.onHide;
+    var _b = useState(false), open = _b[0], setOpen = _b[1];
+    var _c = useState(false), isSubmitLoading = _c[0], setIsSubmitLoading = _c[1];
+    var _d = useState(""), error = _d[0], setError = _d[1];
+    var settingSelected = useSettingsContext().state.settingSelected;
+    var _e = useForm({
+        defaultValues: settingSelected ? settingSelected : INITIAL_VALUES
+    }), control = _e.control, handleSubmit = _e.handleSubmit, reset = _e.reset, setValue = _e.setValue;
+    var onSubmit = function (data) { return __awaiter(void 0, void 0, void 0, function () {
+        var settingsResp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsSubmitLoading(true);
+                    return [4 /*yield*/, deleteSetting(data.SettingId)];
+                case 1:
+                    settingsResp = _a.sent();
+                    if (settingsResp.ok) {
+                        setIsSubmitLoading(false);
+                        setOpen(true);
+                        onHide(true);
+                    }
+                    else {
+                        setIsSubmitLoading(false);
+                        setError(settingsResp.message);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleClose = function (event, reason) {
+        if (reason === "clickaway") {
+            return;
+        }
+        setOpen(false);
+    };
+    useEffect(function () {
+        if (show) {
+            reset();
+            if (settingSelected) {
+                setValue("SettingId", settingSelected.SettingId);
+                setValue("SettingName", settingSelected.SettingName);
+                setValue("Value", settingSelected.Value);
+                setValue("Description", settingSelected.Description);
+            }
+        }
+    }, [show]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Grid, { container: true },
+            React.createElement(Grid, { item: true },
+                React.createElement(MesfModal, { title: "DELETE SETTING/CREW", open: show, handleClose: function () { return onHide(false); }, id: "delete-setting-modal", maxWidth: "md" },
+                    React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
+                        React.createElement(MesfModal.Content, { style: { padding: "15px 30px 0" } },
+                            React.createElement(Grid, { container: true, spacing: 2 },
+                                React.createElement(Grid, { item: true, xs: 12, md: 6 },
+                                    React.createElement(Controller, { name: "SettingName", control: control, rules: { required: "Name is required" }, render: function (_a) {
+                                            var field = _a.field, error = _a.fieldState.error;
+                                            return (React.createElement(TextField, __assign({ disabled: true }, field, { label: "Name", variant: "outlined", error: !!error, helperText: error ? error.message : null, fullWidth: true, margin: "dense", autoComplete: "off" })));
+                                        } })),
+                                React.createElement(Grid, { item: true, xs: 12, md: 6 },
+                                    React.createElement(Controller, { name: "Value", control: control, rules: { required: "Value is required" }, render: function (_a) {
+                                            var field = _a.field, error = _a.fieldState.error;
+                                            return (React.createElement(TextField, __assign({ disabled: true }, field, { label: "Value", variant: "outlined", error: !!error, helperText: error ? error.message : null, fullWidth: true, margin: "dense", autoComplete: "off" })));
+                                        } })),
+                                React.createElement(Grid, { item: true, md: 12, xs: 12, style: { margin: "12px 0 20px", padding: "0 8px" } },
+                                    React.createElement(Controller, { name: "Description", control: control, render: function (_a) {
+                                            var _b = _a.field, value = _b.value, onChange = _b.onChange;
+                                            return (React.createElement(TextField, { disabled: true, style: { margin: "8px 0" }, size: "medium", maxRows: 5, label: "Description", multiline: true, variant: "outlined", fullWidth: true, autoComplete: "off", value: value, onChange: function (evt) {
+                                                    if (evt.target.value.length <= 200)
+                                                        onChange(evt);
+                                                } }));
+                                        } })))),
+                        React.createElement(MesfModal.Actions, { style: { padding: "20px 30px 30px" } },
+                            React.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
+                                React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                                    React.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Cancel")),
+                                React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                                    React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "secondary", type: "submit" }, "Delete")))))))),
+        React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); }, title: "Error deleting Setting" }),
+        React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
+            React.createElement(Alert, { severity: "success", onClose: handleClose }, "The setting was deleted successfully"))));
+};
+
+makeStyles(function (theme) { return ({
+    title: {
+        fontSize: 15
+    },
+    modalTitle: {
+        fontSize: 15,
+        marginTop: theme.spacing(1)
+    },
+    chip: {
+        margin: 2
+    },
+    errorLabel: {
+        fontSize: 12,
+        color: "#F44336"
+    },
+    infoLabel: {
+        fontSize: 12,
+        color: "#757575"
+    }
+}); });
+var EditSetting = function (_a) {
+    var show = _a.show, onHide = _a.onHide;
+    var _b = useState(false), open = _b[0], setOpen = _b[1];
+    var _c = useState(false), isSubmitLoading = _c[0], setIsSubmitLoading = _c[1];
+    var _d = useState(""), error = _d[0], setError = _d[1];
+    var settingSelected = useSettingsContext().state.settingSelected;
+    var _e = useForm({
+        defaultValues: settingSelected ? settingSelected : INITIAL_VALUES
+    }), control = _e.control, handleSubmit = _e.handleSubmit, reset = _e.reset, setValue = _e.setValue;
+    var onSubmit = function (data) { return __awaiter(void 0, void 0, void 0, function () {
+        var settingsResp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsSubmitLoading(true);
+                    return [4 /*yield*/, upsertSettings(data)];
+                case 1:
+                    settingsResp = _a.sent();
+                    if (settingsResp.ok) {
+                        setIsSubmitLoading(false);
+                        setOpen(true);
+                        onHide(true);
+                    }
+                    else {
+                        setIsSubmitLoading(false);
+                        setError(settingsResp.message);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleClose = function (event, reason) {
+        if (reason === "clickaway") {
+            return;
+        }
+        setOpen(false);
+    };
+    useEffect(function () {
+        if (show) {
+            reset();
+            if (settingSelected) {
+                setValue("SettingId", settingSelected.SettingId);
+                setValue("SettingName", settingSelected.SettingName);
+                setValue("Value", settingSelected.Value);
+                setValue("Description", settingSelected.Description);
+            }
+        }
+    }, [show]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Grid, { container: true },
+            React.createElement(Grid, { item: true },
+                React.createElement(MesfModal, { title: "EDIT SETTING/CREW", open: show, handleClose: function () { return onHide(false); }, id: "edit-setting-modal", maxWidth: "md" },
+                    React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
+                        React.createElement(MesfModal.Content, { style: { padding: "15px 30px 0" } },
+                            React.createElement(Grid, { container: true, spacing: 2 },
+                                React.createElement(Grid, { item: true, xs: 12, md: 6 },
+                                    React.createElement(Controller, { name: "SettingName", control: control, rules: { required: "Name is required" }, render: function (_a) {
+                                            var field = _a.field, error = _a.fieldState.error;
+                                            return (React.createElement(TextField, __assign({}, field, { label: "Name", variant: "outlined", error: !!error, helperText: error ? error.message : null, fullWidth: true, margin: "dense", autoComplete: "off" })));
+                                        } })),
+                                React.createElement(Grid, { item: true, xs: 12, md: 6 },
+                                    React.createElement(Controller, { name: "Value", control: control, rules: {
+                                            required: "Value is required",
+                                            pattern: {
+                                                value: /^[A-Za-z0-9]+$/,
+                                                message: "Only letters and numbers are allowed"
+                                            }
+                                        }, render: function (_a) {
+                                            var field = _a.field, error = _a.fieldState.error;
+                                            return (React.createElement(TextField, __assign({}, field, { label: "Value", variant: "outlined", error: !!error, helperText: error ? error.message : null, fullWidth: true, margin: "dense", autoComplete: "off" })));
+                                        } })),
+                                React.createElement(Grid, { item: true, md: 12, xs: 12, style: { margin: "12px 0 20px", padding: "0 8px" } },
+                                    React.createElement(Controller, { name: "Description", control: control, render: function (_a) {
+                                            var _b = _a.field, value = _b.value, onChange = _b.onChange;
+                                            return (React.createElement(TextField, { style: { margin: "8px 0" }, size: "medium", maxRows: 5, label: "Description", multiline: true, variant: "outlined", fullWidth: true, autoComplete: "off", value: value, onChange: function (evt) {
+                                                    if (evt.target.value.length <= 200)
+                                                        onChange(evt);
+                                                } }));
+                                        } })))),
+                        React.createElement(MesfModal.Actions, { style: { padding: "20px 30px 30px" } },
+                            React.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
+                                React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                                    React.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Cancel")),
+                                React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                                    React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))))),
+        React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); }, title: "Error updating Setting" }),
+        React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
+            React.createElement(Alert, { severity: "success", onClose: handleClose }, "The setting was edited successfully"))));
+};
+
+var TableSettings = function (_a) {
+    var getSettingsFromAPI = _a.getSettingsFromAPI; _a.isLoading; var rows = _a.rows;
+    var _b = useContextMenuMESF(), showContextMenu = _b.showContextMenu, registerConfig = _b.registerConfig;
+    var _c = useSettingsContext(); _c.state; var actions = _c.actions;
+    var classes = useStyles$3();
+    var _d = useState(false), openModalNew = _d[0], setOpenModalNew = _d[1];
+    var _e = useState(false), openModalEditSetting = _e[0], setOpenModalEditSetting = _e[1];
+    var _f = useState(false), openModalDeleteSetting = _f[0], setOpenModalDeleteSetting = _f[1];
+    var getMenuOptions = useSettingsOptionsFunctions({
+        setSettingId: actions.setSettingSelected,
+        setShowDeleteModal: setOpenModalDeleteSetting,
+        setShowCreateModal: setOpenModalNew,
+        setShowEditModal: setOpenModalEditSetting
+    }).getMenuOptions;
+    var _g = useTableData({
+        setOpenModalEditSetting: setOpenModalEditSetting,
+        setOpenModalDeleteSetting: setOpenModalDeleteSetting,
+        showContextMenu: showContextMenu
+    }), columnDefs = _g.columnDefs, defaultColDef = _g.defaultColDef;
+    var loadingOverlayComponent = useMemo(function () {
+        return (React__default.createElement("div", { style: {
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+            } },
+            React__default.createElement(LazyLoading, null)));
+    }, []);
+    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, "TableSettings");
+        return [];
     };
     useEffect(function () {
-        logout();
+        registerConfig({
+            id: "TableSettings",
+            getOptions: getMenuOptions
+        });
     }, []);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", null, "logging out!!!")));
-}
-
-var RouterContext = createContext(function () { return React__default.createElement(React__default.Fragment, null); });
-var ConfigurationContext = createContext([
-    [],
-    function () { return React__default.createElement(React__default.Fragment, null); },
-]);
-var NavbarContext = createContext(function () { return React__default.createElement(React__default.Fragment, null); });
-
-var useSearchAssets = function (setError) {
-    var _a = useAssetContext().actions, setAllAssets = _a.setAllAssets, setAreasList = _a.setAreasList;
-    var searchAssets = function () {
-        getAssets().then(function (res) { return __awaiter(void 0, void 0, void 0, function () {
-            var rows, areas;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!res.ok) return [3 /*break*/, 2];
-                        rows = get$1(res, "data.tables[0].rows", []);
-                        return [4 /*yield*/, rows.filter(function (asset) { return asset.CanBeDefaultAsset; })];
-                    case 1:
-                        areas = _a.sent();
-                        setAllAssets(rows);
-                        setAreasList(areas);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        setError(res.message);
-                        _a.label = 3;
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    return { searchAssets: searchAssets };
-};
-
-var UTLSettingsInitialState = {
-    serverTimeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-    settings: {}
-};
-var UTLSettingsReducer = createSlice({
-    name: "__",
-    initialState: UTLSettingsInitialState,
-    reducers: {
-        setServerTimeZone: function (state, _a) {
-            var payload = _a.payload;
-            state.serverTimeZone = payload;
-        },
-        setSetting: function (state, _a) {
-            var payload = _a.payload;
-            state.settings[payload.key] = payload.value;
-        },
-        initSettings: function (state, _a) {
-            var payload = _a.payload;
-            state.settings = payload.reduce(function (acc, cur) {
-                if (cur.SettingName.trim() === "TimeZone") {
-                    var timeService = TimeService.getInstance();
-                    timeService.setTimeZone(cur.Value);
-                }
-                acc[cur.SettingName.trim()] = cur.Value;
-                return acc;
-            }, {});
-        }
-    }
-});
-
-var UTLSettingsContext = createContext({
-    state: UTLSettingsReducer.getInitialState(),
-    actions: UTLSettingsReducer.actions
-});
-var useUTLSettingsContext = function () { return useContext(UTLSettingsContext); };
-var UTLSettingsProvider = function (_a) {
-    var children = _a.children;
-    var _b = useComplexState({
-        initialState: UTLSettingsReducer.getInitialState(),
-        reducers: UTLSettingsReducer.caseReducers
-    }), state = _b[0], actions = _b[1];
-    return (React__default.createElement(UTLSettingsContext.Provider, { value: { state: state, actions: actions } }, children));
+        React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", className: classes.root },
+            React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" } },
+                React__default.createElement(Typography$1, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "Settings")),
+            React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", className: classes.root },
+                React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" }, className: classes.relative },
+                    React__default.createElement(CreateSetting, { show: openModalNew, onHide: function (shouldUpdate) {
+                            setOpenModalNew(false);
+                            if (shouldUpdate)
+                                getSettingsFromAPI();
+                        } }),
+                    React__default.createElement(EditSetting, { show: openModalEditSetting, onHide: function (shouldUpdate) {
+                            setOpenModalEditSetting(false);
+                            if (shouldUpdate)
+                                getSettingsFromAPI();
+                        } }),
+                    React__default.createElement(DeleteSetting, { show: openModalDeleteSetting, onHide: function (shouldUpdate) {
+                            setOpenModalDeleteSetting(false);
+                            if (shouldUpdate)
+                                getSettingsFromAPI();
+                        } }),
+                    React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: {
+                            height: "62vh",
+                            border: "4px solid #ccc",
+                            borderRadius: 10,
+                            padding: 10,
+                            margin: "20px 0 10px"
+                        } },
+                        React__default.createElement("div", { style: { height: "100%", width: "100%" }, className: "ag-theme-alpine" },
+                            React__default.createElement(AgGridReact, { rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 34, headerHeight: 34, animateRows: true, loadingOverlayComponent: loadingOverlayComponent, getContextMenuItems: function (e) { return getContextMenuItems(e); }, pagination: true, rowSelection: "single", onRowDoubleClicked: function (event) {
+                                    actions.setSettingSelected(event.data);
+                                    setOpenModalEditSetting(true);
+                                } }))),
+                    React__default.createElement(Grid, { container: true, justifyContent: "flex-end" },
+                        React__default.createElement(Grid, { item: true, md: 2, xs: 12, style: {
+                                display: "flex",
+                                justifyContent: "flex-end"
+                            } },
+                            React__default.createElement(Button, { variant: "contained", color: "primary", onClick: function () { return setOpenModalNew(!openModalNew); }, fullWidth: true, style: { marginTop: 10 } }, "NEW SETTING"))))))));
 };
 
-var useSearchUTLSettings = function (_a) {
-    var onError = _a.onError;
-    var initSettings = useUTLSettingsContext().actions.initSettings;
-    var searchUTLSettings = function () { return __awaiter(void 0, void 0, void 0, function () {
+var SettingsPage = function () {
+    var _a = useSettingsContext(), state = _a.state, actions = _a.actions;
+    var _b = useState(""), error = _b[0], setError = _b[1];
+    var _c = useState(false), isLoading = _c[0], setIsLoading = _c[1];
+    var getSettingsFromAPI = function () { return __awaiter(void 0, void 0, void 0, function () {
         var res, settings;
         return __generator(this, function (_a) {
             switch (_a.label) {
-                case 0: return [4 /*yield*/, getUTLSettings()];
+                case 0:
+                    setIsLoading(true);
+                    return [4 /*yield*/, getUTLSettings()];
                 case 1:
                     res = _a.sent();
                     if (res.ok) {
                         settings = get$1(res, "data.tables[0].rows", []);
-                        initSettings(settings);
+                        actions.setSettings(settings);
                     }
                     else {
-                        onError(res.message);
+                        setError(res.message);
                     }
+                    setIsLoading(false);
                     return [2 /*return*/];
             }
         });
     }); };
-    return { searchUTLSettings: searchUTLSettings };
-};
-
-var AreaSelector$1 = lazy(function () {
-    return Promise.resolve().then(function () { return areaSelector; }).then(function (mod) { return ({
-        "default": mod.AreaSelector
-    }); });
-});
-function Header$1(_a) {
-    var _b = _a.showAreaSelector, showAreaSelector = _b === void 0 ? false : _b, _c = _a.showTrendingsIcon, showTrendingsIcon = _c === void 0 ? true : _c, _d = _a.navbarTitle, navbarTitle = _d === void 0 ? "MESF" : _d;
-    var getUserName = useToken().getUserName;
-    var _e = useState(""), error = _e[0], setError = _e[1];
-    var _f = useState(new Date()), date = _f[0], setDate = _f[1];
-    var CustomNavbar = useContext(NavbarContext);
-    var userName = useState(getUserName())[0];
-    var searchAssets = useSearchAssets(setError).searchAssets;
-    var _g = useState(false), settingsIsReady = _g[0], setSettingsIsReady = _g[1];
-    var searchUTLSettings = useSearchUTLSettings({
-        onError: setError
-    }).searchUTLSettings;
-    var userLogged = useUserContext().state.userLogged;
-    var tick = function () {
-        setDate(new Date());
-    };
-    useEffect(function () {
-        var timerID = setTimeout(function () {
-            tick();
-        }, 1000);
-        return function () {
-            clearTimeout(timerID);
-        };
-    });
     useEffect(function () {
-        searchUTLSettings().then(function () {
-            setSettingsIsReady(true);
-        });
+        getSettingsFromAPI();
     }, []);
-    useEffect(function () {
-        if (showAreaSelector && userLogged && settingsIsReady) {
-            searchAssets();
-        }
-    }, [userLogged, settingsIsReady]);
-    return (React__default.createElement(Navbar, { variant: "dark", expand: "lg", className: "mes-primary-color mes-menu-top" },
-        React__default.createElement(Container, { fluid: true },
-            React__default.createElement(Navbar.Brand, { as: Link, to: "/home" }, navbarTitle),
-            React__default.createElement(Navbar.Toggle, { "aria-controls": "basic-navbar-nav" }),
-            React__default.createElement(Navbar.Collapse, { id: "basic-navbar-nav" },
-                React__default.createElement(Nav, { className: "me-auto" },
-                    React__default.createElement(CustomNavbar, null)),
-                React__default.createElement(Nav, { className: "ml-auto", style: { alignItems: "baseline" } },
-                    showTrendingsIcon ? (React__default.createElement(Nav, { className: "mx-2" },
-                        React__default.createElement(Nav.Link, { as: Link, to: "/trendings" },
-                            React__default.createElement(Tooltip, { title: "Trendings", placement: "top", arrow: true, interactive: true, enterDelay: 1500 },
-                                React__default.createElement(ShowChartIcon, null))))) : null,
-                    React__default.createElement(Nav, null,
-                        React__default.createElement("span", { className: "navbar-text" }, dxtToLocalServerTime(date, "HH:mm:ss z"))),
-                    React__default.createElement(Nav, { className: "mx-2" },
-                        React__default.createElement(Nav.Link, { as: Link, to: "/configuration" },
-                            React__default.createElement("i", { className: "fas fa-cog" }))),
-                    showAreaSelector ? (React__default.createElement(Suspense, { fallback: "..." },
-                        React__default.createElement(AreaSelector$1, null))) : null,
-                    React__default.createElement(NavDropdown, { id: "user-menu", title: React__default.createElement(React__default.Fragment, null,
-                            React__default.createElement("i", { className: "fas fa-user", style: { marginRight: 6 } }),
-                            userName), className: "mx-2" },
-                        React__default.createElement(NavDropdown.Item, { href: "account" }, "Account"),
-                        React__default.createElement(NavDropdown.Item, { href: "logout" }, "Logout"))))),
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
+            React__default.createElement(Paper, { elevation: 1, style: {
+                    width: "100%",
+                    padding: "10px 0 20px",
+                    borderRadius: "0.75rem"
+                } },
+                React__default.createElement(TableSettings, { rows: state.settings, isLoading: isLoading, getSettingsFromAPI: getSettingsFromAPI }))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
-}
+};
+
+var Settings = function () {
+    return (React__default.createElement(SettingsProvider, null,
+        React__default.createElement(SettingsPage, null)));
+};
 
 function Configuration() {
     var option = useParams().option;
@@ -9233,6 +10308,11 @@ function Configuration() {
             path: "jobs",
             sidebar: function () { return React__default.createElement("div", null, "Jobs"); },
             main: function () { return React__default.createElement(JobsPage, null); }
+        },
+        {
+            path: "settings",
+            sidebar: function () { return React__default.createElement("div", null, "Settings"); },
+            main: function () { return React__default.createElement(Settings, null); }
         }
     ], customConfiguration, true);
     return (React__default.createElement(GenericPanel, { title: "Configuration", description: "" },
@@ -9256,7 +10336,9 @@ function Configuration() {
                     React__default.createElement(MenuItem, { selected: option === "logs", className: "p-0" },
                         React__default.createElement(Link, { to: "/configuration/logs", className: "nav-link" }, "Logs")),
                     React__default.createElement(MenuItem, { selected: option === "jobs", className: "p-0" },
-                        React__default.createElement(Link, { to: "/configuration/jobs", className: "nav-link" }, "Jobs")))),
+                        React__default.createElement(Link, { to: "/configuration/jobs", className: "nav-link" }, "Jobs")),
+                    React__default.createElement(MenuItem, { selected: option === "settings", className: "p-0" },
+                        React__default.createElement(Link, { to: "/configuration/settings", className: "nav-link" }, "Settings")))),
             React__default.createElement("div", { className: "col-md-10", style: { flex: "80%" } },
                 React__default.createElement(Routes, null, routes.map(function (route, index) { return (React__default.createElement(Route, { key: "".concat(route.path), path: route.path, element: React__default.createElement(route.main, null) })); }))))));
 }
@@ -9292,7 +10374,7 @@ const FORMATS = {
   year: 'YYYY'
 };
 
-_adapters._date.override(typeof moment$2 === 'function' ? {
+_adapters._date.override(typeof moment$4 === 'function' ? {
   _id: 'moment', // DEBUG ONLY
 
   formats: function() {
@@ -9301,27 +10383,27 @@ _adapters._date.override(typeof moment$2 === 'function' ? {
 
   parse: function(value, format) {
     if (typeof value === 'string' && typeof format === 'string') {
-      value = moment$2(value, format);
-    } else if (!(value instanceof moment$2)) {
-      value = moment$2(value);
+      value = moment$4(value, format);
+    } else if (!(value instanceof moment$4)) {
+      value = moment$4(value);
     }
     return value.isValid() ? value.valueOf() : null;
   },
 
   format: function(time, format) {
-    return moment$2(time).format(format);
+    return moment$4(time).format(format);
   },
 
   add: function(time, amount, unit) {
-    return moment$2(time).add(amount, unit).valueOf();
+    return moment$4(time).add(amount, unit).valueOf();
   },
 
   diff: function(max, min, unit) {
-    return moment$2(max).diff(moment$2(min), unit);
+    return moment$4(max).diff(moment$4(min), unit);
   },
 
   startOf: function(time, unit, weekday) {
-    time = moment$2(time);
+    time = moment$4(time);
     if (unit === 'isoWeek') {
       weekday = Math.trunc(Math.min(Math.max(0, weekday), 6));
       return time.isoWeekday(weekday).startOf('day').valueOf();
@@ -9330,11 +10412,11 @@ _adapters._date.override(typeof moment$2 === 'function' ? {
   },
 
   endOf: function(time, unit) {
-    return moment$2(time).endOf(unit).valueOf();
+    return moment$4(time).endOf(unit).valueOf();
   }
 } : {});
 
-var css$1 = "/* ContextMenu.css */\n.context-menu {\n    position: absolute;\n    z-index: 1000;\n    background-color: #fff;\n    border: 1px solid #ddd;\n    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\n    border-radius: 4px;\n    overflow: hidden;\n}\n\n    .context-menu ul {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n    }\n\n    .context-menu li {\n        padding: 8px 15px;\n        cursor: pointer;\n        border-bottom: 1px solid #eee;\n        background-color: #fff;\n        color: #333;\n        font-size: 14px;\n    }\n\n        .context-menu li:hover {\n            background-color: #f5f5f5;\n        }\n\n\n";
+var css$1 = "/* ContextMenu.css */ .context-menu {\n\tposition: absolute;\n\tz-index: 1000;\n\tbackground-color: #fff;\n\tborder: 1px solid #ddd;\n\tbox-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\n\tborder-radius: 4px;\n\toverflow: hidden;\n}\n\n.context-menu ul {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.context-menu li {\n\tpadding: 8px 15px;\n\tcursor: pointer;\n\tborder-bottom: 1px solid #eee;\n\tbackground-color: #fff;\n\tcolor: #333;\n\tfont-size: 14px;\n}\n\n.context-menu li:hover {\n\tbackground-color: #f5f5f5;\n}\n";
 n(css$1,{});
 
 var useTagColorsStyles = makeStyles({
@@ -9424,7 +10506,7 @@ var ColorPicker = function (_a) {
 };
 
 var TrendingsInitialState = {
-    timeScopeStart: moment$2(new Date()).subtract(1, "days").toDate(),
+    timeScopeStart: moment$4(new Date()).subtract(1, "days").toDate(),
     timeScopeEnd: new Date(),
     scope: "1 day",
     graphPan: false,
@@ -9464,32 +10546,32 @@ var TrendingsReducer = createSlice({
                 if (payload.scope !== "custom") {
                     switch (payload.scope) {
                         case "10 min":
-                            state.timeScopeStart = moment$2(state.timeScopeEnd)
+                            state.timeScopeStart = moment$4(state.timeScopeEnd)
                                 .subtract(10, "minutes")
                                 .toDate();
                             break;
                         case "1 hour":
-                            state.timeScopeStart = moment$2(state.timeScopeEnd)
+                            state.timeScopeStart = moment$4(state.timeScopeEnd)
                                 .subtract(1, "hours")
                                 .toDate();
                             break;
                         case "4 hours":
-                            state.timeScopeStart = moment$2(state.timeScopeEnd)
+                            state.timeScopeStart = moment$4(state.timeScopeEnd)
                                 .subtract(4, "hours")
                                 .toDate();
                             break;
                         case "12 hours":
-                            state.timeScopeStart = moment$2(state.timeScopeEnd)
+                            state.timeScopeStart = moment$4(state.timeScopeEnd)
                                 .subtract(12, "hours")
                                 .toDate();
                             break;
                         case "1 day":
-                            state.timeScopeStart = moment$2(state.timeScopeEnd)
+                            state.timeScopeStart = moment$4(state.timeScopeEnd)
                                 .subtract(1, "days")
                                 .toDate();
                             break;
                         case "10 days":
-                            state.timeScopeStart = moment$2(state.timeScopeEnd)
+                            state.timeScopeStart = moment$4(state.timeScopeEnd)
                                 .subtract(10, "days")
                                 .toDate();
                             break;
@@ -9520,32 +10602,32 @@ var TrendingsReducer = createSlice({
                 if (state.scope !== "custom") {
                     switch (state.scope) {
                         case "10 min":
-                            state.timeScopeEnd = moment$2(payload.start)
+                            state.timeScopeEnd = moment$4(payload.start)
                                 .add(10, "minutes")
                                 .toDate();
                             break;
                         case "1 hour":
-                            state.timeScopeEnd = moment$2(payload.start)
+                            state.timeScopeEnd = moment$4(payload.start)
                                 .add(1, "hours")
                                 .toDate();
                             break;
                         case "4 hours":
-                            state.timeScopeEnd = moment$2(payload.start)
+                            state.timeScopeEnd = moment$4(payload.start)
                                 .add(4, "hours")
                                 .toDate();
                             break;
                         case "12 hours":
-                            state.timeScopeEnd = moment$2(payload.start)
+                            state.timeScopeEnd = moment$4(payload.start)
                                 .add(12, "hours")
                                 .toDate();
                             break;
                         case "1 day":
-                            state.timeScopeEnd = moment$2(payload.start)
+                            state.timeScopeEnd = moment$4(payload.start)
                                 .add(1, "days")
                                 .toDate();
                             break;
                         case "10 days":
-                            state.timeScopeEnd = moment$2(payload.start)
+                            state.timeScopeEnd = moment$4(payload.start)
                                 .add(10, "days")
                                 .toDate();
                             break;
@@ -9558,32 +10640,32 @@ var TrendingsReducer = createSlice({
                 if (state.scope !== "custom") {
                     switch (state.scope) {
                         case "10 min":
-                            state.timeScopeStart = moment$2(payload.end)
+                            state.timeScopeStart = moment$4(payload.end)
                                 .subtract(10, "minutes")
                                 .toDate();
                             break;
                         case "1 hour":
-                            state.timeScopeStart = moment$2(payload.end)
+                            state.timeScopeStart = moment$4(payload.end)
                                 .subtract(1, "hours")
                                 .toDate();
                             break;
                         case "4 hours":
-                            state.timeScopeStart = moment$2(payload.end)
+                            state.timeScopeStart = moment$4(payload.end)
                                 .subtract(4, "hours")
                                 .toDate();
                             break;
                         case "12 hours":
-                            state.timeScopeStart = moment$2(payload.end)
+                            state.timeScopeStart = moment$4(payload.end)
                                 .subtract(12, "hours")
                                 .toDate();
                             break;
                         case "1 day":
-                            state.timeScopeStart = moment$2(payload.end)
+                            state.timeScopeStart = moment$4(payload.end)
                                 .subtract(1, "days")
                                 .toDate();
                             break;
                         case "10 days":
-                            state.timeScopeStart = moment$2(payload.end)
+                            state.timeScopeStart = moment$4(payload.end)
                                 .subtract(10, "days")
                                 .toDate();
                             break;
@@ -11542,21 +12624,21 @@ var dateNavigator = function (startDate, endDate, scope, operator, current) {
         }
         else {
             var _a = scope.split(" "), quantity = _a[0], duration = _a[1];
-            newStartDate = moment$2(newEndDate)
+            newStartDate = moment$4(newEndDate)
                 .subtract(quantity, duration[0])
                 .toDate();
         }
     }
     else {
         if (scope === "custom") {
-            var durationInMs = moment$2(endDate).diff(moment$2(startDate));
-            newStartDate = moment$2(startDate)[operator](durationInMs).toDate();
+            var durationInMs = moment$4(endDate).diff(moment$4(startDate));
+            newStartDate = moment$4(startDate)[operator](durationInMs).toDate();
         }
         else {
             var _b = scope.split(" "), quantity = _b[0], duration = _b[1];
-            newStartDate = moment$2(startDate)[operator](quantity, duration[0])
+            newStartDate = moment$4(startDate)[operator](quantity, duration[0])
                 .toDate();
-            newEndDate = moment$2(endDate)[operator](quantity, duration[0])
+            newEndDate = moment$4(endDate)[operator](quantity, duration[0])
                 .toDate();
         }
     }
@@ -11585,7 +12667,7 @@ var Header = function (_a) {
     var handleDateChange = function (newValue, key) {
         var _a;
         //@ts-ignore
-        actions.setTotalScope((_a = {}, _a[key] = moment$2(newValue).toDate(), _a));
+        actions.setTotalScope((_a = {}, _a[key] = moment$4(newValue).toDate(), _a));
     };
     var handleChangeScope = function (e) {
         var newScope = e.target.value;
@@ -11621,7 +12703,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$2(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$4(state.timeScopeStart).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "start"); }, InputLabelProps: {
                         shrink: true,
                         style: { marginLeft: "10px" }
                     }, InputProps: {
@@ -11638,7 +12720,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$2(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$4(state.timeScopeEnd).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "end"); }, InputLabelProps: {
                         shrink: true,
                         style: { marginLeft: "10px" }
                     } })),
@@ -12235,16 +13317,16 @@ var Navigation = function (_a) {
         React__default.createElement(MESFMainContainer, null)));
 };
 
-var css = "body {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background-color: #fafbfc !important;\n}\n.container-fluid-main{\n  padding-right: 0px !important; \n  padding-left: 0px !important;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}\n\n.mes-primary-color {\n  background-color: #479dc4 !important;\n}\n.mes-button-primary{\n  background-color: #479dc4 !important;\n  border-color: #479dc4 !important;\n}\n\n.mes-selectable-datagrid .MuiDataGrid-row{\n  cursor: pointer;\n}\n\n.mes-menu-top .navbar-brand{\n  color: #FFFF !important;\n}\n.mes-menu-top .nav-link {\n  color: #FFFF !important;\n}\n.mes-menu-top .navbar-toggler {\n  color: #FFFF !important;\n}\n.mes-menu-top .navbar-text {\n  color: #FFFF !important;\n}\n.mes-footer-login{\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  height: 10em;\n  line-height: 60px;\n  text-align:center;\n}\n.mes-filter-datepicker{\n  padding: unset !important;\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n  padding-top: 0.375rem !important;\n  padding-bottom: 0.375rem !important;\n  padding-left: 0.75rem !important;\n  cursor: pointer !important;\n  max-width: 120px;\n}\n.mes-filter-datetimepicker{\n  max-width: 97px;\n}\n.mes-not-rounded{\n  border-radius: unset !important;\n}\n\n.mes-numeric{\n  text-align: right;\n}\n.mes-drag-over{\n  border: 3px dotted #666;\n  background-color: #479dc4 !important;\n}\n.mes-drag-start{\n  border: 3px solid #666;\n}\n\n.mes-selectable{\n  cursor: pointer !important;\n}\n\n.mes-custom-select{\n  width: auto !important;\n  padding: 0.375rem 0 0.375rem 0 !important;\n  background: unset !important;\n  font-family: inherit !important;\n}\n.mes-custom-select .MuiSelect-select{\n  padding-left: 14px;\n}\n\n.mes-custom-select::before{\n  border-bottom: unset !important;\n}\n.mes-custom-select::after{\n  border-bottom: unset !important;\n}\n.mes-no-border{\n  border: unset;\n}\n.mes-no-border:focus-visible {\n  outline: unset;\n}\n.mes-div-submenu{\n  border-right: 1px solid #cfdbe2;\n  overflow-y: scroll;\n  max-height: 80vh;\n}\n.mes-submenu a{\n  width: 100% !important;\n  /* color: rgba(0, 0, 0, 0.87); */\n  color: #479dc4\n}\n.mes-submenu .Mui-selected{\n  border-right: 3px solid #479dc4; \n}\n.mes-menu-group{\n    font-size: 20px;\n    line-height: 1.1;\n    color: #929292;  \n    font-weight: normal;    \n}\n\n/********************MUI DATAGRID*****************************/\n.Mui-selected{\n  font-weight: bolder !important;\n  opacity: 1 !important;\n}\n\n.mes-upload-control{\n\n}\n.mes-upload-control .file-box{\n  /* border : 1px solid black; */\n  height : 100px;\n  position: relative;  \n}\n.mes-upload-control .file-detail{\n  position: absolute;\n  left: 0px;\n  top: 0px; \n  z-index: 1;\n  height: 100%;\n  width: 100%;\n}\n\n.mes-upload-control input[type=file]{\n  left: 0px;\n  top: 0px;\n  opacity: 0;\n  z-index: 10000;\n  height: 100%;\n  cursor: pointer;\n}\n.mes-upload-control table{\n  width: 100%;\n}\n.mes-upload-control td{\n  font-size: 0.8rem !important;\n  max-width:0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\n}\n\n\n.input-group-text{\n  background-color: #ced2cc !important;\n  /* border: 1px solid #ced4da !important; */\n  /* color: #000000 !important; */\n}\n\n\n\n\n.content-wrapper {\n  padding: 15px;\n  width: 100%;\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\n  margin-top: -1px;\n}\n.content-wrapper > .unwrap {\n  margin: -15px;\n}\n@media only screen and (min-width: 768px) {\n  .content-wrapper > .unwrap {\n    margin: -20px;\n  }\n}\n.content-wrapper > h3,\n.content-wrapper > .content-heading {\n  font-size: 24px;\n  line-height: 1.1;\n  color: #929292;\n  margin: -15px;\n  margin-bottom: 20px;\n  padding: 15px;\n  font-weight: normal;\n  background-color: #fafbfc;\n  border-bottom: 1px solid #cfdbe2;\n}\n.content-wrapper > h3 > small,\n.content-wrapper > .content-heading > small {\n  display: block;\n  font-size: 12px;\n  color: #909fa7;\n}\n.content-wrapper > button,\n.content-wrapper > .btn {\n  margin: 10px 10px 0 0;\n}\n.content-wrapper .container,\n.content-wrapper .container-fluid {\n  padding-left: 0;\n  padding-right: 0;\n}\n@media only screen and (min-width: 768px) {\n  .content-wrapper {\n    padding: 20px;\n  }\n  .content-wrapper > h3,\n  .content-wrapper > .content-heading {\n    margin: -20px;\n    margin-bottom: 5px;\n    padding: 15px;\n  }\n  .content-wrapper > button,\n  .content-wrapper > .btn {\n    margin: 0;\n  }\n}\n\n  @media print {\n    .sidebar,\n    .topnavbar,\n    .offsidebar,\n    .btn {\n      display: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    }\n    .wrapper,\n    .wrapper > section,\n    .content-wrapper {\n      margin: 0 !important;\n      /* remove margin used for sidebar and expand the content */\n      padding: 0 !important;\n      width: 100% !important;\n    }\n    .content-wrapper {\n      overflow: hidden !important;\n    }\n  }\n  ";
+var css = "body {\n\tmargin: 0;\n\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n\t\t\"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n\t\tsans-serif;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\tbackground-color: #fafbfc !important;\n}\n.container-fluid-main {\n\tpadding-right: 0px !important;\n\tpadding-left: 0px !important;\n}\n\ncode {\n\tfont-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n\t\tmonospace;\n}\n\n.mes-primary-color {\n\tbackground-color: #479dc4 !important;\n}\n.mes-button-primary {\n\tbackground-color: #479dc4 !important;\n\tborder-color: #479dc4 !important;\n}\n\n.mes-selectable-datagrid .MuiDataGrid-row {\n\tcursor: pointer;\n}\n\n.mes-menu-top .navbar-brand {\n\tcolor: #ffff !important;\n}\n.mes-menu-top .nav-link {\n\tcolor: #ffff !important;\n}\n.mes-menu-top .navbar-toggler {\n\tcolor: #ffff !important;\n}\n.mes-menu-top .navbar-text {\n\tcolor: #ffff !important;\n}\n.mes-footer-login {\n\tposition: absolute;\n\tbottom: 0;\n\twidth: 100%;\n\theight: 10em;\n\tline-height: 60px;\n\ttext-align: center;\n}\n.mes-filter-datepicker {\n\tpadding: unset !important;\n\tborder-top-left-radius: 0 !important;\n\tborder-bottom-left-radius: 0 !important;\n\tpadding-top: 0.375rem !important;\n\tpadding-bottom: 0.375rem !important;\n\tpadding-left: 0.75rem !important;\n\tcursor: pointer !important;\n\tmax-width: 120px;\n}\n.mes-filter-datetimepicker {\n\tmax-width: 97px;\n}\n.mes-not-rounded {\n\tborder-radius: unset !important;\n}\n\n.mes-numeric {\n\ttext-align: right;\n}\n.mes-drag-over {\n\tborder: 3px dotted #666;\n\tbackground-color: #479dc4 !important;\n}\n.mes-drag-start {\n\tborder: 3px solid #666;\n}\n\n.mes-selectable {\n\tcursor: pointer !important;\n}\n\n.mes-custom-select {\n\twidth: auto !important;\n\tpadding: 0.375rem 0 0.375rem 0 !important;\n\tbackground: unset !important;\n\tfont-family: inherit !important;\n}\n.mes-custom-select .MuiSelect-select {\n\tpadding-left: 14px;\n}\n\n.mes-custom-select::before {\n\tborder-bottom: unset !important;\n}\n.mes-custom-select::after {\n\tborder-bottom: unset !important;\n}\n.mes-no-border {\n\tborder: unset;\n}\n.mes-no-border:focus-visible {\n\toutline: unset;\n}\n.mes-div-submenu {\n\tborder-right: 1px solid #cfdbe2;\n\toverflow-y: scroll;\n\tmax-height: 80vh;\n}\n.mes-submenu a {\n\twidth: 100% !important;\n\t/* color: rgba(0, 0, 0, 0.87); */\n\tcolor: #479dc4;\n}\n.mes-submenu .Mui-selected {\n\tborder-right: 3px solid #479dc4;\n}\n.mes-menu-group {\n\tfont-size: 20px;\n\tline-height: 1.1;\n\tcolor: #929292;\n\tfont-weight: normal;\n}\n\n/********************MUI DATAGRID*****************************/\n.Mui-selected {\n\tfont-weight: bolder !important;\n\topacity: 1 !important;\n}\n\n.mes-upload-control {\n}\n.mes-upload-control .file-box {\n\t/* border : 1px solid black; */\n\theight: 100px;\n\tposition: relative;\n}\n.mes-upload-control .file-detail {\n\tposition: absolute;\n\tleft: 0px;\n\ttop: 0px;\n\tz-index: 1;\n\theight: 100%;\n\twidth: 100%;\n}\n\n.mes-upload-control input[type=\"file\"] {\n\tleft: 0px;\n\ttop: 0px;\n\topacity: 0;\n\tz-index: 10000;\n\theight: 100%;\n\tcursor: pointer;\n}\n.mes-upload-control table {\n\twidth: 100%;\n}\n.mes-upload-control td {\n\tfont-size: 0.8rem !important;\n\tmax-width: 0;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.input-group-text {\n\tbackground-color: #ced2cc !important;\n\t/* border: 1px solid #ced4da !important; */\n\t/* color: #000000 !important; */\n}\n\n.content-wrapper {\n\tpadding: 15px;\n\twidth: 100%;\n\tborder-top: 1px solid rgba(0, 0, 0, 0.15);\n\tmargin-top: -1px;\n}\n.content-wrapper > .unwrap {\n\tmargin: -15px;\n}\n@media only screen and (min-width: 768px) {\n\t.content-wrapper > .unwrap {\n\t\tmargin: -20px;\n\t}\n}\n.content-wrapper > h3,\n.content-wrapper > .content-heading {\n\tfont-size: 24px;\n\tline-height: 1.1;\n\tcolor: #929292;\n\tmargin: -15px;\n\tmargin-bottom: 20px;\n\tpadding: 15px;\n\tfont-weight: normal;\n\tbackground-color: #fafbfc;\n\tborder-bottom: 1px solid #cfdbe2;\n}\n.content-wrapper > h3 > small,\n.content-wrapper > .content-heading > small {\n\tdisplay: block;\n\tfont-size: 12px;\n\tcolor: #909fa7;\n}\n.content-wrapper > button,\n.content-wrapper > .btn {\n\tmargin: 10px 10px 0 0;\n}\n.content-wrapper .container,\n.content-wrapper .container-fluid {\n\tpadding-left: 0;\n\tpadding-right: 0;\n}\n@media only screen and (min-width: 768px) {\n\t.content-wrapper {\n\t\tpadding: 20px;\n\t}\n\t.content-wrapper > h3,\n\t.content-wrapper > .content-heading {\n\t\tmargin: -20px;\n\t\tmargin-bottom: 5px;\n\t\tpadding: 15px;\n\t}\n\t.content-wrapper > button,\n\t.content-wrapper > .btn {\n\t\tmargin: 0;\n\t}\n}\n\n@media print {\n\t.sidebar,\n\t.topnavbar,\n\t.offsidebar,\n\t.btn {\n\t\tdisplay: none !important;\n\t\twidth: 0 !important;\n\t\theight: 0 !important;\n\t}\n\t.wrapper,\n\t.wrapper > section,\n\t.content-wrapper {\n\t\tmargin: 0 !important;\n\t\t/* remove margin used for sidebar and expand the content */\n\t\tpadding: 0 !important;\n\t\twidth: 100% !important;\n\t}\n\t.content-wrapper {\n\t\toverflow: hidden !important;\n\t}\n}\n";
 n(css,{});
 
 var timezone = TimeService.getInstance().getServerTimeZone();
-moment$3.tz.setDefault(timezone);
+moment$5.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$3 },
+        React__default.createElement(LocalizationProvider, { dateAdapter: AdapterMoment, dateLibInstance: moment$5 },
             React__default.createElement(UserProvider, null,
                 React__default.createElement(AssetProvider, null,
                     React__default.createElement(UTLSettingsProvider, null,
@@ -12279,7 +13361,7 @@ var useDefaultAreaId = function (setError) {
 };
 
 var useStyles = makeStyles(function (theme) {
-    return createStyles$1({
+    return createStyles({
         root: {
             "& .MuiInputBase-input": {
                 color: "#000 !important"
@@ -12398,5 +13480,5 @@ var areaSelector = /*#__PURE__*/Object.freeze({
     AreaSelector: AreaSelector
 });
 
-export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HorizontalTextControl, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, NumericTextControl, ShiftDayNavigatorControl, ShiftNavigatorProvider, SimplePasswordControl, SimpleSelectorControl, SimpleTextAreaControl, SimpleTextControl, TimeFormatter, TimeService, TreePickerControl, TreePickerControlV2, TrendingsPage, USER_LABELS, UTLSettingsProvider, UploadFileControl, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getError, getMomentTz, getProfiles, getShiftByParameters, getShiftStyle, getTokenFromLS, getUsers, renewToken, setPassword, setProfilesToUser, upsertUser, useAssetContext, useContextMenuMESF, useShiftNavigator, useShiftNavigatorManager, useStyles$1 as useStyles, useToken, useUTLSettingsContext, useUserContext };
+export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HorizontalTextControl, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, NumericTextControl, ShiftDayNavigatorControl, ShiftNavigatorProvider, ShiftPeriodNavigatorControl, SimplePasswordControl, SimpleSelectorControl, SimpleTextAreaControl, SimpleTextControl, TimeFormatter, TimeService, TreePickerControl, TreePickerControlV2, TrendingsPage, USER_LABELS, UTLSettingsProvider, UploadFileControl, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getError, getMomentTz, getProfiles, getShiftByParameters, getShiftStyle, getShiftsRangeByParameters, getTokenFromLS, getUsers, renewToken, setPassword, setProfilesToUser, upsertUser, useAssetContext, useContextMenuMESF, useShiftNavigator, useShiftNavigatorManager, useStyles$4 as useStyles, useToken, useUTLSettingsContext, useUserContext };
 //# sourceMappingURL=index.esm.js.map