Final improvements for Groups PDF's

src/exams/pdf/details/level.exam.tsx

@@ -5,6 +5,7 @@ import { styles } from "../styles";
 import { RadialResult } from "./radial.result";
 interface Props {
   detail: ModuleScore;
+  title: string;
 }
 
 const thresholds = [
@@ -63,7 +64,7 @@ const customStyles = StyleSheet.create({
   },
 });
 
-export const LevelExamDetails = ({ detail }: Props) => {
+export const LevelExamDetails = ({ detail, title }: Props) => {
   const updatedThresholds = thresholds.map((t) => ({
     ...t,
     match: detail.score >= t.minValue && detail.score <= t.maxValue,
@@ -86,7 +87,7 @@ export const LevelExamDetails = ({ detail }: Props) => {
           <Text
             style={[styles.textBold, styles.textColor, { fontSize: "10px" }]}
           >
-            Level as per CEFR Levels
+            {title}
           </Text>
         </View>
         <View style={customStyles.tableBody}>

src/exams/pdf/details/radial.result.tsx

@@ -1,39 +1,22 @@
 /* eslint-disable jsx-a11y/alt-text */
 import React from "react";
 
-import { View, Text, Image, StyleSheet } from "@react-pdf/renderer";
+import { View, Text, Image } from "@react-pdf/renderer";
 import { styles } from "../styles";
 import { ModuleScore } from "@/interfaces/module.scores";
 
-const customStyles = StyleSheet.create({
-  container: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: 4,
-    position: "relative",
-  },
-  resultContainer: {
-    display: "flex",
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: 10,
-    gap: 8,
-  },
-});
-
-export const RadialResult = ({ module, score, total, png }: ModuleScore) => (
-  <View key="module" style={[styles.textFont, customStyles.container]}>
-    <Text style={[styles.textColor, styles.textBold, { fontSize: 10 }]}>
-      {module}
-    </Text>
+export const RadialResult = ({
+  module,
+  score,
+  total,
+  png,
+}: ModuleScore) => (
+  <View style={[styles.textFont, styles.radialContainer]}>
+      <Text style={[styles.textColor, styles.textBold, { fontSize: 10 }]}>
+        {module}
+      </Text>
     <Image src={png} style={styles.image64}></Image>
-    <View style={[styles.textColor, customStyles.resultContainer]}>
+    <View style={[styles.textColor, styles.radialResultContainer]}>
       <Text style={styles.textBold}>{score}</Text>
       <Text style={{ fontSize: 8 }}>out of {total}</Text>
     </View>

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

@@ -13,7 +13,6 @@ import { styles } from "./styles";
 import TestReportFooter from "./test.report.footer";
 import { ModuleScore, StudentData } from "@/interfaces/module.scores";
 import ProgressBar from "./progress.bar";
-
 Font.registerHyphenationCallback((word) => [word]);
 
 interface Props {
@@ -32,6 +31,9 @@ interface Props {
   institution: string;
   studentsData: StudentData[];
   showLevel: boolean;
+  summaryPNG: string;
+  summaryScore: string;
+  groupScoreSummary: any[];
 }
 
 const customStyles = StyleSheet.create({
@@ -44,13 +46,11 @@ const customStyles = StyleSheet.create({
     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",
@@ -80,6 +80,9 @@ const GroupTestReport = ({
   institution,
   studentsData,
   showLevel,
+  summaryPNG,
+  summaryScore,
+  groupScoreSummary,
 }: Props) => {
   const defaultTextStyle = [styles.textFont, { fontSize: 8 }];
   const defaultSkillsTextStyle = [styles.textFont, { fontSize: 8 }];
@@ -150,8 +153,16 @@ const GroupTestReport = ({
           >
             Group Overall Performance Summary
           </Text>
-          <View>
-            <Text style={[styles.textFont, { fontSize: 8 }]}>{summary}</Text>
+          <View style={{ display: "flex", flexDirection: "row", gap: 16 }}>
+            <View style={{ flex: 1 }}>
+              <Text style={[styles.textFont, { fontSize: 8 }]}>{summary}</Text>
+            </View>
+            <View style={[styles.textFont, styles.radialContainer]}>
+              <Image src={summaryPNG} style={styles.image64}></Image>
+              <View style={[styles.textColor, styles.radialResultContainer]}>
+                <Text style={styles.textBold}>{summaryScore}</Text>
+              </View>
+            </View>
           </View>
         </View>
         <View style={[{ paddingTop: 30 }, styles.separator]}></View>
@@ -173,13 +184,44 @@ const GroupTestReport = ({
               gap: 8,
             }}
           >
-            {testDetails
-              .filter(
-                ({ suggestions, evaluation }) => suggestions || evaluation
-              )
-              .map(({ module, suggestions, evaluation }) => (
-                <Text key={module}>TODO</Text>
+            <View
+              style={[
+                customStyles.table,
+                styles.textFont,
+                { width: "100%", fontSize: "8px" },
+              ]}
+            >
+              {groupScoreSummary.map(({ label, percent, description }) => (
+                <View
+                  style={[
+                    customStyles.tableRow,
+                    {
+                      width: "100%",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    },
+                  ]}
+                  key={label}
+                >
+                  <Text style={[customStyles.tableCell, { maxWidth: "48px" }]}>
+                    {label}
+                  </Text>
+                  <View style={customStyles.tableCell}>
+                    <ProgressBar
+                      width={200}
+                      height={18}
+                      backgroundColor="#fab7b0"
+                      progressColor="#cc5b55"
+                      percentage={percent}
+                    />
+                  </View>
+                  <Text style={[customStyles.tableCell, { maxWidth: "24px" }]}>
+                    {percent}
+                  </Text>
+                  <Text style={customStyles.tableCell}>{description}</Text>
+                </View>
               ))}
+            </View>
           </View>
           <View style={styles.alignRightRow}>
             <Image src={qrcode} style={styles.qrcode} />
@@ -205,7 +247,7 @@ const GroupTestReport = ({
           style={[
             customStyles.table,
             styles.textFont,
-            { width: "100%", fontSize: "8px" },
+            { border: "1px solid #ccc", width: "100%", fontSize: "8px" },
           ]}
         >
           <View
@@ -213,6 +255,7 @@ const GroupTestReport = ({
               customStyles.tableRow,
               customStyles.tableHeader,
               customStyles.tableCellHighlight,
+              { borderBottom: "1px solid #ccc" },
             ]}
           >
             <Text style={[customStyles.tableCell, { maxWidth: "24px" }]}>
@@ -229,11 +272,17 @@ const GroupTestReport = ({
             <Text style={[customStyles.tableCell, { maxWidth: "48px" }]}>
               Result
             </Text>
-            <Text style={customStyles.tableCell}>Level</Text>
+            {showLevel && <Text style={customStyles.tableCell}>Level</Text>}
           </View>
           {studentsData.map(
             ({ id, name, email, gender, date, result, level }, index) => (
-              <View style={customStyles.tableRow} key={id}>
+              <View
+                style={[
+                  customStyles.tableRow,
+                  { borderBottom: "1px solid #ccc" },
+                ]}
+                key={id}
+              >
                 <Text
                   style={[
                     customStyles.tableCell,
@@ -254,7 +303,9 @@ const GroupTestReport = ({
                 <Text style={[customStyles.tableCell, { maxWidth: "48px" }]}>
                   {result}
                 </Text>
-                <Text style={customStyles.tableCell}>{level}</Text>
+                {showLevel && (
+                  <Text style={customStyles.tableCell}>{level}</Text>
+                )}
               </View>
             )
           )}

src/exams/pdf/progress.bar.tsx

@@ -40,7 +40,7 @@ const ProgressBar = ({
     >
       <View
         style={[
-          { width: `${percentage}px`, backgroundColor: progressColor },
+          { width: `${percentage}%`, backgroundColor: progressColor },
           styles.progressBarPerc,
         ]}
       ></View>

src/exams/pdf/styles.ts

@@ -51,4 +51,23 @@ export const styles = StyleSheet.create({
     width: "80px",
     height: "80px",
   },
+  radialContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 4,
+    position: "relative",
+  },
+  radialResultContainer: {
+    display: "flex",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 10,
+    gap: 8,
+  },
 });