techsbcn-storybook 0.12.2 → 0.12.3

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export * from './components/wrappers/PublicFormWrapper/PublicFormWrapper';
 export * from './components/wrappers/MainWrapperComponent/MainWrapperComponent';
 export * from './components/tables/SearchComponent/SearchComponent';
 export * from './components/tables/TableComponent/TableComponent';
+export * from './components/tables/SimpleTableComponent/SimpleTableComponent';
 export * from './components/layouts/MainLayoutSimple/MainLayoutSimple';
 export * from './components/navigation/VerticalNav/VerticalNav';
 export * from './components/navigation/components/UserInfo';

package/dist/techsbcn-storybook.cjs.development.js

@@ -725,9 +725,336 @@ TableComponent.defaultProps = {
   showTotalCount: true
 };
 
-var css_248z$5 = ".main-layout-simple {\n  width: 100%;\n}\n.main-layout-simple .main-wrapper {\n  width: 100%;\n  min-height: 100vh;\n  height: fit-content;\n  position: relative;\n}";
+var css_248z$5 = ".table-simple-component .paper-container {\n  box-shadow: none;\n  background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root {\n  padding: 0 !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n  background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .Mui-checked {\n  color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n  color: #212529 !important;\n}\n.table-simple-component .paper-container .table-container {\n  max-height: 68vh;\n  border-bottom: 1px solid black;\n}\n.table-simple-component .paper-container .table-container .table-column:first-child {\n  border-radius: 5px 0 0 5px;\n}\n.table-simple-component .paper-container .table-container .table-column:last-child {\n  border-right: none !important;\n  border-radius: 0 5px 5px 0;\n}\n.table-simple-component .paper-container .table-container .table-column {\n  font-weight: bold;\n  font-size: 1rem !important;\n  padding: 10px !important;\n  border-top: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 2px solid #e0e0e0;\n}\n.table-simple-component .paper-container .table-container .table-column .table-header-cell {\n  color: black;\n  padding: 0px 10px 0px 10px !important;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click {\n  cursor: pointer;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows .Mui-selected {\n  background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root {\n  padding: 6px !important;\n  overflow: hidden;\n}\n.table-simple-component .paper-container .table-container .table-rows .img-table {\n  width: 100%;\n  height: 110px;\n}\n.table-simple-component .paper-container .table-container .table-rows .img-table img {\n  object-fit: contain;\n}\n.table-simple-component .paper-container .table-container .table-rows .actions {\n  float: right;\n}\n.table-simple-component .paper-container .table-container .table-rows .btn-action {\n  color: rgba(0, 0, 0, 0.54);\n  display: inline-block;\n  text-decoration: none;\n  font-size: 1.6em !important;\n  padding: 0px 7px;\n  cursor: pointer;\n}\n.table-simple-component .paper-container .MuiTable-root.loading {\n  opacity: 0.5;\n}\n.table-simple-component .paper-container .MuiTable-root.loading .MuiCircularProgress-root {\n  width: 80px !important;\n  height: 80px !important;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 5px;\n  margin: auto;\n  color: grey;\n}\n@media (max-width: 992px) {\n  .table-simple-component .paper-container .table-container {\n    max-height: 60vh;\n    border-top: 1px solid #cccccc;\n  }\n  .table-simple-component .paper-container .table-container .MuiTable-root {\n    border-collapse: collapse !important;\n  }\n  .table-simple-component .paper-container .table-container .MuiTableHead-root {\n    display: none !important;\n  }\n  .table-simple-component .paper-container .table-container .table-rows {\n    border-bottom: 2px solid #cccccc;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root {\n    width: 100%;\n    border-bottom: none !important;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell {\n    font-size: 1rem;\n    vertical-align: top;\n    width: 50%;\n    height: auto;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell + div {\n    display: inline-block;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .table-cell {\n    display: inline-block !important;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .format-value {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    width: 50%;\n    max-width: 300px;\n  }\n}";
 styleInject(css_248z$5);
 
+var SimpleTableComponent = function SimpleTableComponent(props) {
+  var _props$isCheckTable10, _props$isCheckTable11, _props$isCheckTable12;
+
+  var isSelected = function isSelected(id) {
+    var _props$isCheckTable;
+
+    return JSON.parse(JSON.stringify((_props$isCheckTable = props.isCheckTable) == null ? void 0 : _props$isCheckTable.rowsChecked)).indexOf(id) !== -1;
+  };
+
+  var handleRowClick = function handleRowClick(id) {
+    if (props.onClickRow) props.onClickRow(id);
+  };
+
+  var onCheckAction = function onCheckAction(event, id) {
+    var _props$isCheckTable2, _props$isCheckTable3, _props$isCheckTable4;
+
+    var checks = JSON.parse(JSON.stringify(((_props$isCheckTable2 = props.isCheckTable) == null ? void 0 : _props$isCheckTable2.rowsChecked) || []));
+    var index = checks.indexOf(id);
+    if (event.target.checked) checks.push(id);else checks.splice(index, 1);
+    ((_props$isCheckTable3 = props.isCheckTable) == null ? void 0 : _props$isCheckTable3.onCheckedAction) && ((_props$isCheckTable4 = props.isCheckTable) == null ? void 0 : _props$isCheckTable4.onCheckedAction(checks));
+  };
+
+  var onCheckSingleAction = function onCheckSingleAction(event, id) {
+    var _props$isCheckTable5, _props$isCheckTable6, _props$isCheckTable7;
+
+    var checks = JSON.parse(JSON.stringify(((_props$isCheckTable5 = props.isCheckTable) == null ? void 0 : _props$isCheckTable5.rowsChecked) || []));
+    var index = checks.indexOf(id);
+
+    if (event.target.checked) {
+      checks.push(id);
+
+      if (checks.length > 1) {
+        checks = checks.splice(-1);
+      }
+    } else checks.splice(index, 1);
+
+    ((_props$isCheckTable6 = props.isCheckTable) == null ? void 0 : _props$isCheckTable6.onCheckedSingleAction) && ((_props$isCheckTable7 = props.isCheckTable) == null ? void 0 : _props$isCheckTable7.onCheckedSingleAction(checks[0]));
+  };
+
+  var handleSelectAllClick = function handleSelectAllClick(event) {
+    var _props$isCheckTable8, _props$isCheckTable9;
+
+    var newSelecteds = [];
+
+    if (event.target.checked) {
+      newSelecteds = props.rows.map(function (n) {
+        return n.id;
+      });
+    }
+
+    ((_props$isCheckTable8 = props.isCheckTable) == null ? void 0 : _props$isCheckTable8.onCheckedAction) && ((_props$isCheckTable9 = props.isCheckTable) == null ? void 0 : _props$isCheckTable9.onCheckedAction(newSelecteds));
+  };
+
+  var formatValue = function formatValue(value, column) {
+    var _column$enumColumn;
+
+    if ((_column$enumColumn = column.enumColumn) != null && _column$enumColumn.isEnum) {
+      var _column$enumColumn2, _column$enumColumn9;
+
+      if ((_column$enumColumn2 = column.enumColumn) != null && _column$enumColumn2.enumType) {
+        var _column$enumColumn5, _column$enumColumn8;
+
+        var result = [];
+
+        if (value === null) {
+          return value;
+        } else if (value.split(',').length > 1) {
+          value.split(',').forEach(function (v) {
+            var _column$enumColumn3;
+
+            result.push(props.values[(_column$enumColumn3 = column.enumColumn) == null ? void 0 : _column$enumColumn3.enumType[v.replace(/ /g, '')].toUpperCase()]);
+          });
+          return result.join();
+        } else if (Array.isArray(value)) {
+          var split = value.toString().split(',');
+          split.forEach(function (v) {
+            var _column$enumColumn4;
+
+            if (!isNaN(parseInt(v))) result.push(props.values[(_column$enumColumn4 = column.enumColumn) == null ? void 0 : _column$enumColumn4.enumType[v.replace(/ /g, '')].toUpperCase()]);else result.push(props.values[v.toUpperCase()]);
+          });
+          return result.join();
+        } else if ((_column$enumColumn5 = column.enumColumn) != null && _column$enumColumn5.enumSuffix) {
+          var _column$enumColumn6, _column$enumColumn7;
+
+          return props.values[((_column$enumColumn6 = column.enumColumn) == null ? void 0 : _column$enumColumn6.enumType[value].toUpperCase()) + "_" + ((_column$enumColumn7 = column.enumColumn) == null ? void 0 : _column$enumColumn7.enumSuffix.toUpperCase())];
+        } else return props.values[(_column$enumColumn8 = column.enumColumn) == null ? void 0 : _column$enumColumn8.enumType[value].toUpperCase()];
+      } else if ((_column$enumColumn9 = column.enumColumn) != null && _column$enumColumn9.enumSuffix) {
+        var _column$enumColumn10;
+
+        return props.values[value.toUpperCase() + "_" + ((_column$enumColumn10 = column.enumColumn) == null ? void 0 : _column$enumColumn10.enumSuffix.toUpperCase())];
+      } else return props.values[value.toUpperCase()];
+    }
+
+    if (column.isDate && value) return new Date(value).toLocaleDateString('es-ES');
+
+    if (column.isPrice) {
+      if (value !== null) return value.toLocaleString() + " " + props.values.SYMBOL_EURO;
+    }
+
+    if (column.isImage) {
+      if (column.isImage.isUrl) {
+        return React__default.createElement(_.Avatar, {
+          alt: "-",
+          src: value,
+          className: "img-table",
+          variant: "square"
+        });
+      }
+    }
+
+    if (Array.isArray(value)) {
+      return value.join(', ');
+    }
+
+    if (column.isBoolean) {
+      var booleanStr = value ? 'true' : 'false';
+
+      if (column.isBoolean.enumType) {
+        var _column$isBoolean3;
+
+        if (column.isBoolean.enumSuffix) {
+          var _column$isBoolean, _column$isBoolean2;
+
+          return props.values[((_column$isBoolean = column.isBoolean) == null ? void 0 : _column$isBoolean.enumType[booleanStr].toUpperCase()) + "_" + ((_column$isBoolean2 = column.isBoolean) == null ? void 0 : _column$isBoolean2.enumSuffix.toUpperCase())];
+        } else return props.values[(_column$isBoolean3 = column.isBoolean) == null ? void 0 : _column$isBoolean3.enumType[booleanStr].toUpperCase()];
+      } else if (column.isBoolean.enumSuffix) {
+        var _column$isBoolean4;
+
+        return props.values[booleanStr.toUpperCase() + "_" + ((_column$isBoolean4 = column.isBoolean) == null ? void 0 : _column$isBoolean4.enumSuffix.toUpperCase())];
+      }
+    }
+
+    if (typeof value === 'boolean') {
+      return String(value);
+    }
+
+    return value;
+  };
+
+  var ObjectbyString = function ObjectbyString(o, s) {
+    s = s.replace(/\[(\w+)\]/g, '.$1');
+    var a = s.split('.');
+
+    for (var i = 0, n = a.length; i < n; ++i) {
+      var k = a[i];
+
+      try {
+        if (k in o) {
+          o = o[k];
+        } else {
+          return undefined;
+        }
+      } catch (_error) {
+        return undefined;
+      }
+    }
+
+    return o;
+  };
+
+  var EditableTableCell = function EditableTableCell(row, value, fieldName, editableCell) {
+    var rowEdit = JSON.parse(JSON.stringify(row));
+
+    if (editableCell.isTextField) {
+      var setUpdate = lodash.debounce(function () {
+        var _editableCell$isTextF, _editableCell$isTextF2;
+
+        ((_editableCell$isTextF = editableCell.isTextField) == null ? void 0 : _editableCell$isTextF.onCellValueChange) && ((_editableCell$isTextF2 = editableCell.isTextField) == null ? void 0 : _editableCell$isTextF2.onCellValueChange(rowEdit));
+      }, 1000);
+
+      var handleTextFieldChange = function handleTextFieldChange(e) {
+        rowEdit[fieldName] = e.target.value;
+        setUpdate();
+      };
+
+      return React__default.createElement(TextFieldComponent, {
+        type: editableCell.isTextField.type,
+        onChange: handleTextFieldChange,
+        name: fieldName,
+        defaultValue: value
+      });
+    } else {
+      return value;
+    }
+  };
+
+  return React__default.createElement(_.Box, {
+    className: "table-simple-component"
+  }, React__default.createElement(_.Paper, {
+    className: "paper-container"
+  }, props.isCheckTable && React__default.createElement(_.Hidden, {
+    mdUp: true
+  }, React__default.createElement(_.Box, {
+    display: "block",
+    className: "checkbox-cell"
+  }, React__default.createElement(_.Checkbox, {
+    indeterminate: props.rows && JSON.parse(JSON.stringify((_props$isCheckTable10 = props.isCheckTable) == null ? void 0 : _props$isCheckTable10.rowsChecked)).length > 0 && JSON.parse(JSON.stringify((_props$isCheckTable11 = props.isCheckTable) == null ? void 0 : _props$isCheckTable11.rowsChecked)).length < props.rows.length,
+    checked: props.rows && props.rows.length > 0 && JSON.parse(JSON.stringify((_props$isCheckTable12 = props.isCheckTable) == null ? void 0 : _props$isCheckTable12.rowsChecked)).length === props.rows.length,
+    onChange: handleSelectAllClick
+  }))), React__default.createElement(_.TableContainer, {
+    className: "table-container"
+  }, React__default.createElement(_.Table, {
+    stickyHeader: true,
+    "aria-label": "sticky table",
+    className: props.loading ? 'loading' : props.className ? props.className : ''
+  }, React__default.createElement(_.Hidden, {
+    smDown: true
+  }, React__default.createElement(_.TableHead, null, React__default.createElement(_.TableRow, null, props.columns.map(function (column) {
+    if (column.id) {
+      var _props$isCheckTable13, _props$isCheckTable14, _props$isCheckTable15;
+
+      return React__default.createElement(_.TableCell, {
+        className: "table-column",
+        key: column.isUnique ? column.id + "-unique" : column.id,
+        align: column.align ? column.align : 'center',
+        style: {
+          minWidth: column.minWidth,
+          maxWidth: column.maxWidth
+        }
+      }, column.isCheck ? React__default.createElement(_.Box, {
+        className: "checkbox-cell"
+      }, React__default.createElement(_.Checkbox, {
+        indeterminate: props.rows && JSON.parse(JSON.stringify((_props$isCheckTable13 = props.isCheckTable) == null ? void 0 : _props$isCheckTable13.rowsChecked)).length > 0 && JSON.parse(JSON.stringify((_props$isCheckTable14 = props.isCheckTable) == null ? void 0 : _props$isCheckTable14.rowsChecked)).length < props.rows.length,
+        checked: props.rows && props.rows.length > 0 && JSON.parse(JSON.stringify((_props$isCheckTable15 = props.isCheckTable) == null ? void 0 : _props$isCheckTable15.rowsChecked)).length === props.rows.length,
+        onChange: handleSelectAllClick
+      })) : React__default.createElement(_.Box, {
+        className: "table-header-cell"
+      }, column.label));
+    } else return null;
+  })))), React__default.createElement(_.TableBody, null, props.loading && React__default.createElement(_.TableRow, {
+    className: "table-rows"
+  }, React__default.createElement(_.TableCell, {
+    colSpan: props.columns.length,
+    sx: {
+      position: 'relative',
+      overflow: 'inherit !important',
+      height: props.rows.length > 0 ? 'auto' : '80px'
+    }
+  }, React__default.createElement(_.CircularProgress, {
+    className: "circular-progress-main-color"
+  }))), props.rows && props.rows.length > 0 ? props.rows.map(function (row, index) {
+    var _props$isCheckTable16;
+
+    var key = props.rows[index + 1] && props.rows[index + 1].id === row.id ? index : row.id;
+    var rowColor = props.rowsColorColumn && ObjectbyString(row, props.rowsColorColumn.columnName) === props.rowsColorColumn.columnValue ? "row-color-" + props.rowsColorColumn.columnValue : '';
+    var isRowSelected = ((_props$isCheckTable16 = props.isCheckTable) == null ? void 0 : _props$isCheckTable16.rowsChecked) && isSelected(row.id);
+    return React__default.createElement(_.TableRow, {
+      className: "table-rows " + rowColor + " " + (props.onClickRow ? 'row-click' : ''),
+      role: "checkbox",
+      tabIndex: -1,
+      selected: isRowSelected,
+      "aria-checked": isRowSelected,
+      key: key || index
+    }, props.columns.map(function (column) {
+      if (column.id) {
+        var value = ObjectbyString(row, column.id);
+        var isItemSelected = column.isCheck && isSelected(row.id);
+        return React__default.createElement(_.TableCell, {
+          className: "table-cell",
+          key: column.isUnique ? column.id + "-unique" : column.id,
+          sx: {
+            textAlign: {
+              xs: 'left',
+              md: column.alignCell ? column.alignCell : column.align ? column.align : 'center'
+            }
+          },
+          onClick: function onClick() {
+            return !column.action && !column.isCheck && !column.isActiveFunction ? handleRowClick(row.id) : '';
+          }
+        }, React__default.createElement(_.Hidden, {
+          mdUp: true
+        }, column.label !== '-' && React__default.createElement(_.Box, {
+          display: "inline-block",
+          className: "label-cell"
+        }, column.label)), column.action ? React__default.createElement(_.Box, null, React__default.createElement(_.Box, {
+          display: "flex",
+          className: "actions"
+        }, column.action && column.action.map(function (action, i) {
+          return React__default.createElement(_.Box, {
+            key: i
+          }, action.onClick && React__default.createElement(_.Box, {
+            className: "btn-action main-color-hover",
+            onClick: function onClick() {
+              return action.onClick && action.onClick(row);
+            }
+          }, action.children), action.onClickId && React__default.createElement(_.Box, {
+            className: "btn-action main-color-hover",
+            onClick: function onClick() {
+              return action.onClickId && action.onClickId(row.id);
+            }
+          }, action.children), !action.onClick && !action.onClickId && React__default.createElement(_.Box, {
+            className: "btn-action"
+          }, action.children));
+        }))) : column.isActiveFunction ? React__default.createElement(_.Box, {
+          className: "btn-action main-color-hover",
+          onClick: function onClick() {
+            return column.isActiveFunction && column.isActiveFunction.onClickId(row.id);
+          }
+        }, value ? column.isActiveFunction.activeIcon : column.isActiveFunction.disabledIcon) : column.isCheck ? React__default.createElement(_.Box, {
+          className: "checkbox-cell"
+        }, React__default.createElement(_.Checkbox, {
+          checked: isItemSelected,
+          inputProps: {
+            'aria-labelledby': row.id
+          },
+          onChange: function onChange(event) {
+            var _props$isCheckTable17;
+
+            return (_props$isCheckTable17 = props.isCheckTable) != null && _props$isCheckTable17.onCheckedAction ? onCheckAction(event, row.id) : onCheckSingleAction(event, row.id);
+          }
+        })) : column.isEditableTableCell ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn ? React__default.createElement(_.Box, {
+          className: (column.enumColumn.hasColor ? (column.enumColumn.enumSuffix ? value.toLowerCase() + "-" + column.enumColumn.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-type-color" : '') + " format-value"
+        }, formatValue(value, column)) : column.isBoolean ? React__default.createElement(_.Box, {
+          className: (column.isBoolean.hasColor ? (column.isBoolean.enumSuffix ? value.toString().toLowerCase() + "-" + column.isBoolean.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-boolean-color" : '') + " format-value"
+        }, formatValue(value, column)) : React__default.createElement(_.Box, {
+          className: "format-value"
+        }, formatValue(value, column)));
+      } else return null;
+    }));
+  }) : !props.loading ? React__default.createElement(_.TableRow, null, React__default.createElement(_.TableCell, {
+    colSpan: props.columns.length
+  }, React__default.createElement(_.Box, null, props.values.NO_RESULTS_FOUND))) : React__default.createElement(_.TableRow, null))))));
+};
+
+var css_248z$6 = ".main-layout-simple {\n  width: 100%;\n}\n.main-layout-simple .main-wrapper {\n  width: 100%;\n  min-height: 100vh;\n  height: fit-content;\n  position: relative;\n}";
+styleInject(css_248z$6);
+
 var MainLayoutSimple = function MainLayoutSimple(props) {
   return React__default.createElement(_.Box, {
     display: "flex",
@@ -892,8 +1219,8 @@ var VerticalNavItemCollapse = function VerticalNavItemCollapse(props) {
 
 var VerticalNavItemCollapse$1 = /*#__PURE__*/React__default.memo(VerticalNavItemCollapse);
 
-var css_248z$6 = ".vertical-navigation {\n  background: transparent;\n  color: white;\n}\n.vertical-navigation .nav-item {\n  cursor: pointer;\n}\n.vertical-navigation .nav-item svg {\n  font-size: 28px;\n}\n.vertical-navigation .nav-item {\n  padding: 12px;\n}\n.vertical-navigation .nav-item:hover {\n  background-color: #333f54;\n}\n.vertical-navigation .active .nav-item {\n  background-color: #3299C7;\n  border-radius: 0 25px 25px 0;\n  margin-right: 16px;\n}\n.vertical-navigation .active .nav-item .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .active .nav-item:hover {\n  color: white !important;\n}\n.vertical-navigation .active .nav-item:hover .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active {\n  background-color: #333f54;\n}\n.vertical-navigation .nav-item-collapse .active .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active:hover {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active:hover .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .open {\n  background-color: #333f54;\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .open .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .collapse-children {\n  background-color: #39465e;\n}\n.vertical-navigation .nav-item-collapse .collapse-children .nav-item-text {\n  padding-left: 16px;\n  padding-right: 16px;\n}";
-styleInject(css_248z$6);
+var css_248z$7 = ".vertical-navigation {\n  background: transparent;\n  color: white;\n}\n.vertical-navigation .nav-item {\n  cursor: pointer;\n}\n.vertical-navigation .nav-item svg {\n  font-size: 28px;\n}\n.vertical-navigation .nav-item {\n  padding: 12px;\n}\n.vertical-navigation .nav-item:hover {\n  background-color: #333f54;\n}\n.vertical-navigation .active .nav-item {\n  background-color: #3299C7;\n  border-radius: 0 25px 25px 0;\n  margin-right: 16px;\n}\n.vertical-navigation .active .nav-item .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .active .nav-item:hover {\n  color: white !important;\n}\n.vertical-navigation .active .nav-item:hover .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active {\n  background-color: #333f54;\n}\n.vertical-navigation .nav-item-collapse .active .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active:hover {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active:hover .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .open {\n  background-color: #333f54;\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .open .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .collapse-children {\n  background-color: #39465e;\n}\n.vertical-navigation .nav-item-collapse .collapse-children .nav-item-text {\n  padding-left: 16px;\n  padding-right: 16px;\n}";
+styleInject(css_248z$7);
 
 (function (NavigationType) {
   NavigationType[NavigationType["Item"] = 0] = "Item";
@@ -923,8 +1250,8 @@ var VerticalNav = function VerticalNav(props) {
   }));
 };
 
-var css_248z$7 = ".user-info svg {\n  font-size: 28px !important;\n}";
-styleInject(css_248z$7);
+var css_248z$8 = ".user-info svg {\n  font-size: 28px !important;\n}";
+styleInject(css_248z$8);
 
 var UserInfo = function UserInfo(props) {
   var _React$useState = React__default.useState(null),
@@ -976,8 +1303,8 @@ var UserInfo = function UserInfo(props) {
   }))))));
 };
 
-var css_248z$8 = ".app-sidebar {\n  width: 17rem;\n  background-color: #3f4d67;\n  box-shadow: 1px 0 20px 0 #3f4d67;\n  z-index: 1029;\n  color: white;\n}";
-styleInject(css_248z$8);
+var css_248z$9 = ".app-sidebar {\n  width: 17rem;\n  background-color: #3f4d67;\n  box-shadow: 1px 0 20px 0 #3f4d67;\n  z-index: 1029;\n  color: white;\n}";
+styleInject(css_248z$9);
 
 var AppSidebar = function AppSidebar(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Drawer, {
@@ -1034,8 +1361,8 @@ var AppSidebar = function AppSidebar(props) {
   }, props.footerComponents))))));
 };
 
