From 2af8ea580275ec131d774865b59253ebed42a825 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Thu, 21 Dec 2023 14:41:48 +0800
Subject: [PATCH] Change format of filter buttons to dropdown select menu for
 ease of use

---
 .../StudentTransactionButtons.tsx             | 254 -------------
 .../StudentTransactionFilterMenu.tsx          | 352 ++++++++++++++++++
 src/Pages/DashboardPage/DashboardPage.tsx     |   5 +-
 3 files changed, 354 insertions(+), 257 deletions(-)
 delete mode 100644 src/Components/DashboardPage/StudentTransactionButtons.tsx
 create mode 100644 src/Components/DashboardPage/StudentTransactionFilterMenu.tsx

diff --git a/src/Components/DashboardPage/StudentTransactionButtons.tsx b/src/Components/DashboardPage/StudentTransactionButtons.tsx
deleted file mode 100644
index 16151ba..0000000
--- a/src/Components/DashboardPage/StudentTransactionButtons.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import styles from "../../styles";
-import { useNavigate } from "react-router-dom";
-import { Button } from "@mui/material";
-import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
-import ThumbUpIcon from '@mui/icons-material/ThumbUp';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import FlashOffIcon from '@mui/icons-material/FlashOff';
-import ThumbDownIcon from '@mui/icons-material/ThumbDown';
-import { colors } from "../../styles";
-import Popup from "reactjs-popup";
-import AddItemModal from "../AddItemModal/AddItemModal";
-import AddSKUModal from "../AddSKUModal/AddSKUModal";
-import { useState } from "react";
-
-export default function StudentTransactionButtons() {
-  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");
-          }}
-        >
-          <HourglassBottomIcon
-            style={{
-              height: 64,
-              width: 64,
-              fill: colors.font_dark,
-              marginLeft: "1rem",
-              marginRight: "1rem",
-            }}
-          />
-          <p
-            style={{
-              ...styles.text_dark,
-              ...styles.text_M,
-            }}
-          >
-            Pending
-          </p>
-        </Button>
-
-        <Button
-          style={{
-            ...styles.flex_column,
-            ...{
-              alignSelf: "center",
-              justifyContent: "center",
-              flexWrap: "wrap",
-            },
-          }}
-          onClick={() => {
-            navigate("/view/equipment_instances");
-          }}
-        >
-          <ThumbUpIcon
-            style={{
-              height: 64,
-              width: 64,
-              fill: colors.font_dark,
-              marginLeft: "1rem",
-              marginRight: "1rem",
-            }}
-          />
-          <p
-            style={{
-              ...styles.text_dark,
-              ...styles.text_M,
-            }}
-          >
-            On-Borrow
-          </p>
-        </Button>
-
-        <Button
-          style={{
-            ...styles.flex_column,
-            ...{
-              alignSelf: "center",
-              justifyContent: "center",
-              flexWrap: "wrap",
-            },
-          }}
-          onClick={() => {
-            navigate("/view/equipment_instances");
-          }}
-        >
-          <CheckCircleIcon
-            style={{
-              height: 64,
-              width: 64,
-              fill: colors.font_dark,
-              marginLeft: "1rem",
-              marginRight: "1rem",
-            }}
-          />
-          <p
-            style={{
-              ...styles.text_dark,
-              ...styles.text_M,
-            }}
-          >
-            Completed
-          </p>
-        </Button>
-
-        <Button
-          style={{
-            ...styles.flex_column,
-            ...{
-              alignSelf: "center",
-              justifyContent: "center",
-              flexWrap: "wrap",
-            },
-          }}
-          onClick={() => {
-            navigate("/view/equipment_instances");
-          }}
-        >
-          <FlashOffIcon
-            style={{
-              height: 64,
-              width: 64,
-              fill: colors.font_dark,
-              marginLeft: "1rem",
-              marginRight: "1rem",
-            }}
-          />
-          <p
-            style={{
-              ...styles.text_dark,
-              ...styles.text_M,
-            }}
-          >
-            Breakage
-          </p>
-        </Button>
-
-        <Button
-          style={{
-            ...styles.flex_column,
-            ...{
-              alignSelf: "center",
-              justifyContent: "center",
-              flexWrap: "wrap",
-            },
-          }}
-          onClick={() => {
-            navigate("/view/equipment_instances");
-          }}
-        >
-          <ThumbDownIcon
-            style={{
-              height: 64,
-              width: 64,
-              fill: colors.font_dark,
-              marginLeft: "1rem",
-              marginRight: "1rem",
-            }}
-          />
-          <p
-            style={{
-              ...styles.text_dark,
-              ...styles.text_M,
-            }}
-          >
-            Rejected
-          </p>
-        </Button>
-
-      </div>
-      <div
-        style={{
-          ...styles.flex_row,
-          ...{
-            alignSelf: "center",
-            justifyContent: "center",
-            flexWrap: "wrap",
-          },
-        }}
-      >
-         
-      </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/StudentTransactionFilterMenu.tsx b/src/Components/DashboardPage/StudentTransactionFilterMenu.tsx
new file mode 100644
index 0000000..1a9b1c8
--- /dev/null
+++ b/src/Components/DashboardPage/StudentTransactionFilterMenu.tsx
@@ -0,0 +1,352 @@
+import styles from "../../styles";
+import {
+  Button,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+} from "@mui/material";
+import HourglassBottomIcon from "@mui/icons-material/HourglassBottom";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import FlashOffIcon from "@mui/icons-material/FlashOff";
+import { colors } from "../../styles";
+import Popup from "reactjs-popup";
+import AddItemModal from "../AddItemModal/AddItemModal";
+import AddSKUModal from "../AddSKUModal/AddSKUModal";
+import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+import ShoppingCartCheckoutIcon from "@mui/icons-material/ShoppingCartCheckout";
+import AssignmentReturnedIcon from "@mui/icons-material/AssignmentReturned";
+import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined";
+import CancelIcon from "@mui/icons-material/Cancel";
+import { useState } from "react";
+
+export default function StudentTransactionFilterMenu() {
+  const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false);
+  const [additemmodalOpen, SetAddItemModalOpen] = useState(false);
+  const [filter, setFilter] = useState("");
+  return (
+    <>
+      <p
+        style={{
+          ...styles.text_dark,
+          ...styles.text_L,
+        }}
+      >
+        Personal Transactions
+      </p>
+
+      <div
+        style={{
+          ...styles.flex_row,
+          ...{
+            alignSelf: "center",
+            justifyContent: "center",
+            flexWrap: "wrap",
+          },
+        }}
+      >
+        <FormControl sx={{ width: "25vw" }}>
+          <InputLabel style={{ backgroundColor: "white" }}>
+            Filter transactions by
+          </InputLabel>
+          <Select
+            value={filter}
+            onChange={(e: SelectChangeEvent<string>) =>
+              setFilter(e.target.value)
+            }
+          >
+            <MenuItem value={"Pending Approval"}>
+              <Button
+                style={{
+                  ...styles.row,
+                  ...{
+                    alignSelf: "center",
+                    justifyContent: "center",
+                    flexWrap: "wrap",
+                  },
+                }}
+              >
+                <HourglassBottomIcon
+                  style={{
+                    height: 32,
+                    width: 32,
+                    fill: colors.font_dark,
+                    marginLeft: "1rem",
+                    marginRight: "1rem",
+                  }}
+                />
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_M,
+                  }}
+                >
+                  Pending
+                </p>
+              </Button>
+            </MenuItem>
+            <MenuItem value={"Approved"}>
+              <Button
+                style={{
+                  ...styles.flex_row,
+                  ...{
+                    alignSelf: "center",
+                    justifyContent: "center",
+                    flexWrap: "wrap",
+                  },
+                }}
+              >
+                <CheckCircleOutlineIcon
+                  style={{
+                    height: 32,
+                    width: 32,
+                    fill: colors.font_dark,
+                    marginLeft: "1rem",
+                    marginRight: "1rem",
+                  }}
+                />
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_M,
+                  }}
+                >
+                  Approved
+                </p>
+              </Button>
+            </MenuItem>
+            <MenuItem value={"Rejected"}>
+              <Button
+                style={{
+                  ...styles.flex_row,
+                  ...{
+                    alignSelf: "center",
+                    justifyContent: "center",
+                    flexWrap: "wrap",
+                  },
+                }}
+              >
+                <CancelOutlinedIcon
+                  style={{
+                    height: 32,
+                    width: 32,
+                    fill: colors.font_dark,
+                    marginLeft: "1rem",
+                    marginRight: "1rem",
+                  }}
+                />
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_M,
+                  }}
+                >
+                  Rejected
+                </p>
+              </Button>
+            </MenuItem>
+            <MenuItem value={"Borrowed"}>
+              <Button
+                style={{
+                  ...styles.flex_row,
+                  ...{
+                    alignSelf: "center",
+                    justifyContent: "center",
+                    flexWrap: "wrap",
+                  },
+                }}
+              >
+                <ShoppingCartCheckoutIcon
+                  style={{
+                    height: 32,
+                    width: 32,
+                    fill: colors.font_dark,
+                    marginLeft: "1rem",
+                    marginRight: "1rem",
+                  }}
+                />
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_M,
+                  }}
+                >
+                  On-Borrow
+                </p>
+              </Button>
+            </MenuItem>
+            <MenuItem value={"Cancelled"}>
+              <Button
+                style={{
+                  ...styles.flex_row,
+                  ...{
+                    alignSelf: "center",
+                    justifyContent: "center",
+                    flexWrap: "wrap",
+                  },
+                }}
+              >
+                <CancelIcon
+                  style={{
+                    height: 32,
+                    width: 32,
+                    fill: colors.font_dark,
+                    marginLeft: "1rem",
+                    marginRight: "1rem",
+                  }}
+                />
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_M,
+                  }}
+                >
+                  Cancelled
+                </p>
+              </Button>
+            </MenuItem>
+            <MenuItem value={"Returned: Pending Checking"}>
+              <Button
+                style={{
+                  ...styles.flex_row,
+                  ...{
+                    alignSelf: "center",
+                    justifyContent: "center",
+                    flexWrap: "wrap",
+                  },
+                }}
+              >
+                <AssignmentReturnedIcon
+                  style={{
+                    height: 32,
+                    width: 32,
+                    fill: colors.font_dark,
+                    marginLeft: "1rem",
+                    marginRight: "1rem",
+                  }}
+                />
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_M,
+                  }}
+                >
+                  Returned: Pending
+                </p>
+              </Button>
+            </MenuItem>
+            <MenuItem value={"Finalized"}>
+              <Button
+                style={{
+                  ...styles.flex_row,
+                  ...{
+                    alignSelf: "center",
+                    justifyContent: "center",
+                    flexWrap: "wrap",
+                  },
+                }}
+              >
+                <CheckCircleIcon
+                  style={{
+                    height: 32,
+                    width: 32,
+                    fill: colors.font_dark,
+                    marginLeft: "1rem",
+                    marginRight: "1rem",
+                  }}
+                />
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_M,
+                  }}
+                >
+                  Finalized
+                </p>
+              </Button>
+            </MenuItem>
+            <MenuItem value={"With Breakages: Pending Resolution"}>
+              <Button
+                style={{
+                  ...styles.flex_row,
+                  ...{
+                    alignSelf: "center",
+                    justifyContent: "center",
+                    flexWrap: "wrap",
+                  },
+                }}
+              >
+                <FlashOffIcon
+                  style={{
+                    height: 32,
+                    width: 32,
+                    fill: colors.font_dark,
+                    marginLeft: "1rem",
+                    marginRight: "1rem",
+                  }}
+                />
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_M,
+                  }}
+                >
+                  With Breakages
+                </p>
+              </Button>
+            </MenuItem>
+          </Select>
+        </FormControl>
+      </div>
+      <div
+        style={{
+          ...styles.flex_row,
+          ...{
+            alignSelf: "center",
+            justifyContent: "center",
+            flexWrap: "wrap",
+          },
+        }}
+      ></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/Pages/DashboardPage/DashboardPage.tsx b/src/Pages/DashboardPage/DashboardPage.tsx
index 0ff3249..ae36dac 100644
--- a/src/Pages/DashboardPage/DashboardPage.tsx
+++ b/src/Pages/DashboardPage/DashboardPage.tsx
@@ -4,7 +4,7 @@ import RestrictedComponent from "../../Components/RestrictedComponent/Restricted
 import TechnicianWidgets from "../../Components/DashboardPage/TechnicianWidgets";
 import TechnicianEquipmentButtons from "../../Components/DashboardPage/TechnicianEquipmentButtons";
 import TechnicianLogButtons from "../../Components/DashboardPage/TechnicianLogButtons";
-import StudentTransactionButtons from "../../Components/DashboardPage/StudentTransactionButtons";
+import StudentTransactionFilterMenu from "../../Components/DashboardPage/StudentTransactionFilterMenu";
 export default function Dashboard() {
   return (
     <div style={styles.background}>
@@ -15,8 +15,7 @@ export default function Dashboard() {
         <TechnicianLogButtons />
       </RestrictedComponent>
       <RestrictedComponent allow_only={"Student"}>
-        <StudentTransactionButtons />
-        <p style={styles.text_dark}>Welcome student!</p>
+        <StudentTransactionFilterMenu />
       </RestrictedComponent>
       <RestrictedComponent allow_only={"Teacher"}>
         <p style={styles.text_dark}>Welcome teacher!</p>