Added final touches

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

@@ -3,6 +3,7 @@ import React from "react";
 import { Document, Page, View, Text, Image } from "@react-pdf/renderer";
 import { ModuleScore } from "@/interfaces/module.scores";
 import { styles } from "./styles";
+import TestReportFooter from "./test.report.footer";
 
 import { StyleSheet } from "@react-pdf/renderer";
 
@@ -17,17 +18,16 @@ const customStyles = StyleSheet.create({
   },
   table: {
     width: "100%",
-    margin: "10px",
   },
   tableRow: {
     flexDirection: "row",
   },
-  tableCol50: {
-    width: "50%", // First column width (50%)
+  tableCol70: {
+    width: "70%", // First column width (50%)
     borderStyle: "solid",
     borderWidth: 1,
     borderColor: "#000",
-    padding: 5,
+    // padding: 5,
   },
   tableCol25: {
     width: "16.67%", // Remaining four columns each get 1/6 of the total width (50% / 3 = 16.67%)
@@ -43,11 +43,20 @@ const customStyles = StyleSheet.create({
     borderColor: "#000",
     padding: 5,
   },
+  tableCol10: {
+    width: "10%", // Width for each of the 5 sub-columns (50% / 5 = 20%)
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderColor: "#000",
+    padding: 5,
+  },
   tableCellHeader: {
-    backgroundColor: "#d3d3d3",
-    fontWeight: "bold",
+    fontSize: 12,
     textAlign: "center",
   },
+  tableCellHeaderColor: {
+    backgroundColor: "#d3d3d3",
+  },
   tableCell: {
     fontSize: 10,
     textAlign: "center",
@@ -86,7 +95,7 @@ const LevelTestReport = ({
   const defaultTextStyle = [styles.textFont, { fontSize: 8 }];
   return (
     <Document>
-      <Page style={styles.body}>
+      <Page style={styles.body} orientation="landscape">
         <Text style={[styles.textFont, styles.textBold, { fontSize: 11 }]}>
           Corporate Name: {corporateName}
         </Text>
@@ -111,56 +120,97 @@ const LevelTestReport = ({
         <View style={customStyles.table}>
           {/* Header Row */}
           <View style={customStyles.tableRow}>
-            <View style={customStyles.tableCol50}>
-              <Text style={customStyles.tableCellHeader}>Test sections</Text>
+            <View
+              style={[
+                customStyles.tableCol70,
+                customStyles.tableCellHeaderColor,
+              ]}
+            >
+              <Text style={[customStyles.tableCellHeader, { padding: 5 }]}>
+                Test sections
+              </Text>
             </View>
-            <View style={customStyles.tableCol25}>
+            <View
+              style={[
+                customStyles.tableCol20,
+                customStyles.tableCellHeaderColor,
+              ]}
+            >
               <Text style={customStyles.tableCellHeader}>Time spent</Text>
             </View>
-            <View style={customStyles.tableCol25}>
+            <View
+              style={[
+                customStyles.tableCol10,
+                customStyles.tableCellHeaderColor,
+              ]}
+            >
               <Text style={customStyles.tableCellHeader}>Score</Text>
             </View>
           </View>
           <View style={customStyles.tableRow}>
-            <View style={customStyles.tableCol50}>
+            <View style={customStyles.tableCol70}>
               <View style={customStyles.tableRow}>
                 {uniqueExercises.map((exercise, index) => (
-                  <View style={customStyles.tableCol20} key={index}>
+                  <View
+                    style={[
+                      customStyles.tableCol20,
+                      index !== uniqueExercises.length - 1
+                        ? { borderWidth: 0, borderRightWidth: 1 }
+                        : { borderWidth: 0 },
+                    ]}
+                    key={index}
+                  >
                     <Text style={customStyles.tableCell}>Part {index + 1}</Text>
                   </View>
                 ))}
               </View>
             </View>
-            <View style={customStyles.tableCol25}>
+            <View style={customStyles.tableCol20}>
               <Text style={customStyles.tableCell}></Text>
             </View>
-            <View style={customStyles.tableCol25}>
+            <View style={customStyles.tableCol10}>
               <Text style={customStyles.tableCell}></Text>
             </View>
           </View>
 
           <View style={customStyles.tableRow}>
-            <View style={customStyles.tableCol50}>
+            <View style={customStyles.tableCol70}>
               <View style={customStyles.tableRow}>
                 {uniqueExercises.map((exercise, index) => (
-                  <View style={customStyles.tableCol20} key={index}>
+                  <View
+                    style={[
+                      customStyles.tableCol20,
+                      index !== uniqueExercises.length - 1
+                        ? { borderWidth: 0, borderRightWidth: 1 }
+                        : { borderWidth: 0 },
+                    ]}
+                    key={index}
+                  >
                     <Text style={customStyles.tableCell}>{exercise.name}</Text>
                   </View>
                 ))}
               </View>
             </View>
-            <View style={customStyles.tableCol25}>
+            <View style={customStyles.tableCol20}>
               <Text style={customStyles.tableCell}></Text>
             </View>
-            <View style={customStyles.tableCol25}>
+            <View style={customStyles.tableCol10}>
               <Text style={customStyles.tableCell}></Text>
             </View>
           </View>
           <View style={customStyles.tableRow}>
-            <View style={customStyles.tableCol50}>
+            <View style={customStyles.tableCol70}>
               <View style={customStyles.tableRow}>
                 {uniqueExercises.map((exercise, index) => (
-                  <View style={customStyles.tableCol20} key={index}>
+                  <View
+                    style={[
+                      customStyles.tableCol20,
+                      index !== uniqueExercises.length - 1
+                        ? { borderWidth: 0, borderRightWidth: 1 }
+                        : { borderWidth: 0 },
+                    ]}
+                    key={index}
+                  >
                     <Text style={customStyles.tableCell}>
                       {exercise.result}
                     </Text>
@@ -168,14 +218,15 @@ const LevelTestReport = ({
                 ))}
               </View>
             </View>
-            <View style={customStyles.tableCol25}>
+            <View style={customStyles.tableCol20}>
               <Text style={customStyles.tableCell}>{timeSpent}</Text>
             </View>
-            <View style={customStyles.tableCol25}>
+            <View style={customStyles.tableCol10}>
               <Text style={customStyles.tableCell}>{score}</Text>
             </View>
           </View>
         </View>
+        <TestReportFooter userId={userId} />
       </Page>
     </Document>
   );