+ navigate(`/view/transaction/${props.transaction.id}`, {
+ replace: true,
+ state: { id: props.transaction.id },
+ })
+ }
+ >
+
+
+ ID: {props.transaction.id}
+
+
+ {props.transaction.timestamp}
+
+
+
+
+
+ Borrower: {props.transaction.borrower.name}{" "}
+ {`(ID:${props.transaction.borrower.id})`}
+
+
+ Teacher: {props.transaction.teacher.name}{" "}
+ {`(ID:${props.transaction.teacher.id})`}
+
+
+ {props.transaction.remarks}
+
+
+
+
+ Equipments:
+
+
+ {props.transaction.equipments.map((equipment) => (
+
+ {` - ${equipment.name} (ID:${equipment.id})`}
+
+ ))}
+
+
+
+
+ {`${props.transaction.transaction_status}`}
+
+
+ );
+}
diff --git a/src/Components/TransactionPDF/TransactionPDF.tsx b/src/Components/TransactionPDF/TransactionPDF.tsx
new file mode 100644
index 0000000..285fdae
--- /dev/null
+++ b/src/Components/TransactionPDF/TransactionPDF.tsx
@@ -0,0 +1,129 @@
+import { Document, Page, Text, View } from "@react-pdf/renderer";
+import { TransactionType } from "../Types/Types";
+import { colors } from "../../styles";
+import StatusTextColor from "../StatusTextColor/StatusTextColor";
+
+type props = {
+ transaction: TransactionType;
+};
+export default function TransactionPDF(props: props) {
+ return (
+
+
+
+
+
+ Transaction ID: {props.transaction.id}
+
+
+ {props.transaction.timestamp}
+
+
+
+
+
+
+ Borrower: {props.transaction.borrower.name}{" "}
+ {`(ID:${props.transaction.borrower.id})`}
+
+
+ Teacher: {props.transaction.teacher.name}{" "}
+ {`(ID:${props.transaction.teacher.id})`}
+
+
+ {props.transaction.remarks}
+
+
+
+
+ Equipments:
+
+
+ {props.transaction.equipments.map((equipment) => (
+
+ {` - ${equipment.name} (ID:${equipment.id})`}
+
+ ))}
+
+
+
+
+
+ {`${props.transaction.transaction_status}`}
+
+
+
+
+
+ );
+}
diff --git a/src/Components/Types/Types.tsx b/src/Components/Types/Types.tsx
index b8afb35..8d2abcd 100644
--- a/src/Components/Types/Types.tsx
+++ b/src/Components/Types/Types.tsx
@@ -98,6 +98,7 @@ export type EquipmentInstanceLogType = {
export type EquipmentInstanceLogListType = Array
;
export type UserType = {
+ id: number;
username: string;
email: string;
avatar: string;
@@ -122,10 +123,25 @@ export type TransactionType = {
name: string;
}>;
transaction_status: string;
+ timestamp: string;
+ remarks: string;
};
export type TransactionListType = Array;
+export type TransactionCreateType = {
+ equipments: number[];
+ remarks: string;
+ teacher: number;
+ borrower: number;
+ transaction_status: "Pending Approval";
+};
+
export type TransactionUpdateType = {
transaction_status: string;
};
+
+export type ClearanceType = {
+ cleared: string;
+ uncleared_transactions: number;
+};
diff --git a/src/Pages/AddTransactionPage/AddTransactionPage.tsx b/src/Pages/AddTransactionPage/AddTransactionPage.tsx
new file mode 100644
index 0000000..741e9fa
--- /dev/null
+++ b/src/Pages/AddTransactionPage/AddTransactionPage.tsx
@@ -0,0 +1,205 @@
+import { useState } from "react";
+import styles from "../../styles";
+import { colors } from "../../styles";
+import TextField from "@mui/material/TextField";
+import AddToQueueIcon from "@mui/icons-material/AddToQueue";
+import Button from "../../Components/Button/Button";
+import { toast } from "react-toastify";
+import {
+ AvailableEquipmentInstancesAPI,
+ TransactionCreateAPI,
+ TeachersAPI,
+ UserAPI,
+} from "../../Components/API/API";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
+import { useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
+import {
+ Select,
+ CircularProgress,
+ MenuItem,
+ OutlinedInput,
+} from "@mui/material";
+import React from "react";
+import Header from "../../Components/Header/Header";
+import { useNavigate } from "react-router-dom";
+
+export default function AddTransactionPage() {
+ const navigate = useNavigate();
+ const queryClient = useQueryClient();
+ const [selecteditems, SetSelectedItems] = useState([]);
+ const [selectedteacher, SetSelectedTeacher] = useState(0);
+ const [remarks, SetRemarks] = useState("");
+ const [error, setError] = useState("");
+
+ const equipments = useQuery({
+ queryKey: ["equipment_instances_available"],
+ queryFn: AvailableEquipmentInstancesAPI,
+ });
+
+ const teachers = useQuery({
+ queryKey: ["teachers"],
+ queryFn: TeachersAPI,
+ });
+
+ const user = useQuery({
+ queryKey: ["user"],
+ queryFn: UserAPI,
+ });
+ const isLoading =
+ equipments.isLoading || teachers.isLoading || user.isLoading;
+
+ if (isLoading) {
+ return (
+
+ );
+ }
+ return (
+
+
+
+
+
+
+ Items Requested
+
+
+
+ Assigned Teacher
+
+
+ ) => {
+ SetRemarks(e.target.value);
+ setError("");
+ }}
+ value={remarks}
+ placeholder={"Optionally add a brief description of the request"}
+ />
+
+
{error}
+
+
@@ -14,7 +16,20 @@ export default function Dashboard() {
- Welcome student!
+
+
+
+
Welcome teacher!
diff --git a/src/Pages/TransactionPage/TransactionPage.tsx b/src/Pages/TransactionPage/TransactionPage.tsx
new file mode 100644
index 0000000..f0dd47b
--- /dev/null
+++ b/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 (
+ <>
+
+
+ Loading
+
+
+ );
+ }
+ 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 (
+
+
+
+
+ }
+ fileName="transaction.pdf"
+ >
+ {({ loading }) =>
+ loading ? "Loading document..." : "Download Transaction"
+ }
+
+
+
+
+
+