@dexteel/mesf-core 4.20.6 → 4.22.0

package/dist/index.esm.js

@@ -18,7 +18,7 @@ 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';
@@ -40,9 +40,9 @@ import InsertChartIcon from '@material-ui/icons/InsertChart';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import SkipNextIcon from '@material-ui/icons/SkipNext';
 import { Line } from 'react-chartjs-2';
-import { ClearIcon, 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';
@@ -54,7 +54,7 @@ import AccountTreeIcon from '@material-ui/icons/AccountTree';
 import Code from '@material-ui/icons/Code';
 import TreeItem from '@material-ui/lab/TreeItem';
 import TreeView from '@material-ui/lab/TreeView';
-import { useSpring, animated } from 'react-spring';
+import { useSpring, animated } from '@react-spring/web';
 import { DataGrid, GridOverlay } from '@material-ui/data-grid';
 import { format, fromZonedTime, formatInTimeZone } from 'date-fns-tz';
 import { findIana } from 'windows-iana';
@@ -573,7 +573,7 @@ var ModalTreeFilterControl = function (props) {
             React__default.createElement(Button, { onClick: handleOk, color: "primary" }, "OK"))));
 };
 
-var useStyles$y = 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$y = makeStyles(function (theme) { return ({
     }
 }); });
 var TreePickerControl = function (props) {
-    var classes = useStyles$y();
+    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$x = 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$x();
+    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$w = 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$w = 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$w();
+    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$v = makeStyles(function (theme) { return ({
+var useStyles$w = makeStyles(function (theme) { return ({
     root: {
         "& .MuiDataGrid-row": {
             cursor: "pointer"
@@ -1718,7 +1718,7 @@ var useStyles$v = makeStyles(function (theme) { return ({
 }); });
 var TableJobs = function (_a) {
     var getJobsFromAPI = _a.getJobsFromAPI, isLoading = _a.isLoading;
-    var classes = useStyles$v();
+    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$u = 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$u();
+    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$t = 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$t = makeStyles(function (theme) { return ({
 var useLogTableData = function () {
     var _a;
     var state = useLogsContext().state;
-    var classes = useStyles$t();
+    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$s = 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$s();
+    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"
         });
@@ -2578,7 +2578,7 @@ var deleteProfile = function (profileId) { return __awaiter(void 0, void 0, void
     });
 }); };
 
-var useStyles$r = makeStyles(function (theme) { return ({
+var useStyles$s = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15
     },
@@ -2601,7 +2601,7 @@ 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$r();
+    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;
@@ -2836,7 +2836,7 @@ var DataTable = function (_a) {
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
-var useStyles$q = makeStyles(function (theme) { return ({
+var useStyles$r = makeStyles(function (theme) { return ({
     root: {
         "& .MuiFormLabel-asterisk": {
             display: "none"
@@ -2845,7 +2845,7 @@ var useStyles$q = makeStyles(function (theme) { return ({
 }); });
 var ActionsOfProfile = function (_a) {
     var profileForEdit = _a.profileForEdit, show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$q();
+    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];
@@ -3033,7 +3033,7 @@ var ProfilesProvider = function (_a) {
     return (React__default.createElement(ProfilesContext.Provider, { value: { state: state, actions: actions } }, children));
 };
 
-var useStyles$p = makeStyles(function (theme) { return ({
+var useStyles$q = makeStyles(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -3051,7 +3051,7 @@ var useStyles$p = makeStyles(function (theme) { return ({
 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$p();
+    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$3 = function (_a) {
     return { rows: rows, columnDefs: columnDefs };
 };
 
-var useStyles$o = 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$o();
+    var classes = useStyles$p();
     var loadingOverlayComponent = useMemo(function () {
         return LazyLoading;
     }, []);
@@ -3434,7 +3434,7 @@ var DeleteShiftParameters = function (PatternStart) { return __awaiter(void 0, v
     });
 }); };
 
-var useStyles$n = makeStyles(function (theme) { return ({
+var useStyles$o = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15
     },
@@ -3460,7 +3460,7 @@ 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$n();
+    var classes = useStyles$o();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _g = useForm({
         defaultValues: shiftTableData ? shiftTableData : INITIAL_VALUES$2
@@ -3662,7 +3662,7 @@ var CreateShift = function (_a) {
             React.createElement(Alert, { severity: "success", onClose: handleClose }, "The shift was created successfully"))));
 };
 
-var useStyles$m = makeStyles(function (theme) { return ({
+var useStyles$n = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15
     },
@@ -3688,7 +3688,7 @@ 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$m();
+    var classes = useStyles$n();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _f = useState(""), error = _f[0], setError = _f[1];
     var _g = useForm({ defaultValues: INITIAL_VALUES$2 }), control = _g.control, setValue = _g.setValue, reset = _g.reset, watch = _g.watch, errors = _g.formState.errors;
@@ -3827,7 +3827,7 @@ var DeleteShift = function (_a) {
             React.createElement(Alert, { severity: "warning", onClose: handleClose }, "The shift was deleted successfully"))));
 };
 
-var useStyles$l = makeStyles(function (theme) { return ({
+var useStyles$m = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15
     },
@@ -3854,7 +3854,7 @@ 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$l();
+    var classes = useStyles$m();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     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
@@ -4122,7 +4122,7 @@ var useShiftsOptionsFunctions = function (_a) {
     };
 };
 
-var useStyles$k = makeStyles(function (theme) { return ({
+var useStyles$l = makeStyles(function (theme) { return ({
     root: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -4141,7 +4141,7 @@ 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$k();
+    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$2 = 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$2 = function (_a) {
     return { rows: rows, columnDefs: columnDefs };
 };
 
-var useStyles$j = makeStyles(function (theme) { return ({
+var useStyles$k = makeStyles(function (theme) { return ({
     root: {
         "& .ag-icon-menu": {
             display: "none"
@@ -4302,7 +4302,7 @@ var useStyles$j = makeStyles(function (theme) { return ({
 }); });
 var TableShiftsCrews = function (_a) {
     _a.isLoading; var getShiftsCrewsFromAPI = _a.getShiftsCrewsFromAPI;
-    var classes = useStyles$j();
+    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];
@@ -4806,7 +4806,7 @@ var useAssetCodes = function () {
     return { loadFilterAssets: loadFilterAssets };
 };
 
-var useStyles$i = makeStyles(function (theme) { return ({
+var useStyles$j = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -4849,7 +4849,7 @@ var useStyles$i = makeStyles(function (theme) { return ({
 }); });
 var CreateNewAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$i();
+    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$h = makeStyles(function (theme) { return ({
+var useStyles$i = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -5016,7 +5016,7 @@ var useStyles$h = makeStyles(function (theme) { return ({
 }); });
 var EditAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$h();
+    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$g = makeStyles(function (theme) { return ({
+var useStyles$h = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -5180,7 +5180,7 @@ var useStyles$g = makeStyles(function (theme) { return ({
 }); });
 var RemoveAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$g();
+    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$f = makeStyles(function (theme) { return ({
+var useStyles$g = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -5290,7 +5290,7 @@ var useStyles$f = makeStyles(function (theme) { return ({
 }); });
 var ViewerAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$f();
+    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$e = makeStyles(function (theme) { return ({
+var useStyles$f = makeStyles(function (theme) { return ({
     root: {
         alignItems: "center",
         backgroundColor: "#1967d2",
@@ -5488,7 +5488,7 @@ var useStyles$e = makeStyles(function (theme) { return ({
 }); });
 var CustomDragPreview$1 = function (props) {
     var _a;
-    var classes = useStyles$e();
+    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$d = 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$d();
+    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$c = makeStyles(function (theme) { return ({
+var useStyles$d = makeStyles(function (theme) { return ({
     root: {
         alignItems: "flex-start",
         backgroundColor: "#1967d2",
@@ -5630,7 +5630,7 @@ var useStyles$c = makeStyles(function (theme) { return ({
     }
 }); });
 var MultipleDragPreview = function (props) {
-    var classes = useStyles$c();
+    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$b = makeStyles(function (theme) { return ({
+var useStyles$c = makeStyles(function (theme) { return ({
     root: {},
     contextMenu: {
         backgroundColor: "#F8F8F8",
@@ -5687,7 +5687,7 @@ var useStyles$b = makeStyles(function (theme) { return ({
 }); });
 var AssetViewComponent = function () {
     var _a = useState([]), selectedNodes = _a[0], setSelectedNodes = _a[1];
-    var classes = useStyles$b();
+    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];
@@ -6100,7 +6100,7 @@ var INITIAL_VALUES$1 = {
     Profiles: []
 };
 
-var useStyles$a = 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$a();
+    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$9 = 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$9();
+    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$8 = makeStyles(function (theme) { return ({
+var useStyles$9 = makeStyles(function (theme) { return ({
     checkbox: {
         userSelect: "none"
     },
@@ -6272,7 +6272,7 @@ 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$8();
+    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") {
@@ -6487,7 +6487,7 @@ var DeleteUser = function (_a) {
         React__default.createElement(ErrorModal, { error: profileError, onHide: function () { return setprofileError(""); }, title: "Error Choosing Profile" })));
 };
 
-var useStyles$7 = makeStyles(function (theme) { return ({
+var useStyles$8 = makeStyles(function (theme) { return ({
     checkbox: {
         userSelect: "none"
     },
@@ -6506,7 +6506,7 @@ var useStyles$7 = 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$7();
+    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];
@@ -6657,7 +6657,7 @@ var UsersProvider = function (_a) {
     return (React__default.createElement(UsersContext.Provider, { value: { state: state, actions: actions } }, children));
 };
 
-var useStyles$6 = 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$6 = makeStyles(function (theme) { return ({
     }
 }); });
 var buttonsCellRenderer = function (params) {
-    var classes = useStyles$6();
+    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%",
@@ -6872,7 +6872,7 @@ var useUsersOptionsFunctions = function (_a) {
     };
 };
 
-var useStyles$5 = 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$5();
+    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 () {
@@ -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,6 +8138,332 @@ var ShiftDayNavigatorControl = function (props) {
                         React__default.createElement(SkipNext, null)))))));
 };
 
+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 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 DEFAULT_PERIOD_OPTIONS = [
+    { value: "Shift", label: "Shift" },
+    { value: "Day", label: "Day" },
+    { value: "4Days", label: "4 Days" },
+    { value: "Week", label: "Week" },
+    { value: "Month", label: "Month" },
+];
+var moment = getMomentTz();
+var ShiftPeriodNavigatorControl = function (_a) {
+    var _b;
+    var value = _a.value, onChange = _a.onChange, _c = _a.showShiftAndCrews, showShiftAndCrews = _c === void 0 ? true : _c, _d = _a.dateFormat, dateFormat = _d === void 0 ? "MM/DD/YYYY HH:mm a" : _d, _e = _a.periodOptions, periodOptions = _e === void 0 ? DEFAULT_PERIOD_OPTIONS : _e;
+    var classes = useStyles$5();
+    var _f = useState(((_b = periodOptions[0]) === null || _b === void 0 ? void 0 : _b.value) || "Day"), period = _f[0], setPeriod = _f[1];
+    var _g = useState(false), loadingShiftPeriodList = _g[0], setLoadingShiftPeriodList = _g[1];
+    var _h = useState(""); _h[0]; var setError = _h[1];
+    var _j = useState([]), shiftPeriodList = _j[0], setShiftPeriodList = _j[1];
+    var _k = useState(false), isActionInProgress = _k[0], setIsActionInProgress = _k[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];
+    var renderShiftCrewInfo = function (shift) {
+        if (!showShiftAndCrews || !shift)
+            return null;
+        return (React__default.createElement("span", { style: {
+                paddingRight: 5,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                fontSize: 15,
+                fontWeight: "bold"
+            } },
+            shift.Shift,
+            " - ",
+            shift.Crew));
+    };
+    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: dateFormat, value: moment((startShift === null || startShift === void 0 ? void 0 : startShift.Start) || moment().subtract(1, "day")), onChange: function (value) {
+                    return handleDateChange(value ? moment(value) : null, "start");
+                }, 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%"
+                        } },
+                        renderShiftCrewInfo(startShift),
+                        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
+                    } }, periodOptions.map(function (option) { return (React__default.createElement(MenuItem, { key: option.value, value: option.value }, option.label)); })))),
+        React__default.createElement("div", { className: "".concat(classes.gridItem, " ").concat(classes.datePickerWrapper) },
+            React__default.createElement(DatePicker$1, { label: "End", format: dateFormat, value: moment((endShift === null || endShift === void 0 ? void 0 : endShift.Start) || moment().subtract(1, "day")), onChange: function (value) {
+                    return handleDateChange(value ? moment(value) : null, "end");
+                }, 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%"
+                        } },
+                        renderShiftCrewInfo(endShift),
+                        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",
@@ -10036,7 +10362,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() {
@@ -10045,27 +10371,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();
@@ -10074,7 +10400,7 @@ _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();
   }
 } : {});
 
@@ -10168,7 +10494,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,
@@ -10208,32 +10534,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;
@@ -10264,32 +10590,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;
@@ -10302,32 +10628,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;
@@ -12286,21 +12612,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();
         }
     }
@@ -12329,7 +12655,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;
@@ -12365,7 +12691,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: {
@@ -12382,7 +12708,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" }
                     } })),
@@ -12983,12 +13309,12 @@ var css = "body {\n\tmargin: 0;\n\tfont-family: -apple-system, BlinkMacSystemFon
 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,
@@ -13142,5 +13468,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$4 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