desk-kit 2.1.0 → 2.1.3

package/dist/components/document/DocumentItem.js

@@ -0,0 +1,274 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.DocumentItemLoading = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _MoreVert = _interopRequireDefault(require("@mui/icons-material/MoreVert"));
+var _Download = _interopRequireDefault(require("@mui/icons-material/Download"));
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
+var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
+var _moment = _interopRequireDefault(require("moment"));
+var _const = require("../../config/const");
+var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
+var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _image = _interopRequireDefault(require("next/image"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var DocumentItemLoading = exports.DocumentItemLoading = function DocumentItemLoading() {
+  return /*#__PURE__*/_react["default"].createElement(_material.Card, {
+    className: "mb-4"
+  }, /*#__PURE__*/_react["default"].createElement(_material.CardHeader, {
+    subheader: /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
+      variant: "text",
+      width: 100,
+      height: 20
+    }),
+    action: /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
+      variant: "circular",
+      width: 32,
+      height: 32
+    })
+  }), /*#__PURE__*/_react["default"].createElement(_material.CardContent, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "col col-10 offset-1"
+  }, /*#__PURE__*/_react["default"].createElement(_material.Stack, {
+    direction: "column",
+    spacing: 2,
+    justifyContent: "center",
+    alignItems: "center"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "d-flex justify-content-center align-items-center",
+    style: {
+      height: 100
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
+    variant: "rectangular",
+    width: 115,
+    height: 130
+  })), /*#__PURE__*/_react["default"].createElement(_material.Typography, {
+    variant: "subtitle1",
+    sx: {
+      fontWeight: 500
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
+    variant: "text",
+    width: 100,
+    height: 30
+  })))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "col col-12 my-4"
+  }, /*#__PURE__*/_react["default"].createElement(_Divider["default"], null)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "col col-12 "
+  }, /*#__PURE__*/_react["default"].createElement(_material.Stack, {
+    direction: "row",
+    spacing: 2,
+    justifyContent: "space-between"
+  }, /*#__PURE__*/_react["default"].createElement(_material.Stack, {
+    direction: "column",
+    spacing: 2
+  }, /*#__PURE__*/_react["default"].createElement(_material.Typography, {
+    className: "m-0 p-0",
+    variant: "subtitle2"
+  }, /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
+    variant: "text",
+    width: 100,
+    height: 20
+  })), /*#__PURE__*/_react["default"].createElement(_material.Typography, {
+    className: "m-0 p-0",
+    variant: "body2"
+  }, /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
+    variant: "text",
+    width: 100,
+    height: 20
+  }))), /*#__PURE__*/_react["default"].createElement(_material.Stack, {
+    direction: "row",
+    spacing: 2,
+    alignItems: "center",
+    sx: {
+      flexShrink: 1
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
+    variant: "circular",
+    width: 32,
+    height: 32
+  }), /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
+    variant: "circular",
+    width: 32,
+    height: 32
+  })))))));
+};
+var truncateFilename = function truncateFilename(name) {
+  var frontChars = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
+  var backChars = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10;
+  if (name.length <= frontChars + backChars + 3) return name;
+  return "".concat(name.slice(0, frontChars), "...").concat(name.slice(-backChars));
+};
+var DocumentItem = function DocumentItem(props) {
+  var _props$data = props.data,
+    _id = _props$data._id,
+    createdAt = _props$data.createdAt,
+    filename = _props$data.filename,
+    size = _props$data.size,
+    type = _props$data.type,
+    url = _props$data.url,
+    _props$data$user = _props$data.user,
+    user = _props$data$user === void 0 ? {} : _props$data$user;
+  var _props$selected = props.selected,
+    selected = _props$selected === void 0 ? false : _props$selected;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    anchorEl = _useState2[0],
+    setAnchorEl = _useState2[1];
+  var open = Boolean(anchorEl);
+  var handleClick = function handleClick(event) {
+    setAnchorEl(event.currentTarget);
+  };
+  var handleClose = function handleClose(value) {
+    setAnchorEl(null);
+    if (props.onAction) props.onAction(value, props.data);
+  };
+  var _selected = function _selected(event, data) {
+    if (props.onClick) props.onClick(event, data);
+  };
+  var _donwload = function _donwload(event, data) {
+    window.open("".concat(process.env.NEXT_PUBLIC_AWSBUCKET).concat(props.data.path), "_blank");
+  };
+  var supportedExtensions = ["ai", "avi", "css", "csv", "dll", "doc", "jpg", "js", "mov", "mp3", "mp4", "pdf", "php", "png", "ppt", "psd", "rar", "txt", "wav", "xls", "zip"];
+  var getFileExtension = function getFileExtension(filename) {
+    return filename.split(".").pop().toLowerCase();
+  };
+  var extension = getFileExtension(filename);
+  var getIcon = function getIcon(ext) {
+    try {
+      return require("./extensions/".concat(ext, ".png"));
+    } catch (e) {
+      return require("./extensions/default.png");
+    }
+  };
+  var iconSrc = getIcon(extension);
+  return /*#__PURE__*/_react["default"].createElement(_material.Card, {
+    className: (0, _classnames["default"])("mb-4", {
+      "active-card": selected
+    })
+  }, /*#__PURE__*/_react["default"].createElement(_material.CardHeader, {
+    subheader: /*#__PURE__*/_react["default"].createElement(_material.Typography, {
+      onClick: function onClick(e) {
+        return _selected(e, props.data);
+      },
+      variant: "subtitle2"
+    }, (0, _moment["default"])(createdAt).format("DD/MMMM/YYYY HH:mm")),
+    action: /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
+      onClick: function onClick(e) {
+        return handleClick(e, props.data);
+      },
+      "aria-label": "settings"
+    }, /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null))
+  }), /*#__PURE__*/_react["default"].createElement(_material.CardContent, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "col col-10 offset-1",
+    onClick: function onClick(e) {
+      return _selected(e, props.data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_material.Stack, {
+    direction: "column",
+    spacing: 2,
+    justifyContent: "center",
+    alignItems: "center"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "d-flex justify-content-center align-items-center",
+    style: {
+      height: 100
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_image["default"], {
+    src: iconSrc,
+    alt: "Icono del tipo de documento",
+    width: 100,
+    height: 117
+  })), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    title: filename
+  }, /*#__PURE__*/_react["default"].createElement(_material.Typography, {
+    variant: "subtitle1",
+    sx: {
+      fontWeight: 500
+    }
+  }, truncateFilename(filename))))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "col col-12 my-4"
+  }, /*#__PURE__*/_react["default"].createElement(_Divider["default"], null)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "col col-12 "
+  }, /*#__PURE__*/_react["default"].createElement(_material.Stack, {
+    direction: "row",
+    spacing: 2,
+    justifyContent: "space-between"
+  }, /*#__PURE__*/_react["default"].createElement(_material.Stack, {
+    onClick: function onClick(e) {
+      return _selected(e, props.data);
+    },
+    direction: "column",
+    spacing: 2
+  }, /*#__PURE__*/_react["default"].createElement(_material.Typography, {
+    className: "m-0 p-0",
+    variant: "subtitle2"
+  }, "Tama\xF1o"), /*#__PURE__*/_react["default"].createElement(_material.Typography, {
+    className: "m-0 p-0",
+    variant: "body2"
+  }, (0, _const.bytesToSize)(size))), /*#__PURE__*/_react["default"].createElement(_material.Stack, {
+    direction: "row",
+    spacing: 2,
+    alignItems: "center",
+    sx: {
+      flexShrink: 1
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
+    size: "small",
+    "aria-label": "settings",
+    onClick: function onClick(e) {
+      return _donwload();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Download["default"], null)), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+    onClick: function onClick(e) {
+      return _selected(e, props.data);
+    },
+    sizes: "small",
+    sx: {
+      width: 32,
+      height: 32
+    },
+    alt: "".concat(user.firstName, " ").concat(user.lastName),
+    src: user.image
+  })))))), /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
+    dense: true,
+    MenuListProps: {
+      "aria-labelledby": "long-button"
+    },
+    anchorEl: anchorEl,
+    open: open,
+    onClose: function onClose() {
+      return handleClose(false);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+    dense: true,
+    onClick: function onClick() {
+      return handleClose("remove");
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_ListItemIcon["default"], null, /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
+    fontSize: "small"
+  })), /*#__PURE__*/_react["default"].createElement(_material.Typography, null, "Eliminar"))));
+};
+var _default = exports["default"] = DocumentItem;

package/dist/components/document/Documents.js

@@ -0,0 +1,205 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Card = _interopRequireDefault(require("@mui/material/Card"));
+var _CardHeader = _interopRequireDefault(require("@mui/material/CardHeader"));
+var _CardContent = _interopRequireDefault(require("@mui/material/CardContent"));
+var _http = require("../../config/http");
+var _DocumentItem = _interopRequireWildcard(require("./DocumentItem"));
+var _router = require("next/router");
+var _reactDropzone = require("react-dropzone");
+var _AttachFile = _interopRequireDefault(require("@mui/icons-material/AttachFile"));
+var _material = require("@mui/material");
+var _ModalAction = _interopRequireDefault(require("../modal/ModalAction"));
+var _WifiOff = _interopRequireDefault(require("@mui/icons-material/WifiOff"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
+var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _DragAndDropAnimation = _interopRequireDefault(require("../draganddropanimation/DragAndDropAnimation"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var Documents = function Documents(props) {
+  var router = (0, _router.useRouter)();
+  var _props$title = props.title,
+    title = _props$title === void 0 ? 'Documentos' : _props$title,
+    _props$subheader = props.subheader,
+    subheader = _props$subheader === void 0 ? 'Añade documentos relevantes de tu cliente como contratos, recibos, etc.' : _props$subheader;
+  var _useState = (0, _react.useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    documents = _useState2[0],
+    setDocuments = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLoading = _useState4[0],
+    setIsLoading = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isDragging = _useState8[0],
+    setIsDragging = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    loadingFile = _useState10[0],
+    setLoadingFile = _useState10[1];
+  var _useState11 = (0, _react.useState)({
+      visible: false,
+      data: false
+    }),
+    _useState12 = _slicedToArray(_useState11, 2),
+    removeFile = _useState12[0],
+    setRemoveFile = _useState12[1];
+  var fetchDocuments = function fetchDocuments() {
+    setIsLoading(true);
+    setError(false);
+    (0, _http.HTTP)('GET', "business/".concat(router.query.businessId, "/storage/").concat(props.parentId), {}).then(function (response) {
+      setDocuments(response);
+      setIsLoading(false);
+    })["catch"](function (error) {
+      setError(error);
+      setIsLoading(false);
+    });
+  };
+  var _getAction = function _getAction() {
+    var _removeFile$data;
+    var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return (0, _http.HTTP)("DELETE", "business/".concat(router.query.businessId, "/storage/").concat((_removeFile$data = removeFile.data) === null || _removeFile$data === void 0 ? void 0 : _removeFile$data._id), params);
+  };
+  var onDrop = function onDrop(acceptedFiles) {
+    setIsDragging(false);
+    setLoadingFile(true);
+    (0, _http.HTTP_UPLOAD)("POST", "business/".concat(router.query.businessId, "/storage/").concat(props.parentId), {
+      file: acceptedFiles[0]
+    }).then(function (response) {
+      setDocuments([response.file].concat(_toConsumableArray(documents)));
+      setLoadingFile(false);
+    })["catch"](function (error) {
+      setLoadingFile(false);
+    });
+  };
+  var _onCloseRemoveFile = function _onCloseRemoveFile() {
+    var reload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var newfiles = _toConsumableArray(documents);
+    if (reload) {
+      setDocuments(newfiles.filter(function (item) {
+        return item._id !== reload.storageId;
+      }));
+    }
+    setRemoveFile({
+      visible: false,
+      data: false
+    });
+  };
+  var _onAction = function _onAction(action, data) {
+    if (action === "remove") {
+      setRemoveFile({
+        visible: true,
+        data: data
+      });
+    }
+  };
+  (0, _react.useEffect)(function () {
+    fetchDocuments();
+  }, [router.isReady]);
+  var _useDropzone = (0, _reactDropzone.useDropzone)({
+      onDrop: onDrop,
+      noClick: true,
+      // Evita que la modal se cierre al hacer clic en la zona de arrastre
+      noKeyboard: true,
+      // Evita interacciones no deseadas con el teclado
+      onDragEnter: function onDragEnter() {
+        return setIsDragging(true);
+      },
+      onDragLeave: function onDragLeave() {
+        return setIsDragging(false);
+      }
+    }),
+    getRootProps = _useDropzone.getRootProps,
+    getInputProps = _useDropzone.getInputProps,
+    openFileDialog = _useDropzone.open;
+  return /*#__PURE__*/_react["default"].createElement(_Card["default"], null, /*#__PURE__*/_react["default"].createElement(_CardHeader["default"], {
+    title: title,
+    subheader: subheader,
+    action: /*#__PURE__*/_react["default"].createElement(_material.Button, {
+      variant: "contained",
+      color: "primary",
+      startIcon: /*#__PURE__*/_react["default"].createElement(_AttachFile["default"], null),
+      onClick: openFileDialog
+    }, "A\xF1adir documento")
+  }), /*#__PURE__*/_react["default"].createElement(_CardContent["default"], _extends({}, getRootProps(), {
+    style: {
+      position: "relative"
+    }
+  }), /*#__PURE__*/_react["default"].createElement("input", getInputProps()), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "row"
+  }, loadingFile && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "col col-12 col-md-6 col-lg-4"
+  }, /*#__PURE__*/_react["default"].createElement(_DocumentItem.DocumentItemLoading, null)), documents.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "col col-12 col-md-6 col-lg-4",
+      key: item._id
+    }, /*#__PURE__*/_react["default"].createElement(_DocumentItem["default"], {
+      onAction: _onAction,
+      data: item
+    }));
+  }), !isLoading && error && /*#__PURE__*/_react["default"].createElement(_Paper["default"], {
+    elevation: 0,
+    sx: {
+      width: "100%",
+      height: "400px"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+    direction: "column",
+    spacing: 2,
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100%"
+  }, /*#__PURE__*/_react["default"].createElement(_WifiOff["default"], {
+    sx: {
+      fontSize: "60px"
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    variant: "subtitle2",
+    sx: {
+      fontWeight: "bold"
+    }
+  }, "Error al cargar los datos"), /*#__PURE__*/_react["default"].createElement(_material.Button, {
+    variant: "outlined",
+    onClick: function onClick() {
+      return fetchDocuments();
+    }
+  }, "Reintentar"))), /*#__PURE__*/_react["default"].createElement(_DragAndDropAnimation["default"], {
+    isDragging: isDragging
+  }))), /*#__PURE__*/_react["default"].createElement(_ModalAction["default"], {
+    data: {
+      title: "Confirmación",
+      confirmText: "Eliminar",
+      confirmMessage: "Archivo eliminado",
+      description: "Esta seguro de eliminar este archivo, esta acción no se puede deshacer",
+      cancelText: "Cancelar"
+    },
+    action: _getAction,
+    visible: removeFile.visible,
+    onClose: _onCloseRemoveFile
+  }));
+};
+var _default = exports["default"] = Documents;

package/dist/components/draganddropanimation/DragAndDropAnimation.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Receipt = _interopRequireDefault(require("@mui/icons-material/Receipt"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
+var _CloudUpload = _interopRequireDefault(require("@mui/icons-material/CloudUpload"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var DragAndDropAnimation = function DragAndDropAnimation(props) {
+  var _props$isDragging = props.isDragging,
+    isDragging = _props$isDragging === void 0 ? false : _props$isDragging,
+    _props$title = props.title,
+    title = _props$title === void 0 ? "Facturas" : _props$title;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('draganddropanimation', {
+      dragging_animation: isDragging
+    })
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "content_animation"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "icon_animation"
+  }, /*#__PURE__*/_react["default"].createElement(_CloudUpload["default"], {
+    sx: {
+      fontSize: 70,
+      color: "var(--primary-color)"
+    }
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "box_animation"
+  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    sx: {
+      color: "white",
+      fontWeight: 500
+    },
+    variant: "subtitle2"
+  }, "Suelta el archivo para subirlo a"), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+    direction: "row",
+    alignItems: "center",
+    spacing: 1
+  }, /*#__PURE__*/_react["default"].createElement(_Receipt["default"], {
+    sx: {
+      fontSize: 26,
+      color: "white"
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    sx: {
+      color: "white",
+      fontWeight: 500
+    },
+    variant: "subtitle2"
+  }, title)))));
+};
+var _default = exports["default"] = DragAndDropAnimation;

package/dist/components/header/index.js

@@ -263,8 +263,10 @@ var Header = function Header(props) {
     href: "/"
   }, /*#__PURE__*/_react["default"].createElement(_image["default"], {
     src: prefersDarkMode ? "/images/desk_mode_dark.png" : "/images/logo_desk.png",
+    alt: "Logotipo",
     width: 210,
-    height: 70
+    height: 70,
+    fetchPriority: "high"
   }))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "sections"
   }, /*#__PURE__*/_react["default"].createElement(_Breadcrumbs["default"], {

package/dist/index.js

@@ -5,8 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   ModalAction: true,
-  Header: true
+  Header: true,
+  DocumentItem: true,
+  Documents: true
 };
+Object.defineProperty(exports, "DocumentItem", {
+  enumerable: true,
+  get: function get() {
+    return _DocumentItem["default"];
+  }
+});
+Object.defineProperty(exports, "Documents", {
+  enumerable: true,
+  get: function get() {
+    return _Documents["default"];
+  }
+});
 Object.defineProperty(exports, "Header", {
   enumerable: true,
   get: function get() {
@@ -81,4 +95,6 @@ Object.keys(_const).forEach(function (key) {
   });
 });
 var _header = _interopRequireDefault(require("./components/header"));
+var _DocumentItem = _interopRequireDefault(require("./components/document/DocumentItem"));
+var _Documents = _interopRequireDefault(require("./components/document/Documents"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }