Update dropdown menu for new transaction

package-lock.json

@@ -24,12 +24,14 @@
         "react-router-dom": "^6.18.0",
         "react-toastify": "^9.1.3",
         "react-virtuoso": "^4.6.2",
+        "react-window": "^1.8.10",
         "reactjs-popup": "^2.0.6",
         "styled-components": "^6.1.1"
       },
       "devDependencies": {
         "@types/react": "^18.2.15",
         "@types/react-dom": "^18.2.7",
+        "@types/react-window": "^1.8.8",
         "@typescript-eslint/eslint-plugin": "^6.0.0",
         "@typescript-eslint/parser": "^6.0.0",
         "@vitejs/plugin-react": "^4.0.3",
@@ -1762,6 +1764,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-window": {
+      "version": "1.8.8",
+      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
+      "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.5",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.5.tgz",
@@ -3373,6 +3384,11 @@
       "resolved": "https://registry.npmjs.org/media-engine/-/media-engine-1.0.3.tgz",
       "integrity": "sha512-aa5tG6sDoK+k70B9iEX1NeyfT8ObCKhNDs6lJVpwF6r8vhUfuKMslIcirq6HIUYuuUYLefcEQOn9bSBOvawtwg=="
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3908,6 +3924,22 @@
         "react-dom": ">=16 || >=17 || >= 18"
       }
     },
+    "node_modules/react-window": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz",
+      "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      },
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/reactjs-popup": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.6.tgz",

package.json

@@ -26,12 +26,14 @@
     "react-router-dom": "^6.18.0",
     "react-toastify": "^9.1.3",
     "react-virtuoso": "^4.6.2",
+    "react-window": "^1.8.10",
     "reactjs-popup": "^2.0.6",
     "styled-components": "^6.1.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/react-window": "^1.8.8",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",

src/Pages/AddTransactionPage/AddTransactionPage.tsx

@@ -20,6 +20,7 @@ import {
   CircularProgress,
   MenuItem,
   OutlinedInput,
+  Autocomplete,
 } from "@mui/material";
 import React from "react";
 import Header from "../../Components/Header/Header";
@@ -126,29 +127,50 @@ export default function AddTransactionPage() {
 
       <div style={styles.flex_column}>
         <FormControl style={{ marginTop: "8px" }}>
-          <FormLabel style={styles.text_dark}>Items Requested</FormLabel>
+          <FormLabel
-          <Select
+            style={{
+              ...styles.text_dark,
+              ...{ marginLeft: "4px", marginBottom: "8px", textAlign: "left" },
+            }}
+          >
+            Items Requested
+          </FormLabel>
+          <Autocomplete
             multiple
-            value={transaction.equipments}
+            id="equipment-autocomplete"
-            onChange={(event) =>
+            options={equipments.data || []}
+            getOptionLabel={(option) =>
+              `${option.equipment_name} (ID:${option.id})`
+            }
+            value={
+              equipments.data?.filter((equipment) =>
+                transaction.equipments.includes(equipment.id)
+              ) || []
+            }
+            onChange={(event, newValue) => {
               SetTransaction({
                 ...transaction,
-                equipments: event.target.value as number[],
+                equipments: newValue.map((item) => item.id),
-              })
+              });
-            }
+            }}
-            input={<OutlinedInput label="Name" />}
+            renderInput={(params) => (
-          >
+              <TextField
-            {equipments.data
+                {...params}
-              ?.filter((equipment) => equipment.status == "Available")
+                variant="outlined"
-              .map((equipment) => (
+                label="Items Requested"
-                <MenuItem key={equipment.id} value={equipment.id}>
+              />
-                  {`${equipment.equipment_name} (ID:${equipment.id})`}
+            )}
-                </MenuItem>
+          />
-              ))}
-          </Select>
         </FormControl>
         <FormControl style={{ marginTop: "8px" }}>
-          <FormLabel style={styles.text_dark}>Assigned Teacher</FormLabel>
+          <FormLabel
+            style={{
+              ...styles.text_dark,
+              ...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
+            }}
+          >
+            Assigned Teacher
+          </FormLabel>
           <Select
             value={transaction.teacher}
             onChange={(event) =>
@@ -157,8 +179,7 @@ export default function AddTransactionPage() {
                 teacher: event.target.value as number,
               })
             }
-            label={"Assigned Teacher"}
+            input={<OutlinedInput />}
-            input={<OutlinedInput label="Assigned Teacher" />}
           >
             {teachers.data?.map((teacher) => (
               <MenuItem key={teacher.id} value={teacher.id}>
@@ -168,7 +189,14 @@ export default function AddTransactionPage() {
           </Select>
         </FormControl>
         <FormControl style={{ marginTop: "8px" }}>
-          <FormLabel style={styles.text_dark}>Subject</FormLabel>
+          <FormLabel
+            style={{
+              ...styles.text_dark,
+              ...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
+            }}
+          >
+            Subject
+          </FormLabel>
           <TextField
             style={styles.input_form}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -181,7 +209,14 @@ export default function AddTransactionPage() {
           />
         </FormControl>
         <FormControl style={{ marginTop: "8px" }}>
-          <FormLabel style={styles.text_dark}>Remarks</FormLabel>
+          <FormLabel
+            style={{
+              ...styles.text_dark,
+              ...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
+            }}
+          >
+            Remarks
+          </FormLabel>
           <TextField
             multiline
             style={styles.input_form}
@@ -195,7 +230,14 @@ export default function AddTransactionPage() {
           />
         </FormControl>
         <FormControl style={{ marginTop: "8px" }}>
-          <FormLabel style={styles.text_dark}>Consumables</FormLabel>
+          <FormLabel
+            style={{
+              ...styles.text_dark,
+              ...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
+            }}
+          >
+            Consumables
+          </FormLabel>
           <TextField
             multiline
             style={styles.input_form}
@@ -209,7 +251,14 @@ export default function AddTransactionPage() {
           />
         </FormControl>
         <FormControl style={{ marginTop: "8px" }}>
-          <FormLabel style={styles.text_dark}>Additional Members</FormLabel>
+          <FormLabel
+            style={{
+              ...styles.text_dark,
+              ...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
+            }}
+          >
+            Additional Members
+          </FormLabel>
           <TextField
             multiline
             style={styles.input_form}