[Feat]: Implement Productivity Report PDF Export #3659
Conversation
- Create new ProductivityApplicationPDF component for report generation - Implement ExportDialog with PDF and XLSX export options - Add PDF report layout with proper data grouping by application - Configure web-hosted Helvetica font for reliable rendering - Optimize table layout for better data presentation - Include report header with title and generation date This change introduces a complete PDF export feature for productivity reports, allowing users to download well-formatted activity summaries grouped by application.
|
Akim seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account. You have signed the CLA already but the status is still pending? Let us recheck it. |
WalkthroughThis pull request introduces a new React component for generating PDF reports of productivity activities and updates export-related functionality. A new file implements a PDF generator using the @react-pdf/renderer library. The export dialog is refactored to extract button rendering logic, and state management is updated in the dashboard header with stricter export type definitions. Additionally, the duration formatting function is made exportable, and the conditional rendering of empty task messages is refined based on the current tab state. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant DH as DashboardHeader
participant ED as ExportDialog
participant EB as ExportButtons
participant PDF as PDF Component
U->>DH: Select export type ('pdf')
DH->>ED: Update state & open export dialog with type 'pdf'
ED->>EB: Render export buttons based on exportType and groupByType
EB->>PDF: Conditionally render ProductivityApplicationPDF
PDF-->>ED: Return generated PDF document
ED->>U: Provide PDF download link
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
apps/web/app/[locale]/dashboard/app-url/components/productivity-application/Productivity-applicationPDF.tsxOops! Something went wrong! :( ESLint: 8.46.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/apps/web/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/dashboard-header.tsxOops! Something went wrong! :( ESLint: 8.46.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/apps/web/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. apps/web/app/[locale]/dashboard/app-url/components/productivity-application/ProductivityApplicationTable.tsxOops! Something went wrong! :( ESLint: 8.46.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/apps/web/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
apps/web/app/[locale]/dashboard/app-url/components/productivity-application/Productivity-applicationPDF.tsx (3)
13-16: Consider bundling the font or using a fallback strategy.Relying on an external font URL creates a dependency that could fail if the URL becomes unavailable.
Consider one of these approaches:
- Bundle the font with your application
- Implement a fallback mechanism:
Font.register({ family: 'Helvetica', src: 'https://fonts.gstatic.com/s/helveticaneue/v70/1Ptsg8zYS_SKggPNyC0IT0kLW-43aMEzIO6XUTLjad8.ttf', + fallback: 'Helvetica' });
1-1: File naming inconsistency.The filename "Productivity-applicationPDF.tsx" uses inconsistent capitalization. React component files typically use PascalCase throughout.
Consider renaming the file to "ProductivityApplicationPDF.tsx" for consistency with naming conventions.
134-138: Use a more consistent date formatting approach.You're using two different date formatting methods in the same component: here with
toLocaleDateString()and elsewhere with theformat()function from date-fns.For consistency, consider using date-fns throughout:
- const today = new Date().toLocaleDateString('en-US', { - year: 'numeric', - month: 'long', - day: 'numeric' - }); + const today = format(new Date(), 'MMMM dd, yyyy');
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/web/app/[locale]/dashboard/app-url/components/productivity-application/Productivity-applicationPDF.tsx(1 hunks)apps/web/app/[locale]/dashboard/app-url/components/productivity-application/ProductivityApplicationTable.tsx(1 hunks)apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/dashboard-header.tsx(1 hunks)apps/web/components/ui/export-dialog.tsx(1 hunks)apps/web/lib/features/user-profile-tasks.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: deploy
🔇 Additional comments (9)
apps/web/lib/features/user-profile-tasks.tsx (1)
132-132: Improved conditional rendering for empty state.This change properly handles the empty state by showing the EmptyPlans component only when there are no tasks to display and the current tab is not the 'stats' tab. This ensures that the stats tab won't display the empty tasks message, which makes sense since that tab is meant to show statistics rather than tasks.
apps/web/app/[locale]/dashboard/app-url/components/productivity-application/ProductivityApplicationTable.tsx (1)
205-205: Good refactoring to export the formatDuration function.Making this function exportable allows it to be reused in other components, specifically in the new ProductivityApplicationPDF component. This promotes code reuse and maintains consistency in duration formatting across the application.
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/dashboard-header.tsx (2)
36-36: Improved type safety for export type state.Changing from a generic string to a specific union type improves type safety by restricting the possible values to only valid export types.
38-38: Improved type safety for handleExportSelect parameter.Using the union type for the function parameter ensures that only valid export types can be passed to the function, which aligns with the state type and prevents potential errors.
apps/web/app/[locale]/dashboard/app-url/components/productivity-application/Productivity-applicationPDF.tsx (1)
1-216: Well-structured PDF export implementation for productivity reports.The component successfully implements PDF export functionality using @react-pdf/renderer, with good organization of data by application and clear visual presentation.
apps/web/components/ui/export-dialog.tsx (4)
16-17: LGTM: Appropriate import additionsThe imports for
GroupByTypeandProductivityApplicationPDFare correctly added to support the new PDF export functionality.
21-22: LGTM: Improved type safety in ExportDialogPropsGood improvements to the interface:
- Making
onCloseoptional provides more flexibility- Using a union type for
exportTypeensures type safety- Adding the optional
groupByTypeprop supports the new report grouping functionalityAlso applies to: 24-24
27-38: LGTM: Well-structured report title mappingThe
getReportTitlefunction is well-implemented with:
- A default parameter value
- Type-safe mapping using Record
- A fallback return value for unexpected cases
76-95: LGTM: Clean component refactoringThe
ExportDialogcomponent has been nicely refactored to:
- Use the new
ExportButtonscomponent- Pass all necessary props correctly
- Maintain a clean and readable structure
...ocale]/dashboard/app-url/components/productivity-application/Productivity-applicationPDF.tsx
Show resolved
Hide resolved
|
@Innocent-Akim can you check why it suggest that CAA not signed? #3659 (comment) |
#3416
This change introduces a complete PDF export feature for productivity reports, allowing users to download well-formatted activity summaries grouped by application.
Description
Please include a summary of the changes and the related issues.
Type of Change
Checklist
Previous screenshots
Please add here videos or images of the previous status
Current screenshots
Please add here videos or images of the current (new) status
Summary by CodeRabbit
New Features
Enhancements