@dexteel/mesf-core 4.6.1 → 4.7.0

package/dist/index.esm.js

@@ -1,4 +1,5 @@
-import { Typography, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Checkbox, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, useTheme as useTheme$1, Box, Divider, Tooltip, IconButton as IconButton$1, FormControl as FormControl$1, Select as Select$1, debounce, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
+export { LicenseManager } from 'ag-grid-enterprise';
+import { Typography, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Checkbox, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, useTheme as useTheme$1, createStyles as createStyles$1, FormControl as FormControl$1, Select as Select$1, Box, Divider, Tooltip, IconButton as IconButton$1, debounce, List, ListItem, ListItemText } from '@material-ui/core';
 import { values, get, isNil as isNil$1, isEmpty, isNaN } from 'lodash-es';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, Component, createContext, useContext, useMemo, useCallback, lazy, Suspense } from 'react';
@@ -20,6 +21,11 @@ import Grid from '@material-ui/core/Grid';
 import { isNil, get as get$1 } from 'lodash';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import { AgGridReact } from 'ag-grid-react';
+import { withStyles, alpha, makeStyles, createStyles, useTheme } from '@material-ui/core/styles';
+import Typography$1 from '@material-ui/core/Typography';
+import { useForm, Controller, get as get$2 } from 'react-hook-form';
+import { Alert as Alert$3, TreeView as TreeView$1, TreeItem as TreeItem$1, Autocomplete } from '@material-ui/lab';
 import moment from 'moment';
 import axios from 'axios';
 import { _adapters, Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip as Tooltip$1, Legend, TimeScale } from 'chart.js';
@@ -28,14 +34,12 @@ import Popover from '@material-ui/core/Popover';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import FolderIcon from '@material-ui/icons/Folder';
 import InsertDriveFileIcon from '@material-ui/icons/InsertDriveFile';
-import { Alert as Alert$3, TreeView as TreeView$1, TreeItem as TreeItem$1, Autocomplete } from '@material-ui/lab';
 import { ArrowRight, ChevronLeft, ChevronRight } from '@material-ui/icons';
 import { Line } from 'react-chartjs-2';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
 import PropTypes from 'prop-types';
 import { ResponsiveBar } from '@nivo/bar';
 import Select from '@material-ui/core/Select';
-import { withStyles, alpha, makeStyles, createStyles, useTheme } from '@material-ui/core/styles';
 import Collapse from '@material-ui/core/Collapse';
 import SvgIcon from '@material-ui/core/SvgIcon';
 import Code from '@material-ui/icons/Code';
@@ -47,11 +51,9 @@ import { DataGrid, GridOverlay } from '@material-ui/data-grid';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
-import Typography$1 from '@material-ui/core/Typography';
 import Snackbar from '@material-ui/core/Snackbar';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import Alert$2 from '@material-ui/lab/Alert';
-import { AgGridReact } from 'ag-grid-react';
 import FormatListBulletedSharpIcon from '@material-ui/icons/FormatListBulletedSharp';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
@@ -59,8 +61,6 @@ import TextField$1 from '@material-ui/core/TextField';
 import { MuiPickersUtilsProvider, KeyboardDatePicker, KeyboardTimePicker } from '@material-ui/pickers';
 import MomentUtils from '@date-io/moment';
 import InputLabel from '@material-ui/core/InputLabel';
-import 'ag-grid-enterprise';
-import { useForm, Controller } from 'react-hook-form';
 import DialogContentText$1 from '@material-ui/core/DialogContentText';
 import DeleteIcon from '@material-ui/icons/Delete';
 import EditIcon from '@material-ui/icons/Edit';
@@ -1028,7 +1028,7 @@ var LazyLoading = function () {
             React__default.createElement("div", null))));
 };
 
