keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2024-11-17 06:19:27 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Cleaned up code and added additional members field to create transaction page

Browse source
This commit is contained in:
Keannu Bernasol 2024-01-05 20:40:11 +08:00
parent 7dbfd9b4fd
commit 4cd5712f6f
8 changed files with 132 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/Components/FilterTransaction/FilterTransaction.tsx Normal file
View 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
)
);
}

30
src/Components/TransactionPDF/TransactionPDF.tsx
View file

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

74
src/Components/TransactionReportPDF/TransactionReportPDF.tsx
View file

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

3
src/Components/Types/Types.tsx
View file

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

9
src/CountTransactionEquipments/CountTransactionEquipments.tsx Normal file
View file

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

79
src/Pages/AddTransactionPage/AddTransactionPage.tsx
View file

@ -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<number[]>([]);
const [selectedteacher, SetSelectedTeacher] = useState<number>(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() {
<FormLabel style={styles.text_dark}>Items Requested</FormLabel>
<Select
multiple
value={selecteditems}
value={transaction.equipments}
onChange={(event) =>
SetSelectedItems(event.target.value as number[])
SetTransaction({
...transaction,
equipments: event.target.value as number[],
})
}
input={<OutlinedInput label="Name" />}
>
@ -127,9 +150,12 @@ export default function AddTransactionPage() {
<FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Assigned Teacher</FormLabel>
<Select
value={selectedteacher}
value={transaction.teacher}
onChange={(event) =>
SetSelectedTeacher(event.target.value as number)
SetTransaction({
...transaction,
teacher: event.target.value as number,
})
}
label={"Assigned Teacher"}
input={<OutlinedInput label="Assigned Teacher" />}
@ -146,11 +172,11 @@ export default function AddTransactionPage() {
<TextField
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
SetSubject(e.target.value);
SetTransaction({ ...transaction, subject: e.target.value });
setError("");
}}
label={"Subject"}
value={subject}
value={transaction.subject}
placeholder={"The subject requiring the equipments"}
/>
</FormControl>
@ -160,11 +186,11 @@ export default function AddTransactionPage() {
multiline
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
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"}
/>
</FormControl>
@ -174,14 +200,33 @@ export default function AddTransactionPage() {
multiline
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
SetConsumables(e.target.value);
SetTransaction({ ...transaction, consumables: e.target.value });
setError("");
}}
label={"Consumables"}
value={consumables}
value={transaction.consumables}
placeholder={"Write down any consumables here"}
/>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Additional Members</FormLabel>
<TextField
multiline
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
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"
}
/>
</FormControl>
</div>
<p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
<div
@ -197,16 +242,8 @@ export default function AddTransactionPage() {
type={"dark"}
label={"Create Transaction"}
onClick={async () => {
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(

27
src/Pages/TransactionPage/TransactionPage.tsx
View file

@ -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() {
}}
>
<PDFDownloadLink
document={
<TransactionPDF
transaction={transaction.data || blank_transaction}
/>
}
document={<TransactionPDF transaction={transaction.data || null} />}
fileName="transaction.pdf"
>
{({ loading }) =>
@ -87,7 +64,7 @@ export default function TransactionPage() {
}
</PDFDownloadLink>
<PDFViewer style={{ width: "90%", height: "80vh" }}>
<TransactionPDF transaction={transaction.data || blank_transaction} />
<TransactionPDF transaction={transaction.data || null} />
</PDFViewer>
</div>
</div>

22
src/Pages/TransactionReportPage/TransactionReportPage.tsx
View file

@ -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 (
<div style={styles.background}>
@ -77,7 +59,7 @@ export default function TransactionReportPage() {
<PDFDownloadLink
document={
<TransactionReportPDF
transactions={transactions.data || [blank_transaction]}
transactions={transactions.data || []}
filter="Day"
/>
}
@ -89,7 +71,7 @@ export default function TransactionReportPage() {
</PDFDownloadLink>
<PDFViewer style={{ width: "90%", height: "80vh" }}>
<TransactionReportPDF
transactions={transactions.data || [blank_transaction]}
transactions={transactions.data || []}
filter="Day"
/>
</PDFViewer>