From 697081025634de595da565e7afa809c24f8d056d Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Fri, 22 Dec 2023 15:51:39 +0800
Subject: [PATCH] Add student actions in student dashboard

---
 .../DashboardPage/Student/StudentButtons.tsx  | 277 ------------------
 .../Student/StudentDashboard.tsx              |  84 ++++++
 src/Pages/DashboardPage/DashboardPage.tsx     |  18 +-
 3 files changed, 99 insertions(+), 280 deletions(-)
 delete mode 100644 src/Components/DashboardPage/Student/StudentButtons.tsx
 create mode 100644 src/Components/DashboardPage/Student/StudentDashboard.tsx

diff --git a/src/Components/DashboardPage/Student/StudentButtons.tsx b/src/Components/DashboardPage/Student/StudentButtons.tsx
deleted file mode 100644
index bb9d9b3..0000000
--- a/src/Components/DashboardPage/Student/StudentButtons.tsx
+++ /dev/null
@@ -1,277 +0,0 @@
-import styles from "../../../styles";
-import { useNavigate } from "react-router-dom";
-import { Button } from "@mui/material";
-import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
-import AddToQueueIcon from "@mui/icons-material/AddToQueue";
-import NoteAddIcon from "@mui/icons-material/NoteAdd";
-import NoteIcon from "@mui/icons-material/Note";
-import { colors } from "../../../styles";
-import ScienceIcon from "@mui/icons-material/Science";
-import ColorizeIcon from "@mui/icons-material/Colorize";
-import Popup from "reactjs-popup";
-import AddItemModal from "../../AddItemModal/AddItemModal";
-import AddSKUModal from "../../AddSKUModal/AddSKUModal";
-import { useState } from "react";
-export default function StudentButtons() {
-  const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false);
-  const [additemmodalOpen, SetAddItemModalOpen] = useState(false);
-  const navigate = useNavigate();
-  return (
-    <>
-      <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",
-            },
-          }}
-          onClick={() => {
-            navigate("/view/equipment_instances");
-          }}
-        >
-          <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",
-            },
-          }}
-          onClick={() => {
-            SetAddItemModalOpen(true);
-          }}
-        >
-          <AddToQueueIcon
-            style={{
-              height: 64,
-              width: 64,
-              fill: colors.font_dark,
-              marginLeft: "1rem",
-              marginRight: "1rem",
-            }}
-          />
-          <p
-            style={{
-              ...styles.text_dark,
-              ...styles.text_M,
-            }}
-          >
-            Add Item
-          </p>
-        </Button>
-        <Button
-          style={{
-            ...styles.flex_column,
-            ...{
-              alignSelf: "center",
-              justifyContent: "center",
-              flexWrap: "wrap",
-            },
-          }}
-          onClick={() => {
-            SetAddSKUModalOpen(true);
-          }}
-        >
-          <NoteAddIcon
-            style={{
-              height: 64,
-              width: 64,
-              fill: colors.font_dark,
-              marginLeft: "1rem",
-              marginRight: "1rem",
-            }}
-          />
-          <p
-            style={{
-              ...styles.text_dark,
-              ...styles.text_M,
-            }}
-          >
-            Add SKU
-          </p>
-        </Button>
-        <Button
-          style={{
-            ...styles.flex_column,
-            ...{
-              alignSelf: "center",
-              justifyContent: "center",
-              flexWrap: "wrap",
-            },
-          }}
-          onClick={() => {
-            navigate("/view/equipments");
-          }}
-        >
-          <NoteIcon
-            style={{
-              height: 64,
-              width: 64,
-              fill: colors.font_dark,
-              marginLeft: "1rem",
-              marginRight: "1rem",
-            }}
-          />
-          <p
-            style={{
-              ...styles.text_dark,
-              ...styles.text_M,
-            }}
-          >
-            View SKUs
-          </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",
-            },
-          }}
-        >
-          <ScienceIcon
-            style={{
-              height: 64,
-              width: 64,
-              fill: colors.font_dark,
-              marginLeft: "1rem",
-              marginRight: "1rem",
-            }}
-            onClick={() => {
-              navigate("/view/equipment_instances/filter/Glassware");
-            }}
-          />
-          <p
-            style={{
-              ...styles.text_dark,
-              ...styles.text_M,
-            }}
-          >
-            Glassware
-          </p>
-        </Button>
-        <Button
-          style={{
-            ...styles.flex_column,
-            ...{
-              alignSelf: "center",
-              justifyContent: "center",
-              flexWrap: "wrap",
-            },
-          }}
-        >
-          <ColorizeIcon
-            style={{
-              height: 64,
-              width: 64,
-              fill: colors.font_dark,
-              marginLeft: "1rem",
-              marginRight: "1rem",
-            }}
-            onClick={() => {
-              navigate("/view/equipment_instances/filter/Miscellaneous");
-            }}
-          />
-          <p
-            style={{
-              ...styles.text_dark,
-              ...styles.text_M,
-            }}
-          >
-            Miscellaneous
-          </p>
-        </Button>
-      </div>
-      <Popup
-        open={addSKUmodalOpen}
-        onClose={() => SetAddSKUModalOpen(false)}
-        modal
-        position={"top center"}
-        contentStyle={{
-          width: "32rem",
-          borderRadius: 16,
-          borderColor: "grey",
-          borderStyle: "solid",
-          borderWidth: 1,
-          padding: 16,
-          alignContent: "center",
-          justifyContent: "center",
-          textAlign: "center",
-        }}
-      >
-        <AddSKUModal />
-      </Popup>
-      <Popup
-        open={additemmodalOpen}
-        onClose={() => SetAddItemModalOpen(false)}
-        modal
-        position={"top center"}
-        contentStyle={{
-          width: "32rem",
-          borderRadius: 16,
-          borderColor: "grey",
-          borderStyle: "solid",
-          borderWidth: 1,
-          padding: 16,
-          alignContent: "center",
-          justifyContent: "center",
-          textAlign: "center",
-        }}
-      >
-        <AddItemModal />
-      </Popup>
-    </>
-  );
-}
diff --git a/src/Components/DashboardPage/Student/StudentDashboard.tsx b/src/Components/DashboardPage/Student/StudentDashboard.tsx
new file mode 100644
index 0000000..3374997
--- /dev/null
+++ b/src/Components/DashboardPage/Student/StudentDashboard.tsx
@@ -0,0 +1,84 @@
+import styles from "../../../styles";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@mui/material";
+import AddBoxIcon from "@mui/icons-material/AddBox";
+import { colors } from "../../../styles";
+import Popup from "reactjs-popup";
+import { useState } from "react";
+export default function StudentDashboard() {
+  const [addTransactionModalOpen, SetAddTransactionModalOpen] = useState(false);
+  const navigate = useNavigate();
+  return (
+    <div style={styles.flex_column}>
+      <p
+        style={{
+          ...styles.text_dark,
+          ...styles.text_L,
+        }}
+      >
+        Student Actions
+      </p>
+      <div
+        style={{
+          ...styles.flex_row,
+          ...{
+            alignSelf: "center",
+            justifyContent: "center",
+            flexWrap: "wrap",
+          },
+        }}
+      >
+        <Button
+          style={{
+            ...styles.flex_column,
+            ...{
+              alignSelf: "center",
+              justifyContent: "center",
+              flexWrap: "wrap",
+            },
+          }}
+          onClick={() => {
+            SetAddTransactionModalOpen(true);
+          }}
+        >
+          <AddBoxIcon
+            style={{
+              height: 64,
+              width: 64,
+              fill: colors.font_dark,
+              marginLeft: "1rem",
+              marginRight: "1rem",
+            }}
+          />
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_M,
+            }}
+          >
+            New Transaction
+          </p>
+        </Button>
+      </div>
+      <Popup
+        open={addTransactionModalOpen}
+        onClose={() => SetAddTransactionModalOpen(false)}
+        modal
+        position={"top center"}
+        contentStyle={{
+          width: "32rem",
+          borderRadius: 16,
+          borderColor: "grey",
+          borderStyle: "solid",
+          borderWidth: 1,
+          padding: 16,
+          alignContent: "center",
+          justifyContent: "center",
+          textAlign: "center",
+        }}
+      >
+        <div />
+      </Popup>
+    </div>
+  );
+}
diff --git a/src/Pages/DashboardPage/DashboardPage.tsx b/src/Pages/DashboardPage/DashboardPage.tsx
index 36915ff..6e33cda 100644
--- a/src/Pages/DashboardPage/DashboardPage.tsx
+++ b/src/Pages/DashboardPage/DashboardPage.tsx
@@ -5,7 +5,7 @@ import TechnicianWidgets from "../../Components/DashboardPage/Technician/Technic
 import TechnicianEquipmentButtons from "../../Components/DashboardPage/Technician/TechnicianEquipmentButtons";
 import TechnicianLogButtons from "../../Components/DashboardPage/Technician/TechnicianLogButtons";
 import StudentTransactionListView from "../../Components/DashboardPage/Student/StudentTransactionListView";
-import StudentButtons from "../../Components/DashboardPage/Student/StudentButtons";
+import StudentDashboard from "../../Components/DashboardPage/Student/StudentDashboard";
 export default function Dashboard() {
   return (
     <div style={styles.background}>
@@ -16,8 +16,20 @@ export default function Dashboard() {
         <TechnicianLogButtons />
       </RestrictedComponent>
       <RestrictedComponent allow_only={"Student"}>
-        <StudentTransactionListView />
-        <StudentButtons />
+        <div
+          style={{
+            ...styles.flex_row,
+            ...{
+              flexWrap: "wrap",
+              justifyContent: "center",
+              marginLeft: "16px",
+              marginRight: "16px",
+            },
+          }}
+        >
+          <StudentTransactionListView />
+          <StudentDashboard />
+        </div>
       </RestrictedComponent>
       <RestrictedComponent allow_only={"Teacher"}>
         <p style={styles.text_dark}>Welcome teacher!</p>