encoach_frontend/src/exams/pdf/level.test.report.tsx

/* eslint-disable jsx-a11y/alt-text */
import React from "react";
import { Document, Page, View, Text, Image } from "@react-pdf/renderer";
import { ModuleScore } from "@/interfaces/module.scores";
import { styles } from "./styles";
import TestReportFooter from "./test.report.footer";

import { StyleSheet } from "@react-pdf/renderer";

const customStyles = StyleSheet.create({
  testDetails: {
    display: "flex",
    gap: 4,
  },
  testDetailsContainer: {
    display: "flex",
    gap: 16,
  },
  table: {
    width: "100%",
  },
  tableRow: {
    flexDirection: "row",
  },
  tableCol70: {
    width: "70%", // First column width (50%)
    borderStyle: "solid",
    borderWidth: 1,
    borderColor: "#000",
    // padding: 5,
  },
  tableCol25: {
    width: "16.67%", // Remaining four columns each get 1/6 of the total width (50% / 3 = 16.67%)
    borderStyle: "solid",
    borderWidth: 1,
    borderColor: "#000",
    padding: 5,
  },
  tableCol20: {
    width: "20%", // Width for each of the 5 sub-columns (50% / 5 = 20%)
    borderStyle: "solid",
    borderWidth: 1,
    borderColor: "#000",
    padding: 5,
  },
  tableCol10: {
    width: "10%", // Width for each of the 5 sub-columns (50% / 5 = 20%)
    borderStyle: "solid",
    borderWidth: 1,
    borderColor: "#000",
    padding: 5,
  },
  tableCellHeader: {
    fontSize: 12,
    textAlign: "center",
  },
  tableCellHeaderColor: {
    backgroundColor: "#d3d3d3",
  },
  tableCell: {
    fontSize: 10,
    textAlign: "center",
  },
});

interface Props {
  date: string;
  name: string;
  email: string;
  id: string;
  gender?: string;
  passportId: string;
  corporateName: string;
  downloadDate: string;
  userId: string;
  uniqueExercises: { name: string; result: string }[];
  timeSpent: string;
  score: string;
}

const LevelTestReport = ({
  date,
  name,
  email,
  id,
  gender,
  passportId,
  corporateName,
  downloadDate,
  userId,
  uniqueExercises,
  timeSpent,
  score,
}: Props) => {
  const defaultTextStyle = [styles.textFont, { fontSize: 8 }];
  return (
    <Document>
      <Page style={styles.body} orientation="landscape">
        <Text style={[styles.textFont, styles.textBold, { fontSize: 11 }]}>
          Corporate Name: {corporateName}
        </Text>
        <View style={styles.textMargin}>
          <Text style={defaultTextStyle}>
            Report Download date: {downloadDate}
          </Text>
        </View>
        <Text style={[styles.textFont, styles.textBold, { fontSize: 11 }]}>
          Test Information: {id}
        </Text>
        <View style={styles.textMargin}>
          <Text style={defaultTextStyle}>Date of Test: {date}</Text>
          <Text style={defaultTextStyle}>Candidates name: {name}</Text>
          <Text style={defaultTextStyle}>Email: {email}</Text>
          <Text style={defaultTextStyle}>National ID: {passportId}</Text>

          <Text style={defaultTextStyle}>Gender: {gender}</Text>
          <Text style={defaultTextStyle}>Candidate ID: {userId}</Text>
        </View>

        <View style={customStyles.table}>
          {/* Header Row */}
          <View style={customStyles.tableRow}>
            <View
              style={[
                customStyles.tableCol70,
                customStyles.tableCellHeaderColor,
              ]}
            >
              <Text style={[customStyles.tableCellHeader, { padding: 5 }]}>
                Test sections
              </Text>
            </View>
            <View
              style={[
                customStyles.tableCol20,
                customStyles.tableCellHeaderColor,
              ]}
            >
              <Text style={customStyles.tableCellHeader}>Time spent</Text>
            </View>
            <View
              style={[
                customStyles.tableCol10,
                customStyles.tableCellHeaderColor,
              ]}
            >
              <Text style={customStyles.tableCellHeader}>Score</Text>
            </View>
          </View>
          <View style={customStyles.tableRow}>
            <View style={customStyles.tableCol70}>
              <View style={customStyles.tableRow}>
                {uniqueExercises.map((exercise, index) => (
                  <View
                    style={[
                      customStyles.tableCol20,
                      index !== uniqueExercises.length - 1
                        ? { borderWidth: 0, borderRightWidth: 1 }
                        : { borderWidth: 0 },
                    ]}
                    key={index}
                  >
                    <Text style={customStyles.tableCell}>Part {index + 1}</Text>
                  </View>
                ))}
              </View>
            </View>
            <View style={customStyles.tableCol20}>
              <Text style={customStyles.tableCell}></Text>
            </View>
            <View style={customStyles.tableCol10}>
              <Text style={customStyles.tableCell}></Text>
            </View>
          </View>

          <View style={customStyles.tableRow}>
            <View style={customStyles.tableCol70}>
              <View style={customStyles.tableRow}>
                {uniqueExercises.map((exercise, index) => (
                  <View
                    style={[
                      customStyles.tableCol20,
                      index !== uniqueExercises.length - 1
                        ? { borderWidth: 0, borderRightWidth: 1 }
                        : { borderWidth: 0 },
                    ]}
                    key={index}
                  >
                    <Text style={customStyles.tableCell}>{exercise.name}</Text>
                  </View>
                ))}
              </View>
            </View>
            <View style={customStyles.tableCol20}>
              <Text style={customStyles.tableCell}></Text>
            </View>
            <View style={customStyles.tableCol10}>
              <Text style={customStyles.tableCell}></Text>
            </View>
          </View>
          <View style={customStyles.tableRow}>
            <View style={customStyles.tableCol70}>
              <View style={customStyles.tableRow}>
                {uniqueExercises.map((exercise, index) => (
                  <View
                    style={[
                      customStyles.tableCol20,
                      index !== uniqueExercises.length - 1
                        ? { borderWidth: 0, borderRightWidth: 1 }
                        : { borderWidth: 0 },
                    ]}
                    key={index}
                  >
                    <Text style={customStyles.tableCell}>
                      {exercise.result}
                    </Text>
                  </View>
                ))}
              </View>
            </View>
            <View style={customStyles.tableCol20}>
              <Text style={customStyles.tableCell}>{timeSpent}</Text>
            </View>
            <View style={customStyles.tableCol10}>
              <Text style={customStyles.tableCell}>{score}</Text>
            </View>
          </View>
        </View>
        <TestReportFooter userId={userId} />
      </Page>
    </Document>
  );
};

export default LevelTestReport;