-var css_248z$9 = ".drawer-sidebar {\n  width: 17rem;\n  background-color: #3f4d67;\n  box-shadow: 1px 0 20px 0 #3f4d67;\n  z-index: 1029;\n  color: white;\n}";
-styleInject(css_248z$9);
+var css_248z$a = ".drawer-sidebar {\n  width: 17rem;\n  background-color: #3f4d67;\n  box-shadow: 1px 0 20px 0 #3f4d67;\n  z-index: 1029;\n  color: white;\n}";
+styleInject(css_248z$a);
 
 var DrawerSidebar = function DrawerSidebar(props) {
   return React__default.createElement(material.Drawer, {
@@ -1061,8 +1388,8 @@ var DrawerSidebar = function DrawerSidebar(props) {
   }, props.footerComponents))));
 };
 
-var css_248z$a = ".app-bar {\n  background-color: white !important;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n  color: black !important;\n}\n.app-bar .header-logo {\n  max-height: 59px;\n  height: 100%;\n  min-height: 56px;\n  width: 100%;\n}\n.app-bar img {\n  max-height: 59px;\n  height: 100%;\n  min-height: 56px;\n  width: 100%;\n}";
-styleInject(css_248z$a);
+var css_248z$b = ".app-bar {\n  background-color: white !important;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n  color: black !important;\n}\n.app-bar .header-logo {\n  max-height: 59px;\n  height: 100%;\n  min-height: 56px;\n  width: 100%;\n}\n.app-bar img {\n  max-height: 59px;\n  height: 100%;\n  min-height: 56px;\n  width: 100%;\n}";
+styleInject(css_248z$b);
 
 var AppHeader = function AppHeader(props) {
   return React__default.createElement(material.AppBar, {
@@ -1084,8 +1411,8 @@ var AppHeader = function AppHeader(props) {
   }, React__default.createElement(MenuIcon, null)), props.children));
 };
 
-var css_248z$b = ".MuiButton-root {\n  width: auto;\n  padding: 0.8rem 1rem !important;\n  text-transform: inherit !important;\n  line-height: inherit !important;\n  box-shadow: none !important;\n  font-size: 1rem !important;\n  background-color: #3299C7;\n}\n.MuiButton-root.btn-login {\n  width: 100%;\n}\n.MuiButton-root.btn-reverse-color {\n  border: 1px solid #3299C7;\n  color: #3299C7;\n  background-color: white !important;\n}\n.MuiButton-root.btn-modal-cancel {\n  background-color: #666666 !important;\n}\n.MuiButton-root.btn-modal-cancel.Mui-disabled {\n  background-color: #666666c4 !important;\n  color: #030303b4 !important;\n}\n.MuiButton-root:hover {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;\n}\n.MuiButton-root .MuiCircularProgress-root {\n  color: white;\n}\n.MuiButton-root .MuiButton-label .MuiCircularProgress-root {\n  color: white;\n}\n.MuiButton-root .MuiButton-startIcon svg {\n  font-size: 20px !important;\n}\n.MuiButton-root .MuiButton-endIcon svg {\n  font-size: 20px !important;\n}";
-styleInject(css_248z$b);
+var css_248z$c = ".MuiButton-root {\n  width: auto;\n  padding: 0.8rem 1rem !important;\n  text-transform: inherit !important;\n  line-height: inherit !important;\n  box-shadow: none !important;\n  font-size: 1rem !important;\n  background-color: #3299C7;\n}\n.MuiButton-root.btn-login {\n  width: 100%;\n}\n.MuiButton-root.btn-reverse-color {\n  border: 1px solid #3299C7;\n  color: #3299C7;\n  background-color: white !important;\n}\n.MuiButton-root.btn-modal-cancel {\n  background-color: #666666 !important;\n}\n.MuiButton-root.btn-modal-cancel.Mui-disabled {\n  background-color: #666666c4 !important;\n  color: #030303b4 !important;\n}\n.MuiButton-root:hover {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;\n}\n.MuiButton-root .MuiCircularProgress-root {\n  color: white;\n}\n.MuiButton-root .MuiButton-label .MuiCircularProgress-root {\n  color: white;\n}\n.MuiButton-root .MuiButton-startIcon svg {\n  font-size: 20px !important;\n}\n.MuiButton-root .MuiButton-endIcon svg {\n  font-size: 20px !important;\n}";
+styleInject(css_248z$c);
 
 var ButtonComponent = function ButtonComponent(props) {
   return React__default.createElement(_.Button, {
@@ -1107,8 +1434,8 @@ ButtonComponent.defaultProps = {
   component: 'button'
 };
 
-var css_248z$c = ".text-simple-component .MuiFormLabel-root {\n  color: #666666 !important;\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n  transform: translate(0, 0.5px) scale(0.85);\n  transform-origin: top left;\n  text-overflow: initial !important;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.no-border {\n  margin-top: 16px !important;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.no-margin.no-border {\n  margin-top: 7px !important;\n}\n.text-simple-component .text-simple-box.no-border {\n  border: none !important;\n  padding: 0 !important;\n}\n.text-simple-component .text-simple-box {\n  color: #666666 !important;\n  font-size: 1rem;\n  border: 1px solid grey;\n  padding: 0.868rem;\n  border-radius: 3px !important;\n}\n.text-simple-component .helper-text {\n  font-size: 0.85rem !important;\n  padding: 0 !important;\n  margin-top: 3px;\n  line-height: 1.66;\n  color: #666666 !important;\n  letter-spacing: 0.03333em;\n}\n.text-simple-component .has-error-border {\n  border-color: #F24726 !important;\n}\n.text-simple-component .has-error {\n  color: #F24726 !important;\n}";
-styleInject(css_248z$c);
+var css_248z$d = ".text-simple-component .MuiFormLabel-root {\n  color: #666666 !important;\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n  transform: translate(0, 0.5px) scale(0.85);\n  transform-origin: top left;\n  text-overflow: initial !important;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.no-border {\n  margin-top: 16px !important;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.no-margin.no-border {\n  margin-top: 7px !important;\n}\n.text-simple-component .text-simple-box.no-border {\n  border: none !important;\n  padding: 0 !important;\n}\n.text-simple-component .text-simple-box {\n  color: #666666 !important;\n  font-size: 1rem;\n  border: 1px solid grey;\n  padding: 0.868rem;\n  border-radius: 3px !important;\n}\n.text-simple-component .helper-text {\n  font-size: 0.85rem !important;\n  padding: 0 !important;\n  margin-top: 3px;\n  line-height: 1.66;\n  color: #666666 !important;\n  letter-spacing: 0.03333em;\n}\n.text-simple-component .has-error-border {\n  border-color: #F24726 !important;\n}\n.text-simple-component .has-error {\n  color: #F24726 !important;\n}";
+styleInject(css_248z$d);
 
 var TextSimpleComponent = function TextSimpleComponent(props) {
   return React__default.createElement(_.Box, {
@@ -1132,8 +1459,8 @@ TextSimpleComponent.defaultProps = {
   noBorders: true
 };
 
-var css_248z$d = ".select-field .MuiFormLabel-root {\n  color: #666666 !important;\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n  transform: translate(0, 0.5px) scale(0.85);\n  transform-origin: top left;\n  text-overflow: initial !important;\n}\n.select-field .select {\n  font-size: 1rem;\n}\n.select-field .select__menu {\n  z-index: 3 !important;\n  background-color: white;\n}\n.select-field .select__control {\n  cursor: pointer;\n  border: 1px solid grey;\n  border-radius: 5px !important;\n  padding: 0.33rem 0.2rem;\n  font-size: 1rem;\n  color: grey !important;\n  background-color: transparent;\n}\n.select-field .select__option {\n  cursor: pointer;\n  color: #666666 !important;\n  background-color: white !important;\n}\n.select-field .select__option--is-focused {\n  background-color: rgba(0, 0, 0, 0.04) !important;\n  color: #666666 !important;\n}\n.select-field .select__option--is-selected {\n  color: white !important;\n}\n.select-field .select__indicator {\n  color: grey !important;\n}\n.select-field .select__indicator:hover {\n  color: black !important;\n}\n.select-field .select__placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.select-field .select__single-value {\n  color: #666666 !important;\n}\n.select-field .select__multi-value__label {\n  color: #666666 !important;\n  font-size: 1rem;\n}\n.select-field .select__control--is-focused {\n  border-color: grey !important;\n  box-shadow: none !important;\n}\n.select-field .helper-text {\n  font-size: 0.85rem !important;\n  padding: 0 !important;\n  margin-top: 3px;\n  line-height: 1.66;\n  color: #666666 !important;\n  letter-spacing: 0.03333em;\n}\n.select-field .has-error {\n  color: #F24726 !important;\n}\n.select-field .has-error .select__control {\n  border: 1px #F24726 solid !important;\n}\n.select-field .has-error .select__control--is-focused {\n  border-color: #F24726 !important;\n  box-shadow: 0 0 0 1px #F24726;\n}";
-styleInject(css_248z$d);
+var css_248z$e = ".select-field .MuiFormLabel-root {\n  color: #666666 !important;\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n  transform: translate(0, 0.5px) scale(0.85);\n  transform-origin: top left;\n  text-overflow: initial !important;\n}\n.select-field .select {\n  font-size: 1rem;\n}\n.select-field .select__menu {\n  z-index: 3 !important;\n  background-color: white;\n}\n.select-field .select__control {\n  cursor: pointer;\n  border: 1px solid grey;\n  border-radius: 5px !important;\n  padding: 0.33rem 0.2rem;\n  font-size: 1rem;\n  color: grey !important;\n  background-color: transparent;\n}\n.select-field .select__option {\n  cursor: pointer;\n  color: #666666 !important;\n  background-color: white !important;\n}\n.select-field .select__option--is-focused {\n  background-color: rgba(0, 0, 0, 0.04) !important;\n  color: #666666 !important;\n}\n.select-field .select__option--is-selected {\n  color: white !important;\n}\n.select-field .select__indicator {\n  color: grey !important;\n}\n.select-field .select__indicator:hover {\n  color: black !important;\n}\n.select-field .select__placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.select-field .select__single-value {\n  color: #666666 !important;\n}\n.select-field .select__multi-value__label {\n  color: #666666 !important;\n  font-size: 1rem;\n}\n.select-field .select__control--is-focused {\n  border-color: grey !important;\n  box-shadow: none !important;\n}\n.select-field .helper-text {\n  font-size: 0.85rem !important;\n  padding: 0 !important;\n  margin-top: 3px;\n  line-height: 1.66;\n  color: #666666 !important;\n  letter-spacing: 0.03333em;\n}\n.select-field .has-error {\n  color: #F24726 !important;\n}\n.select-field .has-error .select__control {\n  border: 1px #F24726 solid !important;\n}\n.select-field .has-error .select__control--is-focused {\n  border-color: #F24726 !important;\n  box-shadow: 0 0 0 1px #F24726;\n}";
+styleInject(css_248z$e);
 
 var SelectField = function SelectField(props) {
   return React__default.createElement(_.Box, {
@@ -2372,8 +2699,8 @@ ModalComponent.defaultProps = {
   dividers: true
 };
 
-var css_248z$e = ".tabs-component .Mui-selected {\n  color: white !important;\n  border: none !important;\n  background-color: #3299C7;\n}\n.tabs-component .MuiTabs-indicator {\n  display: none;\n}\n.tabs-component .MuiTab-root {\n  margin: 2px 2px 0px;\n  border: 1px solid #00000038;\n  border-bottom: none;\n  border-radius: 5% 5% 0% 0%;\n  color: rgba(0, 0, 0, 0.54);\n}\n.tabs-component .MuiTabPanel-root {\n  border: 1px solid #00000038;\n  margin: 0px 2px 0px;\n  border-radius: 0% 5px 5px 5px;\n}";
-styleInject(css_248z$e);
+var css_248z$f = ".tabs-component .Mui-selected {\n  color: white !important;\n  border: none !important;\n  background-color: #3299C7;\n}\n.tabs-component .MuiTabs-indicator {\n  display: none;\n}\n.tabs-component .MuiTab-root {\n  margin: 2px 2px 0px;\n  border: 1px solid #00000038;\n  border-bottom: none;\n  border-radius: 5% 5% 0% 0%;\n  color: rgba(0, 0, 0, 0.54);\n}\n.tabs-component .MuiTabPanel-root {\n  border: 1px solid #00000038;\n  margin: 0px 2px 0px;\n  border-radius: 0% 5px 5px 5px;\n}";
+styleInject(css_248z$f);
 
 var TabsComponent = function TabsComponent(props) {
   var _React$useState = React__default.useState(props.tabActive.toString()),
@@ -2422,6 +2749,7 @@ exports.ResetPasswordForm = ResetPasswordForm;
 exports.SearchComponent = SearchComponent;
 exports.SelectAsyncField = SelectAsyncField;
 exports.SelectField = SelectField;
+exports.SimpleTableComponent = SimpleTableComponent;
 exports.TableComponent = TableComponent;
 exports.TabsComponent = TabsComponent;
 exports.TextFieldComponent = TextFieldComponent;