Change filter component in transactions list page to search bar

src/Pages/TransactionsListPage/TransactionsListPage.tsx

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import Header from "../../Components/Header/Header";
 import styles from "../../styles";
 import { TransactionsAPI } from "../../Components/API/API";
-import { CircularProgress } from "@mui/material";
+import { Autocomplete, CircularProgress } from "@mui/material";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
@@ -14,19 +14,19 @@ 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";
 import EditItemInstanceModal from "../../Components/EditItemInstanceModal/EditItemInstanceModal";
+import SearchIcon from "@mui/icons-material/Search";
 
 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 [filter, setFilter] = useState<string | null>(null);
   const transactions = useQuery({
     queryKey: ["transactions"],
     queryFn: TransactionsAPI,
   });
-  const [filter, setFilter] = useState("");
   if (transactions.isLoading) {
     return (
       <div style={styles.background}>
@@ -76,7 +76,56 @@ export default function TransactionsListPage() {
           style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
           component={Paper}
         >
-          <TransactionFilterMenu filter={filter} setFilter={setFilter} />
+          <div
+            style={{
+              ...styles.flex_row,
+              ...{ alignItems: "center", justifySelf: "flex-start" },
+            }}
+          >
+            <SearchIcon
+              style={{
+                height: 32,
+                width: 32,
+                fill: colors.font_dark,
+                marginLeft: "1rem",
+                marginRight: "1rem",
+              }}
+            />
+            <Autocomplete
+              sx={{
+                display: "inline-block",
+                "& input": {
+                  width: "256x",
+                  bgcolor: "background.paper",
+                  color: (theme) =>
+                    theme.palette.getContrastText(
+                      theme.palette.background.paper
+                    ),
+                },
+              }}
+              value={filter}
+              onChange={(_event, newValue) => {
+                setFilter(newValue);
+              }}
+              freeSolo
+              id="custom-input-demo"
+              options={[
+                "Pending Approval",
+                "Approved",
+                "Rejected",
+                "Cancelled",
+                "Borrowed",
+                "Returned: Pending Checking",
+                "With Breakages: Pending Resolution",
+                "Finalized",
+              ]}
+              renderInput={(params) => (
+                <div ref={params.InputProps.ref}>
+                  <input type="text" {...params.inputProps} />
+                </div>
+              )}
+            />
+          </div>
           <Table sx={{ marginTop: "8px", minWidth: "32rem" }} size="medium">
             <TableHead>
               <TableRow style={{ backgroundColor: colors.header_color }}>
@@ -104,9 +153,21 @@ export default function TransactionsListPage() {
               {transactions.data ? (
                 transactions.data
                   .filter((transaction) =>
-                    filter !== ""
-                      ? transaction.transaction_status == filter
-                      : true
+                    filter !== null
+                      ? // If filter is not null, we filter if it matches any criteria
+                        transaction.borrower.name
+                          .toLowerCase()
+                          .includes(filter.toLowerCase()) ||
+                        transaction.teacher.name
+                          .toLowerCase()
+                          .includes(filter.toLowerCase()) ||
+                        transaction.remarks
+                          .toLowerCase()
+                          .includes(filter?.toLowerCase()) ||
+                        transaction.transaction_status.toLowerCase() ==
+                          filter.toLowerCase()
+                      : // If filter keyword is null then we just pass through everything as if we did not filter at all
+                        true
                   )
                   .map((transaction) => (
                     <TableRow