diff --git a/frontend/package.json b/frontend/package.json
index 54d93bda8..eb59c3301 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,10 @@
"@emotion/styled": "^11.11.0",
"@fontsource/eczar": "^4.5.12",
"@fontsource/work-sans": "^4.5.14",
+ "@react-pdf/font": "2.2.1",
+ "@react-pdf/fontkit": "2.0.2",
+ "@react-pdf/pdfkit": "2.1.0",
+ "@react-pdf/renderer": "2.0.19",
"@rjsf/bootstrap-4": "^2.5.1",
"@rjsf/core": "^2.5.1",
"@testing-library/jest-dom": "^5.17.0",
@@ -47,6 +51,12 @@
"typescript": "^4.1.2",
"web-vitals": "^1.1.2"
},
+ "overrides": {
+ "react-error-overlay": "6.0.9",
+ "@react-pdf/font": "2.2.1",
+ "@react-pdf/fontkit": "2.0.2",
+ "@react-pdf/pdfkit": "2.1.0"
+ },
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts --openssl-legacy-provider build",
diff --git a/frontend/src/components/overview/CaseOverviewFooter.tsx b/frontend/src/components/overview/CaseOverviewFooter.tsx
index 5cca44117..a97500cb0 100644
--- a/frontend/src/components/overview/CaseOverviewFooter.tsx
+++ b/frontend/src/components/overview/CaseOverviewFooter.tsx
@@ -1,5 +1,13 @@
import React from "react";
import { Box, Button, Flex, useDisclosure } from "@chakra-ui/react";
+import {
+ Document,
+ Page,
+ Text,
+ View,
+ StyleSheet,
+ PDFDownloadLink,
+} from "@react-pdf/renderer";
import { FileText } from "react-feather";
import ArchiveCaseModal from "../dashboard/ArchiveCaseModal";
@@ -17,6 +25,33 @@ const CaseOverviewFooter = (): React.ReactElement => {
onClose: onCloseArchiveCaseModal,
} = useDisclosure();
+ // style pdf document
+ const styles = StyleSheet.create({
+ page: {
+ flexDirection: "row",
+ backgroundColor: "#E4E4E4",
+ },
+ section: {
+ margin: 10,
+ padding: 10,
+ flexGrow: 1,
+ },
+ });
+
+ // place dynamic data into document here
+ const MyDocument = () => (
+
+
+
+ Section #1
+
+
+ Section #2
+
+
+
+ );
+
return (
{
position="fixed"
bottom="0"
>
-
+ } fileName="fee_acceptance.pdf">
+ {({ loading }) => (loading ? "Loading document..." : "Download now!")}
+
+