added task files

package-lock.json

@@ -19,6 +19,7 @@
         "react-qr-scanner": "^1.0.0-alpha.11",
         "react-router-dom": "^6.10.0",
         "react-scripts": "5.0.1",
+        "react-stl-viewer": "^2.2.5",
         "web-vitals": "^2.1.4"
       }
     },
@@ -1919,6 +1920,35 @@
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
     },
+    "node_modules/@chevrotain/cst-dts-gen": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-10.5.0.tgz",
+      "integrity": "sha512-lhmC/FyqQ2o7pGK4Om+hzuDrm9rhFYIJ/AXoQBeongmn870Xeb0L6oGEiuR8nohFNL5sMaQEJWCxr1oIVIVXrw==",
+      "dependencies": {
+        "@chevrotain/gast": "10.5.0",
+        "@chevrotain/types": "10.5.0",
+        "lodash": "4.17.21"
+      }
+    },
+    "node_modules/@chevrotain/gast": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/@chevrotain/gast/-/gast-10.5.0.tgz",
+      "integrity": "sha512-pXdMJ9XeDAbgOWKuD1Fldz4ieCs6+nLNmyVhe2gZVqoO7v8HXuHYs5OV2EzUtbuai37TlOAQHrTDvxMnvMJz3A==",
+      "dependencies": {
+        "@chevrotain/types": "10.5.0",
+        "lodash": "4.17.21"
+      }
+    },
+    "node_modules/@chevrotain/types": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-10.5.0.tgz",
+      "integrity": "sha512-f1MAia0x/pAVPWH/T73BJVyO2XU5tI4/iE7cnxb7tqdNTNhQI3Uq3XkqcoteTmD4t1aM0LbHCJOhgIDn07kl2A=="
+    },
+    "node_modules/@chevrotain/utils": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-10.5.0.tgz",
+      "integrity": "sha512-hBzuU5+JjB2cqNZyszkDHZgOSrUUT8V3dhgRl8Q9Gp6dAj/H5+KILGjbhDpc3Iy9qmqlm/akuOI2ut9VUtzJxQ=="
+    },
     "node_modules/@csstools/normalize.css": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
@@ -4326,6 +4356,11 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.11.tgz",
       "integrity": "sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q=="
     },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.0",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.0.tgz",
+      "integrity": "sha512-PGcyveRIpL1XIqK8eBsmRBt76eFgtzuPiSTyKHZxnGemp2yzGzWpjYKAfK3wIMiU7eH+851yEpiuP8JZerTmWg=="
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -4374,6 +4409,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-reconciler": {
+      "version": "0.26.7",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.26.7.tgz",
+      "integrity": "sha512-mBDYl8x+oyPX/VBb3E638N0B7xG+SPk/EAMcVPeexqus/5aTpTphQi0curhhshOqRrc9t6OPoJfEUkbymse/lQ==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -4810,6 +4853,11 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "node_modules/@webgpu/glslang": {
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/@webgpu/glslang/-/glslang-0.0.15.tgz",
+      "integrity": "sha512-niT+Prh3Aff8Uf1MVBVUsaNjFj9rJAKDXuoHIKiQbB+6IUP/3J3JIhBNyZ7lDhytvXxw6ppgnwKZdDJ08UMj4Q=="
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -5985,6 +6033,19 @@
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.2.2.tgz",
       "integrity": "sha512-HBiYvXvn9Z70Z88XKjz3AEKd4HJhBXsa3j7xFnITAzoS8+q6eIGi8qDB8FKPBAjtuxjI/zFpwuiCb8oDtKOYrA=="
     },
+    "node_modules/chevrotain": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-10.5.0.tgz",
+      "integrity": "sha512-Pkv5rBY3+CsHOYfV5g/Vs5JY9WTHHDEKOlohI2XeygaZhUeqhAlldZ8Hz9cRmxu709bvS08YzxHdTPHhffc13A==",
+      "dependencies": {
+        "@chevrotain/cst-dts-gen": "10.5.0",
+        "@chevrotain/gast": "10.5.0",
+        "@chevrotain/types": "10.5.0",
+        "@chevrotain/utils": "10.5.0",
+        "lodash": "4.17.21",
+        "regexp-to-ast": "0.5.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -6769,6 +6830,11 @@
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
       "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
     },
