Merge branch 'develop' of bitbucket.org:ecropdev/ielts-ui into develop

src/exams/pdf/styles.ts

@@ -55,7 +55,6 @@ export const styles = StyleSheet.create({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    gap: 4,
     position: "relative",
   },
   radialResultContainer: {

src/exams/pdf/test.report.tsx

@@ -25,6 +25,8 @@ interface Props {
   qrcode: string;
   renderDetails: React.ReactNode;
   title: string;
+  summaryPNG: string;
+  summaryScore: string;
 }
 
 const TestReport = ({
@@ -39,6 +41,8 @@ const TestReport = ({
   logo,
   qrcode,
   renderDetails,
+  summaryPNG,
+  summaryScore,
 }: Props) => {
   const defaultTextStyle = [styles.textFont, { fontSize: 8 }];
   const defaultSkillsTextStyle = [styles.textFont, { fontSize: 8 }];
@@ -104,8 +108,16 @@ const TestReport = ({
           >
             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>

src/pages/api/stats/[id]/export.tsx

@@ -263,12 +263,14 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
         );
         const overallResult = overallScore / overallTotal;
 
+        const overallPNG = getRadialProgressPNG("laranja", overallScore, overallTotal);
+
         // generate the overall detail report
         const overallDetail = {
           module: "Overall",
           score: overallScore,
           total: overallTotal,
-          png: getRadialProgressPNG("laranja", overallScore, overallTotal),
+          png: overallPNG,
         } as ModuleScore;
         const testDetails = [overallDetail, ...finalResults];
 
@@ -301,6 +303,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
         };
 
         const { title, details } = getCustomData();
+        
         const pdfStream = await ReactPDF.renderToStream(
           <TestReport
             title={title}
@@ -314,6 +317,8 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
             renderDetails={details}
             logo={"public/logo_title.png"}
             qrcode={qrcode}
+            summaryPNG={overallPNG}
+            summaryScore={`${(overallResult * 100).toFixed(0)}%`}
           />
         );