diff --git a/src/App.tsx b/src/App.tsx index 1c9d477..d294418 100644 --- a/src/App.tsx +++ b/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: , }, + { + path: "/view/transactions/report", + element: ( + <> + + + + + ), + errorElement: , + }, { path: "/view/equipments/logs", element: ( diff --git a/src/Components/DashboardPage/Technician/TechnicianLogButtons.tsx b/src/Components/DashboardPage/Technician/TechnicianLogButtons.tsx index fc52813..1b782e1 100644 --- a/src/Components/DashboardPage/Technician/TechnicianLogButtons.tsx +++ b/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

+ diff --git a/src/Components/TransactionReportPDF/TransactionReportPDF.tsx b/src/Components/TransactionReportPDF/TransactionReportPDF.tsx new file mode 100644 index 0000000..79a3f0c --- /dev/null +++ b/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 ( + + + + Daily Transaction Report + + + + Total Equipments Processed: {get_equipment_count_today()} + + + Total Transactions: {get_transactions_today().length} + + + Rejected Transactions:{" "} + { + get_transactions_today().filter( + (transaction) => transaction.transaction_status == "Rejected" + ).length + } + + + Rejected Transactions:{" "} + { + get_transactions_today().filter( + (transaction) => transaction.transaction_status == "Rejected" + ).length + } + + + Finalized Transactions:{" "} + { + get_transactions_today().filter( + (transaction) => transaction.transaction_status == "Finalized" + ).length + } + + + + Monthly Transaction Report + + + + Total Equipments Processed: {get_equipment_count_thismonth()} + + + Total Transactions: {get_transactions_thismonth().length} + + + Rejected Transactions:{" "} + { + get_transactions_thismonth().filter( + (transaction) => transaction.transaction_status == "Rejected" + ).length + } + + + Finalized Transactions:{" "} + { + get_transactions_thismonth().filter( + (transaction) => transaction.transaction_status == "Finalized" + ).length + } + + + + + ); +} diff --git a/src/Pages/TransactionPage/TransactionPage.tsx b/src/Pages/TransactionPage/TransactionPage.tsx index f0dd47b..7fd91ee 100644 --- a/src/Pages/TransactionPage/TransactionPage.tsx +++ b/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() { } fileName="transaction.pdf" @@ -84,25 +87,7 @@ export default function TransactionPage() { } - + diff --git a/src/Pages/TransactionReportPage/TransactionReportPage.tsx b/src/Pages/TransactionReportPage/TransactionReportPage.tsx new file mode 100644 index 0000000..1cb32bf --- /dev/null +++ b/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 ( +
+
+
+ +

+ Loading +

+
+
+ ); + } + return ( +
+
+
+ + } + fileName="transaction.pdf" + > + {({ loading }) => + loading ? "Loading document..." : "Download Transaction" + } + + + + +
+
+ ); +}