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!")} + +