qr code added

Co-authored-by: Dustin Thomas <stdio@cptlobster.dev>

package-lock.json

@@ -14,8 +14,9 @@
         "animate.css": "^4.1.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-keep-alive": "^2.5.2",
         "react-modal": "^3.16.1",
-        "react-router-dom": "^6.22.3",
+        "react-router-dom": "^6.25.1",
         "react-scripts": "^5.0.1",
         "sass": "^1.70.0",
         "web-vitals": "^2.1.4"
@@ -3619,9 +3620,10 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
-      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.18.0.tgz",
+      "integrity": "sha512-L3jkqmqoSVBVKHfpGZmLrex0lxR5SucGA0sUfFzGctehw+S/ggL9L/0NnC5mw6P8HUWpFZ3nQw3cRApjjWx9Sw==",
+      "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -4268,6 +4270,12 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "node_modules/@types/js-md5": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@types/js-md5/-/js-md5-0.4.3.tgz",
+      "integrity": "sha512-BIga/WEqTi35ccnGysOuO4RmwVnpajv9oDB/sDQSY2b7/Ac7RyYR30bv7otZwByMvOJV9Vqq6/O1DFAnOzE4Pg==",
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -8919,6 +8927,21 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -11761,6 +11784,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-md5": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.7.3.tgz",
+      "integrity": "sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ==",
+      "license": "MIT"
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -14711,6 +14740,22 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-keep-alive": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/react-keep-alive/-/react-keep-alive-2.5.2.tgz",
+      "integrity": "sha512-CoEsY5xE6rT31Z4p4UGZ/Crp0nZN+CY61ZflKzBGKB3D315jQMe2l8G5OrSEJ86V4stua7lSeFDIeG3DCuY2Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/js-md5": "^0.4.2",
+        "hoist-non-react-statics": "^3.3.0",
+        "js-md5": "^0.7.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0",
+        "react-router-dom": ">=5.0.0"
+      }
+    },
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -14743,11 +14788,12 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.22.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
-      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "version": "6.25.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.25.1.tgz",
+      "integrity": "sha512-u8ELFr5Z6g02nUtpPAggP73Jigj1mRePSwhS/2nkTrlPU5yEkH1vYzWNyvSnSzeeE2DNqWdH+P8OhIh9wuXhTw==",
+      "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.15.3"
+        "@remix-run/router": "1.18.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -14757,12 +14803,13 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.22.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
-      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "version": "6.25.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.25.1.tgz",
+      "integrity": "sha512-0tUDpbFvk35iv+N89dWNrJp+afLgd+y4VtorJZuOCXK0kkCWjEvb3vTJM++SYvMEpbVwXKf3FjeVveVEb6JpDQ==",
+      "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.15.3",
-        "react-router": "6.22.3"
+        "@remix-run/router": "1.18.0",
+        "react-router": "6.25.1"
       },
       "engines": {
         "node": ">=14.0.0"

package.json

@@ -9,8 +9,9 @@
     "animate.css": "^4.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-keep-alive": "^2.5.2",
     "react-modal": "^3.16.1",
-    "react-router-dom": "^6.22.3",
+    "react-router-dom": "^6.25.1",
     "react-scripts": "^5.0.1",
     "sass": "^1.70.0",
     "web-vitals": "^2.1.4"

public/index.html

@@ -5,39 +5,27 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>Belden Jukebox</title>
   </head>
   <body>
-    <noscript>Belden Jukebox UI</noscript>
+    <noscript>
+      <p>
+        <b>Belden Jukebox Error:</b><br />
+        JavaScript is required to run this application.<br />
+        Please enable JavaScript in your browser.<br /><br />
+
+        <a
+          href="https://www.enable-javascript.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Here are the instructions how to enable JavaScript in your web
+          browser!
+        </a>
+      </p>
+    </noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>

src/assets/stylesheets/cabledetail.scss

@@ -62,7 +62,7 @@ $white: #fff;
   );
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   flex-direction: row;
   border-radius: 20px;
   border: 1px solid $gray;
@@ -134,7 +134,8 @@ $white: #fff;
   background-color: transparent;
 }
 
