@dexteel/mesf-core 3.12.2 → 4.0.0-alpha

package/dist/index.esm.js

@@ -1,7 +1,7 @@
-import { Typography, TextField, FormHelperText, CircularProgress as CircularProgress$1, makeStyles as makeStyles$1, Badge, Dialog as Dialog$1, DialogContent as DialogContent$2, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1, DialogActions as DialogActions$2, DialogTitle as DialogTitle$2, DialogContentText as DialogContentText$1, Button as Button$1, Grid as Grid$1, Paper as Paper$1, Snackbar as Snackbar$1, MenuItem as MenuItem$1, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
-import { get as get$1, isEmpty } from 'lodash-es';
+import { Typography, TextField, FormHelperText, Grid as Grid$1, Button as Button$1, CircularProgress as CircularProgress$1, makeStyles as makeStyles$1, Badge, Dialog as Dialog$1, DialogContent as DialogContent$2, FormControlLabel, Checkbox, DialogActions as DialogActions$2, DialogTitle as DialogTitle$2, DialogContentText as DialogContentText$1, Paper as Paper$1, Snackbar as Snackbar$1, MenuItem as MenuItem$1, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
+import { get as get$1, values, isNil, isEmpty } from 'lodash-es';
 import * as React from 'react';
-import React__default, { useState, useRef, useEffect, Component, createContext, useContext, useCallback, useMemo, lazy, Suspense } from 'react';
+import React__default, { useState, useRef, useEffect, Component, createContext, useContext, useMemo, useCallback, lazy, Suspense } from 'react';
 import { Alert as Alert$1, Modal as Modal$2, Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
 import DialogTitle$1 from '@material-ui/core/DialogTitle';
 import DialogContent$1 from '@material-ui/core/DialogContent';
@@ -48,24 +48,25 @@ import { Alert as Alert$3, AlertTitle } from '@material-ui/lab';
 import { MuiPickersUtilsProvider, KeyboardDatePicker, KeyboardTimePicker } from '@material-ui/pickers';
 import MomentUtils from '@date-io/moment';
 import InputLabel from '@material-ui/core/InputLabel';
-import FormControl from '@material-ui/core/FormControl';
-import FormGroup from '@material-ui/core/FormGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
-import FormHelperText$1 from '@material-ui/core/FormHelperText';
-import stc from 'string-to-color';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+import LockRounded from '@material-ui/icons/LockRounded';
 import DeleteIcon from '@material-ui/icons/Delete';
 import EditIcon from '@material-ui/icons/Edit';
+import { AgGridReact } from 'ag-grid-react';
+import 'ag-grid-enterprise/styles/ag-grid.css';
+import 'ag-grid-enterprise/styles/ag-theme-balham.min.css';
 import { isAncestor, Tree } from '@minoru/react-dnd-treeview';
 import { ArrowRight } from '@material-ui/icons';
 import ImageIcon from '@material-ui/icons/Image';
 import ListAltIcon from '@material-ui/icons/ListAlt';
 import DescriptionIcon from '@material-ui/icons/Description';
+import FormControlLabel$1 from '@material-ui/core/FormControlLabel';
+import Checkbox$1 from '@material-ui/core/Checkbox';
 import Input from '@material-ui/core/Input';
+import FormControl from '@material-ui/core/FormControl';
 import Chip from '@material-ui/core/Chip';
 import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1139,7 +1140,7 @@ var Alert = function (props) {
     return React__default.createElement(Alert$2, __assign({ elevation: 6, variant: "filled" }, props));
 };
 
-var useStyles$q = makeStyles(function (theme) {
+var useStyles$p = makeStyles(function (theme) {
     return createStyles({
         root: {
             '& .MuiDataGrid-row': {
@@ -1169,7 +1170,7 @@ var useStyles$q = makeStyles(function (theme) {
     });
 });
 var TableJobs = function () {
-    var classes = useStyles$q();
+    var classes = useStyles$p();
     var _a = useState(true), loading = _a[0], setLoading = _a[1];
     var actions = useJobsContext().actions;
     var _b = useState(false), messageLoading = _b[0], setMessageLoading = _b[1];
@@ -1455,7 +1456,7 @@ var useGetLogsFromAPI = function (_a) {
     return update;
 };
 
-var useStyles$p = makeStyles(function (theme) {
+var useStyles$o = makeStyles(function (theme) {
     return createStyles({
         title: {
             fontSize: 15
@@ -1474,7 +1475,7 @@ var formatTime = function (nowTime) {
 };
 var ModalLogSelected = function (_a) {
     var show = _a.show, onHide = _a.onHide, selectedLog = _a.selectedLog;
-    var classes = useStyles$p();
+    var classes = useStyles$o();
     return (React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
         React__default.createElement(Modal$2, __assign({}, { show: show }, { onHide: function () { return onHide(false); }, size: "lg", "aria-labelledby": "contained-modal-title-vcenter", centered: true }),
             React__default.createElement(Modal$2.Header, { closeButton: true, style: { padding: "10px 30px" } },
@@ -1559,7 +1560,7 @@ var SearchFilter = function (_a) {
         React__default.createElement(FormHelperText, { style: { marginBottom: 10, marginTop: -15 } }, "Search by Source, Message or User")));
 };
 
-var useStyles$o = makeStyles(function (theme) {
+var useStyles$n = makeStyles(function (theme) {
     return createStyles({
         root: {
             '& .MuiDataGrid-row': {
@@ -1590,7 +1591,7 @@ var useStyles$o = makeStyles(function (theme) {
 });
 var TableLogs = function () {
     var _a = useLogsContext(), _b = _a.state.searchData, Start = _b.Start, End = _b.End, Search = _b.Search, LogTypeCode = _b.LogTypeCode, _c = _a.actions, setStartFilter = _c.setStartFilter, setEndFilter = _c.setEndFilter, setSearchFilter = _c.setSearchFilter, setLogTypeCodeFilter = _c.setLogTypeCodeFilter, resetFilters = _c.resetFilters;
-    var classes = useStyles$o();
+    var classes = useStyles$n();
     var _d = useState(false), showLogModal = _d[0], setShowLogModal = _d[1];
     var _e = useState(true), loading = _e[0], setLoading = _e[1];
     var _f = useState(undefined), selectedLog = _f[0], setSelectedLog = _f[1];
@@ -1701,6 +1702,86 @@ var ProfilesProvider = function (_a) {
     return (React__default.createElement(ProfilesContext.Provider, { value: { state: state, actions: actions } }, children));
 };
 
+var styles = function (theme) {
+    return createStyles({
+        root: {
+            margin: 0,
+            padding: theme.spacing(2)
+        },
+        closeButton: {
+            position: 'absolute',
+            right: theme.spacing(1),
+            top: theme.spacing(1),
+            color: theme.palette.grey[500]
+        }
+    });
+};
+var DialogTitle = withStyles(styles)(function (props) {
+    var children = props.children, classes = props.classes, onClose = props.onClose, other = __rest(props, ["children", "classes", "onClose"]);
+    return (React__default.createElement(DialogTitle$1, __assign({ disableTypography: true, style: { display: "flex", flexWrap: 'nowrap', justifyContent: 'space-between', alignItems: 'baseline' } }, other),
+        React__default.createElement(Typography$1, { variant: "h6" }, children),
+        onClose ? (React__default.createElement(IconButton, { "aria-label": "close", className: classes.closeButton, onClick: onClose },
+            React__default.createElement(CloseIcon, null))) : React__default.createElement(React__default.Fragment, null)));
+});
+var DialogContent = withStyles(function (theme) { return ({
+    root: {
+        padding: theme.spacing(2),
+        minWidth: 300
+    }
+}); })(DialogContent$1);
+var DialogActions = withStyles(function (theme) { return ({
+    root: {
+        margin: 0,
+        padding: theme.spacing(1)
+    }
+}); })(DialogActions$1);
+function Modal(_a) {
+    var children = _a.children, title = _a.title, handleClose = _a.handleClose, open = _a.open, _b = _a.id, id = _b === void 0 ? 'mesf-modal' : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? 'lg' : _c;
+    return (React__default.createElement(Dialog, { onClose: function () { return handleClose(); }, "aria-labelledby": id, open: open, maxWidth: maxWidth, style: { minWidth: 320 } },
+        React__default.createElement(DialogTitle, { id: id, onClose: function () { return handleClose(); } }, title),
+        children));
+}
+var Modal$1 = Object.assign(Modal, {
+    Content: DialogContent,
+    Actions: DialogActions
+});
+
+var ErrorModal = function (_a) {
+    var error = _a.error, onHide = _a.onHide, _b = _a.title, title = _b === void 0 ? "Something went wrong!" : _b, _c = _a.size, size = _c === void 0 ? "sm" : _c;
+    return (!!error ? (React__default.createElement(Modal$1, { open: true, handleClose: function () { onHide(); }, title: title, maxWidth: size },
+        React__default.createElement(Modal$1.Content, null,
+            React__default.createElement("div", null, error)),
+        React__default.createElement(Modal$1.Actions, null,
+            React__default.createElement(Grid$1, { container: true, spacing: 2, justifyContent: "flex-end", style: { padding: "1rem" } },
+                React__default.createElement(Grid$1, { item: true, md: 2, xs: 12 },
+                    React__default.createElement(Button$1, { fullWidth: true, variant: "contained", color: "default", onClick: function () {
+                            onHide();
+                        } }, "Ok")))))) : null);
+};
+
+var INITIAL_VALUES$2 = {
+    ProfileId: null,
+    ProfileName: ""
+};
+
+var getError = function (error) {
+    var arrayOfErrors = values(get$1(error, 'response.data.errors', null));
+    var allErrors = '';
+    if (arrayOfErrors.length) {
+        allErrors = concatErrorMessagges(arrayOfErrors, allErrors);
+    }
+    return get$1(error, 'response.data.result', get$1(error, 'response.data.detail', get$1(error, 'response.data.title', error.toString()) + " " + allErrors));
+};
+var concatErrorMessagges = function (arrayOfErrors, string) {
+    arrayOfErrors.forEach(function (element, index) {
+        if (index !== 0) {
+            string += ". ";
+        }
+        string += element.join('');
+    });
+    return string;
+};
+
 //fx obtener profiles
 var getProfiles$1 = function () { return __awaiter(void 0, void 0, void 0, function () {
     var apiService, resp, e_1;
@@ -1725,111 +1806,114 @@ var getProfiles$1 = function () { return __awaiter(void 0, void 0, void 0, funct
         }
     });
 }); };
-//fx obtener permisos
-var getPermissions = function () { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, resp, e_2;
+//fx crear/insertar new profile
+var upsertProfile = function (profile) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp, e_3;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
                 apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "ProfileId", value: profile.ProfileId });
+                parameters.push({ name: "ProfileName", value: profile.ProfileName });
                 _a.label = 1;
             case 1:
                 _a.trys.push([1, 3, , 4]);
-                return [4 /*yield*/, apiService.call("[SEC].[GetPermissions]", [])];
+                return [4 /*yield*/, apiService.call("[SEC].[UpsertProfile]", parameters)];
             case 2:
                 resp = _a.sent();
+                if (apiService.hasErrors) {
+                    return [2 /*return*/, {
+                            ok: false,
+                            message: apiService.error
+                        }];
+                }
                 return [2 /*return*/, {
                         ok: true,
-                        data: resp
+                        data: getError(resp)
                     }];
             case 3:
-                e_2 = _a.sent();
-                return [2 /*return*/, { ok: false, message: e_2.toString() }];
+                e_3 = _a.sent();
+                return [2 /*return*/, {
+                        ok: true,
+                        data: getError(e_3)
+                    }];
             case 4: return [2 /*return*/];
         }
     });
 }); };
-//fx crear/insertar new profile
-var upsertProfile = function (profile) { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, parameters, resp, e_3;
+// PROFILES PROCEDURES
+var getProcedures = function () { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
                 apiService = new MESApiService();
                 parameters = [];
-                parameters.push({ name: "ProfileId", value: profile.ProfileId });
-                parameters.push({ name: "ProfileName", value: profile.ProfileName });
-                _a.label = 1;
+                return [4 /*yield*/, apiService.callV2("[SEC].[GetProcedures]", parameters)];
             case 1:
-                _a.trys.push([1, 3, , 4]);
-                return [4 /*yield*/, apiService.call("[SEC].[UpsertProfile]", parameters)];
-            case 2:
                 resp = _a.sent();
+                if (apiService.hasErrors) {
+                    return [2 /*return*/, {
+                            ok: false,
+                            message: apiService.error.message
+                        }];
+                }
                 return [2 /*return*/, {
                         ok: true,
                         data: resp
                     }];
-            case 3:
-                e_3 = _a.sent();
-                return [2 /*return*/, { ok: false, message: e_3.toString() }];
-            case 4: return [2 /*return*/];
         }
     });
 }); };
-//fx setear permisos de un profile
-var setPermissionsToProfile = function (ProfileId, PermissionIds) { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, parameters, resp, e_4;
+var getProceduresByProfileId = function (profile) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
                 apiService = new MESApiService();
                 parameters = [];
-                parameters.push({ name: "ProfileId", value: ProfileId });
-                parameters.push({ name: "PermissionIds", value: PermissionIds.join(" , ") });
-                _a.label = 1;
+                parameters.push({ name: "ProfileId", value: profile.ProfileId });
+                return [4 /*yield*/, apiService.callV2("[SEC].[GetProceduresByProfileId]", parameters)];
             case 1:
-                _a.trys.push([1, 3, , 4]);
-                return [4 /*yield*/, apiService.call("[SEC].[SetPermissionsToProfile]", parameters)];
-            case 2:
                 resp = _a.sent();
+                if (apiService.hasErrors) {
+                    return [2 /*return*/, {
+                            ok: false,
+                            message: apiService.error.message
+                        }];
+                }
                 return [2 /*return*/, {
                         ok: true,
                         data: resp
                     }];
-            case 3:
-                e_4 = _a.sent();
-                return [2 /*return*/, { ok: false, message: e_4.toString() }];
-            case 4: return [2 /*return*/];
         }
     });
 }); };
-//fx setear profiles de un profile
-var setProfilesToProfile = function (ProfileId, HasProfilesId) { return __awaiter(void 0, void 0, void 0, function () {
-    var apiService, parameters, resp, e_5;
+var upsertProfilesProcedures = function (profile, procedures) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, procedureIds, procedureIdsString, parameters, resp;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
                 apiService = new MESApiService();
+                procedureIds = procedures.map(function (item) { return item.ProcedureId; });
+                procedureIdsString = procedureIds.join(',');
                 parameters = [];
-                parameters.push({ name: "ProfileId", value: ProfileId });
-                parameters.push({ name: "HasProfileIds", value: HasProfilesId.join(" , ") });
-                _a.label = 1;
+                parameters.push({ name: "ProfileId", value: profile.ProfileId });
+                parameters.push({ name: "ProcedureIds", value: procedureIdsString });
+                return [4 /*yield*/, apiService.callV2("[SEC].[UpsertProfileProcedures]", parameters)];
             case 1:
-                _a.trys.push([1, 3, , 4]);
-                return [4 /*yield*/, apiService.call("[SEC].[SetProfilesToProfile]", parameters)];
-            case 2:
                 resp = _a.sent();
                 if (apiService.hasErrors) {
-                    return [2 /*return*/, { ok: false, message: apiService.error.internalError.message }];
+                    return [2 /*return*/, {
+                            ok: false,
+                            message: apiService.error.message
+                        }];
                 }
                 return [2 /*return*/, {
                         ok: true,
                         data: resp
                     }];
-            case 3:
-                e_5 = _a.sent();
-                return [2 /*return*/, { ok: false, message: e_5.toString() }];
-            case 4: return [2 /*return*/];
         }
     });
 }); };
@@ -1860,426 +1944,108 @@ var deleteProfile = function (profileId) { return __awaiter(void 0, void 0, void
     });
 }); };
 
-var useGetPermissionsEffect = function (_a) {
-    var setIsLoading = _a.setIsLoading, setPermissions = _a.setPermissions;
-    useEffect(function () {
-        var canceled = false;
-        setIsLoading(true);
-        getPermissions()
-            .then(function (res) {
-            var permisions = get$1(res, "data.tables[0].rows", null);
-            if (permisions) {
-                if (canceled)
-                    return;
-                setPermissions(permisions);
-            }
-            else
-                console.log("algo falló");
-        })["finally"](function () {
-            if (canceled)
-                return;
-            setIsLoading(false);
-        });
-        return function () {
-            canceled = true;
-        };
-    }, []);
-};
-
-var useGetColorByPermissionId = function (_a) {
-    var profilesToProfiles = _a.profilesToProfiles;
-    var profiles = useProfilesContext().state.profiles;
-    return function (PermissionId) {
-        var _a;
-        var getColorByProfileName = function (profileName) {
-            return stc(profileName);
-        };
-        if (!profilesToProfiles)
-            return false;
-        var color = "";
-        var _loop_1 = function (i) {
-            var pId = profilesToProfiles[i];
-            var profile = profiles.find(function (profile) { return profile.ProfileId === pId; });
-            if (profile) {
-                if ((_a = profile.PermissionsId) === null || _a === void 0 ? void 0 : _a.split(",").map(function (prId) { return parseInt(prId); }).includes(PermissionId)) {
-                    color = getColorByProfileName(profile.ProfileName);
-                }
-                if (color)
-                    return "break";
-            }
-        };
-        for (var i = 0; i < profilesToProfiles.length; i++) {
-            var state_1 = _loop_1(i);
-            if (state_1 === "break")
-                break;
-        }
-        return color;
-    };
-};
-
-var isPermissionAssigned = function (PermissionId, asignedPermissions) {
-    return asignedPermissions === null || asignedPermissions === void 0 ? void 0 : asignedPermissions.includes(PermissionId);
-};
-
-var useIsPermissionInherited = function (_a) {
-    var profilesToProfiles = _a.profilesToProfiles;
-    var profiles = useProfilesContext().state.profiles;
-    return function (PermissionId) {
-        var _a;
-        if (!profilesToProfiles)
-            return false;
-        var permissionIsInherited = false;
-        var _loop_1 = function (i) {
-            var pId = profilesToProfiles[i];
-            var profile = profiles.find(function (profile) { return profile.ProfileId === pId; });
-            if (profile) {
-                permissionIsInherited = (_a = profile.PermissionsId) === null || _a === void 0 ? void 0 : _a.split(",").map(function (prId) { return parseInt(prId); }).includes(PermissionId);
-                if (permissionIsInherited)
-                    return "break";
-            }
-        };
-        for (var i = 0; i < profilesToProfiles.length; i++) {
-            var state_1 = _loop_1(i);
-            if (state_1 === "break")
-                break;
-        }
-        return !!permissionIsInherited;
-    };
-};
-
-var useHandleAsignedPermission = function (_a) {
-    var asignedPermissions = _a.asignedPermissions, onChange = _a.onChange;
-    return function (event) {
-        var index = asignedPermissions.indexOf(parseInt(event.target.value));
-        if (index === -1) {
-            // si es -1 traemos los arr de asignados y agregamos el checkeado
-            onChange(__spreadArray(__spreadArray([], asignedPermissions, true), [parseInt(event.target.value)], false));
-        }
-        else {
-            //si ya existe en el array devolvemos los permisos que no son iguales al permiso sin marcar
-            onChange(asignedPermissions.filter(function (asignedPermission) { return asignedPermission !== parseInt(event.target.value); }));
-        }
-    };
-};
-
-var useStyles$n = makeStyles(function (theme) {
+var useStyles$m = makeStyles(function (theme) {
     return createStyles({
-        formControl: {
-            margin: "0 12px",
-            width: "50%",
-            userSelect: "none"
+        title: {
+            fontSize: 15
         },
-        chips: {
-            display: 'flex',
-            flexWrap: 'wrap'
+        modalTitle: {
+            fontSize: 15,
+            marginTop: theme.spacing(1)
         },
         chip: {
             margin: 2
         },
-        noLabel: {
-            marginTop: theme.spacing(3)
-        }
-    });
-});
-var PermissionsPicker = function (_a) {
-    var isLoading = _a.isLoading, setIsLoading = _a.setIsLoading, profileForDelete = _a.profileForDelete, value = _a.value, onChange = _a.onChange, profilesToProfiles = _a.profilesToProfiles;
-    var profiles = useProfilesContext().state.profiles;
-    var classes = useStyles$n();
-    var _b = useState([]), permissions = _b[0], setPermissions = _b[1];
-    var _c = useState(value), asignedPermissions = _c[0], setAsignedPermissions = _c[1];
-    var getColorByPermissionId = useGetColorByPermissionId({ profilesToProfiles: profilesToProfiles });
-    var handleAsignedPermission = useHandleAsignedPermission({ onChange: onChange, asignedPermissions: asignedPermissions });
-    var isPermissionInherited = useIsPermissionInherited({ profilesToProfiles: profilesToProfiles });
-    var isPermissionChecked = function (PermissionId) {
-        return isPermissionAssigned(PermissionId, asignedPermissions) || isPermissionInherited(PermissionId);
-    };
-    function getPermissionNameById(permissionsId) {
-        var _a;
-        return ((_a = permissions.find(function (p) { return p.PermissionId === permissionsId; })) === null || _a === void 0 ? void 0 : _a.PermissionName.replaceAll("MES.", " ").replaceAll("Manage", "Manage ")) || '';
-    }
-    function getProfileNameById(profile) {
-        var _a;
-        // FIXME: issue prueba y manager quedan pegados
-        return ((_a = profiles.find(function (p) { return p.ProfileId === profile; })) === null || _a === void 0 ? void 0 : _a.ProfileName) || ' ';
-    }
-    useGetPermissionsEffect({ setIsLoading: setIsLoading, setPermissions: setPermissions });
-    useEffect(function () {
-        setAsignedPermissions(value);
-    }, [value]);
-    return (React__default.createElement(Grid, { container: true },
-        React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
-            isLoading && React__default.createElement(React__default.Fragment, null),
-            !isLoading && permissions.length && (React__default.createElement(FormControl, { className: classes.formControl },
-                React__default.createElement(FormGroup, null, permissions.map(function (_a) {
-                    var PermissionId = _a.PermissionId;
-                    return (React__default.createElement("div", { key: "permission-".concat(PermissionId) },
-                        React__default.createElement(FormControlLabel, { style: { margin: "10 0" }, disabled: !!profileForDelete ? !!profileForDelete : isPermissionInherited(PermissionId), value: PermissionId, label: React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
-                                getPermissionNameById(PermissionId),
-                                React__default.createElement("div", { style: {
-                                        height: 10, width: 10, backgroundColor: "".concat(getColorByPermissionId(PermissionId)), marginLeft: 10, borderRadius: 50
-                                    } })), control: (React__default.createElement(Checkbox, { color: "primary", checked: isPermissionChecked(PermissionId), onChange: handleAsignedPermission })) }),
-                        isPermissionInherited(PermissionId) && React__default.createElement(FormHelperText$1, { style: { fontSize: 10, marginLeft: 30, marginTop: -15 } },
-                            "Inherited from: ",
-                            profilesToProfiles.map(function (profile) { return getProfileNameById(profile).replaceAll("Profile", ""); }),
-                            "  ")));
-                })))))));
-};
-
-var INITIAL_VALUES$2 = {
-    ProfileId: null,
-    ProfileName: "",
-    HasProfilesId: [],
-    HasProfiles: "",
-    PermissionsId: [],
-    Permissions: []
-};
-
-var useGetProfilesEffect = function (_a) {
-    var setIsLoading = _a.setIsLoading, setProfiles = _a.setProfiles;
-    useEffect(function () {
-        var canceled = false;
-        setIsLoading(true);
-        getProfiles$1()
-            .then(function (res) {
-            var permisions = get$1(res, "data.tables[0].rows", null);
-            if (permisions) {
-                if (canceled)
-                    return;
-                setProfiles(permisions);
-            }
-            else
-                console.log("algo falló");
-        })["finally"](function () {
-            if (canceled)
-                return;
-            setIsLoading(false);
-        });
-        return function () {
-            canceled = true;
-        };
-    }, []);
-};
-
-var useStyles$m = makeStyles(function (theme) {
-    return createStyles({
-        formControl: {
-            margin: "0 12px",
-            width: "50%",
-            userSelect: "none"
-        },
-        chips: {
-            display: 'flex',
-            flexWrap: 'wrap'
+        errorLabel: {
+            fontSize: 12,
+            color: "#F44336"
         },
-        chip: {
-            margin: 2
+        error: {
+            marginBottom: "15px"
         },
-        noLabel: {
-            marginTop: theme.spacing(3)
+        textError: {
+            listStyle: "none",
+            padding: 0,
+            margin: 0
         }
     });
 });
-var ProfilesPicker$1 = function (_a) {
-    var isLoading = _a.isLoading, setIsLoading = _a.setIsLoading, profileForDelete = _a.profileForDelete, profileIdForEdit = _a.profileIdForEdit, value = _a.value, onChange = _a.onChange;
+var EditProfile = function (_a) {
+    var _b;
+    var profileForEdit = _a.profileForEdit, show = _a.show, onHide = _a.onHide;
     var classes = useStyles$m();
-    var _b = useProfilesContext(), profiles = _b.state.profiles, setProfiles = _b.actions.setProfiles;
-    var _c = useState([]), asignedProfiles = _c[0], setAsignedProfiles = _c[1];
-    var handleAsignedProfile = function (event) {
-        var index = asignedProfiles.indexOf(parseInt(event.target.value));
-        if (index === -1) {
-            onChange(__spreadArray(__spreadArray([], asignedProfiles, true), [parseInt(event.target.value)], false));
-        }
-        else {
-            onChange(asignedProfiles.filter(function (asignedProfile) { return asignedProfile !== parseInt(event.target.value); }));
-        }
-    };
-    function getProfileNameById(profilesId) {
-        var _a;
-        return (_a = profiles.find(function (p) { return p.ProfileId === profilesId; })) === null || _a === void 0 ? void 0 : _a.ProfileName.replaceAll("Profile", " ");
-    }
-    var doesProfileContainProfileForEdit = function (ProfileId) {
-        var _a;
-        if (!profileIdForEdit)
-            return false;
-        var profile = profiles.find(function (p) { return p.ProfileId === ProfileId; });
-        var hasProfilesIds = ((_a = profile === null || profile === void 0 ? void 0 : profile.HasProfilesId) === null || _a === void 0 ? void 0 : _a.split(",").map(function (pId) { return parseInt(pId); })) || [];
-        return hasProfilesIds.includes(profileIdForEdit);
-    };
-    var isProfileIdForEdit = function (ProfileId) {
-        if (!profileIdForEdit)
-            return false;
-        return ProfileId === profileIdForEdit;
-    };
-    var isProfileIdDisabled = function (ProfileId) {
-        return isProfileIdForEdit(ProfileId) || doesProfileContainProfileForEdit(ProfileId);
-    };
-    useGetProfilesEffect({ setIsLoading: setIsLoading, setProfiles: setProfiles });
-    useEffect(function () {
-        setAsignedProfiles(value);
-    }, [value]);
-    var getColorByProfileName = function (profileName) {
-        return stc(profileName);
-    };
-    return (React__default.createElement(Grid, { container: true },
-        React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
-            isLoading && React__default.createElement(React__default.Fragment, null),
-            !isLoading && profiles.length && (React__default.createElement(FormControl, { className: classes.formControl },
-                React__default.createElement(FormGroup, null, profiles.map(function (_a) {
-                    var ProfileId = _a.ProfileId, ProfileName = _a.ProfileName;
-                    return (React__default.createElement("div", { key: "profile-".concat(ProfileId) },
-                        React__default.createElement(FormControlLabel, { style: { margin: "10 0" }, disabled: !!profileForDelete ? !!profileForDelete : isProfileIdDisabled(ProfileId), label: React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
-                                getProfileNameById(ProfileId),
-                                asignedProfiles.includes(ProfileId) && React__default.createElement("div", { style: { height: 10, width: 10, backgroundColor: getColorByProfileName(ProfileName), marginLeft: 10, borderRadius: 50 } })), control: React__default.createElement(Checkbox, { value: ProfileId, color: "primary", checked: asignedProfiles.includes(ProfileId), onChange: handleAsignedProfile }) }),
-                        isProfileIdForEdit(ProfileId) && React__default.createElement(FormHelperText$1, { style: { fontSize: 10, marginLeft: 30, marginTop: -15 } }, "Editing this profile"),
-                        doesProfileContainProfileForEdit(ProfileId) && React__default.createElement(FormHelperText$1, { style: { fontSize: 10, marginLeft: 30, marginTop: -15 } }, "Circular reference not allowed")));
-                })))))));
-};
-
-var useStyles$l = makeStyles(function (theme) {
-    return createStyles({
-        title: {
-            fontSize: 15
-        },
-        modalTitle: {
-            fontSize: 15,
-            marginTop: theme.spacing(1)
-        },
-        permissionsPicker: {
-            padding: "0"
-        },
-        chip: {
-            margin: 2
-        },
-        errorLabel: {
-            fontSize: 12,
-            color: "#F44336"
-        },
-        error: {
-            marginBottom: "15px"
-        },
-        textError: {
-            listStyle: "none",
-            padding: 0,
-            margin: 0
-        }
-    });
-});
-var EditProfile = function (_a) {
-    var _b;
-    var profileForEdit = _a.profileForEdit, show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$l();
-    var _c = useState(false), open = _c[0], setOpen = _c[1];
-    var _d = useState(true), isLoading = _d[0], setIsLoading = _d[1];
-    var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
-    var _f = useState([]), errorsApi = _f[0], setErrorsApi = _f[1];
-    var _g = useForm({ defaultValues: INITIAL_VALUES$2 }), register = _g.register, control = _g.control, setValue = _g.setValue, handleSubmit = _g.handleSubmit, errors = _g.formState.errors, watch = _g.watch;
-    var profilesToProfiles = watch('HasProfilesId');
-    var isPermissionInherited = useIsPermissionInherited({
-        profilesToProfiles: profilesToProfiles
-    });
+    var _c = useState(null); _c[0]; _c[1];
+    var _d = useState(false), open = _d[0], setOpen = _d[1];
+    var _e = useState(true), isLoading = _e[0], setIsLoading = _e[1];
+    var _f = useState(false), isSubmitLoading = _f[0], setIsSubmitLoading = _f[1];
+    var _g = useState(""), error = _g[0], setError = _g[1];
+    var _h = useState(""), alertMessage = _h[0], setAlertMessage = _h[1];
+    var _j = useForm({ defaultValues: INITIAL_VALUES$2 }), register = _j.register; _j.control; var setValue = _j.setValue, handleSubmit = _j.handleSubmit, errors = _j.formState.errors; _j.watch;
     var handleClose = function (event, reason) {
         if (reason === 'clickaway') {
             return;
         }
         setOpen(false);
     };
-    var onSubmit = function (data) { return __awaiter(void 0, void 0, void 0, function () {
-        var res, profileId, permissionsForSave, sPtP_1, e_1;
+    var onSubmit = function (profile) { return __awaiter(void 0, void 0, void 0, function () {
+        var res;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     setIsSubmitLoading(true);
-                    _a.label = 1;
+                    return [4 /*yield*/, upsertProfile(profile)];
                 case 1:
-                    _a.trys.push([1, 6, , 7]);
-                    return [4 /*yield*/, upsertProfile(data)];
-                case 2:
                     res = _a.sent();
-                    profileId = (res.data.tables[0].rows[0].ProfileId);
-                    permissionsForSave = data.PermissionsId.filter(function (pId) { return !isPermissionInherited(pId); });
-                    return [4 /*yield*/, setPermissionsToProfile(profileId, permissionsForSave)];
-                case 3:
-                    _a.sent();
-                    if (!data.HasProfilesId) return [3 /*break*/, 5];
-                    return [4 /*yield*/, setProfilesToProfile(profileId, data.HasProfilesId)];
-                case 4:
-                    sPtP_1 = _a.sent();
-                    if (!sPtP_1.ok) {
-                        setIsSubmitLoading(false);
-                        return [2 /*return*/, setErrorsApi(function (prevErrors) { return __spreadArray(__spreadArray([], prevErrors, true), [sPtP_1.message], false); })];
+                    if (!res.ok) {
+                        setError(res.message);
+                        setAlertMessage("Please try again");
+                    }
+                    else {
+                        setAlertMessage("The profile was edited successfully");
+                        onHide(true);
                     }
-                    _a.label = 5;
-                case 5:
                     setIsSubmitLoading(false);
-                    onHide(true);
                     setOpen(true);
-                    return [3 /*break*/, 7];
-                case 6:
-                    e_1 = _a.sent();
-                    console.log(e_1);
-                    return [3 /*break*/, 7];
-                case 7: return [2 /*return*/];
+                    return [2 /*return*/];
             }
         });
     }); };
     useEffect(function () {
-        var _a, _b;
         if (show) {
             setIsLoading(true);
             setIsSubmitLoading(false);
-            setErrorsApi([]);
             if (profileForEdit) {
                 setValue("ProfileId", profileForEdit.ProfileId);
                 setValue("ProfileName", profileForEdit.ProfileName);
-                setValue("HasProfilesId", (_a = profileForEdit.HasProfilesId) === null || _a === void 0 ? void 0 : _a.split(',').map(function (pId) { return parseInt(pId); }));
-                setValue("HasProfiles", profileForEdit.HasProfiles);
-                setValue("Permissions", profileForEdit.Permissions);
-                setValue("PermissionsId", (((_b = profileForEdit.PermissionsId) === null || _b === void 0 ? void 0 : _b.split(',').map(function (pId) { return parseInt(pId); })) || []));
+                setIsLoading(false);
             }
         }
     }, [show]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Modal$2, __assign({}, { show: show }, { onHide: function () { return onHide(false); }, size: "lg", "aria-labelledby": "contained-modal-title-vcenter", centered: true }),
+        !error && !isLoading && (React.createElement(Modal$2, __assign({}, { show: show }, { onHide: function () { return onHide(false); }, size: "lg", "aria-labelledby": "contained-modal-title-vcenter", centered: true }),
             React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
                 React.createElement(Modal$2.Header, { closeButton: true, style: { padding: "10px 30px" } },
-                    React.createElement(Modal$2.Title, { id: "contained-modal-title-vcenter", style: { margin: "20px 0 0" } }, "PROFILE")),
+                    React.createElement(Modal$2.Title, { id: "contained-modal-title-vcenter", style: { margin: "20px 0 0" } }, profileForEdit === null || profileForEdit === void 0 ? void 0 :
+                        profileForEdit.ProfileName,
+                        " Profile")),
                 React.createElement(Modal$2.Body, { style: { padding: "15px 30px" } },
-                    !!errorsApi.length &&
-                        React.createElement(Alert, { severity: "error", className: classes.error },
-                            React.createElement(AlertTitle, null, "Error"),
-                            React.createElement("ul", { className: classes.textError }, errorsApi.map(function (error) { return React.createElement("li", { key: "error-".concat(error) }, error); }))),
-                    isLoading && React.createElement(Grid, { container: true, justifyContent: 'center', alignItems: 'center', style: { minHeight: '150px' } },
-                        React.createElement(LazyLoading, null)),
-                    !isLoading && (React.createElement(React.Fragment, null,
-                        React.createElement(Grid, { container: true, spacing: 1 },
-                            React.createElement(Grid, { item: true, md: 12, xs: 12 },
-                                React.createElement(TextField, __assign({}, register("ProfileName", { required: true }), { label: "Profile name", variant: "outlined", error: !!errors.ProfileName, fullWidth: true, margin: "dense", autoComplete: 'off' })),
-                                "  ",
-                                ((_b = errors.ProfileName) === null || _b === void 0 ? void 0 : _b.type) === 'required' && React.createElement("span", { className: classes.errorLabel }, "Profile name is required"))))),
-                    React.createElement(Grid, { container: true },
-                        React.createElement(Grid, { item: true, md: 6, xs: 12 },
-                            React.createElement(Modal$2.Title, { className: classes.modalTitle, id: "contained-modal-title-vcenter" }, "PROFILES"),
-                            React.createElement(Controller, { name: "HasProfilesId", control: control, render: function (_a) {
-                                    var _b = _a.field, onChange = _b.onChange, value = _b.value;
-                                    return (React.createElement(ProfilesPicker$1, { value: value, onChange: onChange, isLoading: isLoading, setIsLoading: setIsLoading, profileIdForEdit: profileForEdit === null || profileForEdit === void 0 ? void 0 : profileForEdit.ProfileId, profileForDelete: null }));
-                                } })),
-                        React.createElement(Grid, { item: true, md: 6, xs: 12 },
-                            React.createElement(Modal$2.Title, { className: classes.modalTitle, id: "contained-modal-title-vcenter" }, "PERMISSIONS"),
-                            React.createElement(Controller, { name: "PermissionsId", control: control, render: function (_a) {
-                                    var _b = _a.field, onChange = _b.onChange, value = _b.value;
-                                    return (React.createElement(PermissionsPicker, { isLoading: isLoading, setIsLoading: setIsLoading, onChange: onChange, profilesToProfiles: profilesToProfiles, value: value, profileForDelete: null }));
-                                } })))),
+                    React.createElement(Grid, { container: true, spacing: 1 },
+                        React.createElement(Grid, { item: true, md: 12, xs: 12 },
+                            React.createElement(TextField, __assign({}, register("ProfileName", { required: true }), { label: "Profile name", variant: "outlined", error: !!errors.ProfileName, fullWidth: true, margin: "dense", autoComplete: 'off' })),
+                            "  ",
+                            ((_b = errors.ProfileName) === null || _b === void 0 ? void 0 : _b.type) === 'required' && React.createElement("span", { className: classes.errorLabel }, "Profile name is required")))),
                 React.createElement(Modal$2.Footer, { style: { padding: "20px 30px 30px" } },
                     React.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
                         React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
                             React.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Cancel")),
                         React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
-                            React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress$1, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: 'submit' }, "Save")))))),
+                            React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress$1, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: 'submit' }, "Save"))))))),
         React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
