Borrowing-TrackerFrontend/src/Components/TransactionPDF/TransactionPDF.tsx

import { Document, Page, Text, View, Image } from "@react-pdf/renderer";
import { TransactionType } from "../Types/Types";
import { colors } from "../../styles";
import {
  StatusTextColor,
  StatusBGColor,
} from "../StatusTextColor/StatusTextColor";
import ustplogo from "../../assets/ustp-logo.png";

type props = {
  transaction: TransactionType;
};

export default function TransactionPDF(props: props) {
  return (
    <Document>
      <Page size={{ width: 8.5 * 72, height: 10 * 90 }}>
        {/* Whole Page */}
        <View
          style={{
            display: "flex",
            flexDirection: "column",
            width: "90%",
            height: "100%",
            alignItems: "flex-end",
            marginLeft: "auto", // Align to the right edge
            marginRight: "auto",
            padding: "20 0",

            gap: 10,
          }}
        >
          {/* Header */}
          <View
            style={{
              display: "flex",
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "center",
              alignSelf: "stretch",
            }}
          >
            <Image
              src={ustplogo}
              style={{
                width: 60,
                height: 60,
                position: "absolute",
                left: 10,
                top: 0,
              }}
            />

            <View style={{ alignItems: "center" }}>
              
              <Text
                style={{
                  color: colors.form_dark,
                  fontSize: 10,
                  textAlign: "center",
                  padding: "5 0 5 0",
                }}
              >
                University of Science and Technology of Southern Philippines{" "}
                {"\n"}
                Lapasan, Cagayan de Oro City {"\n"}
                College of Science and Mathematics
              </Text>
              
              <Text
                style={{
                  color: colors.form_dark,
                  fontSize: 11,
                  padding: "5 0 5 0",
                }}
              >
                <Text style={{ fontFamily: 'Helvetica-Bold' }}> BORROWER'S SLIP </Text>
              </Text>
            </View>
          </View>

          {/* Status */}
          <View
            style={{
              alignSelf: "stretch",
              alignContent: "center",
              justifyContent: "center",
              backgroundColor: StatusBGColor(
                props.transaction.transaction_status
              ),
              borderRadius: 16,
              padding: "8px",
            }}
          >
            <Text
              style={{
                color: StatusTextColor(props.transaction.transaction_status),
                textAlign: "right",
                fontSize: 16,
              }}
            >
              Status: {`${props.transaction.transaction_status}`}
            </Text>
          </View>

          {/* Transaction ID */}
          <View
            style={{
              display: "flex",
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "center",
              alignSelf: "stretch",
            }}
          >
            <Text
              style={{
                color: colors.form_dark,
                fontSize: 20,
                textAlign: "right",
              }}
            >
              Transaction ID: #{props.transaction.id}
            </Text>
          </View>

          <View
            style={{
              display: "flex",
              alignSelf: "stretch",
            }}
          >
            <Text
              style={{
                color: colors.form_title,
                borderBottom: "1px solid #A2A2A2",
              }}
            >
              Borrower Details
            </Text>
          </View>
          {/* Top Details */}
          <View
            style={{
              display: "flex",
              flexDirection: "row",
              gap: 5,
              alignSelf: "stretch",
              justifyContent: "space-between",
            }}
          >
            {/* Borrower Details */}
            <View
              style={{
                display: "flex",
                flexDirection: "row",
                gap: 5,
                alignSelf: "stretch",
                padding: "0px 5px",
              }}
            >
              <View style={{ display: "flex", flexDirection: "column" }}>
                <Text
                  style={{
                    color: colors.form_dark,
                    fontSize: 16,
                    textAlign: "left",
                    margin: 0,
                  }}
                >
                  Name:{" "}
                  <Text style={{ textDecoration: "underline" }}>
                    {props.transaction.borrower.name}
                  </Text>{" "}
                </Text>
                <Text
                  style={{
                    color: colors.form_dark,
                    fontSize: 14,
                    textAlign: "left",
                    margin: 0,
                  }}
                >
                  Course:{" "}
                  <Text
                    style={{ textDecoration: "underline" }}
                  >{`${props.transaction.borrower.course}`}</Text>{" "}
                  {"\n"}
                  Section: <Text style={{ textDecoration: "underline" }}>{props.transaction.section}</Text>
                </Text>
              </View>
            </View>

            <View style={{ display: "flex", flexDirection: "column" }}>
              <Text
                style={{
                  color: colors.form_dark,
                  fontSize: 14,
                  textAlign: "left",
                }}
              >
                Timestamp:{" "}
                <Text style={{ textDecoration: "underline" }}>
                  {props.transaction.timestamp}
                </Text>
                {"\n"}
                Lab instructor:{" "}
                <Text style={{ textDecoration: "underline" }}>
                  {props.transaction.teacher.name}
                </Text>{" "}
              </Text>
              <Text
                style={{
                  color: colors.form_dark,
                  fontSize: 14,
                  textAlign: "left",
                }}
              >
                Subject:{" "}
                <Text style={{ textDecoration: "underline" }}>
                  {props.transaction.subject}
                </Text>
              </Text>
            </View>
          </View>

          {/* Equipment Section */}
          <View
            style={{
              display: "flex",
              gap: 5,
              alignSelf: "stretch",
              marginTop: "10"
            }}
          >
            <Text
              style={{
                color: colors.form_title,
                borderBottom: "1px solid #A2A2A2",
              }}
            >
              Selected Equipment
            </Text>
            {props.transaction.equipments.map((equipment) => (
              <Text
                style={{
                  color: colors.form_dark,
                  textAlign: "left",
                  fontSize: 14,
                  margin: 0,
                  marginTop: 2,
                  flexWrap: "wrap",
                  padding: 3,
                }}
              >
                {` - ${equipment.name} (ID:${equipment.id})`}
              </Text>
            ))}
            {/* total Equipment */}
            <View style={{ borderTop: "1px", marginTop: 5, width: "150px" }}>
              <Text
                style={{
                  color: colors.form_dark,
                  textAlign: "left",
                  fontSize: 14,
                  margin: 0,
                  flexWrap: "wrap",
                }}
              >
                Total Equipment: {props.transaction.equipments.length}
              </Text>
            </View>
            {/* Consumables Area */}
            <View style={{ marginTop: "5" , marginBottom: 10}}>
              <Text
                style={{
                  color: colors.form_title,
                  borderBottom: "1px solid #A2A2A2",
                }}
              >
                Consumables
              </Text>
              <Text
                style={{
                  color: colors.form_dark,
                  textAlign: "left",
                  fontSize: 14,
                  flexWrap: "wrap",
                  padding: 3,
                }}
              >
                {props.transaction?.consumables}
              </Text>
            </View>
          </View>

          {/* Members here */}
          <View style={{
                display: "flex",
                gap: 5,
                alignSelf: "stretch",}}>
            <Text
              style={{
                color: colors.form_title,
                borderBottom: "1px solid #A2A2A2",
              }}
            >
              Members
            </Text>
            <Text
              style={{
                fontSize: 16,
                margin: 0,
                marginTop: 8,
              }}
            >
              {props.transaction?.additional_members}
            </Text>
            {/* Remarks */}
          </View>
          <View style={{ display: "flex", flexDirection: "column", alignSelf: "stretch" }}>
              <View style={{ padding: "10 0" }}>
                <Text
                  style={{
                    color: colors.form_title,
                    marginTop: 10,
                    borderBottom: "1px solid #A2A2A2",
                    padding: "5 0",
                  }}
                >
                  Remarks
                </Text>
              </View>

              <Text
                style={{
                  color: colors.form_dark,
                  fontSize: 14,
                  margin: 0,
                  marginTop: 8,
                }}
              >
                {props.transaction.remarks}
              </Text>
            </View>
        </View>
      </Page>
    </Document>
  );
}