Added initial group report pdf

src/exams/pdf/group.test.report.tsx

@@ -1,30 +1,252 @@
 /* eslint-disable jsx-a11y/alt-text */
 import React from "react";
-import { Document, Page, View, Text, Image } from "@react-pdf/renderer";
+import {
+  Document,
+  Page,
+  View,
+  Text,
+  Image,
+  StyleSheet,
+} from "@react-pdf/renderer";
 import { styles } from "./styles";
+import TestReportFooter from "./test.report.footer";
+import { ModuleScore } from "@/interfaces/module.scores";
+import ProgressBar from "./progress.bar";
+// import { Font } from "@react-pdf/renderer";
 
-import { StyleSheet } from "@react-pdf/renderer";
-
+// Font.registerHyphenationCallback((word) => [word]);
 
 interface Props {
-//   date: string;
-//   name: string;
-//   email: string;
-//   id: string;
-//   gender?: string;
-//   testDetails: ModuleScore[];
-//   summary: string;
-//   logo: string;
-//   qrcode: string;
-//   renderDetails: React.ReactNode;
-//   title: string;
+  date: string;
+  name: string;
+  email: string;
+  id: string;
+  gender?: string;
+  testDetails: ModuleScore[];
+  summary: string;
+  logo: string;
+  qrcode: string;
+  renderDetails: React.ReactNode;
+  title: string;
+  numberOfStudents: number;
+  institution: string;
+  studentsData: any[];
 }
 
