diff --git a/hackathon_site/dashboard/frontend/src/pages/Reports/Reports.js b/hackathon_site/dashboard/frontend/src/pages/Reports/Reports.js
index a09491d4e..945c901c4 100644
--- a/hackathon_site/dashboard/frontend/src/pages/Reports/Reports.js
+++ b/hackathon_site/dashboard/frontend/src/pages/Reports/Reports.js
@@ -1,14 +1,173 @@
import React from "react";
-// import styles from "./Reports.module.scss";
+import styles from "./Reports.module.scss";
import Header from "components/general/Header/Header";
import Typography from "@material-ui/core/Typography";
+// Import Grid for formatting information
+import { Grid } from "@material-ui/core";
+
+// Imports for the Table MUI Component
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import Paper from "@material-ui/core/Paper";
+
+// Note: Created 2 seperate functions for createBrokenEntry and createLostEntry in case unique attributes for each type get added in future.
+function createBrokenEntry(category, qty) {
+ return { category, qty };
+}
+
+function createLostEntry(category, qty) {
+ return { category, qty };
+}
+
+const mockBrokenEntries = [
+ createBrokenEntry("MCU", 1),
+ createBrokenEntry("Boards", 0),
+ createBrokenEntry("Sensors", 2),
+ createBrokenEntry("Actuators", 0),
+ createBrokenEntry("Peripherals", 1),
+ createBrokenEntry("Breadboards", 0),
+ createBrokenEntry("Resistors", 10),
+];
+
+const mockLostEntries = [
+ createLostEntry("MCU", 1),
+ createLostEntry("Boards", 0),
+ createLostEntry("Sensors", 0),
+ createBrokenEntry("Actuators", 0),
+ createBrokenEntry("Peripherals", 1),
+ createBrokenEntry("Breadboards", 0),
+ createBrokenEntry("Resistors", 20),
+];
+
const Reports = () => {
return (
<>
Reports
+
+
+
+ Overview:
+
+
+
+ {MockBrokenTable()}
+
+
+ {MockLostTable()}
+
+
IEEEEEE
+ {/*This line above has been temporarly kept to pass the test in Reports.test.js*/}
+
+ );
+};
+
+const MockBrokenTable = () => {
+ let totalBrokenEntries = 0;
+ let accumulateBroken = (qtyToAdd) => {
+ totalBrokenEntries += qtyToAdd;
+ };
+ return (
+ <>
+
+ Total Broken
+
+
+
+
+
+ Category
+ Qty
+
+
+
+ {mockBrokenEntries.map((row) => (
+
+
+ {row.category}
+
+
+ {row.qty}
+
+ {accumulateBroken(row.qty)}
+
+ ))}
+
+
+ {"Total"}
+
+ {totalBrokenEntries}
+
+
+
+
+
+ );
+};
+
+const MockLostTable = () => {
+ let totalLostEntries = 0;
+ let accumulateLost = (qtyToAdd) => {
+ totalLostEntries += qtyToAdd;
+ };
+ return (
+ <>
+
+ Total Lost
+
+
+
+
+
+ Category
+ Qty
+
+
+
+ {mockLostEntries.map((row) => (
+
+
+ {row.category}
+
+
+ {row.qty}
+
+ {accumulateLost(row.qty)}
+
+ ))}
+
+
+
+ {"Total"}
+
+ {totalLostEntries}
+
+
+
);
};
diff --git a/hackathon_site/dashboard/frontend/src/pages/Reports/Reports.module.scss b/hackathon_site/dashboard/frontend/src/pages/Reports/Reports.module.scss
index e69de29bb..3a50e7a24 100644
--- a/hackathon_site/dashboard/frontend/src/pages/Reports/Reports.module.scss
+++ b/hackathon_site/dashboard/frontend/src/pages/Reports/Reports.module.scss
@@ -0,0 +1,7 @@
+.gridBottomPadding {
+ padding-top: 3%;
+}
+
+.boldedTotalText {
+ font-weight: bold;
+}