@dexteel/mesf-core 5.8.0 → 5.9.1

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "5.8.0"
+  ".": "5.9.1"
 }

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# Changelog
+
+## [5.9.1](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v5.9.0...@dexteel/mesf-core-v5.9.1) (2025-08-29)
+
+
+### Bug Fixes
+
+* **TreePickerControlV2:** add search functionality with allowSearch prop ([#437](https://github.com/dexteel/mesf-core-frontend/issues/437)) ([a8a9fd6](https://github.com/dexteel/mesf-core-frontend/commit/a8a9fd6dc97a916f4a32a7116bde47e769bc11aa))
+
+## [5.9.0] - 2025-08-29
+
+
+
+# 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)

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/TreePickerControlV2.d.ts

@@ -8,6 +8,7 @@ type TreePickerControlProps = {
     showClearButton?: boolean;
     showFullPath?: boolean;
     disabled?: boolean;
+    allowSearch?: boolean;
     dataSource: TreeNode;
     mostUsedCount?: number | null;
     itemsWithParent?: String[];

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/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 ({
@@ -780,8 +927,8 @@ function getNodePath(node, nodeId, parentPath, isRoot) {
 }
 var TreePickerControlV2 = function (props) {
     var classes = useStyles$H();
-    var value = props.value, onSelect = props.onSelect; props.styleLabel; var dataSource = props.dataSource; props.getOptionName; var _a = props.inputTitle, inputTitle = _a === void 0 ? "Asset" : _a; props.showPath; var _c = props.multipleSelectNodes, multipleSelectNodes = _c === void 0 ? false : _c, _d = props.showClearButton, showClearButton = _d === void 0 ? false : _d, _e = props.showFullPath, showFullPath = _e === void 0 ? false : _e, showAssetTree = props.showAssetTree, onHide = props.onHide, _f = props.listAssetDrawings, listAssetDrawings = _f === void 0 ? [] : _f, onSuccess = props.onSuccess, isLoading = props.isLoading, _g = props.disabled, disabled = _g === void 0 ? false : _g, _h = props.mostUsedCount, mostUsedCount = _h === void 0 ? 0 : _h, _j = props.itemsWithParent, itemsWithParent = _j === void 0 ? [] : _j, _k = props.dialogMaxWidth, dialogMaxWidth = _k === void 0 ? "sm" : _k, other = __rest(props, ["value", "onSelect", "styleLabel", "dataSource", "getOptionName", "inputTitle", "showPath", "multipleSelectNodes", "showClearButton", "showFullPath", "showAssetTree", "onHide", "listAssetDrawings", "onSuccess", "isLoading", "disabled", "mostUsedCount", "itemsWithParent", "dialogMaxWidth"]);
-    var _l = useState(false), open = _l[0], setOpen = _l[1];
+    var value = props.value, onSelect = props.onSelect; props.styleLabel; var dataSource = props.dataSource; props.getOptionName; var _a = props.inputTitle, inputTitle = _a === void 0 ? "Asset" : _a; props.showPath; var _c = props.multipleSelectNodes, multipleSelectNodes = _c === void 0 ? false : _c, _d = props.showClearButton, showClearButton = _d === void 0 ? false : _d, _e = props.showFullPath, showFullPath = _e === void 0 ? false : _e, showAssetTree = props.showAssetTree, onHide = props.onHide, _f = props.listAssetDrawings, listAssetDrawings = _f === void 0 ? [] : _f, onSuccess = props.onSuccess, isLoading = props.isLoading, _g = props.disabled, disabled = _g === void 0 ? false : _g, _h = props.mostUsedCount, mostUsedCount = _h === void 0 ? 0 : _h, _j = props.itemsWithParent, itemsWithParent = _j === void 0 ? [] : _j, _k = props.dialogMaxWidth, dialogMaxWidth = _k === void 0 ? "sm" : _k, _l = props.allowSearch, allowSearch = _l === void 0 ? false : _l, other = __rest(props, ["value", "onSelect", "styleLabel", "dataSource", "getOptionName", "inputTitle", "showPath", "multipleSelectNodes", "showClearButton", "showFullPath", "showAssetTree", "onHide", "listAssetDrawings", "onSuccess", "isLoading", "disabled", "mostUsedCount", "itemsWithParent", "dialogMaxWidth", "allowSearch"]);
+    var _m = useState(false), open = _m[0], setOpen = _m[1];
     var handleClickListItem = function (event) {
         event.stopPropagation();
         if (disabled)
@@ -833,7 +980,7 @@ var TreePickerControlV2 = 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, mostUsedCount: mostUsedCount, itemsWithParent: itemsWithParent, dialogMaxWidth: dialogMaxWidth }, other)))));
+                }, 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, mostUsedCount: mostUsedCount, itemsWithParent: itemsWithParent, dialogMaxWidth: dialogMaxWidth, allowSearch: allowSearch }, other)))));
 };
 
 var SimplePasswordControl = /** @class */ (function (_super) {
@@ -9652,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: {
@@ -9982,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)))),
@@ -11193,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) {
@@ -14377,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,