-const GroupTestReport = ({}: Props) => {
+const customStyles = StyleSheet.create({
+  tableCellHighlight: {
+    backgroundColor: "#4f4969",
+    color: "#bc9970",
+  },
+  table: {
+    display: "flex",
+    flexDirection: "column",
+    // maxWidth: "600px",
+    // margin: "0 auto",
+    border: "1px solid #ccc",
+    // borderCollapse: 'collapse',
+  },
+  tableRow: {
+    display: "flex",
+    flexDirection: "row",
+    borderBottom: "1px solid #ccc",
+  },
+  tableHeader: {
+    fontWeight: "bold",
+    backgroundColor: "#f2f2f2",
+  },
+  tableCell: {
+    flex: 1,
+    padding: "8px",
+    textAlign: "left",
+    wordBreak: "break-all",
+  },
+});
+
+const GroupTestReport = ({
+  title,
+  date,
+  name,
+  email,
+  id,
+  gender,
+  testDetails,
+  summary,
+  logo,
+  qrcode,
+  renderDetails,
+  numberOfStudents,
+  institution,
+  studentsData,
+}: Props) => {
+  const defaultTextStyle = [styles.textFont, { fontSize: 8 }];
+  const defaultSkillsTextStyle = [styles.textFont, { fontSize: 8 }];
+  const defaultSkillsTitleStyle = [
+    styles.textFont,
+    styles.textColor,
+    styles.textBold,
+    { fontSize: 7 },
+  ];
+
   return (
     <Document>
       <Page style={styles.body}>
-        <View></View>
+        <View style={styles.alignRightRow}>
+          <Image src={logo} fixed style={styles.image64} />
+        </View>
+        <View style={styles.titleView}>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              styles.textUnderline,
+              styles.title,
+              { fontSize: 14 },
+            ]}
+          >
+            {title}
+          </Text>
+        </View>
+        <View style={styles.textPadding}>
+          <Text style={defaultTextStyle}>Date of Test: {date}</Text>
+        </View>
+        <Text style={[styles.textFont, styles.textBold, { fontSize: 11 }]}>
+          Candidate Information:
+        </Text>
+        <View style={styles.textPadding}>
+          <Text style={defaultTextStyle}>Name: {name}</Text>
+          <Text style={defaultTextStyle}>ID: {id}</Text>
+          <Text style={defaultTextStyle}>Email: {email}</Text>
+          <Text style={defaultTextStyle}>Gender: {gender}</Text>
+          <Text style={defaultTextStyle}>
+            Total Number of Students: {numberOfStudents}
+          </Text>
+          <Text style={defaultTextStyle}>Institution: {institution}</Text>
+        </View>
+        <View style={{ flex: 1 }}>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              { fontSize: 12 },
+            ]}
+          >
+            Group Test Details:
+          </Text>
+          <View>{renderDetails}</View>
+        </View>
+        <View>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              { fontSize: 12 },
+            ]}
+          >
+            Group Overall Performance Summary
+          </Text>
+          <View>
+            <Text style={[styles.textFont, { fontSize: 8 }]}>{summary}</Text>
+          </View>
+        </View>
+        <View style={[{ paddingTop: 30 }, styles.separator]}></View>
+        <View>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              styles.textUnderline,
+              { fontSize: 12, paddingTop: 10 },
+            ]}
+          >
+            Group Score Summary
+          </Text>
+          <View
+            style={{
+              paddingTop: 10,
+              gap: 8,
+            }}
+          >
+            {testDetails
+              .filter(
+                ({ suggestions, evaluation }) => suggestions || evaluation
+              )
+              .map(({ module, suggestions, evaluation }) => (
+                <Text key={module}>TODO</Text>
+              ))}
+          </View>
+          <View style={styles.alignRightRow}>
+            <Image src={qrcode} style={styles.qrcode} />
+          </View>
+        </View>
+        <View style={[{ paddingBottom: 30 }, styles.separator]}></View>
+        {false && (
+          <View>
+            <ProgressBar
+              width={200}
+              height={18}
+              backgroundColor="#cc5b55"
+              progressColor="#fab7b0"
+              percentage={60}
+            />
+          </View>
+        )}
+        <View style={{ flexGrow: 1 }}></View>
+        <TestReportFooter />
+      </Page>
+      <Page style={styles.body}>
+        <View
+          style={[
+            customStyles.table,
+            styles.textFont,
+            { width: "100%", fontSize: "8px" },
+          ]}
+        >
+          <View
+            style={[
+              customStyles.tableRow,
+              customStyles.tableHeader,
+              customStyles.tableCellHighlight,
+            ]}
+          >
+            <Text style={customStyles.tableCell}>Sr</Text>
+            <Text style={customStyles.tableCell}>Candidate Name</Text>
+            <Text style={customStyles.tableCell}>Email ID</Text>
+            <Text style={customStyles.tableCell}>Gender</Text>
+            <Text style={customStyles.tableCell}>Date of test</Text>
+            <Text style={customStyles.tableCell}>Result</Text>
+            <Text style={customStyles.tableCell}>Level</Text>
+            <Text style={customStyles.tableCell}>ID</Text>
+          </View>
+          {studentsData.map(
+            ({ id, name, email, gender, date, result, level }, index) => (
+              <View style={customStyles.tableRow} key={id}>
+                <Text
+                  style={[
+                    customStyles.tableCell,
+                    customStyles.tableCellHighlight,
+                  ]}
+                >
+                  {index + 1}
+                </Text>
+                <Text style={customStyles.tableCell}>{name}</Text>
+                <Text style={customStyles.tableCell}>{email}</Text>
+                <Text style={customStyles.tableCell}>{gender}</Text>
+                <Text style={customStyles.tableCell}>{date}</Text>
+                <Text style={customStyles.tableCell}>{result}</Text>
+                <Text style={customStyles.tableCell}>{level}</Text>
+                <Text style={customStyles.tableCell}>{id}</Text>
+              </View>
+            )
+          )}
+        </View>
+
+        <View style={{ flexGrow: 1 }}></View>
+        <TestReportFooter />
       </Page>
     </Document>
   );

src/exams/pdf/styles.ts

@@ -47,4 +47,8 @@ export const styles = StyleSheet.create({
     height: "64px",
     width: "64px",
   },
+  qrcode: {
+    width: "80px",
+    height: "80px",
+  },
 });

src/exams/pdf/test.report.footer.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { styles } from "./styles";
+import { View, Text } from "@react-pdf/renderer";
+
+const TestReportFooter = () => (
+  <View style={[{ paddingTop: 30, fontSize: 5 }, styles.textFont]}>
+    <View
+      style={[
+        styles.spacedRow,
+        {
+          paddingHorizontal: 10,
+        },
+      ]}
+    >
+      <View>
+        <Text>Validity</Text>
+        <Text>
+          This report remains valid for a duration of three months from the test
+          date.
+        </Text>
+      </View>
+      <View>
+        <Text>Confidential – circulated for concern people</Text>
+      </View>
+    </View>
+    <View style={{ paddingTop: 10 }}>
+      <Text>Declaration</Text>
+      <Text style={{ paddingTop: 5 }}>
+        We hereby declare that exam results on our platform, assessed by AI, are
+        not the sole determinants of candidates&apos; English proficiency
+        levels. While EnCoach provides feedback based on assessments, we
+        recognize that language proficiency encompasses practical application,
+        cultural understanding, and real-life communication. We urge users to
+        consider exam results as a measure of progress and improvement, and we
+        continuously enhance our system to ensure accuracy and reliability.
+      </Text>
+    </View>
+    <View style={[styles.textColor, { paddingTop: 5 }]}>
+      <Text style={styles.textUnderline}>info@encoach.com</Text>
+      <Text>https://encoach.com</Text>
+      <View style={styles.spacedRow}>
+        <Text>Group ID: TRI64BNBOIU5043</Text>
+        <Text
+          // style={styles.pageNumber}
+          render={({ pageNumber, totalPages }) =>
+            `${pageNumber} / ${totalPages}`
+          }
+          fixed
+        />
+      </View>
+    </View>
+  </View>
+);
+
+export default TestReportFooter;

src/exams/pdf/test.report.tsx

@@ -1,21 +1,16 @@
 /* eslint-disable jsx-a11y/alt-text */
 import React from "react";
 import { Document, Page, View, Text, Image } from "@react-pdf/renderer";
-import ProgressBar from "./progress.bar";
 import { ModuleScore } from "@/interfaces/module.scores";
 import { styles } from "./styles";
 
 import { StyleSheet } from "@react-pdf/renderer";
-
+import TestReportFooter from "./test.report.footer";
 const customStyles = StyleSheet.create({
   testDetails: {
     display: "flex",
     gap: 4,
   },
-  qrcode: {
-    width: "80px",
-    height: "80px",
-  },
 });
 
 interface Props {
@@ -148,71 +143,13 @@ const TestReport = ({
           <View style={styles.alignRightRow}>
             <Image
               src={qrcode}
-              style={customStyles.qrcode}
+              style={styles.qrcode}
             />
           </View>
         </View>
         <View style={[{ paddingBottom: 30 }, styles.separator]}></View>
-        {false && (
-          <View>
-            <ProgressBar
-              width={200}
-              height={18}
-              backgroundColor="#cc5b55"
-              progressColor="#fab7b0"
-              percentage={60}
-            />
-          </View>
-        )}
         <View style={{ flexGrow: 1 }}></View>
-        <View style={[{ paddingTop: 30, fontSize: 5 }, styles.textFont]}>
-          <View
-            style={[
-              styles.spacedRow,
-              {
-                paddingHorizontal: 10,
-              },
-            ]}
-          >
-            <View>
-              <Text>Validity</Text>
-              <Text>
-                This report remains valid for a duration of three months from
-                the test date.
-              </Text>
-            </View>
-            <View>
-              <Text>Confidential – circulated for concern people</Text>
-            </View>
-          </View>
-          <View style={{ paddingTop: 10 }}>
-            <Text>Declaration</Text>
-            <Text style={{ paddingTop: 5 }}>
-              We hereby declare that exam results on our platform, assessed by
-              AI, are not the sole determinants of candidates&apos; English
-              proficiency levels. While EnCoach provides feedback based on
-              assessments, we recognize that language proficiency encompasses
-              practical application, cultural understanding, and real-life
-              communication. We urge users to consider exam results as a measure
-              of progress and improvement, and we continuously enhance our
-              system to ensure accuracy and reliability.
-            </Text>
-          </View>
-          <View style={[styles.textColor, { paddingTop: 5 }]}>
-            <Text style={styles.textUnderline}>info@encoach.com</Text>
-            <Text>https://encoach.com</Text>
-            <View style={styles.spacedRow}>
-              <Text>Group ID: TRI64BNBOIU5043</Text>
-              <Text
-                // style={styles.pageNumber}
-                render={({ pageNumber, totalPages }) =>
-                  `${pageNumber} / ${totalPages}`
-                }
-                fixed
-              />
-            </View>
-          </View>
-        </View>
+        <TestReportFooter />
       </Page>
     </Document>
   );