keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2025-06-29 00:45:49 +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

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

@ -15,6 +15,25 @@ 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 (
<>
@ -58,23 +77,7 @@ export default function TransactionPage() {
<PDFDownloadLink
document={
<TransactionPDF
transaction={
transaction.data || {
id: 0,
borrower: {
id: 0,
name: "",
},
teacher: {
id: 0,
name: "",
},
equipments: [],
transaction_status: "",
timestamp: "",
remarks: "",
}
}
transaction={transaction.data || blank_transaction}
/>
}
fileName="transaction.pdf"
@ -84,25 +87,7 @@ export default function TransactionPage() {
}
</PDFDownloadLink>
<PDFViewer style={{ width: "90%", height: "80vh" }}>
<TransactionPDF
transaction={
transaction.data || {
id: 0,
borrower: {
id: 0,
name: "",
},
teacher: {
id: 0,
name: "",
},
equipments: [],
transaction_status: "",
timestamp: "",
remarks: "",
}
}
/>
<TransactionPDF transaction={transaction.data || blank_transaction} />
</PDFViewer>
</div>
</div>

99
src/Pages/TransactionReportPage/TransactionReportPage.tsx Normal file
View file

@ -0,0 +1,99 @@
import { useQuery } from "@tanstack/react-query";
import Header from "../../Components/Header/Header";
import styles from "../../styles";
import { TransactionsAPI } from "../../Components/API/API";
import { CircularProgress } from "@mui/material";
import { PDFDownloadLink, PDFViewer } from "@react-pdf/renderer";
import TransactionReportPDF from "../../Components/TransactionReportPDF/TransactionReportPDF";
export default function TransactionReportPage() {
const transactions = useQuery({
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}>
<Header label={"Transactions"} />
<div
style={{
...styles.flex_column,
...{
alignItems: "center",
justifyContent: "center",
paddingTop: "64px",
},
}}
>
<CircularProgress style={{ height: "128px", width: "128px" }} />
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
Loading
</p>
</div>
</div>
);
}
return (
<div style={styles.background}>
<Header label={"Transaction Report"} />
<div
style={{
...{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100%",
width: "100%",
minHeight: "100%",
minWidth: "100%",
flexWrap: "wrap",
},
...styles.flex_column,
}}
>
<PDFDownloadLink
document={
<TransactionReportPDF
transactions={transactions.data || [blank_transaction]}
filter="Day"
/>
}
fileName="transaction.pdf"
>
{({ loading }) =>
loading ? "Loading document..." : "Download Transaction"
}
</PDFDownloadLink>
<PDFViewer style={{ width: "90%", height: "80vh" }}>
<TransactionReportPDF
transactions={transactions.data || [blank_transaction]}
filter="Day"
/>
</PDFViewer>
</div>
</div>
);
}