Added update transaction modal for teacher

src/Components/DashboardPage/Student/StudentTransactionListView.tsx

@@ -57,12 +57,12 @@ export default function StudentTransactionListView() {
               .map((transaction) => (
                 <React.Fragment key={transaction.id}>
                   <TransactionEntry
-                    onClick={() =>
+                    onClick={() => {
                       navigate(`/view/transaction/${transaction.id}`, {
                         replace: true,
                         state: { id: transaction.id },
-                      })
-                    }
+                      });
+                    }}
                     transaction={transaction}
                   />
                 </React.Fragment>

src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx

@@ -5,10 +5,12 @@ import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
 import React, { useState } from "react";
 import TransactionEntry from "../../TransactionEntry/TransactionEntry";
 import TransactionFilterMenu from "../../TransactionFilterMenu/TransactionFilterMenu";
-import { useNavigate } from "react-router-dom";
+import Popup from "reactjs-popup";
+import EditTransactionModal from "../../EditTransactionModal/EditTransactionModal";
 
 export default function TeacherTransactionListView() {
-  const navigate = useNavigate();
+  const [EditTransactionOpen, SetEditTransactionOpen] = useState(false);
+  const [SelectedTransaction, SetSelectedTransaction] = useState(0);
   const transactions = useQuery({
     queryKey: ["transactions_teacher"],
     queryFn: TransactionsByTeacherAPI,
@@ -57,12 +59,14 @@ export default function TeacherTransactionListView() {
               .map((transaction) => (
                 <React.Fragment key={transaction.id}>
                   <TransactionEntry
-                    onClick={() =>
-                      navigate(`/view/transaction/${transaction.id}`, {
-                        replace: true,
-                        state: { id: transaction.id },
-                      })
-                    }
+                    onClick={() => {
+                      if (
+                        transaction.transaction_status == "Pending Approval"
+                      ) {
+                        SetSelectedTransaction(transaction.id);
+                        SetEditTransactionOpen(true);
+                      }
+                    }}
                     transaction={transaction}
                   />
                 </React.Fragment>
@@ -72,6 +76,18 @@ export default function TeacherTransactionListView() {
           )}
         </div>
       </div>
+      <Popup
+        open={EditTransactionOpen}
+        onClose={() => SetEditTransactionOpen(false)}
+        modal
+        position={"top center"}
+        contentStyle={styles.popup_center}
+      >
+        <EditTransactionModal
+          id={SelectedTransaction}
+          setOpen={SetEditTransactionOpen}
+        />
+      </Popup>
     </div>
   );
 }

src/Components/EditTransactionModal/EditTransactionModal.tsx

@@ -204,7 +204,8 @@ export default function EditTransactionModal(props: {
                       />
                     </>
                   ) : null}
-                  {transaction.data?.transaction_status == "Borrowed" ? (
+                  {transaction.data?.transaction_status ==
+                  "Returned: Pending Checking" ? (
                     <>
                       <FormControlLabel
                         value="With Breakages: Pending Resolution"

src/Components/TransactionEntry/TransactionEntry.tsx

@@ -9,7 +9,7 @@ export interface props {
 
 export default function TransactionEntry(props: props) {
   return (
-    <div
+    <button
       style={{
         alignSelf: "center",
         justifySelf: "center",
@@ -19,7 +19,7 @@ export default function TransactionEntry(props: props) {
         margin: "8px",
         padding: "8px",
       }}
-      onClick={() => props.onClick}
+      onClick={props.onClick}
     >
       <div style={styles.flex_row}>
         <p
@@ -147,6 +147,6 @@ export default function TransactionEntry(props: props) {
       >
         {`${props.transaction.transaction_status}`}
       </p>
-    </div>
+    </button>
   );
 }

src/Components/TransactionFilterMenu/TransactionFilterMenu.tsx

@@ -109,7 +109,7 @@ export default function TransactionFilterMenu(props: props) {
                       ...{ margin: 0, textAlign: "left" },
                     }}
                   >
-                    Awaiting techncian approval
+                    Awaiting teacher approval
                   </p>
                 </div>
               </Button>