odentas
8edb624330
- Conserver data URI complète (data:image/png;base64,...) lors de l'upload - Ajout script migration SQL pour logos existants - Compatible avec affichage et génération PDF PDFMonkey
144 lines
4.4 KiB
Markdown
144 lines
4.4 KiB
Markdown
# 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 :**
|
|
```typescript
|
|
const base64 = result.split(',')[1]; // ❌ Extraction du base64 pur
|
|
onChange(base64);
|
|
```
|
|
|
|
**Après :**
|
|
```typescript
|
|
// 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 :
|
|
|
|
```sql
|
|
-- 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) :
|
|
|
|
```typescript
|
|
<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é
|
|
|
|
```bash
|
|
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 :**
|
|
```bash
|
|
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)
|