-            React.createElement(Alert, { severity: "info", onClose: handleClose }, "The profile was edited successfully"))));
+            React.createElement(Alert, { severity: "info", onClose: handleClose }, alertMessage)),
+        React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
-var useStyles$k = makeStyles(function (theme) {
+var useStyles$l = makeStyles(function (theme) {
     return createStyles({
         title: {
             fontSize: 15
@@ -2288,9 +2054,6 @@ var useStyles$k = makeStyles(function (theme) {
             fontSize: 15,
             marginTop: theme.spacing(1)
         },
-        permissionsPicker: {
-            padding: "0"
-        },
         chip: {
             margin: 2
         },
@@ -2302,42 +2065,31 @@ var useStyles$k = makeStyles(function (theme) {
 });
 var CreateProfile = function (_a) {
     var _b;
-    var show = _a.show, onHide = _a.onHide, getProfilesFromAPI = _a.getProfilesFromAPI;
-    var _c = useState(false), open = _c[0], setOpen = _c[1];
-    var _d = useState(false), isSubmitLoading = _d[0], setIsSubmitLoading = _d[1];
-    var _e = useState(true), isLoading = _e[0], setIsLoading = _e[1];
-    var classes = useStyles$k();
-    var _f = useForm({ defaultValues: INITIAL_VALUES$2 }), register = _f.register, control = _f.control, handleSubmit = _f.handleSubmit, reset = _f.reset, errors = _f.formState.errors, watch = _f.watch;
-    var profilesToProfiles = watch('HasProfilesId');
+    var show = _a.show, onHide = _a.onHide;
+    var _c = useState(false), openSnackbar = _c[0], setOpenSnackbar = _c[1];
+    var _d = useState(""), message = _d[0], setMessage = _d[1];
+    var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
+    var _f = useState(''), error = _f[0], setError = _f[1];
+    var classes = useStyles$l();
+    var _g = useForm({ defaultValues: INITIAL_VALUES$2 }), register = _g.register, handleSubmit = _g.handleSubmit, reset = _g.reset, errors = _g.formState.errors;
     var onSubmit = function (data) { return __awaiter(void 0, void 0, void 0, function () {
-        var res, profileId, e_1;
+        var res;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     setIsSubmitLoading(true);
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 5, , 6]);
                     return [4 /*yield*/, upsertProfile(data)];
-                case 2:
+                case 1:
                     res = _a.sent();
-                    profileId = (res.data.tables[0].rows[0].ProfileId);
-                    return [4 /*yield*/, setPermissionsToProfile(profileId, data.PermissionsId)];
-                case 3:
-                    _a.sent();
-                    return [4 /*yield*/, setProfilesToProfile(profileId, data.HasProfilesId)];
-                case 4:
-                    _a.sent();
+                    if (!res.ok)
+                        setError(res.message);
+                    else {
+                        setMessage("The profile was created successfully");
+                        setOpenSnackbar(true);
+                        onHide(true);
+                    }
                     setIsSubmitLoading(false);
-                    setOpen(true);
-                    onHide();
-                    getProfilesFromAPI();
-                    return [3 /*break*/, 6];
-                case 5:
-                    e_1 = _a.sent();
-                    console.log(e_1);
-                    return [3 /*break*/, 6];
-                case 6: return [2 /*return*/];
+                    return [2 /*return*/];
             }
         });
     }); };
@@ -2345,7 +2097,7 @@ var CreateProfile = function (_a) {
         if (reason === 'clickaway') {
             return;
         }
-        setOpen(false);
+        setOpenSnackbar(false);
     };
     useEffect(function () {
         if (show) {
@@ -2355,7 +2107,7 @@ var CreateProfile = function (_a) {
     return (React.createElement(React.Fragment, null,
         React.createElement(Grid, { container: true },
             React.createElement(Grid, { item: true },
-                React.createElement(Modal$2, __assign({}, { show: show, onHide: onHide }, { size: "lg", "aria-labelledby": "contained-modal-title-vcenter", centered: true }),
+                React.createElement(Modal$2, { show: show, onHide: function () { onHide(false); }, size: "lg", "aria-labelledby": "contained-modal-title-vcenter", centered: true },
                     React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
                         React.createElement(Modal$2.Header, { closeButton: true, style: { padding: "10px 30px" } },
                             React.createElement(Modal$2.Title, { id: "contained-modal-title-vcenter", style: { margin: "20px 0 0" } }, "PROFILE")),
@@ -2365,31 +2117,19 @@ var CreateProfile = function (_a) {
                                 React.createElement(Grid, { item: true, md: 12, xs: 12 },
                                     React.createElement(TextField, __assign({}, register("ProfileName", { required: true }), { label: "Profile name", variant: "outlined", error: !!errors.ProfileName, fullWidth: true, margin: "dense", autoComplete: 'off' })),
                                     "  ",
-                                    ((_b = errors.ProfileName) === null || _b === void 0 ? void 0 : _b.type) === 'required' && React.createElement("span", { className: classes.errorLabel }, "Profile name is required"))),
-                            React.createElement(Grid, { container: true },
-                                React.createElement(Grid, { item: true, md: 6, xs: 12 },
-                                    React.createElement(Modal$2.Title, { className: classes.modalTitle, id: "contained-modal-title-vcenter" }, "PROFILES"),
-                                    React.createElement(Controller, { name: "HasProfilesId", control: control, render: function (_a) {
-                                            var _b = _a.field, onChange = _b.onChange, value = _b.value;
-                                            return (React.createElement(ProfilesPicker$1, { value: value, onChange: onChange, isLoading: isLoading, setIsLoading: setIsLoading, profileForDelete: null, profileIdForEdit: undefined }));
-                                        } })),
-                                React.createElement(Grid, { item: true, md: 6, xs: 12 },
-                                    React.createElement(Modal$2.Title, { className: classes.modalTitle, id: "contained-modal-title-vcenter" }, "PERMISSIONS"),
-                                    React.createElement(Controller, { name: "PermissionsId", control: control, render: function (_a) {
-                                            var _b = _a.field, onChange = _b.onChange, value = _b.value;
-                                            return (React.createElement(PermissionsPicker, { onChange: onChange, value: value, isLoading: isLoading, setIsLoading: setIsLoading, profileForDelete: null, profilesToProfiles: profilesToProfiles }));
-                                        } })))),
+                                    ((_b = errors.ProfileName) === null || _b === void 0 ? void 0 : _b.type) === 'required' && React.createElement("span", { className: classes.errorLabel }, "Profile name is required")))),
                         React.createElement(Modal$2.Footer, { style: { padding: "20px 30px 30px" } },
                             React.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
                                 React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
-                                    React.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: onHide }, "Cancel")),
+                                    React.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Cancel")),
                                 React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
                                     React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress$1, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: 'submit' }, "Save")))))))),