-var useStyles$s = makeStyles$1(function (theme) { return ({
+var useStyles$z = makeStyles$1(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -1046,7 +1046,7 @@ var useStyles$s = makeStyles$1(function (theme) { return ({
 var useJobsTableData = function (_a) {
     var setRowSelected = _a.setRowSelected;
     var _b = useJobsContext().state, jobsData = _b.jobsData, blockButtons = _b.blockButtons;
-    var classes = useStyles$s();
+    var classes = useStyles$z();
     var rows = jobsData.map(function (_a) {
         var JobId = _a.JobId, sProcedure = _a.sProcedure, Running = _a.Running, LastStarted = _a.LastStarted, LastCounter = _a.LastCounter, Enabled = _a.Enabled, RestartAfterFailure = _a.RestartAfterFailure, PeriodTime = _a.PeriodTime, StartTime = _a.StartTime, NextExecutionTime = _a.NextExecutionTime;
         return ({
@@ -1414,7 +1414,7 @@ var OnEnableJob = function (_a) {
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
-var useStyles$r = makeStyles(function (theme) { return ({
+var useStyles$y = makeStyles(function (theme) { return ({
     root: {
         "& .MuiDataGrid-row": {
             cursor: "pointer"
@@ -1475,7 +1475,7 @@ var useStyles$r = makeStyles(function (theme) { return ({
     }
 }); });
 var TableJobs = function () {
-    var classes = useStyles$r();
+    var classes = useStyles$y();
     var _a = useState(""), error = _a[0], setError = _a[1];
     var _b = useState(true), loading = _b[0], setLoading = _b[1];
     var _c = useState(null), rowSelected = _c[0], setRowSelected = _c[1];
@@ -1704,7 +1704,7 @@ var LOG_TYPE_CODES = [
     { id: "E", description: "Error" },
 ];
 
-var useStyles$q = makeStyles$1(function (theme) { return ({
+var useStyles$x = makeStyles$1(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -1722,7 +1722,7 @@ var useStyles$q = makeStyles$1(function (theme) { return ({
 var useLogTableData = function () {
     var _a;
     var state = useLogsContext().state;
-    var classes = useStyles$q();
+    var classes = useStyles$x();
     var formatTime = function (nowTime) {
         return (nowTime.toLocaleDateString("en-US") + " " + nowTime.toLocaleTimeString());
     };
@@ -1871,7 +1871,7 @@ var useGetLogsFromAPI = function (_a) {
     return update;
 };
 
-var useStyles$p = makeStyles(function (theme) { return ({
+var useStyles$w = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15
     },
@@ -1888,7 +1888,7 @@ var formatTime = function (nowTime) {
 };
 var ModalLogSelected = function (_a) {
     var show = _a.show, onHide = _a.onHide, selectedLog = _a.selectedLog;
-    var classes = useStyles$p();
+    var classes = useStyles$w();
     return (React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
         React__default.createElement(Modal$1, __assign({}, { show: show }, { onHide: function () { return onHide(false); }, size: "lg", "aria-labelledby": "contained-modal-title-vcenter", centered: true }),
             React__default.createElement(Modal$1.Header, { closeButton: true, style: { padding: "10px 30px" } },
@@ -1986,7 +1986,7 @@ var SearchFilter = function (_a) {
         React__default.createElement(FormHelperText, { style: { marginBottom: 10, marginTop: -15 } }, "Search by Source, Message or User")));
 };
 
-var useStyles$o = makeStyles(function (theme) { return ({
+var useStyles$v = makeStyles(function (theme) { return ({
     root: {
         "& .MuiDataGrid-row": {
             cursor: "pointer"
@@ -2047,7 +2047,7 @@ var useStyles$o = makeStyles(function (theme) { return ({
 }); });
 var TableLogs = function () {
     var _a = useLogsContext(), _b = _a.state.searchData, Start = _b.Start, End = _b.End, Search = _b.Search, LogTypeCode = _b.LogTypeCode, _c = _a.actions, setStartFilter = _c.setStartFilter, setEndFilter = _c.setEndFilter, setSearchFilter = _c.setSearchFilter, setLogTypeCodeFilter = _c.setLogTypeCodeFilter, resetFilters = _c.resetFilters;
-    var classes = useStyles$o();
+    var classes = useStyles$v();
     var gridStyle = useMemo(function () { return ({ height: "100%", width: "100%" }); }, []);
     var gridRef = useRef(null);
     var _d = useState(false), showLogModal = _d[0], setShowLogModal = _d[1];
@@ -2325,7 +2325,7 @@ var deleteProfile = function (profileId) { return __awaiter(void 0, void 0, void
     });
 }); };
 
-var useStyles$n = makeStyles(function (theme) { return ({
+var useStyles$u = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15
     },
@@ -2348,7 +2348,7 @@ var CreateProfile = function (_a) {
     var _d = useState(""), message = _d[0], setMessage = _d[1];
     var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
     var _f = useState(""), error = _f[0], setError = _f[1];
-    var classes = useStyles$n();
+    var classes = useStyles$u();
     var _g = useForm({ defaultValues: INITIAL_VALUES$2 }), register = _g.register, handleSubmit = _g.handleSubmit, reset = _g.reset, errors = _g.formState.errors;
     var onSubmit = function (data) { return __awaiter(void 0, void 0, void 0, function () {
         var res;
@@ -2487,7 +2487,7 @@ var DeleteProfile = function (_a) {
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
-var useStyles$m = makeStyles$1(function (theme) { return ({
+var useStyles$t = makeStyles$1(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -2505,7 +2505,7 @@ var useStyles$m = makeStyles$1(function (theme) { return ({
 var useTableData$2 = function (_a) {
     var setProfileForEdit = _a.setProfileForEdit, setModalProceduresProfile = _a.setModalProceduresProfile, setProfileForDelete = _a.setProfileForDelete, setModalDeleteProfile = _a.setModalDeleteProfile;
     var state = useProfilesContext().state;
-    var classes = useStyles$m();
+    var classes = useStyles$t();
     var rows = state.profiles.map(function (_a) {
         var ProfileId = _a.ProfileId, ProfileName = _a.ProfileName;
         return ({
@@ -2678,7 +2678,7 @@ var DataTable = function (_a) {
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
-var useStyles$l = makeStyles$1(function (theme) { return ({
+var useStyles$s = makeStyles$1(function (theme) { return ({
     root: {
         "& .MuiFormLabel-asterisk": {
             display: "none"
@@ -2687,7 +2687,7 @@ var useStyles$l = makeStyles$1(function (theme) { return ({
 }); });
 var ActionsOfProfile = function (_a) {
     var profileForEdit = _a.profileForEdit, show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$l();
+    var classes = useStyles$s();
     var _b = useState(null), actionsOfProfile = _b[0], setActionsOfProfile = _b[1];
     var _c = useState(false), open = _c[0], setOpen = _c[1];
     var _d = useState(true), isLoading = _d[0], setIsLoading = _d[1];
@@ -2815,7 +2815,7 @@ var ActionsOfProfile = function (_a) {
         React.createElement(ErrorModal, { error: nameError, onHide: function () { return setNameError(""); } })));
 };
 
-var useStyles$k = makeStyles(function (theme) { return ({
+var useStyles$r = makeStyles(function (theme) { return ({
     root: {
         "& .ag-icon-menu": {
             display: "none"
@@ -2887,7 +2887,7 @@ var TableProfiles = function (_a) {
     var _f = useState(null), profileForDelete = _f[0], setProfileForDelete = _f[1];
     var gridStyle = useMemo(function () { return ({ height: "100%", width: "100%" }); }, []);
     var _g = useState(null), gridApi = _g[0], setGridApi = _g[1];
-    var classes = useStyles$k();
+    var classes = useStyles$r();
     var loadingOverlayComponent = useMemo(function () {
         return LazyLoading;
     }, []);
@@ -3140,7 +3140,7 @@ var DeleteShiftParameters = function (PatternStart) { return __awaiter(void 0, v
     });
 }); };
 
-var useStyles$j = makeStyles(function (theme) { return ({
+var useStyles$q = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15
     },
@@ -3166,7 +3166,7 @@ var CreateShift = function (_a) {
     var _d = useState(false), open = _d[0], setOpen = _d[1];
     var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
     var _f = useState(""), error = _f[0], setError = _f[1];
-    var classes = useStyles$j();
+    var classes = useStyles$q();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _g = useForm({
         defaultValues: shiftTableData ? shiftTableData : INITIAL_VALUES$1
@@ -3370,7 +3370,7 @@ var CreateShift = function (_a) {
             React.createElement(Alert, { severity: "success", onClose: handleClose }, "The shift was created successfully"))));
 };
 
-var useStyles$i = makeStyles(function (theme) { return ({
+var useStyles$p = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15
     },
@@ -3396,7 +3396,7 @@ var DeleteShift = function (_a) {
     var _c = useState(false), open = _c[0], setOpen = _c[1];
     var _d = useState(false), isSubmitLoading = _d[0], setIsSubmitLoading = _d[1];
     var _e = useState(false), deleteAlert = _e[0], setDeleteAlert = _e[1];
-    var classes = useStyles$i();
+    var classes = useStyles$p();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _f = useState(""), error = _f[0], setError = _f[1];
     var _g = useForm({ defaultValues: INITIAL_VALUES$1 }), control = _g.control, setValue = _g.setValue, reset = _g.reset, watch = _g.watch, errors = _g.formState.errors;
@@ -3537,7 +3537,7 @@ var DeleteShift = function (_a) {
             React.createElement(Alert, { severity: "warning", onClose: handleClose }, "The shift was deleted successfully"))));
 };
 
-var useStyles$h = makeStyles(function (theme) { return ({
+var useStyles$o = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15
     },
@@ -3564,7 +3564,7 @@ var EditShift = function (_a) {
     var _d = useState(""), error = _d[0], setError = _d[1];
     var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
     var _f = useState(false), initialShiftPerDayAndCrewsNumber = _f[0], setInitialShiftPerDayAndCrewsNumber = _f[1];
-    var classes = useStyles$h();
+    var classes = useStyles$o();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _g = useForm({ defaultValues: INITIAL_VALUES$1 }), control = _g.control, setValue = _g.setValue, handleSubmit = _g.handleSubmit, reset = _g.reset, watch = _g.watch, errors = _g.formState.errors;
     // Progress bar
@@ -3781,7 +3781,7 @@ var EditShift = function (_a) {
             React.createElement(Alert, { severity: "success", onClose: handleClose }, "The shift was created successfully"))));
 };
 
-var useStyles$g = makeStyles$1(function (theme) { return ({
+var useStyles$n = makeStyles$1(function (theme) { return ({
     root: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -3800,7 +3800,7 @@ var useTableData$1 = function (_a) {
     var _b;
     var setOpenModalEditShift = _a.setOpenModalEditShift, setOpenModalDeleteShift = _a.setOpenModalDeleteShift;
     var _c = useShiftsCrewsContext(), state = _c.state, actions = _c.actions;
-    var classes = useStyles$g();
+    var classes = useStyles$n();
     var rows = (_b = state.shifts) === null || _b === void 0 ? void 0 : _b.map(function (_a) {
         var PatternStart = _a.PatternStart, ShiftCodes = _a.ShiftCodes, Crews = _a.Crews, PatternDays = _a.PatternDays, CrewRotation = _a.CrewRotation, Comments = _a.Comments, CanEdit = _a.CanEdit;
         return ({
@@ -3894,7 +3894,7 @@ var useTableData$1 = function (_a) {
     return { rows: rows, columnDefs: columnDefs };
 };
 
-var useStyles$f = makeStyles(function (theme) { return ({
+var useStyles$m = makeStyles(function (theme) { return ({
     root: {
         "& .ag-icon-menu": {
             display: "none"
@@ -3943,7 +3943,7 @@ var useStyles$f = makeStyles(function (theme) { return ({
 }); });
 var TableShiftsCrews = function (_a) {
     _a.isLoading; var getShiftsCrewsFromAPI = _a.getShiftsCrewsFromAPI;
-    var classes = useStyles$f();
+    var classes = useStyles$m();
     var _b = useState(false), openModalNew = _b[0], setOpenModalNew = _b[1];
     var _c = useState(false), openModalEditShift = _c[0], setOpenModalEditShift = _c[1];
     var _d = useState(false), openModalDeleteShift = _d[0], setOpenModalDeleteShift = _d[1];
@@ -4229,7 +4229,7 @@ var ConfigurationAssetProvider = function (_a) {
     return (React__default.createElement(ConfigurationAssetContext.Provider, { value: { state: state, actions: actions } }, children));
 };
 
-var useStyles$e = makeStyles$1(function (theme) { return ({
+var useStyles$l = makeStyles$1(function (theme) { return ({
     root: {
         alignItems: "center",
         display: "flex",
@@ -4276,7 +4276,7 @@ var CustomNode = function (_a) {
     var _c = useConfigurationAssetContext(), openAssets = _c.state.openAssets, setOpenAssets = _c.actions.setOpenAssets;
     var _d = props.node, id = _d.id, droppable = _d.droppable, data = _d.data;
     var indent = props.depth * 24;
-    var classes = useStyles$e();
+    var classes = useStyles$l();
     var nodeClasses = "".concat(classes.customNodeRoot, " ").concat(classes.root, " ").concat(isSelected ? classes.selected : "");
     var handleClick = function (e) {
         props.onClick(e, props.node);
@@ -4331,7 +4331,7 @@ var CustomNode = function (_a) {
             React__default.createElement(Typography, { variant: "body2" }, props.node.text))));
 };
 
-var useStyles$d = makeStyles$1(function (theme) { return ({
+var useStyles$k = makeStyles$1(function (theme) { return ({
     root: {
         alignItems: "flex-start",
         backgroundColor: "#1967d2",
@@ -4363,7 +4363,7 @@ var useStyles$d = makeStyles$1(function (theme) { return ({
     }
 }); });
 var MultipleDragPreview = function (props) {
-    var classes = useStyles$d();
+    var classes = useStyles$k();
     return (React__default.createElement(Badge, { classes: { badge: classes.badge }, color: "error", badgeContent: props.dragSources.length, anchorOrigin: { vertical: "top", horizontal: "right" } },
         React__default.createElement("div", { className: classes.root, "data-testid": "custom-drag-preview" }, props.dragSources.map(function (node) {
             var _a;
@@ -4374,7 +4374,7 @@ var MultipleDragPreview = function (props) {
         }))));
 };
 
-var useStyles$c = makeStyles$1(function (theme) { return ({
+var useStyles$j = makeStyles$1(function (theme) { return ({
     root: {
         alignItems: "center",
         backgroundColor: "#1967d2",
@@ -4399,7 +4399,7 @@ var useStyles$c = makeStyles$1(function (theme) { return ({
 }); });
 var CustomDragPreview = function (props) {
     var _a;
-    var classes = useStyles$c();
+    var classes = useStyles$j();
     var item = props.monitorProps.item;
     return (React__default.createElement("div", { className: classes.root },
         React__default.createElement("div", { className: classes.icon },
@@ -4692,7 +4692,7 @@ var useAssetCodes = function () {
     return { loadFilterAssets: loadFilterAssets };
 };
 
-var useStyles$b = makeStyles(function (theme) { return ({
+var useStyles$i = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -4735,7 +4735,7 @@ var useStyles$b = makeStyles(function (theme) { return ({
 }); });
 var CreateNewAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$b();
+    var classes = useStyles$i();
     var _b = useState(true), fullWidth = _b[0]; _b[1];
     var _c = useState("sm"), maxWidth = _c[0]; _c[1];
     var _d = useState(false), assetCreatedSuccess = _d[0], setAssetCreatedSuccess = _d[1];
@@ -4854,7 +4854,7 @@ var CreateNewAssetDialog = function (_a) {
             React__default.createElement(Alert$2, { severity: "info", onClose: handleClose }, "Document created succesfully"))));
 };
 
-var useStyles$a = makeStyles(function (theme) { return ({
+var useStyles$h = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -4905,7 +4905,7 @@ var useStyles$a = makeStyles(function (theme) { return ({
 }); });
 var ViewerAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$a();
+    var classes = useStyles$h();
     var _b = useState(true), fullWidth = _b[0]; _b[1];
     var _c = useState("sm"), maxWidth = _c[0]; _c[1];
     var _d = useConfigurationAssetContext().state, dataToCreateAsset = _d.dataToCreateAsset, assetNodeSelectedInTree = _d.assetNodeSelectedInTree;
@@ -4969,7 +4969,7 @@ var ViewerAssetDialog = function (_a) {
                                             } })))))))))));
 };
 
-var useStyles$9 = makeStyles(function (theme) { return ({
+var useStyles$g = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -5013,7 +5013,7 @@ var useStyles$9 = makeStyles(function (theme) { return ({
 }); });
 var RemoveAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$9();
+    var classes = useStyles$g();
     var _b = useState(true), fullWidth = _b[0]; _b[1];
     var _c = useState("sm"), maxWidth = _c[0]; _c[1];
     var _d = useState(false), assetRemovedSuccess = _d[0], setAssetRemovedSuccess = _d[1];
@@ -5072,7 +5072,7 @@ var RemoveAssetDialog = function (_a) {
             React__default.createElement(Alert$2, { severity: "info", onClose: handleClose }, "Asset removed succesfully"))));
 };
 
-var useStyles$8 = makeStyles(function (theme) { return ({
+var useStyles$f = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -5120,7 +5120,7 @@ var useStyles$8 = makeStyles(function (theme) { return ({
 }); });
 var EditAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$8();
+    var classes = useStyles$f();
     var _b = useState(true), fullWidth = _b[0]; _b[1];
     var _c = useState("sm"), maxWidth = _c[0]; _c[1];
     var _d = useState(false), assetEditedSuccess = _d[0], setAssetEditedSuccess = _d[1];
@@ -5240,7 +5240,7 @@ var EditAssetDialog = function (_a) {
                                 React__default.createElement(Alert$3, { severity: "info", onClose: handleClose }, "Document created succesfully")))))))));
 };
 
-var useStyles$7 = makeStyles$1(function (theme) { return ({
+var useStyles$e = makeStyles$1(function (theme) { return ({
     root: {},
     contextMenu: {
         fontSize: "14px",
@@ -5271,7 +5271,7 @@ var useStyles$7 = makeStyles$1(function (theme) { return ({
 }); });
 var AssetViewComponent = function () {
     var _a = useState([]), selectedNodes = _a[0], setSelectedNodes = _a[1];
-    var classes = useStyles$7();
+    var classes = useStyles$e();
     var _b = useState(false), isDragging = _b[0], setIsDragging = _b[1];
     var _c = useState(false), isCtrlPressing = _c[0], setIsCtrlPressing = _c[1];
     var _d = useState(false), isDoubleClick = _d[0], setIsDoubleClick = _d[1];
@@ -5630,7 +5630,7 @@ var setProfilesToUser = function (UserId, profileIds) { return __awaiter(void 0,
     });
 }); };
 
-var useStyles$6 = makeStyles(function (theme) { return ({
+var useStyles$d = makeStyles(function (theme) { return ({
     root: {
         "& .MuiSelect-select": {
             height: "auto",
@@ -5659,19 +5659,19 @@ var getStyles = function (profileId, profiles, theme) {
             : theme.typography.fontWeightMedium
     };
 };
-var ITEM_HEIGHT$1 = 48;
-var ITEM_PADDING_TOP$1 = 8;
-var MenuProps$1 = {
+var ITEM_HEIGHT$2 = 48;
+var ITEM_PADDING_TOP$2 = 8;
+var MenuProps$2 = {
     PaperProps: {
         style: {
-            maxHeight: ITEM_HEIGHT$1 * 4.5 + ITEM_PADDING_TOP$1,
+            maxHeight: ITEM_HEIGHT$2 * 4.5 + ITEM_PADDING_TOP$2,
             width: 250
         }
     }
 };
 var ProfilesPicker = function (_a) {
     var value = _a.value, onChange = _a.onChange, userIdForDelete = _a.userIdForDelete, setprofileError = _a.setprofileError;
-    var classes = useStyles$6();
+    var classes = useStyles$d();
     var theme = useTheme();
     var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
     var _c = useState([]), profiles = _c[0], setProfiles = _c[1];
@@ -5708,7 +5708,7 @@ var ProfilesPicker = function (_a) {
         React__default.createElement(InputLabel, { id: "demo-mutiple-chip-label", style: value.length
                 ? { display: "flex", alignItems: "center" }
                 : { display: "flex", alignItems: "center", marginTop: 10 } }, "Profiles"),
-        React__default.createElement(Select, { autoWidth: true, labelId: "demo-mutiple-chip-label", id: "demo-mutiple-chip", multiple: true, value: value, onChange: onChange, input: React__default.createElement(Input, { id: "select-multiple-chip" }), renderValue: function (selected) { return (React__default.createElement("div", { className: classes.chips }, selected.map(function (profileId) { return (React__default.createElement(Chip, { key: "selected-profile-".concat(profileId), label: getProfileNameById(profileId), className: classes.chip })); }))); }, MenuProps: MenuProps$1 }, profiles.map(function (profile) { return (React__default.createElement(MenuItem, { key: "profile-".concat(profile.ProfileId), value: profile.ProfileId, style: getStyles(profile.ProfileId, profiles, theme) }, profile.ProfileName.replaceAll("Profile", ""))); })))) : (React__default.createElement(React__default.Fragment, null))));
+        React__default.createElement(Select, { autoWidth: true, labelId: "demo-mutiple-chip-label", id: "demo-mutiple-chip", multiple: true, value: value, onChange: onChange, input: React__default.createElement(Input, { id: "select-multiple-chip" }), renderValue: function (selected) { return (React__default.createElement("div", { className: classes.chips }, selected.map(function (profileId) { return (React__default.createElement(Chip, { key: "selected-profile-".concat(profileId), label: getProfileNameById(profileId), className: classes.chip })); }))); }, MenuProps: MenuProps$2 }, profiles.map(function (profile) { return (React__default.createElement(MenuItem, { key: "profile-".concat(profile.ProfileId), value: profile.ProfileId, style: getStyles(profile.ProfileId, profiles, theme) }, profile.ProfileName.replaceAll("Profile", ""))); })))) : (React__default.createElement(React__default.Fragment, null))));
 };
 
 var INITIAL_VALUES = {
@@ -5724,7 +5724,7 @@ var INITIAL_VALUES = {
 };
 
 // @flow
-var useStyles$5 = makeStyles$1(function (theme) { return ({
+var useStyles$c = makeStyles$1(function (theme) { return ({
     root: {
         "& .MuiSelect-select": {
             minHeight: "40px"
@@ -5745,19 +5745,19 @@ var useStyles$5 = makeStyles$1(function (theme) { return ({
         marginTop: theme.spacing(3)
     }
 }); });
-var ITEM_HEIGHT = 48;
-var ITEM_PADDING_TOP = 8;
-var MenuProps = {
+var ITEM_HEIGHT$1 = 48;
+var ITEM_PADDING_TOP$1 = 8;
+var MenuProps$1 = {
     PaperProps: {
         style: {
-            maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+            maxHeight: ITEM_HEIGHT$1 * 4.5 + ITEM_PADDING_TOP$1,
             width: 250
         }
     }
 };
 var AuthTypeSelector = function (_a) {
     var value = _a.value, onChange = _a.onChange;
-    var classes = useStyles$5();
+    var classes = useStyles$c();
     var _b = useState([]), authTypes = _b[0], setAuthTypes = _b[1];
     var _c = useState(true), isLoading = _c[0], setIsLoading = _c[1];
     var theme = useTheme$1();
@@ -5790,10 +5790,10 @@ var AuthTypeSelector = function (_a) {
     return (React.createElement("div", { className: classes.root }, !isLoading && authTypes.length ? (React.createElement(FormControl, { className: classes.formControl },
         React.createElement(InputLabel, { id: "demo-mutiple-chip-label" }, "Auth type"),
         React.createElement(Select, { autoWidth: true, labelId: "demo-mutiple-chip-label", id: "demo-mutiple-chip", value: value, style: { padding: 0 }, onChange: onChange, input: React.createElement(Input, { id: "select-multiple-chip" }), renderValue: function (selected) { return (React.createElement("div", { className: classes.chips },
-                React.createElement(Chip, { key: "selected-authType-".concat(selected), label: selectedAuthTypeName, className: classes.chip }))); }, MenuProps: MenuProps }, authTypes.map(function (authType) { return (React.createElement(MenuItem, { key: "auth-".concat(authType.AuthTypeId), value: authType.AuthTypeId, style: getStyles(authType.AuthTypeId, authTypes, theme) }, authType.Name)); })))) : (React.createElement(React.Fragment, null))));
+                React.createElement(Chip, { key: "selected-authType-".concat(selected), label: selectedAuthTypeName, className: classes.chip }))); }, MenuProps: MenuProps$1 }, authTypes.map(function (authType) { return (React.createElement(MenuItem, { key: "auth-".concat(authType.AuthTypeId), value: authType.AuthTypeId, style: getStyles(authType.AuthTypeId, authTypes, theme) }, authType.Name)); })))) : (React.createElement(React.Fragment, null))));
 };
 
-var useStyles$4 = makeStyles(function (theme) { return ({
+var useStyles$b = makeStyles(function (theme) { return ({
     checkbox: {
         userSelect: "none"
     },
@@ -5815,7 +5815,7 @@ var CreateUser = function (_a) {
     var _f = useState(false), isSubmitLoading = _f[0], setIsSubmitLoading = _f[1];
     var _g = useState(""), error = _g[0], setError = _g[1];
     var _h = useState(""), profileError = _h[0], setprofileError = _h[1];
-    var classes = useStyles$4();
+    var classes = useStyles$b();
     var _j = useForm({ defaultValues: INITIAL_VALUES }), register = _j.register, control = _j.control, handleSubmit = _j.handleSubmit, reset = _j.reset, watch = _j.watch, errors = _j.formState.errors;
     var handleClose = function (event, reason) {
         if (reason === "clickaway") {
@@ -5907,7 +5907,7 @@ var CreateUser = function (_a) {
             React.createElement(Alert, { severity: "success", onClose: handleClose }, "The user was created successfully"))));
 };
 
-var useStyles$3 = makeStyles(function (theme) { return ({
+var useStyles$a = makeStyles(function (theme) { return ({
     checkbox: {
         userSelect: "none"
     },
@@ -5926,7 +5926,7 @@ var useStyles$3 = makeStyles(function (theme) { return ({
 var EditUser = function (_a) {
     var _b, _c, _d;
     var userIdForEdit = _a.userIdForEdit, show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$3();
+    var classes = useStyles$a();
     var _e = useState(false), open = _e[0], setOpen = _e[1];
     var _f = useState(false), isLoading = _f[0], setIsLoading = _f[1];
     var _g = useState(false), isSubmitLoading = _g[0], setIsSubmitLoading = _g[1];
@@ -6181,7 +6181,7 @@ var DeleteUser = function (_a) {
         React__default.createElement(ErrorModal, { error: profileError, onHide: function () { return setprofileError(""); } })));
 };
 
-var useStyles$2 = makeStyles$1(function (theme) { return ({
+var useStyles$9 = makeStyles$1(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -6199,7 +6199,7 @@ var useStyles$2 = makeStyles$1(function (theme) { return ({
 var useTableData = function (_a) {
     var setUserIdForEdit = _a.setUserIdForEdit, setOpenModalEditDataUser = _a.setOpenModalEditDataUser, setUserIdForDelete = _a.setUserIdForDelete, setOpenModalDeleteUser = _a.setOpenModalDeleteUser, setOpenModalChangePasswordd = _a.setOpenModalChangePasswordd, setUserForPasswordChange = _a.setUserForPasswordChange;
     var state = useUsersContext().state;
-    var classes = useStyles$2();
+    var classes = useStyles$9();
     var onActionsClick = function (e, params) {
         params.api.contextMenuFactory.showMenu(params.node, params.column, undefined, e);
     };
@@ -6357,7 +6357,7 @@ var ChangePassword$1 = function (_a) {
     }
 };
 
-var useStyles$1 = makeStyles(function (theme) { return ({
+var useStyles$8 = makeStyles(function (theme) { return ({
     root: {
         "& .ag-icon-menu": {
             display: "none"
@@ -6427,7 +6427,7 @@ var TableUsers = function (_a) {
     var _c = useState(false), openModalEditDataUser = _c[0], setOpenModalEditDataUser = _c[1];
     var _d = useState(false), openModalDeleteUser = _d[0], setOpenModalDeleteUser = _d[1];
     var _e = useState(false), openModalChangePassword = _e[0], setOpenModalChangePasswordd = _e[1];
-    var classes = useStyles$1();
+    var classes = useStyles$8();
     var _f = useState(null), userIdForEdit = _f[0], setUserIdForEdit = _f[1];
     var _g = useState(null), userIdForDelete = _g[0], setUserIdForDelete = _g[1];
     var _h = useState(null), userForPasswordChange = _h[0], setUserForPasswordChange = _h[1];
@@ -8205,116 +8205,1440 @@ function Header$1(_a) {
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 }
 
-function Configuration() {
-    var option = useParams().option;
-    var _a = useContext(ConfigurationContext), customConfiguration = _a[0], CustomSidebar = _a[1];
-    var routes = __spreadArray(__spreadArray([
-        {
-            path: "/",
-            sidebar: function () { return React__default.createElement("div", null, "Configuration"); },
-            main: function () { return React__default.createElement(Navigate, { to: "users" }); }
+var INITIAL_VALUES_MODAL = {
+    FormAssetId: null,
+    AssetId: 1,
+    AssetName: "Plant",
+    UserId: null,
+    UserName: "",
+    IsDefault: null
+};
+
+var FormsInitialState = {
+    formsList: [],
+    searchText: "",
+    firstTime: true,
+    formAssetsAndUsersList: [],
+    assetCodes: {},
+    userFormAssetData: INITIAL_VALUES_MODAL,
+    users: [],
+    FormId: null,
+    FormName: ""
+};
+var FormsReducer = createSlice({
+    name: "__",
+    initialState: FormsInitialState,
+    reducers: {
+        setFormsList: function (state, _a) {
+            var payload = _a.payload;
+            state.formsList = payload;
         },
-        {
-            path: "shifts",
-            sidebar: function () { return React__default.createElement("div", null, "Shifts"); },
-            main: function () { return React__default.createElement(ShiftsCrewsPage, null); }
+        setSearchText: function (state, _a) {
+            var payload = _a.payload;
+            state.searchText = payload;
         },
-        {
-            path: "asset",
-            sidebar: function () { return React__default.createElement("div", null, "Configuration Asset"); },
-            main: function () { return React__default.createElement(AssetPage, null); }
+        setFirstTime: function (state, _a) {
+            var payload = _a.payload;
+            state.firstTime = payload;
         },
-        {
-            path: "users",
-            sidebar: function () { return React__default.createElement("div", null, "Users"); },
-            main: function () { return React__default.createElement(UsersPage, null); }
+        setFormAssetsAndUsersList: function (state, _a) {
+            var payload = _a.payload;
+            state.formAssetsAndUsersList = payload;
         },
-        {
-            path: "profiles",
-            sidebar: function () { return React__default.createElement("div", null, "profiles"); },
-            main: function () { return React__default.createElement(UsersPage$1, null); }
-        }
-    ], customConfiguration, true), [
-        {
-            path: "logs",
-            sidebar: function () { return React__default.createElement("div", null, "Logs"); },
-            main: function () { return React__default.createElement(LogsPage, null); }
+        setAssetCodes: function (state, _a) {
+            var payload = _a.payload;
+            state.assetCodes = payload;
         },
-        {
-            path: "jobs",
-            sidebar: function () { return React__default.createElement("div", null, "Jobs"); },
-            main: function () { return React__default.createElement(JobsPage, null); }
+        setUsers: function (state, _a) {
+            var payload = _a.payload;
+            state.users = payload;
         },
-    ], false);
-    return (React__default.createElement(GenericPanel, { title: "Configuration", description: "" },
-        React__default.createElement("div", { className: "row", style: { display: "flex" } },
-            React__default.createElement("div", { className: "col-md-2 mt-3 pt-0 pr-0 mes-div-submenu", style: { flex: "20%" } },
-                React__default.createElement("h3", { className: "mes-menu-group" }, "Plant"),
-                React__default.createElement(MenuList, { className: "mes-submenu" },
-                    React__default.createElement(MenuItem, { selected: option === "shifts", className: "p-0" },
-                        React__default.createElement(Link, { to: "/configuration/shifts", className: "nav-link" }, "Shift / Crews")),
-                    React__default.createElement(MenuItem, { selected: option === "asset", className: "p-0" },
-                        React__default.createElement(Link, { to: "/configuration/asset", className: "nav-link" }, "Assets Tree"))),
-                React__default.createElement("h3", { className: "mes-menu-group" }, "Security"),
-                React__default.createElement(MenuList, { className: "mes-submenu" },
-                    React__default.createElement(MenuItem, { selected: option === "users", className: "p-0" },
-                        React__default.createElement(Link, { to: "/configuration/users", className: "nav-link" }, "Users")),
-                    React__default.createElement(MenuItem, { selected: option === "profiles", className: "p-0" },
-                        React__default.createElement(Link, { to: "/configuration/profiles", className: "nav-link" }, "Profiles"))),
-                React__default.createElement(CustomSidebar, { option: option }),
-                React__default.createElement("h3", { className: "mes-menu-group" }, "Maintenance"),
-                React__default.createElement(MenuList, { className: "mes-submenu" },
-                    React__default.createElement(MenuItem, { selected: option === "logs", className: "p-0" },
-                        React__default.createElement(Link, { to: "/configuration/logs", className: "nav-link" }, "Logs")),
-                    React__default.createElement(MenuItem, { selected: option === "jobs", className: "p-0" },
-                        React__default.createElement(Link, { to: "/configuration/jobs", className: "nav-link" }, "Jobs")))),
-            React__default.createElement("div", { className: "col-md-10 m-3", style: { flex: "80%" } },
-                React__default.createElement(Routes, null, routes.map(function (route, index) { return (React__default.createElement(Route, { key: index, path: route.path, element: React__default.createElement(route.main, null) })); }))))));
-}
+        setFormId: function (state, _a) {
+            var payload = _a.payload;
+            state.FormId = payload;
+        },
+        setFormName: function (state, _a) {
+            var payload = _a.payload;
+            state.FormName = payload;
+        },
+        // userFormAssetData
+        setUserFormAssetData: function (state, _a) {
+            var payload = _a.payload;
+            state.userFormAssetData = payload;
+        },
+        setAssetId: function (state, _a) {
+            var payload = _a.payload;
+            state.userFormAssetData.AssetId = payload;
+        },
+        setAssetName: function (state, _a) {
+            var payload = _a.payload;
+            state.userFormAssetData.AssetName = payload;
+        },
+        setUserId: function (state, _a) {
+            var payload = _a.payload;
+            state.userFormAssetData.UserId = payload;
+        },
+        setIsDefault: function (state, _a) {
+            var payload = _a.payload;
+            state.userFormAssetData.IsDefault = payload;
+        },
+        setFormAssetId: function (state, _a) {
+            var payload = _a.payload;
+            state.userFormAssetData.FormAssetId = payload;
+        }
+    }
+});
 
-var Home = function () { return (React__default.createElement("div", { style: {
-        backgroundImage: "url(\"/home.jpg\")",
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        backgroundRepeat: "no-repeat",
-        minHeight: "100%",
-        height: "100vh",
-        width: "100%",
-        position: "absolute"
-    } })); };
+var FormsContext = createContext({
+    state: FormsReducer.getInitialState(),
+    actions: FormsReducer.actions
+});
+var useFormsContext = function () { return useContext(FormsContext); };
+var FormsProvider = function (_a) {
+    var children = _a.children;
+    var _b = useComplexState({
+        initialState: FormsReducer.getInitialState(),
+        reducers: FormsReducer.caseReducers
+    }), state = _b[0], actions = _b[1];
+    return (React__default.createElement(FormsContext.Provider, { value: { state: state, actions: actions } }, children));
+};
 
-var TrendingsInitialState = {
-    timeScopeStart: moment(new Date()).subtract(1, "days").toDate(),
-    timeScopeEnd: new Date(),
-    scope: "1 day",
-    graphPan: false,
-    graphShouldUpdate: 0,
-    views: [
-        {
-            ViewId: 0,
-            ViewName: '',
-            UserName: null,
-            IsPublic: false,
-            LastModified: null,
-            LastModifiedBy: null
+var getForms = function (SearchText) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "SearchText", value: SearchText });
+                return [4 /*yield*/, apiService.callV2("[FORMS].[GetForms]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
         }
-    ],
-    viewSelected: null,
-    viewTags: [
-        {
-            ViewId: 0,
-            TagId: 0,
-            TagName: '',
-            Color: '',
-            IsVisible: true,
-            MinScale: 0,
-            MaxScale: 0,
-            IsAutoScale: true,
-            Alias: '',
-            TagType: '',
-            Unit: ''
+    });
+}); };
+var getFormAssetsAndUsers = function (FormId) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "FormId", value: FormId });
+                return [4 /*yield*/, apiService.callV2("[FORMS].[GetFormAssetsAndUsers]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
         }
-    ]
+    });
+}); };
+var upsertUserFormAsset = function (FormId, AssetId, UserId, IsDefault) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "FormId", value: FormId });
+                parameters.push({ name: "AssetId", value: AssetId });
+                parameters.push({ name: "UserId", value: UserId });
+                parameters.push({ name: "IsDefault", value: IsDefault });
+                return [4 /*yield*/, apiService.callV2("[FORMS].[UpsertUserFormAsset]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+var deleteUserFormAsset = function (FormAssetId, UserId) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "FormAssetId", value: FormAssetId });
+                parameters.push({ name: "UserId", value: UserId });
+                return [4 /*yield*/, apiService.callV2("[FORMS].[DeleteUserFormAsset]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+
+var useSearchForms = function (_a) {
+    var setIsLoading = _a.setIsLoading, setError = _a.setError;
+    var _b = useFormsContext(), searchText = _b.state.searchText, setFormsList = _b.actions.setFormsList;
+    return function () { return __awaiter(void 0, void 0, void 0, function () {
+        var res, rowsSource;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setFormsList([]);
+                    setIsLoading(true);
+                    return [4 /*yield*/, getForms(searchText)];
+                case 1:
+                    res = _a.sent();
+                    if (res.ok) {
+                        rowsSource = get$2(res, "data.tables[0].rows", []);
+                        if (rowsSource.length) {
+                            setFormsList(rowsSource);
+                        }
+                        else {
+                            setFormsList([]);
+                        }
+                        setIsLoading(false);
+                    }
+                    else {
+                        setError(res.message);
+                        setIsLoading(false);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+};
+
+var useSearchFormAssetsAndUsers = function (_a) {
+    var setIsLoading = _a.setIsLoading, setError = _a.setError;
+    var _b = useFormsContext(), FormId = _b.state.FormId, setFormAssetsAndUsersList = _b.actions.setFormAssetsAndUsersList;
+    return function () { return __awaiter(void 0, void 0, void 0, function () {
+        var res, rowsSource;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setFormAssetsAndUsersList([]);
+                    setIsLoading(true);
+                    return [4 /*yield*/, getFormAssetsAndUsers(FormId)];
+                case 1:
+                    res = _a.sent();
+                    if (res.ok) {
+                        rowsSource = get$2(res, "data.tables[0].rows", []);
+                        if (rowsSource.length) {
+                            setFormAssetsAndUsersList(rowsSource);
+                        }
+                        else {
+                            setFormAssetsAndUsersList([]);
+                        }
+                        setIsLoading(false);
+                    }
+                    else {
+                        setError(res.message);
+                        setIsLoading(false);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+};
+
+var useStyles$7 = makeStyles(function (theme) {
+    return createStyles({
+        root: {
+            "& .ag-icon-menu": {
+                display: "none"
+            },
+            "& .ag-checkbox-input-wrapper": {
+                margin: "0 10px"
+            },
+            "& .ag-cell": {
+                alignItems: "center",
+                padding: "0 !important",
+                backgroundColor: "#FFFF !important",
+                border: "unset !important"
+            },
+            "& .ag-header-cell": {
+                padding: "0px !important",
+                textAlign: "center !important",
+                fontSize: 10
+            },
+            "& .ag-root-wrapper": {
+                minHeight: "100% !important",
+                borderRadius: 3,
+                paddingBottom: 45
+            },
+            "& .ag-cell-wrapper": {
+                width: "95%",
+                textAlign: "center"
+            },
+            "& .ag-body-viewport": {
+                borderBottom: "2px solid #DDE2EB"
+            },
+            "& .ag-menu-option": {
+                cursor: "pointer"
+            }
+        }
+    });
+});
+var AssetNameColumn = function (_a) {
+    var data = _a.data;
+    var classes = useStyles$7();
+    var _b = useState(""), assetName = _b[0], setAssetName = _b[1];
+    var allAssets = useAssetContext().state.allAssets;
+    var getAssetName = function () {
+        var _a;
+        setAssetName(((_a = allAssets.find(function (asset) { return asset.AssetId === parseInt(data.AssetId); })) === null || _a === void 0 ? void 0 : _a.AssetName) || "Unknown");
+    };
+    useEffect(function () {
+        getAssetName();
+    }, []);
+    if (data) {
+        return (React__default.createElement(Grid$1, { container: true, className: classes.root, spacing: 1, style: { alignItems: "center", justifyContent: "center" } },
+            React__default.createElement(Grid$1, { item: true, style: { alignItems: "center", justifyContent: "center" } }, assetName)));
+    }
+    else {
+        return React__default.createElement(React__default.Fragment, null);
+    }
+};
+
+var TransformAssetCodeModel = function (data) {
+    var model = {
+        id: data.AssetId,
+        parentId: data.ParentAssetId,
+        name: data.AssetName,
+        isActive: true
+    };
+    return model;
+};
+
+var ITEM_HEIGHT = 48;
+var ITEM_PADDING_TOP = 8;
+var MenuProps = {
+    PaperProps: {
+        style: {
+            maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+            width: 250
+        }
+    }
+};
+var useStyles$6 = makeStyles$1(function (theme) {
+    return createStyles$1({
+        root: {
+            "& .MuiSelect-root": {
+                backgroundColor: "#FFF"
+            }
+        },
+        inputLabel: {
+            position: "absolute",
+            top: -6,
+            left: 8,
+            fontSize: 11.3,
+            backgroundColor: "#FFF",
+            color: "#0000008A",
+            width: "auto",
+            height: "auto",
+            zIndex: 100,
+            padding: "0 3px",
+            borderRadius: 3,
+            fontWeight: 400,
+            lineHeight: "1.1876em",
+            letterSpacing: "0.04208em",
+            fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif"
+        },
+        formControl: {
+            width: "99%",
+            marginTop: 8
+        },
+        chips: {
+            display: "flex",
+            flexWrap: "wrap"
+        },
+        chip: {
+            margin: 2
+        },
+        noLabel: {
+            marginTop: theme.spacing(3)
+        }
+    });
+});
+var UsersPicker = function (_a) {
+    var value = _a.value, onChange = _a.onChange, disabled = _a.disabled;
+    var classes = useStyles$6();
+    var _b = useState(false); _b[0]; var setIsLoading = _b[1];
+    var _c = useState(""), error = _c[0], setError = _c[1];
+    var _d = useFormsContext(), users = _d.state.users, setUsers = _d.actions.setUsers;
+    useEffect(function () {
+        var searchUsers = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var res, listUsers;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setIsLoading(true);
+                        return [4 /*yield*/, getUsers()];
+                    case 1:
+                        res = _a.sent();
+                        if (res.ok) {
+                            listUsers = get(res, "data.tables[0].rows", []);
+                            // Ordenar usuarios alfabéticamente
+                            listUsers.sort(function (a, b) { return a.UserName.localeCompare(b.UserName); });
+                            setUsers(listUsers);
+                            setIsLoading(false);
+                        }
+                        else {
+                            setError(res.message);
+                            setIsLoading(false);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        searchUsers();
+    }, []);
+    return (React__default.createElement("div", { className: classes.root },
+        users.length ? (React__default.createElement(FormControl$1, { className: classes.formControl, style: { position: "relative" } },
+            React__default.createElement("p", { className: classes.inputLabel }, "User"),
+            React__default.createElement(Select$1, { disabled: disabled ? disabled : false, style: { padding: "0 !important" }, variant: "outlined", margin: "dense", labelId: "demo-simple-select-label", id: "demo-simple-select", autoWidth: true, value: value, onChange: onChange, MenuProps: MenuProps }, users.map(function (user) { return (React__default.createElement(MenuItem$1, { key: "user-".concat(user.UserId), value: user.UserId },
+                React__default.createElement(Grid$1, { container: true, alignItems: "center" },
+                    React__default.createElement("div", { style: {
+                            color: "#FFF",
+                            fontWeight: 600,
+                            margin: "auto 0",
+                            lineHeight: 0
+                        } },
+                        React__default.createElement("div", { style: { marginLeft: "-40px" } }, user.UserName.charAt(0) || "")),
+                    React__default.createElement("div", null, user.UserName)))); })))) : (React__default.createElement(React__default.Fragment, null)),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
+};
+
+var useStyles$5 = makeStyles$1(function (theme) { return ({
+    root: {
+        "& .input-group-text": {
+            display: "none"
+        },
+        "& .MuiDialogContent-dividers": {
+            padding: 0
+        }
+    },
+    checkbox: {
+        userSelect: "none"
+    },
+    assetPicker: {
+        "& .MuiGrid-item": {
+            width: "500px"
+        }
+    },
+    modalTitle: {
+        backgroundColor: "#ced2cc",
+        color: "#495057",
+        textAlign: "center"
+    },
+    modalWarning: {
+        color: "white",
+        backgroundColor: "#dc3545",
+        textAlign: "center"
+    },
+    messageTitle: {
+        fontSize: 15,
+        fontWeight: "bold",
+        color: "#0000008A"
+    },
+    inputEditable: {
+        "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
+            border: "2px solid #3F51B5"
+        }
+    },
+    comments: {
+        "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid #3F51B5"
+        }
+    }
+}); });
+var AddFormAssetAndUserModal = function (_a) {
+    var show = _a.show, onHide = _a.onHide;
+    var classes = useStyles$5();
+    var _b = useState(false), addSuccess = _b[0], setAddSuccess = _b[1];
+    var _c = useState(false), isSubmitLoading = _c[0], setIsSubmitLoading = _c[1];
+    var _d = useState(""), error = _d[0], setError = _d[1];
+    var _e = useFormsContext(), _f = _e.state, assetCodes = _f.assetCodes, FormId = _f.FormId, FormName = _f.FormName, _g = _f.userFormAssetData, AssetId = _g.AssetId, AssetName = _g.AssetName, UserId = _g.UserId, IsDefault = _g.IsDefault, _h = _e.actions, setAssetCodes = _h.setAssetCodes, setAssetId = _h.setAssetId, setAssetName = _h.setAssetName, setUserId = _h.setUserId, setIsDefault = _h.setIsDefault;
+    var allAssets = useAssetContext().state.allAssets;
+    var _j = useForm({ defaultValues: INITIAL_VALUES_MODAL, mode: "onChange" }), control = _j.control, handleSubmit = _j.handleSubmit, setValue = _j.setValue, watch = _j.watch, isValid = _j.formState.isValid, reset = _j.reset;
+    //states
+    var _k = useState(true), fullWidth = _k[0]; _k[1];
+    var _l = useState("sm"), maxWidth = _l[0]; _l[1];
+    var handleCancel = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            reset();
+            setAssetId(1);
+            setAssetName("Plant");
+            onHide(false);
+            return [2 /*return*/];
+        });
+    }); };
+    var buildTreeAssets = function (nodes) {
+        if (nodes === undefined)
+            return;
+        //tree build functions
+        var idMapping = nodes.reduce(function (acc, el, i) {
+            acc[el.id] = i;
+            return acc;
+        }, {});
+        var root;
+        nodes.forEach(function (el) {
+            if (el.parentId === null) {
+                root = el;
+                return;
+            }
+            var parentEl = nodes[idMapping[el.parentId]];
+            if (parentEl) {
+                parentEl.children = __spreadArray(__spreadArray([], ((parentEl === null || parentEl === void 0 ? void 0 : parentEl.children) || []), true), [el], false);
+            }
+        });
+        setAssetCodes(root);
+    };
+    var loadFilterAssets = function () {
+        var mydataSource = [];
+        allAssets.forEach(function (row) {
+            var code = TransformAssetCodeModel(row);
+            mydataSource = __spreadArray(__spreadArray([], mydataSource, true), [code], false);
+        });
+        buildTreeAssets(mydataSource);
+    };
+    var changeSearchAsset = function (value, description) {
+        setValue("AssetId", parseInt(value));
+        setAssetId(parseInt(value));
+        setAssetName(description);
+    };
+    var handleClose = function (event, reason) {
+        if (reason === "clickaway") {
+            return;
+        }
+        setAddSuccess(false);
+    };
+    var userId = watch("UserId");
+    var changeUserId = function () {
+        setUserId(userId);
+    };
+    var isDefault = watch("IsDefault");
+    var changeIsDefault = function () {
+        setIsDefault(isDefault);
+    };
+    var onSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var res;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsSubmitLoading(true);
+                    return [4 /*yield*/, upsertUserFormAsset(FormId, AssetId, UserId, IsDefault)];
+                case 1:
+                    res = _a.sent();
+                    if (res.ok) {
+                        setIsSubmitLoading(false);
+                        setAddSuccess(true);
+                        reset();
+                        onHide(true);
+                    }
+                    else {
+                        setIsSubmitLoading(false);
+                        setError(res.message);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        if (show) {
+            reset();
+            setAssetId(1),
+                setAssetName('Plant'),
+                setValue("UserId", UserId);
+            setValue("IsDefault", IsDefault);
+            setIsSubmitLoading(false);
+            loadFilterAssets();
+        }
+    }, [show]);
+    useEffect(function () {
+        changeUserId();
+    }, [userId]);
+    useEffect(function () {
+        changeIsDefault();
+    }, [isDefault]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); } },
+            React__default.createElement("form", { onSubmit: handleSubmit(onSubmit) },
+                React__default.createElement(Grid$1, { container: true, style: { padding: "15px 0 20px" } },
+                    React__default.createElement(DialogTitle$2, { style: {
+                            padding: "5px 40px 10px 24px",
+                            marginRight: 20,
+                            width: "100%"
+                        } },
+                        React__default.createElement(Grid$1, { item: true, md: 12, xs: 12 },
+                            React__default.createElement("h1", { style: { fontSize: "1em" } },
+                                "FORM: ",
+                                FormName))),
+                    React__default.createElement(Grid$1, { container: true, item: true },
+                        React__default.createElement(DialogContent$2, { dividers: true },
+                            React__default.createElement(Grid$1, { container: true },
+                                React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { paddingLeft: 0 }, className: classes.inputEditable },
+                                    React__default.createElement(Controller, { name: "AssetId", control: control, render: function (_a) { return (React__default.createElement(TreePickerControl, { className: classes.assetPicker, inputTitle: "Asset", title: "Choose Asset", dataSource: assetCodes, value: AssetId, description: AssetName, onSelect: changeSearchAsset, selectBranch: true, selectActive: false, selectInternal: false })); } }))),
+                            React__default.createElement(Grid$1, { container: true },
+                                React__default.createElement(Grid$1, { item: true, md: 6, xs: 12, style: { paddingLeft: 0 } },
+                                    React__default.createElement(Controller, { name: "UserId", control: control, rules: { required: 'User is required' }, render: function (_a) {
+                                            var _b = _a.field, onChange = _b.onChange, value = _b.value;
+                                            return (React__default.createElement(UsersPicker, { value: value, onChange: onChange }));
+                                        } })),
+                                React__default.createElement(Grid$1, { item: true, xs: 12, md: 6, style: { marginTop: 8, paddingLeft: "20px" } },
+                                    React__default.createElement(Controller, { name: "IsDefault", control: control, render: function (_a) {
+                                            var field = _a.field;
+                                            return (React__default.createElement(FormControlLabel, { className: classes.checkbox, control: React__default.createElement(Checkbox, { checked: field.value, onChange: field.onChange, name: "IsDefault", color: "primary" }), label: "Default for User" }));
+                                        } })))),
+                        React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, justifyContent: "flex-end", style: { marginTop: "15px" } },
+                            React__default.createElement(DialogActions$2, { style: { padding: "0px 24px" } },
+                                React__default.createElement(Grid$1, { container: true, justifyContent: "flex-end", spacing: 2, style: { margin: 0 } },
+                                    React__default.createElement(Grid$1, { item: true, md: 3, xs: 4 },
+                                        React__default.createElement(Button$1, { fullWidth: true, variant: "contained", color: "default", onClick: handleCancel }, "Cancel")),
+                                    React__default.createElement(Grid$1, { item: true, md: 3, xs: 4, style: { paddingRight: 0 } },
+                                        React__default.createElement(Button$1, { fullWidth: true, startIcon: isSubmitLoading && React__default.createElement(CircularProgress$1, { size: "1rem" }), disabled: !isValid || isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save"))))))))),
+        React__default.createElement(Snackbar$1, { open: addSuccess, autoHideDuration: 2500, onClose: handleClose },
+            React__default.createElement(Alert$3, { severity: "info", onClose: handleClose }, "Success")),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
+};
+
+var useStyles$4 = makeStyles$1(function (theme) { return ({
+    root: {
+        "& .input-group-text": {
+            display: "none"
+        },
+        "& .MuiDialogContent-dividers": {
+            padding: 0
+        }
+    },
+    modalTitle: {
+        backgroundColor: "#ced2cc",
+        color: "#495057",
+        textAlign: "center"
+    },
+    modalTitleCloseWO: {
+        backgroundColor: "#28a745",
+        color: "white",
+        textAlign: "center"
+    },
+    modalWarning: {
+        color: "white",
+        backgroundColor: "#dc3545",
+        textAlign: "center"
+    },
+    messageTitle: {
+        fontSize: 15,
+        fontWeight: "bold",
+        color: "#0000008A"
+    },
+    formControl: {
+        margin: theme.spacing(2),
+        minWidth: 120
+    },
+    errorLabel: {
+        fontSize: 12,
+        color: "#F44336"
+    },
+    infoLabel: {
+        fontSize: 12,
+        color: "#757575"
+    }
+}); });
+var DeleteFormAssetAndUserModal = function (_a) {
+    var show = _a.show, onHide = _a.onHide;
+    var classes = useStyles$4();
+    var _b = useState(true), fullWidth = _b[0]; _b[1];
+    var _c = useState("sm"), maxWidth = _c[0]; _c[1];
+    var _d = useState(false), isSubmitLoading = _d[0], setIsSubmitLoading = _d[1];
+    var _e = useState(""), error = _e[0], setError = _e[1];
+    var _f = useState(false), formAssetAndUserRemovedSuccess = _f[0], setFormAssetAndUserRemovedSuccess = _f[1];
+    var _g = useFormsContext().state.userFormAssetData, FormAssetId = _g.FormAssetId, UserId = _g.UserId;
+    var handleCancel = function () {
+        setIsSubmitLoading(false);
+        onHide(false);
+    };
+    var handleClose = function (event, reason) {
+        if (reason === "clickaway") {
+            return;
+        }
+        setFormAssetAndUserRemovedSuccess(false);
+    };
+    var handleRemoveFormAssetAndUser = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var res;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsSubmitLoading(true);
+                    return [4 /*yield*/, deleteUserFormAsset(FormAssetId, UserId)];
+                case 1:
+                    res = _a.sent();
+                    if (res.ok) {
+                        setFormAssetAndUserRemovedSuccess(true);
+                        setIsSubmitLoading(false);
+                        onHide(true);
+                    }
+                    else {
+                        setError(res.message);
+                        setIsSubmitLoading(false);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
+            React__default.createElement(DialogTitle$2, { id: "responsive-dialog-title" }, "WARNING"),
+            React__default.createElement(DialogContent$2, null,
+                React__default.createElement(DialogContentText, { style: { padding: 0, margin: 0 } }, "Be careful, once deleted you will not be able to recover this, are you sure you want to delete?")),
+            React__default.createElement(DialogActions$2, { style: { padding: "16px 24px" } },
+                React__default.createElement(Button$1, { onClick: function () { return onHide(false); }, autoFocus: true, color: "default" }, "CANCEL"),
+                React__default.createElement(Button$1, { autoFocus: true, color: "secondary", startIcon: isSubmitLoading && React__default.createElement(CircularProgress$1, { size: "1rem" }), onClick: handleRemoveFormAssetAndUser }, "Delete"))),
+        React__default.createElement(Snackbar$1, { open: formAssetAndUserRemovedSuccess, autoHideDuration: 2500, onClose: handleClose },
+            React__default.createElement(Alert$3, { severity: "info", onClose: handleClose }, "Success")),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
+};
+
+var useStyles$3 = makeStyles(function (theme) {
+    var _a, _b, _c, _d, _e;
+    return ({
+        root: {
+            "& h3": {
+                display: "inline-block",
+                marginTop: 0,
+                paddingBotton: 0,
+                paddingLeft: 20,
+                border: "none",
+                userSelect: "none"
+            },
+            "& .content-wrapper": {
+                border: "none"
+            },
+            "& .ag-icon-menu": {
+                display: "none"
+            },
+            "& .ag-root-wrapper": {
+                borderRadius: 3
+            },
+            "& .ag-header-cell": {
+                padding: "0px !important",
+                textAlign: "center !important",
+                fontSize: 10
+            },
+            "& .ag-header-cell-label": {
+                justifyContent: "center"
+            },
+            "& .ag-cell": {
+                padding: "0px !important",
+                textAlign: "center !important",
+                fontSize: 12,
+                lineBreak: "auto",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                border: "0 !important",
+                wordBreak: "break-word"
+            },
+            "& .ag-comments": {
+                display: "flex",
+                justifyContent: "flex-start",
+                alignItems: "center"
+            },
+            "& .ag-selection-checkbox": {
+                marginLeft: "10px !important"
+            }
+        },
+        modalTitle: {
+            backgroundColor: "#ced2cc",
+            color: "#495057",
+            textAlign: "center"
+        },
+        modalTitleCloseWO: {
+            backgroundColor: "#28a745",
+            color: "white",
+            textAlign: "center"
+        },
+        modalWarning: {
+            color: "white",
+            backgroundColor: "#dc3545",
+            textAlign: "center"
+        },
+        messageTitle: {
+            fontSize: 15,
+            fontWeight: "bold",
+            color: "#0000008A"
+        },
+        responsive: (_a = {},
+            _a[theme.breakpoints.up("md")] = {
+                padding: "0 10px 0 0 !important",
+                marginTop: "0 !important"
+            },
+            _a),
+        responsiveTwo: (_b = {},
+            _b[theme.breakpoints.up("md")] = {
+                padding: "0 0 0 10px !important",
+                marginTop: "0 !important"
+            },
+            _b),
+        responsiveThree: (_c = {},
+            _c[theme.breakpoints.up("md")] = {
+                padding: "0 !important"
+            },
+            _c),
+        responsiveFour: (_d = {},
+            _d[theme.breakpoints.up("md")] = {
+                padding: "0 10px 0 0 !important"
+            },
+            _d),
+        responsiveFive: (_e = {},
+            _e[theme.breakpoints.up("md")] = {
+                padding: "0 0 0 10px !important"
+            },
+            _e)
+    });
+});
+var FormAssetandUsersTable = function (_a) {
+    var show = _a.show, onHide = _a.onHide;
+    var _b = useState(null), gridApi = _b[0], setGridApi = _b[1];
+    var classes = useStyles$3();
+    var gridStyle = useMemo(function () { return ({ height: "100%", width: "100%" }); }, []);
+    var _c = useState(true), fullWidth = _c[0]; _c[1];
+    var _d = useState("md"), maxWidth = _d[0]; _d[1];
+    var _e = useState([]), columnDefs = _e[0], setColumnDefs = _e[1];
+    var _f = useState(false), isLoading = _f[0], setIsLoading = _f[1];
+    var _g = useState(""), error = _g[0], setError = _g[1];
+    var searchFormAssetsAndUsers = useSearchFormAssetsAndUsers({ setIsLoading: setIsLoading, setError: setError });
+    var _h = useState(false), openAddFormAssetAndUserModal = _h[0], setOpenAddFormAssetAndUserModal = _h[1];
+    var _j = useState(false), openDeleteFormAssetAndUserModal = _j[0], setOpenDeleteFormAssetAndUserModal = _j[1];
+    var _k = useState(false), shouldUpdateWhenExit = _k[0], setShouldUpdateWhenExit = _k[1];
+    var _l = useFormsContext(), _m = _l.state, FormName = _m.FormName; _m.userFormAssetData; var formAssetsAndUsersList = _m.formAssetsAndUsersList, setUserFormAssetData = _l.actions.setUserFormAssetData;
+    var loadingOverlayComponent = useMemo(function () {
+        return LazyLoading;
+    }, []);
+    var gridOptions = {
+        overlayNoRowsTemplate: "ㅤ"
+    };
+    var handleCancel = function () {
+        onHide(shouldUpdateWhenExit);
+    };
+    var getContextMenuItems = useCallback(function (params) {
+        var _a;
+        var data = (_a = params.node) === null || _a === void 0 ? void 0 : _a.data;
+        var result = [];
+        if (data) {
+            result.push({
+                name: "New Form/Asset/User",
+                action: function () {
+                    setUserFormAssetData(data);
+                    setOpenAddFormAssetAndUserModal(true);
+                }
+            });
+        }
+        if (data) {
+            {
+                result.push("separator", {
+                    name: "Delete Form/Asset/User",
+                    action: function () {
+                        setUserFormAssetData(data);
+                        setOpenDeleteFormAssetAndUserModal(true);
+                    }
+                });
+            }
+        }
+        var addNewForm = [];
+        if (!data) {
+            addNewForm.push({
+                name: "New Form/Asset/User",
+                action: function () {
+                }
+            });
+        }
+        return data ? result : addNewForm;
+    }, [formAssetsAndUsersList]);
+    useEffect(function () {
+        if (show) {
+            setShouldUpdateWhenExit(false);
+            searchFormAssetsAndUsers();
+            setColumnDefs([]);
+            var newColumns = [];
+            newColumns.push({
+                field: "AssetId",
+                headerName: "Asset",
+                sortable: false,
+                flex: 7,
+                minWidth: 130,
+                cellRenderer: AssetNameColumn
+            }),
+                newColumns.push({
+                    field: "UserName",
+                    headerName: "User",
+                    sortable: false,
+                    flex: 4,
+                    minWidth: 130
+                }),
+                newColumns.push({
+                    field: "isDefault",
+                    headerName: "Default",
+                    sortable: false,
+                    flex: 1,
+                    minWidth: 80,
+                    valueFormatter: function (params) {
+                        return params.value ? 'Yes' : 'No';
+                    }
+                });
+            setColumnDefs(newColumns);
+        }
+    }, [show]);
+    useEffect(function () {
+        if (isLoading) {
+            gridApi === null || gridApi === void 0 ? void 0 : gridApi.showLoadingOverlay();
+        }
+        else
+            gridApi === null || gridApi === void 0 ? void 0 : gridApi.hideOverlay();
+    }, [isLoading]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: handleCancel, style: { margin: "20px 25%" }, className: classes.root },
+            React__default.createElement(Grid, { container: true, style: { padding: "15px 0 0" } },
+                React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
+                    React__default.createElement(DialogTitle$2, { id: "max-width-dialog-title", style: { padding: "5px 24px 10px" } },
+                        "FORM NAME: ",
+                        FormName)),
+                React__default.createElement(Grid, { container: true, item: true },
+                    React__default.createElement(DialogContent$2, { dividers: true, style: { height: "65vh", paddingTop: "20px" } }, isLoading ? (React__default.createElement(Grid, { container: true, style: {
+                            height: "59vh",
+                            width: "100%",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            position: "relative"
+                        } },
+                        React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: {
+                                position: "absolute",
+                                top: "50%",
+                                left: "50%",
+                                transform: "translate(-50%, -50%)"
+                            } },
+                            React__default.createElement(LazyLoading, null)))) : (React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: {
+                            height: "59vh",
+                            border: "4px solid #ccc",
+                            borderRadius: 10,
+                            margin: "0",
+                            padding: "0"
+                        } },
+                        React__default.createElement("div", { style: gridStyle, className: "ag-theme-alpine" },
+                            React__default.createElement(AgGridReact, { onGridReady: function (params) { return setGridApi(params.api); }, getContextMenuItems: getContextMenuItems, loadingOverlayComponent: loadingOverlayComponent, rowData: formAssetsAndUsersList, columnDefs: columnDefs, gridOptions: gridOptions, rowHeight: 45, headerHeight: 32, rowSelection: "single", animateRows: true, pagination: true })))))),
+                React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "20px 0" } },
+                    React__default.createElement(DialogActions$2, { style: { padding: "0px 24px" } },
+                        React__default.createElement(Grid, { item: true, md: 3, xs: 6 },
+                            React__default.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: handleCancel }, "CLOSE")),
+                        React__default.createElement(Grid, { item: true, md: 3, xs: 6 },
+                            React__default.createElement(Button, { fullWidth: true, variant: "contained", color: "primary", onClick: function () { return setOpenAddFormAssetAndUserModal(true); } }, "ADD NEW")))))),
+        React__default.createElement(AddFormAssetAndUserModal, { show: openAddFormAssetAndUserModal, onHide: function (shouldUpdate) {
+                if (shouldUpdate) {
+                    searchFormAssetsAndUsers();
+                    setShouldUpdateWhenExit(true);
+                }
+                setOpenAddFormAssetAndUserModal(false);
+            } }),
+        React__default.createElement(DeleteFormAssetAndUserModal, { show: openDeleteFormAssetAndUserModal, onHide: function (shouldUpdate) {
+                if (shouldUpdate) {
+                    searchFormAssetsAndUsers();
+                    setShouldUpdateWhenExit(true);
+                }
+                setOpenDeleteFormAssetAndUserModal(false);
+            } }),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
+};
+
+var useStyles$2 = makeStyles(function (theme) {
+    return createStyles({
+        root: {
+            "& .ag-icon-menu": {
+                display: "none"
+            },
+            "& .ag-checkbox-input-wrapper": {
+                margin: "0 10px"
+            },
+            "& .ag-cell": {
+                alignItems: "center",
+                padding: "0 !important",
+                border: "unset !important"
+            },
+            "& .ag-header-cell": {
+                padding: "0px !important",
+                textAlign: "center !important",
+                fontSize: 10
+            },
+            "& .ag-root-wrapper": {
+                minHeight: "100% !important",
+                borderRadius: 3,
+                paddingBottom: 45
+            },
+            "& .ag-cell-wrapper": {
+                width: "95%",
+                textAlign: "center"
+            },
+            "& .ag-body-viewport": {
+                borderBottom: "2px solid #DDE2EB"
+            },
+            "& .ag-menu-option": {
+                cursor: "pointer"
+            }
+        }
+    });
+});
+var ButtonToShowFormsAssetAndUsers = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var params = _a.params, setOpenFormAssetAndUsersTable = _a.setOpenFormAssetAndUsersTable;
+    useStyles$2();
+    var _g = useFormsContext().actions, setFormId = _g.setFormId, setFormName = _g.setFormName;
+    var handleOpenAssetAndUsersTable = function () {
+        var _a, _b;
+        setOpenFormAssetAndUsersTable(true);
+        setFormId((_a = params.data) === null || _a === void 0 ? void 0 : _a.FormId);
+        setFormName((_b = params.data) === null || _b === void 0 ? void 0 : _b.FormName);
+    };
+    if (params.data) {
+        return (React__default.createElement("div", { style: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                height: "100%",
+                padding: 5
+            } },
+            React__default.createElement(Button$1, { style: { height: "100%", maxHeight: "27px" }, fullWidth: true, variant: ((_b = params.data) === null || _b === void 0 ? void 0 : _b.AssetCount) !== 0 ? "contained" : "outlined", color: "primary", onClick: function () { return handleOpenAssetAndUsersTable(); } }, ((_c = params.data) === null || _c === void 0 ? void 0 : _c.AssetCount) !== 0 ?
+                (((_d = params.data) === null || _d === void 0 ? void 0 : _d.AssetCount) <= 1 ? "".concat((_e = params.data) === null || _e === void 0 ? void 0 : _e.AssetCount, " ASSET") : "".concat((_f = params.data) === null || _f === void 0 ? void 0 : _f.AssetCount, " ASSETS"))
+                : "add asset")));
+    }
+    else
+        return React__default.createElement(React__default.Fragment, null);
+};
+
+makeStyles(function (theme) {
+    return createStyles({
+        root: {
+            "& .ag-icon-menu": {
+                display: "none"
+            },
+            "& .ag-checkbox-input-wrapper": {
+                margin: "0 10px"
+            },
+            "& .ag-cell": {
+                alignItems: "center",
+                padding: "0 !important",
+                border: "unset !important"
+            },
+            "& .ag-header-cell": {
+                padding: "0px !important",
+                textAlign: "center !important",
+                fontSize: 10
+            },
+            "& .ag-root-wrapper": {
+                minHeight: "100% !important",
+                borderRadius: 3,
+                paddingBottom: 45
+            },
+            "& .ag-cell-wrapper": {
+                width: "95%",
+                textAlign: "center"
+            },
+            "& .ag-body-viewport": {
+                borderBottom: "2px solid #DDE2EB"
+            },
+            "& .ag-menu-option": {
+                cursor: "pointer"
+            }
+        }
+    });
+});
+var ButtonToShowQuestions = function (_a) {
+    var _b;
+    var params = _a.params, setOpenFormQuestions = _a.setOpenFormQuestions;
+    var _c = useFormsContext().actions, setFormId = _c.setFormId, setFormName = _c.setFormName;
+    var handleOpenAssetAndUsersTable = function () {
+        var _a, _b;
+        setOpenFormQuestions(true);
+        setFormId((_a = params.data) === null || _a === void 0 ? void 0 : _a.FormId);
+        setFormName((_b = params.data) === null || _b === void 0 ? void 0 : _b.FormName);
+    };
+    if (params.data) {
+        return (React__default.createElement("div", { style: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                height: "100%",
+                padding: 5
+            } },
+            React__default.createElement(Button$1, { style: { height: "100%", maxHeight: "27px" }, fullWidth: true, variant: ((_b = params.data) === null || _b === void 0 ? void 0 : _b.AssetCount) !== 0 ? "contained" : "outlined", color: "primary", onClick: function () { return handleOpenAssetAndUsersTable(); }, disabled: true }, "QUESTIONS")));
+    }
+    else
+        return React__default.createElement(React__default.Fragment, null);
+};
+
+var useStyles$1 = makeStyles(function (theme) {
+    var _a, _b, _c;
+    return ({
+        root: {
+            "& .ag-icon-menu": {
+                display: "none"
+            },
+            "& .ag-header-cell-label": {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+            },
+            "& .ag-header-cell-text": {
+                textAlign: "center !important"
+            },
+            "& .ag-checkbox-input-wrapper": {
+                margin: "0 10px"
+            },
+            "& .ag-cell": {
+                alignItems: "center",
+                padding: "0 !important",
+                border: "unset !important"
+            },
+            "& .ag-header-cell": {
+                padding: "0px !important",
+                textAlign: "center !important",
+                fontSize: 10,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+            },
+            "& .ag-cell-wrapper": {
+                textAlign: "center"
+            },
+            "& .ag-menu-option": {
+                cursor: "pointer"
+            },
+            "& .MuiDataGrid-row": {
+                cursor: "pointer"
+            },
+            "& .MuiDataGrid-columnHeaderTitle, & .MuiTablePagination-caption": {
+                fontWeight: "bold",
+                fontSize: "12px"
+            },
+            "& .MuiDataGrid-columnHeaderTitleContainer": {
+                padding: "0"
+            },
+            "& .MuiDataGrid-cell--textLeft": {
+                fontSize: "12px"
+            }
+        },
+        relative: {
+            position: "relative"
+        },
+        textfield: {
+            margin: theme.spacing(2)
+        },
+        btnModal: {
+            display: "flex",
+            justifyContent: "flex-end"
+        },
+        btnSearch: (_a = {},
+            _a[theme.breakpoints.up("md")] = {
+                marginLeft: "10px !important"
+            },
+            _a),
+        buttonsFilter: (_b = {},
+            _b[theme.breakpoints.up("md")] = {
+                padding: "0 8px 8px 8px"
+            },
+            _b),
+        flexEnd: (_c = {},
+            _c[theme.breakpoints.up("md")] = {
+                justifyContent: "flex-end",
+                marginTop: "-12px"
+            },
+            _c),
+        dataTable: {
+            padding: theme.spacing(1, 2)
+        }
+    });
+});
+var FormsTable = function () {
+    var gridStyle = useMemo(function () { return ({ height: "100%", width: "100%" }); }, []);
+    var classes = useStyles$1();
+    var _a = useState(null), gridApi = _a[0], setGridApi = _a[1];
+    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = useState(""), error = _c[0], setError = _c[1];
+    var _d = useState(), columnDefs = _d[0], setColumnDefs = _d[1];
+    useNavigate();
+    var searchForms = useSearchForms({ setIsLoading: setIsLoading, setError: setError });
+    var _e = useFormsContext(), formsList = _e.state.formsList, _f = _e.actions, setFormId = _f.setFormId, setFormName = _f.setFormName;
+    var _g = useState(false), openFormAssetAndUsersTable = _g[0], setOpenFormAssetAndUsersTable = _g[1];
+    var _h = useState(false); _h[0]; var setOpenFormQuestions = _h[1];
+    // const onKeyDown = (e: any) => {
+    // 	if (e.keyCode === 13) {
+    // 		searchForms();
+    // 	}
+    // };
+    var loadingOverlayComponent = useMemo(function () {
+        return LazyLoading;
+    }, []);
+    var defaultColDef = useMemo(function () {
+        return {
+            sortable: true,
+            wrapText: true,
+            autoHeight: true,
+            wrapHeaderText: true
+        };
+    }, []);
+    var renderColumns = function () {
+        setColumnDefs([]);
+        var newColumns = [];
+        newColumns.push({
+            field: "FormName",
+            headerName: "Form Name",
+            sortable: true,
+            flex: 3,
+            minWidth: 130
+        }),
+            newColumns.push({
+                field: "IncludesComment",
+                headerName: "Includes Comment",
+                sortable: false,
+                flex: 1,
+                minWidth: 130,
+                valueFormatter: function (params) {
+                    return params.value ? 'Yes' : 'No';
+                }
+            }),
+            newColumns.push({
+                field: "LayoutCode",
+                headerName: "Layout",
+                sortable: false,
+                flex: 1,
+                minWidth: 130
+            }),
+            newColumns.push({
+                field: "IsEnabled",
+                headerName: "Is Enabled",
+                sortable: false,
+                flex: 1,
+                minWidth: 130,
+                valueFormatter: function (params) {
+                    return params.value ? 'Yes' : 'No';
+                }
+            }),
+            newColumns.push({
+                field: "Questions",
+                headerName: "Questions",
+                sortable: false,
+                flex: 3,
+                minWidth: 130,
+                cellRenderer: function (params) { return ButtonToShowQuestions({ params: params, setOpenFormQuestions: setOpenFormQuestions }); }
+            }),
+            newColumns.push({
+                field: "AssetAndUsers",
+                headerName: "Assets and Users",
+                sortable: false,
+                flex: 3,
+                minWidth: 130,
+                cellRenderer: function (params) { return ButtonToShowFormsAssetAndUsers({ params: params, setOpenFormAssetAndUsersTable: setOpenFormAssetAndUsersTable }); }
+            }),
+            setColumnDefs(newColumns);
+    };
+    var getContextMenuItems = useCallback(function (params) {
+        var _a;
+        var data = (_a = params.node) === null || _a === void 0 ? void 0 : _a.data;
+        var result = [];
+        if (data) {
+            result.push({
+                name: "View Forms Assets",
+                action: function () {
+                    setOpenFormAssetAndUsersTable(true);
+                    setFormId(data === null || data === void 0 ? void 0 : data.FormId);
+                    setFormName(data === null || data === void 0 ? void 0 : data.FormName);
+                }
+            });
+        }
+        return result;
+    }, [formsList]);
+    // const resetFilter = () => {
+    // 	navigate(`/configuration/forms`, { replace: true });
+    // };
+    useEffect(function () {
+        renderColumns();
+    }, [formsList]);
+    useEffect(function () {
+        if (isLoading) {
+            gridApi === null || gridApi === void 0 ? void 0 : gridApi.showLoadingOverlay();
+        }
+        else {
+            gridApi === null || gridApi === void 0 ? void 0 : gridApi.hideOverlay();
+        }
+    }, [isLoading, formsList, gridApi]);
+    return (React__default.createElement(Grid, { container: true, justifyContent: "center" },
+        React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" } },
+            React__default.createElement(Typography$1, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "Forms")),
+        React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", className: classes.root },
+            React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" }, className: classes.relative },
+                React__default.createElement(FormAssetandUsersTable, { show: openFormAssetAndUsersTable, onHide: function (shouldUpdate) {
+                        if (shouldUpdate) {
+                            searchForms();
+                        }
+                        setOpenFormAssetAndUsersTable(false);
+                    } }),
+                React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: {
+                        height: "61vh",
+                        border: "4px solid #ccc",
+                        borderRadius: 10,
+                        padding: 10,
+                        margin: "20px 0 10px"
+                    } },
+                    React__default.createElement("div", { style: gridStyle, className: "ag-theme-alpine" },
+                        React__default.createElement(AgGridReact, { rowData: formsList, columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 38, headerHeight: 42, loadingOverlayComponent: loadingOverlayComponent, animateRows: true, getContextMenuItems: function (e) { return getContextMenuItems(e); }, pagination: true, onRowDoubleClicked: function (event) {
+                                var _a, _b;
+                                setFormId((_a = event.data) === null || _a === void 0 ? void 0 : _a.FormId);
+                                setFormName((_b = event.data) === null || _b === void 0 ? void 0 : _b.FormName);
+                                setOpenFormAssetAndUsersTable(true);
+                            }, rowSelection: "single", onGridReady: function (params) { return setGridApi(params.api); } }))))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
+};
+
+var ConfigurationFormsPage = function (prop) {
+    var _a = useState(true); _a[0]; var setIsLoading = _a[1];
+    var _b = useState(""); _b[0]; var setError = _b[1];
+    // const { state: { searchText }, actions: { setSearchText } } = useFormsContext();
+    var _c = useState(""); _c[0]; _c[1];
+    // const setupIsReady = useFilterInQuery([
+    // 	{
+    // 		key: 'search',
+    // 		value: searchText,
+    // 		setter: setSearchText
+    // 	}
+    // ])
+    var searchForms = useSearchForms({ setIsLoading: setIsLoading, setError: setError });
+    useEffect(function () {
+        searchForms();
+    }, []);
+    return (React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
+        React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { margin: 0 } },
+            React__default.createElement(Paper, { elevation: 1, style: {
+                    width: "100%",
+                    padding: "10px 0 20px",
+                    borderRadius: "0.75rem"
+                } },
+                React__default.createElement(FormsTable, null)))));
+};
+
+var FormsPage = function () {
+    return (React__default.createElement(FormsProvider, null,
+        React__default.createElement(ConfigurationFormsPage, null)));
+};
+
+function Configuration() {
+    var option = useParams().option;
+    var _a = useContext(ConfigurationContext), customConfiguration = _a[0], CustomSidebar = _a[1];
+    var routes = __spreadArray(__spreadArray([
+        {
+            path: "/",
+            sidebar: function () { return React__default.createElement("div", null, "Configuration"); },
+            main: function () { return React__default.createElement(Navigate, { to: "users" }); }
+        },
+        {
+            path: "shifts",
+            sidebar: function () { return React__default.createElement("div", null, "Shifts"); },
+            main: function () { return React__default.createElement(ShiftsCrewsPage, null); }
+        },
+        {
+            path: "asset",
+            sidebar: function () { return React__default.createElement("div", null, "Configuration Asset"); },
+            main: function () { return React__default.createElement(AssetPage, null); }
+        },
+        {
+            path: "users",
+            sidebar: function () { return React__default.createElement("div", null, "Users"); },
+            main: function () { return React__default.createElement(UsersPage, null); }
+        },
+        {
+            path: "profiles",
+            sidebar: function () { return React__default.createElement("div", null, "profiles"); },
+            main: function () { return React__default.createElement(UsersPage$1, null); }
+        }
+    ], customConfiguration, true), [
+        {
+            path: "logs",
+            sidebar: function () { return React__default.createElement("div", null, "Logs"); },
+            main: function () { return React__default.createElement(LogsPage, null); }
+        },
+        {
+            path: "jobs",
+            sidebar: function () { return React__default.createElement("div", null, "Jobs"); },
+            main: function () { return React__default.createElement(JobsPage, null); }
+        },
+        {
+            path: "forms",
+            sidebar: function () { return React__default.createElement("div", null, "Forms"); },
+            main: function () { return React__default.createElement(FormsPage, null); }
+        },
+    ], false);
+    return (React__default.createElement(GenericPanel, { title: "Configuration", description: "" },
+        React__default.createElement("div", { className: "row", style: { display: "flex" } },
+            React__default.createElement("div", { className: "col-md-2 mt-3 pt-0 pr-0 mes-div-submenu", style: { flex: "20%" } },
+                React__default.createElement("h3", { className: "mes-menu-group" }, "Plant"),
+                React__default.createElement(MenuList, { className: "mes-submenu" },
+                    React__default.createElement(MenuItem, { selected: option === "shifts", className: "p-0" },
+                        React__default.createElement(Link, { to: "/configuration/shifts", className: "nav-link" }, "Shift / Crews")),
+                    React__default.createElement(MenuItem, { selected: option === "asset", className: "p-0" },
+                        React__default.createElement(Link, { to: "/configuration/asset", className: "nav-link" }, "Assets Tree"))),
+                React__default.createElement("h3", { className: "mes-menu-group" }, "Security"),
+                React__default.createElement(MenuList, { className: "mes-submenu" },
+                    React__default.createElement(MenuItem, { selected: option === "users", className: "p-0" },
+                        React__default.createElement(Link, { to: "/configuration/users", className: "nav-link" }, "Users")),
+                    React__default.createElement(MenuItem, { selected: option === "profiles", className: "p-0" },
+                        React__default.createElement(Link, { to: "/configuration/profiles", className: "nav-link" }, "Profiles"))),
+                React__default.createElement(CustomSidebar, { option: option }),
+                React__default.createElement("h3", { className: "mes-menu-group" }, "Maintenance"),
+                React__default.createElement(MenuList, { className: "mes-submenu" },
+                    React__default.createElement(MenuItem, { selected: option === "logs", className: "p-0" },
+                        React__default.createElement(Link, { to: "/configuration/logs", className: "nav-link" }, "Logs")),
+                    React__default.createElement(MenuItem, { selected: option === "jobs", className: "p-0" },
+                        React__default.createElement(Link, { to: "/configuration/jobs", className: "nav-link" }, "Jobs"))),
+                React__default.createElement("h3", { className: "mes-menu-group" }, "Forms"),
+                React__default.createElement(MenuList, { className: "mes-submenu" },
+                    React__default.createElement(MenuItem, { selected: option === "forms", className: "p-0" },
+                        React__default.createElement(Link, { to: "/configuration/forms", className: "nav-link" }, "Form Settings")))),
+            React__default.createElement("div", { className: "col-md-10 m-3", style: { flex: "80%" } },
+                React__default.createElement(Routes, null, routes.map(function (route, index) { return (React__default.createElement(Route, { key: index, path: route.path, element: React__default.createElement(route.main, null) })); }))))));
+}
+
+var Home = function () { return (React__default.createElement("div", { style: {
+        backgroundImage: "url(\"/home.jpg\")",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        backgroundRepeat: "no-repeat",
+        minHeight: "100%",
+        height: "100vh",
+        width: "100%",
+        position: "absolute"
+    } })); };
+
+var TrendingsInitialState = {
+    timeScopeStart: moment(new Date()).subtract(1, "days").toDate(),
+    timeScopeEnd: new Date(),
+    scope: "1 day",
+    graphPan: false,
+    graphShouldUpdate: 0,
+    views: [
+        {
+            ViewId: 0,
+            ViewName: '',
+            UserName: null,
+            IsPublic: false,
+            LastModified: null,
+            LastModifiedBy: null
+        }
+    ],
+    viewSelected: null,
+    viewTags: [
+        {
+            ViewId: 0,
+            TagId: 0,
+            TagName: '',
+            Color: '',
+            IsVisible: true,
+            MinScale: 0,
+            MaxScale: 0,
+            IsAutoScale: true,
+            Alias: '',
+            TagType: '',
+            Unit: ''
+        }
+    ]
 };
 var TrendingsReducer = createSlice({
     name: "__",
@@ -8881,7 +10205,7 @@ var upsertViewTag = function (ViewId, TagId, Color, MinScale, MaxScale, IsVisibl
 
 var LoadViewModal = function (_a) {
     var open = _a.open, handleClose = _a.handleClose;
-    var _b = useTrendingContext(), _c = _b.state; _c.viewTags; var views = _c.views, viewSelected = _c.viewSelected, _d = _b.actions; _d.setViews; var setViewTags = _d.setViewTags, setViewSelected = _d.setViewSelected;
+    var _b = useTrendingContext(), _c = _b.state, views = _c.views, viewSelected = _c.viewSelected, _d = _b.actions; _d.setViews; var setViewTags = _d.setViewTags, setViewSelected = _d.setViewSelected;
     var _e = useState(false), isLoading = _e[0], setIsLoading = _e[1];
     var _f = useState(''), error = _f[0], setError = _f[1];
     var handleSelect = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -8901,21 +10225,21 @@ var LoadViewModal = function (_a) {
                         setError(viewTagsResp.message);
                     }
                     setIsLoading(false);
-                    handleClose();
+                    handleClose(true);
                     _a.label = 2;
                 case 2: return [2 /*return*/];
             }
         });
     }); };
     return (React__default.createElement("div", null,
-        React__default.createElement(MesfModal, { open: open, handleClose: handleClose, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
             React__default.createElement(MesfModal.Content, null,
                 React__default.createElement(Grid$1, { container: true },
                     React__default.createElement(Grid$1, { item: true, md: 12 }, views.length ? (React__default.createElement(Autocomplete, { size: 'small', id: "list-of-views", options: views, getOptionLabel: function (option) { return option.ViewName; }, onChange: function (ev, val) { return setViewSelected(val); }, style: { width: "100%" }, renderInput: function (params) { return React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" })); } })) :
                         (React__default.createElement("div", null, "No tag views detected, please add one"))))),
             React__default.createElement(MesfModal.Actions, null,
                 React__default.createElement("div", { style: { paddingTop: "1rem" } },
-                    React__default.createElement(Button$1, { variant: 'outlined', style: { marginRight: "1rem" }, color: 'secondary', onClick: handleClose }, "Cancel"),
+                    React__default.createElement(Button$1, { variant: 'outlined', style: { marginRight: "1rem" }, color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel"),
                     React__default.createElement(ButtonWithLoading, { onClick: handleSelect, variant: 'contained', color: 'primary', isLoading: isLoading, style: { marginRight: "1rem" } }, "Apply")))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
@@ -9027,7 +10351,7 @@ var SaveAsViewModal = function (_a) {
                             setError("Tag ".concat(index, " failed with reason: ").concat(result.reason));
                         }
                         else {
-                            handleClose();
+                            handleClose(true);
                         }
                     });
                     return [3 /*break*/, 4];
@@ -9041,7 +10365,7 @@ var SaveAsViewModal = function (_a) {
         });
     }); };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(MesfModal, { open: open, handleClose: handleClose, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
             React__default.createElement(Divider, null),
             React__default.createElement(MesfModal.Content, null,
                 React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "1rem" } },
@@ -9055,7 +10379,7 @@ var SaveAsViewModal = function (_a) {
             React__default.createElement(MesfModal.Actions, null,
                 React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
                     React__default.createElement(Grid$1, { item: true },
-                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: handleClose }, "Cancel")),
+                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
                     React__default.createElement(Grid$1, { item: true },
                         React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'primary', onClick: handleSubmit, isLoading: isLoading }, "Save"))))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
@@ -9193,8 +10517,73 @@ var timeDifference = function (start, end) {
     return "".concat(hours, "h ").concat(remainingMinutes, "m ").concat(remainingSeconds, "s");
 };
 
+var SaveViewModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose;
+    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = useState(''), error = _c[0], setError = _c[1];
+    var _d = useTrendingContext().state, viewTags = _d.viewTags, viewSelected = _d.viewSelected;
+    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resp, results;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsLoading(true);
+                    if (!(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId)) return [3 /*break*/, 4];
+                    return [4 /*yield*/, upsertView(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId, viewSelected.ViewName, viewSelected.IsPublic)];
+                case 1:
+                    resp = _a.sent();
+                    if (!resp.ok) return [3 /*break*/, 3];
+                    return [4 /*yield*/, Promise.allSettled(viewTags.map(function (_a) {
+                            var TagId = _a.TagId, Color = _a.Color, MinScale = _a.MinScale, MaxScale = _a.MaxScale, IsAutoScale = _a.IsAutoScale, IsVisible = _a.IsVisible;
+                            upsertViewTag(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId, TagId, Color, MinScale, MaxScale, IsVisible, IsAutoScale)
+                                .then(function (r) {
+                                if (!r.ok) {
+                                    setError(r.message);
+                                }
+                            });
+                        }))];
+                case 2:
+                    results = _a.sent();
+                    results.forEach(function (result, index) {
+                        if (result.status === "rejected") {
+                            setError("Tag ".concat(index, " failed with reason: ").concat(result.reason));
+                        }
+                        else {
+                            handleClose(true);
+                        }
+                    });
+                    return [3 /*break*/, 4];
+                case 3:
+                    setError(resp.message);
+                    _a.label = 4;
+                case 4:
+                    setIsLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
+            React__default.createElement(Divider, null),
+            React__default.createElement(MesfModal.Content, null,
+                React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "1rem" } },
+                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
+                        React__default.createElement(Typography, null,
+                            "Do you want to save changes on ",
+                            React__default.createElement("strong", null, viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName),
+                            " ?")))),
+            React__default.createElement(Divider, null),
+            React__default.createElement(MesfModal.Actions, null,
+                React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
+                    React__default.createElement(Grid$1, { item: true },
+                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
+                    React__default.createElement(Grid$1, { item: true },
+                        React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'primary', onClick: handleSubmit, isLoading: isLoading }, "Save"))))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
+};
+
 var TableComponent = function (_a) {
-    var chartData = _a.chartData, cursorData = _a.cursorData;
+    var chartData = _a.chartData, cursorData = _a.cursorData, getTagsFromAPI = _a.getTagsFromAPI;
     var classes = useTagsTableStyles();
     var _b = useTrendingContext(), _c = _b.state, viewTags = _c.viewTags, viewSelected = _c.viewSelected, _d = _b.actions, setViewTags = _d.setViewTags, setGraphShouldUpdate = _d.setGraphShouldUpdate;
     var _e = useState(''), error = _e[0], setError = _e[1];
@@ -9242,8 +10631,9 @@ var TableComponent = function (_a) {
     };
     var _g = useState(null), selectedRowIndex = _g[0], setSelectedRowIndex = _g[1];
     var _h = useState(false), addTagModalOpen = _h[0], setAddTagModalOpen = _h[1];
-    var _j = useState(false), saveAsViewModalOpen = _j[0], setSaveAsViewModalOpen = _j[1];
-    var _k = useState(false), loadViewOpen = _k[0], setLoadViewOpen = _k[1];
+    var _j = useState(false), saveViewModalOpen = _j[0], setSaveViewModalOpen = _j[1];
+    var _k = useState(false), saveAsViewModalOpen = _k[0], setSaveAsViewModalOpen = _k[1];
+    var _l = useState(false), loadViewOpen = _l[0], setLoadViewOpen = _l[1];
     var handleClose = function () { return setAddTagModalOpen(false); };
     var ContextMenu = function (_a) {
         var x = _a.x, y = _a.y, options = _a.options;
@@ -9254,12 +10644,13 @@ var TableComponent = function (_a) {
             React__default.createElement("ul", null, options.map(function (option) { return (React__default.createElement("li", { key: option.id, onClick: option.onClick }, option.label)); }))));
     };
     // Position state for the context menu
-    var _l = useState({ x: 0, y: 0 }), contextMenuPosition = _l[0], setContextMenuPosition = _l[1];
+    var _m = useState({ x: 0, y: 0 }), contextMenuPosition = _m[0], setContextMenuPosition = _m[1];
     var contextMenuOptions = [
         { id: 'delete', label: 'Remove Tag', onClick: function () { return handleDelete(); } },
         { id: 'add', label: 'Add Tag', onClick: function () { return setAddTagModalOpen(true); } },
         { id: 'saveDefault', label: 'Save Default To Tag', onClick: function () { return handleSaveDefaultToTag(); } },
-        { id: 'saveAsView', label: 'Save as View', onClick: function () { return setSaveAsViewModalOpen(true); } },
+        { id: 'saveView', label: 'Save View', onClick: function () { setSaveViewModalOpen(true); } },
+        { id: 'saveViewAs', label: 'Save View as', onClick: function () { return setSaveAsViewModalOpen(true); } },
         { id: 'loadView', label: 'Load View', onClick: function () { return setLoadViewOpen(true); } },
     ];
     var handleTagSelect = function (selectedTag) {
@@ -9484,8 +10875,21 @@ var TableComponent = function (_a) {
                                 React__default.createElement(Button$1, { onClick: function () { return setLoadViewOpen(true); }, variant: 'outlined', color: 'primary' }, " Load view"))))))),
             selectedRowIndex !== null && (React__default.createElement(ContextMenu, { x: contextMenuPosition.x, y: contextMenuPosition.y, options: contextMenuOptions })),
             React__default.createElement(AddTagModal, { open: addTagModalOpen, handleClose: handleClose, onTagSelect: handleTagSelect }),
-            React__default.createElement(SaveAsViewModal, { open: saveAsViewModalOpen, handleClose: function () { return setSaveAsViewModalOpen(false); } }),
-            React__default.createElement(LoadViewModal, { open: loadViewOpen, handleClose: function () { return setLoadViewOpen(false); } })),
+            React__default.createElement(SaveViewModal, { open: saveViewModalOpen, handleClose: function (shouldUpdate) {
+                    setSaveViewModalOpen(false);
+                    if (shouldUpdate)
+                        getTagsFromAPI().then(function () { });
+                } }),
+            React__default.createElement(SaveAsViewModal, { open: saveAsViewModalOpen, handleClose: function (shouldUpdate) {
+                    setSaveAsViewModalOpen(false);
+                    if (shouldUpdate)
+                        getTagsFromAPI().then(function () { });
+                } }),
+            React__default.createElement(LoadViewModal, { open: loadViewOpen, handleClose: function (shouldUpdate) {
+                    setLoadViewOpen(false);
+                    if (shouldUpdate)
+                        getTagsFromAPI().then(function () { });
+                } })),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
 
@@ -10005,7 +11409,7 @@ var TrendingChart = function (_a) {
 
 Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip$1, Legend, TimeScale, zoomPlugin);
 var Trending = function (_a) {
-    _a.title;
+    _a.title; var getTagsFromAPI = _a.getTagsFromAPI;
     var _b = useTrendingContext(), state = _b.state, viewTags = _b.state.viewTags;
     var _c = useState(''), error = _c[0], setError = _c[1];
     var _d = useState(true), loading = _d[0], setLoading = _d[1];
@@ -10062,7 +11466,7 @@ var Trending = function (_a) {
             React__default.createElement(Grid$1, { item: true, xs: 12, style: { height: '45%' } },
                 React__default.createElement(TrendingChart, { series: series, chartData: chartData, setChartData: setChartData, chartOptions: chartOptions, setChartOptions: setChartOptions, setCursorData: setCursorData })),
             React__default.createElement(Grid$1, { item: true, xs: 12, style: { height: '40%', minWidth: "100%", paddingTop: "3rem" } },
-                React__default.createElement(TableComponent, { chartData: chartData, cursorData: cursorData })),
+                React__default.createElement(TableComponent, { chartData: chartData, cursorData: cursorData, getTagsFromAPI: getTagsFromAPI })),
             loading && (React__default.createElement(Grid$1, { item: true, xs: 12, style: { textAlign: 'center' } },
                 React__default.createElement("p", null, "Loading...")))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); }, title: "ERROR" })));
@@ -10071,44 +11475,44 @@ var Trending = function (_a) {
 var TrendingsPage = function (props) {
     var _a = useState(''), error = _a[0], setError = _a[1];
     var _b = useTrendingContext().actions, setViews = _b.setViews, setViewTags = _b.setViewTags, setViewSelected = _b.setViewSelected;
+    var getTagsFromAPI = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var viewsResp, lastCreated, viewTagsResp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, getViews(null)];
+                case 1:
+                    viewsResp = _a.sent();
+                    if (!viewsResp.ok) return [3 /*break*/, 3];
+                    setViews(viewsResp.data.tables[0].rows);
+                    lastCreated = viewsResp.data.tables[0].rows.reduce(function (prev, current) { return (prev.ViewId > current.ViewId) ? prev : current; });
+                    //viewSelected
+                    setViewSelected(lastCreated);
+                    return [4 /*yield*/, getViewTags(lastCreated.ViewId)];
+                case 2:
+                    viewTagsResp = _a.sent();
+                    if (viewTagsResp.ok) {
+                        setViewTags(viewTagsResp.data.tables[0].rows);
+                    }
+                    else {
+                        setError(viewTagsResp.message);
+                    }
+                    return [3 /*break*/, 4];
+                case 3:
+                    setError(viewsResp.message);
+                    _a.label = 4;
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
     useEffect(function () {
-        var getTags = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var viewsResp, lastCreated, viewTagsResp;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, getViews(null)];
-                    case 1:
-                        viewsResp = _a.sent();
-                        if (!viewsResp.ok) return [3 /*break*/, 3];
-                        setViews(viewsResp.data.tables[0].rows);
-                        lastCreated = viewsResp.data.tables[0].rows.reduce(function (prev, current) { return (prev.ViewId > current.ViewId) ? prev : current; });
-                        //viewSelected
-                        setViewSelected(lastCreated);
-                        return [4 /*yield*/, getViewTags(lastCreated.ViewId)];
-                    case 2:
-                        viewTagsResp = _a.sent();
-                        if (viewTagsResp.ok) {
-                            setViewTags(viewTagsResp.data.tables[0].rows);
-                        }
-                        else {
-                            setError(viewTagsResp.message);
-                        }
-                        return [3 /*break*/, 4];
-                    case 3:
-                        setError(viewsResp.message);
-                        _a.label = 4;
-                    case 4: return [2 /*return*/];
-                }
-            });
-        }); };
-        getTags();
+        getTagsFromAPI();
     }, []);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Box, { p: 3, style: { maxWidth: "100%" } },
             React__default.createElement(Paper, null,
                 React__default.createElement(Grid$1, { container: true, spacing: 3, style: { padding: "20px" } },
                     React__default.createElement(Grid$1, { item: true, xs: 12 },
-                        React__default.createElement(Trending, { title: "Trending Chart" }))))),
+                        React__default.createElement(Trending, { title: "Trending Chart", getTagsFromAPI: getTagsFromAPI }))))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); }, size: "xl", title: "ERROR" })));
 };