Étape 20 : planches de badges bénévoles (PDF)

Recto personnalisable (fond image + champs positionnés : nom, poste(s)
affectés, catégorie, rôle) via un éditeur visuel glisser-déposer ; verso
fixe, la même image pour tous les bénévoles. Nouvel écran « Badges »
(COORDINATION uniquement, /badges).

Backend : modèle BadgeTemplate/BadgeField (migration 0011), génération
PDF isolée (app/badges/pdf.py, ReportLab — planches recto suivies des
planches verso correspondantes pour une impression recto-verso), route
POST /editions/{id}/badges/generate, tests (module pur + API).

Frontend : client HTTP (upload multipart, réponses binaires images/PDF),
client mock (mode démonstration), éditeur de positionnement en
millimètres (coordonnées partagées avec le backend), écran de génération
avec sélection des bénévoles et téléchargement.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/api/mock/mock-client.ts

@@ -10,6 +10,10 @@ import type {
   AssignmentValidateResult,
   AvailabilityRead,
   AvailabilitySet,
+  BadgeFieldRead,
+  BadgeFieldsSet,
+  BadgeGenerateRequest,
+  BadgeTemplateRead,
   DayPartCreate,
   DayPartRead,
   DayPartUpdate,
@@ -82,6 +86,28 @@ const notFound = (): never => {
   throw new ApiError(404, 'error.not_found');
 };
 
+const fileToDataUrl = (file: File): Promise<string> =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+
+// PDF valide minimal (une page blanche) — remplace la vraie génération
+// (réservée au back-end réel) pour que le téléchargement fonctionne en mode
+// démonstration.
+const MOCK_PDF_BLOB = () =>
+  new Blob(
+    [
+      '%PDF-1.4\n1 0 obj<</Type/Catalog/Pages 2 0 R>>endobj\n' +
+        '2 0 obj<</Type/Pages/Kids[3 0 R]/Count 1>>endobj\n' +
+        '3 0 obj<</Type/Page/Parent 2 0 R/MediaBox[0 0 595 842]>>endobj\n' +
+        'trailer<</Root 1 0 R>>\n%%EOF',
+    ],
+    { type: 'application/pdf' },
+  );
+
 const touch = () => new Date().toISOString().replace(/\.\d+Z$/, '');
 
 const addDays = (day: string, n: number): string => {
@@ -1301,6 +1327,69 @@ export function createMockApi(): PlanningApi {
       get: () => delay(buildMatrix()),
     },
 
+    badges: {
+      getTemplate: (): Promise<BadgeTemplateRead> =>
+        delay({
+          edition_id: state.edition.id,
+          has_front_image: state.badgeTemplate.frontImage !== null,
+          has_back_image: state.badgeTemplate.backImage !== null,
+          fields: state.badgeTemplate.fields,
+        }),
+      uploadFrontImage: async (_edition, file: File) => {
+        state.badgeTemplate.frontImage = await fileToDataUrl(file);
+        state.badgeTemplate.frontImageType = file.type;
+        return delay<BadgeTemplateRead>({
+          edition_id: state.edition.id,
+          has_front_image: true,
+          has_back_image: state.badgeTemplate.backImage !== null,
+          fields: state.badgeTemplate.fields,
+        });
+      },
+      uploadBackImage: async (_edition, file: File) => {
+        state.badgeTemplate.backImage = await fileToDataUrl(file);
+        state.badgeTemplate.backImageType = file.type;
+        return delay<BadgeTemplateRead>({
+          edition_id: state.edition.id,
+          has_front_image: state.badgeTemplate.frontImage !== null,
+          has_back_image: true,
+          fields: state.badgeTemplate.fields,
+        });
+      },
+      frontImageBlob: async () => {
+        if (!state.badgeTemplate.frontImage) return null;
+        return (await fetch(state.badgeTemplate.frontImage)).blob();
+      },
+      backImageBlob: async () => {
+        if (!state.badgeTemplate.backImage) return null;
+        return (await fetch(state.badgeTemplate.backImage)).blob();
+      },
+      setFields: (_edition, body: BadgeFieldsSet) => {
+        const seen = new Set<string>();
+        for (const f of body.fields) {
+          if (seen.has(f.field_type)) throw new ApiError(422, 'badge.duplicate_field_type');
+          seen.add(f.field_type);
+        }
+        const fields: BadgeFieldRead[] = body.fields.map((f) => ({
+          ...f,
+          id: `bf${state.seq++}`,
+          edition_id: state.edition.id,
+        }));
+        state.badgeTemplate.fields = fields;
+        return delay(fields);
+      },
+      generate: (_edition, body: BadgeGenerateRequest) => {
+        if (state.badgeTemplate.fields.length === 0) {
+          throw new ApiError(422, 'badge.no_fields');
+        }
+        const ids = body.volunteer_ids ?? state.volunteers.map((v) => v.id);
+        const matching = state.volunteers.filter((v) => ids.includes(v.id));
+        if (matching.length === 0) throw new ApiError(422, 'badge.no_volunteers');
+        // La composition réelle du PDF (reportlab) est réservée au back-end :
+        // le mode démonstration renvoie un PDF minimal valide, téléchargeable.
+        return delay(MOCK_PDF_BLOB());
+      },
+    },
+
     solver: {
       run: () => delay(runSolver()),
     },