fixed statistics

package-lock.json

@@ -13,6 +13,7 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-modal": "^3.16.1",
         "react-router-dom": "^6.22.3",
         "react-scripts": "^5.0.1",
         "sass": "^1.70.0",
@@ -8026,6 +8027,11 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "node_modules/exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -14699,6 +14705,29 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "node_modules/react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "dependencies": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -17467,6 +17496,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1",
     "react-router-dom": "^6.22.3",
     "react-scripts": "^5.0.1",
     "sass": "^1.70.0",

src/assets/stylesheets/browse.scss

@@ -50,9 +50,22 @@ $white: #fff;
   margin-bottom: 50px;
 }
 
+.browse-title {
+  width: 80%;
+  height: auto;
+  font-size: 32px;
+  font-weight: bold;
+  color: $white;
+  font-family: "Gotham Medium";
+  margin: 10px;
+  background-color: transparent;
+  margin-bottom: 20px;
+  text-align: left;
+}
+
 .browse-cable {
   width: 80%;
-  height: 100px;
+  height: 150px;
   background: linear-gradient(
     -30deg,
     rgb(187, 208, 236) 0%,
@@ -64,7 +77,6 @@ $white: #fff;
   flex-direction: row;
   border-radius: 20px;
   border: 1px solid $gray;
-  padding: 25px;
   margin-bottom: 5px;
   margin-top: 5px;
   transition: all 0.3s ease-in-out;
@@ -80,8 +92,9 @@ $white: #fff;
 
 .browse-cable-image {
   width: auto;
-  height: 100%;
+  height: 75%;
   margin-right: 25px;
+  margin-left: 20px;
   background-color: transparent;
   border: $gray solid 1px;
   border-radius: 10px;
@@ -98,6 +111,7 @@ $white: #fff;
   width: auto;
   height: auto;
   font-size: 35px;
+  margin-right: 20px;
   transform: scaleY(2);
   font-family: "Gotham Book";
   color: $medium-blue;
@@ -126,9 +140,11 @@ $white: #fff;
 
 .browse-cable-brand,
 .browse-cable-short,
-.browse-cable-position {
+.browse-cable-position,
+.browse-cable-category {
   background-color: transparent;
-  font-size: 16px;
+  font-size: 15px;
+  margin-bottom: 2px;
   color: $light-blue;
   color: $light-blue;
   width: auto;

src/assets/stylesheets/cabledetail.scss

@@ -182,7 +182,8 @@ $white: #fff;
 
 .cable-main-brand,
 .cable-main-short,
-.cable-main-position {
+.cable-main-position,
+.cable-main-category {
   background-color: transparent;
   font-size: 16px;
   color: $light-blue;
@@ -287,3 +288,68 @@ th:first-child {
   margin-top: 15px;
   padding-left: 10px;
 }
+
+.modal-container {
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.modal-title,
+.modal-body,
+.modal-close {
+  width: auto;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  flex-direction: column;
+}
+
+.modal-title span {
+  width: auto;
+  height: auto;
+  font-family: "Gotham Bold";
+  font-size: 32px;
+  color: $dark-blue;
+  background-color: transparent;
+  margin-bottom: 5px;
+}
+
+.modal-body span {
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  font-family: "Gotham Medium";
+  font-size: 18px;
+  color: $medium-blue;
+  margin-top: 10px;
+  margin-bottom: 30px;
+}
+
+.modal-close span {
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  font-family: "Gotham Medium";
+  font-size: 18px;
+  color: $dark-blue;
+}
+
+.modal-close {
+  cursor: pointer;
+  padding: 15px 35px 15px 35px;
+  border-radius: 20px;
+  background-color: $gray;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  transition: all 0.3s ease-in-out;
+}
+
+.modal-close:hover {
+  background-color: $hover-blue;
+}

src/assets/stylesheets/map.scss

@@ -45,7 +45,107 @@ $white: #fff;
   align-items: center;
   justify-content: flex-start;
   flex-direction: column;
-  overflow: hidden;
+  overflow: visible;
   background-color: transparent;
-  margin-bottom: 50px;
+}
+
+.map-title {
+  width: 80%;
+  height: auto;
+  font-size: 32px;
+  font-weight: bold;
+  color: $white;
+  font-family: "Gotham Medium";
+  margin: 10px;
+  background-color: transparent;
+  margin-bottom: 25px;
+}
+
+.map-boxContainer {
+  width: 80%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  background-color: transparent;
+  overflow: visible;
+}
+
+.map-box, .map-details {
+  height: 600px;
+  background: linear-gradient(
+    -30deg,
+    rgb(187, 208, 236) 0%,
+    rgba(255, 255, 255, 1) 100%
+  );
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  border-radius: 20px;
+  border: 1px solid $gray;
+  transition: all 0.3s ease-in-out;
+  text-decoration: none;
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  overflow: visible;
+}
+
+.map-box {
+  width: 60%;
+}
+
+.map-details {
+  width: 38%;
+}
+
+.map-box-row {
+  width: 100%;
+  height: 60px;
+  background-color: transparent;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+
+  overflow: visible;
+}
+
+.map-box-circle, .map-box-spacer {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: $white;
+  margin-left: 3px;
+  margin-right: 3px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease-in-out;
+}
+
+.map-box-circle {
+  filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15));
+  cursor: pointer;
+}
+
+.map-box-circle:hover, .map-box:hover, .map-details:hover {
+  transform: translate3d(-5px, -5px, 0);
+}
+
+.map-box-spacer {
+  background-color: transparent;
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0);
+  border: 1px solid transparent;
+}
+
+.map-box-circle-inner {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

src/assets/stylesheets/statistics.scss

@@ -0,0 +1,154 @@
+$dark-blue: #002554;
+$medium-blue: #004990;
+$light-blue: #007cbe;
+$hover-blue: #25b3ff;
+$black: #000;
+$gray: #bdbdbd;
+$white: #fff;
+
+.statistics {
+  background: linear-gradient(
+    180deg,
+    rgb(0 37 84 / 100%) 0%,
+    rgb(0 124 190 / 100%) 50%,
+    rgb(255, 255, 255) 100%
+  );
+  background-color: transparent;
+  overflow-y: visible;
+  width: calc(100% - 300px);
+  height: auto;
+  display: block;
+  justify-content: center;
+  align-items: center;
+}
+
+.statistics-image {
+  width: 100%;
+  height: 200px;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.statistics-image img {
+  width: auto;
+  height: 200px;
+  background-color: transparent;
+}
+
+.statistics-fieldContainer {
+  width: 100%;
+  min-height: calc(100% - 200px);
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: transparent;
+  margin-bottom: 50px;
+}
+
+.statistics-title {
+  width: 80%;
+  height: auto;
+  font-size: 32px;
+  font-weight: bold;
+  color: $white;
+  font-family: "Gotham Medium";
+  margin: 10px;
+  background-color: transparent;
+  margin-bottom: 20px;
+}
+
+.statistics-grid {
+  width: 80%;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  background-color: transparent;
+  overflow: visible;
+  // add row gap
+  gap: 20px;
+}
+
+.statistics-grid-container {
+  width: 32%;
+  height: 300px;
+  background: linear-gradient(
+    -30deg,
+    rgb(187, 208, 236) 0%,
+    rgba(255, 255, 255, 1) 100%
+  );
+  margin-top: 5px;
+
+  display: flex; /* Center the content */
+  align-items: center; /* Center vertically */
+  justify-content: center; /* Center horizontally */
+
+  border-radius: 20px;
+  border: 1px solid $gray;
+  transition: all 0.3s ease-in-out;
+  text-decoration: none;
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  cursor: pointer;
+  overflow: visible;
+}
+
+.statistics-grid-container:hover {
+  transform: translate3d(-5px, -5px, 0);
+}
+
+
+.statistics-iframe {
+  width: 95%; /* Ensure iframes take up full width of their grid cell */
+  height: 95%; /* Adjust the height of iframes */
+  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/assets/stylesheets/summary.scss

@@ -2,6 +2,10 @@ $dark-blue: #002554;
 $medium-blue: #004990;
 $light-blue: #007cbe;
 $hover-blue: #25b3ff;
+$black: #000;
+$gray: #bdbdbd;
+$white: #fff;
+
 .summary {
   background: linear-gradient(
     180deg,
@@ -34,16 +38,6 @@ $hover-blue: #25b3ff;
 }
 
 .summary-fieldContainer {
-  // width: 100%;
-  // min-height: calc(100% - 250px);
-  // height: auto;
-  // background-color: transparent;
-  // display: flex;
-  // align-items: flex-start;
-  // justify-content: center;
-  // flex-wrap: wrap;
-
-  // below is taken from browse.scss
   width: 100%;
   min-height: calc(100% - 200px);
   height: auto;
@@ -56,27 +50,69 @@ $hover-blue: #25b3ff;
   margin-bottom: 50px;
 }
 
-
+.summary-title {
-.summary-grid {
+  width: 80%;
-  width: 100%;
+  height: auto;
-  display: grid;
+  font-size: 32px;
-  grid-template-columns: repeat(2, 1fr); /* 2 columns */
+  font-weight: bold;
-  grid-gap: 10px; /* Adjust the gap between iframes */
+  color: $white;
-  grid-row-gap: 5px; /* Adjust the gap between rows */
+  font-family: "Gotham Medium";
-
+  margin: 10px;
-  
+  background-color: transparent;
-  // Debug Borders
+  margin-bottom: 20px;
-      border-width: 5px;
-      border-style: solid;
 }
 
+.summary-grid {
+  width: 80%;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  background-color: transparent;
+  overflow: visible;
+  // add row gap
+  gap: 20px;
+}
+
+.summary-grid-container {
+  width: 32%;
+  height: 300px;
+  background: linear-gradient(
+    -30deg,
+    rgb(187, 208, 236) 0%,
+    rgba(255, 255, 255, 1) 100%
+  );
+  margin-top: 5px;
+
+  display: flex; /* Center the content */
+  align-items: center; /* Center vertically */
+  justify-content: center; /* Center horizontally */
+
+  border-radius: 20px;
+  border: 1px solid $gray;
+  transition: all 0.3s ease-in-out;
+  text-decoration: none;
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  cursor: pointer;
+  overflow: visible;
+}
+
+.summary-grid-container:hover {
+  transform: translate3d(-5px, -5px, 0);
+}
+
+
 .summary-iframe {
-  width: 100%; /* Ensure iframes take up full width of their grid cell */
+  width: 95%; /* Ensure iframes take up full width of their grid cell */
-  height: 300px; /* Adjust the height of iframes */
+  height: 95%; /* Adjust the height of iframes */
+  border-radius: 20px;
+
 
   // Debug Borders
-      border-width: 5px;
+      // border-width: 5px;
-      border-style: solid;
+      // border-style: solid;
 }
 
 // .summary-iframe {
@@ -96,9 +132,18 @@ $hover-blue: #25b3ff;
 //   padding: 10px;
 // }
 
-.summary-fieldContainer-graph {
+// .summary-fieldContainer-graph {
-  width: 25%;
+//   width: 25%;
-}
+// }
+
+
+// .summary-dashboard {
+//   width: 100%;
+//   height: 900px;
+//   border-radius: 20px;
+//   text-align: center;
+//   padding: 10px;
+// }
 
 // .summary-fieldContainer-dashboard {
 //   width: 100%;

src/components/BrowseComponent.js

@@ -12,20 +12,37 @@ class cable {
     brand,
     description,
     short_description,
-    image
+    image,
+    category,
+    application
   ) {
     this.part_number = part_number;
     this.position = position;
     this.name = name;
     this.brand = brand;
-    this.description = description;
-    this.short_description = short_description
-      ? short_description
-      : description;
     this.image = image ? `http://localhost${image}` : DefaultPartImg;
 
-    if (this.short_description != undefined) {
+    this.category = category;
-      this.short_description = this.short_description.charAt(0).toUpperCase() + this.short_description.slice(1);
+    this.application = application;
+    this.short_description = short_description;
+    this.description = description;
+
+    if (short_description === undefined) {
+      if (this.description !== undefined) {
+        this.short_description = this.description;
+      } else if (this.application !== undefined) {
+        this.short_description = this.application;
+      } else if (this.category !== undefined) {
+        this.short_description = this.category;
+      } else {
+        this.short_description = "";
+      }
+    }
+
+    if (this.short_description !== undefined) {
+      this.short_description =
+        this.short_description.charAt(0).toUpperCase() +
+        this.short_description.slice(1);
       if (this.short_description.length > 100) {
         this.short_description =
           this.short_description.substring(0, 80) + "...";
@@ -43,6 +60,14 @@ class cable {
             <span style={{ color: "#007cbe" }}></span>
             {this.short_description}
           </div>
+          {this.category ? (
+            <div className="browse-cable-category">
+              <span style={{ color: "black", backgroundColor: "transparent" }}>
+                Category:{" "}
+              </span>
+              {this.category}
+            </div>
+          ) : null}
           <div className="browse-cable-brand">
             <span style={{ color: "black", backgroundColor: "transparent" }}>
               Brand:{" "}
@@ -97,6 +122,8 @@ export default class BrowseComponent extends Component {
       let brand = map[i].brand;
       let description = map[i].description;
       let short_description = map[i].short_description;
+      let category = map[i].category;
+      let application = map[i].application;
       cableList.push(
         new cable(
           part_number,
@@ -105,7 +132,9 @@ export default class BrowseComponent extends Component {
           brand,
           description,
           short_description,
-          image
+          image,
+          category,
+          application
         )
       );
     }
@@ -123,6 +152,7 @@ export default class BrowseComponent extends Component {
           <img src={BeldenLogo} alt="Belden" />
         </div>
         <div className="browse-fieldContainer">
+          <h1 className="browse-title">Browse</h1>
           {this.state.cableList.map((cableObj, index) => (
             <React.Fragment key={index}>{cableObj.returnDiv()}</React.Fragment>
           ))}

src/components/CableDetailComponent.js

@@ -2,17 +2,17 @@ import React, { Component } from "react";
 import BeldenLogo from "../assets/images/belden-white.png";
 import DefaultPartImg from "../assets/images/part.png";
 import { NavLink } from "react-router-dom";
+import Modal from "react-modal";
 import "../assets/stylesheets/cabledetail.scss";
 
+Modal.setAppElement("#root");
+
 class Cable {
   constructor(cableData) {
     this.partnum = cableData.partnum;
     this.id = cableData.id;
     this.brand = cableData.brand;
     this.position = cableData.position;
-    this.description = cableData.description
-      ? cableData.image
-      : "No description available.";
     this.image = cableData.image
       ? `http://localhost${cableData.image}`
       : DefaultPartImg;
@@ -20,6 +20,30 @@ class Cable {
     this.horizontal = [];
     this.vertical = [];
     this.orderedKeys = [];
+    this.description = cableData.description;
+    this.short_description = cableData.short_description;
+    this.application = cableData.application;
+    this.category = cableData.category;
+
+    if (this.description === undefined) {
+      if (this.short_description !== undefined) {
+        this.description = this.short_description;
+      } else if (this.application !== undefined) {
+        this.description = this.application;
+      } else if (this.category !== undefined) {
+        this.description = this.category;
+      } else {
+        this.description = "";
+      }
+    }
+
+    if (this.description !== undefined) {
+      this.description =
+        this.description.charAt(0).toUpperCase() + this.description.slice(1);
+      if (this.description.length > 200) {
+        this.description = this.description.substring(0, 200) + "...";
+      }
+    }
 
     Object.keys(cableData).forEach((key) => {
       if (
@@ -79,9 +103,33 @@ export default class CableDetailComponent extends Component {
     super(props);
     this.state = {
       cableDetails: null,
+      modalOpen_dispense: false,
+      modalOpen_show: false,
+      modalOpen_datasheet: false,
+      modalOpacity: 0,
     };
+    this.openModal = this.openModal.bind(this);
+    this.closeModal = this.closeModal.bind(this);
   }
 
+  openModal = (modal) => {
+    this.setState({ [modal]: true }, () => {
+      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") {
+      this.props.socket.send(`{"type": "cable_get","call": "request","data": {"position": ${this.state.cableDetails.position}}}`);
+    }
+  };
+
+  closeModal = (modal) => {
+    this.setState({ modalOpacity: 0 }, () => {
+      setTimeout(() => this.setState({ [modal]: false }), 300);
+    });
+  };
+
   componentDidMount() {
     const cablePos = window.location.href.split("/").pop();
     this.props.socket.send(
@@ -114,14 +162,16 @@ export default class CableDetailComponent extends Component {
       return <div>Error loading data...</div>;
     }
 
-    const keys = Object.keys(data);
+    const validKeys = Object.keys(data).filter((key) =>
-    const maxRows = Math.max(...keys.map((key) => data[key].length));
+      Array.isArray(data[key])
+    );
+
+    const maxRows = Math.max(...validKeys.map((key) => data[key].length));
 
     const rows = Array.from({ length: maxRows }).map((_, rowIndex) => {
-
       return (
         <tr className="row" key={rowIndex}>
-          {keys.map((key, index) => (
+          {validKeys.map((key, index) => (
             <td className="body" key={index}>
               {data[key][rowIndex] || ""}
             </td>
@@ -136,7 +186,7 @@ export default class CableDetailComponent extends Component {
         <table>
           <thead className="thead">
             <tr className="row">
-              {keys.map((key, index) => (
+              {validKeys.map((key, index) => (
                 <th className="head" key={index}>
                   {key}
                 </th>
@@ -174,7 +224,42 @@ export default class CableDetailComponent extends Component {
   }
 
   render() {
-    const { cableDetails } = this.state;
+    const {
+      modalOpen_dispense,
+      modalOpen_show,
+      modalOpen_datasheet,
+      modalOpacity,
+      cableDetails,
+    } = this.state;
+    const modalStyle = {
+      content: {
+        opacity: modalOpacity,
+        transition: "opacity 300ms ease-in-out",
+        top: "50%",
+        left: "50%",
+        right: "auto",
+        bottom: "auto",
+        marginRight: "-50%",
+        width: "30%",
+        height: "30%",
+        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)",
+      },
+      overlay: {
+        opacity: modalOpacity,
+        transition: "opacity 300ms ease-in-out",
+        backgroundColor: "rgba(255, 255, 255, 0.15)",
+        backdropFilter: "blur(5px)",
+      },
+    };
 
     return (
       <div className="cable">
@@ -199,6 +284,18 @@ export default class CableDetailComponent extends Component {
                 <div className="cable-main-description">
                   {cableDetails.description}
                 </div>
+
+                {cableDetails.category ? (
+                  <div className="cable-main-category">
+                    <span
+                      style={{ color: "black", backgroundColor: "transparent" }}
+                    >
+                      Category:{" "}
+                    </span>
+                    {cableDetails.category}
+                  </div>
+                ) : null}
+
                 <div className="cable-main-brand">
                   <span
                     style={{ color: "black", backgroundColor: "transparent" }}
@@ -221,35 +318,97 @@ export default class CableDetailComponent extends Component {
             <div className="cable-main"></div>
           )}
           <div className="cable-actions">
-            <div className="cable-actions-button">
+            <div
+              className="cable-actions-button"
+              onClick={() => this.openModal("modalOpen_datasheet")}
+            >
               <span>➤ Datasheet</span>
               <span>✏️</span>
             </div>
-            <div className="cable-actions-button">
+            <Modal
+              isOpen={modalOpen_datasheet}
+              onRequestClose={() => this.closeModal("modalOpen_datasheet")}
+              contentLabel="show"
+              style={modalStyle}
+            >
+              <div className="modal-container">
+                <div className="modal-title">
+                  <span>✏️</span>
+                  <span>Datasheet</span>
+                </div>
+                <div className="modal-body">
+                  <span>Datasheet coming soon...</span>
+                </div>
+                <div
+                  className="modal-close"
+                  onClick={() => this.closeModal("modalOpen_datasheet")}
+                >
+                  <span>Close</span>
+                </div>
+              </div>
+            </Modal>
+            <div
+              className="cable-actions-button"
+              onClick={() => this.openModal("modalOpen_show")}
+            >
               <span>➤ Show</span>
               <span>💡</span>
             </div>
-            <div className="cable-actions-button">
+            <Modal
+              isOpen={modalOpen_show}
+              onRequestClose={() => this.closeModal("modalOpen_show")}
+              contentLabel="show"
+              style={modalStyle}
+            >
+              <div className="modal-container">
+                <div className="modal-title">
+                  <span>💡</span>
+                  <span>Showing Item</span>
+                </div>
+                <div className="modal-body">
+                  <span>The item will now be illuminated.</span>
+                </div>
+                <div
+                  className="modal-close"
+                  onClick={() => this.closeModal("modalOpen_show")}
+                >
+                  <span>Close</span>
+                </div>
+              </div>
+            </Modal>
+            <div
+              className="cable-actions-button"
+              onClick={() => this.openModal("modalOpen_dispense")}
+            >
               <span>➤ Dispense</span>
-              <span>🤲</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 ? (
             <div className="cable-tables">
-              {/* {Object.entries(cableDetails.dynamicProps).map(
-                ([key, value], index) => {
-                  if (cableDetails.horizontal.includes(key)) {
-                    return this.renderHorizontalTable(
-                      key,
-                      JSON.stringify(value)
-                    );
-                  } else {
-                    return this.renderVerticalTable(key, JSON.stringify(value));
-                  }
-                }
-              )} */}
-
               {cableDetails.orderedKeys.map((key, index) => {
                 if (cableDetails.horizontal.includes(key)) {
                   return this.renderHorizontalTable(

src/components/MapComponent.js

@@ -3,6 +3,17 @@ import BeldenLogo from "../assets/images/belden-white.png";
 import "../assets/stylesheets/map.scss";
 
 export default class MapComponent extends Component {
+  renderCircle(id, color) {
+    return (
+      <div className="map-box-circle" id={id}>
+        <div
+          className="map-box-circle-inner"
+          style={{ border: `${color} 4px solid` }}
+        ></div>
+      </div>
+    );
+  }
+
   render() {
     return (
       <div className="map">
@@ -10,6 +21,91 @@ export default class MapComponent extends Component {
           <img src={BeldenLogo} alt="Belden" />
         </div>
         <div className="map-fieldContainer">
+          <h1 className="map-title">Map</h1>
+          <div className="map-boxContainer">
+            <div className="map-box">
+              <div className="map-box-row" id="row-1">
+                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("circle-5", "#004990")}
+              </div>
+              <div className="map-box-row" id="row-2">
+                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("circle-6", "#004990")}
+              </div>
+              <div className="map-box-row" id="row-3">
+                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("circle-6", "#004990")}
+                {this.renderCircle("circle-7", "#004990")}
+              </div>
+              <div className="map-box-row" id="row-4">
+                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("circle-3", "#004990")}
+                <div className="map-box-spacer"></div>
+                <div className="map-box-spacer"></div>
+                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("circle-6", "#004990")}
+              </div>
+              <div className="map-box-row" id="row-5">
+                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("circle-3", "#004990")}
+                <div className="map-box-spacer"></div>
+                <div className="map-box-spacer"></div>
+                <div className="map-box-spacer"></div>
+                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("circle-6", "#004990")}
+              </div>
+              <div className="map-box-row" id="row-6">
+                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("circle-3", "#004990")}
+                <div className="map-box-spacer"></div>
+                <div className="map-box-spacer"></div>
+                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("circle-6", "#004990")}
+              </div>
+              <div className="map-box-row" id="row-7">
+                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("circle-6", "#004990")}
+                {this.renderCircle("circle-7", "#004990")}
+              </div>
+              <div className="map-box-row" id="row-8">
+                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("circle-6", "#004990")}
+              </div>
+              <div className="map-box-row" id="row-9">
+                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("circle-5", "#004990")}
+              </div>
+            </div>
+            <div className="map-details"></div>
+          </div>
         </div>
       </div>
     );

src/components/NavBar.js

@@ -17,6 +17,9 @@ 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("statistics")) {
+      document.getElementById("statistics").style.backgroundColor = "#007CBE";
+      document.getElementById("statistics-s").style.color = "white";
     } else {
       document.getElementById("home").style.backgroundColor = "#007CBE";
       document.getElementById("home-s").style.color = "white";
@@ -50,6 +53,9 @@ export default class NavBar extends Component {
             <NavLink className="navbar-list-item" id="map" to="/map">
               <span id="map-s">🗺️ Map</span>
             </NavLink>
+            <NavLink className="navbar-list-item" id="statistics" to="/statistics">
+              <span id="statistics-s">📊 Statistics</span>
+            </NavLink>
             <NavLink className="navbar-list-item" id="settings" to="/settings">
               <span id="settings-s">⚙️ Settings</span>
             </NavLink>

src/components/StatisticsComponent.js

@@ -0,0 +1,38 @@
+import React, { Component } from "react";
+import BeldenLogo from "../assets/images/belden-white.png";
+import "../assets/stylesheets/statistics.scss";
+
+export default class StatisticsComponent extends Component {
+  render() {
+    return (
+      <div className="statistics">
+        <div className="statistics-image">
+          <img src={BeldenLogo} alt="Belden" />
+        </div>
+        <div className="statistics-fieldContainer">
+          <h1 className="statistics-title">Statistics</h1>
+          <div className="statistics-grid">
+            <div className="statistics-grid-container">
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8" title="Belden" className="statistics-iframe" />
+            </div>
+            <div className="statistics-grid-container">
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=3" title="Belden" className="statistics-iframe" />
+            </div>
+            <div className="statistics-grid-container">
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" title="Belden" className="statistics-iframe" />
+            </div>
+            <div className="statistics-grid-container">
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=6" title="Belden" className="statistics-iframe" />
+            </div>
+            <div className="statistics-grid-container">
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=4" title="Belden" className="statistics-iframe" />
+            </div>
+            <div className="statistics-grid-container">
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=2" title="Belden" className="statistics-iframe" />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/components/SummaryComponent.js

@@ -6,39 +6,33 @@ export default class SummaryComponent extends Component {
   render() {
     return (
       <div className="summary">
-        <img className="summary-image" src={BeldenLogo} alt="Belden" />
+        <div className="summary-image">
+          <img src={BeldenLogo} alt="Belden" />
+        </div>
         <div className="summary-fieldContainer">
+          <h1 className="summary-title">Summary</h1>
           <div className="summary-grid">
-            {/* <div className="summary-iframe"> */}
+            <div className="summary-grid-container">
-            <iframe
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8" title="Belden" className="summary-iframe" />
-              className="summary-iframe"
+            </div>
-              src="=http://192.168.1.12:3000/d/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&viewPanel=9"
+            <div className="summary-grid-container">
-              // width="400"
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=3" title="Belden" className="summary-iframe" />
-              // height="300"
+            </div>
-              frameborder="0"
+            <div className="summary-grid-container">
-            ></iframe>
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" title="Belden" className="summary-iframe" />
-            <iframe
+            </div>
-              className="summary-iframe"
+            <div className="summary-grid-container">
-              src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=6" title="Belden" className="summary-iframe" />
-              // width="400"
+            </div>
-              // height="300"
+            <div className="summary-grid-container">
-              frameborder="0"
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=4" title="Belden" className="summary-iframe" />
-            ></iframe>
+            </div>
-            <iframe
+            <div className="summary-grid-container">
-              className="summary-iframe"
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=2" title="Belden" className="summary-iframe" />
-              src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
+            </div>
-              frameborder="0"
-            ></iframe>
-            <iframe
-              className="summary-iframe"
-              src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
-              frameborder="0"
-            ></iframe>
-            {/* </div> */}
-            {/* <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" width="450" height="200" frameborder="0"></iframe> */}
           </div>
         </div>
       </div>
     );
   }
-}
+}

src/index.js

@@ -5,6 +5,7 @@ import SummaryRoute from "./routes/SummaryRoute";
 import BrowseRoute from "./routes/BrowseRoute";
 import SettingsRoute from "./routes/SettingsRoute";
 import MapRoute from "./routes/MapRoute";
+import StatisticsRoute from "./routes/StatisticsRoute";
 import CableDetailRoute from "./routes/CableDetailRoute";
 
 // Root
@@ -43,6 +44,11 @@ const init = () => {
       element: <MapRoute socket={socket}></MapRoute>,
       // errorElement: <ErrorRoute></ErrorRoute>,
     },
+    {
+      path: "/statistics",
+      element: <StatisticsRoute socket={socket}></StatisticsRoute>,
+      // errorElement: <ErrorRoute></ErrorRoute>,
+    },
     {
       path: "/browse/cable/:cablePos",
       element: <CableDetailRoute socket={socket} />,

src/routes/StatisticsRoute.js

@@ -0,0 +1,20 @@
+import React, { Component } from "react";
+import NavBar from "../components/NavBar";
+import StatisticsComponent from "../components/StatisticsComponent";
+import "../assets/stylesheets/app.scss";
+
+export default class StatisticsRoute extends Component {
+  constructor(props) {
+    super(props);
+    document.title = "Statistics";
+  }
+
+  render() {
+    return (
+      <div className="container">
+        <NavBar />
+        <StatisticsComponent socketHandler={this.props.socket} />
+      </div>
+    );
+  }
+}