+
+
+```
+
+#### Sections du formulaire
+
+1. **Identification**
+ - Nom (requis)
+ - Type principal (requis)
+ - Sous-type
+ - Marque
+ - Modèle
+ - Numéro de série
+
+2. **Achat**
+ - Boutique
+ - Date d'achat
+ - Prix
+ - Devise
+ - Garantie (mois)
+
+3. **État et localisation**
+ - État (Neuf, Bon, Usagé, Défectueux, Retiré)
+ - Note (système d'étoiles cliquables)
+ - Quantité totale
+ - Quantité disponible
+
+4. **Documentation technique**
+ - Synthèse (Markdown)
+ - CLI / Données structurées (YAML)
+ - CLI / Rapport système (Markdown)
+ - Spécifications (Markdown)
+ - Notes (Markdown)
+
+### 2. Style CSS
+
+**Fichier** : `frontend/css/peripherals.css` (lignes 284-287)
+
+```css
+.modal-content.modal-large {
+ max-width: 1400px;
+ width: 95%;
+}
+```
+
+**Caractéristiques** :
+- Modale plus large pour afficher tous les champs
+- Responsive (95% de la largeur sur petit écran)
+- Max 1400px sur grand écran
+
+### 3. JavaScript - Fonctions
+
+**Fichier** : `frontend/js/peripheral-detail.js`
+
+#### `toggleEditMode()` (ligne 461-494)
+
+**Rôle** : Ouvrir la modale et pré-remplir le formulaire avec les données actuelles
+
+```javascript
+function toggleEditMode() {
+ if (!peripheral) {
+ showError('Aucun périphérique chargé');
+ return;
+ }
+
+ // Populate form with peripheral data
+ document.getElementById('edit-nom').value = peripheral.nom || '';
+ document.getElementById('edit-type_principal').value = peripheral.type_principal || '';
+ // ... tous les autres champs ...
+
+ // Show modal
+ document.getElementById('modal-edit').style.display = 'block';
+}
+```
+
+**Gère** :
+- Vérification que le périphérique est chargé
+- Pré-remplissage de tous les champs du formulaire
+- Gestion des valeurs nulles avec fallback
+- Appel `setEditRating()` pour les étoiles
+
+#### `closeEditModal()` (ligne 496-498)
+
+**Rôle** : Fermer la modale d'édition
+
+```javascript
+function closeEditModal() {
+ document.getElementById('modal-edit').style.display = 'none';
+}
+```
+
+#### `setEditRating(rating)` (ligne 500-513)
+
+**Rôle** : Mettre à jour l'affichage des étoiles dans le formulaire d'édition
+
+```javascript
+function setEditRating(rating) {
+ const stars = document.querySelectorAll('#edit-star-rating .fa-star');
+ const ratingInput = document.getElementById('edit-rating');
+
+ ratingInput.value = rating;
+
+ stars.forEach((star, index) => {
+ if (index < rating) {
+ star.classList.add('active');
+ } else {
+ star.classList.remove('active');
+ }
+ });
+}
+```
+
+**Fonctionnalités** :
+- Met à jour le champ hidden `edit-rating`
+- Ajoute/retire la classe `active` sur les étoiles
+- Permet sélection visuelle interactive
+
+#### Event listener étoiles (ligne 516-525)
+
+```javascript
+document.addEventListener('DOMContentLoaded', () => {
+ const editStars = document.querySelectorAll('#edit-star-rating .fa-star');
+
+ editStars.forEach(star => {
+ star.addEventListener('click', () => {
+ const rating = parseInt(star.getAttribute('data-rating'));
+ setEditRating(rating);
+ });
+ });
+});
+```
+
+**Rôle** : Rendre les étoiles cliquables pour modifier la note
+
+#### `savePeripheral(event)` (ligne 527-559)
+
+**Rôle** : Sauvegarder les modifications via l'API
+
+```javascript
+async function savePeripheral(event) {
+ event.preventDefault();
+
+ const form = event.target;
+ const formData = new FormData(form);
+ const data = {};
+
+ // Convert FormData to object
+ for (let [key, value] of formData.entries()) {
+ // Convert numeric fields
+ if (['prix', 'garantie_duree_mois', 'quantite_totale', 'quantite_disponible', 'rating'].includes(key)) {
+ data[key] = value ? parseFloat(value) : null;
+ } else {
+ data[key] = value || null;
+ }
+ }
+
+ try {
+ const response = await apiRequest(`/peripherals/${peripheralId}`, {
+ method: 'PUT',
+ body: JSON.stringify(data)
+ });
+
+ showSuccess('Périphérique mis à jour avec succès');
+ closeEditModal();
+
+ // Reload peripheral data
+ await loadPeripheral();
+ } catch (error) {
+ console.error('Error updating peripheral:', error);
+ showError('Erreur lors de la mise à jour du périphérique');
+ }
+}
+```
+
+**Processus** :
+1. Empêche soumission formulaire par défaut
+2. Récupère les données du formulaire
+3. Convertit FormData en objet JavaScript
+4. Convertit champs numériques en nombres
+5. Envoie requête PUT à l'API
+6. Affiche message succès/erreur
+7. Ferme la modale
+8. Recharge les données pour rafraîchir l'affichage
+
+### 4. API Backend
+
+**Endpoint** : `PUT /api/peripherals/{peripheral_id}`
+
+**Fichier** : `backend/app/api/endpoints/peripherals.py` (ligne 177-187)
+
+```python
+@router.put("/{peripheral_id}", response_model=PeripheralDetail)
+def update_peripheral(
+ peripheral_id: int,
+ peripheral_data: PeripheralUpdate,
+ db: Session = Depends(get_peripherals_db)
+):
+ """Update a peripheral"""
+ peripheral = PeripheralService.update_peripheral(db, peripheral_id, peripheral_data)
+ if not peripheral:
+ raise HTTPException(status_code=404, detail="Peripheral not found")
+ return peripheral
+```
+
+**Schéma attendu** : `PeripheralUpdate` (Pydantic)
+
+**Retour** : `PeripheralDetail` (données complètes du périphérique)
+
+## 🔄 Flux d'utilisation
+
+```
+1. User clique "Modifier" dans page détail
+ ↓
+2. toggleEditMode() appelé
+ │ ├─> Vérifie que peripheral est chargé
+ │ ├─> Pré-remplit tous les champs du formulaire
+ │ ├─> Configure les étoiles de notation
+ │ └─> Affiche la modale
+ ↓
+3. User modifie les champs souhaités
+ │ └─> Peut cliquer sur les étoiles pour changer la note
+ ↓
+4. User clique "Enregistrer"
+ ↓
+5. savePeripheral() appelé
+ │ ├─> Récupère données du formulaire
+ │ ├─> Convertit types numériques
+ │ ├─> PUT /api/peripherals/{id}
+ │ └─> Backend met à jour en BDD
+ ↓
+6. Success
+ │ ├─> Message "Périphérique mis à jour avec succès"
+ │ ├─> Ferme modale
+ │ └─> Recharge peripheral pour afficher nouvelles données
+```
+
+## 📊 Champs éditables
+
+| Catégorie | Champ | Type | Requis |
+|-----------|-------|------|--------|
+| **Identification** | nom | text | ✅ |
+| | type_principal | text | ✅ |
+| | sous_type | text | |
+| | marque | text | |
+| | modele | text | |
+| | numero_serie | text | |
+| **Achat** | boutique | text | |
+| | date_achat | date | |
+| | prix | number | |
+| | devise | text(3) | |
+| | garantie_duree_mois | number | |
+| **État** | etat | select | |
+| | rating | number(0-5) | |
+| | quantite_totale | number | |
+| | quantite_disponible | number | |
+| **Documentation** | synthese | textarea | |
+| | cli_yaml | textarea | |
+| | cli_raw | textarea | |
+| | specifications | textarea | |
+| | notes | textarea | |
+
+**Total** : 22 champs éditables
+
+## 🎨 Interface utilisateur
+
+### Bouton "Modifier"
+
+**Position** : Dans le header de la carte "Informations générales"
+
+```html
+
+```
+
+**Style** :
+- Bouton bleu primaire
+- Icône crayon Font Awesome
+- Positionné à droite du header
+
+### Modale d'édition
+
+**Dimensions** :
+- Largeur : 95% (mobile) → max 1400px (desktop)
+- Layout : Grille responsive 3 colonnes
+
+**Sections** :
+- 3 colonnes pour les champs principaux
+- Pleine largeur pour documentation technique
+- Actions (Annuler / Enregistrer) en bas
+
+### Retour utilisateur
+
+**Messages** :
+- ✅ Succès : "Périphérique mis à jour avec succès" (vert)
+- ❌ Erreur : "Erreur lors de la mise à jour du périphérique" (rouge)
+- ⚠️ Validation : "Aucun périphérique chargé" (orange)
+
+## 🧪 Tests
+
+### Test manuel
+
+1. **Ouvrir page détail** : `/peripheral-detail.html?id=3`
+2. **Cliquer "Modifier"** : Modale s'ouvre avec données pré-remplies
+3. **Modifier champs** : Ex: changer nom, prix, note
+4. **Cliquer étoiles** : Note change visuellement
+5. **Cliquer "Enregistrer"** : Message succès + modale se ferme
+6. **Vérifier affichage** : Nouvelles valeurs affichées
+
+### Test API
+
+```bash
+# Mettre à jour un périphérique
+curl -X PUT "http://10.0.0.50:8007/api/peripherals/3" \
+ -H "Content-Type: application/json" \
+ -H "X-API-Token: YOUR_TOKEN" \
+ -d '{
+ "nom": "Logitech MX Master 3 (Updated)",
+ "prix": 99.99,
+ "rating": 5
+ }'
+```
+
+**Résultat attendu** :
+```json
+{
+ "id": 3,
+ "nom": "Logitech MX Master 3 (Updated)",
+ "prix": 99.99,
+ "rating": 5,
+ ...
+}
+```
+
+## 📝 Fichiers modifiés
+
+### Créés
+- ✅ `docs/FEATURE_EDIT_PERIPHERAL.md` - Cette documentation
+
+### Modifiés
+- ✅ `frontend/peripheral-detail.html` - Ajout modale d'édition
+- ✅ `frontend/js/peripheral-detail.js` - Fonctions édition complètes
+- ✅ `frontend/css/peripherals.css` - Style `.modal-large`
+
+### Backend (déjà existant)
+- ✅ `backend/app/api/endpoints/peripherals.py` - Endpoint PUT
+- ✅ `backend/app/services/peripheral_service.py` - Service update
+- ✅ `backend/app/schemas/peripheral.py` - Schema PeripheralUpdate
+
+## 🚀 Améliorations futures possibles
+
+- [ ] Validation côté client (longueurs, formats)
+- [ ] Champs device_id et location_id (dropdowns)
+- [ ] Confirmation avant fermeture si modifications non sauvegardées
+- [ ] Historique des modifications (audit trail)
+- [ ] Mode "édition rapide" (inline editing)
+- [ ] Raccourci clavier (Ctrl+E)
+
+---
+
+**Date** : 31 décembre 2025
+**Statut** : ✅ Implémenté et fonctionnel
+**Impact** : Permet l'édition complète des périphériques depuis la page de détail
diff --git a/docs/FEATURE_INTELLIGENT_CLASSIFICATION.md b/docs/FEATURE_INTELLIGENT_CLASSIFICATION.md
new file mode 100755
index 0000000..2c7e3a0
--- /dev/null
+++ b/docs/FEATURE_INTELLIGENT_CLASSIFICATION.md
@@ -0,0 +1,507 @@
+# Feature: Classification intelligente des périphériques
+
+## Vue d'ensemble
+
+Détection automatique du `type_principal` et `sous_type` des périphériques basée sur l'analyse du contenu CLI et des fichiers markdown.
+
+Le système analyse intelligemment :
+- Le contenu de la sortie `lsusb -v`
+- Les fichiers markdown importés
+- Les vendor/product IDs
+- Les classes USB
+- Les chaînes de caractères (manufacturer, product)
+
+## Fonctionnement
+
+### Stratégies de détection (par ordre de priorité)
+
+1. **USB Device Class** - Basé sur `bDeviceClass`
+ - `08` → Clé USB (Mass Storage)
+ - `03` → HID (Clavier/Souris, affiné par mots-clés)
+ - `0e` → Webcam (Video)
+ - `09` → Hub
+ - `e0` → Bluetooth (Wireless Controller)
+
+2. **Vendor/Product Info** - Analyse des IDs et chaînes
+ - Recherche de mots-clés dans manufacturer/product strings
+ - Matching sur vendor_id/product_id connus
+
+3. **Analyse du contenu CLI** - Mots-clés dans `lsusb -v`
+ - WiFi : `wifi`, `wireless`, `802.11`, `wlan`, `rtl81xx`, `mt76xx`
+ - Bluetooth : `bluetooth`, `bcm20702`
+ - Storage : `mass storage`, `flash drive`, `sandisk`
+ - Hub : `usb hub`, `multi-port`
+ - Keyboard : `keyboard`, `clavier`, `hid.*keyboard`
+ - Mouse : `mouse`, `souris`
+ - Webcam : `webcam`, `camera`, `uvc`
+ - Ethernet : `ethernet`, `gigabit`, `rtl81xx.*ethernet`
+
+4. **Analyse du markdown** - Mots-clés dans le fichier .md
+ - Même système de patterns que pour le CLI
+ - Utilisé lors de l'import de fichiers markdown
+
+### Système de scoring
+
+- Chaque mot-clé trouvé augmente le score d'un type
+- Le type avec le meilleur score est sélectionné
+- Si aucun match : fallback sur `("USB", "Autre")`
+
+## Exemples de détection
+
+### Exemple 1 : Adaptateur WiFi
+
+**Input CLI :**
+```
+Bus 002 Device 005: ID 0bda:8176 Realtek RTL8188CUS
+ bDeviceClass 0
+ iManufacturer 1 Realtek
+ iProduct 2 802.11n WLAN Adapter
+```
+
+**Détection :**
+- Mots-clés trouvés : `realtek`, `rtl8176`, `802.11n`, `wlan`
+- **Résultat : `type_principal = "USB"`, `sous_type = "Adaptateur WiFi"`**
+
+### Exemple 2 : Clé USB
+
+**Input CLI :**
+```
+Bus 002 Device 003: ID 0781:55ab SanDisk Corp.
+ bDeviceClass 0
+ bDeviceSubClass 0
+ bDeviceProtocol 0
+ iManufacturer 1 USB
+ iProduct 2 SanDisk 3.2Gen1
+ Interface Class: 08 — Mass Storage
+```
+
+**Détection :**
+- Device Class 08 trouvé → Mass Storage
+- Mots-clés : `sandisk`, `mass storage`
+- **Résultat : `type_principal = "USB"`, `sous_type = "Clé USB"`**
+
+### Exemple 3 : Bluetooth
+
+**Input CLI :**
+```
+Bus 001 Device 004: ID 0b05:17cb ASUSTek
+ bDeviceClass 224 Wireless
+ iManufacturer 1 Broadcom Corp
+ iProduct 2 BCM20702A0
+```
+
+**Détection :**
+- Device Class e0 (Wireless Controller)
+- Mots-clés : `bluetooth`, `bcm20702`
+- **Résultat : `type_principal = "Bluetooth"`, `sous_type = "Autre"`**
+
+### Exemple 4 : Import markdown
+
+**Fichier : `ID_0bda_8176.md`**
+```markdown
+# USB Device ID 0bda_8176
+
+## Description
+Realtek RTL8188CUS – Wi‑Fi USB
+```
+
+**Détection :**
+- Analyse du contenu markdown
+- Mots-clés : `wi-fi`, `usb`, `realtek`
+- IDs extraits du nom de fichier : `vendor_id=0x0bda`, `product_id=0x8176`
+- **Résultat : `type_principal = "USB"`, `sous_type = "Adaptateur WiFi"`**
+
+## Fichiers modifiés
+
+### Backend
+
+#### 1. Nouveau classificateur
+
+**`backend/app/utils/device_classifier.py`** (NOUVEAU)
+
+Classe `DeviceClassifier` avec méthodes :
+
+```python
+@staticmethod
+def classify_device(cli_content: Optional[str] = None,
+ synthese_content: Optional[str] = None,
+ device_info: Optional[Dict] = None) -> Tuple[str, str]:
+ """
+ Classify a device using all available information
+ Returns: (type_principal, sous_type)
+ """
+```
+
+Dictionnaire `TYPE_KEYWORDS` - Mapping (type, sous_type) → liste de patterns regex
+
+Dictionnaire `USB_CLASS_MAPPING` - Mapping USB class code → (type, sous_type)
+
+#### 2. Endpoints modifiés
+
+**`backend/app/api/endpoints/peripherals.py`**
+
+**Ligne 28** - Import du classificateur :
+```python
+from app.utils.device_classifier import DeviceClassifier
+```
+
+**Ligne 737-746** - USB CLI extraction avec détection intelligente :
+```python
+# Intelligent classification of device type
+type_principal, sous_type = DeviceClassifier.classify_device(
+ cli_content=device_section,
+ synthese_content=None,
+ device_info=device_info
+)
+
+# Refine Bluetooth subtype if needed
+if type_principal == "Bluetooth" and sous_type == "Autre":
+ sous_type = DeviceClassifier.refine_bluetooth_subtype(device_section)
+```
+
+**Ligne 589-614** - Import markdown avec détection intelligente :
+```python
+# Intelligent classification of device type from markdown content
+type_principal = parsed_data.get("type_principal")
+sous_type = parsed_data.get("sous_type")
+
+if not type_principal or not sous_type:
+ device_info = {
+ "vendor_id": parsed_data.get("caracteristiques_specifiques", {}).get("vendor_id"),
+ "product_id": parsed_data.get("caracteristiques_specifiques", {}).get("product_id"),
+ "manufacturer": parsed_data.get("marque"),
+ "product": parsed_data.get("modele"),
+ "device_class": parsed_data.get("caracteristiques_specifiques", {}).get("device_class"),
+ }
+
+ detected_type_principal, detected_sous_type = DeviceClassifier.classify_device(
+ cli_content=None,
+ synthese_content=md_content,
+ device_info=device_info
+ )
+
+ if not type_principal:
+ type_principal = detected_type_principal
+ if not sous_type:
+ sous_type = detected_sous_type
+```
+
+**Ligne 625** - Stockage de la synthèse markdown :
+```python
+"synthese": md_content, # Store the full markdown content in synthese field
+```
+
+### Frontend
+
+**`frontend/js/peripherals.js`** - Ligne 452-477
+
+Amélioration du pré-remplissage avec logique robuste :
+
+```javascript
+// Set type_principal and wait for subtypes to load before setting sous_type
+if (suggested.type_principal) {
+ document.getElementById('type_principal').value = suggested.type_principal;
+
+ // Trigger the change event to load subtypes
+ const typePrincipalSelect = document.getElementById('type_principal');
+ const changeEvent = new Event('change');
+ typePrincipalSelect.dispatchEvent(changeEvent);
+
+ // Wait for subtypes to load, then set sous_type
+ if (suggested.sous_type) {
+ // Use a Promise-based approach with retry logic
+ const setSousType = async () => {
+ for (let i = 0; i < 10; i++) {
+ await new Promise(resolve => setTimeout(resolve, 100));
+ const sousTypeSelect = document.getElementById('sous_type');
+ if (sousTypeSelect && sousTypeSelect.options.length > 1) {
+ // Options are loaded
+ sousTypeSelect.value = suggested.sous_type;
+ break;
+ }
+ }
+ };
+ setSousType();
+ }
+}
+```
+
+**Amélioration** : Retry logic avec vérification du chargement des options au lieu d'un simple timeout
+
+## Flows utilisateur
+
+### Flow 1 : Import USB avec CLI
+
+1. Utilisateur clique **"Importer USB"**
+2. Popup : colle la sortie de `lsusb -v`
+3. Click **"Importer"**
+4. Backend détecte les périphériques
+5. Popup 2 : liste avec radio buttons
+6. Utilisateur sélectionne un périphérique
+7. Click **"Finaliser"**
+8. **Backend analyse le CLI et détecte automatiquement le type**
+9. Formulaire s'ouvre avec :
+ - `type_principal` = **"USB"** (pré-sélectionné)
+ - `sous_type` = **"Adaptateur WiFi"** (pré-sélectionné automatiquement)
+ - `nom`, `marque`, `modele`, `numero_serie` pré-remplis
+ - `cli` contient le markdown formaté
+
+### Flow 2 : Import fichier markdown
+
+1. Utilisateur clique **"Importer Markdown"**
+2. Sélectionne un fichier `.md`
+3. **Backend lit et analyse le contenu**
+4. **Détecte le type automatiquement depuis le markdown**
+5. Formulaire s'ouvre avec :
+ - `type_principal` et `sous_type` pré-sélectionnés
+ - `synthese` contient le contenu markdown complet
+ - Autres champs extraits du markdown
+
+## Patterns de détection supportés
+
+### WiFi/Wireless
+
+```regex
+wi[‑-]?fi
+wireless
+802\.11[a-z]
+rtl81\d+ # Realtek WiFi chips
+mt76\d+ # MediaTek WiFi chips
+atheros
+qualcomm.*wireless
+broadcom.*wireless
+wlan
+wireless\s+adapter
+```
+
+### Bluetooth
+
+```regex
+bluetooth
+bcm20702 # Broadcom BT chips
+bt\s+adapter
+```
+
+### Storage - Clé USB
+
+```regex
+flash\s+drive
+usb\s+stick
+cruzer # SanDisk Cruzer series
+datatraveler # Kingston DataTraveler
+usb.*flash
+clé\s+usb
+pendrive
+```
+
+### Storage - Disque dur externe
+
+```regex
+external\s+hdd
+external\s+ssd
+portable\s+ssd
+portable\s+drive
+disk\s+drive
+disque\s+dur\s+externe
+my\s+passport # WD My Passport
+expansion # Seagate Expansion
+backup\s+plus # Seagate Backup Plus
+elements # WD Elements
+touro # Hitachi Touro
+adata.*hd\d+ # ADATA external drives
+```
+
+### Storage - Lecteur de carte
+
+```regex
+card\s+reader
+lecteur.*carte
+sd.*reader
+microsd.*reader
+multi.*card
+cf.*reader
+```
+
+### Hub
+
+```regex
+usb\s+hub
+hub\s+controller
+multi[‑-]?port
+```
+
+### ZigBee
+
+```regex
+zigbee
+conbee # Dresden Elektronik ConBee
+cc2531 # Texas Instruments ZigBee chip
+cc2652 # TI newer ZigBee chip
+dresden\s+elektronik
+zigbee.*gateway
+zigbee.*coordinator
+thread.*border
+```
+
+### Lecteur biométrique (Fingerprint)
+
+```regex
+fingerprint
+fingprint # Common typo
+empreinte
+biometric
+biométrique
+validity.*sensor # Validity sensors
+synaptics.*fingerprint
+goodix.*fingerprint
+elan.*fingerprint
+```
+
+### Clavier
+
+```regex
+keyboard
+clavier
+hid.*keyboard
+```
+
+### Souris
+
+```regex
+mouse
+souris
+hid.*mouse
+optical\s+mouse
+```
+
+### Webcam
+
+```regex
+webcam
+camera
+video\s+capture
+uvc # USB Video Class
+```
+
+### Ethernet
+
+```regex
+ethernet
+gigabit
+network\s+adapter
+lan\s+adapter
+rtl81\d+.*ethernet
+```
+
+## Extensibilité
+
+Pour ajouter un nouveau type de périphérique :
+
+1. **Ajouter le type dans `config/peripheral_types.yaml`**
+
+```yaml
+- id: usb_nouveau_type
+ nom: Nouveau Type USB
+ type_principal: USB
+ sous_type: Mon Nouveau Type
+ icone: icon-name
+```
+
+2. **Ajouter les patterns dans `device_classifier.py`**
+
+```python
+TYPE_KEYWORDS = {
+ # ...
+ ("USB", "Mon Nouveau Type"): [
+ r"pattern1",
+ r"pattern2",
+ r"mot[‑-]?clé",
+ ],
+}
+```
+
+3. **Redémarrer le backend**
+
+Le nouveau type sera automatiquement :
+- Détectable lors des imports
+- Disponible dans les dropdowns
+- Pré-sélectionné si les patterns matchent
+
+## Avantages
+
+✅ **Gain de temps** - Plus besoin de sélectionner manuellement le type
+✅ **Précision** - Détection basée sur plusieurs sources d'information
+✅ **Extensible** - Facile d'ajouter de nouveaux types et patterns
+✅ **Robuste** - Fallback sur "USB / Autre" si détection impossible
+✅ **Multilingue** - Supporte patterns français et anglais
+✅ **Flexible** - Fonctionne avec CLI et markdown
+
+## Limitations actuelles
+
+⚠️ **Périphériques hybrides** - Un Unifying Receiver est détecté comme "USB / Autre" car il peut être clavier OU souris
+⚠️ **Périphériques rares** - Types exotiques non couverts par les patterns
+⚠️ **Patterns manquants** - Certains fabricants utilisent des termes non standards
+
+## Améliorations futures
+
+1. **Machine Learning** - Entraîner un modèle sur les périphériques existants
+2. **Base de données USB ID** - Intégration avec `usb.ids` pour reconnaissance par vendor/product
+3. **Détection multi-fonction** - Support des périphériques combinés (ex: hub + ethernet)
+4. **Historique** - Apprendre des corrections manuelles utilisateur
+5. **API externe** - Interroger des APIs publiques (USB ID Repository)
+
+## Tests
+
+### Test 1 : WiFi Realtek
+
+```bash
+# Préparer un fichier test
+cat > /tmp/test_wifi.txt << 'EOF'
+Bus 002 Device 005: ID 0bda:8176 Realtek Semiconductor Corp.
+ bDeviceClass 0
+ iManufacturer 1 Realtek
+ iProduct 2 802.11n WLAN Adapter
+EOF
+
+# Dans l'interface :
+# 1. Importer USB
+# 2. Coller le contenu
+# 3. Sélectionner le périphérique
+# 4. Vérifier : type_principal = "USB", sous_type = "Adaptateur WiFi"
+```
+
+**Résultat attendu** : ✅ Détection automatique comme "Adaptateur WiFi"
+
+### Test 2 : Clé USB SanDisk
+
+```bash
+cat > /tmp/test_storage.txt << 'EOF'
+Bus 002 Device 003: ID 0781:55ab SanDisk Corp.
+ bDeviceClass 0
+ iProduct 2 SanDisk 3.2Gen1
+ bInterfaceClass 8 Mass Storage
+EOF
+
+# Même procédure
+```
+
+**Résultat attendu** : ✅ Détection comme "Clé USB"
+
+### Test 3 : Import markdown WiFi
+
+```bash
+# Utiliser le fichier existant
+# fichier_usb/ID_0bda_8176.md
+```
+
+**Résultat attendu** : ✅ Détection automatique depuis le markdown
+
+## Logs de détection
+
+Pour débugger la détection, ajouter des logs dans `DeviceClassifier.classify_device()` :
+
+```python
+logger.info(f"Classification attempt - CLI: {bool(cli_content)}, Synthese: {bool(synthese_content)}")
+logger.info(f"Device info: {device_info}")
+logger.info(f"Detected: type_principal={type_principal}, sous_type={sous_type}")
+```
diff --git a/docs/FEATURE_PRIMARY_PHOTO_TOGGLE.md b/docs/FEATURE_PRIMARY_PHOTO_TOGGLE.md
new file mode 100755
index 0000000..3d11499
--- /dev/null
+++ b/docs/FEATURE_PRIMARY_PHOTO_TOGGLE.md
@@ -0,0 +1,294 @@
+# Fonctionnalité : Icône cliquable pour photo principale
+
+## 🎯 Objectif
+
+Ajouter une icône cliquable en bas à gauche de chaque photo dans la galerie pour permettre de définir facilement quelle photo sera utilisée comme vignette principale (thumbnail).
+
+## ✅ Implémentation
+
+### 1. Interface utilisateur
+
+**Fichier** : `frontend/js/peripheral-detail.js` (lignes 108-112)
+
+```javascript
+
+```
+
+**Icônes** :
+- ⭕ `circle` (non cochée) - Photo normale
+- ✅ `check-circle` (cochée) - Photo principale
+
+### 2. Style CSS
+
+**Fichier** : `frontend/css/peripherals.css` (lignes 764-803)
+
+```css
+/* Photo Primary Toggle */
+.photo-primary-toggle {
+ position: absolute;
+ bottom: 8px;
+ left: 8px;
+ background: rgba(0, 0, 0, 0.7);
+ border: 2px solid #666;
+ border-radius: 50%;
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ color: #999;
+ font-size: 16px;
+ z-index: 10;
+}
+
+.photo-primary-toggle:hover {
+ background: rgba(0, 0, 0, 0.85);
+ border-color: #66d9ef;
+ color: #66d9ef;
+ transform: scale(1.1);
+}
+
+.photo-primary-toggle.active {
+ background: rgba(102, 217, 239, 0.2);
+ border-color: #66d9ef;
+ color: #66d9ef;
+}
+
+.photo-primary-toggle.active:hover {
+ background: rgba(102, 217, 239, 0.3);
+}
+
+.photo-item {
+ position: relative;
+}
+```
+
+**Caractéristiques** :
+- Position : Coin inférieur gauche de chaque photo
+- Taille : 32×32px, bouton rond
+- États : normal (gris), hover (bleu), active (bleu clair)
+- Effet : Scale 1.1 au hover
+- Z-index élevé pour rester au-dessus de l'image
+
+### 3. Fonction JavaScript
+
+**Fichier** : `frontend/js/peripheral-detail.js` (lignes 239-252)
+
+```javascript
+// Set photo as primary
+async function setPrimaryPhoto(photoId) {
+ try {
+ await apiRequest(`/peripherals/${peripheralId}/photos/${photoId}/set-primary`, {
+ method: 'POST'
+ });
+
+ showSuccess('Photo principale définie');
+ loadPhotos(); // Reload to update icons
+ } catch (error) {
+ console.error('Error setting primary photo:', error);
+ showError('Erreur lors de la définition de la photo principale');
+ }
+}
+```
+
+**Processus** :
+1. Appel API POST pour définir la photo comme principale
+2. Message de succès
+3. Rechargement de la galerie pour mettre à jour les icônes
+
+### 4. Endpoint API Backend
+
+**Fichier** : `backend/app/api/endpoints/peripherals.py` (lignes 370-396)
+
+```python
+@router.post("/{peripheral_id}/photos/{photo_id}/set-primary", status_code=200)
+def set_primary_photo(
+ peripheral_id: int,
+ photo_id: int,
+ db: Session = Depends(get_peripherals_db)
+):
+ """Set a photo as primary (thumbnail)"""
+ # Get the photo
+ photo = db.query(PeripheralPhoto).filter(
+ PeripheralPhoto.id == photo_id,
+ PeripheralPhoto.peripheral_id == peripheral_id
+ ).first()
+
+ if not photo:
+ raise HTTPException(status_code=404, detail="Photo not found")
+
+ # Unset all other primary photos for this peripheral
+ db.query(PeripheralPhoto).filter(
+ PeripheralPhoto.peripheral_id == peripheral_id,
+ PeripheralPhoto.id != photo_id
+ ).update({"is_primary": False})
+
+ # Set this photo as primary
+ photo.is_primary = True
+ db.commit()
+
+ return {"message": "Photo set as primary", "photo_id": photo_id}
+```
+
+**Logique** :
+1. Vérifie que la photo existe et appartient au périphérique
+2. Retire le flag `is_primary` de toutes les autres photos
+3. Définit `is_primary=True` pour la photo sélectionnée
+4. Garantit qu'une seule photo est principale à la fois
+
+## 🎨 Rendu visuel
+
+### Galerie de photos
+
+```
+┌─────────────┐ ┌─────────────┐ ┌─────────────┐
+│ │ │ │ │ │
+│ Photo 1 │ │ Photo 2 │ │ Photo 3 │
+│ │ │ │ │ │
+│ ⭕ │ │ ✅ │ │ ⭕ │
+│ [🗑️] │ │ [🗑️] │ │ [🗑️] │
+│ ★ Principale│ │ │ │ │
+└─────────────┘ └─────────────┘ └─────────────┘
+```
+
+**Légende** :
+- ⭕ = Icône ronde grise (non sélectionnée)
+- ✅ = Icône check bleu cyan (sélectionnée)
+- ★ = Badge "Principale" (affiché en haut)
+- 🗑️ = Bouton supprimer (en haut à droite)
+
+### États de l'icône
+
+| État | Apparence | Couleur | Comportement |
+|------|-----------|---------|--------------|
+| **Normal** | ⭕ Circle | Gris #999 | Cliquable |
+| **Hover** | ⭕ Circle agrandie | Bleu #66d9ef | Scale 1.1 |
+| **Active** | ✅ Check-circle | Bleu #66d9ef | Fond bleu clair |
+| **Active + Hover** | ✅ Check-circle | Bleu plus clair | Rétroaction visuelle |
+
+## 🔄 Flux d'utilisation
+
+```
+1. User voit la galerie de photos
+ ↓
+2. Chaque photo affiche une icône ⭕/✅ en bas à gauche
+ ↓
+3. User clique sur une icône ⭕ (non sélectionnée)
+ ↓
+4. setPrimaryPhoto(photoId) appelé
+ │ ├─> POST /api/peripherals/{id}/photos/{photo_id}/set-primary
+ │ └─> Backend met à jour is_primary
+ ↓
+5. Base de données mise à jour
+ │ ├─> Ancienne photo principale : is_primary = false
+ │ └─> Nouvelle photo : is_primary = true
+ ↓
+6. Success
+ │ ├─> Message "Photo principale définie"
+ │ ├─> Galerie rechargée
+ │ └─> Icônes mises à jour (✅ sur la nouvelle, ⭕ sur les autres)
+```
+
+## 📊 Règles métier
+
+### Contraintes
+
+1. **Une seule photo principale** par périphérique
+ - Définie automatiquement lors de la sélection
+ - Les autres sont désélectionnées automatiquement
+
+2. **Photo principale = Vignette**
+ - Utilisée dans les listes de périphériques
+ - Affichée comme aperçu principal
+
+3. **Upload avec is_primary**
+ - Possibilité de cocher lors de l'upload
+ - Si cochée, retire le flag des autres
+
+### Avantages
+
+- ✅ **Interface intuitive** : Un clic pour changer
+- ✅ **Visuel clair** : États bien différenciés
+- ✅ **Feedback immédiat** : Message + rechargement
+- ✅ **Cohérence** : Une seule photo principale garantie
+
+## 🧪 Tests
+
+### Test manuel
+
+1. **Ouvrir page détail** : Aller sur `/peripheral-detail.html?id=3`
+2. **Observer les icônes** : Voir ⭕ ou ✅ en bas à gauche de chaque photo
+3. **Hover sur icône** : Vérifier effet scale + changement couleur
+4. **Cliquer icône non cochée** :
+ - Message "Photo principale définie"
+ - Icône devient ✅
+ - Autres icônes deviennent ⭕
+5. **Vérifier badge** : Badge "★ Principale" sur la photo cochée
+
+### Test API
+
+```bash
+# Définir photo ID 5 comme principale pour périphérique 3
+curl -X POST "http://10.0.0.50:8007/api/peripherals/3/photos/5/set-primary" \
+ -H "X-API-Token: YOUR_TOKEN"
+```
+
+**Résultat attendu** :
+```json
+{
+ "message": "Photo set as primary",
+ "photo_id": 5
+}
+```
+
+### Vérification base de données
+
+```bash
+docker exec linux_benchtools_backend python3 -c "
+import sqlite3
+conn = sqlite3.connect('/app/data/peripherals.db')
+cursor = conn.cursor()
+cursor.execute('SELECT id, filename, is_primary FROM peripheral_photos WHERE peripheral_id = 3')
+for row in cursor.fetchall():
+ print(f'Photo {row[0]}: {row[1]} - Primary: {row[2]}')
+"
+```
+
+**Résultat attendu** :
+```
+Photo 4: image1.png - Primary: 0
+Photo 5: image2.png - Primary: 1 ← Une seule
+Photo 6: image3.png - Primary: 0
+```
+
+## 📝 Fichiers modifiés
+
+### Frontend
+- ✅ `frontend/js/peripheral-detail.js` - Ajout bouton + fonction setPrimaryPhoto()
+- ✅ `frontend/css/peripherals.css` - Style .photo-primary-toggle
+
+### Backend
+- ✅ `backend/app/api/endpoints/peripherals.py` - Endpoint POST set-primary
+
+### Documentation
+- ✅ `docs/FEATURE_PRIMARY_PHOTO_TOGGLE.md` - Cette documentation
+
+## 💡 Améliorations futures possibles
+
+- [ ] Drag & drop pour réorganiser les photos
+- [ ] Double-clic sur photo pour la définir comme principale
+- [ ] Raccourci clavier (ex: P pour Primary)
+- [ ] Animation de transition entre photos principales
+- [ ] Preview de la vignette avant validation
+
+---
+
+**Date** : 31 décembre 2025
+**Statut** : ✅ Implémenté et fonctionnel
+**Impact** : Interface intuitive pour choisir la photo principale
diff --git a/docs/FEATURE_THUMBNAILS_IN_LIST.md b/docs/FEATURE_THUMBNAILS_IN_LIST.md
new file mode 100755
index 0000000..30e5df0
--- /dev/null
+++ b/docs/FEATURE_THUMBNAILS_IN_LIST.md
@@ -0,0 +1,386 @@
+# Fonctionnalité : Miniatures dans la liste des périphériques
+
+## 🎯 Objectif
+
+Afficher les miniatures (thumbnails) de 48px dans la liste des périphériques au lieu de l'icône générique.
+
+**Comportement** :
+- Si le périphérique a une photo principale → Afficher la miniature
+- Si pas de photo → Afficher l'icône ``
+- Si l'image ne charge pas (erreur) → Fallback vers l'icône
+
+---
+
+## ✅ Implémentation
+
+### 1. Backend - Schéma API
+
+**Fichier** : `backend/app/schemas/peripheral.py` (ligne 150)
+
+**Modification** : Ajout du champ `thumbnail_url` au schéma `PeripheralSummary`
+
+```python
+class PeripheralSummary(BaseModel):
+ """Summary schema for peripheral lists"""
+ id: int
+ nom: str
+ type_principal: str
+ sous_type: Optional[str]
+ marque: Optional[str]
+ modele: Optional[str]
+ etat: str
+ rating: float
+ prix: Optional[float]
+ en_pret: bool
+ is_complete_device: bool
+ quantite_disponible: int
+ thumbnail_url: Optional[str] = None # ← Nouveau champ
+
+ class Config:
+ from_attributes = True
+```
+
+**Résultat** : L'API retourne maintenant l'URL du thumbnail pour chaque périphérique dans la liste.
+
+---
+
+### 2. Backend - Service
+
+**Fichier** : `backend/app/services/peripheral_service.py` (lignes 179-210)
+
+**Modification** : Récupération de la photo principale et construction de l'URL
+
+```python
+# Import PeripheralPhoto here to avoid circular import
+from app.models.peripheral import PeripheralPhoto
+
+# Convert to summary
+items = []
+for p in peripherals:
+ # Get primary photo thumbnail
+ thumbnail_url = None
+ primary_photo = db.query(PeripheralPhoto).filter(
+ PeripheralPhoto.peripheral_id == p.id,
+ PeripheralPhoto.is_primary == True
+ ).first()
+
+ if primary_photo and primary_photo.thumbnail_path:
+ # Convert file path to URL
+ thumbnail_url = primary_photo.thumbnail_path.replace('/app/uploads/', '/uploads/')
+
+ items.append(PeripheralSummary(
+ id=p.id,
+ nom=p.nom,
+ type_principal=p.type_principal,
+ sous_type=p.sous_type,
+ marque=p.marque,
+ modele=p.modele,
+ etat=p.etat or "Inconnu",
+ rating=p.rating or 0.0,
+ prix=p.prix,
+ en_pret=p.en_pret or False,
+ is_complete_device=p.is_complete_device or False,
+ quantite_disponible=p.quantite_disponible or 0,
+ thumbnail_url=thumbnail_url # ← Ajout du thumbnail
+ ))
+```
+
+**Logique** :
+1. Pour chaque périphérique, requête SQL pour trouver la photo avec `is_primary = True`
+2. Si une photo principale existe et a un `thumbnail_path` :
+ - Convertir le chemin serveur (`/app/uploads/...`) en URL web (`/uploads/...`)
+3. Sinon : `thumbnail_url = None`
+
+**Exemple de résultat API** :
+```json
+{
+ "items": [
+ {
+ "id": 6,
+ "nom": "USB Receiver",
+ "thumbnail_url": "/uploads/peripherals/photos/6/thumbnail/logitechreceiver_thumb_20251231_101254.png"
+ },
+ {
+ "id": 5,
+ "nom": "Flash Card Reader/Writer",
+ "thumbnail_url": null
+ }
+ ],
+ "total": 46,
+ "page": 1,
+ "page_size": 10,
+ "total_pages": 5
+}
+```
+
+---
+
+### 3. Frontend - JavaScript
+
+**Fichier** : `frontend/js/peripherals.js` (lignes 325-329)
+
+**Modification** : Affichage conditionnel de l'image ou de l'icône
+
+```javascript
+
+ ${p.thumbnail_url
+ ? `})
+ `
+ : ``
+ }
+
+```
+
+**Logique** :
+- **Si `thumbnail_url` existe** :
+ - Afficher `
+ 
+
+
+```
+
+**Rendu** : Image du thumbnail (48px de large, ratio conservé)
+
+---
+
+### Exemple 2 : Périphérique sans photo
+
+**API Response** :
+```json
+{
+ "id": 5,
+ "nom": "Flash Card Reader/Writer",
+ "thumbnail_url": null
+}
+```
+
+**HTML généré** :
+```html
+
+
+
+
+
+```
+
+**Rendu** : Icône générique de puce électronique
+
+---
+
+### Exemple 3 : Image qui ne charge pas (erreur)
+
+**Scénario** : Le fichier thumbnail est supprimé mais l'URL existe en base
+
+**API Response** :
+```json
+{
+ "id": 7,
+ "nom": "Peripheral Test",
+ "thumbnail_url": "/uploads/peripherals/photos/7/thumbnail/deleted.png"
+}
+```
+
+**HTML généré** :
+```html
+
+ 
+
+
+```
+
+**Comportement** :
+1. Navigateur tente de charger l'image
+2. Image introuvable → Event `onerror` déclenché
+3. JavaScript cache l'image (`display:none`)
+4. JavaScript affiche l'icône (`display:flex`)
+
+**Rendu final** : Icône générique (fallback automatique)
+
+---
+
+## 🔄 Flux complet
+
+```
+1. User charge page /peripherals.html
+ ↓
+2. JavaScript appelle GET /api/peripherals/?page=1&page_size=10
+ ↓
+3. Backend service list_peripherals()
+ │ ├─> Query périphériques (avec pagination)
+ │ └─> Pour chaque périphérique:
+ │ ├─> Query photo principale (is_primary=True)
+ │ └─> Si photo existe: thumbnail_url = "/uploads/..."
+ ↓
+4. API retourne JSON avec items[].thumbnail_url
+ ↓
+5. JavaScript génère HTML du tableau
+ │ ├─> Si thumbnail_url →
+
+
+
+
+
+```
+
+**Position** : Entre "Note" et "Quantité totale"
+
+### Solution JavaScript
+
+**Fichier** : `frontend/js/peripheral-detail.js` (lignes 512-539)
+
+**1. Appel dans `toggleEditMode()` (ligne 513)** :
+
+```javascript
+// Load and set location
+loadEditLocations(peripheral.location_id);
+```
+
+**2. Nouvelle fonction `loadEditLocations()`** :
+
+```javascript
+// Load locations for edit modal
+async function loadEditLocations(selectedLocationId) {
+ try {
+ const locations = await apiRequest('/locations/');
+ const select = document.getElementById('edit-location_id');
+
+ select.innerHTML = '';
+
+ locations.forEach(location => {
+ const option = document.createElement('option');
+ option.value = location.id;
+ option.textContent = location.nom;
+ if (location.id === selectedLocationId) {
+ option.selected = true;
+ }
+ select.appendChild(option);
+ });
+ } catch (error) {
+ console.error('Error loading locations:', error);
+ }
+}
+```
+
+**Fonctionnement** :
+1. Appel API `GET /locations/` pour récupérer toutes les localisations
+2. Peuplement du `