## 📖 Guide d'Utilisation - ihm_client

Guide complet pour utiliser l'interface utilisateur ihm_client au quotidien.

## 🚀 Démarrage Rapide

### Démarrage du Serveur de Développement

```bash
## Démarrer le serveur de développement
npm run dev

## Le serveur démarre sur http://localhost:3000
## Hot reload activé pour le développement
```

### Accès à l'Interface

1. **Ouvrir le navigateur** : http://localhost:3000
2. **Page d'accueil** : Vue d'ensemble et navigation
3. **Connexion** : Via adresse device ou QR code

## 🏠 Page d'Accueil

### Navigation Principale

- **🏠 Accueil** - Vue d'ensemble et navigation
- **👤 Compte** - Gestion du profil utilisateur

### Tableau de Bord

- **Statistiques personnelles** : Processus actifs, documents signés
- **Notifications récentes** : Alertes et mises à jour
- **Actions rapides** : Créer un processus, scanner QR code
- **État du wallet** : Solde et transactions récentes

## 👤 Gestion du Compte

### Profil Utilisateur

#### Accès au Profil
1. Cliquer sur la bulle de profil en haut à gauche
2. Popup de profil s'ouvre avec les informations personnelles

#### Informations Modifiables
- **Nom et prénom** : Éditer directement dans les champs
- **Photo de profil** : Cliquer pour changer l'image
- **Email** : Adresse de contact (lecture seule)
- **Adresse device** : Identifiant unique (lecture seule)

#### Actions du Profil

##### Export User Data
```bash
## Génère un fichier JSON avec toutes les données utilisateur
## Inclut : profil, processus, documents, wallet
```

##### Export Recovery
```bash
## Génère les 4 mots de récupération
## IMPORTANT : Noter et conserver en lieu sûr
## Le bouton devient inaccessible après utilisation
```

##### Delete Account
```bash
## Supprime définitivement le compte
## Demande de confirmation obligatoire
## Action irréversible
```

##### Logout
```bash
## Déconnexion de l'interface
## Retour à la page de connexion
```

### Onglet Pairing

#### Ajouter un Device
1. Cliquer sur "Add Device"
2. Choisir la méthode :
   - **Scanner QR Code** : Scanner le code d'un autre device
   - **Saisir manuellement** : Entrer l'adresse device

#### Gérer les Devices
- **Renommer** : Cliquer sur le nom pour l'éditer
- **Supprimer** : Cliquer sur l'icône poubelle
- **Statut** : En ligne/hors ligne

#### Scanner QR Code
1. Cliquer sur "Scan QR Code"
2. Autoriser l'accès à la caméra
3. Pointer vers le QR code
4. Confirmation automatique

### Onglet Wallet

#### Gestion des Wallets
- **Voir le solde** : Affichage en temps réel
- **Ajouter une ligne** : Nouveau wallet Silent Payment
- **Historique** : Transactions récentes
- **Détails** : Cliquer pour plus d'informations

#### Opérations Wallet
```bash
## Générer un nouveau wallet
generate_sp_wallet()

## Verrouiller des UTXOs
lock_freezed_utxos(wallet, utxos)

## Scanner des blocs
scan_blocks(wallet, blocks)
```

### Onglet Process

#### Processus Disponibles
- **Liste des processus** : Tous les processus accessibles
- **Notifications** : Cliquer sur la sonnette pour voir les alertes
- **Statut** : Actif, en attente, terminé
- **Actions** : Voir, modifier, supprimer

#### Créer un Processus
1. Cliquer sur "Nouveau Processus"
2. Remplir les informations :
   - **Nom** : Nom du processus
   - **Description** : Détails du processus
   - **Membres** : Ajouter des participants
   - **Rôles** : Définir les responsabilités
3. Valider la création

### Onglet Data

#### Données Importées
- **Liste des données** : Fichiers JSON importés
- **Contrats associés** : Cliquer pour voir le contrat
- **Statut** : Validé, en cours, rejeté
- **Actions** : Voir, modifier, supprimer

## 📄 Gestion des Processus

### Vue d'Ensemble

#### Onglets du Processus
- **📋 Informations** : Détails du processus
- **👥 Membres** : Participants et rôles
- **📁 Documents** : Fichiers associés
- **✍️ Signatures** : Demandes de signature
- **💬 Chat** : Communication interne

### Gestion des Membres

#### Ajouter un Membre
1. Cliquer sur "Ajouter Membre"
2. Choisir la méthode :
   - **Scanner QR Code** : Invitation directe
   - **Envoyer un lien** : Lien d'invitation
   - **Saisir l'adresse** : Adresse device manuelle

#### Assigner des Rôles
1. Sélectionner un membre
2. Cliquer sur "Assigner Rôle"
3. Choisir le rôle :
   - **Admin** : Gestion complète
   - **Signataire** : Peut signer des documents
   - **Lecteur** : Lecture seule
   - **Custom** : Rôle personnalisé

### Gestion des Documents

#### Importer un Document
1. Cliquer sur "Importer Document"
2. Choisir le fichier (PDF, DOC, etc.)
3. Remplir les métadonnées :
   - **Nom** : Nom du document
   - **Description** : Détails du document
   - **Rôles requis** : Qui doit signer
4. Valider l'import

#### Organiser les Documents
- **Dossiers** : Créer des dossiers pour organiser
- **Tags** : Ajouter des étiquettes
- **Recherche** : Filtrer par nom, type, statut
- **Tri** : Par date, nom, taille

## ✍️ Système de Signatures

### Demandes de Signature

#### Créer une Demande
1. Aller dans l'onglet "Signatures"
2. Cliquer sur "Nouvelle Demande"
3. Remplir les informations :
   - **Document** : Sélectionner le document
   - **Signataires** : Choisir les participants
   - **Description** : Détails de la demande
   - **Date limite** : Échéance de signature
   - **Visibilité** : Publique ou privée
4. Valider la création

#### Gérer les Demandes
- **En attente** : Demandes non signées
- **Signées** : Demandes complétées
- **Expirées** : Demandes dépassées
- **Actions** : Voir, modifier, annuler

### Signer un Document

#### Processus de Signature
1. Recevoir une notification de demande
2. Cliquer sur "Voir la demande"
3. Prévisualiser le document
4. Cliquer sur "Signer"
5. Confirmer la signature

#### Types de Signature
- **Signature électronique** : Signature numérique
- **Signature biométrique** : Empreinte digitale
- **Signature par mot de passe** : Code secret

## 💬 Système de Chat

### Communication Interne

#### Accès au Chat
1. Aller dans l'onglet "Chat"
2. Sélectionner le processus
3. Voir les conversations

#### Envoyer un Message
1. Sélectionner un utilisateur ou groupe
2. Taper le message
3. Cliquer sur "Envoyer"

#### Types de Messages
- **Texte** : Messages simples
- **Documents** : Fichiers partagés
- **Images** : Captures d'écran
- **Liens** : URLs partagées

### Notifications

#### Types de Notifications
- **Messages** : Nouveaux messages reçus
- **Signatures** : Demandes de signature
- **Processus** : Mises à jour de processus
- **Système** : Alertes système

#### Gestion des Notifications
- **Marquer comme lu** : Cliquer sur la notification
- **Répondre** : Répondre directement
- **Ignorer** : Masquer la notification
- **Paramètres** : Configurer les alertes

## 🔗 Système de Pairing

### Connexion avec d'Autres Utilisateurs

#### Méthodes de Pairing
1. **QR Code** : Scanner le code d'un autre device
2. **Lien d'invitation** : Envoyer un lien
3. **Adresse manuelle** : Saisir l'adresse device

#### Processus de Pairing
1. **Initiative** : Un utilisateur initie la connexion
2. **Confirmation** : L'autre utilisateur confirme
3. **Établissement** : La connexion est établie
4. **Vérification** : Test de communication

#### Gestion des Connexions
- **Connexions actives** : Devices connectés
- **Demandes en attente** : Invitations non acceptées
- **Historique** : Connexions passées
- **Actions** : Déconnecter, renommer, supprimer

## 🔔 Notifications et Alertes

### Centre de Notifications

#### Accès aux Notifications
- **Icône cloche** : En haut à droite
- **Compteur** : Nombre de notifications non lues
- **Liste** : Toutes les notifications

#### Types d'Alertes
- **Urgentes** : Rouge, action immédiate requise
- **Importantes** : Orange, attention requise
- **Informatives** : Bleu, information générale
- **Succès** : Vert, confirmation d'action

### Configuration des Notifications

#### Paramètres
1. Aller dans "Paramètres" > "Notifications"
2. Configurer par type :
   - **Messages** : Notifications de chat
   - **Signatures** : Demandes de signature
   - **Processus** : Mises à jour
   - **Système** : Alertes système

#### Préférences
- **Son** : Activer/désactiver les sons
- **Pop-up** : Notifications en pop-up
- **Email** : Notifications par email
- **Push** : Notifications push (si supporté)

## 🛠️ Fonctionnalités Avancées

### Recherche Globale

#### Utilisation
1. Cliquer sur l'icône de recherche
2. Taper le terme recherché
3. Voir les résultats :
   - **Processus** : Processus correspondants
   - **Documents** : Documents correspondants
   - **Messages** : Messages correspondants
   - **Utilisateurs** : Utilisateurs correspondants

### Filtres et Tri

#### Filtres Disponibles
- **Date** : Filtrer par période
- **Type** : Filtrer par type de contenu
- **Statut** : Filtrer par statut
- **Utilisateur** : Filtrer par utilisateur

#### Options de Tri
- **Date** : Plus récent/ancien
- **Nom** : Alphabétique
- **Taille** : Plus grand/petit
- **Statut** : Priorité des statuts

### Export et Sauvegarde

#### Exporter des Données
```bash
## Export complet du profil
Export User Data > JSON

## Export des processus
Processus > Exporter > CSV

## Export des documents
Documents > Exporter > ZIP
```

#### Sauvegarde Automatique
- **Sauvegarde locale** : Données stockées localement
- **Synchronisation** : Synchronisation avec le serveur
- **Récupération** : Restauration des données

## 🚨 Dépannage

### Problèmes Courants

#### Interface ne se charge pas
```bash
## Vérifier le serveur
npm run dev

## Vérifier les logs
npm run dev --verbose

## Nettoyer le cache
npm run clean
```

#### Module WASM non trouvé
```bash
## Recompiler le module WASM
./scripts/setup-remote-deps.sh

## Vérifier le fichier
ls -la pkg/sdk_client_bg.wasm
```

#### Erreurs de connexion
```bash
## Vérifier les variables d'environnement
cat .env

## Tester la connectivité
npm run test:connectivity
```

### Support Utilisateur

#### Obtenir de l'Aide
1. **Documentation** : Consulter ce guide
2. **FAQ** : Questions fréquentes
3. **Support** : Contacter l'équipe
4. **Issues** : Signaler un problème

#### Signaler un Bug
1. Aller sur [Issues](https://git.4nkweb.com/4nk/ihm_client/issues)
2. Créer une nouvelle issue
3. Décrire le problème :
   - **Étapes** : Comment reproduire
   - **Comportement** : Ce qui se passe
   - **Attendu** : Ce qui devrait se passer
   - **Environnement** : OS, navigateur, version

## 📊 Métriques d'Utilisation

### Statistiques Personnelles
- **Processus créés** : Nombre de processus
- **Documents signés** : Nombre de signatures
- **Messages envoyés** : Communication
- **Temps d'utilisation** : Temps passé

### Performance
- **Temps de chargement** : Vitesse de l'interface
- **Temps de réponse** : Réactivité
- **Utilisation mémoire** : Consommation RAM
- **Taille des données** : Stockage utilisé

---

**🎯 Interface utilisateur ihm_client - Prête pour une utilisation quotidienne !** ✨