keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2025-09-16 20:49:36 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added transaction reports page

Browse source
This commit is contained in:
Keannu Christian Bernasol 2024-01-05 20:10:53 +08:00
parent 70bc6bbfd3
commit 7dbfd9b4fd
5 changed files with 379 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/Components/DashboardPage/Technician/TechnicianLogButtons.tsx
View file

@ -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>

212
src/Components/TransactionReportPDF/TransactionReportPDF.tsx Normal file
View file

@ -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>
);
}