@dexteel/mesf-core 7.11.2 → 7.12.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "7.11.2"
+  ".": "7.12.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [7.12.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.11.2...@dexteel/mesf-core-v7.12.0) (2026-01-22)
+
+
+### Features
+
+* **Logs:** Implement tag filtering functionality in logs ([9dc7efa](https://github.com/dexteel/mesf-core-frontend/commit/9dc7efa6b7d337bd9bc5903c45cc7a8b13a7c6de))
+
 ## [7.11.2](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.11.1...@dexteel/mesf-core-v7.11.2) (2026-01-22)
 
 

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { TagFilterContext, TagFilterType } from "../../models/Tag";
+type Props = {
+    tagFilters: TagFilterType[];
+    setTagFilters: (filters: TagFilterType[]) => void;
+    filterContext: TagFilterContext;
+};
+export declare const TagFilter: ({ tagFilters, setTagFilters, filterContext, }: Props) => React.JSX.Element;
+export {};

package/dist/configuration/pages/log/models/Tag.d.ts

@@ -0,0 +1,19 @@
+export interface Tag {
+    TagId: number;
+    TagName: string;
+    HasData: boolean;
+}
+export interface TagValue {
+    Value: string;
+    HasData: boolean;
+}
+export interface TagFilterType {
+    TagName: string;
+    Values: string[];
+}
+export interface TagFilterContext {
+    startDate: Date;
+    endDate: Date | null;
+    logTypeCode: string | null;
+    tagFilters: TagFilterType[];
+}

package/dist/configuration/pages/log/repositories/LogsRepository.d.ts

@@ -1,8 +1,10 @@
 import { Log } from "../models/Log";
+import { TagFilterType } from "../models/Tag";
 type Props = {
     startDate: Date;
     endDate: Date | null;
     logTypeCode: number | string | null;
+    tagFilters?: TagFilterType[];
 };
-export declare const getLogs: ({ startDate, endDate, logTypeCode }: Props) => Promise<Log[]>;
+export declare const getLogs: ({ startDate, endDate, logTypeCode, tagFilters, }: Props) => Promise<Log[]>;
 export {};

package/dist/configuration/pages/log/repositories/TagsRepository.d.ts

@@ -0,0 +1,3 @@
+import type { Tag, TagFilterContext, TagValue } from "../models/Tag";
+export declare const getLogTags: (context?: TagFilterContext) => Promise<Tag[]>;
+export declare const getLogTagValues: (tagName: string, context?: TagFilterContext) => Promise<TagValue[]>;

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 export * from '@microsoft/signalr';
 export { LicenseManager } from 'ag-grid-enterprise';
-import { styled, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Grid2, Button, Box, MenuItem, ListItemIcon, createTheme, TextField, Alert as Alert$2, useTheme, InputAdornment, Popover, MenuList, ListItemText, alpha, Dialog as Dialog$1, Paper, List, ListItem, Chip, SvgIcon, Typography as Typography$1, Checkbox, IconButton as IconButton$1, CircularProgress, FormControl, FormHelperText, FormControlLabel, Snackbar, DialogContentText, Badge, InputLabel, Select, Input, Divider, Card, CardContent, CardActions, Collapse, Tooltip, CssBaseline, AppBar, Toolbar, Container, Menu, Switch, Hidden, Drawer, Grid, Accordion, AccordionSummary, AccordionDetails, Tabs, Tab, Autocomplete as Autocomplete$1, useMediaQuery, ListSubheader, ListItemButton, StyledEngineProvider, ThemeProvider, ListItemSecondaryAction } from '@mui/material';
+import { styled, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Grid2, Button, Box, MenuItem, ListItemIcon, createTheme, TextField, Alert as Alert$2, useTheme, InputAdornment, Popover, MenuList, ListItemText, alpha, Dialog as Dialog$1, Paper, List, ListItem, Chip, SvgIcon, Typography as Typography$1, Checkbox, IconButton as IconButton$1, CircularProgress, FormControl, FormHelperText, FormControlLabel, Snackbar, DialogContentText, Badge, InputLabel, Select, Input, Divider, Card, CardContent, CardActions, Collapse, Tooltip, CssBaseline, AppBar, Toolbar, Container, Menu, Switch, Autocomplete, Hidden, Drawer, Grid, Accordion, AccordionSummary, AccordionDetails, Tabs, Tab, useMediaQuery, ListSubheader, ListItemButton, StyledEngineProvider, ThemeProvider, ListItemSecondaryAction } from '@mui/material';
 import { useMutation, useQuery, useQueryClient, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as React from 'react';
 import React__default, { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo, Component, lazy, Suspense } from 'react';
@@ -11,7 +11,7 @@ import { createPart, themeMaterial, provideGlobalGridOptions } from 'ag-grid-com
 import { values, get, isEmpty, isNil } from 'lodash-es';
 import { useForm, Controller } from 'react-hook-form';
 import { isAncestor, Tree, DndProvider as DndProvider$1 } from '@minoru/react-dnd-treeview';
-import { Alert as Alert$4, AlertTitle, Autocomplete } from '@mui/lab';
+import { Alert as Alert$4, AlertTitle, Autocomplete as Autocomplete$1 } from '@mui/lab';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import AccountTree from '@mui/icons-material/AccountTree';
 import Settings$1 from '@mui/icons-material/Settings';
@@ -50,6 +50,8 @@ import ToggleOfIcon from '@mui/icons-material/ToggleOff';
 import ToggleOnIcon from '@mui/icons-material/ToggleOn';
 import { useComplexState } from 'use-complex-state';
 import { createSlice } from '@reduxjs/toolkit';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -7239,6 +7241,246 @@ const JobsPage = (props) => {
         React.createElement(Jobs, null)));
 };
 
+// Get all tags that have been used in logs
+const getLogTags = (context) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const apiService = new MESApiService();
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    const parameters = context
+        ? [
+            { name: "Start", value: context.startDate },
+            { name: "End", value: (_a = context.endDate) !== null && _a !== void 0 ? _a : tomorrow },
+            {
+                name: "LogTypeCode",
+                value: context.logTypeCode === "A" ? null : context.logTypeCode,
+            },
+            {
+                name: "TagFilters",
+                value: context.tagFilters.length > 0
+                    ? JSON.stringify(context.tagFilters)
+                    : null,
+            },
+        ]
+        : [];
+    const resp = yield apiService.callV2("[SYSTEM].[GetLogTags]", parameters);
+    if (resp.ok) {
+        const rows = get(resp, "data.tables[0].rows", []);
+        return rows;
+    }
+    else {
+        throw new Error(resp.message || "Error fetching log tags");
+    }
+});
+// Get all distinct values for a specific tag
+const getLogTagValues = (tagName, context) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const apiService = new MESApiService();
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    // When getting values for a tag, exclude that tag from the filter context
+    // so we show all possible values that match the OTHER filters
+    const otherTagFilters = context === null || context === void 0 ? void 0 : context.tagFilters.filter((f) => f.TagName !== tagName);
+    const parameters = [
+        { name: "TagName", value: tagName },
+        ...(context
+            ? [
+                { name: "Start", value: context.startDate },
+                { name: "End", value: (_a = context.endDate) !== null && _a !== void 0 ? _a : tomorrow },
+                {
+                    name: "LogTypeCode",
+                    value: context.logTypeCode === "A" ? null : context.logTypeCode,
+                },
+                {
+                    name: "TagFilters",
+                    value: otherTagFilters && otherTagFilters.length > 0
+                        ? JSON.stringify(otherTagFilters)
+                        : null,
+                },
+            ]
+            : []),
+    ];
+    const resp = yield apiService.callV2("[SYSTEM].[GetLogTagValues]", parameters);
+    if (resp.ok) {
+        const rows = get(resp, "data.tables[0].rows", []);
+        return rows;
+    }
+    else {
+        throw new Error(resp.message || "Error fetching tag values");
+    }
+});
+
+const icon = React__default.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
+const checkedIcon = React__default.createElement(CheckBoxIcon, { fontSize: "small" });
+const useSearchLogTags = ({ startDate, endDate, logTypeCode, tagFilters, }) => {
+    return useQuery({
+        queryKey: [
+            "logTags",
+            startDate.getTime(),
+            endDate === null || endDate === void 0 ? void 0 : endDate.getTime(),
+            logTypeCode,
+            tagFilters,
+        ],
+        queryFn: () => getLogTags({ startDate, endDate, logTypeCode, tagFilters }),
+    });
+};
+const useSearchLogTagValues = ({ tagName, startDate, endDate, logTypeCode, tagFilters, }) => {
+    return useQuery({
+        queryKey: [
+            "logTagValues",
+            tagName,
+            startDate,
+            endDate,
+            logTypeCode,
+            tagFilters,
+        ],
+        queryFn: () => getLogTagValues(tagName, { startDate, endDate, logTypeCode, tagFilters }),
+        enabled: !!tagName,
+    });
+};
+const TagFilter = ({ tagFilters, setTagFilters, filterContext, }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [selectedTag, setSelectedTag] = useState(null);
+    const [selectedValues, setSelectedValues] = useState([]);
+    const [showOnlyWithData, setShowOnlyWithData] = useState(true);
+    const [error, setError] = useState("");
+    const { data: availableTags, isLoading: isLoadingTags, error: tagsError, isError: isTagsError, } = useSearchLogTags({
+        startDate: filterContext.startDate,
+        endDate: filterContext.endDate,
+        logTypeCode: filterContext.logTypeCode,
+        tagFilters,
+    });
+    const { data: tagValues, isLoading: isLoadingValues, error: valuesError, isError: isValuesError, } = useSearchLogTagValues({
+        tagName: selectedTag ? selectedTag.TagName : "",
+        startDate: filterContext.startDate,
+        endDate: filterContext.endDate,
+        logTypeCode: filterContext.logTypeCode,
+        tagFilters,
+    });
+    const handleOpenPopover = (event) => {
+        setAnchorEl(event.currentTarget);
+        setSelectedTag(null);
+        setSelectedValues([]);
+    };
+    const handleClosePopover = () => {
+        setAnchorEl(null);
+        setSelectedTag(null);
+        setSelectedValues([]);
+    };
+    const handleAddFilter = () => {
+        if (selectedTag && selectedValues.length > 0) {
+            // Check if this tag already has a filter
+            const existingIndex = tagFilters.findIndex((f) => f.TagName === selectedTag.TagName);
+            const valueStrings = selectedValues.map((v) => v.Value);
+            if (existingIndex >= 0) {
+                // Update existing filter
+                const newFilters = [...tagFilters];
+                newFilters[existingIndex] = {
+                    TagName: selectedTag.TagName,
+                    Values: valueStrings,
+                };
+                setTagFilters(newFilters);
+            }
+            else {
+                // Add new filter
+                setTagFilters([
+                    ...tagFilters,
+                    {
+                        TagName: selectedTag.TagName,
+                        Values: valueStrings,
+                    },
+                ]);
+            }
+            handleClosePopover();
+        }
+    };
+    const handleRemoveFilter = (tagName) => {
+        setTagFilters(tagFilters.filter((f) => f.TagName !== tagName));
+    };
+    const handleEditFilter = (event, filter) => {
+        const tag = availableTags === null || availableTags === void 0 ? void 0 : availableTags.find((t) => t.TagName === filter.TagName);
+        if (tag) {
+            setSelectedTag(tag);
+            setSelectedValues(filter.Values.map((v) => ({ Value: v, HasData: true })));
+            setAnchorEl(event.currentTarget);
+        }
+    };
+    const availableTagsForSelection = (availableTags === null || availableTags === void 0 ? void 0 : availableTags.filter((tag) => (!tagFilters.some((f) => f.TagName === tag.TagName) ||
+        (selectedTag === null || selectedTag === void 0 ? void 0 : selectedTag.TagName) === tag.TagName) &&
+        (!showOnlyWithData || tag.HasData))) || [];
+    const availableTagValues = (tagValues === null || tagValues === void 0 ? void 0 : tagValues.filter((tv) => !showOnlyWithData || tv.HasData)) || [];
+    const open = Boolean(anchorEl);
+    useEffect(() => {
+        if (tagValues && selectedValues.length > 0) {
+            const syncedValues = selectedValues
+                .map((sv) => tagValues.find((tv) => tv.Value === sv.Value))
+                .filter((tv) => tv !== undefined);
+            if (syncedValues.length > 0) {
+                setSelectedValues(syncedValues);
+            }
+        }
+    }, [tagValues]);
+    useEffect(() => {
+        if (isTagsError && tagsError) {
+            setError(tagsError.message);
+        }
+        if (isValuesError && valuesError) {
+            setError(valuesError.message);
+        }
+    }, [isTagsError, tagsError, isValuesError, valuesError]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Box, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" } },
+            React__default.createElement(Typography$1, { variant: "body2", sx: { fontWeight: 500, color: "#666" } }, "Tags:"),
+            tagFilters.map((filter) => {
+                const tag = availableTags === null || availableTags === void 0 ? void 0 : availableTags.find((t) => t.TagName === filter.TagName);
+                const hasData = (tag === null || tag === void 0 ? void 0 : tag.HasData) !== false;
+                return (React__default.createElement(Chip, { key: filter.TagName, label: `${filter.TagName} = ${filter.Values.join(", ")}`, onDelete: () => handleRemoveFilter(filter.TagName), onClick: (e) => handleEditFilter(e, filter), size: "small", color: hasData ? "primary" : "default", variant: "outlined", sx: {
+                        cursor: "pointer",
+                        opacity: hasData ? 1 : 0.5,
+                    } }));
+            }),
+            isLoadingTags ? (React__default.createElement(CircularProgress, { size: 20 })) : (availableTagsForSelection.length > 0 && (React__default.createElement(Button, { size: "small", variant: "text", onClick: handleOpenPopover, sx: { minWidth: "auto", textTransform: "none" } }, "+ Add Tag Filter"))),
+            React__default.createElement(Popover, { open: open, anchorEl: anchorEl, onClose: handleClosePopover, anchorOrigin: {
+                    vertical: "bottom",
+                    horizontal: "left",
+                }, transformOrigin: {
+                    vertical: "top",
+                    horizontal: "left",
+                } },
+                React__default.createElement(Box, { sx: {
+                        p: 2,
+                        minWidth: 350,
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: 2,
+                    } },
+                    React__default.createElement(Box, { sx: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                        } },
+                        React__default.createElement(Typography$1, { variant: "subtitle2" }, selectedTag ? "Edit Tag Filter" : "Add Tag Filter"),
+                        React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { size: "small", checked: showOnlyWithData, onChange: (e) => setShowOnlyWithData(e.target.checked) }), label: React__default.createElement(Typography$1, { variant: "caption" }, "Only with data"), sx: { mr: 0 } })),
+                    React__default.createElement(Autocomplete, { size: "small", options: availableTagsForSelection, getOptionLabel: (option) => option.TagName, value: selectedTag, onChange: (_, newValue) => {
+                            setSelectedTag(newValue);
+                            setSelectedValues([]);
+                        }, renderOption: (props, option) => (React__default.createElement("li", Object.assign({}, props, { style: {
+                                opacity: option.HasData ? 1 : 0.8,
+                            } }), option.TagName)), renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: "Tag Name", variant: "outlined" }))) }),
+                    selectedTag && (React__default.createElement(React__default.Fragment, null, isLoadingValues ? (React__default.createElement(Box, { sx: { display: "flex", justifyContent: "center", py: 2 } },
+                        React__default.createElement(CircularProgress, { size: 24 }))) : (React__default.createElement(Autocomplete, { multiple: true, size: "small", options: availableTagValues, getOptionLabel: (option) => option.Value, value: selectedValues, onChange: (_, newValue) => setSelectedValues(newValue), isOptionEqualToValue: (option, value) => option.Value === value.Value, disableCloseOnSelect: true, renderOption: (props, option, { selected }) => (React__default.createElement("li", Object.assign({}, props, { style: {
+                                opacity: option.HasData ? 1 : 0.8,
+                            } }),
+                            React__default.createElement(Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected, size: "small" }),
+                            option.Value)), renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: "Tag Values", variant: "outlined", placeholder: "Select values..." }))) })))),
+                    React__default.createElement(Box, { sx: { display: "flex", justifyContent: "flex-end", gap: 1 } },
+                        React__default.createElement(Button, { size: "small", onClick: handleClosePopover }, "Cancel"),
+                        React__default.createElement(Button, { size: "small", variant: "contained", onClick: handleAddFilter, disabled: !selectedTag || selectedValues.length === 0 }, tagFilters.some((f) => f.TagName === (selectedTag === null || selectedTag === void 0 ? void 0 : selectedTag.TagName))
+                            ? "Update"
+                            : "Add"))))),
+        React__default.createElement(ErrorModal, { error: error, onHide: () => setError("") })));
+};
+
 const LOG_TYPE_CODES = {
     I: { id: "I", color: "#3f51b5", description: "Info" },
     E: { id: "E", color: "#f44336", description: "Error" },
@@ -7384,11 +7626,12 @@ const useLogTableData = () => {
 };
 
 //fx obtener logs
-const getLogs = (_a) => __awaiter(void 0, [_a], void 0, function* ({ startDate, endDate, logTypeCode }) {
+const getLogs = (_a) => __awaiter(void 0, [_a], void 0, function* ({ startDate, endDate, logTypeCode, tagFilters, }) {
     const apiService = new MESApiService();
     const tomorrow = new Date();
     tomorrow.setDate(tomorrow.getDate() + 1);
     const end = endDate ? endDate : tomorrow;
+    const tagFiltersJson = tagFilters && tagFilters.length > 0 ? JSON.stringify(tagFilters) : null;
     const parameters = [
         { name: "Start", value: startDate },
         { name: "End", value: end },
@@ -7396,6 +7639,7 @@ const getLogs = (_a) => __awaiter(void 0, [_a], void 0, function* ({ startDate,
             name: "LogTypeCode",
             value: logTypeCode === "A" ? null : logTypeCode,
         },
+        { name: "TagFilters", value: tagFiltersJson },
     ];
     const resp = yield apiService.callV2("[MES].[GetLogs]", parameters);
     if (resp.ok) {
@@ -7506,13 +7750,14 @@ const useLogsOptionsFunctions = ({ setSelectedLog, setShowLogModal, handleResetB
     };
 };
 
-const useSearchLogs = ({ startDate, endDate, logTypeCode, autoRefresh, }) => {
+const useSearchLogs = ({ startDate, endDate, logTypeCode, autoRefresh, tagFilters, }) => {
     return useQuery({
-        queryKey: ["logs", startDate, endDate, logTypeCode],
+        queryKey: ["logs", startDate, endDate, logTypeCode, tagFilters],
         queryFn: () => getLogs({
             startDate,
             endDate,
             logTypeCode,
+            tagFilters,
         }),
         refetchInterval: autoRefresh ? 5000 : false,
     });
@@ -7527,6 +7772,7 @@ const TableLogs = () => {
     const [search, setSearch] = useState("");
     const [logTypeCode, setLogTypeCode] = useState(["I", "W", "E"]);
     const [autoRefresh, setAutoRefresh] = useState(false);
+    const [tagFilters, setTagFilters] = useState([]);
     const [gridAPI, setGridAPI] = useState(null);
     const [error, setError] = useState("");
     const [showLogModal, setShowLogModal] = useState(false);
@@ -7536,6 +7782,7 @@ const TableLogs = () => {
         endDate,
         logTypeCode: logTypeCode.join(","),
         autoRefresh,
+        tagFilters,
     });
     const onGridReady = (params) => {
         setGridAPI(params.api);
@@ -7567,23 +7814,15 @@ const TableLogs = () => {
     }, []);
     const { showContextMenu, registerConfig } = useContextMenuMESF();
     const handleResetButtonClick = () => {
-        resetFilter();
-        setStartDate(moment$f().add(-5, "days").hour(0).minute(0).second(0).toDate());
-        setEndDate(moment$f().hour(23).minute(59).second(59).toDate());
-        setSearch("");
-        gridAPI === null || gridAPI === void 0 ? void 0 : gridAPI.setGridOption("quickFilterText", "");
-        setLogTypeCode(["I", "W", "E"]);
-        refetch();
-        setError("");
-    };
-    // Btn reset data
-    const resetFilter = () => {
         setStartDate(moment$f().add(-5, "days").hour(0).minute(0).second(0).toDate());
         setEndDate(moment$f().hour(23).minute(59).second(59).toDate());
         setSearch("");
         gridAPI === null || gridAPI === void 0 ? void 0 : gridAPI.setGridOption("quickFilterText", "");
         setLogTypeCode(["I", "W", "E"]);
+        setTagFilters([]);
         setSelectedLog(undefined);
+        setError("");
+        refetch();
     };
     const rowClicked = (rowClickedEvent) => {
         let data = rowClickedEvent.data;
@@ -7670,7 +7909,14 @@ const TableLogs = () => {
                                             gridAPI === null || gridAPI === void 0 ? void 0 : gridAPI.setGridOption("quickFilterText", search);
                                         } })),
                                 React.createElement(Grid2, { size: { md: 1, xs: 12 }, style: { paddingTop: 8 } },
-                                    React.createElement(Button, { variant: "contained", color: "inherit", onClick: handleResetButtonClick, fullWidth: true }, "Reset")))))),
+                                    React.createElement(Button, { variant: "contained", color: "inherit", onClick: handleResetButtonClick, fullWidth: true }, "Reset")),
+                                React.createElement(Grid2, { size: { md: 12, xs: 12 }, sx: { mt: 1 } },
+                                    React.createElement(TagFilter, { tagFilters: tagFilters, setTagFilters: setTagFilters, filterContext: {
+                                            startDate,
+                                            endDate,
+                                            logTypeCode: logTypeCode.join(","),
+                                            tagFilters,
+                                        } })))))),
                 React.createElement(Grid2, { size: { md: 12, xs: 12 }, style: {
                         height: "70vh",
                     } },
@@ -9627,9 +9873,9 @@ const QueryCacheInvalidations = () => {
                     React__default.createElement(MesfModal.Content, { dividers: true },
                         React__default.createElement(Grid2, { container: true, spacing: 3 },
                             React__default.createElement(Grid2, { size: { xs: 12 } },
-                                React__default.createElement(Controller, { control: control, name: "source", render: (params) => (React__default.createElement(Autocomplete, { options: actions, getOptionLabel: (option) => `${option.ActionName}`, value: params.field.value, onChange: (_, value) => params.field.onChange(value), renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: "Select Source Action", variant: "outlined", size: "medium" }))), disabled: modal === "edit" })) })),
+                                React__default.createElement(Controller, { control: control, name: "source", render: (params) => (React__default.createElement(Autocomplete$1, { options: actions, getOptionLabel: (option) => `${option.ActionName}`, value: params.field.value, onChange: (_, value) => params.field.onChange(value), renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: "Select Source Action", variant: "outlined", size: "medium" }))), disabled: modal === "edit" })) })),
                             React__default.createElement(Grid2, { size: { xs: 12 } },
-                                React__default.createElement(Controller, { control: control, name: "targets", render: (params) => (React__default.createElement(Autocomplete, { multiple: true, options: actions.filter((a) => { var _a; return a.ActionId !== ((_a = control._formValues.source) === null || _a === void 0 ? void 0 : _a.ActionId); }), getOptionLabel: (option) => {
+                                React__default.createElement(Controller, { control: control, name: "targets", render: (params) => (React__default.createElement(Autocomplete$1, { multiple: true, options: actions.filter((a) => { var _a; return a.ActionId !== ((_a = control._formValues.source) === null || _a === void 0 ? void 0 : _a.ActionId); }), getOptionLabel: (option) => {
                                             if (typeof option === "string") {
                                                 return option;
                                             }
@@ -9928,7 +10174,7 @@ const ResultsList = ({ results, onDeleteResult, onClearAll }) => {
 };
 
 const SPAutocomplete = ({ procedures, value, onChange, isLoading, disabled = false, }) => {
-    return (React__default.createElement(Autocomplete$1, { options: procedures, value: value, onChange: (_, newValue) => onChange(newValue), getOptionLabel: (option) => option.FullName, groupBy: (option) => option.SchemaName, disabled: disabled, isOptionEqualToValue: (option, val) => option.FullName === val.FullName, renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: "Select Stored Procedure", variant: "outlined", fullWidth: true, slotProps: {
+    return (React__default.createElement(Autocomplete, { options: procedures, value: value, onChange: (_, newValue) => onChange(newValue), getOptionLabel: (option) => option.FullName, groupBy: (option) => option.SchemaName, disabled: disabled, isOptionEqualToValue: (option, val) => option.FullName === val.FullName, renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: "Select Stored Procedure", variant: "outlined", fullWidth: true, slotProps: {
                 input: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (React__default.createElement(React__default.Fragment, null, isLoading ? (React__default.createElement(CircularProgress, { color: "inherit", size: 20 })) : (params.InputProps.endAdornment))) }),
             } }))), renderOption: (props, option) => (React__default.createElement("li", Object.assign({}, props, { key: option.FullName }),
             option.SchemaName,
@@ -10812,7 +11058,7 @@ const SaveUpdateDeleteViewModalV2 = ({ open, mode, handleClose, view, }) => {
             React__default.createElement("form", { onSubmit: handleSubmit(onSubmit) },
                 React__default.createElement(MesfModal.Content, { dividers: true, style: { padding: "15px 30px" } },
                     React__default.createElement(Grid2, { container: true, spacing: 1 },
-                        React__default.createElement(Grid2, { size: 12 }, mode === "create" && views.length > 0 && viewSelected ? (React__default.createElement(Autocomplete$1, { size: "small", id: "list-of-views", options: views, defaultValue: viewSelected, getOptionLabel: (option) => {
+                        React__default.createElement(Grid2, { size: 12 }, mode === "create" && views.length > 0 && viewSelected ? (React__default.createElement(Autocomplete, { size: "small", id: "list-of-views", options: views, defaultValue: viewSelected, getOptionLabel: (option) => {
                                 if (typeof option === "string") {
                                     return option;
                                 }
@@ -11242,7 +11488,7 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
                         backgroundColor: "white",
                         width: "100%",
                     } },
-                    React__default.createElement(Autocomplete$1, { size: "small", id: "view-selector", options: views, getOptionLabel: (option) => option.ViewName, value: viewSelected, isOptionEqualToValue: (option, value) => option.ViewId === (value === null || value === void 0 ? void 0 : value.ViewId), onChange: handleViewChange, noOptionsText: "No views available", renderOption: (props, option) => (React__default.createElement(Box, Object.assign({}, props, { component: "li", style: {
+                    React__default.createElement(Autocomplete, { size: "small", id: "view-selector", options: views, getOptionLabel: (option) => option.ViewName, value: viewSelected, isOptionEqualToValue: (option, value) => option.ViewId === (value === null || value === void 0 ? void 0 : value.ViewId), onChange: handleViewChange, noOptionsText: "No views available", renderOption: (props, option) => (React__default.createElement(Box, Object.assign({}, props, { component: "li", style: {
                                 display: "flex",
                                 justifyContent: "space-between",
                                 width: "100%",
@@ -12163,7 +12409,7 @@ const BitSelectorModal = ({ open, handleClose, viewTags, onAddBits, existingBitT
             React__default.createElement(Grid2, { container: true, spacing: 2 },
                 React__default.createElement(Grid2, { size: 12 },
                     React__default.createElement(Typography$1, { variant: "subtitle2", sx: { mb: 1 } }, "Select Source Tag"),
-                    React__default.createElement(Autocomplete$1, { size: "small", id: "source-tag-selector", options: availableTags, getOptionLabel: (option) => option.Alias || option.TagName, value: selectedTag, onChange: handleTagChange, noOptionsText: "No tags available in current view", renderOption: (props, option) => (React__default.createElement(Box, Object.assign({}, props, { component: "li" }),
+                    React__default.createElement(Autocomplete, { size: "small", id: "source-tag-selector", options: availableTags, getOptionLabel: (option) => option.Alias || option.TagName, value: selectedTag, onChange: handleTagChange, noOptionsText: "No tags available in current view", renderOption: (props, option) => (React__default.createElement(Box, Object.assign({}, props, { component: "li" }),
                             React__default.createElement(Box, { sx: {
                                     display: "flex",
                                     justifyContent: "space-between",
@@ -12273,7 +12519,7 @@ const LoadViewModalV2 = ({ open, handleClose }) => {
                                 React__default.createElement("input", { type: "checkbox", checked: allViewsChecked, onChange: handleAllViewsCheckbox }),
                                 React__default.createElement(Typography$1, null, "All Views")))),
                     React__default.createElement(Grid2, { size: 12 },
-                        React__default.createElement(Autocomplete$1, { size: "small", id: "list-of-views", noOptionsText: allViewsChecked
+                        React__default.createElement(Autocomplete, { size: "small", id: "list-of-views", noOptionsText: allViewsChecked
                                 ? "No views detected, please create a new view"
                                 : "No public views detected, please create a new view", options: displayedViews, getOptionLabel: (option) => option.ViewName, onChange: (ev, val) => setOptionSelected(val), defaultValue: optionSelected || viewSelected, style: { width: "100%" }, renderOption: (props, option) => (React__default.createElement(Box, Object.assign({}, props, { component: "li" }),
                                 React__default.createElement(Box, { sx: {
@@ -15501,7 +15747,7 @@ const AssetsFilter = ({ label = "Asset", value, onChange, filterAreaAssets = fal
     ];
     const selectedOption = options.find((option) => option.value === (value || null)) || options[0];
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Autocomplete$1, { options: filterAreaAssets ? options.filter((o) => o.isAreaAsset) : options, value: selectedOption, onChange: (event, newValue) => {
+        React__default.createElement(Autocomplete, { options: filterAreaAssets ? options.filter((o) => o.isAreaAsset) : options, value: selectedOption, onChange: (event, newValue) => {
                 var _a;
                 if (newValue) {
                     onChange((_a = newValue.value) !== null && _a !== void 0 ? _a : null);
@@ -15592,7 +15838,7 @@ const ShiftAutocomplete = ({ currentShiftId, value, onShiftSelected, disabled, s
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Grid2, { container: true },
             React__default.createElement(Grid2, { size: { xs: 12 } },
-                React__default.createElement(Autocomplete, { loading: isLoading, options: rows || [], getOptionLabel: (option) => {
+                React__default.createElement(Autocomplete$1, { loading: isLoading, options: rows || [], getOptionLabel: (option) => {
                         return `${moment$c
                             .utc(option.ProductionDate)
                             .format("MM/DD/YYYY")} - ${option.Shift} - ${option.Crew}`;
@@ -15620,7 +15866,7 @@ const ShiftSelector = ({ label = "Shift - Crew", value, onChange = () => { }, fi
         }
     }, [isError, e]);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Autocomplete, { id: "clear-on-escape", clearOnEscape: true, options: shifts || [], getOptionLabel: (option) => `${option.CurrentShift} - ${option.CurrentCrew}`, disabled: disabled, renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: label, variant: "outlined", fullWidth: true, size: "small", error: !!fieldError, helperText: fieldError === null || fieldError === void 0 ? void 0 : fieldError.message, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (React__default.createElement(React__default.Fragment, null, isLoading ? (React__default.createElement(CircularProgress, { color: "inherit", size: 20 })) : (React__default.createElement(React__default.Fragment, null, params.InputProps.endAdornment)))) }) }))), value: selectedShift, onChange: (event, newValue) => {
+        React__default.createElement(Autocomplete$1, { id: "clear-on-escape", clearOnEscape: true, options: shifts || [], getOptionLabel: (option) => `${option.CurrentShift} - ${option.CurrentCrew}`, disabled: disabled, renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: label, variant: "outlined", fullWidth: true, size: "small", error: !!fieldError, helperText: fieldError === null || fieldError === void 0 ? void 0 : fieldError.message, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (React__default.createElement(React__default.Fragment, null, isLoading ? (React__default.createElement(CircularProgress, { color: "inherit", size: 20 })) : (React__default.createElement(React__default.Fragment, null, params.InputProps.endAdornment)))) }) }))), value: selectedShift, onChange: (event, newValue) => {
                 var _a;
                 onChange((_a = newValue === null || newValue === void 0 ? void 0 : newValue.CurrentShiftId) !== null && _a !== void 0 ? _a : null);
             } }),
@@ -17858,7 +18104,7 @@ const SectionSelector = ({ value, onChange, topSectionsCount = 5, disabled = fal
             gap: 1,
             flexWrap: "wrap",
         } },
-        React__default.createElement(Autocomplete$1, { open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), value: value, onChange: (_, newValue) => onChange(newValue), inputValue: inputValue, onInputChange: (_, newInputValue) => setInputValue(newInputValue), options: options, loading: loading, disabled: disabled, getOptionLabel: (option) => option.SectionName, isOptionEqualToValue: (option, value) => option.SectionId === value.SectionId, sx: { minWidth: 120, maxWidth: 150 }, renderOption: (props, option) => (React__default.createElement(Box, Object.assign({ component: "li" }, props, { key: option.SectionId, sx: { display: "flex", justifyContent: "space-between" } }),
+        React__default.createElement(Autocomplete, { open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), value: value, onChange: (_, newValue) => onChange(newValue), inputValue: inputValue, onInputChange: (_, newInputValue) => setInputValue(newInputValue), options: options, loading: loading, disabled: disabled, getOptionLabel: (option) => option.SectionName, isOptionEqualToValue: (option, value) => option.SectionId === value.SectionId, sx: { minWidth: 120, maxWidth: 150 }, renderOption: (props, option) => (React__default.createElement(Box, Object.assign({ component: "li" }, props, { key: option.SectionId, sx: { display: "flex", justifyContent: "space-between" } }),
                 React__default.createElement(Typography$1, { fontWeight: 500 }, option.SectionName))), renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: label, placeholder: "####", size: "small", slotProps: {
                     input: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (React__default.createElement(React__default.Fragment, null,
                             loading ? (React__default.createElement(CircularProgress, { color: "inherit", size: 16 })) : null,
@@ -17904,7 +18150,7 @@ const SectionMultiSelect = ({ value, onChange, topSectionsCount = 5, disabled =
             gap: 1,
             flexWrap: "wrap",
         } },
-        React__default.createElement(Autocomplete$1, { multiple: true, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), value: value, onChange: (_, newValue) => onChange(newValue), inputValue: inputValue, onInputChange: (_, newInputValue) => setInputValue(newInputValue), options: options, loading: loading, disabled: disabled, getOptionLabel: (option) => option.SectionName, isOptionEqualToValue: (option, val) => option.SectionId === val.SectionId, limitTags: 2, size: "small", sx: { minWidth: 200, flex: 1 }, renderOption: (props, option) => (React__default.createElement(Box, Object.assign({ component: "li" }, props, { key: option.SectionId, sx: { display: "flex", justifyContent: "space-between" } }),
+        React__default.createElement(Autocomplete, { multiple: true, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), value: value, onChange: (_, newValue) => onChange(newValue), inputValue: inputValue, onInputChange: (_, newInputValue) => setInputValue(newInputValue), options: options, loading: loading, disabled: disabled, getOptionLabel: (option) => option.SectionName, isOptionEqualToValue: (option, val) => option.SectionId === val.SectionId, limitTags: 2, size: "small", sx: { minWidth: 200, flex: 1 }, renderOption: (props, option) => (React__default.createElement(Box, Object.assign({ component: "li" }, props, { key: option.SectionId, sx: { display: "flex", justifyContent: "space-between" } }),
                 React__default.createElement(Typography$1, { fontWeight: 500 }, option.SectionName))), renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: label, placeholder: value.length === 0 ? "All sections" : "", size: "small", slotProps: {
                     input: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (React__default.createElement(React__default.Fragment, null,
                             loading ? (React__default.createElement(CircularProgress, { color: "inherit", size: 16 })) : null,