espace-paie-odentas/FIX_LOGO_PDF_PDFMONKEY.md

Correction du Bug - Logos Cassés dans les PDFs PDFMonkey

🐛 Problème

Lors de la génération de contrats PDF via PDFMonkey, les logos des clients apparaissaient cassés (image non chargée).

🔍 Diagnostic

Flux actuel (bugué)

1. Upload du logo (/app/(app)/staff/clients/[id]/page.tsx) :

   • L'utilisateur upload un logo via le composant ImageUpload
   • Le fichier est lu et converti en base64
   • ❌ Seule la partie base64 était extraite (sans le préfixe data:image/png;base64,)
   • Exemple : iVBORw0KGgoAAAANS... au lieu de data:image/png;base64,iVBORw0KGgoAAAANS...

2. Sauvegarde en base (/app/api/staff/clients/[id]/route.ts) :

   • Le logo est sauvegardé dans organization_details.logo
   • Valeur stockée : base64 pur (sans préfixe)

3. Génération PDF (/app/api/contrats/[id]/generate-pdf/route.ts) :

   • Le champ imageUrl du payload PDFMonkey reçoit orgDetails.logo
   • ❌ PDFMonkey reçoit une chaîne base64 sans préfixe → image cassée

Pourquoi ça casse ?

PDFMonkey accepte pour le champ imageUrl :

• ✅ Une URL publique (ex: https://example.com/logo.png)
• ✅ Une data URI complète (ex: data:image/png;base64,iVBORw0KG...)
• ❌ PAS une chaîne base64 brute

✅ Solution Implémentée

1. Modification de l'Upload (/app/(app)/staff/clients/[id]/page.tsx)

Avant :

const base64 = result.split(',')[1];  // ❌ Extraction du base64 pur
onChange(base64);

Après :

// Conserver la data URI complète
onChange(result);  // ✅ Format : data:image/png;base64,iVBORw0KG...

2. Migration des Logos Existants

Un script SQL a été créé pour mettre à jour les logos existants :

-- Fichier : MIGRATION_LOGO_DATAURI.sql
UPDATE organization_details
SET logo = 'data:image/png;base64,' || logo
WHERE logo IS NOT NULL 
  AND logo != '' 
  AND logo NOT LIKE 'data:%';

3. Compatibilité Rétroactive

Le composant LogoLine gère déjà les deux formats (déjà en place) :

<img 
  src={value.startsWith('data:') ? value : `data:image/png;base64,${value}`}
  alt="Logo"
  className="max-w-32 max-h-32 object-contain border rounded"
/>

Cela garantit que :

• Les nouveaux logos (avec préfixe) s'affichent correctement
• Les anciens logos (sans préfixe, avant migration) s'affichent toujours
• PDFMonkey reçoit toujours le bon format

📋 Instructions de Déploiement

1. Appliquer le code modifié

git add app/(app)/staff/clients/[id]/page.tsx
git commit -m "fix: Conserver data URI complète pour logos clients (compatibilité PDFMonkey)"
git push

2. Exécuter la migration SQL

Via Supabase Dashboard :

1. Se connecter à Supabase
2. Aller dans SQL Editor
3. Copier-coller le contenu de MIGRATION_LOGO_DATAURI.sql
4. Exécuter la requête

Via CLI :

psql -h db.xxx.supabase.co -U postgres -d postgres -f MIGRATION_LOGO_DATAURI.sql

3. Vérifier le résultat

1. Aller sur /staff/clients/[id] d'un client existant
2. Vérifier que le logo s'affiche correctement
3. Générer un nouveau PDF de contrat
4. Vérifier que le logo apparaît correctement dans le PDF

🧪 Tests

Test 1 : Upload d'un nouveau logo

1. Aller sur /staff/clients/[id]
2. Cliquer sur "Modifier"
3. Uploader un nouveau logo
4. Sauvegarder
5. Vérifier que le logo s'affiche
6. Générer un PDF → Le logo doit apparaître

Test 2 : Logo existant (après migration)

1. Client avec un ancien logo (avant la correction)
2. Après migration SQL, le logo doit s'afficher
3. Générer un PDF → Le logo doit apparaître

Test 3 : Client sans logo

1. Client sans logo configuré
2. Générer un PDF → Pas d'erreur, juste pas de logo

📝 Fichiers Modifiés

• ✅ app/(app)/staff/clients/[id]/page.tsx - Correction de l'upload
• ✅ MIGRATION_LOGO_DATAURI.sql - Script de migration SQL
• ✅ FIX_LOGO_PDF_PDFMONKEY.md - Ce document

🔗 Références

• API PDFMonkey : https://pdfmonkey.io/docs
• Data URI scheme : https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
• Template PDFMonkey utilisé : 736E1A5F-BBA1-4D3E-91ED-A6184479B58D

⚠️ Notes Importantes

• Les logos sont stockés directement en base64 dans Supabase (pas sur S3)
• Taille max : 5MB
• Formats acceptés : JPG, PNG, GIF
• Le préfixe data:image/png;base64, est ajouté même pour les JPEG (PDFMonkey gère automatiquement)