finished building out the basice infrasturcture for the MiPCA reports, just need to get the actual content of the PDF

src/cableEstimator/cableQuote.tsx

@@ -27,7 +27,7 @@ export default function CableQuote(props: Props) {
   });
 
   const pdfDoc = () => {
-    return <AgPDFTemplate content={<PdfContent bin={bin} />} />;
+    return <AgPDFTemplate content={[<PdfContent bin={bin} />]} />;
   };
 
   return (

src/common/pdfTemplates/Agriculture/agPDFTemplate.tsx

@@ -3,7 +3,7 @@ import Header from "./components/header";
 import Footer from "./components/footer";
 
 interface Props {
-  content: JSX.Element;
+  content: JSX.Element[];
 }
 
 export default function AgPDFTemplate(props: Props) {
@@ -27,15 +27,17 @@ export default function AgPDFTemplate(props: Props) {
   });
   return (
     <Document>
+      {props.content.map(page => (
         <Page size={"A4"} style={pdfStyle.page}>
         <View style={pdfStyle.header}>
           <Header />
         </View>
-        <View style={pdfStyle.content}>{props.content}</View>
+        <View style={pdfStyle.content}>{page}</View>
         <View style={pdfStyle.footer}>
           <Footer />
         </View>
       </Page>
+      ))}
     </Document>
   );
 }

src/common/pdfTemplates/MiPCA/components/footer.tsx

@@ -0,0 +1,31 @@
+import { Image, StyleSheet, View } from "@react-pdf/renderer";
+import agFooter from "common/pdfTemplates/Agriculture/components/footerImages/agFooter.png";
+import React from "react";
+
+export default function Footer() {
+  const styles = StyleSheet.create({
+    view: {
+      flexDirection: "row",
+      fontStyle: "normal",
+      fontWeight: 650,
+      borderTop: "1px solid black",
+      padding: 10
+    },
+    label: {
+      width: "20%"
+    },
+    email: {
+      width: "40%"
+    },
+    phone: {
+      width: "40%"
+    }
+  });
+  return (
+    <React.Fragment>
+      <View style={styles.view}>
+        <Image src={agFooter} />
+      </View>
+    </React.Fragment>
+  );
+}

src/common/pdfTemplates/MiPCA/components/header.tsx

@@ -0,0 +1,32 @@
+import { Image, StyleSheet, Text, View } from "@react-pdf/renderer";
+import moment from "moment";
+import React from "react";
+import logo from "assets/whitelabels/AdaptiveAgriculture/AgLogoText.png";
+
+export default function Header() {
+  const styles = StyleSheet.create({
+    view: {
+      flexDirection: "row",
+      fontStyle: "normal",
+      fontWeight: 650,
+      borderBottom: "1px solid black"
+    },
+    logo: {
+      width: "55%",
+      textAlign: "left",
+      paddingBottom: 15
+    },
+    estimate: {
+      width: "45%",
+      textAlign: "right"
+    }
+  });
+  return (
+    <React.Fragment>
+      <View style={styles.view}>
+        <Image style={styles.logo} src={logo} />
+        <Text style={styles.estimate}>{moment().format("YYYY-MM-DD")}</Text>
+      </View>
+    </React.Fragment>
+  );
+}

src/common/pdfTemplates/MiPCA/mipcaPDFTemplate.tsx

@@ -0,0 +1,43 @@
+import { Document, Page, StyleSheet, View } from "@react-pdf/renderer";
+import Header from "./components/header";
+import Footer from "./components/footer";
+
+interface Props {
+  content: JSX.Element[];
+}
+
+export default function MiPCAPDFTemplate(props: Props) {
+  const pdfStyle = StyleSheet.create({
+    page: {
+      fontSize: 11,
+      padding: "5%"
+    },
+    header: {
+      flexDirection: "row",
+      height: "8%"
+    },
+    content: {
+      flexDirection: "row",
+      height: "87%"
+    },
+    footer: {
+      flexDirection: "row",
+      height: "5%"
+    }
+  });
+  return (
+    <Document>
+      {props.content.map(page => (
+        <Page size={"A4"} style={pdfStyle.page}>
+        <View style={pdfStyle.header}>
+          <Header />
+        </View>
+        <View style={pdfStyle.content}>{page}</View>
+        <View style={pdfStyle.footer}>
+          <Footer />
+        </View>
+      </Page>
+      ))}
+    </Document>
+  );
+}

src/providers/pond/gateAPI.tsx

