---

name: pdf-reporting-patterns description: Technical patterns for generating professional PDF reports and documentation for heat pump surveys.

PDF Reporting Patterns

Professional documentation is the final "product" for the customer and the office. This skill covers how to generate these PDFs within Digital Befaring.

Recommended Tooling

• react-pdf/renderer: Best for shared components between web and PDF. Supports styling and easy layout.
• jsPDF / html2canvas: For quick "export what I see" functionality, though less professional for high-quality reports.
• Pupeteer/Playwright (Server-side): Most robust for complex layouts, but requires more infrastructure.

Report Structure (Digital Befaring)

A standard "Befaringsrapport" should include:

1. Header & Branding

• Company Logo (Bergen Inneklima).
• Report Date & ID.
• Customer Name & Address.

2. Survey Summary

• Technician Name.
• Planned Installation Date.
• Recommended Model (e.g., Mitsubishi Kaiteki 6600).

3. Technical Specs

• Wall type, pipe length, electrical requirements.
• Visual floor plan or placement diagrams.

4. Photos & Annotations

• Before/After visualization (if applicable).
• Critical spots for outdoor/indoor unit placement.

Design Best Practices

• Typography: Use the same fonts as the web app (Outfit/Inter) for brand consistency.
• Page Breaks: Ensure technical specs and photos don't get split across pages awkwardly.
• File Size: Balance high-resolution photos with manageable file sizes (optimize images before embedding).

Implementation Flow

1. Server Action: Fetch all survey data from Prisma.
2. Template: Render the data using a react-pdf template.
3. Stream: Send the PDF stream back to the client or save to S3/Storage.
4. Email: Trigger automatic email dispatch to the customer with the PDF attached.