diff --git a/src/Components/FilterTransaction/FilterTransaction.tsx b/src/Components/FilterTransaction/FilterTransaction.tsx new file mode 100644 index 0000000..a5d9568 --- /dev/null +++ b/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 + ) + ); +} diff --git a/src/Components/TransactionPDF/TransactionPDF.tsx b/src/Components/TransactionPDF/TransactionPDF.tsx index db91d63..80c3e40 100644 --- a/src/Components/TransactionPDF/TransactionPDF.tsx +++ b/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} - {props.transaction.timestamp} + {props.transaction?.timestamp} @@ -54,8 +54,8 @@ export default function TransactionPDF(props: props) { margin: 0, }} > - Borrower: {props.transaction.borrower.name}{" "} - {`(ID:${props.transaction.borrower.id})`} + Borrower: {props.transaction?.borrower.name}{" "} + {`(ID:${props.transaction?.borrower.id})`} - {`(${props.transaction.borrower.course})`} + {`(${props.transaction?.borrower.course})`} - Teacher: {props.transaction.teacher.name}{" "} - {`(ID:${props.transaction.teacher.id})`} + Teacher: {props.transaction?.teacher.name}{" "} + {`(ID:${props.transaction?.teacher.id})`} - Subject: {props.transaction.subject} + Subject: {props.transaction?.subject} - Remarks: {props.transaction.remarks} + Remarks: {props.transaction?.remarks} - Consumables: {props.transaction.consumables} + Consumables: {props.transaction?.consumables} @@ -126,7 +126,7 @@ export default function TransactionPDF(props: props) { Equipments: - {props.transaction.equipments.map((equipment) => ( + {props.transaction?.equipments.map((equipment) => ( - {`${props.transaction.transaction_status}`} + {`${props.transaction?.transaction_status}`} diff --git a/src/Components/TransactionReportPDF/TransactionReportPDF.tsx b/src/Components/TransactionReportPDF/TransactionReportPDF.tsx index 79a3f0c..f18627f 100644 --- a/src/Components/TransactionReportPDF/TransactionReportPDF.tsx +++ b/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 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 - ) - ); - } + const transactions_today = filter_today(props.transactions); + const transactions_thismonth = filter_thismonth(props.transactions); return ( @@ -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)} - Total Transactions: {get_transactions_today().length} + Total Transactions: {transactions_today.length} 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)} - Total Transactions: {get_transactions_thismonth().length} + Total Transactions: {transactions_thismonth.length} 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 } diff --git a/src/Components/Types/Types.tsx b/src/Components/Types/Types.tsx index 80b7d0f..7e362b5 100644 --- a/src/Components/Types/Types.tsx +++ b/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 = { diff --git a/src/CountTransactionEquipments/CountTransactionEquipments.tsx b/src/CountTransactionEquipments/CountTransactionEquipments.tsx new file mode 100644 index 0000000..7899ec7 --- /dev/null +++ b/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; +} diff --git a/src/Pages/AddTransactionPage/AddTransactionPage.tsx b/src/Pages/AddTransactionPage/AddTransactionPage.tsx index 5574378..d088a53 100644 --- a/src/Pages/AddTransactionPage/AddTransactionPage.tsx +++ b/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([]); const [selectedteacher, SetSelectedTeacher] = useState(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() { Items Requested - SetSelectedTeacher(event.target.value as number) + SetTransaction({ + ...transaction, + teacher: event.target.value as number, + }) } label={"Assigned Teacher"} input={} @@ -146,11 +172,11 @@ export default function AddTransactionPage() { ) => { - SetSubject(e.target.value); + SetTransaction({ ...transaction, subject: e.target.value }); setError(""); }} label={"Subject"} - value={subject} + value={transaction.subject} placeholder={"The subject requiring the equipments"} /> @@ -160,11 +186,11 @@ export default function AddTransactionPage() { multiline style={styles.input_form} onChange={(e: React.ChangeEvent) => { - 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"} /> @@ -174,14 +200,33 @@ export default function AddTransactionPage() { multiline style={styles.input_form} onChange={(e: React.ChangeEvent) => { - SetConsumables(e.target.value); + SetTransaction({ ...transaction, consumables: e.target.value }); setError(""); }} label={"Consumables"} - value={consumables} + value={transaction.consumables} placeholder={"Write down any consumables here"} /> + + Additional Members + ) => { + 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" + } + /> +

{error}

{ - console.log(selecteditems); - const data = await TransactionCreateAPI({ - equipments: selecteditems, - teacher: selectedteacher, - subject: subject, - remarks: remarks || " ", - transaction_status: "Pending Approval", - consumables: consumables || "", - borrower: user.data?.id || 0, - }); + console.log(JSON.stringify(transaction)); + const data = await TransactionCreateAPI(transaction); if (data[0]) { setError("Created successfully"); toast( diff --git a/src/Pages/TransactionPage/TransactionPage.tsx b/src/Pages/TransactionPage/TransactionPage.tsx index 7fd91ee..f4d7d5a 100644 --- a/src/Pages/TransactionPage/TransactionPage.tsx +++ b/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() { }} > - } + document={} fileName="transaction.pdf" > {({ loading }) => @@ -87,7 +64,7 @@ export default function TransactionPage() { } - +
diff --git a/src/Pages/TransactionReportPage/TransactionReportPage.tsx b/src/Pages/TransactionReportPage/TransactionReportPage.tsx index 1cb32bf..d44504d 100644 --- a/src/Pages/TransactionReportPage/TransactionReportPage.tsx +++ b/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 (
@@ -77,7 +59,7 @@ export default function TransactionReportPage() { } @@ -89,7 +71,7 @@ export default function TransactionReportPage() {