From d226d77306207bd3b8a8b8daa3e2068cd8203a1d Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Thu, 14 Dec 2023 19:51:33 +0800
Subject: [PATCH] Added functionality to transaction list page

---
 src/Components/API/API.tsx                    |  15 ++
 src/Components/Types/Types.tsx                |  19 ++
 .../TransactionsListPage.tsx                  | 225 +++++++++++++++++-
 3 files changed, 258 insertions(+), 1 deletion(-)

diff --git a/src/Components/API/API.tsx b/src/Components/API/API.tsx
index 648bc25..d033501 100644
--- a/src/Components/API/API.tsx
+++ b/src/Components/API/API.tsx
@@ -16,6 +16,7 @@ import {
   EquipmentLogListType,
   EquipmentInstanceLogListType,
   UserType,
+  TransactionListType,
 } from "../Types/Types";
 
 const debug = true;
@@ -341,3 +342,17 @@ export async function EquipmentInstanceCreateAPI(
       return [false, ParseError(error)];
     });
 }
+
+// Transactions APIs
+
+export async function TransactionsAPI() {
+  const config = await GetConfig();
+  return instance
+    .get("api/v1/transactions/", config)
+    .then((response) => {
+      return response.data as TransactionListType;
+    })
+    .catch(() => {
+      console.log("Error retrieving transactions");
+    });
+}
diff --git a/src/Components/Types/Types.tsx b/src/Components/Types/Types.tsx
index 13973c4..007543f 100644
--- a/src/Components/Types/Types.tsx
+++ b/src/Components/Types/Types.tsx
@@ -106,3 +106,22 @@ export type UserType = {
   is_teacher: boolean;
   is_technician: boolean;
 };
