@dexteel/mesf-core 3.4.1 → 3.5.1

package/dist/index.esm.js

@@ -1,35 +1,50 @@
-import moment from 'moment';
 import * as React from 'react';
-import React__default, { createContext, useContext, useState, useEffect, useCallback, useRef, Component } from 'react';
-import { createSlice } from '@reduxjs/toolkit';
-import { useComplexState } from 'use-complex-state';
+import React__default, { createContext, useContext, useState, useEffect, useCallback, useRef, Component, lazy, Suspense } from 'react';
 import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
+import { Outlet, useNavigate, useSearchParams, Link, useParams, Navigate, Routes, Route, BrowserRouter } from 'react-router-dom';
+import { FormHelperText, TextField as TextField$1, CircularProgress as CircularProgress$1, Grid as Grid$1, Typography as Typography$1, Snackbar as Snackbar$1, makeStyles as makeStyles$1, createStyles as createStyles$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, List, ListItem, ListItemText, DialogActions as DialogActions$2 } from '@material-ui/core';
+import { get as get$1, isEmpty } from 'lodash-es';
+import PropTypes from 'prop-types';
+import { ResponsiveBar } from '@nivo/bar';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
 import { makeStyles, createStyles, useTheme, withStyles, alpha } from '@material-ui/core/styles';
-import { get, useForm, Controller } from 'react-hook-form';
 import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions$1 from '@material-ui/core/DialogActions';
-import DialogContent$1 from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle$1 from '@material-ui/core/DialogTitle';
-import Typography from '@material-ui/core/Typography';
+import DialogContent$1 from '@material-ui/core/DialogContent';
+import DialogActions$1 from '@material-ui/core/DialogActions';
+import Dialog from '@material-ui/core/Dialog';
+import TreeView from '@material-ui/lab/TreeView';
+import SvgIcon from '@material-ui/core/SvgIcon';
+import TreeItem from '@material-ui/lab/TreeItem';
+import Collapse from '@material-ui/core/Collapse';
+import Code from '@material-ui/icons/Code';
+import Folder from '@material-ui/icons/Folder';
+import { useSpring, animated } from 'react-spring';
 import { DataGrid, GridOverlay } from '@material-ui/data-grid';
-import Snackbar from '@material-ui/core/Snackbar';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import MuiAlert from '@material-ui/lab/Alert';
 import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
-import { get as get$1, isEmpty } from 'lodash-es';
+import Typography from '@material-ui/core/Typography';
 import { Modal as Modal$2, Alert as Alert$2, Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
+import { useMsal, MsalProvider } from '@azure/msal-react';
+import { LogLevel, PublicClientApplication } from '@azure/msal-browser';
+import MenuList from '@material-ui/core/MenuList';
+import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
+import { useComplexState } from 'use-complex-state';
+import { createSlice } from '@reduxjs/toolkit';
+import moment from 'moment';
+import { get, useForm, Controller } from 'react-hook-form';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import Snackbar from '@material-ui/core/Snackbar';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import MuiAlert from '@material-ui/lab/Alert';
 import TextField from '@material-ui/core/TextField';
 import { Alert as Alert$1, AlertTitle } from '@material-ui/lab';
 import { MuiPickersUtilsProvider, KeyboardDatePicker, KeyboardTimePicker } from '@material-ui/pickers';
 import MomentUtils from '@date-io/moment';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
 import InputLabel from '@material-ui/core/InputLabel';
-import { FormHelperText, TextField as TextField$1, CircularProgress as CircularProgress$1, Grid as Grid$1, Typography as Typography$1, Snackbar as Snackbar$1 } from '@material-ui/core';
 import FormControl from '@material-ui/core/FormControl';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -38,20 +53,6 @@ import FormHelperText$1 from '@material-ui/core/FormHelperText';
 import stc from 'string-to-color';
 import DeleteIcon from '@material-ui/icons/Delete';
 import EditIcon from '@material-ui/icons/Edit';
-import { Outlet, useNavigate, useSearchParams, Link, useParams, Navigate, Routes, Route, BrowserRouter } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import { ResponsiveBar } from '@nivo/bar';
-import TreeView from '@material-ui/lab/TreeView';
-import SvgIcon from '@material-ui/core/SvgIcon';
-import TreeItem from '@material-ui/lab/TreeItem';
-import Collapse from '@material-ui/core/Collapse';
-import Code from '@material-ui/icons/Code';
-import Folder from '@material-ui/icons/Folder';
-import { useSpring, animated } from 'react-spring';
-import CardActions from '@material-ui/core/CardActions';
-import { useMsal, MsalProvider } from '@azure/msal-react';
-import { LogLevel, PublicClientApplication } from '@azure/msal-browser';
-import MenuList from '@material-ui/core/MenuList';
 import Input from '@material-ui/core/Input';
 import Chip from '@material-ui/core/Chip';
 import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
@@ -446,7 +447,7 @@ var Alert = function (props) {
     return React__default.createElement(MuiAlert, __assign({ elevation: 6, variant: "filled" }, props));
 };
 
-var useStyles$h = makeStyles(function (theme) {
+var useStyles$i = makeStyles(function (theme) {
     return createStyles({
         root: {
             '& .MuiDataGrid-row': {
@@ -476,7 +477,7 @@ var useStyles$h = makeStyles(function (theme) {
     });
 });
 var TableJobs = function () {
-    var classes = useStyles$h();
+    var classes = useStyles$i();
     var _a = useState(true), loading = _a[0], setLoading = _a[1];
     var actions = useJobsContext().actions;
     var _b = useState(false), messageLoading = _b[0], setMessageLoading = _b[1];
@@ -762,7 +763,7 @@ var useGetLogsFromAPI = function (_a) {
     return update;
 };
 
-var useStyles$g = makeStyles(function (theme) {
+var useStyles$h = makeStyles(function (theme) {
     return createStyles({
         title: {
             fontSize: 15
@@ -781,7 +782,7 @@ var formatTime = function (nowTime) {
 };
 var ModalLogSelected = function (_a) {
     var show = _a.show, onHide = _a.onHide, selectedLog = _a.selectedLog;
-    var classes = useStyles$g();
+    var classes = useStyles$h();
     return (React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
         React__default.createElement(Modal$2, __assign({}, { show: show }, { onHide: function () { return onHide(false); }, size: "lg", "aria-labelledby": "contained-modal-title-vcenter", centered: true }),
             React__default.createElement(Modal$2.Header, { closeButton: true, style: { padding: "10px 30px" } },
@@ -866,7 +867,7 @@ var SearchFilter = function (_a) {
         React__default.createElement(FormHelperText, { style: { marginBottom: 10, marginTop: -15 } }, "Search by Source, Message or User")));
 };
 
-var useStyles$f = makeStyles(function (theme) {
+var useStyles$g = makeStyles(function (theme) {
     return createStyles({
         root: {
             '& .MuiDataGrid-row': {
@@ -897,7 +898,7 @@ var useStyles$f = makeStyles(function (theme) {
 });
 var TableLogs = function () {
     var _a = useLogsContext(), _b = _a.state.searchData, Start = _b.Start, End = _b.End, Search = _b.Search, LogTypeCode = _b.LogTypeCode, _c = _a.actions, setStartFilter = _c.setStartFilter, setEndFilter = _c.setEndFilter, setSearchFilter = _c.setSearchFilter, setLogTypeCodeFilter = _c.setLogTypeCodeFilter, resetFilters = _c.resetFilters;
-    var classes = useStyles$f();
+    var classes = useStyles$g();
     var _d = useState(false), showLogModal = _d[0], setShowLogModal = _d[1];
     var _e = useState(true), loading = _e[0], setLoading = _e[1];
     var _f = useState(undefined), selectedLog = _f[0], setSelectedLog = _f[1];
@@ -1269,7 +1270,7 @@ var useHandleAsignedPermission = function (_a) {
     };
 };
 
-var useStyles$e = makeStyles(function (theme) {
+var useStyles$f = makeStyles(function (theme) {
     return createStyles({
         formControl: {
             margin: "0 12px",
@@ -1291,7 +1292,7 @@ var useStyles$e = makeStyles(function (theme) {
 var PermissionsPicker = function (_a) {
     var isLoading = _a.isLoading, setIsLoading = _a.setIsLoading, profileForDelete = _a.profileForDelete, value = _a.value, onChange = _a.onChange, profilesToProfiles = _a.profilesToProfiles;
     var profiles = useProfilesContext().state.profiles;
-    var classes = useStyles$e();
+    var classes = useStyles$f();
     var _b = useState([]), permissions = _b[0], setPermissions = _b[1];
     var _c = useState(value), asignedPermissions = _c[0], setAsignedPermissions = _c[1];
     var getColorByPermissionId = useGetColorByPermissionId({ profilesToProfiles: profilesToProfiles });
@@ -1367,7 +1368,7 @@ var useGetProfilesEffect = function (_a) {
     }, []);
 };
 
-var useStyles$d = makeStyles(function (theme) {
+var useStyles$e = makeStyles(function (theme) {
     return createStyles({
         formControl: {
             margin: "0 12px",
@@ -1388,7 +1389,7 @@ var useStyles$d = makeStyles(function (theme) {
 });
 var ProfilesPicker$1 = function (_a) {
     var isLoading = _a.isLoading, setIsLoading = _a.setIsLoading, profileForDelete = _a.profileForDelete, profileIdForEdit = _a.profileIdForEdit, value = _a.value, onChange = _a.onChange;
-    var classes = useStyles$d();
+    var classes = useStyles$e();
     var _b = useProfilesContext(), profiles = _b.state.profiles, setProfiles = _b.actions.setProfiles;
     var _c = useState([]), asignedProfiles = _c[0], setAsignedProfiles = _c[1];
     var handleAsignedProfile = function (event) {
@@ -1442,7 +1443,7 @@ var ProfilesPicker$1 = function (_a) {
                 })))))));
 };
 
-var useStyles$c = makeStyles(function (theme) {
+var useStyles$d = makeStyles(function (theme) {
     return createStyles({
         title: {
             fontSize: 15
@@ -1474,7 +1475,7 @@ var useStyles$c = makeStyles(function (theme) {
 var EditProfile = function (_a) {
     var _b;
     var profileForEdit = _a.profileForEdit, show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$c();
+    var classes = useStyles$d();
     var _c = useState(false), open = _c[0], setOpen = _c[1];
     var _d = useState(true), isLoading = _d[0], setIsLoading = _d[1];
     var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
@@ -1586,7 +1587,7 @@ var EditProfile = function (_a) {
             React.createElement(Alert, { severity: "info", onClose: handleClose }, "The profile was edited successfully"))));
 };
 
-var useStyles$b = makeStyles(function (theme) {
+var useStyles$c = makeStyles(function (theme) {
     return createStyles({
         title: {
             fontSize: 15
@@ -1613,7 +1614,7 @@ var CreateProfile = 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(true), isLoading = _e[0], setIsLoading = _e[1];
-    var classes = useStyles$b();
+    var classes = useStyles$c();
     var _f = useForm({ defaultValues: INITIAL_VALUES$2 }), register = _f.register, control = _f.control, handleSubmit = _f.handleSubmit, reset = _f.reset, errors = _f.formState.errors, watch = _f.watch;
     var profilesToProfiles = watch('HasProfilesId');
     var onSubmit = function (data) { return __awaiter(void 0, void 0, void 0, function () {
@@ -1696,7 +1697,7 @@ var CreateProfile = function (_a) {
             React.createElement(Alert, { severity: "success", onClose: handleClose }, "The permission was asigned successfully"))));
 };
 
-var useStyles$a = makeStyles(function (theme) {
+var useStyles$b = makeStyles(function (theme) {
     return createStyles({
         title: {
             fontSize: 15
@@ -1715,7 +1716,7 @@ var useStyles$a = makeStyles(function (theme) {
 });
 var DeleteProfile = function (_a) {
     var profileForDelete = _a.profileForDelete, show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$a();
+    var classes = useStyles$b();
     var _b = useState(false), open = _b[0], setOpen = _b[1];
     var _c = useState(true), isLoading = _c[0], setIsLoading = _c[1];
     var _d = useState(false), isSubmitLoading = _d[0], setIsSubmitLoading = _d[1];
@@ -1874,7 +1875,7 @@ var useTableData$2 = function (_a) {
     return { rows: rows, columns: columns };
 };
 
-var useStyles$9 = makeStyles(function (theme) {
+var useStyles$a = makeStyles(function (theme) {
     return createStyles({
         root: {
             '& .MuiDataGrid-row': {
@@ -1913,7 +1914,7 @@ var TableProfiles = function (_a) {
     var _d = useState(false), modalDeleteProfile = _d[0], setModalDeleteProfile = _d[1];
     var _e = useState(null), profileForEdit = _e[0], setProfileForEdit = _e[1];
     var _f = useState(null), profileForDelete = _f[0], setProfileForDelete = _f[1];
-    var classes = useStyles$9();
+    var classes = useStyles$a();
     var _g = useTableData$2({
         setModalDeleteProfile: setModalDeleteProfile,
         setModalEditPermissionsProfile: setModalEditPermissionsProfile,
@@ -2202,7 +2203,7 @@ var DeleteShiftParameters = function (PatternStart) { return __awaiter(void 0, v
     });
 }); };
 
-var useStyles$8 = makeStyles(function (theme) {
+var useStyles$9 = makeStyles(function (theme) {
     return createStyles({
         title: {
             fontSize: 15
@@ -2233,7 +2234,7 @@ var CreateShift = function (_a) {
     var _d = useState(false), open = _d[0], setOpen = _d[1];
     var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
     // const [isLoading, setIsLoading] = useState(true);
-    var classes = useStyles$8();
+    var classes = useStyles$9();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _f = useForm({ defaultValues: shiftTableData ? shiftTableData : INITIAL_VALUES$1 }); _f.register; var control = _f.control, handleSubmit = _f.handleSubmit, reset = _f.reset, watch = _f.watch, setValue = _f.setValue, errors = _f.formState.errors;
     // Progress bar
@@ -2415,7 +2416,7 @@ var CreateShift = function (_a) {
             React.createElement(Alert, { severity: "success", onClose: handleClose }, "The shift was created successfully"))));
 };
 
-var useStyles$7 = makeStyles(function (theme) {
+var useStyles$8 = makeStyles(function (theme) {
     return createStyles({
         title: {
             fontSize: 15
@@ -2446,7 +2447,7 @@ var DeleteShift = function (_a) {
     var _c = useState(false), open = _c[0], setOpen = _c[1];
     var _d = useState(false), isSubmitLoading = _d[0], setIsSubmitLoading = _d[1];
     var _e = useState(false), deleteAlert = _e[0], setDeleteAlert = _e[1];
-    var classes = useStyles$7();
+    var classes = useStyles$8();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _f = useForm({ defaultValues: INITIAL_VALUES$1 }), control = _f.control, setValue = _f.setValue, reset = _f.reset, watch = _f.watch, errors = _f.formState.errors;
     var onDelete = function (data) { return __awaiter(void 0, void 0, void 0, function () {
@@ -2585,7 +2586,7 @@ var DeleteShift = function (_a) {
             React.createElement(Alert, { severity: "warning", onClose: handleClose }, "The shift was deleted successfully"))));
 };
 
-var useStyles$6 = makeStyles(function (theme) {
+var useStyles$7 = makeStyles(function (theme) {
     return createStyles({
         title: {
             fontSize: 15
@@ -2616,7 +2617,7 @@ var EditShift = 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), initialShiftPerDayAndCrewsNumber = _e[0], setInitialShiftPerDayAndCrewsNumber = _e[1];
-    var classes = useStyles$6();
+    var classes = useStyles$7();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _f = useForm({ defaultValues: INITIAL_VALUES$1 }), control = _f.control, setValue = _f.setValue, handleSubmit = _f.handleSubmit, reset = _f.reset, watch = _f.watch, errors = _f.formState.errors;
     // Progress bar
@@ -2813,7 +2814,7 @@ var EditShift = function (_a) {
             React.createElement(Alert, { severity: "success", onClose: handleClose }, "The shift was created successfully"))));
 };
 
-var useStyles$5 = makeStyles(function (theme) {
+var useStyles$6 = makeStyles(function (theme) {
     return createStyles({
         root: {
             '& .MuiDataGrid-row': {
@@ -2840,7 +2841,7 @@ var useStyles$5 = makeStyles(function (theme) {
 });
 var TableShiftsCrews = function (_a) {
     var isLoading = _a.isLoading, getShiftsCrewsFromAPI = _a.getShiftsCrewsFromAPI;
-    var classes = useStyles$5();
+    var classes = useStyles$6();
     var _b = useState(false), modalNewActive = _b[0], setModalNewActive = _b[1];
     var _c = useState(false), modalEditShift = _c[0], setModalEditShift = _c[1];
     var _d = useState(false), modalDeleteShift = _d[0], setModalDeleteShift = _d[1];
@@ -3133,7 +3134,7 @@ var setProfilesToUser = function (UserId, profileIds) { return __awaiter(void 0,
     });
 }); };
 
-var useStyles$4 = makeStyles(function (theme) {
+var useStyles$5 = makeStyles(function (theme) {
     return createStyles({
         root: {
             "& .MuiSelect-select": {
@@ -3175,7 +3176,7 @@ var MenuProps = {
 };
 var ProfilesPicker = function (_a) {
     var value = _a.value, onChange = _a.onChange, userIdForDelete = _a.userIdForDelete;
-    var classes = useStyles$4();
+    var classes = useStyles$5();
     var theme = useTheme();
     var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
     var _c = useState([]), profiles = _c[0], setProfiles = _c[1];
@@ -3220,7 +3221,7 @@ var INITIAL_VALUES = {
     Profiles: []
 };
 
-var useStyles$3 = makeStyles(function (theme) {
+var useStyles$4 = makeStyles(function (theme) {
     return createStyles({
         checkbox: {
             userSelect: "none"
@@ -3242,7 +3243,7 @@ var CreateUser = function (_a) {
     var show = _a.show, onHide = _a.onHide, getUsersFromAPI = _a.getUsersFromAPI;
     var _e = useState(false), open = _e[0], setOpen = _e[1];
     var _f = useState(false), isSubmitLoading = _f[0], setIsSubmitLoading = _f[1];
-    var classes = useStyles$3();
+    var classes = useStyles$4();
     var _g = useForm({ defaultValues: INITIAL_VALUES }), register = _g.register, control = _g.control, handleSubmit = _g.handleSubmit, reset = _g.reset, watch = _g.watch, errors = _g.formState.errors;
     var handleClose = function (event, reason) {
         if (reason === 'clickaway') {
@@ -3335,7 +3336,7 @@ var CreateUser = function (_a) {
             React.createElement(Alert, { severity: "success", onClose: handleClose }, "The user was created successfully"))));
 };
 
-var useStyles$2 = makeStyles(function (theme) {
+var useStyles$3 = makeStyles(function (theme) {
     return createStyles({
         checkbox: {
             userSelect: "none"
@@ -3356,7 +3357,7 @@ var useStyles$2 = makeStyles(function (theme) {
 var EditUser = function (_a) {
     var _b, _c, _d;
     var userIdForEdit = _a.userIdForEdit, show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$2();
+    var classes = useStyles$3();
     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];
@@ -3475,7 +3476,7 @@ var EditUser = function (_a) {
             React.createElement(Alert, { severity: "info", onClose: handleClose }, "The user was edited successfully"))));
 };
 
-var useStyles$1 = makeStyles(function (theme) {
+var useStyles$2 = makeStyles(function (theme) {
     return createStyles({
         title: {
             fontSize: 15
@@ -3484,7 +3485,7 @@ var useStyles$1 = makeStyles(function (theme) {
 });
 var DeleteUser = function (_a) {
     var userIdForDelete = _a.userIdForDelete, show = _a.show, onHide = _a.onHide;
-    useStyles$1();
+    useStyles$2();
     var _b = useState(false), open = _b[0], setOpen = _b[1];
     var _c = useState(false), isLoading = _c[0], setIsLoading = _c[1];
     var _d = useState(false), isSubmitLoading = _d[0], setIsSubmitLoading = _d[1];
@@ -3772,7 +3773,7 @@ var ChangePassword$1 = function (_a) {
     }
 };
 
-var useStyles = makeStyles(function (theme) {
+var useStyles$1 = makeStyles(function (theme) {
     return createStyles({
         root: {
             '& .MuiDataGrid-row': {
@@ -3813,7 +3814,7 @@ var TableUsers = function (_a) {
     var _c = useState(false), modalEditDataUser = _c[0], setModalEditDataUser = _c[1];
     var _d = useState(false), modalDeleteUser = _d[0], setModalDeleteUser = _d[1];
     var _e = useState(false), modalChangePassword = _e[0], setModalChangePassword = _e[1];
-    var classes = useStyles();
+    var classes = useStyles$1();
     var _f = useState(null), userIdForEdit = _f[0], setUserIdForEdit = _f[1];
     var _g = useState(null), userIdForDelete = _g[0], setUserIdForDelete = _g[1];
     var _h = useState(null), userForPasswordChange = _h[0], setUserForPasswordChange = _h[1];
@@ -5086,61 +5087,127 @@ var LongFilterPanel = /** @class */ (function (_super) {
     return LongFilterPanel;
 }(Component));
 
-function useToken() {
-    var getToken = function () {
-        var tokenString = localStorage.getItem('userMESData');
-        var userToken = JSON.parse(tokenString);
-        return userToken === null || userToken === void 0 ? void 0 : userToken.token;
-    };
-    var _a = useState(getToken()), token = _a[0], setToken = _a[1];
-    // TODO: userToken typings
-    var saveToken = function (userToken) {
-        localStorage.setItem('userMESData', JSON.stringify(userToken));
-        setToken(userToken.token);
-    };
-    var clearUserData = function () {
-        localStorage.removeItem('userMESData');
-        setToken(undefined);
-    };
-    var getUserName = function () {
-        var sessionData = localStorage.getItem('userMESData');
-        var userData = JSON.parse(sessionData);
-        return ((userData || {}).lastName || '') + ', ' + ((userData || {}).firstName || '');
-    };
-    var getFirstName = function () {
-        var sessionData = localStorage.getItem('userMESData');
-        var userData = JSON.parse(sessionData);
-        return ((userData || {}).firstName || '');
-    };
-    var getLastName = function () {
-        var sessionData = localStorage.getItem('userMESData');
-        var userData = JSON.parse(sessionData);
-        return ((userData || {}).lastName || '');
-    };
-    var getUserId = function () {
-        var sessionData = localStorage.getItem('userMESData');
-        var userData = JSON.parse(sessionData);
-        return ((userData || {}).id || (-1));
-    };
-    var hasPermission = function (permissionId) {
-        var sessionData = localStorage.getItem('userMESData');
-        if (sessionData === undefined)
-            return false;
-        var userData = JSON.parse(sessionData);
-        var permissions = userData.permissions || [];
-        return permissions.indexOf(permissionId) > -1; //case sensitve
-    };
-    return {
-        getUserName: getUserName,
-        setToken: saveToken,
-        clearToken: clearUserData,
-        getFirstName: getFirstName,
-        getLastName: getLastName,
-        getUserId: getUserId,
-        hasPermission: hasPermission,
-        token: token
-    };
-}
+var getUser = function (UserId, UserName) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp, e_1;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "UserId", value: UserId });
+                parameters.push({ name: "UserName", value: UserName });
+                _a.label = 1;
+            case 1:
+                _a.trys.push([1, 3, , 4]);
+                return [4 /*yield*/, apiService.call("[SEC].[GetUser]", parameters)];
+            case 2:
+                resp = _a.sent();
+                return [2 /*return*/, {
+                        ok: true,
+                        data: resp
+                    }];
+            case 3:
+                e_1 = _a.sent();
+                return [2 /*return*/, { ok: false, message: e_1.toString() }];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
+var getUTLSettings = function () { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, resp, e_2;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                _a.label = 1;
+            case 1:
+                _a.trys.push([1, 3, , 4]);
+                return [4 /*yield*/, apiService.call("[MMS].[GetUTLSettings]", [])];
+            case 2:
+                resp = _a.sent();
+                return [2 /*return*/, {
+                        ok: true,
+                        data: resp
+                    }];
+            case 3:
+                e_2 = _a.sent();
+                return [2 /*return*/, { ok: false, message: e_2.toString() }];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
+var upsertDefaultAreaId = function (UserId, DefaultAreaId) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp, e_3;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "UserId", value: UserId });
+                parameters.push({ name: "DefaultAreaId", value: DefaultAreaId });
+                _a.label = 1;
+            case 1:
+                _a.trys.push([1, 3, , 4]);
+                return [4 /*yield*/, apiService.call("[MES].[UpsertDefaultAreaId]", parameters)];
+            case 2:
+                resp = _a.sent();
+                return [2 /*return*/, {
+                        ok: true,
+                        data: resp
+                    }];
+            case 3:
+                e_3 = _a.sent();
+                return [2 /*return*/, { ok: false, message: e_3.toString() }];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
+var getAssets = function () { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, resp, e_4;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                _a.label = 1;
+            case 1:
+                _a.trys.push([1, 3, , 4]);
+                return [4 /*yield*/, apiService.call("[MMS].[GetAssets]", [])];
+            case 2:
+                resp = _a.sent();
+                return [2 /*return*/, {
+                        ok: true,
+                        data: resp
+                    }];
+            case 3:
+                e_4 = _a.sent();
+                return [2 /*return*/, { ok: false, message: e_4.toString() }];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
+var GetAssetsExtension = function () { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, resp, e_5;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                _a.label = 1;
+            case 1:
+                _a.trys.push([1, 3, , 4]);
+                return [4 /*yield*/, apiService.call("[MMS].[GetAssetsExtension]", [])];
+            case 2:
+                resp = _a.sent();
+                return [2 /*return*/, {
+                        ok: true,
+                        data: resp
+                    }];
+            case 3:
+                e_5 = _a.sent();
+                return [2 /*return*/, { ok: false, message: e_5.toString() }];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
 
 function ChangePassword(props) {
     var onClose = props.onClose, userId = props.userId, open = props.open;
@@ -5200,23 +5267,80 @@ function ChangePassword(props) {
             React__default.createElement(Button, { onClick: handleOk, color: "primary", disabled: !canChange }, "Change Password"))));
 }
 
-function Account() {
+function useToken() {
+    var getToken = function () {
+        var tokenString = localStorage.getItem('userMESData');
+        var userToken = JSON.parse(tokenString);
+        return userToken === null || userToken === void 0 ? void 0 : userToken.token;
+    };
+    var _a = useState(getToken()), token = _a[0], setToken = _a[1];
+    // TODO: userToken typings
+    var saveToken = function (userToken) {
+        localStorage.setItem('userMESData', JSON.stringify(userToken));
+        setToken(userToken.token);
+    };
+    var clearUserData = function () {
+        localStorage.removeItem('userMESData');
+        setToken(undefined);
+    };
+    var getUserName = function () {
+        var sessionData = localStorage.getItem('userMESData');
+        var userData = JSON.parse(sessionData);
+        return ((userData || {}).lastName || '') + ', ' + ((userData || {}).firstName || '');
+    };
+    var getFirstName = function () {
+        var sessionData = localStorage.getItem('userMESData');
+        var userData = JSON.parse(sessionData);
+        return ((userData || {}).firstName || '');
+    };
+    var getLastName = function () {
+        var sessionData = localStorage.getItem('userMESData');
+        var userData = JSON.parse(sessionData);
+        return ((userData || {}).lastName || '');
+    };
+    var getUserId = function () {
+        var sessionData = localStorage.getItem('userMESData');
+        var userData = JSON.parse(sessionData);
+        return ((userData || {}).id || (-1));
+    };
+    var hasPermission = function (permissionId) {
+        var sessionData = localStorage.getItem('userMESData');
+        if (sessionData === undefined)
+            return false;
+        var userData = JSON.parse(sessionData);
+        var permissions = userData.permissions || [];
+        return permissions.indexOf(permissionId) > -1; //case sensitve
+    };
+    return {
+        getUserName: getUserName,
+        setToken: saveToken,
+        clearToken: clearUserData,
+        getFirstName: getFirstName,
+        getLastName: getLastName,
+        getUserId: getUserId,
+        hasPermission: hasPermission,
+        token: token
+    };
+}
+
+var Account = function () {
     var _a = useToken(), getUserName = _a.getUserName, getUserId = _a.getUserId;
-    var _b = React__default.useState(false), showError = _b[0], setShowError = _b[1];
-    var _c = React__default.useState(undefined), error = _c[0], setError = _c[1];
-    var _d = React__default.useState(""), userLastName = _d[0], setUserLastName = _d[1];
-    var _e = React__default.useState(""), userFirstName = _e[0], setUserFirstName = _e[1];
-    var userId = React__default.useState(getUserId)[0];
-    var userParam = React__default.useState(getUserName)[0];
-    var _f = React__default.useState(''), userName = _f[0], setUserName = _f[1];
-    var _g = React__default.useState(false), userIsDomain = _g[0], setUserIsDomain = _g[1];
-    var _h = React__default.useState(false), userIsActive = _h[0], setUserIsActive = _h[1];
-    var _j = React__default.useState(''), userProfiles = _j[0], setUserProfiles = _j[1];
-    var _k = React__default.useState(''), userPermissions = _k[0], setUserPermissions = _k[1];
-    var _l = React__default.useState(''), userProcedures = _l[0], setUserProcedures = _l[1];
-    var _m = React__default.useState(false), open = _m[0], setOpen = _m[1];
-    var _o = React__default.useState(false), showSuccess = _o[0], setShowSuccess = _o[1];
-    var _p = React__default.useState(''), successMessage = _p[0], setSuccessMessage = _p[1];
+    var _b = useState(false), showError = _b[0]; _b[1];
+    var _c = useState(undefined), error = _c[0]; _c[1];
+    // FIXME: refactor, pasar todo esto y el load data al reducer
+    var _d = useState(""), userLastName = _d[0], setUserLastName = _d[1];
+    var _e = useState(""), userFirstName = _e[0], setUserFirstName = _e[1];
+    var userId = useState(getUserId)[0];
+    var userParam = useState(getUserName)[0];
+    var _f = useState(''), userName = _f[0], setUserName = _f[1];
+    var _g = useState(false), userIsDomain = _g[0], setUserIsDomain = _g[1];
+    var _h = useState(false), userIsActive = _h[0], setUserIsActive = _h[1];
+    var _j = useState(''), userProfiles = _j[0], setUserProfiles = _j[1];
+    var _k = useState(''), userPermissions = _k[0], setUserPermissions = _k[1];
+    var _l = useState(''), userProcedures = _l[0], setUserProcedures = _l[1];
+    var _m = useState(false), open = _m[0], setOpen = _m[1];
+    var _o = useState(false), showSuccess = _o[0], setShowSuccess = _o[1];
+    var _p = useState(''), successMessage = _p[0], setSuccessMessage = _p[1];
     var changePassword = function () {
         setOpen(true);
     };
@@ -5233,26 +5357,18 @@ function Account() {
         return s;
     };
     var loadUserData = function () {
-        var apiService = new MESApiService();
-        var parameters = [];
-        parameters.push({ name: "@UserId", value: userId });
-        parameters.push({ name: "@UserName", value: userParam });
-        apiService.call('SEC.GetUser', parameters)
-            .then(function (response) {
-            if (apiService.hasErrors) {
-                setShowError(true);
-                setError(apiService.error);
-            }
-            if (response !== undefined && response.tables !== undefined && response.tables[0] !== undefined) {
-                var userData = response.tables[0].rows[0];
-                setUserName(userData.UserName);
-                setUserLastName(userData.LastName);
-                setUserFirstName(userData.FirstName);
-                setUserIsDomain(userData.IsDomainUser);
-                setUserIsActive(userData.IsActive);
-                setUserProfiles(stringToList((userData.Profiles || '')));
-                setUserProcedures(stringToList((userData.Procedures || '')));
-                setUserPermissions(stringToList((userData.Permissions || '')));
+        getUser(userId, userParam)
+            .then(function (res) {
+            if (res) {
+                var userData = get$1(res, "data.tables[0].rows", null);
+                setUserName(userData[0].UserName);
+                setUserLastName(userData[0].LastName);
+                setUserFirstName(userData[0].FirstName);
+                setUserIsDomain(userData[0].IsDomainUser);
+                setUserIsActive(userData[0].IsActive);
+                setUserProfiles(stringToList((userData[0].Profiles || '')));
+                setUserProcedures(stringToList((userData[0].Procedures || '')));
+                setUserPermissions(stringToList((userData[0].Permissions || '')));
             }
         });
     };
@@ -5262,8 +5378,8 @@ function Account() {
             setSuccessMessage('');
         }, 2000);
     };
-    React__default.useEffect(loadUserData, []);
-    React__default.useEffect(function () {
+    useEffect(loadUserData, []);
+    useEffect(function () {
         if (showSuccess === true) {
             closeMessage();
         }
@@ -5299,7 +5415,7 @@ function Account() {
             React__default.createElement("div", { className: "col-md-4" },
                 React__default.createElement(Typography$1, { gutterBottom: true, variant: "h5", component: "h2", className: "pt-1" }, "Procedures"),
                 React__default.createElement("textarea", { className: "form-control", placeholder: userProcedures, readOnly: true, style: { "height": "50vh" } })))));
-}
+};
 
 var AuthContext = React__default.createContext({});
 var AuthProvider = function (_a) {
@@ -5578,15 +5694,17 @@ var ConfigurationContext = React__default.createContext([
 ]);
 var NavbarContext = React__default.createContext(function () { return React__default.createElement(React__default.Fragment, null); });
 
-function Header() {
+var AreaSelector$1 = lazy(function () { return Promise.resolve().then(function () { return areaSelector; }).then(function (mod) { return ({ "default": mod.AreaSelector }); }); });
+function Header(_a) {
+    var _b = _a.showAreaSelector, showAreaSelector = _b === void 0 ? false : _b;
     var getUserName = useToken().getUserName;
-    var _a = React__default.useState(new Date()), date = _a[0], setDate = _a[1];
-    var userName = React__default.useState(getUserName())[0];
+    var _c = useState(new Date()), date = _c[0], setDate = _c[1];
     var CustomNavbar = useContext(NavbarContext);
+    var userName = useState(getUserName())[0];
     var tick = function () {
         setDate(new Date());
     };
-    React__default.useEffect(function () {
+    useEffect(function () {
         var timerID = setTimeout(function () {
             tick();
         }, 1000);
@@ -5602,14 +5720,16 @@ function Header() {
                 React__default.createElement(Nav, { className: "me-auto" },
                     React__default.createElement(Nav.Link, { as: Link, to: "/" }, "Home"),
                     React__default.createElement(CustomNavbar, null)),
-                React__default.createElement(Nav, { className: "ml-auto" },
+                React__default.createElement(Nav, { className: "ml-auto", style: { alignItems: 'baseline' } },
                     React__default.createElement(Nav, null,
                         React__default.createElement("span", { className: "navbar-text" }, date.toLocaleTimeString())),
                     React__default.createElement(Nav, { className: "mx-2" },
                         React__default.createElement(Nav.Link, { as: Link, to: "/configuration" },
                             React__default.createElement("i", { className: "fas fa-cog" }))),
+                    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,
-                            React__default.createElement("i", { className: "fas fa-user mx-2" }),
+                            React__default.createElement("i", { className: "fas fa-user", style: { marginRight: 6 } }),
                             userName), className: "mx-2" },
                         React__default.createElement(NavDropdown.Item, { href: "account" }, "Account"),
                         React__default.createElement(NavDropdown.Item, { href: "logout" }, "Logout")))))));
@@ -5700,8 +5820,9 @@ var MESFMainRouter = function () {
 var MESFMainContainer = function () { return (React__default.createElement("div", { id: "mainSection", className: "container-fluid container-fluid-main" },
     React__default.createElement(MESFMainRouter, null))); };
 
-var Navigation = function () {
-    var _a = useSearchParams(), params = _a[0]; _a[1];
+var Navigation = function (_a) {
+    var _b = _a.showAreaSelector, showAreaSelector = _b === void 0 ? false : _b;
+    var _c = useSearchParams(), params = _c[0]; _c[1];
     var mounted = useRef(true);
     useEffect(function () {
         mounted.current = true;
@@ -5717,23 +5838,233 @@ var Navigation = function () {
         };
     }, [params.toString()]);
     return (React__default.createElement("div", { className: "wrapper" },
-        React__default.createElement(Header, null),
+        React__default.createElement(Header, { showAreaSelector: showAreaSelector }),
         React__default.createElement(MESFMainContainer, null)));
 };
 
+var UserInitialState = {
+    userLastName: "",
+    userId: null,
+    defaultAreaId: null,
+    listAllAssets: [],
+    listAllAssetsExtensions: [],
+    areasList: []
+};
+var UserReducer = createSlice({
+    name: "__",
+    initialState: UserInitialState,
+    reducers: {
+        setUserId: function (state, _a) {
+            var payload = _a.payload;
+            state.userId = payload;
+        },
+        setUserLastName: function (state, _a) {
+            var payload = _a.payload;
+            state.userLastName = payload;
+        },
+        setDefaultAreaId: function (state, _a) {
+            var payload = _a.payload;
+            state.defaultAreaId = payload;
+        },
+        setListAllAssets: function (state, _a) {
+            var payload = _a.payload;
+            state.listAllAssets = payload;
+        },
+        setListAllAssetsExtensions: function (state, _a) {
+            var payload = _a.payload;
+            state.listAllAssetsExtensions = payload;
+        },
+        setAreasList: function (state, _a) {
+            var payload = _a.payload;
+            state.areasList = payload;
+        }
+    }
+});
+
+var UserContext = createContext({
+    state: UserReducer.getInitialState(),
+    actions: UserReducer.actions
+});
+var useUserContext = function () { return useContext(UserContext); };
+var UserProvider = function (_a) {
+    var children = _a.children;
+    var _b = useComplexState({
+        initialState: UserReducer.getInitialState(),
+        reducers: UserReducer.caseReducers
+    }), state = _b[0], actions = _b[1];
+    return (React__default.createElement(UserContext.Provider, { value: { state: state, actions: actions } }, children));
+};
+
 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}\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  ";
 n(css,{});
 
 var base = document.getElementsByTagName('base')[0].getAttribute('href') || '/';
-function MESFMain(props) {
-    return (React__default.createElement(AuthProvider, { authConfig: props.authentication },
-        React__default.createElement(RouterContext.Provider, { value: props.routes },
-            React__default.createElement(NavbarContext.Provider, { value: props.navbar },
-                React__default.createElement(ConfigurationContext.Provider, { value: props.configurations },
-                    React__default.createElement(BrowserRouter, { basename: base },
-                        React__default.createElement(Routes, null,
-                            React__default.createElement(Route, { path: "/logout", element: React__default.createElement(Logout, null) })),
-                        React__default.createElement(Navigation, null)))))));
+function MESFMain(_a) {
+    var authentication = _a.authentication, routes = _a.routes, navbar = _a.navbar, configurations = _a.configurations, _b = _a.showAreaSelector, showAreaSelector = _b === void 0 ? false : _b;
+    return (React__default.createElement(AuthProvider, { authConfig: authentication },
+        React__default.createElement(UserProvider, null,
+            React__default.createElement(RouterContext.Provider, { value: routes },
+                React__default.createElement(NavbarContext.Provider, { value: navbar },
+                    React__default.createElement(ConfigurationContext.Provider, { value: configurations },
+                        React__default.createElement(BrowserRouter, { basename: base },
+                            React__default.createElement(Routes, null,
+                                React__default.createElement(Route, { path: "/logout", element: React__default.createElement(Logout, null) })),
+                            React__default.createElement(Navigation, { showAreaSelector: showAreaSelector }))))))));
 }
 
-export { Account, AuthContext, AuthProvider, BarChartControl, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HorizontalTextControl, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, NumericTextControl, SimplePasswordControl, SimpleSelectorControl, SimpleTextAreaControl, SimpleTextControl, TimeFormatter, TreePickerControl, USER_LABELS, UploadFileControl, formatNumber, getCrewStyle, getShiftStyle, useToken };
+var useSearchAssets = function () {
+    var _a = useUserContext().actions, setListAllAssets = _a.setListAllAssets, setListAllAssetsExtensions = _a.setListAllAssetsExtensions;
+    var searchAssets = function () {
+        getAssets().then(function (res) {
+            if (res) {
+                var rowsSource = get(res, "data.tables[0].rows", []);
+                setListAllAssets(rowsSource);
+            }
+        });
+    };
+    var searchAssetExtension = function () {
+        GetAssetsExtension().then(function (res) {
+            if (res) {
+                var rowsSource = get(res, "data.tables[0].rows", []);
+                setListAllAssetsExtensions(rowsSource);
+            }
+        });
+    };
+    return {
+        searchAssets: searchAssets,
+        searchAssetExtension: searchAssetExtension
+    };
+};
+
+var useDefaultAreaId = function () {
+    var _a = useUserContext(), userId = _a.state.userId, setDefaultAreaId = _a.actions.setDefaultAreaId;
+    return function () {
+        if (userId) {
+            getUser(userId, null)
+                .then(function (res) {
+                if (res) {
+                    var userDefaultAreaId = get$1(res, "data.tables[0].rows[0].DefaultAreaId", null);
+                    if (userDefaultAreaId) {
+                        setDefaultAreaId((userDefaultAreaId));
+                    }
+                    else {
+                        getUTLSettings().then(function (areaIdFromUTL) {
+                            var areaId = get$1(areaIdFromUTL, "data.tables[0].rows[2].Value", null);
+                            setDefaultAreaId(parseInt(areaId));
+                        })["catch"](function () {
+                            setDefaultAreaId(1);
+                        });
+                    }
+                }
+            });
+        }
+    };
+};
+
+var useStyles = makeStyles$1(function (theme) {
+    return createStyles$1({
+        root: {
+            "& .MuiInputBase-input": {
+                color: "#000 !important"
+            },
+            "& .MuiPaper-root": {
+                height: "80vh"
+            }
+        },
+        title: {
+            fontSize: 15
+        }
+    });
+});
+var AreaSelector = function () {
+    var _a;
+    var _b = useState(false), open = _b[0], setOpen = _b[1];
+    var _c = useState(false); _c[0]; _c[1];
+    var _d = useState(''); _d[0]; _d[1];
+    var _e = useSearchAssets(), searchAssets = _e.searchAssets, searchAssetExtension = _e.searchAssetExtension;
+    var _f = useToken(); _f.getUserName; var getUserId = _f.getUserId;
+    var _g = useUserContext(), _h = _g.state, userId = _h.userId, listAllAssetsExtensions = _h.listAllAssetsExtensions, defaultAreaId = _h.defaultAreaId, listAllAssets = _h.listAllAssets, areasList = _h.areasList, _j = _g.actions, setDefaultAreaId = _j.setDefaultAreaId, setUserId = _j.setUserId, setAreasList = _j.setAreasList;
+    var _k = React__default.useState(true), fullWidth = _k[0]; _k[1];
+    var _l = React__default.useState('sm'), maxWidth = _l[0]; _l[1];
+    var classes = useStyles();
+    var _m = useState(defaultAreaId), defaultAreaIdToChange = _m[0], setDefaultAreaIdToChange = _m[1];
+    var onClose = function (value) { return setOpen(value); };
+    var changeAreaActive = function () {
+        setOpen(true);
+    };
+    useEffect(searchAssets, []);
+    useEffect(searchAssetExtension, []);
+    useEffect(function () {
+        var allAreas = listAllAssetsExtensions.filter(function (area) { return area.IsArea == true; });
+        setAreasList(allAreas);
+    }, [listAllAssetsExtensions]);
+    var defaultAreaIdFromAPI = useDefaultAreaId();
+    useEffect(function () {
+        setUserId(getUserId());
+    }, []);
+    useEffect(function () {
+        defaultAreaIdFromAPI();
+    }, [userId]);
+    var handleCancel = function () {
+        onClose(false);
+        setDefaultAreaIdToChange(defaultAreaId);
+    };
+    var handleClose = function () {
+        setOpen(false);
+        setDefaultAreaIdToChange(defaultAreaId);
+    };
+    var getAreaNameById = function (areaId) {
+        var _a;
+        return (_a = listAllAssets.find(function (a) { return a.AssetId === areaId; })) === null || _a === void 0 ? void 0 : _a.AssetName;
+    };
+    var handleChangeAreaId = function (area) {
+        setDefaultAreaIdToChange(area);
+    };
+    var handleChangeDefaultAreaId = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, upsertDefaultAreaId(userId, defaultAreaIdToChange)];
+                case 1:
+                    _a.sent();
+                    setDefaultAreaId(defaultAreaIdToChange);
+                    localStorage.setItem("areaId", defaultAreaIdToChange);
+                    setOpen(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Nav, { className: "mx-2" },
+            React__default.createElement(Nav.Link, null,
+                React__default.createElement("div", { style: {
+                        paddingLeft: 0, color: "#FFF", cursor: "pointer",
+                        "maxWidth": "100px", "fontSize": ".8rem", "overflow": "hidden",
+                        "textOverflow": "ellipsis", "whiteSpace": "nowrap"
+                    }, onClick: changeAreaActive },
+                    React__default.createElement(PersonPinCircleIcon, { style: { marginLeft: "-5px" } }),
+                    ((_a = getAreaNameById(defaultAreaId)) === null || _a === void 0 ? void 0 : _a.slice(10, 0)) + "..." || "Pick Area"))),
+        React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, onClose: handleClose, "aria-labelledby": "confirmation-dialog-title", open: open, className: classes.root },
+            React__default.createElement(DialogTitle$2, { id: "confirmation-dialog-title" }, "AREA"),
+            React__default.createElement(DialogContent$2, { dividers: true },
+                React__default.createElement("h6", { className: classes.title, id: "contained-modal-title-vcenter", style: { marginBottom: 0 } }, "Current Area"),
+                React__default.createElement(Grid$1, { container: true },
+                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { marginTop: 5 } },
+                        React__default.createElement(TextField$1, { variant: "outlined", disabled: true, value: getAreaNameById(defaultAreaIdToChange), fullWidth: true, margin: "dense", autoComplete: 'off', style: { color: "#000 !important" } }),
+                        React__default.createElement("h6", { className: classes.title, id: "contained-modal-title-vcenter", style: { marginBottom: 0, marginTop: 5 } }, "Change Default Area"),
+                        React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { marginTop: 10 } },
+                            React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { height: "45vh", border: "1px solid rgba(0, 0, 0, 0.26)", borderRadius: "2px", overflowY: "scroll" } },
+                                React__default.createElement(List, { dense: true, style: { padding: 0 } }, areasList.map(function (area) {
+                                    return (React__default.createElement(ListItem, { button: true, key: "Area-".concat(area.AssetId), onClick: function () { return handleChangeAreaId(area.AssetId); }, style: { cursor: "pointer", width: "100%" } },
+                                        React__default.createElement(ListItemText, { primary: getAreaNameById(area.AssetId) })));
+                                }))))))),
+            React__default.createElement(DialogActions$2, null,
+                React__default.createElement(Button, { autoFocus: true, onClick: handleCancel, color: "primary" }, "Cancel"),
+                React__default.createElement(Button, { variant: "contained", onClick: handleChangeDefaultAreaId, color: "primary" }, "Change Area")))));
+};
+
+var areaSelector = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AreaSelector: AreaSelector
+});
+
+export { Account, AuthContext, AuthProvider, BarChartControl, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HorizontalTextControl, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, NumericTextControl, SimplePasswordControl, SimpleSelectorControl, SimpleTextAreaControl, SimpleTextControl, TimeFormatter, TreePickerControl, USER_LABELS, UploadFileControl, UserProvider, formatNumber, getCrewStyle, getShiftStyle, useToken, useUserContext };