@dexteel/mesf-core 3.11.9 → 3.12.0-alpha

package/dist/index.esm.js

@@ -1,7 +1,7 @@
-import { Typography, TextField, FormHelperText, CircularProgress as CircularProgress$1, Grid as Grid$1, Snackbar as Snackbar$1, makeStyles as makeStyles$1, createStyles as createStyles$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, List, ListItem, ListItemText, DialogActions as DialogActions$2 } from '@material-ui/core';
+import { 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, ThemeProvider, CssBaseline, 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 * as React from 'react';
-import React__default, { useState, useRef, useEffect, Component, createContext, useContext, useMemo, useCallback, lazy, Suspense } from 'react';
+import React__default, { useState, useRef, useEffect, Component, createContext, useContext, useCallback, useMemo, 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';
@@ -17,6 +17,8 @@ import MenuItem from '@material-ui/core/MenuItem';
 import MenuList from '@material-ui/core/MenuList';
 import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
 import axios from 'axios';
 import PropTypes from 'prop-types';
@@ -40,9 +42,9 @@ import { get, useForm, Controller } from 'react-hook-form';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import Snackbar from '@material-ui/core/Snackbar';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import MuiAlert from '@material-ui/lab/Alert';
+import Alert$2 from '@material-ui/lab/Alert';
 import TextField$1 from '@material-ui/core/TextField';
-import { Alert as Alert$2, AlertTitle } from '@material-ui/lab';
+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';
@@ -54,6 +56,11 @@ import FormHelperText$1 from '@material-ui/core/FormHelperText';
 import stc from 'string-to-color';
 import DeleteIcon from '@material-ui/icons/Delete';
 import EditIcon from '@material-ui/icons/Edit';
+import { 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 Input from '@material-ui/core/Input';
 import Chip from '@material-ui/core/Chip';
 import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
@@ -1129,10 +1136,10 @@ var useJobsTableData = function (_a) {
 };
 
 var Alert = function (props) {
-    return React__default.createElement(MuiAlert, __assign({ elevation: 6, variant: "filled" }, props));
+    return React__default.createElement(Alert$2, __assign({ elevation: 6, variant: "filled" }, props));
 };
 
-var useStyles$i = makeStyles(function (theme) {
+var useStyles$q = makeStyles(function (theme) {
     return createStyles({
         root: {
             '& .MuiDataGrid-row': {
@@ -1162,7 +1169,7 @@ var useStyles$i = makeStyles(function (theme) {
     });
 });
 var TableJobs = function () {
-    var classes = useStyles$i();
+    var classes = useStyles$q();
     var _a = useState(true), loading = _a[0], setLoading = _a[1];
     var actions = useJobsContext().actions;
     var _b = useState(false), messageLoading = _b[0], setMessageLoading = _b[1];
@@ -1448,7 +1455,7 @@ var useGetLogsFromAPI = function (_a) {
     return update;
 };
 
-var useStyles$h = makeStyles(function (theme) {
+var useStyles$p = makeStyles(function (theme) {
     return createStyles({
         title: {
             fontSize: 15
@@ -1467,7 +1474,7 @@ var formatTime = function (nowTime) {
 };
 var ModalLogSelected = function (_a) {
     var show = _a.show, onHide = _a.onHide, selectedLog = _a.selectedLog;
-    var classes = useStyles$h();
+    var classes = useStyles$p();
     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" } },
@@ -1552,7 +1559,7 @@ var SearchFilter = function (_a) {
         React__default.createElement(FormHelperText, { style: { marginBottom: 10, marginTop: -15 } }, "Search by Source, Message or User")));
 };
 
-var useStyles$g = makeStyles(function (theme) {
+var useStyles$o = makeStyles(function (theme) {
     return createStyles({
         root: {
             '& .MuiDataGrid-row': {
@@ -1583,7 +1590,7 @@ var useStyles$g = 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$g();
+    var classes = useStyles$o();
     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];
@@ -1638,7 +1645,7 @@ var TableLogs = function () {
                                     React.createElement(Grid, { item: true, md: 6, xs: 12 },
                                         React.createElement(Button, { variant: "contained", color: "primary", type: "submit", fullWidth: true }, "Search"))),
                                 !!errorsApi.length &&
-                                    React.createElement(Alert$2, { severity: "error", style: { marginTop: 15 } },
+                                    React.createElement(Alert$3, { severity: "error", style: { marginTop: 15 } },
                                         React.createElement(AlertTitle, null, "Error"),
                                         React.createElement("ul", null, errorsApi.map(function (error) { return React.createElement("li", { key: "err-".concat(error) }, error); })))))))),
             React.createElement(Grid, { item: true, md: 12 },
@@ -1955,7 +1962,7 @@ var useHandleAsignedPermission = function (_a) {
     };
 };
 
-var useStyles$f = makeStyles(function (theme) {
+var useStyles$n = makeStyles(function (theme) {
     return createStyles({
         formControl: {
             margin: "0 12px",
@@ -1977,7 +1984,7 @@ var useStyles$f = makeStyles(function (theme) {
 var PermissionsPicker = function (_a) {
     var isLoading = _a.isLoading, setIsLoading = _a.setIsLoading, profileForDelete = _a.profileForDelete, value = _a.value, onChange = _a.onChange, profilesToProfiles = _a.profilesToProfiles;
     var profiles = useProfilesContext().state.profiles;
-    var classes = useStyles$f();
+    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 });
@@ -2053,7 +2060,7 @@ var useGetProfilesEffect = function (_a) {
     }, []);
 };
 
-var useStyles$e = makeStyles(function (theme) {
+var useStyles$m = makeStyles(function (theme) {
     return createStyles({
         formControl: {
             margin: "0 12px",
@@ -2074,7 +2081,7 @@ var useStyles$e = makeStyles(function (theme) {
 });
 var ProfilesPicker$1 = function (_a) {
     var isLoading = _a.isLoading, setIsLoading = _a.setIsLoading, profileForDelete = _a.profileForDelete, profileIdForEdit = _a.profileIdForEdit, value = _a.value, onChange = _a.onChange;
-    var classes = useStyles$e();
+    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) {
@@ -2128,7 +2135,7 @@ var ProfilesPicker$1 = function (_a) {
                 })))))));
 };
 
-var useStyles$d = makeStyles(function (theme) {
+var useStyles$l = makeStyles(function (theme) {
     return createStyles({
         title: {
             fontSize: 15
@@ -2160,7 +2167,7 @@ var useStyles$d = makeStyles(function (theme) {
 var EditProfile = function (_a) {
     var _b;
     var profileForEdit = _a.profileForEdit, show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$d();
+    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];
@@ -2272,7 +2279,7 @@ var EditProfile = function (_a) {
             React.createElement(Alert, { severity: "info", onClose: handleClose }, "The profile was edited successfully"))));
 };
 
-var useStyles$c = makeStyles(function (theme) {
+var useStyles$k = makeStyles(function (theme) {
     return createStyles({
         title: {
             fontSize: 15
@@ -2299,7 +2306,7 @@ var CreateProfile = function (_a) {
     var _c = useState(false), open = _c[0], setOpen = _c[1];
     var _d = useState(false), isSubmitLoading = _d[0], setIsSubmitLoading = _d[1];
     var _e = useState(true), isLoading = _e[0], setIsLoading = _e[1];
-    var classes = useStyles$c();
+    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 onSubmit = function (data) { return __awaiter(void 0, void 0, void 0, function () {
@@ -2382,7 +2389,7 @@ var CreateProfile = function (_a) {
             React.createElement(Alert, { severity: "success", onClose: handleClose }, "The permission was asigned successfully"))));
 };
 
-var useStyles$b = makeStyles(function (theme) {
+var useStyles$j = makeStyles(function (theme) {
     return createStyles({
         title: {
             fontSize: 15
@@ -2401,7 +2408,7 @@ var useStyles$b = makeStyles(function (theme) {
 });
 var DeleteProfile = function (_a) {
     var profileForDelete = _a.profileForDelete, show = _a.show, onHide = _a.onHide;
-    var classes = useStyles$b();
+    var classes = useStyles$j();
     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];
@@ -2560,7 +2567,7 @@ var useTableData$2 = function (_a) {
     return { rows: rows, columns: columns };
 };
 
-var useStyles$a = makeStyles(function (theme) {
+var useStyles$i = makeStyles(function (theme) {
     return createStyles({
         root: {
             '& .MuiDataGrid-row': {
@@ -2599,7 +2606,7 @@ var TableProfiles = function (_a) {
     var _d = useState(false), modalDeleteProfile = _d[0], setModalDeleteProfile = _d[1];
     var _e = useState(null), profileForEdit = _e[0], setProfileForEdit = _e[1];
     var _f = useState(null), profileForDelete = _f[0], setProfileForDelete = _f[1];
-    var classes = useStyles$a();
+    var classes = useStyles$i();
     var _g = useTableData$2({
         setModalDeleteProfile: setModalDeleteProfile,
         setModalEditPermissionsProfile: setModalEditPermissionsProfile,
@@ -2888,7 +2895,7 @@ var DeleteShiftParameters = function (PatternStart) { return __awaiter(void 0, v
     });
 }); };
 
-var useStyles$9 = makeStyles(function (theme) {
+var useStyles$h = makeStyles(function (theme) {
     return createStyles({
         title: {
             fontSize: 15
@@ -2919,7 +2926,7 @@ var CreateShift = function (_a) {
     var _d = useState(false), open = _d[0], setOpen = _d[1];
     var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
     // const [isLoading, setIsLoading] = useState(true);
-    var classes = useStyles$9();
+    var classes = useStyles$h();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _f = useForm({ defaultValues: shiftTableData ? shiftTableData : INITIAL_VALUES$1 }); _f.register; var control = _f.control, handleSubmit = _f.handleSubmit, reset = _f.reset, watch = _f.watch, setValue = _f.setValue, errors = _f.formState.errors;
     // Progress bar
@@ -3101,7 +3108,7 @@ var CreateShift = function (_a) {
             React.createElement(Alert, { severity: "success", onClose: handleClose }, "The shift was created successfully"))));
 };
 
-var useStyles$8 = makeStyles(function (theme) {
+var useStyles$g = makeStyles(function (theme) {
     return createStyles({
         title: {
             fontSize: 15
@@ -3132,7 +3139,7 @@ var DeleteShift = function (_a) {
     var _c = useState(false), open = _c[0], setOpen = _c[1];
     var _d = useState(false), isSubmitLoading = _d[0], setIsSubmitLoading = _d[1];
     var _e = useState(false), deleteAlert = _e[0], setDeleteAlert = _e[1];
-    var classes = useStyles$8();
+    var classes = useStyles$g();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _f = useForm({ defaultValues: INITIAL_VALUES$1 }), control = _f.control, setValue = _f.setValue, reset = _f.reset, watch = _f.watch, errors = _f.formState.errors;
     var onDelete = function (data) { return __awaiter(void 0, void 0, void 0, function () {
@@ -3271,7 +3278,7 @@ var DeleteShift = function (_a) {
             React.createElement(Alert, { severity: "warning", onClose: handleClose }, "The shift was deleted successfully"))));
 };
 
-var useStyles$7 = makeStyles(function (theme) {
+var useStyles$f = makeStyles(function (theme) {
     return createStyles({
         title: {
             fontSize: 15
@@ -3302,7 +3309,7 @@ var EditShift = function (_a) {
     var _c = useState(false), open = _c[0], setOpen = _c[1];
     var _d = useState(false), isSubmitLoading = _d[0], setIsSubmitLoading = _d[1];
     var _e = useState(false), initialShiftPerDayAndCrewsNumber = _e[0], setInitialShiftPerDayAndCrewsNumber = _e[1];
-    var classes = useStyles$7();
+    var classes = useStyles$f();
     var shiftTableData = useShiftsCrewsContext().state.shiftTableData;
     var _f = useForm({ defaultValues: INITIAL_VALUES$1 }), control = _f.control, setValue = _f.setValue, handleSubmit = _f.handleSubmit, reset = _f.reset, watch = _f.watch, errors = _f.formState.errors;
     // Progress bar
@@ -3499,7 +3506,7 @@ var EditShift = function (_a) {
             React.createElement(Alert, { severity: "success", onClose: handleClose }, "The shift was created successfully"))));
 };
 
-var useStyles$6 = makeStyles(function (theme) {
+var useStyles$e = makeStyles(function (theme) {
     return createStyles({
         root: {
             '& .MuiDataGrid-row': {
@@ -3512,93 +3519,1461 @@ var useStyles$6 = makeStyles(function (theme) {
         relative: {
             position: "relative"
         },
-        textfield: {
-            margin: theme.spacing(2)
+        textfield: {
+            margin: theme.spacing(2)
+        },
+        btnModal: {
+            display: "flex",
+            justifyContent: "flex-end"
+        },
+        dataTable: {
+            padding: theme.spacing(1, 2)
+        }
+    });
+});
+var TableShiftsCrews = function (_a) {
+    var isLoading = _a.isLoading, getShiftsCrewsFromAPI = _a.getShiftsCrewsFromAPI;
+    var classes = useStyles$e();
+    var _b = useState(false), modalNewActive = _b[0], setModalNewActive = _b[1];
+    var _c = useState(false), modalEditShift = _c[0], setModalEditShift = _c[1];
+    var _d = useState(false), modalDeleteShift = _d[0], setModalDeleteShift = _d[1];
+    var _e = useTableData$1({ setModalEditShift: setModalEditShift, setModalDeleteShift: setModalDeleteShift }), rows = _e.rows, columns = _e.columns;
+    return (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" } },
+            React.createElement(Typography$1, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "Shifts / Crew")),
+        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(CreateShift, { show: modalNewActive, onHide: function () { return setModalNewActive(false); }, getShiftsCrewsFromAPI: getShiftsCrewsFromAPI }),
+                React.createElement(EditShift, { show: modalEditShift, onHide: function (shouldUpdate) {
+                        setModalEditShift(false);
+                        // setProfileForEdit(null)
+                        if (shouldUpdate)
+                            getShiftsCrewsFromAPI().then(function () { });
+                    } }),
+                React.createElement(DeleteShift, { show: modalDeleteShift, 
+                    // profileForDelete={profileForDelete}
+                    onHide: function (shouldUpdate) {
+                        setModalDeleteShift(false);
+                        //  TODO: debería reiniciar el el actiones.shifData con initial value? o un arreglo vacio de initial value o un arreglo vacio simplemente?
+                        if (shouldUpdate)
+                            getShiftsCrewsFromAPI().then(function () { });
+                    } }),
+                React.createElement(DataGrid, { className: classes.dataTable, density: 'compact', autoHeight: true, loading: isLoading, rows: rows, columns: columns, pageSize: 12, disableSelectionOnClick: true }),
+                React.createElement(Grid, { container: true, justifyContent: "flex-end" },
+                    React.createElement(Grid, { item: true, md: 2, xs: 12, className: classes.btnModal },
+                        React.createElement(Button, { variant: "contained", color: "primary", onClick: function () { return setModalNewActive(!modalNewActive); }, fullWidth: true, style: { margin: "20px 0 20px" } }, "NEW")))))));
+};
+
+var ShiftsCrews = function (prop) {
+    var _a = useState(true), isLoading = _a[0], setIsLoading = _a[1];
+    var _b = useShiftsCrewsContext(), _c = _b.state, shifts = _c.shifts; _c.pruebas; var _d = _b.actions, setShiftsCrews = _d.setShiftsCrews; _d.setPruebas;
+    var _e = useState([]); _e[0]; var setPrueba = _e[1];
+    var getShiftsCrewsFromAPI = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsLoading(true);
+                    return [4 /*yield*/, getShiftParameters()];
+                case 1:
+                    resp = _a.sent();
+                    if (resp.ok) {
+                        setShiftsCrews(resp.data.tables[0].rows);
+                        // FIXME: el seter no está funcionando
+                        setPrueba(resp.data.tables[0].rows);
+                        setIsLoading(false);
+                        // debugger;
+                    }
+                    else {
+                        console.log("something happened!");
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        getShiftsCrewsFromAPI();
+    }, []);
+    if (shifts) {
+        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(TableShiftsCrews, { isLoading: isLoading, getShiftsCrewsFromAPI: getShiftsCrewsFromAPI })))));
+    }
+    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 useStyles$d = makeStyles$1(function (theme) { return ({
+    root: {
+        alignItems: "center",
+        display: "flex",
+        height: "32px"
+    },
+    customNodeRoot: {
+        listStyleType: "none",
+        margin: 0,
+        padding: 0
+    },
+    arrow: {
+        alignItems: "center",
+        cursor: "pointer",
+        display: "flex",
+        height: "24px",
+        justifyContent: "center",
+        width: "24px",
+        transition: "transform linear 0.1s",
+        transform: "rotate(0deg)"
+    },
+    "arrow > div": {
+        alignItems: "center",
+        display: "flex"
+    },
+    "arrow.is-open": {
+        transform: "rotate(90deg)"
+    },
+    filetype: {
+        display: "flex"
+    },
+    label: {
+        paddingInlineStart: "8px"
+    },
+    selected: {
+        backgroundColor: "#e8f0fe"
+    },
+    dragging: {
+        opacity: 0.5
+    }
+}); });
+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 indent = props.depth * 24;
+    var classes = useStyles$d();
+    var nodeClasses = "".concat(classes.customNodeRoot, " ").concat(classes.root, " ").concat(isSelected ? classes.selected : "");
+    var handleClick = function (e) {
+        props.onClick(e, props.node);
+    };
+    var handleToggle = function (e) {
+        e.stopPropagation();
+        props.onToggle();
+    };
+    var handleContextMenu = useCallback(function (ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        setContextMenuOver(props.node, ev);
+    }, [id, setContextMenuOver]);
+    var handleViewAssetDialog = useCallback(function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+        onDoubleClick(props.node, e);
+        setContextMenuOver({
+            id: "",
+            parent: "",
+            text: "",
+            droppable: false
+        }, e);
+    }, [id, onDoubleClick]);
+    useEffect(function () {
+        var _a, _b;
+        (_a = props.containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('contextmenu', handleContextMenu);
+        (_b = props.containerRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('dblclick', handleViewAssetDialog);
+        return function () {
+            var _a, _b;
+            (_a = props.containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('contextmenu', handleContextMenu);
+            (_b = props.containerRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('dblclick', handleViewAssetDialog);
+        };
+    }, []);
+    return (React__default.createElement("div", { className: nodeClasses, style: { paddingInlineStart: indent }, "data-node-id": id, onClick: handleClick },
+        React__default.createElement("style", null, customStyles),
+        props.node.droppable ? (React__default.createElement("div", { className: "".concat(classes.arrow, " ").concat(props.isOpen ? classes['arrow.is-open'] : "") },
+            React__default.createElement("div", { onClick: handleToggle },
+                React__default.createElement(ArrowRight, { "data-testid": "arrow-right-icon-".concat(id) })))) : null,
+        React__default.createElement("div", { className: classes.filetype },
+            React__default.createElement(TypeIcon, { droppable: droppable, fileType: data === null || data === void 0 ? void 0 : data.fileType })),
+        React__default.createElement("div", { className: classes.label },
+            React__default.createElement(Typography, { variant: "body2" }, props.node.text))));
+};
+
+var theme = makeStyles$1({
+    components: {
+        MuiCssBaseline: {
+            styleOverrides: {
+                "*": {
+                    margin: 0,
+                    padding: 0
+                },
+                "html, body, #root": {
+                    height: "100%"
+                },
+                ul: {
+                    listStyle: "none"
+                }
+            }
+        },
+        MuiSvgIcon: {
+            styleOverrides: {
+                root: { verticalAlign: "middle" }
+            }
+        }
+    }
+});
+
+var useStyles$c = makeStyles$1(function (theme) { return ({
+    root: {
+        alignItems: "flex-start",
+        backgroundColor: "#1967d2",
+        borderRadius: "4px",
+        boxShadow: "0 12px 24px -6px rgba(0, 0, 0, 0.25); 0 0 0 1px rgba(0, 0, 0, 0.08)",
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        padding: "8px"
+    },
+    item: {
+        alignItems: "center",
+        color: "#fff",
+        display: "inline-grid",
+        fontSize: "14px",
+        gap: "8px",
+        gridTemplateColumns: "auto auto"
+    },
+    icon: {
+        alignItems: "center",
+        display: "flex"
+    },
+    label: {
+        alignItems: "center",
+        display: "flex"
+    },
+    badge: {
+        border: "solid 2px #fff"
+    }
+}); });
+var MultipleDragPreview = function (props) {
+    var classes = useStyles$c();
+    return (React__default.createElement(Badge, { classes: { badge: classes.badge }, color: "error", badgeContent: props.dragSources.length, anchorOrigin: { vertical: "top", horizontal: "right" } },
+        React__default.createElement("div", { className: classes.root, "data-testid": "custom-drag-preview" }, props.dragSources.map(function (node) {
+            var _a;
+            return (React__default.createElement("div", { className: classes.item },
+                React__default.createElement("div", { className: classes.icon },
+                    React__default.createElement(TypeIcon, { droppable: node.droppable || false, fileType: (_a = node === null || node === void 0 ? void 0 : node.data) === null || _a === void 0 ? void 0 : _a.fileType })),
+                React__default.createElement("div", { className: classes.label }, node.text)));
+        }))));
+};
+
+var useStyles$b = makeStyles$1(function (theme) { return ({
+    root: {
+        alignItems: "center",
+        backgroundColor: "#1967d2",
+        borderRadius: "4px",
+        boxShadow: " 0 12px 24px -6px rgba(0, 0, 0, .25); 0 0 0 1px rgba(0, 0, 0, .08)",
+        color: "#fff",
+        display: "inline-grid",
+        fontSize: "14px",
+        gap: "8px",
+        gridTemplateColumns: "auto auto",
+        padding: "4px 8px",
+        pointerEvents: "none"
+    },
+    icon: {
+        alignItems: "center",
+        display: "flex"
+    },
+    label: {
+        alignItems: "center",
+        display: "flex"
+    }
+}); });
+var CustomDragPreview = function (props) {
+    var _a;
+    var classes = useStyles$b();
+    var item = props.monitorProps.item;
+    return (React__default.createElement("div", { className: classes.root },
+        React__default.createElement("div", { className: classes.icon },
+            React__default.createElement(TypeIcon, { droppable: item.droppable, fileType: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.fileType })),
+        React__default.createElement("div", { className: classes.label }, item.text)));
+};
+
+var updateAsset = function (AssetId, ParentAssetId) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp, e_1;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({
+                    name: "AssetId",
+                    value: AssetId
+                });
+                parameters.push({ name: "ParentAssetId", value: ParentAssetId });
+                _a.label = 1;
+            case 1:
+                _a.trys.push([1, 3, , 4]);
+                return [4 /*yield*/, apiService.call("[MES].[UpdateParentAssetId]", parameters)];
+            case 2:
+                resp = _a.sent();
+                return [2 /*return*/, {
+                        ok: true,
+                        data: resp
+                    }];
+            case 3:
+                e_1 = _a.sent();
+                return [2 /*return*/, { ok: false, message: e_1.toString() }];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
+var insertAsset = function (AssetName, ParentAssetId, IsAsset, CanBeDefaultAsset) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp, e_2;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                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:
+                _a.trys.push([1, 3, , 4]);
+                return [4 /*yield*/, apiService.call("[MES].[InsertAsset]", parameters)];
+            case 2:
+                resp = _a.sent();
+                return [2 /*return*/, {
+                        ok: true,
+                        data: resp
+                    }];
+            case 3:
+                e_2 = _a.sent();
+                return [2 /*return*/, { ok: false, message: e_2.toString() }];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
+var UpdateAssetData = function (AssetId, AssetName, ParentAssetId, IsAsset, CanBeDefaultAsset) { 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: "AssetId", value: AssetId });
+                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:
+                _a.trys.push([1, 3, , 4]);
+                return [4 /*yield*/, apiService.call("[MES].[UpdateAssetData]", parameters)];
+            case 2:
+                resp = _a.sent();
+                return [2 /*return*/, {
+                        ok: true,
+                        data: resp
+                    }];
+            case 3:
+                e_3 = _a.sent();
+                return [2 /*return*/, { ok: false, message: e_3.toString() }];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
+var removeAsset = function (AssetId, IsActive) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp, e_4;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "AssetId", value: AssetId });
+                parameters.push({ name: "IsActive", value: IsActive });
+                _a.label = 1;
+            case 1:
+                _a.trys.push([1, 3, , 4]);
+                return [4 /*yield*/, apiService.call("[MES].[RemoveAsset]", parameters)];
+            case 2:
+                resp = _a.sent();
+                return [2 /*return*/, {
+                        ok: true,
+                        data: resp
+                    }];
+            case 3:
+                e_4 = _a.sent();
+                return [2 /*return*/, { ok: false, message: e_4.toString() }];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
+
+var AssetInitialState = {
+    areasList: [],
+    allAssets: []
+};
+var AssetReducer = createSlice({
+    name: "__",
+    initialState: AssetInitialState,
+    reducers: {
+        setAreasList: function (state, _a) {
+            var payload = _a.payload;
+            state.areasList = payload;
+        },
+        // ===========================
+        setAllAssets: function (state, _a) {
+            var payload = _a.payload;
+            state.allAssets = payload;
+        }
+    }
+});
+
+var AssetContext = createContext({
+    state: AssetReducer.getInitialState(),
+    actions: AssetReducer.actions
+});
+var useAssetContext = function () { return useContext(AssetContext); };
+var AssetProvider = function (_a) {
+    var children = _a.children;
+    var _b = useComplexState({
+        initialState: AssetReducer.getInitialState(),
+        reducers: AssetReducer.caseReducers
+    }), state = _b[0], actions = _b[1];
+    return (React__default.createElement(AssetContext.Provider, { value: { state: state, actions: actions } }, children));
+};
+
+var TransformAssetModelData = function (node) {
+    var model = {
+        id: node.AssetId,
+        parent: node.ParentAssetId ? node.ParentAssetId : 0,
+        text: node.AssetName,
+        data: {
+            fileType: 'csv',
+            fileSize: ""
+        },
+        droppable: node.IsBranch
+    };
+    return model;
+};
+
+var DATA_ASSET_INITIAL_VALUES = {
+    AssetId: null,
+    ParentAssetId: 1,
+    AssetName: "",
+    IsAsset: false,
+    CanBeDefaultAsset: false,
+    ParentAssetName: ""
+};
+
+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 searchAssets = function () {
+        getAssets().then(function (res) {
+            var mydataSource = [];
+            var rows = get$1(res, "data.tables[0].rows", []);
+            var areas = rows.filter(function (asset) { return asset.CanBeDefaultAsset; });
+            setAllAssets(rows);
+            setAreasList(areas);
+            rows.forEach(function (row) {
+                var code = TransformAssetModelData(row);
+                mydataSource = __spreadArray(__spreadArray([], mydataSource, true), [code], false);
+            });
+            setAllAssetNodes(mydataSource);
+        });
+    };
+    return { searchAssets: searchAssets };
+};
+
+var useAssetActions = function (_a) {
+    var asset = _a.asset, selectedNodes = _a.selectedNodes, originalAsset = _a.originalAsset, setAsset = _a.setAsset, setSelectedNodes = _a.setSelectedNodes, isCtrlPressing = _a.isCtrlPressing, setIsDragging = _a.setIsDragging, setIsCtrlPressing = _a.setIsCtrlPressing;
+    var _b = useState([]), changedNodes = _b[0], setChangedNodes = _b[1];
+    var _c = useState(false), updatedSuccessfullyMessage = _c[0], setUpdatedSuccessfullyMessage = _c[1];
+    var searchAssets = useSearchAssets$1().searchAssets;
+    var hasNodeChanged = function (originalNode, currentNode) {
+        return originalNode.parent !== currentNode.parent;
+    };
+    var updateChangedNodes = function (updatedNode) {
+        setChangedNodes(function (prevChangedNodes) {
+            var nodeIndex = prevChangedNodes.findIndex(function (node) { return node.id === updatedNode.id; });
+            if (nodeIndex !== -1) {
+                var updatedNodes = __spreadArray([], prevChangedNodes, true);
+                updatedNodes[nodeIndex] = updatedNode;
+                return updatedNodes;
+            }
+            else {
+                return __spreadArray(__spreadArray([], prevChangedNodes, true), [updatedNode], false);
+            }
+        });
+    };
+    var handleDrop = function (newAsset, options) {
+        var dropTargetId = options.dropTargetId;
+        var updatedAsset = newAsset.map(function (node) {
+            if (selectedNodes.some(function (selectedNode) { return selectedNode.id === node.id; })) {
+                // Busca el nodo original en el estado 'originalAsset'
+                var originalNode = originalAsset.find(function (original) { return original.id === node.id; });
+                // Aseguro de que haya un nodo original antes de realizar la comparación
+                if (originalNode) {
+                    // Realiza cambios en el nodo según sea necesario
+                    var updatedNode_1 = __assign(__assign({}, node), { parent: dropTargetId });
+                    // Verifica si el nodo ha cambiado utilizando la función hasNodeChanged
+                    if (hasNodeChanged(originalNode, updatedNode_1)) {
+                        // Registra el nodo como cambiado solo si ha cambiado en relación al estado original
+                        updateChangedNodes(updatedNode_1);
+                    }
+                    else {
+                        // Si el nodo ha vuelto a su posición original, elimínalo de changedNodes
+                        setChangedNodes(function (prevChangedNodes) {
+                            return prevChangedNodes.filter(function (changedNode) { return changedNode.id !== updatedNode_1.id; });
+                        });
+                    }
+                }
+            }
+            return node;
+        });
+        setAsset(updatedAsset);
+        setSelectedNodes([]);
+    };
+    var handleUpdateAsset = function () {
+        changedNodes.forEach(function (node) { return __awaiter(void 0, void 0, void 0, function () {
+            var updateAssetNode;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, updateAsset(node.id, node.parent ? node.parent : null)];
+                    case 1:
+                        updateAssetNode = _a.sent();
+                        if (!updateAssetNode.ok) ;
+                        return [2 /*return*/];
+                }
+            });
+        }); }, setTimeout(function () {
+            setUpdatedSuccessfullyMessage(true);
+            searchAssets();
+        }, 100));
+        setChangedNodes([]);
+    };
+    var handleSingleSelect = function (node) {
+        setSelectedNodes([node]);
+    };
+    var handleMultiSelect = function (clickedNode) {
+        var selectedIds = selectedNodes.map(function (n) { return n.id; });
+        if (selectedIds.includes(clickedNode.id)) {
+            return;
+        }
+        if (selectedIds.some(function (selectedId) {
+            return isAncestor(asset, selectedId, clickedNode.id);
+        })) {
+            return;
+        }
+        var updateNodes = __spreadArray([], selectedNodes, true);
+        updateNodes = updateNodes.filter(function (selectedNode) {
+            return !isAncestor(asset, clickedNode.id, selectedNode.id);
+        });
+        updateNodes = __spreadArray(__spreadArray([], updateNodes, true), [clickedNode], false);
+        setSelectedNodes(updateNodes);
+    };
+    var handleCtrlClick = function (e, node) {
+        if (e.ctrlKey || e.metaKey) {
+            handleMultiSelect(node);
+        }
+        else {
+            handleSingleSelect(node);
+        }
+    };
+    var handleDragStart = function (node) {
+        var isSelectedNode = selectedNodes.some(function (n) { return n.id === node.id; });
+        setIsDragging(true);
+        if (!isCtrlPressing && isSelectedNode) {
+            return;
+        }
+        if (!isCtrlPressing) {
+            setSelectedNodes([node]);
+            return;
+        }
+        if (!selectedNodes.some(function (n) { return n.id === node.id; })) {
+            setSelectedNodes(__spreadArray(__spreadArray([], selectedNodes, true), [node], false));
+        }
+    };
+    var handleDragEnd = function () {
+        setIsDragging(false);
+        setIsCtrlPressing(false);
+        setSelectedNodes([]);
+    };
+    return { handleDrop: handleDrop, handleUpdateAsset: handleUpdateAsset, handleCtrlClick: handleCtrlClick, handleDragEnd: handleDragEnd, handleDragStart: handleDragStart, changedNodes: changedNodes, updatedSuccessfullyMessage: updatedSuccessfullyMessage, setUpdatedSuccessfullyMessage: setUpdatedSuccessfullyMessage, setChangedNodes: setChangedNodes };
+};
+
+var useAssetCodes = function () {
+    var allAssets = useAssetContext().state.allAssets;
+    var setAssetCodes = useConfigurationAssetContext().actions.setAssetCodes;
+    var buildTreeAssets = function (nodes) {
+        if (nodes === undefined)
+            return;
+        //tree build functions        
+        var idMapping = nodes.reduce(function (acc, el, i) {
+            acc[el.id] = i;
+            return acc;
+        }, {});
+        var root;
+        nodes.forEach(function (el) {
+            // Handle the root element
+            if (el.parentId === null) {
+                root = el;
+                return;
+            }
+            // Use our mapping to locate the parent element in our data array
+            var parentEl = nodes[idMapping[el.parentId]];
+            // Add our current el to its parent's `children` array
+            parentEl.children = __spreadArray(__spreadArray([], (parentEl.children || []), true), [el], false);
+        });
+        setAssetCodes(root);
+    };
+    var loadFilterAssets = function () {
+        var mydataSource = [];
+        allAssets.forEach(function (row) {
+            var code = TransformAssetCodeModel(row);
+            mydataSource = __spreadArray(__spreadArray([], mydataSource, true), [code], false);
+        });
+        buildTreeAssets(mydataSource);
+    };
+    var TransformAssetCodeModel = function (data) {
+        var model = {
+            id: data.AssetId,
+            parentId: data.ParentAssetId,
+            name: data.AssetName,
+            isLeaf: data.isLeaf,
+            isActive: true
+        };
+        return model;
+    };
+    return { loadFilterAssets: loadFilterAssets };
+};
+
+var useStyles$a = makeStyles(function (theme) { return ({
+    root: {
+        "& .input-group-text": {
+            display: "none"
+        },
+        "& .MuiPaper-root": {
+            height: "auto"
+        }
+    },
+    checkbox: {
+        userSelect: "none"
+    },
+    modalTitle: {
+        backgroundColor: '#ced2cc',
+        color: '#495057',
+        textAlign: 'center'
+    },
+    modalTitleCloseWO: {
+        backgroundColor: '#28a745',
+        color: 'white',
+        textAlign: 'center'
+    },
+    modalWarning: {
+        color: 'white',
+        backgroundColor: '#dc3545',
+        textAlign: 'center'
+    },
+    messageTitle: {
+        fontSize: 15,
+        fontWeight: 'bold',
+        color: "#0000008A"
+    }, formControl: {
+        margin: theme.spacing(2),
+        minWidth: 120
+    }, errorLabel: {
+        fontSize: 12,
+        color: "#F44336"
+    }
+}); });
+var CreateNewAssetDialog = function (_a) {
+    var show = _a.show, onHide = _a.onHide;
+    var classes = useStyles$a();
+    var _b = useState(true), fullWidth = _b[0]; _b[1];
+    var _c = useState('sm'), maxWidth = _c[0]; _c[1];
+    var _d = useState(false), isSubmitLoading = _d[0], setIsSubmitLoading = _d[1];
+    var _e = useState(false); _e[0]; _e[1];
+    var _f = useState(false), assetCreatedSuccess = _f[0], setAssetCreatedSuccess = _f[1];
+    var _g = useState(false), error = _g[0], setError = _g[1];
+    var _h = useState(""), errorMessege = _h[0], setErrorMessege = _h[1];
+    var _j = useConfigurationAssetContext(), _k = _j.state, ParentAssetId = _k.dataToCreateAsset.ParentAssetId, assetCodes = _k.assetCodes, dataToCreateAsset = _k.dataToCreateAsset, assetTreeName = _k.assetTreeName, _l = _j.actions, setAssetNameToCreateAsset = _l.setAssetNameToCreateAsset, setAssetTreeName = _l.setAssetTreeName, setAssetParentAssetIdToCreateAsset = _l.setAssetParentAssetIdToCreateAsset;
+    var searchAssets = useSearchAssets$1().searchAssets;
+    var loadFilterAssets = useAssetCodes().loadFilterAssets;
+    var _m = useForm({ defaultValues: dataToCreateAsset ? dataToCreateAsset : DATA_ASSET_INITIAL_VALUES }), control = _m.control, handleSubmit = _m.handleSubmit, reset = _m.reset, setValue = _m.setValue, errors = _m.formState.errors;
+    var handleCancel = function () {
+        reset();
+        onHide(false);
+    };
+    var handleClose = function (event, reason) {
+        if (reason === 'clickaway') {
+            return;
+        }
+        reset();
+        setAssetCreatedSuccess(false);
+        setError(false);
+    };
+    var handleCreateAsset = function (data) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsSubmitLoading(true);
+                    _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) {
+                            if (res) {
+                                setIsSubmitLoading(false);
+                                setAssetCreatedSuccess(true);
+                                searchAssets();
+                                onHide(true);
+                            }
+                        })];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    _a.sent();
+                    setErrorMessege("Please select a document and try again");
+                    setIsSubmitLoading(false);
+                    setError(true);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var changeParentAssetId = function (value, description) {
+        setValue("ParentAssetId", parseInt(value));
+        setAssetParentAssetIdToCreateAsset(parseInt(value));
+        setAssetTreeName(description);
+    };
+    var handleFormSubmit = handleSubmit(handleCreateAsset);
+    useEffect(function () {
+        if (show) {
+            loadFilterAssets();
+            setAssetParentAssetIdToCreateAsset(1);
+            setAssetTreeName("Plant");
+            setAssetNameToCreateAsset("");
+        }
+    }, [show]);
+    return ((React__default.createElement("div", { className: classes.root },
+        React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
+            React__default.createElement("form", { onSubmit: handleFormSubmit },
+                React__default.createElement(Grid, { container: true, style: { padding: "15px 0 20px", height: "50%" } },
+                    React__default.createElement(Grid, { container: true, item: true },
+                        React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
+                            React__default.createElement(Typography, { style: { padding: "0 24px 12px", fontSize: 25 } }, "NEW ASSET"))),
+                    React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
+                        React__default.createElement(DialogContent$2, { dividers: true, style: { padding: "10px 24px 0" } },
+                            React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
+                                React__default.createElement(Controller, { name: "AssetName", control: control, rules: {
+                                        validate: {
+                                            notEmpty: function (value) { return value.trim() !== ""; }
+                                        }
+                                    }, render: function (_a) {
+                                        var _b;
+                                        var _c = _a.field, onChange = _c.onChange, value = _c.value;
+                                        return (React__default.createElement(React__default.Fragment, null,
+                                            React__default.createElement(TextField, { label: "Asset Name", variant: "outlined", error: !!errors.AssetName, fullWidth: true, margin: "dense", autoComplete: "off", onChange: onChange, value: value }),
+                                            ((_b = errors.AssetName) === null || _b === void 0 ? void 0 : _b.type) === 'notEmpty' && (React__default.createElement("span", { className: classes.errorLabel }, "Asset Name is required"))));
+                                    } })),
+                            React__default.createElement(Grid, { container: true },
+                                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: "Choose Parent Asset", dataSource: assetCodes, value: ParentAssetId, description: assetTreeName || "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, { 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" }));
+                                            } }))))),
+                        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" } },
+                                React__default.createElement(Grid, { container: true, justifyContent: "flex-end", style: { margin: 0 } },
+                                    React__default.createElement(Grid, { container: true, item: true, style: { marginLeft: "auto", marginTop: 5, marginBottom: 0 } },
+                                        React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingLeft: "0", paddingRight: "16px" } },
+                                            React__default.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return handleCancel(); } }, "Cancel")),
+                                        React__default.createElement(Grid, { item: true, md: 6, xs: 12 },
+                                            React__default.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React__default.createElement(CircularProgress$1, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: 'submit' }, "Save")))))))))),
+        React__default.createElement(Snackbar, { open: assetCreatedSuccess, autoHideDuration: 2500, onClose: handleClose },
+            React__default.createElement(Alert$2, { severity: "info", onClose: handleClose }, "Document created succesfully")),
+        React__default.createElement(Snackbar, { open: error, autoHideDuration: 2500, onClose: handleClose },
+            React__default.createElement(Alert$2, { severity: "error", onClose: handleClose }, errorMessege)))));
+};
+
+var useStyles$9 = makeStyles(function (theme) { return ({
+    root: {
+        "& .input-group-text": {
+            display: "none"
+        },
+        "& .MuiPaper-root": {
+            height: "auto"
         },
-        btnModal: {
-            display: "flex",
-            justifyContent: "flex-end"
+        "& .MuiDialogContent-dividers": {
+            borderBottom: "unset"
+        }
+    },
+    customDialog: {
+        "& .MuiDivider-root:last-child": {
+            display: "none"
+        }
+    },
+    checkbox: {
+        userSelect: "none"
+    },
+    modalTitle: {
+        backgroundColor: '#ced2cc',
+        color: '#495057',
+        textAlign: 'center'
+    },
+    modalTitleCloseWO: {
+        backgroundColor: '#28a745',
+        color: 'white',
+        textAlign: 'center'
+    },
+    modalWarning: {
+        color: 'white',
+        backgroundColor: '#dc3545',
+        textAlign: 'center'
+    },
+    messageTitle: {
+        fontSize: 15,
+        fontWeight: 'bold',
+        color: "#0000008A"
+    }, formControl: {
+        margin: theme.spacing(2),
+        minWidth: 120
+    }, errorLabel: {
+        fontSize: 12,
+        color: "#F44336"
+    }
+}); });
+var ViewerAssetDialog = function (_a) {
+    var show = _a.show, onHide = _a.onHide;
+    var classes = useStyles$9();
+    var _b = useState(true), fullWidth = _b[0]; _b[1];
+    var _c = useState('sm'), maxWidth = _c[0]; _c[1];
+    var _d = useConfigurationAssetContext().state, dataToCreateAsset = _d.dataToCreateAsset, assetNodeSelectedInTree = _d.assetNodeSelectedInTree;
+    var allAssets = useAssetContext().state.allAssets;
+    var _e = useForm({ defaultValues: dataToCreateAsset ? dataToCreateAsset : DATA_ASSET_INITIAL_VALUES }), control = _e.control, reset = _e.reset, setValue = _e.setValue, errors = _e.formState.errors;
+    var handleCancel = function () {
+        reset();
+        onHide(false);
+    };
+    useEffect(function () {
+        if (show) {
+            setValue("ParentAssetId", assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.ParentAssetId);
+            var parentAssetNode = allAssets.find(function (node) { return node.AssetId === (assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.ParentAssetId); });
+            setValue("AssetName", assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.AssetName);
+            setValue("ParentAssetName", parentAssetNode === null || parentAssetNode === void 0 ? void 0 : parentAssetNode.AssetName);
+            setValue("IsAsset", assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.IsAsset);
+            setValue("CanBeDefaultAsset", assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.CanBeDefaultAsset);
+        }
+    }, [show]);
+    return ((React__default.createElement("div", { className: classes.root },
+        React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
+            React__default.createElement("form", { onSubmit: function () { } },
+                React__default.createElement(Grid, { container: true, style: { padding: "15px 0", height: "50%" } },
+                    React__default.createElement(Grid, { container: true, item: true },
+                        React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
+                            React__default.createElement(Typography, { style: { padding: "0 24px 12px", fontSize: 25 } },
+                                "ASSET: ", assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 :
+                                assetNodeSelectedInTree.AssetName))),
+                    React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
+                        React__default.createElement(DialogContent$2, { dividers: true, style: { padding: "10px 24px 0" } },
+                            React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
+                                React__default.createElement(Controller, { name: "AssetName", control: control, render: function (_a) {
+                                        var _b = _a.field, onChange = _b.onChange, value = _b.value;
+                                        return (React__default.createElement(React__default.Fragment, null,
+                                            React__default.createElement(TextField, { label: "Asset Name", variant: "outlined", error: !!errors.AssetName, fullWidth: true, margin: "dense", autoComplete: "off", onChange: onChange, value: value, disabled: true })));
+                                    } })),
+                            React__default.createElement(Grid, { container: true },
+                                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: "ParentAssetName", control: control, render: function (_a) {
+                                                var _b = _a.field, onChange = _b.onChange, value = _b.value;
+                                                return (React__default.createElement(React__default.Fragment, null, value ?
+                                                    React__default.createElement(TextField, { label: "Parent Asset Name", variant: "outlined", error: !!errors.AssetName, fullWidth: true, margin: "dense", autoComplete: "off", onChange: onChange, value: value || "", disabled: true }) : React__default.createElement(React__default.Fragment, null)));
+                                            } }))),
+                                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", disabled: true }), label: "Is Asset" }));
+                                            } })),
+                                    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" }));
+                                            } }))))))))))));
+};
+
+var useStyles$8 = makeStyles(function (theme) { return ({
+    root: {
+        "& .input-group-text": {
+            display: "none"
         },
-        dataTable: {
-            padding: theme.spacing(1, 2)
+        "& .MuiDialogContent-dividers": {
+            padding: 0
         }
-    });
-});
-var TableShiftsCrews = function (_a) {
-    var isLoading = _a.isLoading, getShiftsCrewsFromAPI = _a.getShiftsCrewsFromAPI;
-    var classes = useStyles$6();
-    var _b = useState(false), modalNewActive = _b[0], setModalNewActive = _b[1];
-    var _c = useState(false), modalEditShift = _c[0], setModalEditShift = _c[1];
-    var _d = useState(false), modalDeleteShift = _d[0], setModalDeleteShift = _d[1];
-    var _e = useTableData$1({ setModalEditShift: setModalEditShift, setModalDeleteShift: setModalDeleteShift }), rows = _e.rows, columns = _e.columns;
-    return (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" } },
-            React.createElement(Typography$1, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "Shifts / Crew")),
-        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(CreateShift, { show: modalNewActive, onHide: function () { return setModalNewActive(false); }, getShiftsCrewsFromAPI: getShiftsCrewsFromAPI }),
-                React.createElement(EditShift, { show: modalEditShift, onHide: function (shouldUpdate) {
-                        setModalEditShift(false);
-                        // setProfileForEdit(null)
-                        if (shouldUpdate)
-                            getShiftsCrewsFromAPI().then(function () { });
-                    } }),
-                React.createElement(DeleteShift, { show: modalDeleteShift, 
-                    // profileForDelete={profileForDelete}
-                    onHide: function (shouldUpdate) {
-                        setModalDeleteShift(false);
-                        //  TODO: debería reiniciar el el actiones.shifData con initial value? o un arreglo vacio de initial value o un arreglo vacio simplemente?
-                        if (shouldUpdate)
-                            getShiftsCrewsFromAPI().then(function () { });
-                    } }),
-                React.createElement(DataGrid, { className: classes.dataTable, density: 'compact', autoHeight: true, loading: isLoading, rows: rows, columns: columns, pageSize: 12, disableSelectionOnClick: true }),
-                React.createElement(Grid, { container: true, justifyContent: "flex-end" },
-                    React.createElement(Grid, { item: true, md: 2, xs: 12, className: classes.btnModal },
-                        React.createElement(Button, { variant: "contained", color: "primary", onClick: function () { return setModalNewActive(!modalNewActive); }, fullWidth: true, style: { margin: "20px 0 20px" } }, "NEW")))))));
+    },
+    modalTitle: {
+        backgroundColor: '#ced2cc',
+        color: '#495057',
+        textAlign: 'center'
+    },
+    modalTitleCloseWO: {
+        backgroundColor: '#28a745',
+        color: 'white',
+        textAlign: 'center'
+    },
+    modalWarning: {
+        color: 'white',
+        backgroundColor: '#dc3545',
+        textAlign: 'center'
+    },
+    messageTitle: {
+        fontSize: 15,
+        fontWeight: 'bold',
+        color: "#0000008A"
+    }, formControl: {
+        margin: theme.spacing(2),
+        minWidth: 120
+    }, errorLabel: {
+        fontSize: 12,
+        color: "#F44336"
+    },
+    infoLabel: {
+        fontSize: 12,
+        color: "#757575"
+    }
+}); });
+var RemoveAssetDialog = function (_a) {
+    var show = _a.show, onHide = _a.onHide;
+    var classes = useStyles$8();
+    var _b = useState(true), fullWidth = _b[0]; _b[1];
+    var _c = useState('sm'), maxWidth = _c[0]; _c[1];
+    var _d = useState(false), isSubmitLoading = _d[0], setIsSubmitLoading = _d[1];
+    var _e = useState(false), assetRemovedSuccess = _e[0], setAssetRemovedSuccess = _e[1];
+    var _f = useState(false), error = _f[0], setError = _f[1];
+    var assetNodeSelectedInTree = useConfigurationAssetContext().state.assetNodeSelectedInTree;
+    var searchAssets = useSearchAssets$1().searchAssets;
+    var handleCancel = function () {
+        setIsSubmitLoading(false);
+        onHide(false);
+    };
+    var handleClose = function (event, reason) {
+        if (reason === 'clickaway') {
+            return;
+        }
+        setAssetRemovedSuccess(false);
+        setError(false);
+    };
+    var handleRemoveAsset = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var e_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsSubmitLoading(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, removeAsset(assetNodeSelectedInTree.AssetId, false)];
+                case 2:
+                    _a.sent();
+                    setAssetRemovedSuccess(true);
+                    setIsSubmitLoading(false);
+                    onHide(false);
+                    return [3 /*break*/, 5];
+                case 3:
+                    e_1 = _a.sent();
+                    console.log(e_1);
+                    setIsSubmitLoading(false);
+                    setError(true);
+                    return [3 /*break*/, 5];
+                case 4:
+                    searchAssets();
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
+            React__default.createElement(DialogTitle$2, { id: "responsive-dialog-title" }, "WARNING"),
+            React__default.createElement(DialogContent$2, null,
+                React__default.createElement(DialogContentText$1, { style: { padding: 0, margin: 0 } },
+                    "Be careful, once deleted you will not be able to recover this asset ",
+                    React__default.createElement("b", null,
+                        "(", assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 :
+                        assetNodeSelectedInTree.AssetName,
+                        ")"),
+                    ", are you sure you want to delete?")),
+            React__default.createElement(DialogActions$2, { style: { padding: "16px 24px" } },
+                React__default.createElement(Button$1, { onClick: function () { return onHide(false); }, autoFocus: true, color: "default" }, "CANCEL"),
+                React__default.createElement(Button$1, { autoFocus: true, color: "secondary", startIcon: isSubmitLoading && React__default.createElement(CircularProgress$1, { size: "1rem" }), onClick: handleRemoveAsset }, "Delete"))),
+        React__default.createElement(Snackbar, { open: assetRemovedSuccess, autoHideDuration: 2500, onClose: handleClose },
+            React__default.createElement(Alert$2, { severity: "info", onClose: handleClose }, "Asset removed succesfully")),
+        React__default.createElement(Snackbar, { open: error, autoHideDuration: 2500, onClose: handleClose },
+            React__default.createElement(Alert$2, { severity: "error", onClose: handleClose }, "Something went wrong, try again"))));
 };
 
-var ShiftsCrews = function (prop) {
-    var _a = useState(true), isLoading = _a[0], setIsLoading = _a[1];
-    var _b = useShiftsCrewsContext(), _c = _b.state, shifts = _c.shifts; _c.pruebas; var _d = _b.actions, setShiftsCrews = _d.setShiftsCrews; _d.setPruebas;
-    var _e = useState([]); _e[0]; var setPrueba = _e[1];
-    var getShiftsCrewsFromAPI = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var resp;
+var useStyles$7 = makeStyles(function (theme) { return ({
+    root: {
+        "& .input-group-text": {
+            display: "none"
+        },
+        "& .MuiPaper-root": {
+            height: "auto"
+        }
+    },
+    customDialog: {
+        "& .MuiDivider-root:last-child": {
+            display: "none"
+        }
+    },
+    checkbox: {
+        userSelect: "none"
+    },
+    modalTitle: {
+        backgroundColor: '#ced2cc',
+        color: '#495057',
+        textAlign: 'center'
+    },
+    modalTitleCloseWO: {
+        backgroundColor: '#28a745',
+        color: 'white',
+        textAlign: 'center'
+    },
+    modalWarning: {
+        color: 'white',
+        backgroundColor: '#dc3545',
+        textAlign: 'center'
+    },
+    messageTitle: {
+        fontSize: 15,
+        fontWeight: 'bold',
+        color: "#0000008A"
+    }, formControl: {
+        margin: theme.spacing(2),
+        minWidth: 120
+    }, errorLabel: {
+        fontSize: 12,
+        color: "#F44336"
+    }
+}); });
+var EditAssetDialog = function (_a) {
+    var show = _a.show, onHide = _a.onHide;
+    var classes = useStyles$7();
+    var _b = useState(true), fullWidth = _b[0]; _b[1];
+    var _c = useState('sm'), maxWidth = _c[0]; _c[1];
+    var _d = useState(false), isSubmitLoading = _d[0], setIsSubmitLoading = _d[1];
+    var _e = useState(false); _e[0]; var setAssetEditedSuccess = _e[1];
+    var _f = useState(false); _f[0]; var setError = _f[1];
+    var _g = useState(""); _g[0]; var setErrorMessege = _g[1];
+    var _h = useConfigurationAssetContext(), _j = _h.state, assetNodeSelectedInTree = _j.assetNodeSelectedInTree, assetCodes = _j.assetCodes, setParentAssetNameInNodeSelectedInTree = _h.actions.setParentAssetNameInNodeSelectedInTree;
+    var loadFilterAssets = useAssetCodes().loadFilterAssets;
+    var allAssets = useAssetContext().state.allAssets;
+    var searchAssets = useSearchAssets$1().searchAssets;
+    var _k = useForm({ defaultValues: assetNodeSelectedInTree ? assetNodeSelectedInTree : DATA_ASSET_INITIAL_VALUES }), control = _k.control, reset = _k.reset, setValue = _k.setValue, handleSubmit = _k.handleSubmit, errors = _k.formState.errors;
+    var handleCancel = function () {
+        reset();
+        onHide(false);
+    };
+    var changeParentAssetId = function (value, description) {
+        setValue("ParentAssetId", parseInt(value));
+        setParentAssetNameInNodeSelectedInTree(description);
+    };
+    var updateAssetData = function (data) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    setIsLoading(true);
-                    return [4 /*yield*/, getShiftParameters()];
+                    setIsSubmitLoading(true);
+                    _a.label = 1;
                 case 1:
-                    resp = _a.sent();
-                    if (resp.ok) {
-                        setShiftsCrews(resp.data.tables[0].rows);
-                        // FIXME: el seter no está funcionando
-                        setPrueba(resp.data.tables[0].rows);
-                        setIsLoading(false);
-                        // debugger;
-                    }
-                    else {
-                        console.log("something happened!");
-                    }
-                    return [2 /*return*/];
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, UpdateAssetData(assetNodeSelectedInTree.AssetId, data.AssetName, data.ParentAssetId, data.IsAsset, data.CanBeDefaultAsset).then(function (res) {
+                            if (res) {
+                                setIsSubmitLoading(false);
+                                setAssetEditedSuccess(true);
+                                searchAssets();
+                                onHide(true);
+                            }
+                        })];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    _a.sent();
+                    setErrorMessege("Please select a document and try again");
+                    setIsSubmitLoading(false);
+                    setError(true);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
             }
         });
     }); };
+    var handleFormSubmit = handleSubmit(updateAssetData);
     useEffect(function () {
-        getShiftsCrewsFromAPI();
-    }, []);
-    if (shifts) {
-        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(TableShiftsCrews, { isLoading: isLoading, getShiftsCrewsFromAPI: getShiftsCrewsFromAPI })))));
+        if (show) {
+            loadFilterAssets();
+            setValue("AssetName", assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.AssetName);
+            setValue("ParentAssetId", assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.ParentAssetId);
+            var parentAssetNode = allAssets.find(function (node) { return node.AssetId === (assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.ParentAssetId); });
+            setParentAssetNameInNodeSelectedInTree(parentAssetNode === null || parentAssetNode === void 0 ? void 0 : parentAssetNode.AssetName);
+            setValue("IsAsset", assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.IsAsset);
+            setValue("CanBeDefaultAsset", assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.CanBeDefaultAsset);
+        }
+    }, [show]);
+    return ((React__default.createElement("div", { className: classes.root },
+        React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
+            React__default.createElement("form", { onSubmit: handleFormSubmit },
+                React__default.createElement(Grid, { container: true, style: { padding: "15px 0 20px", height: "50%" } },
+                    React__default.createElement(Grid, { container: true, item: true },
+                        React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
+                            React__default.createElement(Typography, { style: { padding: "0 24px 12px", fontSize: 25 } },
+                                "ASSET: ", assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 :
+                                assetNodeSelectedInTree.AssetName))),
+                    React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
+                        React__default.createElement(DialogContent$2, { dividers: true, style: { padding: "10px 24px 0" } },
+                            React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
+                                React__default.createElement(Controller, { name: "AssetName", control: control, render: function (_a) {
+                                        var _b = _a.field, onChange = _b.onChange, value = _b.value;
+                                        return (React__default.createElement(React__default.Fragment, null,
+                                            React__default.createElement(TextField, { label: "Asset Name", variant: "outlined", error: !!errors.AssetName, fullWidth: true, margin: "dense", autoComplete: "off", onChange: onChange, value: value })));
+                                    } })),
+                            React__default.createElement(Grid, { container: true },
+                                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, { 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" }));
+                                            } }))))),
+                        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" } },
+                                React__default.createElement(Grid, { container: true, justifyContent: "flex-end", style: { margin: 0 } },
+                                    React__default.createElement(Grid, { container: true, item: true, style: { marginLeft: "auto", marginTop: 5, marginBottom: 0 } },
+                                        React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingLeft: "0", paddingRight: "16px" } },
+                                            React__default.createElement(Button$1, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return handleCancel(); } }, "Cancel")),
+                                        React__default.createElement(Grid, { item: true, md: 6, xs: 12 },
+                                            React__default.createElement(Button$1, { fullWidth: true, startIcon: isSubmitLoading && React__default.createElement(CircularProgress$1, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: 'submit' }, "Save")))))))))))));
+};
+
+var useStyles$6 = makeStyles$1(function (theme) { return ({
+    root: {},
+    contextMenu: {
+        fontSize: "14px",
+        backgroundColor: "#fff",
+        borderRadius: "2px",
+        padding: "5px 0 5px 0",
+        width: "150px",
+        height: "auto",
+        margin: "0",
+        position: "fixed",
+        listStyle: "none",
+        boxShadow: "0 0 20px 0 #ccc"
+    },
+    storyRoot: {
+        display: "grid",
+        height: "100%",
+        gridTemplateRows: "auto 1fr",
+        listStyleType: "none !important"
+    },
+    assetRoot: {
+        boxSizing: "border-box",
+        height: "100%",
+        padding: "32px"
+    },
+    dropTarget: {
+        boxShadow: "0 0 0 1px #1967d2 inset"
     }
-    return React.createElement(LazyLoading, null);
+}); });
+var AssetViewComponent = function () {
+    var _a = useState([]), selectedNodes = _a[0], setSelectedNodes = _a[1];
+    var classes = useStyles$6();
+    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; _f.assetNodeSelectedInTree; var _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, setChangedNodes = _l.setChangedNodes;
+    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];
+    var _q = useState(false), showEditAssetDialog = _q[0], setShowEditAssetDialog = _q[1];
+    var searchAssets = useSearchAssets$1().searchAssets;
+    var handleClose = function (event, reason) {
+        if (reason === 'clickaway') {
+            return;
+        }
+        setUpdatedSuccessfullyMessage(false);
+    };
+    var handleClick = function (e) {
+        if (showContextMenu) {
+            setShowContextMenu(false);
+            setMenuContextAssetId(undefined);
+        }
+        if (showCreateNewContextMenu) {
+            setShowCreateNewContextMenu(false);
+            setMenuContextAssetId(undefined);
+        }
+    };
+    var handleCreateNewContextMenu = function (e) {
+        e.preventDefault();
+        setShowContextMenu(false);
+        var top = e.clientY;
+        var left = e.clientX;
+        setAnchorPointX(left);
+        setAnchorPointY(top);
+        setShowCreateNewContextMenu(true);
+        setAssetNodeSelectedInTree(undefined);
+    };
+    var handleContextMenu = function (data, e) {
+        e.preventDefault();
+        setShowCreateNewContextMenu(false);
+        var top = e.clientY;
+        var left = e.clientX;
+        setAnchorPointX(left);
+        setAnchorPointY(top);
+        setShowContextMenu(true);
+        var selectedNode = allAssets.find(function (node) { return node.AssetId === data.id; });
+        if (selectedNode) {
+            setAssetNodeSelectedInTree(selectedNode);
+        }
+    };
+    var handleShowViewerAsset = function (data, e) {
+        e.preventDefault();
+        setIsDoubleClick(true);
+        var selectedNode = allAssets.find(function (node) { return node.AssetId === data.id; });
+        if (selectedNode) {
+            setAssetNodeSelectedInTree(selectedNode);
+            setShowViewerAssetDialog(true);
+        }
+    };
+    useEffect(function () {
+        var handleKeyDown = function (e) {
+            if (e.key.toLowerCase() === "escape") {
+                setSelectedNodes([]);
+            }
+            else if (e.ctrlKey || e.metaKey) {
+                setIsCtrlPressing(true);
+            }
+        };
+        var handleKeyUp = function (e) {
+            if (e.key.toLowerCase() === "control" || e.key.toLowerCase() === "meta") {
+                setIsCtrlPressing(false);
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        window.addEventListener("keyup", handleKeyUp);
+        return function () {
+            window.removeEventListener("keydown", handleKeyDown);
+            window.removeEventListener("keyup", handleKeyUp);
+        };
+    }, []);
+    useEffect(function () {
+        setAsset(allAssetNodes);
+        setOriginalAsset(allAssetNodes);
+    }, [allAssetNodes]);
+    useEffect(function () {
+        searchAssets();
+    }, []);
+    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 10px", borderRadius: "0.75rem" } },
+                            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(ThemeProvider, { theme: theme },
+                                        React__default.createElement(CssBaseline, null),
+                                        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: {
+                                                        root: classes.assetRoot,
+                                                        dropTarget: classes.dropTarget
+                                                    }, onDrop: handleDrop, onDragStart: handleDragStart, onDragEnd: handleDragEnd, canDrop: function (asset, options) {
+                                                        return !selectedNodes.some(function (selectedNode) { return selectedNode.id === options.dropTargetId; });
+                                                    }, render: function (node, options) {
+                                                        var selected = selectedNodes.some(function (selectedNode) { return selectedNode.id === node.id; });
+                                                        return (React__default.createElement(CustomNode, __assign({ setContextMenuOver: handleContextMenu, node: node }, options, { isSelected: selected, isDragging: selected && isDragging, onClick: handleCtrlClick, onDoubleClick: handleShowViewerAsset })));
+                                                    }, dragPreviewRender: function (monitorProps) {
+                                                        if (selectedNodes.length > 1) {
+                                                            return React__default.createElement(MultipleDragPreview, { dragSources: selectedNodes });
+                                                        }
+                                                        return React__default.createElement(CustomDragPreview, { monitorProps: monitorProps });
+                                                    } })))))),
+                            React__default.createElement(Grid$1, { container: true, style: { padding: "20px 0", justifyContent: "flex-end" } },
+                                React__default.createElement(Grid$1, { item: true, md: 3, xs: 6, style: { marginRight: "20px" } },
+                                    React__default.createElement(Button$1, { fullWidth: true, variant: "contained", color: "default", disabled: changedNodes.length ? false : true, onClick: function () { setChangedNodes([]), searchAssets(); } }, "CANCEL")),
+                                React__default.createElement(Grid$1, { item: true, md: 3, xs: 6, style: { margin: 0 } },
+                                    React__default.createElement(Button$1, { fullWidth: true, variant: "contained", color: "primary", disabled: changedNodes.length ? false : true, onClick: function () { return handleUpdateAsset(); } }, "UPDATE TREE"))),
+                            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); } }),
+                            React__default.createElement(RemoveAssetDialog, { show: showRemoveAssetDialog, onHide: function () { return setShowRemoveAssetDialog(false); } }))),
+                    React__default.createElement(Snackbar$1, { open: updatedSuccessfullyMessage, autoHideDuration: 2500, onClose: handleClose },
+                        React__default.createElement(Alert$3, { severity: "success", onClose: handleClose }, "Asset updated successfully"))),
+                showContextMenu && !isDoubleClick ? (React__default.createElement("ul", { className: classes.contextMenu, style: { top: y, left: x } },
+                    React__default.createElement(MenuItem$1, { onClick: function () { return setShowViewerAssetDialog(true); } }, "View Asset"),
+                    React__default.createElement(MenuItem$1, { onClick: function () { return setShowEditAssetDialog(true); } }, "Edit Asset"),
+                    React__default.createElement(MenuItem$1, { onClick: function () { return setShowCreateNewAssetDialog(true); } }, "Create Asset"),
+                    React__default.createElement(MenuItem$1, { onClick: function () { return setShowRemoveAssetDialog(true); } }, "Remove Asset"))) : '',
+                showCreateNewContextMenu ?
+                    React__default.createElement("ul", { className: classes.contextMenu, style: { top: y, left: x } },
+                        React__default.createElement(MenuItem$1, { onClick: function () { return setShowCreateNewAssetDialog(true); } }, "Create Asset"))
+                    : ''))));
 };
 
