commit

src/Components/TransactionPDF/TransactionPDF.tsx

@@ -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>

src/Components/TransactionReportPDF/TransactionReportPDF.tsx

@@ -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,68 +19,172 @@ export default function TransactionReportPDF(props: props) {
   return (
     <Document>
       <Page size={"A4"}>
-        <Text
+        {/* Header */}
-          style={{
-            color: colors.font_dark,
-            fontSize: 16,
-            alignSelf: "center",
-            justifyContent: "center",
-          }}
-        >
-          Daily Transaction Report
-        </Text>
         <View
           style={{
-            alignSelf: "center",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
             justifyContent: "center",
-            width: "512px",
+            alignSelf: "stretch",
-            backgroundColor: colors.header_color,
+            padding: 60,
-            borderRadius: 16,
+          }}
-            margin: "8px",
+        >
-            padding: "8px",
+          <Image
+            src={ustplogo}
+            style={{
+              width: 70,
+              height: 70,
+              position: "absolute",
+              left: "45",
+              top: "",
+            }}
+          />
+
+          <View
+            style={{
+              width: "100%",
+              height: "auto",
+              position: "absolute",
+              right: "30",
+              top: "35",
+            }}
+          >
+            <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.form_dark,
+            fontSize: 13,
+            padding: "5 0 5 0",
+            textAlign: "center",
+          }}
+        >
+          <Text style={{ fontFamily: "Helvetica-Bold" }}>
+            LABORATORY REPORTS
+          </Text>
+        </Text>
+
+        <View
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            alignSelf: "center",
+            width: "85%",
+          }}
+        >
+          <View
+            style={{
+              display: "flex",
+              padding: "0px 12px",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: "10px",
+              alignSelf: "stretch",
+              border: "1px solid #000",
             }}
           >
             <Text
               style={{
-              color: colors.font_dark,
+                fontFamily: "Helvetica-Bold",
-              fontSize: 16,
+                color: colors.form_dark,
+                fontSize: 13,
+                padding: "5 0 5 0",
+              }}
+            >
+              Transaction
+            </Text>
+          </View>
+          <View
+            style={{
+              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",
+            }}
+          >
+            <Text style={{ fontSize: 13 }}>Daily Transaction Report</Text>
+            <Text
+              style={{
+                fontSize: 13,
                 textAlign: "center",
               }}
             >
-            Total Equipments Processed:{" "}
+              {" "}
+              • Total Equipments Processed:{" "}
               {count_transaction_equipments(transactions_today)}
             </Text>
+
             <Text
               style={{
-              color: colors.font_dark,
+                fontSize: 13,
-              fontSize: 16,
                 textAlign: "center",
               }}
             >
-            Total Transactions: {transactions_today.length}
+              {" "}
+              • Total Transactions: {transactions_today.length}
             </Text>
+
             <Text
               style={{
-              color: colors.font_dark,
+                fontSize: 13,
-              fontSize: 16,
                 textAlign: "center",
               }}
             >
-            Rejected Transactions:{" "}
+              {" "}
+              • Rejected Transactions:{" "}
               {
                 transactions_today.filter(
                   (transaction) => transaction.transaction_status == "Rejected"
                 ).length
               }
             </Text>
+
             <Text
               style={{
-              color: colors.font_dark,
+                fontSize: 13,
-              fontSize: 16,
                 textAlign: "center",
               }}
             >
-            Finalized Transactions:{" "}
+              {" "}
+              • Finalized Transactions:{" "}
               {
                 transactions_today.filter(
                   (transaction) => transaction.transaction_status == "Finalized"
@@ -87,68 +192,65 @@ export default function TransactionReportPDF(props: props) {
               }
             </Text>
           </View>
-        <Text
-          style={{
-            color: colors.font_dark,
-            fontSize: 16,
-            alignSelf: "center",
-            justifyContent: "center",
-          }}
-        >
-          Monthly Transaction Report
-        </Text>
           <View
             style={{
-            alignSelf: "center",
+              display: "flex",
+              padding: "5px 12px",
+              flexDirection: "column",
               justifyContent: "center",
-            width: "512px",
+              alignItems: "flex-start",
-            backgroundColor: colors.header_color,
+              gap: "10px",
-            borderRadius: 16,
+              alignSelf: "stretch",
-            margin: "8px",
+              borderRight: "1px solid #000",
-            padding: "8px",
+              borderBottom: "1px solid #000",
+              borderLeft: "1px solid #000",
             }}
           >
+            <Text style={{ fontSize: 13 }}>Monthly Transaction Report</Text>
             <Text
               style={{
-              color: colors.font_dark,
+                fontSize: 13,
-              fontSize: 16,
                 textAlign: "center",
               }}
             >
-            Total Equipments Processed:{" "}
+              {" "}
+              • Total Equipments Processed:{" "}
               {count_transaction_equipments(transactions_thismonth)}
             </Text>
+
             <Text
               style={{
-              color: colors.font_dark,
+                fontSize: 13,
-              fontSize: 16,
                 textAlign: "center",
               }}
             >
-            Total Transactions: {transactions_thismonth.length}
+              {" "}
+              • Total Transactions: {transactions_thismonth.length}
             </Text>
+
             <Text
               style={{
-              color: colors.font_dark,
+                fontSize: 13,
-              fontSize: 16,
                 textAlign: "center",
               }}
             >
-            Rejected Transactions:{" "}
+              {" "}
+              • Rejected Transactions:{" "}
               {
                 transactions_thismonth.filter(
                   (transaction) => transaction.transaction_status == "Rejected"
                 ).length
               }
             </Text>
+
             <Text
               style={{
-              color: colors.font_dark,
+                fontSize: 13,
-              fontSize: 16,
                 textAlign: "center",
               }}
             >
-            Finalized Transactions:{" "}
+              {" "}
+              • Finalized Transactions:{" "}
               {
                 transactions_thismonth.filter(
                   (transaction) => transaction.transaction_status == "Finalized"
@@ -156,6 +258,7 @@ export default function TransactionReportPDF(props: props) {
               }
             </Text>
           </View>
+        </View>
       </Page>
     </Document>
   );

src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx

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