Added transaction reports page

src/App.tsx

@@ -21,6 +21,7 @@ import TransactionsListPage from "./Pages/TransactionsListPage/TransactionsListP
 import AddTransactionPage from "./Pages/AddTransactionPage/AddTransactionPage";
 import TransactionPage from "./Pages/TransactionPage/TransactionPage";
 import EquipmentInstanceTallyPage from "./Pages/EquipmentTallyPage/EquipmentTallyPage";
+import TransactionReportPage from "./Pages/TransactionReportPage/TransactionReportPage";
 
 const queryClient = new QueryClient();
 const router = createHashRouter([
@@ -110,6 +111,17 @@ const router = createHashRouter([
     ),
     errorElement: <ErrorPage />,
   },
+  {
+    path: "/view/transactions/report",
+    element: (
+      <>
+        <Revalidator />
+        <RestrictedPage allow_only="Technician" />
+        <TransactionReportPage />
+      </>
+    ),
+    errorElement: <ErrorPage />,
+  },
   {
     path: "/view/equipments/logs",
     element: (

src/Components/DashboardPage/Technician/TechnicianLogButtons.tsx

@@ -2,6 +2,7 @@ import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import ManageSearchIcon from "@mui/icons-material/ManageSearch";
 import CountertopsIcon from "@mui/icons-material/Countertops";
+import AssessmentIcon from "@mui/icons-material/Assessment";
 import styles from "../../../styles";
 import { colors } from "../../../styles";
 
@@ -58,6 +59,37 @@ export default function TechnicianLogButtons() {
             SKU Logs
           </p>
         </Button>
+        <Button
+          style={{
+            ...styles.flex_column,
+            ...{
+              alignSelf: "center",
+              justifyContent: "center",
+              flexWrap: "wrap",
+            },
+          }}
+          onClick={() => {
+            navigate("/view/equipment_instances/logs");
+          }}
+        >
+          <ManageSearchIcon
+            style={{
+              height: 64,
+              width: 64,
+              fill: colors.font_dark,
+              marginLeft: "1rem",
+              marginRight: "1rem",
+            }}
+          />
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_M,
+            }}
+          >
+            Equipment Logs
+          </p>
+        </Button>
         <Button
           style={{
             ...styles.flex_column,
@@ -99,10 +131,10 @@ export default function TechnicianLogButtons() {
             },
           }}
           onClick={() => {
-            navigate("/view/equipment_instances/logs");
+            navigate("/view/transactions/report");
           }}
         >
-          <ManageSearchIcon
+          <AssessmentIcon
             style={{
               height: 64,
               width: 64,
@@ -117,7 +149,7 @@ export default function TechnicianLogButtons() {
               ...styles.text_M,
             }}
           >
-            Item Logs
+            Transaction Report
           </p>
         </Button>
       </div>

src/Components/TransactionReportPDF/TransactionReportPDF.tsx

@@ -0,0 +1,212 @@
+import { Document, Page, Text, View } from "@react-pdf/renderer";
+import { TransactionListType } from "../Types/Types";
+import { colors } from "../../styles";
+import moment from "moment";
+
+type props = {
+  transactions: TransactionListType;
+  filter: "Day" | "Month";
+};
+
+export default function TransactionReportPDF(props: props) {
+  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");
+  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"}>
+        <Text
+          style={{
+            color: colors.font_dark,
+            fontSize: 16,
+            alignSelf: "center",
+            justifyContent: "center",
+          }}
+        >
+          Daily Transaction Report
+        </Text>
+        <View
+          style={{
+            alignSelf: "center",
+            justifyContent: "center",
+            width: "512px",
+            backgroundColor: colors.header_color,
+            borderRadius: 16,
+            margin: "8px",
+            padding: "8px",
+          }}
+        >
+          <Text
+            style={{
+              color: colors.font_dark,
+              fontSize: 16,
+              textAlign: "center",
+            }}
+          >
+            Total Equipments Processed: {get_equipment_count_today()}
+          </Text>
+          <Text
+            style={{
+              color: colors.font_dark,
+              fontSize: 16,
+              textAlign: "center",
+            }}
+          >
+            Total Transactions: {get_transactions_today().length}
+          </Text>
+          <Text
+            style={{
+              color: colors.font_dark,
+              fontSize: 16,
+              textAlign: "center",
+            }}
+          >
+            Rejected Transactions:{" "}
+            {
+              get_transactions_today().filter(
+                (transaction) => transaction.transaction_status == "Rejected"
+              ).length
+            }
+          </Text>
+          <Text
+            style={{
+              color: colors.font_dark,
+              fontSize: 16,
+              textAlign: "center",
+            }}
+          >
+            Rejected Transactions:{" "}
+            {
+              get_transactions_today().filter(
+                (transaction) => transaction.transaction_status == "Rejected"
+              ).length
+            }
+          </Text>
+          <Text
+            style={{
+              color: colors.font_dark,
+              fontSize: 16,
+              textAlign: "center",
+            }}
+          >
+            Finalized Transactions:{" "}
+            {
+              get_transactions_today().filter(
+                (transaction) => transaction.transaction_status == "Finalized"
+              ).length
+            }
+          </Text>
+        </View>
+        <Text
+          style={{
+            color: colors.font_dark,
+            fontSize: 16,
+            alignSelf: "center",
+            justifyContent: "center",
+          }}
+        >
+          Monthly Transaction Report
+        </Text>
+        <View
+          style={{
+            alignSelf: "center",
+            justifyContent: "center",
+            width: "512px",
+            backgroundColor: colors.header_color,
+            borderRadius: 16,
+            margin: "8px",
+            padding: "8px",
+          }}
+        >
+          <Text
+            style={{
+              color: colors.font_dark,
+              fontSize: 16,
+              textAlign: "center",
+            }}
+          >
+            Total Equipments Processed: {get_equipment_count_thismonth()}
+          </Text>
+          <Text
+            style={{
+              color: colors.font_dark,
+              fontSize: 16,
+              textAlign: "center",
+            }}
+          >
+            Total Transactions: {get_transactions_thismonth().length}
+          </Text>
+          <Text
+            style={{
+              color: colors.font_dark,
+              fontSize: 16,
+              textAlign: "center",
+            }}
+          >
+            Rejected Transactions:{" "}
+            {
+              get_transactions_thismonth().filter(
+                (transaction) => transaction.transaction_status == "Rejected"
+              ).length
+            }
+          </Text>
+          <Text
+            style={{
+              color: colors.font_dark,
+              fontSize: 16,
+              textAlign: "center",
+            }}
+          >
+            Finalized Transactions:{" "}
+            {
+              get_transactions_thismonth().filter(
+                (transaction) => transaction.transaction_status == "Finalized"
+              ).length
+            }
+          </Text>
+        </View>
+      </Page>
+    </Document>
+  );
+}

src/Pages/TransactionPage/TransactionPage.tsx

@@ -15,6 +15,25 @@ 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 (
       <>
@@ -58,23 +77,7 @@ export default function TransactionPage() {
         <PDFDownloadLink
           document={
             <TransactionPDF
-              transaction={
-                transaction.data || {
-                  id: 0,
-                  borrower: {
-                    id: 0,
-                    name: "",
-                  },
-                  teacher: {
-                    id: 0,
-                    name: "",
-                  },
-                  equipments: [],
-                  transaction_status: "",
-                  timestamp: "",
-                  remarks: "",
-                }
-              }
+              transaction={transaction.data || blank_transaction}
             />
           }
           fileName="transaction.pdf"
@@ -84,25 +87,7 @@ export default function TransactionPage() {
           }
         </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: "",
-              }
-            }
-          />
+          <TransactionPDF transaction={transaction.data || blank_transaction} />
         </PDFViewer>
       </div>
     </div>

src/Pages/TransactionReportPage/TransactionReportPage.tsx

@@ -0,0 +1,99 @@
+import { useQuery } from "@tanstack/react-query";
+import Header from "../../Components/Header/Header";
+import styles from "../../styles";
+import { TransactionsAPI } from "../../Components/API/API";
+import { CircularProgress } from "@mui/material";
+import { PDFDownloadLink, PDFViewer } from "@react-pdf/renderer";
+import TransactionReportPDF from "../../Components/TransactionReportPDF/TransactionReportPDF";
+
+export default function TransactionReportPage() {
+  const transactions = useQuery({
+    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}>
+        <Header label={"Transactions"} />
+        <div
+          style={{
+            ...styles.flex_column,
+            ...{
+              alignItems: "center",
+              justifyContent: "center",
+              paddingTop: "64px",
+            },
+          }}
+        >
+          <CircularProgress style={{ height: "128px", width: "128px" }} />
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_L,
+            }}
+          >
+            Loading
+          </p>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div style={styles.background}>
+      <Header label={"Transaction Report"} />
+      <div
+        style={{
+          ...{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "100%",
+            width: "100%",
+            minHeight: "100%",
+            minWidth: "100%",
+            flexWrap: "wrap",
+          },
+          ...styles.flex_column,
+        }}
+      >
+        <PDFDownloadLink
+          document={
+            <TransactionReportPDF
+              transactions={transactions.data || [blank_transaction]}
+              filter="Day"
+            />
+          }
+          fileName="transaction.pdf"
+        >
+          {({ loading }) =>
+            loading ? "Loading document..." : "Download Transaction"
+          }
+        </PDFDownloadLink>
+        <PDFViewer style={{ width: "90%", height: "80vh" }}>
+          <TransactionReportPDF
+            transactions={transactions.data || [blank_transaction]}
+            filter="Day"
+          />
+        </PDFViewer>
+      </div>
+    </div>
+  );
+}