Added support for PDF bulletpoints

src/exams/pdf/list.item.tsx

@@ -0,0 +1,24 @@
+import { Text, View, StyleSheet } from "@react-pdf/renderer";
+
+const styles = StyleSheet.create({
+  row: {
+    display: "flex",
+    flexDirection: "row",
+  },
+  bullet: {
+    height: "100%",
+  },
+});
+
+const ListItem = ({ text, textStyle }: { text: string, textStyle: any[] }) => {
+  return (
+    <View style={styles.row}>
+      <View style={styles.bullet}>
+        <Text style={textStyle}>{"\u2022" + " "}</Text>
+      </View>
+      <Text style={textStyle}>{text}</Text>
+    </View>
+  );
+};
+
+export default ListItem;

src/exams/pdf/test.report.tsx

@@ -6,11 +6,17 @@ import { styles } from "./styles";
 
 import { StyleSheet } from "@react-pdf/renderer";
 import TestReportFooter from "./test.report.footer";
+import ListItem from "./list.item";
+
 const customStyles = StyleSheet.create({
   testDetails: {
     display: "flex",
     gap: 4,
   },
+  testDetailsContainer: {
+    display: "flex",
+    gap: 16,
+  },
 });
 
 interface Props {
@@ -149,16 +155,47 @@ const TestReport = ({
               .filter(
                 ({ suggestions, evaluation }) => suggestions || evaluation
               )
-              .map(({ module, suggestions, evaluation }) => (
-                <View key={module} style={customStyles.testDetails}>
-                  <Text style={[...defaultSkillsTitleStyle, styles.textBold]}>
+              .map(
+                ({
+                  module,
+                  suggestions,
+                  evaluation,
+                  bullet_points = [],
+                }) => (
+                  <View key={module} style={customStyles.testDetailsContainer}>
+                    <View style={customStyles.testDetails}>
+                      <Text
+                        style={[...defaultSkillsTitleStyle, styles.textBold]}
+                      >
                         {module}
                       </Text>
                       <Text style={defaultSkillsTextStyle}>{evaluation}</Text>
                       <Text style={defaultSkillsTextStyle}>{suggestions}</Text>
                     </View>
+                    <View style={customStyles.testDetails}>
+                      {bullet_points.length > 0 && (
+                        <>
+                          <Text
+                            style={defaultSkillsTitleStyle}
+                          >
+                            How to Improve:
+                          </Text>
+                          <View>
+                            {bullet_points.map((text: string) => (
+                              <ListItem
+                                key={text}
+                                text={text}
+                                textStyle={defaultSkillsTextStyle}
+                              />
                             ))}
                           </View>
+                        </>
+                      )}
+                    </View>
+                  </View>
+                )
+              )}
+          </View>
           <View style={styles.alignRightRow}>
             <Image src={qrcode} style={styles.qrcode} />
           </View>

src/interfaces/module.scores.ts

@@ -8,6 +8,7 @@ export interface ModuleScore {
 	png?: string;
 	evaluation?: string;
 	suggestions?: string;
+	bullet_points?: string[];
 }
 
 export interface StudentData {

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

@@ -79,6 +79,7 @@ interface SkillsFeedbackRequest {
 interface SkillsFeedbackResponse extends SkillsFeedbackRequest {
 	evaluation: string;
 	suggestions: string;
+	bullet_points?: string[];
 }
 
 const getSkillsFeedback = async (sections: SkillsFeedbackRequest[]) => {
@@ -225,6 +226,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 							...result,
 							evaluation: feedback?.evaluation,
 							suggestions: feedback?.suggestions,
+							bullet_points: feedback?.bullet_points,
 						};
 					}