Support very long strings being displayed in remarks for transactions

src/Components/EditTransactionModal/EditTransactionModal.tsx

@@ -11,6 +11,7 @@ import FormControl from "@mui/material/FormControl";
 import FormLabel from "@mui/material/FormLabel";
 import Radio from "@mui/material/Radio";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import TextField from "@mui/material/TextField";
 import { CircularProgress } from "@mui/material";
 import React from "react";
 
@@ -19,7 +20,10 @@ export default function EditTransactionModal(props: {
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }) {
   const queryClient = useQueryClient();
-  const [status, setStatus] = useState("");
+  const [current_transaction, setCurrentTransaction] = useState({
+    transaction_status: "",
+    remarks: "",
+  });
   const [error, setError] = useState("");
   const transaction = useQuery({
     queryKey: ["transaction", props.id],
@@ -27,10 +31,7 @@ export default function EditTransactionModal(props: {
   });
   const update_mutation = useMutation({
     mutationFn: async () => {
-      const data = await TransactionUpdateAPI(
+      const data = await TransactionUpdateAPI(current_transaction, props.id);
-        { transaction_status: status },
-        props.id
-      );
       if (data[0] != true) {
         setError(JSON.stringify(data[1]));
         return Promise.reject(new Error(JSON.stringify(data[1])));
@@ -60,15 +61,21 @@ export default function EditTransactionModal(props: {
           theme: "light",
         }
       );
-      if (typeof data[1] == "object") {
+      if (typeof data[1] == "object" && transaction.data) {
-        setStatus(data[1].transaction_status);
+        setCurrentTransaction({
+          transaction_status: transaction.data.transaction_status,
+          remarks: transaction.data.remarks,
+        });
       }
     },
   });
 
   useEffect(() => {
     if (transaction.data) {
-      setStatus(transaction.data.transaction_status);
+      setCurrentTransaction({
+        transaction_status: transaction.data.transaction_status,
+        remarks: transaction.data.remarks,
+      });
     }
   }, [transaction.data]);
   if (transaction.isLoading) {
@@ -123,16 +130,22 @@ export default function EditTransactionModal(props: {
 
       <div style={styles.flex_column}>
         <FormControl style={{ marginTop: "8px" }}>
+          {transaction.data?.transaction_status != "Finalized" &&
+          transaction.data?.transaction_status != "Rejected" ? (
+            <>
               <FormLabel style={styles.text_dark} id="status-selection">
                 Item Status
               </FormLabel>
               <RadioGroup
                 aria-labelledby="demo-radio-buttons-group-label"
-            value={status}
+                value={current_transaction.transaction_status}
                 defaultValue="Pending"
                 name="radio-buttons-group"
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              setStatus(e.target.value);
+                  setCurrentTransaction({
+                    ...current_transaction,
+                    transaction_status: e.target.value,
+                  });
                   setError("");
                 }}
               >
@@ -142,12 +155,15 @@ export default function EditTransactionModal(props: {
                     ...{ overflowY: "scroll", maxHeight: "8rem" },
                   }}
                 >
-              <FormControlLabel
+                  {/*<FormControlLabel
                 value="Pending Approval"
                 control={<Radio />}
                 label="Pending Approval"
                 style={styles.text_dark}
-              />
+              />*/}
+                  {transaction.data?.transaction_status ==
+                  "Pending Approval" ? (
+                    <>
                       <FormControlLabel
                         value="Approved"
                         control={<Radio />}
@@ -160,6 +176,10 @@ export default function EditTransactionModal(props: {
                         label="Rejected"
                         style={styles.text_dark}
                       />
+                    </>
+                  ) : null}
+                  {transaction.data?.transaction_status == "Approved" ? (
+                    <>
                       <FormControlLabel
                         value="Cancelled"
                         control={<Radio />}
@@ -172,12 +192,20 @@ export default function EditTransactionModal(props: {
                         label="Borrowed"
                         style={styles.text_dark}
                       />
+                    </>
+                  ) : null}
+                  {transaction.data?.transaction_status == "Borrowed" ? (
+                    <>
                       <FormControlLabel
                         value="Returned: Pending Checking"
                         control={<Radio />}
                         label="Returned: Pending Checking"
                         style={styles.text_dark}
                       />
+                    </>
+                  ) : null}
+                  {transaction.data?.transaction_status == "Borrowed" ? (
+                    <>
                       <FormControlLabel
                         value="With Breakages: Pending Resolution"
                         control={<Radio />}
@@ -190,8 +218,29 @@ export default function EditTransactionModal(props: {
                         label="Finalized"
                         style={styles.text_dark}
                       />
+                    </>
+                  ) : null}
                 </div>
               </RadioGroup>
+            </>
+          ) : null}
+          <TextField
+            id="outlined-helperText"
+            label="Remarks"
+            multiline
+            style={styles.input_form}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setCurrentTransaction({
+                ...current_transaction,
+                remarks: e.target.value,
+              });
+              setError("");
+            }}
+            value={current_transaction.remarks}
+            placeholder={
+              "Optionally add a brief description of the transaction"
+            }
+          />
         </FormControl>
       </div>
       <p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>

src/Components/TransactionEntry/TransactionEntry.tsx

@@ -47,7 +47,7 @@ export default function TransactionEntry(props: props) {
             style={{
               ...styles.text_dark,
               ...styles.text_S,
-              ...{ textAlign: "left", margin: 0 },
+              ...{ textAlign: "left", margin: 0, wordWrap: "break-word" },
             }}
           >
             Borrower: {props.transaction.borrower.name}{" "}
@@ -57,7 +57,7 @@ export default function TransactionEntry(props: props) {
             style={{
               ...styles.text_dark,
               ...styles.text_S,
-              ...{ textAlign: "left", margin: 0 },
+              ...{ textAlign: "left", margin: 0, wordWrap: "break-word" },
             }}
           >
             {`(${props.transaction.borrower.course})`}
@@ -92,6 +92,8 @@ export default function TransactionEntry(props: props) {
                 marginTop: "8px",
                 flexWrap: "wrap",
                 overflowY: "scroll",
+                maxWidth: "192px",
+                wordWrap: "break-word",
               },
             }}
           >
@@ -121,6 +123,7 @@ export default function TransactionEntry(props: props) {
                   ...styles.text_S,
                   ...{
                     textAlign: "right",
+                    wordWrap: "break-word",
                     margin: 0,
                   },
                 }}

src/Pages/TransactionsListPage/TransactionsListPage.tsx

@@ -85,6 +85,9 @@ export default function TransactionsListPage() {
                 <TableCell align="center" style={styles.text_light}>
                   Status
                 </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Remarks
+                </TableCell>
                 <TableCell align="center" style={styles.text_light}>
                   Equipments
                 </TableCell>
@@ -141,6 +144,23 @@ export default function TransactionsListPage() {
                     >
                       {transaction.transaction_status}
                     </TableCell>
+                    <TableCell
+                      align="center"
+                      component="th"
+                      scope="row"
+                      style={{ ...styles.text_S }}
+                      sx={{
+                        maxWidth: "64px",
+                        flexWrap: "wrap",
+                        wordWrap: "break-word",
+                      }}
+                      onClick={() => {
+                        SetSelectedTransaction(transaction.id);
+                        SetEditTransactionOpen(true);
+                      }}
+                    >
+                      {transaction.remarks}
+                    </TableCell>
                     <TableCell style={{ overflowY: "scroll" }} align="center">
                       <TableContainer component={Paper}>
                         <Table sx={{ minWidth: "4rem" }} size="medium">
@@ -172,8 +192,13 @@ export default function TransactionsListPage() {
                                   },
                                 }}
                                 onClick={() => {
+                                  if (
+                                    transaction.transaction_status ==
+                                    "With Breakages: Pending Resolution"
+                                  ) {
                                     SetEditTransactionOpen(false);
                                     SetEditEquipmentsOpen(true);
+                                  }
                                 }}
                               >
                                 <TableCell