+    "node_modules/debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -7102,6 +7168,11 @@
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
     },
+    "node_modules/draco3d": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.6.tgz",
+      "integrity": "sha512-+3NaRjWktb5r61ZFoDejlykPEFKT5N/LkbXsaddlw6xNSXBanUYpFc2AXXpbJDilPHazcSreU/DpQIaxfX0NfQ=="
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -8268,6 +8339,11 @@
         "bser": "2.1.1"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.6.10",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg=="
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -9908,6 +9984,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/its-fine": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.1.1.tgz",
+      "integrity": "sha512-v1Ia1xl20KbuSGlwoaGsW0oxsw8Be+TrXweidxD9oT/1lAh6O3K3/GIM95Tt6WCiv6W+h2M7RB1TwdoAjQyyKw==",
+      "dependencies": {
+        "@types/react-reconciler": "^0.28.0"
+      },
+      "peerDependencies": {
+        "react": ">=18.0"
+      }
+    },
+    "node_modules/its-fine/node_modules/@types/react-reconciler": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.2.tgz",
+      "integrity": "sha512-8tu6lHzEgYPlfDf/J6GOQdIc+gs+S2yAqlby3zTsB3SP2svlqTYe5fwZNtZyfactP74ShooP2vvi1BOp9ZemWw==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/jake": {
       "version": "10.8.5",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz",
@@ -12050,6 +12145,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/ktx-parse": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/ktx-parse/-/ktx-parse-0.4.5.tgz",
+      "integrity": "sha512-MK3FOody4TXbFf8Yqv7EBbySw7aPvEcPX++Ipt6Sox+/YMFvR5xaTyhfNSk1AEmMy+RYIw81ctN4IMxCB8OAlg=="
+    },
     "node_modules/language-subtag-registry": {
       "version": "0.3.22",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz",
@@ -12453,6 +12553,11 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/mmd-parser": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mmd-parser/-/mmd-parser-1.0.4.tgz",
+      "integrity": "sha512-Qi0VCU46t2IwfGv5KF0+D/t9cizcDug7qnNoy9Ggk7aucp0tssV8IwTMkBlDbm+VqAf3cdQHTCARKSsuS2MYFg=="
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -12801,6 +12906,21 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/opentype.js": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/opentype.js/-/opentype.js-1.3.4.tgz",
+      "integrity": "sha512-d2JE9RP/6uagpQAVtJoF0pJJA/fgai89Cc50Yp0EJHk+eLp6QQ7gBoblsnubRULNY132I0J1QKMJ+JTbMqz4sw==",
+      "dependencies": {
+        "string.prototype.codepointat": "^0.2.1",
+        "tiny-inflate": "^1.0.3"
+      },
+      "bin": {
+        "ot": "bin/ot"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -14296,6 +14416,11 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/potpack": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ=="
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -15330,6 +15455,29 @@
         "react-dom": "^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-reconciler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.27.0.tgz",
+      "integrity": "sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.21.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
+    "node_modules/react-reconciler/node_modules/scheduler": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+      "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -15440,6 +15588,81 @@
         }
       }
     },
