feat: add declaration PDF generation and download (#2904) (#2910)

Co-authored-by: Gary van Woerkens <gary.van-woerkens@sg.social.gouv.fr>

Author: LucasCharrier

.claude/hooks/block-bad-patterns.sh

@@ -42,10 +42,11 @@ check_pattern '\.(ts|tsx|js|jsx)$' \
   'biome-ignore|eslint-disable|@ts-ignore|@ts-expect-error' \
   'Suppression comments are forbidden. Fix the underlying issue instead.'
 
-# Inline styles — JSX files only
+# Inline styles — JSX files only (exclude @react-pdf/renderer components which require style={})
 check_pattern '\.(tsx|jsx)$' \
   'style=\{' \
-  'Inline style={{}} is forbidden. Use DSFR classes or a scoped SCSS module.'
+  'Inline style={{}} is forbidden. Use DSFR classes or a scoped SCSS module.' \
+  'declarationPdf/'
 
 # Inline SVG — JSX files only (DsfrPictogram is the only allowed SVG wrapper)
 check_pattern '\.(tsx|jsx)$' \

packages/app/next.config.js

@@ -9,6 +9,7 @@ import { withSentryConfig } from "@sentry/nextjs";
 /** @type {import("next").NextConfig} */
 const config = {
 	output: "standalone",
+	serverExternalPackages: ["@react-pdf/renderer"],
 	sassOptions: {
 		additionalData: `
 			@import "@gouvfr/dsfr/src/dsfr/core/style/selector/setting/breakpoint";

packages/app/package.json

@@ -31,6 +31,7 @@
 	"dependencies": {
 		"@auth/drizzle-adapter": "^1.11.1",
 		"@gouvfr/dsfr": "^1.14.3",
+		"@react-pdf/renderer": "^4.3.2",
 		"@sentry/nextjs": "^10.39.0",
 		"@socialgouv/matomo-next": "^1.11.0",
 		"@t3-oss/env-nextjs": "^0.13.10",

packages/app/src/app/api/declaration-pdf/route.ts

@@ -0,0 +1,30 @@
+import { renderToBuffer } from "@react-pdf/renderer";
+import { buildPdfData } from "~/modules/declarationPdf/buildPdfData";
+import { DeclarationPdfDocument } from "~/modules/declarationPdf/DeclarationPdfDocument";
+import { auth } from "~/server/auth";
+
+export async function GET() {
+	const session = await auth();
+	if (!session?.user?.siret) {
+		return new Response("Non autorisé", { status: 401 });
+	}
+
+	const siren = session.user.siret.slice(0, 9);
+	const year = new Date().getFullYear();
+
+	try {
+		const data = await buildPdfData(siren, year, new Date());
+		const buffer = await renderToBuffer(DeclarationPdfDocument({ data }));
+		const filename = `declaration-remuneration-${siren}-${year}.pdf`;
+
+		return new Response(new Uint8Array(buffer), {
+			headers: {
+				"Content-Type": "application/pdf",
+				"Content-Disposition": `attachment; filename="${filename}"`,
+			},
+		});
+	} catch (error) {
+		console.error("[declaration-pdf]", error);
+		return new Response("Impossible de générer le PDF", { status: 400 });
+	}
+}

packages/app/src/modules/declaration-remuneration/index.ts

@@ -2,13 +2,20 @@ export { DeclarationIntro } from "./DeclarationIntro";
 export { DeclarationLayout } from "./DeclarationLayout";
 export { MissingSiret } from "./MissingSiret";
 export { StepPageClient } from "./StepPageClient";
+export {
+	computeGap,
+	computePercentage,
+	formatCurrency,
+	formatGap,
+	gapLevel,
+} from "./shared/gapUtils";
 export { Step1Workforce } from "./steps/Step1Workforce";
 export { Step2PayGap } from "./steps/Step2PayGap";
 export { Step3VariablePay } from "./steps/Step3VariablePay";
 export { Step4QuartileDistribution } from "./steps/Step4QuartileDistribution";
 export { Step5EmployeeCategories } from "./steps/Step5EmployeeCategories";
 export { Step6Review } from "./steps/Step6Review";
-
+export { parseStep5Categories } from "./steps/step6/parseStep5Categories";
 export type {
 	CategoryData,
 	PayGapRow,

packages/app/src/modules/declaration-remuneration/steps/Step6Review.tsx

@@ -3,6 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useCallback, useRef } from "react";
 
+import { DownloadDeclarationPdfButton } from "~/modules/declarationPdf";
 import { api } from "~/trpc/react";
 import common from "../shared/common.module.scss";
 import { FormActions } from "../shared/FormActions";
@@ -243,6 +244,8 @@ export function Step6Review({
 				)}
 			</div>
 
+			{isSubmitted && <DownloadDeclarationPdfButton />}
+
 			{isSubmitted ? (
 				<FormActions
 					nextHref="/avis-cse"

packages/app/src/modules/declaration-remuneration/steps/__tests__/Step6Review.test.tsx

@@ -2,6 +2,12 @@ import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { Step6Review } from "../Step6Review";
 
+vi.mock("~/modules/declarationPdf", () => ({
+	DownloadDeclarationPdfButton: () => (
+		<a href="/api/declaration-pdf">Télécharger le récapitulatif (PDF)</a>
+	),
+}));
+
 const mockSubmitMutate = vi.fn();
 
 vi.mock("~/trpc/react", () => ({
@@ -266,4 +272,18 @@ describe("Step6Review", () => {
 			"/avis-cse",
 		);
 	});
+
+	it("renders PDF download button when submitted", () => {
+		render(<Step6Review isSubmitted />);
+		expect(
+			screen.getByRole("link", { name: /télécharger le récapitulatif/i }),
+		).toHaveAttribute("href", "/api/declaration-pdf");
+	});
+
+	it("does not render PDF download button when not submitted", () => {
+		render(<Step6Review />);
+		expect(
+			screen.queryByRole("link", { name: /télécharger le récapitulatif/i }),
+		).not.toBeInTheDocument();
+	});
 });

packages/app/src/modules/declarationPdf/DeclarationPdfDocument.tsx

@@ -0,0 +1,41 @@
+import { Document, Page, Text, View } from "@react-pdf/renderer";
+
+import { styles } from "./pdfStyles";
+import { CategorySection } from "./sections/CategorySection";
+import { PayGapTable } from "./sections/PayGapTable";
+import { QuartileSection } from "./sections/QuartileSection";
+import { VariablePaySection } from "./sections/VariablePaySection";
+import { WorkforceSection } from "./sections/WorkforceSection";
+import type { DeclarationPdfData } from "./types";
+
+type Props = {
+	data: DeclarationPdfData;
+};
+
+export function DeclarationPdfDocument({ data }: Props) {
+	return (
+		<Document>
+			<Page size="A4" style={styles.page}>
+				<View style={styles.header}>
+					<Text style={styles.title}>
+						Déclaration des indicateurs de rémunération {data.year}
+					</Text>
+					<Text style={styles.subtitle}>
+						Au titre des données {data.year - 1}
+					</Text>
+					<Text style={styles.companyInfo}>
+						{data.companyName} — SIREN {data.siren}
+					</Text>
+				</View>
+
+				<WorkforceSection data={data} />
+				<PayGapTable rows={data.step2Rows} title="Écart de rémunération" />
+				<VariablePaySection data={data} />
+				<QuartileSection data={data} />
+				<CategorySection data={data} />
+
+				<Text style={styles.footer}>Document généré le {data.generatedAt}</Text>
+			</Page>
+		</Document>
+	);
+}

packages/app/src/modules/declarationPdf/DownloadDeclarationPdfButton.tsx

@@ -0,0 +1,11 @@
+export function DownloadDeclarationPdfButton() {
+	return (
+		<a
+			className="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-file-pdf-line"
+			download
+			href="/api/declaration-pdf"
+		>
+			Télécharger le récapitulatif (PDF)
+		</a>
+	);
+}