@dexteel/mesf-core 4.14.0 → 4.16.0

package/dist/index.esm.js

@@ -1,15 +1,20 @@
 export { LicenseManager } from 'ag-grid-enterprise';
-import { Typography, Checkbox, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, useTheme as useTheme$1, Tooltip, Divider, IconButton as IconButton$1, Box, FormControl as FormControl$1, Select as Select$1, debounce, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
+import { Typography, Checkbox, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, useTheme as useTheme$1, IconButton as IconButton$1, Tooltip as Tooltip$1, Divider, Box, FormControl as FormControl$1, Select as Select$1, debounce, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
 import { values, get, isNil as isNil$1, isEmpty, round, isNaN, isNumber } from 'lodash-es';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, useMemo, Component, createContext, useContext, useCallback, lazy, Suspense } from 'react';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+import { ArrowRight, ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRight } from '@material-ui/icons';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker/DatePicker';
+import Tooltip from '@material-ui/core/Tooltip';
+import { Outlet, useParams, useNavigate, useSearchParams, Link, Navigate, Routes, Route, BrowserRouter } from 'react-router-dom';
 import { Alert as Alert$1, Modal as Modal$1, Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
 import DialogTitle$1 from '@material-ui/core/DialogTitle';
 import DialogContent$1 from '@material-ui/core/DialogContent';
 import DialogActions$1 from '@material-ui/core/DialogActions';
 import Dialog from '@material-ui/core/Dialog';
 import Button from '@material-ui/core/Button';
-import { Outlet, useNavigate, useSearchParams, Link, useParams, Navigate, Routes, Route, BrowserRouter } from 'react-router-dom';
 import { useMsal, MsalProvider } from '@azure/msal-react';
 import { LogLevel, PublicClientApplication } from '@azure/msal-browser';
 import { useComplexState } from 'use-complex-state';
@@ -17,14 +22,12 @@ import { createSlice } from '@reduxjs/toolkit';
 import ShowChartIcon from '@material-ui/icons/ShowChart';
 import MenuItem from '@material-ui/core/MenuItem';
 import MenuList from '@material-ui/core/MenuList';
-import Paper from '@material-ui/core/Paper';
-import Grid from '@material-ui/core/Grid';
 import { isNil, get as get$1 } from 'lodash';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import moment from 'moment';
+import moment$2 from 'moment';
 import axios from 'axios';
-import { _adapters, Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip as Tooltip$1, Legend, TimeScale } from 'chart.js';
+import { _adapters, Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip as Tooltip$2, Legend, TimeScale } from 'chart.js';
 import zoomPlugin from 'chartjs-plugin-zoom';
 import SaveIcon from '@material-ui/icons/Save';
 import LockIcon from '@material-ui/icons/Lock';
@@ -35,10 +38,12 @@ 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 { ArrowRight, ChevronLeft, ChevronRight } from '@material-ui/icons';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import SkipNextIcon from '@material-ui/icons/SkipNext';
 import { Line } from 'react-chartjs-2';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import moment$3 from 'moment-timezone';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
 import PropTypes from 'prop-types';
 import { ResponsiveBar } from '@nivo/bar';
@@ -79,7 +84,8 @@ import ListAltIcon from '@material-ui/icons/ListAlt';
 import DescriptionIcon from '@material-ui/icons/Description';
 import { format, fromZonedTime, formatInTimeZone } from 'date-fns-tz';
 import { findIana } from 'windows-iana';
-import moment$1 from 'moment-timezone';
+import FindInPageIcon from '@material-ui/icons/FindInPage';
+import AddBoxIcon from '@material-ui/icons/AddBox';
 import FormControlLabel$1 from '@material-ui/core/FormControlLabel';
 import Checkbox$1 from '@material-ui/core/Checkbox';
 import Input from '@material-ui/core/Input';
@@ -290,8 +296,6 @@ var LazyLoading = function () {
             React__default.createElement("div", null))));
 };
 
-/**********************MATERIAL UI STYLES********************** */
-/*************************************************************** */
 function MinusSquare(props) {
     return (React__default.createElement(SvgIcon, __assign({ fontSize: "inherit", style: { width: 14, height: 14 } }, props),
         React__default.createElement("path", { d: "M22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0zM17.873 11.023h-11.826q-.375 0-.669.281t-.294.682v0q0 .401.294 .682t.669.281h11.826q.375 0 .669-.281t.294-.682v0q0-.401-.294-.682t-.669-.281z" })));
@@ -312,9 +316,6 @@ function TransitionComponent(props) {
         React__default.createElement(Collapse, __assign({}, props))));
 }
 TransitionComponent.propTypes = {
-    /**
-     * Show the component; triggers the enter or exit states
-     */
     "in": PropTypes.bool
 };
 var StyledTreeItem = withStyles(function (theme) { return ({
@@ -336,7 +337,7 @@ var StyledTreeItem = withStyles(function (theme) { return ({
 }); })(function (props) { return (React__default.createElement(TreeItem, __assign({}, props, { TransitionComponent: TransitionComponent }))); });
 var useTreviewStyle = makeStyles(function (theme) { return ({
     root: {
-        "min-height": 264,
+        minHeight: 264,
         flexGrow: 1
     },
     treLabelIcon: {
@@ -365,6 +366,7 @@ var ModalTreeFilterControl = function (props) {
     var _b = useState([]), expanded = _b[0], setExpanded = _b[1];
     var treeRef = useRef(null);
     var _c = useState([]), selectedNodes = _c[0], setSelectedNodes = _c[1];
+    var classes = useTreviewStyle();
     useEffect(function () {
         if (!open) {
             setValue(valueProp);
@@ -374,6 +376,34 @@ var ModalTreeFilterControl = function (props) {
                 expandNode(valueProp);
         }
     }, [valueProp, open]);
+    useEffect(function () {
+        if (Array.isArray(listAssetDrawings) && listAssetDrawings.length >= 1) {
+            setSelectedNodes(listAssetDrawings);
+            var expandedBranches = findBranchesWithSelectedNodes(data, listAssetDrawings);
+            setExpanded(expandedBranches);
+        }
+        else {
+            setSelectedNodes([]);
+            setExpanded([]);
+        }
+    }, [listAssetDrawings, data]);
+    var findBranchesWithSelectedNodes = function (node, selectedNodes) {
+        var branches = [];
+        if (selectedNodes.includes(node.id)) {
+            branches.push(node.id.toString());
+        }
+        if (Array.isArray(node.children)) {
+            for (var _i = 0, _a = node.children; _i < _a.length; _i++) {
+                var child = _a[_i];
+                var childBranches = findBranchesWithSelectedNodes(child, selectedNodes);
+                if (childBranches.length > 0) {
+                    branches.push(node.id.toString());
+                    branches = branches.concat(childBranches);
+                }
+            }
+        }
+        return branches;
+    };
     var handleEntering = function () {
         if (treeRef.current != null) {
             treeRef.current.focus();
@@ -381,10 +411,11 @@ var ModalTreeFilterControl = function (props) {
     };
     var handleCancel = function () {
         onClose();
-        onHide(false);
+        if (onHide)
+            onHide(false);
     };
     var handleOk = function () {
-        var findNode = getNodeData(data, parseInt(value));
+        var findNode = getNodeData(data, value !== undefined ? value : -1);
         if (findNode === null)
             findNode = {};
         var activeFilter = (selectActive && findNode.isActive) || selectActive !== true;
@@ -393,13 +424,15 @@ var ModalTreeFilterControl = function (props) {
         if (findNode.isLeaf) {
             if (activeFilter && internalFilter) {
                 onClose(value, findNode.name, findNode);
-                onSuccess(true);
+                if (onSuccess)
+                    onSuccess(true);
             }
         }
         else {
             if (branchFilter) {
                 onClose(value, findNode.name, findNode);
-                onSuccess(true);
+                if (onSuccess)
+                    onSuccess(true);
             }
         }
     };
@@ -431,13 +464,13 @@ var ModalTreeFilterControl = function (props) {
         }
         return [];
     };
-    var expandNode = function (node, same) {
-        var expandedNode = getNodeParent(data, node, []);
-        expandedNode.push(node.toString());
+    var expandNode = function (nodeId) {
+        var expandedNode = getNodeParent(data, nodeId, []);
+        expandedNode.push(nodeId.toString());
         setExpanded(expandedNode);
     };
     var handleChange = function (event, nodeIds) {
-        setValue(nodeIds);
+        setValue(parseInt(nodeIds));
     };
     var handleToogle = function (event, nodeIds) {
         setExpanded(nodeIds);
@@ -457,7 +490,6 @@ var ModalTreeFilterControl = function (props) {
         }
         return null;
     };
-    var classes = useTreviewStyle();
     var handleCheckboxChange = function (node) {
         if (node) {
             var isSelected = selectedNodes.includes(node.id);
@@ -469,37 +501,27 @@ var ModalTreeFilterControl = function (props) {
                 updatedSelectedNodes = __spreadArray(__spreadArray([], selectedNodes, true), [node.id], false);
             }
             setSelectedNodes(updatedSelectedNodes);
+            if (setListAssetDrawings) {
+                setListAssetDrawings(updatedSelectedNodes);
+            }
+            var expandedBranches = findBranchesWithSelectedNodes(data, updatedSelectedNodes);
+            setExpanded(expandedBranches);
         }
     };
-    useEffect(function () {
-        if ((selectedNodes === null || selectedNodes === void 0 ? void 0 : selectedNodes.length) >= 1 && setListAssetDrawings) {
-            setListAssetDrawings(selectedNodes);
-        }
-    }, [selectedNodes]);
-    useEffect(function () {
-        if ((listAssetDrawings === null || listAssetDrawings === void 0 ? void 0 : listAssetDrawings.length) >= 1) {
-            setSelectedNodes(listAssetDrawings);
-        }
-    }, [listAssetDrawings]);
-    var renderTree = function (nodes) { return (
-    /* @ts-ignore */
-    React__default.createElement(StyledTreeItem, { isChecked: selectedNodes.includes(nodes.id), key: nodes.id, nodeId: nodes.id.toString(), label: React__default.createElement("div", { className: classes.treeLabelRoot },
-            nodes.isCode === true && (React__default.createElement(Code, { className: classes.treeLabelIcon, htmlColor: "#1ABC9C" })),
-            nodes.isCode === false && (React__default.createElement(FolderIcon, { className: classes.treeLabelIcon, htmlColor: "#F1C40F" })),
-            React__default.createElement(Typography, { variant: "body2", className: [
-                    classes.treeLabelText,
-                    nodes.isActive ? "" : classes.treeLabelInactive,
-                ].join(" ") },
+    var renderTree = function (nodes) { return (React__default.createElement(StyledTreeItem, { isChecked: selectedNodes.includes(nodes.id), key: nodes.id, nodeId: nodes.id.toString(), label: React__default.createElement("div", { className: classes.treeLabelRoot },
+            nodes.isCode === true && (React__default.createElement(Code, { className: classes.treLabelIcon, htmlColor: "#1ABC9C" })),
+            nodes.isCode === false && (React__default.createElement(FolderIcon, { className: classes.treLabelIcon, htmlColor: "#F1C40F" })),
+            React__default.createElement(Typography, { variant: "body2", className: "".concat(classes.treeLabelText, " ").concat(!nodes.isActive ? classes.treeLabelInactive : '') },
                 React__default.createElement("span", null,
                     nodes.isCode && (React__default.createElement("i", { className: "fas fa-square mr-2", style: { color: nodes.delayCategoryColor || "#FFFFFF" } })),
                     nodes.name)),
             multipleSelectNodes &&
                 React__default.createElement(Checkbox, { className: classes.smallCheckbox, size: "small", color: "primary", checked: selectedNodes.includes(nodes.id), onChange: function () {
                         handleCheckboxChange(nodes);
-                    }, onClick: handleCheckboxClick })), className: "delay-item-node", id: nodes.id, "data-isbranch": !nodes.isCode }, Array.isArray(nodes.children)
+                    }, onClick: handleCheckboxClick })), className: "delay-item-node", id: nodes.id.toString(), "data-isbranch": !nodes.isCode }, Array.isArray(nodes.children)
         ? nodes.children.map(function (node) { return renderTree(node); })
         : null)); };
-    return (React__default.createElement(Dialog, __assign({ onClose: function (event, reason) { return onHide(false); }, "aria-label": title, maxWidth: "sm", TransitionProps: { onEntering: handleEntering }, "aria-labelledby": "confirmation-dialog-title", open: open }, other, { onKeyDown: handleKeyDown }),
+    return (React__default.createElement(Dialog, __assign({ onClose: onHide ? function () { return onHide(false); } : function () { return null; }, "aria-label": title, maxWidth: "sm", TransitionProps: { onEntering: handleEntering }, "aria-labelledby": "confirmation-dialog-title", open: open }, other, { onKeyDown: handleKeyDown }),
         React__default.createElement(DialogTitle$1, { id: "confirmation-dialog-title" }, title),
         isLoading
             ?
@@ -509,7 +531,7 @@ var ModalTreeFilterControl = function (props) {
                 React__default.createElement(TreeView, { className: classes.root, defaultCollapseIcon: React__default.createElement(MinusSquare, null), defaultExpandIcon: React__default.createElement(PlusSquare, null), ref: treeRef, selected: value === undefined ? "" : value.toString(), expanded: expanded, onNodeSelect: handleChange, onNodeToggle: handleToogle }, data && data.id !== undefined && renderTree(data)))),
         React__default.createElement(DialogActions$1, null,
             React__default.createElement(Button, { autoFocus: true, onClick: handleCancel, color: "primary" }, "Cancel"),
-            React__default.createElement(Button, { onClick: handleOk, color: "primary" }, "Ok"))));
+            React__default.createElement(Button, { onClick: handleOk, color: "primary" }, "SAVE"))));
 };
 
 var useStyles$t = makeStyles(function (theme) { return ({
@@ -1248,7 +1270,7 @@ var useJobsTableData = function (_a) {
             headerName: "Start Time",
             valueFormatter: function (_a) {
                 var value = _a.value;
-                return value === null ? "NULL" : moment(value).format("DD/MM/YYYY HH:mm");
+                return value === null ? "NULL" : moment$2(value).format("DD/MM/YYYY HH:mm");
             },
             flex: 1
         },
@@ -1259,7 +1281,7 @@ var useJobsTableData = function (_a) {
             headerName: "Next Execution",
             valueFormatter: function (_a) {
                 var value = _a.value;
-                return value === null ? "NULL" : moment(value).format("DD/MM/YYYY HH:mm");
+                return value === null ? "NULL" : moment$2(value).format("DD/MM/YYYY HH:mm");
             },
             flex: 1
         },
@@ -1270,7 +1292,7 @@ var useJobsTableData = function (_a) {
             headerName: "Started",
             valueFormatter: function (_a) {
                 var value = _a.value;
-                return value === null ? "NULL" : moment(value).format("DD/MM/YYYY HH:mm");
+                return value === null ? "NULL" : moment$2(value).format("DD/MM/YYYY HH:mm");
             },
             flex: 1
         },
@@ -1281,7 +1303,7 @@ var useJobsTableData = function (_a) {
             headerName: "Last Seen",
             valueFormatter: function (_a) {
                 var value = _a.value;
-                return value === null ? "NULL" : moment(value).format("DD/MM/YYYY HH:mm");
+                return value === null ? "NULL" : moment$2(value).format("DD/MM/YYYY HH:mm");
             },
             flex: 2
         },
@@ -1623,7 +1645,8 @@ var TableJobs = function () {
                 name: "Enable",
                 action: function () {
                     setRowSelected(rowSelectedInGrid);
-                }
+                },
+                icon: '<i class="fas fa-arrow-up"></i>'
             });
         }
         if (rowSelectedInGrid) {
@@ -1631,7 +1654,8 @@ var TableJobs = function () {
                 name: "Disable",
                 action: function () {
                     setRowSelected(rowSelectedInGrid);
-                }
+                },
+                icon: '<i class="fas fa-arrow-down"></i>'
             });
         }
         if (rowSelectedInGrid) {
@@ -1639,12 +1663,14 @@ var TableJobs = function () {
                 name: "Reset",
                 action: function () {
                     setRowSelected(rowSelectedInGrid);
-                }
+                },
+                icon: ' <i class="fas fa-undo"></i>'
             });
         }
         result.push({
             name: "Refresh",
-            action: function () { return getJobsFromAPI(); }
+            action: function () { return getJobsFromAPI(); },
+            icon: '<i class="fas fa-sync-alt"></i>'
         });
         return result;
     }, [rows, gridApi]);
@@ -1726,8 +1752,8 @@ var JobsPage = function (props) {
 var LogsInitialState = {
     logs: [],
     searchData: {
-        Start: moment().add(-5, "days").hour(0).minute(0).second(0).toDate(),
-        End: moment().hour(23).minute(59).second(59).toDate(),
+        Start: moment$2().add(-5, "days").hour(0).minute(0).second(0).toDate(),
+        End: moment$2().hour(23).minute(59).second(59).toDate(),
         Search: "",
         LogTypeCode: "A"
     }
@@ -1763,8 +1789,8 @@ var LogsReducer = createSlice({
         resetFilters: function (state, _a) {
             _a.payload;
             state.searchData = {
-                Start: moment().add(-5, "days").hour(0).minute(0).second(0).toDate(),
-                End: moment().hour(23).minute(59).second(59).toDate(),
+                Start: moment$2().add(-5, "days").hour(0).minute(0).second(0).toDate(),
+                End: moment$2().hour(23).minute(59).second(59).toDate(),
                 Search: "",
                 LogTypeCode: "A"
             };
@@ -2193,7 +2219,8 @@ var TableLogs = function () {
                 action: function () {
                     setSelectedLog(data);
                     setShowLogModal(true);
-                }
+                },
+                icon: '<i class="fas fa-clipboard-list"></i>'
             });
         }
         if (data) {
@@ -2201,7 +2228,8 @@ var TableLogs = function () {
                 name: "Reset Filters",
                 action: function () {
                     handleResetButtonClick();
-                }
+                },
+                icon: '<i class="fas fa-sync-alt"></i>'
             });
         }
         return result;
@@ -2629,7 +2657,7 @@ var useTableData$2 = function (_a) {
                         React__default.createElement(Button, { onClick: function () {
                                 (function () { return __awaiter(void 0, void 0, void 0, function () {
                                     return __generator(this, function (_a) {
-                                        setProfileForEdit(params.data);
+                                        setProfileForEdit(params === null || params === void 0 ? void 0 : params.data);
                                         setModalProceduresProfile(true);
                                         return [2 /*return*/];
                                     });
@@ -2646,7 +2674,7 @@ var useTableData$2 = function (_a) {
                                 }); })();
                             } },
                             React__default.createElement(DeleteIcon, { color: "secondary" })),
-                        React__default.createElement(Button, { style: {}, onClick: function (e) { return onActionsClick(e, params); } },
+                        React__default.createElement(Button, { style: {}, onClick: function (e) { onActionsClick(e, params); } },
                             React__default.createElement(FormatListBulletedSharpIcon, { style: { height: "auto" }, color: "action" })))));
             },
             headerName: " ",
@@ -3002,16 +3030,18 @@ var TableProfiles = function (_a) {
                 name: "New",
                 action: function () {
                     setModalCreateActive(!modalCreateActive);
-                }
+                },
+                icon: '<i class="fas fa-plus"></i>'
             });
         }
         if (data) {
             result.push({
                 name: "Edit Profile",
                 action: function () {
-                    setProfileForDelete(data);
+                    setProfileForEdit(data);
                     setModalProceduresProfile(true);
-                }
+                },
+                icon: '<i class="fas fa-edit"></i>'
             });
         }
         if (data) {
@@ -3020,7 +3050,8 @@ var TableProfiles = function (_a) {
                 action: function () {
                     setProfileForDelete(data);
                     setModalDeleteProfile(true);
-                }
+                },
+                icon: '<i class="fas fa-trash"></i>'
             });
         }
         var addNewProfile = [];
