+ {props.status}
+
+ );
+}
+export default function TransactionEntry(props: props) {
+ return (
+
+
+
+ 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})`}
+
+ ))}
+
+
+
+
+
+ );
+}
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}
+
+
@@ -15,7 +16,20 @@ export default function Dashboard() {
-
+
+
+
+
Welcome teacher!
diff --git a/src/styles.tsx b/src/styles.tsx
index 2f5cfbf..2e4c3ba 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -25,7 +25,6 @@ const styles: { [key: string]: React.CSSProperties } = {
text_dark: {
color: colors.font_dark,
fontWeight: "bold",
-
},
text_light: {
color: colors.font_light,
@@ -88,6 +87,13 @@ const styles: { [key: string]: React.CSSProperties } = {
textAlign: "center",
overflowY: "scroll",
},
+ student_filter_item: {
+ height: 32,
+ width: 32,
+ fill: colors.font_dark,
+ marginLeft: "1rem",
+ marginRight: "1rem",
+ },
};
export default styles;