feat(reports): migrate 4 reports from pdfme to react-pdf
Phase 1 / commits 3-6 of 14 — bundled because every report follows the
same conversion pattern (coordinate-stuffed pdfme template -> JSX brand
kit). Each report now has a real header (logo + port name), structured
KeyValueGrid for summary stats, a chart (BarChart / FunnelChart / PieChart
/ LineChart-ready), and a DataTable for detail rows.
Templates:
activity-report.tsx bar chart of events-per-day, summary KPIs, top
actions table, recent-events table (50 rows)
revenue-report.tsx bar chart of revenue per stage, breakdown table
with totals row, currency-aware formatting
pipeline-report.tsx funnel chart of interests per stage, top interests
table, win rate / cycle KPIs
occupancy-report.tsx donut pie of berth status mix, status breakdown
table with percentages, occupancy rate KPI
reports.service.tsx (renamed .ts -> .tsx for JSX):
- swap REPORT_TYPE_MAP `template`/`buildInputs` for a single `render`
function returning a typed react-pdf element
- inject port logo via resolvePortLogo() and pass through to every
template through a ReportContext object
- keep the existing job queue / storage / file-row / socket-emit
flow intact — only the inner PDF-bytes generation changed
Old pdfme files deleted (4 templates). buildStoragePath / files-table
insert / notifications / status updates all unchanged.
Tests:
tests/unit/report-templates.test.tsx (5 tests): each report renders
to valid PDF bytes given a representative seed-style fixture; empty
data path doesn't throw.
1313/1313 vitest green.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-12 20:55:07 +02:00
|
|
|
import { describe, expect, it } from 'vitest';
|
|
|
|
|
|
|
|
|
|
import { renderPdf } from '@/lib/pdf/render';
|
|
|
|
|
import { ActivityReportPdf } from '@/lib/pdf/templates/reports/activity-report';
|
|
|
|
|
import { OccupancyReportPdf } from '@/lib/pdf/templates/reports/occupancy-report';
|
|
|
|
|
import { PipelineReportPdf } from '@/lib/pdf/templates/reports/pipeline-report';
|
|
|
|
|
import { RevenueReportPdf } from '@/lib/pdf/templates/reports/revenue-report';
|
|
|
|
|
|
|
|
|
|
const PORT_NAME = 'Port Test';
|
|
|
|
|
|
|
|
|
|
describe('report templates render', () => {
|
|
|
|
|
it('activity report renders with logs + summary', async () => {
|
|
|
|
|
const bytes = await renderPdf(
|
|
|
|
|
<ActivityReportPdf
|
|
|
|
|
portName={PORT_NAME}
|
|
|
|
|
logoBuffer={null}
|
|
|
|
|
data={{
|
|
|
|
|
logs: Array.from({ length: 30 }, (_, i) => ({
|
|
|
|
|
id: `id-${i}`,
|
|
|
|
|
action: i % 3 === 0 ? 'create' : i % 3 === 1 ? 'update' : 'delete',
|
|
|
|
|
entityType: i % 2 === 0 ? 'client' : 'berth',
|
|
|
|
|
entityId: `e-${i}`,
|
|
|
|
|
userId: `user-${i % 3}`,
|
|
|
|
|
createdAt: new Date(2026, 4, (i % 28) + 1),
|
|
|
|
|
})),
|
|
|
|
|
summary: { create: 10, update: 10, delete: 10 },
|
|
|
|
|
generatedAt: new Date().toISOString(),
|
|
|
|
|
}}
|
|
|
|
|
/>,
|
|
|
|
|
);
|
|
|
|
|
expect(bytes.subarray(0, 5).toString('utf8')).toBe('%PDF-');
|
|
|
|
|
expect(bytes.length).toBeGreaterThan(2000);
|
|
|
|
|
}, 30_000);
|
|
|
|
|
|
|
|
|
|
it('revenue report renders with multi-stage breakdown', async () => {
|
|
|
|
|
const bytes = await renderPdf(
|
|
|
|
|
<RevenueReportPdf
|
|
|
|
|
portName={PORT_NAME}
|
|
|
|
|
logoBuffer={null}
|
|
|
|
|
data={{
|
|
|
|
|
stageRevenue: {
|
2026-05-14 15:19:38 +02:00
|
|
|
enquiry: '12345.67',
|
|
|
|
|
eoi: '54321.00',
|
|
|
|
|
contract: '98765.43',
|
feat(reports): migrate 4 reports from pdfme to react-pdf
Phase 1 / commits 3-6 of 14 — bundled because every report follows the
same conversion pattern (coordinate-stuffed pdfme template -> JSX brand
kit). Each report now has a real header (logo + port name), structured
KeyValueGrid for summary stats, a chart (BarChart / FunnelChart / PieChart
/ LineChart-ready), and a DataTable for detail rows.
Templates:
activity-report.tsx bar chart of events-per-day, summary KPIs, top
actions table, recent-events table (50 rows)
revenue-report.tsx bar chart of revenue per stage, breakdown table
with totals row, currency-aware formatting
pipeline-report.tsx funnel chart of interests per stage, top interests
table, win rate / cycle KPIs
occupancy-report.tsx donut pie of berth status mix, status breakdown
table with percentages, occupancy rate KPI
reports.service.tsx (renamed .ts -> .tsx for JSX):
- swap REPORT_TYPE_MAP `template`/`buildInputs` for a single `render`
function returning a typed react-pdf element
- inject port logo via resolvePortLogo() and pass through to every
template through a ReportContext object
- keep the existing job queue / storage / file-row / socket-emit
flow intact — only the inner PDF-bytes generation changed
Old pdfme files deleted (4 templates). buildStoragePath / files-table
insert / notifications / status updates all unchanged.
Tests:
tests/unit/report-templates.test.tsx (5 tests): each report renders
to valid PDF bytes given a representative seed-style fixture; empty
data path doesn't throw.
1313/1313 vitest green.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-12 20:55:07 +02:00
|
|
|
},
|
|
|
|
|
totalCompleted: '111000.00',
|
2026-05-14 15:19:38 +02:00
|
|
|
totalForecast: '87650.00',
|
|
|
|
|
pipelineWeights: { enquiry: 0.05, eoi: 0.4, contract: 0.95 },
|
feat(reports): migrate 4 reports from pdfme to react-pdf
Phase 1 / commits 3-6 of 14 — bundled because every report follows the
same conversion pattern (coordinate-stuffed pdfme template -> JSX brand
kit). Each report now has a real header (logo + port name), structured
KeyValueGrid for summary stats, a chart (BarChart / FunnelChart / PieChart
/ LineChart-ready), and a DataTable for detail rows.
Templates:
activity-report.tsx bar chart of events-per-day, summary KPIs, top
actions table, recent-events table (50 rows)
revenue-report.tsx bar chart of revenue per stage, breakdown table
with totals row, currency-aware formatting
pipeline-report.tsx funnel chart of interests per stage, top interests
table, win rate / cycle KPIs
occupancy-report.tsx donut pie of berth status mix, status breakdown
table with percentages, occupancy rate KPI
reports.service.tsx (renamed .ts -> .tsx for JSX):
- swap REPORT_TYPE_MAP `template`/`buildInputs` for a single `render`
function returning a typed react-pdf element
- inject port logo via resolvePortLogo() and pass through to every
template through a ReportContext object
- keep the existing job queue / storage / file-row / socket-emit
flow intact — only the inner PDF-bytes generation changed
Old pdfme files deleted (4 templates). buildStoragePath / files-table
insert / notifications / status updates all unchanged.
Tests:
tests/unit/report-templates.test.tsx (5 tests): each report renders
to valid PDF bytes given a representative seed-style fixture; empty
data path doesn't throw.
1313/1313 vitest green.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-12 20:55:07 +02:00
|
|
|
generatedAt: new Date().toISOString(),
|
|
|
|
|
}}
|
|
|
|
|
currency="USD"
|
|
|
|
|
/>,
|
|
|
|
|
);
|
|
|
|
|
expect(bytes.subarray(0, 5).toString('utf8')).toBe('%PDF-');
|
|
|
|
|
}, 30_000);
|
|
|
|
|
|
|
|
|
|
it('pipeline report renders funnel + top interests', async () => {
|
|
|
|
|
const bytes = await renderPdf(
|
|
|
|
|
<PipelineReportPdf
|
|
|
|
|
portName={PORT_NAME}
|
|
|
|
|
logoBuffer={null}
|
|
|
|
|
data={{
|
|
|
|
|
stageCounts: {
|
|
|
|
|
open: 50,
|
|
|
|
|
details_sent: 30,
|
|
|
|
|
eoi_sent: 20,
|
|
|
|
|
eoi_signed: 10,
|
|
|
|
|
completed: 5,
|
|
|
|
|
},
|
|
|
|
|
topInterests: Array.from({ length: 8 }, (_, i) => ({
|
|
|
|
|
id: `i-${i}`,
|
|
|
|
|
clientId: `client-${i.toString().padStart(8, '0')}`,
|
|
|
|
|
pipelineStage: 'eoi_sent',
|
|
|
|
|
berthPrice: String(50000 + i * 5000),
|
|
|
|
|
})),
|
|
|
|
|
generatedAt: new Date().toISOString(),
|
|
|
|
|
}}
|
|
|
|
|
/>,
|
|
|
|
|
);
|
|
|
|
|
expect(bytes.subarray(0, 5).toString('utf8')).toBe('%PDF-');
|
|
|
|
|
}, 30_000);
|
|
|
|
|
|
|
|
|
|
it('occupancy report renders pie + status table', async () => {
|
|
|
|
|
const bytes = await renderPdf(
|
|
|
|
|
<OccupancyReportPdf
|
|
|
|
|
portName={PORT_NAME}
|
|
|
|
|
logoBuffer={null}
|
|
|
|
|
data={{
|
|
|
|
|
statusCounts: {
|
|
|
|
|
available: 42,
|
|
|
|
|
under_offer: 12,
|
|
|
|
|
sold: 38,
|
|
|
|
|
reserved: 3,
|
|
|
|
|
maintenance: 2,
|
|
|
|
|
},
|
|
|
|
|
occupancyRate: 0.42,
|
|
|
|
|
totalBerths: 97,
|
|
|
|
|
generatedAt: new Date().toISOString(),
|
|
|
|
|
}}
|
|
|
|
|
/>,
|
|
|
|
|
);
|
|
|
|
|
expect(bytes.subarray(0, 5).toString('utf8')).toBe('%PDF-');
|
|
|
|
|
}, 30_000);
|
|
|
|
|
|
|
|
|
|
it('all reports gracefully handle empty data', async () => {
|
|
|
|
|
const empty = await renderPdf(
|
|
|
|
|
<ActivityReportPdf
|
|
|
|
|
portName={PORT_NAME}
|
|
|
|
|
logoBuffer={null}
|
|
|
|
|
data={{ logs: [], summary: {}, generatedAt: new Date().toISOString() }}
|
|
|
|
|
/>,
|
|
|
|
|
);
|
|
|
|
|
expect(empty.length).toBeGreaterThan(500);
|
|
|
|
|
}, 30_000);
|
|
|
|
|
});
|