@@ -3029,7 +3060,8 @@ var TableProfiles = function (_a) {
                 name: "New Profile",
                 action: function () {
                     setModalCreateActive(!modalCreateActive);
-                }
+                },
+                icon: '<i class="fas fa-plus"></i>'
             });
         }
         return data ? result : addNewProfile;
@@ -3072,9 +3104,11 @@ var TableProfiles = function (_a) {
                         margin: "20px 0 10px"
                     } },
                     React.createElement("div", { style: gridStyle, className: "ag-theme-alpine" },
-                        React.createElement(AgGridReact, { rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 38, headerHeight: 32, loadingOverlayComponent: loadingOverlayComponent, animateRows: true, getContextMenuItems: function (e) { return getContextMenuItems(e); }, pagination: true, rowSelection: "single", onRowClicked: function (event) {
+                        React.createElement(AgGridReact, { rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 38, headerHeight: 32, loadingOverlayComponent: loadingOverlayComponent, animateRows: true, getContextMenuItems: function (e) { return getContextMenuItems(e); }, pagination: true, rowSelection: "single", onRowDoubleClicked: function (event) {
                                 setProfileForEdit(event.data);
                                 setModalProceduresProfile(true);
+                            }, onRowClicked: function (event) {
+                                setProfileForEdit(event.data);
                             }, onGridReady: function (params) { return setGridApi(params.api); } }))),
                 React.createElement(Grid, { container: true, justifyContent: "flex-end" },
                     React.createElement(Grid, { item: true, md: 2, xs: 12, className: classes.btnModal },
@@ -3911,7 +3945,7 @@ var useTableData$1 = function (_a) {
             headerName: "Pattern Start",
             valueFormatter: function (_a) {
                 var value = _a.value;
-                return "".concat(moment(value).format("L"), ", ").concat(moment(value).format("LTS"));
+                return "".concat(moment$2(value).format("L"), ", ").concat(moment$2(value).format("LTS"));
             },
             minWidth: 180,
             flex: 4
@@ -4070,7 +4104,8 @@ var TableShiftsCrews = function (_a) {
                 name: "New",
                 action: function () {
                     setOpenModalNew(!openModalNew);
-                }
+                },
+                icon: '<i class="fas fa-plus"></i>'
             });
         }
         if (data) {
@@ -4079,7 +4114,8 @@ var TableShiftsCrews = function (_a) {
                 action: function () {
                     setShiftTableData(data);
                     setOpenModalEditShift(true);
-                }
+                },
+                icon: '<i class="fas fa-edit"></i>'
             });
         }
         if (data) {
@@ -4088,19 +4124,21 @@ var TableShiftsCrews = function (_a) {
                 action: function () {
                     setShiftTableData(data);
                     setOpenModalDeleteShift(true);
-                }
+                },
+                icon: '<i class="fas fa-trash"></i>'
             });
         }
-        var addNewDocument = [];
+        var addNewShift = [];
         if (!data) {
-            addNewDocument.push({
-                name: "New Document",
+            addNewShift.push({
+                name: "New Shift",
                 action: function () {
                     setOpenModalNew(!openModalNew);
-                }
+                },
+                icon: '<i class="fas fa-plus"></i>'
             });
         }
-        return data ? result : addNewDocument;
+        return data ? result : addNewShift;
     }, [rows]);
     return (React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", className: classes.root },
         React.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" } },
@@ -4707,6 +4745,65 @@ var TransformAssetModelData = function (node) {
     return model;
 };
 
+var getUser = function (UserId, UserName) { 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: "UserId", value: UserId });
+                parameters.push({ name: "UserName", value: UserName });
+                return [4 /*yield*/, apiService.callV2("[SEC].[GetUser]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+var getAssets = function () { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                return [4 /*yield*/, apiService.callV2("[MES].[GetAssets]", [])];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+var getUTLSettings = function () { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                return [4 /*yield*/, apiService.callV2("[UTL].[GetSettings]", [])];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+var upsertDefaultAreaId = function (UserId, DefaultAreaId) { 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: "UserId", value: UserId });
+                parameters.push({ name: "DefaultAssetId", value: DefaultAreaId });
+                return [4 /*yield*/, apiService.callV2("[SEC].[UpsertDefaultAssetId]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+
 var useSearchAssets$1 = function (_a) {
     var setSearchError = _a.setSearchError, setAllAssetLoading = _a.setAllAssetLoading;
     var _b = useAssetContext().actions, setAllAssets = _b.setAllAssets, setAreasList = _b.setAreasList;
@@ -5331,16 +5428,31 @@ var EditAssetDialog = function (_a) {
 var useStyles$7 = makeStyles$1(function (theme) { return ({
     root: {},
     contextMenu: {
-        fontSize: "14px",
-        backgroundColor: "#fff",
-        borderRadius: "2px",
-        padding: "5px 0 5px 0",
-        width: "150px",
+        backgroundColor: "#F8F8F8",
+        borderRadius: "4px",
+        padding: "0",
         height: "auto",
+        width: "170px",
         margin: "0",
         position: "fixed",
         listStyle: "none",
-        boxShadow: "0 0 20px 0 #ccc"
+        boxShadow: "0 4px 8px rgba(0, 0, 0, 0.15)",
+        zIndex: 1000
+    },
+    menuItem: {
+        padding: "6px 12px 6px 10px",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        backgroundColor: "#F8F8F8",
+        fontSize: "12px",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        "&:last-child": {
+            borderBottom: "none"
+        },
+        "&:hover": {
+            backgroundColor: "#d4edff"
+        }
     },
     storyRoot: {
         display: "grid",
@@ -5531,13 +5643,38 @@ var AssetViewComponent = function () {
                                 } }))),
                     React__default.createElement(Snackbar$1, { open: updatedSuccessfullyMessage, autoHideDuration: 2500, onClose: handleClose },
                         React__default.createElement(Alert$3, { severity: "success", onClose: handleClose }, "Asset updated successfully"))),
-                showContextMenu && !isDoubleClick ? (React__default.createElement("ul", { className: classes.contextMenu, style: { top: y, left: x } },
-                    React__default.createElement(MenuItem$1, { onClick: function () { return setShowViewerAssetDialog(true); } }, "View Asset"),
-                    React__default.createElement(MenuItem$1, { onClick: function () { return setShowEditAssetDialog(true); } }, "Edit Asset"),
-                    React__default.createElement(MenuItem$1, { onClick: function () { return setShowCreateNewAssetDialog(true); } }, "Create Asset"),
-                    (assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.IsBranch) === false && (React__default.createElement(MenuItem$1, { onClick: function () { return setShowRemoveAssetDialog(true); } }, "Remove Asset")))) : (""),
+                showContextMenu && !isDoubleClick ? (React__default.createElement("ul", { className: classes.contextMenu, style: { top: y, left: x, padding: "6px 0" } },
+                    React__default.createElement(MenuItem$1, { className: classes.menuItem, onClick: function () { return setShowViewerAssetDialog(true); } },
+                        React__default.createElement(Grid$1, { container: true, style: { alignItems: "center" } },
+                            React__default.createElement(Grid$1, { item: true, md: 2, xs: 3 },
+                                React__default.createElement(FindInPageIcon, { style: { width: 18 } })),
+                            React__default.createElement(Grid$1, { item: true, md: 9, xs: 9 },
+                                React__default.createElement("div", { style: { marginLeft: 5 } }, "View Asset")))),
+                    React__default.createElement(MenuItem$1, { className: classes.menuItem, onClick: function () { return setShowEditAssetDialog(true); } },
+                        React__default.createElement(Grid$1, { container: true, style: { alignItems: "center" } },
+                            React__default.createElement(Grid$1, { item: true, md: 2, xs: 3 },
+                                React__default.createElement(EditIcon, { style: { width: 18 } })),
+                            React__default.createElement(Grid$1, { item: true, md: 9, xs: 9 },
+                                React__default.createElement("div", { style: { marginLeft: 5 } }, "Edit Asset")))),
+                    React__default.createElement(MenuItem$1, { className: classes.menuItem, onClick: function () { return setShowCreateNewAssetDialog(true); } },
+                        React__default.createElement(Grid$1, { container: true, style: { alignItems: "center" } },
+                            React__default.createElement(Grid$1, { item: true, md: 2, xs: 3 },
+                                React__default.createElement(AddBoxIcon, { style: { width: 18 } })),
+                            React__default.createElement(Grid$1, { item: true, md: 9, xs: 9 },
+                                React__default.createElement("div", { style: { marginLeft: 5 } }, "Create Asset")))),
+                    (assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.IsBranch) === false && (React__default.createElement(MenuItem$1, { className: classes.menuItem, onClick: function () { return setShowRemoveAssetDialog(true); } },
+                        React__default.createElement(Grid$1, { container: true, style: { alignItems: "center" } },
+                            React__default.createElement(Grid$1, { item: true, md: 2, xs: 3 },
+                                React__default.createElement(DeleteIcon, { style: { width: 18 } })),
+                            React__default.createElement(Grid$1, { item: true, md: 9, xs: 9 },
+                                React__default.createElement("div", { style: { marginLeft: 5 } }, "Remove Asset"))))))) : (""),
                 showCreateNewContextMenu ? (React__default.createElement("ul", { className: classes.contextMenu, style: { top: y, left: x } },
-                    React__default.createElement(MenuItem$1, { onClick: function () { return setShowCreateNewAssetDialog(true); } }, "Create Asset"))) : (""))),
+                    React__default.createElement(MenuItem$1, { className: classes.menuItem, onClick: function () { return setShowCreateNewAssetDialog(true); } },
+                        React__default.createElement(Grid$1, { container: true, style: { alignItems: "center" } },
+                            React__default.createElement(Grid$1, { item: true, md: 2, xs: 3 },
+                                React__default.createElement(AddBoxIcon, { style: { width: 18 } })),
+                            React__default.createElement(Grid$1, { item: true, md: 9, xs: 9 },
+                                React__default.createElement("div", { style: { marginLeft: 5 } }, "Create Asset")))))) : (""))),
         React__default.createElement(ErrorModal, { error: errorUpdate, onHide: function () { return setErrorUpdate(""); } }),
         React__default.createElement(ErrorModal, { error: searchError, onHide: function () { return setSearchError(""); } })));
 };
@@ -6545,10 +6682,11 @@ var TableUsers = function (_a) {
         var result = [];
         if (data) {
             result.push({
-                name: "New",
+                name: "New User",
                 action: function () {
                     setOpenModalCreate(!openModalCreate);
-                }
+                },
+                icon: '<i class="fas fa-plus"></i>'
             });
         }
         if (data) {
@@ -6557,7 +6695,8 @@ var TableUsers = function (_a) {
                 action: function () {
                     setUserIdForEdit(data === null || data === void 0 ? void 0 : data.UserId);
                     setOpenModalEditDataUser(true);
-                }
+                },
+                icon: '<i class="fas fa-edit"></i>'
             });
         }
         if (data) {
@@ -6566,7 +6705,8 @@ var TableUsers = function (_a) {
                 action: function () {
                     setUserIdForDelete(data === null || data === void 0 ? void 0 : data.UserId);
                     setOpenModalDeleteUser(true);
-                }
+                },
+                icon: '<i class="fas fa-trash"></i>'
             });
         }
         if (data) {
@@ -6575,7 +6715,8 @@ var TableUsers = function (_a) {
                 action: function () {
                     setUserForPasswordChange(data === null || data === void 0 ? void 0 : data.UserId);
                     setOpenModalChangePasswordd(true);
-                }
+                },
+                icon: '<i class="fas fa-lock"></i>'
             });
         }
         var addNewUser = [];
