Final improvements for Groups PDF's

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>
             )
           )}