Cleaned up code and added additional members field to create transaction page

src/Components/FilterTransaction/FilterTransaction.tsx

@@ -0,0 +1,24 @@
+import { TransactionListType } from "../Types/Types";
+import moment from "moment";
+
+const todayStartOfDay = moment().startOf("day").format("MM-DD-YYYY hh:mm A");
+const todayEndOfDay = moment().endOf("day").format("MM-DD-YYYY hh:mm A");
+const thisMonthStart = moment().startOf("month").format("MM-DD-YYYY hh:mm A");
+const thisMonthEnd = moment().endOf("month").format("MM-DD-YYYY hh:mm A");
+
+export function filter_today(transactions: TransactionListType) {
+  return transactions.filter((transaction) =>
+    moment(transaction.timestamp, "MM-DD-YYYY hh:mm A").isBetween(
+      todayStartOfDay,
+      todayEndOfDay
+    )
+  );
+}
+export function filter_thismonth(transactions: TransactionListType) {
+  return transactions.filter((transaction) =>
+    moment(transaction.timestamp, "MM-DD-YYYY hh:mm A").isBetween(
+      thisMonthStart,
+      thisMonthEnd
+    )
+  );
+}

src/Components/TransactionPDF/TransactionPDF.tsx

@@ -4,7 +4,7 @@ import { colors } from "../../styles";
 import StatusTextColor from "../StatusTextColor/StatusTextColor";
 
 type props = {
-  transaction: TransactionType;
+  transaction: TransactionType | null;
 };
 export default function TransactionPDF(props: props) {
   return (
@@ -30,7 +30,7 @@ export default function TransactionPDF(props: props) {
                 flex: 1,
               }}
             >
-              Transaction ID: {props.transaction.id}
+              Transaction ID: {props.transaction?.id}
             </Text>
             <Text
               style={{
@@ -40,7 +40,7 @@ export default function TransactionPDF(props: props) {
                 flex: 1,
               }}
             >
-              {props.transaction.timestamp}
+              {props.transaction?.timestamp}
             </Text>
           </View>
           <View style={{ paddingVertical: 8 }}></View>
@@ -54,8 +54,8 @@ export default function TransactionPDF(props: props) {
                   margin: 0,
                 }}
               >
-                Borrower: {props.transaction.borrower.name}{" "}
+                Borrower: {props.transaction?.borrower.name}{" "}
-                {`(ID:${props.transaction.borrower.id})`}
+                {`(ID:${props.transaction?.borrower.id})`}
               </Text>
               <Text
                 style={{
@@ -65,7 +65,7 @@ export default function TransactionPDF(props: props) {
                   margin: 0,
                 }}
               >
-                {`(${props.transaction.borrower.course})`}
+                {`(${props.transaction?.borrower.course})`}
               </Text>
               <Text
                 style={{
@@ -75,8 +75,8 @@ export default function TransactionPDF(props: props) {
                   margin: 0,
                 }}
               >
-                Teacher: {props.transaction.teacher.name}{" "}
+                Teacher: {props.transaction?.teacher.name}{" "}
-                {`(ID:${props.transaction.teacher.id})`}
+                {`(ID:${props.transaction?.teacher.id})`}
               </Text>
               <Text
                 style={{
@@ -86,7 +86,7 @@ export default function TransactionPDF(props: props) {
                   margin: 0,
                 }}
               >
-                Subject: {props.transaction.subject}
+                Subject: {props.transaction?.subject}
               </Text>
               <Text
                 style={{
@@ -98,7 +98,7 @@ export default function TransactionPDF(props: props) {
                   flexWrap: "wrap",
                 }}
               >
-                Remarks: {props.transaction.remarks}
+                Remarks: {props.transaction?.remarks}
               </Text>
               <Text
                 style={{
@@ -110,7 +110,7 @@ export default function TransactionPDF(props: props) {
                   flexWrap: "wrap",
                 }}
               >
-                Consumables: {props.transaction.consumables}
+                Consumables: {props.transaction?.consumables}
               </Text>
             </View>
             <View style={{ flex: 1 }}>
@@ -126,7 +126,7 @@ export default function TransactionPDF(props: props) {
                 Equipments:
               </Text>
               <View style={{ display: "flex", flexDirection: "column" }}>
-                {props.transaction.equipments.map((equipment) => (
+                {props.transaction?.equipments.map((equipment) => (
                   <Text
                     style={{
                       color: colors.font_dark,
@@ -146,12 +146,14 @@ export default function TransactionPDF(props: props) {
           <View style={{ alignContent: "center", justifyContent: "center" }}>
             <Text
               style={{
-                color: StatusTextColor(props.transaction.transaction_status),
+                color: StatusTextColor(
+                  props.transaction?.transaction_status || "Pending"
+                ),
                 textAlign: "center",
                 fontSize: 16,
               }}
             >
-              {`${props.transaction.transaction_status}`}
+              {`${props.transaction?.transaction_status}`}
             </Text>
           </View>
         </View>

src/Components/TransactionReportPDF/TransactionReportPDF.tsx

@@ -1,58 +1,20 @@
 import { Document, Page, Text, View } from "@react-pdf/renderer";
 import { TransactionListType } from "../Types/Types";
 import { colors } from "../../styles";
-import moment from "moment";
+import count_transaction_equipments from "../../CountTransactionEquipments/CountTransactionEquipments";
+import {
+  filter_today,
+  filter_thismonth,
+} from "../FilterTransaction/FilterTransaction";
 
 type props = {
-  transactions: TransactionListType;
+  transactions: TransactionListType | [];
   filter: "Day" | "Month";
 };
 
 export default function TransactionReportPDF(props: props) {
-  const todayStartOfDay = moment().startOf("day").format("MM-DD-YYYY hh:mm A");
+  const transactions_today = filter_today(props.transactions);
-  const todayEndOfDay = moment().endOf("day").format("MM-DD-YYYY hh:mm A");
+  const transactions_thismonth = filter_thismonth(props.transactions);
-  const thisMonthStart = moment().startOf("month").format("MM-DD-YYYY hh:mm A");
-  const thisMonthEnd = moment().endOf("month").format("MM-DD-YYYY hh:mm A");
-  function get_equipment_count_today() {
-    let n = 0;
-    props.transactions
-      .filter((transaction) =>
-        moment(transaction.timestamp, "MM-DD-YYYY hh:mm A").isBetween(
-          todayStartOfDay,
-          todayEndOfDay
-        )
-      )
-      .forEach((transaction) => (n += transaction.equipments.length));
-    return n;
-  }
-  function get_equipment_count_thismonth() {
-    let n = 0;
-    props.transactions
-      .filter((transaction) =>
-        moment(transaction.timestamp, "MM-DD-YYYY hh:mm A").isBetween(
-          thisMonthStart,
-          thisMonthEnd
-        )
-      )
-      .forEach((transaction) => (n += transaction.equipments.length));
-    return n;
-  }
-  function get_transactions_today() {
-    return props.transactions.filter((transaction) =>
-      moment(transaction.timestamp, "MM-DD-YYYY hh:mm A").isBetween(
-        todayStartOfDay,
-        todayEndOfDay
-      )
-    );
-  }
-  function get_transactions_thismonth() {
-    return props.transactions.filter((transaction) =>
-      moment(transaction.timestamp, "MM-DD-YYYY hh:mm A").isBetween(
-        thisMonthStart,
-        thisMonthEnd
-      )
-    );
-  }
   return (
     <Document>
       <Page size={"A4"}>
@@ -84,7 +46,8 @@ export default function TransactionReportPDF(props: props) {
               textAlign: "center",
             }}
           >
-            Total Equipments Processed: {get_equipment_count_today()}
+            Total Equipments Processed:{" "}
+            {count_transaction_equipments(transactions_today)}
           </Text>
           <Text
             style={{
@@ -93,7 +56,7 @@ export default function TransactionReportPDF(props: props) {
               textAlign: "center",
             }}
           >
-            Total Transactions: {get_transactions_today().length}
+            Total Transactions: {transactions_today.length}
           </Text>
           <Text
             style={{
@@ -104,7 +67,7 @@ export default function TransactionReportPDF(props: props) {
           >
             Rejected Transactions:{" "}
             {
-              get_transactions_today().filter(
+              transactions_today.filter(
                 (transaction) => transaction.transaction_status == "Rejected"
               ).length
             }
@@ -118,7 +81,7 @@ export default function TransactionReportPDF(props: props) {
           >
             Rejected Transactions:{" "}
             {
-              get_transactions_today().filter(
+              transactions_today.filter(
                 (transaction) => transaction.transaction_status == "Rejected"
               ).length
             }
@@ -132,7 +95,7 @@ export default function TransactionReportPDF(props: props) {
           >
             Finalized Transactions:{" "}
             {
-              get_transactions_today().filter(
+              transactions_today.filter(
                 (transaction) => transaction.transaction_status == "Finalized"
               ).length
             }
@@ -166,7 +129,8 @@ export default function TransactionReportPDF(props: props) {
               textAlign: "center",
             }}
           >
-            Total Equipments Processed: {get_equipment_count_thismonth()}
+            Total Equipments Processed:{" "}
+            {count_transaction_equipments(transactions_thismonth)}
           </Text>
           <Text
             style={{
@@ -175,7 +139,7 @@ export default function TransactionReportPDF(props: props) {
               textAlign: "center",
             }}
           >
-            Total Transactions: {get_transactions_thismonth().length}
+            Total Transactions: {transactions_thismonth.length}
           </Text>
           <Text
             style={{
@@ -186,7 +150,7 @@ export default function TransactionReportPDF(props: props) {
           >
             Rejected Transactions:{" "}
             {
-              get_transactions_thismonth().filter(
+              transactions_thismonth.filter(
                 (transaction) => transaction.transaction_status == "Rejected"
               ).length
             }
@@ -200,7 +164,7 @@ export default function TransactionReportPDF(props: props) {
           >
             Finalized Transactions:{" "}
             {
-              get_transactions_thismonth().filter(
+              transactions_thismonth.filter(
                 (transaction) => transaction.transaction_status == "Finalized"
               ).length
             }

src/Components/Types/Types.tsx

@@ -141,7 +141,8 @@ export type TransactionCreateType = {
   borrower: number;
   subject: string;
   consumables: string;
-  transaction_status: "Pending Approval";
+  transaction_status: string;
+  additional_members: string;
 };
 
 export type TransactionUpdateType = {

src/CountTransactionEquipments/CountTransactionEquipments.tsx

@@ -0,0 +1,9 @@
+import { TransactionListType } from "../Components/Types/Types";
+
+export default function count_transaction_equipments(
+  transactions: TransactionListType
+) {
+  let n = 0;
+  transactions.forEach((transaction) => (n += transaction.equipments.length));
+  return n;
+}

src/Pages/AddTransactionPage/AddTransactionPage.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import styles from "../../styles";
 import { colors } from "../../styles";
 import TextField from "@mui/material/TextField";
@@ -28,11 +28,23 @@ import { useNavigate } from "react-router-dom";
 export default function AddTransactionPage() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
+  const [transaction, SetTransaction] = useState({
+    equipments: [] as number[],
+    teacher: 0,
+    subject: "",
+    remarks: " ",
+    transaction_status: "Pending Approval",
+    consumables: " ",
+    additional_members: " ",
+    borrower: 0,
+  });
+  /*
   const [selecteditems, SetSelectedItems] = useState<number[]>([]);
   const [selectedteacher, SetSelectedTeacher] = useState<number>(0);
   const [subject, SetSubject] = useState("");
   const [remarks, SetRemarks] = useState("");
   const [consumables, SetConsumables] = useState("");
+  */
   const [error, setError] = useState("");
 
   const equipments = useQuery({
@@ -49,6 +61,14 @@ export default function AddTransactionPage() {
     queryKey: ["user"],
     queryFn: UserAPI,
   });
+
+  useEffect(() => {
+    if (user.data) {
+      SetTransaction({ ...transaction, borrower: user.data.id });
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user.data]);
   const isLoading =
     equipments.isLoading || teachers.isLoading || user.isLoading;
 
@@ -109,9 +129,12 @@ export default function AddTransactionPage() {
           <FormLabel style={styles.text_dark}>Items Requested</FormLabel>
           <Select
             multiple
-            value={selecteditems}
+            value={transaction.equipments}
             onChange={(event) =>
-              SetSelectedItems(event.target.value as number[])
+              SetTransaction({
+                ...transaction,
+                equipments: event.target.value as number[],
+              })
             }
             input={<OutlinedInput label="Name" />}
           >
@@ -127,9 +150,12 @@ export default function AddTransactionPage() {
         <FormControl style={{ marginTop: "8px" }}>
           <FormLabel style={styles.text_dark}>Assigned Teacher</FormLabel>
           <Select
-            value={selectedteacher}
+            value={transaction.teacher}
             onChange={(event) =>
-              SetSelectedTeacher(event.target.value as number)
+              SetTransaction({
+                ...transaction,
+                teacher: event.target.value as number,
+              })
             }
             label={"Assigned Teacher"}
             input={<OutlinedInput label="Assigned Teacher" />}
@@ -146,11 +172,11 @@ export default function AddTransactionPage() {
           <TextField
             style={styles.input_form}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              SetSubject(e.target.value);
+              SetTransaction({ ...transaction, subject: e.target.value });
               setError("");
             }}
             label={"Subject"}
-            value={subject}
+            value={transaction.subject}
             placeholder={"The subject requiring the equipments"}
           />
         </FormControl>
@@ -160,11 +186,11 @@ export default function AddTransactionPage() {
             multiline
             style={styles.input_form}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              SetRemarks(e.target.value);
+              SetTransaction({ ...transaction, remarks: e.target.value });
               setError("");
             }}
             label={"Remarks"}
-            value={remarks}
+            value={transaction.remarks}
             placeholder={"Optionally add a brief description of the request"}
           />
         </FormControl>
@@ -174,14 +200,33 @@ export default function AddTransactionPage() {
             multiline
             style={styles.input_form}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              SetConsumables(e.target.value);
+              SetTransaction({ ...transaction, consumables: e.target.value });
               setError("");
             }}
             label={"Consumables"}
-            value={consumables}
+            value={transaction.consumables}
             placeholder={"Write down any consumables here"}
           />
         </FormControl>
+        <FormControl style={{ marginTop: "8px" }}>
+          <FormLabel style={styles.text_dark}>Additional Members</FormLabel>
+          <TextField
+            multiline
+            style={styles.input_form}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              SetTransaction({
+                ...transaction,
+                additional_members: e.target.value,
+              });
+              setError("");
+            }}
+            label={"Additional Members"}
+            value={transaction.additional_members}
+            placeholder={
+              "Write down any additional members borrowing on behalf of this transaction"
+            }
+          />
+        </FormControl>
       </div>
       <p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
       <div
@@ -197,16 +242,8 @@ export default function AddTransactionPage() {
         type={"dark"}
         label={"Create Transaction"}
         onClick={async () => {
-          console.log(selecteditems);
+          console.log(JSON.stringify(transaction));
-          const data = await TransactionCreateAPI({
+          const data = await TransactionCreateAPI(transaction);
-            equipments: selecteditems,
-            teacher: selectedteacher,
-            subject: subject,
-            remarks: remarks || " ",
-            transaction_status: "Pending Approval",
-            consumables: consumables || "",
-            borrower: user.data?.id || 0,
-          });
           if (data[0]) {
             setError("Created successfully");
             toast(

src/Pages/TransactionPage/TransactionPage.tsx

@@ -15,25 +15,6 @@ export default function TransactionPage() {
     queryKey: ["transaction", id],
     queryFn: () => TransactionAPI(Number(id) || 0),
   });
-  const blank_transaction = {
-    id: 0,
-    borrower: {
-      id: 0,
-      name: "",
-      course: "",
-    },
-    teacher: {
-      id: 0,
-      name: "",
-    },
-    equipments: [],
-    transaction_status: "",
-    timestamp: "",
-    remarks: "",
-    subject: "",
-    consumables: "",
-  };
-
   if (transaction.isLoading) {
     return (
       <>
@@ -75,11 +56,7 @@ export default function TransactionPage() {
         }}
       >
         <PDFDownloadLink
-          document={
+          document={<TransactionPDF transaction={transaction.data || null} />}
-            <TransactionPDF
-              transaction={transaction.data || blank_transaction}
-            />
-          }
           fileName="transaction.pdf"
         >
           {({ loading }) =>
@@ -87,7 +64,7 @@ export default function TransactionPage() {
           }
         </PDFDownloadLink>
         <PDFViewer style={{ width: "90%", height: "80vh" }}>
-          <TransactionPDF transaction={transaction.data || blank_transaction} />
+          <TransactionPDF transaction={transaction.data || null} />
         </PDFViewer>
       </div>
     </div>

src/Pages/TransactionReportPage/TransactionReportPage.tsx

@@ -11,24 +11,6 @@ export default function TransactionReportPage() {
     queryKey: ["transactions"],
     queryFn: TransactionsAPI,
   });
-  const blank_transaction = {
-    id: 0,
-    borrower: {
-      id: 0,
-      name: "",
-      course: "",
-    },
-    teacher: {
-      id: 0,
-      name: "",
-    },
-    equipments: [],
-    transaction_status: "",
-    timestamp: "",
-    remarks: "",
-    subject: "",
-    consumables: "",
-  };
   if (transactions.isLoading) {
     return (
       <div style={styles.background}>
@@ -77,7 +59,7 @@ export default function TransactionReportPage() {
         <PDFDownloadLink
           document={
             <TransactionReportPDF
-              transactions={transactions.data || [blank_transaction]}
+              transactions={transactions.data || []}
               filter="Day"
             />
           }
@@ -89,7 +71,7 @@ export default function TransactionReportPage() {
         </PDFDownloadLink>
         <PDFViewer style={{ width: "90%", height: "80vh" }}>
           <TransactionReportPDF
-            transactions={transactions.data || [blank_transaction]}
+            transactions={transactions.data || []}
             filter="Day"
           />
         </PDFViewer>