4NK_node/modules/ihm_client/docs/USAGE.md

📖 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

# 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

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

Export Recovery

# 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

# Supprime définitivement le compte
# Demande de confirmation obligatoire
# Action irréversible

Logout

# 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

# 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

# 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

# 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é

# Recompiler le module WASM
./scripts/setup-remote-deps.sh

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

Erreurs de connexion

# 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
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 ! ✨