@dexteel/mesf-core 5.9.1 → 5.10.0

package/.release-please-manifest.json

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

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# Changelog
+
+## [5.10.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v5.9.1...@dexteel/mesf-core-v5.10.0) (2025-09-02)
+
+
+### Features
+
+* **TreePickerControl:** enhance keyboard navigation and search functionality ([#446](https://github.com/dexteel/mesf-core-frontend/issues/446)) ([29a8cfd](https://github.com/dexteel/mesf-core-frontend/commit/29a8cfdd45d7a7b9ab7916206414ebeaa9b72848))
+
+
+### Bug Fixes
+
+* **logs:** resolve critical UI issues in logs page ([#445](https://github.com/dexteel/mesf-core-frontend/issues/445)) ([c77f667](https://github.com/dexteel/mesf-core-frontend/commit/c77f6674416dc49e3574256c561b03fd21ecf2bd))
+
+## [5.9.1] - 2025-08-29
+
+
+
 # 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)

package/dist/configuration/pages/log/components/Filters/dateFilter.d.ts

@@ -3,6 +3,8 @@ type Props = {
     date: Date;
     setDate: (date: Date) => void;
     label: string | undefined;
+    minDate?: Date;
+    maxDate?: Date;
 };
-export declare const DateFilter: ({ date, setDate, label }: Props) => React.JSX.Element;
+export declare const DateFilter: ({ date, setDate, label, minDate, maxDate, }: Props) => React.JSX.Element;
 export {};

package/dist/index.esm.js

@@ -9,7 +9,7 @@ import { ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRi
 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';
-import { values, get, isNil, isEmpty, round, isNaN, isNumber } from 'lodash-es';
+import { values, get, isNil, isEmpty, round, isNaN as isNaN$1, 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';
@@ -22,8 +22,8 @@ import { themeMaterial } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import MomentUtils from '@date-io/moment';
 import { MuiPickersUtilsProvider, KeyboardDatePicker, KeyboardTimePicker } from '@material-ui/pickers';
-import { isNil as isNil$1, get as get$1 } from 'lodash';
 import moment$3 from 'moment';
+import { isNil as isNil$1, get as get$1 } from 'lodash';
 import EditIcon from '@material-ui/icons/Edit';
 import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd';
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
@@ -383,7 +383,9 @@ var StyledTreeItem = withStyles(function (theme) { return ({
     },
     label: {
         backgroundColor: function (props) {
-            return props.isChecked ? "lightblue !important" : "inherit";
+            return props.isChecked
+                ? alpha(theme.palette.primary.main, 0.8) + " !important"
+                : "inherit";
         },
     },
 }); })(function (props) { return (React__default.createElement(TreeItem, __assign({}, props, { TransitionComponent: TransitionComponent }))); });
@@ -391,12 +393,20 @@ var useTreviewStyle = makeStyles(function (theme) { return ({
     root: {
         minHeight: 350,
         flexGrow: 1,
-        height: "450px",
+        height: "100%",
         overflow: "auto",
+        overflowX: "hidden",
+        width: "100%",
     },
     treeContainer: {
-        height: "450px",
+        flex: 1,
         overflow: "auto",
+        display: "flex",
+        flexDirection: "column",
+        paddingTop: theme.spacing(1),
+        paddingLeft: theme.spacing(2),
+        paddingRight: theme.spacing(2),
+        paddingBottom: theme.spacing(2),
     },
     treLabelIcon: {
         marginRight: theme.spacing(1),
@@ -446,6 +456,11 @@ var useTreviewStyle = makeStyles(function (theme) { return ({
         "&:hover": {
             backgroundColor: theme.palette.action.hover,
         },
+        "&.focused": {
+            backgroundColor: theme.palette.action.selected,
+            outline: "2px solid ".concat(theme.palette.primary.main),
+            outlineOffset: "-2px",
+        },
     },
     searchResultPath: {
         fontSize: "0.75rem",
@@ -462,6 +477,7 @@ var useTreviewStyle = makeStyles(function (theme) { return ({
         zIndex: 1000,
         backgroundColor: theme.palette.background.paper,
         borderBottom: "1px solid ".concat(theme.palette.divider),
+        padding: theme.spacing(1),
         paddingBottom: theme.spacing(0.5),
         marginBottom: theme.spacing(0.5),
     },
@@ -475,7 +491,11 @@ var ModalTreeFilterControl = function (props) {
     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 _j = useState(-1), focusedSearchIndex = _j[0], setFocusedSearchIndex = _j[1];
     var searchTimeoutRef = useRef(null);
+    var searchContainerRef = useRef(null);
+    var searchResultsRefs = useRef([]);
+    var searchInputRef = useRef(null);
     var classes = useTreviewStyle();
     useEffect(function () {
         if (!open) {
@@ -484,12 +504,40 @@ var ModalTreeFilterControl = function (props) {
             setSearchTerm("");
             setSearchResults([]);
             setShowSearchResults(false);
+            setFocusedSearchIndex(-1);
         }
         else {
-            if (valueProp !== undefined)
+            if (valueProp !== undefined) {
                 expandNode(valueProp);
+                // Scroll to the selected node when dialog opens
+                setTimeout(function () {
+                    var nodeElement = document.getElementById(valueProp.toString());
+                    if (nodeElement) {
+                        nodeElement.scrollIntoView({
+                            behavior: "smooth",
+                            block: "center",
+                        });
+                    }
+                }, 300);
+            }
+            // Auto-focus search input when dialog opens and search is allowed
+            if (allowSearch) {
+                setTimeout(function () {
+                    // Try multiple ways to focus the search input
+                    if (searchInputRef.current) {
+                        searchInputRef.current.focus();
+                    }
+                    else {
+                        // Fallback: find input by placeholder
+                        var searchInput = document.querySelector('input[placeholder*="Search"]');
+                        if (searchInput) {
+                            searchInput.focus();
+                        }
+                    }
+                }, 200);
+            }
         }
-    }, [valueProp, open]);
+    }, [valueProp, open, allowSearch]);
     useEffect(function () {
         if (Array.isArray(listAssetDrawings) && listAssetDrawings.length >= 1) {
             setSelectedNodes(listAssetDrawings);
@@ -515,6 +563,11 @@ var ModalTreeFilterControl = function (props) {
         return branches;
     };
     var handleCancel = function () {
+        setSearchTerm("");
+        setSearchResults([]);
+        setShowSearchResults(false);
+        setFocusedSearchIndex(-1);
+        setValue(valueProp);
         onClose();
         if (onHide)
             onHide(false);
@@ -543,7 +596,55 @@ var ModalTreeFilterControl = function (props) {
     };
     var handleKeyDown = function (event) {
         if (event.key === "Escape") {
-            onClose();
+            // Clear search if showing results, otherwise close dialog
+            if (showSearchResults) {
+                setSearchTerm("");
+                setSearchResults([]);
+                setShowSearchResults(false);
+                setFocusedSearchIndex(-1);
+            }
+            else {
+                // Reset everything when closing with ESC
+                setSearchTerm("");
+                setSearchResults([]);
+                setShowSearchResults(false);
+                setFocusedSearchIndex(-1);
+                setValue(valueProp);
+                onClose();
+            }
+            return;
+        }
+        // Handle keyboard navigation in search results
+        if (showSearchResults && searchResults.length > 0) {
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                var newIndex_1 = focusedSearchIndex < searchResults.length - 1
+                    ? focusedSearchIndex + 1
+                    : 0;
+                setFocusedSearchIndex(newIndex_1);
+                // Scroll to the focused item
+                setTimeout(function () { return scrollFocusedItemIntoView(newIndex_1); }, 0);
+            }
+            else if (event.key === "ArrowUp") {
+                event.preventDefault();
+                var newIndex_2 = focusedSearchIndex > 0
+                    ? focusedSearchIndex - 1
+                    : searchResults.length - 1;
+                setFocusedSearchIndex(newIndex_2);
+                // Scroll to the focused item
+                setTimeout(function () { return scrollFocusedItemIntoView(newIndex_2); }, 0);
+            }
+            else if (event.key === "Enter" && focusedSearchIndex >= 0) {
+                event.preventDefault();
+                var selectedResult = searchResults[focusedSearchIndex];
+                if (selectedResult) {
+                    handleSearchResultClick(selectedResult);
+                }
+            }
+        }
+        else if (event.key === "Enter" && !showSearchResults) {
+            event.preventDefault();
+            handleOk();
         }
     };
     var handleCheckboxClick = function (event) {
@@ -570,9 +671,11 @@ var ModalTreeFilterControl = function (props) {
         return [];
     };
     var expandNode = function (nodeId) {
-        var expandedNode = getNodeParent(data, nodeId, []);
-        expandedNode.push(nodeId.toString());
-        setExpanded(expandedNode);
+        var pathToNode = getNodeParent(data, nodeId, []);
+        pathToNode.push(nodeId.toString());
+        // Merge with existing expanded nodes to preserve current expansions
+        var mergedExpanded = Array.from(new Set(__spreadArray(__spreadArray([], expanded, true), pathToNode, true)));
+        setExpanded(mergedExpanded);
     };
     var handleChange = function (event, nodeIds) {
         var findNode = getNodeData(data, nodeIds !== undefined ? Number.parseInt(nodeIds) : -1);
@@ -636,6 +739,16 @@ var ModalTreeFilterControl = function (props) {
         });
         return treeArray;
     }
+    // Helper function to scroll focused item into view
+    var scrollFocusedItemIntoView = function (index) {
+        var _a;
+        if (searchResultsRefs.current[index]) {
+            (_a = searchResultsRefs.current[index]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+            });
+        }
+    };
     // Pre-build search index for better performance with large trees
     var searchIndex = useMemo(function () {
         var index = [];
@@ -662,11 +775,8 @@ var ModalTreeFilterControl = function (props) {
                 }
             }
         };
-        if (data && data.children) {
-            for (var _i = 0, _a = data.children; _i < _a.length; _i++) {
-                var child = _a[_i];
-                buildIndex(child);
-            }
+        if (data) {
+            buildIndex(data);
         }
         return index;
     }, [data]);
@@ -693,25 +803,42 @@ var ModalTreeFilterControl = function (props) {
             var results = searchNodes(term);
             setSearchResults(results);
             setShowSearchResults(results.length > 0);
+            // Auto-focus first result if results are available
+            var newFocusIndex = results.length > 0 ? 0 : -1;
+            setFocusedSearchIndex(newFocusIndex);
+            // Clear refs array and prepare for new results
+            searchResultsRefs.current = new Array(results.length).fill(null);
+            // Scroll to first item when results appear
+            if (newFocusIndex >= 0) {
+                setTimeout(function () { return scrollFocusedItemIntoView(newFocusIndex); }, 100);
+            }
         }, 250);
     };
     var handleSearchResultClick = function (result) {
-        // Expand to node
-        var expandedNode = getNodeParent(data, result.id, []);
-        setExpanded(expandedNode);
+        // Get path to the selected node
+        var pathToNode = getNodeParent(data, result.id, []);
+        // Merge with existing expanded nodes to avoid collapsing other parts of the tree
+        var mergedExpanded = Array.from(new Set(__spreadArray(__spreadArray([], expanded, true), pathToNode, true)));
+        setExpanded(mergedExpanded);
         // Select the node
         setValue(result.id);
         // Clear search
         setSearchTerm("");
         setSearchResults([]);
         setShowSearchResults(false);
-        // Scroll to node after a small delay to ensure tree is expanded
+        setFocusedSearchIndex(-1);
+        if (searchInputRef.current) {
+            searchInputRef.current.blur();
+        }
         setTimeout(function () {
             var nodeElement = document.getElementById(result.id.toString());
             if (nodeElement) {
-                nodeElement.scrollIntoView({ behavior: "smooth", block: "center" });
+                nodeElement.scrollIntoView({
+                    behavior: "smooth",
+                    block: "center",
+                });
             }
-        }, 100);
+        }, 300);
     };
     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" })),
@@ -737,13 +864,21 @@ var ModalTreeFilterControl = function (props) {
                 justifyContent: "center",
                 alignItems: "center",
             } },
-            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: {
+            React__default.createElement(LazyLoading, null))) : (React__default.createElement(DialogContent$1, { dividers: true, style: {
+                height: "500px",
+                overflow: "hidden",
+                display: "flex",
+                flexDirection: "column",
+                padding: 0,
+            } },
+            allowSearch && (React__default.createElement("div", { className: classes.searchContainer, ref: searchContainerRef },
+                React__default.createElement(TextField, { className: classes.searchField, placeholder: "Search (min. 2 characters)...", variant: "outlined", size: "small", fullWidth: true, value: searchTerm, onChange: handleSearchChange, inputRef: searchInputRef, 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(List, null, searchResults.map(function (result, index) { return (React__default.createElement(ListItem, { key: result.id, button: true, ref: function (el) {
+                            searchResultsRefs.current[index] = el;
+                        }, className: "".concat(classes.searchResultItem, " ").concat(index === focusedSearchIndex ? "focused" : ""), 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,
@@ -3125,12 +3260,14 @@ var CodeFilter = function (_a) {
 };
 
 var DateFilter = function (_a) {
-    var date = _a.date, setDate = _a.setDate, _b = _a.label, label = _b === void 0 ? "Date" : _b;
+    var date = _a.date, setDate = _a.setDate, _b = _a.label, label = _b === void 0 ? "Date" : _b, minDate = _a.minDate, maxDate = _a.maxDate;
     var handleDateChange = function (datePicker) {
-        setDate(datePicker.toDate());
+        if (datePicker) {
+            setDate(datePicker.toDate());
+        }
     };
     return (React__default.createElement(MuiPickersUtilsProvider, { utils: MomentUtils },
-        React__default.createElement(KeyboardDatePicker, { disableToolbar: true, variant: "inline", format: "MM/DD/yyyy", id: "date-picker-inline", style: {
+        React__default.createElement(KeyboardDatePicker, { disableToolbar: true, variant: "inline", format: "MM/DD/yyyy", id: "date-picker-inline", autoOk: true, minDate: minDate, maxDate: maxDate || moment$3().toDate(), style: {
                 minWidth: "100%",
                 borderTopLeftRadius: 3,
                 borderTopRightRadius: 3,
@@ -3141,11 +3278,10 @@ var DateFilter = function (_a) {
 
 var SearchFilter = function (_a) {
     var search = _a.search, setSearch = _a.setSearch;
-    return (React__default.createElement(React__default.Fragment, null,
+    return (React__default.createElement("div", { style: { marginTop: 8 } },
         React__default.createElement(TextField, { style: {
                 minWidth: "100%",
-                backgroundColor: "#f5f8fa",
-            }, label: "Search", variant: "outlined", margin: "dense", value: search, onChange: function (e) { return setSearch(e.target.value); }, autoComplete: "off" })));
+            }, label: "Search", variant: "outlined", size: "small", value: search, onChange: function (e) { return setSearch(e.target.value); }, autoComplete: "off" })));
 };
 
 var useStyles$B = makeStyles(function (theme) { return ({
@@ -3160,8 +3296,23 @@ var useStyles$B = makeStyles(function (theme) { return ({
 }); });
 var formatTime = function (nowTime) {
     if (nowTime == undefined)
-        return;
-    return nowTime.toLocaleDateString() + " " + nowTime.toLocaleTimeString();
+        return "";
+    // Ensure nowTime is a Date object
+    var date;
+    if (nowTime instanceof Date) {
+        date = nowTime;
+    }
+    else if (typeof nowTime === "string" || typeof nowTime === "number") {
+        date = new Date(nowTime);
+    }
+    else {
+        return "";
+    }
+    // Check if date is valid
+    if (isNaN(date.getTime())) {
+        return "";
+    }
+    return date.toLocaleDateString() + " " + date.toLocaleTimeString();
 };
 var ModalLogSelected = function (_a) {
     var show = _a.show, onHide = _a.onHide, selectedLog = _a.selectedLog;
@@ -3171,43 +3322,19 @@ var ModalLogSelected = function (_a) {
             React__default.createElement(MesfModal.Content, { style: { padding: "15px 30px" } },
                 React__default.createElement(Grid, { container: true, spacing: 1, alignItems: "flex-start" },
                     React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
-                        React__default.createElement(TextField
-                        // disabled
-                        , { 
-                            // disabled
-                            variant: "standard", 
-                            // variant="outline"
-                            fullWidth: true, margin: "dense", label: "User", defaultValue: selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.User, InputProps: {
+                        React__default.createElement(TextField, { variant: "standard", fullWidth: true, margin: "dense", label: "User", defaultValue: selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.User, InputProps: {
                                 readOnly: true,
                             } })),
                     React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
-                        React__default.createElement(TextField
-                        // disabled
-                        , { 
-                            // disabled
-                            variant: "standard", 
-                            // variant="outline"
-                            fullWidth: true, margin: "dense", label: "Time", defaultValue: formatTime(selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.Timestamp), InputProps: {
+                        React__default.createElement(TextField, { variant: "standard", fullWidth: true, margin: "dense", label: "Time", defaultValue: formatTime(selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.Timestamp), InputProps: {
                                 readOnly: true,
                             } })),
                     React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
-                        React__default.createElement(TextField
-                        // disabled
-                        , { 
-                            // disabled
-                            variant: "standard", 
-                            // variant="outline"
-                            fullWidth: true, margin: "dense", label: "Source", defaultValue: selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.Source, InputProps: {
+                        React__default.createElement(TextField, { variant: "standard", fullWidth: true, margin: "dense", label: "Source", defaultValue: selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.Source, InputProps: {
                                 readOnly: true,
                             } })),
                     React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
-                        React__default.createElement(TextField
-                        // disabled
-                        , { 
-                            // disabled
-                            variant: "standard", 
-                            // variant="outline"
-                            fullWidth: true, margin: "dense", label: "Type", defaultValue: selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.LogTypeCode, InputProps: {
+                        React__default.createElement(TextField, { variant: "standard", fullWidth: true, margin: "dense", label: "Type", defaultValue: selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.LogTypeCode, InputProps: {
                                 readOnly: true,
                             } })),
                     React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { paddingRight: 20, paddingLeft: 5, marginBottom: 20 } },
@@ -3326,13 +3453,6 @@ var useLogTableData = function () {
     return { rows: rows, columnDefs: columnDefs };
 };
 
-var ButtonWithLoading = function (_a) {
-    var children = _a.children, isLoading = _a.isLoading, props = __rest(_a, ["children", "isLoading"]);
-    return (React__default.createElement(Button, __assign({}, props, { disabled: isLoading }),
-        isLoading && React__default.createElement(CircularProgress, { size: "1rem" }),
-        children));
-};
-
 var useStyles$A = makeStyles(function (theme) { return ({
     root: {
         "& .MuiDataGrid-row": {
@@ -3344,49 +3464,12 @@ var useStyles$A = makeStyles(function (theme) { return ({
         "& .MuiDataGrid-columnHeaderTitle, & .MuiTablePagination-caption": {
             fontWeight: "bold",
         },
-        // "& .ag-icon-menu": {
-        // 	display: "none",
-        // },
-        // "& .ag-header-cell-label": {
-        // 	display: "flex",
-        // 	alignItems: "start",
-        // 	justifyContent: "start",
-        // 	fontSize: "1rem",
-        // 	fontWeight: "bold",
-        // },
-        // "& .ag-header-cell-centered .ag-header-cell-label": {
-        // 	justifyContent: "center !important",
-        // },
-        //
-        // "& .ag-header-cell-text": {
-        // 	textAlign: "start !important",
-        // },
-        //
-        // "& .ag-checkbox-input-wrapper": {
-        // 	margin: "0 10px",
-        // },
-        // "& .ag-cell": {
-        // 	padding: "2px !important",
-        // },
-        // "& .ag-header-cell": {
-        // 	padding: "0px !important",
-        // 	textAlign: "center !important",
-        // 	fontSize: 10,
-        // 	display: "flex",
-        // 	alignItems: "center",
-        // 	justifyContent: "center",
-        // },
-        // "& .ag-cell-wrapper": {},
-        // "& .ag-menu-option": {
-        // 	cursor: "pointer",
-        // },
     },
     card: {
-        backgroundColor: "#e9f2f8",
+        backgroundColor: "#ffffff",
         display: "flex",
         alignItems: "center",
         height: "100%",
-        // justifyContent: "center",
     },
     filters: {
         position: "relative",
@@ -3458,10 +3541,31 @@ var TableLogs = function (_a) {
         };
     }, []);
     var _l = useContextMenuMESF(), showContextMenu = _l.showContextMenu, registerConfig = _l.registerConfig;
-    var handleSubmit = function (ev) {
-        ev.preventDefault();
-        refreshData({ Start: Start, End: End, Search: Search, LogTypeCode: LogTypeCode });
-    };
+    // Debounced search timer ref
+    var searchTimeoutRef = useRef(null);
+    // Store current values in ref to avoid closure issues
+    var currentValues = useRef({ Start: Start, End: End, Search: Search, LogTypeCode: LogTypeCode });
+    currentValues.current = { Start: Start, End: End, Search: Search, LogTypeCode: LogTypeCode };
+    // Auto search when Search filter changes (with debounce)
+    useEffect(function () {
+        if (searchTimeoutRef.current) {
+            clearTimeout(searchTimeoutRef.current);
+        }
+        searchTimeoutRef.current = setTimeout(function () {
+            var _a = currentValues.current, currentStart = _a.Start, currentEnd = _a.End, currentSearch = _a.Search, currentLogTypeCode = _a.LogTypeCode;
+            refreshData({
+                Start: currentStart,
+                End: currentEnd,
+                Search: currentSearch,
+                LogTypeCode: currentLogTypeCode,
+            });
+        }, 500);
+        return function () {
+            if (searchTimeoutRef.current) {
+                clearTimeout(searchTimeoutRef.current);
+            }
+        };
+    }, [Search]);
     var handleResetButtonClick = function () {
         resetFilter();
         refreshData({
@@ -3484,15 +3588,15 @@ var TableLogs = function (_a) {
     }, [isLoading]);
     // Btn reset data
     var resetFilter = function () {
-        setStartFilter(null);
-        setEndFilter(null);
+        setStartFilter(moment$3().add(-5, "days").hour(0).minute(0).second(0).toDate());
+        setEndFilter(moment$3().hour(23).minute(59).second(59).toDate());
         setSearchFilter("");
         setLogTypeCodeFilter("A");
         setSelectedLog(undefined);
     };
     var rowClicked = function (rowClickedEvent) {
         var data = rowClickedEvent.data;
-        if (data)
+        if (!data)
             return;
         setSelectedLog(data);
         setShowLogModal(true);
@@ -3527,24 +3631,19 @@ var TableLogs = function (_a) {
                 React.createElement(Grid, { item: true, md: 12, xs: 12 },
                     React.createElement(Card, { className: classes.card },
                         React.createElement(CardContent, { style: { padding: "6px !important", width: "100%" } },
-                            React.createElement("form", { onSubmit: handleSubmit, className: classes.form },
-                                React.createElement(Grid, { container: true, alignItems: "center", direction: "row", spacing: 1 },
-                                    React.createElement(Grid, { item: true, md: 2, xs: 12 },
-                                        React.createElement(DateFilter, { label: "From", date: Start, setDate: setStartFilter })),
-                                    React.createElement(Grid, { item: true, md: 2, xs: 12 },
-                                        React.createElement(DateFilter, { label: "To", date: End, setDate: setEndFilter })),
-                                    React.createElement(Grid, { item: true, md: 2, xs: 12 },
-                                        React.createElement(CodeFilter, { LogTypeCode: LogTypeCode, setLogTypeCodeFilter: setLogTypeCodeFilter })),
-                                    React.createElement(Grid, { item: true, md: 2, xs: 12 },
-                                        React.createElement(TimezoneSelector, { value: Timezone, onChange: setTimezone })),
-                                    React.createElement(Grid, { item: true, container: true, md: 4, xs: 12, spacing: 1, justifyContent: "flex-end", alignItems: "flex-end" },
-                                        React.createElement(Grid, { item: true, md: 4, xs: 12 },
-                                            React.createElement(Button, { variant: "contained", color: "default", onClick: handleResetButtonClick, fullWidth: true }, "Reset")),
-                                        React.createElement(Grid, { item: true, md: 4, xs: 12 },
-                                            React.createElement(ButtonWithLoading, { isLoading: isLoading, fullWidth: true, variant: "contained", color: "primary", type: "submit" }, "Search")))),
-                                React.createElement(Grid, { container: true, direction: "row" },
-                                    React.createElement(Grid, { item: true, md: 12, xs: 12 },
-                                        React.createElement(SearchFilter, { search: Search, setSearch: setSearchFilter }))))))),
+                            React.createElement(Grid, { container: true, alignItems: "center", direction: "row", spacing: 1 },
+                                React.createElement(Grid, { item: true, md: 2, xs: 12 },
+                                    React.createElement(DateFilter, { label: "From", date: Start, setDate: setStartFilter, maxDate: End })),
+                                React.createElement(Grid, { item: true, md: 2, xs: 12 },
+                                    React.createElement(DateFilter, { label: "To", date: End, setDate: setEndFilter, minDate: Start })),
+                                React.createElement(Grid, { item: true, md: 1, xs: 12 },
+                                    React.createElement(CodeFilter, { LogTypeCode: LogTypeCode, setLogTypeCodeFilter: setLogTypeCodeFilter })),
+                                React.createElement(Grid, { item: true, md: 2, xs: 12 },
+                                    React.createElement(TimezoneSelector, { value: Timezone, onChange: setTimezone })),
+                                React.createElement(Grid, { item: true, md: 4, xs: 12 },
+                                    React.createElement(SearchFilter, { search: Search, setSearch: setSearchFilter })),
+                                React.createElement(Grid, { item: true, md: 1, xs: 12, style: { paddingTop: 8 } },
+                                    React.createElement(Button, { variant: "contained", color: "default", onClick: handleResetButtonClick, fullWidth: true, size: "small" }, "Reset")))))),
                 React.createElement(Grid, { item: true, md: 12, xs: 12, style: {
                         height: "70vh",
                     } },
@@ -11546,6 +11645,13 @@ var ColorPicker = function (_a) {
                 } })); })))));
 };
 
+var ButtonWithLoading = function (_a) {
+    var children = _a.children, isLoading = _a.isLoading, props = __rest(_a, ["children", "isLoading"]);
+    return (React__default.createElement(Button, __assign({}, props, { disabled: isLoading }),
+        isLoading && React__default.createElement(CircularProgress, { size: "1rem" }),
+        children));
+};
+
 var TrendingsInitialState = {
     timeScopeStart: moment$3(new Date()).subtract(1, "days").toDate(),
     timeScopeEnd: new Date(),
@@ -13477,12 +13583,12 @@ var TableComponent = function (_a) {
                                 React__default.createElement("td", { className: classes.doubleInput }, round((_c = dataTable[tag.TagName]) === null || _c === void 0 ? void 0 : _c.y2, 3) || 0),
                                 React__default.createElement("td", null, round((_d = dataTable[tag.TagName]) === null || _d === void 0 ? void 0 : _d.y2y1, 3) || 0),
                                 React__default.createElement("td", null,
-                                    !isNaN(((_e = dataTable[tag.TagName]) === null || _e === void 0 ? void 0 : _e.pmin.y) * 0)
+                                    !isNaN$1(((_e = dataTable[tag.TagName]) === null || _e === void 0 ? void 0 : _e.pmin.y) * 0)
                                         ? round((_f = dataTable[tag.TagName]) === null || _f === void 0 ? void 0 : _f.pmin.y, 3)
                                         : 0,
                                     " "),
                                 React__default.createElement("td", null,
-                                    !isNaN(((_g = dataTable[tag.TagName]) === null || _g === void 0 ? void 0 : _g.pmax.y) * 0)
+                                    !isNaN$1(((_g = dataTable[tag.TagName]) === null || _g === void 0 ? void 0 : _g.pmax.y) * 0)
                                         ? round((_h = dataTable[tag.TagName]) === null || _h === void 0 ? void 0 : _h.pmax.y)
                                         : 0,
                                     " ")));