+
+export type TransactionType = {
+  id: number;
+  borrower: {
+    id: number;
+    name: string;
+  };
+  teacher: {
+    id: number;
+    name: string;
+  };
+  equipments: Array<{
+    id: number;
+    name: string;
+  }>;
+  transaction_status: string;
+};
+
+export type TransactionListType = Array<TransactionType>;
diff --git a/src/Pages/TransactionsListPage/TransactionsListPage.tsx b/src/Pages/TransactionsListPage/TransactionsListPage.tsx
index f22438e..7a4f28f 100644
--- a/src/Pages/TransactionsListPage/TransactionsListPage.tsx
+++ b/src/Pages/TransactionsListPage/TransactionsListPage.tsx
@@ -1,3 +1,226 @@
+import { useQuery } from "@tanstack/react-query";
+import Header from "../../Components/Header/Header";
+import styles from "../../styles";
+import { TransactionsAPI } from "../../Components/API/API";
+import { CircularProgress } from "@mui/material";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Paper from "@mui/material/Paper";
+import { colors } from "../../styles";
+import Popup from "reactjs-popup";
+import { useState } from "react";
+
 export default function TransactionsListPage() {
-  return <div>{"TransactionsListPage"}</div>;
+  const [EditTransactionOpen, SetEditTransactionOpen] = useState(false);
+  const [SelectedTransaction, SetSelectedTransaction] = useState(0);
+  const [EditEquipmentsOpen, SetEditEquipmentsOpen] = useState(false);
+  const transactions = useQuery({
+    queryKey: ["transactions"],
+    queryFn: TransactionsAPI,
+  });
+  if (transactions.isLoading) {
+    return (
+      <div style={styles.background}>
+        <Header label={"Transactions"} />
+        <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={"Transactions"} />
+      <div
+        style={{
+          ...styles.flex_column,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          width: "100%",
+          minHeight: "100%",
+          minWidth: "100%",
+          flexWrap: "wrap",
+        }}
+      >
+        <div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
+          <TableContainer component={Paper}>
+            <Table sx={{ minWidth: "32rem" }} size="medium">
+              <TableHead>
+                <TableRow style={{ backgroundColor: colors.header_color }}>
+                  <TableCell align="center" style={styles.text_light}>
+                    ID
+                  </TableCell>
+                  <TableCell align="center" style={styles.text_light}>
+                    Borrower
+                  </TableCell>
+                  <TableCell align="center" style={styles.text_light}>
+                    Teacher
+                  </TableCell>
+                  <TableCell align="center" style={styles.text_light}>
+                    Status
+                  </TableCell>
+                  <TableCell align="center" style={styles.text_light}>
+                    Equipments
+                  </TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {transactions.data ? (
+                  transactions.data.map((transaction) => (
+                    <TableRow
+                      key={transaction.id}
+                      sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                    >
+                      <TableCell
+                        align="center"
+                        component="th"
+                        scope="row"
+                        onClick={() => {
+                          SetSelectedTransaction(transaction.id);
+                          SetEditTransactionOpen(true);
+                        }}
+                      >
+                        {transaction.id}
+                      </TableCell>
+                      <TableCell
+                        align="center"
+                        component="th"
+                        scope="row"
+                        onClick={() => {
+                          SetSelectedTransaction(transaction.id);
+                          SetEditTransactionOpen(true);
+                        }}
+                      >
+                        {transaction.borrower.name}
+                      </TableCell>
+                      <TableCell
+                        align="center"
+                        component="th"
+                        scope="row"
+                        onClick={() => {
+                          SetSelectedTransaction(transaction.id);
+                          SetEditTransactionOpen(true);
+                        }}
+                      >
+                        {transaction.teacher.name}
+                      </TableCell>
+                      <TableCell
+                        align="center"
+                        component="th"
+                        scope="row"
+                        onClick={() => {
+                          SetSelectedTransaction(transaction.id);
+                          SetEditTransactionOpen(true);
+                        }}
+                      >
+                        {transaction.transaction_status}
+                      </TableCell>
+                      <TableCell align="center">
+                        <TableContainer component={Paper}>
+                          <Table sx={{ minWidth: "4rem" }} size="medium">
+                            <TableHead>
+                              <TableRow
+                                style={{ backgroundColor: colors.header_color }}
+                              >
+                                <TableCell
+                                  align="center"
+                                  style={styles.text_light}
+                                >
+                                  ID
+                                </TableCell>
+                                <TableCell
+                                  align="center"
+                                  style={styles.text_light}
+                                >
+                                  Name
+                                </TableCell>
+                              </TableRow>
+                            </TableHead>
+                            <TableBody>
+                              {transaction.equipments.map((equipment) => (
+                                <TableRow
+                                  key={transaction.id}
+                                  sx={{
+                                    "&:last-child td, &:last-child th": {
+                                      border: 0,
+                                    },
+                                  }}
+                                  onClick={() => {
+                                    SetEditTransactionOpen(false);
+                                    SetEditEquipmentsOpen(true);
+                                  }}
+                                >
+                                  <TableCell
+                                    align="center"
+                                    component="th"
+                                    scope="row"
+                                  >
+                                    {equipment.id}
+                                  </TableCell>
+                                  <TableCell
+                                    align="center"
+                                    component="th"
+                                    scope="row"
+                                  >
+                                    {equipment.name}
+                                  </TableCell>
+                                </TableRow>
+                              ))}
+                            </TableBody>
+                          </Table>
+                        </TableContainer>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                ) : (
+                  <></>
+                )}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </div>
+      </div>
+      <Popup
+        open={EditTransactionOpen}
+        onClose={() => SetEditTransactionOpen(false)}
+        modal
+        position={"top center"}
+        contentStyle={styles.popup_center}
+      >
+        <p style={styles.text_dark}>Transaction Modal</p>
+      </Popup>
+      <Popup
+        open={EditEquipmentsOpen}
+        onClose={() => SetEditEquipmentsOpen(false)}
+        modal
+        position={"top center"}
+        contentStyle={styles.popup_center}
+      >
+        <p style={styles.text_dark}>Edit Transaction Equipment Modal</p>
+      </Popup>
+    </div>
+  );
 }