From 553156ef7ca4643e158875cb79809defb117e595 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Sat, 2 Dec 2023 18:56:35 +0800
Subject: [PATCH] Polished dashboard and added buttons

---
 src/Components/Header/Header.tsx          |   2 +-
 src/Pages/DashboardPage/DashboardPage.tsx | 236 +++++++++++++++++++++-
 src/styles.tsx                            |   1 +
 3 files changed, 232 insertions(+), 7 deletions(-)

diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
index a8e961f..739477a 100644
--- a/src/Components/Header/Header.tsx
+++ b/src/Components/Header/Header.tsx
@@ -14,7 +14,7 @@ export default function Header(props: props) {
       style={{
         position: "sticky",
         top: 0,
-        zIndex: -1,
+        zIndex: 1,
         backgroundColor: colors.header_color,
         display: "flex",
         flexDirection: "row",
diff --git a/src/Pages/DashboardPage/DashboardPage.tsx b/src/Pages/DashboardPage/DashboardPage.tsx
index 046cfde..0d33072 100644
--- a/src/Pages/DashboardPage/DashboardPage.tsx
+++ b/src/Pages/DashboardPage/DashboardPage.tsx
@@ -2,8 +2,14 @@ import Header from "../../Components/Header/Header";
 import styles from "../../styles";
 import { useQueries } from "@tanstack/react-query";
 import { EquipmentsAPI, EquipmentInstancesAPI } from "../../Components/API/API";
-import { CircularProgress } from "@mui/material";
-
+import { Button, CircularProgress } from "@mui/material";
+import ComputerIcon from "@mui/icons-material/Computer";
+import RouterIcon from "@mui/icons-material/Router";
+import CameraOutdoorIcon from "@mui/icons-material/CameraOutdoor";
+import ChairIcon from "@mui/icons-material/Chair";
+import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
+import AddToQueueIcon from "@mui/icons-material/AddToQueue";
+import { colors } from "../../styles";
 export default function Dashboard() {
   const queries = useQueries({
     queries: [
@@ -18,7 +24,7 @@ export default function Dashboard() {
     ],
   });
   const isLoading = queries.some((result) => result.isLoading);
-  
+
   if (isLoading) {
     return (
       <div style={styles.background}>
@@ -50,7 +56,16 @@ export default function Dashboard() {
     <div style={styles.background}>
       <Header label={"Dashboard"} />
       <div style={styles.flex_column}>
-        <div style={{ ...styles.flex_row, ...{ alignSelf: "center", justifyContent:'center',flexWrap:'wrap' } }}>
+        <div
+          style={{
+            ...styles.flex_row,
+            ...{
+              alignSelf: "center",
+              justifyContent: "center",
+              flexWrap: "wrap",
+            },
+          }}
+        >
           <div
             style={{
               paddingLeft: "16px",
@@ -70,7 +85,7 @@ export default function Dashboard() {
                 ...{ float: "left", position: "absolute" },
               }}
             >
-             Equipment Types in Database
+              Equipment Types in Database
             </p>
 
             <p
@@ -114,7 +129,16 @@ export default function Dashboard() {
             </p>
           </div>
         </div>
-        <div style={{ ...styles.flex_row, ...{ alignSelf: "center",justifyContent:'center', flexWrap:'wrap' } }}>
+        <div
+          style={{
+            ...styles.flex_row,
+            ...{
+              alignSelf: "center",
+              justifyContent: "center",
+              flexWrap: "wrap",
+            },
+          }}
+        >
           <div
             style={{
               paddingLeft: "16px",
@@ -187,6 +211,206 @@ export default function Dashboard() {
           </div>
         </div>
       </div>
+      <p
+        style={{
+          ...styles.text_dark,
+          ...styles.text_L,
+        }}
+      >
+        Equipments
+      </p>
+      <div
+        style={{
+          ...styles.flex_row,
+          ...{
+            alignSelf: "center",
+            justifyContent: "center",
+            flexWrap: "wrap",
+          },
+        }}
+      >
+        <Button
+          style={{
+            ...styles.flex_column,
+            ...{
+              alignSelf: "center",
+              justifyContent: "center",
+              flexWrap: "wrap",
+            },
+          }}
+        >
+          <FormatListBulletedIcon
+            style={{
+              height: 64,
+              width: 64,
+              fill: colors.font_dark,
+              marginLeft: "1rem",
+              marginRight: "1rem",
+            }}
+          />
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_M,
+            }}
+          >
+            View All
+          </p>
+        </Button>
+        <Button
+          style={{
+            ...styles.flex_column,
+            ...{
+              alignSelf: "center",
+              justifyContent: "center",
+              flexWrap: "wrap",
+            },
+          }}
+        >
+          <AddToQueueIcon
+            style={{
+              height: 64,
+              width: 64,
+              fill: colors.font_dark,
+              marginLeft: "1rem",
+              marginRight: "1rem",
+            }}
+          />
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_M,
+            }}
+          >
+            Add Equipment
+          </p>
+        </Button>
+      </div>
+
+      <div
+        style={{
+          ...styles.flex_row,
+          ...{
+            alignSelf: "center",
+            justifyContent: "center",
+            flexWrap: "wrap",
+          },
+        }}
+      >
+        <Button
+          style={{
+            ...styles.flex_column,
+            ...{
+              alignSelf: "center",
+              justifyContent: "center",
+              flexWrap: "wrap",
+            },
+          }}
+        >
+          <ComputerIcon
+            style={{
+              height: 64,
+              width: 64,
+              fill: colors.font_dark,
+              marginLeft: "1rem",
+              marginRight: "1rem",
+            }}
+          />
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_M,
+            }}
+          >
+            Workstations
+          </p>
+        </Button>
+        <Button
+          style={{
+            ...styles.flex_column,
+            ...{
+              alignSelf: "center",
+              justifyContent: "center",
+              flexWrap: "wrap",
+            },
+          }}
+        >
+          <RouterIcon
+            style={{
+              height: 64,
+              width: 64,
+              fill: colors.font_dark,
+              marginLeft: "1rem",
+              marginRight: "1rem",
+            }}
+          />
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_M,
+            }}
+          >
+            Networking
+          </p>
+        </Button>
+
+        <Button
+          style={{
+            ...styles.flex_column,
+            ...{
+              alignSelf: "center",
+              justifyContent: "center",
+              flexWrap: "wrap",
+            },
+          }}
+        >
+          <CameraOutdoorIcon
+            style={{
+              height: 64,
+              width: 64,
+              fill: colors.font_dark,
+              marginLeft: "1rem",
+              marginRight: "1rem",
+            }}
+          />
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_M,
+            }}
+          >
+            CCTVs
+          </p>
+        </Button>
+        <Button
+          style={{
+            ...styles.flex_column,
+            ...{
+              alignSelf: "center",
+              justifyContent: "center",
+              flexWrap: "wrap",
+            },
+          }}
+        >
+          <ChairIcon
+            style={{
+              height: 64,
+              width: 64,
+              fill: colors.font_dark,
+              marginLeft: "1rem",
+              marginRight: "1rem",
+            }}
+          />
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_M,
+            }}
+          >
+            Furniture
+          </p>
+        </Button>
+      </div>
     </div>
   );
 }
diff --git a/src/styles.tsx b/src/styles.tsx
index 4a8f257..3ad2dc1 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -20,6 +20,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     width: "100%",
     minHeight: "100%",
     minWidth: "100%",
+    overflowY: "scroll",
   },
   text_dark: {
     color: colors.font_dark,