mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2024-11-17 06:19:27 +08:00
Added transaction reports page
This commit is contained in:
parent
70bc6bbfd3
commit
7dbfd9b4fd
5 changed files with 379 additions and 39 deletions
12
src/App.tsx
12
src/App.tsx
|
|
@ -21,6 +21,7 @@ import TransactionsListPage from "./Pages/TransactionsListPage/TransactionsListP
|
||||||
import AddTransactionPage from "./Pages/AddTransactionPage/AddTransactionPage";
|
import AddTransactionPage from "./Pages/AddTransactionPage/AddTransactionPage";
|
||||||
import TransactionPage from "./Pages/TransactionPage/TransactionPage";
|
import TransactionPage from "./Pages/TransactionPage/TransactionPage";
|
||||||
import EquipmentInstanceTallyPage from "./Pages/EquipmentTallyPage/EquipmentTallyPage";
|
import EquipmentInstanceTallyPage from "./Pages/EquipmentTallyPage/EquipmentTallyPage";
|
||||||
|
import TransactionReportPage from "./Pages/TransactionReportPage/TransactionReportPage";
|
||||||
|
|
||||||
const queryClient = new QueryClient();
|
const queryClient = new QueryClient();
|
||||||
const router = createHashRouter([
|
const router = createHashRouter([
|
||||||
|
|
@ -110,6 +111,17 @@ const router = createHashRouter([
|
||||||
),
|
),
|
||||||
errorElement: <ErrorPage />,
|
errorElement: <ErrorPage />,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/view/transactions/report",
|
||||||
|
element: (
|
||||||
|
<>
|
||||||
|
<Revalidator />
|
||||||
|
<RestrictedPage allow_only="Technician" />
|
||||||
|
<TransactionReportPage />
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
errorElement: <ErrorPage />,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/view/equipments/logs",
|
path: "/view/equipments/logs",
|
||||||
element: (
|
element: (
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ import { Button } from "@mui/material";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import ManageSearchIcon from "@mui/icons-material/ManageSearch";
|
import ManageSearchIcon from "@mui/icons-material/ManageSearch";
|
||||||
import CountertopsIcon from "@mui/icons-material/Countertops";
|
import CountertopsIcon from "@mui/icons-material/Countertops";
|
||||||
|
import AssessmentIcon from "@mui/icons-material/Assessment";
|
||||||
import styles from "../../../styles";
|
import styles from "../../../styles";
|
||||||
import { colors } from "../../../styles";
|
import { colors } from "../../../styles";
|
||||||
|
|
||||||
|
|
@ -58,6 +59,37 @@ export default function TechnicianLogButtons() {
|
||||||
SKU Logs
|
SKU Logs
|
||||||
</p>
|
</p>
|
||||||
</Button>
|
</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
|
<Button
|
||||||
style={{
|
style={{
|
||||||
...styles.flex_column,
|
...styles.flex_column,
|
||||||
|
|
@ -99,10 +131,10 @@ export default function TechnicianLogButtons() {
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
navigate("/view/equipment_instances/logs");
|
navigate("/view/transactions/report");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ManageSearchIcon
|
<AssessmentIcon
|
||||||
style={{
|
style={{
|
||||||
height: 64,
|
height: 64,
|
||||||
width: 64,
|
width: 64,
|
||||||
|
|
@ -117,7 +149,7 @@ export default function TechnicianLogButtons() {
|
||||||
...styles.text_M,
|
...styles.text_M,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Item Logs
|
Transaction Report
|
||||||
</p>
|
</p>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
212
src/Components/TransactionReportPDF/TransactionReportPDF.tsx
Normal file
212
src/Components/TransactionReportPDF/TransactionReportPDF.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -15,6 +15,25 @@ export default function TransactionPage() {
|
||||||
queryKey: ["transaction", id],
|
queryKey: ["transaction", id],
|
||||||
queryFn: () => TransactionAPI(Number(id) || 0),
|
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) {
|
if (transaction.isLoading) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
@ -58,23 +77,7 @@ export default function TransactionPage() {
|
||||||
<PDFDownloadLink
|
<PDFDownloadLink
|
||||||
document={
|
document={
|
||||||
<TransactionPDF
|
<TransactionPDF
|
||||||
transaction={
|
transaction={transaction.data || blank_transaction}
|
||||||
transaction.data || {
|
|
||||||
id: 0,
|
|
||||||
borrower: {
|
|
||||||
id: 0,
|
|
||||||
name: "",
|
|
||||||
},
|
|
||||||
teacher: {
|
|
||||||
id: 0,
|
|
||||||
name: "",
|
|
||||||
},
|
|
||||||
equipments: [],
|
|
||||||
transaction_status: "",
|
|
||||||
timestamp: "",
|
|
||||||
remarks: "",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
fileName="transaction.pdf"
|
fileName="transaction.pdf"
|
||||||
|
|
@ -84,25 +87,7 @@ export default function TransactionPage() {
|
||||||
}
|
}
|
||||||
</PDFDownloadLink>
|
</PDFDownloadLink>
|
||||||
<PDFViewer style={{ width: "90%", height: "80vh" }}>
|
<PDFViewer style={{ width: "90%", height: "80vh" }}>
|
||||||
<TransactionPDF
|
<TransactionPDF transaction={transaction.data || blank_transaction} />
|
||||||
transaction={
|
|
||||||
transaction.data || {
|
|
||||||
id: 0,
|
|
||||||
borrower: {
|
|
||||||
id: 0,
|
|
||||||
name: "",
|
|
||||||
},
|
|
||||||
teacher: {
|
|
||||||
id: 0,
|
|
||||||
name: "",
|
|
||||||
},
|
|
||||||
equipments: [],
|
|
||||||
transaction_status: "",
|
|
||||||
timestamp: "",
|
|
||||||
remarks: "",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</PDFViewer>
|
</PDFViewer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
99
src/Pages/TransactionReportPage/TransactionReportPage.tsx
Normal file
99
src/Pages/TransactionReportPage/TransactionReportPage.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue