Monthly PDF Reporting Tool — Workflow, Data Visualization, and PDF Generation
An internal tool supporting the creation of monthly client-facing PDF reports for a Tokyo-based sales team. The work included mapping a workflow that had been concentrated in the hands of one backend engineer and implementing a React-based UI covering data selection, chart preview, and multi-page PDF export. After testing the MVP with selected real reports, individual processing times indicated that a workflow taking up to ten working days could potentially be completed within a few hours.
Period: Apr 2022 – Mar 2023
Related Services:
Where this experience applies
This project involved organizing a workflow spread across SQL, Excel, and PowerPoint, then designing and implementing an internal tool that connected data retrieval, visualization, and document output.
- Structuring recurring work that requires substantial manual effort
- Turning specialist-dependent tasks into a repeatable workflow
- Connecting data selection, visualization, and PDF generation within one interface
- Designing an operational flow that could eventually be handed over to non-technical users
Overview
I led the frontend development of an internal tool for creating monthly client-facing PDF reports for a Tokyo-based sales team. I interviewed internal users and structured the existing workflow as a sequence covering data selection, chart preview, and multi-page PDF export. Alongside implementing the interface in React and TypeScript, I converted raw SQL queries into Prisma models, implemented data visualization with Chart.js, and selected and implemented Puppeteer for PDF generation.
Background
The sales team prepared tailored PDF reports for 20–30 clients every month. Each report ranged from 20 to 100 pages and required data from a large internal financial database, followed by manual preparation in PowerPoint and Excel. A single backend engineer handled this recurring task. In longer cases, the work took approximately ten working days each month. The computer was also occupied by report processing during this period, limiting the engineer’s ability to carry out other work in parallel.
Challenge
The project needed to turn a large, client-specific reporting workflow into a repeatable interface while preserving the content required for each report.
- Reporting logic and operational knowledge were distributed across SQL, PowerPoint, and Excel
- The workflow covered 20–30 clients each month, with reports ranging from 20 to 100 pages
- The work depended heavily on one backend engineer
- Report creation could take approximately ten working days and affected other work during that period
- The workflow needed to support an eventual handoff to sales team members
- Client-specific content had to be maintained within a consistent visualization and PDF-generation process
Primary Users
- The backend engineer responsible for monthly report creation
- The manager reviewing the workflow and its output
- Sales team members considered as future operators of the tool
Approach
Understanding the Existing Workflow and Reporting Logic
I interviewed internal users and mapped the steps involved in retrieving financial data, selecting content, creating charts, preparing material in PowerPoint and Excel, and exporting the final PDF. This also required understanding the decisions and reporting logic embedded in SQL queries and spreadsheets.
Structuring the Interface and Required Information
Based on the workflow review, I organized report creation into a sequence of data selection, chart preview, and PDF export. The interface was designed to help users understand each stage while working with report content specific to each client.
Restructuring Data Access
I converted the existing raw SQL queries into Prisma models and prepared the financial data for use by the frontend. This moved data retrieval logic into a structure that could be managed within the application.
Implementing Visualization and PDF Generation
I built the interface with React, TypeScript, and Material UI, and implemented chart rendering with Chart.js. I selected Puppeteer and used it to generate multi-page PDFs from the content prepared and reviewed through the interface.
Testing with Real Reports
The MVP was tested with selected real reports to verify the workflow and the time required for individual processing steps. The backend engineer who had previously handled monthly reporting and the manager provided positive feedback on workflow clarity and the potential reduction in workload.
Aligning Implementation Across the Team
Using GitHub, Slack, and Jira, I coordinated API specifications, UX priorities, implementation details, and delivery progress with the relevant stakeholders. This required connecting the operational requirements of client reporting with frontend and backend implementation constraints.
Design & Implementation Highlights
Translating Operational Decisions into an Interface
I identified the decisions, checks, and output stages within the existing workflow and translated them into a sequence users could follow through the interface.
Connecting Data Processing with Interface Design
I reviewed the reporting logic contained in SQL and aligned the Prisma models, interface controls, chart rendering, and PDF output as one connected flow.
Supporting Client-Specific Content and Shared Operations
The tool needed to handle individual reports ranging from 20 to 100 pages while providing a reusable process for data selection, visualization, and export.
Preparing for Future Operational Handoff
Complex data processing was handled within the application, while the visible workflow was structured with future use by non-technical sales team members in mind.
Outcome
Report-production time
Up to approximately 10 working days → a few hours (estimate based on individual processing times during testing)
- Tested the MVP using selected real reports
- Structured previously distributed tasks into a connected interface from data selection through PDF export
- Received positive feedback from the backend engineer and manager on workflow clarity and potential workload reduction
- Built an MVP workflow designed to support eventual operation by non-technical sales team members
What the Project Involved
The project brought together reporting logic, internal user workflows, expectations for client-facing deliverables, data retrieval, interface design, and PDF generation as one operational system. My work included frontend development, converting raw SQL queries into Prisma models, and coordinating requirements with the backend engineer and manager. The result was an operable MVP grounded in the actual reporting workflow and tested with selected real reports.
Expected Operational Effects
Structuring the manual workflow was expected to support the following operational improvements.
- Make variation in manually produced reports easier to control
- Establish a shared process from data retrieval through PDF output
- Reduce the time for which the responsible engineer and computer are occupied by report production
- Make data consistency and output quality easier to manage across client-facing reports