mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2025-05-16 19:39:11 +08:00
Updated transaction entry and added transaction page and initial transactionpdf component
This commit is contained in:
parent
fe20c7a0fd
commit
db8b93a7db
7 changed files with 717 additions and 35 deletions
11
src/App.tsx
11
src/App.tsx
|
|
@ -19,6 +19,7 @@ import EquipmentInstancesFilteredListPage from "./Pages/EquipmentInstancesListPa
|
|||
import RestrictedPage from "./Components/RestrictedPage/RestrictedPage";
|
||||
import TransactionsListPage from "./Pages/TransactionsListPage/TransactionsListPage";
|
||||
import AddTransactionPage from "./Pages/AddTransactionPage/AddTransactionPage";
|
||||
import TransactionPage from "./Pages/TransactionPage/TransactionPage";
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
const router = createHashRouter([
|
||||
|
|
@ -137,6 +138,16 @@ const router = createHashRouter([
|
|||
),
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/view/transaction/:id",
|
||||
element: (
|
||||
<>
|
||||
<Revalidator />
|
||||
<TransactionPage />
|
||||
</>
|
||||
),
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
]);
|
||||
|
||||
export default function App() {
|
||||
|
|
|
|||
|
|
@ -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
79
src/Components/TransactionPDF/TransactionPDF.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
110
src/Pages/TransactionPage/TransactionPage.tsx
Normal file
110
src/Pages/TransactionPage/TransactionPage.tsx
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
import styles from "../../styles";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { TransactionAPI } from "../../Components/API/API";
|
||||
import Header from "../../Components/Header/Header";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { PDFDownloadLink, PDFViewer } from "@react-pdf/renderer";
|
||||
import { toast } from "react-toastify";
|
||||
import TransactionPDF from "../../Components/TransactionPDF/TransactionPDF";
|
||||
import { CircularProgress } from "@mui/material";
|
||||
|
||||
export default function TransactionPage() {
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams();
|
||||
const transaction = useQuery({
|
||||
queryKey: ["transaction", id],
|
||||
queryFn: () => TransactionAPI(Number(id) || 0),
|
||||
});
|
||||
if (transaction.isLoading) {
|
||||
return (
|
||||
<>
|
||||
<CircularProgress style={{ height: "128px", width: "128px" }} />
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_L,
|
||||
}}
|
||||
>
|
||||
Loading
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (transaction.isError) {
|
||||
toast(`Could not find transaction with ID:${id}`, {
|
||||
position: "top-right",
|
||||
autoClose: 2000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
});
|
||||
navigate("/dashboard");
|
||||
}
|
||||
return (
|
||||
<div style={styles.background}>
|
||||
<Header label={"View transaction"} />
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignContent: "center",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<PDFDownloadLink
|
||||
document={
|
||||
<TransactionPDF
|
||||
transaction={
|
||||
transaction.data || {
|
||||
id: 0,
|
||||
borrower: {
|
||||
id: 0,
|
||||
name: "",
|
||||
},
|
||||
teacher: {
|
||||
id: 0,
|
||||
name: "",
|
||||
},
|
||||
equipments: [],
|
||||
transaction_status: "",
|
||||
timestamp: "",
|
||||
remarks: "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
}
|
||||
fileName="transaction.pdf"
|
||||
>
|
||||
{({ loading }) =>
|
||||
loading ? "Loading document..." : "Download Transaction"
|
||||
}
|
||||
</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: "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</PDFViewer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue