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

src/App.tsx

@@ -18,6 +18,7 @@ import EquipmentInstanceLogsPage from "./Pages/EquipmentInstanceLogsPage/Equipme
 import EquipmentInstancesFilteredListPage from "./Pages/EquipmentInstancesListPage/EquipmentInstancesFilteredListPage";
 import RestrictedPage from "./Components/RestrictedPage/RestrictedPage";
 import TransactionsListPage from "./Pages/TransactionsListPage/TransactionsListPage";
+import AddTransactionPage from "./Pages/AddTransactionPage/AddTransactionPage";
 
 const queryClient = new QueryClient();
 const router = createHashRouter([
@@ -125,6 +126,17 @@ const router = createHashRouter([
     ),
     errorElement: <ErrorPage />,
   },
+  {
+    path: "/new/transaction",
+    element: (
+      <>
+        <Revalidator />
+        <RestrictedPage allow_only="Student" />
+        <AddTransactionPage />
+      </>
+    ),
+    errorElement: <ErrorPage />,
+  },
 ]);
 
 export default function App() {

src/Components/API/API.tsx

@@ -20,6 +20,7 @@ import {
   TransactionUpdateType,
   TransactionType,
   ClearanceType,
+  TransactionCreateType,
 } from "../Types/Types";
 
 const debug = true;
@@ -197,6 +198,17 @@ export async function ClearanceAPI() {
     });
 }
 
+export async function TeachersAPI() {
+  const config = await GetConfig();
+  return instance
+    .get("api/v1/accounts/teachers/", config)
+    .then((response) => {
+      return response.data as Array<UserType>;
+    })
+    .catch(() => {
+      console.log("Error retrieving teachers");
+    });
+}
 // Equipment APIs
 
 export async function EquipmentAPI(id: number) {
@@ -343,6 +355,18 @@ export async function EquipmentInstancesAPI() {
     });
 }
 
+export async function AvailableEquipmentInstancesAPI() {
+  const config = await GetConfig();
+  return instance
+    .get("api/v1/equipments/equipment_instances/available", config)
+    .then((response) => {
+      return response.data as EquipmentInstanceListType;
+    })
+    .catch(() => {
+      console.log("Error retrieving available equipments");
+    });
+}
+
 export async function EquipmentInstanceCreateAPI(
   equipment_instance: AddEquipmentInstanceType
 ) {
@@ -384,6 +408,19 @@ export async function TransactionAPI(id: number) {
     });
 }
 
+export async function TransactionCreateAPI(transaction: TransactionCreateType) {
+  const config = await GetConfig();
+  return instance
+    .post(`api/v1/transactions/`, transaction, config)
+    .then((response) => {
+      return [true, response.data as TransactionType];
+    })
+    .catch((error) => {
+      console.log("Error creating transaction");
+      return [false, ParseError(error)];
+    });
+}
+
 export async function TransactionUpdateAPI(
   transaction: TransactionUpdateType,
   id: number

src/Components/DashboardPage/Student/StudentDashboard.tsx

@@ -2,10 +2,9 @@ import styles from "../../../styles";
 import { Button } from "@mui/material";
 import AddBoxIcon from "@mui/icons-material/AddBox";
 import { colors } from "../../../styles";
-import Popup from "reactjs-popup";
-import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 export default function StudentDashboard() {
-  const [addTransactionModalOpen, SetAddTransactionModalOpen] = useState(false);
+  const navigate = useNavigate();
   return (
     <div style={styles.flex_column}>
       <p
@@ -36,7 +35,7 @@ export default function StudentDashboard() {
             },
           }}
           onClick={() => {
-            SetAddTransactionModalOpen(true);
+            navigate("/new/transaction");
           }}
         >
           <AddBoxIcon
@@ -58,25 +57,6 @@ export default function StudentDashboard() {
           </p>
         </Button>
       </div>
-      <Popup
-        open={addTransactionModalOpen}
-        onClose={() => SetAddTransactionModalOpen(false)}
-        modal
-        position={"top center"}
-        contentStyle={{
-          width: "32rem",
-          borderRadius: 16,
-          borderColor: "grey",
-          borderStyle: "solid",
-          borderWidth: 1,
-          padding: 16,
-          alignContent: "center",
-          justifyContent: "center",
-          textAlign: "center",
-        }}
-      >
-        <div />
-      </Popup>
     </div>
   );
 }

src/Components/DashboardPage/Student/StudentTransactionListView.tsx

@@ -44,7 +44,7 @@ export default function StudentTransactionListView() {
         <div
           style={{
             ...styles.flex_column,
-            ...{ height: "30vh", overflowY: "scroll" },
+            ...{ height: "50vh", overflowY: "scroll" },
           }}
         >
           {transactions.data ? (

src/Components/Drawer/Drawer.tsx

@@ -111,7 +111,7 @@ export default function Drawer() {
                   paddingLeft: "8px",
                   color:
                     clearance.data?.cleared === "Cleared"
-                      ? colors.green
+                      ? colors.font_dark
                       : colors.red,
                   margin: 0,
                   alignSelf: "center",

src/Components/TransactionEntry/TransactionEntry.tsx

@@ -91,6 +91,22 @@ export default function TransactionEntry(props: props) {
             Teacher: {props.transaction.teacher.name}{" "}
             {`(ID:${props.transaction.teacher.id})`}
           </p>
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_S,
+              ...{
+                height: "64px",
+                textAlign: "left",
+                margin: 0,
+                marginTop: "8px",
+                flexWrap: "wrap",
+                overflowY: "scroll",
+              },
+            }}
+          >
+            {props.transaction.remarks}
+          </p>
         </div>
         <div style={{ flex: 1 }}>
           <p
@@ -100,18 +116,27 @@ export default function TransactionEntry(props: props) {
               ...{ textAlign: "right", margin: 0 },
             }}
           >
-            Equipments:{" "}
+            Equipments:
           </p>
-          <div style={styles.flex_column}>
+          <div
+            style={{
+              ...styles.flex_column,
+              ...{ height: "96px", overflowY: "scroll" },
+            }}
+          >
             {props.transaction.equipments.map((equipment) => (
               <p
                 style={{
                   ...styles.text_dark,
                   ...styles.text_S,
-                  ...{ textAlign: "right", margin: 0 },
+                  ...{
+                    textAlign: "right",
+                    margin: 0,
+                    lineHeight: 0,
+                  },
                 }}
               >
-                - {equipment.name}
+                {` - ${equipment.name} (ID:${equipment.id})`}
               </p>
             ))}
           </div>

src/Components/Types/Types.tsx

@@ -98,6 +98,7 @@ export type EquipmentInstanceLogType = {
 export type EquipmentInstanceLogListType = Array<EquipmentInstanceLogType>;
 
 export type UserType = {
+  id: number;
   username: string;
   email: string;
   avatar: string;
@@ -123,10 +124,19 @@ export type TransactionType = {
   }>;
   transaction_status: string;
   timestamp: string;
+  remarks: string;
 };
 
 export type TransactionListType = Array<TransactionType>;
 
+export type TransactionCreateType = {
+  equipments: number[];
+  remarks: string;
+  teacher: number;
+  borrower: number;
+  transaction_status: "Pending Approval";
+};
+
 export type TransactionUpdateType = {
   transaction_status: string;
 };

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>
+  );
+}