Improved transaction entry, added create transaction page and improved student-related component layouts

src/Pages/AddTransactionPage/AddTransactionPage.tsx

@@ -0,0 +1,205 @@
+import { useState } from "react";
+import styles from "../../styles";
+import { colors } from "../../styles";
+import TextField from "@mui/material/TextField";
+import AddToQueueIcon from "@mui/icons-material/AddToQueue";
+import Button from "../../Components/Button/Button";
+import { toast } from "react-toastify";
+import {
+  AvailableEquipmentInstancesAPI,
+  TransactionCreateAPI,
+  TeachersAPI,
+  UserAPI,
+} from "../../Components/API/API";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
+import { useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
+import {
+  Select,
+  CircularProgress,
+  MenuItem,
+  OutlinedInput,
+} from "@mui/material";
+import React from "react";
+import Header from "../../Components/Header/Header";
+import { useNavigate } from "react-router-dom";
+
+export default function AddTransactionPage() {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const [selecteditems, SetSelectedItems] = useState<number[]>([]);
+  const [selectedteacher, SetSelectedTeacher] = useState<number>(0);
+  const [remarks, SetRemarks] = useState("");
+  const [error, setError] = useState("");
+
+  const equipments = useQuery({
+    queryKey: ["equipment_instances_available"],
+    queryFn: AvailableEquipmentInstancesAPI,
+  });
+
+  const teachers = useQuery({
+    queryKey: ["teachers"],
+    queryFn: TeachersAPI,
+  });
+
+  const user = useQuery({
+    queryKey: ["user"],
+    queryFn: UserAPI,
+  });
+  const isLoading =
+    equipments.isLoading || teachers.isLoading || user.isLoading;
+
+  if (isLoading) {
+    return (
+      <div style={styles.background}>
+        <Header label={"New Transaction"} />
+        <div
+          style={{
+            ...styles.flex_column,
+            ...{
+              alignItems: "center",
+              justifyContent: "center",
+              paddingTop: "64px",
+            },
+          }}
+        >
+          <CircularProgress style={{ height: "128px", width: "128px" }} />
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_L,
+            }}
+          >
+            Loading
+          </p>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div style={styles.background}>
+      <Header label={"New Transaction"} />
+      <div
+        style={{
+          ...styles.flex_row,
+          ...{
+            alignItems: "center",
+            justifyContent: "center",
+            overflowY: "scroll",
+          },
+        }}
+      >
+        <AddToQueueIcon
+          style={{
+            height: 64,
+            width: 64,
+            fill: colors.font_dark,
+            marginLeft: "1rem",
+            marginRight: "1rem",
+          }}
+        />
+        <p style={{ ...styles.text_dark, ...styles.text_L }}>New Transaction</p>
+      </div>
+
+      <div style={styles.flex_column}>
+        <FormControl style={{ marginTop: "8px" }}>
+          <FormLabel style={styles.text_dark}>Items Requested</FormLabel>
+          <Select
+            multiple
+            value={selecteditems}
+            onChange={(event) =>
+              SetSelectedItems(event.target.value as number[])
+            }
+            input={<OutlinedInput label="Name" />}
+          >
+            {equipments.data
+              ?.filter((equipment) => equipment.status == "Available")
+              .map((equipment) => (
+                <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>
+          <Select
+            value={selectedteacher}
+            onChange={(event) =>
+              SetSelectedTeacher(event.target.value as number)
+            }
+            input={<OutlinedInput label="Name" />}
+          >
+            {teachers.data?.map((teacher) => (
+              <MenuItem key={teacher.id} value={teacher.id}>
+                {`${teacher.first_name} ${teacher.last_name}`}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+        <TextField
+          multiline
+          style={styles.input_form}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            SetRemarks(e.target.value);
+            setError("");
+          }}
+          value={remarks}
+          placeholder={"Optionally add a brief description of the request"}
+        />
+      </div>
+      <p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
+      <div
+        style={{
+          backgroundColor: colors.button_border,
+          marginTop: "16px",
+          width: "100%",
+          height: "2px",
+          marginBottom: 8,
+        }}
+      />
+      <Button
+        type={"dark"}
+        label={"Create Transaction"}
+        onClick={async () => {
+          console.log(selecteditems);
+          const data = await TransactionCreateAPI({
+            equipments: selecteditems,
+            teacher: selectedteacher,
+            remarks: remarks || " ",
+            transaction_status: "Pending Approval",
+            borrower: user.data?.id || 0,
+          });
+          if (data[0]) {
+            setError("Created successfully");
+            toast(
+              `New transaction created successfuly,  ${
+                typeof data[1] == "object" ? "ID:" + data[1].id : ""
+              }`,
+              {
+                position: "top-right",
+                autoClose: 2000,
+                hideProgressBar: false,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+                progress: undefined,
+                theme: "light",
+              }
+            );
+            queryClient.invalidateQueries({
+              queryKey: ["equipment_instances"],
+            });
+            queryClient.invalidateQueries({
+              queryKey: ["transactions"],
+            });
+            navigate("/dashboard");
+          } else {
+            setError(JSON.stringify(data[1]));
+          }
+        }}
+      />
+    </div>
+  );
+}