@dexteel/mesf-core 4.20.5 → 4.20.6

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 export { LicenseManager } from 'ag-grid-enterprise';
-import { DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Grid, Button, withStyles as withStyles$1, alpha, makeStyles, Dialog as Dialog$1, SvgIcon, Collapse, Typography as Typography$1, Checkbox, TextField, InputAdornment, IconButton as IconButton$1, MenuItem, Select, Card, CardContent, CardActions, Snackbar, CircularProgress, Paper, InputLabel, FormHelperText, DialogContentText, FormControlLabel, Badge, useTheme, FormControl, Input, Chip, Tooltip, ListItemIcon, MenuList, Divider, Box, debounce, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
+import { withStyles, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, createStyles, Grid, Button, alpha, makeStyles, Dialog as Dialog$1, SvgIcon, Collapse, Typography as Typography$1, Checkbox, TextField, InputAdornment, IconButton as IconButton$1, MenuItem, Select, Card, CardContent, CardActions, Snackbar, CircularProgress, Paper, InputLabel, FormHelperText, DialogContentText, FormControlLabel, Badge, useTheme, FormControl, Input, Chip, Tooltip, ListItemIcon, MenuList, Divider, Box, debounce, List, ListItem, ListItemText } from '@material-ui/core';
 import { get as get$1, isNil as isNil$1, isEmpty, values, round, isNaN, isNumber } from 'lodash-es';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, useMemo, Component, createContext, useContext, useCallback, lazy, Suspense } from 'react';
