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

import styles from "../../styles";
import { colors } from "../../styles";
import { TransactionType } from "../Types/Types";
import StatusTextColor from "../StatusTextColor/StatusTextColor";
export interface props {
  transaction: TransactionType;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
}

export default function TransactionEntry(props: props) {
  return (
    <button
      style={{
        alignSelf: "center",
        justifySelf: "center",
        width: "384px",
        backgroundColor: colors.header_color,
        borderRadius: 16,
        margin: "8px",
        padding: "8px",
      }}
      onClick={props.onClick}
    >
      <div style={styles.flex_row}>
        <p
          style={{
            ...styles.text_dark,
            ...styles.text_S,
            ...{ textAlign: "left", flex: 1 },
          }}
        >
          ID: {props.transaction.id}
        </p>
        <p
          style={{
            ...styles.text_dark,
            ...styles.text_S,
            ...{ textAlign: "right", flex: 2 },
          }}
        >
          {props.transaction.timestamp}
        </p>
      </div>
      <div style={styles.flex_row}>
        <div style={{ flex: 1 }}>
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_S,
              ...{ textAlign: "left", margin: 0, wordWrap: "break-word" },
            }}
          >
            Borrower: {props.transaction.borrower.name}{" "}
            {`(ID:${props.transaction.borrower.id})`}
          </p>
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_S,
              ...{ textAlign: "left", margin: 0, wordWrap: "break-word" },
            }}
          >
            {`(${props.transaction.borrower.course})`}
          </p>
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_S,
              ...{ textAlign: "left", margin: 0 },
            }}
          >
            Teacher: {props.transaction.teacher.name}{" "}
            {`(ID:${props.transaction.teacher.id})`}
          </p>
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_S,
              ...{ textAlign: "left", margin: 0 },
            }}
          >
            Subject: {props.transaction.subject}
          </p>
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_S,
              ...{
                height: "64px",
                textAlign: "left",
                margin: 0,
                marginTop: "8px",
                flexWrap: "wrap",
                overflowY: "scroll",
                maxWidth: "192px",
                wordWrap: "break-word",
              },
            }}
          >
            {props.transaction.remarks}
          </p>
        </div>
        <div style={{ flex: 1 }}>
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_S,
              ...{ textAlign: "right", margin: 0 },
            }}
          >
            Equipments:
          </p>
          <div
            style={{
              ...styles.flex_column,
              ...{ height: "96px", overflowY: "scroll" },
            }}
          >
            {props.transaction.equipments.map((equipment) => (
              <p
                style={{
                  ...styles.text_dark,
                  ...styles.text_S,
                  ...{
                    textAlign: "right",
                    wordWrap: "break-word",
                    margin: 0,
                  },
                }}
              >
                {` - ${equipment.name} (ID:${equipment.id})`}
              </p>
            ))}
          </div>
        </div>
      </div>
      <p
        style={{
          ...styles.text_dark,
          ...styles.text_M,
          ...{
            textAlign: "center",
            margin: 0,
            color: StatusTextColor(props.transaction.transaction_status),
          },
        }}
      >
        {`${props.transaction.transaction_status}`}
      </p>
    </button>
  );
}