From ac990aea50bd29545b603eaad14a80828ab7db35 Mon Sep 17 00:00:00 2001
From: "Pongot, Jophiel" <jophiel.telen@gmail.com>
Date: Wed, 10 Jan 2024 06:03:25 +0800
Subject: [PATCH] commit

---
 .../TransactionPDF/TransactionPDF.tsx         |  17 +-
 .../TransactionReportPDF.tsx                  | 323 ++++++++++++------
 .../EquipmentInstancesListPage.tsx            |   2 +-
 3 files changed, 219 insertions(+), 123 deletions(-)

diff --git a/src/Components/TransactionPDF/TransactionPDF.tsx b/src/Components/TransactionPDF/TransactionPDF.tsx
index 767b66a..e8efb2c 100644
--- a/src/Components/TransactionPDF/TransactionPDF.tsx
+++ b/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>
diff --git a/src/Components/TransactionReportPDF/TransactionReportPDF.tsx b/src/Components/TransactionReportPDF/TransactionReportPDF.tsx
index 2c6889c..e98df3a 100644
--- a/src/Components/TransactionReportPDF/TransactionReportPDF.tsx
+++ b/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,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>
diff --git a/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx b/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx
index d284330..6076761 100644
--- a/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx
+++ b/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx
@@ -73,7 +73,7 @@ export default function EquipmentInstancesListPage() {
           width: "100%",
           minHeight: "100%",
           minWidth: "100%",
-          marginTop: "100px"
+          marginTop: "0px"
         }}
       >