@@ -9,6 +9,7 @@ import { Outlet, useParams, useNavigate, useSearchParams, Link, Navigate, Routes
 import { Alert as Alert$1, Modal as Modal$1, Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
 import { LogLevel, PublicClientApplication } from '@azure/msal-browser';
 import { useMsal, MsalProvider } from '@azure/msal-react';
+import SettingsIcon from '@material-ui/icons/Settings';
 import ShowChartIcon from '@material-ui/icons/ShowChart';
 import { useComplexState } from 'use-complex-state';
 import { createSlice } from '@reduxjs/toolkit';
@@ -21,6 +22,9 @@ import moment$2 from 'moment';
 import EditIcon from '@material-ui/icons/Edit';
 import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd';
 import { isNil, get } from 'lodash';
+import DeleteIcon from '@material-ui/icons/Delete';
+import FormatListBulletedSharpIcon from '@material-ui/icons/FormatListBulletedSharp';
+import { useForm, Controller } from 'react-hook-form';
 import axios from 'axios';
 import { _adapters, Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip as Tooltip$1, Legend, TimeScale } from 'chart.js';
 import zoomPlugin from 'chartjs-plugin-zoom';
@@ -30,7 +34,6 @@ import { Alert as Alert$3, Autocomplete } from '@material-ui/lab';
 import Button$1 from '@material-ui/core/Button';
 import Popover from '@material-ui/core/Popover';
 import CreateIcon from '@material-ui/icons/Create';
-import DeleteIcon from '@material-ui/icons/Delete';
 import { isAncestor, Tree, DndProvider as DndProvider$1 } from '@minoru/react-dnd-treeview';
 import FolderIcon from '@material-ui/icons/Folder';
 import InsertChartIcon from '@material-ui/icons/InsertChart';
@@ -44,7 +47,6 @@ import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
 import Dialog from '@material-ui/core/Dialog';
 import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
-import { withStyles, createStyles } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
 import { ResponsiveBar } from '@nivo/bar';
 import PropTypes from 'prop-types';
@@ -61,8 +63,6 @@ import RefreshIcon from '@material-ui/icons/Refresh';
 import ReplayIcon from '@material-ui/icons/Replay';
 import ToggleOfIcon from '@material-ui/icons/ToggleOff';
 import ToggleOnIcon from '@material-ui/icons/ToggleOn';
-import FormatListBulletedSharpIcon from '@material-ui/icons/FormatListBulletedSharp';
-import { useForm, Controller } from 'react-hook-form';
 import 'ag-grid-enterprise/styles/ag-grid.css';
 import 'ag-grid-enterprise/styles/ag-theme-balham.min.css';
 import 'ag-grid-community/styles/ag-grid.css';
@@ -330,7 +330,7 @@ BarChartControl.propTypes = {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css$2 = ".lds-ring {\n  display: inline-block;\n  position: relative;\n  width: 80px;\n  height: 80px;\n}\n.lds-ring div {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 64px;\n  height: 64px;\n  margin: 8px;\n  border: 5px solid rgb(63,81,181);\n  border-radius: 50%;\n  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: rgb(63,81,181) transparent transparent transparent;\n}\n.lds-ring div:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.lds-ring div:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.lds-ring div:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes lds-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
+var css$2 = ".lds-ring {\n\tdisplay: inline-block;\n\tposition: relative;\n\twidth: 80px;\n\theight: 80px;\n}\n.lds-ring div {\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tposition: absolute;\n\twidth: 64px;\n\theight: 64px;\n\tmargin: 8px;\n\tborder: 5px solid rgb(63, 81, 181);\n\tborder-radius: 50%;\n\tanimation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\tborder-color: rgb(63, 81, 181) transparent transparent transparent;\n}\n.lds-ring div:nth-child(1) {\n\tanimation-delay: -0.45s;\n}\n.lds-ring div:nth-child(2) {\n\tanimation-delay: -0.3s;\n}\n.lds-ring div:nth-child(3) {\n\tanimation-delay: -0.15s;\n}\n@keyframes lds-ring {\n\t0% {\n\t\ttransform: rotate(0deg);\n\t}\n\t100% {\n\t\ttransform: rotate(360deg);\n\t}\n}\n";
 n(css$2,{});
 
 var LazyLoading = function () {
@@ -364,7 +364,7 @@ function TransitionComponent(props) {
 TransitionComponent.propTypes = {
     "in": PropTypes.bool
 };
-var StyledTreeItem = withStyles$1(function (theme) { return ({
+var StyledTreeItem = withStyles(function (theme) { return ({
     iconContainer: {
         "& .close": {
             opacity: 0.3
@@ -573,7 +573,7 @@ var ModalTreeFilterControl = function (props) {
             React__default.createElement(Button, { onClick: handleOk, color: "primary" }, "OK"))));
 };
 
-var useStyles$v = makeStyles(function (theme) { return ({
+var useStyles$y = makeStyles(function (theme) { return ({
     root: {
         width: "100%",
         backgroundColor: theme.palette.background.paper,
@@ -589,7 +589,7 @@ var useStyles$v = makeStyles(function (theme) { return ({
     }
 }); });
 var TreePickerControl = function (props) {
-    var classes = useStyles$v();
+    var classes = useStyles$y();
     var onSelect = props.onSelect, value = props.value; props.styleLabel; var dataSource = props.dataSource, _a = props.inputTitle, inputTitle = _a === void 0 ? "Asset" : _a; props.showPath; var _c = props.multipleSelectNodes, multipleSelectNodes = _c === void 0 ? false : _c, _d = props.showClearButton, showClearButton = _d === void 0 ? false : _d, showAssetTree = props.showAssetTree, onHide = props.onHide, _e = props.listAssetDrawings, listAssetDrawings = _e === void 0 ? [] : _e, onSuccess = props.onSuccess, isLoading = props.isLoading, other = __rest(props, ["onSelect", "value", "styleLabel", "dataSource", "inputTitle", "showPath", "multipleSelectNodes", "showClearButton", "showAssetTree", "onHide", "listAssetDrawings", "onSuccess", "isLoading"]);
     var _f = useState(showAssetTree || false), open = _f[0], setOpen = _f[1];
     var handleClickListItem = function (e) {
@@ -673,7 +673,7 @@ var TreePickerControl = function (props) {
                 }, onHide: onHide, id: "modal-treeview-filter", title: props.title, keepMounted: true, open: open, onClose: handleClose, isLoading: isLoading, value: value, data: dataSource, onBackdropClick: function () { return setOpen(false); }, multipleSelectNodes: multipleSelectNodes, listAssetDrawings: listAssetDrawings, setListAssetDrawings: listAssetDrawings, onSuccess: onSuccess }, other)))));
 };
 
-var useStyles$u = makeStyles(function (theme) { return ({
+var useStyles$x = makeStyles(function (theme) { return ({
     root: {
         width: "100%",
         backgroundColor: theme.palette.background.paper
@@ -699,7 +699,7 @@ function findNameById(node, id) {
     return null;
 }
 var TreePickerControlV2 = function (props) {
-    var classes = useStyles$u();
+    var classes = useStyles$x();
     var value = props.value, onSelect = props.onSelect; props.styleLabel; var dataSource = props.dataSource; props.getOptionName; var _a = props.inputTitle, inputTitle = _a === void 0 ? "Asset" : _a; props.showPath; var _c = props.multipleSelectNodes, multipleSelectNodes = _c === void 0 ? false : _c, _d = props.showClearButton, showClearButton = _d === void 0 ? false : _d, showAssetTree = props.showAssetTree, onHide = props.onHide, _e = props.listAssetDrawings, listAssetDrawings = _e === void 0 ? [] : _e, onSuccess = props.onSuccess, isLoading = props.isLoading, _f = props.disabled, disabled = _f === void 0 ? false : _f, other = __rest(props, ["value", "onSelect", "styleLabel", "dataSource", "getOptionName", "inputTitle", "showPath", "multipleSelectNodes", "showClearButton", "showAssetTree", "onHide", "listAssetDrawings", "onSuccess", "isLoading", "disabled"]);
     var _g = useState(false), open = _g[0], setOpen = _g[1];
     var handleClickListItem = function (event) {
@@ -1352,7 +1352,7 @@ var useJobsOptionsFunctions = function (_a) {
     };
 };
 
-var useStyles$t = makeStyles(function (theme) { return ({
+var useStyles$w = makeStyles(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -1370,7 +1370,7 @@ var useStyles$t = makeStyles(function (theme) { return ({
 var useJobsTableData = function (_a) {
     var setRowSelected = _a.setRowSelected, showContextMenu = _a.showContextMenu;
     var _b = useJobsContext().state, jobsData = _b.jobsData, blockButtons = _b.blockButtons;
-    var classes = useStyles$t();
+    var classes = useStyles$w();
     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 ({
@@ -1655,7 +1655,7 @@ var useJobsTableData = function (_a) {
     return { rows: rows, columnDefs: columnDefs };
 };
 
-var useStyles$s = makeStyles(function (theme) { return ({
+var useStyles$v = makeStyles(function (theme) { return ({
     root: {
         "& .MuiDataGrid-row": {
             cursor: "pointer"
@@ -1718,7 +1718,7 @@ var useStyles$s = makeStyles(function (theme) { return ({
 }); });
 var TableJobs = function (_a) {
     var getJobsFromAPI = _a.getJobsFromAPI, isLoading = _a.isLoading;
-    var classes = useStyles$s();
+    var classes = useStyles$v();
     var _b = useState(null), rowSelected = _b[0], setRowSelected = _b[1];
     var _c = useState(false), snackbarLoading = _c[0], setSnackbarLoading = _c[1];
     var _d = useState(false), snackbarSuccessfulMessage = _d[0], setSnackbarSuccessfulMessage = _d[1];
@@ -1982,7 +1982,7 @@ var SearchFilter = function (_a) {
         React__default.createElement(FormHelperText, { style: { marginBottom: 10, marginTop: -15 } }, "Search by Source, Message or User")));
 };
 
-var useStyles$r = makeStyles(function (theme) { return ({
+var useStyles$u = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15
     },
@@ -1999,7 +1999,7 @@ var formatTime = function (nowTime) {
 };
 var ModalLogSelected = function (_a) {
     var show = _a.show, onHide = _a.onHide, selectedLog = _a.selectedLog;
-    var classes = useStyles$r();
+    var classes = useStyles$u();
     return (React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
         React__default.createElement(MesfModal, { title: "LOG DETAILS", open: show, handleClose: function () { return onHide(false); }, maxWidth: "md", id: "log-details-modal" },
             React__default.createElement(MesfModal.Content, { style: { padding: "15px 30px" } },
@@ -2055,7 +2055,7 @@ var ModalLogSelected = function (_a) {
                         React__default.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(true); } }, "Close")))))));
 };
 
-var useStyles$q = makeStyles(function (theme) { return ({
+var useStyles$t = makeStyles(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -2073,7 +2073,7 @@ var useStyles$q = makeStyles(function (theme) { return ({
 var useLogTableData = function () {
     var _a;
     var state = useLogsContext().state;
-    var classes = useStyles$q();
+    var classes = useStyles$t();
     var formatTime = function (nowTime) {
         return (nowTime.toLocaleDateString("en-US") + " " + nowTime.toLocaleTimeString());
     };
@@ -2194,7 +2194,7 @@ var ButtonWithLoading = function (_a) {
         children));
 };
 
-var useStyles$p = makeStyles(function (theme) { return ({
+var useStyles$s = makeStyles(function (theme) { return ({
     root: {
         "& .MuiDataGrid-row": {
             cursor: "pointer"
@@ -2288,7 +2288,7 @@ var useLogsOptionsFunctions = function (_a) {
 var TableLogs = function (_a) {
     var isLoading = _a.isLoading; _a.rowData; var refreshData = _a.refreshData;
     var _b = useLogsContext(), _c = _b.state.searchData, Start = _c.Start, End = _c.End, Search = _c.Search, LogTypeCode = _c.LogTypeCode, _d = _b.actions, setLogTypeCodeFilter = _d.setLogTypeCodeFilter, setEndFilter = _d.setEndFilter, setStartFilter = _d.setStartFilter, setSearchFilter = _d.setSearchFilter;
-    var classes = useStyles$p();
+    var classes = useStyles$s();
     var gridStyle = useMemo(function () { return ({ height: "100%", width: "100%" }); }, []);
     var _e = useState(null); _e[0]; var setGridAPI = _e[1];
     var _f = useState(false), showLogModal = _f[0], setShowLogModal = _f[1];
@@ -2477,7 +2477,7 @@ var LogsPage = function (props) {
         React.createElement(Logs, null)));
 };
 
-var INITIAL_VALUES$2 = {
+var INITIAL_VALUES$3 = {
     ProfileId: null,
     ProfileName: ""
 };
@@ -2578,7 +2578,7 @@ var deleteProfile = function (profileId) { return __awaiter(void 0, void 0, void
     });
 }); };
 
-var useStyles$o = makeStyles(function (theme) { return ({
+var useStyles$r = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15
     },
@@ -2601,8 +2601,8 @@ 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$o();
-    var _g = useForm({ defaultValues: INITIAL_VALUES$2 }), register = _g.register, handleSubmit = _g.handleSubmit, reset = _g.reset, errors = _g.formState.errors;
+    var classes = useStyles$r();
+    var _g = useForm({ defaultValues: INITIAL_VALUES$3 }), 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;
         return __generator(this, function (_a) {
@@ -2836,7 +2836,7 @@ var DataTable = function (_a) {
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
-var useStyles$n = makeStyles(function (theme) { return ({
+var useStyles$q = makeStyles(function (theme) { return ({
     root: {
         "& .MuiFormLabel-asterisk": {
             display: "none"
@@ -2845,7 +2845,7 @@ var useStyles$n = makeStyles(function (theme) { return ({
 }); });
 var ActionsOfProfile = function (_a) {
     var profileForEdit = _a.profileForEdit, show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$n();
+    var classes = useStyles$q();
     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];
@@ -2855,7 +2855,7 @@ var ActionsOfProfile = function (_a) {
     var _h = useState(""), profileName = _h[0], setProfileName = _h[1];
     var _j = useState(""), nameError = _j[0], setNameError = _j[1];
     var _k = useState(false); _k[0]; var setShowEditInput = _k[1];
-    var handleSubmit = useForm({ defaultValues: INITIAL_VALUES$2 }).handleSubmit;
+    var handleSubmit = useForm({ defaultValues: INITIAL_VALUES$3 }).handleSubmit;
     var handleClose = function (event, reason) {
         if (reason === "clickaway") {
             return;
@@ -3033,7 +3033,7 @@ var ProfilesProvider = function (_a) {
     return (React__default.createElement(ProfilesContext.Provider, { value: { state: state, actions: actions } }, children));
 };
 
-var useStyles$m = makeStyles(function (theme) { return ({
+var useStyles$p = makeStyles(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -3048,10 +3048,10 @@ var useStyles$m = makeStyles(function (theme) { return ({
         }
     }
 }); });
-var useTableData$2 = function (_a) {
+var useTableData$3 = function (_a) {
     var setProfileId = _a.setProfileId, setModalProceduresProfile = _a.setModalProceduresProfile, setModalDeleteProfile = _a.setModalDeleteProfile, showContextMenu = _a.showContextMenu;
     var state = useProfilesContext().state;
-    var classes = useStyles$m();
+    var classes = useStyles$p();
     var rows = state.profiles.map(function (_a) {
         var ProfileId = _a.ProfileId, ProfileName = _a.ProfileName;
         return ({
@@ -3123,7 +3123,7 @@ var useTableData$2 = function (_a) {
     return { rows: rows, columnDefs: columnDefs };
 };
 
-var useStyles$l = makeStyles(function (theme) { return ({
+var useStyles$o = makeStyles(function (theme) { return ({
     root: {
         "& .ag-icon-menu": {
             display: "none"
@@ -3195,7 +3195,7 @@ var TableProfiles = function (_a) {
     var _e = useState(null), profile = _e[0], setProfile = _e[1];
     var gridStyle = useMemo(function () { return ({ height: "100%", width: "100%" }); }, []);
     var _f = useState(null), gridApi = _f[0], setGridApi = _f[1];
-    var classes = useStyles$l();
+    var classes = useStyles$o();
     var loadingOverlayComponent = useMemo(function () {
         return LazyLoading;
     }, []);
@@ -3214,7 +3214,7 @@ var TableProfiles = function (_a) {
         setModalProceduresProfile: setModalProceduresProfile
     }).getMenuOptions;
     var _g = useContextMenuMESF(), showContextMenu = _g.showContextMenu, registerConfig = _g.registerConfig;
-    var _h = useTableData$2({
+    var _h = useTableData$3({
         setModalDeleteProfile: setModalDeleteProfile,
         setModalProceduresProfile: setModalProceduresProfile,
         setProfileId: setProfile,
@@ -3335,7 +3335,7 @@ var ProfilesPage = function (props) {
         React.createElement(Profiles, null)));
 };
 
-var INITIAL_VALUES$1 = {
+var INITIAL_VALUES$2 = {
     PatternStart: new Date(),
     ShiftCodes: "",
     Crews: "",
@@ -3350,7 +3350,7 @@ var INITIAL_VALUES$1 = {
 
 var ShiftsCrewsInitialState = {
     shifts: [],
-    shiftTableData: INITIAL_VALUES$1
+    shiftTableData: INITIAL_VALUES$2
 };
 var ShiftsCrewsReducer = createSlice({
     name: "__",
@@ -3434,7 +3434,7 @@ var DeleteShiftParameters = function (PatternStart) { return __awaiter(void 0, v
     });
 }); };
 
-var useStyles$k = makeStyles(function (theme) { return ({
+var useStyles$n = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15
     },
@@ -3460,10 +3460,10 @@ 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$k();
+    var classes = useStyles$n();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _g = useForm({
-        defaultValues: shiftTableData ? shiftTableData : INITIAL_VALUES$1
+        defaultValues: shiftTableData ? shiftTableData : INITIAL_VALUES$2
     }), control = _g.control, handleSubmit = _g.handleSubmit, reset = _g.reset, watch = _g.watch, setValue = _g.setValue, errors = _g.formState.errors;
     // Progress bar
     var calculatePercentage = function () {
@@ -3662,7 +3662,7 @@ var CreateShift = function (_a) {
             React.createElement(Alert, { severity: "success", onClose: handleClose }, "The shift was created successfully"))));
 };
 
-var useStyles$j = makeStyles(function (theme) { return ({
+var useStyles$m = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15
     },
@@ -3688,10 +3688,10 @@ 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$j();
+    var classes = useStyles$m();
     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;
+    var _g = useForm({ defaultValues: INITIAL_VALUES$2 }), control = _g.control, setValue = _g.setValue, reset = _g.reset, watch = _g.watch, errors = _g.formState.errors;
     var onDelete = function (data) { return __awaiter(void 0, void 0, void 0, function () {
         var shiftParameters;
         return __generator(this, function (_a) {
@@ -3827,7 +3827,7 @@ var DeleteShift = function (_a) {
             React.createElement(Alert, { severity: "warning", onClose: handleClose }, "The shift was deleted successfully"))));
 };
 
-var useStyles$i = makeStyles(function (theme) { return ({
+var useStyles$l = makeStyles(function (theme) { return ({
     title: {
         fontSize: 15
     },
@@ -3854,9 +3854,9 @@ 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$i();
+    var classes = useStyles$l();
     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;
+    var _g = useForm({ defaultValues: INITIAL_VALUES$2 }), control = _g.control, setValue = _g.setValue, handleSubmit = _g.handleSubmit, reset = _g.reset, watch = _g.watch, errors = _g.formState.errors;
     // Progress bar
     var calculatePercentage = function () {
         return ((crewRotation === null || crewRotation === void 0 ? void 0 : crewRotation.length) / maxCrewRotationLength) * 100;
@@ -4122,7 +4122,7 @@ var useShiftsOptionsFunctions = function (_a) {
     };
 };
 
-var useStyles$h = makeStyles(function (theme) { return ({
+var useStyles$k = makeStyles(function (theme) { return ({
     root: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -4137,11 +4137,11 @@ var useStyles$h = makeStyles(function (theme) { return ({
         }
     }
 }); });
-var useTableData$1 = function (_a) {
+var useTableData$2 = function (_a) {
     var _b;
     var setOpenModalEditShift = _a.setOpenModalEditShift, setOpenModalDeleteShift = _a.setOpenModalDeleteShift, showContextMenu = _a.showContextMenu;
     var _c = useShiftsCrewsContext(), state = _c.state, actions = _c.actions;
-    var classes = useStyles$h();
+    var classes = useStyles$k();
     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 ({
@@ -4252,7 +4252,7 @@ var useTableData$1 = function (_a) {
     return { rows: rows, columnDefs: columnDefs };
 };
 
-var useStyles$g = makeStyles(function (theme) { return ({
+var useStyles$j = makeStyles(function (theme) { return ({
     root: {
         "& .ag-icon-menu": {
             display: "none"
@@ -4302,7 +4302,7 @@ var useStyles$g = makeStyles(function (theme) { return ({
 }); });
 var TableShiftsCrews = function (_a) {
     _a.isLoading; var getShiftsCrewsFromAPI = _a.getShiftsCrewsFromAPI;
-    var classes = useStyles$g();
+    var classes = useStyles$j();
     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];
@@ -4325,7 +4325,7 @@ var TableShiftsCrews = function (_a) {
         setShowEditModal: setOpenModalEditShift
     }).getMenuOptions;
     var _f = useContextMenuMESF(), showContextMenu = _f.showContextMenu, registerConfig = _f.registerConfig;
-    var _g = useTableData$1({
+    var _g = useTableData$2({
         setOpenModalEditShift: setOpenModalEditShift,
         setOpenModalDeleteShift: setOpenModalDeleteShift,
         showContextMenu: showContextMenu
@@ -4806,7 +4806,7 @@ var useAssetCodes = function () {
     return { loadFilterAssets: loadFilterAssets };
 };
 
-var useStyles$f = makeStyles(function (theme) { return ({
+var useStyles$i = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -4849,7 +4849,7 @@ var useStyles$f = makeStyles(function (theme) { return ({
 }); });
 var CreateNewAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$f();
+    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];
@@ -4968,7 +4968,7 @@ var CreateNewAssetDialog = function (_a) {
             React__default.createElement(Alert$2, { severity: "info", onClose: handleClose }, "Document created succesfully"))));
 };
 
-var useStyles$e = makeStyles(function (theme) { return ({
+var useStyles$h = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -5016,7 +5016,7 @@ var useStyles$e = makeStyles(function (theme) { return ({
 }); });
 var EditAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$e();
+    var classes = useStyles$h();
     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];
@@ -5136,7 +5136,7 @@ var EditAssetDialog = function (_a) {
                                 React__default.createElement(Alert$3, { severity: "info", onClose: handleClose }, "Document created succesfully")))))))));
 };
 
-var useStyles$d = makeStyles(function (theme) { return ({
+var useStyles$g = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -5180,7 +5180,7 @@ var useStyles$d = makeStyles(function (theme) { return ({
 }); });
 var RemoveAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$d();
+    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];
@@ -5239,7 +5239,7 @@ var RemoveAssetDialog = function (_a) {
             React__default.createElement(Alert$2, { severity: "info", onClose: handleClose }, "Asset removed succesfully"))));
 };
 
-var useStyles$c = makeStyles(function (theme) { return ({
+var useStyles$f = makeStyles(function (theme) { return ({
     root: {
         "& .input-group-text": {
             display: "none"
@@ -5290,7 +5290,7 @@ var useStyles$c = makeStyles(function (theme) { return ({
 }); });
 var ViewerAssetDialog = function (_a) {
     var show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$c();
+    var classes = useStyles$f();
     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;
@@ -5463,7 +5463,7 @@ var TypeIcon = function (props) {
     }
 };
 
-var useStyles$b = makeStyles(function (theme) { return ({
+var useStyles$e = makeStyles(function (theme) { return ({
     root: {
         alignItems: "center",
         backgroundColor: "#1967d2",
@@ -5488,7 +5488,7 @@ var useStyles$b = makeStyles(function (theme) { return ({
 }); });
 var CustomDragPreview$1 = function (props) {
     var _a;
-    var classes = useStyles$b();
+    var classes = useStyles$e();
     var item = props.monitorProps.item;
     return (React__default.createElement("div", { className: classes.root },
         React__default.createElement("div", { className: classes.icon },
@@ -5496,7 +5496,7 @@ var CustomDragPreview$1 = function (props) {
         React__default.createElement("div", { className: classes.label }, item.text)));
 };
 
-var useStyles$a = makeStyles(function (theme) { return ({
+var useStyles$d = makeStyles(function (theme) { return ({
     root: {
         alignItems: "center",
         display: "flex",
@@ -5543,7 +5543,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$a();
+    var classes = useStyles$d();
     var nodeClasses = "".concat(classes.customNodeRoot, " ").concat(classes.root, " ").concat(isSelected ? classes.selected : "");
     var handleClick = function (e) {
         props.onClick(e, props.node);
@@ -5598,7 +5598,7 @@ var CustomNode = function (_a) {
             React__default.createElement(Typography$1, { variant: "body2" }, props.node.text))));
 };
 
-var useStyles$9 = makeStyles(function (theme) { return ({
+var useStyles$c = makeStyles(function (theme) { return ({
     root: {
         alignItems: "flex-start",
         backgroundColor: "#1967d2",
@@ -5630,7 +5630,7 @@ var useStyles$9 = makeStyles(function (theme) { return ({
     }
 }); });
 var MultipleDragPreview = function (props) {
-    var classes = useStyles$9();
+    var classes = useStyles$c();
     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;
@@ -5641,7 +5641,7 @@ var MultipleDragPreview = function (props) {
         }))));
 };
 
-var useStyles$8 = makeStyles(function (theme) { return ({
+var useStyles$b = makeStyles(function (theme) { return ({
     root: {},
     contextMenu: {
         backgroundColor: "#F8F8F8",
@@ -5687,7 +5687,7 @@ var useStyles$8 = makeStyles(function (theme) { return ({
 }); });
 var AssetViewComponent = function () {
     var _a = useState([]), selectedNodes = _a[0], setSelectedNodes = _a[1];
-    var classes = useStyles$8();
+    var classes = useStyles$b();
     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];
@@ -6088,7 +6088,7 @@ var ChangePassword$1 = function (_a) {
     }
 };
 
-var INITIAL_VALUES = {
+var INITIAL_VALUES$1 = {
     UserId: null,
     UserName: "",
     FirstName: "",
@@ -6100,7 +6100,7 @@ var INITIAL_VALUES = {
     Profiles: []
 };
 
-var useStyles$7 = makeStyles(function (theme) { return ({
+var useStyles$a = makeStyles(function (theme) { return ({
     root: {
         "& .MuiSelect-select": {
             minHeight: "40px"
@@ -6133,7 +6133,7 @@ var MenuProps$1 = {
 };
 var AuthTypeSelector = function (_a) {
     var value = _a.value, onChange = _a.onChange, disabled = _a.disabled;
-    var classes = useStyles$7();
+    var classes = useStyles$a();
     var _b = useState([]), authTypes = _b[0], setAuthTypes = _b[1];
     var _c = useState(true), isLoading = _c[0], setIsLoading = _c[1];
     var theme = useTheme();
@@ -6169,7 +6169,7 @@ var AuthTypeSelector = function (_a) {
                 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$6 = makeStyles(function (theme) { return ({
+var useStyles$9 = makeStyles(function (theme) { return ({
     root: {
         "& .MuiSelect-select": {
             height: "auto",
@@ -6210,7 +6210,7 @@ var MenuProps = {
 };
 var ProfilesPicker = function (_a) {
     var value = _a.value, onChange = _a.onChange; _a.userIdForDelete; var setprofileError = _a.setprofileError, disabled = _a.disabled;
-    var classes = useStyles$6();
+    var classes = useStyles$9();
     var theme = useTheme();
     var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
     var _c = useState([]), profiles = _c[0], setProfiles = _c[1];
@@ -6250,7 +6250,7 @@ var ProfilesPicker = function (_a) {
         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 }, 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 useStyles$5 = makeStyles(function (theme) { return ({
+var useStyles$8 = makeStyles(function (theme) { return ({
     checkbox: {
         userSelect: "none"
     },
@@ -6272,8 +6272,8 @@ 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$5();
-    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 classes = useStyles$8();
+    var _j = useForm({ defaultValues: INITIAL_VALUES$1 }), 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") {
             return;
@@ -6371,7 +6371,7 @@ var DeleteUser = function (_a) {
     var _f = useState(""), error = _f[0], setError = _f[1];
     var _g = useState(""), profileError = _g[0], setprofileError = _g[1];
     var _h = useForm({
-        defaultValues: INITIAL_VALUES
+        defaultValues: INITIAL_VALUES$1
     }), register = _h.register, control = _h.control, setValue = _h.setValue;
     var handleClose = function (event, reason) {
         if (reason === "clickaway") {
@@ -6487,7 +6487,7 @@ var DeleteUser = function (_a) {
         React__default.createElement(ErrorModal, { error: profileError, onHide: function () { return setprofileError(""); }, title: "Error Choosing Profile" })));
 };
 
-var useStyles$4 = makeStyles(function (theme) { return ({
+var useStyles$7 = makeStyles(function (theme) { return ({
     checkbox: {
         userSelect: "none"
     },
@@ -6506,13 +6506,13 @@ var useStyles$4 = makeStyles(function (theme) { return ({
 var EditUser = function (_a) {
     var _b, _c, _d;
     var userId = _a.userId, show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$4();
+    var classes = useStyles$7();
     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];
     var _h = useState(""), error = _h[0], setError = _h[1];
     var _j = useState(""), profileError = _j[0], setprofileError = _j[1];
-    var _k = useForm({ defaultValues: INITIAL_VALUES }), register = _k.register, control = _k.control, setValue = _k.setValue, handleSubmit = _k.handleSubmit, errors = _k.formState.errors;
+    var _k = useForm({ defaultValues: INITIAL_VALUES$1 }), register = _k.register, control = _k.control, setValue = _k.setValue, handleSubmit = _k.handleSubmit, errors = _k.formState.errors;
     var handleClose = function (event, reason) {
         if (reason === "clickaway") {
             return;
@@ -6657,7 +6657,7 @@ var UsersProvider = function (_a) {
     return (React__default.createElement(UsersContext.Provider, { value: { state: state, actions: actions } }, children));
 };
 
-var useStyles$3 = makeStyles(function (theme) { return ({
+var useStyles$6 = makeStyles(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -6673,7 +6673,7 @@ var useStyles$3 = makeStyles(function (theme) { return ({
     }
 }); });
 var buttonsCellRenderer = function (params) {
-    var classes = useStyles$3();
+    var classes = useStyles$6();
     var setUserId = params.setUserId, setOpenModalEditDataUser = params.setOpenModalEditDataUser, setOpenModalDeleteUser = params.setOpenModalDeleteUser, setOpenModalChangePasswordd = params.setOpenModalChangePasswordd, showContextMenu = params.showContextMenu;
     return (React__default.createElement(Grid, { container: true, style: {
             height: "100%",
@@ -6722,7 +6722,7 @@ var buttonsCellRenderer = function (params) {
                 React__default.createElement(FormatListBulletedSharpIcon, { style: { height: "auto" }, color: "action" })))));
 };
 
-var useTableData = function (_a) {
+var useTableData$1 = function (_a) {
     var setUserId = _a.setUserId, setOpenModalEditDataUser = _a.setOpenModalEditDataUser, setOpenModalDeleteUser = _a.setOpenModalDeleteUser, setOpenModalChangePasswordd = _a.setOpenModalChangePasswordd, showContextMenu = _a.showContextMenu;
     var state = useUsersContext().state;
     var columnDefs = [
@@ -6872,7 +6872,7 @@ var useUsersOptionsFunctions = function (_a) {
     };
 };
 
-var useStyles$2 = makeStyles(function (theme) { return ({
+var useStyles$5 = makeStyles(function (theme) { return ({
     root: {
         "& .ag-icon-menu": {
             display: "none"
@@ -6943,7 +6943,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$2();
+    var classes = useStyles$5();
     var _f = useState(null), userId = _f[0], setUserId = _f[1];
     var _g = useState(null), gridApi = _g[0], setGridApi = _g[1];
     var loadingOverlayComponent = useMemo(function () {
@@ -6957,7 +6957,7 @@ var TableUsers = function (_a) {
         setShowChangePasswordModal: setOpenModalChangePasswordd
     }).getMenuOptions;
     var _h = useContextMenuMESF(), showContextMenu = _h.showContextMenu, registerConfig = _h.registerConfig;
-    var _j = useTableData({
+    var _j = useTableData$1({
         setUserId: setUserId,
         setOpenModalEditDataUser: setOpenModalEditDataUser,
         setOpenModalDeleteUser: setOpenModalDeleteUser,
@@ -8138,7 +8138,7 @@ var ShiftDayNavigatorControl = function (props) {
                         React__default.createElement(SkipNext, null)))))));
 };
 
-var useStyles$1 = makeStyles(function (theme) { return ({
+var useStyles$4 = makeStyles(function (theme) { return ({
     contextMenu: {
         backgroundColor: "#fff",
         borderRadius: "2px",
@@ -8230,7 +8230,7 @@ var useContextMenuMESF = function () { return useContext(ContextMenuMESFContext)
 
 var ContextMenu$1 = function () {
     var _a = useContextMenuMESF(), show = _a.show, position = _a.position, options = _a.options;
-    var classes = useStyles$1();
+    var classes = useStyles$4();
     var menuRef = useRef(null);
     var _b = useState("0"), x = _b[0], setX = _b[1];
     var _c = useState("0"), y = _c[0], setY = _c[1];
@@ -9184,7 +9184,7 @@ function Header$1(_a) {
                         React__default.createElement("span", { className: "navbar-text" }, dxtToLocalServerTime(date, "HH:mm:ss z"))),
                     React__default.createElement(Nav, { className: "mx-2" },
                         React__default.createElement(Nav.Link, { as: Link, to: "/configuration" },
-                            React__default.createElement("i", { className: "fas fa-cog" }))),
+                            React__default.createElement(SettingsIcon, null))),
                     showAreaSelector ? (React__default.createElement(Suspense, { fallback: "..." },
                         React__default.createElement(AreaSelector$1, null))) : null,
                     React__default.createElement(NavDropdown, { id: "user-menu", title: React__default.createElement(React__default.Fragment, null,
@@ -9195,81 +9195,825 @@ 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([
-        {
-            path: "/",
-            sidebar: function () { return React__default.createElement("div", null, "Configuration"); },
-            main: function () { return React__default.createElement(Navigate, { to: "users" }); }
+var SettingsInitialState = {
+    settings: [],
+    settingSelected: null
+};
+var SettingsReducer = createSlice({
+    name: "__",
+    initialState: SettingsInitialState,
+    reducers: {
+        setSettings: function (state, _a) {
+            var payload = _a.payload;
+            state.settings = payload;
         },
-        {
-            path: "shifts",
-            sidebar: function () { return React__default.createElement("div", null, "Shifts"); },
-            main: function () { return React__default.createElement(ShiftsCrewsPage, null); }
+        setSettingSelected: function (state, _a) {
+            var payload = _a.payload;
+            state.settingSelected = payload;
+        }
+    }
+});
+
+var SettingsContext = createContext({
+    state: SettingsReducer.getInitialState(),
+    actions: SettingsReducer.actions
+});
+var useSettingsContext = function () { return useContext(SettingsContext); };
+var SettingsProvider = function (_a) {
+    var children = _a.children;
+    var _b = useComplexState({
+        initialState: SettingsReducer.getInitialState(),
+        reducers: SettingsReducer.caseReducers
+    }), state = _b[0], actions = _b[1];
+    return (React__default.createElement(SettingsContext.Provider, { value: { state: state, actions: actions } }, children));
+};
+
+var useStyles$3 = makeStyles(function (theme) { return ({
+    root: {
+        "& .ag-icon-menu": {
+            display: "none"
         },
-        {
-            path: "asset",
-            sidebar: function () { return React__default.createElement("div", null, "Configuration Asset"); },
-            main: function () { return React__default.createElement(AssetPage, null); }
+        "& .ag-header-cell-label": {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "2vh"
         },
-        {
-            path: "users",
-            sidebar: function () { return React__default.createElement("div", null, "Users"); },
-            main: function () { return React__default.createElement(UsersPage, null); }
+        "& .ag-header-cell-text": {
+            textAlign: "center !important"
         },
-        {
-            path: "profiles",
-            sidebar: function () { return React__default.createElement("div", null, "profiles"); },
-            main: function () { return React__default.createElement(ProfilesPage, null); }
+        "& .ag-checkbox-input-wrapper": {
+            margin: "0 10px"
         },
-        {
-            path: "logs",
-            sidebar: function () { return React__default.createElement("div", null, "Logs"); },
-            main: function () { return React__default.createElement(LogsPage, null); }
+        "& .ag-cell": {
+            alignItems: "center",
+            padding: "0 !important",
+            border: "unset !important"
         },
-        {
-            path: "jobs",
-            sidebar: function () { return React__default.createElement("div", null, "Jobs"); },
-            main: function () { return React__default.createElement(JobsPage, null); }
+        "& .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"
         }
-    ], customConfiguration, true);
-    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", style: { flex: "80%" } },
-                React__default.createElement(Routes, null, routes.map(function (route, index) { return (React__default.createElement(Route, { key: "".concat(route.path), path: route.path, element: React__default.createElement(route.main, null) })); }))))));
-}
+    },
+    relative: {
+        position: "relative"
+    },
+    textfield: {
+        margin: theme.spacing(2)
+    },
+    btnModal: {
+        display: "flex",
+        justifyContent: "flex-end"
+    }
+}); });
 
-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 useSettingsOptionsFunctions = function (_a) {
+    var setSettingId = _a.setSettingId, setShowDeleteModal = _a.setShowDeleteModal, setShowCreateModal = _a.setShowCreateModal, setShowEditModal = _a.setShowEditModal;
+    var getMenuOptions = function (data) {
+        var options = [];
+        if (!data) {
+            options = options.concat([
+                {
+                    name: "New Setting",
+                    key: "new_setting",
+                    onClick: function () {
+                        setShowCreateModal(true);
+                    },
+                    icon: React__default.createElement(PlaylistAddIcon, null)
+                },
+            ]);
+        }
+        else {
+            options = options.concat([
+                {
+                    name: "New Setting",
+                    key: "new_setting",
+                    onClick: function () {
+                        setShowCreateModal(true);
+                    },
+                    icon: React__default.createElement(PlaylistAddIcon, null)
+                },
+                {
+                    name: "Edit Setting",
+                    key: "edit_setting",
+                    onClick: function () {
+                        setSettingId(data);
+                        setShowEditModal(true);
+                    },
+                    icon: React__default.createElement(EditIcon, null)
+                },
+                {
+                    name: "Delete Setting",
+                    key: "delete_setting",
+                    onClick: function () {
+                        setSettingId(data);
+                        setShowDeleteModal(true);
+                    },
+                    icon: React__default.createElement(DeleteIcon, null)
+                },
+            ]);
+        }
+        return options;
+    };
+    return {
+        getMenuOptions: getMenuOptions
+    };
+};
+
+var useStyles$2 = makeStyles(function (theme) { return ({
+    root: {
+        opacity: 0,
+        transition: "opacity 0.1s ease-in-out",
+        ".ag-row-hover &": {
+            opacity: 1
+        },
+        ".ag-row-focus &": {
+            opacity: 1
+        },
+        ".ag-row-selected &": {
+            opacity: 1
+        }
+    }
+}); });
+var useTableData = function (_a) {
+    var setOpenModalEditSetting = _a.setOpenModalEditSetting, setOpenModalDeleteSetting = _a.setOpenModalDeleteSetting, showContextMenu = _a.showContextMenu;
+    var _b = useSettingsContext(); _b.state; var actions = _b.actions;
+    var classes = useStyles$2();
+    var columnDefs = [
+        {
+            field: "SettingName",
+            headerName: "Name",
+            minWidth: 180,
+            flex: 4,
+            cellStyle: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+            }
+        },
+        {
+            field: "Value",
+            headerName: "Value",
+            minWidth: 180,
+            flex: 2,
+            cellStyle: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+            }
+        },
+        {
+            field: "Description",
+            headerName: "Description",
+            minWidth: 150,
+            flex: 4,
+            cellStyle: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+            }
+        },
+        {
+            cellRenderer: function (params) {
+                return (React__default.createElement(Grid, { container: true, style: {
+                        height: "100%",
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center"
+                    }, className: classes.root },
+                    React__default.createElement(Grid, { item: true, xs: 12, md: 12, style: {
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center"
+                        } },
+                        React__default.createElement(Button, { style: {}, onClick: function () {
+                                (function () { return __awaiter(void 0, void 0, void 0, function () {
+                                    return __generator(this, function (_a) {
+                                        actions.setSettingSelected(params === null || params === void 0 ? void 0 : params.data);
+                                        setOpenModalEditSetting(true);
+                                        return [2 /*return*/];
+                                    });
+                                }); })();
+                            } },
+                            React__default.createElement(EditIcon, { color: "primary" })),
+                        React__default.createElement(Button, { style: {}, onClick: function () {
+                                (function () { return __awaiter(void 0, void 0, void 0, function () {
+                                    return __generator(this, function (_a) {
+                                        actions.setSettingSelected(params === null || params === void 0 ? void 0 : params.data);
+                                        setOpenModalDeleteSetting(true);
+                                        return [2 /*return*/];
+                                    });
+                                }); })();
+                            } },
+                            React__default.createElement(DeleteIcon, { color: "secondary" })),
+                        React__default.createElement(Button, { style: {}, onClick: function (e) {
+                                return showContextMenu(e, params.data, "TableSettings");
+                            } },
+                            React__default.createElement(FormatListBulletedSharpIcon, { color: "action" })))));
+            },
+            field: "",
+            flex: 1,
+            minWidth: 240,
+            editable: false,
+            autoHeight: false,
+            suppressNavigable: true
+        },
+    ];
+    var defaultColDef = useMemo(function () {
+        return {
+            sortable: true,
+            wrapText: true,
+            autoHeight: true,
+            wrapHeaderText: true
+        };
+    }, []);
+    return { columnDefs: columnDefs, defaultColDef: defaultColDef };
+};
+
+var INITIAL_VALUES = {
+    SettingId: null,
+    SettingName: "",
+    Value: "",
+    Description: ""
+};
+
+var upsertSettings = function (_a) {
+    var SettingId = _a.SettingId, Description = _a.Description, SettingName = _a.SettingName, Value = _a.Value;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var apiService, parameters, resp;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    apiService = new MESApiService();
+                    parameters = [];
+                    parameters.push({ name: "SettingId", value: SettingId });
+                    parameters.push({ name: "SettingName", value: SettingName });
+                    parameters.push({ name: "Description", value: Description });
+                    parameters.push({ name: "Value", value: Value });
+                    return [4 /*yield*/, apiService.callV2("[UTL].[SetSetting]", parameters)];
+                case 1:
+                    resp = _b.sent();
+                    return [2 /*return*/, resp];
+            }
+        });
+    });
+};
+var deleteSetting = function (SettingId) { 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: "SettingId", value: SettingId });
+                return [4 /*yield*/, apiService.callV2("[UTL].[DeleteSetting]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+
+var useStyles$1 = makeStyles(function (theme) { return ({
+    title: {
+        fontSize: 15
+    },
+    modalTitle: {
+        fontSize: 15,
+        marginTop: theme.spacing(1)
+    },
+    chip: {
+        margin: 2
+    },
+    errorLabel: {
+        fontSize: 12,
+        color: "#F44336"
+    },
+    infoLabel: {
+        fontSize: 12,
+        color: "#757575"
+    }
+}); });
+var CreateSetting = function (_a) {
+    var show = _a.show, onHide = _a.onHide;
+    var _b = useState(false), open = _b[0], setOpen = _b[1];
+    var _c = useState(false), isSubmitLoading = _c[0], setIsSubmitLoading = _c[1];
+    var _d = useState(""), error = _d[0], setError = _d[1];
+    useStyles$1();
+    var settingSelected = useSettingsContext().state.settingSelected;
+    var _e = useForm({
+        defaultValues: settingSelected ? settingSelected : INITIAL_VALUES
+    }), control = _e.control, handleSubmit = _e.handleSubmit, reset = _e.reset; _e.watch; _e.setValue; _e.formState.errors;
+    // Progress bar
+    var onSubmit = function (data) { return __awaiter(void 0, void 0, void 0, function () {
+        var settingsResp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsSubmitLoading(true);
+                    return [4 /*yield*/, upsertSettings(data)];
+                case 1:
+                    settingsResp = _a.sent();
+                    if (settingsResp.ok) {
+                        setIsSubmitLoading(false);
+                        setOpen(true);
+                        onHide(true);
+                    }
+                    else {
+                        setIsSubmitLoading(false);
+                        setError(settingsResp.message);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleClose = function (event, reason) {
+        if (reason === "clickaway") {
+            return;
+        }
+        setOpen(false);
+    };
+    useEffect(function () {
+        if (show) {
+            reset();
+        }
+    }, [show]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Grid, { container: true },
+            React.createElement(Grid, { item: true },
+                React.createElement(MesfModal, { title: "NEW SETTING/CREW", open: show, handleClose: function () { return onHide(false); }, id: "create-setting-modal", maxWidth: "md" },
+                    React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
+                        React.createElement(MesfModal.Content, { style: { padding: "15px 30px 0" } },
+                            React.createElement(Grid, { container: true, spacing: 2 },
+                                React.createElement(Grid, { item: true, xs: 12, md: 6 },
+                                    React.createElement(Controller, { name: "SettingName", control: control, rules: { required: "Name is required" }, render: function (_a) {
+                                            var field = _a.field, error = _a.fieldState.error;
+                                            return (React.createElement(TextField, __assign({}, field, { label: "Name", variant: "outlined", error: !!error, helperText: error ? error.message : null, fullWidth: true, margin: "dense", autoComplete: "off" })));
+                                        } })),
+                                React.createElement(Grid, { item: true, xs: 12, md: 6 },
+                                    React.createElement(Controller, { name: "Value", control: control, rules: {
+                                            required: "Value is required",
+                                            pattern: {
+                                                value: /^[A-Za-z0-9]+$/,
+                                                message: "Only letters and numbers are allowed"
+                                            }
+                                        }, render: function (_a) {
+                                            var field = _a.field, error = _a.fieldState.error;
+                                            return (React.createElement(TextField, __assign({}, field, { label: "Value", variant: "outlined", error: !!error, helperText: error ? error.message : null, fullWidth: true, margin: "dense", autoComplete: "off" })));
+                                        } })),
+                                React.createElement(Grid, { item: true, md: 12, xs: 12, style: { margin: "12px 0 20px", padding: "0 8px" } },
+                                    React.createElement(Controller, { name: "Description", control: control, render: function (_a) {
+                                            var _b = _a.field, value = _b.value, onChange = _b.onChange;
+                                            return (React.createElement(TextField, { style: { margin: "8px 0" }, size: "medium", maxRows: 5, label: "Description", multiline: true, variant: "outlined", fullWidth: true, autoComplete: "off", value: value, onChange: function (evt) {
+                                                    if (evt.target.value.length <= 200)
+                                                        onChange(evt);
+                                                } }));
+                                        } })))),
+                        React.createElement(MesfModal.Actions, { style: { padding: "20px 30px 30px" } },
+                            React.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
+                                React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                                    React.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Cancel")),
+                                React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                                    React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))))),
+        React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); }, title: "Error Creating Setting" }),
+        React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
+            React.createElement(Alert, { severity: "success", onClose: handleClose }, "The setting was created successfully"))));
+};
+
+makeStyles(function (theme) { return ({
+    title: {
+        fontSize: 15
+    },
+    modalTitle: {
+        fontSize: 15,
+        marginTop: theme.spacing(1)
+    },
+    chip: {
+        margin: 2
+    },
+    errorLabel: {
+        fontSize: 12,
+        color: "#F44336"
+    },
+    infoLabel: {
+        fontSize: 12,
+        color: "#757575"
+    }
+}); });
+var DeleteSetting = function (_a) {
+    var show = _a.show, onHide = _a.onHide;
+    var _b = useState(false), open = _b[0], setOpen = _b[1];
+    var _c = useState(false), isSubmitLoading = _c[0], setIsSubmitLoading = _c[1];
+    var _d = useState(""), error = _d[0], setError = _d[1];
+    var settingSelected = useSettingsContext().state.settingSelected;
+    var _e = useForm({
+        defaultValues: settingSelected ? settingSelected : INITIAL_VALUES
+    }), control = _e.control, handleSubmit = _e.handleSubmit, reset = _e.reset, setValue = _e.setValue;
+    var onSubmit = function (data) { return __awaiter(void 0, void 0, void 0, function () {
+        var settingsResp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsSubmitLoading(true);
+                    return [4 /*yield*/, deleteSetting(data.SettingId)];
+                case 1:
+                    settingsResp = _a.sent();
+                    if (settingsResp.ok) {
+                        setIsSubmitLoading(false);
+                        setOpen(true);
+                        onHide(true);
+                    }
+                    else {
+                        setIsSubmitLoading(false);
+                        setError(settingsResp.message);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleClose = function (event, reason) {
+        if (reason === "clickaway") {
+            return;
+        }
+        setOpen(false);
+    };
+    useEffect(function () {
+        if (show) {
+            reset();
+            if (settingSelected) {
+                setValue("SettingId", settingSelected.SettingId);
+                setValue("SettingName", settingSelected.SettingName);
+                setValue("Value", settingSelected.Value);
+                setValue("Description", settingSelected.Description);
+            }
+        }
+    }, [show]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Grid, { container: true },
+            React.createElement(Grid, { item: true },
+                React.createElement(MesfModal, { title: "DELETE SETTING/CREW", open: show, handleClose: function () { return onHide(false); }, id: "delete-setting-modal", maxWidth: "md" },
+                    React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
+                        React.createElement(MesfModal.Content, { style: { padding: "15px 30px 0" } },
+                            React.createElement(Grid, { container: true, spacing: 2 },
+                                React.createElement(Grid, { item: true, xs: 12, md: 6 },
+                                    React.createElement(Controller, { name: "SettingName", control: control, rules: { required: "Name is required" }, render: function (_a) {
+                                            var field = _a.field, error = _a.fieldState.error;
+                                            return (React.createElement(TextField, __assign({ disabled: true }, field, { label: "Name", variant: "outlined", error: !!error, helperText: error ? error.message : null, fullWidth: true, margin: "dense", autoComplete: "off" })));
+                                        } })),
+                                React.createElement(Grid, { item: true, xs: 12, md: 6 },
+                                    React.createElement(Controller, { name: "Value", control: control, rules: { required: "Value is required" }, render: function (_a) {
+                                            var field = _a.field, error = _a.fieldState.error;
+                                            return (React.createElement(TextField, __assign({ disabled: true }, field, { label: "Value", variant: "outlined", error: !!error, helperText: error ? error.message : null, fullWidth: true, margin: "dense", autoComplete: "off" })));
+                                        } })),
+                                React.createElement(Grid, { item: true, md: 12, xs: 12, style: { margin: "12px 0 20px", padding: "0 8px" } },
+                                    React.createElement(Controller, { name: "Description", control: control, render: function (_a) {
+                                            var _b = _a.field, value = _b.value, onChange = _b.onChange;
+                                            return (React.createElement(TextField, { disabled: true, style: { margin: "8px 0" }, size: "medium", maxRows: 5, label: "Description", multiline: true, variant: "outlined", fullWidth: true, autoComplete: "off", value: value, onChange: function (evt) {
+                                                    if (evt.target.value.length <= 200)
+                                                        onChange(evt);
+                                                } }));
+                                        } })))),
+                        React.createElement(MesfModal.Actions, { style: { padding: "20px 30px 30px" } },
+                            React.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
+                                React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                                    React.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Cancel")),
+                                React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                                    React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "secondary", type: "submit" }, "Delete")))))))),
+        React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); }, title: "Error deleting Setting" }),
+        React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
+            React.createElement(Alert, { severity: "success", onClose: handleClose }, "The setting was deleted successfully"))));
+};
+
+makeStyles(function (theme) { return ({
+    title: {
+        fontSize: 15
+    },
+    modalTitle: {
+        fontSize: 15,
+        marginTop: theme.spacing(1)
+    },
+    chip: {
+        margin: 2
+    },
+    errorLabel: {
+        fontSize: 12,
+        color: "#F44336"
+    },
+    infoLabel: {
+        fontSize: 12,
+        color: "#757575"
+    }
+}); });
+var EditSetting = function (_a) {
+    var show = _a.show, onHide = _a.onHide;
+    var _b = useState(false), open = _b[0], setOpen = _b[1];
+    var _c = useState(false), isSubmitLoading = _c[0], setIsSubmitLoading = _c[1];
+    var _d = useState(""), error = _d[0], setError = _d[1];
+    var settingSelected = useSettingsContext().state.settingSelected;
+    var _e = useForm({
+        defaultValues: settingSelected ? settingSelected : INITIAL_VALUES
+    }), control = _e.control, handleSubmit = _e.handleSubmit, reset = _e.reset, setValue = _e.setValue;
+    var onSubmit = function (data) { return __awaiter(void 0, void 0, void 0, function () {
+        var settingsResp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsSubmitLoading(true);
+                    return [4 /*yield*/, upsertSettings(data)];
+                case 1:
+                    settingsResp = _a.sent();
+                    if (settingsResp.ok) {
+                        setIsSubmitLoading(false);
+                        setOpen(true);
+                        onHide(true);
+                    }
+                    else {
+                        setIsSubmitLoading(false);
+                        setError(settingsResp.message);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleClose = function (event, reason) {
+        if (reason === "clickaway") {
+            return;
+        }
+        setOpen(false);
+    };
+    useEffect(function () {
+        if (show) {
+            reset();
+            if (settingSelected) {
+                setValue("SettingId", settingSelected.SettingId);
+                setValue("SettingName", settingSelected.SettingName);
+                setValue("Value", settingSelected.Value);
+                setValue("Description", settingSelected.Description);
+            }
+        }
+    }, [show]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Grid, { container: true },
+            React.createElement(Grid, { item: true },
+                React.createElement(MesfModal, { title: "EDIT SETTING/CREW", open: show, handleClose: function () { return onHide(false); }, id: "edit-setting-modal", maxWidth: "md" },
+                    React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
+                        React.createElement(MesfModal.Content, { style: { padding: "15px 30px 0" } },
+                            React.createElement(Grid, { container: true, spacing: 2 },
+                                React.createElement(Grid, { item: true, xs: 12, md: 6 },
+                                    React.createElement(Controller, { name: "SettingName", control: control, rules: { required: "Name is required" }, render: function (_a) {
+                                            var field = _a.field, error = _a.fieldState.error;
+                                            return (React.createElement(TextField, __assign({}, field, { label: "Name", variant: "outlined", error: !!error, helperText: error ? error.message : null, fullWidth: true, margin: "dense", autoComplete: "off" })));
+                                        } })),
+                                React.createElement(Grid, { item: true, xs: 12, md: 6 },
+                                    React.createElement(Controller, { name: "Value", control: control, rules: {
+                                            required: "Value is required",
+                                            pattern: {
+                                                value: /^[A-Za-z0-9]+$/,
+                                                message: "Only letters and numbers are allowed"
+                                            }
+                                        }, render: function (_a) {
+                                            var field = _a.field, error = _a.fieldState.error;
+                                            return (React.createElement(TextField, __assign({}, field, { label: "Value", variant: "outlined", error: !!error, helperText: error ? error.message : null, fullWidth: true, margin: "dense", autoComplete: "off" })));
+                                        } })),
+                                React.createElement(Grid, { item: true, md: 12, xs: 12, style: { margin: "12px 0 20px", padding: "0 8px" } },
+                                    React.createElement(Controller, { name: "Description", control: control, render: function (_a) {
+                                            var _b = _a.field, value = _b.value, onChange = _b.onChange;
+                                            return (React.createElement(TextField, { style: { margin: "8px 0" }, size: "medium", maxRows: 5, label: "Description", multiline: true, variant: "outlined", fullWidth: true, autoComplete: "off", value: value, onChange: function (evt) {
+                                                    if (evt.target.value.length <= 200)
+                                                        onChange(evt);
+                                                } }));
+                                        } })))),
+                        React.createElement(MesfModal.Actions, { style: { padding: "20px 30px 30px" } },
+                            React.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
+                                React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                                    React.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Cancel")),
+                                React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                                    React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))))),
+        React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); }, title: "Error updating Setting" }),
+        React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
+            React.createElement(Alert, { severity: "success", onClose: handleClose }, "The setting was edited successfully"))));
+};
+
+var TableSettings = function (_a) {
+    var getSettingsFromAPI = _a.getSettingsFromAPI; _a.isLoading; var rows = _a.rows;
+    var _b = useContextMenuMESF(), showContextMenu = _b.showContextMenu, registerConfig = _b.registerConfig;
+    var _c = useSettingsContext(); _c.state; var actions = _c.actions;
+    var classes = useStyles$3();
+    var _d = useState(false), openModalNew = _d[0], setOpenModalNew = _d[1];
+    var _e = useState(false), openModalEditSetting = _e[0], setOpenModalEditSetting = _e[1];
+    var _f = useState(false), openModalDeleteSetting = _f[0], setOpenModalDeleteSetting = _f[1];
+    var getMenuOptions = useSettingsOptionsFunctions({
+        setSettingId: actions.setSettingSelected,
+        setShowDeleteModal: setOpenModalDeleteSetting,
+        setShowCreateModal: setOpenModalNew,
+        setShowEditModal: setOpenModalEditSetting
+    }).getMenuOptions;
+    var _g = useTableData({
+        setOpenModalEditSetting: setOpenModalEditSetting,
+        setOpenModalDeleteSetting: setOpenModalDeleteSetting,
+        showContextMenu: showContextMenu
+    }), columnDefs = _g.columnDefs, defaultColDef = _g.defaultColDef;
+    var loadingOverlayComponent = useMemo(function () {
+        return (React__default.createElement("div", { style: {
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+            } },
+            React__default.createElement(LazyLoading, null)));
+    }, []);
+    var getContextMenuItems = function (params) {
+        var _a, _b;
+        var data = (_a = params.node) === null || _a === void 0 ? void 0 : _a.data;
+        params.api.deselectAll();
+        (_b = params.node) === null || _b === void 0 ? void 0 : _b.setSelected(true);
+        showContextMenu(event, data, "TableSettings");
+        return [];
+    };
+    useEffect(function () {
+        registerConfig({
+            id: "TableSettings",
+            getOptions: getMenuOptions
+        });
+    }, []);
+    return (React__default.createElement(React__default.Fragment, null,
+        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" } },
+                React__default.createElement(Typography$1, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "Settings")),
+            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(CreateSetting, { show: openModalNew, onHide: function (shouldUpdate) {
+                            setOpenModalNew(false);
+                            if (shouldUpdate)
+                                getSettingsFromAPI();
+                        } }),
+                    React__default.createElement(EditSetting, { show: openModalEditSetting, onHide: function (shouldUpdate) {
+                            setOpenModalEditSetting(false);
+                            if (shouldUpdate)
+                                getSettingsFromAPI();
+                        } }),
+                    React__default.createElement(DeleteSetting, { show: openModalDeleteSetting, onHide: function (shouldUpdate) {
+                            setOpenModalDeleteSetting(false);
+                            if (shouldUpdate)
+                                getSettingsFromAPI();
+                        } }),
+                    React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: {
+                            height: "62vh",
+                            border: "4px solid #ccc",
+                            borderRadius: 10,
+                            padding: 10,
+                            margin: "20px 0 10px"
+                        } },
+                        React__default.createElement("div", { style: { height: "100%", width: "100%" }, className: "ag-theme-alpine" },
+                            React__default.createElement(AgGridReact, { rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 34, headerHeight: 34, animateRows: true, loadingOverlayComponent: loadingOverlayComponent, getContextMenuItems: function (e) { return getContextMenuItems(e); }, pagination: true, rowSelection: "single", onRowDoubleClicked: function (event) {
+                                    actions.setSettingSelected(event.data);
+                                    setOpenModalEditSetting(true);
+                                } }))),
+                    React__default.createElement(Grid, { container: true, justifyContent: "flex-end" },
+                        React__default.createElement(Grid, { item: true, md: 2, xs: 12, style: {
+                                display: "flex",
+                                justifyContent: "flex-end"
+                            } },
+                            React__default.createElement(Button, { variant: "contained", color: "primary", onClick: function () { return setOpenModalNew(!openModalNew); }, fullWidth: true, style: { marginTop: 10 } }, "NEW SETTING"))))))));
+};
+
+var SettingsPage = function () {
+    var _a = useSettingsContext(), state = _a.state, actions = _a.actions;
+    var _b = useState(""), error = _b[0], setError = _b[1];
+    var _c = useState(false), isLoading = _c[0], setIsLoading = _c[1];
+    var getSettingsFromAPI = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var res, settings;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsLoading(true);
+                    return [4 /*yield*/, getUTLSettings()];
+                case 1:
+                    res = _a.sent();
+                    if (res.ok) {
+                        settings = get$1(res, "data.tables[0].rows", []);
+                        actions.setSettings(settings);
+                    }
+                    else {
+                        setError(res.message);
+                    }
+                    setIsLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        getSettingsFromAPI();
+    }, []);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
+            React__default.createElement(Paper, { elevation: 1, style: {
+                    width: "100%",
+                    padding: "10px 0 20px",
+                    borderRadius: "0.75rem"
+                } },
+                React__default.createElement(TableSettings, { rows: state.settings, isLoading: isLoading, getSettingsFromAPI: getSettingsFromAPI }))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
+};
+
+var Settings = function () {
+    return (React__default.createElement(SettingsProvider, null,
+        React__default.createElement(SettingsPage, null)));
+};
+
+function Configuration() {
+    var option = useParams().option;
+    var _a = useContext(ConfigurationContext), customConfiguration = _a[0], CustomSidebar = _a[1];
+    var routes = __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(ProfilesPage, null); }
+        },
+        {
+            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: "settings",
+            sidebar: function () { return React__default.createElement("div", null, "Settings"); },
+            main: function () { return React__default.createElement(Settings, null); }
+        }
+    ], customConfiguration, true);
+    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(MenuItem, { selected: option === "settings", className: "p-0" },
+                        React__default.createElement(Link, { to: "/configuration/settings", className: "nav-link" }, "Settings")))),
+            React__default.createElement("div", { className: "col-md-10", style: { flex: "80%" } },
+                React__default.createElement(Routes, null, routes.map(function (route, index) { return (React__default.createElement(Route, { key: "".concat(route.path), 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"
     } })); };
 
 /*!
@@ -9334,7 +10078,7 @@ _adapters._date.override(typeof moment$2 === 'function' ? {
   }
 } : {});
 
-var css$1 = "/* ContextMenu.css */\n.context-menu {\n    position: absolute;\n    z-index: 1000;\n    background-color: #fff;\n    border: 1px solid #ddd;\n    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\n    border-radius: 4px;\n    overflow: hidden;\n}\n\n    .context-menu ul {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n    }\n\n    .context-menu li {\n        padding: 8px 15px;\n        cursor: pointer;\n        border-bottom: 1px solid #eee;\n        background-color: #fff;\n        color: #333;\n        font-size: 14px;\n    }\n\n        .context-menu li:hover {\n            background-color: #f5f5f5;\n        }\n\n\n";
+var css$1 = "/* ContextMenu.css */ .context-menu {\n\tposition: absolute;\n\tz-index: 1000;\n\tbackground-color: #fff;\n\tborder: 1px solid #ddd;\n\tbox-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\n\tborder-radius: 4px;\n\toverflow: hidden;\n}\n\n.context-menu ul {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.context-menu li {\n\tpadding: 8px 15px;\n\tcursor: pointer;\n\tborder-bottom: 1px solid #eee;\n\tbackground-color: #fff;\n\tcolor: #333;\n\tfont-size: 14px;\n}\n\n.context-menu li:hover {\n\tbackground-color: #f5f5f5;\n}\n";
 n(css$1,{});
 
 var useTagColorsStyles = makeStyles({
@@ -12235,7 +12979,7 @@ var Navigation = function (_a) {
         React__default.createElement(MESFMainContainer, null)));
 };
 
-var css = "body {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background-color: #fafbfc !important;\n}\n.container-fluid-main{\n  padding-right: 0px !important; \n  padding-left: 0px !important;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}\n\n.mes-primary-color {\n  background-color: #479dc4 !important;\n}\n.mes-button-primary{\n  background-color: #479dc4 !important;\n  border-color: #479dc4 !important;\n}\n\n.mes-selectable-datagrid .MuiDataGrid-row{\n  cursor: pointer;\n}\n\n.mes-menu-top .navbar-brand{\n  color: #FFFF !important;\n}\n.mes-menu-top .nav-link {\n  color: #FFFF !important;\n}\n.mes-menu-top .navbar-toggler {\n  color: #FFFF !important;\n}\n.mes-menu-top .navbar-text {\n  color: #FFFF !important;\n}\n.mes-footer-login{\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  height: 10em;\n  line-height: 60px;\n  text-align:center;\n}\n.mes-filter-datepicker{\n  padding: unset !important;\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n  padding-top: 0.375rem !important;\n  padding-bottom: 0.375rem !important;\n  padding-left: 0.75rem !important;\n  cursor: pointer !important;\n  max-width: 120px;\n}\n.mes-filter-datetimepicker{\n  max-width: 97px;\n}\n.mes-not-rounded{\n  border-radius: unset !important;\n}\n\n.mes-numeric{\n  text-align: right;\n}\n.mes-drag-over{\n  border: 3px dotted #666;\n  background-color: #479dc4 !important;\n}\n.mes-drag-start{\n  border: 3px solid #666;\n}\n\n.mes-selectable{\n  cursor: pointer !important;\n}\n\n.mes-custom-select{\n  width: auto !important;\n  padding: 0.375rem 0 0.375rem 0 !important;\n  background: unset !important;\n  font-family: inherit !important;\n}\n.mes-custom-select .MuiSelect-select{\n  padding-left: 14px;\n}\n\n.mes-custom-select::before{\n  border-bottom: unset !important;\n}\n.mes-custom-select::after{\n  border-bottom: unset !important;\n}\n.mes-no-border{\n  border: unset;\n}\n.mes-no-border:focus-visible {\n  outline: unset;\n}\n.mes-div-submenu{\n  border-right: 1px solid #cfdbe2;\n  overflow-y: scroll;\n  max-height: 80vh;\n}\n.mes-submenu a{\n  width: 100% !important;\n  /* color: rgba(0, 0, 0, 0.87); */\n  color: #479dc4\n}\n.mes-submenu .Mui-selected{\n  border-right: 3px solid #479dc4; \n}\n.mes-menu-group{\n    font-size: 20px;\n    line-height: 1.1;\n    color: #929292;  \n    font-weight: normal;    \n}\n\n/********************MUI DATAGRID*****************************/\n.Mui-selected{\n  font-weight: bolder !important;\n  opacity: 1 !important;\n}\n\n.mes-upload-control{\n\n}\n.mes-upload-control .file-box{\n  /* border : 1px solid black; */\n  height : 100px;\n  position: relative;  \n}\n.mes-upload-control .file-detail{\n  position: absolute;\n  left: 0px;\n  top: 0px; \n  z-index: 1;\n  height: 100%;\n  width: 100%;\n}\n\n.mes-upload-control input[type=file]{\n  left: 0px;\n  top: 0px;\n  opacity: 0;\n  z-index: 10000;\n  height: 100%;\n  cursor: pointer;\n}\n.mes-upload-control table{\n  width: 100%;\n}\n.mes-upload-control td{\n  font-size: 0.8rem !important;\n  max-width:0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\n}\n\n\n.input-group-text{\n  background-color: #ced2cc !important;\n  /* border: 1px solid #ced4da !important; */\n  /* color: #000000 !important; */\n}\n\n\n\n\n.content-wrapper {\n  padding: 15px;\n  width: 100%;\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\n  margin-top: -1px;\n}\n.content-wrapper > .unwrap {\n  margin: -15px;\n}\n@media only screen and (min-width: 768px) {\n  .content-wrapper > .unwrap {\n    margin: -20px;\n  }\n}\n.content-wrapper > h3,\n.content-wrapper > .content-heading {\n  font-size: 24px;\n  line-height: 1.1;\n  color: #929292;\n  margin: -15px;\n  margin-bottom: 20px;\n  padding: 15px;\n  font-weight: normal;\n  background-color: #fafbfc;\n  border-bottom: 1px solid #cfdbe2;\n}\n.content-wrapper > h3 > small,\n.content-wrapper > .content-heading > small {\n  display: block;\n  font-size: 12px;\n  color: #909fa7;\n}\n.content-wrapper > button,\n.content-wrapper > .btn {\n  margin: 10px 10px 0 0;\n}\n.content-wrapper .container,\n.content-wrapper .container-fluid {\n  padding-left: 0;\n  padding-right: 0;\n}\n@media only screen and (min-width: 768px) {\n  .content-wrapper {\n    padding: 20px;\n  }\n  .content-wrapper > h3,\n  .content-wrapper > .content-heading {\n    margin: -20px;\n    margin-bottom: 5px;\n    padding: 15px;\n  }\n  .content-wrapper > button,\n  .content-wrapper > .btn {\n    margin: 0;\n  }\n}\n\n  @media print {\n    .sidebar,\n    .topnavbar,\n    .offsidebar,\n    .btn {\n      display: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    }\n    .wrapper,\n    .wrapper > section,\n    .content-wrapper {\n      margin: 0 !important;\n      /* remove margin used for sidebar and expand the content */\n      padding: 0 !important;\n      width: 100% !important;\n    }\n    .content-wrapper {\n      overflow: hidden !important;\n    }\n  }\n  ";
+var css = "body {\n\tmargin: 0;\n\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n\t\t\"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n\t\tsans-serif;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\tbackground-color: #fafbfc !important;\n}\n.container-fluid-main {\n\tpadding-right: 0px !important;\n\tpadding-left: 0px !important;\n}\n\ncode {\n\tfont-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n\t\tmonospace;\n}\n\n.mes-primary-color {\n\tbackground-color: #479dc4 !important;\n}\n.mes-button-primary {\n\tbackground-color: #479dc4 !important;\n\tborder-color: #479dc4 !important;\n}\n\n.mes-selectable-datagrid .MuiDataGrid-row {\n\tcursor: pointer;\n}\n\n.mes-menu-top .navbar-brand {\n\tcolor: #ffff !important;\n}\n.mes-menu-top .nav-link {\n\tcolor: #ffff !important;\n}\n.mes-menu-top .navbar-toggler {\n\tcolor: #ffff !important;\n}\n.mes-menu-top .navbar-text {\n\tcolor: #ffff !important;\n}\n.mes-footer-login {\n\tposition: absolute;\n\tbottom: 0;\n\twidth: 100%;\n\theight: 10em;\n\tline-height: 60px;\n\ttext-align: center;\n}\n.mes-filter-datepicker {\n\tpadding: unset !important;\n\tborder-top-left-radius: 0 !important;\n\tborder-bottom-left-radius: 0 !important;\n\tpadding-top: 0.375rem !important;\n\tpadding-bottom: 0.375rem !important;\n\tpadding-left: 0.75rem !important;\n\tcursor: pointer !important;\n\tmax-width: 120px;\n}\n.mes-filter-datetimepicker {\n\tmax-width: 97px;\n}\n.mes-not-rounded {\n\tborder-radius: unset !important;\n}\n\n.mes-numeric {\n\ttext-align: right;\n}\n.mes-drag-over {\n\tborder: 3px dotted #666;\n\tbackground-color: #479dc4 !important;\n}\n.mes-drag-start {\n\tborder: 3px solid #666;\n}\n\n.mes-selectable {\n\tcursor: pointer !important;\n}\n\n.mes-custom-select {\n\twidth: auto !important;\n\tpadding: 0.375rem 0 0.375rem 0 !important;\n\tbackground: unset !important;\n\tfont-family: inherit !important;\n}\n.mes-custom-select .MuiSelect-select {\n\tpadding-left: 14px;\n}\n\n.mes-custom-select::before {\n\tborder-bottom: unset !important;\n}\n.mes-custom-select::after {\n\tborder-bottom: unset !important;\n}\n.mes-no-border {\n\tborder: unset;\n}\n.mes-no-border:focus-visible {\n\toutline: unset;\n}\n.mes-div-submenu {\n\tborder-right: 1px solid #cfdbe2;\n\toverflow-y: scroll;\n\tmax-height: 80vh;\n}\n.mes-submenu a {\n\twidth: 100% !important;\n\t/* color: rgba(0, 0, 0, 0.87); */\n\tcolor: #479dc4;\n}\n.mes-submenu .Mui-selected {\n\tborder-right: 3px solid #479dc4;\n}\n.mes-menu-group {\n\tfont-size: 20px;\n\tline-height: 1.1;\n\tcolor: #929292;\n\tfont-weight: normal;\n}\n\n/********************MUI DATAGRID*****************************/\n.Mui-selected {\n\tfont-weight: bolder !important;\n\topacity: 1 !important;\n}\n\n.mes-upload-control {\n}\n.mes-upload-control .file-box {\n\t/* border : 1px solid black; */\n\theight: 100px;\n\tposition: relative;\n}\n.mes-upload-control .file-detail {\n\tposition: absolute;\n\tleft: 0px;\n\ttop: 0px;\n\tz-index: 1;\n\theight: 100%;\n\twidth: 100%;\n}\n\n.mes-upload-control input[type=\"file\"] {\n\tleft: 0px;\n\ttop: 0px;\n\topacity: 0;\n\tz-index: 10000;\n\theight: 100%;\n\tcursor: pointer;\n}\n.mes-upload-control table {\n\twidth: 100%;\n}\n.mes-upload-control td {\n\tfont-size: 0.8rem !important;\n\tmax-width: 0;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.input-group-text {\n\tbackground-color: #ced2cc !important;\n\t/* border: 1px solid #ced4da !important; */\n\t/* color: #000000 !important; */\n}\n\n.content-wrapper {\n\tpadding: 15px;\n\twidth: 100%;\n\tborder-top: 1px solid rgba(0, 0, 0, 0.15);\n\tmargin-top: -1px;\n}\n.content-wrapper > .unwrap {\n\tmargin: -15px;\n}\n@media only screen and (min-width: 768px) {\n\t.content-wrapper > .unwrap {\n\t\tmargin: -20px;\n\t}\n}\n.content-wrapper > h3,\n.content-wrapper > .content-heading {\n\tfont-size: 24px;\n\tline-height: 1.1;\n\tcolor: #929292;\n\tmargin: -15px;\n\tmargin-bottom: 20px;\n\tpadding: 15px;\n\tfont-weight: normal;\n\tbackground-color: #fafbfc;\n\tborder-bottom: 1px solid #cfdbe2;\n}\n.content-wrapper > h3 > small,\n.content-wrapper > .content-heading > small {\n\tdisplay: block;\n\tfont-size: 12px;\n\tcolor: #909fa7;\n}\n.content-wrapper > button,\n.content-wrapper > .btn {\n\tmargin: 10px 10px 0 0;\n}\n.content-wrapper .container,\n.content-wrapper .container-fluid {\n\tpadding-left: 0;\n\tpadding-right: 0;\n}\n@media only screen and (min-width: 768px) {\n\t.content-wrapper {\n\t\tpadding: 20px;\n\t}\n\t.content-wrapper > h3,\n\t.content-wrapper > .content-heading {\n\t\tmargin: -20px;\n\t\tmargin-bottom: 5px;\n\t\tpadding: 15px;\n\t}\n\t.content-wrapper > button,\n\t.content-wrapper > .btn {\n\t\tmargin: 0;\n\t}\n}\n\n@media print {\n\t.sidebar,\n\t.topnavbar,\n\t.offsidebar,\n\t.btn {\n\t\tdisplay: none !important;\n\t\twidth: 0 !important;\n\t\theight: 0 !important;\n\t}\n\t.wrapper,\n\t.wrapper > section,\n\t.content-wrapper {\n\t\tmargin: 0 !important;\n\t\t/* remove margin used for sidebar and expand the content */\n\t\tpadding: 0 !important;\n\t\twidth: 100% !important;\n\t}\n\t.content-wrapper {\n\t\toverflow: hidden !important;\n\t}\n}\n";
 n(css,{});
 
 var timezone = TimeService.getInstance().getServerTimeZone();
@@ -12279,7 +13023,7 @@ var useDefaultAreaId = function (setError) {
 };
 
 var useStyles = makeStyles(function (theme) {
-    return createStyles$1({
+    return createStyles({
         root: {
             "& .MuiInputBase-input": {
                 color: "#000 !important"
@@ -12398,5 +13142,5 @@ var areaSelector = /*#__PURE__*/Object.freeze({
     AreaSelector: AreaSelector
 });
 
-export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HorizontalTextControl, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, NumericTextControl, ShiftDayNavigatorControl, ShiftNavigatorProvider, SimplePasswordControl, SimpleSelectorControl, SimpleTextAreaControl, SimpleTextControl, TimeFormatter, TimeService, TreePickerControl, TreePickerControlV2, TrendingsPage, USER_LABELS, UTLSettingsProvider, UploadFileControl, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getError, getMomentTz, getProfiles, getShiftByParameters, getShiftStyle, getTokenFromLS, getUsers, renewToken, setPassword, setProfilesToUser, upsertUser, useAssetContext, useContextMenuMESF, useShiftNavigator, useShiftNavigatorManager, useStyles$1 as useStyles, useToken, useUTLSettingsContext, useUserContext };
+export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HorizontalTextControl, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, NumericTextControl, ShiftDayNavigatorControl, ShiftNavigatorProvider, SimplePasswordControl, SimpleSelectorControl, SimpleTextAreaControl, SimpleTextControl, TimeFormatter, TimeService, TreePickerControl, TreePickerControlV2, TrendingsPage, USER_LABELS, UTLSettingsProvider, UploadFileControl, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getError, getMomentTz, getProfiles, getShiftByParameters, getShiftStyle, getTokenFromLS, getUsers, renewToken, setPassword, setProfilesToUser, upsertUser, useAssetContext, useContextMenuMESF, useShiftNavigator, useShiftNavigatorManager, useStyles$4 as useStyles, useToken, useUTLSettingsContext, useUserContext };
 //# sourceMappingURL=index.esm.js.map