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

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