Added breakage handling for technician transaction view

src/Components/EditItemInstanceModal/EditItemInstanceModal.tsx

@@ -61,6 +61,9 @@ export default function EditItemInstanceModal(props: {
       queryClient.invalidateQueries({
         queryKey: ["equipment_instance", props.id],
       });
+      queryClient.invalidateQueries({
+        queryKey: ["transactions"],
+      });
       setError("Updated successfully");
       toast(
         `Item updated successfuly,  ${
@@ -84,6 +87,7 @@ export default function EditItemInstanceModal(props: {
           status: data[1].status,
         });
       }
+      props.setOpen(false);
     },
   });
 

src/Components/Types/Types.tsx

@@ -123,6 +123,7 @@ export type TransactionType = {
   equipments: Array<{
     id: number;
     name: string;
+    status: string;
   }>;
   transaction_status: string;
   timestamp: string;

src/Pages/TransactionsListPage/TransactionsListPage.tsx

@@ -15,11 +15,13 @@ import Popup from "reactjs-popup";
 import { useState } from "react";
 import EditTransactionModal from "../../Components/EditTransactionModal/EditTransactionModal";
 import TransactionFilterMenu from "../../Components/TransactionFilterMenu/TransactionFilterMenu";
+import EditItemInstanceModal from "../../Components/EditItemInstanceModal/EditItemInstanceModal";
 
 export default function TransactionsListPage() {
   const [EditTransactionOpen, SetEditTransactionOpen] = useState(false);
   const [SelectedTransaction, SetSelectedTransaction] = useState(0);
   const [EditEquipmentsOpen, SetEditEquipmentsOpen] = useState(false);
+  const [SelectedEquipment, SetSelectedEquipment] = useState(0);
   const transactions = useQuery({
     queryKey: ["transactions"],
     queryFn: TransactionsAPI,
@@ -197,7 +199,7 @@ export default function TransactionsListPage() {
                       >
                         {transaction.remarks}
                       </TableCell>
-                      <TableCell style={{}} align="center">
+                      <TableCell align="center">
                         <TableContainer
                           style={{
                             maxHeight: "192px",
@@ -228,6 +230,12 @@ export default function TransactionsListPage() {
                                 >
                                   Name
                                 </TableCell>
+                                <TableCell
+                                  align="center"
+                                  style={styles.text_light}
+                                >
+                                  Status
+                                </TableCell>
                               </TableRow>
                             </TableHead>
                             <TableBody
@@ -246,6 +254,7 @@ export default function TransactionsListPage() {
                                       transaction.transaction_status ==
                                       "With Breakages: Pending Resolution"
                                     ) {
+                                      SetSelectedEquipment(equipment.id);
                                       SetEditTransactionOpen(false);
                                       SetEditEquipmentsOpen(true);
                                     }
@@ -265,6 +274,13 @@ export default function TransactionsListPage() {
                                   >
                                     {equipment.name}
                                   </TableCell>
+                                  <TableCell
+                                    align="center"
+                                    component="th"
+                                    scope="row"
+                                  >
+                                    {equipment.status}
+                                  </TableCell>
                                 </TableRow>
                               ))}
                             </TableBody>
@@ -299,7 +315,10 @@ export default function TransactionsListPage() {
         position={"top center"}
         contentStyle={styles.popup_center}
       >
-        <p style={styles.text_dark}>Edit Transaction Equipment Modal</p>
+        <EditItemInstanceModal
+          id={SelectedEquipment}
+          setOpen={SetEditEquipmentsOpen}
+        />
       </Popup>
     </div>
   );