Separate transaction filter menu into separate component for use within all user types

src/Components/DashboardPage/Student/StudentTransactionListView.tsx

@@ -4,7 +4,7 @@ import styles from "../../../styles";
 import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
 import React, { useState } from "react";
 import TransactionEntry from "../../TransactionEntry/TransactionEntry";
-import TransactionFilterMenu from "../TransactionFilterMenu";
+import TransactionFilterMenu from "../../TransactionFilterMenu/TransactionFilterMenu";
 import { useNavigate } from "react-router-dom";
 
 export default function StudentTransactionListView() {

src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx

@@ -4,7 +4,7 @@ import styles from "../../../styles";
 import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
 import React, { useState } from "react";
 import TransactionEntry from "../../TransactionEntry/TransactionEntry";
-import TransactionFilterMenu from "../TransactionFilterMenu";
+import TransactionFilterMenu from "../../TransactionFilterMenu/TransactionFilterMenu";
 import { useNavigate } from "react-router-dom";
 
 export default function TeacherTransactionListView() {

src/Components/TransactionFilterMenu/TransactionFilterMenu.tsx

@@ -185,7 +185,7 @@ export default function TransactionFilterMenu(props: props) {
                       ...{ margin: 0, textAlign: "left" },
                     }}
                   >
-                    Denied by technician
+                    Denied by teacher
                   </p>
                 </div>
               </Button>

src/Pages/TransactionsListPage/TransactionsListPage.tsx

@@ -14,6 +14,7 @@ import { colors } from "../../styles";
 import Popup from "reactjs-popup";
 import { useState } from "react";
 import EditTransactionModal from "../../Components/EditTransactionModal/EditTransactionModal";
+import TransactionFilterMenu from "../../Components/TransactionFilterMenu/TransactionFilterMenu";
 
 export default function TransactionsListPage() {
   const [EditTransactionOpen, SetEditTransactionOpen] = useState(false);
@@ -23,6 +24,7 @@ export default function TransactionsListPage() {
     queryKey: ["transactions"],
     queryFn: TransactionsAPI,
   });
+  const [filter, setFilter] = useState("");
   if (transactions.isLoading) {
     return (
       <div style={styles.background}>
@@ -55,7 +57,7 @@ export default function TransactionsListPage() {
       <Header label={"Transactions"} />
       <div
         style={{
-          ...styles.flex_column,
+          ...{
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
@@ -64,13 +66,16 @@ export default function TransactionsListPage() {
             minHeight: "100%",
             minWidth: "100%",
             flexWrap: "wrap",
+          },
+          ...styles.flex_column,
         }}
       >
         <TableContainer
           style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
           component={Paper}
         >
-          <Table sx={{ minWidth: "32rem" }} size="medium">
+          <TransactionFilterMenu filter={filter} setFilter={setFilter} />
+          <Table sx={{ marginTop: "8px", minWidth: "32rem" }} size="medium">
             <TableHead>
               <TableRow style={{ backgroundColor: colors.header_color }}>
                 <TableCell align="center" style={styles.text_light}>
@@ -95,7 +100,13 @@ export default function TransactionsListPage() {
             </TableHead>
             <TableBody>
               {transactions.data ? (
-                transactions.data.map((transaction) => (
+                transactions.data
+                  .filter((transaction) =>
+                    filter !== ""
+                      ? transaction.transaction_status == filter
+                      : true
+                  )
+                  .map((transaction) => (
                     <TableRow
                       key={transaction.id}
                       sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
@@ -105,8 +116,13 @@ export default function TransactionsListPage() {
                         component="th"
                         scope="row"
                         onClick={() => {
+                          if (
+                            transaction.transaction_status != "Finalized" &&
+                            transaction.transaction_status != "Rejected"
+                          ) {
                             SetSelectedTransaction(transaction.id);
                             SetEditTransactionOpen(true);
+                          }
                         }}
                       >
                         {transaction.id}
@@ -116,8 +132,13 @@ export default function TransactionsListPage() {
                         component="th"
                         scope="row"
                         onClick={() => {
+                          if (
+                            transaction.transaction_status != "Finalized" &&
+                            transaction.transaction_status != "Rejected"
+                          ) {
                             SetSelectedTransaction(transaction.id);
                             SetEditTransactionOpen(true);
+                          }
                         }}
                       >
                         {transaction.borrower.name}
@@ -127,8 +148,13 @@ export default function TransactionsListPage() {
                         component="th"
                         scope="row"
                         onClick={() => {
+                          if (
+                            transaction.transaction_status != "Finalized" &&
+                            transaction.transaction_status != "Rejected"
+                          ) {
                             SetSelectedTransaction(transaction.id);
                             SetEditTransactionOpen(true);
+                          }
                         }}
                       >
                         {transaction.teacher.name}
@@ -138,8 +164,13 @@ export default function TransactionsListPage() {
                         component="th"
                         scope="row"
                         onClick={() => {
+                          if (
+                            transaction.transaction_status != "Finalized" &&
+                            transaction.transaction_status != "Rejected"
+                          ) {
                             SetSelectedTransaction(transaction.id);
                             SetEditTransactionOpen(true);
+                          }
                         }}
                       >
                         {transaction.transaction_status}
@@ -155,8 +186,13 @@ export default function TransactionsListPage() {
                           wordWrap: "break-word",
                         }}
                         onClick={() => {
+                          if (
+                            transaction.transaction_status != "Finalized" &&
+                            transaction.transaction_status != "Rejected"
+                          ) {
                             SetSelectedTransaction(transaction.id);
                             SetEditTransactionOpen(true);
+                          }
                         }}
                       >
                         {transaction.remarks}