-.cable-main-image {
+.cable-main-image,
+.cable-main-imageqr {
   aspect-ratio: 1/1;
   width: auto;
   height: 100%;
@@ -146,6 +147,23 @@ $white: #fff;
   filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
 }
 
+.cable-main-imageqr {
+  margin-right: 0;
+  margin-left: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cable-main-imageqr img {
+  width: 80%;
+  height: 80%;
+  object-fit: cover;
+  background-color: white;
+  border: $gray solid 1px;
+  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
+}
+
 .cable-main-label {
   width: 60%;
   height: 100%;
@@ -305,6 +323,18 @@ th:first-child {
   flex-direction: column;
 }
 
+.modal-datasheet {
+  width: 1000px;
+  height: 700px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  flex-direction: column;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
 .modal-title span {
   width: auto;
   height: auto;

src/assets/stylesheets/navbar.scss

@@ -13,11 +13,12 @@ $white: #fff;
   flex-direction: column;
   align-items: center;
   border-right: $gray solid 1px;
+  justify-content: space-between;
 }
 
 .navbar-top {
   width: 90%;
-  height: 94%;
+  height: auto;
   display: flex;
   align-items: left;
   justify-content: flex-start;
@@ -32,6 +33,7 @@ $white: #fff;
   align-items: center;
   justify-content: space-between;
   flex-direction: row;
+  padding-top: 20px;
 }
 
 .navbar-top-secret {
@@ -50,10 +52,9 @@ $white: #fff;
   justify-content: left;
   padding-left: 4px;
   text-align: center;
-  margin-top: 20px;
-  margin-bottom: 15px;
-  color: $light-blue;
+  color: $medium-blue;
   background-color: transparent;
+  margin-left: 2px;
 }
 
 .navbar-top h1 {
@@ -79,7 +80,8 @@ $white: #fff;
 }
 
 .navbar-list-item,
-.navbar-return {
+.navbar-return,
+.navbar-settings {
   width: 100%;
   height: 50px;
   margin: 0 0 3px;
@@ -94,7 +96,8 @@ $white: #fff;
 }
 
 .navbar-list-item span,
-.navbar-return span {
+.navbar-return span,
+.navbar-settings span {
   background-color: transparent;
   width: auto;
   height: auto;
@@ -104,11 +107,25 @@ $white: #fff;
   margin-left: 10px;
 }
 
+.navbar-settings {
+  width: 40px;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  background-color: $medium-blue;
+}
+
+.navbar-settings span {
+  margin: 0;
+}
+
 .navbar-return {
   width: 90%;
   align-items: center;
   justify-content: center;
   background-color: $medium-blue;
+  margin-bottom: 15px;
 }
 
 .navbar-return span {
@@ -129,6 +146,7 @@ $white: #fff;
 .modal-title,
 .modal-body,
 .modal-close,
+.modal-closeX,
 .modal-return {
   width: auto;
   height: auto;
@@ -168,22 +186,25 @@ $white: #fff;
   justify-content: center;
   align-items: center;
   background-color: transparent;
-  margin-bottom: 30px;
+  margin-bottom: 20px;
   overflow: visible;
 }
 
 .modal-close,
-.modal-return {
+.modal-return,
+.modal-closeX {
   cursor: pointer;
   padding: 15px 35px;
   border-radius: 20px;
   background-color: $gray;
   box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
   transition: all 0.3s ease-in-out;
+  margin-bottom: 10px;
 }
 
 .modal-close span,
-.modal-return span {
+.modal-return span,
+.modal-closeX span {
   width: auto;
   height: auto;
   background-color: transparent;
@@ -193,9 +214,14 @@ $white: #fff;
   color: $dark-blue;
 }
 
+.modal-closeX {
+  background-color: rgb(255, 152, 152);
+  box-shadow: 0 4px 4px rgba(94, 1, 1, 0.25);
+}
+
 .modal-return {
-  width: 30px;
-  height: 20px;
+  width: auto;
+  height: auto;
   align-items: center;
   justify-content: center;
   margin-left: 10px;

src/assets/stylesheets/settings.scss

@@ -66,19 +66,19 @@ $white: #fff;
   text-align: left;
 }
 
-.settings-powerContainer,
+.settings-grid,
 .settings-creditsContainer {
   width: 80%;
-  height: 100px;
+  height: auto;
   background: linear-gradient(
     -30deg,
     rgb(187 208 236) 0%,
     rgb(255 255 255 / 100%) 100%
   );
   display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: column;
   border-radius: 20px;
   border: 1px solid $gray;
   margin-bottom: 5px;
@@ -89,6 +89,29 @@ $white: #fff;
   filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
 }
 
+.settings-gridInner {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 15px 0px 15px 0px;
+  background-color: transparent;
+}
+
+.settings-grid h2 {
+  width: 100%;
+  height: auto;
+  font-size: 24px;
+  font-weight: bold;
+  color: $dark-blue;
+  font-family: "Gotham Medium";
+  text-align: left;
+  padding: 20px 10px 0px 10px;
+  background-color: transparent;
+}
+
 .settings-creditsContainer {
   height: 500px;
   display: flex;
@@ -96,10 +119,10 @@ $white: #fff;
   align-items: center;
 }
 
-.settings-powerButton {
-  width: 200px;
-  height: 50px;
-  border-radius: 20px;
+.settings-button {
+  width: auto;
+  height: 40px;
+  border-radius: 15px;
   background: linear-gradient(
     15deg,
     rgb(223 223 223) 0%,
@@ -112,78 +135,182 @@ $white: #fff;
   filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
   cursor: pointer;
   text-decoration: none;
-  margin-right: 20px;
-  margin-left: 20px;
+  margin-right: 10px;
+  margin-left: 10px;
 }
 
-.settings-powerButton span {
+.settings-button span {
   width: auto;
   height: auto;
-  font-size: 20px;
-  margin-top: 2px;
+  font-size: 16px;
   color: $medium-blue;
   font-family: "Gotham Bold";
   background-color: transparent;
+  padding: 10px;
 }
 
-.settings-credits {
-  width: 95%;
-  height: 430px;
+.settings-form {
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
   background-color: transparent;
+}
+
+// text box
+#sendobject {
+  width: 90%;
+  height: 20px;
+  border-radius: 15px;
+  background-color: $white;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
-  flex-direction: column;
+  transition: all 0.3s ease-in-out;
+  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
+  text-decoration: none;
+  margin-right: 10px;
+  margin-left: 10px;
+  padding: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  border: 1px solid rgb(199, 199, 199);
+  text-align: left;
 }
 
-.entry-links,
-.entry-name,
-.entry-position,
-.settings-credits-title {
+#sendobject:focus {
+  outline: none;
+}
+
+#sendobjectButton {
+  width: 10%;
+  height: 40px;
+  border-radius: 15px;
+  background: linear-gradient(
+    15deg,
+    rgb(223 223 223) 0%,
+    rgb(255 255 255) 100%
+  );
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease-in-out;
+  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
+  cursor: pointer;
+  text-decoration: none;
+  margin-right: 10px;
+  margin-left: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+#creditsgrid {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  //background-color: red;
+}
+
+.entry {
+  width: 48%;
+  height: 150px;
+  border-radius: 15px;
+  background: linear-gradient(
+    15deg,
+    rgb(223 223 223) 0%,
+    rgb(255 255 255) 100%
+  );
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease-in-out;
+  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
+  text-decoration: none;
+  margin: 10px 10px 10px 10px;
+}
+
+.entry-image {
   width: auto;
   height: auto;
-  text-align: left;
-  font-family: "Gotham Medium";
-  color: $light-blue;
-  font-size: 20px;
+  display: flex;
   background-color: transparent;
-  background: transparent;
-  text-decoration: none;
-  margin-bottom: 7px;
-  margin-right: 30px;
 }
 
-.settings-credits-title {
+.entry-img,
+.entry-qr {
+  width: 110px;
+  height: 110px;
+  background: linear-gradient(
+    15deg,
+    rgb(223 223 223) 0%,
+    rgb(255 255 255) 100%
+  );
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 15px;
+  margin: 10px;
+  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
+  border: 1px solid $gray;
+}
+
+.entry-qr {
+  margin: 0px;
+  padding: 8px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50px;
+  background: white;
+  position: fixed;
+  bottom: 5px;
+  margin-left: 90px;
+}
+
+.entry-qr img {
+  border-radius: 0px;
+  width: auto;
+  height: auto;
+  background: red;
+}
+
+.entry-title {
+  width: 70%;
+  height: 50%;
+  margin-left: 30px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: column;
+  background-color: transparent;
+}
+
+.entry-title h2,
+.entry-title h3 {
+  width: auto;
+  height: auto;
   font-size: 24px;
   font-weight: bold;
   color: $dark-blue;
   font-family: "Gotham Medium";
-  margin-bottom: 10px;
-}
-
-.entry {
-  width: 100%;
-  height: auto;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
+  text-align: left;
   background-color: transparent;
+  text-align: start;
+  margin: 0px;
+  padding: 0px;
 }
 
-.entry-name {
-  width: auto;
-  height: auto;
-  color: $medium-blue;
+.entry-title h2 {
+  margin-bottom: 5px;
 }
 
-.entry-position {
-  width: auto;
-  height: auto;
+.entry-title h3 {
+  font-size: 16px;
+  font-weight: normal;
   color: $light-blue;
 }
-
-.entry-links {
-  width: auto;
-  height: auto;
-  color: $hover-blue;
-}

src/assets/stylesheets/statistics.scss

@@ -62,7 +62,7 @@ $white: #fff;
   font-family: "Gotham Medium";
   margin: 10px;
   background-color: transparent;
-  margin-bottom: 20px;
+  margin-bottom: 25px;
 }
 
 .statistics-grid {
@@ -70,26 +70,23 @@ $white: #fff;
   height: auto;
   display: flex;
   flex-flow: row wrap;
-  justify-content: flex-start;
+  justify-content: center;
   align-items: flex-start;
   background-color: transparent;
   overflow: visible;
-  // add row gap
-  gap: 20px;
 }
 
 .statistics-grid-container {
-  width: 32%;
-  height: 300px;
+  width: calc(((100% / 3)) - (12px));
+  height: 270px;
   background: linear-gradient(
     -30deg,
     rgb(187 208 236) 0%,
     rgb(255 255 255 / 100%) 100%
   );
-  margin-top: 5px;
-  display: flex; /* Center the content */
-  align-items: center; /* Center vertically */
-  justify-content: center; /* Center horizontally */
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border-radius: 20px;
   border: 1px solid $gray;
   transition: all 0.3s ease-in-out;
@@ -97,51 +94,19 @@ $white: #fff;
   filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
   cursor: pointer;
   overflow: visible;
+  margin-bottom: 15px;
+}
+
+.statistics-grid-container:nth-child(3n + 1) {
+  margin-right: 15px;
+}
+
+.statistics-grid-container:nth-child(3n) {
+  margin-left: 15px;
 }
 
 .statistics-iframe {
-  width: 95%; /* Ensure iframes take up full width of their grid cell */
-  height: 95%; /* Adjust the height of iframes */
+  width: 95%;
+  height: 95%;
   border-radius: 20px;
-
-  // Debug Borders
-  // border-width: 5px;
-  // border-style: solid;
 }
-
-// .summary-iframe {
-//   width: 400px;
-//   height: 400px;
-//   min-height: 1px;
-//   background: transparent;
-//   margin: 10px;
-//   display: block;
-// }
-
-// .summary-fieldContainer-pp {
-//   width: 25%;
-//   height: 300px;
-//   border-radius: 20px;
-//   text-align: center;
-//   padding: 10px;
-// }
-
-// .summary-fieldContainer-graph {
-//   width: 25%;
-// }
-
-// .summary-dashboard {
-//   width: 100%;
-//   height: 900px;
-//   border-radius: 20px;
-//   text-align: center;
-//   padding: 10px;
-// }
-
-// .summary-fieldContainer-dashboard {
-//   width: 100%;
-//   height: 300px;
-//   border-radius: 20px;
-//   text-align: center;
-//   padding: 10px;
-// }

src/components/BrowseComponent.js

@@ -24,16 +24,8 @@ export default class BrowseComponent extends Component {
     try {
       const message = JSON.parse(event.data);
       const cableList = this.browseParse(message);
-      if (!this.state.isLoading) {
       this.setState({ cableList });
-      } else {
-        setTimeout(() => {
-          this.setState({ cableList });
-        }, 500 - new Date());
-      }
-    } catch (error) {
-      console.error("Error parsing message from server:", error);
-    }
+    } catch (error) {}
   };
 
   browseParse(message) {

src/components/CableDetailComponent.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import BeldenLogo from "../assets/images/belden-white.png";
 import DefaultPartImg from "../assets/images/part.png";
+import DefaultQRImg from "../assets/images/default_qr.png";
 import { NavLink } from "react-router-dom";
 import Modal from "react-modal";
 import "../assets/stylesheets/cabledetail.scss";
@@ -17,6 +18,7 @@ class Cable {
     this.image = cableData.image
       ? `http://${hostname}${cableData.image}`
       : DefaultPartImg;
+    this.datasheet = `http://${hostname}${cableData.datasheet}`;
     this.dynamicProps = {};
     this.horizontal = [];
     this.vertical = [];
@@ -25,6 +27,9 @@ class Cable {
     this.short_description = cableData.short_description;
     this.application = cableData.application;
     this.category = cableData.category;
+    this.qrcode = cableData.qrcode
+      ? `http://${hostname}${cableData.qrcode}`
+      : DefaultQRImg;
 
     if (this.description === undefined) {
       if (this.short_description !== undefined) {
@@ -59,6 +64,7 @@ class Cable {
           "application",
           "category",
           "datasheet",
+          "qrcode",
         ].includes(key)
       ) {
         this.dynamicProps[key] = cableData[key];
@@ -105,7 +111,6 @@ export default class CableDetailComponent extends Component {
     super(props);
     this.state = {
       cableDetails: null,
-      modalOpen_dispense: false,
       modalOpen_show: false,
       modalOpen_datasheet: false,
       modalOpacity: 0,
@@ -119,11 +124,7 @@ export default class CableDetailComponent extends Component {
       setTimeout(() => this.setState({ modalOpacity: 1 }), 10);
     });
 
-    if (modal === "modalOpen_dispense") {
-      this.props.socket.send(
-        `{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`
-      );
-    } else if (modal === "modalOpen_show") {
+    if (modal === "modalOpen_show") {
       this.props.socket.send(
         `{"type": "cable_get","call": "request","data": {"position": ${this.state.cableDetails.position}}}`
       );
@@ -136,6 +137,12 @@ export default class CableDetailComponent extends Component {
     });
   };
 
+  dispense() {
+    this.props.socket.send(
+      `{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`
+    );
+  }
+
   componentDidMount() {
     const cablePos = window.location.href.split("/").pop();
     this.props.socket.send(
@@ -146,13 +153,10 @@ export default class CableDetailComponent extends Component {
 
   handleMessage = (event) => {
     try {
-      console.log("Message from server", event.data);
       const message = JSON.parse(event.data);
       const cableDetails = new Cable(message.data.cables[0]);
       this.setState({ cableDetails });
-    } catch (error) {
-      console.error("Error parsing message from server:", error);
-    }
+    } catch (error) {}
   };
 
   componentWillUnmount() {
@@ -164,7 +168,6 @@ export default class CableDetailComponent extends Component {
     try {
       data = JSON.parse(object);
     } catch (error) {
-      console.error("Error parsing JSON data:", error);
       return <div>Error loading data...</div>;
     }
 
@@ -230,13 +233,8 @@ export default class CableDetailComponent extends Component {
   }
 
   render() {
-    const {
-      modalOpen_dispense,
-      modalOpen_show,
-      modalOpen_datasheet,
-      modalOpacity,
-      cableDetails,
-    } = this.state;
+    const { modalOpen_show, modalOpen_datasheet, modalOpacity, cableDetails } =
+      this.state;
     const modalStyle = {
       content: {
         opacity: modalOpacity,
@@ -246,8 +244,8 @@ export default class CableDetailComponent extends Component {
         right: "auto",
         bottom: "auto",
         marginRight: "-50%",
-        width: "30%",
-        height: "30%",
+        width: "auto",
+        height: "auto",
         transform: "translate(-50%, -50%)",
         overflow: "hidden",
         display: "flex",
@@ -258,6 +256,8 @@ export default class CableDetailComponent extends Component {
         background:
           "linear-gradient(-30deg, rgb(187, 194, 236) 0%, rgba(255, 255, 255, 1) 100%)",
         boxShadow: "0 0 20px rgba(0, 0, 0, 0.5)",
+        minWidth: "30%",
+        minHeight: "30%",
       },
       overlay: {
         opacity: modalOpacity,
@@ -325,6 +325,19 @@ export default class CableDetailComponent extends Component {
                   {parseInt(cableDetails.position) + 1}
                 </div>
               </div>
+
+              {cableDetails.qrcode !== DefaultQRImg ? (
+                <div className="cable-main-imageqr">
+                  <img src={cableDetails.qrcode} alt="" />
+                </div>
+              ) : (
+                <div
+                  className="cable-main-imageqr"
+                  src={cableDetails.qrcode}
+                  alt=""
+                  style={{ visibility: "hidden" }}
+                />
+              )}
             </div>
           ) : (
             <div className="cable-main"></div>
@@ -348,8 +361,16 @@ export default class CableDetailComponent extends Component {
                   <span>✏️</span>
                   <span>Datasheet</span>
                 </div>
-                <div className="modal-body">
-                  <span>Datasheet coming soon...</span>
+                <div className="modal-datasheet">
+                  {cableDetails ? (
+                    <iframe
+                      src={cableDetails.datasheet}
+                      height="70%"
+                      width="70%"
+                    ></iframe>
+                  ) : (
+                    <div className="datasheet"></div>
+                  )}
                 </div>
                 <div
                   className="modal-close"
@@ -363,7 +384,7 @@ export default class CableDetailComponent extends Component {
               className="cable-actions-button"
               onClick={() => this.openModal("modalOpen_show")}
             >
-              <span>➤ Show</span>
+              <span>➤ Highlight</span>
               <span>💡</span>
             </div>
             <Modal
@@ -375,10 +396,10 @@ export default class CableDetailComponent extends Component {
               <div className="modal-container">
                 <div className="modal-title">
                   <span>💡</span>
-                  <span>Showing Item</span>
+                  <span>Highlighting Item</span>
                 </div>
                 <div className="modal-body">
-                  <span>The item will now be illuminated.</span>
+                  <span>The sample will now be illuminated.</span>
                 </div>
                 <div
                   className="modal-close"
@@ -390,33 +411,11 @@ export default class CableDetailComponent extends Component {
             </Modal>
             <div
               className="cable-actions-button"
-              onClick={() => this.openModal("modalOpen_dispense")}
+              onClick={() => this.dispense()}
             >
               <span>➤ Dispense</span>
               <span>🔽</span>
             </div>
-            <Modal
-              isOpen={modalOpen_dispense}
-              onRequestClose={() => this.closeModal("modalOpen_dispense")}
-              contentLabel="Dispense"
-              style={modalStyle}
-            >
-              <div className="modal-container">
-                <div className="modal-title">
-                  <span>🔽</span>
-                  <span>Dispensing Item</span>
-                </div>
-                <div className="modal-body">
-                  <span>Please wait for your item to be dispensed.</span>
-                </div>
-                <div
-                  className="modal-close"
-                  onClick={() => this.closeModal("modalOpen_dispense")}
-                >
-                  <span>Close</span>
-                </div>
-              </div>
-            </Modal>
           </div>
 
           {cableDetails ? (

src/components/MapComponent.js

@@ -32,7 +32,6 @@ export default class MapComponent extends Component {
 
   handleMessage = (event) => {
     try {
-      console.log("Message from server", event.data);
       const message = JSON.parse(event.data);
       const list = this.browseParse(message);
       this.setState({ cableList: list });
@@ -40,9 +39,7 @@ export default class MapComponent extends Component {
         this.select("0");
         this.updateSelection();
       }, 50);
-    } catch (error) {
-      console.error("Error parsing message from server:", error);
-    }
+    } catch (error) {}
   };
 
   updateSelection() {
@@ -50,9 +47,13 @@ export default class MapComponent extends Component {
     for (let i = 0; i < 54; i++) {
       let cable = cableList[i];
       if (cable === undefined) {
+        try {
           document.getElementById("inner-" + i).style.border =
             "#bdbdbd 4px solid";
           document.getElementById("text-" + i).style.color = "#bdbdbd";
+        } catch (error) {
+          console.error("Error updating selection:", error);
+        }
       }
     }
   }
@@ -116,12 +117,16 @@ export default class MapComponent extends Component {
     }
 
     let { selected } = this.state;
+    try {
       document.getElementById("inner-" + selected).style.border =
         "#004990 4px solid";
       document.getElementById("text-" + selected).style.color = "#004990";
       this.setState({ selected: id });
       document.getElementById("inner-" + id).style.border = "#007cbe 4px solid";
       document.getElementById("text-" + id).style.color = "#007cbe";
+    } catch (error) {
+      console.error("Error selecting cable:", error);
+    }
 
     let cab = this.state.cableList[id];
     this.setState({ cable: cab });

src/components/NavBar.js

@@ -9,9 +9,9 @@ export default class NavBar extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      clicks: 0,
-      modalOpen_return: false,
+      modalOpen_activeArm: false,
       modalOpacity: 0,
+      mode: "idle",
     };
     this.openModal = this.openModal.bind(this);
     this.closeModal = this.closeModal.bind(this);
@@ -28,37 +28,43 @@ export default class NavBar extends Component {
     } else if (path.includes("cable")) {
       document.getElementById("browse").style.backgroundColor = "#007CBE";
       document.getElementById("browse-s").style.color = "white";
+    } else if (path.includes("settings")) {
+      document.getElementById("settings").style.backgroundColor = "#007CBE";
+      document.getElementById("settings-s").style.color = "white";
     } else {
       document.getElementById("browse").style.backgroundColor = "#007CBE";
       document.getElementById("browse-s").style.color = "white";
     }
+
+    this.props.socket.addEventListener("message", this.handleMessage);
   }
 
-  handleClick = () => {
-    const { clicks, timer } = this.state;
-    if (clicks === 0) {
-      const newTimer = setTimeout(() => {
-        this.setState({ clicks: 0 });
-        clearTimeout(newTimer);
-      }, 1000);
-      this.setState({ timer: newTimer });
-    }
-
-    this.setState({ clicks: clicks + 1 });
-
-    if (clicks + 1 === 3) {
-      window.location.replace("/settings");
-
-      clearTimeout(timer);
-      this.setState({ clicks: 0, timer: null });
-    }
-  };
-
   componentWillUnmount() {
-    if (this.state.timer) {
-      clearTimeout(this.state.timer);
+    this.props.socket.removeEventListener("message", this.handleMessage);
+  }
+
+  handleMessage = (event) => {
+    try {
+      const message = JSON.parse(event.data);
+      if (message.type === "mode") {
+        let currentMode = JSON.parse(message.data).mode.toLowerCase();
+        this.setState({ mode: currentMode });
+        console.log("Current Mode: " + currentMode);
+        if (currentMode === "idle") {
+          setTimeout(() => {
+            console.log("State Mode: " + this.state.mode);
+            if (this.state.mode === "idle") {
+              this.closeModal("modalOpen_activeArm");
+            }
+          }, 1500);
+        } else {
+          this.openModal("modalOpen_activeArm");
         }
       }
+    } catch (error) {
+      console.error("");
+    }
+  };
 
   openModal = (modal) => {
     this.setState({ [modal]: true }, () => {
@@ -72,16 +78,20 @@ export default class NavBar extends Component {
     });
   };
 
-  returnCable = (tray) => {
+  returnCable = () => {
     this.props.socket.send(
-      `{"type": "cable_get","call": "send","data": {"tray": ${tray}}}`
+      `{"type": "cable_get","call": "send","data": {"tray": 0}}`
+    );
+  };
+
+  cancelAction = () => {
+    this.props.socket.send(
+      `{"type": "cancel_action","call": "request","data": {}}`
     );
-    console.log("Cable returned from tray " + tray);
-    this.closeModal("modalOpen_return");
   };
 
   render() {
-    const { modalOpen_return, modalOpacity } = this.state;
+    const { modalOpen_activeArm, modalOpacity } = this.state;
 
     const modalStyle = {
       content: {
@@ -92,8 +102,8 @@ export default class NavBar extends Component {
         right: "auto",
         bottom: "auto",
         marginRight: "-50%",
-        width: "30%",
-        height: "30%",
+        width: "auto",
+        height: "auto",
         transform: "translate(-50%, -50%)",
         overflow: "hidden",
         display: "flex",
@@ -104,6 +114,8 @@ export default class NavBar extends Component {
         background:
           "linear-gradient(-30deg, rgb(187, 194, 236) 0%, rgba(255, 255, 255, 1) 100%)",
         boxShadow: "0 0 20px rgba(0, 0, 0, 0.5)",
+        minWidth: "30%",
+        minHeight: "30%",
       },
       overlay: {
         opacity: modalOpacity,
@@ -118,7 +130,9 @@ export default class NavBar extends Component {
         <div className="navbar-top">
           <div className="navbar-top-container">
             <div className="navbar-top-hamburger">≡</div>
-            <div className="navbar-top-secret" onClick={this.handleClick}></div>
+            <NavLink className="navbar-settings" id="settings" to="/settings">
+              <span id="settings-s">⚙️</span>
+            </NavLink>
           </div>
           <h1>Jukebox</h1>
           <ol className="navbar-list">
@@ -137,45 +151,25 @@ export default class NavBar extends Component {
             </NavLink>
           </ol>
         </div>
-        <div
-          className="navbar-return"
-          onClick={() => this.openModal("modalOpen_return")}
-        >
+        <div className="navbar-return" onClick={() => this.returnCable()}>
           <span id="browse-s">Return Cable</span>
         </div>
+
         <Modal
-          isOpen={modalOpen_return}
-          onRequestClose={() => this.closeModal("modalOpen_return")}
+          isOpen={modalOpen_activeArm}
           contentLabel="show"
           style={modalStyle}
         >
           <div className="modal-container">
             <div className="modal-title">
-              <span>♻️</span>
-              <span>Return Cable</span>
+              <span>⚠️</span>
+              <span>Arm in Motion</span>
             </div>
             <div className="modal-body">
-              <span>Select the tray you would like to return from.</span>
+              <span>Please stay clear of the arm.</span>
             </div>
-            <div className="modal-tray">
-              <div className="modal-return" onClick={() => this.returnCable(0)}>
-                <span>1</span>
-              </div>
-              <div className="modal-return" onClick={() => this.returnCable(1)}>
-                <span>2</span>
-              </div>
-              <div className="modal-return" onClick={() => this.returnCable(2)}>
-                <span>3</span>
-              </div>
-              <div className="modal-return" onClick={() => this.returnCable(3)}>
-                <span>4</span>
-              </div>
-            </div>
-            <div
-              className="modal-close"
-              onClick={() => this.closeModal("modalOpen_return")}
-            >
-              <span>Cancel</span>
+            <div className="modal-closeX" onClick={() => this.cancelAction()}>
+              <span>Cancel Action</span>
             </div>
           </div>
         </Modal>

src/components/SettingsComponent.js

@@ -1,19 +1,114 @@
 import React, { Component } from "react";
 import BeldenLogo from "../assets/images/belden-white.png";
+import Modal from "react-modal";
 import "../assets/stylesheets/settings.scss";
 
+Modal.setAppElement("#root");
+
 export default class SettingsComponent extends Component {
-  shutdownPower = () => {
-    console.log("Shutting down...");
-    this.props.socket.send('{"type":"shutdown","call":"request","data":{}}');
+  constructor(props) {
+    super(props);
+    this.state = {
+      modalOpen_quickAction: false,
+      modalOpacity: 0,
+      action: "",
+    };
+    this.openModal = this.openModal.bind(this);
+    this.closeModal = this.closeModal.bind(this);
+  }
+
+  quickAction = (action, requirePrompt) => {
+    if (requirePrompt) {
+      this.openModal("modalOpen_quickAction", action);
+    } else {
+      this.quickActionPerform(action);
+    }
   };
 
-  restartPower = () => {
+  quickActionPerform = (action) => {
+    switch (action) {
+      case "shutdown":
+        console.log("Shutting down...");
+        this.props.socket.send(
+          '{"type":"shutdown","call":"request","data":{}}'
+        );
+        break;
+      case "restart":
         console.log("Restarting...");
         this.props.socket.send('{"type":"restart","call":"request","data":{}}');
+        break;
+      case "home":
+        console.log("Homing...");
+        this.props.socket.send('{"type":"home","call":"request","data":{}}');
+        break;
+      default:
+        console.log("Invalid action");
+        break;
+    }
+  };
+
+  openModal = (modal, action) => {
+    this.setState({ [modal]: true }, () => {
+      setTimeout(() => this.setState({ modalOpacity: 1 }), 100);
+    });
+    this.setState({ action });
+  };
+
+  closeModal = (modal) => {
+    this.setState({ modalOpacity: 0 }, () => {
+      setTimeout(() => this.setState({ [modal]: false }), 300);
+    });
+  };
+
+  performActionCloseModal = () => {
+    console.log("Performing action: " + this.state.action);
+    this.quickActionPerform(this.state.action);
+    this.closeModal("modalOpen_quickAction");
+  };
+
+  sendObject = () => {
+    const object = document.getElementById("sendobject").value;
+    console.log("Sending object: " + object);
+    this.props.socket.send
+      ? this.props.socket.send(object)
+      : console.log("No socket connection");
   };
 
   render() {
+    const { modalOpen_quickAction, modalOpacity } = this.state;
+
+    const modalStyle = {
+      content: {
+        opacity: modalOpacity,
+        transition: "opacity 300ms ease-in-out",
+        top: "50%",
+        left: "50%",
+        right: "auto",
+        bottom: "auto",
+        marginRight: "-50%",
+        width: "auto",
+        height: "auto",
+        transform: "translate(-50%, -50%)",
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: "20px",
+        background:
+          "linear-gradient(-30deg, rgb(187, 194, 236) 0%, rgba(255, 255, 255, 1) 100%)",
+        boxShadow: "0 0 20px rgba(0, 0, 0, 0.5)",
+        minWidth: "30%",
+        minHeight: "30%",
+      },
+      overlay: {
+        opacity: modalOpacity,
+        transition: "opacity 300ms ease-in-out",
+        backgroundColor: "rgba(255, 255, 255, 0.15)",
+        backdropFilter: "blur(5px)",
+      },
+    };
+
     return (
       <div className="settings">
         <div className="settings-image">
@@ -21,88 +116,227 @@ export default class SettingsComponent extends Component {
         </div>
         <div className="settings-fieldContainer">
           <h1 className="settings-title">⚙️ Settings</h1>
-          <div className="settings-powerContainer">
+          <div className="settings-grid">
+            <h2>⚡Quick Actions:</h2>
+            <div className="settings-gridInner">
               <div
-              className="settings-powerButton"
-              onClick={() => this.shutdownPower()}
+                className="settings-button"
+                onClick={() => this.quickAction("shutdown", true)}
               >
                 <span>🔴 Power Off</span>
               </div>
               <div
-              className="settings-powerButton"
-              onClick={() => this.restartPower()}
+                className="settings-button"
+                onClick={() => this.quickAction("restart", false)}
               >
-              <span>🟨 Restart</span>
+                <span>🟠 Restart</span>
               </div>
-          </div>
-          <div className="settings-creditsContainer">
-            <div className="settings-credits">
-              <h2 className="settings-credits-title">Credits:</h2>
-              <div className="entry">
-                <span className="entry-name">Cole Deck,</span>
-                <span className="entry-position">Project Lead,</span>
-                <a className="entry-links" href="https://deck.sh">
-                  https://deck.sh
-                </a>
-              </div>
-              <div className="entry">
-                <span className="entry-name">Natorion Johnson,</span>
-                <span className="entry-position">Lead PCB assembler,</span>
-                <a
-                  className="entry-links"
-                  href="https://linkedin.com/in/NatorionJ"
+              <div
+                className="settings-button"
+                onClick={() => this.quickAction("home", false)}
               >
-                  https://linkedin.com/in/NatorionJ
-                </a>
+                <span>🏠 Home Arm</span>
               </div>
-              <div className="entry">
-                <span className="entry-name">Fannie,</span>
-                <span className="entry-position">
-                  CAD Design, Fabrication Planner
-                </span>
-                <a
-                  className="entry-links"
-                  href="https://linkedin.com/in/fannieyu"
+            </div>
+          </div>
+          <div className="settings-grid">
+            <h2>💻Send Object:</h2>
+            <div className="settings-gridInner">
+              <form className="settings-form">
+                <input
+                  id="sendobject"
+                  type="text"
+                  name="sendobject"
+                  placeholder={`{"type":"cable_map","call":"request","data":{}}`}
+                />
+                <div
+                  className="settings-button"
+                  id="sendobjectButton"
+                  onClick={() => this.sendObject()}
                 >
-                  https://linkedin.com/in/fannieyu
-                </a>
+                  <span>Send</span>
                 </div>
-              <div className="entry">
-                <span className="entry-name">Elias Frey Reschly,</span>
-                <span className="entry-position">
-                  Mechanical Design, Fabrication
-                </span>
-                <div className="entry-links"></div>
+              </form>
             </div>
-              <div className="entry">
-                <span className="entry-name">Scarlett Deck,</span>
-                <span className="entry-position">
-                  Front-End Dev, UI/UX Designer,
-                </span>
-                <a className="entry-links" href="https://kadan.live">
-                  https://kadan.live
-                </a>
           </div>
+          <div className="settings-grid">
+            <h2>⚒️Credits:</h2>
+            <div id="creditsgrid" className="settings-gridInner">
               <div className="entry">
-                <span className="entry-name">Lucas Ferguson,</span>
-                <span className="entry-position">Front-End Dev,</span>
-                <a
-                  className="entry-links"
-                  href="https://lucasferguson.webflow.io"
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_cole.jpg")}
+                    alt="Cole Deck"
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_cole.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Cole Deck</h2>
+                  <h3>Project Lead</h3>
+                </div>
+              </div>
+
+              <div className="entry">
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_scarlett.jpg")}
+                    alt="Scarlett Kadan"
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_scarlett.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Scarlett Kadan</h2>
+                  <h3>Lead Front-End Dev, UI/UX Designer</h3>
+                </div>
+              </div>
+
+              <div className="entry">
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_natorion.jpg")}
+                    alt="Natorion Johnson"
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_natorion.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Natorion Johnson</h2>
+                  <h3>Lead PCB assembler</h3>
+                </div>
+              </div>
+
+              <div className="entry">
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_fannie.jpeg")}
+                    alt="Fannie Yu"
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_fannie.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Fannie Yu</h2>
+                  <h3>CAD Design, Fabrication Planner</h3>
+                </div>
+              </div>
+
+              <div className="entry">
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_elias.jpg")}
+                    alt="Elias Reschly"
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_elias.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Elias Reschly</h2>
+                  <h3>Mechanical Design, Fabrication</h3>
+                </div>
+              </div>
+
+              <div className="entry">
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_lucas.jpg")}
+                    alt="Lucas Ferguson"
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_lucas.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Lucas Ferguson</h2>
+                  <h3>Front-End Dev</h3>
+                </div>
+              </div>
+
+              <div className="entry">
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_dustin.jpg")}
+                    alt=""
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_dustin.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Dustin Thomas</h2>
+                  <h3>Back-End Dev</h3>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <Modal
+          isOpen={modalOpen_quickAction}
+          contentLabel="show"
+          onRequestClose={() => this.closeModal("modalOpen_quickAction")}
+          style={modalStyle}
         >
-                  https://lucasferguson.webflow.io
-                </a>
-              </div>
-              <div className="entry">
-                <span className="entry-name">Dustin Thomas,</span>
-                <span className="entry-position">Back-End Dev,</span>
-                <a className="entry-links" href="https://cptlobster.dev">
-                  https://cptlobster.dev
-                </a>
+          <div className="modal-container">
+            <div className="modal-title">
+              <span>⚠️</span>
+              <span>Warning</span>
             </div>
+            <div className="modal-body">
+              <span>Are you sure you want to perform this quick action?</span>
+            </div>
+            <div className="modal-tray">
+              <div
+                className="modal-return"
+                onClick={() =>
+                  this.performActionCloseModal("modalOpen_quickAction")
+                }
+              >
+                <span>Continue</span>
+              </div>
+              <div
+                className="modal-return"
+                onClick={() => this.closeModal("modalOpen_quickAction")}
+              >
+                <span>Cancel</span>
               </div>
             </div>
           </div>
+        </Modal>
       </div>
     );
   }

src/routes/StatisticsRoute.js

@@ -13,7 +13,7 @@ export default class StatisticsRoute extends Component {
     return (
       <div className="container">
         <NavBar socket={this.props.socket} />
-        <StatisticsComponent socketHandler={this.props.socket} />
+        <StatisticsComponent socket={this.props.socket} />
       </div>
     );
   }

src/utils/Cable.js

@@ -1,5 +1,6 @@
 import React from "react";
 import DefaultPartImg from "../assets/images/part.png";
+import DefaultQRImg from "../assets/images/default_qr.png";
 import { NavLink } from "react-router-dom";
 import "../assets/stylesheets/browse.scss";
 
@@ -15,7 +16,8 @@ export default class cable {
     short_description,
     image,
     category,
-    application
+    application,
+    qrcode
   ) {
     this.part_number = part_number;
     this.position = position;
@@ -28,6 +30,8 @@ export default class cable {
     this.short_description = short_description;
     this.description = description;
 
+    this.qrcode = qrcode ? `http://${hostname}${qrcode}` : DefaultQRImg;
+
     if (short_description === undefined) {
       if (this.description !== undefined) {
         this.short_description = this.description;