@@ -6584,7 +6725,8 @@ var TableUsers = function (_a) {
                 name: "New User",
                 action: function () {
                     setOpenModalCreate(!openModalCreate);
-                }
+                },
+                icon: '<i class="fas fa-plus"></i>'
             });
         }
         return data ? result : addNewUser;
@@ -6964,7 +7106,7 @@ var MESApiService = /** @class */ (function () {
                 data.dataBaseName = database;
                 data.parameters = formattedParameters;
                 Date.prototype.toJSON = function () {
-                    return moment(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$2(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/Execute", {
@@ -7023,7 +7165,7 @@ var MESApiService = /** @class */ (function () {
                         data.dataBaseName = database;
                         data.parameters = formattedParameters;
                         Date.prototype.toJSON = function () {
-                            return moment(this).format("YYYY-MM-DDTHH:mm:ss");
+                            return moment$2(this).format("YYYY-MM-DDTHH:mm:ss");
                         }; // eslint-disable-line
                         _a.label = 1;
                     case 1:
@@ -7084,7 +7226,7 @@ var MESApiService = /** @class */ (function () {
                 data.dataBaseName = database;
                 data.parameters = formattedParameters;
                 Date.prototype.toJSON = function () {
-                    return moment(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$2(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/ExecuteJSON", {
@@ -7139,7 +7281,7 @@ var MESApiService = /** @class */ (function () {
                     formattedParameters.push(formattedParameter);
                 });
                 Date.prototype.toJSON = function () {
-                    return moment(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$2(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 files.forEach(function (element) {
@@ -7204,7 +7346,7 @@ var MESApiService = /** @class */ (function () {
                 data.parameters = formattedParameters;
                 data.fileName = fileName || "Default.xlsx";
                 Date.prototype.toJSON = function () {
-                    return moment(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$2(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/Export", {
@@ -7280,7 +7422,7 @@ var MESApiService = /** @class */ (function () {
                 data.parameters = formattedParameters;
                 data.fileName = fileName || "Default.xlsx";
                 Date.prototype.toJSON = function () {
-                    return moment(this).format("YYYY-MM-DDTHH:mm:ss");
+                    return moment$2(this).format("YYYY-MM-DDTHH:mm:ss");
                 }; // eslint-disable-line
                 isError = { ok: true };
                 return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + "/ExportExcel", {
@@ -7367,7 +7509,7 @@ var TimeService = /** @class */ (function () {
         else {
             this.timeZone = timeZone;
         }
-        moment$1.tz.setDefault(this.timeZone);
+        moment$3.tz.setDefault(this.timeZone);
     };
     TimeService.prototype.toUTC = function (datetime, format$1) {
         try {
@@ -7406,70 +7548,277 @@ var TimeService = /** @class */ (function () {
     };
     return TimeService;
 }());
-var getMomentTz = function () { return moment$1; };
+var getMomentTz = function () { return moment$3; };
 var dxtServerTimeZone = function () { return TimeService.getInstance().getServerTimeZone; };
 var dxtToUTC = TimeService.getInstance().toUTC;
 var dxtToLocalServerTime = TimeService.getInstance().toLocalServerTime;
 
-var getUser = function (UserId, UserName) { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, parameters, resp;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                apiService = new MESApiService();
-                parameters = [];
-                parameters.push({ name: "UserId", value: UserId });
-                parameters.push({ name: "UserName", value: UserName });
-                return [4 /*yield*/, apiService.callV2("[SEC].[GetUser]", parameters)];
-            case 1:
-                resp = _a.sent();
-                return [2 /*return*/, resp];
-        }
-    });
-}); };
-var getAssets = function () { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, resp;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                apiService = new MESApiService();
-                return [4 /*yield*/, apiService.callV2("[MES].[GetAssets]", [])];
-            case 1:
-                resp = _a.sent();
-                return [2 /*return*/, resp];
-        }
-    });
-}); };
-var getUTLSettings = function () { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, resp;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
+var getShiftByParameters = function (parameters) { return __awaiter(void 0, void 0, void 0, function () {
+    var utcString, sqlParameters, apiService, resp, e_1;
+    var _a;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
             case 0:
-                apiService = new MESApiService();
-                return [4 /*yield*/, apiService.callV2("[UTL].[GetSettings]", [])];
+                utcString = (_a = parameters.productionDate) === null || _a === void 0 ? void 0 : _a.toISOString();
+                _b.label = 1;
             case 1:
-                resp = _a.sent();
-                return [2 /*return*/, resp];
-        }
-    });
-}); };
-var upsertDefaultAreaId = function (UserId, DefaultAreaId) { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, parameters, resp;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
+                _b.trys.push([1, 3, , 4]);
+                sqlParameters = [];
+                sqlParameters.push({
+                    name: "@ShiftId",
+                    value: parameters.shiftId === 0 ? null : parameters.shiftId
+                });
+                sqlParameters.push({
+                    name: "@ProductionDate",
+                    value: utcString
+                });
                 apiService = new MESApiService();
-                parameters = [];
-                parameters.push({ name: "UserId", value: UserId });
-                parameters.push({ name: "DefaultAssetId", value: DefaultAreaId });
-                return [4 /*yield*/, apiService.callV2("[SEC].[UpsertDefaultAssetId]", parameters)];
-            case 1:
-                resp = _a.sent();
-                return [2 /*return*/, resp];
+                return [4 /*yield*/, apiService.callV2("[MES].[GetShiftByParameters]", sqlParameters)];
+            case 2:
+                resp = _b.sent();
+                if (resp.ok) {
+                    return [2 /*return*/, {
+                            ok: true,
+                            data: get(resp.data, 'tables[0].rows[0]', {})
+                        }];
+                }
+                else {
+                    return [2 /*return*/, {
+                            ok: false,
+                            message: resp.message
+                        }];
+                }
+            case 3:
+                e_1 = _b.sent();
+                return [2 /*return*/, { ok: false, message: e_1.toString() }];
+            case 4: return [2 /*return*/];
         }
     });
 }); };
 
+var moment$1 = getMomentTz();
+var useShiftNavigatorManager = function () {
+    var _a = useState(null), shiftInfo = _a[0], setShiftInfo = _a[1];
+    var _b = useState(false); _b[0]; var setIsShiftInfoLoading = _b[1];
+    var _c = useState(''); _c[0]; var setError = _c[1];
+    var moveShift = function (direction) { return __awaiter(void 0, void 0, void 0, function () {
+        var shiftId, resp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (isNil$1(shiftInfo)) {
+                        return [2 /*return*/];
+                    }
+                    setIsShiftInfoLoading(true);
+                    shiftId = null;
+                    if (direction === "Next" && shiftInfo.NextShiftId !== null) {
+                        shiftId = shiftInfo.NextShiftId;
+                    }
+                    else if (direction === "Previous" && shiftInfo.PreviousShiftId !== null) {
+                        shiftId = shiftInfo.PreviousShiftId;
+                    }
+                    else if (direction === "Last" && shiftInfo.LastShiftId !== null) {
+                        shiftId = shiftInfo.LastShiftId;
+                    }
+                    if (!shiftId) return [3 /*break*/, 2];
+                    return [4 /*yield*/, getShiftByParameters({
+                            productionDate: null,
+                            shiftId: shiftId
+                        })];
+                case 1:
+                    resp = _a.sent();
+                    if (resp.ok) {
+                        setShiftInfo(__assign(__assign({}, resp.data), { CurrentProductionDate: moment$1.utc(resp.data.CurrentProductionDate).toDate(), CurrentStart: moment$1.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$1.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$1.utc(resp.data.PreviousProductionDate).toDate(), PreviousStart: moment$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() }));
+                    }
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); };
+    var getShiftDataFromAPI = function (productionDate, shiftId) { return __awaiter(void 0, void 0, void 0, function () {
+        var resp, e_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsShiftInfoLoading(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, getShiftByParameters({
+                            productionDate: productionDate,
+                            shiftId: shiftId
+                        })];
+                case 2:
+                    resp = _a.sent();
+                    if (resp.ok) {
+                        setShiftInfo(__assign(__assign({}, resp.data), { CurrentProductionDate: moment$1.utc(resp.data.CurrentProductionDate).toDate(), CurrentStart: moment$1.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$1.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$1.utc(resp.data.PreviousProductionDate).toDate(), PreviousStart: moment$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() }));
+                    }
+                    return [3 /*break*/, 4];
+                case 3:
+                    e_1 = _a.sent();
+                    setError(e_1.toString());
+                    return [3 /*break*/, 4];
+                case 4:
+                    setIsShiftInfoLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var initShiftNavigator = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, getShiftByParameters({
+                        productionDate: new Date(),
+                        shiftId: 0
+                    })];
+                case 1:
+                    resp = _a.sent();
+                    if (resp.ok) {
+                        setShiftInfo(__assign(__assign({}, resp.data), { CurrentProductionDate: moment$1.utc(resp.data.CurrentProductionDate).toDate(), CurrentStart: moment$1.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$1.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$1.utc(resp.data.PreviousProductionDate).toDate(), PreviousStart: moment$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() }));
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return {
+        shiftInfo: shiftInfo,
+        moveShift: moveShift,
+        getShiftDataFromAPI: getShiftDataFromAPI,
+        initShiftNavigator: initShiftNavigator
+    };
+};
+
+var ShiftNavigatorContext = createContext({
+    getShiftDataFromAPI: function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/];
+        });
+    }); },
+    initShiftNavigator: function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/];
+        });
+    }); },
+    moveShift: function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/];
+        });
+    }); },
+    shiftInfo: {
+        CurrentShiftId: 0,
+        CurrentProductionDate: new Date(),
+        CurrentProductionShift: 0,
+        CurrentShift: '',
+        CurrentCrew: '',
+        CurrentStart: new Date(),
+        CurrentEnd: new Date(),
+        PreviousShiftId: 0,
+        PreviousProductionDate: new Date(),
+        PreviousProductionShift: 0,
+        PreviousShift: '',
+        PreviousCrew: '',
+        PreviousStart: new Date(),
+        PreviousEnd: new Date(),
+        NextShiftId: null,
+        NextProductionDate: null,
+        NextProductionShift: null,
+        NextShift: null,
+        NextCrew: null,
+        NextStart: null,
+        NextEnd: null,
+        LastShiftId: 0,
+        LastProductionDate: new Date(),
+        LastProductionShift: 0,
+        LastShift: '',
+        LastCrew: '',
+        LastStart: new Date(),
+        LastEnd: new Date()
+    }
+});
+var useShiftNavigator = function () { return useContext(ShiftNavigatorContext); };
+var ShiftNavigatorProvider = function (_a) {
+    var children = _a.children;
+    var shiftNavigatorManager = useShiftNavigatorManager();
+    return (React__default.createElement(ShiftNavigatorContext.Provider, { value: shiftNavigatorManager }, children));
+};
+
+var moment = getMomentTz();
+var ShiftDayNavigatorControl = function (props) {
+    var _a = useShiftNavigator(), shiftInfo = _a.shiftInfo, initShiftNavigator = _a.initShiftNavigator, moveShift = _a.moveShift, getShiftDataFromAPI = _a.getShiftDataFromAPI;
+    var shiftId = useParams().shiftId;
+    var firstRender = useRef(true);
+    var updateHistory = function (shiftId) {
+        var paths = location.pathname.split("/");
+        window.history.replaceState(null, "", "/".concat(paths[1]) + "/".concat(shiftId));
+    };
+    if (shiftInfo !== null && shiftInfo.CurrentShiftId !== null) {
+        updateHistory(shiftInfo.CurrentShiftId.toString());
+    }
+    useEffect(function () {
+        if (firstRender.current) {
+            firstRender.current = false;
+            if (props.useRouter && shiftId) {
+                getShiftDataFromAPI(null, Number(shiftId))
+                    .then(function () {
+                    props.onShiftChange && props.onShiftChange(Number(shiftId));
+                });
+            }
+            else {
+                initShiftNavigator()
+                    .then(function () {
+                    props.onShiftChange && props.onShiftChange(Number(shiftId));
+                });
+            }
+        }
+    }, []);
+    return (React__default.createElement(Paper, null,
+        React__default.createElement(Grid, { item: true, container: true, style: { minWidth: '0%', margin: '1rem' }, direction: 'row', justifyContent: 'flex-start', alignItems: 'center', spacing: 1 },
+            React__default.createElement(Grid, { item: true },
+                React__default.createElement(Tooltip, { title: 'Previous Shift' },
+                    React__default.createElement(IconButton$1, { "aria-label": "Previous Shift", color: 'primary', disabled: !(shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.PreviousShiftId), onClick: function () {
+                            moveShift("Previous").then(function () {
+                            });
+                        }, size: "small" },
+                        React__default.createElement(ArrowBackRounded, null)))),
+            React__default.createElement(Grid, { item: true },
+                React__default.createElement(DatePicker, { label: "Current Date", timezone: TimeService.getInstance().getServerTimeZone(), format: "MM/DD/YYYY", closeOnSelect: true, formatDensity: 'dense', value: moment(shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.CurrentProductionDate), onChange: function (date) {
+                        if (date) {
+                            getShiftDataFromAPI(date.toDate(), 0)
+                                .then(function () {
+                            });
+                        }
+                    }, slotProps: {
+                        textField: {
+                            variant: "outlined",
+                            size: "small",
+                            inputProps: {
+                                style: {
+                                    fontSize: "small",
+                                    minWidth: '110px',
+                                    maxWidth: '110px'
+                                }
+                            }
+                        }
+                    } })),
+            React__default.createElement(Grid, { item: true, style: { maxWidth: '100px' } },
+                React__default.createElement(TextField, { label: 'Shift - Crew', value: "".concat((shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.CurrentShift) || "", " - ").concat((shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.CurrentCrew) || ""), placeholder: 'Shift', "aria-readonly": true, variant: "outlined", size: "small" })),
+            React__default.createElement(Grid, { item: true },
+                React__default.createElement(Tooltip, { title: 'Next Shift' },
+                    React__default.createElement(IconButton$1, { "aria-label": "next", color: 'primary', disabled: !(shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.NextShiftId), onClick: function () {
+                            moveShift("Next").then(function () {
+                            });
+                        }, size: "small" },
+                        React__default.createElement(ArrowForwardRounded, null)))),
+            React__default.createElement(Grid, { item: true },
+                React__default.createElement(Tooltip, { title: 'Last Shift' },
+                    React__default.createElement(IconButton$1, { "aria-label": "delete", color: 'primary', disabled: !(shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.LastShiftId), onClick: function () {
+                            moveShift("Last").then(function () {
+                            });
+                        }, size: "small" },
+                        React__default.createElement(SkipNext, null)))))));
+};
+
 function ChangePassword(props) {
     var onClose = props.onClose, userId = props.userId, open = props.open;
     //states
@@ -8217,12 +8566,12 @@ function Logout() {
         React__default.createElement("div", null, "logging out!!!")));
 }
 
