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

commit

Browse source
This commit is contained in:
Pongot, Jophiel 2024-01-10 06:03:25 +08:00
parent 1c7aa9b258
commit ac990aea50
3 changed files with 219 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -52,16 +52,7 @@ export default function TransactionPDF(props: props) {
/>
<View style={{ alignItems: "center" }}>
<Text
style={{
color: colors.form_dark,
fontSize: 11,
textAlign: "center",
margin: "2 5 2 5",
}}
>
Department of Chemistry (Laboratory)
</Text>
<Text
style={{
color: colors.form_dark,
@ -72,8 +63,10 @@ export default function TransactionPDF(props: props) {
>
University of Science and Technology of Southern Philippines{" "}
{"\n"}
Lapasan Cagayan de Oro City {"\n"}
Lapasan, Cagayan de Oro City {"\n"}
College of Science and Mathematics
</Text>
<Text
style={{
color: colors.form_dark,
@ -81,7 +74,7 @@ export default function TransactionPDF(props: props) {
padding: "5 0 5 0",
}}
>
BORROWER'S SLIP
<Text style={{ fontFamily: 'Helvetica-Bold' }}> BORROWER'S SLIP </Text>
</Text>
</View>
</View>

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

@ -1,4 +1,4 @@
import { Document, Page, Text, View } from "@react-pdf/renderer";
import { Document, Page, Text, View, Image } from "@react-pdf/renderer";
import { TransactionListType } from "../Types/Types";
import { colors } from "../../styles";
import count_transaction_equipments from "../../CountTransactionEquipments/CountTransactionEquipments";
@ -6,6 +6,7 @@ import {
filter_today,
filter_thismonth,
} from "../FilterTransaction/FilterTransaction";
import ustplogo from "../../assets/ustp-logo.png";
type props = {
transactions: TransactionListType | [];
@ -18,143 +19,245 @@ export default function TransactionReportPDF(props: props) {
return (
<Document>
<Page size={"A4"}>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
alignSelf: "center",
justifyContent: "center",
}}
>
Daily Transaction Report
</Text>
{/* Header */}
<View
style={{
alignSelf: "center",
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
width: "512px",
backgroundColor: colors.header_color,
borderRadius: 16,
margin: "8px",
padding: "8px",
alignSelf: "stretch",
padding: 60,
}}
>
<Text
<Image
src={ustplogo}
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "center",
width: 70,
height: 70,
position: "absolute",
left: "45",
top: "",
}}
/>
<View
style={{
width: "100%",
height: "auto",
position: "absolute",
right: "30",
top: "35",
}}
>
Total Equipments Processed:{" "}
{count_transaction_equipments(transactions_today)}
</Text>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "center",
}}
>
Total Transactions: {transactions_today.length}
</Text>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "center",
}}
>
Rejected Transactions:{" "}
{
transactions_today.filter(
(transaction) => transaction.transaction_status == "Rejected"
).length
}
</Text>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "center",
}}
>
Finalized Transactions:{" "}
{
transactions_today.filter(
(transaction) => transaction.transaction_status == "Finalized"
).length
}
</Text>
<View style={{ alignItems: "center" }}>
<Text
style={{
color: colors.form_dark,
fontSize: 11,
textAlign: "center",
}}
>
Republic of the Philippines{"\n"}
<Text style={{ fontFamily: "Helvetica-Bold" }}>
{" "}
UNIVERSITY OF SCIENCE and TECHNOLOGY OF SCIENCE AND TECHNOLOGY{" "}
</Text>
{"\n"}
College of Science and Mathematics
</Text>
<Text
style={{
color: colors.form_dark,
fontSize: 11,
textAlign: "center",
margin: "2 5 2 5",
}}
>
<Text style={{ fontFamily: "Helvetica-Bold" }}>
{" "}
Department of Chemistry (Laboratory)
</Text>
</Text>
</View>
</View>
</View>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
alignSelf: "center",
justifyContent: "center",
color: colors.form_dark,
fontSize: 13,
padding: "5 0 5 0",
textAlign: "center",
}}
>
Monthly Transaction Report
<Text style={{ fontFamily: "Helvetica-Bold" }}>
LABORATORY REPORTS
</Text>
</Text>
<View
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
alignSelf: "center",
justifyContent: "center",
width: "512px",
backgroundColor: colors.header_color,
borderRadius: 16,
margin: "8px",
padding: "8px",
width: "85%",
}}
>
<Text
<View
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "center",
display: "flex",
padding: "0px 12px",
justifyContent: "center",
alignItems: "center",
gap: "10px",
alignSelf: "stretch",
border: "1px solid #000",
}}
>
Total Equipments Processed:{" "}
{count_transaction_equipments(transactions_thismonth)}
</Text>
<Text
<Text
style={{
fontFamily: "Helvetica-Bold",
color: colors.form_dark,
fontSize: 13,
padding: "5 0 5 0",
}}
>
Transaction
</Text>
</View>
<View
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "center",
display: "flex",
padding: "5px 12px",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
gap: "10px",
alignSelf: "stretch",
borderRight: "1px solid #000",
borderBottom: "1px solid #000",
borderLeft: "1px solid #000",
}}
>
Total Transactions: {transactions_thismonth.length}
</Text>
<Text
<Text style={{ fontSize: 13 }}>Daily Transaction Report</Text>
<Text
style={{
fontSize: 13,
textAlign: "center",
}}
>
{" "}
• Total Equipments Processed:{" "}
{count_transaction_equipments(transactions_today)}
</Text>
<Text
style={{
fontSize: 13,
textAlign: "center",
}}
>
{" "}
• Total Transactions: {transactions_today.length}
</Text>
<Text
style={{
fontSize: 13,
textAlign: "center",
}}
>
{" "}
• Rejected Transactions:{" "}
{
transactions_today.filter(
(transaction) => transaction.transaction_status == "Rejected"
).length
}
</Text>
<Text
style={{
fontSize: 13,
textAlign: "center",
}}
>
{" "}
• Finalized Transactions:{" "}
{
transactions_today.filter(
(transaction) => transaction.transaction_status == "Finalized"
).length
}
</Text>
</View>
<View
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "center",
display: "flex",
padding: "5px 12px",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
gap: "10px",
alignSelf: "stretch",
borderRight: "1px solid #000",
borderBottom: "1px solid #000",
borderLeft: "1px solid #000",
}}
>
Rejected Transactions:{" "}
{
transactions_thismonth.filter(
(transaction) => transaction.transaction_status == "Rejected"
).length
}
</Text>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "center",
}}
>
Finalized Transactions:{" "}
{
transactions_thismonth.filter(
(transaction) => transaction.transaction_status == "Finalized"
).length
}
</Text>
<Text style={{ fontSize: 13 }}>Monthly Transaction Report</Text>
<Text
style={{
fontSize: 13,
textAlign: "center",
}}
>
{" "}
• Total Equipments Processed:{" "}
{count_transaction_equipments(transactions_thismonth)}
</Text>
<Text
style={{
fontSize: 13,
textAlign: "center",
}}
>
{" "}
• Total Transactions: {transactions_thismonth.length}
</Text>
<Text
style={{
fontSize: 13,
textAlign: "center",
}}
>
{" "}
• Rejected Transactions:{" "}
{
transactions_thismonth.filter(
(transaction) => transaction.transaction_status == "Rejected"
).length
}
</Text>
<Text
style={{
fontSize: 13,
textAlign: "center",
}}
>
{" "}
• Finalized Transactions:{" "}
{
transactions_thismonth.filter(
(transaction) => transaction.transaction_status == "Finalized"
).length
}
</Text>
</View>
</View>
</Page>
</Document>

2
src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx
View file

@ -73,7 +73,7 @@ export default function EquipmentInstancesListPage() {
width: "100%",
minHeight: "100%",
minWidth: "100%",
marginTop: "100px"
marginTop: "0px"
}}
>