@dexteel/mesf-core 2.1.8

package/dist/index.cjs.js

@@ -0,0 +1,3268 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var moment = require('moment');
+var React = require('react');
+var core = require('@material-ui/core');
+var reactBootstrap = require('react-bootstrap');
+var PropTypes = require('prop-types');
+var bar = require('@nivo/bar');
+var styles = require('@material-ui/core/styles');
+var DatePicker = require('react-datepicker');
+var Button = require('@material-ui/core/Button');
+var DialogTitle = require('@material-ui/core/DialogTitle');
+var DialogContent = require('@material-ui/core/DialogContent');
+var DialogActions = require('@material-ui/core/DialogActions');
+var Dialog = require('@material-ui/core/Dialog');
+var TreeView = require('@material-ui/lab/TreeView');
+var SvgIcon = require('@material-ui/core/SvgIcon');
+var TreeItem = require('@material-ui/lab/TreeItem');
+var Collapse = require('@material-ui/core/Collapse');
+var Code = require('@material-ui/icons/Code');
+var Folder = require('@material-ui/icons/Folder');
+var reactSpring = require('react-spring');
+var Select = require('@material-ui/core/Select');
+var MenuItem = require('@material-ui/core/MenuItem');
+var dataGrid = require('@material-ui/data-grid');
+var Card = require('@material-ui/core/Card');
+var CardActions = require('@material-ui/core/CardActions');
+var CardContent = require('@material-ui/core/CardContent');
+var Typography = require('@material-ui/core/Typography');
+var lodashEs = require('lodash-es');
+var msalReact = require('@azure/msal-react');
+var msalBrowser = require('@azure/msal-browser');
+var reactRouterDom = require('react-router-dom');
+var MenuList = require('@material-ui/core/MenuList');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var DatePicker__default = /*#__PURE__*/_interopDefaultLegacy(DatePicker);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var DialogTitle__default = /*#__PURE__*/_interopDefaultLegacy(DialogTitle);
+var DialogContent__default = /*#__PURE__*/_interopDefaultLegacy(DialogContent);
+var DialogActions__default = /*#__PURE__*/_interopDefaultLegacy(DialogActions);
+var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
+var TreeView__default = /*#__PURE__*/_interopDefaultLegacy(TreeView);
+var SvgIcon__default = /*#__PURE__*/_interopDefaultLegacy(SvgIcon);
+var TreeItem__default = /*#__PURE__*/_interopDefaultLegacy(TreeItem);
+var Collapse__default = /*#__PURE__*/_interopDefaultLegacy(Collapse);
+var Code__default = /*#__PURE__*/_interopDefaultLegacy(Code);
+var Folder__default = /*#__PURE__*/_interopDefaultLegacy(Folder);
+var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
+var MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(MenuItem);
+var Card__default = /*#__PURE__*/_interopDefaultLegacy(Card);
+var CardActions__default = /*#__PURE__*/_interopDefaultLegacy(CardActions);
+var CardContent__default = /*#__PURE__*/_interopDefaultLegacy(CardContent);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+var MenuList__default = /*#__PURE__*/_interopDefaultLegacy(MenuList);
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+var MESSAGE_API = {
+    ERROR_MESSAGE: 'There was an error to connect to server.',
+    ERROR_EMPTY_SEARCH: "Empty rows"
+};
+var MESSAGE_ERRORS = {
+    ERROR_TITLE: 'There was an error',
+    ERROR_EMPTY_SEARCH: "Empty rows",
+    ERROR_USER_API: "Error on fetching data",
+    ERROR_USER_DEFAULT: "Unknow error",
+    ERROR_SAVE_DATA: "Error on saving data",
+    SUCCESS_SAVE_DATA: "Data was saved successfully"
+};
+var USER_LABELS = {
+    CHOOSE_OPTION: 'Choose an option'
+};
+var FetchError = /** @class */ (function (_super) {
+    __extends(FetchError, _super);
+    function FetchError(message, status, internalError) {
+        var _this = _super.call(this, message) || this;
+        _this.getMessageUser = function () {
+            if (_this.name === 'FetchError')
+                return MESSAGE_ERRORS.ERROR_USER_API;
+            return MESSAGE_ERRORS.ERROR_USER_DEFAULT;
+        };
+        _this.name = 'FetchError';
+        _this.message = message || 'Error al procesar la solicitud';
+        _this.status = status;
+        _this.internalError = internalError;
+        _this.stack = _this.stack || '';
+        return _this;
+    }
+    return FetchError;
+}(Error));
+
+var BarChartControl = function (props) {
+    var height = props.height, minWidth = props.minWidth, data = props.data, keys = props.keys, indexBy = props.indexBy, legendX = props.legendX, legendY = props.legendY, colors = props.colors, other = __rest(props, ["height", "minWidth", "data", "keys", "indexBy", "legendX", "legendY", "colors"]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", { className: "container-fluid my-2 p-2", style: { "height": height, "minWidth": minWidth } },
+            React__default["default"].createElement(bar.ResponsiveBar, __assign({ data: data, keys: keys, indexBy: indexBy, margin: { top: 50, right: 130, bottom: 50, left: 60 }, padding: 0.3, valueScale: { type: 'linear' }, indexScale: { type: 'band', round: true }, colors: colors === undefined ? { scheme: 'nivo' } : colors, defs: [
+                    {
+                        id: 'dots',
+                        type: 'patternDots',
+                        background: 'inherit',
+                        color: '#38bcb2',
+                        size: 4,
+                        padding: 1,
+                        stagger: true
+                    },
+                    {
+                        id: 'lines',
+                        type: 'patternLines',
+                        background: 'inherit',
+                        color: '#eed312',
+                        rotation: -45,
+                        lineWidth: 6,
+                        spacing: 10
+                    }
+                ], fill: [
+                    {
+                        match: {
+                            id: 'fries'
+                        },
+                        id: 'dots'
+                    },
+                    {
+                        match: {
+                            id: 'sandwich'
+                        },
+                        id: 'lines'
+                    }
+                ], borderColor: { from: 'color', modifiers: [['darker', 1.6]] }, axisTop: null, axisRight: null, axisBottom: {
+                    tickSize: 5,
+                    tickPadding: 5,
+                    tickRotation: 0,
+                    legend: (legendX === undefined ? '' : legendX),
+                    legendPosition: 'middle',
+                    legendOffset: 32
+                }, axisLeft: {
+                    tickSize: 5,
+                    tickPadding: 5,
+                    tickRotation: 0,
+                    legend: (legendY === undefined ? '' : legendY),
+                    legendPosition: 'middle',
+                    legendOffset: -40
+                }, labelSkipWidth: 12, labelSkipHeight: 12, labelTextColor: { from: 'color', modifiers: [['darker', 1.6]] }, 
+                // legends={[
+                //     {
+                //         dataFrom: 'keys',
+                //         anchor: 'bottom-right',
+                //         direction: 'column',
+                //         justify: false,
+                //         translateX: 120,
+                //         translateY: 0,
+                //         itemsSpacing: 2,
+                //         itemWidth: 100,
+                //         itemHeight: 20,
+                //         itemDirection: 'left-to-right',
+                //         itemOpacity: 0.85,
+                //         symbolSize: 20,
+                //         effects: [
+                //             {
+                //                 on: 'hover',
+                //                 style: {
+                //                     itemOpacity: 1
+                //                 }
+                //             }
+                //         ]
+                //     }
+                // ]}
+                animate: true, motionStiffness: 90, motionDamping: 15 }, other)))));
+};
+BarChartControl.propTypes = {
+    data: PropTypes__default["default"].array,
+    keys: PropTypes__default["default"].array
+};
+
+/**********************MATERIAL UI STYLES********************** */
+/*************************************************************** */
+function MinusSquare(props) {
+    return (React__default["default"].createElement(SvgIcon__default["default"], __assign({ fontSize: "inherit", style: { width: 14, height: 14 } }, props),
+        React__default["default"].createElement("path", { d: "M22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0zM17.873 11.023h-11.826q-.375 0-.669.281t-.294.682v0q0 .401.294 .682t.669.281h11.826q.375 0 .669-.281t.294-.682v0q0-.401-.294-.682t-.669-.281z" })));
+}
+function PlusSquare(props) {
+    return (React__default["default"].createElement(SvgIcon__default["default"], __assign({ fontSize: "inherit", style: { width: 14, height: 14 } }, props),
+        React__default["default"].createElement("path", { d: "M22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0zM17.873 12.977h-4.923v4.896q0 .401-.281.682t-.682.281v0q-.375 0-.669-.281t-.294-.682v-4.896h-4.923q-.401 0-.682-.294t-.281-.669v0q0-.401.281-.682t.682-.281h4.923v-4.896q0-.401.294-.682t.669-.281v0q.401 0 .682.281t.281.682v4.896h4.923q.401 0 .682.281t.281.682v0q0 .375-.281.669t-.682.294z" })));
+}
+function TransitionComponent(props) {
+    var style = reactSpring.useSpring({
+        from: { opacity: 0, transform: 'translate3d(20px,0,0)' },
+        to: { opacity: props["in"] ? 1 : 0, transform: "translate3d(".concat(props["in"] ? 0 : 20, "px,0,0)") }
+    });
+    return (React__default["default"].createElement(reactSpring.animated.div, { style: style },
+        React__default["default"].createElement(Collapse__default["default"], __assign({}, props))));
+}
+TransitionComponent.propTypes = {
+    /**
+     * Show the component; triggers the enter or exit states
+     */
+    "in": PropTypes__default["default"].bool
+};
+var StyledTreeItem = styles.withStyles(function (theme) { return ({
+    iconContainer: {
+        '& .close': {
+            opacity: 0.3
+        }
+    },
+    group: {
+        marginLeft: 7,
+        paddingLeft: 18,
+        borderLeft: "1px dashed ".concat(styles.alpha(theme.palette.text.primary, 0.4))
+    }
+}); })(function (props) { return (
+/* @ts-ignore */
+React__default["default"].createElement(TreeItem__default["default"], __assign({}, props, { TransitionComponent: TransitionComponent }))); });
+var useTreviewStyle = styles.makeStyles(function (theme) { return ({
+    root: {
+        "min-height": 264,
+        flexGrow: 1,
+        maxWidth: 400
+    },
+    treLabelIcon: {
+        marginRight: theme.spacing(1)
+    },
+    treeLabelRoot: {
+        display: 'flex',
+        alignItems: 'center',
+        padding: theme.spacing(0.5, 0)
+    },
+    treeLabelText: {
+        fontWeight: 'inherit',
+        flexGrow: 1
+    },
+    treeLabelInactive: {
+        textDecoration: 'line-through',
+        textDecorationColor: 'red'
+    }
+}); });
+var ModalTreeFilterControl = function (props) {
+    var onClose = props.onClose, valueProp = props.value, open = props.open, title = props.title, data = props.data, selectBranch = props.selectBranch, selectActive = props.selectActive, selectInternal = props.selectInternal, other = __rest(props, ["onClose", "value", "open", "title", "data", "selectBranch", "selectActive", "selectInternal"]);
+    var _a = React__default["default"].useState(valueProp), value = _a[0], setValue = _a[1];
+    var _b = React__default["default"].useState([]), expanded = _b[0], setExpanded = _b[1];
+    var treeRef = React__default["default"].useRef(null);
+    React__default["default"].useEffect(function () {
+        if (!open) {
+            setValue(valueProp);
+        }
+        else {
+            if (valueProp !== undefined)
+                expandNode(valueProp);
+        }
+    }, [valueProp, open]); // eslint-disable-line react-hooks/exhaustive-deps
+    React__default["default"].useEffect(function () {
+        if (open) {
+            var findNode = getNodeData(data, parseInt(value));
+            if (findNode === null)
+                findNode = {};
+            var activeFilter = (selectActive && findNode.isActive) || selectActive !== true;
+            var internalFilter = (selectInternal && findNode.isInternal) || selectInternal !== true;
+            if (findNode.isLeaf) {
+                if (activeFilter && internalFilter)
+                    onClose(value, findNode.name, findNode);
+            }
+        }
+    }, [value]); // eslint-disable-line react-hooks/exhaustive-deps
+    var handleEntering = function () {
+        if (treeRef.current != null) {
+            treeRef.current.focus();
+        }
+    };
+    var handleCancel = function () {
+        onClose();
+    };
+    var handleOk = function () {
+        var findNode = getNodeData(data, parseInt(value));
+        if (findNode === null)
+            findNode = {};
+        var activeFilter = (selectActive && findNode.isActive) || selectActive !== true;
+        var internalFilter = (selectInternal && findNode.isInternal) || selectInternal !== true;
+        var branchFilter = (selectBranch && !findNode.isLeaf);
+        if (findNode.isLeaf) {
+            if (activeFilter && internalFilter)
+                onClose(value, findNode.name, findNode);
+        }
+        else {
+            if (branchFilter)
+                onClose(value, findNode.name, findNode);
+        }
+    };
+    var expandNode = function (node, same) {
+        var expandedNode = getNodeParent(data, node, []);
+        expandedNode.push(node.toString());
+        setExpanded(expandedNode);
+    };
+    var handleChange = function (event, node) {
+        setValue(node);
+    };
+    var handleToogle = function (event, nodes) {
+        setExpanded(nodes);
+    };
+    var getNodeData = function (node, id) {
+        if (id === undefined)
+            return null;
+        if (node.id === id)
+            return node;
+        if (Array.isArray(node.children)) {
+            var i;
+            var result = null;
+            for (i = 0; result == null && i < node.children.length; i++) {
+                result = getNodeData(node.children[i], id);
+            }
+            return result;
+        }
+        return null;
+    };
+    var classes = useTreviewStyle();
+    var renderTree = function (nodes) { return (
+    /* @ts-ignore */
+    React__default["default"].createElement(StyledTreeItem, { key: nodes.id, nodeId: nodes.id.toString(), label: React__default["default"].createElement("div", { className: classes.treeLabelRoot },
+            nodes.isCode === true &&
+                React__default["default"].createElement(Code__default["default"], { className: classes.treeLabelIcon, htmlColor: "#1ABC9C" }),
+            nodes.isCode === false &&
+                React__default["default"].createElement(Folder__default["default"], { className: classes.treeLabelIcon, htmlColor: '#F1C40F' }),
+            React__default["default"].createElement(core.Typography, { variant: "body2", className: [classes.treeLabelText, (nodes.isActive ? '' : classes.treeLabelInactive)].join(' ') },
+                React__default["default"].createElement("span", null,
+                    nodes.isCode &&
+                        React__default["default"].createElement("i", { className: "fas fa-square mr-2", style: { "color": (nodes.delayCategoryColor || '#FFFFFF') } }),
+                    nodes.name))), className: "delay-item-node", id: nodes.id, "data-isbranch": !nodes.isCode }, Array.isArray(nodes.children) ? nodes.children.map(function (node) { return renderTree(node); }) : null)); };
+    var getNodeParent = function (node, id, chain) {
+        if (id === undefined)
+            return [];
+        if (node.id.toString() === id.toString())
+            return chain;
+        if (Array.isArray(node.children)) {
+            var i;
+            var result = null;
+            chain.push(node.id.toString());
+            for (i = 0; result == null && i < node.children.length; i++) {
+                result = getNodeParent(node.children[i], id, chain);
+            }
+            return result;
+        }
+        return null;
+    };
+    return (React__default["default"].createElement(Dialog__default["default"], __assign({ onClose: function (event, reason) { return null; }, "aria-label": title, maxWidth: "xs", TransitionProps: { onEntering: handleEntering }, "aria-labelledby": "confirmation-dialog-title", open: open }, other),
+        React__default["default"].createElement(DialogTitle__default["default"], { id: "confirmation-dialog-title" }, title),
+        React__default["default"].createElement(DialogContent__default["default"], { dividers: true },
+            React__default["default"].createElement(TreeView__default["default"], { className: classes.root, defaultCollapseIcon: React__default["default"].createElement(MinusSquare, null), defaultExpandIcon: React__default["default"].createElement(PlusSquare, null), ref: treeRef, selected: value === undefined ? "" : value.toString(), expanded: expanded, 
+                /* @ts-ignore */
+                onNodeSelect: handleChange, onNodeToggle: handleToogle }, data.id !== undefined &&
+                renderTree(data))),
+        React__default["default"].createElement(DialogActions__default["default"], null,
+            React__default["default"].createElement(Button__default["default"], { autoFocus: true, onClick: handleCancel, color: "primary" }, "Cancel"),
+            React__default["default"].createElement(Button__default["default"], { onClick: handleOk, color: "primary" }, "Ok"))));
+};
+ModalTreeFilterControl.propTypes = {
+    onClose: PropTypes__default["default"].func.isRequired,
+    open: PropTypes__default["default"].bool.isRequired,
+    title: PropTypes__default["default"].string.isRequired,
+    data: PropTypes__default["default"].object.isRequired
+};
+
+var TreePickerControl = function (props) {
+    var useStyles = styles.makeStyles(function (theme) { return ({
+        root: {
+            width: '100%',
+            maxWidth: 600,
+            backgroundColor: theme.palette.background.paper
+        },
+        paper: {
+            width: '80%',
+            maxWidth: 600,
+            maxHeight: 600
+        }
+    }); });
+    var classes = useStyles();
+    var onSelect = props.onSelect, value = props.value, styleLabel = props.styleLabel, dataSource = props.dataSource, other = __rest(props, ["onSelect", "value", "styleLabel", "dataSource"]);
+    //const [description, setDescription] = React.useState(props.descriptionOld);
+    var _a = React__default["default"].useState(false), open = _a[0], setOpen = _a[1];
+    var handleClickListItem = function () {
+        setOpen(true);
+    };
+    var handleClose = function (newValue, newDescription, findNode) {
+        setOpen(false);
+        if (newValue) {
+            if (onSelect !== undefined)
+                onSelect(newValue, newDescription, findNode);
+            //setDescription(newDescription)    
+        }
+    };
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", { className: "input-group" },
+            React__default["default"].createElement("div", { className: "input-group-prepend" },
+                React__default["default"].createElement("span", { className: "input-group-text", style: (styleLabel || {}) }, "Code")),
+            React__default["default"].createElement("input", { type: "hidden", value: value || '' }),
+            React__default["default"].createElement("input", { type: "text", className: "form-control mes-selectable", onClick: handleClickListItem, placeholder: props.title, value: props.description, readOnly: true }),
+            React__default["default"].createElement("div", { className: "input-group-append" },
+                React__default["default"].createElement("button", { className: "input-group-text", onClick: handleClickListItem },
+                    React__default["default"].createElement("i", { className: "fa fa-search" })))),
+        React__default["default"].createElement(ModalTreeFilterControl, __assign({ classes: {
+                paper: classes.paper
+            }, id: "modal-treeview-filter", title: props.title, keepMounted: true, open: open, onClose: handleClose, value: value, data: dataSource }, other))));
+};
+function DateControl(_a) {
+    var value = _a.value, onChange = _a.onChange, title = _a.title, styleGeneral = _a.styleGeneral, styleLabel = _a.styleLabel;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", { className: "input-group row", style: (styleGeneral || {}) },
+            React__default["default"].createElement("div", { className: "input-group-prepend col-sm-3" },
+                React__default["default"].createElement("span", { className: "input-group-text", style: (styleLabel || {}) }, title)),
+            React__default["default"].createElement("div", { className: "col-sm-9" },
+                React__default["default"].createElement(DatePicker__default["default"], { className: "form-control mes-filter-datepicker", selected: value, onChange: function (date) { return onChange(date); } })))));
+}
+var DateTimeControl = function (props) {
+    var value = props.value, title = props.title, styleLabel = props.styleLabel, readOnly = props.readOnly, styleTextTimeBox = props.styleTextTimeBox, onChange = props.onChange, name = props.name;
+    var formatTime = function () {
+        var date = moment__default["default"](value);
+        if (!date.isValid())
+            return '';
+        return date.format('HH:mm:ss');
+    };
+    var _a = React__default["default"].useState(formatTime()), formattedTimeValue = _a[0], setFormattedTimeValue = _a[1];
+    var changeDate = function (e) {
+        setFormattedTimeValue(e.target.value);
+    };
+    var blurDate = function (e) {
+        var date = moment__default["default"](e.target.value, 'hh:mm:ss');
+        if (date.isValid() && moment__default["default"](value).isValid()) {
+            var newDate = (moment__default["default"](value)).set('hour', date.hour()).set('minute', date.minute()).set('second', date.second());
+            onChange(newDate.toDate(), name || '');
+        }
+        else {
+            setFormattedTimeValue(formatTime());
+        }
+    };
+    React__default["default"].useEffect(function () {
+        setFormattedTimeValue(formatTime());
+    }, [value]); // eslint-disable-line react-hooks/exhaustive-deps
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", { className: "input-group" },
+            React__default["default"].createElement("div", { className: "input-group-prepend" },
+                React__default["default"].createElement("span", { className: "input-group-text", style: (styleLabel || {}) }, title)),
+            React__default["default"].createElement(DatePicker__default["default"], { className: "form-control mes-filter-datepicker mes-not-rounded", selected: value, onChange: function (date) { return onChange(date, name || ''); }, readOnly: readOnly || false }),
+            React__default["default"].createElement("input", { type: "text", className: "form-control input-group-append mes-filter-datetimepicker", placeholder: "time", value: formattedTimeValue || '', readOnly: readOnly || false, style: styleTextTimeBox || {}, onBlur: function (e) { return blurDate(e); }, onChange: function (e) { return changeDate(e); } }))));
+};
+var SimpleTimeControl = function (props) {
+    var value = props.value, title = props.title, styleLabel = props.styleLabel, readOnly = props.readOnly, styleTextBox = props.styleTextBox, onChange = props.onChange, name = props.name;
+    var formatDate = function () {
+        var date = moment__default["default"](value);
+        if (!date.isValid())
+            return 'INVALID TIME';
+        return date.format('HH:mm:ss');
+    };
+    var _a = React__default["default"].useState(formatDate()), formattedValue = _a[0], setFormattedValue = _a[1];
+    React__default["default"].useEffect(function () {
+        setFormattedValue(formatDate());
+    }, [value]); // eslint-disable-line react-hooks/exhaustive-deps
+    var blurDate = function (e) {
+        var date = moment__default["default"](e.target.value, 'hh:mm:ss');
+        if (date.isValid() && moment__default["default"](value).isValid()) {
+            var newDate = (moment__default["default"](value)).set('hour', date.hour()).set('minute', date.minute()).set('second', date.second());
+            onChange(newDate.toDate(), name || '');
+        }
+        else {
+            setFormattedValue(formatDate());
+        }
+    };
+    var changeDate = function (e) {
+        setFormattedValue(e.target.value);
+    };
+    return (React__default["default"].createElement("div", { className: "input-group" },
+        React__default["default"].createElement("div", { className: "input-group-prepend" },
+            React__default["default"].createElement("span", { className: "input-group-text", style: (styleLabel || {}) }, title)),
+        React__default["default"].createElement("input", { type: "text", className: "form-control", placeholder: title, readOnly: readOnly || false, value: formattedValue || '', onBlur: function (e) { return blurDate(e); }, onChange: function (e) { return changeDate(e); }, style: styleTextBox || {} })));
+};
+function SimpleInputSearchControl(_a) {
+    var title = _a.title, styleLabel = _a.styleLabel, isNumeric = _a.isNumeric, readOnly = _a.readOnly, value = _a.value, onChange = _a.onChange, name = _a.name, styleTextBox = _a.styleTextBox, onKeyDown = _a.onKeyDown, lengthCharacters = _a.lengthCharacters;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", { className: "input-group" },
+            React__default["default"].createElement("div", { className: "input-group-prepend" },
+                React__default["default"].createElement("span", { className: "input-group-text", style: (styleLabel || {}) }, title)),
+            React__default["default"].createElement("input", { type: "text", className: "form-control " + (isNumeric ? 'mes-numeric' : ''), placeholder: title, readOnly: readOnly, value: value || '', onChange: function (e) { return onChange(e.target.value, name || ''); }, style: (styleTextBox || {}), onKeyDown: function (e) { return onKeyDown(e); }, maxLength: lengthCharacters || '' }))));
+}
+var TimeControl = /** @class */ (function (_super) {
+    __extends(TimeControl, _super);
+    function TimeControl() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TimeControl.prototype.render = function () {
+        var _this = this;
+        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement("div", { className: "input-group" },
+                React__default["default"].createElement("div", { className: "input-group-prepend" },
+                    React__default["default"].createElement("span", { className: "input-group-text", style: (this.props.styleLabel || {}) }, this.props.title)),
+                React__default["default"].createElement(DatePicker__default["default"], { className: "form-control mes-filter-datepicker", selected: this.props.value, onChange: function (date) { return _this.props.onChange(date, _this.props.name || ''); }, showTimeSelect: this.props.showSelector || false, showTimeSelectOnly: true, timeIntervals: 15, timeCaption: "Time", dateFormat: "HH:mm:ss", timeFormat: "HH:mm", readOnly: this.props.readOnly || false }))));
+    };
+    return TimeControl;
+}(React.Component));
+var SimpleTextControl = /** @class */ (function (_super) {
+    __extends(SimpleTextControl, _super);
+    function SimpleTextControl() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SimpleTextControl.prototype.render = function () {
+        var _this = this;
+        return (React__default["default"].createElement("div", { className: "input-group" },
+            React__default["default"].createElement("div", { className: "input-group-prepend" },
+                React__default["default"].createElement("span", { className: "input-group-text", style: (this.props.styleLabel || {}) }, this.props.title)),
+            React__default["default"].createElement("input", { type: "text", className: "form-control " + (this.props.isNumeric ? 'mes-numeric' : ''), placeholder: this.props.title, readOnly: this.props.readOnly, value: this.props.value || '', onChange: function (e) { return _this.props.onChange(e.target.value, _this.props.name || ''); }, style: (this.props.styleTextBox || {}), maxLength: this.props.lengthCharacters || '' })));
+    };
+    return SimpleTextControl;
+}(React.Component));
+var SimplePasswordControl = /** @class */ (function (_super) {
+    __extends(SimplePasswordControl, _super);
+    function SimplePasswordControl() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SimplePasswordControl.prototype.render = function () {
+        var _this = this;
+        return (React__default["default"].createElement("div", { className: "input-group" },
+            React__default["default"].createElement("div", { className: "input-group-prepend" },
+                React__default["default"].createElement("span", { className: "input-group-text", style: (this.props.styleLabel || {}) }, this.props.title)),
+            React__default["default"].createElement("input", { className: "form-control ", type: "password", placeholder: this.props.title, readOnly: this.props.readOnly, value: this.props.value || '', onChange: function (e) { return _this.props.onChange(e.target.value, _this.props.name || ''); }, style: (this.props.styleTextBox || {}), maxLength: this.props.lengthCharacters || '' })));
+    };
+    return SimplePasswordControl;
+}(React.Component));
+var formatNumber = function (value) {
+    var number = Number(value);
+    if (Number.isNaN(number))
+        return '';
+    return number.toString();
+};
+var NumericTextControl = function (props) {
+    var value = props.value, title = props.title, styleLabel = props.styleLabel, readOnly = props.readOnly, styleTextBox = props.styleTextBox, onChange = props.onChange, name = props.name, typeNumber = props.typeNumber; //typeNumber 1 = real, 2 = integer, 3 = natural 
+    var _a = React__default["default"].useState(formatNumber(value)), formattedValue = _a[0], setFormattedValue = _a[1];
+    var changedValue = function (e) {
+        setFormattedValue(e.target.value);
+    };
+    var valueBlured = function (inputValue) {
+        var number = Number(inputValue);
+        if (Number.isNaN(number))
+            setFormattedValue(formatNumber(value));
+        else if (typeNumber === 2 && !Number.isInteger(number))
+            setFormattedValue(formatNumber(value));
+        else if (typeNumber === 3 && (!Number.isInteger(number) || number < 0))
+            setFormattedValue(formatNumber(value));
+        else
+            onChange(number, name || '');
+    };
+    React__default["default"].useEffect(function () {
+        setFormattedValue(formatNumber(value));
+    }, [value]); // eslint-disable-line react-hooks/exhaustive-deps
+    return (React__default["default"].createElement("div", { className: "input-group" },
+        React__default["default"].createElement("div", { className: "input-group-prepend" },
+            React__default["default"].createElement("span", { className: "input-group-text", style: (styleLabel || {}) }, title)),
+        React__default["default"].createElement("input", { type: "text", className: "form-control mes-numeric", placeholder: title, readOnly: readOnly, value: formattedValue || '', onChange: function (e) { return changedValue(e); }, onBlur: function (e) { return valueBlured(e.target.value); }, style: (styleTextBox || {}) })));
+};
+var HorizontalTextControl = /** @class */ (function (_super) {
+    __extends(HorizontalTextControl, _super);
+    function HorizontalTextControl() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    HorizontalTextControl.prototype.render = function () {
+        var _this = this;
+        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement("div", { className: "input-group" },
+                React__default["default"].createElement("div", { className: "input-group-prepend" },
+                    React__default["default"].createElement("span", { className: "input-group-text", style: (this.props.styleLabel || {}) }, this.props.title)),
+                React__default["default"].createElement("input", { type: "text", className: "form-control " + (this.props.isNumeric ? 'mes-numeric' : ''), placeholder: this.props.title, readOnly: this.props.readOnly, value: this.props.value || '', style: (this.props.styleText || {}), onChange: function (e) { return _this.props.onChange(e.target.value, _this.props.name || ''); } }),
+                React__default["default"].createElement("div", { className: "input-group-append" },
+                    React__default["default"].createElement("span", { className: "input-group-text", style: (this.props.styleSubLabel || {}) }, this.props.subTitle || '')))));
+    };
+    return HorizontalTextControl;
+}(React.Component));
+var SimpleTextAreaControl = /** @class */ (function (_super) {
+    __extends(SimpleTextAreaControl, _super);
+    function SimpleTextAreaControl() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SimpleTextAreaControl.prototype.render = function () {
+        var _this = this;
+        return (React__default["default"].createElement("div", { className: "input-group" },
+            React__default["default"].createElement("div", { className: "input-group-prepend" },
+                React__default["default"].createElement("span", { className: "input-group-text", style: (this.props.styleLabel || {}) }, this.props.title)),
+            React__default["default"].createElement("textarea", { className: "form-control", placeholder: this.props.title, value: this.props.value || '', onChange: function (e) { return _this.props.onChange(e.target.value, _this.props.name || ''); }, style: (this.props.styleText || {}), disabled: !!(this.props.disabled) })));
+    };
+    return SimpleTextAreaControl;
+}(React.Component));
+function SimpleSelectorControl(_a) {
+    var title = _a.title, dataSource = _a.dataSource, selectedValue = _a.selectedValue, onChange = _a.onChange, showColor = _a.showColor, styleLabel = _a.styleLabel, styleList = _a.styleList, hasChoose = _a.hasChoose;
+    var options = dataSource.map(function (item, index) {
+        return React__default["default"].createElement(MenuItem__default["default"], { value: item.id.toString(), key: index },
+            showColor === true &&
+                React__default["default"].createElement("i", { className: "fas fa-square mr-2", style: { "color": (item.color || '#FFFFFF') } }),
+            React__default["default"].createElement("span", null, item.description));
+    });
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", { className: "input-group" },
+            React__default["default"].createElement("div", { className: "input-group-prepend" },
+                React__default["default"].createElement("span", { className: "input-group-text", style: (styleLabel || {}) }, title)),
+            React__default["default"].createElement(Select__default["default"], { className: "custom-select mes-custom-select", onChange: function (e) { return onChange(e.target.value === 'DEFAULT' ? '' : e.target.value); }, value: selectedValue || "DEFAULT", style: (styleList || {}) },
+                (hasChoose && React__default["default"].createElement(MenuItem__default["default"], { value: "DEFAULT" }, "Choose " + title)),
+                options))));
+}
+var MultipleSelectorControl = function (props) {
+    var options = (props.dataSource || []).map(function (item, index) {
+        return React__default["default"].createElement("option", { value: item[props.valueField], key: index, className: "p-1" }, item[props.textField]);
+    });
+    return (React__default["default"].createElement("div", { className: "card" },
+        React__default["default"].createElement("div", { className: "card-header" }, props.title || ''),
+        React__default["default"].createElement("div", { className: "card-body p-0" },
+            React__default["default"].createElement("select", { className: "form-select col-md-12 p-0 mes-no-border", multiple: true, "aria-label": props.title || '', value: props.value || [], onChange: function (e) { var value = Array.from(e.target.selectedOptions, function (option) { return option.value; }); props.onChange(value); }, onDoubleClick: props.onDoubleClick || undefined }, options))));
+};
+var CheckBoxControl = function (props) {
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", { className: "input-group" },
+            React__default["default"].createElement("div", { className: "input-group-prepend" },
+                React__default["default"].createElement("div", { className: "input-group-text" },
+                    React__default["default"].createElement("input", { type: "checkbox", checked: props.value, onChange: function (e) { props.onCheck(e.target.checked); }, disabled: props.disabled }))),
+            React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": props.title, value: props.title, readOnly: true, style: (props.styleTextBox || []) }))));
+};
+var UploadFileControl = function (props) {
+    var FileChanged = function (e) {
+        props.onChange(e.target.files[0]);
+    };
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", { className: "input-group mes-upload-control" },
+            React__default["default"].createElement("div", { className: "input-group-prepend" },
+                React__default["default"].createElement("div", { className: "input-group-text p-0 file-box" },
+                    React__default["default"].createElement("div", { className: "file-detail", style: {} },
+                        props.selectedFile &&
+                            React__default["default"].createElement(React__default["default"].Fragment, null,
+                                React__default["default"].createElement("h5", null, "File Details:"),
+                                React__default["default"].createElement("table", null,
+                                    React__default["default"].createElement("tbody", null,
+                                        React__default["default"].createElement("tr", null,
+                                            React__default["default"].createElement("td", null,
+                                                "File Name: ",
+                                                props.selectedFile.name)),
+                                        React__default["default"].createElement("tr", null,
+                                            React__default["default"].createElement("td", null,
+                                                "File Type: ",
+                                                props.selectedFile.type)),
+                                        React__default["default"].createElement("tr", null,
+                                            React__default["default"].createElement("td", null,
+                                                "Last Modified: ",
+                                                props.selectedFile.lastModifiedDate.toDateString()))))),
+                        props.selectedFile === undefined &&
+                            React__default["default"].createElement("div", { className: "pt-4" },
+                                React__default["default"].createElement(core.Typography, null, "Select or drag a file"))),
+                    React__default["default"].createElement("input", { id: "myFile", type: "file", className: "formcontrol", style: {}, onChange: FileChanged, accept: props.acceptFile || '*.*' }))),
+            React__default["default"].createElement("div", { className: "input-group-append" },
+                React__default["default"].createElement("button", { className: "btn btn-primary mes-button-primary", disabled: props.selectedFile === undefined, onClick: props.onUpload },
+                    React__default["default"].createElement("i", { className: "fas fa-upload pr-2" }),
+                    React__default["default"].createElement("span", null, "Upload"))))));
+};
+
+function GenericRow(props) {
+    var cells = props.row.map(function (cell, index) {
+        return React__default["default"].createElement("td", { key: index }, cell);
+    });
+    return (React__default["default"].createElement("tr", null, cells));
+}
+var GenericTable = /** @class */ (function (_super) {
+    __extends(GenericTable, _super);
+    function GenericTable() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    GenericTable.prototype.render = function () {
+        var theads = (this.props.columns.map(function (column, index) {
+            return React__default["default"].createElement("th", { scope: "col", key: index }, column);
+        }));
+        var tbody = (this.props.data.map(function (row, index) {
+            return React__default["default"].createElement(GenericRow, { row: row, key: index });
+        }));
+        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement("div", { className: "container-fluid my-3" },
+                React__default["default"].createElement("div", { className: "table-responsive-md" },
+                    React__default["default"].createElement("table", { className: "table table-hover table-striped table-sm" },
+                        React__default["default"].createElement("thead", null,
+                            React__default["default"].createElement("tr", null, theads)),
+                        React__default["default"].createElement("tbody", null, tbody))))));
+    };
+    return GenericTable;
+}(React.Component));
+
+var useStylesForOverlay = styles.makeStyles(function (theme) { return ({
+    root: {
+        flexDirection: 'column',
+        '& .ant-empty-img-1': {
+            fill: theme.palette.type === 'light' ? '#aeb8c2' : '#262626'
+        },
+        '& .ant-empty-img-2': {
+            fill: theme.palette.type === 'light' ? '#f5f5f7' : '#595959'
+        },
+        '& .ant-empty-img-3': {
+            fill: theme.palette.type === 'light' ? '#dce0e6' : '#434343'
+        },
+        '& .ant-empty-img-4': {
+            fill: theme.palette.type === 'light' ? '#fff' : '#1c1c1c'
+        },
+        '& .ant-empty-img-5': {
+            fillOpacity: theme.palette.type === 'light' ? '0.8' : '0.08',
+            fill: theme.palette.type === 'light' ? '#f5f5f5' : '#fff'
+        }
+    },
+    label: {
+        marginTop: theme.spacing(1)
+    }
+}); });
+function CustomNoRowsOverlay() {
+    var classes = useStylesForOverlay();
+    return (React__default["default"].createElement(dataGrid.GridOverlay, { className: classes.root },
+        React__default["default"].createElement("svg", { width: "120", height: "100", viewBox: "0 0 184 152", "aria-hidden": true, focusable: "false" },
+            React__default["default"].createElement("g", { fill: "none", fillRule: "evenodd" },
+                React__default["default"].createElement("g", { transform: "translate(24 31.67)" },
+                    React__default["default"].createElement("ellipse", { className: "ant-empty-img-5", cx: "67.797", cy: "106.89", rx: "67.797", ry: "12.668" }),
+                    React__default["default"].createElement("path", { className: "ant-empty-img-1", d: "M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z" }),
+                    React__default["default"].createElement("path", { className: "ant-empty-img-2", d: "M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" }),
+                    React__default["default"].createElement("path", { className: "ant-empty-img-3", d: "M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z" })),
+                React__default["default"].createElement("path", { className: "ant-empty-img-3", d: "M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z" }),
+                React__default["default"].createElement("g", { className: "ant-empty-img-4", transform: "translate(149.65 15.383)" },
+                    React__default["default"].createElement("ellipse", { cx: "20.654", cy: "3.167", rx: "2.849", ry: "2.815" }),
+                    React__default["default"].createElement("path", { d: "M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" })))),
+        React__default["default"].createElement("div", { className: classes.label }, "No Rows")));
+}
+var DataGridControl = function (props) {
+    var columns = props.columns, rows = props.rows, other = __rest(props, ["columns", "rows"]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", { className: "container-fluid my-3" },
+            React__default["default"].createElement(dataGrid.DataGrid, __assign({ components: {
+                    NoRowsOverlay: CustomNoRowsOverlay
+                }, rows: rows, columns: columns || [], autoHeight: true, rowHeight: 25 }, other)))));
+};
+DataGridControl.propTypes = {
+    columns: PropTypes__default["default"].array,
+    rows: PropTypes__default["default"].array
+};
+
+/********************MATERIAL UI STYLES********************************** */
+/************************************************************************* */
+var GenericPanel = function (_a) {
+    var title = _a.title, description = _a.description, _b = _a.showPromptSuccess, showPromptSuccess = _b === void 0 ? false : _b, _c = _a.showPromptError, showPromptError = _c === void 0 ? false : _c, _d = _a.onDismissSuccess, onDismissSuccess = _d === void 0 ? function () { return null; } : _d, _e = _a.onDismissError, onDismissError = _e === void 0 ? function () { return null; } : _e, successMessage = _a.successMessage, error = _a.error, children = _a.children;
+    return (React__default["default"].createElement("div", { className: "content-wrapper" },
+        React__default["default"].createElement("div", { className: "row" },
+            React__default["default"].createElement("div", { className: "col-lg-12" },
+                React__default["default"].createElement(reactBootstrap.Alert, { show: showPromptError, variant: "danger", dismissible: true, onClose: onDismissError },
+                    React__default["default"].createElement("strong", null, "There was an error"),
+                    React__default["default"].createElement("p", null, error === undefined ? 'There was an error' :
+                        (error.internalError.message === undefined ? error.internalError : error.internalError.message))),
+                React__default["default"].createElement(reactBootstrap.Alert, { show: showPromptSuccess, variant: "success", onClose: onDismissSuccess },
+                    React__default["default"].createElement("p", null, successMessage || 'Operation was success')))),
+        React__default["default"].createElement("h3", null,
+            title,
+            React__default["default"].createElement("small", null, description)),
+        children));
+};
+var MasterDetailPanel = /** @class */ (function (_super) {
+    __extends(MasterDetailPanel, _super);
+    function MasterDetailPanel() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    MasterDetailPanel.prototype.useStyles = function () {
+        return styles.makeStyles(function (theme) { return ({
+            root: {
+                '& > *': {
+                    margin: theme.spacing(1)
+                },
+                marginBottom: theme.spacing(1)
+            }
+        }); });
+    };
+    MasterDetailPanel.prototype.render = function () {
+        return (React__default["default"].createElement("div", { className: "pb-2" },
+            React__default["default"].createElement(Card__default["default"], { variant: "outlined" },
+                React__default["default"].createElement(CardContent__default["default"], null,
+                    React__default["default"].createElement(Typography__default["default"], { gutterBottom: true, variant: "h5", component: "h2" }, this.props.title || ''),
+                    this.props.children),
+                React__default["default"].createElement(CardActions__default["default"], { className: "px-3 " },
+                    React__default["default"].createElement("button", { className: "btn btn-danger", onClick: this.props.onCancel, disabled: !this.props.saveStatus }, "Cancel"),
+                    (this.props.showSave === undefined || this.props.showSave) &&
+                        React__default["default"].createElement("button", { className: "btn btn-primary mes-button-primary", onClick: this.props.onSave, disabled: !this.props.saveStatus }, "Save"),
+                    this.props.showDelete &&
+                        React__default["default"].createElement("button", { className: "btn btn-primary mes-button-primary", onClick: this.props.onDelete, disabled: !this.props.deleteStatus }, "Delete")))));
+    };
+    return MasterDetailPanel;
+}(React.Component));
+var FilterPanel = /** @class */ (function (_super) {
+    __extends(FilterPanel, _super);
+    function FilterPanel(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {};
+        _this.onClickGo = _this.GetFilterValues.bind(_this);
+        _this.onClickReset = _this.ResetFilterValues.bind(_this);
+        _this.onClickExport = _this.ExportData.bind(_this);
+        return _this;
+    }
+    FilterPanel.prototype.ExportData = function () {
+        if (this.props.onClickExport !== undefined)
+            this.props.onClickExport();
+    };
+    FilterPanel.prototype.ResetFilterValues = function () {
+        if (this.props.onClickReset !== undefined)
+            this.props.onClickReset();
+    };
+    FilterPanel.prototype.GetFilterValues = function () {
+        if (this.props.OnClickGo !== undefined)
+            this.props.OnClickGo();
+    };
+    FilterPanel.prototype.render = function () {
+        var buttonList = this.props.extraButtons === undefined ? [] : this.props.extraButtons;
+        var extraButtons = buttonList.map(function (button, index) {
+            return React__default["default"].createElement("button", { type: "button", className: "btn btn-primary btn-sm mr-2", onClick: button.onClick, key: index }, button.name);
+        });
+        return (React__default["default"].createElement("div", { className: "container-fluid" },
+            React__default["default"].createElement("div", { className: "row" },
+                React__default["default"].createElement("div", { className: "col-md-12" },
+                    React__default["default"].createElement("div", { className: "row" },
+                        this.props.children,
+                        React__default["default"].createElement("div", { className: "me-auto" },
+                            !!this.props.showButtons &&
+                                React__default["default"].createElement(React__default["default"].Fragment, null,
+                                    React__default["default"].createElement("div", { className: "pt-2" },
+                                        React__default["default"].createElement("button", { type: "button", className: "btn btn-primary  btn mr-2", onClick: this.onClickGo }, "Go"),
+                                        React__default["default"].createElement("button", { type: "button", className: "btn btn-danger btn-sm mr-2", onClick: this.onClickReset }, "Reset"))),
+                            extraButtons,
+                            !!this.props.showExport &&
+                                React__default["default"].createElement("div", { className: "pt-2" },
+                                    React__default["default"].createElement("button", { type: "button", className: "btn btn-success", onClick: this.onClickExport },
+                                        React__default["default"].createElement("i", { className: "fa fa-download" }),
+                                        "Excel"))))))));
+    };
+    return FilterPanel;
+}(React.Component));
+var LongFilterPanel = /** @class */ (function (_super) {
+    __extends(LongFilterPanel, _super);
+    function LongFilterPanel(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {};
+        _this.onClickGo = _this.GetFilterValues.bind(_this);
+        _this.onClickReset = _this.ResetFilterValues.bind(_this);
+        _this.onClickExport = _this.ExportData.bind(_this);
+        return _this;
+    }
+    LongFilterPanel.prototype.ExportData = function () {
+        if (this.props.onClickExport !== undefined)
+            this.props.onClickExport();
+    };
+    LongFilterPanel.prototype.ResetFilterValues = function () {
+        if (this.props.onClickReset !== undefined)
+            this.props.onClickReset();
+    };
+    LongFilterPanel.prototype.GetFilterValues = function () {
+        if (this.props.OnClickGo !== undefined)
+            this.props.OnClickGo();
+    };
+    LongFilterPanel.prototype.render = function () {
+        var buttonList = this.props.extraButtons === undefined ? [] : this.props.extraButtons;
+        var extraButtons = buttonList.map(function (button, index) {
+            return React__default["default"].createElement("button", { type: "button", className: "btn btn-primary btn-sm mr-2", onClick: button.onClick, key: index }, button.name);
+        });
+        return (React__default["default"].createElement("div", { className: "container-fluid" },
+            React__default["default"].createElement("div", { className: "row" },
+                React__default["default"].createElement("div", { className: "col-md-12" },
+                    this.props.children,
+                    React__default["default"].createElement("div", { className: "me-auto" }, !!this.props.showButtons &&
+                        React__default["default"].createElement("div", { className: "container-fluid" },
+                            React__default["default"].createElement("div", { className: "col-md-10" },
+                                React__default["default"].createElement("div", { className: "pt-2" },
+                                    React__default["default"].createElement("button", { type: "button", className: "btn btn-primary  btn mr-2", onClick: this.onClickGo }, "Go"),
+                                    React__default["default"].createElement("button", { type: "button", className: "btn btn-danger btn-sm mr-2", onClick: this.onClickReset }, "Reset"),
+                                    !!this.props.showExport &&
+                                        React__default["default"].createElement("button", { type: "button", className: "btn btn-success", onClick: this.onClickExport },
+                                            React__default["default"].createElement("i", { className: "fa fa-download" }),
+                                            "Excel"),
+                                    extraButtons))))))));
+    };
+    return LongFilterPanel;
+}(React.Component));
+
+function JobConfig() {
+    var _a = React__default["default"].useState(false), showError = _a[0], setShowError = _a[1];
+    var _b = React__default["default"].useState(undefined), error = _b[0], setError = _b[1];
+    var _c = React__default["default"].useState(false), messageLoading = _c[0], setMessageLoading = _c[1];
+    var _d = React__default["default"].useState(false), messageSuccesful = _d[0], setMessageSuccesful = _d[1];
+    var _e = React__default["default"].useState(0), pageSel = _e[0], setPageSel = _e[1];
+    var _f = React__default["default"].useState([]), rows = _f[0], setRows = _f[1];
+    var _g = React__default["default"].useState(false), loading = _g[0], setLoading = _g[1];
+    var _h = React__default["default"].useState(false), blockButtons = _h[0], setBlockButtons = _h[1];
+    var formatTime = function (nowTime) {
+        return ((nowTime.toLocaleDateString() + ' ' + nowTime.toLocaleTimeString()));
+    };
+    var columns = [
+        { field: 'sProcedure', headerName: 'Procedure', width: 200, type: 'string' },
+        { field: 'Running', headerName: 'Status', width: 150, valueFormatter: function (_a) {
+                var value = _a.value;
+                return (value ? 'running' : 'inactive');
+            } },
+        { field: 'LastStarted', headerName: 'Started', width: 150, valueFormatter: function (_a) {
+                var value = _a.value;
+                return (value === null ? 'NULL' : formatTime(value));
+            } },
+        { field: 'LastCounter', headerName: 'Last Seen', width: 150, valueFormatter: function (_a) {
+                var value = _a.value;
+                return (value === null ? 'NULL' : formatTime(value));
+            } },
+        { field: 'Enabled', headerName: 'Enabled', width: 110, valueFormatter: function (_a) {
+                var value = _a.value;
+                return (!value ? 'N' : 'Y');
+            } },
+        { field: 'RestartAfterFailure', headerName: 'AutoRecover', width: 140, valueFormatter: function (_a) {
+                var value = _a.value;
+                return (!value ? 'N' : 'Y');
+            } },
+        { field: 'Enable', headerName: 'Enable', width: 110, renderCell: function (e) { return renderButtonEnable(e); } },
+        { field: 'Disable', headerName: 'Disable', width: 110, renderCell: function (e) { return renderButtonDisable(e); } },
+        { field: 'Reset', headerName: 'Reset', width: 110, renderCell: function (e) { return renderButtonReset(e); } }
+    ];
+    var renderButtonEnable = function (e) {
+        var isDisabled = (e.row.Enabled) || (blockButtons);
+        return (React__default["default"].createElement("button", { onClick: function () { onEnable(e); }, disabled: isDisabled }, "Enable"));
+    };
+    var renderButtonDisable = function (e) {
+        var isDisabled = (!e.row.Enabled) || (blockButtons);
+        return (React__default["default"].createElement("button", { onClick: function () { onEnable(e); }, disabled: isDisabled }, "Disable"));
+    };
+    var renderButtonReset = function (e) {
+        var isDisabled = (!e.row.Enabled) || (blockButtons);
+        return (React__default["default"].createElement("button", { onClick: function () { onReset(e); }, disabled: isDisabled }, "Reset"));
+    };
+    var onEnable = function (e) {
+        var enParameters = [];
+        var apiService = new MESApiService();
+        enParameters.push({ name: "@sProcedure", value: e.row.sProcedure });
+        enParameters.push({ name: "@Enable", value: (!e.row.Enabled) });
+        apiService.call('SYSTEM.SetJobEnable', enParameters)
+            .then(function () {
+            if (apiService.hasErrors) {
+                setShowError(true);
+                setError(apiService.error);
+            }
+            searchData();
+        });
+    };
+    var onReset = function (e) {
+        var enParameters = [];
+        var apiService = new MESApiService();
+        enParameters.push({ name: "@sProcedure", value: e.row.sProcedure });
+        apiService.call('SYSTEM.RestartJob', enParameters)
+            .then(function () {
+            if (apiService.hasErrors) {
+                setShowError(true);
+                setError(apiService.error);
+            }
+            setMessageLoading(false);
+            setMessageSuccesful(true);
+            searchData();
+            setBlockButtons(false);
+        });
+        setMessageLoading(true);
+        setBlockButtons(true);
+        searchData();
+    };
+    var searchData = function () {
+        setRows([]);
+        setLoading(true);
+        var apiService = new MESApiService();
+        apiService.call('SYSTEM.GetJobsStatus', [])
+            .then(function (response) {
+            if (apiService.hasErrors) {
+                setShowError(true);
+                setError(apiService.error);
+            }
+            if (response !== undefined && response.tables !== undefined && response.tables[0] !== undefined) {
+                var rowsSource = response.tables[0].rows;
+                // TODO: add typing
+                rowsSource.forEach(function (row) {
+                    row.id = row.JobId;
+                    row.LastStarted = row.LastStarted === null ? null : new Date(row.LastStarted);
+                    row.LastContact = row.LastContact === null ? null : new Date(row.LastContact);
+                    row.LastCounter = row.LastCounter === null ? null : new Date(row.LastCounter);
+                });
+                setRows(rowsSource);
+            }
+            setLoading(false);
+        });
+    };
+    React__default["default"].useEffect(searchData, []);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(reactBootstrap.Alert, { show: showError, variant: "danger", dismissible: true, onClose: function () { setShowError(false); setError(undefined); } },
+            React__default["default"].createElement("strong", null, "There was an error"),
+            React__default["default"].createElement("p", null,
+                " ",
+                error === undefined ? 'There was an error' :
+                    (error.internalError.message === undefined ? error.internalError : error.internalError.message))),
+        React__default["default"].createElement(reactBootstrap.Alert, { show: messageLoading, variant: "warning", dismissible: true, onClose: function () { setMessageLoading(false); } },
+            React__default["default"].createElement("p", null, 'Waiting to reset')),
+        React__default["default"].createElement(reactBootstrap.Alert, { show: messageSuccesful, variant: "success", dismissible: true, onClose: function () { setMessageSuccesful(false); } },
+            React__default["default"].createElement("p", null, 'Reset was succesful')),
+        React__default["default"].createElement("div", { className: "row" },
+            React__default["default"].createElement(core.Typography, { className: "mx-2 mt-0 mb-2 font-weight-bold" }, "System Jobs")),
+        React__default["default"].createElement("div", { className: "row" },
+            React__default["default"].createElement(DataGridControl, __assign({ columns: columns, rows: rows, pageSize: 10, rowHeight: 30, loading: loading, rowsPerPageOptions: [10], page: pageSel, onPageChange: setPageSel }, {})))));
+}
+
+function LogConfig() {
+    var _a = React__default["default"].useState(false), showError = _a[0], setShowError = _a[1];
+    var _b = React__default["default"].useState(undefined), error = _b[0], setError = _b[1];
+    var _c = React__default["default"].useState(moment__default["default"]().add(-2, 'days').hour(0).minute(0).second(0).toDate()), startDate = _c[0], setStartDate = _c[1];
+    var _d = React__default["default"].useState(moment__default["default"]().hour(23).minute(59).second(59).toDate()), endDate = _d[0], setEndDate = _d[1];
+    var _e = React__default["default"].useState(0), pageSel = _e[0], setPageSel = _e[1];
+    var _f = React__default["default"].useState([]), rows = _f[0], setRows = _f[1];
+    var _g = React__default["default"].useState(""), search = _g[0], setSearch = _g[1];
+    var _h = React__default["default"].useState(null), logCodeId = _h[0], setlogCodeId = _h[1];
+    var _j = React__default["default"].useState(false), loading = _j[0], setLoading = _j[1];
+    var _k = React__default["default"].useState([]), logCodes = _k[0], setlogCodes = _k[1];
+    //state of row
+    var _l = React__default["default"].useState(undefined), selectedLog = _l[0], setSelectedLog = _l[1];
+    var formatTime = function (nowTime) {
+        return ((nowTime.toLocaleDateString() + ' ' + nowTime.toLocaleTimeString()));
+    };
+    var formatUser = function (nowUser) {
+        return (nowUser === null ? 'NULL' : nowUser);
+    };
+    var columns = [
+        { field: 'Timestamp', headerName: 'Time', width: 200, valueFormatter: function (_a) {
+                var value = _a.value;
+                return (value === null ? '' : formatTime(value));
+            } },
+        { field: 'Source', headerName: 'Source', width: 150, type: 'string' },
+        { field: 'Message', headerName: 'Message', width: 550, type: 'string' },
+        { field: 'LogTypeCode', headerName: 'Type', width: 100 },
+        { field: 'User', headerName: 'User', width: 150, type: 'string', valueFormatter: function (_a) {
+                var value = _a.value;
+                return (formatUser(value));
+            } }
+    ];
+    var resetFilter = function () {
+        setStartDate(moment__default["default"]().hour(0).minute(0).second(0).toDate());
+        setEndDate(moment__default["default"]().hour(23).minute(59).second(59).toDate());
+        setSearch("");
+        setlogCodeId(1);
+        setRows([]);
+        setSelectedLog(undefined);
+    };
+    var rowClicked = function (rowClickedEvent) {
+        var data = rowClickedEvent.row;
+        if (data === undefined)
+            return;
+        setSelectedLog(data);
+    };
+    var searchData = function () {
+        setRows([]);
+        var apiService = new MESApiService();
+        setLoading(true);
+        var parameters = [];
+        parameters.push({ name: "@Start", value: startDate });
+        parameters.push({ name: "@End", value: endDate });
+        parameters.push({ name: "@Search", value: search });
+        if (logCodeId !== "A") {
+            parameters.push({ name: "@LogTypeCode", value: logCodeId });
+        }
+        else {
+            parameters.push({ name: "@LogTypeCode", value: null });
+        }
+        apiService.call('MES.GetLogs', parameters)
+            .then(function (response) {
+            if (apiService.hasErrors) {
+                setShowError(true);
+                setError(apiService.error);
+            }
+            if (response !== undefined && response.tables !== undefined && response.tables[0] !== undefined) {
+                var rowsSource = response.tables[0].rows;
+                rowsSource.forEach(function (row, index) {
+                    row.id = index;
+                    row.Timestamp = row.Timestamp === null ? null : new Date(row.Timestamp);
+                });
+                setRows(rowsSource);
+            }
+            setLoading(false);
+        });
+    };
+    var loadFilter = function () {
+        var listlogCode = [
+            { 'id': "A", 'description': "All" }, { 'id': "I", 'description': "Info" }, { 'id': "E", 'description': "Error" }
+        ];
+        setlogCodes(listlogCode);
+        setlogCodeId("A");
+    };
+    React__default["default"].useEffect(loadFilter, []);
+    React__default["default"].useEffect(searchData, []);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(reactBootstrap.Alert, { show: showError, variant: "danger", dismissible: true, onClose: function () { setShowError(false); setError(undefined); } },
+            React__default["default"].createElement("strong", null, "There was an error"),
+            React__default["default"].createElement("p", null,
+                " ",
+                error === undefined ? 'There was an error' :
+                    (error.internalError.message === undefined ? error.internalError : error.internalError.message))),
+        React__default["default"].createElement("div", { className: "row" },
+            React__default["default"].createElement(core.Typography, { className: "mx-2 mt-0 mb-2 font-weight-bold" }, "MES and System Logs")),
+        React__default["default"].createElement(FilterPanel, { showExport: false, showButtons: true, OnClickGo: searchData, onClickReset: resetFilter },
+            React__default["default"].createElement("div", null,
+                React__default["default"].createElement(DateControl, { value: startDate, onChange: setStartDate, title: "Start" })),
+            React__default["default"].createElement("div", { className: "mx-2" },
+                React__default["default"].createElement(DateControl, { value: endDate, onChange: setEndDate, title: "End" })),
+            React__default["default"].createElement("div", { className: "col-md-3" },
+                React__default["default"].createElement(SimpleTextControl, { value: search, onChange: setSearch, title: "Search" })),
+            React__default["default"].createElement("div", { className: "col-md-2" },
+                React__default["default"].createElement(SimpleSelectorControl, { title: "Code", dataSource: logCodes, selectedValue: logCodeId, onChange: setlogCodeId, showColor: false }))),
+        React__default["default"].createElement("div", { className: "row" },
+            React__default["default"].createElement(DataGridControl, { columns: columns, rows: rows, pageSize: 10, rowHeight: 30, loading: loading, rowsPerPageOptions: [10, 20, 50, 100], page: pageSel, onPageChange: setPageSel, onRowClick: rowClicked })),
+        ((selectedLog !== undefined) &&
+            React__default["default"].createElement("div", { className: "white-panel" },
+                React__default["default"].createElement("div", { className: "row" },
+                    React__default["default"].createElement("div", { className: "col-md-12" },
+                        React__default["default"].createElement("h4", null, "Log Details"))),
+                React__default["default"].createElement("div", { className: "row" },
+                    React__default["default"].createElement("div", { className: "col-md-3", style: { "display": "flex" } },
+                        React__default["default"].createElement("h5", null, "Time: "),
+                        React__default["default"].createElement("h5", { className: "mx-1", style: { "opacity": "0.7" } }, formatTime(selectedLog.Timestamp))),
+                    React__default["default"].createElement("div", { className: "col-md-3", style: { "display": "flex" } },
+                        React__default["default"].createElement("h5", null, "Source: "),
+                        React__default["default"].createElement("h5", { className: "mx-1", style: { "opacity": "0.7" } }, selectedLog.Source)),
+                    React__default["default"].createElement("div", { className: "col-md-2", style: { "display": "flex" } },
+                        React__default["default"].createElement("h5", null, "Type: "),
+                        React__default["default"].createElement("h5", { className: "mx-1", style: { "opacity": "0.7" } }, selectedLog.LogTypeCode)),
+                    React__default["default"].createElement("div", { className: "col-md-3", style: { "display": "flex" } },
+                        React__default["default"].createElement("h5", null, "User: "),
+                        React__default["default"].createElement("h5", { className: "mx-1", style: { "opacity": "0.7" } }, formatUser(selectedLog.User)))),
+                React__default["default"].createElement("div", { className: "row" },
+                    React__default["default"].createElement("div", { className: "col-md-10", style: { "display": "flex" } },
+                        React__default["default"].createElement("h5", null, "Message: "),
+                        React__default["default"].createElement("h5", { style: { "opacity": "0.7" } }, selectedLog.Message)))))));
+}
+
+function ProfileManagement() {
+    // variables
+    var columns = [
+        { field: 'ProfileName', headerName: 'Profile', flex: 1, type: 'string' }
+    ];
+    //states
+    var _a = React__default["default"].useState(undefined), profileId = _a[0], setProfileId = _a[1];
+    var _b = React__default["default"].useState(''), profileName = _b[0], setProfileName = _b[1];
+    var _c = React__default["default"].useState([]), selectedProfile = _c[0], setSelectedProfile = _c[1];
+    var _d = React__default["default"].useState([]), selectedOtherProfile = _d[0], setSelectedOtherProfile = _d[1];
+    var _e = React__default["default"].useState([]), selectedPermission = _e[0], setSelectedPermission = _e[1];
+    var _f = React__default["default"].useState([]), selectedOtherPermission = _f[0], setSelectedOtherPermission = _f[1];
+    var _g = React__default["default"].useState(0), page = _g[0], setPage = _g[1];
+    var _h = React__default["default"].useState(false), loading = _h[0], setLoading = _h[1];
+    var _j = React__default["default"].useState([]), dataSource = _j[0], setDataSource = _j[1];
+    var _k = React__default["default"].useState(false), showError = _k[0], setShowError = _k[1];
+    var _l = React__default["default"].useState(undefined), error = _l[0], setError = _l[1];
+    var _m = React__default["default"].useState(false), showSuccess = _m[0], setShowSuccess = _m[1];
+    var _o = React__default["default"].useState(''), successMessage = _o[0], setSuccessMessage = _o[1];
+    var _p = React__default["default"].useState(''), title = _p[0], setTitle = _p[1];
+    var _q = React__default["default"].useState([]), profiles = _q[0], setProfiles = _q[1];
+    var _r = React__default["default"].useState([]), permissions = _r[0], setPermissions = _r[1];
+    var _s = React__default["default"].useState([]), assignProfiles = _s[0], setAssignProfiles = _s[1];
+    var _t = React__default["default"].useState([]), assignPermissions = _t[0], setAssignPermissions = _t[1];
+    var _u = React__default["default"].useState([]), otherProfiles = _u[0], setOtherProfiles = _u[1];
+    var _v = React__default["default"].useState([]), otherPermissions = _v[0], setOtherPermissions = _v[1];
+    //functiuons
+    var loadComponent = function () {
+        var apiService = new MESApiService();
+        setLoading(true);
+        apiService.call('SEC.GetProfiles', [])
+            .then(function (response) {
+            if (apiService.hasErrors) {
+                setShowError(true);
+                setError(apiService.error);
+            }
+            if (response !== undefined && response.tables !== undefined && response.tables[0] !== undefined) {
+                var mydataSource_1 = [];
+                var rows = response.tables[0].rows;
+                rows.forEach(function (row, index) {
+                    row.id = row.ProfileId;
+                    mydataSource_1 = __spreadArray(__spreadArray([], mydataSource_1, true), [row], false);
+                });
+                setDataSource(mydataSource_1);
+                setProfiles(mydataSource_1);
+            }
+            setLoading(false);
+        });
+        var apiServcePermission = new MESApiService();
+        apiServcePermission.call('SEC.GetPermissions', [])
+            .then(function (response) {
+            if (apiServcePermission.hasErrors) {
+                setShowError(true);
+                setError(apiService.error);
+            }
+            if (response !== undefined && response.tables !== undefined && response.tables[0] !== undefined) {
+                var mydataSource_2 = [];
+                var rows = response.tables[0].rows;
+                rows.forEach(function (row) {
+                    mydataSource_2 = __spreadArray(__spreadArray([], mydataSource_2, true), [row], false);
+                });
+                setPermissions(mydataSource_2);
+            }
+        });
+    };
+    var setDefaultValues = function () {
+        setTitle('');
+        setProfileId(undefined);
+        setProfileName('');
+        setAssignPermissions([]);
+        setAssignProfiles([]);
+        setOtherProfiles([]);
+        setOtherPermissions([]);
+        setSelectedProfile([]);
+        setSelectedOtherProfile([]);
+        setSelectedPermission([]);
+        setSelectedOtherPermission([]);
+    };
+    var newProfile = function () {
+        setDefaultValues();
+        setTitle('New Profile');
+        setProfileId(0);
+        setAssignPermissions([]);
+        setAssignProfiles([]);
+        setOtherProfiles(profiles);
+        setOtherPermissions(permissions);
+        setSelectedProfile([]);
+        setSelectedOtherProfile([]);
+        setSelectedPermission([]);
+        setSelectedOtherPermission([]);
+    };
+    var cancelDetail = function () {
+        setDefaultValues();
+    };
+    var saveDetail = function () {
+        if (profileId >= 0) {
+            var parameters = [];
+            parameters.push({ name: "@ProfileId", value: (profileId === 0 ? null : profileId || null) });
+            parameters.push({ name: "@ProfileName", value: (profileName === '' ? null : profileName) });
+            var apiService_1 = new MESApiService();
+            apiService_1.call('SEC.UpsertProfile', parameters)
+                .then(function (response) {
+                if (apiService_1.hasErrors) {
+                    setShowError(true);
+                    setError(apiService_1.error);
+                    return 0;
+                }
+                else {
+                    if (response !== undefined && response.tables !== undefined && response.tables[0] !== undefined) {
+                        var id = response.tables[0].rows[0] === undefined ? null : response.tables[0].rows[0].ProfileId || null;
+                        return id;
+                    }
+                    else {
+                        return 0;
+                    }
+                }
+            })
+                .then(function (newProfileId) {
+                if (newProfileId === 0)
+                    return newProfileId;
+                var profileParam = '';
+                assignProfiles.forEach(function (element) {
+                    profileParam = profileParam + element.ProfileId + ',';
+                });
+                var parametersProfile = [];
+                parametersProfile.push({ name: "@ProfileId", value: (newProfileId === 0 ? null : newProfileId || null) });
+                parametersProfile.push({ name: "@HasProfileIds", value: profileParam });
+                var apiServiceProfile = new MESApiService();
+                apiServiceProfile.call('SEC.SetProfilesToProfile', parametersProfile)
+                    .then(function (responseP) {
+                    if (apiServiceProfile.hasErrors) {
+                        setShowError(true);
+                        setError(apiServiceProfile.error);
+                    }
+                });
+                return newProfileId;
+            })
+                .then(function (newProfileId) {
+                if (newProfileId === 0)
+                    return newProfileId;
+                var permissionParam = '';
+                assignPermissions.forEach(function (element) {
+                    permissionParam = permissionParam + element.PermissionId + ',';
+                });
+                var parametersPermission = [];
+                parametersPermission.push({ name: "@ProfileId", value: (newProfileId === 0 ? null : newProfileId || null) });
+                parametersPermission.push({ name: "@PermissionIds", value: permissionParam });
+                var apiServicePermission = new MESApiService();
+                apiServicePermission.call('SEC.SetPermissionsToProfile', parametersPermission)
+                    .then(function (responsePe) {
+                    if (apiServicePermission.hasErrors) {
+                        setShowError(true);
+                        setError(apiServicePermission.error);
+                    }
+                    setShowSuccess(true);
+                    setSuccessMessage('Profile was ' + (profileId === 0 ? ' created.' : ' updated.'));
+                    setDefaultValues();
+                    loadComponent();
+                });
+            })
+                .then(function (newProfileId) {
+                if (newProfileId === 0) {
+                    setShowSuccess(true);
+                    setSuccessMessage('Profile was ' + (profileId === 0 ? ' created.' : ' updated.'));
+                    setDefaultValues();
+                    loadComponent();
+                }
+            });
+        }
+    };
+    var deleteDetail = function () {
+        if (profileId && profileId > 0) {
+            var parameters = [];
+            parameters.push({ name: "@ProfileId", value: (profileId === 0 ? null : profileId || null) });
+            var apiService_2 = new MESApiService();
+            apiService_2.call('SEC.DeleteProfile', parameters)
+                .then(function (response) {
+                if (apiService_2.hasErrors) {
+                    setShowError(true);
+                    setError(apiService_2.error);
+                }
+                else {
+                    setShowSuccess(true);
+                    setSuccessMessage('Profile was deleted.');
+                    loadComponent();
+                    setDefaultValues();
+                }
+            });
+        }
+    };
+    var rowClicked = function (rowClickedEvent) {
+        var data = rowClickedEvent.row;
+        if (data === undefined)
+            return;
+        if (data.id === profileId)
+            return;
+        setProfileId(data.ProfileId);
+        setTitle(data.ProfileName || '');
+        setProfileName(data.ProfileName || '');
+        //permissions
+        var permissionsId = (data.PermissionsId || '').split(',').filter(function (el) { return el.length; });
+        var myPermissions = [];
+        var restPermissions = [];
+        permissions.forEach(function (element) {
+            var permissionFound = permissionsId.find(function (permission) { return permission === element.PermissionId.toString(); });
+            if (permissionFound === undefined)
+                restPermissions.push(element);
+            else
+                myPermissions.push(element);
+        });
+        setAssignPermissions(myPermissions);
+        setOtherPermissions(restPermissions);
+        setSelectedOtherPermission([]);
+        setSelectedPermission([]);
+        //profiles
+        var profilesId = (data.HasProfilesId || '').split(',').filter(function (el) { return el.length; });
+        var myProfiles = [];
+        var restProfiles = [];
+        profiles.forEach(function (element) {
+            var profileFound = profilesId.find(function (profile) { return profile === element.ProfileId.toString(); });
+            if (profileFound === undefined)
+                restProfiles.push(element);
+            else
+                myProfiles.push(element);
+        });
+        setAssignProfiles(myProfiles);
+        setOtherProfiles(restProfiles);
+        setSelectedOtherProfile([]);
+        setSelectedProfile([]);
+    };
+    var addProfiles = function () {
+        var myProfiles = assignProfiles || [];
+        selectedOtherProfile.forEach(function (element) {
+            var profileFound = profiles.find(function (profile) { return profile.ProfileId.toString() === element; });
+            if (profileFound !== undefined) {
+                myProfiles.push(profileFound);
+            }
+        });
+        updateListProfiles(myProfiles);
+    };
+    var removeProfiles = function () {
+        var myProfiles = assignProfiles || [];
+        selectedProfile.forEach(function (element) {
+            myProfiles = myProfiles.filter(function (item) {
+                return item.ProfileId.toString() !== element;
+            });
+        });
+        updateListProfiles(myProfiles);
+    };
+    var updateListProfiles = function (selectedProfiles) {
+        var myProfiles = [];
+        var restProfiles = [];
+        profiles.forEach(function (element) {
+            var profileFound = selectedProfiles.find(function (profile) { return profile.ProfileId === element.ProfileId; });
+            if (profileFound === undefined)
+                restProfiles.push(element);
+            else
+                myProfiles.push(element);
+        });
+        setAssignProfiles(myProfiles);
+        setOtherProfiles(restProfiles);
+        setSelectedProfile([]);
+        setSelectedOtherProfile([]);
+    };
+    var addPermissions = function () {
+        var myPermissions = assignPermissions || [];
+        selectedOtherPermission.forEach(function (element) {
+            var permissionFound = permissions.find(function (permission) { return permission.PermissionId.toString() === element; });
+            if (permissionFound !== undefined) {
+                myPermissions.push(permissionFound);
+            }
+        });
+        updateListPermission(myPermissions);
+    };
+    var removePermissions = function () {
+        var myPermissions = assignPermissions || [];
+        selectedPermission.forEach(function (element) {
+            myPermissions = myPermissions.filter(function (item) {
+                return item.PermissionId.toString() !== element;
+            });
+        });
+        updateListPermission(myPermissions);
+    };
+    var updateListPermission = function (selectedPermissions) {
+        var myPermissions = [];
+        var restPermissions = [];
+        permissions.forEach(function (element) {
+            var permissionFound = selectedPermissions.find(function (permission) { return permission.PermissionId === element.PermissionId; });
+            if (permissionFound === undefined)
+                restPermissions.push(element);
+            else
+                myPermissions.push(element);
+        });
+        setAssignPermissions(myPermissions);
+        setOtherPermissions(restPermissions);
+        setSelectedPermission([]);
+        setSelectedOtherPermission([]);
+    };
+    var closeMessage = function () {
+        setTimeout(function () {
+            setShowSuccess(false);
+            setSuccessMessage('');
+        }, 2000);
+    };
+    // effects
+    React__default["default"].useEffect(function () {
+        loadComponent();
+    }, []);
+    React__default["default"].useEffect(function () {
+        if (showSuccess) {
+            closeMessage();
+        }
+    }, [showSuccess]); // eslint-disable-line react-hooks/exhaustive-deps
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(reactBootstrap.Alert, { show: showError, variant: "danger", dismissible: true, onClose: function () { setShowError(false); setError(undefined); } },
+            React__default["default"].createElement("strong", null, "There was an error"),
+            React__default["default"].createElement("p", null,
+                " ",
+                error === undefined ? 'There was an error' :
+                    (error.internalError.message === undefined ? error.internalError : error.internalError.message))),
+        React__default["default"].createElement(reactBootstrap.Alert, { show: showSuccess, variant: "success" },
+            React__default["default"].createElement("p", null, successMessage || 'Operation was success')),
+        React__default["default"].createElement("div", { className: "row" },
+            React__default["default"].createElement(core.Typography, { className: "mx-2 mt-0 mb-2 font-weight-bold" }, "Profile Management")),
+        React__default["default"].createElement("div", { className: "row" },
+            React__default["default"].createElement("div", { className: "col-md-6" },
+                React__default["default"].createElement("div", { className: "text-right" },
+                    React__default["default"].createElement("button", { className: "btn btn-success", onClick: newProfile, disabled: profileId === 0 }, "New")),
+                React__default["default"].createElement(DataGridControl, { columns: columns, rows: dataSource, pageSize: 20, rowHeight: 30, loading: loading, rowsPerPageOptions: [10, 20, 50, 100], page: page, className: "mes-selectable-datagrid", onRowClick: rowClicked, onPageChange: function (params) { setPage(params.page); } })),
+            React__default["default"].createElement("div", { className: "col-md-6" }, (profileId && profileId >= 0) &&
+                /* @ts-ignore */
+                React__default["default"].createElement(MasterDetailPanel, { title: title, saveStatus: true, showDelete: true, deleteStatus: profileId > 0, onCancel: cancelDetail, onSave: saveDetail, onDelete: deleteDetail },
+                    React__default["default"].createElement("div", { className: "row" },
+                        React__default["default"].createElement("div", { className: "col-md-6 px-3 py-1" },
+                            React__default["default"].createElement(SimpleTextControl, { title: "Name", styleLabel: { 'minWidth': '150px' }, onChange: setProfileName, name: 'profileName', value: profileName }))),
+                    React__default["default"].createElement("div", { className: "row" }),
+                    React__default["default"].createElement("div", { className: "row" },
+                        React__default["default"].createElement(core.Typography, { gutterBottom: true, variant: "h5", component: "h2", className: "ml-3 pt-1" }, "Permissions")),
+                    React__default["default"].createElement("div", { className: "row" },
+                        React__default["default"].createElement("div", { className: "col-md-5" },
+                            React__default["default"].createElement(MultipleSelectorControl, { title: "Available", value: selectedOtherPermission, onChange: setSelectedOtherPermission, onDoubleClick: addPermissions, dataSource: otherPermissions, valueField: "PermissionId", textField: "PermissionName" })),
+                        React__default["default"].createElement("div", { className: "col-md-2 d-flex flex-column align-items-center m-auto" },
+                            React__default["default"].createElement("button", { className: "btn btn-primary mes-button-primary my-2", title: "Assign", disabled: (selectedOtherPermission || []).length === 0, onClick: addPermissions },
+                                React__default["default"].createElement("i", { className: "fas fa-angle-right" })),
+                            React__default["default"].createElement("button", { className: "btn btn-primary mes-button-primary my-2", title: "Remove", disabled: (selectedPermission || []).length === 0, onClick: removePermissions },
+                                React__default["default"].createElement("i", { className: "fas fa-angle-left" }))),
+                        React__default["default"].createElement("div", { className: "col-md-5" },
+                            React__default["default"].createElement(MultipleSelectorControl, { title: "Assigned", value: selectedPermission, onChange: setSelectedPermission, onDoubleClick: removePermissions, dataSource: assignPermissions, valueField: "PermissionId", textField: "PermissionName" }))),
+                    React__default["default"].createElement("div", { className: "row" },
+                        React__default["default"].createElement(core.Typography, { gutterBottom: true, variant: "h5", component: "h2", className: "ml-3 pt-1" }, "Profiles")),
+                    React__default["default"].createElement("div", { className: "row" },
+                        React__default["default"].createElement("div", { className: "col-md-5" },
+                            React__default["default"].createElement(MultipleSelectorControl, { title: "Available", value: selectedOtherProfile, onChange: setSelectedOtherProfile, onDoubleClick: addProfiles, dataSource: otherProfiles, valueField: "ProfileId", textField: "ProfileName" })),
+                        React__default["default"].createElement("div", { className: "col-md-2 d-flex flex-column align-items-center m-auto" },
+                            React__default["default"].createElement("button", { className: "btn btn-primary mes-button-primary my-2", title: "Assign", disabled: (selectedOtherProfile || []).length === 0, onClick: addProfiles },
+                                React__default["default"].createElement("i", { className: "fas fa-angle-right" })),
+                            React__default["default"].createElement("button", { className: "btn btn-primary mes-button-primary my-2", title: "Remove", disabled: (selectedProfile || []).length === 0, onClick: removeProfiles },
+                                React__default["default"].createElement("i", { className: "fas fa-angle-left" }))),
+                        React__default["default"].createElement("div", { className: "col-md-5" },
+                            React__default["default"].createElement(MultipleSelectorControl, { title: "Assigned", value: selectedProfile, onChange: setSelectedProfile, onDoubleClick: removeProfiles, dataSource: assignProfiles, valueField: "ProfileId", textField: "ProfileName" }))))))));
+}
+
+var CurrencyFormatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD'
+});
+var NumberFormatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD'
+});
+var IntegerFormatter = new Intl.NumberFormat('en-US', {});
+var DateTimeFormatter = new Intl.DateTimeFormat('en-US-u-hc-h23', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    hour12: false
+});
+var DateFormatter = new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+});
+var TimeFormatter = new Intl.DateTimeFormat('en-US-u-hc-h23', {
+    hour: '2-digit',
+    minute: 'numeric',
+    second: 'numeric',
+    hour12: false
+});
+
+function ShiftCrew() {
+    var columns = [
+        { field: 'PatternStart', headerName: 'Pattern Start', width: 200, type: 'string', valueFormatter: function (_a) {
+                var value = _a.value;
+                return DateTimeFormatter.format(value);
+            } },
+        { field: 'ShiftCodes', headerName: 'Shift Codes', width: 150, type: 'string' },
+        { field: 'Crews', headerName: 'Crews', width: 200, type: 'string' },
+        { field: 'PatternDays', headerName: 'Pattern Days', flex: 1, type: 'number' },
+    ];
+    var _a = React__default["default"].useState([]), dataSource = _a[0], setDataSource = _a[1];
+    var _b = React__default["default"].useState(false), showError = _b[0], setShowError = _b[1];
+    var _c = React__default["default"].useState(false), loading = _c[0], setLoading = _c[1];
+    var _d = React__default["default"].useState(0), page = _d[0], setPage = _d[1];
+    var _e = React__default["default"].useState(undefined), error = _e[0], setError = _e[1];
+    var _f = React__default["default"].useState(false), showSuccess = _f[0], setShowSuccess = _f[1];
+    var _g = React__default["default"].useState(''), successMessage = _g[0], setSuccessMessage = _g[1];
+    var _h = React__default["default"].useState(new Date()), startDate = _h[0], setStartDate = _h[1];
+    var _j = React__default["default"].useState(0), shiftDay = _j[0], changeShiftDay = _j[1];
+    var _k = React__default["default"].useState(''), shiftId = _k[0], changeShiftId = _k[1];
+    var _l = React__default["default"].useState(0), crewNumber = _l[0], setCrewNumber = _l[1];
+    var _m = React__default["default"].useState(''), crewId = _m[0], setCrewId = _m[1];
+    var _o = React__default["default"].useState(''), comment = _o[0], setCommment = _o[1];
+    var _p = React__default["default"].useState(0), rotationNumber = _p[0], setRotationNumber = _p[1];
+    var _q = React__default["default"].useState(0), rotationCrewNumber = _q[0], setRotationCrewNumber = _q[1];
+    var _r = React__default["default"].useState(''), rotationCrew = _r[0], setRotationCrew = _r[1];
+    var _s = React__default["default"].useState(-1), dataId = _s[0], setDataId = _s[1];
+    var _t = React__default["default"].useState(false), canEdit = _t[0], setCanEdit = _t[1];
+    var _u = React__default["default"].useState(false), canView = _u[0], setCanView = _u[1];
+    var _v = React__default["default"].useState(''), title = _v[0], setTitle = _v[1];
+    //functions
+    var loadComponent = function () {
+        var apiService = new MESApiService();
+        setLoading(true);
+        apiService.call('MES.GetShiftParameters', [])
+            .then(function (response) {
+            if (apiService.hasErrors) {
+                setShowError(true);
+                setError(apiService.error);
+            }
+            if (response !== undefined && response.tables !== undefined && response.tables[0] !== undefined) {
+                var mydataSource_1 = [];
+                var rows = response.tables[0].rows;
+                rows.forEach(function (row, index) {
+                    row.id = index;
+                    row.PatternStart = row.PatternStart === null ? null : new Date(row.PatternStart);
+                    mydataSource_1 = __spreadArray(__spreadArray([], mydataSource_1, true), [row], false);
+                });
+                setDataSource(mydataSource_1);
+            }
+            setLoading(false);
+        });
+    };
+    var changeData = function (value, name) {
+        if (name === 'shiftDay') {
+            changeShiftDay(value);
+        }
+        else if (name === 'shiftId') {
+            changeShiftId(value.toString().toUpperCase());
+        }
+        else if (name === 'crewNumber') {
+            setCrewNumber(value);
+        }
+        else if (name === 'crewId') {
+            setCrewId(value.toString().toUpperCase());
+        }
+        else if (name === 'rotationNumber') {
+            setRotationNumber(value);
+        }
+        else if (name === 'rotationCrew') {
+            var valueCharacters = Array.from(value.toString());
+            var isValid_1 = true;
+            valueCharacters.forEach(function (element) {
+                var indexOf = crewId.indexOf(element.toUpperCase());
+                if (indexOf === -1)
+                    isValid_1 = false;
+            });
+            if (isValid_1)
+                setRotationCrew(value.toString().toUpperCase());
+        }
+    };
+    var newParameter = function () {
+        setTitle('New Shift/Crew');
+        setCanEdit(true);
+        setDefaultValues();
+    };
+    var cancelDetail = function () {
+        setTitle('');
+        setCanEdit(false);
+        setCanView(false);
+        setDefaultValues();
+    };
+    var setDefaultValues = function () {
+        setStartDate(new Date());
+        changeShiftDay(0);
+        changeShiftId('');
+        setCrewNumber(0);
+        setCrewId('');
+        setRotationNumber(0);
+        setRotationCrewNumber(0);
+        setRotationCrew('');
+        setDataId(-1);
+        setCommment('');
+        setTitle('');
+    };
+    var rowClicked = function (rowClickedEvent) {
+        var data = rowClickedEvent.row;
+        if (data === undefined)
+            return;
+        if (data.id === dataId)
+            return;
+        setStartDate(data.PatternStart);
+        changeShiftDay(data.ShiftCodes.length);
+        changeShiftId(data.ShiftCodes);
+        setCrewNumber(data.Crews.length);
+        setCrewId(data.Crews);
+        setRotationNumber(data.PatternDays);
+        // setRotationCrewNumber(row.data.PatternStart);
+        setRotationCrew(data.CrewRotation);
+        setDataId(data.id);
+        setCommment(data.Comments);
+        if (data.CanEdit === true)
+            setCanEdit(true);
+        else
+            setCanView(true);
+    };
+    var deleteDetail = function () {
+        if (canEdit && dataId >= 0) {
+            var parameters = [];
+            parameters.push({ name: "@PatternStart", value: JSON.parse(JSON.stringify(startDate)) });
+            var apiService_1 = new MESApiService();
+            apiService_1.call('MES.DeleteShiftParameters', parameters)
+                .then(function (response) {
+                if (apiService_1.hasErrors) {
+                    setShowError(true);
+                    setError(apiService_1.error);
+                }
+                else {
+                    setShowSuccess(true);
+                    setSuccessMessage('Shift code was deleted');
+                    loadComponent();
+                    setDefaultValues();
+                    setCanEdit(false);
+                    setCanView(false);
+                }
+            });
+        }
+    };
+    var saveDetail = function () {
+        if (canEdit) {
+            var parameters = [];
+            parameters.push({ name: "@PatternStart", value: JSON.parse(JSON.stringify(startDate)) });
+            parameters.push({ name: "@ShiftCodes", value: (shiftId === '' ? null : shiftId) });
+            parameters.push({ name: "@Crews", value: (crewId === '' ? null : crewId) });
+            parameters.push({ name: "@CrewRotation", value: (rotationCrew === '' ? null : rotationCrew) });
+            parameters.push({ name: "@Comments", value: (comment === '' ? null : comment) });
+            var apiService_2 = new MESApiService();
+            apiService_2.call('MES.UpsertShiftParameters', parameters)
+                .then(function (response) {
+                if (apiService_2.hasErrors) {
+                    setShowError(true);
+                    setError(apiService_2.error);
+                }
+                else {
+                    loadComponent();
+                    setDefaultValues();
+                    setShowSuccess(true);
+                    setSuccessMessage('Shift code was updated');
+                    setCanEdit(false);
+                    setCanView(false);
+                }
+            });
+        }
+    };
+    var closeMessage = function () {
+        setTimeout(function () {
+            setShowSuccess(false);
+            setSuccessMessage('');
+        }, 2000);
+    };
+    //efects
+    React__default["default"].useEffect(function () {
+        setRotationCrewNumber(shiftDay * rotationNumber);
+    }, [rotationNumber]); // eslint-disable-line react-hooks/exhaustive-deps
+    React__default["default"].useEffect(function () {
+        changeShiftId(shiftId.substring(0, shiftDay));
+        setRotationCrewNumber(shiftDay * rotationNumber);
+    }, [shiftDay]); // eslint-disable-line react-hooks/exhaustive-deps
+    React__default["default"].useEffect(function () {
+        setCrewId(crewId.substring(0, crewNumber));
+        //  setRotationCrew('');
+    }, [crewNumber]); // eslint-disable-line react-hooks/exhaustive-deps
+    React__default["default"].useEffect(function () {
+        //setRotationCrew('');
+    }, [crewId]);
+    React__default["default"].useEffect(function () {
+        //  setRotationCrew(rotationCrew.substring(0,rotationCrewNumber));        
+    }, [rotationCrewNumber]);
+    React__default["default"].useEffect(function () {
+        if (showSuccess) {
+            closeMessage();
+        }
+    }, [showSuccess]); // eslint-disable-line react-hooks/exhaustive-deps
+    React__default["default"].useEffect(loadComponent, []);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(reactBootstrap.Alert, { show: showError, variant: "danger", dismissible: true, onClose: function () { setShowError(false); setError(undefined); } },
+            React__default["default"].createElement("strong", null, "There was an error"),
+            React__default["default"].createElement("p", null,
+                " ",
+                error === undefined ? 'There was an error' :
+                    (error.internalError.message === undefined ? error.internalError : error.internalError.message))),
+        React__default["default"].createElement(reactBootstrap.Alert, { show: showSuccess, variant: "success" },
+            React__default["default"].createElement("p", null, successMessage || 'Operation was success')),
+        React__default["default"].createElement("div", { className: "row" },
+            React__default["default"].createElement(core.Typography, { className: "mx-2 mt-0 mb-2 font-weight-bold" }, "Shift / Crew")),
+        React__default["default"].createElement("div", { className: "row" },
+            React__default["default"].createElement("div", { className: "col-md-6" },
+                React__default["default"].createElement("div", { className: "text-right" },
+                    React__default["default"].createElement("button", { className: "btn btn-success", onClick: newParameter, disabled: canEdit }, "New")),
+                React__default["default"].createElement(DataGridControl, { columns: columns, rows: dataSource, pageSize: 20, rowHeight: 30, loading: loading, rowsPerPageOptions: [10, 20, 50, 100], page: page, className: "mes-selectable-datagrid", onRowClick: rowClicked, onPageChange: function (params) { setPage(params.page); } })),
+            React__default["default"].createElement("div", { className: "col-md-6" }, (canView || canEdit) &&
+                /* @ts-ignore */
+                React__default["default"].createElement(MasterDetailPanel, { title: title, saveStatus: canEdit, showDelete: true, deleteStatus: dataId >= 0, onCancel: cancelDetail, onSave: saveDetail, onDelete: deleteDetail },
+                    React__default["default"].createElement("div", { className: "row" },
+                        React__default["default"].createElement("div", { className: "col-md-8 px-3 py-1" },
+                            React__default["default"].createElement(DateTimeControl, { value: startDate, onChange: setStartDate, styleLabel: { 'minWidth': '150px' }, title: "Start", name: startDate }))),
+                    React__default["default"].createElement("div", { className: "row" },
+                        React__default["default"].createElement("div", { className: "col-md-6 px-3 py-1" },
+                            React__default["default"].createElement(NumericTextControl, { styleLabel: { 'minWidth': '150px' }, title: "# Shift per day", onChange: changeData, value: shiftDay, name: "shiftDay", isNumeric: true, typeNumber: 3 })),
+                        React__default["default"].createElement("div", { className: "col-md-6 px-3 py-1" },
+                            React__default["default"].createElement(SimpleTextControl, { styleLabel: { 'minWidth': '150px' }, title: "Shift IDs", onChange: changeData, name: 'shiftId', value: shiftId, readOnly: (shiftDay === 0), lengthCharacters: shiftDay }))),
+                    React__default["default"].createElement("div", { className: "row" },
+                        React__default["default"].createElement("div", { className: "col-md-6 px-3 py-1" },
+                            React__default["default"].createElement(NumericTextControl, { styleLabel: { 'minWidth': '150px' }, title: "# Crews", onChange: changeData, name: "crewNumber", value: crewNumber, isNumeric: true, typeNumber: 3 })),
+                        React__default["default"].createElement("div", { className: "col-md-6 px-3 py-1" },
+                            React__default["default"].createElement(SimpleTextControl, { styleLabel: { 'minWidth': '150px' }, title: "Crew IDs", onChange: changeData, name: 'crewId', value: crewId, readOnly: (crewNumber === 0), lengthCharacters: crewNumber }))),
+                    React__default["default"].createElement("div", { className: "row" },
+                        React__default["default"].createElement("div", { className: "col-md-6 px-3 py-1" },
+                            React__default["default"].createElement(NumericTextControl, { styleLabel: { 'minWidth': '150px' }, title: "Rotation Pattern", onChange: changeData, name: "rotationNumber", value: rotationNumber, isNumeric: true, typeNumber: 3 }))),
+                    React__default["default"].createElement("div", { className: "row" },
+                        React__default["default"].createElement("div", { className: "col-md-12 px-3 py-1" },
+                            React__default["default"].createElement(SimpleTextControl, { title: "Crew rotation", styleLabel: { 'minWidth': '150px' }, onChange: changeData, name: 'rotationCrew', value: rotationCrew, readOnly: rotationCrewNumber === 0, lengthCharacters: rotationCrewNumber }))),
+                    React__default["default"].createElement("div", { className: "row" },
+                        React__default["default"].createElement("div", { className: "col-md-12 px-3 pt-5" },
+                            React__default["default"].createElement(SimpleTextAreaControl, { value: comment, onChange: setCommment, title: "Comments", name: "Comments", styleLabel: { 'minWidth': '150px' } }))))))));
+}
+
+function ChangePassword(props) {
+    var onClose = props.onClose, userId = props.userId, open = props.open;
+    //states
+    var _a = React__default["default"].useState(''), password = _a[0], setPassword = _a[1];
+    var _b = React__default["default"].useState(''), confirmPassword = _b[0], setConfirmPassword = _b[1];
+    var _c = React__default["default"].useState(false), canChange = _c[0], setCanChange = _c[1];
+    var _d = React__default["default"].useState(false), showError = _d[0], setShowError = _d[1];
+    var _e = React__default["default"].useState(undefined), error = _e[0], setError = _e[1];
+    //functions
+    var handleCancel = function () {
+        onClose(false);
+    };
+    var handleOk = function () {
+        if (userId >= 0) {
+            var apiService_1 = new MESApiService();
+            apiService_1.changePassword(userId, password)
+                .then(function (response) {
+                if (apiService_1.hasErrors) {
+                    setShowError(true);
+                    setError(apiService_1.error);
+                }
+                else {
+                    onClose(true);
+                }
+            });
+        }
+        else {
+            onClose(false);
+        }
+    };
+    //efects
+    React__default["default"].useEffect(function () {
+        setCanChange((password === confirmPassword) && password.length > 0);
+    }, [password, confirmPassword]);
+    React__default["default"].useEffect(function () {
+        setPassword('');
+        setConfirmPassword('');
+    }, [userId, open]);
+    return (React__default["default"].createElement(Dialog__default["default"], { onClose: function (event, reason) { return null; }, "aria-label": "Change Password", maxWidth: "xs", "aria-labelledby": "confirmation-dialog-title", open: open },
+        React__default["default"].createElement(DialogTitle__default["default"], { id: "confirmation-dialog-title" }, "Change Password"),
+        React__default["default"].createElement(DialogContent__default["default"], { dividers: true },
+            React__default["default"].createElement(reactBootstrap.Alert, { show: showError, variant: "danger", dismissible: true, onClose: function () { setShowError(false); setError(undefined); } },
+                React__default["default"].createElement("strong", null, "There was an error"),
+                React__default["default"].createElement("p", null,
+                    " ",
+                    error === undefined ? 'There was an error' :
+                        (error.internalError.message === undefined ? error.internalError : error.internalError.message))),
+            React__default["default"].createElement("div", { className: "row" },
+                React__default["default"].createElement("div", { className: "col-md-12 px-3 py-1" },
+                    React__default["default"].createElement(SimplePasswordControl, { title: "Password", styleLabel: { 'minWidth': '150px' }, onChange: setPassword, name: 'password', value: password }))),
+            React__default["default"].createElement("div", { className: "row" },
+                React__default["default"].createElement("div", { className: "col-md-12 px-3 py-1" },
+                    React__default["default"].createElement(SimplePasswordControl, { title: "Confirm Password", styleLabel: { 'minWidth': '150px' }, onChange: setConfirmPassword, name: 'confirmPassword', value: confirmPassword })))),
+        React__default["default"].createElement(DialogActions__default["default"], null,
+            React__default["default"].createElement(Button__default["default"], { autoFocus: true, onClick: handleCancel, color: "primary" }, "Cancel"),
+            React__default["default"].createElement(Button__default["default"], { onClick: handleOk, color: "primary", disabled: !canChange }, "Change Password"))));
+}
+
+function UserManagment() {
+    // variables
+    var columns = [
+        { field: 'UserName', headerName: 'Username', width: 200, type: 'string' },
+        { field: 'FirstName', headerName: 'Name', width: 150, type: 'string' },
+        { field: 'LastName', headerName: 'Lastname', width: 200, type: 'string' },
+    ];
+    //states
+    var _a = React__default["default"].useState(undefined), userId = _a[0], setUserId = _a[1];
+    var _b = React__default["default"].useState(''), userName = _b[0], setUserName = _b[1];
+    var _c = React__default["default"].useState(''), userFirstName = _c[0], setUserFirstName = _c[1];
+    var _d = React__default["default"].useState(''), userLastName = _d[0], setUserLastName = _d[1];
+    var _e = React__default["default"].useState(false), userIsActive = _e[0], setUserIsActive = _e[1];
+    var _f = React__default["default"].useState(false), userIsDomain = _f[0], setUserIsDomain = _f[1];
+    var _g = React__default["default"].useState([]), selectedUserProfile = _g[0], setSelectedUserProfile = _g[1];
+    var _h = React__default["default"].useState([]), selectedProfile = _h[0], setSelectedProfile = _h[1];
+    var _j = React__default["default"].useState(''), title = _j[0], setTitle = _j[1];
+    var _k = React__default["default"].useState(false), showError = _k[0], setShowError = _k[1];
+    var _l = React__default["default"].useState(undefined), error = _l[0], setError = _l[1];
+    var _m = React__default["default"].useState(false), showSuccess = _m[0], setShowSuccess = _m[1];
+    var _o = React__default["default"].useState(''), successMessage = _o[0], setSuccessMessage = _o[1];
+    var _p = React__default["default"].useState(0), page = _p[0], setPage = _p[1];
+    var _q = React__default["default"].useState(false), loading = _q[0], setLoading = _q[1];
+    var _r = React__default["default"].useState([]), dataSource = _r[0], setDataSource = _r[1];
+    var _s = React__default["default"].useState(false), open = _s[0], setOpen = _s[1];
+    var _t = React__default["default"].useState([]), profiles = _t[0], setProfiles = _t[1];
+    var _u = React__default["default"].useState([]), userProfiles = _u[0], setUserProfiles = _u[1];
+    var _v = React__default["default"].useState([]), otherProfiles = _v[0], setOtherProfiles = _v[1];
+    //functions
+    var loadComponent = function () {
+        var apiService = new MESApiService();
+        setLoading(true);
+        apiService.call('SEC.GetUsers', [])
+            .then(function (response) {
+            if (apiService.hasErrors) {
+                setShowError(true);
+                setError(apiService.error);
+            }
+            if (response !== undefined && response.tables !== undefined && response.tables[0] !== undefined) {
+                var mydataSource_1 = [];
+                var rows = response.tables[0].rows;
+                rows.forEach(function (row) {
+                    row.id = row.UserId;
+                    mydataSource_1 = __spreadArray(__spreadArray([], mydataSource_1, true), [row], false);
+                });
+                setDataSource(mydataSource_1);
+            }
+            setLoading(false);
+        });
+        var apiServceProfiles = new MESApiService();
+        apiServceProfiles.call('SEC.GetProfiles', [])
+            .then(function (response) {
+            if (apiService.hasErrors) {
+                setShowError(true);
+                setError(apiService.error);
+            }
+            if (response !== undefined && response.tables !== undefined && response.tables[0] !== undefined) {
+                var mydataSource_2 = [];
+                var rows = response.tables[0].rows;
+                rows.forEach(function (row) {
+                    mydataSource_2 = __spreadArray(__spreadArray([], mydataSource_2, true), [row], false);
+                });
+                setProfiles(mydataSource_2);
+            }
+        });
+    };
+    var rowClicked = function (rowClickedEvent) {
+        var data = rowClickedEvent.row;
+        if (data === undefined)
+            return;
+        if (data.id === userId)
+            return;
+        setTitle(data.UserName || '');
+        setUserId(data.UserId);
+        setUserName(data.UserName || '');
+        setUserFirstName(data.FirstName || '');
+        setUserLastName(data.LastName || '');
+        setUserIsActive(data.IsActive || false);
+        setUserIsDomain(data.IsDomainUser || false);
+        var profilesId = (data.ProfilesId || '').split(',').filter(function (el) { return el.length !== 0; });
+        var myProfiles = [];
+        var restProfiles = [];
+        profiles.forEach(function (element) {
+            var profileFound = profilesId.find(function (profile) { return profile === element.ProfileId.toString(); });
+            if (profileFound === undefined)
+                restProfiles.push(element);
+            else
+                myProfiles.push(element);
+        });
+        setUserProfiles(myProfiles);
+        setOtherProfiles(restProfiles);
+        setSelectedUserProfile([]);
+        setSelectedProfile([]);
+    };
+    var setDefaultValues = function () {
+        setTitle('');
+        setUserId(undefined);
+        setUserName('');
+        setUserFirstName('');
+        setUserLastName('');
+        setUserIsActive(false);
+        setUserIsDomain(false);
+        setUserProfiles([]);
+        setOtherProfiles([]);
+        setSelectedUserProfile([]);
+        setSelectedProfile([]);
+    };
+    var cancelDetail = function () {
+        setDefaultValues();
+    };
+    var deleteDetail = function () {
+        if (userId && userId > 0) {
+            var parameters = [];
+            parameters.push({ name: "@UserId", value: (userId === 0 ? null : userId || null) });
+            var apiService_1 = new MESApiService();
+            apiService_1.call('SEC.DeleteUser', parameters)
+                .then(function (response) {
+                if (apiService_1.hasErrors) {
+                    setShowError(true);
+                    setError(apiService_1.error);
+                }
+                else {
+                    setShowSuccess(true);
+                    setSuccessMessage('User was deleted.');
+                    loadComponent();
+                    setDefaultValues();
+                }
+            });
+        }
+    };
+    var saveDetail = function () {
+        // @ts-ignore
+        if (userId >= 0) {
+            var parameters = [];
+            parameters.push({ name: "@UserId", value: (userId === 0 ? null : userId || null) });
+            parameters.push({ name: "@UserName", value: (userName === '' ? null : userName) });
+            parameters.push({ name: "@Name", value: (userFirstName === '' ? null : userFirstName) });
+            parameters.push({ name: "@LastName", value: (userLastName === '' ? null : userLastName) });
+            parameters.push({ name: "@IsDomainUser", value: userIsDomain });
+            parameters.push({ name: "@IsActive", value: userIsActive });
+            var apiService_2 = new MESApiService();
+            apiService_2.call('SEC.UpsertUser', parameters)
+                .then(function (response) {
+                if (apiService_2.hasErrors) {
+                    setShowError(true);
+                    setError(apiService_2.error);
+                }
+                else {
+                    if (response !== undefined && response.tables !== undefined && response.tables[0] !== undefined) {
+                        var idUser = response.tables[0].rows[0] === undefined ? null : response.tables[0].rows[0].UserId || null;
+                        if ((userProfiles || []).length === 0) {
+                            loadComponent();
+                            setDefaultValues();
+                            setShowSuccess(true);
+                            setSuccessMessage('User was ' + (userId === 0 ? ' created.' : ' updated.'));
+                            return;
+                        }
+                        var profileParam_1 = '';
+                        userProfiles.forEach(function (element) {
+                            profileParam_1 = profileParam_1 + element.ProfileId + ',';
+                        });
+                        var parametersProfile = [];
+                        parametersProfile.push({ name: "@UserId", value: (idUser === 0 ? null : idUser || null) });
+                        parametersProfile.push({ name: "@ProfileIds", value: profileParam_1 });
+                        var apiServiceProfile_1 = new MESApiService();
+                        apiServiceProfile_1.call('SEC.SetProfilesToUser', parametersProfile)
+                            .then(function (responseP) {
+                            if (apiServiceProfile_1.hasErrors) {
+                                setShowError(true);
+                                setError(apiServiceProfile_1.error);
+                            }
+                            setShowSuccess(true);
+                            setSuccessMessage('User was ' + (userId === 0 ? ' created.' : ' updated.'));
+                            loadComponent();
+                            setDefaultValues();
+                        });
+                    }
+                    else {
+                        loadComponent();
+                        setDefaultValues();
+                    }
+                }
+            });
+        }
+    };
+    var newUser = function () {
+        setDefaultValues();
+        setTitle('New User');
+        setUserId(0);
+        setUserProfiles([]);
+        setOtherProfiles(profiles);
+        setSelectedUserProfile([]);
+        setSelectedProfile([]);
+    };
+    var changePassword = function () {
+        setOpen(true);
+    };
+    var closeChangePassword = function (flag) {
+        if (flag) {
+            setShowSuccess(true);
+            setSuccessMessage('Password was changed.');
+        }
+        setOpen(false);
+    };
+    var addProfiles = function () {
+        var myProfiles = userProfiles || [];
+        selectedProfile.forEach(function (element) {
+            var profileFound = profiles.find(function (profile) { return profile.ProfileId.toString() === element; });
+            if (profileFound !== undefined) {
+                myProfiles.push(profileFound);
+            }
+        });
+        updateListProfiles(myProfiles);
+    };
+    var removeProfiles = function () {
+        var myProfiles = userProfiles || [];
+        selectedUserProfile.forEach(function (element) {
+            myProfiles = myProfiles.filter(function (item) {
+                return item.ProfileId.toString() !== element;
+            });
+        });
+        updateListProfiles(myProfiles);
+    };
+    var updateListProfiles = function (selectedProfiles) {
+        var myProfiles = [];
+        var restProfiles = [];
+        profiles.forEach(function (element) {
+            var profileFound = selectedProfiles.find(function (profile) { return profile.ProfileId === element.ProfileId; });
+            if (profileFound === undefined)
+                restProfiles.push(element);
+            else
+                myProfiles.push(element);
+        });
+        setUserProfiles(myProfiles);
+        setOtherProfiles(restProfiles);
+        setSelectedUserProfile([]);
+        setSelectedProfile([]);
+    };
+    var closeMessage = function () {
+        setTimeout(function () {
+            setShowSuccess(false);
+            setSuccessMessage('');
+        }, 2000);
+    };
+    // effects
+    React__default["default"].useEffect(loadComponent, []);
+    React__default["default"].useEffect(function () {
+        if (showSuccess) {
+            closeMessage();
+        }
+    }, [showSuccess]); // eslint-disable-line react-hooks/exhaustive-deps
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(reactBootstrap.Alert, { show: showError, variant: "danger", dismissible: true, onClose: function () { setShowError(false); setError(undefined); } },
+            React__default["default"].createElement("strong", null, "There was an error"),
+            React__default["default"].createElement("p", null,
+                " ",
+                error === undefined ? 'There was an error' :
+                    (error.internalError.message === undefined ? error.internalError : error.internalError.message))),
+        React__default["default"].createElement(reactBootstrap.Alert, { show: showSuccess, variant: "success" },
+            React__default["default"].createElement("p", null, successMessage || 'Operation was success')),
+        React__default["default"].createElement("div", { className: "row" },
+            React__default["default"].createElement(core.Typography, { className: "mx-2 mt-0 mb-2 font-weight-bold" }, "User Management")),
+        React__default["default"].createElement("div", { className: "row" },
+            React__default["default"].createElement("div", { className: "col-md-6" },
+                React__default["default"].createElement("div", { className: "text-right" },
+                    React__default["default"].createElement("button", { className: "btn btn-success", onClick: newUser, disabled: userId === 0 }, "New")),
+                React__default["default"].createElement(DataGridControl, { columns: columns, rows: dataSource, pageSize: 20, rowHeight: 30, loading: loading, rowsPerPageOptions: [10, 20, 50, 100], page: page, className: "mes-selectable-datagrid", onRowClick: rowClicked, onPageChange: function (params) { setPage(params.page); } })),
+            React__default["default"].createElement("div", { className: "col-md-6" }, (userId >= 0) &&
+                // @ts-ignore
+                React__default["default"].createElement(MasterDetailPanel, { title: title, saveStatus: true, showDelete: true, deleteStatus: userId > 0, onCancel: cancelDetail, onSave: saveDetail, onDelete: deleteDetail },
+                    React__default["default"].createElement("div", { className: "row" },
+                        React__default["default"].createElement("div", { className: "col-md-6 px-3 py-1" },
+                            React__default["default"].createElement(SimpleTextControl, { title: "Username", styleLabel: { 'minWidth': '150px' }, onChange: setUserName, name: 'userName', value: userName })),
+                        React__default["default"].createElement("div", { className: "col-md-6 px-3 py-1" }, (userId > 0) &&
+                            React__default["default"].createElement(React__default["default"].Fragment, null,
+                                React__default["default"].createElement("button", { className: "btn btn-primary mes-button-primary", onClick: changePassword },
+                                    React__default["default"].createElement("i", { className: "fas fa-lock pr-1" }),
+                                    "Change Password"),
+                                React__default["default"].createElement(ChangePassword, { open: open, onClose: closeChangePassword, userId: userId })))),
+                    React__default["default"].createElement("div", { className: "row" },
+                        React__default["default"].createElement("div", { className: "col-md-6 px-3 py-1" },
+                            React__default["default"].createElement(SimpleTextControl, { title: "Name", styleLabel: { 'minWidth': '150px' }, onChange: setUserFirstName, name: 'firstName', value: userFirstName })),
+                        React__default["default"].createElement("div", { className: "col-md-6 px-3 py-1" },
+                            React__default["default"].createElement(SimpleTextControl, { title: "Lastname", styleLabel: { 'minWidth': '150px' }, onChange: setUserLastName, name: 'lastName', value: userLastName }))),
+                    React__default["default"].createElement("div", { className: "row" },
+                        React__default["default"].createElement("div", { className: "col-md-6 px-3 py-1" },
+                            React__default["default"].createElement(CheckBoxControl, { value: userIsDomain, onCheck: setUserIsDomain, title: "Domain User" })),
+                        React__default["default"].createElement("div", { className: "col-md-6 px-3 py-1" },
+                            React__default["default"].createElement(CheckBoxControl, { value: userIsActive, onCheck: setUserIsActive, title: "Active" }))),
+                    React__default["default"].createElement("div", { className: "row" },
+                        React__default["default"].createElement(core.Typography, { gutterBottom: true, variant: "h5", component: "h2", className: "ml-3 pt-1" }, "Profiles")),
+                    React__default["default"].createElement("div", { className: "row" },
+                        React__default["default"].createElement("div", { className: "col-md-5" },
+                            React__default["default"].createElement(MultipleSelectorControl, { title: "Available", value: selectedProfile, onChange: setSelectedProfile, onDoubleClick: addProfiles, dataSource: otherProfiles, valueField: "ProfileId", textField: "ProfileName" })),
+                        React__default["default"].createElement("div", { className: "col-md-2 d-flex flex-column align-items-center m-auto" },
+                            React__default["default"].createElement("button", { className: "btn btn-primary mes-button-primary my-2", title: "Assign", disabled: (selectedProfile || []).length === 0, onClick: addProfiles },
+                                React__default["default"].createElement("i", { className: "fas fa-angle-right" })),
+                            React__default["default"].createElement("button", { className: "btn btn-primary mes-button-primary my-2", title: "Remove", disabled: (selectedUserProfile || []).length === 0, onClick: removeProfiles },
+                                React__default["default"].createElement("i", { className: "fas fa-angle-left" }))),
+                        React__default["default"].createElement("div", { className: "col-md-5" },
+                            React__default["default"].createElement(MultipleSelectorControl, { title: "Assigned", value: selectedUserProfile, onChange: setSelectedUserProfile, onDoubleClick: removeProfiles, dataSource: userProfiles, valueField: "ProfileId", textField: "ProfileName" }))))
+            // </div>
+            ))));
+}
+
+var getShiftStyle = function (shift) {
+    if (shift === 'D') {
+        return { 'color': '#52a8b7' };
+    }
+    else if (shift === 'N') {
+        return { 'color': '#A5A5A5' };
+    }
+    else {
+        return {};
+    }
+};
+var getCrewStyle = function (crew) {
+    if (crew === 'A') {
+        return { 'color': '#0070C0' };
+    }
+    else if (crew === 'B') {
+        return { 'color': '#FFD24A' };
+    }
+    else if (crew === 'C') {
+        return { 'color': '#FD8359' };
+    }
+    else if (crew === 'D') {
+        return { 'color': '#00B050' };
+    }
+    else {
+        return {};
+    }
+};
+var GetShiftColor = function (props) {
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("i", { className: "fas fa-square mr-2", style: getShiftStyle(props.value) })));
+};
+var GetCrewColor = function (props) {
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("i", { className: "fas fa-square mr-2", style: getCrewStyle(props.value) })));
+};
+
+var Configuration$1 = /** @class */ (function () {
+    function Configuration() {
+        var _a;
+        this.API_PROCEDURE_URL = "/backend";
+        this.API_AUTH_URL = "/authentication";
+        this.TOKEN = ((_a = JSON.parse(localStorage.getItem('userMESData'))) === null || _a === void 0 ? void 0 : _a.token) || '';
+    }
+    return Configuration;
+}());
+
+var MESApiService = /** @class */ (function () {
+    function MESApiService() {
+        this.config = new Configuration$1();
+        this.hasErrors = false;
+        this.error = undefined;
+        this.TOKEN = this.config.TOKEN;
+    }
+    MESApiService.prototype.prepareCall = function () {
+        this.hasErrors = false;
+        this.error = undefined;
+    };
+    MESApiService.prototype.changePassword = function (userId, password) {
+        return __awaiter(this, void 0, void 0, function () {
+            var isError, data;
+            var _this = this;
+            return __generator(this, function (_a) {
+                this.prepareCall();
+                isError = { ok: true };
+                data = {};
+                data.userId = userId;
+                data.password = password;
+                return [2 /*return*/, fetch(this.config.API_AUTH_URL + '/ChangePassword', {
+                        method: "POST",
+                        mode: "cors",
+                        headers: {
+                            "Content-Type": "application/json",
+                            'Authorization': 'Bearer ' + this.TOKEN
+                        },
+                        body: JSON.stringify(data)
+                    })["catch"](function (errorMsg) {
+                        throw new FetchError(errorMsg.message, 404, "ERR_CONNECTION_REFUSED");
+                    })
+                        .then(function (response) {
+                        isError = { ok: response.ok, status: response.status, statusText: response.statusText };
+                        return response.json();
+                    })
+                        .then(function (object) {
+                        if (!isError.ok)
+                            throw new FetchError(isError.statusText, isError.status, object);
+                        return object;
+                    })["catch"](function (err) {
+                        _this.hasErrors = true;
+                        _this.error = err;
+                        return {
+                            hasErrors: true,
+                            error: err
+                        };
+                    })];
+            });
+        });
+    };
+    MESApiService.prototype.authenticate = function (userName, password) {
+        return __awaiter(this, void 0, void 0, function () {
+            var isError, data;
+            var _this = this;
+            return __generator(this, function (_a) {
+                this.prepareCall();
+                isError = { ok: true };
+                data = {};
+                data.userName = userName;
+                data.password = password;
+                return [2 /*return*/, fetch(this.config.API_AUTH_URL + '/Authenticate', {
+                        method: "POST",
+                        mode: "cors",
+                        headers: {
+                            "Content-Type": "application/json"
+                        },
+                        body: JSON.stringify(data)
+                    })["catch"](function (errorMsg) {
+                        throw new FetchError(errorMsg.message, 404, "ERR_CONNECTION_REFUSED");
+                    })
+                        .then(function (response) {
+                        isError = { ok: response.ok, status: response.status, statusText: response.statusText };
+                        return response.json();
+                    })
+                        .then(function (object) {
+                        if (!isError.ok)
+                            throw new FetchError(isError.statusText, isError.status, object);
+                        return object;
+                    })["catch"](function (err) {
+                        _this.hasErrors = true;
+                        _this.error = err;
+                        return {
+                            hasErrors: true,
+                            error: err
+                        };
+                    })];
+            });
+        });
+    };
+    MESApiService.prototype.loginWithAzureAD = function (accessToken) {
+        return __awaiter(this, void 0, void 0, function () {
+            var isError, data;
+            var _this = this;
+            return __generator(this, function (_a) {
+                this.prepareCall();
+                isError = { ok: true };
+                data = {};
+                data.AccessToken = accessToken;
+                return [2 /*return*/, fetch(this.config.API_AUTH_URL + '/authenticate-with-azure-ad', {
+                        method: "POST",
+                        mode: "cors",
+                        headers: {
+                            "Content-Type": "application/json"
+                        },
+                        body: JSON.stringify(data)
+                    })["catch"](function (errorMsg) {
+                        throw new FetchError(errorMsg.message, 404, "ERR_CONNECTION_REFUSED");
+                    })
+                        .then(function (response) {
+                        isError = { ok: response.ok, status: response.status, statusText: response.statusText };
+                        return response.json();
+                    })
+                        .then(function (object) {
+                        if (!isError.ok)
+                            throw new FetchError(isError.statusText, isError.status, object);
+                        return object;
+                    })["catch"](function (err) {
+                        _this.hasErrors = true;
+                        _this.error = err;
+                        return {
+                            hasErrors: true,
+                            error: err
+                        };
+                    })];
+            });
+        });
+    };
+    MESApiService.prototype.call = function (procedure, parameters, database) {
+        if (database === void 0) { database = ''; }
+        return __awaiter(this, void 0, void 0, function () {
+            var data, formattedParameters, isError;
+            var _this = this;
+            return __generator(this, function (_a) {
+                data = {};
+                formattedParameters = [];
+                parameters.forEach(function (element) {
+                    var formattedParameter = {};
+                    formattedParameter.name = element.name;
+                    if (element.value === null || element.value === undefined)
+                        formattedParameter.value = null;
+                    else
+                        formattedParameter.value = element.value;
+                    formattedParameters.push(formattedParameter);
+                });
+                data.method = procedure;
+                data.dataBaseName = database;
+                data.parameters = formattedParameters;
+                Date.prototype.toJSON = function () { return moment__default["default"](this).format('YYYY-MM-DDTHH:mm:ss'); }; // eslint-disable-line
+                isError = { ok: true };
+                return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + '/Execute', {
+                        method: "POST",
+                        mode: "cors",
+                        headers: {
+                            "Content-Type": "application/json",
+                            'Authorization': 'Bearer ' + this.TOKEN
+                        },
+                        body: JSON.stringify(data)
+                    })["catch"](function (errorMsg) {
+                        throw new FetchError(errorMsg.message, 404, "ERR_CONNECTION_REFUSED");
+                    })
+                        .then(function (response) {
+                        isError = { ok: response.ok, status: response.status, statusText: response.statusText };
+                        return response.json();
+                    })
+                        .then(function (object) {
+                        if (!isError.ok)
+                            throw new FetchError(isError.statusText, isError.status, object);
+                        return object;
+                    })["catch"](function (err) {
+                        _this.hasErrors = true;
+                        _this.error = err;
+                        return;
+                    })];
+            });
+        });
+    };
+    MESApiService.prototype["import"] = function (procedure, parameters, files, uniqueFile, database) {
+        if (database === void 0) { database = ''; }
+        return __awaiter(this, void 0, void 0, function () {
+            var formData, formattedParameters, isError;
+            var _this = this;
+            return __generator(this, function (_a) {
+                formData = new FormData();
+                formattedParameters = [];
+                parameters.forEach(function (element) {
+                    var formattedParameter = {};
+                    formattedParameter.name = element.name;
+                    if (element.value === null || element.value === undefined)
+                        formattedParameter.value = null;
+                    else
+                        formattedParameter.value = element.value;
+                    formattedParameters.push(formattedParameter);
+                });
+                Date.prototype.toJSON = function () { return moment__default["default"](this).format('YYYY-MM-DDTHH:mm:ss'); }; // eslint-disable-line
+                isError = { ok: true };
+                files.forEach(function (element) {
+                    formData.append('formFiles', element);
+                });
+                formData.append('method', procedure);
+                formData.append('dataBaseName', database);
+                formData.append('processFirstFile', uniqueFile);
+                formData.append('parameters', JSON.stringify(formattedParameters));
+                return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + '/Import', {
+                        method: "POST",
+                        mode: "cors",
+                        headers: {
+                            'Authorization': 'Bearer ' + this.TOKEN
+                        },
+                        body: formData
+                    })["catch"](function (errorMsg) {
+                        throw new FetchError(errorMsg.message, 404, "ERR_CONNECTION_REFUSED");
+                    })
+                        .then(function (response) {
+                        isError = { ok: response.ok, status: response.status, statusText: response.statusText };
+                        return response.json();
+                    })
+                        .then(function (object) {
+                        if (!isError.ok)
+                            throw new FetchError(isError.statusText, isError.status, object);
+                        return object;
+                    })["catch"](function (err) {
+                        _this.hasErrors = true;
+                        _this.error = err;
+                        return;
+                    })];
+            });
+        });
+    };
+    MESApiService.prototype["export"] = function (procedure, parameters, fileName, database) {
+        if (database === void 0) { database = ''; }
+        return __awaiter(this, void 0, void 0, function () {
+            var data, formattedParameters, isError;
+            var _this = this;
+            return __generator(this, function (_a) {
+                data = {};
+                formattedParameters = [];
+                parameters.forEach(function (element) {
+                    var formattedParameter = {};
+                    formattedParameter.name = element.name;
+                    if (element.value === null || element.value === undefined)
+                        formattedParameter.value = null;
+                    else
+                        formattedParameter.value = element.value;
+                    formattedParameters.push(formattedParameter);
+                });
+                data.method = procedure;
+                data.dataBaseName = database;
+                data.parameters = formattedParameters;
+                data.fileName = fileName || 'Default.xlsx';
+                Date.prototype.toJSON = function () { return moment__default["default"](this).format('YYYY-MM-DDTHH:mm:ss'); }; // eslint-disable-line
+                isError = { ok: true };
+                return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + '/Export', {
+                        method: "POST",
+                        mode: "cors",
+                        headers: {
+                            "Content-Type": "application/json",
+                            'Authorization': 'Bearer ' + this.TOKEN
+                        },
+                        body: JSON.stringify(data)
+                    })["catch"](function (errorMsg) {
+                        throw new FetchError(errorMsg.message, 404, "ERR_CONNECTION_REFUSED");
+                    })
+                        .then(function (response) {
+                        isError = { ok: response.ok, status: response.status, statusText: response.statusText };
+                        if (!isError.ok)
+                            return response.json();
+                        else
+                            return response.blob();
+                    })
+                        .then(function (blob) {
+                        if (!isError.ok)
+                            throw new FetchError(isError.statusText, isError.status, blob);
+                        var url = window.URL.createObjectURL(blob);
+                        var a = document.createElement('a');
+                        a.href = url;
+                        a.download = fileName || 'Default.xlsx';
+                        document.body.appendChild(a); // we need to append the element to the dom -> otherwise it will not work in firefox
+                        a.click();
+                        a.remove(); //afterwards we remove the element again         
+                        return 'ok';
+                    })["catch"](function (err) {
+                        _this.hasErrors = true;
+                        _this.error = err;
+                        return;
+                    })];
+            });
+        });
+    };
+    MESApiService.prototype.exportExcel = function (procedure, parameters, fileName, excelStructure, database) {
+        if (database === void 0) { database = ''; }
+        return __awaiter(this, void 0, void 0, function () {
+            var data, formattedParameters, isError;
+            var _this = this;
+            return __generator(this, function (_a) {
+                data = {};
+                formattedParameters = [];
+                parameters.forEach(function (element) {
+                    var formattedParameter = {};
+                    formattedParameter.name = element.name;
+                    if (element.value === null || element.value === undefined)
+                        formattedParameter.value = null;
+                    else
+                        formattedParameter.value = element.value;
+                    formattedParameters.push(formattedParameter);
+                });
+                /******* Excel Structure *******/
+                if (excelStructure.showAllSheets !== undefined && excelStructure.showAllSheets !== null)
+                    data.showAllSheets = excelStructure.showAllSheets;
+                if (excelStructure.sheets !== undefined && excelStructure.sheets !== null)
+                    data.sheets = excelStructure.sheets;
+                /******* Other Parameter *******/
+                data.method = procedure;
+                data.dataBaseName = database;
+                data.parameters = formattedParameters;
+                data.fileName = fileName || 'Default.xlsx';
+                Date.prototype.toJSON = function () { return moment__default["default"](this).format('YYYY-MM-DDTHH:mm:ss'); }; // eslint-disable-line
+                isError = { ok: true };
+                return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + '/ExportExcel', {
+                        method: "POST",
+                        mode: "cors",
+                        headers: {
+                            "Content-Type": "application/json",
+                            'Authorization': 'Bearer ' + this.TOKEN
+                        },
+                        body: JSON.stringify(data)
+                    })["catch"](function (errorMsg) {
+                        throw new FetchError(errorMsg.message, 404, "ERR_CONNECTION_REFUSED");
+                    })
+                        .then(function (response) {
+                        isError = { ok: response.ok, status: response.status, statusText: response.statusText };
+                        if (!isError.ok)
+                            return response.json();
+                        else
+                            return response.blob();
+                    })
+                        .then(function (blob) {
+                        if (!isError.ok)
+                            throw new FetchError(isError.statusText, isError.status, blob);
+                        var url = window.URL.createObjectURL(blob);
+                        var a = document.createElement('a');
+                        a.href = url;
+                        a.download = fileName || 'Default.xlsx';
+                        document.body.appendChild(a); // we need to append the element to the dom -> otherwise it will not work in firefox
+                        a.click();
+                        a.remove(); //afterwards we remove the element again         
+                        return 'ok';
+                    })["catch"](function (err) {
+                        _this.hasErrors = true;
+                        _this.error = err;
+                        return;
+                    })];
+            });
+        });
+    };
+    return MESApiService;
+}());
+
+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 = React.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
+    };
+}
+
+function Account() {
+    var _a = useToken(), getUserName = _a.getUserName, getUserId = _a.getUserId;
+    var _b = React__default["default"].useState(false), showError = _b[0], setShowError = _b[1];
+    var _c = React__default["default"].useState(undefined), error = _c[0], setError = _c[1];
+    var _d = React__default["default"].useState(""), userLastName = _d[0], setUserLastName = _d[1];
+    var _e = React__default["default"].useState(""), userFirstName = _e[0], setUserFirstName = _e[1];
+    var userId = React__default["default"].useState(getUserId)[0];
+    var userParam = React__default["default"].useState(getUserName)[0];
+    var _f = React__default["default"].useState(''), userName = _f[0], setUserName = _f[1];
+    var _g = React__default["default"].useState(false), userIsDomain = _g[0], setUserIsDomain = _g[1];
+    var _h = React__default["default"].useState(false), userIsActive = _h[0], setUserIsActive = _h[1];
+    var _j = React__default["default"].useState(''), userProfiles = _j[0], setUserProfiles = _j[1];
+    var _k = React__default["default"].useState(''), userPermissions = _k[0], setUserPermissions = _k[1];
+    var _l = React__default["default"].useState(''), userProcedures = _l[0], setUserProcedures = _l[1];
+    var _m = React__default["default"].useState(false), open = _m[0], setOpen = _m[1];
+    var _o = React__default["default"].useState(false), showSuccess = _o[0], setShowSuccess = _o[1];
+    var _p = React__default["default"].useState(''), successMessage = _p[0], setSuccessMessage = _p[1];
+    var changePassword = function () {
+        setOpen(true);
+    };
+    var closeChangePassword = function (flag) {
+        if (flag) {
+            setShowSuccess(true);
+            setSuccessMessage('Password was changed successfully.');
+        }
+        setOpen(false);
+    };
+    var stringToList = function (s) {
+        s = s.replace(/,/g, '\n');
+        s = s.replace(/ *\([^)]*\) */g, "");
+        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 || '')));
+            }
+        });
+    };
+    var closeMessage = function () {
+        setTimeout(function () {
+            setShowSuccess(false);
+            setSuccessMessage('');
+        }, 2000);
+    };
+    React__default["default"].useEffect(loadUserData, []);
+    React__default["default"].useEffect(function () {
+        if (showSuccess === true) {
+            closeMessage();
+        }
+    }, [showSuccess]);
+    return (
+    /* @ts-ignore */
+    React__default["default"].createElement(GenericPanel, { title: "Account Configuration", showPromptError: showError, error: error, showPromptSuccess: showSuccess, successMessage: successMessage },
+        React__default["default"].createElement("div", { className: "row" },
+            React__default["default"].createElement("div", { className: "col-md-3 px-3 py-1" },
+                React__default["default"].createElement(SimpleTextControl, { title: "Username", styleLabel: { 'minWidth': '110px' }, styleTextBox: { 'maxWidth': '200px', 'minWidth': '100px' }, readOnly: true, name: 'userName', value: userName, styleGeneral: { 'display': 'flex' } })),
+            React__default["default"].createElement("div", { className: "col-md-4 px-3 py-1" },
+                React__default["default"].createElement("button", { className: "btn btn-primary mes-button-primary", onClick: changePassword },
+                    React__default["default"].createElement("i", { className: "fas fa-lock pr-1" }),
+                    "Change Password"),
+                React__default["default"].createElement(ChangePassword, { open: open, onClose: closeChangePassword, userId: userId }))),
+        React__default["default"].createElement("div", { className: "row" },
+            React__default["default"].createElement("div", { className: "col-md-3 px-3 py-1" },
+                React__default["default"].createElement(SimpleTextControl, { title: "Name", styleLabel: { 'minWidth': '110px' }, styleTextBox: { 'maxWidth': '200px', 'minWidth': '100px' }, readOnly: true, name: 'firstName', value: userFirstName, styleGeneral: { 'display': 'flex' } })),
+            React__default["default"].createElement("div", { className: "col-md-3 px-3 py-1" },
+                React__default["default"].createElement(SimpleTextControl, { title: "Lastname", styleLabel: { 'minWidth': '110px' }, styleTextBox: { 'maxWidth': '200px', 'minWidth': '100px' }, readOnly: true, name: 'lastName', value: userLastName, styleGeneral: { 'display': 'flex' } }))),
+        React__default["default"].createElement("div", { className: "row" },
+            React__default["default"].createElement("div", { className: "col-md-3 px-3 py-1" },
+                React__default["default"].createElement(CheckBoxControl, { value: userIsDomain, title: "Domain User", readOnly: true, styleTextBox: { 'maxWidth': '300px' }, disabled: true })),
+            React__default["default"].createElement("div", { className: "col-md-3 px-3 py-1" },
+                React__default["default"].createElement(CheckBoxControl, { value: userIsActive, title: "Active", readOnly: true, styleTextBox: { 'maxWidth': '300px' }, disabled: true }))),
+        React__default["default"].createElement("div", { className: "row" },
+            React__default["default"].createElement("div", { className: "col-md-4" },
+                React__default["default"].createElement(core.Typography, { gutterBottom: true, variant: "h5", component: "h2", className: "pt-1" }, "Profiles"),
+                React__default["default"].createElement("textarea", { className: "form-control", placeholder: userProfiles, readOnly: true, style: { "height": "50vh" } })),
+            React__default["default"].createElement("div", { className: "col-md-4" },
+                React__default["default"].createElement(core.Typography, { gutterBottom: true, variant: "h5", component: "h2", className: "pt-1" }, "Permissions"),
+                React__default["default"].createElement("textarea", { className: "form-control", placeholder: userPermissions, readOnly: true, style: { "height": "50vh" } })),
+            React__default["default"].createElement("div", { className: "col-md-4" },
+                React__default["default"].createElement(core.Typography, { gutterBottom: true, variant: "h5", component: "h2", className: "pt-1" }, "Procedures"),
+                React__default["default"].createElement("textarea", { className: "form-control", placeholder: userProcedures, readOnly: true, style: { "height": "50vh" } })))));
+}
+
+var AuthContext = React__default["default"].createContext({});
+var AuthProvider = function (_a) {
+    var children = _a.children, authConfig = _a.authConfig;
+    var useTokenHook = useToken();
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(AuthContext.Provider, { value: useTokenHook },
+            !!useTokenHook.token && React__default["default"].createElement(Authenticated, null, children),
+            !useTokenHook.token && React__default["default"].createElement(Unauthenticated, { authConfig: authConfig }))));
+};
+var Authenticated = function (_a) {
+    var children = _a.children;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, children));
+};
+var Unauthenticated = function (_a) {
+    var authConfig = _a.authConfig;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(Login, { authConfig: authConfig })));
+};
+
+var LoginWithEmailAndPassword = function () {
+    var _a = React.useState(''), username = _a[0], setUserName = _a[1];
+    var _b = React.useState(''), password = _b[0], setPassword = _b[1];
+    var _c = React__default["default"].useState(false), showError = _c[0], setShowError = _c[1];
+    var _d = React__default["default"].useState(undefined), error = _d[0], setError = _d[1];
+    var setToken = React__default["default"].useContext(AuthContext).setToken;
+    var apiService = new MESApiService();
+    var login = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e.preventDefault();
+                    return [4 /*yield*/, apiService.authenticate(username, password)];
+                case 1:
+                    response = _a.sent();
+                    if (apiService.hasErrors) {
+                        setShowError(true);
+                        setError(apiService.error);
+                    }
+                    else {
+                        setToken(response);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleKeypress = function (e) {
+        if (e.charCode === 13) {
+            login(e);
+        }
+    };
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("form", { onSubmit: login },
+            React__default["default"].createElement(reactBootstrap.Alert, { show: showError, variant: "danger", dismissible: true, onClose: function () {
+                    setShowError(false);
+                    setError(undefined);
+                } },
+                React__default["default"].createElement("strong", null, "Bad credentials"),
+                React__default["default"].createElement("p", null,
+                    " ",
+                    error === undefined ? 'There was an error' :
+                        (error.internalError.message === undefined ? error.internalError : error.internalError.message))),
+            React__default["default"].createElement("div", { className: "form-group row" },
+                React__default["default"].createElement("input", { id: "txtUserName", placeholder: "User", name: "userName", onChange: function (e) { return setUserName(e.target.value); }, type: "text", autoComplete: "off", className: "form-control" })),
+            React__default["default"].createElement("div", { className: "form-group row" },
+                React__default["default"].createElement("input", { id: "txtPassword", placeholder: "Password", name: "password", onChange: function (e) { return setPassword(e.target.value); }, onKeyPress: handleKeypress, type: "password", className: "form-control" })),
+            React__default["default"].createElement("div", { className: "row" },
+                React__default["default"].createElement("button", { className: "btn btn-primary mes-button-primary mx-auto col-md-12 mt-3 ", type: "submit", disabled: password.length === 0 || username.length === 0 }, "Login")))));
+};
+
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+/**
+ * Configuration object to be passed to MSAL instance on creation.
+ * For a full list of MSAL.js configuration parameters, visit:
+ * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md
+ */
+var msalConfig = {
+    auth: {
+        clientId: "7c77d607-51e0-4e03-bd50-d7aa18a7163g",
+        authority: "https://login.microsoftonline.com/common",
+        redirectUri: "http://localhost:5000/"
+    },
+    cache: {
+        cacheLocation: "sessionStorage",
+        storeAuthStateInCookie: false
+    },
+    system: {
+        loggerOptions: {
+            loggerCallback: function (level, message, containsPii) {
+                if (containsPii) {
+                    return;
+                }
+                switch (level) {
+                    case msalBrowser.LogLevel.Error:
+                        console.error(message);
+                        return;
+                    case msalBrowser.LogLevel.Info:
+                        console.info(message);
+                        return;
+                    case msalBrowser.LogLevel.Verbose:
+                        console.debug(message);
+                        return;
+                    case msalBrowser.LogLevel.Warning:
+                        console.warn(message);
+                        return;
+                }
+            }
+        }
+    }
+};
+/**
+ * Scopes you add here will be prompted for user consent during sign-in.
+ * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
+ * For more information about OIDC scopes, visit:
+ * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
+ */
+var loginRequest = {
+    scopes: ["User.Read"]
+};
+
+var LoginWithAzureADForm = function () {
+    var setToken = React__default["default"].useContext(AuthContext).setToken;
+    var instance = msalReact.useMsal().instance;
+    var login = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var result, api, loginResponse, e_1, e_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e.preventDefault();
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 7, , 8]);
+                    return [4 /*yield*/, instance.loginPopup(loginRequest)];
+                case 2:
+                    result = _a.sent();
+                    api = new MESApiService();
+                    _a.label = 3;
+                case 3:
+                    _a.trys.push([3, 5, , 6]);
+                    return [4 /*yield*/, api.loginWithAzureAD(result.accessToken)];
+                case 4:
+                    loginResponse = _a.sent();
+                    setToken(loginResponse);
+                    return [3 /*break*/, 6];
+                case 5:
+                    e_1 = _a.sent();
+                    console.log(e_1);
+                    return [3 /*break*/, 6];
+                case 6: return [3 /*break*/, 8];
+                case 7:
+                    e_2 = _a.sent();
+                    console.log({ e: e_2 });
+                    return [3 /*break*/, 8];
+                case 8: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (React__default["default"].createElement("form", { onSubmit: login },
+        React__default["default"].createElement("div", { className: "row" },
+            React__default["default"].createElement("button", { className: "btn btn-primary mes-button-primary mx-auto col-md-12 mt-3 ", type: "submit" }, "Login with Active Directory"))));
+};
+
+var LoginWithAzureAD = function (_a) {
+    var config = _a.config;
+    var msalInstance = new msalBrowser.PublicClientApplication(__assign(__assign({}, msalConfig), {
+        auth: __assign({}, config)
+    }));
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(msalReact.MsalProvider, { instance: msalInstance },
+            React__default["default"].createElement(LoginWithAzureADForm, null))));
+};
+
+var LoginAsGuest = function () {
+    var _a = React__default["default"].useState(false), showError = _a[0], setShowError = _a[1];
+    var _b = React__default["default"].useState(undefined), error = _b[0], setError = _b[1];
+    var setToken = React__default["default"].useContext(AuthContext).setToken;
+    var apiService = new MESApiService();
+    var loginAsGuest = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e.preventDefault();
+                    return [4 /*yield*/, apiService.authenticate('public', 'public')];
+                case 1:
+                    response = _a.sent();
+                    if (apiService.hasErrors) {
+                        setShowError(true);
+                        setError(apiService.error);
+                    }
+                    else {
+                        setToken(response);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(reactBootstrap.Alert, { show: showError, variant: "danger", dismissible: true, onClose: function () {
+                setShowError(false);
+                setError(undefined);
+            } },
+            React__default["default"].createElement("strong", null, "Bad credentials"),
+            React__default["default"].createElement("p", null,
+                " ",
+                error === undefined ? 'There was an error' :
+                    (error.internalError.message === undefined ? error.internalError : error.internalError.message))),
+        React__default["default"].createElement("div", { className: "row" },
+            React__default["default"].createElement("button", { className: "btn btn-primary mes-button-primary mx-auto col-md-12 mt-3 ", role: "button", onClick: loginAsGuest }, "Guest"))));
+};
+
+function Login(_a) {
+    var authConfig = _a.authConfig;
+    var useEmailAndPassword = lodashEs.get(authConfig, 'useEmailAndPassword', true);
+    var useAzureAD = lodashEs.get(authConfig, 'useAzureAD', false);
+    var guestIsEnabled = lodashEs.get(authConfig, 'guestIsEnabled', false);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("header", null,
+            React__default["default"].createElement(reactBootstrap.Navbar, { variant: "dark", expand: "lg", className: "mes-primary-color mes-menu-top" },
+                React__default["default"].createElement(reactBootstrap.Navbar.Brand, { href: "/" }, "MESF"))),
+        React__default["default"].createElement("div", { className: "container-fluid" },
+            React__default["default"].createElement("div", { className: "row" },
+                React__default["default"].createElement("div", { className: "col-md-3 mx-auto my-5" },
+                    React__default["default"].createElement("div", { className: "card" },
+                        React__default["default"].createElement("div", { className: "card-header text-center" }, "Login"),
+                        React__default["default"].createElement("div", { className: "card-body m-3" },
+                            useEmailAndPassword && React__default["default"].createElement(LoginWithEmailAndPassword, null),
+                            useAzureAD && React__default["default"].createElement(LoginWithAzureAD, { config: authConfig.AzureConfig }),
+                            guestIsEnabled && React__default["default"].createElement(LoginAsGuest, null))))))));
+}
+Login.propTypes = {
+    setToken: PropTypes__default["default"].func
+};
+
+function Logout() {
+    var _this = this;
+    var clearToken = React.useContext(AuthContext).clearToken;
+    var navigate = reactRouterDom.useNavigate();
+    var logout = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            clearToken();
+            navigate("/");
+            return [2 /*return*/];
+        });
+    }); };
+    React.useEffect(function () {
+        logout();
+    }, []);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", null, "logging out!!!")));
+}
+Logout.propTypes = {
+    clearEvent: PropTypes__default["default"].func
+};
+
+var RouterContext = React__default["default"].createContext(function () { return React__default["default"].createElement(React__default["default"].Fragment, null); });
+var ConfigurationContext = React__default["default"].createContext([
+    [],
+    function () { return (React__default["default"].createElement(React__default["default"].Fragment, null)); }
+]);
+var NavbarContext = React__default["default"].createContext(function () { return React__default["default"].createElement(React__default["default"].Fragment, null); });
+
+function Header() {
+    var getUserName = useToken().getUserName;
+    var _a = React__default["default"].useState(new Date()), date = _a[0], setDate = _a[1];
+    var userName = React__default["default"].useState(getUserName())[0];
+    var CustomNavbar = React.useContext(NavbarContext);
+    var tick = function () {
+        setDate(new Date());
+    };
+    React__default["default"].useEffect(function () {
+        var timerID = setTimeout(function () {
+            tick();
+        }, 1000);
+        return function () {
+            clearTimeout(timerID);
+        };
+    });
+    return (React__default["default"].createElement(reactBootstrap.Navbar, { variant: "dark", expand: "lg", className: "mes-primary-color mes-menu-top" },
+        React__default["default"].createElement(reactBootstrap.Container, { fluid: true },
+            React__default["default"].createElement(reactBootstrap.Navbar.Brand, { href: "/" }, "MESF"),
+            React__default["default"].createElement(reactBootstrap.Navbar.Toggle, { "aria-controls": "basic-navbar-nav" }),
+            React__default["default"].createElement(reactBootstrap.Navbar.Collapse, { id: "basic-navbar-nav" },
+                React__default["default"].createElement(reactBootstrap.Nav, { className: "me-auto" },
+                    React__default["default"].createElement(reactBootstrap.Nav.Link, { href: "/" }, "Home"),
+                    React__default["default"].createElement(CustomNavbar, null)),
+                React__default["default"].createElement(reactBootstrap.Nav, { className: "ml-auto" },
+                    React__default["default"].createElement(reactBootstrap.Nav, null,
+                        React__default["default"].createElement("span", { className: "navbar-text" }, date.toLocaleTimeString())),
+                    React__default["default"].createElement(reactBootstrap.Nav, { className: "mx-2" },
+                        React__default["default"].createElement(reactBootstrap.Nav.Link, { href: "configuration" },
+                            React__default["default"].createElement("i", { className: "fas fa-cog" }))),
+                    React__default["default"].createElement(reactBootstrap.NavDropdown, { title: React__default["default"].createElement(React__default["default"].Fragment, null,
+                            React__default["default"].createElement("i", { className: "fas fa-language mx-2" }),
+                            "EN"), id: "languages-menu" },
+                        React__default["default"].createElement(reactBootstrap.NavDropdown.Item, { href: "#" }, "EN"),
+                        React__default["default"].createElement(reactBootstrap.NavDropdown.Item, { href: "#" }, "ES"),
+                        React__default["default"].createElement(reactBootstrap.NavDropdown.Item, { href: "#" }, "PT")),
+                    React__default["default"].createElement(reactBootstrap.NavDropdown, { id: "user-menu", title: React__default["default"].createElement(React__default["default"].Fragment, null,
+                            React__default["default"].createElement("i", { className: "fas fa-user mx-2" }),
+                            userName), className: "mx-2" },
+                        React__default["default"].createElement(reactBootstrap.NavDropdown.Item, { href: "account" }, "Account"),
+                        React__default["default"].createElement(reactBootstrap.NavDropdown.Item, { href: "logout" }, "Logout")))))));
+}
+
+function Configuration() {
+    var option = reactRouterDom.useParams().option;
+    var _a = React.useContext(ConfigurationContext), customConfiguration = _a[0], CustomSidebar = _a[1];
+    var routes = __spreadArray(__spreadArray([
+        {
+            path: "/",
+            sidebar: function () { return React__default["default"].createElement("div", null, "configuration"); },
+            main: function () { return React__default["default"].createElement(reactRouterDom.Navigate, { to: "users" }); }
+        },
+        {
+            path: "shifts",
+            sidebar: function () { return React__default["default"].createElement("div", null, "shifts"); },
+            main: function () { return React__default["default"].createElement(ShiftCrew, null); }
+        },
+        {
+            path: "users",
+            sidebar: function () { return React__default["default"].createElement("div", null, "users"); },
+            main: function () { return React__default["default"].createElement(UserManagment, null); }
+        },
+        {
+            path: "profiles",
+            sidebar: function () { return React__default["default"].createElement("div", null, "profiles"); },
+            main: function () { return React__default["default"].createElement(ProfileManagement, null); }
+        }
+    ], customConfiguration, true), [
+        {
+            path: "logs",
+            sidebar: function () { return React__default["default"].createElement("div", null, "logs"); },
+            main: function () { return React__default["default"].createElement(LogConfig, null); }
+        },
+        {
+            path: "jobs",
+            sidebar: function () { return React__default["default"].createElement("div", null, "jobs"); },
+            main: function () { return React__default["default"].createElement(JobConfig, null); }
+        }
+    ], false);
+    return (React__default["default"].createElement(GenericPanel, { title: "Configuration", description: "" },
+        React__default["default"].createElement("div", { className: "row" },
+            React__default["default"].createElement("div", { className: "col-md-2 mt-3 pt-0 pr-0 mes-div-submenu" },
+                React__default["default"].createElement("h3", { className: "mes-menu-group" }, "Plant"),
+                React__default["default"].createElement(MenuList__default["default"], { className: "mes-submenu" },
+                    React__default["default"].createElement(MenuItem__default["default"], { selected: option === 'shifts', className: "p-0" },
+                        React__default["default"].createElement(reactRouterDom.Link, { to: "/configuration/shifts", className: "nav-link" }, "Shift / Crews"))),
+                React__default["default"].createElement("h3", { className: "mes-menu-group" }, "Security"),
+                React__default["default"].createElement(MenuList__default["default"], { className: "mes-submenu" },
+                    React__default["default"].createElement(MenuItem__default["default"], { selected: option === 'users', className: "p-0" },
+                        React__default["default"].createElement(reactRouterDom.Link, { to: "/configuration/users", className: "nav-link" }, "Users")),
+                    React__default["default"].createElement(MenuItem__default["default"], { selected: option === 'profiles', className: "p-0" },
+                        React__default["default"].createElement(reactRouterDom.Link, { to: "/configuration/profiles", className: "nav-link" }, "Profiles"))),
+                React__default["default"].createElement(CustomSidebar, { option: option }),
+                React__default["default"].createElement("h3", { className: "mes-menu-group" }, "Maintenance"),
+                React__default["default"].createElement(MenuList__default["default"], { className: "mes-submenu" },
+                    React__default["default"].createElement(MenuItem__default["default"], { selected: option === 'logs', className: "p-0" },
+                        React__default["default"].createElement(reactRouterDom.Link, { to: "/configuration/logs", className: "nav-link" }, "Logs")),
+                    React__default["default"].createElement(MenuItem__default["default"], { selected: option === 'jobs', className: "p-0" },
+                        React__default["default"].createElement(reactRouterDom.Link, { to: "/configuration/jobs", className: "nav-link" }, "Jobs")))),
+            React__default["default"].createElement("div", { className: "col-md-9 m-3" },
+                React__default["default"].createElement(reactRouterDom.Routes, null, routes.map(function (route, index) { return (React__default["default"].createElement(reactRouterDom.Route, { key: index, path: route.path, element: React__default["default"].createElement(route.main, null) })); }))))));
+}
+
+var Home = function () { return (React__default["default"].createElement("div", { style: {
+        backgroundImage: "url(\"/home.jpg\")",
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+        minHeight: '100%',
+        height: '100vh',
+        width: '100%',
+        position: 'absolute'
+    } })); };
+
+var MESFMainRouter = function () {
+    var CustomRoutes = React.useContext(RouterContext);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(reactRouterDom.Routes, null,
+            React__default["default"].createElement(reactRouterDom.Route, { path: "/", element: React__default["default"].createElement(reactRouterDom.Navigate, { replace: true, to: "/home" }) }),
+            React__default["default"].createElement(reactRouterDom.Route, { path: "/configuration/*", element: React__default["default"].createElement(Configuration, null) }),
+            React__default["default"].createElement(reactRouterDom.Route, { path: "/account", element: React__default["default"].createElement(Account, null) }),
+            React__default["default"].createElement(reactRouterDom.Route, { path: "/home", element: React__default["default"].createElement(Home, null) })),
+        React__default["default"].createElement(CustomRoutes, null)));
+};
+
+var MESFMainContainer = function () { return (React__default["default"].createElement("div", { id: "mainSection", className: "container-fluid container-fluid-main" },
+    React__default["default"].createElement(MESFMainRouter, null))); };
+
+var Navigation = function () { return (React__default["default"].createElement(React__default["default"].Fragment, null,
+    React__default["default"].createElement("div", { className: "wrapper" },
+        React__default["default"].createElement(Header, null),
+        React__default["default"].createElement(MESFMainContainer, null)))); };
+
+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 = "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,{});
+
+function MESFMain(props) {
+    return (React__default["default"].createElement(AuthProvider, { authConfig: props.authentication },
+        React__default["default"].createElement(RouterContext.Provider, { value: props.routes },
+            React__default["default"].createElement(NavbarContext.Provider, { value: props.navbar },
+                React__default["default"].createElement(ConfigurationContext.Provider, { value: props.configurations },
+                    React__default["default"].createElement(reactRouterDom.BrowserRouter, null,
+                        React__default["default"].createElement(reactRouterDom.Routes, null,
+                            React__default["default"].createElement(reactRouterDom.Route, { path: "/logout", element: React__default["default"].createElement(Logout, null) })),
+                        React__default["default"].createElement(Navigation, null)))))));
+}
+
+exports.Account = Account;
+exports.AuthContext = AuthContext;
+exports.AuthProvider = AuthProvider;
+exports.BarChartControl = BarChartControl;
+exports.ChangePassword = ChangePassword;
+exports.CheckBoxControl = CheckBoxControl;
+exports.Configuration = Configuration$1;
+exports.CurrencyFormatter = CurrencyFormatter;
+exports.DataGridControl = DataGridControl;
+exports.DateControl = DateControl;
+exports.DateFormatter = DateFormatter;
+exports.DateTimeControl = DateTimeControl;
+exports.DateTimeFormatter = DateTimeFormatter;
+exports.FetchError = FetchError;
+exports.FilterPanel = FilterPanel;
+exports.GenericPanel = GenericPanel;
+exports.GenericTable = GenericTable;
+exports.GetCrewColor = GetCrewColor;
+exports.GetShiftColor = GetShiftColor;
+exports.HorizontalTextControl = HorizontalTextControl;
+exports.IntegerFormatter = IntegerFormatter;
+exports.JobConfig = JobConfig;
+exports.LogConfig = LogConfig;
+exports.Login = Login;
+exports.Logout = Logout;
+exports.LongFilterPanel = LongFilterPanel;
+exports.MESApiService = MESApiService;
+exports.MESFMain = MESFMain;
+exports.MESSAGE_API = MESSAGE_API;
+exports.MESSAGE_ERRORS = MESSAGE_ERRORS;
+exports.MasterDetailPanel = MasterDetailPanel;
+exports.ModalTreeFilterControl = ModalTreeFilterControl;
+exports.MultipleSelectorControl = MultipleSelectorControl;
+exports.NumberFormatter = NumberFormatter;
+exports.NumericTextControl = NumericTextControl;
+exports.ProfileManagement = ProfileManagement;
+exports.ShiftCrew = ShiftCrew;
+exports.SimpleInputSearchControl = SimpleInputSearchControl;
+exports.SimplePasswordControl = SimplePasswordControl;
+exports.SimpleSelectorControl = SimpleSelectorControl;
+exports.SimpleTextAreaControl = SimpleTextAreaControl;
+exports.SimpleTextControl = SimpleTextControl;
+exports.SimpleTimeControl = SimpleTimeControl;
+exports.TimeControl = TimeControl;
+exports.TimeFormatter = TimeFormatter;
+exports.TreePickerControl = TreePickerControl;
+exports.USER_LABELS = USER_LABELS;
+exports.UploadFileControl = UploadFileControl;
+exports.UserManagment = UserManagment;
+exports.formatNumber = formatNumber;
+exports.getCrewStyle = getCrewStyle;
+exports.getShiftStyle = getShiftStyle;
+exports.useToken = useToken;