Fixed Logo

Modules results display

src/exams/pdf/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/alt-text */
 import React from "react";
 import {
   Document,
@@ -5,14 +6,18 @@ import {
   View,
   Text,
   StyleSheet,
+  Image,
 } from "@react-pdf/renderer";
 import ProgressBar from "./progress.bar";
 // import RadialProgress from "./radial.progress";
 // import RadialProgressSvg from "./radial.progress.svg";
+import { Module } from "@/interfaces";
+import { ModuleScore } from "@/interfaces/module.scores";
+// import logo from './logo_title.png';
 
 const styles = StyleSheet.create({
   body: {
-    paddingTop: 35,
+    paddingTop: 10,
     paddingBottom: 20,
     paddingHorizontal: 35,
   },
@@ -35,6 +40,7 @@ const styles = StyleSheet.create({
     fontFamily: "Helvetica",
   },
   textBold: {
+    fontFamily: "Helvetica-Bold",
     fontWeight: "bold",
   },
   textColor: {
@@ -49,15 +55,28 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
   },
 });
+
 interface Props {
   date: string;
   name: string;
   email: string;
   id: string;
   gender?: string;
+  testDetails: ModuleScore[];
+  summary: string;
+  logo: string;
 }
 
-const PDFReport = ({ date, name, email, id, gender }: Props) => {
+const PDFReport = ({
+  date,
+  name,
+  email,
+  id,
+  gender,
+  testDetails,
+  summary,
+  logo,
+}: Props) => {
   const defaultTextStyle = [styles.textFont, { fontSize: 8 }];
   const defaultSkillsTextStyle = [styles.textFont, { fontSize: 8 }];
   const defaultSkillsTitleStyle = [
@@ -69,6 +88,18 @@ const PDFReport = ({ date, name, email, id, gender }: Props) => {
   return (
     <Document>
       <Page style={styles.body}>
+        <View
+          style={{
+            display: "flex",
+            flexDirection: "row-reverse",
+          }}
+        >
+          <Image
+            src={logo}
+            fixed
+            style={{ height: "64px", width: "64px" }}
+          />
+        </View>
         <View style={styles.titleView}>
           <Text
             style={[
@@ -106,6 +137,32 @@ const PDFReport = ({ date, name, email, id, gender }: Props) => {
           >
             Test Details:
           </Text>
+          <View style={{ display: "flex", flexDirection: "row", gap: 30 }}>
+            {testDetails.map(({ module, score, total }) => (
+              <View
+                key="module"
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 8,
+                }}
+              >
+                <Text
+                  style={[
+                    styles.textFont,
+                    styles.textColor,
+                    styles.textBold,
+                    { fontSize: 10 },
+                  ]}
+                >
+                  {module}
+                </Text>
+                <Text>{score}</Text>
+                <Text>Out of {total}</Text>
+              </View>
+            ))}
+          </View>
         </View>
         <View>
           <Text
@@ -119,7 +176,7 @@ const PDFReport = ({ date, name, email, id, gender }: Props) => {
             Performance Summary
           </Text>
           <View>
-            <Text></Text>
+            <Text style={[styles.textFont, { fontSize: 8 }]}>{summary}</Text>
           </View>
         </View>
         <View style={[{ paddingTop: 30 }, styles.separator]}></View>
@@ -138,16 +195,19 @@ const PDFReport = ({ date, name, email, id, gender }: Props) => {
           <View
             style={{
               paddingTop: 10,
+              gap: 8,
             }}
           >
-            <Text style={defaultSkillsTitleStyle}>Listening</Text>
-            <Text style={defaultSkillsTextStyle}>xxx</Text>
-            <Text style={defaultSkillsTitleStyle}>Reading</Text>
-            <Text style={defaultSkillsTextStyle}>xxx</Text>
-            <Text style={defaultSkillsTitleStyle}>Writing</Text>
-            <Text style={defaultSkillsTextStyle}>xxx</Text>
-            <Text style={defaultSkillsTitleStyle}>Speaking</Text>
-            <Text style={defaultSkillsTextStyle}>xxx</Text>
+            {testDetails
+              .filter(({ feedback }) => feedback)
+              .map(({ module, feedback }) => (
+                <View key={module}>
+                  <Text style={[...defaultSkillsTitleStyle, styles.textBold]}>
+                    {module}
+                  </Text>
+                  <Text style={defaultSkillsTextStyle}>{feedback}</Text>
+                </View>
+              ))}
           </View>
         </View>
         <View style={[{ paddingTop: 30 }, styles.separator]}>