-var RouterContext = React__default.createContext(function () { return React__default.createElement(React__default.Fragment, null); });
-var ConfigurationContext = React__default.createContext([
+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 = React__default.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;
@@ -8369,7 +8718,7 @@ function Header$1(_a) {
                 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(Tooltip$1, { 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'))),
@@ -8464,7 +8813,7 @@ var Home = function () { return (React__default.createElement("div", { style: {
     } })); };
 
 var TrendingsInitialState = {
-    timeScopeStart: moment(new Date()).subtract(1, "days").toDate(),
+    timeScopeStart: moment$2(new Date()).subtract(1, "days").toDate(),
     timeScopeEnd: new Date(),
     scope: "1 day",
     graphPan: false,
@@ -8502,32 +8851,32 @@ var TrendingsReducer = createSlice({
                 if (payload.scope !== "custom") {
                     switch (payload.scope) {
                         case "10 min":
-                            state.timeScopeStart = moment(state.timeScopeEnd)
+                            state.timeScopeStart = moment$2(state.timeScopeEnd)
                                 .subtract(10, "minutes")
                                 .toDate();
                             break;
                         case "1 hour":
-                            state.timeScopeStart = moment(state.timeScopeEnd)
+                            state.timeScopeStart = moment$2(state.timeScopeEnd)
                                 .subtract(1, "hours")
                                 .toDate();
                             break;
                         case "4 hours":
-                            state.timeScopeStart = moment(state.timeScopeEnd)
+                            state.timeScopeStart = moment$2(state.timeScopeEnd)
                                 .subtract(4, "hours")
                                 .toDate();
                             break;
                         case "12 hours":
-                            state.timeScopeStart = moment(state.timeScopeEnd)
+                            state.timeScopeStart = moment$2(state.timeScopeEnd)
                                 .subtract(12, "hours")
                                 .toDate();
                             break;
                         case "1 day":
-                            state.timeScopeStart = moment(state.timeScopeEnd)
+                            state.timeScopeStart = moment$2(state.timeScopeEnd)
                                 .subtract(1, "days")
                                 .toDate();
                             break;
                         case "10 days":
-                            state.timeScopeStart = moment(state.timeScopeEnd)
+                            state.timeScopeStart = moment$2(state.timeScopeEnd)
                                 .subtract(10, "days")
                                 .toDate();
                             break;
@@ -8554,32 +8903,32 @@ var TrendingsReducer = createSlice({
                 if (state.scope !== "custom") {
                     switch (state.scope) {
                         case "10 min":
-                            state.timeScopeEnd = moment(payload.start)
+                            state.timeScopeEnd = moment$2(payload.start)
                                 .add(10, "minutes")
                                 .toDate();
                             break;
                         case "1 hour":
-                            state.timeScopeEnd = moment(payload.start)
+                            state.timeScopeEnd = moment$2(payload.start)
                                 .add(1, "hours")
                                 .toDate();
                             break;
                         case "4 hours":
-                            state.timeScopeEnd = moment(payload.start)
+                            state.timeScopeEnd = moment$2(payload.start)
                                 .add(4, "hours")
                                 .toDate();
                             break;
                         case "12 hours":
-                            state.timeScopeEnd = moment(payload.start)
+                            state.timeScopeEnd = moment$2(payload.start)
                                 .add(12, "hours")
                                 .toDate();
                             break;
                         case "1 day":
-                            state.timeScopeEnd = moment(payload.start)
+                            state.timeScopeEnd = moment$2(payload.start)
                                 .add(1, "days")
                                 .toDate();
                             break;
                         case "10 days":
-                            state.timeScopeEnd = moment(payload.start)
+                            state.timeScopeEnd = moment$2(payload.start)
                                 .add(10, "days")
                                 .toDate();
                             break;
@@ -8592,32 +8941,32 @@ var TrendingsReducer = createSlice({
                 if (state.scope !== "custom") {
                     switch (state.scope) {
                         case "10 min":
-                            state.timeScopeStart = moment(payload.end)
+                            state.timeScopeStart = moment$2(payload.end)
                                 .subtract(10, "minutes")
                                 .toDate();
                             break;
                         case "1 hour":
-                            state.timeScopeStart = moment(payload.end)
+                            state.timeScopeStart = moment$2(payload.end)
                                 .subtract(1, "hours")
                                 .toDate();
                             break;
                         case "4 hours":
-                            state.timeScopeStart = moment(payload.end)
+                            state.timeScopeStart = moment$2(payload.end)
                                 .subtract(4, "hours")
                                 .toDate();
                             break;
                         case "12 hours":
-                            state.timeScopeStart = moment(payload.end)
+                            state.timeScopeStart = moment$2(payload.end)
                                 .subtract(12, "hours")
                                 .toDate();
                             break;
                         case "1 day":
-                            state.timeScopeStart = moment(payload.end)
+                            state.timeScopeStart = moment$2(payload.end)
                                 .subtract(1, "days")
                                 .toDate();
                             break;
                         case "10 days":
-                            state.timeScopeStart = moment(payload.end)
+                            state.timeScopeStart = moment$2(payload.end)
                                 .subtract(10, "days")
                                 .toDate();
                             break;
@@ -8689,7 +9038,7 @@ const FORMATS = {
   year: 'YYYY'
 };
 
-_adapters._date.override(typeof moment === 'function' ? {
+_adapters._date.override(typeof moment$2 === 'function' ? {
   _id: 'moment', // DEBUG ONLY
 
   formats: function() {
@@ -8698,27 +9047,27 @@ _adapters._date.override(typeof moment === 'function' ? {
 
   parse: function(value, format) {
     if (typeof value === 'string' && typeof format === 'string') {
-      value = moment(value, format);
-    } else if (!(value instanceof moment)) {
-      value = moment(value);
+      value = moment$2(value, format);
+    } else if (!(value instanceof moment$2)) {
+      value = moment$2(value);
     }
     return value.isValid() ? value.valueOf() : null;
   },
 
   format: function(time, format) {
-    return moment(time).format(format);
+    return moment$2(time).format(format);
   },
 
   add: function(time, amount, unit) {
-    return moment(time).add(amount, unit).valueOf();
+    return moment$2(time).add(amount, unit).valueOf();
   },
 
   diff: function(max, min, unit) {
-    return moment(max).diff(moment(min), unit);
+    return moment$2(max).diff(moment$2(min), unit);
   },
 
   startOf: function(time, unit, weekday) {
-    time = moment(time);
+    time = moment$2(time);
     if (unit === 'isoWeek') {
       weekday = Math.trunc(Math.min(Math.max(0, weekday), 6));
       return time.isoWeekday(weekday).startOf('day').valueOf();
@@ -8727,7 +9076,7 @@ _adapters._date.override(typeof moment === 'function' ? {
   },
 
   endOf: function(time, unit) {
-    return moment(time).endOf(unit).valueOf();
+    return moment$2(time).endOf(unit).valueOf();
   }
 } : {});
 
@@ -9334,7 +9683,7 @@ var LoadViewModal = function (_a) {
                                 React__default.createElement("div", { className: classes.iconContainer },
                                     option.IsPublic ? '' :
                                         React__default.createElement(React__default.Fragment, null,
-                                            React__default.createElement(Tooltip, { title: "Private", arrow: true },
+                                            React__default.createElement(Tooltip$1, { title: "Private", arrow: true },
                                                 React__default.createElement(LockIcon, { fontSize: 'small', style: { color: 'black', height: "18px", width: '18px', cursor: 'auto' } }))),
                                     React__default.createElement(IconButton$1, { onClick: function (e) { return handleEditView(option); } },
                                         React__default.createElement(CreateIcon, { fontSize: 'small', color: 'primary', style: { height: "18px", width: '18px', cursor: 'pointer' } })),
@@ -9616,7 +9965,7 @@ var TagFolderCustomNode = function (_a) {
                         backgroundColor: ((_f = node.data) === null || _f === void 0 ? void 0 : _f.TagTypeCode) === 'A' ? "#AD48C4" : "#C46F48",
                         margin: "0 5px"
                     } }, (_g = node.data) === null || _g === void 0 ? void 0 : _g.TagTypeCode)),
-                React__default.createElement(Tooltip, { title: node.data.TagName, placement: "top", arrow: true },
+                React__default.createElement(Tooltip$1, { title: node.data.TagName, placement: "top", arrow: true },
                     React__default.createElement(Typography, { variant: "body2" }, ((_h = node.data) === null || _h === void 0 ? void 0 : _h.Alias) || ((_j = node.data) === null || _j === void 0 ? void 0 : _j.TagName))))));
 };
 
@@ -10423,7 +10772,7 @@ var TableComponent = function (_a) {
                                 React__default.createElement("td", { className: "".concat(classes.visible, " ").concat(classes.checkbox) },
                                     React__default.createElement("input", { type: "checkbox", checked: tag.IsVisible, onChange: function (e) { return handleVisibilityChange(tag.TagId, e.target.checked); } })),
                                 React__default.createElement("td", { className: classes.aliasCol },
-                                    React__default.createElement(Tooltip, { title: tag.TagName, placement: "top", arrow: true, interactive: true, enterDelay: 500 },
+                                    React__default.createElement(Tooltip$1, { title: tag.TagName, placement: "top", arrow: true, interactive: true, enterDelay: 500 },
                                         React__default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
                                             tag.TagType &&
                                                 (React__default.createElement("div", { className: classes.dataType, style: { backgroundColor: tag.TagType === "A" ? "#AD48C4" : "#C46F48" } }, tag.TagType)),
@@ -10639,18 +10988,18 @@ var dateNavigator = function (startDate, endDate, scope, operator, current) {
         }
         else {
             var _a = scope.split(" "), quantity = _a[0], duration = _a[1];
-            newStartDate = moment(newEndDate).subtract(quantity, duration[0]).toDate();
+            newStartDate = moment$2(newEndDate).subtract(quantity, duration[0]).toDate();
         }
     }
     else {
         if (scope === "custom") {
-            var durationInMs = moment(endDate).diff(moment(startDate));
-            newStartDate = moment(startDate)[operator](durationInMs).toDate();
+            var durationInMs = moment$2(endDate).diff(moment$2(startDate));
+            newStartDate = moment$2(startDate)[operator](durationInMs).toDate();
         }
         else {
             var _b = scope.split(" "), quantity = _b[0], duration = _b[1];
-            newStartDate = moment(startDate)[operator](quantity, duration[0]).toDate();
-            newEndDate = moment(endDate)[operator](quantity, duration[0]).toDate();
+            newStartDate = moment$2(startDate)[operator](quantity, duration[0]).toDate();
+            newEndDate = moment$2(endDate)[operator](quantity, duration[0]).toDate();
         }
     }
     return { newStartDate: newStartDate, newEndDate: newEndDate };
@@ -10674,7 +11023,7 @@ var Header = function (_a) {
     var handleDateChange = function (newValue, key) {
         var _a;
         //@ts-ignore
-        actions.setTotalScope((_a = {}, _a[key] = moment(newValue).toDate(), _a));
+        actions.setTotalScope((_a = {}, _a[key] = moment$2(newValue).toDate(), _a));
     };
     var handleChangeScope = function (e) {
         var newScope = e.target.value;
@@ -10710,7 +11059,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$1, { item: true },
-                React__default.createElement(TextField, { type: "datetime-local", className: classes.datetimePicker, label: "Start", variant: "outlined", value: moment(state.timeScopeStart).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "start"); }, InputLabelProps: {
+                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: {
                         shrink: true,
                         style: { marginLeft: "10px" }
                     }, InputProps: {
@@ -10727,7 +11076,7 @@ var Header = function (_a) {
                         React__default.createElement(MenuItem$1, { value: "10 days" }, "10 days"),
                         React__default.createElement(MenuItem$1, { value: "custom" }, "Custom")))),
             React__default.createElement(Grid$1, { item: true },
-                React__default.createElement(TextField, { label: "End", variant: "outlined", className: classes.datetimePicker, type: "datetime-local", value: moment(state.timeScopeEnd).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "end"); }, InputLabelProps: {
+                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: {
                         shrink: true,
                         style: { marginLeft: "10px" }
                     } })),
@@ -11063,7 +11412,7 @@ var TrendingChart = function (_a) {
         React__default.createElement(Line, { ref: chartRef, data: chartData, options: chartOptions, plugins: [verticalLinePlugin, xAxisDatePlugin, yAxisPlugin] })));
 };
 
-Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip$1, Legend, TimeScale, zoomPlugin);
+Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip$2, Legend, TimeScale, zoomPlugin);
 var Trending = function (_a) {
     _a.title; var getTagsFromAPI = _a.getTagsFromAPI;
     var _b = useTrendingContext(), state = _b.state, _c = _b.state, viewTags = _c.viewTags, shouldRefetchSeries = _c.shouldRefetchSeries;
@@ -11303,20 +11652,24 @@ var Navigation = function (_a) {
 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  ";
 n(css,{});
 
+var timezone = TimeService.getInstance().getServerTimeZone();
+moment$3.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(UserProvider, null,
-            React__default.createElement(AssetProvider, null,
-                React__default.createElement(UTLSettingsProvider, null,
-                    React__default.createElement(RouterContext.Provider, { value: routes },
-                        React__default.createElement(NavbarContext.Provider, { value: navbar },
-                            React__default.createElement(ConfigurationContext.Provider, { value: configurations },
-                                React__default.createElement(BrowserRouter, { basename: base },
-                                    React__default.createElement(Routes, null,
-                                        React__default.createElement(Route, { path: "/logout", element: React__default.createElement(Logout, null) })),
-                                    React__default.createElement(Navigation, { showAreaSelector: showAreaSelector, showTrendingsIcon: showTrendingsIcon, navbarTitle: navbarTitle }))))))))));
+        React__default.createElement(LocalizationProvider, { dateAdapter: AdapterMoment, dateLibInstance: moment$3 },
+            React__default.createElement(UserProvider, null,
+                React__default.createElement(AssetProvider, null,
+                    React__default.createElement(UTLSettingsProvider, null,
+                        React__default.createElement(RouterContext.Provider, { value: routes },
+                            React__default.createElement(NavbarContext.Provider, { value: navbar },
+                                React__default.createElement(ConfigurationContext.Provider, { value: configurations },
+                                    React__default.createElement(ShiftNavigatorProvider, null,
+                                        React__default.createElement(BrowserRouter, { basename: base },
+                                            React__default.createElement(Routes, null,
+                                                React__default.createElement(Route, { path: "/logout", element: React__default.createElement(Logout, null) })),
+                                            React__default.createElement(Navigation, { showAreaSelector: showAreaSelector, showTrendingsIcon: showTrendingsIcon, navbarTitle: navbarTitle }))))))))))));
 }
 
 var useDefaultAreaId = function (setError) {
@@ -11458,5 +11811,5 @@ var areaSelector = /*#__PURE__*/Object.freeze({
     AreaSelector: AreaSelector
 });
 
-export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, 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, SimplePasswordControl, SimpleSelectorControl, SimpleTextAreaControl, SimpleTextControl, TimeFormatter, TimeService, TreePickerControl, TrendingsPage, USER_LABELS, UTLSettingsProvider, UploadFileControl, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getError, getMomentTz, getProfiles, getShiftStyle, getTokenFromLS, getUsers, renewToken, setPassword, setProfilesToUser, upsertUser, useAssetContext, useToken, useUTLSettingsContext, useUserContext };
+export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, 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, 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, useShiftNavigator, useShiftNavigatorManager, useToken, useUTLSettingsContext, useUserContext };
 //# sourceMappingURL=index.esm.js.map