@@ -356,7 +356,7 @@ export default function GateProvider(props: PropsWithChildren<Props>) {
     otherTeam?: string
   ) => {
     const view = otherTeam ? otherTeam : as
-    let url = pondURL("reports/gates?keys=" + gates.toString() + "start=" + start + "&end=" + end + "&as=" + view)
+    let url = pondURL("/reports/gates?gateKeys=" + gates.toString() + "&start=" + start + "&end=" + end + "&as=" + view)
     return new Promise<AxiosResponse<pond.GateReportDataResponse>>((resolve, reject) => {
       get<pond.GateReportDataResponse>(url).then(resp => {
         resp.data = pond.GateReportDataResponse.fromObject(resp.data)

src/reports/MiPCA/GateReports.tsx

@@ -1,4 +1,5 @@
-import { Button, DialogActions, DialogContent, DialogTitle, Typography } from "@mui/material"
+import { Box, Button, CircularProgress, DialogActions, DialogContent, DialogTitle, Typography } from "@mui/material"
+import MiPCAPDFTemplate from "common/pdfTemplates/MiPCA/mipcaPDFTemplate"
 import ResponsiveDialog from "common/ResponsiveDialog"
 import ResponsiveTable from "common/ResponsiveTable"
 import { GetDefaultDateRange } from "common/time/DateRange"
@@ -9,6 +10,9 @@ import { Moment } from "moment"
 import { pond } from "protobuf-ts/pond"
 import { useGateAPI } from "providers"
 import React, { useEffect, useState } from "react"
+import GateReportPDF from "./pdfComponents.tsx/GateReportPDF"
+import { PDFViewer, StyleSheet } from "@react-pdf/renderer"
+import { useMobile } from "hooks"
 
 interface Props {
   open: boolean
@@ -25,11 +29,29 @@ export default function GateReports(props: Props){
   const [page, setPage] = useState(0)
   const [gateKeys, setGateKeys] = useState<string[]>([])
   const [selectedTableRows,setSelectedTableRows] = useState<number[]>([])
-  const [reportData, setReportData] = useState<pond.GateReportData[]>([])
+  const [reportPages, setReportPages] = useState<JSX.Element[]>([])
   const [loadingReportData, setLoadingReportData] = useState(false)
   const defaultDateRange = GetDefaultDateRange();
   const [startDate, setStartDate] = useState<Moment>(defaultDateRange.start);
   const [endDate, setEndDate] = useState<Moment>(defaultDateRange.end);
+  const isMobile = useMobile()
+  const pdfStyle = StyleSheet.create({
+    viewerDesktop: {
+      height: 500 * 1.44,
+      width: 500
+    },
+    viewerMobile: {
+      height: "100%",
+      width: "100%"
+    }
+  });
+
+  const closeDialog = () => {
+    setGateKeys([])
+    setSelectedTableRows([])
+    setReportPages([])
+    onClose()
+  }
 
   //load all of the gates for the user/team
   useEffect(()=>{
@@ -116,7 +138,14 @@ export default function GateReports(props: Props){
   const generateReports = () => {
     setLoadingReportData(true)
     gateAPI.gateReportData(gateKeys, startDate.toISOString(), endDate.toISOString()).then(resp => {
-      //in the response use the data to build the pdf's
+      console.log(resp)
+      let pdfPages: JSX.Element[] = []
+      if(resp.data.data){
+        resp.data.data.forEach(reportData => {
+          pdfPages.push(<GateReportPDF reportData={reportData}/>)
+        })
+      }
+      setReportPages(pdfPages)
     }).catch(err => {
       
     }).finally(()=>{
@@ -126,15 +155,34 @@ export default function GateReports(props: Props){
   }
 
   return (
-    <ResponsiveDialog open={open} onClose={onClose}>
+    <ResponsiveDialog open={open} onClose={() => {closeDialog()}}>
       <DialogTitle>Gate Reports</DialogTitle>
       <DialogContent>
+        {loadingReportData ?
+          <Box display="flex" justifyContent="center">
+            <CircularProgress color="primary" size={100}/>
+          </Box> 
+        :
+          <React.Fragment>
+            {reportPages.length > 0 ? 
+            <Box>
+              <PDFViewer style={isMobile ? pdfStyle.viewerMobile : pdfStyle.viewerDesktop}>
+                <MiPCAPDFTemplate content={reportPages}/>
+              </PDFViewer>
+            </Box> :
+            <Box>
             {dateSelect()}
             {!gate && gateTable()}
+            </Box>
+            }
+          </React.Fragment>
+        }
       </DialogContent>
       <DialogActions>
-        <Button>Close</Button>
         <Button onClick={()=>{
+          closeDialog()
+        }}>Close</Button>
+        <Button variant="contained" color="primary" disabled={loadingReportData} onClick={()=>{
           generateReports()
         }}>Generate Reports</Button>
       </DialogActions>

src/reports/MiPCA/pdfComponents.tsx/GateReportPDF.tsx

@@ -0,0 +1,29 @@
+import { View, StyleSheet } from "@react-pdf/renderer";
+import { pond } from "protobuf-ts/pond";
+
+interface Props {
+  reportData: pond.GateReportData
+}
+
+export default function GateReportPDF(props: Props){
+  const styles = StyleSheet.create({
+    general: {
+      marginTop: 2,
+      flexDirection: "row",
+      borderTop: "1px solid black",
+      borderBottom: "1px solid black",
+      paddingTop: 12,
+      paddingBottom: 12,
+      fontFamily: "Helvetica-Bold",
+      fontSize: 20,
+      textAlign: "center"
+    }
+  });
+  return (
+    <View>
+      <View style={styles.general}>
+        
+      </View>
+    </View>
+  )
+}