Add transaction view for student in dashboard page complete with filtering

src/Components/API/API.tsx

@@ -386,3 +386,27 @@ export async function TransactionUpdateAPI(
       return [false, ParseError(error)];
     });
 }
+
+export async function TransactionsByStudentAPI() {
+  const config = await GetConfig();
+  return instance
+    .get("api/v1/transactions/student/", config)
+    .then((response) => {
+      return response.data as TransactionListType;
+    })
+    .catch(() => {
+      console.log("Error retrieving transactions for current student");
+    });
+}
+
+export async function TransactionsByTeacherAPI() {
+  const config = await GetConfig();
+  return instance
+    .get("api/v1/transactions/teacher/", config)
+    .then((response) => {
+      return response.data as TransactionListType;
+    })
+    .catch(() => {
+      console.log("Error retrieving transactions for current teacher");
+    });
+}

src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx

@@ -19,12 +19,17 @@ import ShoppingCartCheckoutIcon from "@mui/icons-material/ShoppingCartCheckout";
 import AssignmentReturnedIcon from "@mui/icons-material/AssignmentReturned";
 import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined";
 import CancelIcon from "@mui/icons-material/Cancel";
+import ClearAllIcon from "@mui/icons-material/ClearAll";
 import { useState } from "react";
 
-export default function StudentTransactionFilterMenu() {
+type props = {
+  filter: string;
+  setFilter: React.Dispatch<React.SetStateAction<string>>;
+};
+
+export default function StudentTransactionFilterMenu(props: props) {
   const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false);
   const [additemmodalOpen, SetAddItemModalOpen] = useState(false);
-  const [filter, setFilter] = useState("");
   return (
     <>
       <p
@@ -48,14 +53,44 @@ export default function StudentTransactionFilterMenu() {
       >
         <FormControl sx={{ width: "384px" }}>
           <InputLabel style={{ backgroundColor: "white" }}>
-            Filter transactions by
+            Filter Transactions
           </InputLabel>
           <Select
-            value={filter}
+            value={props.filter}
             onChange={(e: SelectChangeEvent<string>) =>
-              setFilter(e.target.value)
+              props.setFilter(e.target.value)
             }
           >
+            <MenuItem value={""}>
+              <Button
+                style={{
+                  ...styles.row,
+                  ...{
+                    alignSelf: "center",
+                    justifyContent: "center",
+                    flexWrap: "wrap",
+                  },
+                }}
+              >
+                <ClearAllIcon
+                  style={{
+                    height: 32,
+                    width: 32,
+                    fill: colors.font_dark,
+                    marginLeft: "1rem",
+                    marginRight: "1rem",
+                  }}
+                />
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_M,
+                  }}
+                >
+                  All
+                </p>
+              </Button>
+            </MenuItem>
             <MenuItem value={"Pending Approval"}>
               <Button
                 style={{

src/Components/DashboardPage/Student/StudentTransactionListView.tsx

@@ -1,3 +1,67 @@
+import { useQuery } from "@tanstack/react-query";
+import { TransactionsByStudentAPI } from "../../API/API";
+import styles from "../../../styles";
+import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
+import React, { useState } from "react";
+import TransactionEntry from "../../TransactionEntry/TransactionEntry";
+import StudentTransactionFilterMenu from "./StudentTransactionFilterMenu";
+
 export default function StudentTransactionListView() {
-  return <div>{"StudentTransactionListView"}</div>;
+  const transactions = useQuery({
+    queryKey: ["transactions_student"],
+    queryFn: TransactionsByStudentAPI,
+  });
+  const [filter, setFilter] = useState("");
+  if (transactions.isLoading) {
+    return (
+      <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>
+    );
+  }
+  return (
+    <div>
+      <div style={styles.flex_column}>
+        <StudentTransactionFilterMenu filter={filter} setFilter={setFilter} />
+        <div style={{ marginTop: "16px" }} />
+        <div
+          style={{
+            ...styles.flex_column,
+            ...{ height: "30vh", overflowY: "scroll" },
+          }}
+        >
+          {transactions.data ? (
+            transactions.data
+              .filter((transaction) =>
+                filter !== "" ? transaction.transaction_status == filter : true
+              )
+              .map((transaction) => (
+                <React.Fragment key={transaction.id}>
+                  <TransactionEntry transaction={transaction} />
+                </React.Fragment>
+              ))
+          ) : (
+            <></>
+          )}
+        </div>
+      </div>
+    </div>
+  );
 }

src/Components/TransactionEntry/TransactionEntry.tsx

@@ -0,0 +1,121 @@
+import styles from "../../styles";
+import { colors } from "../../styles";
+import { TransactionType } from "../Types/Types";
+export interface props {
+  transaction: TransactionType;
+}
+
+function StatusText(props: { status: string }) {
+  let color;
+  if (
+    props.status === "Pending Approval" ||
+    props.status === "Returned: Pending Checking"
+  ) {
+    color = colors.orange;
+  } else if (
+    props.status === "Approved" ||
+    props.status === "Finalized" ||
+    props.status === "Borrowed"
+  ) {
+    color = colors.green;
+  } else {
+    color = colors.red;
+  }
+  return (
+    <p
+      style={{
+        ...styles.text_dark,
+        ...styles.text_S,
+        ...{
+          textAlign: "center",
+          color: color,
+        },
+      }}
+    >
+      {props.status}
+    </p>
+  );
+}
+export default function TransactionEntry(props: props) {
+  return (
+    <div
+      style={{
+        alignSelf: "center",
+        justifySelf: "center",
+        width: "384px",
+        backgroundColor: colors.header_color,
+        borderRadius: 16,
+        margin: "16px",
+        padding: "16px",
+      }}
+    >
+      <div style={styles.flex_row}>
+        <p
+          style={{
+            ...styles.text_dark,
+            ...styles.text_S,
+            ...{ textAlign: "left", flex: 1 },
+          }}
+        >
+          ID: {props.transaction.id}
+        </p>
+        <p
+          style={{
+            ...styles.text_dark,
+            ...styles.text_S,
+            ...{ textAlign: "right", flex: 2 },
+          }}
+        >
+          Timestamp: {props.transaction.timestamp}
+        </p>
+      </div>
+      <div style={styles.flex_row}>
+        <div style={{ flex: 1 }}>
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_S,
+              ...{ textAlign: "left", margin: 0 },
+            }}
+          >
+            Borrower: {props.transaction.borrower.name}
+          </p>
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_S,
+              ...{ textAlign: "left", margin: 0 },
+            }}
+          >
+            Teacher: {props.transaction.teacher.name}
+          </p>
+        </div>
+        <div style={{ flex: 2 }}>
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_S,
+              ...{ textAlign: "right", margin: 0 },
+            }}
+          >
+            Equipments:{" "}
+          </p>
+          <div style={styles.flex_column}>
+            {props.transaction.equipments.map((equipment) => (
+              <p
+                style={{
+                  ...styles.text_dark,
+                  ...styles.text_S,
+                  ...{ textAlign: "right", margin: 0 },
+                }}
+              >
+                - {equipment.name}
+              </p>
+            ))}
+          </div>
+        </div>
+      </div>
+      <StatusText status={props.transaction.transaction_status} />
+    </div>
+  );
+}

src/Components/Types/Types.tsx

@@ -122,6 +122,7 @@ export type TransactionType = {
     name: string;
   }>;
   transaction_status: string;
+  timestamp: string;
 };
 
 export type TransactionListType = Array<TransactionType>;

src/Pages/DashboardPage/DashboardPage.tsx

@@ -4,7 +4,7 @@ import RestrictedComponent from "../../Components/RestrictedComponent/Restricted
 import TechnicianWidgets from "../../Components/DashboardPage/Technician/TechnicianWidgets";
 import TechnicianEquipmentButtons from "../../Components/DashboardPage/Technician/TechnicianEquipmentButtons";
 import TechnicianLogButtons from "../../Components/DashboardPage/Technician/TechnicianLogButtons";
-import StudentTransactionFilterMenu from "../../Components/DashboardPage/Student/StudentTransactionFilterMenu";
+import StudentTransactionListView from "../../Components/DashboardPage/Student/StudentTransactionListView";
 export default function Dashboard() {
   return (
     <div style={styles.background}>
@@ -15,7 +15,7 @@ export default function Dashboard() {
         <TechnicianLogButtons />
       </RestrictedComponent>
       <RestrictedComponent allow_only={"Student"}>
-        <StudentTransactionFilterMenu />
+        <StudentTransactionListView />
       </RestrictedComponent>
       <RestrictedComponent allow_only={"Teacher"}>
         <p style={styles.text_dark}>Welcome teacher!</p>