-var ShiftsCrewsPage = function (props) {
-    return (React.createElement(ShiftsCrewsProvider, null,
-        React.createElement(ShiftsCrews, null)));
+var ConfigurationAssetComponent = function () {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(DndProvider, { backend: HTML5Backend },
+            React__default.createElement(AssetViewComponent, null))));
+};
+
+var ConfigurationAssetPage = function () {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center" },
+            React.createElement(ConfigurationAssetComponent, null))));
+};
+
+var AssetPage = function (props) {
+    return (React.createElement(ConfigurationAssetProvider, null,
+        React.createElement(ConfigurationAssetPage, null)));
 };
 
 var UsersInitialState = {
@@ -3955,7 +5330,7 @@ var AuthTypeSelector = function (_a) {
         (!isLoading && authTypes.length) ? (React.createElement(FormControl, { variant: 'outlined', fullWidth: true },
             React.createElement(InputLabel, { id: "auth-type-label" }, "Auth Type"),
             React.createElement(Select, { fullWidth: true, labelId: "auth-type-label", id: "auth-type-id", value: value, onChange: onChange, input: React.createElement(Input, { id: "select-multiple-chip" }), renderValue: function (selected) { return (React.createElement(Chip, { key: "selected-authType-".concat(selected), label: selectedAuthTypeName })); } }, authTypes.map(function (authType) { return (React.createElement(MenuItem, { key: "authType-".concat(authType.AuthTypeId), value: authType.AuthTypeId }, authType.Name)); })))) : null,
-        !isLoading && error ? (React.createElement(Alert$2, { color: 'error' }, error)) : null));
+        !isLoading && error ? (React.createElement(Alert$3, { color: 'error' }, error)) : null));
 };
 
 var useStyles$4 = makeStyles(function (theme) {
@@ -5998,40 +7373,6 @@ var ConfigurationContext = React__default.createContext([
 ]);
 var NavbarContext = React__default.createContext(function () { return React__default.createElement(React__default.Fragment, null); });
 
-var AssetInitialState = {
-    areasList: [],
-    allAssets: []
-};
-var AssetReducer = createSlice({
-    name: "__",
-    initialState: AssetInitialState,
-    reducers: {
-        setAreasList: function (state, _a) {
-            var payload = _a.payload;
-            state.areasList = payload;
-        },
-        // ===========================
-        setAllAssets: function (state, _a) {
-            var payload = _a.payload;
-            state.allAssets = payload;
-        }
-    }
-});
-
-var AssetContext = createContext({
-    state: AssetReducer.getInitialState(),
-    actions: AssetReducer.actions
-});
-var useAssetContext = function () { return useContext(AssetContext); };
-var AssetProvider = function (_a) {
-    var children = _a.children;
-    var _b = useComplexState({
-        initialState: AssetReducer.getInitialState(),
-        reducers: AssetReducer.caseReducers
-    }), state = _b[0], actions = _b[1];
-    return (React__default.createElement(AssetContext.Provider, { value: { state: state, actions: actions } }, children));
-};
-
 var useSearchAssets = function () {
     var _a = useAssetContext().actions, setAllAssets = _a.setAllAssets, setAreasList = _a.setAreasList;
     var searchAssets = function () {
@@ -6163,6 +7504,11 @@ function Configuration() {
             sidebar: function () { return React__default.createElement("div", null, "Shifts"); },
             main: function () { return React__default.createElement(ShiftsCrewsPage, null); }
         },
+        {
+            path: "asset",
+            sidebar: function () { return React__default.createElement("div", null, "Configuration Asset"); },
+            main: function () { return React__default.createElement(AssetPage, null); }
+        },
         {
             path: "users",
             sidebar: function () { return React__default.createElement("div", null, "Users"); },
@@ -6191,7 +7537,9 @@ function Configuration() {
                 React__default.createElement("h3", { className: "mes-menu-group" }, "Plant"),
                 React__default.createElement(MenuList, { className: "mes-submenu" },
                     React__default.createElement(MenuItem, { selected: option === 'shifts', className: "p-0" },
-                        React__default.createElement(Link, { to: "/configuration/shifts", className: "nav-link" }, "Shift / Crews"))),
+                        React__default.createElement(Link, { to: "/configuration/shifts", className: "nav-link" }, "Shift / Crews")),
+                    React__default.createElement(MenuItem, { selected: option === 'asset', className: "p-0" },
+                        React__default.createElement(Link, { to: "/configuration/asset", className: "nav-link" }, "Configuration Asset"))),
                 React__default.createElement("h3", { className: "mes-menu-group" }, "Security"),
                 React__default.createElement(MenuList, { className: "mes-submenu" },
                     React__default.createElement(MenuItem, { selected: option === 'users', className: "p-0" },