# 🎆 Application Registre des Ventes de Pétards
## Squelette Complet et Spécifications Techniques

---

## 📋 **Vue d'ensemble de l'Application**

### **Objectif**
Application web React pour la gestion et le suivi réglementaire des ventes de feux d'artifice et pétards, conforme à la législation française.

### **Utilisateurs cibles**
- Commerçants vendant des feux d'artifice
- Responsables de magasins spécialisés
- Contrôleurs réglementaires



## 🎮 **Interface Utilisateur**

### **Navigation Principale**
```
Header: "Registre des Ventes de Pétards"
└── Onglets Navigation:
    ├── 📝 Nouvelle Vente
    └── 📊 Historique (X ventes)
```

### **Palette de Couleurs**
- **Primaire**: Bleu (#2563EB)
- **Succès**: Vert (#16A34A)
- **Erreur**: Rouge (#DC2626)
- **Info**: Bleu clair (#3B82F6)
- **Arrière-plan**: Gris clair (#F9FAFB)

---

## 📝 **Section 1: Nouvelle Vente**

### **Formulaire Complet**

#### **🧑‍💼 Informations Vendeur**
```javascript
{
  vendeur: {
    type: "string",
    required: true,
    placeholder: "Nom et prénom du vendeur",
    validation: "Non vide"
  },
  dateVente: {
    type: "date",
    default: "Date du jour",
    format: "YYYY-MM-DD"
  }
}
```

#### **📦 Informations Produit**
```javascript
{
  typeArticle: {
    type: "select",
    required: true,
    options: [
      "Pétard à mèche",
      "Batterie", 
      "Batterie nécessitant un support externe",
      "Combinaison",
      "Combinaison nécessitant un support externe", 
      "Pétard aérien",
      "Pétard à composition flash",
      "Fusée",
      "Chandelle romaine",
      "Chandelle monocoup"
    ]
  },
  categorie: {
    type: "select",
    required: true,
    dependsOn: "typeArticle",
    mapping: {
      "Pétard à mèche": ["F3"],
      "Batterie": ["F3"],
      "Batterie nécessitant un support externe": ["F3"],
      "Combinaison": ["F3"],
      "Combinaison nécessitant un support externe": ["F3"],
      "Pétard aérien": ["F2", "F3"],
      "Pétard à composition flash": ["F3"],
      "Fusée": ["F2", "F3"],
      "Chandelle romaine": ["F2", "F3"],
      "Chandelle monocoup": ["F2", "F3"]
    }
  },
  quantite: {
    type: "number",
    required: true,
    min: 1,
    validation: "Entier positif"
  },
  gencode: {
    type: "string",
    required: false,
    placeholder: "Code produit (optionnel)"
  }
}
```

#### **🧑‍🤝‍🧑 Informations Client**
```javascript
{
  nom: {
    type: "string",
    required: true,
    placeholder: "Nom de famille"
  },
  prenom: {
    type: "string", 
    required: true,
    placeholder: "Prénom"
  },
  dateNaissance: {
    type: "date",
    required: false,
    placeholder: "Date de naissance"
  },
  lieuNaissance: {
    type: "string",
    required: false,
    placeholder: "Ville de naissance"
  }
}
```

#### **🆔 Pièce d'Identité**
```javascript
{
  typeIdentite: {
    type: "string",
    required: false,
    placeholder: "Ex: CNI 123456789",
    examples: ["CNI", "Passeport", "Permis de conduire"]
  },
  autoriteDelivrance: {
    type: "string",
    required: false,
    placeholder: "Préfecture, Mairie, etc."
  },
  dateDelivrance: {
    type: "date",
    required: false
  }
}
```

#### **📷 Photos de la Pièce d'Identité**
```javascript
{
  photoRecto: {
    type: "image",
    format: "base64",
    source: "camera",
    required: false,
    compression: 0.8,
    maxSize: "5MB"
  },
  photoVerso: {
    type: "image", 
    format: "base64",
    source: "camera",
    required: false,
    compression: 0.8,
    maxSize: "5MB"
  }
}
```

### **Informations Réglementaires**
```
ℹ️ Information réglementaire :
• F2 : Feux d'artifice de catégorie F2 - Vente libre aux majeurs
• F3 : Feux d'artifice de catégorie F3 - Vente soumise à autorisation préfectorale
```

### **Actions du Formulaire**
- **💾 Enregistrer la Vente** (bouton principal)
- **📸 Prendre photo Recto/Verso** (boutons caméra)
- **❌ Supprimer photo** (boutons X sur images)

---

## 📊 **Section 2: Historique des Ventes**

### **Actions Globales**
```javascript
{
  exportCSV: {
    label: "📥 Exporter CSV (X)",
    function: "exportToCSV()",
    disabled: "si aucune vente",
    format: "UTF-8 avec BOM"
  },
  backupAuto: {
    label: "💾 Backup Auto", 
    function: "downloadAutoBackup()",
    source: "localStorage"
  },
  diagnostic: {
    label: "🔍 Debug",
    function: "Diagnostic complet console"
  },
  testSuppression: {
    label: "🧪 Test Suppression",
    function: "Test sur première vente"
  },
  testBackup: {
    label: "🧪 Test Backup",
    function: "Test création + téléchargement"
  }
}
```

### **Informations de Status**
```
📊 Données stockées localement (X vente(s)) • Export CSV compatible Excel • Sauvegarde automatique à chaque ajout
Dernier backup: DD/MM/YYYY HH:MM (X enreg.)
```

### **Tableau des Ventes**
```javascript
{
  colonnes: [
    {
      nom: "Date",
      champ: "dateVente", 
      format: "DD/MM/YYYY",
      tri: "DESC par défaut"
    },
    {
      nom: "Vendeur",
      champ: "vendeur",
      fallback: "Non spécifié"
    },
    {
      nom: "Client", 
      champ: "nom + prenom",
      sousChamp: "typeIdentite"
    },
    {
      nom: "Produit",
      champ: "typeArticle",
      sousChamp: "gencode (si présent)"
    },
    {
      nom: "Catégorie",
      champ: "categorie",
      style: {
        "F2": "badge jaune",
        "F3": "badge rouge"
      }
    },
    {
      nom: "Quantité",
      champ: "quantite"
    },
    {
      nom: "Actions",
      boutons: ["👁️ Voir", "🗑️ Supprimer"]
    }
  ]
}
```

### **Actions par Ligne**
```javascript
{
  voirDetails: {
    icon: "👁️",
    action: "Ouvrir modal détails",
    tooltip: "Voir les détails"
  },
  supprimer: {
    icon: "🗑️", 
    action: "Suppression avec confirmation",
    tooltip: "Supprimer la vente",
    confirmation: "Supprimer définitivement la vente de {nom} {prenom} ?\n\n⚠️ Cette action est irréversible !\n\nID: {id}"
  }
}
```

---

## 🔍 **Modal de Détails**

### **Structure Complète**
```javascript
{
  titre: "Détails de la Vente",
  sections: [
    {
      nom: "Informations Vendeur",
      champs: ["vendeur", "dateVente"]
    },
    {
      nom: "Informations Produit", 
      champs: ["typeArticle", "categorie", "quantite", "gencode"]
    },
    {
      nom: "Informations Client",
      champs: ["nom", "prenom", "dateNaissance", "lieuNaissance"]
    },
    {
      nom: "Pièce d'Identité",
      champs: ["typeIdentite", "autoriteDelivrance", "dateDelivrance"]
    },
    {
      nom: "Photos de la Pièce d'Identité",
      champs: ["photoRecto", "photoVerso"],
      affichage: "Images 128px ou placeholder"
    },
    {
      nom: "Informations Système",
      champs: ["timestamp"],
      format: "DD/MM/YYYY HH:MM:SS"
    }
  ],
  actions: ["Fermer"]
}
```

---

## 📸 **Modal Caméra**

### **Interface Caméra**
```javascript
{
  titre: "Photo {Recto|Verso}",
  elements: [
    {
      videoStream: {
        source: "navigator.mediaDevices.getUserMedia",
        constraints: { 
          video: { facingMode: 'environment' } 
        },
        autoPlay: true,
        playsInline: true
      }
    },
    {
      canvas: {
        hidden: true,
        purpose: "Capture image"
      }
    }
  ],
  actions: [
    {
      nom: "📸 Prendre la photo",
      function: "takePhoto()"
    },
    {
      nom: "❌ Fermer",
      function: "stopCamera()"
    }
  ]
}
```

### **Processus de Capture**
1. **Demande permission caméra**
2. **Affichage flux vidéo temps réel**
3. **Capture frame sur canvas**
4. **Conversion en blob JPEG (80% qualité)**
5. **Conversion en base64**
6. **Stockage dans formData**
7. **Arrêt du flux caméra**

---

## 🎯 **Système de Notifications (Toast)**

### **Types de Notifications**
```javascript
{
  success: {
    couleur: "Vert",
    icon: "✅ CheckCircle",
    duree: 4000,
    exemples: [
      "Vente enregistrée avec succès",
      "Photo recto capturée avec succès", 
      "Export réussi ! X vente(s) exportée(s)",
      "Vente de {nom} {prenom} supprimée"
    ]
  },
  error: {
    couleur: "Rouge",
    icon: "❌ AlertCircle", 
    duree: 4000,
    exemples: [
      "Veuillez remplir tous les champs obligatoires",
      "Impossible d'accéder à la caméra",
      "Erreur lors de l'enregistrement"
    ]
  },
  info: {
    couleur: "Bleu",
    icon: "ℹ️ Info",
    duree: 4000,
    exemples: [
      "Caméra activée, positionnez la carte d'identité",
      "Photo recto supprimée",
      "Aucune vente à exporter"
    ]
  }
}
```

### **Positionnement et Animation**
```css
{
  position: "fixed bottom-4 right-4",
  zIndex: 50,
  animation: "slideInRight 0.3s ease-out",
  autoRemove: "4 secondes",
  manualClose: "Bouton X"
}
```

---

## 🗄️ **Base de Données (IndexedDB)**

### **Configuration**
```javascript
{
  nom: "VentesPetardsDB",
  version: 1,
  objectStore: {
    nom: "ventes",
    keyPath: "id",
    autoIncrement: true,
    index: [
      { nom: "nom", unique: false },
      { nom: "dateVente", unique: false }
    ]
  }
}
```

### **Structure d'un Enregistrement**
```javascript
{
  id: "number (auto-increment)",
  
  // Vendeur
  vendeur: "string",
  dateVente: "string (YYYY-MM-DD)",
  
  // Produit  
  typeArticle: "string",
  categorie: "string (F2|F3)",
  quantite: "number",
  gencode: "string|null",
  
  // Client
  nom: "string", 
  prenom: "string",
  dateNaissance: "string|null",
  lieuNaissance: "string|null",
  
  // Identité
  typeIdentite: "string|null",
  numeroIdentite: "string|null",
  autoriteDelivrance: "string|null", 
  dateDelivrance: "string|null",
  
  // Photos
  photoRecto: "string (base64)|null",
  photoVerso: "string (base64)|null",
  
  // Système
  timestamp: "string (ISO 8601)"
}
```

### **Opérations CRUD**
```javascript
{
  create: "saveVente(venteData)",
  read: "loadVentes() -> Array",
  update: "Non implémenté",
  delete: "deleteVente(id)"
}
```

---

## 💾 **Système de Sauvegarde**

### **Sauvegarde Automatique (localStorage)**
```javascript
{
  clé: "petards_backup_csv",
  déclencheurs: [
    "Après ajout vente",
    "Après suppression vente"
  ],
  contenu: {
    timestamp: "ISO 8601",
    csvContent: "string (avec BOM UTF-8)",
    recordCount: "number"
  }
}
```

### **Export CSV Manuel**
```javascript
{
  format: "CSV délimité par ';'",
  encodage: "UTF-8 avec BOM (\uFEFF)",
  colonnes: [
    "Date de vente",
    "Vendeur", 
    "Type d'article",
    "Catégorie",
    "Quantité",
    "Code générique",
    "Nom client",
    "Prénom client", 
    "Date de naissance",
    "Lieu de naissance",
    "Type et n° identité",
    "Autorité de délivrance",
    "Date de délivrance",
    "Photo recto (Oui/Non)",
    "Photo verso (Oui/Non)",
    "Horodatage"
  ],
  méthodes: [
    "Data URL (principal)",
    "Blob + createObjectURL (fallback)",
    "Nouvelle fenêtre (fallback final)"
  ]
}
```

---

## ⚙️ **États et Gestion des Données**

### **État Principal (useState)**
```javascript
{
  activeTab: "string ('nouvelle-vente'|'historique')",
  ventes: "Array<VenteObject>",
  showCamera: "boolean",
  currentPhotoType: "string ('photoRecto'|'photoVerso')",
  toasts: "Array<ToastObject>",
  showDetailsModal: "boolean", 
  selectedVente: "VenteObject|null",
  formData: "VenteObject (form state)"
}
```

### **Références (useRef)**
```javascript
{
  videoRef: "HTMLVideoElement",
  canvasRef: "HTMLCanvasElement", 
  streamRef: "MediaStream"
}
```

### **Effets (useEffect)**
```javascript
{
  componentDidMount: [
    "initDB()",
    "loadVentes()"
  ]
}
```

---

## 🔧 **Fonctions Principales**

### **Base de Données**
```javascript
{
  initDB: "Initialisation IndexedDB",
  saveVente: "Ajout nouvelle vente",
  loadVentes: "Chargement toutes ventes", 
  deleteVente: "Suppression vente par ID"
}
```

### **Caméra et Photos**
```javascript
{
  startCamera: "Démarrage flux caméra",
  takePhoto: "Capture photo sur canvas",
  stopCamera: "Arrêt flux caméra"
}
```

### **Formulaire**
```javascript
{
  handleInputChange: "Gestion changements inputs",
  handleSubmit: "Soumission formulaire complet"
}
```

### **Export et Sauvegarde**
```javascript
{
  exportToCSV: "Export CSV manuel",
  createAutoBackup: "Création backup auto",
  downloadAutoBackup: "Téléchargement backup"
}
```

### **Interface Utilisateur**
```javascript
{
  showToast: "Affichage notification",
  removeToast: "Suppression notification",
  ToastContainer: "Container notifications",
  DetailsModal: "Modal détails vente"
}
```

---

## 🎛️ **Configuration et Options**

### **Paramètres Généraux**
```javascript
{
  autoBackup: true,
  toastDuration: 4000,
  photoCompression: 0.8,
  csvDelimiter: ';',
  dateFormat: 'fr-FR'
}
```

### **Validation des Champs**
```javascript
{
  champsObligatoires: [
    "vendeur",
    "nom", 
    "prenom",
    "typeArticle",
    "categorie", 
    "quantite"
  ],
  validations: {
    quantite: "min: 1, type: number",
    dateVente: "format: YYYY-MM-DD",
    photos: "maxSize: 5MB, format: JPEG"
  }
}
```

### **Correspondances Produits**
```javascript
{
  articlesTypesCategories: {
    "Pétard à mèche": ["F3"],
    "Batterie": ["F3"], 
    "Batterie nécessitant un support externe": ["F3"],
    "Combinaison": ["F3"],
    "Combinaison nécessitant un support externe": ["F3"],
    "Pétard aérien": ["F2", "F3"],
    "Pétard à composition flash": ["F3"],
    "Fusée": ["F2", "F3"],
    "Chandelle romaine": ["F2", "F3"],
    "Chandelle monocoup": ["F2", "F3"]
  }
}
```

---

## 🚀 **Flux de Données Complet**

### **Ajout d'une Vente**
```
1. Utilisateur remplit formulaire
2. Validation champs obligatoires
3. Prise photos (optionnel)
4. Clic "Enregistrer la Vente"
5. saveVente() -> IndexedDB
6. loadVentes() -> Mise à jour état
7. createAutoBackup() -> localStorage
8. Toast de succès
9. Reset formulaire
```

### **Affichage Historique**
```
1. Clic onglet "Historique"
2. loadVentes() depuis IndexedDB
3. Tri par date (DESC)
4. Affichage tableau
5. Actions disponibles par ligne
```

### **Export CSV**
```
1. Clic "Exporter CSV"
2. Vérification ventes > 0
3. Transformation données -> CSV
4. Création blob avec BOM UTF-8
5. Déclenchement téléchargement
6. Toast de confirmation
```

### **Suppression Vente**
```
1. Clic bouton suppression
2. Confirmation utilisateur
3. deleteVente(id) -> IndexedDB
4. loadVentes() -> Mise à jour état
5. createAutoBackup() -> localStorage
6. Toast de succès
```

---

## 🛡️ **Conformité Réglementaire**

### **Exigences Légales Couvertes**
- ✅ **Identification vendeur** (nom du vendeur)
- ✅ **Date de vente** (horodatage)
- ✅ **Type et catégorie produit** (classification F2/F3)
- ✅ **Quantité vendue** (traçabilité)
- ✅ **Identité acheteur** (nom, prénom, pièce d'identité)
- ✅ **Photos pièce d'identité** (preuve visuelle)
- ✅ **Archivage numérique** (IndexedDB + CSV)

### **Données de Traçabilité**
```javascript
{
  obligatoires: [
    "Date et heure de vente",
    "Identité du vendeur", 
    "Identité de l'acheteur",
    "Nature et quantité des produits",
    "Catégorie réglementaire"
  ],
  optionnelles: [
    "Photos pièces d'identité",
    "Code produit fabricant",
    "Lieu de naissance acheteur"
  ]
}
```

---

## 📱 **Responsive Design**

### **Breakpoints**
```css
{
  mobile: "max-width: 768px",
  tablet: "768px - 1024px", 
  desktop: "min-width: 1024px"
}
```

### **Adaptations Mobile**
```javascript
{
  navigation: "Onglets empilés",
  formulaire: "Colonnes -> lignes",
  tableau: "Scroll horizontal",
  modal: "Pleine largeur",
  camera: "Optimisé tactile"
}
```

---

## 🔍 **Debugging et Maintenance**

### **Outils de Debug Intégrés**
```javascript
{
  diagnosticComplet: "🔍 Debug (état + IndexedDB + localStorage)",
  testSuppression: "🧪 Test sur première vente",
  testBackup: "🧪 Test création + téléchargement",
  logsDetailles: "Console avec emojis et étapes"
}
```

### **Gestion d'Erreurs**
```javascript
{
  camera: "Permissions, compatibilité",
  indexedDB: "Ouverture, transactions, quotas",
  export: "Génération, téléchargement",
  validation: "Champs obligatoires, formats"
}
```

---

## 📦 **Déploiement et Installation**

### **Prérequis Navigateur**
```javascript

  optional: [
    "Camera access",
    "Download attribute support"
  ]
}
```

### **Performance**
```javascript
{
  tailleBD: "Illimitée (selon navigateur)",
  photoCompression: "80% JPEG",
  chargementLazy: "Images dans modal",
  memoire: "State minimal en React"
}
```

---

## 🎯 **Évolutions Futures Possibles**

### **Fonctionnalités Avancées**
```javascript
{
  authentification: "Login vendeurs",
  synchronisation: "Multi-appareils",
  notifications: "Rappels réglementaires",
  recherche: "Filtres avancés",
  backup: "Cloud storage",
}
```


## 📚 **Documentation Utilisateur**

### **Guide d'Utilisation Rapide**
1. **Nouvelle vente** : Remplir formulaire → Photos (optionnel) → Enregistrer
2. **Consulter historique** : Onglet Historique → Voir/Supprimer
3. **Export données** : Bouton "Exporter CSV" → Fichier téléchargé
4. **Sauvegarde** : Automatique + "Backup Auto" manuel

### **Résolution Problèmes**
- **Caméra ne marche pas** : Vérifier permissions navigateur
- **Export CSV vide** : Vérifier qu'il y a des ventes enregistrées  
- **Suppression ne marche pas** : Utiliser bouton "🧪 Test Suppression"
- **Données perdues** : Utiliser "Backup Auto" pour récupérer

---

*🎆 Application développée pour la conformité réglementaire française des ventes de feux d'artifice*