Merged develop into bug-fixing-10-Jan-24

package.json

@@ -17,6 +17,7 @@
     "@next/font": "13.1.6",
     "@paypal/paypal-js": "^7.1.0",
     "@paypal/react-paypal-js": "^8.1.3",
+    "@react-pdf/renderer": "^3.1.14",
     "@tanstack/react-table": "^8.10.1",
     "@types/node": "18.13.0",
     "@types/react": "18.0.27",
@@ -46,6 +47,7 @@
     "nodemailer-express-handlebars": "^6.1.0",
     "primeicons": "^6.0.1",
     "primereact": "^9.2.3",
+    "qrcode": "^1.5.3",
     "random-words": "^2.0.0",
     "react": "18.2.0",
     "react-chartjs-2": "^5.2.0",
@@ -74,11 +76,13 @@
     "zustand": "^4.3.6"
   },
   "devDependencies": {
+    "@types/blob-stream": "^0.1.33",
     "@types/formidable": "^3.4.0",
     "@types/howler": "^2.2.11",
     "@types/lodash": "^4.14.191",
     "@types/nodemailer": "^6.4.11",
     "@types/nodemailer-express-handlebars": "^4.0.3",
+    "@types/qrcode": "^1.5.5",
     "@types/react-csv": "^1.1.10",
     "@types/react-datepicker": "^4.15.1",
     "@types/uuid": "^9.0.1",

src/components/DemographicInformationInput.tsx

@@ -19,6 +19,7 @@ interface Props {
 export default function DemographicInformationInput({user, mutateUser}: Props) {
 	const [country, setCountry] = useState<string>();
 	const [phone, setPhone] = useState<string>();
+	const [passport_id, setPassportID] = useState<string>();
 	const [gender, setGender] = useState<Gender>();
 	const [employment, setEmployment] = useState<EmploymentStatus>();
 	const [position, setPosition] = useState<string>();
@@ -39,6 +40,7 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
 					gender,
 					employment: user.type === "corporate" ? undefined : employment,
 					position: user.type === "corporate" ? position : undefined,
+					passport_id,
 				},
 				agentInformation: user.type === "agent" ? {companyName, commercialRegistration} : undefined,
 			})
@@ -72,11 +74,23 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
 						/>
 					</div>
 				)}
+				<div className="w-full grid grid-cols-2 gap-6">
 					<div className="relative flex flex-col gap-3 w-full">
 						<label className="font-normal text-base text-mti-gray-dim">Country *</label>
 						<CountrySelect value={country} onChange={setCountry} />
 					</div>
 					<Input type="tel" name="phone" label="Phone number" onChange={(e) => setPhone(e)} placeholder="Enter phone number" required />
+				</div>
+				{user.type === "student" && (
+					<Input
+						type="text"
+						name="passport_id"
+						label="Passport/National ID"
+						onChange={(e) => setPassportID(e)}
+						placeholder="Enter National ID or Passport number"
+						required
+					/>
+				)}
 				<div className="relative flex flex-col gap-3 w-full">
 					<label className="font-normal text-base text-mti-gray-dim">Gender *</label>
 					<RadioGroup value={gender} onChange={setGender} className="flex flex-row justify-between">

src/components/UserCard.tsx

@@ -41,23 +41,25 @@ interface Props {
 
 const USER_STATUS_OPTIONS = [
 	{
-		value: 'active',
+		value: "active",
-		label: 'Active',
+		label: "Active",
-	}, {
+	},
-		value: 'disabled',
+	{
-		label: 'Disabled',
+		value: "disabled",
-	}, {
+		label: "Disabled",
-		value: 'paymentDue',
+	},
-		label: 'Payment Due',
+	{
-	}
+		value: "paymentDue",
+		label: "Payment Due",
+	},
 ];
 
 const USER_TYPE_OPTIONS = Object.keys(USER_TYPE_LABELS).map((type) => ({
 	value: type,
-	label: USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]
+	label: USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS],
 }));
 
