mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2025-09-16 20:49:36 +08:00
Cleaned up code and added additional members field to create transaction page
This commit is contained in:
parent
7dbfd9b4fd
commit
4cd5712f6f
8 changed files with 132 additions and 136 deletions
24
src/Components/FilterTransaction/FilterTransaction.tsx
Normal file
24
src/Components/FilterTransaction/FilterTransaction.tsx
Normal file
|
|
@ -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
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -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}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
|
|
@ -40,7 +40,7 @@ export default function TransactionPDF(props: props) {
|
|||
flex: 1,
|
||||
}}
|
||||
>
|
||||
{props.transaction.timestamp}
|
||||
{props.transaction?.timestamp}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ paddingVertical: 8 }}></View>
|
||||
|
|
@ -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})`}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
|
|
@ -65,7 +65,7 @@ export default function TransactionPDF(props: props) {
|
|||
margin: 0,
|
||||
}}
|
||||
>
|
||||
{`(${props.transaction.borrower.course})`}
|
||||
{`(${props.transaction?.borrower.course})`}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
|
|
@ -75,8 +75,8 @@ export default function TransactionPDF(props: props) {
|
|||
margin: 0,
|
||||
}}
|
||||
>
|
||||
Teacher: {props.transaction.teacher.name}{" "}
|
||||
{`(ID:${props.transaction.teacher.id})`}
|
||||
Teacher: {props.transaction?.teacher.name}{" "}
|
||||
{`(ID:${props.transaction?.teacher.id})`}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
|
|
@ -86,7 +86,7 @@ export default function TransactionPDF(props: props) {
|
|||
margin: 0,
|
||||
}}
|
||||
>
|
||||
Subject: {props.transaction.subject}
|
||||
Subject: {props.transaction?.subject}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
|
|
@ -98,7 +98,7 @@ export default function TransactionPDF(props: props) {
|
|||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
Remarks: {props.transaction.remarks}
|
||||
Remarks: {props.transaction?.remarks}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
|
|
@ -110,7 +110,7 @@ export default function TransactionPDF(props: props) {
|
|||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
Consumables: {props.transaction.consumables}
|
||||
Consumables: {props.transaction?.consumables}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
|
|
@ -126,7 +126,7 @@ export default function TransactionPDF(props: props) {
|
|||
Equipments:
|
||||
</Text>
|
||||
<View style={{ display: "flex", flexDirection: "column" }}>
|
||||
{props.transaction.equipments.map((equipment) => (
|
||||
{props.transaction?.equipments.map((equipment) => (
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
|
|
@ -146,12 +146,14 @@ export default function TransactionPDF(props: props) {
|
|||
<View style={{ alignContent: "center", justifyContent: "center" }}>
|
||||
<Text
|
||||
style={{
|
||||
color: StatusTextColor(props.transaction.transaction_status),
|
||||
color: StatusTextColor(
|
||||
props.transaction?.transaction_status || "Pending"
|
||||
),
|
||||
textAlign: "center",
|
||||
fontSize: 16,
|
||||
}}
|
||||
>
|
||||
{`${props.transaction.transaction_status}`}
|
||||
{`${props.transaction?.transaction_status}`}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Document>
|
||||
<Page size={"A4"}>
|
||||
|
|
@ -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)}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
|
|
@ -93,7 +56,7 @@ export default function TransactionReportPDF(props: props) {
|
|||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Total Transactions: {get_transactions_today().length}
|
||||
Total Transactions: {transactions_today.length}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
|
|
@ -104,7 +67,7 @@ export default function TransactionReportPDF(props: props) {
|
|||
>
|
||||
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)}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
|
|
@ -175,7 +139,7 @@ export default function TransactionReportPDF(props: props) {
|
|||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Total Transactions: {get_transactions_thismonth().length}
|
||||
Total Transactions: {transactions_thismonth.length}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
|
|
@ -186,7 +150,7 @@ export default function TransactionReportPDF(props: props) {
|
|||
>
|
||||
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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue