feat: Add PDF export functionality for sustainability reports #64
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implements stakeholder-ready PDF export feature allowing users to download and share professional sustainability reports. ## Features Added **Frontend**: - Added "Export as PDF" button in sustainability tab header - Implemented base64-to-blob conversion for PDF download - Automatic file download with timestamp-based filename - Button shows loading state during PDF generation **Backend**: - New `GeneratePdfReport` method in `SustainabilityService` - Leverages existing Playwright infrastructure for PDF generation - Professional HTML template with embedded CSS - Includes carbon rating, metrics, resource breakdown (top 5 per category) - Color-coded rating badges and hosting status indicators **PDF Contents**: - Header: Page title, URL, generation timestamp - Hero section: Large carbon rating badge with color gradient - Metrics grid: CO₂ emissions, page weight, resource count, methodology - Resource breakdown: Tables showing top 5 resources per category - Footer: Xperience Community Sustainability branding, SWDM v4 link ## Technical Implementation - Uses Playwright's `page.PdfAsync()` with A4 format and 1.5cm margins - Returns PDF as base64 string via `PdfExportResult` record - Frontend converts base64 to Blob and triggers browser download - Reuses existing color schemes and rating descriptions - Proper HTML escaping for security (SecurityElement.Escape) - Print-optimized layout with embedded styles ## File Changes - `SustainabilityService.cs`: +170 lines (GeneratePdfReport + GeneratePdfHtml) - `ISustainabilityService.cs`: +1 line (interface method) - `SustainabilityTab.cs`: +30 lines (ExportReportAsPdf PageCommand) - `SustainabilityTabTemplate.tsx`: +28 lines (PDF download handler) - `types.ts`: +1 line (ExportReportAsPdf command) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Improve visual hierarchy and UX by adding appropriate icons to buttons: - "Export as PDF" → xp-download icon - "View History" → xp-clock icon - "Run New Analysis" → xp-rotate-right icon Buttons now have better visual affordance and follow XbyK design patterns. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Complete the icon coverage for all interactive buttons: - "Back to Current Report" → xp-arrow-left icon - "Load More History" → xp-chevron-down icon - "Show X more" / "Show less" → xp-chevron-down / xp-chevron-up icons (dynamic) All buttons now have consistent visual indicators that improve UX and follow Kentico admin UI design patterns. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add xp-file-pdf icon to Export PDF button - Add xp-clock icon to View History button - Add xp-rotate-right icon to Run New Analysis button - Add xp-arrow-left icon to Back to Current Report button - Add xp-chevron-down/up trailing icons to Load More History button - Add xp-chevron-down/up trailing icons to Show more/less buttons - Position expansion/pagination icons on right side using trailingIcon prop 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add manual isExportingPdf state to track PDF generation progress - Set disabled and inProgress props on Export as PDF button - Reset state in both after and onError callbacks - Document usePageCommand loading state pattern in CLAUDE.md - Clarify that usePageCommand does NOT provide built-in inProgress property - Add complete code example showing correct useState pattern - Reference existing implementations in codebase This ensures the Export as PDF button shows a spinner and prevents multiple clicks during PDF generation, matching the Run New Analysis button behavior. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove standalone Screenshots section - Embed main screenshot in Sustainability Report feature section - Embed history screenshot in Historical Tracking feature section - Update main sustainability report screenshot with new UI buttons (Export as PDF, View History, Run New Analysis with icons) - Add Report History screenshot showing trend charts and historical reports This improves documentation flow by placing screenshots directly in their relevant feature sections rather than separating them. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Document PDF export capability in Sustainability Report section - Clarify that reports can be downloaded as PDF for sharing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Update carbon rating text to match UI (e.g., "Extremely efficient" vs "Exceptional - Industry Leading") - Add "Carbon Rating" label and secondary descriptive text to hero section - Fix page title display: use WebPageItemName (display name) instead of ContentItemName (codename) - Improve PDF filename: include sanitized page title (max 50 chars) with timestamp - Add CSS page-break rules to prevent resource groups from splitting across pages - Add clickable GitHub repository link to PDF footer 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
The filename now just uses the page title and timestamp (e.g., "Coffee-Processing-Techniques-2025-11-25-143000.pdf") instead of the redundant "sustainability-report-" prefix. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Improves separation of concerns by moving PDF generation logic from SustainabilityService into a new SustainabilityPdfService. Changes: - Created ISustainabilityPdfService interface and implementation - Moved GeneratePdfReport and GeneratePdfHtml methods to new service - Registered ISustainabilityPdfService in DI container - Updated SustainabilityTab to inject and use ISustainabilityPdfService - Removed PDF generation methods from ISustainabilityService Benefits: - Single Responsibility: Each service has one clear purpose - Testability: PDF generation can be tested in isolation - Maintainability: PDF features are contained in dedicated service - Reduced complexity: SustainabilityService is now ~190 lines smaller 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Improves PDF layout by ensuring the Resource Breakdown section always starts cleanly at the top of page 2 using CSS page-break. Changes: - Added .resource-breakdown class with page-break-before: always - Removed margin-top from resource breakdown div (not needed with page break) - Keeps summary metrics clean on page 1, detailed breakdown on page 2+ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds PDF export functionality to the Sustainability tab, enabling users to download comprehensive sustainability reports as PDF documents. The implementation follows a clean separation of concerns by extracting PDF generation into a dedicated service, while maintaining consistent UI patterns for loading states and button interactions.
- Introduces
ISustainabilityPdfServicefor PDF generation using Playwright - Adds export button with proper loading states and icons to the Sustainability tab UI
- Enhances documentation with usage patterns for
usePageCommandand updated README structure
Reviewed changes
Copilot reviewed 11 out of 15 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/UIPages/SustainabilityTab/SustainabilityTab.cs | Adds ExportReportAsPdf command that retrieves report data and generates timestamped PDF files |
| src/Services/SustainabilityPdfService.cs | New service implementing PDF generation with HTML templating and Playwright rendering |
| src/Extensions/SustainabilityServiceCollectionExtensions.cs | Registers the new PDF service in DI container |
| src/Client/src/Sustainability/tab-template/SustainabilityTabTemplate.tsx | Implements PDF export UI with manual loading state management and file download |
| src/Client/src/Sustainability/tab-template/types.ts | Adds ExportReportAsPdf command constant |
| src/Client/src/Sustainability/tab-template/history/HistoryView.tsx | Adds chevron icon to Load More History button |
| src/Client/src/Sustainability/tab-template/current/ResourceGroupCard.tsx | Adds chevron icons to expand/collapse buttons |
| README.md | Restructures documentation with embedded screenshots and adds PDF export feature |
| CLAUDE.md | Documents usePageCommand loading state pattern to prevent future issues |
| .claude/agents/xbyk-component-reference.md | Updates agent color configuration |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/Client/src/Sustainability/tab-template/SustainabilityTabTemplate.tsx
Outdated
Show resolved
Hide resolved
Applies Copilot suggestions for code modernization: C# Changes: - Replace Substring(0, n) with range indexer [..n] syntax - More concise and idiomatic for .NET 8 TypeScript Changes: - Eliminate intermediate Array allocation in base64 to Uint8Array conversion - Directly create Uint8Array and populate in loop for better performance 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Adds PDF export functionality to the Sustainability tab, allowing users to download comprehensive sustainability reports as PDF documents for sharing and documentation.
Features
PDF Export
{PageName}-{Timestamp}.pdfUI Improvements
Code Quality
ISustainabilityPdfServicefor better separation of concernsusePageCommandloading state pattern to CLAUDE.md to prevent future issuesSustainabilityService, moved to focused PDF serviceDocumentation
PDF Content
The exported PDF includes:
Technical Details
Testing
Screenshots
See updated README for current screenshots showing:
🤖 Generated with Claude Code