-        React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
-            React.createElement(Alert, { severity: "success", onClose: handleClose }, "The permission was asigned successfully"))));
+        React.createElement(Snackbar, { open: openSnackbar, autoHideDuration: 2500, onClose: handleClose },
+            React.createElement(Alert, { severity: "success", onClose: handleClose }, message)),
+        React.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
 
-var useStyles$j = makeStyles(function (theme) {
+var useStyles$k = makeStyles(function (theme) {
     return createStyles({
         title: {
             fontSize: 15
@@ -2398,9 +2138,6 @@ var useStyles$j = makeStyles(function (theme) {
             fontSize: 15,
             marginTop: theme.spacing(1)
         },
-        permissionsPicker: {
-            padding: "0"
-        },
         chip: {
             margin: 2
         }
@@ -2408,13 +2145,12 @@ var useStyles$j = makeStyles(function (theme) {
 });
 var DeleteProfile = function (_a) {
     var profileForDelete = _a.profileForDelete, show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$j();
+    useStyles$k();
     var _b = useState(false), open = _b[0], setOpen = _b[1];
-    var _c = useState(true), isLoading = _c[0], setIsLoading = _c[1];
-    var _d = useState(false), isSubmitLoading = _d[0], setIsSubmitLoading = _d[1];
-    var _e = useState(false), deleteAlert = _e[0], setDeleteAlert = _e[1];
-    var _f = useForm({ defaultValues: INITIAL_VALUES$2 }), register = _f.register, control = _f.control, setValue = _f.setValue, watch = _f.watch;
-    var profilesToProfiles = watch('HasProfilesId');
+    var _c = useState(""), error = _c[0], setError = _c[1];
+    var _d = useState(true), isLoading = _d[0], setIsLoading = _d[1];
+    var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
+    var _f = useState(false), deleteAlert = _f[0], setDeleteAlert = _f[1];
     var handleClose = function (event, reason) {
         if (reason === 'clickaway') {
             return;
@@ -2423,17 +2159,9 @@ var DeleteProfile = function (_a) {
         setDeleteAlert(false);
     };
     useEffect(function () {
-        var _a, _b;
         if (show) {
+            setIsLoading(false);
             setIsSubmitLoading(false);
-            if (profileForDelete) {
-                setValue("ProfileId", profileForDelete.ProfileId);
-                setValue("ProfileName", profileForDelete.ProfileName);
-                setValue("HasProfilesId", (_a = profileForDelete.HasProfilesId) === null || _a === void 0 ? void 0 : _a.split(',').map(function (pId) { return parseInt(pId); }));
-                setValue("HasProfiles", profileForDelete.HasProfiles);
-                setValue("Permissions", profileForDelete.Permissions);
-                setValue("PermissionsId", (_b = profileForDelete.PermissionsId) === null || _b === void 0 ? void 0 : _b.split(',').map(function (pId) { return parseInt(pId); }));
-            }
         }
     }, [show]);
     var onDelete = function (data) { return __awaiter(void 0, void 0, void 0, function () {
@@ -2454,7 +2182,7 @@ var DeleteProfile = function (_a) {
                     return [3 /*break*/, 4];
                 case 3:
                     e_1 = _a.sent();
-                    console.log(e_1);
+                    setError(e_1);
                     return [3 /*break*/, 4];
                 case 4: return [2 /*return*/];
             }
@@ -2464,27 +2192,19 @@ var DeleteProfile = function (_a) {
         React__default.createElement(Modal$2, __assign({}, { show: show }, { onHide: function () { return onHide(false); }, size: "lg", "aria-labelledby": "contained-modal-title-vcenter", centered: true }),
             React__default.createElement("form", null,
                 React__default.createElement(Modal$2.Header, { closeButton: true, style: { padding: "10px 30px" } },
-                    React__default.createElement(Modal$2.Title, { id: "contained-modal-title-vcenter", style: { margin: "20px 0 0" } }, "PROFILE")),
+                    React__default.createElement(Modal$2.Title, { id: "contained-modal-title-vcenter", style: { margin: "20px 0 0" } }, profileForDelete === null || profileForDelete === void 0 ? void 0 :
+                        profileForDelete.ProfileName,
+                        " PROFILE")),
                 React__default.createElement(Modal$2.Body, { style: { padding: "15px 30px" } },
                     isLoading && React__default.createElement(Grid, { container: true, justifyContent: 'center', alignItems: 'center', style: { minHeight: '150px' } },
                         React__default.createElement(LazyLoading, null)),
                     !isLoading && (React__default.createElement(React__default.Fragment, null,
                         React__default.createElement(Grid, { container: true, spacing: 1 },
                             React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
-                                React__default.createElement(TextField, __assign({}, register("ProfileName", { required: true }), { label: "Profile name", variant: "outlined", fullWidth: true, margin: "dense", autoComplete: 'off', disabled: true })))))),
-                    React__default.createElement(Grid, { container: true },
-                        React__default.createElement(Grid, { item: true, md: 6, xs: 12 },
-                            React__default.createElement(Modal$2.Title, { className: classes.modalTitle, id: "contained-modal-title-vcenter" }, "PROFILES"),
-                            React__default.createElement(Controller, { name: "HasProfilesId", control: control, render: function (_a) {
-                                    var _b = _a.field, onChange = _b.onChange, value = _b.value;
-                                    return (React__default.createElement(ProfilesPicker$1, { value: value, onChange: onChange, isLoading: isLoading, setIsLoading: setIsLoading, profileForDelete: profileForDelete === null || profileForDelete === void 0 ? void 0 : profileForDelete.ProfileId, profileIdForEdit: undefined }));
-                                } })),
-                        React__default.createElement(Grid, { item: true, md: 6, xs: 12 },
-                            React__default.createElement(Modal$2.Title, { className: classes.modalTitle, id: "contained-modal-title-vcenter" }, "PERMISSIONS"),
-                            React__default.createElement(Controller, { name: "PermissionsId", control: control, render: function (_a) {
-                                    var _b = _a.field, onChange = _b.onChange, value = _b.value;
-                                    return (React__default.createElement(PermissionsPicker, { isLoading: isLoading, setIsLoading: setIsLoading, onChange: onChange, value: value, profileForDelete: profileForDelete === null || profileForDelete === void 0 ? void 0 : profileForDelete.ProfileId, profilesToProfiles: profilesToProfiles }));
-                                } })))),
+                                React__default.createElement(Typography, null,
+                                    "Are you sure you want to delete ",
+                                    React__default.createElement("strong", null, profileForDelete === null || profileForDelete === void 0 ? void 0 : profileForDelete.ProfileName),
+                                    " profile?")))))),
                 React__default.createElement(Modal$2.Footer, { style: { padding: "20px 30px 30px" } },
                     React__default.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
                         React__default.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
@@ -2499,22 +2219,19 @@ var DeleteProfile = function (_a) {
                         React__default.createElement(Button, { onClick: function () { return setDeleteAlert(false); }, autoFocus: true, color: "default" }, "CANCEL"),
                         React__default.createElement(Button, { startIcon: isSubmitLoading && React__default.createElement(CircularProgress$1, { size: "1rem" }), autoFocus: true, color: "secondary", onClick: function () { return onDelete(profileForDelete === null || profileForDelete === void 0 ? void 0 : profileForDelete.ProfileId); } }, "Delete"))))),
         React__default.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
-            React__default.createElement(Alert, { severity: "error", onClose: handleClose }, "The profile was deleted successfully"))));
+            React__default.createElement(Alert, { severity: "success", onClose: handleClose }, "The profile was deleted successfully")),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
 var useTableData$2 = function (_a) {
-    var setProfileForEdit = _a.setProfileForEdit, setModalEditPermissionsProfile = _a.setModalEditPermissionsProfile, setProfileForDelete = _a.setProfileForDelete, setModalDeleteProfile = _a.setModalDeleteProfile;
+    var setProfileForEdit = _a.setProfileForEdit, setModalProceduresProfile = _a.setModalProceduresProfile, setModalEditProfile = _a.setModalEditProfile, setProfileForDelete = _a.setProfileForDelete, setModalDeleteProfile = _a.setModalDeleteProfile;
     var state = useProfilesContext().state;
     var rows = state.profiles.map(function (_a) {
-        var ProfileId = _a.ProfileId, ProfileName = _a.ProfileName, Permissions = _a.Permissions, PermissionsId = _a.PermissionsId, HasProfiles = _a.HasProfiles, HasProfilesId = _a.HasProfilesId;
+        var ProfileId = _a.ProfileId, ProfileName = _a.ProfileName;
         return ({
             id: ProfileId,
             ProfileId: ProfileId,
-            HasProfiles: HasProfiles === null || HasProfiles === void 0 ? void 0 : HasProfiles.replaceAll("Profile", " "),
-            HasProfilesId: HasProfilesId,
-            ProfileName: ProfileName === null || ProfileName === void 0 ? void 0 : ProfileName.replaceAll("Profile", ""),
-            PermissionsId: PermissionsId,
-            Permissions: Permissions === null || Permissions === void 0 ? void 0 : Permissions.replaceAll("MES.", " ").replaceAll("Manage", "Manage ")
+            ProfileName: ProfileName
         });
     });
     var columns = [
@@ -2523,16 +2240,6 @@ var useTableData$2 = function (_a) {
             minWidth: 170,
             flex: 2
         },
-        {
-            field: 'HasProfiles', headerName: 'Profiles',
-            minWidth: 140,
-            flex: 2
-        },
-        {
-            field: 'Permissions', headerName: 'Permissions',
-            minWidth: 150,
-            flex: 3
-        },
         {
             field: "Actions",
             renderCell: function (params) {
@@ -2543,12 +2250,22 @@ var useTableData$2 = function (_a) {
                                     (function () { return __awaiter(void 0, void 0, void 0, function () {
                                         return __generator(this, function (_a) {
                                             setProfileForEdit(params.row);
-                                            setModalEditPermissionsProfile(true);
+                                            setModalEditProfile(true);
                                             return [2 /*return*/];
                                         });
                                     }); })();
                                 } },
                                 React__default.createElement(EditIcon, { style: { width: 16, height: 16 }, color: "primary" })),
+                            React__default.createElement(Button, { onClick: function () {
+                                    (function () { return __awaiter(void 0, void 0, void 0, function () {
+                                        return __generator(this, function (_a) {
+                                            setProfileForEdit(params.row);
+                                            setModalProceduresProfile(true);
+                                            return [2 /*return*/];
+                                        });
+                                    }); })();
+                                } },
+                                React__default.createElement(LockRounded, { style: { width: 16, height: 16 }, color: "inherit" })),
                             React__default.createElement(Button, { onClick: function () {
                                     (function () { return __awaiter(void 0, void 0, void 0, function () {
                                         return __generator(this, function (_a) {
@@ -2567,6 +2284,220 @@ var useTableData$2 = function (_a) {
     return { rows: rows, columns: columns };
 };
 
+var DataTable = function (_a) {
+    var proceduresOfProfile = _a.proceduresOfProfile, onSelectionChanged = _a.onSelectionChanged;
+    var _b = useState(""), filterInput = _b[0], setFilterInput = _b[1];
+    var _c = useState([]), allProcedures = _c[0], setAllProcedures = _c[1];
+    var _d = useState(""), error = _d[0], setError = _d[1];
+    var _e = useState(null), gridApi = _e[0], setGridApi = _e[1];
+    var _f = useState(null); _f[0]; var setColumnApi = _f[1];
+    var handlerFilter = function (e) {
+        setFilterInput(e.target.value);
+    };
+    var sortRows = function (event) {
+        event.columnApi.applyColumnState({
+            state: [
+                { colId: 'sProcedure', sort: 'asc', sortIndex: 0 }
+            ]
+        });
+    };
+    var rows = useMemo(function () {
+        return allProcedures
+            .map(function (_a) {
+            var ProcedureId = _a.ProcedureId, sProcedure = _a.sProcedure;
+            return {
+                ProcedureId: ProcedureId,
+                sProcedure: sProcedure
+            };
+        });
+    }, [allProcedures]);
+    var columns = [
+        {
+            field: "ProcedureId",
+            headerName: "  ",
+            flex: 1,
+            maxWidth: 100,
+            checkboxSelection: true,
+            showDisabledCheckboxes: true,
+            sortIndex: 1
+        },
+        {
+            field: "sProcedure",
+            headerName: "Name",
+            flex: 4,
+            sortIndex: 0,
+            comparator: function (a, b, nodeA, nodeB, isInverted) {
+                var _a;
+                if (nodeA.isSelected() && !nodeB.isSelected()) {
+                    return -1;
+                }
+                else if (!nodeA.isSelected() && nodeB.isSelected()) {
+                    return 1;
+                }
+                else {
+                    return (_a = nodeA.data.sProcedure) === null || _a === void 0 ? void 0 : _a.localeCompare(nodeB.data.sProcedure);
+                }
+            }
+        },
+    ];
+    var defaultColDef = useMemo(function () { return ({
+        resizable: true,
+        sortable: true,
+        filter: true
+    }); }, []);
+    var onAgGridSelectionChanged = function (event) {
+        sortRows(event);
+        var selectedRows = event.api.getSelectedRows();
+        onSelectionChanged(selectedRows);
+    };
+    var onFirstDataRendered = useCallback(function (params) {
+        params.api.forEachNode(function (node) {
+            node.setSelected(!!node.data && !isNil(proceduresOfProfile.find(function (p) { return p.ProcedureId === node.data.ProcedureId; })));
+        });
+        sortRows(params);
+    }, [sortRows]);
+    var onGridReady = useCallback(function (event) {
+        setGridApi(event.api);
+        setColumnApi(event.columnApi);
+    }, [setGridApi]);
+    useEffect(function () {
+        gridApi === null || gridApi === void 0 ? void 0 : gridApi.setQuickFilter(filterInput.trim());
+    }, [filterInput, gridApi]);
+    useEffect(function () {
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            var resp;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, getProcedures()];
+                    case 1:
+                        resp = _a.sent();
+                        if (resp.ok)
+                            setAllProcedures(get$1(resp, "data.tables[0].rows", []));
+                        else
+                            setError(resp.message);
+                        return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, []);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Grid$1, { md: 12, xs: 12, style: { width: "100rem", padding: "10px 0px" } },
+            React__default.createElement(TextField, { id: "outlined-basic", label: "Filter...", variant: "outlined", style: { width: "100%" }, value: filterInput, onChange: handlerFilter })),
+        React__default.createElement("div", { className: "ag-theme-balham", style: { width: "100%", height: "60vh" } },
+            React__default.createElement(AgGridReact, { getRowId: function (params) { return params.data.ProcedureId; }, onGridReady: onGridReady, rowData: rows, columnDefs: columns, defaultColDef: defaultColDef, onFirstDataRendered: onFirstDataRendered, rowSelection: "multiple", rowMultiSelectWithClick: true, onSelectionChanged: onAgGridSelectionChanged })),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
+};
+
+var useStyles$j = makeStyles(function (theme) {
+    return createStyles({
+        title: {
+            fontSize: 15
+        },
+        modalTitle: {
+            fontSize: 15,
+            marginTop: theme.spacing(1)
+        },
+        chip: {
+            margin: 2
+        },
+        errorLabel: {
+            fontSize: 12,
+            color: "#F44336"
+        },
+        error: {
+            marginBottom: "15px"
+        },
+        textError: {
+            listStyle: "none",
+            padding: 0,
+            margin: 0
+        }
+    });
+});
+var ProceduresOfProfile = function (_a) {
+    var profileForEdit = _a.profileForEdit, show = _a.show, onHide = _a.onHide;
+    useStyles$j();
+    var _b = useState(null), proceduresOfProfile = _b[0], setProceduresOfProfile = _b[1];
+    var _c = useState(false), open = _c[0], setOpen = _c[1];
+    var _d = useState(true), isLoading = _d[0], setIsLoading = _d[1];
+    var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
+    var _f = useState([]), proceduresSelected = _f[0], setProceduresSelected = _f[1];
+    var _g = useState(""), error = _g[0], setError = _g[1];
+    var _h = useForm({ defaultValues: INITIAL_VALUES$2 }), handleSubmit = _h.handleSubmit; _h.formState.errors;
+    var handleClose = function (event, reason) {
+        if (reason === 'clickaway') {
+            return;
+        }
+        setOpen(false);
+    };
+    var onSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsSubmitLoading(true);
+                    return [4 /*yield*/, upsertProfilesProcedures(profileForEdit, proceduresSelected)];
+                case 1:
+                    resp = _a.sent();
+                    if (!resp.ok) {
+                        setError(resp.message);
+                    }
+                    else {
+                        setOpen(true);
+                        onHide(true);
+                    }
+                    setIsSubmitLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        if (show) {
+            (function () { return __awaiter(void 0, void 0, void 0, function () {
+                var resp;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            setIsLoading(true);
+                            setIsSubmitLoading(false);
+                            if (!profileForEdit) return [3 /*break*/, 2];
+                            return [4 /*yield*/, getProceduresByProfileId(profileForEdit)];
+                        case 1:
+                            resp = _a.sent();
+                            if (resp.ok)
+                                setProceduresOfProfile(get$1(resp, "data.tables[0].rows", []));
+                            else
+                                setError(resp.message);
+                            setIsLoading(false);
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            }); })();
+        }
+    }, [show]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Modal$2, __assign({}, { show: show }, { onHide: function () { return onHide(false); }, size: "lg", "aria-labelledby": "contained-modal-title-vcenter", centered: true }),
+            React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
+                React.createElement(Modal$2.Header, { closeButton: true, style: { padding: "10px 30px" } },
+                    React.createElement(Modal$2.Title, { id: "contained-modal-title-vcenter", style: { margin: "20px 0 0" } }, profileForEdit === null || profileForEdit === void 0 ? void 0 :
+                        profileForEdit.ProfileName,
+                        " Profile")),
+                React.createElement(Modal$2.Body, { style: { padding: "15px 30px" } },
+                    isLoading && (React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", style: { minHeight: "60px" } },
+                        React.createElement(CircularProgress$1, { size: "3rem" }))),
+                    !error && !isLoading && proceduresOfProfile &&
+                        React.createElement(DataTable, { proceduresOfProfile: proceduresOfProfile, onSelectionChanged: setProceduresSelected })),
+                React.createElement(Modal$2.Footer, { style: { padding: "20px 30px 30px" } }, !isLoading && (React.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
+                    React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                        React.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Cancel")),
+                    React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
+                        React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress$1, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: 'submit' }, "Save"))))))),
+        React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
+            React.createElement(Alert, { severity: "info", onClose: handleClose }, "The procedures of profile was edited successfully")),
+        React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
+};
+
 var useStyles$i = makeStyles(function (theme) {
     return createStyles({
         root: {
@@ -2602,25 +2533,37 @@ var useStyles$i = makeStyles(function (theme) {
 var TableProfiles = function (_a) {
     var getProfilesFromAPI = _a.getProfilesFromAPI, isLoading = _a.isLoading;
     var _b = useState(false), modalCreateActive = _b[0], setModalCreateActive = _b[1];
-    var _c = useState(false), modalEditPermissionsProfile = _c[0], setModalEditPermissionsProfile = _c[1];
-    var _d = useState(false), modalDeleteProfile = _d[0], setModalDeleteProfile = _d[1];
-    var _e = useState(null), profileForEdit = _e[0], setProfileForEdit = _e[1];
-    var _f = useState(null), profileForDelete = _f[0], setProfileForDelete = _f[1];
+    var _c = useState(false), modalEditProfile = _c[0], setModalEditProfile = _c[1];
+    var _d = useState(false), modalProceduresProfile = _d[0], setModalProceduresProfile = _d[1];
+    var _e = useState(false), modalDeleteProfile = _e[0], setModalDeleteProfile = _e[1];
+    var _f = useState(null), profileForEdit = _f[0], setProfileForEdit = _f[1];
+    var _g = useState(null), profileForDelete = _g[0], setProfileForDelete = _g[1];
     var classes = useStyles$i();
-    var _g = useTableData$2({
+    var _h = useTableData$2({
         setModalDeleteProfile: setModalDeleteProfile,
-        setModalEditPermissionsProfile: setModalEditPermissionsProfile,
+        setModalEditProfile: setModalEditProfile,
+        setModalProceduresProfile: setModalProceduresProfile,
         setProfileForDelete: setProfileForDelete,
         setProfileForEdit: setProfileForEdit
-    }), rows = _g.rows, columns = _g.columns;
+    }), rows = _h.rows, columns = _h.columns;
     return (React.createElement(Grid, { container: true, justifyContent: "center" },
         React.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" } },
             React.createElement(Typography$1, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "Profile Management")),
         React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", className: classes.root },
             React.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" }, className: classes.relative },
-                React.createElement(CreateProfile, { show: modalCreateActive, onHide: function () { return setModalCreateActive(false); }, getProfilesFromAPI: getProfilesFromAPI }),
-                React.createElement(EditProfile, { show: modalEditPermissionsProfile, profileForEdit: profileForEdit, onHide: function (shouldUpdate) {
-                        setModalEditPermissionsProfile(false);
+                React.createElement(CreateProfile, { show: modalCreateActive, onHide: function (shouldUpdate) {
+                        setModalCreateActive(false);
+                        if (shouldUpdate)
+                            getProfilesFromAPI().then(function () { });
+                    } }),
+                React.createElement(EditProfile, { show: modalEditProfile, profileForEdit: profileForEdit, onHide: function (shouldUpdate) {
+                        setModalEditProfile(false);
+                        setProfileForEdit(null);
+                        if (shouldUpdate)
+                            getProfilesFromAPI().then(function () { });
+                    } }),
+                React.createElement(ProceduresOfProfile, { show: modalProceduresProfile, profileForEdit: profileForEdit, onHide: function (shouldUpdate) {
+                        setModalProceduresProfile(false);
                         setProfileForEdit(null);
                         if (shouldUpdate)
                             getProfilesFromAPI().then(function () { });
@@ -2641,6 +2584,7 @@ var TableProfiles = function (_a) {
 var Profiles = function (prop) {
     var _a = useProfilesContext(), state = _a.state, actions = _a.actions;
     var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = useState(""), error = _c[0], setError = _c[1];
     var getProfilesFromAPI = function () { return __awaiter(void 0, void 0, void 0, function () {
         var resp;
         return __generator(this, function (_a) {
@@ -2655,7 +2599,7 @@ var Profiles = function (prop) {
                         setIsLoading(false);
                     }
                     else {
-                        console.log("something happened!");
+                        setError(resp.message);
                     }
                     return [2 /*return*/];
             }
@@ -2665,10 +2609,12 @@ var Profiles = function (prop) {
         getProfilesFromAPI();
     }, []);
     if (state.profiles) {
-        return (React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
-            React.createElement(Grid, { item: true, md: 12, xs: 12, style: { margin: 0 } },
-                React.createElement(Paper, { elevation: 1, style: { width: "100%", padding: "10px 0 20px", borderRadius: "0.75rem" } },
-                    React.createElement(TableProfiles, { isLoading: isLoading, getProfilesFromAPI: getProfilesFromAPI })))));
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
+                React.createElement(Grid, { item: true, md: 12, xs: 12, style: { margin: 0 } },
+                    React.createElement(Paper, { elevation: 1, style: { width: "100%", padding: "10px 0 20px", borderRadius: "0.75rem" } },
+                        React.createElement(TableProfiles, { isLoading: isLoading, getProfilesFromAPI: getProfilesFromAPI })))),
+            React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
     }
     return React.createElement(LazyLoading, null);
 };
@@ -2904,9 +2850,6 @@ var useStyles$h = makeStyles(function (theme) {
             fontSize: 15,
             marginTop: theme.spacing(1)
         },
-        permissionsPicker: {
-            padding: "0"
-        },
         chip: {
             margin: 2
         },
@@ -3117,9 +3060,6 @@ var useStyles$g = makeStyles(function (theme) {
             fontSize: 15,
             marginTop: theme.spacing(1)
         },
-        permissionsPicker: {
-            padding: "0"
-        },
         chip: {
             margin: 2
         },
@@ -3287,9 +3227,6 @@ var useStyles$f = makeStyles(function (theme) {
             fontSize: 15,
             marginTop: theme.spacing(1)
         },
-        permissionsPicker: {
-            padding: "0"
-        },
         chip: {
             margin: 2
         },
@@ -3600,28 +3537,145 @@ var ShiftsCrews = function (prop) {
                 React.createElement(Paper, { elevation: 1, style: { width: "100%", padding: "10px 0 20px", borderRadius: "0.75rem" } },
                     React.createElement(TableShiftsCrews, { isLoading: isLoading, getShiftsCrewsFromAPI: getShiftsCrewsFromAPI })))));
     }
-    return React.createElement(LazyLoading, null);
-};
-
-var ShiftsCrewsPage = function (props) {
-    return (React.createElement(ShiftsCrewsProvider, null,
-        React.createElement(ShiftsCrews, null)));
-};
+    return React.createElement(LazyLoading, null);
+};
+
+var ShiftsCrewsPage = function (props) {
+    return (React.createElement(ShiftsCrewsProvider, null,
+        React.createElement(ShiftsCrews, null)));
+};
+
+var TypeIcon = function (props) {
+    if (props.droppable) {
+        return React__default.createElement(Folder, null);
+    }
+    switch (props.fileType) {
+        case "image":
+            return React__default.createElement(ImageIcon, null);
+        case "csv":
+            return React__default.createElement(ListAltIcon, null);
+        case "text":
+            return React__default.createElement(DescriptionIcon, null);
+        default:
+            return null;
+    }
+};
+
+var DATA_ASSET_INITIAL_VALUES = {
+    AssetId: null,
+    ParentAssetId: 1,
+    AssetName: "",
+    IsAsset: false,
+    CanBeDefaultAsset: false,
+    ParentAssetName: "",
+    IsBranch: null
+};
+
+var ConfigurationAssetInitialState = {
+    openAssets: {},
+    allAssetNodes: [],
+    allNodesLoading: false,
+    anchorPoint: {
+        x: 0,
+        y: 0
+    },
+    dataToCreateAsset: DATA_ASSET_INITIAL_VALUES,
+    menuContextAssetId: undefined,
+    showContextMenu: false,
+    showCreateNewContextMenu: false,
+    assetCodes: {},
+    assetTreeId: 1,
+    assetTreeName: null,
+    assetNodeSelectedInTree: DATA_ASSET_INITIAL_VALUES,
+    allAssetLoading: false
+};
+var ConfigurationAssetReducer = createSlice({
+    name: "__",
+    initialState: ConfigurationAssetInitialState,
+    reducers: {
+        setOpenAssets: function (state, _a) {
+            var payload = _a.payload;
+            state.openAssets = payload;
+        },
+        setAllAssetNodes: function (state, _a) {
+            var payload = _a.payload;
+            state.allAssetNodes = payload;
+        },
+        seAllNodesLoading: function (state, _a) {
+            var payload = _a.payload;
+            state.allNodesLoading = payload;
+        },
+        setAnchorPointX: function (state, _a) {
+            var payload = _a.payload;
+            state.anchorPoint.x = payload;
+        },
+        setAnchorPointY: function (state, _a) {
+            var payload = _a.payload;
+            state.anchorPoint.y = payload;
+        },
+        setMenuContextAssetId: function (state, _a) {
+            var payload = _a.payload;
+            state.menuContextAssetId = payload;
+        },
+        setShowContextMenu: function (state, _a) {
+            var payload = _a.payload;
+            state.showContextMenu = payload;
+        },
+        setShowCreateNewContextMenu: function (state, _a) {
+            var payload = _a.payload;
+            state.showCreateNewContextMenu = payload;
+        },
+        setDataToCreateAsset: function (state, _a) {
+            var payload = _a.payload;
+            state.dataToCreateAsset = payload;
+        },
+        setAssetNameToCreateAsset: function (state, _a) {
+            var payload = _a.payload;
+            state.dataToCreateAsset.AssetName = payload;
+        },
+        setAssetParentAssetIdToCreateAsset: function (state, _a) {
+            var payload = _a.payload;
+            state.dataToCreateAsset.ParentAssetId = payload;
+        },
+        setAssetTreeId: function (state, _a) {
+            var payload = _a.payload;
+            state.assetTreeId = payload;
+        },
+        setAssetTreeName: function (state, _a) {
+            var payload = _a.payload;
+            state.assetTreeName = payload;
+        },
+        setAssetCodes: function (state, _a) {
+            var payload = _a.payload;
+            state.assetCodes = payload;
+        },
+        setAssetNodeSelectedInTree: function (state, _a) {
+            var payload = _a.payload;
+            state.assetNodeSelectedInTree = payload;
+        },
+        setParentAssetNameInNodeSelectedInTree: function (state, _a) {
+            var payload = _a.payload;
+            state.assetNodeSelectedInTree.ParentAssetName = payload;
+        },
+        setAllAssetLoading: function (state, _a) {
+            var payload = _a.payload;
+            state.allAssetLoading = payload;
+        }
+    }
+});
 
-var TypeIcon = function (props) {
-    if (props.droppable) {
-        return React__default.createElement(Folder, null);
-    }
-    switch (props.fileType) {
-        case "image":
-            return React__default.createElement(ImageIcon, null);
-        case "csv":
-            return React__default.createElement(ListAltIcon, null);
-        case "text":
-            return React__default.createElement(DescriptionIcon, null);
-        default:
-            return null;
-    }
+var ConfigurationAssetContext = createContext({
+    state: ConfigurationAssetReducer.getInitialState(),
+    actions: ConfigurationAssetReducer.actions
+});
+var useConfigurationAssetContext = function () { return useContext(ConfigurationAssetContext); };
+var ConfigurationAssetProvider = function (_a) {
+    var children = _a.children;
+    var _b = useComplexState({
+        initialState: ConfigurationAssetReducer.getInitialState(),
+        reducers: ConfigurationAssetReducer.caseReducers
+    }), state = _b[0], actions = _b[1];
+    return (React__default.createElement(ConfigurationAssetContext.Provider, { value: { state: state, actions: actions } }, children));
 };
 
 var useStyles$d = makeStyles$1(function (theme) { return ({
@@ -3668,7 +3722,8 @@ var useStyles$d = makeStyles$1(function (theme) { return ({
 var customStyles = "\n  ul, ol {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n  }\n";
 var CustomNode = function (_a) {
     var setContextMenuOver = _a.setContextMenuOver, onDoubleClick = _a.onDoubleClick; _a.testIdPrefix; var isSelected = _a.isSelected, props = __rest(_a, ["setContextMenuOver", "onDoubleClick", "testIdPrefix", "isSelected"]);
-    var _c = props.node, id = _c.id, droppable = _c.droppable, data = _c.data;
+    var _c = useConfigurationAssetContext(), openAssets = _c.state.openAssets, setOpenAssets = _c.actions.setOpenAssets;
+    var _d = props.node, id = _d.id, droppable = _d.droppable, data = _d.data;
     var indent = props.depth * 24;
     var classes = useStyles$d();
     var nodeClasses = "".concat(classes.customNodeRoot, " ").concat(classes.root, " ").concat(isSelected ? classes.selected : "");
@@ -3676,7 +3731,16 @@ var CustomNode = function (_a) {
         props.onClick(e, props.node);
     };
     var handleToggle = function (e) {
+        var _a;
         e.stopPropagation();
+        if (openAssets[id]) {
+            var newOpenAssets = __assign({}, openAssets);
+            delete newOpenAssets[id];
+            setOpenAssets(newOpenAssets);
+        }
+        else {
+            setOpenAssets(__assign(__assign({}, openAssets), (_a = {}, _a[id] = id, _a)));
+        }
         props.onToggle();
     };
     var handleContextMenu = useCallback(function (ev) {
@@ -3821,7 +3885,7 @@ var updateAsset = function (AssetId, ParentAssetId) { return __awaiter(void 0, v
         }
     });
 }); };
-var insertAsset = function (AssetName, ParentAssetId, IsAsset, CanBeDefaultAsset) { return __awaiter(void 0, void 0, void 0, function () {
+var insertAsset = function (AssetName, ParentAssetId, CanBeDefaultAsset) { return __awaiter(void 0, void 0, void 0, function () {
     var apiService, parameters, resp, e_2;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -3830,7 +3894,6 @@ var insertAsset = function (AssetName, ParentAssetId, IsAsset, CanBeDefaultAsset
                 parameters = [];
                 parameters.push({ name: "AssetName", value: AssetName });
                 parameters.push({ name: "ParentAssetId", value: ParentAssetId });
-                parameters.push({ name: "IsAsset", value: IsAsset });
                 parameters.push({ name: "CanBeDefaultAsset", value: CanBeDefaultAsset });
                 _a.label = 1;
             case 1:
@@ -3953,117 +4016,11 @@ var TransformAssetModelData = function (node) {
     return model;
 };
 
-var DATA_ASSET_INITIAL_VALUES = {
-    AssetId: null,
-    ParentAssetId: 1,
-    AssetName: "",
-    IsAsset: false,
-    CanBeDefaultAsset: false,
-    ParentAssetName: "",
-    IsBranch: null
-};
-
-var ConfigurationAssetInitialState = {
-    allAssetNodes: [],
-    allNodesLoading: false,
-    anchorPoint: {
-        x: 0,
-        y: 0
-    },
-    dataToCreateAsset: DATA_ASSET_INITIAL_VALUES,
-    menuContextAssetId: undefined,
-    showContextMenu: false,
-    showCreateNewContextMenu: false,
-    assetCodes: {},
-    assetTreeId: 1,
-    assetTreeName: null,
-    assetNodeSelectedInTree: DATA_ASSET_INITIAL_VALUES
-};
-var ConfigurationAssetReducer = createSlice({
-    name: "__",
-    initialState: ConfigurationAssetInitialState,
-    reducers: {
-        setAllAssetNodes: function (state, _a) {
-            var payload = _a.payload;
-            state.allAssetNodes = payload;
-        },
-        seAllNodesLoading: function (state, _a) {
-            var payload = _a.payload;
-            state.allNodesLoading = payload;
-        },
-        setAnchorPointX: function (state, _a) {
-            var payload = _a.payload;
-            state.anchorPoint.x = payload;
-        },
-        setAnchorPointY: function (state, _a) {
-            var payload = _a.payload;
-            state.anchorPoint.y = payload;
-        },
-        setMenuContextAssetId: function (state, _a) {
-            var payload = _a.payload;
-            state.menuContextAssetId = payload;
-        },
-        setShowContextMenu: function (state, _a) {
-            var payload = _a.payload;
-            state.showContextMenu = payload;
-        },
-        setShowCreateNewContextMenu: function (state, _a) {
-            var payload = _a.payload;
-            state.showCreateNewContextMenu = payload;
-        },
-        setDataToCreateAsset: function (state, _a) {
-            var payload = _a.payload;
-            state.dataToCreateAsset = payload;
-        },
-        setAssetNameToCreateAsset: function (state, _a) {
-            var payload = _a.payload;
-            state.dataToCreateAsset.AssetName = payload;
-        },
-        setAssetParentAssetIdToCreateAsset: function (state, _a) {
-            var payload = _a.payload;
-            state.dataToCreateAsset.ParentAssetId = payload;
-        },
-        setAssetTreeId: function (state, _a) {
-            var payload = _a.payload;
-            state.assetTreeId = payload;
-        },
-        setAssetTreeName: function (state, _a) {
-            var payload = _a.payload;
-            state.assetTreeName = payload;
-        },
-        setAssetCodes: function (state, _a) {
-            var payload = _a.payload;
-            state.assetCodes = payload;
-        },
-        setAssetNodeSelectedInTree: function (state, _a) {
-            var payload = _a.payload;
-            state.assetNodeSelectedInTree = payload;
-        },
-        setParentAssetNameInNodeSelectedInTree: function (state, _a) {
-            var payload = _a.payload;
-            state.assetNodeSelectedInTree.ParentAssetName = payload;
-        }
-    }
-});
-
-var ConfigurationAssetContext = createContext({
-    state: ConfigurationAssetReducer.getInitialState(),
-    actions: ConfigurationAssetReducer.actions
-});
-var useConfigurationAssetContext = function () { return useContext(ConfigurationAssetContext); };
-var ConfigurationAssetProvider = function (_a) {
-    var children = _a.children;
-    var _b = useComplexState({
-        initialState: ConfigurationAssetReducer.getInitialState(),
-        reducers: ConfigurationAssetReducer.caseReducers
-    }), state = _b[0], actions = _b[1];
-    return (React__default.createElement(ConfigurationAssetContext.Provider, { value: { state: state, actions: actions } }, children));
-};
-
 var useSearchAssets$1 = function () {
     var _a = useAssetContext().actions, setAllAssets = _a.setAllAssets, setAreasList = _a.setAreasList;
-    var setAllAssetNodes = useConfigurationAssetContext().actions.setAllAssetNodes;
+    var _b = useConfigurationAssetContext().actions, setAllAssetNodes = _b.setAllAssetNodes, setAllAssetLoading = _b.setAllAssetLoading;
     var searchAssets = function () {
+        setAllAssetLoading(true);
         getAssets().then(function (res) {
             var mydataSource = [];
             var rows = get$1(res, "data.tables[0].rows", []);
@@ -4075,6 +4032,7 @@ var useSearchAssets$1 = function () {
                 mydataSource = __spreadArray(__spreadArray([], mydataSource, true), [code], false);
             });
             setAllAssetNodes(mydataSource);
+            setAllAssetLoading(false);
         });
     };
     return { searchAssets: searchAssets };
@@ -4148,9 +4106,10 @@ var useAssetActions = function (_a) {
                         return [2 /*return*/];
                 }
             });
-        }); }, setTimeout(function () {
+        }); });
+        setTimeout(function () {
             searchAssets();
-        }, 100));
+        }, 100);
         setChangedNodes([]);
     };
     var handleSingleSelect = function (node) {
@@ -4322,7 +4281,7 @@ var CreateNewAssetDialog = function (_a) {
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, insertAsset(data.AssetName, data.ParentAssetId, data.IsAsset, data.CanBeDefaultAsset).then(function (res) {
+                    return [4 /*yield*/, insertAsset(data.AssetName, data.ParentAssetId, data.CanBeDefaultAsset).then(function (res) {
                             if (res) {
                                 setIsSubmitLoading(false);
                                 setAssetCreatedSuccess(true);
@@ -4390,16 +4349,11 @@ var CreateNewAssetDialog = function (_a) {
                                 React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { marginBottom: "8px" } },
                                     React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: 0, marginTop: 10 } },
                                         React__default.createElement(Controller, { name: "ParentAssetId", control: control, render: function (_a) { return (React__default.createElement(TreePickerControl, { inputTitle: "Asset", title: "Asset Parent", dataSource: assetCodes, value: (assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.ParentAssetId) || 1, description: (assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.ParentAssetName) || "Plant", onSelect: changeParentAssetId, selectBranch: true, selectActive: false, selectInternal: false })); } }))),
-                                React__default.createElement(Grid, { container: true, style: { marginTop: "5px", padding: "0 8px" } },
-                                    React__default.createElement(Grid, { item: true, xs: 6, md: 6 },
-                                        React__default.createElement(Controller, { name: "IsAsset", control: control, defaultValue: false, render: function (_a) {
-                                                var field = _a.field;
-                                                return (React__default.createElement(FormControlLabel$1, { className: classes.checkbox, control: React__default.createElement(Checkbox$1, { checked: field.value, onChange: function (e) { return field.onChange(e.target.checked); }, name: "IsAsset", color: "primary" }), label: "Is Asset" }));
-                                            } })),
+                                React__default.createElement(Grid, { container: true, style: { marginTop: "10px 0", padding: "0" } },
                                     React__default.createElement(Grid, { item: true, xs: 6, md: 6 },
                                         React__default.createElement(Controller, { name: "CanBeDefaultAsset", control: control, defaultValue: false, render: function (_a) {
                                                 var field = _a.field;
-                                                return (React__default.createElement(FormControlLabel$1, { className: classes.checkbox, control: React__default.createElement(Checkbox$1, { checked: field.value, onChange: function (e) { return field.onChange(e.target.checked); }, name: "CanBeDefaultAsset", color: "primary" }), label: "Can be Default Asset" }));
+                                                return (React__default.createElement(FormControlLabel, { className: classes.checkbox, control: React__default.createElement(Checkbox, { checked: field.value, onChange: function (e) { return field.onChange(e.target.checked); }, name: "CanBeDefaultAsset", color: "primary" }), label: "Can be Default Asset" }));
                                             } }))))),
                         React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { marginTop: "15px" } },
                             React__default.createElement(DialogActions$2, { style: { padding: "0px 24px" } },
@@ -4512,12 +4466,12 @@ var ViewerAssetDialog = function (_a) {
                                     React__default.createElement(Grid, { item: true, xs: 6, md: 6 },
                                         React__default.createElement(Controller, { name: "IsBranch", control: control, defaultValue: false, render: function (_a) {
                                                 var field = _a.field;
-                                                return (React__default.createElement(FormControlLabel$1, { className: classes.checkbox, control: React__default.createElement(Checkbox$1, { checked: field.value, onChange: function (e) { return field.onChange(e.target.checked); }, name: "IsAsset", color: "primary", disabled: true }), label: "Has Children" }));
+                                                return (React__default.createElement(FormControlLabel, { className: classes.checkbox, control: React__default.createElement(Checkbox, { checked: field.value, onChange: function (e) { return field.onChange(e.target.checked); }, name: "IsBranch", color: "primary", disabled: true }), label: "Has Children" }));
                                             } })),
                                     React__default.createElement(Grid, { item: true, xs: 6, md: 6 },
                                         React__default.createElement(Controller, { name: "CanBeDefaultAsset", control: control, defaultValue: false, render: function (_a) {
                                                 var field = _a.field;
-                                                return (React__default.createElement(FormControlLabel$1, { className: classes.checkbox, control: React__default.createElement(Checkbox$1, { checked: field.value, onChange: function (e) { return field.onChange(e.target.checked); }, name: "CanBeDefaultAsset", color: "primary", disabled: true }), label: "Can be Default Asset" }));
+                                                return (React__default.createElement(FormControlLabel, { className: classes.checkbox, control: React__default.createElement(Checkbox, { checked: field.value, onChange: function (e) { return field.onChange(e.target.checked); }, name: "CanBeDefaultAsset", color: "primary", disabled: true }), label: "Can be Default Asset" }));
                                             } }))))))))))));
 };
 
@@ -4765,12 +4719,12 @@ var EditAssetDialog = function (_a) {
                                         React__default.createElement(Grid, { item: true, xs: 6, md: 6 },
                                             React__default.createElement(Controller, { name: "IsBranch", control: control, defaultValue: false, render: function (_a) {
                                                     var field = _a.field;
-                                                    return (React__default.createElement(FormControlLabel$1, { className: classes.checkbox, control: React__default.createElement(Checkbox$1, { checked: field.value, onChange: function (e) { return field.onChange(e.target.checked); }, name: "IsAsset", color: "primary", disabled: true }), label: "Has Children" }));
+                                                    return (React__default.createElement(FormControlLabel, { className: classes.checkbox, control: React__default.createElement(Checkbox, { checked: field.value, onChange: function (e) { return field.onChange(e.target.checked); }, name: "IsAsset", color: "primary", disabled: true }), label: "Has Children" }));
                                                 } })),
                                         React__default.createElement(Grid, { item: true, xs: 6, md: 6 },
                                             React__default.createElement(Controller, { name: "CanBeDefaultAsset", control: control, defaultValue: false, render: function (_a) {
                                                     var field = _a.field;
-                                                    return (React__default.createElement(FormControlLabel$1, { className: classes.checkbox, control: React__default.createElement(Checkbox$1, { checked: field.value, onChange: function (e) { return field.onChange(e.target.checked); }, name: "CanBeDefaultAsset", color: "primary" }), label: "Can be Default Asset" }));
+                                                    return (React__default.createElement(FormControlLabel, { className: classes.checkbox, control: React__default.createElement(Checkbox, { checked: field.value, onChange: function (e) { return field.onChange(e.target.checked); }, name: "CanBeDefaultAsset", color: "primary" }), label: "Can be Default Asset" }));
                                                 } })))))),
                         React__default.createElement(Grid, { item: true, md: 12, xs: 12, justifyContent: "flex-end", style: { marginTop: "15px" } },
                             React__default.createElement(DialogActions$2, { style: { padding: "0px 24px" } },
@@ -4817,11 +4771,20 @@ var AssetViewComponent = function () {
     var _b = useState(false), isDragging = _b[0], setIsDragging = _b[1];
     var _c = useState(false), isCtrlPressing = _c[0], setIsCtrlPressing = _c[1];
     var _d = useState(false), isDoubleClick = _d[0], setIsDoubleClick = _d[1];
-    var _e = useConfigurationAssetContext(), _f = _e.state, allAssetNodes = _f.allAssetNodes, showContextMenu = _f.showContextMenu, showCreateNewContextMenu = _f.showCreateNewContextMenu, assetNodeSelectedInTree = _f.assetNodeSelectedInTree, _g = _f.anchorPoint, x = _g.x, y = _g.y, _h = _e.actions, setShowContextMenu = _h.setShowContextMenu, setShowCreateNewContextMenu = _h.setShowCreateNewContextMenu, setMenuContextAssetId = _h.setMenuContextAssetId, setAnchorPointX = _h.setAnchorPointX, setAnchorPointY = _h.setAnchorPointY, setAssetNodeSelectedInTree = _h.setAssetNodeSelectedInTree;
+    var _e = useConfigurationAssetContext(), _f = _e.state, allAssetNodes = _f.allAssetNodes, openAssets = _f.openAssets, showContextMenu = _f.showContextMenu, showCreateNewContextMenu = _f.showCreateNewContextMenu, assetNodeSelectedInTree = _f.assetNodeSelectedInTree, allAssetLoading = _f.allAssetLoading, _g = _f.anchorPoint, x = _g.x, y = _g.y, _h = _e.actions, setShowContextMenu = _h.setShowContextMenu, setShowCreateNewContextMenu = _h.setShowCreateNewContextMenu, setMenuContextAssetId = _h.setMenuContextAssetId, setAnchorPointX = _h.setAnchorPointX, setAnchorPointY = _h.setAnchorPointY, setAssetNodeSelectedInTree = _h.setAssetNodeSelectedInTree;
     var allAssets = useAssetContext().state.allAssets;
     var _j = useState([]), asset = _j[0], setAsset = _j[1];
     var _k = useState([]), originalAsset = _k[0], setOriginalAsset = _k[1];
-    var _l = useAssetActions({ asset: asset, selectedNodes: selectedNodes, originalAsset: originalAsset, setAsset: setAsset, setSelectedNodes: setSelectedNodes, setIsDragging: setIsDragging, isCtrlPressing: isCtrlPressing, setIsCtrlPressing: setIsCtrlPressing }), handleDrop = _l.handleDrop, handleUpdateAsset = _l.handleUpdateAsset, handleCtrlClick = _l.handleCtrlClick, handleDragStart = _l.handleDragStart, handleDragEnd = _l.handleDragEnd, changedNodes = _l.changedNodes, updatedSuccessfullyMessage = _l.updatedSuccessfullyMessage, setUpdatedSuccessfullyMessage = _l.setUpdatedSuccessfullyMessage, showErrorMessage = _l.showErrorMessage, setShowErrorMessage = _l.setShowErrorMessage;
+    var _l = useAssetActions({
+        asset: asset,
+        selectedNodes: selectedNodes,
+        originalAsset: originalAsset,
+        setAsset: setAsset,
+        setSelectedNodes: setSelectedNodes,
+        setIsDragging: setIsDragging,
+        isCtrlPressing: isCtrlPressing,
+        setIsCtrlPressing: setIsCtrlPressing
+    }), handleDrop = _l.handleDrop, handleUpdateAsset = _l.handleUpdateAsset, handleCtrlClick = _l.handleCtrlClick, handleDragStart = _l.handleDragStart, handleDragEnd = _l.handleDragEnd, changedNodes = _l.changedNodes, updatedSuccessfullyMessage = _l.updatedSuccessfullyMessage, setUpdatedSuccessfullyMessage = _l.setUpdatedSuccessfullyMessage, showErrorMessage = _l.showErrorMessage, setShowErrorMessage = _l.setShowErrorMessage;
     var _m = useState(false), showCreateNewAssetDialog = _m[0], setShowCreateNewAssetDialog = _m[1];
     var _o = useState(false), showViewerAssetDialog = _o[0], setShowViewerAssetDialog = _o[1];
     var _p = useState(false), showRemoveAssetDialog = _p[0], setShowRemoveAssetDialog = _p[1];
@@ -4910,17 +4873,23 @@ var AssetViewComponent = function () {
     useEffect(function () {
         searchAssets();
     }, []);
+    var openAssetsArray = useMemo(function () {
+        return Object.keys(openAssets).map(function (el) { return parseInt(el); });
+    }, [openAssets]);
     return (React__default.createElement("div", { style: { width: "100%", height: "100%" } },
         React__default.createElement("div", { onClick: handleClick },
             React__default.createElement("div", { onContextMenu: handleCreateNewContextMenu },
                 React__default.createElement("div", null,
                     React__default.createElement(Grid$1, { container: true, className: classes.root, style: { padding: 20 } },
                         React__default.createElement(Paper$1, { elevation: 1, style: { width: "100%", padding: "15px 20px", borderRadius: "0.75rem" } },
-                            React__default.createElement(Paper$1, { elevation: 2, style: { width: "100%", padding: "15px 20px 10px", borderRadius: "0.75rem" } },
+                            allAssetLoading ? (React__default.createElement(Grid$1, { container: true, style: { width: "100%", height: "100%" } },
+                                React__default.createElement(Grid$1, { item: true, xs: 12, md: 12, style: { height: "70vh", justifyContent: "center", alignItems: "center" } },
+                                    React__default.createElement("div", { style: { width: "100%", height: "100%", display: "flex", justifyContent: "center", alignItems: "center" } },
+                                        React__default.createElement(LazyLoading, null))))) : (React__default.createElement(Paper$1, { elevation: 2, style: { width: "100%", padding: "15px 20px 10px", borderRadius: "0.75rem" } },
                                 React__default.createElement(Grid$1, { container: true, alignItems: "center" },
                                     React__default.createElement(Grid$1, { container: true, style: { height: "70vh", overflowY: "auto", paddingBottom: 10 } },
                                         React__default.createElement(Grid$1, null,
-                                            React__default.createElement(Tree, { rootId: 0, tree: asset, classes: {
+                                            React__default.createElement(Tree, { rootId: 0, initialOpen: openAssetsArray, tree: asset, enableAnimateExpand: true, classes: {
                                                     root: classes.assetRoot,
                                                     dropTarget: classes.dropTarget
                                                 }, onDrop: handleDrop, onDragStart: handleDragStart, onDragEnd: handleDragEnd, canDrop: function (asset, options) {
@@ -4933,7 +4902,7 @@ var AssetViewComponent = function () {
                                                         return React__default.createElement(MultipleDragPreview, { dragSources: selectedNodes });
                                                     }
                                                     return React__default.createElement(CustomDragPreview, { monitorProps: monitorProps });
-                                                } }))))),
+                                                } })))))),
                             React__default.createElement(CreateNewAssetDialog, { show: showCreateNewAssetDialog, onHide: function () { return setShowCreateNewAssetDialog(false); } }),
                             React__default.createElement(EditAssetDialog, { show: showEditAssetDialog, onHide: function () { return setShowEditAssetDialog(false); } }),
                             React__default.createElement(ViewerAssetDialog, { show: showViewerAssetDialog, onHide: function () { setShowViewerAssetDialog(false); setIsDoubleClick(false); } }),
@@ -5428,7 +5397,7 @@ var CreateUser = function (_a) {
                             React.createElement(Grid, { item: true, xs: 12, md: 6 },
                                 React.createElement(Controller, { name: "IsActive", control: control, render: function (_a) {
                                         var field = _a.field;
-                                        return (React.createElement(FormControlLabel, { className: classes.checkbox, control: React.createElement(Checkbox, { checked: field.value, onChange: field.onChange, name: "IsActive", color: "primary" }), label: "Active" }));
+                                        return (React.createElement(FormControlLabel$1, { className: classes.checkbox, control: React.createElement(Checkbox$1, { checked: field.value, onChange: field.onChange, name: "IsActive", color: "primary" }), label: "Active" }));
                                     } }))))),
                 React.createElement(Modal$2.Footer, { style: { padding: "20px 30px 30px" } },
                     React.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
@@ -5566,7 +5535,7 @@ var EditUser = function (_a) {
                                 React.createElement(Grid, { item: true, xs: 12, md: 6 },
                                     React.createElement(Controller, { name: "IsActive", control: control, render: function (_a) {
                                             var field = _a.field;
-                                            return (React.createElement(FormControlLabel, { className: classes.checkbox, control: React.createElement(Checkbox, { checked: field.value, onChange: field.onChange, name: "IsActive", color: "primary" }), label: "Active" }));
+                                            return (React.createElement(FormControlLabel$1, { className: classes.checkbox, control: React.createElement(Checkbox$1, { checked: field.value, onChange: field.onChange, name: "IsActive", color: "primary" }), label: "Active" }));
                                         } }))))))),
                 React.createElement(Modal$2.Footer, { style: { padding: "20px 30px 30px" } },
                     React.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
@@ -5686,7 +5655,7 @@ var DeleteUser = function (_a) {
                                 React__default.createElement(Grid, { item: true, xs: 12, md: 6 },
                                     React__default.createElement(Controller, { name: "IsActive", control: control, render: function (_a) {
                                             var field = _a.field;
-                                            return (React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { checked: field.value, onChange: field.onChange, name: "IsActive", color: "primary" }), label: "Active" }));
+                                            return (React__default.createElement(FormControlLabel$1, { control: React__default.createElement(Checkbox$1, { checked: field.value, onChange: field.onChange, name: "IsActive", color: "primary" }), label: "Active" }));
                                         } }))))))),
                 React__default.createElement(Modal$2.Footer, { style: { padding: "20px 30px 30px" } },
                     React__default.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
@@ -5787,50 +5756,6 @@ var useTableData = function (_a) {
     return { rows: rows, columns: columns };
 };
 
-var styles = function (theme) {
-    return createStyles({
-        root: {
-            margin: 0,
-            padding: theme.spacing(2)
-        },
-        closeButton: {
-            position: 'absolute',
-            right: theme.spacing(1),
-            top: theme.spacing(1),
-            color: theme.palette.grey[500]
-        }
-    });
-};
-var DialogTitle = withStyles(styles)(function (props) {
-    var children = props.children, classes = props.classes, onClose = props.onClose, other = __rest(props, ["children", "classes", "onClose"]);
-    return (React__default.createElement(DialogTitle$1, __assign({ disableTypography: true, style: { display: "flex", flexWrap: 'nowrap', justifyContent: 'space-between', alignItems: 'baseline' } }, other),
-        React__default.createElement(Typography$1, { variant: "h6" }, children),
-        onClose ? (React__default.createElement(IconButton, { "aria-label": "close", className: classes.closeButton, onClick: onClose },
-            React__default.createElement(CloseIcon, null))) : React__default.createElement(React__default.Fragment, null)));
-});
-var DialogContent = withStyles(function (theme) { return ({
-    root: {
-        padding: theme.spacing(2),
-        minWidth: 300
-    }
-}); })(DialogContent$1);
-var DialogActions = withStyles(function (theme) { return ({
-    root: {
-        margin: 0,
-        padding: theme.spacing(1)
-    }
-}); })(DialogActions$1);
-function Modal(_a) {
-    var children = _a.children, title = _a.title, handleClose = _a.handleClose, open = _a.open, _b = _a.id, id = _b === void 0 ? 'mesf-modal' : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? 'lg' : _c;
-    return (React__default.createElement(Dialog, { onClose: function () { return handleClose(); }, "aria-labelledby": id, open: open, maxWidth: maxWidth, style: { minWidth: 320 } },
-        React__default.createElement(DialogTitle, { id: id, onClose: function () { return handleClose(); } }, title),
-        children));
-}
-var Modal$1 = Object.assign(Modal, {
-    Content: DialogContent,
-    Actions: DialogActions
-});
-
 var ChangePassword$1 = function (_a) {
     var show = _a.show, userId = _a.userId, onHide = _a.onHide;
     var _b = useState(''), password = _b[0], setPasswordText = _b[1];
@@ -6293,6 +6218,62 @@ var MESApiService = /** @class */ (function () {
             });
         });
     };
+    MESApiService.prototype.callV2 = function (procedure, parameters, database) {
+        if (database === void 0) { database = ''; }
+        return __awaiter(this, void 0, void 0, function () {
+            var data, formattedParameters;
+            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(this).format('YYYY-MM-DDTHH:mm:ss'); }; // eslint-disable-line
+                return [2 /*return*/, fetch(this.config.API_PROCEDURE_URL + '/Execute', {
+                        method: "POST",
+                        mode: "cors",
+                        headers: {
+                            "Content-Type": "application/json",
+                            'Authorization': 'Bearer ' + getTokenFromLS()
+                        },
+                        body: JSON.stringify(data)
+                    })
+                        .then(function (response) { return __awaiter(_this, void 0, void 0, function () {
+                        var resp;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    if (response.status === 401) {
+                                        window.location.href = "".concat(base$2, "logout?message=Session%20expired&redirectTo=").concat(window.location.href);
+                                    }
+                                    return [4 /*yield*/, response.json()];
+                                case 1:
+                                    resp = _a.sent();
+                                    if (!response.ok) {
+                                        throw new Error(resp.message);
+                                    }
+                                    return [2 /*return*/, resp];
+                            }
+                        });
+                    }); })["catch"](function (err) {
+                        console.log('fromCatch', err);
+                        _this.hasErrors = true;
+                        _this.error = err;
+                        return err;
+                    })];
+            });
+        });
+    };
     MESApiService.prototype.callJSON = function (procedure, parameters, database) {
         if (database === void 0) { database = ''; }
         return __awaiter(this, void 0, void 0, function () {