diff --git a/src/Components/TransactionPDF/TransactionPDF.tsx b/src/Components/TransactionPDF/TransactionPDF.tsx index e8efb2c..fae3c08 100644 --- a/src/Components/TransactionPDF/TransactionPDF.tsx +++ b/src/Components/TransactionPDF/TransactionPDF.tsx @@ -8,10 +8,30 @@ import { import ustplogo from "../../assets/ustp-logo.png"; type props = { - transaction: TransactionType; + transaction: TransactionType | null; }; export default function TransactionPDF(props: props) { + if (!props.transaction) { + return ( + + + + + Invalid transaction PDF specified + + + + + ); + } return ( @@ -52,7 +72,6 @@ export default function TransactionPDF(props: props) { /> - - + - BORROWER'S SLIP + + {" "} + BORROWER'S SLIP{" "} + @@ -186,7 +208,10 @@ export default function TransactionPDF(props: props) { style={{ textDecoration: "underline" }} >{`${props.transaction.borrower.course}`}{" "} {"\n"} - {/* Section: {props.transaction.section} */} + Section:{" "} + + {props.transaction.section} + @@ -230,7 +255,7 @@ export default function TransactionPDF(props: props) { display: "flex", gap: 5, alignSelf: "stretch", - marginTop: "10" + marginTop: "10", }} > {/* Consumables Area */} - + {/* Members here */} - + {/* Remarks */} - - - - Remarks - - - + + - {props.transaction.remarks} + Remarks + + + {props.transaction.remarks} + + diff --git a/src/Components/TransactionReportPDF/TransactionReportPDF.tsx b/src/Components/TransactionReportPDF/TransactionReportPDF.tsx index e98df3a..a24d924 100644 --- a/src/Components/TransactionReportPDF/TransactionReportPDF.tsx +++ b/src/Components/TransactionReportPDF/TransactionReportPDF.tsx @@ -1,7 +1,6 @@ import { Document, Page, Text, View, Image } from "@react-pdf/renderer"; import { TransactionListType } from "../Types/Types"; import { colors } from "../../styles"; -import count_transaction_equipments from "../../CountTransactionEquipments/CountTransactionEquipments"; import { filter_today, filter_thismonth, @@ -148,8 +147,7 @@ export default function TransactionReportPDF(props: props) { }} > {" "} - • Total Equipments Processed:{" "} - {count_transaction_equipments(transactions_today)} + • Total Equipments Processed: {transactions_today.length} {" "} - • Total Equipments Processed:{" "} - {count_transaction_equipments(transactions_thismonth)} + • Total Equipments Processed: {transactions_thismonth.length} (n += transaction.equipments.length)); - return n; -} diff --git a/src/Pages/AddTransactionPage/AddTransactionPage.tsx b/src/Pages/AddTransactionPage/AddTransactionPage.tsx index cea0fe1..8c0d7f9 100644 --- a/src/Pages/AddTransactionPage/AddTransactionPage.tsx +++ b/src/Pages/AddTransactionPage/AddTransactionPage.tsx @@ -21,8 +21,8 @@ import { OutlinedInput, Autocomplete, Alert, - Stack - + Stack, + Button, } from "@mui/material"; import React from "react"; import Header from "../../Components/Header/Header"; @@ -40,7 +40,89 @@ export default function AddTransactionPage() { consumables: "", additional_members: "", borrower: 0, + section: "", }); + + // Function to calculate total equipment count + const calculateTotalEquipmentCount = () => { + const selectedItems = + equipments.data?.filter((equipment) => + transaction.equipments.includes(equipment.id) + ) || []; + + // Calculate total count + const totalCount = selectedItems.reduce((count) => count + 1, 0); + + return totalCount; + }; + + const handleShowSelectedItems = () => { + const selectedItems = + equipments.data?.filter((equipment) => + transaction.equipments.includes(equipment.id) + ) || []; + + // Explicitly define the type for equipmentCounts + const equipmentCounts: Record = {}; + const totalEquipmentCount = calculateTotalEquipmentCount(); + + // Calculate counts based on equipment name + selectedItems.forEach((item) => { + equipmentCounts[item.equipment_name] = + (equipmentCounts[item.equipment_name] || 0) + 1; + }); + + // Show alert + const formattedCounts = Object.entries(equipmentCounts).map( + ([name, count]) => `${count} pcs. of ${name}` + ); + + const confirmationMessage = `So, you're trying to borrow ${totalEquipmentCount} equipment(s):\n${formattedCounts.join( + "\n" + )}\nIs it correct?\n\nPlease click OK to continue request\nCancel if you still want to edit`; + + if (window.confirm(confirmationMessage)) { + // OK Button Logic + console.log(JSON.stringify(transaction)); + TransactionCreateAPI(transaction) + .then(async (data) => { + if (data[0]) { + setError("Created successfully"); + toast( + `New transaction created successfully, ${ + typeof data[1] == "object" ? "ID:" + data[1].id : "" + }`, + { + position: "top-right", + autoClose: 2000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + theme: "light", + } + ); + queryClient.invalidateQueries({ + queryKey: ["equipment_instances"], + }); + queryClient.invalidateQueries({ + queryKey: ["transactions"], + }); + navigate("/dashboard"); + } else { + setError(JSON.stringify(data[1])); + } + }) + .catch((error) => { + setError(JSON.stringify(error)); + }); + } else { + // Cancel Button Logic + console.log("Cancel button clicked"); + } + }; + /* const [selecteditems, SetSelectedItems] = useState([]); const [selectedteacher, SetSelectedTeacher] = useState(0); @@ -112,7 +194,7 @@ export default function AddTransactionPage() { alignItems: "center", justifyContent: "center", overflowY: "scroll", - marginTop: 64 + marginTop: 64, }, }} > @@ -135,42 +217,79 @@ export default function AddTransactionPage() { marginRight: "1rem", }} > - - + + + Items Requested + + a.id - b.id) || []} + getOptionLabel={(option) => + `${option.equipment_name} (ID:${option.id})` + } + value={ + equipments.data?.filter((equipment) => + transaction.equipments.includes(equipment.id) + ) || [] + } + onChange={(_event, newValue) => { + SetTransaction({ + ...transaction, + equipments: newValue.map((item) => item.id), + }); + }} + renderInput={(params) => ( + + )} + /> + + +
- Items Requested - - a.id - b.id) || []} - getOptionLabel={(option) => - `${option.equipment_name} (ID:${option.id})` - } - value={ - equipments.data?.filter((equipment) => - transaction.equipments.includes(equipment.id) - ) || [] - } - onChange={(_event, newValue) => { - SetTransaction({ - ...transaction, - equipments: newValue.map((item) => item.id), - }); - }} - renderInput={(params) => ( - - )} - /> - +

+ Total equipment to borrow: {calculateTotalEquipmentCount()} +

+
+ + + + + + Section + + ) => { + SetTransaction({ ...transaction, section: e.target.value }); + setError(""); + }} + label={"Section"} + value={transaction.section} + placeholder={"Type Section Here"} + /> + + @@ -285,7 +424,6 @@ export default function AddTransactionPage() { /> -
{error}

- - +

+ Create Transaction +

+
); } diff --git a/src/Pages/EquipmentInstancesListPage/EquipmentInstancesFilteredListPage.tsx b/src/Pages/EquipmentInstancesListPage/EquipmentInstancesFilteredListPage.tsx index 303f2ee..56183cb 100644 --- a/src/Pages/EquipmentInstancesListPage/EquipmentInstancesFilteredListPage.tsx +++ b/src/Pages/EquipmentInstancesListPage/EquipmentInstancesFilteredListPage.tsx @@ -65,6 +65,7 @@ export default function EquipmentInstancesFilteredListPage() { minHeight: "100%", minWidth: "100%", flexWrap: "wrap", + marginTop: "7rem" }} > @@ -58,6 +59,7 @@ export default function EquipmentLogsPage() { minHeight: "100%", minWidth: "100%", flexWrap: "wrap", + marginTop: "6rem" }} >