Refactor status text color function and finalized transactionpdf component

src/Components/StatusTextColor/StatusTextColor.tsx

@@ -0,0 +1,18 @@
+import { colors } from "../../styles";
+
+export default function StatusTextColor(status: string) {
+  if (
+    status === "Pending Approval" ||
+    status === "Returned: Pending Checking"
+  ) {
+    return colors.orange;
+  } else if (
+    status === "Approved" ||
+    status === "Finalized" ||
+    status === "Borrowed"
+  ) {
+    return colors.green;
+  } else {
+    return colors.red;
+  }
+}

src/Components/TransactionEntry/TransactionEntry.tsx

@@ -1,8 +1,8 @@
 import styles from "../../styles";
 import { colors } from "../../styles";
 import { TransactionType } from "../Types/Types";
-import StatusText from "../TransactionStatusText/TransactionStatusText";
 import { useNavigate } from "react-router-dom";
+import StatusTextColor from "../StatusTextColor/StatusTextColor";
 export interface props {
   transaction: TransactionType;
 }
@@ -119,7 +119,19 @@ export default function TransactionEntry(props: props) {
           </div>
         </div>
       </div>
-      <StatusText status={props.transaction.transaction_status} />
+      <p
+        style={{
+          ...styles.text_dark,
+          ...styles.text_M,
+          ...{
+            textAlign: "center",
+            margin: 0,
+            color: StatusTextColor(props.transaction.transaction_status),
+          },
+        }}
+      >
+        {`${props.transaction.transaction_status}`}
+      </p>
     </div>
   );
 }

src/Components/TransactionPDF/TransactionPDF.tsx

@@ -1,56 +1,27 @@
-import { StyleSheet, Document, Page, Text, View } from "@react-pdf/renderer";
+import { Document, Page, Text, View } from "@react-pdf/renderer";
 import { TransactionType } from "../Types/Types";
-import styles, { colors } from "../../styles";
+import { colors } from "../../styles";
+import StatusTextColor from "../StatusTextColor/StatusTextColor";
 
 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
-          <View style={pdf_styles.flex_row}>
+          style={{
+            alignSelf: "center",
+            justifyContent: "center",
+            width: "512px",
+            backgroundColor: colors.header_color,
+            borderRadius: 16,
+            margin: "8px",
+            padding: "8px",
+          }}
+        >
+          <View style={{ display: "flex", flexDirection: "row" }}>
             <Text
               style={{
                 color: colors.font_dark,
@@ -59,7 +30,7 @@ export default function TransactionPDF(props: props) {
                 flex: 1,
               }}
             >
-              ID: {props.transaction.id}
+              Transaction ID: {props.transaction.id}
             </Text>
             <Text
               style={{
@@ -72,6 +43,85 @@ export default function TransactionPDF(props: props) {
               {props.transaction.timestamp}
             </Text>
           </View>
+          <View style={{ paddingVertical: 8 }}></View>
+          <View style={{ display: "flex", flexDirection: "row" }}>
+            <View style={{ flex: 1 }}>
+              <Text
+                style={{
+                  color: colors.font_dark,
+                  fontSize: 16,
+                  textAlign: "left",
+                  margin: 0,
+                }}
+              >
+                Borrower: {props.transaction.borrower.name}{" "}
+                {`(ID:${props.transaction.borrower.id})`}
+              </Text>
+              <Text
+                style={{
+                  color: colors.font_dark,
+                  fontSize: 16,
+                  textAlign: "left",
+                  margin: 0,
+                }}
+              >
+                Teacher: {props.transaction.teacher.name}{" "}
+                {`(ID:${props.transaction.teacher.id})`}
+              </Text>
+              <Text
+                style={{
+                  color: colors.font_dark,
+                  fontSize: 16,
+                  textAlign: "left",
+                  margin: 0,
+                  marginTop: 8,
+                  flexWrap: "wrap",
+                }}
+              >
+                {props.transaction.remarks}
+              </Text>
+            </View>
+            <View style={{ flex: 1 }}>
+              <Text
+                style={{
+                  color: colors.font_dark,
+                  textAlign: "right",
+                  fontSize: 16,
+                  margin: 0,
+                  flexWrap: "wrap",
+                }}
+              >
+                Equipments:
+              </Text>
+              <View style={{ display: "flex", flexDirection: "column" }}>
+                {props.transaction.equipments.map((equipment) => (
+                  <Text
+                    style={{
+                      color: colors.font_dark,
+                      textAlign: "right",
+                      fontSize: 12,
+                      margin: 0,
+                      marginTop: 2,
+                      flexWrap: "wrap",
+                    }}
+                  >
+                    {` - ${equipment.name} (ID:${equipment.id})`}
+                  </Text>
+                ))}
+              </View>
+            </View>
+          </View>
+          <View style={{ alignContent: "center", justifyContent: "center" }}>
+            <Text
+              style={{
+                color: StatusTextColor(props.transaction.transaction_status),
+                textAlign: "center",
+                fontSize: 16,
+              }}
+            >
+              {`${props.transaction.transaction_status}`}
+            </Text>
+          </View>
         </View>
       </Page>
     </Document>

src/Components/TransactionStatusText/TransactionStatusText.tsx

@@ -1,33 +0,0 @@
-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>
-  );
-}