+    "node_modules/react-stl-viewer": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/react-stl-viewer/-/react-stl-viewer-2.2.5.tgz",
+      "integrity": "sha512-qf3QHkOh0KPGPw2qO+SM7yyndSUPdcHVlCMmHooUFPmtVwyjXWxqh7URGSq6rkZliGE1/rKuP/lAiQV6ZaT7+w==",
+      "dependencies": {
+        "@react-three/fiber": "8.9.1",
+        "three-stdlib": "2.17.2"
+      },
+      "peerDependencies": {
+        "react": ">=18.0",
+        "react-dom": ">=18.0",
+        "three": ">=0.133"
+      }
+    },
+    "node_modules/react-stl-viewer/node_modules/@react-three/fiber": {
+      "version": "8.9.1",
+      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.9.1.tgz",
+      "integrity": "sha512-xRMO9RGp0DkxSFu5BmmkjCxJ4r0dEpLobtxXdZwI0h2rZZaCnkPM5zThRN8xaZNbZhzRSVICeNOFaZltr9xFyQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8",
+        "@types/react-reconciler": "^0.26.7",
+        "its-fine": "^1.0.6",
+        "react-reconciler": "^0.27.0",
+        "react-use-measure": "^2.1.1",
+        "scheduler": "^0.21.0",
+        "suspend-react": "^0.0.8",
+        "zustand": "^3.7.1"
+      },
+      "peerDependencies": {
+        "expo": ">=43.0",
+        "expo-asset": ">=8.4",
+        "expo-gl": ">=11.0",
+        "react": ">=18.0",
+        "react-dom": ">=18.0",
+        "react-native": ">=0.64",
+        "three": ">=0.133"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        },
+        "expo-asset": {
+          "optional": true
+        },
+        "expo-gl": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-stl-viewer/node_modules/scheduler": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+      "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/react-use-measure": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
+      "integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==",
+      "dependencies": {
+        "debounce": "^1.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -15529,6 +15752,11 @@
       "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.2.11.tgz",
       "integrity": "sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q=="
     },
+    "node_modules/regexp-to-ast": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/regexp-to-ast/-/regexp-to-ast-0.5.0.tgz",
+      "integrity": "sha512-tlbJqcMHnPKI9zSrystikWKwHkBqu2a/Sgw01h3zFjvYrMxEDYHzzoMZnUrbIfpTFEsoRnnviOXNCzFiSc54Qw=="
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
@@ -16421,6 +16649,11 @@
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
+    "node_modules/string.prototype.codepointat": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.codepointat/-/string.prototype.codepointat-0.2.1.tgz",
+      "integrity": "sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg=="
+    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz",
@@ -16687,6 +16920,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/suspend-react": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.0.8.tgz",
+      "integrity": "sha512-ZC3r8Hu1y0dIThzsGw0RLZplnX9yXwfItcvaIzJc2VQVi8TGyGDlu92syMB5ulybfvGLHAI5Ghzlk23UBPF8xg==",
+      "peerDependencies": {
+        "react": ">=17.0"
+      }
+    },
     "node_modules/svg-parser": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
@@ -16974,6 +17215,33 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/three": {
+      "version": "0.153.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.153.0.tgz",
+      "integrity": "sha512-OCP2/uQR6GcDpSLnJt/3a4mdS0kNWcbfUXIwLoEMgLzEUIVIYsSDwskpmOii/AkDM+BBwrl6+CKgrjX9+E2aWg==",
+      "peer": true
+    },
+    "node_modules/three-stdlib": {
+      "version": "2.17.2",
+      "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.17.2.tgz",
+      "integrity": "sha512-7ZLCJJogtn1D1MlUi7q0iLUbrxj7K++YxjHIIz5AZ4wX4E137BgiiTmhH4XhAuvXGRk9ph3ZtoHTfJBXhqDX3w==",
+      "dependencies": {
+        "@babel/runtime": "^7.16.7",
+        "@types/offscreencanvas": "^2019.6.4",
+        "@webgpu/glslang": "^0.0.15",
+        "chevrotain": "^10.1.2",
+        "draco3d": "^1.4.1",
+        "fflate": "^0.6.9",
+        "ktx-parse": "^0.4.5",
+        "mmd-parser": "^1.0.4",
+        "opentype.js": "^1.3.3",
+        "potpack": "^1.0.1",
+        "zstddec": "^0.0.2"
+      },
+      "peerDependencies": {
+        "three": ">=0.122.0"
+      }
+    },
     "node_modules/throat": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.2.tgz",
@@ -16992,6 +17260,11 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw=="
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -18347,6 +18620,27 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zstddec": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/zstddec/-/zstddec-0.0.2.tgz",
+      "integrity": "sha512-DCo0oxvcvOTGP/f5FA6tz2Z6wF+FIcEApSTu0zV5sQgn9hoT5lZ9YRAKUraxt9oP7l4e8TnNdi8IZTCX6WCkwA=="
+    },
+    "node_modules/zustand": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz",
+      "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==",
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
+      }
     }
   }
 }

