(this.containerRef = el)}\n data-testid=\"container\"\n style={containerStyle}\n className={classNames('reactEasyCrop_Container', containerClassName)}\n >\n {image ? (\n
![\"\"\n]()
)}\n src={image}\n ref={this.imageRef}\n style={{\n ...mediaStyle,\n transform:\n transform || `translate(${x}px, ${y}px) rotate(${rotation}deg) scale(${zoom})`,\n }}\n onLoad={this.onMediaLoad}\n />\n ) : (\n video && (\n
\n )\n )}\n {this.state.cropSize && (\n
\n )}\n
\n )\n }\n}\n\nexport default Cropper\n","var _path;\nfunction _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); }\nimport * as React from \"react\";\nfunction SvgMute(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 17,\n height: 22,\n viewBox: \"0 0 17 22\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M16 14.3416V7.30778C16 3.37629 16 1.41054 14.8434 0.92133C13.6867 0.432122 12.3254 1.82212 9.6029 4.6021C8.19299 6.04176 7.38856 6.36057 5.38255 6.36057C3.62822 6.36057 2.75105 6.36056 2.12094 6.79048C0.812937 7.6829 1.01065 9.42719 1.01065 10.8247C1.01065 12.2222 0.812936 13.9665 2.12094 14.8589C2.75105 15.2888 3.62822 15.2888 5.38255 15.2888C7.38856 15.2888 8.19298 15.6077 9.6029 17.0473C12.3254 19.8273 13.6867 21.2173 14.8434 20.7281C16 20.2389 16 18.2731 16 14.3416Z\",\n stroke: \"#BEC0C9\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgMute);\nexport default __webpack_public_path__ + \"static/media/mute.950b42d87b8e73ecdb9359b2bf7dfbe7.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _path2, _path3;\nfunction _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); }\nimport * as React from \"react\";\nfunction SvgSquareLock(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 26,\n height: 27,\n viewBox: \"0 0 26 27\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M13 18.6994V16.5327\",\n stroke: \"#BEC0C9\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M4.62606 21.2398C4.86968 23.0493 6.36841 24.4668 8.19223 24.5507C9.7269 24.6212 11.2858 24.658 13.0026 24.658C14.7194 24.658 16.2783 24.6212 17.813 24.5507C19.6368 24.4668 21.1355 23.0493 21.3791 21.2398C21.5381 20.0589 21.6693 18.8488 21.6693 17.6164C21.6693 16.3839 21.5381 15.1738 21.3791 13.9929C21.1355 12.1835 19.6368 10.7659 17.813 10.6821C16.2783 10.6115 14.7194 10.5747 13.0026 10.5747C11.2858 10.5747 9.7269 10.6115 8.19223 10.6821C6.36841 10.7659 4.86968 12.1835 4.62606 13.9929C4.46707 15.1738 4.33594 16.3839 4.33594 17.6164C4.33594 18.8488 4.46707 20.0589 4.62606 21.2398Z\",\n stroke: \"#BEC0C9\",\n strokeWidth: 1.5\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M8.125 10.5745V7.86621C8.125 5.17382 10.3076 2.99121 13 2.99121C15.6924 2.99121 17.875 5.17382 17.875 7.86621V10.5745\",\n stroke: \"#BEC0C9\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgSquareLock);\nexport default __webpack_public_path__ + \"static/media/square-lock.eccc7bd67ffbd2f12855d7203a8cd5ea.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _path2, _path3;\nfunction _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); }\nimport * as React from \"react\";\nfunction SvgSquareUnlock(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 26,\n height: 26,\n viewBox: \"0 0 26 26\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M4.62606 20.4151C4.86968 22.2246 6.36841 23.6421 8.19223 23.726C9.7269 23.7965 11.2858 23.8333 13.0026 23.8333C14.7194 23.8333 16.2783 23.7965 17.813 23.726C19.6368 23.6421 21.1355 22.2246 21.3791 20.4151C21.5381 19.2342 21.6693 18.0241 21.6693 16.7917C21.6693 15.5592 21.5381 14.3491 21.3791 13.1682C21.1355 11.3588 19.6368 9.9412 17.813 9.85735C16.2783 9.7868 14.7194 9.75 13.0026 9.75C11.2858 9.75 9.7269 9.7868 8.19223 9.85735C6.36841 9.9412 4.86968 11.3588 4.62606 13.1682C4.46707 14.3491 4.33594 15.5592 4.33594 16.7917C4.33594 18.0241 4.46707 19.2342 4.62606 20.4151Z\",\n stroke: \"#BEC0C9\",\n strokeWidth: 1.5\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M8.125 9.74984V7.0415C8.125 4.34912 10.3076 2.1665 13 2.1665C15.1226 2.1665 16.7917 3.7915 17.3333 5.4165\",\n stroke: \"#BEC0C9\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M13 16.7915H13.0097\",\n stroke: \"#BEC0C9\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgSquareUnlock);\nexport default __webpack_public_path__ + \"static/media/square-unlock.e2e0ed62d38b66147a82542f5d286ae2.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _circle, _path2, _path3, _path4;\nfunction _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); }\nimport * as React from \"react\";\nfunction SvgStopWatch(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 25,\n viewBox: \"0 0 24 25\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M18 6.32471L19 5.32471M5 5.32471L6 6.32471\",\n stroke: \"#BEC0C9\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _circle || (_circle = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 12,\n cy: 13.8247,\n r: 9,\n stroke: \"#BEC0C9\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12 10.3247V14.3247L14 16.3247\",\n stroke: \"#BEC0C9\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12 4.32471V2.82471\",\n stroke: \"#BEC0C9\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path4 || (_path4 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10 2.82471H14\",\n stroke: \"#BEC0C9\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgStopWatch);\nexport default __webpack_public_path__ + \"static/media/stop-watch.ead0edf04e12f50e3a32615d8c48e116.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _circle, _path2, _path3, _path4;\nfunction _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); }\nimport * as React from \"react\";\nfunction SvgStopWatch2(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M18 5.5L19 4.5M5 4.5L6 5.5\",\n stroke: \"#141B34\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _circle || (_circle = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 12,\n cy: 13,\n r: 9,\n stroke: \"#141B34\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12 9.5V13.5L14 15.5\",\n stroke: \"#141B34\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12 3.5V2\",\n stroke: \"#141B34\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path4 || (_path4 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10 2H14\",\n stroke: \"#141B34\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgStopWatch2);\nexport default __webpack_public_path__ + \"static/media/stop-watch-2.a6afc7103ef40d7ad5786dad70bb13aa.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _path2, _path3;\nfunction _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); }\nimport * as React from \"react\";\nfunction SvgFilter2(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 30,\n height: 27,\n viewBox: \"0 0 30 27\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M22.3917 8.40804C22.4821 8.21131 22.5302 8.00257 22.5655 7.72858C22.7845 6.02558 22.8941 5.17408 22.3947 4.62439C21.8954 4.07471 21.0123 4.07471 19.2462 4.07471H6.75385C4.98771 4.07471 4.10464 4.07471 3.60528 4.62439C3.10593 5.17408 3.21546 6.02558 3.43452 7.72858C3.4985 8.22593 3.60489 8.50828 3.92962 8.89409C4.97861 10.1405 6.89976 12.3575 9.59558 14.373C9.84193 14.5571 10.0036 14.8581 10.0309 15.1912C10.3346 18.9016 10.6128 21.4363 10.7605 22.684C10.838 23.3385 11.5636 23.8419 12.1615 23.4191C13.1659 22.7087 15.0424 21.9126 15.2903 20.5893C15.4075 19.9637 15.579 18.8718 15.7726 17.0747\",\n stroke: \"#BEC0C9\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M25 9.82471H27.9474C28.5675 9.82471 28.8775 9.82471 28.9601 10.0248C29.0427 10.2249 28.8317 10.4649 28.4098 10.945L25.9846 13.7044C25.5627 14.1845 25.3517 14.4245 25.4343 14.6246C25.5169 14.8247 25.8269 14.8247 26.447 14.8247H29\",\n stroke: \"#BEC0C9\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M15 14.8247L16.7546 10.9124C17.0799 10.1873 17.2425 9.82471 17.5 9.82471C17.7575 9.82471 17.9201 10.1873 18.2454 10.9124L19.1227 12.8686L20 14.8247\",\n stroke: \"#BEC0C9\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgFilter2);\nexport default __webpack_public_path__ + \"static/media/filter-2.2907e4442b724f85054f72c112b86de2.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _path2, _path3;\nfunction _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); }\nimport * as React from \"react\";\nfunction SvgAdd(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 22,\n height: 22,\n viewBox: \"0 0 22 22\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11.5 20.8247H5.59087C4.04549 20.8247 2.81631 20.0727 1.71266 19.0213C-0.546635 16.8688 3.1628 15.1487 4.57757 14.3063C6.67837 13.0554 9.13683 12.5966 11.5 12.9299C12.3575 13.0508 13.1926 13.2761 14 13.6056\",\n stroke: \"#BEC0C9\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M15.5 5.32471C15.5 7.80999 13.4853 9.82471 11 9.82471C8.51472 9.82471 6.5 7.80999 6.5 5.32471C6.5 2.83943 8.51472 0.824707 11 0.824707C13.4853 0.824707 15.5 2.83943 15.5 5.32471Z\",\n stroke: \"#BEC0C9\",\n strokeWidth: 1.5\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M17.5 20.8247L17.5 13.8247M14 17.3247H21\",\n stroke: \"#BEC0C9\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgAdd);\nexport default __webpack_public_path__ + \"static/media/add.88029f6852b9f1ea40cbfa49223995c5.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _path2;\nfunction _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); }\nimport * as React from \"react\";\nfunction SvgLogout(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 23,\n height: 23,\n viewBox: \"0 0 23 23\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.73067 5.27051C4.40667 6.81571 2.875 9.45799 2.875 12.458C2.875 17.2215 6.73654 21.083 11.5 21.083C16.2635 21.083 20.125 17.2215 20.125 12.458C20.125 9.45799 18.5933 6.81571 16.2693 5.27051\",\n stroke: \"#FF2557\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11.5 1.9165V9.58317\",\n stroke: \"#FF2557\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgLogout);\nexport default __webpack_public_path__ + \"static/media/logout.e27df61cefcf41f663bdd77bcb5768c6.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _path2;\nfunction _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); }\nimport * as React from \"react\";\nfunction SvgCopy(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 19,\n height: 18,\n viewBox: \"0 0 19 18\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M15.5312 6.75H8.78125C7.95282 6.75 7.28125 7.42157 7.28125 8.25V15C7.28125 15.8284 7.95282 16.5 8.78125 16.5H15.5312C16.3597 16.5 17.0312 15.8284 17.0312 15V8.25C17.0312 7.42157 16.3597 6.75 15.5312 6.75Z\",\n stroke: \"#BEC0C9\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M4.28125 11.25H3.53125C3.13343 11.25 2.75189 11.092 2.47059 10.8107C2.18929 10.5294 2.03125 10.1478 2.03125 9.75V3C2.03125 2.60218 2.18929 2.22064 2.47059 1.93934C2.75189 1.65804 3.13343 1.5 3.53125 1.5H10.2812C10.6791 1.5 11.0606 1.65804 11.3419 1.93934C11.6232 2.22064 11.7812 2.60218 11.7812 3V3.75\",\n stroke: \"#BEC0C9\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgCopy);\nexport default __webpack_public_path__ + \"static/media/copy.8abe2b90ce5895069b3b16cd67649fb4.svg\";\nexport { ForwardRef as ReactComponent };","/* eslint-disable no-unused-vars */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport {\n Avatar,\n Typography,\n IconButton,\n Box,\n Button,\n Dialog,\n DialogContent,\n DialogTitle,\n DialogContentText,\n DialogActions,\n ListItemIcon,\n ListItemText,\n List,\n ListItem,\n ListItemAvatar,\n Grid,\n Popover,\n FormControlLabel,\n Radio,\n InputAdornment,\n InputBase,\n Paper,\n CircularProgress,\n Divider,\n Modal,\n Slider,\n TextField,\n} from \"@mui/material\";\nimport { useParams, useNavigate } from \"react-router-dom\";\nimport Cropper from \"react-easy-crop\";\nimport { ReactComponent as ArrowIcon } from \"../../../Assets/Arrow.svg\";\nimport { ReactComponent as DeleteIcon } from \"../../../Assets/delete-03.svg\";\nimport { ReactComponent as CloseIcon } from \"../../../Assets/log-out.svg\";\nimport { ReactComponent as ReportIcon } from \"../../../Assets/alert-circle.svg\";\nimport { ReactComponent as UploadIcon } from \"../../../Assets/image-upload.svg\";\nimport { ReactComponent as MuteIcon } from \"../../../Assets/mute.svg\";\nimport { ReactComponent as PrivateIcon } from \"../../../Assets/square-lock.svg\";\nimport { ReactComponent as PublicIcon } from \"../../../Assets/square-unlock.svg\";\nimport { ReactComponent as SlowIcon } from \"../../../Assets/stop-watch.svg\";\nimport { ReactComponent as SlowDarkIcon } from \"../../../Assets/stop-watch-2.svg\";\nimport { ReactComponent as FilterIcon } from \"../../../Assets/filter-2.svg\";\nimport { ReactComponent as AddIcon } from \"../../../Assets/add.svg\";\nimport { ReactComponent as DotsIcon } from \"../../../Assets/dots.svg\";\nimport { ReactComponent as LogoutIcon } from \"../../../Assets/logout.svg\";\nimport { ReactComponent as CopyIcon } from \"../../../Assets/copy.svg\";\nimport { ReactComponent as SearchIcon } from \"../../../Assets/search.svg\";\n\nconst GroupSetting = () => {\n const { id } = useParams();\n const navigate = useNavigate();\n const [anchorElMute, setAnchorElMute] = useState(null);\n const [anchorElSlow, setAnchorElSlow] = useState(null);\n const isMuteOpen = Boolean(anchorElMute);\n const isSlowOpen = Boolean(anchorElSlow);\n const [members, setMembers] = useState([]);\n const [loading, setLoading] = useState(true);\n const [reqLoading, setReqLoading] = useState(false);\n const [deleteId, setDeleteId] = useState(null);\n const [leaveId, setLeaveId] = useState(null);\n const [reportId, setReportId] = useState(null);\n const [closeChat, setCloseChat] = useState(false);\n const [leaveChat, setLeaveChat] = useState(false);\n const [reportChat, setReportChat] = useState(false);\n const [editType, setEditType] = useState(\"\");\n const [open, setOpen] = useState(false);\n const [selectedImage, setSelectedImage] = useState(null);\n const [profileImage, setProfileImage] = useState(null);\n const [bannerImage, setBannerImage] = useState(null);\n const [zoom, setZoom] = useState(1);\n const [crop, setCrop] = useState({ x: 0, y: 0 });\n const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);\n const [isAdmin, setIsAdmin] = useState(false);\n const [selectedChat, setSelectedChat] = useState(null);\n const [mutedWords, setMutedWords] = useState([]);\n const [newWord, setNewWord] = useState(\"\");\n const [searchTerm, setSearchTerm] = useState(\"\");\n\n useEffect(() => {\n const savedChat = localStorage.getItem(\"selectedChat\");\n if (savedChat) {\n setSelectedChat(JSON.parse(savedChat));\n }\n }, []);\n\n const handleImageChange = (event, type) => {\n const file = event.target.files[0];\n if (file) {\n setSelectedImage(URL.createObjectURL(file));\n setEditType(type);\n setOpen(true);\n }\n };\n\n const handleZoomChange = (event, newValue) => {\n setZoom(newValue);\n };\n\n const onCropComplete = (croppedArea, croppedAreaPixels) => {\n setCroppedAreaPixels(croppedAreaPixels);\n };\n\n const getCroppedImage = async (imageSrc, croppedAreaPixels) => {\n const canvas = document.createElement(\"canvas\");\n const img = new Image();\n img.src = imageSrc;\n const { width, height } = croppedAreaPixels;\n canvas.width = width;\n canvas.height = height;\n const ctx = canvas.getContext(\"2d\");\n img.onload = () => {\n ctx.drawImage(\n img,\n croppedAreaPixels.x,\n croppedAreaPixels.y,\n croppedAreaPixels.width,\n croppedAreaPixels.height,\n 0,\n 0,\n croppedAreaPixels.width,\n croppedAreaPixels.height\n );\n };\n\n return new Promise((resolve) => {\n img.onload = () => {\n ctx.drawImage(\n img,\n croppedAreaPixels.x,\n croppedAreaPixels.y,\n croppedAreaPixels.width,\n croppedAreaPixels.height,\n 0,\n 0,\n croppedAreaPixels.width,\n croppedAreaPixels.height\n );\n resolve(canvas.toDataURL());\n };\n });\n };\n\n const handleApply = async () => {\n const croppedImage = await getCroppedImage(selectedImage, croppedAreaPixels);\n const response = await fetch(croppedImage);\n const blob = await response.blob();\n if (editType === \"profile\") {\n setProfileImage(blob);\n } else if (editType === \"banner\") {\n setBannerImage(blob);\n }\n setOpen(false);\n };\n\n const handleClickOpen = (id) => {\n setDeleteId(id);\n setCloseChat(true);\n };\n\n const handleLeaveOpen = (id) => {\n setLeaveId(id);\n setLeaveChat(true);\n };\n\n const handleClickReport = (id) => {\n setReportId(id);\n setReportChat(true);\n };\n\n const handleDelete = async () => {\n try {\n const accessToken = localStorage.getItem(\"access-token\");\n const tokenType = localStorage.getItem(\"token-type\");\n const client = localStorage.getItem(\"client\");\n const expiry = localStorage.getItem(\"expiry\");\n const uid = localStorage.getItem(\"uid\");\n const response = await axios.delete(`https://api.locaided.com/v1/groups/${deleteId}`, {\n headers: {\n \"access-token\": accessToken,\n \"token-type\": tokenType,\n client: client,\n expiry: expiry,\n uid: uid,\n },\n });\n navigate(\"/dashboard/chats/group\");\n handleClose();\n } catch (error) {\n const errorMessage =\n error.response?.data?.message || error.message || \"An error occurred\";\n console.log(errorMessage, \"error\");\n }\n };\n\n const handleLeave = async () => {\n try {\n const accessToken = localStorage.getItem(\"access-token\");\n const tokenType = localStorage.getItem(\"token-type\");\n const client = localStorage.getItem(\"client\");\n const expiry = localStorage.getItem(\"expiry\");\n const uid = localStorage.getItem(\"uid\");\n const response = await axios.delete(`https://api.locaided.com/v1/groups/${leaveId}leave`, {\n headers: {\n \"access-token\": accessToken,\n \"token-type\": tokenType,\n client: client,\n expiry: expiry,\n uid: uid,\n },\n });\n navigate(\"/dashboard/chats/group\");\n handleClose();\n } catch (error) {\n const errorMessage =\n error.response?.data?.message || error.message || \"An error occurred\";\n console.log(errorMessage, \"error\");\n }\n };\n\n const handleReport = async () => {\n try {\n const accessToken = localStorage.getItem(\"access-token\");\n const tokenType = localStorage.getItem(\"token-type\");\n const client = localStorage.getItem(\"client\");\n const expiry = localStorage.getItem(\"expiry\");\n const uid = localStorage.getItem(\"uid\");\n const response = await axios.delete(`https://api.locaided.com/v1/groups/${reportId}report`, {\n headers: {\n \"access-token\": accessToken,\n \"token-type\": tokenType,\n client: client,\n expiry: expiry,\n uid: uid,\n },\n });\n navigate(\"/dashboard/chats/group\");\n handleClose();\n } catch (error) {\n const errorMessage =\n error.response?.data?.message || error.message || \"An error occurred\";\n console.log(errorMessage, \"error\");\n }\n };\n\n const fetchMembers = () => {\n const accessToken = localStorage.getItem(\"access-token\");\n const tokenType = localStorage.getItem(\"token-type\");\n const client = localStorage.getItem(\"client\");\n const expiry = localStorage.getItem(\"expiry\");\n const uid = localStorage.getItem(\"uid\");\n\n axios\n .get(`https://api.locaided.com/v1/groups/${id}/get_members`, {\n headers: {\n \"access-token\": accessToken,\n \"token-type\": tokenType,\n client: client,\n expiry: expiry,\n uid: uid,\n },\n })\n .then((response) => {\n const groupMembers = response.data.data.group_members;\n const isAdminUser = selectedChat?.user?.id\n ? groupMembers.some(\n (member) => member.admin === true && member.id === selectedChat.user.id\n )\n : false;\n setMembers(groupMembers);\n setIsAdmin(isAdminUser);\n setLoading(false);\n })\n .catch((error) => {\n console.error(\"Error fetching Member:\", error);\n setLoading(false);\n });\n };\n\n useEffect(() => {\n fetchMembers();\n }, []);\n\n const handleOpenMutePopup = (event) => {\n setAnchorElMute(event.currentTarget);\n };\n\n const handleOpenSlowPopup = (event) => {\n setAnchorElSlow(event.currentTarget);\n };\n\n const handleUpdate = async () => {\n setReqLoading(true)\n const url = `https://api.locaided.com/v1/groups/${selectedChat.group.id}`;\n const accessToken = localStorage.getItem(\"access-token\");\n const tokenType = localStorage.getItem(\"token-type\");\n const client = localStorage.getItem(\"client\");\n const expiry = localStorage.getItem(\"expiry\");\n const uid = localStorage.getItem(\"uid\");\n\n const formData = new FormData();\n if (profileImage) {\n formData.append(\"group_image\", profileImage, \"profile.jpg\");\n }\n if (bannerImage) {\n formData.append(\"group_banner\", bannerImage, \"banner.jpg\");\n }\n\n try {\n const response = await axios.put(url, formData, {\n headers: {\n \"access-token\": accessToken,\n \"token-type\": tokenType,\n client: client,\n expiry: expiry,\n uid: uid,\n \"Content-Type\": \"multipart/form-data\",\n },\n });\n setProfileImage(null);\n setBannerImage(null);\n setReqLoading(false);\n } catch (error) {\n console.error(\n \"Error sending group creation data:\",\n error.response ? error.response.data : error.message\n );\n }\n };\n\n const handleClose = () => {\n setCloseChat(false);\n setLeaveChat(false);\n setReportChat(false);\n setDeleteId(null);\n setLeaveId(null);\n setReportId(null);\n setAnchorElMute(null);\n setAnchorElSlow(null);\n };\n\n const handleAddWord = () => {\n if (newWord.trim() !== \"\" && !mutedWords.includes(newWord)) {\n setMutedWords([...mutedWords, newWord]);\n setNewWord(\"\");\n }\n };\n\n const filteredWords = mutedWords.filter(word =>\n word.toLowerCase().includes(searchTerm.toLowerCase())\n );\n\n if (loading) {\n return (\n