# 🚀 4NK Client - Application Web5 Application client pour l'écosystème 4NK, permettant la gestion sécurisée des appareils, le pairing, et les signatures de documents. ## 📋 Table des matières - [🚀 Démarrage rapide](#-démarrage-rapide) - [🏗️ Architecture](#️-architecture) - [🔧 Développement](#-développement) - [📊 Qualité du code](#-qualité-du-code) - [🤝 Contribution](#-contribution) ## 🚀 Démarrage rapide ### **Prérequis** - Node.js 18+ - Rust (pour le SDK) - npm ou yarn ### **Installation** ```bash # 1. Cloner les dépendances git clone # commit "doc pcd" from 28.10.2024 git clone # commit "Ignore messages" from 17.10.2024 git clone # 2. Build du SDK Rust cd sdk_common && cargo build cd ../sdk_client && cargo run # 3. Build et démarrage de l'application cd ../ihm_client_dev3 npm install npm run build_wasm npm run start ``` ### **Scripts disponibles** ```bash # Développement npm run start # Serveur de développement npm run build # Build de production npm run quality # Vérification de la qualité npm run quality:fix # Correction automatique # Tests et analyse npm run test # Tests unitaires npm run lint # Linting du code npm run type-check # Vérification TypeScript npm run analyze # Analyse du bundle ``` ## 🏗️ Architecture ### **Structure du projet** ``` src/ ├── components/ # Composants UI réutilisables ├── pages/ # Pages de l'application ├── services/ # Services métier ├── utils/ # Utilitaires et helpers ├── models/ # Types et interfaces └── service-workers/ # Workers pour les opérations async ``` ### **Technologies** - **Frontend**: TypeScript, Vite, HTML5, CSS3 - **SDK**: Rust (WebAssembly) - **Storage**: IndexedDB, Service Workers - **Communication**: WebSockets, PostMessage API ## 🔧 Développement ### **Standards de code** - TypeScript strict - ESLint + Prettier - Tests unitaires - Documentation JSDoc ### **Workflow** 1. Créer une branche feature 2. Développer avec tests 3. Vérifier la qualité: `npm run quality` 4. Créer une PR avec description détaillée ## 📊 Qualité du code ### **Métriques cibles** - Couverture de tests: > 80% - Complexité cyclomatique: < 10 - Taille des fichiers: < 300 lignes - Bundle size: < 500KB gzippé ### **Outils de qualité** - TypeScript strict mode - ESLint avec règles personnalisées - Prettier pour le formatage - Bundle analyzer pour l'optimisation ## 🤝 Contribution Voir [CONTRIBUTING.md](./CONTRIBUTING.md) pour les détails complets. ### **Démarrage rapide** ```bash # Fork et clone git clone cd ihm_client_dev3 # Installation npm install # Vérification de la qualité npm run quality # Développement npm run start ``` ## USER STORIES 1 - I can login with my adress device 2 - I can login with QR code 3 - J'accède à la page Process après ma connexion 4 - Dans l'interface Process, je peux sélectionner un processus avec sa zone 5 - Je reçois des notifications dans la page Process 6 - Dans le menu, je peux importer mes données au format JSON 7 - Dans le menu, je peux accèder à la page Account 8 - Dans la page Account, je peux cliquer sur mon profil via la bulle de profil en haut à gauche et une popup de profil s'ouvre 9 - Dans la popup de profil, je peux voir mes informations personnelles et modifier certaines d'entre elles dont le nom, le prénom 10 - Dans la popup de profil, je peux changer ma photo de profil 11 - Dans la popup de profil, je peux fermer la popup en cliquant sur le bouton "X" en haut à droite de la popup 12 - Dans la popup de profil, je peux cliquer sur le bouton "Export User Data", ce qui me génère un fichier JSON 13 - Dans la popup de profil, je peux cliquer sur le bouton "Delete Account", ce qui me demande à valider mon choix 14 - Dans la popup de profil, je peux cliquer sur le bouton "Logout", ce qui me déconnecte 15 - Dans la popup de profil, je peux cliquer sur le bouton "Export Recovery", ce qui me demandera de confirmer mon choix ou d'annuler, si je confirme, je dois retenir et écrire les 4 mots de récupération, le bouton ne sera plus accessible après cela 16 - Dans l'onglet Pairing de la page Account, je peux ajouter un nouveau "device" en cliquant sur le bouton "Add Device" 17 - Dans l'onglet Pairing de la page Account, je peux supprimer un "device" en cliquant sur l'emoji de la poubelle à côté du device que je souhaite supprimer 18 - Dans l'onglet Pairing de la page Account, je peux cliquer sur le bouton "Scan QR Code" pour scanner le QR Code d'un nouveau device 19 - Dans l'onglet Pairing de la page Account, je peux renommer un "Device" en cliquant sur son nom et en modifiant le nom 20 - Dans l'onglet Wallet de la page Account, je peux ajouter un nouveau "wallet" en cliquant sur le bouton "Add a line" 21 - Dans l'onglet Process de la page Account, je peux voir les Process disponibles et voir leur notifications en cliquant sur sur la sonnette à côté du processus 22 - Dans l'onglet Data de la page Account, je peux voir les données importées 23 - Je peux voir le contrat associé à une Data en cliquant sur le contrat dans la ligne de la Data 24 - Dans le menu je peux accèder à la page Chat 25 - Dans la page Chat, je peux voir les Processus 26 - Dans les Processus, je peux voir utilisateurs assignés à un rôle 27 - Dans les Processus, je peux envoyer des messages et des documents en cliquant sur le nom d'un utilisateur en en envoyant "send" 28 - Dans le menu je peux accèder à la page "Signatures" 29 - Je peux voir les documents à signer et vierge en cliquand sur l'emoji ⚙️ à côté du processus 30 - En cliquand sur l'onglet d'un processus, je peux voir les rôles assignés à un utilisateur en cliquant dessus 31 - En cliquand sur l'emoji 📁 à côté d'un rôle, je peux voir les documents associés à ce rôle 32 - Dans la vue des documents associés à un rôle, je peux créer un évènement de nouvelle signature pour tous les rôles associés à ce Processus, avec le bouton "New Request" 33 - En cliquant sur le bouton "New Request", une nouvelle fenêtre s'ouvre pour me permettre de rentrer la description, la visibilité, la date d'échéance, importer des documents, voir les signataires et "Request" 34 - Dans le menu, je peux me déconnecter avec le bouton "Disconnect" ## TO DO