booth transaction history

backend/src/api/booth.ts

@@ -134,4 +134,15 @@ router.post("/collectTransaction", async (req, res) => {
     return res.json({ message: "Transaction completed" })
 })
 
+router.get("/getTransactions", async (req, res) => {
+    const transactions = await sql<
+        { name: string; completed_timestamp: Date; amount: string }[]
+    >`
+        SELECT Transactions.completed_timestamp, Transactions.amount, Users.name FROM Transactions INNER JOIN Users ON Users.uid = Transactions.sender_uid WHERE receiver_uid = ${
+            req.user!.uid
+        } AND status = 'COMPLETED'
+    `
+    res.json(transactions)
+})
+
 export default router

backend/src/passwords.ts

@@ -14,4 +14,4 @@ export async function verify(password: string, hash: string): Promise<boolean> {
         scrypt(password, salt, 64, (err, buf) => (err ? rej(err) : res(buf))),
     )
     return buf.toString("hex") === hashed
-}
+}

frontend/src/api.ts

@@ -143,7 +143,7 @@ export async function addMoney(
   }
 }
 
-export async function getTransactionHistory(): Promise<
+export async function getTransactionHistoryStudent(): Promise<
   TransactionHistoryDetails[] | null
 > {
   try {
@@ -157,6 +157,20 @@ export async function getTransactionHistory(): Promise<
   }
 }
 
+export async function getTransactionHistoryBooth(): Promise<
+  TransactionHistoryDetails[] | null
+> {
+  try {
+    const resp = await fetcher.get("/booth/getTransactions");
+    return resp.data.map((obj: Record<string, string>) => ({
+      ...obj,
+      completed_timestamp: new Date(obj.completed_timestamp),
+    })) as TransactionHistoryDetails[];
+  } catch (error) {
+    return null;
+  }
+}
+
 export async function getTopupHistory(): Promise<TopupHistoryDetails[] | null> {
   try {
     const resp = await fetcher.get("/student/getTopups");

frontend/src/main.tsx

@@ -24,6 +24,7 @@ import UserProvider from "./UserProvider";
 import StudentTransactionHistoryPage from "./routes/student_transactions_view";
 import StudentTopupHistoryPage from "./routes/student_topups_view";
 import AdminAddPage from "./routes/admin_add_account";
+import BoothTransactionHistoryPage from "./routes/booth_transactions_view";
 
 const router = createBrowserRouter([
   {
@@ -63,6 +64,10 @@ const router = createBrowserRouter([
         path: "/booth",
         element: <BoothMainPage />,
       },
+      {
+        path: "/booth/transactions",
+        element: <BoothTransactionHistoryPage />,
+      },
       {
         path: "/booth/payment",
         element: <BoothConfirmPaymentPage />,

frontend/src/routes/booth_transactions_view.tsx

@@ -0,0 +1,89 @@
+import {
+  Container,
+  Stack,
+  Typography,
+  Card,
+  CardContent,
+  Button,
+} from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import Header from "../components/header";
+import { useContext, useEffect, useState } from "react";
+import { UserType } from "../types/user";
+import Decimal from "decimal.js";
+import { UserContext } from "../UserProvider";
+import { TransactionHistoryDetails } from "../types/transaction";
+import { getTransactionHistoryBooth } from "../api";
+
+export default function BoothTransactionHistoryPage() {
+  const navigate = useNavigate();
+  const { user } = useContext(UserContext);
+  const [transactionDetails, setTransactionDetails] = useState<
+    TransactionHistoryDetails[] | null
+  >(null);
+
+  useEffect(() => {
+    if (user === undefined) {
+      return;
+    } else if (user === null) {
+      return navigate("/");
+    } else if (user.type === UserType.STUDENT) {
+      navigate("/student");
+    } else if (user.type === UserType.ADMIN) {
+      navigate("/admin");
+    } else if (user.type === UserType.BOOTH) {
+      getTransactionHistoryBooth().then(setTransactionDetails);
+      return;
+    }
+  }, [user]);
+
+  if (!user || !transactionDetails) {
+    return <></>;
+  }
+
+  return (
+    <Container maxWidth="sm">
+      <Header />
+      <Stack
+        direction="column"
+        spacing={3}
+        sx={{
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Button
+          variant="outlined"
+          color="white"
+          onClick={() => {
+            navigate("/booth");
+          }}
+        >
+          Back
+        </Button>
+        <Typography variant="body1">Transaction History</Typography>
+        {transactionDetails.length > 0 ? (
+          transactionDetails.map((transaction, idx) => (
+            <Card
+              variant="outlined"
+              key={idx}
+              sx={{ width: "100%", borderColor: "#ffffff" }}
+            >
+              <CardContent>
+                <Typography variant="h5">
+                  ${new Decimal(transaction.amount).toFixed(2)}
+                </Typography>
+                <Typography variant="body1">From {transaction.name}</Typography>
+                <Typography variant="body1">
+                  {transaction.completed_timestamp.toLocaleString()}
+                </Typography>
+              </CardContent>
+            </Card>
+          ))
+        ) : (
+          <Typography variant="italic1">No transactions yet</Typography>
+        )}
+      </Stack>
+    </Container>
+  );
+}

frontend/src/routes/student_transactions_view.tsx

@@ -13,7 +13,7 @@ import { UserType } from "../types/user";
 import Decimal from "decimal.js";
 import { UserContext } from "../UserProvider";
 import { TransactionHistoryDetails } from "../types/transaction";
-import { getTransactionHistory } from "../api";
+import { getTransactionHistoryStudent } from "../api";
 
 export default function StudentTransactionHistoryPage() {
   const navigate = useNavigate();
@@ -28,7 +28,7 @@ export default function StudentTransactionHistoryPage() {
     } else if (user === null) {
       return navigate("/");
     } else if (user.type === UserType.STUDENT) {
-      getTransactionHistory().then(setTransactionDetails);
+      getTransactionHistoryStudent().then(setTransactionDetails);
       return;
     } else if (user.type === UserType.ADMIN) {
       navigate("/admin");