@dexteel/mesf-core 5.7.1 → 5.9.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "5.7.1"
+  ".": "5.9.0"
 }

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# Changelog
+
+## [5.9.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v5.8.0...@dexteel/mesf-core-v5.9.0) (2025-08-29)
+
+
+### Features
+
+* **TreePickerControl:** add search functionality with enhanced UX ([#436](https://github.com/dexteel/mesf-core-frontend/issues/436)) ([ae98403](https://github.com/dexteel/mesf-core-frontend/commit/ae9840354e0f56d26c4754e2fefad5ee0fc93e60))
+
+
+### Bug Fixes
+
+* **MESFMain:** add optional theme prop to MESFMain and make login AppBar theme-aware ([#432](https://github.com/dexteel/mesf-core-frontend/issues/432)) ([b736370](https://github.com/dexteel/mesf-core-frontend/commit/b7363700c33bb7049eb98f0023046151aaf50654))
+
+## [5.8.0] - 2025-08-28
+
+
+
+# Changelog
+
+## [5.8.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v5.7.1...@dexteel/mesf-core-v5.8.0) (2025-08-28)
+
+
+### Features
+
+* **Shift navigator control:** Add 'withoutPaper' prop to control the use of Paper in the ShiftDayNavigatorControl component ([#429](https://github.com/dexteel/mesf-core-frontend/issues/429)) ([68c01b0](https://github.com/dexteel/mesf-core-frontend/commit/68c01b0712c3cec65d7673842a67af49735fb483))
+
+## [5.7.1] - 2025-08-25
+
+
+
 # Changelog
 
 ## [5.7.1](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v5.7.0...@dexteel/mesf-core-v5.7.1) (2025-08-25)

package/dist/MESFMain.d.ts

@@ -10,6 +10,7 @@ interface Props {
     showTrendingsIcon?: boolean;
     byPassHeaderRoutes?: string[];
     plantAssetId?: number;
+    theme?: any;
 }
-declare function MESFMain({ authentication, routes, navbar, navbarTitle, configurations, showAreaSelector, showTrendingsIcon, byPassHeaderRoutes, plantAssetId, }: Props): React.JSX.Element;
+declare function MESFMain({ authentication, routes, navbar, navbarTitle, configurations, showAreaSelector, showTrendingsIcon, byPassHeaderRoutes, plantAssetId, theme, }: Props): React.JSX.Element;
 export { MESFMain };

package/dist/controls/filters/TreePickerControl.d.ts

@@ -5,6 +5,7 @@ type TreePickerControlProps = {
     setListAssetDrawings?: Function;
     onSuccess?: (success: boolean) => void;
     showClearButton?: boolean;
+    allowSearch?: boolean;
     [key: string]: any;
 };
 export declare const TreePickerControl: (props: TreePickerControlProps) => React.JSX.Element;

package/dist/controls/filters/dialogFilter.d.ts

@@ -30,6 +30,7 @@ interface ModalTreeFilterControlProps {
     mostUsedCount: number;
     itemsWithParent: String[];
     dialogMaxWidth: "xs" | "sm" | "md" | "lg" | "xl";
+    allowSearch?: boolean;
 }
 declare const ModalTreeFilterControl: React.FC<ModalTreeFilterControlProps>;
 export { ModalTreeFilterControl };

package/dist/controls/shift-navigator/component/shift-navigator.control.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 export type ShiftNavigatorDirection = "Previous" | "Next" | "Last";
-export declare const ShiftDayNavigatorControl: (props: {
+export declare const ShiftDayNavigatorControl: ({ useRouter, onShiftChange, preventInit, withPaper, }: {
     useRouter?: boolean;
     onShiftChange?: (shiftId: number) => void;
     preventInit?: boolean;
+    withPaper?: boolean;
 }) => React.JSX.Element;

package/dist/index.esm.js

@@ -1,11 +1,11 @@
 export { LicenseManager } from 'ag-grid-enterprise';
-import { withStyles, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, createStyles, Grid, Button, alpha, makeStyles, Dialog as Dialog$1, Chip, SvgIcon, Collapse, Typography as Typography$1, Checkbox, TextField, InputAdornment, IconButton as IconButton$1, MenuItem, Box, Card, CardContent, CardActions, Paper, Tooltip, FormControl, InputLabel, Select, ListItemIcon, CircularProgress, Snackbar, FormControlLabel, Switch, DialogContentText, Badge, useTheme, Input, CssBaseline, AppBar, Toolbar, Container, Menu, Hidden, Drawer, List, ListItem, ListItemText, useMediaQuery, Divider, ListSubheader, debounce, createTheme, ThemeProvider } from '@material-ui/core';
+import { withStyles, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, createStyles, Grid, Button, alpha, makeStyles, Dialog as Dialog$1, TextField, Paper, List, ListItem, ListItemIcon, ListItemText, Chip, SvgIcon, Collapse, Typography as Typography$1, Checkbox, InputAdornment, IconButton as IconButton$1, MenuItem, Box, Card, CardContent, CardActions, Tooltip, FormControl, InputLabel, Select, CircularProgress, Snackbar, FormControlLabel, Switch, DialogContentText, Badge, useTheme, Input, CssBaseline, AppBar, Toolbar, Container, Menu, Hidden, Drawer, useMediaQuery, Divider, ListSubheader, debounce, createTheme, ThemeProvider } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 import Alert$3 from '@material-ui/lab/Alert';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, useMemo, Component, createContext, useContext, useCallback, lazy, Suspense } from 'react';
-import { ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRight, ArrowRight, Send, Menu as Menu$1, People, Storage, Group, Assignment, Chat, Timeline, ViewList, Build, Settings as Settings$1 } from '@material-ui/icons';
+import { ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRight, ArrowRight, Send, Menu as Menu$1, People, Storage, Group, Assignment, Chat, Timeline, ViewList, Build, Settings as Settings$2 } from '@material-ui/icons';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import moment$2 from 'moment-timezone';
 import { useParams, useNavigate, useSearchParams, Link, Navigate, Routes, Route, useLocation, BrowserRouter } from 'react-router-dom';
@@ -13,7 +13,7 @@ import { values, get, isNil, isEmpty, round, isNaN, isNumber } from 'lodash-es';
 import { ClearIcon, DatePicker as DatePicker$1, CalendarIcon, DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import MenuIcon from '@material-ui/icons/Menu';
-import SettingsIcon from '@material-ui/icons/Settings';
+import Settings$1 from '@material-ui/icons/Settings';
 import ShowChartIcon from '@material-ui/icons/ShowChart';
 import AccountCircleIcon from '@material-ui/icons/AccountCircle';
 import { DndProvider } from 'react-dnd';
@@ -389,8 +389,14 @@ var StyledTreeItem = withStyles(function (theme) { return ({
 }); })(function (props) { return (React__default.createElement(TreeItem, __assign({}, props, { TransitionComponent: TransitionComponent }))); });
 var useTreviewStyle = makeStyles(function (theme) { return ({
     root: {
-        minHeight: 264,
+        minHeight: 350,
         flexGrow: 1,
+        height: "450px",
+        overflow: "auto",
+    },
+    treeContainer: {
+        height: "450px",
+        overflow: "auto",
     },
     treLabelIcon: {
         marginRight: theme.spacing(1),
@@ -414,17 +420,70 @@ var useTreviewStyle = makeStyles(function (theme) { return ({
     smallCheckbox: {
         transform: "scale(0.8)",
     },
+    searchField: {
+        marginBottom: theme.spacing(1),
+        "& .MuiOutlinedInput-root": {
+            padding: "6px 8px",
+        },
+        "& .MuiInputBase-input": {
+            padding: "8px 0px",
+        },
+    },
+    searchResults: {
+        position: "absolute",
+        zIndex: 1300,
+        width: "100%",
+        maxHeight: 300,
+        overflow: "auto",
+        marginTop: theme.spacing(1),
+        boxShadow: theme.shadows[3],
+    },
+    searchResultItem: {
+        cursor: "pointer",
+        paddingTop: theme.spacing(0.5),
+        paddingBottom: theme.spacing(0.5),
+        minHeight: "auto",
+        "&:hover": {
+            backgroundColor: theme.palette.action.hover,
+        },
+    },
+    searchResultPath: {
+        fontSize: "0.75rem",
+        color: theme.palette.text.secondary,
+        fontStyle: "italic",
+        marginTop: theme.spacing(0.25),
+    },
+    searchResultIcon: {
+        minWidth: 32,
+    },
+    searchContainer: {
+        position: "sticky",
+        top: 0,
+        zIndex: 1000,
+        backgroundColor: theme.palette.background.paper,
+        borderBottom: "1px solid ".concat(theme.palette.divider),
+        paddingBottom: theme.spacing(0.5),
+        marginBottom: theme.spacing(0.5),
+    },
 }); });
 var ModalTreeFilterControl = function (props) {
-    var onClose = props.onClose, valueProp = props.value, open = props.open, title = props.title, data = props.data, selectBranch = props.selectBranch, selectActive = props.selectActive, selectInternal = props.selectInternal, multipleSelectNodes = props.multipleSelectNodes, onHide = props.onHide, listAssetDrawings = props.listAssetDrawings, setListAssetDrawings = props.setListAssetDrawings, onSuccess = props.onSuccess, isLoading = props.isLoading, mostUsedCount = props.mostUsedCount, itemsWithParent = props.itemsWithParent, _a = props.dialogMaxWidth, dialogMaxWidth = _a === void 0 ? "sm" : _a, other = __rest(props, ["onClose", "value", "open", "title", "data", "selectBranch", "selectActive", "selectInternal", "multipleSelectNodes", "onHide", "listAssetDrawings", "setListAssetDrawings", "onSuccess", "isLoading", "mostUsedCount", "itemsWithParent", "dialogMaxWidth"]);
-    var _b = useState(valueProp), value = _b[0], setValue = _b[1];
-    var _c = useState([]), expanded = _c[0], setExpanded = _c[1];
+    var onClose = props.onClose, valueProp = props.value, open = props.open, title = props.title, data = props.data, selectBranch = props.selectBranch, selectActive = props.selectActive, selectInternal = props.selectInternal, multipleSelectNodes = props.multipleSelectNodes, onHide = props.onHide, listAssetDrawings = props.listAssetDrawings, setListAssetDrawings = props.setListAssetDrawings, onSuccess = props.onSuccess, isLoading = props.isLoading, mostUsedCount = props.mostUsedCount, itemsWithParent = props.itemsWithParent, _a = props.dialogMaxWidth, dialogMaxWidth = _a === void 0 ? "sm" : _a, _b = props.allowSearch, allowSearch = _b === void 0 ? false : _b, other = __rest(props, ["onClose", "value", "open", "title", "data", "selectBranch", "selectActive", "selectInternal", "multipleSelectNodes", "onHide", "listAssetDrawings", "setListAssetDrawings", "onSuccess", "isLoading", "mostUsedCount", "itemsWithParent", "dialogMaxWidth", "allowSearch"]);
+    var _c = useState(valueProp), value = _c[0], setValue = _c[1];
+    var _d = useState([]), expanded = _d[0], setExpanded = _d[1];
     var treeRef = useRef(null);
-    var _d = useState([]), selectedNodes = _d[0], setSelectedNodes = _d[1];
+    var _e = useState([]), selectedNodes = _e[0], setSelectedNodes = _e[1];
+    var _f = useState(""), searchTerm = _f[0], setSearchTerm = _f[1];
+    var _g = useState([]), searchResults = _g[0], setSearchResults = _g[1];
+    var _h = useState(false), showSearchResults = _h[0], setShowSearchResults = _h[1];
+    var searchTimeoutRef = useRef(null);
     var classes = useTreviewStyle();
     useEffect(function () {
         if (!open) {
             setValue(valueProp);
+            // Clear search when dialog closes
+            setSearchTerm("");
+            setSearchResults([]);
+            setShowSearchResults(false);
         }
         else {
             if (valueProp !== undefined)
@@ -577,6 +636,83 @@ var ModalTreeFilterControl = function (props) {
         });
         return treeArray;
     }
+    // Pre-build search index for better performance with large trees
+    var searchIndex = useMemo(function () {
+        var index = [];
+        var buildIndex = function (currentNode, path) {
+            if (path === void 0) { path = []; }
+            var nodePath = __spreadArray(__spreadArray([], path, true), [currentNode.name], false);
+            var pathStr = nodePath.join("/");
+            // Determine if node has children - use isLeaf if available, otherwise check children array
+            var hasChildren = currentNode.isLeaf === undefined
+                ? Boolean(currentNode.children && currentNode.children.length > 0)
+                : !currentNode.isLeaf;
+            index.push({
+                id: currentNode.id,
+                name: currentNode.name,
+                path: pathStr,
+                isCode: currentNode.isCode,
+                hasChildren: hasChildren,
+                node: currentNode,
+            });
+            if (currentNode.children) {
+                for (var _i = 0, _a = currentNode.children; _i < _a.length; _i++) {
+                    var child = _a[_i];
+                    buildIndex(child, nodePath);
+                }
+            }
+        };
+        if (data && data.children) {
+            for (var _i = 0, _a = data.children; _i < _a.length; _i++) {
+                var child = _a[_i];
+                buildIndex(child);
+            }
+        }
+        return index;
+    }, [data]);
+    var searchNodes = function (searchTerm) {
+        var lowerSearchTerm = searchTerm.toLowerCase();
+        return searchIndex.filter(function (item) {
+            return item.name.toLowerCase().includes(lowerSearchTerm);
+        });
+    };
+    var handleSearchChange = function (event) {
+        var term = event.target.value;
+        setSearchTerm(term);
+        // Clear existing timeout
+        if (searchTimeoutRef.current) {
+            clearTimeout(searchTimeoutRef.current);
+        }
+        if (term.trim() === "" || term.length < 2) {
+            setSearchResults([]);
+            setShowSearchResults(false);
+            return;
+        }
+        // Add debounce
+        searchTimeoutRef.current = setTimeout(function () {
+            var results = searchNodes(term);
+            setSearchResults(results);
+            setShowSearchResults(results.length > 0);
+        }, 250);
+    };
+    var handleSearchResultClick = function (result) {
+        // Expand to node
+        var expandedNode = getNodeParent(data, result.id, []);
+        setExpanded(expandedNode);
+        // Select the node
+        setValue(result.id);
+        // Clear search
+        setSearchTerm("");
+        setSearchResults([]);
+        setShowSearchResults(false);
+        // Scroll to node after a small delay to ensure tree is expanded
+        setTimeout(function () {
+            var nodeElement = document.getElementById(result.id.toString());
+            if (nodeElement) {
+                nodeElement.scrollIntoView({ behavior: "smooth", block: "center" });
+            }
+        }, 100);
+    };
     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" })),
@@ -601,28 +737,39 @@ var ModalTreeFilterControl = function (props) {
                 justifyContent: "center",
                 alignItems: "center",
             } },
-            React__default.createElement(LazyLoading, null))) : (React__default.createElement(DialogContent$1, { dividers: true },
-            React__default.createElement(TreeView, { autoFocus: false, 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 && (React__default.createElement(Grid, null,
-                mostUsedCount > 0 && (React__default.createElement(Grid, { item: true, md: 12 }, treeToArray(data)
-                    .sort(function (a, b) {
-                    if (!a.sortOrder)
-                        return 1;
-                    if (!b.sortOrder)
-                        return -1;
-                    var valA = a.sortOrder;
-                    var valB = b.sortOrder;
-                    return valA - valB;
-                })
-                    .slice(0, mostUsedCount)
-                    .map(function (node) { return (React__default.createElement(Button, { onClick: function () {
-                        onClose(node.id, node.name);
-                        if (onSuccess)
-                            onSuccess(true);
-                    }, style: { marginRight: 5, marginBottom: 8 } },
-                    React__default.createElement(Chip, { label: itemsWithParent.includes(node.name)
-                            ? "".concat(node.parentName, "/").concat(node.name)
-                            : node.name, size: "medium", variant: "outlined", style: { cursor: "pointer" } }))); }))),
-                renderTree(data)))))),
+            React__default.createElement(LazyLoading, null))) : (React__default.createElement(DialogContent$1, { dividers: true, style: { height: "500px", overflow: "hidden" } },
+            allowSearch && (React__default.createElement("div", { className: classes.searchContainer },
+                React__default.createElement(TextField, { className: classes.searchField, placeholder: "Search items (min. 2 characters)...", variant: "outlined", size: "small", fullWidth: true, value: searchTerm, onChange: handleSearchChange, InputProps: {
+                        startAdornment: (React__default.createElement(SearchIcon, { style: { marginRight: 8, color: "#999" } })),
+                    } }),
+                showSearchResults && (React__default.createElement(Paper, { className: classes.searchResults },
+                    React__default.createElement(List, null, searchResults.map(function (result) { return (React__default.createElement(ListItem, { key: result.id, button: true, className: classes.searchResultItem, onClick: function () { return handleSearchResultClick(result); } },
+                        React__default.createElement(ListItemIcon, { className: classes.searchResultIcon }, result.hasChildren ? (React__default.createElement(AccountTreeIcon, { color: "primary", fontSize: "small" })) : (React__default.createElement(Settings$1, { color: "primary", fontSize: "small" }))),
+                        React__default.createElement(ListItemText, { primary: result.name, secondary: result.path, classes: {
+                                secondary: classes.searchResultPath,
+                            } }))); })))))),
+            React__default.createElement("div", { className: classes.treeContainer },
+                React__default.createElement(TreeView, { autoFocus: false, 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 && (React__default.createElement(Grid, null,
+                    mostUsedCount > 0 && (React__default.createElement(Grid, { item: true, md: 12 }, treeToArray(data)
+                        .sort(function (a, b) {
+                        if (!a.sortOrder)
+                            return 1;
+                        if (!b.sortOrder)
+                            return -1;
+                        var valA = a.sortOrder;
+                        var valB = b.sortOrder;
+                        return valA - valB;
+                    })
+                        .slice(0, mostUsedCount)
+                        .map(function (node) { return (React__default.createElement(Button, { onClick: function () {
+                            onClose(node.id, node.name);
+                            if (onSuccess)
+                                onSuccess(true);
+                        }, style: { marginRight: 5, marginBottom: 8 } },
+                        React__default.createElement(Chip, { label: itemsWithParent.includes(node.name)
+                                ? "".concat(node.parentName, "/").concat(node.name)
+                                : node.name, size: "medium", variant: "outlined", style: { cursor: "pointer" } }))); }))),
+                    renderTree(data))))))),
         React__default.createElement(DialogActions$1, null,
             React__default.createElement(Button, { onClick: handleCancel, color: "primary" }, "Cancel"),
             React__default.createElement(Button, { onClick: function () { return handleOk(); }, color: "primary" }, "OK"))));
@@ -645,8 +792,8 @@ var useStyles$I = makeStyles(function (theme) { return ({
 }); });
 var TreePickerControl = function (props) {
     var classes = useStyles$I();
-    var onSelect = props.onSelect, value = props.value; props.styleLabel; var dataSource = props.dataSource, _a = props.inputTitle, inputTitle = _a === void 0 ? "Asset" : _a; props.showPath; var _c = props.multipleSelectNodes, multipleSelectNodes = _c === void 0 ? false : _c, _d = props.showClearButton, showClearButton = _d === void 0 ? false : _d, showAssetTree = props.showAssetTree, onHide = props.onHide, _e = props.listAssetDrawings, listAssetDrawings = _e === void 0 ? [] : _e, onSuccess = props.onSuccess, isLoading = props.isLoading, other = __rest(props, ["onSelect", "value", "styleLabel", "dataSource", "inputTitle", "showPath", "multipleSelectNodes", "showClearButton", "showAssetTree", "onHide", "listAssetDrawings", "onSuccess", "isLoading"]);
-    var _f = useState(showAssetTree || false), open = _f[0], setOpen = _f[1];
+    var 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, _f = props.allowSearch, allowSearch = _f === void 0 ? false : _f, other = __rest(props, ["onSelect", "value", "styleLabel", "dataSource", "inputTitle", "showPath", "multipleSelectNodes", "showClearButton", "showAssetTree", "onHide", "listAssetDrawings", "onSuccess", "isLoading", "allowSearch"]);
+    var _g = useState(showAssetTree || false), open = _g[0], setOpen = _g[1];
     var handleClickListItem = function (e) {
         e.stopPropagation();
         setOpen(true);
@@ -725,7 +872,7 @@ var TreePickerControl = function (props) {
         React__default.createElement(Grid, { item: true, xs: 12, md: 12 },
             React__default.createElement(ModalTreeFilterControl, __assign({ classes: {
                     paper: classes.paper,
-                }, 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)))));
+                }, onHide: onHide, id: "modal-treeview-filters", 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, allowSearch: allowSearch }, other)))));
 };
 
 var useStyles$H = makeStyles(function (theme) { return ({
@@ -1394,11 +1541,12 @@ var ShiftNavigatorProvider = function (_a) {
     return (React__default.createElement(ShiftNavigatorContext.Provider, { value: shiftNavigatorManager }, children));
 };
 
-var ShiftDayNavigatorControl = function (props) {
-    var _a;
-    var _b = useShiftNavigator(), shiftInfo = _b.shiftInfo, initShiftNavigator = _b.initShiftNavigator, moveShift = _b.moveShift, getShiftDataFromAPI = _b.getShiftDataFromAPI;
-    var _c = useState(shiftInfo), shiftInfoCopy = _c[0], setShiftInfoCopy = _c[1];
-    var _d = useState(""); _d[0]; var setError = _d[1];
+var ShiftDayNavigatorControl = function (_a) {
+    var _b;
+    var useRouter = _a.useRouter, onShiftChange = _a.onShiftChange, preventInit = _a.preventInit, _c = _a.withPaper, withPaper = _c === void 0 ? true : _c;
+    var _d = useShiftNavigator(), shiftInfo = _d.shiftInfo, initShiftNavigator = _d.initShiftNavigator, moveShift = _d.moveShift, getShiftDataFromAPI = _d.getShiftDataFromAPI;
+    var _e = useState(shiftInfo), shiftInfoCopy = _e[0], setShiftInfoCopy = _e[1];
+    var _f = useState(""); _f[0]; var setError = _f[1];
     var shiftId = useParams().shiftId;
     var firstRender = useRef(true);
     var updateHistory = function (shiftId) {
@@ -1406,8 +1554,8 @@ var ShiftDayNavigatorControl = function (props) {
         window.history.replaceState(null, "", "/".concat(paths[1]) + "/".concat(shiftId));
     };
     if (shiftInfo !== null && shiftInfo.CurrentShiftId) {
-        if (props.useRouter) {
-            updateHistory((_a = shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.CurrentShiftId) === null || _a === void 0 ? void 0 : _a.toString());
+        if (useRouter) {
+            updateHistory((_b = shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.CurrentShiftId) === null || _b === void 0 ? void 0 : _b.toString());
         }
     }
     useEffect(function () {
@@ -1454,62 +1602,62 @@ var ShiftDayNavigatorControl = function (props) {
     useEffect(function () {
         if (firstRender.current) {
             firstRender.current = false;
-            if (props.preventInit) {
+            if (preventInit) {
                 return;
             }
-            if (props.useRouter && shiftId) {
+            if (useRouter && shiftId) {
                 getShiftDataFromAPI(null, Number(shiftId)).then(function () {
-                    props.onShiftChange && props.onShiftChange(Number(shiftId));
+                    onShiftChange && onShiftChange(Number(shiftId));
                 });
             }
             else {
                 initShiftNavigator().then(function () {
-                    props.onShiftChange && props.onShiftChange(Number(shiftId));
+                    onShiftChange && 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: "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 () { });
-                        }
-                    }, slots: {
-                        textField: TextField,
-                    }, slotProps: {
-                        textField: {
-                            variant: "outlined",
-                            size: "small",
-                            inputProps: {
-                                style: {
-                                    textAlign: "center",
-                                    width: "110px",
-                                },
+    var gridContent = (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: "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 () { });
+                    }
+                }, slots: {
+                    textField: TextField,
+                }, slotProps: {
+                    textField: {
+                        variant: "outlined",
+                        size: "small",
+                        inputProps: {
+                            style: {
+                                textAlign: "center",
+                                width: "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: !(shiftInfoCopy === null || shiftInfoCopy === void 0 ? void 0 : shiftInfoCopy.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: !(shiftInfoCopy === null || shiftInfoCopy === void 0 ? void 0 : shiftInfoCopy.LastShiftId) || !(shiftInfoCopy === null || shiftInfoCopy === void 0 ? void 0 : shiftInfoCopy.NextShiftId), onClick: function () {
-                            moveShift("Last").then(function () { });
-                        }, size: "small" },
-                        React__default.createElement(SkipNext, null)))))));
+                    },
+                } })),
+        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: !(shiftInfoCopy === null || shiftInfoCopy === void 0 ? void 0 : shiftInfoCopy.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: !(shiftInfoCopy === null || shiftInfoCopy === void 0 ? void 0 : shiftInfoCopy.LastShiftId) || !(shiftInfoCopy === null || shiftInfoCopy === void 0 ? void 0 : shiftInfoCopy.NextShiftId), onClick: function () {
+                        moveShift("Last").then(function () { });
+                    }, size: "small" },
+                    React__default.createElement(SkipNext, null))))));
+    return withPaper !== false ? React__default.createElement(Paper, null, gridContent) : gridContent;
 };
 
 var getShiftsRangeByParameters = function (period_1) {
@@ -9651,7 +9799,7 @@ var useStyles$8 = makeStyles(function (theme) { return ({
         flexDirection: "column",
     },
     appBar: {
-        backgroundColor: "#3f51b5",
+        backgroundColor: theme.palette.primary.main,
         boxShadow: "0 4px 20px 0 rgba(0, 0, 0, 0.1)",
     },
     brand: {
@@ -9981,7 +10129,7 @@ function Header$1(_a) {
                             React__default.createElement(ShowChartIcon, null)))),
                     canShowSettings && (React__default.createElement(Tooltip, { title: "Settings", placement: "bottom" },
                         React__default.createElement(IconButton$1, { color: "inherit", component: Link, to: "/configuration" },
-                            React__default.createElement(SettingsIcon, null)))),
+                            React__default.createElement(Settings$1, null)))),
                     showAreaSelector && (React__default.createElement(Suspense, { fallback: React__default.createElement("div", null, "...") },
                         React__default.createElement(AreaSelector$1, null))),
                     React__default.createElement(TimeAndUserMenu, null)))),
@@ -11192,7 +11340,7 @@ var Configuration = function () {
                 React__default.createElement(ListItemText, { primary: "Jobs" })),
             React__default.createElement(ListItem, { button: true, selected: option === "settings", component: Link, to: "/configuration/settings" },
                 React__default.createElement(ListItemIcon, null,
-                    React__default.createElement(Settings$1, null)),
+                    React__default.createElement(Settings$2, null)),
                 React__default.createElement(ListItemText, { primary: "Settings" }))))); };
     useEffect(function () {
         var handleListItemClick = function (event) {
@@ -14376,10 +14524,10 @@ var timezone = TimeService.getInstance().getServerTimeZone();
 moment$2.tz.setDefault(timezone);
 var base = document.getElementsByTagName("base")[0].getAttribute("href") || "/";
 function MESFMain(_a) {
-    var authentication = _a.authentication, routes = _a.routes, navbar = _a.navbar, _b = _a.navbarTitle, navbarTitle = _b === void 0 ? "MESF" : _b, configurations = _a.configurations, _c = _a.showAreaSelector, showAreaSelector = _c === void 0 ? false : _c, _d = _a.showTrendingsIcon, showTrendingsIcon = _d === void 0 ? true : _d, _e = _a.byPassHeaderRoutes, byPassHeaderRoutes = _e === void 0 ? [] : _e, _f = _a.plantAssetId, plantAssetId = _f === void 0 ? 1 : _f;
+    var authentication = _a.authentication, routes = _a.routes, navbar = _a.navbar, _b = _a.navbarTitle, navbarTitle = _b === void 0 ? "MESF" : _b, configurations = _a.configurations, _c = _a.showAreaSelector, showAreaSelector = _c === void 0 ? false : _c, _d = _a.showTrendingsIcon, showTrendingsIcon = _d === void 0 ? true : _d, _e = _a.byPassHeaderRoutes, byPassHeaderRoutes = _e === void 0 ? [] : _e, _f = _a.plantAssetId, plantAssetId = _f === void 0 ? 1 : _f, _g = _a.theme, theme = _g === void 0 ? themeMESF : _g;
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(CssBaseline, null),
-        React__default.createElement(ThemeProvider, { theme: themeMESF },
+        React__default.createElement(ThemeProvider, { theme: theme },
             React__default.createElement(AuthProvider, { authConfig: authentication },
                 React__default.createElement(LocalizationProvider, { dateAdapter: AdapterMoment, dateLibInstance: moment$2 },
                     React__default.createElement(UserProvider, null,