Apr 131

web_app/package.json

@@ -26,18 +26,21 @@
     "@types/jspdf": "^2.0.0",
     "axios": "^1.7",
     "dayjs": "^1.11",
+    "axios": "^1.7",
+    "dayjs": "^1.11",
     "framer-motion": "^11.0.5",
     "html2canvas": "^1.4.1",
+    "html2pdf.js": "^0.10.2",
     "jest": "^29.7",
     "jotai": "^2.6",
     "jotai-devtools": "^0.7.1",
     "jspdf": "^2.5",
-    "next": "^14.2",
+    "next": "14.2.16",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.50",
     "rsbc-dh-prohibition-forms": "file:",
-    "ts-node": "^10.9.2"
+    "ts-node": "^10.9"
   },
   "devDependencies": {
     "@types/jquery": "^3.5.29",

web_app/public/globals.css

@@ -1,5 +1,5 @@
 :root {
-    --max-width: 1100px;
+    --max-width: 1100px !important;
     --border-radius: 12px;
     --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
     --foreground-rgb: 0, 0, 0;
@@ -41,11 +41,10 @@
 
 html,
 body {
-    max-width: 100vw;
     overflow-x: hidden;
     font-family: 'BC Sans', 'Noto Sans', Verdana, Arial, sans-serif !important;
     color: #313132;
-    font-size: 16px;
+    font-size: 1.5vw;
     line-height: 1.5em;
     height: 100%;
     background-color: #f1f1f1 !important;
@@ -88,8 +87,9 @@ h4 {
 
 #formContent {
     font-family: 'BC Sans', 'Noto Sans', Verdana, Arial, sans-serif !important;
-    font-size: 16px !important;
+    font-size: 1.5vw !important;
     line-height: 1.25 !important;
+    max-width: 1000px !important;
 }
 
 .template {
@@ -101,17 +101,6 @@ h4 {
     word-wrap: break-word;
 }
 
-@media (min-width: 768px) {
-    .container {
-        width: 750px
-    }
-}
-
-@media (min-width: 992px) {
-    .container {
-        width: 970px
-    }
-}
 
 @media (min-width: 1200px) {
     .container {
@@ -125,24 +114,26 @@ h4 {
     padding-left: 15px;
     margin-right: auto;
     margin-left: 126px;
+    max-width: 1000px !important;
 }
 
 .accordionSummary {
     text-decoration: none;
     color: #555;
-    min-height: 36px;
-    font-size: 30px;
+    min-height: 3vh;
+    font-size: 1.5vw;
     margin-top: 0.75em;
 }
 
 input[type=number] {
     -moz-appearance: textfield;
+    appearance: textfield;
 }
 
 .header1 {
     font-family: 'BC Sans', 'Noto Sans', Verdana, Arial, sans-serif !important;
     color: #313132;
-    font-size: 2.074em;
+    font-size: 2.2vw;
     line-height: 1.5em;
     padding-left: 25px;
     font-weight: 600;
@@ -178,14 +169,14 @@ ul{
 
 .step3Div{
     padding-bottom:10px;
-    font-size:16px;
+    font-size:1.5vw;
 }
 
 .signature {
     border-radius: 4px !important;
     color: #313132 !important;
     font-family: 'BC Sans', 'Noto Sans', Verdana, Arial, sans-serif !important;
-    font-size: 16px !important;
+    font-size: 1.5vw !important;
     height: 44px !important;
     margin: 0 0 0 0 !important;
     padding: 5px 5px 5px 7px !important;

web_app/src/app/_nonRoutingAssets/themeRegistry/EmotionCache.tsx

@@ -39,7 +39,7 @@ export default function NextAppDirEmotionCacheProvider(props: { options: any; Ca
     let styles = '';
     let dataEmotionAttribute = registry.cache.key;
 
-    const globals: { name: any; style: string; }[] = [];
+    const globals: { name: any; style: string|undefined; }[] = [];
 
     inserted.forEach(({ name, isGlobal }) => {
       const style = registry.cache.inserted[name];
@@ -61,7 +61,7 @@ export default function NextAppDirEmotionCacheProvider(props: { options: any; Ca
             key={name}
             data-emotion={`${registry.cache.key}-global ${name}`}
             // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: style }}
+            dangerouslySetInnerHTML={{ __html: style || '' }}
           />
         ))}
         {styles && (

web_app/src/app/_nonRoutingAssets/themeRegistry/theme.ts

@@ -77,7 +77,7 @@ const components = {
             },
             body: {
                 color: 'black',
-                fontSize: '16px',
+                fontSize: '1.5vw',
             },
         },
     },
@@ -102,8 +102,29 @@ const theme = createTheme({
             disabled: colors.text.disabled,
         },
     },
-    typography,
-    components: components,
+    typography: {
+        ...typography,
+        fontSize: 14, // Default font size in pixels
+    },
+    components: {
+        ...components,
+        MuiFormControlLabel: {
+            styleOverrides: {
+                label: {
+                    fontSize: '1.5vw'
+                },
+            },
+        },
+        MuiAccordionSummary: {
+            styleOverrides: {
+                root: {
+                    '& .MuiTypography-root': {
+                        fontSize: '2.5vw !important',
+                    },
+                }
+            }
+        } 
+    },
     // breakpoints,
     // Other global theme overrides or additions
 });

web_app/src/app/components/FormField.tsx

@@ -48,7 +48,7 @@ export function FormField({
                     <IconButton size="small" onClick={handleTooltipOpen}>
                         <HelpIcon fontSize="small" style={{ color: 'black', height: '16px', width: '16px' }} />
                     </IconButton>
-                    <Typography variant='subtitle1' component="label" htmlFor={id + '-field'} sx={{ color: '#313132', fontSize: '16px', fontWeight: '700' }}>
+                    <Typography variant='subtitle1' component="label" htmlFor={id + '-field'} sx={{ color: '#313132', fontSize: '1.5vw', fontWeight: '700' }}>
                         {labelText}
                     </Typography>
                 </Box>
@@ -101,15 +101,15 @@ export function FormField({
                     <Box sx={{ display: 'table-cell', paddingLeft: '2px', paddingTop:'15px' }}>
                         {children}
                         {error &&
-                            <Typography variant="caption" sx={{ color: '#D8292F', fontWeight: '700', padding: '4px 0px 2px 0px', ml: '4px', fontSize: '16px', display: 'block' }}>
+                            <Typography variant="caption" sx={{ color: '#D8292F', fontWeight: '700', padding: '4px 0px 2px 0px', ml: '4px', fontSize: '1.5vw', display: 'block' }}>
 
                                 {errorText}
                             </Typography>
                         }
                     </Box>
                 </Tooltip>
             </Box>
-            <Typography variant="caption" sx={{ mb: 1, color: '#767676', display: 'block', fontSize: '16px', mt: 0, paddingLeft: '10px', fontFamily: "'BC Sans', 'Noto Sans',  Arial, sans-serif" }}>
+            <Typography variant="caption" sx={{ mb: 1, color: '#767676', display: 'block', fontSize: '1.5vw', mt: 0, paddingLeft: '10px', fontFamily: "'BC Sans', 'Noto Sans',  Arial, sans-serif" }}>
                 {helperText}
             </Typography>
         </Box>

web_app/src/app/components/GeneratePDF.tsx

@@ -9,43 +9,43 @@ type props = {
 export const generatePDF = async (value: props[], headerText:string): Promise<jsPDF | null> => {
     const doc = new jsPDF("p", "mm", "a4", true);
 
-    const totalPages : number = value.at(value.length - 1)?.pageNumber as number ;
-
-    for (let i = 1; i <= totalPages; i++) {
-
-        const imgWidth = 190;
-        const pageHeight = 295;
-        const margin = 15;
-        //Add header
-        doc.setFontSize(10);
-        doc.text(headerText, 15, 10);
-        doc.setLineWidth(0.5);
-        doc.line(15, 15, doc.internal.pageSize.getWidth() - 15, 15);
-
-        //Add footer
-        const footerText = `${i}/${totalPages}`;
-        doc.text(headerText, 15, pageHeight - 10);
-        doc.text(footerText, doc.internal.pageSize.getWidth() - 15 - doc.getStringUnitWidth(footerText) * doc.getFontSize() / 2, pageHeight - 10);
-        doc.line(15, pageHeight - 20, doc.internal.pageSize.getWidth() - 15, pageHeight - 20);
-
-        let yPosition = 20;
-        for (const element of value) {
-            if (element.pageNumber === i) {                
-                const content = document.getElementById(element.id);
-                const canvas = await html2canvas(content as HTMLElement);
-                const img = canvas.toDataURL("image/png", 1.0);
+    // const totalPages : number = value.at(value.length - 1)?.pageNumber as number ;
+
+    // for (let i = 1; i <= totalPages; i++) {
+
+    //     const imgWidth = 190;
+    //     const pageHeight = 295;
+    //     const margin = 15;
+    //     //Add header
+    //     doc.setFontSize(10);
+    //     doc.text(headerText, 15, 10);
+    //     doc.setLineWidth(0.5);
+    //     doc.line(15, 15, doc.internal.pageSize.getWidth() - 15, 15);
+
+    //     //Add footer
+    //     const footerText = `${i}/${totalPages}`;
+    //     doc.text(headerText, 15, pageHeight - 10);
+    //     doc.text(footerText, doc.internal.pageSize.getWidth() - 15 - doc.getStringUnitWidth(footerText) * doc.getFontSize() / 2, pageHeight - 10);
+    //     doc.line(15, pageHeight - 20, doc.internal.pageSize.getWidth() - 15, pageHeight - 20);
+
+    //     let yPosition = 20;
+    //     for (const element of value) {
+    //         if (element.pageNumber === i) {                
+    //             const content = document.getElementById(element.id);
+    //             const canvas = await html2canvas(content as HTMLElement);
+    //             const img = canvas.toDataURL("image/png", 1.0);
 
-                const imgHeight = canvas.height * imgWidth / canvas.width;
-                if (img !== 'data:,') {
-                        doc.addImage(img, 'PNG', margin, yPosition, imgWidth, imgHeight);
-                        yPosition += imgHeight + 5;    
-                }
-            }
-        }
-
-        if (i !== totalPages)
-            doc.addPage();
-
-    }    
+    //             const imgHeight = canvas.height * imgWidth / canvas.width;
+    //             if (img !== 'data:,') {
+    //                     doc.addImage(img, 'PNG', margin, yPosition, imgWidth, imgHeight);
+    //                     yPosition += imgHeight + 5;    
+    //             }
+    //         }
+    //     }
+
+    //     if (i !== totalPages)
+    //         doc.addPage();
+
+    // }    
     return doc;
 }

web_app/src/app/components/PDFGenerator.tsx

@@ -0,0 +1,57 @@
+'use client';
+import { jsPDF } from 'jspdf';
+import dynamic from 'next/dynamic';
+
+const html2pdf = dynamic(() => import('html2pdf.js'), { ssr: false }) as unknown as typeof import('html2pdf.js');
+
+interface PdfOptions {
+    margin?: number;
+    filename?: string;
+    image?: { type: string; quality: number };
+    html2canvas?: { scale: number };
+    jsPDF?: { unit: string; format: string; orientation: string, compress: boolean, putOnlyUsedFonts: boolean };
+    pagebreak?: { mode: string[] };
+}
+
+const generatePDFWithHeaderFooter = (element: HTMLElement, title: string) => {
+    if (typeof window === 'undefined') {
+        throw new Error('This function can only be run in the browser.');
+    }
+
+    const defaultOptions: PdfOptions = {
+        margin: 15,
+        filename: 'document.pdf',
+        image: { type: 'jpeg', quality: 0.98 },
+        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait', compress: true, putOnlyUsedFonts: true },
+        pagebreak: { mode: ['avoid-all', 'css', 'legacy'] },
+
+    };
+
+    return html2pdf.default().from(element).set(defaultOptions).toPdf().get('pdf').then((pdf: jsPDF) => {
+        const totalPages = pdf.internal.pages;
+        console.log("pages are: " + totalPages.length );
+        for (let i = 1; i < totalPages.length; i++) {
+            pdf.setPage(i);
+            const pageHeight = pdf.internal.pageSize.getHeight();
+            const pageWidth = pdf.internal.pageSize.getWidth();
+            const margin = 15;
+
+            // Add header
+            pdf.setFontSize(9);
+            pdf.text(title, margin + 1, 10);
+            pdf.setLineWidth(0.3);
+            pdf.line(margin, 12, pageWidth - margin, 12);
+
+            // Add footer
+            const footerText = `${i}/${totalPages.length}`;
+            pdf.text(title, margin + 1, pageHeight - 10);
+            pdf.text(footerText, pageWidth - margin - pdf.getStringUnitWidth(footerText) * pdf.getFontSize() / 2, pageHeight - 10);
+            pdf.line(margin, pageHeight - 15, pageWidth - margin, pageHeight - 15);
+        }
+        const file = pdf?.output('blob');
+        console.log("pdf file gen size:", file?.size);
+        //pdf.save(); //for testing to save the file before sending email
+        return file;
+    });
+}
+export default generatePDFWithHeaderFooter;

web_app/src/app/components/ProhibitionNumber.tsx

@@ -76,7 +76,7 @@ const ProhibitionNumber: React.FC<Props> = ({ onProhibitionDataChange }) => {
                         value={controlProhibitionNumber} onChange={handleChange} onBlur={validateField}>
                     </TextField></FormField>
                 <div style={{ marginTop: '-30px', marginBottom: '30px' }}>
-                    <Typography sx={{ color: '#313132', fontSize: '16px', fontWeight: '700', mt: '10px', ml: '10px', paddingBottom: '10px' }}>(optional)</Typography>
+                    <Typography sx={{ color: '#313132', fontSize: '1.5vw', fontWeight: '700', mt: '10px', ml: '10px', paddingBottom: '10px' }}>(optional)</Typography>
 
                     <Image src="/assets/images/Combo prohibition no.png" width={280}
                         height={180}

web_app/src/app/components/html2pdf.d.ts

@@ -0,0 +1,4 @@
+declare module 'html2pdf.js' {
+    const html2pdf: any;
+    export default html2pdf;
+}

web_app/src/app/components/jspdf.d.ts

@@ -0,0 +1,15 @@
+// // src/types/jspdf.d.ts
+// import { jsPDF } from 'jspdf';
+
+// declare module 'jspdf' {
+//     interface jsPDF {
+//         internal: {
+//             getNumberOfPages: () => number;
+//             pageSize: {
+//                 width: number;
+//                 height: number;
+//             };
+//             [key: string]: any; // Add this line to allow other properties
+//         };
+//     }
+// }

web_app/src/app/components/step4.tsx

@@ -69,7 +69,7 @@ const Step4 = forwardRef((props: Props, ref) => {
     return (
         <div style={{ display: 'grid' }} id="page5">
             <div>
-                <span style={{ fontSize: '16px', paddingLeft: '15px' }} > <strong>By typing your name below and submitting this form, you confirm the information you provide above is correct. </strong></span>
+                <span style={{ fontSize: '1.5vw', paddingLeft: '15px' }} > <strong>By typing your name below and submitting this form, you confirm the information you provide above is correct. </strong></span>
             </div>
             <FormField 
                 id="signature-applicant-name"
@@ -103,7 +103,7 @@ const Step4 = forwardRef((props: Props, ref) => {
                 </LocalizationProvider>
             </FormField>
 
-            <p style={{ paddingTop: '15px', fontSize: '16px', }}>The personal information is collected under <a href="https://www.bclaws.ca/civix/document/id/complete/statreg/96165_03#section26" rel="noopener" target="_blank">s.26 (a) and (c)</a> of the Freedom of Information and Protection of Privacy Act for the purpose of administering the Motor Vehicle Act. If you have any questions about the collection, use and disclosure of the information collected contact RoadSafetyBC at PO Box 9254 Stn Prov Govt, Victoria, BC V8W 9J2. Phone (250) 387-7747.</p>
+            <p style={{ paddingTop: '15px', fontSize: '1.5vw', }}>The personal information is collected under <a href="https://www.bclaws.ca/civix/document/id/complete/statreg/96165_03#section26" rel="noopener" target="_blank">s.26 (a) and (c)</a> of the Freedom of Information and Protection of Privacy Act for the purpose of administering the Motor Vehicle Act. If you have any questions about the collection, use and disclosure of the information collected contact RoadSafetyBC at PO Box 9254 Stn Prov Govt, Victoria, BC V8W 9J2. Phone (250) 387-7747.</p>
 
         </div>