package.json

@@ -14,6 +14,7 @@
     "react-qr-scanner": "^1.0.0-alpha.11",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
+    "react-stl-viewer": "^2.2.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/Pages/GroupTasks/GroupTasksViewModal.js

@@ -2,6 +2,7 @@ import {
   Alert,
   Button,
   Form,
+  Image,
   Input,
   InputNumber,
   Modal,
@@ -23,7 +24,13 @@ import {
   getUserId,
   GroupTasksStepsLockedAndUserUpdateInputValueRememberId,
 } from "../../utils";
-import { InfoCircleOutlined, LockOutlined } from "@ant-design/icons";
+import {
+  DownloadOutlined,
+  InfoCircleOutlined,
+  LockOutlined,
+  PaperClipOutlined,
+} from "@ant-design/icons";
+import { StlViewer } from "react-stl-viewer";
 
 export default function GroupTasksViewModal({ isOpen }) {
   const webSocketContext = useContext(WebSocketContext);
@@ -200,11 +207,76 @@ export default function GroupTasksViewModal({ isOpen }) {
     }
   };
 
-  const getGroupTaskStepLog = (log) => {
+  const getGroupTaskStepLog = (log, files) => {
+    const getPopoverContent = (file) => {
+      const fileExtension = file.SystemFileName.split(".")[1];
+      const fileUrl = `${Constants.STATIC_CONTENT_ADDRESS}grouptasks/${currentGroupTask.Id}/${file.SystemFileName}`;
+
+      switch (fileExtension) {
+        case "png":
+          return <Image width={200} src={fileUrl} />;
+        case "stl":
+          return (
+            <StlViewer
+              style={{ top: 0, left: 0, width: "30vw", height: "30vh" }}
+              orbitControls
+              url={fileUrl}
+              canvasId="test"
+              modelProps={{
+                color: Constants.COLORS.PRIMARY,
+              }}
+            />
+          );
+
+        default:
+          return (
+            <>
+              <span>Preview not supported</span>
+              <br />
+              <a
+                href={fileUrl}
+                download="test"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <Button
+                  type="primary"
+                  style={{ width: "100%", marginTop: 10 }}
+                  icon={<DownloadOutlined />}
+                >
+                  Download
+                </Button>
+              </a>
+            </>
+          );
+      }
+    };
+
     return log.length === 0 ? (
       ""
     ) : (
-      <span style={{ whiteSpace: "pre-line" }}>{log}</span>
+      <span style={{ whiteSpace: "pre-line" }}>
+        {log}
+
+        {files !== "" &&
+          JSON.parse(files).map((file) => {
+            return (
+              <Popover
+                key={file.SystemFileName}
+                content={getPopoverContent(file)}
+                placement="rightTop"
+              >
+                <Tag
+                  key={file.SystemFileName}
+                  icon={<PaperClipOutlined />}
+                  color="processing"
+                >
+                  {file.OriginalFileName}
+                </Tag>
+              </Popover>
+            );
+          })}
+      </span>
     );
   };
 
@@ -368,7 +440,10 @@ export default function GroupTasksViewModal({ isOpen }) {
                       taskLockedByUserId={groupTaskSteps[index].LockedByUserId}
                     />
                   ) : (
-                    getGroupTaskStepLog(groupTaskSteps[index].Log)
+                    getGroupTaskStepLog(
+                      groupTaskSteps[index].Log,
+                      groupTaskSteps[index].Files
+                    )
                   )
                 }
                 type={getAlertType(groupTaskSteps[index].Status)}

src/utils.js

@@ -322,8 +322,6 @@ export function WebSocketProvider({
           )
             break;
 
-          console.log("body task locked", body);
-
           setGroupTasksSteps((arr) => {
             const newArr = [...arr];
 
@@ -342,8 +340,6 @@ export function WebSocketProvider({
           // html based DOM manipulation
           const foundInput = document.getElementById(body.element);
 
-          console.log("here", foundInput);
-
           if (foundInput) {
             // this timeout is needed because the previous useState for the lockedByUserId takes some milliseconds to complete
             setTimeout(() => setNativeValue(foundInput, body.value), 50);