Initial version of PDF export

src/exams/pdf/index.tsx

@@ -0,0 +1,141 @@
+import React from "react";
+import { Document, Page, View, Text, StyleSheet } from "@react-pdf/renderer";
+import ProgressBar from "./progress.bar";
+
+const styles = StyleSheet.create({
+  body: {
+    paddingTop: 35,
+    paddingBottom: 65,
+    paddingHorizontal: 35,
+  },
+  titleView: {
+    display: "flex",
+    // flex: 1,
+    alignItems: "center",
+  },
+  title: {
+    textTransform: "uppercase",
+  },
+  textPadding: {
+    margin: "16px",
+  },
+  userSection: {
+    fontWeight: "bold",
+  },
+  separator: {
+    width: "100%",
+    borderBottom: "1px solid blue",
+  },
+  textColor: {
+    color: "blue",
+  },
+  textUnderline: {
+    textDecoration: "underline",
+  },
+  skillsTitle: {
+    fontSize: 14,
+  },
+  skillsText: {
+    fontSize: 12,
+  },
+  footerText: {
+    fontSize: 9,
+  },
+});
+interface Props {
+  date: string;
+  name: string;
+  email: string;
+  id: string;
+  gender?: string;
+}
+
+const PDFReport = ({ date, name, email, id, gender }: Props) => {
+  return (
+    <Document>
+      <Page style={styles.body}>
+        <View style={styles.titleView}>
+          <Text style={[styles.textColor, styles.textUnderline, styles.title]}>
+            English Skills Test Result Report
+          </Text>
+        </View>
+        <View style={styles.textPadding}>
+          <Text>Date of Test: {date}</Text>
+        </View>
+        <Text style={styles.userSection}>Candidate Information:</Text>
+        <View style={styles.textPadding}>
+          <Text>Name: {name}</Text>
+          <Text>ID: {id}</Text>
+          <Text>Email: {email}</Text>
+          <Text>Gender: {gender}</Text>
+        </View>
+        <View>
+          <Text>Test Details:</Text>
+        </View>
+        <View>
+          <Text>Performance Summary</Text>
+          <View>
+            <Text></Text>
+          </View>
+        </View>
+        <View style={[{ paddingTop: 30 }, styles.separator]}></View>
+        <View>
+          <Text style={[styles.textColor, styles.textUnderline]}>
+            Skills Feedback
+          </Text>
+          <View
+            style={{
+              paddingTop: 10,
+            }}
+          >
+            <Text style={[styles.textColor, styles.skillsTitle]}>
+              Listening
+            </Text>
+            <Text style={styles.skillsText}>xxx</Text>
+            <Text style={[styles.textColor, styles.skillsTitle]}>Reading</Text>
+            <Text style={styles.skillsText}>xxx</Text>
+            <Text style={[styles.textColor, styles.skillsTitle]}>Writing</Text>
+            <Text style={styles.skillsText}>xxx</Text>
+            <Text style={[styles.textColor, styles.skillsTitle]}>Speaking</Text>
+            <Text style={styles.skillsText}>xxx</Text>
+          </View>
+        </View>
+        <View style={[{ paddingTop: 30 }, styles.separator]}></View>
+        <View style={[{ paddingTop: 30 }, styles.footerText]}>
+          <Text>Validity</Text>
+          <Text>
+            This report remains valid for a duration of three months from the
+            test date. Confidential – circulated for concern people
+          </Text>
+          <Text>Declaration</Text>
+          <Text>
+            We hereby declare that exam results on our platform, assessed by AI,
+            are not the sole determinants of candidates&apos; English
+            proficiency levels. While EnCoach provides feedback based on
+            assessments, we recognize that language proficiency encompasses
+            practical application, cultural understanding, and real-life
+            communication. We urge users to consider exam results as a measure
+            of progress and improvement, and we continuously enhance our system
+            to ensure accuracy and reliability.
+          </Text>
+          <View>
+            <ProgressBar
+              width={200}
+              height={50}
+              backgroundColor="lightblue"
+              progressColor="red"
+              percentage={60}
+            />
+          </View>
+          <View style={styles.textColor}>
+            <Text>info@encoach.com</Text>
+            <Text>https://encoach.com</Text>
+            <Text>Group ID: TRI64BNBOIU5043</Text>
+          </View>
+        </View>
+      </Page>
+    </Document>
+  );
+};
+
+export default PDFReport;

src/exams/pdf/progress.bar.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { View, StyleSheet } from "@react-pdf/renderer";
+
+const styles = StyleSheet.create({
+  progressBar: {
+    borderRadius: 16,
+    overflow: "hidden",
+  },
+  progressBarPerc: {
+    height: "100%",
+    zIndex: 1,
+  },
+});
+
+interface Props {
+	width: number;
+	height: number;
+    backgroundColor: string;
+    progressColor: string;
+    percentage: number;
+}
+
+const ProgressBar = ({
+  width,
+  height,
+  backgroundColor,
+  progressColor,
+  percentage,
+}: Props) => {
+  return (
+    <View
+      style={[
+        {
+          width,
+          height,
+          backgroundColor,
+        },
+        styles.progressBar,
+      ]}
+    >
+      <View
+        style={[
+          { width: `${percentage}px`, backgroundColor: progressColor },
+          styles.progressBarPerc,
+        ]}
+      ></View>
+    </View>
+  );
+};
+
+export default ProgressBar;