✍️ Signature Électronique - Guide d'utilisation

🎯 Fonctionnalité ajoutée

Vos factures peuvent maintenant être signées électroniquement par le client directement depuis l'écran (tactile ou souris) !

---

📋 Installation

1️⃣ Ajouter la colonne dans la base de données

Exécutez ce script une seule fois :

```

http://votre-site.com/admin/add-signature-column.php

```

Ce script va ajouter la colonne signature à la table invoices pour stocker les signatures en base64.

---

✨ Utilisation

📝 Créer/Modifier une facture

1. Allez dans "Nouvelle facture" ou "Modifier une facture"
2. Scrollez jusqu'à la section "✍️ Signature du client"
3. Le client peut signer :

- Sur mobile/tablette : Avec le doigt directement sur l'écran

- Sur ordinateur : Avec la souris

1. Boutons disponibles :

- 🗑️ Effacer : Efface la signature pour recommencer

- Le statut indique si la signature est enregistrée

1. Cliquez sur "💾 Enregistrer la facture"

👀 Visualiser la signature

La signature apparaît automatiquement :

• ✅ Dans la vue de la facture (view-invoice.php)
• ✅ Dans le PDF (lors de l'impression)
• ✅ Dans l'email envoyé au client

📧 Email avec signature

Quand vous envoyez une facture par email, la signature est incluse automatiquement dans le corps de l'email avec :

• L'image de la signature
• La date et l'heure de signature

---

🔧 Fonctionnalités techniques

Canvas de signature

• Taille : 600x200 pixels (responsive sur mobile)
• Format : PNG en base64
• Couleur : Noir (#1e293b)
• Épaisseur : 2px
• Support : Souris + Tactile (touch events)

Stockage

• Type : LONGTEXT dans MySQL
• Format : data:image/png;base64,...
• Taille : ~10-50 Ko par signature

Sécurité

• ✅ Validation côté serveur
• ✅ Échappement HTML
• ✅ Stockage sécurisé en base64
• ✅ Authentification requise

---

🎨 Design

Sur le formulaire

• Fond blanc pour le canvas
• Bordure pointillée pour indiquer la zone de signature
• Bouton rouge pour effacer
• Statut en temps réel (✅ Signature enregistrée / Aucune signature)

Sur la facture

• Alignée à droite
• Bordure grise élégante
• Date de signature affichée
• Optimisée pour l'impression

---

📱 Responsive

Mobile

• Canvas adapté : 150px de hauteur
• Boutons pleine largeur
• Touch events optimisés
• Pas de scroll pendant le dessin (touch-action: none)

Tablette/Desktop

• Canvas : 200px de hauteur
• Largeur maximale : 600px
• Curseur en croix pour indiquer la zone de dessin

---

🐛 Dépannage

La signature ne s'affiche pas

1. Vérifiez que la colonne signature existe dans la base de données
2. Exécutez add-signature-column.php si nécessaire
3. Videz le cache de votre navigateur

La signature est trop grande

• C'est normal, elle est en base64 (~10-50 Ko)
• MySQL LONGTEXT supporte jusqu'à 4 Go

Le dessin ne fonctionne pas sur mobile

1. Vérifiez que touch-action: none est bien dans le CSS
2. Testez dans un navigateur moderne (Chrome, Safari, Firefox)
3. Désactivez temporairement les extensions de navigateur

---

📁 Fichiers modifiés

| Fichier | Modifications |

|---------|--------------|

| add-signature-column.php | ✅ Nouveau - Script de migration |

| edit-invoice.php | ✅ Canvas + JavaScript de signature |

| view-invoice.php | ✅ Affichage de la signature |

| send-invoice-email.php | ✅ Signature dans l'email |

| admin-style.css | ✅ Styles du pad de signature |

---

🚀 Prochaines améliorations possibles

• [ ] Signature manuscrite pour le fournisseur
• [ ] Plusieurs signatures par facture
• [ ] Choix de la couleur du stylo
• [ ] Choix de l'épaisseur du trait
• [ ] Historique des signatures
• [ ] Certificat de signature électronique

---

💡 Conseils d'utilisation

1. Pour une signature propre : Demandez au client de signer lentement
2. Sur tablette : Utilisez un stylet pour plus de précision
3. Impression : La signature s'imprime en haute qualité
4. Légalité : Vérifiez la réglementation locale sur les signatures électroniques

---

📞 Support

En cas de problème, contactez votre administrateur système ou consultez les logs PHP.

Date de création : 25 octobre 2025

Version : 1.0

Auteur : Proinfo83 Admin System