424 lines
11 KiB
Markdown
424 lines
11 KiB
Markdown
## 📖 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 !** ✨
|