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

View file

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

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

View file

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