keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2025-08-03 10:03:27 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Updated transaction entry and added transaction page and initial transactionpdf component

Browse source
This commit is contained in:
Keannu Christian Bernasol 2023-12-29 16:06:29 +08:00
parent fe20c7a0fd
commit db8b93a7db
7 changed files with 717 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/Components/TransactionEntry/TransactionEntry.tsx
View file

@ -1,42 +1,14 @@
import styles from "../../styles";
import { colors } from "../../styles";
import { TransactionType } from "../Types/Types";
import StatusText from "../TransactionStatusText/TransactionStatusText";
import { useNavigate } from "react-router-dom";
export interface props {
transaction: TransactionType;
}
function StatusText(props: { status: string }) {
let color;
if (
props.status === "Pending Approval" ||
props.status === "Returned: Pending Checking"
) {
color = colors.orange;
} else if (
props.status === "Approved" ||
props.status === "Finalized" ||
props.status === "Borrowed"
) {
color = colors.green;
} else {
color = colors.red;
}
return (
<p
style={{
...styles.text_dark,
...styles.text_S,
...{
textAlign: "center",
color: color,
},
}}
>
{props.status}
</p>
);
}
export default function TransactionEntry(props: props) {
const navigate = useNavigate();
return (
<div
style={{
@ -48,6 +20,12 @@ export default function TransactionEntry(props: props) {
margin: "8px",
padding: "8px",
}}
onClick={() =>
navigate(`/view/transaction/${props.transaction.id}`, {
replace: true,
state: { id: props.transaction.id },
})
}
>
<div style={styles.flex_row}>
<p

79
src/Components/TransactionPDF/TransactionPDF.tsx Normal file
View file

@ -0,0 +1,79 @@
import { StyleSheet, Document, Page, Text, View } from "@react-pdf/renderer";
import { TransactionType } from "../Types/Types";
import styles, { colors } from "../../styles";
type props = {
transaction: TransactionType;
};
const pdf_styles = StyleSheet.create({
container: {
alignSelf: "center",
justifySelf: "center",
width: "512px",
backgroundColor: colors.header_color,
borderRadius: 16,
margin: "8px",
padding: "8px",
},
flex_row: {
display: "flex",
flexDirection: "row",
},
flex_column: {
display: "flex",
flexDirection: "column",
},
text_dark: {
color: colors.font_dark,
fontWeight: "bold",
},
text_light: {
color: colors.font_light,
fontWeight: "bold",
},
text_red: {
color: colors.red,
fontWeight: "bold",
},
text_orange: {
color: colors.orange,
fontWeight: "bold",
},
text_green: {
color: colors.green,
fontWeight: "bold",
},
});
export default function TransactionPDF(props: props) {
return (
<Document>
<Page size={"A4"}>
<View style={pdf_styles.container}>
<View style={pdf_styles.flex_row}>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "left",
flex: 1,
}}
>
ID: {props.transaction.id}
</Text>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "right",
flex: 1,
}}
>
{props.transaction.timestamp}
</Text>
</View>
</View>
</Page>
</Document>
);
}

33
src/Components/TransactionStatusText/TransactionStatusText.tsx Normal file
View file

@ -0,0 +1,33 @@
import styles, { colors } from "../../styles";
export default function StatusText(props: { status: string }) {
let color;
if (
props.status === "Pending Approval" ||
props.status === "Returned: Pending Checking"
) {
color = colors.orange;
} else if (
props.status === "Approved" ||
props.status === "Finalized" ||
props.status === "Borrowed"
) {
color = colors.green;
} else {
color = colors.red;
}
return (
<p
style={{
...styles.text_dark,
...styles.text_S,
...{
textAlign: "center",
color: color,
},
}}
>
{props.status}
</p>
);
}