Updated transaction entry and added transaction page and initial transactionpdf component

src/Pages/TransactionPage/TransactionPage.tsx

@@ -0,0 +1,110 @@
+import styles from "../../styles";
+import { useQuery } from "@tanstack/react-query";
+import { TransactionAPI } from "../../Components/API/API";
+import Header from "../../Components/Header/Header";
+import { useNavigate, useParams } from "react-router-dom";
+import { PDFDownloadLink, PDFViewer } from "@react-pdf/renderer";
+import { toast } from "react-toastify";
+import TransactionPDF from "../../Components/TransactionPDF/TransactionPDF";
+import { CircularProgress } from "@mui/material";
+
+export default function TransactionPage() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const transaction = useQuery({
+    queryKey: ["transaction", id],
+    queryFn: () => TransactionAPI(Number(id) || 0),
+  });
+  if (transaction.isLoading) {
+    return (
+      <>
+        <CircularProgress style={{ height: "128px", width: "128px" }} />
+        <p
+          style={{
+            ...styles.text_dark,
+            ...styles.text_L,
+          }}
+        >
+          Loading
+        </p>
+      </>
+    );
+  }
+  if (transaction.isError) {
+    toast(`Could not find transaction with ID:${id}`, {
+      position: "top-right",
+      autoClose: 2000,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+      theme: "light",
+    });
+    navigate("/dashboard");
+  }
+  return (
+    <div style={styles.background}>
+      <Header label={"View transaction"} />
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignContent: "center",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <PDFDownloadLink
+          document={
+            <TransactionPDF
+              transaction={
+                transaction.data || {
+                  id: 0,
+                  borrower: {
+                    id: 0,
+                    name: "",
+                  },
+                  teacher: {
+                    id: 0,
+                    name: "",
+                  },
+                  equipments: [],
+                  transaction_status: "",
+                  timestamp: "",
+                  remarks: "",
+                }
+              }
+            />
+          }
+          fileName="transaction.pdf"
+        >
+          {({ loading }) =>
+            loading ? "Loading document..." : "Download Transaction"
+          }
+        </PDFDownloadLink>
+        <PDFViewer style={{ width: "90%", height: "80vh" }}>
+          <TransactionPDF
+            transaction={
+              transaction.data || {
+                id: 0,
+                borrower: {
+                  id: 0,
+                  name: "",
+                },
+                teacher: {
+                  id: 0,
+                  name: "",
+                },
+                equipments: [],
+                transaction_status: "",
+                timestamp: "",
+                remarks: "",
+              }
+            }
+          />
+        </PDFViewer>
+      </div>
+    </div>
+  );
+}