-const CURRENCIES_OPTIONS = CURRENCIES.map(({ label, currency}) => ({ value: currency, label }));
+const CURRENCIES_OPTIONS = CURRENCIES.map(({label, currency}) => ({value: currency, label}));
 
 const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers, onViewCorporate, disabled = false}: Props) => {
 	const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
@@ -65,6 +67,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 	const [status, setStatus] = useState(user.status);
 	const [referralAgentLabel, setReferralAgentLabel] = useState<string>();
 	const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
+	const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
 
 	const [referralAgent, setReferralAgent] = useState(user.type === "corporate" ? user.corporateInformation?.referralAgent : undefined);
 	const [companyName, setCompanyName] = useState(
@@ -352,6 +355,19 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 					/>
 				</div>
 
+				{user.type === "student" && (
+					<Input
+						type="text"
+						name="passport_id"
+						label="Passport/National ID"
+						onChange={() => null}
+						placeholder="Enter National ID or Passport number"
+						value={user.type === "student" ? user.demographicInformation?.passport_id : undefined}
+						disabled
+						required
+					/>
+				)}
+
 				<div className="flex flex-col md:flex-row gap-8 w-full">
 					{user.type !== "corporate" && (
 						<div className="relative flex flex-col gap-3 w-full">
@@ -397,8 +413,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 							<RadioGroup
 								value={user.demographicInformation?.gender}
 								className="flex flex-row gap-4 justify-between"
-								disabled={disabled}
+								disabled={disabled}>
-							>
 								<RadioGroup.Option value="male">
 									{({checked}) => (
 										<span
@@ -449,8 +464,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 								<Checkbox
 									isChecked={!!expiryDate}
 									onChange={(checked) => setExpiryDate(checked ? user.subscriptionExpirationDate || new Date() : null)}
-									disabled={disabled}
+									disabled={disabled}>
-								>
 									Enabled
 								</Checkbox>
 							</div>

src/dashboards/AssignmentCard.tsx

@@ -2,19 +2,20 @@ import ProgressBar from "@/components/Low/ProgressBar";
 import useUsers from "@/hooks/useUsers";
 import {Module} from "@/interfaces";
 import {Assignment} from "@/interfaces/results";
-import {Stat} from "@/interfaces/user";
 import {calculateBandScore} from "@/utils/score";
 import clsx from "clsx";
 import moment from "moment";
-import {useState} from "react";
 import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
+import { usePDFDownload } from "@/hooks/usePDFDownload";
 
 interface Props {
 	onClick?: () => void;
+	allowDownload?: boolean;
 }
 
-export default function AssignmentCard({id, name, assigner, startDate, endDate, assignees, results, exams, onClick}: Assignment & Props) {
+export default function AssignmentCard({id, name, assigner, startDate, endDate, assignees, results, exams, onClick, allowDownload}: Assignment & Props) {
 	const {users} = useUsers();
+	const renderPdfIcon = usePDFDownload("assignments");
 
 	const calculateAverageModuleScore = (module: Module) => {
 		const resultModuleBandScores = results.map((r) => {
@@ -33,7 +34,10 @@ export default function AssignmentCard({id, name, assigner, startDate, endDate,
 			onClick={onClick}
 			className="w-[350px] h-fit flex flex-col gap-6 bg-white border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300">
 			<div className="flex flex-col gap-3">
+				<div className="flex flex-row justify-between">
 					<h3 className="font-semibold text-xl">{name}</h3>
+					{allowDownload && renderPdfIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
+				</div>
 				<ProgressBar
 					color={results.length / assignees.length < 0.5 ? "red" : "purple"}
 					percentage={(results.length / assignees.length) * 100}

src/dashboards/Teacher.tsx

@@ -226,7 +226,7 @@ export default function TeacherDashboard({user}: Props) {
 					<h2 className="text-2xl font-semibold">Past Assignments ({assignments.filter(pastFilter).length})</h2>
 					<div className="flex flex-wrap gap-2">
 						{assignments.filter(pastFilter).map((a) => (
-							<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} />
+							<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} allowDownload/>
 						))}
 					</div>
 				</section>

src/exams/pdf/details/level.exam.tsx

@@ -0,0 +1,169 @@
+import React from "react";
+import { View, Text, StyleSheet } from "@react-pdf/renderer";
+import { ModuleScore } from "@/interfaces/module.scores";
+import { styles } from "../styles";
+import { RadialResult } from "./radial.result";
+interface Props {
+  detail: ModuleScore;
+  title: string;
+}
+
+const thresholds = [
+  {
+    level: "Low A1",
+    label: "Begginner",
+    minValue: 0,
+    maxValue: 3,
+  },
+  {
+    level: "High A1/Low A2",
+    label: "Elementary",
+    minValue: 4,
+    maxValue: 7,
+  },
+  {
+    level: "High A2/Low B1",
+    label: "Pre-Intermediate",
+    minValue: 8,
+    maxValue: 12,
+  },
+  {
+    level: "High B2/Low C1",
+    label: "Upper-Intermediate",
+    minValue: 16,
+    maxValue: 21,
+  },
+  {
+    level: "C1",
+    label: "Advanced",
+    minValue: 22,
+    maxValue: 25,
+  },
+];
+
+const customStyles = StyleSheet.create({
+  container: {
+    display: "flex",
+    flexDirection: "row",
+    gap: 30,
+    justifyContent: "space-between",
+  },
+  tableContainer: {
+    display: "flex",
+    flex: 1,
+    flexDirection: "column",
+  },
+  tableLabel: {
+    display: "flex",
+    alignItems: "center",
+  },
+  tableBody: { display: "flex", flex: 1, flexDirection: "row" },
+  tableRow: {
+    display: "flex",
+    flexDirection: "column",
+  },
+});
+
+export const LevelExamDetails = ({ detail, title }: Props) => {
+  const updatedThresholds = thresholds.map((t) => ({
+    ...t,
+    match: detail.score >= t.minValue && detail.score <= t.maxValue,
+  }));
+
+  const getBackgroundColor = (match: boolean, base: boolean) => {
+    if (match) return "#c2bfdd";
+    return base ? "#553b25" : "#ea7c7b";
+  };
+
+  const getTextColor = (match: boolean, base: boolean) => {
+    if (match) return "#9e7936";
+    return base ? "white" : "#553b25";
+  };
+  return (
+    <View style={[styles.textFont, customStyles.container]}>
+      <RadialResult {...detail} />
+      <View style={customStyles.tableContainer}>
+        <View style={customStyles.tableLabel}>
+          <Text
+            style={[styles.textBold, styles.textColor, { fontSize: "10px" }]}
+          >
+            {title}
+          </Text>
+        </View>
+        <View style={customStyles.tableBody}>
+          {updatedThresholds.map(
+            ({ level, label, minValue, maxValue, match }, index, arr) => (
+              <View
+                key={label}
+                style={[
+                  customStyles.tableRow,
+                  {
+                    width: `calc(100% / ${arr.length})`,
+                  },
+                ]}
+              >
+                <View
+                  style={{
+                    backgroundColor: getBackgroundColor(match, true),
+                    paddingVertical: "8px",
+                    alignItems: "center",
+                  }}
+                >
+                  <Text
+                    style={[
+                      styles.textBold,
+                      {
+                        color: getTextColor(match, true),
+                        fontSize: "6px",
+                      },
+                    ]}
+                  >
+                    {level}
+                  </Text>
+                </View>
+                <View
+                  style={{
+                    backgroundColor: getBackgroundColor(match, false),
+                    paddingVertical: "8px",
+                    alignItems: "center",
+                  }}
+                >
+                  <Text
+                    style={[
+                      styles.textBold,
+                      {
+                        color: getTextColor(match, false),
+                        fontSize: "6px",
+                      },
+                    ]}
+                  >
+                    {label}
+                  </Text>
+                </View>
+                <View
+                  style={{
+                    backgroundColor: getBackgroundColor(match, true),
+                    paddingVertical: "24px",
+                    alignItems: "center",
+                  }}
+                >
+                  <Text
+                    style={[
+                      styles.textBold,
+                      {
+                        color: getTextColor(match, true),
+                        fontSize: "10px",
+                      },
+                    ]}
+                  >
+                    {minValue}-{maxValue}
+                  </Text>
+                </View>
+              </View>
+            )
+          )}
+        </View>
+      </View>
+    </View>
+  );
+};

src/exams/pdf/details/radial.result.tsx

@@ -0,0 +1,24 @@
+/* eslint-disable jsx-a11y/alt-text */
+import React from "react";
+
+import { View, Text, Image } from "@react-pdf/renderer";
+import { styles } from "../styles";
+import { ModuleScore } from "@/interfaces/module.scores";
+
+export const RadialResult = ({
+  module,
+  score,
+  total,
+  png,
+}: ModuleScore) => (
+  <View style={[styles.textFont, styles.radialContainer]}>
+      <Text style={[styles.textColor, styles.textBold, { fontSize: 10 }]}>
+        {module}
+      </Text>
+    <Image src={png} style={styles.image64}></Image>
+    <View style={[styles.textColor, styles.radialResultContainer]}>
+      <Text style={styles.textBold}>{score}</Text>
+      <Text style={{ fontSize: 8 }}>out of {total}</Text>
+    </View>
+  </View>
+);

src/exams/pdf/details/skill.exam.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { View, StyleSheet } from "@react-pdf/renderer";
+import { ModuleScore } from "@/interfaces/module.scores";
+import { RadialResult } from "./radial.result";
+interface Props {
+  testDetails: ModuleScore[];
+}
+
+const customStyles = StyleSheet.create({
+  container: { display: "flex", flexDirection: "row", gap: 30 },
+});
+
+export const SkillExamDetails = ({ testDetails }: Props) => (
+  <View style={customStyles.container}>
+    {testDetails.map((detail) => {
+      const { module } = detail;
+      return <RadialResult key={module} {...detail} />;
+    })}
+  </View>
+);

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

@@ -0,0 +1,300 @@
+/* eslint-disable jsx-a11y/alt-text */
+import React from "react";
+import {
+  Document,
+  Page,
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  Font,
+} from "@react-pdf/renderer";
+import { styles } from "./styles";
+import TestReportFooter from "./test.report.footer";
+import { StudentData } from "@/interfaces/module.scores";
+import ProgressBar from "./progress.bar";
+Font.registerHyphenationCallback((word) => [word]);
+
+interface Props {
+  date: string;
+  name: string;
+  email: string;
+  id: string;
+  gender?: string;
+  summary: string;
+  logo: string;
+  qrcode: string;
+  renderDetails: React.ReactNode;
+  title: string;
+  numberOfStudents: number;
+  institution: string;
+  studentsData: StudentData[];
+  showLevel: boolean;
+  summaryPNG: string;
+  summaryScore: string;
+  groupScoreSummary: any[];
+}
+
+const customStyles = StyleSheet.create({
+  tableCellHighlight: {
+    backgroundColor: "#4f4969",
+    color: "#bc9970",
+  },
+  table: {
+    display: "flex",
+    flexDirection: "column",
+    // maxWidth: "600px",
+    // margin: "0 auto",
+    // borderCollapse: 'collapse',
+  },
+  tableRow: {
+    display: "flex",
+    flexDirection: "row",
+  },
+  tableHeader: {
+    fontWeight: "bold",
+    backgroundColor: "#f2f2f2",
+  },
+  tableCell: {
+    flex: 1,
+    padding: "8px",
+    textAlign: "left",
+    wordBreak: "break-all",
+  },
+});
+
+const GroupTestReport = ({
+  title,
+  date,
+  name,
+  email,
+  id,
+  gender,
+  summary,
+  logo,
+  qrcode,
+  renderDetails,
+  numberOfStudents,
+  institution,
+  studentsData,
+  showLevel,
+  summaryPNG,
+  summaryScore,
+  groupScoreSummary,
+}: Props) => {
+  const defaultTextStyle = [styles.textFont, { fontSize: 8 }];
+  return (
+    <Document>
+      <Page style={styles.body}>
+        <View style={styles.alignRightRow}>
+          <Image src={logo} fixed style={styles.image64} />
+        </View>
+        <View style={styles.titleView}>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              styles.textUnderline,
+              styles.title,
+              { fontSize: 14 },
+            ]}
+          >
+            {title}
+          </Text>
+        </View>
+        <View style={styles.textPadding}>
+          <Text style={defaultTextStyle}>Date of Test: {date}</Text>
+        </View>
+        <Text style={[styles.textFont, styles.textBold, { fontSize: 11 }]}>
+          Candidate Information:
+        </Text>
+        <View style={styles.textPadding}>
+          <Text style={defaultTextStyle}>Name: {name}</Text>
+          <Text style={defaultTextStyle}>ID: {id}</Text>
+          <Text style={defaultTextStyle}>Email: {email}</Text>
+          <Text style={defaultTextStyle}>Gender: {gender}</Text>
+          <Text style={defaultTextStyle}>
+            Total Number of Students: {numberOfStudents}
+          </Text>
+          <Text style={defaultTextStyle}>Institution: {institution}</Text>
+        </View>
+        <View style={{ flex: 1 }}>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              { fontSize: 12 },
+            ]}
+          >
+            Group Test Details:
+          </Text>
+          <View>{renderDetails}</View>
+        </View>
+        <View>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              { fontSize: 12 },
+            ]}
+          >
+            Group Overall Performance 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>
+        <View>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              styles.textUnderline,
+              { fontSize: 12, paddingTop: 10 },
+            ]}
+          >
+            Group Score Summary
+          </Text>
+          <View
+            style={{
+              paddingTop: 10,
+              gap: 8,
+            }}
+          >
+            <View
+              style={[
+                customStyles.table,
+                styles.textFont,
+                { width: "100%", fontSize: "8px" },
+              ]}
+            >
+              {groupScoreSummary.map(({ label, percent, description }) => (
+                <View
+                  style={[
+                    customStyles.tableRow,
+                    {
+                      width: "100%",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    },
+                  ]}
+                  key={label}
+                >
+                  <Text style={customStyles.tableCell}>
+                    {label}
+                  </Text>
+                  <View style={[customStyles.tableCell, { flex: 2}]}>
+                    <ProgressBar
+                      width={200}
+                      height={18}
+                      backgroundColor="#fab7b0"
+                      progressColor="#cc5b55"
+                      percentage={percent}
+                    />
+                  </View>
+                  <Text style={[customStyles.tableCell, { maxWidth: "24px" }]}>
+                    {percent}%
+                  </Text>
+                  <Text style={customStyles.tableCell}>{description}</Text>
+                </View>
+              ))}
+            </View>
+          </View>
+          <View style={styles.alignRightRow}>
+            <Image src={qrcode} style={styles.qrcode} />
+          </View>
+        </View>
+        <View style={[{ paddingBottom: 30 }, styles.separator]}></View>
+        <View style={{ flexGrow: 1 }}></View>
+        <TestReportFooter />
+      </Page>
+      <Page style={styles.body}>
+        <View
+          style={[
+            customStyles.table,
+            styles.textFont,
+            { border: "1px solid #ccc", width: "100%", fontSize: "8px" },
+          ]}
+        >
+          <View
+            style={[
+              customStyles.tableRow,
+              customStyles.tableHeader,
+              customStyles.tableCellHighlight,
+              { borderBottom: "1px solid #ccc" },
+            ]}
+          >
+            <Text style={[customStyles.tableCell, { maxWidth: "24px" }]}>
+              Sr
+            </Text>
+            <Text style={customStyles.tableCell}>Candidate Name</Text>
+            <Text style={customStyles.tableCell}>Email ID</Text>
+            <Text style={[customStyles.tableCell, { maxWidth: "48px" }]}>
+              Gender
+            </Text>
+            <Text style={[customStyles.tableCell, { maxWidth: "64px" }]}>
+              Date of test
+            </Text>
+            <Text style={[customStyles.tableCell, { maxWidth: "48px" }]}>
+              Result
+            </Text>
+            {showLevel && <Text style={customStyles.tableCell}>Level</Text>}
+          </View>
+          {studentsData.map(
+            ({ id, name, email, gender, date, result, level }, index) => (
+              <View
+                style={[
+                  customStyles.tableRow,
+                  { borderBottom: "1px solid #ccc" },
+                ]}
+                key={id}
+              >
+                <Text
+                  style={[
+                    customStyles.tableCell,
+                    customStyles.tableCellHighlight,
+                    { maxWidth: "24px" },
+                  ]}
+                >
+                  {index + 1}
+                </Text>
+                <Text style={customStyles.tableCell}>{name}</Text>
+                <Text style={customStyles.tableCell}>{email}</Text>
+                <Text style={[customStyles.tableCell, { maxWidth: "48px" }]}>
+                  {gender}
+                </Text>
+                <Text style={[customStyles.tableCell, { maxWidth: "64px" }]}>
+                  {date}
+                </Text>
+                <Text style={[customStyles.tableCell, { maxWidth: "48px" }]}>
+                  {result}
+                </Text>
+                {showLevel && (
+                  <Text style={customStyles.tableCell}>{level}</Text>
+                )}
+              </View>
+            )
+          )}
+        </View>
+
+        <View style={{ flexGrow: 1 }}></View>
+        <TestReportFooter />
+      </Page>
+    </Document>
+  );
+};
+
+export default GroupTestReport;

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}%`, backgroundColor: progressColor },
+          styles.progressBarPerc,
+        ]}
+      ></View>
+    </View>
+  );
+};
+
+export default ProgressBar;

src/exams/pdf/styles.ts

@@ -0,0 +1,73 @@
+import { StyleSheet } from "@react-pdf/renderer";
+
+export const styles = StyleSheet.create({
+  body: {
+    paddingTop: 10,
+    paddingBottom: 20,
+    paddingHorizontal: 35,
+  },
+  titleView: {
+    display: "flex",
+    // flex: 1,
+    alignItems: "center",
+  },
+  title: {
+    textTransform: "uppercase",
+  },
+  textPadding: {
+    margin: "8px",
+  },
+  separator: {
+    width: "100%",
+    borderBottom: "1px solid #89b0c2",
+  },
+  textFont: {
+    fontFamily: "Helvetica",
+  },
+  textBold: {
+    fontFamily: "Helvetica-Bold",
+    fontWeight: "bold",
+  },
+  textColor: {
+    color: "#4e4969",
+  },
+  textUnderline: {
+    textDecoration: "underline",
+  },
+  spacedRow: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  alignRightRow: {
+    display: "flex",
+    flexDirection: "row-reverse",
+  },
+  image64: {
+    height: "64px",
+    width: "64px",
+  },
+  qrcode: {
+    width: "80px",
+    height: "80px",
+  },
+  radialContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 4,
+    position: "relative",
+  },
+  radialResultContainer: {
+    display: "flex",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 10,
+    gap: 8,
+  },
+});

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

@@ -0,0 +1,55 @@
+import React from "react";
+import { styles } from "./styles";
+import { View, Text } from "@react-pdf/renderer";
+
+const TestReportFooter = () => (
+  <View style={[{ paddingTop: 30, fontSize: 5, position: 'absolute', bottom: 30, left: 35, right: 35 }, styles.textFont,]}>
+    <View
+      style={[
+        styles.spacedRow,
+        {
+          paddingHorizontal: 10,
+        },
+      ]}
+    >
+      <View>
+        <Text>Validity</Text>
+        <Text>
+          This report remains valid for a duration of three months from the test
+          date.
+        </Text>
+      </View>
+      <View>
+        <Text>Confidential – circulated for concern people</Text>
+      </View>
+    </View>
+    <View style={{ paddingTop: 10 }}>
+      <Text>Declaration</Text>
+      <Text style={{ paddingTop: 5 }}>
+        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>
+    <View style={[styles.textColor, { paddingTop: 5 }]}>
+      <Text style={styles.textUnderline}>info@encoach.com</Text>
+      <Text>https://encoach.com</Text>
+      <View style={styles.spacedRow}>
+        <Text>Group ID: TRI64BNBOIU5043</Text>
+        <Text
+          // style={styles.pageNumber}
+          render={({ pageNumber, totalPages }) =>
+            `${pageNumber} / ${totalPages}`
+          }
+          fixed
+        />
+      </View>
+    </View>
+  </View>
+);
+
+export default TestReportFooter;

src/exams/pdf/test.report.tsx

@@ -0,0 +1,161 @@
+/* eslint-disable jsx-a11y/alt-text */
+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 { StyleSheet } from "@react-pdf/renderer";
+import TestReportFooter from "./test.report.footer";
+const customStyles = StyleSheet.create({
+  testDetails: {
+    display: "flex",
+    gap: 4,
+  },
+});
+
+interface Props {
+  date: string;
+  name: string;
+  email: string;
+  id: string;
+  gender?: string;
+  testDetails: ModuleScore[];
+  summary: string;
+  logo: string;
+  qrcode: string;
+  renderDetails: React.ReactNode;
+  title: string;
+}
+
+const TestReport = ({
+  title,
+  date,
+  name,
+  email,
+  id,
+  gender,
+  testDetails,
+  summary,
+  logo,
+  qrcode,
+  renderDetails,
+}: Props) => {
+  const defaultTextStyle = [styles.textFont, { fontSize: 8 }];
+  const defaultSkillsTextStyle = [styles.textFont, { fontSize: 8 }];
+  const defaultSkillsTitleStyle = [
+    styles.textFont,
+    styles.textColor,
+    styles.textBold,
+    { fontSize: 7 },
+  ];
+  return (
+    <Document>
+      <Page style={styles.body}>
+        <View style={styles.alignRightRow}>
+          <Image src={logo} fixed style={styles.image64} />
+        </View>
+        <View style={styles.titleView}>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              styles.textUnderline,
+              styles.title,
+              { fontSize: 14 },
+            ]}
+          >
+            {title}
+          </Text>
+        </View>
+        <View style={styles.textPadding}>
+          <Text style={defaultTextStyle}>Date of Test: {date}</Text>
+        </View>
+        <Text style={[styles.textFont, styles.textBold, { fontSize: 11 }]}>
+          Candidate Information:
+        </Text>
+        <View style={styles.textPadding}>
+          <Text style={defaultTextStyle}>Name: {name}</Text>
+          <Text style={defaultTextStyle}>ID: {id}</Text>
+          <Text style={defaultTextStyle}>Email: {email}</Text>
+          <Text style={defaultTextStyle}>Gender: {gender}</Text>
+        </View>
+        <View style={{ height: '120px' }}>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              { fontSize: 12 },
+            ]}
+          >
+            Test Details:
+          </Text>
+          <View>{renderDetails}</View>
+        </View>
+        <View>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              { fontSize: 12 },
+            ]}
+          >
+            Performance Summary
+          </Text>
+          <View>
+            <Text style={[styles.textFont, { fontSize: 8 }]}>{summary}</Text>
+          </View>
+        </View>
+        <View style={[{ paddingTop: 30 }, styles.separator]}></View>
+        <TestReportFooter />
+      </Page>
+      <Page style={styles.body}>
+        <View>
+          <Text
+            style={[
+              styles.textFont,
+              styles.textBold,
+              styles.textColor,
+              styles.textUnderline,
+              { fontSize: 12, paddingTop: 10 },
+            ]}
+          >
+            Skills Feedback
+          </Text>
+          <View
+            style={{
+              paddingTop: 10,
+              gap: 8,
+            }}
+          >
+            {testDetails
+              .filter(({ suggestions, evaluation }) => suggestions || evaluation)
+              .map(({ module, suggestions, evaluation }) => (
+                <View key={module} style={customStyles.testDetails}>
+                  <Text style={[...defaultSkillsTitleStyle, styles.textBold]}>
+                    {module}
+                  </Text>
+                  <Text style={defaultSkillsTextStyle}>{evaluation}</Text>
+                  <Text style={defaultSkillsTextStyle}>{suggestions}</Text>
+
+                </View>
+              ))}
+          </View>
+          <View style={styles.alignRightRow}>
+            <Image
+              src={qrcode}
+              style={styles.qrcode}
+            />
+          </View>
+        </View>
+        <View style={[{ paddingBottom: 30 }, styles.separator]}></View>
+        <View style={{ flexGrow: 1 }}></View>
+        <TestReportFooter />
+      </Page>
+    </Document>
+  );
+};
+
+export default TestReport;

src/hooks/usePDFDownload.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import axios from "axios";
+import { toast } from "react-toastify";
+import { BsFilePdf } from "react-icons/bs";
+
+type DownloadingPdf = {
+  [key: string]: boolean;
+};
+
+type PdfEndpoint = "stats" | "assignments";
+
+export const usePDFDownload = (endpoint: PdfEndpoint) => {
+  const [downloadingPdf, setDownloadingPdf] = React.useState<DownloadingPdf>(
+    {}
+  );
+
+  const triggerDownload = async (id: string) => {
+    try {
+      setDownloadingPdf((prev) => ({ ...prev, [id]: true }));
+      const res = await axios.post(`/api/${endpoint}/${id}/export`);
+      toast.success("Report ready!");
+      const link = document.createElement("a");
+      link.href = res.data;
+      // download should have worked but there are some CORS issues
+      // https://firebase.google.com/docs/storage/web/download-files#cors_configuration
+      // link.download="report.pdf";
+      link.target = "_blank";
+      link.rel = "noreferrer";
+      link.click();
+      setDownloadingPdf((prev) => ({ ...prev, [id]: false }));
+    } catch (err) {
+      toast.error("Failed to display the report!");
+      console.error(err);
+      setDownloadingPdf((prev) => ({ ...prev, [id]: false }));
+    }
+  };
+
+  const renderIcon = (
+    id: string,
+    downloadClasses: string,
+    loadingClasses: string
+  ) => {
+    if (downloadingPdf[id]) {
+      return (
+        <span className={`${loadingClasses} loading loading-infinity w-6`} />
+      );
+    }
+    return (
+      <BsFilePdf
+        className={`${downloadClasses} text-2xl cursor-pointer`}
+        onClick={(e) => {
+          e.stopPropagation();
+          triggerDownload(id);
+        }}
+      />
+    );
+  };
+
+  return renderIcon;
+};

src/interfaces/module.scores.ts

@@ -0,0 +1,22 @@
+import {Module} from "@/interfaces";
+
+export interface ModuleScore {
+    score: number;
+    total: number;
+    code: Module;
+    module: Module | 'Overall';
+    png?: string,
+    evaluation?: string,
+    suggestions?: string,
+  }
+
+  export interface StudentData {
+    id: string;
+    name: string;
+    email: string;
+    gender: string;
+    date: string;
+    result: string;
+    level?: string;
+    bandScore: number;
+  }

src/interfaces/user.ts

@@ -77,6 +77,7 @@ export interface DemographicInformation {
 	phone: string;
 	gender: Gender;
 	employment: EmploymentStatus;
+	passport_id?: string;
 }
 
 export interface DemographicCorporateInformation {

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

@@ -0,0 +1,429 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app, storage } from "@/firebase";
+import {
+  getFirestore,
+  doc,
+  getDoc,
+  updateDoc,
+  getDocs,
+  query,
+  collection,
+  where,
+  documentId,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import ReactPDF from "@react-pdf/renderer";
+import GroupTestReport from "@/exams/pdf/group.test.report";
+import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
+import { Stat } from "@/interfaces/user";
+import { User } from "@/interfaces/user";
+import { Module } from "@/interfaces";
+import { ModuleScore, StudentData } from "@/interfaces/module.scores";
+import { SkillExamDetails } from "@/exams/pdf/details/skill.exam";
+import { LevelExamDetails } from "@/exams/pdf/details/level.exam";
+import { calculateBandScore, getLevelScore } from "@/utils/score";
+import {
+  generateQRCode,
+  getRadialProgressPNG,
+  streamToBuffer,
+} from "@/utils/pdf";
+
+interface GroupScoreSummaryHelper {
+  score: [number, number];
+  label: string;
+  sessions: string[];
+}
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "GET") return get(req, res);
+  if (req.method === "POST") return post(req, res);
+}
+
+const getExamSummary = (score: number) => {
+  if (score > 0.8) {
+    return "Scoring between 81% and 100% on the English exam collectively demonstrates an outstanding level of proficiency in writing, speaking, listening, and reading for this group of students. Mastery of key concepts is evident across all language domains, showcasing not only a high level of skill but also a dedication to excellence. The group is encouraged to continue challenging themselves with advanced material in writing, speaking, listening, and reading to further refine their impressive command of the English language.";
+  }
+
+  if (score > 0.6) {
+    return "The group's average scores between 61% and 80% on the English exam, encompassing writing, speaking, listening, and reading, reflect a commendable level of proficiency. There's evidence of a solid grasp of key concepts collectively, and effective application of skills. Room for refinement and deeper exploration in writing, speaking, listening, and reading remains, presenting an opportunity for the entire group to further their mastery.";
+  }
+
+  if (score > 0.4) {
+    return "Scoring between 41% and 60% on the English exam across writing, speaking, listening, and reading indicates a moderate level of understanding for the group. While there's a commendable grasp of key concepts collectively, refining fundamental skills in writing, speaking, listening, and reading can lead to notable improvement. The group is encouraged to work together with consistent effort and targeted focus on weaker areas.";
+  }
+
+  if (score > 0.2) {
+    return "The group's average scores between 21% and 40% on the English exam, encompassing writing, speaking, listening, and reading, show some understanding of key concepts in each domain. However, there's room for improvement in fundamental skills for the entire group. Strengthening writing, speaking, listening, and reading abilities collectively through consistent effort and focused group study will contribute to overall proficiency.";
+  }
+
+  return "The average performance of this group of students in English, covering writing, speaking, listening, and reading, indicates a collective need for improvement, with scores falling between 0% and 20%. Across all language domains, there's a significant gap in understanding key concepts. Strengthening fundamental skills in writing, speaking, listening, and reading is crucial for the entire group. Implementing a shared, consistent study routine and seeking group support in each area can contribute to substantial progress.";
+};
+
+const getLevelSummary = (score: number) => {
+  if (score > 0.8) {
+    return "Scoring between 81% and 100% on the English exam collectively demonstrates an outstanding level of proficiency for this group of students, showcasing a mastery of key concepts related to vocabulary and grammar. There's evidence of not only a high level of skill but also a dedication to excellence. The group is encouraged to continue challenging themselves with advanced material in vocabulary and grammar to further refine their impressive command of the English language.";
+  }
+
+  if (score > 0.6) {
+    return "The group's average scores between 61% and 80% on the English exam reflect a commendable level of proficiency with solid grasp of key concepts related to vocabulary and grammar. Room for refinement and deeper exploration in these language skills remains, presenting an opportunity for the entire group to further their mastery. Consistent effort in honing nuanced aspects of vocabulary and grammar will contribute to even greater proficiency.";
+  }
+
+  if (score > 0.4) {
+    return "Scoring between 41% and 60% on the English exam indicates a moderate level of understanding for the group, with commendable grasp of key concepts related to vocabulary and grammar. Refining these fundamental language skills can lead to notable improvement. The group is encouraged to work together with consistent effort and targeted focus on enhancing their vocabulary and grammar.";
+  }
+
+  if (score > 0.2) {
+    return "The group's average scores between 21% and 40% on the English exam show some understanding of key concepts in vocabulary and grammar. However, there's room for improvement in these fundamental language skills for the entire group. Strengthening vocabulary and grammar collectively through consistent effort and focused group study will contribute to overall proficiency.";
+  }
+
+  return "The average performance of this group of students in English suggests a collective need for improvement, with scores falling between 0% and 20%. There's a significant gap in understanding key concepts related to vocabulary and grammar. Strengthening fundamental language skills, such as vocabulary and grammar, is crucial for the entire group. Implementing a shared, consistent study routine and seeking group support in these areas can contribute to substantial progress.";
+};
+
+const getPerformanceSummary = (module: Module, score: number) => {
+  if (module === "level") return getLevelSummary(score);
+  return getExamSummary(score);
+};
+
+const getScoreAndTotal = (stats: Stat[]) => {
+  return stats.reduce(
+    (acc, { score }) => {
+      return {
+        ...acc,
+        correct: acc.correct + score.correct,
+        total: acc.total + score.total,
+      };
+    },
+    { correct: 0, total: 0 }
+  );
+};
+
+const getLevelScoreForUserExams = (bandScore: number) => {
+  const [level] = getLevelScore(bandScore);
+  return level;
+};
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+  // verify if it's a logged user that is trying to export
+  if (req.session.user) {
+    const { id } = req.query as { id: string };
+
+    const docSnap = await getDoc(doc(db, "assignments", id));
+    const data = docSnap.data() as {
+      assigner: string;
+      assignees: string[];
+      results: any;
+      exams: { module: Module }[];
+      startDate: string;
+      pdf?: string;
+    };
+    if (!data) {
+      res.status(400).end();
+      return;
+    }
+
+    if (data.assigner !== req.session.user.id) {
+      res.status(401).json({ ok: false });
+      return;
+    }
+    if (data.pdf) {
+      // if it does, return the pdf url
+      const fileRef = ref(storage, data.pdf);
+      const url = await getDownloadURL(fileRef);
+
+      res.status(200).end(url);
+      return;
+    }
+
+    try {
+      const docUser = await getDoc(doc(db, "users", req.session.user.id));
+      if (docUser.exists()) {
+        // we'll need the user in order to get the user data (name, email, focus, etc);
+        const user = docUser.data() as User;
+
+        // generate the QR code for the report
+        const qrcode = await generateQRCode(
+          (req.headers.origin || "") + req.url
+        );
+
+        if (!qrcode) {
+          res.status(500).json({ ok: false });
+          return;
+        }
+
+        const flattenResults = data.results.reduce(
+          (accm: Stat[], entry: any) => {
+            const stats = entry.stats as Stat[];
+            return [...accm, ...stats];
+          },
+          []
+        ) as Stat[];
+
+        const docsSnap = await getDocs(
+          query(
+            collection(db, "users"),
+            where(documentId(), "in", data.assignees)
+          )
+        );
+        const users = docsSnap.docs.map((d) => ({
+          ...d.data(),
+          id: d.id,
+        })) as User[];
+
+        const flattenResultsWithGrade = flattenResults.map((e) => {
+          const focus = users.find((u) => u.id === e.user)?.focus || "academic";
+          const bandScore = calculateBandScore(
+            e.score.correct,
+            e.score.total,
+            e.module,
+            focus
+          );
+
+          return { ...e, bandScore };
+        });
+
+        const moduleResults = data.exams.map(({ module }) => {
+          const moduleResults = flattenResultsWithGrade.filter(
+            (e) => e.module === module
+          );
+
+          const baseBandScore =
+            moduleResults.reduce((accm, curr) => accm + curr.bandScore, 0) /
+            moduleResults.length;
+          const bandScore = isNaN(baseBandScore) ? 0 : baseBandScore;
+          const { correct, total } = getScoreAndTotal(moduleResults);
+          const png = getRadialProgressPNG("azul", correct, total);
+
+          return {
+            bandScore,
+            png,
+            module: module[0].toUpperCase() + module.substring(1),
+            score: bandScore,
+            total,
+            code: module,
+          };
+        }) as ModuleScore[];
+
+        const { correct: overallCorrect, total: overallTotal } =
+          getScoreAndTotal(flattenResults);
+        const baseOverallResult = overallCorrect / overallTotal;
+        const overallResult = isNaN(baseOverallResult) ? 0 : baseOverallResult;
+
+        const overallPNG = getRadialProgressPNG(
+          "laranja",
+          overallCorrect,
+          overallTotal
+        );
+        // generate the overall detail report
+        const overallDetail = {
+          module: "Overall",
+          score: overallCorrect,
+          total: overallTotal,
+          png: overallPNG,
+        } as ModuleScore;
+
+        const testDetails = [overallDetail, ...moduleResults];
+        // generate the performance summary based on the overall result
+        const baseStat = data.exams[0];
+        const performanceSummary = getPerformanceSummary(
+          // from what I noticed, exams is either an array with the level module
+          // or X modules, either way
+          // as long as I verify the first entry I should be fine
+          baseStat.module,
+          overallResult
+        );
+
+        const showLevel = baseStat.module === "level";
+
+        // level exams have a different report structure than the skill exams
+        const getCustomData = () => {
+          if (showLevel) {
+            return {
+              title: "GROUP ENGLISH LEVEL TEST RESULT REPORT ",
+              details: (
+                <LevelExamDetails
+                  detail={overallDetail}
+                  title="Group Average CEFR"
+                />
+              ),
+            };
+          }
+
+          return {
+            title: "GROUP ENGLISH SKILLS TEST RESULT REPORT",
+            details: <SkillExamDetails testDetails={testDetails} />,
+          };
+        };
+
+        const { title, details } = getCustomData();
+
+        const numberOfStudents = data.assignees.length;
+
+        const getStudentsData = async (): Promise<StudentData[]> => {
+          return data.assignees.map((id) => {
+            const user = users.find((u) => u.id === id);
+            const exams = flattenResultsWithGrade.filter((e) => e.user === id);
+            const date =
+              exams.length === 0
+                ? "N/A"
+                : new Date(exams[0].date).toLocaleDateString(undefined, {
+                    year: "numeric",
+                    month: "numeric",
+                    day: "numeric",
+                  });
+
+            const bandScore =
+              exams.length === 0
+                ? 0
+                : exams.reduce((accm, curr) => accm + curr.bandScore, 0) /
+                  exams.length;
+            const { correct, total } = getScoreAndTotal(exams);
+
+            const result = exams.length === 0 ? "N/A" : `${correct}/${total}`;
+
+            return {
+              id,
+              name: user?.name || "N/A",
+              email: user?.email || "N/A",
+              gender: user?.demographicInformation?.gender || "N/A",
+              date,
+              result,
+              level: showLevel
+                ? getLevelScoreForUserExams(bandScore)
+                : undefined,
+              bandScore,
+            };
+          });
+        };
+
+        const studentsData = await getStudentsData();
+
+        const getGroupScoreSummary = () => {
+          const resultHelper = studentsData.reduce(
+            (accm: GroupScoreSummaryHelper[], curr) => {
+              const { bandScore, id } = curr;
+
+              const flooredScore = Math.floor(bandScore);
+
+              const hasMatch = accm.find((a) => a.score.includes(flooredScore));
+              if (hasMatch) {
+                return accm.map((a) => {
+                  if (a.score.includes(flooredScore)) {
+                    return {
+                      ...a,
+                      sessions: [...a.sessions, id],
+                    };
+                  }
+
+                  return a;
+                });
+              }
+
+              return [
+                ...accm,
+                {
+                  score: [flooredScore, flooredScore + 0.5],
+                  label: `${flooredScore} - ${flooredScore + 0.5}`,
+                  sessions: [id],
+                },
+              ];
+            },
+            []
+          ) as GroupScoreSummaryHelper[];
+
+          const result = resultHelper.map(({ score, label, sessions }) => {
+            const finalLabel = showLevel ? getLevelScore(score[0])[1] : label;
+            return {
+              label: finalLabel,
+              percent: Math.floor((sessions.length / numberOfStudents) * 100),
+              description: `No. Candidates ${sessions.length} of ${numberOfStudents}`,
+            };
+          });
+          return result;
+        };
+
+        const groupScoreSummary = getGroupScoreSummary();
+
+        const pdfStream = await ReactPDF.renderToStream(
+          <GroupTestReport
+            title={title}
+            date={new Date(data.startDate).toLocaleString()}
+            name={user.name}
+            email={user.email}
+            id={user.id}
+            gender={user.demographicInformation?.gender}
+            summary={performanceSummary}
+            renderDetails={details}
+            logo={"public/logo_title.png"}
+            qrcode={qrcode}
+            numberOfStudents={numberOfStudents}
+            institution="TODO: PLACEHOLDER"
+            studentsData={studentsData}
+            showLevel={showLevel}
+            summaryPNG={overallPNG}
+            summaryScore={`${(overallResult * 100).toFixed(0)}%`}
+            groupScoreSummary={groupScoreSummary}
+          />
+        );
+
+        // generate the file ref for storage
+        const fileName = `${Date.now().toString()}.pdf`;
+        const refName = `assignment_report/${fileName}`;
+        const fileRef = ref(storage, refName);
+
+        // upload the pdf to storage
+        const pdfBuffer = await streamToBuffer(pdfStream);
+        const snapshot = await uploadBytes(fileRef, pdfBuffer, {
+          contentType: "application/pdf",
+        });
+
+        // update the stats entries with the pdf url to prevent duplication
+        await updateDoc(docSnap.ref, {
+          pdf: refName,
+        });
+        const url = await getDownloadURL(fileRef);
+        res.status(200).end(url);
+        return;
+      }
+
+      res.status(401).json({ ok: false });
+      return;
+    } catch (err) {
+      console.error(err);
+      res.status(500).json({ ok: false });
+      return;
+    }
+  }
+}
+async function get(req: NextApiRequest, res: NextApiResponse) {
+  if (req.session.user) {
+    const { id } = req.query as { id: string };
+
+    const docSnap = await getDoc(doc(db, "assignments", id));
+    const data = docSnap.data();
+    if (!data) {
+      res.status(400).end();
+      return;
+    }
+
+    if (data.assigner !== req.session.user.id) {
+      res.status(401).json({ ok: false });
+      return;
+    }
+
+    if (data.pdf) {
+      const fileRef = ref(storage, data.pdf);
+      const url = await getDownloadURL(fileRef);
+      return res.redirect(url);
+    }
+
+    res.status(404).end();
+    return;
+  }
+
+  res.status(401).json({ ok: false });
+  return;
+}

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

@@ -0,0 +1,376 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app, storage } from "@/firebase";
+import {
+  getFirestore,
+  doc,
+  getDoc,
+  updateDoc,
+  getDocs,
+  query,
+  collection,
+  where,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import ReactPDF from "@react-pdf/renderer";
+import TestReport from "@/exams/pdf/test.report";
+import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
+import { User } from "@/interfaces/user";
+import { Module } from "@/interfaces";
+import { ModuleScore } from "@/interfaces/module.scores";
+import { SkillExamDetails } from "@/exams/pdf/details/skill.exam";
+import { LevelExamDetails } from "@/exams/pdf/details/level.exam";
+import { calculateBandScore } from "@/utils/score";
+import axios from "axios";
+import { moduleLabels } from "@/utils/moduleUtils";
+import {
+  generateQRCode,
+  getRadialProgressPNG,
+  streamToBuffer,
+} from "@/utils/pdf";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "GET") return get(req, res);
+  if (req.method === "POST") return post(req, res);
+}
+
+const getExamSummary = (score: number) => {
+  if (score > 0.8) {
+    return "Scoring between 81% and 100% on the English exam demonstrates an outstanding level of proficiency in writing, speaking, listening, and reading. Mastery of key concepts is evident across all language domains, showcasing not only a high level of skill but also a dedication to excellence. Continuing to challenge oneself with advanced material in writing, speaking, listening, and reading will further refine the already impressive command of the English language.";
+  }
+
+  if (score > 0.6) {
+    return "Scoring between 61% and 80% on the English exam, encompassing writing, speaking, listening, and reading, reflects a commendable level of proficiency in each domain. There's evidence of a solid grasp of key concepts, and effective application of skills. Room for refinement and deeper exploration in writing, speaking, listening, and reading remains, presenting an opportunity for further mastery.";
+  }
+
+  if (score > 0.4) {
+    return "Scoring between 41% and 60% on the English exam across writing, speaking, listening, and reading demonstrates a moderate level of understanding in each domain. While there's a commendable grasp of key concepts, refining fundamental skills in writing, speaking, listening, and reading can lead to notable improvement. Consistent effort and targeted focus on weaker areas are recommended.";
+  }
+
+  if (score > 0.2) {
+    return "Scoring between 21% and 40% on the English exam, spanning writing, speaking, listening, and reading, indicates some understanding of key concepts in each domain. However, there's room for improvement in fundamental skills. Strengthening writing, speaking, listening, and reading abilities through consistent effort and focused study will contribute to overall proficiency.";
+  }
+
+  return "This student's performance on the English exam, encompassing writing, speaking, listening, and reading, reflects a significant need for improvement, scoring between 0% and 20%. There's a notable gap in understanding key concepts across all language domains. Strengthening fundamental skills in writing, speaking, listening, and reading is crucial. Developing a consistent study routine and seeking additional support in each area can contribute to substantial progress.";
+};
+
+const getLevelSummary = (score: number) => {
+  if (score > 0.8) {
+    return "Scoring between 81% and 100% on the English exam showcases an outstanding level of understanding and proficiency. Your performance reflects a mastery of key concepts, including grammar, vocabulary, and comprehension. You exhibit a high level of skill in applying these elements effectively. Your dedication to excellence is evident, and your consistent, stellar performance is commendable. Continue to challenge yourself with advanced material to further refine your already impressive command of the English language. Your commitment to excellence positions you as a standout student in English studies, and your achievements are a testament to your hard work and capability.";
+  }
+
+  if (score > 0.6) {
+    return "Scoring between 61% and 80% on the English exam reflects a commendable level of understanding and proficiency. You have demonstrated a solid grasp of key concepts, including grammar, vocabulary, and comprehension. There's evidence of effective application of skills, but room for refinement and deeper exploration remains. Consistent effort in honing nuanced aspects of language will contribute to even greater mastery. Continue engaging with challenging material and seeking opportunities for advanced comprehension. With sustained dedication, you have the potential to elevate your performance to an exceptional level and further excel in your English studies.";
+  }
+
+  if (score > 0.4) {
+    return "Scoring between 41% and 60% on the English exam reflects a moderate level of understanding. You demonstrate a grasp of some key concepts, but there's room for refinement in areas like grammar, vocabulary, and comprehension. Consistent effort and a strategic focus on weaker areas can lead to notable improvement. Engaging with supplementary resources and seeking feedback will further enhance your skills. With continued dedication, there's a solid foundation to build upon, and achieving a higher level of proficiency is within reach. Keep up the good work and aim for sustained progress in your English studies.";
+  }
+
+  if (score > 0.2) {
+    return "Scoring between 21% and 40% on the English exam shows some understanding of key concepts, but there's still ample room for improvement. Strengthening foundational skills, such as grammar, vocabulary, and comprehension, is essential. Consistent effort and focused study can help bridge gaps in knowledge and elevate your performance. Consider seeking additional guidance or resources to refine your understanding of the material. With commitment and targeted improvements, you have the potential to make significant strides in your English proficiency.";
+  }
+
+  return "Your performance on the English exam falls within the 0% to 20% range, indicating a need for improvement. There's room to enhance your grasp of fundamental concepts like grammar, vocabulary, and comprehension. Establishing a consistent study routine and seeking extra support can be beneficial. With dedication and targeted efforts, you have the potential to significantly boost your performance in upcoming assessments.";
+};
+
+const getPerformanceSummary = (module: Module, score: number) => {
+  if (module === "level") return getLevelSummary(score);
+  return getExamSummary(score);
+};
+interface SkillsFeedbackRequest {
+  code: Module;
+  name: string;
+  grade: number;
+}
+
+interface SkillsFeedbackResponse extends SkillsFeedbackRequest {
+  evaluation: string;
+  suggestions: string;
+}
+
+const getSkillsFeedback = async (sections: SkillsFeedbackRequest[]) => {
+  const backendRequest = await axios.post(
+    `${process.env.BACKEND_URL}/grading_summary`,
+    { sections },
+    {
+      headers: {
+        Authorization: `Bearer ${process.env.BACKEND_JWT}`,
+      },
+    }
+  );
+
+  return backendRequest.data?.sections;
+};
+
+// perform the request with several retries if needed
+const handleSkillsFeedbackRequest = async (
+  sections: SkillsFeedbackRequest[]
+): Promise<SkillsFeedbackResponse[] | null> => {
+  let i = 0;
+  try {
+    const data = await getSkillsFeedback(sections);
+    return data;
+  } catch (err) {
+    if (i < 3) {
+      i++;
+      return handleSkillsFeedbackRequest(sections);
+    }
+
+    return null;
+  }
+};
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+  // verify if it's a logged user that is trying to export
+  if (req.session.user) {
+    const { id } = req.query as { id: string };
+    // fetch stats entries for this particular user with the requested exam session
+    const docsSnap = await getDocs(
+      query(
+        collection(db, "stats"),
+        where("session", "==", id),
+        where("user", "==", req.session.user.id)
+      )
+    );
+
+    if (docsSnap.empty) {
+      res.status(400).end();
+      return;
+    }
+
+    const stats = docsSnap.docs.map((d) => d.data());
+    // verify if the stats already have a pdf generated
+    const hasPDF = stats.find((s) => s.pdf);
+
+    if (hasPDF) {
+      // if it does, return the pdf url
+      const fileRef = ref(storage, hasPDF.pdf);
+      const url = await getDownloadURL(fileRef);
+
+      res.status(200).end(url);
+      return;
+    }
+
+    try {
+      // generate the pdf report
+      const docUser = await getDoc(doc(db, "users", req.session.user.id));
+
+      if (docUser.exists()) {
+        // we'll need the user in order to get the user data (name, email, focus, etc);
+        const user = docUser.data() as User;
+
+        // generate the QR code for the report
+        const qrcode = await generateQRCode(
+          (req.headers.origin || "") + req.url
+        );
+
+        if (!qrcode) {
+          res.status(500).json({ ok: false });
+          return;
+        }
+
+        // stats may contain multiple exams of the same type so we need to aggregate them
+        const results = (
+          stats.reduce((accm: ModuleScore[], { module, score }) => {
+            const fixedModuleStr =
+              module[0].toUpperCase() + module.substring(1);
+            if (accm.find((e: ModuleScore) => e.module === fixedModuleStr)) {
+              return accm.map((e: ModuleScore) => {
+                if (e.module === fixedModuleStr) {
+                  return {
+                    ...e,
+                    score: e.score + score.correct,
+                    total: e.total + score.total,
+                  };
+                }
+
+                return e;
+              });
+            }
+
+            return [
+              ...accm,
+              {
+                module: fixedModuleStr,
+                score: score.correct,
+                total: score.total,
+                code: module,
+              },
+            ];
+          }, []) as ModuleScore[]
+        ).map((moduleScore) => {
+          const { score, total } = moduleScore;
+          // with all the scores aggreated we can calculate the band score for each module
+          const bandScore = calculateBandScore(
+            score,
+            total,
+            moduleScore.code as Module,
+            user.focus
+          );
+
+          return {
+            ...moduleScore,
+            // generate the closest radial progress png for the score
+            png: getRadialProgressPNG("azul", score, total),
+            bandScore,
+          };
+        });
+
+        // get the skills feedback from the backend based on the module grade
+        const skillsFeedback = (await handleSkillsFeedbackRequest(
+          results.map(({ code, bandScore }) => ({
+            code,
+            name: moduleLabels[code],
+            grade: bandScore,
+          }))
+        )) as SkillsFeedbackResponse[];
+
+        if (!skillsFeedback) {
+          res.status(500).json({ ok: false });
+          return;
+        }
+
+        // assign the feedback to the results
+        const finalResults = results.map((result) => {
+          const feedback = skillsFeedback.find(
+            (f: SkillsFeedbackResponse) => f.code === result.code
+          );
+
+          if (feedback) {
+            return {
+              ...result,
+              evaluation: feedback?.evaluation,
+              suggestions: feedback?.suggestions,
+            };
+          }
+
+          return result;
+        });
+
+        // calculate the overall score out of all the aggregated results
+        const overallScore = results.reduce(
+          (accm, { score }) => accm + score,
+          0
+        );
+        const overallTotal = results.reduce(
+          (accm, { total }) => accm + total,
+          0
+        );
+        const overallResult = overallScore / overallTotal;
+
+        // generate the overall detail report
+        const overallDetail = {
+          module: "Overall",
+          score: overallScore,
+          total: overallTotal,
+          png: getRadialProgressPNG("laranja", overallScore, overallTotal),
+        } as ModuleScore;
+        const testDetails = [overallDetail, ...finalResults];
+
+        const [stat] = stats;
+
+        // generate the performance summary based on the overall result
+        const performanceSummary = getPerformanceSummary(
+          stat.module,
+          overallResult
+        );
+
+        // level exams have a different report structure than the skill exams
+        const getCustomData = () => {
+          if (stat.module === "level") {
+            return {
+              title: "ENGLISH LEVEL TEST RESULT REPORT ",
+              details: (
+                <LevelExamDetails
+                  detail={overallDetail}
+                  title="Level as per CEFR Levels"
+                />
+              ),
+            };
+          }
+
+          return {
+            title: "ENGLISH SKILLS TEST RESULT REPORT",
+            details: <SkillExamDetails testDetails={testDetails} />,
+          };
+        };
+
+        const { title, details } = getCustomData();
+        const pdfStream = await ReactPDF.renderToStream(
+          <TestReport
+            title={title}
+            date={new Date(stat.date).toLocaleString()}
+            name={user.name}
+            email={user.email}
+            id={user.id}
+            gender={user.demographicInformation?.gender}
+            summary={performanceSummary}
+            testDetails={testDetails}
+            renderDetails={details}
+            logo={"public/logo_title.png"}
+            qrcode={qrcode}
+          />
+        );
+
+        // generate the file ref for storage
+        const fileName = `${Date.now().toString()}.pdf`;
+        const refName = `exam_report/${fileName}`;
+        const fileRef = ref(storage, refName);
+
+        // upload the pdf to storage
+        const pdfBuffer = await streamToBuffer(pdfStream);
+        const snapshot = await uploadBytes(fileRef, pdfBuffer, {
+          contentType: "application/pdf",
+        });
+
+        // update the stats entries with the pdf url to prevent duplication
+        docsSnap.docs.forEach(async (doc) => {
+          await updateDoc(doc.ref, {
+            pdf: refName,
+          });
+        });
+        const url = await getDownloadURL(fileRef);
+        res.status(200).end(url);
+        return;
+      }
+
+      res.status(401).json({ ok: false });
+      return;
+    } catch (err) {
+      res.status(500).json({ ok: false });
+      return;
+    }
+  }
+
+  res.status(401).json({ ok: false });
+  return;
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+  const { id } = req.query as { id: string };
+  const docsSnap = await getDocs(
+    query(collection(db, "stats"), where("session", "==", id))
+  );
+
+  if (docsSnap.empty) {
+    res.status(404).end();
+    return;
+  }
+
+  const stats = docsSnap.docs.map((d) => d.data());
+
+  const hasPDF = stats.find((s) => s.pdf);
+
+  if (hasPDF) {
+    const fileRef = ref(storage, hasPDF.pdf);
+    const url = await getDownloadURL(fileRef);
+    return res.redirect(url);
+  }
+
+  res.status(500).end();
+}

src/pages/api/stats/[id]/index.ts

@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type {NextApiRequest, NextApiResponse} from "next";
+import {app} from "@/firebase";
+import {getFirestore, collection, getDocs, query, where, setDoc, doc, getDoc, deleteDoc} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {uuidv4} from "@firebase/util";
+
+const db = getFirestore(app);
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (req.method === "GET") return GET(req, res);
+
+	res.status(404).json({ok: false});
+}
+
+async function GET(req: NextApiRequest, res: NextApiResponse) {
+	const {id} = req.query;
+
+	const snapshot = await getDoc(doc(db, "stats", id as string));
+
+	res.status(200).json({...snapshot.data(), id: snapshot.id});
+}

src/pages/index.tsx

@@ -67,7 +67,12 @@ export default function Home({envVariables}: {envVariables: {[key: string]: stri
 
 	useEffect(() => {
 		if (user) {
-			setShowDemographicInput(!user.demographicInformation);
+			setShowDemographicInput(
+				!user.demographicInformation ||
+					!user.demographicInformation.country ||
+					!user.demographicInformation.gender ||
+					!user.demographicInformation.phone,
+			);
 			setShowDiagnostics(user.isFirstLogin && user.type === "student");
 		}
 	}, [user]);

src/pages/payment-record.tsx

@@ -784,19 +784,21 @@ export default function PaymentRecord() {
 
 					<div className="w-full flex flex-end justify-between p-2">
 						<h1 className="text-2xl font-semibold">Payment Record</h1>
-						{(user.type === "developer" || user.type === "admin") && (
 						<div className="flex justify-end gap-2">
+							{(user.type === "developer" || user.type === "admin" || user.type === 'agent' || user.type === 'corporate') && (
 								<Button className="max-w-[200px]" variant="outline">
 									<CSVLink data={csvRows} headers={csvColumns} filename="payment-records.csv">
 										Download CSV
 									</CSVLink>
 								</Button>
+							)}
+							{(user.type === "developer" || user.type === "admin") && (
 								<Button className="max-w-[200px]" variant="outline" onClick={() => setIsCreatingPayment(true)}>
 									New Payment
 								</Button>
-							</div>
 							)}
 						</div>
+					</div>
 					<div className={clsx("grid grid-cols-1 md:grid-cols-2 gap-8 w-full", user.type !== "corporate" && "lg:grid-cols-3")}>
 						<div className="flex flex-col gap-3 w-full">
 							<label className="font-normal text-base text-mti-gray-dim">Corporate account *</label>
@@ -809,14 +811,14 @@ export default function PaymentRecord() {
 								options={(users.filter((u) => u.type === "corporate") as CorporateUser[]).map((user) => ({
 									value: user.id,
 									meta: user,
-									label: `${user.corporateInformation.companyInformation.name || user.name} - ${user.email}`,
+									label: `${user.corporateInformation?.companyInformation?.name || user.name} - ${user.email}`,
 								}))}
 								defaultValue={
 									user.type === "corporate"
 										? {
 												value: user.id,
 												meta: user,
-												label: `${user.corporateInformation.companyInformation.name || user.name} - ${user.email}`,
+												label: `${user.corporateInformation?.companyInformation?.name || user.name} - ${user.email}`,
 										  }
 										: undefined
 								}

src/pages/profile.tsx

@@ -72,6 +72,7 @@ function UserProfile({user, mutateUser}: Props) {
 	const [employment, setEmployment] = useState<EmploymentStatus | undefined>(
 		user.type === "corporate" ? undefined : user.demographicInformation?.employment,
 	);
+	const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
 	const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
 	const [companyName, setCompanyName] = useState<string | undefined>(user.type === "agent" ? user.agentInformation?.companyName : undefined);
 	const [commercialRegistration, setCommercialRegistration] = useState<string | undefined>(
@@ -152,6 +153,7 @@ function UserProfile({user, mutateUser}: Props) {
 				employment: user?.type === "corporate" ? undefined : employment,
 				position: user?.type === "corporate" ? position : undefined,
 				gender,
+				passport_id,
 			},
 		});
 		if (request.status === 200) {
@@ -193,6 +195,17 @@ function UserProfile({user, mutateUser}: Props) {
 									required
 								/>
 							</div>
+							{user.type === "student" && (
+								<Input
+									type="text"
+									name="passport_id"
+									label="Passport/National ID"
+									onChange={(e) => setPassportID(e)}
+									placeholder="Enter National ID or Passport number"
+									value={passport_id}
+									required
+								/>
+							)}
 							<div className="flex flex-col md:flex-row gap-8 w-full">
 								<Input
 									label="Current Password"

src/pages/record.tsx

@@ -24,6 +24,7 @@ import useGroups from "@/hooks/useGroups";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import useAssignments from "@/hooks/useAssignments";
 import {uuidv4} from "@firebase/util";
+import { usePDFDownload } from "@/hooks/usePDFDownload";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -69,8 +70,8 @@ export default function History({user}: {user: User}) {
 	const setShowSolutions = useExamStore((state) => state.setShowSolutions);
 	const setUserSolutions = useExamStore((state) => state.setUserSolutions);
 	const setSelectedModules = useExamStore((state) => state.setSelectedModules);
-
 	const router = useRouter();
+	const renderPdfIcon = usePDFDownload("stats");
 
 	useEffect(() => {
 		if (stats && !isStatsLoading) {
@@ -174,7 +175,7 @@ export default function History({user}: {user: User}) {
 			level: calculateBandScore(x.correct, x.total, x.module, user.focus),
 		}));
 
-		const timeSpent = dateStats[0].timeSpent;
+		const { timeSpent, session } = dateStats[0];
 
 		const selectExam = () => {
 			const examPromises = uniqBy(dateStats, "exam").map((stat) => getExamById(stat.module, stat.exam));
@@ -195,6 +196,12 @@ export default function History({user}: {user: User}) {
 			});
 		};
 
+		const textColor = clsx(
+			correct / total >= 0.7 && "text-mti-purple",
+			correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
+			correct / total < 0.3 && "text-mti-rose",
+		);
+		
 		const content = (
 			<>
 				<div className="w-full flex justify-between -md:items-center 2xl:items-center">
@@ -207,15 +214,14 @@ export default function History({user}: {user: User}) {
 							</>
 						)}
 					</div>
+					<div className="flex flex-row gap-2">
 						<span
-						className={clsx(
+							className={textColor}>
-							correct / total >= 0.7 && "text-mti-purple",
-							correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
-							correct / total < 0.3 && "text-mti-rose",
-						)}>
 							Level{" "}
 							{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
 						</span>
+						{renderPdfIcon(session, textColor, textColor)}
+					</div>
 				</div>
 
 				<div className="w-full flex flex-col gap-1">

src/utils/pdf.ts

@@ -0,0 +1,44 @@
+import qrcode from "qrcode";
+
+export const generateQRCode = async (link: string) => {
+  try {
+    const qrCodeDataURL = await qrcode.toDataURL(link);
+    return qrCodeDataURL;
+  } catch (error) {
+    console.error("Error generating QR code:", error);
+    return null;
+  }
+};
+
+// Radial Progress PNGs were generated with only two colors
+// and they use some baseline score (10%, 20%, 30%..)
+type RADIAL_PROGRESS_COLOR = "laranja" | "azul";
+
+export const getRadialProgressPNG = (
+  color: RADIAL_PROGRESS_COLOR,
+  score: number,
+  total: number
+) => {
+  // calculate the percentage of the score
+  // and round it to the closest available image
+  const percent = (score / total) * 100;
+  if (isNaN(percent)) return `public/radial_progress/${color}_0.png`;
+  const remainder = percent % 10;
+  const roundedPercent = percent - remainder;
+  return `public/radial_progress/${color}_${roundedPercent}.png`;
+};
+
+export const streamToBuffer = async (
+  stream: NodeJS.ReadableStream
+): Promise<Buffer> => {
+  return new Promise((resolve, reject) => {
+    const chunks: Buffer[] = [];
+    stream.on("data", (data) => {
+      chunks.push(data);
+    });
+    stream.on("end", () => {
+      resolve(Buffer.concat(chunks));
+    });
+    stream.on("error", reject);
+  });
+};

yarn.lock

@@ -48,6 +48,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.20.13":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.6.tgz#c05e610dc228855dc92ef1b53d07389ed8ab521d"
+  integrity sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
   version "7.21.0"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz"
@@ -1019,6 +1026,144 @@
   resolved "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
+"@react-pdf/fns@2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@react-pdf/fns/-/fns-2.0.1.tgz#8948464044fc8a69975d9d07b1a12673377b72e2"
+  integrity sha512-/vgecczzFYBQFkgUupH+sxXhLWQtBwdwCgweyh25XOlR4NZuaMD/UVUDl4loFHhRQqDMQq37lkTcchh7zzW6ug==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+
+"@react-pdf/font@^2.3.7":
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/@react-pdf/font/-/font-2.3.7.tgz#f74de022724d2f1529c73250c71c74c932e5c484"
+  integrity sha512-NoCieWea6c1mCpDBoyjPbUEC1qXa+S/M7+8vYPZ71aTMgX7co3gQc2e6YKwrSQeQP+BsBq3LSVhjI2ETXfcytw==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    "@react-pdf/types" "^2.3.4"
+    cross-fetch "^3.1.5"
+    fontkit "^2.0.2"
+    is-url "^1.2.4"
+
+"@react-pdf/image@^2.2.2":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@react-pdf/image/-/image-2.2.2.tgz#e6fa630210583f76c5f1fd4e3059528d6bededac"
+  integrity sha512-990JvRZuhsnHyAGd7gvmhfr+4/5PAHLH9IgDstaEDLEq2eFAIQFuNM7k3D6kjKgV1mM7Jqif3CWqrcHBF3jrJw==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    "@react-pdf/png-js" "^2.2.0"
+    cross-fetch "^3.1.5"
+
+"@react-pdf/layout@^3.6.3":
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/@react-pdf/layout/-/layout-3.6.3.tgz#6f108d0910bed7ba02619cbb4d0393ba72411e8c"
+  integrity sha512-w6ACZ9o18Q5wbzsY9a4KW2Gqn6Drt3AN/kb/I6SBz/L7PAJ9rPQBIDq/s5qZJ+/WwWy33rcC8WC1givtDhjCHQ==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    "@react-pdf/fns" "2.0.1"
+    "@react-pdf/image" "^2.2.2"
+    "@react-pdf/pdfkit" "^3.0.2"
+    "@react-pdf/primitives" "^3.0.0"
+    "@react-pdf/stylesheet" "^4.1.8"
+    "@react-pdf/textkit" "^4.2.0"
+    "@react-pdf/types" "^2.3.4"
+    "@react-pdf/yoga" "^4.1.2"
+    cross-fetch "^3.1.5"
+    emoji-regex "^10.2.1"
+    queue "^6.0.1"
+
+"@react-pdf/pdfkit@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@react-pdf/pdfkit/-/pdfkit-3.0.2.tgz#6ec17f416f464d86c06c0b0d8a76ea9acdff9ddb"
+  integrity sha512-+m5rwNCwyEH6lmnZWpsQJvdqb6YaCCR0nMWrc/KKDwznuPMrGmGWyNxqCja+bQPORcHZyl6Cd/iFL0glyB3QGw==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    "@react-pdf/png-js" "^2.2.0"
+    browserify-zlib "^0.2.0"
+    crypto-js "^4.0.0"
+    fontkit "^2.0.2"
+    vite-compatible-readable-stream "^3.6.1"
+
+"@react-pdf/png-js@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@react-pdf/png-js/-/png-js-2.2.0.tgz#c40ec2ae745f2feb7bd557024af8f366c2c8c00e"
+  integrity sha512-csZU5lfNW73tq7s7zB/1rWXGro+Z9cQhxtsXwxS418TSszHUiM6PwddouiKJxdGhbVLjRIcuuFVa0aR5cDOC6w==
+  dependencies:
+    browserify-zlib "^0.2.0"
+
+"@react-pdf/primitives@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@react-pdf/primitives/-/primitives-3.0.1.tgz#3b2bfebdb1fef6fc7f99214ccfd0932267b8e0cd"
+  integrity sha512-0HGcknrLNwyhxe+SZCBL29JY4M85mXKdvTZE9uhjNbADGgTc8wVnkc5+e4S/lDvugbVISXyuIhZnYwtK9eDnyQ==
+
+"@react-pdf/render@^3.2.7":
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/@react-pdf/render/-/render-3.2.7.tgz#3b2a479da336531f9b6358ff9beabb18dc282106"
+  integrity sha512-fAgbbAAkVL0hpcf1vUJLHxuPjPBqZuq8nors7fCwvoatBBwOWP9fza7IDPeFKN7+ZOnfmIZzes8Kc/DNHzJohw==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    "@react-pdf/fns" "2.0.1"
+    "@react-pdf/primitives" "^3.0.0"
+    "@react-pdf/textkit" "^4.2.0"
+    "@react-pdf/types" "^2.3.4"
+    abs-svg-path "^0.1.1"
+    color-string "^1.5.3"
+    normalize-svg-path "^1.1.0"
+    parse-svg-path "^0.1.2"
+    svg-arc-to-cubic-bezier "^3.2.0"
+
+"@react-pdf/renderer@^3.1.14":
+  version "3.1.14"
+  resolved "https://registry.yarnpkg.com/@react-pdf/renderer/-/renderer-3.1.14.tgz#37c4bc63db1b998faba594a05c5accc9a7ebd85b"
+  integrity sha512-Qk29uTamH6q+drK/YmiFbuQQ+yutesfIe+wyrsXFoUJUutIiDIaibO6zByMkhWb3M6CMt6NvG3NLHio1OF8U6Q==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    "@react-pdf/font" "^2.3.7"
+    "@react-pdf/layout" "^3.6.3"
+    "@react-pdf/pdfkit" "^3.0.2"
+    "@react-pdf/primitives" "^3.0.0"
+    "@react-pdf/render" "^3.2.7"
+    "@react-pdf/types" "^2.3.4"
+    events "^3.3.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    queue "^6.0.1"
+    scheduler "^0.17.0"
+
+"@react-pdf/stylesheet@^4.1.8":
+  version "4.1.8"
+  resolved "https://registry.yarnpkg.com/@react-pdf/stylesheet/-/stylesheet-4.1.8.tgz#17e0d36cdb767a2566cfc59786dca03af03468cb"
+  integrity sha512-/EuB9RBsH3YYRj8mwzImaul619MvX3rsHNF4h8LnlwDOuBehPA3L/fHrikfPqtJvHqK2ty3GXnkw0HG5SQpMzw==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    "@react-pdf/fns" "2.0.1"
+    "@react-pdf/types" "^2.3.4"
+    color-string "^1.5.3"
+    hsl-to-hex "^1.0.0"
+    media-engine "^1.0.3"
+    postcss-value-parser "^4.1.0"
+
+"@react-pdf/textkit@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@react-pdf/textkit/-/textkit-4.2.0.tgz#bd8299708ddb7a9b154706aa2516dd3666230cf1"
+  integrity sha512-R90pEOW6NdhUx4p99iROvKmwB06IRYdXMhh0QcmUeoPOLe64ZdMfs3LZliNUWgI5fCmq71J+nv868i/EakFPDg==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    "@react-pdf/fns" "2.0.1"
+    hyphen "^1.6.4"
+    unicode-properties "^1.4.1"
+
+"@react-pdf/types@^2.3.4":
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/@react-pdf/types/-/types-2.3.4.tgz#6a1ce0e5b65a4bebaaa7b45777265792df06c5e9"
+  integrity sha512-vGGz21BTE05EktBbotbd7fjC0Yi8A/lOSIpzd7L7aF1XY+vyIHlQVb35DWCipM1p/6XN4cr9etGAmm1e4Mtmjw==
+
+"@react-pdf/yoga@^4.1.2":
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/@react-pdf/yoga/-/yoga-4.1.2.tgz#cc901f7384f0c1976d7ddeba5cc77e26d768ba77"
+  integrity sha512-OlMZkFrJDj4GyKZ70thiObwwPVZ52B7mlPyfzwa+sgwsioqHXg9nMWOO+7SQFNUbbOGagMUu0bCuTv+iXYZuaQ==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+
 "@rushstack/eslint-patch@^1.1.3":
   version "1.2.0"
   resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz"
@@ -1031,6 +1176,14 @@
   dependencies:
     tslib "^2.4.0"
 
+"@swc/helpers@^0.4.2":
+  version "0.4.36"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.36.tgz#fcfff76ed52c214f357e8e9d3f37b568908072d9"
+  integrity sha512-5lxnyLEYFskErRPenYItLRSge5DjrJngYKdVjRSrWfza9G6KkgHEXi0vUZiyUeMU5JfXH1YnvXZzSp8ul88o2Q==
+  dependencies:
+    legacy-swc-helpers "npm:@swc/helpers@=0.4.14"
+    tslib "^2.4.0"
+
 "@tanstack/react-table@^8.10.1":
   version "8.10.1"
   resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.10.1.tgz#f3e7d6e3f82dd43947e8893617a3c50e9e3fa383"
@@ -1055,6 +1208,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/blob-stream@^0.1.33":
+  version "0.1.33"
+  resolved "https://registry.yarnpkg.com/@types/blob-stream/-/blob-stream-0.1.33.tgz#2107fc2e9ec11a70161dec982e62858e8937b4d3"
+  integrity sha512-HNHZ1S6W7F8PhxdyAastunpUC8cAZim78UIfqbL79gLzylp8EZep68yxAh11hTRoEvsqHAg/MECgmKF8+V0HzQ==
+  dependencies:
+    "@types/node" "*"
+
 "@types/body-parser@*":
   version "1.19.2"
   resolved "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz"
@@ -1277,6 +1437,13 @@
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
+"@types/qrcode@^1.5.5":
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/@types/qrcode/-/qrcode-1.5.5.tgz#993ff7c6b584277eee7aac0a20861eab682f9dac"
+  integrity sha512-CdfBi/e3Qk+3Z/fXYShipBT13OJ2fDO2Q2w5CIP5anLTLIndQG9z6P1cnm+8zCWSpm5dnxMFd/uREtb0EXuQzg==
+  dependencies:
+    "@types/node" "*"
+
 "@types/qs@*":
   version "6.9.7"
   resolved "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz"
@@ -1435,6 +1602,11 @@ abort-controller@^3.0.0:
   dependencies:
     event-target-shim "^5.0.0"
 
+abs-svg-path@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/abs-svg-path/-/abs-svg-path-0.1.1.tgz#df601c8e8d2ba10d4a76d625e236a9a39c2723bf"
+  integrity sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
@@ -1674,7 +1846,7 @@ balanced-match@^1.0.0:
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
-base64-js@^1.3.0, base64-js@^1.3.1:
+base64-js@^1.1.2, base64-js@^1.3.0, base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
@@ -1724,6 +1896,20 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+brotli@^1.3.2:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/brotli/-/brotli-1.3.3.tgz#7365d8cc00f12cf765d2b2c898716bcf4b604d48"
+  integrity sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==
+  dependencies:
+    base64-js "^1.1.2"
+
+browserify-zlib@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
+  integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
+  dependencies:
+    pako "~1.0.5"
+
 browserslist@^4.21.5:
   version "4.21.5"
   resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz"
@@ -1765,6 +1951,11 @@ camelcase-css@^2.0.1:
   resolved "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
+camelcase@^5.0.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
+  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+
 caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464:
   version "1.0.30001480"
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz"
@@ -1831,6 +2022,15 @@ client-only@0.0.1, client-only@^0.0.1:
   resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
+cliui@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
+  integrity sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^6.2.0"
+
 cliui@^7.0.2:
   version "7.0.4"
   resolved "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz"
@@ -1840,6 +2040,11 @@ cliui@^7.0.2:
     strip-ansi "^6.0.0"
     wrap-ansi "^7.0.0"
 
+clone@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
+
 clsx@^1.1.1, clsx@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz"
@@ -1864,11 +2069,19 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@^1.1.4, color-name@~1.1.4:
+color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color-string@^1.5.3:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
+  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
 color-support@^1.1.2:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
@@ -1944,6 +2157,13 @@ country-flag-icons@^1.5.4:
   resolved "https://registry.yarnpkg.com/country-flag-icons/-/country-flag-icons-1.5.7.tgz#f1f2ddf14f3cbf01cba6746374aeba94db35d4b4"
   integrity sha512-AdvXhMcmSp7nBSkpGfW4qR/luAdRUutJqya9PuwRbsBzuoknThfultbv7Ib6fWsHXC43Es/4QJ8gzQQdBNm75A==
 
+cross-fetch@^3.1.5:
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.8.tgz#0327eba65fd68a7d119f8fb2bf9334a1a7956f82"
+  integrity sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==
+  dependencies:
+    node-fetch "^2.6.12"
+
 cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -1964,6 +2184,11 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+crypto-js@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.2.0.tgz#4d931639ecdfd12ff80e8186dba6af2c2e856631"
+  integrity sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==
+
 css-selector-tokenizer@^0.8:
   version "0.8.0"
   resolved "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz"
@@ -2024,6 +2249,11 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+decamelize@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+  integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
+
 deep-equal@^2.0.5:
   version "2.2.0"
   resolved "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.0.tgz"
@@ -2093,11 +2323,21 @@ dezalgo@^1.0.4:
     asap "^2.0.0"
     wrappy "1"
 
+dfa@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/dfa/-/dfa-1.2.0.tgz#96ac3204e2d29c49ea5b57af8d92c2ae12790657"
+  integrity sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==
+
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz"
   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
+dijkstrajs@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.3.tgz#4c8dbdea1f0f6478bff94d9c49c784d623e4fc23"
+  integrity sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==
+
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz"
@@ -2169,6 +2409,11 @@ electron-to-chromium@^1.4.284:
   resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.368.tgz"
   integrity sha512-e2aeCAixCj9M7nJxdB/wDjO6mbYX+lJJxSJCXDzlr5YPGYVofuJwGN9nKg2o6wWInjX6XmxRinn3AeJMK81ltw==
 
+emoji-regex@^10.2.1:
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.3.0.tgz#76998b9268409eb3dae3de989254d456e70cfe23"
+  integrity sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
@@ -2179,6 +2424,11 @@ emoji-regex@^9.2.2:
   resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
+encode-utf8@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/encode-utf8/-/encode-utf8-1.0.3.tgz#f30fdd31da07fb596f281beb2f6b027851994cda"
+  integrity sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw==
+
 end-of-stream@^1.4.1:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -2567,6 +2817,11 @@ event-target-shim@^5.0.0:
   resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
   integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
 
+events@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
 express-handlebars@^7.1.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/express-handlebars/-/express-handlebars-7.1.2.tgz#2471673d11af46f496cba4098a705f0217232fda"
@@ -2664,6 +2919,14 @@ find-root@^1.1.0:
   resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
   integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
 
+find-up@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
 find-up@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz"
@@ -2739,6 +3002,21 @@ follow-redirects@^1.15.0:
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
 
+fontkit@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/fontkit/-/fontkit-2.0.2.tgz#ac5384f3ecab8327c6d2ea2e4d384afc544b48fd"
+  integrity sha512-jc4k5Yr8iov8QfS6u8w2CnHWVmbOGtdBtOXMze5Y+QD966Rx6PEVWXSEGwXlsDlKtu1G12cJjcsybnqhSk/+LA==
+  dependencies:
+    "@swc/helpers" "^0.4.2"
+    brotli "^1.3.2"
+    clone "^2.1.2"
+    dfa "^1.2.0"
+    fast-deep-equal "^3.1.3"
+    restructure "^3.0.0"
+    tiny-inflate "^1.0.3"
+    unicode-properties "^1.4.0"
+    unicode-trie "^2.0.0"
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz"
@@ -2873,7 +3151,7 @@ gcp-metadata@^5.3.0:
     gaxios "^5.0.0"
     json-bigint "^1.0.0"
 
-get-caller-file@^2.0.5:
+get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
@@ -3166,6 +3444,18 @@ howler@^2.2.4:
   resolved "https://registry.yarnpkg.com/howler/-/howler-2.2.4.tgz#bd3df4a4f68a0118a51e4bd84a2bfc2e93e6e5a1"
   integrity sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==
 
+hsl-to-hex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hsl-to-hex/-/hsl-to-hex-1.0.0.tgz#c58c826dc6d2f1e0a5ff1da5a7ecbf03faac1352"
+  integrity sha512-K6GVpucS5wFf44X0h2bLVRDsycgJmf9FF2elg+CrqD8GcFU8c6vYhgXn8NjUkFCwj+xDFb70qgLbTUm6sxwPmA==
+  dependencies:
+    hsl-to-rgb-for-reals "^1.1.0"
+
+hsl-to-rgb-for-reals@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/hsl-to-rgb-for-reals/-/hsl-to-rgb-for-reals-1.1.1.tgz#e1eb23f6b78016e3722431df68197e6dcdc016d9"
+  integrity sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg==
+
 http-parser-js@>=0.5.1:
   version "0.5.8"
   resolved "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz"
@@ -3193,6 +3483,11 @@ husky@^8.0.3:
   resolved "https://registry.yarnpkg.com/husky/-/husky-8.0.3.tgz#4936d7212e46d1dea28fef29bb3a108872cd9184"
   integrity sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==
 
+hyphen@^1.6.4:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/hyphen/-/hyphen-1.9.1.tgz#84e3ab0d06b9223b9cefd09cc1b5b52e2f661401"
+  integrity sha512-fIPVvM6BUW+878xne+wwIcBjMxeKpoADmxNTjKMocUQWiGOvwyEfZEG95IeL/t4Su6nbfbXeYDUnz62pxzLPmw==
+
 idb@7.0.1:
   version "7.0.1"
   resolved "https://registry.npmjs.org/idb/-/idb-7.0.1.tgz"
@@ -3229,7 +3524,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.3:
+inherits@2, inherits@^2.0.3, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -3292,6 +3587,11 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
 
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
 is-bigint@^1.0.1:
   version "1.0.4"
   resolved "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz"
@@ -3444,6 +3744,11 @@ is-typed-array@^1.1.10, is-typed-array@^1.1.9:
     gopd "^1.0.1"
     has-tostringtag "^1.0.0"
 
+is-url@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/is-url/-/is-url-1.2.4.tgz#04a4df46d28c4cff3d73d01ff06abeb318a1aa52"
+  integrity sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==
+
 is-weakmap@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz"
@@ -3663,6 +3968,13 @@ language-tags@=1.0.5:
   dependencies:
     language-subtag-registry "~0.3.2"
 
+"legacy-swc-helpers@npm:@swc/helpers@=0.4.14":
+  version "0.4.14"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74"
+  integrity sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==
+  dependencies:
+    tslib "^2.4.0"
+
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz"
@@ -3711,6 +4023,13 @@ load-script@^1.0.0:
   resolved "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz"
   integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
 
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
 locate-path@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz"
@@ -3851,6 +4170,11 @@ mdurl@^1.0.1:
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
 
+media-engine@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/media-engine/-/media-engine-1.0.3.tgz#be3188f6cd243ea2a40804a35de5a5b032f58dad"
+  integrity sha512-aa5tG6sDoK+k70B9iEX1NeyfT8ObCKhNDs6lJVpwF6r8vhUfuKMslIcirq6HIUYuuUYLefcEQOn9bSBOvawtwg==
+
 memoize-one@^5.1.1:
   version "5.2.1"
   resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz"
@@ -4028,7 +4352,7 @@ node-fetch@2.6.7:
   dependencies:
     whatwg-url "^5.0.0"
 
-node-fetch@^2.6.1, node-fetch@^2.6.7, node-fetch@^2.6.9:
+node-fetch@^2.6.1, node-fetch@^2.6.12, node-fetch@^2.6.7, node-fetch@^2.6.9:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
   integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
@@ -4072,6 +4396,13 @@ normalize-range@^0.1.2:
   resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz"
   integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
 
+normalize-svg-path@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz#0e614eca23c39f0cffe821d6be6cd17e569a766c"
+  integrity sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==
+  dependencies:
+    svg-arc-to-cubic-bezier "^3.0.0"
+
 npmlog@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-5.0.1.tgz#f06678e80e29419ad67ab964e0fa69959c1eb8b0"
@@ -4195,6 +4526,13 @@ optionator@^0.9.1:
     type-check "^0.4.0"
     word-wrap "^1.2.3"
 
+p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
 p-limit@^3.0.1, p-limit@^3.0.2:
   version "3.1.0"
   resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz"
@@ -4202,6 +4540,13 @@ p-limit@^3.0.1, p-limit@^3.0.2:
   dependencies:
     yocto-queue "^0.1.0"
 
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
 p-locate@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz"
@@ -4209,6 +4554,21 @@ p-locate@^5.0.0:
   dependencies:
     p-limit "^3.0.2"
 
+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
+
+pako@^0.2.5:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+  integrity sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==
+
+pako@~1.0.5:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
@@ -4226,6 +4586,11 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse-svg-path@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/parse-svg-path/-/parse-svg-path-0.1.2.tgz#7a7ec0d1eb06fa5325c7d3e009b859a09b5d49eb"
+  integrity sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
@@ -4284,6 +4649,11 @@ pirates@^4.0.1:
   resolved "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz"
   integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
 
+pngjs@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
+  integrity sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==
+
 postcss-import@^14.1.0:
   version "14.1.0"
   resolved "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz"
@@ -4323,7 +4693,7 @@ postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -4497,6 +4867,16 @@ pvutils@^1.1.3:
   resolved "https://registry.npmjs.org/pvutils/-/pvutils-1.1.3.tgz"
   integrity sha512-pMpnA0qRdFp32b1sJl1wOJNxZLQ2cbQx+k6tjNtZ8CpvVhNqEPRgivZ2WOUev2YMajecdH7ctUPDvEe87nariQ==
 
+qrcode@^1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.5.3.tgz#03afa80912c0dccf12bc93f615a535aad1066170"
+  integrity sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==
+  dependencies:
+    dijkstrajs "^1.0.1"
+    encode-utf8 "^1.0.3"
+    pngjs "^5.0.0"
+    yargs "^15.3.1"
+
 qs@^6.11.0:
   version "6.11.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.2.tgz#64bea51f12c1f5da1bc01496f48ffcff7c69d7d9"
@@ -4509,6 +4889,13 @@ queue-microtask@^1.2.2:
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+queue@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/queue/-/queue-6.0.2.tgz#b91525283e2315c7553d2efa18d83e76432fed65"
+  integrity sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==
+  dependencies:
+    inherits "~2.0.3"
+
 quick-lru@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz"
@@ -4737,6 +5124,11 @@ require-directory@^2.1.1:
   resolved "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz"
   integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
 
+require-main-filename@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
+  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
+
 requizzle@^0.2.3:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/requizzle/-/requizzle-0.2.4.tgz#319eb658b28c370f0c20f968fa8ceab98c13d27c"
@@ -4776,6 +5168,11 @@ resolve@^2.0.0-next.4:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+restructure@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/restructure/-/restructure-3.0.0.tgz#a55031d7ed3314bf585f815836fff9da3d65101d"
+  integrity sha512-Xj8/MEIhhfj9X2rmD9iJ4Gga9EFqVlpMj3vfLnV2r/Mh5jRMryNV+6lWh9GdJtDBcBSPIqzRdfBQ3wDtNFv/uw==
+
 retry-request@^5.0.0:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/retry-request/-/retry-request-5.0.2.tgz#143d85f90c755af407fcc46b7166a4ba520e44da"
@@ -4822,6 +5219,14 @@ safe-regex-test@^1.0.0:
     get-intrinsic "^1.1.3"
     is-regex "^1.1.4"
 
+scheduler@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.17.0.tgz#7c9c673e4ec781fac853927916d1c426b6f3ddfe"
+  integrity sha512-7rro8Io3tnCPuY4la/NuI5F2yfESpnfZyT6TtkXnSWVkcu0BCDJ+8gk5ozUaFaxpIyNuWAPXrH0yFcSi28fnDA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 scheduler@^0.23.0:
   version "0.23.0"
   resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz"
@@ -4916,6 +5321,13 @@ signal-exit@^4.0.1:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
+  dependencies:
+    is-arrayish "^0.3.1"
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
@@ -5119,6 +5531,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svg-arc-to-cubic-bezier@^3.0.0, svg-arc-to-cubic-bezier@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz#390c450035ae1c4a0104d90650304c3bc814abe6"
+  integrity sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==
+
 swr@^2.1.3:
   version "2.1.3"
   resolved "https://registry.npmjs.org/swr/-/swr-2.1.3.tgz"
@@ -5229,6 +5646,11 @@ tiny-glob@^0.2.9:
     globalyzer "0.1.0"
     globrex "^0.1.2"
 
+tiny-inflate@^1.0.0, tiny-inflate@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
+  integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
+
 tmp@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
@@ -5360,6 +5782,22 @@ undici-types@~5.25.1:
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.25.3.tgz#e044115914c85f0bcbb229f346ab739f064998c3"
   integrity sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==
 
+unicode-properties@^1.4.0, unicode-properties@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/unicode-properties/-/unicode-properties-1.4.1.tgz#96a9cffb7e619a0dc7368c28da27e05fc8f9be5f"
+  integrity sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==
+  dependencies:
+    base64-js "^1.3.0"
+    unicode-trie "^2.0.0"
+
+unicode-trie@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-trie/-/unicode-trie-2.0.0.tgz#8fd8845696e2e14a8b67d78fa9e0dd2cad62fec8"
+  integrity sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==
+  dependencies:
+    pako "^0.2.5"
+    tiny-inflate "^1.0.0"
+
 update-browserslist-db@^1.0.10:
   version "1.0.11"
   resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz"
@@ -5407,6 +5845,15 @@ uuid@^9.0.0:
   resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz"
   integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
 
+vite-compatible-readable-stream@^3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/vite-compatible-readable-stream/-/vite-compatible-readable-stream-3.6.1.tgz#27267aebbdc9893c0ddf65a421279cbb1e31d8cd"
+  integrity sha512-t20zYkrSf868+j/p31cRIGN28Phrjm3nRSLR2fyc2tiWi4cZGVdv68yNlwnIINTkMTmPoMiSlc0OadaO7DXZaQ==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
 warning@^4.0.2:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
@@ -5478,6 +5925,11 @@ which-collection@^1.0.1:
     is-weakmap "^2.0.1"
     is-weakset "^2.0.1"
 
+which-module@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.1.tgz#776b1fe35d90aebe99e8ac15eb24093389a4a409"
+  integrity sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==
+
 which-typed-array@^1.1.9:
   version "1.1.9"
   resolved "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz"
@@ -5535,6 +5987,15 @@ wordwrap@^1.0.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
+  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
@@ -5563,6 +6024,11 @@ xmlcreate@^2.0.4:
   resolved "https://registry.yarnpkg.com/xmlcreate/-/xmlcreate-2.0.4.tgz#0c5ab0f99cdd02a81065fa9cd8f8ae87624889be"
   integrity sha512-nquOebG4sngPmGPICTS5EnxqhKbCmz5Ox5hsszI2T6U5qdrJizBc+0ilYSEjTSzU0yZcmvppztXe/5Al5fUwdg==
 
+y18n@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
+  integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
+
 y18n@^5.0.5:
   version "5.0.8"
   resolved "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz"
@@ -5583,11 +6049,36 @@ yaml@^1.10.0, yaml@^1.10.2:
   resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
+yargs-parser@^18.1.2:
+  version "18.1.3"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
+  integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs-parser@^20.2.2:
   version "20.2.9"
   resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
 
+yargs@^15.3.1:
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
+  integrity sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==
+  dependencies:
+    cliui "^6.0.0"
+    decamelize "^1.2.0"
+    find-up "^4.1.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^4.2.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^18.1.2"
+
 yargs@^16.2.0:
   version "16.2.0"
   resolved "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz"